Using Grafana Variables in EChart

Grafana
, , ,
1

Hi, any suggestion please on EChart panel …

I am trying to use Grafana Variables as data source selector.
I defined two custom variables, named ‘selector’:

image
image948×66 4.35 KB

and would like access them in EChart panel
In EChart, I used
let selectedQuery = “$selector”;

then if (selectedQuery === ‘0_year’) …

There is no error when running the code, but it does not function as I expected…

2

which version of grafana and which specific plugin are you using?

echart is now

3

Thank you for the message. My version is Grafana v10.1.5.

Sorry I did not make it clear enough - I set two variables in Grafana to enable my selection of different data sources, both of them are from SQL but in different tables.

I attempted data mapping as below, it worked when there is only one data source but failed when another data source was added. Any suggestion please?

let data = context.panel.data;

data.series.map((s) => {
if (selectedQuery === ‘0_year’) {

deflect = s.fields.find((f) => f.name === 'deflection').values;
load = s.fields.find((f) => f.name === 'loading').values;

}
else if (selectedQuery === ‘10_year’) {

deflect = s.fields.find((f) => f.name === 'deflection5y').values;
load = s.fields.find((f) => f.name === 'loading5y').values;

}

});

4

I tried to use context.grafana.replaceVariables at the beginning:
let selectedQuery = context.grafana.replaceVariables(“$selector”);
but it does not work. I am using BUsiness Charts plugin.

5

do console.log on all your data and variables and check your browser console

6

Hi, maybe I can help, I’m creating variables in the panel and adding them like this:
const hostName = context.grafana.replaceVariables(“$variable”);
With this, every time I add the hostName attribute somewhere, it returns the value of the variable

1 Like