Windrose in Grafana emulieren / simple compass rose by range mapping

wind
grafana

#1

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.

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

(Unicode set from https://github.com/unicode-table/unicode-table-data/blob/master/data/sets.txt)


#2

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 http://windhistory.com/about.html 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.


#3

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: ➘, ➙, ➚ …


#4

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

compass-nil


#5

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


#6

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!