Как при каждом fetch запросе добавлять полученное значение в массив(Chart.js)?

Question

[Антон]

Внешний сервис с помощью ajax возвращает рандомное число от 0 до 100, как записывать каждое число при новом запросе, чтобы прошлые значения оставались?Хочу потом к графику приделать и чтобы обновлялся через определенное время(0 потом от запроса и т.д).Правильное направление или лучше по другому?

Пока сделал по клику:

fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((req) => {
      var ctx = document.getElementById("myChart").getContext("2d");
      let arr;
      var chart = new Chart(ctx, {
        type: "line",
        data: {
          labels: [
            "+5s",
            "+5s",
            "+5s",
            "+5s",
            "+5s",
            "+5s",
            "+5s",
          ],
          datasets: [
            {
              label: "Загрузка процессора",
              backgroundColor: "rgb(255, 99, 132)",
              borderColor: "rgb(255, 99, 132)",
              data: [req],
            },
          ],
        },

        // Configuration options go here
        options: {

          responsive: true,
        },
      });
      let btn = document.querySelector('.btn');
      btn.addEventListener('click',updateChart)
      function updateChart() {
        console.log(req);
        chart.data.datasets[0].data = req; 
        chart.update();
      }
    });

Answer 1

[Антон]

Допёр сам.
Вдруг кому пригодится:

window.onload = function () {
  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((req) => {
      var ctx = document.getElementById("myChart").getContext("2d");
      var old = [0, 25, 78, 67, 96, 92];
      // old.push(req)
      var chart = new Chart(ctx, {
        type: "line",
        data: {
          labels: ["+5s", "+5s", "+5s", "+5s", "+5s", "+5s", "+5s"],
          datasets: [
            {
              label: "Загрузка процессора",
              borderColor: "rgb(255, 99, 132)",
              data: old,
            },
          ],
        },
        // Configuration options go here
        options: {
          responsive: true,
        },
      });
      setInterval(() => {
        fetch(url)
          .then((response) => {
            return response.json();
          })
          .then((req) => {
            addValue(req);
          });
      }, 5000);

      function addValue(req) {
        chart.data.datasets[0].data.push(req);
        chart.data.labels.push("+5s");
        chart.update();
      }
    });
};