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

Parameter	Description
data	Data 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.
handlebars	Handlebars library.
timeRange	Time range of the current dashboard. Added in 3.1.0.
timeZone	Time zone of the current dashboard. Added in 3.1.0.
locationService	The locationService works with browser location and history. Added in 3.1.0.
replaceVariables	The 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.

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.