Google organization chart using Angularjs in asp.net mvc5 ~ MiTechDev.com

Friday, 7 October 2016

Google organization chart using Angularjs in asp.net mvc5

00:04:00 Posted by raviteja swayampu , No comments
Hi every one thank for the comments,support and mails for previous posts.In this tutorial i am going to implement Organization Chart using Google API.This is very good API provided by the Google for rich web experiences.Thanks google for providing these API.Showing an organization structure based on roles and responsibilities is an complex task for a web developer but using API like Google Orgchart it is pretty simple.In this following tutorial we are gonna learn how to do it using Angular JS framework(a most popular java script framework for front end development).
the below are some of my previous posts on Angular JS.
Now come to this tutorial we are going to implement this orgchart using Angular js in asp.net mvc5 web application.

Implementing organizational chart

1.Create a ASP.NET MVC web application using Empty MVC template.
2.Create a Employee table and insert some data for displaying it on orgchart.
3.Use below Database code implementing Table Schema.
CREATE TABLE [dbo].[Employee] (
    [EmployeeID]   INT          NOT NULL,
    [EmployeeName] VARCHAR (50) NOT NULL,
    [Title]        VARCHAR (50) NULL,
    [BirthDate]    DATETIME     NULL,
    [ReportTo]     INT          NULL,
    PRIMARY KEY CLUSTERED ([EmployeeID] ASC)
);

---insert some data into table
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (1, N'Fuller', N'Vice Presidet, Sales', N'1952-02-19 00:00:00', 0)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (2, N'Davolio', N'Sales Maager', N'1948-12-08 00:00:00', 1)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (3, N'Leverlig', N'Sales Represetative', N'1963-08-30 00:00:00', 2)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (4, N'Peacock', N'Sales Represetative', N'1937-09-19 00:00:00', 2)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (5, N'Buchaa', N'Sales Represetative', N'1955-03-04 00:00:00', 2)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (6, N'Suyama', N'Sales Maager', N'1963-07-02 00:00:00', 1)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (7, N'Kig', N'Sales Represetative', N'1960-05-29 00:00:00', 6)
INSERT INTO [dbo].[Employee] ([EmployeeID], [EmployeeName], [Title], [BirthDate], [ReportTo]) VALUES (8, N'Callaha', N'Sales Represetative', N'1958-01-09 00:00:00', 6)



4.Now Create a Controller and name it as HomeController.cs.
5.I crated Index action method to display the View and GetEmployeesData method to send json data to Google orgchart.
6.HomeController.cs
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using AngularGoogleOrg.Models;

namespace AngularGoogleOrg.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        //Renders the Index view 
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetEmployeesData()
        {
            //send data to orgchart in json format
            using (OrgDbEntities db=new OrgDbEntities())
            {
                List data = new List();
                data = db.Employees.ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
    }
}
7.Add a View to Index action method to display chart.
8.Right click on Index action -->  Add View--> name it --> add.
9.Replace the View code with below code.
@{
    ViewBag.Title = "www.mitechdev.com";
}

<h2>Angular OrgChart</h2>

<!--API reference files-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','orgchart']}]}"></script>
<script src="~/Scripts/myscript.js"></script>

<div ng-app="myapp" ng-controller="orgController">
    <div id="chart" ng-model="chartData" org-chart="chartData" style="text-align:center">
       
    </div>
</div>


Add below angular script code for orgchart

1.Add another script file to Script folder and copy below code there.
//angular app 
var app = angular.module('myapp', []);
app.controller('orgController', ['$scope', '$http', function ($scope, $http) {

    $scope.chartData = [['Name', 'ReportTo', 'tooltip']];
    //service gets data from server
    $http.get('/home/GetEmployeesData').then(function (response) {
        //creating new object
        var newobject = [['Name', 'ReportTo', 'tooltip']];
        //push the server data into newObject
        angular.forEach(response.data, function (val) {
            newobject.push(
                [
                    {
                        v: val.EmployeeID.toString(),
                        f: f: '
' + (val.EmployeeName) + '
' + val.Title + '
' }, (val.ReportTo.toString() == "0" ? "" : val.ReportTo.toString()), (val.EmployeeName) ] ); }) //assign data to $scope object $scope.chartData = newobject; }) }]) //creating a new angular directive for orgchart app.directive('orgChart', function () { function link($scope, element, attrs) { var chart = new google.visualization.OrgChart(element[0]); $scope.$watch('chartData', function (value, oldvalue) { if (!value) { return; } var data = google.visualization.arrayToDataTable(value); var options = { 'title': '', 'allowHtml': true } chart.draw(data, options); }) } return { link: link }; })
2.Now run the application and see the output as shown below.

3.Use below styles in index page.


#chart table {
        border-spacing: 0;
        border-collapse: separate;
    }

    #chart tr td {
        line-height: 15px;
    }

    .title {
        color: red;
    }

    .google-visualization--orgchart-node-medium {
        font-size: 13px;
    }
4.Download source code for this application(source vs2015) for reference only.

Conclusion

I hope this tutorial is understandable and useful for every reader.Please comment if you suggest any modification to improve the quality of article.If you are not subscribed to this blog subscribe.follow on Social networks for daily awesome updates[Facebook,twitter,google plus].

0 comments:

Post a Comment