html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

​

    var rangeData = [

      ["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 momentData1 = [

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

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

    ];

​

    var momentData2 = [

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

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

    ];

​

    // create a chart

    var chart = anychart.timeline();

​

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

    var rangeSeries = chart.range(rangeData);

    rangeSeries.name("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");

​

    chart.scale().zoomLevels([

      [

        {"unit": "week", count: 1},

        {"unit": "month", count: 1},

        {"unit": "quarter", count: 1}

      ]

    ]);

​

    // set the chart title

    chart.title("Timeline Chart: Scale (Zoom Levels)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart  

    chart.draw();

});