Data Management:Data visualization

Preparations

/** 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);

Procedure

1. Step 1: Configure a dataset. Create a dataset based on the query results that are obtained after an SQL statement is executed to query data in a database.
2. Step 2: Configure charts. Configure charts and their styles based on the dataset.
3. Step 3: Configure a big screen. Add the charts to a big screen for display.

Step 1: Configure a dataset

1. Log on to the DMS console V5.0.
2. In the top navigation bar, click DTS. In the left-side navigation pane, choose Data Application > Data Visualization (Old).
3. Click the Dataset tab. In the upper-right corner of the Dataset management page, click .
4. In the Writing SQL step, set the parameters and click Execute.
   The following table describes only some parameters that are involved in this example. For more information, see Create a dataset.

   Parameter	Description
   Name	Required. The name of the dataset. In this example, the name is set to POC.
   Description	The description of the dataset.
   Database	Required. The database to be queried. 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`;.

5. After the SQL statement is executed, click Next Step.
6. In the Edit dataset model step, set the Data type and Visualization type parameters for each field.

   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 visualization type of the data in the field. Valid values: Digital String Date Geography: Country Geography: Provinces Geography: City

7. Click Save.
   The dataset is created, and you are navigated to the Dataset management page.

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.

1. Log on to the DMS console V5.0.
2. In the top navigation bar, click DTS. In the left-side navigation pane, choose Data Application > Data Visualization (Old).
3. In the left-side navigation pane, click Chart.
4. On the Chart management page, click the icon.
5. On the page that appears, configure a chart named Students Score.
   1. In the upper-left corner, enter a name for the chart. In this example, the chart name is set to Students Score.
   2. In the left-side pane, click Select a dataset and select a dataset from the list. In this example, the POC dataset is selected.
   3. Drag the student_id field to the Dimension section on the Chart-driven tab.
   4. 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.
   5. On the Chart-driven tab, click the icon.
   6. Drag the course_id field to the Grouping section on the Chart-driven tab. In the dialog box that appears, click Save.
   7. 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.
   8. Click Save.
6. You are navigated to the Chart management page. Click the icon.
7. On the tab that appears, configure a chart named AVG score of each course.
   1. In the upper-left corner, enter a name for the chart. In this example, the chart name is set to AVG score of each course.
   2. In the left-side pane, click Select a dataset and select a dataset from the list. In this example, the POC dataset is selected.
   3. Drag the course_id field to the Dimension section on the Chart-driven tab.
   4. 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.
   5. On the Chart-driven tab, click the icon.
   6. Click the Style tab and select the Display label check box in the Label section.
   7. 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.

1. Log on to the DMS console V5.0.
2. In the top navigation bar, click DTS. In the left-side navigation pane, choose Data Application > Data Visualization (Old).
3. In the left-side navigation pane, click Data display.
4. On the Resource management page, click New big screen.
5. 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.
6. Add charts to the big screen.
   1. Click the newly created big screen to go to its configuration tab. In the upper part of the page, click the icon.
   2. In the Add Chart step, select the charts Students Score and AVG score of each course and click Next Step.
   3. 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.
   4. On the big screen, resize the charts.
7. Add auxiliary widgets to the big screen, such as rectangles, labels, videos, and timers.
   1. In the upper part of the page, click the icon and select Label from the list.
   2. 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.
   3. In the upper part of the page, click the icon and select Label from the list.
   4. 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.
8. In the upper part of the tab, click the icon.
   The following figure shows the preview effect of the big screen.
9. Share the big screen.
   1. In the upper part of the page, click the icon.
   2. In the dialog box that appears, click Open sharing.
   3. Click Copy Link and share the link with other users within your Alibaba Cloud account.