Skip to main content

JavaScript Code

JavaScript Code allows adding Handlebars helpers and Event handlers.

Version

Supported since Dynamic Text panel 2.2.0.

JavaScript code in the Dynamic text panel.

Parameters

ParameterDescription
dataData from data sources. Depends on the selected Every Row and All Rows option consists of one or many rows of data.
getLocale()Returns user's locale: 'en', 'fr', 'es', etc.
handlebarsHandlebars library.
timeRangeTime range of the current dashboard. Added in 3.1.0.
timeZoneTime zone of the current dashboard. Added in 3.1.0.
locationServiceThe locationService works with browser location and history. Added in 3.1.0.
replaceVariablesThe replaceVariables() function to interpolate variables. Added in 3.1.0.

Custom Handlebars helper

A custom handlebars helper can be added to replace the field's value using a pattern.

{{replace Test "Pattern" "Replaced"}}

JavaScript Code

handlebars.registerHelper("replace", (context, pattern, replacement) =>
context.replace(pattern, replacement)
);
A custom Helper to replace data in the returned data.
A custom Helper to replace data in the returned data.

Event Handler

A custom event handler can be added to react to a button click.

<button onclick="myFunc()">{{test}}</button>

JavaScript Code

myFunc = () => {
alert("Bonjour!");
};

Internationalization

Grafana 9 supports Internationalization, which is not fully provided to plugins yet.

Meanwhile, we can use getLocale() method to get a value for the selected locale and show phrases from a defined dictionary.

Content

{{translate "Hello"}}

Default Content

{{translate "Default"}}

JavaScript Code

docs/volkovlabs-dynamictext-panel/translate.js
loading...

Time Zone and Range

Display the selected dashboard, browser time zone and range in Grafana.

Content

<h2>Dashboard {{tz}}</h1>
<h2>Browser {{browser}}</h1>

```json
{{{json (range)}}}
```

JavaScript Code

handlebars.registerHelper('tz', () => timeZone);
handlebars.registerHelper('range', () => timeRange);
handlebars.registerHelper('browser', () => Intl.DateTimeFormat().resolvedOptions().timeZone);
Dynamic Text allows displaying updated time zone and range in Grafana.
Dynamic Text allows displaying updated time zone and range in Grafana.