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

<asp:Content ID="Content1" ContentPlaceHolderID="CP" runat="Server">

    <script src="../../App_Themes/newTheme/js/jquery-3.3.1.min.js"></script>
    <script src="../../JavaScript/Chart.min.js"></script>

    <script>
        var Id;
        var GroupId;
        var BatchId;
        var DepartmentId;
        var classId;
        var DivisionId;
        var statusId;
        var ExamSubGroupId;
        var Header = [];
        var ReHeader;

        $(document).ready(function () {
            var myurl = window.location.href;
            var keyval = myurl.split('?')[1].split('&');
            OrgId = parseInt(keyval[0].split('=')[1].toString());
            Id = OrgId = parseInt(keyval[0].split('=')[1].toString());
            BatchId = parseInt(keyval[1].split('=')[1].toString());
            ExamSubGroupId = parseInt(keyval[2].split('=')[1].toString());

            $.ajax({
                type: "POST",
                url: "PassFailStudentAnalysis.aspx/GetOrgId",
                data: JSON.stringify({ "Id": Id }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    Header[0] = "<h5 class='page-title'><a href='#' onclick='dashboardpage()'>" + obj[0].Title + "</a></h5>" +
                    " <h5 class='page-title' ><a href='#' onclick='PageName()'>Pass Fail Student Analysis</a></h5>";
                    $("#HeaderLabel").text("Assessment Dashboard");
                    document.getElementById("HeaderTitle").innerHTML = Header;
                    ReHeader = document.getElementById("HeaderTitle").innerHTML;
                }
            });

            DepartmentDataBind(Id, BatchId, ExamSubGroupId);
        });
        function PageName() {
            window.location.href = "../MobileView/AssessmentDetailDashboard.aspx?OrgId=" + Id;
        }
        function HeaderDisplay(id) {
            if (id == 1) {
                document.getElementById("DepartHead").style.display = "block";
                document.getElementById("ClassHead").style.display = "none";
                document.getElementById("DivisionHead").style.display = "none";
                document.getElementById("roundgraphdivDept").style.display = "block";
                document.getElementById("roundgraphdivClass").style.display = "none";
                document.getElementById("roundgraphdivDivision").style.display = "none";
                $("#Depart").hide();
                $("#class").hide();
                document.getElementById("HeaderTitle").innerHTML = ReHeader;
                Header = [];
            }
            else if (id == 2) {
                document.getElementById("DepartHead").style.display = "none";
                document.getElementById("ClassHead").style.display = "block";
                document.getElementById("DivisionHead").style.display = "none";
                document.getElementById("roundgraphdivDept").style.display = "none";
                document.getElementById("roundgraphdivClass").style.display = "block";
                document.getElementById("roundgraphdivDivision").style.display = "none";
                $("#Depart").show();
                $("#class").hide();
                var h1 = [Header[0], Header[1]];
                Header = h1;
            }
            else if (id == 3) {
                document.getElementById("DepartHead").style.display = "none";
                document.getElementById("ClassHead").style.display = "none";
                document.getElementById("DivisionHead").style.display = "block";
                document.getElementById("roundgraphdivDept").style.display = "none";
                document.getElementById("roundgraphdivClass").style.display = "none";
                document.getElementById("roundgraphdivDivision").style.display = "block";
                $("#Depart").show();
                $("#class").show();
            }
        }

        function DepartmentDataBind(Id, BatchId, ExamSubGroupId) {
            $.ajax({
                type: "POST",
                url: "PassFailStudentAnalysis.aspx/DeptWisePassFailStdGet",
                data: JSON.stringify({ "OrgId": Id, "BatchId": parseInt(BatchId), "ExamSubGroupId": parseInt(ExamSubGroupId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tlbDepartment = "";
                    var totalpass = 0;
                    var totalfail = 0;
                    if (obj != "") {
                        tlbDepartment += "<tr><th>Department Name</th><th>Pass Count</th><th>Fail Count</th><th>Total Count</th><th>Pass Percentage</th></tr>";
                        $.each(obj, function (i, item) {
                            tlbDepartment += "<tr><td><a onclick='ClassDataBind(" + item.GroupId + ",\"" + item.GroupName + " \", \"" + ExamSubGroupId + "\", \"" + item.PassStudent + "\", \"" + item.FailStudent + "\")'>"
                                + item.GroupName + "</a></td><td>" + item.PassStudent + "</td><td>" + item.FailStudent + "</td><td>" + (item.PassStudent + item.FailStudent) + "</td><td>" + Math.ceil(item.PassStudent * 100 / (item.PassStudent + item.FailStudent) + 0) + "</td></tr>";
                            totalpass += parseInt(item.PassStudent);
                            totalfail += parseInt(item.FailStudent);
                        });

                        tlbDepartment += "<tr class='clstotal'><td style='font-weight:bold'>Total</td><td style='font-weight:bold'>" + totalpass + "</td><td style='font-weight:bold'>" + totalfail + "</td><td style='font-weight:bold'>" + (totalpass + totalfail) + "</td><td></td></tr>";

                        document.getElementById("HeaderTitle").innerHTML = Header;
                        ReHeader = document.getElementById("HeaderTitle").innerHTML;


                    }
                    else { tlbDepartment += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblDepartment").innerHTML = tlbDepartment;
                    document.getElementById("DepartHead").style.display = "block";
                    document.getElementById("roundgraphdivDept").style.display = "block";
                    statusId = 1;

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblDepartment tbody th').length - 1;
                    $('#roundgraphdivDept').show();
                    $('#round1graphdivDept').show();
                    $('#tblDepartment 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 - 1),
                            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 - 1)

                        });
                        //dataPoint = [];
                        //locationlbl = [];
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length - 1),
                        datasets: chartdata
                    };
                    $('#myTotalDept').remove();
                    $('#roundgraphDept').append('<canvas id="myTotalDept"></canvas>');
                    var ctx = $("#myTotalDept").get(0).getContext('2d');
                    var opt = {
                        responsive: false,
                        legend: false,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontSize: 10
                                }
                            }],
                             xAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontSize: 10
                                }
                            }]
                        },
                        "hover": {
                                    "animationDuration": 0
                        },
                        "animation": {
                                    "duration": 1,
                                    "onComplete": function () {
                                        var chartInstance = this.chart,
                                          ctx = chartInstance.ctx;
                                        ctx.font = "1px Arial";
                                        //ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                        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);
                                            });
                                        });
                                        //ctx.scales.yAxes.ticks.beginatzero = true
                                    },
                        },

                        //showTooltips: false,
                        //onAnimationComplete: function () {

                        //var ctx = this.chart.ctx;
                        //ctx.font = this.scale.font;
                        //ctx.fillStyle = this.scale.textColor
                        //ctx.textAlign = "center";
                        //ctx.textBaseline = "bottom";

                        //this.datasets.forEach(function (dataset) {
                        //    dataset.bars.forEach(function (bar) {
                        //        ctx.fillText(bar.value, bar.x, bar.y - 5);
                        //    });
                        //  })
                        //}
                    };
                    //var opt = {
                    //    "hover": {
                    //        "animationDuration": 0
                    //    },
                    //    "animation": {
                    //        "duration": 1,
                    //        "onComplete": function () {
                    //            var chartInstance = this.chart,
                    //              ctx = chartInstance.ctx;

                    //            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    //            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 + 5);
                    //                });
                    //            });
                    //            ctx.scales.yAxes.ticks.beginatzero = true
                    //        },
                    //    },
                    //    legend: {
                    //        "display": false
                    //    },
                    //    tooltips: {
                    //        "enabled": false
                    //    },
                    //    responsive: true,
                    //    scales: {
                    //        yaxes: [{
                    //            ticks: {
                    //                beginatzero: true
                    //            }
                    //        }]
                    //    }
                    //    //    scales: {
                    //    //        yAxes: [{
                    //    //            display: true,
                    //    //            gridLines: {
                    //    //                display: true
                    //    //            },
                    //    //            ticks: {
                    //    //                //max: Math.max(...data.datasets[0].data) + 10,
                    //    //        display: false,
                    //    //        beginAtZero: true
                    //    //    }
                    //    //}],
                    //    //xAxes: [{
                    //    //    gridLines: {
                    //    //        display: true
                    //    //    },
                    //    //    ticks: {
                    //    //        beginAtZero: true
                    //    //    }
                    //    //}]
                    //    //}
                    //}
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });

                }
            });
        }
        function dashboardpage() {
            window.location.href = "../MobileView/AssessmentDetailDashboard.aspx?OrgId=" + Id;
        }

        function ClassDataBind(GroupId, GroupName, ExamSubGroupId, PassStudent, FailStudent) {
            $.ajax({
                type: "POST",
                url: "PassFailStudentAnalysis.aspx/ClassWisePassFailStdGet",
                data: JSON.stringify({ "OrgId": OrgId, "BatchId": parseInt(BatchId), "DepartId": parseInt(GroupId), "ExamSubGroupId": parseInt(ExamSubGroupId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblClss = "";
                    var totalpass = 0;
                    var totalfail = 0;
                    Header[0] = ReHeader;
                    if (obj != "") {
                        tblClss += "<tr><th>Class Name</th><th>Pass Count</th><th>Fail Count</th><th>Total Count</th><th>Pass Percentage</th></tr>";
                        $.each(obj, function (i, item) {
                            tblClss += "<tr><td><a onclick='DivisionDataBind(" + item.GroupId + ",\"" + item.GroupName + " \", \"" + ExamSubGroupId + " \", \"" + item.PassStudent
                                + " \", \"" + item.FailStudent + " \")'>" + item.GroupName + "</a></td><td>" + item.PassStudent + "</td><td>" + item.FailStudent + "</td><td>" + (item.FailStudent + item.PassStudent) + "</td><td>" + Math.ceil(item.PassStudent * 100 / (item.PassStudent + item.FailStudent)) + "</td></tr>";
                            totalpass += parseInt(item.PassStudent);
                            totalfail += parseInt(item.FailStudent);

                        });
                        Header[1] = " <h5 class='page-title' style='display:Block' id='Depart'><a href='#' onclick='HeaderDisplay(1)'>" + GroupName + "</a></h5>";
                        tblClss += "<tr><td style='font-weight:bold'>Total</td><td style='font-weight:bold'>" + totalpass + "</td><td style='font-weight:bold'>" + totalfail + "</td><td style='font-weight:bold'>" + (totalpass + totalfail) + "</td><td></td></tr>";
                    }
                    else { tblClss += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblClss").innerHTML = tblClss;
                    document.getElementById("HeaderTitle").innerHTML = '';
                    $.each(Header, function (i, item) {
                        document.getElementById("HeaderTitle").innerHTML += Header[i];

                    });

                    document.getElementById("DepartHead").style.display = "none";
                    document.getElementById("roundgraphdivDept").style.display = "none";
                    document.getElementById("ClassHead").style.display = "block";
                    statusId = 2;

                    document.getElementById("roundgraphdivClass").style.display = "block";

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblClss tbody th').length - 1;
                    $('#roundgraphdivClass').show();
                    $('#round1graphdivClass').show();
                    $('#tblClss tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0 && colcnt == index2) {
                                    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 - 1),
                            fillColor: "rgba(22,22,22,1)",
                            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 - 1)
                        });
                        //dataPoint = [];
                        //locationlbl = [];
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length - 1),
                        datasets: chartdata
                    };
                    $('#myTotalClass').remove();
                    $('#roundgraphClass').append('<canvas id="myTotalClass"></canvas>');
                    var ctx = $("#myTotalClass").get(0).getContext('2d');
                    var opt = {
                        responsive: true,
                        legend: false,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        },
                        "hover": {
                            "animationDuration": 0
                        },
                        "animation": {
                            "duration": 1,
                            "onComplete": function () {
                                var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;

                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                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);
                                    });
                                });
                               // ctx.scales.yAxes.ticks.beginatzero = true
                            },
                        },

                        //showTooltips: false,
                        //onAnimationComplete: function () {

                        //var ctx = this.chart.ctx;
                        //ctx.font = this.scale.font;
                        //ctx.fillStyle = this.scale.textColor
                        //ctx.textAlign = "center";
                        //ctx.textBaseline = "bottom";

                        //this.datasets.forEach(function (dataset) {
                        //    dataset.bars.forEach(function (bar) {
                        //        ctx.fillText(bar.value, bar.x, bar.y - 5);
                        //    });
                        //  })
                        //}
                    };
                    //var opt = {
                    //    "hover": {
                    //        "animationDuration": 0
                    //    },
                    //    "animation": {
                    //        "duration": 1,
                    //        "onComplete": function () {
                    //            var chartInstance = this.chart,
                    //              ctx = chartInstance.ctx;

                    //            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    //            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 + 5);
                    //                });
                    //            });
                    //            ctx.scales.yAxes.ticks.beginatzero = true
                    //        },
                    //    },
                    //    legend: {
                    //        "display": false
                    //    },
                    //    tooltips: {
                    //        "enabled": false
                    //    },
                    //    responsive: true,
                    //    scales: {
                    //        yaxes: [{
                    //            ticks: {
                    //                beginatzero: true
                    //            }
                    //        }]
                    //    }
                    //    //    scales: {
                    //    //        yAxes: [{
                    //    //            display: true,
                    //    //            gridLines: {
                    //    //                display: true
                    //    //            },
                    //    //            ticks: {
                    //    //                //max: Math.max(...data.datasets[0].data) + 10,
                    //    //        display: false,
                    //    //        beginAtZero: true
                    //    //    }
                    //    //}],
                    //    //xAxes: [{
                    //    //    gridLines: {
                    //    //        display: true
                    //    //    },
                    //    //    ticks: {
                    //    //        beginAtZero: true
                    //    //    }
                    //    //}]
                    //    //}
                    //}
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });
                }
            });
        }
        function DivisionDataBind(GroupId, GroupName, ExamSubGroupId, PassStudent, FailStudent) {
            $.ajax({
                type: "POST",
                url: "PassFailStudentAnalysis.aspx/DivWisePassFailStdGet",
                data: JSON.stringify({ "OrgId": OrgId, "BatchId": parseInt(BatchId), "ClassId": parseInt(GroupId), "ExamSubGroupId": parseInt(ExamSubGroupId) }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var obj = (result.d);
                    var tblDivision = "";
                    var totalpass = 0;
                    var totalfail = 0;
                    if (obj != "") {
                        tblDivision += "<tr><th>Division Name</th><th>Pass Count</th><th>Fail Count</th><th>Total Count</th><th>Pass Percentage</th></tr>";
                        $.each(obj, function (i, item) {
                            tblDivision += "<td>" + item.GroupName + "</td><td>" + item.PassStudent + "</td><td>" + item.FailStudent + "</td><td>" + (item.PassStudent + item.FailStudent) + "</td><td>" + Math.ceil(item.PassStudent * 100 / (item.PassStudent + item.FailStudent)) + "</td></tr>";
                            totalpass += parseInt(item.PassStudent);
                            totalfail += parseInt(item.FailStudent);
                        });
                        tblDivision += "<tr><td style='font-weight:bold'>Total</td><td style='font-weight:bold'>" + totalpass + "</td><td style='font-weight:bold'>" + totalfail + "</td><td style='font-weight:bold'>" + (totalpass + totalfail) + "</td><td></td></tr>";
                        Header[2] = " <h5 class='page-title' style='display:block'  id='class'><a href='#' onclick='HeaderDisplay(2)'>" + GroupName + "</a></h5>";
                    }
                    else { tblDivision += "<tr><td colspan='8' class='record'>No records found..!!</td></tr>"; }
                    document.getElementById("tblDivision").innerHTML = tblDivision;
                    document.getElementById("HeaderTitle").innerHTML = '';
                    $.each(Header, function (i, item) {
                        document.getElementById("HeaderTitle").innerHTML += Header[i];

                    });
                    document.getElementById("DepartHead").style.display = "none";
                    document.getElementById("ClassHead").style.display = "none";
                    document.getElementById("roundgraphdivClass").style.display = "none";
                    document.getElementById("DivisionHead").style.display = "block";
                    statusId = 3;

                    document.getElementById("roundgraphdivDivision").style.display = "block";

                    var dataPoint = [];
                    var lables = [];
                    var chartdata = [];
                    var dataPoint1 = [];
                    var lables1 = [];
                    var chartdata1 = [];
                    var lbl = [];
                    var locationlbl = [];
                    var colcnt = 0;
                    colcnt = $('#tblDivision tbody th').length - 1;
                    $('#roundgraphdivDivision').show();
                    $('#round1graphdivDivision').show();
                    $('#tblDivision tbody tr').each(function (index) {
                        $(this).find('th,td').each(function (index2) {
                            if ($(this).is('th')) {
                                if (index2 != 0 && colcnt == index2) {
                                    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 - 1),
                            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 - 1)
                        });
                        //dataPoint = [];
                        //locationlbl = [];
                    }
                    var data = {
                        labels: locationlbl.slice(0, locationlbl.length - 1),
                        datasets: chartdata
                    };
                    $('#myTotalDivision').remove();
                    $('#roundgraphDivision').append('<canvas id="myTotalDivision"></canvas>');
                    var ctx = $("#myTotalDivision").get(0).getContext('2d');
                    var opt = {
                        responsive: true,
                        legend: false,
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        },
                        "hover": {
                            "animationDuration": 0
                        },
                        "animation": {
                            "duration": 1,
                            "onComplete": function () {
                                var chartInstance = this.chart,
                                  ctx = chartInstance.ctx;

                                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                                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);
                                    });
                                });
                               // ctx.scales.yAxes.ticks.beginatzero = true
                            },
                        },

                        //showTooltips: false,
                        //onAnimationComplete: function () {

                        //var ctx = this.chart.ctx;
                        //ctx.font = this.scale.font;
                        //ctx.fillStyle = this.scale.textColor
                        //ctx.textAlign = "center";
                        //ctx.textBaseline = "bottom";

                        //this.datasets.forEach(function (dataset) {
                        //    dataset.bars.forEach(function (bar) {
                        //        ctx.fillText(bar.value, bar.x, bar.y - 5);
                        //    });
                        //  })
                        //}
                    };
                    //var opt = {
                    //    "hover": {
                    //        "animationDuration": 0
                    //    },
                    //    "animation": {
                    //        "duration": 1,
                    //        "onComplete": function () {
                    //            var chartInstance = this.chart,
                    //              ctx = chartInstance.ctx;

                    //            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    //            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 + 5);
                    //                });
                    //            });
                    //            ctx.scales.yAxes.ticks.beginatzero = true
                    //        },
                    //    },
                    //    legend: {
                    //        "display": false
                    //    },
                    //    tooltips: {
                    //        "enabled": false
                    //    },
                    //    responsive: true,
                    //    scales: {
                    //        yaxes: [{
                    //            ticks: {
                    //                beginatzero: true
                    //            }
                    //        }]
                    //    }
                    //    //    scales: {
                    //    //        yAxes: [{
                    //    //            display: true,
                    //    //            gridLines: {
                    //    //                display: true
                    //    //            },
                    //    //            ticks: {
                    //    //                //max: Math.max(...data.datasets[0].data) + 10,
                    //    //        display: false,
                    //    //        beginAtZero: true
                    //    //    }
                    //    //}],
                    //    //xAxes: [{
                    //    //    gridLines: {
                    //    //        display: true
                    //    //    },
                    //    //    ticks: {
                    //    //        beginAtZero: true
                    //    //    }
                    //    //}]
                    //    //}
                    //}
                    var myNewChart5 = new Chart(ctx, {
                        type: "bar",
                        data: data,
                        options: opt,

                    });
                }
            });
        }

        function BackOrgFunction() {
            if (statusId == 2) {
                document.getElementById("DepartHead").style.display = "block";
                document.getElementById("ClassHead").style.display = "none";
                document.getElementById("DivisionHead").style.display = "none";
                document.getElementById("roundgraphdivDept").style.display = "block";
                document.getElementById("roundgraphdivClass").style.display = "none";
                document.getElementById("roundgraphdivDivision").style.display = "none";
                $("#Depart").hide();
                statusId--;
            }
            else if (statusId == 3) {
                document.getElementById("DepartHead").style.display = "none";
                document.getElementById("ClassHead").style.display = "block";
                document.getElementById("DivisionHead").style.display = "none";
                document.getElementById("roundgraphdivDept").style.display = "none";
                document.getElementById("roundgraphdivClass").style.display = "block";
                document.getElementById("roundgraphdivDivision").style.display = "none";
                $("#class").hide();
                var h1 = [Header[0], Header[1]];
                Header = h1;
                statusId--;
            }
            else {
                window.location.href = "../MobileView/AssessmentDetailDashboard.aspx?OrgId=" + OrgId;
            }

        }
        function DashBoard() { window.location.href = "../MobileView/DashBoard.aspx"; }
    </script>
    <asp:UpdatePanel ID="DoctorScheduleUpdatePanel" runat="server">
        <ContentTemplate>
            <div class="page-header row mb20">
                <div class="col-xl-12 col-sm-12 col-xs-12 border-bottom-inline padd-0">
                    <div class="col-md-12 ptb12 d-inline-flex">
                        <span class='btn btn-home btn-icon' onclick='DashBoard()' title='home'><span><i class='material-icons'>home</i></span></span>
                        <label class="header-topic justify-content-center" id="HeaderLabel"></label>
                        <input type="button" value="&#xf3e5;" id="bntBackOrg" onclick="BackOrgFunction()" skinid="0" class="float-right btn btn-back btn-icon fas" />
                    </div>
                    <div class="main-topic inner" id="HeaderTitle">
                    </div>
                </div>
            </div>


            <div class="bg-white row center-block">
                <div class="container-fluid">
                    <div class="gutters-tiny push js-appear-enabled animated fadeIn overflow-hidden" data-toggle="appear">

                        <div class="himssuHeader1WireBox col-md-12 pTop5" id="DepartHead" style="display: none">
                            <h3 class="table-topic">Department Wise Student Count</h3>
                         <div class="center-block">
                                <div class="col-md-9 pTop25" id="roundgraphdivDept" style="display: none">

                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        <b><span id="spnOLDRound1"></span></b>
                                    </div>
                                    <div id="roundgraphDept">
                                        <canvas id="myTotalDept"></canvas>
                                    </div>
                                </div>
                            </div>
 </div>
                            <div class='himsBoxContent'>
                                <div class='table-responsive'>
                                    <table id='tblDepartment' class='table table-striped table-bordered'>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="himssuHeader1WireBox col-md-12 pTop5" id="ClassHead" style="display: none">
                            <h3 class="table-topic">Class Wise Student Count</h3>
 <div class="center-block">
                                <div class="col-md-9 pTop15" id="roundgraphdivClass" style="display: none">
                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        <b><span id="spnOLDRound2"></span></b>
                                    </div>
                                    <div id="roundgraphClass">
                                        <canvas id="myTotalClass"></canvas>
                                    </div>
                                </div>
                            </div>
  </div>
                            <div class='himsBoxContent'>
                                <div class='table-responsive'>
                                    <table id='tblClss' class='table table-striped table-bordered'>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="himssuHeader1WireBox col-md-12 pTop5" id="DivisionHead" style="display: none">
                            <h3 class="table-topic">Division Wise Student Count</h3>

                            <div class="center-block">
                                <div class="col-md-9 pTop15" id="roundgraphdivDivision" style="display: none">
                                <div class="panel panel-info">
                                    <div class="panel-heading">
                                        <b><span id="spnOLDRound3"></span></b>
                                    </div>
                                    <div id="roundgraphDivision">
                                        <canvas id="myTotalDivision"></canvas>
                                    </div>
                                </div>
                            </div>
 </div>
                            <div class='himsBoxContent'>
                                <div class='table-responsive'>
                                    <table id='tblDivision' class='table table-striped table-bordered'>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

</asp:Content>

