Get my new tutorials in your inbox every week

Animated pie chart with Raphaël JS

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 in this tutorial I will share how to create an animated pie chart with Raphaël JS. So let’s get started….

What is Raphaël JS?

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

animated pie chart raphaeljs
Animated Pie chart Example

Show me the demo

Here’s the demo link. Run this in your browser http://jsphkhan.github.io/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

  • Add interactivity to the chart. I have already added a click listener for each pie slice.
  • 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.
  • And finally your imagination is the limit.

Git repo

Check out my Git repo for the full source code: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/growing_pie

Write a Comment

Your email address will not be published. Required fields are marked *