Click here to Skip to main content
15,885,365 members
Search within:


organizational hierarchy chart
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have to show a editable organizational hierarchy chart based on the data from database in asp.net version 2.0 (vs 2008). Desperately in need of some guidelines

Some definitive code structures would be very appreciated.
Posted
Add a Solution
Comments
Maciej Los 3-Sep-15 1:44am    
What have you tried? Where are you stuck?
star_tasneem 3-Sep-15 1:53am    
<script src="http://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>



</script>
<script>
google.load('visualization', '1', { packages: ['table', 'orgchart'] });
function draw() {
$.ajax({
type: "POST",
url: "Service.svc/",
data: "{}",
dataType: "json",
contentType: "application/json",
success: function (x, textStatus) {
var data = JSON.parse(x);

if ((emp_count = data.length) > 0) {
var l_data_table = new google.visualization.DataTable();
l_data_table.addColumn('string', 'Name');
l_data_table.addColumn('string', 'Manager');
l_data_table.addRows(emp_count);

for (i = 0; i < emp_count; i++) {
l_data_table.setCell(i, 0, data[i].name);
l_data_table.setCell(i, 1, data[i].Manger);
}

var chart = new google.visualization.OrgChart(document.getElementById('org_div'));
chart.draw(l_data_table, { allowHtml: true });


}
}
});
}

$(document).ready(function () {
draw();

});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="org_div"></div>
</form>
</body>

1 solution

There are some different possibilities. HTML5 provides two choices: Canvas or SVG. SVG which can be directly embedded in HTML and both can be manipulated using JavaScript, and Canvas graphics should be completely build with JavaScript from scratch. Please see:
https://en.wikipedia.org/wiki/Scalable_Vector_Graphics[^],
https://developer.mozilla.org/en-US/docs/Web/SVG[^],
https://en.wikipedia.org/wiki/HTML5[^],
https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction[^],
http://en.wikipedia.org/wiki/Html5_canvas[^],
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API[^],
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial[^],
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes[^].

Without one of these two advanced HTML features, other solutions looks really boring. You can create the diagrams on the fly using ASP.NET on server side; create bitmap resources out of data using System.Drawing, System.Drawing.Imaging and send them on postback in HTTP response. It would be much harder to make the diagram elements interactive. You would have to handle mouse/keyboard events in JavaScript and create a postback on every smallest move. To send HTTP requests on such interactive moves, you can use AJAX. It will incur considerable performance costs. Nevertheless, such system do exists. The trend is to get away from such architectures and shift to client-side processing, which offers excellent performance. Such systems is one of the goals of the quick HTML/DOM/API standardization of browsers which takes place these days.

Please understand that the format of Quick Questions & Answers hardly allows us to seriously discuss modeling, data layers, UI architecture and other detail. This is all the matter of serious architectural, design and programming work, more then the matter of getting expert advice.


—SA
 
Share this answer
 
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
SVG organizational chart
Organizational chart in asp.net
How to implement an organizational chart in android
Organizational Chart using C# asp.net
Multiple parent for Google Organizational Chart
Google Organizational Chart in Asp.net from oracle
Which control is most appropriate for showing organizational chart?
Vba code for Hierarchy chart in powerpoint
Multiple parant child hierarchy.
Multiple level hierarchy

Advertise
Privacy
Cookies
Terms of Use
Last Updated 3 Sep 2015
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web01 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900