Categorical Chart Widget

You can use the Categorical chart widget to plot categorical 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.

In the example above, the Categorical chart is displaying recent average player wellness data. The positions (center midfield, goalkeeper and so on) are acting as the categories with wellness metrics (fatigue, stress, soreness, mood) being displayed as series. This chart also has a region set up to highlight an optimal zone for the stacked bars that comprise the total of the wellness metrics, which are averaged across each position.

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

• General
• Instructions
• Categories
• Categories sort & limit
• Series
• X-axis
• Y-axis and Y2-axis
• Tooltip
• Legend
• Custom gridlines
• Regions
• Interaction
• Advanced properties
• Data preview
• Trellis

General

Use the General properties of the sidebar to add descriptive information for your 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.

Categories

To provide your Categorical chart with a data source, use the Categories properties of the widget to choose a data source and select which field will create the categories shown on the X-axis. This means the data that you add as series will be plotted using these categories. To customize your categories further, you can:

• Set filters for the data you use to create the categories.
• Choose the data type (number, string or date) for the categories.
• Choose whether empty categories should be shown in the categorical chart. If there is no data for a category, the category will display as null. If you don’t want the null values to be shown, you can choose to hide them using this option. This is particularly useful if you expect the user to view many categories along the X-axis of the chart.

Categories sort & limit

You can further customize the behavior of categories using the Categories sort and limit properties:

• Choose whether to Sort categories by the category name or by data. Depending which option you choose here, you’ll see further controls for specifying the Sort direction. When you use the option to sort by data, you’ll need to pick which series (if there is more than one included in the chart) should decide the sorting behavior.
• Choose whether to limit the number of categories shown in the categorical chart. This is useful when there are many possible categories that could be included in the dataset (such as injury or illness codes from an OSICS diagram). If you want to limit the categories shown in the chart, you can choose which series in the chart should act as the limiter, then specify the number of highest or lowest categories to show.
• Select whether to Show sorting and limiting controls to people viewing the chart. If you disable this option, people will see the chart according to the sorting and limiting properties you’ve set. If you enable these, people will be able to sort or limit the categories in the chart using the series you’ve selected for the sorting and limiting properties. 

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.
• Set filters for the data that will populate the series.
• Choose the Field from your data source which will be displayed in the series.
• Choose the Category field from your data source. This field will determine where the chart retrieves the category values from for the selected series. Normally this will be the same field that’s specified as the Category field of the entire chart, but may be different if the series is coming from a different data source. It’s important that the values collected in the series category field match the values specified in the chart’s category field.
• 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 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. Specify the rotation of the tick text (category name) which appears below the X-axis.
• Enable or disable line wrapping for the tick text.
• Set a line limit for the tick text. This allows you to specify how many lines of text should appear for each category name on the X-axis. If there is more text than what will fit into the line limit you’ve set, then the text will be truncated. The full category name will appear in the tooltip, if you’ve enabled tooltips for the chart.
• 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 category.
• Specify the Tick label color. This affects the color of the tick text (category names).
• 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 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. 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 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

Use the Tooltip properties to enable tooltips that provide more context for the people reading the chart. Tooltips 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 category they appear in.

Legend

Use the legend properties to give the reader more information about the data included in the chart. This shows people which colors in your chart correspond with different series. People can select the legend items to show and hide data in the chart. You can also specify the legend position, so it shows beside or within the chart.

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 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 axis the region should begin.
• Provide an End value for where on the axis the region should finish.
• Choose which axis to plot the region on.

Interaction

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

There are four interactions you can enable for a categorical 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 a smaller version of the chart at its full extent, which means people 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 Categorical 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 categorical 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 categorical chart widget.
• Hide the widget if no data is available (based on data source and filter settings).

Data preview

The Categorical 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 Teamworks AMS 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 Categorical 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 category order consistent for 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, check out our article on Widget Trellising.