X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=8a5d8709d5b31237ae865385a5d8ee720cf2a580;hb=ff022debe05bc120e1342725aae7dfaa63c6f139;hp=ae27c7c4b9c0adca8111d1523d4f49f503a79417;hpb=d63e67995e52dde3b735aaa0b426d4dfc2337126;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index ae27c7c..8a5d870 100644 --- a/dygraph.js +++ b/dygraph.js @@ -37,7 +37,7 @@ And error bars will be calculated automatically using a binomial distribution. - For further documentation and examples, see http://www.danvk.org/dygraphs + For further documentation and examples, see http://dygraphs.com/ */ @@ -79,6 +79,7 @@ Dygraph.DEFAULT_WIDTH = 480; Dygraph.DEFAULT_HEIGHT = 320; Dygraph.AXIS_LINE_WIDTH = 0.3; + // Default attribute values. Dygraph.DEFAULT_ATTRS = { highlightCircleSize: 3, @@ -127,7 +128,9 @@ Dygraph.DEFAULT_ATTRS = { hideOverlayOnMouseOut: true, stepPlot: false, - avoidMinZero: false + avoidMinZero: false, + + interactionModel: null // will be set to Dygraph.defaultInteractionModel. }; // Various logging levels. @@ -158,7 +161,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 @@ -166,6 +169,16 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { * @private */ Dygraph.prototype.__init__ = function(div, file, attrs) { + // Hack for IE: if we're using excanvas and the document hasn't finished + // loading yet (and hence may not have initialized whatever it needs to + // initialize), then keep calling this routine periodically until it has. + if (/MSIE/.test(navigator.userAgent) && !window.opera && + typeof(G_vmlCanvasManager) != 'undefined' && + document.readyState != 'complete') { + var self = this; + setTimeout(function() { self.__init__(div, file, attrs) }, 100); + } + // Support two-argument constructor if (attrs == null) { attrs = {}; } @@ -189,10 +202,10 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // If the div isn't already sized then inherit from our attrs or // give it a default size. if (div.style.width == '') { - div.style.width = attrs.width || Dygraph.DEFAULT_WIDTH + "px"; + div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px"; } if (div.style.height == '') { - div.style.height = attrs.height || Dygraph.DEFAULT_HEIGHT + "px"; + div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px"; } this.width_ = parseInt(div.style.width, 10); this.height_ = parseInt(div.style.height, 10); @@ -343,44 +356,149 @@ 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. Uses the first axis by default. + * 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 = toPercentYCoord(y, axis); - return ret; -}; + if (pct == null) { + return null; + } + 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 (!this.attr_("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 - Math.log(y)) / (logr1 - Math.log(yRange[0])); + // + // Move denominator to both sides: + // pct * (logr1 - Math.log(yRange[0])) = logr1 - Math.log(y); + // + // subtract logr1, and take the negative value. + // logr1 - (pct * (logr1 - Math.log(yRange[0]))) = Math.log(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. + // Math.log(y) = logr1 - (pct * (logr1 - Math.log(yRange[0]))); + + var logr1 = Math.log(yRange[1]); + var exponent = logr1 - (pct * (logr1 - Math.log(yRange[0]))); + var value = Math.pow(Math.E, 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; } - return ret; -}; + var area = this.plotter_.area; + var yRange = this.yAxisRange(axis); + + var pct; + if (!this.attr_("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 = Math.log(yRange[1]); + pct = (logr1 - Math.log(y)) / (logr1 - Math.log(yRange[0])); + } + return pct; +} /** * Returns the number of columns (including the independent variable). @@ -420,6 +538,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 @@ -691,40 +826,40 @@ Dygraph.prototype.positionLabelsDiv_ = function() { var area = this.plotter_.area; var div = this.attr_("labelsDiv"); - div.style.left = area.x + area.w - this.attr_("labelsDivWidth") + "px"; + div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px"; }; /** * Create the text box to adjust the averaging period - * @return {Object} The newly-created text box * @private */ Dygraph.prototype.createRollInterface_ = function() { - // Destroy any existing roller. - if (this.roller_) this.graphDiv.removeChild(this.roller_); + // Create a roller if one doesn't exist already. + if (!this.roller_) { + this.roller_ = document.createElement("input"); + this.roller_.type = "text"; + this.roller_.style.display = "none"; + this.graphDiv.appendChild(this.roller_); + } + + var display = this.attr_('showRoller') ? 'block' : 'none'; - var display = this.attr_('showRoller') ? "block" : "none"; var textAttr = { "position": "absolute", "zIndex": 10, "top": (this.plotter_.area.h - 25) + "px", "left": (this.plotter_.area.x + 1) + "px", "display": display }; - var roller = document.createElement("input"); - roller.type = "text"; - roller.size = "2"; - roller.value = this.rollPeriod_; + this.roller_.size = "2"; + this.roller_.value = this.rollPeriod_; for (var name in textAttr) { if (textAttr.hasOwnProperty(name)) { - roller.style[name] = textAttr[name]; + this.roller_.style[name] = textAttr[name]; } } - var pa = this.graphDiv; - pa.appendChild(roller); var dygraph = this; - roller.onchange = function() { dygraph.adjustRoll(roller.value); }; - return roller; + this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); }; }; // These functions are taken from MochiKit.Signal @@ -752,234 +887,333 @@ 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; + } + + // 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]; +}; - // 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 }; +// 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); - // 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 ]; - } - } + // 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. - self.drawGraph_(); + 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. + 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 ]; } - }); + } - // Track the beginning of drag events - Dygraph.addEvent(this.mouseEventElement_, 'mousedown', function(event) { - px = Dygraph.findPosX(self.canvas_); - py = Dygraph.findPosY(self.canvas_); - dragStartX = getX(event); - dragStartY = getY(event); + g.drawGraph_(); +} - 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 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; +} + +// 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; +} + +// 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]); } + } + } + + 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); - // TODO(konigsberg): Switch from all this math to toDataCoords? - // Seems to work for the dragging value. - draggingDate = (dragStartX / self.width_) * dateRange + xRange[0]; + 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"); + + // Self is the graph. + var self = this; + + // 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])); + } - // Double-clicking zooms back out - Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) { - // Disable zooming out if panning. - if (event.altKey || event.shiftKey) return; + // 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; + } - self.doUnzoom_(); + 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; + } + } }); }; @@ -1048,10 +1282,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); }; @@ -1068,8 +1300,7 @@ Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) { this.dateWindow_ = [minDate, maxDate]; this.drawGraph_(); if (this.attr_("zoomCallback")) { - var yRange = this.yAxisRange(); - this.attr_("zoomCallback")(minDate, maxDate, yRange[0], yRange[1]); + this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges()); } }; @@ -1088,10 +1319,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_(); @@ -1152,14 +1383,17 @@ Dygraph.prototype.mouseMove_ = function(event) { var minDist = 1e+100; var idx = -1; for (var i = 0; i < points.length; i++) { - var dist = Math.abs(points[i].canvasx - canvasx); + var point = points[i]; + if (point == null) continue; + var dist = Math.abs(point.canvasx - canvasx); if (dist > minDist) continue; minDist = dist; idx = i; } if (idx >= 0) lastx = points[idx].xval; // Check that you can really highlight the last day's data - if (canvasx > points[points.length-1].canvasx) + var last = points[points.length-1]; + if (last != null && canvasx > last.canvasx) lastx = points[points.length-1].xval; // Extract the points we've selected @@ -1192,7 +1426,7 @@ Dygraph.prototype.mouseMove_ = function(event) { var px = this.lastx_; if (px !== null && lastx != px) { // only fire if the selected point has changed. - this.attr_("highlightCallback")(event, lastx, this.selPoints_); + this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx)); } } @@ -1203,6 +1437,24 @@ Dygraph.prototype.mouseMove_ = function(event) { }; /** + * Transforms layout_.points index into data row number. + * @param int layout_.points index + * @return int row number, or -1 if none could be found. + * @private + */ +Dygraph.prototype.idxToRow_ = function(idx) { + if (idx < 0) return -1; + + for (var i in this.layout_.datasets) { + if (idx < this.layout_.datasets[i].length) { + return this.boundaryIds_[0][0]+idx; + } + idx -= this.layout_.datasets[i].length; + } + return -1; +}; + +/** * Draw dots over the selectied points in the data series. This function * takes care of cleanup of previously-drawn dots. * @private @@ -1387,7 +1639,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(); @@ -1489,7 +1743,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; @@ -1525,6 +1780,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; @@ -1597,6 +1853,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(); @@ -1643,6 +1904,8 @@ Dygraph.dateTicker = function(startDate, endDate, self) { /** * Add ticks when the x axis has numbers on it (instead of dates) + * TODO(konigsberg): Update comment. + * * @param {Number} startDate Start of the date window (millis since epoch) * @param {Number} endDate End of the date window (millis since epoch) * @param self @@ -1662,43 +1925,61 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) { ticks.push({v: vals[i]}); } } else { - // Basic idea: - // Try labels every 1, 2, 5, 10, 20, 50, 100, etc. - // Calculate the resulting tick spacing (i.e. this.height_ / nTicks). - // The first spacing greater than pixelsPerYLabel is what we use. - // TODO(danvk): version that works on a log scale. - if (attr("labelsKMG2")) { - var mults = [1, 2, 4, 8]; + if (self.attr_("logscale")) { + // As opposed to the other ways for computing ticks, we're just going + // for nearby values. There's no reasonable way to scale the values + // (unless we want to show strings like "log(" + x + ")") in which case + // x can be integer values. + + // so compute height / pixelsPerTick and move on. + var pixelsPerTick = attr('pixelsPerYLabel'); + var nTicks = Math.floor(self.height_ / pixelsPerTick); + var vv = minV; + + // Construct the set of ticks. + for (var i = 0; i < nTicks; i++) { + ticks.push( {v: vv} ); + vv = vv * Math.E; + } } else { - var mults = [1, 2, 5]; - } - var scale, low_val, high_val, nTicks; - // TODO(danvk): make it possible to set this for x- and y-axes independently. - var pixelsPerTick = attr('pixelsPerYLabel'); - for (var i = -10; i < 50; i++) { + // Basic idea: + // Try labels every 1, 2, 5, 10, 20, 50, 100, etc. + // Calculate the resulting tick spacing (i.e. this.height_ / nTicks). + // The first spacing greater than pixelsPerYLabel is what we use. + // TODO(danvk): version that works on a log scale. if (attr("labelsKMG2")) { - var base_scale = Math.pow(16, i); + var mults = [1, 2, 4, 8]; } else { - var base_scale = Math.pow(10, i); + var mults = [1, 2, 5]; } - for (var j = 0; j < mults.length; j++) { - scale = base_scale * mults[j]; - low_val = Math.floor(minV / scale) * scale; - high_val = Math.ceil(maxV / scale) * scale; - nTicks = Math.abs(high_val - low_val) / scale; - var spacing = self.height_ / nTicks; - // wish I could break out of both loops at once... + var scale, low_val, high_val, nTicks; + // TODO(danvk): make it possible to set this for x- and y-axes independently. + var pixelsPerTick = attr('pixelsPerYLabel'); + for (var i = -10; i < 50; i++) { + if (attr("labelsKMG2")) { + var base_scale = Math.pow(16, i); + } else { + var base_scale = Math.pow(10, i); + } + for (var j = 0; j < mults.length; j++) { + scale = base_scale * mults[j]; + low_val = Math.floor(minV / scale) * scale; + high_val = Math.ceil(maxV / scale) * scale; + nTicks = Math.abs(high_val - low_val) / scale; + var spacing = self.height_ / nTicks; + // wish I could break out of both loops at once... + if (spacing > pixelsPerTick) break; + } if (spacing > pixelsPerTick) break; } - if (spacing > pixelsPerTick) break; - } - // Construct the set of ticks. - // Allow reverse y-axis if it's explicitly requested. - if (low_val > high_val) scale *= -1; - for (var i = 0; i < nTicks; i++) { - var tickV = low_val + i * scale; - ticks.push( {v: tickV} ); + // Construct the set of ticks. + // Allow reverse y-axis if it's explicitly requested. + if (low_val > high_val) scale *= -1; + for (var i = 0; i < nTicks; i++) { + var tickV = low_val + i * scale; + ticks.push( {v: tickV} ); + } } } @@ -1799,7 +2080,7 @@ Dygraph.prototype.predraw_ = function() { // The roller sits in the bottom left corner of the chart. We don't know where // this will be until the options are available, so it's positioned here. - this.roller_ = this.createRollInterface_(); + this.createRollInterface_(); // Same thing applies for the labelsDiv. It's right edge should be flush with // the right edge of the charting area (which may not be the same as the right @@ -1811,7 +2092,6 @@ Dygraph.prototype.predraw_ = function() { }; /** -======= * Update the graph with new data. This method is called when the viewing area * has changed. If the underlying data or options have changed, predraw_ will * be called before drawGraph_ is called. @@ -1888,11 +2168,6 @@ Dygraph.prototype.drawGraph_ = function() { } var seriesExtremes = this.extremeValues_(series); - extremes[seriesName] = seriesExtremes; - var thisMinY = seriesExtremes[0]; - var thisMaxY = seriesExtremes[1]; - if (minY === null || (thisMinY != null && thisMinY < minY)) minY = thisMinY; - if (maxY === null || (thisMaxY != null && thisMaxY > maxY)) maxY = thisMaxY; if (bars) { for (var j=0; j maxY) - maxY = cumulative_y[x]; + if (cumulative_y[x] > seriesExtremes[1]) { + seriesExtremes[1] = cumulative_y[x]; + } + if (cumulative_y[x] < seriesExtremes[0]) { + seriesExtremes[0] = cumulative_y[x]; + } } } + extremes[seriesName] = seriesExtremes; datasets[i] = series; } @@ -1966,7 +2247,7 @@ Dygraph.prototype.computeYAxes_ = function() { // Get a list of series names. var labels = this.attr_("labels"); - var series = []; + var series = {}; for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1); // all options which could be applied per-axis: @@ -2022,6 +2303,17 @@ Dygraph.prototype.computeYAxes_ = function() { this.seriesToAxisMap_[seriesName] = idx; } } + + // Now we remove series from seriesToAxisMap_ which are not visible. We do + // this last so that hiding the first series doesn't destroy the axis + // properties of the primary axis. + var seriesToAxisFiltered = {}; + var vis = this.visibility(); + for (var i = 1; i < labels.length; i++) { + var s = labels[i]; + if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s]; + } + this.seriesToAxisMap_ = seriesToAxisFiltered; }; /** @@ -2055,6 +2347,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // Compute extreme values, a span and tick marks for each axis. for (var i = 0; i < this.axes_.length; i++) { + var isLogScale = this.attr_("logscale"); var axis = this.axes_[i]; if (axis.valueWindow) { // This is only set if the user has zoomed on the y-axis. It is never set @@ -2065,7 +2358,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // This is a user-set value range for this axis. axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]]; } else { - // Calcuate the extremes of extremes. + // Calculate the extremes of extremes. var series = seriesForAxis[i]; var minY = Infinity; // extremes[series[0]][0]; var maxY = -Infinity; // extremes[series[0]][1]; @@ -2079,18 +2372,26 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { var span = maxY - minY; // special case: if we have no sense of scale, use +/-10% of the sole value. if (span == 0) { span = maxY; } - var maxAxisY = maxY + 0.1 * span; - var minAxisY = minY - 0.1 * span; - // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense. - if (!this.attr_("avoidMinZero")) { - if (minAxisY < 0 && minY >= 0) minAxisY = 0; - if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0; - } + var maxAxisY; + var minAxisY; + if (isLogScale) { + var maxAxisY = maxY + 0.1 * span; + var minAxisY = minY; + } else { + var maxAxisY = maxY + 0.1 * span; + var minAxisY = minY - 0.1 * span; + + // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense. + if (!this.attr_("avoidMinZero")) { + if (minAxisY < 0 && minY >= 0) minAxisY = 0; + if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0; + } - if (this.attr_("includeZero")) { - if (maxY < 0) maxAxisY = 0; - if (minY > 0) minAxisY = 0; + if (this.attr_("includeZero")) { + if (maxY < 0) maxAxisY = 0; + if (minY > 0) minAxisY = 0; + } } axis.computedValueRange = [minAxisY, maxAxisY]; @@ -2362,7 +2663,8 @@ Dygraph.prototype.parseCSV_ = function(data) { // Parse the x as a float or return null if it's not a number. var parseFloatOrNull = function(x) { var val = parseFloat(x); - return isNaN(val) ? null : val; + // isFinite() returns false for NaN and +/-Infinity. + return isFinite(val) ? val : null; }; var xParser; @@ -2594,6 +2896,11 @@ Dygraph.prototype.parseDataTable_ = function(data) { if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) { outOfOrder = true; } + + // Strip out infinities, which give dygraphs problems later on. + for (var j = 0; j < row.length; j++) { + if (!isFinite(row[j])) row[j] = null; + } ret.push(row); } @@ -2808,7 +3115,7 @@ Dygraph.prototype.visibility = function() { */ Dygraph.prototype.setVisibility = function(num, value) { var x = this.visibility(); - if (num < 0 && num >= x.length) { + if (num < 0 || num >= x.length) { this.warn("invalid series number in setVisibility: " + num); } else { x[num] = value; @@ -2851,30 +3158,36 @@ Dygraph.prototype.indexFromSetName = function(name) { Dygraph.addAnnotationRule = function() { if (Dygraph.addedAnnotationCSS) return; - var mysheet; - if (document.styleSheets.length > 0) { - mysheet = document.styleSheets[0]; - } else { - var styleSheetElement = document.createElement("style"); - styleSheetElement.type = "text/css"; - document.getElementsByTagName("head")[0].appendChild(styleSheetElement); - for(i = 0; i < document.styleSheets.length; i++) { - if (document.styleSheets[i].disabled) continue; - mysheet = document.styleSheets[i]; - } - } - var rule = "border: 1px solid black; " + "background-color: white; " + "text-align: center;"; - if (mysheet.insertRule) { // Firefox - var idx = mysheet.cssRules ? mysheet.cssRules.length : 0; - mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx); - } else if (mysheet.addRule) { // IE - mysheet.addRule(".dygraphDefaultAnnotation", rule); + + var styleSheetElement = document.createElement("style"); + styleSheetElement.type = "text/css"; + document.getElementsByTagName("head")[0].appendChild(styleSheetElement); + + // Find the first style sheet that we can access. + // We may not add a rule to a style sheet from another domain for security + // reasons. This sometimes comes up when using gviz, since the Google gviz JS + // adds its own style sheets from google.com. + for (var i = 0; i < document.styleSheets.length; i++) { + if (document.styleSheets[i].disabled) continue; + var mysheet = document.styleSheets[i]; + try { + if (mysheet.insertRule) { // Firefox + var idx = mysheet.cssRules ? mysheet.cssRules.length : 0; + mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx); + } else if (mysheet.addRule) { // IE + mysheet.addRule(".dygraphDefaultAnnotation", rule); + } + Dygraph.addedAnnotationCSS = true; + return; + } catch(err) { + // Was likely a security exception. + } } - Dygraph.addedAnnotationCSS = true; + this.warn("Unable to add default annotation CSS rule; display may be off."); } /** @@ -2902,7 +3215,14 @@ Dygraph.GVizChart = function(container) { } Dygraph.GVizChart.prototype.draw = function(data, options) { + // Clear out any existing dygraph. + // TODO(danvk): would it make more sense to simply redraw using the current + // date_graph object? this.container.innerHTML = ''; + if (typeof(this.date_graph) != 'undefined') { + this.date_graph.destroy(); + } + this.date_graph = new Dygraph(this.container, data, options); }