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;
}
}
}
