Skip to content
A dashboard for Graphite
JavaScript Ruby
Find file
Pull request Compare This branch is 6 commits ahead, 141 commits behind ripienaar:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A simple Graphite dashboard built using Twitters Bootstrap.

Adding new dashboards is very easy and individual graphs is described using a small DSL.

See the sample directory for an example dashboard including a screenshot.


This dashboard is a Sinatra application, I suggest deploying it in Passenger or other Sinatra application server.

A sample gdash.yaml-sample is included, you should rename it to gdash.yaml and adjust the url to your Graphite etc in there.

The SinatraApp class take two required arguments:

* Where graphite is installed
* The directory that has your _dashboards_ directory full of templates

and additional options:

* The title to show at the top of your Graphite
* A prefix to prepend to all URLs in the dashboard
* How many columns of graphs to create, 2 by default.
* How often dashboard page is refreshed, 60 sec by default.
* The width of the graphs, 500 by default
* The height of the graphs, 250 by default
* Where your whisper files are stored - future use
* Optional interval quick filters

Creating Dashboards?

You can have multiple top level categories of dashboard. Just create directories in the templatedir for each top level category.

In each top level category create a sub directory with a short name for each new dashboard.

You need a file called dash.yaml for each dashboard, here is a sample:

:name: Email Metrics
:description: Hourly metrics for the email system

Then create descriptions in files like cpu.graph in the same directory, here is a sample:

title       "Combined CPU Usage"
vtitle      "percent"
area        :stacked
description "The combined CPU usage for all Exim Anti Spam servers"

field :iowait, :scale => 0.001,
               :color => "red",
               :alias => "IO Wait",
               :data  => "sumSeries(derivative(mw*munin.cpu.iowait))"

field :system, :scale => 0.001,
               :color => "orange",
               :alias => "System",
               :data  => "sumSeries(derivative(mw*.munin.cpu.system))"

field :user, :scale => 0.001,
             :color => "yellow",
             :alias => "User",
             :data  => "sumSeries(derivative(mw*.munin.cpu.user))"

The dashboard will use the description field to show popup information bubbles when someone hovers over a graph with their mouse for 2 seconds.

The graphs are described using a DSL that has its own project and documented over at

At the moment we do not support the Related Items feature of the DSL.

Custom Time Intervals?

You can reuse your dashboards and adjust the time interval by using the following url structure:


This will display the email dashboard with a time interval same day last week. If you hit /dashboard/email/time/ it will default to the past hour (-1hour) See for more info acceptable from and until values.

Quick interval filters shown in interface are configurable in gdash.yaml options sections. Eg:

    - :label: Last Hour
      :from: -1h
      :to: now
    - :label: Last Day
      :from: -1day
    - :label: Current Week
      :from: monday
      :to: now

Quick filter is not shown when interval_filters section is missing in configuration file.

Time Intervals Display?

If you configure time intervals in the config file you can click on any graph in the main dashboard view and get a view with different time intervals of the same graph

    - [ "-1hour", "1 hour" ]
    - [ "-2hour", "2 hour" ]
    - [ "-1day", "1 day" ]
    - [ "-1month", "1 month" ]
    - [ "-1year", "1 year" ]

With this in place in the config.yaml clicking on a graph will show the 5 intervals defined above of that graph

Full Screen Displays?

You can reuse your dashboards for big displays against a wall in your NOC or office by using the following url structure:

This will display the email dashboard in 4 columns each graph with a width of 600 and a height of 300

The screen will refresh every minute

Need To Reuse Graph Paramters?

If you have some graph parameters that are common for whole dashboard or all dashboards then you can use placeholders like %{myplaceholder}. Placeholders are replaced with values provided by config files or given by url as parameters:[myplaceholder]=myvalue&p[myplaceholder2]=myvalue2

Example usage.

Example datasources in Graphite:

Defaults mapping in your global gdash.yaml file:

    :server: 'servers.myserver'
    :gridline_color: '#3313131'

Defaults in your dashboard dash.yaml file:

  :country: 'us'

In your graph file example1.graph:

title 'Visitors for %{country}'
major_grid_line_color '%{gridline_color}'
minor_grid_line_color '%{gridline_color}'

field :visitors,
  :alias => 'Visitors',
  :data  => '%{server}.visitors.countries.%{country}'

In your graph file example2.graph:

title 'Pageviews for %{country}'
major_grid_line_color '%{gridline_color}'
minor_grid_line_color '%{gridline_color}'

field :pageviews,
 :alias => 'Pageviews',
 :data  => '%{server}.pageviews.countries.%{country}'

To show your country based dashboards:[country]=us[country]=us[country]=uk[country]=uk


R.I.Pienaar / / / @ripienaar

Something went wrong with that request. Please try again.