?
Solved

Google Org Chart in SharePoint 2007

Posted on 2014-01-23
5
Medium Priority
?
509 Views
Last Modified: 2014-02-17
Hi All,

I am trying to implement a Google Org chart and add the position as you see here
https://developers.google.com/chart/interactive/docs/gallery/orgchart#Data_Format
(Mike 'President' and Jim 'Vice President')

When I try the same I get the following
http://isaac.issharepoint.com/examples/WebPartPages/BuildOrgChart.aspx


Here's a snippet of my code:
 $().SPServices({
		operation: "GetListItems",
		async: false,
		listName: "OrgChart",
			//CAMLRowLimit: 0,
		CAMLViewFields: "<ViewFields><FieldRef Name='Title'></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>},'',''";

					//alert("name: "+name);
					ReportTo = $(this).attr("ows_Title");
					//ReportTo = $(this).attr("ows_ReportToOrg");
					
					ToolTip = $(this).attr("ows_ToolTip");	
						
					data.addRow([name, ReportTo, ToolTip]);
				});
				}		
	});				

Open in new window

0
Comment
Question by:Isaac
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
5 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39805177
Hi,
sorry I have today only very limited time, but

How does this look alike (just replace the code where you build the data array):
$(xData.responseXML).SPFilterNode('z:row').each(function() {													
					//OrgName=$(this).attr("ows_OrgName");	
					name = "{v: '"+$(this).attr("ows_Name")+"', f:'<font color='red'>test</font>'},'',''";

					//alert("name: "+name);
					ReportTo = $(this).attr("ows_Title");
					//ReportTo = $(this).attr("ows_ReportToOrg");
					
					ToolTip = $(this).attr("ows_ToolTip");	
						
					data.addRow([name, ReportTo, ToolTip]);
				});

Open in new window


Change:
Adding single quotes for the values v: SINGLEQUOTE ... SINGLEQUOTE , f: SINGLEQUOTE ...SINGLEQUOTE

BTW:  Is it really SharePoint 2007? Looks more like 2010

HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 39806336
The link I provided is SP 2010 but I am going to implement it in 2007.  The same error in both.  I will give your solution a try.  Thanks!
0
 
LVL 5

Author Comment

by:Isaac
ID: 39806353
Rainer,

That didn't work

I tried this and error is gone but the "Name" does not show

$(xData.responseXML).SPFilterNode('z:row').each(function() {													
					//OrgName=$(this).attr("ows_OrgName");	
					//name = "{v:'"+$(this).attr("ows_Name")+"', f:'<font color='red'>test</font>'},'',''";
					name = {
						v: $(this).attr("ows_Name"),
						f: "<font color='red'>test</font>"
					};
					
					//alert("name: "+name);
					ReportTo = $(this).attr("ows_Title");
					//ReportTo = $(this).attr("ows_ReportToOrg");
					
					ToolTip = $(this).attr("ows_ToolTip");	
						
					data.addRow([name, ReportTo, ToolTip]);
				});

Open in new window

0
 
LVL 5

Accepted Solution

by:
Isaac earned 0 total points
ID: 39855115
I got it to work.  Below is the full code:


	<html>
	<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: #D1B5A1;
    background: -webkit-gradient(linear, left top, left bottom, from(#D1B5A1), to(#AE7D5A));
}
.mySelectedNodeClass {
    border: 2px solid #e38493;
    background-color: #FFD280;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFD280), to(#FFAE19));
}
	</style>
<script type="text/javascript" src="http://isaac.issharepoint.com/examples/Script/jquery-1.8.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/examples/Script/jquery.SPServices-0.7.2.min.js" language="javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

	<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: 'small'
        });	  
        
/*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);                    
          });    */    
        
        
   }
          
 </script>
 
 <body >
 <div id="VisualizeOrgChart" style="width: 300px; height: 300px;"></div>
 </body>
 
 </html>

Open in new window

0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 39864340
Resolved
0

Featured Post

How Blockchain Is Impacting Every Industry

Blockchain expert Alex Tapscott talks to Acronis VP Frank Jablonski about this revolutionary technology and how it's making inroads into other industries and facets of everyday life.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Last week I faced a strange issue recently, i have deployed SharePoint 2003 servers for one project and one of the requirements was to open SharePoint site from same server. when i was trying to open site from the same server i was getting authentic…
When installing SharePoint 2010 RTM I came across a strange error, I was getting timeouts during the installation. I searched the web and found the best solution to be found here (http://social.msdn.microsoft.com/Forums/en-US/sharepoint2010genera…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question