Data Management (DMS) provides the data visualization feature. When you configure data visualization, you
can flexibly customize layouts and styles. This feature also provides a number of
visualization components and built-in auxiliary widgets to help you configure dashboards
and big screens.
Preparations
In this example, the
student_courses
table is created in advance and some test data is inserted into the table. The following
SQL statements are used to create the table and insert test data:
/** Create a table. **/
CREATE TABLE `student_courses` (
`id` BIGINT(20) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'Primary key',
`student_id` BIGINT(20) DEFAULT NULL COMMENT 'Student ID',
`course_id` BIGINT(20) DEFAULT NULL COMMENT 'Course ID',
`start_time` DATETIME DEFAULT NULL COMMENT 'Creation time',
`score` int(11) DEFAULT NULL COMMENT 'Examination score',
KEY `idx_student_course` (`student_id`,`course_id`),
KEY `idx_student_time` (`student_id`,`start_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='Table for data service tests';
/** Insert data. **/
INSERT INTO `student_courses` VALUES (1,1,1,'2020-11-24 11:19:54',78);
INSERT INTO `student_courses` VALUES (2,1,2,'2020-11-24 05:51:36',68);
INSERT INTO `student_courses` VALUES (3,1,3,'2020-11-24 05:28:08',60);
INSERT INTO `student_courses` VALUES (4,2,1,'2020-11-24 07:21:17',67);
INSERT INTO `student_courses` VALUES (5,2,2,'2020-11-24 02:07:52',91);
INSERT INTO `student_courses` VALUES (6,2,3,'2020-11-24 10:35:35',94);
INSERT INTO `student_courses` VALUES (7,3,1,'2020-11-24 03:19:03',53);
INSERT INTO `student_courses` VALUES (8,3,2,'2020-11-24 08:19:18',94);
INSERT INTO `student_courses` VALUES (9,3,3,'2020-11-24 02:04:17',89);
Step 1: Configure a dataset
- Log on to the DMS console.
- In the top navigation bar, move the pointer over the More icon and choose .
- On the Dataset management tab, click the
icon.
- In the Writing SQL step, set the parameters as required and click Execute.
In this example, only some of the involved parameters are described. For more information,
see
Create a dataset.
Parameter |
Description |
Name |
Required. The name of the dataset. In this example, set the name to POC .
|
Database |
Required. The database whose data you want to query.
Select a database that you have the permission to query.
|
SQL statement |
Required. The SQL statement that you want to use to query data in the database. In
this example, enter the following statement: SELECT * FROM `student_courses`; .
|
- In the Edit dataset model step, set the Data type and Visualization type parameters for each field as required.

Parameter |
Description |
Data type |
The type of the data in the field. Valid values:
- Dimension: the scope, aspect, or angle of a measure.
- Measure: a statistical value that is obtained after an aggregation operation.
For example, to display the average scores of students, you can configure the student_id field as a dimension and the score field as a measure. For more information, see Terms.
|
Visualization type |
The type of the data in the field. Valid values:
- Digital
- String
- Date
- Geography: Country
- Geography: Provinces
- Geography: City
|
- Click Save.
The dataset is created and you are navigated to the Dataset management tab.
Step 2: Configure charts
In this example, two charts are configured: Students Score and AVG score of each course.
In this example, only some of the involved parameters are described. For more information,
see Manage charts.
- Log on to the DMS console.
- In the top navigation bar, move the pointer over the More icon and choose .
- In the left-side navigation pane, click Chart.
- On the Chart management tab, click the
icon.
- On the tab that appears, configure a chart named Students Score.
- In the upper-left corner, enter a name for the chart. In this example, set the chart
name to
Students Score
.
- In the left-side pane, click Select a dataset and select a dataset from the list. In this example, select the POC dataset.
- Drag the
student_id
field to the Dimension section on the Chart-driven tab.
- Drag the
score
field to the Measure section on the Chart-driven tab, click the score
field in the Measure section, and then select Average from the list. The default operation is Total.
- On the Chart-driven tab, click the
icon.
- Drag the
course_id
field to the Grouping section on the Chart-driven tab. In the dialog box that appears, click Save.
- Click the Style tab, select the Display label check box in the Label section, and then clear the Show legend check box in the Legend section.
- Click Save.
- You are navigated to the Chart management tab. Click the
icon in the upper-right corner.
- On the tab that appears, configure a chart named AVG score of each course.
- In the upper-left corner, enter a name for the chart. In this example, set the chart
name to
AVG score of each course
.
- In the left-side pane, click Select a dataset and select a dataset from the list. In this example, select the POC dataset.
- Drag the
course_id
field to the Dimension section on the Chart-driven tab.
- Drag the
score
field to the Measure section on the Chart-driven tab, click the score
field in the Measure section, and then select Average from the list.
- On the Chart-driven tab, click the
icon.
- Click the Style tab and select the Display label check box in the Label section.
- Click Save.
Step 3: Configure a big screen
DMS provides dashboards and big screens for you to display business information. This
example describes how to configure a big screen on which data is updated at regular
intervals. For more information, see Manage dashboards and Manage big screens.
- Log on to the DMS console.
- In the top navigation bar, move the pointer over the More icon and choose .
- In the left-side navigation pane, click Data display.
- On the Resource management tab, click New big screen.
- In the New Big Screen dialog box, enter a name for the big screen in the Name field and click Save. In this example, enter
Students Score
.
- Add charts to the big screen.
- Click the newly created big screen to go to its configuration tab. In the upper part
of the tab, click the
icon.
- In the Add Chart step, select the charts
Students Score
and AVG score of each course
and click Next Step.
- In the Data Refresh mode step, select Scheduled refresh from the drop-down list and click Save.
The data on the big screen is updated at regular intervals based on the value of the
Frequency parameter.
Note The default value of the Frequency parameter is 60, in units of seconds.
- On the big screen, resize the charts as needed.
- Add auxiliary widgets to the big screen, such as rectangles, labels, videos, and timers.
- In the upper part of the tab, click the
icon and select Label from the list.
- In the Layer pane, select the label that you added in the previous step. On the big
screen, move the label below the
Students Score
chart. Then, in the Label pane, enter Students Score
in the Text content field.
- In the upper part of the tab, click the
icon and select Label from the list.
- In the Layer pane, select the label that you added in the previous step. On the big
screen, move the label below the
AVG score of each course
chart. Then, in the Label pane, enter AVG score of each course
in the Text content field.
- In the upper part of the tab, click the
icon.The following figure shows the preview effect of the big screen.

- Share the big screen.
- In the upper part of the tab, click the
icon.
- In the link sharing dialog box, click Open sharing.
- Click Copy Link and share the link with other users within your Alibaba Cloud account.