html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  var tree = anychart.data.tree([

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

    {"name": "Node 2", "id": "2", "value": "15000"},

    {"name": "Node 3", "id": "3", "value": "10000"},

    {"name": "Node 4", "id": "4", "value": "12000"},

    {"name": "Node 5", "id": "5", "value": "9000"}

  ], 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);

​

  var valueColumn = treeDataGrid.column(2);

  valueColumn.title().text("Value");

  valueColumn.width(100);

  valueColumn.format(function(item) {

    return item.get("value");

  });

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

  triggerButton.onclick = function() {

    addValue();

  };

​

  // append button to container

  container.appendChild(triggerButton);

​

  // draw chart

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

​

  // set container height

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

​

  var title = anychart.standalones.title();

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

    .text("Click on Button to Add 1000 to Third Node")

    .container(stage)

    .draw();

​

  function addValue(){

    tree.getChildAt(2).set("value", (parseInt(tree.getChildAt(2).get("value")) + 1000 )*1+"");

  }

​

  // get height of all items 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");

    }

  }

}