class working kindof, kan nog niet gelezen worden vanaf andere js file.

This commit is contained in:
Bram Barbieri
2024-03-31 20:48:50 +02:00
parent 3435bdaaab
commit f2050a54a4
3 changed files with 60 additions and 118 deletions

View File

@@ -1,50 +1,3 @@
<!-- <!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>
<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> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@@ -90,6 +43,6 @@
</div> </div>
<script src="questions-main.js"></script> <script src="questions-main.js"></script>
<!-- <script src="questions-main-class.js"></script> --> <script src="questions-main-class.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,27 +1,27 @@
class QuestionCreationClass { // class QuestionCreationClass {
constructor(data, label) { // constructor(data, label) {
this.data = data; // this.data = data;
this.label = label; // this.label = label;
} // }
get questionData() { // get questionData() {
return { // return {
labels: this.label, // labels: this.label,
datasets: [{ // datasets: [{
label: 'Responses', // label: 'Responses',
data: this.data, // data: this.data,
backgroundColor: [ // backgroundColor: [
'rgba(255, 99, 132, 0.2)', // 'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)', // 'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)' // 'rgba(255, 206, 86, 0.2)'
], // ],
borderColor: [ // borderColor: [
'rgba(255, 99, 132, 1)', // 'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)', // 'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)' // 'rgba(255, 206, 86, 1)'
], // ],
borderWidth: 1 // borderWidth: 1
}] // }]
}; // };
} // }
} // }

View File

@@ -1,3 +1,31 @@
class QuestionCreationClass {
constructor(data, label) {
this.data = data;
this.label = label;
}
get questionData() {
return {
labels: this.label,
datasets: [{
label: 'Responses',
data: this.data,
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 question1Data = { const question1Data = {
labels: ['Option A', 'Option B', 'Option C'], labels: ['Option A', 'Option B', 'Option C'],
datasets: [{ datasets: [{
@@ -17,10 +45,10 @@ const question1Data = {
}] }]
}; };
// let dummydata = [40, 30, 20]; let dummydata = [30, 20, 20];
// let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
const question2Data = { const question2Data = {
labels: ['Option A', 'Option B', 'Option C'], labels: ['Option A', 'Option B', 'Option C'],
@@ -41,25 +69,6 @@ const question2Data = {
}] }]
}; };
const question3Data = {
labels: ['Option A', 'Option B', 'Option C'],
datasets: [{
label: 'Responses',
data: [30, 30, 30],
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 // Chart configurations for each question
const chartConfig1 = { const chartConfig1 = {
type: 'pie', type: 'pie',
@@ -101,7 +110,7 @@ const chartConfig2 = {
const chartConfig3 = { const chartConfig3 = {
type: 'pie', type: 'pie',
data: question3Data, data: question3Data.questionData,
options: { options: {
responsive: true, responsive: true,
legend: { legend: {
@@ -117,24 +126,6 @@ const chartConfig3 = {
} }
} }
}; };
// const chartConfig3 = {
// type: 'pie',
// data: question3Data.questionData(),
// options: {
// responsive: true,
// legend: {
// position: 'top',
// },
// title: {
// display: true,
// text: 'Question 3 Responses'
// },
// animation: {
// animateScale: true,
// animateRotate: true
// }
// }
// };
// Create the charts // Create the charts
const ctx1 = document.getElementById('chart1').getContext('2d'); const ctx1 = document.getElementById('chart1').getContext('2d');
@@ -145,6 +136,4 @@ const myChart2 = new Chart(ctx2, chartConfig2);
const ctx3 = document.getElementById('chart3').getContext('2d'); const ctx3 = document.getElementById('chart3').getContext('2d');
const myChart3 = new Chart(ctx3, chartConfig3); const myChart3 = new Chart(ctx3, chartConfig3);
// const ctx3 = document.getElementById('chart3').getContext('2d');
// const myChart3 = new Chart(ctx3, chartConfig3);