Dashboards (static and dynamic) are user interfaces to organize and present a device's data and the insights derived from the data. Dashboards contain widgets that display the data as charts, indicators, controls, tables, graphs, and other size, shapes, and forms.

With Ubidots, you can create Static and Dynamic dashboards.

  • 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 utilize a primary and replica (master/slave) technology to visualize data from different devices and variables, using a dropdown menu in the settings bar. By selecting different devices from the settings bar, a dynamic dashboard will refresh with the underlying device and variables populating each widget's visualization according to the device selected.

Table of Contents

  1. Explaining Dynamic Dashboards
  2. Explaining Static and Dynamic Widgets
  3. Creating a Dashboard (static or dynamic)
  4. Creating a Static Widget
  5. Creating a Dynamic Widget
  6. Dashboards interaction options

1. Explaining Dynamic Dashboards

When a device is selected from the setting bar, then all variables within each widget will automatically update to reflect the device’s variables. This is achieved because dynamic dashboard widgets are not associated with predetermined variables; instead, they are associated with variable labels (i.e. label=temperature).

This is very helpful enablement as it erases the need to create additional dashboard per device. Image you have a fleet of 1,000 trucks; with static dashboards you’d have to create 1,000 dashboards. With dynamic dashboards, you only have to create one dashboard, and then have the App's Users select the device for which they want to see the data:

2. Explaining Static and Dynamic Widgets

Ubidots allows you to combine static and dynamic widgets at will. Using our Truck Application example, imagine you have a variable with the aggregated fuel consumption across all thousand trucks. You want this variable to be displayed in every truck’s 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, here’s a table explaining how a widget behaves when created within a static or dynamic dashboard:

3. Creating a Dashboard (static or dynamic)

Step 1: To create a dynamic dashboard, go to "Data" –> "Dashboards"

Step 2: Click on the "dashboard" icon in the top-left of the user interface:

Step 3: Then click on the "+" icon:

Step 4: Assign a NAME to your dashboard and provide some general settings:

  • Default time range: The default time range when the dashboard is loaded.
  • Dynamic Dashboard: Enable if you're creating a dynamic dashboard. Disable it if creating a static dashboard.
  • Resolution: Choose a resolution according to the screen used to display the dashboard, or leave as Auto to be responsive.
  • Date format: Select the general date time format so the widgets inherit it. If "Custom date" is select, refer to the IMPORTANT NOTE below.
  • Default device: If dynamic dashboard is enabled, then select the default device for each time the dashboard is displayed.
  • Floating Widgets: Leave as Disabled if you want widgets to snap to each other. Enable if you want to have widgets "floating" in the user interface.
  • Widgets Opacity: Change the opacity of the widgets to give further clarity to a dashboard; "0" is transparent, "100" is solid default background. color.
  • Custom Style: Customize the default colors and fonts of dashboards, widgets, and the context bar when they are loaded.
  • Widgtet's horizontal/vertical spacing:  Choose the space between widgets that best fits your application.

IMPORTANT NOTE: Customizing your Date format.
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:

Examples:
"D/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 parse literally to the resulting Date format.

Finally, click on the green icon in the lower right of your screen to save the configuration and create a new dashboard.

4. Creating a Static Widget

Step 1: To create a static widget, click on the “+” icon in the top-right corner of the dashboard user interface.
Step 2: Select the type of Widget from the available options, or create your own with the HTML Canvas.
Step 3:
Select Static Widget
Step 4:
Assign Variable for the widget by selecting "+ Add Variables"
Step 5: Configure the widget appearance and save

5. Creating a Dynamic Widget

Step 1: To create a static widget, click on the “+” icon in the top-right corner of the dashboard user interface.
Step 2: Select the type of Widget from the available options, or create your own with the HTML Canvas.
Step 3:
Select Dynamic Widget
Step 4:
Click on "+ Add Variables" to enter a Variable label
Step 5: Configure the widget appearance and save

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. 

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 settings bar. 

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 aggregation method: 

The widget will automatically sum all values within the time range specified in the dashboard's settings bar.

The following widgets have an option to apply a method of aggregation.

  • Metric Widgets
  • Line Chart Widgets
  • Pie Chart Widgets
  • Gauge Indicator Widgets
  • Battery Indicator Widgets
  • Tank Indicator Widgets
  • Thermometer Indicator Widgets
  • Variables Tables 

Some of these widgets also give you the option to override the dashboard's time range (a.k.a "Set by dashboard"), allowing you to force the aggregation to always be computed for a predetermined time range:

Widget Appearance

Every widget has a different set of options for appearance, 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, same rules apply as in Dashboard settings in section 3. 
  • Color: Every widget has a default color ("Set by widget" option), picked by our designers. You can override this default color by selecting the option "Variable's default", which will use the variable's color.

6. Dashboards interaction options

Common to both types of dashboards, there are 4 general options to interact with the them and the data being displayed, where each outputs a different result, ranging from visualization changes to real-time update enablement/disablement. 

From left to right on how you'll find them in your dashboards, here's each of these interaction options explanation:

– Date time picker: allows selecting a time range to populate the dashboard with data contained within the range.
IMPORTANT NOTE: widgets "Span" option most be "Set by dashboard" so it reacts to the selected range, otherwise, it will always show a fix 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.

– Refresh: clicking this option will cause the dashboard to retrieve the most up to date data. This is particular useful when the real-time functionality (next option) is disabled.

– Enable/Disable real-time: dashboards have the benefit of real-time update, meaning every time a new Dot comes in to the platform, it will be automatically reflected in the dashboard and the respective widgets. Sometime is useful to disable this feature to have a fixed time range and analyze that period without disturbing with new data. To switch between real-time or not, just click the option accordingly.

Other users also found helpful...

Did this answer your question?