adds class for graph

web/main.js

@@ -5,7 +5,7 @@ let value;
 let newArrayTemp = [];
 let newArrayHumid = [];
 let newArrayLight = [];
-let timeArray = []; // Array to store time values`
+let timeArray = []; // Array to store time values
 let dateArray = [1, 2, 3];
 let valueArray = [1, 2, 3, 4, 5];
 let valueArray2 = [1, 2, 3, 4, 5];
@@ -15,77 +15,43 @@ 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) {
+
+class liveGraph {
+  
+  constructor() {
+    this.timeArray = [];
+    this.dateArray = [];
+    this.valueArray = [];
+  }
+  pushArray(array) {  
     for (let i = 0; i < 10; i++) {
       array.push(Math.random() * 10);
     }
   }
-// Make lines in the graph of the live data
+  makeGraph() {
     Plotly.plot("liveGraph", [
       {
-    x: timeArray, // Use timeArray as x values
-    y: valueArray,
+        x: this.timeArray, // Use timeArray as x values
+        y: this.valueArray,
         mode: "lines",
         line: { color: "#80CAF6" },
         name: "Temperature",
       },
     ]);
+  }
 
-// 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
-
-
-
+  updateGraph() {
     let cnt = 0;
-
-// Update the graph every 1 ms
     let interval = setInterval(function () {
       var time = new Date();
-  timeArray.push(new Date());
-
-  pushArray(valueArray);
-
+      this.timeArray.push(new Date());
+      this.pushArray(this.valueArray);
       var update = {
-    x: [[timeArray]],
-    y: [[newValueArray]],
+        x: [[this.timeArray]],
+        y: [[this.newValueArray]],
       };
-
       var olderTime = time.setMinutes(time.getMinutes() - 1);
       var futureTime = time.setMinutes(time.getMinutes() + 1);
-
       var minuteView = {
         xaxis: {
           type: "date",
@@ -93,84 +59,15 @@ let interval = setInterval(function () {
         },
       };
       Plotly.relayout("liveGraph", minuteView);
-
       if (cnt === 10) clearInterval(interval);
     }, intervalDelay);
+  }
+}
 
-// Update the graph every 1 ms
-let interval2 = setInterval(function () {
-  var time = new Date();
-  timeArray.push(new Date());
+let graph = new liveGraph();
+graph.makeGraph();
+  graph.updateGraph();
+  graph.pushArray();
+  console.log("test");
 
-  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);