Bar Chart

Legend

@@ -70,13 +64,6 @@ 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 @@ $('#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 @@ }); updateLegend(); }); - - $('#show').click(function() { - document.getElementById('container').style.display = ''; - }); diff --git a/src/charts/Chart.Doughnut.js b/src/charts/Chart.Doughnut.js index 333a0bbeb..ccea714f3 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: "

\"><%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 9dbdf1b39..7070a0d8f 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: "

\"><%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 2f1f82606..f5580783d 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 d4586b4fc..2513a0689 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 d832f09d1..4de24af6d 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 d39ef3329..806248485 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 02ee89aef..ab58b0789 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 512b4f42e..42c214e14 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 000000000..7a2eb78c7 --- /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 1159a9050..c738f1f58 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;