Timing issue allows multiple graphs only when manually single stepping

[Nir BD]

I have an internal report with multiple graphs that used to work well for a long time. 

Suddenly without any change on my side it shows only the first graph in the page. The other graphs have similar calls and the data looks OK but the graph is empty. No error is reported.

After debugging I saw that if I add a debugger statement in the beginning of the setOnLoadCallback function (which is called multiple times once for each graph). and then I run it manually after the code breaks in the breakpoint. All the graphs show,.

So it is not a data issue. its some kind of nasty timing issue.

Below is the actual code: 

Basically if I add debugger; where it says "// debugger here helps" and have the code run the code manually each time it stops. all the graphs will display. if not only the first graph displays.

<div id='div_46133_11159_RET_24832316219'></div>

<script type='text/javascript'>

google.setOnLoadCallback(drawgraphs_46133_11159_24832316219);

function drawgraphs_46133_11159_24832316219 () {

// debugger here helps

var conversiongraph_data = new google.visualization.DataTable();

conversiongraph_data.addColumn('number', 'time_slot');

conversiongraph_data.addColumn('number', 'Group');

conversiongraph_data.addColumn('number', 'Control');

conversiongraph_data.addColumn('number', 'Traffic volume');

conversiongraph_data.addRows([

[-126,1.308,1.220, 47363 ] ,  [-102,1.509,1.446, 43549 ] ,  [-78,1.274,1.352, 43467 ] ,  [-54,1.329,1.405, 44394 ] ,  [-30,1.106,1.099, 34343 ] ,  [-6,1.292,1.322, 6071 ] 

 

]);

 var options = {

 

chart: {

 title: 'conversion rate'

},

width: 1200,

height: 300,

axes: {

y:{

 Conv: {label: 'conversion rate %'},

 Vol: {label:'Volume (sessions)'}

}

},

 

  series: {

// Gives each series an axis name that matches the Y-axis below.

0: {axis: 'Conv'},

1: {axis: 'Conv'},

2: {axis: 'Vol'}

},

colors: ['red', 'blue', 'lightgray']

 };

  

var chart = new google.charts.Line(document.getElementById('div_46133_11159_RET_24832316219')); // material chart style

chart.draw(conversiongraph_data, options);

   

}

 

 </script>

 

     

<div id='div_46133_11159_RET_18779513343'></div>

<script type='text/javascript'>

google.setOnLoadCallback(drawgraphs_46133_11159_18779513343);

function drawgraphs_46133_11159_18779513343 () {

// debugger here helps

var conversiongraph_data = new google.visualization.DataTable();

conversiongraph_data.addColumn('number', 'time_slot');

conversiongraph_data.addColumn('number', 'Group');

conversiongraph_data.addColumn('number', 'Control');

conversiongraph_data.addColumn('number', 'Traffic volume');

conversiongraph_data.addRows([

[-126,8.291,8.106, 47363 ] ,  [-102,8.529,8.612, 43549 ] ,  [-78,8.638,8.664, 43467 ] ,  [-54,9.006,9.310, 44394 ] ,  [-30,8.525,8.762, 34343 ] ,  [-6,9.164,9.201, 6071 ] 

 

]);

 var options = {

 

chart: {

 title: 'Add to cart'

},

width: 1200,

height: 300,

axes: {

y:{

 Conv: {label: 'Add to cart %'},

 Vol: {label:'Volume (sessions)'}

}

},

 

  series: {

// Gives each series an axis name that matches the Y-axis below.

0: {axis: 'Conv'},

1: {axis: 'Conv'},

2: {axis: 'Vol'}

},

colors: ['red', 'blue', 'lightgray']

 };

  

var chart = new google.charts.Line(document.getElementById('div_46133_11159_RET_18779513343')); // material chart style

chart.draw(conversiongraph_data, options);

   

}

 

 </script>

  

[Jean-Rémi Delteil]

Hi Nir,

It seems to me that the google.setOnLoadCallback was not used correctly here.
It's just that it started acting like it should.

This callback is called one time, when the google library are loaded. And not when each scripts are loaded.

However, the fact that we cannot use it to know the Googles libs loading state is not useful !

[Daniel LaLiberte]

I don't know why it would have suddenly changed, but it is best to call google.setOnLoadCallback() only one time since it is not clear what happens when it is called more than once, perhaps in separate scripts, especially if the library that you started loading with google.load() is in the process of being loaded or has already finished loading.  If you need to have multiple functions be called, then you can wrap the multiple calls in a single function.   You might want to set up an array of such functions that you add to for each chart that you are drawing, something like this:

var callbackFunctions = [];

callbackFunctions.push(drawgraphs_46133_11159_24832316219);

function drawgraphs_46133_11159_24832316219 () { ... }

callbackFunctions.push(drawgraphs_46133_11159_18779513343);
function drawgraphs_46133_11159_18779513343 () { ... }

google.setOnLoadCallback(callbackWrapper);

function callbackWrapper() {

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

    callbackFunctions[i]();

  }

}

By the way, if you are using the frozen Google Charts loader (google.charts.load() and google.charts.onLoadCallback()) then you can call google.charts.onLoadCallback() multiple times before or after the library has been loaded.

--
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.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/fb7fda69-9b77-45f0-8969-fe5f73007f98%40googlegroups.com.

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

[Nir BD]

Thanks for the answers Jean-Remi and Daniel,

I believe that my implementation is similar to the one you can find here: https://developers.google.com/chart/interactive/faq  (search for Troubleshooting )

It uses multiple calls to google.setOnLoadCallback just like my implementation.

Here is a screenshot  http://www.awesomescreenshot.com/image/636811/41ba29ce834c15eeffed448c5ab7306d

Doesn't it mean my method should work?

As a side note I consolidated the calls to one setOnLoadCallback  call and still have the same problem. Only one graph appears.

- Nir

[Daniel LaLiberte]

Hi Nir,

Since your charts *are* material charts, that is very likely the reason that more than one chart is having trouble being displayed correctly (or at all).  The next release (due out RSN) should fix this, or you can try the frozen version v43 now.  https://developers.google.com/chart/interactive/docs/library_loading_enhancements#frozen-versions

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

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/81c73156-69e1-475e-a537-87915bc71041%40googlegroups.com.

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

[Nir BD]

Thank you Daniel, The frozen version does work.

- Nir

On Sunday, October 4, 2015 at 1:48:23 PM UTC+3, Nir BD wrote: