All Products
Search
Document Center

DataV:Create a data dashboard using a blank canvas

Last Updated:Jun 08, 2026

Build a PC data dashboard in DataV-Board 7.0 from a blank canvas. This tutorial connects ApsaraDB RDS MySQL data and visualizes it with line charts, list carousels, and title widgets.

Overview

Note

The example data is for demonstration only. Use your actual data in production.

Architecture description

After you complete this tutorial, your environment resembles the following architecture. Adjust the configuration to match your deployment needs.

image

Effect demonstration

The completed dashboard looks like this: image

Note

Your final dashboard will differ based on your configuration choices. This topic introduces the core features and workflow.

Preparations

On the ApsaraDB RDS MySQL side

  1. Create an RDS MySQL instance.

    In this example, the instance is in the China (Hangzhou) region and uses the platform-generated VPC and vSwitch.

  2. Create a database account and database, then prepare example data.

    This example uses:

    • Database account: user_test.

    • Database name: mysqltest.

    • Example data: Create a Bill table in the mysqltest database with 100 simulated entries dated between January 1, 2023 and January 10, 2023.

      The SQL statement is as follows.

      CREATE TABLE IF NOT EXISTS Bill (
          `id` INT AUTO_INCREMENT PRIMARY KEY,
          `bill_date` DATE NOT NULL COMMENT 'Bill date',
          `amount` DECIMAL(10, 2) NOT NULL COMMENT 'Amount'
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='Bill information table';
      
      DELIMITER ;;
      CREATE PROCEDURE GenerateBillData()
      BEGIN
          DECLARE v_counter INT DEFAULT 1;
          DECLARE v_random_date DATE;
          DECLARE v_random_amount DECIMAL(10, 2);
          
          WHILE v_counter <= 100 DO
              SET v_random_date = DATE_ADD('2023-01-01', INTERVAL FLOOR(RAND() * 10) DAY);
              SET v_random_amount = ROUND(RAND() * 1000, 2);
              
              INSERT INTO Bill (bill_date, amount)
              VALUES (v_random_date, v_random_amount);
              
              SET v_counter = v_counter + 1;
          END WHILE;
      END;;
      DELIMITER ;
      
      -- Call the stored procedure to generate data
      CALL GenerateBillData();
  3. Configure a whitelist.

    Add the DataV-Board IP address for your region to the RDS MySQL instance whitelist so DataV-Board can access the database.

    The sample database is in the China (Hangzhou) region using VPC, so add 100.104.70.0/24 to the whitelist.

You can adjust instance and database settings to match your business requirements.

On the DataV-Board 7.0 side

  1. Activate the DataV-Board service.

  2. Create an RDS MySQL data source.

    Configure the data source with these key parameters:

    Parameter

    Description

    Type

    Select RDS MySQL. For network type, select Internal of China (hangzhou).

    Name

    Enter a custom name. This example uses mysql_data.

    VPC ID and Vpc-connected Instance ID

    • VPC ID: The VPC ID bound to the RDS MySQL instance.

    • VPC-connected instance ID: The RDS MySQL instance ID.

    Find these values in the RDS instance list. image

    Domain Name and Port

    • Domain name: The VPC internal address of the RDS MySQL instance.

    • Port: The VPC internal port of the RDS MySQL instance.

    Find these values in the RDS instance list. Click the instance name to view the details as shown below. image

    Username and Password

    The database login account and password. This example uses user_test.

    Database

    Click Obtain Data List and select the database. This example uses mysqltest.

Step 1: Create a data dashboard

  1. Log on to the DataV-Board 7.0 console.

  2. Create a data dashboard.

    1. Click All Applications > Create PC Dashboard.

    2. Click Create Dashboard on the blank dashboard.

    3. Enter the dashboard name, use the default project group, and click Create Dashboard.

      The example dashboard name is mysql_display.

After creation, you are redirected to the canvas editor where you can connect data sources and configure the canvas.

Note

The default canvas size is 1920×1080. Adjust it in Page Configuration on the right side of the canvas editor.

Step 2: Add and configure widgets

Select a widget, connect it to a data source, and configure its display style. This topic demonstrates data access using line chart, list carousel, and general title widgets.

Use a line chart to access data

A line chart shows data trends over time. This example displays the total bill amount in the Bill table on January 3, 2023 compared with January 2, 2023.

  1. Add a line chart to the canvas.

    On the dashboard editing page, add a line chart as shown below.

    image

    Click the line chart to configure its style, data source, and other settings in the editing area on the right. image

  2. Access data source data.

    1. Access the data source and view the data.

      In the Data Source area, select the data source and view the data table fields through the query statement. Example configuration:

      • Data source type: RDS for MySQL

      • Data source name: mysql_data

      • Query statement: Retrieve the daily total billing amounts from the Bill table for the period of January 1, 2023 through January 8, 2023.

        Note

        Billing amounts are tallied the following day. Bills for January 1, 2023 to January 8, 2023 reflect charges from December 31, 2022 to January 7, 2023.

        The SQL statement is as follows.

        SELECT
            DATE(bill_date) AS 日期,
            SUM(amount) AS 日总金额
        FROM
            Bill
        WHERE
            bill_date BETWEEN '2023-01-01' AND '2023-01-08'
        GROUP BY
            DATE(bill_date)
        ORDER BY
            日期;

      image

    2. Use a filter to adapt data source data.

      If your data table fields do not match the widget fields, use a filter to adapt the data.

      Enable Filter and write filter code by Creating manually or using Artificial Intelligence Recommendation. Click Save.

      image

      The filter code for this example is as follows.

      var result = [];
      for (var i = 0; i < data.length; i++) {
        result.push({
          x: data[i].日期,
          y: data[i].日总金额,
          colorField: "type1"
        });
      }
      return result;
      • X-axis: Display purchase date.

      • Y-axis: Display daily total amount.

      • Field color: Defined as a fixed color type1.

  3. Modify the widget style.

    Set the X-axis and Y-axis font size to 15px and enable Y-axis value display on the line chart.

    image

Use a list carousel to access data

A list carousel dynamically cycles through data table records. This example displays all bill entries in the Bill table.

  1. Add a list carousel to the canvas.

    On the dashboard editing page, add a list carousel as shown below. image

    Click the list carousel to configure its style, data source, or other settings in the editing area on the right.

    Click the list carousel to configure its style, data source, and other settings in the editing area on the right. image

  2. Access data source data.

    In the Data Source area, select the data source and view the data table fields. Example configuration:

    • Data source type: RDS for MySQL

    • Data source name: mysql_data

    • Query statement: View all bill records in the Bill table. The statement is as follows.

      select * from Bill;

    image

  3. Modify the widget style.

    The RDS MySQL table has three fields (id, bill_date, amount). Adjust the column headings accordingly:

    • Column field name: Map the RDS MySQL field names to each column. Set the three tags to "id, bill_date, amount".

    • Column display name: Set the display names to "User ID, Consumption Date, Amount".

    image

Use a general title

Use a general title widget as the title bar for the dashboard.

  1. On the dashboard editing page, add a general title as shown below. image

  2. Click the title to configure its style and data in the editing area on the right. image

    Example style configuration: image

Step 3: Preview the data dashboard

Click Preview in the upper-right corner of the editing page to preview the dashboard. Drag and drop widgets to adjust their position and size.

Example dashboard: image

Step 4: Publish and deploy the data dashboard

After the dashboard is ready, publish it online and deploy it to relevant devices.

  1. Click Publish in the upper right corner of the dashboard editing page and select Publish Big Screen.

  2. Get the access information and set access restrictions.

    Click Published in the upper-right corner of the editing page to view access details and configure privileges.

    image

    • Access via QR code, link, or other methods.

    • Configure access privileges such as password or token authentication. Enable token authentication if you need to integrate with other systems.

    • View published versions in the publish snapshot area. Add new versions or revert to previous ones.

  3. Use the access address to project the dashboard onto rendering hosts, PCs, mobile phones, or other devices.

Step 5: Project the data dashboard

After publishing, go to the visual application center to project the dashboard.

  1. Navigate to the visual application center.

    1. Log on to the DataV-Board 7.0 console.

    2. In the top navigation bar, click Visual Application Center on the right.

  2. Create a demo plan and project it as shown below. image

References