DocsICP FilingConsole
官方文档
首页

Real-time curve

更新时间：
复制 MD 格式
我的收藏

The real-time curve component uses time as the x-axis to display real-time data trends for one or more device properties. This document explains how to configure the component.

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 set up the page layout. For details, see Horizontal and vertical columns.

  4. Above the component list on the left of the canvas, enter real-time curve to find the component. Then, drag the component to the main canvas or into a column of a column component.

    For more information, see Add components.

Step 2: Configure the data source

  1. In the Styles panel on the right side of the editor, under Display Data, click Configure Data Source.

  2. Configure the device data source parameters.

    The configuration is similar to the real-time curve for web applications, but the Real-time Data Period options are different. Mobile applications only support displaying data for Last 30 Minutes, Last Hour, and Last 3 Hours.

    For parameter details, see Configure the data source for a real-time curve.

  3. Click OK.

Step 3: Configure styles

  1. In the Styles panel on the right, configure the component's display settings.

    Parameter

    Description

    Global style

    Sets the axis colors and background color for the real-time curve.

    x-axis

    Select the Show axis labels checkbox to display the tick values on the x-axis and y-axis. You can also configure the label style.

    y-axis

    Border

    Lets you configure the border's visibility and appearance.

    Show series name

    When enabled, the series name is displayed above the real-time curve. You can add series and configure the name and line color for each series.

    Show latest value

    When enabled, the latest value for each curve is displayed after its series name.

  2. Adjust the component's height, width, and position on the page. For details, see General styles.

Step 4: Configure interactions

  1. On the Interaction tab, configure events and actions for the component. For details, see Configure interactions.

    This component supports click and double-click events. For example, you can configure an action to show or hide specific content when a user clicks the component.

  2. Preview and debug the component's data and visual effects. For more information, see Preview and debug.

Previous：Device Live DataNext：Gauge