Help Center/ Huawei Cloud Astro Zero/ Best Practices/ Advanced Pages/ Using Petal Charts to Display Order Data on Advanced Pages
Updated on 2025-08-14 GMT+08:00

Using Petal Charts to Display Order Data on Advanced Pages

Expected Results

In addition to the static data preset in the system, widgets on an advanced page also display dynamic data, that is, data dynamically generated by calling APIs such as scripts, flows, and objects. For example, you can change the data in a rose pie chart to the data in the order object.

Figure 1 Implementation results

Implementation Methods

  1. Create a low-code application.

    1. Apply for a free trial or purchase a commercial instance by referring to Authorization of Users for Huawei Cloud Astro Zero Usage and Instance Purchases.
    2. After the instance is purchased, click Access Homepage on Homepage. The application development page is displayed.
    3. In the navigation pane, choose Applications. On the displayed page, click Low-Code or .

      When you create an application for the first time, create a namespace as prompted. Once it is created, you cannot change or delete it, so check the details carefully. Use your company or team's abbreviation for the namespace.

    4. In the displayed dialog box, choose Standard Applications and click Confirm.
    5. Enter a label and name of the application, and click the confirm button. The application designer is displayed.
      Figure 2 Creating a blank application
      Table 1 Parameters for creating a blank application

      Parameter

      Description

      Example

      Label

      The label for the new application; Max. 80 characters. A label uniquely identifies an application in the system and cannot be modified after creation.

      My first application

      Name

      Name of the new application. After you enter the label value and click the text box of this parameter, the system automatically generates an application name and adds Namespace__ before the name. Naming rules:

      • Max. characters: 31, including the prefix namespace.

        To prevent duplicate data names among different tenants, each tenant must define a unique namespace when first creating an application. A tenant can only create one namespace, and once it is created, it cannot be modified.

      • Start with a letter and use only letters, digits, and underscores (_). Do not end with an underscore (_).

      A

  2. In the navigation pane, choose Page, and click + next to Advanced Page.
  3. Click and drag the widget_demo_mintui widget from Chart > Pie to the canvas on the right.

    Figure 3 Dragging a rose pie chart

  4. Select the rose pie chart and view the data format of the widget in Data.

    Figure 4 Viewing the data format

  5. Create an object named productList and add fields and data to the object.

    1. In the navigation pane, choose Data, and click + next to Object.
    2. Set Object Name and Unique ID of the object to productList and click the confirm button.
      Figure 5 Creating the object productList
    3. Click to go to the object details page.
    4. On the Fields tab, click Add and add the productName field to the object.
      Figure 6 Adding the productName field
      Table 2 Parameters for adding the productName field

      Parameter

      Description

      Example

      Display Name

      Name of the new field, which can be changed after the field is created.

      Value: 1–63 characters.

      productName

      Unique ID

      ID of a new field in the system. The value cannot be changed after the field is created. Naming rules:

      • Max. 63 characters, including the prefix namespace.

        The content that is blurred in front of the ID is a namespace. To prevent duplicate data names among different tenants, each tenant must define a unique namespace when first creating an application. A tenant can only create one namespace, and once it is created, it cannot be modified.

      • Start with a letter and use only letters, digits, and an underscore (_). Do not end with an underscore (_).

      productName

      Field Type

      Click . On the page that is displayed, select the type of the new field based on the parameter description.

      Text

    5. On the Fields tab, click Add again to add the productNumber field.
      Figure 7 Adding the productNumber field
    6. On the Data tab, click Add to add data to the object.
      Figure 8 Adding data to an object

  6. Create a script for reading object data.

    1. In the navigation pane, choose Logic and click + next to Script.
    2. Create a blank script named getDataInfo.
      Figure 9 Creating a script named getDataInfo
    3. In the script editor, enter the following code:
      // Here's your code.
      import * as db from 'db';
      @useObject (['Namespace __productList__CST'])
      @action.object({ type: 'method' })
      export class SearchScript {
          @action.method({ input: 'ParamsInput', output: 'ParamsOutput' })
          public run(): Object[] {
              let queryData = this.doSearchScript();
              let result: Array<Object> = [];
              result.push({
                  dataValue: [{
                      name: "Orders",
                      value: queryData
                  }]
              });
              console.log("result", result)
              return result;
          }
          private doSearchScript(): Object[] {
              let sql = "select Namespace__productName__CST as name, Namespace__productNumber__CST as value"
                  + " from Namespace__productList__CST"
              let query = db.sql().exec(sql)
              return query;
          }
      }
    4. Click to save the script. After the script is saved, click to activate the script.

  7. Create an open API.

    1. In the navigation pane, select Integrations.
    2. Click + next to the Open API and set open API parameters.
      Figure 10 Setting open API parameters
      Table 3 Parameters for creating an API

      Parameter

      Description

      Example

      Operation Name

      Name of the operation for creating an API. Naming rules:

      • Value: 1–40 characters.
      • Start with a letter and use only letters, digits, and an underscore (_). Do not end with an underscore (_).

      showDataInfo

      Version

      Version number of the new URL.

      1.0.0

      URL

      New URL. In the URL, /service is a fixed value, and is followed by /App name/Version. The rest can be customized.

      /showDataInfo

      Type

      Type of the new API.

      Script

      Resource

      Select the script called by the API.

      Select the script created in 6.

      Method

      Name of the method called after mapping.

      POST

    3. After the settings are complete, click Save. The API details page is displayed.
    4. In the API Information area, click next to URL to copy the URL.
      Figure 11 Copying a URL

  8. Return to the advanced page, select Rose Pie Chart, and set the data bridge under the Data tab.

    Select Pie Chart Data Bridge for Bridge Instance, select Dynamic Data for Data Type, and set URL to the URL obtained in 7.d.
    Figure 12 Configuring widget data

  9. Right-click the rose pie chart widget and choose Setting from the shortcut menu to set the widget title and font size.

    Figure 13 Setting the widget title

  10. Click to save the advanced page settings. After the page settings are saved, click to release the page.
  11. After the release is successful, click to preview.