Google Visualization API - Organization Chart

88 views
Skip to first unread message

Amrata Ramchandani

unread,
May 4, 2016, 6:22:32 AM5/4/16
to Google Visualization API
Hi,

I am using Google Visualization API - Organization Chart to show my organizations hierarchy, i am fetching the employee details from sql server and displaying it in hierarchical manner.
But the problem arises when i am not able to view all Grand Childrens in the chart.
And i am not able to find even the reason for it.

I am posting my code over here let me know if anyone of you have any suggestion and could make out where i am doing the mistake

Front End Code:


    <center>
        <div style="background-color: Black; padding: 5px">
            <form method="get" action="/search" id="search">
            <input type="text" id="searchBox" placeholder="Search..." />
            <input type="button" value="Load Chart" onclick="drawChart()" />
        </div>
    </center>


    <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> -->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["orgchart"] });
        //google.setOnLoadCallback(drawChart);

        function drawChart() {
            var srchTxt = document.getElementById("searchBox").value;
            $.ajax({
                type: "POST",
                url: "orgChart.aspx/GetChartData",
                data: '{"str":"' + srchTxt + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Entity');
                    data.addColumn('string', 'ParentEntity');
                    data.addColumn('string', 'ToolTip');
                    for (var i = 0; i < r.d.length; i++) {
                        var employeeId = r.d[i][0].toString();
                        var employeeName = r.d[i][1];
                        var designation = r.d[i][2];
                        var reportingManager = r.d[i][3] != null ? r.d[i][3].toString() : '';
                        data.addRows([[{ v: employeeId,
                            f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + employeeName + '.png" />'
                        }, reportingManager, designation]]);
                    }
                    var chart = new google.visualization.OrgChart($("#chart")[0]);
                    chart.draw(data, { allowHtml: true,allowCollapse:true });
                      for (var i=1;i<data.getNumberOfRows();i++)
                            {
                                chart.collapse(i,true);
                              }
                   },
                failure: function (r) 
                {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
       
    </script>
    <br />
    <br />
    <center>
    <div id="chart">
    </div>
    </center>
    </form>




Backend Code:

public partial class _Default : System.Web.UI.Page
{


    [WebMethod]
    public static List<object> GetChartData(String str)
    {
        List<object> chartData = new List<object>();
        List<int> list = new List<int>();
        string srchText = str;
        int empID=-1;
        string query_single = "SELECT TOP 1 ID, Name, Designation, ReportingManagerID";
        query_single += " FROM Employees_trial WHERE Name LIKE '%" + srchText + "%'";

        string constr1 = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con1 = new SqlConnection(constr1))
        {
            using (SqlCommand cmd = new SqlCommand(query_single))
            {
                
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con1;
                con1.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        empID = int.Parse(sdr["ID"].ToString());
                        list.Add(empID);
                        chartData.Add(new object[]
                        {
                            sdr["ID"], sdr["Name"], sdr["Designation"] , null
                        });
                            
                    }
                }
                con1.Close();                
            }
        }

        // ====== #### ====== #### ====== #### ====== #### ====== #### ====== #### ====== #### ====== #### 
        string query = "SELECT ID, Name, Designation, ReportingManagerID";
        query += " FROM Employees_trial";
       

       
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {

                        if (!DBNull.Value.Equals(sdr["ReportingManagerID"]))
                        {
                            int temp = int.Parse(sdr["ReportingManagerID"].ToString());
                            if (list.IndexOf(temp) != -1)
                            {
                                chartData.Add(new object[]
                                {
                                    sdr["ID"], sdr["Name"], sdr["Designation"] , sdr["ReportingManagerID"]
                                });
                                list.Add(int.Parse(sdr["ID"].ToString()));
                            }
                            else
                            {
                                //list.Add(int.Parse(sdr["EmployeeId"].ToString()));
                            }
                        }
                        
                    }
                }
                con.Close();
                
            }
        }
        return chartData;
    }
}





  As you can see searching upon particular name, we are able to display the its childrens and grand childrens. But the problen is that i am not able to view all the grandchildrens.

Example : Asim-Jytoi Jha-> There are total four name in 



But i am not able to view all the childs of jyoti jha since deepak pawar is missing rest three are visible.








Reply all
Reply to author
Forward
0 new messages