title: Raphael, animation of points
body: <p>I have a function which displays lines (x and y coordinates) based on the time information. The x and y coordinates specify the position of the drawn points whereas time represents the timestamps (in milliseconds) of the respective points. </p>
  
  <p>Currently, there is a function which displays line as below</p>
  
  <pre><code>    &lt;script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          function drawLine(points) {
              var paths = ['M ' + points[0].x + ' ' + points[0].y];
              for (var i = 1; i &lt; points.length; i++) {
                  var p = points[i];
                  paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y);
              }
              var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
              var line = paper.path(paths[0]);
              var next = 1;
  
              function animate() {
                  if (paths[next]) {  
                      duration = points[next].t - points[next - 1].t        
                      line.animate({ path: paths[next] }, duration, 'linear', animate);
                      next++;
                  }
              }
              animate();
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>And the function can be called using associative arrays as follows:</p>
  
  <pre><code>    drawLine([
                  { x: 0, y: 0, t: 0 },
                  { x: 100, y: 230, t: 1520 },
                  { x: 210, y: 290, t: 3850 },
                  { x: 150, y: 200, t: 5060 },
              ]);
  </code></pre>
  
  <p>The question is, how can I modify this function to display points and not the lines?</p>