chartjs-plugin-streaming #17

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://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-streaming.min.js"></script>
<canvas id="chart"></canvas>

JavaScript

var timestamps = []; // timestamp array
var data = []; // two dimensional array (data[row][column])
var cursor = 0; // next refreshing row

// receive data from a client
function inputMessage(unix_timestamp, values) {
  timestamps.push(unix_timestamp);
  data.push(values);
}

// refresh function to be set to options.plugins.streaming.onRefresh option 
function refresh(chart) {
    length = data.length;
    Array.prototype.push.apply(
      chart.data.labels, timestamps.slice(cursor, length)
    );
    for (var i = cursor; i < length; i++) {
      for (var j = 0; j < data[i].length; j++) {
        chart.data.datasets[j].data.push(data[i][j]);
      }
    }
    cursor = length;
}

// create a chart
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  labels: [],
  data: { datasets: [{ data: [] }, { data: [] }] },
  options: {
    scales: { xAxes: [{ type: 'realtime' }] },
    plugins: { streaming: { onRefresh: refresh, delay: 1000 } }
  }
});

// Call inputMessage() every 100ms
setInterval(function() {
  inputMessage(Date.now(), [Math.random(), Math.random() + 1]);
}, 100);