Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add liveGraph class and update index.html

Browse Source
This commit is contained in:
Sietse Jonker
2024-03-06 15:02:34 +01:00
parent 9b01523f0e
commit 65783ac3b6
3 changed files with 57 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/classes.js Normal file
View File

@@ -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);

1
web/index.html
View File

@@ -73,5 +73,6 @@
</div> <!-- class="nodeData" --> </div> <!-- class="nodeData" -->
<!-- Include the js file --> <!-- Include the js file -->
<script src="main.js"></script> <script src="main.js"></script>
<script src="classes.js"></script>
</body> </body>
<html> <html>

56
web/main.js
View File

@@ -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);