Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

How to make real-time updating donut chart

Discussion in 'Getting Started' started by jorisvm, Nov 7, 2015.

  1. jorisvm

    jorisvm

    Joined:
    Nov 4, 2015
    Posts:
    2
    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));

    Code (CSharp):
    1.     public void OnTriggerEnter(Collider other)
    2.     {
    3.         if (other.gameObject.CompareTag("Pick Up"))
    4.         {
    5.             count++;
    6.             int totalBlocks = 12;
    7.             int percentComplete = (int)(0.5f + ((100f * count) / totalBlocks));
    8.  
    9.             other.gameObject.SetActive(false); //inactive collected block
    10.         }
    11.     }
    Step 2. Create donut using percentageComplete as Green, rest as Red
    ...

    Thanks for the help
     
    Last edited: Nov 7, 2015
  2. Adam-Buckner

    Adam-Buckner

    Joined:
    Jun 27, 2007
    Posts:
    5,664
    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. JoeStrout

    JoeStrout

    Joined:
    Jan 14, 2011
    Posts:
    9,859
    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. jorisvm

    jorisvm

    Joined:
    Nov 4, 2015
    Posts:
    2
    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 :)