Get new jQuery plugins just once a week
January 9, 2013
Bullet Graph | jQuery plugin for bullet graph slider
Bullet Graph is a jQuery plugin that turns a html select element into a bullet graph slider. Bullet graphs, developed by Stephen Few, feature a single primary measure, a comparative measure. These measures are displayed in the context of qualitative and quantitative measures. Additionally the qualitative ranges are displayed as varying intensities of a single hue to make them discernible. This plugin creates a pure css based bullet graph and makes the primary measure adjustable by incorporating a jQuery UI slider element.
It has the following customizable options :-
- width – of bulletgraph in pixel.
- height – of bulletgrpah in pixel.
- tickHeight – height of top/bottom ticks for labels and steps.
- ranges – array of (qualitative) range borders in % – e.g. [‘0%’, ‘50%’, ‘75%’, ‘100%’].
- rangeLabels – array of (qualitative) labels for ranges (size=rangesLabels-1) – e.g. [‘poor’, ‘satisfactory’, ‘good’].
- ticks – number of ticks to show at the bottom, usually the number of values in select element.
- nTick – reduce number of ticks to show only every n-th tick.
- steps – steps for jQuery UI slider.
- showLabels – show quantitative labels and ticks on top.
- showTicks – show ticks and qualitative labels at the bottom.
Created by Johannes Daxböck
A bullet graph slider
Sign up for our weekly newsletter.