Gauge Widget

The Gauge Widget provides a visual representation of a single aggregated metric across multiple records using a dial-style chart. It is ideal for displaying performance against defined ranges or thresholds (e.g. Red, Amber, Green) for indicators such as Project Health, Data Quality or Governance.

This article covers:

• Use Cases
• How to add the Gauge Widget to the Home Page
• How to add the Gauge Widget to a List Page
• How to configure the Gauge Widget

Use Cases

• Display the percentage of projects in a specific status (e.g., % of Projects with a Red Health RAG)
• Show average or total values across a portfolio (e.g., Average Cost Variance %)
• Track KPI performance against defined thresholds
• Highlight whether a metric is within an acceptable range

How to add the Gauge Widget to the Home Page

You have the ability to add a Gauge Widget to Home Page Tabs or List Pages. This section covers adding a Gauge on a Home Page Tab.

Navigate to your Home Page and click on Edit:

When in Edit mode, you can Edit a specific tab (like Dashboard or Home) to add a Gauge by including it in an existing panel or Add a new Panel to add the Widget.  You can copy a tab or create a new tab by clicking on the "+" icon:

Either click on Add Panel or if you want to include it in an existing Panel you would click Add Widget.

The Widget Library will open where you can select the Gauge Chart and then choose the relevant Entity (e.g., Projects):

How to add the Gauge Widget to a List page

Navigate to the applicable List page and click the Settings (gear) icon in the top-right corner:

Select the Gauge Widget icon located on the bottom right under Charts:

How to configure the Gauge Widget

This section covers the details of the Gauge settings with some examples.  Below is a screenshot of the Settings page:

Calculation Type:  The Gauge Widget supports two calculation types:

• Basic: Perform standard aggregations such as Count, Sum, Average, Maximum, or Minimum on a numeric field.  For example Average Variance %

  

• Calculated: Build custom calculations using multiple fields or conditions. For example % Budget Variance:

Operator:  Defines how the data is aggregated (e.g., Count, Sum, Average, Maximum, Minimum).

Measure:  Specifies the numeric field the operator is applied to. This is required for all operators except Count.

Caption:  The caption field is required and allows you to specify the text describing what the gauge represents. If the calculation type is Basic, a default caption is generated based on the selected Measure and Operator.

Range:  There are two options for determining the start and end values of the gauge. 

• Auto:  The gauge automatically determines its minimum and maximum values based on the calculated value or any configured colour thresholds or ranges. Use Auto when the range should adapt dynamically based on the data, such as when looking at Average Cost Variance where you do not know how large or small the value might be.
• Manual:  You explicitly define the Start and End values. These values are always used, regardless of the calculated result. Use Manual when you need a fixed scale, such as 0–100 for percentage-based KPIs, to ensure consistency across dashboards.

Shape:  The Shape setting controls the visual layout of the gauge:

• Semi-circle: A half-dial, ideal for displaying normalised percentage metrics (0–100%). For example Tracking the "Percentage of Tasks Completed".

• Full: A complete circular gauge for a more traditional dial view. For example Monitoring total budget spent against the approved budget.

  

• Speedometer: A semi-circular dial, similar to a vehicle speedometer. For example tracking the number of projects with a Red Health status against a defined threshold.

Style:  The Style setting changes how the value is visually represented: 

• Gauge: Displays a needle on a dial, showing the value relative to defined thresholds.

  

• Solid Gauge: Fills the gauge with colour up to the current value, providing a more immediate, KPI-style visual indicator.

  

Colour:  You can specify the colour of a Gauge Widget in one of four ways.  Each option provides a different way to control how colours are applied:

• Fixed:  Select Fixed to choose a single colour for the Gauge Widget using the colour picker or wheel. The selected colour will always be displayed.
• Condition:  Choose Condition to display different colours based on a defined threshold.
  You can define one colour for when the Gauge Widget value is below a specific value, and another for when it is above that value.
• Thresholds:  Define three colour zones using two defined values: 
  • Low: Values below this threshold.
  • Mid: Values between the Low and Mid thresholds.
  • High: Values above the Mid threshold.
  • Example:
    • Low = 40 (Red)
    • Mid = 70 (Amber)
    • High = above 70 (Green)
    • A value of 65 would display as Amber, while a value of 75 would display as Green.

• Range:  Select Range to create a colour gradient based on value ranges.  You set a start colour and an end colour, each linked to specific values. The colour transitions automatically along the gradient between these two points.

To learn more about calculations for widgets, click here.