html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

label {

    display: inline-block;

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

#fieldSelect, #fieldSelectId {

    visibility: hidden;

}

anychart.onDocumentReady(function () {

​

    // create data

    dataTable = anychart.data.table();

    dataTable.addData([

        ["2015-12-24", 511.53, 514.98, 505.79, 506.40],

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

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

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

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

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

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

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

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

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

        ["2016-01-03", 512.30, 514.78, 505.87, 508.67],

        ["2016-01-04", 512.50, 514.77, 505.83, 508.35],

        ["2016-01-05", 511.53, 516.18, 505.91, 509.42],

        ["2016-01-06", 511.13, 516.01, 506.00, 509.26],

        ["2016-01-07", 510.93, 516.07, 506.00, 510.99],

        ["2016-01-08", 510.88, 515.93, 505.22, 509.95],

        ["2016-01-09", 509.12, 515.97, 505.15, 510.12],

        ["2016-01-10", 508.53, 516.13, 505.66, 510.42],

        ["2016-01-11", 508.90, 516.24, 505.73, 510.40]

    ]); 

​

    // map the data

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

​

    // create a stock chart

    chart = anychart.stock();

​

    // create a plot on the chart

    plot = chart.plot(0);

​

    // create an ohlc series

    plot.ohlc(mapping);

​

    // add event markers

    plot.eventMarkers({"groups": [

      {

        "data": [

          {

            "date": "2015-12-24",

            "description": "Event 1"

          },

          {

            "date": "2015-12-27",

            "description": "Event 2"

          },

        ]

      }

    ]});

​

    // set the chart title

    chart.title("Event Markers: Position");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// set the position of event markers

function setPosition() {

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

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

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

  plot.eventMarkers().position(positionSelect.value);

  if (positionSelect.value == "axis") {

    fieldSelect.style.visibility = "hidden";

    fieldSelectId.style.visibility = "hidden";

    // update the chart title

    chart.title("Event Markers: Position\n(position = " +

                plot.eventMarkers().position() + ")");

  } else { 

      fieldSelect.style.visibility = "visible";

      fieldSelectId.style.visibility = "visible";

      plot.eventMarkers().fieldName(fieldSelect.value);

      // update the chart title

      chart.title("Event Markers: Position\n(position = " +

                  plot.eventMarkers().position() + ", field = " +

                  plot.eventMarkers().fieldName() + ")");

  }

}