diff --git a/charts.html b/charts.html
index c8e43f6..044dc32 100644
--- a/charts.html
+++ b/charts.html
@@ -15,12 +15,14 @@
const humidityColor = 'rgb(45,141,45)';
const tempColor = 'rgb(0,134,222)';
const co2Color = 'rgb(194,30,30)';
+ let minutesDisplayed = 60;
async function getData() {
let urlEndpoint = "/" + ROOT_URL + "data/";
const pathname = window.location.pathname;
if (pathname.includes("since")) {
- urlEndpoint += "since/" + pathname.slice(pathname.lastIndexOf("/") + 1);
+ minutesDisplayed = Number(pathname.slice(pathname.lastIndexOf("/") + 1));
+ urlEndpoint += "since/" + minutesDisplayed;
}
const data = await fetch(urlEndpoint);
return transformData(await data.json());
@@ -127,16 +129,30 @@
setInterval(async () => {
const newDatum = await fetch("/" + ROOT_URL + "data/last/");
const snapshot = (await newDatum.json()).snapshots[0];
- chart.data.datasets[0].data.splice(0, 1);
- chart.data.datasets[0].data.push({x: snapshot.time, y: snapshot.humidity});
- chart.data.datasets[1].data.splice(0, 1);
- chart.data.datasets[1].data.push({x: snapshot.time, y: snapshot.temp});
- chart.data.datasets[2].data.splice(0, 1);
- chart.data.datasets[2].data.push({x: snapshot.time, y: snapshot.co2});
- chart.update(0);
+ if (snapshot.time !== chart.data.datasets[0].x) {
+ removeExpiredData(chart);
+ insertSnapshot(chart, snapshot);
+ }
}, 10 * 1000);
}
+ function insertSnapshot(chart, snapshot) {
+ chart.data.datasets[0].data.push({x: snapshot.time, y: snapshot.humidity});
+ chart.data.datasets[1].data.push({x: snapshot.time, y: snapshot.temp});
+ chart.data.datasets[2].data.push({x: snapshot.time, y: snapshot.co2});
+ chart.update(0);
+ }
+
+ function removeExpiredData(chart) {
+ for (let i = 0; i < chart.data.datasets[0].data.length; i++) {
+ if ((Date.now() - Date.parse(chart.data.datasets[0].data[i].x)) > minutesDisplayed * 60000) {
+ chart.data.datasets[0].data.splice(i, 1);
+ chart.data.datasets[1].data.splice(i, 1);
+ chart.data.datasets[2].data.splice(i, 1);
+ }
+ }
+ }
+
initChart();