<%@ page language="C#" masterpagefile="~/Pages/Common/MasterPages/MainMasterPage_new.master" autoeventwireup="true" inherits="Pages_FrontOffice_FrontOfficeSummary, App_Web_hpoycyi1" 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="168"
                                            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="Front Office 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-people"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayVisitorCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today's Visitor 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-social-dropbox"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayCourierCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today's Courier 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-graduation"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayStdGatePassCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today's Student Gate Pass 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-briefcase"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="TodayEmpGatePassCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Today's Employee Gate Pass Count</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-5 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-chart"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="MonthVisitorCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Month Visitor Count</h6>
                                                </div>

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

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-7 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-pie-chart"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="MonthStdGatePassCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Month Student Gate Pass Count</h6>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-lg-3 col-xl-3 p3">
                                        <div class="card card-inverse gradient-8 hover-expand-effect">
                                            <div class="box">
                                                <div class="icon">
                                                    <i class="icon-pie-chart"></i>
                                                </div>
                                                <div class="count">
                                                    <h1 id="MonthEmpGatePassCountLabel" class="font-light text-white"></h1>
                                                    <h6 class="text-white">Month Employee Gate Pass 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-12 pTop25" id="VisitorMonthGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound1"></span></b>
                                                        </div>
                                                        <div id="roundgraphVisitorMonth">
                                                            <canvas id="canvasVisitorMonth"></canvas>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblVisitorCount' class='table table-striped table-bordered'>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mlr14 pTop10">
                                                <div class="col-md-12 pTop25" id="EmployeeGatePassGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound3"></span></b>
                                                        </div>
                                                        <div id="roundgraphEmployeeGatePassMonth">
                                                            <canvas id="canvasEmployeeGatePassMonth"></canvas>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblEmployeeGatePassMonthCount' 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-12 pTop25" id="StudentGatePassGraph">
                                                    <div class="panel panel-info">
                                                        <div class="panel-heading">
                                                            <b><span id="spnOLDRound2"></span></b>
                                                        </div>
                                                        <div id="roundgraphStudentGatePassClass">
                                                            <canvas id="canvasStudentGatePassClass"></canvas>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class='himsBoxContent'>
                                                    <div class='table-responsive'>
                                                        <table id='tblStudentGatePassCount' 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 () {
            TodaysCountGet();
        });

        function TodaysCountGet() {
            $.ajax({
                type: "POST",
                url: "FrontOfficeSummary.aspx/TodaysCountGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("TodayVisitorCountLabel").innerHTML = obj[0][0].value;
                            document.getElementById("TodayCourierCountLabel").innerHTML = obj[0][1].value;
                            document.getElementById("TodayStdGatePassCountLabel").innerHTML = obj[0][2].value;
                            document.getElementById("TodayEmpGatePassCountLabel").innerHTML = obj[0][3].value;
                        });
                    }
                    MonthCountGet();
                }
            });
        }

        function MonthCountGet() {
            $.ajax({
                type: "POST",
                url: "FrontOfficeSummary.aspx/MonthCountGet",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    if (obj != "") {
                        $.each(obj, function (i, item) {
                            document.getElementById("MonthVisitorCountLabel").innerHTML = obj[0][0].value;
                            document.getElementById("MonthCourierCountLabel").innerHTML = obj[0][1].value;
                            document.getElementById("MonthStdGatePassCountLabel").innerHTML = obj[0][2].value;
                            document.getElementById("MonthEmpGatePassCountLabel").innerHTML = obj[0][3].value;
                        });
                    }
                    MonthVisitorCountGet();
                }
            });
        }

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

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblVisitorCount tbody th').length - 1;
                    $('#VisitorMonthGraph').show();
                    $('#tblVisitorCount 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
                    };
                    $('#canvasVisitorMonth').remove();
                    $('#roundgraphVisitorMonth').append('<canvas id="canvasVisitorMonth" style="width:475px;"></canvas>');
                    var ctx = $("#canvasVisitorMonth").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: 'Visitor 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,

                    });
                    StudentGatePassMonthGet();
                }
            });
        }

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

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblStudentGatePassCount tbody th').length - 1;
                    $('#StudentGatePassGraph').show();
                    $('#tblStudentGatePassCount 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
                    };
                    $('#canvasStudentGatePassClass').remove();
                    $('#roundgraphStudentGatePassClass').append('<canvas id="canvasStudentGatePassClass" style="width:475px;"></canvas>');
                    var ctx = $("#canvasStudentGatePassClass").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: 'GatePass 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,

                    });
                    EmployeeGatePassMonthGet();
                }
            });
        }

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

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblEmployeeGatePassMonthCount tbody th').length - 1;
                    $('#EmployeeGatePassGraph').show();
                    $('#tblEmployeeGatePassMonthCount 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
                    };
                    $('#canvasEmployeeGatePassMonth').remove();
                    $('#roundgraphEmployeeGatePassMonth').append('<canvas id="canvasEmployeeGatePassMonth" style="width:475px;"></canvas>');
                    var ctx = $("#canvasEmployeeGatePassMonth").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: 'GatePass 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>
