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);

    // add data

    dataTable.addData([

      ["2015-12-25", 505.69, 514.88],

      ["2015-12-26", 505.59, 514.98],

      ["2015-12-27", 505.49, 515.30],

      ["2015-12-28", 505.23, 515.72],

      ["2015-12-29", 505.38, 515.86],

      ["2015-12-30", 505.66, 515.98],

      ["2015-12-31", 505.99, 515.33],

      ["2016-01-01", 505.99, 514.29],

      ["2016-01-02", 506.18, 514.87]

    ]);

    // map the data

    mapping = dataTable.mapAs({low: 1, 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("ACME Corp.");

​

    // set the chart title

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

​

    // set the range of points shown on the chart

    chart.selectRange("2015-12-26", "2015-12-30");

​

    // 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

  and select rows corresponding to the shown points */

  selectable = mapping.createSelectable();

  selectable.select(range.firstSelected, range.lastSelected);

​

  // 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);

  }

}