Skip to main content

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 are A, B and so forth. The code above works with three queries - logo,connections, and nodes.
  • name is the data frame column name. The code above references body,source,target,title,and description columns.
How to use Data Source in Apache ECharts in 90 seconds.

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

Visualize Pie Chart using Data Source.
Visualize 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,
},
],
};