active_frontend 12.2.0 → 12.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8bf89ffaf09c97711f1ec992866a36da5875debe
-  data.tar.gz: 508213e124646fbbb9010ff188493dbdd9479231
+  metadata.gz: 46f0d1ff12912c504835664509225a2d3ea926c9
+  data.tar.gz: 89a6501189dd5b9e91b1786c93b8e01c65213209
 SHA512:
-  metadata.gz: edbae37d4faed2ed0981766ad4ac1a78b758d3eea244f53dba297cbb7297589e37d7cd39a695e03b7a30cafc2b8fbdb4bd604c931f357d827b499ae2cd70d6d1
-  data.tar.gz: 306123a9b688d7b65860d79f6cb1d8dfde74461fb1b83be37e210f861a55480ed7042e8759ad895d88532d05bfa728ee17ebe9d644960813192bca0a123e2b8d
+  metadata.gz: 6599a6a5b57196ee8e068d59e782d4cc482420b689b40b6d83d0a7ba6af055b0da74c34f2b95f60bade355df248c4b0e462af153530f54470eaf1762dcd8f4bc
+  data.tar.gz: 7bef3c79841a5f081cf44432ac0b85c839c8a1dcea778a9f91d0edc96bcb74958a4d42b4290ea3faf02e9f3c3b78dabaab723c9e496d3ca7905a0ebf11d7471d

data/lib/active_frontend/version.rb

@@ -1,3 +1,3 @@
 module ActiveFrontend
-  VERSION = "12.2.0"
+  VERSION = "12.3.0"
 end

data/vendor/assets/javascripts/_affix.js

@@ -12,14 +12,14 @@
       .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
 
     this.$element     = $(element)
-    this.affixed      =
-    this.unpin        =
+    this.affixed      = null
+    this.unpin        = null
     this.pinnedOffset = null
 
     this.checkPosition()
   }
 
-  Affix.VERSION  = '3.3.2'
+  Affix.VERSION  = '3.3.6'
 
   Affix.RESET    = 'affix affix-top affix-bottom'
 
@@ -69,7 +69,7 @@
     var offset       = this.options.offset
     var offsetTop    = offset.top
     var offsetBottom = offset.bottom
-    var scrollHeight = $('body').height()
+    var scrollHeight = Math.max($(document).height(), $(document.body).height())
 
     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
     if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.$element)

data/vendor/assets/javascripts/_alert.js

@@ -9,7 +9,7 @@
     $(el).on('click', dismiss, this.close)
   }
 
-  Alert.VERSION = '3.3.2'
+  Alert.VERSION = '3.3.6'
 
   Alert.TRANSITION_DURATION = 150
 

data/vendor/assets/javascripts/_animation.js

@@ -9,7 +9,7 @@
     this.$element = $(element)
   };
 
-  Animation.VERSION  = '3.3.2'
+  Animation.VERSION  = '3.3.6'
 
   Animation.TRANSITION_END = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
 
@@ -35,7 +35,7 @@
       animation = function(element) {
         if (settings.infinite === true) {
           settings.klass += ' infinite';
-        }
+        };
 
         setDelay(element);
         setDuration(element);
@@ -51,10 +51,10 @@
       unhide = function(element) {
         if (element.css('visibility') === 'hidden') {
           element.css('visibility', 'visible');
-        }
+        };
         if (element.is(':hidden')) {
           return element.show();
-        }
+        };
       };
 
       removeClass = function(element) {
@@ -63,29 +63,29 @@
 
       setDelay = function(element) {
         return element.css({
-          '-webkit-animation-delay': settings.delay,
-          '-moz-animation-delay':    settings.delay,
-          '-o-animation-delay':      settings.delay,
-          'animation-delay':         settings.delay
+          '-webkit-animation-delay' : settings.delay,
+             '-moz-animation-delay' : settings.delay,
+               '-o-animation-delay' : settings.delay,
+                  'animation-delay' : settings.delay
         });
       };
 
       setDuration = function(element) {
         return element.css({
-          '-webkit-animation-duration': settings.duration,
-          '-moz-animation-duration':    settings.duration,
-          '-o-animation-duration':      settings.duration,
-          'animation-duration':         settings.duration
+          '-webkit-animation-duration' : settings.duration,
+             '-moz-animation-duration' : settings.duration,
+               '-o-animation-duration' : settings.duration,
+                  'animation-duration' : settings.duration
         });
       };
 
       callback = function(element) {
         if (settings.infinite === false) {
           removeClass(element);
-        }
+        };
         if (typeof settings.callback === 'function') {
           return settings.callback.call(element);
-        }
+        };
       };
 
       complete = function(element) {

data/vendor/assets/javascripts/_button.js

@@ -10,7 +10,7 @@
     this.isLoading = false
   }
 
-  Button.VERSION  = '3.3.2'
+  Button.VERSION  = '3.3.6'
 
   Button.DEFAULTS = {
     loadingText: 'loading...'

data/vendor/assets/javascripts/_carousel.js

@@ -8,10 +8,10 @@
     this.$element    = $(element)
     this.$indicators = this.$element.find('.carousel-indicators')
     this.options     = options
-    this.paused      =
-    this.sliding     =
-    this.interval    =
-    this.$active     =
+    this.paused      = null
+    this.sliding     = null
+    this.interval    = null
+    this.$active     = null
     this.$items      = null
 
     this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
@@ -21,7 +21,7 @@
       .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
   }
 
-  Carousel.VERSION  = '3.3.2'
+  Carousel.VERSION  = '3.3.6'
 
   Carousel.TRANSITION_DURATION = 600
 

data/vendor/assets/javascripts/_chart.js

@@ -14,8 +14,23 @@
     this.ctx = context;
 
     //Variables global to the chart
-    var width = this.width = context.canvas.width;
-    var height = this.height = context.canvas.height;
+    var computeDimension = function(element,dimension)
+    {
+      if (element['offset'+dimension])
+      {
+        return element['offset'+dimension];
+      }
+      else
+      {
+        return document.defaultView.getComputedStyle(element).getPropertyValue(dimension);
+      }
+    };
+
+    var width = this.width = computeDimension(context.canvas,'Width') || context.canvas.width;
+    var height = this.height = computeDimension(context.canvas,'Height') || context.canvas.height;
+
+    width = this.width = context.canvas.width;
+    height = this.height = context.canvas.height;
     this.aspectRatio = this.width / this.height;
     //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
     helpers.retinaScale(this);
@@ -67,7 +82,7 @@
       scaleBeginAtZero: false,
 
       // String - Scale label font declaration for the scale label
-      scaleFontFamily: "'Gotham', 'Gotham Round', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+      scaleFontFamily: "'Gotham Round', 'Gotham', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
       // Number - Scale label font size in pixels
       scaleFontSize: 11,
@@ -87,6 +102,9 @@
       // Boolean - Determines whether to draw tooltips on the canvas or not - attaches events to touchmove & mousemove
       showTooltips: true,
 
+      // Boolean - Determines whether to draw built-in tooltip or call custom tooltip function
+      customTooltips: false,
+
       // Array - Array of string names to attach tooltip events
       tooltipEvents: ["mousemove", "touchstart", "touchmove", "mouseout"],
 
@@ -94,7 +112,7 @@
       tooltipFillColor: "rgba(16,18,25,1)",
 
       // String - Tooltip label font declaration for the scale label
-      tooltipFontFamily: "'Gotham', 'Gotham Round', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+      tooltipFontFamily: "'Gotham Round', 'Gotham', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
       // Number - Tooltip label font size in pixels
       tooltipFontSize: 11,
@@ -106,7 +124,7 @@
       tooltipFontColor: "rgba(255,255,255,1)",
 
       // String - Tooltip title font declaration for the scale label
-      tooltipTitleFontFamily: "'Gotham', 'Gotham Round', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+      tooltipTitleFontFamily: "'Gotham Round', 'Gotham', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
       // Number - Tooltip title font size in pixels
       tooltipTitleFontSize: 11,
@@ -117,6 +135,9 @@
       // String - Tooltip title font colour
       tooltipTitleFontColor: "rgba(255,255,255,1)",
 
+      // String - Tooltip title template
+      tooltipTitleTemplate: "<%= label %>",
+
       // Number - pixel width of padding around tooltip text
       tooltipYPadding: 8,
 
@@ -141,6 +162,38 @@
       // String - Colour behind the legend colour block
       multiTooltipKeyBackground: 'rgba(255,255,255,1)',
 
+      // Array - A list of colors to use as the defaults
+      segmentColorDefault: [
+        "rgba(151,212,19,1)",
+        "rgba(75,173,8,1)",
+        "rgba(59,187,178,1)",
+        "rgba(0,102,255,1)",
+        "rgba(86,21,237,1)",
+        "rgba(115,24,242,1)",
+        "rgba(255,0,102,1)",
+        "rgba(240,35,17,1)",
+        "rgba(255,102,0,1)",
+        "rgba(255,209,0,1)",
+        "rgba(35,40,55,1)",
+        "rgba(106,122,138,1)"
+      ],
+
+      // Array - A list of highlight colors to use as the defaults
+      segmentHighlightColorDefaults: [
+        "rgba(151,212,19,0.1)",
+        "rgba(75,173,8,0.1)",
+        "rgba(59,187,178,0.1)",
+        "rgba(0,102,255,0.1)",
+        "rgba(86,21,237,0.1)",
+        "rgba(115,24,242,0.1)",
+        "rgba(255,0,102,0.1)",
+        "rgba(240,35,17,0.1)",
+        "rgba(255,102,0,0.1)",
+        "rgba(255,209,0,0.1)",
+        "rgba(35,40,55,0.1)",
+        "rgba(106,122,138,0.1)"
+      ],
+
       // Function - Will fire on animation progression.
       onAnimationProgress: function(){},
 
@@ -177,14 +230,18 @@
     clone = helpers.clone = function(obj){
       var objClone = {};
       each(obj,function(value,key){
-        if (obj.hasOwnProperty(key)) objClone[key] = value;
+        if (obj.hasOwnProperty(key)){
+          objClone[key] = value;
+        }
       });
       return objClone;
     },
     extend = helpers.extend = function(base){
       each(Array.prototype.slice.call(arguments,1), function(extensionObject) {
         each(extensionObject,function(value,key){
-          if (extensionObject.hasOwnProperty(key)) base[key] = value;
+          if (extensionObject.hasOwnProperty(key)){
+            base[key] = value;
+          }
         });
       });
       return base;
@@ -206,6 +263,41 @@
         return -1;
       }
     },
+    where = helpers.where = function(collection, filterCallback){
+      var filtered = [];
+
+      helpers.each(collection, function(item){
+        if (filterCallback(item)){
+          filtered.push(item);
+        }
+      });
+
+      return filtered;
+    },
+    findNextWhere = helpers.findNextWhere = function(arrayToSearch, filterCallback, startIndex){
+      // Default to start of the array
+      if (!startIndex){
+        startIndex = -1;
+      }
+      for (var i = startIndex + 1; i < arrayToSearch.length; i++) {
+        var currentItem = arrayToSearch[i];
+        if (filterCallback(currentItem)){
+          return currentItem;
+        }
+      }
+    },
+    findPreviousWhere = helpers.findPreviousWhere = function(arrayToSearch, filterCallback, startIndex){
+      // Default to end of the array
+      if (!startIndex){
+        startIndex = arrayToSearch.length;
+      }
+      for (var i = startIndex - 1; i >= 0; i--) {
+        var currentItem = arrayToSearch[i];
+        if (filterCallback(currentItem)){
+          return currentItem;
+        }
+      }
+    },
     inherits = helpers.inherits = function(extensions){
       //Basic javascript inheritance based on the model created in Backbone.js
       var parent = this;
@@ -232,9 +324,9 @@
     })(),
     warn = helpers.warn = function(str){
       //Method for warning of errors
-      if (window.console && typeof window.console.warn == "function") console.warn(str);
+      if (window.console && typeof window.console.warn === "function") console.warn(str);
     },
-    amd = helpers.amd = (typeof root.define == 'function' && root.define.amd),
+    amd = helpers.amd = (typeof define === 'function' && define.amd),
     //-- Math methods
     isNumber = helpers.isNumber = function(n){
       return !isNaN(parseFloat(n)) && isFinite(n);
@@ -260,7 +352,20 @@
     },
     getDecimalPlaces = helpers.getDecimalPlaces = function(num){
       if (num%1!==0 && isNumber(num)){
-        return num.toString().split(".")[1].length;
+        var s = num.toString();
+        if(s.indexOf("e-") < 0){
+          // no exponent, e.g. 0.01
+          return s.split(".")[1].length;
+        }
+        else if(s.indexOf(".") < 0) {
+          // no decimal point, e.g. 1e-9
+          return parseInt(s.split("e-")[1]);
+        }
+        else {
+          // exponent and decimal point, e.g. 1.23e-9
+          var parts = s.split(".")[1].split("e-");
+          return parts[0].length + parseInt(parts[1]);
+        }
       }
       else {
         return 0;
@@ -319,10 +424,15 @@
         maxSteps = Math.floor(drawingSize/(textSize * 1.5)),
         skipFitting = (minSteps >= maxSteps);
 
-      var maxValue = max(valuesArray),
-        minValue = min(valuesArray);
+      // Filter out null values since these would min() to zero
+      var values = [];
+      each(valuesArray, function( v ){
+        v == null || values.push( v );
+      });
+      var minValue = min(values),
+          maxValue = max(values);
 
-      // We need some degree of seperation here to calculate the scales if all the values are the same
+      // We need some degree of separation here to calculate the scales if all the values are the same
       // Adding/minusing 0.5 will give us a range of 1.
       if (maxValue === minValue){
         maxValue += 0.5;
@@ -395,9 +505,10 @@
     //Templating methods
     //Javascript micro templating by John Resig - source at http://ejohn.org/blog/javascript-micro-templating/
     template = helpers.template = function(templateString, valuesObject){
+
       // If templateString is function rather than string-template - call the function for valuesObject
-      if(templateString instanceof Function)
-      {
+
+      if(templateString instanceof Function){
         return templateString(valuesObject);
       }
 
@@ -436,7 +547,7 @@
     /* jshint ignore:end */
     generateLabels = helpers.generateLabels = function(templateString,numberOfSteps,graphMin,stepValue){
       var labelsArray = new Array(numberOfSteps);
-      if (labelTemplateString){
+      if (templateString){
         each(labelsArray,function(val,index){
           labelsArray[index] = template(templateString,{value: (graphMin + (stepValue*(index+1)))});
         });
@@ -457,7 +568,9 @@
         return -1 * t * (t - 2);
       },
       easeInOutQuad: function (t) {
-        if ((t /= 1 / 2) < 1) return 1 / 2 * t * t;
+        if ((t /= 1 / 2) < 1){
+          return 1 / 2 * t * t;
+        }
         return -1 / 2 * ((--t) * (t - 2) - 1);
       },
       easeInCubic: function (t) {
@@ -467,7 +580,9 @@
         return 1 * ((t = t / 1 - 1) * t * t + 1);
       },
       easeInOutCubic: function (t) {
-        if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t;
+        if ((t /= 1 / 2) < 1){
+          return 1 / 2 * t * t * t;
+        }
         return 1 / 2 * ((t -= 2) * t * t + 2);
       },
       easeInQuart: function (t) {
@@ -477,7 +592,9 @@
         return -1 * ((t = t / 1 - 1) * t * t * t - 1);
       },
       easeInOutQuart: function (t) {
-        if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t;
+        if ((t /= 1 / 2) < 1){
+          return 1 / 2 * t * t * t * t;
+        }
         return -1 / 2 * ((t -= 2) * t * t * t - 2);
       },
       easeInQuint: function (t) {
@@ -487,7 +604,9 @@
         return 1 * ((t = t / 1 - 1) * t * t * t * t + 1);
       },
       easeInOutQuint: function (t) {
-        if ((t /= 1 / 2) < 1) return 1 / 2 * t * t * t * t * t;
+        if ((t /= 1 / 2) < 1){
+          return 1 / 2 * t * t * t * t * t;
+        }
         return 1 / 2 * ((t -= 2) * t * t * t * t + 2);
       },
       easeInSine: function (t) {
@@ -506,60 +625,95 @@
         return (t === 1) ? 1 : 1 * (-Math.pow(2, -10 * t / 1) + 1);
       },
       easeInOutExpo: function (t) {
-        if (t === 0) return 0;
-        if (t === 1) return 1;
-        if ((t /= 1 / 2) < 1) return 1 / 2 * Math.pow(2, 10 * (t - 1));
+        if (t === 0){
+          return 0;
+        }
+        if (t === 1){
+          return 1;
+        }
+        if ((t /= 1 / 2) < 1){
+          return 1 / 2 * Math.pow(2, 10 * (t - 1));
+        }
         return 1 / 2 * (-Math.pow(2, -10 * --t) + 2);
       },
       easeInCirc: function (t) {
-        if (t >= 1) return t;
+        if (t >= 1){
+          return t;
+        }
         return -1 * (Math.sqrt(1 - (t /= 1) * t) - 1);
       },
       easeOutCirc: function (t) {
         return 1 * Math.sqrt(1 - (t = t / 1 - 1) * t);
       },
       easeInOutCirc: function (t) {
-        if ((t /= 1 / 2) < 1) return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
+        if ((t /= 1 / 2) < 1){
+          return -1 / 2 * (Math.sqrt(1 - t * t) - 1);
+        }
         return 1 / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1);
       },
       easeInElastic: function (t) {
         var s = 1.70158;
         var p = 0;
         var a = 1;
-        if (t === 0) return 0;
-        if ((t /= 1) == 1) return 1;
-        if (!p) p = 1 * 0.3;
+        if (t === 0){
+          return 0;
+        }
+        if ((t /= 1) == 1){
+          return 1;
+        }
+        if (!p){
+          p = 1 * 0.3;
+        }
         if (a < Math.abs(1)) {
           a = 1;
           s = p / 4;
-        } else s = p / (2 * Math.PI) * Math.asin(1 / a);
+        } else{
+          s = p / (2 * Math.PI) * Math.asin(1 / a);
+        }
         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
       },
       easeOutElastic: function (t) {
         var s = 1.70158;
         var p = 0;
         var a = 1;
-        if (t === 0) return 0;
-        if ((t /= 1) == 1) return 1;
-        if (!p) p = 1 * 0.3;
+        if (t === 0){
+          return 0;
+        }
+        if ((t /= 1) == 1){
+          return 1;
+        }
+        if (!p){
+          p = 1 * 0.3;
+        }
         if (a < Math.abs(1)) {
           a = 1;
           s = p / 4;
-        } else s = p / (2 * Math.PI) * Math.asin(1 / a);
+        } else{
+          s = p / (2 * Math.PI) * Math.asin(1 / a);
+        }
         return a * Math.pow(2, -10 * t) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) + 1;
       },
       easeInOutElastic: function (t) {
         var s = 1.70158;
         var p = 0;
         var a = 1;
-        if (t === 0) return 0;
-        if ((t /= 1 / 2) == 2) return 1;
-        if (!p) p = 1 * (0.3 * 1.5);
+        if (t === 0){
+          return 0;
+        }
+        if ((t /= 1 / 2) == 2){
+          return 1;
+        }
+        if (!p){
+          p = 1 * (0.3 * 1.5);
+        }
         if (a < Math.abs(1)) {
           a = 1;
           s = p / 4;
-        } else s = p / (2 * Math.PI) * Math.asin(1 / a);
-        if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));
+        } else {
+          s = p / (2 * Math.PI) * Math.asin(1 / a);
+        }
+        if (t < 1){
+          return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p));}
         return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * 1 - s) * (2 * Math.PI) / p) * 0.5 + 1;
       },
       easeInBack: function (t) {
@@ -572,7 +726,9 @@
       },
       easeInOutBack: function (t) {
         var s = 1.70158;
-        if ((t /= 1 / 2) < 1) return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
+        if ((t /= 1 / 2) < 1){
+          return 1 / 2 * (t * t * (((s *= (1.525)) + 1) * t - s));
+        }
         return 1 / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2);
       },
       easeInBounce: function (t) {
@@ -590,7 +746,9 @@
         }
       },
       easeInOutBounce: function (t) {
-        if (t < 1 / 2) return easingEffects.easeInBounce(t * 2) * 0.5;
+        if (t < 1 / 2){
+          return easingEffects.easeInBounce(t * 2) * 0.5;
+        }
         return easingEffects.easeOutBounce(t * 2 - 1) * 0.5 + 1 * 0.5;
       }
     },
@@ -693,21 +851,28 @@
       });
     },
     getMaximumWidth = helpers.getMaximumWidth = function(domNode){
-      var container = domNode.parentNode;
+      var container = domNode.parentNode,
+          padding = parseInt(getStyle(container, 'padding-left')) + parseInt(getStyle(container, 'padding-right'));
       // TODO = check cross browser stuff with this.
-      return container.clientWidth;
+      return container.clientWidth - padding;
     },
     getMaximumHeight = helpers.getMaximumHeight = function(domNode){
-      var container = domNode.parentNode;
+      var container = domNode.parentNode,
+          padding = parseInt(getStyle(container, 'padding-bottom')) + parseInt(getStyle(container, 'padding-top'));
       // TODO = check cross browser stuff with this.
-      return container.clientHeight;
+      return container.clientHeight - padding;
+    },
+    getStyle = helpers.getStyle = function (el, property) {
+      return el.currentStyle ?
+        el.currentStyle[property] :
+        document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
     },
     getMaximumSize = helpers.getMaximumSize = helpers.getMaximumWidth, // legacy support
     retinaScale = helpers.retinaScale = function(chart){
       var ctx = chart.ctx,
         width = chart.canvas.width,
         height = chart.canvas.height;
-      //console.log(width + " x " + height);
+
       if (window.devicePixelRatio) {
         ctx.canvas.style.width = width + "px";
         ctx.canvas.style.height = height + "px";
@@ -775,7 +940,7 @@
     },
     stop : function(){
       // Stops any current animation loop occuring
-      helpers.cancelAnimFrame.call(root, this.animationFrame);
+      Chart.animationService.cancelAnimation(this);
       return this;
     },
     resize : function(callback){
@@ -785,7 +950,7 @@
         newHeight = this.options.maintainAspectRatio ? newWidth / this.chart.aspectRatio : getMaximumHeight(this.chart.canvas);
 
       canvas.width = this.chart.width = newWidth;
-      canvas.height =  this.chart.height = newHeight;
+      canvas.height = this.chart.height = newHeight;
 
       retinaScale(this.chart);
 
@@ -799,15 +964,26 @@
       if (reflow){
         this.reflow();
       }
+
       if (this.options.animation && !reflow){
-        helpers.animationLoop(
-          this.draw,
-          this.options.animationSteps,
-          this.options.animationEasing,
-          this.options.onAnimationProgress,
-          this.options.onAnimationComplete,
-          this
-        );
+        var animation = new Chart.Animation();
+        animation.numSteps = this.options.animationSteps;
+        animation.easing = this.options.animationEasing;
+
+        // render function
+        animation.render = function(chartInstance, animationObject) {
+          var easingFunction = helpers.easingEffects[animationObject.easing];
+          var stepDecimal = animationObject.currentStep / animationObject.numSteps;
+          var easeDecimal = easingFunction(stepDecimal);
+
+          chartInstance.draw(easeDecimal, stepDecimal, animationObject.currentStep);
+        };
+
+        // user events
+        animation.onAnimationProgress = this.options.onAnimationProgress;
+        animation.onAnimationComplete = this.options.onAnimationComplete;
+
+        Chart.animationService.addAnimation(this, animation);
       }
       else{
         this.draw();
@@ -821,6 +997,21 @@
     destroy : function(){
       this.clear();
       unbindEvents(this, this.events);
+      var canvas = this.chart.canvas;
+
+      // Reset canvas height/width attributes starts a fresh with the canvas context
+      canvas.width = this.chart.width;
+      canvas.height = this.chart.height;
+
+      // < IE9 doesn't support removeProperty
+      if (canvas.style.removeProperty) {
+        canvas.style.removeProperty('width');
+        canvas.style.removeProperty('height');
+      } else {
+        canvas.style.removeAttribute('width');
+        canvas.style.removeAttribute('height');
+      }
+
       delete Chart.instances[this.id];
     },
     showTooltip : function(ChartElements, forceRedraw){
@@ -850,6 +1041,9 @@
         this.activeElements = ChartElements;
       }
       this.draw();
+      if(this.options.customTooltips){
+        this.options.customTooltips(false);
+      }
       if (ChartElements.length > 0){
         // If we have multiple datasets, show a MultiTooltip for all of the data points at that index
         if (this.datasets && this.datasets.length > 1) {
@@ -878,7 +1072,7 @@
                 yMin;
               helpers.each(this.datasets, function(dataset){
                 dataCollection = dataset.points || dataset.bars || dataset.segments;
-                if (dataCollection[dataIndex]){
+                if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()){
                   Elements.push(dataCollection[dataIndex]);
                 }
               });
@@ -928,9 +1122,10 @@
             labels: tooltipLabels,
             legendColors: tooltipColors,
             legendColorBackground : this.options.multiTooltipKeyBackground,
-            title: ChartElements[0].label,
+            title: template(this.options.tooltipTitleTemplate,ChartElements[0]),
             chart: this.chart,
-            ctx: this.chart.ctx
+            ctx: this.chart.ctx,
+            custom: this.options.customTooltips
           }).draw();
 
         } else {
@@ -949,7 +1144,8 @@
               caretHeight: this.options.tooltipCaretSize,
               cornerRadius: this.options.tooltipCornerRadius,
               text: template(this.options.tooltipTemplate, Element),
-              chart: this.chart
+              chart: this.chart,
+              custom: this.options.customTooltips
             }).draw();
           }, this);
         }
@@ -1042,6 +1238,9 @@
         x : this.x,
         y : this.y
       };
+    },
+    hasValue: function(){
+      return isNumber(this.value);
     }
   });
 
@@ -1049,8 +1248,8 @@
 
 
   Chart.Point = Chart.Element.extend({
-    display : true,
-    inRange : function(chartX,chartY){
+    display: true,
+    inRange: function(chartX,chartY){
       var hitDetectionRange = this.hitDetectionRadius + this.radius;
       return ((Math.pow(chartX-this.x, 2)+Math.pow(chartY-this.y, 2)) < Math.pow(hitDetectionRange,2));
     },
@@ -1072,7 +1271,6 @@
       }
 
 
-
       //Quick debug for bezier curve splining
       //Highlights control points and the line between them.
       //Handy for dev - stripped in the min version.
@@ -1089,6 +1287,7 @@
       // ctx.fill();
 
       // ctx.moveTo(this.controlPoints.inner.x,this.controlPoints.inner.y);
+      // ctx.lineTo(this.x, this.y);
       // ctx.lineTo(this.controlPoints.outer.x,this.controlPoints.outer.y);
       // ctx.stroke();
 
@@ -1107,9 +1306,18 @@
         y: chartY
       });
 
+      // Normalize all angles to 0 - 2*PI (0 - 360°)
+      var pointRelativeAngle = pointRelativePosition.angle % (Math.PI * 2),
+          startAngle = (Math.PI * 2 + this.startAngle) % (Math.PI * 2),
+          endAngle = (Math.PI * 2 + this.endAngle) % (Math.PI * 2) || 360;
+
+      // Calculate wether the pointRelativeAngle is between the start and the end angle
+      var betweenAngles = (endAngle < startAngle) ?
+        pointRelativeAngle <= endAngle || pointRelativeAngle >= startAngle:
+        pointRelativeAngle >= startAngle && pointRelativeAngle <= endAngle;
+
       //Check if within the range of the open/close angle
-      var betweenAngles = (pointRelativePosition.angle >= this.startAngle && pointRelativePosition.angle <= this.endAngle),
-        withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius);
+      var withinRadius = (pointRelativePosition.distance >= this.innerRadius && pointRelativePosition.distance <= this.outerRadius);
 
       return (betweenAngles && withinRadius);
       //Ensure within the outside of the arc centre, but inside arc outer
@@ -1130,9 +1338,9 @@
 
       ctx.beginPath();
 
-      ctx.arc(this.x, this.y, this.outerRadius, this.startAngle, this.endAngle);
+      ctx.arc(this.x, this.y, this.outerRadius < 0 ? 0 : this.outerRadius, this.startAngle, this.endAngle);
 
-      ctx.arc(this.x, this.y, this.innerRadius, this.endAngle, this.startAngle, true);
+            ctx.arc(this.x, this.y, this.innerRadius < 0 ? 0 : this.innerRadius, this.endAngle, this.startAngle, true);
 
       ctx.closePath();
       ctx.strokeStyle = this.strokeColor;
@@ -1191,6 +1399,16 @@
     }
   });
 
+  Chart.Animation = Chart.Element.extend({
+    currentStep: null, // the current animation step
+    numSteps: 60, // default number of steps
+    easing: "", // the easing to use for this animation
+    render: null, // render function used by the animation service
+
+    onAnimationProgress: null, // user specified callback to fire on each step of the animation
+    onAnimationComplete: null, // user specified callback to fire when the animation finishes
+  });
+
   Chart.Tooltip = Chart.Element.extend({
     draw : function(){
 
@@ -1202,7 +1420,7 @@
       this.yAlign = "above";
 
       //Distance between the actual element.y position and the start of the tooltip caret
-      var caretPadding = 2;
+      var caretPadding = this.caretPadding = 2;
 
       var tooltipWidth = ctx.measureText(this.text).width + 2*this.xPadding,
         tooltipRectHeight = this.fontSize + 2*this.yPadding,
@@ -1224,47 +1442,53 @@
 
       ctx.fillStyle = this.fillColor;
 
-      switch(this.yAlign)
-      {
-      case "above":
-        //Draw a caret above the x/y
-        ctx.beginPath();
-        ctx.moveTo(this.x,this.y - caretPadding);
-        ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
-        ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
-        ctx.closePath();
-        ctx.fill();
-        break;
-      case "below":
-        tooltipY = this.y + caretPadding + this.caretHeight;
-        //Draw a caret below the x/y
-        ctx.beginPath();
-        ctx.moveTo(this.x, this.y + caretPadding);
-        ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
-        ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
-        ctx.closePath();
-        ctx.fill();
-        break;
+      // Custom Tooltips
+      if(this.custom){
+        this.custom(this);
       }
+      else{
+        switch(this.yAlign)
+        {
+        case "above":
+          //Draw a caret above the x/y
+          ctx.beginPath();
+          ctx.moveTo(this.x,this.y - caretPadding);
+          ctx.lineTo(this.x + this.caretHeight, this.y - (caretPadding + this.caretHeight));
+          ctx.lineTo(this.x - this.caretHeight, this.y - (caretPadding + this.caretHeight));
+          ctx.closePath();
+          ctx.fill();
+          break;
+        case "below":
+          tooltipY = this.y + caretPadding + this.caretHeight;
+          //Draw a caret below the x/y
+          ctx.beginPath();
+          ctx.moveTo(this.x, this.y + caretPadding);
+          ctx.lineTo(this.x + this.caretHeight, this.y + caretPadding + this.caretHeight);
+          ctx.lineTo(this.x - this.caretHeight, this.y + caretPadding + this.caretHeight);
+          ctx.closePath();
+          ctx.fill();
+          break;
+        }
 
-      switch(this.xAlign)
-      {
-      case "left":
-        tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
-        break;
-      case "right":
-        tooltipX = this.x - (this.cornerRadius + this.caretHeight);
-        break;
-      }
+        switch(this.xAlign)
+        {
+        case "left":
+          tooltipX = this.x - tooltipWidth + (this.cornerRadius + this.caretHeight);
+          break;
+        case "right":
+          tooltipX = this.x - (this.cornerRadius + this.caretHeight);
+          break;
+        }
 
-      drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);
+        drawRoundedRectangle(ctx,tooltipX,tooltipY,tooltipWidth,tooltipRectHeight,this.cornerRadius);
 
-      ctx.fill();
+        ctx.fill();
 
-      ctx.fillStyle = this.textColor;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
+        ctx.fillStyle = this.textColor;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(this.text, tooltipX + tooltipWidth/2, tooltipY + tooltipRectHeight/2);
+      }
     }
   });
 
@@ -1274,7 +1498,8 @@
 
       this.titleFont = fontString(this.titleFontSize,this.titleFontStyle,this.titleFontFamily);
 
-      this.height = (this.labels.length * this.fontSize) + ((this.labels.length-1) * (this.fontSize/2)) + (this.yPadding*2) + this.titleFontSize *1.5;
+      this.titleHeight = this.title ? this.titleFontSize * 1.5 : 0;
+      this.height = (this.labels.length * this.fontSize) + ((this.labels.length-1) * (this.fontSize/2)) + (this.yPadding*2) + this.titleHeight;
 
       this.ctx.font = this.titleFont;
 
@@ -1289,7 +1514,6 @@
       var halfHeight = this.height/2;
 
       //Check to ensure the height will fit on the canvas
-      //The three is to buffer form the very
       if (this.y - halfHeight < 0 ){
         this.y = halfHeight;
       } else if (this.y + halfHeight > this.chart.height){
@@ -1311,43 +1535,49 @@
 
       //If the index is zero, we're getting the title
       if (index === 0){
-        return baseLineHeight + this.titleFontSize/2;
+        return baseLineHeight + this.titleHeight / 3;
       } else{
-        return baseLineHeight + ((this.fontSize*1.5*afterTitleIndex) + this.fontSize/2) + this.titleFontSize * 1.5;
+        return baseLineHeight + ((this.fontSize * 1.5 * afterTitleIndex) + this.fontSize / 2) + this.titleHeight;
       }
 
     },
     draw : function(){
-      drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);
-      var ctx = this.ctx;
-      ctx.fillStyle = this.fillColor;
-      ctx.fill();
-      ctx.closePath();
+      // Custom Tooltips
+      if(this.custom){
+        this.custom(this);
+      }
+      else{
+        drawRoundedRectangle(this.ctx,this.x,this.y - this.height/2,this.width,this.height,this.cornerRadius);
+        var ctx = this.ctx;
+        ctx.fillStyle = this.fillColor;
+        ctx.fill();
+        ctx.closePath();
 
-      ctx.textAlign = "left";
-      ctx.textBaseline = "middle";
-      ctx.fillStyle = this.titleTextColor;
-      ctx.font = this.titleFont;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = this.titleTextColor;
+        ctx.font = this.titleFont;
 
-      ctx.fillText(this.title,this.x + this.xPadding, this.getLineHeight(0));
+        ctx.fillText(this.title,this.x + this.xPadding, this.getLineHeight(0));
 
-      ctx.font = this.font;
-      helpers.each(this.labels,function(label,index){
-        ctx.fillStyle = this.textColor;
-        ctx.fillText(label,this.x + this.xPadding + this.fontSize + 3, this.getLineHeight(index + 1));
+        ctx.font = this.font;
+        helpers.each(this.labels,function(label,index){
+          ctx.fillStyle = this.textColor;
+          ctx.fillText(label,this.x + this.xPadding + this.fontSize + 3, this.getLineHeight(index + 1));
 
-        //A bit gnarly, but clearing this rectangle breaks when using explorercanvas (clears whole canvas)
-        //ctx.clearRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
-        //Instead we'll make a white filled block to put the legendColour palette over.
+          //A bit gnarly, but clearing this rectangle breaks when using explorercanvas (clears whole canvas)
+          //ctx.clearRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+          //Instead we'll make a white filled block to put the legendColour palette over.
 
-        ctx.fillStyle = this.legendColorBackground;
-        ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+          ctx.fillStyle = this.legendColorBackground;
+          ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
 
-        ctx.fillStyle = this.legendColors[index].fill;
-        ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
+          ctx.fillStyle = this.legendColors[index].fill;
+          ctx.fillRect(this.x + this.xPadding, this.getLineHeight(index + 1) - this.fontSize/2, this.fontSize, this.fontSize);
 
 
-      },this);
+        },this);
+      }
     }
   });
 
@@ -1363,7 +1593,7 @@
       for (var i=0; i<=this.steps; i++){
         this.yLabels.push(template(this.templateString,{value:(this.min + (i * this.stepValue)).toFixed(stepDecimalPlaces)}));
       }
-      this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) : 0;
+      this.yLabelWidth = (this.display && this.showLabels) ? longestText(this.ctx,this.font,this.yLabels) + 10 : 0;
     },
     addXLabel : function(label){
       this.xLabels.push(label);
@@ -1387,6 +1617,9 @@
       this.startPoint += this.padding;
       this.endPoint -= this.padding;
 
+      // Cache the starting endpoint, excluding the space for x labels
+      var cachedEndPoint = this.endPoint;
+
       // Cache the starting height, so can determine if we need to recalculate the scale yAxis
       var cachedHeight = this.endPoint - this.startPoint,
         cachedYLabelWidth;
@@ -1418,6 +1651,7 @@
 
         // Only go through the xLabel loop again if the yLabel width has changed
         if (cachedYLabelWidth < this.yLabelWidth){
+          this.endPoint = cachedEndPoint;
           this.calculateXLabelRotation();
         }
       }
@@ -1436,7 +1670,7 @@
 
 
       this.xScalePaddingRight = lastWidth/2 + 3;
-      this.xScalePaddingLeft = (firstWidth/2 > this.yLabelWidth + 10) ? firstWidth/2 : this.yLabelWidth + 10;
+      this.xScalePaddingLeft = (firstWidth/2 > this.yLabelWidth) ? firstWidth/2 : this.yLabelWidth;
 
       this.xLabelRotation = 0;
       if (this.display){
@@ -1455,7 +1689,7 @@
           lastRotated = cosRotation * lastWidth;
 
           // We're right aligning the text now.
-          if (firstRotated + this.fontSize / 2 > this.yLabelWidth + 8){
+          if (firstRotated + this.fontSize / 2 > this.yLabelWidth){
             this.xScalePaddingLeft = firstRotated + this.fontSize / 2;
           }
           this.xScalePaddingRight = this.fontSize/2;
@@ -1490,7 +1724,7 @@
       var isRotated = (this.xLabelRotation > 0),
         // innerWidth = (this.offsetGridLines) ? this.width - offsetLeft - this.padding : this.width - (offsetLeft + halfLabelWidth * 2) - this.padding,
         innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
-        valueWidth = innerWidth/(this.valuesCount - ((this.offsetGridLines) ? 0 : 1)),
+        valueWidth = innerWidth/Math.max((this.valuesCount - ((this.offsetGridLines) ? 0 : 1)), 1),
         valueOffset = (valueWidth * index) + this.xScalePaddingLeft;
 
       if (this.offsetGridLines){
@@ -1512,14 +1746,24 @@
         ctx.font = this.font;
         each(this.yLabels,function(labelString,index){
           var yLabelCenter = this.endPoint - (yLabelGap * index),
-            linePositionY = Math.round(yLabelCenter);
+            linePositionY = Math.round(yLabelCenter),
+            drawHorizontalLine = this.showHorizontalLines;
 
           ctx.textAlign = "right";
           ctx.textBaseline = "middle";
           if (this.showLabels){
             ctx.fillText(labelString,xStart - 10,yLabelCenter);
           }
-          ctx.beginPath();
+
+          // This is X axis, so draw it
+          if (index === 0 && !drawHorizontalLine){
+            drawHorizontalLine = true;
+          }
+
+          if (drawHorizontalLine){
+            ctx.beginPath();
+          }
+
           if (index > 0){
             // This is a grid line in the centre, so drop that
             ctx.lineWidth = this.gridLineWidth;
@@ -1532,10 +1776,12 @@
 
           linePositionY += helpers.aliasPixel(ctx.lineWidth);
 
-          ctx.moveTo(xStart, linePositionY);
-          ctx.lineTo(this.width, linePositionY);
-          ctx.stroke();
-          ctx.closePath();
+          if(drawHorizontalLine){
+            ctx.moveTo(xStart, linePositionY);
+            ctx.lineTo(this.width, linePositionY);
+            ctx.stroke();
+            ctx.closePath();
+          }
 
           ctx.lineWidth = this.lineWidth;
           ctx.strokeStyle = this.lineColor;
@@ -1551,9 +1797,17 @@
           var xPos = this.calculateX(index) + aliasPixel(this.lineWidth),
             // Check to see if line/bar here and decide where to place the line
             linePos = this.calculateX(index - (this.offsetGridLines ? 0.5 : 0)) + aliasPixel(this.lineWidth),
-            isRotated = (this.xLabelRotation > 0);
+            isRotated = (this.xLabelRotation > 0),
+            drawVerticalLine = this.showVerticalLines;
 
-          ctx.beginPath();
+          // This is Y axis, so draw it
+          if (index === 0 && !drawVerticalLine){
+            drawVerticalLine = true;
+          }
+
+          if (drawVerticalLine){
+            ctx.beginPath();
+          }
 
           if (index > 0){
             // This is a grid line in the centre, so drop that
@@ -1564,10 +1818,13 @@
             ctx.lineWidth = this.lineWidth;
             ctx.strokeStyle = this.lineColor;
           }
-          ctx.moveTo(linePos,this.endPoint);
-          ctx.lineTo(linePos,this.startPoint - 3);
-          ctx.stroke();
-          ctx.closePath();
+
+          if (drawVerticalLine){
+            ctx.moveTo(linePos,this.endPoint);
+            ctx.lineTo(linePos,this.startPoint - 3);
+            ctx.stroke();
+            ctx.closePath();
+          }
 
 
           ctx.lineWidth = this.lineWidth;
@@ -1814,14 +2071,40 @@
           ctx.lineWidth = this.angleLineWidth;
           ctx.strokeStyle = this.angleLineColor;
           for (var i = this.valuesCount - 1; i >= 0; i--) {
+            var centerOffset = null, outerPosition = null;
+
             if (this.angleLineWidth > 0){
-              var outerPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max));
+              centerOffset = this.calculateCenterOffset(this.max);
+              outerPosition = this.getPointPosition(i, centerOffset);
               ctx.beginPath();
               ctx.moveTo(this.xCenter, this.yCenter);
               ctx.lineTo(outerPosition.x, outerPosition.y);
               ctx.stroke();
               ctx.closePath();
             }
+
+            if (this.backgroundColors && this.backgroundColors.length == this.valuesCount) {
+              if (centerOffset == null)
+                centerOffset = this.calculateCenterOffset(this.max);
+
+              if (outerPosition == null)
+                outerPosition = this.getPointPosition(i, centerOffset);
+
+              var previousOuterPosition = this.getPointPosition(i === 0 ? this.valuesCount - 1 : i - 1, centerOffset);
+              var nextOuterPosition = this.getPointPosition(i === this.valuesCount - 1 ? 0 : i + 1, centerOffset);
+
+              var previousOuterHalfway = { x: (previousOuterPosition.x + outerPosition.x) / 2, y: (previousOuterPosition.y + outerPosition.y) / 2 };
+              var nextOuterHalfway = { x: (outerPosition.x + nextOuterPosition.x) / 2, y: (outerPosition.y + nextOuterPosition.y) / 2 };
+
+              ctx.beginPath();
+              ctx.moveTo(this.xCenter, this.yCenter);
+              ctx.lineTo(previousOuterHalfway.x, previousOuterHalfway.y);
+              ctx.lineTo(outerPosition.x, outerPosition.y);
+              ctx.lineTo(nextOuterHalfway.x, nextOuterHalfway.y);
+              ctx.fillStyle = this.backgroundColors[i];
+              ctx.fill();
+              ctx.closePath();
+            }
             // Extra 3px out for some label spacing
             var pointLabelPosition = this.getPointPosition(i, this.calculateCenterOffset(this.max) + 5);
             ctx.font = fontString(this.pointLabelFontSize,this.pointLabelFontStyle,this.pointLabelFontFamily);
@@ -1858,6 +2141,93 @@
     }
   });
 
+  Chart.animationService = {
+    frameDuration: 17,
+    animations: [],
+    dropFrames: 0,
+    addAnimation: function(chartInstance, animationObject) {
+      for (var index = 0; index < this.animations.length; ++ index){
+        if (this.animations[index].chartInstance === chartInstance){
+          // replacing an in progress animation
+          this.animations[index].animationObject = animationObject;
+          return;
+        }
+      }
+
+      this.animations.push({
+        chartInstance: chartInstance,
+        animationObject: animationObject
+      });
+
+      // If there are no animations queued, manually kickstart a digest, for lack of a better word
+      if (this.animations.length == 1) {
+        helpers.requestAnimFrame.call(window, this.digestWrapper);
+      }
+    },
+    // Cancel the animation for a given chart instance
+    cancelAnimation: function(chartInstance) {
+      var index = helpers.findNextWhere(this.animations, function(animationWrapper) {
+        return animationWrapper.chartInstance === chartInstance;
+      });
+
+      if (index)
+      {
+        this.animations.splice(index, 1);
+      }
+    },
+    // calls startDigest with the proper context
+    digestWrapper: function() {
+      Chart.animationService.startDigest.call(Chart.animationService);
+    },
+    startDigest: function() {
+
+      var startTime = Date.now();
+      var framesToDrop = 0;
+
+      if(this.dropFrames > 1){
+        framesToDrop = Math.floor(this.dropFrames);
+        this.dropFrames -= framesToDrop;
+      }
+
+      for (var i = 0; i < this.animations.length; i++) {
+
+        if (this.animations[i].animationObject.currentStep === null){
+          this.animations[i].animationObject.currentStep = 0;
+        }
+
+        this.animations[i].animationObject.currentStep += 1 + framesToDrop;
+        if(this.animations[i].animationObject.currentStep > this.animations[i].animationObject.numSteps){
+          this.animations[i].animationObject.currentStep = this.animations[i].animationObject.numSteps;
+        }
+
+        this.animations[i].animationObject.render(this.animations[i].chartInstance, this.animations[i].animationObject);
+
+        // Check if executed the last frame.
+        if (this.animations[i].animationObject.currentStep == this.animations[i].animationObject.numSteps){
+          // Call onAnimationComplete
+          this.animations[i].animationObject.onAnimationComplete.call(this.animations[i].chartInstance);
+          // Remove the animation.
+          this.animations.splice(i, 1);
+          // Keep the index in place to offset the splice
+          i--;
+        }
+      }
+
+      var endTime = Date.now();
+      var delay = endTime - startTime - this.frameDuration;
+      var frameDelay = delay / this.frameDuration;
+
+      if(frameDelay > 1){
+        this.dropFrames += frameDelay;
+      }
+
+      // Do we have more stuff to animate?
+      if (this.animations.length > 0){
+        helpers.requestAnimFrame.call(window, this.digestWrapper);
+      }
+    }
+  };
+
   // Attach global event to resize each chart instance when the browser resizes
   helpers.addEvent(window, "resize", (function(){
     // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
@@ -1915,6 +2285,12 @@
     //Number - Width of the grid lines
     scaleGridLineWidth : 1,
 
+    //Boolean - Whether to show horizontal lines (except X axis)
+    scaleShowHorizontalLines: true,
+
+    //Boolean - Whether to show vertical lines (except Y axis)
+    scaleShowVerticalLines: true,
+
     //Boolean - If there is a stroke on each bar
     barShowStroke : true,
 
@@ -1928,7 +2304,7 @@
     barDatasetSpacing : 1,
 
     //String - A legend template
-    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
+    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
   };
 
@@ -2000,18 +2376,16 @@
         this.datasets.push(datasetObject);
 
         helpers.each(dataset.data,function(dataPoint,index){
-          if (helpers.isNumber(dataPoint)){
-            //Add a new point for each piece of data, passing any required data to draw.
-            datasetObject.bars.push(new this.BarClass({
-              value : dataPoint,
-              label : data.labels[index],
-              datasetLabel: dataset.label,
-              strokeColor : dataset.strokeColor,
-              fillColor : dataset.fillColor,
-              highlightFill : dataset.highlightFill || dataset.fillColor,
-              highlightStroke : dataset.highlightStroke || dataset.strokeColor
-            }));
-          }
+          //Add a new point for each piece of data, passing any required data to draw.
+          datasetObject.bars.push(new this.BarClass({
+            value : dataPoint,
+            label : data.labels[index],
+            datasetLabel: dataset.label,
+            strokeColor : dataset.strokeColor,
+            fillColor : dataset.fillColor,
+            highlightFill : dataset.highlightFill || dataset.fillColor,
+            highlightStroke : dataset.highlightStroke || dataset.strokeColor
+          }));
         },this);
 
       },this);
@@ -2104,6 +2478,8 @@
         font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
         lineWidth : this.options.scaleLineWidth,
         lineColor : this.options.scaleLineColor,
+        showHorizontalLines : this.options.scaleShowHorizontalLines,
+        showVerticalLines : this.options.scaleShowVerticalLines,
         gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
         gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
         padding : (this.options.showScale) ? 0 : (this.options.barShowStroke) ? this.options.barStrokeWidth : 0,
@@ -2126,19 +2502,18 @@
     addData : function(valuesArray,label){
       //Map the values array for each of the datasets
       helpers.each(valuesArray,function(value,datasetIndex){
-          if (helpers.isNumber(value)){
-            //Add a new point for each piece of data, passing any required data to draw.
-            this.datasets[datasetIndex].bars.push(new this.BarClass({
-              value : value,
-              label : label,
-              x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
-              y: this.scale.endPoint,
-              width : this.scale.calculateBarWidth(this.datasets.length),
-              base : this.scale.endPoint,
-              strokeColor : this.datasets[datasetIndex].strokeColor,
-              fillColor : this.datasets[datasetIndex].fillColor
-            }));
-          }
+        //Add a new point for each piece of data, passing any required data to draw.
+        this.datasets[datasetIndex].bars.push(new this.BarClass({
+          value : value,
+          label : label,
+          datasetLabel: this.datasets[datasetIndex].label,
+          x: this.scale.calculateBarX(this.datasets.length, datasetIndex, this.scale.valuesCount+1),
+          y: this.scale.endPoint,
+          width : this.scale.calculateBarWidth(this.datasets.length),
+          base : this.scale.endPoint,
+          strokeColor : this.datasets[datasetIndex].strokeColor,
+          fillColor : this.datasets[datasetIndex].fillColor
+        }));
       },this);
 
       this.scale.addXLabel(label);
@@ -2175,13 +2550,15 @@
       //Draw all the bars for each dataset
       helpers.each(this.datasets,function(dataset,datasetIndex){
         helpers.each(dataset.bars,function(bar,index){
-          bar.base = this.scale.endPoint;
-          //Transition then draw
-          bar.transition({
-            x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
-            y : this.scale.calculateY(bar.value),
-            width : this.scale.calculateBarWidth(this.datasets.length)
-          }, easingDecimal).draw();
+          if (bar.hasValue()){
+            bar.base = this.scale.endPoint;
+            //Transition then draw
+            bar.transition({
+              x : this.scale.calculateBarX(this.datasets.length, datasetIndex, index),
+              y : this.scale.calculateY(bar.value),
+              width : this.scale.calculateBarWidth(this.datasets.length)
+            }, easingDecimal).draw();
+          }
         },this);
 
       },this);
@@ -2190,6 +2567,7 @@
 
 
 }).call(this);
+
 (function(){
   "use strict";
 
@@ -2224,11 +2602,10 @@
     animateScale : false,
 
     //String - A legend template
-    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
+    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
 
   };
 
-
   Chart.Type.extend({
     //Passing in a name registers this chart in the Chart namespace
     name: "Doughnut",
@@ -2265,6 +2642,9 @@
       this.calculateTotal(data);
 
       helpers.each(data,function(datapoint, index){
+        if (!datapoint.color) {
+          datapoint.color = 'hsl(' + (360 * index / data.length) + ', 100%, 50%)';
+        }
         this.addData(datapoint, index, true);
       },this);
 
@@ -2281,7 +2661,11 @@
       return segmentsArray;
     },
     addData : function(segment, atIndex, silent){
-      var index = atIndex || this.segments.length;
+      var index = atIndex !== undefined ? atIndex : this.segments.length;
+      if ( typeof(segment.color) === "undefined" ) {
+        segment.color = Chart.defaults.global.segmentColorDefault[index % Chart.defaults.global.segmentColorDefault.length];
+        segment.highlight = Chart.defaults.global.segmentHighlightColorDefaults[index % Chart.defaults.global.segmentHighlightColorDefaults.length];
+      }
       this.segments.splice(index, 0, new this.SegmentArc({
         value : segment.value,
         outerRadius : (this.options.animateScale) ? 0 : this.outerRadius,
@@ -2300,13 +2684,17 @@
         this.update();
       }
     },
-    calculateCircumference : function(value){
-      return (Math.PI*2)*(value / this.total);
+    calculateCircumference : function(value) {
+      if ( this.total > 0 ) {
+        return (Math.PI*2)*(value / this.total);
+      } else {
+        return 0;
+      }
     },
     calculateTotal : function(data){
       this.total = 0;
       helpers.each(data,function(segment){
-        this.total += segment.value;
+        this.total += Math.abs(segment.value);
       },this);
     },
     update : function(){
@@ -2374,6 +2762,7 @@
   });
 
 }).call(this);
+
 (function(){
   "use strict";
 
@@ -2392,6 +2781,12 @@
     //Number - Width of the grid lines
     scaleGridLineWidth : 1,
 
+    //Boolean - Whether to show horizontal lines (except X axis)
+    scaleShowHorizontalLines: true,
+
+    //Boolean - Whether to show vertical lines (except Y axis)
+    scaleShowVerticalLines: true,
+
     //Boolean - Whether the line is curved between points
     bezierCurve : false,
 
@@ -2420,7 +2815,10 @@
     datasetFill : true,
 
     //String - A legend template
-    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
+    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>",
+
+    //Boolean - Whether to horizontally center the label and point dot inside the grid
+    offsetGridLines : false
 
   };
 
@@ -2431,9 +2829,10 @@
     initialize:  function(data){
       //Declare the extension of the default point, to cater for the options passed in to the constructor
       this.PointClass = Chart.Point.extend({
+        offsetGridLines : this.options.offsetGridLines,
         strokeWidth : this.options.pointDotStrokeWidth,
         radius : this.options.pointDotRadius,
-        display : this.options.pointDot,
+        display: this.options.pointDot,
         hitDetectionRadius : this.options.pointHitDetectionRadius,
         ctx : this.chart.ctx,
         inRange : function(mouseX){
@@ -2474,21 +2873,16 @@
 
 
         helpers.each(dataset.data,function(dataPoint,index){
-          //Best way to do this? or in draw sequence...?
-          if (helpers.isNumber(dataPoint)){
           //Add a new point for each piece of data, passing any required data to draw.
-            datasetObject.points.push(new this.PointClass({
-              value : dataPoint,
-              label : data.labels[index],
-              // x: this.scale.calculateX(index),
-              // y: this.scale.endPoint,
-              datasetLabel: dataset.label,
-              strokeColor : dataset.pointStrokeColor,
-              fillColor : dataset.pointColor,
-              highlightFill : dataset.pointHighlightFill || dataset.pointColor,
-              highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
-            }));
-          }
+          datasetObject.points.push(new this.PointClass({
+            value : dataPoint,
+            label : data.labels[index],
+            datasetLabel: dataset.label,
+            strokeColor : dataset.pointStrokeColor,
+            fillColor : dataset.pointColor,
+            highlightFill : dataset.pointHighlightFill || dataset.pointColor,
+            highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
+          }));
         },this);
 
         this.buildScale(data.labels);
@@ -2551,6 +2945,7 @@
         width : this.chart.width,
         ctx : this.chart.ctx,
         textColor : this.options.scaleFontColor,
+        offsetGridLines : this.options.offsetGridLines,
         fontSize : this.options.scaleFontSize,
         fontStyle : this.options.scaleFontStyle,
         fontFamily : this.options.scaleFontFamily,
@@ -2571,6 +2966,8 @@
         font : helpers.fontString(this.options.scaleFontSize, this.options.scaleFontStyle, this.options.scaleFontFamily),
         lineWidth : this.options.scaleLineWidth,
         lineColor : this.options.scaleLineColor,
+        showHorizontalLines : this.options.scaleShowHorizontalLines,
+        showVerticalLines : this.options.scaleShowVerticalLines,
         gridLineWidth : (this.options.scaleShowGridLines) ? this.options.scaleGridLineWidth : 0,
         gridLineColor : (this.options.scaleShowGridLines) ? this.options.scaleGridLineColor : "rgba(0,0,0,0)",
         padding: (this.options.showScale) ? 0 : this.options.pointDotRadius + this.options.pointDotStrokeWidth,
@@ -2595,17 +2992,16 @@
       //Map the values array for each of the datasets
 
       helpers.each(valuesArray,function(value,datasetIndex){
-          if (helpers.isNumber(value)){
-          //Add a new point for each piece of data, passing any required data to draw.
-            this.datasets[datasetIndex].points.push(new this.PointClass({
-              value : value,
-              label : label,
-              x: this.scale.calculateX(this.scale.valuesCount+1),
-              y: this.scale.endPoint,
-              strokeColor : this.datasets[datasetIndex].pointStrokeColor,
-              fillColor : this.datasets[datasetIndex].pointColor
-            }));
-          }
+        //Add a new point for each piece of data, passing any required data to draw.
+        this.datasets[datasetIndex].points.push(new this.PointClass({
+          value : value,
+          label : label,
+          datasetLabel: this.datasets[datasetIndex].label,
+          x: this.scale.calculateX(this.scale.valuesCount+1),
+          y: this.scale.endPoint,
+          strokeColor : this.datasets[datasetIndex].pointStrokeColor,
+          fillColor : this.datasets[datasetIndex].pointColor
+        }));
       },this);
 
       this.scale.addXLabel(label);
@@ -2633,37 +3029,65 @@
 
       var ctx = this.chart.ctx;
 
+      // Some helper methods for getting the next/prev points
+      var hasValue = function(item){
+        return item.value !== null;
+      },
+      nextPoint = function(point, collection, index){
+        return helpers.findNextWhere(collection, hasValue, index) || point;
+      },
+      previousPoint = function(point, collection, index){
+        return helpers.findPreviousWhere(collection, hasValue, index) || point;
+      };
+
+      if (!this.scale) return;
       this.scale.draw(easingDecimal);
 
 
       helpers.each(this.datasets,function(dataset){
+        var pointsWithValues = helpers.where(dataset.points, hasValue);
 
         //Transition each point first so that the line and point drawing isn't out of sync
         //We can use this extra loop to calculate the control points of this dataset also in this loop
 
-        helpers.each(dataset.points,function(point,index){
-          point.transition({
-            y : this.scale.calculateY(point.value),
-            x : this.scale.calculateX(index)
-          }, easingDecimal);
-
+        helpers.each(dataset.points, function(point, index){
+          if (point.hasValue()){
+            point.transition({
+              y : this.scale.calculateY(point.value),
+              x : this.scale.calculateX(index)
+            }, easingDecimal);
+          }
         },this);
 
 
-        // Control points need to be calculated in a seperate loop, because we need to know the current x/y of the point
+        // Control points need to be calculated in a separate loop, because we need to know the current x/y of the point
         // This would cause issues when there is no animation, because the y of the next point would be 0, so beziers would be skewed
         if (this.options.bezierCurve){
-          helpers.each(dataset.points,function(point,index){
-            //If we're at the start or end, we don't have a previous/next point
-            //By setting the tension to 0 here, the curve will transition to straight at the end
-            if (index === 0){
-              point.controlPoints = helpers.splineCurve(point,point,dataset.points[index+1],0);
+          helpers.each(pointsWithValues, function(point, index){
+            var tension = (index > 0 && index < pointsWithValues.length - 1) ? this.options.bezierCurveTension : 0;
+            point.controlPoints = helpers.splineCurve(
+              previousPoint(point, pointsWithValues, index),
+              point,
+              nextPoint(point, pointsWithValues, index),
+              tension
+            );
+
+            // Prevent the bezier going outside of the bounds of the graph
+
+            // Cap puter bezier handles to the upper/lower scale bounds
+            if (point.controlPoints.outer.y > this.scale.endPoint){
+              point.controlPoints.outer.y = this.scale.endPoint;
             }
-            else if (index >= dataset.points.length-1){
-              point.controlPoints = helpers.splineCurve(dataset.points[index-1],point,point,0);
+            else if (point.controlPoints.outer.y < this.scale.startPoint){
+              point.controlPoints.outer.y = this.scale.startPoint;
             }
-            else{
-              point.controlPoints = helpers.splineCurve(dataset.points[index-1],point,dataset.points[index+1],this.options.bezierCurveTension);
+
+            // Cap inner bezier handles to the upper/lower scale bounds
+            if (point.controlPoints.inner.y > this.scale.endPoint){
+              point.controlPoints.inner.y = this.scale.endPoint;
+            }
+            else if (point.controlPoints.inner.y < this.scale.startPoint){
+              point.controlPoints.inner.y = this.scale.startPoint;
             }
           },this);
         }
@@ -2673,12 +3097,18 @@
         ctx.lineWidth = this.options.datasetStrokeWidth;
         ctx.strokeStyle = dataset.strokeColor;
         ctx.beginPath();
-        helpers.each(dataset.points,function(point,index){
-          if (index>0){
+
+        helpers.each(pointsWithValues, function(point, index){
+          if (index === 0){
+            ctx.moveTo(point.x, point.y);
+          }
+          else{
             if(this.options.bezierCurve){
+              var previous = previousPoint(point, pointsWithValues, index);
+
               ctx.bezierCurveTo(
-                dataset.points[index-1].controlPoints.outer.x,
-                dataset.points[index-1].controlPoints.outer.y,
+                previous.controlPoints.outer.x,
+                previous.controlPoints.outer.y,
                 point.controlPoints.inner.x,
                 point.controlPoints.inner.y,
                 point.x,
@@ -2688,19 +3118,17 @@
             else{
               ctx.lineTo(point.x,point.y);
             }
-
           }
-          else{
-            ctx.moveTo(point.x,point.y);
-          }
-        },this);
-        ctx.stroke();
+        }, this);
 
+        if (this.options.datasetStroke) {
+          ctx.stroke();
+        }
 
-        if (this.options.datasetFill){
+        if (this.options.datasetFill && pointsWithValues.length > 0){
           //Round off the line by going to the base of the chart, back to the start, then fill.
-          ctx.lineTo(dataset.points[dataset.points.length-1].x, this.scale.endPoint);
-          ctx.lineTo(this.scale.calculateX(0), this.scale.endPoint);
+          ctx.lineTo(pointsWithValues[pointsWithValues.length - 1].x, this.scale.endPoint);
+          ctx.lineTo(pointsWithValues[0].x, this.scale.endPoint);
           ctx.fillStyle = dataset.fillColor;
           ctx.closePath();
           ctx.fill();
@@ -2709,16 +3137,16 @@
         //Now draw the points over the line
         //A little inefficient double looping, but better than the line
         //lagging behind the point positions
-        helpers.each(dataset.points,function(point){
+        helpers.each(pointsWithValues,function(point){
           point.draw();
         });
-
       },this);
     }
   });
 
 
 }).call(this);
+
 (function(){
   "use strict";
 
@@ -2749,7 +3177,7 @@
     //Boolean - Stroke a line around each segment in the chart
     segmentShowStroke : true,
 
-    //String - The colour of the stroke on each segement.
+    //String - The colour of the stroke on each segment.
     segmentStrokeColor : "rgba(255,255,255,1)",
 
     //Number - The width of the stroke value in pixels
@@ -2768,7 +3196,7 @@
     animateScale : false,
 
     //String - A legend template
-    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
+    legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"
   };
 
 
@@ -2916,6 +3344,8 @@
       helpers.each(this.segments,function(segment){
         segment.save();
       });
+
+      this.reflow();
       this.render();
     },
     reflow : function(){
@@ -2967,6 +3397,7 @@
   });
 
 }).call(this);
+
 (function(){
   "use strict";
 
@@ -2998,7 +3429,7 @@
       angleLineWidth : 1,
 
       //String - Point label font declaration
-      pointLabelFontFamily : "'Gotham', 'Gotham Round', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
+      pointLabelFontFamily : "'Gotham Round', 'Gotham', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
 
       //String - Point label font weight
       pointLabelFontStyle : "bold",
@@ -3031,7 +3462,7 @@
       datasetFill : true,
 
       //String - A legend template
-      legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
+      legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
     },
 
@@ -3039,7 +3470,7 @@
       this.PointClass = Chart.Point.extend({
         strokeWidth : this.options.pointDotStrokeWidth,
         radius : this.options.pointDotRadius,
-        display : this.options.pointDot,
+        display: this.options.pointDot,
         hitDetectionRadius : this.options.pointHitDetectionRadius,
         ctx : this.chart.ctx
       });
@@ -3071,7 +3502,6 @@
         var datasetObject = {
           label: dataset.label || null,
           fillColor : dataset.fillColor,
-          datasetLabel: dataset.label,
           strokeColor : dataset.strokeColor,
           pointColor : dataset.pointColor,
           pointStrokeColor : dataset.pointStrokeColor,
@@ -3081,24 +3511,22 @@
         this.datasets.push(datasetObject);
 
         helpers.each(dataset.data,function(dataPoint,index){
-          //Best way to do this? or in draw sequence...?
-          if (helpers.isNumber(dataPoint)){
           //Add a new point for each piece of data, passing any required data to draw.
-            var pointPosition;
-            if (!this.scale.animation){
-              pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
-            }
-            datasetObject.points.push(new this.PointClass({
-              value : dataPoint,
-              label : data.labels[index],
-              x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
-              y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
-              strokeColor : dataset.pointStrokeColor,
-              fillColor : dataset.pointColor,
-              highlightFill : dataset.pointHighlightFill || dataset.pointColor,
-              highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
-            }));
+          var pointPosition;
+          if (!this.scale.animation){
+            pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(dataPoint));
           }
+          datasetObject.points.push(new this.PointClass({
+            value : dataPoint,
+            label : data.labels[index],
+            datasetLabel: dataset.label,
+            x: (this.options.animation) ? this.scale.xCenter : pointPosition.x,
+            y: (this.options.animation) ? this.scale.yCenter : pointPosition.y,
+            strokeColor : dataset.pointStrokeColor,
+            fillColor : dataset.pointColor,
+            highlightFill : dataset.pointHighlightFill || dataset.pointColor,
+            highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor
+          }));
         },this);
 
       },this);
@@ -3146,6 +3574,7 @@
         showLabels: this.options.scaleShowLabels,
         showLabelBackdrop: this.options.scaleShowLabelBackdrop,
         backdropColor: this.options.scaleBackdropColor,
+        backgroundColors: this.options.scaleBackgroundColors,
         backdropPaddingY : this.options.scaleBackdropPaddingY,
         backdropPaddingX: this.options.scaleBackdropPaddingX,
         lineWidth: (this.options.scaleShowLine) ? this.options.scaleLineWidth : 0,
@@ -3213,17 +3642,16 @@
       //Map the values array for each of the datasets
       this.scale.valuesCount++;
       helpers.each(valuesArray,function(value,datasetIndex){
-          if (helpers.isNumber(value)){
-            var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
-            this.datasets[datasetIndex].points.push(new this.PointClass({
-              value : value,
-              label : label,
-              x: pointPosition.x,
-              y: pointPosition.y,
-              strokeColor : this.datasets[datasetIndex].pointStrokeColor,
-              fillColor : this.datasets[datasetIndex].pointColor
-            }));
-          }
+        var pointPosition = this.scale.getPointPosition(this.scale.valuesCount, this.scale.calculateCenterOffset(value));
+        this.datasets[datasetIndex].points.push(new this.PointClass({
+          value : value,
+          label : label,
+          datasetLabel: this.datasets[datasetIndex].label,
+          x: pointPosition.x,
+          y: pointPosition.y,
+          strokeColor : this.datasets[datasetIndex].pointStrokeColor,
+          fillColor : this.datasets[datasetIndex].pointColor
+        }));
       },this);
 
       this.scale.labels.push(label);
@@ -3270,7 +3698,9 @@
 
         //Transition each point first so that the line and point drawing isn't out of sync
         helpers.each(dataset.points,function(point,index){
-          point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
+          if (point.hasValue()){
+            point.transition(this.scale.getPointPosition(index, this.scale.calculateCenterOffset(point.value)), easeDecimal);
+          }
         },this);
 
 
@@ -3291,13 +3721,16 @@
         ctx.stroke();
 
         ctx.fillStyle = dataset.fillColor;
-        ctx.fill();
-
+        if(this.options.datasetFill){
+          ctx.fill();
+        }
         //Now draw the points over the line
         //A little inefficient double looping, but better than the line
         //lagging behind the point positions
         helpers.each(dataset.points,function(point){
-          point.draw();
+          if (point.hasValue()){
+            point.draw();
+          }
         });
 
       },this);