All Products
Search

This Product

    DataV:basic-scatter-chart

    Document Center

    DataV:basic-scatter-chart

    Last Updated:Dec 02, 2024

    This topic describes the meaning of each configuration items when you select Full Scatter Plot.

    Chart style

    A basic scatter chart is a chart that uses scatter points to display data. It is suitable for displaying the differences of discrete data at different times. Basic scatter charts support custom x-axis, y-axis, and scatter styles, support multi-series data configuration, support dialog box interaction, and display animation effects. image.png

    Style Panel image.png

    • Search Configuration: Click the Search configuration items icon imagein the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

      • Size: the width and height of the widget. Unit: pixels.

      • Positioning: the x-axis and y-axis of the component. Unit: pixels. 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.

      • Rotate: Rotate the widget by degrees.

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

        • Click the imageicon to flip the widget style.

        • Click the imageicon to flip the widget style.

      • Opacity: Valid values: 0 to 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 name

      • Custom Margins: Click the 开关图标icon to specify the custom margins. The distance between the scatter plot area and the four boundaries of the widget. Unit: px.

      • Scatter Style: the style of the scatter.

        Parameter

        Description

        Size

        The size of the scatter.

        The color of the font outline. For more information, see Color setting parameters.

        The color of the scatter's stroke.

        Stroke Weight

        The stroke weight of the scatter.

        Stroke Type

        The stroke type of the scatter. You can select Solid, Dashed, or Dotted.

        Fill Transparency

        The transparency value of the inner fill color of the scatter. Valid values: 0 to 1.

      • Value Label: the style of the value labels in a basic scatter chart. You can click the 开关图标icon to control whether the value labels are visible or hidden.

        Parameter

        Description

        Text Style

        The font style, text weight, font size, and color of the value label text.

        Offset

        The offset value of the value label in the horizontal and vertical directions.

      • Legend: the legend style of a basic scatter chart. You can click the 开关图标icon to display the legend.

        Parameter

        Description

        Allow Page Turning

        If the switch is turned on, page turning can be allowed when the number of legends is too large to be arranged; if the switch is turned off, page turning cannot be allowed.

        Layout

        The position of the legend in relation to the start coordinates of the widget. You can select Top Left, Top Center, Top Right, Bottom Left, Bottom Center, or Bottom Left.

        Legend Tags

        The style of the legend tag, including the shape style and size of the legend.

        Legend Text

        The style of the legend text, including the font style, text weight, font size, and color of the legend.

    • Coordinate Axis: The component coordinate axes can be x-axis or y-axis.

      • X Axis

        • X Axis Visible: If you turn on the switch, the x-axis style in the widget is visible. If you turn off the switch, the x-axis style in the widget is invisible.

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

          Parameter

          Description

          Numerical Type

          Supports numeric data such as integers and floating-point numbers.

          Category Type

          Data of category types such as character and string is supported.

          Time Type

          The data of the time type needs to be configured data format.

        • Axis Label: the axis label style of the x-axis of a basic scatter chart. You can click the 开关图标icon to specify whether the axis labels are displayed or hidden.

          Note

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

          Parameter

          Description

          Display Format

          The data format you want to display. This field is valid only for time-based and numeric data. Please refer to YYYY/MM/DD HH:mm:ss time, integer reference d and floating point reference .1f.

          Text Style

          The font style, weight, font size, and color of the x-axis label text.

          Custom Quantity

          The number value displayed by the x-axis label. You can click 开关图标the icon to specify the number of x-axis labels.

        • Axis Title: the axis title style of the x-axis of a basic scatter chart. You can click the 开关图标icon to display or hide the axis title.

          Parameter

          Description

          Title Content

          The text content of the x-axis title.

          Offset

          The offset value of the x-axis title. Unit: px.

          Text Style

          The font style, text weight, font size, and color of the x-axis title text.

        • Axis: the style of the x-axis. You can click the 开关图标icon to display the x-axis.

          Color: the color of the x-axis.

        • Gridlines: the style of the x-axis gridlines. You can click the 开关图标icon to display or hide the x-axis gridlines.

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

      • Y-axis

        • Y Axis Visible: If you turn on the switch, the y-axis style in the widget is visible. If you turn off the switch, the y-axis style in the widget is invisible.

        • Custom Range: the range of the minimum and maximum values of the y-axis. You can click the 开关图标icon to specify a custom range.

          Parameter

          Description

          Minimum value

          The minimum value of the y-axis. You can customize the value or select the value.

          • 0: The default minimum value is 0.

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

          Maximum value

          The maximum value of the y-axis. You can specify a custom value. You can also select Maximum Data Value to obtain the maximum value in the data.

          Note

          If you enable the custom data range for the y-axis, the data points may not be displayed completely. We recommend that you disable the custom data range.

        • Display Format: the display format of the y-axis label value. You can select Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%, 11.1%, or 11.11%. For more information about data display formats, see Data display formats.

        • Axis Label: the style of the y-axis label. You can click the 开关图标icon to display or hide the y-axis label.

          Parameter

          Description

          Text Style

          The font style, text weight, font size, and color of the y-axis label text.

          Custom Quantity

          The y-axis label displays the quantity value. You can click the 开关图标icon to specify the number of y-axis labels.

        • Axis Title: the style of the y-axis title. You can click the 开关图标icon to display or hide the y-axis title.

          Parameter

          Description

          Title Content

          The text content of the y-axis title.

          Offset

          The offset value of the title on the y-axis. Unit: px.

          Text Style

          The font style, text weight, font size, and color of the title text on the y-axis.

        • Axis: the style of the y-axis. You can click the 开关图标icon to display the y-axis.

          Color: the color of the y-axis.

        • Gridlines: the style of the y-axis gridlines. You can click the 开关图标icon to display or hide the gridlines.

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

    • Edition

      • CSV Data: If you turn on the CSV Data switch, you can directly use CSV columns to map values and data series. If you turn off the Series Mapping switch, the configuration items takes effect. You can click the 开关图标icon to display or hide the CSV data switch.

        Parameter

        Description

        Automatic field parsing

        If you turn on the switch, the widget uses CSV data to automatically parse and display the fields. If you turn off the switch, the fields are not automatically parsed.

        Only numeric fields

        If you turn on the switch, CSV data is parsed only for fields of the data type. If you turn off the switch, CSV data is automatically parsed for all fields.

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

        Parameter

        Description

        Mapping Field

        Column Name /Field Name and Series Name configuration items. This parameter takes effect only when you turn on CSV Data and turn off Auto Parse Field configuration items.

        • Column Name /Field Name: the data series field value. You can customize the field value. If the field is empty, the system displays the s field value in the widget data as the series field value. 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 series, which can be customized.

        Series S Value and Series Display configuration items take effect only when CSV Data is hidden and the Series Mapping configuration items switch is turned on.

        • Series s Value: the data series mapping value, which can be customized. If the field is empty, the system displays the value of the s field in the widget data as the series field mapping value. If this parameter is not empty, you must ensure the order in which data is returned.

        • Series Display: the display name of the data series, which can be customized.

        Fill Color

        The fill color of the basic scatter plot in this series.

      • Series Mapping: If you turn on the switch, the switch takes effect when the data contains series s values. You can use the Mapping Field to set the color of a specific series. If you turn off the switch, the Mapping Field configuration items is disabled.

    • Remarks

      • Interaction Enhancement for Large-scale Data: If a basic scatter chart contains too much data, you can set the data interaction enhancement style. You can click the 开关图标icon to enable or disable the interaction enhancement effect.

        Parameter

        Description

        How to run the commands

        The mode of data interaction. You can select Sum Axis or Scroll Bar.

        Note

        If the data type is time data, the feature of exchanging large amounts of data is not supported.

        Default Range

        The range of data displayed on the thumbnail axis. The range can be from 0 to 1. This option is available only when the thumbnail axis style is enabled.

        Mode

        The thumbnail axis foreground and background colors. This option is available only when the thumbnail axis style is enabled.

        Direction

        The direction in which the scroll bar is arranged, including Horizontal and Vertical. This option is available only when the Scrollbar style is enabled.

        Type Width

        The width of the data category column. This option is available only when the Scrollbar style is enabled.

      • dialog box: the style of the dialog box that appears when you move the pointer over or click a hash on the preview or publish page. You can click the 开关图标icon to turn the dialog box on or off.

        Parameter

        Description

        Indicator

        Indicates the style of the indicator, including the width, color, direction (cross, horizontal, and vertical ), and type (solid line, dotted line, and dotted line) of the indicator. Click on 开关图标the icon to turn the indicator on or off.

        Background Box Style

        The background box style of the dialog box.

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

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

        • Borders

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

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

    Data Sources panel image.png

    Column

    Description

    x

    The category of each scatter point in the basic scatter chart, 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 scatter point in the basic scatter chart, that is, the value of the y-axis.

    s

    Optional. The series value. The mapping field in the configuration items data series must match the s field.

    Configure data items

    Description

    DataSource

    You can use the code editor or visual editor to view the data fields contained in the widget. You can also modify the Data Type parameter to flexibly configure the component data.

    Data Mapping

    If you need to customize chart field configurations, you can set different field mapping content in the Data Mapping module and field mapping these content to the corresponding fields of the widget. This allows you to match data without modifying the fields in the data source. You can also click the imageicon to configure the field style.

    Configure a filter

    Turn on Filter, select an existing data filter or create a data filter, and configure a data filter script to filter data. For more information, see Manage data filters.

    Data Response Result

    The Data Response Result section displays widget data in real time. If the data source of the widget changes, this section displays the latest data. If the system response is delayed, you can click the imageicon on the right to view the data response result. You can also click the imageicon on the right to obtain the latest data of the widget. You can also click View Example to view an example of the response result of the current component.

    Forbid Loading

    If you select the check box, you will not see the loaded content during component initialization when you update the component and preview the data kanban. If you select the check box, the opposite is true. By default, the status is deselected.

    Controlled Mode

    If you select the check box, the component does not request data in the initialized state, and only requests data by using global variables or the method configured in Blueprint Editor. If you clear the check box, you can use automatic update to request data. By default, the status is deselected.

    Auto Data Request

    Select the check box to manually enter the time frequency of polling to set dynamic polling. If you clear the page, the page is not automatically updated. You need to manually refresh the page or use Blueprint Editor and global variable events to trigger a request to update data.

    Advanced Panel image.png

    Interaction Occurrences

    Description

    When a data item is clicked

    Turn on the switch to enable the widget interaction feature. When you click a hash point of a basic scatter chart, a data request is triggered, and temporary variables are thrown to dynamically load the data of different polyline data points. By default, the x, y, and s values in the data are displayed. For more information, see Component interaction configuration.

    When you click the legend

    Turn on the switch to enable the widget interaction feature. When you click the legend of a basic scatter chart, a data request is triggered, temporary variables are thrown, and different data is dynamically loaded. By default, the value value in the data is displayed. For more information, see Component interaction configuration.

    Blueprint Interaction

    1. Click the imageicon in the upper-left corner to go to the Blueprint page.

    2. On the Layer Nodes tab, add the widget to the main canvas.

    3. View blueprint configuration parameters. image.png

      • Event

        Event

        Description

        When the scatter 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 Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

        When a data item is clicked

        The event that is raised when a hash point in a basic scatter chart is clicked, and the data item corresponding to the dot is also raised.

        When you click the legend

        The event that is raised when the legend of a basic scatter chart is clicked, and the data item corresponding to the legend is also raised.

      • Action

        Action

        Description

        Import a scatter 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 Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.

        Request Scatter Chart API

        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 set to https://api.test and the data passed to the Request Scatter Chart API is set to { id: '1'}, the final request interface is https://api.test?id=1.

        Highlight

        data: the data item to be highlighted. 

        {
  x: 'Inner mongolic'
}

        Reference data example

        {
  "data": {},
  "options": {}
}

        Unhighlight

        This action enters the full screen mode and does not need parameter input.

        Move

        Move a widget to a specified location. For more information, see the data example. 

            {
      // 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 animation delay. Unit: milliseconds. 
        "animationDuration": 1000,
        // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. 
        "animationEasing": "linear"
      }
    }

        Switch Display /Display

        Toggles whether the widget is displayed or hidden. No parameters are required.

        Display

        Display the widget. For more information, see Data example. 

        {
  "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

        Hide

        Hide the component. For more information, see Data example. 

        {
  "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. 
  "animationDuration": 1000,// The animation delay. Unit: ms. 
  "animationEasing": ""// animation curve
}

        Update component configurations

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