title: How to ease between two y-coordinates?
body: <p>For a school assignment we have to make a graph in Javascript. 
  The teacher would like to see some animated graphs. So I build a graph about my Tweets in one week, but cannot find how to ease between two y-coordinates. </p>
  
  <p>You can find my project <a href="http://jsfiddle.net/co4otmn7/" rel="nofollow">here on jsfiddle</a>, or <a href="http://www.student.howest.be/jonas.leupe/20142015/CP" rel="nofollow">on this website</a>. </p>
  
  <pre><code>var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var form = document.getElementById("form");
  var data = [];
  var huidigeYpos = [];
  var nieuweYpos = [];
  var count = [];
  var snelheid = 0;
  
  function init(){
      ctx.fillStyle="rgb(255,255,255)";
      ctx.fillRect(0,0,canvas.width,canvas.height);
      ctx.translate(0, 445);
  
      for(var i = 0; i &lt; 7; i++){
          data[i] = form[i].value*30;
      }
  
      draw();
  }
  
  function draw(){
      ctx.fillStyle="rgb(255,255,255)";
      ctx.fillRect(0,0,canvas.width,-canvas.height);
      ctx.beginPath();    
      ctx.moveTo(0,0);
      for(var i = 0; i &lt;= 750; i += 125){
          ctx.lineTo(i,-data[i/125]);
          huidigeYpos.push((data[i/125]));
      }
      if(huidigeYpos.length &gt; 7){
          huidigeYpos.splice(0, 7);
      }
      ctx.lineTo(750,0);
      ctx.closePath();
      ctx.fillStyle="#0084FF";    
      ctx.fill();
  }
  
  function invullen(){
      for(var i = 0; i &lt; 7; i++){
          data[i] = form[i].value*30;
      }
      draw();
  }
  
  function drawRandomGraph(){ 
  
      for(var i = 0; i &lt; 7; i++){
          form[i].value = Math.round(Math.random()*10);
          nieuweYpos.push(form[i].value*30);
      }
      if(nieuweYpos.length &gt; 7){
          nieuweYpos.splice(0, 7);
      }
      invullen();
  }
  
  init();
  </code></pre>
  
  <p>Thanks in advance!</p>