chartjs-plugin-streaming #91

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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>
<button id="pause">Pause/Resume</button>

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: {
      x: {
        type: 'realtime',
        realtime: {
          onRefresh: function(chart) {
            chart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          },
          delay: 2000
        }
      }
    }
  }
});

var pauseTime;

function pause() {
  var realtimeOpts = chart.options.scales.x.realtime;
  realtimeOpts.pause = true;
  chart.update('none');
  pauseTime = Date.now();
}

function resume() {
  var realtimeOpts = chart.options.scales.x.realtime;
  realtimeOpts.delay += Date.now() - pauseTime;
  realtimeOpts.pause = false;
  chart.update('none');
  pauseTime = undefined;
}

document.getElementById('pause').addEventListener('click', function() {
  if (pauseTime) {
    resume();
  } else {
    pause();
  }
});