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 the logo, connections, and nodes.
  • name is the data frame column name. The code above references the body, source, target, title, and description columns.

Tutorial​

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];

Pie Chart​

We are using the Static Data Source for this example.

Visualize Pie Chart using Data Source.
Visualize Pie Chart using Data Source.

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.
Visualizing Wind Speed using custom Arrows on the Grafana dashboard.
Visualizing Wind Speed using custom Arrows on the Grafana dashboard.

Example​

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

Circular Graph​

We are using the Static Data Source for this example.

Visualize Circular Graph using Data Source.
Visualize Circular Graph using Data Source.

Example​

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