added visualisation

charts.html

@@ -27,18 +27,21 @@
                     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',
                 }]
             },
@@ -109,6 +112,22 @@
         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.forEach(ds => {
+                if (ds.id === "humidity") {
+                    ds.data.push({x: snapshot.time, y: snapshot.humidity});
+                } else if (ds.id === "temp") {
+                    ds.data.push({x: snapshot.time, y: snapshot.temp});
+                } else if (ds.id === "co2") {
+                    ds.data.push({x: snapshot.time, y: snapshot.co2});
+                }
+            })
+        }, 10 * 1000);
+    }
+
     initChart();
 </script>