Funnel Chart

Chart style

A funnel chart is suitable for analyzing standardized, single-process business flows that have long cycles and multiple stages. By comparing business data at each stage of the funnel, you can intuitively identify problem areas to inform your decisions. The area of each trapezoid represents the change in business volume from the previous stage.

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

• Graphic

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. If you turn on the switch, you can configure the distance between the funnel chart area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Data Grouping	The style for data grouping. Options include Multiple Groups and Two-group Comparison. Click the icon to show or hide data grouping. Note After you enable data grouping, you must configure two or more trace fields in the data.
  Funnel Shape	The shape of the funnel. Options include Funnel and Pyramid. Note This parameter is configurable only when Data Grouping is enabled and set to Multiple Groups. When Data Grouping is set to Two-group Comparison, Funnel Shape defaults to Funnel.
  Funnel Width	The width of the funnel. The value ranges from 0 to 1.
  Funnel Direction	The orientation of the funnel. Options include Vertical and Horizontal.
  Color	The color of the funnel chart. For more information, see Color mapper instructions to configure the color mapping for different data in the funnel chart widget.
  Outline	The style of the funnel chart's outline, including the line type, thickness, and color.
  Funnel Label	The style of the labels for the data in each trapezoid area of the funnel chart. Click the icon to show or hide the data point label configurations. Label Field: The content of the label must correspond to the fields in the data panel. Options include type, value, and type+value. By default, the content of the value field is used. value: When Label Field is set to value, you can customize the prefix and suffix for the value field content and set the Value Format. You can set the Value Format to a specific value or a percentage. type: When Label Field is set to type, you can customize the prefix and suffix for the type field content. type+value: When Label Field is set to type+value, you can customize the prefix and suffix for the type+value fields, set the Value Format to a specific value or a percentage, and configure the format for the value or percentage. Note When two tag values are displayed, you can enable Word Wrap to display the label on multiple lines. Number Format: The number format for the label. Options include Default, 11 (Integer), 11.1 (Floating-point number), 11.11 (Floating-point number), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands separator), and 1,111.1 (Thousands separator). For more information about data display formats, see Data display formats. This parameter is displayed only when Label Field is set to value or type+value. Relative Offset: The vertical and horizontal offset of the funnel label relative to the trapezoid area, in px. Text Style: The text style of the funnel label, including the font, weight, size, and color. Text Outline: The text outline style of the funnel label, including the outline thickness and color.

• Animation: The animation effect for the funnel chart.

  Parameter	Description
  Enable Animation	Turn on the switch to configure animation effects for the funnel chart.
  Animation Effect	The type of animation effect. The system provides several common animation effects for you to choose from, such as Scale In, Slide In, Fade In/Out, Horizontal Grow, and Vertical Grow. This parameter is configurable only after you enable animation.
  Animation Duration	The duration of the widget's animation effect, in ms. This parameter is configurable only after you enable animation.

• Interaction: The interaction options for the funnel chart widget.

  • Tooltip: Configures the style of the tooltip that appears when you hover over or click a trapezoid in the funnel chart on the preview or published page. You can click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode	The mode of the tooltip. Options include Simple and General.
    Trigger Method	The method to trigger the tooltip. Options include Hover and Click.
    Display Position	The position where the tooltip is displayed. Options include Top, Bottom, Left, and Right.
    Content Display	Click the or icon on the right to add or delete a content display series for the tooltip. Click the or icon to arrange multiple content display series. Click the icon to copy the configuration of the selected content display series and add a new series with the same configuration. Displayed Fields: The name of the field whose content is displayed in the tooltip. This must match a field in the data panel. Display Text: The text content to display in the tooltip. Suffix: The suffix for the tooltip content.
    Content Spacing	The distance between content items in the tooltip.
    Content Text	The style of the content text in the tooltip, including the font, weight, size, and color.
    Popup Style	The style of the tooltip popup. Popup Size: The size of the tooltip popup, including the horizontal and vertical margin values, in px. Popup Border Radius: The border radius of the tooltip popup, in px. Popup Style: The color style of the tooltip popup. Popup Outline: The outline style of the tooltip popup, including the line type, thickness, and color.

  • Selected State: Configures the style of a trapezoid area when it is selected. You can click the icon to enable or disable this style.

    Parameter	Description
    Trigger Method	The method to trigger the selection of a trapezoid. Options include Hover and Click.
    Selection Method	The method to select trapezoids. Options include Single and Multiple.
    Selected Style	The color of a trapezoid in the selected state. Click the icon to enable or disable the selected style.
    Selected Outline	The outline style of a trapezoid, including the line type, thickness, and color. Note When the line type is set to Dashed or Dotted, you can also configure the length of the dashes and the distance between them.

• Legend: Configures the style of the funnel chart's legend.

  Parameter	Description
  Legend Switch	Turn on the switch to configure the legend style. Turn off the switch to disable legend configuration.
  Legend Position	The position of the legend relative to the widget's origin. Options include Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font, weight, size, and color of the legend text.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Categorical Legend	The style of the categorical legend. Legend Marker: The shape and size of the legend markers. Legend Spacing: The horizontal and vertical distance between different category legends. Max Width: The maximum width of the legend, in px. Allow Pagination: Turn on the switch to enable legend pagination. You can configure the style of the page numbers and arrows when the number of legend items requires pagination. If you turn off the switch, all legend items are displayed on a single page and pagination is disabled. Max Rows: The maximum number of rows to display for the legend. If the number of rows exceeds this value, the legend will be paginated. Page Number Style: The style of the page numbers for pagination, including the font, weight, size, and color. Arrow Style: The size of the arrows for pagination, and the default and disabled colors of the arrows.

• Condition: Configures conditional styling.

  Conditional Style: You can click the or icon on the right to add or delete a conditional style series. You can click the or icon to change the arrangement of multiple conditional style series. You can click the icon to copy the configuration of the selected conditional style series to a new series. For more information about the configurations, see Condition tree instructions.

  Color: Enable this option to configure the trapezoid colors for this conditional style series. Disable this option to use the default colors.

Data panel (default mode)

Field configuration

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.

Data panel (analysis mode)

For more information about the data configuration panel in BI analysis mode, see Introduction to the data panel in BI analysis mode.

Field configuration

Interaction panel

Interaction description

Blueprint editor interaction configuration

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. On the blueprint editor configuration page, click the Funnel Chart widget in the import node list. The following figure shows the configuration parameters for the funnel chart.

   • Events

     Event	Description
     When the Funnel Chart API request is successful	This event is thrown after the filter processes the response from the data API. The event contains the processed data in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When the Funnel Chart API request fails	This event is triggered when a data API request fails due to issues such as network problems or API errors. The filter processes this event, and the resulting data is provided in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When a selected data item changes	An event is triggered when the data for a segment in the funnel chart changes. This event includes the data item that corresponds to the segment.
     When a legend item is clicked	This event is triggered when a legend item in the funnel chart is clicked. The data item that corresponds to the clicked legend item is also returned.

   • Actions

     Action	Description
     Request Funnel Chart API	Re-requests server-side data. Data thrown by an input data processing node or a layer node is used as a parameter. For example, if the Funnel Chart is configured with an API data source of https://api.test, and the data passed to the Request Funnel Chart API action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import Funnel Chart API	You can process the data into the component's drawing format and then import the component to redraw it. This means you do not have to request data from the server-side again. For data examples, see the Data Response area on the Data tab in the configuration panel, which is to the right of the component in the canvas editor.
     Highlight	Highlights the element corresponding to a data item. The following code provides a reference data example. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // Fill color } }
     Reset Selections	Clears and resets the widget's selected items. No parameters are required.
     Update Widget Configuration	Dynamically updates the style configuration of the widget. First, in the widget's Configuration panel, click Copy Configuration to Clipboard to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the blueprint editor configuration page as needed.
     Show	Shows the widget. The following code provides a reference data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. The following code provides a reference data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	Toggles the visibility of the widget. The following code provides a reference data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following code provides a reference data example. return{ // Movement type. Absolute positioning: to, relative positioning: by. Default value: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }