Skip to main content
All CollectionsUser Guides
Create a Ring Gauge Widget
Create a Ring Gauge Widget

Learn how to create Ring Gauge widgets in your Dashboards

Santiago Pachon Robayo avatar
Written by Santiago Pachon Robayo
Updated over a week ago

Ring gauge widgets allow you to visualize the state of up to 4 variables at the same time, graphically compare them to one another, or show how close the variables are to their corresponding limits.

In this article, you'll learn how to create a Ring gauge widget.

Requirements

1. Create a Ring Gauge Widget

Step 1. While in a dashboard, click "+" button located at the upper right corner of the screen.

Step 2. Once in the widgets' drawer, look for and select the Ring Gauge option.

Step 3: Add up to 4 variables to be displayed and configure the following parameters:

  • Select the aggregation Method to compute maximum, minimum, count, average or sum based on each variable's data. Alternatively, select "last value" to display the variable's last value.

  • Choose a time span for each variable. Option "Set by dashboard" corresponds to the Dashboard's general date time picker span.

  • Select the range value to set the limits of the arc for the variable within the widget. Negative values are accepted.

  • Select the variable color. There are three available options:

    • Set by widget: A fixed, predefined color that you choose using a color picker or manually entering the hex or RGBA value.

    • Variable's default: The color assigned to the variable directly in its settings.

    • Define a color logic that works based on the variable's value.


      NOTE: The variables are placed clockwise around the Ring starting at the 12 o'clock position. Also, the positive direction for values is clockwise.

Step 4: In the appearance tab, you can:

  • Name your widget.

  • Configure the decimal places.

  • Define a date format.

  • Choose a text font.

  • Add a background image.

  • Define a background color.

  • Further customize the widget's appearance using the "custom style" editor.​

Did this answer your question?