chartjs-plugin-streaming #26

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://rawgit.com/nagix/nagix.github.io/chartjs/chartjs-plugin-streaming.26.js"></script>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>

JavaScript

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'line',
  data: { datasets: [{ data: [] }, { data: [] }] },
  options: {
    scales: { xAxes: [{ type: 'realtime' }] },
    plugins: {
      streaming: {
        onRefresh: function(chart) {
          chart.data.datasets.forEach(function(dataset) {
            dataset.data.push({
              x: Date.now(),
              y: Math.random()
            });
          });
        }
      }
    }
  }
});

var ctx2 = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'pie',
  data: { datasets: [{ data: [10, 20, 30] }], labels: ['a', 'b', 'c'] }
});