Plugins 〉Apache ECharts


Developer
Volkov Labs


Sign up to receive occasional product news and updates:



Latest webinars
Panel
community

Apache ECharts

  • Overview
  • Installation
  • Change log
  • Related content

Apache ECharts Panel for Grafana

ECharts

Grafana YouTube CI codecov CodeQL

Introduction

The Apache ECharts plugin is a visualization panel for Grafana that allows you to incorporate the popular Apache ECharts library into your Grafana dashboard.

Apache ECharts is a free, powerful charting and visualization library with statistical capabilities. It is written in pure JavaScript and based on zrender.

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

Apache ECharts visualization panel offers an easy way of adding intuitive, interactive, and highly customizable charts into your Grafana dashboard.

Requirements

  • Grafana 8.5+, Grafana 9.0+ is required.

Getting Started

Apache ECharts visualization panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.

For the latter, use the following command.

grafana-cli plugins install volkovlabs-echarts-panel

Highlights

  • Provides Monaco Code Editor for:
    • Working with Grafana data frames (JavaScript).
    • Updating chart configurations in JSON format.
    • Custom theme configuration.
  • Supports Code Auto formatting.
  • Executes the setOption() function using Monaco Code Editor content.
  • Supports variables and location service to make Charts interactive.
  • Based on the ECharts 5.4.2.
  • Supports Light and Dark modes synchronized with Grafana Theme.
  • Supports SVG and Canvas renderers.
  • Includes USA and World GeoJSON maps. Additional maps can be loaded dynamically.
  • Includes Liquid Fill Chart, which is usually used to represent data in percentage.
  • Includes ECharts-GL, which provides 3D plots, globe visualization, and WebGL acceleration.
  • Includes ecStat, a statistical and data mining tool.
  • Supports Code Editor suggestions for Parameters and variables.
  • Allows displaying Success and Error notifications.
  • Supports Baidu, Gaode, and Google Maps using API. Requires to provide access key.
  • Supports real-time data updates using streaming Data Sources and Grafana Live.
  • Has 100+ ready-as-is examples at echarts.volkovlabs.io.

Examples

Documentation

SectionDescription
ECharts FunctionExplains how to configure the main Apache ECharts library function.
ExamplesExplains how to get started with ECharts Examples.
Release NotesStay up to date with the latest features and updates.

Features

SectionDescription
AnnotationsDemonstrates how to use annotations.
Data SourcesDemonstrates how to retrieve data from data sources.
Event HandlingDemonstrates how to react to the triggered events.
ECharts InstanceDemonstrates how to interact with ECharts container.
StreamingExplains how to configure Apache ECharts for real-time data updates using streaming Data Sources and Grafana Live.
Theme EditorDemonstrates how to use the theme editor.
TransformationsDemonstrates how to work with transformations.
VariablesDemonstrated how to replace Dashboard and Global variables.

Tutorials

SectionDescription
Directed GraphExplains how to build and visualize directed graphs.
PNG and SVG imagesExplains how to use images in various formats.
Statistical and Data MiningExplains how to use statistical and data mining library.

Maps

SectionDescription
GeoJSONDemonstrates how to work with GeoJSON Maps.
BaiduDemonstrates how to work with Baidu Maps API.
GaodeDemonstrates how to work with Gaode Maps API.
GoogleDemonstrates how to work with Google Maps API.

Tutorials

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

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

Three plugins that make Grafana complete. Dynamic Text, Data Manipulation, and Apache ECharts are all you need to create functional real-world web applications.

Magic JavaScript trio for Grafana | Dynamic Text, Data Manipulation and Apache ECharts plugins

Feedback

We love to hear from you. There are various ways to get in touch with us:

  • Ask a question, request a new feature, and file a bug with GitHub issues.
  • Sponsor our open-source plugins for Grafana with GitHub Sponsor.
  • 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

4.4.0 (2023-05-25)

Features / Enhancements

  • Increase Test Coverage and update test library (#163)
  • Update to Grafana 9.5.2 (#164)
  • Update Google Maps Extension to 1.6.0 (#164)
  • Add E2E Cypress testing (#165)
  • Add Theme Editor to allow custom themes (#167)
  • Update documentation (#166, #168)

4.3.1 (2023-04-21)

Breaking changes

  • Due to security reasons, getDataSourceSrv parameter was removed (#156)

4.3.0 (2023-04-16)

Features / Enhancements

  • Update to Grafana 9.4.7 (#146)
  • Add getDataSourceSrv parameter to retrieve the entry point to data sources (#146)
  • Update to Apache ECharts 5.4.2 (#147)
  • Update USA and World GeoJSON used in GeoMap (#154)
  • Add Alert State and Annotations (#155)

4.2.0 (2023-03-04)

Features / Enhancements

  • Add EventBus to the available parameters to publish events (#122)
  • Update to Grafana 9.3.6 (#132)
  • Update CI and Release workflows (#134)
  • Add NoPadding to remove extra padding around (#138)
  • Set Background color to Transparent by default (#139)
  • Add Magic (JavaScript) Trio tutorial (#141)
  • Update to Grafana 9.4.3 (#142)

4.1.0 (2023-01-12)

Features / Enhancements

  • Synchronize the README file with Documentation (#111)
  • Add Streaming Support for WebSockets and Grafana Live (#113)
  • Move InfluxDB Example to the Guest Blog post (#115)
  • Update Documentation and Tutorials in README (#116)
  • Add Data Zoom to default Line Example (#117)

4.0.0 (2022-12-20)

Breaking changes

  • World and USA GeoJSON maps are not loaded by default. Please select JSON in the Maps option.

Features / Enhancements

  • Update ECharts Examples on https://echarts.volkovlabs.io (#103)
  • Add Calendar Examples on https://echarts.volkovlabs.io (#105)
  • Update README and move Documentation to docs.volkovlabs.io (#107)

Bug fixes

  • Fix javascript code in documentation (#102)

3.8.0 (2022-12-10)

Features / Enhancements

  • Update documentation for Event Handling (#80)
  • Add Histograms, Clustering, Regression tutorial (#83)
  • Add Provisioning dashboards for ECharts Examples on https://echarts.volkovlabs.io (#91)
  • Add Gaode map support (#95)
  • Update to Grafana 9.3.1 (#97)
  • Add Google map support (#98)
  • Refactor Maps support (#99)
  • Update to Apache ECharts 5.4.1 (#101)

Bug fixes

  • Fix Disabled Format options (#88)

3.7.0 (2022-11-16)

Features / Enhancements

  • Limit the URL for loading the Baidu map (#76)

3.6.0 (2022-11-13)

Features / Enhancements

  • Update CI to Node 16 and Synchronize with Release workflow (#65)
  • Update to Grafana 9.2.2 (#66)
  • Update YouTube Thumbnails (#66)
  • Update CI to upload signed artifacts (#68)
  • Add Statistics tool (Regression, Clustering, etc.) (#69)
  • Add how to react on mouse events (#71)
  • Add Monaco Code Editor suggestions for available parameters (#32)
  • Improve Tests Coverage (#8)
  • Add Status notification on event handling (#74)
  • Add Baidu map support (#64)
  • Add Tutorial on how to load and use Baidu maps (#75)

3.5.0 (2022-10-04)

Features / Enhancements

  • Update to Apache ECharts 5.4.0 (#52)
  • Add Stacked Bar Graph (InfluxDB) Example (#55)
  • Add Examples to README and update links in Plugin.json (#56)

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)