When Highcharts and AngularJS team up, beware of the memory leak!

I've integrated highcharts into my AngularJS application using the highcharts-ng directive, but I'm encountering a persistent memory leak issue. My app is a slideshow with rotating slides that include charts.

To investigate further, I created 3 different test scenarios:

1 - A simple JavaScript application that rebuilds a chart every second without causing a memory leak: http://jsfiddle.net/78af7zcm/

2 - An AngularJS application that manages an array of charts, swapping them out every second to simulate a slideshow. No memory leaks were detected in this scenario: http://plnkr.co/edit/7Zkheiz82ajVusB2EtqH?p=preview

3 - Another AngularJS app similar to the previous one, but actively modifying a single chart based on an event listener. This is where the memory leak occurs, as seen after running for 1 hour and taking snapshots: http://plnkr.co/edit/7cvDrMlWlgLOBAwoNgkW?p=preview. Here's what was observed during the execution:

https://i.sstatic.net/4RPUa.png

If anyone has insights into why this might be happening, please let me know.

javascriptangularjsmemory-leakshighcharts

Answer №1

I was able to resolve my issue by removing the highcharts-ng directive and opting for native Highcharts instead. However, I am still puzzled as to why it was causing a memory leak, so I have submitted this query on their website.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am a beginner in JavaScript and I'm struggling to understand why it is not executing the else statement

As a newcomer to JavaScript, I have only learned from one website. Unsure if my code is outdated or contains elements of other software like jQuery, all I know is that it refuses to execute the else statement. <!Doctype html> <html> <body ...

javascripthtmlif-statement

Identifying when a page-loading or reloading event has been canceled

When the Cancel button is pressed during page load/reload, the content of the page loads partially. Is there a more effective way to address this issue rather than displaying incomplete content? For instance, consider showing a message such as "Page load ...

javascripthtmljquerybrowser

How can I ensure that my function only returns a value once the ajax call has finished?

Using mootools, I have a function that triggers an ajax script to retrieve a value. However, the function seems to return before the AJAX call is completed! What could be causing this issue... function getCredits() { var loadGlobalTab = new Request.J ...

javascriptajaxmootools

What is the reason behind HTML5Boilerplate and other frameworks opting for a CDN to host their jQuery files

When it comes to loading jQuery, HTML5Boilerplate and other sources[citation needed] have a standard process that many are familiar with: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window. ...

javascriptjqueryhtmlperformancehtml5boilerplate

What is the process for creating a personalized user input in JavaScript?

When entering a tracking number, please ensure it follows this specific format: AB-CDEFG-H. The first character (A) must be a digit between 1 and 9 inclusive. The second character (B) should be an uppercase English letter. This is followed by a hyphen (-). ...

javascripthtml

What steps should be taken to integrate the Babel preprocessor into a project that was set up with gulp-angular a while back?

I am currently tackling a project that was initially developed using Yeoman with the generator-gulp-angular. Back then, Babel or any other preprocessor was not added. Now I am attempting to incorporate one of these tools. Is it recommended to do this man ...

angularjsyeomanbabeljs

Tips for allowing specific tags using Google's Caja HTML Sanitizer in a node.js environment

I'm currently utilizing the npm module Caja-HTML-Sanitizer with node.js. Although I am able to sanitize the HTML input using the sanitizer() function, I am unsure of how to implement a whitelist in order to restrict only certain tags (e.g. p br stron ...

javascriptnode.jsxssgoogle-caja

The React Native SearchBar is throwing an error: It is stating that the prop type `value` being passed to `ForwardRef(TextInput)` is invalid. The expected type is `string`, but

I'm completely lost with this error message. Everything was running smoothly a while back, and I haven't made any changes to this code. When I returned to this page recently, I was greeted with the following error: Failed prop type: Invalid prop ...

javascriptreactjsreact-native

JavaScript encountered an error stating "phone is not defined" due to an uncaught ReferenceError

Whenever I click on the Phone Number, it displays an error message saying that the function is not defined. How can I fix this issue? Thank you in advance! Here's the code snippet: <div class="product-label"> <h4><?php echo $p["Fu ...

javascriptphpjqueryhtml

Developing dynamic progress indicators in Django - A guide

I'm in the process of figuring out how to create a real-time progress bar for updating. The idea is that the server will update the user periodically on the current progress. Fortunately, I am familiar with making an Ajax call using Django and jQuery ...

javascriptjqueryajaxdjangoprogress-bar

Code functions properly on local host but encounters errors when deployed to live server

My comment system was working fine on localhost using PHP, AJAX and JavaScript. However, after transferring my website to a live server, the code does not seem to be functioning properly. Here is an example of the script: <script type="text/javascript ...

javascriptphpjqueryajax

Disable image loading for users who have javascript enabled

I find myself caught in a chicken-egg dilemma. The webpage I created contains numerous images that need to be loaded, and so I implemented a script that loads images as the user scrolls, similar to how Facebook or Google Images functions. When the user rea ...

phpjavascriptjqueryajax

Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting t ...

javascripthtmlcssdomwebpack

Struggling to generate a div using my JS/jQuery code

Currently working on a post-it web application to improve my skills in JavaScript and jQuery. I've encountered a few errors that have me stumped. Although I'm new to StackOverflow, I often use it as a helpful resource. You can find the code here ...

javascriptjquerycsshtml

Retrieving object key value from an array using Underscore.js

Hey there, I'm facing a challenge where I need to extract the values of wave1 and wave2 from an array using underscore.js. array = [{"id":1,"name":"Monoprix", "pdv":16,"graph":[{"wave1":22,"wave2":11}]} ; I attempted the following: $scope.wave1 = a ...

javascriptangularjsunderscore.js

Issues with JQuery .attr method not functioning as expected

I'm having trouble with the .attr() function in jQuery. It doesn't seem to be changing the background-color of the div with the id "outline" like I expected. Here's an example of my code: <div id="outline"></div> And here is t ...

javascriptjqueryhtmlcssattr

When no values are passed to props in Vue.js, set them to empty

So I have a discount interface set up like this: export interface Discount { id: number name: string type: string } In my Vue.js app, I am using it on my prop in the following way: export default class DiscountsEdit extends Vue { @Prop({ d ...

javascripttypescriptvue.js

Modify path and refresh display upon ajax call to node server

Recently, I made the decision to utilize a Node server as a proxy for making API calls to third-party public APIs from my front end. After successfully sending a request to my Node endpoint and then to the third-party API, I received the expected response. ...

javascriptjqueryajaxnode.js

Using Rails to render a partial containing a form object

I need help with rendering a partial called 'colordata' after selecting a color from a dropdown list using Ajax. Unfortunately, I'm not seeing any changes on the main page and the form is undefined in the colordata partial. This is the sche ...

javascriptruby-on-railsrubyajax

"Exploring the power of asynchronous operations in NodeJS using Q

Currently, I am utilizing Node.js and I aim to incorporate promises to ensure a complete response following a for loop. exports.getAlerts = function(req,res,next){ var detected_beacons = []; if (!req.body || Object.keys(req.body).length == 0) { res.s ...

javascriptnode.jsmongodbpromiseq