ChartWrapper's draw() does not work in Async

89 views
Skip to first unread message

Kun Li

unread,
Apr 11, 2019, 3:08:50 AM4/11/19
to Google Visualization API
Hi experts,

I am struggling with a bars chart's screen freezing issue.
I have 5.6M data to render. And I put on my Options like below,
let options = {
                seriesType: "bars",
                fontSize: 10,
                lineWidth: 3,
                allowAsync: true,
                animation:
                {
                    startup: true
                },
                bar:
                {
                    groupWidth: "100%"
                },
                hAxis: {
                    title: "",
                    baselineColor: "white",
                    slantedText: true,
                    slantedTextAngle: 90,
                    viewWindow:
                    {
                        min: 0
                    }
                }
            };

And then I call, the draw() method would lock whole screen for 6-7 seconds while I could not do anything but freeze there.

            this.wrapper.setOptions(options);

            this.wrapper.draw();

this.wrapper is the object of google.visualization.ChartWrapper.  Does anyone know how to cope with this?? Thanks so much in advance.


Daniel LaLiberte

unread,
Apr 11, 2019, 8:24:53 AM4/11/19
to Google Visualization API
Hi Kun,

5.6M data values is a lot to render, and even if you give each data value a single pixel, it will be difficult to do a fair job representing all of it.  So I would suggest you might want to sample or summarize your data before sending it out from the server.  Then, if more detail is desired, allow the user to select a range to drill down into, fetch more data for the smaller range, and repeat.

However, you might be seeing delays in merely sending all the data to the browser.  But ignoring that, there are still several places within the code that will synchronously loop through all that data before giving control to the next process (via the allowAsync option).   Allowing more asynchrony in the code will require a substantial refactoring that we are not likely to get to soon.

I hope this helps you find a way to visualize your data efficiently and effectively.

--
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 post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/3da19891-2ee6-4d69-8e45-7cfd53e0de7d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.


--

Kun Li

unread,
Apr 11, 2019, 8:43:27 AM4/11/19
to google-visua...@googlegroups.com
Hi Daniel,

Thanks so much for your quick reply. Really appreciated. 
In our program, data transferring has been async, then rendering became to the bottleneck. At the stage probably drilling down is the only way to cope with it. 
But really looking forward to the new version with proper handling on asynchronous rendering. 😀

Cheers,
Kun


For more options, visit https://groups.google.com/d/optout.
--
Be yourself, see the courthouse flowers bloom, whether not, looking at the clouds scud across the sky.
Reply all
Reply to author
Forward
0 new messages