Windrose in Grafana emulieren / simple compass rose by range mapping

Native circular graphs beside the known gauge style is not a known strength of grafana. So a friend used the capability to map Unicode strings to value ranges and display one of several UTF arrow symbols based on an incoming wind direction value!

windrose-wetter

simple-arrows-UTF

Don’t be curious about the overlapping values; here they won’t flicker that much! ;)

JSON snippet (when displyed here, UTF chars should look as intended):

          "rangeMaps": [
        {
          "from": "0",
          "text": "↓",
          "to": "22.5"
        },
        {
          "from": "22.5",
          "text": "↙",
          "to": "77.5"
        },
        {
          "from": "77.5",
          "text": "←",
          "to": "112.5"
        },
        {
          "from": "112.5",
          "text": "↖",
          "to": "157.5"
        },
        {
          "from": "157.5",
          "text": "↑",
          "to": "202.5"
        },
        {
          "from": "202.5",
          "text": "↗",
          "to": "247.5"
        },
        {
          "from": "247.5",
          "text": "→",
          "to": "292.5"
        },
        {
          "from": "292.5",
          "text": "↘",
          "to": "337.5"
        },
        {
          "from": "337.5",
          "text": "↓",
          "to": "360"
        }
      ],

There are many other arrows, c+p as needed in the text field of range mappings (actual appearance here will differ on different machines):

←, ↑, →, ↓, ↔, :arrow_up_down:, :arrow_upper_left:, :arrow_upper_right:, :arrow_lower_right:, :arrow_lower_left:, ▲, ▼, :arrow_backward:, :arrow_forward:, ➔, ➘, ➙, ➚, ➛, ➜, ➝, ➞, ➟, ➠, :arrow_right:, ➢, ➣, ➤, ➥, ➦, :arrow_right_hook:, :leftwards_arrow_with_hook:, ↚, ↛, ↜, ↝, ↞, ↟, ↠, ↡, ↢, ↣, ↤, ↦, ↥, ↧, ↨, ↫, ↬, ↭, ↮, ↯, ↰, ↱, ↲, ↴, ↳, ↵, ↶, ↷, ↸, ↹, ↺, ↻, ⟲, ⟳, ↼, ↽, ↾, ↿, ⇀, ⇁, ⇂, ⇃, ⇄, ⇅, ⇆, ⇇, ⇐, ⇑, ⇒, ⇓, ⇔, ⇌, ⇍, ⇏, ⇕, ⇖, ⇗, ⇘, ⇙, ⇙, ⇳, ⇚, ⇛, ⇜, ⇝, ⇞, ⇟, ⇟, ⇟, ⇠, ⇡, ⇢, ⇣, ⇤, ⇥, ⇦, ⇨, ⇩, ⇪, ⇧, ⇫, ⇬, ⇭, ⇮, ⇯, ⇰, ⇱, ⇲, ⇴, ⇵, ⇶, ⇷, ⇸, ⇹, ⇺, ⇺, ⇻, ⇼, ⇽, ⇾, ⇿, ⟰, ⟱, ⟴, ⟵, ⟶, ⟷, ⟸, ⟹, ⟽, ⟾, ⟺, ⟻, ⟼, ⟿, ⤀, ⤁, ⤅, ⤂, ⤃, ⤄, ⤆, ⤇, ⤈, ⤉, ⤊, ⤋, ⤌, ⤍, ⤎, ⤏, ⤐, ⤑, ⤒, ⤓, ⤔, ⤕, ⤖, ⤗, ⤘, ⤙, ⤙, ⤚, ⤛, ⤜, ⤝, ⤞, ⤡, ⤢, ⤣, ⤤, ⤥, ⤦, ⤧, ⤨, ⤩, ⤪, ⤭, ⤮, ⤯, ⤰, ⤱, ⤲, ⤳, ⤻, ⤸, ⤾, ⤿, ⤺, ⤼, ⤽, :arrow_heading_up:, :arrow_heading_down:, ⤶, ⤷, ⤹, ⥀, ⥁, ⥂, ⥃, ⥄, ⥅, ⥆, ⥇, ⥈, ⥉, ⥒, ⥓, ⥔, ⥕, ⥖, ⥗, ⥘, ⥙, ⥚, ⥛, ⥜, ⥝, ⥞, ⥟, ⥠, ⥡, ⥢, ⥣, ⥤, ⥥, ⥦, ⥧, ⥨, ⥩, ⥪, ⥫, ⥬, ⥭, ⥮, ⥯, ⥰, ⥱, ⥲, ⥳, ⥴, ⥵, ⥶, ⥷, ⥸, ⥹, ⥺, ⥻, ➧, ➨, ➩, ➪, ➫, ➬, ➭, ➮, ➯, ➱, ➲, ➳, ➴, ➵, ➶, ➷, ➸, ➹, ➺, ➻, ➼, ➽, ➾, :arrow_left:, :arrow_up:, :arrow_down:, ⏎, ⬎, ⬏, ⬐, ⬑, ☈, ☇, ⍃, ⍄, ⍇, ⍈, ⍐, ⍗, ⍌, ⍓, ⍍, ⍔, ⍏, ⍖, ⍅, ⍆, ⬈, ⬉, ⬊, ⬋, ⬌, ⬍, ⬀, ⬁, ⬂, ⬃, ⬄

(Unicode set from https://github.com/unicode-table/unicode-table-data/blob/master/data/sets.txt ) another source here: https://symbl.cc/en/collections/arrow-symbols/

2 Likes

Hey @weef,

this is so cool, thanks for sharing!

There are also other, more rich wind rose diagrams out there. My personal favorites are from AmatYr by Tor Hveem:
image
image

They originate from About WindHistory.com and you can also see them in action at http://yr.hveem.no/.

Maybe someone will pick this up and provide them as addons for Grafana at some time in the future ;]. Nevertheless, the emulated one described by you will just keep on rocking - it’s so simple yet beautiful, kudos to your friend!

Cheers,
Andreas.

1 Like

yes - @wtf now got an invitation for this as he gets citated here ;)

btw - only three or five ‘adjacent’ arrows also could show a tendency: ➘, ➙, ➚ …

1 Like

one simple line has been added to handle exceptions reasonably (depending on your /NaN/nil/null/void/ designator):

compass-nil

1 Like

there is now a ‘real’ windrose plugin for Grafana; will be expensive as it uses plotly - and looks nice:

1 Like

This looks beautiful, thanks for sharing. Check this, @tonke and @Basti!

P.S.: Installed on all of the three instances we are running, swarm.hiveeyes.org, luftdaten.hiveeyes.org and weather.hiveeyes.org. Have fun!

1 Like