The <apex:gaugeSeries> is another important component for defining the data series indicating progress along with the specific metric. At a minimum, you must specify the fields in the data collection to use as labels and value pairs for the gauge level to be shown.
The readability of the gauge chart aids when we set meaningful values for the minimum and maximum along with the associated <apex: axis>. The type of values must be "gauge".
The <apex: gaugeSeries> component must be enclosed within the <apex: chart> component.
The <apex: gaugeSeries> component has the following attributes:
1. colorSet
The colorSet is a string-type attribute that defines a set of color values. These color values are used as the gauge level fill colors. The colors are defined as a comma-separated string in hexadecimal format.
Syntax:
<apex:gaugeSeries colorSet="#00F,#0F0"></apex:gaugeSeries>
2. dataField
The dataField is a string-type attribute that defines a field in the records of the chart data. By using dataField, the data value for the gauge level is retrieved.
Syntax:
<apex:gaugeSeries dataField="fieldName"></apex:gaugeSeries>
3. donut
The donut is an integer-type attribute representing the radius of the hole to be placed in the centre of the gauge chart as a percentage of the radius of the gauge. By default, its value is set to 0, which creates a gauge chart without a hole, i.e., a half-circle.
Syntax:
<apex:gaugeSeries donut="0"></apex:gaugeSeries>
4. highlight
The highlight is a Boolean-type attribute that specifies whether each gauge level should be highlighted or not when the mouse pointer passes over it. The boolean value true is set as the default value for this attribute.
Syntax:
<apex:gaugeSeries highlight="false"></apex:gaugeSeries>
5. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex:gaugeSeries id="chartId"></apex:gaugeSeries>
6. labelField
The labelField is a string-type attribute that defines a field in the records of the chart data. By using lableField, the label value for the gauge level is retrieved. The name is set as the default value for this attribute.
Syntax:
<apex:gaugeSeries labelFiled="fieldName"></apex:gaugeSeries>
7. needle
The needle is a Boolean-type attribute used to specify whether we need to show the gauge needle or not. The boolean value false is set as the default value for this attribute.
AD
Syntax:
<apex:gaugeSeries needle="false"></apex:gaugeSeries>
8. rendered
The rendered is a Boolean type attribute that specifies whether the char series need to be rendered in the chart or not. The boolean value true is set as the default value for this attribute.
Syntax:
<apex:gaugeSeries rendered="false"></apex:gaugeSeries>
9. rendererFn
The rendererFn is a string type attribute used to specify the JavaScript function. The function overrides how the gauge elements are rendered.
Syntax:
AD
<apex:gaugeSeries rendererFn="functionName"></apex:gaugeSeries>
10. tips
The tips is a Boolean type attribute used to specify whether we need to display a tooltip for the gauge level or not when the mouse pointer passes over it. The boolean value true is set as the default value for this attribute.
Syntax:
<apex:gaugeSeries tips="true"></apex:gaugeSeries>
Let's take an example to understand how we can use this component to display a chat on the Visualforce page:
ApexGaugeSeriesExample.vfp
<!-- create a Visualforce page with standard and extension controller -->
<apex:page standardController="Account" extensions="ApexGaugeSeriesController">
<!-- create JavaScript function inside script tag to override functioning -->
<script>
gaugeChart.on('beforeconfig', function(config) {
config.axes[0].margin=-10;
});
</script>
<!-- create gauge chart by using apex:chart, apex:axis and apex:gaugeSeries tags -->
<apex:chart name="gaugeChart" height="300" width="450" animate="true" data="{!data}">
<apex:axis type="Gauge" position="gauge" title="Closed Won Opportunities" minimum="0" maximum="30000" steps="10"/>
<!-- use apex:gaugeSeries for specifying data series -->
<apex:gaugeSeries dataField="size" donut="50" colorSet="#be1558,#fbcbc9"/>
</apex:chart>
</apex:page>
ApexGaugeSeriesController.apxc
//create ApexGaugeSeriesController class to form data for gauge chart
public class ApexGaugeSeriesController {
public String acctId {get;set;}
//default constructor to get record Id from the page
public ApexGaugeSeriesController(ApexPages.StandardController controller){
acctId = controller.getRecord().Id; //'001x00000035SxX' ;
system.debug(acctId);
}
// create a getter method to calculate gauge data and return it to the page
public List<GaugeData> getData() {
Integer totalOpportunities = 0;
Integer totalAmount = 0;
Integer currentMonth = date.today().month();
List<AggregateResult> closedWonOpportunities = [select SUM(Amount) totalRevenue, CALENDAR_MONTH(CloseDate) theMonth,
COUNT(Name) totalOpp from Opportunity where AccountId =: acctId and
StageName = 'Closed Won' and CALENDAR_MONTH(CloseDate) =: currentMonth
GROUP BY CALENDAR_MONTH(CloseDate)];
List<GaugeData> finalData = new List<GaugeData>();
if(closedWonOpportunities != null && closedWonOpportunities.size() > 0){
for(AggregateResult aggRes : closedWonOpportunities){
finalData.add(new GaugeData(Integer.valueOf(aggRes.get('totalOpp')) + ' Opportunities', Integer.valueOf(aggRes.get('totalRevenue'))));
}
}
return finalData;
}
public class GaugeData {
public String name { get; set; }
public Integer size { get; set; }
public GaugeData(String name, Integer data) {
this.name = name;
this.size = data;
}
}
}
