---
schema_version: "1"
id: e14961a996ca81040e6d44eac8a22e7ea47456191a90a7ded5bbdd85a67d0d6c
title: Providing Chart Data Using a JavaScript Function
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/charting/pages-charting-overview-providing-data-javascript-function.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview-providing-data-javascript-function.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 21e206b2392e94da5108ed0921107426852ded36aeb642123b911fc520260a3e
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# 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:

```visualforce
<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](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview-simple-example.md):

```apex
@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;
}
```

**See Also**  


-   [Chart Data Format](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview-providing-data-format.md)
-   [JavaScript Remoting for Apex Controllers](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/javascript/pages-js-remoting.md)
-   [Refreshing Chart Data Using JavaScript Remoting](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-refreshing-data-javascript-remoting.md)