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({

        open: 1,

        high: 2,

        low: 3,

        close: 4,

        value: {

          column: 4,

          type: 'close'

        }

      });

​

      // map loaded data for the scroller

      var scrollerMapping = dataTable.mapAs();

      scrollerMapping.addField('value', 5);

​

      // create stock chart

      var chart = anychart.stock();

​

      // create first plot on the chart

      var plot = chart.plot();

      plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);

​

      // create candlestick series

      var series = plot.candlestick(mapping).name('CSCO');

​

      // set legend icon type for candlestick series

      series.legendItem().iconType('rising-falling');

​

      // create price channels indicator

      var priceChannels = plot.priceChannels(mapping);

​

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

      priceChannels.rangeSeries().highStroke('navy');

      priceChannels.rangeSeries().lowStroke('orange');

​

      // set indicator's range series fill settings

      priceChannels.rangeSeries().fill('black .1');

​

      // set indicator's middle series stroke settings

      priceChannels.middleSeries().stroke('green', 2);

​

      // create scroller series with mapped data

      chart.scroller().line(mapping);

​

      // set chart selected date/time range

      chart.selectRange('2004-11-15', '2005-11-16');

​

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

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

    }

  );

});