Hello,
I’m using the https://grafana.com/grafana/plugins/aidanmountford-html-panel plugin together with some lines of javascript code to configure a panel. Now, I want to update a dashboard variable.
Could you provide me a javascript code snippet which updates a dashboard variable?
I’m not familiar with the plugin you linked to, but here’s how you can update a variable from within a plugin:
If I understand it correctly, the documentation describes the use case for someone who developes a plugin. My use case is that I just use an existing plugin. In the HTML plugin mentioned above, I can execute HTML and javascript code.
If I execute the Typescript import statement from the API reference mentioned above, I get following error:
html_ctrl.js:196 SyntaxError: Cannot use import statement outside a module
at Function (<anonymous>)
at HTMLCtrl.setHandleMetricFunction (html_ctrl.js:228)
at HTMLCtrl.eval (html_ctrl.js:193)
at EditSession.EventEmitter._signal (index.js:3865)
at EditSession.onChange (index.js:9805)
at Document.EventEmitter._signal (index.js:3865)
at Document.applyDelta (index.js:7955)
at Document.insertMergedLines (index.js:7853)
at Document.insert (index.js:7781)
at EditSession.insert (index.js:10322)Gotcha! Then I’d suggest that you reach out to the maintainer of the plugin you’re using, and ask whether that is supported.
Hello, I’m trying to do exactly the same: modify a dashboard variable within the HTML Panel Plugin.
hafeja: Could you come up with a solution?
Any idea would be appreciated. Thanks!
The plugin maintainer pointed me to this community.
I found no solution so far.
hafeja, thanks for your response.
I was able to make it work but not in a fancy way, since the whole page is refreshed.
In my case I have a variable called “silo” and I want to asign the value “tc_temp” when a button is pressed.
Here is an extract of the HTML code I am using:
<form action="http://grafana.staged-by-discourse.com/d/-HeInmOGz/termometria?orgId=1?&var-silo=tc_temp" method="post">
<button
class="button"
type="submit"
name="cmdMotor"
value="true"
>Silo 4</button>
</form>
Take a close look to the form because there is the key. It should have the following syntax:
<form action:"http://<url_of_your_dashboard>?&var-<variable_name>=<value_to_asign>" method="post"</form>
I am still trying to make it better but at least this worked for me.
Give it a try and let me know if you have any problem.
Cheers
Hi, i’m trying the same. Any update on this?
Thanks a lot
I use the HTML Graphics plugin which makes this very easy according to the doc’s (describing an example by updating a text-variable when pressing an html button).
However, I’m not sure if and how this works with other types of grafana variables.
Thanks @neshorg but we are looking for the opposite way round: how to update the variable value from the panel code to Grafana environment. Not get the new variable value from Grafana environment to the panel
Hello @donatod, I think you might’ve missed the rest of the example from the doc’s.
The example provides 2 ways of interacting with a grafana variable by which you can decide how to alter the javascript code and use it any way you want.
If you look at the GIF and the javascript code you should see that the example is showing:
Unless I’m mistaken, you’re looking for the example functions “updateGrafanaVariable” and “buttonElt.onclick” from their code:
const VARIABLE_NAME = 'testVariable';
const buttonElt = htmlNode.querySelector('button');
/*
Update a grafana variable
More information in the grafana docs
https://grafana.com/docs/grafana/latest/developers/plugins/add-support-for-variables/
*/
function updateGrafanaVariable(variableName, value) {
getLocationSrv().update({
query: {
[`var-${variableName}`]: value,
},
partial: true, // partial: true makes the update only affect the query parameters listed in query, and leaves the other query parameters unchanged.
replace: true, // replace: true tells Grafana to update the current URL state, rather than creating a new history entry.
});
}
function getGrafanaVariableValue(variableName) {
return getTemplateSrv().replace(`$${variableName}`);
}
function updateButtonText() {
buttonElt.textContent = `${VARIABLE_NAME}'s current value is: ${getGrafanaVariableValue(VARIABLE_NAME)}`;
}
buttonElt.onclick = function () {
updateGrafanaVariable(VARIABLE_NAME, getGrafanaVariableValue(VARIABLE_NAME) == 'b' ? 'a' : 'b');
};
/*
When the variable changes panelupdate will trigger.
The panelupdate is used to update the button text so the text is the same as the variable.
*/
htmlNode.addEventListener('panelupdate', () => {
updateButtonText();
});
Thanks a lot. I’m still not able in doing this.
I cannot see any section within the panel editor
Could you please try to do the same with the simple html panel plugin?
Currently gapit-htmlgraphics-panel doesn’t work with Grafana v8.3.4 and upwards. There is a fix for this, but Grafana hasn’t published the new gapit-htmlgraphics-panel release yet. You can manually download the latest release from github with
grafana-cli --pluginUrl https://github.com/gapitio/gapit-htmlgraphics-panel/releases/download/v2.0.2/gapit-htmlgraphics-panel-2.0.2.zip plugins install gapit-htmlgraphics-panel
Additional ways to download the plugin can be found on Installation | HTMLGraphics (Remember to switch from latest to specific version since latest is the latest release Grafana has released of the plugin, and not the actual latest release).
Issues related to the bug.
Thanks, everything works great and I even was able to change variable value as wanted
Nice. What did you change? Grafana version or HTMLGraphics version? Just curious xD
I manually downloaded the latest release from github with
grafana-cli --pluginUrl https://github.com/gapitio/gapit-htmlgraphics-panel/releases/download/v2.0.2/gapit-htmlgraphics-panel-2.0.2.zip plugins install gapit-htmlgraphics-panel
Hello Zuperzee! I have a problem like this:
I wanna use HTML Graphic in Webaccess Scada, but Version of Grafana in Webaccess is V6.2 so i can’t use plugin HTML Graphic. How can i update Grafana in Webaccess or hack to HTML Graphic can run in Webaccess? Please help me! Thanks!
Two solutions for you:
First, consider upgrading your grafana. If you can by yourself, referrer to the docs on Upgrade Grafana | Grafana documentation . But you mentioned the “webaccess” in a way that it seems like a proprietary tool… Then if that’s the case, you should ask your vendor for support to upgrade as you need.
---- PROCEED AT YOUR OWN RISK ----
IT’S PROBABLY ISN’T GOING TO WORK, BUT… Second, if your job depends on it, I’d think about installing the Grafana 6.2 in a test environment, downloading the *.zip of HTML Graphic from github and hacking it’s “src/plugin.json” to make it “installable” on 6.2 and trying to install and see if it works, then after confirming that it worked as intended, make a backup of your current grafana in production and applying it.
---- PROCEED AT YOUR OWN RISK ----
There’s some things you’ll need to consider:
1st: a minor Plug-in for a bigger software would be developed using some underlying tools of the software. So, the HTML Graphic plug-in depends on features that are on your grafana from 8.2 and these features would be not available.
2nd: HTML Graphic is a Community Plug-in and isn’t directly supported from grafana, if you wish to sponsor or ask the author to support an older version of Grafana, you should ask here, on plugin’s author issues site: Issues · gapitio/gapit-htmlgraphics-panel · GitHub
I hope you consider upgrading your gradana, and if it’s not possible then consider not using the desired plug-in.
I’ll close this topic since it’s really old, and there’s not much more to say on the case, and the theme could generate a lot of unwanted/unnecessary discussion.