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