class working kindof, kan nog niet gelezen worden vanaf andere js file.
This commit is contained in:
@@ -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>
|
||||
<html lang="en">
|
||||
|
||||
@@ -90,6 +43,6 @@
|
||||
</div>
|
||||
|
||||
<script src="questions-main.js"></script>
|
||||
<!-- <script src="questions-main-class.js"></script> -->
|
||||
<script src="questions-main-class.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
@@ -1,27 +1,27 @@
|
||||
class QuestionCreationClass {
|
||||
constructor(data, label) {
|
||||
this.data = data;
|
||||
this.label = label;
|
||||
}
|
||||
// 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
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
// 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
|
||||
// }]
|
||||
// };
|
||||
// }
|
||||
// }
|
@@ -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 = {
|
||||
labels: ['Option A', 'Option B', 'Option C'],
|
||||
datasets: [{
|
||||
@@ -17,10 +45,10 @@ const question1Data = {
|
||||
}]
|
||||
};
|
||||
|
||||
// let dummydata = [40, 30, 20];
|
||||
// let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
|
||||
let dummydata = [30, 20, 20];
|
||||
let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
|
||||
|
||||
// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
|
||||
const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
|
||||
|
||||
const question2Data = {
|
||||
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
|
||||
const chartConfig1 = {
|
||||
type: 'pie',
|
||||
@@ -101,7 +110,7 @@ const chartConfig2 = {
|
||||
|
||||
const chartConfig3 = {
|
||||
type: 'pie',
|
||||
data: question3Data,
|
||||
data: question3Data.questionData,
|
||||
options: {
|
||||
responsive: true,
|
||||
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
|
||||
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 myChart3 = new Chart(ctx3, chartConfig3);
|
||||
// const ctx3 = document.getElementById('chart3').getContext('2d');
|
||||
// const myChart3 = new Chart(ctx3, chartConfig3);
|
||||
|
||||
|
Reference in New Issue
Block a user