DataV:Realize the Data Filtering

Procedure

1. Log on to the DataV console.

2. Select a visualization application and click Edit to go to the Canvas Editor page.

3. Add the Column Chart widget and the List carousel widget to the canvas.

4. Click the carousel list widget. In the left-side pane, click the configuration tab. On the page that appears, set Global> Table Rows to 2. Turn on Hide Rows with Empty Values to change the Column Field Name and Column Display Name of the custom column label.

   Note

   • Column field name-Column display name: name-Name.

   • Column field name-Column display name: value-Metric.

   • Column field name-Column display name: city-city.

5. Click the column chart widget and select Data Panel to modify the static 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. Select all components and right-click them to export them to Blueprint Editor.

7. In the Logical Nodes section, select Global Node and add it to the canvas. Change the processing method to Set carousel data.

8. Configure the processing method of the Serial Data Processing node.

   return {
     data: [{
       name: "carouselData",
       value: [
         {
           "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"
         }
       ]
     }]
   }

9. Add a column chart widget and a carousel widget to the blueprint canvas. Change the processing method to data filtering.

10. Configure the processing method of the Serial Data Processing node.

    const allData = getLocalValue("carouselData");
    return allData ? allData.filter(d => {
      return d.type == data.x;
    }) : [];

11. Click the icon in the upper-right corner to preview the results.