Added Reduction of Diameter calculations

Changed formatting of page per industry professional recommendation

analyser.css

@@ -60,6 +60,7 @@
 }
 
 #reductionNumHeader {
+    width:6%;
     text-align: center;
 }
 
@@ -69,22 +70,31 @@
 }
 
 #startFinish {
-    width: 300px;
+    width: 45%;
     text-align: center;
 }
 
 #roa {
-    width: 12%;
+    width: 10%;
+    text-align: center;
+}
+
+#rod {
+    width: 10%;
     text-align: center;
 }
 
 #elong {
-    width: 12%;
+    width: 10%;
     text-align: center;
 }
 
 #delta {
-    width: 12%;
+    width: 9.5%;
+    text-align: center;
+}
+#angle {
+    width: 6.5%;
     text-align: center;
 }
 

analyser.js

@@ -4,7 +4,9 @@ var outputVisible = 0; // Status of whether the output is displayed or not
 // Arrays to store values for graphs
 var dieCount = [];
 var dataROA = [];
+var dataROD = [];
 var dataElong = [];
+var dataAngle = [];
 var dataDelta = [];
 
 ///// START OF MATHS FUNCTIONS /////
@@ -37,6 +39,10 @@ function toInches(size) { //convert to inches
     return size;
 }
 
+function getRoDiameter(startSize, finishSize){
+    return (startSize - finishSize) / ((startSize + finishSize) / 2) * 100;
+}
+
 ///// END OF MATHS SECTION /////
 
 ///// START OF DISPLAY SECTION /////
@@ -100,20 +106,26 @@ function doMath() {
     var cell1 = row[0].insertCell(0); //blank
     var cell2 = row[0].insertCell(1); // "Start -> Finish"
     var cell3 = row[0].insertCell(2); // "ROA"
-    var cell4 = row[0].insertCell(3); // "Elong"
+    var cell4 = row[0].insertCell(3); // "ROD"
-    var cell5 = row[0].insertCell(4); // "Delta"
+    var cell5 = row[0].insertCell(4); // "Elong"
+    var cell6 = row[0].insertCell(5); // "Angle"
+    var cell7 = row[0].insertCell(6); // "Delta"
 
     // Create the header of the table
     cell1.innerHTML = "Draft";
     cell1.id = "reductionNumHeader";
     cell2.innerHTML = "Start -> Finish";
     cell2.id = "startFinish";
-    cell3.innerHTML = "ROA (%)";
+    cell3.innerHTML = "R. Area (%)";
     cell3.id = "roa";
-    cell4.innerHTML = "Elong (%)";
+    cell4.innerHTML = "R. Dia. (%)";
-    cell4.id = "elong";
+    cell4.id = "rod";
-    cell5.innerHTML = "Δ Factor";
+    cell5.innerHTML = "Elong (%)";
-    cell5.id = "delta";
+    cell5.id = "elong";
+    cell6.innerHTML = "Angle";
+    cell6.id = "angle";
+    cell7.innerHTML = "Δ Factor";
+    cell7.id = "delta";
 
     for (var i = 1; i < numDies + 1; i++) {
         inSize = document.getElementById("die" + (i - 1)).value; // the input size
@@ -149,21 +161,29 @@ function doMath() {
         cell3 = row[i].insertCell(2);
         cell3.id = "roa";
         cell4 = row[i].insertCell(3);
-        cell4.id = "elong";
+        cell4.id = "rod";
         cell5 = row[i].insertCell(4);
-        cell5.id = "delta";
+        cell5.id = "elong";
+        cell6 = row[i].insertCell(5);
+        cell6.id = "angle";
+        cell7 = row[i].insertCell(6);
+        cell7.id = "delta";
 
         // These next lines calculate and round the data to two decimal places
         dataROA[i - 1] = (Math.round(getReduction(inSize, outSize) * 100) / 100).toFixed(2);
+        dataROD[i - 1] = (Math.round(getRoDiameter(inSize, outSize) * 100) / 100).toFixed(2);
         dataElong[i - 1] = (Math.round(getElongation(inSize, outSize) * 100) / 100).toFixed(2);
         dataDelta[i - 1] = (Math.round(getDelta(inSize, outSize, angle) * 100) / 100).toFixed(2);
+        dataAngle[i - 1] = angle;
 
         // Set the values of the cells in our table 
-        cell1.innerHTML = "#" + i + ": &nbsp;&nbsp;";
+        cell1.innerHTML = "#" + i + ":&nbsp;";
         cell2.innerHTML = inSize.toFixed(3) + "\" (" + toMillimetres(inSize) + " mm) -> " + outSize.toFixed(3) + "\" (" + toMillimetres(outSize) + " mm)";
         cell3.innerHTML = dataROA[i - 1];
-        cell4.innerHTML = dataElong[i - 1];
+        cell4.innerHTML = dataROD[i - 1];
-        cell5.innerHTML = dataDelta[i - 1];
+        cell5.innerHTML = dataElong[i - 1];
+        cell6.innerHTML = dataAngle[i - 1];
+        cell7.innerHTML = dataDelta[i - 1];
 
         dieCount[i - 1] = i;
     }
@@ -195,7 +215,24 @@ function drawGraph() {
                 tooltip: {
                     callbacks: {
                         label: function(tooltipItem, d){
-                            return "ROA: " + Number(tooltipItem.formattedValue).toFixed(2) + "%";
+                            return "RoA: " + Number(tooltipItem.formattedValue).toFixed(2) + "%";
+                        },
+                    },
+                },
+            },{
+                data: dataROD,
+                label: "Reduction of Dia.",
+                borderColor: "orange",
+                fill: false,
+                pointStyle: 'rect',
+                pointRadius: 5,
+                pointHoverRadius: 8,
+                yAxisID: 'y',
+                tension: 0,
+                tooltip: {
+                    callbacks: {
+                        label: function(tooltipItem, d){ // Add a % sign to the value
+                            return "RoD: " + Number(tooltipItem.formattedValue).toFixed(2) + "%";
                         },
                     },
                 },
@@ -211,7 +248,7 @@ function drawGraph() {
                 tension: 0,
                 tooltip: {
                     callbacks: {
-                        label: function(tooltipItem, d){ // Add a % sign to the elongation value
+                        label: function(tooltipItem, d){ // Add a % sign to the value
                             return "Elong: " + Number(tooltipItem.formattedValue).toFixed(2) + "%";
                         },
                     },
@@ -287,7 +324,7 @@ function drawGraph() {
                         text: "% (RoA/Elong)"
                     },
                     suggestedMin: 0,
-                    suggestedMax: 30,
+                    suggestedMax: 35,
                 }, 
                 y1: {
                     type: 'linear',
@@ -298,7 +335,7 @@ function drawGraph() {
                         text: "Δ Factor"
                     },
                     suggestedMin: 0,
-                    suggestedMax: 6,
+                    suggestedMax: 7,
                     grid: {
                       drawOnChartArea: false
                     }
@@ -331,6 +368,7 @@ function getStatistics() {
     var avgElong = 0;
     var totalROA = Math.round(getReduction(startSize, finalSize) * 100) / 100;
     var totalElong = Math.round(getElongation(startSize, finalSize) * 100) / 100;
+    var totalROD = Math.round(getRoDiameter(startSize, finalSize) * 100) / 100;
 
     // Get average ROA
     for (var i = 0; i < numDies; i++) {
@@ -392,15 +430,15 @@ function getStatistics() {
     // COL 1
     c1.innerHTML = "Total R. Of Diameter: ";
     c1.id = "statsCol4";
-    c2.innerHTML = "<b>" + (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(3) + "\"</b>";
+    c2.innerHTML = "<b>" + (Math.round((startSize - finalSize) * 1000) / 1000).toFixed(2) + "\"</b>";
     c2.id = "statsCol5";
     //
     c3.innerHTML = "|&nbsp;&nbsp;";
     c3.id = "statsCol3";
     // COL 2
-    c4.innerHTML = "";
+    c4.innerHTML = "% R. Of Diameter";
     c4.id = "statsCol4";
-    c5.innerHTML = "";
+    c5.innerHTML = "<b>" + totalROD.toFixed(2) + "%</b>";
     c5.id = "statsCol5";
 
 

index.html

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