Apache ECharts Panel 4.2.0

We are happy to announce the release of Apache ECharts Panel 4.2.0 for Grafana. This maintenance release includes the following updates:

• Added the EventBus parameter to publish events.
• Removed the panel padding, allowing you to use all of the panel space from corner to corner.
• Updated the default background to transparent for light and dark themes.
• Updated the plugin to the latest Grafana 9.4.3 toolkit and workflows.

Grafana Plugins catalog

The plugin was updated in the Grafana Plugins catalog on March 8, 2023.

No Padding

The removal of the panel padding lets you use the panel space more effectively for displaying charts, maps, and graphics across the entire width and height of the panel.

GeoJSON Map displays requests from users around the world.

Community Use cases

We are amazed by the everyday developments of the community that make use of the latest capabilities in Apache ECharts Panel for Grafana.

Dynamic toolbox

Our community member ftasso shared an extremely interesting use case that displays complex ECharts objects like a sunburst with the toolbox. It dynamically retrieves data and uses a variety of variables for chart generation.

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

loading...

Preserve the selected range on a visual map

Our community member Barryetter shared another use case that allows you to preserve the range slider settings of the visualMap object after the dashboard refresh.

1. Specify two dashboard variables. Constants are also fine but you need to hide them from the user. Name them datarangeStart and datarangeEnd and apply some initial values to them.
2. In the Apache EChart Panel code editor (before the return snippet), add an event handler for the datarangeselected event. Remove any other event handler to prevent creation of 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 our documentation.

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

loading...

Create DOM (Document Object Model) Elements

You can add elements (buttons, checkboxes, dropdown boxes, etc.) to the DOM (Document Object Model) using echartsInstance contributed by Lroy.

Add a button to add Events into 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

You can install Apache ECharts Panel from the Grafana Plugins catalog or using the Grafana command line tool.

For the latter, please use the following command.

grafana-cli plugins install volkovlabs-echarts-panel

YouTube Tutorial

The Apache ECharts Panel plugin is a data visualization extension for Grafana that allows you to integrate charts and graphs from the popular Apache ECharts library into your Grafana dashboard.

How to create modern dashboards in Grafana.

One of the three plugins that completes Grafana is Apache ECharts Panel. With Dynamic Text, Data Manipulation, and Apache ECharts Panel you can create fully functional web applications meeting your needs and expectations.

Dynamic Text, Data Manipulation, and Apache ECharts Panel plugins.

Release Notes

Features / Enhancements

• Added EventBus to the available parameters for publishing events (#122).
• Added compatibility with Grafana 9.3.6 (#132).
• Added compatibility with Grafana 9.4.3 (#142).
• Updated CI and release workflows (#134).
• Added NoPadding to remove extra padding around (#138).
• Set the background color as transparent by default (#139).
• Added the Magic (JavaScript) Trio tutorial (#141).

Feedback

We're looking forward to hearing from you. You can use different ways to get in touch with us.

• Ask a question, request a new feature, or report an issue at GitHub issues.
• Subscribe to our YouTube Channel and leave your comments.
• Sponsor our open-source plugins for Grafana at GitHub Sponsor.
• Support our project by starring the repository.