added chart

SmearcarDB/static/index.css

@@ -203,11 +203,6 @@ a {
 	grid-gap: 2vh;	
 }
 
- #dataValues {
-	grid-template-columns: 1fr 1fr;
-	grid-template-rows: 2fr 5fr 2fr;
-}
-
 #home {
 	display: block;
 
@@ -267,6 +262,25 @@ a {
 	font-weight: 300;
 }
 
+.row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 100%;
+	grid-gap: 2vh;
+}
+
+#dataValues > div {
+	margin-bottom: 2vh;
+}
+
+#dataValues .row {
+	height: 20%;
+}
+
+#dataValues #dataTable {
+	height: 42%;
+}
+
 #langSelect {
 	grid-column: 1;
 	grid-row: 1;
@@ -290,11 +304,6 @@ a {
 	margin: auto 0 auto 4vh;
 }
 
-#dataTable {
-	grid-column: 1 / 3;
-	grid-row: 2;
-}
-
 #dataTableCont {
 	display: grid;
 	font-weight: 300;

SmearcarDB/static/index.js

@@ -50,11 +50,7 @@ function updateMain(op) { // Updates the actual page.
     setTimeout(function() {
         console.log(op);
         document.getElementById(navSelect).style.display = "none";
-        if(op === "home") {
-            document.getElementById(op).style.display = "block";   
-        } else {
-            document.getElementById(op).style.display = "grid";      
-        }
+        document.getElementById(op).style.display = "block";   
         setTimeout(function() {
             document.getElementById(op).style.opacity = "1";
         }, 30);
@@ -134,6 +130,7 @@ function generateDropOp() { // For options that change based on data.
             }
             info.appendChild(p);
             info.appendChild(p2);
+            
             // Generate data box material.
             
             var phonemes = Object.keys(langInfo.phonemes);
@@ -171,6 +168,34 @@ function generateDropOp() { // For options that change based on data.
             }
             info.style.opacity = "1";
             dataBox.style.opacity = "1";
+            var graphData = Object.entries(langInfo.phonemes).sort(function(a,b) {
+               return b[1] - a[1];
+            });
+            graphData = [graphData.map(function(a,b) {
+                return a[0];
+            }), graphData.map(function(a,b) {
+                return a[1];
+            })];
+            // Generate graphs.
+            var ctx = document.getElementById("dataGraph1").getContext("2d");
+            var chart = new Chart(ctx, {
+                // The type of chart we want to create
+                type: 'bar',
+
+                // The data for our dataset
+                data: {
+                    labels: graphData[0],
+                    datasets: [{
+                        label: "Phoneme Prevalence",
+                        backgroundColor: 'rgb(255, 99, 132)',
+                        borderColor: 'rgb(255, 99, 132)',
+                        data: graphData[1],
+                    }]
+                },
+
+                // Configuration options go here
+                options: {}
+            });
         }, 300);
     }].concat(["Select language..."].concat(data.languages));
 }

SmearcarDB/templates/index.html

@@ -27,14 +27,16 @@
         <div id="home" class="optionContainer">
         </div>
         <div id="dataValues" class="optionContainer">
-            <div id="langSelect" class="card">
-                <h2>Language</h2>
-                <div option="langSelect" class="dropdown transition">
+            <div class="row">
+                <div id="langSelect" class="card">
+                    <h2>Language</h2>
+                    <div option="langSelect" class="dropdown transition">
+                    </div>
                 </div>
-            </div>
-            <div id="dataInfo" class="card">
-                <h2>Info</h2>
-                <div id="langInfoCont" class="transition">
+                <div id="dataInfo" class="card">
+                    <h2>Info</h2>
+                    <div id="langInfoCont" class="transition">
+                    </div>
                 </div>
             </div>
             <div id="dataTable" class="card">
@@ -42,8 +44,9 @@
                 <div id="dataTableCont" class="transition">
                 </div>
             </div>
-            <canvas id="dataGraph1" class="card"></canvas>
-            <canvas id="dataGraph2" class="card"></canvas>
+            <div>
+                <canvas id="dataGraph1" class="card"></canvas>
+            </div>
         </div>
         <div id="files" class="optionContainer">
             <div class="temp card">