<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
    CodeBehind="Organization_Hierarchy.aspx.cs" Inherits="HRMS.Organization_Hierarchy" %>

<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: 100%;
        }
        #chart div
        {
            width: 250px;
        }
        #chart span
        {
            color: red;
            font-size: 8pt;
            font-style: italic;
        }
        #chart img
        {
            height: 100px;
            width: 200px;
        }
    </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">
        google.load("visualization", "1", { packages: ["orgchart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "Organization_Hierarchy.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 org = r.d[i][1];
                        var parentorg = r.d[i][2] != null ? r.d[i][2].toString() : '';


                        data.addRows([[{ v: employeeId,
                            f: org
                        }, parentorg, org]]);
                    }
                    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 class="panel panel-default">
        <div class="panel-body">
            Organization Hierarchy Chart</div>
        <div id="chart">
        </div>
    </div>
</asp:Content>
