Data Sources
Apache ECharts Panel, as well as Grafana, supports various data sources that you can use to query data for building charts.
The following code snippet demonstrates how you can retrieve data from your data source to use in Apache ECharts Panel.
data.series.map((s) => {
if (s.refId === "logo") {
images =
s.fields.find((f) => f.name === "body").values.buffer ||
s.fields.find((f) => f.name === "body").values;
} else if (s.refId === "connections") {
sources =
s.fields.find((f) => f.name === "source").values.buffer ||
s.fields.find((f) => f.name === "source").values;
targets =
s.fields.find((f) => f.name === "target").values.buffer ||
s.fields.find((f) => f.name === "target").values;
} else if (s.refId === "nodes") {
titles =
s.fields.find((f) => f.name === "title").values.buffer ||
s.fields.find((f) => f.name === "title").values;
descriptions =
s.fields.find((f) => f.name === "description").values.buffer ||
s.fields.find((f) => f.name === "description").values;
}
});
- You can use the
.map()
and.find()
JavaScript functions. - The
refId
query retrieves data from a data source. By default, the assigned names look likeA
,B
, and so on. The code above works with the three querieslogo
,connections
, andnodes
. name
is the name of the data frame column. The code above references thebody
,source
,target
,title
, anddescription
columns.- To work with Grafana 10 and its older versions, you need to use the
values
andvalues.buffer
fields.
Tutorial
Array of Arrays
You can convert one-dimensional arrays into multi-dimensional arrays if needed.
- Fetch values for each field.
- Combine an array into an array of arrays.
- Use as
series[0]
to access the first query,series[1]
to access the second query, etc. - To work with Grafana 10 and its older versions, you need to use the
values
andvalues.buffer
fields.
const series = data.series.map((s) => {
const rates =
s.fields.find((f) => f.name === "Rate").values.buffer ||
s.fields.find((f) => f.name === "Rate").values;
const calls =
s.fields.find((f) => f.name === "Calls").values.buffer ||
s.fields.find((f) => f.name === "Calls").values;
const names =
s.fields.find((f) => f.name === "Name").values.buffer ||
s.fields.find((f) => f.name === "Name").values;
return rates.map((d, i) => [d, calls[i], names[i]]);
})[0];
Pie Chart
We use the static data source for this example.

Example
docs/volkovlabs-echarts-panel/js/pie.js
loading...
Wind Speed
The wind speed visualization is one of the advanced examples of what the Apache ECharts library can do.
- Every data point is displayed with a custom arrow.
- The arrow color indicates the speed.
- The direction where the arrow points to indicates the wind direction.

Example
docs/volkovlabs-echarts-panel/js/wind.js
loading...
Circular Graph
We use the static data source for this example.

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