How to create level based organisation chart using jquery ?

See more:

jQuery

WebAPI

1.Manager to Employee Relation is working fine

Main issue is Level based like

I am using these files orgchart.js and orgchart.css file.

I want to level based chart.

first level-1 to Level-7 th level like

https://github.com/dabeng/OrgChart.js[^]

Above link only Manager to Employee Relation
and i want to Level based manager to employee and levels.

Please provide level based org chart asap.

What I have tried:

https://github.com/dabeng/OrgChart.js
============================================

function GetChildrens(data, name, level) {
            //debugger;
            var aaa = [];
            $.each(data, function (i, j) {

                //if (level == j['Level']) {
                if (name == j['ReportingManager']) {
                    var datascource = {
                        'name': j['Name'],
                        'ReportingManager': j['ReportingManager'],
                        'title': j['Designation'],
                        'fname': j['EmployeeId'],
                        'imgpath': j['IMGAEPATH'],
                        'Level': j['Level'],
                        'children': GetChildrens(data, j['EmployeeId']),
                    }
                    aaa.push(datascource);
                }

                //}

            });
            return aaa;
            //console.log(aaa);
        }

var _Org = [];
        $(document).ready(function () {
            //debugger;
            $.ajax({
                url: localStorage.API + "/api/Login/PostGetorgchart",
                method: 'POST',
                dataType: 'json',
                data: {
                    USER_ID: 0
                },
                success: function (Jdata) {
                    // debugger;
                    var obj = ''; _Org = []; _Org = Jdata[0];
                    $.each(Jdata[0], function (i, j) {
                        if (j['ReportingManager'] == '' || j['ReportingManager'] == '0') {
                            obj = j;
                        }
                    });
                    var datascource = {
                        'fname': obj['EmployeeId'],
                        'name': obj['Name'],
                        'title': obj['Designation'],
                        'imgpath': obj['IMGAEPATH'],
                        'Level': obj['Level'],
                        'ReportingManager': obj['ReportingManager'],
                        'children': GetChildrens(Jdata[0], obj['EmployeeId'], obj['Level']),

                    }


                    $(function () {
                        $('#chart-container').html('');
                        var oc = $('#chart-container').orgchart({
                            'data': datascource,
                            'depth': 2,
                            'nodeContent': 'title',
                            'exportButton': true,
                            'exportFilename': 'MyOrgChart',
                            //'direction': 'r2l',
                            //'direction': 'l2r',
                            //'direction': 'b2t',

                            //imgae

                            'nodeID': 'id',
                            'createNode': function ($node, data) {
                                var secondMenuIcon = $('<i style="display:none;">', { //<i>
                                    'class': 'fa fa-info-circle second-menu-icon',
                                    click: function () {
                                        $(this).siblings('.second-menu').toggle();
                                    }
                                });

                                //style="display: none;" fa fa-info-circle second-menu-icon
                                //var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.fname + '.jpg"></div>';
                                //var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.imgpath + '"></div>';

                                var imgpath1 = window.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') - 5) + "/img/employee/" + data.imgpath + "";
                                var imgdefault1 = window.origin + window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') - 5) + "/img/employee/DEFAULT.jpg";
                                $.ajax({
                                    url: imgpath1,
                                    //type: "HEAD",
                                    crossDomain: true,

                                    success: function () {
                                        //debugger;
                                        //var secondMenu = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + data.imgpath + '"></div>';
                                        var secondMenu = '<div class="second-menu" style="background-image:url(' + imgpath1 + ')"></div>';
                                        $node.append(secondMenuIcon).append(secondMenu);
                                    },
                                    error: function () {
                                        //var secondMenu1 = '<div class="second-menu"><img id="imgsrc" class="employee" src="../img/employee/' + "DEFAULT.jpg" + '"></div>';
                                        var secondMenu1 = '<div class="second-menu"style="background-image:url(' + imgdefault1 + ')"></div>'

                                        $node.append(secondMenuIcon).append(secondMenu1);
                                    },
                                });

                                //$node.append(secondMenuIcon).append(secondMenu);
                            }

                            // level based
                            //addChildren: function ($node, data) {
                            //    this.buildChildNode($node.closest('table'), data);
                            //    if (!$node.children('.bottomEdge').length) {
                            //        $node.append('<i class="edge verticalEdge bottomEdge fa"></i>');
                            //    }
                            //    if (!$node.find('.symbol').length) {
                            //        $node.children('.title').prepend('<i class="fa ' + this.options.parentNodeSymbol + ' symbol"></i>');
                            //    }
                            //    if (this.isInAction($node)) {
                            //        this.switchVerticalArrow($node.children('.bottomEdge'));
                            //    }
                            //},
                            //// build the parent node of specific node
                            //buildParentNode: function ($currentRoot, data) {
                            //    debugger;
                            //    data.relationship = data.relationship || '001';
                            //    var $table = $('<table>')
                            //        .append($('<tr>').append($('<td colspan="2">').append(this.createNode(data))))
                            //        .append('<tr class="lines"><td colspan="2"><div class="downLine"></div></td></tr>')
                            //        .append('<tr class="lines"><td class="rightLine"></td><td class="leftLine"></td></tr>');
                            //    this.$chart.prepend($table)
                            //        .children('table:first').append('<tr class="nodes"><td colspan="2"></td></tr>')
                            //        .children('tr:last').children().append(this.$chart.children('table').last());
                            //},
                            //level b

                        });

                        // Remove style start
                        // $("#chart-container").removeAttr("style")
                        $('#chart-container').css('overflow', 'auto!important');
                        $('.orgchart').css('overflow', 'auto!important');
                        
                        //$('.orgchart').css('display', 'block!important');



                    });


                }

            });

        });