makes class for graphs

This commit is contained in:
Sietse Jonker
2024-03-06 15:01:20 +01:00
parent a2219fa03a
commit 9b01523f0e
2 changed files with 44 additions and 53 deletions

View File

@@ -62,7 +62,15 @@
</div> </div>
</div> </div>
</div> <!-- class="nodeData" --> </div> <!-- class="nodeData" -->
<!-- Make a new flexcontainer for the graphs and API request time -->
<div class="flex-graph">
<div>
<p>Live graph:</p>
<div id="liveGraph1"></div>
</div>
</div>
</div>
</div> <!-- class="nodeData" -->
<!-- Include the js file --> <!-- Include the js file -->
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>

View File

@@ -1,33 +1,16 @@
let data; let intervalDelay = 5000;
let measurements; let newData = true;
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;
class liveGraph { 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;
}
constructor() { // Fuction to create a graph
this.timeArray = [];
this.dateArray = [];
this.valueArray = [];
}
pushArray(array) {
for (let i = 0; i < 10; i++) {
array.push(Math.random() * 10);
}
}
makeGraph() { makeGraph() {
Plotly.plot("liveGraph", [ Plotly.plot("liveGraph", [
{ {
@@ -40,34 +23,34 @@ class liveGraph {
]); ]);
} }
// Function to update the graph with new values
updateGraph() { updateGraph() {
let cnt = 0; let time = new Date();
let interval = setInterval(function () {
var time = new Date();
this.timeArray.push(new Date()); this.timeArray.push(new Date());
this.pushArray(this.valueArray); this.valueArray.push(Math.random());
var update = { let update = {
x: [[this.timeArray]], x: [[this.timeArray]],
y: [[this.newValueArray]], y: [[this.valueArray]],
}; };
var olderTime = time.setMinutes(time.getMinutes() - 1); let olderTime = time.setMinutes(time.getMinutes() - 1);
var futureTime = time.setMinutes(time.getMinutes() + 1); let futureTime = time.setMinutes(time.getMinutes() + 1);
var minuteView = { let minuteView = {
xaxis: { xaxis: {
type: "date", type: "date",
range: [olderTime, futureTime], range: [olderTime, futureTime],
}, },
}; };
Plotly.relayout("liveGraph", minuteView); Plotly.relayout("liveGraph", minuteView);
if (cnt === 10) clearInterval(interval); if (this.cnt === 10) clearInterval(interval);
}
}
let graph1 = new liveGraph(1);
graph1.makeGraph();
let interval = setInterval(function () {
if (newData) {
graph1.updateGraph();
}
}, intervalDelay); }, intervalDelay);
}
}
let graph = new liveGraph();
graph.makeGraph();
graph.updateGraph();
graph.pushArray();
console.log("test");