How to pass json data to highcharts series?

Question

I have following json array which is generated at runtime. Hence the number of name/data pairs varies.

`var sales = { "SalesData" : [ 
{ "name"  : "AllProducts|Canada", "data" :[44936.0,50752.0] },
{ "name"  : "AllProducts|Mexico", "data" : [200679.0,226838.0] },
{ "name"  : "AllProducts|USA",    "data" : [288993.0,289126.0] }
                    ]}    `

I want to pass this data to series in highcharts.

This is how I am doing it currently.

series: [     
        {name:sales.SalesData[0].name,data:sales.SalesData[0].data},
        {name:sales.SalesData[1].name,data:sales.SalesData[1].data},
        {name:sales.SalesData[2].name,data:sales.SalesData[2].data}

            ]

But if the number of elements in array are changed then this won't work. How do I solve this problem ? Demo code will help me.

I have refereed following questions but I was not able to solve the problem.

Dynamically adding to Highcharts

Highcharts series data array

Solution 1

I solved the problem

Changed json array as follows:

var sales = [ 
              { "name"  : "AllProducts123|Canada", "data" :[44936.0,50752.0] },
              { "name"  : "AllProducts|Mexico", "data" : [200679.0,226838.0] },
              { "name"  : "AllProducts|USA",    "data" : [288993.0,289126.0] }
            ]

Now pass it directly to series in highcharts.

 series:sales

Done !!!!!

Solution 2

Instead of constructing the series array manually you could loop through the sales variable data and construct the array. So what ever the number of elements in the sales.SalesData array, all items will be there in the series array

var series = [],
    salesData= sales.SalesData;

for (var i=0 i< salesData.length; i++) {
    series.push({"name" : key, "data" : sales[key]})
}

This constructed series array is part of the object which you must pass as argument to highcharts method.

var chartdata = {
    chart: {type: 'column'},
    title: {text: 'Sales Data'},
    xAxis: {
        categories: ['Category 1','Category 2']
    },
    yAxis: {
        min: 0,
        title: {text: 'Sales'}
    },
    series : []
}

chartdata.series = series;

$('#chart').highcharts(chartdata);

where #chart is the container where you want to display the chart.

you can also refer to the fiddles which are available in their demo pages for each type of chart to know more on how to display a particular type of chart.

Comments

[Pradip Shenolkar]

I have managed to put the data in series array var series = []; for(var i = 0; i< sales.SalesData.length; i++){ series.push({name : sales.SalesData[i].name , data : sales.SalesData[i].data}); } But how do I pass this array to series in highcharts ?

[Pradip Shenolkar]

And I am accessing it this way : series[0].name and series[0].data

[Anbarasan]

@PradipShenolkar this series is part of the object which you need to send to highcharts method. check the edited answer and also the js fiddles available in their demo pages linked in the answer for more options and how it is done.

[zero8]

For others reading this , the Json data must be formatted in js array format var sales = [ ] according to the need of the highchart series data.