Google org chart + Asp.net C# : Create simple organization chart with database [ MS SQL Server]

9
Our Reader Score
[Total: 0 Average: 0]
 Organization Chart: This tutorial explains using Google Org Chart how we create a simple organization chart in Asp.net web application (webform.aspx page) .i.e using Google Visualization Organizational.

While working on my one project, I had a similar requirement, where I have to show our Company organizational structure with live data from database MS SQL Server.

Display corporate org chart where the chart gets generated based on hierarchical relationship from employee to employee corresponding to manager-id (Head).

I googled a little bit on it, and then I find Google Visualization Organizational Chart, i.e., by using Google Visualization API (google org chart) we create a simple Org Chart.

What is Org Chart?

Org charts are diagrams of a hierarchy of nodes, commonly used to portray superior/subordinate relationships in an organization.

A family tree is a type of org chart. Let’s now head to the tutorial step by step.

Example:Google org chart in asp.net c# example


Step to create Google Org Chart in Asp.net C#.

  1. Database: Having employee, manager relationship.
  2. Initialize Google org chart.
  3. C#: Create Webmethod, which returns JSON result.
  4. Populate google org chart with database via jQuery ajax call

# Create database having table employee, manager relationship

I have created a sample employee table which contains following columns id_emp, employee_name, gender, manager_id, designation. Here each employee has manager_id to whom he/she is to reporting check Fig 1 for employee table schema and Fig 2 containing data. Fig 1.Employee_table Fig 2.Employee_table_with_data Before writing any code, first we need to create a select query which shows empName, empId, managerName, managerID, and designation. For better SQL understanding check SQL self-join, inner-join, outer-join article by Pinal Dave ( sqlauthority.com ) Our Select query looks like as shown below. Employee manager table display google organization chart We are done with our database part, let’s head to the coding part 🙂


# Initialize Google org chart:

Google API loader allows you to import easily one or more APIs and specify additional settings (such as language, location, API version, etc.) applicable to your needs. For using Google organization chart first, we need to import Google JSAPI library in our Webpage (.aspx file).

Then next will load the Google API with Google.load(moduleName, moduleVersion, optionalSettings), where

  • moduleName: calls the particular API module you wish to use on your page.
  • moduleVesion:: is the version number of the module you want to load.
  • optionalSettings:  specifies all optional configuration options for the API you are loading as a JavaScript object literal.

Here in our case we want to create org chart so our moduleName would be visualization and in optionalSettings will set orgchart as packages, code looks like as written below


# Create Webmethod which returns JSON result.

Am assuming you are aware of asp.net Webservice Webmethod (.asmx file ) or you can check how to make a simple jQuery ajax call which returns JSON data in asp.net for better understanding.

Here first, we create a class object named as Google_org_data containing properties as the employee, manager, and their ids as shown in below code.

Now we write a Webmethod which returns Google_org_data object

We are done with server side code, now get back to some client side coding ( jQuery ).


# jQuery ajax call and populate Google org chart with database:

Here we have button tag and on jQuery click event it makes an ajax request and fill organizational chart. Final code looks like as written below

Yeah, we are done here’s the output

# Output:

Google org chart in asp.net c# example   Reference Link:

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!


Get your Printable Copy

9 COMMENTS

  1. Thanks for the great example, the issue I have however is that I need to pass through a DepartmentID to the webmethod from a dropdownlist.

    Any advise?

  2. This is a very helpful Add, for the nodes with children items how can you make the main node collapse or expand if you want to hide its children items in MVC(KendoDiagram)

  3. Very nice. Easy to follow, and very well written. I actually was getting ready to Google something similar to this, and won’t need to now, because I can just modify what you’ve shown above to fit my needs.

    Thank you!

LEAVE A REPLY