DataVista
  • DataVista
    • Getting started
    • App settings
  • Widgets
    • Gauge
      • Tutorial: Visualizing hourly energy prices with a Gauge
    • Label
    • Progress bar
      • Tutorial: Visualizing temperature with a Progress bar
    • Status badge
    • Toggle switch
    • Line chart
  • Community
    • Homey Community Forum
    • DataVista Community Topic
  • Contributing
    • Contributor Covenant Code of Conduct
    • Contributing to Athom and Homey
    • Source code
Powered by GitBook
On this page
  • Adding the widget to your dashboard
  • Configuring the Simple gauge
  • Configuring the Advanced gauge
  • Tutorials
  • FAQ
  • Why is the gauge animating in steps from 0, 25, 50, 75, and 100?
  1. Widgets

Gauge

PreviousApp settingsNextTutorial: Visualizing hourly energy prices with a Gauge

Last updated 5 months ago

The Gauge widget offers a visually dynamic way to display numerical data in the form of a gauge, making it ideal for tracking metrics like temperature, humidity, battery levels, or any other measurable value. The gauge provides an intuitive representation of your data, with customizable ranges and colors to match your specific needs.

There are two types of gauges available: the Simple gauge and the Advanced gauge. The Simple gauge can be fully configured through the widget settings, allowing you to easily adjust the value ranges, colors, and other visual elements. On the other hand, the Advanced gauge requires the use of DataVista action cards to configure both its data source and visual settings, offering more control and customization for advanced users.

Adding the widget to your dashboard

To add the progress bar widget to your dashboard, follow these simple steps:

  1. Open your Homey app and go to the Dashboards section.

  2. Enter Edit Mode and select the "Add Widget" button.

  3. Select "Apps" at the top and look for the app called "DataVista".

  4. Look for the gauge widget. You can easily identify it by the preview image (as shown below).

  5. Once you find it, click on the widget preview to add it to your dashboard.

After adding the widget, you can customize it to display specific metrics or device values, adjusting the gauge’s range and appearance to suit your needs.

Configuring the Simple gauge

The Simple Gauge widget offers more customization options but can be fully configured through the widget settings alone, making it the more straightforward choice. It includes the following configurable settings:

Setting
Description

Datasource

Select a device capability to provide the value for the gauge. The widget will use its current value and, if available, the minimum and maximum values.

Number of segments

Sets the number of segments on the gauge, with each segment's border displaying a value.

Refresh interval (seconds)

The number of seconds to wait before polling for new values.

Minimum value

Overrides the minimum value from the capability, defining the lowest point on the gauge.

Manual minimum value is negative

This setting allows you to define a negative minimum value. The positive number entered will be treated as a negative value.

Maximum value

Overrides the maximum value from the capability, defining the highest point on the gauge.

Manual maximum value is negative

This setting allows you to define a negative maximum value. The positive number entered will be treated as a negative value.

Style

Choose between Style 1 or Style 2. Style 1 features a needle, while Style 2 displays a colored bar indicating the angle of the value.

Transparent background

Choose whether the widget’s background is a solid color tile or transparent, blending seamlessly with the dashboard.

Color 1

The color at the lowest point on the gauge.

Color 2

The color at the middle on the gauge.

Color 3

The color at the highest point on the gauge.

Configuring the Advanced gauge

The Advanced Gauge widget provides greater flexibility and customization but requires the use of action cards to configure both its data and visual settings, offering more control for advanced users. It includes the following configurable settings:

Setting
Description

Datasource*

The DataVista datasource field, which can be of type range or percentage, providing the data for the advanced gauge.

Configuration source*

The DataVista configuration source, which contains the gauge colors along with their respective offset settings.

Number of segments

Sets the number of segments on the gauge, with each segment's border displaying a value.

Style

Choose between Style 1 or Style 2. Style 1 features a needle, while Style 2 displays a colored bar indicating the angle of the value.

Transparent background

Choose whether the widget’s background is a solid color tile or transparent, blending seamlessly with the dashboard.

*The datasource requires a flow with a DataVista action card to configure either a percentage or range. This action card must be run at least once before the source can be selected in the widget settings.

*The configuration source requires a flow with a DataVista action card to configure the gauge. This action card must be run at least once before the source can be selected in the widget settings.

Tutorials

FAQ

Why is the gauge animating in steps from 0, 25, 50, 75, and 100?

If the gauge is animating in steps from 0 to 25, 50, 75, and 100, and then back, it indicates that the datasource could not be found (or is no longer available). This typically happens when the selected datasource is removed. To resolve this issue, try reconfiguring the datasource setting and ensure the correct value is selected.

Tutorial: Visualizing hourly energy prices with a Gauge
The gauge widget
Gauge widget preview