chartjs-plugin-streaming #124

by Akihiko Kusanagi

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart"></canvas>

JavaScript

var chart = new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      label: 'Dataset 1',
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      borderDash: [8, 4]
    }, {
      data: [],
      label: 'Dataset 2',
      borderColor: 'rgb(54, 162, 235)',
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      cubicInterpolationMode: 'monotone'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        display: false,
        realtime: {
          onRefresh: chart => {
            chart.data.datasets.forEach(dataset => {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          }
        }
      },
      x2: {
        type: 'linear',
        reverse: true,
        min: 0,
        max: 10
      }
    }
  }
});