Dynamic Text plugin for Grafana | Use HTML, Markdown, JavaScript and CSS | Community use cases

The Dynamic Text panel is a mighty Grafana plugin to convert any monotonous bulk of data into vibrant, effortlessly comprehended visualization.
In this video, I touch upon the main features and panel options along with demonstrating community use cases.

The latest plugin review video

LINKS FROM THE VIDEO

CHAPTERS
0:00 Intro
0:41 Brief Functionality Overview
1:58 Helpers
2:39 DISABLE_SANITIZE_HTML setting
3:00 AutoScroll example
3:10 CSS Option
3:19 Dynamic Text Essence Schema
3:37 Using external JavaScript and CSS
3:56 Plotly in the Dynamic Text
4:54 Mermaid Diagrams in the Dynamic Text
5:18 Render Template option (Every Row versus All rows)
6:04 Using Grafana Threshold in the Dynamic Text
6:43 Grafana Event Bus
8:49 Dashboard variables in CSS
9:07 DateTime Picker use case
9:30 HTML tabs in the Dynamic Text

DISCOVER

GET IN TOUCH

#Grafana #GrafanaPlugins #Visualization #visualización

[volkovlabs]

Big thanks to all who shared their Dynamic Text examples. Incredible work! We are glad to be a part of such a bright community.

[pederjohnJedi]

I just want to say thank you for this! Its made my life so much better!! I have watched most of your instructional videos at least 3-4 times each and every time I learn something new!

[renobodyrenobody]

Brillant, plenty of ideas, I can wait to finish holidays and go back to the office to try some of them. Thanks a lot!

[rafa]

Great features. Can you please share link to your grafana to check online how it works?

[buganych]

Thank you very much for your great product! It took my data visualization to the next level!

Please tell me, I created a table using JS and now I want to make it so that when you hover over a word, it will be highlighted in the entire table, if it appears. To do this, I placed a script in the After Content Ready section:
wrapWordsInTable();
function wrapWordsInTable() {
const cells = td');

// Обработка каждой ячейки таблицы
cells.forEach(cell => {
const words = cell.innerText.split(/\s+/); // Разделение текста на слова
cell.innerHTML = ''; // Очистка ячейки

// Создание спана для каждого слова
words.forEach(word => {
const span =
span.className = 'word'; // Добавление класса
span.innerText = word; // Установка текста спана
span.addEventListener('mouseenter', () => highlightWords(word)); // Событие при наведении
span.addEventListener('mouseleave', () => removeHighlight()); // Событие при уходе

cell.appendChild(span);
')); // Добавление пробела
});
});
}


And the text turned into span. But the problem is that I now need to handle the hover event functions:
// Функция для подсветки слов
function highlightWords(word) {
const spans =
spans.forEach(span => {
if (span.innerText === word) {
// Добавление класса подсветки
}
});
}

// Функция для удаления подсветки
function removeHighlight() {
const spans =
spans.forEach(span => {
// Удаление класса подсветки
});
}
And I don't know how to implement this. Help, please, or at least hint how to implement my idea.
Thank you very much in advance

[arcanisarcanis]

Дарья, здравствуйте! Расскажите, пожалуйста, как использовать EventBus в echarts.
Это максимально приблизит графану к BI инструментам.

[thestrangevanindastreet]

Thank you for the plugins, I really appreciate them! One thing I'm struggling with is using the data I've manipulated in dynamic text using JS as a datasource in another panel. Does anyone have any ideas on how I can achieve this?

[Rob-vo]

This is very cool! However, it does not fit my use case:

I am using Apache ECharts Panel, and want to display helpful information to the user (like current variable values) when a query does not return data. For example, when I detect no data in data.series.fields etc., I would return a special option object to display info which could help the user understand what happened.

Anyone know how to achieve this?

PS: Thank you so much for the amazing work

[khalinigor]

Where can I find the code from content and cssstyle blocks for the sample on the screenshot.png?

[atulk]

How can we access multiple queries with thier reference id using javascript?

[adilbhati]

If I have price column then it display properly using following script
{{#each data}}
{{price}}
{{/each}}
I want to know how to use script for author.name as I am unable to use and it display blank

[pranitham]

where can we find the external extension option

[OferYachimovitz]

I am trying using fieldset tag in dynamic text plugin - no styling (<fieldset > <legend>Test</legend> </fieldset>) - does not work I have set disable html sanitation to true - any idea - thanks