CODEWITHSUNDEEP
javascriptjquerychartshighcharts
Smoki
Smoki

Reputation: 561

Huge memory leak in Highcharts - Create and destroy lacks memory?

I have a huge problem while building a small web app for my own home network (some weather data, power consumption etc) with Highcharts.

My use case is, that I have a webapp-running 24/7 which shows me some key data in a simple view, just numbers ;-) When I click on one of this numbers/tiles, a detail page with a chart is shown. I've implemented a auto-detail mechanism which scrolls the detail pages every X seconds.

My problem is, that I create Highcharts-Charts on click of the tile, when hiding the tile, the chart is destroyed with ' .highcharts().destroy();', after that the dialog box is destroyed.

After about 4-5 hours the browser crashes ('Oh Snap...'). I profiled the memory usage of the website and it looks like that:

enter image description here

I'm pretty sure, that shouldn't look like that ! As you may see, the 'c' in the below area, is growing hard!

So here my creation of the chart:

if(typeof $(bindTo).highcharts() !== 'undefined'){
      $(bindTo).highcharts().destroy();
}

// get here data with jquery from backend [jquery caching disabled]

var chart = $(bindTo).highcharts({
......
});

So here just another detail from the chrome-profiler:

enter image description here

I just picked one of these blue bars (which means, that this object created here, is still alive at the end of the profiling process [?!] ). It seems that this blue bar consists of this 'c' object, and this belongs to Highcharts.

What am I doing wrong? Is this a known behavior? How can I solve this? (Yeah maybe I could create every chart just once and just update the data, but that would be my last decission ;-) )

Thanks

Upvotes: 3

Views: 2433

Answers (1)

Smoki
Smoki

Reputation: 561

Okay,

I solved the issue by myself.

After a long time debugging, I found out, that my modal-dialog was detached from the DOM before the destroy-method of Highcharts was used. So putting the destroy-method inside a hidden-listener of the modal-dialog did it.

Upvotes: 3

Related Questions