HTML panel plugin - using data in html code

Grafana
1

Hi, I’m trying to use the html plugin and I need to use a value coming from the query (alias “Rotation”).
On the html section I have a piace of code like this

<g class="highcharts-series highcharts-series-1 highcharts-tracker" zIndex="0.1" transform="translate(10,10) scale(1 1)" style="" clip-path="url(#highcharts-5)">
    <path fill="#0a3e5d" d="M 0 -5 L 0 -5 102.85 -0.5 102.85 0.5 0 5 0 5 z" transform="translate(140,137.5) rotate(###HERE_MY_VALUE### 0 0)" stroke="#0a3e5d" stroke-width="1" zIndex="1"></path>
</g>

I need to send my query value where I put ###HERE_MY_VALUE### in the above code.
Within the java script section I’ve been able to get my query value in this way:

let arrayHxObj = ctrl.data[0].rows;
myvalue = arrayHxObj[0]["Rotation"];

Thanks

2

Hi @donatod

Have you set Have you set disable_sanitize_html to true in your configurations? You need to do that starting with v7.

See this thread for more details:

3

Thanks @mattabrams, I don’t want to use text panel but Html plugin. Moreover even on these link, I can see how to show the value (what I’m already able to do). I need to use this value within the html code in order to rotate an object to show

4

hi. Can i ask: what specific plugin are you using?

5

this one HTML plugin for Grafana | Grafana Labs
I’m able to show value directly in html, but I need to use it in the middle of the code as I posted above. Thanks a lot

6

have you tried chaning this configuration?:
"GF_PANELS_DISABLE_SANITIZE_HTML=true"

note that this does introduce new XSS vulnerabililties:

7

This is not the problem. I’m able to see the value within the panel, if I want it. What I’m not able to do is to pass it for more action within html code. If you look at my first message I need to pass the value where I wrote ###HERE_MY_VALUE###, and it is needed in order to make a rotation of the element. I cannot find the correct syntax to bind the js section to the html one.
Bytheway, HTML plugin is not not text plugin

8

@donatod you may be best off reaching out to the plugin developer directly (either via email or the plugin’s GitHub repo). This isn’t a very widely used plugin, and I suspect that there won’t be many people on this forum who are familiar with it.

My uninformed take is that what you’re trying to do is probably not possible. I think you need to set the HTML element’s rotation property in the JS code, rather than trying to inject a value into the HTML as you’re attempting to do.

9

Thanks Svet, I tried to contact him by email but no answer, yet. Honestly I don’t know where to start from, setting the HTML elements rotation property in the JS code. Any help on how to do it?

10

Hm…cautious to delve into this as I really have little idea how that plugin works. But maybe try this:

  1. In the HTML, give the element you want to modify a unique ID. E.g.
    <path id="thePath" fill=...
  2. In your JS, identify the element using e.g.
    let thePathElement = document.getElementById('thePath');
  3. Modify its property with something like
    thePathElement.transform.rotate = [myvalue, 0, 0];

This last one is a complete guess and almost certainly wrong. I’d suggest exploring the element’s actual properties (and figuring out what needs setting) using your browser’s dev tools.

Note that I noticed in the HTML plugin docs it states “HTML & CSS is encapsulated in a shadow root and will therefore not “leak” outside the control.” - depending on what exactly this means, the above may not actually work.

Also…I’m not quite sure what you’re using the plugin for, but if it’s showing and manipulating an SVG then I’d say that these days you probably have better options than a plugin which had a single alpha release 2 years ago and appears to be unmaintained. Check out e.g. ACE.SVG plugin for Grafana | Grafana Labs which is my go-to, or HTML graphics plugin for Grafana | Grafana Labs (which I haven’t used but also looks nice). Or SVG plugin for Grafana | Grafana Labs, which the HTML plugin you’re using appears to be based on.

1 Like
11

Thanks a lot @svetb, it works. After some adjustment the correct code is:

  1. HTML section:
    <path id="thePath" fill=...
  2. JS section:
    let myvalue = 20;
    let thePathElement = htmlnode.getElementById('thePath');
    thePathElement.style.transform = "translate(140px, 137.5px) rotate("+ myvalue +"deg)";
2 Likes
12

Anyway, I’ll give a look at the plugins you suggest, I agree with you on using some more updated plugin. What I need is to have a page with some alarms led (green/red) and a button for each one in order to reset it via HTTP/REST (with a pop up confirmation).
Do you think that thees SVG plugin would be the right choose?

13

Nice that you got it working!

I would say that all of these plugins do something quite similar, so I think the others should work for your requirements also (i.e. with buttons that trigger HTTP requests when clicked). Anyway, if the one you have now gets the job done for you then maybe there’s no rush to migrate.

1 Like
14

Sorry @svetb, In some case because of the result I get, I need to add a vertical scroll bar. I made some test using css section, but always I get a fix visible bar. Any tip?

15

I’m sorry, that’s not something I have any experience with. I suspect the answer is somewhere out there on the Internet. (I don’t think what you need here is specific to Grafana or the HTML plugin…probably more of a general CSS question)

1 Like
16

This topic was automatically closed after 365 days. New replies are no longer allowed.