Add data-DataV(DataV)-阿里云帮助中心

This topic describes how to add data to widgets in a DataV visualization.

Add map data

On the canvas editor page, select the Basic Flat Map widget.
In the Data panel on the right, click Isosurface Layer.
In the Isosurface Layer section of the Data panel, click Interpolation Point Data API.

Note Isosurface Layer includes data from the Clipping Border Data API and the Interpolation Point Data API. This example uses data that covers the entire country, so the data for the Clipping Border Data API can remain unchanged. You can also modify the data for the Clipping Border Data API as needed.
On the Interpolation Point Data API configuration page, click Configure Data Source.
On the Set Data Source page, configure the data source as follows.
- Data Source Type: Select API. This sets the Data Source Type for the interpolation points of the Isosurface Layer component to API because the corresponding API was created and its data retrieval was tested in the API Handler
- URL: Enter the URL tested in the Process API topic. This example uses http://127.0.0.1:8888/aqi?date=2017012722.
Click Preview Data Source Response to view the data response.
Click the Refresh icon to the right of Data Response to view the data response.

After the data is returned, the widget on the canvas is updated to display the data.
Exit the Set Data Source page. Configure the style of the Isosurface Layer widget as follows.
1. For the Isosurface Layer widget, click the Configuration tab in the right-side panel.
2. In the Configuration panel, set Pixel Size to 3.
  
  Important A larger pixel size results in faster interpolation but lower precision.
3. Set Rendering Method to Linear Rendering.
4. Set Number of Categories to 35.

Add timeline data

On the canvas editor page, select the Timeline widget.
In the Data panel on the right, click Configure Data Source.
On the Set Data Source page, set Data Source Type to Static Data.

Create your static data based on the default data format for the Timeline widget. Then, replace the sample data with your own.

For example, use the 22:00 hour of each day from January 22, 2017 to February 2, 2017 as the timeline data.

[
{
 "name": "22:00, Jan 22, 2017",
 "date": 2017012222,
 "value": 2017012222
},
{
 "name": "22:00, Jan 23, 2017",
 "date": 2017012322,
 "value": 2017012322
},
{
 "name": "22:00, Jan 24, 2017",
 "date": 2017012422,
 "value": 2017012422
},
{
 "name": "22:00, Jan 25, 2017",
 "date": 2017012522,
 "value": 2017012522
},
{
 "name": "22:00, Jan 26, 2017",
 "date": 2017012622,
 "value": 2017012622
},
{
 "name": "22:00, Jan 27, 2017",
 "date": 2017012722,
 "value": 2017012722
},
{
 "name": "22:00, Jan 28, 2017",
 "date": 2017012822,
 "value": 2017012822
},
{
 "name": "22:00, Jan 29, 2017",
 "date": 2017012922,
 "value": 2017012922
},
{
 "name": "22:00, Jan 30, 2017",
 "date": 2017013022,
 "value": 2017013022
},
{
 "name": "22:00, Jan 31, 2017",
 "date": 2017013122,
 "value": 2017013122
},
{
 "name": "22:00, Feb 01, 2017",
 "date": 2017020122,
 "value": 2017020122
},
{
 "name": "22:00, Feb 02, 2017",
 "date": 2017020222,
 "value": 2017020222
}
]

Field	Description
name	The content displayed at each point on the timeline axis.
date	Used as the callback ID option.
value	The corresponding time.

After the data is returned, the widget on the canvas is updated to display the data.

Exit the Set Data Source page. In the Timeline widget's Configuration panel, click Event Node and set Data Format to %Y%m%d%H.
Click the Interaction tab and set the callback ID to data.

Add map title data

On the canvas editor page, select the Title widget.
In the Data panel on the right, click Configure Data Source.
On the Set Data Source page, set Data Source Type to Database.
From the Select Existing Data Source list, select a database.

Note If no database is available, click New and follow the prompts to create one. For more information, see Configure a data source.
In the SQL editor, enter the following SQL script.
```
select to_char(to_timestamp(:date,'YYYYMMDDHH24'),'YYYY-MM-DD HH24:00')||' Air Quality' as value;
```
:date: When you view the visualization, the value of the callback ID is passed to this parameter.
Click Preview Data Source Response to view the data response.
Click the Refresh icon to the right of Data Response to view the data response.

After the data is returned, the widget on the canvas is updated to display the data.