What format of JSON data should be used for binding with chart series?

The JSON data used for binding with the chart should be an array of objects, containing properties for x value and y value of chart series in each object. The structure of the required JSON data is described as follows.

JS

//JSON data to bind with Chart
var chartData = [
    {   xValue: 'India',   yValue: 35, . . . . . . . . },
    {   xValue: 'Australia',  yValue: 42, . . . . . . . . },
    . . . . . . . . . . . . . .
    . . . . . . . . . . . . . .
];

In the above code example, the variable chartData contains the JSON data for the Chart. The field xValue represents data used for binding to the x value of series and yValue represents data used for binding to the y value of series. Instead of xValue and yValue, any name can also be used for the fields.

The following code example illustrates binding the JSON data with the Chart.

JS

$("#container").ejChart({
    series: [{
        
        //Binding series with a JSON data source
        dataSource: chartData,
       
        //Mapping name of the field containing X value to series
        xName: 'xValue',
       
        //Mapping name of the field containing Y value to series
        yName: 'yValue'

    }]
});

The following screenshot displays the chart bound with JSON data source.

Figure: Chart bounded to data source

JS Playground sample link: Data binding