Post
Ask Question

Display Data Hierarchically Using Google Visualization API in ASP.Net

Introduction

This article explains how to create a tree view, or we can say a hierarchical view, structure. We can also do this using a HTML Table but I have a better option from the Google. So this article explains how to execute Google logic to generate a hierarchical view where the data will come from the database.

Before proceeding further just have a look at the URL Visualization: Organizational Chart. This link will help you to understand how to implement our hierarchical view.
   
Let's create a project to understand how to use Visualization: Organizational Chart.
 
Before starting the project, create the database first. I am creating a database and in which I am creating 2 tables, DeptMaster and EmpMaster, such as in the following:
 
DeptMaster Table



EmpMaster Table

 
 
In the DeptMaster table I have the following departments that were inserted.

 
In the EmpMaster table I have the following employees that were inserted.

 
 
Now create an ASP.NET project and add a webform. Now in the webform create a div with a id (tree_div) and include the CDN of the Google API. You can use the following code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="HierarchicalViewInASP.Home" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['orgchart']}]}"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.         <div>  
  13.              <div id="tree_div"">  
  14.   
  15.              </div>  
  16.         </div>  
  17.     </form>  
  18. </body>  
  19. </html>  
And at the code behind use the following code:
  1. private void BindData()    
  2. {    
  3.     string str="";    
  4.     string qry = @"select DepartmentName from DeptMaster;select E.Emp_Name,D.DepartmentName from DeptMaster D     
  5.                    inner join EmpMaster E on E.Dept_ID=D.Dept_id";    
  6.     SqlConnection con = new SqlConnection(@"server=.\SQLExpress;DATABASE=HierarchicalRelation;integrated security=true;");    
  7.     SqlDataAdapter da = new SqlDataAdapter(qry, con);    
  8.     DataSet ds = new DataSet();    
  9.     da.Fill(ds);    
  10.     foreach (DataRow dr in ds.Tables[0].Rows)    
  11.     {    
  12.         str = str + "['" + dr["DepartmentName"].ToString() + "','University'],";    
  13.     }    
  14.     foreach (DataRow dr in ds.Tables[1].Rows)    
  15.     {    
  16.         str = str + "['" + dr["Emp_Name"].ToString() + "','" + dr["DepartmentName"].ToString() + "'],";    
  17.     }    
  18.     str.Trim(',');    
  19.   
  20.     String csname1 = "PopupScript";    
  21.     ClientScriptManager cs = Page.ClientScript;    
  22.     if (!cs.IsStartupScriptRegistered(typeof(Button), csname1))    
  23.     {    
  24.         StringBuilder scriptText = new StringBuilder();    
  25.         scriptText.Append("<script>");    
  26.         scriptText.Append("google.setOnLoadCallback(drawChart);");    
  27.         scriptText.Append("function drawChart() {");    
  28.         scriptText.Append("var data = new google.visualization.DataTable();");    
  29.         scriptText.Append("data.addColumn('string', 'Name'); data.addColumn('string', 'Manager');");    
  30.         scriptText.Append("data.addRows([" + str + "]);");    
  31.         scriptText.Append("var chart = new google.visualization.OrgChart(document.getElementById('tree_div'));");    
  32.         scriptText.Append("chart.draw(data, { allowHtml: true });");    
  33.         scriptText.Append("}");    
  34.   
  35.         scriptText.Append("</script>");    
  36.   
  37.         cs.RegisterStartupScript(typeof(Button), csname1, scriptText.ToString());    
  38.     }    
  39. }   
Output


Happy Coding :)


Similar Articles