This example will get records from SharePoint List and display as chart for people organization.
Create Project using SharePoint App template.
Replace Default.aspx code as below
<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript" src="../Scripts/App.js"></script>
<script type='text/javascript'>
</script>
</asp:Content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Organization Chart
</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div>
<p id="message">
<!-- The following content will be replaced with the user name when you run the app - see App.js -->
initializing...
</p>
</div>
<div id='chart_div'></div>
<div id='Div1'></div>
</asp:Content>
Replace App.js code by below code :
'use strict';
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var collList;
var clientContext;
var oWeb;
var oLists;
var oList;
var oListItems;
var oItems = "";
var hostweburl;
var appweburl;
hostweburl = getQueryStringParameter("SPHostUrl");
appweburl = getQueryStringParameter("SPAppWebUrl");
hostweburl = decodeURIComponent(hostweburl);
appweburl = decodeURIComponent(appweburl);
getUserName();
//retrieveListItems();
function drawChart() {
}
function retrieveListItems() {
//clientContext = new SP.ClientContext.get_current();
var appContextSite = new SP.AppContextSite(
context,
hostweburl
);
//oWeb = appContextSite.get_web();
oList = appContextSite.get_web().get_lists().getByTitle('OrgChart');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
'<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>1</Value></Geq></Where></Query>' +
'<RowLimit>25</RowLimit></View>'
);
oListItems = oList.getItems(camlQuery);
context.load(oListItems);
context.executeQueryAsync(
Function.createDelegate(this, onListSuceeded),
Function.createDelegate(this, onListFailed)
);
}
function onListSuceeded(sender, args) {
// alert("onListSuceeded");
var EnumerateListItems = oListItems.getEnumerator();
oItems = "data.addRows([ ";
while (EnumerateListItems.moveNext()) {
var oListItem = EnumerateListItems.get_current();
var Name = oListItem.get_item('Name');
var userName = "";
if (Name != null)
userName = Name.get_lookupValue();
var ManagerName = oListItem.get_item('ManagerName');
var managerName = "";
if (ManagerName != null)
managerName = ManagerName.get_lookupValue();
oItems += "['" + userName + "','" + managerName + "',''],";
}
oItems = oItems.substring(0, oItems.length - 1);
oItems += " ]);";
//alert("from inside function " + oItems);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
eval(oItems);
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data, { allowHtml: true });
//$("#Div1").text(oItems);
}
function onListFailed(sender, args) {
alert("onListFailed");
}
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
//$('#message').text('Hello ' + user.get_title());
$('#message').text('Hello Rakesh Patel');
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message());
}
google.load('visualization', '1', { packages: ['orgchart'] });
google.setOnLoadCallback(retrieveListItems);
Create List as per the attachment.
