X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=032b1cd52caa7c60f592b9e25720a4fc58da6ebd;hb=9f1439f420651f077e8d8d15598a5a6bda7881f5;hp=6396ef2ea05a8c00efa3706f6b91faee6fdf6fee;hpb=3c51ab748119e70ad44691d062a38c7e026158eb;p=dygraphs.git

diff --git a/dygraph.js b/dygraph.js
index 6396ef2..032b1cd 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,
@@ -95,7 +96,9 @@ Dygraph.DEFAULT_ATTRS = {
   labelsKMG2: false,
   showLabelsOnHighlight: true,
 
-  yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
+  yValueFormatter: function(x, opt_numDigits) {
+    return x.toPrecision(Math.min(21, Math.max(1, opt_numDigits || 2)));
+  },
 
   strokeWidth: 1.0,
 
@@ -127,7 +130,9 @@ Dygraph.DEFAULT_ATTRS = {
   hideOverlayOnMouseOut: true,
 
   stepPlot: false,
-  avoidMinZero: false
+  avoidMinZero: false,
+
+  interactionModel: null  // will be set to Dygraph.defaultInteractionModel.
 };
 
 // Various logging levels.
@@ -136,6 +141,11 @@ Dygraph.INFO = 2;
 Dygraph.WARNING = 3;
 Dygraph.ERROR = 3;
 
+// Directions for panning and zooming. Use bit operations when combined
+// values are possible.
+Dygraph.HORIZONTAL = 1;
+Dygraph.VERTICAL = 2;
+
 // Used for initializing annotation CSS rules only once.
 Dygraph.addedAnnotationCSS = false;
 
@@ -153,7 +163,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
@@ -161,6 +171,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 = {}; }
 
@@ -172,10 +192,24 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   this.previousVerticalX_ = -1;
   this.fractions_ = attrs.fractions || false;
   this.dateWindow_ = attrs.dateWindow || null;
-  this.valueRange_ = attrs.valueRange || null;
+
   this.wilsonInterval_ = attrs.wilsonInterval || true;
   this.is_initial_draw_ = true;
   this.annotations_ = [];
+  
+  // Number of digits to use when labeling the x (if numeric) and y axis
+  // ticks.
+  this.numXDigits_ = 2;
+  this.numYDigits_ = 2;
+
+  // When labeling x (if numeric) or y values in the legend, there are
+  // numDigits + numExtraDigits of precision used.  For axes labels with N
+  // digits of precision, the data should be displayed with at least N+1 digits
+  // of precision. The reason for this is to divide each interval between
+  // successive ticks into tenths (for 1) or hundredths (for 2), etc.  For
+  // example, if the labels are [0, 1, 2], we want data to be displayed as
+  // 0.1, 1.3, etc.
+  this.numExtraDigits_ = 1;
 
   // Clear the div. This ensure that, if multiple dygraphs are passed the same
   // div, then only one will be drawn.
@@ -184,10 +218,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);
@@ -285,7 +319,7 @@ Dygraph.prototype.error = function(message) {
 
 /**
  * Returns the current rolling period, as set by the user or an option.
- * @return {Number} The number of days in the rolling window
+ * @return {Number} The number of points in the rolling window
  */
 Dygraph.prototype.rollPeriod = function() {
   return this.rollPeriod_;
@@ -307,19 +341,39 @@ Dygraph.prototype.xAxisRange = function() {
 };
 
 /**
- * Returns the currently-visible y-range. This can be affected by zooming,
- * panning or a call to updateOptions.
+ * Returns the currently-visible y-range for an axis. This can be affected by
+ * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
+ * called with no arguments, returns the range of the first axis.
  * Returns a two-element array: [bottom, top].
  */
-Dygraph.prototype.yAxisRange = function() {
-  return this.displayedYRange_;
+Dygraph.prototype.yAxisRange = function(idx) {
+  if (typeof(idx) == "undefined") idx = 0;
+  if (idx < 0 || idx >= this.axes_.length) return null;
+  return [ this.axes_[idx].computedValueRange[0],
+           this.axes_[idx].computedValueRange[1] ];
+};
+
+/**
+ * Returns the currently-visible y-ranges for each axis. This can be affected by
+ * zooming, panning, calls to updateOptions, etc.
+ * Returns an array of [bottom, top] pairs, one for each y-axis.
+ */
+Dygraph.prototype.yAxisRanges = function() {
+  var ret = [];
+  for (var i = 0; i < this.axes_.length; i++) {
+    ret.push(this.yAxisRange(i));
+  }
+  return ret;
 };
 
+// TODO(danvk): use these functions throughout dygraphs.
 /**
  * Convert from data coordinates to canvas/div X/Y 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]
  */
-Dygraph.prototype.toDomCoords = function(x, y) {
+Dygraph.prototype.toDomCoords = function(x, y, axis) {
   var ret = [null, null];
   var area = this.plotter_.area;
   if (x !== null) {
@@ -328,19 +382,20 @@ Dygraph.prototype.toDomCoords = function(x, y) {
   }
 
   if (y !== null) {
-    var yRange = this.yAxisRange();
+    var yRange = this.yAxisRange(axis);
     ret[1] = area.y + (yRange[1] - y) / (yRange[1] - yRange[0]) * area.h;
   }
 
   return ret;
 };
 
-// TODO(danvk): use these functions throughout dygraphs.
 /**
  * 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]
  */
-Dygraph.prototype.toDataCoords = function(x, y) {
+Dygraph.prototype.toDataCoords = function(x, y, axis) {
   var ret = [null, null];
   var area = this.plotter_.area;
   if (x !== null) {
@@ -349,7 +404,7 @@ Dygraph.prototype.toDataCoords = function(x, y) {
   }
 
   if (y !== null) {
-    var yRange = this.yAxisRange();
+    var yRange = this.yAxisRange(axis);
     ret[1] = yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
   }
 
@@ -394,12 +449,22 @@ Dygraph.addEvent = function(el, evt, fn) {
   }
 };
 
-Dygraph.clipCanvas_ = function(cnv, clip) {
-  var ctx = cnv.getContext("2d");
-  ctx.beginPath();
-  ctx.rect(clip.left, clip.top, clip.width, clip.height);
-  ctx.clip();
-};
+
+// 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
@@ -416,15 +481,6 @@ Dygraph.prototype.createInterface_ = function() {
   this.graphDiv.style.height = this.height_ + "px";
   enclosing.appendChild(this.graphDiv);
 
-  var clip = {
-    top: 0,
-    left: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
-  };
-  clip.width = this.width_ - clip.left - this.attr_("rightGap");
-  clip.height = this.height_ - this.attr_("axisLabelFontSize")
-      - 2 * this.attr_("axisTickSize");
-  this.clippingArea_ = clip;
-
   // Create the canvas for interactive parts of the chart.
   this.canvas_ = Dygraph.createCanvas();
   this.canvas_.style.position = "absolute";
@@ -441,10 +497,6 @@ Dygraph.prototype.createInterface_ = function() {
   this.graphDiv.appendChild(this.canvas_);
   this.mouseEventElement_ = this.canvas_;
 
-  // Make sure we don't overdraw.
-  Dygraph.clipCanvas_(this.hidden_, this.clippingArea_);
-  Dygraph.clipCanvas_(this.canvas_, this.clippingArea_);
-
   var dygraph = this;
   Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
     dygraph.mouseMove_(e);
@@ -469,12 +521,8 @@ Dygraph.prototype.createInterface_ = function() {
                           axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
   Dygraph.update(this.renderOptions_, this.attrs_);
   Dygraph.update(this.renderOptions_, this.user_attrs_);
-  this.plotter_ = new DygraphCanvasRenderer(this,
-                                            this.hidden_, this.layout_,
-                                            this.renderOptions_);
 
   this.createStatusMessage_();
-  this.createRollInterface_();
   this.createDragInterface_();
 };
 
@@ -680,33 +728,49 @@ Dygraph.prototype.createStatusMessage_ = function() {
 };
 
 /**
+ * Position the labels div so that its right edge is flush with the right edge
+ * of the charting area.
+ */
+Dygraph.prototype.positionLabelsDiv_ = function() {
+  // Don't touch a user-specified labelsDiv.
+  if (this.user_attrs_.hasOwnProperty("labelsDiv")) return;
+
+  var area = this.plotter_.area;
+  var div = this.attr_("labelsDiv");
+  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() {
-  var display = this.attr_('showRoller') ? "block" : "none";
+  // 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 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
@@ -734,162 +798,346 @@ 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;
-  var dragStartX = null;
-  var dragStartY = null;
-  var dragEndX = null;
-  var dragEndY = null;
-  var prevEndX = null;
-  var draggingDate = null;
-  var dateRange = null;
-
-  // 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 };
+Dygraph.prototype.dragGetY_ = function(e, context) {
+  return Dygraph.pageY(e) - context.py
+};
 
-  // 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);
+// 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) {
+  // have to be zoomed in to pan.
+  // TODO(konigsberg): Let's loosen this zoom-to-pan restriction, also
+  // perhaps create panning boundaries? A more flexible pan would make it,
+  // ahem, 'pan-useful'.
+  var zoomedY = false;
+  for (var i = 0; i < g.axes_.length; i++) {
+    if (g.axes_[i].valueWindow || g.axes_[i].valueRange) {
+      zoomedY = true;
+      break;
+    }
+  }
+  if (!g.dateWindow_ && !zoomedY) return;
+
+  context.isPanning = true;
+  var xRange = g.xAxisRange();
+  context.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.
+  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];
+    var r = g.toDataCoords(null, context.dragStartY, i);
+    axis.draggingValue = r[1];
+    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];
+};
+
+// 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);
+
+  // 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.
+    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_();
+}
+
+// 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;
+}
 
-      self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
-      prevEndX = dragEndX;
-    } else if (isPanning) {
-      dragEndX = getX(event);
-      dragEndY = getY(event);
+// 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;
+}
 
-      // Want to have it so that:
-      // 1. draggingDate appears at dragEndX
-      // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
+// 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;
+        }
+      }
 
-      self.dateWindow_[0] = draggingDate - (dragEndX / self.width_) * dateRange;
-      self.dateWindow_[1] = self.dateWindow_[0] + dateRange;
-      self.drawGraph_(self.rawData_);
+      // 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
-  Dygraph.addEvent(this.mouseEventElement_, 'mousedown', function(event) {
-    px = Dygraph.findPosX(self.canvas_);
-    py = Dygraph.findPosY(self.canvas_);
-    dragStartX = getX(event);
-    dragStartY = getY(event);
+  mousedown: function(event, g, context) {
+    context.initializeMouseDown(event, g, context);
 
     if (event.altKey || event.shiftKey) {
-      if (!self.dateWindow_) return;  // have to be zoomed in to pan.
-      isPanning = true;
-      dateRange = self.dateWindow_[1] - self.dateWindow_[0];
-      draggingDate = (dragStartX / self.width_) * dateRange +
-        self.dateWindow_[0];
+      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;
+  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) {
-        self.doZoom_(Math.min(dragStartX, dragEndX),
-                     Math.max(dragStartX, dragEndX));
+/**
+ * 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;
-      draggingDate = null;
-      dateRange = null;
-    }
-  });
+  var interactionModel = this.attr_("interactionModel");
 
-  // Double-clicking zooms back out
-  Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) {
-    if (self.dateWindow_ == null) return;
-    self.dateWindow_ = null;
-    self.drawGraph_(self.rawData_);
-    var minDate = self.rawData_[0][0];
-    var maxDate = self.rawData_[self.rawData_.length - 1][0];
-    if (self.attr_("zoomCallback")) {
-      self.attr_("zoomCallback")(minDate, maxDate);
+  // 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]));
+  }
+
+  // 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;
+      }
     }
   });
 };
@@ -899,49 +1147,147 @@ Dygraph.prototype.createDragInterface_ = function() {
  * up any previous zoom rectangles that were drawn. This could be optimized to
  * avoid extra redrawing, but it's tricky to avoid interactions with the status
  * dots.
+ * 
+ * @param {Number} direction the direction of the zoom rectangle. Acceptable
+ * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
  * @param {Number} startX The X position where the drag started, in canvas
  * coordinates.
  * @param {Number} endX The current X position of the drag, in canvas coords.
+ * @param {Number} startY The Y position where the drag started, in canvas
+ * coordinates.
+ * @param {Number} endY The current Y position of the drag, in canvas coords.
+ * @param {Number} prevDirection the value of direction on the previous call to
+ * this function. Used to avoid excess redrawing
  * @param {Number} prevEndX The value of endX on the previous call to this
  * function. Used to avoid excess redrawing
+ * @param {Number} prevEndY The value of endY on the previous call to this
+ * function. Used to avoid excess redrawing
  * @private
  */
-Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
+Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, endY,
+                                           prevDirection, prevEndX, prevEndY) {
   var ctx = this.canvas_.getContext("2d");
 
   // Clean up from the previous rect if necessary
-  if (prevEndX) {
+  if (prevDirection == Dygraph.HORIZONTAL) {
     ctx.clearRect(Math.min(startX, prevEndX), 0,
                   Math.abs(startX - prevEndX), this.height_);
+  } else if (prevDirection == Dygraph.VERTICAL){
+    ctx.clearRect(0, Math.min(startY, prevEndY),
+                  this.width_, Math.abs(startY - prevEndY));
   }
 
   // Draw a light-grey rectangle to show the new viewing area
-  if (endX && startX) {
-    ctx.fillStyle = "rgba(128,128,128,0.33)";
-    ctx.fillRect(Math.min(startX, endX), 0,
-                 Math.abs(endX - startX), this.height_);
+  if (direction == Dygraph.HORIZONTAL) {
+    if (endX && startX) {
+      ctx.fillStyle = "rgba(128,128,128,0.33)";
+      ctx.fillRect(Math.min(startX, endX), 0,
+                   Math.abs(endX - startX), this.height_);
+    }
+  }
+  if (direction == Dygraph.VERTICAL) {
+    if (endY && startY) {
+      ctx.fillStyle = "rgba(128,128,128,0.33)";
+      ctx.fillRect(0, Math.min(startY, endY),
+                   this.width_, Math.abs(endY - startY));
+    }
   }
 };
 
 /**
- * Zoom to something containing [lowX, highX]. These are pixel coordinates
- * in the canvas. The exact zoom window may be slightly larger if there are no
- * data points near lowX or highX. This function redraws the graph.
+ * Zoom to something containing [lowX, highX]. These are pixel coordinates in
+ * the canvas. The exact zoom window may be slightly larger if there are no data
+ * points near lowX or highX. Don't confuse this function with doZoomXDates,
+ * which accepts dates that match the raw data. This function redraws the graph.
+ *
  * @param {Number} lowX The leftmost pixel value that should be visible.
  * @param {Number} highX The rightmost pixel value that should be visible.
  * @private
  */
-Dygraph.prototype.doZoom_ = function(lowX, highX) {
+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];
+  this.doZoomXDates_(minDate, maxDate);
+};
 
+/**
+ * Zoom to something containing [minDate, maxDate] values. Don't confuse this
+ * method with doZoomX which accepts pixel coordinates. This function redraws
+ * the graph.
+ *
+ * @param {Number} minDate The minimum date that should be visible.
+ * @param {Number} maxDate The maximum date that should be visible.
+ * @private
+ */
+Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
   this.dateWindow_ = [minDate, maxDate];
-  this.drawGraph_(this.rawData_);
+  this.drawGraph_();
   if (this.attr_("zoomCallback")) {
-    this.attr_("zoomCallback")(minDate, maxDate);
+    this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
+  }
+};
+
+/**
+ * Zoom to something containing [lowY, highY]. These are pixel coordinates in
+ * the canvas. This function redraws the graph.
+ *
+ * @param {Number} lowY The topmost pixel value that should be visible.
+ * @param {Number} highY The lowest pixel value that should be visible.
+ * @private
+ */
+Dygraph.prototype.doZoomY_ = function(lowY, highY) {
+  // Find the highest and lowest values in pixel range for each axis.
+  // Note that lowY (in pixels) corresponds to the max Value (in data coords).
+  // This is because pixels increase as you go down on the screen, whereas data
+  // 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]]);
+  }
+
+  this.drawGraph_();
+  if (this.attr_("zoomCallback")) {
+    var xRange = this.xAxisRange();
+    this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges());
+  }
+};
+
+/**
+ * Reset the zoom to the original view coordinates. This is the same as
+ * double-clicking on the graph.
+ *
+ * @private
+ */
+Dygraph.prototype.doUnzoom_ = function() {
+  var dirty = false;
+  if (this.dateWindow_ != null) {
+    dirty = true;
+    this.dateWindow_ = null;
+  }
+
+  for (var i = 0; i < this.axes_.length; i++) {
+    if (this.axes_[i].valueWindow != null) {
+      dirty = true;
+      delete this.axes_[i].valueWindow;
+    }
+  }
+
+  if (dirty) {
+    // Putting the drawing operation before the callback because it resets
+    // yAxisRange.
+    this.drawGraph_();
+    if (this.attr_("zoomCallback")) {
+      var minDate = this.rawData_[0][0];
+      var maxDate = this.rawData_[this.rawData_.length - 1][0];
+      this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
+    }
   }
 };
 
@@ -964,14 +1310,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
@@ -1004,7 +1353,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));
     }
   }
 
@@ -1015,6 +1364,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
@@ -1041,7 +1408,8 @@ Dygraph.prototype.updateSelection_ = function() {
     var canvasx = this.selPoints_[0].canvasx;
 
     // Set the status message to indicate the selected point(s)
-    var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
+    var replace = this.attr_('xValueFormatter')(
+          this.lastx_, this.numXDigits_ + this.numExtraDigits_) + ":";
     var fmtFunc = this.attr_('yValueFormatter');
     var clen = this.colors_.length;
 
@@ -1055,7 +1423,7 @@ Dygraph.prototype.updateSelection_ = function() {
         }
         var point = this.selPoints_[i];
         var c = new RGBColor(this.plotter_.colors[point.name]);
-        var yval = fmtFunc(point.yval);
+        var yval = fmtFunc(point.yval, this.numYDigits_ + this.numExtraDigits_);
         replace += " <b><font color='" + c.toHex() + "'>"
                 + point.name + "</font></b>:"
                 + yval;
@@ -1199,7 +1567,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();
@@ -1217,7 +1587,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) {
  * @return {String} A date of the form "YYYY/MM/DD"
  * @private
  */
-Dygraph.dateString_ = function(date, self) {
+Dygraph.dateString_ = function(date) {
   var zeropad = Dygraph.zeropad;
   var d = new Date(date);
 
@@ -1236,25 +1606,13 @@ 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
  */
 Dygraph.prototype.loadedEvent_ = function(data) {
   this.rawData_ = this.parseCSV_(data);
-  this.drawGraph_(this.rawData_);
+  this.predraw_();
 };
 
 Dygraph.prototype.months =  ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
@@ -1267,17 +1625,18 @@ Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
  */
 Dygraph.prototype.addXTicks_ = function() {
   // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
-  var startDate, endDate;
+  var opts = {xTicks: []};
+  var formatter = this.attr_('xTicker');
   if (this.dateWindow_) {
-    startDate = this.dateWindow_[0];
-    endDate = this.dateWindow_[1];
+    opts.xTicks = formatter(this.dateWindow_[0], this.dateWindow_[1], this);
   } else {
-    startDate = this.rawData_[0][0];
-    endDate   = this.rawData_[this.rawData_.length - 1][0];
+    // numericTicks() returns multiple values.
+    var ret = formatter(this.rawData_[0][0],
+                        this.rawData_[this.rawData_.length - 1][0], this);
+    opts.xTicks = ret.ticks;
+    this.numXDigits_ = ret.numDigits;
   }
-
-  var xTicks = this.attr_('xTicker')(startDate, endDate, this);
-  this.layout_.updateOptions({xTicks: xTicks});
+  this.layout_.updateOptions(opts);
 };
 
 // Time granularity enumeration
@@ -1301,7 +1660,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;
@@ -1337,6 +1697,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;
@@ -1409,6 +1770,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();
@@ -1454,100 +1820,144 @@ 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 its 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)
  * @param self
- * @param {function} formatter: Optional formatter to use for each tick value
+ * @param {function} attribute accessor function.
  * @return {Array.<Object>} Array of {label, value} tuples.
  * @public
  */
-Dygraph.numericTicks = function(minV, maxV, self, formatter) {
-  // 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 (self.attr_("labelsKMG2")) {
-    var mults = [1, 2, 4, 8];
+Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
+  var attr = function(k) {
+    if (axis_props && axis_props.hasOwnProperty(k)) return axis_props[k];
+    return self.attr_(k);
+  };
+
+  var ticks = [];
+  if (vals) {
+    for (var i = 0; i < vals.length; i++) {
+      ticks[i].push({v: vals[i]});
+    }
   } 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 = self.attr_('pixelsPerYLabel');
-  for (var i = -10; i < 50; i++) {
-    if (self.attr_("labelsKMG2")) {
-      var base_scale = Math.pow(16, 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 mults = [1, 2, 4, 8];
     } 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...
+      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++) {
+      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 labels for the ticks
-  var ticks = [];
+  // Add formatted labels to the ticks.
   var k;
   var k_labels = [];
-  if (self.attr_("labelsKMB")) {
+  if (attr("labelsKMB")) {
     k = 1000;
     k_labels = [ "K", "M", "B", "T" ];
   }
-  if (self.attr_("labelsKMG2")) {
+  if (attr("labelsKMG2")) {
     if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
     k = 1024;
     k_labels = [ "k", "M", "G", "T" ];
   }
+  var formatter = attr('yAxisLabelFormatter') ?
+      attr('yAxisLabelFormatter') : attr('yValueFormatter');
 
-  // Allow reverse y-axis if it's explicitly requested.
-  if (low_val > high_val) scale *= -1;
+  // Determine the number of decimal places needed for the labels below by
+  // taking the maximum number of significant figures for any label.  We must
+  // take the max because we can't tell if trailing 0s are significant.
+  var numDigits = 0;
+  for (var i = 0; i < ticks.length; i++) {
+    numDigits = Math.max(Dygraph.significantFigures(ticks[i].v), numDigits);
+  }
 
-  for (var i = 0; i < nTicks; i++) {
-    var tickV = low_val + i * scale;
+  for (var i = 0; i < ticks.length; i++) {
+    var tickV = ticks[i].v;
     var absTickV = Math.abs(tickV);
-    var label;
-    if (formatter != undefined) {
-      label = formatter(tickV);
-    } else {
-      label = Dygraph.round_(tickV, 2);
-    }
-    if (k_labels.length) {
+    var label = (formatter !== undefined) ?
+        formatter(tickV, numDigits) : tickV.toPrecision(numDigits);
+    if (k_labels.length > 0) {
       // Round up to an appropriate unit.
       var n = k*k*k*k;
       for (var j = 3; j >= 0; j--, n /= k) {
         if (absTickV >= n) {
-          label = Dygraph.round_(tickV / n, 1) + k_labels[j];
+          label = (tickV / n).toPrecision(numDigits) + k_labels[j];
           break;
         }
       }
     }
-    ticks.push( {label: label, v: tickV} );
+    ticks[i].label = label;
   }
-  return ticks;
-};
-
-/**
- * Adds appropriate ticks on the y-axis
- * @param {Number} minY The minimum Y value in the data set
- * @param {Number} maxY The maximum Y value in the data set
- * @private
- */
-Dygraph.prototype.addYTicks_ = function(minY, maxY) {
-  // Set the number of ticks so that the labels are human-friendly.
-  // TODO(danvk): make this an attribute as well.
-  var formatter = this.attr_('yAxisLabelFormatter') ? this.attr_('yAxisLabelFormatter') : this.attr_('yValueFormatter');
-  var ticks = Dygraph.numericTicks(minY, maxY, this, formatter);
-  this.layout_.updateOptions( { yAxis: [minY, maxY],
-                                yTicks: ticks } );
+  return {ticks: ticks, numDigits: numDigits};
 };
 
 // Computes the range of the data series (including confidence intervals).
@@ -1591,14 +2001,45 @@ Dygraph.prototype.extremeValues_ = function(series) {
 };
 
 /**
- * Update the graph with new data. Data is in the format
- * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
- * or, if errorBars=true,
- * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
- * @param {Array.<Object>} data The data (see above)
+ * This function is called once when the chart's data is changed or the options
+ * dictionary is updated. It is _not_ called when the user pans or zooms. The
+ * idea is that values derived from the chart's data can be computed here,
+ * rather than every time the chart is drawn. This includes things like the
+ * number of axes, rolling averages, etc.
+ */
+Dygraph.prototype.predraw_ = function() {
+  // TODO(danvk): move more computations out of drawGraph_ and into here.
+  this.computeYAxes_();
+
+  // Create a new plotter.
+  if (this.plotter_) this.plotter_.clear();
+  this.plotter_ = new DygraphCanvasRenderer(this,
+                                            this.hidden_, this.layout_,
+                                            this.renderOptions_);
+
+  // 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.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
+  // edge of the div, if we have two y-axes.
+  this.positionLabelsDiv_();
+
+  // If the data or options have changed, then we'd better redraw.
+  this.drawGraph_();
+};
+
+/**
+=======
+ * 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.
  * @private
  */
-Dygraph.prototype.drawGraph_ = function(data) {
+Dygraph.prototype.drawGraph_ = function() {
+  var data = this.rawData_;
+
   // This is used to set the second parameter to drawCallback, below.
   var is_initial_draw = this.is_initial_draw_;
   this.is_initial_draw_ = false;
@@ -1614,10 +2055,13 @@ Dygraph.prototype.drawGraph_ = function(data) {
   var cumulative_y = [];  // For stacked series.
   var datasets = [];
 
+  var extremes = {};  // series name -> [low, high]
+
   // Loop over all fields and create datasets
   for (var i = data[0].length - 1; i >= 1; i--) {
     if (!this.visibility()[i - 1]) continue;
 
+    var seriesName = this.attr_("labels")[i];
     var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
 
     var series = [];
@@ -1627,6 +2071,8 @@ Dygraph.prototype.drawGraph_ = function(data) {
         series.push([date, data[j][i]]);
       }
     }
+
+    // TODO(danvk): move this into predraw_. It's insane to do it here.
     series = this.rollingAverage(series, this.rollPeriod_);
 
     // Prune down to the desired range, if necessary (for zooming)
@@ -1661,11 +2107,7 @@ Dygraph.prototype.drawGraph_ = function(data) {
       this.boundaryIds_[i-1] = [0, series.length-1];
     }
 
-    var extremes = this.extremeValues_(series);
-    var thisMinY = extremes[0];
-    var thisMaxY = extremes[1];
-    if (minY === null || (thisMinY != null && thisMinY < minY)) minY = thisMinY;
-    if (maxY === null || (thisMaxY != null && thisMaxY > maxY)) maxY = thisMaxY;
+    var seriesExtremes = this.extremeValues_(series);
 
     if (bars) {
       for (var j=0; j<series.length; j++) {
@@ -1679,18 +2121,24 @@ Dygraph.prototype.drawGraph_ = function(data) {
         // If one data set has a NaN, let all subsequent stacked
         // sets inherit the NaN -- only start at 0 for the first set.
         var x = series[j][0];
-        if (cumulative_y[x] === undefined)
+        if (cumulative_y[x] === undefined) {
           cumulative_y[x] = 0;
+        }
 
         actual_y = series[j][1];
         cumulative_y[x] += actual_y;
 
         series[j] = [x, cumulative_y[x]]
 
-        if (!maxY || cumulative_y[x] > 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;
   }
@@ -1700,38 +2148,10 @@ Dygraph.prototype.drawGraph_ = function(data) {
     this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
   }
 
-  // Use some heuristics to come up with a good maxY value, unless it's been
-  // set explicitly by the user.
-  if (this.valueRange_ != null) {
-    this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
-    this.displayedYRange_ = this.valueRange_;
-  } else {
-    // This affects the calculation of span, below.
-    if (this.attr_("includeZero") && minY > 0) {
-      minY = 0;
-    }
-
-    // Add some padding and round up to an integer to be human-friendly.
-    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;
-    }
-
-    if (this.attr_("includeZero")) {
-      if (maxY < 0) maxAxisY = 0;
-      if (minY > 0) minAxisY = 0;
-    }
-
-    this.addYTicks_(minAxisY, maxAxisY);
-    this.displayedYRange_ = [minAxisY, maxAxisY];
-  }
+  this.computeYAxisRanges_(extremes);
+  this.layout_.updateOptions( { yAxes: this.axes_,
+                                seriesToAxisMap: this.seriesToAxisMap_
+                              } );
 
   this.addXTicks_();
 
@@ -1741,7 +2161,7 @@ Dygraph.prototype.drawGraph_ = function(data) {
   this.plotter_.clear();
   this.plotter_.render();
   this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
-                                         this.canvas_.height);
+                                          this.canvas_.height);
 
   if (this.attr_("drawCallback") !== null) {
     this.attr_("drawCallback")(this, is_initial_draw);
@@ -1749,6 +2169,196 @@ Dygraph.prototype.drawGraph_ = function(data) {
 };
 
 /**
+ * Determine properties of the y-axes which are independent of the data
+ * currently being displayed. This includes things like the number of axes and
+ * the style of the axes. It does not include the range of each axis and its
+ * tick marks.
+ * This fills in this.axes_ and this.seriesToAxisMap_.
+ * axes_ = [ { options } ]
+ * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
+ *   indices are into the axes_ array.
+ */
+Dygraph.prototype.computeYAxes_ = function() {
+  this.axes_ = [{}];  // always have at least one y-axis.
+  this.seriesToAxisMap_ = {};
+
+  // Get a list of series names.
+  var labels = this.attr_("labels");
+  var series = {};
+  for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
+
+  // all options which could be applied per-axis:
+  var axisOptions = [
+    'includeZero',
+    'valueRange',
+    'labelsKMB',
+    'labelsKMG2',
+    'pixelsPerYLabel',
+    'yAxisLabelWidth',
+    'axisLabelFontSize',
+    'axisTickSize'
+  ];
+
+  // Copy global axis options over to the first axis.
+  for (var i = 0; i < axisOptions.length; i++) {
+    var k = axisOptions[i];
+    var v = this.attr_(k);
+    if (v) this.axes_[0][k] = v;
+  }
+
+  // Go through once and add all the axes.
+  for (var seriesName in series) {
+    if (!series.hasOwnProperty(seriesName)) continue;
+    var axis = this.attr_("axis", seriesName);
+    if (axis == null) {
+      this.seriesToAxisMap_[seriesName] = 0;
+      continue;
+    }
+    if (typeof(axis) == 'object') {
+      // Add a new axis, making a copy of its per-axis options.
+      var opts = {};
+      Dygraph.update(opts, this.axes_[0]);
+      Dygraph.update(opts, { valueRange: null });  // shouldn't inherit this.
+      Dygraph.update(opts, axis);
+      this.axes_.push(opts);
+      this.seriesToAxisMap_[seriesName] = this.axes_.length - 1;
+    }
+  }
+
+  // Go through one more time and assign series to an axis defined by another
+  // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
+  for (var seriesName in series) {
+    if (!series.hasOwnProperty(seriesName)) continue;
+    var axis = this.attr_("axis", seriesName);
+    if (typeof(axis) == 'string') {
+      if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
+        this.error("Series " + seriesName + " wants to share a y-axis with " +
+                   "series " + axis + ", which does not define its own axis.");
+        return null;
+      }
+      var idx = this.seriesToAxisMap_[axis];
+      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;
+};
+
+/**
+ * Returns the number of y-axes on the chart.
+ * @return {Number} the number of axes.
+ */
+Dygraph.prototype.numAxes = function() {
+  var last_axis = 0;
+  for (var series in this.seriesToAxisMap_) {
+    if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
+    var idx = this.seriesToAxisMap_[series];
+    if (idx > last_axis) last_axis = idx;
+  }
+  return 1 + last_axis;
+};
+
+/**
+ * Determine the value range and tick marks for each axis.
+ * @param {Object} extremes A mapping from seriesName -> [low, high]
+ * This fills in the valueRange and ticks fields in each entry of this.axes_.
+ */
+Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
+  // Build a map from axis number -> [list of series names]
+  var seriesForAxis = [];
+  for (var series in this.seriesToAxisMap_) {
+    if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
+    var idx = this.seriesToAxisMap_[series];
+    while (seriesForAxis.length <= idx) seriesForAxis.push([]);
+    seriesForAxis[idx].push(series);
+  }
+
+  // Compute extreme values, a span and tick marks for each axis.
+  for (var i = 0; i < this.axes_.length; i++) {
+    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
+      // by a user. It takes precedence over axis.valueRange because, if you set
+      // valueRange, you'd still expect to be able to pan.
+      axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
+    } else if (axis.valueRange) {
+      // This is a user-set value range for this axis.
+      axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
+    } else {
+      // Calculate the extremes of extremes.
+      var series = seriesForAxis[i];
+      var minY = Infinity;  // extremes[series[0]][0];
+      var maxY = -Infinity;  // extremes[series[0]][1];
+      for (var j = 0; j < series.length; j++) {
+        minY = Math.min(extremes[series[j]][0], minY);
+        maxY = Math.max(extremes[series[j]][1], maxY);
+      }
+      if (axis.includeZero && minY > 0) minY = 0;
+
+      // Add some padding and round up to an integer to be human-friendly.
+      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;
+      }
+
+      if (this.attr_("includeZero")) {
+        if (maxY < 0) maxAxisY = 0;
+        if (minY > 0) minAxisY = 0;
+      }
+
+      axis.computedValueRange = [minAxisY, maxAxisY];
+    }
+
+    // Add ticks. By default, all axes inherit the tick positions of the
+    // primary axis. However, if an axis is specifically marked as having
+    // independent ticks, then that is permissible as well.
+    if (i == 0 || axis.independentTicks) {
+      var ret =
+        Dygraph.numericTicks(axis.computedValueRange[0],
+                             axis.computedValueRange[1],
+                             this,
+                             axis);
+      axis.ticks = ret.ticks;
+      this.numYDigits_ = ret.numDigits;
+    } else {
+      var p_axis = this.axes_[0];
+      var p_ticks = p_axis.ticks;
+      var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
+      var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
+      var tick_values = [];
+      for (var i = 0; i < p_ticks.length; i++) {
+        var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
+        var y_val = axis.computedValueRange[0] + y_frac * scale;
+        tick_values.push(y_val);
+      }
+
+      var ret =
+        Dygraph.numericTicks(axis.computedValueRange[0],
+                             axis.computedValueRange[1],
+                             this, axis, tick_values);
+      axis.ticks = ret.ticks;
+      this.numYDigits_ = ret.numDigits;
+    }
+  }
+};
+ 
+/**
  * Calculates the rolling average of a data set.
  * If originalData is [label, val], rolls the average of those.
  * If originalData is [label, [, it's interpreted as [value, stddev]
@@ -1757,7 +2367,8 @@ Dygraph.prototype.drawGraph_ = function(data) {
  * Note that this is where fractional input (i.e. '5/10') is converted into
  *   decimal values.
  * @param {Array} originalData The data in the appropriate format (see above)
- * @param {Number} rollPeriod The number of days over which to average the data
+ * @param {Number} rollPeriod The number of points over which to average the
+ *                            data
  */
 Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
   if (originalData.length < 2)
@@ -1834,7 +2445,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
     }
   } else {
     // Calculate the rolling average for the first rollPeriod - 1 points where
-    // there is not enough data to roll over the full number of days
+    // there is not enough data to roll over the full number of points
     var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
     if (!this.attr_("errorBars")){
       if (rollPeriod == 1) {
@@ -1940,7 +2551,7 @@ Dygraph.prototype.detectTypeFromString_ = function(str) {
     this.attrs_.xTicker = Dygraph.dateTicker;
     this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else {
-    this.attrs_.xValueFormatter = function(x) { return x; };
+    this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
     this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
@@ -1983,7 +2594,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;
@@ -2102,7 +2714,7 @@ Dygraph.prototype.parseArray_ = function(data) {
     return parsedData;
   } else {
     // Some intelligent defaults for a numeric x-axis.
-    this.attrs_.xValueFormatter = function(x) { return x; };
+    this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
     this.attrs_.xTicker = Dygraph.numericTicks;
     return data;
   }
@@ -2128,7 +2740,7 @@ Dygraph.prototype.parseDataTable_ = function(data) {
     this.attrs_.xTicker = Dygraph.dateTicker;
     this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else if (indepType == 'number') {
-    this.attrs_.xValueFormatter = function(x) { return x; };
+    this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
     this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
@@ -2215,6 +2827,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);
   }
 
@@ -2288,12 +2905,12 @@ Dygraph.prototype.start_ = function() {
     this.loadedEvent_(this.file_());
   } else if (Dygraph.isArrayLike(this.file_)) {
     this.rawData_ = this.parseArray_(this.file_);
-    this.drawGraph_(this.rawData_);
+    this.predraw_();
   } else if (typeof this.file_ == 'object' &&
              typeof this.file_.getColumnRange == 'function') {
     // must be a DataTable from gviz.
     this.parseDataTable_(this.file_);
-    this.drawGraph_(this.rawData_);
+    this.predraw_();
   } else if (typeof this.file_ == 'string') {
     // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
     if (this.file_.indexOf('\n') >= 0) {
@@ -2327,15 +2944,12 @@ Dygraph.prototype.start_ = function() {
  */
 Dygraph.prototype.updateOptions = function(attrs) {
   // TODO(danvk): this is a mess. Rethink this function.
-  if (attrs.rollPeriod) {
+  if ('rollPeriod' in attrs) {
     this.rollPeriod_ = attrs.rollPeriod;
   }
-  if (attrs.dateWindow) {
+  if ('dateWindow' in attrs) {
     this.dateWindow_ = attrs.dateWindow;
   }
-  if (attrs.valueRange) {
-    this.valueRange_ = attrs.valueRange;
-  }
 
   // TODO(danvk): validate per-series options.
   // Supported:
@@ -2355,7 +2969,7 @@ Dygraph.prototype.updateOptions = function(attrs) {
     this.file_ = attrs['file'];
     this.start_();
   } else {
-    this.drawGraph_(this.rawData_);
+    this.predraw_();
   }
 };
 
@@ -2397,19 +3011,19 @@ Dygraph.prototype.resize = function(width, height) {
   }
 
   this.createInterface_();
-  this.drawGraph_(this.rawData_);
+  this.predraw_();
 
   this.resize_lock = false;
 };
 
 /**
- * Adjusts the number of days in the rolling average. Updates the graph to
+ * Adjusts the number of points in the rolling average. Updates the graph to
  * reflect the new averaging period.
- * @param {Number} length Number of days over which to average the data.
+ * @param {Number} length Number of points over which to average the data.
  */
 Dygraph.prototype.adjustRoll = function(length) {
   this.rollPeriod_ = length;
-  this.drawGraph_(this.rawData_);
+  this.predraw_();
 };
 
 /**
@@ -2432,11 +3046,11 @@ 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;
-    this.drawGraph_(this.rawData_);
+    this.predraw_();
   }
 };
 
@@ -2449,7 +3063,7 @@ Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
   this.annotations_ = ann;
   this.layout_.setAnnotations(this.annotations_);
   if (!suppressDraw) {
-    this.drawGraph_(this.rawData_);
+    this.predraw_();
   }
 };
 
@@ -2475,29 +3089,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
-    mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", mysheet.cssRules.length);
-  } 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.");
 }
 
 /**
@@ -2525,7 +3146,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);
 }