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.


On Monday, 29 June 2015 16:38:58 UTC+1, Daniel LaLiberte wrote:
>
> 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.
>
> On Mon, Jun 29, 2015 at 9:02 AM, Aine Mitchell <[email protected] 
> <javascript:>> wrote:
>
>> 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);        
>>        }
>>
>>
>> }
>>  
>> -- 
>> 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 [email protected] 
>> <javascript:>.
>> To post to this group, send email to [email protected] 
>> <javascript:>.
>> Visit this group at 
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
>
> -- 
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> 
>  - 978-394-1058
> [email protected] <javascript:>   5CC, Cambridge MA
> [email protected] <javascript:> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

Reply via email to