It is one of the most important components that is used for defining the data series that needs to be rendered as a shaded area in a VF chart. The <apex:areaSeries> component is similar to the <apex:lineSeries> component with the fill attribute set to true.
The <apex:areaSeries> component has the following attributes:
1. axis
The axis attribute is of type String that is used to define the axis by which the chart series should bind to. Left, right, top and bottom are the possible values for it.
The bound axis should be defined by a sibling component, i.e., <apex:axis> component.
Syntax:
<apex:areaSeries axis="left" ></apex:areaSeries>
2. colorSet
It is of type String that is used for defining the set of color values. We specify the colors as the hexadecimal color that should be comma separated.
Syntax:
<apex:areaSeries colorSet="#00F, #0F0, #F00" ></apex:areaSeries>
3. highlight
It is of type Boolean that is used for specifying whether each level should be highlighted or not when the mouse pointer passes over it. By default, its value is set to true.
Syntax:
<apex:areaSeries highlight="false" ></apex:areaSeries>
4. hightlightLineWidth
It is of type Integer that is used for specifying the width(pixels) of the line that surrounds a level when it's highlighted.
Syntax:
<apex:areaSeries highlightLineWidth="20" ></apex:areaSeries>
5. highlightOpacity
It is of type String that is used for specifying the decimal number between 0 and 1. The decimal number represents the opacity of the color overlay on a level when it's highlighted.
Syntax:
<apex:areaSeries highlightOpacity="0.5"><apex:areaSeries>
6. highlightStrokeColor
It is of type String that is used for specifying the color(hex code) of the line that surrounds a level when it's highlighted.
Syntax:
<apex:areaSeries highlightStrokeColor="#000"></apex:areaSeries>
7. id
The id attribute is of type string that allows the chart component to be referenced by other components on the page.
Syntax:
AD
<apex:areaSeries id="chartId"></apex:areaSeries>
8. opacity
It is of type string that is used for specifying the decimal number between 0 and 1. The decimal number represents the opacity of the filled area for this level of series.
Syntax:
<apex:areaSeries opacity="0.5"></apex:areaSeries>
9. rendered
It is of type Boolean that is used for specifying whether the char series is rendered in the chart or not. By default, its value is set to true.
Syntax:
<apex:areaSeries rendered="true"></apex:areaSeries>
10. rendererFn
It is of type string that is used for specifying the name of the JavaScript function. The specified function overrides how each data point is rendered.
AD
Syntax:
<apex:areaSeries rendererFn="functionName"></apex:areaSeries>
11. showInLegend
It is of type Boolean that is used for specifying whether this chart needs to be added to the chart legend or not. By default, its value is set to true.
Syntax:
<apex:areaSeries showInLegend="true"></apex:areaSeries>
12. tips
We use this attribute when we need to display a tooltip for each data point marker when the mouse pointer passes over it. This attribute is of type Boolean, and by default, its value is set to true.
Syntax:
<apex:areaSeries tips="true"></apex:areaSeries>
13. title
It is of type string that is used for defining the title of this chart series that need to be displayed in the chart legend.
Syntax:
<apex:areaSeries title="Picard"></apex:areaSeries>
14. xField
The field in each record is provided in the chart data from which to retrieve the x-axis value for each data point in the series. This field must exist in every record in the chart data.
Syntax:
<apex:areaSeries xField="name"></apex:areaSeries>
15. yField
The field in each record is provided in the chart data from which to retrieve the x-axis value for each data point in the series. This field must exist in every record in the chart data.
Syntax:
<apex:areaSeries yField="data1,data2,data3"></apex:areaSeries>
Let's take an example to understand how we can use the areaSeries component in VF:
ApexAreaSeriesExample.vfp
<!--Apex Page with standard and custom controller-->
<apex:page standardController="Campaign" extensions="ApexAreaSeriesController">
<!-- use pageBlock, pageBlockSection, and pageBlockSectionItem to design chart in VF-->
<apex:pageBlock >
<!-- pageBlockSection that display the chart for Area-->
<apex:pageBlockSection title="Area">
<apex:pageBlockSectionItem >
<!-- use apex:chart component with legend, axis, charLabel and areaSeries-->
<apex:chart height="400" width="700" animate="true" legend="true" data="{!data}" name="Area Chart" theme="Category3">
<apex:legend position="right"/>
<apex:axis type="Numeric" position="right" fields="record1,record2,record3" title="Closed Won" grid="true">
<apex:chartLabel />
</apex:axis>
<apex:axis type="Category" position="bottom" fields="name" title="Month">
<apex:chartLabel rotate="300"/>
</apex:axis>
<apex:areaSeries axis="right" xField="name" yField="record1,record2,record3" tips="true" />
</apex:chart>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<!-- pageBlockSection to display Pie chart-->
<apex:pageBlockSection title="Pie Chart Example">
<apex:pageBlockSectionItem>
<!-- use apex:chart component with legend and pieSeries-->
<apex:chart height="400" width="400" data="{!pieData}">
<apex:pieSeries dataField="record" labelField="name"/>
<apex:legend position="left"/>
</apex:chart>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
ApexAreaSeriesController.apxc
// create class ApexAreaSeriesController for constructing chart data
public with sharing class ApexAreaSeriesController {
// declare a campaign to access it on the VF page
public Campaign campRec {get;set;}
// default constructor with StandardController
public ApexAreaSeriesController(ApexPages.StandardController std){
campRec = (Campaign)std.getRecord();
}
// create getPieData() method
public List<PieChartDataWrapper> getPieData() {
// create a list of PieChartDataWrapper
List<PieChartDataWrapper> info = new List<PieChartDataWrapper>();
// get the aggregate result of month and revenue
List<AggregateResult> opps = [SELECT SUM(Amount) revenue, CALENDAR_MONTH(CloseDate) theMonth
FROM Opportunity WHERE CampaignId =: campRec.id GROUP BY CALENDAR_MONTH(CloseDate)];
// iterate aggregate result of opportunity
for(AggregateResult agg : opps){
Integer revenue = Integer.valueOf(agg.get('revenue'));// typecast outcome into Integer
String month = String.valueOf(agg.get('theMonth')); // typecast outcome into String
info.add(new PieChartDataWrapper(month, revenue));
}
return info;
}
// create getData() method
public List<DataWrapper> getData(){
// create a list of DataWrapper
List<DataWrapper> data = new List<DataWrapper>();
// add data to the list
data.add(new DataWrapper('January', 35, 85, 50));
data.add(new DataWrapper('February, 39, 10, 60));
data.add(new DataWrapper('March', 20, 27, 70));
data.add(new DataWrapper('April', 69, 22, 80));
data.add(new DataWrapper('May', 60, 46, 90));
data.add(new DataWrapper('June', 28, 40, 94));
data.add(new DataWrapper('July', 87, 77, 25));
data.add(new DataWrapper('August', 82, 68, 40));
data.add(new DataWrapper('September', 29, 60, 50));
data.add(new DataWrapper('October', 73, 61, 51));
data.add(new DataWrapper('November', 75, 62, 48));
data.add(new DataWrapper('December', 12, 65, 65));
return data;
}
// create DataWrapper class to form data
public class DataWrapper {
public String name { get; set; }
public Integer record1 { get; set; }
public Integer record2 { get; set; }
public Integer record3 { get; set; }
// parameterized constructor
public DataWrapper(String name, Integer record1, Integer record2, Integer record3) {
this.name = name;
this.record1 = record1;
this.record2 = record2;
this.record3 = record3;
}
}
// create PieChartDataWrapper to form data for Pie chart
public class PieChartDataWrapper {
public String name { get; set; }
public Integer record { get; set; }
// parameterized constructor
public PieChartDataWrapper(String name, Integer record) {
this.name = name;
this.record = record;
}
}
}
