Donut / Radial Chart with Raphael

javascript, raphael

Solution

Credits: On the raphael website there is an example that uses arcs. There is another question on stackoverflow with a similar topic: drawing centered arcs in raphael js. The accepted answer there has a simplified and commented version of the most important parts of the code, plus there is a jsfiddle link showing the code in action: http://jsfiddle.net/Bzdnm/2/

So what I did: I took the code from the linked question, combined it with eve, another javascript library made by the creator of RaphaelJS and what I got was this: http://jsfiddle.net/cristighenea/aP7MK/

At a glance:

1.after the arc is created we rotate it 180 degrees and begin animating it:

theArc.rotate(180, 100, 100).animate({
    arc: [100, 100, amount, 100, 40]
}, 1900, function(){
    //animation finish callback goes here
});

2.using eve we bind an event to *raphael.anim.frame.**

3.each time the event is fired we update the text in the middle with the new value of the arc

If you have any questions let me know

Problem

Im a beginner to Raphael. Can anyone show me how I can do a donut/radial chart, with animation, similar to these. http://dribbble.com/shots/670348-Segment-Graphs Im working at it now. So far Ive got this far. I will update as I make progress. My sumbling block right now is animating a change in color for the outer ring. ``` window.onload = function () { // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 var circle1 = paper.circle(50, 40, 40); var circle2 = paper.circle(50, 40, 20); circle2.attr("fill", "#fff"); circle2.attr("stroke", "#fff"); circle1.attr("fill", "#336699"); circle1.attr("stroke", "#fff"); } ```

Original source