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 DataGrid and TimeLine visual settings

    chart.dataGrid().rowOddFill('#fff');

    chart.dataGrid().rowEvenFill('#fff');

    chart.getTimeline().rowOddFill('#fff');

    chart.getTimeline().rowEvenFill('#fff');

​

​

    // adjust default rows color on mouse over

    chart.dataGrid().rowHoverFill('#DEFFE3');

    chart.getTimeline().rowHoverFill('#DEFFE3');

​

    // set start splitter position settings

    chart.splitterPosition(150);

​

    // get chart data grid link to set column settings

    var dataGrid = chart.dataGrid();

    chart.getTimeline().tooltip().useHtml(true);

    chart.getTimeline().tooltip().format(function (e) {

var item = e['item'];

return item.get('name') + '<br>' + 'Start time: ' + anychart.utils.defaultDateFormatter(item.meta('minPeriodDate')) + '<br>'

    + 'End time: ' + anychart.utils.defaultDateFormatter(item.meta('maxPeriodDate'));

    });

​

    // 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';

​

    return [

{

    "id": "1",

    "name": "Alex Exler",

    "periods": [

        {"id": "1_1", "start": 1171468800000, "end": 1171987200000, "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": 1173024000000, "end": 1173715200000, "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": 1173888000000, "end": 1174406400000, "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": 1169740800000, "end": 1170172800000, "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": 1171987200000, "end": 1172505600000, "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": 1171814400000, "end": 1172419200000, "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": 1173628800000, "end": 1174320000000, "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": 1171296000000, "end": 1171382400000, "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": 1174233600000, "end": 1174579200000, "stroke": moccasin_border, "fill": {"angle": 90, "keys": [{"color": moccasin_bottom, "position": 0}, {"color": moccasin_middle, "position": 0.38}, {"color": moccasin_top, "position": 1}]}}]

}

    ];

}