cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Aditya1728
Helper II
Helper II

Image for donut does not behave as expected

Hi Experts,

 

I have a donut as below:

Aditya1728_0-1617554940307.png

I got help form this community with the following code for this image:

 

With({chartValspilot:(((CountIf(Table 1,'Classification'="Success"))/10)*100)},

    "data:image/svg+xml," &
      EncodeUrl("<svg width='100%' height='100%' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'>
        <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='transparent'></circle>
        <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='RGBA(127, 178, 57, 1)' stroke-width='5'></circle>
        <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='RGBA(157,195,230,1)' stroke-width='5' stroke-dasharray='" & Text(100-chartValspilot) & " " & Text(chartValspilot) & "' stroke-dashoffset='0'></circle>
        <text x='16' y='30' fill='RGBA(255, 255, 255, 1)' font-size='5pt'>" & Text(chartValspilot, "[$-en-US]0%") & "</text>
        </svg>"
    )

)

 

It works fine but the only problem is the green part does not start from 12 O clock, instead it keeps on moving.

Aditya1728_1-1617555148606.png

Appreciate your help and suggestions.

1 ACCEPTED SOLUTION

Accepted Solutions
RandyHayes
Super User
Super User

@Aditya1728 

Yes, change your image property to the following:  (PLEASE NOTE that this formula editor changes the initial data&colon;image tag...please correct when copying and pasting.

With({chartValspilot:(((CountIf(Table 1,'Classification'="Success"))/10)*100)},

    "data&colon;image/svg+xml," &
      EncodeUrl("<svg width='100%' height='100%' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'>
        <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='transparent'></circle>
        <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='RGBA(157,195,230,1)' stroke-width='5'></circle>
        <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='RGBA(127, 178, 57, 1)' stroke-width='5' stroke-dasharray='" & Text(chartValspilot) & " " & Text(100-chartValspilot) & "' stroke-dashoffset='25'></circle>
        <text x='16' y='30' fill='RGBA(255, 255, 255, 1)' font-size='5pt'>" & Text(chartValspilot, "[$-en-US]0%") & "</text>
        </svg>"
    )

)

 

That should give you what you are looking for.  

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

5 REPLIES 5
Aditya1728
Helper II
Helper II

@RandyHayes Any suggestions on this?

RandyHayes
Super User
Super User

@Aditya1728 

Yes, change your image property to the following:  (PLEASE NOTE that this formula editor changes the initial data&colon;image tag...please correct when copying and pasting.

With({chartValspilot:(((CountIf(Table 1,'Classification'="Success"))/10)*100)},

    "data&colon;image/svg+xml," &
      EncodeUrl("<svg width='100%' height='100%' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'>
        <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='transparent'></circle>
        <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='RGBA(157,195,230,1)' stroke-width='5'></circle>
        <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='RGBA(127, 178, 57, 1)' stroke-width='5' stroke-dasharray='" & Text(chartValspilot) & " " & Text(100-chartValspilot) & "' stroke-dashoffset='25'></circle>
        <text x='16' y='30' fill='RGBA(255, 255, 255, 1)' font-size='5pt'>" & Text(chartValspilot, "[$-en-US]0%") & "</text>
        </svg>"
    )

)

 

That should give you what you are looking for.  

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
Aditya1728
Helper II
Helper II

Thanks @RandyHayes  , worked like a charm, just removed colon from data&colon and corrected the colors for my image.
Thank you!

Aditya1728
Helper II
Helper II

@RandyHayes is it possible to use two variables on the same image.

Like if I want to a red section on top of the green section now.

 

So like green is out of the total blue and then red is out of the total green?

Aditya1728
Helper II
Helper II

@RandyHayes ignore my question, I did it by adding another variable after the original one:

 

With({chartValspilot:(((CountIf(Table 1,'Classification'="Success"))/10)*100)},

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Top Solution Authors
Top Kudoed Authors
Users online (2,928)