Chart Progress

user
Chart Progress

Tags:

UI/UX

This gauge-shaped progress component visually displays the completion of tasks in Power Apps. It uses a custom doughnut chart, generated via the QuickChart API, to represent the percentage of completed tasks.

  1. Using Dynamic Variables

In Power Apps, you can define variables for task values and use them in the QuickChart API URL.

Example of Variables in Power Apps Define the variables in the OnVisible property of the screen or during a loading event:

Set(varTasksDone, 25); Set(varTasksTotal, 100); Set(varPercentage, Round(varTasksDone / varTasksTotal * 100, 1)); Set(varRemaining, 100 - varPercentage);

  1. Replacing Values in the QuickChart API URL

e.g.: 'data': [" & varPercentage & ", " & varRemaining & "], e.g.: 'text': '" & varPercentage & "%',

  1. How It Works

varTasksDone stores the number of completed tasks. varTasksTotal stores the total number of tasks. varPercentage calculates the percentage of completed tasks. varRemaining calculates the remaining percentage. The QuickChart API URL dynamically uses these variables to generate an updated chart.

More Snippets from this Author

Page 1 of 0
Loading...

Loading...