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.
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
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 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.
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.
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.
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:
- Volkov Labs Application,
- Apache ECharts visualization panel,
- Dynamic Text visualization panel,
- Environment data source,
- Static data source,
- Calendar visualization panel,
- RSS-Atom data source,
- Data Manipulation panel,
- Plugin templates.
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 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.