<commit_before>## graphite.js

Plugin to easily make graphs and update them on the fly using
[Graphite url api](http://readthedocs.org/docs/graphite/en/latest/url-api.html) on the background,
allowing you to easily add:

* Client-side rendered, interactive, canvas-based graphs
  (relying on [Flot](http://www.flotcharts.org/)
* Client-side rendered, interactive, svg-based graphs
  (relying on [Rickshaw](http://code.shutterstock.com/rickshaw/))
* PNG's rendered by Graphite

Goals:
* easy to use, elegant but powerful api.
* only abstract where it makes sense.  Graphite, Flot, and Rickshaw api's are awesome and powerfull, expose them
* aim for some consistency in configuration across backends (to the extent possible and sane)
* provide all interactive features you would expect; so that all graphite dashboards can rely on the same
code to render client-side graphs, minimizing redundant work and combining efforts.

Interactive features (work in progress):
* getting more info (in popups) when hoovering over datapoints
* interactive zooming and panning
* inspection of specific bands, reordering bands, toggling certain targets on and off
* toggling between line vs stack (band) mode
* etc

**any web code that can generate graphite urls can use this library with minimal transition work**

![Screenshot](https://raw.github.com/Dieterbe/graphitejs/master/screenshot-compare.png)<commit_msg>add table with status of interactive features<commit_after>## graphite.js

Plugin to easily make graphs and update them on the fly using
[Graphite url api](http://readthedocs.org/docs/graphite/en/latest/url-api.html) on the background,
allowing you to easily add:

* Client-side rendered, interactive, canvas-based graphs
  (relying on [Flot](http://www.flotcharts.org/))
* Client-side rendered, interactive, svg-based graphs
  (relying on [Rickshaw](http://code.shutterstock.com/rickshaw/))
* PNG's rendered by Graphite

Goals:
* easy to use, elegant but powerful api.
* only abstract where it makes sense.  Graphite, Flot, and Rickshaw api's are awesome and powerfull, expose them
* aim for some consistency in configuration across backends (to the extent possible and sane)
* provide all interactive features you would expect; so that all graphite dashboards can rely on the same
code to render client-side graphs, minimizing redundant work and combining efforts.

Feature comparison table.
NA = not available, WIP = work in progress

<table>
<tr>
    <th></th>
    <th>PNG</th>
    <th>Flot</th>
    <th>Rickshaw</th>
</tr>
<tr>
    <td>description</td>
    <td>Static PNG images rendered by graphite server</td>
    <td>Interactive client-side rendering using canvas</td>
    <td>Interactive client-side rendering using SVG</td>
</tr>
<tr>
    <td>speed</td>
    <td>quite fast</td>
    <td>quite fast.  interactive features near-realtime</td>
    <td>becomes slow with many datapoints and/or multiple graphs</td>
</tr>
<tr>
    <td>hoover over datapoints/graph -> popup with exact data</td>
    <td>NA</td>
    <td>WIP</td>
    <td>Y</td>
</tr>
<tr>
    <td>events with annotations</td>
    <td>NA</td>
    <td>WIP</td>
    <td>WIP</td>
</tr>
<tr>
    <td>interactive zooming and panning</td>
    <td>NA</td>
    <td>WIP</td>
    <td>WIP</td>
</tr>
<tr>
    <td>hoover over legend -> hilight on plot</td>
    <td>NA</td>
    <td>WIP</td>
    <td>Y</td>
</tr>
<tr>
    <td>reordering items in legend to reorder on stacked plot</td>
    <td>NA</td>
    <td>WIP</td>
    <td>Y</td>
</tr>
<tr>
    <td>toggling targets on/off</td>
    <td>NA</td>
    <td>WIP</td>
    <td>Y</td>
</tr>
<tr>
    <td>toggling between line vs stack (band) mode</td>
    <td>NA</td>
    <td>WIP</td>
    <td>Y</td>
</tr>
<tr>
    <td>notes</td>
    <td>1999 called. they want their static images back.<br/>
    you could actually implement these features with a JS layer on top. (and some monitoring dashboards do this) but that is/would be soo slow)</td>
    <td>flot seems to have a tad more features than rickshaw</td>
    <td>more "generic" (based on D3), all data is accessible in DOM and themeable with CSS</td>
</tr>
</table>

**any web code that can generate graphite urls can use this library with minimal transition work**

![Screenshot](https://raw.github.com/Dieterbe/graphitejs/master/screenshot-compare.png)
{'fraction_non_alphanumeric': 0.12116279069767442, 'fraction_numerical': 0.0011627906976744186, 'mean_word_length': 3.949367088607595, 'pattern_counts': {'":': 0, '<': 116, '<?xml version=': 0, '>': 118, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '276161', 'n_tokens_mistral': 1436, 'n_tokens_neox': 1388, 'n_words': 491}