Blogs

In this post, we will show you how to add a Line Chart to your web pages. We will use this sample data:

var data = [
	{ "x": 1, "y1": 1, "y2": 8 },
	{ "x": 2, "y1": 4, "y2": 5 },
	{ "x": 3, "y1": 3, "y2": 4 },
	{ "x": 4, "y1": 5, "y2": 8 }
]

The Chart will render two lines. The first line will connect the following points: (1, 1), (2, 4), (3, 3) and (4, 5). The second line will connect these points: (1, 8), (2, 5), (3, 4) and (4, 8). Now, let’s create our settings object. This object set ups the chart’s categoryAxis(horizontal X axis), valueAxis(vertical Y axis) and the line chart series.

// prepare jqxChart settings
var settings = {
    source: data,
    title: "Line Chart",
    categoryAxis:
    {
        dataField: 'x'
    },
    colorScheme: 'scheme05',
    seriesGroups:
        [
        {
            type: 'line',
            valueAxis:
            {
                unitInterval: 1,
                minValue: 0,
                maxValue: 10
            },
            series: [
                { dataField: 'y1', displayText: 'Line 1' },
                { dataField: 'y2', displayText: 'Line 2' }
            ]
        }
    ]
};

The ‘source’ property of the ‘settings’ object points to our sample data. This will be the data used by the Chart. The ‘title’ and ‘colorScheme’ properties specify the Chart’s title and visual style. It’s important to set the dataField property of the categoryAxis(horizontal X axis). In the seriesGroups, we set the series type to ‘line’ and create two series with ‘y1’ and ‘y2′ as data fields. The series define the data points to plot on the chart. The valueAxis definition specifies the minimum and the maximum value to display on the Y-axis as well as the unit interval. The last step is to select a DIV tag with id=’jqxChart’ and pass the settings object to the jqxChart constructor.

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