From 5e2daa445a6159e8e2c76fabf554709ce2ef01fb Mon Sep 17 00:00:00 2001
From: sietse jonker <sietse.jonker@hva.nl>
Date: Mon, 1 Apr 2024 11:33:18 +0200
Subject: [PATCH] can succesfully make a graph from database data

---
 web/newWebsite/graph-classes.js | 38 +++++++++++----------------------
 web/newWebsite/graph-main.js    |  7 ++++--
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js
index 8c90a2e..d5bce51 100644
--- a/web/newWebsite/graph-classes.js
+++ b/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();
+    }
   }
 }
diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js
index 8f2de1d..7f52e14 100644
--- a/web/newWebsite/graph-main.js
+++ b/web/newWebsite/graph-main.js
@@ -1,6 +1,9 @@
 // Sample data - you can replace this with your actual dataset
 const data = [];
 processor = new DataProcessor();
+dateStart='2024-03-27%2011:47:11'
+dateEnd="2024-03-27%2011:47:11"
+
 // Function to create checkbox with label
 function createCheckBox(id, label) {
   const checkbox = document.createElement("input");
@@ -109,7 +112,7 @@ function createFilterContainer() {
 
 // Get request to fetch data from the server
 function fetchData() {
-  fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-27%2011:47:11")
+  fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11")
     .then((response) => {
       if (!response.ok) {
         throw new Error("Network response was not ok");
@@ -120,7 +123,7 @@ function fetchData() {
       createFilterContainer();
       processor.update(data);
       processor.makeGraph();
-      processor.updateGraph();
+      processor.updateGraph(dateStart, dateEnd);
     })
     .catch((error) => {
       console.error("Error fetching data:", error);