Skip to main content

The missing plugin to create business and industrial charts in Grafana

· 5 min read
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 libraries offering easy ways to add intuitive, interactive, and highly customizable charts. It is written in pure JavaScript and based on zrender, a new lightweight canvas library.

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 libraries into your Grafana dashboard. The original plugin was developed for Grafana 6.3/7.0 and Apache ECharts libraries 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 libraries 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 (Configuration->Plugins menu). Alternatively, you can install it manually from our Private Repository or download directly from GitHub.

Apache ECharts libraries

Apache ECharts libraries 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 Apache ECharts libraries 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?

Directed Graph Tutorial

The launch of the LIVE project triggered many how-to questions. To answer them all by explaining how we created this project, the following 2 part tutorial was put together. In the LIVE project we employed the Apache ECharts directed graph to track company activities across Medium, GitHub, YouTube, and various external resources.

Part 1

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

Part 2

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

The LIVE 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.

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 project. When this picture was taken, we had the following projects:

You can see all releases we published for each project.

Directed Graph for GitHub displays all major and minor releases for our Grafana plugins.
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 adapted and released a new version of 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 libraries.

In addition, Volkov Labs migrated industrial Plotly dashboards to Apache ECharts. We obviously 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.