title: How to store user data to create a pie chart?
body: <p>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: </p>
  
  <pre><code>&lt;form style="margin-bottom: 50px;"&gt;
  1 value: &lt;input type="number" placeholder="In 100% percentage.." name="first" max="100"&gt;&lt;br/&gt;
  2 value: &lt;input type="number" placeholder="In 100% percentage.." name="second"max="100" &gt;&lt;br&gt;
  3 value: &lt;input type="number" placeholder="In 100% percentage.." name="third" max="100"&gt;&lt;br/&gt;
  4 value: &lt;input type="number" placeholder="In 100% percentage.." name="fourth" max="100"&gt;&lt;br&gt;
  &lt;/form&gt;
  
  &lt;input type="submit" name="submit" value="Generate Pie-Chart" style="margin-bottom: 30px;"&gt;
  
  
  
  &lt;section&gt;
  &lt;div&gt;
  &lt;canvas id="canvas" width="400" height="300"&gt;
  This text is displayed if your browser does not support HTML5 Canvas.
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
  var myData = [100,30,20,60,40];
  
  function getTotal(){
      var myTotal = 0;
      for (var j = 0; j &lt; 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 &lt; 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();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>BUT I want the <code>var myData = [100,30,20,60,40];</code> to read the values inserted from the user in the input forms. How can I do that correctly? </p>
  
  <p>And how can I draw the pie chart after the user clicks the generate button?</p>