The below diagram is what we are going to build. This hierarchy is based upon the manager field in the user object. The below example is NOT based upon the role hierarchy. Anyhow, you can modify the code below to fit the role hierarchy.
Visualforce Page:
<apex:page controller="orgchart" showHeader="false">
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
{!userdata}
]);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, {allowHtml:true});
}
</script>
</head>
<body>
<div id='chart_div' style="font-size:18px;"></div>
</body>
</html></apex:page>Apex Class
public class orgchart {
Public String getuserdata()
{
List<User> allusers = [Select Name,Manager.Name from User where IsActive = TRUE and ManagerId != NULL];
String datastr = '';
for (integer i=0;i<allusers.size();i++)
{
datastr = datastr + '[\'';
datastr += allusers[i].Name;
datastr+= '\',\'';
datastr+= allusers[i].Manager.Name;
datastr+='\',\'\'],';
}
datastr = datastr + '';
return datastr;
}
}