Refactor liveGraph class and updateNodeData function

web/main.js

@@ -1,17 +1,5 @@
-let data;
-let measurements;
-let date;
-let value;
-let newArrayTemp = [];
-let newArrayHumid = [];
-let newArrayLight = [];
-let timeArray = []; // Array to store time values`
-let valueArray = [1, 2, 3, 4, 5];
-let newValueArray = [4, 5, 6];
-let myValue = 1;
-let intervalDelay = 50;
 const sensorData = {};
-
+let intervalDelay = 1000;
 // Create WebSocket connection.
 const socket = new WebSocket("ws://145.92.8.114/ws");
 
@@ -99,46 +87,6 @@ function pushArray(array) {
     array.push(Math.random() * 10);
   }
 }
-// Make lines in the graph of the live data
-/*Plotly.plot("liveGraph", [
-  {
-    x: timeArray, // Use timeArray as x values
-    y: valueArray,
-    mode: "lines",
-    line: { color: "#80CAF6" },
-    name: "Temperature",
-  },
-]);
-
-let cnt = 0;
-
-// Update the graph every 1 ms
-let interval = setInterval(function () {
-  var time = new Date();
-  timeArray.push(new Date());
-
-  pushArray(valueArray);
-
-  var update = {
-    x: [[timeArray]],
-    y: [[newValueArray]],
-  };
-
-  var olderTime = time.setMinutes(time.getMinutes() - 1);
-  var futureTime = time.setMinutes(time.getMinutes() + 1);
-
-  var minuteView = {
-    xaxis: {
-      type: "date",
-      range: [olderTime, futureTime],
-    },
-  };
-  Plotly.relayout("liveGraph", minuteView);
-
-  if (cnt === 10) clearInterval(interval);
-}, intervalDelay);
-
-*/
 
 //function for making the html elements for the following html code
 
@@ -215,7 +163,7 @@ function createNodeData(node) {
   graphP.textContent = "Live graph:";
 
   var liveGraph = document.createElement("div");
-  liveGraph.id = "liveGraph";
+  liveGraph.id = "liveGraph" + node;
 
   graphDiv.appendChild(graphP);
   graphDiv.appendChild(liveGraph);
@@ -249,6 +197,13 @@ function updateNodeData(node, temperature, humidity, eCO2, TVOC) {
   document.getElementById("humidStatus").textContent = "Connected";
   document.getElementById("CO2Status").textContent = "Connected";
   document.getElementById("TVOCStatus").textContent = "Connected";
+
+  // Update the graph
+  graphNode1.updateData(temperature, humidity, eCO2, TVOC);
+  graphNode1.updateGraph();
+
+  graphNode2.updateData(temperature, humidity, eCO2, TVOC);
+  graphNode2.updateGraph();
 }
 
 // Call the function to create the HTML structure
@@ -257,5 +212,12 @@ createNodeData(2);
 createNodeData(3);
 createNodeData(4);
 
+// Create a new liveGraph object
+let graphNode1 = new liveGraph(1);
 
+graphNode1.makeGraph();
+
+let graphNode2 = new liveGraph(2);
+
+graphNode2.makeGraph();
 // openConnection();