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://rawgit.com/chartjs/chartjs-plugin-zoom/master/chartjs-plugin-zoom.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>EFFORT ABANDONED - IMPOSSIBLE WITHOUT CREATING LARGE BACKEND DATABASE</h1>

CSS

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

JavaScript

$(function() {
  var getTrades = $.getJSON("https://cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/usd/trades.json");

  $.when(getTrades).done(
    function(trades) {
      console.log(trades)
      var config = getConfig(trades);
      var ctx = document.getElementById("bar-chart").getContext("2d");
      var myChart = new Chart(ctx, config);

      //alert(trades[0].date);
      //alert(trades[0].amount);
    }
  );
});

function getConfig(trades) {
  return {
    // http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/

    type: 'bar',
    data: {
      labels: trades.map(function(trade) {
        return new Date(trade.date * 1000);
      }),
      datasets: [{
        label: "Amount",
        backgroundColor: "#3e95cd",
        // data: trades.map(function(month) {
        //   return parseFloat(month.volume);
        // })
        data: trades.map(function(trade) {
        	return trade.amount
        })
      }]
    },
    options: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'Chart.js blabla'
      },

      // Grid lines layout
      // https://stackoverflow.com/questions/36676263/chart-js-v2-hiding-grid-lines
      scales: {
        xAxes: [{
          id: 'x-axis-1',
          type: "category",
          position: 'top',
          display: true,
          gridLines: {
	          display: false,
            color: '#444',
            drawOnChartArea: false,
            drawBorder: true,
            drawTicks: false
          },
          ticks: {
          	display: false
          }
        }],
        yAxes: [{
          gridLines: {
            display: true,
            drawBorder: false
          }
        }]
      }
    }
  }
}