ftChart

sample-2

by SAiTO TOSHiKi

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/anandanand84/technicalindicators/master/dist/browser.js"></script>
<h1>Show <a href="https://github.com/anandanand84/technicalindicators">technical indicators</a> in Chart.js similar to <a href="https://bitcoinwisdom.com/markets/bitfinex/btcusd">BitcoinWisdom</a></h1>
<div style="width: 100%;">
  <ul class="time_links">
    <li class="active">10m</li>
    <li>1h</li>
    <li>3h</li>
    <li>12h</li>
    <li>24h</li>
    <li>3d</li>
    <li>7d</li>
    <li>30d</li>
    <li>6mo</li>
    <li>2y</li>
    <li>all</li>
  </ul>
  <ul class="trade_indicators">
    <li class="active">None</li>
    <li>DEMA</li>
    <li>MACD</li>
    <li>PPO</li>
    <li>RSI</li>
    <li>StochRSI</li>
    <li>CCI</li>
    <li>talib-macd</li>
  </ul>
  <input id="candlesticks" type="checkbox" checked=true><label for="candlesticks">Candlesticks</label>
  <canvas id="canvas"></canvas>
</div>
<p></p>
<h1>Get data from LocalBitcoins</h1>
<ul>
  <li><a href="http://localbitcoins.com/bitcoincharts/eur/trades.json">localbitcoins.com/bitcoincharts/eur/trades.json</a></li>
  <li><a href="http://localbitcoins.com/bitcoincharts/eur/orderbook.json">localbitcoins.com/bitcoincharts/eur/orderbook.json</a></li>
  <li>CORS enabled: <a href="https://cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/eur/trades.json">cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/eur/trades.json</a></li>
  <li>CORS enabled: <a href="https://cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/eur/orderbook.json">cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/eur/orderbook.json</a></li>
</ul>

CSS

canvas {
  background: #222;
}
div li {
  display: inline;
  list-tyle-type: none;
}
div li:not(.active) {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
div li.active, div li:hover {
  color: #aaa;
}

JavaScript

// https://github.com/anandanand84/technicalindicators

function calculateEMA() {
  EMA.calculate({period : 5, values : [1,2,3,4,5,6,7,8,9]});
}

function calculateMACD() {
  MACD.calculate({period : 5, values : [1,2,3,4,5,6,7,8,9]});
}

// Get data from LocalBitcoins

var fiatCurrency = "EUR";

function getTradeData() {
  return $.ajax({
    dataType: "json",
    
    // Use reverse proxy due to lack of CORS (http://enable-cors.org/)
    
    // https://github.com/Rob--W/cors-anywhere
    
    url: "https://cors-anywhere.herokuapp.com/localbitcoins.com/bitcoincharts/eur/trades.json",
    success: function(data) {
   
      // Parse JSON
        
      // rate = data[fiatCurrency].rates.last;
    }
  });
}

// https://github.com/chartjs/Chart.js

var timeFormat = 'MM/DD/YYYY HH:mm';

function newDateString(days) {
  return moment().add(days, 'd').format(timeFormat);
}

var color = Chart.helpers.color;
var config = {
  type: 'bar',
  data: {
    labels: [
      newDateString(0),
      newDateString(1),
      newDateString(2),
      newDateString(3),
      newDateString(4),
      newDateString(5),
      newDateString(6),
      newDateString(7),
      newDateString(8),
      newDateString(9),
      newDateString(10),
      newDateString(11),
      newDateString(12),
      newDateString(13),
      newDateString(14),
      newDateString(15),
      newDateString(16)
    ],
    datasets: [{
      type: 'bar',
      label: 'Dataset 1',
      borderWidth: 2,
      backgroundColor: 'rgba(50,50,80,0.5)',
      borderColor: 'rgba(60,60,90,0.5)',
      data: [
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
        Math.abs(randomScalingFactor()),
       ...