Note: This post assumes you know a little about “SharePoint“, “jQuery“, “SPServices“, “Google Charts” and “HTML”

The other day I was asked by our client to create a site collection chart showing the relationships between all the sites and sub-sites in the site collection.  This would be similar to an organizational chart showing the hierarchy in leadership except in this instance, I would be showing the hierarchy in sites.  They also wanted the chart to show all the users with full ownership of the sites.

I knew that SharePoint out of the box could not help with the task at hand so that option was out of the question.  I then remembered that Google provides a JavaScript API that would allow for the creation of an organizational chart.  BINGO!

All I needed to do now was talk to the Farm administrator to create and run a script that would provide me all the sites and their parent sites along with all the users that have full ownership of their respective sites.  Once the data was provided in excel, all I did was transfer it over to SharePoint in datasheet view in the correct format that the google org chart requires and used a combination of jQuery and SPServices to get the data from my SharePoint list to feed the chart for visualization.

Here is a link to my list and the data. As you will see, I have four columns, “Name”, “ReportTo”, “Users” and “ToolTip”.  The first 2 columns is what’s needed for all the magic to occur.  The “Name” will be all the sites in the site collection and “ReportTo” lists all the parent sites of the sites in the “Name” column.  The “users” contains all the site admins of each site.

Here is what the code looks like:

</pre>
<style><!--
.myNodeClass {     text-align: center;     vertical-align: middle;     font-family: arial,helvetica;     font-size: 25px;     cursor: default;     border: 2px solid #b5d9ea;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;     -webkit-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;     -moz-box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;     background-color: #CCC;     background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#b0d7ee)); } .mySelectedNodeClass {     border: 2px solid #e38493;     background-color: #eeeeee;     background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); }
--></style>
<script type="text/javascript">
	      google.load('visualization', '1', {packages: ['orgchart']});
		  google.setOnLoadCallback(drawChart);

function drawChart()
{
	//alert("HELLO");

	//alert($().SPServices.SPGetCurrentSite());
	 // Initialize data object to hold chart data
	 var data = new google.visualization.DataTable();
	 data.addColumn('string', 'Name');
	 data.addColumn('string', 'ReportTo');
	 data.addColumn('string', 'Tool tip');
	 
	 var name="";
	 var ReportTo="";
	 var ToolTip="";
	 var OrgName="";
	 
	 //alert("before spserv");
	 $().SPServices({
		operation: "GetListItems",
		async: false,
		listName: "OrgChart",
			//CAMLRowLimit: 0,
		CAMLViewFields: "<ViewFields><FieldRef Name='Title'></FieldRef><FieldRef Name='Users'></FieldRef><FieldRef Name='Name'></FieldRef><FieldRef Name='ToolTip'></FieldRef><FieldRef Name='ReportToOrg'></FieldRef><FieldRef Name='OrgName'></FieldRef></ViewFields>",     
		CAMLQuery: "<Query><OrderBy><FieldRef Name='Order0' Ascending='False' /></OrderBy></Query>",
		completefunc: function (xData, Status) {			
			// Loop through each item 
				
				$(xData.responseXML).SPFilterNode('z:row').each(function() {													
					//OrgName=$(this).attr("ows_OrgName");	
					//name = "{v:'"+$(this).attr("ows_Name")+"', f:'<font color='red'>test</font>'},'',''";
					if ($(this).attr("ows_Name")=="BAH")
					{
						name = {
							v: $(this).attr("ows_Name"),
							f: "<font color='blue'><u>Site Name</u><br></font>" + $(this).attr("ows_Name") + "<br><br><font color='blue'><u>Site Admins</u><br></font><font color='#800000'><img src=" + $(this).attr("ows_ToolTip") + " /></font>"
						};					
					}
					else
					{
						name = {
							v: $(this).attr("ows_Name"),
							f: "<font color='blue'><u>Site Name</u><br></font>" + $(this).attr("ows_Name") + "<br><br><font color='blue'><u>Site Admins</u><br></font><font color='#800000'>" + $(this).attr("ows_Users") + "</font>"
						};
					}
					
					//alert("name: "+name);
					ReportTo = $(this).attr("ows_Title");
					//ReportTo = $(this).attr("ows_ReportToOrg");
					
					ToolTip = $(this).attr("ows_ToolTip");	
						
					data.addRow([name, ReportTo, ToolTip]);
				});
				}		
	});				

        var chart = new google.visualization.OrgChart(document.getElementById('VisualizeOrgChart'));
        chart.draw(data, {
            allowHtml:true,
            nodeClass: 'myNodeClass',
            selectedNodeClass: 'mySelectedNodeClass',
            size: 'large'
        });	  
        
google.visualization.events.addListener(chart, 'select', function() {
          // grab a few details before redirecting
          var selection = chart.getSelection();
          var ArrayIndex = selection[0].row;         
          var Item = data.getValue(ArrayIndex, 0);
          
          alert("row: "+ArrayIndex);         
          alert("You can redirect to a page to show just this Item: "+Item);                    
          });        
        
        
   }
<div id="VisualizeOrgChart" style="width: 300px; height: 300px;"></div>
<pre>

Here is the actual chart.

Hope that made sense to you.

Happy SharePointing!!

jQuery and SP Services SharePoint SharePoint 2010