how to configure widget data-DataV(DataV)-阿里云帮助中心

Configuring a data source is a key step for creating widgets and displaying your business data. It lets you ingest, process, and update data in real time. This topic describes how to configure data for a widget.

Features

DataV-Board supports connections to various types of business data, such as static data, databases, and application gateways. You can use the data source configuration to connect and adapt business data for widgets and configure settings, such as Disable Loading State, Controlled Mode, and Automatic Update Requests, to optimize loading performance, pass parameters between widgets, and enable real-time data updates.

Procedure

Prerequisites

Log on to the DataV-Board 7.0 console.
Prepare and add the required data sources.
Go to the dashboard editor and create a widget.

Configure data

Widgets come with default static data. The following example uses a column chart to demonstrate how to configure a widget's data source using static data, a global variable, or a data source.

Static data adapter component

This example adjusts static data to display a column chart that compares the number of students at different school levels.

Create and select a Column chart widget. Go to the Data Source panel and click Data Mapping to view the default data and its required structure.
Observe the data structure. The column chart accepts the x field for the x-axis data, the y field for the y-axis data, and the colorField field for color stacking groups. For more information, see Column chart parameters.
Directly adjust the static data in the visual editor.
Click to switch to the code editor. You can edit the data source by adding, deleting, or modifying the JSON code.
After you change the data to the following JSON, the column chart shows a comparison of student numbers at different school levels.
JSON data for student numbers at different school levels
```
[
  {
    "colorField": 100,
    "x": "Elementary",
    "y": 145
  },
  {
    "x": "Middle School",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "High School",
    "y": 290,
    "colorField": 100
  }
]
```
Note
After you configure the data, you can adjust the style as needed. For example, you can hide the legend and show the axis titles to make the chart clearer.

Global variable adapter component

Widgets can use global variables as input data. This example demonstrates how to use a global variable named schoolInfo to provide data for a column chart widget.

Go to the Global Variables tab. Create a new variable and rename it to schoolInfo.

Change the Initial Value to the following content.

JSON data for student numbers at different school levels

[
  {
    "colorField": 100,
    "x": "Elementary",
    "y": 145
  },
  {
    "x": "Middle School",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "High School",
    "y": 290,
    "colorField": 100
  }
]

Create and select a Column chart widget. Go to the Data Source panel and click Data Mapping to view the default data and its required structure. Observe the data structure. The column chart accepts the x field for the x-axis data, the y field for the y-axis data, and the colorField field for color stacking groups. For more information, see Column chart parameters.
Set Data Source Type to Global Variable and select schoolInfo as the widget's business data.
No adaptation is required because the component data is consistent with the static data. This bar chart compares the number of students at different stages in a school.
Note
Global variables can be used for more than just passing static values. For more information, see Use global variables.

Data Source Adapter Component

To ingest business data from a data source, you must first connect to the data source. Then, check the Data Response to see the differences between your data structure and the widget's required structure. You can use Data Mapping or a Filter to adapt the data. This example uses a retail store dataset. The key data fields are category for product category and quantity for sales volume. A column chart is used to show sales for different product categories.

Create and select a Column chart widget. Go to the Data Source panel and click Data Mapping to view the default data and its required structure. Observe the data structure. The column chart accepts the x field for the x-axis data, the y field for the y-axis data, and the colorField field for color stacking groups. For more information, see Column chart parameters.
Set Data Source Type to RDS for MySQL. Select an existing data source and use SQL to retrieve your prepared business data.

Click Data Response to view the returned data structure.

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

Because the returned data structure does not match the structure required by the column chart, you need to adapt the data. You can process the data using Data Mapping or a Filter.
Note
You can use both a filter and data mapping to process business data. The filter is applied first.
Method 1: Data mapping
1. In the data mapping panel, configure the x and y fields as shown in the following figure.
2. Because the colorField field is not configured, the sales column chart appears as follows:
Method 2: Filter
1. You can process the data with a filter. The code is as follows:
```
function filter(data){
  return data.map(item => {
    return {
      x: item.category,
      y: item.quantity,
      colorField: 1
    }
  });
}
```
2. The following sales column chart is displayed:

Configuration items

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

If you encounter problems during configuration, see FAQ about data source configuration and usage for troubleshooting information.