Bump up Chart.js to 1.1.1 and angular-chart to 0.10.2

This will be the last update on Chart.js 1.x and angular-chart 0.10.x
This commit resolves legend overlapping issue.

Change-Id: I3709f86ec397688b25947e4b30bec926ac9c9dd1

 /*!
  * Chart.js
  * http://chartjs.org/
- * Version: 1.0.2
+ * Version: 1.1.1
  *
  * Copyright 2015 Nick Downie
  * Released under the MIT license
@@ -40,8 +40,6 @@
         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);
@@ -168,7 +166,7 @@
             tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
 
             // String - Template string for single tooltips
-            multiTooltipTemplate: "<%= value %>",
+            multiTooltipTemplate: "<%= datasetLabel %>: <%= value %>",
 
             // String - Colour behind the legend colour block
             multiTooltipKeyBackground: '#fff',
@@ -839,13 +837,13 @@
             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 - padding;
+            return container ? container.clientWidth - padding : 0;
         },
         getMaximumHeight = helpers.getMaximumHeight = function(domNode){
             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 - padding;
+            return container ? container.clientHeight - padding : 0;
         },
         getStyle = helpers.getStyle = function (el, property) {
             return el.currentStyle ?
@@ -977,9 +975,10 @@
             return this;
         },
         generateLegend : function(){
-            return template(this.options.legendTemplate,this);
+            return helpers.template(this.options.legendTemplate, this);
         },
         destroy : function(){
+            this.stop();
             this.clear();
             unbindEvents(this, this.events);
             var canvas = this.chart.canvas;
@@ -2058,7 +2057,7 @@
                     for (var i = this.valuesCount - 1; i >= 0; i--) {
                         var centerOffset = null, outerPosition = null;
 
-                        if (this.angleLineWidth > 0){
+                        if (this.angleLineWidth > 0 && (i % this.angleLineInterval === 0)){
                             centerOffset = this.calculateCenterOffset(this.max);
                             outerPosition = this.getPointPosition(i, centerOffset);
                             ctx.beginPath();
@@ -2233,7 +2232,7 @@
 
 
     if (amd) {
-        define(function(){
+        define('Chart', [], function(){
             return Chart;
         });
     } else if (typeof module === 'object' && module.exports) {
@@ -2289,7 +2288,8 @@
         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 class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
+
     };
 
 
@@ -2333,8 +2333,10 @@
                         bar.restore(['fillColor', 'strokeColor']);
                     });
                     helpers.each(activeBars, function(activeBar){
+                        if (activeBar) {
                             activeBar.fillColor = activeBar.highlightFill;
                             activeBar.strokeColor = activeBar.highlightStroke;
+                        }
                     });
                     this.showTooltip(activeBars);
                 });
@@ -2365,10 +2367,10 @@
                         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
+                        strokeColor : (typeof dataset.strokeColor == 'object') ? dataset.strokeColor[index] : dataset.strokeColor,
+                        fillColor : (typeof dataset.fillColor == 'object') ? dataset.fillColor[index] : dataset.fillColor,
+                        highlightFill : (dataset.highlightFill) ? (typeof dataset.highlightFill == 'object') ? dataset.highlightFill[index] : dataset.highlightFill : (typeof dataset.fillColor == 'object') ? dataset.fillColor[index] : dataset.fillColor,
+                        highlightStroke : (dataset.highlightStroke) ? (typeof dataset.highlightStroke == 'object') ? dataset.highlightStroke[index] : dataset.highlightStroke : (typeof dataset.strokeColor == 'object') ? dataset.strokeColor[index] : dataset.strokeColor
                     }));
                 },this);
 
@@ -2586,14 +2588,14 @@
         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 class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%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",
-        //Providing a defaults will also register the deafults in the chart namespace
+        //Providing a defaults will also register the defaults in the chart namespace
         defaults : defaultConfig,
         //Initialize is fired when the chart is initialized - Data is passed in as a parameter
         //Config is automatically merged by the core of Chart.js, and is available at this.options
@@ -2799,7 +2801,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 class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%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
@@ -3180,14 +3182,14 @@
         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 class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=segments[i].fillColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%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: "PolarArea",
-        //Providing a defaults will also register the deafults in the chart namespace
+        //Providing a defaults will also register the defaults in the chart namespace
         defaults : defaultConfig,
         //Initialize is fired when the chart is initialized - Data is passed in as a parameter
         //Config is automatically merged by the core of Chart.js, and is available at this.options
@@ -3412,6 +3414,9 @@
             //Number - Pixel width of the angle line
             angleLineWidth : 1,
 
+            //Number - Interval at which to draw angle lines ("every Nth point")
+            angleLineInterval: 1,
+
             //String - Point label font declaration
             pointLabelFontFamily : "'Arial'",
 
@@ -3446,7 +3451,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 class=\"<%=name.toLowerCase()%>-legend-icon\" style=\"background-color:<%=datasets[i].strokeColor%>\"></span><span class=\"<%=name.toLowerCase()%>-legend-text\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%></span></li><%}%></ul>"
 
         },
 
@@ -3565,6 +3570,7 @@
                 lineColor: this.options.scaleLineColor,
                 angleLineColor : this.options.angleLineColor,
                 angleLineWidth : (this.options.angleShowLineOut) ? this.options.angleLineWidth : 0,
+        angleLineInterval: (this.options.angleLineInterval) ? this.options.angleLineInterval : 1,
                 // Point labels at the edge of each line
                 pointLabelFontColor : this.options.pointLabelFontColor,
                 pointLabelFontSize : this.options.pointLabelFontSize,

@@ -32,13 +32,13 @@
   font-size: smaller;
   cursor: default;
 }
-.chart-legend li span,
-.bar-legend li span,
-.line-legend li span,
-.pie-legend li span,
-.radar-legend li span,
-.polararea-legend li span,
-.doughnut-legend li span {
+.chart-legend-icon,
+.bar-legend-icon,
+.line-legend-icon,
+.pie-legend-icon,
+.radar-legend-icon,
+.polararea-legend-icon,
+.doughnut-legend-icon {
   display: block;
   position: absolute;
   left: 0;

-/*!
- * angular-chart.js
- * http://jtblin.github.io/angular-chart.js/
- * Version: 0.8.8
- *
- * Copyright 2015 Jerome Touffe-Blin
- * Released under the BSD license
- * https://github.com/jtblin/angular-chart.js/blob/master/LICENSE
- */
-
 (function (factory) {
   'use strict';
   if (typeof exports === 'object') {
@@ -147,14 +137,15 @@
           // Order of setting "watch" matter
 
           scope.$watch('data', function (newVal, oldVal) {
-            if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) return;
+            if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
+              destroyChart(chart, scope);
+              return;
+            }
             var chartType = type || scope.chartType;
             if (! chartType) return;
 
-            if (chart) {
-              if (canUpdateChart(newVal, oldVal)) return updateChart(chart, newVal, scope, elem);
-              chart.destroy();
-            }
+            if (chart && canUpdateChart(newVal, oldVal))
+              return updateChart(chart, newVal, scope, elem);
 
             createChart(chartType);
           }, true);
@@ -167,12 +158,11 @@
           scope.$watch('chartType', function (newVal, oldVal) {
             if (isEmpty(newVal)) return;
             if (angular.equals(newVal, oldVal)) return;
-            if (chart) chart.destroy();
             createChart(newVal);
           });
 
           scope.$on('$destroy', function () {
-            if (chart) chart.destroy();
+            destroyChart(chart, scope);
           });
 
           function resetChart (newVal, oldVal) {
@@ -183,8 +173,6 @@
 
             // chart.update() doesn't work for series and labels
             // so we have to re-create the chart entirely
-            if (chart) chart.destroy();
-
             createChart(chartType);
           }
 
@@ -196,12 +184,16 @@
             }
             if (! scope.data || ! scope.data.length) return;
             scope.getColour = typeof scope.getColour === 'function' ? scope.getColour : getRandomColour;
-            scope.colours = getColours(type, scope);
+            var colours = getColours(type, scope);
             var cvs = elem[0], ctx = cvs.getContext('2d');
             var data = Array.isArray(scope.data[0]) ?
-              getDataSets(scope.labels, scope.data, scope.series || [], scope.colours) :
-              getData(scope.labels, scope.data, scope.colours);
+              getDataSets(scope.labels, scope.data, scope.series || [], colours) :
+              getData(scope.labels, scope.data, colours);
             var options = angular.extend({}, ChartJs.getOptions(type), scope.options);
+
+            // Destroy old chart if it exists to avoid ghost charts issue
+            // https://github.com/jtblin/angular-chart.js/issues/187
+            destroyChart(chart, scope);
             chart = new ChartJs.Chart(ctx)[type](data, options);
             scope.$emit('create', chart);
 
@@ -255,13 +247,18 @@
     }
 
     function getColours (type, scope) {
+      var notEnoughColours = false;
       var colours = angular.copy(scope.colours ||
         ChartJs.getOptions(type).colours ||
         Chart.defaults.global.colours
       );
       while (colours.length < scope.data.length) {
         colours.push(scope.getColour());
+        notEnoughColours = true;
       }
+      // mutate colours in this case as we don't want
+      // the colours to change on each refresh
+      if (notEnoughColours) scope.colours = colours;
       return colours.map(convertColour);
     }
 
@@ -368,5 +365,11 @@
       var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.options);
       return options.responsive;
     }
+
+    function destroyChart(chart, scope) {
+      if(! chart) return;
+      chart.destroy();
+      scope.$emit('destroy', chart);
+    }
   }
 }));

-.chart-legend,.bar-legend,.line-legend,.pie-legend,.radar-legend,.polararea-legend,.doughnut-legend{list-style-type:none;margin-top:5px;text-align:center;-webkit-padding-start:0;-moz-padding-start:0;padding-left:0}.chart-legend li,.bar-legend li,.line-legend li,.pie-legend li,.radar-legend li,.polararea-legend li,.doughnut-legend li{display:inline-block;white-space:nowrap;position:relative;margin-bottom:4px;border-radius:5px;padding:2px 8px 2px 28px;font-size:smaller;cursor:default}.chart-legend li span,.bar-legend li span,.line-legend li span,.pie-legend li span,.radar-legend li span,.polararea-legend li span,.doughnut-legend li span{display:block;position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px}
+.bar-legend,.chart-legend,.doughnut-legend,.line-legend,.pie-legend,.polararea-legend,.radar-legend{list-style-type:none;margin-top:5px;text-align:center;-webkit-padding-start:0;-moz-padding-start:0;padding-left:0}.bar-legend li,.chart-legend li,.doughnut-legend li,.line-legend li,.pie-legend li,.polararea-legend li,.radar-legend li{display:inline-block;white-space:nowrap;position:relative;margin-bottom:4px;border-radius:5px;padding:2px 8px 2px 28px;font-size:smaller;cursor:default}.bar-legend-icon,.chart-legend-icon,.doughnut-legend-icon,.line-legend-icon,.pie-legend-icon,.polararea-legend-icon,.radar-legend-icon{display:block;position:absolute;left:0;top:0;width:20px;height:20px;border-radius:5px}
 /*# sourceMappingURL=angular-chart.min.css.map */