My goal is to dynamically collect user input data from form input textboxes to create a pie chart when the submit button is clicked. Currently, I have a test version set up with fixed values displayed 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>
However, I am seeking guidance on how to update the values in the var myData = [100,30,20,60,40]; array with the user's input from the form. Additionally, I am unsure of how to trigger the generation of the pie chart after the user clicks the generate button.