From 5e2daa445a6159e8e2c76fabf554709ce2ef01fb Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:33:18 +0200 Subject: [PATCH 1/4] 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); From 69ef7013bb55666810b21c9219c0d31e144aeefe Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:50:47 +0200 Subject: [PATCH 2/4] Refactor get_query function to handle additional conditions --- server/Flask/queries.py | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/server/Flask/queries.py b/server/Flask/queries.py index 65abfeb..2257b79 100644 --- a/server/Flask/queries.py +++ b/server/Flask/queries.py @@ -1,5 +1,13 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): - if node and dataType: + if dateStart and dateEnd and node: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}' AND NodeID = {node};''' + elif dateStart and dateEnd: + query = f'''SELECT * + FROM Measurement + WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' + elif node and dataType: query = f"SELECT * FROM Measurement WHERE NodeID = {node} AND Type = '{dataType}'" elif node: query = f"SELECT * FROM Measurement WHERE NodeID = {node}" @@ -13,7 +21,7 @@ def get_query(node, dataType, MAC, questionID, replies, dateStart, dateEnd): query = f"SELECT * FROM Question" elif replies: query = f"SELECT * FROM Reply" - elif dateStart and dateEnd: + elif dateStart and dateEnd and node: query = f'''SELECT * FROM Measurement WHERE TimeStamp BETWEEN '{dateStart}' AND '{dateEnd}';''' From 0d86c6bcbd0ec87cda165b71844f880aeb293b1e Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:50:52 +0200 Subject: [PATCH 3/4] Add node parameter to fetch request --- web/newWebsite/graph-main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 7f52e14..5b6db31 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -112,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-28%2011:47:11") + fetch("http://145.92.8.114/getMeasurements?dateStart=2024-03-27%2011:47:11&dateEnd=2024-03-28%2011:47:11&node=113") .then((response) => { if (!response.ok) { throw new Error("Network response was not ok"); From a4a73b84cc0ffd08e4f0548f13b785da78ebf4a3 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Mon, 1 Apr 2024 11:58:39 +0200 Subject: [PATCH 4/4] Refactor fetchData function and add getLink function --- web/newWebsite/graph-main.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 5b6db31..8058f94 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -1,8 +1,6 @@ // 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) { @@ -110,9 +108,15 @@ function createFilterContainer() { document.body.appendChild(container); } +// Function to get the link for the get request +function getLink(startDate, endDate, node) { + return link = "http://getMeasurements?dateStart=" + startDate.toISOString() + + "&dateEnd=" + endDate.toISOString() + + "&node=" + node; +} // 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-28%2011:47:11&node=113") +function fetchData(link) { + fetch(link) .then((response) => { if (!response.ok) { throw new Error("Network response was not ok");