I have two different javascript functions as below. When I call these functions, until the function completes executing, I am showing loading image. The problem I am having is that when first function completes, it should load the chart and the second function runs and load the chart.
That's not what's happening. Both charts load when both function completes. I need each function to run and load the chart when each complete not both at the same time.
Here is the functions:
<script>
function vcenter1(){
$('#loading').html('<img src="img/loading.gif"> loading...');
var req = ocpu.rpc("cpu", {
}, function(output){
var data=output;
data=JSON.parse(data);
$('#output').highcharts('StockChart', {
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
renderTo: 'output',
type: 'line',
marginRight: 30,
zoomType: 'x',
resetZoomButton: {
position: {
x: -50,
y: -40
}
}
},
plotOptions: {
line: {
marker: {
radius: 2,
lineColor: '#666666',
lineWidth: 2
}
}
},
exporting: {
enabled: true
},
legend: {
enabled:true,
layout: 'horizontal',
maxHeight: 55 // max. 2 lines with navigation
},
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: $('#output').width() > 480,
selected: 2
},
scrollbar: {
enabled: false
},
navigator : {
enabled : false
},
xAxis: {
type:'datetime',
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
min:0,
max:100,
labels: {
style: {
color: "black",
fontWeight: 'bold'
}
},
title: {
text: '% CPU Utilization',
style: {
color: 'black',
fontWeight: 'bold'
}
}
},
credits: {
enabled: false
},
title: {
text: "% CPU UTILIZATION",
style: {
color: '#333000',
fontSize: '18px',
fontWeight: 'bold'
}
},
tooltip: {
useHTML:true,
positioner: function (boxWidth, boxHeight, point) {
return { x: this.chart.plotLeft, y: this.chart.plotTop - 5 };
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} <b>',
valueDecimals: 0
},
series: data
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
$('#loading').html('');
});
//after request complete, re-enable the button
req.always(function(){
$('#loading').html('');
});
}
//VCENTER2
function vcenter2(){
$('#loading1').html('<img src="img/loading.gif"> loading...');
var req = ocpu.rpc("memory", {
}, function(output1){
var data1=output1;
data1=JSON.parse(data1);
console.log("Ready to paint 2:");
$('#output1').highcharts('StockChart', {
chart: {
borderColor: '#98AFC7',
borderRadius: 20,
borderWidth: 1,
type: 'line',
marginRight: 20,
zoomType: 'x',
resetZoomButton: {
position: {
x: -50,
y: -40
}
}
},
plotOptions: {
line: {
marker: {
radius: 2,
lineColor: '#666666',
lineWidth: 2
}
}
},
exporting: {
enabled: true
},
legend: {
enabled:true,
layout: 'horizontal',
maxHeight: 55 // max. 2 lines with navigation
},
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: $('#output1').width() > 480,
selected: 2
},
scrollbar: {
enabled: false
},
navigator : {
enabled : false
},
xAxis: {
type:'datetime',
gridLineColor: '#EEEEEE',
gridLineWidth: 1
},
yAxis: { // Primary yAxis
min:0,
max:100,
labels: {
style: {
color: 'black',
fontWeight: 'bold'
}
},
title: {
text: '% Memory Utilization',
style: {
color: 'black',
fontWeight: 'bold'
}
},
opposite: true
},
credits: {
enabled: false
},
title: {
text: "% MEMORY UTILIZATION",
style: {
color: '#333000',
fontSize: '18px',
fontWeight: 'bold'
}
},
tooltip: {
useHTML:true,
positioner: function (boxWidth, boxHeight, point) {
return { x: this.chart.plotLeft, y: this.chart.plotTop - 5 };
},
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} <b>',
valueDecimals: 0
},
series: data1
});
});
//if R returns an error, alert the error message
req.fail(function(){
alert("Server error: " + req.responseText);
$('#loading1').html('');
});
//after request complete, re-enable the button
req.always(function(){
$('#loading1').html('');
});
}
</script>
This is where I am calling them:
<!-- Placed at the end of the document so the pages load faster -->
<script>
$('a[href*="vmware"]').on('click', function () {
vcenter1();
vcenter2();
});
Any ideas that I am missing here? I need to show loading image why the function is running, when it's completes, I need to show the data and move on to the second function and so forth. Now, what's happening is that first function runs, completes, loading image goes away but no data/chart shows up. Second function runs, completes then both divs are full with data/charts.
See Question&Answers more detail:
os 
