The Pie/donut chart widget lets you choose whether to display data in a pie or donut chart format. This is particularly useful when you want to show the relationship between parts of your dataset and the whole. For example, if you wanted to demonstrate injury information across your athlete, student, soldier, dancer or patient population, it’s easy to set up charts like the example below.
Pie and donut charts are completely compatible with the interactions that you may have used or seen in other widgets. You can set up the interaction properties so that people viewing your dashboard get access to more information and can choose to go to the source data. In our example above, selecting any segment would display additional details about the affected players. A viewer can then go to the injury entry to see the full record or make updates to it.
Select the Pie/donut chart widget to display the settings in the sidebar. These settings include:
- General
- Instructions
- Data
- Categories
- Value
- Pie/donut settings
- Legend
- 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.
Data
To connect your widget with a data source, use the Data properties to add and filter the value that the widget will display.
The Pie/donut chart widget allows you to use data from a single data source to create the categories and values in the chart, which are set from the Categories and Values properties.
Categories
To create the segments in your Pie or donut chart, use the Categories properties to select a field from your data source. The field you choose as the category will also populate the legend items.
- Choose which Field from your data source will provide the categories for your chart.
- Select the correct Data type for the category field.
- Choose whether you want to Show null categories (categories for which there is no data) in the chart.
- If the category field is a multiple selection type of field, choose the appropriate Multiple selection field type. Different Multiple selection field types return their results in slightly different formats, or with different delimiters. If the category field you’re using is a multiple selection type of field, choose the appropriate Multiple selection field type to help the widget interpret the data correctly. In rare cases, you may also wish to set a custom delimiter. You’ll find an example using a multiple selection field as a category at the bottom of this article.
- Choose how you want the categories to be ordered.
- Automatic ordering will sort the categories by values (in other words, the size of the segment).
- Category name will sort the categories alphabetically. You can sort them in an ascending or descending direction.
- Date of first occurrence will sort the categories in order of their occurrence in the data source. Again, you can sort them in ascending or descending direction.
- Finally, you can choose to set a Custom category order. If you know what all of the available category results are, you can add them in any order you like, as well as assign them custom colors. If you’re using this method, make sure you add the options in the exact right format. Any spelling discrepancies or case inconsistencies will result in the widget not recognizing that category. You’ll find an example of this at the bottom of the article.
- Enter any text that you want to use as a prefix for the category names.
- Enter any text that you want to use as a suffix for the category names.
Values
In the Values properties, you can:
- Select the Field you want to aggregate into each segment.
- Choose which Aggregation is the most appropriate for the chart data.
- Choose whether Unique values only should be used. When this option is ticked, each unique value in the dataset is aggregated. If left unticked, all values in the dataset will be aggregated.
You can learn more about aggregations from the article on understanding aggregation options.
Pie/donut settings
This is where you choose whether you want the chart to be in Pie or donut chart format and how the chart should be formatted.
- Use the Chart type setting to choose whether the chart should be displayed in pie chart or donut chart format.
- If you’ve chosen the donut option for chart type, you can specify some additional settings:
- Donut ring width: this is the width (in pixels) of the donut. Increasing the width reduces the size of the donut hole.
- Donut hole text: use this setting to choose whether there should be No text in the middle of the donut chart, a total value for the chart segments or Custom text. If you choose the custom text option, you’ll be able to enter text using the Custom donut hole text setting.
- Choose whether segment labels should be shown. Segment labels appear within each segment showing the aggregated value of the segment. If you enable segment labels, you can also:
- Choose whether to display the labels as a percentage.
- Use the Label format setting to specify how many decimal places should be shown in the label
- Set a Label threshold value.
- Choose whether the segment should expand when someone hovers over it.
Legend
Use the Legend properties to set the position of the chart’s legend. Note that with this type of widget, it is not possible to disable the legend.
Interaction
If you want to provide users with more information about the data displayed in a Pie or donut chart, you can set up different interactions using the Interaction properties.
There are three interactions you can enable for a pie and donut chart widget – tooltips, record cards and record click-through.
-
Tooltips: if you want to provide more context for the people reading the chart, you can enable tooltips. These display the data value for each chart segment when the reader hovers over it or taps it.
- If tooltips are enabled, you can also choose whether to display the tooltip data as a percentage.
- Record cards: when record cards are enabled, then the card fields that are set will be shown in a pop-up screen when a segment is selected.
- 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.
Advanced properties
Use the Advanced properties for customizing your chart further. Advanced properties for the pie and donut chart widget allow you to:
- Specify the Chart height (px).
- Set the Animation duration (ms) used when a segment is hovered over.
- Customize the placeholder text that’s displayed when there is no relevant data.
- Hide the widget if no data is available (based on data source and filter settings).
Data preview
The Pie and donut chart widget 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.
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.
Visualizing recovery modalities using a pie chart
In this example, we’ve referenced an event form that athletes use to record their daily recovery modalities. The Recovery Modalities Completed field is a multiple selection field to allow athletes to select all of the different recovery methods they used.
The pie chart shows how many athletes used each of the recovery modalities.
The Recovery Modalities Completed field was used as the category and because it is a multiple selection field, the Multiple selection field type was set to Multiple selection. This means the widget recognizes all of the different selections for each athlete as individual modalities, and displays them as such in the pie chart.
We also wanted to be able to set custom colors for our segments. Because we have a defined list of recovery modalities available, we can use the custom category order and specify a color for each option.
To display the total number of athletes that used each modality, we need to find the Count of instances of each category within the data set. The simplest way to achieve this is by using About as the Field and Count as the Aggregation in the Values settings of the sidebar. In other words, we’re finding the total instances of each recovery modality for each athlete.
Depending on the filters applied to this chart, it could be used to review the recovery modalities used over a period of time, or for a specific athlete(s). With cards enabled in the Interaction settings, clicking on a segment will provide a list of all the athletes that completed that modality within the filtered data range.