I recently came across an very nice plugin for JQuery to create graphs and charts. Like many other JQuery plugins, it’s very easy to learn and takes no time at all to get up and running. This plugin is call jqPlot. If you need charting capabilities, jqPlot is definitely worth taking a look at. jqPlot has internally a plugin system as well, which allows you to specify different kinds of ‘renderers’ to create different kinds of charts. This framework is really cool, as it provides many useful renderers out of the box like bar charts, pie charts, and line charts. I’ve done up a very simple webpage with some data on blogging statistics, and you can spin up different kinds of charts using the buttons.
Updated with Pie Chart
Besides just having different renderers to provide the different kind of charts, jqPlot also provides renderers for effects like draggable points, tooltips for the data at each point, shadows effects, and various cursor styles. It is also highly configurable with extensive properties for axes, legend, and of course the chart itself. See below for the JQuery code for this example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.dragable.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.highlighter.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script type="text/javascript">
var jsonObj = { "pageHits": [30, 60, 22, 5, 60, 88, 102], "rssHits": [33, 45, 121, 23, 55, 35, 77], "xAxis": ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'] };
var jsonPieObj = { "pageHits": [['Jan 2009',30], ['Feb 2009',60], ['Mar 2009',22], ['Apr 2009',5], ['May 2009',60], ['June 2009',88], ['Jul 2009',102]],
"rssHits": [['Jan 2009',33], ['Feb 2009',45], ['Mar 2009',121], ['Apr 2009',23], ['May 2009',55], ['June 2009',35], ['Jul 2009',77]] };
$(function() {
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
$('#barChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
});
$('#lineChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
});
$('#stackedBarChartButton').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
});
$('#pieChartButton1').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [jsonPieObj.pageHits], CreatePieChartOptions1());
});
$('#pieChartButton2').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [jsonPieObj.rssHits], CreatePieChartOptions2());
});
$('#pieChartButton1').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [jsonPieObj.pageHits], CreatePieChartOptions1());
});
$('#pieChartButton2').click(function() {
$('#chartDiv').html('');
$.jqplot('chartDiv', [jsonPieObj.rssHits], CreatePieChartOptions2());
});
});
function CreateLineChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
seriesDefaults:{
markerOptions:{
show: true,
style: 'diamond'
}
},
legend: {
show: true,
location: 'nw'
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreateBarChartOptions()
{
var optionsObj = {
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barPadding: 8,
barMargin: 10
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreatePieChartOptions1()
{
var optionsObj = {
title: 'Blog Statistics',
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.PieRenderer,
rendererOptions:{
sliceMargin:10,
shadowOffset:1,
shadowAlpha:0.5,
shadowDepth:5
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreatePieChartOptions2()
{
var optionsObj = {
title: 'Blog Statistics',
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.PieRenderer,
rendererOptions:{
diameter: 300,
fill:false,
sliceMargin:10,
shadowOffset:1,
shadowAlpha:1,
shadowDepth:2
}
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
function CreateStackedBarChartOptions()
{
var optionsObj = {
stackSeries: true,
title: 'Blog Statistics',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis
}
},
series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
legend: {
show: true,
location: 'nw'
},
seriesDefaults:{
shadow: true,
renderer:$.jqplot.BarRenderer
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
};
return optionsObj;
}
</script>
</head>
<body>
<div>
<div id="chartDiv" style="width:600px; height:400px;" /></div>
<div>
<input id="lineChartButton" type="button" value="Line Chart" />
<input id="barChartButton" type="button" value="Bar Chart" />
<input id="stackedBarChartButton" type="button" value="Stacked Bar Chart" />
<input id="pieChartButton1" type="button" value="Pie Chart for Page Hits" />
<input id="pieChartButton2" type="button" value="Pie Chart for RSS Hits" /></div>
</body>
</html>
If you want to learn about jqPlot, you can find the API here, and some good examples here. Download jqPlot framework here.
My good friend Manoj has also blogged about using JQuery Google Charts plugin. Read more about it here.
Download the source code here.
Updated (with addition of Pie Charts)
Download source code that uses a JSON object here.
| Share this post: |  |
 |
 |
 |
 |
 |
July 21, 2009 at 9:00 pm
Pretty cool post. I just stumbled upon your blog and wanted to say
that I have really liked reading your blog posts. Anyway
I’ll be subscribing to your blog and I hope you post again soon!
August 31, 2009 at 9:02 pm
Hey Ed!
Great example of using jqPlot. I’m trying it out myself now.
Small question, did you ever tried to set the series option through use of a JSON stream? ( I’m trying to generate a graph dynamically and that is the only thing I’m missing now )
August 31, 2009 at 10:57 pm
Hi Depechie
thanks for your comments.
To answer your question, yes I have. If you get a JSON reply stream coming back, you can use JSON.parse(text) to convert it into an object, and use it with jqPlot. With the json object, you can access the values via it’s properties.
I have added sample code that references a json object, you can download the new sample code to have a look, hope it helps. Cheers.
September 1, 2009 at 6:11 am
Hey Ed,
Great JSON example to get data through to jqPlot.
The only thing missing was setting the Series label values!
I needed to perform:
var seriesLabels = [];
$.each(data, function(entryindex, entry) {
seriesLabels .push({ label: entry['Name'] });
};
So I could just set this seriesLabels var to the Series option in jqPlot!!
September 7, 2009 at 7:37 am
Hey Ed!
Great example of using jqPlot. I’m trying it out myself now.i just want an example for pie chart also………….
September 7, 2009 at 12:59 pm
Hi Bala,
I’m sure you would have figured out using a pie chart. I’ve added pie chart examples in my sample. Please look at this updated post to download the new sample. Cheers.
September 9, 2009 at 6:21 am
Hey Ed!
Thanks for your new sample Ed..am really satisfied…cheers……..
September 9, 2009 at 12:56 pm
Hey Ed!
Pie chart worked out well Ed..now i want an example for pie chart(3d)…
September 9, 2009 at 10:18 pm
Hi Bala,
jqPlot does not have 3d charts, you can have a look at jQuery Google Charts for such a feature.
http://www.maxb.net/scripts/jgcharts/include/demo/
It’s pretty straightforward
September 10, 2009 at 4:42 am
Hey Ed!
Thanks for your info……
September 15, 2009 at 5:38 am
Hi,
Good Example,But i like to know in Pie chart how to display the numbers next to legend.for example 30 “legendcolor” jan2000 .How to display he number of the colour
October 9, 2009 at 5:01 am
Hi,
This is awesome!!! One question I have is when I try to run CreateLineChartOptions(), I get a javascript error ‘xAxis’ is undefined. Can anyone please point out what I might be missing?.
Again thanks for the plugin.
November 26, 2009 at 9:39 pm
Hi and sorry,
I dont understand how can I use a dynamic JSON data input
I have a PHP file test.php with
and I write
…
$(function() {
var jsonObj;
$.getJSON(‘/test.php’, “”, function(data) {
jsonObj = data;
});
…
In FireBug I see the error “jsonObj is undefined”.
Can me help anybody? Thanks!
nixhicks
September 1, 2009 at 7:14 am
nice one! Thanks for the jQuery snippet.