!!!###!!!title=Sequence Chart——VisActor/VChart tutorial documents!!!###!!!!!!###!!!description=[\[Configuration Guide\]](../../../option/sequenceChart)!!!###!!!

Sequence Chart

[Configuration Guide]

Introduction

In social media, behavior monitoring, and other scenarios, it is often necessary to display different behaviors of different users at different times in the form of nodes and edges in linear time evolution. In order to better discover users' behavior preferences, it is also necessary to display behavior statistical information in the form of bar charts. The sequence chart based on linear time mapping can display data in this scenario.

Chart Structure

The sequence chart is essentially a combination of specific series and components.

The sequence chart is a chart type used to display time series data, which can show the changes in data over time. In a sequence chart, we recommend configuring at least one pair of event link series, while the bar series can be configured with 0 or several as needed:

  • Bar Series: Represents the total count of time series data within a specific time interval in the form of a bar chart.
  • dot series: Represents events occurring at a specific time point in the form of dots.
  • link series: Represents the relationships between events in the form of edges.

Note: link series must be bound to the dot series through the 'dotSeriesIndex' attribute because its drawing data and some configurations depend on the dot series.

Sequence charts typically also include the following components:

  • Time Axis: The x-axis shared by all series, and the medium for mapping time-series data to graphic attributes.
  • Zoom Axis: When the sequence data is too dense, the zoom axis component will be bound to the time axis to "control the zoom of time."
  • Scrollbar: When there are too many parallel event series, i.e., too many categories in the y-direction, the scrollbar can be configured to "control the scrolling of the dot series and link series."

Quick Start

Key Configurations

Global configurations:

  • The appendPadding attribute is used to configure the chart's padding. It is recommended that this be configured, otherwise, the dot and link series' title will overlap with the grid.

Time Axis Configuration:

  • The type attribute is used to configure the axis type. Here, it is recommended to configure time to map time series data; note that the time axis only supports timestamp data.
  • The layers attribute is used to configure the parent and child axis configurations for the time axis, which is effective only when the axis is a time axis. The 0th item represents the parent axis, i.e., the bottom axis; the 1st item represents the child axis, i.e., the top axis. Configure the time format of the label through timeFormat. Configure the interval in seconds through tickStep.

dot series configuration:

  • The xField attribute declares the horizontal coordinate field for the dot series.
  • The yField attribute declares the vertical coordinate field for the dot series.
  • The title attribute declares the title field for the dot series; the title is located to the left of the timeline.
  • The subTitle attribute declares the subtitle field for the dot series; the subtitle is located below the title.
  • The dotTypeField attribute declares the event point grouping field for the dot series; event points in the same group have the same color.
  • The highLightSeriesGroup attribute declares the highlight group configuration for the dot series; when configuring the seriesGroupField, you can specify a specific attribute group to be highlighted.
  • The clipHeight attribute declares the visible height of the dot series.

link series configuration: The link series data depends on the event series data.

  • The dotSeriesIndex attribute declares the index of the associated dot series.
  • The fromField attribute declares the starting position field.
  • The toField attribute declares the ending position field.
  • The dotTypeField attribute declares the relationship type field.

Sequence Chart Features

Data

The sequence chart is mentioned above, including the bar series, dot series, and link series, which display different data and structures in the sequence chart.

Bar Series Data

For the bar series, it is necessary to display the total count of time series data within a specific time interval, which belongs to a type of frequency statistics, so its structure is similar to histograms.

  • Two numeric fields, such as: start_time end_time
  • One numeric field, such as: value

The data is defined as follows:

data: [
  {
    name: 'bar',
    values: [
      {
        start_time: 0,
        end_time: 10,
        value: 1
      },
      {
        start_time: 10,
        end_time: 20,
        value: 5
      },
      {
        start_time: 20,
        end_time: 30,
        value: 2
      }
    ]
  }
];

dot series data

For the dot series, it needs to display a sequence of events made up of title subTitle grid and other graphics, as well as specific events in the form of dot graphics, so it is a nested data type.

data: [
  {
    name: 'bar',
    values: [
      {
        type: 'user_did', // Event sequence type, mapping title graphic text
        id: '713019502467512xxxx', // uid / ip / did..., mapping subTitle graphic text
        dots: [
          // Event sequence array
          {
            event_time: 1662061124, // The time the event occurred, mapping
            node_name: '713019502467512xxxx_1662061124_login_device', // Node name (field name cannot be changed and must be unique, if the link series needs to be bound, the node name must correspond to the link series one by one.
            action_type: 'login_device', // Event type, mapping to dot graphic color
            children: [
              // Additional information about the event, used to display in tooltip
              {
                action_type: 'login_device'
              }
            ]
          }
        ]
      },
      {
        id: '683827422612367xxxx',
        type: 'user_did',
        dots: [
          {
            event_time: 1662321122,
            node_name: '683827422612367xxxx_1662321122_login_device',
            action_type: 'login_device',
            children: [
              {
                action_type: 'login_device'
              }
            ]
          },
          {
            event_time: 1662301120,
            node_name: '683827422612367xxxx_1662301120_registry_device',
            action_type: 'registry_device',
            children: [
              {
                action_type: 'registry_device'
              }
            ]
          },
          {
            event_time: 1662503541,
            node_name: '683827422612367xxxx_1662503541_registry_device',
            action_type: 'registry_device',
            children: [
              {
                action_type: 'registry_device'
              }
            ]
          },
          {
            event_time: 1662311121,
            node_name: '683827422612367xxxx_1662311121_login_device',
            action_type: 'login_device',
            children: [
              {
                action_type: 'login_device'
              }
            ]
          },
          {
            event_time: 1662161125,
            node_name: '683827422612367xxxx_1662161125_login_device',
            action_type: 'login_device',
            children: [
              {
                action_type: 'login_device'
              }
            ]
          }
        ]
      }
    ]
  }
];

For the link series, two fields need to be specified to specify the beginning and end of the link. Note: The start field and end field data must correspond one-to-one with the node_name data in the dot series data so that the link graphic can find the corresponding start and end positions when drawing.

data: [
  {
    name: 'link',
    values: [
      {
        from: '683827468797481xxxx_1662346668_im', // Start field
        to: '683827420033672xxxx_1662346668_im', // End field
        action_type: 'im', // Event relationship type, mapping link color
        children: [
          // Additional information about the event relationship, used to display in tooltip
          {
            action_type: 'im',
            msg_id: 800000
          }
        ]
      }
    ]
  }
];

Tooltip Configuration

As mentioned above, events or event relationships will come with some additional information,