How to create an organization chart from a SharePoint list

In this SharePoint customization tutorial, we will discuss how to create an organization chart web part from a SharePoint 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 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 employee’s details and I show the employee hierarchy based on the designation in SharePoint.

Create an organization chart in SharePoint

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

sharepoint organization chart from list — 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

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.

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.