All Products
Search

This Product

    DataV:dual-axis-line-chart

    Document Center

    DataV:dual-axis-line-chart

    Last Updated:Dec 02, 2024

    This topic describes the meaning of each configuration items when Full Select is dual axis line chart.

    Chart style

    A dual axis line chart chart is a type of line chart. Compared with a line chart chart, a dual axis line chart category corresponds to two values. It supports only two series of data configurations. It can intelligently display the two-dimensional data change trend by using a combination of lines and areas. 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: The widget is rotated around the center of the widget. Unit: 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

      • Margin: the distance between the area of the line chart and the upper, lower, left, and right borders of the widget. Unit: pixels. Default value: pixels.

      • Nullable Data: If you turn on the switch, the line passes through the point whose y-axis value is 0.

      • Maximum Load: You can specify the maximum number of input data records to be loaded. The system loads the maximum number of input data records for layout, drawing, and computing. This ensures the visual application.

      • Legend: the style of the legend. You can click the 开关图标icon to display or hide the legend.

        Parameter

        Description

        Text

        Set the style of the legend text, including the text font style, font size, font color, and font weight. For more information, see color picker instructions.

        Layout

        The positional relationship between the legends.

        • 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 coordinates of the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right.

    • Coordinate Axis: The component coordinate axes include the x-axis, y-axis, and z-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 label data. This parameter is optional.

          Parameter

          Description

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

        • Both Ends: the distance between the two ends of the space. Valid values: 0 to 1.

        • Range: the range of the maximum and minimum values of the data on the x-axis. This parameter is available only when the Data Type parameter is set to Numeric or Time.

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

        • interval: the percentage of the interval between two categories on the x-axis. A larger value indicates a larger percentage. Valid values: 0 to 1. This value is available only when Data Type is set to Category.

        • data format: data display format, valid only for time data, please configure by referring to the %Y/%m/%d %H:%M:%S format. This parameter is available only when the Data Type parameter is set to Time.

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

          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 %m/%d%Y%H:%M:%S time, integer reference d and floating point reference .1f.

          Text

          The text of the x-axis label, including the font style, font size, font color, and font weight. For more information, see the color picker description. Modify the text color.

          Axis Label Display

          The display style of the x-axis label, including:

          • Offset: the distance between the labels on the x-axis. Unit: pixels.

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

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

          • Axis Unit: the unit of the x-axis label.

        • 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

        The configuration of the left vertical axis is similar to that of the x-axis. For details, see the x-axis section.

      • Z axis

        The right vertical axis. The configuration is similar to that of the x-axis. For details, see the x-axis section.

    • Series: The component series includes Series Y and Series Z.

      Note

      By default, dual axis line chart are divided into two series, which are used to configure the data and style of the y-axis and z-axis respectively. Includes series names, polyline styles, dot styles, and area styles.

      • Series Name: the name of the series.

      • Line: the style of the line in the series.

        Parameter

        Description

        thickness

        The thickness of the line.

        Curve Type

        The type of the line. You can select Smooth Curve or Line.

        Mode

        The type of the line. You can select Solid Line, Dotted Line, or Dashed Line.

        Color

        The color of the line.

      • Dot: the style of the dot on the broken line. You can click the 开关图标icon to control the appearance and concealment of the dot.

        Parameter

        Description

        Radius

        The radius of the dot. Unit: pixels.

        Color

        The color of the dots.

      • Area: the style of the area covered by the line. You can click the 开关图标icon to control the display of the area.

        Color: the color style of the area. Color and Gradient Fill are supported.

      • Value Label: the value label style of the line in this series, including the font style, weight, font size, and color of the label text. Click the 开关图标icon to control the display of value labels.

    • Remarks

      • Ease Animation: the animation effect style of the chart. You can click the 开关图标icon to enable or disable the animation effect.

        Parameter

        Description

        Animation Settings

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

        • Sequential Animation: If you turn on the switch, the animation of each series is played in sequence. If you turn off the switch, the animation of all series is played together.

        Admission Animation

        The duration of the first animation rendered by the component. Unit: ms.

        Update Animation

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

        • Start From Previous Position: If you turn on the switch, the animation starts from the previous position when the widget data is updated. If you turn off the switch, the animation starts from the initial position when the widget data is updated.

      • dialog box: The style of the dialog box that appears when you mouse over or click a polyline dot on a preview or publish page. Click the 开关图标icon to control the display of the dialog box.

        Parameter

        Description

        Trigger

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

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

        Text Style

        The style of the text in the dialog box, including the font style, weight, font size, and color.

        Disappearing Delay Time

        When the trigger condition is not met, the dialog box will disappear. This configuration items sets the delay time before the dialog box disappears, in ms.

        Background Box Style

        The background box style of the dialog box.

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

        • Custom: the width and height of the dialog box. Unit: pixels. Click the 开关图标icon to turn custom dialog box on or off.

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

        • Offset

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

        • Borders

          • Border Size: the border size 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 dot in the line 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 the left y-axis of each dot in the line chart.

    z

    The value of the right z-axis of each dot in the line chart.

    Configure data items

    Description

    Data sources

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

    When you click a data item: Turn on the switch to enable widget interaction. When a dual axis line chart dot is clicked, a data request is triggered, and a temporary variable is thrown to dynamically load the data of different dots. By default, the x, y, and z values in the data are 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 dual axis line 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 the dual axis line chart dot is clicked, along with the data item corresponding to the dot.

      • Action

        Action

        Description

        Import dual axis line chart Interface

        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 dual axis line 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, dual axis line chart the API data source is configured as https://api.test and the data transferred to the request dual axis line chart interface is { id: '1'}, the final request interface is https://api.test?id=1.

        Highlight

        data: the data item to be highlighted. 

        {
  x: '2010/01/01 00:00:00'
}

        Reference data example

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

        Unhighlight

        data: the data item that needs to be unhighlighted. If the data field is not specified, all highlighted data is unhighlighted. 

        {
  x: '2010/01/01 00:00:00'
}

        Reference data example

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

        Clear components

        Clear component data. No parameters are required.

        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 /Hide

        Specifies whether to show or hide a widget. 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 specify this parameter, no animation is generated. 
  "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 specify this parameter, no animation is generated. 
  "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.