Generate Genealogy view in ASP.NET C# using Google Organizational Chart

Introduction:

In this article I will explain how to create a Tree view, or you can say a genealogy view  to show your family in a tree structure. I have tried it before with the help of HTML table. But I found a better option from Google. So here I am explaining how to execute that Google logic in to your project to create your genealogy view, where obviously data is coming from database. Lets come and see how to do this.


Description:

You may be heard of multi-level marketing (MLM) concept. There you have to show the down lines as a tree. Keep that in my mind I have started working on this topic, and I found this most efficient ting to describe the tree view, where one parent has 2 children or more than two children.

Before you proceeding take a look in this URL here  Visualization: Organizational Chart - Google Charts. This will help you to understand on which we are going to implement our tree view.

Before start the project lets create the database first. Here I am taking the basic columns. I have cut all the others less necessary columns.

Name NVarChar(255)
Manager  NVarChar(255)

These two will be our database table column. On these two you add your data like Id, joining date etc..

I am sure you know how to bind a DataTable with database table. So I am not going on that part.

The main thing in this project is the script provided by Google. So lets run that code once.

<script>        google.setOnLoadCallback(drawChart);        function drawChart() {        var data = new google.visualization.DataTable();        data.addColumn('string', 'Name');        data.addColumn('string', 'Manager');        data.addRows([['Mike',''], ['Jim', 'Mike'], ['Alice', 'Mike'],['Bob', 'Jim'],['Carol', 'Jim']]);        var chart = new    google.visualization.OrgChart(document.getElementById('chart_div'));        chart.draw(data, { allowHtml: true }); } </script>

Take a deep look on the line no 6. This is the main data contains.If we provide this data from database our mission will be fulfilled. So how to provide. For this we will call this javascript function from code behind, or specifically we will create this function and call this on page load or some button click event.

So lets a create a page and on the page load write down the code.

string s = ""; DataTable table = new DataTable(); table.Columns.Add("name", typeof(string)); table.Columns.Add("parent", typeof(string)); table.Rows.Add("Arka", ""); table.Rows.Add("Sucheta", "Arka"); table.Rows.Add("Ashok", "Arka"); table.Rows.Add("Sayantani", "Sucheta"); table.Rows.Add("Amir", "Sucheta"); table.Rows.Add("Salman", "Ashok"); table.Rows.Add("Shambhu", "Ashok"); for (int i = 0; i < table.Rows.Count; i++) {       s = s + "['"+table.Rows[i][0].ToString()+"','"+table.Rows[i][1].ToString()+"'],"; } s = s.TrimEnd(',');

This code will generate the string which will contain all the data present in our database. I have just create a DataTable and add few data, You just bind that DataTable with database table with the help of SQLDataAdapter. If you put a break point and inspect the variable s you will found the data in s is similar to the matrix in the Google code.

Now we have to call the javascript fucntiona and pass the string to made the tree view.

String csname1 = "PopupScript"; Type cstype = this.GetType(); ClientScriptManager cs = Page.ClientScript; if (!cs.IsStartupScriptRegistered(cstype, csname1)) {        StringBuilder cstext1 = new StringBuilder();        cstext1.Append("<script>");        cstext1.Append("google.setOnLoadCallback(drawChart);");        cstext1.Append("function drawChart() {");        cstext1.Append("var data = new google.visualization.DataTable();");        cstext1.Append("data.addColumn('string', 'Name'); data.addColumn('string', 'Manager');");        cstext1.Append("data.addRows(["+s+"]);");        cstext1.Append("var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));");        cstext1.Append("chart.draw(data, { allowHtml: true });");        cstext1.Append("}");        cstext1.Append("</script>");        cs.RegisterStartupScript(cstype, csname1, cstext1.ToString()); }

Now more important thing add a div where you want to show the tree view and change the id of that div to chart_div. 

Output:

Run your project and see what will be the output.

Enjoy...Happy coding...

Arkadeep De

asp-arka.blogspot.in

Facebook | LinkedIn | Twitter

If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS Subscribe by Email