151 lines
3.6 KiB
JavaScript
151 lines
3.6 KiB
JavaScript
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
|
|
}]
|
|
};
|
|
|
|
// let dummydata = [40, 30, 20];
|
|
// let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
|
|
|
|
// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
|
|
|
|
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
|
|
}]
|
|
};
|
|
|
|
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',
|
|
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
|
|
}
|
|
}
|
|
};
|
|
|
|
const chartConfig3 = {
|
|
type: 'pie',
|
|
data: question3Data,
|
|
options: {
|
|
responsive: true,
|
|
legend: {
|
|
position: 'top',
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: 'Question 3 Responses'
|
|
},
|
|
animation: {
|
|
animateScale: true,
|
|
animateRotate: true
|
|
}
|
|
}
|
|
};
|
|
// 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');
|
|
const myChart1 = new Chart(ctx1, chartConfig1);
|
|
|
|
const ctx2 = document.getElementById('chart2').getContext('2d');
|
|
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);
|
|
|