The Indicator widget offers a simple yet powerful way to track the real-time status of your devices and variables at a glance. Designed to surface quick insights, each Indicator uses a clear on/off color logic that reflects the conditions you define, making it easy to spot changes or issues without sifting through data. Whether you're visualizing a single point of interest or grouping several variables into one widget, Indicators provide a clean, customizable display that adapts to your dashboard layout and monitoring needs.
Requirements
An active Ubidots account
1. Create an Indicator Widget
Step 1. While in a dashboard, click the "+" button located at the upper right corner of the screen.
Step 2. Once in the widgets' drawer, look for and select the Indicator option.
Step 3. Click on the "+ add variables" button and select all the variables you want to monitor. A widget will be created containing an "indicator" for every variable selected here.
Step 4. Click on the "span" button to define the span of time that the widget will take into account. You can leave it in its default "set by dashboard" option so that the widget follows the dashboard's overall time span configuration.
In the "appearance" tab, you can optionally configure the following options:
Step 5. Name the widget.
Step 6. Hide the widget's header.
Step 7. Using the "display labels" button, decide whether or not you want the widget to display the value of the latest dot received by the variable and its date of arrival.
Step 8. Define the format of the data, out of these possible options:
Auto
None
Thousands
Millions
Billions
Step 9. Choose the date format of the widget.
Step 10. Define a color logic that works based on the variable's value to determine whether the Indicator is displayed as "off" or "on".
Step 11. Choose primary and secondary fonts and their respective sizes.
Step 12. Define the size of the Indicators.
Step 13. Using the "layout" option, choose the direction in which the Indicator(s) within the widget will be arranged (horizontally, vertically, or "auto").
Step 14. Change the alignment of the Indicator(s) using the "left", "center", and "right" options.
Step 15. Add a background image.
Step 16. Further customize the widget's appearance using the "custom style" editor.


