Where does JS execution begin again after drawing charts?

[Ray Thomas]

Just when I thought I was getting ahead with the Visualizations, I find I'm not.

https://jsfiddle.net/brisray/qsgewt2d/ - works as far as I have it, but I have a question about it.

Once the graphs are drawn, I assumed that control would pass back to "mainFunction".  This is a function that loops through the object array I made creating the queries, then calls other functions that draws the tables and charts. I was hoping to add more code to that function to call other functions for other things I want to do.

What I find is that it doesn't work that way. A simple JS alert AFTER the loop shows none of the drawing is done until the alert is acknowledged.

Am I missing something? Perhaps an event handler that's triggered after the last of the array is processed and the last of the initial graphs drawn?

Is there something fundamentally wrong with the code and the way I've written it?

Ray

[Daniel LaLiberte]

Many, if not most, charts are drawn asynchronously.  There are several reasons for this potential asynchrony, but if you need to wait until the chart has been drawn, then you want to listen for the 'ready' event.  See how to handle events here:

    https://developers.google.com/chart/interactive/docs/events#the-ready-event

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@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/f92a1a4b-9758-454b-9694-b6f1702bd3a2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Ray Thomas]

I'm not sure that is the solution, or if it is, I don't see how.

The dropdowns to change the graph type work properly.

but if I add 

for (i = 0; i < graphArray.length; i++) {

      graphArray[i].graphtype = "Bar";

      drawGraphs(graphArray[i]);

to the mainFunction then Chrome's debugger reports a JSON Promise error in the first datatable ( graphArray[0] ). however it does draw it then stops, i=1 never happens.

To add to my confusion, the dropdowns to change the graph type continue to work properly even after the loop just halts - and those use the same stored datatables

Here's the amnded JSFiddle - https://jsfiddle.net/brisray/qsgewt2d/3/

Ray

[Daniel LaLiberte]

Since you are loading with just google.charts.load('current'), and no packages, the ChartWrapper must dynamically load the code for the charts that you then draw.   That doesn't appear to be a problem, however.

I see two paths into your drawGraphs() function, once in your mainFunction, in response to a 'change' event, and once in your makeQuery response handler.   The first call I see, which causes an error, is due to the 'change' event, so perhaps you should figure out how to defer setting up the 'change' handler.

--

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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@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/79234647-b0ba-4b52-b174-8faab9f04251%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Ray Thomas]

Thank you for looking at this

This function and the loop in it started out as something just for me to quickly cycle through the various types of charts to see which ones would look better and make more sense if the datatable were transposed. It turned out less trivial than I first thought, so I really do need to look at the event handlers.

I have lots of data I cannot expose to the web but Google Visualizations seems a good way of showing some that I can. I need to tidy up what I've already got, but I will return to this.

[Ray Thomas]

I abandoned what I was trying to do, which was to step through a list of various chart types to see what would be the best for what I wanted to display.

One of the things I wanted to look at was to create PNGs of the various charts. But, I ran foul of the "ready" event handlers again.

Just before I drew the charts I used

google.visualization.events.addListener(theGraphs, 'ready', function() {

        document.getElementById(imgLink).innerHTML = '<a target="_blank" href="' + theGraphs.getChart().getImageURI() + '">Printable Graph</a>';

          });

but I was getting "Cannot read property 'getImageURI' of null" errors.

Presumably because of the loop the drawing of these graphs is in, it was running too fast for the event handler to catch?

I tried removing the event handler after the drawing of the charts using 

google.visualization.events.removeListener(theGraphs);

and even

google.visualization.events.removeAllListeners(theGraphs);

I had thought of doing something like trying to count the number of times the event was triggered and comparing that to the number of times the function was called but went for a simpler, but probably not the best method, of adding  a setTimeout function.

setTimeout(function() {

      document.getElementById(imgLink).innerHTML = '<a target="_blank" href="' + theGraphs.getChart().getImageURI() + '">Printable Graph</a>';

    }, 100);

    theGraphs.draw();

Probably not the most elegant solution, but the delay of just 1/10 of a second made the problems I've been having go away.

https://jsfiddle.net/brisray/z49jw264/706/