// // Sample data
// const dataItems = [
//     { id: 1, name: "Question 1", description: "Description for Item 1" },
//     { id: 2, name: "Question 2", description: "Description for Item 2" },
// ];

// // Function to display data items on the webpage
// function displayDataItems() {
//     const container = document.getElementById("data-container");

//     // Clear previous content
//     container.innerHTML = "";

//     // Loop through data items and create HTML elements
//     dataItems.forEach(item => {
//         const itemElement = document.createElement("div");
//         itemElement.classList.add("data-item");
//         itemElement.innerHTML = `
//             <h2>${item.name}</h2>
//             <p>${item.description}</p>
//         `;
//         container.appendChild(itemElement);
//     });
// }

// // Call the function to display data items when the page loads
// window.onload = displayDataItems;

// // Sample data for the questionnaire results
// const questionnaireData = {
//     labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
//     datasets: [{
//         label: 'Responses',
//         data: [20, 35, 15, 10, 20], // Sample response counts for each option
//         backgroundColor: [
//             'rgba(255, 99, 132, 0.2)',
//             'rgba(54, 162, 235, 0.2)',
//             'rgba(255, 206, 86, 0.2)',
//             'rgba(75, 192, 192, 0.2)',
//             'rgba(153, 102, 255, 0.2)'
//         ],
//         borderColor: [
//             'rgba(255, 99, 132, 1)',
//             'rgba(54, 162, 235, 1)',
//             'rgba(255, 206, 86, 1)',
//             'rgba(75, 192, 192, 1)',
//             'rgba(153, 102, 255, 1)'
//         ],
//         borderWidth: 1
//     }]
// };

// // Chart configuration
// const chartConfig = {
//     type: 'bar',
//     data: questionnaireData,
//     options: {
//         scales: {
//             yAxes: [{
//                 ticks: {
//                     beginAtZero: true
//                 }
//             }]
//         }
//     }
// };

// // Create the chart
// const ctx = document.getElementById('chart').getContext('2d');
// const myChart = new Chart(ctx, chartConfig);

// Sample data for the questionnaire results
const question1Data = {
    labels: ['Option A', 'Option B', 'Option C'],
    datasets: [{
        label: 'Responses',
        data: [40, 30, 20],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
    }]
};

const question2Data = {
    labels: ['Option A', 'Option B', 'Option C'],
    datasets: [{
        label: 'Responses',
        data: [25, 35, 40],
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
    }]
};

// Chart configurations for each question
const chartConfig1 = {
    type: 'pie',
    data: question1Data,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Question 1 Responses'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

const chartConfig2 = {
    type: 'pie',
    data: question2Data,
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Question 2 Responses'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};

// Create the charts
const ctx1 = document.getElementById('chart1').getContext('2d');
const myChart1 = new Chart(ctx1, chartConfig1);

const ctx2 = document.getElementById('chart2').getContext('2d');
const myChart2 = new Chart(ctx2, chartConfig2);