Tips to get better performance?

[Dale Cox]

First just wanted to say thanks for a great tool, it's super easy to integrate and use.

I'm wondering if there are things I can do to get better performance after the visualization loads.  

I'm generating a curve line visualization with 93K data points takes about 4 seconds to load then the web client seems bogged down. 

I set enableInteractivity: false in an effort to get better performance, didn't really see a difference. 

On a side note 65K  data points loads ~3 seconds.

[Daniel LaLiberte]

Hi Dale,

One thing that might benefit your case is to use the new { async: true } option, which allows the drawing of the chart to proceed asynchronously after you start it.  That way, it gives time for the page to do other things while the drawing is being completed.

Do you mean that it takes 4 seconds to load and draw 93K points?  Or is that just for loading into the browser?

Since you probably can't see all the detail of 93K points in a line, you might try to produce a smaller random sample of the data, at least for an initial drawing.  Then draw again asynchronously with more points.

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Dale Cox]

Hi Daniel,

Thanks, the async command is great, I was going to spawn a web worker but this is much easier option. 

The time from setting google.visualization.arrayToDataTable to when chart.draw(data, options) returns is about 4 seconds for 93K points with out aysnc. (I instrumented the JavaScript method to measure performance) 

While its true that the individual data points are not consumable at the scale, I want to show the entire data set in its full fidelity.  When I do that the client really slows down even after graph is fully loaded are there other options I could use to improve client performance after the visualization is fully loaded? 

Here are the options I have set currently:

var options = {

         title: 'Skew Graph',

         curveType: 'function',

         legend: { position: 'bottom' },

         enableInteractivity: false,

         async: true

        };

I guess I could always do fewer data points lowering the fidelity of the graph but then there is a risk of data loss.

Thanks,

Dale

[Daniel LaLiberte]

I can't think of anything else off hand that might help.  I would like to see your page, if I could, to do some performance analysis.

There is one other thing that is happening after the chart has finished drawing that might be contributing to a slow client, at least until it is done. An invisible table of data is generated, always asynchronously, with no option to not generate it.  It would be great if we could tell whether the accessibility table is desired by the user, but I don't know of any way to determine that.

Overall, if the client is slow after everything is done, then perhaps there is just not enough memory, in which case, the only remedy is to somehow reduce the memory requirement.

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Dale Cox]

Hi Daniel,

You can check out the page here - http://dalecox.github.io/DNA_Analysis/samples/SkewChart.html 

  I haven't cross browser tested, so for best results I would recommend running in Chrome. 

You'll need this data set - http://dalecox.github.io/DNA_Analysis/samples/largerData.txt

In my case I don't think I really need the table just the visualization or if there was an option to only get table when needed that would be great. 

Thanks for all your help,

Dale

[Daniel LaLiberte]

Thanks for providing your code and data.  It really helps us to find out what Google Charts users are doing.

Since you are now generating the chart asynchronously, you need to wait for the 'ready' event to find out when the chart is done drawing.

It appears we are generating tooltip text even if you have turned off interactivity, which we should fix.  It looks like you should be able to disable tooltips further if you add this to your options: 

  tooltip: { trigger: 'none' }

I get about a 25% improvement from that.  Another chunk of time is spent formatting the domain data anyway, even without tooltips.  We can made this a bit faster, reducing the formatting to half a second with this:

var formatter = new google.visualization.NumberFormat({pattern: ''});

                        formatter.format(data, 0);

But you could eliminate this if you just generate your data in this form for each cell value: {v: value, f: ''}

Another larger chunk of time, about half the remaining time, is consumed generating the invisible accessibility table.  We don't have a way of disabling this table because it is for the benefit of the user.  However, we will provide an option to disable this feature, defaulting to false.  Ideally, we need to find a way to detect whether the user would prefer the accessibility table instead of the generated chart.  The above hack to specify the formatted representation of data values as empty strings will, of course, conflict with the generation of the accessibility table, so we would prefer to avoid that.

These are the highest priority issues regarding performance that we need to address.  After we take care of these, there will certainly be other issues.

I've attached the modified SkewChart.html code.

--
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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Dale Cox]

Happy to help and thanks for sharing your changes back.  

I've checked in your changes so same links will still work for future testing if you need them.  

For the accessibility table what about embedding a hidden link that a screen reader would still be able to pick-up? If the user wanted that data then they could open the link and be served the data on demand using something like a http GET operation. 

Thanks again for the help! :) 

[Daniel LaLiberte]

I don't think linking to the accessibility table will be enough, but perhaps.   Also, a paged version of the table might be feasible, perhaps even using the Table chart.   But the data is local already, actually, so it is not about fetching the data again.  The problem is only the generation of a large amount of HTML to represent this table.

--

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 http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.