Question

I am creating a javascript based html dashboard. In order to refresh the values in the dashboard charts I have written the following code:

var chart, options;

function loadDynamicData() {            
    var data = window.parent.getDynamicData();
    var dataArray = data.split(',');

    for(var i = 0; i < chartData.length; i++) {
        chartData[i].data.pop();
        chartData[i].data.push(parseInt(dataArray[i],10));
    }
}

$(document).ready(function() {
    //initialize options here
    setInterval(function () {
        loadDynamicValues(); // loads dynamic values through ajax
                             // and updates options
        chart = new Highcharts.Chart(options);
    }, 300000);
});

But the problem is when I run this in the browser for a long time (about 1 hour), the memory being used goes up and the browser becomes unresponsive. If I remove the setInterval() method and run the code that is inside for once, then there is no problem.

What can be the problem here?

Answer 1

Please do a chart.destroy() before creating new chart.

if (chart) chart.destroy;

Here is a link for test. http://www.highcharts.com/tests/?file=memory-chart-destroy