XML Data Visualization with jQuery Chart

In this post, we will introduce you how to add the jqxChart widget to your web page and build it from XML Data.

Create a HTML file called Chart.html that contains the following HTML code:


<html lang="en">
<head>
    <title id='Description'>jqxChart Line Series Example</title>
    <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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source = { datafields: [
                    { name: 'Date' },
                    { name: 'Quantity' },
                    { name: 'Description' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: '../sampledata/orderdetails.xml'
            }

            var dataAdapter = new $.jqx.dataAdapter(source);

            // prepare jqxChart settings
            var settings = {
                title: "Order Details",
                showLegend: true,
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'Date',
                        formatFunction: function (value) {
                            var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                            return months[new Date(value).getMonth()];
                        },
                        showGridLines: true
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            valueAxis:
                            {
                                displayValueAxis: true,
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Quantity', displayText: 'Quantity' }
                               ]
                        }
                    ]
            };
            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='jqxChart' style="width: 680px; height: 400px">
    </div>
</body>
</html>

In the Head section of the page, we include the jQuery javascript file, the jQWidgets core framework file – jqxcore.js, the jQWidgets data binding file – jqxdata.js, the main jqxChart plug-in file – jqxchart.js file, and the base jQWidgets stylesheet – jqx.base.css. On to the body of the page. we create a DIV tag as the placeholder for the chart with a unique ID = “jqxChart”. The chart is then instantiated using the jqxChart constructor function. The constructor takes in the following parameters: source – dataAdapter object, categoryAxis and seriesGroups objects, colorScheme(available values are from ‘scheme01’ to ‘scheme11’), showLegend(displays the legend section in the chart) and the Chart title. In the source object initialization, we specify the datafields array, the root and record properties, the url(points to a xml data file) and we set the datatype to ‘xml’.

This is the XML Data file that we use to build the Chart.


<?xml version="1.0" encoding="utf-8" ?>
<Orders>
  <Order>
    <Date>1/1/2011</Date>
    <Quantity>10</Quantity>
    <Description>Beverages</Description>
  </Order>
  <Order>
    <Date>2/2/2011</Date>
    <Quantity>15</Quantity>
    <Description>Condiments</Description>
  </Order>
  <Order>
    <Date>3/3/2011</Date>
    <Quantity>20</Quantity>
    <Description>Grains/Cereals</Description>
  </Order>
  <Order>
    <Date>4/6/2011</Date>
    <Quantity>30</Quantity>
    <Description>Beverages</Description>
  </Order>
  <Order>
    <Date>5/10/2011</Date>
    <Quantity>40</Quantity>
    <Description>Beverages</Description>
  </Order>
  <Order>
    <Date>5/12/2011</Date>
    <Quantity>50</Quantity>
    <Description>Grains/Cereals</Description>
  </Order>
</Orders>

In the seriesGroup object, the series group type is ‘column’ which means that the data will be visualized by columns. The valueAxis definition specifies the appearance of the Y-axis. This series group contains one serie that will render data corresponding to the Quantity dataField that it binds to. In this example we bind the Category Axis (horizontal X axis) to the Date property of our data source.

Blogs