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
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?
@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);
};
okay so it was the context.grafana part i was missing all along, works fine now! I appreciate your help!
@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?
@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.