Introducing Grapher.js

Last year I started working in the evenings on a simple library built on top of the great work of the Raphael project to do some pie charts and graphs for our helpdesk performance display at Daraco.

While still in a very early stage of development, I feel that it’s reliable enough to release today for public use if you’re wanting something to do basic pie charts and line graphs. Since it’s built on Raphael, Grapher.js generates reasonably good looking cross-browser graphs and charts using SVG.

There are some other options to do this out there, but almost all the good ones are closed source and not free, and others are based on the HTML5 canvas element. I don’t have a particular problem with canvas, but at the time I started working on this project, it seemed like Raphael was a good building block to get what I wanted.

Samples

Here’s two screen shots (scaled down from their original size) displaying real data that I’ve grabbed from the implementation of this library at the office.

Download Grapher.js

Feel free to grab Grapher from http://jameskirsop.com/grapher/grapher.js. (I’d appreciate it if you didn’t blow my bandwidth costs by hot linking to the file!) You’ll also want to make sure you grab Raphael – I’ve built on top of version 2.1.0.

If you want to look at some real samples that I use to test the display of the graphs and to see how it works, check out http://jameskirsop.com/grapher/tests/.

Bug Fixes, Patches?

If you’d like to contribute to the library, I’ll gladly accept patches etc. At the present moment I’ve got it licensed under copyright to my name while I work out what open source license to release under. Shoot me an email to james dot kirsop at gmail dot com if you’d like to get in touch!

Where to next?

There’s some work to be done with the current two graph types, mainly around of the key on the left, right (or at all) for pie charts, and labelling the points on the line graph. I’d then like to do some more work on the following:

• Interactive Graphs – making them responsive to mouse-overs to display additional data
• Live updating of line charts – so that they don’t need to be completely redrawn when a new graph comes in. Hopefully with some animation transitions as data arrives.
• More graph types – I’ve only written pie and line graphs because that’s what we needed. I’m hoping to drop in some bar charts soon!
• Snazziness – no one likes looking at boring graphs!

I’m hoping that this will be useful to some of you, and that I can keep growing this project!

James