title: How to plot animated line chart using d3 while the data table is required to be updated every 1 second?
body: <p><strong>I want to simulate the situation where there is continuous incoming real time (dynamic) data and feed to the chart</strong></p>
  
  <p>Therefore, I try to demonstrate an animated line chart using d3 while the data array is required to be continuous updated every 1 second.</p>
  
  <p>The original work is inspired by <a href="http://bl.ocks.org/benjchristensen/1148374" rel="nofollow noreferrer">benjchristensen</a></p>
  
  <p>And here is my modified html source: <a href="https://drive.google.com/file/d/0B6wTfkJvzke_SXY3VUlINUh5eTg/edit?usp=sharing" rel="nofollow noreferrer">my source code</a></p>
  
  <p>I try to populate the <code>buffer[100]</code> with <code>random number for every 1 second</code> by calling function <code>startGenerator()</code></p>
  
  <pre><code>    function startGenerator()
      {
          //signalGenerator();    
          setInterval("signalGenerator()", 1000); //
      }
  
      function signalGenerator()
      {
          var buffer = new Array(100);
  
          var i;
          for (i = 0; i &lt; buffer.length; i++)
          {
              buffer[i] = Math.random() * 10;
          }
  
          FeedDataToChart("#graph1", 300, 300, "basis", true, 100, 100, buffer, 0);       
      }
  </code></pre>
  
  <p>Below is the <code>FeedDataToChart()</code> parameter names:</p>
  
  <pre><code>function FeedDataToChart(id, width, height, interpolation, animate, updateDelay, transitionDelay, data, startIndex)
  </code></pre>
  
  <p>I use a <code>counter</code> to check for the re-draw data index, every time when re-draw new data, <code>counter</code> increase by <code>1</code>. Until the the <code>counter &lt; data.length-1</code>, the <code>re-draw timer</code> should stop and get new data from the <code>buffer[100]</code> again. </p>
  
  <pre><code>        function stopTimer()
          {
              clearInterval(myTimer);
              alert("The redraw timer stop here, get new data from buffer");
          }
  
          function startTimer()
          {
              if (myTimer == null)
              {
                  myTimer = setInterval(function() {
                  if (counter &lt; data.length - 1)
                  {
                      var v = data.shift(); // remove the first element of the array
                      data.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)
                      if(animate) 
                      {
                          redrawWithAnimation();
                      } 
                      else 
                      {
                          redrawWithoutAnimation();
                      }
                      counter++;
                  }
                  else
                  {
                      alert("no more data in buffer");
                      stopTimer();
                      counter = startIndex;
                  }
              }, updateDelay);
              }
          }
  </code></pre>
  
  <p><strong>My problem occurs</strong> when I tried to repeat the <code>startGenerator()</code> function, the results shows like this:
  <img src="https://i.stack.imgur.com/ppqxb.jpg" alt="line chart"></p>
  
  <p>I am pretty new to javascript. Can anyone pin point me how to pull data from the <code>buffer</code> every <code>1 second</code> and update the <strong>single line</strong> chart continuously?</p>
  
  <p>Thank you!</p>
  
  <p><strong>EDIT</strong> I update the source and problem has been minimized: <a href="https://drive.google.com/file/d/0B6wTfkJvzke_bXNjVDFxeUhrbWs/edit?usp=sharing" rel="nofollow noreferrer">My New Source</a> </p>
  
  <p>I add the <code>.remove()</code> line at the <code>stopTimer()</code> to remove the sgv-holded data and reset the <code>global buffer to null</code> and call the <code>startGenerator()</code> function again to pull new data when timer stop.</p>
  
  <p>Now the only problem I having is that everytime when new graph is created, it create a new sgv path where below the previous one. The new graph is moving downwards everytime when it was created. Check the new source I updated today. You will catch my description after you run the code. </p>
  
  <p><strong>How can I fixed the sgv path at the same location everytime when I update it?</strong>  </p>