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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Organization Chart</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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;
                data.addRow(row);
            }
            var options = {
                title: 'My Office Hierarchy'
            };
            chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
    <script type="text/javascript">
        $(document).ready(drawChart);
      
    </script>
</head>
<body>
    <form id="MainForm" runat="server">
    <div id="chart_div" style="width: 1000px; height: 600px;">
    </div>
    <asp:HiddenField ID="hdData" runat="server" />
    </form>
</body>
</html>

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 (3) -

Anuradha
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

ashutosh
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.

Add comment

biuquote
  • Comment
  • Preview
Loading

About Rohit Prakash

Software Craftsman @ Fortune 100 Company. Technical Reviewer of few programming books.

A Single, Writer, Reader and Adventurist.

You can reach me at:

rohit [at] irohitable.com

-----------------------------------------

LinkedIn:

in.linkedin.com/in/rohitpkhare

Twitter:

@BuzzRohit

-----------------------------------------

Month List

Protected by Copyscape Web Plagiarism Software