Skip to content
a jQuery plugin turning an html select element into a bullet graph
JavaScript CSS HTML
Find file
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
readme.md added other implementations

readme.md

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.

Usage

// bulletgraph with custom ranges & range labels
$('select#metric2').bulletGraph({
  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

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
  • 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.