DocsICP FilingConsole
官方文档
首页

Real-time curve

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

The real-time curve component uses time as its x-axis. Unlike the real-time curve (old) component, it can only display data trends for one or more device properties from the last 30 minutes, 1 hour, or 3 hours. This topic explains how to configure the component.

Step 1: Add the component

  1. Create a web application. For more information, see Create a web application.

  2. In the Web application editor, click the component icon 组件 on the left.

  3. Above the component list on the left side of the canvas, enter Real-time Curve to find the component. Then, drag the component onto the canvas.

    For more information about adding components, see Add a component.

Step 2: Configure the data source

  1. In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.

  2. Configure the device data source parameters.
    Parameter Description

    Select Data Source

    Device is selected by default. You cannot change this value.

    Mode

    		 Select the curve display mode: a single device with multiple properties, or multiple devices with a single property.

    You can display data curves for a maximum of three properties or devices.

    Product

    Click Select Product, and in the Select Product dialog box, select the target product.

    The Select Product dialog box displays the products that have been imported into the project for the current application. If no suitable product is available, click Product Management in the lower-left corner of the dialog box to go to the Products page of the project details, where you can create or import a product.

    Device

    		 Select a device.

    • Specify device: If a real device is connected to IoT Platform, select the real device. If the real device is not connected to IoT Platform and does not report data, use the device emulator to simulate data reporting online for data format validation. For more information, see Device emulator.

    • Dynamic device: You can select from four types of dynamic devices: page variables, component values, URL parameters, and data from interactive actions.

      • Page variable: Select a page variable that is created in the current application as the source of the dynamic device. For more information about how to create a page variable, see Manage page variables.

      • Component value: Select a configured form component in the current application as the source of the dynamic device.

      • URL parameter: Use a parameter on the final published page as the dynamic device for the service. This is often used for embedded pages where the host page provides dynamic parameters, such as using the incoming product model as the dynamic device for the service.

      • From interactive action: Use the pop-up window data source configured on the Interaction tab as the source of the dynamic device. For more information, see Open a pop-up container.

        Important

        • Only pop-up components support setting the dynamic device to From interactive action.

        • After you click Configure Data Source to open the Data Source Configuration pop-up window, you must set Device to Dynamic device.

    • Empty device: If you select this option, you can enter simulation data in the Device simulation data box to validate the data format.

    Data Item

    		 Defaults to historical device data. This parameter cannot be modified.

    This setting uses a property's historical data as the data item. For example, you can display temperature data from the last three hours.

    Property

    Select a device property. The widget supports device properties of the following data types: single-precision numbers, double-precision numbers, and integers.

    Real-time Data Period

    		 You can choose from the last 30 minutes, 1 hour, or 3 hours.
  3. Click OK.

Step 3: Configure styles

  1. In the Style panel on the right side of the web application editor, configure the display settings for the component.
    Parameter Description

    Global Style

    Set the global font, axis color, and background color for the time series widget.

    x-axis Select the Show axis label checkbox to display the tick values on the x-axis and y-axis. You can customize the display style.
    Note

    The number of Y-axis ticks is based on the range of values and the specified interval. For example, if the minimum value is 0, the maximum value is 500, and the interval is 50, the number of ticks is 11.
    y-axis

    Border

    Set whether to display a border and configure its appearance.
    Guideline 1 Guidelines are hidden by default. If you enable a guideline, it appears on the real-time curve, and you can configure its style.
    Guideline 2
    Show series name The series name is hidden by default. After you select this checkbox, the series name is displayed above the real-time curve. You can add series and set the name and curve color for each.
    Note In preview mode, you can click a series name above the real-time curve to hide its corresponding curve.

  2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

Step 4: Configure interactions

  1. In the Interaction panel on the right side of the web application editor, click Add Interaction, and then set an event and an action.

    This component supports the Mouse In event. For example, you can set the Mouse In event to trigger a Show/Hide action that reveals a hidden component with additional information.

    For more information, see Interaction configuration.

  2. Click Preview in the upper-right corner of the page to view and debug the component's data and style.

Previous：Bar chartNext：Real-time chart (old)