html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

​

    var rangeData1 = [

      {name: "Task 1", start: Date.UTC(2004,0,4), end: Date.UTC(2004,7,1),

       manager: "John Doe"},

      {name: "Task 2", start: Date.UTC(2004,7,1), end: Date.UTC(2005,8,10),

       manager: "Richard Roe"}

    ];

​

    var rangeData2 = [

      {name: "New Task 1", start: Date.UTC(2005,10,1), end: Date.UTC(2006,5,1),

       manager: "Larry Loe"},

      {name: "New Task 2", start: Date.UTC(2006,5,15), end: Date.UTC(2006,11,1),

       manager: "Marta Moe"}

    ];

​

    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");

​

    // a function for formatting labels of range series

    function rangeLabelFormat() {

      return this.getData("name").toUpperCase();  

    }

​

    // format labels of range series

    rangeSeries1.labels().format(rangeLabelFormat);

    rangeSeries2.labels().format(rangeLabelFormat);

​

    // configure labels of range series

    rangeSeries1.labels().fontColor("#64b5f6");

    rangeSeries2.labels().fontColor("#1976d2");

​

    // a functions for formatting labels of moment series

    function momentLabelFormat() {

      return this.value.toUpperCase();  

    }

​

    // format labels of moment series

    momentSeries1.labels().format(momentLabelFormat);

    momentSeries2.labels().format(momentLabelFormat);

​

    // configure labels of moment series

    momentSeries1.labels().width(80);

    momentSeries2.labels().width(80);

    momentSeries1.labels().fontColor("#96a6a6");

    momentSeries2.labels().fontColor("#96a6a6");

    momentSeries1.labels().background().stroke("#ffa000", 2);

    momentSeries2.labels().background().stroke("#ffd54f", 2);

​

    // format labels of the axis

    chart.axis().labels().format(function(){

      return this.value.substr(2); 

    });

​

    // a function for formatting tooltips of range series

    function rangeTooltipFormat() {

      var duration = (this.end - this.start) / 1000 / 3600 / 24;

      var start = anychart.format.dateTime(this.start, "dd MMM");

      var end = anychart.format.dateTime(this.end, "dd MMM");

      return "<span style='font-weight:600;font-size:12pt'>" + 

              this.getData("name").toUpperCase() + "</span>" +

              "<br><br>Dates: " + start + " - " + end + 

              "<br>Duration: " + duration + " days" +

              "<br>Group: " + this.seriesName +

              "<br><br>Manager: " + this.getData("manager");  

    }

​

    // format tooltips of range series

    rangeSeries1.tooltip().useHtml(true);

    rangeSeries2.tooltip().useHtml(true); 

    rangeSeries1.tooltip().format(rangeTooltipFormat);

    rangeSeries2.tooltip().format(rangeTooltipFormat);

​

    // configure tooltips of range series

    rangeSeries1.tooltip().title().enabled(false);

    rangeSeries2.tooltip().title().enabled(false);

    rangeSeries1.tooltip().separator().enabled(false);

    rangeSeries2.tooltip().separator().enabled(false);

​

    // a function for formatting tooltips of range series

    function momentTooltipFormat() {

      var date = anychart.format.dateTime(this.x, "dd MMM");

      return "<span style='font-weight:600;font-size:12pt'>" + 

              this.value.toUpperCase() + "</span>" +

              "<br><br>Date: " + date + 

              "<br>Group: " + this.seriesName;

    }

​

    // format tooltips of moment series

    momentSeries1.tooltip().useHtml(true);

    momentSeries2.tooltip().useHtml(true); 

    momentSeries1.tooltip().format(momentTooltipFormat);

    momentSeries2.tooltip().format(momentTooltipFormat);

​

    // configure tooltips of moment series

    momentSeries1.tooltip().title().enabled(false);

    momentSeries2.tooltip().title().enabled(false);

    momentSeries1.tooltip().separator().enabled(false);

    momentSeries2.tooltip().separator().enabled(false);

​

    // set the chart title

    chart.title("Timeline Chart: Labels and Tooltips (Formatting Functions)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart  

    chart.draw();

});