SVG - AJAX - JSON - Nagvis

by Hans Schou, 2011-12-10

This is a demo of how to use SVG as the base map to get something like Nagvis.

Load the index.svg, which then loads the javascript, which loads the PHP-script which loads the local Nagios/Icinga /var/lib/nagios/status.dat.

Files needed to run the demo

index.svg
SVG file which show the graphical map and include the javascript file.
load-status-nagios-json.js.
Javascript which calls the PHP script to get a fresh set of JSON data.
status.nagios.json.php (source).
PHP script which parses the local /var/lib/{nagios,icinga}/status.dat and convert it to JSON data format.
status.dat
It is a file generated by Nagios/Icinga.

The first 3 files above could be stored in one single .php if that is more convenient. It is also possible to cache the data and only send the difference by changing the .php script and set a cookie.

One way to quickly make an index.svg is to use this simple perl script nagvis2svg.pl.

If you only have a Nagios status.dat use nagios2svg,pl to get a SVG file to start with.

The index.svg can be edited with either SVG-edit, Inkscape or by hand. After edit make sure you have the following lines to activate the Javascript/Ecmascript inside index.svg:

Apache will automatically load index.svg from a directory when the directive DirectoryIndex index.svg is in you Apache configuration file.

Sample screenshot:

Simple dashboard.