html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

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 range of points shown on the chart

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

​

    /* create the selectable object

    and select all rows in the table*/

    selectable = mapping.createSelectable();

​

    // enable html in the chart title

    chart.title().useHtml(true);

​

    /* get the values of the first and last shown point

    and show them in the chart title */

    showSelected(); 

​

    /* listen to changing the shown range of points

    and update the chart title*/

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

      showSelected();

    });

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

/* get the values of the first and last

shown point and display them in the chart title */

function showSelected() {

​

  // get the shown range of points

  var range = chart.getSelectedRange();

  // get the values of the first and last point of the range

  var firstPoint = selectable.search(range.firstSelected, "nearest");

  var lastPoint = selectable.search(range.lastSelected, "nearest");

  var firstDate = firstPoint.getColumn(0);

  var firstLow = firstPoint.get("low");

  var firstHigh = firstPoint.get("high");

  var lastDate = lastPoint.getColumn(0);

  var lastLow = lastPoint.get("low");

  var lastHigh = lastPoint.get("high");

  // set the chart title

  chart.title("Table Data: Reading<br><br>" +

              "first selected = <span style = 'color:#990000'>" +

              firstDate + " (L: " + firstLow + ", H: " + firstHigh + ")</span>" +

              "<br>last selected = <span style = 'color:#990000'>" + 

              lastDate + " (L: " + lastLow + ", H: " + lastHigh + ")</span>");

​

}