How to create google organization chart from database in Asp.net

-
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

Download
Click here to download

For more info go to the below link  https://developers.google.com/chart/interactive/docs/gallery/orgchart

Comments

Post a Comment

Popular posts from this blog

Simple API that receive MultipartData File with parameter in ASP.net Web API

-
This article demonstrate how to create a Asp.net web API that receive file with parameter also get file name  , content type and extension      using  System; using  System.IO; using  System.Linq; using  System.Net; using  System.Net.Http; using  System.Text; using  System.Threading.Tasks; using  System.Web; using  System.Web.Http; namespace  LetstrackAPI.Controllers {      public   class   UploadFileController  :  ApiController     {         [ HttpPost ()]          // [AllowAnonymous]          public   async   Task < object > PostFile()         {              // Check if the reque...
Read more

Multipart/form-data using basic auth

-
// Implements multipart/form-data POST in C# http://www.ietf.org/rfc/rfc2388.txt // http://www.briangrinstead.com/blog/multipart-form-post-in-c public static class FormUpload {     private static readonly Encoding encoding = Encoding.UTF8;     public static HttpWebResponse MultipartFormDataPost(string postUrl, string userAgent, Dictionary<string, object> postParameters)     {         string formDataBoundary = String.Format("----------{0:N}", Guid.NewGuid());         string contentType = "multipart/form-data; boundary=" + formDataBoundary;         byte[] formData = GetMultipartFormData(postParameters, formDataBoundary);         return PostForm(postUrl, userAgent, contentType, formData);     }     private static HttpWebResponse PostForm(string postUrl, string userAgent, string contentType, byte[] formData)     { ...
Read more

How to Capture image of HTML5 camera in asp.net

-
Image
In this blog I am going to capture image of HTML5 camera and store in a file using asp.net Step 1. Open Visual Studio  =>  File => new => website Step 2. Give the name of application Step 3. Add New Page Step 4. Add  Jquery min js link inside head tag  <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> Html Markup and script <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Capture.aspx.cs" Inherits="Capture" %> <!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">     <title>HTML5 Camera  </title>     <style type="text/css">         .style1         {             width: 600px;         ...
Read more