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:

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.

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

    • Pleas check the error log in console and put breakpoint and check where is the exact issue .,

  • >