In this article I am going to explain how to create google organization chart from database in ASP.NET. Step by step
Step 1
Create Database and table in sql server
Table Design
Column | DataType |
Id | Int |
Name | Varchar(50) |
Parent | Varchar(50) |
ToolTip | Varchar(50) |
Sample Data
Name | Parent | Tooltip |
Manager | Manager | |
Supervisor1 | Manager | Supervisor1 |
Supervisor2 | Manager | Supervisor2 |
Supervisor3 | Manager | Supervisor3 |
Employee1 | Supervisor1 | Employee1 |
|
Employee2 |
Supervisor1 |
Employee2 |
|
Employee23 |
Supervisor2 |
Employee3 |
Step 2
Open visual studio => Create new website => Add new page and give the suitable name
Step 3
Html Markup
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:Literal ID="ltrScript" runat="server"></asp:Literal>
<div>
<div id="chart_div"></div>
</div>
</form>
</body>
</html>
Namespace
using System;
using System.Collections.Generic;
using System.Linq; using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
Code Snippet
SqlConnection conn = new SqlConnection("Data source=ASHOK-PC\\SQLSERVER_NEW; Database=Practice;USER ID=sa;PWD=a;Pooling=true;"); protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindOrganaizationChart();
}
}
private void BindOrganaizationChart()
{
StringBuilder str=new StringBuilder();
DataTable dt = new DataTable();
try
{
string cmd = "select [id] ,[name] ,[parent] ,[ToolTip] from Sample"; SqlDataAdapter adp = new SqlDataAdapter(cmd, conn); adp.Fill(dt);
str.Append(@"<script type='text/javascript'> google.charts.load('current', { packages: ['orgchart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addRows([");
for (int i = 0; i < dt.Rows.Count; i++)
{
if (i == dt.Rows.Count-1)
{
str.Append(" ['" + dt.Rows[i]["name"].ToString() + "', '" + dt.Rows[i]["parent"].ToString() + "', '" + dt.Rows[i]["ToolTip"].ToString() + "']"); }
else
{
str.Append(" ['" + dt.Rows[i]["name"].ToString() + "', '" + dt.Rows[i]["parent"].ToString() + "', '" + dt.Rows[i]["ToolTip"].ToString() + "'],"); }
}
str.Append("]);");
str.Append(" var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));"); str.Append(" chart.draw(data, { allowHtml: true });");
str.Append("}");
str.Append("</script>");
ltrScript.Text = str.ToString();
}
catch
{ }
}
Results
John Smith
13-Feb-2016