Timeline

Chart style

The Timeline widget supports custom node label styles, event node styles, and interactions, and is suitable for displaying data changes across different time periods. For example, you can use a timeline to implement data carousel.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration item to locate it. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis of the component, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The rotation angle of the widget around its center, in degrees.

    • Enter the degrees in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • Click the icon to flip the widget horizontally.

    • Click the icon to flip the widget vertically.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 makes the widget fully visible. Default value: 1.

• Global Style

  Parameter	Description
  Font	The font of text in the timeline widget. Default value: Microsoft YaHei.
  carousel	When enabled, event nodes rotate repeatedly. When disabled, event nodes rotate only once.
  Health Check Interval	The duration of the transition from one event node to another.
  dwell time	The duration that the animation pauses on an event node.
  Left and Right Margins	The horizontal distance between the first event node and the left border, and between the last event node and the right border. We recommend that you do not set a value larger than half the width of the timeline widget.

• Event Node

  • Data Type: the type of the event nodes. Valid values: Numeric, Category, and Time.

  • Data Format: the format of data. For example, assume that the data is 1982-02-01 17:09. You must set the data format to %Y-%m-%d %H:%M. This parameter appears only when the Data Type is set to Time.

  • Shape: the shape of the event nodes.

  • Node size: the size of the event nodes.

  • Default Style: the style of the event nodes that are not selected.

    Parameter	Description
    Node Fill Color	The fill color of the event nodes that are not selected. For more information, see Color picker.
    Node border color	The border color of the node. For more information, see color picker description.
    Node Border Size	The border width of the event nodes that are not selected.

  • Selection Style: the style of the event nodes that are selected.

    Parameter	Description
    Node Fill Color	The fill color of the event nodes that are selected. For more information, see Color picker.
    Node border color	The border color of the selected node. For more information, see color picker description.
    Node Border thickness	The border width of the event nodes that are selected.

• node tag-Down

  Parameter	Description
  Up and Down Offset	The distance between the lower labels and the middle axis.
  Rotation Angle	The rotation angle of the lower labels.
  Default Style	The default font size, color, and font weight of the node tag.
  Selected Style	See the settings in the Default Style parameter.

• Upper Label: See the settings in the Lower Label parameter.

• Background information

  Parameter	Description
  thickness	The line width of the middle axis.
  Default Style	The default color of the middle axis.
  Selected Style	The color of the middle axis section when the corresponding event node is selected.

Data Sources panel

Advanced Panel

Turn on the switch to enable the associated global variable feature. When the timeline changes, data requests are triggered, temporary variables are emitted, and data for different events is dynamically loaded. By default, the value field in the data is emitted. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon 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.

   • Event

     Event	Notes
     When the data interface request is completed	Triggered with the processed JSON data after a data interface request is responded to and processed by a filter. For 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 the current value changes	Triggered when the current value changes, along with the data item corresponding to the value. See the data example. { "value": 2019 }

   • Action

     Action	Notes
     Import data	After widget data is processed in its drawing format, the widget is imported for redrawing without requesting server data again. See the data example. [ { "name": "2019", "text": "Event 1", "value": 2019, "width": 125, "height": 38 } ]
     Request Data Interface	Requests 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 transferred to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Move To	Moves to an event node and emits a callback value. See the sample data. { "value": 2019 }
     Stop carousel	Stops the timeline carousel. No parameters are required.
     Start carousel	Starts the timeline carousel. No parameters are required.
     Move	Moves a widget to a specified location. 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 duration in which animation is displayed. "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	Displays the widget. See the 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	Hides the component. See the 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	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. Then, change the style field for the data processing node in Blueprint Editor.

Case demonstration

This example uses the timeline carousel feature to create a countdown that dynamically displays review content for each stage of the college entrance examination.

1. Log on to the DataV console.

2. Select a dashboard and click Edit to go to the Canvas Editor page.

3. Add the Timeline, Countdown, and Image widgets to the canvas.

4. Click the timeline and select Data Source to modify static data.

   [
     {
       "name": "2024-04-01 00:00:00",
       "value": 20240401,
       "text": "First round-Foundation consolidation"
     },
     {
       "name": "2024-05-01 00:00:00",
       "value": 20240501,
       "text": "Second round-Answer skills"
     },
     {
       "name": "2024-06-01 00:00:00",
       "value": 20240601,
       "text": "Third round-Summary promotion"
     },
     {
       "name": "2024-07-15 00:00:00",
       "value": 20240715,
       "text": "The fourth round-self-transcendence"
     },
     {
       "name": "2024-08-07 00:00:00",
       "value": 20240807,
       "text": "College Entrance Examination"
     },
     {
       "name": "2024-09-25 00:00:00",
       "value": 20240925,
       "text": "College Entrance Examination-Application"
     }
   ]

5. Select the Style panel to modify the gap and dwell time.

6. Select a single image and a countdown, and right-click Group.

7. Similarly, make a total of 6 similar groups, number them and hide them.

8. Click a single image, select a style panel, and replace the content of the six images in sequence.

9. Click the icon in the upper-left corner to go to the Blueprint page.

10. On the Layer Nodes tab, add six countdown, six groups, and a total of 13 timelines to the main canvas.

11. On the Logical Nodes tab, add a multipath judgment node, five sequence execution nodes, and a timer node to the main canvas.

12. Connect components.

13. Configure the processing method for each node.

    • Multi-way judgment

      return data.value == '20240401';//case-1
      return data.value == '20240501';//case-2
      return data.value == '20240601';//case-3
      return data.value == '20240715';//case-4
      return data.value == '20240807';//case-5
      return data.value == '20240925';//case-6

    • Sequential execution: A total of six anchor points are displayed. The processing method for displaying anchor points is the same as in the example, and the delay is unchanged by default. Two connections are displayed, one is the display action position of the group node, and the other is the import data position of the countdown node. Delays the start of the direct connection timer.

      return [{ "endTime": data.name }]

    • Timer: Set the delay time to 1.5 seconds, and the hidden action of the backend connection group node.

14. Click Preview in the upper-right corner to preview the results.