Organizational Chart

Sometimes in SharePoint we need to visualize hierarchical data as organizational chart. Prerequisites: not to use Flash or Silverlight technologies here.

So, in our scenario for storage of organization structure will be used SharePoint List based on Custom List , for rendering engine Google Chart Tools.

Implementation

First, let’s take a look at list’s schema for storing organizational structure

Name	Type	Description
ParentOrgElement	Lookup	Used for parent/child relationship
OrgDescription	Note	Display text for chart box
OrgAdditionalProperties	Note	Visual behavior for chart box

From Google Charts library we’ll use Organizational Chart package only.

1. Google Charts Tools loading and package initialization

	function visualizeOrgChart(orgChartProperties) {
	google.load('visualization', '1', { packages: ['orgchart'] });
	google.OrgChartData = orgChartProperties;
	google.setOnLoadCallback(loadOrgChart);
	}

view raw

visualizeOrgChart.js

hosted with ❤ by GitHub

2. Fetch data using SharePoint Web Service from list that contains organizational structure

	function loadOrgChart() {
	var soapEnv =
	"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
	<soapenv:Body> \
	<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
	<listName>" + google.OrgChartData.ListName + "</listName> \
	<viewFields> \
	<ViewFields> \
	<FieldRef Name='" + google.OrgChartData.TitleFieldName + "' /> \
	<FieldRef Name='" + google.OrgChartData.TooltipFieldName + "' /> \
	<FieldRef Name='" + google.OrgChartData.ParentFieldName + "' /> \
	<FieldRef Name='" + google.OrgChartData.StyleFieldName + "' /> \
	</ViewFields> \
	</viewFields> \
	</GetListItems> \
	</soapenv:Body> \
	</soapenv:Envelope>";

	$.ajax({
	url: L_Menu_BaseUrl + "/_vti_bin/lists.asmx",
	type: "POST",
	dataType: "xml",
	data: soapEnv,
	complete: onOrgChartDataLoaded,
	contentType: "text/xml; charset=\"utf-8\""
	});
	}

view raw

loadOrgChart.js

hosted with ❤ by GitHub

3. Bind data source and draw chart

	function onOrgChartDataLoaded(orgChartData, status) {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Name');
	data.addColumn('string', 'Parent');
	data.addColumn('string', 'ToolTip');
	var chartFieldNames = { Title: generateOwsFieldName(google.OrgChartData.TitleFieldName),
	Tooltip: generateOwsFieldName(google.OrgChartData.TooltipFieldName),
	Parent: generateOwsFieldName(google.OrgChartData.ParentFieldName),
	Properties: generateOwsFieldName(google.OrgChartData.StyleFieldName)
	};
	var orgChartRowProperties = {};
	var orgChartDataRows = [];
	var orgChartResult = ($.browser.msie ? orgChartData.responseXML : orgChartData.responseText);
	$(orgChartResult).find("z\\:row").each(function (rowIndex) {
	var orgChartRow = [];
	//if ($(this).attr(chartFieldNames.Layout) == undefined)
	orgChartRow[0] = $(this).attr(chartFieldNames.Title);
	//else {
	// orgChartRow[0] = { v: $(this).attr(chartFieldNames.Title), f: $(this).attr(chartFieldNames.Layout) };
	//}
	orgChartRow[1] = ($(this).attr(chartFieldNames.Parent) != undefined ? $(this).attr(chartFieldNames.Parent).split(';#')[1] : '');
	orgChartRow[2] = $(this).attr(chartFieldNames.Tooltip);
	if ($(this).attr(chartFieldNames.Properties) != undefined) {
	orgChartRowProperties[rowIndex] = parseChartRowProperties($(this).attr(chartFieldNames.Properties));
	}
	orgChartDataRows[orgChartDataRows.length] = orgChartRow;
	});

	data.addRows(orgChartDataRows);
	$.each(orgChartRowProperties, function (rowIndex, rowProperty) {
	data.setRowProperties(parseInt(rowIndex), rowProperty);
	});
	var chart = new google.visualization.OrgChart(document.getElementById('orgChartCanvas'));
	chart.draw(data, { allowHtml: true, allowCollapse: true });
	}