What is the best way to create pie graphs and other animated dynamic info graphics?


What is the best way to create pie graphs and other animated dynamic info graphics?

Should I look into js libs like paper.js or should I create my own using minimal js and css3?

Examples are really what I'd like to see. Thanks!

Problem courtesy of: fancy


There are a number of javascript libraries out there which will do this for you. There certainly isn't any need to be rolling your own code.

If you do want to write your own, be aware that to get the kind of effects available with some of the libraries will take a lot more than minimal js code. Sure you could write a very basic script that draws pie segments in a fairly small amount of code, it won't have the animations or dynamic properties you'd get from using a library. And most libraries really aren't that big considering how much they do.

My favourite library for this sort of thing is Raphael, along with it's graphing sister library g.Raphael.

The beauty of Raphael is that it makes it very easy to produce quite complex graphics, including some very nice animated graphs. See the examples on the site above, which includes pie charts.

It's all Javascript-based so you can update it on the fly.

In addition, Raphael scores over other similar libraries in that it works flawlessly even in older versions of IE (as far back as IE6!), as it uses SVG on modern browsers, and falls back to VML for old versions of IE.

Hope that helps.

Solution courtesy of: Spudley


In my opinion, Google Chart is a good option: http://code.google.com/apis/chart/

Discussion courtesy of: Miguel Prz

I have used and actually liked this library: http://www.highcharts.com/

There are quite a few other options though - I see no point in reinventing the wheel.

Discussion courtesy of: deviousdodo

This recipe can be found in it's original form on Stack Over Flow.