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.
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.
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.
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.
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.
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.
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.
- Apache ECharts panel
- Calendar panel
- Dynamic Text panel
- Data Manipulation panel
- Environment data source
- RSS-Atom data source
- Static data source
You can see all releases we published for each project.
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.
