Time Series Chart Widget

You can use the Time series chart widget to plot chronologically ordered data. This chart can display data from one or more series. Each series can come from the same data source or from different data sources.

The two examples here use time series charts to display similar data for the same athlete in two different ways. The first is less detailed so that coaching and support staff can quickly interpret the athlete’s body mass and skinfold data for the last year. The second has information more useful for a nutritionist or anthropometrist – body fat percentage and the skinfold test results for each relevant area of the athlete’s body.

Use the sidebar to configure the time series chart widget

Select the Time series chart widget to display the settings in the sidebar. These settings include:

• General
• Instructions
• Series
• X-axis
• Y-axis and Y2-axis
• Tooltip
• Legend
• Custom gridlines
• Region
• Interaction
• Advanced properties
• Data preview
• Trellis

General

Use the General properties of the sidebar to add descriptive information for your time series chart widget. You can also:

• Choose whether the title of the widget should be displayed. If you enable this, then you can provide a Title and Title icon for the widget and specify the font size, font color 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 color and text alignment.
• Specify the Width of the widget within the section where it appears.
• Choose the Background color and Border color for the widget.

Instructions

Here you can add static informational content which will appear below the title of the widget. This can include text, images, tables, links and other common content tools. 

Series

Populate the chart from your data sources using the Series properties. For each series, you can:

• Provide a Series name.
• Specify a Color for the series.
• Choose the Data source for the series.
• Choose the Field from your data source which will be displayed in the series.
• Choose the Time field from your data source. This will default to the event form Date, but can be changed to any date or time field within the data source.
• Set filters for the data that will populate the series.
• Decide which Aggregation is the most appropriate for the column data.
• Choose the series display type (line, bar, spline, area, area-spline, scatter). When deciding how to display data, you should take into account what the data represents. If the data is discrete, then using the bar or scatter display can communicate information to the reader more effectively. If the data is continuous or ordered, then it may be helpful to use the line, spline, area or area-spline format.
• Use the Advanced settings for each series to further specify its appearance and behavior:
  • Specify the number of Decimal places that shown be shown.
  • Choose whether the series should be displayed on the Y2-axis (the default behavior is for the series to display on the Y1-axis).
  • If the series uses the bar display type, you can choose to make it part of a stacking group by selecting a Stacking group number. This allows you to group together any series that you want to be stacked. Each stacking group will be stacked as its own bar. The ordering of series within each group is controlled from the advanced properties.
  • Choose which fields from the data source for the series will appear in the record card when a data point on this series is selected.
  • Choose whether the series should be shown in the legend for the chart.
  • If you’ve chosen a line or spline display type for a series, you can choose to use solid or dashed Line style.
  • Enable or disable data labels for the series.

X-axis

Specify how the horizontal axis of your time series chart should appear and behave using the X-axis properties, which allow you to:

• Provide an Axis label, which will appear below the X-axis, center-aligned.
• Select the Time input format. You can choose from the standard DD/MM/YYYY or a Custom date or time format.
  • If you elect to use a Custom time input format, you’ll also need to specify the Custom tick format using the appropriate time format directives. For example, use %H:%M:%S to reference time in the format hh:mm:ss, or %m/%d/%Y to display a date in US format. This will typically be the same as your Custom time input format, but can be different if you’d like to display it in a different format to how it’s been collected.
  • Using the time format directives linked above, here are some examples of time input formats and their outputs for inspiration:
    

    Input	Output
    %d/%m/%Y	20/01/2000
    %d/%m/%y	20/01/00
    %m/%d/%Y	01/20/2000
    %d/%m	20/01
    %a, %d/%m	Thu, 20/01
    %M:%S.%L	30:00.000
    %H:%M:%S	14:30:00
    %I:%M:%S %p	2:30:00 PM
    %I:%M %p %A %B %d %y	2:30 PM Thursday, January 20 2000

• Choose a Tick format to show the dates in a way readers of the dashboard are most familiar with.
• Specify the maximum number of ticks that should appear on the X-axis. This setting has no effect unless the tick fit setting (below) is disabled.
• Specify the rotation of the tick text (date) which appears below the X-axis.
• Choose to enable the Tick fit setting. When enabled, the tick marks will align with the data points shown in the time series chart. When disabled, ticks are spaced evenly on the X-axis.
• Enable or disable vertical axis gridlines. These appear using a dashed line style and correspond with the position of tick marks on the X-axis.
• Specify the Axis stroke color. This affects the color of the horizontal axis line and the tick marks for each date.
• Specify the Tick label color. This affects the color of the tick text (dates).
• Specify the Axis label color. This affects the color of the axis label (if you have included one) and the series names as they appear in the chart legend (if you have enabled the legend). 

Y-axis and Y2-axis

Specify how the vertical axes of your time series chart should appear and behave using the Y-axis (main axis) and Y2-axis (secondary axis) properties, which allow you to:

• Choose whether to enable or disable the Y or Y2-axis. If you disable a Y-axis, none of the properties below will have any effect as the axis won’t be visible.
• Provide an Axis label, which will appear outside the axis, vertically aligned to the center of the axis.
• Set the tick format, which is the number of decimal places that the tick text should include.
• Set a maximum value for the axis. If you do not provide a value here, the largest value for the axis will be set automatically based on the range of data included in the chart.
• Set a minimum value for the axis. If you do not provide a value here, the smallest value for the axis will be set automatically based on the range of data included in the chart.
• Choose a Tick count. This allows you to manually set the number of tick marks shown on the axis. The number of tick marks includes the tick at the base of the axis (at 0 if the axis minimum is 0).
• Enable or disable horizontal axis gridlines (Y-axis only). These appear using a dashed line style and correspond with the position of tick marks on the axis.
• Set the padding for the top of the axis. This allows you to create more space at the top of the axis without affecting the maximum value for the axis. The top padding value is measured in pixels.
  

  If any of the series in your chart have data labels enabled (found in the Advanced settings of the Series properties), we recommend setting padding for the top of the axis. If no padding is set, the data labels might be cut off when viewing the dashboard.

• Set the padding for the bottom of the axis. This allows you to create more space at the bottom of the axis without affecting the minimum value for the axis. The bottom padding value is measured in pixels.
• Specify the Axis stroke color. This affects the color of the vertical axis line and the tick marks on it.
• Specify the Tick label color. This affects the color of the tick text.
• Specify the Axis label color. This affects the color of the axis label, if you have included one.

Tooltip

If you want to provide more context for the people reading the chart, you can enable tooltips. These display the data value for each point on the chart when the reader hovers over it or taps it. If you have more than one series on your chart, you might want to group tooltips. This setting combines the tooltip for series according to the date they appear for.

Legend

You can use a legend to give the reader more information about the data included in the chart. If required, you can adjust the legend content by choosing which series should be included in the legend (use the properties for each series to do this). Use the Legend properties to enable or disable a legend for your chart and to choose the Legend position (if enabled).

Custom Gridlines

You can add horizontal gridlines to your chart that are independent of the axis gridlines. These can be based on either absolute values or they can use an aggregated value that’s based on series data. These can help the reader understand how the data in the chart compares to strength standards, for example, or risk zones. For each custom gridline you can:

• Provide a Label for the gridline.
• Specify a Color for the gridline.
• Choose a Value type for the gridline. There are two options here:
  • Aggregate series data: if you choose to use an aggregate value that’s based on one of the series in the chart, then you’ll also need to specify the type of Aggregation and which series you want to use.
  • Custom value: if you want to set a specific value, you can choose this option and add a number to the Custom value field.
• Choose a position on the chart for the gridline label (start, middle, or end).
• Choose whether the gridline should be plotted on the Y2-axis (the default behavior is to plot custom gridlines using the Y-axis).

Regions

If you want to color specific background areas on a time series chart, you can do so using the Regions properties, which allow you to:

• Specify a Color for the region.
• Provide a Start value for where on the vertical axis the region should begin.
• Provide an End value for where on the vertical axis the region should finish.
• Choose whether to plot the region on the Y-axis or the Y2-axis.

Interaction

If you want to provide users with more information about the data displayed in a time series chart, you can set up different interactions using the Interaction properties.

There are four interactions you can enable for a time series chart widget – record cards, record click-through, zoom and subchart.

• Record cards: when record cards are enabled, then the card fields that are set for each series will be shown in a pop-up screen.
• Record click-through: this property can only be enabled when the record card property is also enabled. Turning on record click-through means that people can navigate from the record card to the event form record that the relevant data is sourced from. If multiple records are shown in the record card (for example, when data from a group of athletes is shown in the chart), then the user will need to select a specific record from the record card before clicking through to that particular record.
• Zoom: the zoom function lets people take a closer (or broader) look at chart data using the scroll or pinch ability of their mouse, trackpad or touch screen.
• Subchart: this property can only be enabled when zooming behavior is also enabled. A subchart shows people a smaller version of the chart at its full extent, which means they can easily see how far they’ve zoomed into a chart and the context for the magnified data they’re looking at.

Advanced Properties

Use the Advanced properties for customizing your chart further. The advanced properties for the time series chart widget allow you to:

• Specify the Chart height (px).
• Choose whether null data points should be connected. This is only applicable for series that are plotted using line or spline display type.
• Choose how the bar width should be decided for series that are plotted using the bar display type. You can use auto mode, set a specific bar width (measured in pixels) or choose a ratio.
• Choose whether to rotate the chart axes. This switches the horizontal and vertical axes.
• Select a Stacking order. If there is more than one series in your time series chart that uses the bar display type, you can choose the order that you want them to be stacked. Any bar type series that have a stacking group specified in the series properties will be stacked by group number first and then by the stacking order you set here.
• Choose whether to Show series markers. These are displayed as a dot for each data point, regardless of the display type chosen (e.g. line, area, bar).
• Specify the Series marker size. This is measured in pixels and has no effect if series markers are disabled.
• Specify the line width for series that use the line or spline display type.
• Specify the Area fill opacity (%) for series that use the area or area-spline display type.
• Specify the Series marker opacity (%). This has no effect if series markers are disabled.
• Choose whether to Normalize stacked bars. If you enable this option, then the value of each series shown in a stacked bar is converted to a percentage.
• Specify a font size for chart labels. This is measured in pixels and affects all text included in the chart, such as the axis labels, tick labels, gridline labels, and data labels.
• Specify a padding value for the bottom of the chart. This is measured in pixels and creates additional space between the horizontal axis and the lower boundary of the time series chart widget.
• Hide the widget if no data is available (based on data source and filter settings).

Data Preview

The time series chart has properties that allow you to choose how you want to preview your chart. When using the dashboard builder, you’re not able to view real data entered by athletes, coaches or other users of your Smartabase site. So the dashboard builder shows you simulated data in order for you to see how your chart might appear.

If you have specific expectations of the data that your chart will be used for, you can set them using the data preview properties. You can choose how many data points should appear in the preview and what the minimum and maximum values will be. This means you can be more confident that your chart configuration will suit the live data.

Trellis

Use the Trellis properties to conditionally display the timeseries chart multiple times based on a field within a data source. To customize your trellis, you can:

• Set Filters for the data you use to create the trellis.
• Set a Limit of how many multiples of the trellis should be displayed.
• Choose to Keep the time range consistent across all multiples.
• Choose whether to order the trellis by Values, Date of first occurrence, Date of last occurrence or a Custom order. You can then set the order Direction to be Ascending or Descending.
• Choose whether to display the title of each multiple (this is based on the trellis Field selected). If you enable this, then you can specify the font size, font color and text alignment.

To learn more about widget trellising, check out this article.

Create a time series chart displaying injury occurrence over time

In this example, we’re going to build a time series chart that provides a historical overview of injuries within a large group of athletes. We’ll make use of filters to choose a date range and separate the injuries based on whether they are New or Recurrent. We’ll reference the Date of First Symptoms field as the series’ Time field, and use a Custom time input format and Tick format to reformat this on the chart’s X-axis.

Here’s a quick look at the outcome of the example:

1. Add the form used to collect injury information to your dashboard as a Data source.
2. Add a Time series chart from the widget library.
3. Apply any general widget settings, such as a title, subtitle, background color, border color and instructional content.
4. Add a new series. This series will represent New injuries.
5. In the General series settings:

   

   • Choose a Series name and Color.
   • Select your injury form as the series’ Data source.
   • Choose the About field as the series’ Field, and choose the Count Aggregation (do not select ‘Unique’). The field does not have to be About, but it must be something that has a value in all records so the count aggregation will give the desired outcome.
   • Choose Date of First Symptoms as the Time field. This allows our chart to show each injury on the day it happened, instead of the day it was entered into Smartabase by the team physiotherapist.
   • Choose Bar as the series Type.
   • Set up the required Data filters. In our example, we’ve added Start and End Date date picker widgets which we need to filter based on Date of First Symptoms. We also need to add a custom filter to target records that were marked as a New Injury.

     

6. In the Advanced series settings:

   

   • Set Decimal places to 0 (we’re generating a simple count of injuries, so won’t need any decimals).
   • Set the Stacking group to 1. Later we’ll add a second stacked series, which will also have a stacking group of 1 to ensure the bars will stack correctly.
   • Choose any Card fields you’d like to display when interacting with the series.
   • Choose whether you’d like the series to show in the legend and data labels to display above the bars.
7. Create a second series. Because you’ve already configured your first series with appropriate settings, the easiest method would be to duplicate your first series.
   • Update the second series’ name (to Recurrent Injury) and color so it can be distinguished from the first series.
   • Update the custom Data filter to target records specified as Recurrent.

     

     All other settings can remain the same as the first series.
8. Adjust the X-axis settings.

   

   • Because we’re using Date of First Symptoms as the Time field for our series (which is recorded in US date format as MM-DD-YYYY), we need to set the Time input format to Custom.
   • We then specify the Custom time input format as %m-%d-%Y, which is the appropriate time format directive to match the format that Date of First Symptoms is recorded in.
   • The Custom tick format can be entered as the same format, but for this example we’d like to replace the ‘-‘ symbols with ‘/’ symbols and convert it to UK format, so we’ll enter this as %d/%m/%Y.
   • Because we may be looking at a lot of dates over time, we’ll set the Tick text rotation to 60 degrees so the dates don’t overlap.
9. Complete any other formatting of your chart. For this example, we did the following:
   • Add ‘Total Injuries’ as the Y-axis label, and change the Tick format to one decimal.
   • Set the Chart height to 300px. We also set the Bar width mode to Pixel width, with a Bar width of 15px.
10. Publish the dashboard.

You can also find an example of how to build a time series chart displaying times across the X-axis (instead of dates) in our article on managing your data sources. Here’s how the example turns out: