JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.1.0/chartjs-plugin-streaming.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.js"></script>
<canvas id="Bitfinex"></canvas>
<canvas id="BitStamp"></canvas>

JavaScript

var ws = new WebSocket('wss://api.bitfinex.com/ws/');
ws.onopen = function() {
  ws.send(JSON.stringify({"event":"subscribe", "channel":"trades", "pair":"BTCUSD"}));
};
buf1 = [[], []];
ws.onmessage = function(msg) {
  var response = JSON.parse(msg.data);
  if (response[1] === 'te') {
    buf1[response[5] > 0 ? 0 : 1].push({
    	x: response[3] * 1000,
      y: response[4]
    });
  }
} 

var ctx = document.getElementById('Bitfinex').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      label: 'Buy',
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      fill: false,
      lineTension: 0
    }, {
      data: [],
      label: 'Sell',
      borderColor: 'rgb(54, 162, 235)',
      backgroundColor: 'rgba(54, 162, 235, 0.5)',
      fill: false,
      lineTension: 0
    }]
  },
  options: {
    title: {
      text: 'BTC/USD (Bitfinex)',
      display: true
    },
    scales: {
      xAxes: [{
        type: 'realtime'
      }]
    },
    plugins: {
      streaming: {
        duration: 300000,
        onRefresh: function(chart) {
          Array.prototype.push.apply(chart.data.datasets[0].data, buf1[0]);
          Array.prototype.push.apply(chart.data.datasets[1].data, buf1[1]);
          buf1 = [[], []];
        }
      }
    }
  }
});

var pusher = new Pusher('de504dc5763aeef9ff52');
var channel = pusher.subscribe('live_trades');
var buf2 = [[], []];
channel.bind('trade', function (data) {
  buf2[data.type].push({
  	x: data.timestamp * 1000,
    y: data.price
  });
});

var ctx = document.getElementById('BitStamp').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: [],
      label: 'Buy',
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.5)',
      fill: false,
      lineTension: 0
    }, {
      data: [],
      label: 'Sell',
      borderColor: 'rgb(54, 162, 235)',
     ...