Real time nvd3

Not optimal for transitions

HTML

<script src="http://nvd3.org/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/src/nv.d3.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
<div id="chart">
<svg />
</div>

JavaScript

var data = [{
        "key": "Long",
        "values": getData()
    }];
    var chart;
    var duration= 1500;
    function redraw() {
       
        
       nv.addGraph(function () {
       chart = nv.models.cumulativeLineChart()
                      .x(function (d) { return d.x })
                      .y(function (d) { return d.y / 100 })
                      .color(d3.scale.category10().range());


        chart.xAxis
            .tickFormat(function (d) {
                return d3.time.format('%x')(new Date(d))
            });

        chart.yAxis
            .tickFormat(d3.format(',.1%'));

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

        nv.utils.windowResize(chart.update);

        return chart;
    });        
        
    
    }

    function getData() {
        var arr = [];
        var theDate = new Date(2012, 01, 01, 0, 0, 0, 0);
        for (var x = 0; x < 30; x++) {
            arr.push({x: new Date(theDate.getTime()), y: Math.random() * 100});
            theDate.setDate(theDate.getDate() + 1);
        }
        return arr;
    }

    setInterval(function () {
        var long = data[0].values;
        var next = new Date(long[long.length - 1].x);
        next.setDate(next.getDate() + 1)
        long.shift();
        long.push({x:next.getTime(), y:Math.random() * 100});
        redraw();
    }, duration);