<apex:gaugeSeries> Component in Visualforce Page

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:

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:

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:

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:

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:

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:

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.

Syntax:

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:

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:

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:

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;
        }
    }
}

Output