Hi there,
I am trying to use the Google org chart, unfortunately the given sample code in aspforums.net is outdated.
I tried to modify my code accordingly, but I can't make it right.
Here is my HTML code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//google.load("visualization", "1", { packages: ["orgchart"] });
google.charts.load('current', { packages: ["orgchart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "Structure.aspx/GetChartData",
data: '{LoginId:"'+ <%=Session("LoginId")%> +'"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
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>' }, reportingManager, designation]]);
}
},
failure: function (r) {
alert('Failed:' + r.d);
},
error: function (r) {
alert('Error:' + r.d);
}
})
//var data = new google.visualization.DataTable();
//data.addColumn('string', 'Name');
//data.addColumn('string', 'Manager');
//data.addColumn('string', 'ToolTip');
//data.addRows([
// [{ v: 'Lorah Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=2">Lorah Chetcuti</a><div>General Manager</div>'}, '', 'General Manager'],
// [{ v: 'Arnold Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=3">Arnold Chetcuti</a><div>Operations Manager</div>' }, 'Lorah Chetcuti', 'Operations Manager'],
// [{ v: 'Jacob Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=4">Jacob Chetcuti</a><div>Plant Operator</div>' }, 'Arnold Chetcuti', 'Plant Operator'],
// [{ v: 'Joshua Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=5">Joshua Chetcuti</a><div>Driver</div>' }, 'Arnold Chetcuti', 'Driver'],
//]);
// Create the chart.
var chart = new google.visualization.OrgChart(document.getElementById('chart'));
// Draw the chart, setting the allowHtml option to true for the tooltips.
chart.draw(data, { allowHtml: true });
}
</script>
<!-- begin #content -->
<div id="content" class="content">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="row">
<div id="chart">
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
VB Code
<WebMethod()>
Public Shared Function GetChartData(ByVal LoginId As String) As List(Of Object)
Dim query As String = "[dbo].[q_MembersTree] " + LoginId
Dim constr As String = clsDALSql.GetConString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Dim chartData As New List(Of Object)()
cmd.CommandType = CommandType.Text
cmd.Connection = con
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
chartData.Add(New Object() {sdr("LoginId"), sdr("Fullname"), sdr("HLevel"), sdr("PlacementId")})
End While
End Using
con.Close()
Return chartData
End Using
End Using
End Function
Your advice is highly appreciated.