title: Real time line graph with nvd3.js
body: <p>I am trying to create a real time graph using nvd3.js which would be updated periodically and with the impression that the data is processed in real time. </p>
  
  <p>For now I have been able to create a function which would update the graph periodically but I cannot manage to have a smooth transition between "states" like the line doing a transition to the left. </p>
  
  <p><a href="http://jsfiddle.net/chrisJamesC/BjRLy/4/">Here</a> is what I did using nvd3.js , here the interesting code is: </p>
  
  <pre><code>d3.select('#chart svg')
      .datum(data)
      .transition().duration(duration)
      .call(chart);
  </code></pre>
  
  <p>Now, I have been able to produce what I want using d3.js but I would prefer to be able to use all the tools provided by nvd3.js. <a href="http://jsfiddle.net/chrisJamesC/buRcx/1/">Here</a> is what I would like to produce using nvd3</p>
  
  <p>The interesting code for the transition using d3.js is: </p>
  
  <pre><code>function tick() {
  
      // update the domains
      now = new Date();
      x.domain([now - (n - 2) * duration, now - duration]);
      y.domain([0, d3.max(data)]);
  
      // push the accumulated count onto the back, and reset the count
      data.push(Math.random()*10);
      count = 0;
  
      // redraw the line
      svg.select(".line")
          .attr("d", line)
          .attr("transform", null);
  
      // slide the x-axis left
      axis.transition()
          .duration(duration)
          .ease("linear")
          .call(x.axis);
  
      // slide the line left
      path.transition()
          .duration(duration)
          .ease("linear")
          .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
          .each("end", tick);
  
      // pop the old data point off the front
      data.shift();
  
  }
  </code></pre>