Horizontal Bar Widget

Horizontal Bar Widget

Charts are a very powerful way to visualize your data and look for insights. You can also customize colors, apply Formula, decide if they're to be stacked or not, and more.

This widget also accepts features like metadata and series, that can be set in your variable data.


1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

Click on the cog icon to edit specific options for this variable, such as formulas, color, and more. Click on the close icon to remove this variable from the widget's data.

This field is dependent on the type of dashboard you are using; the difference is explained below.
1.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the data.

1.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the information.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.

2. Composing X-axis and Y-axis

In the horizontal bar chart widget, it is possible to customize how the data will be displayed in the vertical and horizontal axis.

Different than other charts, the Horizontal bar uses the X-axis as the vertical axis, and the Y-axis as the horizontal one.

2.1 X-axis

By default, the X-axis of the chart will be the time of the values, and you can customize the range of time. But sometimes you need to group your data through the X-axis, even if they don't have the same time. To achieve this, you need to select a variable that contains the group and all data will be grouped by series.

Data is ordered by time ascending, but it is possible to change it to series

It is also possible to define the X-axis time range dynamically, using another variable data to achieve this. The variable data should look like the following payload:

{
  "variable": "time_range",
  "value": "Any value",
  "metadata": {
    "start_date": "2021-06-17T00:00:00.000Z",
    "end_date": "2021-06-18T00:00:00.000Z"
  }
}
The start_date specifies the start of the range, and the end_date specifies the end of the range. In this case, the date and format should be in the ISO 8601 format.
2.2 Y-axis

In the horizontal axis, it is possible to customize the scaling behavior, as it is possible to apply metric prefixes and abbreviations, change the step value (represents the difference between each tick), and more. 

The Y-axis will automatically find the best scale for your data; it is not necessary to customize it, unless you want to.


3. Filtering data

It is possible to pre-set some date filters to be displayed, and these filters can be in minutes, hours, days, weeks, months, or custom by choosing a date in the calendar.


4. Increasing performance

When a chart has a large number of data, it is possible to increase the widget performance by enabling the Downsampling feature. In addition, Downsampling can make the data easier to visualize.

Downsampling has two concepts, the Threshold and the Factor. The Threshold limits the amount of data to start the downsampling, and the factor is used to determine how many samples will be cut.

The greater the factor the greater the performance, but as the factor increases, the data also becomes less and less recognizable


    • Related Articles

    • Multiple Axis Chart Widget

      Charts are a very powerful way to visualize your data and look for insights. You can also customize colors, apply Formula, customize the line shape (step and smooth), decide if they're to be stacked or not, and more. In a multiple axis chart, each ...
    • Heat Map Widget

      With the Heat Map widget, you can build a colorful layer with bubbles representing the intensity of the variables on top of your image. The higher the value of the variable, the more red the bubble will be, and you can also add a heat scale to this ...
    • Vertical Column Widget

      Charts are a very powerful way to visualize your data and look for insights. You can also customize colors, apply Formula, decide if they're to be stacked or not, and more. This widget also accepts features like metadata and series, that can be set ...
    • Line Chart Widget

      Charts are a very powerful way to visualize your data and look for insights. You can also customize colors, apply Formula, customize the line shape (step and smooth), and more. This widget also accepts features like metadata and series, that can be ...
    • Area Chart Widget

      Charts are a very powerful way to visualize your data and look for insights. You can also customize colors, apply Formula, customize the line shape (step or smooth), and more. This widget also accepts features like metadata and series, that can be ...

      Aug 30 - Join us at TagoIO Connect Global, our annual conference. Learn new features and use cases. Register Here


        Future and past Webinars