HTML Graphics plugin, read toggle value

Grafana Dashboards
,
1

Hi all,

I am displaying data using HTML graphics plugin. I implemented a toggle switch for customization. My problem is I can not read the value of the toggle in grafana.
you can see the toggle here, it works perfectly: Open the console and you will see the boolean value returning from the toggle.

If I copy the code to my grafana, for some reason I can not read the boolean value in the console, the value is always null.

Any help with this?

Thank you

2

Grafana OSS or cloud?

1 Like
3

Hi Yosiasz,

Grafana Cloud.

4

I read this post by @grant2

Not sure if it means cloud has this disable_sanitize_html set to false…

Maybe try installing OSS and see if it works after you set

[panels]
disable_sanitize_html = true

in the grafana config.

1 Like
5

Javascript is not the issue if you install the plugin “HTML graphics” it basically uses javascript, HTML and CSS to create your own custom panel. I am using javascript to get the information from DB queries and transform the HTML to display the data BUT that toggle I want to implement will allow me to customize the info before.
Normally you use document.querySelector to get the class in the HTML and then play with it in your code, for some reason I can not get that class (Which is in my HTML code).
I think the javascript is aiming to another point or is been blocked for some reason that I do not know yet. :frowning:

6

so you have a function but what is calling the function?

try running it sin function

const checkbox = document.querySelector('.toggle-input');    
console.log(checkbox.checked);
1 Like
7

The onClick in my input is calling the function. If I run it without the functions it shows an error saying that the checkbox is null.
I think it is something missing in my HTML…

`  <div class="body">    
      <label class="toggle">
        <input type="checkbox" class="toggle-input" checked onClick=toggle()>
        <span class="toggle-label" data-on="On" data-off="Off"></span>
        <span class="toggle-handle"></span>
      </label>
  </div>`

It is weird that I do not see any error on my codepen page.

1 Like
9

It worked perfectly!!!

Thank you so much!.

1 Like