diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index f3cb2f2..6e267a1 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -1,50 +1,3 @@ - - - @@ -90,6 +43,6 @@ - + - + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js index 356d3e0..a1e301b 100644 --- a/web/newWebsite/questions-main-class.js +++ b/web/newWebsite/questions-main-class.js @@ -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 - }] - }; - } -} \ No newline at end of file +// 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 +// }] +// }; +// } +// } \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 581545d..747707a 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -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);