html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  // create data table, load and map the data

  var dataTable = anychart.data.table();

  dataTable.addData(get_dji_daily_short_data());

  var mapping = dataTable.mapAs({'open': 1, 'high': 2, 'low':3, 'close':4});

  // create stock chart

  var chart = anychart.stock();

​

  // create a plot

  var plot = chart.plot();

  // create an OHLC series

  plot.ohlc(mapping).name("Price");

​

  // get the marker value

  var markerValue = getMarkerValue();

​

  // create a line marker

  var linemarker = plot.lineMarker();

  linemarker

    .value(markerValue)

    .stroke('black', 1)

    .zIndex(100)

    .scaleRangeMode('consider');

​

  // create a text marker

  var textMarker = plot.textMarker();

  textMarker

    .text(markerValue||'')

    .value(markerValue)

    .align('left')

    .anchor('left-bottom')

    .padding(3)

    .fontColor('black')

    .zIndex(100);

​

  // display chart

  chart.container("container").draw();

​

  // recalculate axis marker value when scrolling

  chart.scroller().listen("scrollerchange", function (markerValue) {

    // get new marker value

    markerValue = getMarkerValue();

    // create line marker

    linemarker.value(markerValue);

​

    // set text marker value and text

    textMarker.text(markerValue||'').value(markerValue);

  });

​

  // get the value for an axis marker

  function getMarkerValue() {

    var xScale = chart.xScale();

    // get start date and end date

    var max = xScale.getMaximum();

    var min = xScale.getFullMinimum();

​

    var selectable = mapping.createSelectable();

    // select a date range

    selectable.select(min, max);

​

    var queue = [];

    var value = null;

​

    // get iterator 

    var iterator = selectable.getIterator();

    // advance iterator to the next position

    while (iterator.advance()) {

      queue.push(iterator.get("close"));

      // delete all values except the last 10 

      if (queue.length >10) {

        queue.shift();

      }

      var sum=0;

      // not enough data - don't draw axis marker

      if (queue.length < 10) {

        value = null;

      }

      else {

        // calculate marker value

        for(var i=0;i<queue.length;i++){

          sum = sum + queue[i];

        }

        value = (sum/10).toFixed(2); 

      }

    }

    return value;

  }

});