How to create an organization chart from a list in SharePoint using JavaScript

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.