orgchart splitting into three, and displaying Id's on the chart

Question

Here's what my chart displays:

Here's my Position tables:

My position table

cant really seem to figure out whats the problem.

-Ive got a button and a dropdown, when an item is selected from the dropdown and button is selected an orgchart must be displayed. The chart displays but the problems are:

-orgchart splitting into three charts

-And it keeps showing some Id's

-here's my code:

    google.load("visualization", "1", { packages: ["orgchart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        $("#btnGetOrganogram").on('click', function (e) {
            debugger
            $ddlDepOrgano = $('[id$="ddlDepOrgano"]').val();
            if ($ddlDepOrgano != "") {
                var jsonData = $.ajax({
                    type: "POST",
                    url: '/services/eleaveService.asmx/GetChartData',
                    data: "{'depid':'" + $ddlDepOrgano + "'}",
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    success: OnSuccess_getOrgData,
                    error: OnErrorCall_getOrgData
                });

                function OnSuccess_getOrgData(repo) {

                    var data = new google.visualization.DataTable(jsonData);
                    data.addColumn('string', 'Name');
                    data.addColumn('string', 'Manager');
                    data.addColumn('string', 'ToolTip');

                    var response = repo.d;
                    for (var i = 0; i < response.length; i++) {
                        var row = new Array();
                        var Pos_Name = response[i].Pos_Name;
                        var Pos_Level = response[i].Pos_Level;
                        var Emp_Name = response[i].Emp_Name;
                        var Pos_ID = response[i].Pos_ID;
                        var Emp_ID = response[i].Emp_ID;
                        data.addRows([[{
                            v: Emp_ID,
                            f: Pos_Name
                        }, Pos_Level, Emp_Name]]);

                    }

                    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
                    chart.draw(data,{ allowHtml: true });
                }

                function OnErrorCall_getOrgData() {
                    console.log("something went wrong ");
                }
            } else {
                bootbox.alert("Invalid Department Name please try again.");
            }
            e.preventDefault();
        });
    }

Answer 1

according to the data format , Column 1 should be the ID of the manager, which is used to build the tree...

Column 1 - [optional] The ID of the parent node. This should be the unformatted value from column 0 of another row. Leave unspecified for a root node.

looking at the data table image posted, this should be in column --> Mngr_ID

as such, recommend the following changes when loading the data...

for (var i = 0; i < response.length; i++) {
    var row = new Array();
    var Pos_Name = response[i].Pos_Name;
    var Emp_Name = response[i].Emp_Name;
    var Emp_ID = response[i].Emp_ID;
    var Mngr_ID = response[i].Mngr_ID;
    data.addRow([
      {
        v: Emp_ID,
        f: Pos_Name
      },
      Mngr_ID,
      Emp_Name
    ]);
}