html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/csv-data/csco-daily.csv

  anychart.data.loadCsvFile(

    'https://cdn.anychart.com/csv-data/csco-daily.csv',

    function (data) {

      // create data table on loaded data

      var dataTable = anychart.data.table();

      dataTable.addData(data);

​

      // map loaded data for the ohlc series

      var mapping = dataTable.mapAs();

      mapping.addField('open', 1, 'first');

      mapping.addField('high', 2, 'max');

      mapping.addField('low', 3, 'min');

      mapping.addField('close', 4, 'last');

      mapping.addField('value', 4, 'close');

​

      // create stock chart

      var chart = anychart.stock();

      // setting chart padding to fit both Y axes

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

​

      // create first plot on the chart

      var plot = chart.plot(0);

      // adding extra Y axis to the right side

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

​

      // create line series

      plot.ohlc().data(mapping).name('CSCO');

​

      // create first plot on the chart

      var indicatorPlot = chart.plot(1);

      indicatorPlot.height('30%');

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

​

      // create Aroon indicator with period 25

      var aroonIndicator = indicatorPlot.aroon(mapping);

      // set period

      aroonIndicator.period(25);

​

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

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

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

​

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

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

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

​

      // create scroller series with mapped data

      chart.scroller().line(mapping);

​

      // set chart selected date/time range

      chart.selectRange('2002-11-02', '2007-11-15');

      // 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);

    }

  );

});