html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

// The data that 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 loaded data for the ohlc series

var mapping = dataTable.mapAs();

mapping.addField('open', 1, 'first');

mapping.addField('high', 2, 'max');

mapping.addField('low', 3, 'min');

mapping.addField('close', 4, 'last');

mapping.addField('value', 4, 'close');

​

// create stock chart

var chart = anychart.stock();

​

// create first plot on the chart

var plot_0 = chart.plot(0);

​

// create ohlc series

var ohlcSeries = plot_0.ohlc(mapping);

ohlcSeries.name('CSCO');

​

// create second plot on the chart

var plot_1 = chart.plot(1);

plot_1.height('25%');

​

// create Aroon indicator with period 25 and shown as steplines on the second plot

aroon25 = plot_1.aroon(mapping, 25, "step-line", "step-line");

aroon25.upSeries().stroke('#bf360c');

aroon25.downSeries().stroke('#ff6d00');

aroon25.rangeSeries().fill('#ffd54f 0.2');

​

// create third plot on the chart

var plot_2 = chart.plot(2);

plot_2.height('25%');

​

// create Aroon indicator with period 30 and shown as splines on the third plot

aroon30 = plot_2.aroon(mapping);

aroon30.period(30);

aroon30.upSeries().seriesType("spline");

aroon30.upSeries().stroke('#bf360c', 2, '5 5 10');

aroon30.downSeries().seriesType("spline");        

aroon30.downSeries().stroke('#ff6d00', 2, '5 5 10');   

aroon30.rangeSeries().fill("none");           

​

// create scroller series with mapped data

chart.scroller().line(mapping);

​

// set container id for the chart

chart.container('container');

​

// initiate chart drawing

chart.draw();

});