?
Solved

Google Org Chart in SharePoint 2007

Posted on 2014-01-23
5
Medium Priority
?
515 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

There is one common problem that all we SharePoint developers share: custom solution deployment. This topic can't be covered fully in this short article, so all I want to do in this one is to review it from a development-to-operations perspectiv…
Microsoft SharePoint Foundation 2010 and Microsoft SharePoint Server 2010 do not offer the option to configure the location of the SharePoint diagnostic trace log files during installation.  This can, however, be configured through Central Administr…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
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…

649 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