nvd3 living chart Memory Leak

Question

I try to create a living line chart. I always show a fixed number of points adding a new one means removing an old one. To do this I use an interval timer to redraw the chart.

This works quite nice until I run the profiler and have a look at the memory consumption. This chart consumes a lot of memory and more and more for every step. I cannot see an obvious reason because the data is shift() out of the array after a new value is push() in.

var data = [{
    "key" : "Long",
    "values" : getData()
}];
var chart;

function redraw() {

    nv.addGraph(function() {
        var chart = nv.models.lineChart().margin({
            left : 100
        })
        //Adjust chart margins to give the x-axis some breathing room.
        .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
        //.transitionDuration(350) //how fast do you want the lines to transition?
        .showLegend(true) //Show the legend, allowing users to turn on/off line series.
        .showYAxis(true) //Show the y-axis
        .showXAxis(true);

        //Show the x-axis
        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(500)
        .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();
}, 1500);

What's wrong?

The memory leak is probably because you are re-drawing the entire chart at every 1500 second intervals. Have a look at his [answer](http://stackoverflow.com/questions/24689157/nvd3-how-to-refresh-the-data-function-to-product-new-data-on-click/24695324#24695324). It will show you how to update only the `chart data`. — shabeer90, Jun 30 '15 at 11:41

score 0 · Accepted Answer · answered Jul 01 '15 at 06:00

0

Thanks to @shabeer90 hint I found the solution. I just had to call the following method after the chart has been constructed.

function update() {
    var data = getData();

    // Update the SVG with the new data and call chart
    chartData.datum(data).transition().duration(500).call(chart);
    nv.utils.windowResize(chart.update);
};

And that's it!

answered Jul 01 '15 at 06:00

Mario

529
7
19

Glad it helped. I am going to mark this duplicate so we don't repeat the same answers around. Please accept it :) – shabeer90 Jul 01 '15 at 08:10

nvd3 living chart Memory Leak

1 Answers1