Hi rani,
Check this example. Now please take its reference and correct your code.
For accessing file from webroot path you need to allow access to Static Files in ASP.Net Core inside the Startup.cs class.
Refer below article for more details.
Database
I have made use of the following table EmployeesHierarchy with the schema as follows.
I have already inserted few records in the table.
You can download the database table SQL by clicking the download link below.
Download SQL file
Model
public class EmployeesHierarchy
{
[System.ComponentModel.DataAnnotations.Key]
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Designation { get; set; }
public int? ReportingManager { get; set; }
}
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
public IActionResult ChartData()
{
List<object[]> chartData = this.Context.EmployeesHierarchy
.Select(x => new object[] {
x.EmployeeId,
x.Name,
x.Designation,
x.ReportingManager
}).ToList();
return Json(chartData);
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
#chart span {
color: red;
font-size: 8pt;
font-style: italic;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['orgchart'] });
google.charts.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Home/ChartData",
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.length; i++) {
var employeeId = r[i][0].toString();
var employeeName = r[i][1];
var designation = r[i][2];
var reportingManager = r[i][3] != null ? r[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 });
}
});
}
</script>
<div id="chart"></div>
</body>
</html>
Screenshot
