Data Sources
Below is a code snippet demonstrating how you can retrieve data from your data source to use in the Apache ECharts visualization panel.
data.series.map((s) => {
if (s.refId === "logo") {
images = s.fields.find((f) => f.name === "body").values.buffer;
} else if (s.refId === "connections") {
sources = s.fields.find((f) => f.name === "source").values.buffer;
targets = s.fields.find((f) => f.name === "target").values.buffer;
} else if (s.refId === "nodes") {
titles = s.fields.find((f) => f.name === "title").values.buffer;
descriptions = s.fields.find((f) => f.name === "description").values.buffer;
}
});
- You can use
.map()
and.find()
JavaScript functions, refId
is the name of the query retrieving data from the data source. By default, the names areA
,B
and so forth. The code above works with three queries -logo
,connections
, andnodes
.name
is the data frame column name. The code above referencesbody
,source
,target
,title
,anddescription
columns.
Array of Arrays
Convert one-dimensional arrays into many-dimensional arrays if needed:
- get values for each field
- combine in an array of arrays
- use as
series[0]
to access first query,series[1]
to access second query, etc.
const series = data.series.map((s) => {
const rates = s.fields.find((f) => f.name === "Rate").values.buffer;
const calls = s.fields.find((f) => f.name === "Calls").values.buffer;
const names = s.fields.find((f) => f.name === "Name").values.buffer;
return rates.map((d, i) => [d, calls[i], names[i]]);
})[0];
Display Pie Chart using Data Source

Visualization panel's function:
const pieData = data.series.map((s) => {
const models = s.fields.find((f) => f.name === "Model").values.buffer;
const values = s.fields.find((f) => f.name === "Value").values.buffer;
return values.map((d, i) => {
return { name: models[i], value: d };
});
})[0];
return {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Pie Chart",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: pieData,
},
],
};