Kwizcom Forms

Create an organization chart from a list in SharePoint Online/2013/2016 using JavaScript

create organization chart in sharepoint

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. 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.

SharePoint deveopment training course

Create organization chart in SharePoint

Below is the SharePoint list which has the organization’s data like below:

Create organization chart from list in SharePoint
Create organization chart from list in SharePoint

You can also see the data type of each column in the SharePoint list.

create organization chart in sharepoint using jsom
create organization chart in sharepoint using jsom

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:

create organization chart in sharepoint using javascript
create organization chart in sharepoint using javascript

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.

Create organization chart from list in SharePoint Online using javascript
Create organization chart from list in SharePoint Online using javascript

You may like following SharePoint tutorials:

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.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + 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).

View all posts by Rajkiran Swain →