html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var dataTable = anychart.data.table();

  dataTable.addData(get_csco_daily_data()); // eslint-disable-line no-undef

​

  var mapping = dataTable.mapAs({

    open: 1,

    high: 2,

    low: 3,

    close: 4,

    value: 4

  });

​

  // create stock chart

  var chart = anychart.stock();

  chart.padding(10, 50, 20, 50);

  chart.title({

    text: 'Plot title demo',

    fontColor: '#333',

    fontSize: 20

  });

​

  // create plot for the candlestick series

  var candlestickPlot = chart.plot(0);

  // adding extra Y axis to the right side

  candlestickPlot.yAxis(1).orientation('right');

​

  // create candlestick series

  candlestickPlot.candlestick().data(mapping).name('CSCO');

​

  // set candlestick plot title

  candlestickPlot.title({

    text: 'Cisco Systems, Inc. Stock prices',

    fontSize: 16

  });

​

  // create plot for MACD indicator

  var macdPlot = chart.plot(1);

  macdPlot.height('35%');

  macdPlot.yAxis(1).orientation('right');

​

  // create MACD Indicator

  macdPlot.macd(mapping);

​

  // set MACD plot title

  macdPlot.title('Moving Average Convergence/Divergence');

  macdPlot.title().fontSize(16).margin().top(20);

​

  // create plot for aroon indicator

  var aroonPlot = chart.plot(2);

  aroonPlot.height('35%');

  aroonPlot.yAxis(1).orientation('right');

​

  // set Aroon Indicator plot title

  aroonPlot.title({

    text: 'Aroon Indicator',

    fontSize: 16,

    margin: {

      top: 20

    }

  });

​

  // create Aroon indicator

  var aroonIndicator = aroonPlot.aroon(mapping);

​

  // set high and low stroke settings for indicator's range series

  aroonIndicator.rangeSeries().normal().highStroke('#64b5f6', 2);

  aroonIndicator.rangeSeries().normal().lowStroke('#ff6d00', 2);

​

  // set high and low fill settings for indicator's range series

  aroonIndicator.rangeSeries().normal().highFill('#64b5f6', 0.4);

  aroonIndicator.rangeSeries().normal().lowFill('#ff6d00', 0.4);

​

  // create scroller series with mapped data

  chart.scroller().splineArea(mapping);

​

  // set chart selected date/time range

  chart.selectRange('1999-06-24', '2001-05-29');

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

​

  // create range picker

  var rangePicker = anychart.ui.rangePicker();

  // init range picker

  rangePicker.render(chart);

​

  // create range selector

  var rangeSelector = anychart.ui.rangeSelector();

  // init range selector

  rangeSelector.render(chart);

});