Question

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");

}

Answer 1

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