Org Chart Example

An example of a Google Org Chart.

by andypotanin

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: 'us-cloud-1',
                  f: 'us-cloud-1 <b>46.148.52.60</b>'
              }, '', '146.148.52.60'],
              [{
                  v: 'us-cloud-2',
                  f: 'us-cloud-2<b>146.148.58.55</b>'
              }, '', 'The President'],

              [
                  {
                  v: 'mosul',
                  f: 'mosul<div style="color:red; font-style:italic">Vice President<div>'
                  }    
                  , 'us-cloud-2', 'us-cloud-2'],
              
              ['Alice', 'Mike', ''],
              ['Bob', 'mosul', 'Bob Sponge'],
              ['Carol', 'Bob', '']
          ]);

          var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
          chart.draw(data, {
              allowHtml: true
          });
      }