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 thelogo
,connections
, andnodes
.name
is the data frame column name. The code above references thebody
,source
,target
,title
, anddescription
columns.
Tutorial
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];
Pie Chart
We are using the Static Data Source for this example.

Example
docs/volkovlabs-echarts-panel/pie.js
loading...
Wind Speed
Wind speed visualization is one of many exciting examples of what the Apache ECharts library can do.
- Every data element is displayed using the custom arrow.
- The arrow color signifies the speed.
- The direction where the arrow points - shows the wind direction.

Example
docs/volkovlabs-echarts-panel/wind.js
loading...
Circular Graph
We are using the Static Data Source for this example.

Example
docs/volkovlabs-echarts-panel/graph.js
loading...