Untitled

real time

///////////

<html>
  <script type="text/javascript" src="moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.1"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.4"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@latest/dist/chartjs-plugin-streaming.min.js"></script>

<style>
  .myChartDiv {
    max-width: 600px;
    max-height: 400px;
  }
</style>

<body>
  <div class="myChartDiv">
    <canvas id="myChart" width="600" height="400"></canvas>
  </div>
</body>

</html>

<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {

      datasets: [{
        data: []
      }, {
        data: []
      }]
    },
    options: {
      scales: {
        xAxes: [{

          type: 'realtime',
                        realtime: {
                            duration: 20000,
                            refresh: 1000,
                            delay: 2000,
                            onRefresh: onRefresh
                        }

        }]
      },
      plugins: {
        zoom: {
          // Container for pan options
          pan: {
            // Boolean to enable panning
            enabled: true,

            // Panning directions. Remove the appropriate direction to disable
            // Eg. 'y' would only allow panning in the y direction
            mode: 'xy'
          },

          // Container for zoom options
          zoom: {
            // Boolean to enable zooming
            enabled: true,

            // Zooming directions. Remove the appropriate direction to disable
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'xy',
          }
        }
      }
    }
  });

  function onRefresh(chart) {
            chart.config.data.datasets.forEach(function(dataset) {
                dataset.data.push({
                    x: Date.now(),
                    y: randomScalingFactor()
                });
            });
        }

    function randomScalingFactor() {
            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
        }

</script>