jQuery Pie Chart

In this post, we will show you how to create a Pie Chart with the jqxChart widget. The first step is to include the JavaScript and CSS files.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
The second step is to initialize the jqxDataAdapter plug-in and load it with data.
var source =
datatype: "csv",
datafields: [
{ name: 'Browser' },
{ name: 'Share' }
url: '../sampledata/desktop_browsers_share_dec2011.txt'
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true });
The third step is to add a DIV tag for the jqxChart widget.
<div id='jqxChart' style="width: 600px; height: 400px;">
The fourth and most important step is to create the Chart’s settings object.
// prepare jqxChart settings
var settings = {
title: "Desktop browsers share in Dec 2011",
description: "(source: wikipedia.org)",
source: dataAdapter,
colorScheme: 'scheme01',
type: 'pie',
showLabels: true,
dataField: 'Share',
displayText: 'Browser',
labelRadius: 100,
initialAngle: 15,
radius: 130,
formatSettings: { sufix: '%', decimalPlaces: 1 }
The source property in the above code points to the jqxDataAdapter plug-in, so the chart will be loaded with data from the data adapter. In the seriesGroups initialization, we set the ‘type’ property to ‘pie’ to make the Chart display the data into sectors of a pie. The pie chart is divided into sectors and the arc length of each sector is proportional to the quantity it represents. Together, the sectors create a full disk. The ‘dataField’ property is set to point to a valid data field in the data source i.e each record must have a property or column name equal to the data field string. Here’s the data that we use in this post:
Internet Explorer, 33.3
Firefox, 26.5
Chrome, 25.4
Safari, 7.0
Opera, 4.6
Other, 3.2
The final step is to initialize the Chart by passing the settings object as parameter to the jqxChart constructor.
// setup the chart
The result is below: jquery-pie-chart

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxChart and tagged , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply