J1B3-Sensor-boxes/web/main.js

let data;
let measurements;
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;

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