Beautiyf

index.html

@@ -58,9 +58,9 @@
         <br><br>
       </form>
     </form>
-    <div id="grades" value="invisible" class="center" style="width:800px; margin:0 auto;">
+    <div class="chart-container" id="grades" value="invisible" class="center" style="position: relative; height:40vh; width:80vw">
       <!--Bar graph stuff-->
-      <canvas id="gradeBar" style="width:100%;max-width:700px"></canvas>
+      <canvas id="gradeBar"></canvas>
     </div>
   </div>
   <script src='main.js'></script>

main.css

@@ -110,8 +110,10 @@ body {
 
 /* Position text in the middle of the page/image */
 .bg-text {
-    background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgb(0, 0, 0);
-    background-color: rgba(0,0,0, 0.4); /* opacity/see-through */
+  /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.4);
+  /* opacity/see-through */
   color: white;
   font-weight: bold;
   border: 3px solid #f1f1f1;
@@ -124,3 +126,10 @@ body {
   padding: 20px;
   text-align: center;
 }
+
+.chart-container {
+  position: relative;
+  margin: auto;
+  height: 80vh;
+  width: 80vw;
+}

main.js

@@ -1,9 +1,11 @@
 const submitButton = document.getElementById('subBut');
 submitButton.addEventListener("click", parseName);
-var barChart = document.querySelector('#grades');
+var chartDiv = document.querySelector('#grades');
-if(barChart.getAttribute('value') == 'invisible'){
+if(chartDiv.getAttribute('value') == 'invisible'){
-    barChart.style.display = 'none';
+    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);
+    if(gradeChart) {
-    barChart.style.display = '';
+        gradeChart.config.data = {
-}
+            labels: [           
-var randomColorGenerator = function () { 
+                'A',
-    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8); 
+                '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 = '';
+    }
+}
 
 function loadChart(gradeDist) {
-    const ctx = document.getElementById("gradeBar");
+    gradeChart = new Chart(ctx, {
-    new Chart(ctx, {
         type: 'bar',
         data: {
         labels: [           
@@ -106,15 +130,24 @@ function loadChart(gradeDist) {
         datasets: [{
             label: 'Grade Distribution',
             data: Object.values(gradeDist),
-            borderWidth: 1,
+            borderWidth: 3,
-            // borderColor: '#36A2EB',
+            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: {
+            maintainAspectRatio: false,
             scales: {
               y: {
-            beginAtZero: true
+                stacked: true,
+                grid: {
+                  display: true,
+                }
+              },
+              x: {
+                grid: {
+                  display: false
+                }
               }
             }
         }