Blogs

In this post, we will show you how to create a Donut Chart with the jqxChart widget. 1. The first step is to include the required JavaScript and CSS files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.0.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>

2. The next step is to get the data that we want to display. We will use the jqxDataAdapter for that task.

var data = [
    {Browser: "Internet Explorer", Share: 33.3},
    {Browser: "Firefox", Share: 26.5},
    {Browser: "Chrome", Share: 25.4},
    {Browser: "Safari", Share:7.0},
    {Browser: "Opera", Share:4.6},
    {Browser: "Other", Share:3.2}
]
    
// prepare chart data as an array
var source =
{
    datatype: "array",
    datafields: [
        { name: 'Browser' },
        { name: 'Share' }
    ],
    localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

3. Add a DIV tag to the body section of your web page and set the Chart’s display size.

<div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
	top: 0px;">
</div>

4. Prepare the Donut Chart settings. In order to display a Donut Chart, we need to set the chart’s type to ‘donut’. The radius setting specifies the Donut Chart’s outer radius. The innerRadius setting specifies the size of the inner circle.

var settings = {
		title: "Desktop browsers share in Dec 2011",
		description: "(source: wikipedia.org)",
		enableAnimations: true,
		showLegend: false,
		legendPosition: { left: 520, top: 140, width: 100, height: 100 },
		padding: { left: 5, top: 5, right: 5, bottom: 5 },
		titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
		source: dataAdapter,
		colorScheme: 'scheme02',
		seriesGroups:
			[
				{
					type: 'donut',
					showLabels: true,
					series:
						[
							{
								dataField: 'Share',
								displayText: 'Browser',
								labelRadius: 100,
								initialAngle: 15,
								radius: 130,
								innerRadius: 50,
								centerOffset: 0,
								formatSettings: { sufix: '%', decimalPlaces: 1 }
							}
						]
				}
			]
	};

5. The final step is to call the jqxChart’s constructor and pass the settings object to it.

 $('#jqxChart').jqxChart(settings);

Online Sample: http://jsfiddle.net/jqwidgets/ux68H