Chart redrawing

2,714 views
Skip to first unread message

Felipe

unread,
Jul 11, 2011, 1:35:40 PM7/11/11
to Google Visualization API
I want to make real-time data to be shown. I use Java servlet as
server side.

So I think I should make a requisition every 100 milliseconds using
setInterval javascript function.

It workds but the graphic redraw every time the requisition is made.
For example:

var data = response.getDataTable();

chart.draw(data, {width: 400, height: 240, title: 'Company
Performance'});

This above is called every 100 milliseconds and there are some glishes
on screen. Is there a way to redraw the graphic without graphic
glitches?

Am I doing it correctly?

I'm using Firefox 5.0

asgallant

unread,
Jul 11, 2011, 1:51:15 PM7/11/11
to google-visua...@googlegroups.com
Refreshing at a 100ms interval might be too fast (I'm not 100% certain, but I think it takes longer than that just to draw the chart).  Slow it down (say to 5s intervals) and see what happens.  If it works, gradually speed it up until you see the glitches.  That should give you a good idea of how fast you can update.

Felipe

unread,
Jul 11, 2011, 2:07:27 PM7/11/11
to Google Visualization API
So isn't here a way to draw graphics on this speed with google charts?

If so, maybe I think Google Charts is not suitable for me.

Thanks

Roni Biran

unread,
Jul 11, 2011, 2:25:30 PM7/11/11
to google-visua...@googlegroups.com

This is nit a RT gadget, but a client side rendered object. You must remember that even if you'll manage to speed it up, you have glitches from time to time due to communication problems and the integration between java servlets and JavaScript
If I were you, I would render it every 2-5 seconds top (assuming that the connection is persistent)

Good lick

--
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.

asgallant

unread,
Jul 11, 2011, 3:38:13 PM7/11/11
to google-visua...@googlegroups.com
I ran a quick test, and it looks like the time to draw the chart (once data has been retrieved) is trivial (<1ms).  Have you checked what your round-trip time to and from the server is?  If it's > 100ms, you could be having problems there.

NA

unread,
Jul 12, 2011, 7:29:03 AM7/12/11
to Google Visualization API
From my experience, I've noticed that some charts are designed for
"smooth updates", like the gauges. Others redraw. But the redraw is
very fast.

For fast redraws, you need to be careful how you manipulate the data
set. Instead of this:

var data = response.getDataTable();
chart.draw(data, {width: 400, height: 240, title: 'Company
Performance'});

Create a chart using the ChartWrapper class. Set the data property
once, when you initialize it.

Then when you update the data object (don't create a new one each
time, just update the cells of the table or add/remove rows
appropriately), just call the wrapper's draw() method without
supplying a new data set.

In your code snippet, you are creating a new DataTable each time,
which along with the draw(DataTable), is slow. In my suggestion, you
are updating a DataTable, and then just calling draw(). This is a
little faster and might make all the difference you need.

gl,

Jinji

unread,
Jul 12, 2011, 12:45:29 PM7/12/11
to google-visua...@googlegroups.com
In addition to everything, remember that you should wait for the 'ready' event after every call to draw(). Only then you can call draw() again. The first call will take more time than subsequent calls.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
Reply all
Reply to author
Forward
0 new messages