JSFiddle - React, Tailwind, and code Playground

by askhflajsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
<script src="https://rawgit.com/chartjs/Chart.js/master/samples/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-dsv/1.0.3/d3-dsv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.4/numeral.min.js"></script>
<h1><a href="http://bitfinex.com/">Bitfinex</a></h1>
<canvas id="canvas"></canvas>

CSS

canvas {
  display: block;
  background: #fff;
  width: 100%;
}

JavaScript

$(function() {
  var priceDataQuery = $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdata.bitcoinity.org%2Fexport_data.csv%3Fcurrency%3DUSD%26data_type%3Dprice%26exchange%3Dbitfinex%26r%3Dhour%26t%3Dl%26timespan%3D7d'%20and%20columns%3D'Time%2Cavg%2Cmax%2Cmin'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys");
  var volumeDataQuery = $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fdata.bitcoinity.org%2Fexport_data.csv%3Fcurrency%3DUSD%26data_type%3Dprice_volume%26exchange%3Dbitfinex%26t%3Dlb%26timespan%3D7d%26vu%3Dcurr'%20and%20columns%3D'Time%2Cprice%2Cvolume'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys");
  
  $.when(priceDataQuery, volumeDataQuery).done(function(priceData, volumeData) {
    priceData[0].query.results.row.shift(); // remove column names row
    volumeData[0].query.results.row.shift(); // remove column names row
    var config = getConfig(priceData[0].query.results.row, volumeData[0].query.results.row);
    var ctx = document.getElementById("canvas").getContext("2d");
    var myChart = new Chart(ctx, config);
  });
});

function getConfig(priceData, volumeData) {
  return {
    type: 'bar',
    data: {
      labels: volumeData.map(function(day) {
        return new Date(day.Time);
      }),
      datasets: [{
        type: 'bar',
        label: 'Volume',
        xAxisID: 'x-axis-1',
        yAxisID: 'y-axis-2',
        //borderWidth: 0,
        //backgroundColor: 'rgba(50,50,80,0.5)',
        //borderColor: 'rgba(60,60,90,0.5)',
        data: volumeData.map(function(day) {
          return parseFloat(day.volume);
        })
      }]
    },
    options: {
      legend: {
        display: false
      },
      title: {
        text: "Chart.js blabla"
      },
      layout: {
        padding: {
          top: 10,
          bottom: 10,
          left: 5,
          right: 5
        }
      },
...