The Area Chart widget

Chart Style

An area chart is a type of line chart that combines lines and filled areas to show trends in multi-dimensional real-time data. You can customize the y-axis interval, configure multiple data series, and display the ticker board for a series.

Settings Panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Chart

  • Margins: Click the icon to specify custom margins. The margins define the distance between the chart area and the four boundaries of the widget. Default unit: px.

  • Area Style: The style of the filled area within the chart.

    Parameter	Description
    Curve Smoothing	When turned on, the polyline is rendered as a smooth curve. When turned off, the polyline uses straight-line segments.
    Fill Opacity	The fill opacity of the area. Valid values: 0 to 1.

  • Line Style: the width of the line. Click the icon to show or hide the line style.

  • Data Point Mark: the marker style of data points in the area chart. Click the icon to show or hide the markers.

    Parameter	Description
    Mark Shape	The shape of the data point. Valid values: Dot, Square, Triangle, and Diamond.
    Mark Size	The size of the data point marker. Unit: px.

  • Value Label: the style of the value label for each data point on a polyline. Click the icon to show or hide the value label.

    Parameter	Description
    Position	The position of the value label text. Valid values: Data Point, End of Line, and Adaptive to Area.
    Text Style	The font style, weight, font size, and color of the value label text. Note If the value label position is End of Line or Adaptive to Area, the text color matches the series color.
    Offset	The horizontal and vertical offset of the value label.

  • Legend: the legend style of the area chart. Click the icon to show or hide the legend.

    Parameter	Description
    Paging Allowed	When turned on, legends can be paginated if too numerous to display at once. When turned off, pagination is disabled.
    Layout	The position of the legend relative to the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.
    Legend Mark	The shape and size of the legend marker.
    Legend Text	The font style, weight, font size, and color of the legend text.

• Coordinate Axes: You can specify two axes: X Axis and Y Axis.

  • X Axis

    • Show Axis: If you turn on the switch, the x-axis is visible in the widget. If you turn off the switch, the x-axis is hidden.

    • Data Type: the data type of the x-axis.

      Parameter	Description
      Numeric	Supports numeric data such as integers and floating-point numbers.
      Category	Supports category data such as characters and strings.
      Time	Time data. You must configure the data format.

    • Axis Label: the style of the x-axis label. Click the icon to show or hide the x-axis label.

      Note

      If the data format and the configured format do not match, the widget may not display correctly.

      Parameter	Description
      Data Format	The display format of the data. This parameter applies only to time-based and numeric data. For time data, use a format such as YYYY/MM/DD HH:mm:ss. For integers, use d. For floating-point numbers, use .1f.
      Text Style	The font style, weight, font size, and color of the x-axis label text.
      Quantity	The number of labels displayed on the x-axis. Click the icon to specify a custom number of x-axis labels.

    • Axis Title: the style of the x-axis title. Click the icon to show or hide the x-axis title.

      Parameter	Description
      Title	The text content of the x-axis title.
      Offset	The offset of the x-axis title. Unit: px.
      Text Style	The font style, weight, font size, and color of the x-axis title text.

    • Axis Line: the style of the x-axis line. Click the icon to show or hide the x-axis line.

      Color: the color of the x-axis.

    • Grid Lines: the style of the x-axis grid lines. Click the icon to show or hide the x-axis grid lines.

      Color: the color of the x-axis grid lines.

  • Y Axis

    • Show Axis: If you turn on the switch, the y-axis is visible in the widget. If you turn off the switch, the y-axis is hidden.

    • Range: the minimum value of the y-axis range. Click the icon to specify a custom minimum value for the y-axis.

      • 0: By default, the minimum value of the y-axis range is 0.

      • Min Data Value: the minimum value in the data.

      Note

      After you enable a custom data range for the y-axis, some data points with small values may not be visible. We recommend that you disable the custom data range if this occurs.

    • Data Format: the display format of the y-axis label value. Valid values: Default, 11 (Integer), 11.1 (Float), 11.11 (Float), 11%, 11.1%, and 11.11%.

    • Axis Label: the style of the y-axis label. Click the icon to show or hide the y-axis label.

      Parameter	Description
      Text Style	The font style, weight, font size, and color of the y-axis label text.
      Quantity	The number of labels displayed on the y-axis. Click the icon to specify a custom number of y-axis labels.

    • Axis Title: the style of the y-axis title. Click the icon to show or hide the y-axis title.

      Parameter	Description
      Title	The text content of the y-axis title.
      Offset	The offset of the y-axis title. Unit: px.
      Text Style	The font style, weight, font size, and color of the y-axis title text.

    • Axis Line: the style of the y-axis line. Click the icon to show or hide the y-axis line.

      Color: the color of the y-axis.

    • Grid Lines: the style of the y-axis grid lines. Click the icon to show or hide the grid lines.

      Color: the color of the grid lines on the y-axis.

• Series

  • CSV Data: When turned on, you can use the columns in a CSV data file to map to values and data series directly. When turned off, the Series Mapping configuration takes effect. Click the icon to show or hide the CSV data switch.

    Parameter	Description
    Auto Extract	When turned on, the widget automatically parses and displays fields from CSV data. When turned off, fields are not automatically parsed.
    Numeric Field Only	When turned on, only numeric fields in CSV data are parsed. When turned off, all fields are parsed.

  • Data Series: Click the or icon on the right to add or delete a data series. Click the or icon to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configurations and add a data series with the same configurations.

    Parameter	Description
    Field Mapping	Column/Field and Series configuration items. This parameter takes effect only when you turn on CSV Data and turn off Auto Extract configuration items. Column/Field the data series field value. You can customize the field value. If the field is empty, the system displays s field values in the widget data as series field values. If this parameter is not empty, you must ensure the order in which data is returned. Series: the display name of the data series, which can be customized.
    Mapping Between	s Field Value and Series Name configuration items take effect only when CSV Data is hidden and the Series Mapping configuration items switch is turned on. s Field Value: the data series mapping value, which can be customized. If you leave this parameter empty, the system displays s field values in the component data as series field mapping values. If this parameter is not empty, you must ensure the order in which data is returned. Series Name: the display name of the data series, which can be customized.
    Area Style	The fill color of the area under this series.
    Data Point Mark	The stroke color of data point markers in this series. Note This color takes effect only when data point markers are displayed.

  • Series Mapping: When turned on, this parameter takes effect when the data contains series s values. You can set the color and name of a specific series by using the Mapping Between parameter. When turned off, the Field Mapping configuration is disabled.

• Other

  • Auxiliary Line: the auxiliary line style of the area chart. Click the icon to enable or disable the auxiliary line.

    Parameter	Description
    Type	The type of the auxiliary line. You can select Min Value, Max Value, Average Value, or Median Value.
    Style	The color, thickness, and line style of the auxiliary line.
    Auxiliary Description	The style of the auxiliary description, including: Description: the auxiliary description text. Position: the position of the text on the auxiliary line. Offset: The horizontal or vertical offset of the description text. Text Style: the font style, weight, font size, and color of the text.

  • Interaction Enhancement for Huge Amounts of Data: If the area chart contains a large amount of data, you can configure interaction enhancement styles. Click the icon to enable or disable the interaction enhancement effect.

    Parameter	Description
    Interaction Mode	The data interaction mode. Valid values: Slider and Scroll Bar. Note The time data type does not support the thumbnail axis for large data interaction.
    Default Range	The data range displayed on the thumbnail axis. Valid values: 0 to 1. This option is available only when the Slider style is enabled.
    Style	The foreground and background colors of the thumbnail axis. This option is available only when the Slider style is enabled.
    Direction	The direction of the scroll bar. Valid values: Horizontal and Vertical. This option is available only when the Scroll Bar style is enabled.
    Width	The width of the data category column. This option is available only when the Scroll Bar style is enabled.

  • Tooltip: the tooltip that appears when you hover over or click a data point on the preview or published page. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Text Style	The font style, weight, font size, and color of the tooltip text.
    Indicator	The width, line type, and color of the tooltip indicator. Click the icon to enable or disable the indicator.
    Background Box	The background style of the tooltip. Background Color: the background color of the tooltip. Padding: the inner margin of the tooltip. Unit: pixels. Border Border Width: the border thickness of the tooltip. Unit: pixels. Border Color: The border color of the tooltip.

Data Panel

Configuration field description

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interaction Panel

Interaction description

Configure interactions in Blueprint Editor

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. In Blueprint Editor, click Area Chart in the Imported Nodes pane. You can view the area chart parameters in the canvas, as shown in the following figure.

   • Event

     Event	Description
     On Completion of Data Interface Request	Triggered after a data interface request is processed by a filter. Returns the processed JSON data. For specific data examples, see the Data Response Result section on the Data tab in the right-side configuration panel of the canvas editor.
     On Failure of Data Interface Request	Triggered when a data interface request fails (due to network issues or interface errors) and is processed by the filter. Returns the processed JSON data. For specific data examples, see the Data Response Result section on the Data tab in the right-side configuration panel of the canvas editor.
     On Click of Data Item	Triggered when a data point in the area chart is clicked, returning the corresponding data item.
     On Click of Legend	Triggered when a legend item in the area chart is clicked, returning the corresponding data item.

   • Action

     Action	Description
     Request Data Interface	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the API data source is configured as http://api.test and the data passed to Request Data Interface is { id: '1'}, the final request URL is http://api.test?id=1.
     Import Data Interface	Imports pre-processed data in the widget's drawing format for redrawing, without requesting server data again. For specific data examples, see the Data Response Result section on the Data tab in the right-side configuration panel of the canvas editor.
     Highlight	Highlights the element corresponding to the data item. Example reference data: return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }
     Cancel Highlight	Cancels the highlighting of the element corresponding to the data item. Example reference data: return { "data": {}, "options": { "mode": "single" } }
     Clear Widget	Clears the widget content. No parameters are required.
     Update Widget Configurations	Dynamically updates widget style configurations. In the Configuration panel, click Copy Configuration to Clipboard to obtain the configuration data. Then modify the style field in the data processing node in Blueprint Editor.
     Show	Shows the widget. Example reference data: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. Example reference data: return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide/Show	Toggles the widget visibility. Example reference data: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified location. Example reference data: return{ // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }