How to store user data to create a pie chart?

Question

I want to collect the data from a form input textboxes where the user fills his values for the different pie chart elements and then when he clicks the submit button a pie chart is generated with the tag. I have built a test version with fixed values here:

<form style="margin-bottom: 50px;">
1 value: <input type="number" placeholder="In 100% percentage.." name="first" max="100"><br/>
2 value: <input type="number" placeholder="In 100% percentage.." name="second"max="100" ><br>
3 value: <input type="number" placeholder="In 100% percentage.." name="third" max="100"><br/>
4 value: <input type="number" placeholder="In 100% percentage.." name="fourth" max="100"><br>
</form>

<input type="submit" name="submit" value="Generate Pie-Chart" style="margin-bottom: 30px;">



<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
var myData = [100,30,20,60,40];

function getTotal(){
    var myTotal = 0;
    for (var j = 0; j < myData.length; j++) {
        myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
    }
    return myTotal;
}

function plotData() {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal();

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < myData.length; i++) {
        ctx.fillStyle = myColor[i];
        ctx.beginPath();
        ctx.moveTo(200,150);
        ctx.arc(200,150,150,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);
        ctx.lineTo(200,150);
        ctx.fill();
        lastend += Math.PI*2*(myData[i]/myTotal);
    }
}

plotData();

</script>

BUT I want the var myData = [100,30,20,60,40]; to read the values inserted from the user in the input forms. How can I do that correctly?

And how can I draw the pie chart after the user clicks the generate button?

Answer 1

I have a slightly different solution, which allows the user to manipulate the pie chart wedges directly. Uses d3.js and jQuery. Feedback welcome!

http://pehrlich.github.com/piechart_inputs/

Answer 2

First, I would add IDs to the form elements so that they are more easily accessible:

<form style="margin-bottom: 50px;">
1 value: <input type="number" placeholder="In 100% percentage.." id="first" name="first" max="100"><br/>
2 value: <input type="number" placeholder="In 100% percentage.." id="second" name="second" max="100" ><br>
3 value: <input type="number" placeholder="In 100% percentage.." id="third" name="third" max="100"><br/>
4 value: <input type="number" placeholder="In 100% percentage.." id="fourth" name="fourth" max="100"><br>
</form>

<input type="submit" name="submit" value="Generate Pie-Chart" style="margin-bottom: 30px;" id="plotSubmit">

Second, add a handler to the submit button, like so:

document.getElementById("plotSubmit").onclick = generatePie;

Then, define your handler function:

function generatePie() {
    // Grab values from inputs and put them in the data array:
    myData[1] = document.getElementById("first").value;
    myData[2] = document.getElementById("second").value;
    myData[3] = document.getElementById("third").value;
    myData[4] = document.getElementById("fourth").value;

    // Call plotData again:
    plotData();
}

Here is a working example: http://jsfiddle.net/F5YRL/

This would be easier with a bit of jQuery, but in this simple form it's not terrible.

You might also want to consider adding some validation for your data. For instance, they should all be legal numbers. Do the values need to add up to 100? Do they all need to be defined?

Something to think about anyway.