Google Charts - Organization Chart

Organization chart helps in rendering a hierarchy of nodes, used to portray superior/subordinate relationships in an organization. For example, A family tree is a type of org chart.. We've already seen the configuration used to draw this chart in Google Charts Configuration Syntax chapter. So, let's see the complete example.


We've used OrgChart class to show organization based chart.

//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));



      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "">
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['orgchart']});     
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visualization.DataTable();   
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
               [{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
               [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
               ['Alice', 'Robert', ''],
               ['Bob', 'Jim', 'Bob Sponge'],
               ['Carol', 'Bob', '']

            // Set chart options
            var options = {allowHtml:true};
            // Instantiate and draw the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('container'));
            chart.draw(data, options);


Verify the result.

Kickstart Your Career

Get certified by completing the course

Get Started