Added a graph to display the output using Graph.JS
This commit is contained in:
parent
4c3a190e72
commit
9d96a0b7cd
111
analyser.js
111
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;
|
||||
|
||||
19
index.html
19
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="Remove Reduction" id="removeReduction" onclick="removeReduction()">Remove</button>
|
||||
<button name="Calculate" id="calculateButton" onclick="doMath()">Calculate!</button>
|
||||
<button name="Calculate" id="calculateButton" onclick="doMath()">Recalculate</button>
|
||||
<script>addReduction()</script>
|
||||
<script>addReduction()</script>
|
||||
|
||||
<p>─</p>
|
||||
<p></p>
|
||||
<table class="output" id="output">
|
||||
</table>
|
||||
<p> </p>
|
||||
<p></p>
|
||||
<table class="output" id="output"></table>
|
||||
<p> </p>
|
||||
<p id="outputChart"> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer" align="center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user