chartjs-plugin-streaming 1.5.0 sample

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.6.3/chartjs-plugin-zoom.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
  	datasets: [{
    	data: [],
      pointRadius: 1.5
    }, {
    	data: []
    }]
  },
  options: {
    scales: {
    	xAxes: [{
        type: 'time',
							ticks: {
								min: '100',
								max: '-100'
							}
    	}],
      yAxes: [{
        ticks: {
          stepSize: 1
        }
      }]
    },
    zoom: {
      enabled: true,
      drag: true,
      mode: 'xy',
      limits: {
        max: 10,
        min: 0.5
      }
    },
    plugins: {
      streaming: false/*{
        onRefresh: function(chart) {
          chart.data.datasets.forEach(function(dataset) {
            dataset.data.push({
              x: Date.now(),
              y: Math.random()*3
            });
          });
        }
      }*/
    }
  }
});