OK… I did some tinkering with an answer given for a related topic here and got a workable solution, but it begs some explanation. The following code works for what I need:
<!DOCTYPE HTML>
<form>
<label for="QSUMTOT">QSUMTOT entry:</label>
<input id='QSUMTOT' type='text' value='0' onchange="makeChart();"
style='border:1px solid #000000;' name='QSUMTOT'/>
<label for="CSUMTOT">CSUMTOT entry:</label>
<input id='CSUMTOT' type='text' value='0' onchange="makeChart();"
style='border:1px solid #000000;' name='CSUMTOT'/>
<label for="BSUMTOT">BSUMTOT entry:</label>
<input id='BSUMTOT' type='text' value='0' onchange="makeChart();"
style='border:1px solid #000000;' name='BSUMTOT'/>
<div id="chartContainer" style="height: 300px; width: 400px;"></div>
</form>
<script type="text/javascript" src="assets/canvasjs.min.js"></script>
<script type="text/javascript">
function makeChart() {
var q = document.getElementById("QSUMTOT").value;
var c = document.getElementById("CSUMTOT").value;
var b = document.getElementById("BSUMTOT").value;
var analTot = [q * 1, c * 1, b * 1]
var qms = analTot[0];
var comp = analTot[1];
var bus = analTot[2];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Graph of Analysis"
},
data: [{
type: "column",
dataPoints: [{
label: "QMS",
y: qms
}, {
label: "Compliance",
y: comp
}, {
label: "Business",
y: bus
}]
}]
});
chart.render();
}
</script>My follow-up question is this: why does it NOT work when I put the values in directly? The ” var analTot = [q * 1, c * 1, b * 1] ” section (INCLUDING the * 1 on each of the parts of the array) is required in order for it to work.
WHY???
