Client-side rendered graphite charts for all

Client-side rendering of charts as opposed to using graphite's server side generated png's allows various interactivity features, such as:
  • interactive realtime zooming and panning of the graph, timeline sliders
  • realtime switching between various rendering modes (lines, stacked, etc)
  • toggling certain targets on/off, reordering them, highlighting their plot when hoovering over the legend, etc
  • basic data manipulation, such as smoothing to see how averages compare (akin to movingAverage, but now interactive)
  • popups detailing the exact metrics when hoovering over the chart's datapoints
  • popups for annotated events. (a good use for anthracite).

Those are all features of charting libraries such as flot and rickshaw, the only remaining work is creating a library that unleashes the power of such a framework, integrates it with the graphite api datasource, and makes it available over a simple but powerful api.

That's what I'm trying to achieve with github.com/Dieterbe/graphitejs.
It's based on rickshaw.
It gives you a JavaScript api to which you specify your graphite targets and some options and it'll give you your graph with extra interactivity sauce. Note that graphite has a good and rich api, one that is widely known and understood, that's why I decided to keep it exposed and not abstract any more than needed.

There are many graphite dashboards with a different focus, but as far as plotting graphs, what they need is usually very similar: a plot to draw multiple graphite targets, a legend, an x-axis, 1 or 2 y-axis, lines or stacked bands, so I think there's a lot of value in having many dashboard projects share the same code for the actual charts, and I hope we can work together on this.

Add comment