Create Table

You will find the table, given below, used in our Application:

table

After creating the table, you can fill it, using the data, as shown below:

table

Create your MVC application

First, open Visual Studio. Click on File > New > Project and name your project, as shown below:

MVC application

MVC application

Creating ADO.NET Entity Data Model

You need to follow the steps, given below, to have the same result.

Right click on the project name. Click Add > Add New Item. In the dialog box displayed, select Data > click Add button.

ADO.NET Entity Data Model

ADO.NET Entity Data Model

After clicking Next button, we will have the dialog box, given below. You need to choose your Server name and select your database. Finally, click OK.

database

database

Finally, we see that EDMX model will generate Employees class.

model

Create a controller

Now, we proceed to create a controller. Right click on controller folder > Add > Controller > Enter Controller name. In our case, it is ‘HomeController’.

controller

HomeController.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace GoogleOrgChart.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  12. //Db Context
  13. private DbPersonnesEntities db = new DbPersonnesEntities();
  15. //
  16. // GET: /Home/
  18. public ActionResult Index()
  19. {
  20. return View();
  21. }
  23. public JsonResult GetEmployee()
  24. {
  25. var DbResult = db.Employees.ToList();
  27. return Json(DbResult, JsonRequestBehavior.AllowGet);
  28. }
  30. }
  31. }
As you can see, I am creating GetEmployee() action, that should be used to retrieve the data from Employees table and return the output in JSON format.

Creating a strongly typed view

We are going to create a strongly typed view.

view

Populate Google Organizational Chart from the database

Index.cshtml
  1. @model GoogleOrgChart.Employees
  3. @{
  4. ViewBag.Title = "Google Org Chart";
  5. }
  7. <h2 style="text-align: center;"> Google org chart - ASP.NET MVC 4 </h2>
  8. <div id="chartOrg">
  9. </div>
  11. @section scripts
  12. {
  13. <!-- Scripts JS -->
  14. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  15. <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  17. <script type="text/javascript">
  19. google.load("visualization", "1", { packages: ["orgchart"] });
  21. google.setOnLoadCallback(drawChart);
  23. function drawChart() {
  25. $.ajax({
  27. type: "POST",
  28. url: "Home/GetEmployee",
  29. data: '{}',
  30. contentType: "application/json; charset=utf-8",
  31. dataType: "json",
  32. success: function (dt) {
  34. var dataArray = [];
  36. $.each(dt, function (i, item) {
  37. dataArray.push([item.Employee_ID, item.Employee_Name, item.Title, item.ReportTo]);
  38. });
  42. var data = new google.visualization.DataTable();
  44. data.addColumn('string', 'Entity');
  45. data.addColumn('string', 'ReportEntity');
  46. data.addColumn('string', 'ToolTip');
  49. for (var i = 0; i < dataArray.length; i++) {
  51. var Employee_ID = dataArray[i][0].toString();
  52. var Employee_Name = dataArray[i][1];
  53. var Title = dataArray[i][2];
  54. var ReportTo = dataArray[i][3] != null ? dataArray[i][3].toString() : '';
  56. data.addRows([[{
  57. v: Employee_ID,
  58. f: Employee_Name + '<br/><b>' + Title + '</b>'
  59. }, ReportTo, Title]]);
  60. }
  63. var chart = new google.visualization.OrgChart($("#chartOrg")[0]);
  64. chart.draw(data, { allowHtml: true });
  66. },
  67. failure: function (dt) {
  68. alert(dt);
  69. },
  70. error: function (dt) {
  71. alert(dt);
  72. }
  73. });
  74. }
  75. </script>
  76. }
The first thing is to load the Google Organizational chart API, as given below:
  1. <!-- Scripts JS -->
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  4. <script type="text/javascript" src="https://www.google.com/jsapi"></script>
When we receive the AJAX response, an object of Google Visualization is created. This object must contain three columns respectively namely Entity, ReportEntity and ToolTip.

Note

Output
Output