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


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.

   var paper = Raphael('canvas');
   paper.customAttributes.sector = function(cx, cy, r, startAngle, endAngle) {      
        var rad = Math.PI / 180,
        x1 = cx + r * Math.cos(startAngle * rad),
        x2 = cx + r * Math.cos(endAngle * rad),
        y1 = cy + r * Math.sin(startAngle * rad),
        y2 = cy + r * Math.sin(endAngle * rad),
        flag = (Math.abs(endAngle - startAngle) > 180);

        return {
            path:[["M", cx, cy,],["L", x1, y1,],["A", r, r, 0, +flag, 1, x2, y2,],["z"]]

So sector defines a function that returns me an SVG path that represents a pie arc. For details on SVG path and a pie arc see one my previous post.
The next important thing is to change the attribute values over time so that the change is reflected by a smooth animation.  That’s where you use the Raphael animate() method. Here’s how to do it,

   path.animate({sector:[cx, cy, radius, startAngle, endAngle]}, animSpeed, function() {
       console.log('callback function called after animation');

So I will be changing the values (from their initial values) of the sector custom attribute over a time duration defined by the animSpeed variable. This will animate the change over time. Overall a simple example with a nice animated effect for a regular boring pie chart. Try this out. Check out the demo and look at the source code. I have inserted code comments for every line for easy understanding.

Further Enhancements:
1) Add interactivity to the chart. I have already added a click listener for each pie slice.
2) Change the start angle of rotation. Right now the demo starts from an angle of 0 i.e the positive x-axis. You can change that to 90, -90 or whatever angle you need for the start of the animation.
3) And finally your imagination is the limit.


About these ads

One thought on “Animated growing pie chart with Rapahel JS

  1. Pingback: Creating a SVG Pie Chart – HTML5 | RIA Lab

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s