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

​

    // map data for the ohlc series

    var ohlcMapping = dataTable.mapAs({'open': 1, 'high': 2, 'low': 3, 'close': 4});

​

    // map data for scroller and volume series

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

​

    // create stock chart

    var chart = anychart.stock();

​

    // create and setup ohlc series on the first plot

    var ohlcSeries = chart.plot(0).ohlc(ohlcMapping);

    ohlcSeries.name('CSCO');

    ohlcSeries.legendItem().iconType('risingfalling');

​

    // create and setup volume plot

    var volumePlot = chart.plot(1);

    volumePlot.height('30%');

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

​

    // create and setup ohlc series on the first plot

    var volumeSeries = volumePlot.column(valueMapping);

    volumeSeries.name('Volume');

​

    // create scroller series

    chart.scroller().area(valueMapping);

​

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

});