html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  var tree = anychart.data.tree([

    {name: "Node 1", id: "1"},

    {name: "Parent Node", id: "2"},

    {name: "Child Node 1", parent: 2, id: "3"},

    {name: "Child Node 2", parent: 2, id: "4"},

    {name: "Node 2", id: "5"}

  ], anychart.enums.TreeFillingMethod.AS_TABLE);

​

  var stage = anychart.graphics.create("container");

​

  // create Data Grid

  treeDataGrid = anychart.standalones.dataGrid();

​

  // set Data Tree

  treeDataGrid.data(tree).headerHeight(20);

​

  // create button for Parent node

  treeDataGrid.listen("signal", treeDataGrid.draw, false, treeDataGrid);

​

  // set style for second column

  treeDataGrid.column(1).cellTextSettingsOverrider(labelTextSettingsOverrider);

​

  // create new button

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

​

  // set button style

  triggerButton.style.top = "5px";

  triggerButton.style.right = "5px";

  triggerButton.style.width = "auto";

  triggerButton.style.height = "auto";

  triggerButton.style.backgroundColor = "#444444";

  triggerButton.style.color = "white";

  triggerButton.style.position = "absolute";

  triggerButton.style.zIndex = 2;

  triggerButton.style.transition = "0.5s";

  triggerButton.style.textAlign = "center";

  triggerButton.style.border = "3px solid #444444";

  triggerButton.style.borderRadius = "7px 7px 7px 7px";

  triggerButton.style.fontSize = "18px";

  triggerButton.style.cursor = "pointer";

  triggerButton.style.MozUserSelect= "none";

  triggerButton.style.KhtmlUserSelect= "none";

  triggerButton.style.WebkitUserSelect= "none";

  triggerButton.style.userSelect= "none";

  triggerButton.innerHTML = "Append Point";

  triggerButton.onclick = function() {

    addPoint();

  };

​

  // append button to container

  container.appendChild(triggerButton);

​

  // draw chart

  treeDataGrid.container(stage).top(triggerButton.offsetHeight + 7).height(stage.height()).width("100%").draw();

​

  // resize container

  treeDataGrid.container().height(fullChildrenHeight()+treeDataGrid.top()+treeDataGrid.headerHeight()+1);

​

  var title = anychart.standalones.title();

  title.parentBounds(0, 0, "100%", 30)

    .text("Different Data From the Same Tree")

    .container(stage)

    .draw();

​

  var nodeCount = 3;

​

  function addPoint(){

    var name = "Node " + nodeCount;

    tree.addChild({name: name});

    nodeCount++;

    // resize container

    treeDataGrid.container().height(fullChildrenHeight()+treeDataGrid.top()+treeDataGrid.headerHeight()+1);

  }

​

  // get height of all children in the tree

  function fullChildrenHeight () {

    var height = 0;

    var traverser = tree.getTraverser();

    traverser.reset();

    while(traverser.advance()){

​

      // get an item

      var currentItem = traverser.current();

​

      // get height of the item

      var currentHeight = currentItem.get(anychart.enums.GanttDataFields.ROW_HEIGHT);

​

      // if item height is undefined

      if (currentHeight !== void 0){

height += (currentHeight + 1);

      } else {

// if height of current item is undefined, default height is 20px + 1px row space

height +=21;

      }

    }

    return height;

  }

});

​

// style setter

function labelTextSettingsOverrider(label, dataItem) {

  if (!dataItem.getParent()) {

    label.fontColor("#0055aa").fontWeight("bold").fontSize(12).fontStyle("italic");

  } else {

    if (dataItem.numChildren()) {

      label.fontColor("#559955").fontWeight("bold").fontStyle("italic");

    }

  }

}