138 lines
4.6 KiB
HTML
138 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ledda's Rooms Climate</title>
|
|
<script src="static/Chart.bundle.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="chart-container" style="position: relative; height:40vh; width:80vw; margin: auto">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
<script type="application/javascript">
|
|
const humidityColor = 'rgb(45,141,45)';
|
|
const tempColor = 'rgb(0,134,222)';
|
|
const co2Color = 'rgb(194,30,30)';
|
|
|
|
async function getData() {
|
|
let urlEndpoint = "data/";
|
|
if (window.location.includes("since")) {
|
|
urlEndpoint += "since/" + window.location.slice(window.location.lastIndexOf("/") + 1);
|
|
}
|
|
const data = await fetch(urlEndpoint);
|
|
return transformData(await data.json());
|
|
}
|
|
|
|
async function initChart() {
|
|
const ctx = document.getElementById('myChart').getContext('2d');
|
|
const {humidity, temp, co2} = getData();
|
|
const myChart = Chart.Line(ctx, {
|
|
data: {
|
|
datasets: [{
|
|
label: 'Humidity',
|
|
data: humidity,
|
|
borderColor: humidityColor,
|
|
fill: false,
|
|
id: 'humidity',
|
|
yAxisID: 'y-axis-3',
|
|
}, {
|
|
label: 'Temperature',
|
|
data: temp,
|
|
borderColor: tempColor,
|
|
fill: false,
|
|
id: 'temp',
|
|
yAxisID: 'y-axis-2',
|
|
}, {
|
|
label: 'Co2 Concentration',
|
|
data: co2,
|
|
borderColor: co2Color,
|
|
fill: false,
|
|
id: 'co2',
|
|
yAxisID: 'y-axis-1',
|
|
}]
|
|
},
|
|
options: {
|
|
stacked: false,
|
|
title: {
|
|
display: true,
|
|
text: 'Ledda\'s Room Climate',
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
unit: 'second'
|
|
}
|
|
}],
|
|
yAxes: [{
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
id: 'y-axis-1',
|
|
ticks: {
|
|
fontColor: co2Color,
|
|
suggestedMin: 400,
|
|
suggestedMax: 1100,
|
|
},
|
|
}, {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
id: 'y-axis-2',
|
|
ticks: {
|
|
fontColor: tempColor,
|
|
suggestedMin: 10,
|
|
suggestedMax: 35,
|
|
},
|
|
gridLines: {
|
|
drawOnChartArea: false,
|
|
},
|
|
}, {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
id: 'y-axis-3',
|
|
ticks: {
|
|
fontColor: humidityColor,
|
|
suggestedMin: 15,
|
|
suggestedMax: 85,
|
|
},
|
|
gridLines: {
|
|
drawOnChartArea: false,
|
|
},
|
|
}],
|
|
}
|
|
},
|
|
});
|
|
startFetchTimeout(myChart);
|
|
}
|
|
|
|
function transformData(json) {
|
|
const humidity = [];
|
|
const co2 = [];
|
|
const temp = [];
|
|
for (const snapshot of json.snapshots) {
|
|
co2.push({x: snapshot.time, y: snapshot.co2});
|
|
temp.push({x: snapshot.time, y: snapshot.temp});
|
|
humidity.push({x: snapshot.time, y: snapshot.humidity});
|
|
}
|
|
return {humidity, co2, temp};
|
|
}
|
|
|
|
function startFetchTimeout(chart) {
|
|
setInterval(async () => {
|
|
const newDatum = await fetch("data/1");
|
|
const snapshot = (await newDatum.json()).snapshots[0];
|
|
chart.data.datasets[0].data.splice(0, 1, {x: snapshot.time, y: snapshot.humidity});
|
|
chart.data.datasets[1].data.splice(0, 1, {x: snapshot.time, y: snapshot.temp});
|
|
chart.data.datasets[2].data.splice(0, 1, {x: snapshot.time, y: snapshot.co2});
|
|
chart.update(0);
|
|
}, 10 * 1000);
|
|
}
|
|
|
|
initChart();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |