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