How to map values from MYSQL Query to Series in a Scatter with Echarts

Grafana Dashboards
,
1

I am using echart plugin in Grafana 10.1.0 I am trying to do a Scatter taking data from a MYSQL Query. The MYSQL query is:
SELECT defect_count AS defect_count,d1 AS d1,d2 AS d2 , d3 AS d3,d4 AS d4,d5 AS d5,d6 AS d6,d7 AS d7,d8 AS d8,d9 AS d9,
x1 AS x1,x2 AS x2 , x3 AS x3,x4 AS x4,x5 AS x5,x6 AS x6,x7 AS x7,x8 AS x8,x9 AS x9,
y1 AS y1,y2 AS y2 , y3 AS y3,y4 AS y4,y5 AS y5,y6 AS y6,y7 AS y7,y8 AS y8,y9 AS y9
FROM 401.defect_map
Order by date_time Desc limit 1;
JSCODE:
let x1 = ;
let y1 = ;
let d1 = ;
let d2 = ;
let d3 = ;
let d4 = ;
let d5 = ;
let d6 = ;
let d7 = ;
let d8 = ;
let d9 = ;
data.series.map((s) => {
x1 = s.fields.find((f) => f.name === “x1”).values.buffer ||
s.fields.find((f) => f.name === “x1”).values;
y1 = s.fields.find((f) => f.name === “y1”).values.buffer ||
s.fields.find((f) => f.name === “y1”).values;

d1 = s.fields.find((f) => f.name === “d1”).values.buffer ||
s.fields.find((f) => f.name === “d1”).values;
d2 = s.fields.find((f) => f.name === “d2”).values.buffer ||
s.fields.find((f) => f.name === “d2”).values;
d3 = s.fields.find((f) => f.name === “d3”).values.buffer ||
s.fields.find((f) => f.name === “d3”).values;
d4 = s.fields.find((f) => f.name === “d4”).values.buffer ||
s.fields.find((f) => f.name === “d4”).values;
d5 = s.fields.find((f) => f.name === “d5”).values.buffer ||
s.fields.find((f) => f.name === “d5”).values;
d6 = s.fields.find((f) => f.name === “d6”).values.buffer ||
s.fields.find((f) => f.name === “d6”).values;
d7 = s.fields.find((f) => f.name === “d7”).values.buffer ||
s.fields.find((f) => f.name === “d7”).values;
d8 = s.fields.find((f) => f.name === “d8”).values.buffer ||
s.fields.find((f) => f.name === “d8”).values;
d9 = s.fields.find((f) => f.name === “d9”).values.buffer ||
s.fields.find((f) => f.name === “d9”).values;

});
I can get x1,y1 ,but i can’t get d1~d9 d1~d9 is string how do map?

12131245dfsd
12131245dfsd1079×450 211 KB

2

ALL JS code
let x1 = ;
let y1 = ;
let d1 = ;
let d2 = ;
let d3 = ;
let d4 = ;
let d5 = ;
let d6 = ;
let d7 = ;
let d8 = ;
let d9 = ;
data.series.map((s) => {
x1 = s.fields.find((f) => f.name === “x1”).values.buffer ||
s.fields.find((f) => f.name === “x1”).values;
y1 = s.fields.find((f) => f.name === “y1”).values.buffer ||
s.fields.find((f) => f.name === “y1”).values;

d1 = s.fields.find((f) => f.name === “d1”).values.buffer ||
s.fields.find((f) => f.name === “d1”).values;
d2 = s.fields.find((f) => f.name === “d2”).values.buffer ||
s.fields.find((f) => f.name === “d2”).values;
d3 = s.fields.find((f) => f.name === “d3”).values.buffer ||
s.fields.find((f) => f.name === “d3”).values;
d4 = s.fields.find((f) => f.name === “d4”).values.buffer ||
s.fields.find((f) => f.name === “d4”).values;
d5 = s.fields.find((f) => f.name === “d5”).values.buffer ||
s.fields.find((f) => f.name === “d5”).values;
d6 = s.fields.find((f) => f.name === “d6”).values.buffer ||
s.fields.find((f) => f.name === “d6”).values;
d7 = s.fields.find((f) => f.name === “d7”).values.buffer ||
s.fields.find((f) => f.name === “d7”).values;
d8 = s.fields.find((f) => f.name === “d8”).values.buffer ||
s.fields.find((f) => f.name === “d8”).values;
d9 = s.fields.find((f) => f.name === “d9”).values.buffer ||
s.fields.find((f) => f.name === “d9”).values;

});

return {
xAxis: { min: 0, max: 3840 },
yAxis: { min: 0, max: 2160 },

legend: {
//data: [‘暗點’, ‘亮點’, ‘暗線’, d1, ‘test’]
data: [d1, d2, d3, d4, d5, d6, d7, d8, d9]
},

series: [

{
  name: d1,
  data: [
    [x1, y1],
  ],
  type: 'scatter',
  symbolSize: 4,
},
{
  name: d2,
  data: [
    [3000, 1511],
  ],
  type: 'scatter',
  symbolSize: 4,
},
{
  name: d3,
  data: [
    [3.0, 6.95],
    [23.0, 7.58],
  ],

  type: 'scatter'

},
{
  name: d4,
  data: [
    [1.0, 7.04],
    [3.0, 5.95],
    [25.0, 6.58],
    [20.0, 6.81],
    [9.0, 7.33],
    [8.0, 8.96],
    [10.0, 6.24],
    [12.0, 3.26],
    [13.0, 8.84],
    [8.0, 5.82],
    [5.0, 8.68]
  ],
  type: 'scatter'
},
{
  name: d5,
  data: [
    [14.0, 9.96],
    [6.0, 4.24],
    [4.0, 4.26],
    [22.0, 13.84],
    [16.0, 14.82],
    [17.0, 15.68]
  ],
  type: 'scatter',
},

]
};

3

@ken9 It’s not clear what you are trying to do and what the question is.

For string, you need to use the category axis similar to the example

https://echarts.volkovlabs.io/d/U332C4K4z/scatter?orgId=1&editPanel=11

4

thank you my quetion "I didn’t know that the data I retrieved is of type string, not string, so I thought I didn’t get any data d1~d9 is string

5

@ken9 That’s correct, values or values.buffer returns an array of values.

data is a data frame structure used in Grafana and explained in our YouTube tutorials.