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(160);

​

  // get chart data grid link to set column settings

  var dataGrid = chart.dataGrid();

​

  dataGrid.rowOddFill("#1E88E5 .1");

  dataGrid.rowEvenFill("#00ACC1 .1");

​

  var timeline = chart.getTimeline();

​

  timeline.rowOddFill("#1E88E5 .2");

  timeline.rowEvenFill("#00ACC1 .2");

​

  // initiate chart drawing

  chart.draw();

​

  // zoom chart to specified date

  chart.fitAll();

});

​

function getData() {

  return [

    {

      "id":"main_1",

      "name": "Group 1"

    },

    {

      "id":"main_2",

      "name": "Group 2"

    },

    {

      "id": "1",

      "name": "Resource 1",

      "parent": "main_1",

      "periods": [

{"id": "1_1", "start": Date.UTC(2013, 1, 18), "end": Date.UTC(2013, 1, 25)},

{"id": "1_2",  "start": Date.UTC(2013, 2, 5), "end": Date.UTC(2013, 2, 15)},

{"id": "1_2", "start": Date.UTC(2013, 2, 20), "end": Date.UTC(2013, 3, 1)}

      ]

    },

    {

      "id": "2",

      "name": "Resource 2",

      "parent": "main_2",

      "periods": [

{"id": "2_1", "start": Date.UTC(2013, 1, 20), "end": Date.UTC(2013, 1, 22)},

{"id": "2_2" , "start": Date.UTC(2013, 1, 25), "end": Date.UTC(2013, 2, 5)}

      ]

    },

    {

      "id": "3",

      "name": "Resource 3",

      "parent": "main_2",

      "periods": [

{"id": "3_1", "start": Date.UTC(2013, 2, 10), "end": Date.UTC(2013, 2, 22)},

{"id": "3_2", "start": Date.UTC(2013, 2, 25), "end": Date.UTC(2013, 3, 5)}

      ]

    }

  ];

}