Value Widget

Learn how to use the Value Widget on Device and Global Dashboards

Overview

The value widget allows you to visualise data in an easy and straight forward way. Whether it is actual raw data coming in from your devices, or operations performed on data accumulated over a specific period of time.

Configuration

To configure your widget, enter your dashboard's edit mode, by clicking in the switch to the right of your screen. If you still don't have widgets, please select +Add widget. Search for your "Value widget" or you will find it under the "Display" category.

To edit the widget click on the pencil icon.

Basics

We now have some widget presets. Those will enlighten the whole configuration process, so if you find a preset that fits to your application, just select it.

The title is also in the Basics section. If you don't fill it, the platform will automatically take the name of the field selected in the section "Data". You can proceed and use the placeholder { device_name } inside of Global Dashboards to add the name of the device to the title as well.

Data

To configure the value widget on a device's dashboard you will be able to select the Field you want to display on the Data tab.

To configure your value widget within a global dashboard select the desired device and field. Inside of the Data tab you will also be able to configure the unit and decimal places (for float values).

Appearance

Under the tab Appearance you are able to setup:

  • Value widget color based on state: When you setup a Circular Gauge, the value on the widget with take the corresponding color.

  • Hide background: If you want the background to be transparent activate this option.

  • Hide last update: If you don't want to include the last time the device sent data.

  • Abbreviate large values: When a number field or a string is too large, this option will solve it.

  • Show Range Legend: When enabled, displays the gauge ranges as a legend next to the gauge. Only available when sufficient space is available.

  • Show current Range Name: When enabled it will appear under the value. It displays the current range name (e.g., 'Hot', 'Cold') as a coloured bubble on the gauge

As visual setting you can configure:

  • Font size: Set maximum font size for string values.

  • Tint Color: Changes the color of the background on the widget.

  • Highlight Color: Changes the color of the Title on the widget.

  • Icon: Select from a list of icons one that represents that value the best.

Gauge

If you selected a Preset, you might have it easier to configure the gauge. The presets already set value ranges for different values, among with their colours and names. Feel free to change them according to your application/use case.

You can select the Gauge Type options: Linear, Vertical, Circular, Fill Level, Compass or Gradient Ramp:

Timeframe

For a step-by-step guide on using the timeframe selection in our value widget to display consumption changes in your dashboards, be sure to check out our video tutorial ⬇️

Current Value

You can select Current Value, which will show you the last value sent by your device.

Timerange Operation

  • Operation: When you select Timerange Operation you are able to select to display Minimum, Maximum, Average, Sum, Change (absolute) or Change (percentage) from your device's field in a specific time range.

  • From: You can use the following strings to define the starting period of your time range:

    startOfHour, startOfDay, startOfYesterday, startOfWeek, startOfLastWeek, startOfMonth, startOfLastMonth, startOfYear, startOfLastYear, an hour ago, a day ago, 7 days ago, a week ago, a month ago, last year.

You can as well setup a specific date, however, take into consideration that the widget will have to make the operation using the datapoints generated in the time window set.

  • Until: In most cases you will use the variable now, but you can also use the time ranges mentioned above to calculate e.g. consumption or maximum temperatures from yesterday, last week or other fixed time ranges.

Always setup dates that exist! If the date you setup is in the future, probably no data is available.

  • Timezone: Select between a list of timezones. If no timezone is selected, Datacake will take the timezone based on the browser's timezone, which means that customers around the world will be able to see the values in their own timezone.

Last updated

Was this helpful?