JavaScript Code
Dynamic Text Panel supports the integration of JavaScript code snippets that can add Handlebars helpers and event handlers.
Dynamic Text Panel supports JavaScript starting from version 2.2.0.
Parameters
Parameter | Description |
---|---|
data | Data from data sources. The display of one or multiple data rows is determined by the Every Row and All Rows options respectively. |
eventBus | Publish and subscribe to application events. Supported since Dynamic Text Panel 4.0.0. |
getLocale() | Returns the user's locale: 'en', 'fr', 'es', and so on. |
handlebars | Handlebars library. |
locationService | The locationService works with the browser location and history. Supported since Dynamic Text Panel 3.1.0. |
replaceVariables | The replaceVariables() function to interpolate variables. Supported since Dynamic Text Panel 3.1.0. |
timeRange | Time range of the current dashboard. Supported since Dynamic Text Panel 3.1.0. |
timeZone | Time zone of the current dashboard. Supported since Dynamic Text Panel 3.1.0. |
Custom Handlebars helper
You can add a custom Handlebars helper to replace the field's value according to some pattern.
JavaScript Code
Here we register a function with the replace
helper that takes three arguments:
context
is an object that contains the data for the template.pattern
is the text to be searched for.replacement
is the text to be used to replace the pattern.
Then we call this function and pass the pattern
and replacement
arguments to it.
handlebars.registerHelper("replace", (context, pattern, replacement) =>
context.replace(pattern, replacement)
);

Event Handler
To respond to a button click, you can add a custom event handler.
<button onclick="myFunc()">{{test}}</button>
JavaScript Code
This code snippet defines a function called myFunc
. The function takes no arguments and returns no value. The body of the function calls the alert()
function to display the text "Bonjour!" in a dialog box.
myFunc = () => {
alert("Bonjour!");
};
Internationalization
Grafana 9 offers internationalization, which plugins do not yet have full access to.
Meanwhile, you can use the getLocale()
method to get a value for the chosen locale and display terms from a defined dictionary.
Content
This code snippet uses the translate
helper to translate the text "Hello" to the current language. Text translation will be performed if the translate
helper is defined, otherwise the text "Hello" will be displayed.
Default content
This code snippet uses the translate
helper to show the translation of a default message if the query does not return any results.
JavaScript Code
loading...
Time Zone and Range
You can display the selected dashboard, browser's time zone, and time ranges 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);

Automatic scrolling
If the table does not fit into the allocated panel area, you can add automatic scrolling using JavaScript with an adjustable interval.

Content
<table id="dataTable" width="100%">
<tr>
<th>Title</th>
<th>Date</th>
<th>Category</th>
</tr>
{{#each data}}
<tr>
<td>{{title}}</td>
<td>{{date pubDate 'MMM, DD YYYY'}}</td>
<td>{{category}}</td>
</tr>
{{/each}}
</table>
JavaScript Code
loading...
Unique values
You can sort out unique values from the data
object using the unique
helper that was implemented by the community member goncalobsantos.
Content
<div>{{#each (unique data "hostname.keyword")}}{{this}}; {{/each}}</div>
JavaScript Code
handlebars.registerHelper("unique", (context, key) => {
return [...new Set(context.map((item) => item[key]))];
});
Dashboard Variables
You can use the replaceVariables
function to replace dashboard variables in the JavaScript code.
const bonjour = replaceVariables("${variable}");
console.log(bonjour.toUpperCase())