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:'OMT', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMT</td><td>02:05:13</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>50</td><td>52</td><td>54</td></tr></table>'}, '', ''],
[{v:'OMTC', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTC</td><td>00:35:12</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>20</td><td>22</td><td>24</td></tr></table>'}, 'OMT', 'OMTC'],
[{v:'OMTJ', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTJ</td><td>00:00:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>00</td><td>00</td><td>00</td></tr></table>'}, 'OMT', 'OMTJ'],
[{v:'OMTR', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTR</td><td>01:05:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>22</td><td>24</td><td>26</td></tr></table>'}, 'OMT', 'OMTR'],
[{v:'OMTS', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTS</td><td>00:25:01</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMT', 'OMTS'],
[{v: 'NMTF6-01' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">NMTF6-01</td><td>00:35:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>06</td><td>08</td><td>10</td></tr></table>'}, 'OMTR', ''],
[{v: 'BPCL6-03' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">BPCL6-03</td><td>00:22:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>02</td><td>04</td><td>06</td></tr></table>'}, 'OMTR', ''],
[{v: 'BPCL6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">BPCL6-02</td><td>00:08:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>10</td><td>12</td><td>14</td></tr></table>'}, 'OMTR', ''],
[{v: 'CXAT6-04' ,f:'<table border="1"...