As the hub of your IoT operation, the dashboard is the place from which you keep track of your monitoring target. The dashboard contains widgets that allow you to plot data according to your needs, and every widget has a different set of configuration options. Depending on the widget, you might be able to add one or several variables. For instance, the Metric widget only supports one variable, while the Line Chart widget supports multiple variables.
In this article you’ll learn about the general process of creating a widget, their available interaction options, and the different types of widgets.
1. Creating a new widget
To create a widget, click on the “+” icon at the upper right corner of the dashboard user interface.
Select the type of widget from the available options or create your own with the HTML Canvas.
Select the widget’s behavior: Static or dynamic. To better understand these options, head over to the second section of this guide, explaining static and dynamic widgets.
Assign a variable for the widget by clicking on "+ ADD VARIABLE(S)". For dynamic widgets you can edit the variable label manually.
Configure the widget appearance and save.
1.1 Aggregation Method
This option allows you to apply an aggregation method (average, count, last value, max, min or sum) over the time range set in the dashboard's navbar.
Imagine you're measuring water consumption in an agricultural field and you want to create a dashboard for your customers to know the water consumed in a specific time range. You would then create a Metric widget with "sum" as the aggregation method.
The widget will automatically sum all values within the time range specified in the dashboard's navbar.
The following widgets have an option to apply a method of aggregation.
Metric
Thermometer
Gauge
Tank
Battery
Ring Gauge
Line Chart
Double Axis
Values Table
Devices Table
Variables Table
Heatmap Table
Pie Chart
Some of these widgets also give you the option to override the dashboard's time range (aka "set by dashboard"), allowing you to force the aggregation to always be computed for a predetermined time range.
Note: Widgets with aggregation methods other than "last value" won't display new data in real time, even if that option is enabled in the dashboard. For those widgets to display new data, you have to refresh the dashboard.
1.2 Widget Appearance
Every widget has a different set of options for appearance changes, the most common ones being:
Name: The text label to appear in the upper left corner of your widget.
Font: Option to change the font used inside the widget.
Decimal points: The amount of decimals for non-integer values.
Date format: Choose between different date formats. If "custom date" format is selected, the same rules apply as for dashboard’s settings explained here.
Color: Every widget has a default color ("set by widget" option), predetermined by Ubidots. You can override this default color by selecting the option "variable's default", which will use the variable's color, or by selecting the “color logic” option, which allows you to define how the color changes depending on the variable’s value.
Custom style: JSON-based editor where you can input element-defined keys to set parameters for the look and feel of the available elements of the widget. This comprises the "container" and not the content itself; for content styling options, read the next point, ECharts configuration.
1.2.1 Background color for metric-type widgets
The family of Metric widgets is comprised by these options:
Thermometer
Gauge
Tank
Battery
Indicator*
They have an additional appearance configuration option that allows you to either set a fixed background color or a logic that changes the background color according to a defined, data-based logic.
This option is located third from the bottom. Follow these steps to use the background color option:
Click on the gray field next to the corresponding header:
In the menu that opens up, choose whether the color will be fixed or will change based on a logic.
For a fixed color, choose the "set by widget" option and proceed to choose the background color and its opacity.
For a color logic, choose the "color logic" option and proceed to fill in the fields, according to your needs, as is shown in the following example:
Additionally, by using the trash can icons you can delete ranges in your logic, while the "+ add range" button allows you to add new ones.
*The Indicator and Ring Gauge widgets don't support the background color option.
2. Widget interaction options
Once created, widgets have the following interaction options to enhance the user’s experience.
Download a CSV file with the data of the variable(s) related to the widget. You have to select the date range and the columns you want to export.
Explore data of the variables or devices related to the widget. Once selected, a new window will open with the device or variable view.
Enlarge the widget to see it in more detail.
Duplicate the widget to save time instead of creating a new one with the same configuration from scratch.
Share the widget through a public URL or an embeddable snippet code for a website's HTML source code. All widgets can be shared except for Switch, Slider, and Manual Input widgets. For more information please head to this article.
Edit widget configurations. This can also be done via the pencil icon on the widget’s header.
Export PNG image of the widget in the selected date range.
Delete the widget permanently.
While editting a widget, you can use the "go to variable" button to head to the selected variable's page.
3. Types of widgets
The widget drawer is divided into seven types of widgets that hint at how each of them looks and works.
Depending on their type, widgets will behave differently to things such as aggregation methods or dynamic dashboards. Even though these types serve mainly as references, we can use them to take a look at how widgets respond to multiple devices being selected in a dynamic dashboard. Exceptions are pointed accordingly.
Type |
Widgets | Last value(s) in dashboards with multiple devices | Aggregation method in dashboards with multiple devices |
*Metric |
| The last value of the selected device that’s higher on the dropdown list is displayed. | A calculation is done on the data of each device and then those results are used to make the general calculation that is ultimately displayed.
For example: The selected aggregation method is “average” and we selected 3 devices. An average is calculated out of the average of each device. |
Type |
Widgets | Last value(s) in dashboards with multiple devices | Aggregation method in dashboards with multiple devices |
**Chart |
| One line, per variable, is added for each selected device (with a limit of 15 lines). | One line, per variable, is added for each selected device. |
Type |
Widgets | Last value(s) in dashboards with multiple devices | Aggregation method in dashboards with multiple devices |
***Table | Variables and Devices Table: A row is added per device.
Values Table: A row is added per new dot, per device. | Variables and Devices Table: A row is added per device.
Values Table: A row is added for each device at the selected intervals of time. |
Type |
Widgets | Last value(s) in dashboards with multiple devices | Aggregation method in dashboards with multiple devices |
Map | An icon is added on the map for each selected device. |
Doesn’t apply. |
Type |
Widgets | Last value(s) in dashboards with multiple devices | Aggregation method in dashboards with multiple devices |
****Control | A control is added for each selected device. |
Doesn’t apply. |
Type |
Widgets | Last value(s) in dashboards with multiple devices | Aggregation method in dashboards with multiple devices |
Display |
Does not apply. |
Doesn’t apply. | |
Advanced |
Not supported. |
Not supported. |
*: The Indicator will display one widget for each selected device. The Ring Gauge widget has no supported behavior for multiple devices yet.
**: The described behaviors are true for the Line Chart and Double Axis. The Bar Chart, Rose Chart, Histogram, Scatter, and Frequency Chart don’t support multiple devices behaviors.
***: The Incidents and Heatmap Table widgets are not affected by multiple devices.
****: The Manual Input is not affected by multiple devices.