FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Column chart data from HTML form fields › Reply To: Column chart data from HTML form fields

March 7, 2014 at 9:37 am #6063

MitchLizar

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

  • This reply was modified 10 years, 2 months ago by MitchLizar. Reason: follow-up question added