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.
Static Dashboards are used to visualize data from predetermined devices and variables. Static dashboards display the same device and variable data at all times.
Dynamic Dashboards use variable labels to display data when you select a device on the drop-down menu located at the dashboard’s navigation bar. By switching through devices this way, the dynamic dashboard will refresh and the data of the latest selected device will be displayed on the widgets of the dashboard.
In this article you’ll learn about the difference between static and dynamic dashboards and widgets, their interaction options, and how to create a widget.
1. Explaining dynamic dashboards
Dynamic dashboards have an extra button in their navigation bar which allows you to select one of the devices linked to that dashboard. Once a device is selected using that button, all values within each dynamic widget (explained in the next section) will automatically update to reflect those device’s variables. This is achieved because dynamic widgets are not associated with predetermined variables; instead, they are associated with variable labels (i.e., label = temperature).
This is a very helpful feature as it spares you from having to create additional dashboards per device.
Imagine you have a fleet of 1,000 trucks. With static dashboards you’d have to create 1,000 dashboards to monitor all of them. On the other hand, with dynamic dashboards you only have to create one dashboard and then select the device whose data you want to see on the widgets:
Finally, dynamic dashboards come in two flavors:
Single device: Select one device at a time on the dashboard's navigation bar.
Multiple devices: Select up to twelve devices at a time to spot trends among them or easily aggregate their data.
2. Explaining Static and Dynamic Widgets
In a dynamic dashboard you can combine static and dynamic widgets at will. To understand this, imagine you have a variable with the aggregated fuel consumption across 1,000 trucks and you want this variable to always be displayed in the dynamic dashboard, regardless of the selected truck. In this case, you would create a static widget pointing to a preset variable.
To better understand the difference between static and dynamic widgets, here’s a table explaining how they behave:
| Static widget | Dynamic widget |
Static dashboard |
|
|
Dynamic dashboard |
|
|
3. Creating a dashboard (static or dynamic)
Step 1: To create a dashboard, go to "Data" → "Dashboards".
Step 2: Click on the "dashboard" icon at the upper left corner of the user interface:
Step 3: Then click on the "CREATE" button:
Step 4: Assign a name to your dashboard and configure some general settings:
Tags: Optionally, use them as custom identifiers to organize your dashboards or to determine if your end users get to see or interact with a specific dashboard in your app by creating tag matches between them.
Default time range: The first load corresponds to the predetermined time interval when the dashboard is loaded, otherwise it corresponds to the last selected time range.
Dynamic dashboard: Select whether you dashboard will be static, dynamic (single device), or dynamic (multiple devices).
Device list: If your dashboard is dynamic, select the set of devices that will be linked to the dashboard and that will appear on the drop-down list of the navigation bar.
Default device: If your dashboard is dynamic, select the first device to be prioritized on the dashboard.
Device display name: If your dashboard is dynamic, choose how your devices will be represented in the drop-down list of the navigation bar:
By their name.
Their API label.
Or their descriptions.
Width: Choose a resolution according to the screen used to display the dashboard or leave it in “auto” for it to be responsive.
Alignment: This option becomes available when the width is changed to anything other than “auto”. Choose whether the dashboard is aligned to the left, center, or right.
Date format: Select the general date time format so the widgets inherit it. If "custom date" is selected, refer to the “important note” below to learn more about this option.
Dashboard type: Choose whether the dashboard will be a regular one (with the default option) or it will be a custom dashboard (with the custom option). Custom dashboards allow you to embed pages into your dashboards or develop your very own custom page for it to be displayed in the dashboard. Learn more about this option following this link.
Custom page URL: This option becomes active if custom was chosen in the previous field. Paste here the URL of the page you want to be displayed on the dashboard.
Filters: Create filters for the data displayed on your dashboard that work based on values or context. Creating one of these filters introduces a new button on the dashboard’s navigation bar to apply the filters. For a more detailed explanation about dashboard filters, go to this article.
You can also change the appearance of your dashboard by going to the appearance tab:
Widgets opacity: Make the background of your widgets transparent or opaque. "0" is transparent, "100" is the solid, default background color.
Custom style: Customize the default colors and fonts of dashboards, widgets, and the context bar when they are loaded.
Widgets minimal spacing: Choose the minimal horizontal and vertical space, in pixels, that will separate your widgets.
Floating widgets: Widgets can be positioned freely on the dashboard, as if they were “floating”, by turning on the toggle. When the off position of the toggle is selected, widgets will gravitate towards the top of the dashboard until they either “hit” another widget or the top of the dashboard.
Hide widgets' header: Turn on the toggle if you want to hide the headers of your widgets (the area containing its name, edit button, and options menu button). If you hover over a widget while the “hide widgets’ header” option is enabled, its header will appear for as long as your cursor is on the widget.
Background image: Upload a background image (supported image formats are GIF, PNG, JPEG/JPG, and BMP) or enter an image URL to serve as a backdrop to your widgets.
Finally, click on the save button at the bottom right corner of your screen.
IMPORTANT NOTE:
You can enter your own date format using a parsing string as described in the Moment JS library. Below, you can find quick parsing strings and examples:
Date:
Input | Example | Description |
YYYY | 2014 | 4 or 2 digit year. |
YY | 14 | 2 digit year. |
M MM | 1... 12 | Month's number. |
MMM MMMM |
Jan... December | Month's name according to your selected language. |
D DD | 1... 31 | Day. |
Do | 1st... 31st | Ordinal numbers for days. |
DDD DDDD | 1... 365 | Day of the year. |
Time:
Input | Example | Description |
H HH | 0... 23 | Hours (24-hour time). |
h hh | 1... 12 | Hours (12-hour time). |
k kk | 1... 24 | Hours (24-hour time from 1 to 24). |
a A |
am... pm | Post or ante meridiem (note that either the |
m mm | 0... 59 | Minutes. |
s ss | 0... 59 | Seconds. |
S SS SSS | 0... 999 | Fractional seconds. |
Examples:
"DD/MMM/YY H:m:ss.SSS" – "22/Feb/19 14:57:40.369"
"YYYY-MM-DD hh:mm:ss A" – "2019-02-22 03:01:08 PM"
Notice that non alphanumeric characters such as "/", ":" or "–" are parsed literally to the resulting date format.
3.1. Dashboard Type
As the heart of your application, the dashboard page has to be as flexible as possible to accommodate to varying content needs. Widgets displaying all sorts of data will always be the bread and butter of any Ubidots application, but often times other types of content are critical to the operation and need a place of easy access, as is the case of the dashboard page.
By using a custom dashboard type, you can embed external pages for them to be displayed in your Ubidots dashboard. This could be anything, from a video that explains how to use the platform, all the way to a third-party application that's important to your operation.
Important notes:
This feature is available from the Industrial plan and onwards.
Some pages can't be embedded. This has nothing to do with Ubidots nor with the dashboard type feature, but with a restriction configured in those specific pages—this is the case of Google, for example.
Embedded pages can be interacted with. You can use available buttons and navigate freely through them.
Certain pages are embeddable and interactive except for their login portals. This means you won't be able to log in to that specific page through an Ubidots dashboard.
4. Dashboards interaction options
Common to both types of dashboards (static and dynamic), there are 4 general options to interact with them and with the data displayed in them. Using these options results in visualization changes or the enabling/disabling of the "real-time" update.
Here's a description of the interaction options, as seen from left to right in your dashboards:
Date time picker: Allows you to select a time range to display the data contained within the defined range.
IMPORTANT NOTE: Widget’s "span" option must be "set by dashboard" in order to react to the selected range, otherwise, it will always show a fixed time span.
Full-screen mode: Makes the dashboard fill the whole screen by hiding both the top navigation bar and the context bar.
To exit this mode, simply hit the "esc" key or click the "exit full screen" button at the top of the screen.
Refresh: Clicking this button will cause the dashboard to retrieve the most recent data. This is particularly useful when the real-time functionality (next button) is disabled.
Enable/disable real time: Dashboards have the benefit of real-time update, meaning every time a new dot comes in, it will be automatically reflected in the dashboard and its respective widgets. Sometimes it’s useful to disable this feature to have a fixed time range and analyze that period without disturbing it with new data. To switch the real time on or off, just click on the button accordingly.
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.
Finally, dynamic dashboards have an extra button in their navigation bar with the device drop-down list, which contains all the devices linked to that dashboard and from which you can choose the one(s) whose data will be displayed on the widgets.
5. Pinning dashboards
Users can pin their favorite dashboards to have them appear at the top of the list in the drawer for quick access.
The screenshot below shows three dashboards, sorted by their names.
Imagine you need "Dashboard 3" to always appear at the top of the dashboard list, regardless of the sorting order. With the Pin to top feature, this dashboard will be positioned at the uppermost section of the dashboard's drawer.
The following screenshot shows "Dashboard 1" and "Dashboard 3" after they have been pinned:
Once a dashboard is pinned, a line will separate the pinned and unpinned dashboards (as highlighted in the image above).
There is a limit of 5 dashboards that can be pinned at any given time. Attempting to pin more than 5 dashboards triggers the following message: "Can't pin more dashboards".
6. Creating a new widget
For a detailed explanation about widgets and how to create them, please head over to this article: