0
234
ViewsGoogle Charts never render on slow network connections
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:
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.
Points for clarity
- Can anyone advise if
setOnLoadCallbackcan timeout or abort, or callbacks in general? - Is there any workaround for this behaviour on slow connections?
1 answers
Answer question0
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