In today's data-driven world, the ability to monitor and analyze time series data is paramount for businesses and organizations across various domains. As the volume of data continues to grow, having effective tools to visualize and understand this data becomes increasingly important. This bar chart offers a simple yet powerful way to break down data and gain insights quickly, providing a clear and intuitive representation of complex datasets.
Requirements
Ubidots paid license
1. Understanding the widget
This Widget plugin is capable of breaking down time-series data based on context, resulting in a bar chart that's always categorized by month within the dashboard's selected time range.
It can operate in 2 modes:
Categorization by month only: It renders a bar per month and uses a context key to breakdown the data.
Categorization by month and by context key: it may render multiple bars per month based on a second numerical context key. Each of the bars will be breakdown by a context key.
Data architecture
To achieve either of the results above, Dots in the source variable must comply with a data architecture so the widget can read it up, and parse it effectively.
Mode 1: Categorization by month only
The Dots available in the source variable should follow the below format:
{
"value": 12,
"timestamp": 1713200780000,
"context": {
"breakdownKey": "breakdownValue"
}
}The widget will use the "timestamp" to extract the month (X-Axis category) and place the Dot in the respective bar, and the "breakdownKey" within the "context" to assign the value its bar segment (breakdown).
Mode 2: Categorization by month only and by context key
The Dots available in the source variable should follow the below format:
{
"value": 12,
"timestamp": 1713200780000,
"context": {
"breakdownKey": "breakdownValue",
"categorizationKey": "numericalCategorizationValue"
}
}The widget will use the "timestamp" to extract the month (X-Axis category) and the "categorizationKey" within the context to add a second categorization within the month, which will produce 1 or more bars per month.
The "breakdownKey" within the "context" assigns the value its bar segment (breakdown).
NOTE: The value in "categorizationKey" must be a number.
Mode 3 [OPTIONAL]: Different index key
The Dots may contain an index key within the context that can be used as the time source for the X-Axis monthly categorization:
{
"value": 12,
"timestamp": 1713200780000,
"context": {
"breakdownKey": "breakdownValue",
"categorizationKey": "numericalCategorizationValue",
"indexKey": 1713452176000
}
}Instead of using "timestamp" to extract the month to which the Dots belongs to, a separate "indexKey" can be used for that purpose. The value therein must be a timestamp in milliseconds.
2. Widget settings
There are a couple of considerations when configuring the widget:
It can only extract data from one single variable. Each Dot should be formatted as explained in the Data Architecture section.
Some inputs are optional:
Category key
Column prefix
Index key
Configure the widget
Follow the below steps to configure the widget:
Select the "Bars breakdown" from the Widgets creation drawer, down in the Plugin section:
Select a variable using the "ADD VARIABLE" button:
Configure the parameters:
Breakdown key: Key in context used to breakdown the data
Category key [OPTIONAL]: Key in context used to categorize the data. Leave it empty for Mode 1 operation.
Column prefix [OPTIONAL]: Used to label the bars, it prefixes the category value.
Index key [OPTIONAL]: Key in context used as index. Must be a timestamp in 'ms'. Leave empty to use the timestamp as index.
