generates graphs on a webpage from RRD files (using yeri)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Robey 51f8e53c46 new yeri 4 months ago
demo try to make the demo visible 6 months ago
public add a little demo 6 months ago
src add a little demo 6 months ago
.gitignore move /site to /public 6 months ago
LICENSE.txt better farnsworth demo 1 year ago
README.md typos 6 months ago
demo-graph.png update yeri to actual released version 6 months ago
fix-dygraphs.sh rename a bunch of things. 4 years ago
package-lock.json new yeri 4 months ago
package.json new yeri 4 months ago
tsconfig.json first draft: make netgraph site out of csv files. 4 years ago
webpack.config.js switch from dygraph to yeri for the graphing library 6 months ago

README.md

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 robeypointer@gmail.com