How to get multiple data series into Highcharts

Question

The following code works:

var options1 = {
    chart: {
        renderTo: 'container1'
    },
    series: [{}]
    };

$.getJSON('tokyo.jsn', function(data){
        options1.series[0].data = data;
        var chart = new Highcharts.Chart(options1);
    });

I want to be able to add a number of data series, so I am trying to take the reference to ‘new Highcharts’ out of the getJSON, but I don't seem to get it right. This following code does not work:

$.getJSON('tokyo.jsn', function(data){
    options1.series[0].data = data;
});
var chart = new Highcharts.Chart(options1);

I have also tried tackling it a different way but again the following code does not work:

var chart1 = new Highcharts.Chart({
    chart: {
        renderTo: 'container1'
    },
    series: [{}]
});

$.getJSON('tokyo.jsn', function(data){
    chart1.series[0].data = data;
});

Can anyone point me in the correct direction. I need to be able to support multiple data series by doing a second getJSON call like the following:

$.getJSON('sydney.jsn', function(data){
    options1.series[1].data = data;
});

The JSON code I'm using is as follows:

[ 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 ]

Thanks

Answer 1

$.getJSON is an asynchronous request. Once you receive the data, then you can pass it to Highcharts, thus you have to call that code from within the callback function of $.getJSON().

Try this, use a helper function to process your data and draw the chart, see drawChart() below:

var options1 = {
    chart: {
        renderTo: 'container1'
    },
    series: []
};

var drawChart = function(data, name) {
    // 'series' is an array of objects with keys: 
    //     - 'name' (string)
    //     - 'data' (array)
    var newSeriesData = {
        name: name,
        data: data
    };

    // Add the new data to the series array
    options1.series.push(newSeriesData);

    // If you want to remove old series data, you can do that here too

    // Render the chart
    var chart = new Highcharts.Chart(options1);
};

$.getJSON('tokyo.jsn', function(data){
    drawChart(data, 'Tokyo');
});
$.getJSON('sydney.jsn', function(data){
    drawChart(data, 'Sydney');
});

See fiddle: http://jsfiddle.net/amyamy86/pUM7s/

Answer 2

You can use solution used by Highcharts in that example: http://www.highcharts.com/stock/demo/compare

Or first create empty chart, without any series, and then use addSeries() function in each callback, see: http://api.highcharts.com/highcharts#Chart.addSeries()