Google org charts - Javascript Google Chart

Javascript examples for Google Chart:Org Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Org Chart

Description

Google org charts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   ww w .  java2 s  . c om*/
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');
   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', '']";
   userlist=eval("["+userlist+"]");
   console.log(userlist);
   data.addRows(userlist);
   var chart = new google.visualization.OrgChart(document.getElementById('org-chart'));
   chart.draw(data, {
      allowHtml : true
   });
}
    }

      </script> 
   </head> 
   <body> 
      <div id="org-chart"></div>  
   </body>
</html>

Related Tutorials