Make whatever kind of cool monitoring page you want, using normal HTML/CSS, and netgraph will fill in the
.netgraph divs with graphs from the RRDs you specify. No fuss.
Check out this demo of a snapshot of home-network latency graphs.
- ES6 support in your browser (as of 2017, all major browsers support it)
- RRD files exposed through your website (usually by symlinking them into your web folder)
- For example:
ln -s /var/lib/collectd/rrd/MY_HOSTNAME /var/html/netgraph/collectd
- For example:
How to build it
The finished products are placed in
netgraph.jsis the actual product, created by webpack
demo.htmlis just a little demo to show you how it works
How it works
rrd tags in the page tell netgraph which files to load, and what data to pull out of those files:
name: give a unique name to this timeseries (used to graph it in
path: (on the server) where the RRD file can be found
data: colon-separated name of the data series and which consolidation to use (like
timeout: (optional) XHR fetch timeout, in milliseconds (default: 2000)
In the page, any element with class
netgraph will be filled with a graph of the timeseries data. These attributes configure each graph:
line: comma-separated list of RRD timeseries names (from the
rrdtags) to plot
timespan: time this graph should cover ("hour", "day", or "week"; default: "hour")
unit: unit to use on the Y-axis label (default: "ms")
time: the end-point of this graph, in ISO format ("2021-03-31T12:00:00Z") if you want a different end-point than "now"
max: if set, scale the Y-axis to this maximum value
fill: if present, draw line graphs as filled
colors: comma-separated list of colors to use for the lines (default: yeri defaults)
no-highlight: turn off the highlight marker and tooltip that appear when you mouse over the graph (showing specific values on the graph)
no-tooltip: turn off just the floating tooltip
if several graphs will have the same values for some of these attributes, they may be set on an enclosing
netgraph-group element. any
netgraph element inside it will inherit any un-set values from the group.
line series are plotted as a line. If a series represents an error (like dropped pings), you may want to graph it as a vertical red zone. For any series listed in the
error attribute, any values greater than
error-threshold are marked as red zones on the graph. Other values are ignored.
Error graph configuration attributes go in the same
netgraph element. They are:
error: comma-separated list of RRD timeseries to treat as errors
error-threshold: value above which to draw error regions (default: 0.0)
error-color: color to use for the error zones (default:
error-opacity: CSS opacity of the error zones (default: 0.3)
The floating tooltip is styled by CSS at the top of netgraph.ts. This CSS is prepended to the document. Any CSS you add to your page will override these defaults.
Apache 2 (open-source) license, included in 'LICENSE.txt'.