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.

You can set multiple Y-axis to your chart. Read more about Multiple Axes in Chart Widgets

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