// Make lines in the graph of the live data
Plotly.plot("liveGraph", [
  {
    x: timeArray, // Use timeArray as x values
    y: newArrayTemp,
    mode: "lines",
    line: { color: "#80CAF6" },
    name: "Temperature",
  },
  {
    x: timeArray, // Use timeArray as x values
    y: newArrayHumid,
    mode: "lines",
    line: { color: "#FFA500" },
    name: "Humidity",
  },
  {
    x: timeArray, // Use timeArray as x values
    y: newArrayLight,
    mode: "lines",
    line: { color: "#00FF00" },
    name: "Light / 100",
  },
]);

let cnt = 0;

// Update the graph every 1 ms
let interval = setInterval(function () {
  var time = new Date();

  var update = {
    x: [[time]],
    y: [[newArrayTemp], [newArrayHumid], [newArrayLight]],
  };

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

  apiGraph = document.getElementById("apiGraph");
  Plotly.newPlot(
    apiGraph,
    [
      {
        x: dateArray,
        y: valueArray,
      },
    ],
    {
      margin: { t: 0 },
    }
  );

  if (cnt === 100) clearInterval(interval);
}, 1);