From 677c249b613bf1a4ebccb1bebda9f04f7346b866 Mon Sep 17 00:00:00 2001 From: Tanner Linsley Date: Fri, 18 Sep 2015 11:31:25 -0600 Subject: [PATCH] Bar and combo support for time scale --- samples/combo-time-scale.html | 186 ++++++++++++++++++++++++++++++ samples/line-time-scale.html | 10 +- src/elements/element.rectangle.js | 2 +- src/scales/scale.time.js | 19 +-- 4 files changed, 203 insertions(+), 14 deletions(-) create mode 100644 samples/combo-time-scale.html diff --git a/samples/combo-time-scale.html b/samples/combo-time-scale.html new file mode 100644 index 000000000..61acfa6c1 --- /dev/null +++ b/samples/combo-time-scale.html @@ -0,0 +1,186 @@ + + + + + Line Chart + + + + + + +
+ +
+
+
+ + + + + +
+

Legend

+
+
+
+ + + + diff --git a/samples/line-time-scale.html b/samples/line-time-scale.html index 01df3a4e2..b4b0f7edd 100644 --- a/samples/line-time-scale.html +++ b/samples/line-time-scale.html @@ -51,7 +51,7 @@ data: { //labels: [newTimestamp(0), newTimestamp(1), newTimestamp(2), newTimestamp(3), newTimestamp(4), newTimestamp(5), newTimestamp(6)], // unix timestamps // labels: [newDate(0), newDate(1), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], // Date Objects - labels: ["01/01/2015 20:00", "01/02/2015 21:00", "01/03/2015 22:00", "01/05/2015 23:00", "01/07/2015 03:00", "01/08/2015 10:00", "02/1/2015"], // Hours + labels: ["01/01/2015 20:00", "01/02/2015 21:00", "01/03/2015 22:00", "01/05/2015 23:00", "01/07/2015 03:00", "01/08/2015 10:00", "01/10/2015"], // Hours // labels: ["01/01/2015", "01/02/2015", "01/03/2015", "01/06/2015", "01/15/2015", "01/17/2015", "01/30/2015"], // Days // labels: ["12/25/2014", "01/08/2015", "01/15/2015", "01/22/2015", "01/29/2015", "02/05/2015", "02/12/2015"], // Weeks datasets: [{ @@ -143,10 +143,10 @@ $('#addData').click(function() { if (config.data.datasets.length > 0) { config.data.labels.push( - moment( - config.data.labels[config.data.labels.length - 1], config.options.scales.xAxes[0].time.format - ).add(1, 'day') - .format('MM/DD/YYYY') + myLine.scales['x-axis-0'].labelMoments[myLine.scales['x-axis-0'].labelMoments.length - 1] + .clone() + .add(1, 'day') + .format('MM/DD/YYYY HH:mm') ); for (var index = 0; index < config.data.datasets.length; ++index) { diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index 3d9539eb9..0e361cba6 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -63,7 +63,7 @@ } else { inRange = (mouseX >= vm.x - vm.width / 2 && mouseX <= vm.x + vm.width / 2) && (mouseY >= vm.base && mouseY <= vm.y); } - } + } return inRange; }, diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js index 18df1a6ac..140ff7229 100644 --- a/src/scales/scale.time.js +++ b/src/scales/scale.time.js @@ -160,6 +160,13 @@ this.firstTick.startOf(this.tickUnit); this.lastTick.endOf(this.tickUnit); + this.smallestLabelSeparation = this.width; + + var i = 0; + + for (i = 1; i < this.labelMoments.length; i++) { + this.smallestLabelSeparation = Math.min(this.smallestLabelSeparation, this.labelMoments[i].diff(this.labelMoments[i - 1], this.tickUnit, true)); + } // Tick displayFormat override @@ -168,7 +175,6 @@ } // For every unit in between the first and last moment, create a moment and add it to the labels tick - var i = 0; if (this.options.labels.userCallback) { for (; i <= this.tickRange; i++) { this.ticks.push( @@ -192,13 +198,9 @@ // this.left, this.top, this.right, and this.bottom have been defined if (this.isHorizontal()) { var innerWidth = this.width - (this.paddingLeft + this.paddingRight); - var valueWidth = innerWidth / Math.max((this.ticks.length - ((this.options.gridLines.offsetGridLines) ? 0 : 1)), 1); + var valueWidth = innerWidth / Math.max(this.ticks.length - 1, 1); var valueOffset = (innerWidth * decimal) + this.paddingLeft; - if (this.options.gridLines.offsetGridLines && includeOffset) { - valueOffset += (valueWidth / 2); - } - return this.left + Math.round(valueOffset); } else { return this.top + (decimal * (this.height / this.ticks.length)); @@ -212,7 +214,7 @@ // Functions needed for bar charts calculateBaseWidth: function() { - return (this.getPixelForValue(null, this.ticks.length / 100, 0, true) - this.getPixelForValue(null, 0, 0, true)) - (2 * this.options.categorySpacing); + return (this.getPixelForValue(null, this.smallestLabelSeparation / this.tickRange, 0, true) - this.getPixelForValue(null, 0, 0, true)) - (2 * this.options.categorySpacing); }, calculateBarWidth: function(barDatasetCount) { //The padding between datasets is to the right of each bar, providing that there are more than 1 dataset @@ -226,7 +228,8 @@ calculateBarX: function(barDatasetCount, datasetIndex, elementIndex) { var xWidth = this.calculateBaseWidth(), - xAbsolute = this.getPixelForValue(null, elementIndex, datasetIndex, true) - (xWidth / 2), + offset = this.labelMoments[elementIndex].diff(this.firstTick, this.tickUnit, true), + xAbsolute = this.getPixelForValue(null, offset / this.tickRange, datasetIndex, true) - (xWidth / 2), barWidth = this.calculateBarWidth(barDatasetCount); if (this.options.stacked) { -- 2.47.2