How to configure widget data - DataV - Alibaba Cloud Documentation Center

Feature description

DataV-Board supports various business data sources, including static data, databases, and application gateways. Through datasource configuration, you can integrate business data into widgets and optimize data loading performance, widget parameter interactions, and real-time updates by using Disable Loading State, Controlled Mode, and Automatic Update Requests.

Operation flow

Prerequisites

Log on to the DataV-Board 7.0 console.
Prepare and add relevant data sources.
Enter the dashboard editing page and create a widget.

Configure data

Widgets include default static data. The following example shows how to configure a column chart datasource using static data, global variables, and data sources.

Static data adaptation for widgets

This example shows how to adjust static data to display a column chart comparing student counts across educational stages in a school.

Create and select a Column Chart widget, navigate to the Datasource panel, and click Data Mapping to review the default data and structure of the column chart.

Examine the data structure. The column chart requires the x field for x-axis data, the y field for y-axis data, and the colorField field for color stack grouping. For a comprehensive explanation, see column chart parameter description.
In the visual editor, you can directly modify the static data.
Click to switch to the code editor mode. Here, you can edit the datasource by adding, deleting, or modifying the JSON formatted code.
Adjusting the JSON data as shown below displays a column chart comparing student counts across educational stages in a school.
JSON Data for Student Numbers at Different Educational Stages
```
[
  {
    "colorField": 100,
    "x": "Primary School"",
    "y": 145
  },
  {
    "x": "Junior High School",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "Senior High School",
    "y": 290,
    "colorField": 100
  }
]
```
Note
After configuring the data, you can adjust the style as needed. For example, you can hide the legend, add axis titles, and improve chart clarity.

Global variable adaptation for widgets

Widgets can use global variables as input data. This example shows how to pass column chart data to a widget through the schoolInfo global variable.

Navigate to the Global Variable tab, create a new variable, and rename it to schoolInfo.

Update the content of Initial Value as described below.

JSON Data for Student Numbers at Different Educational Stages

[
  {
    "colorField": 100,
    "x": "Primary School",
    "y": 145
  },
  {
    "x": "Junior High School",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "Senior High School",
    "y": 290,
    "colorField": 100
  }
]

Create and select a Column Chart widget, navigate to the Datasource panel, and click Data Mapping to review the default data and structure of the column chart. Examine the data structure. The column chart requires the x field for x-axis data, the y field for y-axis data, and the colorField field for color stack grouping. For a comprehensive explanation, see column chart parameter description.
Set the Datasource Type to global variable and choose schoolInfo as the data source for the widget.
The widget data will match the static data, so no adaptation is needed. The column chart displays the comparison of student counts across educational stages.

Note
Global variables are versatile and can be used for more than passing static values. For more information, see Using Global Variables.

Datasource adaptation for widgets

To integrate business data through a datasource, first connect the data, then compare the business data structure with the widget's requirements in Data Response Results. Use Data Mapping or Filters to transform the data into the required format. This example uses a retail store dataset with category for product category and quantity for sales volume to display sales by product category in a column chart.

Create and select a Column Chart widget, navigate to the Datasource panel, and click Data Mapping to review the default data and structure of the column chart. Examine the data structure. The column chart requires the x field for x-axis data, the y field for y-axis data, and the colorField field for color stack grouping. For a comprehensive explanation, see column chart parameter description.
Choose Datasource Type as RDS for MySQL, select an existing datasource, and use SQL to fetch the prepared business data.

Click Data Response Results to inspect the returned data structure.

[
  {   
    "id": 1,
    "category": "Electronics",
    "sales_amount": 15000,
  },
  {
  ...
  }
]

Adapt the data to match the column chart's requirements, as the current data structure does not conform. Use Data Mapping or Filters for this purpose.

Note
Both filters and data mapping can be used to process business data, with filters being applied first.
Method 1: Data mapping
1. Configure the x and y fields in data mapping as shown below.
2. Without configuring the colorField, the sales column chart will appear as follows:
Method 2: Filters
1. Apply filters to process the data as shown in the following code:
```
function filter(data){
  return data.map(item => {
    return {
      x: item.category,
      y: item.quantity,
      colorField: 1
    }
  });
}
```
2. The resulting sales column chart will appear as follows:

Configuration item description

Data Item Configuration	Description
Data Source	The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.
Data Mapping	When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the icon to configure field styles individually.
Filter	Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.
Data Response Result	This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the icon on the right to check the current data response result, or click the icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.
Disable Loading State	Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.
Controlled Mode	Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.
Automatic Update Request	Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

FAQ

For help with configuration issues, refer to the datasource configuration FAQ.