Skip to main content

The missing plugin to create business and industrial charts in Grafana

· Updated on February 18, 2023
Mikhail Volkov

Grafana is a de-facto one of the best observability visualization tools with various chart panels and many community plugins like Plotly. Still, no none of them can compare with Apache ECharts' flexibility.

Apache ECharts is a free, powerful charting and visualization library offering easy ways to add intuitive, interactive, and highly customizable charts. It is written in pure JavaScript and based on zrender.

Apache ECharts Examples Grafana instance.
Apache ECharts Examples Grafana instance.

The Apache ECharts visualization panel is a plugin for Grafana that allows you to incorporate the Apache ECharts library into your Grafana dashboard. The original plugin was developed for Grafana 6.3/7.0 and Apache ECharts library 4.9.0. It has not been maintained since then.

Volkov Labs adapted and updated it based on the latest Grafana 9 with Apache ECharts library 5.3.3, introducing new features like Monaco Code Editor and supporting SVG and Canvas renderer.

The Apache ECharts visualization panel can be installed from the Grafana Catalog (Plugins Configuration menu). Alternatively, you can install it manually downloading from GitHub.

Apache ECharts

Apache ECharts library is a mighty tool. You do not need a senior Javascript developer to start displaying modern-looking animated visualizations. And if your use case is unique, Apache ECharts provides an excellent venue to develop visualizations of any complexity.

The Apache ECharts visualization panel for Grafana is a bridge that has been missing and finally arrived. You can use the benefits of two great open-source products Grafana and Apache ECharts in one solution tailored to your needs.

How to create modern dashboards in Grafana.

According to the press release

"Apache ECharts is in use at Alibaba, Amazon, Baidu, GitLab, Intel, and Tencent, among others, as well as solutions such as Apache Superset data visualization software."

The project continues to grow in popularity, with more than 50,000 stars on GitHub and 450,000 weekly downloads on npm.

Wind Speed

Wind speed visualization is one of many exciting examples of what the Apache ECharts library can do.

  • Every data element is displayed using the custom arrow.
  • The arrow color signifies the speed.
  • The direction where the arrow points - shows the wind direction.

So much information is geniusly packed in a single display.

Visualizing Wind Speed using custom Arrows on the Grafana dashboard.
Visualizing Wind Speed using custom Arrows on the Grafana dashboard.

Directed Graph

We at Volkov Labs spent some time researching the options for displaying directed graphs. The Apache ECharts satisfied every single requirement we had in mind effortlessly.

The video below demonstrates the Apache ECharts directed/undirected graphs capabilities.

Can Apache ECharts render a directed graph?

Tutorial

The launch of the Live Updates project triggered many how-to questions. To answer them all by explaining how we created this project, the following two parts tutorial was put together.

In this project, we employed directed graph visualization to track company activities across Blog (Medium), GitHub, YouTube, and various external resources.

Build directional graph in Grafana using Apache ECharts. Tutorial part 1.
Build directional graph in Grafana using Apache ECharts. Tutorial part 2.

Live Updates

The Live Updates project is ALIVE. The directed graphs are built dynamically. We daily update the underlying data, so, at any point in time, the visualization gives the freshest possible update on our articles, releases, videos and other activities.

Live Updated project helps us to track our activities across all mediums.
Live Updated project helps us to track our activities across all mediums.

Directed graphs use the force layout to adjust nodes' location automatically. In addition, nodes have different icons/styling depending on their type. Clicking on the elements allows you to open an external URL or take a closer look at the subgraphs.

The tutorial above gives a complete picture of the achieved functionality.

The picture below displays all our GitHub projects. When this picture was taken, we had the following projects.

You can see all releases we published for each project.

The directed Graph for GitHub displays all major and minor releases for our Grafana plugins.
The directed Graph for GitHub displays all major and minor releases for our Grafana plugins.

You are welcome to take a look and learn about our Grafana plugins at Live Updates.

Apache ECharts visualization panel in the wild

Since we adopted and improved the Apache ECharts visualization panel, we have received great positive feedback from the community. Thank you!

Our clients gladly accepted our help in upgrading from an older version of the library.

In addition, Volkov Labs migrated industrial Plotly dashboards to Apache ECharts. We were able to keep all existing functionality and as well added all desired extra features like a custom toolbox button (to dynamically change the charts) and support of the multiple Y-axis.