A memory issue arises when attempting to reload a Highchart graph.
I have tried using chart.destroy() explicitly upon reloading and setting 'chart animation: false', but these solutions are not entirely effective in resolving the problem.
setInterval ( "initChart()", 1000*30 );`
function initChart(){
if ( typeof $ ( '#guage1' ).highcharts () !== 'undefined' )
{
$ ( '#guage1' ).highcharts ().destroy ();
}
var data = [{
borderColor: "red",
color: "#7cb5ec",
innerRadius: "100%",
radius: "100%",
y: 60
}];
setHighcharts($('#guage1'), data);
datas($('#guage1'),data);
}
function datas($container,data){
var chart = $container.highcharts();
if(typeof chart !== 'undefiend' || chart != null){
var y = null;
y = chart.series[0].data[0].y;
for ( var i = y; i >= 0; i = i - (y / 80) )
{
chart.addSeries ( {
data : [ {
y : i,
radius : '100%',
innerRadius : '100%',
} ],
stickyTracking : false,
enableMouseTracking : false
}, false )
}
chart.redraw ();
Highcharts.each ( chart.series, function ( s )
{
s.update ( {
borderColor : s.data[0].color
}, false );
} );
chart.redraw ();
}
chart = null;
}
function setHighcharts($container, data1) {
console.log('');
$container.highcharts ( {
chart : {
type : 'solidgauge',
spacingBottom : 0,
spacingTop : 0,
spacingLeft : 0,
spacingRight : 0,
marginTop : 28,
marginLeft : 28,
marginRight : 28,
marginBottom : 28,
backgroundColor : 'rgba(255, 255, 255, 0.0)',
style : {
fontFamily : 'Nanum Gothic'
},
animation: false
},
title : {
text : '',
style : {
display : 'none',
}
},
pane : {
startAngle : 0,
endAngle : 360,
background : [ { // Track for Move
outerRadius : '112%',
innerRadius : '88%',
backgroundColor : 'rgba(17, 17, 26, 1)',
borderWidth : 0
} ]
},
yAxis : {
min : 0,
max : 100,
lineWidth : 0,
tickPositions : [],
stops : [ [ 0, '#218ad8' ], [ 1, '#69ff05' ] // red
],
},
plotOptions : {
solidgauge : {
borderWidth : '15px',
linecap : 'round',
dataLabels : {
enabled : false
},
rounded: true
}
},
series : [{
data : data1,
}]
});
}
My page contains 5 gauge charts which reload every 30 seconds causing an increase in memory usage.
It seems that some object created is still retained in memory after each reload.
The memory size is 159.6MB on initial load and increases to 171.8MB after 7 reloads.
How can I properly free up memory upon each reload?