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???