XY Scatter panel and image background?

Grafana Dashboards
1

I’m using Grafana cloud and I try to build XY Scatter panel and I’d like to put image for xy scatter background. Could it be possible to do somehow?
e.g could it be possible to put one panel over other panel?

2

@pasihotari You can’t mix and match panels. XY scatter over background graphics is possible in the Apache ECharts panel.

1 Like
3

Thank you about hint, that ECharts panel works well and I did manage to build XY scatter panel where is background graphic.

I build panel that refresh panel every 5 seconds and then I get next problem, when there is now data to get from query, then panel gives
ECharts Execution Error
Cannot read properties of undefined (reading ‘values’)
TypeError: Cannot read properties of undefined (reading ‘values’)
…

Error happens when there is no data available for in this kind ECharts panel function:

let orgdata;
data.series.map((s) => {
const x = s.fields.find((f) => f.name === “x”).values.buffer;
const y = s.fields.find((f) => f.name === “y”).values.buffer;
const size = s.fields.find((f) => f.name === “size”).values.buffer;
const objectid = s.fields.find((f) => f.name === “ObjectID”).values.buffer;

orgdata = x.map((d, i) => {
return [d, y[i], size[i], objectid[i]]
});
});

I wonder, is it possible to handle situation when there is no data available for ECharst?

1 Like
4

@pasihotari You can use the statements to check if fields were returned from the data source like

let x = [];
if (s.fields.find((f) => f.name === “x”)) {
  x = s.fields.find((f) => f.name === “x”).values.buffer;
}

or

const x = s.fields.find((f) => f.name === “x”) ? s.fields.find((f) => f.name === “x”).values.buffer : [];
1 Like