Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

initial commit

  • Loading branch information...
commit 8265f954fe1d45c5b75bb1aabdaf9356860538ef 0 parents
@johdax authored
48 bg.tmproj
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+ <key>currentDocument</key>
+ <string>readme.md</string>
+ <key>documents</key>
+ <array>
+ <dict>
+ <key>expanded</key>
+ <true/>
+ <key>name</key>
+ <string>bulletgraphs</string>
+ <key>regexFolderFilter</key>
+ <string>!.*/(\.[^/]*|CVS|_darcs|_MTN|\{arch\}|blib|.*~\.nib|.*\.(framework|app|pbproj|pbxproj|xcode(proj)?|bundle))$</string>
+ <key>sourceDirectory</key>
+ <string></string>
+ </dict>
+ </array>
+ <key>fileHierarchyDrawerWidth</key>
+ <integer>211</integer>
+ <key>metaData</key>
+ <dict>
+ <key>readme.md</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>542</integer>
+ <key>line</key>
+ <integer>34</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>0</integer>
+ </dict>
+ </dict>
+ <key>openDocuments</key>
+ <array>
+ <string>readme.md</string>
+ </array>
+ <key>showFileHierarchyDrawer</key>
+ <true/>
+ <key>windowFrame</key>
+ <string>{{241, 9}, {1056, 710}}</string>
+</dict>
+</plist>
142 css/app.css
@@ -0,0 +1,142 @@
+body {
+ font-family: 'Arial Narrow', sans-serif;
+ margin: 2em;
+ background-color: #efefef;
+ color: #111;
+}
+
+#content {
+ margin-left: 4px;
+}
+
+.hidden {
+ display: none;
+}
+
+#hsbg1, #hsbg2 {
+ margin: 2em 0;
+}
+
+#hmbg {
+ margin: 2em 0;
+}
+
+#hmbg .bulletbox {
+ margin-bottom: 0.75em;
+}
+
+.clear {
+ clear: both;
+}
+
+h1 {
+ font-size: 40;
+ line-height: 40px;
+ text-transform: uppercase;
+}
+
+h2 {
+ margin-top: 2em;
+ font-size: 28px;
+ line-height: 28px;
+}
+
+#vsbg1 {
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
+
+/* style slider ranges & handles */
+
+#hsbg1 .ui-slider-range {
+ background-color: #00A0CF;
+ background: -webkit-gradient(linear, left top, left bottom, from(#00A0CF), to(#0082A8));
+ background: -moz-linear-gradient(top, #00A0CF, #0082A8);
+ background: -o-linear-gradient(top, #00A0CF, #0082A8);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A0CF', endColorstr='#0082A8');
+}
+
+#hsbg1 .ui-slider-handle {
+ background-color: #00A0CF;
+ box-shadow: 1px 1px 2px #0082A8;
+ -webkit-box-shadow: 1px 1px 2px #0082A8;
+ -moz-box-shadow: 1px 1px 2px #0082A8;
+ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#0082A8, offX=1, offY=1, positive=true);
+}
+
+#hsbg2 .ui-slider-range {
+ background-color: #8C0E34;
+ background: -webkit-gradient(linear, left top, left bottom, from(#CC144C), to(#8C0E34));
+ background: -moz-linear-gradient(top, #CC144C, #8C0E34);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CC144C', endColorstr='#8C0E34');
+}
+
+#hsbg2 .ui-slider-handle {
+ background-color: #CC144C;
+ box-shadow: 1px 1px 2px #8C0E34;
+ -webkit-box-shadow: 1px 1px 2px #8C0E34;
+ -moz-box-shadow: 1px 1px 2px #8C0E34;
+ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#8C0E34, offX=1, offY=1, positive=true);
+}
+
+#bulletgraph3_bulletGraphBox .ui-slider-range {
+ background-color: #B28704;
+ background: -webkit-gradient(linear, left top, left bottom, from(#F2B705), to(#B28704));
+ background: -moz-linear-gradient(top, #F2B705, #B28704);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2B705', endColorstr='#B28704');
+}
+
+#bulletgraph3_bulletGraphBox .ui-slider-handle {
+ background-color: #F2B705;
+ box-shadow: 1px 1px 2px #B28704;
+ -webkit-box-shadow: 1px 1px 2px #B28704;
+ -moz-box-shadow: 1px 1px 2px #B28704;
+ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#B28704, offX=1, offY=1, positive=true);
+}
+
+#bulletgraph4_bulletGraphBox .ui-slider-range {
+ background-color: #8C0E34;
+ background: -webkit-gradient(linear, left top, left bottom, from(#1EF4C1), to(#16B48E));
+ background: -moz-linear-gradient(top, #1EF4C1, #16B48E);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1EF4C1', endColorstr='#16B48E');
+}
+
+#bulletgraph4_bulletGraphBox .ui-slider-handle {
+ background-color: #1EF4C1;
+ box-shadow: 1px 1px 2px #16B48E;
+ -webkit-box-shadow: 1px 1px 2px #16B48E;
+ -moz-box-shadow: 1px 1px 2px #16B48E;
+ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#16B48E, offX=1, offY=1, positive=true);
+}
+
+#bulletgraph5_bulletGraphBox .ui-slider-range {
+ background-color: #7F077F;
+ background: -webkit-gradient(linear, left top, left bottom, from(#BF0ABF), to(#7F077F));
+ background: -moz-linear-gradient(top, #BF0ABF, #8C0E34);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BF0ABF', endColorstr='#8C0E34');
+}
+
+#bulletgraph5_bulletGraphBox .ui-slider-handle {
+ background-color: #BF0ABF;
+ box-shadow: 1px 1px 2px #7F077F;
+ -webkit-box-shadow: 1px 1px 2px #7F077F;
+ -moz-box-shadow: 1px 1px 2px #7F077F;
+ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#7F077F, offX=1, offY=1, positive=true);
+}
+
+#bulletgraph7_bulletGraphBox .ui-slider-range {
+ background-color: #B2AB8B;
+ background: -webkit-gradient(linear, left top, left bottom, from(#D9D0A9), to(#B2AB8B));
+ background: -moz-linear-gradient(top, #D9D0A9, #B2AB8B);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D9D0A9', endColorstr='#B2AB8B');
+}
+
+#bulletgraph7_bulletGraphBox .ui-slider-handle {
+ background-color: #D9D0A9;
+ box-shadow: 1px 1px 2px #B2AB8B;
+ -webkit-box-shadow: 1px 1px 2px #B2AB8B;
+ -moz-box-shadow: 1px 1px 2px #B2AB8B;
+ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#B2AB8B, offX=1, offY=1, positive=true);
97 css/bulletgraph.css
@@ -0,0 +1,97 @@
+.containerbox {
+clear: both;
+}
+
+.bulletbox {
+position: relative;
+border: 1px solid #cccccc;
+float: left;
+}
+
+.info {
+float: left;
+margin: 4px;
+}
+
+.bulletbox .mark_range {
+position: absolute;
+background-color: #cccccc;
+z-index: 1;
+}
+
+.bulletbox .caption_range {
+position: absolute;
+font-size: 8pt;
+text-align: center;
+color: #666666;
+}
+
+.bulletbox .mark_bottom {
+position: absolute;
+width: 1px;
+background-color: #cccccc;
+z-index: 1;
+font-size: 0;
+}
+
+.bulletbox .caption_bottom {
+position: absolute;
+font-size: 6pt;
+text-align: center;
+color: #666666;
+}
+
+.bulletbox .range {
+position: absolute;
+z-index: 1;
+}
+
+.bulletbox .target {
+position: absolute;
+width: 2px;
+background-color: #ccc;
+z-index: 3;
+box-shadow: 1px 1px 2px #818181;
+-webkit-box-shadow: 1px 1px 2px #818181;
+-moz-box-shadow: 1px 1px 2px #818181;
+filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=1, offY=1, positive=true);
+}
+
+.bulletbox .actual {
+position: absolute;
+left: 0px;
+top: 7px;
+background: none;
+font-size: 0;
+z-index: 2;
+border-radius: 0px;
+border: none;
+}
+
+.bulletbox .ui-slider-range {
+background-color: #000;
+background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#000));
+background: -moz-linear-gradient(top, #555, #000);
+background: -o-linear-gradient(top, #555, #000);
+filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#000');
+box-shadow: 1px 1px 2px #818181;
+-webkit-box-shadow: 1px 1px 2px #818181;
+-moz-box-shadow: 1px 1px 2px #818181;
+filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=1, offY=1, positive=true);
+}
+
+.bulletbox .ui-slider .ui-slider-handle {
+cursor: move;
+top: -14px;
+left: 0px;
+position: absolute;
+background-color: #000;
+border: none;
+width: 2px;
+z-index: 10;
+box-shadow: 1px 1px 2px #000;
+-webkit-box-shadow: 1px 1px 2px #000;
+-moz-box-shadow: 1px 1px 2px #000;
+filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=1, offY=1, positive=true);
+outline: none;
+}
32 examples.haml
@@ -0,0 +1,32 @@
+%html
+ %head
+ %title jQuery Bullet Graph Sliders
+ %script{:src => "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", :type => "text/javascript"}
+ %script{:src => "js/jquery-ui-slider-1.8.14.min.js", :type => "text/javascript"}
+ %script{:src => "js/jquery.bulletgraph.js", :type => "text/javascript"}
+ %script{:src => "js/app.js", :type => "text/javascript"}
+
+ %link(rel="stylesheet" type="text/css" href="css/app.css")
+ %link(rel="stylesheet" type="text/css" href="css/bulletgraph.css")
+
+ %body
+ %div#container
+ %h1 jQuery Bullet Graphs
+ %div#content
+ %h2 Single bullet graphs
+ %div#hsbg1
+ %select#metric1.hidden{:name => "metric:1", :data => {:target => rand(100), :treshold => rand(20)}}
+ - (0..100).each do |o|
+ %option{:value => o}= o
+ %div.clear
+ %div#hsbg2
+ %select#metric2.hidden{:name => "metric:2"}
+ - (0..10).each do |o|
+ %option{:value => o}= o
+ %div.clear
+ %h2 Multiple bullet graphs combined
+ - (0..4).each do |b|
+ %div#hmbg
+ %select.multigraph.hidden{:id => "bulletgraph"+(b+3).to_s, :name => "metric:"+(b+3).to_s, :data => {:target => rand(100), :treshold => 15}}
+ - (0..100).each do |o|
+ %option{:value => o}= o
82 js/app.js
@@ -0,0 +1,82 @@
+// jquery random @http://blog.mastykarz.nl/jquery-random-filter/
+jQuery.jQueryRandom = 0;
+jQuery.extend(jQuery.expr[":"],
+{
+ random: function(a, i, m, r) {
+ if (i == 0) {
+ jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
+ };
+ return i == jQuery.jQueryRandom;
+ }
+});
+
+$(document).ready(function() {
+
+ // bulletgraph with custom range labels
+ $('select#metric1').bulletGraph({
+ width: 400,
+ height: 30,
+ rangesLabels: ['empty', 'half', 'full'],
+ nTick: 5
+ });
+
+ // 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
+ }
+ });
+
+ // multi bulletgraph with multiple targets, custom ranges & range labels
+ $('select.multigraph').each(function(i, o) {
+ // create labels/ticks on first and last bulletgraph
+ switch (i) {
+ case 0:
+ jQuery(o).bulletGraph({
+ showLabels:
+ true,
+ showTicks: false,
+ tickMargin: '10px',
+ width: 300,
+ height: 25,
+ ranges: ['0%', '20%', '50%', '85%', '100%'],
+ rangesLabels: ['Beginner', 'Intermediate', 'Advanced', 'Expert']
+ });
+ break;
+ case ($('select.multigraph').length - 1) :
+ jQuery(o).bulletGraph({
+ showLabels: false,
+ showTicks: true,
+ tickMargin: '10px',
+ nTick: 10,
+ width: 300,
+ height: 25,
+ ranges: ['0%', '20%', '50%', '85%', '100%'],
+ rangesLabels: ['Beginner', 'Intermediate', 'Advanced', 'Expert']
+ });
+ break
+ default:
+ jQuery(o).bulletGraph({
+ showLabels:
+ false,
+ showTicks: false,
+ width: 300,
+ height: 25,
+ ranges: ['0%', '20%', '50%', '85%', '100%'],
+ rangesLabels: ['Beginner', 'Intermediate', 'Advanced', 'Expert']
+ });
+ break;
+ }
+ });
+
+ // set a random option for every select element
+ $('select').each(function() {
+ $(this).val($(this).children('option:random').attr('value'));
+ $(this).change();
+ });
+
+});
83 js/jquery-ui-slider-1.8.14.min.js
@@ -0,0 +1,83 @@
+/*!
+ * jQuery UI 1.8.14
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI
+ */
+(function(c,j){function k(a,b){var d=a.nodeName.toLowerCase();if("area"===d){b=a.parentNode;d=b.name;if(!a.href||!d||b.nodeName.toLowerCase()!=="map")return false;a=c("img[usemap=#"+d+"]")[0];return!!a&&l(a)}return(/input|select|textarea|button|object/.test(d)?!a.disabled:"a"==d?a.href||b:b)&&l(a)}function l(a){return!c(a).parents().andSelf().filter(function(){return c.curCSS(this,"visibility")==="hidden"||c.expr.filters.hidden(this)}).length}c.ui=c.ui||{};if(!c.ui.version){c.extend(c.ui,{version:"1.8.14",
+keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}});c.fn.extend({_focus:c.fn.focus,focus:function(a,b){return typeof a==="number"?this.each(function(){var d=this;setTimeout(function(){c(d).focus();
+b&&b.call(d)},a)}):this._focus.apply(this,arguments)},scrollParent:function(){var a;a=c.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?this.parents().filter(function(){return/(relative|absolute|fixed)/.test(c.curCSS(this,"position",1))&&/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0):this.parents().filter(function(){return/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,
+"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0);return/fixed/.test(this.css("position"))||!a.length?c(document):a},zIndex:function(a){if(a!==j)return this.css("zIndex",a);if(this.length){a=c(this[0]);for(var b;a.length&&a[0]!==document;){b=a.css("position");if(b==="absolute"||b==="relative"||b==="fixed"){b=parseInt(a.css("zIndex"),10);if(!isNaN(b)&&b!==0)return b}a=a.parent()}}return 0},disableSelection:function(){return this.bind((c.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",
+function(a){a.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}});c.each(["Width","Height"],function(a,b){function d(f,g,m,n){c.each(e,function(){g-=parseFloat(c.curCSS(f,"padding"+this,true))||0;if(m)g-=parseFloat(c.curCSS(f,"border"+this+"Width",true))||0;if(n)g-=parseFloat(c.curCSS(f,"margin"+this,true))||0});return g}var e=b==="Width"?["Left","Right"]:["Top","Bottom"],h=b.toLowerCase(),i={innerWidth:c.fn.innerWidth,innerHeight:c.fn.innerHeight,outerWidth:c.fn.outerWidth,
+outerHeight:c.fn.outerHeight};c.fn["inner"+b]=function(f){if(f===j)return i["inner"+b].call(this);return this.each(function(){c(this).css(h,d(this,f)+"px")})};c.fn["outer"+b]=function(f,g){if(typeof f!=="number")return i["outer"+b].call(this,f);return this.each(function(){c(this).css(h,d(this,f,true,g)+"px")})}});c.extend(c.expr[":"],{data:function(a,b,d){return!!c.data(a,d[3])},focusable:function(a){return k(a,!isNaN(c.attr(a,"tabindex")))},tabbable:function(a){var b=c.attr(a,"tabindex"),d=isNaN(b);
+return(d||b>=0)&&k(a,!d)}});c(function(){var a=document.body,b=a.appendChild(b=document.createElement("div"));c.extend(b.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0});c.support.minHeight=b.offsetHeight===100;c.support.selectstart="onselectstart"in b;a.removeChild(b).style.display="none"});c.extend(c.ui,{plugin:{add:function(a,b,d){a=c.ui[a].prototype;for(var e in d){a.plugins[e]=a.plugins[e]||[];a.plugins[e].push([b,d[e]])}},call:function(a,b,d){if((b=a.plugins[b])&&a.element[0].parentNode)for(var e=
+0;e<b.length;e++)a.options[b[e][0]]&&b[e][1].apply(a.element,d)}},contains:function(a,b){return document.compareDocumentPosition?a.compareDocumentPosition(b)&16:a!==b&&a.contains(b)},hasScroll:function(a,b){if(c(a).css("overflow")==="hidden")return false;b=b&&b==="left"?"scrollLeft":"scrollTop";var d=false;if(a[b]>0)return true;a[b]=1;d=a[b]>0;a[b]=0;return d},isOverAxis:function(a,b,d){return a>b&&a<b+d},isOver:function(a,b,d,e,h,i){return c.ui.isOverAxis(a,d,h)&&c.ui.isOverAxis(b,e,i)}})}})(jQuery);
+;/*!
+ * jQuery UI Widget 1.8.14
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Widget
+ */
+(function(b,j){if(b.cleanData){var k=b.cleanData;b.cleanData=function(a){for(var c=0,d;(d=a[c])!=null;c++)b(d).triggerHandler("remove");k(a)}}else{var l=b.fn.remove;b.fn.remove=function(a,c){return this.each(function(){if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add([this]).each(function(){b(this).triggerHandler("remove")});return l.call(b(this),a,c)})}}b.widget=function(a,c,d){var e=a.split(".")[0],f;a=a.split(".")[1];f=e+"-"+a;if(!d){d=c;c=b.Widget}b.expr[":"][f]=function(h){return!!b.data(h,
+a)};b[e]=b[e]||{};b[e][a]=function(h,g){arguments.length&&this._createWidget(h,g)};c=new c;c.options=b.extend(true,{},c.options);b[e][a].prototype=b.extend(true,c,{namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f},d);b.widget.bridge(a,b[e][a])};b.widget.bridge=function(a,c){b.fn[a]=function(d){var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):d;if(e&&d.charAt(0)==="_")return h;
+e?this.each(function(){var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;if(i!==g&&i!==j){h=i;return false}}):this.each(function(){var g=b.data(this,a);g?g.option(d||{})._init():b.data(this,a,new c(d,this))});return h}};b.Widget=function(a,c){arguments.length&&this._createWidget(a,c)};b.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(a,c){b.data(c,this.widgetName,this);this.element=b(c);this.options=b.extend(true,{},this.options,
+this._getCreateOptions(),a);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return b.metadata&&b.metadata.get(this.element[0])[this.widgetName]},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+"-disabled ui-state-disabled")},
+widget:function(){return this.element},option:function(a,c){var d=a;if(arguments.length===0)return b.extend({},this.options);if(typeof a==="string"){if(c===j)return this.options[a];d={};d[a]=c}this._setOptions(d);return this},_setOptions:function(a){var c=this;b.each(a,function(d,e){c._setOption(d,e)});return this},_setOption:function(a,c){this.options[a]=c;if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",c);return this},
+enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(a,c,d){var e=this.options[a];c=b.Event(c);c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();d=d||{};if(c.originalEvent){a=b.event.props.length;for(var f;a;){f=b.event.props[--a];c[f]=c.originalEvent[f]}}this.element.trigger(c,d);return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}}})(jQuery);
+;/*!
+ * jQuery UI Mouse 1.8.14
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Mouse
+ *
+ * Depends:
+ * jquery.ui.widget.js
+ */
+(function(b){var d=false;b(document).mousedown(function(){d=false});b.widget("ui.mouse",{options:{cancel:":input,option",distance:1,delay:0},_mouseInit:function(){var a=this;this.element.bind("mousedown."+this.widgetName,function(c){return a._mouseDown(c)}).bind("click."+this.widgetName,function(c){if(true===b.data(c.target,a.widgetName+".preventClickEvent")){b.removeData(c.target,a.widgetName+".preventClickEvent");c.stopImmediatePropagation();return false}});this.started=false},_mouseDestroy:function(){this.element.unbind("."+
+this.widgetName)},_mouseDown:function(a){if(!d){this._mouseStarted&&this._mouseUp(a);this._mouseDownEvent=a;var c=this,f=a.which==1,g=typeof this.options.cancel=="string"?b(a.target).closest(this.options.cancel).length:false;if(!f||g||!this._mouseCapture(a))return true;this.mouseDelayMet=!this.options.delay;if(!this.mouseDelayMet)this._mouseDelayTimer=setTimeout(function(){c.mouseDelayMet=true},this.options.delay);if(this._mouseDistanceMet(a)&&this._mouseDelayMet(a)){this._mouseStarted=this._mouseStart(a)!==
+false;if(!this._mouseStarted){a.preventDefault();return true}}true===b.data(a.target,this.widgetName+".preventClickEvent")&&b.removeData(a.target,this.widgetName+".preventClickEvent");this._mouseMoveDelegate=function(e){return c._mouseMove(e)};this._mouseUpDelegate=function(e){return c._mouseUp(e)};b(document).bind("mousemove."+this.widgetName,this._mouseMoveDelegate).bind("mouseup."+this.widgetName,this._mouseUpDelegate);a.preventDefault();return d=true}},_mouseMove:function(a){if(b.browser.msie&&
+!(document.documentMode>=9)&&!a.button)return this._mouseUp(a);if(this._mouseStarted){this._mouseDrag(a);return a.preventDefault()}if(this._mouseDistanceMet(a)&&this._mouseDelayMet(a))(this._mouseStarted=this._mouseStart(this._mouseDownEvent,a)!==false)?this._mouseDrag(a):this._mouseUp(a);return!this._mouseStarted},_mouseUp:function(a){b(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate);if(this._mouseStarted){this._mouseStarted=
+false;a.target==this._mouseDownEvent.target&&b.data(a.target,this.widgetName+".preventClickEvent",true);this._mouseStop(a)}return false},_mouseDistanceMet:function(a){return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance},_mouseDelayMet:function(){return this.mouseDelayMet},_mouseStart:function(){},_mouseDrag:function(){},_mouseStop:function(){},_mouseCapture:function(){return true}})})(jQuery);
+;/*
+ * jQuery UI Slider 1.8.14
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Slider
+ *
+ * Depends:
+ * jquery.ui.core.js
+ * jquery.ui.mouse.js
+ * jquery.ui.widget.js
+ */
+(function(d){d.widget("ui.slider",d.ui.mouse,{widgetEventPrefix:"slide",options:{animate:false,distance:0,max:100,min:0,orientation:"horizontal",range:false,step:1,value:0,values:null},_create:function(){var b=this,a=this.options,c=this.element.find(".ui-slider-handle").addClass("ui-state-default ui-corner-all"),f=a.values&&a.values.length||1,e=[];this._mouseSliding=this._keySliding=false;this._animateOff=true;this._handleIndex=null;this._detectOrientation();this._mouseInit();this.element.addClass("ui-slider ui-slider-"+
+this.orientation+" ui-widget ui-widget-content ui-corner-all"+(a.disabled?" ui-slider-disabled ui-disabled":""));this.range=d([]);if(a.range){if(a.range===true){if(!a.values)a.values=[this._valueMin(),this._valueMin()];if(a.values.length&&a.values.length!==2)a.values=[a.values[0],a.values[0]]}this.range=d("<div></div>").appendTo(this.element).addClass("ui-slider-range ui-widget-header"+(a.range==="min"||a.range==="max"?" ui-slider-range-"+a.range:""))}for(var j=c.length;j<f;j+=1)e.push("<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>");
+this.handles=c.add(d(e.join("")).appendTo(b.element));this.handle=this.handles.eq(0);this.handles.add(this.range).filter("a").click(function(g){g.preventDefault()}).hover(function(){a.disabled||d(this).addClass("ui-state-hover")},function(){d(this).removeClass("ui-state-hover")}).focus(function(){if(a.disabled)d(this).blur();else{d(".ui-slider .ui-state-focus").removeClass("ui-state-focus");d(this).addClass("ui-state-focus")}}).blur(function(){d(this).removeClass("ui-state-focus")});this.handles.each(function(g){d(this).data("index.ui-slider-handle",
+g)});this.handles.keydown(function(g){var k=true,l=d(this).data("index.ui-slider-handle"),i,h,m;if(!b.options.disabled){switch(g.keyCode){case d.ui.keyCode.HOME:case d.ui.keyCode.END:case d.ui.keyCode.PAGE_UP:case d.ui.keyCode.PAGE_DOWN:case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:k=false;if(!b._keySliding){b._keySliding=true;d(this).addClass("ui-state-active");i=b._start(g,l);if(i===false)return}break}m=b.options.step;i=b.options.values&&b.options.values.length?
+(h=b.values(l)):(h=b.value());switch(g.keyCode){case d.ui.keyCode.HOME:h=b._valueMin();break;case d.ui.keyCode.END:h=b._valueMax();break;case d.ui.keyCode.PAGE_UP:h=b._trimAlignValue(i+(b._valueMax()-b._valueMin())/5);break;case d.ui.keyCode.PAGE_DOWN:h=b._trimAlignValue(i-(b._valueMax()-b._valueMin())/5);break;case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:if(i===b._valueMax())return;h=b._trimAlignValue(i+m);break;case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:if(i===b._valueMin())return;h=b._trimAlignValue(i-
+m);break}b._slide(g,l,h);return k}}).keyup(function(g){var k=d(this).data("index.ui-slider-handle");if(b._keySliding){b._keySliding=false;b._stop(g,k);b._change(g,k);d(this).removeClass("ui-state-active")}});this._refreshValue();this._animateOff=false},destroy:function(){this.handles.remove();this.range.remove();this.element.removeClass("ui-slider ui-slider-horizontal ui-slider-vertical ui-slider-disabled ui-widget ui-widget-content ui-corner-all").removeData("slider").unbind(".slider");this._mouseDestroy();
+return this},_mouseCapture:function(b){var a=this.options,c,f,e,j,g;if(a.disabled)return false;this.elementSize={width:this.element.outerWidth(),height:this.element.outerHeight()};this.elementOffset=this.element.offset();c=this._normValueFromMouse({x:b.pageX,y:b.pageY});f=this._valueMax()-this._valueMin()+1;j=this;this.handles.each(function(k){var l=Math.abs(c-j.values(k));if(f>l){f=l;e=d(this);g=k}});if(a.range===true&&this.values(1)===a.min){g+=1;e=d(this.handles[g])}if(this._start(b,g)===false)return false;
+this._mouseSliding=true;j._handleIndex=g;e.addClass("ui-state-active").focus();a=e.offset();this._clickOffset=!d(b.target).parents().andSelf().is(".ui-slider-handle")?{left:0,top:0}:{left:b.pageX-a.left-e.width()/2,top:b.pageY-a.top-e.height()/2-(parseInt(e.css("borderTopWidth"),10)||0)-(parseInt(e.css("borderBottomWidth"),10)||0)+(parseInt(e.css("marginTop"),10)||0)};this.handles.hasClass("ui-state-hover")||this._slide(b,g,c);return this._animateOff=true},_mouseStart:function(){return true},_mouseDrag:function(b){var a=
+this._normValueFromMouse({x:b.pageX,y:b.pageY});this._slide(b,this._handleIndex,a);return false},_mouseStop:function(b){this.handles.removeClass("ui-state-active");this._mouseSliding=false;this._stop(b,this._handleIndex);this._change(b,this._handleIndex);this._clickOffset=this._handleIndex=null;return this._animateOff=false},_detectOrientation:function(){this.orientation=this.options.orientation==="vertical"?"vertical":"horizontal"},_normValueFromMouse:function(b){var a;if(this.orientation==="horizontal"){a=
+this.elementSize.width;b=b.x-this.elementOffset.left-(this._clickOffset?this._clickOffset.left:0)}else{a=this.elementSize.height;b=b.y-this.elementOffset.top-(this._clickOffset?this._clickOffset.top:0)}a=b/a;if(a>1)a=1;if(a<0)a=0;if(this.orientation==="vertical")a=1-a;b=this._valueMax()-this._valueMin();return this._trimAlignValue(this._valueMin()+a*b)},_start:function(b,a){var c={handle:this.handles[a],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(a);
+c.values=this.values()}return this._trigger("start",b,c)},_slide:function(b,a,c){var f;if(this.options.values&&this.options.values.length){f=this.values(a?0:1);if(this.options.values.length===2&&this.options.range===true&&(a===0&&c>f||a===1&&c<f))c=f;if(c!==this.values(a)){f=this.values();f[a]=c;b=this._trigger("slide",b,{handle:this.handles[a],value:c,values:f});this.values(a?0:1);b!==false&&this.values(a,c,true)}}else if(c!==this.value()){b=this._trigger("slide",b,{handle:this.handles[a],value:c});
+b!==false&&this.value(c)}},_stop:function(b,a){var c={handle:this.handles[a],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(a);c.values=this.values()}this._trigger("stop",b,c)},_change:function(b,a){if(!this._keySliding&&!this._mouseSliding){var c={handle:this.handles[a],value:this.value()};if(this.options.values&&this.options.values.length){c.value=this.values(a);c.values=this.values()}this._trigger("change",b,c)}},value:function(b){if(arguments.length){this.options.value=
+this._trimAlignValue(b);this._refreshValue();this._change(null,0)}else return this._value()},values:function(b,a){var c,f,e;if(arguments.length>1){this.options.values[b]=this._trimAlignValue(a);this._refreshValue();this._change(null,b)}else if(arguments.length)if(d.isArray(arguments[0])){c=this.options.values;f=arguments[0];for(e=0;e<c.length;e+=1){c[e]=this._trimAlignValue(f[e]);this._change(null,e)}this._refreshValue()}else return this.options.values&&this.options.values.length?this._values(b):
+this.value();else return this._values()},_setOption:function(b,a){var c,f=0;if(d.isArray(this.options.values))f=this.options.values.length;d.Widget.prototype._setOption.apply(this,arguments);switch(b){case "disabled":if(a){this.handles.filter(".ui-state-focus").blur();this.handles.removeClass("ui-state-hover");this.handles.attr("disabled","disabled");this.element.addClass("ui-disabled")}else{this.handles.removeAttr("disabled");this.element.removeClass("ui-disabled")}break;case "orientation":this._detectOrientation();
+this.element.removeClass("ui-slider-horizontal ui-slider-vertical").addClass("ui-slider-"+this.orientation);this._refreshValue();break;case "value":this._animateOff=true;this._refreshValue();this._change(null,0);this._animateOff=false;break;case "values":this._animateOff=true;this._refreshValue();for(c=0;c<f;c+=1)this._change(null,c);this._animateOff=false;break}},_value:function(){var b=this.options.value;return b=this._trimAlignValue(b)},_values:function(b){var a,c;if(arguments.length){a=this.options.values[b];
+return a=this._trimAlignValue(a)}else{a=this.options.values.slice();for(c=0;c<a.length;c+=1)a[c]=this._trimAlignValue(a[c]);return a}},_trimAlignValue:function(b){if(b<=this._valueMin())return this._valueMin();if(b>=this._valueMax())return this._valueMax();var a=this.options.step>0?this.options.step:1,c=(b-this._valueMin())%a;alignValue=b-c;if(Math.abs(c)*2>=a)alignValue+=c>0?a:-a;return parseFloat(alignValue.toFixed(5))},_valueMin:function(){return this.options.min},_valueMax:function(){return this.options.max},
+_refreshValue:function(){var b=this.options.range,a=this.options,c=this,f=!this._animateOff?a.animate:false,e,j={},g,k,l,i;if(this.options.values&&this.options.values.length)this.handles.each(function(h){e=(c.values(h)-c._valueMin())/(c._valueMax()-c._valueMin())*100;j[c.orientation==="horizontal"?"left":"bottom"]=e+"%";d(this).stop(1,1)[f?"animate":"css"](j,a.animate);if(c.options.range===true)if(c.orientation==="horizontal"){if(h===0)c.range.stop(1,1)[f?"animate":"css"]({left:e+"%"},a.animate);
+if(h===1)c.range[f?"animate":"css"]({width:e-g+"%"},{queue:false,duration:a.animate})}else{if(h===0)c.range.stop(1,1)[f?"animate":"css"]({bottom:e+"%"},a.animate);if(h===1)c.range[f?"animate":"css"]({height:e-g+"%"},{queue:false,duration:a.animate})}g=e});else{k=this.value();l=this._valueMin();i=this._valueMax();e=i!==l?(k-l)/(i-l)*100:0;j[c.orientation==="horizontal"?"left":"bottom"]=e+"%";this.handle.stop(1,1)[f?"animate":"css"](j,a.animate);if(b==="min"&&this.orientation==="horizontal")this.range.stop(1,
+1)[f?"animate":"css"]({width:e+"%"},a.animate);if(b==="max"&&this.orientation==="horizontal")this.range[f?"animate":"css"]({width:100-e+"%"},{queue:false,duration:a.animate});if(b==="min"&&this.orientation==="vertical")this.range.stop(1,1)[f?"animate":"css"]({height:e+"%"},a.animate);if(b==="max"&&this.orientation==="vertical")this.range[f?"animate":"css"]({height:100-e+"%"},{queue:false,duration:a.animate})}}});d.extend(d.ui.slider,{version:"1.8.14"})})(jQuery);
+;
233 js/jquery.bulletGraph.js
@@ -0,0 +1,233 @@
+jQuery.fn.bulletGraph = function(settings) {
+ // get select element
+ var select = jQuery(this);
+ // get name of metric
+ var name = jQuery(this).attr('name');
+ // get current value
+ var value = select.val();
+ // little grey color maker
+ var colors = '0123456789abcdef';
+ // little color maker
+ var colorMaker = function(string) {
+ var buff = string;
+ for (var i = 1; i < 6; i++) {
+ buff += string;
+ }
+ return '#' + buff;
+ }
+ // default options
+ var options = jQuery.extend({
+ // width of bulletgraph
+ width: 300,
+ // heigth of bulletgraph
+ height: 25,
+ // height/width of ticks
+ tickHeight: 7,
+ // array with range borders in %
+ ranges: ['0%', '50%', '75%', '100%'],
+ // array of labels for ranges (size=rangesLabels-1)
+ rangesLabels: ['range 1', 'range 2', 'range 3'],
+ // number of values in select element
+ ticks: select.children($('option')),
+ // show only every n-th tick
+ nTick: 1,
+ // steps for jquery ui slider
+ steps: select.children($('option')),
+ // show rangeLabels
+ showLabels: true,
+ // show ticks
+ showTicks: true,
+ // options for jquery ui slider
+ sliderOptions: null
+ },
+ settings);
+
+ // return bulletgraph, insert after select element
+ // get orientation
+ var horizontal = (options.width >= options.height);
+
+ // get box and container
+ var container = jQuery('<div></div>');
+ container.addClass('containerbox');
+
+ var box = jQuery('<div></div>');
+ // delete old bulletGraphs if any
+ $('#' + select.attr('id') + '_bulletGraphBox').remove();
+
+ // set the container box
+ box.attr('id', select.attr('id') + '_bulletGraphBox');
+ box.addClass('bulletbox');
+ box.width(options.width);
+ box.height(options.height);
+
+ // info field
+ var info = jQuery('<div></div>');
+ info.addClass('info');
+ info.insertAfter(select.parent());
+ info.height(options.height);
+ info.css('line-height', options.height / 16);
+
+
+ // if labels should be output
+ if (options.showLabels) {
+ // create range ticks
+ jQuery.each(options.ranges,
+ function(i, v) {
+ // hack for 0
+ if (v == '0%') {
+ v = '-1px';
+ }
+ var curMark = jQuery('<div></div>');
+ curMark.addClass('mark_range');
+ curMark.addClass('mark_range_' + i);
+ curMark.css('left', v);
+ curMark.css('height', options.tickHeight);
+ curMark.css('width', '1px');
+ curMark.css('top', -options.tickHeight);
+ box.append(curMark);
+ });
+
+ // create range labels
+ var rangesLabels = options.rangesLabels.slice(0, options.ranges.length - 1);
+ jQuery.each(rangesLabels,
+ function(i, v) {
+ var curCaption = jQuery('<div></div>');
+ curCaption.addClass('caption_range');
+ curCaption.addClass('caption_range_' + i);
+ curCaption.css('left', options.ranges[i]);
+ curCaption.css('width', (parseInt(options.ranges[i + 1].slice(0, -1)) - options.ranges[i].slice(0, -1)) + '%');
+ curCaption.css('top', -options.tickHeight * 2);
+ curCaption.text(v);
+ box.append(curCaption);
+ });
+ }
+
+ // add range elements within bulletgraph
+ var ranges = options.ranges.slice(0, options.ranges.length - 1);
+ jQuery.each(ranges,
+ function(i, v) {
+ var curRange = jQuery('<div></div>');
+ curRange.addClass('range');
+ curRange.addClass('range_' + i);
+ var l = parseInt(v);
+ if (l < 0) {
+ l = 0;
+ }
+ curRange.css('left', l + '%');
+ curRange.css('height', options.height);
+ curRange.css('width', (parseInt(options.ranges[i + 1]) - l) + '%');
+ // don't create right border on last range
+ if (i < options.ranges.length - 1) {
+ curRange.css('border-right', '1px solid #cccccc');
+ }
+ // make ranges lighter if range progresses
+ var color1 = colorMaker(colors[i + 10]);
+ var color2 = colorMaker(colors[i + 10 + 2]);
+ // beautify
+ curRange.css('background', color1);
+ curRange.css('background', '-webkit-gradient(linear, left top, left bottom, from(' + color1 + '), to(' + color2 + '))');
+ curRange.css('background', '-moz-linear-gradient(top, ' + color1 + ', ' + color2 + ')');
+ curRange.css('background', '-o-linear-gradient(top, ' + color1 + ', ' + color2 + ')');
+ curRange.css('filter', "progid:DXImageTransform.Microsoft.gradient(startColorstr='" + color1 + "', endColorstr='" + color2 + "')");
+ box.append(curRange);
+ });
+
+ // create comparative target value handlers
+ var target = select.data('target');
+ var treshold = select.data('treshold');
+ if (target != undefined) {
+ var curTarget = jQuery('<div></div>');
+ curTarget.addClass('target');
+ curTarget.css('top', -options.tickHeight);
+ curTarget.css('height', options.height + options.tickHeight * 2);
+ curTarget.css('left', target + '%');
+ // decide wether to show the bulletgraph or not based on treshold
+ if (treshold != undefined) {
+ if (target < treshold) {
+ curTarget.css('display', 'none');
+ } else {
+ curTarget.css('display', 'block');
+ }
+ }
+ box.append(curTarget);
+ }
+
+ // create element holding slider
+ var actual = jQuery('<div></div>');
+ actual.addClass('actual');
+ actual.css('width', options.width - 1);
+ actual.css('top', options.height / 4);
+ actual.css('height', options.height / 2);
+ box.append(actual);
+
+ // if labels should be output
+ if (options.showTicks) {
+ // create bottom captions for ticks
+ jQuery.each(options.ticks,
+ function(i, v) {
+ if (i % options.nTick == 0) {
+ var curCaption = jQuery('<div></div>');
+ curCaption.addClass('caption_bottom');
+ curCaption.addClass('caption_bottom_' + i);
+ curCaption.text(v.text);
+ curCaption.css('width', '15px');
+ curCaption.css('top', options.height + 7);
+ curCaption.css('left', (options.width / (options.ticks.length - 1)) * i - 8);
+ box.append(curCaption);
+ }
+ });
+
+ // create button tick markers
+ jQuery.each(options.ticks,
+ function(i, v) {
+ if (i % options.nTick == 0) {
+ var curMark = jQuery('<div></div>');
+ curMark.addClass('mark_bottom');
+ curMark.addClass('mark_bottom_' + i);
+ curMark.css('top', options.height);
+ curMark.css('height', options.tickHeight);
+ curMark.css('left', (options.width / (options.ticks.length - 1)) * i);
+ if (i == 0) {
+ curMark.css('left', '-1px');
+ }
+ box.append(curMark);
+ }
+ });
+ }
+ // create jquery ui slider
+ actual.slider(jQuery.extend(
+ options.sliderOptions, {
+ range: 'min',
+ step: 100 / (options.steps.length - 1),
+ animate: true
+ }));
+ // set height of slider range of this bulletgraph
+ actual.children('.ui-slider-range').height(options.height / 2);
+ // set height of slider handle of this bulletgraph
+ var x = 2
+ if ((!options.showLabels) || (!options.showTicks))
+ x = 1;
+ actual.children('.ui-slider-handle').height(options.height + options.tickHeight * 2);
+
+ actual.slider("option", "value", select.val());
+ // bind select value to slider value and vice versa
+ select.bind('change keyup click',
+ function() {
+ info.html(select.val() * (100 / (options.steps.length - 1)));
+ actual.slider("option", "value", select.val() * (100 / (options.steps.length - 1)));
+ });
+ actual.bind("slidechange",
+ function(event, ui) {
+ select.val(ui.value / (100 / (options.steps.length - 1)));
+ info.html(ui.value / (100 / (options.steps.length - 1)));
+
+ });
+
+ // add box & info to container
+ container.append(box);
+ container.append(info);
+
+ // insert container after select and hide select
+ container.insertAfter(select);
+
+}
36 readme.md
@@ -0,0 +1,36 @@
+# jQuery Bullet Graph #
+
+A [jQuery](http://jquery.com/) plugin, turning a html select element into a bullet graph slider. [Bullet graphs](http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf), developed by [Stephen Few](http://www.perceptualedge.com/), 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](http://www.usrecordings.com/test-lab/bullet-graph.htm) and makes the primary measure adjustable by incorporating a [jQuery UI slider](http://jqueryui.com/demos/slider/) 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 % - _['0%', '50%', '75%', '100%']_
+* **rangeLabels** - array of (qualitative) labels for ranges (size=rangesLabels-1) - _['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](http://jqueryui.com/demos/slider/)
+
+## Implementations ##
+[Google Charts API](http://dealerdiagnostics.com/blog/2008/05/create-bullet-graphs-with-google-charts-in-7-easy-steps/), [Google Spreadsheets](http://dealerdiagnostics.com/blog/2008/09/the-ddr-bullet-graph-gadget/), [Excel](http://www.exceluser.com/explore/bullet.htm), [WPF,WinForms](http://www.codeproject.com/KB/WPF/WpfWinFormsBulletGraphs.aspx), [CSS/HTML](http://www.usrecordings.com/test-lab/bullet-graph.htm), [jQuery Sparklines](http://omnipotent.net/jquery.sparkline/), [Protovis](http://mbostock.github.com/protovis/ex/bullet.html),...
+
Please sign in to comment.
Something went wrong with that request. Please try again.