Range Filter

Check out our video tutorial on filters

💡 The range filter displays the temporal evolution of values in a chart form. It allows you to filter the other components of the dashboard according to a time range or a date with a few clicks.

Creating the component

Click on the Range filter icon to add a range filter to the dashboard and drag and drop the fields you want to visualize and the one you want to filter by.

The configuration of the component is then done in the following order:

• Adding the data fields by drag and drop
• Date format settings
• Type of chart settings
• Selection of the period
• Range Filter settings

Fields of data items

The addition of fields to be visualized is done by drag and drop in the following three main areas.

• Values

• Argument

• Series

Values

Numerical value to be displayed.

Selection of data field "Sales Amount".

Argument

Data field of type date according to which the filter will be defined.

Display of the sales over the period quarter 1 of 2019 - quarter 2 of 2021The limits of the period appeared as bars on the left and right of the component. They can be adjusted with the mouse to change the time range.

Series

Text data broken down by item Values.

Sales by category.

Formatting and definition of the range filter

To be correctly applied, the filter must be defined in 3 successive steps: the settings of the date format, choosing a chart type, and selecting the period.

Date format

Date format settings

The date format can be set by the arrow visible on the "Argument" field, framed in red below.

• Year, Month-Year,... Date-Hour-Minute-Second: the dates displayed in the component are displayed according to the scale chosen from this list.

• Exact Date: the selection of the display in exact date gives access to a sub-menu "Format" of advanced personalization of the display of the dates

Year

• Full: Default format, the year is displayed with 4 digits.

  • Example: 2019

• Abbreviated: The year is displayed with 2 digits.

  • Exampe: 19

Day

• Long: Default format, the day is displayed in its full form.

  • Example: Friday, December 13, 2019

• Short: The day is displayed in its simplified form.

  • Example: 13/12/2019

Heure, Minute, Seconde

• Long: Default format; the information is displayed in its most complete form.

  • Example hour: Friday, December 13, 2019 15:00

  • Example minute: Friday, December 13, 2019 15:18

  • Example second: Friday, December 13, 2019 15:18:30

• Short: The information is displayed in its simplified form.

  • Example hour: 13/12/2019 15:00

  • Example minute: 13/12/2019 15:18

  • Example second: 13/12/2019 15:18:30

• Time only: Absence of day, month and year.

  • Example hour: 15:00

  • Example minute: 15:18

  • Example second: 15:18:30

Filters by predefined period

The cogwheel next to the "Argument" field, framed in blue below, gives access to a list box of predefined period.

This displays the period modification window, accessible through the interaction and layout tools.

Choice of chart type

The type of chart required to represent the period can be chosen by clicking on the icon to the right of the "Values" field.

This then gives access to the "Series type" window, accessible via the interaction and layout tools. The selected chart type is applied to this value field, with no changes made to the others.

Selection of the period

The period can be selected by the gear next to the argument field, or by mouse interaction on the component.

There are three possible mouse interactions:

• Definition of a period by dragging and dropping the start and end points.

• Selection of a fixed point by simple click.

• Selection of a precise period by a calendar, accessible via the "flags" icon at the top right of the component.

Multiple data items

Adding data fields such as Values or Series adds the corresponding charts to the Range Filter component.

💡 The chart can become unreadable in this use case.

Range Filter settings

The range filter can be customized using the interaction and layout tool.

💡 The cogwheel to the component settings is not visible by default. To access it, you need to right-click on the component and:

- Either click directly on "configure interactions and layout".

- Or "show the title", which will also display the cogwheel at the top right of the component.

It features 3 tabs:

• Interactions

• Layout

• Filters

Interactions

This tab allows you to configure the interactions of the component with the other components of the dashboard.

For more details, see the section dedicated to interactivity between visual components.

Layout

Common

This part allows you to configure the title of the range filter.

• Show title: Hide or show the title. It is displayed by default.

• Modify title: Rename the component.

Series type

This part allows you to modify the display of the range filter.

The new display correponds to the preview available in the settings window.

Interactivity

This part allows you to set the range in a few clicks.

Edit Periods: Opens the window of predefined selections of time ranges. This window is also accessible by the cogwheel icon to the right of the Argument item.

It is possible to choose one of the options proposed on the left, then by clicking on the horizontal arrow, to apply the selected filter. It is also possible to add a personalized period by clicking on the "Add custom period..." button at the top right.

Color management in a range filter

• Global colors: Change the colors of a set of values for all dashboard components.

• Local colors: Change the colors of a set of values for this dashboard component only.

Filters

Adding a filter allows you to filter the data displayed in the range filter, it does not influence the other components of the dashboard.

For more details, see the help topic dedicated to filters for a visual component.

For more details, see the following pages.

Right-click menu

Maximize

Export