Add live graph plots for humidity, eCO2, and TVOC

web/classes.js

@@ -21,6 +21,33 @@ class liveGraph {
         name: "Temperature",
       },
     ]);
+    Plotly.plot(this.nodeId, [
+      {
+        x: this.timeArray, // Use timeArray as x values
+        y: this.humiArray,
+        mode: "lines",
+        line: { color: "#80CAF6" },
+        name: "Humidity",
+      },
+    ]);
+    Plotly.plot(this.nodeId, [
+      {
+        x: this.timeArray, // Use timeArray as x values
+        y: this.eco2Array,
+        mode: "lines",
+        line: { color: "#80CAF6" },
+        name: "eCO2",
+      },
+    ]);
+    Plotly.plot(this.nodeId, [
+      {
+        x: this.timeArray, // Use timeArray as x values
+        y: this.tvocArray,
+        mode: "lines",
+        line: { color: "#80CAF6" },
+        name: "TVOC",
+      },
+    ]);
   }
 
   // Function to update the graph with new values
@@ -30,8 +57,9 @@ class liveGraph {
 
     let update = {
       x: [[this.timeArray]],
-      y: [[this.tempArray, this.humiArray, this.eco2Array, this.tvocArray]],
+      y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]]
     };
+
     let olderTime = time.setMinutes(time.getMinutes() - 1);
     let futureTime = time.setMinutes(time.getMinutes() + 1);
     let minuteView = {