chartjs-plugin-streaming #37

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>
<div><canvas id="chart1"></canvas></div>

JavaScript

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'line',
  data: {
  	datasets: [{
    	data: [{x: Date.now(), y: 200}],
    }]
  },
  options: {
    scales: {
    	xAxes: [{
        type: 'realtime',
    	}]
    },
    plugins: {
      streaming: {
        onRefresh: function(chart) {
          var yMin = 0;
          var yMax = 1;
          var xMax = Date.now() - chart.options.plugins.streaming.delay;
          var xMin = xMax - chart.options.plugins.streaming.duration;

          // Your data refresh code
          chart.data.datasets.forEach(function(dataset) {
            dataset.data.push({
              x: Date.now(),
              y: Math.random() * 100
            });
          });

          // Calculate yMin and yMax only based on visible data
          chart.data.datasets.forEach(function(dataset) {
            dataset.data.forEach(function(value) {
              var x = value.x;
              var y = value.y;
              if (x >= xMin && x <= xMax) {
                yMin = Math.min(y, yMin);
                yMax = Math.max(y, yMax);
              }
            });
          });
          chart.config.options.scales.yAxes[0].ticks.min = Chart.helpers.niceNum(yMin);
          chart.config.options.scales.yAxes[0].ticks.max = Chart.helpers.niceNum(yMax);
        },
        ttl: 99999999
      }
    }
  }
});