From 30a739d02b8e0694f1541ace6de598658cc845a7 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Fri, 29 Mar 2024 15:18:32 +0100 Subject: [PATCH] Add graph classes and update HTML files --- web/newWebsite/graph-classes.js | 79 +++++++++++++++++++++++++++++++++ web/newWebsite/graph-main.js | 2 + web/newWebsite/graphs.html | 6 ++- web/newWebsite/index.html | 2 + 4 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 web/newWebsite/graph-classes.js create mode 100644 web/newWebsite/graph-main.js diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js new file mode 100644 index 0000000..200b0f0 --- /dev/null +++ b/web/newWebsite/graph-classes.js @@ -0,0 +1,79 @@ +class Graph{ + constructor(id) { + this.id = "graph" + id; + this.timeArray = []; + } + + // Function to create a graph + makeGraph(line, lineColor, name) { + let lineArray; + switch (line) { + case "temp": + lineArray = this.tempArray; + break; + case "humi": + lineArray = this.humiArray; + break; + case "eco2": + lineArray = this.eco2Array; + break; + case "tvoc": + lineArray = this.tvocArray; + break; + default: + console.error("Invalid line"); + } + this.timeArray.push(new Date()); + Plotly.plot(this.id, [ + { + x: this.timeArray, + y: lineArray, + mode: "lines", + line: { color: lineColor }, + name: name, + }, + ]); + } +} + +class LiveGraph extends Graph{ + // Constructor to initialize the graph + constructor(id){ + super(id); + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; + this.cnt = 0; + } + // Function to update the graph with new values got from updateData function + updateGraph() { + let time = new Date(); + this.timeArray.push(new Date()); + + let update = { + x: [[this.timeArray]], + y: [[this.tempArray], [this.humiArray], [this.eco2Array], [this.tvocArray]] + }; + + 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); + if (this.cnt === 10) clearInterval(interval); + } + // function to get the new data for graph + updateData(temperature, humidity, eCO2, TVOC) { + // Update the graph + this.tempArray.push(temperature); + this.humiArray.push(humidity); + this.eco2Array.push(eCO2 / 10); + this.tvocArray.push(TVOC / 10); + } + } + diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js new file mode 100644 index 0000000..139597f --- /dev/null +++ b/web/newWebsite/graph-main.js @@ -0,0 +1,2 @@ + + diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html index 975f041..0629172 100644 --- a/web/newWebsite/graphs.html +++ b/web/newWebsite/graphs.html @@ -6,6 +6,7 @@ Graphs + @@ -25,9 +26,10 @@ - - +
+ + \ No newline at end of file diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html index 2519ffb..3402076 100644 --- a/web/newWebsite/index.html +++ b/web/newWebsite/index.html @@ -6,6 +6,7 @@ Gauges + @@ -29,5 +30,6 @@ + \ No newline at end of file