Google Charts never render on slow network connections

user_792888 0
Viewed 69

We use Google Charts in our application to render donut charts. One user has reported Javascript errors showing instead of the chart, and I've been trying to simulate this. The closest I can get is to throttle the network speed in the browser to a very slow connection (e.g. GPRS in Firefox, or 20kbps in Chrome). The causes some unusual things to happen that I did not expect.

Using the example Google donut chart code (verbatim - to prove that call backs are set) with a throttled connection (Fiddle here for convenience):

Firefox

Firefox never renders the charts. The callback method never gets invoked. It's as if the browser "forgets" the callback, or the callback has a timeout property:

enter image description here

Chrome

Chrome does not render the chart, and intermittently displays errors relating to arrayToDataTable. I searched extensively for these errors, and all solutions appear to related to the callback not being used correctly (e.g. rendering without waiting for the script to load). Its like Chrome either gives up waiting and executes the callback anyway, or just aborts the logic flow.

enter image description here

Points for clarity

  1. Can anyone advise if setOnLoadCallback can timeout or abort, or callbacks in general?
  2. Is there any workaround for this behaviour on slow connections?
google-visualization charts callback javascript
1 Answers

maybe try using the promise the load statement returns, rather than the callback.

for example, here is a typical statement, using the callback...

google.charts.load('current', {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

instead, try using the promise...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);    // <-- load statement returns a promise
user_50907710
Related