Horizontal labels

.gitignore

@@ -0,0 +1 @@
+*.ps1

assets/main.css

@@ -46,6 +46,21 @@ ul {
    bottom: 30px;
    right: 30px;
 }
+.subDivisions {
+  background-color: rgba(255,255,255,0.2);
+  padding: 0.2em;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.subDivisions label {
+  width: 150px !important;
+}
+.subDivisions > span.fd-slider {
+  width: 80px !important;
+}
+.subDivisions > input {
+  width: 80px !important;
+}
 a {
   color: #333;
 }
@@ -64,10 +79,13 @@ label {
   font-size: 14px;
   vertical-align: top;
 }
-.opts label {
+.opts label:not(.omit) {
   line-height: 25px;
   width: 80px;
 }
+.omit{
+  width: 40px;
+}
 span.fd-slider {
   vertical-align: top;
   display: inline-block;
@@ -135,25 +153,38 @@ h3 {
   background: #f9f9f9; position: relative;
   color: #fff;
   float: left;
-  width: 280px;
-  height: 280px;
+  width: 380px;
+  height: 320px;
   margin: 0 20px 20px 0;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   clear: both;
 }
 #canvas-preview{
-  width: 280px; top: 100px;
+  width: 380px; top: 100px;
   position: relative;
 }
 #preview-textfield{
   position: absolute; top: 65px; left: 0; right: 0;
   text-align: center; font-size: 2em; font-weight: bold;
   color: black; font-family: 'Amaranth', sans-serif;
 }
+#auto-animator {
+  position: absolute; top: 320px; left: 0; right: 0;
+  text-align: left; font-size: 2em; font-weight: bold;
+  color: black; font-family: 'Amaranth', sans-serif;
+}
+#auto-animator label{
+  width: 200px;
+  vertical-align: baseline;
+}  
+.reset {
+  top: 65px !important; 
+  font-size: 2em;
+}
 .donut #preview-textfield{
-  top: 140px; font-size: 1.3em;
+  top: 180px; font-size: 1.3em;
 }
 .donut #opts-donut{
   display: block;

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "gauge.js",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "main": [
     "dist/gauge.js",
     "dist/gauge.min.js",

dist/gauge.coffee

@@ -168,6 +168,9 @@ class AnimatedText extends ValueUpdater
 		@value = 1 * value
 
 	constructor: (@elem, @text=false) ->
+		super()
+		if @elem is undefined
+			throw new Error 'The element isn\'t defined.'
 		@value = 1 * @elem.innerHTML
 		if @text
 			@value = 0
@@ -189,6 +192,9 @@ class GaugePointer extends ValueUpdater
 	displayedValue: 0
 	value: 0
 	options:
+		pointerType: "triangle" # triangle / line
+		pointerEnd: "butt" # butt / round / square
+		hideCentre: false
 		strokeWidth: 0.035
 		length: 0.1
 		color: "#000000"
@@ -198,6 +204,9 @@ class GaugePointer extends ValueUpdater
 	img: null
 
 	constructor: (@gauge) ->
+		#super()
+		if @gauge is undefined
+			throw new Error 'The element isn\'t defined.'
 		@ctx = @gauge.ctx
 		@canvas = @gauge.canvas
 		super(false, false)
@@ -206,6 +215,7 @@ class GaugePointer extends ValueUpdater
 	setOptions: (options=null) ->
 		@options = mergeObjects(@options, options)
 		@length = 2*@gauge.radius * @gauge.options.radiusScale * @options.length
+		@pointerEnd = @options.pointerEnd || "butt"
 		@strokeWidth = @canvas.height * @options.strokeWidth
 		@maxValue = @gauge.maxValue
 		@minValue = @gauge.minValue
@@ -227,17 +237,26 @@ class GaugePointer extends ValueUpdater
 		endX = Math.round(@strokeWidth * Math.cos(angle + Math.PI/2))
 		endY = Math.round(@strokeWidth * Math.sin(angle + Math.PI/2))
 
-		@ctx.fillStyle = @options.color
-		@ctx.beginPath()
-
-		@ctx.arc(0, 0, @strokeWidth, 0, Math.PI*2, true)
-		@ctx.fill()
-
-		@ctx.beginPath()
-		@ctx.moveTo(startX, startY)
-		@ctx.lineTo(x, y)
-		@ctx.lineTo(endX, endY)
-		@ctx.fill()
+		if(!@options.hideCentre)
+			@ctx.beginPath()
+			@ctx.fillStyle = @options.color
+			@ctx.arc(0, 0, @strokeWidth, 0, Math.PI*2, false)
+			@ctx.fill()
+
+		if(@options.pointerType == "triangle")
+			@ctx.beginPath()
+			@ctx.moveTo(startX, startY)
+			@ctx.lineTo(x, y)
+			@ctx.lineTo(endX, endY)
+			@ctx.fill()
+		else
+			@ctx.beginPath()
+			@ctx.lineCap = @pointerEnd
+			@ctx.strokeStyle = @options.color
+			@ctx.lineWidth = @strokeWidth
+			@ctx.moveTo(0, 0)
+			@ctx.lineTo(x, y)
+			@ctx.stroke()
 
 		if @img
 			imgX = Math.round(@img.width * @options.iconScale)
@@ -286,7 +305,11 @@ class Gauge extends BaseGauge
 		colorStop: undefined
 		gradientType: 0       	# 0 : radial, 1 : linear
 		strokeColor: "#e0e0e0"
+		labelHoriz: false
 		pointer:
+			pointerType: "triangle"
+			pointerEnd: "butt"
+			hideCenter: false
 			length: 0.8
 			strokeWidth: 0.035
 			iconScale: 1.0
@@ -308,9 +331,10 @@ class Gauge extends BaseGauge
 		w = @canvas.clientWidth;
 		@canvas.height = h;
 		@canvas.width = w;
+
 		@gp = [new GaugePointer(@)]
 		@setOptions()
-		@render()
+
 
 	setOptions: (options=null) ->
 		super(options)
@@ -323,10 +347,11 @@ class Gauge extends BaseGauge
 		@lineWidth = @availableHeight * @options.lineWidth # .2 - .7
 		@radius = (@availableHeight - @lineWidth/2) / (1.0 + @extraPadding)
 		@ctx.clearRect(0, 0, @canvas.width, @canvas.height)
-		# @render()
+
 		for gauge in @gp
 			gauge.setOptions(@options.pointer)
 			gauge.render()
+		@render()
 		return @
 
 	configPercentColors: () ->
@@ -419,36 +444,114 @@ class Gauge extends BaseGauge
 		font = staticLabels.font or "10px Times"
 		re = /\d+\.?\d?/
 		match = font.match(re)[0]
-		rest = font.slice(match.length);
-		fontsize = parseFloat(match) * this.displayScale;
-		@ctx.font = fontsize + rest;
-		@ctx.fillStyle = staticLabels.color || "#000000";
-
+		rest = font.slice(match.length)
+		fontsize = parseFloat(match) * this.displayScale
+		labelHoriz = @options.labelHoriz
+		@ctx.font = fontsize + rest
+		@ctx.fillStyle = staticLabels.color || "#000000"
+
 		@ctx.textBaseline = "bottom"
 		@ctx.textAlign = "center"
+
 		for value in staticLabels.labels
-			# Draw labels depending on limitMin/Max
-			if (not @options.limitMin or value >= @minValue) and (not @options.limitMax or value <= @maxValue)
-				rotationAngle = @getAngle(value) - 3*Math.PI/2
-				@ctx.rotate(rotationAngle)
-				@ctx.fillText(formatNumber(value, staticLabels.fractionDigits), 0, -radius - @lineWidth/2)
-				@ctx.rotate(-rotationAngle)
+			if (value.label != undefined)
+				# Draw labels depending on limitMin/Max
+				if (not @options.limitMin or value >= @minValue) and (not @options.limitMax or value <= @maxValue)
+					font = value.font || staticLabels.font
+					match = font.match(re)[0]
+					rest = font.slice(match.length)
+					fontsize = parseFloat(match) * this.displayScale
+					@ctx.font = fontsize + rest
+					rotationAngle = @getAngle(value.label) - 3 * Math.PI / 2
+					@ctx.rotate(rotationAngle)
+					if(labelHoriz == true)
+						# translate to position then render horizontal then reset
+						offset = (-radius - @lineWidth / 2) * (1.01 + (fontsize / 100)) + (value.label.toString().length / 20)
+						console.log(offset, value.label, fontsize)
+						@ctx.translate(0, offset)
+						@ctx.rotate(-rotationAngle)
+						@ctx.fillText(formatNumber(value.label, staticLabels.fractionDigits), 0, 0)
+						@ctx.rotate(rotationAngle)
+						@ctx.translate(0, -offset)
+					else
+						@ctx.fillText(formatNumber(value.label, staticLabels.fractionDigits), 0, -radius - @lineWidth / 2)
+
+					@ctx.rotate(-rotationAngle)
+			else
+				# Draw labels depending on limitMin/Max
+				if (not @options.limitMin or value >= @minValue) and (not @options.limitMax or value <= @maxValue)
+					rotationAngle = @getAngle(value) - 3 * Math.PI / 2
+					@ctx.rotate(rotationAngle)
+					if(labelHoriz == true)
+						offset = (-radius - @lineWidth / 2) * (1.01 + (fontsize / 100)) + (value.toString().length / 20)
+						@ctx.translate(0, offset)
+						@ctx.rotate(-rotationAngle)
+						@ctx.fillText(formatNumber(value, staticLabels.fractionDigits), 0, 0)
+						@ctx.rotate(rotationAngle)
+						@ctx.translate(0, -offset)
+					else
+						@ctx.fillText(formatNumber(value, staticLabels.fractionDigits), 0, -radius - @lineWidth / 2)
+					@ctx.rotate(-rotationAngle)
+
 		@ctx.restore()
 
+	renderTicks: (ticksOptions, w, h, radius) ->
+		if ticksOptions != {}
+			divisionCount = ticksOptions.divisions || 0
+			subdivisionCount = ticksOptions.subDivisions || 0
+			divColor = ticksOptions.divColor || '#fff'
+			subColor = ticksOptions.subColor || '#fff'
+			divLength = ticksOptions.divLength || 0.7; # default
+			subLength = ticksOptions.subLength || 0.2; # default
+			range = parseFloat(@maxValue) - parseFloat(@minValue) # total value range
+			rangeDivisions = parseFloat(range) / parseFloat(ticksOptions.divisions) # get division step
+			subDivisions = parseFloat(rangeDivisions) / parseFloat(ticksOptions.subDivisions)
+			currentDivision = parseFloat(@minValue)
+			currentSubDivision = 0.0 + subDivisions
+			lineWidth = range / 400 # base
+			divWidth = lineWidth * (ticksOptions.divWidth || 1)
+			subWidth = lineWidth * (ticksOptions.subWidth || 1)
+
+			for t in [0...divisionCount + 1] by 1
+				@ctx.lineWidth = @lineWidth * divLength
+				scaleMutate = (@lineWidth / 2) * ( 1 - divLength)
+				tmpRadius = (@radius * @options.radiusScale) + scaleMutate
+
+				@ctx.strokeStyle = divColor
+				@ctx.beginPath()
+				@ctx.arc(0, 0, tmpRadius, @getAngle(currentDivision - divWidth), @getAngle(currentDivision + divWidth), false)
+				@ctx.stroke()
+
+				currentSubDivision = currentDivision + subDivisions
+				currentDivision += rangeDivisions
+				if t != ticksOptions.divisions && subdivisionCount > 0 # if its not the last marker then draw subs
+					for st in [0...subdivisionCount - 1] by 1
+						@ctx.lineWidth = @lineWidth * subLength
+						scaleMutate = (@lineWidth / 2) * ( 1 - subLength)
+						tmpRadius = (@radius * @options.radiusScale) + scaleMutate
+
+						@ctx.strokeStyle = subColor
+						@ctx.beginPath()
+						@ctx.arc(0, 0, tmpRadius, @getAngle(currentSubDivision - subWidth), @getAngle(currentSubDivision + subWidth), false)
+						@ctx.stroke()
+						currentSubDivision += subDivisions
+
+			#@ctx.restore()
+
 	render: () ->
 		# Draw using canvas
 		w = @canvas.width / 2
-		h = @canvas.height*@paddingTop + @availableHeight - (@radius + @lineWidth/2)*@extraPadding
+		#h = (@canvas.height * @paddingTop + @availableHeight) - ((@radius + @lineWidth / 2) * @extraPadding)
+		h = (@canvas.height * @paddingTop + @availableHeight) - ((@radius + @lineWidth /2) * @extraPadding)
 		displayedAngle = @getAngle(@displayedValue)
 		if @textField
 			@textField.render(@)
 
 		@ctx.lineCap = "butt"
-
 		radius = @radius * @options.radiusScale
 		if (@options.staticLabels)
 			@renderStaticLabels(@options.staticLabels, w, h, radius)
-
+		
 		if (@options.staticZones)
 			@ctx.save()
 			@ctx.translate(w, h)
@@ -461,11 +564,16 @@ class Gauge extends BaseGauge
 				max = zone.max
 				if @options.limitMax and max > @maxValue
 					max = @maxValue
+				tmpRadius = @radius
+				if (zone.height) 
+					@ctx.lineWidth = @lineWidth * zone.height
+					scaleMutate = (@lineWidth / 2) * (zone.offset || 1 - zone.height)
+					tmpRadius = (@radius * @options.radiusScale) + scaleMutate
+
 				@ctx.strokeStyle = zone.strokeStyle
 				@ctx.beginPath()
-				@ctx.arc(0, 0, radius, @getAngle(min), @getAngle(max), false)
+				@ctx.arc(0, 0, tmpRadius, @getAngle(min), @getAngle(max), false)
 				@ctx.stroke()
-			@ctx.restore()
 
 		else
 			if @options.customFillStyle != undefined
@@ -492,9 +600,16 @@ class Gauge extends BaseGauge
 			@ctx.beginPath()
 			@ctx.arc(w, h, radius, displayedAngle, (2 - @options.angle) * Math.PI, false)
 			@ctx.stroke()
+			@ctx.save()
+			@ctx.translate(w, h)
+
+		if (@options.renderTicks)
+			@renderTicks(@options.renderTicks, w, h, radius)
 
-
+
+		@ctx.restore()
 		# Draw pointers from (w, h)
+
 		@ctx.translate(w, h)
 		for gauge in @gp
 			gauge.update(true)