"Google Chrome ran out of memory while trying to display this webpage" while continuously plotting.

[adumbraveanu]

Hi, I encountered the following situation. I am using angular n3-chart library for real time plotting( pooling for data and plot in a loop). Attached is a sample code(index.zip).

I am letting the plotting from index.html in GoogleChrome(Version 56.0.2924.87 (64-bit)) running. Only index.html tab is opened in Chrome. Randomly the "Google Chrome ran out of memory while trying to display this webpage" appears.

To reproduce it quickly( but not sure if it's the same cause) i made the following If i increase the value for following variables from var seriesCount = 1096; var rowCount =296; to var seriesCount = 3096; var rowCount =3096; "Google Chrome ran out of memory while trying to display this webpage" message will appear shortly

index.zip

Please let me know how i can prevent this situation. Thank you, Alin Dumbraveanu

[lorem--ipsum]

Hi, why would want to show 3096 series at once ???

[adumbraveanu]

The granularity of the plotted data should be milliseconds. Please check content of zip file. What do you mean by 3096 series? You are refering to var seriesCount = 3096 or to $scope.options = { series: [ { axis: "y", dataset: "dataset0", key: "val_0", label: "A line series", color: "#1f77b4", type: ['dot'], id: 'mySeries0' } ], ?

[lorem--ipsum]

In the file you provided, you're attempting to loop over 1096 series, each of them having 296 rows, that's 296 * 1096 = 324 416 cells. Now, you also told that if you use a seriesCount of 3096 and a rowCount of 3096, Chrome runs out of memory. This is because you're looping over more than 9 millions values.

[adumbraveanu]

I mentioned that :To reproduce it quickly( but not sure if it's the same cause)" var seriesCount = 3096 can be used. I wanted to point out what is the behaviour. My problem is that using a large dataset and setting it in an interval function i obtain "Google Chrome ran out of memory while trying to display this webpage" I need help to identify why this happens.

[lorem--ipsum]

This happens because your dataset is too large to manipulate.

[adumbraveanu]

Is there a maximum size for dataset? How can i identify a dataset too large?

[lorem--ipsum]

I'm not sure about a specific size that'd be too large for a dataset, I guess that depends on the browser (again : this is probably not an issue with n3-charts).

[adumbraveanu]

I am generating same size dataset. Here is the code: var seriesCount = 1096; var rowCount =296; $interval( function(){

          for (var i = 0; i < seriesCount; i++) {
            for (var j = 0; j < rowCount; j++) {
              var row = $scope.data.dataset0[j] || {x: new Date(t + j*3600*1000*24)};
              row['val_' + i] = Math.round(Math.sin((Math.random()+1)*j/5)*(5*(i+1))*1000)/1000;
              $scope.data.dataset0[j] = row;

            }
          }

        },1
      );

It's plotting for a while and at a random moment of time i get the "Google Chrome ran out of memory while trying to display this webpage".

Indeed the dataset may be large but it's plotted. The problem that i'm trying to isolate is that i get the "Google Chrome ran out of memory while trying to display this webpage". I need a starting point to continue investigation.

[chaosmail]

Man, you run this interval command once every millisecond!? (https://docs.angularjs.org/api/ng/service/$interval) Bear in mind that you trigger a crazy amount of digest cycles in your Angular application, and on top you add 300k datapoints per interval - imagine you have to watch the whole $scope obejct for 2 way binding. This angular magic is not for free, CPU wise and RAM wise. It's no surprise that you blow up the browser after a few seconds.

Check out this blog post https://www.airpair.com/angularjs/posts/angularjs-performance-large-applications and think about your architecture. Dumping everything to the client might not be the best solution. You could try for example to only display every 1000s datapoint with interpolation, and then show more points when you zoom inside. Anyway, you should work on improving your overall architecture!

I am afraid we in particular cannot help you with this, because your problem has nothing to do in particular with n3-charts. Btw. what happens if you remove the chart directives - does the browser still blow up? maybe this is a good point to start debugging your issue.

Best, Christoph