PrimeFaces Extensions Showcase

MeterGroup

Basic usage examples of MeterGroup component demonstrating horizontal, vertical layouts and icon labels.

Basic

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Vertical

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Labels at Start

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Vertical Labels

Apps (16%)
Messages (8%)
Media (24%)
System (10%)

Source

XHTML page
Managed bean


                    <ui:composition
        xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="jakarta.faces.core"
        xmlns:h="jakarta.faces.html"
        xmlns:ui="jakarta.faces.facelets"
        xmlns:p="primefaces"
        xmlns:pe="primefaces.extensions">

    <p:growl id="growl" showDetail="true" showSummary="true"/>

    <div class="card">
        <h3>Basic</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" />
    </div>

    <div class="card">
        <h3>Vertical</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" orientation="vertical" style="height: 300px" />
    </div>

    <div class="card">
        <h3>Labels at Start</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" labelPosition="start" />
    </div>

    <div class="card">
        <h3>Vertical Labels</h3>
        <pe:meterGroup value="#{meterGroupController.meters}" labelOrientation="vertical" />
    </div>

</ui:composition>


                    @Named
@ViewScoped
public class MeterGroupController implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<MeterGroupItem> meters;

    @PostConstruct
    public void init() {
        meters = new ArrayList<>();
        meters.add(new MeterGroupItem("Apps", 16, "#34d399", "pi pi-cog"));
        meters.add(new MeterGroupItem("Messages", 8, "#fbbf24", "pi pi-inbox"));
        meters.add(new MeterGroupItem("Media", 24, "#60a5fa", "pi pi-image"));
        meters.add(new MeterGroupItem("System", 10, "#c084fc", "pi pi-desktop"));
    }

    public List<MeterGroupItem> getMeters() {
        return meters;
    }
}

Use Cases

Documentation pe:meterGroup

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
id	Unique identifier of the component in a namingContainer.Default is generated.
labelOrientation	Orientation of the labels. Valid values: horizontal, vertical.Default is horizontal.
labelPosition	Position of the labels relative to the meters. Valid values: start, end.Default is end.
max	Max value of the meter. If 0, defaults to 100 or sum of values.Default is 0.0.
min	Min value of the meter.Default is 0.0.
orientation	Orientation of the meter. Valid values: horizontal, vertical.Default is horizontal.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showLabels	Whether to show the labels.Default is true.
style	Inline style of the component.
styleClass	Style class of the component.
value	A list of meter items (MeterGroupItem).
widgetVar	Name of the client side widget.