Display Data Hierarchically using Google Visualization API in ASP.NET


Displaying  Hierarchical Data is very a important in large organisations to show the organisational  Hierarchy.  I have developed a a sample page which will show you the Company Manager Levels/ Department Levels  Hierarchically using Google Visualization API charting tool in asp.net.
http://www.myacademicproject.com/

Organisationchart.aspx

<html>
<head>
<script type=’text/javascript’ src=’https://www.google.com/jsapi’></script&gt;
<%
sAccessCredentials ac = new sAccessCredentials();
System.Data.DataTable dt = new System.Data.DataTable(“OrgChart”);
dt = ac.GetOrganizationChart();
Response.Write(“<script type=’text/javascript’>”);
Response.Write(“google.load(‘visualization’, ‘1’, { packages: [‘orgchart’] });”);
Response.Write(“google.setOnLoadCallback(drawChart);”);
Response.Write(“function drawChart() {” +
” var data = new google.visualization.DataTable();” +
” data.addColumn(‘string’, ‘Name’);” +
” data.addColumn(‘string’, ‘Manager’);” +
” data.addColumn(‘string’, ‘ToolTip’);”); %>
<%

string f4 = “Shekhar”;
string top=string.Empty;
StringBuilder sb = new StringBuilder(“data.addRows([“);
string MainDept=string.Empty;
string SubDept =string.Empty;
for (int i = 0; i < dt.Rows.Count; i++)
{

if (i != dt.Rows.Count – 1) //0!=10
{
MainDept = dt.Rows[i][“MainDept”].ToString(); //i = 0: Main:View Sub:ViewList
SubDept = dt.Rows[i][“SubDept”].ToString(); //i=1:
if (i == 0)
{
sb.Append(“[‘” + MainDept + “‘,”,” + “‘” + “Top” + “‘],”);
sb.Append(“[‘” + SubDept + “‘,” + “‘” + MainDept + “‘,'” + “tooltip” + “‘],”);
}
if (dt.Rows[i][“MainDept”] == dt.Rows[i][“MainDept”])
{
SubDept = dt.Rows[i][“SubDept”].ToString();
sb.Append(“[‘” + SubDept + “‘,” + “‘” + dt.Rows[i][“MainDept”].ToString() + “‘,'” + “tooltip” + “‘],”);
}
}
else
{
sb.Append(“[‘” + SubDept + “‘,” + “‘” + MainDept + “‘,'” + “tooltip” + “‘]”);
}
}
sb.Append(“]);”);
Response.Write(sb.ToString()+” var chart = new google.visualization.OrgChart(document.getElementById(‘chart_div’));”+
” chart.draw(data, { allowHtml: true });”+
” }”+
“</script>”); %>

</head>
<body>
<div id=’chart_div’>
</div>
</body>

</html>

O/P:

Organisational_Chart
Source:
https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events

function drawOrgChartAndTable() {
var data = google.visualization.arrayToDataTable([
[‘Name’,  ‘Manager’],
[‘Umesh’,  null],
[‘Shekhar’,   ‘Umesh’],
[‘Somnath’, ‘Umesh’],
[‘Ranga’,   ‘Umesh’],
[‘Mayur’, ‘Ranga’]
]);

var orgchart = new google.visualization.OrgChart(document.getElementById(‘orgchart’));
orgchart.draw(data, null);

var table = new google.visualization.Table(document.getElementById(‘table’));
table.draw(data, null);

// When the table is selected, update the orgchart.
google.visualization.events.addListener(table, ‘select’, function() {
orgchart.setSelection(table.getSelection());
});

// When the orgchart is selected, update the table visualization.
google.visualization.events.addListener(orgchart, ‘select’, function() {
table.setSelection(orgchart.getSelection());
});
}

O/P:
CEO

Happy Coding….! 🙂

Advertisements

4 thoughts on “Display Data Hierarchically using Google Visualization API in ASP.NET

  1. Hi,No.I would like to connect retrive data from MS SQLSerevr and populate google Organization chart.When I code,calling JavaScript in ASPX.CS pages traditionally support for Server script not for Javascript extensively.For instance,

    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:’Mike’, f:’MikePresident’}, ”, ‘The President’], [{v:’Jim’, f:’JimVice President’}, ‘Mike’, ‘VP’], [‘Alice’, ‘Mike’, ”], [‘Bob’, ‘Jim’, ‘Bob Sponge’], [‘Carol’, ‘Bob’, ”] ]); var chart = new google.visualization.OrgChart(document.getElementById(‘chart_div’)); chart.draw(data, {allowHtml:true}); }

    Double quotes are not recognized by .Net compiler.
    “color:red ” Could you try above the automate from SQL server intead of locally creating table which likely to be loaded from SQL Server DB then build google organization chart.

    Do you have any different apporach to resolve this issue?

    Many Thanks
    Venkat

  2. Hi
    Is there a way to use employee pictures then employee names. When i reference a column with emp name this chart works fine but when i reference column with emp pictures this chart doesnt work.

    Thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s