Im a beginner to Raphael. Can anyone show me how I can do a donut/radial chart, with animation, similar to these.

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

}

Im a beginner to Raphael. Can anyone show me how I can do a donut/radial chart, with animation, similar to these.

http://dribbble./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");

}

• javascript
• raphael

Share Improve this question Follow edited Dec 10, 2012 at 16:30 madphp asked Dec 10, 2012 at 16:18 madphpmadphp 1,76455 gold badges3232 silver badges7272 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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 mented version of the most important parts of the code, plus there is a jsfiddle link showing the code in action: http://jsfiddle/Bzdnm/2/

So what I did: I took the code from the linked question, bined it with eve, another javascript library made by the creator of RaphaelJS and what I got was this: http://jsfiddle/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