title: Issue with Javascript accepting user data for canvas pie chart
body: <p>Im trying to generate a simple pie chart using canvas, but its not displaying anything when data is assigned to an array used to draw the chart. I cant seem to find out exactly what the issue is.</p>
  
  <p>Ive tried to convert the array to integers using a loop but it still won't use the data to draw the graph. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function draw() {
  var n = document.getElementById("data").value;
  var values = n.split(",");
  //document.write(values);
  var colors = [ "blue", "red", "yellow", "green", "black" ];
  var canvas = document.getElementById( "myCanvas");
  var context = canvas.getContext( "2d" );  
  
    // grey background
  context.fillStyle = "rgb(200,200,200)";
  context.fillRect (0, 0, 600, 450);
                         
  //iterate through array and assign values to integers
  for( var i = 0; i &lt; values.length; i++ ){    
      values[i] = parseInt(values[i]);
  }
  // get length of data array 
  var dataLength = values.length; 
  // variable to store all values
  var total = 0;  
  
  
  // calculate total 
  for( var i = 0; i &lt; dataLength; i++ ){    
      // add data value to total     
      total += values[ i ]; 
  }  
  
  // declare X and Y coordinates
  var x = 100; 
  var y = 100; 
  var radius = 100; 
  
  // declare starting point
  var startingPoint = 0; 
  
  for( var i = 0; i &lt; dataLength; i++ ){     
          // calculate percent of total for current value     
          var percent = values[ i ][ 1 ] * 100 / total;      
          // calculate end point using the percentage (2 is the final point for the chart)     
          var endPoint = startingPoint + ( 2 / 100 * percent );
          // draw chart segment for current element     
          context.beginPath();        
          // select corresponding color     
          context.fillStyle = colors[ i ];     
          context.moveTo( x, y );     
          context.arc( x, y, radius, startingPoint * Math.PI, endPoint * Math.PI );         
          context.fill();      
          // starting point for next element     
          startingPoint = endPoint; 
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; Easy Graph&lt;/title&gt;
          &lt;link rel="stylesheet" href="stylesheet.css"&gt;
          &lt;style type = "text/css"&gt;
              canvas {
                      border: 2px solid black;
              }
          &lt;/style&gt;
  
          &lt;script type="text/javascript" src="pie.js"&gt; 
  
          &lt;/script&gt;
      &lt;/head&gt; 
      &lt;body&gt;
          &lt;h2&gt; Pie chart &lt;/h2&gt;
          &lt;h2&gt; Enter values seperated by commas&lt;/h2&gt;
              &lt;input type="text" name="number" id="data"&gt;&lt;br&gt;
              &lt;input type="button" value="submit" name="submit" onclick = "draw();"&gt;
              &lt;input type="button" value="Clear" name="Clear" onclick="reset()"&gt;&lt;br&gt;&lt;br&gt;
          &lt;canvas id ="myCanvas" width= "600" height= "300"&gt;
          &lt;/canvas&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>