New and better graphs using D3.js

Today I updated the graphs from being generated by rrdtool to be generated with Javascript and SVG using the wonderful d3.js library. You can see an example of the new graphs or if you have a server in the pool you can use the new graphs.

There are a lot of things I wanted to do that using RRD made hard. Splitting the central parts of the system across more servers than the 2-3 it’s running on now. Supporting multiple monitoring nodes. More interactive graphs. Showing historical data. Etcetera.

None of it impossible with RRDtool or for example it’s cousin graphite, but those tools really just aren’t a good match for our needs here.

The update today is just the beginning. Over on the “beta pool” we’re already running with multiple monitors and on my development system I’ll soon add some more features to the graphs so you can see the details of individual data points, go back in time a bit and so on. There are also a number of places on the site still where the old graphs are used even if your browser does support SVG.

I know many of you are using the old graphs on your own websites, ops charts, startpages and so on, and I intent do continue to maintain them at the current level for as long as possible. They’re also supposed to show if you visit with a browser without Javascript and SVG support.

When the features and API have stabilized a bit, I’ll also make a widget so you can put the D3 graphs on other sites and document the JSON API so you can use it to extract the data similar to the current CSV option.