How to create an organizational chart in your webpage using Google Organization Chart Tools
https://developers.google.com/chart/interactive/docs/gallery/orgchart
While googling for some information on organizational charts of various companies, I came across this cool visualization tool on Google Developers.
If you are comfortable with JavaScript and want a quick and easy way to churn out a simple organizational chart that displays on a webpage, this tool is quite useful.
To use it, follow these few steps
Step 1: Include this tag in your <head> tag in your HTML file
In this case, the callback method is "drawChart".
First, define the method and then create a new google.visualisation.DataTable that contains the organizational information.
Populate the columns of the table.
While googling for some information on organizational charts of various companies, I came across this cool visualization tool on Google Developers.
If you are comfortable with JavaScript and want a quick and easy way to churn out a simple organizational chart that displays on a webpage, this tool is quite useful.
 |
| Organizational chart churned out using Google's Visualization OrgChart object |
To use it, follow these few steps
Step 1: Include this tag in your <head> tag in your HTML file
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
Step 2: Load visualization package and set callback method when page loadsIn this case, the callback method is "drawChart".
<script type='text/javascript'> google.load('visualization', '1', {packages:['orgchart']}); google.setOnLoadCallback(drawChart);
</script>
Step 3: Code the callback methodFirst, define the method and then create a new google.visualisation.DataTable that contains the organizational information.
Populate the columns of the table.
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); }
Add the row data
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); // Unique ID data.addColumn('string', 'Manager'); // How it looks like data.addColumn('string', 'ToolTip'); // The tool tip that will be displayed
data.addRows([
[{v:'HCTan', f:'Tan Hang Cheong<div>Principal</div>'}, '', 'SP Principal'],
[{v:'JLHee', f:'Hee Joh Liang<div>Deputy Principal</div>'}, 'HCTan', 'DP Acad'],
[{v:'PHLim', f:'Lim Peng Hun<div>Deputy Principal</div>'}, 'HCTan', 'DP Industry']
]);
}
Create a new OrgChart object and call its draw method
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); // Unique ID data.addColumn('string', 'Manager'); // How it looks like data.addColumn('string', 'ToolTip'); // The tool tip that will be displayed data.addRows([ [{v:'Dora', f:'Dora,'} ]); var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); chart.draw(data, {allowHtml:true}); }
Step 4: Define the <div> tag that will contain the chart inside <body> tag<body> <div id='chart_div'></div> </body> </html>
 |
| Screenshot of the entire code snippet |
More links here:
Google Code Playground - Org chart
Nice step by step details on organisation charts
ReplyDeleteNice tutorial! Another web based alternative I'd recommend checking out is Lucidchart. It integrates with google drive and allows for real time collaboration.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethe best javascript org chart library is GetOrgChart
ReplyDeleteGreat post! Very helpful. If you want more options for organization charts, check out Lucidchart's Org Chart Software, it's great! https://www.lucidchart.com/pages/examples/orgchart_software
ReplyDelete