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;

}

anychart.onDocumentReady(function () {

​

    // create data

    dataTable = anychart.data.table();

    dataTable.addData([

        ["2015-12-24",   5.3,  -4.0],

        ["2015-12-25",   9.9,  -8.9],

        ["2015-12-26",   1.1,  -1.7],

        ["2015-12-27",   7.1,  -4.3],

        ["2015-12-28",   4.4,  -6.5],

        ["2015-12-29",   6.5,  -5.3],

        ["2015-12-30",   2.0,  -2.8],

        ["2015-12-31",   5.3,  -7.4],

        ["2016-01-01",   8.7,  -6.5],

        ["2016-01-02",   3.1,  -2.3],

        ["2016-01-03",   0.0,   0.0],

        ["2016-01-04",  -8.8,   0.6],

        ["2016-01-05",  -2.0,   1.8],

        ["2016-01-06",  -4.4,   3.0],

        ["2016-01-07",  -9.4,   9.4],

        ["2016-01-08",  -6.6,   7.9],

        ["2016-01-09",  -6.8,   5.0],

        ["2016-01-10",  -5.0,   6.1],

        ["2016-01-11",  -4.2,   9.5],

        ["2016-01-12",  -7.9,   4.9],

        ["2016-01-13", -10.1,   9.1]

    ]); 

​

    // map the data

    var mapping_1 = dataTable.mapAs({value: 1});

    var mapping_2 = dataTable.mapAs({value: 2});

​

    // create a stock chart

    chart = anychart.stock();

​

    // create a plot on the chart

    plot = chart.plot(0);

​

    // create two line series

    var series_1 = plot.line(mapping_1).name("Series 1");

    var series_2 = plot.line(mapping_2).name("Series 2");

​

    // add event markers

    plot.eventMarkers({"groups": [

      {

        "data": [

          {

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

            "description": "Event 1"

          },

          {

            "date": "2016-01-03",

            "description": "Event 2"

          },

          {

            "date": "2016-01-07",

            "description": "Event 3"

          },

        ]

      }

    ]});

​

    // bind event markers to the first series

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

    plot.eventMarkers().seriesId(0);

​

    // set the chart title

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

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

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

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

    });

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// set the position of event markers

function setPosition() {

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

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

  plot.eventMarkers().seriesId(seriesSelect.value);

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

}