Providing Chart Data Using a JavaScript Function
To access data using JavaScript remoting, or an external (non-Salesforce)
data source, provide the <apex:chart> component with the name of a JavaScript function that provides the
data. That JavaScript function must be defined in or linked from your Visualforce page.
This function has the opportunity to manipulate the results before passing it to <apex:chart>, or to perform other user interface or page updates.
The JavaScript function must take a callback function as a parameter,
and invoke the callback with the function's data result object. The
simplest working JavaScript function looks like this:
<apex:page>
<script>
function getRemoteData(callback) {
PieChartController.getRemotePieData(function(result, event) {
if(event.status && result && result.constructor === Array) {
callback(result);
}
});
}
</script>
<apex:chart data="getRemoteData" ...></apex:chart>
</apex:page>
To support this chart, add the following controller method to the PieChartController class defined in A Simple Charting Example:
@RemoteAction
public static List<PieWedgeData> getRemotePieData() {
List<PieWedgeData> data = new List<PieWedgeData>();
data.add(new PieWedgeData('Jan', 30));
data.add(new PieWedgeData('Feb', 15));
data.add(new PieWedgeData('Mar', 10));
data.add(new PieWedgeData('Apr', 20));
data.add(new PieWedgeData('May', 20));
data.add(new PieWedgeData('Jun', 5));
return data;
}