Animated growing pie chart with Rapahel JS

This is my first post after a long gap – almost one year. During this period I got busy with my regular work, family and other commitments. It was really hard to keep writing although I wanted to do that.
One of the tasks that I worked on a few months back was animating a pie chart as if it is growing from 0 to 360 degrees. And this post will share that with you. So let’s get started….
You might already be knowing that Raphael JS is a great JavaScript library to work with SVG in your web projects. So did I to create the pie chart. I am using Raphael and its features to create the pie chart and animate it. Here’s the demo link. Run this in your browser http://jsphkhan.github.io/growing_pie/

growing_pie

Quick Concepts: 
Most important functionality in the growing pie chart code is defining a custom Raphael paper attribute. So here’s the concept. If you have an attribute that you want to represent as a function and add your logic to it, you can create a custom attribute. For details you can see the official reference here. But here’s how I defined a custom sector attribute that represents a pie slice sector.Read More »