All Products
Search
Document Center

DataV:The Bubble Chart widget

Last Updated:May 11, 2023

This topic describes the chart style and configuration panel of a bubble chart.

Chart Style

A bubble chart is a type of scatter chart. Compared with a scatter chart, a bubble chart uses bubbles to display data. You can customize the size of bubbles to visually and vividly display the differences between discrete data at multiple time points.

image..png

Settings Panelimage..png

  • 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 asset configurations.
  • Size: indicates the size of a widget, including its pixel width and height. You can click the Proportional resizing 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 Rotation control icon icon.
    • Click the Horizontal flip icon to horizontally flip a widget.
    • Click the Vertical flip 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.
  • Global Style image..png

    • Font: the font family of all text in the widget. Default value: Microsoft Yahei.

    • Margin

      • Top: the distance between the bubble chart and the upper boundary of the widget. Unit: pixels.

      • Bottom: the distance between the bubble chart and the lower boundary of the widget. Unit: pixels.

      • Left: the distance between the bubble chart and the left border of the widget. Unit: pixels.

      • Right: the distance between the bubble chart and the right border of the widget. Unit: pixels.

    • Data Limit: specifies the maximum number of data records that you can load for layout, drawing, and computing. This ensures that the visualized application is effective.

  • X Axis: the x-axis style of the widget. You can click the 眼睛图标icon to display or hide the x-axis. image..png

    • Text Style

      • Font Color: the color of the text on the x-axis.

      • Font Size: the font size of the text on the x-axis. Valid values: 10 to 100.

      • Font Weight: the font weight of the text on the x-axis.

    • Axis Label: the label style of the axis. You can click the 眼睛图标icon to display or hide the label.

      Note

      If the data format and setting formats are not uniform, the widget will be displayed abnormally.

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

        • Numeric: numeric data such as integers and floating-point numbers is supported.

        • Category: Data of the character or string type is supported.

        • Time: the data of the time type. You need to configure data format.

      • Data Format: data display format, valid only for time data, please configure by referring to the %Y/%m/%d %H:%M:%S format.

      • Display Format: the desired data format to be displayed. This parameter is valid only for time and numeric data. Please refer to %m/%d%Y%H:%M:%S time, integer reference d and floating point reference .1f.

      • Maximum Value: the maximum value of the x-axis. You can specify a custom value. The default value is auto. The system automatically calculates the match based on the maximum value, minimum value, and number of tags.

      • Minimum Value: the minimum value of the x-axis. You can specify a custom value. The default value is auto. The system automatically calculates the match based on the maximum value, minimum value, and number of tags.

      • Unit: the unit of the x-axis.

      • Quantity: the number of labels on the x-axis.

      • Angle: the angle of the x-axis label. Valid values: Horizontal, Oblique, and Vertical.

    • Axis: the color, display, and hide settings of the axis.

    • Network Line: the color, display, and hide settings of the grid lines.

  • Y Axis

    The configuration is similar to that of the x-axis. For more information, see the x-axis section. image..png

  • Bubble: the size of the bubble.

    Mapping by Y Axis

    • When turned on, the maximum and minimum values of the bubble radius are mapped by the maximum and minimum values of the y fields in the data.

    • If you turn off this switch, you must customize the interval range of the minimum and maximum values to control the size of the bubble.

      • Minimum: the minimum value of the bubble. The system subtracts the value that you set from the r field value in the data. If the result is a negative number, the bubble is not displayed. If the result is a positive number, the bubble is displayed. The radius of the bubble is:(r value-minimum value) /maximum value * r value.

      • Maximum: the maximum value of the bubble. The system subtracts the minimum value from the r field value in the data. If the result is a negative number, the bubble is not displayed. If the result is a positive number, the bubble is displayed. The radius of the bubble is:(r value-minimum value) /maximum value * r value.

  • Legend: the legend style of the chart. You can click the 眼睛图标icon to display or hide the legend. image..png

    • Text

      • Font Size: the size of the legend text.

      • Color: the color of the legend text.

      • Font weight: the font weight of the legend text.

    • Layout

      • Spacing

        • Left and Right Spacing: The distance between the left and right sides of adjacent legends. This configuration items is only valid when there are multiple series.

        • Distance: the distance between the legend and the upper and lower boundaries of the widget.

      • Position: the position of the legend relative to the start coordinate of the widget. This field is optional.

  • dialog box: The style of the dialog box that appears when you mouse over or click a bubble on a preview or publish page. image..png

    • Trigger Type: dialog box the type of the target to be triggered. This field is optional, including Data Item and Axis.

    • Trigger Action: dialog box the action to be triggered. This field is optional, including Hover and Click.

    • Disappearing Delay Time: If the trigger condition is not met, the dialog box disappears. This configuration items sets the delay time before the dialog box disappears. Unit: ms.

    • Background Box Style: The background box style of the dialog box.

      • Background Color: the background color of the dialog box.

      • Custom Background Box Size: The width and height of the dialog box, in px.

      • Pin: the inner margin of the dialog box. Unit: pixels.

      • Horizontal Offset: the horizontal offset of the dialog box relative to the mouse arrow. Unit: px.

      • Vertical Offset: the vertical offset of the dialog box relative to the mouse arrow. Unit: px.

      • Border Color: The border color of the dialog box.

      • Border Width: the border thickness of the dialog box. Unit: pixels.

    • Text Style: The style of the text in the dialog box.

      • Color: dialog box the color of the text.

      • Font: dialog box the font family of the text.

      • Font Size: dialog box the size of the text.

      • Font weight: dialog box the font weight of the text.

    • Axis Indicator: the style of the axis indicator displayed when the trigger type of the dialog box is Axis and the trigger action is executed.

      • Type: the type of the axis indicator. Only Line Indicator is supported.

      • Line Style: indicates the color, width, and type of the line. The line type is optional, including solid, dashed, and dotted lines.

  • data series: Click the 加号图标or 垃圾桶图标icon on the right to add or delete a data series. image..png

    • Series Name: the name of the data series, which can be customized. If this parameter is empty, the system displays s field values in the component data as series names. If this parameter is not empty, you must ensure the order in which data is returned.

    • Fill Color: the fill color of bubbles in this series. For more information, see color picker description. Color fill and gradient fill are supported.

    • Border Color: the border color of the bubble.

  • Animation: the animation effect style of the chart. You can click the 眼睛图标icon to enable or disable the animation effect. image..png

    • Initial Animation Duration: the duration of the first animation rendered by the component. Unit: ms.

    • Easement Effect: the easing effect of the animation. The system provides a variety of common easing effects for you to choose from.

    • Update Animation Duration: the animation duration when the widget data is updated. Unit: ms.

Data Panel

image..png
  • x: the category of each bubble, that is, the value of the x-axis. The field type and format must be consistent with the label data type and format on the x-axis in the configuration items.

  • y: The value of each bubble, that is, the value of the y-axis.

  • r: The radius of each bubble.

  • s :(Optional) The series value. This field value is used when the series name in the configuration items data series is empty.

Table 1. Parameters
ParameterDescription
Controlled ModeIf 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 RequestAfter 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 SourceIn 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 FilterIf 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 ResultThe response to a data request. If the data source changes, you can click the Refresh icon icon next to Data Response Result to view the data response in real time.

Interaction Panel image..png

Select Enable to enable the widget interaction feature. When you click a bubble in a bubble chart, a data request is triggered, a callback value is thrown, and data of different bubbles is dynamically loaded. By default, the x, y, and s values are returned. For more information, see Configure the callback ID of a ticker board.

Configure interactions in Blueprint Editor

  1. In Canvas Editor, right-click a widget and select Export to Blueprint Editor.

  2. Click the 蓝图图标icon in the upper-left corner.

  3. In Blueprint Editor, click the Bubble Chart widget in the Added Nodes pane. You can view the parameters of the Bubble Chart widget on the canvas, as shown in the following figure. image..png

    • Event

      Event

      Description

      When the bubble chart interface request is completed

      The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data tab in the Data Response Result section of the canvas editor.

      When a data item is clicked

      The event that is thrown when you click a bubble in the bubble chart. The event also throws the data item corresponding to the bubble.

    • Action

      Policy Action

      Description

      Request bubble chart interface

      This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request bubble chart interface is { id: '1'}, the final request interface is https://api.test?id=1.

      Import a bubble chart

      After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information about specific data examples, see the Data tab in the Data Response Result section of the canvas editor.

      Highlight

      Highlight the element corresponding to the data item. The following example shows the parameters.

      return {
        "data": {},
        "options": {
          "style": {
            "stroke": "#f00",
            "fill": ""
          },
          "selectMode": "single",
          "cancelHighlightFirst": false
        }
      }

      Unhighlight

      Cancel the highlighting of the element corresponding to the data item. The following example shows the parameters.

      return {
        "data": {},
        "options": {
          "mode": "single"
        }
      }

      Clear components

      Clear component data. No parameters are required.

      Update component configurations

      Style configurations of widgets are dynamically updated. In the Configuration panel, click Copy Configuration to Clipboard to obtain the configuration data of the component. After that, change the style field for the data processing node in Blueprint Editor.

      Display

      The following example shows the widget.

      return{
        "animationType": "",
        "animationDuration": 1000,
        "animationEasing": "linear"
      }

      Hide

      The following example shows how to hide a widget:

      return{
        "animationType": "",
        "animationDuration": 1000,
        "animationEasing": "linear"
      }

      Switch to the implicit state

      The following example shows whether to show or hide a widget.

      return {
        "animationIn": {
          "animationType": "",
          "animationDuration": 1000,
          "animationEasing": "linear"
        },
        "animationOut": {
          "animationType": "",
          "animationDuration": 1000,
          "animationEasing": "linear"
        }
      }

      Move

      A widget is moved to a specified location.

          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"
            }
          }