chartjs-plugin-streaming #40

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

JavaScript

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0,1,2,3],
  	datasets: [{
    	data: [1,0,3,2],
      outerGlowWidth: 10,
      outerGlowColor: '#ff0000',
      fill: false
    }]
  },
  options: {
    scales: {
    	xAxes: [{
        //type: 'realtime',
        realtime: {
          onRefresh: function(chart) {
            chart.data.datasets[0].data.push({
              x: Date.now(),
              y: Math.random()
            });
          }
        }
      }]
    },
    layout: {
	    padding: {
  	    right: 30
    	}
    }
  },
  plugins: [{
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      var y = chart.scales['y-axis-0'].getPixelForValue(0.6);
      ctx.lineWidth = 3;
      ctx.strokeStyle = '#ff0000';
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(chart.width, y);
      ctx.stroke();
    }
  }]
});