Solved

Google Org Chart in SharePoint 2007

Posted on 2014-01-23
5
505 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
In this video, viewers are given an introduction to using the Windows 10 Snipping Tool, how to quickly locate it when it's needed and also how make it always available with a single click of a mouse button, by pinning it to the Desktop Task Bar. Int…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

688 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