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({"high": 1, "open": 2, "low": 3, "close": 4, "value": 4, "volume": 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);

​

    // create line series on both of them

    var ohlcSeries = plot_0.ohlc(mapping);

    ohlcSeries.name("CSCO OHLC");

    ohlcSeries.stroke("2px #64b5f6");

​

    // create a DMI indicator with default parameters

    var dmi1 = plot_1.dmi(mapping);

​

    // create a DMI indicator with paramters adjusted

    var dmi2 = plot_2.dmi(mapping, 30, 30, false, "spline", "spline", "spline");

    dmi2.adxSeries().stroke("red");

    dmi2.ndiSeries().stroke("navy");

    dmi2.pdiSeries().stroke("green");

​

    // set container id for the chart

    chart.container("container");

    // initiate chart drawing

    chart.draw();

});