You can add one or more timelines to a project for users to view data obtained during different time periods.

Usage: You can use a timeline to display data in a loop by setting the loop parameter to an interaction field in the interaction pane. To hide the timeline, move it outside the canvas or set all colors to transparent.

Style

  • Basic Attributes
    • Size: Set the size of the widget by adjusting its width and height.
    • Position: Set the position of the widget by adjusting its abscissa and ordinate.
    • Others: Set the rotation angle and opacity of the widget.
  • Global Settings
    • Font Family: To set the font of the displayed text, click the drop-down arrow and select the target font. The default font is Microsoft YaHei.
    • Loop: If you select this option, the event nodes are displayed in a looped sequence. If you clear this option, the event nodes are displayed only once.
    • Duration: You can set the time interval between the display of two event nodes.
    • Stop Time: You can set the time for which a node is displayed.
    • Padding: You can set the horizontal spacing between the event nodes and the borders as needed. We recommend that you set the spacing smaller than half the width of the outline.
  • Node
    • Category: To change the event node category, click the drop-down arrow and select the target category. The category can be Numeric, Category, or Time. The following two figures show the Numeric and Category event nodes.


    • Data Format: This option is displayed only after you set Category to Numeric. You need to set this option according to the data. For example, if the data is 1982-02-01 17:09, you need to set this option to %Y-%m-%d %H:%M.

    • Shape: To change the node shape, click the drop-down arrow and select the target shape.
    • Node Size: To change the node size, enter a value, or click + .
    • Default Style: Default style of the nodes.
      • Node Fill Color: To change the fill color of the nodes, see Color picker.
      • Stroke Color: To change the color of the node outlines, see Color picker.
      • Stroke Width: To change the width of the node outlines, enter a value, or click + or .


    • Selected Style: Style of the displayed nodes.
      • Node Fill Color: To change the fill color of the nodes, see Color picker.
      • Stroke Color: To change the color of the node outlines, see Color picker.
      • Stroke Width: To change the width of the node outlines, enter a value, or click + or .


  • Label Bottom
    • Offset: You can adjust the margin between the bottom labels and the axis line as needed.

    • Rotate: To change the rotation angle of the bottom labels, enter a value, or click + or .
    • Default Style
      • Font Size: To change the font size of the label text, enter a value, or click + or .
      • Color: To change the font color of the label text, see Color picker.
      • Font Weight: To change the font weight of the label text, click the drop-down arrow and select the target font weight.
    • Selected Style: To set the style of the selected nodes, see the settings of the default style.
  • Label Top: To set the top labels, see Label Bottom.
  • Background
    • Width: You can set the width of the axis line as needed.
    • Default Style: To change the default color of the axis line, see Color picker.
    • Selected Style: To change the color of the displayed axis line, see Color picker.


  • Interaction: You can set the callback ID of the widget as needed.
    Notice The interaction function has been migrated from the Configuration pane to the Interaction pane. Please upgrade your widget as soon as possible.

Data



  • name: bottom label text, that is, text under the axis line
  • text: top label text, that is, text above the axis line
  • value: value that corresponds to a node. If the value is a date, you need to set the data format in the configuration pane.

  • width: width of a label. By default, this field does not need to be set.
  • height: height of a label. By default, this field does not need to be set.

Interaction

To enable the interaction function, select Enable. For more information, see Configure callback IDs for ticker boards.