From db9c984446aaa6fe1cfa05bb168f4e0162342d2f Mon Sep 17 00:00:00 2001 From: Sietse Jonker Date: Tue, 5 Mar 2024 16:36:42 +0100 Subject: [PATCH] adds class for graph --- web/main.js | 207 +++++++++++++--------------------------------------- 1 file changed, 52 insertions(+), 155 deletions(-) diff --git a/web/main.js b/web/main.js index 3d37b18..4d23f7d 100644 --- a/web/main.js +++ b/web/main.js @@ -5,7 +5,7 @@ let value; let newArrayTemp = []; let newArrayHumid = []; let newArrayLight = []; -let timeArray = []; // Array to store time values` +let timeArray = []; // Array to store time values let dateArray = [1, 2, 3]; let valueArray = [1, 2, 3, 4, 5]; let valueArray2 = [1, 2, 3, 4, 5]; @@ -15,162 +15,59 @@ let newValueArray = [4, 5, 6]; let myValue = 1; let intervalDelay = 50; -//const timeArray = [1,2,3,4]; -//const dateArray = [5,6,7,8]; -//const valueArray = [1,1,1,3]; -function pushArray(array) { - for (let i = 0; i < 10; i++) { - array.push(Math.random() * 10); + +class liveGraph { + + constructor() { + this.timeArray = []; + this.dateArray = []; + this.valueArray = []; + } + pushArray(array) { + for (let i = 0; i < 10; i++) { + array.push(Math.random() * 10); + } + } + makeGraph() { + Plotly.plot("liveGraph", [ + { + x: this.timeArray, // Use timeArray as x values + y: this.valueArray, + mode: "lines", + line: { color: "#80CAF6" }, + name: "Temperature", + }, + ]); + } + + updateGraph() { + let cnt = 0; + let interval = setInterval(function () { + var time = new Date(); + this.timeArray.push(new Date()); + this.pushArray(this.valueArray); + var update = { + x: [[this.timeArray]], + y: [[this.newValueArray]], + }; + var olderTime = time.setMinutes(time.getMinutes() - 1); + var futureTime = time.setMinutes(time.getMinutes() + 1); + var minuteView = { + xaxis: { + type: "date", + range: [olderTime, futureTime], + }, + }; + Plotly.relayout("liveGraph", minuteView); + if (cnt === 10) clearInterval(interval); + }, intervalDelay); } } -// Make lines in the graph of the live data -Plotly.plot("liveGraph", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); -// Make lines in the graph of the live data -Plotly.plot("liveGraph2", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray2, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -// Make lines in the graph of the live data -Plotly.plot("liveGraph3", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray3, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]);// Make lines in the graph of the live data -Plotly.plot("liveGraph4", [ - { - x: timeArray, // Use timeArray as x values - y: valueArray4, - mode: "lines", - line: { color: "#80CAF6" }, - name: "Temperature", - }, -]); - -// Make lines in the graph of the live data +let graph = new liveGraph(); +graph.makeGraph(); + graph.updateGraph(); + graph.pushArray(); + console.log("test"); - -let cnt = 0; - -// Update the graph every 1 ms -let interval = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); - - pushArray(valueArray); - - var update = { - x: [[timeArray]], - y: [[newValueArray]], - }; - - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); - - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph", minuteView); - - if (cnt === 10) clearInterval(interval); -}, intervalDelay); - -// Update the graph every 1 ms -let interval2 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); - - pushArray(valueArray2); - - var update = { - x: [[time]], - y: [[newValueArray]], - }; - - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); - - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph2", minuteView); - - if (cnt === 1000) clearInterval(interval2); -}, intervalDelay); - -// Update the graph every 1 ms -let interval3 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); - - pushArray(valueArray3); - - var update = { - x: [[time]], - y: [[newValueArray]], - }; - - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); - - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph3", minuteView); - - if (cnt === 1000) clearInterval(interval3); -}, intervalDelay); - -// Update the graph every 1 ms -let interval4 = setInterval(function () { - var time = new Date(); - timeArray.push(new Date()); - - pushArray(valueArray4); - - var update = { - x: [[time]], - y: [[newValueArray]], - }; - - var olderTime = time.setMinutes(time.getMinutes() - 1); - var futureTime = time.setMinutes(time.getMinutes() + 1); - - var minuteView = { - xaxis: { - type: "date", - range: [olderTime, futureTime], - }, - }; - Plotly.relayout("liveGraph4", minuteView); - - if (cnt === 1000) clearInterval(interval4); -}, intervalDelay); \ No newline at end of file