How to change a dashboard variable value from a plugin?

Grafana Plugin Development
1

Hello-

What is the best way for a panel plugin to update a variable? I have tried:

  this.$location.search( 'var-'+name, value );

This updates the URL properly, and on browser refresh, the variables is set, but I would like to actively set it.

Thanks for any pointers!

ryan

2

I found a solution that works: the key is: this.variableSrv.variableUpdated(v, true);

  updateVarable(varname:string, path:string) {
      console.log('update variable', varname, path );
      let v = _.find(this.variableSrv.variables, check => {
        return check.name === varname;
      });
      if(v) {
        this.variableSrv.setOptionAsCurrent(v, {
          text: path,
          value: path,
        });
        this.variableSrv.variableUpdated(v, true);
      }
  }
1 Like
3

Hello,
How to you access variableSrv ? What class do you have to import?

Best regards?

4

You can just put variableSrv in the constructor and it will get wired up for you. See:

5

Thanks :slight_smile: work very well :slight_smile:

6

how about react plugins, how do we access variableSrv?

2 Likes
7

This definitely took some serious time/research to resolve here is how I resolved it:

  1. my dashboard variable is named ‘location_id’
  2. the variable is used in a query “select location_name from location where locationid=$location_id”
  3. when a user clicks on a popup I needed to update the variable so I could refresh the data for other visual components.
import { DataSourceApi } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';

    handleOnPopup =  (e:any, locationId:number ) => {
        let dataSource:DataSourceApi = getDataSourceSrv() as unknown as DataSourceApi;    
        let variable = _.find(dataSource.templateSrv.variables, {'name':'location_id'});
        this.locationSelectedId = locationId;
        variable.query = locationId.toString(); //make string even if its a number

        variable.variableSrv.updateOptions(variable).then(() => {
            variable.variableSrv.variableUpdated(variable, true);
        });
    }

render(){
//check the data state and get your updated data          
if(data.state == "Done" && data.series[2] && data.series[2].length > 0 && data.series[2]["fields"][0]["values"].buffer[0] == this.locationSelectedId){
            
                this.locationDevices = data.series[2];

            }
}

Other Context: Custom Grafana React Plugin
Grafana Version: 6.4.4
NPM packages:
-"@grafana/runtime": “^6.6.0”
-"@grafana/data": “^6.5.1”

4 Likes
8

This worked for me to access variables in custom panel when using the “Mixed” mode (in the DS select box).
this is my code:

import { DataSourceApi } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';

        let dataSource:DataSourceApi = getDataSourceSrv() as unknown as DataSourceApi;    
        let variable = _.find(dataSource.templateSrv.variables, {'name':'location_id'});
9

I Grafana 7.0 there is no access to variableSrv. I changed the Url using LocationSrv but it does not update panels and selector of variable actively. I asked another question in this link if you have any idea let me know. thanks

2 Likes
10

@amirzaei69 are you sure? I can access in Grafana7 using code available in this thread How to change a dashboard variable value from a plugin?

11

My understanding is the bug that is preventing the locationsrv from updating after changing the variable is to be fixed in the 7.1 release (I believe the targeted release date is July 14th 2020)

12

Since this topic is still receiving a decent amount of traffic:

If you’re looking to change a dashboard variable from a React-based plugin, check out Set a variable from your plugin.

13

Im using v10.3.3,I also troubled about that , i cant find any api for refetch data from datasource, buy i think use Variables can do it reluctantly.

i defined variable for my panel in dashboard and use locationService.partial to update it

export function updateVariable(key: string, value: any) {
    locationService.partial({
        [`var-${key}`]: value
    }, true)
}
1 Like
14

@ranmeizi The only way to fetch data again from the data source is to render panel, which happens when you update variables.

You may look into Streaming data sources or create a custom panel to fetch data from the data source directly.

15

I’m having trouble with the url change not triggering the template variable update in Grafana v11.2.0 (2a88694fd3). I’m trying to update the value of one template variable on another template variable change event using the Grafana interface’s Business Chart Plugin. I am able to update the Dahsbord URL, but it doesn’t trigger the template variable to be updated.

16

@himalipancholipancho Are you using the new Scenes dashboards? Grafana introduced breaking changes in the variables and dashboard refreshes. We addressed those issues in the upcoming releases of our plugins.