Changing polygon points in SVG for radar chart in Microsoft Powerapps

Question

I am developing a radar chart in Microsoft Powerapps. When pressing a button the chart must change. Since radar charts are not supported I create one myself using a SVG image. By pressing the button the SVG polygon points must change so it matches the level of the radar chart.

Unfortunately I can't find a method to add a variable to the polygon points which let met control it by pressing a button. The data looks as the following

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1000' width='1000' %3E%3Cpolygon points='1000,500 933,250 750,67 500,0 250,67 67,250 0,500 67,750 250,933 500,1000 750,933 933,750' style='fill:orange;fill-opacity:0.9;stroke:black;stroke-width:1' /%3E%3C/svg%3E

Does anyone know how to add a variable to one of the polygon points? E.g.:

polygon points='1000,500 933,250 750,67 500,var1 250,67 67,250 0,500 67,750 250,933 500,1000 750,933 933,750

I have tried these options:

polygon points='1000,500 933,250 750,67 500,"var1(Label1)" 250,67 67,250 0,500 67,750 250,933 500,1000 
  750,933 933,750

In this option it let's me link to a variable (Label1) or a pressed button, but the rest of the image is no longer working. I searched for some solution, and found that you can create function, but this does not seem to be working in PowerApps. 9@function:yourfunction at the beginning

Can anyone help me?

Answer 1

Since the SVG content is a string, you can use string concatenation (either the & operator, or the Concatenate function). In your case, if the value is in a variable called var, you can use this expression:

"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1000' width='1000' %3E%3Cpolygon points='1000,500 933,250 750,67 500," & var & " 250,67 67,250 0,500 67,750 250,933 500,1000 750,933 933,750' style='fill:orange;fill-opacity:0.9;stroke:black;stroke-width:1' /%3E%3C/svg%3E"

The screen capture below shows this expression in action: