Download Visualforce Developer`s Guide

Visualforce Charting
Refreshing Chart Data Using JavaScript Remoting
The sequence for the initial loading of the chart is simple: the <apex:chart> named RemotePieChart calls
retrieveChartData() to get its initial data, and retrieveChartData() calls RemotePieChart.show() when it
has the data. And, the chart appears.
Updates are more complicated. When a new year is chosen from the theYear menu, the menu’s onChange event fires, which calls
the refreshRemoteChart() function. refreshRemoteChart() in turn calls the retrieveChartData() function,
and when the @RemoteAction returns new data, retrieveChartData() (via the callback provided by
refreshRemoteChart()) calls RemotePieChart.reload(). And, the chart updates.
Here are a couple of other items to note:
• The <apex:chart> uses the hidden="true" attribute to prevent the chart from displaying before there’s data to display.
The retrieveChartData() function calls RemotingPieChart.show() to display the chart once the chart data is
loaded. This and RemotingPieChart.reload() provide for much smoother chart animations than can be achieved using
<apex:actionSupport>.
• The refreshRemoteData() function sets the statusElement HTML <span> to a “loading…” message before it
attempts to update the data by calling retrieveChartData(), and then the anonymous callback function sets it to an empty
string to hide the message once the data is returned and the chart updated. It’s a bit more work than using
<apex:actionStatus>, for basically the same effect. You can easily show a “busy” animation or graphic using the same
technique.
PieChartRemoteController
The controller for this page is an expansion of the pie chart controller used in A Simple Charting Example on page 215.
public class PieChartRemoteController {
// The year to be charted
public String chartYear {
get {
230