html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function(){

​

  // data tree settings

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

​

  // chart type

  var chart = anychart.ganttResource();

​

  // chart container

  chart.container("container");

​

  // chart position

  chart.bounds(0, 0, "100%", "100%");

​

  // chart data

  chart.data(treeData);

​

  // data tree width

  chart.splitterPosition(170);

​

  var dataGrid = chart.dataGrid();

​

  // settings for first column

  dataGrid.column(0).width(30).title().text("#");

​

  // settings for the second column

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

    return item.get("name");

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

​

  // initiate drawing

  chart.draw();

​

  // area to display by default

  chart.zoomTo(1171036800000, 1176908400000);

});

​

// data

var data = [

  {

    "id": "1",

    "name": "Phase 1 - Strategic Plan",

    "periods": [

      {"id": "1_1", "start": 1171468800000, "end": 1171987200000, "fill": "green"}]

  },

  {

    "id": "2",

    "name": "Self-Assessment",

    "periods": [

      {"id": "2_1", "start": 1173024000000, "end": 1173715200000, "fill": "yellow"}]

  },

  {

    "id": "3",

    "name": "Define business vision",

    "periods": [

      {"id": "3_1", "start": 1169740800000, "end": 1170172800000, "fill": "green"}]

  },

  {

    "id": "4",

    "name": "Identify available skills, information and support",

    "periods": [

      {"id": "4_1", "start": 1171814400000, "end": 1172419200000, "fill": "green"}]

  },

  {

    "id": "5",

    "name": "Decide whether to proceed",

    "periods": [

      {"id": "5_1", "start": 1171296000000, "end": 1171382400000, "fill": "green"}]

  },

  {

    "id": "6",

    "name": "Define the Opportunity",

    "periods": [

      {"id": "6_1", "start": 1173628800000, "end": 1174320000000, "fill": "green"}]

  }

];