Check if obtained JSON is empty before rendering the chart - CanvasJS JavaScript Charts
Check if obtained JSON is empty before rendering the chart - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
JavaScript
jQuery(document).ready(function( $ ) {
setTimeout(function() {
var dataPoints = [];
var count = 0;
var end_count = 0;
var end_point = 0;
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme4",
zoomEnabled:true,
exportEnabled: true,
zoomType: "xy",
animationEnabled: true,
animationDuration: 1000,
axisX:{
minimum: 0,
title: "Execution Time",
},
axisY:{
minimun: 0,
title: "Response Time in millisecond"
},
title: {
text: "Response Time Over Time"
},
data: [
{
type: "line",
lineThickness: 2,
dataPoints: []
}]
});
$.getJSON("https://api.myjson.com/bins/k2rm5", function (data) {
if(data.length > 0) {
console.log(data[0].timeStamp);
console.log(data[0].allThreads);
end_point = data.length - 10;
for (var i = 0; i < 3; i++) {
dataPoints.push({ label: data[i].timeStamp, y: parseInt(data[i].allThreads) });
}
count = 3;
chart.options.data[0].dataPoints = dataPoints;
chart.render();
updateChart(data);
} else {
console.log("Empty JSON");
}
});
function updateChart() {
end_count = count + 2;
$.getJSON("https://api.myjson.com/bins/k2rm5", function(data) {
if(data.length > 0) {
for (var i = count; i < end_count; i++) {
count++;
dataPoints.push({
label: data[i].timeStamp,
y: parseInt(data[i].allThreads),
});
}
chart.render();
setTimeout(function() {updateChart()}, 1000);
} else {
console.log("Empty JSON");
}
});
}
}, 2000);
});