Create Organizational Chart using AngularJS with Google Organizational Chart API in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

Create Organizational Chart in ASP.Net MVC using Google Organizational Chart API

How to implement Organisation chart using angularjs in asp.Net



You are viewing reply posted by: dharmendr one year ago.
Posted one year ago

Hi rani,

Using the below article ia have created the 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 xmlns="">
<head runat="server">
    <style type="text/css">
            font-family: Arial;
            font-size: 10pt;
            width: 900px;
            height: 500px;
        #chart span
            color: red;
            font-size: 8pt;
            font-style: italic;
        #chart img
            height: 50px;
            width: 50px;
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        google.charts.load('current', { packages: ['orgchart'] });
        var app = angular.module('MyApp', []);
        app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
            $scope.chartData = [['Name', 'ReportsTo', 'tooltip']];
            $'Default.aspx/GetChartData', { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                var newobject = [['Entity', 'ParentEntity', 'ToolTip']];
                angular.forEach(, function (val) {
                    var employeeId = val.EmployeeId.toString();
                    var employeeName = val.Name;
                    var designation = val.Designation;
                    var reportingManager = val.ReportingManager != null ? val.ReportingManager.toString() : '';
                        v: employeeId,
                        f: employeeName + '<div>(<span>' + designation + '</span>)</div><img src = "Pictures/' + employeeId + '.jpg" />'
                    }, reportingManager, designation]);
                var chart = new google.visualization.OrgChart(document.getElementById("chart"));
                var data = google.visualization.arrayToDataTable(newobject);
                var options = { 'title': '', 'allowHtml': true }
                chart.draw(data, options);
        } ]);      
<body ng-app="MyApp" ng-controller="MyController">
    <form id="form1" runat="server">
    <div id="chart">



public static List<EmployeesHierarchy> GetChartData()
    using (TestEntities entities = new TestEntities())
        return entities.EmployeesHierarchies.ToList();


Public Shared Function GetChartData() As List(Of EmployeesHierarchy)
    Using entities As TestEntities = New TestEntities()
        Return entities.EmployeesHierarchies.ToList()
    End Using
End Function