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) {
    debugger;
    // 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) {
    debugger;
    //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) + '%'

            });
        }

        debugger;
        return series;

    }
}

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

function EarlyExit(s, count) {
    debugger;
    //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) {
    debugger;
    //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)
{
    debugger;
    //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].toFixed(2)
             });
             
        }
        
        debugger;
        return series;

    }
}


function formatDatemonth(StartDate) {
    debugger;
    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) {
    debugger;
    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
//    //},

//},