jQuery Graphing Plugin – jqPlot

I was recently looking for a nice graphing plugin to create some monthly charts for on the homepage of the Donations Xtreme admin panel, instead of the messy overview that it currently uses. While all of the plugins that I found created charts, they just didn’t have the nice feel that I was after. I then found jqPlot, which instantly sat above the rest. The charts created by this plugin just plain look better.

The thing that amazed me with jqPlot is the amount of plugins that came with it to do different things. So many different types of charts can be created using this plugin, but by using plugins, the code remains nice and quick, and you only load what you are going to need. And there areplugins for added functionality too. For example you can add trend lines, add a tooltip for where the cursor is, or load external data via ajax.

Creating Graphs

It is easy to use also. After uploading the files you need, all you have to add to your header is:

<script src="jquery.js"></script>
<script src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

And were ready to start making pretty graphs

If we add a div to our page to contain the chart:

<div id="chart_container" style="height:400px;width:600px; "></div>

Then we can add the chart generating code to our onload event:

window.onload=function(){
	$.jqplot('chart_container',  [[[1, 2],[2,4],[3,8],[4,16],[5,32],[6,64]]]);
}

And we end up with a nice graph like below.

Customising the Graphs

To make it look a little nicer, we can add a title, axis titles, change colours, change data point markers, pretty much anything we want. For a full list of options, see the core summary at http://www.jqplot.com/docs/files/jqplot-core-js.html. A simple example is shown below:

window.onload=function(){
	$.jqplot('chart_container',  [[[1, 2],[2,4],[3,8],[4,16],[5,32],[6,64]]], {
		title:'Simple jqPlot Example',
		axes:{
			xaxis:{label:'x'},
			yaxis:{min:0, max:75,label:'y'}
		},
		series:[{
			color:'#00cc00',
			label:'y=2^x',
			markerOptions:{style:'filledSquare'}
		}],
		legend:{
			show: true,
			location:'se'
		}
	});
}

Which will give the following more user friendly graph.

I really like this plugin, the graphs look nice and they easily beat tables of data. To get an idea of what is really possible with jqPlot, check out the example page or download the source, and check out the examples folder. It is amazing just how much this plugin can do.