Getting Javascript to run on page load

Grafana Dashboards
1
  • What Grafana version and what operating system are you using?
    Version 9.1.0

What are you trying to achieve?

I am trying to get Javascript in a text panel to run on page load.
I am trying to disable the title bar of each panel because the dropdown options really get in the way of using the panel as a button (with data links to other dashboards).

I’ve gotten a Javascript button to successfully hide and unhide the title bars, sooo great! However I am trying to get the same script to run on page load so the user does not have to click a button. I am not having any success here.

I have no Javascript experience, I work in industrial controls, not web development, so if I’m doing something stupid, please be gentle.

Here is what I have. Does anyone have any suggestion on how to get this snippet to run on page load? From all I can find “body onload” should have done it.

<body onload="TOGGLER();">
<br>
<br>  
<input type="button" onclick="TOGGLER()" value="Button" id="toggler-button"/>  
  <script type="text/javascript">
  var TOGGLE = 0
  function TOGGLER() {
    TOGGLE = TOGGLE ^ 1 
    if (TOGGLE == 1){
      document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';
      [].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
      el.style.visibility = 'hidden';});
      
      document.getElementById('toggler-button').value='In Run Mode'; 
      document.getElementById('toggler-button').style.backgroundColor='Green'; 
    }
    else{
      document.getElementsByClassName('panel-header')[0].style.visibility = 'visible';
      [].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
      el.style.visibility = 'visible';});
      document.getElementById('toggler-button').value='In Edit Mode'; 
      document.getElementById('toggler-button').style.backgroundColor='Red'; 
    }
  }
  </script>
</body>

Thanks!

2

please provide sample data for this?

iotname,date,value
bolt,2022-09-14 13:00:00,35.6

Unless your data is from SQL Server. If I remember right you work with SQL @westonforbes

And what is it you want to display for the users from the data?

3

I’m sorry, I guess I don’t understand. There is no sample data to provide. This question doesn’t relate to my backend at all, its a frontend thing. This is simply to modify existing grafana panels on load.

Maybe I need to take another whack at explaining what I am up to?
I have a home dashboard that has a bunch of machine summary displays like this.

image
image1143×222 58.9 KB

The user is able to click any of the panels and it’ll take them to the appropriate dashboard… thats all sorted out fine.
The problem is that the translucent panel header gets in the way (you can see it in the middle display “HST-02” which reduces my effective button clicky area by half. I could put the panel header back in, so its not in the way but that totally ruins the cosmetics I am going for.

I’ve effectively solved half the issue by using the previously provided javascript. However a user has to click this little javascript button ive made to make it work. I’d like the script to load on pageload so the user does not have to click the button.

image

Thanks!

1 Like
4

is this image you show a Text Panel?

image

5

I might going blind but I do not see “the problem”

6

Haha, yeah. Its hard to tell cause its such a faint translucence but its the title bar when there is no title entered. Here, I altered a stat panel to include the title…

image
image1149×85 13.2 KB

and then when I remove the title (because its redundant information and just doesn’t fit with the design choices)…
image

…it then makes a ever-so-slight translucent title bar over the stat that appears on mouse-over
image
…can you see the upsidedown chevron right next to (mins)?

Clicking anywhere in the bar-space pulls up the context menu which is frustrating as I’d like the full stat panel space to be clickable for the dashboard I have it linked to, instead users keep pulling up the context menu that has “Inspect, share, view, etc” in it. For our less-computer-literate users, it completely derails them.

I’ve solved this root issue through Javascript and a button, but now I’m just trying to get the javascript to run on page load.

1 Like
7

So the Stat Panel gets its data from the ether through some jedi magic?
If you want help you got to provide the sample data. How could we test it locally without sample data and how you got this visualization put together?

8

ok indeed I am blind. Well I am color blind and some color combinations throw me off

1 Like
9

I’m saying the Stat panel itself is irrelevant.
You can do a panel like this
image
and just set the panel title to a blank field and that would replicate the problem.
Heres the same panel with no title
image

I’ve written javascript that modifies the page to remove that ghosting, so that part of the problem is pretty much solved. The question is why doesn’t this code snippet from my first post
image
successfully execute the TOGGLER(); function on page load? Again, I know squat about Javascript so it could be something silly I am doing or maybe its something a bit more in the weeds I don’t understand. I’m hoping some of the Grafana front-end gurus can help.

1 Like
10

@yosiasz
I was thinking maybe it was something with nesting my

<body> </body> and <script>

tags in some specific order, or maybe there needs to be a function prototype declaration like in C programming, but every little variation of tweaking hasn’t gotten it to execute on page load, so I dunno.

I was thinking maybe it was a restriction about running unsanitized javascript… I already changed my setting disable_sanitize_html to true, but maybe Grafana also protects rogue stuff from running at page load? Dunno…uninformed theories at this point.

11

:joy: I implemented it using svg panel but now I cant edit anything on the whole panel including the svg panel

image
image1333×883 59.2 KB

I would recommend a different approach for this dashboard - table plugin

image
image1007×222 37.7 KB

12

Hmmm… Thats a interesting work-around idea you have.
…I guessing you’re using the SVG plugin just because it has javascript functionality.
I might fiddle with that too.
Also, the table plugin is a good idea as well.
I’m gonna tinker around a bit. Those are good leads. I’ll follow up when I find a solution so future lost souls can follow.
Thanks again @yosiasz

13

:joy: I implemented it using svg panel but now I cant edit anything on the whole panel including the svg panel

P.S. I take no responsibility for my shitty code bricking people instance… :joy: @yosiasz

1 Like
14

another way is to not allow the javascript to hide the panel that has the javascript

  [].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
      console.log('el', el)
      if (!el.dont.want.hide.you.div)
         el.style.visibility = 'hidden';
      end

But all this is hacking. I would not recommend it at all.
That is why I always ask for sample data and what if your requirement.
When someone asks how do I do this in this plugin, it can and usually take us into a rabbit hole.
requirements in plain English dont. no :rabbit2:

15

OK…solved…ish…I got a satisfactory solution but its not exactly the original goal.

Disabling Headers/Titlebars on page load

Going off of some of @yosiasz helpful work to solve the problem, I wound up using the SVG plugin to implement my fix. The SVG plugin has a field that’ll run javascript on page load, there is a code field under Events → onHandleMetric(ctrl, svgnode)

image

The code below will successfully disable the title bars of each panel each time the page loads.

:warning:CAUTION: SINCE THIS CODE DISABLES TITLE BARS, IF YOU DON’T ALREADY HAVE A EFFECTIVE WAY TO REENABLE THEM, YOU CAN BE IN QUITE THE PICKLE AS IT HIDES YOUR ABILITY TO EDIT FIELDS.

document.getElementsByClassName('panel-header')[0].style.visibility = 'hidden';
[].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
el.style.visibility = 'hidden';});

:warning:I found that this panel has to be within field-of-view on page load otherwise it will not execute until you scroll down to it. I wound up using this limitation as a opportunity to slap a company logo header at the top of the page as a fancy SVG, it actually looks better than before.

Re-Enabling Headers/Titlebars

At the bottom of the page you will need to have a button that re-enables headers/title bars so you can make changes as a admin when needed.

Create a simple text panel and use the following code.

<center>
<input type="button" onclick="TOGGLER()" value="Show Panel Headers" id="toggler-button"/>  
</center>
  <script type="text/javascript">
  var TOGGLE = 0
  function TOGGLER() {
      document.getElementsByClassName('panel-header')[0].style.visibility = 'visible';
      [].forEach.call(document.querySelectorAll('.panel-header'), function (el) {
      el.style.visibility = 'visible';});
  }
</script>

This will give you access to the title bar (and thus the dropdown with the edit button) when you need it as a admin.

My Implementation

Here I have my company logo in the SVG plugin panel. It serves as a nice header and a mechanism to execute the desired code.

image
image1151×469 129 KB

At the bottom of my home page I have a small “Show Panel Headers” button that’ll allow me to get my headers/title bars back when I want to access the context menu features of them.

image
image790×207 16.3 KB

Thanks to @yosiasz for helping me for like the 10th time.

16

I do not recommend this above approach. :smile_cat: