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