Org Chart Example

An example of a Google Org Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['orgchart']}]}"></script>
       <div id="chart_div""></div>

JavaScript

google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
          [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President<div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
          
          google.visualization.events.addListener(chart, 'select', function(){
              var children=[]
              var selected=chart.getSelection()[0].row;
              
              function getChilds(index){
                  var childs=chart.getChildrenIndexes(index);
                  for(var i = 0; i < childs.length;i++){
                      children.push(data.getValue(childs[i],0))
                      getChilds(childs[i])
                  }
              }
              
              getChilds(selected)
              console.log(children)
              
          })
          
          
        chart.draw(data, {allowHtml:true});
      }