Type 2: Organization Chart.

Simple Example from google: http://code.google.com/apis/chart/interactive/docs/gallery/orgchart.html

Step 1: Create new list Employees  include fields:

FirstName : Single line of text

LastName: Single line of text

FullName: Calculated (=FirstName&" "&LastName)

UserName: Person or Group

Position: Lookup (Positions List)

Department: Lookup (Departments List)

Company: Single line of text

MobilePhone: Single line of text

Manager: Person or Group

Step 2: Create new  Webpart Solution name is OrgChartForList_LeaveFormApp

Step 3: Create new Folder name is CustomScript

Step 4: Copy 2 files javascript (jquery-1.4.2.js, jquery.SPServices-0.5.6.js) to Folder Script and create new file script in folder Script name is ExternalJavaScript.js

Step 5: Copy code below to method CreateChildControls()

Literal literal = new Literal();

literal.Text = "<div id='OrgChat1'></div>";

this.Controls.Add(literal);

Page.ClientScript.RegisterClientScriptInclude("TheFirtScript", "wpresources/jquery-1.4.2.js");

Page.ClientScript.RegisterClientScriptInclude("TheSecondScript", "wpresources/jquery.SPServices-0.5.6.js");

            

Page.ClientScript.RegisterClientScriptInclude("TheThirtScript", "https://www.google.com/jsapi");

Page.ClientScript.RegisterClientScriptInclude("MainScript", "wpresources/ExternalJavaScript.js");

  

Step 6: Open file ExternalJavaScript.js  and copy Code javascript below to it

////////////////////////////////////////////////////////////////////////////////////////////////////////////

function GetPermission() {

    var manager = '';

    var teamLeader = '';

    var employee = '';

    try {

        $().SPServices({

            operation: "GetListItems",

            //webURL: "http://acer:8888",

            async: false,

            listName: "Employees",

            completefunc: function (xData, Status) {

                //alert(xData.responseXML.xml);

                $(xData.responseXML).find("z\\:row").each(function () {

                    var _position = $(this).attr("ows_Position");

                    _position = _position.split('#');

                    _position = _position[1];

                    var _userName = $(this).attr("ows_UserName");

                    _userName = _userName.split('#');

                    _userName = _userName[1];

                    var _manager = $(this).attr("ows_Manager");

                    _manager = _manager.split('#');

                    _manager = _manager[1];

                    if (_position == "Manager") {

                        manager += _userName + "|" + _position + "|" + _manager + "@";

                    }

                    else {

                        if (_position == "TeamLeader") {

                            teamLeader += _userName + "|" + _position + "|" + _manager + "@";

                        }

                        else {

                            if (_position == "Employee") {

                                employee += _userName + "|" + _position + "|" + _manager + "@";

                            }

                        }

                    }

                });

            }

        });

    }

    catch (e) { alert(e); }

    return manager + "*" + teamLeader + "*" + employee;

}

var display = GetPermission();

//alert(display);

display = display.split('*');

var manager = display[0];

var teamLeader = display[1];

var employee = display[2];

var managerDetail = manager.split('@');

var teamLeaderDetail = teamLeader.split('@');

var employeeDetail = employee.split('@');

////////////////////////////////////////////////////////////////////////////////////////////////////////////

google.load('visualization', '1', { packages: ['orgchart'] });

google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Name');

    data.addColumn('string', 'Manager');

    data.addColumn('string', 'ToolTip');

    data.addRows([

                        [{ v: 'CEO', f: 'CEO<div style="color:red; font-style:italic">President</div>' }, '', 'The President']

                      ]);

    for (var i = 0; i < managerDetail.length - 1; i++)//UserName|Position|Manager

    {

        var managerDetail_Detail = managerDetail[i].split('|');

        data.addRows([

                        [{ v: '' + managerDetail_Detail[0] + '', f: '' + managerDetail_Detail[0] + '<div style="color:red; font-style:italic">' + managerDetail_Detail[1] + '</div>' }, 'CEO', 'CEO']

                      ]);

    }

    for (var i = 0; i < teamLeaderDetail.length - 1; i++)//UserName|Position|Manager

    {

        var teamLeaderDetail_Detail = teamLeaderDetail[i].split('|');

        data.addRows([

                     [{ v: '' + teamLeaderDetail_Detail[0] + '', f: '' + teamLeaderDetail_Detail[0] + '<div style="color:red; font-style:italic">' + teamLeaderDetail_Detail[1] + '</div>' }, '' + teamLeaderDetail_Detail[2] + '', '']

              ]);

    }

    for (var i = 0; i < employeeDetail.length - 1; i++)//UserName|Position|Manager

    {

        var employeeDetail_Detail = employeeDetail[i].split('|');

        data.addRows([

                     ['' + employeeDetail_Detail[0] + '', '' + employeeDetail_Detail[2] + '', '']

              ]);

    }

    var chart = new google.visualization.OrgChart(document.getElementById('OrgChat1')); //chartdivCEWP

    chart.draw(data, { allowHtml: true });

}

Step 7: Copy 3 file in file Script (jquery-1.4.2.js, jquery.SPServices-0.5.6.js, ExternalJavaScript.js) to your  folder  wpresources with path below (C:\inetpub\wwwroot\wss\VirtualDirectories\8888\wpresources)

Step 8: Build and Deploy Project

Step 9: Open List Employees  in  sharepoint site

Step 10: Create data below

Step 11: Click Site Action | Edit Page | Insert WebPart | Custom | add webpart OrgChartForList

and see result below

Guide deploy project:

Download file .rar name is OrgChart  at here http://www.mediafire.com/file/sih58w6es9hg7od/OrganizationChart.rar include: List template (Positions, Departments, ReportOnChartLeaveForm) , Script, Project at here

Step 1: Open Project which you downloaded to your computer

Step 2: Click left mouse to project OrgChartForList_LeaveFormApp

Step 3: Click properties and change Site Url to your  site

Step 4: Build and Deploy Project

Step 5: Create new List base on list template (Positions, Departments, Employees)

Step 6: Verify Fields Position and Department in list Employees (delete and create new)

Step 7: Copy 3 files JS (jquery-1.4.2.js, jquery.SPServices-0.5.6.js, ReportChartForListLeaveForm.js) to folder  wpresources with path below C:\inetpub\wwwroot\wss\VirtualDirectories\8888\wpresources