I am writing below code to create org chart using Jquery plugin reference as below

I referred this plugin and written code to create org chart which pick Sharepoint source and create org chart hierarchy nodes like below

Org chart is working as expected and content as well coming what am not getting is image on hover below is my full code

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/css/jquery.orgchart.min.css'/> 
<style>

.orgchart {
    box-sizing: border-box!important;
    display: inline-block!important;
    min-height: 202px!important;
    min-width: 202px!important;
    -webkit-touch-callout: none!important;
    -webkit-user-select: none!important;
    -khtml-user-select: none!important;
    -moz-user-select: none!important;
    -ms-user-select: none!important;
    user-select: none!important;
    background-image: none !important;
    background-size: 10px 10px!important;
    border: 1px dashed transparent;
    padding: 20px!important;
}

.orgchart .lines .leftLine {
    border-left: 1px solid #eb3c96!important;
    float: none!important;
    border-radius: 0!important;
}

.orgchart .lines .topLine {
    border-top: 2px solid #eb3c96!important;
}

.orgchart .node .title {
    box-sizing: border-box!important;
    padding: 2px!important;
    width: 130px!important;
    text-align: center!important;
    font-size: .75rem!important;
    font-weight: 700!important;
    height: 20px!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
    background-color: #eb3c96!important;
    color: #fff!important;
    border-radius: 4px 4px 0 0!important;
}


.orgchart .lines .downLine {
    background-color: #eb3c96!important;
    margin: 0 auto!important;
    height: 20px!important;
    width: 2px!important;
    float: none!important;
}

</style>
<div id="chart-container"></div>
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/orgchart/2.1.9/js/jquery.orgchart.min.js'></script>
<script type="text/javascript">
function Employee (ID,Name,Manager,Designation,Email) {
    this.ID = ID;
    this.Name= Name;
    this.Manager = Manager;
    this.Designation = Designation;
    this.Email=Email;
}
function GetOrgJSON(employeeList,manager){
    var note = '';
    var employeeProcessed=[];
    for(var i=0;i<employeeList.length;i  ){
        var objEmp = employeeList[i];      
        if(objEmp.Manager == manager && employeeProcessed.indexOf(objEmp.Name) < 0 ){
            note  = '{"name":"' objEmp.Name '",';
            note  = '"title":"' objEmp.Designation '"';
        
            employeeProcessed.push(objEmp.Name);
            var empUl = GetOrgJSON(employeeList,objEmp.ID);
            if(empUl !=""){
                note  =',"children": ['   empUl   ']';
            }
            note  ='},';
        }       
    } 
    return note;
}
(function($){
  $(function() {
    $.ajax({
        url: "https://XXXXXXX/sites/YYYYYYY/_api/web/lists(guid'XXXXXXXXXXXXXXXXXXXXXXXXXXX')/items?$select=ID,Title,Member/ID,Member/EMail,Member/Title,Manager/ID,Manager/Title,Title&$expand=Manager/Id,Member/Id &$top=1000",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var employeeList = [];
                $.each(data.d.results,function(i,employee){
                var Email=employee.Member.EMail;
                    var title = employee.Member.Title;
                    var ID = employee.Member.ID;
                    var manager = employee.Manager.ID!= undefined ? employee.Manager.ID:"0";
                    //var manager = employee.Manager.ID ? employee.Manager.ID : "0";
                    var designation=employee.designation;
                    var objEmp = new Employee(ID,title ,manager,designation,Email);
                    employeeList.push(objEmp);
                });
                var datascource = GetOrgJSON(employeeList,"0").replace(/},]/g,"}]");
                datascource=datascource.slice(0, datascource.length-1);
                
                //$('#chart-container').orgchart({
                //  'data' : JSON.parse(datascource),
                // 'nodeContent': 'title'
                //});
                

                 $('#chart-container').orgchart({
                 'data' : JSON.parse(datascource),
                 'depth': 2,
                 'nodeTitle': 'name',
                 'nodeContent': 'title',
                 'nodeID': 'id',
                 'createNode': function($node, data) {
                 var nodePrompt = $('<i>', {
                 'class': 'fa fa-info-circle second-menu-icon',
                  click: function() {
                $(this).siblings('.second-menu').toggle();
          }
        });
        var secondMenu = '<div ><img  src="img/avatar/'   data.id   '.jpg"></div>';
        $node.append(nodePrompt).append(secondMenu);
      }
    });             
                 
                 

                
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });  
  });
})(jQuery);

CodePudding user response：

Try adding below css in your stylesheet, referred from jQuery Org Chart (by inspecting DOM through browser Dev console)

.orgchart .node .second-menu {
    display: none;
    position: absolute;
    top: 0;
    right: -70px;
    border-radius: 35px;
    box-shadow: 0 0 10px 1px #999;
    background-color: #fff;
    z-index: 1;
}