hierarchy chart on vf page by using google chart.

Hi Guys,

I am writing this post to show how we can create a beautiful chart showing hierarchy level for Account on detail page, 

all Contacts shows according to their reporting managers for an Account.

here I am using Google chart in VF page and apex class,

for this requirement i am creating a string "ContactData" and using it on VF page that's it.

following is code for extension class and vf page:-

	<apex:page StandardController="Account" extensions="AccountHierarchyChartController" sidebar="false" showHeader="false">
	<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([
	{!ContactData}
	]);
	var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
	chart.draw(data, {allowHtml:true});
	}
	</script>
	<div id='chart_div' style="font-size:18px;"></div>
	</apex:page>

view raw AccountHierarchyChart hosted with ❤ by GitHub

	public class AccountHierarchyChartController{
	// Variable to create a string and pass it to google charts.
	public String ContactData{get;set;}
	public AccountHierarchyChartController.AccountHierarchyChartController(ApexPages.StandardController controller){
	ContactData = '';
	for(Contact con :[Select Name,Title,ReportsTo.Name from Contact where AccountId =: controller.getId()]){
	ContactData = ContactData + '[{v:\'';
	ContactData += con.Name;
	ContactData += '\',';
	ContactData += ' f:\''+ con.Name +'<div style="color:red; font-style:italic">'+ con.Title +'</div>\'}';
	ContactData += ',\'';
	ContactData += con.ReportsTo.Name != null ? con.ReportsTo.Name : '';
	ContactData += '\',\'' + con.Title + '\'],';
	}
	}
	}

view raw AccountHierarchyChartController hosted with ❤ by GitHub

Screen shoot:-

Note:- chart is shows only if you fill the "Reports To" field at contact level.
Happy coding...
Thanks
Anurag Jain.