Memory leak problems for column chart - memory

Question

I am not good at speaking English. Please understand.
I'm having a memory leak problem when using the stack column chart.
We update the data using setCategories, setData on a stack column chart every 2 seconds.
But, the memory usage continues to increase and the browser will be forcibly terminated.
The only thing that program does is call setCategories, setData. Is there anything I need to do to clean up the memory?
The test environment is os: windows7, windows10, browser: lastest version chrome 57.0.2987.133
you can see that you keep increasing after 1, 3, 5, 7, 10, 15, and 20 minutes.
Memory usage increases with time, so you can check it immediately.
You can check memory usage in the task window by running [shift + esc] shortcut in Chrome.
Send the sample code as an attachment. Thank you.
JQuery and Highcharts(5.0.10) use the latest version.
<script>
var dy = {
instanceAlias : {}
};
var CATEGORIES = ["a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20"];
var THEME = "";
var HEIGHT = "290";
var highchartConfig = {
column : {
chart: {
renderTo: null,
type: 'column'
},
xAxis: {
gridLineWidth: 1,
tickLength: 4,
categories : null,
labels : {
rotation: 0,
formatter : function(d){
return dy.instanceAlias[this.value] || this.value;
}
}
},
yAxis: {
min : 0,
max : 5,
lineWidth: 1,
tickLength: 4, // Same value as offset
tickPosition: "outside",
tickWidth: 1,
tickAmount: 3,
tickInterval : 25,
title: {
style : {
display: 'none'
}
},
stackLabels: {
style : {
"fontWeight": "normal",
color : (THEME == "dark") ? "#b0b0b3" : "#000"
}
}
},
plotOptions: {
series: {
borderRadius: 6,
borderWidth: 0,
marker :{
enabled :true,
symbol : "circle",
radius : 4
}
}
},
series: null
}
};
var stack1Config = $.extend(true,{},highchartConfig.column,{
colors : ["#009651","#ff9800","#ff1100","#009651"], //stack colors
chart: {
animation: false,
renderTo: "stack1",
height : HEIGHT
},
xAxis: {
categories : CATEGORIES
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
legend : false,
tooltip : false,
yAxis: {
max : null,
tickInterval : null,
tickLength : null,
stackLabels: {
enabled: true,
useHTML : false,
style : {
"fontWeight": "normal",
color : (THEME == "dark") ? "#b0b0b3" : "#000"
}
}
},
plotOptions: {
column: {
stacking: 'normal',
},
series: {
animation: false,
stickyTracking: false,
enableMouseTracking: false,
lineWidth: 0,
marker: {
enabled : true,
symbol : "circle",
radius : 4
},
}
},
series : (function(){
var series = new Array();
var stack = [
{id : "normal", alias : "normal"},
{id : "warning", alias : "warning"},
{id : "danger", alias : "danger"}
];
for (var i = 0; i < stack.length; i++) {
//stack column 브러시 추가.
series.push({
name : stack[i].alias || stack[i].id,
id : stack[i].id,
lineWidth: 1,
data : (function(categories){
var data = [];
for (var i = 0; i < categories.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
}
//circle
series.push({
type : "scatter",
name : "scatter",
id : "scatter",
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
data : (function(b){
var data = [];
for (var i = 0; i < b.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
console.log(series)
return series;
})()
});
var stack2Config = $.extend(true,{},highchartConfig.column,{
colors :["#009651"],
chart: {
animation: false,
renderTo: "stack2",
height : HEIGHT
},
xAxis: {
categories : CATEGORIES
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
legend : false,
tooltip : false,
yAxis: {
max : null,
tickInterval : null,
tickLength : null,
stackLabels: {
enabled: true,
useHTML : false,
style : {
"fontWeight": "normal",
color : (THEME == "dark") ? "#b0b0b3" : "#000"
}
}
},
plotOptions: {
animation: false,
stickyTracking: false,
enableMouseTracking: false,
lineWidth: 0,
marker : {
enabled : false
},
column : {
dataLabels: {
enabled: true,
useHTML: true,
x : 0,
y : 0,
style : {
"fontWeight": "normal"
}
}
}
},
series : (function(){
var series = new Array();
var stack = [
{id : "cpu", alias : "CPU"}
];
for (var i = 0; i < stack.length; i++) {
//stack column 브러시 추가.
series.push({
name : stack[i].alias || stack[i].id,
id : stack[i].id,
lineWidth: 1,
data : (function(categories){
var data = [];
for (var i = 0; i < categories.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
}
//circle
series.push({
type : "scatter",
name : "scatter",
id : "scatter",
marker: {
fillColor: '#FFFFFF',
lineWidth: 1,
lineColor: null
},
data : (function(b){
var data = [];
for (var i = 0; i < b.length; i++) {
data.push(0);
}
return data;
})(CATEGORIES)
});
console.log(series)
return series;
})()
});
var stack1 = Highcharts.chart(stack1Config);
var stack2 = Highcharts.chart(stack2Config);
var alarmTimeoutId = null;
var alarmTimeout = function(){
return setTimeout(function(){
var ACT_COLUMN = {
normal : [],
warning : [],
danger : [],
scatter : [] // success,warning,danger total value
};
var length = 20;
for (var i = 0; i < length; i++) {
var normalCnt = Math.round(Math.random()*100);
var warningCnt = Math.round(Math.random()*100);
var dangerCnt = Math.round(Math.random()*100);
ACT_COLUMN.scatter.push({ y: normalCnt+warningCnt+dangerCnt });
ACT_COLUMN.normal.push(normalCnt);
ACT_COLUMN.warning.push(warningCnt);
ACT_COLUMN.danger.push(dangerCnt);
}
for (var key in ACT_COLUMN) {
stack1.get(key).setData(ACT_COLUMN[key],false,false);
}
stack1.xAxis[0].setCategories(CATEGORIES);
ACT_COLUMN.scatter = null;
ACT_COLUMN.normal = null;
ACT_COLUMN.warning = null;
ACT_COLUMN.danger = null;
ACT_COLUMN = null;
var cpuData = [];
for (var i = 0; i < length; i++) {
var cpu = Math.round(Math.random()*100);
var color = "#009651";
if(cpu <= 50){
color = "#009651";
}else if(cpu <= 80){
color = "#ff9800";
}else{
color = "#ff1100";
}
cpuData.push({y : cpu, color : color });
}
var series = stack2.series;
var seriesLength = series.length;
for (var i = 0; i < seriesLength; i++) {
series[i].setData(cpuData,false,false);
}
stack2.xAxis[0].setCategories(CATEGORIES);
clearTimeout(alarmTimeoutId);
alarmTimeoutId = alarmTimeout();
}, 2000);
}
alarmTimeout();
</script>