37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
|
|
<title>IKEA Home Sensor Diagram</title>
|
||
|
|
<script src="/chart.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function onBodyLoad(){
|
||
|
|
|
||
|
|
const xhttp = new XMLHttpRequest();
|
||
|
|
xhttp.responseType = 'json';
|
||
|
|
xhttp.onload = function() {
|
||
|
|
var jsonResponse = this.response;
|
||
|
|
console.log("JSON received");
|
||
|
|
const ctx = document.getElementById('myChart');
|
||
|
|
const myChart = new Chart(ctx, {
|
||
|
|
type: 'line',
|
||
|
|
data: jsonResponse,
|
||
|
|
options: {
|
||
|
|
scales: {
|
||
|
|
y: {
|
||
|
|
beginAtZero: false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
console.log("Diagram generated");
|
||
|
|
}
|
||
|
|
xhttp.open("GET", "/diagram", true);
|
||
|
|
xhttp.send();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body id="body" onload="onBodyLoad()">
|
||
|
|
<canvas id="myChart" width="100%" height="100"></canvas>
|
||
|
|
</body>
|
||
|
|
</html>
|