chartjs-plugin-streaming #68

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://www.chartjs.org/chartjs-chart-financial/chartjs-chart-financial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="chart2"></canvas>
<canvas id="chart1"></canvas>

CSS

canvas {
  position: absolute;
}

JavaScript

var chart1 = new Chart(document.getElementById('chart1'), {
  type: 'candlestick',
  data: {
    datasets: [{
      data: [],
      fractionalDigitsCount: 2
    }]
  },
  options: {
    title: {
      display: true,
      text: 'Financial chart sample'
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        type: 'realtime',
        realtime: {
          duration: 120000,
          refresh: 500,
          delay: -50000,
          onRefresh: function(chart) {
            var t = Date.now();
            var data = chart.data.datasets[0].data;
            var last;

            t -= t % 5000;
            if (data.length === 0) {
              data.push({ t: t - 5000, o: 99, h: 101, l: 98, c: 100 });
            }
            last = data[data.length - 1];
            if (t != last.t) {
              var c = last.c;
              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);
            
            console.log('min: ' + Math.min(...chart.data.datasets[0].data.map(function(value) {
        return value.l;
      })), 'max:' + Math.max(...chart.data.datasets[0].data.map(function(value) {
        return value.h;
      })));
          }
        }
      }],
      yAxes: [{
        ticks: {
          min: 96,
          max: 105
        }
      }]
    },
    tooltips: {
      position: 'nearest',
      intersect: false
    },
    animation: {
      duration: 0
    }
  }
});
var chart2 = new Chart(document.getElementById('chart2'), {
  type: 'horizontalBar',
  data: {
    labels: [96, 97, 98, 99, 100, 101, 102, 103, 104],
    datasets: [{
      data: [-143, -64, -23, -78, 34, 74, 42, 50, 13],
      backgroundColor: 'yellow'
    }, {
      data: [102, 47, 38, 18, -44, -93, -20, -39, -7],
      backgroundColor: 'skyblue'
    }]
  },
  options: {
    layout: {
     ...