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 }] }; // 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);