HighChart is not working with multiple axis - highcharts

Question

I want to construct multiple y-axis spline Highchart, but I am getting Null in series.
When I use data manually so it works fine, but When I fetch data from URL it does not work. Also, I am going to prepare a function for creating multiple y-axes.
Can anyone please help me where I am wrong?
Here is my code
<script type="text/javascript">
var axisdata = [{url:"",text:"", yAxis: 1, scrollbar: true,type: "spline"},
{url:"", text:"", yAxix: 2, scrollbar:true, type: "spline"}];
var HighChartObj = {
title: {
text: 'Exchange Rates'
},
scrollbar: {
enabled: true,
showFull: false
},
yAxis: [],
series: [],
rangeSelector: {
selected: 1,
buttonTheme: {
visibility: 'hidden'
},
labelStyle: {
visibility: 'hidden'
},
inputDateFormat: '%H:%M:%S.%L'
},
};
function a(){
var defer = $.Deferred();
z = -1;
var axisLength = axisdata.length - 1;
jQuery.each(axisdata, function(key, value){
$.getJSON( value.url, function (data) {
var dataLength = data.length,
i = 0;
minValue = data[0].open;
maxValue = data[0].open;
var finalData = [];
var new_from_date = 0;
var new_to_date = 0;
var minValue;
var maxValue;
for (i; i < dataLength; i += 1) {
if(i == (dataLength + 99 - dataLength)){
new_to_date = (data[i].start*1000);
}
finalData.push([
(data[i].start*1000),
data[i].open,
]);
if (data[i].open < minValue) {
minValue = data[i].open;
}
else{
if(data[i].open > maxValue){
maxValue = data[i].open;
}
}
}
HighChartObj.xAxis = {
type: 'datetime',
min: new_from_date,
max: new_to_date,
range: new_to_date - new_from_date,
ordinal: false,
endOnTick: false,
startOnTick: false
};
z++;
HighChartObj.yAxis[z] = {
title: {
text: value.text
},
opposite: true,
min: minValue,
max: maxValue,
height: "100%",
scrollbar: {
enabled: value.scrollbar
}
};
var series = {
"type": value.type,
"name": value.text,
"yAxis": value.yAxis,
"id": value.text.toLowerCase().replace(' ', ''),
"zIndex": 1,
"data": finalData
};
if(HighChartObj.series == null){
HighChartObj.series = new Array();
}
HighChartObj.series[z] = series;
if(key == axisLength){
defer.resolve();
}
});
});
return defer.promise();
}
function b(){
// console.log(HighChartObj.series = HighChartObj.test);
console.log(HighChartObj);
Highcharts.stockChart('container', HighChartObj);
}
$.when(a()).then(b());
</script>

Answer 1

Try fetching data like this. Please data in different variables and then pass it to HighChart Object.
function a(){
z = -1;
var axisLength = axisdata.length - 1;
var dataSeries = new Array()
var dataYaxis = new Array();
jQuery.each(axisdata, function(key, value){
var axisValue = value;
$.ajax({
dataType: "json",
url: axisValue.url,
success: function (data) {
var dataLength = data.length,
i = 0;
minValue = data[0].open;
maxValue = data[0].open;
var finalData = [];
var new_from_date = 0;
var new_to_date = 0;
var minValue;
var maxValue;
for (i; i < dataLength; i += 1) {
if(i == (dataLength + 99 - dataLength)){
new_to_date = (data[i].start*1000);
}
var date = (data[i].start*1000);
finalData.push([
date,
data[i].open,
]);
if (data[i].open < minValue) {
minValue = data[i].open;
}
else{
if(data[i].open > maxValue){
maxValue = data[i].open;
}
}
}
z++;
HighChartObj.xAxis = {
type: 'datetime',
min: new_from_date,
max: new_to_date,
range: new_to_date - new_from_date,
ordinal: false,
endOnTick: false,
startOnTick: false
};
var yAxis = {
title: {
text: axisValue.text
},
opposite: false,
min: minValue,
max: maxValue,
height: "100%",
scrollbar: {
enabled: axisValue.scrollbar
}
};
dataYaxis.push(yAxis);
var series = {
type: axisValue.type,
name: axisValue.text,
id: axisValue.text.toLowerCase().replace(' ', ''),
zIndex: 2,
data: finalData
};
dataSeries.push(series);
if(key == axisLength){
HighChartObj.yAxis = dataYaxis;
HighChartObj.series = dataSeries;
b();
}
}
});
});
}