diff --git a/samples/radar.html b/samples/radar.html index 0885f61ab..4a5c3f05b 100644 --- a/samples/radar.html +++ b/samples/radar.html @@ -1,67 +1,61 @@ - - Radar Chart - - - - -
- -
- + + Radar Chart + + + - + - - diff --git a/src/Chart.Core.js b/src/Chart.Core.js index ff58bce32..48d6be231 100755 --- a/src/Chart.Core.js +++ b/src/Chart.Core.js @@ -1273,6 +1273,8 @@ var vm = this._vm; var ctx = this._chart.ctx; + var first = vm._points[0]; + var last = vm._points[vm._points.length - 1]; // Draw the background first (so the border is always on top) helpers.each(vm._points, function(point, index) { @@ -1296,6 +1298,23 @@ } }, this); + if (vm.loop) { + + if (vm._tension > 0 || 1) { + + ctx.bezierCurveTo( + last._vm.controlPointNextX, + last._vm.controlPointNextY, + first._vm.controlPointPreviousX, + first._vm.controlPointPreviousY, + first._vm.x, + first._vm.y + ); + } else { + ctx.lineTo(first._vm.x, first._vm.y); + } + } + if (vm._points.length > 0) { //Round off the line by going to the base of the chart, back to the start, then fill. ctx.lineTo(vm._points[vm._points.length - 1].x, vm.scaleZero); @@ -1331,6 +1350,21 @@ } } }, this); + if (vm.loop) { + if (vm._tension > 0 || 1) { + + ctx.bezierCurveTo( + last._vm.controlPointNextX, + last._vm.controlPointNextY, + first._vm.controlPointPreviousX, + first._vm.controlPointPreviousY, + first._vm.x, + first._vm.y + ); + } else { + ctx.lineTo(first._vm.x, first._vm.y); + } + } ctx.stroke(); diff --git a/src/Chart.Line.js b/src/Chart.Line.js index e1b44abcb..25de6c2bf 100644 --- a/src/Chart.Line.js +++ b/src/Chart.Line.js @@ -13,7 +13,7 @@ display: true, position: "bottom", id: "x-axis-1", // need an ID so datasets can reference the scale - + // grid line settings gridLines: { show: true, @@ -46,7 +46,7 @@ display: true, position: "left", id: "y-axis-1", - + // grid line settings gridLines: { show: true, @@ -78,22 +78,22 @@ //Boolean - Whether to stack the lines essentially creating a stacked area chart. stacked: false, - points: { + point: { // Number - Radius of each point dot in pixels radius: 3, - + // Number - Pixel width of point dot border borderWidth: 1, - + // Number - Pixel width of point on hover hoverRadius: 5, - + // Number - Pixel width of point dot border on hover hoverBorderWidth: 2, - + // Color backgroundColor: Chart.defaults.global.defaultColor, - + // Color borderColor: Chart.defaults.global.defaultColor, @@ -101,7 +101,7 @@ hitRadius: 6, }, - lines: { + line: { //Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension tension: 0.4, }, @@ -207,17 +207,17 @@ helpers.extend(dataset.metaDataset, { // Utility _datasetIndex: datasetIndex, - + // Data _points: dataset.metaData, - + // Geometry scaleTop: yScale.top, scaleBottom: yScale.bottom, scaleZero: yScale.getPixelForValue(0), - + // Appearance - tension: dataset.tension || this.options.lines.tension, + tension: dataset.tension || this.options.line.tension, backgroundColor: dataset.backgroundColor || this.options.backgroundColor, borderWidth: dataset.borderWidth || this.options.borderWidth, borderColor: dataset.borderColor || this.options.borderColor, @@ -235,25 +235,25 @@ _chart: this.chart, _datasetIndex: datasetIndex, _index: index, - + // Data label: this.data.labels[index], value: this.data.datasets[datasetIndex].data[index], datasetLabel: this.data.datasets[datasetIndex].label, - + // Geometry offsetGridLines: this.options.offsetGridLines, x: xScale.getPixelForValue(null, index, true), // value not used in dataset scale, but we want a consistent API between scales y: yScale.getPointPixelForValue(this.data.datasets[datasetIndex].data[index], index, datasetIndex), tension: this.data.datasets[datasetIndex].metaDataset.tension, - + // Appearnce - radius: this.data.datasets[datasetIndex].pointRadius || this.options.points.radius, - backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.points.backgroundColor, - borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointsborderWidth, - + radius: this.data.datasets[datasetIndex].pointRadius || this.options.point.radius, + backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.point.backgroundColor, + borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.point.borderWidth, + // Tooltip - hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.points.hitRadius, + hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.point.hitRadius, }); }, this); @@ -337,7 +337,7 @@ } else if (value < this.min) { this.min = value; } - + if (this.max === null) { this.max = value; } else if (value > this.max) { diff --git a/src/Chart.Radar.js b/src/Chart.Radar.js index 51795b695..4eee2439c 100644 --- a/src/Chart.Radar.js +++ b/src/Chart.Radar.js @@ -1,233 +1,257 @@ -(function(){ - "use strict"; +(function() { + "use strict"; - var root = this, - Chart = root.Chart, - helpers = Chart.helpers; + var root = this, + Chart = root.Chart, + helpers = Chart.helpers; - Chart.Type.extend({ - name: "Radar", - defaults:{ + Chart.Type.extend({ + name: "Radar", + defaults: { - scale: { - scaleType: "radialLinear", - display: true, - - //Boolean - Whether to animate scaling the chart from the centre - animate : false, + scale: { + scaleType: "radialLinear", + display: true, - lineArc: false, + //Boolean - Whether to animate scaling the chart from the centre + animate: false, - // grid line settings - gridLines: { - show: true, - color: "rgba(0, 0, 0, 0.05)", - lineWidth: 1, - }, + lineArc: false, - angleLines: { - show: true, - color: "rgba(0,0,0,.1)", - lineWidth: 1 - }, + // grid line settings + gridLines: { + show: true, + color: "rgba(0, 0, 0, 0.05)", + lineWidth: 1, + }, - // scale numbers - beginAtZero: true, + angleLines: { + show: true, + color: "rgba(0,0,0,.1)", + lineWidth: 1 + }, - // label settings - labels: { - show: true, - template: "<%=value%>", - fontSize: 12, - fontStyle: "normal", - fontColor: "#666", - fontFamily: "Helvetica Neue", + // scale numbers + beginAtZero: true, - //Boolean - Show a backdrop to the scale label - showLabelBackdrop : true, + // label settings + labels: { + show: true, + template: "<%=value%>", + fontSize: 12, + fontStyle: "normal", + fontColor: "#666", + fontFamily: "Helvetica Neue", - //String - The colour of the label backdrop - backdropColor : "rgba(255,255,255,0.75)", + //Boolean - Show a backdrop to the scale label + showLabelBackdrop: true, - //Number - The backdrop padding above & below the label in pixels - backdropPaddingY : 2, + //String - The colour of the label backdrop + backdropColor: "rgba(255,255,255,0.75)", - //Number - The backdrop padding to the side of the label in pixels - backdropPaddingX : 2, - }, - - pointLabels: { - //String - Point label font declaration - fontFamily : "'Arial'", + //Number - The backdrop padding above & below the label in pixels + backdropPaddingY: 2, - //String - Point label font weight - fontStyle : "normal", + //Number - The backdrop padding to the side of the label in pixels + backdropPaddingX: 2, + }, - //Number - Point label font size in pixels - fontSize : 10, + pointLabels: { + //String - Point label font declaration + fontFamily: "'Arial'", - //String - Point label font colour - fontColor : "#666", - }, - }, + //String - Point label font weight + fontStyle: "normal", - //Boolean - Whether to show a dot for each point - pointDot : true, + //Number - Point label font size in pixels + fontSize: 10, - //Number - Radius of each point dot in pixels - pointRadius: 3, + //String - Point label font colour + fontColor: "#666", + }, + }, - //Number - Pixel width of point dot border - pointBorderWidth: 1, + line: { - //Number - Pixel width of point on hover - pointHoverRadius: 5, + //Boolean - Whether to show a dot for each point + show: true, - //Number - Pixel width of point dot border on hover - pointHoverBorderWidth: 2, - pointBackgroundColor: Chart.defaults.global.defaultColor, - pointBorderColor: Chart.defaults.global.defaultColor, + //Number - Pixel width of dot border + borderWidth: 1, - //Number - amount extra to add to the radius to cater for hit detection outside the drawn point - pointHitRadius: 20, + backgroundColor: Chart.defaults.global.defaultColor, - //Boolean - Whether to show a stroke for datasets - datasetStroke : true, + borderColor: Chart.defaults.global.defaultColor, - //Number - Pixel width of dataset stroke - datasetStrokeWidth : 2, + //Number - amount extra to add to the radius to cater for hit detection outside the drawn + hitRadius: 20, - //Boolean - Whether to fill the dataset with a colour - datasetFill : true, + //Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension + tension: 0.4, + }, - //String - A legend template - legendTemplate : "" + point: { + //Boolean - Whether to show a dot for each point + show: true, - }, + //Number - Radius of each dot in pixels + radius: 3, - initialize: function(){ - this.PointClass = Chart.Point.extend({ - display: this.options.pointDot, - _chart: this.chart - }); + //Number - Pixel width of dot border + borderWidth: 1, - this.datasets = []; + //Number - Pixel width of on hover + hoverRadius: 5, - this.buildScale(this.data); + //Number - Pixel width of dot border on hover + hoverBorderWidth: 2, - //Set up tooltip events on the chart - if (this.options.showTooltips){ - helpers.bindEvents(this, this.options.events, function(evt){ - var activePointsCollection = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : []; + backgroundColor: Chart.defaults.global.defaultColor, - this.eachPoints(function(point){ - point.restore(['fillColor', 'strokeColor']); - }); - helpers.each(activePointsCollection, function(activePoint){ - activePoint.fillColor = activePoint.highlightFill; - activePoint.strokeColor = activePoint.highlightStroke; - }); + borderColor: Chart.defaults.global.defaultColor, - this.showTooltip(activePointsCollection); - }); - } + //Number - amount extra to add to the radius to cater for hit detection outside the drawn + hitRadius: 20, + }, - //Iterate through each of the datasets, and build this into a property of the chart - helpers.each(this.data.datasets,function(dataset){ + //String - A legend template + legendTemplate: "" - var datasetObject = { - label: dataset.label || null, - fillColor : dataset.fillColor, - strokeColor : dataset.strokeColor, - pointColor : dataset.pointColor, - pointStrokeColor : dataset.pointStrokeColor, - points : [] - }; + }, - this.datasets.push(datasetObject); + initialize: function() { - helpers.each(dataset.data,function(dataPoint,index){ - //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 : this.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.buildScale(this.data); - // Appearance - radius: dataset.pointRadius || this.options.pointRadius, - backgroundColor: dataset.pointBackgroundColor || this.options.pointBackgroundColor, - borderWidth: dataset.pointBorderWidth || this.options.pointBorderWidth, - - // Tooltip - hoverRadius: dataset.pointHitRadius || this.options.pointHitRadius, - })); - },this); - },this); - this.render(); - }, - eachPoints : function(callback){ - helpers.each(this.datasets,function(dataset){ - helpers.each(dataset.points,callback,this); - },this); - }, + // Events + helpers.bindEvents(this, this.options.events, this.events); - getPointsAtEvent : function(evt){ - var mousePosition = helpers.getRelativePosition(evt), - fromCenter = helpers.getAngleFromPoint({ - x: this.scale.xCenter, - y: this.scale.yCenter - }, mousePosition); + var _this = this; - var anglePerIndex = (Math.PI * 2) /this.scale.valuesCount, - pointIndex = Math.round((fromCenter.angle - Math.PI * 1.5) / anglePerIndex), - activePointsCollection = []; + //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(); + dataset.metaData = []; + helpers.each(dataset.data, function(dataPoint, index) { + dataset.metaData.push(new Chart.Point()); + }, this); - // If we're at the top, make the pointIndex 0 to get the first of the array. - if (pointIndex >= this.scale.valuesCount || pointIndex < 0){ - pointIndex = 0; - } + // The line chart only supports a single x axis because the x axis is always a dataset axis + }, this); - if (fromCenter.distance <= this.scale.drawingArea){ - helpers.each(this.datasets, function(dataset){ - activePointsCollection.push(dataset.points[pointIndex]); - }); - } + // Build and fit the scale. Needs to happen after the axis IDs have been set + this.buildScale(); + Chart.scaleService.fitScalesForChart(this, this.chart.width, this.chart.height); - return activePointsCollection; - }, + // Set defaults for lines + helpers.each(this.data.datasets, function(dataset, datasetIndex) { + helpers.extend(dataset.metaDataset, { + _points: dataset.metaData, + _datasetIndex: datasetIndex, + _chart: this.chart, + loop: true + }); + // Fill in dataset defaults from options + helpers.extend(dataset, helpers.merge(this.options, dataset)); + // Copy to view modele + dataset.metaDataset.save(); + }, this); - buildScale : function(data){ - var self = this; + // Set defaults for points + this.eachElement(function(point, index, dataset, datasetIndex) { - var ScaleConstructor = Chart.scales.getScaleConstructor(this.options.scale.scaleType); - 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: data.labels, - valuesCount: data.datasets[0].data.length, - calculateRange: function() { - this.min = null; - this.max = null; + helpers.extend(point, { + _datasetIndex: datasetIndex, + _index: index, + _chart: this.chart, + display: this.options.pointDot, + x: this.scale.xCenter, + y: this.scale.yCenter, + }); - helpers.each(self.data.datasets, function(dataset) { + // Default bezier control points + helpers.extend(point, { + controlPointPreviousX: this.scale.xCenter, + controlPointPreviousY: this.scale.yCenter, + controlPointNextX: this.scale.xCenter, + controlPointNextY: this.scale.yCenter, + }); + // Copy to view model + point.save(); + + }, this); + + + + + + + // 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); + + + + + + this.update(); + }, + + /*getPointsAtEvent: function(evt) { + var mousePosition = helpers.getRelativePosition(evt), + fromCenter = helpers.getAngleFromPoint({ + x: this.scale.xCenter, + y: this.scale.yCenter + }, mousePosition); + + var anglePerIndex = (Math.PI * 2) / this.scale.valuesCount, + pointIndex = Math.round((fromCenter.angle - Math.PI * 1.5) / anglePerIndex), + activePointsCollection = []; + + // If we're at the top, make the pointIndex 0 to get the first of the array. + if (pointIndex >= this.scale.valuesCount || pointIndex < 0) { + pointIndex = 0; + } + + if (fromCenter.distance <= this.scale.drawingArea) { + helpers.each(this.data.datasets, function(dataset) { + activePointsCollection.push(dataset.points[pointIndex]); + }); + } + + return activePointsCollection; + },*/ + nextPoint: function(collection, index) { + return collection[index - 1] || collection[collection.length - 1]; + }, + previousPoint: function(collection, index) { + return collection[index + 1] || collection[0]; + }, + buildScale: function() { + var self = this; + + var ScaleConstructor = Chart.scales.getScaleConstructor(this.options.scale.scaleType); + 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, + calculateRange: function() { + this.min = null; + this.max = null; + + helpers.each(self.data.datasets, function(dataset) { if (dataset.yAxisID === this.id) { helpers.each(dataset.data, function(value, index) { if (this.min === null) { @@ -235,7 +259,7 @@ } else if (value < this.min) { this.min = value; } - + if (this.max === null) { this.max = value; } else if (value > this.max) { @@ -244,139 +268,286 @@ }, this); } }, this); - } - }); + } + }); - this.scale.setScaleSize(); - this.scale.calculateRange(); - this.scale.generateTicks(); - this.scale.buildYLabels(); - }, - addData : function(valuesArray,label){ - //Map the values array for each of the datasets - this.scale.valuesCount++; - helpers.each(valuesArray,function(value,datasetIndex){ - 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.setScaleSize(); + this.scale.calculateRange(); + this.scale.generateTicks(); + this.scale.buildYLabels(); + }, + update: function() { - this.scale.labels.push(label); + // Update the lines + this.eachDataset(function(dataset, datasetIndex) { - this.reflow(); + helpers.extend(dataset.metaDataset, { + // Utility + _datasetIndex: datasetIndex, - this.update(); - }, - removeData : function(){ - this.scale.valuesCount--; - this.scale.labels.shift(); - helpers.each(this.datasets,function(dataset){ - dataset.points.shift(); - },this); - this.reflow(); - this.update(); - }, - update : function(){ - //Iterate through each of the datasets, and build this into a property of the chart - helpers.each(this.data.datasets,function(dataset,datasetIndex){ + // Data + _points: dataset.metaData, - helpers.extend(this.datasets[datasetIndex], { - label : dataset.label || null, - fillColor : dataset.fillColor, - strokeColor : dataset.strokeColor, - pointColor : dataset.pointColor, - pointStrokeColor : dataset.pointStrokeColor, - }); + // Geometry + scaleTop: this.scale.top, + scaleBottom: this.scale.bottom, + scaleZero: this.scale.getPointPosition(0), - helpers.each(dataset.data,function(dataPoint,index){ - helpers.extend(this.datasets[datasetIndex].points[index], { - value : dataPoint, - label : this.data.labels[index], - datasetLabel: dataset.label, - strokeColor : dataset.pointStrokeColor, - fillColor : dataset.pointColor, - highlightFill : dataset.pointHighlightFill || dataset.pointColor, - highlightStroke : dataset.pointHighlightStroke || dataset.pointStrokeColor - }); - },this); + // Appearance + tension: dataset.tension || this.options.line.tension, + backgroundColor: dataset.backgroundColor || this.options.backgroundColor, + borderWidth: dataset.borderWidth || this.options.borderWidth, + borderColor: dataset.borderColor || this.options.borderColor, + }); + dataset.metaDataset.pivot(); + }, this); - },this); - - this.eachPoints(function(point){ - point.save(); - }); - this.reflow(); - this.render(); - }, - reflow: function(){ - helpers.extend(this.scale, { - width : this.chart.width, - height: this.chart.height, - size : helpers.min([this.chart.width, this.chart.height]), - xCenter: this.chart.width/2, - yCenter: this.chart.height/2 - }); - - this.scale.calculateRange(); - this.scale.generateTicks(); - this.scale.buildYLabels(); - }, - draw : function(ease){ - var easeDecimal = ease || 1, - ctx = this.chart.ctx; - this.clear(); - this.scale.draw(); + // Update the points + this.eachElement(function(point, index, dataset, datasetIndex) { - helpers.each(this.datasets,function(dataset){ + var pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(this.data.datasets[datasetIndex].data[index])); - //Transition each point first so that the line and point drawing isn't out of sync - helpers.each(dataset.points,function(point,index){ - if (point.hasValue()){ - point.transition(easeDecimal); - } - },this); + helpers.extend(point, { + // Utility + _chart: this.chart, + _datasetIndex: datasetIndex, + _index: index, + + // Data + label: this.data.labels[index], + value: this.data.datasets[datasetIndex].data[index], + datasetLabel: this.data.datasets[datasetIndex].label, + + // Geometry + offsetGridLines: this.options.offsetGridLines, + x: pointPosition.x, + y: pointPosition.y, + tension: this.data.datasets[datasetIndex].metaDataset.tension, + + // Appearnce + radius: this.data.datasets[datasetIndex].pointRadius || this.options.point.radius, + backgroundColor: this.data.datasets[datasetIndex].pointBackgroundColor || this.options.point.backgroundColor, + borderWidth: this.data.datasets[datasetIndex].pointBorderWidth || this.options.pointsborderWidth, + + // Tooltip + hoverRadius: this.data.datasets[datasetIndex].pointHitRadius || this.options.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), + point, + this.nextPoint(dataset, index), + point.tension + ); + + point.controlPointPreviousX = controlPoints.previous.x; + point.controlPointNextX = controlPoints.next.x; + + // 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.controlPointNextY = this.chartArea.bottom; + } else if (controlPoints.next.y < this.chartArea.top) { + point.controlPointNextY = this.chartArea.top; + } else { + point.controlPointNextY = controlPoints.next.y; + } + + // Cap inner bezier handles to the upper/lower scale bounds + if (controlPoints.previous.y > this.chartArea.bottom) { + point.controlPointPreviousY = this.chartArea.bottom; + } else if (controlPoints.previous.y < this.chartArea.top) { + point.controlPointPreviousY = this.chartArea.top; + } else { + point.controlPointPreviousY = controlPoints.previous.y; + } + // Now pivot the point for animation + point.pivot(); + }, this); + + this.render(); + }, + draw: function(ease) { + + var easingDecimal = ease || 1; + this.clear(); + // reverse for-loop for proper stacking + for (var i = this.data.datasets.length - 1; i >= 0; i--) { - //Draw the line between all the points - ctx.lineWidth = this.options.datasetStrokeWidth; - ctx.strokeStyle = dataset.strokeColor; - ctx.beginPath(); - helpers.each(dataset.points,function(point,index){ - if (index === 0){ - ctx.moveTo(point.x,point.y); - } - else{ - ctx.lineTo(point.x,point.y); - } - },this); - ctx.closePath(); - ctx.stroke(); + var dataset = this.data.datasets[i]; + var datasetIndex = i; - ctx.fillStyle = dataset.fillColor; - ctx.fill(); + // Transition Point Locations + helpers.each(dataset.metaData, function(point, index) { + point.transition(easingDecimal); + }, this); - //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){ - if (point.hasValue()){ - point.draw(); - } - }); + // Transition and Draw the line + dataset.metaDataset.transition(easingDecimal).draw(); - },this); + // Draw the points + helpers.each(dataset.metaData, function(point) { + point.draw(); + }); + } - } + // Draw all the scales + this.scale.draw(this.chartArea); - }); + // Finally draw the tooltip + this.tooltip.transition(easingDecimal).draw(); + + }, + events: function(e) { + + // If exiting chart + if (e.type == 'mouseout') { + return this; + } + + this.lastActive = this.lastActive || []; + + // Find Active Elements + 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.onHover) { + this.options.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; + // 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]; + + this.lastActive[0].radius = dataset.pointRadius; + this.lastActive[0].backgroundColor = dataset.pointBackgroundColor; + this.lastActive[0].borderColor = dataset.pointBorderColor; + this.lastActive[0].borderWidth = dataset.pointBorderWidth; + break; + case 'label': + for (var i = 0; i < this.lastActive.length; i++) { + dataset = this.data.datasets[this.lastActive[i]._datasetIndex]; + + this.lastActive[i].radius = dataset.pointRadius; + this.lastActive[i].backgroundColor = dataset.pointBackgroundColor; + this.lastActive[i].borderColor = dataset.pointBorderColor; + this.lastActive[i].borderWidth = dataset.pointBorderWidth; + } + 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]; + + this.active[0].radius = dataset.pointHoverRadius || dataset.pointRadius + 2; + this.active[0].backgroundColor = dataset.pointHoverBackgroundColor || helpers.color(dataset.pointBackgroundColor).saturate(0.5).darken(0.35).rgbString(); + this.active[0].borderColor = dataset.pointHoverBorderColor || helpers.color(dataset.pointBorderColor).saturate(0.5).darken(0.35).rgbString(); + this.active[0].borderWidth = dataset.pointHoverBorderWidth || dataset.pointBorderWidth + 2; + break; + case 'label': + for (var i = 0; i < this.active.length; i++) { + dataset = this.data.datasets[this.active[i]._datasetIndex]; + + this.active[i].radius = dataset.pointHoverRadius || dataset.pointRadius + 2; + this.active[i].backgroundColor = dataset.pointHoverBackgroundColor || helpers.color(dataset.pointBackgroundColor).saturate(0.5).darken(0.35).rgbString(); + this.active[i].borderColor = dataset.pointHoverBorderColor || helpers.color(dataset.pointBorderColor).saturate(0.5).darken(0.35).rgbString(); + this.active[i].borderWidth = dataset.pointHoverBorderWidth || dataset.pointBorderWidth + 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) { + helpers.extend(this.tooltip, { + opacity: 1, + _active: this.active, + }); + + this.tooltip.update(); + } else { + // Inactive + helpers.extend(this.tooltip, { + 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.hoverAnimationDuration); + } + } + + // Remember Last Active + this.lastActive = this.active; + return this; + }, + + }); diff --git a/src/Chart.Scale.js b/src/Chart.Scale.js index b0313e4c0..d87f80e57 100644 --- a/src/Chart.Scale.js +++ b/src/Chart.Scale.js @@ -1,636 +1,638 @@ (function() { - "use strict"; - - var root = this, + "use strict"; + + var root = this, Chart = root.Chart, helpers = Chart.helpers; - - // The scale service is used to resize charts along with all of their axes. We make this as - // a service where scales are registered with their respective charts so that changing the - // scales does not require - Chart.scaleService = { - // The interesting function - fitScalesForChart: function(chartInstance, width, height) { - var xPadding = 10; - var yPadding = 10; - - if (chartInstance) { - var leftScales = helpers.where(chartInstance.scales, function(scaleInstance) { - return scaleInstance.options.position == "left"; - }); - var rightScales = helpers.where(chartInstance.scales, function(scaleInstance) { - return scaleInstance.options.position == "right"; - }); - var topScales = helpers.where(chartInstance.scales, function(scaleInstance) { - return scaleInstance.options.position == "top"; - }); - var bottomScales = helpers.where(chartInstance.scales, function(scaleInstance) { - return scaleInstance.options.position == "bottom"; - }); - - // Adjust the padding to take into account displaying labels - if (topScales.length === 0 || bottomScales.length === 0) { - var maxFontHeight = 0; - - var maxFontHeightFunction = function(scaleInstance) { - if (scaleInstance.options.labels.show) { - // Only consider font sizes for axes that actually show labels - maxFontHeight = Math.max(maxFontHeight, scaleInstance.options.labels.fontSize); - } - }; - - helpers.each(leftScales, maxFontHeightFunction); - helpers.each(rightScales, maxFontHeightFunction); - - if (topScales.length === 0) { - // Add padding so that we can handle drawing the top nicely - yPadding += 0.75 * maxFontHeight; // 0.75 since padding added on both sides - } - - if (bottomScales.length === 0) { - // Add padding so that we can handle drawing the bottom nicely - yPadding += 1.5 * maxFontHeight; - } - } - - // Essentially we now have any number of scales on each of the 4 sides. - // Our canvas looks like the following. - // The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and - // B1 is the bottom axis - // |------------------------------------------------------| - // | | T1 | | - // |----|-----|-------------------------------------|-----| - // | | | | | - // | L1 | L2 | Chart area | R1 | - // | | | | | - // | | | | | - // |----|-----|-------------------------------------|-----| - // | | B1 | | - // | | | | - // |------------------------------------------------------| - - // What we do to find the best sizing, we do the following - // 1. Determine the minimum size of the chart area. - // 2. Split the remaining width equally between each vertical axis - // 3. Split the remaining height equally between each horizontal axis - // 4. Give each scale the maximum size it can be. The scale will return it's minimum size - // 5. Adjust the sizes of each axis based on it's minimum reported size. - // 6. Refit each axis - // 7. Position each axis in the final location - // 8. Tell the chart the final location of the chart area - - // Step 1 - var chartWidth = width / 2; // min 50% - var chartHeight = height / 2; // min 50% - var aspectRatio = chartHeight / chartWidth; - var screenAspectRatio; - - if (chartInstance.options.maintainAspectRatio) { - screenAspectRatio = height / width; - - if (aspectRatio != screenAspectRatio) { - chartHeight = chartWidth * screenAspectRatio; - aspectRatio = screenAspectRatio; - } - } - - chartWidth -= (2 * xPadding); - chartHeight-= (2 * yPadding); - - // Step 2 - var verticalScaleWidth = (width - chartWidth) / (leftScales.length + rightScales.length); - - // Step 3 - var horizontalScaleHeight = (height - chartHeight) / (topScales.length + bottomScales.length); - - // Step 4; - var minimumScaleSizes = []; - - var verticalScaleMinSizeFunction = function(scaleInstance) { - var minSize = scaleInstance.fit(verticalScaleWidth, chartHeight); - minimumScaleSizes.push({ - horizontal: false, - minSize: minSize, - scale: scaleInstance, - }); - }; - - var horizontalScaleMinSizeFunction = function(scaleInstance) { - var minSize = scaleInstance.fit(chartWidth, horizontalScaleHeight); - minimumScaleSizes.push({ - horizontal: true, - minSize: minSize, - scale: scaleInstance, - }); - }; - - // vertical scales - helpers.each(leftScales, verticalScaleMinSizeFunction); - helpers.each(rightScales, verticalScaleMinSizeFunction); - - // horizontal scales - helpers.each(topScales, horizontalScaleMinSizeFunction); - helpers.each(bottomScales, horizontalScaleMinSizeFunction); - - // Step 5 - var maxChartHeight = height - (2 * yPadding); - var maxChartWidth = width - (2 * xPadding); - - helpers.each(minimumScaleSizes, function(wrapper) { - if (wrapper.horizontal) { - maxChartHeight -= wrapper.minSize.height; - } else { - maxChartWidth -= wrapper.minSize.width; - } - }); - - // At this point, maxChartHeight and maxChartWidth are the size the chart area could - // be if the axes are drawn at their minimum sizes. - if (chartInstance.options.maintainAspectRatio) { - // Figure out what the real max size will be - var maxAspectRatio = maxChartHeight / maxChartWidth; - - if (maxAspectRatio != screenAspectRatio) { - // Need to adjust - if (maxChartHeight < maxChartWidth) { - maxChartWidth = maxChartHeight / screenAspectRatio; - } - else { - maxChartHeight = maxChartWidth * screenAspectRatio; - } - } - } - - // Step 6 - var verticalScaleFitFunction = function(scaleInstance) { - var wrapper = helpers.findNextWhere(minimumScaleSizes, function(wrapper) { - return wrapper.scale === scaleInstance; - }); - if (wrapper) { - scaleInstance.fit(wrapper.minSize.width, maxChartHeight); - } - }; - - var horizontalScaleFitFunction = function(scaleInstance) { - var wrapper = helpers.findNextWhere(minimumScaleSizes, function(wrapper) { - return wrapper.scale === scaleInstance; - }); + // The scale service is used to resize charts along with all of their axes. We make this as + // a service where scales are registered with their respective charts so that changing the + // scales does not require + Chart.scaleService = { + // The interesting function + fitScalesForChart: function(chartInstance, width, height) { + var xPadding = 10; + var yPadding = 10; - if (wrapper) { - scaleInstance.fit(maxChartWidth, wrapper.minSize.width); - } - }; - - helpers.each(leftScales, verticalScaleFitFunction); - helpers.each(rightScales, verticalScaleFitFunction); - helpers.each(topScales, horizontalScaleFitFunction); - helpers.each(bottomScales, horizontalScaleFitFunction); - - // Step 7 - var totalLeftWidth = xPadding; - var totalTopHeight = yPadding; - - // Calculate total width of all left axes - helpers.each(leftScales, function(scaleInstance) { - totalLeftWidth += scaleInstance.width; - }); - - // Calculate total height of all top axes - helpers.each(topScales, function(scaleInstance) { - totalTopHeight += scaleInstance.height; - }); - - // Position the scales - var left = xPadding; - var top = yPadding; - var right = 0; - var bottom = 0; - - var verticalScalePlacer = function(scaleInstance) { - scaleInstance.left = left; - scaleInstance.right = left + scaleInstance.width; - scaleInstance.top = totalTopHeight; - scaleInstance.bottom = totalTopHeight + maxChartHeight; - - // Move to next point - left = scaleInstance.right; - }; - - var horizontalScalePlacer = function(scaleInstance) { - scaleInstance.left = totalLeftWidth; - scaleInstance.right = totalLeftWidth + maxChartWidth; - scaleInstance.top = top; - scaleInstance.bottom = top + scaleInstance.height; - - // Move to next point - top = scaleInstance.bottom; - }; - - helpers.each(leftScales, verticalScalePlacer); - helpers.each(topScales, horizontalScalePlacer); - - // Account for chart width and height - left += maxChartWidth; - top += maxChartHeight; - - helpers.each(rightScales, verticalScalePlacer); - helpers.each(bottomScales, horizontalScalePlacer); - - // Step 8 - chartInstance.chartArea = { - left: totalLeftWidth, - top: totalTopHeight, - right: totalLeftWidth + maxChartWidth, - bottom: totalTopHeight + maxChartHeight, - }; - } - } - }; - - // Scale registration object. Extensions can register new scale types (such as log or DB scales) and then - // use the new chart options to grab the correct scale - Chart.scales = { - constructors: {}, - // Use a registration function so that we can move to an ES6 map when we no longer need to support - // old browsers - registerScaleType: function(scaleType, scaleConstructor) { - this.constructors[scaleType] = scaleConstructor; - }, - getScaleConstructor: function(scaleType) { - return this.constructors.hasOwnProperty(scaleType) ? this.constructors[scaleType] : undefined; - } - }; - - var LinearScale = Chart.Element.extend({ - calculateRange: helpers.noop, // overridden in the chart. Will set min and max as properties of the scale for later use - isHorizontal: function() { - return this.options.position == "top" || this.options.position == "bottom"; - }, - generateTicks: function(width, height) { - // We need to decide how many ticks we are going to have. Each tick draws a grid line. - // There are two possibilities. The first is that the user has manually overridden the scale - // calculations in which case the job is easy. The other case is that we have to do it ourselves - // - // We assume at this point that the scale object has been updated with the following values - // by the chart. - // min: this is the minimum value of the scale - // max: this is the maximum value of the scale - // options: contains the options for the scale. This is referenced from the user settings - // rather than being cloned. This ensures that updates always propogate to a redraw - - // Reset the ticks array. Later on, we will draw a grid line at these positions - // The array simply contains the numerical value of the spots where ticks will be - this.ticks = []; - - if (this.options.override) { - // The user has specified the manual override. We use <= instead of < so that - // we get the final line - for (var i = 0; i <= this.options.override.steps; ++i) { - var value = this.options.override.start + (i * this.options.override.stepWidth); - ticks.push(value); - } - } - else { - // Figure out what the max number of ticks we can support it is based on the size of - // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 - // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on - // the graph - - var maxTicks; - - if (this.isHorizontal()) { - maxTicks = Math.min(11, Math.ceil(width / 50)); - } else { - // The factor of 2 used to scale the font size has been experimentally determined. - maxTicks = Math.min(11, Math.ceil(height / (2 * this.options.labels.fontSize))); - } - - // Make sure we always have at least 2 ticks - maxTicks = Math.max(2, maxTicks); - - // To get a "nice" value for the tick spacing, we will use the appropriately named - // "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks - // for details. - - // If we are forcing it to begin at 0, but 0 will already be rendered on the chart, - // do nothing since that would make the chart weird. If the user really wants a weird chart - // axis, they can manually override it - if (this.options.beginAtZero) { - var minSign = helpers.sign(this.min); - var maxSign = helpers.sign(this.max); - - if (minSign < 0 && maxSign < 0) { - // move the top up to 0 - this.max = 0; - } else if (minSign > 0 && maxSign > 0) { - // move the botttom down to 0 - this.min = 0; - } - } - - var niceRange = helpers.niceNum(this.max - this.min, false); - var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true); - var niceMin = Math.floor(this.min / spacing) * spacing; - var niceMax = Math.ceil(this.max / spacing) * spacing; - - // Put the values into the ticks array - for (var j = niceMin; j <= niceMax; j += spacing) { - this.ticks.push(j); - } - } - - if (this.options.position == "left" || this.options.position == "right") { - // We are in a vertical orientation. The top value is the highest. So reverse the array - this.ticks.reverse(); - } - - // At this point, we need to update our max and min given the tick values since we have expanded the - // range of the scale - this.max = helpers.max(this.ticks); - this.min = helpers.min(this.ticks); - }, - buildLabels: function() { - // We assume that this has been run after ticks have been generated. We try to figure out - // a label for each tick. - this.labels = []; - - helpers.each(this.ticks, function(tick, index, ticks) { - var label; - - if (this.options.labels.userCallback) { - // If the user provided a callback for label generation, use that as first priority - label = this.options.lables.userCallback(tick, index, ticks); - } else if (this.options.labels.template) { - // else fall back to the template string - label = helpers.template(this.options.labels.template, { - value: tick - }); - } - - this.labels.push(label ? label : ""); // empty string will not render so we're good - }, this); - }, - getPixelForValue: function(value) { - // This must be called after fit has been run so that - // this.left, this.top, this.right, and this.bottom have been defined - var pixel; - var range = this.max - this.min; - - if (this.isHorizontal()) { - pixel = this.left + (this.width / range * (value - this.min)); - } else { - // Bottom - top since pixels increase downard on a screen - pixel = this.bottom - (this.height / range * (value - this.min)); - } - - return pixel; - }, - // Fit this axis to the given size - // @param {number} maxWidth : the max width the axis can be - // @param {number} maxHeight: the max height the axis can be - // @return {object} minSize : the minimum size needed to draw the axis - fit: function(maxWidth, maxHeight) { - this.calculateRange(); - this.generateTicks(maxWidth, maxHeight); - this.buildLabels(); - - var minSize = { - width: 0, - height: 0, - }; - - if (this.isHorizontal()) { - minSize.width = maxWidth; // fill all the width - - // In a horizontal axis, we need some room for the scale to be drawn - // - // ----------------------------------------------------- - // | | | | | - // - minSize.height = this.options.gridLines.show ? 25 : 0; - } else { - minSize.height = maxHeight; // fill all the height - - // In a vertical axis, we need some room for the scale to be drawn. - // The actual grid lines will be drawn on the chart area, however, we need to show - // ticks where the axis actually is. - // We will allocate 25px for this width - // | - // -| - // | - // | - // -| - // | - // | - // -| - minSize.width = this.options.gridLines.show ? 25 : 0; - } - - if (this.options.labels.show) { - // Don't bother fitting the labels if we are not showing them - var labelFont = helpers.fontString(this.options.labels.fontSize, - this.options.labels.fontStyle, this.options.labels.fontFamily); - - if (this.isHorizontal()) { - // A horizontal axis is more constrained by the height. - var maxLabelHeight = maxHeight - minSize.height; - var labelHeight = 1.5 * this.options.labels.fontSize; - minSize.height = Math.min(maxHeight, minSize.height + labelHeight); - } else { - // A vertical axis is more constrained by the width. Labels are the dominant factor - // here, so get that length first - var maxLabelWidth = maxWidth - minSize.width; - var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.labels); - - if (largestTextWidth < maxLabelWidth) { - // We don't need all the room - minSize.width += largestTextWidth; - } else { - // Expand to max size - minSize.width = maxWidth; - } - } - } - - this.width = minSize.width; - this.height = minSize.height; - return minSize; - }, - // Actualy draw the scale on the canvas - // @param {rectangle} chartArea : the area of the chart to draw full grid lines on - draw: function(chartArea) { - if (this.options.display) { - - var setContextLineSettings; - var hasZero; - - // Make sure we draw text in the correct color - this.ctx.fillStyle = this.options.labels.fontColor; - - if (this.isHorizontal()) { - if (this.options.gridLines.show) { - // Draw the horizontal line - setContextLineSettings = true; - hasZero = helpers.findNextWhere(this.ticks, function(tick) { return tick === 0; }) !== undefined; - var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10; - var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom; + if (chartInstance) { + var leftScales = helpers.where(chartInstance.scales, function(scaleInstance) { + return scaleInstance.options.position == "left"; + }); + var rightScales = helpers.where(chartInstance.scales, function(scaleInstance) { + return scaleInstance.options.position == "right"; + }); + var topScales = helpers.where(chartInstance.scales, function(scaleInstance) { + return scaleInstance.options.position == "top"; + }); + var bottomScales = helpers.where(chartInstance.scales, function(scaleInstance) { + return scaleInstance.options.position == "bottom"; + }); - helpers.each(this.ticks, function(tick, index) { - // Grid lines are vertical - var xValue = this.getPixelForValue(tick); - - if (tick === 0 || (!hasZero && index === 0)) { - // Draw the 0 point specially or the left if there is no 0 - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; - setContextLineSettings = false; - } - - xValue += helpers.aliasPixel(this.ctx.lineWidth); - - // Draw the label area - this.ctx.beginPath(); + // Adjust the padding to take into account displaying labels + if (topScales.length === 0 || bottomScales.length === 0) { + var maxFontHeight = 0; - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xValue, yTickStart); - this.ctx.lineTo(xValue, yTickEnd); - } - - // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(xValue, chartArea.top); - this.ctx.lineTo(xValue, chartArea.bottom); - } + var maxFontHeightFunction = function(scaleInstance) { + if (scaleInstance.options.labels.show) { + // Only consider font sizes for axes that actually show labels + maxFontHeight = Math.max(maxFontHeight, scaleInstance.options.labels.fontSize); + } + }; - // Need to stroke in the loop because we are potentially changing line widths & colours - this.ctx.stroke(); - }, this); - } + helpers.each(leftScales, maxFontHeightFunction); + helpers.each(rightScales, maxFontHeightFunction); - if (this.options.labels.show) { - // Draw the labels - - var labelStartY; - - if (this.options.position == "top") { - labelStartY = this.top; - } else { - // bottom side - labelStartY = this.top + 20; - } - - this.ctx.textAlign = "center"; - this.ctx.textBaseline = "top"; - this.ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); - - helpers.each(this.labels, function(label, index) { - var xValue = this.getPixelForValue(this.ticks[index]); - this.ctx.fillText(label, xValue, labelStartY); - }, this); - } - } else { - // Vertical - if (this.options.gridLines.show) { - - // Draw the vertical line - setContextLineSettings = true; - hasZero = helpers.findNextWhere(this.ticks, function(tick) { return tick === 0; }) !== undefined; - var xTickStart = this.options.position == "right" ? this.left : this.right - 10; - var xTickEnd = this.options.position == "right" ? this.left + 10 : this.right; - - helpers.each(this.ticks, function(tick, index) { - // Grid lines are horizontal - var yValue = this.getPixelForValue(tick); - - if (tick === 0 || (!hasZero && index === 0)) { - // Draw the 0 point specially or the bottom if there is no 0 - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; - setContextLineSettings = false; // use boolean to indicate that we only want to do this once - } - - yValue += helpers.aliasPixel(this.ctx.lineWidth); + if (topScales.length === 0) { + // Add padding so that we can handle drawing the top nicely + yPadding += 0.75 * maxFontHeight; // 0.75 since padding added on both sides + } - // Draw the label area - this.ctx.beginPath(); - - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xTickStart, yValue); - this.ctx.lineTo(xTickEnd, yValue); - } - - // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(chartArea.left, yValue); - this.ctx.lineTo(chartArea.right, yValue); - } + if (bottomScales.length === 0) { + // Add padding so that we can handle drawing the bottom nicely + yPadding += 1.5 * maxFontHeight; + } + } - this.ctx.stroke(); - }, this); - } - - if (this.options.labels.show) { - // Draw the labels - - var labelStartX; - var maxLabelWidth = this.width - 25; - - if (this.options.position == "left") { - labelStartX = this.left; - } else { - // right side - labelStartX = this.left + 20; - } - - this.ctx.textAlign = "left"; - this.ctx.textBaseline = "middle"; - this.ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); - - helpers.each(this.labels, function(label, index) { - var yValue = this.getPixelForValue(this.ticks[index]); - this.ctx.fillText(label, labelStartX, yValue, maxLabelWidth); - }, this); - } - } - } - } - }); - Chart.scales.registerScaleType("linear", LinearScale); + // Essentially we now have any number of scales on each of the 4 sides. + // Our canvas looks like the following. + // The areas L1 and L2 are the left axes. R1 is the right axis, T1 is the top axis and + // B1 is the bottom axis + // |------------------------------------------------------| + // | | T1 | | + // |----|-----|-------------------------------------|-----| + // | | | | | + // | L1 | L2 | Chart area | R1 | + // | | | | | + // | | | | | + // |----|-----|-------------------------------------|-----| + // | | B1 | | + // | | | | + // |------------------------------------------------------| - var DatasetScale = Chart.Element.extend({ - // overridden in the chart. Will set min and max as properties of the scale for later use. Min will always be 0 when using a dataset and max will be the number of items in the dataset - calculateRange: helpers.noop, - isHorizontal: function() { - return this.options.position == "top" || this.options.position == "bottom"; - }, - getPixelForValue: function(value, index, includeOffset) { - // This must be called after fit has been run so that - // this.left, this.top, this.right, and this.bottom have been defined - if (this.isHorizontal()) { - var isRotated = (this.labelRotation > 0); - var innerWidth = this.width - (this.paddingLeft + this.paddingRight); - var valueWidth = innerWidth / Math.max((this.max - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1); - var valueOffset = (valueWidth * index) + this.paddingLeft; + // What we do to find the best sizing, we do the following + // 1. Determine the minimum size of the chart area. + // 2. Split the remaining width equally between each vertical axis + // 3. Split the remaining height equally between each horizontal axis + // 4. Give each scale the maximum size it can be. The scale will return it's minimum size + // 5. Adjust the sizes of each axis based on it's minimum reported size. + // 6. Refit each axis + // 7. Position each axis in the final location + // 8. Tell the chart the final location of the chart area - if (this.options.gridLines.offsetGridLines && includeOffset) { - valueOffset += (valueWidth / 2); - } + // Step 1 + var chartWidth = width / 2; // min 50% + var chartHeight = height / 2; // min 50% + var aspectRatio = chartHeight / chartWidth; + var screenAspectRatio; - return this.left + Math.round(valueOffset); - } else { - return this.top + (index * (this.height / this.max)); - } - }, - calculateLabelRotation: function(maxHeight) { + if (chartInstance.options.maintainAspectRatio) { + screenAspectRatio = height / width; + + if (aspectRatio != screenAspectRatio) { + chartHeight = chartWidth * screenAspectRatio; + aspectRatio = screenAspectRatio; + } + } + + chartWidth -= (2 * xPadding); + chartHeight -= (2 * yPadding); + + // Step 2 + var verticalScaleWidth = (width - chartWidth) / (leftScales.length + rightScales.length); + + // Step 3 + var horizontalScaleHeight = (height - chartHeight) / (topScales.length + bottomScales.length); + + // Step 4; + var minimumScaleSizes = []; + + var verticalScaleMinSizeFunction = function(scaleInstance) { + var minSize = scaleInstance.fit(verticalScaleWidth, chartHeight); + minimumScaleSizes.push({ + horizontal: false, + minSize: minSize, + scale: scaleInstance, + }); + }; + + var horizontalScaleMinSizeFunction = function(scaleInstance) { + var minSize = scaleInstance.fit(chartWidth, horizontalScaleHeight); + minimumScaleSizes.push({ + horizontal: true, + minSize: minSize, + scale: scaleInstance, + }); + }; + + // vertical scales + helpers.each(leftScales, verticalScaleMinSizeFunction); + helpers.each(rightScales, verticalScaleMinSizeFunction); + + // horizontal scales + helpers.each(topScales, horizontalScaleMinSizeFunction); + helpers.each(bottomScales, horizontalScaleMinSizeFunction); + + // Step 5 + var maxChartHeight = height - (2 * yPadding); + var maxChartWidth = width - (2 * xPadding); + + helpers.each(minimumScaleSizes, function(wrapper) { + if (wrapper.horizontal) { + maxChartHeight -= wrapper.minSize.height; + } else { + maxChartWidth -= wrapper.minSize.width; + } + }); + + // At this point, maxChartHeight and maxChartWidth are the size the chart area could + // be if the axes are drawn at their minimum sizes. + if (chartInstance.options.maintainAspectRatio) { + // Figure out what the real max size will be + var maxAspectRatio = maxChartHeight / maxChartWidth; + + if (maxAspectRatio != screenAspectRatio) { + // Need to adjust + if (maxChartHeight < maxChartWidth) { + maxChartWidth = maxChartHeight / screenAspectRatio; + } else { + maxChartHeight = maxChartWidth * screenAspectRatio; + } + } + } + + // Step 6 + var verticalScaleFitFunction = function(scaleInstance) { + var wrapper = helpers.findNextWhere(minimumScaleSizes, function(wrapper) { + return wrapper.scale === scaleInstance; + }); + + if (wrapper) { + scaleInstance.fit(wrapper.minSize.width, maxChartHeight); + } + }; + + var horizontalScaleFitFunction = function(scaleInstance) { + var wrapper = helpers.findNextWhere(minimumScaleSizes, function(wrapper) { + return wrapper.scale === scaleInstance; + }); + + if (wrapper) { + scaleInstance.fit(maxChartWidth, wrapper.minSize.width); + } + }; + + helpers.each(leftScales, verticalScaleFitFunction); + helpers.each(rightScales, verticalScaleFitFunction); + helpers.each(topScales, horizontalScaleFitFunction); + helpers.each(bottomScales, horizontalScaleFitFunction); + + // Step 7 + var totalLeftWidth = xPadding; + var totalTopHeight = yPadding; + + // Calculate total width of all left axes + helpers.each(leftScales, function(scaleInstance) { + totalLeftWidth += scaleInstance.width; + }); + + // Calculate total height of all top axes + helpers.each(topScales, function(scaleInstance) { + totalTopHeight += scaleInstance.height; + }); + + // Position the scales + var left = xPadding; + var top = yPadding; + var right = 0; + var bottom = 0; + + var verticalScalePlacer = function(scaleInstance) { + scaleInstance.left = left; + scaleInstance.right = left + scaleInstance.width; + scaleInstance.top = totalTopHeight; + scaleInstance.bottom = totalTopHeight + maxChartHeight; + + // Move to next point + left = scaleInstance.right; + }; + + var horizontalScalePlacer = function(scaleInstance) { + scaleInstance.left = totalLeftWidth; + scaleInstance.right = totalLeftWidth + maxChartWidth; + scaleInstance.top = top; + scaleInstance.bottom = top + scaleInstance.height; + + // Move to next point + top = scaleInstance.bottom; + }; + + helpers.each(leftScales, verticalScalePlacer); + helpers.each(topScales, horizontalScalePlacer); + + // Account for chart width and height + left += maxChartWidth; + top += maxChartHeight; + + helpers.each(rightScales, verticalScalePlacer); + helpers.each(bottomScales, horizontalScalePlacer); + + // Step 8 + chartInstance.chartArea = { + left: totalLeftWidth, + top: totalTopHeight, + right: totalLeftWidth + maxChartWidth, + bottom: totalTopHeight + maxChartHeight, + }; + } + } + }; + + // Scale registration object. Extensions can register new scale types (such as log or DB scales) and then + // use the new chart options to grab the correct scale + Chart.scales = { + constructors: {}, + // Use a registration function so that we can move to an ES6 map when we no longer need to support + // old browsers + registerScaleType: function(scaleType, scaleConstructor) { + this.constructors[scaleType] = scaleConstructor; + }, + getScaleConstructor: function(scaleType) { + return this.constructors.hasOwnProperty(scaleType) ? this.constructors[scaleType] : undefined; + } + }; + + var LinearScale = Chart.Element.extend({ + calculateRange: helpers.noop, // overridden in the chart. Will set min and max as properties of the scale for later use + isHorizontal: function() { + return this.options.position == "top" || this.options.position == "bottom"; + }, + generateTicks: function(width, height) { + // We need to decide how many ticks we are going to have. Each tick draws a grid line. + // There are two possibilities. The first is that the user has manually overridden the scale + // calculations in which case the job is easy. The other case is that we have to do it ourselves + // + // We assume at this point that the scale object has been updated with the following values + // by the chart. + // min: this is the minimum value of the scale + // max: this is the maximum value of the scale + // options: contains the options for the scale. This is referenced from the user settings + // rather than being cloned. This ensures that updates always propogate to a redraw + + // Reset the ticks array. Later on, we will draw a grid line at these positions + // The array simply contains the numerical value of the spots where ticks will be + this.ticks = []; + + if (this.options.override) { + // The user has specified the manual override. We use <= instead of < so that + // we get the final line + for (var i = 0; i <= this.options.override.steps; ++i) { + var value = this.options.override.start + (i * this.options.override.stepWidth); + ticks.push(value); + } + } else { + // Figure out what the max number of ticks we can support it is based on the size of + // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 + // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on + // the graph + + var maxTicks; + + if (this.isHorizontal()) { + maxTicks = Math.min(11, Math.ceil(width / 50)); + } else { + // The factor of 2 used to scale the font size has been experimentally determined. + maxTicks = Math.min(11, Math.ceil(height / (2 * this.options.labels.fontSize))); + } + + // Make sure we always have at least 2 ticks + maxTicks = Math.max(2, maxTicks); + + // To get a "nice" value for the tick spacing, we will use the appropriately named + // "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks + // for details. + + // If we are forcing it to begin at 0, but 0 will already be rendered on the chart, + // do nothing since that would make the chart weird. If the user really wants a weird chart + // axis, they can manually override it + if (this.options.beginAtZero) { + var minSign = helpers.sign(this.min); + var maxSign = helpers.sign(this.max); + + if (minSign < 0 && maxSign < 0) { + // move the top up to 0 + this.max = 0; + } else if (minSign > 0 && maxSign > 0) { + // move the botttom down to 0 + this.min = 0; + } + } + + var niceRange = helpers.niceNum(this.max - this.min, false); + var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true); + var niceMin = Math.floor(this.min / spacing) * spacing; + var niceMax = Math.ceil(this.max / spacing) * spacing; + + // Put the values into the ticks array + for (var j = niceMin; j <= niceMax; j += spacing) { + this.ticks.push(j); + } + } + + if (this.options.position == "left" || this.options.position == "right") { + // We are in a vertical orientation. The top value is the highest. So reverse the array + this.ticks.reverse(); + } + + // At this point, we need to update our max and min given the tick values since we have expanded the + // range of the scale + this.max = helpers.max(this.ticks); + this.min = helpers.min(this.ticks); + }, + buildLabels: function() { + // We assume that this has been run after ticks have been generated. We try to figure out + // a label for each tick. + this.labels = []; + + helpers.each(this.ticks, function(tick, index, ticks) { + var label; + + if (this.options.labels.userCallback) { + // If the user provided a callback for label generation, use that as first priority + label = this.options.lables.userCallback(tick, index, ticks); + } else if (this.options.labels.template) { + // else fall back to the template string + label = helpers.template(this.options.labels.template, { + value: tick + }); + } + + this.labels.push(label ? label : ""); // empty string will not render so we're good + }, this); + }, + getPixelForValue: function(value) { + // This must be called after fit has been run so that + // this.left, this.top, this.right, and this.bottom have been defined + var pixel; + var range = this.max - this.min; + + if (this.isHorizontal()) { + pixel = this.left + (this.width / range * (value - this.min)); + } else { + // Bottom - top since pixels increase downard on a screen + pixel = this.bottom - (this.height / range * (value - this.min)); + } + + return pixel; + }, + // Fit this axis to the given size + // @param {number} maxWidth : the max width the axis can be + // @param {number} maxHeight: the max height the axis can be + // @return {object} minSize : the minimum size needed to draw the axis + fit: function(maxWidth, maxHeight) { + this.calculateRange(); + this.generateTicks(maxWidth, maxHeight); + this.buildLabels(); + + var minSize = { + width: 0, + height: 0, + }; + + if (this.isHorizontal()) { + minSize.width = maxWidth; // fill all the width + + // In a horizontal axis, we need some room for the scale to be drawn + // + // ----------------------------------------------------- + // | | | | | + // + minSize.height = this.options.gridLines.show ? 25 : 0; + } else { + minSize.height = maxHeight; // fill all the height + + // In a vertical axis, we need some room for the scale to be drawn. + // The actual grid lines will be drawn on the chart area, however, we need to show + // ticks where the axis actually is. + // We will allocate 25px for this width + // | + // -| + // | + // | + // -| + // | + // | + // -| + minSize.width = this.options.gridLines.show ? 25 : 0; + } + + if (this.options.labels.show) { + // Don't bother fitting the labels if we are not showing them + var labelFont = helpers.fontString(this.options.labels.fontSize, + this.options.labels.fontStyle, this.options.labels.fontFamily); + + if (this.isHorizontal()) { + // A horizontal axis is more constrained by the height. + var maxLabelHeight = maxHeight - minSize.height; + var labelHeight = 1.5 * this.options.labels.fontSize; + minSize.height = Math.min(maxHeight, minSize.height + labelHeight); + } else { + // A vertical axis is more constrained by the width. Labels are the dominant factor + // here, so get that length first + var maxLabelWidth = maxWidth - minSize.width; + var largestTextWidth = helpers.longestText(this.ctx, labelFont, this.labels); + + if (largestTextWidth < maxLabelWidth) { + // We don't need all the room + minSize.width += largestTextWidth; + } else { + // Expand to max size + minSize.width = maxWidth; + } + } + } + + this.width = minSize.width; + this.height = minSize.height; + return minSize; + }, + // Actualy draw the scale on the canvas + // @param {rectangle} chartArea : the area of the chart to draw full grid lines on + draw: function(chartArea) { + if (this.options.display) { + + var setContextLineSettings; + var hasZero; + + // Make sure we draw text in the correct color + this.ctx.fillStyle = this.options.labels.fontColor; + + if (this.isHorizontal()) { + if (this.options.gridLines.show) { + // Draw the horizontal line + setContextLineSettings = true; + hasZero = helpers.findNextWhere(this.ticks, function(tick) { + return tick === 0; + }) !== undefined; + var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10; + var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom; + + helpers.each(this.ticks, function(tick, index) { + // Grid lines are vertical + var xValue = this.getPixelForValue(tick); + + if (tick === 0 || (!hasZero && index === 0)) { + // Draw the 0 point specially or the left if there is no 0 + this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; + this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; + setContextLineSettings = true; // reset next time + } else if (setContextLineSettings) { + this.ctx.lineWidth = this.options.gridLines.lineWidth; + this.ctx.strokeStyle = this.options.gridLines.color; + setContextLineSettings = false; + } + + xValue += helpers.aliasPixel(this.ctx.lineWidth); + + // Draw the label area + this.ctx.beginPath(); + + if (this.options.gridLines.drawTicks) { + this.ctx.moveTo(xValue, yTickStart); + this.ctx.lineTo(xValue, yTickEnd); + } + + // Draw the chart area + if (this.options.gridLines.drawOnChartArea) { + this.ctx.moveTo(xValue, chartArea.top); + this.ctx.lineTo(xValue, chartArea.bottom); + } + + // Need to stroke in the loop because we are potentially changing line widths & colours + this.ctx.stroke(); + }, this); + } + + if (this.options.labels.show) { + // Draw the labels + + var labelStartY; + + if (this.options.position == "top") { + labelStartY = this.top; + } else { + // bottom side + labelStartY = this.top + 20; + } + + this.ctx.textAlign = "center"; + this.ctx.textBaseline = "top"; + this.ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); + + helpers.each(this.labels, function(label, index) { + var xValue = this.getPixelForValue(this.ticks[index]); + this.ctx.fillText(label, xValue, labelStartY); + }, this); + } + } else { + // Vertical + if (this.options.gridLines.show) { + + // Draw the vertical line + setContextLineSettings = true; + hasZero = helpers.findNextWhere(this.ticks, function(tick) { + return tick === 0; + }) !== undefined; + var xTickStart = this.options.position == "right" ? this.left : this.right - 10; + var xTickEnd = this.options.position == "right" ? this.left + 10 : this.right; + + helpers.each(this.ticks, function(tick, index) { + // Grid lines are horizontal + var yValue = this.getPixelForValue(tick); + + if (tick === 0 || (!hasZero && index === 0)) { + // Draw the 0 point specially or the bottom if there is no 0 + this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; + this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; + setContextLineSettings = true; // reset next time + } else if (setContextLineSettings) { + this.ctx.lineWidth = this.options.gridLines.lineWidth; + this.ctx.strokeStyle = this.options.gridLines.color; + setContextLineSettings = false; // use boolean to indicate that we only want to do this once + } + + yValue += helpers.aliasPixel(this.ctx.lineWidth); + + // Draw the label area + this.ctx.beginPath(); + + if (this.options.gridLines.drawTicks) { + this.ctx.moveTo(xTickStart, yValue); + this.ctx.lineTo(xTickEnd, yValue); + } + + // Draw the chart area + if (this.options.gridLines.drawOnChartArea) { + this.ctx.moveTo(chartArea.left, yValue); + this.ctx.lineTo(chartArea.right, yValue); + } + + this.ctx.stroke(); + }, this); + } + + if (this.options.labels.show) { + // Draw the labels + + var labelStartX; + var maxLabelWidth = this.width - 25; + + if (this.options.position == "left") { + labelStartX = this.left; + } else { + // right side + labelStartX = this.left + 20; + } + + this.ctx.textAlign = "left"; + this.ctx.textBaseline = "middle"; + this.ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); + + helpers.each(this.labels, function(label, index) { + var yValue = this.getPixelForValue(this.ticks[index]); + this.ctx.fillText(label, labelStartX, yValue, maxLabelWidth); + }, this); + } + } + } + } + }); + Chart.scales.registerScaleType("linear", LinearScale); + + var DatasetScale = Chart.Element.extend({ + // overridden in the chart. Will set min and max as properties of the scale for later use. Min will always be 0 when using a dataset and max will be the number of items in the dataset + calculateRange: helpers.noop, + isHorizontal: function() { + return this.options.position == "top" || this.options.position == "bottom"; + }, + getPixelForValue: function(value, index, includeOffset) { + // This must be called after fit has been run so that + // this.left, this.top, this.right, and this.bottom have been defined + if (this.isHorizontal()) { + var isRotated = (this.labelRotation > 0); + var innerWidth = this.width - (this.paddingLeft + this.paddingRight); + var valueWidth = innerWidth / Math.max((this.max - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1); + var valueOffset = (valueWidth * index) + this.paddingLeft; + + if (this.options.gridLines.offsetGridLines && includeOffset) { + valueOffset += (valueWidth / 2); + } + + return this.left + Math.round(valueOffset); + } else { + return this.top + (index * (this.height / this.max)); + } + }, + calculateLabelRotation: function(maxHeight) { //Get the width of each grid by calculating the difference //between x offsets between 0 and 1. var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); @@ -638,8 +640,8 @@ var firstWidth = this.ctx.measureText(this.labels[0]).width; var lastWidth = this.ctx.measureText(this.labels[this.labels.length - 1]).width; - var firstRotated; - var lastRotated; + var firstRotated; + var lastRotated; this.paddingRight = lastWidth / 2 + 3; this.paddingLeft = firstWidth / 2 + 3; @@ -653,7 +655,7 @@ var firstRotatedWidth; this.labelWidth = originalLabelWidth; - + //Allow 3 pixels x2 padding either side for label readability // only the index matters for a dataset scale, but we want a consistent interface between scales var gridWidth = Math.floor(this.getPixelForValue(0, 1) - this.getPixelForValue(0, 0)) - 6; @@ -674,9 +676,9 @@ this.paddingRight = this.options.labels.fontSize / 2; if (sinRotation * originalLabelWidth > maxHeight) { - // go back one step - this.labelRotation--; - break; + // go back one step + this.labelRotation--; + break; } this.labelRotation++; @@ -690,117 +692,116 @@ } }, - // Fit this axis to the given size - // @param {number} maxWidth : the max width the axis can be - // @param {number} maxHeight: the max height the axis can be - // @return {object} minSize : the minimum size needed to draw the axis - fit: function(maxWidth, maxHeight) { - this.calculateRange(); - this.calculateLabelRotation(); + // Fit this axis to the given size + // @param {number} maxWidth : the max width the axis can be + // @param {number} maxHeight: the max height the axis can be + // @return {object} minSize : the minimum size needed to draw the axis + fit: function(maxWidth, maxHeight) { + this.calculateRange(); + this.calculateLabelRotation(); - var minSize = { - width: 0, - height: 0, - }; + var minSize = { + width: 0, + height: 0, + }; - var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); - var longestLabelWidth = helpers.longestText(this.ctx, labelFont, this.labels); + var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); + var longestLabelWidth = helpers.longestText(this.ctx, labelFont, this.labels); - if (this.isHorizontal()) { - minSize.width = maxWidth; - this.width = maxWidth; + if (this.isHorizontal()) { + minSize.width = maxWidth; + this.width = maxWidth; - var labelHeight = (Math.cos(helpers.toRadians(this.labelRotation)) * longestLabelWidth) + 1.5 * this.options.labels.fontSize; - minSize.height = Math.min(labelHeight, maxHeight); - } else { - minSize.height = maxHeight; - this.height = maxHeight; + var labelHeight = (Math.cos(helpers.toRadians(this.labelRotation)) * longestLabelWidth) + 1.5 * this.options.labels.fontSize; + minSize.height = Math.min(labelHeight, maxHeight); + } else { + minSize.height = maxHeight; + this.height = maxHeight; - minSize.width = Math.min(longestLabelWidth + 6, maxWidth); - } + minSize.width = Math.min(longestLabelWidth + 6, maxWidth); + } - this.width = minSize.width; - this.height = minSize.height; - return minSize; - }, - // Actualy draw the scale on the canvas - // @param {rectangle} chartArea : the area of the chart to draw full grid lines on - draw: function(chartArea) { - if (this.options.display) { - - var setContextLineSettings; - - // Make sure we draw text in the correct color - this.ctx.fillStyle = this.options.labels.fontColor; - - if (this.isHorizontal()) { - setContextLineSettings = true; - var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10; - var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom; - var isRotated = this.labelRotation !== 0; + this.width = minSize.width; + this.height = minSize.height; + return minSize; + }, + // Actualy draw the scale on the canvas + // @param {rectangle} chartArea : the area of the chart to draw full grid lines on + draw: function(chartArea) { + if (this.options.display) { - helpers.each(this.labels, function(label, index) { - var xLineValue = this.getPixelForValue(label, index, false); // xvalues for grid lines - var xLabelValue= this.getPixelForValue(label, index, true); // x values for labels (need to consider offsetLabel option) + var setContextLineSettings; - if (this.options.gridLines.show) { - if (index === 0) { - // Draw the first index specially - this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; - this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; - setContextLineSettings = true; // reset next time - } else if (setContextLineSettings) { - this.ctx.lineWidth = this.options.gridLines.lineWidth; - this.ctx.strokeStyle = this.options.gridLines.color; - setContextLineSettings = false; - } - - xLineValue += helpers.aliasPixel(this.ctx.lineWidth); - - // Draw the label area - this.ctx.beginPath(); + // Make sure we draw text in the correct color + this.ctx.fillStyle = this.options.labels.fontColor; - if (this.options.gridLines.drawTicks) { - this.ctx.moveTo(xLineValue, yTickStart); - this.ctx.lineTo(xLineValue, yTickEnd); - } - - // Draw the chart area - if (this.options.gridLines.drawOnChartArea) { - this.ctx.moveTo(xLineValue, chartArea.top); - this.ctx.lineTo(xLineValue, chartArea.bottom); - } + if (this.isHorizontal()) { + setContextLineSettings = true; + var yTickStart = this.options.position == "bottom" ? this.top : this.bottom - 10; + var yTickEnd = this.options.position == "bottom" ? this.top + 10 : this.bottom; + var isRotated = this.labelRotation !== 0; - // Need to stroke in the loop because we are potentially changing line widths & colours - this.ctx.stroke(); - } + helpers.each(this.labels, function(label, index) { + var xLineValue = this.getPixelForValue(label, index, false); // xvalues for grid lines + var xLabelValue = this.getPixelForValue(label, index, true); // x values for labels (need to consider offsetLabel option) - if (this.options.labels.show) { - this.ctx.save(); - this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.top + 8); - this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); - this.ctx.font = this.font; - this.ctx.textAlign = (isRotated) ? "right" : "center"; - this.ctx.textBaseline = (isRotated) ? "middle" : "top"; - this.ctx.fillText(label, 0, 0); - this.ctx.restore(); - } - }, this); - } else { - // Vertical - if (this.options.gridLines.show) { - } - - if (this.options.labels.show) { - // Draw the labels - } - } - } - } - }); - Chart.scales.registerScaleType("dataset", DatasetScale); + if (this.options.gridLines.show) { + if (index === 0) { + // Draw the first index specially + this.ctx.lineWidth = this.options.gridLines.zeroLineWidth; + this.ctx.strokeStyle = this.options.gridLines.zeroLineColor; + setContextLineSettings = true; // reset next time + } else if (setContextLineSettings) { + this.ctx.lineWidth = this.options.gridLines.lineWidth; + this.ctx.strokeStyle = this.options.gridLines.color; + setContextLineSettings = false; + } - var LinearRadialScale = Chart.Element.extend({ + xLineValue += helpers.aliasPixel(this.ctx.lineWidth); + + // Draw the label area + this.ctx.beginPath(); + + if (this.options.gridLines.drawTicks) { + this.ctx.moveTo(xLineValue, yTickStart); + this.ctx.lineTo(xLineValue, yTickEnd); + } + + // Draw the chart area + if (this.options.gridLines.drawOnChartArea) { + this.ctx.moveTo(xLineValue, chartArea.top); + this.ctx.lineTo(xLineValue, chartArea.bottom); + } + + // Need to stroke in the loop because we are potentially changing line widths & colours + this.ctx.stroke(); + } + + if (this.options.labels.show) { + this.ctx.save(); + this.ctx.translate(xLabelValue, (isRotated) ? this.top + 12 : this.top + 8); + this.ctx.rotate(helpers.toRadians(this.labelRotation) * -1); + this.ctx.font = this.font; + this.ctx.textAlign = (isRotated) ? "right" : "center"; + this.ctx.textBaseline = (isRotated) ? "middle" : "top"; + this.ctx.fillText(label, 0, 0); + this.ctx.restore(); + } + }, this); + } else { + // Vertical + if (this.options.gridLines.show) {} + + if (this.options.labels.show) { + // Draw the labels + } + } + } + } + }); + Chart.scales.registerScaleType("dataset", DatasetScale); + + var LinearRadialScale = Chart.Element.extend({ initialize: function() { this.size = helpers.min([this.height, this.width]); this.drawingArea = (this.options.display) ? (this.size / 2) - (this.options.labels.fontSize / 2 + this.options.labels.backdropPaddingY) : (this.size / 2); @@ -821,99 +822,98 @@ }, calculateRange: helpers.noop, // overridden in chart generateTicks: function() { - // We need to decide how many ticks we are going to have. Each tick draws a grid line. - // There are two possibilities. The first is that the user has manually overridden the scale - // calculations in which case the job is easy. The other case is that we have to do it ourselves - // - // We assume at this point that the scale object has been updated with the following values - // by the chart. - // min: this is the minimum value of the scale - // max: this is the maximum value of the scale - // options: contains the options for the scale. This is referenced from the user settings - // rather than being cloned. This ensures that updates always propogate to a redraw - - // Reset the ticks array. Later on, we will draw a grid line at these positions - // The array simply contains the numerical value of the spots where ticks will be - this.ticks = []; - - if (this.options.override) { - // The user has specified the manual override. We use <= instead of < so that - // we get the final line - for (var i = 0; i <= this.options.override.steps; ++i) { - var value = this.options.override.start + (i * this.options.override.stepWidth); - ticks.push(value); - } - } - else { - // Figure out what the max number of ticks we can support it is based on the size of - // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 - // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on - // the graph - - var maxTicks = Math.min(11, Math.ceil(this.drawingArea / (2 * this.options.labels.fontSize))); - - // Make sure we always have at least 2 ticks - maxTicks = Math.max(2, maxTicks); - - // To get a "nice" value for the tick spacing, we will use the appropriately named - // "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks - // for details. - - // If we are forcing it to begin at 0, but 0 will already be rendered on the chart, - // do nothing since that would make the chart weird. If the user really wants a weird chart - // axis, they can manually override it - if (this.options.beginAtZero) { - var minSign = helpers.sign(this.min); - var maxSign = helpers.sign(this.max); - - if (minSign < 0 && maxSign < 0) { - // move the top up to 0 - this.max = 0; - } else if (minSign > 0 && maxSign > 0) { - // move the botttom down to 0 - this.min = 0; - } - } - - var niceRange = helpers.niceNum(this.max - this.min, false); - var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true); - var niceMin = Math.floor(this.min / spacing) * spacing; - var niceMax = Math.ceil(this.max / spacing) * spacing; - - // Put the values into the ticks array - for (var j = niceMin; j <= niceMax; j += spacing) { - this.ticks.push(j); - } - } - - if (this.options.position == "left" || this.options.position == "right") { - // We are in a vertical orientation. The top value is the highest. So reverse the array - this.ticks.reverse(); - } - - // At this point, we need to update our max and min given the tick values since we have expanded the - // range of the scale - this.max = helpers.max(this.ticks); - this.min = helpers.min(this.ticks); - }, + // We need to decide how many ticks we are going to have. Each tick draws a grid line. + // There are two possibilities. The first is that the user has manually overridden the scale + // calculations in which case the job is easy. The other case is that we have to do it ourselves + // + // We assume at this point that the scale object has been updated with the following values + // by the chart. + // min: this is the minimum value of the scale + // max: this is the maximum value of the scale + // options: contains the options for the scale. This is referenced from the user settings + // rather than being cloned. This ensures that updates always propogate to a redraw + + // Reset the ticks array. Later on, we will draw a grid line at these positions + // The array simply contains the numerical value of the spots where ticks will be + this.ticks = []; + + if (this.options.override) { + // The user has specified the manual override. We use <= instead of < so that + // we get the final line + for (var i = 0; i <= this.options.override.steps; ++i) { + var value = this.options.override.start + (i * this.options.override.stepWidth); + ticks.push(value); + } + } else { + // Figure out what the max number of ticks we can support it is based on the size of + // the axis area. For now, we say that the minimum tick spacing in pixels must be 50 + // We also limit the maximum number of ticks to 11 which gives a nice 10 squares on + // the graph + + var maxTicks = Math.min(11, Math.ceil(this.drawingArea / (2 * this.options.labels.fontSize))); + + // Make sure we always have at least 2 ticks + maxTicks = Math.max(2, maxTicks); + + // To get a "nice" value for the tick spacing, we will use the appropriately named + // "nice number" algorithm. See http://stackoverflow.com/questions/8506881/nice-label-algorithm-for-charts-with-minimum-ticks + // for details. + + // If we are forcing it to begin at 0, but 0 will already be rendered on the chart, + // do nothing since that would make the chart weird. If the user really wants a weird chart + // axis, they can manually override it + if (this.options.beginAtZero) { + var minSign = helpers.sign(this.min); + var maxSign = helpers.sign(this.max); + + if (minSign < 0 && maxSign < 0) { + // move the top up to 0 + this.max = 0; + } else if (minSign > 0 && maxSign > 0) { + // move the botttom down to 0 + this.min = 0; + } + } + + var niceRange = helpers.niceNum(this.max - this.min, false); + var spacing = helpers.niceNum(niceRange / (maxTicks - 1), true); + var niceMin = Math.floor(this.min / spacing) * spacing; + var niceMax = Math.ceil(this.max / spacing) * spacing; + + // Put the values into the ticks array + for (var j = niceMin; j <= niceMax; j += spacing) { + this.ticks.push(j); + } + } + + if (this.options.position == "left" || this.options.position == "right") { + // We are in a vertical orientation. The top value is the highest. So reverse the array + this.ticks.reverse(); + } + + // At this point, we need to update our max and min given the tick values since we have expanded the + // range of the scale + this.max = helpers.max(this.ticks); + this.min = helpers.min(this.ticks); + }, buildYLabels: function() { this.yLabels = []; - - helpers.each(this.ticks, function(tick, index, ticks) { - var label; - if (this.options.labels.userCallback) { - // If the user provided a callback for label generation, use that as first priority - label = this.options.labels.userCallback(tick, index, ticks); - } else if (this.options.labels.template) { - // else fall back to the template string - label = helpers.template(this.options.labels.template, { - value: tick - }); - } + helpers.each(this.ticks, function(tick, index, ticks) { + var label; - this.yLabels.push(label ? label : ""); - }, this); + if (this.options.labels.userCallback) { + // If the user provided a callback for label generation, use that as first priority + label = this.options.labels.userCallback(tick, index, ticks); + } else if (this.options.labels.template) { + // else fall back to the template string + label = helpers.template(this.options.labels.template, { + value: tick + }); + } + + this.yLabels.push(label ? label : ""); + }, this); }, getCircumference: function() { return ((Math.PI * 2) / this.valuesCount); @@ -1083,7 +1083,7 @@ if (this.options.labels.show) { ctx.font = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily); - + if (this.showLabelBackdrop) { var labelWidth = ctx.measureText(label).width; ctx.fillStyle = this.options.labels.backdropColor; @@ -1094,7 +1094,7 @@ this.options.labels.fontSize + this.options.lables.backdropPaddingY * 2 ); } - + ctx.textAlign = 'center'; ctx.textBaseline = "middle"; ctx.fillStyle = this.options.labels.fontColor; @@ -1151,5 +1151,5 @@ } } }); - Chart.scales.registerScaleType("radialLinear", LinearRadialScale); -}).call(this); \ No newline at end of file + Chart.scales.registerScaleType("radialLinear", LinearRadialScale); +}).call(this);