html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create data tree on our data

    var treeData = anychart.data.tree(getData(), anychart.enums.TreeFillingMethod.AS_TABLE);

​

    // create resource gantt chart

    var chart = anychart.ganttResource();

​

    // set container id for the chart

    chart.container('container');

​

    // set data for the chart

    chart.data(treeData);

    // set start splitter position settings

    chart.splitterPosition(150);

​

    var now = (new Date()).getTime();

    var sec = 1000;

    var min = 60*sec;

    var hour = 60*min;

    var day = 24*hour;

    // create linemarkers

    var tl = chart.getTimeline();

    tl.lineMarker(0).value(anychart.enums.GanttDateTimeMarkers.CURRENT);

    tl.lineMarker(1).value(now + 5*day);

    // set colors to the rows in the timeline section

    tl.rowEvenFill("#FFF3E0 0.5");

    tl.rowOddFill("#E0F7FA 0.5");

    tl.rowHoverFill("#eee");

    tl.rowSelectedFill("#FFAB91 0.5");

    // set colors for selected elements

    tl.selectedElementFill("#FFAB00");

    tl.selectedElementStroke("#B8AA96");

​

    // get chart data grid link to set column settings

    var dataGrid = chart.dataGrid();

​

    // set first column settings

    var firstColumn = dataGrid.column(0);

    firstColumn.title('#');

    firstColumn.width(30);

    firstColumn.cellTextSettings().hAlign('center');

​

    // set second column settings

    var secondColumn = dataGrid.column(1);

    secondColumn.title('Person');

    secondColumn.width(120);

    secondColumn.cellTextSettings().hAlign('left');

    secondColumn.format(function (item) {

return item.get('name');

    });

​

    // initiate chart drawing

    chart.draw();

​

    // zoom chart to specified date

    chart.fitAll();

});

​

function getData() {

    // colors

    var moccasin_border = '#B8AA96';

    var moccasin_bottom = '#CFC0A9';

    var moccasin_middle = '#E6D5BC';

    var moccasin_top = '#E8D9C3';

​

    var rosybrown_border = '#9B9292';

    var rosybrown_bottom = '#AFA4A4';

    var rosybrown_middle = '#C2B6B6';

    var rosybrown_top = '#C8BDBD';

​

    var brown_border = '#6B5D5D';

    var brown_bottom = '#796868';

    var brown_middle = '#867474';

    var brown_top = '#928282';

​

    var now = (new Date()).getTime();

    var sec = 1000;

    var min = 60*sec;

    var hour = 60*min;

    var day = 24*hour;

​

    return [

{

    "id": "1",

    "name": "Alex Exler",

    "periods": [

{"id": "1_1", "start": now - 10*day, "end": now + 4*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}},

{"id": "1_2", "start": now + 20*day, "end": now + 28*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}}]

},

{

    "id": "2",

    "name": "Philip Kineyko",

    "periods": [

{"id": "2_1", "start": now - 3*day, "end": now + 16*day, "stroke": rosybrown_border, "fill": {"angle": 90, "keys": [{"color": rosybrown_bottom, "position": 0}, {"color": rosybrown_middle, "position": 0.38}, {"color": rosybrown_top, "position": 1}]}},

{"id": "2_2", "start": now + 19*day, "end": now + 25*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}}]

},

{

    "id": "3",

    "name": "Luke Liakos",

    "periods": [

{"id": "3_1", "start": now + 5*day, "end": now + 10*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}},

{"id": "3_2", "start": now + 25*day, "end": now + 29*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}}]

},

{

    "id": "4",

    "name": "Judy Penfold",

    "periods": [

{"id": "4_1", "start": now - 8*day, "end": now + 2*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}},

{"id": "4_2", "start": now + 14*day, "end": now + 20*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}}]

},

{

    "id": "5",

    "name": "Patricia Darmon",

    "periods": [

{"id": "5_1", "start": now - 18*day, "end": now - 5*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}},

{"id": "5_2", "start": now, "end": now + 12*day, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}}]

​

}

    ];

}