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({'value': 4});

// 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 lineSeries_0 = plot_0.line(mapping);

lineSeries_0.name('CSCO');

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

​

var lineSeries_1 = plot_1.line(mapping);

lineSeries_1.name('CSCO');

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

​

// create SMA indicator with period 20 and show as line on the first plot

var sma20 = plot_0.sma(mapping, 20).series();

sma20.stroke('#bf360c');

​

// create SMA indicators with period 50 and show as column on the second plot

var sma50 = plot_1.sma(mapping, 50, "column").series();

sma50.fill('#ff6d00');

​

// set container id for the chart

chart.container('container');

// initiate chart drawing

chart.draw();

});