Ubidots provides data visualization in multiple forms, one of the most popular is Table Widgets. Table widgets are composed of rows and columns, and are excellent for:

  • Comparing a wide set of values.

  • Showing, to each member of a diverse audience, their specific data.

  • Displaying different units of measure that might not otherwise be understood with a bar or pie chart.

  • Provide precision and data interpretation.

Requirements

Table of Contents

  1. Create a Devices Table widget.

  2. Create a Variables Table widget. 

  3. Create a Values Table widget.

1. Create a Devices Table widget

After logging into your Ubidots account, select the appropriate Dashboard and follow the steps below to create a Devices Table widget that will display all the data related to multiple devices:

Step 1: Create a new widget: Click on the "+" icon at the top right corner to create a new widget.
Step 2: Select Devices table
Step 3: if your dashboard is dynamic and so the widget, choose in the Device list option the Devices you want to display in the table. 

  • Set by Dashboard

  • All Devices 

  • Device Group 

  • Device Type

Step 4: Add Devices as rows
Step 5: Choose one of the following options to display as a column:

– Context data
 Enter the variable label and the context key.
 Select the Color behavior.

– Value
 Enter the variable label.
 Select an aggregation method and Span.
 Select the Color behavior.

– Device property
 Enter the Device property key.
 Select the Color behavior.

– Date
 Enter the variable label and column name.

Moving to the Appearance section:
Step 6: Set all the available fields:
Name your table widget
– Set the Decimal places
– Choose a Date format
– Select Borders and Border width.
– Select the number of Devices/Variables/Values per page.
– If any, enter a Custom Style for your widget

2. Create a Variables Table widget. 

Display the readings of a variable with the respective timestamp.

Step 1: Click on the top-right "+" button
Step 2: Select Variables table.
Step 3: Add a variable as a row
Step 4: Choose the column to display: Value, Context data or Device property.
Step 5: Set all the available fields:
Column Name
– Select the aggregation method or enter the context key or device property
– Select the Color behavior

Moving to the Appearance section:
Step 6: Set all the available fields:
Name of the Table
– Set the Decimal places
– Set a Date format
– Select Border and Border width
– Select variables per page
– If any, enter a Custom Style for your widge

3. Create a Values Table widget.

Values table provide a list of the most recent recorded readings.

Step 1: Click on the top-right "+" button
Step 2: Select Values table.
Step 3: Add a context or value column
Step 4: Set all the available fields:
Column Name
– Select the aggregation method or enter the context key
– Select the Color behavior

– Display the Device name(optional)

Step 5: Edit actions when on click or double click a variable's value.

Set dashboard device: “Set” the Dynamic Dashboard device with the device to which the variable in question belongs.

Go to device: It takes you to the device view in a new tab, showing the device to which the variable in question belongs.

Go to variable: It takes you to the variable view in a new tab, showing the variable in question.

Go to dashboard: Opens a new tab with the Dashboard specified by the user.

Go to URL: Opens a new tab with the specified URL.

Moving to the Appearance section:
Step 6: Set all the available fields:
Name of the Table
– Set the Decimal places
– Set a Date format
– Select Border and Border width
– Select variables per page
– If any, enter a Custom Style for your widget

IMPORTANT NOTE: You can drag and drop the columns of the table to change their display order.

Other developers also found helpful...

Did this answer your question?