prestontimmons / graphitejs

A jQuery plugin for displaying graphite graphs

graphite.js

Plugin to easily make graphs and update them on the fly using Graphite's Render Url API.

How it works

One. Adding a graph to a page:

<img id="graph">

$("#graph").graphite({
    from: "-24hours",
    target: [
        "server.web1.load",
    ],
});

Two. Setting custom options:

<img id="graph">

$("#graph").graphite({
    from: "-24hours",
    colorList: "red,green",
    target: [
        "alias(summarize(stats.site1.auth.login.error,'30min'),'Login Errors')",
        "alias(summarize(stats.site1.auth.login.user,'30min'),'Login Success')"
    ],
    title: "Login errors vs Success"
});

Three. Setting global defaults:

$.fn.graphite.defaults.width = "450"
$.fn.graphite.defaults.height = "300"

Four. Updating existing graph:

$.fn.graphite.update($("#graph"), {from: "-3days", lineWidth: "2"});

Five. Setting a custom api url--the default is "/render/":

$.fn.graphite.defaults.url = "http://myserver/render/"

or

$("#graph").graphite({
    url: "http://myserver/render/"
});

$(img).graphite(options)

You should probably specify a target. All other settings are optional. All settings will be passed through to the graphite api.