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

​

  // initiate chart drawing

  chart.draw();

​

  // zoom chart to specified date

  chart.fitAll();

});

​

function getData() {

  return [

    {

      "id":"404",

      "name": "office 404"

    },

    {

      "id":"409",

      "name": "office 409"

    },

    {

      "id": "1",

      "name": "Server 1",

      "parent": "404",

      "periods": [

{"id": "1_1", "fill": "blue 0.7", "stroke": "none", "start": Date.UTC(2013, 1, 20), "end": Date.UTC(2013, 1, 25)},

{"id": "1_2", "fill": "red 0.7", "stroke": "black 0.7", "start": Date.UTC(2013, 2, 2), "end": Date.UTC(2013, 2, 15)},

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

      ]

    },

    {

      "id": "2",

      "name": "Server 2",

      "parent": "404",

      "periods": [

{"id": "2_1", "fill": "none", "stroke": {"color": "green"}, "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": "Server 3",

      "parent": "409",

      "periods": [

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

{"id": "3_2", "fill": {"angle": 0, "keys": [{"color": "blue", "position": 0}, {"color": "red", "position": 0.5}, {"color": "#689663", "position": 1}]}, "stroke": "black 0.7", "start": Date.UTC(2013, 2, 25), "end": Date.UTC(2013, 3, 5)}

      ]

    }

  ];

}