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.

The result of the above code is here: