diff --git a/index.html b/index.html
index d369d94..8eaba77 100644
--- a/index.html
+++ b/index.html
@@ -58,9 +58,9 @@
-
diff --git a/main.css b/main.css
index 970948f..ecfdc3c 100644
--- a/main.css
+++ b/main.css
@@ -3,124 +3,133 @@
*/
/* General Styles */
body {
- font-family: 'Helvetica Neue', sans-serif;
- background: rgb(27,26,42);
- background: linear-gradient(90deg, rgba(61,87,92,1) 0%, rgb(69, 68, 84) 100%);
- }
-
- a {
- color: #2c82c9;
- text-decoration: none;
- }
-
- /* Header Styles */
- header {
- background-color: #2c82c9;
- color: #ffffff;
- padding: 20px;
- }
-
- header h1 {
- font-size: 48px;
- margin: 0;
- }
-
- header h2 {
- font-size: 24px;
- margin: 0;
- }
-
- /* Navigation Styles */
- nav {
- background-color: #ffffff;
- padding: 20px;
- }
-
- nav ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
-
- nav li {
- display: inline-block;
- margin-right: 20px;
- }
-
- nav a {
- color: #333333;
- font-size: 18px;
- text-decoration: none;
- }
-
- nav a:hover {
- color: #2c82c9;
- }
-
- /* Main Content Styles */
- main {
- padding: 20px;
- }
-
- main h1 {
- font-size: 36px;
- margin: 0 0 20px 0;
- }
-
- main p {
- font-size: 18px;
- line-height: 1.5;
- margin: 0 0 20px 0;
- }
-
- /* Footer Styles */
- footer {
- background-color: #2e2d2d;
- color: #ffffff;
- padding: 20px;
- text-align: center;
- }
-
- footer p {
- font-size: 18px;
- margin: 0;
- }
-
- /* Backgrund stuffs*/
- * {
- box-sizing: border-box;
- }
-
- .bg {
- /* The image used */
- background-image: url("tempbg.png");
-
- /* Add the blur effect */
- filter: blur(8px);
- -webkit-filter: blur(8px);
-
- /* Full height */
- height: 100%;
-
- /* Center and scale the image nicely */
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- }
-
- /* Position text in the middle of the page/image */
- .bg-text {
- background-color: rgb(0, 0, 0); /* Fallback color */
- background-color: rgba(0,0,0, 0.4); /* opacity/see-through */
- color: white;
- font-weight: bold;
- border: 3px solid #f1f1f1;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- z-index: 2;
- width: 80%;
- padding: 20px;
- text-align: center;
- }
\ No newline at end of file
+ font-family: 'Helvetica Neue', sans-serif;
+ background: rgb(27, 26, 42);
+ background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0%, rgb(69, 68, 84) 100%);
+}
+
+a {
+ color: #2c82c9;
+ text-decoration: none;
+}
+
+/* Header Styles */
+header {
+ background-color: #2c82c9;
+ color: #ffffff;
+ padding: 20px;
+}
+
+header h1 {
+ font-size: 48px;
+ margin: 0;
+}
+
+header h2 {
+ font-size: 24px;
+ margin: 0;
+}
+
+/* Navigation Styles */
+nav {
+ background-color: #ffffff;
+ padding: 20px;
+}
+
+nav ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+nav li {
+ display: inline-block;
+ margin-right: 20px;
+}
+
+nav a {
+ color: #333333;
+ font-size: 18px;
+ text-decoration: none;
+}
+
+nav a:hover {
+ color: #2c82c9;
+}
+
+/* Main Content Styles */
+main {
+ padding: 20px;
+}
+
+main h1 {
+ font-size: 36px;
+ margin: 0 0 20px 0;
+}
+
+main p {
+ font-size: 18px;
+ line-height: 1.5;
+ margin: 0 0 20px 0;
+}
+
+/* Footer Styles */
+footer {
+ background-color: #2e2d2d;
+ color: #ffffff;
+ padding: 20px;
+ text-align: center;
+}
+
+footer p {
+ font-size: 18px;
+ margin: 0;
+}
+
+/* Backgrund stuffs*/
+* {
+ box-sizing: border-box;
+}
+
+.bg {
+ /* The image used */
+ background-image: url("tempbg.png");
+
+ /* Add the blur effect */
+ filter: blur(8px);
+ -webkit-filter: blur(8px);
+
+ /* Full height */
+ height: 100%;
+
+ /* Center and scale the image nicely */
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+/* Position text in the middle of the page/image */
+.bg-text {
+ background-color: rgb(0, 0, 0);
+ /* Fallback color */
+ background-color: rgba(0, 0, 0, 0.4);
+ /* opacity/see-through */
+ color: white;
+ font-weight: bold;
+ border: 3px solid #f1f1f1;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 2;
+ width: 80%;
+ padding: 20px;
+ text-align: center;
+}
+
+.chart-container {
+ position: relative;
+ margin: auto;
+ height: 80vh;
+ width: 80vw;
+}
\ No newline at end of file
diff --git a/main.js b/main.js
index aa856c6..809b213 100644
--- a/main.js
+++ b/main.js
@@ -1,9 +1,11 @@
const submitButton = document.getElementById('subBut');
submitButton.addEventListener("click", parseName);
-var barChart = document.querySelector('#grades');
-if(barChart.getAttribute('value') == 'invisible'){
- barChart.style.display = 'none';
+var chartDiv = document.querySelector('#grades');
+if(chartDiv.getAttribute('value') == 'invisible'){
+ chartDiv.style.display = 'none';
}
+var gradeChart;
+const ctx = document.getElementById("gradeBar");
/*
Parse the name
@@ -78,16 +80,38 @@ async function PapaParse(department, num, name) {
// console.log(selectedClass[i]["Count of letter grade"]);
}
console.log(gradeDist);
- loadChart(gradeDist);
- barChart.style.display = '';
+ if(gradeChart) {
+ gradeChart.config.data = {
+ labels: [
+ 'A',
+ 'A-',
+ 'B+',
+ 'B',
+ 'B-',
+ 'C+',
+ 'C',
+ 'C-',
+ 'D+',
+ 'D',
+ 'D-',
+ 'F'],
+ datasets: [{
+ label: 'Grade Distribution',
+ data: Object.values(gradeDist),
+ borderWidth: 3,
+ // borderColor: '#36A2EB',
+ backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
+ }]
+ };
+ gradeChart.update();
+ } else {
+ loadChart(gradeDist);
+ chartDiv.style.display = '';
+ }
}
-var randomColorGenerator = function () {
- return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
-};
function loadChart(gradeDist) {
- const ctx = document.getElementById("gradeBar");
- new Chart(ctx, {
+ gradeChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
@@ -106,17 +130,26 @@ function loadChart(gradeDist) {
datasets: [{
label: 'Grade Distribution',
data: Object.values(gradeDist),
- borderWidth: 1,
- // borderColor: '#36A2EB',
+ borderWidth: 3,
+ barThickness: 50,
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
}]
},
options: {
- scales: {
- y: {
- beginAtZero: true
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ stacked: true,
+ grid: {
+ display: true,
+ }
+ },
+ x: {
+ grid: {
+ display: false
+ }
+ }
}
}
- }
});
}