{"id":89,"date":"2024-09-12T19:59:04","date_gmt":"2024-09-12T19:59:04","guid":{"rendered":"https:\/\/powerplatformsolutions.net\/?p=89"},"modified":"2025-10-12T14:48:16","modified_gmt":"2025-10-12T14:48:16","slug":"mastering-dynamic-svg-creating-by-building-radar-charts-from-collection","status":"publish","type":"post","link":"https:\/\/powerplatformsolutions.net\/?p=89","title":{"rendered":"Mastering dynamic SVG creating"},"content":{"rendered":"
\n
\"\"<\/figure><\/div>\n\n\n

We will do it by building radar chart from collection <\/p>\n\n\n\n

I was recently challenged in one of my projects to build some radar charts dynamically from some data provided in a collection (we could say “table” but as we are in PowerApps environment we will be talking “collections” here) .<\/p>\n\n\n\n

So we have a collection with 2 key values – score and title which we need convert into a pretty radar chart as on a picture on a right. I thought – peace of cake, just use one of the standard charts in PowerApps, but when I started looking in to it I realised that there is no radar chart in standard PA charts.

I know I could use Power BI, but for some reasons this project was to be PowerApps only. So I started googling and youtubing (apparently there is no such word as “youtubing” yet :\/ , but I still gona use it \ud83d\ude42 )

And thats what I came up with…<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n


On a left are collection values we are going to build our chart from <\/p>\n\n\n\n

I was lucky to still remember something from school geometry lessons so I knew we can find point coordinates if we know the angle and distance. So each record in the collection would be a separate beam (lines going outside from the centre in our cobweb), each equal length equal angle from previous beam) , and on this beam there will be a point with a distant from the centre dependant on the score. <\/p>\n\n\n\n

And to find those coordinates we will be using some Sin and Cos functions <\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

First we need to find how many rows\/beams we have, and then find the angle between those beams<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I find it easier to keep values, related to particular element, in one object, hence using Rc for that. I guess there is no need to explain what Count and Angle values are. Cntr – is a string of centre coordinates that will be used later. At the same time we create some blank collections for future use.<\/p>\n\n\n\n

And now – lets start creating some coordinates (you may not believe me, but I loved geometry when I was in school ) <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ok, so we have now a collection with coordinates for beams endings (centre coordinates string we created in the beginning)
Lets build some SVG code <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And the last thing – combine all those string into SVG image code, that goes under Image properties of the Image element <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Thats it, job done! Took me only 7 hours in total to build it \ud83d\ude42
Yes, you can add more cobwebs (per each 20% etc), add more texts, change lines thickness, colours<\/p>\n","protected":false},"excerpt":{"rendered":"

We will do it by building radar chart from collection I was recently challenged in one of my projects to build some radar charts dynamically from some data provided in a collection (we could say “table” but as we are in PowerApps environment we will be talking “collections” here) . So we have a collection […]<\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-powerapps"],"_links":{"self":[{"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=\/wp\/v2\/posts\/89"}],"collection":[{"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=89"}],"version-history":[{"count":13,"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":344,"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions\/344"}],"wp:attachment":[{"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/powerplatformsolutions.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}