NVD3 memory leak?
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="chart">
<svg></svg>
</div>
CSS
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
#chart svg {
height: 600px;
}
.nv-label text {
font-family: Droid Sans;
}
JavaScript
var types = {};
types["flow"] = {
label: "Flow",
unit: "m^3/s",
g: 1.0,
o: 0
};
var window_focus = true;
var data = [];
chart_config = '[{"curves":[{ "key": "⌀S01:Q", "values": [0], "type": "flow"} ]}]'
var chart_cfg = JSON.parse(chart_config)[0];
data = chart_cfg.curves;
data[0].values = [];
data[0].g = types[data[0].type].g;
data[0].o = types[data[0].type].o;
data[0].key += ' / ' + types[data[0].type].unit;
$(window).focus(function() {
window_focus = true;
}).blur(function() {
window_focus = false;
});
var currentTimestamp = new Date();
var values = data[0].values;
for (var i = 0; i < 360; ++i) {
values.push({
x: currentTimestamp.getTime(),
y: Number(Math.random())
});
currentTimestamp.setSeconds(currentTimestamp.getSeconds() + 10);
}
var chart_no_data_msg = 'No data available';
var chart;
function redraw() {
if (!redraw.isGraphShown) {
redraw.isGraphShown = true;
nv.addGraph(function() {
chart = nv.models.lineChart()
.margin({
bottom: 100,
left: 80
})
.x(function(d) {
return d.x
})
.y(function(d) {
return d.y
})
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
.noData(chart_no_data_msg);
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%d.%m.%Y %H:%M:%S')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format('.02f'));
d3.select("#chart svg")
.datum(data)
.transition().duration(200)
.call(chart);
nv.utils.windowResize(chart.update);
var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
xTicks.selectAll('text')
.attr('transform', function(d, i, j) {
return 'translate (-40, 40) rotate(315)'
});
return chart;
});
} else {
if(window_focus){
chart.update();
d3.select('#chart...