Google Organizational Chart Error: Cannot read property length of undefined

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hello everyone,

I am working on an MLM (Multi Level Marketing) project in that I have to develop an organisational chart. I have searched in google and found this below link. I want to acheive the same, for testing purpose have copied the code in a test.aspx page but the getting error warning and a error in browser console as follows

Warning: 

jsapi:23 A parser-blocking, cross site (i.e. different eTLD+1) script, https://www.google.com/uds/?file=visualization&v=1&packages=orgchart, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.

Error: 

Uncaught TypeError: Cannot read property 'length' of undefined at Object.success (Test:60) at l (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at T (jquery.min.js:2) at XMLHttpRequest.r (jquery.min.js:2)

Create Family Tree Hierarchy Chart from Database in ASP.Net using C# and VB.Net

I have searched a lot but unable to figure it out. kindly help me getting out of this. Any suggestions will be appriciated.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="MLM.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
   <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 type="text/javascript">
        google.load("visualization", "1", { packages: ["orgchart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "Test.aspx/GetChartData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Entity');
                    data.addColumn('string', 'ParentEntity');
                    data.addColumn('string', 'ToolTip');
                    for (var i = 0; i < r.d.length; i++) {
                        var employeeId = r.d[i][0].toString();
                        var employeeName = r.d[i][1];
                        var designation = r.d[i][2];
                        var reportingManager = r.d[i][3] != null ? r.d[i][3].toString() : '';
                        data.addRows([[{ v: employeeId,
                            f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + employeeId + '.jpg" />'
                        }, reportingManager, designation]]);
                    }
                    var chart = new google.visualization.OrgChart($("#chart")[0]);
                    chart.draw(data, { allowHtml: true });
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart">
    </div>
    </form>
</body>
</html>

 

[WebMethod]
public static List<object> GetChartData()
{
    string query = "SELECT MemberId, Name, ParentId";
    query += " FROM tbl_MemberTree";
    string constr = ConfigurationManager.ConnectionStrings["mlmdb"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<object> chartData = new List<object>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new object[] { sdr["MemberId"], sdr["Name"], sdr["ParentId"] });
                }
            }
            con.Close();
            return chartData;
        }
    }
}

 

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago

Hi AbdulHaque,

I have checked your code.

Its working. You need to change some code.

For populating DataTable should contain column value for Entity, ParentEntity, ToolTip.

But you are passing wrong value.

You web method returns 3 columns MemberId, Name, ParentId.

But in JavaScript you are fetching wrong column index.

AbdulHaque says:
var employeeId = r.d[i][0].toString();
                        var employeeName = r.d[i][1];
                        var designation = r.d[i][2];
                        var reportingManager = r.d[i][3] != null ? r.d[i][3].toString() : '';
                        data.addRows([[{ v: employeeId,
                            f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + employeeId + '.jpg" />'
                        }, reportingManager, designation]]);

Chenge the above with the below code.

var employeeId = r.d[i][0].toString();
var employeeName = r.d[i][1];
var reportingManager = r.d[i][2] != null ? r.d[i][2].toString() : '';
data.addRows([[{ v: employeeId,
    f: employeeName + '<div><img src = "Pictures/' + employeeId + '.jpg" /></div>'
}, reportingManager, employeeName]]);