Implement data filtering

Demonstration

Procedure

1. Access the DataV console.

2. Select a dashboard and click Edit to open the canvas editor.

3. Add a Column Chart widget and a List Carousel widget to the canvas.

4. Click the List Carousel widget. On the Style panel, set Global > Table Rows to 2 and turn on the Hide Rows with Empty Values switch. Change the values for Column Field Name and Column Display Name to customize the column labels.

   Note

   • Column Field Name: name, Column Display Name: Name.

   • Column Field Name: value, Column Display Name: Metric.

   • Column Field Name: type, Column Display Name: City.

5. Click the Column Chart widget. On the Data Source panel, replace the static data with the following sample data.

   [
     {
       "x": "Shanghai",
       "y": 100,
       "colorField": 100
     },
     {
       "x": "Shenzhen",
       "y": 75,
       "colorField": 200
     },
     {
       "x": "Hefei",
       "y": 30,
       "colorField": 300
     },
     {
       "x": "Chengdu",
       "y": 65,
       "colorField": 400
     },
     {
       "x": "Anhui",
       "y": 50,
       "colorField": 500
     },
     {
       "x": "Beijing",
       "y": 70,
       "colorField": 600
     }
   ]

6. Click the Column Chart widget. On the Style panel, turn off Scanline Animation.

7. Click the icon in the upper-left corner to open the blueprint editor.

8. Select the Global Variable tab and click New Variable.

9. Rename the variable to x and set its initial value to the following JSON data.

   [
     {
       "name": "Shanghai Project 1",
       "value": 111,
       "type": "Shanghai"
     },
     {
       "name": "Shanghai Project 2",
       "value": 222,
       "type": "Shanghai"
     },
     {
       "name": "Shenzhen Project 1",
       "value": 111,
       "type": "Shenzhen"
     },
     {
       "name": "Shenzhen Project 2",
       "value": 222,
       "type": "Shenzhen"
     },
     {
       "name": "Hefei Project 1",
       "value": 111,
       "type": "Hefei"
     },
     {
       "name": "Hefei Project 2",
       "value": 222,
       "type": "Hefei"
     },
     {
       "name": "Chengdu Project 1",
       "value": 111,
       "type": "Chengdu"
     },
     {
       "name": "Chengdu Project 2",
       "value": 222,
       "type": "Chengdu"
     },
     {
       "name": "Anhui Project 1",
       "value": 111,
       "type": "Anhui"
     },
     {
       "name": "Anhui Project 2",
       "value": 222,
       "type": "Anhui"
     },
     {
       "name": "Beijing Project 1",
       "value": 111,
       "type": "Beijing"
     },
     {
       "name": "Beijing Project 2",
       "value": 222,
       "type": "Beijing"
     }
   ]

10. Add two layer nodes and one serial data processing node to the blueprint canvas, and then connect them.

11. Configure the processing method for the serial data processing node.

    const allData = getLocalValue("x"); // Get the static value of the global variable.
    return allData ? allData.filter(d => {
      return d.type == data.x; // Filter data by matching the chart's x field with the type field of the global variable.
    }) : [];

12. Click the Preview icon in the upper-right corner to preview the result.