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

var mapping = dataTable.mapAs({"open": 1, "high": 2, "low": 3, "close": 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 ohlc series on both of them

var ohlcSeries_0 = plot_0.ohlc(mapping);

ohlcSeries_0.name("CSCO");

​

var ohlcSeries_1 = plot_1.ohlc(mapping);

ohlcSeries_1.name("CSCO");

​

// create and adjust a Keltner Channels indicator

var keltnerChannels_0 = plot_0.keltnerChannels(mapping, 10, 15, "sma", 4);

keltnerChannels_0.maSeries().stroke("2 #ef6c00");

keltnerChannels_0.rangeSeries().fill("#ffd54f 0.2");

keltnerChannels_0.rangeSeries().highStroke("2 #00bfa5");

keltnerChannels_0.rangeSeries().lowStroke("2 #dd2c00");

​

// create and adjust a Keltner Channels indicator

var keltnerChannels_1 = plot_1.keltnerChannels(mapping, 10, 15, "sma", 4, "step-line", "step-range-area");

keltnerChannels_1.maSeries().stroke("2 #64b5f6");

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

keltnerChannels_1.rangeSeries().lowStroke("2 #00bfa5");

keltnerChannels_1.rangeSeries().highStroke("2 #00bfa5");

​

// create scroller series with mapped data

chart.scroller().line(mapping);

​

// set container id for the chart

chart.container("container");

​

// initiate chart drawing

chart.draw();

});