Sometimes in SharePoint we need to visualize hierarchical  data as organizational chart. Prerequisites: not to use  Flash or Silverlight technologies here.

So, in our scenario for storage of organization structure will be used SharePoint List based on Custom List , for rendering engine  Google Chart Tools.

Implementation

First, let’s take a look at list’s schema for storing organizational structure

From Google Charts library we’ll use Organizational Chart package only.

1. Google Charts Tools loading and package initialization

2. Fetch data using SharePoint Web Service from list that contains organizational structure

3. Bind data source and draw chart

Usage

Result page with Org Structure rendered as Chart in List View