<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_Certificate_CertificateSummary, App_Web_elsd5j1d" enableEventValidation="false" viewStateEncryptionMode="Never" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="~/UserControls/GridViewPager/GridViewPager.ascx" TagName="GridViewPager" TagPrefix="uc1" %>
<%@ Register Src="~/UserControls/Common/ScreenGroup/ScreenGroup.ascx" TagName="ScreenGroupControl" TagPrefix="ScreenGroup" %>
<%@ Register Src="~/UserControls/Common/EmployeeSearch/EmployeeSearch.ascx" TagName="EmployeeSearchControl" TagPrefix="hims" %>
<%@ Register Src="~/UserControls/DatePicker/DatePickerControl.ascx" TagName="DatePickerControl"
    TagPrefix="Date" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">
    <link href="../../App_Themes/jquery-ui.css" rel="stylesheet" />
    <link href="../../App_Themes/newTheme/css/inner-db.css" rel="stylesheet" />
    <script src="../../App_Themes/newTheme/js/Chart.min.js"></script>
    <script src="../../App_Themes/newTheme/js/utils.js"></script>
    <asp:UpdatePanel ID="ResonMasterUpdatePanel" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <hims:EmployeeSearchControl ID="EmployeeSearch" Visible="false" runat="server" />
            <div id="divContentPage" class="divcontentpagemargin">

                <div class="dashBoardLeftCont">
                    <div class="himssuHeader3WireBox">
                        <table>
                            <tr>
                                <td>
                                    <div class="leftUlMenu">
                                        <ScreenGroup:ScreenGroupControl EnableViewState="true" ID="ScreenGroupControl" ScreenGroupId="109"
                                            Visible="true" runat="server" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="whiteboxpaddingleft row">
                    <div class="himssuHeader1WireBox card card-box" id="DetailDiv" runat="server" visible="True">
                        <div class="himsBoxHeader card-head">
                            <div class="leftdiv">
                            </div>
                            <div class="himsBoxTitle">
                                <div class="headerText">
                                    <header>
                                        <i class="fas fa-level-up-alt"></i>
                                        <asp:Label ID="ReasonMasterDetailLabel" runat="server" Text="Certificate Summary Dashboard "></asp:Label>
                                    </header>
                                </div>
                            </div>
                        </div>
                        <div class="himsBoxContent card-body">
                            <div class="contentHolder">
                                <div class="row mlr14 center-block">
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-1 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-chart"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="BonafideCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Bonafide Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-2 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-user-unfollow"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="LCCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Leaving Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-3 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-emotsmile"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="CharacterCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Character Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-4 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-like"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="FirstTrialCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">First Trial Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <div class="himsBoxContent">
                                <div class="contentHolder">
                                    <div class="row mlr14">
                                        <div class="col-md-6 col-lg-3 col-xl-6 p3">
                                            <div class="row mlr14">

                                                <div class="col-md-6 pTop25" id="BonafideMonthGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound1"></span></b>
                                                        </div>
                                                        <div id="roundgraphBonafideMonth">
                                                            <canvas id="canvasBonafideMonth"></canvas>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblBonafideMonthWiseCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mlr14 pTop10">

                                                <div class="col-md-6 pTop25" id="BonafideClassGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound2"></span></b>
                                                        </div>
                                                        <div id="roundgraphBonafideClass">
                                                            <canvas id="canvasBonafideClass"></canvas>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblBonafideClassWiseCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-6 col-lg-3 col-xl-6 p3">
                                            <div class="row mlr14">
                                                <div class="col-md-6 pTop25" id="LeavingMonthGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound3"></span></b>
                                                        </div>
                                                        <div id="roundgraphLeavingMonth">
                                                            <canvas id="canvasLeavingMonth"></canvas>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblLeavingMonthWiseCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row mlr14 pTop10">
                                                <div class="col-md-6 pTop25" id="LeavingClassGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound4"></span></b>
                                                        </div>
                                                        <div id="roundgraphLeavingClass">
                                                            <canvas id="canvasLeavingClass"></canvas>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblLeavingClassWiseCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <%-- <script data-main="../../JavaScript/rjs/encrypt/assign-organization-encrypt" src="../../JavaScript/rjs/require.js"></script>--%>
    <script data-main='<%=ResolveUrl("~/JavaScript/rjs/assign-organization")%>' src='<%=ResolveUrl("~/JavaScript/rjs/require.js")%>'></script>
    <script>

        $(document).ready(function () {
            OverallCountGet();
        });

        function OverallCountGet() {
            $.ajax({
                type: "POST",
                url: "CertificateSummary.aspx/OverallCountGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("BonafideCountLabel").innerHTML = obj[0][0].value;
                            document.getElementById("LCCountLabel").innerHTML = obj[0][1].value;
                            document.getElementById("CharacterCountLabel").innerHTML = obj[0][2].value;
                            document.getElementById("FirstTrialCountLabel").innerHTML = obj[0][3].value;
                        });
                    }
                    BonafideCountMonthWiseGet();
                }
            });
        }

        function BonafideCountMonthWiseGet() {
            $.ajax({
                type: "POST",
                url: "CertificateSummary.aspx/BonafideCountMonthWiseGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblBonafideMonthWiseCount = "";
                    if (obj != "") {
                        tblBonafideMonthWiseCount += "<tr><th>Month Name</th><th>Bonafide Count</th></tr>";
                        $.each(obj, function (i, item) {
                            tblBonafideMonthWiseCount += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblBonafideMonthWiseCount += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblBonafideMonthWiseCount").innerHTML = tblBonafideMonthWiseCount;

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblBonafideMonthWiseCount tbody th').length - 1;
                    $('#BonafideMonthGraph').show();
                    $('#tblBonafideMonthWiseCount tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0) {
                                    lables.push(this.innerHTML);
                                }
                            }
                            else if ($(this).is('td')) {
                                if (index2 != 0) {
                                    if (colcnt == index2) {
                                        dataPoint.push(this.innerHTML);
                                    }
                                } else if (index2 == 0) {
                                    locationlbl.push(this.innerText);
                                }
                            }
                            $("table.tr").not(this).hide();
                        });
                    });
                    if (lables.length > 0 && dataPoint.length > 0) {
                        chartdata.push({
                            label: locationlbl.slice(0, locationlbl.length),
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                              "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                              "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                            "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000"],
                            borderWidth: 1,
                            data: dataPoint.slice(0, dataPoint.length)

                        });
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length),
                        datasets: chartdata
                    };
                    $('#canvasBonafideMonth').remove();
                    $('#roundgraphBonafideMonth').append('<canvas id="canvasBonafideMonth" style="width:475px;"></canvas>');
                    var ctx = $("#canvasBonafideMonth").get(0).getContext('2d');
                    var opt = {
                        responsive: false,
                        legend: false,
                        scales: {
                            xAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Month Name'
                                }
                            }],
                            yAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Bonafide Count'
                                }
                            }]
                        },
                        "hover": {
                            "animationDuration": 0
                        },
                        "animation": {
                            "duration": 1,
                            "onComplete": function () {
                                var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;
                                ctx.font = "1px Arial";
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y);
                                    });
                                });
                            },
                        },
                    };
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });

                    BonafideCountClassWiseGet();
                }
            });
        }

        function BonafideCountClassWiseGet() {
            $.ajax({
                type: "POST",
                url: "CertificateSummary.aspx/BonafideCountClassWiseGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblBonafideClassWiseCount = "";
                    if (obj != "") {
                        tblBonafideClassWiseCount += "<tr><th>Class Name</th><th>Bonafide Count</th></tr>";
                        $.each(obj, function (i, item) {
                            tblBonafideClassWiseCount += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblBonafideClassWiseCount += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblBonafideClassWiseCount").innerHTML = tblBonafideClassWiseCount;

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblBonafideClassWiseCount tbody th').length - 1;
                    $('#BonafideClassGraph').show();
                    $('#tblBonafideClassWiseCount tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0) {
                                    lables.push(this.innerHTML);
                                }
                            }
                            else if ($(this).is('td')) {
                                if (index2 != 0) {
                                    if (colcnt == index2) {
                                        dataPoint.push(this.innerHTML);
                                    }
                                } else if (index2 == 0) {
                                    locationlbl.push(this.innerText);
                                }
                            }
                            $("table.tr").not(this).hide();
                        });
                    });
                    if (lables.length > 0 && dataPoint.length > 0) {
                        chartdata.push({
                            label: locationlbl.slice(0, locationlbl.length),
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                              "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                              "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                            "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000"],
                            borderWidth: 1,
                            data: dataPoint.slice(0, dataPoint.length)

                        });
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length),
                        datasets: chartdata
                    };
                    $('#canvasBonafideClass').remove();
                    $('#roundgraphBonafideClass').append('<canvas id="canvasBonafideClass" style="width:475px;"></canvas>');
                    var ctx = $("#canvasBonafideClass").get(0).getContext('2d');
                    var opt = {
                        responsive: false,
                        legend: false,
                        scales: {
                            xAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Class Name'
                                }
                            }],
                            yAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Bonafide Count'
                                }
                            }]
                        },
                        "hover": {
                            "animationDuration": 0
                        },
                        "animation": {
                            "duration": 1,
                            "onComplete": function () {
                                var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;
                                ctx.font = "1px Arial";
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y);
                                    });
                                });
                            },
                        },
                    };
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });

                    LeavingCountMonthWiseGet();
                }
            });
        }

        function LeavingCountMonthWiseGet() {
            $.ajax({
                type: "POST",
                url: "CertificateSummary.aspx/LeavingCountMonthWiseGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblLeavingMonthWiseCount = "";
                    if (obj != "") {
                        tblLeavingMonthWiseCount += "<tr><th>Month Name</th><th>Leaving Count</th></tr>";
                        $.each(obj, function (i, item) {
                            tblLeavingMonthWiseCount += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblLeavingMonthWiseCount += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblLeavingMonthWiseCount").innerHTML = tblLeavingMonthWiseCount;

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblLeavingMonthWiseCount tbody th').length - 1;
                    $('#LeavingMonthGraph').show();
                    $('#tblLeavingMonthWiseCount tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0) {
                                    lables.push(this.innerHTML);
                                }
                            }
                            else if ($(this).is('td')) {
                                if (index2 != 0) {
                                    if (colcnt == index2) {
                                        dataPoint.push(this.innerHTML);
                                    }
                                } else if (index2 == 0) {
                                    locationlbl.push(this.innerText);
                                }
                            }
                            $("table.tr").not(this).hide();
                        });
                    });
                    if (lables.length > 0 && dataPoint.length > 0) {
                        chartdata.push({
                            label: locationlbl.slice(0, locationlbl.length),
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                              "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                              "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                            "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000"],
                            borderWidth: 1,
                            data: dataPoint.slice(0, dataPoint.length)

                        });
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length),
                        datasets: chartdata
                    };
                    $('#canvasLeavingMonth').remove();
                    $('#roundgraphLeavingMonth').append('<canvas id="canvasLeavingMonth" style="width:475px;"></canvas>');
                    var ctx = $("#canvasLeavingMonth").get(0).getContext('2d');
                    var opt = {
                        responsive: false,
                        legend: false,
                        scales: {
                            xAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Month Name'
                                }
                            }],
                            yAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Leaving Count'
                                }
                            }]
                        },
                        "hover": {
                            "animationDuration": 0
                        },
                        "animation": {
                            "duration": 1,
                            "onComplete": function () {
                                var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;
                                ctx.font = "1px Arial";
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y);
                                    });
                                });
                            },
                        },
                    };
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });

                    LeavingCountClassWiseGet();
                }
            });
        }

        function LeavingCountClassWiseGet() {
            $.ajax({
                type: "POST",
                url: "CertificateSummary.aspx/LeavingCountClassWiseGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblLeavingClassWiseCount = "";
                    if (obj != "") {
                        tblLeavingClassWiseCount += "<tr><th>Class Name</th><th>Leaving Count</th></tr>";
                        $.each(obj, function (i, item) {
                            tblLeavingClassWiseCount += "<tr><td>" + item[0].value + "</td><td>" + item[1].value + "</td></tr>";
                        });
                    }
                    else { tblLeavingClassWiseCount += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblLeavingClassWiseCount").innerHTML = tblLeavingClassWiseCount;

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblLeavingClassWiseCount tbody th').length - 1;
                    $('#LeavingClassGraph').show();
                    $('#tblLeavingClassWiseCount tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0) {
                                    lables.push(this.innerHTML);
                                }
                            }
                            else if ($(this).is('td')) {
                                if (index2 != 0) {
                                    if (colcnt == index2) {
                                        dataPoint.push(this.innerHTML);
                                    }
                                } else if (index2 == 0) {
                                    locationlbl.push(this.innerText);
                                }
                            }
                            $("table.tr").not(this).hide();
                        });
                    });
                    if (lables.length > 0 && dataPoint.length > 0) {
                        chartdata.push({
                            label: locationlbl.slice(0, locationlbl.length),
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#D35400", "#CD5C5C", "#cc65fe", "#196F3D", "#5499C7", "#E67E22",
                              "#27AE60", "#F08080", "#996633", "#0000cc", "#FFA07A", "#16A085", "#512E5F", "#7D6608", "#1B4F72", "#008080",
                              "#FF00FF", "#01DF01", "#ff0000", "#00ffff", "#cc6699", "#cccc00", "#993300", "#333399", "#ff99ff", "#006600", "#ffff00",
                            "#003366", "#00ccff", "#ff9900", "#cc0066", "#ccccff", "#660066", "#000000"],
                            borderWidth: 1,
                            data: dataPoint.slice(0, dataPoint.length)

                        });
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length),
                        datasets: chartdata
                    };
                    $('#canvasLeavingClass').remove();
                    $('#roundgraphLeavingClass').append('<canvas id="canvasLeavingClass" style="width:475px;"></canvas>');
                    var ctx = $("#canvasLeavingClass").get(0).getContext('2d');
                    var opt = {
                        responsive: false,
                        legend: false,
                        scales: {
                            xAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Class Name'
                                }
                            }],
                            yAxes: [{
                                stacked: false,
                                display: true,
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Leaving Count'
                                }
                            }]
                        },
                        "hover": {
                            "animationDuration": 0
                        },
                        "animation": {
                            "duration": 1,
                            "onComplete": function () {
                                var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;
                                ctx.font = "1px Arial";
                                ctx.textAlign = 'center';
                                ctx.textBaseline = 'bottom';

                                this.data.datasets.forEach(function (dataset, i) {
                                    var meta = chartInstance.controller.getDatasetMeta(i);
                                    meta.data.forEach(function (bar, index) {
                                        var data = dataset.data[index];
                                        ctx.fillText(data, bar._model.x, bar._model.y);
                                    });
                                });
                            },
                        },
                    };
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });
                }
            });
        }
     
    </script>
</asp:Content>
