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
