Skip to main content

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 like A, B, and so on. The code above works with the three queries logo, connections, and nodes.
  • name is the name of the data frame column. The code above references the body, source, target, title, and description columns.
  • To work with Grafana 10 and its older versions, you need to use the values and values.buffer fields.

Tutorial​

How to use Data Source in Apache ECharts in 90 seconds.

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 and values.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.

Build a Pie Chart using a data source.
Build a Pie Chart using a data source.

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.
Building a wind speed chart with custom arrows on the Grafana dashboard.
Building a wind speed chart with custom arrows on the Grafana dashboard.

Example​

docs/volkovlabs-echarts-panel/js/wind.js
loading...

Circular Graph​

We use the static data source for this example.

Visualize a circular graph using a data source.
Visualize a circular graph using a data source.

Example​

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