Progress Donut Chart

It is possible to display a progress bar using a Donut Chart.

This can be useful when building KPI dashboards or other task tracking apps.

Data

You may have a table with tasks, each with a status such as:

To provide our progress chart with the correct data, we will need to create a View so that the tasks can be grouped by status.

First click the 'Calculate' button and select The Count of Status.

Next click the 'Group by' button, and select 'Status'.

Design

Add a Data Provider with the view as its datasource.

Nested underneath, add your donut chart with the provider set.
For the label column select group and for the data column select value.

 

Adjust the settings as desired.
Below is a showcase of the colour palettes available:

📘

Colour order

The legend colours are determined by the alphabetical order of the labels.
For this reason, numeric status enums may be more suitable if precise colour coding is desired.

 

External datasource

Instead of using an internal table view, you may wish to use a Custom query from an external datasource.

You will need to transform the data in the format outlined here, where there is a label for each status.


Did this page help you?