Home forums Using CanvasJS Column chart data from HTML form fields

This topic contains 2 replies, has 2 voices, and was last updated by  Sunil Urs 2 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6062

    MitchLizar
    Participant

    I’ve got a simple graph built that I want to update from fields on my HTML form. I can get the graph to render when I put in “hard-coded” numbers – but when I attempt to use variable declarations instead it doesn’t work.

    I would also like it to re-render the chart onchange…

    I know you are all going to just shake your head at the simplicity of this, and I will too probably – AFTER someone enlightens me as to what I’m doing wrong or NOT doing.

    Anyway – here is the code for the 3 fields and the graph (You’ll notice I’ve used the variables “q”, “c”, and “b” under “dataPoints:”):

    <!DOCTYPE HTML>
    <form>
        <label for="QSUMTOT">QSUMTOT entry:</label>
        <input id='QSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
        <label for="CSUMTOT">CSUMTOT entry:</label>
        <input id='CSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
        <label for="BSUMTOT">BSUMTOT entry:</label>
        <input id='BSUMTOT' type='text' value='' style='border:1px solid #000000;'/>
        <div id="chartContainer" style="height: 300px; width: 400px;"></div>
    </form>
    
    <script type="text/javascript" src="assets/canvasjs.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var q = document.getElementById("QSUMTOT").value;
            var c = document.getElementById("CSUMTOT").value;
            var b = document.getElementById("BSUMTOT").value;
            var chart = new CanvasJS.Chart("chartContainer", {
                title:{
                    text: "Graphic results of Analysis"
                },
                data: [//array of dataSeries
                    { //dataSeries object
                        type: "column",
                        dataPoints: [
                            { label: "Quality System", y: q },
                            { label: "Compliance", y: c },
                            { label: "Business", y: b }
                        ]
                    }
                ]
            });
            chart.render();
        }
      </script>
    #6063

    MitchLizar
    Participant

    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 2 years, 9 months ago by  MitchLizar. Reason: follow-up question added
    #6076

    Sunil Urs
    Keymaster

    Mitch,

    The form values are of string type and hence y is assigned a string when you directly use those variables. But when you try to multiply the same by 1, JavaScript runtime converts those values into numbers before multiplying and the resulting value will also be a number. That is the reason why it works fine.


    Sunil Urs

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.