IRohitable | Creating Organization Hierarchy in ASP.NET using Google Organizational Chart

Creating Organization Hierarchy in ASP.NET using Google Organizational Chart

by Rohit 8. June 2013 14:48

Google Charts is a collection of wide variety of charts that are exposed as a Javascript library that you just need to embed in your web page. From simple line charts to complex hierarchical tree, the library provides a large number of ready-to-use chart types.

The most common way to use Google Charts is by referencing the Javascript API in your web page. All chart types are populated with data using the DataTable class, making it easy to switch between chart types.

In this post I will show you how to create Organization Hierarchy using Google Visualization API Organizational Chart. Instead of showing how to create the hierarchy using static data, I will show you how to populate DataTable dynamically using SQL Server and C# and later passing this DataTable as JSON object to Google Chart to generate the hierarchy.

To start with let us add a Web Form in our ASP.NET solution. The HTML markup should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head id="Head1" runat="server">
    <title>Organization Chart</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">

        google.load("visualization", "1", { packages: ["orgchart"] });

        function drawChart() {
            var hdValue = document.getElementById("<%=hdData.ClientID%>").value;
            var response = $.parseJSON(hdValue);
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Employee');
            data.addColumn('string', 'Manager');
            for (var i = 0; i < response.length; i++) {
                var row = new Array();
                row[0] = response[i].Employee;
                row[1] = response[i].Manager;
            var options = {
                title: 'My Office Hierarchy'
            chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            chart.draw(data, options);
    <script type="text/javascript">
    <form id="MainForm" runat="server">
    <div id="chart_div" style="width: 1000px; height: 600px;">
    <asp:HiddenField ID="hdData" runat="server" />

Once the above HTML markup is ready, let us put some code in the code-behind to pass data from C# DataTable to the Google Chart class as a JSON object:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Web.Script.Serialization;

public partial class OrgChart : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            StringBuilder data = new StringBuilder();
            JavaScriptSerializer json = new JavaScriptSerializer();
            json.Serialize(GetHierarchyData(), data);
            hdData.Value = data.ToString();
    private List<Hierarchy> GetHierarchyData()
	DataTable dt = new DataTable();

	dt = GetDataFromSqlServer();

        List<Hierarchy> hierarchy = new List<Hierarchy>
		for(int i=0; i< dt.rows.count; i++)
		   hierarchy.Items.Add(new Hierarchy{Employee=dt.rows[i].columns[0].ToString(), Manager=dt.rows[i].columns[1].ToString()});
        return hierarchy;


    public sealed class Hierarchy
        public string Employee { get; set; }
        public string Manager { get; set; }



In the above code, you can replace the method: GetDataFromSqlServer with your own method which retrieves data with two columns, Employee_Name and Manager_Name.

Finally the hierarchy generated looks like this:


Tags: , ,

ASP.NET | Google Charts | Technology

Comments (7) -

5/10/2014 2:36:18 PM #

What should be database scema / table

Ashok yadav
8/16/2014 5:24:51 PM #

very help full without creating web service

9/18/2014 7:00:27 PM #

I want to make something like this:

When we click on child, the child will open as parent, and will show sub-childs beneath it.

ruchir saxena
1/16/2015 5:52:53 PM #

hello sir ,
sir my data from Sql server is in this format --
EmployeeID  Employname  ManagerID
    1                       Ram                2
    2                       Ajay                  1
    3                       Kunal                 1
The above data is in datatable  , sir how can i use ur above code  to represent organisational structure
,pls help ..

Nandkishor Patil
3/31/2015 9:53:54 AM #

Dear Rohit Sir,
This Helps Me Lot Without any Panic....
Have Nice Time..............

8/14/2015 3:57:57 PM #

I try to use it to create my organization chart
but it show a big chart .
how can i resize this chart ?
thank you.

7/17/2016 2:08:53 AM #

function getdatafromsql is not working for me
i pasted the code bt it is not exist the current contex
so how to solve it

Add comment

  • Comment
  • Preview

About Rohit Prakash

Software Craftsman and Technology Enthusiast (not a Guru). Technical Reviewer of a book on open-source programming IDE. Cyber Security Geek.

You can reach me at:

rohit [at]



Month List

Protected by Copyscape Web Plagiarism Software