Spice Up Your Zabbix Dashboards: Exploring the E-Chart Widget Module

Good morning everyone, and welcome back! It’s Dimitri Bellini here from Quadrata, your go-to channel for the open-source and IT world that I love – and hopefully, you do too!

This week, we’re diving back into our good friend, Zabbix. Why? Because a contact from the vibrant Brazilian Zabbix community reached out to me. He shared a fascinating project he’s been working on, aimed at enhancing the visual appeal of Zabbix dashboards. I was intrigued, and after taking a look, I knew I had to share it with you.

The project is called E-Chart Zabbix, and as the name suggests, it leverages the powerful Apache ECharts library to bring fresh, dynamic visualizations into our Zabbix frontend.

Discovering Apache ECharts: A Hidden Gem for Data Visualization

Before we jump into the Zabbix module itself, let’s talk about the foundation: Apache ECharts. Honestly, I was blown away. I wasn’t aware of such a rich, well-crafted open-source ecosystem for graphic libraries. We’ve often searched for good charting solutions for client projects, and I wish we’d found these sooner!

ECharts offers a fantastic array of chart types, far beyond the standard Zabbix offerings. Just look at some of the demos:

• Interactive charts with smooth animations when filtering data series.
• Easy export to PNG format – a simple but often crucial feature.
• A vast selection including various pie charts, heatmaps, geomaps, and even radar charts (great for visualizing multi-dimensional performance metrics).

It’s a treasure trove of inspiration for anyone needing to present data effectively. I definitely plan to explore these libraries more myself.

Introducing the E-Chart Zabbix Module by Monzphere

The E-Chart Zabbix module, developed by the folks at Monzphere (a Brazilian company creating both paid and open-source Zabbix extensions), takes a selection of these ECharts visualizations and integrates them as widgets directly into the Zabbix dashboard.

Here are some of the widgets included:

• Low Level Discovery (LLD) Table: This is a standout feature! It addresses a common request: displaying LLD items (like network interface stats) in a structured table format. It cleverly uses item name patterns (e.g., *:bits received and *:bits sent) to automatically create columns for related metrics. This is incredibly useful for seeing RX/TX, errors, or other stats side-by-side for multiple interfaces.
• Interface Load Visualization: A graph where the line width dynamically represents the load or traffic volume.
• Treemap: Excellent for quickly identifying the most significant metrics in a dataset by representing values as proportionally sized rectangles.
• Horizontal Bar Chart: A familiar format, but enhanced with the ability to use wildcards (*) in item patterns to easily include all metrics from an LLD rule.
• Funnel Chart: Another great way to visually compare the magnitude of different metrics.
• Water Effect Chart: A visually appealing gauge-like chart.
• Sunburst/Donut Chart: A hierarchical visualization, useful for nested data.

Important Note: While testing (on Zabbix 7.0), I noticed a couple of things that seem to be works in progress. For instance, the LLD table didn’t automatically convert BPS values to KBPS/MBPS, and some charts like the Pie and Water Effect seemed to only display one metric even when configured with multiple. It’s a new project, so some rough edges are expected, but the potential is definitely there!

Installation Guide (Zabbix 7.0)

Ready to try it out? Here’s how to install the module (I tested this on Zabbix 7.0, compatibility with older versions isn’t specified):

1. Download the Module:
   Go to the E-Chart Zabbix GitHub repository. Click the ‘Code’ button and copy the repository URL or download the ZIP file.
2. Access Your Zabbix Server Console:
   SSH into your Zabbix server.
3. Clone or Extract Files:
   Navigate to a temporary directory. If you copied the URL, use git clone:
   git clone https://github.com/monzphere/echart-zabbix.git
   Or, if you downloaded the ZIP, upload and unzip it:
   unzip echart-zabbix-main.zip (The exact filename might vary).
4. Move Module Files:
   Copy the contents of the downloaded/cloned directory (it should contain files like `Module.php`, directories like `Widget`, etc.) into your Zabbix frontend modules directory. The target directory is typically:
   /usr/share/zabbix/modules/echart-zabbix
   You might need to create the `echart-zabbix` directory first. Use a command like:
   sudo mkdir /usr/share/zabbix/modules/echart-zabbix
sudo cp -r echart-zabbix-main/* /usr/share/zabbix/modules/echart-zabbix/
   (Adjust paths and use `sudo` if necessary).
5. Activate in Zabbix Frontend:
   Log in to your Zabbix web interface.
   Navigate to: Administration -> General -> Modules.
6. Scan and Enable:
   Click the “Scan directory” button. You should see the “ECharts” module listed, likely authored by Monzphere. By default, it will be disabled. Click on the “Disabled” status to enable it.

Using the New Widgets

Once enabled, you can add these new widgets to any dashboard:

1. Edit your desired dashboard.
2. Click “Add widget”.
3. For the “Type”, select “ECharts”.
4. A new dropdown will appear allowing you to choose the specific ECharts widget type (Treemap, LLD Table, Funnel, etc.).
5. Configure the widget, primarily by defining the “Item pattern” to select the data you want to display. You can use wildcards (*) here.
6. Save the widget and the dashboard.

While the configuration options are currently quite basic, the results can already add a nice visual touch and, in the case of the LLD table, significant functional value.

Context and Final Thoughts

It’s true that Zabbix itself has made strides in visualization, especially with recent improvements to maps (as I covered in a previous video – check it out!), honeycomb views, and gauges. Playing with map backgrounds, icons, and color themes can drastically improve the user experience.

However, the E-Chart Zabbix module offers *different* kinds of visualizations that aren’t natively available. It complements the existing Zabbix features, providing more tools for specific data presentation needs. The LLD table alone is a compelling reason to check it out.

This project is a great example of the community extending Zabbix’s capabilities. While it needs refinement, I believe it’s worth supporting. Trying it out and providing constructive feedback to the developers via GitHub issues is the best way to help it mature.

A big thank you to the Monzphere team for this contribution!