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>How to make this <a href="http://www.chartjs.org/">Chart.js</a> chart use custom JSON?</h1>
<canvas id="bar-chart"></canvas>
<br>
<h1>End result should look like this: <a href="https://coin.dance/volume/localbitcoins/USD">https://coin.dance/volume/localbitcoins/USD</a></h1>
<img src="https://s8.postimg.org/pl3j9ikt1/coin-dance-localbitcoins-_EUR-volume.jpg" style="width: 100%;">

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) {
      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);
      }),
      // labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [{
        label: "Dates",
        backgroundColor: "#3e95cd",
        // data: trades.map(function(month) {
        //   return parseFloat(month.volume);
        // })
        data: trades.map(function(trade) {
        	return trade.price
        })
      }]
    },
    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: [{
          gridLines: {
            display: false,
            drawBorder: false
          }
        }],
        yAxes: [{
          gridLines: {
            display: true,
            drawBorder: false
          }
        }]
      }
    }
  }
}