Skip to content

Instantly share code, notes, and snippets.

@madmanlear
Created February 24, 2011 14:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save madmanlear/842251 to your computer and use it in GitHub Desktop.
Save madmanlear/842251 to your computer and use it in GitHub Desktop.
Animating pie chart slices in Raphaeljs
var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
var flag = (a2 - a1) > 180,
clr = (a2 - a1) / 360;
a1 = (a1 % 360) * Math.PI / 180;
a2 = (a2 % 360) * Math.PI / 180;
return {
path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
fill: "hsb(" + clr + ", .75, .8)"
};
};
points = [10, 20, 15];
total = 45;
start = 0;
paths = [];
for(i=0; i<=2; i++) {
size = 360 / total * points[i];
var slice = r.path();
slice.attr({segment: [250, 250, 200, start, start + size], stroke: "#000", title: "Slice "+i});
paths.push(slice);
start += size;
}
newPoints = [5, 20, 20];
start = 0;
for(i=0; i<=2; i++) {
size = 360 / total * newPoints[i];
paths[i].animate({segment: [250, 250, 200, start, start + size]}, 800);
paths[i].angle = start - size / 2;
start += size;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment