Line Chart Widget

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

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 do so.


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 ...
    • 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 ...
    • Card Widget

      Use Card to display the last value of a variable, its unit, and a mini-chart. Card accepts links so that when users click on it, it may redirect them to another website, dashboard, or tab.  This widget also accepts features like metadata, that can be ...
    • Pie Widget

      Using data from multiples variables, the Pie widget automatically produces a Pie Chart, where each slice represents variable data. This widget also accepts features like metadata, that can be set in your variable data. Creating your own To add it to ...
    • Semi Pie Widget

      Using data from multiples variables, the Semi Pie widget automatically produces a Semi Pie Chart, where each slice represents variable data. This widget also accepts features like metadata, that can be set in your variable data. Creating your own To ...

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


        Future and past Webinars