D3 Gauge

Panel

D3-based Gauge panel for Grafana
  • Showcase
    Showcase
  • Options
    Options
  • Radial Metrics
    Radial Metrics
  • Thresholding
    Thresholding

Grafana Gauge Panel

This panel plugin provides a D3-based gauge panel for Grafana 3.x

Screenshots

Example gauges

Default Gauge Default Gauge With Threshold

Custom Gauge Custom Gauge With Limits

Options

Options

With Limits

Options with Limits

Limits Shown

Options With Limits

Radial Metrics

Radial Metrics

Thresholding

Thresholding


Features

  • Data operator same as SingleStat panel (avg, sum, current, etc)

  • Unit formats same as SingleStat

  • Customizable Font size and type for value displayed and ticks

  • Animated needle transition (elastic or quadin)

  • Adjustable Limits

  • All possible color options for gauge components

  • Customizable gauge component sizes (needle length, width, tick length, etc)

  • Thresholding colors displayed on gauge

  • Threshold can modify displayed value and background

Building

This plugin relies on Grunt/NPM/Bower, typical build sequence:

npm install
bower install
grunt

For development, you can run:

grunt watch

The code will be parsed then copied into "dist" if "jslint" passes without errors.

Docker Support

A docker-compose.yml file is include for easy development and testing, just run

docker-compose up

Then browse to http://localhost:3000

External Dependencies

  • Grafana 3.x

Build Dependencies

  • npm
  • bower
  • grunt

Acknowledgements

This panel is based on the "SingleStat" panel by Grafana, along with large portions of these excellent D3 examples:

  • https://oliverbinns.com/articles/D3js-gauge/
  • http://bl.ocks.org/tomerd/1499279

Changelog

v0.0.1
  • Initial commit
Install Plugin

Version

Dependencies:
  • Grafana 3.x.x