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

​

var expandAllButton = document.createElement("div");

  var collapseAllButton = document.createElement("div");

  var expandLast = document.createElement("div");

  var collapseLast = document.createElement("div");

​

  expandAllButton.className = "custombutton";

  collapseAllButton.className = "custombutton";

  expandLast.className = "custombutton";

  collapseLast.className = "custombutton";

​

  expandAllButton.innerHTML = "expand all";

  collapseAllButton.innerHTML = "collapse all";

  expandLast.innerHTML = "expand 4";

  collapseLast.innerHTML = "collapse 4";

​

  expandAllButton.onclick = function() {

      chart.expandAll();

  };

  collapseAllButton.onclick = function() {

      chart.collapseAll();

  };

  expandLast.onclick = function() {

      chart.expandTask("409");

  };

  collapseLast.onclick = function() {

      chart.collapseTask("409");

  };

​

  // append button to container

  container.appendChild(collapseLast);

  container.appendChild(expandLast);

  container.appendChild(collapseAllButton);

  container.appendChild(expandAllButton);

​

  var custombuttons = document.getElementsByClassName("custombutton");

​

  // set style for all buttons

  for (var i = 0; i<custombuttons.length; i++){

    // set button style

    custombuttons[i].style.top = "177px";

    custombuttons[i].style.left = 170*i + "px";

    custombuttons[i].style.width = "165px";

    custombuttons[i].style.height = "auto";

    custombuttons[i].style.backgroundColor = "white";

    custombuttons[i].style.color = "black";

    custombuttons[i].style.fontFamily = chart.title().fontFamily();

    custombuttons[i].style.position = "absolute";

    custombuttons[i].style.zIndex = 2;

    custombuttons[i].style.transition = "0.5s";

    custombuttons[i].style.textAlign = "center";

    custombuttons[i].style.border = "2px solid #444444";

    custombuttons[i].style.borderRadius = "7px 7px 7px 7px";

    custombuttons[i].style.fontSize = "18px";

    custombuttons[i].style.cursor = "pointer";

  }

​

  // 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", "start": Date.UTC(2013, 1, 20), "end": Date.UTC(2013, 1, 25)},

{"id": "1_2", "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", "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", "start": Date.UTC(2013, 2, 25), "end": Date.UTC(2013, 3, 5)}

      ]

    }

  ];

}