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 III
Super User III

@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.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

View solution in original post

5 REPLIES 5
Aditya1728
Helper II
Helper II

@RandyHayes Any suggestions on this?

RandyHayes
Super User III
Super User III

@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.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

View solution in original post

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 User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Carousel April Dunnam Updated 768x460.jpg

Urdu Hindi D365 Bootcamp

Dont miss our very own April Dunnam’s The Developer Guide to the Galaxy! Find out what the Power Platform has to offer for the traditional developer.

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