Filter configuration and application instructions - DataV

Filters are core components used for dynamically filtering and controlling visualization data. This topic systematically introduces the methods for configuring, managing, and applying filters in multiple scenarios.

Background information

Principle introduction

Filters are important features in data visualization for implementing dynamic data interaction. They filter raw data in real time through user-defined condition rules (such as numerical intervals, text matching, logical combinations) and update the results to all associated visualization widgets.

Scenarios

Filters are widely used in data visualization, mainly for dynamically controlling the display of data content. Typical scenarios include the following:

In sales reports, displaying performance data for only a specific region.
In real-time monitoring dashboards, filtering out abnormal values (such as temperature data exceeding thresholds).
Combined with dropdown menus or sliders, allowing users to select the timestamp range they want to view.

Preparations

Prerequisites

You have created a data dashboard project.

Access the canvas editor

Before you configure filters and perform related operations, follow these steps to access the canvas editor:

Access the DataV console.
On the Workspace page, hover your mouse over the target project and click Edit to access the canvas editor page.

Create a filter

You can create a filter by using one of the following two methods.

Create a filter in the panel
1. In the left navigation bar of the canvas editor page, click Filter to access the filter page.
2. In the filter panel, click Create Filter.
3. In the filter configuration area, enter the filter name and custom filter code, and then click Save.
4. (Optional) When editing a filter, you can click Associate Global Variable to associate an existing global variable with the current filter. After association, you can directly use this variable in the code.
  Successfully created filters are displayed in the filter list.
  Note
  Created filters can be called by all widgets in the current data dashboard. After being called, the association relationship between the widget and the filter is displayed.
Create a filter in a widget.
Widgets support filter creation method: manual configuration.
1. Add a widget to the current data dashboard (a column chart is used in this example), and click Data Source in the configuration panel on the right.
2. In the Data Source configuration panel, turn on the filter and click Create.
3. In the filter configuration area, enter the filter name and custom filter code, and then click Save.
4. Successfully created filters are displayed in the filter list, showing the dependency relationship between the filter and the widget.

Manage filters

Filter panel

In the Filter panel, you can centrally manage all filters in the dashboard. These filters can be added and used by any widget. The number of calls is displayed on the right side of each filter.

Important

When you modify the configuration of a filter in the filter panel, all widgets that depend on this filter become unavailable. Confirm the scope of impact before saving the changes.

Basic operations

Rename a filter: Hover your mouse over the target filter, click the icon, and enter the filter name.
Delete a filter: Hover your mouse over the target filter and click the icon to delete the filter.
Important
Deleting a filter may cause related widgets to become unavailable. Confirm before proceeding.
Add a filter: In the Data Source configuration panel of the widget, turn on the filter switch and select the target filter from the dropdown menu.
Clear unused filters: After adding multiple filters to a widget, you can click Clear Unused Filters in the filter panel to remove all unused filters with one click.
Important
Filters cannot be recovered after being cleared. Proceed with caution.

Sort filters

After adding multiple filters to a widget, you can sort them by dragging them up and down. 2025-04-07_15-10-20

Filter order: After adding multiple filters to a widget's data source, the data is processed sequentially through each filter from top to bottom: the input of the first filter is the original result directly returned by the data source, the input of the second filter is the output data processed by the first filter, and subsequent filters follow this pattern. Each filter processes based on the output result of the previous filter, ultimately outputting the data result after cascade processing by all filters.

Important

If a filter in the middle returns an empty value, that filter is ignored, but the filtering does not terminate, and the system provides a prompt in the configuration page of multiple filters.
If a filter execution reports an error, the filtering terminates and uses the result from the last correct execution.

Debug filters

On the Data Source page, you can edit the filter code for debugging. The left popup displays the return results in real time.

Note

The filter debugging feature ensures the correctness of the filter code but is not suitable for large data volumes.

Use filters

The following examples demonstrate specific application methods of filters in the canvas editor and blueprint editor, using the column chart widget as an example.

Use in canvas

Add a column chart widget in the canvas editor.
Select the current widget and click the Data Source tab in the configuration panel on the right.
Select the filter check box and click Create to create a filter.
Change the filter name to Column Chart Filter and replace the initial filter code with the following code.
```
return data.splice(0,3)//Filter out the first three data items
```
Click Test below the filter to view the output results. The following figure shows the effect after filtering.
After successful testing, click Save to complete the filter code editing. You can then view the filtered visualization chart in the canvas.

Use in blueprint

Add two column chart widgets in the canvas editor.
Click the icon in the upper left corner of the page to switch to the Blueprint page.
In the Layer Node tab on the left, drag and add the two column chart nodes to the main blueprint canvas.
Click the Logic Node tab on the left and add a Serial Data Processing node.
Connect the column chart and serial data processing nodes in sequence, as shown in the figure.
Select the serial data processing node, and in the Node Configuration panel on the right, click Create in the Processing Method module to add a filter.
Change the filter name to Column Chart Serial Processing and replace the initial filter code with the following code.
```
return data.splice(0,3)//Filter out the first three data items
```
Click Save below the filter to complete the editing, and then click Preview in the upper right corner of the blueprint page to enter the preview page. After the widget loads, you can view the filtered chart results.

FAQ

Data Source Error: After adding a filter in the widget data panel, if you switch to another type of data source, the system will display the following two interface exception prompts in the error message area.
Important
When a data source is abnormal, even if the interface returns data content, the filter in the data panel remains disabled (grayed out). Because the data stream already has an exception at the source, subsequent filtering processing no longer has practical significance.
Filter Error: When a filter executes data filtering, if the code runs into an error (such as "undefined return field" and other exceptions), the system will display an error prompt on the interface.

Related operations

For the methods getLocalValue and getCallbackValue used to reference global variables in filters, see Filter references.