Data filter

Filtering methods

You can filter data using two methods: a data filtering script or data table configuration.

• Data filtering script

  Use JavaScript to process the raw response from an API for display on a chart or text component.

  Script syntax:

  • The script framework supports only one input variable, data. The function must process and return this data variable.

    function _filter(data) {
      // do something...
      return data;
    }

  • You can access only a limited set of global objects: Object, Array, Date, Math, parseInt, parseFloat, String, RegExp, Boolean, and JSON.

• Data table configuration

  The system automatically parses the structured data from the API response or the output of the data filtering script, and then displays a list of selectable fields.

Usage notes

• A data filter supports the following response data formats: single values (Number, String, Boolean), one-dimensional data (1D JSON, 1D table), and two-dimensional data (1D JSON array, 2D table).

• Currently, you can only use a data filtering script to filter data for tables, line charts, column charts, bar charts, pie charts, and dual-Y-axis line charts.

• If you select both filtering methods, the data filtering script runs first. Then, Data Table Configuration automatically parses the processed data.

• If you select Data Table Configuration to process two-dimensional data, the system parses only the first data record by default.

  For example, for a one-dimensional JSON array like [ { a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 63 }, { a: 7, b: 8, c: 9 },], Data Table Configuration can parse the fields a, b, and c. If you select field a, the processed result is the value of field a from the first data record, which is 1.

Example

1. Configure an API service.

   This example uses a data analysis service. For more information, see Develop Data Service API.

2. Create a web visualization application and add a component.

   This example uses a text component. For more information, see Text.

3. Select the text component and click the Configure Data Source icon to the right of the text input box.

4. On the data source configuration page, set Select Data Source to API and API Source to data analysis service. Click Select API, select the business service you created, and retrieve the response data.

   The Request Parameters section at the bottom of the page supports two modes: static parameter and dynamic parameter. After you complete the configuration, the Response section displays the JSON response from the API.

5. Use a data filtering script to obtain data in the required format.

   1. Select the Data Filtering Script checkbox and enter a data filtering script.

      If the script is complex, click Fullscreen in the upper-right corner of the data filtering script editor.

      The data filter provides five sample scripts. You can click a sample name to import it and then modify it as needed.

      The sample scripts include Blank Script, Numeric Conversion Example, Pie Chart Data Example, 2D Array Example, and Color Setting Example.

   2. Expand the Processed Result panel to view the result.

      If the processed data does not match the data formats supported by the component, you can use Data Table Configuration to filter it further.

6. Select the Data Table Configuration checkbox.

   The system automatically parses the data and displays the available fields.

   If there are many fields or the field names are long, click Fullscreen Display.

7. Select the fields to display and view the Processed Result.

   You can click debug configuration to view the input data and the filtered output.

8. Click OK.

   The text component displays the processed data.