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.

Content:

<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.