X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=e19acada735a2b57a28eee05ebe4a37c7ffa717e;hb=7bba83d8116f0712e57ee4bf57e40ef3c749f3ff;hp=8fe8003da8d48fba38289371de0291129729de55;hpb=3c1d225b3097891e863631bdb3b81a1250a5cce4;p=dygraphs.git
diff --git a/dygraph.js b/dygraph.js
index 8fe8003..e19acad 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -79,6 +79,12 @@ Dygraph.DEFAULT_WIDTH = 480;
Dygraph.DEFAULT_HEIGHT = 320;
Dygraph.AXIS_LINE_WIDTH = 0.3;
+Dygraph.LOG_SCALE = 10;
+Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
+Dygraph.log10 = function(x) {
+ return Math.log(x) / Dygraph.LN_TEN;
+}
+
// Default attribute values.
Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
@@ -95,9 +101,7 @@ Dygraph.DEFAULT_ATTRS = {
labelsKMG2: false,
showLabelsOnHighlight: true,
- yValueFormatter: function(x, opt_numDigits) {
- return x.toPrecision(opt_numDigits || 2);
- },
+ yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
strokeWidth: 1.0,
@@ -115,7 +119,6 @@ Dygraph.DEFAULT_ATTRS = {
delimiter: ',',
- logScale: false,
sigma: 2.0,
errorBars: false,
fractions: false,
@@ -129,7 +132,9 @@ Dygraph.DEFAULT_ATTRS = {
hideOverlayOnMouseOut: true,
stepPlot: false,
- avoidMinZero: false
+ avoidMinZero: false,
+
+ interactionModel: null // will be set to Dygraph.defaultInteractionModel.
};
// Various logging levels.
@@ -160,7 +165,7 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
/**
* Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
- * and interaction <canvas> inside of it. See the constructor for details
+ * and context <canvas> inside of it. See the constructor for details.
* on the parameters.
* @param {Element} div the Element to render the graph into.
* @param {String | Function} file Source data
@@ -193,7 +198,6 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
this.wilsonInterval_ = attrs.wilsonInterval || true;
this.is_initial_draw_ = true;
this.annotations_ = [];
- this.numDigits_ = 2;
// Clear the div. This ensure that, if multiple dygraphs are passed the same
// div, then only one will be drawn.
@@ -303,7 +307,7 @@ Dygraph.prototype.error = function(message) {
/**
* Returns the current rolling period, as set by the user or an option.
- * @return {Number} The number of points in the rolling window
+ * @return {Number} The number of days in the rolling window
*/
Dygraph.prototype.rollPeriod = function() {
return this.rollPeriod_;
@@ -356,44 +360,151 @@ Dygraph.prototype.yAxisRanges = function() {
* If specified, do this conversion for the coordinate system of a particular
* axis. Uses the first axis by default.
* Returns a two-element array: [X, Y]
+ *
+ * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
+ * instead of toDomCoords(null, y, axis).
*/
Dygraph.prototype.toDomCoords = function(x, y, axis) {
- var ret = [null, null];
+ return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
+};
+
+/**
+ * Convert from data x coordinates to canvas/div X coordinate.
+ * If specified, do this conversion for the coordinate system of a particular
+ * axis.
+ * Returns a single value or null if x is null.
+ */
+Dygraph.prototype.toDomXCoord = function(x) {
+ if (x == null) {
+ return null;
+ };
+
var area = this.plotter_.area;
- if (x !== null) {
- var xRange = this.xAxisRange();
- ret[0] = area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
- }
+ var xRange = this.xAxisRange();
+ return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
+}
- if (y !== null) {
- var yRange = this.yAxisRange(axis);
- ret[1] = area.y + (yRange[1] - y) / (yRange[1] - yRange[0]) * area.h;
- }
+/**
+ * Convert from data x coordinates to canvas/div Y coordinate and optional
+ * axis. Uses the first axis by default.
+ *
+ * returns a single value or null if y is null.
+ */
+Dygraph.prototype.toDomYCoord = function(y, axis) {
+ var pct = this.toPercentYCoord(y, axis);
- return ret;
-};
+ if (pct == null) {
+ return null;
+ }
+ var area = this.plotter_.area;
+ return area.y + pct * area.h;
+}
/**
* Convert from canvas/div coords to data coordinates.
* If specified, do this conversion for the coordinate system of a particular
* axis. Uses the first axis by default.
- * Returns a two-element array: [X, Y]
+ * Returns a two-element array: [X, Y].
+ *
+ * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
+ * instead of toDataCoords(null, y, axis).
*/
Dygraph.prototype.toDataCoords = function(x, y, axis) {
- var ret = [null, null];
+ return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
+};
+
+/**
+ * Convert from canvas/div x coordinate to data coordinate.
+ *
+ * If x is null, this returns null.
+ */
+Dygraph.prototype.toDataXCoord = function(x) {
+ if (x == null) {
+ return null;
+ }
+
var area = this.plotter_.area;
- if (x !== null) {
- var xRange = this.xAxisRange();
- ret[0] = xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
+ var xRange = this.xAxisRange();
+ return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
+};
+
+/**
+ * Convert from canvas/div y coord to value.
+ *
+ * If y is null, this returns null.
+ * if axis is null, this uses the first axis.
+ */
+Dygraph.prototype.toDataYCoord = function(y, axis) {
+ if (y == null) {
+ return null;
}
- if (y !== null) {
- var yRange = this.yAxisRange(axis);
- ret[1] = yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
+ var area = this.plotter_.area;
+ var yRange = this.yAxisRange(axis);
+
+ if (!axis.logscale) {
+ return yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
+ } else {
+ // Computing the inverse of toDomCoord.
+ var pct = (y - area.y) / area.h
+
+ // Computing the inverse of toPercentYCoord. The function was arrived at with
+ // the following steps:
+ //
+ // Original calcuation:
+ // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
+ //
+ // Move denominator to both sides:
+ // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
+ //
+ // subtract logr1, and take the negative value.
+ // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
+ //
+ // Swap both sides of the equation, and we can compute the log of the
+ // return value. Which means we just need to use that as the exponent in
+ // e^exponent.
+ // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
+
+ var logr1 = Dygraph.log10(yRange[1]);
+ var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
+ var value = Math.pow(Dygraph.LOG_SCALE, exponent);
+ return value;
+ }
+};
+
+/**
+ * Converts a y for an axis to a percentage from the top to the
+ * bottom of the div.
+ *
+ * If the coordinate represents a value visible on the canvas, then
+ * the value will be between 0 and 1, where 0 is the top of the canvas.
+ * However, this method will return values outside the range, as
+ * values can fall outside the canvas.
+ *
+ * If y is null, this returns null.
+ * if axis is null, this uses the first axis.
+ */
+Dygraph.prototype.toPercentYCoord = function(y, axis) {
+ if (y == null) {
+ return null;
}
+ if (typeof(axis) == "undefined") axis = 0;
- return ret;
-};
+ var area = this.plotter_.area;
+ var yRange = this.yAxisRange(axis);
+
+ var pct;
+ if (!this.axes_[axis].logscale) {
+ // yrange[1] - y is unit distance from the bottom.
+ // yrange[1] - yrange[0] is the scale of the range.
+ // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
+ pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
+ } else {
+ var logr1 = Dygraph.log10(yRange[1]);
+ pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
+ }
+ return pct;
+}
/**
* Returns the number of columns (including the independent variable).
@@ -433,6 +544,23 @@ Dygraph.addEvent = function(el, evt, fn) {
}
};
+
+// Based on the article at
+// http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
+Dygraph.cancelEvent = function(e) {
+ e = e ? e : window.event;
+ if (e.stopPropagation) {
+ e.stopPropagation();
+ }
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+ e.cancelBubble = true;
+ e.cancel = true;
+ e.returnValue = false;
+ return false;
+}
+
/**
* Generates interface elements for the Dygraph: a containing div, a div to
* display the current point, and a textbox to adjust the rolling average
@@ -765,242 +893,339 @@ Dygraph.pageY = function(e) {
}
};
-/**
- * Set up all the mouse handlers needed to capture dragging behavior for zoom
- * events.
- * @private
- */
-Dygraph.prototype.createDragInterface_ = function() {
- var self = this;
+Dygraph.prototype.dragGetX_ = function(e, context) {
+ return Dygraph.pageX(e) - context.px
+};
- // Tracks whether the mouse is down right now
- var isZooming = false;
- var isPanning = false; // is this drag part of a pan?
- var is2DPan = false; // if so, is that pan 1- or 2-dimensional?
- var dragStartX = null;
- var dragStartY = null;
- var dragEndX = null;
- var dragEndY = null;
- var dragDirection = null;
- var prevEndX = null;
- var prevEndY = null;
- var prevDragDirection = null;
+Dygraph.prototype.dragGetY_ = function(e, context) {
+ return Dygraph.pageY(e) - context.py
+};
- // TODO(danvk): update this comment
- // draggingDate and draggingValue represent the [date,value] point on the
- // graph at which the mouse was pressed. As the mouse moves while panning,
- // the viewport must pan so that the mouse position points to
- // [draggingDate, draggingValue]
- var draggingDate = null;
+// Called in response to an interaction model operation that
+// should start the default panning behavior.
+//
+// It's used in the default callback for "mousedown" operations.
+// Custom interaction model builders can use it to provide the default
+// panning behavior.
+//
+Dygraph.startPan = function(event, g, context) {
+ context.isPanning = true;
+ var xRange = g.xAxisRange();
+ context.dateRange = xRange[1] - xRange[0];
- // TODO(danvk): update this comment
- // The range in second/value units that the viewport encompasses during a
- // panning operation.
- var dateRange = null;
+ // Record the range of each y-axis at the start of the drag.
+ // If any axis has a valueRange or valueWindow, then we want a 2D pan.
+ context.is2DPan = false;
+ for (var i = 0; i < g.axes_.length; i++) {
+ var axis = g.axes_[i];
+ var yRange = g.yAxisRange(i);
+ axis.dragValueRange = yRange[1] - yRange[0];
+ axis.draggingValue = g.toDataYCoord(context.dragStartY, i);
+ if (axis.valueWindow || axis.valueRange) context.is2DPan = true;
+ }
- // Utility function to convert page-wide coordinates to canvas coords
- var px = 0;
- var py = 0;
- var getX = function(e) { return Dygraph.pageX(e) - px };
- var getY = function(e) { return Dygraph.pageY(e) - py };
+ // TODO(konigsberg): Switch from all this math to toDataCoords?
+ // Seems to work for the dragging value.
+ context.draggingDate = (context.dragStartX / g.width_) * context.dateRange + xRange[0];
+};
- // Draw zoom rectangles when the mouse is down and the user moves around
- Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(event) {
- if (isZooming) {
- dragEndX = getX(event);
- dragEndY = getY(event);
-
- var xDelta = Math.abs(dragStartX - dragEndX);
- var yDelta = Math.abs(dragStartY - dragEndY);
-
- // drag direction threshold for y axis is twice as large as x axis
- dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
-
- self.drawZoomRect_(dragDirection, dragStartX, dragEndX, dragStartY, dragEndY,
- prevDragDirection, prevEndX, prevEndY);
-
- prevEndX = dragEndX;
- prevEndY = dragEndY;
- prevDragDirection = dragDirection;
- } else if (isPanning) {
- dragEndX = getX(event);
- dragEndY = getY(event);
-
- // TODO(danvk): update this comment
- // Want to have it so that:
- // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
- // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
- // 3. draggingValue appears at dragEndY.
- // 4. valueRange is unaltered.
-
- var minDate = draggingDate - (dragEndX / self.width_) * dateRange;
- var maxDate = minDate + dateRange;
- self.dateWindow_ = [minDate, maxDate];
-
-
- // y-axis scaling is automatic unless this is a full 2D pan.
- if (is2DPan) {
- // Adjust each axis appropriately.
- var y_frac = dragEndY / self.height_;
- for (var i = 0; i < self.axes_.length; i++) {
- var axis = self.axes_[i];
- var maxValue = axis.draggingValue + y_frac * axis.dragValueRange;
- var minValue = maxValue - axis.dragValueRange;
- axis.valueWindow = [ minValue, maxValue ];
- }
- }
+// Called in response to an interaction model operation that
+// responds to an event that pans the view.
+//
+// It's used in the default callback for "mousemove" operations.
+// Custom interaction model builders can use it to provide the default
+// panning behavior.
+//
+Dygraph.movePan = function(event, g, context) {
+ context.dragEndX = g.dragGetX_(event, context);
+ context.dragEndY = g.dragGetY_(event, context);
- self.drawGraph_();
- }
- });
+ // TODO(danvk): update this comment
+ // Want to have it so that:
+ // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
+ // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
+ // 3. draggingValue appears at dragEndY.
+ // 4. valueRange is unaltered.
+
+ var minDate = context.draggingDate - (context.dragEndX / g.width_) * context.dateRange;
+ var maxDate = minDate + context.dateRange;
+ g.dateWindow_ = [minDate, maxDate];
+
+ // y-axis scaling is automatic unless this is a full 2D pan.
+ if (context.is2DPan) {
+ // Adjust each axis appropriately.
+ // NOTE(konigsberg): I don't think this computation for y_frac is correct.
+ // I think it doesn't take into account the display of the x axis.
+ // See, when I tested this with console.log(y_frac), and move the mouse
+ // cursor to the botom, the largest y_frac was 0.94, and not 1.0. That
+ // could also explain why panning tends to start with a small jumpy shift.
+ var y_frac = context.dragEndY / g.height_;
+
+ for (var i = 0; i < g.axes_.length; i++) {
+ var axis = g.axes_[i];
+ var maxValue = axis.draggingValue + y_frac * axis.dragValueRange;
+ var minValue = maxValue - axis.dragValueRange;
+ axis.valueWindow = [ minValue, maxValue ];
+ }
+ }
+
+ g.drawGraph_();
+}
- // Track the beginning of drag events
- Dygraph.addEvent(this.mouseEventElement_, 'mousedown', function(event) {
- // prevents mouse drags from selecting page text.
- if (event.preventDefault) {
- event.preventDefault(); // Firefox, Chrome, etc.
- } else {
- event.returnValue = false; // IE
- event.cancelBubble = true;
- }
+// Called in response to an interaction model operation that
+// responds to an event that ends panning.
+//
+// It's used in the default callback for "mouseup" operations.
+// Custom interaction model builders can use it to provide the default
+// panning behavior.
+//
+Dygraph.endPan = function(event, g, context) {
+ context.isPanning = false;
+ context.is2DPan = false;
+ context.draggingDate = null;
+ context.dateRange = null;
+ context.valueRange = null;
+}
- px = Dygraph.findPosX(self.canvas_);
- py = Dygraph.findPosY(self.canvas_);
- dragStartX = getX(event);
- dragStartY = getY(event);
+// Called in response to an interaction model operation that
+// responds to an event that starts zooming.
+//
+// It's used in the default callback for "mousedown" operations.
+// Custom interaction model builders can use it to provide the default
+// zooming behavior.
+//
+Dygraph.startZoom = function(event, g, context) {
+ context.isZooming = true;
+}
- if (event.altKey || event.shiftKey) {
- // have to be zoomed in to pan.
- var zoomedY = false;
- for (var i = 0; i < self.axes_.length; i++) {
- if (self.axes_[i].valueWindow || self.axes_[i].valueRange) {
- zoomedY = true;
- break;
+// Called in response to an interaction model operation that
+// responds to an event that defines zoom boundaries.
+//
+// It's used in the default callback for "mousemove" operations.
+// Custom interaction model builders can use it to provide the default
+// zooming behavior.
+//
+Dygraph.moveZoom = function(event, g, context) {
+ context.dragEndX = g.dragGetX_(event, context);
+ context.dragEndY = g.dragGetY_(event, context);
+
+ var xDelta = Math.abs(context.dragStartX - context.dragEndX);
+ var yDelta = Math.abs(context.dragStartY - context.dragEndY);
+
+ // drag direction threshold for y axis is twice as large as x axis
+ context.dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
+
+ g.drawZoomRect_(
+ context.dragDirection,
+ context.dragStartX,
+ context.dragEndX,
+ context.dragStartY,
+ context.dragEndY,
+ context.prevDragDirection,
+ context.prevEndX,
+ context.prevEndY);
+
+ context.prevEndX = context.dragEndX;
+ context.prevEndY = context.dragEndY;
+ context.prevDragDirection = context.dragDirection;
+}
+
+// Called in response to an interaction model operation that
+// responds to an event that performs a zoom based on previously defined
+// bounds..
+//
+// It's used in the default callback for "mouseup" operations.
+// Custom interaction model builders can use it to provide the default
+// zooming behavior.
+//
+Dygraph.endZoom = function(event, g, context) {
+ context.isZooming = false;
+ context.dragEndX = g.dragGetX_(event, context);
+ context.dragEndY = g.dragGetY_(event, context);
+ var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
+ var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
+
+ if (regionWidth < 2 && regionHeight < 2 &&
+ g.lastx_ != undefined && g.lastx_ != -1) {
+ // TODO(danvk): pass along more info about the points, e.g. 'x'
+ if (g.attr_('clickCallback') != null) {
+ g.attr_('clickCallback')(event, g.lastx_, g.selPoints_);
+ }
+ if (g.attr_('pointClickCallback')) {
+ // check if the click was on a particular point.
+ var closestIdx = -1;
+ var closestDistance = 0;
+ for (var i = 0; i < g.selPoints_.length; i++) {
+ var p = g.selPoints_[i];
+ var distance = Math.pow(p.canvasx - context.dragEndX, 2) +
+ Math.pow(p.canvasy - context.dragEndY, 2);
+ if (closestIdx == -1 || distance < closestDistance) {
+ closestDistance = distance;
+ closestIdx = i;
}
}
- if (!self.dateWindow_ && !zoomedY) return;
- isPanning = true;
- var xRange = self.xAxisRange();
- dateRange = xRange[1] - xRange[0];
-
- // Record the range of each y-axis at the start of the drag.
- // If any axis has a valueRange or valueWindow, then we want a 2D pan.
- is2DPan = false;
- for (var i = 0; i < self.axes_.length; i++) {
- var axis = self.axes_[i];
- var yRange = self.yAxisRange(i);
- axis.dragValueRange = yRange[1] - yRange[0];
- var r = self.toDataCoords(null, dragStartY, i);
- axis.draggingValue = r[1];
- if (axis.valueWindow || axis.valueRange) is2DPan = true;
+ // Allow any click within two pixels of the dot.
+ var radius = g.attr_('highlightCircleSize') + 2;
+ if (closestDistance <= 5 * 5) {
+ g.attr_('pointClickCallback')(event, g.selPoints_[closestIdx]);
}
+ }
+ }
- // TODO(konigsberg): Switch from all this math to toDataCoords?
- // Seems to work for the dragging value.
- draggingDate = (dragStartX / self.width_) * dateRange + xRange[0];
+ if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
+ g.doZoomX_(Math.min(context.dragStartX, context.dragEndX),
+ Math.max(context.dragStartX, context.dragEndX));
+ } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
+ g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
+ Math.max(context.dragStartY, context.dragEndY));
+ } else {
+ g.canvas_.getContext("2d").clearRect(0, 0,
+ g.canvas_.width,
+ g.canvas_.height);
+ }
+ context.dragStartX = null;
+ context.dragStartY = null;
+}
+
+Dygraph.defaultInteractionModel = {
+ // Track the beginning of drag events
+ mousedown: function(event, g, context) {
+ context.initializeMouseDown(event, g, context);
+
+ if (event.altKey || event.shiftKey) {
+ Dygraph.startPan(event, g, context);
} else {
- isZooming = true;
+ Dygraph.startZoom(event, g, context);
}
- });
+ },
- // If the user releases the mouse button during a drag, but not over the
- // canvas, then it doesn't count as a zooming action.
- Dygraph.addEvent(document, 'mouseup', function(event) {
- if (isZooming || isPanning) {
- isZooming = false;
- dragStartX = null;
- dragStartY = null;
+ // Draw zoom rectangles when the mouse is down and the user moves around
+ mousemove: function(event, g, context) {
+ if (context.isZooming) {
+ Dygraph.moveZoom(event, g, context);
+ } else if (context.isPanning) {
+ Dygraph.movePan(event, g, context);
}
+ },
- if (isPanning) {
- isPanning = false;
- draggingDate = null;
- dateRange = null;
- for (var i = 0; i < self.axes_.length; i++) {
- delete self.axes_[i].draggingValue;
- delete self.axes_[i].dragValueRange;
- }
+ mouseup: function(event, g, context) {
+ if (context.isZooming) {
+ Dygraph.endZoom(event, g, context);
+ } else if (context.isPanning) {
+ Dygraph.endPan(event, g, context);
}
- });
+ },
// Temporarily cancel the dragging event when the mouse leaves the graph
- Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(event) {
- if (isZooming) {
- dragEndX = null;
- dragEndY = null;
+ mouseout: function(event, g, context) {
+ if (context.isZooming) {
+ context.dragEndX = null;
+ context.dragEndY = null;
}
- });
+ },
- // If the mouse is released on the canvas during a drag event, then it's a
- // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
- Dygraph.addEvent(this.mouseEventElement_, 'mouseup', function(event) {
- if (isZooming) {
- isZooming = false;
- dragEndX = getX(event);
- dragEndY = getY(event);
- var regionWidth = Math.abs(dragEndX - dragStartX);
- var regionHeight = Math.abs(dragEndY - dragStartY);
-
- if (regionWidth < 2 && regionHeight < 2 &&
- self.lastx_ != undefined && self.lastx_ != -1) {
- // TODO(danvk): pass along more info about the points, e.g. 'x'
- if (self.attr_('clickCallback') != null) {
- self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
- }
- if (self.attr_('pointClickCallback')) {
- // check if the click was on a particular point.
- var closestIdx = -1;
- var closestDistance = 0;
- for (var i = 0; i < self.selPoints_.length; i++) {
- var p = self.selPoints_[i];
- var distance = Math.pow(p.canvasx - dragEndX, 2) +
- Math.pow(p.canvasy - dragEndY, 2);
- if (closestIdx == -1 || distance < closestDistance) {
- closestDistance = distance;
- closestIdx = i;
- }
- }
+ // Disable zooming out if panning.
+ dblclick: function(event, g, context) {
+ if (event.altKey || event.shiftKey) {
+ return;
+ }
+ // TODO(konigsberg): replace g.doUnzoom()_ with something that is
+ // friendlier to public use.
+ g.doUnzoom_();
+ }
+};
- // Allow any click within two pixels of the dot.
- var radius = self.attr_('highlightCircleSize') + 2;
- if (closestDistance <= 5 * 5) {
- self.attr_('pointClickCallback')(event, self.selPoints_[closestIdx]);
- }
- }
- }
+Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.defaultInteractionModel;
- if (regionWidth >= 10 && dragDirection == Dygraph.HORIZONTAL) {
- self.doZoomX_(Math.min(dragStartX, dragEndX),
- Math.max(dragStartX, dragEndX));
- } else if (regionHeight >= 10 && dragDirection == Dygraph.VERTICAL){
- self.doZoomY_(Math.min(dragStartY, dragEndY),
- Math.max(dragStartY, dragEndY));
+/**
+ * Set up all the mouse handlers needed to capture dragging behavior for zoom
+ * events.
+ * @private
+ */
+Dygraph.prototype.createDragInterface_ = function() {
+ var context = {
+ // Tracks whether the mouse is down right now
+ isZooming: false,
+ isPanning: false, // is this drag part of a pan?
+ is2DPan: false, // if so, is that pan 1- or 2-dimensional?
+ dragStartX: null,
+ dragStartY: null,
+ dragEndX: null,
+ dragEndY: null,
+ dragDirection: null,
+ prevEndX: null,
+ prevEndY: null,
+ prevDragDirection: null,
+
+ // TODO(danvk): update this comment
+ // draggingDate and draggingValue represent the [date,value] point on the
+ // graph at which the mouse was pressed. As the mouse moves while panning,
+ // the viewport must pan so that the mouse position points to
+ // [draggingDate, draggingValue]
+ draggingDate: null,
+
+ // TODO(danvk): update this comment
+ // The range in second/value units that the viewport encompasses during a
+ // panning operation.
+ dateRange: null,
+
+ // Utility function to convert page-wide coordinates to canvas coords
+ px: 0,
+ py: 0,
+
+ initializeMouseDown: function(event, g, context) {
+ // prevents mouse drags from selecting page text.
+ if (event.preventDefault) {
+ event.preventDefault(); // Firefox, Chrome, etc.
} else {
- self.canvas_.getContext("2d").clearRect(0, 0,
- self.canvas_.width,
- self.canvas_.height);
+ event.returnValue = false; // IE
+ event.cancelBubble = true;
}
- dragStartX = null;
- dragStartY = null;
+ context.px = Dygraph.findPosX(g.canvas_);
+ context.py = Dygraph.findPosY(g.canvas_);
+ context.dragStartX = g.dragGetX_(event, context);
+ context.dragStartY = g.dragGetY_(event, context);
}
+ };
- if (isPanning) {
- isPanning = false;
- is2DPan = false;
- draggingDate = null;
- dateRange = null;
- valueRange = null;
- }
- });
+ var interactionModel = this.attr_("interactionModel");
- // Double-clicking zooms back out
- Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) {
- // Disable zooming out if panning.
- if (event.altKey || event.shiftKey) return;
+ // Self is the graph.
+ var self = this;
- self.doUnzoom_();
+ // Function that binds the graph and context to the handler.
+ var bindHandler = function(handler) {
+ return function(event) {
+ handler(event, self, context);
+ };
+ };
+
+ for (var eventName in interactionModel) {
+ if (!interactionModel.hasOwnProperty(eventName)) continue;
+ Dygraph.addEvent(this.mouseEventElement_, eventName,
+ bindHandler(interactionModel[eventName]));
+ }
+
+ // If the user releases the mouse button during a drag, but not over the
+ // canvas, then it doesn't count as a zooming action.
+ Dygraph.addEvent(document, 'mouseup', function(event) {
+ if (context.isZooming || context.isPanning) {
+ context.isZooming = false;
+ context.dragStartX = null;
+ context.dragStartY = null;
+ }
+
+ if (context.isPanning) {
+ context.isPanning = false;
+ context.draggingDate = null;
+ context.dateRange = null;
+ for (var i = 0; i < self.axes_.length; i++) {
+ delete self.axes_[i].draggingValue;
+ delete self.axes_[i].dragValueRange;
+ }
+ }
});
};
@@ -1069,10 +1294,8 @@ Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, endY
Dygraph.prototype.doZoomX_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
// Convert the call to date ranges of the raw data.
- var r = this.toDataCoords(lowX, null);
- var minDate = r[0];
- r = this.toDataCoords(highX, null);
- var maxDate = r[0];
+ var minDate = this.toDataXCoord(lowX);
+ var maxDate = this.toDataXCoord(highX);
this.doZoomXDates_(minDate, maxDate);
};
@@ -1108,10 +1331,10 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) {
// coordinates increase as you go up the screen.
var valueRanges = [];
for (var i = 0; i < this.axes_.length; i++) {
- var hi = this.toDataCoords(null, lowY, i);
- var low = this.toDataCoords(null, highY, i);
- this.axes_[i].valueWindow = [low[1], hi[1]];
- valueRanges.push([low[1], hi[1]]);
+ var hi = this.toDataYCoord(lowY, i);
+ var low = this.toDataYCoord(highY, i);
+ this.axes_[i].valueWindow = [low, hi];
+ valueRanges.push([low, hi]);
}
this.drawGraph_();
@@ -1174,7 +1397,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
for (var i = 0; i < points.length; i++) {
var point = points[i];
if (point == null) continue;
- var dist = Math.abs(points[i].canvasx - canvasx);
+ var dist = Math.abs(point.canvasx - canvasx);
if (dist > minDist) continue;
minDist = dist;
idx = i;
@@ -1284,7 +1507,7 @@ Dygraph.prototype.updateSelection_ = function() {
}
var point = this.selPoints_[i];
var c = new RGBColor(this.plotter_.colors[point.name]);
- var yval = fmtFunc(point.yval, this.numDigits_ + 1); // In tenths.
+ var yval = fmtFunc(point.yval);
replace += " "
+ point.name + ":"
+ yval;
@@ -1428,7 +1651,9 @@ Dygraph.hmsString_ = function(date) {
* @private
*/
Dygraph.dateAxisFormatter = function(date, granularity) {
- if (granularity >= Dygraph.MONTHLY) {
+ if (granularity >= Dygraph.DECADAL) {
+ return date.strftime('%Y');
+ } else if (granularity >= Dygraph.MONTHLY) {
return date.strftime('%b %y');
} else {
var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
@@ -1465,6 +1690,18 @@ Dygraph.dateString_ = function(date, self) {
};
/**
+ * Round a number to the specified number of digits past the decimal point.
+ * @param {Number} num The number to round
+ * @param {Number} places The number of decimals to which to round
+ * @return {Number} The rounded number
+ * @private
+ */
+Dygraph.round_ = function(num, places) {
+ var shift = Math.pow(10, places);
+ return Math.round(num * shift)/shift;
+};
+
+/**
* Fires when there's data available to be graphed.
* @param {String} data Raw CSV data to be plotted
* @private
@@ -1493,12 +1730,8 @@ Dygraph.prototype.addXTicks_ = function() {
endDate = this.rawData_[this.rawData_.length - 1][0];
}
- var ret = this.attr_('xTicker')(startDate, endDate, this);
- if (ret.ticks !== undefined) { // Used numericTicks()?
- this.layout_.updateOptions({xTicks: ret.ticks});
- } else { // Used dateTicker() instead.
- this.layout_.updateOptions({xTicks: ret});
- }
+ var xTicks = this.attr_('xTicker')(startDate, endDate, this);
+ this.layout_.updateOptions({xTicks: xTicks});
};
// Time granularity enumeration
@@ -1522,7 +1755,8 @@ Dygraph.QUARTERLY = 16;
Dygraph.BIANNUAL = 17;
Dygraph.ANNUAL = 18;
Dygraph.DECADAL = 19;
-Dygraph.NUM_GRANULARITIES = 20;
+Dygraph.CENTENNIAL = 20;
+Dygraph.NUM_GRANULARITIES = 21;
Dygraph.SHORT_SPACINGS = [];
Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
@@ -1558,6 +1792,7 @@ Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
if (granularity == Dygraph.BIANNUAL) num_months = 2;
if (granularity == Dygraph.ANNUAL) num_months = 1;
if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
+ if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; }
var msInYear = 365.2524 * 24 * 3600 * 1000;
var num_years = 1.0 * (end_time - start_time) / msInYear;
@@ -1630,6 +1865,11 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
} else if (granularity == Dygraph.DECADAL) {
months = [ 0 ];
year_mod = 10;
+ } else if (granularity == Dygraph.CENTENNIAL) {
+ months = [ 0 ];
+ year_mod = 100;
+ } else {
+ this.warn("Span of dates is too long");
}
var start_year = new Date(start_time).getFullYear();
@@ -1675,46 +1915,11 @@ Dygraph.dateTicker = function(startDate, endDate, self) {
};
/**
- * Determine the number of significant figures in a Number up to the specified
- * precision. Note that there is no way to determine if a trailing '0' is
- * significant or not, so by convention we return 1 for all of the following
- * inputs: 1, 1.0, 1.00, 1.000 etc.
- * @param {Number} x The input value.
- * @param {Number} opt_maxPrecision Optional maximum precision to consider.
- * Default and maximum allowed value is 13.
- * @return {Number} The number of significant figures which is >= 1.
- */
-Dygraph.significantFigures = function(x, opt_maxPrecision) {
- var precision = Math.max(opt_maxPrecision || 13, 13);
-
- // Convert the number to it's exponential notation form and work backwards,
- // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
- // dividing by 10 leads to roundoff errors. By using toExponential(), we let
- // the JavaScript interpreter handle the low level bits of the Number for us.
- var s = x.toExponential(precision);
- var ePos = s.lastIndexOf('e'); // -1 case handled by return below.
-
- for (var i = ePos - 1; i >= 0; i--) {
- if (s[i] == '.') {
- // Got to the decimal place. We'll call this 1 digit of precision because
- // we can't know for sure how many trailing 0s are significant.
- return 1;
- } else if (s[i] != '0') {
- // Found the first non-zero digit. Return the number of characters
- // except for the '.'.
- return i; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
- }
- }
-
- // Occurs if toExponential() doesn't return a string containing 'e', which
- // should never happen.
- return 1;
-};
-
-/**
* Add ticks when the x axis has numbers on it (instead of dates)
- * @param {Number} startDate Start of the date window (millis since epoch)
- * @param {Number} endDate End of the date window (millis since epoch)
+ * TODO(konigsberg): Update comment.
+ *
+ * @param {Number} minV minimum value
+ * @param {Number} maxV maximum value
* @param self
* @param {function} attribute accessor function.
* @return {Array.