ASP.NET

Using Google Organization Chart with ASP.NET MVC 4

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;  
  6.   
  7. namespace GoogleOrgChart.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.   
  12.         //Db Context  
  13.         private DbPersonnesEntities db = new DbPersonnesEntities();  
  14.   
  15.         //  
  16.         // GET: /Home/  
  17.   
  18.         public ActionResult Index()  
  19.         {  
  20.             return View();  
  21.         }  
  22.   
  23.         public JsonResult GetEmployee()  
  24.         {  
  25.             var DbResult = db.Employees.ToList();  
  26.   
  27.             return Json(DbResult, JsonRequestBehavior.AllowGet);  
  28.         }  
  29.   
  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  
  2.   
  3. @{  
  4.     ViewBag.Title = "Google Org Chart";  
  5. }  
  6.   
  7. <h2 style="text-align: center;"> Google org chart - ASP.NET MVC 4 </h2>  
  8. <div id="chartOrg">  
  9. </div>  
  10.   
  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>  
  16.   
  17. <script type="text/javascript">  
  18.   
  19. google.load("visualization", "1", { packages: ["orgchart"] });  
  20.   
  21. google.setOnLoadCallback(drawChart);  
  22.   
  23. function drawChart() {  
  24.   
  25.     $.ajax({  
  26.   
  27.         type: "POST",  
  28.         url: "Home/GetEmployee",  
  29.         data: '{}',  
  30.         contentType: "application/json; charset=utf-8",  
  31.         dataType: "json",  
  32.         success: function (dt) {  
  33.   
  34.             var dataArray = [];  
  35.   
  36.             $.each(dt, function (i, item) {  
  37.                 dataArray.push([item.Employee_ID, item.Employee_Name, item.Title, item.ReportTo]);  
  38.             });  
  39.   
  40.               
  41.   
  42.             var data = new google.visualization.DataTable();  
  43.   
  44.             data.addColumn('string', 'Entity');  
  45.             data.addColumn('string', 'ReportEntity');  
  46.             data.addColumn('string', 'ToolTip');  
  47.   
  48.              
  49.             for (var i = 0; i < dataArray.length; i++) {  
  50.   
  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() : '';  
  55.   
  56.                 data.addRows([[{  
  57.                     v: Employee_ID,  
  58.                     f: Employee_Name + '<br/><b>' + Title + '</b>'  
  59.                 }, ReportTo, Title]]);  
  60.             }  
  61.   
  62.   
  63.             var chart = new google.visualization.OrgChart($("#chartOrg")[0]);  
  64.             chart.draw(data, { allowHtml: true });  
  65.   
  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 -->          
  2.         
  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

 

  • Entity: This column consists of two properties.

    • V: It stores the unique identifier of the entity. In our case, it is Employee_ID.
    • F: It stores the details of the entity. In this example, we use Employee_Name, Title.

  • ReportEntity: This column stores the unique identifier of the ReportEntity. In this example, it is ReportTo.

  • ToolTip: It is used to bind ToolTip to the entity (it is not mandatory).

Output
Output

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found