chartjs-plugin-streaming #19

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

connection = {};

var timestamps = []; // timestamp array
var Chart1data =[];
var cursor = 0; // next refreshing row
var length = 0;
var Counter=0;
var TMPdata1 = 0;
var dataview = new Float32Array(3);
connection.onmessage = function(message)
{
  var buffer = new Uint8Array(message.data);
  TMPdata1 =((buffer[7]<<24)+(buffer[6]<<16)+(buffer[5]<<8)+buffer[4]);
  dataview[0] = Bytes2Float32(TMPdata1);
  timestamps.push(moment());
  Chart1data.push([dataview[0]]);
}

function onRefresh (chart) {
  length =Chart1data.length;
  //messageWindow.value=length;//rows

  Array.prototype.push.apply(
    chart.data.labels, timestamps.slice(cursor, length)
  );
  for (var i = cursor; i < length; i++) {
    for (var j = 0; j < Chart1data[i].length; j++) {
      chart.data.datasets[j].data.push(Chart1data[i][j]);
    }
  }
  cursor = length;
}

function Bytes2Float32(bytes) {
    var sign = (bytes & 0x80000000) ? -1 : 1;
    var exponent = ((bytes >> 23) & 0xFF) - 127;
    var significand = (bytes & ~(-1 << 23));
    if (exponent == 128) 
        return sign * ((significand) ? Number.NaN : Number.POSITIVE_INFINITY);
    if (exponent == -127) {
        if (significand == 0) return sign * 0.0;
        exponent = -126;
        significand /= (1 << 22);
    } else significand = (significand | (1 << 23)) / (1 << 23);
    return sign * significand * Math.pow(2, exponent);
}

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

// Call connection.onmessage() every 100ms
setInterval(function() {
  connection.onmessage({ data: [0, 0, 0, 0, Math.random()*256, Math.random()*256, 0x80 + Math.random()*128, 0x3F] });
}, 100);