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 splitteformatDater position settings

  chart.splitterPosition(220);

​

  // get chart data grid link to set column settings

  var dataGrid = chart.dataGrid();

​

  function formatDate(dateUnit) {

  if (dateUnit < 10) dateUnit = "0" + dateUnit;

  return dateUnit + "";

}

​

function customformat(item) {

  var periods = item.get(anychart.enums.GanttDataFields.PERIODS);

  if (periods) {

      var startTime = new Date(periods[0].start);

    return formatDate(startTime.getUTCMonth() + 1) + "/" +

formatDate(startTime.getUTCDate()) + "/" + startTime.getUTCFullYear()

  }

  else

   return "";

}

​

dataGrid.column(0).title().text("?");

​

dataGrid.column(1).width(100).format(function(item) {

    return item.get("name");

  }).title().text("Resources");

​

var custom = dataGrid.column(2);

  custom.title("Start Date");

  custom.width(90);

  custom.format(customformat);

​

  // 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, 5, 28), "end": Date.UTC(2013, 6, 1)},

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

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

      ]

    },

    {

      "id": "2",

      "name": "Resource 2",

      "parent": "main_1",

      "periods": [

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

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

      ]

    },

    {

      "id": "3",

      "name": "Resource 3",

      "parent": "main_2",

      "periods": [

{"id": "3_1", "start": Date.UTC(2013, 4, 28), "end": Date.UTC(2013, 5, 8)},

{"id": "3_2", "start": Date.UTC(2013, 5, 17), "end": Date.UTC(2013, 6, 30)}

      ]

    }

  ];

}