Google OrgChart-Google可视化

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/