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.js

​

  // create data table on loaded data

  var dataTable = anychart.data.table();

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

​

  // map data for the heikin-ashi series

  var mapping = dataTable.mapAs({

    open: 1,

    high: 2,

    low: 3,

    close: 4

  });

​

  // map data for scroller series

  var valueMapping = dataTable.mapAs({ value: 5 });

​

  // create stock chart

  var chart = anychart.stock();

​

  // create and setup Heikin-Ashi series on the first plot

  chart.plot(0).ha(mapping);

​

  chart.plot(1).stochastic(mapping);

​

  chart.plot(1).height('30%');

​

  // create scroller series

  chart.scroller().area(valueMapping);

​

  // set chart selected date/time range

  chart.selectRange('2006-12-01', '2007-06-02');

​

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

});