Google OrgChart - Google Visualization

Question

I have create a chart using orgchart similar to the following. Chart generated through the data stored in mysql table (using php).

My question is I want to display the depth level in each node along with other details. How to do that?

Example: Food -> Level 1 Vegetable and Meat -> Level 2 Vegetable 1, Vegetable 2 and Meat 1 -> Level 3

** There is api method (data.getSelection.row) to get the row (depth) of selected node. But it always seems to give the index of selected node instead of the row of selected node. **

Answer 1

Not sure how you want to display them, but here is the idea I came up with:

      var depth = {}; // here we store node depths
      google.visualization.events.addListener(chart, 'ready', function () {
          for (var i = 0; i < data.getNumberOfRows(); i++) {
              depth[i] = 0; // we iniialize all in 0 depth
          }
          for (var i = 0; i < data.getNumberOfRows(); i++) { // for each row
              var childs = chart.getChildrenIndexes(i); // we check its descendants
              for (var child = 0; child < childs.length; child++) {
                  depth[childs[child]] += depth[i] + 1; // and add the parents depth+1
              }
          }
          console.log(depth) // here we have already all nodes depth
      });
      google.visualization.events.addListener(chart, 'select', function () {
          if (chart.getSelection().length > 0) {
              var node_row = chart.getSelection()[0].row;
              console.log(depth[node_row]) // now just show the depth of selected node
          }
      })
      chart.draw(data, {
          allowHtml: true
      });

Working fiddle: http://jsfiddle.net/a2zwqf1r/