Line chart

Step 1: Add the component

1. Create a mobile application. For details, see Create a mobile application.

2. In the mobile application editor, click the Components icon on the far left.

3. (Optional) Add a column component to structure the page layout. For details, see Horizontal and vertical columns.

4. Above the component list on the left side of the canvas, enter Line Chart in the search box to find the component. Then, drag the component to the center of the canvas.

   For more information about adding components, see Add components.

Step 2: Configure the data source

1. On the right side of the mobile application editor, in the Style panel, click Configure Data Source next to Display Data.

2. On the Data Source Configuration page, select a data source type and complete the configuration.

   Available data source types include API, data table resource, Static Data, and Application Push.

3. Click OK to complete the configuration.

   On the left side of the Data Display tab, the name of the configured data source appears in the Data Source section. The Dimension and Measure sections list the fields that are automatically parsed from the data source.

   Note

   Data source attribute field matching rules:

   • Dimension: Boolean, string, and time fields.

   • Measure: Numeric fields.

4. (Optional) Click Data Table in the upper-left corner to view all data from the configured data source.

Step 3: Configure data display

On the Data display tab, set the data and style for the line chart.

1. Drag one dimension field to Horizontal axis and one or more measure fields to Vertical axis.

   Note

   To modify the default system colors, go to the Properties or Style tab on the right side of the Data display tab.

2. (Optional) In the horizontal and vertical axis boxes, click the dropdown arrow for a field to perform the following operations.

   Operation	Description
   Aggregation method	Options: Sum (default), Average, Maximum, Minimum, and Count. This feature is only available for measure fields. The selected aggregation method appears before the field name. After you set an aggregation method for a measure field, you can configure filter conditions to display specific data. Note This feature is available only when the component's data source type is data table resource.
   Filter	Add a field to the Filter section to filter the displayed data based on specified conditions. You can add up to 10 filters. You can also add a field to the Filter section by clicking the dropdown arrow for a field in the Dimensions or Measures sections on the left. Note This feature is available only when the component's data source type is data table resource. For more information, see Filter configuration.
   Edit display name	Edit the display name of the field.

3. On the right side of the Data display tab, click Style to configure the component's display style.

   Parameter	Description
   Chart type	Set the chart type: line chart or stacked line chart.
   Global style	Configure the font, and specify whether to show area fill, use gradients, or connect lines across breakpoints.
   Title	Shows or hides the corresponding item. If shown, you can configure its display style.
   Legend
   Horizontal axis
   Vertical axis
   Background
   Border
   No data message

4. Click Complete configuration to return to the mobile application editor and view the configured component data.

5. Adjust the component's position on the page. For details, see General styles.

Step 4: Configure interactions

1. On the Interaction tab on the right side of the mobile application editor, click Add Interaction to set an Event and an Action.

   Supported events include Click and Double-click. For example, you can set the Click event on the component to trigger the Refresh Component action, which refreshes a specified component's content.

   For details, see Interaction Configuration.

2. Preview and debug the data and style of the component. For details, see Preview and Debug.