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

var plot_2 = chart.plot(2);

​

// configure the y-scale of the second and third plot

plot_1.yScale().minimum(-100);

plot_1.yScale().maximum(0);

plot_2.yScale().minimum(-100);

plot_2.yScale().maximum(0);

​

// create ohlc series

var ohlcSeries = plot_0.ohlc(mapping);

ohlcSeries.name("CSCO");

​

// create and adjust the Williams %R indicator with settings adjusted

var williamsR_1 = plot_1.williamsR(mapping, 5, "area").series();

williamsR_1.stroke("0.5 gray");

williamsR_1.fill("#ffd54f");

​

// create and adjust the Williams %R indicator with settings adjusted

var williamsR_2 = plot_2.williamsR(mapping, 60, "column").series();

williamsR_2.stroke("0.5 lightGray");

williamsR_2.fill("#ff6d00");

​

// set container id for the chart

chart.container('container');

// initiate chart drawing

chart.draw();

});