Plugins 〉Apache ECharts
14 day trial Install plugin
1 Enterprise plugin Upgrade and install
Apache ECharts
Apache ECharts Panel for Grafana
Introduction
The Apache ECharts plugin is a visualization panel for Grafana that allows you to incorporate popular Apache ECharts libraries into your Grafana dashboard.
Apache ECharts libraries is a free, powerful charting and visualization library with statistical capabilities. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
Apache ECharts 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
Features
- Provides Monaco Code Editor for:
- Working with Grafana data frames (JavaScript),
- Updating chart configurations in JSON format.
- 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.1.
- Supports Light and Dark modes synchronized with Grafana Theme.
- Supports SVG and Canvas renderers.
- Includes USA and World GeoJSON maps. Allows adding custom Map files in the
mapsfolder. - 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.
- 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, 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.
Documentation
| Section | Description |
|---|---|
| setOption() Function | Explains how to configure the main Apache ECharts library function. |
| Data Sources | Demonstrates how to retrieve data from data sources. |
| Examples | Explains how to get started with ECharts Examples. |
| Streaming | Explains how to configure Apache ECharts for real-time data updates using streaming Data Sources and Grafana Live. |
| Variables | Demonstrated how to replace Dashboard and Global variables. |
| Directed Graph | Explains how to build and visualize directed graphs. |
| PNG and SVG images | Explains how to use images in various formats. |
| Statistical and Data Mining | Explains how to use statistical and data mining library. |
| Baidu Maps | Demonstrates how to work with Baidu Maps. |
| Gaode Maps | Demonstrates how to work with Gaode Maps. |
| Google Maps | Demonstrates how to work with Google Maps. |
Tutorials
Data Sources
PNG and SVG images
A quick guide for using images in Apache ECharts shows each type's prefixes.
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.
Dashboard and Global variables
Histograms, Clustering, Regression
Mathematical and statistical functions to your extended visualization arsenal.
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.
Grafana Cloud Pro
- $25 / user / month and includes a free trial for new users
- Available with a Grafana Cloud Pro plan
- Access to 1 Enterprise plugin
- Fully managed service (not available to self-manage)
Grafana Cloud Advanced / Grafana Enterprise
- Available with a Grafana Cloud Advanced plan or Grafana Enterprise license
- Access to all Enterprise plugins
- Run fully managed or self-manage on your own infrastructure
Installing Apache ECharts on Grafana Cloud:
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
Installing plugins on a Grafana Cloud instance is a one-click install; same with updates. Cool, right?
Note that it could take up to 1 minute to see the plugin show up in your Grafana.
For more information, visit the docs on plugin installation.
Installing on a local Grafana:
For local instances, plugins are installed and updated via a simple CLI command. Plugins are not updated automatically, however you will be notified when updates are available right within your Grafana.
1. Install the Panel
Use the grafana-cli tool to install Apache ECharts from the commandline:
grafana-cli plugins install The plugin will be installed into your grafana plugins directory; the default is /var/lib/grafana/plugins. More information on the cli tool.
Alternatively, you can manually download the .zip file for your architecture below and unpack it into your grafana plugins directory.
Alternatively, you can manually download the .zip file and unpack it into your grafana plugins directory.
2. Add the Panel to a Dashboard
Installed panels are available immediately in the Dashboards section in your Grafana main menu, and can be added like any other core panel in Grafana.
To see a list of installed panels, click the Plugins item in the main menu. Both core panels and installed panels will appear.
Change Log
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
JSONin 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
locationServiceparameter (#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)
