Automatically Scroll Through or change a Variable

I have a dashboard showing different utility usage data (gas, water, electricity etc). The dashboard elements are common to each. I have created a custom variable to allow the user to scroll through the different utility types, but is the anyway you can get the variable to automatically change on a time basis so the dashboard cycles through the different types without user interaction?

@mailc1d6 You can add a Dynamic Text panel with JavaScript code to update variable based on custom logic:

hey @mikhailvolkov how would we go about changing/updating a variable in Dynamic Text Panel? For example, let’s say I’ve got variable statusSelector and the values can be online/offline/unknown, and i would like to add an onClick to a div to essentially update the variable to ‘offline’ without having to use links? it’s just not very clear to me from the docs

@zejlx You can use locationService to update variables:

locationService.partial({ "var-name": resp["name"] }, true);

Alternatively, check out the Variable panel with minimized and button layout:

@mikhailvolkov hmm im not sure if im missing something here, so what i’m trying to do is to set an onclick to a div in dynamic text to update a variable status_selector.
this is what it looks like, and after pressing the online or offline part, i want the dashboard variable status_selector to change to either online or offline.

I have tried adding onclick=‘locationService.partial({ “var-status_selector”: resp[“online”] }, true);’
to the div but unfortunately that doesn’t work, am i misunderstanding something here?

@zejlx If you have Sanitization enabled, then onclick events are blocked by Grafana:

I’ve got it disabled, everything else works fine, it’s just that I can’t get variables to change correctly :confused:

if i want a button that updates the current dashboard variable value, and have a custom variable “status_selector” which can be “online”, or “offline”,

onclick=‘locationService.partial({ “var-status_selector”: resp[“online”] }, true);’

is this the correct way to do so in Dynamic Text?

1 Like

@zejlx That’s correct. Do you see it updated in the URL parameters?

Try to use the static value instead of rest["online"], maybe it’s empty.

@mikhailvolkov URL is staying exactly the same, still showing “&var-status_selector=offline”, using a static value isn’t helping either, it’s just not doing anything… i know onclicks work, for example onclick=“alert(‘test’)” works no problem, its just the variable that doesnt want to change for some reason… any other ways you can think of?

@zejlx Send me screenshot of your dashboard variable configuration.

If you change value of the dashboard variable manually at the top, do you see it?

@mikhailvolkov yep when i change it manually, the link changes as well, i just can’t seem to get it to change through an onclick which is something i would like to do

Also, just to clarify exactly what i’m doing and why: in the first photo i posted, with the Online and Offline count, i would like to add onclicks to the divs, so when a user presses the Online div, the variable status_selector will change to Online (for certain charts etc), same for Offline.

@mikhailvolkov did you come up with any new ideas for this by any chance? because im totally stuck with this issue… i can get this to work through HTMLGraphics plugin, but i’m struggling with the design and that’s a very important aspect for us, so would very much rather stick with DynamicText if possible… does it work on your side if you set up a new dashboard, with a custom variable and a button with an onclick function? if so, could you share it with me so i can have a look at the code and try to replicate it, althought i believe i tried out all my options? im sure its some tiny little mistake im doing somewhere…

@zejlx This is the way.


<button onclick='myFunc()' class="button">Button</button>

JavaScript after Content render:

myFunc = () => {
  context.grafana.locationService.partial({ "var-status_selector": false }, true);
1 Like

okay so it was the context.grafana part i was missing all along, works fine now! I appreciate your help!

1 Like

@zejlx Thank you for letting me know what was missing.

Our documentation is behind recent developments and we are working on improving it.

Thanks. Sorry, I’m completely new to this and don’t really understand how to implement what you have suggested. How would using the lcoationService allow it to automatically scroll through (lets say) 3 different variables (like electricity, water, gas etc etc). How does this then get passed to the Influx query?

1 Like

@mailc1d6 There are a lot of information about dashboard variables around. Check out one of our blog post and videos on our YouTube channel how to work with Dynamic Text panel.