Proper ordering of callbacks

[Andy]

Hi all,

I'm making a "dashboard" type page using extjs where I'd like to have
many different types of tables, timelines, and pie charts on a single
page. Each chart needs to be self contained, so that potentially many
can be placed on the dashboard. Previously I was using the Chart API
to create the graphics, but I really like the flexibility that the
visualization API allows. I'm running into an issue, and wondering if
anyone out there has some experience with this and advice.

My data comes from AJAX calls, and I get callbacks for processing the
data once it gets loaded. That callback should then process the raw
data into a Google Table and draw the graph when it's done. I'm a
little confused about where and when to use the Google API Loader, and
how to make sure that I'm not trying to call the chart creation code
too early.

1 - Should I make a single call to the loader at the beginning of the
script, loading every module I need? This seems to make sense, but
then, how can I check to see that the modules are indeed loaded before
I try to draw? What to do if I get to the code that needs google
stuff and it's not yet loaded?

2 - Another option is to have each dashboard component call the google
loader itself. Is it bad to load the same module multiple times, or
does it handle this gracefully? Are the callbacks I set specific to
the load command that preceded it, or is there a loader-wide callback?

3 - Specifically, I'm having problems getting code that works in an
isolated page into an environment with lots of other components.
Currently I'm getting a js error from FireBug that tells me that
"a[wa] is not a function". Is there any way to decipher what that
actually means?

Many thanks!

--Andy

[Google VizGuy]

Hi Andy

Your first option is to load all packages once when the page is loading. Then you set the onLoadCallback to a function, which gets called after all packages are loaded. All paclages are loaded using one http call. This makes the rest f the page simpler, as you know that everything is loaded.

Another option is to load packages one by one. You do this by calling google.load with a callback parameter (see http://code.google.com/apis/ajax/documentation, chapter on dynamic loading). Every google.load call will issue an http request for the packages that are not already loaded (there is no double loading).

You can check yourself is a package is loaded by

if (google.visualization &&  google.visualization.Table) {

  // Table visualizationis loaded here

[Andy]

Thanks for the thoughtful response VizGuy!

One followup that a friend of mine raised: Say I have three dashboard
modules that all show a pie chart. Each of them makes a google.load
call in quick succession, such that no one call has returned before
the others go. Do we then d/l 3x the data, one for each load call?

I'm still somewhat unclear on the nature of multithreading in
javascript (I hear there isn't any) and asynchronous functions with
callbacks...

Thanks again!
--Andy

On Jul 28, 11:08 am, "Google VizGuy" <viz...@google.com> wrote:
> Hi AndyYour first option is to load all packages once when the page is

> loading. Then you set the onLoadCallback to a function, which gets called
> after all packages are loaded. All paclages are loaded using one http call.
> This makes the rest f the page simpler, as you know that everything is
> loaded.
>
> Another option is to load packages one by one. You do this by calling

> google.load with a callback parameter (seehttp://code.google.com/apis/ajax/documentation, chapter on dynamic loading).

[Google VizGuy]

I hope that this is a theoretical questions, as this typically suggests something earlier is wrong. 

Even if you have multiple load calls, only one actual http request and JS load will occur.