diff --git a/web/index.html b/web/index.html index 6643c14..63e7113 100644 --- a/web/index.html +++ b/web/index.html @@ -62,7 +62,15 @@ - + +
+
+

Live graph:

+
+
+
+ + diff --git a/web/main.js b/web/main.js index 4d23f7d..be77e3f 100644 --- a/web/main.js +++ b/web/main.js @@ -1,33 +1,16 @@ -let data; -let measurements; -let date; -let value; -let newArrayTemp = []; -let newArrayHumid = []; -let newArrayLight = []; -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]; -let valueArray3 = [1, 2, 3, 4, 5]; -let valueArray4 = [1, 2, 3, 4, 5]; -let newValueArray = [4, 5, 6]; -let myValue = 1; -let intervalDelay = 50; - +let intervalDelay = 5000; +let newData = true; class liveGraph { - - constructor() { - this.timeArray = []; - this.dateArray = []; - this.valueArray = []; - } - pushArray(array) { - for (let i = 0; i < 10; i++) { - array.push(Math.random() * 10); - } + // 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", [ { @@ -40,34 +23,34 @@ class liveGraph { ]); } + // Function to update the graph with new values 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); + 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 graph = new liveGraph(); -graph.makeGraph(); - graph.updateGraph(); - graph.pushArray(); - console.log("test"); +let graph1 = new liveGraph(1); +graph1.makeGraph(); +let interval = setInterval(function () { + if (newData) { + graph1.updateGraph(); + } +}, intervalDelay); \ No newline at end of file