can succesfully make a graph from database data

web/newWebsite/graph-classes.js

@@ -10,6 +10,9 @@ class Graph {
 
   // Function to create a graph
   makeGraph(line, lineColor, name) {
+    let div = document.createElement("div");
+    div.setAttribute("id", this.id);
+    document.body.appendChild(div);
     let lineArray;
     switch (line) {
       case "temp":
@@ -27,7 +30,6 @@ class Graph {
       default:
         console.error("Invalid line");
     }
-    this.timeArray.push(new Date());
     Plotly.plot(this.id, [
       {
         x: this.timeArray,
@@ -39,7 +41,9 @@ class Graph {
     ]);
   }
 
-  updateData(type, value) {
+  updateData(type, value, timestamp) {
+    this.timeArray.push(timestamp);
+
     switch (type) {
       case "Temp":
         this.tempArray.push(value);
@@ -59,8 +63,6 @@ class Graph {
   }
 
   updateGraph() {
-    let time = new Date();
-    this.timeArray.push(time);
     let update = {
       x: [[this.timeArray]],
       y: [
@@ -71,15 +73,7 @@ class Graph {
       ],
     };
 
-    let olderTime = time.setMinutes(time.getMinutes() - 1);
-    let futureTime = time.setMinutes(time.getMinutes() + 1);
-    let minuteView = {
-      xaxis: {
-        type: "date",
-        range: [olderTime, futureTime],
-      },
-    };
-    Plotly.relayout(this.id, minuteView);
+    Plotly.relayout(this.id, update);
   }
 }
 
@@ -142,9 +136,6 @@ class DataProcessor {
   }
 
   makeGraph() {
-    let div = document.createElement("div");
-    div.setAttribute("id", "graph1");
-    document.body.appendChild(div);
     this.graph = new Graph(1);
     this.graph.makeGraph("temp", "red", "Temperature");
     this.graph.makeGraph("humi", "blue", "Humidity");
@@ -153,15 +144,10 @@ class DataProcessor {
   }
 
   updateGraph() {
-    this.graph.updateData(this.data[0].Type, this.data[0].Value);
-    console.log(this.data[0].Type, this.data[0].Value);
-    this.graph.updateData(this.data[1].Type, this.data[1].Value);
-    console.log(this.data[1].Type, this.data[1].Value);
-    this.graph.updateData(this.data[2].Type, this.data[2].Value);
-    console.log(this.data[2].Type, this.data[2].Value);
-    this.graph.updateData(this.data[3].Type, this.data[3].Value);
-    console.log(this.data[3].Type, this.data[3].Value);
-
-    this.graph.updateGraph();
+    for (let i = 0; i < this.data.length; i++) {
+      this.graph.updateData(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+      console.log(this.data[i].Type, this.data[i].Value, this.data[i].TimeStamp);
+      this.graph.updateGraph();
+    }
   }
 }