updating a CanvasJS Chart from fields on HTML form

StackOverflow https://stackoverflow.com/questions/22216315

Вопрос

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>
Это было полезно?

Решение

Discovered the answer quite by accident:

function summary(){

    var qSumTot = document.getElementById("QTOT").value;
    var cSumTot = document.getElementById("CTOT").value;
    var bSumTot = document.getElementById("BTOT").value;
    var q = qSumTot.substring(0, qSumTot.length -1);
    var c = cSumTot.substring(0, cSumTot.length -1);
    var b = bSumTot.substring(0, bSumTot.length -1);
    var analTot = [q * 1, c * 1, b * 1]
    var str = document.getElementById('SUMTOT').value;
    var rstr = str.substring(0, str.length - 1);
    var qms = analTot[0];
    var comp = analTot[1];
    var bus = analTot[2];

    document.getElementById("QSUMTOT").value = qSumTot;
    document.getElementById("CSUMTOT").value = cSumTot;
    document.getElementById("BSUMTOT").value = bSumTot;
    document.getElementById('SUMTOT').value = (parseInt(((q*1) + (c*1) + (b*1))/3) + "%");
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Graph of Analysis"
        },
        axisY:{
            suffix: "%"
        },
        data: [{
            type: "column",
            toolTipContent: "{y}%",
            dataPoints: [{
                label: "QMS",
                y: qms
            }, {
                label: "Compliance",
                y: comp
            }, {
                label: "Business",
                y: bus
            }]
        }]
    });
    chart.render();
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top