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

Column chart data from HTML form fields

Viewing 3 posts - 1 through 3 (of 3 total)
  • March 7, 2014 at 9:19 am #6062

    MitchLizar

    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>
    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, 9 months ago by MitchLizar. Reason: follow-up question added
    March 11, 2014 at 6:53 pm #6076

    Sunil Urs

    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.