-(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,
-
- //Number - The backdrop padding to the side of the label in pixels
- backdropPaddingX : 2,
- },
-
- pointLabels: {
- //String - Point label font declaration
- fontFamily : "'Arial'",
-
- //String - Point label font weight
- fontStyle : "normal",
-
- //Number - Point label font size in pixels
- fontSize : 10,
-
- //String - Point label font colour
- fontColor : "#666",
- },
- },
-
- //Boolean - Whether to show a dot for each point
- pointDot : true,
-
- //Number - Radius of each point dot in pixels
- pointRadius: 3,
-
- //Number - Pixel width of point dot border
- pointBorderWidth: 1,
-
- //Number - Pixel width of point on hover
- pointHoverRadius: 5,
-
- //Number - Pixel width of point dot border on hover
- pointHoverBorderWidth: 2,
- pointBackgroundColor: Chart.defaults.global.defaultColor,
- pointBorderColor: Chart.defaults.global.defaultColor,
-
- //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
- pointHitRadius: 20,
-
- //Boolean - Whether to show a stroke for datasets
- datasetStroke : true,
-
- //Number - Pixel width of dataset stroke
- datasetStrokeWidth : 2,
-
- //Boolean - Whether to fill the dataset with a colour
- datasetFill : true,
-
- //String - A legend template
- legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
-
- },
-
- initialize: function(){
- this.PointClass = Chart.Point.extend({
- display: this.options.pointDot,
- _chart: this.chart
- });
-
- this.datasets = [];
-
- this.buildScale(this.data);
-
- //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) : [];
-
- this.eachPoints(function(point){
- point.restore(['fillColor', 'strokeColor']);
- });
- helpers.each(activePointsCollection, function(activePoint){
- activePoint.fillColor = activePoint.highlightFill;
- activePoint.strokeColor = activePoint.highlightStroke;
- });
-
- this.showTooltip(activePointsCollection);
- });
- }
-
- //Iterate through each of the datasets, and build this into a property of the chart
- helpers.each(this.data.datasets,function(dataset){
-
- var datasetObject = {
- label: dataset.label || null,
- fillColor : dataset.fillColor,
- strokeColor : dataset.strokeColor,
- pointColor : dataset.pointColor,
- pointStrokeColor : dataset.pointStrokeColor,
- points : []
- };
-
- this.datasets.push(datasetObject);
-
- 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,
-
- // 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);
- },
-
- 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.datasets, function(dataset){
- activePointsCollection.push(dataset.points[pointIndex]);
- });
- }
-
- return activePointsCollection;
- },
-
- buildScale : function(data){
- 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: data.labels,
- valuesCount: data.datasets[0].data.length,
- calculateRange: function() {
- this.min = null;
- this.max = null;
-
- helpers.each(self.data.datasets, function(dataset) {
+ //String - The colour of the label backdrop
+ backdropColor: "rgba(255,255,255,0.75)",
+
+ //Number - The backdrop padding above & below the label in pixels
+ backdropPaddingY: 2,
+
+ //Number - The backdrop padding to the side of the label in pixels
+ backdropPaddingX: 2,
+ },
+
+ pointLabels: {
+ //String - Point label font declaration
+ fontFamily: "'Arial'",
+
+ //String - Point label font weight
+ fontStyle: "normal",
+
+ //Number - Point label font size in pixels
+ fontSize: 10,
+
+ //String - Point label font colour
+ fontColor: "#666",
+ },
+ },
+
+ line: {
+
+ //Boolean - Whether to show a dot for each point
+ show: true,
+
+ //Number - Pixel width of dot border
+ borderWidth: 1,
+
+ backgroundColor: Chart.defaults.global.defaultColor,
+
+ borderColor: Chart.defaults.global.defaultColor,
+
+ //Number - amount extra to add to the radius to cater for hit detection outside the drawn
+ hitRadius: 20,
+
+ //Number - Tension of the bezier curve between points. Use 0 to turn off bezier tension
+ tension: 0.4,
+ },
+
+ point: {
+ //Boolean - Whether to show a dot for each point
+ show: true,
+
+ //Number - Radius of each dot in pixels
+ radius: 3,
+
+ //Number - Pixel width of dot border
+ borderWidth: 1,
+
+ //Number - Pixel width of on hover
+ hoverRadius: 5,
+
+ //Number - Pixel width of dot border on hover
+ hoverBorderWidth: 2,
+
+ backgroundColor: Chart.defaults.global.defaultColor,
+
+ borderColor: Chart.defaults.global.defaultColor,
+
+ //Number - amount extra to add to the radius to cater for hit detection outside the drawn
+ hitRadius: 20,
+ },
+
+ //String - A legend template
+ legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
+
+ },
+
+ initialize: function() {
+
+ this.buildScale(this.data);
+
+
+
+ // Events
+ helpers.bindEvents(this, this.options.events, this.events);
+
+ var _this = this;
+
+ //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);
+
+ // The line chart only supports a single x axis because the x axis is always a dataset axis
+ }, this);
+
+ // 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);
+
+ // 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);
+
+ // Set defaults for points
+ this.eachElement(function(point, index, dataset, datasetIndex) {
+
+ helpers.extend(point, {
+ _datasetIndex: datasetIndex,
+ _index: index,
+ _chart: this.chart,
+ display: this.options.pointDot,
+ x: this.scale.xCenter,
+ y: this.scale.yCenter,
+ });
+
+ // 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) {
} else if (value < this.min) {
this.min = value;
}
-
+
if (this.max === null) {
this.max = value;
} else if (value > this.max) {
}, 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.labels.push(label);
-
- this.reflow();
-
- 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){
-
- helpers.extend(this.datasets[datasetIndex], {
- label : dataset.label || null,
- fillColor : dataset.fillColor,
- strokeColor : dataset.strokeColor,
- pointColor : dataset.pointColor,
- pointStrokeColor : dataset.pointStrokeColor,
- });
-
- 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);
-
- },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();
-
- helpers.each(this.datasets,function(dataset){
-
- //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);
-
-
-
- //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();
-
- ctx.fillStyle = dataset.fillColor;
- ctx.fill();
-
- //Now draw the points over the line
- //A little inefficient double looping, but better than the line
- //lagging behind the point positions
- helpers.each(dataset.points,function(point){
- if (point.hasValue()){
- point.draw();
- }
- });
-
- },this);
-
- }
-
- });
+ }
+ });
+
+ this.scale.setScaleSize();
+ this.scale.calculateRange();
+ this.scale.generateTicks();
+ this.scale.buildYLabels();
+ },
+ update: function() {
+
+ // Update the lines
+ this.eachDataset(function(dataset, datasetIndex) {
+
+ helpers.extend(dataset.metaDataset, {
+ // Utility
+ _datasetIndex: datasetIndex,
+
+ // Data
+ _points: dataset.metaData,
+
+ // Geometry
+ scaleTop: this.scale.top,
+ scaleBottom: this.scale.bottom,
+ scaleZero: this.scale.getPointPosition(0),
+
+ // 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);
+
+ // Update the points
+ this.eachElement(function(point, index, dataset, datasetIndex) {
+
+ var pointPosition = this.scale.getPointPosition(index, this.scale.calculateCenterOffset(this.data.datasets[datasetIndex].data[index]));
+
+ 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--) {
+
+ var dataset = this.data.datasets[i];
+ var datasetIndex = 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();
+ });
+ }
+
+ // 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;
+ },
+
+ });
(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;
- });
-
- 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) {
+
+ // 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;
+ });
+
+ 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);
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;
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;
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++;
}
},
- // 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 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;
-
- 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);
- }
-
- 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;
-
- 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.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();
-
- 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({
+ // 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 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;
+
+ 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);
+ }
+
+ 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;
+
+ 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.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();
+
+ 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);
},
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
- });
- }
-
- this.yLabels.push(label ? label : "");
- }, this);
+
+ 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
+ });
+ }
+
+ this.yLabels.push(label ? label : "");
+ }, this);
},
getCircumference: function() {
return ((Math.PI * 2) / this.valuesCount);
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;
this.options.labels.fontSize + this.options.lables.backdropPaddingY * 2
);
}
-
+
ctx.textAlign = 'center';
ctx.textBaseline = "middle";
ctx.fillStyle = this.options.labels.fontColor;
}
}
});
- Chart.scales.registerScaleType("radialLinear", LinearRadialScale);
-}).call(this);
\ No newline at end of file
+ Chart.scales.registerScaleType("radialLinear", LinearRadialScale);
+}).call(this);
projects / thirdparty / Chart.js.git / commitdiff
