See for the official Zabbix site.

Docs/maps charts d3

Jump to: navigation, search

This project is dead, but most of the findings mentioned here are still relevant. When it comes to charts, consider taking a look at grafana-zabbix.

A proposed alternative to current graphing and mapping

Zabbix graphs and maps currently have a number of shortcomings that limit their usefulness:


  • Limited number of types and rendering options
  • Rendering glitches
  • Missing interaction
    • No mouseover values
    • No dynamic composition
    • No dynamic graph type
    • No markers to leave comments
  • Poor navigation between graphs
  • Scale and legend weaknesses
  • Missing analytical capabilities
    • Comparisons
    • Guides
    • Metrics
  • No vector graphics


  • Too restrictive and recursively effective permission model
  • Effective permissions can hardly be determined
  • Static and pre-defined layouts
  • No dynamic and/or external data sources for mapping
  • No Z-ordering of elements
  • Management of many maps
  • Flexibility in labeling and link style
  • No map search
  • No loops in maps
  • No vector graphics -- Recent work in ZBXNEXT-34
  • Integration of other graphical elements
  • Imperfect icon mapping
  • Filtering on maps

What could be done about it?

There is no good reason to have a separate graphics library within Zabbix and repeat the mistakes of other people who created graphics libraries before. Much rather, Zabbix should instead utilize a proven, well-maintained and -developed free 3rd party library. One that lends itself is D3. D3 is a JS library, thus data is shipped to the client and this data can be displayed and interacted with in arbitrary ways. One of its strengths is, that it is capable of creating charts as well as network layouts.

Implementation details

It is fairly simple to replace the image that is now generated on the server side with a div to serve as a container for the D3 content.

It could be convenient to separate a data model from a presentation model.

Possible inspiration

Other attempts on JS graphing in Zabbix

  • Zabbix Extras -- Brazilian add-on that uses JS graphing for trend prediction, based on jqplot

D3 frameworks

The big list

Graphs types

Related projects

Potential roadmap

As a first step, existing maps could still be rendered using D3. Static maps should not be replaced, but supplemented by additional dynamic maps. Such maps could depict trigger dependencies, template inheritance or the topological situation in a network. They could be dynamically layouted and navigated upon. Clicking a node could center the graph around this node and adjust the shown neighborhood.

Domain-specific maps could be generated too. Think about a view that resembles the physical layout of your SAN box, your racks, your switch or a drilldown through the block devices on one of the machines you monitor.

Simple charts could be replaced by D3 charts that implement some of the features asked for above.

First steps for graphs

  • Redirect call to chart.php to chart.js

Road map for maps

--"Volker Fröhlich" (talk) 09:40, 16 December 2013 (UTC)

  • Create a useful file structure and get D3 loaded in the right place
  • Use existing code from map.php and to make the basic data available for D3
  • Inject a SVG container instead of the raster image
  • Render simple nodes using the existing static coordinates
  • Render links
  • Static link styles
  • Label nodes
  • Label links
  • Basic zooming and panning
  • Use actual icons and icon mapping
  • Show host status
  • Line breaks on labels
  • Restore context menu
  • Allow to save the current SVG to a file
  • Provide UI elements for filtering and display options
  • Map editing
  • Background grid
  • Allow the use of SVG and raster symbols in a way the browser can cache them
  • Allow users to either use standard map viewing or compatible D3 generated maps
  • Consider schema changes to allow for improvements
  • Annul the permission model on maps; Allow general access but don't give away specific information on hosts the user has no permission to


  • Zoomable/resizable map -- Basic zooming implemented already, see above
  • Use SVG icons as an alternative to raster images and utilize the browser cache
  • Draw non-straight edges
  • Allow for multiple edges between nodes
  • Dynamic layouts (save last positions to achieve a quick, good layout next time; allow locking layouts)
  • Bind line style to data
  • Arrow styles
  • Hue images to reflect trigger status
  • Allow different backgrounds, like Web Map Services

Schema changes

  • Use the existing width and height columns of sysmaps_elements for other elements than hostgroup_elements. SVG requires size attributes to show raster graphics and those can otherwise only be obtained after download. SVG symbols should become adjustable in size like this as well. Unit?

Possible SVG icon's candidates:

Template based icons, fully customisable, easy colour adjustment, (e.g. trigger state, "LED"-like indicators, etc.)


SVG rendering showing a pre-layouted Zabbix map with raster icons and transparent SVG circles; Node and edge labels are shown as statically defined on the map, as well as edge styles.
Layout using actual icons in original size
Notice the white halo around link and node labels

Further opportunities

  • Serve as a presentation layer for improved reporting

Known problems

Rasterizing takes place in the browser. That means, that the API can not deliver raster graphics. SVG technically can be converted to raster graphics on the client side but requires an additional library and is problematic.

Relevant tickets



Shortcomings in rendering

Lack of analytical power



General issues

Limitations in visualization power

Layouting issues

Who is involved?

  • Volker Fröhlich <> IRC:volter
  • Mose <mose at> IRC:mose
  • Corey Shaw <> IRC:heaje

How to get started?

While there's probably a more elegant way, this will make D3 available for you:

   $page['scripts'] = array('d3.js');
  • Add a line like the following to the view file you need D3 on:
   require_once dirname(__FILE__).'/js/monitoring.maps.js.php';
  • You can now add your functions in the referenced file below include/views