欧洲杯投注软件

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 gauge panel for 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

  • Needle animation speed is now configurable

  • Arbitrary degree gauges now supported (default is from 60 to 320)

  • Value text on gauge can now be moved up/down as needed

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:

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

Changelog

v0.0.1
  • Initial commit
Sign in to install

Version

Dependencies:
  • Grafana 3.x.x