JSFiddle - React, Tailwind, and code Playground
by BHAVESH KUMAR
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
JavaScript
window.onload = function () {
var field2 = [ {x: 1, y: 62.00
}, {x: 2, y: 62.00
}, {x: 3, y: 68.00
}, {x: 4, y: 62.00
}, {x: 5, y: 62.00
}, {x: 6, y: 62.00
}, {x: 7, y: 61.00
}, {x: 8, y: 62.00
}, {x: 9, y: 62.00
}, {x: 10, y: 62.00
}, ]; // dataPoints
var chart_2 = new CanvasJS.Chart("chartContainer2",{
exportEnabled: true,
title :{
text: "Real Time Humidity"
},
axisX: {
title: "Real Time"
},
axisY: {
title: "Humidity"
},
data: [{
type: "line",
dataPoints: field2
}]
});
var xVal = field2.length + 1;
var updateInterval = 20000;
var dataLength = 1; // number of dataPoints visible at any point
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < count; j++) {
$.get("http://smartaitians.com/data.php?field_id=2", function (result) {
field2.push({
x: xVal,
y: result
});
});
xVal++;
};
if (field2.length > dataLength)
{
field2.shift();
}
chart_2.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
}