Table Chart Example

An example of a Google Table Chart.

by heennkkee

HTML

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="org-chart"></div>

JavaScript

google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);

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

  // Pull user information from Drupal 
	var userlist = [[{v:'CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local', f:'My Name'}, 'CN=Supervisor Name,OU=Sr. Management,OU=Fesslers,DC=hpsi,DC=local', ''], [{v:'', f:'Another Name'}, '', ''], [{v:'CN=Yet Another,OU=IT,OU=Fesslers,DC=hpsi,DC=local', f:'Yet Another'}, 'CN=My Name,OU=IT,OU=Fesslers,DC=hpsi,DC=local', '']];
  // For each orgchart box, provide the name, manager, and tooltip to show.
  data.addRows(userlist);

  // Create the chart.
  var chart = new google.visualization.OrgChart(document.getElementById('org-chart'));
  // Draw the chart, setting the allowHtml option to true for the tooltips.
  chart.draw(data, {allowHtml:true});
}