I've got a webpage that loads Highcharts graphs at regular intervals - like a slideshow in a loop. My problem is that after a few hours of running the web crashes in Chrome (other browsers not an option at the moment) with a "Aw, Snap ! Something went wrong while displaying this webpage. "
Using "Chrome development tools->Timeline" I can see that the "DOM Node Count" increases constantly.(also the document count).
This is a part of a larger web so I can not post the code. I've however created a page that does things in a similar way. I load the graph with JQuery.load().
When rotating plain HTML pages the DOM count does not increase (gets garbage collected).
Please can someone tell me what I'm doing wrong? Can I do this a different way? Is this a Highcharts bug? Any suggestions on how to solve this welcome.
Here is some code that can produce this behavior. (sorry I couldn't get it to work in jsfiddle) (comment and uncomment in "$(document).ready" function to change between load methods)
I've put this page up here : http://memoryleak.ivarragnarsson.com where you can chose to view a leaky Highcharts version or a standard HTML loading non-leaking version.
"memoryleak.html"
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript">
function UpdateGraphsDiv()
{
if (typeof window.chart != 'undefined')
{
window.chart.destroy();
}
$.ajaxSetup({ cache: false, async: false });
$("#chartcontainer").load("graph.html");
}
$(document).ready(function ()
{
UpdateGraphsDiv(); setInterval(UpdateGraphsDiv, 5000); //Updates graph in div using JQuery Load
});
</script>
</head>
<body>
<div id="chartcontainer"></div>
</body>
</html>
"graph.html"
<div id='container1' style='min-width: 310px; height: 400px; margin: 0 auto'></div>
<script type='text/javascript'>
$(function ()
{
$('#container1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style=""font-size:10px"">{point.key}</span><table>',
pointFormat: '<tr><td style=""color:{series.color};padding:0"">{series.name}: </td>' +
'<td style=""padding:0""><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
});
</script>
</div>
Please tell me how to stop this accumulation of DOM Nodes.
