JQuery Charts


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

jqPlot1jqPlot2jqPlot3peichart

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:
Advertisements

19 Responses to “JQuery Charts”

  1. LnddMiles Says:

    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!

  2. Depechie Says:

    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 )

    • Ed Foh Says:

      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.

      • Depechie Says:

        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!!

      • Ed Foh Says:

        nice one! Thanks for the jQuery snippet.

  3. bala murugan Says:

    Hey Ed!
    Great example of using jqPlot. I’m trying it out myself now.i just want an example for pie chart also………….

    • Ed Foh Says:

      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.

  4. bala murugan Says:

    Hey Ed!
    Thanks for your new sample Ed..am really satisfied…cheers……..

  5. bala murugan Says:

    Hey Ed!
    Pie chart worked out well Ed..now i want an example for pie chart(3d)…

  6. Deepak Says:

    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

  7. skumar Says:

    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.

  8. nixhicks Says:

    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

  9. pavani Says:

    I want to download the pie-chart image in my local system from JQ PLOT, but if i do so, a blank image is getting downloaded. Can anyone help me with the script to download the pie-chart graph.

    Best Wishes,
    Pavani

  10. Sulakshana Says:

    Do you have provision for 3D pie chart instead of 2D?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: