Hi,
is there a way to use icons, e.g., Material Design (link) in stat panels based on the underlying value? Would be a great way to symbolize a certain status on one glace.
Any ideas?
Johannes
what is your data source? (please share sample data)
what version of grafana are you using?
Varous data sources, mostly direct JSON and InfluxDB. Using v9.1.1 right now.
1 Like
Waiting for you to provide a sample json data.
{
"id": 158,
"gridPos": {
"h": 2,
"w": 2,
"x": 6,
"y": 3
},
"type": "stat",
"datasource": {
"type": "grafana-simple-json-datasource",
"uid": "lxlCOCB7z"
},
"pluginVersion": "9.1.1",
"fieldConfig": {
"defaults": {
"mappings": [
{
"options": {
"false": {
"color": "yellow",
"index": 0,
"text": "Wach"
},
"true": {
"color": "blue",
"index": 1,
"text": "Schlafen"
}
},
"type": "value"
}
],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "text",
"value": null
}
]
},
"color": {
"mode": "thresholds"
}
},
"overrides": []
},
"options": {
"reduceOptions": {
"values": false,
"calcs": [
"last"
],
"fields": ""
},
"orientation": "auto",
"textMode": "value",
"colorMode": "background",
"graphMode": "none",
"justifyMode": "auto"
},
"targets": [
{
"datasource": {
"type": "grafana-simple-json-datasource",
"uid": "lxlCOCB7z"
},
"refId": "A",
"target": "0_userdata.0.HomeStatus.Johannes.Sleeping",
"type": "timeserie"
}
]
}
Sample data of your data 
not your dashboard
Tried to upload a screenshot, but it doesn’t work here. Don’t know why… So let’s try this:
I cant see any data. please post your json data not as image but as useable json data.
{
"yoha": "nes"
}
{
"val":false,
"ack":false,
"ts":1669111200016,
"q":0,
"c":"script.js.Zentralfunktionen.Home_Status.Status_Sleeping_setzen",
"from":"system.adapter.javascript.0",
"user":"system.user.admin",
"lc":1669102140052,
"common":{
"name":"Sleeping",
"desc":"Manuell erzeugt",
"role":"state",
"type":"boolean",
"read":true,
"write":true,
"def":false
},
"type":"state",
"native":{
},
"_id":"0_userdata.0.HomeStatus.Johannes.Sleeping",
"acl":{
"object":1636,
"state":1636,
"owner":"system.user.admin",
"ownerGroup":"system.group.administrator"
}
}
Hope this helps…
1 Like
Actually this all works fine. My question only was if there is a nice way in Grafana to replace certain values not with text but with nicer symbols.
1 Like
that is what we are trying to get at, a solution. but in order to help guide you to a solution we need sample data (which you have provided nice) and we need to identify which data points you want to plot with the icons.
So from the data you have provided which data point(s) do you want to plot ?
hope that makes sense otherwise it would just be guess work. and yes there could be a solution for this.
Ok…
"common":{
"name":"Sleeping",
is boolean. So for true I would like to show mdi:bed and for false mdi:bed-empty (source: icons). Today I use value mappings to convert it into real text but symbols would be nicer.
1 Like
More like this: Imgur: The magic of the Internet
Excuse my non-existent Photoshop skills.
1 Like
better than mine! So you could have n+1 beds horizontally
using apache eCharts grafana plugin (thanks @mikhailvolkov !)
1 Like
Emoji icons
I use emoji icons as unicode characters.
Most of them can be used by all browsers.
You can copy the characters to the clipboard from here: https://emojipedia.org/
Examples:
On Graph’s Legend:
On header of table:
On the menu:
On cells:
…or:
Images in the cells:
MacGyver’s CSS modding
I enabled the code to run in the html boxes in the configuration file.
[panels]
disable_sanitize_html = false
This way I can place a Text panel that has CSS formatting.
…and I inserted a background image to a Graph with a CSS hack:
2 Likes
@sancho1234 That’s amazing 
Thanks so much!
1 Like