Plugins 〉Apache ECharts

Panel
community

Apache ECharts

  • Overview
  • Installation
  • Change log
  • Related content

Apache ECharts Panel plugin for Grafana

ECharts

Grafana 9 YouTube CI codecov Language grade: JavaScript

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.

Apache ECharts panel for Grafana | How to create modern dashboards in Grafana | ECharts Tutorial

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.

Panel

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

Grafana variables | Dashboard, Global and Environment variables | Environment Data Source

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

How to use Data Source in Apache ECharts in 90 seconds | Grafana Data attribute

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.

Build directional graph in Grafana using Apache ECharts | Tutorial part 1

Build directional graph in Grafana using Apache ECharts | Tutorial part 2

PNG and SVG images

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

Apache ECharts supports base64 PNG and SVG (vector) images | Prefixes for various types of pictures

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.

Installing Apache ECharts on Grafana Cloud:

For more information, visit the docs on plugin installation.

Change Log

3.4.0 (2022-09-21)

Features / Enhancements

  • Update to Grafana 9.1.0 (#37)
  • Add Youtube tutorial for PNG/SVG images (#38)
  • Access to dashboard variables - explain in README (#39)
  • Update to Grafana 9.1.4 (#44)
  • Add Grafana Variables video (#45)
  • Add Data Source instructions to README (#46)
  • Add Compatibility Check Workflow (#49)
  • Update to Grafana 9.1.6 (#50)
  • Add ECharts-GL extension, which provides 3D plots, globe visualization and WebGL acceleration (#51)

3.3.0 (2022-08-12)

Breaking changes

  • Signed as Community Plugin.

Features / Enhancements

  • Update to be included in the Grafana Marketplace (#35)

3.2.0 (2022-08-09)

Features / Enhancements

  • Add YouTube video to README (#29)
  • Add YouTube Tutorial (#31)
  • Update to Grafana 9.0.6 (#34)

3.1.0 (2022-07-11)

Features / Enhancements

  • Add setOption() description in README And Options (#12)
  • Maps json files are missing (#14)
  • Registering USA and World maps (#20)
  • Add Auto Formatting (#21)
  • Rebuild using Grafana 9.0.2 (#22)
  • Add Variables support (replaceVariables) in the Code Editor (#9)
  • Add locationService parameter (#24)
  • Add Liquid fill plugin (#25)

Bug fixes

  • Reset zoom will destroy the chart (#13)

3.0.0 (2022-06-19)

Breaking changes

  • Requires Grafana 8.5+ and 9.0+
  • Uses Monaco Code Editor instead of Code Mirror
  • Based on the ECharts 5.3.3
  • Removes outdated ECharts Extensions (echarts-wordcloud, echarts-liquidfill, echarts-gl)

Features / Enhancements

  • Initial Release based on the bilibala-echarts-panel 2.2.4
  • Updated based on Volkov Labs Panel Template 2.0.0
  • Refactoring plugin (#2)
  • Replace Code Mirror with Monaco Code Editor (#3)
  • Refactor Panel and update plugin files (#4)
  • Update Provisioning, Screenshot and remove Follow Theme (#5)
  • Add SVG and Canvas Renderer (#6)