Files
J1B3-Sensor-boxes/web/main.js
2024-03-06 15:01:20 +01:00

56 lines
1.3 KiB
JavaScript

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