Apache ECharts Panel plugin for Grafana

Introduction

The ECharts Panel is a plugin for Grafana that allows to visualize Apache ECharts on your Grafana dashboard.

Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

Requirements

• Grafana 8.5+, Grafana 9.0+ is required.

Getting Started

Apache ECharts panel can be installed from the Grafana Marketplace or use the grafana-cli tool to install from the command line:

grafana-cli plugins install volkovlabs-echarts-panel

Features

• Allows to visualize Apache ECharts using Monaco Code Editor with Auto formatting.
• Use setOption() function to set configuration and data.
• Based on the ECharts 5.3.3.
• Supports Light and Dark mode synchronized with Grafana Theme.
• Supports SVG and Canvas renderer.
• Includes USA and World maps. Allows to add custom Map files in the maps folder.
• Supports variables and location service to make Charts interactive.
• Includes Liquid Fill Chart, which is usually used to represent data in percentage.
• Includes ECharts-GL, which providing 3D plots, globe visualization and WebGL acceleration.

setOption() Function

Configuration item, data, universal interface, all parameters and data can all be modified through setOption() function in the plugin's options. Available parameters:

• data - Grafana's data object with time range, series and request information.
• theme - Grafana's theme object.
• echartsInstance - Instance of the ECharts.
• echarts - ECharts library.
• replaceVariables - the replaceVariables() function to interpolate variables.
• locationService - Grafana's locationService to work with browser location and history.

To learn more about parameters you can log them in the Browser Console:

console.log(data, theme, echartsInstance, echarts, replaceVariables, locationService);

Dashboard and Global Variables

Use replaceVariables() function to replace Dashboard and Global variables.

const email = replaceVariables('${__user.email}');

You can find global built-in variables in the Grafana documentation.

Data Sources

To use Apache ECharts with data from data sources get each field in a array:

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;
  }
});

Merge elements into array:

• get values for each field
• combine in an array of arrays
• use as sData[0] to access first query

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

Tutorial

Directed Graph

Data visualizations can and should be done in style. In two parts video tutorial Daria explained how we built and visualized directed graph in Grafana using Apache ECharts panel.

PNG and SVG images

A quick guide for using images in Apache ECharts shows each type's prefixes.

Feedback

We love to hear from users, developers, and the whole community interested in this plugin. These are various ways to get in touch with us:

• Ask a question, request a new feature, and file a bug with GitHub issues.
• Star the repository to show your support.

License

• Apache License Version 2.0, see LICENSE.