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

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

• javascript
• jquery
• json
• highcharts

• What do you mean by dynamically passing the data? – Kushal Commented Apr 15, 2015 at 7:08
• If this is working correctly here,then number of change in array should not affect.paste array which is not working for you – CodeWithCoffee Commented Apr 15, 2015 at 7:43
• so you want to add more data after the highcharts is initialized .. correct me if i am wrong! – Kushal Commented Apr 15, 2015 at 7:44
• @CodeWithCoffee There is some misunderstanding. I want to pass json data dynamically. So that if the json array is changed it should automatically pass right number of name/ data pairs to series. – Pradip Shenolkar Commented Apr 15, 2015 at 7:47

2 Answers 2

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 !!!!!

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.