Slight formatting change, bringing the summary to the top of the page and the graph to the bottom

analyser.css

@@ -154,28 +154,36 @@
 
 #statsTable {
     margin: auto;
+    width: 90%;
+    padding-right: 13%;
 }
 
 #statsCol1 {
+    width: 28%;
     text-align: right;
 }
 
 #statsCol2 {
+    width: 5%;
     text-align: left;
     padding-left: 2%;
 }
 
 #statsCol3 {
-    width: 20%;
+    width: 11%;
+    text-align: right;
 }
 
 #statsCol4 {
+    width: 22%;
     text-align: right;
 }
 
 #statsCol5 {
+    width: 10%;
     text-align: left;
     padding-left: 2%;
+    padding-right: 15%;
 }
 
 

analyser.js

@@ -167,8 +167,8 @@ function doMath() {
 
         dieCount[i - 1] = i;
     }
-    drawGraph();
     getStatistics();
+    drawGraph();
     
     // Add spacers
     document.getElementById("spacer1").style.display = 'block';
@@ -306,7 +306,7 @@ function getStatistics() {
     avgDelta = (Math.round((avgDelta / numDies) * 100) / 100).toFixed(2);
 
     // Create the table to display statistics
-    div.innerHTML = "<p></p><h5 align=\"center\" id=\"statsSummaryHeader\">Summary</h5><table id=\"statsTable\"></table>";
+    div.innerHTML = "<h5 align=\"center\" id=\"statsSummaryHeader\">Summary</h5><table id=\"statsTable\"></table>";
 
     var statsTable = document.getElementById("statsTable");
 
@@ -323,15 +323,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "# Of Reductions: ";
     c1.id = "statsCol1";
-    c2.innerHTML = numDies;
+    c2.innerHTML = "<b>" + numDies + "</b>";
     c2.id = "statsCol2";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
     c4.innerHTML = "Avg. Δ Factor: ";
     c4.id = "statsCol4";
-    c5.innerHTML = avgDelta;
+    c5.innerHTML = "<b>" + avgDelta + "</b>";
     c5.id = "statsCol5";
 
 
@@ -347,15 +347,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "Total R. Of Diameter: ";
     c1.id = "statsCol4";
-    c2.innerHTML = (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\"";
+    c2.innerHTML = "<b>" + (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\"</b>";
     c2.id = "statsCol5";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
-    c4.innerHTML = "------";
+    c4.innerHTML = "";
     c4.id = "statsCol4";
-    c5.innerHTML = "---";
+    c5.innerHTML = "";
     c5.id = "statsCol5";
 
 
@@ -371,15 +371,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "Total R. Of Area: ";
     c1.id = "statsCol1";
-    c2.innerHTML = totalROA + "%";
+    c2.innerHTML = "<b>" + totalROA + "%</b>";
     c2.id = "statsCol2";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
     c4.innerHTML = "Avg. R. of Area: ";
     c4.id = "statsCol4";
-    c5.innerHTML = avgROA + "%";
+    c5.innerHTML = "<b>" + avgROA + "%</b>";
     c5.id = "statsCol5";
 
 
@@ -393,17 +393,17 @@ function getStatistics() {
     c5 = row.insertCell(4); 
     
     // COL 1
-    c1.innerHTML = "Total Elong.: ";
+    c1.innerHTML = "Total Elongation: ";
     c1.id = "statsCol1";
-    c2.innerHTML = totalElong + "%";
+    c2.innerHTML = "<b>" + totalElong + "%</b>";
     c2.id = "statsCol2";
     //
-    c3.innerHTML = "&nbsp;";
+    c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
     c4.innerHTML = "Avg. Elongation: ";
     c4.id = "statsCol4";
-    c5.innerHTML = avgElong + "%";
+    c5.innerHTML = "<b>" + avgElong + "%</b>";
     c5.id = "statsCol5";
 
 }

index.html

@@ -52,11 +52,11 @@
                 <p></p>
             </div>
             <p><hr id="spacer1" /></p>
-            <table class="output" id="output"></table>
-            <p><hr id="spacer2" /></p>
-            <div id="outputChart"></div>
-            <p><hr id="spacer3" /></p>
             <div id="statistics"></div>
+            <p><hr id="spacer2" /></p>
+            <table class="output" id="output"></table>
+            <p><hr id="spacer3" /></p>
+            <div id="outputChart"></div>
             <p></p>
         </div>
     </div>