chartjs-plugin-streaming + chartjs-chart-financial

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-chart-financial/master/docs/Chart.Financial.js"></script>
<script src="https://rawgit.com/nagix/nagix.github.io/chartjs/chartjs-plugin-streaming.26.js"></script>
<canvas id="chart"></canvas>

JavaScript

var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'candlestick',
  data: { datasets: [{ data: [] }] },
  options: {
    scales: { xAxes: [{ type: 'realtime' }] },
    plugins: {
      streaming: {
        duration: 60000,
        refresh: 500,
        onRefresh: function(chart) {
          var data = chart.data.datasets[0].data;
          var last = data[data.length - 1];
          var t = Date.now();
          t -= t % 5000;
          if (!last || t != last.t) {
            var c = last ? last.c : 100;
            last = { t: t, o: c, h: c, l: c, c: c };
            data.push(last);
          }
          last.c += Math.random() - 0.5;
          last.h = Math.max(last.h, last.c);
          last.l = Math.min(last.l, last.c);
        }
      }
    }
  }
});