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); | |
} |
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\"" | |
}); | |
} |
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 }); | |
} |
Usage
Result page with Org Structure rendered as Chart in List View