From 2d5eb6d57e97f9434c8483f6ef23f2bea6f1a969 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Tue, 16 Jun 2015 00:17:26 -0600 Subject: [PATCH] Radar chart and radialLinear scale --- samples/radar.html | 6 +- src/controllers/controller.radar.js | 523 ++++++++-------------------- src/core/core.controller.js | 27 +- src/scales/scale.radialLinear.js | 3 +- 4 files changed, 172 insertions(+), 387 deletions(-) diff --git a/samples/radar.html b/samples/radar.html index 199791904..0630bc1ed 100644 --- a/samples/radar.html +++ b/samples/radar.html @@ -21,6 +21,7 @@ }; var config = { + type: 'radar', data: { labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], datasets: [{ @@ -36,14 +37,11 @@ pointHighlightStroke: "rgba(151,187,205,1)", data: [null, randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] }] - }, - options: { - responsive: true } }; window.onload = function() { - window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(config); + window.myRadar = new Chart(document.getElementById("canvas"), config); }; $('#randomizeData').click(function() { diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index b813764bf..28c0f2ca8 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -1,221 +1,158 @@ (function() { "use strict"; - return; - var root = this, Chart = root.Chart, helpers = Chart.helpers; - Chart.Type.extend({ - name: "Radar", - defaults: { + Chart.defaults.radar = { + scale: { + type: "radialLinear", + }, + elements: { + line: { + tension: 0, // no bezier in radar + } + }, + }; - scale: { - type: "radialLinear", - }, + Chart.controllers.radar = function(chart, datasetIndex) { + this.initialize.call(this, chart, datasetIndex); + }; - elements: { - line: { - tension: 0, // no bezier in radar - } - }, - //String - A legend template - legendTemplate: "" + helpers.extend(Chart.controllers.radar.prototype, { + initialize: function(chart, datasetIndex) { + this.chart = chart; + this.index = datasetIndex; + this.linkScales(); + this.addElements(); }, - initialize: function() { - - // Events - helpers.bindEvents(this, this.options.events, this.events); - - // Create a new line and its points for each dataset and piece of data - helpers.each(this.data.datasets, function(dataset, datasetIndex) { - - dataset.metaDataset = new Chart.Line({ - _chart: this.chart, - _datasetIndex: datasetIndex, - _points: dataset.metaData, - _loop: true - }); - - dataset.metaData = []; - - helpers.each(dataset.data, function(dataPoint, index) { - dataset.metaData.push(new Chart.Point({ - _datasetIndex: datasetIndex, - _index: index, - _chart: this.chart, - _model: { - x: 0, //xScale.getPixelForValue(null, index, true), - y: 0, //this.chartArea.bottom, - }, - })); - - }, this); - }, this); - - // Build the scale. - this.buildScale(); - - // Create tooltip instance exclusively for this chart with some defaults. - this.tooltip = new Chart.Tooltip({ - _chart: this.chart, - _data: this.data, - _options: this.options, - }, this); - - // Need to fit scales before we reset elements. - Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height); - - // Reset so that we animation from the baseline - this.resetElements(); - - // Update that shiz - this.update(); + linkScales: function() { + // No need. Single scale only }, - nextPoint: function(collection, index) { - return collection[index + 1] || collection[0]; + + getDataset: function() { + return this.chart.data.datasets[this.index]; }, - previousPoint: function(collection, index) { - return collection[index - 1] || collection[collection.length - 1]; + + getScaleForId: function(scaleID) { + return this.chart.scales[scaleID]; }, - resetElements: function() { - // Update the points - this.eachElement(function(point, index, dataset, datasetIndex) { - helpers.extend(point, { - // Utility - _chart: this.chart, - _datasetIndex: datasetIndex, - _index: index, - _scale: this.scale, + addElements: function() { - // Desired view properties - _model: { - x: this.scale.xCenter, - y: this.scale.yCenter, + this.getDataset().metaData = this.getDataset().metaData || []; - // Appearance - tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension, - radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius), - backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor), - borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor), - borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth), - skip: this.data.datasets[datasetIndex].data[index] === null, - - // Tooltip - hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].hitRadius, index, this.options.elements.point.hitRadius), - }, - }); - }, this); - - // Update control points for the bezier curve - this.eachElement(function(point, index, dataset, datasetIndex) { - var controlPoints = helpers.splineCurve( - this.previousPoint(dataset, index)._model, - point._model, - this.nextPoint(dataset, index)._model, - point._model.tension - ); - - point._model.controlPointPreviousX = this.scale.xCenter; - point._model.controlPointPreviousY = this.scale.yCenter; - point._model.controlPointNextX = this.scale.xCenter; - point._model.controlPointNextY = this.scale.yCenter; - - // Now pivot the point for animation - point.pivot(); - }, this); - }, - update: function(animationDuration) { - this.scale.setScaleSize(); - this.scale.calculateRange(); - this.scale.generateTicks(); - this.scale.buildYLabels(); - - Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height); - - // Update the lines - this.eachDataset(function(dataset, datasetIndex) { - var scaleBase; - - if (this.scale.min < 0 && this.scale.max < 0) { - scaleBase = this.scale.getPointPositionForValue(0, this.scale.max); - } else if (this.scale.min > 0 && this.scale.max > 0) { - scaleBase = this.scale.getPointPositionForValue(0, this.scale.min); - } else { - scaleBase = this.scale.getPointPositionForValue(0, 0); - } - - helpers.extend(dataset.metaDataset, { - // Utility - _datasetIndex: datasetIndex, - - // Data - _children: dataset.metaData, - - // Model - _model: { - // Appearance - tension: dataset.tension || this.options.elements.line.tension, - backgroundColor: dataset.backgroundColor || this.options.elements.line.backgroundColor, - borderWidth: dataset.borderWidth || this.options.elements.line.borderWidth, - borderColor: dataset.borderColor || this.options.elements.line.borderColor, - fill: dataset.fill !== undefined ? dataset.fill : this.options.elements.line.fill, // use the value from the dataset if it was provided. else fall back to the default - skipNull: dataset.skipNull !== undefined ? dataset.skipNull : this.options.elements.line.skipNull, - drawNull: dataset.drawNull !== undefined ? dataset.drawNull : this.options.elements.line.drawNull, - - // Scale - scaleTop: this.scale.top, - scaleBottom: this.scale.bottom, - scaleZero: scaleBase, - }, - }); - - dataset.metaDataset.pivot(); + this.getDataset().metaDataset = this.getDataset().metaDataset || new Chart.elements.Line({ + _chart: this.chart.chart, + _datasetIndex: this.index, + _points: this.getDataset().metaData, + _loop: true }); - // Update the points - this.eachElement(function(point, index, dataset, datasetIndex) { - var pointPosition = this.scale.getPointPositionForValue(index, this.data.datasets[datasetIndex].data[index]); + helpers.each(this.getDataset().data, function(value, index) { + this.getDataset().metaData[index] = this.getDataset().metaData[index] || new Chart.elements.Point({ + _chart: this.chart.chart, + _datasetIndex: this.index, + _index: index, + _model: { + x: 0, //xScale.getPixelForValue(null, index, true), + y: 0, //this.chartArea.bottom, + }, + }); + }, this); + }, + + reset: function() { + this.update(true); + }, + + update: function(reset) { + + var line = this.getDataset().metaDataset; + var points = this.getDataset().metaData; + + var scale = this.chart.scale; + var scaleBase; + + scale.setScaleSize(); + scale.calculateRange(); + scale.generateTicks(); + scale.buildYLabels(); + + if (scale.min < 0 && scale.max < 0) { + scaleBase = scale.getPointPositionForValue(0, scale.max); + } else if (scale.min > 0 && scale.max > 0) { + scaleBase = scale.getPointPositionForValue(0, scale.min); + } else { + scaleBase = scale.getPointPositionForValue(0, 0); + } + + helpers.extend(this.getDataset().metaDataset, { + // Utility + _datasetIndex: this.index, + // Data + _children: this.getDataset().metaData, + // Model + _model: { + // Appearance + tension: this.getDataset().tension || this.chart.options.elements.line.tension, + backgroundColor: this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor, + borderWidth: this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth, + borderColor: this.getDataset().borderColor || this.chart.options.elements.line.borderColor, + fill: this.getDataset().fill !== undefined ? this.getDataset().fill : this.chart.options.elements.line.fill, // use the value from the this.getDataset() if it was provided. else fall back to the default + skipNull: this.getDataset().skipNull !== undefined ? this.getDataset().skipNull : this.chart.options.elements.line.skipNull, + drawNull: this.getDataset().drawNull !== undefined ? this.getDataset().drawNull : this.chart.options.elements.line.drawNull, + + // Scale + scaleTop: scale.top, + scaleBottom: scale.bottom, + scaleZero: scaleBase, + }, + }); + + this.getDataset().metaDataset.pivot(); + + // Update Points + helpers.each(points, function(point, index) { + var pointPosition = scale.getPointPositionForValue(index, this.getDataset().data[index]); helpers.extend(point, { // Utility - _chart: this.chart, - _datasetIndex: datasetIndex, + _datasetIndex: this.index, _index: index, // Desired view properties _model: { - x: pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales - y: pointPosition.y, + x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales + y: reset ? scale.yCenter : pointPosition.y, // Appearance - tension: point.custom && point.custom.tension ? point.custom.tension : this.options.elements.line.tension, - radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointRadius, index, this.options.elements.point.radius), - backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBackgroundColor, index, this.options.elements.point.backgroundColor), - borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderColor, index, this.options.elements.point.borderColor), - borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].pointBorderWidth, index, this.options.elements.point.borderWidth), - skip: this.data.datasets[datasetIndex].data[index] === null, + tension: point.custom && point.custom.tension ? point.custom.tension : this.chart.options.elements.line.tension, + radius: point.custom && point.custom.radius ? point.custom.pointRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius), + backgroundColor: point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor), + borderColor: point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor), + borderWidth: point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth), + skip: this.getDataset().data[index] === null, // Tooltip - hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.data.datasets[datasetIndex].hitRadius, index, this.options.elements.point.hitRadius), + hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius), }, }); }, this); - // Update control points for the bezier curve - this.eachElement(function(point, index, dataset, datasetIndex) { + // Update bezier control points + helpers.each(this.getDataset().metaData, function(point, index) { var controlPoints = helpers.splineCurve( - this.previousPoint(dataset, index)._model, + helpers.previousItem(this.getDataset().metaData, index, true)._model, point._model, - this.nextPoint(dataset, index)._model, + helpers.nextItem(this.getDataset().metaData, index, true)._model, point._model.tension ); @@ -225,19 +162,19 @@ // Prevent the bezier going outside of the bounds of the graph // Cap puter bezier handles to the upper/lower scale bounds - if (controlPoints.next.y > this.chartArea.bottom) { - point._model.controlPointNextY = this.chartArea.bottom; - } else if (controlPoints.next.y < this.chartArea.top) { - point._model.controlPointNextY = this.chartArea.top; + if (controlPoints.next.y > this.chart.chartArea.bottom) { + point._model.controlPointNextY = this.chart.chartArea.bottom; + } else if (controlPoints.next.y < this.chart.chartArea.top) { + point._model.controlPointNextY = this.chart.chartArea.top; } else { point._model.controlPointNextY = controlPoints.next.y; } // Cap inner bezier handles to the upper/lower scale bounds - if (controlPoints.previous.y > this.chartArea.bottom) { - point._model.controlPointPreviousY = this.chartArea.bottom; - } else if (controlPoints.previous.y < this.chartArea.top) { - point._model.controlPointPreviousY = this.chartArea.top; + if (controlPoints.previous.y > this.chart.chartArea.bottom) { + point._model.controlPointPreviousY = this.chart.chartArea.bottom; + } else if (controlPoints.previous.y < this.chart.chartArea.top) { + point._model.controlPointPreviousY = this.chart.chartArea.top; } else { point._model.controlPointPreviousY = controlPoints.previous.y; } @@ -246,200 +183,48 @@ point.pivot(); }, this); - this.render(animationDuration); }, - buildScale: function() { - var self = this; - var ScaleConstructor = Chart.scaleService.getScaleConstructor(this.options.scale.type); - this.scale = new ScaleConstructor({ - options: this.options.scale, - height: this.chart.height, - width: this.chart.width, - xCenter: this.chart.width / 2, - yCenter: this.chart.height / 2, - ctx: this.chart.ctx, - labels: this.data.labels, - valuesCount: this.data.datasets[0].data.length, - data: this.data, - }); - - this.scale.setScaleSize(); - this.scale.calculateRange(); - this.scale.generateTicks(); - this.scale.buildYLabels(); - }, draw: function(ease) { var easingDecimal = ease || 1; - this.clear(); - // Draw all the scales - this.scale.draw(this.chartArea); + // Transition Point Locations + helpers.each(this.getDataset().metaData, function(point, index) { + point.transition(easingDecimal); + }, this); - // reverse for-loop for proper stacking - for (var i = this.data.datasets.length - 1; i >= 0; i--) { + // Transition and Draw the line + this.getDataset().metaDataset.transition(easingDecimal).draw(); - var dataset = this.data.datasets[i]; - - // Transition Point Locations - helpers.each(dataset.metaData, function(point, index) { - point.transition(easingDecimal); - }, this); - - // Transition and Draw the line - dataset.metaDataset.transition(easingDecimal).draw(); - - // Draw the points - helpers.each(dataset.metaData, function(point) { - point.draw(); - }); - } - - // Finally draw the tooltip - this.tooltip.transition(easingDecimal).draw(); + // Draw the points + helpers.each(this.getDataset().metaData, function(point) { + point.draw(); + }); }, - events: function(e) { - this.lastActive = this.lastActive || []; + setHoverStyle: function(point) { + // Point + var dataset = this.chart.data.datasets[point._datasetIndex]; + var index = point._index; - // Find Active Elements - // If exiting chart - if (e.type == 'mouseout') { - this.active = []; - } else { - this.active = function() { - switch (this.options.hover.mode) { - case 'single': - return this.getElementAtEvent(e); - case 'label': - return this.getElementsAtEvent(e); - case 'dataset': - return this.getDatasetAtEvent(e); - default: - return e; - } - }.call(this); - } - - // On Hover hook - if (this.options.hover.onHover) { - this.options.hover.onHover.call(this, this.active); - } - - if (e.type == 'mouseup' || e.type == 'click') { - if (this.options.onClick) { - this.options.onClick.call(this, e, this.active); - } - } - - var dataset; - var index; - // Remove styling for last active (even if it may still be active) - if (this.lastActive.length) { - switch (this.options.hover.mode) { - case 'single': - dataset = this.data.datasets[this.lastActive[0]._datasetIndex]; - index = this.lastActive[0]._index; - - this.lastActive[0]._model.radius = this.lastActive[0].custom && this.lastActive[0].custom.radius ? this.lastActive[0].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius); - this.lastActive[0]._model.backgroundColor = this.lastActive[0].custom && this.lastActive[0].custom.backgroundColor ? this.lastActive[0].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor); - this.lastActive[0]._model.borderColor = this.lastActive[0].custom && this.lastActive[0].custom.borderColor ? this.lastActive[0].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor); - this.lastActive[0]._model.borderWidth = this.lastActive[0].custom && this.lastActive[0].custom.borderWidth ? this.lastActive[0].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth); - break; - case 'label': - for (var i = 0; i < this.lastActive.length; i++) { - dataset = this.data.datasets[this.lastActive[i]._datasetIndex]; - index = this.lastActive[i]._index; - - this.lastActive[i]._model.radius = this.lastActive[i].custom && this.lastActive[i].custom.radius ? this.lastActive[i].custom.pointRadius : helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, this.options.elements.point.radius); - this.lastActive[i]._model.backgroundColor = this.lastActive[i].custom && this.lastActive[i].custom.backgroundColor ? this.lastActive[i].custom.backgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointBackgroundColor, index, this.options.elements.point.backgroundColor); - this.lastActive[i]._model.borderColor = this.lastActive[i].custom && this.lastActive[i].custom.borderColor ? this.lastActive[i].custom.borderColor : helpers.getValueAtIndexOrDefault(dataset.pointBorderColor, index, this.options.elements.point.borderColor); - this.lastActive[i]._model.borderWidth = this.lastActive[i].custom && this.lastActive[i].custom.borderWidth ? this.lastActive[i].custom.borderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.options.elements.point.borderWidth); - } - break; - case 'dataset': - break; - default: - // Don't change anything - } - } - - // Built in hover styling - if (this.active.length && this.options.hover.mode) { - switch (this.options.hover.mode) { - case 'single': - dataset = this.data.datasets[this.active[0]._datasetIndex]; - index = this.active[0]._index; - - this.active[0]._model.radius = this.active[0].custom && this.active[0].custom.hoverRadius ? this.active[0].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[0]._model.radius + 2); - this.active[0]._model.backgroundColor = this.active[0].custom && this.active[0].custom.hoverBackgroundColor ? this.active[0].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[0]._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - this.active[0]._model.borderColor = this.active[0].custom && this.active[0].custom.hoverBorderColor ? this.active[0].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[0]._model.borderColor).saturate(0.5).darken(0.1).rgbString()); - this.active[0]._model.borderWidth = this.active[0].custom && this.active[0].custom.hoverBorderWidth ? this.active[0].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[0]._model.borderWidth + 2); - break; - case 'label': - for (var i = 0; i < this.active.length; i++) { - dataset = this.data.datasets[this.active[i]._datasetIndex]; - index = this.active[i]._index; - - this.active[i]._model.radius = this.active[i].custom && this.active[i].custom.hoverRadius ? this.active[i].custom.hoverRadius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.active[i]._model.radius + 2); - this.active[i]._model.backgroundColor = this.active[i].custom && this.active[i].custom.hoverBackgroundColor ? this.active[i].custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(this.active[i]._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); - this.active[i]._model.borderColor = this.active[i].custom && this.active[i].custom.hoverBorderColor ? this.active[i].custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(this.active[i]._model.borderColor).saturate(0.5).darken(0.1).rgbString()); - this.active[i]._model.borderWidth = this.active[i].custom && this.active[i].custom.hoverBorderWidth ? this.active[i].custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, this.active[i]._model.borderWidth + 2); - } - break; - case 'dataset': - break; - default: - // Don't change anything - } - } - - // Built in Tooltips - if (this.options.tooltips.enabled) { - - // The usual updates - this.tooltip.initialize(); - - // Active - if (this.active.length) { - this.tooltip._model.opacity = 1; - - helpers.extend(this.tooltip, { - _active: this.active, - }); - - this.tooltip.update(); - } else { - // Inactive - this.tooltip._model.opacity = 0; - } - } - - // Hover animations - this.tooltip.pivot(); - - if (!this.animating) { - var changed; - - helpers.each(this.active, function(element, index) { - if (element !== this.lastActive[index]) { - changed = true; - } - }, this); - - // If entering, leaving, or changing elements, animate the change via pivot - if ((!this.lastActive.length && this.active.length) || - (this.lastActive.length && !this.active.length) || - (this.lastActive.length && this.active.length && changed)) { - - this.stop(); - this.render(this.options.hover.animationDuration); - } - } - - // Remember Last Active - this.lastActive = this.active; - return this; + point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(dataset.pointHoverRadius, index, this.chart.options.elements.point.hoverRadius); + point._model.backgroundColor = point.custom && point.custom.hoverBackgroundColor ? point.custom.hoverBackgroundColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBackgroundColor, index, helpers.color(point._model.backgroundColor).saturate(0.5).darken(0.1).rgbString()); + point._model.borderColor = point.custom && point.custom.hoverBorderColor ? point.custom.hoverBorderColor : helpers.getValueAtIndexOrDefault(dataset.pointHoverBorderColor, index, helpers.color(point._model.borderColor).saturate(0.5).darken(0.1).rgbString()); + point._model.borderWidth = point.custom && point.custom.hoverBorderWidth ? point.custom.hoverBorderWidth : helpers.getValueAtIndexOrDefault(dataset.pointBorderWidth, index, point._model.borderWidth); }, + + removeHoverStyle: function(point) { + var dataset = this.chart.data.datasets[point._datasetIndex]; + var index = point._index; + + point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius); + point._model.backgroundColor = point.custom && point.custom.backgroundColor ? point.custom.backgroundColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBackgroundColor, index, this.chart.options.elements.point.backgroundColor); + point._model.borderColor = point.custom && point.custom.borderColor ? point.custom.borderColor : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderColor, index, this.chart.options.elements.point.borderColor); + point._model.borderWidth = point.custom && point.custom.borderWidth ? point.custom.borderWidth : helpers.getValueAtIndexOrDefault(this.getDataset().pointBorderWidth, index, this.chart.options.elements.point.borderWidth); + } + }); + + + }).call(this); diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 242d19356..577e3e30c 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -121,20 +121,18 @@ this.scales[scale.id] = scale; }, this); } + } + if (this.options.scale) { + // Build radial axes + var ScaleClass = Chart.scaleService.getScaleConstructor(this.options.scale.type); + var scale = new ScaleClass({ + ctx: this.chart.ctx, + options: this.options.scale, + data: this.data, + chart: this.chart, + }); - if (this.options.scale) { - // Build radial axes - var ScaleClass = Chart.scaleService.getScaleConstructor(this.options.scale.type); - var scale = new ScaleClass({ - ctx: this.chart.ctx, - options: axisOptions, - data: this.data, - id: axisOptions.id, - chart: this.chart, - }); - - this.scale = scale; - } + this.scale = scale; } Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height); @@ -203,6 +201,9 @@ helpers.each(this.scales, function(scale) { scale.draw(this.chartArea); }, this); + if (this.scale) { + this.scale.draw(); + } // Draw each dataset via its respective controller // TODO: needs support for reverse stacking (line chart) diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 130a43a5a..fe47b0c06 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -9,7 +9,7 @@ display: true, //Boolean - Whether to animate scaling the chart from the centre - animate: false, + animate: true, lineArc: false, @@ -180,6 +180,7 @@ // range of the scale this.max = helpers.max(this.ticks); this.min = helpers.min(this.ticks); + console.log(this); }, buildYLabels: function() { this.yLabels = [];