Animations & tool tips show. The title is not correct yet.

diff --git a/samples/line.html b/samples/line.html
index 7f96c553a256431897a56dfc18368cbb5e05d2aa..7655abe7a9d227789a47dcb3345fe07c15071708 100644 (file)
--- a/samples/line.html
+++ b/samples/line.html
@@ -36,7 +36,7 @@
 
     $.each(lineChartData.datasets, function(i, dataset) {
         dataset.borderColor = randomColor(0.4);
-        dataset.backgroundColor = randomColor(1);
+        dataset.backgroundColor = randomColor(0.5);
         dataset.pointBorderColor = randomColor(0.7);
         dataset.pointBackgroundColor = randomColor(0.5);
         dataset.pointBorderWidth = 1;

diff --git a/src/Chart.Core.js b/src/Chart.Core.js
index a3b41c9014d2b76e8684d40e760c9ff4068432ea..3a5adf38a26644b5d61596b321acc0f7409c991a 100755 (executable)
--- a/src/Chart.Core.js
+++ b/src/Chart.Core.js
@@ -1131,7 +1131,7 @@
 
             each(this._model, function(value, key) {
 
-                if (key[0] === '_' || !this.hasOwnProperty(key)) {
+                if (key[0] === '_' || !this._model.hasOwnProperty(key)) {
                     // Only non-underscored properties
                 }
 
@@ -1141,14 +1141,14 @@
                 }
 
                 // No unnecessary computations
-                else if (this[key] === this._view[key]) {
+                else if (this._model[key] === this._view[key]) {
                     // It's the same! Woohoo!
                 }
 
                 // Color transitions if possible
                 else if (typeof value === 'string') {
                     try {
-                        var color = helpers.color(this._start[key]).mix(helpers.color(this[key]), ease);
+                        var color = helpers.color(this._start[key]).mix(helpers.color(this._model[key]), ease);
                         this._view[key] = color.rgbString();
                     } catch (err) {
                         this._view[key] = value;
@@ -1156,7 +1156,7 @@
                 }
                 // Number transitions
                 else if (typeof value === 'number') {
-                    this._view[key] = ((this[key] - this._start[key]) * ease) + this._start[key];
+                    this._view[key] = ((this._model[key] - this._start[key]) * ease) + this._start[key];
                 }
                 // Everything else
                 else {
@@ -1172,12 +1172,12 @@
         },
         tooltipPosition: function() {
             return {
-                x: this.x,
-                y: this.y
+                x: this._model.x,
+                y: this._model.y
             };
         },
         hasValue: function() {
-            return isNumber(this.value);
+            return isNumber(this._model.x) && isNumber(this._model.y);
         }
     });
 
@@ -1192,7 +1192,12 @@
         },
         inGroupRange: function(mouseX) {
             var vm = this._view;
-            return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + this.hoverRadius, 2));
+
+            if (vm) {
+                return (Math.pow(mouseX - vm.x, 2) < Math.pow(vm.radius + vm.hoverRadius, 2));
+            } else {
+                return false;
+            }
         },
         tooltipPosition: function() {
             var vm = this._view;
@@ -1472,24 +1477,31 @@
         initialize: function() {
             var options = this._options;
             extend(this, {
-                opacity: 0,
-                xPadding: options.tooltips.xPadding,
-                yPadding: options.tooltips.yPadding,
-                xOffset: options.tooltips.xOffset,
-                backgroundColor: options.tooltips.backgroundColor,
-                textColor: options.tooltips.fontColor,
-                _fontFamily: options.tooltips.fontFamily,
-                _fontStyle: options.tooltips.fontStyle,
-                fontSize: options.tooltips.fontSize,
-                titleTextColor: options.tooltips.titleFontColor,
-                _titleFontFamily: options.tooltips.titleFontFamily,
-                _titleFontStyle: options.tooltips.titleFontStyle,
-                titleFontSize: options.tooltips.titleFontSize,
-                caretHeight: options.tooltips.caretSize,
-                cornerRadius: options.tooltips.cornerRadius,
-                legendColorBackground: options.tooltips.multiKeyBackground,
-                labels: [],
-                colors: [],
+                _model: {
+                    // Positioning
+                    xPadding: options.tooltips.xPadding,
+                    yPadding: options.tooltips.yPadding,
+                    xOffset: options.tooltips.xOffset,
+
+                    // Labels
+                    textColor: options.tooltips.fontColor,
+                    _fontFamily: options.tooltips.fontFamily,
+                    _fontStyle: options.tooltips.fontStyle,
+                    fontSize: options.tooltips.fontSize,
+
+                    // Title
+                    titleTextColor: options.tooltips.titleFontColor,
+                    _titleFontFamily: options.tooltips.titleFontFamily,
+                    _titleFontStyle: options.tooltips.titleFontStyle,
+                    titleFontSize: options.tooltips.titleFontSize,
+
+                    // Appearance
+                    caretHeight: options.tooltips.caretSize,
+                    cornerRadius: options.tooltips.cornerRadius,
+                    backgroundColor: options.tooltips.backgroundColor,
+                    opacity: 0,
+                    legendColorBackground: options.tooltips.multiKeyBackground,
+                },
             });
         },
         update: function() {
@@ -1498,15 +1510,22 @@
 
             switch (this._options.hover.mode) {
                 case 'single':
-                    helpers.extend(this, {
-                        text: template(this._options.tooltips.template, this._active[0]),
+                    helpers.extend(this._model, {
+                        text: template(this._options.tooltips.template, {
+                            // These variables are available in the template function. Add others here
+                            element: this._active[0],
+                            value: this._data.datasets[this._active[0]._datasetIndex].data[this._active[0]._index],
+                            label: this._data.labels ? this._data.labels[this._active[0]._index] : '',
+                        }),
                     });
+
                     var tooltipPosition = this._active[0].tooltipPosition();
-                    helpers.extend(this, {
+                    helpers.extend(this._model, {
                         x: Math.round(tooltipPosition.x),
                         y: Math.round(tooltipPosition.y),
                         caretPadding: tooltipPosition.padding
                     });
+
                     break;
 
                 case 'label':
@@ -1542,14 +1561,19 @@
                             if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()) {
                                 elements.push(dataCollection[dataIndex]);
                             }
-                        });
+                        }, this);
 
                         helpers.each(elements, function(element) {
                             xPositions.push(element._view.x);
                             yPositions.push(element._view.y);
 
                             //Include any colour information about the element
-                            labels.push(helpers.template(this._options.tooltips.multiTemplate, element));
+                            labels.push(helpers.template(this._options.tooltips.multiTemplate, {
+                                // These variables are available in the template function. Add others here
+                                element: element,
+                                datasetLabel: this._data.datasets[element._datasetIndex].label,
+                                value: this._data.datasets[element._datasetIndex].data[element._index],
+                            }));
                             colors.push({
                                 fill: element._view.backgroundColor,
                                 stroke: element._view.borderColor
@@ -1570,7 +1594,7 @@
                     }).call(this, dataIndex);
 
                     // Apply for now
-                    helpers.extend(this, {
+                    helpers.extend(this._model, {
                         x: medianPosition.x,
                         y: medianPosition.y,
                         labels: labels,
@@ -1582,30 +1606,30 @@
 
                     // Calculate Appearance Tweaks
 
-                    this.height = (labels.length * this.fontSize) + ((labels.length - 1) * (this.fontSize / 2)) + (this.yPadding * 2) + this.titleFontSize * 1.5;
+                    this._model.height = (labels.length * this._model.fontSize) + ((labels.length - 1) * (this._model.fontSize / 2)) + (this._model.yPadding * 2) + this._model.titleFontSize * 1.5;
 
                     var titleWidth = ctx.measureText(this.title).width,
                         //Label has a legend square as well so account for this.
-                        labelWidth = longestText(ctx, this.font, labels) + this.fontSize + 3,
+                        labelWidth = longestText(ctx, this.font, labels) + this._model.fontSize + 3,
                         longestTextWidth = max([labelWidth, titleWidth]);
 
-                    this.width = longestTextWidth + (this.xPadding * 2);
+                    this._model.width = longestTextWidth + (this._model.xPadding * 2);
 
 
-                    var halfHeight = this.height / 2;
+                    var halfHeight = this._model.height / 2;
 
                     //Check to ensure the height will fit on the canvas
-                    if (this.y - halfHeight < 0) {
-                        this.y = halfHeight;
-                    } else if (this.y + halfHeight > this._chart.height) {
-                        this.y = this._chart.height - halfHeight;
+                    if (this._model.y - halfHeight < 0) {
+                        this._model.y = halfHeight;
+                    } else if (this._model.y + halfHeight > this._chart.height) {
+                        this._model.y = this._chart.height - halfHeight;
                     }
 
                     //Decide whether to align left or right based on position on canvas
-                    if (this.x > this._chart.width / 2) {
-                        this.x -= this.xOffset + this.width;
+                    if (this._model.x > this._chart.width / 2) {
+                        this._model.x -= this._model.xOffset + this._model.width;
                     } else {
-                        this.x += this.xOffset;
+                        this._model.x += this._model.xOffset;
                     }
                     break;
             }

diff --git a/src/Chart.Line.js b/src/Chart.Line.js
index fa54cb96da68b28f666aa85c9498801b6ab8545a..06f4c09b8d9daa014d74759dea5516c2a9a355ca 100644 (file)
--- a/src/Chart.Line.js
+++ b/src/Chart.Line.js
@@ -415,8 +415,8 @@
             }.call(this);
 
             // On Hover hook
-            if (this.options.onHover) {
-                this.options.onHover.call(this, this.active);
+            if (this.options.hover.onHover) {
+                this.options.hover.onHover.call(this, this.active);
             }
 
             if (e.type == 'mouseup' || e.type == 'click') {
@@ -496,17 +496,16 @@
 
                 // Active
                 if (this.active.length) {
+                    this.tooltip._model.opacity = 1;
+                    
                     helpers.extend(this.tooltip, {
-                        opacity: 1,
                         _active: this.active,
                     });
 
                     this.tooltip.update();
                 } else {
                     // Inactive
-                    helpers.extend(this.tooltip, {
-                        opacity: 0,
-                    });
+                    this.tooltip._model.opacity = 0;
                 }
             }
 
@@ -529,7 +528,7 @@
                     (this.lastActive.length && this.active.length && changed)) {
 
                     this.stop();
-                    this.render(this.options.hoverAnimationDuration);
+                    this.render(this.options.hover.animationDuration);
                 }
             }