@@ -70,13 +64,6 @@
Legend
data: barChartData,
options: {
responsive: true,
- scales: {
- xAxes: [{
- // So that bars fill the entire width of the grid
- categorySpacing: 0,
- spacing: 0
- }]
- }
}
});
@@ -113,7 +100,7 @@
Legend
$('#addData').click(function() {
if (barChartData.datasets.length > 0) {
- barChartData.labels.push('data #' + barChartData.labels.length);
+ barChartData.labels.push('dataset #' + barChartData.labels.length);
for (var index = 0; index < barChartData.datasets.length; ++index) {
window.myBar.addData(randomScalingFactor(), index);
@@ -136,10 +123,6 @@
Legend
});
updateLegend();
});
-
- $('#show').click(function() {
- document.getElementById('container').style.display = '';
- });
diff --git a/src/charts/Chart.Doughnut.js b/src/charts/Chart.Doughnut.js
index 333a0bbebeb..ccea714f31d 100644
--- a/src/charts/Chart.Doughnut.js
+++ b/src/charts/Chart.Doughnut.js
@@ -6,7 +6,6 @@
var helpers = Chart.helpers;
var defaultConfig = {
- aspectRatio: 1,
legendTemplate: "
-legend\"><% for (var i = 0; i < data.datasets[0].data.length; i++){%>- \"><%if(data.labels && i < data.labels.length){%><%=data.labels[i]%><%}%>
<%}%>
",
};
diff --git a/src/charts/Chart.PolarArea.js b/src/charts/Chart.PolarArea.js
index 9dbdf1b39a1..7070a0d8f24 100644
--- a/src/charts/Chart.PolarArea.js
+++ b/src/charts/Chart.PolarArea.js
@@ -6,7 +6,6 @@
var helpers = Chart.helpers;
var defaultConfig = {
- aspectRatio: 1,
legendTemplate: "
-legend\"><% for (var i = 0; i < data.datasets[0].data.length; i++){%>- \"><%if(data.labels && i < data.labels.length){%><%=data.labels[i]%><%}%>
<%}%>
",
};
diff --git a/src/charts/Chart.Radar.js b/src/charts/Chart.Radar.js
index 2f1f8260620..f5580783d66 100644
--- a/src/charts/Chart.Radar.js
+++ b/src/charts/Chart.Radar.js
@@ -5,12 +5,7 @@
var Chart = root.Chart;
var helpers = Chart.helpers;
- var defaultConfig = {
- aspectRatio: 1,
- };
-
Chart.Radar = function(context, config) {
- config.options = helpers.configMerge(defaultConfig, config.options);
config.type = 'radar';
return new Chart(context, config);
diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js
index d4586b4fca6..2513a068985 100644
--- a/src/controllers/controller.doughnut.js
+++ b/src/controllers/controller.doughnut.js
@@ -86,8 +86,8 @@
update: function(reset) {
- this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2, 0);
- this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
+ this.chart.outerRadius = (helpers.min([this.chart.chart.width, this.chart.chart.height]) / 2) - this.chart.options.elements.arc.borderWidth / 2;
+ this.chart.innerRadius = this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1;
this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.chart.data.datasets.length;
this.getDataset().total = 0;
diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js
index d832f09d18e..4de24af6d25 100644
--- a/src/controllers/controller.polarArea.js
+++ b/src/controllers/controller.polarArea.js
@@ -87,8 +87,8 @@
this.chart.scale.generateTicks();
this.chart.scale.buildYLabels();
- this.chart.outerRadius = Math.max((helpers.min([this.chart.chart.width, this.chart.chart.height]) - this.chart.options.elements.arc.borderWidth / 2) / 2, 0);
- this.chart.innerRadius = Math.max(this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1, 0);
+ this.chart.outerRadius = (helpers.min([this.chart.chart.width, this.chart.chart.height]) - this.chart.options.elements.arc.borderWidth / 2) / 2;
+ this.chart.innerRadius = this.chart.options.cutoutPercentage ? (this.chart.outerRadius / 100) * (this.chart.options.cutoutPercentage) : 1;
this.chart.radiusLength = (this.chart.outerRadius - this.chart.innerRadius) / this.chart.data.datasets.length;
this.getDataset().total = 0;
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index d39ef3329d4..806248485a9 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -123,11 +123,9 @@
resize: function resize(silent) {
this.stop();
- var canvas = this.chart.canvas;
- var newWidth = helpers.getMaximumWidth(this.chart.canvas);
- var newHeight = (this.options.maintainAspectRatio && isNaN(this.chart.aspectRatio) === false && isFinite(this.chart.aspectRatio) && this.chart.aspectRatio !== 0)
- ? newWidth / this.chart.aspectRatio
- : helpers.getMaximumHeight(this.chart.canvas);
+ var canvas = this.chart.canvas,
+ newWidth = helpers.getMaximumWidth(this.chart.canvas),
+ newHeight = this.options.maintainAspectRatio ? newWidth / this.chart.aspectRatio : helpers.getMaximumHeight(this.chart.canvas);
canvas.width = this.chart.width = newWidth;
canvas.height = this.chart.height = newHeight;
@@ -350,15 +348,19 @@
destroy: function destroy() {
this.clear();
helpers.unbindEvents(this, this.events);
-
- // Reset canvas height/width attributes
var canvas = this.chart.canvas;
+
+ // Reset canvas height/width attributes starts a fresh with the canvas context
canvas.width = this.chart.width;
canvas.height = this.chart.height;
- // if we scaled the canvas in response to a devicePixelRatio !== 1, we need to undo that transform here
- if (this.chart.originalDevicePixelRatio !== undefined) {
- canvas.scale(1 / this.chart.originalDevicePixelRatio, 1 / this.chart.originalDevicePixelRatio);
+ // < IE9 doesn't support removeProperty
+ if (canvas.style.removeProperty) {
+ canvas.style.removeProperty('width');
+ canvas.style.removeProperty('height');
+ } else {
+ canvas.style.removeAttribute('width');
+ canvas.style.removeAttribute('height');
}
delete Chart.instances[this.id];
diff --git a/src/core/core.helpers.js b/src/core/core.helpers.js
index 02ee89aef5a..ab58b0789dc 100644
--- a/src/core/core.helpers.js
+++ b/src/core/core.helpers.js
@@ -690,54 +690,17 @@
removeEvent(chartInstance.chart.canvas, eventName, handler);
});
},
- getConstraintWidth = helpers.getConstraintWidth = function(domNode) { // returns Number or undefined if no constraint
- var constrainedWidth;
- var constrainedWNode = document.defaultView.getComputedStyle(domNode)['max-width'];
- var constrainedWContainer = document.defaultView.getComputedStyle(domNode.parentNode)['max-width'];
- var hasCWNode = constrainedWNode !== null && constrainedWNode !== "none";
- var hasCWContainer = constrainedWContainer !== null && constrainedWContainer !== "none";
-
- if (hasCWNode || hasCWContainer) {
- constrainedWidth = Math.min((hasCWNode ? parseInt(constrainedWNode, 10) : Number.POSITIVE_INFINITY), (hasCWContainer ? parseInt(constrainedWContainer, 10) : Number.POSITIVE_INFINITY));
- }
- return constrainedWidth;
- },
- getConstraintHeight = helpers.getConstraintHeight = function(domNode) { // returns Number or undefined if no constraint
-
- var constrainedHeight;
- var constrainedHNode = document.defaultView.getComputedStyle(domNode)['max-height'];
- var constrainedHContainer = document.defaultView.getComputedStyle(domNode.parentNode)['max-height'];
- var hasCHNode = constrainedHNode !== null && constrainedHNode !== "none";
- var hasCHContainer = constrainedHContainer !== null && constrainedHContainer !== "none";
-
- if (constrainedHNode || constrainedHContainer) {
- constrainedHeight = Math.min((hasCHNode ? parseInt(constrainedHNode, 10) : Number.POSITIVE_INFINITY), (hasCHContainer ? parseInt(constrainedHContainer, 10) : Number.POSITIVE_INFINITY));
- }
- return constrainedHeight;
- },
getMaximumWidth = helpers.getMaximumWidth = function(domNode) {
- var container = domNode.parentNode;
- var padding = parseInt(getStyle(container, 'padding-left')) + parseInt(getStyle(container, 'padding-right'));
-
- var w = container.clientWidth - padding;
- var cw = getConstraintWidth(domNode);
- if (cw !== undefined) {
- w = Math.min(w, cw);
- }
-
- return w;
+ var container = domNode.parentNode,
+ padding = parseInt(getStyle(container, 'padding-left')) + parseInt(getStyle(container, 'padding-right'));
+ // TODO = check cross browser stuff with this.
+ return container.clientWidth - padding;
},
getMaximumHeight = helpers.getMaximumHeight = function(domNode) {
- var container = domNode.parentNode;
- var padding = parseInt(getStyle(container, 'padding-top')) + parseInt(getStyle(container, 'padding-bottom'));
-
- var h = container.clientHeight - padding;
- var ch = getConstraintHeight(domNode);
- if (ch !== undefined) {
- h = Math.min(h, ch);
- }
-
- return h;
+ var container = domNode.parentNode,
+ padding = parseInt(getStyle(container, 'padding-bottom')) + parseInt(getStyle(container, 'padding-top'));
+ // TODO = check cross browser stuff with this.
+ return container.clientHeight - padding;
},
getStyle = helpers.getStyle = function(el, property) {
return el.currentStyle ?
@@ -746,19 +709,16 @@
},
getMaximumSize = helpers.getMaximumSize = helpers.getMaximumWidth, // legacy support
retinaScale = helpers.retinaScale = function(chart) {
- var ctx = chart.ctx;
- var width = chart.canvas.width;
- var height = chart.canvas.height;
+ var ctx = chart.ctx,
+ width = chart.canvas.width,
+ height = chart.canvas.height;
- if (window.devicePixelRatio !== 1) {
+ if (window.devicePixelRatio) {
+ ctx.canvas.style.width = width + "px";
+ ctx.canvas.style.height = height + "px";
ctx.canvas.height = height * window.devicePixelRatio;
ctx.canvas.width = width * window.devicePixelRatio;
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-
- // Store the device pixel ratio so that we can go backwards in `destroy`.
- // The devicePixelRatio changes with zoom, so there are no guarantees that it is the same
- // when destroy is called
- chart.originalDevicePixelRatio = chart.originalDevicePixelRatio || window.devicePixelRatio;
}
},
//-- Canvas methods
@@ -797,15 +757,6 @@
}
return window.Color(color);
},
- addResizeListener = helpers.addResizeListener = function(node, callback) {
- if (window.addResizeListener) {
- if (node) {
- window.addResizeListener(node, callback);
- }
- } else {
- console.log('Add resize listener not found')
- }
- },
isArray = helpers.isArray = function(obj) {
if (!Array.isArray) {
return Object.prototype.toString.call(arg) === '[object Array]';
diff --git a/src/core/core.js b/src/core/core.js
index 512b4f42e5e..42c214e1444 100755
--- a/src/core/core.js
+++ b/src/core/core.js
@@ -19,6 +19,7 @@
//Occupy the global variable of Chart, and create a simple base class
var Chart = function(context, config) {
+ var chart = this;
this.config = config;
// Support a jQuery'd canvas element
@@ -31,35 +32,31 @@
context = context.getContext("2d");
}
- this.ctx = context;
this.canvas = context.canvas;
- // Figure out what the size of the chart will be.
- // If the canvas has a specified width and height, we use those else
- // we look to see if the canvas node has a CSS width and height.
- // If there is still no height, fill the parent container
- this.width = context.canvas.width || parseInt(Chart.helpers.getStyle(context.canvas, 'width')) || Chart.helpers.getMaximumWidth(context.canvas);
- this.height = context.canvas.height || parseInt(Chart.helpers.getStyle(context.canvas, 'height')) || Chart.helpers.getMaximumHeight(context.canvas);
+ this.ctx = context;
- this.aspectRatio = this.width / this.height;
+ //Variables global to the chart
+ var computeDimension = function(element, dimension) {
+ if (element['offset' + dimension]) {
+ return element['offset' + dimension];
+ } else {
+ return document.defaultView.getComputedStyle(element).getPropertyValue(dimension);
+ }
+ };
- if (isNaN(this.aspectRatio) || isFinite(this.aspectRatio) === false) {
- // If the canvas has no size, try and figure out what the aspect ratio will be.
- // Some charts prefer square canvases (pie, radar, etc). If that is specified, use that
- // else use the canvas default ratio of 2
- this.aspectRatio = config.aspectRatio !== undefined ? config.aspectRatio : 2;
- }
+ var width = this.width = computeDimension(context.canvas, 'Width') || context.canvas.width;
+ var height = this.height = computeDimension(context.canvas, 'Height') || context.canvas.height;
- // High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
- Chart.helpers.retinaScale(this);
+ // Firefox requires this to work correctly
+ context.canvas.width = width;
+ context.canvas.height = height;
- // Always bind this so that if the responsive state changes we still work
- var _this = this;
- Chart.helpers.addResizeListener(context.canvas.parentNode, function() {
- if (config.options.responsive) {
- _this.controller.resize();
- }
- });
+ width = this.width = context.canvas.width;
+ height = this.height = context.canvas.height;
+ this.aspectRatio = this.width / this.height;
+ //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.
+ Chart.helpers.retinaScale(this);
if (config) {
this.controller = new Chart.Controller(this);
diff --git a/src/core/core.responsive.js b/src/core/core.responsive.js
new file mode 100644
index 00000000000..7a2eb78c751
--- /dev/null
+++ b/src/core/core.responsive.js
@@ -0,0 +1,29 @@
+(function() {
+
+ "use strict";
+
+ //Declare root variable - window in the browser, global on the server
+ var root = this,
+ previous = root.Chart,
+ helpers = Chart.helpers;
+
+
+ // Attach global event to resize each chart instance when the browser resizes
+ helpers.addEvent(window, "resize", (function() {
+ // Basic debounce of resize function so it doesn't hurt performance when resizing browser.
+ var timeout;
+ return function() {
+ clearTimeout(timeout);
+ timeout = setTimeout(function() {
+ helpers.each(Chart.instances, function(instance) {
+ // If the responsive flag is set in the chart instance config
+ // Cascade the resize event down to the chart.
+ if (instance.options.responsive) {
+ instance.resize();
+ }
+ });
+ }, 16);
+ };
+ })());
+
+}).call(this);
diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 1159a905029..c738f1f5853 100644
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -219,54 +219,6 @@
}
});
- // Recalculate because the size of each scale might have changed slightly due to the margins (label rotation for instance)
- totalLeftWidth = xPadding;
- totalRightWidth = xPadding;
- totalTopHeight = yPadding;
- totalBottomHeight = yPadding;
-
- helpers.each(leftScales, function(scaleInstance) {
- totalLeftWidth += scaleInstance.width;
- });
-
- helpers.each(rightScales, function(scaleInstance) {
- totalRightWidth += scaleInstance.width;
- });
-
- helpers.each(topScales, function(scaleInstance) {
- totalTopHeight += scaleInstance.height;
- });
- helpers.each(bottomScales, function(scaleInstance) {
- totalBottomHeight += scaleInstance.height;
- });
-
- // Figure out if our chart area changed. This would occur if the dataset scale label rotation
- // changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do
- // without calling `fit` again
- var newMaxChartHeight = height - totalTopHeight - totalBottomHeight;
- var newMaxChartWidth = width - totalLeftWidth - totalRightWidth;
-
- if (newMaxChartWidth !== maxChartWidth || newMaxChartHeight !== maxChartHeight) {
- helpers.each(leftScales, function(scale) {
- scale.height = newMaxChartHeight;
- });
-
- helpers.each(rightScales, function(scale) {
- scale.height = newMaxChartHeight;
- });
-
- helpers.each(topScales, function(scale) {
- scale.width = newMaxChartWidth;
- });
-
- helpers.each(bottomScales, function(scale) {
- scale.width = newMaxChartWidth;
- });
-
- maxChartHeight = newMaxChartHeight;
- maxChartWidth = newMaxChartWidth;
- }
-
// Step 7
// Position the scales
var left = xPadding;