chartjs-plugin-streaming #121 2

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.26.0/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.0.0/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-streaming/2.0.0-beta.3/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)',
      borderDash: [8, 4],
      data: []
    }, {
      label: 'Dataset 2 (cubic interpolation)',
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      borderColor: 'rgb(54, 162, 235)',
      cubicInterpolationMode: 'monotone',
      data: []
    }]
  },
  options: {
    scales: {
      x: {
        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()
              });
            });
          }
        }
      },
      y: {
        type: 'linear',
        display: true,
        title: {
          display: true,
          text: 'value'
        }
      }
    },
    interaction: {
      mode: 'nearest',
      intersect: false
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'x'
        },
        zoom: {
          pinch: {
            enabled: true
          },
          wheel: {
            enabled: true
          },
          mode: 'x'
        },
        limits: {
          x: {
            minDelay: 0,
            maxDelay: 4000,
            minDuration: 1000,
            maxDuration: 20000
          }
        }
      }
    }
  }
});

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,...