Line Charts and Double Axis widgets are a perfect match to visualize time series data in Ubidots. Both widgets have options to display and customize data visualization as required by each individual application. Color, time span, aggregation method, among others, are the options available within these two widgets.

Requirements

Table of Contents

  1. Create and setup a Line Chart/Double axis widget.

1. Create and setup a Line Chart/Double axis widget

Line Chart and double axis widgets allow to easily visualize time series data from one or more variables at a time up to 30 variables. Within the settings options, trace color, aggregation method, time span, among others, can be found. All of these to fit your desired visualization and application requirements. Following the steps below you will be able to create and configure a Line Chart widget as you see fit:

NOTE: Double axis widget follows the same creation process. It contains two Y-Axis by default.

Step 1: Click on the top-right corner "+" to add a new widget.
Step 2: Select
Line Chart widget.
Steps 3: Search a device and select one or more variables.
IMPORTANT NOTE: if your dashboard is dynamic and so the Line Chart widget, you will need to enter the variable label the dashboard is going to look for within the selected device.
Step 4: Choose
a color in the color picker next to the variable.


Step 5: Select the Aggregation Method for each variable to 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 raw values.
Step 6: Choose
a time span for each variable. Option "Set by dashboard" correspond to the Dashboard's general date time picker span, whereas "Last values" let's you defined the amount of historical values (dots) to be displayed, up to 10,000 dots for either of the 2 options.
IMPORTANT NOTE:
should the variable combined dots count exceed 10,000 dots, Ubidots will resample the data, by averaging, every 5 minutes, 30 minutes, and so on, to ensure the limit is not exceeded.
Step 7: Select
the type of trace between bars, line, dots, or step.
Step 8: Pick the Y-Axis for each of the variables.

Moving to the Appearance section:

Step 9: Set the widget appearance:

Name your Line chart widget.
– Set the Decimal places to display in the tooltip; Auto will set the profile's default.
– Enable/disable the toggle to Show legends for each variable.
– Choose a Date format.
– Switch ON/OFF to Display the X-Axis data zoom bar.
Label your X and Y axis
– Set the Position of the Y axis
– Enter the expected Y-Axis range. Leaving empty will set the range according to the max and min values within the period displayed.
– If any, enter a Custom Style for your widgets.

Step 10: Click on the green check mark to save and create the widget.

Other users also visited:

Did this answer your question?