Implementing i18n support for Grafana dashboards




As @wtf is currently working on i18n support for Grafana dashboards, the generic grafana-metadata-api might also help him along for properly addressing multiple JSON files for different languages through a single virtual datasource.

Example implementation / Blueprint


Für Deine Arbeiten habe ich Dir auf weather nun testweise die Datei



HTTP Zugriff

Der Zugriff darauf klappt konkret folgendermaßen:

# GET request with filename in URI

# POST with filename as target
echo '{"target": "i18n/test.en.json"}' | http POST

Grafana Zugriff

Wie man das dynamisch und variablengesteuert à la


von der Datenquelle bezieht, ist unter grafana-metadata-api: Howto: Publish and consume your own JSON metadata file beschrieben. Vielleicht hilft es Dir weiter.

Developing the »grafana-metadata-api«
Erarbeitung eines kanonischen Datenschemas für imkerliche Meßdaten

The “i18next” JSON translation file format


When thinking of i18n and Javascript, we might consider to use the JSON file layout of the translation files as defined by the i18next internationalization-framework written in and for JavaScript.


i18next gives us access to the whole GNU gettext ecosystem including web-based collaborative translation tools and platforms like

See also i18next » Introduction » Ecosystem.

JSON Format i18next JSON v3

In fact, it’s really just key => value ;], see JSON Format - i18next documentation.


Example from the wild



Grafana i18n

This is about i18n support for Grafana itself.

Grafana metadata mapping

These fine discussions and projects dedicate themselves to convenient metadata mapping through JSON files over HTTP and beyond.



JSON data sources

1. simple-json-datasource

2. grafana-json-datasource (successor)




Wishlist / Feature requests / Requirements

  • Address multiple JSON resources (e.g. i18next files) through single virtual datasource.
  • Perform simple key => value lookup and return value.
  • Value should be usable from a template variable assignment using a convenient query syntax.



Just trying the GrafanaSimpleJsonValueMapper on eltiempo.


git clone /opt/GrafanaSimpleJsonValueMapper
cd /opt/GrafanaSimpleJsonValueMapper
yarn install


cat /opt/GrafanaSimpleJsonValueMapper/server/data.json
  "en": {
    "close": "close",
    "mean": "mean"
  "fr": {
    "close": "Fermer",
    "mean": "Moyenne"
  "nl": {
    "close": "sluiten",
    "mean": "gemiddelde"


cd /opt/GrafanaSimpleJsonValueMapper
yarn start




Add SimpleJson datasource


Add variable

List of variables




Bottom line

Re. Wishlist / Feature requests / Requirements

Address multiple JSON resources (e.g. i18next files) through single virtual datasource.

Not there yet. Let’s just pack all into a single file as outlined above then.

Perform simple key => value lookup and return value.

Lookup expression like {"data": "$lang", "id": "mean"} feels reasonably simple.

Value should be usable from a template variable assignment using a convenient query syntax.

Looks like this works.


We recognize

  • It’s still a hassle to enumerate all translation strings as Grafana variables. With the current implementation, it will be tedious to maintain. Sigh.

  • It’s not yet possible to directly use multiple i18next translation files as outlined above.



The variables in text panels and metric aliases do not refresh at all when toggling dependent ones.


While it doesn’t work with the Simple JSON datasource, it does work with InfluxDB.


Placeholder for @wtf’s way of storing this into and querying it from InfluxDB.




A bunch of terms “reference codes” and its translations are transformed in influxDB’s lineprotocol like this (everything is a tag, the field has a dummy-value):

term,ref=close,en=close,nl=sluiten,fr=Fermer,de=schließen v=1
term,ref=mean,en=mean,nl=gemiddelde,fr=Moyenne,de=Mittel v=1
term,ref=selected,en=selected,nl=geselecteerd,fr=Sélectionné,de=ausgewählt(e) v=1
term,ref=hourly,en=hourly,nl=per\ uur,fr=par\ heure,de=stündlich v=1
term,ref=daily,en=daily,nl=per\ dag,fr=par\ jour,de=täglich v=1
term,ref=station,en=station,nl=station,fr=station,de=Station v=1

and stored in an influx database, here named vmm_i18n:
$ curl -i -XPOST 'http://localhost:8086/write?db=vmm_i18n' --data-binary @linefeed.txt

and then added as a datasource to Grafana. In this example dashboard there is first a variable named $lang of the type “Custom” with a list of the language-codes available:


Then for every term used a variable will be created which calls the term-code (here: particulateMatter) together with the currently selected value of $lang:

SHOW TAG VALUES FROM term WITH KEY IN ("$lang") WHERE "ref" = 'particulateMatter'.

This variable is now named $t_particulateMatter and can be used in every corner of your dashboard (panel headings, html-texts, graph-aliases, …) and changes automagically to another language when another is selected for variable $lang. This can be done in the variable’s drop-down – or within the paramater var-lang=xy in the dashboards’s URL.

See the test-dashboard directly starting in english, dutch, french or german and don’t forget to click within the languge-dropdown.

See two embeds of one and the same panel (showing the vocabulary) - in two languages:

While just changing the paramater in the URL used in “src” of the iframe: