netgraph

Netgraph generates pretty yeri graphs out of data from RRD files generated by collectd. The graphs are generated entirely client-side, fetching data over XHR.

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.

Requirements

• 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

How to build it

npm install

The finished products are placed in dist/:

• netgraph.js is the actual product, created by webpack
• demo.html is 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 netgraph-group)
• 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 "value:AVERAGE")
• timeout: (optional) XHR fetch timeout, in milliseconds (default: 2000)

The RRD files are fetched over XHR and parsed in javascript to extract the requested timeseries data.

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 rrd tags) 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.

Error graphs

Normal 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: #f33)
• error-opacity: CSS opacity of the error zones (default: 0.3)

Tooltip CSS

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.

License

Apache 2 (open-source) license, included in 'LICENSE.txt'.

Authors

@robey - Robey Pointer [email protected]