html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function(){

​

  // data tree settings

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

​

  // chart type

  var chart = anychart.ganttProject();

​

  // chart container

  chart.container("container");

​

  // chart position

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

​

  // chart data

  chart.data(treeData);

​

  // data tree width

  chart.splitterPosition(190);

​

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

​

  // initiate drawing

  chart.draw();

​

  // area to display by default

  chart.zoomTo(Date.UTC(2007, 0, 1), Date.UTC(2007, 2, 29));

​

  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 5";

  collapseLast.innerHTML = "collapse 5";

​

  expandAllButton.onclick = function() {

      chart.expandAll();

  };

  collapseAllButton.onclick = function() {

      chart.collapseAll();

  };

  expandLast.onclick = function() {

      chart.expandTask("5");

  };

  collapseLast.onclick = function() {

      chart.collapseTask("5");

  };

​

  // 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 = "210px";

    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";

  }

​

});

​

// data

function getData() {

  return [

  {

    "name": "Activities",

    "actualStart": Date.UTC(2007, 0, 25),

    "actualEnd": Date.UTC(2007, 2, 14),

    "children": [

      {

"name": "Draft plan",

"actualStart": Date.UTC(2007, 0, 25),

"actualEnd": Date.UTC(2007, 1, 3)

      },

      {

"name": "Board meeting",

"actualStart": Date.UTC(2007, 1, 4),

"actualEnd": Date.UTC(2007, 1, 4)

      },

      {

"name": "Research option",

"actualStart": Date.UTC(2007, 1, 4),

"actualEnd": Date.UTC(2007, 1, 24)

      },

      {

"id": "5",

"name": "Innovation activities",

"actualStart": Date.UTC(2007, 1, 24),

"actualEnd": Date.UTC(2007, 2, 14),

"children": [

    {

        "name": "Improvement research",

        "actualStart": Date.UTC(2007, 1, 24),

        "actualEnd": Date.UTC(2007, 2, 14)

      }

    ]

      },

    ]

  }

  ];

}