Changing polygon points in SVG for radar chart in Microsoft Powerapps
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?
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:
