Chartjs-Refresh chart data every second javascript

by

0👍

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>

0👍

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.

More on adding/removing data here

Leave a comment