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),

       normal: {fill: "#01b53f", stroke: "null"},

       hovered: {fill: "#01b53f", stroke: "null"},

       selected: {fill: "#01b53f", stroke: "null"}

      },

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

       normal: {fill: "#ff6600", stroke: "null"},

       hovered: {fill: "#ff6600", stroke: "null"},

       selected: {fill: "#ff6600", stroke: "null"}

      }

    ];

​

    var rangeData2 = [

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

       normal: {fill: "#00a8e0", stroke: "null"},

       hovered: {fill: "#00a8e0", stroke: "null"},

       selected: {fill: "#00a8e0", stroke: "null"}

      },

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

       normal: {fill: "#f6bc16", stroke: "null"},

       hovered: {fill: "#f6bc16", stroke: "null"},

       selected: {fill: "#f6bc16", stroke: "null"}

      }

    ];

​

    var momentData1 = [

      {x: Date.UTC(2004,2,21), y: "Meeting 1"},

      {x: Date.UTC(2005,3,19), y: "Meeting 2"},

      {x: Date.UTC(2006,1,1),  y: "Meeting 3"}

    ];

​

    var momentData2 = [

      {x: Date.UTC(2004,5,12), y: "Training 1"},

      {x: Date.UTC(2005,5,1),  y: "Training 2"},

      {x: Date.UTC(2006,1,26), y: "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");

​

    // set the chart title

    chart.title("Timeline Chart: Individual Ranges");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart  

    chart.draw();

});