Flicker on redrawing chart in annotated timeline

[Sam Crawford]

Afternoon all,

I've just started using the Annotated Timeline Chart, having long been
a fan of its use on Google Finance. In fact, I'm hoping to achieve a
similar effect - with high resolution data being displayed when zoomed
in on a recent date, and low resolution data when zoomed out.

Whilst this seems to be possible using the redraw approach highlighted
on http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html,
the entire graph visibly vanishes for a couple of hundred milliseconds
each time I call draw(data). This doesn't look very good at all. Given
that I don't see the same behaviour on Google Finance (and that is
definitely requesting data asynchronously from the server - Wireshark
shows this quite clearly).

My current code is extremely simple - it's exactly the same as the
example code in the URL above, except for:

1) The first call to draw is changed to: chart.draw(data,
{displayAnnotations: false, allowRedraw: true});
2) Subsequent calls to draw are simply: chart.draw(data)

I believe both of the above to be correct according to the documentation.

Any suggestions as to what I'm doing wrong here? Or is this a
limitation of the publicly available Annotated Timeline?

Thanks,

Sam

[VizGuy]

One thing you want to do is to verify that you waited for the 'ready' event to be fired after the initial draw.

See in the playground and in the docs how to listen to this event.

Once this is done, it should work.

Regards,

VizGuy

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[ATrubka]

I figured that if I disable annotations options.setDisplayAnnotations(false); the chart redraws without flickering.

Ideally, I'd like to be able to see annotations too, but at least some quick workaround is there.

Another important detail is that setAllowRedraw has to be set to true also. If it's true, then chart doesn't remove old points (which is unfortunate too!), but if it's set to false it flickers.

Is there a way to get around one or both of the problems described?

On Thursday, January 10, 2013 12:59:22 PM UTC-6, ATrubka wrote:

I have the same flickering problem.

I use GWT API to work with google vizualization charts, but I hope it's not where the problem lies.

I listen to ready event to make sure the chart is ready. Still once I call chart.draw() it flickers just like if I were to add a totally new chart to the page.

Options options = Options.create();

options.setScaleType(ScaleType.ALLMAXIMIZE);

options.setDisplayAnnotations(true);

options.setAllowRedraw(true);

chart.draw(parseChartData(_data, result), options);

Thank you in advance!

[asgallant]

The way to get around them is to abandon ATL charts entirely, in favor of using LineCharts in a Dashboard with a ChartRangeFilter.  The ATL charts are old, outdated, and rely on Flash to work.  LineCharts with a CharRangeFilter and annotation column roles provide 95% of the functionality of the ATL charts (and more that the ATL charts can't do) without the drawbacks of Flash.

[ATrubka]

Thank you. Let me try that. I hope does what we need.

[asgallant]

If you have any questions on how to make it happen, feel free to ask.