Apache ECharts Panel 4.2.0

We released a new version of the Apache ECharts Panel 4.2.0 for Grafana. This maintenance release

• Added EventBus parameter to publish events.
• Removed panel padding allowing to use of panel's space corner to corner.
• Updated default background to transparent for Light and Dark themes.
• Updated to the latest Grafana 9.4.3 toolkit and workflows.

Grafana Catalog

The plugin was updated in Grafana Catalog on March 8, 2023.

No Padding

Removed panel padding allows using of the panel space from corner to corner and displays charts, maps, and graphics in the full width and height of the panel.

GeoJSON Map displays requests from users around the world.

Community Use cases

We are impressed with the everyday creations from the community using the latest features in the Apache ECharts panel for Grafana.

Dynamic toolbox

One of the interesting use cases is displaying complex ECharts objects like a sunburst with the toolbox, strongly dynamic and dependent on many variables by ftasso.

blog/2023-03-04-echarts-panel-4.2.0/dynamic.js

loading...

Preserve Visual Map selected range

Saving the visualMap range slider settings across Dashboard refreshes by Barryetter.

1. Create two dashboard variables. Constants are fine, and they should be hidden from the user. Name them datarangeStart and datarangeEnd and set them to some initial values.
2. In the EChart panel code editor (before the return), add an event handler for the datarangeselected event. Remove any event handler to prevent creating duplicate handlers.

blog/2023-03-04-echarts-panel-4.2.0/range.js

loading...

3. In the visualMap definition, set the range property to the Dashboard variables using the replaceVariables method as described in the documentation.

blog/2023-03-04-echarts-panel-4.2.0/visual-map.js

loading...

Create DOM (Document Object Model) Elements

It's possible to add elements (button, checkbox, select, etc.) to the DOM (Document Object Model) using echartsInstance by Lroy.

Add a button to add Events on the Apache ECharts container.

For example, you can add a button with an event handler.

blog/2023-03-04-echarts-panel-4.2.0/dom.js

loading...

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

YouTube Tutorial

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

How to create modern dashboards in Grafana.

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

Dynamic Text, Data Manipulation and Apache ECharts plugins.

Release Notes

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)

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.