An Update on Raphael JS and Charts

I've been a fan of Raphael JS for a long time. It's a javascript vector graphic library that (IMHO) blows canvas stuff away. Canvas definitely has its uses, but most of the stuff I see being done in canvas can be done more easily and more efficiently in SVG.

For a couple of years I've been using the Google Charts API. I've never been a fan of Flash graphs unless you need the bells and whistles of interactivity and zooming. So I've generally stuck with Google. However, I've never been pleased with the look and feel, and building URLs feels a little odd sometimes.

In comes Raphael Charts, or gRaphaël. It's simply a plugin for raphael from the creators of raphael. The demos are beautiful and they offer basic levels of interactivity with very little effort. And importantly; no Flash.

I had the pleasure of using it this evening and roughly clocked 6 minutes from the time I entered the raphael URL to the time my first pie chart was finished.

Here's some quick sample code in haml

1
2
3
4

#chart
:javascript
  var r = Raphael(document.getElementById("chart"));
  r.g.piechart(120, 120, 100, [#{@game.results.collect{|r| r.winnings}.join(",")}]);