Highchart Callback Refactoring not working, and how to display multiple series using multiple Ajax data - highcharts

Question

I am working on a project utilizing highcharts and highstocks. I ran into 2 problems that I like to ask for your help on.
How do I code a highchart with a multiple series with each series getting its data source from a distinct Ajax call? The example on the Highcharts website only shows either a single Ajax source or a multiple series chart with pre-populated dummy data.
I am trying to separate the draw of highchart from the ajax call function, since the embedded callback method used to draw the chart can get a little hard to read. But when I factored out the highcharts drawing code from the call back section, the highchart display no longer works, ie the highcharts call does not return anything. For example:
this work:
$.getJSON(myUrl, function(data){
$('#ajax-panel').highcharts('chart', {
rangeSelector : {
selected : 1
},
title : {
text : 'analysis chart'
},
series : [
{
name : 'dataseries',
data : data,
id : 'dataseries',
tooltip: {
valueDecimals: 2
}
}
]
});
this does not work, although syntax wise I don't see anything wrong.
$.getJSON(myUrl, function(data){
drawChart(data);
});
function drawChart(data){
$('#ajax-panel').highcharts('chart', {
rangeSelector : {
selected : 1
},
title : {
text : 'analysis chart'
},
series : [
{
name : 'dataseries',
data : data,
id : 'dataseries',
tooltip: {
valueDecimals: 2
}
}
]
});
};
Thanks!

Answer 1

1) You need to get all series and push into one array, then in highcharts refer to it. What is important, chart should be initialised in the callback of last ajax.
When / then() jquery functions should be also helpful.
2) Syntax seems to be correct, please check your console (click F12 / developer tools) and observe if you get any errors.