Real time line graph with nvd3.js-open source projects novus/nvd3

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.

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.

Here is what I did using nvd3.js , here the interesting code is:

d3.select('#chart svg')
    .datum(data)
    .transition().duration(duration)
    .call(chart);

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. Here is what I would like to produce using nvd3

The interesting code for the transition using d3.js is:

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();

}