Documentation

Working with Chart Series

jqxChart allows you to visualize data in multiple series. In jqxChart series are grouped together into series groups. A series group specifies the type of the series in the group and contains the definition and one or more series bound the data fields in the source. In addition, a series group may have its own valueAxis and xAxis.


For example, imagine you're working with the following JavaScript array of objects which defines seven data records: 
var sampleData = [
    { Day:'Monday', Keith:30, Erica:15, George: 25},
    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
    { Day:'Thursday', Keith:35, Erica:25, George: 45},
    { Day:'Friday', Keith:20, Erica:20, George: 25},
    { Day:'Saturday', Keith:30, Erica:20, George: 30},
    { Day:'Sunday', Keith:60, Erica:45, George: 90}
];
The following code defines two series group of different type: 
seriesGroups:
[
    {
        type: 'bubble',
        series: [
                { dataField: 'George', displayText: 'George'}
            ]
    },
    {
        type: 'line',
        series: [
                { dataField: 'Keith', displayText: 'Keith'},
                { dataField: 'Erica', displayText: 'Erica'},
            ]
    }
]
In the above example the series group type is 'line' which means that the data points will be connected by lines. The valueAxis definition specifies the minimum and the maximum value to display on the Y-axis as well as the unit interval and the text to display next to the Y-axis. This series group contains three different series. Each of them will render data corresponding to the dataField that it binds to. In this example, the data will be displayed as 3 lines connecting the respective data points for Keith, Erica and George. The first line will connect the points with Y-values of 30, 25, 30, 35, 20, 30, 60. 
<html lang="en">
<head>
    <title id='Description'>jqxChart Column Series Example</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
		
            // prepare chart data
            var  sampleData = [
                    { Day:'Monday', Keith:30, Erica:15, George: 25},
                    { Day:'Tuesday', Keith:25, Erica:25, George: 30},
                    { Day:'Wednesday', Keith:30, Erica:20, George: 25},
                    { Day:'Thursday', Keith:35, Erica:25, George: 45},
                    { Day:'Friday', Keith:20, Erica:20, George: 25},
                    { Day:'Saturday', Keith:30, Erica:20, George: 30},
                    { Day:'Sunday', Keith:60, Erica:45, George: 90}
                ];
				
            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 50, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Day',
                    valuesOnTicks: false
                },
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 100,
                    unitInterval: 10,
                    title: {text: 'Time in minutes'}
                },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'bubble',
                            series: [
                                    { dataField: 'George', displayText: 'George'}
                                ]
                        },
                        {
                            type: 'line',
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith'},
                                    { dataField: 'Erica', displayText: 'Erica'},
                                ]
                        }
                    ]
            };
            
            // select the chartContainer DIV element and render the chart.
            $('#chartContainer').jqxChart(settings);
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="background:white;">
	<div id='chartContainer' style="width:600px; height: 400px"/>
</body>
</html>

The result of the above code is here: