This topic describes how to use the Carousel List Bar Chart widget to filter the daily recommended data on the web page of site B.


You must add a Carousel List Bar Chart widget in the project editor. For more information, see Add a widget.


  1. Log on to the DataV console.
  2. On the Projects page, click Edit above the project that you created.
  3. In Canvas Editor, click an asset in the Layer column or on the canvas.
    Notice Before searching for asset configurations, make sure that the corresponding assets have been added to your visualization application project. Otherwise, you need to add the assets first. For more information, see Add a widget.
  4. On the right of the canvas editor, click the Data icon.
  5. On the right of Data Source, click Set. In the Set pane, set Data Source Type to API. In the data source edit box, enter the URL of Bilibili
  6. Select Initiate Request from Server because cross-original requests are initiated.
  7. Click Preview Data Response to view the data returned by Bilibili.
    Data sourceIn the preview box, a JSON object is returned. However, the data in the Carousel List Bar Chart is an object list. Each object must contain the content and value fields. You can proceed with the following steps to convert the data format by using a data filter.
  8. Select Data Filter and turn on Filter Debugging.
    Enable the data filter
  9. Click the The Add icon icon next to Add Filter to add a filter.
  10. Edit the code in the filter. Then, click Test to view the filter result.
    Edit and test the filter
    The trigger condition of the filter in the preceding figure is as follows:
    return => {
      return {
        content: item.description
    The following figure shows the data that is converted by the filter. The data contains the value and content fields. Data filtering result
  11. After you edit and test the filter, click Save. Then, click the Refresh icon next to Data Response Result to view videos recommended each day on Bilibili.