ygrenzinger/grafana-chord-diagram-panel

D3 Based Gauge Panel for Grafana 3.x

Inspirations are: https://github.com/sghall/d3-chord-diagrams https://github.com/grafana/piechart-panel

Grafana Gauge Panel

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

Screenshots

Example gauges

Options

With Limits

Limits Shown

Radial Metrics

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