# Visualisation project - expert quote request

**URL:** <https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585>\
**Category:** Ask for Help\
**Tags:** experts\
**Created:** [May 22, 2024, 9:56pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585 "2024-05-22T21:56:04Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 22, 2024, 9:56pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/1 "2024-05-22T21:56:04Z")

</div>

Hi  
I’ve been building an app for members of a paragliding club. One of the bits of info I’d like is current wind direction on a ‘wind rose’ which is a 360 degree plot with wind direction shown as an arrow, site locations marked as arcs which are then green if the wind is in the right direction for a site.

 ![IMG_3669](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/22357a492de264bd51131eabf52ad1fac64325e1.jpeg)

I have this version which is created from weather data imported into google sheets and a chart created in quick chart. But the data is static.

I’d like to extend this by creating a long list of sites and wind directions which are displayed on the rose. There are too many to display at once (c300) so The user could then select which sites they wanted. A basic version could show for a region captured as a column on the site list. Or enter a location and show all sites within 100’miles say.

I’m looking to engage an expert to do this (paid project). I suspect this would need to have data stored in glide and visualised outside of glide which takes it outside my ability.

Any suggestions appreciated and / or approaches combined with proposals (PM I guess)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 22, 2024, 11:46pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/2 "2024-05-22T23:46:31Z")

</div>

Can you share a sample data structure? Do we have each site and wind direction as a combination for a row? Does each region hold multiple sites?

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 23, 2024, 7:11am UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/3 "2024-05-23T07:11:22Z")

</div>

Thanks for the reply. Data structure would be:

- **unique site name** (text). Eg “Combe Gibbett”
- **Location** (text) location as lat/long or alternative if easier eg “ (51.5450571, -0.3673473)”
- **Region** (text validated from another list) eg “North West”
- **Wind Range** the range of wind directions which makes the site flyable on a 360 degree compass face (text/number - currently I have as text eg “210-300” but probably easier to capture as two number columns)

Worth noting whilst doing this that a particular irritation is if a site runs through north. So a site which is mostly east facing might be 70-110 but a north facing site is 340-20. (This is why the north facing site in my example is broken into two)

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 23, 2024, 7:17am UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/4 "2024-05-23T07:17:41Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/1/71d53f6f40de6c703cecdd871c759c49649b39ff.jpeg)

Excuse the rather crappy image, best I can do at work but hopefully serves!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 23, 2024, 12:56pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/5 "2024-05-23T12:56:43Z")

</div>

I don’t see the Region there. Is that the Category field?

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 23, 2024, 3:34pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/6 "2024-05-23T15:34:20Z")

</div>

Sorry, yes exactly

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 24, 2024, 12:16am UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/7 "2024-05-24T00:16:56Z")

</div>

So when the user chooses a Region from a choice component, you want to show, in a single chart, the wind data from locations related to that region?

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 24, 2024, 6:58am UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/8 "2024-05-24T06:58:19Z")

</div>

MVP - exactly as you describe  
Subsequent development - all sites within a defined distance from the user (calc from lat/long)

Also MVP - highlight the sites for which the wind is currently within range

To do this I currently import  
The table here

> **[RASP Tabular - RASP UK (Stratus)](https://rasp.stratus.org.uk/index.php/rasp-tabular)**
>
> RASP UK - Regional Atmospheric Soaring Prediction

Into google sheets and then to glide

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 24, 2024, 12:25pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/9 "2024-05-24T12:25:01Z")

</div>

Can you explain how you build the quickchart url? I’m imagining a a relation, and maybe a lookup or joined list that pulls everything together into a template column to build your url, but I don’t really have a full picture of how you are putting it all together currently so it’s hard to advise.

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 24, 2024, 5:30pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/10 "2024-05-24T17:30:01Z")

</div>

Sure…although I’,m not sure I’d do it this way again! 🙂 and this way is definately not adaptable to solve the problem above - it’s already at the limit of what Quickchart can process.

I have an external data source which is pulled into google sheets  
The google sheet converts the table into a 4 ranges for quickcharts. 2 of these (the site rose rings) are static and represent the sites.  
The coloring of the sites is based on a dynamic range which updates as the imported data updates  
I then import all of this into google sheets and then concatenate in glide to form the quickchart url  
Tortuous, but it works

view only spreadsheet here.

> **[RASP Import](https://docs.google.com/spreadsheets/d/1qUo8V8KT7OrBYwaslDirHtIt_Ac01Ok78yeUkAvQ-00/edit?usp=sharing)**
>
> Inputs
> 
> 
> Weather Data,Location,PEW
> Min Wind knts,5
> Max Wind knts,25
> Name,Emoji,Color,Font Size
> Centre Text,Rain,🌧️,'rgb(0, 102, 255)',150
> Stars,⭐,'rgb(233, 180, 76)',100
> No Stars OK,🪂,'black',150
> Windy,🌬️,'rgb(0, 102, 255)',150
> No Wind,🍃,'rgb(0, 204,...

the tab called RASP is the one imported to glide

I suspect that there is a much easier way to do this!!

[here](https://www.gingernomad.co.uk/weather/) is a good example of what I’d like to achieve (although like my hack job this one is also a fixed set of sites)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 24, 2024, 11:53pm UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/11 "2024-05-24T23:53:23Z")

</div>

> [@fraser](#):
>
> Sure…although I’,m not sure I’d do it this way again! and this way is definately not adaptable to solve the problem above - it’s already at the limit of what Quickchart can process.

Does Quickchart have a chart type to support this? I wonder if using Chart.js would solve your problem. Data-wise, I also think the same way as Jeff described. It’s just a matter of how to construct a code snippet to display it in a web embed component.

---

<div class="post-metadata">

**Author:** ![fraser](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fraser/32/68111_2.png) [@fraser](https://community.glideapps.com/u/fraser)\
**Post date:** [May 25, 2024, 6:29am UTC](https://community.glideapps.com/t/visualisation-project-expert-quote-request/73585/12 "2024-05-25T06:29:03Z")

</div>

the quickchart pie chart does what I showed above but constructing it quickly becomes very complex and there are so many data points. This is the quickchart code before I convert to the url

```auto
"{
  type: 'pie',
  data: {
    datasets: [
          {
            labels: ['N➡️', '⬅️','', '', '', '', '', '', '', 'NE', '', '', '', '', '', '', '', '', 'E➡️', '', '', '', '', '', '', '', '', 'SE', '', '', '', '', '', '', '', '', 'S⬅️️', '', '', '', '', '', '', '', '', 'SW', '', '', '', '', '', '', '', '', '⬅️️W', '', '', '', '', '', '', '', '', 'NW', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',],
            data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 1,
            borderColor: 'white',
          },
          {
            label:'Ring 1',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'MHWH', 'Rybury', '', 'Combe Gibbet', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',],
            data:[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 160, 70, 60, 20, 50, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
            backgroundColor:['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
          {
            label:'Ring 2',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Tan Hill', 'Milk Hill', '', 'Uffington WH', '', '', '', '', '', '', '', '', '', '', '', '',],
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 100, 60, 90, 45, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
          {
            label:'Ring 3',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Golden Ball', '', 'Liddington', '', 'Liddington', '', '', '', '', '', '',],
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 135, 65, 20, 10, 50, 40, 40, 0, 0, 0, 0, 0,],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
          {
            label:'Ring 4',
            labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Sugar', '', 'White Hill', '',],
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 200, 20, 60, 10, 70,],
            backgroundColor: ['rgb(18, 60, 92)','rgb(255, 0, 102)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(18, 60, 92)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','rgb(204, 204, 204)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','rgba(255, 0, 102,0.2)','white','rgb(165, 230, 186)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white','white','rgba(255, 0, 102,0.2)','white','rgba(255, 0, 102,0.2)','white',],
            borderWidth: 2,
            borderColor: 'white',
          },
        ],
      },
  options: {
    rotation: (-0.5 * Math.PI)-((2*Math.PI) / 360)*2.5,
    cutoutPercentage: 20,
    plugins: {
      doughnutlabel: {
        labels: [
          {
            text: '🍃',
            color: 'black',
            textAlign: 'center',
            font: {
              size: 150,
              weight: 'regular',
            },
          },
        ],
      },
      datalabels: {
        formatter: (val, ctx) => {
          const label =
            ctx.chart.data.datasets[ctx.datasetIndex].labels[ctx.dataIndex];
          return `${label}`;
        },
        color: function(context) {
              var index = context.dataIndex;
              var label = context.dataset.labels[index];
              return index < 72 ? 'white' :
                  'black';
        },
        rotation: [-90,-85,-80,-75,-70,-65,-60,-55,-50,-45,-40,-35,-30,-25,-20,-15,-10,-5,0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,-90,95,100,105,110,115,120,125,130,-45,140,145,150,155,160,165,170,175,0,185,190,195,200,205,210,215,220,45,230,235,240,245,250,255,260,265,-105,10,75,295,330,5,-115,-35,40,287.5,332.5,-117.5,-17.5,205,40,250,295,335,-85,25,245,280,320,],
        font: {
          size: 22,
        },
      },
    },
  },
}"

```

I’m not familar with chartjs to know if it could provide a solution