function prepareChart(chartType, chartData, labels, header) {
    const data = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            backgroundColor: [
                'rgba(210,105,30,0.8)',
                'rgba(244,164,96,0.8)',
                'rgba(222,184,135,0.8)',
                'rgba(188,143,143,0.8)',
                'rgba(176,196,222,0.8)',
                'rgba(184,134,11,0.8)',
                'rgba(238,232,170,0.8)',
                'rgba(189,183,107,0.8)',
                'rgba(128,128,0,0.8)',
                'rgba(255,255,0,0.8)',
                'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)',
                'rgba(143,188,143,0.8)',
                'rgba(0,255,255,0.8)',
                'rgba(230,230,250,0.8)',
                'rgba(105,105,105,0.8)'
            ],
            borderColor: [
                'rgb(255, 99, 132,0.8)',
                'rgb(75, 192, 192,0.8)',
                'rgb(255, 205, 86,0.8)',
                'rgba(255,182,193,0.8)',
                'rgba(219,112,147,0.8)',
                'rgba(139,69,19,0.8)',
                'rgba(210,105,30,0.8)',
                'rgba(244,164,96,0.8)',
                'rgba(222,184,135,0.8)',
                'rgba(188,143,143,0.8)',
                'rgba(176,196,222,0.8)',
                'rgba(184,134,11,0.8)',
                'rgba(238,232,170,0.8)',
                'rgba(189,183,107,0.8)',
                'rgba(128,128,0,0.8)',
                'rgba(255,255,0,0.8)',
                'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)',
                'rgba(143,188,143,0.8)',
                'rgba(0,255,255,0.8)',
                'rgba(230,230,250,0.8)',
                'rgba(105,105,105,0.8)'
            ],
            borderWidth: 1
        }]
    };

    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.4
        }]
    };

    // for radar chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
    };

    if (chartType == 'bar') {

        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'doughnut') {

        const ctx2 = document.getElementById('chart3').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'doughnut',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'pie') {
        const ctx2 = document.getElementById('chart3').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'pie',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx2 = document.getElementById('chart3').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById('chart3').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data3,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}


function prepareChart6(chartType, chartData, chartData1, chartData2, chartData3, chartData4, chartData5, chartData6, chartData7, labels, header) {
    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: "Female",
            fill: false,
            borderColor: 'rgb(255, 99, 132,0.8)',
            backgroundColor: 'rgb(255, 99, 132,0.8)',
            data: chartData7,
        }, {
            label: "Male",
            fill: false,
            borderColor: 'rgb(150, 99, 132,0.8)',
            backgroundColor: 'rgb(150, 99, 132,0.8)',
            data: chartData6,
        },
        {
            label: "Blue Collar",
            fill: false,
            borderColor: 'rgb(255, 99, 100,0.8)',
            backgroundColor: 'rgb(255, 99, 100,0.8)',
            data: chartData5,
        }, {
            label: "White Collar",
            fill: false,
            borderColor: 'rgb(50, 78, 168)',
            backgroundColor: 'rgb(50, 78, 168)',
            data: chartData4,
        }, {
            label: "Total",
            fill: false,
            borderColor: 'rgb(168, 50, 64)',
            backgroundColor: 'rgb(168, 50, 64)',
            data: chartData3,
        }, {
            label: "Non Emp",
            fill: false,
            borderColor: 'rgb(166, 168, 50)',
            backgroundColor: 'rgb(166, 168, 50)',
            data: chartData2,
        }, {
            label: "Contractual Emp",
            fill: false,
            borderColor: 'rgb(128, 0, 0)',
            backgroundColor: 'rgb(128, 0, 0)',
            data: chartData1,
        }, {
            label: "Regular Emp",
            fill: false,
            borderColor: 'rgb(255, 215, 0)',
            backgroundColor: 'rgb(255, 215, 0)',
            data: chartData,
        }]
    };

    // for bar chart
    const data = {
        labels: labels,
        datasets: [{
            label: "Female",
            borderColor: 'rgb(190, 20, 255)',
            backgroundColor: 'rgb(190, 20, 255)',
            borderWidth: 1,
            data: chartData7,
            hoverOffset: 4
        }, {
            label: "Male",
            borderColor: 'rgb(120, 230, 255)',
            backgroundColor: 'rgb(120, 230, 255)',
            borderWidth: 1,
            data: chartData6,
            hoverOffset: 4
        }, {
            label: "Blue Collar",
            borderColor: 'rgb(255, 12, 20)',
            backgroundColor: 'rgb(255, 12, 20)',
            borderWidth: 1,
            data: chartData5,
            hoverOffset: 4
        }, {
            label: "White Collar",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(50, 78, 168)',
            borderWidth: 1,
            data: chartData4,
            hoverOffset: 4
        }, {
            label: "Total",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(120, 100, 120)',
            borderWidth: 1,
            data: chartData3,
            hoverOffset: 4
        }, {
            label: "Non Emp",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(166, 168, 50)',
            borderWidth: 1,
            data: chartData2,
            hoverOffset: 4
        }, {
            label: "Contractual Emp",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(128, 0, 0)',
            borderWidth: 1,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: "Regular Emp",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(255, 215, 0)',
            borderWidth: 1,
            data: chartData,
            hoverOffset: 4
        }]
    };

    // for pie and doughnut chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: "Female",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',

                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData7,
            hoverOffset: 4
        }, {
            label: "Male",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData6,
            hoverOffset: 4
        }, {
            label: "Blue Collar",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)', 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData5,
            hoverOffset: 4
        }, {
            label: "White Collar",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData4,
            hoverOffset: 4
        }, {
            label: "Total",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData3,
            hoverOffset: 4
        }, {
            label: "Non Emp",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData2,
            hoverOffset: 4
        }, {
            label: "Contractual Emp",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: "Regular Emp",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData,
            hoverOffset: 4
        }]
    };

    //for radar chart
    const data4 = {
        labels: labels,
        datasets: [{
            label: "Female",
            fill: true,
            data: chartData7,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }, {
            label: "Male",
            fill: true,
            data: chartData6,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }, {
            label: "Blue Collar",
            fill: true,
            data: chartData5,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }, {
            label: "White Collar",
            data: chartData4,
            backgroundColor: 'rgba(50, 78, 168, 0.2)',
            borderColor: 'rgb(50, 78, 168)',
            pointBackgroundColor: 'rgb(50, 78, 168)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(50, 78, 168)'
        }, {
            label: "Total",
            data: chartData3,
            backgroundColor: 'rgba(168, 50, 64, 0.2)',
            borderColor: 'rgb(168, 50, 64)',
            pointBackgroundColor: 'rgb(168, 50, 64)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(168, 50, 64)'
        }, {
            label: "Non Emp",
            data: chartData2,
            backgroundColor: 'rgba(166, 168, 50, 0.2)',
            borderColor: 'rgb(166, 168, 50)',
            pointBackgroundColor: 'rgb(166, 168, 50)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(166, 168, 50)'
        }, {
            label: "Contractual Emp",
            data: chartData1,
            backgroundColor: 'rgba(128, 0, 0, 0.2)',
            borderColor: 'rgb(128, 0, 0)',
            pointBackgroundColor: 'rgb(128, 0, 0)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(128, 0, 0)'
        }, {
            label: "Regular Emp",
            data: chartData,
            backgroundColor: 'rgba(255, 215, 0, 0.2)',
            borderColor: 'rgb(255, 215, 0)',
            pointBackgroundColor: 'rgb(255, 215, 0)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 215, 0)'
        }]
    };

    if (chartType == 'bar') {
        const ctx1 = document.getElementById('chart4').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'doughnut') {
        const ctx1 = document.getElementById('chart4').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'doughnut',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
            },
        });
    } else if (chartType == 'pie') {
        const ctx1 = document.getElementById('chart4').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'pie',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx1 = document.getElementById('chart4').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
                tension: 0.4,
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById('chart4').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data4,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}

function prepareChart2(chartType, labels, header, chartData1, chartData2) {
    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: "Before",
            fill: false,
            borderColor: 'rgb(50, 168, 82)',
            backgroundColor: 'rgb(50, 168, 82)',
            data: chartData1,
        }, {
            label: "After",
            fill: false,
            borderColor: 'rgb(50, 78, 168)',
            backgroundColor: 'rgb(50, 78, 168)',
            data: chartData2,
        }]
    };

    // for bar chart
    const data = {
        labels: labels,
        datasets: [{
            label: "Before",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(50, 168, 82)',
            borderWidth: 1,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: "After",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(50, 78, 168)',
            borderWidth: 1,
            data: chartData2,
            hoverOffset: 4
        }]
    };

    // for pie and doughnut chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: "Before",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: "After",
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData2,
            hoverOffset: 4
        }]
    };

    //for radar chart
    const data4 = {
        labels: labels,
        datasets: [{
            label: "Before",
            fill: true,
            data: chartData1,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }, {
            label: "After",
            data: chartData2,
            backgroundColor: 'rgba(50, 78, 168, 0.2)',
            borderColor: 'rgb(50, 78, 168)',
            pointBackgroundColor: 'rgb(50, 78, 168)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(50, 78, 168)'
        }]
    };

    if (chartType == 'bar') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'doughnut') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'doughnut',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
            },
        });
    } else if (chartType == 'pie') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'pie',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
                tension: 0.4,
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById('chart3').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data4,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}

function prepareChart5(chartType, chartData5, labels, header, chartData4, chartData3, chartData2, chartData1, chartData) {
    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: new Date().getFullYear() - 5,
            fill: false,
            borderColor: 'rgb(50, 168, 82)',
            backgroundColor: 'rgb(50, 168, 82)',
            data: chartData5,
        }, {
            label: new Date().getFullYear() - 4,
            fill: false,
            borderColor: 'rgb(50, 78, 168)',
            backgroundColor: 'rgb(50, 78, 168)',
            data: chartData4,
        }, {
            label: new Date().getFullYear() - 3,
            fill: false,
            borderColor: 'rgb(168, 50, 64)',
            backgroundColor: 'rgb(168, 50, 64)',
            data: chartData3,
        }, {
            label: new Date().getFullYear() - 2,
            fill: false,
            borderColor: 'rgb(166, 168, 50)',
            backgroundColor: 'rgb(166, 168, 50)',
            data: chartData2,
        }, {
            label: new Date().getFullYear() - 1,
            fill: false,
            borderColor: 'rgb(128, 0, 0)',
            backgroundColor: 'rgb(128, 0, 0)',
            data: chartData1,
        }, {
            label: new Date().getFullYear(),
            fill: false,
            borderColor: 'rgb(255, 215, 0)',
            backgroundColor: 'rgb(255, 215, 0)',
            data: chartData,
        }]
    };

    // for bar chart
    const data = {
        labels: labels,
        datasets: [{
            label: new Date().getFullYear() - 5,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(50, 168, 82)',
            borderWidth: 1,
            data: chartData5,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 4,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(50, 78, 168)',
            borderWidth: 1,
            data: chartData4,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 3,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(168, 50, 64)',
            borderWidth: 1,
            data: chartData3,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 2,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(166, 168, 50)',
            borderWidth: 1,
            data: chartData2,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 1,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(128, 0, 0)',
            borderWidth: 1,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear(),
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(255, 215, 0)',
            borderWidth: 1,
            data: chartData,
            hoverOffset: 4
        }]
    };

    // for pie and doughnut chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: new Date().getFullYear() - 5,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData5,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 4,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData4,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 3,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData3,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 2,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData2,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear() - 1,
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: new Date().getFullYear(),
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData,
            hoverOffset: 4
        }]
    };

    //for radar chart
    const data4 = {
        labels: labels,
        datasets: [{
            label: new Date().getFullYear() - 5,
            fill: true,
            data: chartData5,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }, {
            label: new Date().getFullYear() - 4,
            data: chartData4,
            backgroundColor: 'rgba(50, 78, 168, 0.2)',
            borderColor: 'rgb(50, 78, 168)',
            pointBackgroundColor: 'rgb(50, 78, 168)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(50, 78, 168)'
        }, {
            label: new Date().getFullYear() - 3,
            data: chartData3,
            backgroundColor: 'rgba(168, 50, 64, 0.2)',
            borderColor: 'rgb(168, 50, 64)',
            pointBackgroundColor: 'rgb(168, 50, 64)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(168, 50, 64)'
        }, {
            label: new Date().getFullYear() - 2,
            data: chartData2,
            backgroundColor: 'rgba(166, 168, 50, 0.2)',
            borderColor: 'rgb(166, 168, 50)',
            pointBackgroundColor: 'rgb(166, 168, 50)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(166, 168, 50)'
        }, {
            label: new Date().getFullYear() - 1,
            data: chartData1,
            backgroundColor: 'rgba(128, 0, 0, 0.2)',
            borderColor: 'rgb(128, 0, 0)',
            pointBackgroundColor: 'rgb(128, 0, 0)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(128, 0, 0)'
        }, {
            label: new Date().getFullYear(),
            data: chartData,
            backgroundColor: 'rgba(255, 215, 0, 0.2)',
            borderColor: 'rgb(255, 215, 0)',
            pointBackgroundColor: 'rgb(255, 215, 0)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 215, 0)'
        }]
    };

    if (chartType == 'bar') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'doughnut') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'doughnut',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
            },
        });
    } else if (chartType == 'pie') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'pie',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx1 = document.getElementById('chart3').getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
                tension: 0.4,
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById('chart3').getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data4,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}

function prepareChart_dynamic_id(chartType, chartData, labels, header, id) {
    const data = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            backgroundColor: [
                'rgba(210,105,30,0.8)',
                'rgba(244,164,96,0.8)',
                'rgba(222,184,135,0.8)',
                'rgba(188,143,143,0.8)',
                'rgba(176,196,222,0.8)',
                'rgba(184,134,11,0.8)',
                'rgba(238,232,170,0.8)',
                'rgba(189,183,107,0.8)',
                'rgba(128,128,0,0.8)',
                'rgba(255,255,0,0.8)',
                'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)',
                'rgba(143,188,143,0.8)',
                'rgba(0,255,255,0.8)',
                'rgba(230,230,250,0.8)',
                'rgba(105,105,105,0.8)'
            ],
            borderColor: [
                'rgb(255, 99, 132,0.8)',
                'rgb(75, 192, 192,0.8)',
                'rgb(255, 205, 86,0.8)',
                'rgba(255,182,193,0.8)',
                'rgba(219,112,147,0.8)',
                'rgba(139,69,19,0.8)',
                'rgba(210,105,30,0.8)',
                'rgba(244,164,96,0.8)',
                'rgba(222,184,135,0.8)',
                'rgba(188,143,143,0.8)',
                'rgba(176,196,222,0.8)',
                'rgba(184,134,11,0.8)',
                'rgba(238,232,170,0.8)',
                'rgba(189,183,107,0.8)',
                'rgba(128,128,0,0.8)',
                'rgba(255,255,0,0.8)',
                'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)',
                'rgba(143,188,143,0.8)',
                'rgba(0,255,255,0.8)',
                'rgba(230,230,250,0.8)',
                'rgba(105,105,105,0.8)'
            ],
            borderWidth: 1
        }]
    };

    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.4
        }]
    };

    // for radar chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
    };

    if (chartType == 'bar') {

        const ctx1 = document.getElementById(id).getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'doughnut') {

        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'doughnut',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'pie') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'pie',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data3,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}


function prepareChart_dynamic_id(chartType, chartData, labels, header, id) {
    const data = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            backgroundColor: [
                'rgba(210,105,30,0.8)',
                'rgba(244,164,96,0.8)',
                'rgba(222,184,135,0.8)',
                'rgba(188,143,143,0.8)',
                'rgba(176,196,222,0.8)',
                'rgba(184,134,11,0.8)',
                'rgba(238,232,170,0.8)',
                'rgba(189,183,107,0.8)',
                'rgba(128,128,0,0.8)',
                'rgba(255,255,0,0.8)',
                'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)',
                'rgba(143,188,143,0.8)',
                'rgba(0,255,255,0.8)',
                'rgba(230,230,250,0.8)',
                'rgba(105,105,105,0.8)'
            ],
            borderColor: [
                'rgb(255, 99, 132,0.8)',
                'rgb(75, 192, 192,0.8)',
                'rgb(255, 205, 86,0.8)',
                'rgba(255,182,193,0.8)',
                'rgba(219,112,147,0.8)',
                'rgba(139,69,19,0.8)',
                'rgba(210,105,30,0.8)',
                'rgba(244,164,96,0.8)',
                'rgba(222,184,135,0.8)',
                'rgba(188,143,143,0.8)',
                'rgba(176,196,222,0.8)',
                'rgba(184,134,11,0.8)',
                'rgba(238,232,170,0.8)',
                'rgba(189,183,107,0.8)',
                'rgba(128,128,0,0.8)',
                'rgba(255,255,0,0.8)',
                'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)',
                'rgba(143,188,143,0.8)',
                'rgba(0,255,255,0.8)',
                'rgba(230,230,250,0.8)',
                'rgba(105,105,105,0.8)'
            ],
            borderWidth: 1
        }]
    };

    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.4
        }]
    };

    // for radar chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: header,
            data: chartData,
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
    };

    if (chartType == 'bar') {

        const ctx1 = document.getElementById(id).getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'doughnut') {

        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'doughnut',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'pie') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'pie',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data3,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}


function prepareChart_for_two_datasets_with_dynamic_id(chartType, chartData1, chartData2, labels, header, id) {
    // for line chart
    const data2 = {
        labels: labels,
        datasets: [{
            label: 'BMI(<25)',
            fill: false,
            borderColor: 'rgb(50, 78, 168)',
            backgroundColor: 'rgb(50, 78, 168)',
            data: chartData1,
        }, {
            label: 'BMI(>=25)',
            fill: false,
            borderColor: 'rgb(168, 50, 64)',
            backgroundColor: 'rgb(168, 50, 64)',
            data: chartData2,
        }]
    };

    // for bar chart
    const data = {
        labels: labels,
        datasets: [{
            label: 'BMI(<25)',
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(50, 78, 168)',
            borderWidth: 1,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: 'BMI(>=25)',
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: 'rgb(168, 50, 64)',
            borderWidth: 1,
            data: chartData2,
            hoverOffset: 4
        }]
    };

    // for pie and doughnut chart
    const data3 = {
        labels: labels,
        datasets: [{
            label: 'BMI(<25)',
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData1,
            hoverOffset: 4
        }, {
            label: 'BMI(>=25)',
            borderColor: 'rgb(255, 255, 255)',
            backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgba(154,205,50,0.8)',
                'rgba(124,252,0,0.8)',
                'rgba(128,0,0,0.8)',
                'rgba(178,34,34,0.8)',
                'rgba(220,20,60,0.8)',
                'rgba(255,0,0,0.8)',
                'rgba(255,99,71,0.8)',
                'rgba(205,92,92,0.8)',
                'rgba(233,150,122,0.8)',
                'rgba(255,140,0,0.8)',
                'rgba(255,215,0,0.8)',
                'rgba(152,251,152,0.8)'],
            // borderWidth: 2,
            data: chartData2,
            hoverOffset: 4
        }]
    };

    //for radar chart
    const data4 = {
        labels: labels,
        datasets: [{
            label: 'BMI(<25)',
            data: chartData1,
            backgroundColor: 'rgba(50, 78, 168, 0.2)',
            borderColor: 'rgb(50, 78, 168)',
            pointBackgroundColor: 'rgb(50, 78, 168)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(50, 78, 168)'
        }, {
            label: 'BMI(>=25)',
            data: chartData2,
            backgroundColor: 'rgba(168, 50, 64, 0.2)',
            borderColor: 'rgb(168, 50, 64)',
            pointBackgroundColor: 'rgb(168, 50, 64)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgb(168, 50, 64)'
        }]
    };

    if (chartType == 'bar') {
        const ctx1 = document.getElementById(id).getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'bar',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'doughnut') {
        const ctx1 = document.getElementById(id).getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'doughnut',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
            },
        });
    } else if (chartType == 'pie') {
        const ctx1 = document.getElementById(id).getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'pie',
            data: data3,
            options: {
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                }
            }
        });
    } else if (chartType == 'line') {
        const ctx1 = document.getElementById(id).getContext('2d');
        const myChart1 = new Chart(ctx1, {
            type: 'line',
            data: data2,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                layout: {
                    padding: 20
                },
                title: {
                    display: true,
                    text: header
                },
                tension: 0.4,
            }
        });
    } else if (chartType == 'radar') {
        const ctx2 = document.getElementById(id).getContext('2d');
        const myChart2 = new Chart(ctx2, {
            type: 'radar',
            data: data4,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: true,
                    position: 'bottom',
                },
                title: {
                    display: true,
                    text: header,
                },
                layout: {
                    padding: 20
                }
            }
        });
    }
}


$('#startDate1').datepicker({
    format: "mm-yyyy",
    viewMode: "months",
    minViewMode: "months"
});
$('#endDate1').datepicker({
    format: "mm-yyyy",
    viewMode: "months",
    minViewMode: "months"
});

function open_pdf() {
    html2canvas(document.getElementById("report_div"), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL(); //image data of canvas
            // var doc = new jsPDF('p','pt','a2');
            var doc = new jsPDF('l', 'mm', [300, 350]);
            doc.addImage(img, 10, 10);
            doc.save('graph.pdf');
        }
    });
}