function binddata() {

    debugger;
    var options = {
        chart: {
            type: "area",
            height: 500,
            foreColor: "#999",
            stacked: true,
            dropShadow: {
                enabled: false,
                enabledSeries: [0],
                top: -2,
                left: 2,
                blur: 5,
                opacity: 0.06
            },
            toolbar: {
                show: true,
                tools: {
                    zoomin: true,
                    zoomout: true,
                    // Other tools if any, set to false to hide them
                    zoom: false,
                    pan: false,
                    reset: false,
                    download: true,
                    customIcons: []
                },
                autoSelected: 'zoom' // Initial tool selection (optional)
            },
        },
        colors: ['#00E396'],
        //, '#ad0000', '#0090FF', '#250696'
        stroke: {
            curve: "smooth",
            width: 3
        },
        dataLabels: {
            enabled: true
        },
        series: [{
            name: 'Leave %',
            data: Leave(11)
        }
        //, {
        //    name: 'Absent %',
        //    data: Absent(11)
        //}, {
        //    name: 'LateIn %',
        //    data: LateIN(11)
        //},
        //{
        //    name: 'EarlyExit %',
        //    data: EarlyExit(11)
        //}
        ],
        markers: {
            size: 0,
            strokeColor: "#fff",
            strokeWidth: 3,
            strokeOpacity: 1,
            fillOpacity: 1,
            hover: {
                size: 6
            }
        },
        xaxis: {
            type: "category",
            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            labels: {
                style: {
                    fontWeight: 'bold', // Set the font weight to bold
                }
            },
        },
        yaxis: {
            labels: {
                offsetX: 15,
                offsetY: -5,
            },
            tooltip: {
                enabled: true
            }
        },

        grid: {
            padding: {
                left: 3,
                right: 5
            }
        },
        tooltip: {
            x: {
                format: "MMM yy"

            },
        },
        legend: {
            position: 'top',
            horizontalAlign: 'left'
        },
        fill: {
            type: "solid",
            fillOpacity: 0.7
        }
    };
    document.addEventListener("DOMContentLoaded", function () {
        var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);

        chart.render();
    });

}

//function binddata() {

//    debugger;
//    var options = {
//        chart: {
//            type: "area",
//            height: 500,
//            foreColor: "#999",
//            stacked: true,
//            dropShadow: {
//                enabled: false,
//                enabledSeries: [0],
//                top: -2,
//                left: 2,
//                blur: 5,
//                opacity: 0.06
//            }
//        },
//        colors: ['#00E396'],
//            //, '#ad0000', '#0090FF', '#250696'],
//        stroke: {
//            curve: "smooth",
//            width: 3
//        },
//        dataLabels: {
//            enabled: true
//        },
//        series: [{
//            name: 'Leave %',
//            data: Leave(11)
//        }
//        //, {
//        //    name: 'Absent %',
//        //    data: Absent(11)
//        //}, {
//        //    name: 'LateIn %',
//        //    data: LateIN(11)
//        //},
//        //{
//        //    name: 'EarlyExit %',
//        //    data: EarlyExit(11)
//        //}
//        ],
//        markers: {
//            size: 0,
//            strokeColor: "#fff",
//            strokeWidth: 3,
//            strokeOpacity: 1,
//            fillOpacity: 1,
//            hover: {
//                size: 6
//            }
//        },

//        xaxis: {
//            type: "category",
//            categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
//            labels: {
//                style: {
//                    fontWeight: 'bold', // Set the font weight to bold
//                }
//            },

//            //xaxis: {
//            //    type: "numeric" // Updated x-axis type
//            //},

//            //tooltip: {
//            //    custom: (series, seriesIndex, dataPointIndex, w)

//            //},


//            //xaxis: {
//            //    type: "numeric",
//            //},



//            yaxis: {
//                labels: {
//                    offsetX: 15,
//                    offsetY: -5,
//                },
//                tooltip: {
//                    enabled: true
//                }
//            },

//            grid: {
//                padding: {
//                    left: -5,
//                    right: 5
//                }
//            },
//            tooltip: {
//                x: {
//                    format: "MMM yy"

//                }

//            },
//            legend: {
//                position: 'top',
//                horizontalAlign: 'left'
//            },
//            fill: {
//                type: "solid",
//                fillOpacity: 0.7
//            }
//        }
//    };
//    document.addEventListener("DOMContentLoaded", function () {
//        var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);

//        chart.render();
//    });

//}

function getLeaveExtraData( dataPointIndex) {
    
    // Replace this with your logic to fetch the Leave Extra data based on the dataPointIndex
    //return "Leave extra data for index " + dataPointIndex;
    var leaveExtraData = [
    [
        "Extra info 1 for index 0",
        "Extra info 2 for index 0",
        "Extra info 3 for index 0"
    ],
    [
        "Extra info 1 for index 1",
        "Extra info 2 for index 1",
        "Extra info 3 for index 1"
    ],
    // ... add more arrays of data for each index as needed
    ];

    // Function to retrieve multiple additional tooltip data for the "Leave %" series
    //function getLeaveExtraData(dataPointIndex) {
        if (leaveExtraData[dataPointIndex]) {
            return leaveExtraData[dataPointIndex];
        } else {
            return ["No extra data available for this index"];
        }
    //}

    // Example usage:
    var dataPointIndex = 1; // Replace with the desired data point index

    var extraData = getLeaveExtraData(dataPointIndex);
    console.log(extraData);
}







// LateIN Count -----HH-----

function LateIN(s, count) {
    
    //var EnterFromDate = "Select From Date and To Date";

    //document.addEventListener("DOMContentLoaded", function () {
    var Dates = document.getElementById("ctl00_BodyContentPH_DllSelectYear");
    var Leave = document.getElementById("ctl00_BodyContentPH_HdnLate"); 
    if (Leave) {
        var hiddenValue = Leave.value;
        var StartDate = Dates.value;
        //const Month = formatDatemonth(StartDate);
        //const Month = "Jan";
        //const Year = formatDateYear(StartDate);
        var Year = Dates.value;
        var valueArray = hiddenValue.split(',').map(Number);
        var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
        ];
        var i = 0;
        var series = [];
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        for (var i = 0; i < 12; i++) {
            var date = new Date(Year, i, 1);

            //var formattedDate = date.toLocaleString('default', { month: 'short' }) + ' ' + Year; // e.g., "Jan 2023"
            formattedDate = monthNames[i]+ " " + Year;

            var x = formattedDate;

            //series.push([x, valueArray[i] + '%']);
            series.push({
                x: x,
                y: valueArray[i].toFixed(2) + '%'

            });
        }

        
        return series;

    }
}

// EarlyExit Count -----HH-----

function EarlyExit(s, count) {
    
    //var EnterFromDate = "Select From Date and To Date";

    //document.addEventListener("DOMContentLoaded", function () {
    var Dates = document.getElementById("ctl00_BodyContentPH_DllSelectYear");
    var Leave = document.getElementById("ctl00_BodyContentPH_HdnEarlyExit"); 
    if (Leave) {
        var hiddenValue = Leave.value;
        var StartDate = Dates.value;
        //const Month = formatDatemonth(StartDate);
        //const Month = "Jan";
        //const Year = formatDateYear(StartDate);
        var Year = Dates.value;
        var valueArray = hiddenValue.split(',').map(Number);
        var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
        ];
        var i = 0;
        var series = [];
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        for (var i = 0; i < 12; i++) {
            var date = new Date(Year, i, 1);

            //var formattedDate = date.toLocaleString('default', { month: 'short' }) + ' ' + Year; // e.g., "Jan 2023"
            formattedDate = monthNames[i]+ " " + Year;
            var x = formattedDate;
           
            //series.push([x, valueArray[i] + '%']);

            series.push({
                x: x,
                y: valueArray[i].toFixed(2) + '%'
            });
            
        }


        return series;

    }
}



// Absent Count -----HH-----
function Absent(s, count) {
    
    //var EnterFromDate = "Select From Date and To Date";

    //document.addEventListener("DOMContentLoaded", function () {
    var Dates = document.getElementById("ctl00_BodyContentPH_DllSelectYear");
    var Leave = document.getElementById("ctl00_BodyContentPH_HdnAbsent");
    if (Leave) {
        var hiddenValue = Leave.value;
        var StartDate = Dates.value;
        //const Month = formatDatemonth(StartDate);
        //const Month = "Jan";
        //const Year = formatDateYear(StartDate);
        var Year = Dates.value;
        var valueArray = hiddenValue.split(',').map(Number);
        var values = [valueArray,[0,1,2,3,4,5,6,7,8,9,10,11]
        ];
        var i = 0;
        var series = [];
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        for (var i = 0; i < 12; i++) {
            var date = new Date(Year, i, 1);

            //var formattedDate = date.toLocaleString('default', { month: 'short' }) + ' ' + Year; // e.g., "Jan 2023"
            formattedDate = monthNames[i]+ " " + Year;

            var x = formattedDate;

            //series.push([x, valueArray[i] + '%']);
            series.push({
                x: x,
                y: valueArray[i].toFixed(2) + '%'
            });
        }


        return series;

    }
}



// Leave Count -----HH-----
function Leave(s, count)
{
    
    //var EnterFromDate = "Select From Date and To Date";

    //document.addEventListener("DOMContentLoaded", function () {
    var Dates = document.getElementById("ctl00_BodyContentPH_DllSelectYear");
    var Leave = document.getElementById("ctl00_BodyContentPH_LblHdnLeave");
    if (Leave) {
        var hiddenValue = Leave.value;
        //var StartDate = Dates.options[dropdown.selectedIndex];
        //const Month = formatDatemonth(StartDate);
        var Year = Dates.value;
        var valueArray = hiddenValue.split(',').map(Number);
        var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
            
        ];
        var i = 0;
        var series = [];
        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        for (var i = 0; i < 12; i++) {
            var date = new Date(Year, i, 1);

            //var formattedDate = date.toLocaleString('default', { month: 'short' }) + ' ' + Year; // e.g., "Jan 2023"
            formattedDate = monthNames[i]+ " " + Year;
             var DataValue = values[i];
             var x = formattedDate;
             //series.push([x, valueArray[i] + '%']);
             series.push({
                 x: x,
                 y: valueArray[i]
             });
             
        }
        
        
        return series;

    }
}


function formatDatemonth(StartDate) {
    
    const months = [
      "Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

    const dateParts = StartDate.split('-'); // Split the date string
    if (dateParts.length !== 3) {
        return 'Invalid Date'; // Handle invalid input
    }

    const day = dateParts[0].padStart(2, '0');
    const month = dateParts[1]; // Subtract 1 for zero-based months
    const year = dateParts[2];
    return `${month}`;
    //return `${day} ${month} ${year}`;
}


function formatDateYear(StartDate) {
    
    const months = [
      "Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

    const dateParts = StartDate.split('-'); // Split the date string
    if (dateParts.length !== 3) {
        return 'Invalid Date'; // Handle invalid input
    }

    const day = dateParts[0].padStart(2, '0');
    const month = dateParts[1]; // Subtract 1 for zero-based months
    const year = dateParts[2];
    return `${year}`;
    //return `${day} ${month} ${year}`;
}

//xaxis: {
//    type: "category",
//    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
//    labels: {
//        style: {
//            fontWeight: 'bold', // Set the font weight to bold
//        },
//    //type: "datetime",
//    //axisBorder: {
//    //    show: false
//    //},
//    //axisTicks: {
//    //    show: false
//    //},

//},


// Attendance by Department chart 
//function AttendancebydeparmentChart(debData,debName) {
//    debugger;
//    var options = {
//        series: [{
//            name: 'Department %',
//            data: NewChartDepartment(11)
//        }],
//        chart: {
//            type: 'bar',
//            height: 350
//        },
//        plotOptions: {
//            bar: {
//                borderRadius: 4,
//                borderRadiusApplication: 'end',
//                horizontal: true,
//            }
//        },
//        dataLabels: {
//            enabled: false
//        },
//        xaxis: {
//            //categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
//            //  'United States', 'China', 'Germany'
//            //],
//            type: "category",
//            categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
//              'United States', 'China', 'Germany'],
//            labels: {
//                style: {
//                    fontWeight: 'bold', // Set the font weight to bold
//                }
//            },
//        },
//        yaxis: {
//            labels: {
//                offsetX: 35,
//                offsetY: 25,
//            },
//            tooltip: {
//                enabled: true
//            }
//        }
//    };
//    var chart = new ApexCharts(document.querySelector("#AttbyDep-chart"), options);
//    chart.render();
//}


function AttendancebydeparmentChart(debData, debName) {
    debugger;

    // Define your Y-axis labels
    //var debName = "Belize Sales Team,IT,IT,Production,Production,Sales,Sales Team,";
    var yAxisLabels = debName.split(',').map(item => item.trim()).filter(item => item !== '');

    // Define your series data
    //var debData = "0.00,0.00,0.00,0.00,0.00,0.00,0.00,";
    var cleanedString = debData.replace(/"/g, '').replace(/,$/, '');
    var seriesData = cleanedString.split(',').map(item => item.trim()).filter(item => item !== '').map(item => parseFloat(item)).filter(item => !isNaN(item));


    // Ensure the lengths match
    if (yAxisLabels.length !== seriesData.length) {
        console.error('The length of yAxisLabels and seriesData do not match.');
    } else {
        // Update the chart options
        var options = {
            series: [{
                name: 'Department %',
                data: seriesData
            }],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    borderRadiusApplication: 'end',
                    horizontal: true
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: yAxisLabels // Use the array of labels
            },// End of the X-axis (adjust as needed)
            yaxis: {
                labels: {
                    formatter: function (value) {
                        return value;
                    }
                },
                tickAmount: 10, // Number of ticks you want
                min: 0,         // Start of the X-axis
                max: 100
            },  // End of the Y-axis (adjust as needed)
            tooltip: {
            enabled: true, // Enable tooltips
            shared: false, // Show tooltips only for the hovered bar
            intersect: true, // Tooltip only appears when hovering over an individual bar
            y: {
            formatter: function (value) {
                return value + '%'; // Append '%' to the tooltip value
            }
        }
        }
        };

        // Initialize the chart with the updated options
        var chart = new ApexCharts(document.querySelector("#AttbyDep-chart"), options);
        chart.render();
    }

    //var options = {
    //    series: [{
    //        name: 'Department %',
    //        data: seriesData // Array of percentages (e.g., [10, 5, 9, ...])
    //    }],
    //    chart: {
    //        type: 'bar',
    //        height: 350
    //    },
    //    plotOptions: {
    //        bar: {
    //            borderRadius: 4,
    //            horizontal: true,
    //            barHeight: '75%', // Adjust this value to control the height of bars
    //            distributed: true // Gives different colors to each bar
    //        }
    //    },
    //    dataLabels: {
    //        enabled: false // Disables the display of data labels on bars
    //    },
    //    xaxis: {
    //        categories: yAxisLabels, // Array of category names (e.g., ['Sales', 'Account', 'Development', ...])
    //        labels: {
    //            style: {
    //                fontWeight: 'bold'
    //            },
    //            formatter: function (value) {
    //                return value + '%'; // Append '%' to the X-axis labels
    //            }
    //        }
    //    },
    //    yaxis: {
    //        labels: {
    //            show: true, // Ensure Y-axis labels are shown
    //            style: {
    //                fontWeight: 'bold' // Make Y-axis labels bold
    //            }
    //        },
    //        tooltip: {
    //            enabled: true // Enable tooltips on the Y-axis
    //        }
    //    },
    //    title: {
    //        text: 'Department Percentage Distribution',
    //        align: 'center'
    //    }
    //};

    //var options = {
    //    series: [{
    //        name: 'Department %',
    //        data: debName
    //    }],
    //    chart: {
    //        type: 'bar',
    //        height: 350
    //    },
    //    plotOptions: {
    //        bar: {
    //            borderRadius: 4,
    //            borderRadiusApplication: 'end',
    //            horizontal: true,
    //            barHeight: '75%', // Adjust this value to control the spacing between bars
    //            distributed: true // This will give different colors for each bar
    //        }
    //    },
    //    dataLabels: {
    //        enabled: false
    //    },
    //    xaxis: {
    //        categories: [],
    //        labels: {
    //            style: {
    //                fontWeight: 'bold'
    //            }
    //        }
    //    },
    //    yaxis: {
    //        labels: {
    //            offsetX: 35,
    //            offsetY: 25,
    //        },
    //        tooltip: {
    //            enabled: true
    //        }
    //    }
    //};

   
}

function AbsentbydeparmentChart(debData, debName) {
    debugger;

    // Define your Y-axis labels
    //var debName = "Belize Sales Team,IT,IT,Production,Production,Sales,Sales Team,";
    var yAxisLabels = debName.split(',').map(item => item.trim()).filter(item => item !== '');

    // Define your series data
    //var debData = "0.00,0.00,0.00,0.00,0.00,0.00,0.00,";
    var cleanedString = debData.replace(/"/g, '').replace(/,$/, '');
    var seriesData = cleanedString.split(',').map(item => item.trim()).filter(item => item !== '').map(item => parseFloat(item)).filter(item => !isNaN(item));


    // Ensure the lengths match
    if (yAxisLabels.length !== seriesData.length) {
        console.error('The length of yAxisLabels and seriesData do not match.');
    } else {
        // Update the chart options
        var options = {
            series: [{
                name: 'Department %',
                data: seriesData
            }],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    borderRadiusApplication: 'end',
                    horizontal: true
                }
            },
            dataLabels: {
                enabled: true,
                offsetX: -5,
                style: {
                    fontSize: '12px',
                    colors: ['#fff']
                },
            },
            stroke: {
                show: true,
                width: 1,
                colors: ['#fff']
            },
            tooltip: {
                shared: true,
                intersect: false
            },
            xaxis: {
                categories: yAxisLabels,
                labels: {
                    formatter: function (value) {
                        return value + '%';
                    }
                }// Use the array of labels
            },// End of the X-axis (adjust as needed)
            yaxis: {
                labels: {
                    formatter: function (value) {
                        return value ;
                    }
                },
                tickAmount: 10, // Number of ticks you want
                min: 0,         // Start of the X-axis
                max: 100,

            },  // End of the Y-axis (adjust as needed)
            tooltip: {
                enabled: true, // Enable tooltips
                shared: false, // Show tooltips only for the hovered bar
                intersect: true, // Tooltip only appears when hovering over an individual bar
                y: {
                    formatter: function (value) {
                        return value + '%'; // Append '%' to the tooltip value
                    }
                }
            },
            title: {
                        text: 'Absencens By Department',
                        align: 'center'
                    }
        };

        // Initialize the chart with the updated options
        var chart = new ApexCharts(document.querySelector("#AbsentbyDep-chart"), options);
        chart.render();
    }
    //var options = {
    //    series: [{
    //        name: 'Department %',
    //        data: seriesData // Array of percentages (e.g., [10, 5, 9, ...])
    //    }],
    //    chart: {
    //        type: 'bar',
    //        height: 350
    //    },
    //    plotOptions: {
    //        bar: {
    //            borderRadius: 4,
    //            horizontal: true,
    //            barHeight: '75%', // Adjust this value to control the height of bars
    //            distributed: true // Gives different colors to each bar
    //        }
    //    },
    //    dataLabels: {
    //        enabled: false // Disables the display of data labels on bars
    //    },
    //    xaxis: {
    //        categories: yAxisLabels, // Array of category names (e.g., ['Sales', 'Account', 'Development', ...])
    //        labels: {
    //            style: {
    //                fontWeight: 'bold'
    //            },
    //            formatter: function (value) {
    //                return value + '%'; // Append '%' to the X-axis labels
    //            }
    //        }
    //    },
    //    yaxis: {
    //        labels: {
    //            show: true, // Ensure Y-axis labels are shown
    //            style: {
    //                fontWeight: 'bold' // Make Y-axis labels bold
    //            }
    //        },
    //        tooltip: {
    //            enabled: true // Enable tooltips on the Y-axis
    //        }
    //    },
    //    title: {
    //        text: 'Department Percentage Distribution',
    //        align: 'center'
    //    }
    //};

    //var options = {
    //    series: [{
    //        name: 'Department %',
    //        data: debName
    //    }],
    //    chart: {
    //        type: 'bar',
    //        height: 350
    //    },
    //    plotOptions: {
    //        bar: {
    //            borderRadius: 4,
    //            borderRadiusApplication: 'end',
    //            horizontal: true,
    //            barHeight: '75%', // Adjust this value to control the spacing between bars
    //            distributed: true // This will give different colors for each bar
    //        }
    //    },
    //    dataLabels: {
    //        enabled: false
    //    },
    //    xaxis: {
    //        categories: [],
    //        labels: {
    //            style: {
    //                fontWeight: 'bold'
    //            }
    //        }
    //    },
    //    yaxis: {
    //        labels: {
    //            offsetX: 35,
    //            offsetY: 25,
    //        },
    //        tooltip: {
    //            enabled: true
    //        }
    //    }
    //};

  
}


// ----- New Chart For Department-- 

function NewChartDepartment(s, count) {
   
    var SelectedType = document.getElementById("ctl00_BodyContentPH_HdnDailyMonthly");
    if (SelectedType = 1) {

        var Daily = document.getElementById("ctl00_BodyContentPH_HdnDepartmentDaily");
        var DepartmentName = document.getElementById("ctl00_BodyContentPH_HdnDepartmentName");


        var DailyValue = Daily.value;
        var DepartmentName = DepartmentName.value;
        //var valueArray = hiddenValue.split(',').map(Number);
        //var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]];

        var valueArrays = DailyValue.split(',').map(value => parseFloat(value));
        var countArrays= Array.from({ length: valueArrays.length }, (_, index) => index);
        var countsforDepatment = valueArrays.length;
        var values = [valueArrays, countArrays];

        var i = 0;
        var series = [];
        var categories = [];
       // var DepartName = [DepartmentName];
        var departmentArray = DepartmentName.split(',');

        //for (var i = 0; i < departmentArray.length; i++) {
        //    series.push(valueArrays[i].toFixed(3));
        //    categories.push(departmentArray[i]);
        //}

        for (var i = 0; i < countsforDepatment; i++) {
            //var date = new Date(Year, i, 1);

            var Dep = departmentArray[i];
            var DataValue = values[i];

            var y = Dep;
            //series.push([x, valueArray[i] + '%']);
            series.push({
                x:  valueArrays[i].toFixed(3),
                y: y
            });
        }
        categories.push(departmentArray[i]);
        //for (var i = 0; i < departmentArray.length; i++) {
        //    series.push(valueArrays[i].toFixed(3));
        //    categories.push(departmentArray[i]);
        //}

        //ApexCharts.exec('AttbyDep-chart', 'updateOptions', {
        //    xaxis: {
        //        categories: categories
        //    }
        //});
    }
    else {
        //var Monthly = document.getElementById("ctl00_BodyContentPH_HdnDeparmentMonth");
        //var DepartmentName = document.getElementById("ctl00_BodyContentPH_HdnDepartmentName");

        //var valueArray = hiddenValue.split(',').map(Number);
        //var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]];

        //var i = 0;
        //var series = [];
        //var monthNames = [DepartmentName];

        var Daily = ocument.getElementById("ctl00_BodyContentPH_HdnDeparmentMonth");
        var DepartmentName = document.getElementById("ctl00_BodyContentPH_HdnDepartmentName");


        var DailyValue = Daily.value;
        var DepartmentName = DepartmentName.value;
        //var valueArray = hiddenValue.split(',').map(Number);
        //var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]];

        var valueArrays = DailyValue.split(',').map(value => parseFloat(value));
        var countArrays = Array.from({ length: valueArrays.length }, (_, index) => index);
        var countsforDepatment = valueArrays.length;
        var values = [valueArrays, countArrays];

        var i = 0;
        var series = [];
        var categories = [];
        // var DepartName = [DepartmentName];
        var departmentArray = DepartmentName.split(',');

        //for (var i = 0; i < departmentArray.length; i++) {
        //    series.push(valueArrays[i].toFixed(3));
        //    categories.push(departmentArray[i]);
        //}

        for (var i = 0; i < countsforDepatment; i++) {
            //var date = new Date(Year, i, 1);

            var Dep = departmentArray[i];
            var DataValue = values[i];

            var y = Dep;
            //series.push([x, valueArray[i] + '%']);
            series.push({
                x: valueArrays[i].toFixed(3),
                y: y
            });
        }
        categories.push(departmentArray[i]);
        //for (var i = 0; i < departmentArray.length; i++) {
        //    series.push(valueArrays[i].toFixed(3));
        //    categories.push(departmentArray[i]);
        //}

        //ApexCharts.exec('AttbyDep-chart', 'updateOptions', {
        //    xaxis: {
        //        categories: categories
        //    }
        //});



    }


   
    return series;
    //return { series, categories };
    
}


function NewChartDepartments(s, count) {
 

    var SelectedType = document.getElementById("ctl00_BodyContentPH_HdnDailyMonthly");
    if (SelectedType = 1) {

        var Daily = document.getElementById("ctl00_BodyContentPH_HdnDepartmentDaily");
        var DepartmentName = document.getElementById("ctl00_BodyContentPH_HdnDepartmentName");


        var DailyValue = Daily.value;
        var DepartmentName = DepartmentName.value;
        //var valueArray = hiddenValue.split(',').map(Number);
        //var values = [valueArray, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]];

        var valueArrays = DailyValue.split(',').map(value => parseFloat(value));
        var countArrays = Array.from({ length: valueArrays.length }, (_, index) => index);
        var countsforDepatment = valueArrays.length;
        var values = [valueArrays, countArrays];

        var i = 0;
        var series = [];
        // var DepartName = [DepartmentName];
        var departmentArray = DepartmentName.split(',');
        //for (var i = 0; i < countsforDepatment; i++) {
        //    //var date = new Date(Year, i, 1);

        //    var Dep = departmentArray[i];
        //    var DataValue = values[i];

        //    var y = Dep;
        //    //series.push([x, valueArray[i] + '%']);
        //    series.push({
        //        x: valueArrays[i].toFixed(3),
        //        y: y
        //    });
        //}
    }
   

   
    return departmentArray;
}









//function AttendancebydeparmentChart(debData, debName) {
//    debugger;
//    var options = {
//        series: [{
//            name: 'Depatment %',
//            data: NewChartDepartment(11)
//        }],
//        chart: {
//            type: 'bar',
//            height: 350
//        },
//        plotOptions: {
//            bar: {
//                borderRadius: 4,
//                borderRadiusApplication: 'end',
//                horizontal: true,
//            }
//        },
//        dataLabels: {
//            enabled: false
//        },
//        xaxis: {
//            categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
//              'United States', 'China', 'Germany'
//            ],
//        }
//    };
//    var chart = new ApexCharts(document.querySelector("#AttbyDep-chart"), options);
//    chart.render();
//}

