piegraphs added

2024-03-31 15:58:34 +02:00
parent 074406aec5
commit 64ba63e9ad
3 changed files with 218 additions and 28 deletions
--- a/web/newWebsite/questions-dashboard.html
+++ b/web/newWebsite/questions-dashboard.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">

 <head>
@@ -6,10 +6,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/questions-dashboard-styles.css">
    <title>Graphs</title>
-    <script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>

 <nav class="navbar">
@@ -30,8 +30,62 @@

 <body>
    <script src="questions-main.js"></script>
+    <div class="chart-container">
+        <h2>Question 1</h2>
+        <canvas id="chart1"></canvas>
+
+        <h2>Question 2</h2>
+        <canvas id="chart2"></canvas>
+
+         Add more questions and canvas elements as needed -->
+    <!-- </div>
    <div id="data-container">
    </div>

 </body>
-</html>
+</html> --> 
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/questions-dashboard-styles.css">
+    <title>Graphs</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+
+<nav class="navbar">
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a href="index.html" class="nav-link">Dashboard</a>
+        </li>
+        <li class="nav-item">
+            <a href="graphs.html" class="nav-link">Graphs</a>
+        </li>
+        <li class="nav-item">
+            <a href="settings.html" class="nav-link">Settings</a>
+        </li>
+        <li class="nav-item">
+            <a href="questions-dashboard.html" class="nav-link">Questions</a>
+    </ul>
+</nav>
+
+<body>
+    <div class="chart-container">
+        <h2>Question 1</h2>
+        <canvas id="chart1"></canvas>
+
+        <h2>Question 2</h2>
+        <canvas id="chart2"></canvas>
+
+        <!-- Add more questions and canvas elements as needed -->
+    </div>
+
+    <script src="questions-main.js"></script>
+</body>
+</html>
--- a/web/newWebsite/questions-main.js
+++ b/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);
--- a/web/newWebsite/styles/questions-dashboard-styles.css
+++ b/web/newWebsite/styles/questions-dashboard-styles.css
@@ -6,7 +6,7 @@
  body {
    padding-top: 5vw;
    display: flex;
-    background-color: #afafaf;
+    background-color: #dbd7d7;
    margin: 0;
  }
  
@@ -47,4 +47,12 @@
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
+}
+
+.chart-container {
+  width: 80%;
+  margin: 20px auto;
+}
+canvas {
+  margin-bottom: 20px;
 }