54 lines
1.3 KiB
HTML
Executable File
54 lines
1.3 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
window.onload = function () {
|
|
|
|
var chart = new CanvasJS.Chart("chartContainer", {
|
|
title: {
|
|
text: "Temperature of Each Boiler"
|
|
},
|
|
axisY: {
|
|
title: "Temperature (°C)",
|
|
suffix: " °C"
|
|
},
|
|
data: [{
|
|
type: "column",
|
|
yValueFormatString: "#,### °C",
|
|
indexLabel: "{y}",
|
|
dataPoints: [
|
|
{ label: "boiler1", y: 206 },
|
|
{ label: "boiler2", y: 163 },
|
|
{ label: "boiler3", y: 154 },
|
|
{ label: "boiler4", y: 176 },
|
|
{ label: "boiler5", y: 184 },
|
|
{ label: "boiler6", y: 122 }
|
|
]
|
|
}]
|
|
});
|
|
|
|
function updateChart() {
|
|
var boilerColor, deltaY, yVal;
|
|
var dps = chart.options.data[0].dataPoints;
|
|
for (var i = 0; i < dps.length; i++) {
|
|
deltaY = Math.round(2 + Math.random() *(-2-2));
|
|
yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
|
|
boilerColor = yVal > 200 ? "#FF2500" : yVal >= 170 ? "#FF6000" : yVal < 170 ? "#6B8E23 " : null;
|
|
dps[i] = {label: "Boiler "+(i+1) , y: yVal, color: boilerColor};
|
|
}
|
|
chart.options.data[0].dataPoints = dps;
|
|
chart.render();
|
|
};
|
|
updateChart();
|
|
|
|
setInterval(function() {updateChart()}, 500);
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
|
|
<script src="../../canvasjs.min.js"></script>
|
|
</body>
|
|
</html> |