</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/24689157/nvd3-how-to-refresh-the-data-function-to-product-new-data-on-click" dir="ltr">NVD3 - How to refresh the data function to product new data on click</a>
<span class="question-originals-answer-count">
(1 answer)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2015-07-01 08:18:36Z" class="relativetime">4 years ago</span>.</div>
</div>
</aside>
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?
</div>