Wednesday, November 30, 2016

Organization Chart with AngularJS



What is Organization Chart?

An Organizational Chart shows the internal structure of an organization or company. The employees and positions are represented by boxes or other shapes, sometimes including photos, contact information, email and page links, icons and illustrations. Straight or elbowed lines link the levels together.  This creates a clear visual depiction of the hierarchy and ranks of different people, jobs and departments that make up the organization.
Organizational Charts also are known as Organization Charts, Org Charts, Organograms, Organogram Charts (sometimes spelled Organigrams or Organigrammes) and Hierarchy Charts. Don’t be fooled: Despite all the different names, they’re all the same thing.

How to create with angularjs & google chart?

First you need to create one JS file: OrgChart.JS & copy below text :
var app = angular.module('OrgChartApp', []);
app.controller('OrgChartController', ['$scope', '$http', function ($scope, $http) {
    //here http get method for get data from database
    $scope.chartData = [['Name', 'ReportsTo', 'JobTitle']];
    var data = [{ ID: 1, EmployeeName: 'Gaurav Goyal', Title: 'Product Archtech', ReportsTo: 0, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' },
        { ID: 2, EmployeeName: 'David Verti', Title: 'SSE', ReportsTo: 1, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' },
        { ID: 3, EmployeeName: 'Rahul Khanna', Title: 'SSE', ReportsTo: 1, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' },
        { ID: 4, EmployeeName: 'Tarun Sharma', Title: 'SE', ReportsTo: 2, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' },
        { ID: 5, EmployeeName: 'Yaman Raj', Title: 'SE', ReportsTo: 2, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' },
        { ID: 6, EmployeeName: 'Sanjay Jain', Title: 'SE', ReportsTo: 3, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' },
        { ID: 7, EmployeeName: 'Om Prakash', Title: 'SE', ReportsTo: 3, img_url: '//lh5.googleusercontent.com/-evpjmrDWNMQ/AAAAAAAAAAI/AAAAAAAAAcY/d7qvMNmJlNw/s80-c/photo.jpg' }
    ];

    var newobject = [['Name', 'ReportsTo', 'JobTitle']];
    angular.forEach(data, function (val) {
        newobject.push(
            [
                {
                    v: val.ID.toString(),
                    f: '<div class="parent">'
                        + '<div> '
                        + '<img src="' + val.img_url + '" class="iconDetails">'
                        + ' </div>'
                        + ' <div class="text">'
                        + '<h4><b>' + val.EmployeeName + '</b></h4>'
                        + '<div >' + val.Title + '</div>'
                        + '<div >gauravgoyal_5@yahoo.com</div>'
                        + '</div>'
                        + '</div>'
                },
                (val.ReportsTo.toString() === "0" ? "" : val.ReportsTo.toString()),
                (val.EmployeeName)
            ]
            );

    })
    $scope.chartData = newobject;

}])
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
    };
})

Now you need to create HTML file :  OrgChart.html & copy below text :
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <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="//SiteAssets/OrgChart-3.js"></script>
    <style>
        .iconDetails {
   float: left;
    height: 75px;
       width: 75px;
   padding:10px;
  }
.parent{
      
    display:table;
    width:300px;
      
}
.text{
display: table;
text-align:left;
}

        .google-visualization-orgchart-node-medium {
            width: 200px;
        }

        .ms-rtestate-field h4, h4.ms-rteElement-H4 {
            font-size: 1.3em;
            color: brown;
            padding-top:10px;
            padding-left:0px;
            margin-left:0px;
        }

        .google-visualization-orgchart-node {
            background: transparent;
        }
    </style>

</head>

<body ng-app="OrgChartApp">
    <div ng-controller="OrgChartController">
                <div id="chart" ng-model="chartData" org-chart="chartData" style="text-align:center">
           
        </div>
    </div>
</body>
</html>






Here is final outcome :