From ae082b53a41e3ef5ec569b3d590d661fbaeeea36 Mon Sep 17 00:00:00 2001 From: sietse jonker Date: Sun, 31 Mar 2024 21:19:37 +0200 Subject: [PATCH] Add temperature, humidity, eCO2, and TVOC data to graph and update graph view --- web/newWebsite/graph-classes.js | 60 ++++++++++++++++++++++++++++++++- web/newWebsite/graph-main.js | 1 - 2 files changed, 59 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/graph-classes.js b/web/newWebsite/graph-classes.js index 63257c3..4bacf78 100644 --- a/web/newWebsite/graph-classes.js +++ b/web/newWebsite/graph-classes.js @@ -2,6 +2,10 @@ class Graph { constructor(id) { this.id = "graph" + id; this.timeArray = []; + this.tempArray = []; + this.humiArray = []; + this.eco2Array = []; + this.tvocArray = []; } // Function to create a graph @@ -34,6 +38,49 @@ class Graph { }, ]); } + + updateData(type, value) { + switch (type) { + case "Temp": + this.tempArray.push(value); + break; + case "Humi": + this.humiArray.push(value); + break; + case "eCO2": + this.eco2Array.push(value); + break; + case "TVOC": + this.tvocArray.push(value); + break; + default: + console.error("Invalid type"); + } + } + + updateGraph() { + let time = new Date(); + this.timeArray.push(time); + 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); + } } class LiveGraph extends Graph { @@ -101,6 +148,17 @@ class DataProcessor { graph.makeGraph("temp", "red", "Temperature"); graph.makeGraph("humi", "blue", "Humidity"); graph.makeGraph("eco2", "green", "eCO2"); - graph.makeGraph("tvoc", "purple", "TVOC"); + graph.makeGraph("tvoc", "#F5G644", "TVOC"); + + graph.updateData(this.data[0].Type, this.data[0].Value); + console.log(this.data[0].Type, this.data[0].Value); + graph.updateData(this.data[1].Type, this.data[1].Value); + console.log(this.data[1].Type, this.data[1].Value); + graph.updateData(this.data[2].Type, this.data[2].Value); + console.log(this.data[2].Type, this.data[2].Value); + graph.updateData(this.data[3].Type, this.data[3].Value); + console.log(this.data[3].Type, this.data[3].Value); + + graph.updateGraph(); } } diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js index 37b3cd0..c271e48 100644 --- a/web/newWebsite/graph-main.js +++ b/web/newWebsite/graph-main.js @@ -120,7 +120,6 @@ function fetchData() { createFilterContainer(); processor.update(data); processor.graph(); - }) .catch((error) => { console.error("Error fetching data:", error);