Weird Behavior with Google Charts and Angular

[Greg Murdoch]

Good Day

I'm running into a weird issue that I can't replicate.  I have a page with ~ 50 charts, which are a mix of column, stacked column, bar, and line charts.  The data for each chart can be very large, comprising hundreds or thousands of points. 

Our users are able to load a batch of data for the charts, then change the data that's loaded and render the charts again.  On one computer, literally one, when the user tries to change the data, his browser locks up.

We've run stress testing on many other computers, and no one else has ever reported this issue, but I have witnessed his computer lock up second hand.

I read that Google Charts uses HTML5 / SVG to render, is there any support for WebGL?  I'm assuming his problem is related to the rendering stage, which is causing Chrome to lock up, but I can't be sure.  He was fine for years, and only started seeing this issue in early May, with his first report of the issue being the 2nd of May 2023.  Since then, he's running into it constantly.

Are there any guides for how to render large data charts?

Thanks

[Daniel LaLiberte]

I would look into whether you can narrow down the problem with this one computer by disabling all chrome extensions.  Also check whether the problem occurs with other browsers.  Chrome itself is updated frequently, so perhaps there was some conflict introduced that only affects this one computer or the extensions that are currently active.    Also check the developer console for errors.

Depending on the charts you are using, there will be SVG and HTML, but no WebGL yet.  

Your use of hundreds to thousands of data points should not be a problem.  Rendering will get slower, but it shouldn't fail entirely.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/829bd1e8-9d63-4cfc-bc5a-a3529bb9e691n%40googlegroups.com.

--

• Daniel LaLiberte  • SWE  • Cambridge MA  • dlaliberte@Google.com

[Greg Murdoch]

Thank you for the reply.

Yesterday we forced him to try Firefox, which didn't lock up but did get extremely laggy and slow.  He then tried Edge, which locked up in the same manner as Chrome, which makes sense as they're based on the same browser. 

At this point, we've chalked it up to a system issue.  He's unwilling to try a different OS, such as Fedora, Debian or Arch.  We haven't discounted something in Windows 11 being at fault, such as a bad graphic driver.

Thanks :)

[Greg Murdoch]

Question: What if I did something dumb like called:

google.charts.load('50', {'packages': ['corechart']});
google.charts.setOnLoadCallback(() => {

Before every chart allocation?  Instead of calling and reusing "google.charts.load"?  Would that have any serious impact on the application, and or resource allocation?

In the modern version I do:

public loadGoogleCharts(): Promise<any> {
return new Promise((r) => {
if (!this.google) {
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(() => {
this.google = google;
r(this.google);
})
} else {
r(this.google);
}
})
}

Thanks