Indicators demo

author(s): Black Label

HTML

<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://blacklabel.github.io/indicators/js/indicators.js"></script>
<script src="http://blacklabel.github.io/indicators/js/sma.js"></script>
<script src="http://blacklabel.github.io/indicators/js/ema.js"></script>
<script src="http://blacklabel.github.io/indicators/js/atr.js"></script>
<script src="http://blacklabel.github.io/indicators/js/rsi.js"></script>
<div id="container-advanced" style="height:530px" class="chart"></div>

<button id="btn">Click</button>

CSS

body {
  padding: 0px !important;
}

JavaScript

$(function() {
  var adv_options = {
    chart: {
      alignAxes: false,
      borderWidth: 5,
      borderColor: '#e8eaeb',
      borderRadius: 0,
      backgroundColor: '#f7f7f7'
    },
    title: {
      style: {
        'fontSize': '1em'
      },
      useHTML: true,
      x: -27,
      y: 8
    },
    yAxis: {
      opposite: false,
      title: {
        text: 'rsi',
        x: -4
      },
      lineWidth: 2
    },
    rangeSelector: {
      selected: 0
    },
    tooltip: {
      enabledIndicators: true
    },
    legend: {
      enabled: true
    },
    series: [{
      cropThreshold: 0,
      id: 'AAPL',
      name: 'AAPL',
      data: [],
      tooltip: {
        valueDecimals: 2
      }
    }]
  };

  $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {

    adv_options.series[0].type = 'candlestick';
    adv_options.series[0].data = data;

    $('#container-advanced').highcharts('StockChart', adv_options, function() {
      var chart = this;
      var showRsi = true;

      $('#btn').on('click', function() {
        //var indicator = chart.indicators.allItems[0];
        if (showRsi) {
          chart.addIndicator({
            id: 'AAPL',
            type: 'rsi',
            params: {
              period: 14,
              overbought: 70,
              oversold: 30
            },
            styles: {
              strokeWidth: 2,
              stroke: 'black',
              dashstyle: 'solid'
            },
            yAxis: {
              lineWidth: 2,
              offset: 0,
              height: '10%',
              top: '90%',
              title: {
                text: 'RSI'
              }
            }
          });
        } else {
          chart.indicators.allItems[0].destroy();
        }

        chart.yAxis[0].update({
          height: showRsi ? '85%' : '100%'
        });

        showRsi = !showRsi;
      });
    });
  });
});