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:

957957

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.

388388

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

361361 722722

Design

Add a Data Provider with the view as its datasource.

248248

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

15001500

 

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

630630

📘

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?