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.

   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.

Source: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/growing_pie

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:

WordPress.com Logo

You are commenting using your WordPress.com 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