Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • in reply to: Column chart data from HTML form fields #6063

    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 5 years, 8 months ago by  MitchLizar. Reason: follow-up question added
Viewing 1 post (of 1 total)