Refactor HTML and JavaScript code, update graph data

web/main.js

@@ -6,15 +6,23 @@ let newArrayTemp = [];
 let newArrayHumid = [];
 let newArrayLight = [];
 let timeArray = []; // Array to store time values`
-let dateArray = [1,2,3];
-let valueArray = [1,2,3,4,5];
-let newValueArray = [4,5,6];
+let dateArray = [1, 2, 3];
+let valueArray = [1, 2, 3, 4, 5];
+let valueArray2 = [1, 2, 3, 4, 5];
+let valueArray3 = [1, 2, 3, 4, 5];
+let valueArray4 = [1, 2, 3, 4, 5];
+let newValueArray = [4, 5, 6];
 let myValue = 1;
+let intervalDelay = 50;
 
 //const timeArray = [1,2,3,4];
 //const dateArray = [5,6,7,8];
 //const valueArray = [1,1,1,3];
-
+function pushArray(array) {
+  for (let i = 0; i < 10; i++) {
+    array.push(Math.random() * 10);
+  }
+}
 // Make lines in the graph of the live data
 Plotly.plot("liveGraph", [
   {
@@ -26,17 +34,52 @@ Plotly.plot("liveGraph", [
   },
 ]);
 
+// Make lines in the graph of the live data
+Plotly.plot("liveGraph2", [
+  {
+    x: timeArray, // Use timeArray as x values
+    y: valueArray2,
+    mode: "lines",
+    line: { color: "#80CAF6" },
+    name: "Temperature",
+  },
+]);
+
+// Make lines in the graph of the live data
+Plotly.plot("liveGraph3", [
+  {
+    x: timeArray, // Use timeArray as x values
+    y: valueArray3,
+    mode: "lines",
+    line: { color: "#80CAF6" },
+    name: "Temperature",
+  },
+]);// Make lines in the graph of the live data
+Plotly.plot("liveGraph4", [
+  {
+    x: timeArray, // Use timeArray as x values
+    y: valueArray4,
+    mode: "lines",
+    line: { color: "#80CAF6" },
+    name: "Temperature",
+  },
+]);
+
+// Make lines in the graph of the live data
+
+
+
 let cnt = 0;
 
 // Update the graph every 1 ms
 let interval = setInterval(function () {
   var time = new Date();
-    timeArray.push(new Date());
+  timeArray.push(new Date());
+
+  pushArray(valueArray);
 
-    valueArray.push(Math.random() * 10);
-    
   var update = {
-    x: [[time]],
+    x: [[timeArray]],
     y: [[newValueArray]],
   };
 
@@ -51,5 +94,83 @@ let interval = setInterval(function () {
   };
   Plotly.relayout("liveGraph", minuteView);
 
-  if (cnt === 100) clearInterval(interval);
-}, 1);
+  if (cnt === 10) clearInterval(interval);
+}, intervalDelay);
+
+// Update the graph every 1 ms
+let interval2 = setInterval(function () {
+  var time = new Date();
+  timeArray.push(new Date());
+
+  pushArray(valueArray2);
+
+  var update = {
+    x: [[time]],
+    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("liveGraph2", minuteView);
+
+  if (cnt === 1000) clearInterval(interval2);
+}, intervalDelay);
+
+// Update the graph every 1 ms
+let interval3 = setInterval(function () {
+  var time = new Date();
+  timeArray.push(new Date());
+
+  pushArray(valueArray3);
+
+  var update = {
+    x: [[time]],
+    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("liveGraph3", minuteView);
+
+  if (cnt === 1000) clearInterval(interval3);
+}, intervalDelay);
+
+// Update the graph every 1 ms
+let interval4 = setInterval(function () {
+  var time = new Date();
+  timeArray.push(new Date());
+
+  pushArray(valueArray4);
+
+  var update = {
+    x: [[time]],
+    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("liveGraph4", minuteView);
+
+  if (cnt === 1000) clearInterval(interval4);
+}, intervalDelay);