New Google Chart update

Last Reply 6 days ago By dharmendr

Posted 6 days ago

Hi there,

I am trying to use the Google org chart, unfortunately the given sample code in aspforums.net is outdated.

I tried to modify my code accordingly, but I can't make it right.

Here is my HTML code:

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        //google.load("visualization", "1", { packages: ["orgchart"] });
        google.charts.load('current', { packages: ["orgchart"] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "Structure.aspx/GetChartData",
                data: '{LoginId:"'+ <%=Session("LoginId")%> +'"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Name');
                    data.addColumn('string', 'Manager');
                    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>' }, reportingManager, designation]]);
                    }
                },
                failure: function (r) {
                    alert('Failed:' + r.d);
                },
                error: function (r) {
                    alert('Error:' + r.d);
                }
            })

            //var data = new google.visualization.DataTable();
            //data.addColumn('string', 'Name');
            //data.addColumn('string', 'Manager');
            //data.addColumn('string', 'ToolTip');

            //data.addRows([
            //  [{ v: 'Lorah Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=2">Lorah Chetcuti</a><div>General Manager</div>'}, '', 'General Manager'],
            //  [{ v: 'Arnold Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=3">Arnold Chetcuti</a><div>Operations Manager</div>' }, 'Lorah Chetcuti', 'Operations Manager'],
            //  [{ v: 'Jacob Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=4">Jacob Chetcuti</a><div>Plant Operator</div>' }, 'Arnold Chetcuti', 'Plant Operator'],
            //  [{ v: 'Joshua Chetcuti', f: '<a href="EmployeeTraining.aspx?UserID=5">Joshua Chetcuti</a><div>Driver</div>' }, 'Arnold Chetcuti', 'Driver'],
            //]);

            // Create the chart.
            var chart = new google.visualization.OrgChart(document.getElementById('chart'));
            // Draw the chart, setting the allowHtml option to true for the tooltips.
            chart.draw(data, { allowHtml: true });
        }
    </script>
    <!-- begin #content -->
    <div id="content" class="content">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

                <div class="row">
                    <div id="chart">
                    </div>

                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

 VB Code

<WebMethod()>
    Public Shared Function GetChartData(ByVal LoginId As String) As List(Of Object)
        Dim query As String = "[dbo].[q_MembersTree] " + LoginId
        Dim constr As String = clsDALSql.GetConString
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand(query)
                Dim chartData As New List(Of Object)()
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                con.Open()
                Using sdr As SqlDataReader = cmd.ExecuteReader()
                    While sdr.Read()
                        chartData.Add(New Object() {sdr("LoginId"), sdr("Fullname"), sdr("HLevel"), sdr("PlacementId")})
                    End While
                End Using
                con.Close()
                Return chartData
            End Using
        End Using
    End Function

Your advice is highly appreciated.

You are viewing reply posted by: dharmendr 6 days ago.
Posted 6 days ago

Hi davelhw,

Refering the below example i have created example.

Create Organizational Chart from Database using Google Organizational Chart in ASP.Net

Check this example. Now please take its reference and correct your code.

HTML

<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.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ["orgchart"] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax({
            type: "POST",
            url: "CS.aspx/GetChartData",
            data: '{}',
            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/' + employeeId + '.jpg" />'
                    }, reportingManager, designation]]);
                }
                var chart = new google.visualization.OrgChart($("#chart")[0]);
                chart.draw(data, { allowHtml: true });
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>
<div id="content" class="content">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div class="row">
                <div id="chart">
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

C#

[WebMethod]
public static List<object> GetChartData()
{
    string query = "SELECT EmployeeId, Name, Designation, ReportingManager";
    query += " FROM EmployeesHierarchy";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<object> chartData = new List<object>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new object[]
            {
                sdr["EmployeeId"], sdr["Name"], sdr["Designation"] , sdr["ReportingManager"]
            });
                }
            }
            con.Close();
            return chartData;
        }
    }
}

VB.Net

<WebMethod()> _
Public Shared Function GetChartData() As List(Of Object)
    Dim query As String = "SELECT EmployeeId, Name, Designation, ReportingManager"
    query &= " FROM EmployeesHierarchy"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constr)
        Using cmd As New SqlCommand(query)
            Dim chartData As New List(Of Object)()
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    chartData.Add(New Object() {sdr("EmployeeId"), sdr("Name"), sdr("Designation"), sdr("ReportingManager")})
                End While
            End Using
            con.Close()
            Return chartData
        End Using
    End Using
End Function

Screenshot