diff --git a/web/classes.js b/web/classes.js
index 03160e5..3f67eb3 100644
--- a/web/classes.js
+++ b/web/classes.js
@@ -1,20 +1,21 @@
-let intervalDelay = 5000;
-
class liveGraph {
// Constructor to initialize the graph
constructor(id) {
- this.timeArray = [4, 5, 6, 7, 9];
- this.valueArray = [1, 3, 4, 8, 10];
- this.cnt = 0;
- this.nodeId = id;
+ this.timeArray = [];
+ this.tempArray = [];
+ this.humiArray = [];
+ this.eco2Array = [];
+ this.tvocArray = [];
+ this.cnt = 0;
+ this.nodeId = "liveGraph" + id;
}
// Fuction to create a graph
makeGraph() {
- Plotly.plot("liveGraph", [
+ Plotly.plot(this.nodeId, [
{
x: this.timeArray, // Use timeArray as x values
- y: this.valueArray,
+ y: this.tempArray,
mode: "lines",
line: { color: "#80CAF6" },
name: "Temperature",
@@ -26,10 +27,10 @@ class liveGraph {
updateGraph() {
let time = new Date();
this.timeArray.push(new Date());
- this.valueArray.push(Math.random());
+
let update = {
x: [[this.timeArray]],
- y: [[this.valueArray]],
+ y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]],
};
let olderTime = time.setMinutes(time.getMinutes() - 1);
let futureTime = time.setMinutes(time.getMinutes() + 1);
@@ -39,7 +40,15 @@ class liveGraph {
range: [olderTime, futureTime],
},
};
- Plotly.relayout("liveGraph", minuteView);
+ Plotly.relayout(this.nodeId, minuteView);
if (this.cnt === 10) clearInterval(interval);
}
+
+ updateData(temperature, humidity, eCO2, TVOC) {
+ // Update the graph
+ this.tempArray.push(temperature);
+ this.humiArray.push(humidity);
+ this.eco2Array.push(eCO2);
+ this.tvocArray.push(TVOC);
+ }
}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 7398036..767972c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -28,7 +28,7 @@
-
-
+
+
+