title: HTML5 Canvas Line Graph, where user inputs data
body: <p>I'm having a bit of problem with my HTML5 Canvas Graph. This might be a little difficult to explain so please bear with me. </p>
  
  <p>I need to create a graph on HTML5 Canvas so that the position of each point on the chart is based on the value of a drop down menu underneath it. Whenever the value is changed, the chart must be redrawn so that there is no overlap. See here on how it will look: <a href="http://cl.ly/image/070C2g1I0f2u" rel="nofollow">http://cl.ly/image/070C2g1I0f2u</a>
  Underneath each point, there will be a drop down menu with several values. </p>
  
  <p>This code is for the array of 7 drop down menus:</p>
  
  <pre><code>for(var i = 0; i &lt; 7; i++) {
  var select = document.getElementById("graph"); 
  var el = document.createElement("select");
  el.setAttribute('id', 'no' +i);
  select.appendChild(el);
  
          var percents = new Array(21)
          for(var z = 0; z &lt; percents.length; z++){
          var days = document.getElementById('no' + i);
          var option = document.createElement("option");
          option.text = z*5;
          days.add(option);
          } 
  }
  
  &lt;div id = "graph"&gt;
  &lt;table id = "no_table"&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I need now is to link each of these drop down boxes to its' corresponding point on the graph. I can draw 7 circles on the canvas.. but how can I make it so that I can: </p>
  
  <ul>
  <li>draw these circles in a <strong>for loop</strong> </li>
  <li>while linking each circle to each drop down box and its values</li>
  <li>and also taking into account the width and height of the canvas (width =600 height =400)</li>
  <li>While the graph is redrawn each time a value is changed?</li>
  <li>each of these circles must be connected with a line</li>
  </ul>
  
  <p>I would really appreciate any help on this. Please let me know if I am confusing you!</p>