Pie Charts with jqPlot JavaScript Charting Library
It’s incredibly easy to generate great looking pie charts with jqPlot. jqPlot is a jQuery plugin that can be use to generate pure HTML5 charts. Create pie charts in jqPlot is as easy as it is to create bar charts, the only difference is how we pack the data.
Getting Started
The code snippets for this example assume you have already downloaded jqPlot and have included the following JavaScript and CSS source files from the distribution.
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" /> <script src="jqplot/jquery.min.js" ></script> <script src="jqplot/jquery.jqplot.min.js" ></script> <script src="jqplot/plugins/jqplot.pieRenderer.min.js"></script>
The jqPlot graphs are drawn on a div tag and this example will require the following HTML snippet.
<body onload='drawChart()'> <div id="chartDivId" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div> </body>
Pie Chart Data
A single slice of a pie chart is stored in a two element array where the first elemnt contains the string label and the second element stores the slice data value. A single pie series is made up of one ore more slices, and a pie chart may have one or more series. The typical pie chart is made up of one series, but there are some charts that can allow for multiple pie series.
function drawChart() {
var slice_1 = ['North America', 150];
var slice_2 = ['Europe', 50];
var series = [slice_1, slice_2];
var data = [series];
var options = {
title: 'Sales by Region',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer
},
legend: { show:true, location: 'e' }
};
$.jqplot('chartDivId', data, options);
}
jqPlot will all compute the percent for each slice based on it’s value, so the slice for North America will be 75%, and Europe will be 25% for the the values 150 and 50, respectively. The pie chart generated from the above code will be simple and undecorated.
jqPlot Pie Chart
We can add additional options, for example, maybe we want to display the percent amount for each slice. To do so, we can update the options object with the showDataLabels property such as the in the following JavaScript code snippet.
var options = {
title: 'Sales by Region',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
};
By default, the showDataLabels property shows the percent of the slice. To show the slice data value, rather than the percent, set the dataLabels property to ‘value’ such as the following code.
var options = {
title: 'Sales by Region',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value'
}
},
legend: { show:true, location: 'e' }
};
You can further change how the pie chart is rendered by setting the fill, sliceMargin, and lineWith rendererOptions object properties. The fill property accepts a boolean value, and you can specify the sliceMargin and lineWith with an interger value. You can also specify the angle from which to start with the startAngle property. Putting all this together, you can create a pie chart like the following.
var options = {
title: 'Sales by Region',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: false,
sliceMargin: 5,
lineWidth: 5,
startAngle: 45
}
},
legend: { show:true, location: 'e' }
};
jqPlot_Pie_Chart with No Fill
Donut Chart
Using the same data and same options object, you can render a pie chart as a donut. To display a donut chart you will need to load int the jqPlot donut renderer.
<script src="jqplot/plugins/jqplot.donutRenderer.min.js"></script>
Once you have loaded the donut renderer, just update the render property in the options object.
var options = {
title: 'Sales by Region',
seriesDefaults: {
renderer: jQuery.jqplot.DonutRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: false,
sliceMargin: 5,
startAngle: 45
}
},
legend: { show:true, location: 'e' }
};
jqPlot Donut Chart
