Home > DeveloperSection > Blogs > Google Organization Chart from database in asp.net

Google Organization Chart from database in asp.net


ASP.Net Google API  Chart 
Ratings:
1 Comment(s)
 1343  View(s)
Rate this:

In this article I am going to explain how to create google organization chart from database in ASP.NET. Step by step

Step 1

 Create Database and table in sql server

Table Design

Column

DataType

Id

Int

Name

Varchar(50)

Parent

Varchar(50)

ToolTip

Varchar(50)

 

Sample Data

Name

Parent

Tooltip

Manager

 

Manager

Supervisor1

Manager

Supervisor1

Supervisor2

Manager

Supervisor2

Supervisor3

Manager

Supervisor3

Employee1

Supervisor1

Employee1

Employee2

Supervisor1

Employee2

Employee23

Supervisor2

Employee3

 

Step 2

Open visual studio => Create new website => Add new page and give the suitable name

Step 3

Html Markup

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

   

</head>

<body>

    <form id="form1" runat="server">

    <asp:Literal ID="ltrScript" runat="server"></asp:Literal>

    <div>

     <div id="chart_div"></div>

    </div>

    </form>

</body>

</html>

 

 

 

Namespace

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Text;

 

 

 

Code Snippet

SqlConnection conn = new SqlConnection("Data source=ASHOK-PC\\SQLSERVER_NEW; Database=Practice;USER ID=sa;PWD=a;Pooling=true;");

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindOrganaizationChart();

        }

    }

    private void BindOrganaizationChart()

    {

        StringBuilder str=new StringBuilder();

        DataTable dt = new DataTable();

        try

        {

 

            string cmd = "select [id]  ,[name]  ,[parent]  ,[ToolTip] from Sample";

            SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);

            adp.Fill(dt);

 

            str.Append(@"<script type='text/javascript'> google.charts.load('current', { packages: ['orgchart'] });

                        google.charts.setOnLoadCallback(drawChart);

                       function drawChart() {

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

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

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

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

 

        data.addRows([");

 

            for (int i = 0; i < dt.Rows.Count; i++)

            {

                if (i == dt.Rows.Count-1)

                {

                    str.Append(" ['" + dt.Rows[i]["name"].ToString() + "', '" + dt.Rows[i]["parent"].ToString() + "', '" + dt.Rows[i]["ToolTip"].ToString() + "']");

                }

                else

                {

                    str.Append(" ['" + dt.Rows[i]["name"].ToString() + "', '" + dt.Rows[i]["parent"].ToString() + "', '" + dt.Rows[i]["ToolTip"].ToString() + "'],");

             

                }

            }

            str.Append("]);");

 

            str.Append("  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));");

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

 

            str.Append("}");

            str.Append("</script>");

            ltrScript.Text = str.ToString();

        }

        catch

        { }

    }

 

 

Results



Google Organization Chart from database in asp.net

By John Smith on   9 months ago
nice article

Don't want to miss updates? Please click the below button!

Follow MindStick