In this SharePoint customization tutorial, we will discuss how to create an organization chart web part from a list using the JavaScript object model (jsom) in SharePoint Online/2013/2016/2019. Here we will use JavaScript to create an organization chart in SharePoint.
Most of the organizations use the Organization chart web part to display all employees hierarchy structure in one place. So here I have created a master list where I kept all employees details and I show the employee hierarchy based on the designation in SharePoint.
Create organization chart in SharePoint
Below is the SharePoint list which has the organization’s data like below:
You can also see the data type of each column in the SharePoint list.
Here I am using Google API to create google-visualization-org chart and google-visualization-org chart-node for creating organization chart. Below is the code of my Web part. Here you have to call google API to create all node.
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
table {
border-collapse: separate !important;
}
.google-visualization-orgchart-node {
background: #7fcde6 !important;
border: 1px solid #d82828 !important;
padding-bottom: 15px !important;
padding-top: 15px !important;
width: 165px !important;
}
.google-visualization-orgchart-lineleft {
border-left: 1px solid #e61717 !important;
}
.google-visualization-orgchart-linebottom {
border-bottom: 1px solid #e61717 !important;
}
.google-visualization-orgchart-node {
color: #3a3a38;
}
.google-visualization-orgchart-lineright {
border-right: 1px solid #e61717 !important;
}
.plus {
position: relative;
top: 0px;
height: 24px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', drawChart);
});
</script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['table', 'orgchart'] });
google.setOnLoadCallback(drawChart);
var collListItem =null;
var dataArray = [];
function drawChart() {
var clientContext = new SP.ClientContext("https://pikasha12.sharepoint.com/sites/DLH");
var oWebsite = clientContext.get_web();
var oList = oWebsite.get_lists().getByTitle('Employee Master List');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<View><Query></Query></View>");
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed)
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
dataArray.push([oListItem.get_item('Emp_Id'), oListItem.get_item('Full_Name'), oListItem.get_item('Department'), oListItem.get_item('Super_Visor_Name'), oListItem.get_item('Email'), oListItem.get_item('Position'), oListItem.get_item('Nationality'), oListItem.get_item('Contact'), oListItem.get_item('Super_Visor_ID'),oListItem.get_item('Photo').$1_1])
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
var i = 0
for (i = 0; i < dataArray.length; i++) {
var Emp_ID = dataArray[i][0].toString();
var Full_Name = dataArray[i][1];
var Department = dataArray[i][2];
var Sup_Name = dataArray[i][3];
var email = dataArray[i][4];
var Position = dataArray[i][5];
var NATIONALITY = dataArray[i][6];
var Mobile = dataArray[i][7];
var Sup_ID = dataArray[i][8] != null ? dataArray[i][8].toString() : "Enjoy SharePoint";
var photo = dataArray[i][9];;
data.addRows([[{
v: Emp_ID,
f: Full_Name + '<br /><b>' + Department + '<br /><b>' + email + '<br /><b>' + NATIONALITY + '<br /><b>' + Position + '<div>(<span>' + Mobile + '</span>)</div><img height="50px" width="50px" src="' + photo + '" /><div ><img class="plus" src="https://pikasha12.sharepoint.com/sites/DLH/PublishingImages/Emp_Photo/plus.png"></div>'
}, Sup_ID]]);
}
var chart = new google.visualization.OrgChart($("#chartOrg")[0]);
google.visualization.events.addListener(chart, 'select', function () {
// get the row of the node clicked
var selection = chart.getSelection();
var row = selection[0].row;
// get a list of all collapsed nodes
var collapsed = chart.getCollapsedNodes();
// if the node is collapsed, we want to expand it
// if it is not collapsed, we want to collapse it
var collapse = (collapsed.indexOf(row) == -1);
chart.collapse(row, collapse);
// clear the selection so the next click will work properly
chart.setSelection();
});
chart.draw(data, { allowHtml: true, allowCollapse: true });
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
</script>
<div id="chartOrg">
</div>
In the above code, you need to modify the site name and the list name based on your SharePoint site. Once the code will be ready, copy the same code and paste it inside the script editor web part in SharePoint.
Please look onto the output of the web part in SharePoint web part page like below:
We can also add extra node here but before that, we have to modify the few lines of code. Here we can also expand and collapse the node by click on the plus icon. Please look into the below screenshot after collapsing the node.
You may like following SharePoint tutorials:
- Create a New Service Request in Office 365 Account
- Delete content type from SharePoint list using PowerShell
- Create Highcharts in SharePoint using Rest API
- How to Enable view entries in SharePoint list multiple lines of text columns
- Embed PowerPoint Slide in SharePoint Online/2013/2016/2019
- Difference between SharePoint classic and modern experiences in list and library
- Send an Email when Item added in a SharePoint list using Microsoft Flow
- Create a Survey in SharePoint Online or SharePoint 2013/2016/2019
- Copy list items from one site collection to another programmatically using CSOM in SharePoint Online
- Different ways to create auto increment column in SharePoint 2013/2016/Online list
- RSS Viewer Web Part in SharePoint
This article is all about creating an organization chart in SharePoint. We can also use the same organization chart web part in SharePoint 2010/2013/2016/2019 and SharePoint online.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
Perfect! Good job! Thanks for sharing!
Thanks
[…] Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript […]
I getting this error, maybe you know what is.
Uncaught Error: The collection has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested.
tnks!
Hi Tomas, Check out the column names. You have to load the columns. You can check the below URL:
https://www.sharepointsky.com/sharepoint-the-collection-has-not-been-initialized/
Hi
because we use sharepoint as intranet and offline, how could we use google charts ? Do you have any other suggestion for us?
hello
The chart is not displaying when i paste into the script editor of my SharePoint Online page. Please what do you think i am doing wrong
Please check error in console.
It is not working for me. Just displayed blank white space.
Same issue as gboyega…nothing happens, not even an error…big white blank screen. Thoughts?
Pleas check the error log in console and put breakpoint and check where is the exact issue .,
sp is undefined error coming
how to remove small line on collapsed of chart at end o