Multiple Charts Widget

Multiple Charts 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 charts, each variable produces a different chart, so in the same widget it is possible to have each chart as an Area ChartLine ChartHorizontal Bar, and Vertical Column.

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 the chart type, formulas, 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 multiple charts widget, it is possible to customize how the data will be displayed in the horizontal and vertical axis.

The properties defined in this section will affect the behavior of all charts rendered by each variable in this widget.

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 vertical 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.



4. 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.



5. 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 makes 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 Axes in Chart Widgets

      All chart-type widgets in TagoIO can be configured to display more than one Y-axis. The widgets that supports this feature are Area Chart, Line Chart, Horizontal Bar, Vertical Column and Multiple Charts. Adding multiple axes to your chart You can set ...
    • ECharts Custom Widget Tutorial

      In this tutorial, we will guide you through the process of creating a Ring Gauge custom widget, which enables you to display multiple variables simultaneously in a interesting format. To achieve this, we will leverage the ECharts library, a robust ...
    • 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 ...
    • 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 ...
    • 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 ...