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 loaded data

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', 5, 'value');

// create stock chart

var chart = anychart.stock();

// create plots on the chart

var plot_0 = chart.plot(0);

var plot_1 = chart.plot(1);

​

// create line series on both of them

var ohlcSeries_0 = plot_0.ohlc(mapping);

ohlcSeries_0.name('CSCO');

ohlcSeries_0.stroke('2px #64b5f6');

​

// create first ATR indicator of default series type

var atr_1 = plot_0.atr(mapping, 10).series();

atr_1.stroke('#bf360c');

​

// create second ATR indicator of column series

var atr_2 = plot_1.atr(mapping, 30, "column").series();

atr_2.fill('#ff6d00');

​

// set container id for the chart

chart.container('container');

// initiate chart drawing

chart.draw();

});