html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

table {

}

caption {

    font-weight: 600;

    padding-bottom: 10px;

}

#container {

    position: absolute;

    width: 60%;

    top: 0;

    bottom: 0;

}

#tableInfo {

    position: absolute;

    width: 40%;

    top: 22px;

    right: 0;

    bottom: 0;

    color: #990000;

}

anychart.onDocumentReady(function () {

    // create a data table

    var dataTable = anychart.data.table(0);

​

    // create a data table

    var dataTable = anychart.data.table();

​

    // add data from the CDN

    // https://cdn.anychart.com/csv-data/csco-daily.js

    dataTable.addData(get_csco_daily_data());

    // map the data

    mapping = dataTable.mapAs({low: 3, high: 2});

    // create a stock chart

    chart = anychart.stock();

    // create a plot and a range area series

    var ohlcSeries = chart.plot(0).rangeArea(mapping);

    ohlcSeries.name("CSCO");

​

    // set the chart title

    chart.title("Table Data: Iterating");

​

    // set the range of points shown on the chart

    chart.selectRange("2002-01-01", "2006-01-01");

​

    // display information about shown points

    showSelected(); 

​

    /* listen to changing the shown range of points

    and update the displayed information */

    chart.listen("selectedRangeChange", function(){

      showSelected();

    });

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// display information about shown points

function showSelected() {

​

  // create a table for displaying information

  var tablePlaceholder = document.getElementById("tablePlaceholder");

  tablePlaceholder.innerHTML = "<table id='tableInfo'>" +

                               "<caption>Shown Points</caption>" +

                               "<tr><td>Date</td><td>Low</td>" +

                               "<td>High</td></tr></table>";

​

  // get the shown range of points

  var range = chart.getSelectedRange();

​

  /* create the selectable object,

  select rows corresponding to the shown points, and group them */

  selectable = mapping.createSelectable();

  selectable.select(range.firstSelected, range.lastSelected, "year", 2);

​

  // get the iterator

  var iterator = selectable.getIterator();

​

  // get the table for displaying information

  var tableInfo = document.getElementById("tableInfo");

​

  // display information about shown points in the table

  while (iterator.advance()) {

    var key = iterator.getKey();

    var date =  anychart.format.dateTime(key, "dd.MM.yyyy");

    var low = iterator.get("low");

    var high = iterator.get("high");

    var newRow = document.createElement("tr");

    var newColumnDate = document.createElement("td");

    var newColumnLow = document.createElement("td");

    var newColumnHigh = document.createElement("td");

    newColumnDate.innerText = date;

    newColumnLow.innerText = low;

    newColumnHigh.innerText = high;

    newRow.appendChild(newColumnDate);

    newRow.appendChild(newColumnLow);

    newRow.appendChild(newColumnHigh);

    tableInfo.appendChild(newRow);

  }

}