jqPlot – javascript charting library
I was looking for a light-weight, simple and easy way to render some graphs and my search ended at jqPlot. Although I wanted to use protovis, it seemed too much of work to get a simple line/bar chart with x-y axes up and running. jqPlot on the other hand seems to fulfill whatever I expected such a library to do.
jqPlot is built on top of jQuery, the javascript framework everyone seems to be using now-a-days. jqPlot has plenty of examples and documentation for getting started. If you want to draw linegraphs you’ll have everything out of the box. But bargraphs don’t have the much needed tooltip. So you’ll have to add custom tooltip for your bargraphs, which requires you to handle ‘jqplotMouseMove’ event listener hook. It wasn’t very obvious how to do it from the documentation, but thanks to their google group discussions, I was able to get some basic tooltip for bargraph as well. Should you need help with the same, here are useful links:
But it was not clear to me what value was coming in to the event handler. And what was it that I need to display as tooltip. Here is what helped me figure it out:
“With Firebug you can see that the “neighbor” object is the one that
indicates which bar has been moused over and then you can do, for
example,
var myText = neighbor.data[1];
to populate what is displayed on mouseover.”
So if you are considering to plot a simple graph, jqPlot is of great help. Specifying the type of axes, clickable legend labels to hide some data, locating the legend are all straight-forward. Also irrespective of the order of your data in the javascript array, the date axis sorts the data by date automatically.
