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/msft-daily-short-data(2011-2016).js

​

  // create data table on loaded data

  var dataTable = anychart.data.table();

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

​

  // map data for the chart plots

  var mapping = dataTable.mapAs({

    open: 1,

    high: 2,

    low: 3,

    close: 4,

    volume: 5

  });

​

  // map loaded data for the scroller

  var scrollerMapping = dataTable.mapAs();

  scrollerMapping.addField('value', 5);

​

  // create stock chart

  var chart = anychart.stock();

​

  // create ohlc series on the first plot

  var ohlcSeries = chart.plot(0).ohlc(mapping).name('MSFT');

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

​

  // create and setup second plot

  var obvPlot = chart.plot(1).height('25%');

  obvPlot

    .yAxis()

    .labels()

    .format('${%Value}{scale:(1000000)(1000)|(kk)(k)}');

​

  // create OBV indicator on the second plot

  var obv = obvPlot.obv(mapping);

​

  // set OBV indicator's stroke parameters

  obv.series().stroke({

    color: '#55f',

    thickness: 2

  });

​

  // create and setup third plot

  var vmaPlot = chart.plot(2).height('20%');

  vmaPlot

    .yAxis()

    .labels()

    .format('${%Value}{scale:(1000000)(1000)|(kk)(k)}');

​

  // create Volume+MA indicator on the third plot

  var vma = vmaPlot.volumeMa(mapping);

​

  // set series type for volume series of Volume+MA indicator

  vma.volumeSeries().seriesType('column');

​

  // create scroller series with mapped data

  chart.scroller().column(scrollerMapping);

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

​

  // set values for selected range

  chart.selectRange('ytd', 1, 'last-date');

​

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

});