html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

​

    var rangeData1 = [

      ["Task 1", Date.UTC(2004,0,4), Date.UTC(2004,7,1)],

      ["Task 2", Date.UTC(2004,7,1), Date.UTC(2005,8,10)]

    ];

​

    var rangeData2 = [

      ["New Task 1", Date.UTC(2005,10,1), Date.UTC(2006,5,1)],

      ["New Task 2", Date.UTC(2006,5,15), Date.UTC(2006,11,1)]

    ];

​

    var momentData1 = [

      [Date.UTC(2004,2,21), "Meeting 1"],

      [Date.UTC(2005,3,19), "Meeting 2"],

      [Date.UTC(2006,1,1),  "Meeting 3"]

    ];

​

    var momentData2 = [

      [Date.UTC(2004,5,12), "Training 1"],

      [Date.UTC(2005,5,1),  "Training 2"],

      [Date.UTC(2006,1,26), "Training 3"]

    ];

​

    // create a chart

    var chart = anychart.timeline();

​

    // prevent zooming the chart with the mouse wheel

    chart.interactivity().zoomOnMouseWheel(false);

​

    // create the first range series, set the data and name

    var rangeSeries1 = chart.range(rangeData1);

    rangeSeries1.name("Tasks");

​

    // create the second range series, set the data and name

    var rangeSeries2 = chart.range(rangeData2);

    rangeSeries2.name("New Tasks");

​

    // create the first moment series, set the data and name

    var momentSeries1 = chart.moment(momentData1);

    momentSeries1.name("Meetings");    

​

    // create the second moment series, set the data and name

    var momentSeries2 = chart.moment(momentData2);

    momentSeries2.name("Trainings");

​

    // create two range markers

    var rangeMarker1 = chart.rangeMarker(0);

    var rangeMarker2 = chart.rangeMarker(1);

​

    // set the range of the first marker

    rangeMarker1.from(Date.UTC(2004,0,1));

    rangeMarker1.to(Date.UTC(2005,0,1));

​

    // set the range of the second marker

    rangeMarker2.from(Date.UTC(2005,0,1));

    rangeMarker2.to(Date.UTC(2006,0,1));

​

    // set the fill of markers

    rangeMarker1.fill("#dd2c00", 0.2);

    rangeMarker2.fill("#00bfa5", 0.2);

​

    // create two text markers

    var textMarker1 = chart.textMarker(0);

    var textMarker2 = chart.textMarker(1);

​

    // get the 'from' values of line markers

    var rangeMarker1FromValue = rangeMarker1.from()

    var rangeMarker2FromValue = rangeMarker2.from();

​

    // set the values of text markers

    textMarker1.value(rangeMarker1FromValue);

    textMarker2.value(rangeMarker2FromValue);

​

    // set the text of markers

    textMarker1.useHtml(true);

    textMarker1.text(

      anychart.format.dateTime(rangeMarker1FromValue, "y")

    );

    textMarker2.text(

      anychart.format.dateTime(rangeMarker2FromValue, "y")

    );

​

    // configure the font of markers

    textMarker1.fontColor("#dd2c00");

    textMarker2.fontColor("#00bfa5");

    textMarker1.fontWeight(600);

    textMarker2.fontWeight(600);

    // configure the position of markers

    textMarker1.rotation(0);

    textMarker2.rotation(0);

    textMarker1.offsetX(-40);

    textMarker2.offsetX(-40);

    textMarker1.offsetY(20);

    textMarker2.offsetY(20);

​

    // set the chart title

    chart.title("Timeline Chart: Range Markers (+ Text Markers)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart  

    chart.draw();

});