add the animation option to raphaeljs pie chart

Question

I want to draw animated pie chart with raphaeljs plugin; And I found a pie charting function (Paper.piechart) in g.raphaeljs library, this is thier related demo

http://g.raphaeljs.com/piechart2.html

But i don't know how to animate this chart (when an event is performed) without reRendreing the plot like this demo:

http://raphaeljs.com/growing-pie.html draw In other words i want add the animation option of the second demo to the first one. Can anyone help me ?

He is using using [customAttributes](http://raphaeljs.com/reference.html#Paper.customAttributes) to draw and animate the pie slices. Have a look at the page source code. — Andrei Nemes, Mar 16 '13 at 20:21

score 0 · Answer 1 · answered Jan 26 '14 at 11:59

this is a working demo of a Raphael pie chart that grows on creation and has the slice bounce effect on mouse hover:

<div id="pie"></div>
<script>
 var paper = Raphael("pie", 400, 200);
 var pie = paper.piechart(
   100, // pie center x coordinate
   100, // pie center y coordinate
   90,  // pie radius
    [18.373, 18.686, 2.867, 23.991, 9.592, 0.213], // values
    {
    legend: ["Windows/Windows Live", "Server/Tools", "Online Services", "Business", "Entertainment/Devices", "Unallocated/Other"]
    }
  );

//animation - grow pie      
pie.each(function(){
    this.sector.scale(0, 0, this.cx, this.cy);
    this.sector.animate({ transform: "s1 1 " + this.cx + " " + this.cy }, 1000, "bounce");
});

// Bounce pie slice
pie.hover(function () {
  this.sector.stop();
  this.sector.animate({ transform: "s1.1, 1.1 " + this.cx + " " + this.cy }, 500, "bounce");
  this.label[0].attr({ r: 7.5 });
  this.label[1].attr({ "font-weight": 800 });
},

function () {
  this.sector.animate({ transform: "s1 1 " + this.cx + " " + this.cy }, 500, "bounce");
  this.label[0].animate({ r: 5 }, 500, "bounce");
  this.label[1].attr({ "font-weight": 400 });

})

</script>

add the animation option to raphaeljs pie chart

1 Answers1