Blogs

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;">
</div>

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',
    seriesGroups:
        [
            {
                type: 'pie',
                showLabels: true,
                series:
                    [
                        { 
                            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
$('#jqxChart').jqxChart(settings);

The result is below: