chartjs-plugin-streaming #88

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart"></canvas>

JavaScript

var chart = new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      label: 'Dataset 1',
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      borderDash: [8, 4]
    }, {
      data: [],
      label: 'Dataset 2',
      borderColor: 'rgb(54, 162, 235)',
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      cubicInterpolationMode: 'monotone'
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'realtime',
        realtime: {
          onRefresh: function(chart) {
            chart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          },
          delay: 2000
        }
      }]
    }
  }
});

setTimeout(() => {
  chart.options.scales.xAxes[0].realtime = {
    duration: 1000 * 60,
    refresh: 1000,
    ttl: 1000 * 60 * 60,
    delay: 100,
    onRefresh: function(chart) {
      chart.data.datasets.forEach(function(dataset) {
        dataset.data.push({
          x: Date.now(),
          y: Math.random()
        });
      });
    }
  };
  chart.update({duration: 0});
}, 5000);