Charts appear then disappear - issue with how library is loaded?

[Aine Mitchell]

Hi,

 

I am having an issue with my Google charts using an Ajax request to fetch the chart data.

 

Through debugging the code I can see the Javascript function which draws my chart is being called.

 

The issue is the chart appears for a few seconds then disappears.

 

From looking through the forum I am thinking it is some kind of issue with how the Google charts library is loaded.

 

I am loading  the library and calling the Javascript function which draws the chart after the Dom has completely loaded.

 

Could you perhaps give me some tips on what is the best way to debug this situation?

 

Any assistance you could give me would be much appreciated.

Below is a quick example of my chart script

 

Many thanks.

Aine

<script type="text/javascript">
        

       google.load("visualization", "1", {packages:["corechart","gauge"]});
                      
       function drawHitRatioChart(dataPoints) {
                    
          var data = google.visualization.arrayToDataTable([
                    ['Label', 'Value'],
                    ['Hit Ratio', {v: 50, f: ''}]
              ]);
                           
                var options = {
                        width: 450, height: 140,
                        redFrom: 0, redTo: dataPoints,  redColor: "#C1DAD6",
                        yellowFrom: dataPoints, yellowTo: 100, yellowColor: "#ACD1E9",
                        minorTicks: 10,
                        max: 100
             
        };
              
               var chart = new google.visualization.Gauge(document.getElementById('hitRatioGraph'));
             
              chart.draw(data, options);       
       }

}

[Daniel LaLiberte]

Hi Aine,

The code you copied isn't showing what you are doing with loading and calling your chart drawing function after the ajax call.   If you want to copy more of your code, or better, point to a page running your code, then we can tell what you are doing and what the problems might be.

Generally, loading the visualization library takes some time, and you have to use a callback to do the next thing that depends on the visualization library.  If you are calling google.load() when the page first loads, then you can also call google.setOnLoadCallback() to draw your chart.  But since you also need to wait for the ajax call to finish, you have to wait for two things.  It's simpler if you can chain things so your callback function is called first, at which time you can make your ajax call to get your data and then draw the chart.

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

[Aine Mitchell]

It is a bit of a complicated one.

 

This is all part of a web application.

 

The application allows the user to select some parameters, they click submit and the charts are drawn.

 

I have two scenarios:

 

1.        I am rendering the charts in a number of tabs using Richfaces <rich:tabPanel

There is an ontabenter event from which I call my javascript function to draw the chart

 

e.g. <rich:tab label="My Tab" ….. ontabenter="createHitRatioChartData();”>

 

<a4j:jsFunction name="createHitRatioChartData" oncomplete="drawHitRatioChart(#{behaviourAnalysisToolSession.behaviourChartData.hitRatioString});" immediate="true">

                </a4j:jsFunction>

 

 

The <a4j:jsFunction calls the javascript as above.

 

This working fine and the charts are displayed and I am not using a callback here.

 

 

2.       Unfortunately this will not work for the first tab -  I want to load the charts here when the tab is loaded and  ontabenter only fires when the tab is actually clicked on.

 

So I have been trying to call the same <a4j:jsFunction from my submit button.

 

<a4j:commandButton oncomplete="createHitRatioChartData();"

 

However when I do it this way the charts appear for a moment then disappear.

 

 

Any ideas you might have would be great.

 

Thanks again.

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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Daniel LaLiberte]

It sounds like something outside of Google Charts is causing the displayed chart to disappear after it has been drawn, because the only way Google Charts would clear the chart is if you call clearChart(), or perhaps if you draw again with bad data or options that cause a problem.  Perhaps you need to delay drawing the chart initially in the first tab until after some other initialization of the tab is done.  To find out what is causing the clear, you should probably use a debugger to stop before the draw, step over it to get it drawn, then step until the chart disappears.  Hope that helps.

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.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--

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

[Aine Mitchell]

I will try that so.

Thanks very much for your help Daniel.

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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Aine Mitchell]

I have found a solution to my problem, it is somewhat specific to my scenario but may be of help to anyone in a similar situation.

 

I have an iFrame which contains a number of Richfaces tabs where my charts are displayed.

 

If I call the Javascript function to draw the charts (in the first post) from the ‘onload’ method on the iframe the charts will display in the first tab.

Thanks again for your help David, it helped point me in the right direction.