CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

by magneto903

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Temperature of Each Boiler"
	},
  axisY: {
		maximum: 10,
		minimum: 0,
	},
	data: [{
		type: "stepArea",	
		dataPoints: [
			{ y: 206 },
			{ y: 163 },
			{ y: 154 },
			{ y: 176 },
			{ y: 184 },
			{ y: 122 }
		]
	}]
});
var dps = chart.options.data[0].dataPoints;

for (var i=0; i < 100000; i++) {
	if (i % 10000 == 0) {
  	var dps = chart.options.data[0].dataPoints;
      for (var j = 0; j < dps.length; j++) {

        yVal = Math.random()

        dps[j] = {y: yVal};
      }
      chart.options.data[0].dataPoints = dps; 
      chart.render();
  }
}

//function updateChart() {
	var yVal;
	var dps = chart.options.data[0].dataPoints;
	for (var i = 0; i < dps.length; i++) {
		
		yVal = Math.random()
		
		dps[i] = {y: yVal};
	}
	chart.options.data[0].dataPoints = dps; 
	chart.render();
};
//updateChart();

//setInterval(function() {updateChart()}, 50);

//}