chartjs-plugin-streaming #121

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-streaming/1.9.0/chartjs-plugin-streaming.min.js"></script>
<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>

JavaScript

const myChart1 = new Chart(document.getElementById('myChart1'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'Dataset 1 (linear interpolation)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      borderColor: 'rgb(255, 99, 132)',
      fill: false,
      lineTension: 0,
      borderDash: [8, 4],
      data: []
    }, {
      label: 'Dataset 2 (cubic interpolation)',
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgb(54, 162, 235)',
      fill: false,
      cubicInterpolationMode: 'monotone',
      data: []
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'realtime',
        realtime: {
          duration: 20000,
          refresh: 1000,
          delay: 2000,
          onRefresh: chart => {
            var now = Date.now();
            chart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: now,
                y: Math.random()
              });
            });
          }
        }
      }],
      yAxes: [{
        type: 'linear',
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'value'
        }
      }]
    },
    tooltips: {
      mode: 'nearest',
      intersect: false
    },
    hover: {
      mode: 'nearest',
      intersect: false
    },
    pan: {
      enabled: true,
      mode: 'x',
      rangeMax: {
        x: 4000
      },
      rangeMin: {
        x: 0
      }
    },
    zoom: {
      enabled: true,
      mode: 'x',
      rangeMax: {
        x: 20000
      },
      rangeMin: {
        x: 1000
      }
    }
  }
});

const myChart2 = new Chart(document.getElementById('myChart2'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'Dataset 1 (linear interpolation)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      borderColor: 'rgb(255, 99, 132)',
      fill: false,
      lineTension: 0,
      borderDash: [8, 4],
      data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,...