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.
2. In the top navigation bar, move the pointer over the More icon and choose Data Factory > Data Visualization.
   Note For more information about how to go to the Data Visualization tab, see Access the data visualization feature.
3. On the Dataset management tab, click the icon.
4. 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`;.

5. 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

6. 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.

1. Log on to the DMS console.
2. In the top navigation bar, move the pointer over the More icon and choose Data Factory > Data Visualization.
3. In the left-side navigation pane, click Chart.
4. On the Chart management tab, click the icon.
5. On the tab that appears, configure a chart named Students Score.
   1. In the upper-left corner, enter a name for the chart. In this example, set the chart name to Students Score.
   2. In the left-side pane, click Select a dataset and select a dataset from the list. In this example, select the POC dataset.
   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 tab. Click the icon in the upper-right corner.
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, set the chart name 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, select the POC dataset.
   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.
2. In the top navigation bar, move the pointer over the More icon and choose Data Factory > Data Visualization.
3. In the left-side navigation pane, click Data display.
4. On the Resource management tab, 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 tab, 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 as needed.
7. Add auxiliary widgets to the big screen, such as rectangles, labels, videos, and timers.
   1. In the upper part of the tab, 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 tab, 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 tab, click the icon.
   2. In the link sharing dialog box, click Open sharing.
   3. Click Copy Link and share the link with other users within your Alibaba Cloud account.