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.
In the sidebar
General: use the general properties of the sidebar to add descriptive information for your time series chart. 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.
Series: populate the chart from your data sources using the series properties. For each series, you can:
- Provide a series name.
- Specify a colour for the series.
- Choose the data source for the series.
- Choose the field from your data source which will be displayed in the series.
- 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 behaviour:
- Specify the number of decimal places that shown be shown.
- Choose whether the series should be displayed on the Y2-axis (the default behaviour 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, centre-aligned.
- 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 colour. This affects the colour of the horizontal axis line and the tick marks for each date.
- Specify the tick label colour. This affects the colour of the tick text (dates).
- Specify the axis label colour. This affects the colour 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 centre 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.
- 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 colour. This affects the colour of the vertical axis line and the tick marks on it.
- Specify the tick label colour. This affects the colour of the tick text.
- Specify the axis label colour. This affects the colour 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 mouses 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 colour 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 behaviour is to plot custom gridlines using the Y-axis).
Regions: if you want to colour specific background areas on a time series chart, you can do so using the region properties, which allow you to:
- Specify a colour 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: use the interaction properties to help readers interact with your time series chart. The possible interactions for the time series chart widget are:
- 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 behaviour 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.
To learn more about widget interactions, visit the article on customising widget interactions.
Advanced Properties: use the advanced properties for customising your chart further. The advanced properties for the time series chart allow you to:
- Specify the chart height. This is measured in pixels.
- 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 normalise 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.
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/maximum values will be. This means you can be more confident that your chart configuration will suit the live data.