How to make real-time updating donut chart

Getting Started
1

What would be the fastest and most performant method/code, to show during gameplay constantly updating donut charts.

Let’s keep it simple:

  • donut chart has 2 colors (green and red)
  • input/parameters: 2 values: count & totalBlocks
  • donut chart color green = percentage for count
  • donut chart color red = percentage for totalBlocks

Step 1. Calculate percentages
int totalBlocks = 12; //total items to collect
int count; //count++ each time an item is collected
int percentComplete = (int)(0.5f + ((100f * count) / totalBlocks));

    public void OnTriggerEnter(Collider other)
    {
        if (other.gameObject.CompareTag("Pick Up"))
        {
            count++;
            int totalBlocks = 12;
            int percentComplete = (int)(0.5f + ((100f * count) / totalBlocks));

            other.gameObject.SetActive(false); //inactive collected block
        }
    }

Step 2. Create donut using percentageComplete as Green, rest as Red
…

Thanks for the help

2

Take a look at the “Tanks!” demo (I believe you can find a link in teaching and also the asset store) and see how they implemented the radial health bar.

3

Yeah… in brief, UI.Image has a FillMethod you can set to radial, so that it shows the FillAmount by using a radial fill. If I understand correctly what “donut chart” means, then this is what you’re looking for.

4

Whaw, thanks for the quick response.
This is exactly what I was looking for.

Hints: use a slider, make it non-interactive, use donut image as background & set the fill colors in a script :slight_smile: