The Metric Widget is a data visualization option that enable built-in computation functions such as maximum, minimum, sum, count, average, or last value to be calculated and displayed for specified time-period.
Ubidots Metric Widget, in addition to its analytical benefits also supports a degree of customization using an HTML editor to adjust display formatting. Learn to use Ubidots pre-built Metric Widgets in your App's dashboards easily using the below guide.
Requirements
Active Ubidots account with available data
Table of Contents
1. Create a Static Metric Widget
Following the below steps you will be able to create a Static Metric Widget, constantly displaying data from only one device. To create a dynamic widget that updates based on the device selected in the navbar, skip to section 2 below.
Create a Static Metric Widget
Step 1: Click on the top-right "+" icon.
Step 2: Select the Metric Widget.
Step 3: Click on the "Add Variables" button.
Step 4: Search for a Device and Select a Variable.
Step 5: Configure the widget's settings:
Aggregation Method: Compute maximum, minimum, count, average or sum based on the variable's data over a selectable time span or let the span be defined by the Dashboard, or simply display variable's last value of all time.
Name: Input a tittle name for the Metric Widget.
Use the HTML Editor: see section 3 of this guide below. By default, the toggle switch is OFF.
Show last updated info: toggles ON/OFF whether or not to display date, time, and seconds information. Defaults is ON.
Font Family: Choose between Open Sans, Montserrat or Roboto Mono available fonts.
Decimal points: Enter the decimal places to be displayed. Defaults to account's general decimal places settings.
Date format: Select a date time format to display the timestamp of data displayed.
Color: There are two options: – Set by Widget meaning the color (#FFAE58) is chosen by the widget. – Variable's default which will use the color coordinated to the variable beginning displayed.
2. Create a Dynamic Metric Widget
Following the below steps you will be able to create a Dynamic Metric Widget, constantly displaying data from one device, but with the ability to switch between devices of the same kind just by selecting different available devices in the Navbar.
Prior Step: Before creating a Dynamic Metric Widget you must have a Dynamic Dashboard created. Please refer to here to learn how to create a Dynamic Dashboard.
Creating a Dynamic Metric Widget
Step 1: Click on the top-right "+" icon.
Step 2: Select the Metric Widget.
Step 3: Select widget behavior to be Dynamic.
Step 4: Enter the {{variable label}} to identify which variable will be calculated in the Dynamic Widget in your Dashboard.
Step 5: Configure the widget's settings:
Aggregation Method: Compute maximum, minimum, count, average or sum based on the variable's data over a selectable time span or let the span be defined by the Dashboard, or simply display variable's last value of all time.
Name: Input a tittle name for the Metric Widget.
Use the HTML Editor: this option is cover in section 3 below. By default leave the toggle switched to OFF.
Show last updated info: toggles ON/OFF whether or not to display date time and seconds information. Defaults is ON.
Font Family: Choose between Open Sans, Montserrat or Roboto Mono available fonts.
Decimal points: Enter the decimal places to be displayed. Defaults to account's general decimal places settings.
Date format: Select a date time format to display the timestamp of data displayed.
Color: There are two options: –Set by Widget means the color (#FFAE58) is chosen by Ubidots. –Variable's default indicates to pick the color from the color picker next to the variable selected at the beginning.
3. Customize the Metric Widget with its HTML Editor
In the above sections, the toggle switch to activate the HTML Editor and provide the further custom visualizations is set to OFF. By toggling the HTML Editor and using this guide and the supported customization keys below you can automatically retrieve parameters from a variable, regardless the Dynamic or Static nature of the widget.
Step 1: Create a new Metric Widget or Edit an existing one by clicking on the top-right "sprocket" icon.
Step 2: Switch ON the toggle to "Use the HTML editor".
Step 3: Click the button "Open editor".
Step 4: Customize the Metric widget using the available HTML tags and keys below to access variable and widget information from within your Ubidots account:
HTML Tags:
Variable and Widget Keys:
{{aggregationMethod}}: Retrieves the method used to get the value.
{{value}}: Current value according to the aggregation method and time span selected.
{{variable}}: This key allows retrieving both name and unit properties from the variable. To access use the dot "." operator as follows:
{{variable.name}}
{{variable.unit}}{{device}}: This key allows retrieving the name, label, ID, description and properties from the device. To access use the dot "." operator as follows:
{{device.name}}
{{device.label}}
{{device.id}}{{device.description}}
{{device.context.<key>}}
Note: To access the device properties, you must replace <key> with the property key you want to show.
{{span}}: Time range selected to obtain data according to the Aggregation Method.
{{timestamp}}: Timestamp of the displayed data in a format matching the one selected on the Metric Widget Settings.
{{context.key}}: Retrieves the value from the variable context key specified.
Example: copy and paste the below HTML code and see the difference between default's pre-settings and the custom set by the HTML:
<p style="margin: 0;">
<strong>{{variable.name}}</strong> <em>variable</em> {{aggregationMethod}} {{span}} is:
</p>
<p>
<span style="font-size: 5rem; font-weight: bolder; line-height: normal; margin: 0;color: #59F0E2">{{value}}</span>
<span style="font-size: 2rem; color:#F059DB">{{variable.unit}}</span>
</p>
<p style="font-size: 2rem;margin: 0;color: #F05959"><u>{{timestamp}}</u></p>