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
Active Ubidots account.
1. Create and set up a Line Chart/Double axis widget
Line Chart and Double Axis widgets allow you to easily visualize time series data from one or more variables at a time (up to 30). Within the settings options trace color, aggregation method, time span, among others, can be found. All of these are aimed 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: The Double Axis widget follows the same creation process. It contains two Y-Axis by default.
Step 1: While in a dashboard, click on the “+” button at the upper right corner of the screen.
Step 2: Look for the “Line Chart” option and click on it.
Step 3: Click on the "Y-axes" option and configure the following parameters:
Name the Y axis.
Set the position of the Y axis.
Enter the expected Y-Axis range. Leaving this field empty will set the range according to the max and min values within the displayed period.
Enable/disable the "use SI prefix" toggle button to add a unit prefix from the International System of Units to the widget.
Enable/disable the "hide values" toggle button to either hide or display along the axis.
Enter labels and horizontal lines to display custom thresholds. These lines can simplify the job of monitoring and identifying information on your widget.
Steps 4: Click on the "+ add variable" button, then on the device that contains the desired variable, and select it. You can select multiple variables from the same or different devices. To finish this step, click on the "select" button.
IMPORTANT NOTE: If both your dashboard and Line Chart widget are dynamic, the process of selecting variables will be the same, but instead of variables belonging to a specific device, your widget will be associated to the selected variable labels.
Step 5: Using the color picker next to the variable's name, choose a color for the variable.
Step 6: Select the aggregation method that will be applied to the variable's data. Available options are:
Raw (no aggregation method)
Maximum
Minimum
Count
Average
Sum
Step 7: If "raw" was chosen in the previous step, define the time span that will be taken into account for each variable. Conversely, if any aggregation method was selected in the previous step, define the sample period of data to which the aggregation method will be applied.
With the "set by dashboard" option, the variable will default to the span you define in the dashboard's time picker, whereas the "last values" option let's you define the amount of historical values (dots) to be displayed; up to 10,000 dots can be displayed with either of these two options.
IMPORTANT NOTE: If the combined dots count exceeds 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 8: Select the type of chart in which the data will be displayed between line, area, stacked area, bars, stacked bars, dots, or step.
Step 9: Pick the Y-axis to which the variable will belong.
2. Set the widget appearance
On the appearance tab of the widget's configuration, you can do the following:
Name your Line Chart widget.
Click on the toggle button to include the Line Chart in the "hover group". This option connects and synchronizes the tooltips and pointers of all the Line Charts that are part of the hover group in a dashboard.
Switch ON/OFF to display the X-axis data zoom bar.
Enable/disable the toggle to show legends for each variable.
Label your X axis.
Thoroughly customize the way the widget's content looks using the ECharts configuration option.
Select a font and its size.
Choose a date format.
Define the number of decimal places to be displayed in the widget. The "auto" option inherits the number defined at the account level.
Define a background color for your widget.
Upload a background image for your widget.
With the Custom style option, edit the way the widget looks. If the ECharts configuration controls the "content" of the widget, then the custom style controls the "container".
Lastly, click on the "save" button to finish the creation of your widget.
