refresh chart data every second javascript

问题

I am creating an html web page with a chart on that shows voltage levels continuously changing. I want to refresh the page every second so that the bars in the bar chart go to the new values. I am not sure how to update the chart data like this. I have the following so far:

Chart.plugins.unregister(ChartDataLabels);

function myFunction() {
  var cells = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
  var voltages = [];
  for (i = 0; i < 16; i++) {
    voltages[i] = Math.floor(28 + Math.floor(Math.random() * 8)) / 10;
  }

  var colours = [];
  for (i = 0; i < voltages.length; i++) {
    colours[i] = getColour(voltages[i]);
  }

  var ctx = document.getElementById("voltageChart");
  var voltageChart = new Chart(ctx, {
    plugins: [ChartDataLabels],
    type: "bar",
    data: {
      labels: cells,
      datasets: [{
        data: voltages,
        backgroundColor: colours,
      }]
    },
  });

  function updateData(chart) {
    chart.data.datasets[0].data = voltages;
    chart.data.datasets[0].backgroundColor = colours;
    chart.update();
  }

  function refreshData() {
    for (i = 0; i < 16; i++) {
      voltages[i] = Math.floor(28 + Math.floor(Math.random() * 8)) / 10;
    }

    for (i = 0; i < voltages.length; i++) {
      colours[i] = getColour(voltages[i]);
    }

    updateData(voltageChart);
  }

  setInterval(refreshData, 1500);
}

回答1:

There are different problems in your code. Please have a look at the following code snippet that shows how it can be done in a simple way.

<html>
<head>
    <title>Polar Area Chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div style="width: 60%">
        <canvas id="voltageChart"></canvas>
    </div>
    <script>            
    window.onload = () => {          
      const cells = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
      const voltages = [];
      const colours = [];
      refreshData();

      const ctx = document.getElementById("voltageChart");
      const voltageChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: cells,
          datasets: [{
            data: voltages,
            backgroundColor: colours,
          }]
        },
        options: {
          legend: {
            display: false
          }
        }
      });
      
      function refreshData() {
        for (i = 0; i < cells.length; i++) {
            voltages[i] = Math.floor(28 + Math.floor(Math.random() * 8)) / 10;
            colours[i] = voltages[i] < 3.2 ? 'green' : 'red';
        }
      }

      setInterval(() => {
        refreshData();
        voltageChart.update();
      }, 1500);
    };
    </script>
</body>

</html>

回答2:

We can use chart.data.datasets.pop() and push new data chart.data.datasets.push() and then invoke chart.js function chart.update to re-render the graph . here is the example : https://codepen.io/bhupendra1011/pen/MWwWogO?editors=1111.

回答3:

If you just simply want to reload the current page after every second which indeed will lead to reload the chart with new data, I guess you are looking for this:

setInterval(() => { location.reload(); }, 1000);

来源：https://stackoverflow.com/questions/60090943/refresh-chart-data-every-second-javascript

标签

javascript

html

chart.js