piegraphs added

web/newWebsite/questions-main.js

@@ -1,28 +1,156 @@
-// Sample data
-const dataItems = [
-    { id: 1, name: "Item 1", description: "Description for Item 1" },
-    { id: 2, name: "Item 2", description: "Description for Item 2" },
-    { id: 3, name: "Item 3", description: "Description for Item 3" }
-];
 
-// Function to display data items on the webpage
-function displayDataItems() {
-    const container = document.getElementById("data-container");
+// // Sample data
+// const dataItems = [
+//     { id: 1, name: "Question 1", description: "Description for Item 1" },
+//     { id: 2, name: "Question 2", description: "Description for Item 2" },
+// ];
 
-    // Clear previous content
-    container.innerHTML = "";
+// // Function to display data items on the webpage
+// function displayDataItems() {
+//     const container = document.getElementById("data-container");
 
-    // 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);
-    });
-}
+//     // Clear previous content
+//     container.innerHTML = "";
 
-// Call the function to display data items when the page loads
-window.onload = displayDataItems;
+//     // 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);