adds class for graph

This commit is contained in:
Sietse Jonker
2024-03-05 16:36:42 +01:00
parent f99d7b5c3d
commit db9c984446

View File

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