BAR CHART WIP

2023-04-19 21:51:58 -05:00
parent 3cf02a91e5
commit 563b7d72d3
2 changed files with 20 additions and 4 deletions
--- a/index.html
+++ b/index.html
@@ -19,6 +19,9 @@
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"
    integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script
+  src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
+  </script>
 </head>

 <body>
@@ -53,8 +56,8 @@
        <br><br>
      </form>
    </form>
-    <div class = "table">
-      
+    <div id="grades" value="invisible">
+      <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
    </div>
  </div>
  <script src='main.js'></script>
--- a/main.js
+++ b/main.js
@@ -1,5 +1,12 @@
 const submitButton = document.getElementById('subBut');
 submitButton.addEventListener("click", parseName);
+var barChart = document.querySelector('#grades');
+if(barChart.getAttribute('value') == 'invisible'){
+    barChart.style.display = 'none';
+}
+/*
+ Parse the name
+*/
 function parseName() {
    let className = '';
    let classNum = '';
@@ -16,7 +23,6 @@ function parseName() {
        return;
    }
    if(className == '' || department == '') {
-        
        return;
    }
    console.log(department, 0, className);
@@ -71,4 +77,11 @@ async function PapaParse(department, num, name) {
        // console.log(selectedClass[i]["Count of letter grade"]);
    }
    console.log(gradeDist);
+    barChart.style.display = '';
 }
+
+const myChart = new Chart("myChart", {
+    type: "bar",
+    data: {},
+    options: {}
+  });