Organizational Chart web part with Google api–SharePoint 2010

This article will give you the way to create organizational chart web part which generates the organizational chart on the fly by consuming the data from SharePoint list.

The whole idea is to create organizational chart when the requirement is like to show the organizational chart for different different departments depending on the selection of user and particularly when, the organizational chart nodes are not fixed. Means you have the only way to generate the chart on the fly, of course by consuming some data.

So, the simplest way is Google chart api, which is JavaScript base, use the Google api online( of course you can take it offline) and generates the chart.

My web part doing the same, there is one list which holds the data with parent-child relationship and link url when user clicks on node, where to navigate. Also, web part has three properties which will help to generate the hierarchical nodes. These properties are…..

 

Parent Field: this field will is to starting node of chart and will be used as title of node

Child Field: this field is being used as parent-child relationship. Do not confuse with name, because, this field indicates the parent-child relationship

Link Field: this field is url on title of node to navigate on click

List Name: This field is self explain. Remember that web part will always search this list in root of site collection.

 

Custom List

Now, lets discuss about the list. List is basically a custom list and need to add few fields. I have used the fields..

Title: this holds the Title of chart node( parent as well as child)

Child: This is look up filed of self list with Title field. This field will define the parent child relationship

Link:This is simple text field which hold the navigation url on click

Department: This is a choice field. Which defines the department name. As this list will hold the data for all the departments. i.e. Marketing, sales

 

Make sure that when you configure the web part custom properties, it must be synchronized with list fields. And you will get the chart something like this.

 

-Enjoy