You can use the periodisation diagram widget to plot and visualise spans across time, for example, when you want to visualise a season plan or tournament schedule.

A screen recording showing an example of the periodisation diagram widget used for season planning

The diagram is comprised of timeline tracks at the top, and is then populated by either custom tracks, determined in the dashboard builder, or event tracks, populated with data from an event form, or both. The widget can display multiple custom and event tracks, and multiple fields within each event track.

In the sidebar

A screenshot showing the sidebar for the periodisation diagram widget

Use the periodisation diagram widget sidebar to access and set the general properties, add instructions, choose timeline settings, add and customise tracks, update the styling and specify advanced properties.

A screenshot showing an example of the general properties for the periodisation diagram widget

General: use the general properties of the sidebar to add descriptive information for your periodisation diagram. You can also:

  • Choose whether the title of the widget should be displayed. If you enable this, then you can provide a title and icon for the widget and specify the font size, font colour and text alignment.
  • Choose whether a subtitle for the widget should be displayed. If you enable this, then you can add a subtitle for the widget and specify the font size, font colour and text alignment.
  • Specify the widget width within the section where it appears.
  • Choose the background and border colour for the widget.

A screenshot showing an example of the instructions properties for the periodisation diagram widget

Instructions: use the instructions property to add static informational content that explains or describes what the periodisation diagram displays or how it’s used.

A screenshot showing an example of the timeline properties for the periodisation diagram widget

Timeline: choose which timeline tracks to display by default in the widget. To customise the timeline tracks, you can:

  • Select the default timeline tracks using the enable year, enable month, enable week and enable day track toggles. When viewing the dashboard, people can use the Timeline drop-down menu to customise their display, as shown below.

A screen recording showing an example of the timeline selector for the periodisation diagram

  • Choose whether the week date range should be displayed within the week track.
  • Choose whether to display the day name, date, or both in the day track by using the show day name and show date toggles.
  • Select how dates should be formatted.
  • Select the default zoom level of the diagram to determine the timeline granularity. The widget is infinitely horizontally scrollable, so the zoom level allows you to set the widths of the time rows for optimal viewing. The selected option will be the default when the dashboard is viewed, though people will have the ability to change the zoom level themselves using the drop-down button at the top right of the diagram, as shown below.

A screen recording showing an example of the zoom selector for the periodisation diagram

Note: some cells in the diagram are bolded. These indicate today’s date. You can jump back to today’s date by clicking the Today button at the top right of the diagram.A screenshot showing an example of the tracks properties for the periodisation diagram widget

Tracks: chose whether to set up each track as a custom track or populate it from an event form.

Custom tracks

A screenshot showing an example of a custom track within the periodisation diagram widget

Use the custom track type when you want to specify the track name and set its blocks up manually. When you use this track type, you’ll be able to see the Blocks settings.

  • Provide a track name.
  • Specify a default colour for blocks within the track.
  • Choose whether the block colour should colour down other tracks and which track it should colour down until. This makes it easy for people to visually group which information is associated with each track you’ve set up.
  • Use the Blocks settings to add one or more blocks.

A screenshot showing an example of a custom track's block settings within the periodisation diagram widget

  • Use each block’s General settings to:
    • Select the start and end date for each block.
    • Provide a block name.
  • Use each block’s Style settings if you want to override the default block colour.

Event tracks

A screenshot showing an example of an event track within the periodisation diagram widget

Use the event track type to pull data from multiple fields in an event form through to the event track. When you use this track type, you’ll be able to see the Fields settings.

  • Choose the data source for the track.
  • Set filters for the data that will populate the track.
  • Choose the fields from your data source that will determine the start and end date for each block.
  • Select the viewing mode for the track:
    • Summary mode shows the selected event fields only once, assuming that the data captured for all athletes is the same. This mode is useful when you want to display information that is the same for an entire team or group – for example, season plans and game days.
    • Breakdown mode should be used when the information captured for all athletes is the same, but their values might differ. It shows the selected event fields broken down by each unique value for one chosen field. This could be useful if you want to display individual training data or race days for individual athletes. If breakdown mode is selected, a group by field will need to be selected to determine how the track is grouped.
  • Use the Fields settings to add one or more event form fields as lanes.

A screenshot showing an example of an event track's general settings within the periodisation diagram widget

  • Use each field’s General settings to add lanes within the track that are populated by the data source:
    • Choose the field from your data source which will be displayed in the block.
    • Choose the data type (number, string or date).
    • Provide a lane label which will be displayed in the header column.
    • Choose to hide the lane if there is no data.
    • Decide whether adjacent blocks should be aggregated, and if so, which aggregation is the most appropriate for the block data. Each record of an event form will be plotted individually on the timeline, however there may be multiple records on consecutive days that have the same data. In this instance, it might be best to aggregate the blocks to visually display them as a continuous block. When you enable aggregate blocks, you need to select which field to aggregate over. The blocks will then be aggregated, or merged, until the data in that field changes.
    • Choose to hide or show blocks with no value.

A screenshot showing an example of an event track's style settings within the periodisation diagram widget

  • Use each field’s Style settings to select the block colouring method. Here, you can use the block colouring setting to:
    • Colour all blocks within the lane the same.
    • Automatically colour the blocks so that each unique block will be coloured differently.
    • Conditionally colour blocks based on a ruleset.
    • Blocks that are automatically or conditionally coloured will need a field selected to colour the values by.
    • Block colours can be filled down using the colour region down toggle.

A screenshot showing an example of an event track's interaction settings within the periodisation diagram widget

  • Use each field’s Interaction settings to help people interact with the periodisation diagram.
    • When record cards are enabled, the card fields selected under tooltip and card fields will be shown in a pop-up screen.
    • Record click-through can only be enabled when the record card property is also enabled. This allows people to navigate from a record card to the event form record that the relevant data is sourced from. Interaction is on a per row basis.

Note: Overlapping blocks will appear underneath each other.

A screenshot showing an example of the style properties for the periodisation diagram widget

Style: you can format the appearance of a periodisation diagram using the style properties. These allow you to adjust:

  • The pane background colour. The pane refers to the timeline tracks and the header column of the diagram.
  • The text colour for the pane.
  • The plot area colour. The plot is the area behind the tracks themselves.
  • The grid line colour.
  • The colour of the today marker, which is the line through the tracks displaying the current day.

A screenshot showing an example of the advanced properties for the periodisation diagram widget

Advanced properties: use the advanced properties for customising your periodisation diagram further. The advanced properties for the periodisation diagram allow you to:

  • Specify the maximum diagram height. This is measured in pixels.
  • Choose the header width.

Was this page helpful?