chartjs-plugin-streaming multiple axes

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.3.0/chartjs-plugin-streaming.min.js"></script>
<canvas id="chart1"></canvas>

JavaScript

function onRefresh(chart) {
  chart.data.datasets.forEach(function(dataset, i) {
    if (i == 1) {
      dataset.data.push({
        x: Date.now(),
        y: Math.random()
      });
    }
  });
}

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'line',
  data: { datasets: [{
  	data: [ { x: -1, y: 0.2 }, { x: 1, y: 0.8 } ],
    xAxisID: 'x1'
  }, {
  	data: [],
    xAxisID: 'x2'
  }] },
  options: {
    scales: { xAxes: [{
      id: 'x1',
    	type: 'linear'
    }, {
    	id: 'x2',
    	type: 'realtime'
    }] },
    plugins: { streaming: { onRefresh: onRefresh } }
  }
});