cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
vffdd
Responsive Resident
Responsive Resident

Need help with SVG's !

So I have a circular SVG shape which has a proportion of red or green depending on the numbers in two txt boxes.  and I can't seem to figure out how to get it to show the right proportion of green / red  I know it's just a simple calculation but I can't seem to get it right.

 

The figures I need to compare are  in the following 2 text boxes   CountSLA     CountALL        So for example if  CountSLA is 75  and Count All is 100 I would like 3/4 of the circle to be red  

 

Here is the current code for the SVG that's not working.. no errors just not the right proportions of red/green.  I've tried it with CountALL being 100 and Count SLA being 50  so it should show half and half  and i just shows like this

 

Screen Shot 2020-08-18 at 15.47.55.png

 

 

 

"data:image/svg+xml,"
&
EncodeUrl(
"<svg width='100%' height='100%' viewBox='0 0 42 42' class='donut' xmlns='http://www.w3.org/2000/svg'>

   <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
  <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#32CD32' stroke-width='3'></circle>

  <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#E60000' stroke-width='3' stroke-dasharray='"&CountAll.Text&" "&(100-CountSLA.Text)&"' stroke-dashoffset='25'></circle>

</svg>")

 I've tried numerous different types of calculation and yet I know it's probably something very simple LOL..

 

TIA

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
RandyHayes
Super User III
Super User III

@vffdd 

I believe you are close, you just need to adjust your math.  Give this a try:

"data&colon;image/svg+xml,"
&
EncodeUrl(
"<svg width='100%' height='100%' viewBox='0 0 42 42' class='donut' xmlns='http://www.w3.org/2000/svg'>

   <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
  <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#32CD32' stroke-width='3'></circle>

  <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#E60000' stroke-width='3' stroke-dasharray='" & 
    With({lclVal: (Value(CountSLA.Text) / Value(CountAll.Text)) * 100}, Text(lclVal) & " " & Text(100-lclVal)) & 
    "' stroke-dashoffset='25'></circle>

</svg>")

 

I hope it 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
RandyHayes
Super User III
Super User III

@vffdd 

I believe you are close, you just need to adjust your math.  Give this a try:

"data&colon;image/svg+xml,"
&
EncodeUrl(
"<svg width='100%' height='100%' viewBox='0 0 42 42' class='donut' xmlns='http://www.w3.org/2000/svg'>

   <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
  <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#32CD32' stroke-width='3'></circle>

  <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#E60000' stroke-width='3' stroke-dasharray='" & 
    With({lclVal: (Value(CountSLA.Text) / Value(CountAll.Text)) * 100}, Text(lclVal) & " " & Text(100-lclVal)) & 
    "' stroke-dashoffset='25'></circle>

</svg>")

 

I hope it 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

vffdd
Responsive Resident
Responsive Resident

thanks @RandyHayes    That worked !!  thanks a mil 🙂

@vffdd 

Hmm, I tested here prior to reply.  Let me see...No, I used the same constructs - a textinput control and named them CountSLA and CountAll.

This is a direct copy any paste from my Image property of the Image control:

"data&colon;image/svg+xml,"
&
EncodeUrl(
"<svg width='100%' height='100%' viewBox='0 0 42 42' class='donut' xmlns='http://www.w3.org/2000/svg'>

   <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
  <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#32CD32' stroke-width='3'></circle>

  <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#E60000' stroke-width='3' stroke-dasharray='" & 
    With({lclVal: (Value(CountSLA.Text) / Value(CountAll.Text)) * 100}, Text(lclVal) & " " & Text(100-lclVal)) & 
    "' stroke-dashoffset='25'></circle>

</svg>")

 

RandyHayes_0-1597766183376.png

RandyHayes_1-1597766205612.png

 

_____________________________________________________________________________________
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

@vffdd 

You must have changed your response - I got one that said it didn't work for you.  I guess you got that solved 😉

_____________________________________________________________________________________
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
vffdd
Responsive Resident
Responsive Resident

Hahah yes I was just doing something silly and posted my response too quickly 🙂  worked perfectly thanks..

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

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Top Solution Authors
Top Kudoed Authors
Users online (63,522)