<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="EmployeeHierarcy.aspx.cs" Inherits="HRMS.EmployeeHierarcy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

 <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 12pt;
        }
        #chart
        {
         padding:2px 2px  2px 2px;
            width: 50%;
            height: 90%;
        }
        #chart div
        {
            width: 130px;
            
        }
        #chart span
        {
            color: red;
            font-size: 8pt;
            font-style: italic;
        }
        #chart img
        {
            height: 100px;
            width: 100px;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 <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" src="../../ThemeScrips/jquery.min.js"></script>
    <script type="text/javascript" src="../../ThemeScrips/jsapi.js"></script>


    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["orgchart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "EmployeeHierarcy.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() : '';
                        var picurl = r.d[i][4];
                        var redirect_url = r.d[i][5];

                        data.addRows([[{ v: employeeId,
                            f: employeeName + '<div>(<span>' + designation + '</span>)</div><a href="' + redirect_url + '"  id="redirect_link"  > <img src = "' + picurl + '" /> </a>'
                        }, reportingManager, designation]]);
                    }
                    var chart = new google.visualization.OrgChart($("#chart")[0]);
                    chart.draw(data, { allowHtml: true, allowCollapse: true });
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>

  <div class="panel panel-default">
  <div class="panel-body">Employee Hierarchy Chart</div>

   <div style="width: 102%; overflow: scroll">
    <div id="chart" style="width:20% !important;">
    
    </div></div>
</div>    
  

</asp:Content>
