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