Line chart

Use case

On an environmental monitoring dashboard for a tea plantation, use the line chart component to display the hourly maximum temperature.

The left side of the dashboard includes a Select Monitoring Point drop-down list, Start Time and End Time pickers, and a temperature line chart. The line chart uses timestamps for the X-axis and temperature (°C) for the Y-axis. The right side shows a background image of the tea plantation.

Step 1: Add a 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. In the search box above the component list on the left of the canvas, enter Line Chart to find the component, and then drag it to the canvas.

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

Step 2: Configure a data source

1. In the web editor, select the component. In the Style pane on the right, click Configure data source.

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.

   On the Data display tab, the Data source section on the left shows the name of the configured data source. The Dimension and Measure sections list the attribute fields automatically parsed from the data source.

   Note

   Data source attribute fields are matched based on the following 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 tab, set the data and style for the line chart.

1. Drag a dimension field to the X-axis well and one or more measure fields to the Y-axis well.

   Note

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

2. Optional:Click the triangle icon next to a field in the X-axis or Y-axis well to perform the following operations.

   Actions	Description
   Aggregation method	Options: Sum (default), Average, Maximum, Minimum, and Count. This feature is available only for measure fields. The configured aggregation method appears before the field name. After setting 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 use it as a filter item. You can then configure conditions based on this field to filter the displayed data. A maximum of 10 filters is supported. Alternatively, from the Dimension or Measure section on the left, you can click the triangle icon next to a field to add it to the Filter section. Note This feature is available only when the component's data source is a data table resource. For more information, see Configure filters.
   Set display name	Edit the display name of the field.

3. On the Data tab, click Style on the right to set the component style.

   Parameter	Description
   Global Style	Configure global style settings, such as font, whether to show data points, use smooth curves, apply area fill, and connect points across breaks.
   Title	Show or hide the title or legend. If visible, you can customize their appearance.
   Legend
   X-axis	Show or hide tick labels on the X-axis or Y-axis. If visible, you can customize their appearance. 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
   Label	These settings control the visibility and appearance of data point labels, grid lines, background color, and borders.
   Horizontal grid line
   Background
   Border
   Card Background	Configure the background style for the data card that appears when you hover over the chart. If this option is disabled, the data card uses the default style. If this option is enabled, you can configure the background style of the data card.
   No-data message	Configure the message that appears when the component has no data.

4. Click Complete Configuration to return to the web application editor and view the configured component data.

5. 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.