Implementing data screening

Preview

Procedure

1. Log on to the DataV console.

2. Select a visualization application 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 configuration panel, set Global > Table Rows to 2, turn on the Hide Rows with Empty Values switch, and modify the Column Field Name and Column Display Name for the custom column labels.

   Note

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

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

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

5. Click the column chart widget. On the data panel, 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 widgets, right-click, and export them to the blueprint editor.

7. Under Logic Nodes, select Global Node and add it to the blueprint canvas. Connect the node to itself. Set the processing method to Set Carousel Data.

8. Configure the processing method for 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 the column chart and list carousel widgets to the blueprint canvas and connect them. Set the processing method to Data Filtering.

10. Configure the processing method for 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 of the page to preview the results.