English 中文(简体)
Google Charts Tutorial

Google Charts Useful Resources

Selected Reading

Google Charts - Organization Chart
  • 时间：2024-11-03

Google Charts - Organization Chart

Previous Page Next Page  

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.

Configurations

We ve used OrgChart class to show organization based chart.

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

Example

googlecharts_organization_chart.htm

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load( current , {packages: [ orgchart ]});     
      </script>
   </head>
   
   <body>
      <span id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </span>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
            var data = new google.visuapzation.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.
            data.addRows([
               [{v: Robert , f: Robert<span style="color:red; font-style:itapc">President</span> },  ,  President ],
               [{v: Jim , f: Jim<span style="color:red; font-style:itapc">Vice President</span> }, Robert ,  Vice President ],
               [ Apce ,  Robert ,   ],
               [ Bob ,  Jim ,  Bob Sponge ],
               [ Carol ,  Bob ,   ]
            ]);			

            // Set chart options
            var options = {allowHtml:true};
                  
            // Instantiate and draw the chart.
            var chart = new google.visuapzation.OrgChart(document.getElementById( container ));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.