From 2e3c8c904e5653da14418c55e0c655a3dc99ccfc Mon Sep 17 00:00:00 2001 From: iceeagle Date: Thu, 12 Jun 2014 16:21:44 +0300 Subject: [PATCH 1/3] use tab indent (fix mixed space and tab indent) --- index.html | 658 +++++++++++++++++++++++++++-------------------------- 1 file changed, 330 insertions(+), 328 deletions(-) diff --git a/index.html b/index.html index 10497c0..27d7867 100644 --- a/index.html +++ b/index.html @@ -1,92 +1,92 @@ - - gauge.js - - - - - - - - - - - - - - - - - - - - - -
- - - -
-

Example

- -

Variant selection

-
    -
    • -
    • -
-
- -
-
-
-

Options:

-
-

-
-
-
-
-
-
-
-
-
-
- -
- - -
- -

Features

- - -

Usage

-
+	
+		gauge.js
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+		
+	
+	
+
+		
+
+		
+
+		

+
+			
+
+			

+				
Example

+
+				
Variant selection

+				
    
+					
    • 
+					
    • 
+				

+				

+					
+					

+				

+				

+					
Options:

+					

+					


+					

+					

+					

+					

+					

+					

+					

+					

+					

+				

+
+				

+				
+				
+			

+
+			
Features

+			
    
+				
  • No images, no external CSS - pure canvas
    • 
+				
  • No dependencies (jQuery is supported, but not required)
    • 
+				
  • Highly configurable
    • 
+				
  • Resolution independent
    • 
+				
  • Animated guage value changes (!)
    • 
+				
  • Works in all major browsers
    • 
+				
  • MIT License
    • 
+			

+
+			
Usage

+			
 var opts = {
   lines: 12, // The number of lines to draw
   angle: 7, // The length of each line
@@ -107,28 +107,28 @@ 
Usage

 gauge.maxValue = 3000; // set max gauge value
 gauge.animationSpeed = 3000; // set animation speed (32 is default value)
 gauge.set(1500); // set actual value
-

-

-  The Gauge class handles drawing on canvas and starts the animation. 
-

-
-
Advanced options

-
    
-  
  • 
-    Percentage color
-    
    If you want to control how Gauge behavaes in relation to the displayed value you can use the Guage option called percentColors. To use it add following entry to the options:
-
    +			
    
+			
    
+				The Gauge class handles drawing on canvas and starts the animation.
+			
    
+
+			
    Advanced options
    
+			
      
+				
    • 
+					Percentage color
+					
      If you want to control how Gauge behavaes in relation to the displayed value you can use the Guage option called percentColors. To use it add following entry to the options:
+					
       percentColors = [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]];
-
      
-    see working example at JSFiddle
      
-  
      • 
-
    
-
-
    jQuery plugin
    
-
    
-  Gauge.js does not require jQuery. Anyway, if you use jQuery you may use the following plugin:
-
    
-
    +					
    
+					
    see working example at JSFiddle
    
+				
    • 
+			

+
+			
jQuery plugin

+			

+				Gauge.js does not require jQuery. Anyway, if you use jQuery you may use the following plugin:
+			

+			
 $.fn.gauge = function(opts) {
   this.each(function() {
     var $this = $(this),
@@ -144,227 +144,229 @@ 
jQuery plugin

   });
   return this;
 };
-

-
Supported browsers

-
-

-  Gauge.js has been (not yet!) successfully tested in the following browsers:
-  
    
-    
  • Chrome
    • 
-    
  • Safari 3.2+
    • 
-    
  • Firefox 3.5+
    • 
-    
  • IE 9
    • 
-    
  • Opera 10.6+
    • 
-    
  • Mobile Safari (iOS 3.2+)
    • 
-    
  • Android 2.3+
    • 
-  

-

-
-
Changes

-
-
Version 1.2.1 (9.03.2014)

-
    
-  
  • Proper handling of color params issue #47.
    • 
-  
  • Moved percentage color to example/docs + JSFiddle
    • 
-

-
-
Version 1.2 (16.08.2012)

-
    
-  
  • Prototype chain fix. See issue #7.
    • 
-  
  • Refactored code a bit to make it more flexible. Default class that has some extra features like gradient shadows is called Donut while more flexible one (for devs) is called BaseDonut - use it if you would don't need extra automatic stuff.
    • 
-  
  • Ability to scale gauges (requested via email) - example at JSFiddle
    • 
-

-
-
Version 1.1 (15.08.2012)

-
    
-  
  • Fixed color picker bug in FF & Opera
    • 
-  
  • Added a shadow option. See issue #5.
    • 
-  
  • Added multiple pointer option (requested via email). This needed some code refactoring. No demo for it yet. Use array of values to check it ex. gauge.set([44, 554]);
    • 
-  
  • Added wrapper for formatting text output issue #4.
    • 
-

-
-
Version 1.0 (27.6.2012)

-
    
-  
  • Initial release
    • 
-

-
-
Contact

-

-  
-  If you encounter any problems, please use the GitHub issue tracker.

-  If you like gauge.js and use it in the wild, let me know.

-  If you want to contact me, drop me a message via email

-

-

-
-
-
-
-
-
+		
+		
+		
+		
-
+		
+	
 
\ No newline at end of file

From d87da55c3f4d2d1ae19709708fa9b87e4162a8a2 Mon Sep 17 00:00:00 2001
From: iceeagle 
Date: Fri, 13 Jun 2014 08:50:21 +0300
Subject: [PATCH 2/3] add new type of gauge 'double'

---
 assets/main.css   |  12 +--
 dist/gauge.coffee | 114 ++++++++++++++++++++++++--
 dist/gauge.js     | 205 +++++++++++++++++++++++++++++++++++++++-------
 dist/gauge.min.js |  62 +-------------
 index.html        |  97 +++++++++++++++-------
 5 files changed, 358 insertions(+), 132 deletions(-)

diff --git a/assets/main.css b/assets/main.css
index 8b4518c..dc68589 100755
--- a/assets/main.css
+++ b/assets/main.css
@@ -135,8 +135,8 @@ h3 {
   background: #f9f9f9; position: relative;
   color: #fff;
   float: left;
-  width: 220px;
-  height: 220px;
+  width: 280px;
+  height: 280px;
   margin: 0 20px 20px 0;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
@@ -144,16 +144,16 @@ h3 {
   clear: both;
 }
 #canvas-preview{
-  width: 220px; top: 70px;
+  width: 280px; top: 100px;
   position: relative;
 }
 #preview-textfield{
-  position: absolute; top: 35px; left: 0; right: 0;
+  position: absolute; top: 65px; left: 0; right: 0;
   text-align: center; font-size: 2em; font-weight: bold;
   color: black; font-family: 'Amaranth', sans-serif;
 }
 .donut #preview-textfield{
-  top: 110px; font-size: 1.3em;
+  top: 140px; font-size: 1.3em;
 }
 .donut #opts-donut{
   display: block;
@@ -209,7 +209,7 @@ a.button:hover {
   background-color: white;
 }
 #type-select li+li{
-  margin-left: 40px;
+  margin-left: 10px;
 }
 #type-select li.active{
   cursor: default;
diff --git a/dist/gauge.coffee b/dist/gauge.coffee
index 17de6d8..0b41dfb 100644
--- a/dist/gauge.coffee
+++ b/dist/gauge.coffee
@@ -51,7 +51,7 @@ secondsToString = (sec) ->
 	hr = Math.floor(sec / 3600)
 	min = Math.floor((sec - (hr * 3600))/60)
 	sec -= ((hr * 3600) + (min * 60))
-	sec += '' 
+	sec += ''
 	min += ''
 	while min.length < 2
 		min = '0' + min
@@ -213,11 +213,11 @@ class GaugePointer extends ValueUpdater
 		@strokeWidth = @canvas.height * @options.strokeWidth
 		@maxValue = @gauge.maxValue
 		@minValue = @gauge.minValue
-		@animationSpeed =  @gauge.animationSpeed
+		@animationSpeed = @gauge.animationSpeed
 		@options.angle = @gauge.options.angle
 
 	render: () ->
-		angle = @gauge.getAngle.call(@, @displayedValue)
+		angle = @gauge.getAngle(@displayedValue)
 		centerX = @canvas.width / 2
 		centerY = @canvas.height * 0.9
 
@@ -338,7 +338,7 @@ class Gauge extends BaseGauge
 					max_hit = true
 			@gp[i].value = val
 			@gp[i++].setOptions({maxValue: @maxValue, angle: @options.angle})
-		@value = value[value.length - 1] # TODO: Span maybe?? 
+		@value = value[value.length - 1] # TODO: Span maybe??
 
 		if max_hit
 			unless @options.limitMax
@@ -370,7 +370,7 @@ class Gauge extends BaseGauge
 						color = @percentColors[i].color
 					break
 		return 'rgb(' + [color.r, color.g, color.b].join(',') + ')'
-    
+
 	getColorForValue: (val, grad) ->
 		pct = (val - @minValue) / (@maxValue - @minValue)
 		return @getColorForPercentage(pct, grad);
@@ -411,6 +411,109 @@ class Gauge extends BaseGauge
 		for gauge in @gp
 			gauge.update(true)
 
+class BaseDouble extends BaseGauge
+	lineWidth: 30
+	displayedAngle: 0
+	displayedValue: 0
+	value: 33
+	maxValue: 80
+	minValue: -80
+	paddingBottom: 0.1
+	options:
+		lineWidth: 0.40
+		colorStart: "#d73d32"
+		colorStop: "#53a93f"
+		strokeColor: "#eeeeee"
+		shadowColor: "#d5d5d5"
+		pointer:
+			length: 0.8
+			strokeWidth: 0.05
+		angle: 0
+
+	constructor: (@canvas) ->
+		super()
+		if typeof G_vmlCanvasManager != 'undefined'
+			@canvas = window.G_vmlCanvasManager.initElement(@canvas)
+		@ctx = @canvas.getContext('2d')
+		@gp = new GaugePointer(@)
+		@setOptions()
+		@render()
+
+	getAngle: (value) ->
+		if (value < 0)
+			return (1.5 - value / @minValue * (0.5 - @options.angle)) * Math.PI
+		else if (value > 0)
+			return (1.5 + value / @maxValue * (0.5 - @options.angle)) * Math.PI
+		else
+			return 1.5 * Math.PI
+
+	setOptions: (options=null) ->
+		super(options)
+		@lineWidth = @canvas.height * (1 - @paddingBottom) * @options.lineWidth
+		@radius = @canvas.height * (1 - @paddingBottom) - @lineWidth
+		@ctx.clearRect(0, 0, @canvas.width, @canvas.height)
+		@render()
+		@gp.setOptions(@options.pointer)
+		@gp.render()
+		return @
+
+	set: (value) ->
+		@value = value
+		if @value > @maxValue
+			@maxValue = @value
+		if @value < @minValue
+			@minValue = @value
+		@gp.value = value
+		@gp.setOptions()
+		AnimationUpdater.run()
+
+	render: () ->
+		w = @canvas.width / 2
+		h = @canvas.height * (1 - @paddingBottom)
+
+		if @textField
+			@textField.render(@)
+
+		@ctx.strokeStyle = @options.strokeColor
+		@ctx.beginPath()
+		@ctx.arc(w, h, @radius, (1 + @options.angle) * Math.PI, (2 - @options.angle) * Math.PI, false)
+		@ctx.lineWidth = @lineWidth
+		@ctx.lineCap = "butt"
+		@ctx.stroke()
+
+		displayedAngle = @getAngle(@displayedValue)
+		if displayedAngle < 1.5 * Math.PI
+			counterclockwise = true
+			fillStyle = @options.colorStart
+		else
+			counterclockwise = false
+			fillStyle = @options.colorStop
+
+		@ctx.strokeStyle = fillStyle
+		@ctx.beginPath()
+		@ctx.arc(w, h, @radius, 1.5 * Math.PI, displayedAngle, counterclockwise)
+		@ctx.stroke()
+
+		@gp.update(true)
+
+class Double extends BaseDouble
+	strokeGradient: (w, h, start, stop) ->
+		grd = @ctx.createRadialGradient(w, h, start, w, h, stop)
+		grd.addColorStop(0, @options.shadowColor)
+		grd.addColorStop(0.15, @options._orgStrokeColor)
+		grd.addColorStop(0.85, @options._orgStrokeColor)
+		grd.addColorStop(1, @options.shadowColor)
+		return grd
+
+	setOptions: (options=null) ->
+		super(options)
+		w = @canvas.width / 2
+		h = @canvas.height * (1 - @paddingBottom)
+		start = @radius - @lineWidth / 2
+		stop = @radius + @lineWidth / 2
+		@options._orgStrokeColor = @options.strokeColor
+		@options.strokeColor = @strokeGradient(w, h, start, stop)
+		return @
 
 class BaseDonut extends BaseGauge
 	lineWidth: 15
@@ -520,5 +623,6 @@ window.AnimationUpdater =
 
 window.Gauge = Gauge
 window.Donut = Donut
+window.Double = Double
 window.BaseDonut = BaseDonut
 window.TextRenderer = TextRenderer
diff --git a/dist/gauge.js b/dist/gauge.js
index ba87e1f..223ef37 100644
--- a/dist/gauge.js
+++ b/dist/gauge.js
@@ -1,6 +1,6 @@
-// Generated by CoffeeScript 1.6.3
+// Generated by CoffeeScript 1.7.1
 (function() {
-  var AnimatedText, AnimatedTextFactory, Bar, BaseDonut, BaseGauge, Donut, Gauge, GaugePointer, TextRenderer, ValueUpdater, addCommas, cutHex, formatNumber, mergeObjects, secondsToString, updateObjectValues, _ref, _ref1,
+  var AnimatedText, AnimatedTextFactory, Bar, BaseDonut, BaseDouble, BaseGauge, Donut, Double, Gauge, GaugePointer, TextRenderer, ValueUpdater, addCommas, cutHex, formatNumber, mergeObjects, secondsToString, updateObjectValues,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
@@ -176,8 +176,7 @@
     __extends(BaseGauge, _super);
 
     function BaseGauge() {
-      _ref = BaseGauge.__super__.constructor.apply(this, arguments);
-      return _ref;
+      return BaseGauge.__super__.constructor.apply(this, arguments);
     }
 
     BaseGauge.prototype.displayScale = 1;
@@ -187,17 +186,17 @@
     };
 
     BaseGauge.prototype.setMinValue = function(minValue, updateStartValue) {
-      var gauge, _i, _len, _ref1, _results;
+      var gauge, _i, _len, _ref, _results;
       this.minValue = minValue;
       if (updateStartValue == null) {
         updateStartValue = true;
       }
       if (updateStartValue) {
         this.displayedValue = this.minValue;
-        _ref1 = this.gp || [];
+        _ref = this.gp || [];
         _results = [];
-        for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-          gauge = _ref1[_i];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          gauge = _ref[_i];
           _results.push(gauge.displayedValue = this.minValue);
         }
         return _results;
@@ -341,7 +340,7 @@
 
     GaugePointer.prototype.render = function() {
       var angle, centerX, centerY, endX, endY, startX, startY, x, y;
-      angle = this.gauge.getAngle.call(this, this.displayedValue);
+      angle = this.gauge.getAngle(this.displayedValue);
       centerX = this.canvas.width / 2;
       centerY = this.canvas.height * 0.9;
       x = Math.round(centerX + this.length * Math.cos(angle));
@@ -449,7 +448,7 @@
     }
 
     Gauge.prototype.setOptions = function(options) {
-      var gauge, _i, _len, _ref1;
+      var gauge, _i, _len, _ref;
       if (options == null) {
         options = null;
       }
@@ -459,9 +458,9 @@
       this.radius = this.canvas.height * (1 - this.paddingBottom) - this.lineWidth;
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
       this.render();
-      _ref1 = this.gp;
-      for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-        gauge = _ref1[_i];
+      _ref = this.gp;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        gauge = _ref[_i];
         gauge.setOptions(this.options.pointer);
         gauge.render();
       }
@@ -469,12 +468,12 @@
     };
 
     Gauge.prototype.configPercentColors = function() {
-      var bval, gval, i, rval, _i, _ref1, _results;
+      var bval, gval, i, rval, _i, _ref, _results;
       this.percentColors = null;
       if (this.options.percentColors !== void 0) {
         this.percentColors = new Array();
         _results = [];
-        for (i = _i = 0, _ref1 = this.options.percentColors.length - 1; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
+        for (i = _i = 0, _ref = this.options.percentColors.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
           rval = parseInt((cutHex(this.options.percentColors[i][1])).substring(0, 2), 16);
           gval = parseInt((cutHex(this.options.percentColors[i][1])).substring(2, 4), 16);
           bval = parseInt((cutHex(this.options.percentColors[i][1])).substring(4, 6), 16);
@@ -492,12 +491,12 @@
     };
 
     Gauge.prototype.set = function(value) {
-      var i, max_hit, val, _i, _j, _len, _ref1;
+      var i, max_hit, val, _i, _j, _len, _ref;
       if (!(value instanceof Array)) {
         value = [value];
       }
       if (value.length > this.gp.length) {
-        for (i = _i = 0, _ref1 = value.length - this.gp.length; 0 <= _ref1 ? _i < _ref1 : _i > _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
+        for (i = _i = 0, _ref = value.length - this.gp.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
           this.gp.push(new GaugePointer(this));
         }
       }
@@ -530,12 +529,12 @@
     };
 
     Gauge.prototype.getColorForPercentage = function(pct, grad) {
-      var color, endColor, i, rangePct, startColor, _i, _ref1;
+      var color, endColor, i, rangePct, startColor, _i, _ref;
       if (pct === 0) {
         color = this.percentColors[0].color;
       } else {
         color = this.percentColors[this.percentColors.length - 1].color;
-        for (i = _i = 0, _ref1 = this.percentColors.length - 1; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
+        for (i = _i = 0, _ref = this.percentColors.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
           if (pct <= this.percentColors[i].pct) {
             if (grad === true) {
               startColor = this.percentColors[i - 1];
@@ -563,7 +562,7 @@
     };
 
     Gauge.prototype.render = function() {
-      var displayedAngle, fillStyle, gauge, h, w, _i, _len, _ref1, _results;
+      var displayedAngle, fillStyle, gauge, h, w, _i, _len, _ref, _results;
       w = this.canvas.width / 2;
       h = this.canvas.height * (1 - this.paddingBottom);
       displayedAngle = this.getAngle(this.displayedValue);
@@ -595,10 +594,10 @@
       this.ctx.beginPath();
       this.ctx.arc(w, h, this.radius, displayedAngle, (2 - this.options.angle) * Math.PI, false);
       this.ctx.stroke();
-      _ref1 = this.gp;
+      _ref = this.gp;
       _results = [];
-      for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-        gauge = _ref1[_i];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        gauge = _ref[_i];
         _results.push(gauge.update(true));
       }
       return _results;
@@ -608,6 +607,153 @@
 
   })(BaseGauge);
 
+  BaseDouble = (function(_super) {
+    __extends(BaseDouble, _super);
+
+    BaseDouble.prototype.lineWidth = 30;
+
+    BaseDouble.prototype.displayedAngle = 0;
+
+    BaseDouble.prototype.displayedValue = 0;
+
+    BaseDouble.prototype.value = 33;
+
+    BaseDouble.prototype.maxValue = 80;
+
+    BaseDouble.prototype.minValue = -80;
+
+    BaseDouble.prototype.paddingBottom = 0.1;
+
+    BaseDouble.prototype.options = {
+      lineWidth: 0.40,
+      colorStart: "#d73d32",
+      colorStop: "#53a93f",
+      strokeColor: "#eeeeee",
+      shadowColor: "#d5d5d5",
+      pointer: {
+        length: 0.8,
+        strokeWidth: 0.05
+      },
+      angle: 0
+    };
+
+    function BaseDouble(canvas) {
+      this.canvas = canvas;
+      BaseDouble.__super__.constructor.call(this);
+      if (typeof G_vmlCanvasManager !== 'undefined') {
+        this.canvas = window.G_vmlCanvasManager.initElement(this.canvas);
+      }
+      this.ctx = this.canvas.getContext('2d');
+      this.gp = new GaugePointer(this);
+      this.setOptions();
+      this.render();
+    }
+
+    BaseDouble.prototype.getAngle = function(value) {
+      if (value < 0) {
+        return (1.5 - value / this.minValue * (0.5 - this.options.angle)) * Math.PI;
+      } else if (value > 0) {
+        return (1.5 + value / this.maxValue * (0.5 - this.options.angle)) * Math.PI;
+      } else {
+        return 1.5 * Math.PI;
+      }
+    };
+
+    BaseDouble.prototype.setOptions = function(options) {
+      if (options == null) {
+        options = null;
+      }
+      BaseDouble.__super__.setOptions.call(this, options);
+      this.lineWidth = this.canvas.height * (1 - this.paddingBottom) * this.options.lineWidth;
+      this.radius = this.canvas.height * (1 - this.paddingBottom) - this.lineWidth;
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.render();
+      this.gp.setOptions(this.options.pointer);
+      this.gp.render();
+      return this;
+    };
+
+    BaseDouble.prototype.set = function(value) {
+      this.value = value;
+      if (this.value > this.maxValue) {
+        this.maxValue = this.value;
+      }
+      if (this.value < this.minValue) {
+        this.minValue = this.value;
+      }
+      this.gp.value = value;
+      this.gp.setOptions();
+      return AnimationUpdater.run();
+    };
+
+    BaseDouble.prototype.render = function() {
+      var counterclockwise, displayedAngle, fillStyle, h, w;
+      w = this.canvas.width / 2;
+      h = this.canvas.height * (1 - this.paddingBottom);
+      if (this.textField) {
+        this.textField.render(this);
+      }
+      this.ctx.strokeStyle = this.options.strokeColor;
+      this.ctx.beginPath();
+      this.ctx.arc(w, h, this.radius, (1 + this.options.angle) * Math.PI, (2 - this.options.angle) * Math.PI, false);
+      this.ctx.lineWidth = this.lineWidth;
+      this.ctx.lineCap = "butt";
+      this.ctx.stroke();
+      displayedAngle = this.getAngle(this.displayedValue);
+      if (displayedAngle < 1.5 * Math.PI) {
+        counterclockwise = true;
+        fillStyle = this.options.colorStart;
+      } else {
+        counterclockwise = false;
+        fillStyle = this.options.colorStop;
+      }
+      this.ctx.strokeStyle = fillStyle;
+      this.ctx.beginPath();
+      this.ctx.arc(w, h, this.radius, 1.5 * Math.PI, displayedAngle, counterclockwise);
+      this.ctx.stroke();
+      return this.gp.update(true);
+    };
+
+    return BaseDouble;
+
+  })(BaseGauge);
+
+  Double = (function(_super) {
+    __extends(Double, _super);
+
+    function Double() {
+      return Double.__super__.constructor.apply(this, arguments);
+    }
+
+    Double.prototype.strokeGradient = function(w, h, start, stop) {
+      var grd;
+      grd = this.ctx.createRadialGradient(w, h, start, w, h, stop);
+      grd.addColorStop(0, this.options.shadowColor);
+      grd.addColorStop(0.15, this.options._orgStrokeColor);
+      grd.addColorStop(0.85, this.options._orgStrokeColor);
+      grd.addColorStop(1, this.options.shadowColor);
+      return grd;
+    };
+
+    Double.prototype.setOptions = function(options) {
+      var h, start, stop, w;
+      if (options == null) {
+        options = null;
+      }
+      Double.__super__.setOptions.call(this, options);
+      w = this.canvas.width / 2;
+      h = this.canvas.height * (1 - this.paddingBottom);
+      start = this.radius - this.lineWidth / 2;
+      stop = this.radius + this.lineWidth / 2;
+      this.options._orgStrokeColor = this.options.strokeColor;
+      this.options.strokeColor = this.strokeGradient(w, h, start, stop);
+      return this;
+    };
+
+    return Double;
+
+  })(BaseDouble);
+
   BaseDonut = (function(_super) {
     __extends(BaseDonut, _super);
 
@@ -696,8 +842,7 @@
     __extends(Donut, _super);
 
     function Donut() {
-      _ref1 = Donut.__super__.constructor.apply(this, arguments);
-      return _ref1;
+      return Donut.__super__.constructor.apply(this, arguments);
     }
 
     Donut.prototype.strokeGradient = function(w, h, start, stop) {
@@ -745,11 +890,11 @@
       return AnimationUpdater.elements.push(object);
     },
     run: function() {
-      var animationFinished, elem, _i, _len, _ref2;
+      var animationFinished, elem, _i, _len, _ref;
       animationFinished = true;
-      _ref2 = AnimationUpdater.elements;
-      for (_i = 0, _len = _ref2.length; _i < _len; _i++) {
-        elem = _ref2[_i];
+      _ref = AnimationUpdater.elements;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        elem = _ref[_i];
         if (elem.update()) {
           animationFinished = false;
         }
@@ -766,6 +911,8 @@
 
   window.Donut = Donut;
 
+  window.Double = Double;
+
   window.BaseDonut = BaseDonut;
 
   window.TextRenderer = TextRenderer;
diff --git a/dist/gauge.min.js b/dist/gauge.min.js
index 243f883..8068107 100644
--- a/dist/gauge.min.js
+++ b/dist/gauge.min.js
@@ -1,61 +1 @@
-
-(function(){var AnimatedText,AnimatedTextFactory,Bar,BaseDonut,BaseGauge,Donut,Gauge,GaugePointer,TextRenderer,ValueUpdater,addCommas,cutHex,formatNumber,mergeObjects,secondsToString,updateObjectValues,_ref,_ref1,__hasProp={}.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key))child[key]=parent[key];}function ctor(){this.constructor=child;}ctor.prototype=parent.prototype;child.prototype=new ctor();child.__super__=parent.prototype;return child;};(function(){var browserRequestAnimationFrame,isCancelled,lastId,vendor,vendors,_i,_len;vendors=['ms','moz','webkit','o'];for(_i=0,_len=vendors.length;_i<_len;_i++){vendor=vendors[_i];if(window.requestAnimationFrame){break;}
-window.requestAnimationFrame=window[vendor+'RequestAnimationFrame'];window.cancelAnimationFrame=window[vendor+'CancelAnimationFrame']||window[vendor+'CancelRequestAnimationFrame'];}
-browserRequestAnimationFrame=null;lastId=0;isCancelled={};if(!requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime,id,lastTime,timeToCall;currTime=new Date().getTime();timeToCall=Math.max(0,16-(currTime-lastTime));id=window.setTimeout(function(){return callback(currTime+timeToCall);},timeToCall);lastTime=currTime+timeToCall;return id;};return window.cancelAnimationFrame=function(id){return clearTimeout(id);};}else if(!window.cancelAnimationFrame){browserRequestAnimationFrame=window.requestAnimationFrame;window.requestAnimationFrame=function(callback,element){var myId;myId=++lastId;browserRequestAnimationFrame(function(){if(!isCancelled[myId]){return callback();}},element);return myId;};return window.cancelAnimationFrame=function(id){return isCancelled[id]=true;};}})();String.prototype.hashCode=function(){var char,hash,i,_i,_ref;hash=0;if(this.length===0){return hash;}
-for(i=_i=0,_ref=this.length;0<=_ref?_i<_ref:_i>_ref;i=0<=_ref?++_i:--_i){char=this.charCodeAt(i);hash=((hash<<5)-hash)+char;hash=hash&hash;}
-return hash;};secondsToString=function(sec){var hr,min;hr=Math.floor(sec/3600);min=Math.floor((sec-(hr*3600))/60);sec-=(hr*3600)+(min*60);sec+='';min+='';while(min.length<2){min='0'+min;}
-while(sec.length<2){sec='0'+sec;}
-hr=hr?hr+':':'';return hr+min+':'+sec;};formatNumber=function(num){return addCommas(num.toFixed(0));};updateObjectValues=function(obj1,obj2){var key,val;for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];obj1[key]=val;}
-return obj1;};mergeObjects=function(obj1,obj2){var key,out,val;out={};for(key in obj1){if(!__hasProp.call(obj1,key))continue;val=obj1[key];out[key]=val;}
-for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];out[key]=val;}
-return out;};addCommas=function(nStr){var rgx,x,x1,x2;nStr+='';x=nStr.split('.');x1=x[0];x2='';if(x.length>1){x2='.'+x[1];}
-rgx=/(\d+)(\d{3})/;while(rgx.test(x1)){x1=x1.replace(rgx,'$1'+','+'$2');}
-return x1+x2;};cutHex=function(nStr){if(nStr.charAt(0)==="#"){return nStr.substring(1,7);}
-return nStr;};ValueUpdater=(function(){ValueUpdater.prototype.animationSpeed=32;function ValueUpdater(addToAnimationQueue,clear){if(addToAnimationQueue==null){addToAnimationQueue=true;}
-this.clear=clear!=null?clear:true;if(addToAnimationQueue){AnimationUpdater.add(this);}}
-ValueUpdater.prototype.update=function(force){var diff;if(force==null){force=false;}
-if(force||this.displayedValue!==this.value){if(this.ctx&&this.clear){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);}
-diff=this.value-this.displayedValue;if(Math.abs(diff/this.animationSpeed)<=0.001){this.displayedValue=this.value;}else{this.displayedValue=this.displayedValue+diff/this.animationSpeed;}
-this.render();return true;}
-return false;};return ValueUpdater;})();BaseGauge=(function(_super){__extends(BaseGauge,_super);function BaseGauge(){_ref=BaseGauge.__super__.constructor.apply(this,arguments);return _ref;}
-BaseGauge.prototype.displayScale=1;BaseGauge.prototype.setTextField=function(textField){return this.textField=textField instanceof TextRenderer?textField:new TextRenderer(textField);};BaseGauge.prototype.setMinValue=function(minValue,updateStartValue){var gauge,_i,_len,_ref1,_results;this.minValue=minValue;if(updateStartValue==null){updateStartValue=true;}
-if(updateStartValue){this.displayedValue=this.minValue;_ref1=this.gp||[];_results=[];for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];_results.push(gauge.displayedValue=this.minValue);}
-return _results;}};BaseGauge.prototype.setOptions=function(options){if(options==null){options=null;}
-this.options=mergeObjects(this.options,options);if(this.textField){this.textField.el.style.fontSize=options.fontSize+'px';}
-if(this.options.angle>.5){this.gauge.options.angle=.5;}
-this.configDisplayScale();return this;};BaseGauge.prototype.configDisplayScale=function(){var backingStorePixelRatio,devicePixelRatio,height,prevDisplayScale,width;prevDisplayScale=this.displayScale;if(this.options.highDpiSupport===false){delete this.displayScale;}else{devicePixelRatio=window.devicePixelRatio||1;backingStorePixelRatio=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1;this.displayScale=devicePixelRatio/backingStorePixelRatio;}
-if(this.displayScale!==prevDisplayScale){width=this.canvas.G__width||this.canvas.width;height=this.canvas.G__height||this.canvas.height;this.canvas.width=width*this.displayScale;this.canvas.height=height*this.displayScale;this.canvas.style.width=""+width+"px";this.canvas.style.height=""+height+"px";this.canvas.G__width=width;this.canvas.G__height=height;}
-return this;};return BaseGauge;})(ValueUpdater);TextRenderer=(function(){function TextRenderer(el){this.el=el;}
-TextRenderer.prototype.render=function(gauge){return this.el.innerHTML=formatNumber(gauge.displayedValue);};return TextRenderer;})();AnimatedText=(function(_super){__extends(AnimatedText,_super);AnimatedText.prototype.displayedValue=0;AnimatedText.prototype.value=0;AnimatedText.prototype.setVal=function(value){return this.value=1*value;};function AnimatedText(elem,text){this.elem=elem;this.text=text!=null?text:false;this.value=1*this.elem.innerHTML;if(this.text){this.value=0;}}
-AnimatedText.prototype.render=function(){var textVal;if(this.text){textVal=secondsToString(this.displayedValue.toFixed(0));}else{textVal=addCommas(formatNumber(this.displayedValue));}
-return this.elem.innerHTML=textVal;};return AnimatedText;})(ValueUpdater);AnimatedTextFactory={create:function(objList){var elem,out,_i,_len;out=[];for(_i=0,_len=objList.length;_i<_len;_i++){elem=objList[_i];out.push(new AnimatedText(elem));}
-return out;}};GaugePointer=(function(_super){__extends(GaugePointer,_super);GaugePointer.prototype.displayedValue=0;GaugePointer.prototype.value=0;GaugePointer.prototype.options={strokeWidth:0.035,length:0.1,color:"#000000"};function GaugePointer(gauge){this.gauge=gauge;this.ctx=this.gauge.ctx;this.canvas=this.gauge.canvas;GaugePointer.__super__.constructor.call(this,false,false);this.setOptions();}
-GaugePointer.prototype.setOptions=function(options){if(options==null){options=null;}
-updateObjectValues(this.options,options);this.length=this.canvas.height*this.options.length;this.strokeWidth=this.canvas.height*this.options.strokeWidth;this.maxValue=this.gauge.maxValue;this.minValue=this.gauge.minValue;this.animationSpeed=this.gauge.animationSpeed;return this.options.angle=this.gauge.options.angle;};GaugePointer.prototype.render=function(){var angle,centerX,centerY,endX,endY,startX,startY,x,y;angle=this.gauge.getAngle.call(this,this.displayedValue);centerX=this.canvas.width/2;centerY=this.canvas.height*0.9;x=Math.round(centerX+this.length*Math.cos(angle));y=Math.round(centerY+this.length*Math.sin(angle));startX=Math.round(centerX+this.strokeWidth*Math.cos(angle-Math.PI/2));startY=Math.round(centerY+this.strokeWidth*Math.sin(angle-Math.PI/2));endX=Math.round(centerX+this.strokeWidth*Math.cos(angle+Math.PI/2));endY=Math.round(centerY+this.strokeWidth*Math.sin(angle+Math.PI/2));this.ctx.fillStyle=this.options.color;this.ctx.beginPath();this.ctx.arc(centerX,centerY,this.strokeWidth,0,Math.PI*2,true);this.ctx.fill();this.ctx.beginPath();this.ctx.moveTo(startX,startY);this.ctx.lineTo(x,y);this.ctx.lineTo(endX,endY);return this.ctx.fill();};return GaugePointer;})(ValueUpdater);Bar=(function(){function Bar(elem){this.elem=elem;}
-Bar.prototype.updateValues=function(arrValues){this.value=arrValues[0];this.maxValue=arrValues[1];this.avgValue=arrValues[2];return this.render();};Bar.prototype.render=function(){var avgPercent,valPercent;if(this.textField){this.textField.text(formatNumber(this.value));}
-if(this.maxValue===0){this.maxValue=this.avgValue*2;}
-valPercent=(this.value/this.maxValue)*100;avgPercent=(this.avgValue/this.maxValue)*100;$(".bar-value",this.elem).css({"width":valPercent+"%"});return $(".typical-value",this.elem).css({"width":avgPercent+"%"});};return Bar;})();Gauge=(function(_super){__extends(Gauge,_super);Gauge.prototype.elem=null;Gauge.prototype.value=[20];Gauge.prototype.maxValue=80;Gauge.prototype.minValue=0;Gauge.prototype.displayedAngle=0;Gauge.prototype.displayedValue=0;Gauge.prototype.lineWidth=40;Gauge.prototype.paddingBottom=0.1;Gauge.prototype.percentColors=null;Gauge.prototype.options={colorStart:"#6fadcf",colorStop:void 0,gradientType:0,strokeColor:"#e0e0e0",pointer:{length:0.8,strokeWidth:0.035},angle:0.15,lineWidth:0.44,fontSize:40,limitMax:false};function Gauge(canvas){this.canvas=canvas;Gauge.__super__.constructor.call(this);this.percentColors=null;if(typeof G_vmlCanvasManager!=='undefined'){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas);}
-this.ctx=this.canvas.getContext('2d');this.gp=[new GaugePointer(this)];this.setOptions();this.render();}
-Gauge.prototype.setOptions=function(options){var gauge,_i,_len,_ref1;if(options==null){options=null;}
-Gauge.__super__.setOptions.call(this,options);this.configPercentColors();this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.lineWidth;this.radius=this.canvas.height*(1-this.paddingBottom)-this.lineWidth;this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);this.render();_ref1=this.gp;for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];gauge.setOptions(this.options.pointer);gauge.render();}
-return this;};Gauge.prototype.configPercentColors=function(){var bval,gval,i,rval,_i,_ref1,_results;this.percentColors=null;if(this.options.percentColors!==void 0){this.percentColors=new Array();_results=[];for(i=_i=0,_ref1=this.options.percentColors.length-1;0<=_ref1?_i<=_ref1:_i>=_ref1;i=0<=_ref1?++_i:--_i){rval=parseInt((cutHex(this.options.percentColors[i][1])).substring(0,2),16);gval=parseInt((cutHex(this.options.percentColors[i][1])).substring(2,4),16);bval=parseInt((cutHex(this.options.percentColors[i][1])).substring(4,6),16);_results.push(this.percentColors[i]={pct:this.options.percentColors[i][0],color:{r:rval,g:gval,b:bval}});}
-return _results;}};Gauge.prototype.set=function(value){var i,max_hit,val,_i,_j,_len,_ref1;if(!(value instanceof Array)){value=[value];}
-if(value.length>this.gp.length){for(i=_i=0,_ref1=value.length-this.gp.length;0<=_ref1?_i<_ref1:_i>_ref1;i=0<=_ref1?++_i:--_i){this.gp.push(new GaugePointer(this));}}
-i=0;max_hit=false;for(_j=0,_len=value.length;_j<_len;_j++){val=value[_j];if(val>this.maxValue){this.maxValue=this.value*1.1;max_hit=true;}
-this.gp[i].value=val;this.gp[i++].setOptions({maxValue:this.maxValue,angle:this.options.angle});}
-this.value=value[value.length-1];if(max_hit){if(!this.options.limitMax){return AnimationUpdater.run();}}else{return AnimationUpdater.run();}};Gauge.prototype.getAngle=function(value){return(1+this.options.angle)*Math.PI+((value-this.minValue)/(this.maxValue-this.minValue))*(1-this.options.angle*2)*Math.PI;};Gauge.prototype.getColorForPercentage=function(pct,grad){var color,endColor,i,rangePct,startColor,_i,_ref1;if(pct===0){color=this.percentColors[0].color;}else{color=this.percentColors[this.percentColors.length-1].color;for(i=_i=0,_ref1=this.percentColors.length-1;0<=_ref1?_i<=_ref1:_i>=_ref1;i=0<=_ref1?++_i:--_i){if(pct<=this.percentColors[i].pct){if(grad===true){startColor=this.percentColors[i-1];endColor=this.percentColors[i];rangePct=(pct-startColor.pct)/(endColor.pct-startColor.pct);color={r:Math.floor(startColor.color.r*(1-rangePct)+endColor.color.r*rangePct),g:Math.floor(startColor.color.g*(1-rangePct)+endColor.color.g*rangePct),b:Math.floor(startColor.color.b*(1-rangePct)+endColor.color.b*rangePct)};}else{color=this.percentColors[i].color;}
-break;}}}
-return'rgb('+[color.r,color.g,color.b].join(',')+')';};Gauge.prototype.getColorForValue=function(val,grad){var pct;pct=(val-this.minValue)/(this.maxValue-this.minValue);return this.getColorForPercentage(pct,grad);};Gauge.prototype.render=function(){var displayedAngle,fillStyle,gauge,h,w,_i,_len,_ref1,_results;w=this.canvas.width/2;h=this.canvas.height*(1-this.paddingBottom);displayedAngle=this.getAngle(this.displayedValue);if(this.textField){this.textField.render(this);}
-this.ctx.lineCap="butt";if(this.options.customFillStyle!==void 0){fillStyle=this.options.customFillStyle(this);}else if(this.percentColors!==null){fillStyle=this.getColorForValue(this.displayedValue,true);}else if(this.options.colorStop!==void 0){if(this.options.gradientType===0){fillStyle=this.ctx.createRadialGradient(w,h,9,w,h,70);}else{fillStyle=this.ctx.createLinearGradient(0,0,w,0);}
-fillStyle.addColorStop(0,this.options.colorStart);fillStyle.addColorStop(1,this.options.colorStop);}else{fillStyle=this.options.colorStart;}
-this.ctx.strokeStyle=fillStyle;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1+this.options.angle)*Math.PI,displayedAngle,false);this.ctx.lineWidth=this.lineWidth;this.ctx.stroke();this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,displayedAngle,(2-this.options.angle)*Math.PI,false);this.ctx.stroke();_ref1=this.gp;_results=[];for(_i=0,_len=_ref1.length;_i<_len;_i++){gauge=_ref1[_i];_results.push(gauge.update(true));}
-return _results;};return Gauge;})(BaseGauge);BaseDonut=(function(_super){__extends(BaseDonut,_super);BaseDonut.prototype.lineWidth=15;BaseDonut.prototype.displayedValue=0;BaseDonut.prototype.value=33;BaseDonut.prototype.maxValue=80;BaseDonut.prototype.minValue=0;BaseDonut.prototype.options={lineWidth:0.10,colorStart:"#6f6ea0",colorStop:"#c0c0db",strokeColor:"#eeeeee",shadowColor:"#d5d5d5",angle:0.35};function BaseDonut(canvas){this.canvas=canvas;BaseDonut.__super__.constructor.call(this);if(typeof G_vmlCanvasManager!=='undefined'){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas);}
-this.ctx=this.canvas.getContext('2d');this.setOptions();this.render();}
-BaseDonut.prototype.getAngle=function(value){return(1-this.options.angle)*Math.PI+((value-this.minValue)/(this.maxValue-this.minValue))*((2+this.options.angle)-(1-this.options.angle))*Math.PI;};BaseDonut.prototype.setOptions=function(options){if(options==null){options=null;}
-BaseDonut.__super__.setOptions.call(this,options);this.lineWidth=this.canvas.height*this.options.lineWidth;this.radius=this.canvas.height/2-this.lineWidth/2;return this;};BaseDonut.prototype.set=function(value){this.value=value;if(this.value>this.maxValue){this.maxValue=this.value*1.1;}
-return AnimationUpdater.run();};BaseDonut.prototype.render=function(){var displayedAngle,grdFill,h,start,stop,w;displayedAngle=this.getAngle(this.displayedValue);w=this.canvas.width/2;h=this.canvas.height/2;if(this.textField){this.textField.render(this);}
-grdFill=this.ctx.createRadialGradient(w,h,39,w,h,70);grdFill.addColorStop(0,this.options.colorStart);grdFill.addColorStop(1,this.options.colorStop);start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,(2+this.options.angle)*Math.PI,false);this.ctx.lineWidth=this.lineWidth;this.ctx.lineCap="round";this.ctx.stroke();this.ctx.strokeStyle=grdFill;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,displayedAngle,false);return this.ctx.stroke();};return BaseDonut;})(BaseGauge);Donut=(function(_super){__extends(Donut,_super);function Donut(){_ref1=Donut.__super__.constructor.apply(this,arguments);return _ref1;}
-Donut.prototype.strokeGradient=function(w,h,start,stop){var grd;grd=this.ctx.createRadialGradient(w,h,start,w,h,stop);grd.addColorStop(0,this.options.shadowColor);grd.addColorStop(0.12,this.options._orgStrokeColor);grd.addColorStop(0.88,this.options._orgStrokeColor);grd.addColorStop(1,this.options.shadowColor);return grd;};Donut.prototype.setOptions=function(options){var h,start,stop,w;if(options==null){options=null;}
-Donut.__super__.setOptions.call(this,options);w=this.canvas.width/2;h=this.canvas.height/2;start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.options._orgStrokeColor=this.options.strokeColor;this.options.strokeColor=this.strokeGradient(w,h,start,stop);return this;};return Donut;})(BaseDonut);window.AnimationUpdater={elements:[],animId:null,addAll:function(list){var elem,_i,_len,_results;_results=[];for(_i=0,_len=list.length;_i<_len;_i++){elem=list[_i];_results.push(AnimationUpdater.elements.push(elem));}
-return _results;},add:function(object){return AnimationUpdater.elements.push(object);},run:function(){var animationFinished,elem,_i,_len,_ref2;animationFinished=true;_ref2=AnimationUpdater.elements;for(_i=0,_len=_ref2.length;_i<_len;_i++){elem=_ref2[_i];if(elem.update()){animationFinished=false;}}
-if(!animationFinished){return AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run);}else{return cancelAnimationFrame(AnimationUpdater.animId);}}};window.Gauge=Gauge;window.Donut=Donut;window.BaseDonut=BaseDonut;window.TextRenderer=TextRenderer;}).call(this);
\ No newline at end of file
+(function(){var AnimatedText,AnimatedTextFactory,Bar,BaseDonut,BaseDouble,BaseGauge,Donut,Double,Gauge,GaugePointer,TextRenderer,ValueUpdater,addCommas,cutHex,formatNumber,mergeObjects,secondsToString,updateObjectValues,__hasProp={}.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key))child[key]=parent[key]}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor;child.__super__=parent.prototype;return child};(function(){var browserRequestAnimationFrame,isCancelled,lastId,vendor,vendors,_i,_len;vendors=["ms","moz","webkit","o"];for(_i=0,_len=vendors.length;_i<_len;_i++){vendor=vendors[_i];if(window.requestAnimationFrame){break}window.requestAnimationFrame=window[vendor+"RequestAnimationFrame"];window.cancelAnimationFrame=window[vendor+"CancelAnimationFrame"]||window[vendor+"CancelRequestAnimationFrame"]}browserRequestAnimationFrame=null;lastId=0;isCancelled={};if(!requestAnimationFrame){window.requestAnimationFrame=function(callback,element){var currTime,id,lastTime,timeToCall;currTime=(new Date).getTime();timeToCall=Math.max(0,16-(currTime-lastTime));id=window.setTimeout(function(){return callback(currTime+timeToCall)},timeToCall);lastTime=currTime+timeToCall;return id};return window.cancelAnimationFrame=function(id){return clearTimeout(id)}}else if(!window.cancelAnimationFrame){browserRequestAnimationFrame=window.requestAnimationFrame;window.requestAnimationFrame=function(callback,element){var myId;myId=++lastId;browserRequestAnimationFrame(function(){if(!isCancelled[myId]){return callback()}},element);return myId};return window.cancelAnimationFrame=function(id){return isCancelled[id]=true}}})();String.prototype.hashCode=function(){var char,hash,i,_i,_ref;hash=0;if(this.length===0){return hash}for(i=_i=0,_ref=this.length;0<=_ref?_i<_ref:_i>_ref;i=0<=_ref?++_i:--_i){char=this.charCodeAt(i);hash=(hash<<5)-hash+char;hash=hash&hash}return hash};secondsToString=function(sec){var hr,min;hr=Math.floor(sec/3600);min=Math.floor((sec-hr*3600)/60);sec-=hr*3600+min*60;sec+="";min+="";while(min.length<2){min="0"+min}while(sec.length<2){sec="0"+sec}hr=hr?hr+":":"";return hr+min+":"+sec};formatNumber=function(num){return addCommas(num.toFixed(0))};updateObjectValues=function(obj1,obj2){var key,val;for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];obj1[key]=val}return obj1};mergeObjects=function(obj1,obj2){var key,out,val;out={};for(key in obj1){if(!__hasProp.call(obj1,key))continue;val=obj1[key];out[key]=val}for(key in obj2){if(!__hasProp.call(obj2,key))continue;val=obj2[key];out[key]=val}return out};addCommas=function(nStr){var rgx,x,x1,x2;nStr+="";x=nStr.split(".");x1=x[0];x2="";if(x.length>1){x2="."+x[1]}rgx=/(\d+)(\d{3})/;while(rgx.test(x1)){x1=x1.replace(rgx,"$1"+","+"$2")}return x1+x2};cutHex=function(nStr){if(nStr.charAt(0)==="#"){return nStr.substring(1,7)}return nStr};ValueUpdater=function(){ValueUpdater.prototype.animationSpeed=32;function ValueUpdater(addToAnimationQueue,clear){if(addToAnimationQueue==null){addToAnimationQueue=true}this.clear=clear!=null?clear:true;if(addToAnimationQueue){AnimationUpdater.add(this)}}ValueUpdater.prototype.update=function(force){var diff;if(force==null){force=false}if(force||this.displayedValue!==this.value){if(this.ctx&&this.clear){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)}diff=this.value-this.displayedValue;if(Math.abs(diff/this.animationSpeed)<=.001){this.displayedValue=this.value}else{this.displayedValue=this.displayedValue+diff/this.animationSpeed}this.render();return true}return false};return ValueUpdater}();BaseGauge=function(_super){__extends(BaseGauge,_super);function BaseGauge(){return BaseGauge.__super__.constructor.apply(this,arguments)}BaseGauge.prototype.displayScale=1;BaseGauge.prototype.setTextField=function(textField){return this.textField=textField instanceof TextRenderer?textField:new TextRenderer(textField)};BaseGauge.prototype.setMinValue=function(minValue,updateStartValue){var gauge,_i,_len,_ref,_results;this.minValue=minValue;if(updateStartValue==null){updateStartValue=true}if(updateStartValue){this.displayedValue=this.minValue;_ref=this.gp||[];_results=[];for(_i=0,_len=_ref.length;_i<_len;_i++){gauge=_ref[_i];_results.push(gauge.displayedValue=this.minValue)}return _results}};BaseGauge.prototype.setOptions=function(options){if(options==null){options=null}this.options=mergeObjects(this.options,options);if(this.textField){this.textField.el.style.fontSize=options.fontSize+"px"}if(this.options.angle>.5){this.gauge.options.angle=.5}this.configDisplayScale();return this};BaseGauge.prototype.configDisplayScale=function(){var backingStorePixelRatio,devicePixelRatio,height,prevDisplayScale,width;prevDisplayScale=this.displayScale;if(this.options.highDpiSupport===false){delete this.displayScale}else{devicePixelRatio=window.devicePixelRatio||1;backingStorePixelRatio=this.ctx.webkitBackingStorePixelRatio||this.ctx.mozBackingStorePixelRatio||this.ctx.msBackingStorePixelRatio||this.ctx.oBackingStorePixelRatio||this.ctx.backingStorePixelRatio||1;this.displayScale=devicePixelRatio/backingStorePixelRatio}if(this.displayScale!==prevDisplayScale){width=this.canvas.G__width||this.canvas.width;height=this.canvas.G__height||this.canvas.height;this.canvas.width=width*this.displayScale;this.canvas.height=height*this.displayScale;this.canvas.style.width=""+width+"px";this.canvas.style.height=""+height+"px";this.canvas.G__width=width;this.canvas.G__height=height}return this};return BaseGauge}(ValueUpdater);TextRenderer=function(){function TextRenderer(el){this.el=el}TextRenderer.prototype.render=function(gauge){return this.el.innerHTML=formatNumber(gauge.displayedValue)};return TextRenderer}();AnimatedText=function(_super){__extends(AnimatedText,_super);AnimatedText.prototype.displayedValue=0;AnimatedText.prototype.value=0;AnimatedText.prototype.setVal=function(value){return this.value=1*value};function AnimatedText(elem,text){this.elem=elem;this.text=text!=null?text:false;this.value=1*this.elem.innerHTML;if(this.text){this.value=0}}AnimatedText.prototype.render=function(){var textVal;if(this.text){textVal=secondsToString(this.displayedValue.toFixed(0))}else{textVal=addCommas(formatNumber(this.displayedValue))}return this.elem.innerHTML=textVal};return AnimatedText}(ValueUpdater);AnimatedTextFactory={create:function(objList){var elem,out,_i,_len;out=[];for(_i=0,_len=objList.length;_i<_len;_i++){elem=objList[_i];out.push(new AnimatedText(elem))}return out}};GaugePointer=function(_super){__extends(GaugePointer,_super);GaugePointer.prototype.displayedValue=0;GaugePointer.prototype.value=0;GaugePointer.prototype.options={strokeWidth:.035,length:.1,color:"#000000"};function GaugePointer(gauge){this.gauge=gauge;this.ctx=this.gauge.ctx;this.canvas=this.gauge.canvas;GaugePointer.__super__.constructor.call(this,false,false);this.setOptions()}GaugePointer.prototype.setOptions=function(options){if(options==null){options=null}updateObjectValues(this.options,options);this.length=this.canvas.height*this.options.length;this.strokeWidth=this.canvas.height*this.options.strokeWidth;this.maxValue=this.gauge.maxValue;this.minValue=this.gauge.minValue;this.animationSpeed=this.gauge.animationSpeed;return this.options.angle=this.gauge.options.angle};GaugePointer.prototype.render=function(){var angle,centerX,centerY,endX,endY,startX,startY,x,y;angle=this.gauge.getAngle(this.displayedValue);centerX=this.canvas.width/2;centerY=this.canvas.height*.9;x=Math.round(centerX+this.length*Math.cos(angle));y=Math.round(centerY+this.length*Math.sin(angle));startX=Math.round(centerX+this.strokeWidth*Math.cos(angle-Math.PI/2));startY=Math.round(centerY+this.strokeWidth*Math.sin(angle-Math.PI/2));endX=Math.round(centerX+this.strokeWidth*Math.cos(angle+Math.PI/2));endY=Math.round(centerY+this.strokeWidth*Math.sin(angle+Math.PI/2));this.ctx.fillStyle=this.options.color;this.ctx.beginPath();this.ctx.arc(centerX,centerY,this.strokeWidth,0,Math.PI*2,true);this.ctx.fill();this.ctx.beginPath();this.ctx.moveTo(startX,startY);this.ctx.lineTo(x,y);this.ctx.lineTo(endX,endY);return this.ctx.fill()};return GaugePointer}(ValueUpdater);Bar=function(){function Bar(elem){this.elem=elem}Bar.prototype.updateValues=function(arrValues){this.value=arrValues[0];this.maxValue=arrValues[1];this.avgValue=arrValues[2];return this.render()};Bar.prototype.render=function(){var avgPercent,valPercent;if(this.textField){this.textField.text(formatNumber(this.value))}if(this.maxValue===0){this.maxValue=this.avgValue*2}valPercent=this.value/this.maxValue*100;avgPercent=this.avgValue/this.maxValue*100;$(".bar-value",this.elem).css({width:valPercent+"%"});return $(".typical-value",this.elem).css({width:avgPercent+"%"})};return Bar}();Gauge=function(_super){__extends(Gauge,_super);Gauge.prototype.elem=null;Gauge.prototype.value=[20];Gauge.prototype.maxValue=80;Gauge.prototype.minValue=0;Gauge.prototype.displayedAngle=0;Gauge.prototype.displayedValue=0;Gauge.prototype.lineWidth=40;Gauge.prototype.paddingBottom=.1;Gauge.prototype.percentColors=null;Gauge.prototype.options={colorStart:"#6fadcf",colorStop:void 0,gradientType:0,strokeColor:"#e0e0e0",pointer:{length:.8,strokeWidth:.035},angle:.15,lineWidth:.44,fontSize:40,limitMax:false};function Gauge(canvas){this.canvas=canvas;Gauge.__super__.constructor.call(this);this.percentColors=null;if(typeof G_vmlCanvasManager!=="undefined"){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)}this.ctx=this.canvas.getContext("2d");this.gp=[new GaugePointer(this)];this.setOptions();this.render()}Gauge.prototype.setOptions=function(options){var gauge,_i,_len,_ref;if(options==null){options=null}Gauge.__super__.setOptions.call(this,options);this.configPercentColors();this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.lineWidth;this.radius=this.canvas.height*(1-this.paddingBottom)-this.lineWidth;this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);this.render();_ref=this.gp;for(_i=0,_len=_ref.length;_i<_len;_i++){gauge=_ref[_i];gauge.setOptions(this.options.pointer);gauge.render()}return this};Gauge.prototype.configPercentColors=function(){var bval,gval,i,rval,_i,_ref,_results;this.percentColors=null;if(this.options.percentColors!==void 0){this.percentColors=new Array;_results=[];for(i=_i=0,_ref=this.options.percentColors.length-1;0<=_ref?_i<=_ref:_i>=_ref;i=0<=_ref?++_i:--_i){rval=parseInt(cutHex(this.options.percentColors[i][1]).substring(0,2),16);gval=parseInt(cutHex(this.options.percentColors[i][1]).substring(2,4),16);bval=parseInt(cutHex(this.options.percentColors[i][1]).substring(4,6),16);_results.push(this.percentColors[i]={pct:this.options.percentColors[i][0],color:{r:rval,g:gval,b:bval}})}return _results}};Gauge.prototype.set=function(value){var i,max_hit,val,_i,_j,_len,_ref;if(!(value instanceof Array)){value=[value]}if(value.length>this.gp.length){for(i=_i=0,_ref=value.length-this.gp.length;0<=_ref?_i<_ref:_i>_ref;i=0<=_ref?++_i:--_i){this.gp.push(new GaugePointer(this))}}i=0;max_hit=false;for(_j=0,_len=value.length;_j<_len;_j++){val=value[_j];if(val>this.maxValue){this.maxValue=this.value*1.1;max_hit=true}this.gp[i].value=val;this.gp[i++].setOptions({maxValue:this.maxValue,angle:this.options.angle})}this.value=value[value.length-1];if(max_hit){if(!this.options.limitMax){return AnimationUpdater.run()}}else{return AnimationUpdater.run()}};Gauge.prototype.getAngle=function(value){return(1+this.options.angle)*Math.PI+(value-this.minValue)/(this.maxValue-this.minValue)*(1-this.options.angle*2)*Math.PI};Gauge.prototype.getColorForPercentage=function(pct,grad){var color,endColor,i,rangePct,startColor,_i,_ref;if(pct===0){color=this.percentColors[0].color}else{color=this.percentColors[this.percentColors.length-1].color;for(i=_i=0,_ref=this.percentColors.length-1;0<=_ref?_i<=_ref:_i>=_ref;i=0<=_ref?++_i:--_i){if(pct<=this.percentColors[i].pct){if(grad===true){startColor=this.percentColors[i-1];endColor=this.percentColors[i];rangePct=(pct-startColor.pct)/(endColor.pct-startColor.pct);color={r:Math.floor(startColor.color.r*(1-rangePct)+endColor.color.r*rangePct),g:Math.floor(startColor.color.g*(1-rangePct)+endColor.color.g*rangePct),b:Math.floor(startColor.color.b*(1-rangePct)+endColor.color.b*rangePct)}}else{color=this.percentColors[i].color}break}}}return"rgb("+[color.r,color.g,color.b].join(",")+")"};Gauge.prototype.getColorForValue=function(val,grad){var pct;pct=(val-this.minValue)/(this.maxValue-this.minValue);return this.getColorForPercentage(pct,grad)};Gauge.prototype.render=function(){var displayedAngle,fillStyle,gauge,h,w,_i,_len,_ref,_results;w=this.canvas.width/2;h=this.canvas.height*(1-this.paddingBottom);displayedAngle=this.getAngle(this.displayedValue);if(this.textField){this.textField.render(this)}this.ctx.lineCap="butt";if(this.options.customFillStyle!==void 0){fillStyle=this.options.customFillStyle(this)}else if(this.percentColors!==null){fillStyle=this.getColorForValue(this.displayedValue,true)}else if(this.options.colorStop!==void 0){if(this.options.gradientType===0){fillStyle=this.ctx.createRadialGradient(w,h,9,w,h,70)}else{fillStyle=this.ctx.createLinearGradient(0,0,w,0)}fillStyle.addColorStop(0,this.options.colorStart);fillStyle.addColorStop(1,this.options.colorStop)}else{fillStyle=this.options.colorStart}this.ctx.strokeStyle=fillStyle;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1+this.options.angle)*Math.PI,displayedAngle,false);this.ctx.lineWidth=this.lineWidth;this.ctx.stroke();this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,displayedAngle,(2-this.options.angle)*Math.PI,false);this.ctx.stroke();_ref=this.gp;_results=[];for(_i=0,_len=_ref.length;_i<_len;_i++){gauge=_ref[_i];_results.push(gauge.update(true))}return _results};return Gauge}(BaseGauge);BaseDouble=function(_super){__extends(BaseDouble,_super);BaseDouble.prototype.lineWidth=30;BaseDouble.prototype.displayedAngle=0;BaseDouble.prototype.displayedValue=0;BaseDouble.prototype.value=33;BaseDouble.prototype.maxValue=80;BaseDouble.prototype.minValue=-80;BaseDouble.prototype.paddingBottom=.1;BaseDouble.prototype.options={lineWidth:.4,colorStart:"#d73d32",colorStop:"#53a93f",strokeColor:"#eeeeee",shadowColor:"#d5d5d5",pointer:{length:.8,strokeWidth:.05},angle:0};function BaseDouble(canvas){this.canvas=canvas;BaseDouble.__super__.constructor.call(this);if(typeof G_vmlCanvasManager!=="undefined"){this.canvas=window.G_vmlCanvasManager.initElement(this.canvas)}this.ctx=this.canvas.getContext("2d");this.gp=new GaugePointer(this);this.setOptions();this.render()}BaseDouble.prototype.getAngle=function(value){if(value<0){return(1.5-value/this.minValue*(.5-this.options.angle))*Math.PI}else if(value>0){return(1.5+value/this.maxValue*(.5-this.options.angle))*Math.PI}else{return 1.5*Math.PI}};BaseDouble.prototype.setOptions=function(options){if(options==null){options=null}BaseDouble.__super__.setOptions.call(this,options);this.lineWidth=this.canvas.height*(1-this.paddingBottom)*this.options.lineWidth;this.radius=this.canvas.height*(1-this.paddingBottom)-this.lineWidth;this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);this.render();this.gp.setOptions(this.options.pointer);this.gp.render();return this};BaseDouble.prototype.set=function(value){this.value=value;if(this.value>this.maxValue){this.maxValue=this.value}if(this.valuethis.maxValue){this.maxValue=this.value*1.1}return AnimationUpdater.run()};BaseDonut.prototype.render=function(){var displayedAngle,grdFill,h,start,stop,w;displayedAngle=this.getAngle(this.displayedValue);w=this.canvas.width/2;h=this.canvas.height/2;if(this.textField){this.textField.render(this)}grdFill=this.ctx.createRadialGradient(w,h,39,w,h,70);grdFill.addColorStop(0,this.options.colorStart);grdFill.addColorStop(1,this.options.colorStop);start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.ctx.strokeStyle=this.options.strokeColor;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,(2+this.options.angle)*Math.PI,false);this.ctx.lineWidth=this.lineWidth;this.ctx.lineCap="round";this.ctx.stroke();this.ctx.strokeStyle=grdFill;this.ctx.beginPath();this.ctx.arc(w,h,this.radius,(1-this.options.angle)*Math.PI,displayedAngle,false);return this.ctx.stroke()};return BaseDonut}(BaseGauge);Donut=function(_super){__extends(Donut,_super);function Donut(){return Donut.__super__.constructor.apply(this,arguments)}Donut.prototype.strokeGradient=function(w,h,start,stop){var grd;grd=this.ctx.createRadialGradient(w,h,start,w,h,stop);grd.addColorStop(0,this.options.shadowColor);grd.addColorStop(.12,this.options._orgStrokeColor);grd.addColorStop(.88,this.options._orgStrokeColor);grd.addColorStop(1,this.options.shadowColor);return grd};Donut.prototype.setOptions=function(options){var h,start,stop,w;if(options==null){options=null}Donut.__super__.setOptions.call(this,options);w=this.canvas.width/2;h=this.canvas.height/2;start=this.radius-this.lineWidth/2;stop=this.radius+this.lineWidth/2;this.options._orgStrokeColor=this.options.strokeColor;this.options.strokeColor=this.strokeGradient(w,h,start,stop);return this};return Donut}(BaseDonut);window.AnimationUpdater={elements:[],animId:null,addAll:function(list){var elem,_i,_len,_results;_results=[];for(_i=0,_len=list.length;_i<_len;_i++){elem=list[_i];_results.push(AnimationUpdater.elements.push(elem))}return _results},add:function(object){return AnimationUpdater.elements.push(object)},run:function(){var animationFinished,elem,_i,_len,_ref;animationFinished=true;_ref=AnimationUpdater.elements;for(_i=0,_len=_ref.length;_i<_len;_i++){elem=_ref[_i];if(elem.update()){animationFinished=false}}if(!animationFinished){return AnimationUpdater.animId=requestAnimationFrame(AnimationUpdater.run)}else{return cancelAnimationFrame(AnimationUpdater.animId)}}};window.Gauge=Gauge;window.Donut=Donut;window.Double=Double;window.BaseDonut=BaseDonut;window.TextRenderer=TextRenderer}).call(this);
\ No newline at end of file
diff --git a/index.html b/index.html
index 27d7867..1afa599 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,19 @@
 
 
 	
+		
 		gauge.js
 		
 		
 		
 		
 		
-		
-		
-		
-		
+		
+		
+		
+		
 		
 		
-		
-		
-		
 	
 	
 
@@ -24,11 +22,6 @@ 
gauge.js

 			
100% native and cool looking animated JavaScript/CoffeeScript gauge

 			
coffee

 			

-
@@ -47,24 +40,25 @@

Variant selection

- +

Options:

-
-

-
-
-
-
-
-
-
-
-
+
+

+
+
+
+
+
+
+
+
+

@@ -197,10 +191,14 @@

Contact

- + + + + + - - +