---
schema_version: "1"
id: 1e089c5220f66cf807bc999f228efd9c083c6efaaf4e95249e41a92766052d69
title: Refreshing Chart Data Using <apex:actionSupport>
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-refreshing-data-actionsupport.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-refreshing-data-actionsupport.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 8289c4126670bdfc95323993641cdf1043e1d58beea6b5b78f0aba4dac6c4179
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Refreshing Chart Data Using \<apex:actionSupport>

Update a Visualforce chart in response to a user’s actions by adding the `<apex:actionSupport>` component to Visualforce user interface elements that affect the chart’s data.

The following markup displays a pie chart that can be updated by choosing a new year from a menu next to the chart:

<!-- otherprops: apex_page -->
```markup
<apex:page controller="PieChartRemoteController">
    <apex:pageBlock title="Charts">

        <apex:pageBlockSection title="Standard Visualforce Charting">

            <apex:outputPanel id="theChart">
            <apex:chart height="350" width="450" data="{!pieData}">
                <apex:pieSeries dataField="data" labelField="name"/>
                <apex:legend position="right"/>
            </apex:chart>
            </apex:outputPanel>
            
            <apex:form>
                <apex:selectList value="{!chartYear}" size="1">
                    <apex:selectOptions value="{!chartYearOptions}"/>
                    <apex:actionSupport event="onchange" reRender="theChart" 
                        status="actionStatusDisplay"/>
                </apex:selectList>
                <apex:actionStatus id="actionStatusDisplay"
                    startText="loading..." stopText=""/>
            </apex:form>
            
        </apex:pageBlockSection>
        
    </apex:pageBlock>
</apex:page>
```

This markup attaches a chart component to its data source by setting the chart’s `data` attribute to the Visualforce expression `{!pieData}`. The expression calls the `getPieData()` controller method, which returns the data. The chart is wrapped in an `<apex:outputPanel>` with an `id` attribute of `theChart`.

An `<apex:form>` component is used to submit a new year back to the page’s controller when the chart needs to be updated. The `<apex:selectList>` tag displays the years available to chart, and a child `<apex:actionSupport>` tag submits the form whenever the menu changes. The `id` of the chart’s `<apex:outputPanel>`, `theChart`, is used in the `<apex:actionSupport>` `reRender` attribute to limit updating to the chart, instead of reloading the whole page. Finally, an `<apex:actionStatus>` component provides a status message while the chart is refreshing. It’s easy to replace the minimal text message with an animated graphic or text effect.

## `PieChartRemoteController`

The controller for this page is an expansion of the pie chart controller used in [A Simple Charting Example](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview-simple-example.md).

<!-- otherprops: apex_code -->
```controller
public class PieChartRemoteController {

    // The year to be charted
    public String chartYear { 
        get {
            if (chartYear == Null) chartYear = '2013';
            return chartYear;
        }
        set;
    }
    
    // Years available to be charted, for <apex:selectList>
    public static List<SelectOption> getChartYearOptions() {
        List<SelectOption> years = new List<SelectOption>();
        years.add(new SelectOption('2013','2013'));
        years.add(new SelectOption('2012','2012'));
        years.add(new SelectOption('2011','2011'));
        years.add(new SelectOption('2010','2010'));
        return years;
    }
    
    public List<PieWedgeData> getPieData() {
        // Visualforce expressions can't pass parameters, so get from property
        return PieChartRemoteController.generatePieData(this.chartYear);
    }
    
    @RemoteAction
    public static List<PieWedgeData> getRemotePieData(String year) {
        // Remoting calls can send parameters with the call
        return PieChartRemoteController.generatePieData(year);
    }

    // Private data "generator"
    private static List<PieWedgeData> generatePieData(String year) {
        List<PieWedgeData> data = new List<PieWedgeData>();
        if(year.equals('2013')) {
            // These numbers are absolute quantities, not percentages
            // The chart component will calculate the percentages
            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));
        }
        else {
            data.add(new PieWedgeData('Jan', 20));
            data.add(new PieWedgeData('Feb', 35));
            data.add(new PieWedgeData('Mar', 30));
            data.add(new PieWedgeData('Apr', 40));
            data.add(new PieWedgeData('May',  5));
            data.add(new PieWedgeData('Jun', 10));
        }
        return data;
    }

    // Wrapper class
    public class PieWedgeData {

        public String name { get; set; }
        public Integer data { get; set; }

        public PieWedgeData(String name, Integer data) {
            this.name = name;
            this.data = data;
        }
    }
}
```

This controller supports providing data to a Visualforce chart two different ways:

-   Using a Visualforce expression, `{!pieData}`, which calls the instance method `getPieData()`.
-   Using JavaScript remoting, by calling the `@RemoteAction` static method `getRemotePieData()` from a JavaScript method.

**See Also**  


-   [Refreshing Chart Data Using JavaScript Remoting](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-refreshing-data-javascript-remoting.md)
-   [Providing Chart Data via a Controller Method](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-charting-overview-providing-data-controller-method.md)
-   [apex:actionSupport](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/components/pages-compref-actionsupport.md)
-   [apex:actionStatus](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/components/pages-compref-actionstatus.md)