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:

957

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.

388

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

361 722

Design

Add a Data Provider with the view as its datasource.

248

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

1500

Β 

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

630

πŸ“˜

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.