I can get the orgchart to work with static data. I haven't been able to get it to work pulling data from the database.
The parts I have commented are the parts I can't get to work from the origional code.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>OrgChart</title>
<meta name="GENERATOR" content="CodeCharge Studio 5.1.1.18992">
<link rel="stylesheet" type="text/css" href="../Styles/{CCS_Style}/Style_doctype.css">
<link rel="stylesheet" type="text/css" href="../Styles/{CCS_Style}/jquery-ui.css">
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
google.charts.load('current', {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// $.ajax({
// type: "POST",
// url: "/OrgChartData.aspx.vb/GetChartData",
// data: '{}',
// 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');
data.addRows([
[{v:'Lorah Chetcuti', f:'<a href="EmployeeTraining.aspx?UserID=2">Lorah Chetcuti</a><div>General Manager</div><img width="100px" height="100px" src = "../EmployeePics/AnonymousHead.png"/>'}, '', 'General Manager'],
[{v:'Arnold Chetcuti', f:'<a href="EmployeeTraining.aspx?UserID=3">Arnold Chetcuti</a><div>Operations Manager</div><img width="100px" height="100px" src = "../EmployeePics/AnonymousHead.png"/>'},'Lorah Chetcuti', 'Operations Manager'],
[{v:'Jacob Chetcuti', f:'<a href="EmployeeTraining.aspx?UserID=4">Jacob Chetcuti</a><div>Plant Operator</div><img width="100px" height="100px" src = "../EmployeePics/AnonymousHead.png"/>'}, 'Arnold Chetcuti', 'Plant Operator'],
[{v:'Joshua Chetcuti', f:'<a href="EmployeeTraining.aspx?UserID=5">Joshua Chetcuti</a><div>Driver</div><img width="100px" height="100px" src = "../EmployeePics/AnonymousHead.png"/>'}, 'Arnold Chetcuti', 'Driver'],
]);
// 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() : '';
// var EmployeePic = r.d[i][4];
// data.addRows([
// [{ v: employeeId, f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + EmployeePic" />'
// }, reportingManager, designation]
// ]);
// }
// 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});
}
// },
// failure: function (r) {
// alert("Failure");
// },
// error: function (r) {
// alert("Error");
// }
// });
//}
</script>
</head>
<body>
<p align="center">{AdminHeader}</p>
<div id="chart" align="center">
</div>
<div>
</div>
</body>
</html>