Simple
Example from google: http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html
Step 1: Create new list Employees include fields:
FirstName :
Single line of text
LastName:
Single line of text
FullName:
Calculated (=FirstName&" "&LastName)
UserName:
Person or Group
Company:
Single line of text
MobilePhone:
Single line of text
Step 2: Create new Webpart Solution name is
OrgChartForList_LeaveFormApp
Step 3: Create new Folder name is CustomScript
Step 4: Copy 2 files javascript (jquery-1.4.2.js, jquery.SPServices-0.5.6.js)
to Folder Script and create new file script in folder Script name is
ExternalJavaScript.js
Step 5: Copy code below to method CreateChildControls()
Literal literal = new Literal();
literal.Text = "<div id='OrgChat1'></div>";
this.Controls.Add(literal);
Page.ClientScript.RegisterClientScriptInclude("TheFirtScript", "wpresources/jquery-1.4.2.js");
Page.ClientScript.RegisterClientScriptInclude("TheSecondScript", "wpresources/jquery.SPServices-0.5.6.js");
Page.ClientScript.RegisterClientScriptInclude("TheThirtScript", "https://www.google.com/jsapi");
Page.ClientScript.RegisterClientScriptInclude("MainScript", "wpresources/ExternalJavaScript.js");
Step 6: Open file ExternalJavaScript.js and copy Code
javascript below to it
////////////////////////////////////////////////////////////////////////////////////////////////////////////
function GetPermission() {
var manager = '';
var teamLeader = '';
var employee = '';
try {
$().SPServices({
operation: "GetListItems",
//webURL: "http://acer:8888",
async: false,
listName: "Employees",
completefunc: function (xData, Status) {
//alert(xData.responseXML.xml);
$(xData.responseXML).find("z\\:row").each(function () {
var _position = $(this).attr("ows_Position");
_position
= _position.split('#');
_position
= _position[1];
var _userName = $(this).attr("ows_UserName");
_userName
= _userName.split('#');
_userName
= _userName[1];
var _manager = $(this).attr("ows_Manager");
_manager
= _manager.split('#');
_manager
= _manager[1];
if (_position == "Manager") {
manager
+= _userName + "|" + _position + "|" + _manager + "@";
}
else {
if (_position == "TeamLeader") {
teamLeader
+= _userName + "|" + _position + "|" + _manager + "@";
}
else {
if (_position == "Employee") {
employee
+= _userName + "|" + _position + "|" + _manager + "@";
}
}
}
});
}
});
}
catch (e) { alert(e); }
return manager + "*" +
teamLeader + "*" + employee;
}
var display = GetPermission();
//alert(display);
display = display.split('*');
var manager = display[0];
var teamLeader = display[1];
var employee = display[2];
var managerDetail = manager.split('@');
var teamLeaderDetail = teamLeader.split('@');
var employeeDetail = employee.split('@');
////////////////////////////////////////////////////////////////////////////////////////////////////////////
google.load('visualization', '1', { packages: ['orgchart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([
[{
v: 'CEO',
f: 'CEO<div style="color:red;
font-style:italic">President</div>' }, '', 'The President']
]);
for (var i = 0; i <
managerDetail.length - 1; i++)//UserName|Position|Manager
{
var managerDetail_Detail
= managerDetail[i].split('|');
data.addRows([
[{
v: '' +
managerDetail_Detail[0] + '', f: '' + managerDetail_Detail[0] + '<div style="color:red; font-style:italic">' + managerDetail_Detail[1] + '</div>' }, 'CEO', 'CEO']
]);
}
for (var i = 0; i <
teamLeaderDetail.length - 1; i++)//UserName|Position|Manager
{
var teamLeaderDetail_Detail
= teamLeaderDetail[i].split('|');
data.addRows([
[{
v: '' +
teamLeaderDetail_Detail[0] + '', f: '' + teamLeaderDetail_Detail[0] + '<div style="color:red; font-style:italic">' + teamLeaderDetail_Detail[1] + '</div>' }, '' +
teamLeaderDetail_Detail[2] + '', '']
]);
}
for (var i = 0; i <
employeeDetail.length - 1; i++)//UserName|Position|Manager
{
var employeeDetail_Detail
= employeeDetail[i].split('|');
data.addRows([
['' +
employeeDetail_Detail[0] + '', '' + employeeDetail_Detail[2] + '', '']
]);
}
var chart = new google.visualization.OrgChart(document.getElementById('OrgChat1')); //chartdivCEWP
chart.draw(data,
{ allowHtml: true });
}
Step 7: Copy 3 file in file Script
(jquery-1.4.2.js, jquery.SPServices-0.5.6.js, ExternalJavaScript.js) to
your folder wpresources with path below
(C:\inetpub\wwwroot\wss\VirtualDirectories\8888\wpresources)
Step 8: Build and Deploy Project
Step 9: Open List Employees in sharepoint
site
Step 10: Create data below
Step 11: Click Site Action | Edit Page | Insert WebPart | Custom |
add webpart OrgChartForList
and see result below
Guide deploy project:
Download file .rar name is OrgChart at here http://www.mediafire.com/file/sih58w6es9hg7od/OrganizationChart.rar include:
List template (Positions, Departments, ReportOnChartLeaveForm) , Script,
Project at here
Step 1: Open Project which you downloaded to your computer
Step 2: Click left mouse to project OrgChartForList_LeaveFormApp
Step 3: Click properties and change Site Url to your site
Step 4: Build and Deploy Project
Step 5: Create new List base on list template (Positions,
Departments, Employees)
Step 6: Verify Fields Position and Department in list Employees
(delete and create new)
Step 7: Copy 3 files JS (jquery-1.4.2.js,
jquery.SPServices-0.5.6.js, ReportChartForListLeaveForm.js) to folder wpresources
with path below C:\inetpub\wwwroot\wss\VirtualDirectories\8888\wpresources
