Added a graph to display the output using Graph.JS

analyser.js

@@ -1,6 +1,12 @@
 var numDies = 0; // master counter for our number of dies
 var outputVisible = 0; // Status of whether the output graph is displayed or not
 
+// Arrays to store values for graphs
+var dieCount = [];
+var dataROA = [];
+var dataElong = [];
+var dataDelta = [];
+
 // This function gets the reduction of area with two provided sizes, and returns it
 function getReduction(startSize, finalSize) {
     var startArea = Math.PI * ((startSize / 2) * (startSize / 2));
@@ -57,10 +63,10 @@ function doMath() {
     outputTable = document.getElementById("output"); // Select our output data table
     outputTable.innerHTML = "";
 
+    // Make the output graph visible
+    outputGraph = document.getElementById("outputChart");
+    outputGraph.innerHTML = "<canvas id=\"outputData\"></canvas>";
 
-    var dataROA = [];
-    var dataElong = [];
-    var dataDelta = [];
 
     var row = [];
     row[0] = outputTable.insertRow(0);
@@ -72,7 +78,7 @@ function doMath() {
     var r1c5 = row[0].insertCell(4); // "Delta"
 
     // Create the header of the table
-    r1c1.innerHTML = "Reduction";
+    r1c1.innerHTML = "Draft";
     r1c1.id = "reductionNumHeader";
     r1c2.innerHTML = "Start -> Finish";
     r1c2.id = "startFinish";
@@ -80,7 +86,7 @@ function doMath() {
     r1c3.id = "roa";
     r1c4.innerHTML = "Elong (%)";
     r1c4.id = "elong";
-    r1c5.innerHTML = "Delta";
+    r1c5.innerHTML = "Δ Factor";
     r1c5.id = "delta";
 
     for (var i = 1; i < numDies + 1; i++) {
@@ -132,9 +138,104 @@ function doMath() {
         cell3.innerHTML = dataROA[i - 1];
         cell4.innerHTML = dataElong[i - 1];
         cell5.innerHTML = dataDelta[i - 1];
+
+        dieCount[i - 1] = i;
     }
+    drawGraph();
 }
 
+function drawGraph() {
+    // Documentation for the following chart-building command can be found at https://chartjs.org
+    const outputData = new Chart("outputData", {
+        type: "line",
+        data: {
+            labels: dieCount,
+            datasets: [{
+                data: dataROA,
+                label: "Reduction of Area",
+                borderColor: "green",
+                fill: false,
+                pointStyle: 'circle',
+                pointRadius: 4,
+                pointHoverRadius: 7,
+                yAxisID: 'y',
+                tension: 0
+            },{
+                data: dataElong,
+                label: "Elongation",
+                borderColor: "blue",
+                fill: false,
+                pointStyle: 'rect',
+                pointRadius: 5,
+                pointHoverRadius: 8,
+                yAxisID: 'y',
+                tension: 0
+            },{
+                data: dataDelta,
+                label: "Δ Factor",
+                borderColor: "red",
+                fill: false,
+                pointStyle: 'triangle',
+                pointRadius: 5,
+                pointHoverRadius: 8,
+                yAxisID: 'y1',
+                tension: 0
+            }],
+        },
+        options: {
+            responsive: true,
+            interaction: {
+                mode: 'index',
+                intersect: false,
+            },
+            stacked: false,
+            plugins: {
+                title: {
+                    display: true,
+                    text: "Draft Analysis"
+                },
+                legend: {
+                    labels: {
+                        usePointStyle: true
+                    }
+                }
+            },
+            scales: {
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    title: {
+                        display: true,
+                        text: "% (RoA/Elong)"
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 30,
+                }, 
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    title: {
+                        display: true,
+                        text: "Δ Factor"
+                    },
+                    suggestedMin: 0,
+                    suggestedMax: 6,
+                    grid: {
+                      drawOnChartArea: false
+                    }
+                },
+                x: {
+                    title: {
+                        display: true,
+                        text: "Draft #"
+                    },
+                }
+            },
+        },
+      });
+}
 
 function toMillimetres(size) { //convert to mm
     size = Math.round((size * 100) * 25.4) / 100;

index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <script src="analyser.js"></script> 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> 
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="analyser.css" />
     <title>Wiredraw Setup Analyser</title>
 </head>
@@ -27,25 +27,26 @@
             <input type="radio" name="units" id="inches" value="in" tabindex=-1 />
             <label for="inches">in</label>
             <p></p>
+            <button name="Add Draft" id="addReduction" onclick="addReduction()">Add</button>
+            <button name="Remove Draft" id="removeReduction" onclick="removeReduction()">Remove</button>
+            <p></p>
             <table id="data">
                 <tr style="font-size: 75%;">
-                    <td><p></p>Reduction<p></p></td>
+                    <td><p></p>Draft<p></p></td>
                     <td>Exit Dia.</td>
                     <td>Angle (2α)</td>
                 </tr>
             </table>
             <p></p>
-            <button name="Add Reduction" id="addReduction" onclick="addReduction()">Add</button>
+            <button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
-            <button name="Remove Reduction" id="removeReduction" onclick="removeReduction()">Remove</button>
-            <button name="Calculate" id="calculateButton" onclick="doMath()">Calculate!</button>
             <script>addReduction()</script>
             <script>addReduction()</script>
 
-            <p>&HorizontalLine;</p>
-            <p></p>
-            <table class="output" id="output">
-            </table>
             <p>&nbsp;</p>
+            <p></p>
+            <table class="output" id="output"></table>
+            <p>&nbsp;</p>
+            <p id="outputChart">&nbsp;</p>
         </div>
     </div>
     <div class="footer" align="center">