Google Code is Google’s site for developer tools, APIs and technical resources. The site contains documentation on using Google developer tools and APIs – including discussion groups and blogs for developers using Google’s developer products. Google Web Toolkit allows developers to create Ajax applications in the Java programming language.
I am going to create a organisation chart using google api, as usual html document type
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
and we want to include the bellow script , it cinludes
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(‘visualization’, ’1′, {packages: ['orgchart', 'table']});
</script>
Google load visualization includes chart and tables
<script type=”text/javascript”>
var map;
var table;
var data;
function drawOrgChartAndTable() {
var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Name’);
data.addColumn(‘string’, ‘Manager’);
data.addRows(5);
data.setCell(0, 0, ‘Mike’);
data.setCell(1, 0, ‘Jim’);
data.setCell(1, 1, ‘Mike’);
data.setCell(2, 0, ‘Alice’);
data.setCell(2, 1, ‘Mike’);
data.setCell(3, 0, ‘Bob’);
data.setCell(3, 1, ‘Jim’);
data.setCell(4, 0, ‘Carol’);
data.setCell(4, 1, ‘Bob’);
var orgchart = new google.visualization.OrgChart(document.getElementById(‘orgchart’));
orgchart.draw(data, null);
var table = new google.visualization.Table(document.getElementById(‘table’));
table.draw(data, null);
// When the table is selected, update the orgchart.
google.visualization.events.addListener(table, ‘select’, function() {
orgchart.setSelection(table.getSelection());
});
// When the orgchart is selected, update the table visualization.
google.visualization.events.addListener(orgchart, ‘select’, function() {
table.setSelection(orgchart.getSelection());
});
}
google.setOnLoadCallback(drawOrgChartAndTable);
</script>
</head>
added the data in header
and include bellow div in body,
<table>
<tr>
<td>
<div id=”orgchart” style=”width: 300px; height: 300px;”></div>
</td>
<td>
<div id=”table” style=”width: 300px; height: 300px;”></div>
</td>
</tr>
</table>
we will get bellow a beautiful organisation chart
Posted in 
Can we read data for this orgchart from database… and how do we do that?
i have done same orgchart using two technologies easily with adobe flex which is expensive but we can do same using google webtool kit.
is it possible to develop context menu for orgchart using this technology? it will be really useful
yes we can , from database but it having lot of limitation it will work only JavaScript enabled browser , but flex will work every where, most of the browser will support flash ( or people will download flash ) but in case of java script many people disabled that feature , try to check Jquery will get many similar function like this
and its good work…
good one