Sign Up ›
  • arghhhhh
  • NEWBIE
  • 0 Points
  • Member since 2012
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 7
    Replies
SOLVED
15 replies

Drawing google chart on page load always empty

Hi All,

 

I had a page which was working perfectly rendering 3 pageblock sections and a google chart section.  I modified this code to now show a "now loading" screen while it fetches the elements and this has now broken the google charts portion for some reason.  Charts always shows "no data" now.

 

My guess is because the script tag used to pull this data in from the controller is now run at a time when my function that pulls this data together in the backend is not yet ready.. not sure.

 

Here is what is intended:

1. on page load a "please wait while fetching info.." pops up and a single controller method is called pulling all relevant data together.

2. once the method is complete a pageblocktable is populated and the google charts data is drawn.

 

That's it.  I've tried several workarounds to this but all to no avail.  I've posted the portions of the vf which matter for now.  The controller has always worked so I have not posted that yet.

 

Thanks in advance to all who help!

 

...
<apex:actionstatus id="pleasewait">
            <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;
                       height: 100%;opacity:0.65;width:100%;"> 
                    <div class="waitingHolder" style="top: 74.2px; width: 91px;">
                        <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                        <span class="waitingDescription">Loading...</span>
                    </div>
                </div>
            </apex:facet>
        </apex:actionstatus>    	
    	
    	<apex:actionFunction action="{!getFinAccts}" name="initialLoad" reRender="finAccountsTable, finAcctAnalytics" oncomplete="google.setOnLoadCallback(drawChart);" status="pleasewait" />
    	<!--Load the AJAX API-->   
    	<script type="text/javascript" src="https://www.google.com/jsapi"></script>    	    		             
		<script type="text/javascript">        	
			// Load the Visualization API and the piechart package.
	           google.load('visualization', '1.0', {'packages':['corechart']});
	
	           // Set a callback to run when the Google Visualization API is loaded.
	           google.setOnLoadCallback(drawChart);
	       
	           // Callback that creates and populates a data table,
	           // instantiates the pie chart, passes in the data and
	           // draws it.
	           function drawChart() {
	       
	               // Create the data table.
	               var data = new google.visualization.DataTable();
	               data.addColumn('string', 'Account Type');
	               data.addColumn('number', '# of Accounts');
	               console.debug('DataTable: {!dataTable}');
	               {!dataTable}                
	       
	               // Set chart options
	               var options = {'title':'{!Account.Name}',
	                              'width':400,
	                              'height':300};
	       
	               // Instantiate and draw our chart, passing in some options.
	               var chart = new google.visualization.PieChart(document.getElementById('chart'));
	               chart.draw(data, options);
	           }            
	    </script>
    	
    	<script type="text/javascript">    	
        	window.setTimeout(initialLoad, 100);        	        	            
    	</script>
...
        <!-- Financial Account Analytics -->
        <apex:outputPanel id="finAcctAnalytics" layout="block">
	    	<!--Div that will hold the pie chart-->
	        <div id="chart" layout="block" style="overflow:auto;" />	        	        		        	            				              	        
		</apex:outputPanel>

 

SOLVED
4 replies

commandLink with actionSupport to display image within actionStatus

I have a list of values in a pageBlockTable for which when a single column in the table is clicked (this column is displaying commandlinks) a section of the vf page refreshes and several other pageBlockSection are updated via ajax. that is working however, only when I remove the actionsupport... when I include the actionsupport to get the "waiting to complete" gif to show up the entire vf section refreshes and my controller is never called. I've scoured the net and have tried the numerous examples explained on this board to no avail... what am I doing wrong?!

 

Below is my code,. Thanks to all who reply:

 

...<apex:actionStatus id="pleasewait" layout="block">
<apex:facet name="start">
<img src="{!$Resource.AjaxAnimation}" />
</apex:facet> 
</apex:actionStatus>
<!-- List of Financial Accounts --> 
<apex:outputPanel id="finAccounts" layout="block" style="overflow:auto; height:250px;"> 
<apex:pageBlock >



<apex:pageBlockSection showHeader="true" title="Financial Accounts List" columns="1"> 
<apex:pageBlockTable value="{!FinAccts}" var="finAcct" id="finAccountsTable" rowClasses="odd,even" styleClass="tableClass"> 

<apex:column >
<apex:facet name="header">Address</apex:facet>
<apex:actionRegion >
<apex:commandlink value="{!finAcct.address}" action="{!getFinAcctDetails}" reRender="acctDetails, acctTransactions"> 
<apex:actionSupport event="onclick" status="pleasewait" /> 
</apex:commandlink>
</apex:actionRegion> 
</apex:column> 
<apex:column >
<apex:facet name="header">City</apex:facet> 
<apex:outputText value="{!finAcct.city}"/> 
</apex:column>

<apex:column >
<apex:facet name="header">State</apex:facet> 
<apex:outputText value="{!finAcct.state}"/>
</apex:column>

<apex:column >
<apex:facet name="header">Postal</apex:facet> 
<apex:outputText value="{!finAcct.zip}"/>
</apex:column>

<apex:column >
<apex:facet name="header">Country</apex:facet> 
<apex:outputText value="{!finAcct.country}"/>
</apex:column>
</apex:pageBlockTable> 
</apex:pageBlockSection> 
</apex:pageBlock> 
</apex:outputPanel>...