score:4

$.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/

score:4

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()


Related Query

More Query from same tag