Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google 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.


Organization Chart Example

The following example shows how to draw a basic organization chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div":

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the orgchart package and set a callback google.charts.load('current', {'packages':['orgchart']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); data.addRows([ [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'], [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]); // Set chart options var options = { allowHtml: true }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.OrgChart(document.getElementById('chart-div')); chart.draw(data, options); }