Charting with JavaScript

Last week a co-worker of mine sent me a link for the gRaphaël charting library. gRaphaël is a full fledged charting library written entirely in JavaScript. Normally when I need to do charting on a website I resort to using the Microsoft Chart Controls. Unfortunately the MS Chart Controls run on the server side, rely on IIS and tend to a require a slight learning curve before you can become efficient with them. Since the gRaphaël library is written in JavaScript it is lightweight, easy to use and it will run in almost any browser. Since seeing is believing, here is a walkthrough on how to create your first pie chart with gRaphaël:

Step One - add a script reference to the raphael.js and g.raphael.js. These two files are required no matter what type of chart you are trying to render.

<script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script> 
<script src="http://g.raphaeljs.com/g.raphael.js" type="text/javascript" charset="utf-8"></script> 

Step Two - Once you determine what type of chart you are trying to draw you will need to include additional files. For example if you are drawing a pie chart you will also want to include the g.pie.js file:

<script src="http://g.raphaeljs.com/g.pie.js" type="text/javascript" charset="utf-8"></script>

Step Three – Add a div to your page that you will use as a place holder for the rendered chart. The id attribute on the div tag will be referenced in the document.ready event to wire up the control.

<div id="pieDemo"></div> 

Step Four – Wire up the JavaScript and render the chart. I am going to build a pie chart which displays the market share for the top 3 browsers. According to a post I found on softpedia on October 6th, IE leads the race with 59.65, followed by Firefox with 22.96 and Chrome with 7.98. The pie chart will have a legend and display the percentages. The legend will be positioned on the left hand side. Here is the code:

$(document).ready( function() {
    var r = Raphael("pieDemo");
    r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
    r.g.text(320, 70, "Top 3 Browser Usage").attr({"font-size": 20});
    var pie = r.g.piechart(320, 240, 100, [59.65, 22.96, 7.98], {legend: ["IE - %%.%%", "Firefox - %%.%% ", "Chrome - %%.%%" ], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});
});

And here are the results...

You have to admit that building this pie chart was extremely simple. A few script references, a div tag and a little bit of JavaScript and you are done. Much simpler than the steps that I had to go through in order to use the MS Chart Controls in ASP.NET MVC.

Anyway, I hope you find this control as useful as I did. If so, then please make a donation to the author Dmitry Baranovskiy. Thanks Dmitry!