Visualforce Developer Guide
jNewer Version Available
Refreshing Chart Data Using <apex:actionSupport>
1<apex:page controller="PieChartRemoteController">
2 <apex:pageBlock title="Charts">
3
4 <apex:pageBlockSection title="Standard Visualforce Charting">
5
6 <apex:outputPanel id="theChart">
7 <apex:chart height="350" width="450" data="{!pieData}">
8 <apex:pieSeries dataField="data" labelField="name"/>
9 <apex:legend position="right"/>
10 </apex:chart>
11 </apex:outputPanel>
12
13 <apex:form>
14 <apex:selectList value="{!chartYear}" size="1">
15 <apex:selectOptions value="{!chartYearOptions}"/>
16 <apex:actionSupport event="onchange" reRender="theChart"
17 status="actionStatusDisplay"/>
18 </apex:selectList>
19 <apex:actionStatus id="actionStatusDisplay"
20 startText="loading..." stopText=""/>
21 </apex:form>
22
23 </apex:pageBlockSection>
24
25 </apex:pageBlock>
26</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
1public class PieChartRemoteController {
2
3 // The year to be charted
4 public String chartYear {
5 get {
6 if (chartYear == Null) chartYear = '2013';
7 return chartYear;
8 }
9 set;
10 }
11
12 // Years available to be charted, for <apex:selectList>
13 public static List<SelectOption> getChartYearOptions() {
14 List<SelectOption> years = new List<SelectOption>();
15 years.add(new SelectOption('2013','2013'));
16 years.add(new SelectOption('2012','2012'));
17 years.add(new SelectOption('2011','2011'));
18 years.add(new SelectOption('2010','2010'));
19 return years;
20 }
21
22 public List<PieWedgeData> getPieData() {
23 // Visualforce expressions can't pass parameters, so get from property
24 return PieChartRemoteController.generatePieData(this.chartYear);
25 }
26
27 @RemoteAction
28 public static List<PieWedgeData> getRemotePieData(String year) {
29 // Remoting calls can send parameters with the call
30 return PieChartRemoteController.generatePieData(year);
31 }
32
33 // Private data "generator"
34 private static List<PieWedgeData> generatePieData(String year) {
35 List<PieWedgeData> data = new List<PieWedgeData>();
36 if(year.equals('2013')) {
37 // These numbers are absolute quantities, not percentages
38 // The chart component will calculate the percentages
39 data.add(new PieWedgeData('Jan', 30));
40 data.add(new PieWedgeData('Feb', 15));
41 data.add(new PieWedgeData('Mar', 10));
42 data.add(new PieWedgeData('Apr', 20));
43 data.add(new PieWedgeData('May', 20));
44 data.add(new PieWedgeData('Jun', 5));
45 }
46 else {
47 data.add(new PieWedgeData('Jan', 20));
48 data.add(new PieWedgeData('Feb', 35));
49 data.add(new PieWedgeData('Mar', 30));
50 data.add(new PieWedgeData('Apr', 40));
51 data.add(new PieWedgeData('May', 5));
52 data.add(new PieWedgeData('Jun', 10));
53 }
54 return data;
55 }
56
57 // Wrapper class
58 public class PieWedgeData {
59
60 public String name { get; set; }
61 public Integer data { get; set; }
62
63 public PieWedgeData(String name, Integer data) {
64 this.name = name;
65 this.data = data;
66 }
67 }
68}- 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.