Skip to content


Subversion checkout URL

You can clone with
Download ZIP
a jQuery plugin turning an html select element into a bullet graph
JavaScript CSS HTML
Latest commit bb0d60c @johdax add MIT license
Failed to load latest commit information.
css initial commit
js initial commit
LICENSE add MIT license
examples.haml initial commit added other implementations

jQuery Bullet Graph

A jQuery plugin, turning 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. The selected slider value corresponds to the selected option in the html select element.


// bulletgraph with custom ranges & range labels
  width: 200,
  height: 20,
  ranges: ['0%', '20%', '70%', '100%'],
  rangesLabels: ['low', 'medium', 'high'],
  sliderOptions: {
    disabled: true

for more usage and customization, please have a look at the source & examples code


  • 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
  • sliderOptions - options for the jQuery UI slider

other Implementations

Google Charts API, Google Spreadsheets, Excel, WPF,WinForms, CSS/HTML, jQuery Sparklines, Protovis,...

Something went wrong with that request. Please try again.