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.PieChart(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:

bc8e08bf-81ba-4f1f-ba27-4d3afb00c9eb|0|.0

Tags: Google Visualization API, Google Charts, ASP.NET

How to make JQuery work with ASP.NET Web Content Form?

by Rohit 6. May 2011 16:50

In an ASP.NET application, making JQuery work with a Master Page and Web Content Form is often a matter of confusion for beginners. Since the Web Content Form doesn't have a HTML HEAD section, novice programmers often get baffled on where to put references to JQuery necessary files and CSS files.

Below I show you how simply you can make JQuery work in an application with a Master Page and a Web Content Form. To make this example work, you need to download few files and add their references to your Visual Studio project. This example uses Visual Studio 2008 with .NET Framework 3.5 SP1.

JQuery core file needed

jquery-1.5.1.min.js

You can download this file from JQueryUI website.

JQuery DatePicker plugin

I am taking a JQuery DatePicker plugin from Keith Wood's blog.

A DatePicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the DatePicker widget if it is no longer required.

We need two files of this plugin to display a simple DatePicker:

jquery.datepick.js, and
jquery.datepick.css

To start with:

Create a simple ASP.NET website using Visual Studio. As I said before, I am using Visual Studio 2008 for this example. (You can try this example with the latest version as well, but I have not tested this example on the latest version.)