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: [{ 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 = [30, 20, 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 }] }; // 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.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);