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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function visualizeOrgChart(orgChartProperties) { | |
| google.load('visualization', '1', { packages: ['orgchart'] }); | |
| google.OrgChartData = orgChartProperties; | |
| google.setOnLoadCallback(loadOrgChart); | |
| } |
2. Fetch data using SharePoint Web Service from list that contains organizational structure
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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\"" | |
| }); | |
| } |
3. Bind data source and draw chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 }); | |
| } |
Usage
Result page with Org Structure rendered as Chart in List View
YASP Blog 
Hi, thank you for article, but sometimes it is better to display data directly from Active Directory with actualized data. Plumsail Org Chart implements such behavior, it also supports drag&drop edit interface. http://plumsail.com/sharepoint-products/plumsailorgchart/
I’m not seeing how to implement this… what type of object do you send to visualizeOrgChart()? Where do you specify the list name and the columns?
Found some good org chart templates in creately diagram community. There are 1000s of organizational chart examples and templates in there to be used freely.