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

​

var mapping = dataTable.mapAs({

    'open': 1,

    'high': 2,

    'low': 3,

    'close': 4,

    'value': {column: 4, type: 'close'}

});

​

// create stock chart

var chart = anychart.stock();

​

// create ohlc series

chart.plot(0).ohlc(mapping).name('CSCO');

​

// create Bollinger Bands %B indicator with period 10 and show as a line on the second plot

var BBandsB10 = chart.plot(1).bbandsB(mapping, 10, 0.2, "line").series();

BBandsB10.stroke('#bf360c');

​

// create Bollinger Bands %B indicator with period 50 and show as a column on the third plot

var BBandsB50 = chart.plot(2).bbandsB(mapping, 50, 0.6, "column").series();

BBandsB50.fill('#ff6d00');

​

// create scroller series with mapped data

chart.scroller().line(mapping);

​

// set container id for the chart

chart.container('container');

​

// initiate chart drawing

chart.draw();

});