From 65783ac3b68139a163aceba3b67fe1d40c24ae4b Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Wed, 6 Mar 2024 15:02:34 +0100 Subject: [PATCH] Add liveGraph class and update index.html --- web/classes.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++ web/index.html | 1 + web/main.js | 56 -------------------------------------------------- 3 files changed, 57 insertions(+), 56 deletions(-) create mode 100644 web/classes.js diff --git a/web/classes.js b/web/classes.js new file mode 100644 index 0000000..be77e3f --- /dev/null +++ b/web/classes.js @@ -0,0 +1,56 @@ +let intervalDelay = 5000; +let newData = true; + +class liveGraph { + // Constructor to initialize the graph + constructor(id) { + this.timeArray = [4, 5, 6, 7, 9]; + this.valueArray = [1, 3, 4, 8, 10]; + this.cnt = 0; + this.nodeId = id; + } + + // Fuction to create a graph + makeGraph() { + Plotly.plot("liveGraph", [ + { + x: this.timeArray, // Use timeArray as x values + y: this.valueArray, + mode: "lines", + line: { color: "#80CAF6" }, + name: "Temperature", + }, + ]); + } + + // Function to update the graph with new values + updateGraph() { + let time = new Date(); + this.timeArray.push(new Date()); + this.valueArray.push(Math.random()); + let update = { + x: [[this.timeArray]], + y: [[this.valueArray]], + }; + let olderTime = time.setMinutes(time.getMinutes() - 1); + let futureTime = time.setMinutes(time.getMinutes() + 1); + let minuteView = { + xaxis: { + type: "date", + range: [olderTime, futureTime], + }, + }; + Plotly.relayout("liveGraph", minuteView); + if (this.cnt === 10) clearInterval(interval); + } +} + +let graph1 = new liveGraph(1); + +graph1.makeGraph(); + +let interval = setInterval(function () { + if (newData) { + graph1.updateGraph(); + } +}, intervalDelay); \ No newline at end of file diff --git a/web/index.html b/web/index.html index 63e7113..ecf1faf 100644 --- a/web/index.html +++ b/web/index.html @@ -73,5 +73,6 @@ + diff --git a/web/main.js b/web/main.js index be77e3f..e69de29 100644 --- a/web/main.js +++ b/web/main.js @@ -1,56 +0,0 @@ -let intervalDelay = 5000; -let newData = true; - -class liveGraph { - // Constructor to initialize the graph - constructor(id) { - this.timeArray = [4, 5, 6, 7, 9]; - this.valueArray = [1, 3, 4, 8, 10]; - this.cnt = 0; - this.nodeId = id; - } - - // Fuction to create a graph - makeGraph() { - Plotly.plot("liveGraph", [ - { - x: this.timeArray, // Use timeArray as x values - y: this.valueArray, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, - ]); - } - - // Function to update the graph with new values - updateGraph() { - let time = new Date(); - this.timeArray.push(new Date()); - this.valueArray.push(Math.random()); - let update = { - x: [[this.timeArray]], - y: [[this.valueArray]], - }; - let olderTime = time.setMinutes(time.getMinutes() - 1); - let futureTime = time.setMinutes(time.getMinutes() + 1); - let minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph", minuteView); - if (this.cnt === 10) clearInterval(interval); - } -} - -let graph1 = new liveGraph(1); - -graph1.makeGraph(); - -let interval = setInterval(function () { - if (newData) { - graph1.updateGraph(); - } -}, intervalDelay); \ No newline at end of file