• Sreesh Gunda
  • NEWBIE
  • 0 Points
  • Member since 2017

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies

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>