title: Google Visualization Organizational Chart (Node Children)
body: <p>I have an organizational chart with many levels, the image below is taken from a part of it.
  I try to get all the childs and sub childs of a selected node, like if "Power Business Unit" node selected it get all the 3 childs and for every single child do the same. I got the first level but I can't get the depth of the tree to provide the number of loops to reach the last child.</p>
  
  <p>1- How can I get the last child in the chart? how to get the depth of the tree?</p>
  
  <p>2- Is there a zoom in/zoom out toolbar or something, that I can add to the chart?</p>
  
  <p>that is my code of drawing:</p>
  
  <pre><code>google.load('visualization', '1', { packages: ['table', 'orgchart'] });
      google.setOnLoadCallback(drawChart);
      function drawChart() {
  
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'NODE');
          data.addColumn('string', 'PARENT');
          data.addColumn('string', 'NODEID');
  
          data.addRows(JSON.parse(document.getElementById("&lt;%=HiddenField1.ClientID%&gt;").value));
          //
          var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  
          function selectHandler() {
              var selectedItem = chart.getSelection()[0];
              if (selectedItem) {
                  var oInd = data.getValue(selectedItem.row, 2);
  
                  var arrLoop = chart.getChildrenIndexes(selectedItem.row);
                  var arrConcat = chart.getChildrenIndexes(selectedItem.row);
  
  
                  for (var i = 0; i &lt; arrLoop.length; i++) {
                      var arr2 = new Array(chart.getChildrenIndexes(arrLoop[i]).length);
                      arr2 = chart.getChildrenIndexes(arrLoop[i]);
                      for (var j = 0; j &lt; arr2.length; j++) {
                          arrConcat.push(arr2[j]);
                      }
                      arrConcat.concat(arr2);
                  }
  
                  var arrChilds = new Array(arrConcat.length);
  
                  for (var i = 0; i &lt; arrConcat.length; i++) {
                      arrChilds[i] = data.getValue(arrConcat[i], 2);
                  }
                  drawTable(oInd, arrChilds);
              }
          }
  
          google.visualization.events.addListener(chart, 'select', selectHandler);
  
          chart.draw(data, { allowHtml: true });
  
          //for (var i = 0; i &lt; data.getNumberOfRows() ; i++) {
          //    chart.collapse(i, true);
          //}
      }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/AiETH.jpg" alt="Google Organizational Chart"></p>