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:
![Screenshot 2022-06-07 at 16.39.54.png 957](https://files.readme.io/f7cd280-Screenshot_2022-06-07_at_16.39.54.png)
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.
![Screenshot 2022-06-07 at 16.55.34.png 388](https://files.readme.io/2482cb5-Screenshot_2022-06-07_at_16.55.34.png)
Next click the 'Group by' button, and select 'Status'.
![Screenshot 2022-06-07 at 16.56.20.png 361](https://files.readme.io/33beba8-Screenshot_2022-06-07_at_16.56.20.png)
![Screenshot 2022-06-07 at 16.56.53.png 722](https://files.readme.io/92bd716-Screenshot_2022-06-07_at_16.56.53.png)
Design
Add a Data Provider with the view as its datasource.
![Screenshot 2022-06-07 at 17.00.27.png 248](https://files.readme.io/f0050c8-Screenshot_2022-06-07_at_17.00.27.png)
Nested underneath, add your donut chart with the provider set.
For the label column select group and for the data column select value.
![task-progress.png 1500](https://files.readme.io/77e1f4b-task-progress.png)
Â
Adjust the settings as desired.
Below is a showcase of the colour palettes available:
![Screenshot 2022-06-07 at 17.25.30.png 630](https://files.readme.io/28bc663-Screenshot_2022-06-07_at_17.25.30.png)
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.
Updated 12 months ago