Bugfix #282. Use valueRange (if specified) instead of extremes during unzooming....
[dygraphs.git] / dygraph.js
index 9283a18..18dea9e 100644 (file)
@@ -43,6 +43,8 @@
 
  */
 
+/*jshint globalstrict: true */
+/*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
 "use strict";
 
 /**
@@ -172,7 +174,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) {
     return date.strftime('%b %y');
   } else {
     var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
-    if (frac == 0 || granularity >= Dygraph.DAILY) {
+    if (frac === 0 || granularity >= Dygraph.DAILY) {
       return new Date(date.getTime() + 3600*1000).strftime('%d%b');
     } else {
       return Dygraph.hmsString_(date.getTime());
@@ -291,7 +293,7 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
   // Labels is no longer a constructor parameter, since it's typically set
   // directly from the data source. It also conains a name for the x-axis,
   // which the previous constructor form did not.
-  if (labels != null) {
+  if (labels !== null) {
     var new_labels = ["Date"];
     for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
     Dygraph.update(attrs, { 'labels': new_labels });
@@ -316,12 +318,12 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
       typeof(G_vmlCanvasManager) != 'undefined' &&
       document.readyState != 'complete') {
     var self = this;
-    setTimeout(function() { self.__init__(div, file, attrs) }, 100);
+    setTimeout(function() { self.__init__(div, file, attrs); }, 100);
     return;
   }
 
   // Support two-argument constructor
-  if (attrs == null) { attrs = {}; }
+  if (attrs === null || attrs === undefined) { attrs = {}; }
 
   attrs = Dygraph.mapLegacyOptions_(attrs);
 
@@ -341,7 +343,6 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   this.fractions_ = attrs.fractions || false;
   this.dateWindow_ = attrs.dateWindow || null;
 
-  this.wilsonInterval_ = attrs.wilsonInterval || true;
   this.is_initial_draw_ = true;
   this.annotations_ = [];
 
@@ -357,15 +358,15 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // rules _except_ for an explicit 'width' or 'height' on the div.
   // As an added convenience, if the div has zero height (like <div></div> does
   // without any styles), then we use a default height/width.
-  if (div.style.width == '' && attrs.width) {
+  if (div.style.width === '' && attrs.width) {
     div.style.width = attrs.width + "px";
   }
-  if (div.style.height == '' && attrs.height) {
+  if (div.style.height === '' && attrs.height) {
     div.style.height = attrs.height + "px";
   }
-  if (div.style.height == '' && div.clientHeight == 0) {
+  if (div.style.height === '' && div.clientHeight === 0) {
     div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
-    if (div.style.width == '') {
+    if (div.style.width === '') {
       div.style.width = Dygraph.DEFAULT_WIDTH + "px";
     }
   }
@@ -374,8 +375,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   this.height_ = div.clientHeight;
 
   // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
-  if (attrs['stackedGraph']) {
-    attrs['fillGraph'] = true;
+  if (attrs.stackedGraph) {
+    attrs.fillGraph = true;
     // TODO(nikhilk): Add any other stackedGraph checks here.
   }
 
@@ -396,6 +397,7 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   Dygraph.updateDeep(this.attrs_, Dygraph.DEFAULT_ATTRS);
 
   this.boundaryIds_ = [];
+  this.setIndexByName_ = {};
 
   // Create the containing DIV and other interactive elements
   this.createInterface_();
@@ -414,9 +416,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
  */
 Dygraph.prototype.isZoomed = function(axis) {
   if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
-  if (axis == 'x') return this.zoomed_x_;
-  if (axis == 'y') return this.zoomed_y_;
-  throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
+  if (axis === 'x') return this.zoomed_x_;
+  if (axis === 'y') return this.zoomed_y_;
+  throw "axis parameter is [" + axis + "] must be null, 'x' or 'y'.";
 };
 
 /**
@@ -424,9 +426,9 @@ Dygraph.prototype.isZoomed = function(axis) {
  */
 Dygraph.prototype.toString = function() {
   var maindiv = this.maindiv_;
-  var id = (maindiv && maindiv.id) ? maindiv.id : maindiv
+  var id = (maindiv && maindiv.id) ? maindiv.id : maindiv;
   return "[Dygraph " + id + "]";
-}
+};
 
 /**
  * @private
@@ -452,7 +454,7 @@ Dygraph.prototype.attr_ = function(name, seriesName) {
 // </REMOVE_FOR_COMBINED>
   if (seriesName &&
       typeof(this.user_attrs_[seriesName]) != 'undefined' &&
-      this.user_attrs_[seriesName] != null &&
+      this.user_attrs_[seriesName] !== null &&
       typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
     return this.user_attrs_[seriesName][name];
   } else if (typeof(this.user_attrs_[name]) != 'undefined') {
@@ -472,7 +474,7 @@ Dygraph.prototype.attr_ = function(name, seriesName) {
 Dygraph.prototype.optionsViewForAxis_ = function(axis) {
   var self = this;
   return function(opt) {
-    var axis_opts = self.user_attrs_['axes'];
+    var axis_opts = self.user_attrs_.axes;
     if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) {
       return axis_opts[axis][opt];
     }
@@ -482,7 +484,7 @@ Dygraph.prototype.optionsViewForAxis_ = function(axis) {
       return self.user_attrs_[opt];
     }
 
-    axis_opts = self.attrs_['axes'];
+    axis_opts = self.attrs_.axes;
     if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) {
       return axis_opts[axis][opt];
     }
@@ -574,14 +576,14 @@ Dygraph.prototype.toDomCoords = function(x, y, axis) {
  * Returns a single value or null if x is null.
  */
 Dygraph.prototype.toDomXCoord = function(x) {
-  if (x == null) {
+  if (x === null) {
     return null;
-  };
+  }
 
   var area = this.plotter_.area;
   var xRange = this.xAxisRange();
   return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
-}
+};
 
 /**
  * Convert from data x coordinates to canvas/div Y coordinate and optional
@@ -592,12 +594,12 @@ Dygraph.prototype.toDomXCoord = function(x) {
 Dygraph.prototype.toDomYCoord = function(y, axis) {
   var pct = this.toPercentYCoord(y, axis);
 
-  if (pct == null) {
+  if (pct === null) {
     return null;
   }
   var area = this.plotter_.area;
   return area.y + pct * area.h;
-}
+};
 
 /**
  * Convert from canvas/div coords to data coordinates.
@@ -618,7 +620,7 @@ Dygraph.prototype.toDataCoords = function(x, y, axis) {
  * If x is null, this returns null.
  */
 Dygraph.prototype.toDataXCoord = function(x) {
-  if (x == null) {
+  if (x === null) {
     return null;
   }
 
@@ -634,7 +636,7 @@ Dygraph.prototype.toDataXCoord = function(x) {
  * if axis is null, this uses the first axis.
  */
 Dygraph.prototype.toDataYCoord = function(y, axis) {
-  if (y == null) {
+  if (y === null) {
     return null;
   }
 
@@ -646,7 +648,7 @@ Dygraph.prototype.toDataYCoord = function(y, axis) {
     return yRange[0] + (area.y + area.h - y) / area.h * (yRange[1] - yRange[0]);
   } else {
     // Computing the inverse of toDomCoord.
-    var pct = (y - area.y) / area.h
+    var pct = (y - area.y) / area.h;
 
     // Computing the inverse of toPercentYCoord. The function was arrived at with
     // the following steps:
@@ -689,12 +691,11 @@ Dygraph.prototype.toDataYCoord = function(y, axis) {
  * @return { Number } A fraction in [0, 1] where 0 = the top edge.
  */
 Dygraph.prototype.toPercentYCoord = function(y, axis) {
-  if (y == null) {
+  if (y === null) {
     return null;
   }
   if (typeof(axis) == "undefined") axis = 0;
 
-  var area = this.plotter_.area;
   var yRange = this.yAxisRange(axis);
 
   var pct;
@@ -708,7 +709,7 @@ Dygraph.prototype.toPercentYCoord = function(y, axis) {
     pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
   }
   return pct;
-}
+};
 
 /**
  * Converts an x value to a percentage from the left to the right of
@@ -724,7 +725,7 @@ Dygraph.prototype.toPercentYCoord = function(y, axis) {
  * @return { Number } A fraction in [0, 1] where 0 = the left edge.
  */
 Dygraph.prototype.toPercentXCoord = function(x) {
-  if (x == null) {
+  if (x === null) {
     return null;
   }
 
@@ -737,7 +738,7 @@ Dygraph.prototype.toPercentXCoord = function(x) {
  * @return { Integer } The number of columns.
  */
 Dygraph.prototype.numColumns = function() {
-  return this.rawData_[0].length;
+  return this.rawData_[0] ? this.rawData_[0].length : this.attr_("labels").length;
 };
 
 /**
@@ -749,6 +750,21 @@ Dygraph.prototype.numRows = function() {
 };
 
 /**
+ * Returns the full range of the x-axis, as determined by the most extreme
+ * values in the data set. Not affected by zooming, visibility, etc.
+ * TODO(danvk): merge w/ xAxisExtremes
+ * @return { Array<Number> } A [low, high] pair
+ * @private
+ */
+Dygraph.prototype.fullXRange_ = function() {
+  if (this.numRows() > 0) {
+    return [this.rawData_[0][0], this.rawData_[this.numRows() - 1][0]];
+  } else {
+    return [0, 1];
+  }
+};
+
+/**
  * Returns the value in the given row and column. If the row and column exceed
  * the bounds on the data, returns null. Also returns null if the value is
  * missing.
@@ -814,14 +830,6 @@ Dygraph.prototype.createInterface_ = function() {
     this.rangeSelector_.addToGraph(this.graphDiv, this.layout_);
   }
 
-  // Create the grapher
-  this.layout_ = new DygraphLayout(this);
-
-  if (this.rangeSelector_) {
-    // This needs to happen after the graph canvases are added to the div and the layout object is created.
-    this.rangeSelector_.addToGraph(this.graphDiv, this.layout_);
-  }
-
   var dygraph = this;
   Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
     dygraph.mouseMove_(e);
@@ -833,11 +841,13 @@ Dygraph.prototype.createInterface_ = function() {
   this.createStatusMessage_();
   this.createDragInterface_();
 
+  this.resizeHandler = function(e) {
+    dygraph.resize();
+  }
+
   // Update when the window is resized.
   // TODO(danvk): drop frames depending on complexity of the chart.
-  Dygraph.addEvent(window, 'resize', function(e) {
-    dygraph.resize();
-  });
+  Dygraph.addEvent(window, 'resize', this.resizeHandler);
 };
 
 /**
@@ -861,7 +871,9 @@ Dygraph.prototype.destroy = function() {
       }
     }
   };
-
+  // remove event handlers
+  Dygraph.removeEvent(window,'resize',this.resizeHandler);
+  this.resizeHandler = null;
   // These may not all be necessary, but it can't hurt...
   nullOut(this.layout_);
   nullOut(this.plotter_);
@@ -922,11 +934,12 @@ Dygraph.prototype.setColors_ = function() {
   var num = this.attr_("labels").length - 1;
   this.colors_ = [];
   var colors = this.attr_('colors');
+  var i;
   if (!colors) {
     var sat = this.attr_('colorSaturation') || 1.0;
     var val = this.attr_('colorValue') || 0.5;
     var half = Math.ceil(num / 2);
-    for (var i = 1; i <= num; i++) {
+    for (i = 1; i <= num; i++) {
       if (!this.visibility()[i-1]) continue;
       // alternate colors for high contrast.
       var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
@@ -934,7 +947,7 @@ Dygraph.prototype.setColors_ = function() {
       this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
     }
   } else {
-    for (var i = 0; i < num; i++) {
+    for (i = 0; i < num; i++) {
       if (!this.visibility()[i]) continue;
       var colorStr = colors[i % colors.length];
       this.colors_.push(colorStr);
@@ -960,10 +973,10 @@ Dygraph.prototype.getColors = function() {
  * @private
  */
 Dygraph.prototype.createStatusMessage_ = function() {
-  var userLabelsDiv = this.user_attrs_["labelsDiv"];
-  if (userLabelsDiv && null != userLabelsDiv
-    && (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
-    this.user_attrs_["labelsDiv"] = document.getElementById(userLabelsDiv);
+  var userLabelsDiv = this.user_attrs_.labelsDiv;
+  if (userLabelsDiv && null !== userLabelsDiv &&
+      (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
+    this.user_attrs_.labelsDiv = document.getElementById(userLabelsDiv);
   }
   if (!this.attr_("labelsDiv")) {
     var divWidth = this.attr_('labelsDivWidth');
@@ -1046,7 +1059,7 @@ Dygraph.prototype.createRollInterface_ = function() {
  * canvas (i.e. DOM Coords).
  */
 Dygraph.prototype.dragGetX_ = function(e, context) {
-  return Dygraph.pageX(e) - context.px
+  return Dygraph.pageX(e) - context.px;
 };
 
 /**
@@ -1055,7 +1068,7 @@ Dygraph.prototype.dragGetX_ = function(e, context) {
  * canvas (i.e. DOM Coords).
  */
 Dygraph.prototype.dragGetY_ = function(e, context) {
-  return Dygraph.pageY(e) - context.py
+  return Dygraph.pageY(e) - context.py;
 };
 
 /**
@@ -1300,7 +1313,6 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) {
   this.doAnimatedZoom(null, null, oldValueRanges, newValueRanges, function() {
     if (that.attr_("zoomCallback")) {
       var xRange = that.xAxisRange();
-      var yRange = that.yAxisRange();
       that.attr_("zoomCallback")(xRange[0], xRange[1], that.yAxisRanges());
     }
   });
@@ -1314,13 +1326,13 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) {
  */
 Dygraph.prototype.doUnzoom_ = function() {
   var dirty = false, dirtyX = false, dirtyY = false;
-  if (this.dateWindow_ != null) {
+  if (this.dateWindow_ !== null) {
     dirty = true;
     dirtyX = true;
   }
 
   for (var i = 0; i < this.axes_.length; i++) {
-    if (this.axes_[i].valueWindow != null) {
+    if (typeof(this.axes_[i].valueWindow) !== 'undefined' && this.axes_[i].valueWindow !== null) {
       dirty = true;
       dirtyY = true;
     }
@@ -1340,8 +1352,8 @@ Dygraph.prototype.doUnzoom_ = function() {
     // TODO(danvk): merge this block w/ the code below.
     if (!this.attr_("animatedZooms")) {
       this.dateWindow_ = null;
-      for (var i = 0; i < this.axes_.length; i++) {
-        if (this.axes_[i].valueWindow != null) {
+      for (i = 0; i < this.axes_.length; i++) {
+        if (this.axes_[i].valueWindow !== null) {
           delete this.axes_[i].valueWindow;
         }
       }
@@ -1371,8 +1383,9 @@ Dygraph.prototype.doUnzoom_ = function() {
       this.computeYAxisRanges_(extremes);
 
       newValueRanges = [];
-      for (var i = 0; i < this.axes_.length; i++) {
-        newValueRanges.push(this.axes_[i].extremeRange);
+      for (i = 0; i < this.axes_.length; i++) {
+        var axis = this.axes_[i];
+        newValueRanges.push(axis.valueRange != null ? axis.valueRange : axis.extremeRange);
       }
     }
 
@@ -1381,7 +1394,7 @@ Dygraph.prototype.doUnzoom_ = function() {
         function() {
           that.dateWindow_ = null;
           for (var i = 0; i < that.axes_.length; i++) {
-            if (that.axes_[i].valueWindow != null) {
+            if (that.axes_[i].valueWindow !== null) {
               delete that.axes_[i].valueWindow;
             }
           }
@@ -1402,18 +1415,19 @@ Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, ne
 
   var windows = [];
   var valueRanges = [];
+  var step, frac;
 
-  if (oldXRange != null && newXRange != null) {
-    for (var step = 1; step <= steps; step++) {
-      var frac = Dygraph.zoomAnimationFunction(step, steps);
+  if (oldXRange !== null && newXRange !== null) {
+    for (step = 1; step <= steps; step++) {
+      frac = Dygraph.zoomAnimationFunction(step, steps);
       windows[step-1] = [oldXRange[0]*(1-frac) + frac*newXRange[0],
                          oldXRange[1]*(1-frac) + frac*newXRange[1]];
     }
   }
 
-  if (oldYRanges != null && newYRanges != null) {
-    for (var step = 1; step <= steps; step++) {
-      var frac = Dygraph.zoomAnimationFunction(step, steps);
+  if (oldYRanges !== null && newYRanges !== null) {
+    for (step = 1; step <= steps; step++) {
+      frac = Dygraph.zoomAnimationFunction(step, steps);
       var thisRange = [];
       for (var j = 0; j < this.axes_.length; j++) {
         thisRange.push([oldYRanges[j][0]*(1-frac) + frac*newYRanges[j][0],
@@ -1453,15 +1467,15 @@ Dygraph.prototype.mouseMove_ = function(event) {
   var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
 
   var lastx = -1;
-  var lasty = -1;
+  var i;
 
   // Loop through all the points and find the date nearest to our current
   // location.
   var minDist = 1e+100;
   var idx = -1;
-  for (var i = 0; i < points.length; i++) {
+  for (i = 0; i < points.length; i++) {
     var point = points[i];
-    if (point == null) continue;
+    if (point === null) continue;
     var dist = Math.abs(point.canvasx - canvasx);
     if (dist > minDist) continue;
     minDist = dist;
@@ -1473,7 +1487,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
   this.selPoints_ = [];
   var l = points.length;
   if (!this.attr_("stackedGraph")) {
-    for (var i = 0; i < l; i++) {
+    for (i = 0; i < l; i++) {
       if (points[i].xval == lastx) {
         this.selPoints_.push(points[i]);
       }
@@ -1481,7 +1495,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
   } else {
     // Need to 'unstack' points starting from the bottom
     var cumulative_sum = 0;
-    for (var i = l - 1; i >= 0; i--) {
+    for (i = l - 1; i >= 0; i--) {
       if (points[i].xval == lastx) {
         var p = {};  // Clone the point since we modify it
         for (var k in points[i]) {
@@ -1518,70 +1532,156 @@ Dygraph.prototype.mouseMove_ = function(event) {
 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;
+  // make sure that you get the boundaryIds record which is also defined (see bug #236)
+  var boundaryIdx = -1;
+  for (var i = 0; i < this.boundaryIds_.length; i++) {
+    if (this.boundaryIds_[i] !== undefined) {
+      boundaryIdx = i;
+      break;
     }
-    idx -= this.layout_.datasets[i].length;
+  }
+  if (boundaryIdx < 0) return -1;
+  for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
+    var set = this.layout_.datasets[setIdx];
+    if (idx < set.length) {
+      return this.boundaryIds_[boundaryIdx][0] + idx;
+    }
+    idx -= set.length;
   }
   return -1;
 };
 
 /**
  * @private
+ * Generates legend html dash for any stroke pattern. It will try to scale the
+ * pattern to fit in 1em width. Or if small enough repeat the partern for 1em
+ * width.
+ * @param strokePattern The pattern
+ * @param color The color of the series.
+ * @param oneEmWidth The width in pixels of 1em in the legend.
+ */
+Dygraph.prototype.generateLegendDashHTML_ = function(strokePattern, color, oneEmWidth) {
+  var dash = "";
+  var i, j, paddingLeft, marginRight;
+  var strokePixelLength = 0, segmentLoop = 0;
+  var normalizedPattern = [];
+  var loop;
+  // IE 7,8 fail at these divs, so they get boring legend, have not tested 9.
+  var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
+  if(isIE) {
+    return "&mdash;";
+  }
+  if (!strokePattern || strokePattern.length <= 1) {
+    // Solid line
+    dash = "<div style=\"display: inline-block; position: relative; " +
+    "bottom: .5ex; padding-left: 1em; height: 1px; " +
+    "border-bottom: 2px solid " + color + ";\"></div>";
+  } else {
+    // Compute the length of the pixels including the first segment twice, 
+    // since we repeat it.
+    for (i = 0; i <= strokePattern.length; i++) {
+      strokePixelLength += strokePattern[i%strokePattern.length];
+    }
+
+    // See if we can loop the pattern by itself at least twice.
+    loop = Math.floor(oneEmWidth/(strokePixelLength-strokePattern[0]));
+    if (loop > 1) {
+      // This pattern fits at least two times, no scaling just convert to em;
+      for (i = 0; i < strokePattern.length; i++) {
+        normalizedPattern[i] = strokePattern[i]/oneEmWidth;
+      }
+      // Since we are repeating the pattern, we don't worry about repeating the
+      // first segment in one draw.
+      segmentLoop = normalizedPattern.length;
+    } else {
+      // If the pattern doesn't fit in the legend we scale it to fit.
+      loop = 1;
+      for (i = 0; i < strokePattern.length; i++) {
+        normalizedPattern[i] = strokePattern[i]/strokePixelLength;
+      }
+      // For the scaled patterns we do redraw the first segment.
+      segmentLoop = normalizedPattern.length+1;
+    }
+    // Now make the pattern.
+    for (j = 0; j < loop; j++) {
+      for (i = 0; i < segmentLoop; i+=2) {
+        // The padding is the drawn segment.
+        paddingLeft = normalizedPattern[i%normalizedPattern.length];
+        if (i < strokePattern.length) {
+          // The margin is the space segment.
+          marginRight = normalizedPattern[(i+1)%normalizedPattern.length];
+        } else {
+          // The repeated first segment has no right margin.
+          marginRight = 0;
+        }
+        dash += "<div style=\"display: inline-block; position: relative; " +
+          "bottom: .5ex; margin-right: " + marginRight + "em; padding-left: " +
+          paddingLeft + "em; height: 1px; border-bottom: 2px solid " + color +
+          ";\"></div>";
+      }
+    }
+  }
+  return dash;
+};
+
+/**
+ * @private
  * Generates HTML for the legend which is displayed when hovering over the
  * chart. If no selected points are specified, a default legend is returned
  * (this may just be the empty string).
  * @param { Number } [x] The x-value of the selected points.
  * @param { [Object] } [sel_points] List of selected points for the given
  * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
+ * @param { Number } [oneEmWidth] The pixel width for 1em in the legend.
  */
-Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) {
+Dygraph.prototype.generateLegendHTML_ = function(x, sel_points, oneEmWidth) {
   // If no points are selected, we display a default legend. Traditionally,
   // this has been blank. But a better default would be a conventional legend,
   // which provides essential information for a non-interactive chart.
+  var html, sepLines, i, c, dash, strokePattern;
   if (typeof(x) === 'undefined') {
     if (this.attr_('legend') != 'always') return '';
 
-    var sepLines = this.attr_('labelsSeparateLines');
+    sepLines = this.attr_('labelsSeparateLines');
     var labels = this.attr_('labels');
-    var html = '';
-    for (var i = 1; i < labels.length; i++) {
+    html = '';
+    for (i = 1; i < labels.length; i++) {
       if (!this.visibility()[i - 1]) continue;
-      var c = this.plotter_.colors[labels[i]];
-      if (html != '') html += (sepLines ? '<br/>' : ' ');
-      html += "<b><span style='color: " + c + ";'>&mdash;" + labels[i] +
-        "</span></b>";
+      c = this.plotter_.colors[labels[i]];
+      if (html !== '') html += (sepLines ? '<br/>' : ' ');
+      strokePattern = this.attr_("strokePattern", labels[i]);
+      dash = this.generateLegendDashHTML_(strokePattern, c, oneEmWidth);
+      html += "<span style='font-weight: bold; color: " + c + ";'>" + dash + 
+        " " + labels[i] + "</span>";
     }
     return html;
   }
 
   var xOptView = this.optionsViewForAxis_('x');
   var xvf = xOptView('valueFormatter');
-  var html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":";
+  html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":";
 
   var yOptViews = [];
   var num_axes = this.numAxes();
-  for (var i = 0; i < num_axes; i++) {
+  for (i = 0; i < num_axes; i++) {
     yOptViews[i] = this.optionsViewForAxis_('y' + (i ? 1 + i : ''));
   }
   var showZeros = this.attr_("labelsShowZeroValues");
-  var sepLines = this.attr_("labelsSeparateLines");
-  for (var i = 0; i < this.selPoints_.length; i++) {
+  sepLines = this.attr_("labelsSeparateLines");
+  for (i = 0; i < this.selPoints_.length; i++) {
     var pt = this.selPoints_[i];
-    if (pt.yval == 0 && !showZeros) continue;
+    if (pt.yval === 0 && !showZeros) continue;
     if (!Dygraph.isOK(pt.canvasy)) continue;
     if (sepLines) html += "<br/>";
 
     var yOptView = yOptViews[this.seriesToAxisMap_[pt.name]];
     var fmtFunc = yOptView('valueFormatter');
-    var c = this.plotter_.colors[pt.name];
+    c = this.plotter_.colors[pt.name];
     var yval = fmtFunc(pt.yval, yOptView, pt.name, this);
 
     // TODO(danvk): use a template string here and make it an attribute.
-    html += " <b><span style='color: " + c + ";'>"
-      + pt.name + "</span></b>:"
-      + yval;
+    html += " <b><span style='color: " + c + ";'>" + pt.name +
+        "</span></b>:" + yval;
   }
   return html;
 };
@@ -1595,8 +1695,14 @@ Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) {
  * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
  */
 Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
-  var html = this.generateLegendHTML_(x, sel_points);
   var labelsDiv = this.attr_("labelsDiv");
+  var sizeSpan = document.createElement('span');
+  // Calculates the width of 1em in pixels for the legend.
+  sizeSpan.setAttribute('style', 'margin: 0; padding: 0 0 0 1em; border: 0;');
+  labelsDiv.appendChild(sizeSpan);
+  var oneEmWidth=sizeSpan.offsetWidth;
+
+  var html = this.generateLegendHTML_(x, sel_points, oneEmWidth);
   if (labelsDiv !== null) {
     labelsDiv.innerHTML = html;
   } else {
@@ -1614,12 +1720,13 @@ Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
  */
 Dygraph.prototype.updateSelection_ = function() {
   // Clear the previously drawn vertical, if there is one
+  var i;
   var ctx = this.canvas_ctx_;
   if (this.previousVerticalX_ >= 0) {
     // Determine the maximum highlight circle size.
     var maxCircleSize = 0;
     var labels = this.attr_('labels');
-    for (var i = 1; i < labels.length; i++) {
+    for (i = 1; i < labels.length; i++) {
       var r = this.attr_('highlightCircleSize', labels[i]);
       if (r > maxCircleSize) maxCircleSize = r;
     }
@@ -1641,7 +1748,7 @@ Dygraph.prototype.updateSelection_ = function() {
     // Draw colored circles over the center of each selected point
     var canvasx = this.selPoints_[0].canvasx;
     ctx.save();
-    for (var i = 0; i < this.selPoints_.length; i++) {
+    for (i = 0; i < this.selPoints_.length; i++) {
       var pt = this.selPoints_[i];
       if (!Dygraph.isOK(pt.canvasy)) continue;
 
@@ -1674,8 +1781,9 @@ Dygraph.prototype.setSelection = function(row) {
   }
 
   if (row !== false && row >= 0) {
-    for (var i in this.layout_.datasets) {
-      if (row < this.layout_.datasets[i].length) {
+    for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
+      var set = this.layout_.datasets[setIdx];
+      if (row < set.length) {
         var point = this.layout_.points[pos+row];
 
         if (this.attr_("stackedGraph")) {
@@ -1684,7 +1792,7 @@ Dygraph.prototype.setSelection = function(row) {
 
         this.selPoints_.push(point);
       }
-      pos += this.layout_.datasets[i].length;
+      pos += set.length;
     }
   }
 
@@ -1722,7 +1830,7 @@ Dygraph.prototype.clearSelection = function() {
   this.setLegendHTML_();
   this.selPoints_ = [];
   this.lastx_ = -1;
-}
+};
 
 /**
  * Returns the number of the currently selected row. To get data for this row,
@@ -1762,7 +1870,7 @@ Dygraph.prototype.addXTicks_ = function() {
   if (this.dateWindow_) {
     range = [this.dateWindow_[0], this.dateWindow_[1]];
   } else {
-    range = [this.rawData_[0][0], this.rawData_[this.rawData_.length - 1][0]];
+    range = this.fullXRange_();
   }
 
   var xAxisOptionsView = this.optionsViewForAxis_('x');
@@ -1785,33 +1893,33 @@ Dygraph.prototype.addXTicks_ = function() {
  * @return [low, high]
  */
 Dygraph.prototype.extremeValues_ = function(series) {
-  var minY = null, maxY = null;
+  var minY = null, maxY = null, j, y;
 
   var bars = this.attr_("errorBars") || this.attr_("customBars");
   if (bars) {
     // With custom bars, maxY is the max of the high values.
-    for (var j = 0; j < series.length; j++) {
-      var y = series[j][1][0];
+    for (j = 0; j < series.length; j++) {
+      y = series[j][1][0];
       if (!y) continue;
       var low = y - series[j][1][1];
       var high = y + series[j][1][2];
       if (low > y) low = y;    // this can happen with custom bars,
       if (high < y) high = y;  // e.g. in tests/custom-bars.html
-      if (maxY == null || high > maxY) {
+      if (maxY === null || high > maxY) {
         maxY = high;
       }
-      if (minY == null || low < minY) {
+      if (minY === null || low < minY) {
         minY = low;
       }
     }
   } else {
-    for (var j = 0; j < series.length; j++) {
-      var y = series[j][1];
+    for (j = 0; j < series.length; j++) {
+      y = series[j][1];
       if (y === null || isNaN(y)) continue;
-      if (maxY == null || y > maxY) {
+      if (maxY === null || y > maxY) {
         maxY = y;
       }
-      if (minY == null || y < minY) {
+      if (minY === null || y < minY) {
         minY = y;
       }
     }
@@ -1857,7 +1965,7 @@ Dygraph.prototype.predraw_ = function() {
   // Convert the raw data (a 2D array) into the internal format and compute
   // rolling averages.
   this.rolledSeries_ = [null];  // x-axis is the first series and it's special
-  for (var i = 1; i < this.rawData_[0].length; i++) {
+  for (var i = 1; i < this.numColumns(); i++) {
     var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
     var logScale = this.attr_('logscale', i);
     var series = this.extractSeries_(this.rawData_, i, logScale, connectSeparatedPoints);
@@ -1890,16 +1998,17 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
   var cumulative_y = [];  // For stacked series.
   var datasets = [];
   var extremes = {};  // series name -> [low, high]
+  var i, j, k;
 
   // Loop over the fields (series).  Go from the last to the first,
   // because if they're stacked that's how we accumulate the values.
   var num_series = rolledSeries.length - 1;
-  for (var i = num_series; i >= 1; i--) {
+  for (i = num_series; i >= 1; i--) {
     if (!this.visibility()[i - 1]) continue;
 
     // TODO(danvk): is this copy really necessary?
     var series = [];
-    for (var j = 0; j < rolledSeries[i].length; j++) {
+    for (j = 0; j < rolledSeries[i].length; j++) {
       series.push(rolledSeries[i][j]);
     }
 
@@ -1914,7 +2023,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
       // TODO(danvk): do binary search instead of linear search.
       // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
       var firstIdx = null, lastIdx = null;
-      for (var k = 0; k < series.length; k++) {
+      for (k = 0; k < series.length; k++) {
         if (series[k][0] >= low && firstIdx === null) {
           firstIdx = k;
         }
@@ -1927,7 +2036,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
       if (lastIdx === null) lastIdx = series.length - 1;
       if (lastIdx < series.length - 1) lastIdx++;
       boundaryIds[i-1] = [firstIdx, lastIdx];
-      for (var k = firstIdx; k <= lastIdx; k++) {
+      for (k = firstIdx; k <= lastIdx; k++) {
         pruned.push(series[k]);
       }
       series = pruned;
@@ -1938,7 +2047,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
     var seriesExtremes = this.extremeValues_(series);
 
     if (bars) {
-      for (var j=0; j<series.length; j++) {
+      for (j=0; j<series.length; j++) {
         series[j] = [series[j][0],
                      series[j][1][0],
                      series[j][1][1],
@@ -1947,7 +2056,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
     } else if (this.attr_("stackedGraph")) {
       var l = series.length;
       var actual_y;
-      for (var j = 0; j < l; j++) {
+      for (j = 0; j < l; j++) {
         // 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];
@@ -1958,7 +2067,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
         actual_y = series[j][1];
         cumulative_y[x] += actual_y;
 
-        series[j] = [x, cumulative_y[x]]
+        series[j] = [x, cumulative_y[x]];
 
         if (cumulative_y[x] > seriesExtremes[1]) {
           seriesExtremes[1] = cumulative_y[x];
@@ -2000,19 +2109,24 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) {
   var is_initial_draw = this.is_initial_draw_;
   this.is_initial_draw_ = false;
 
-  var minY = null, maxY = null;
   this.layout_.removeAllDatasets();
   this.setColors_();
-  this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
+  this.attrs_.pointSize = 0.5 * this.attr_('highlightCircleSize');
 
   var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_);
   var datasets = packed[0];
   var extremes = packed[1];
   this.boundaryIds_ = packed[2];
 
+  this.setIndexByName_ = {};
+  var labels = this.attr_("labels");
+  if (labels.length > 0) {
+    this.setIndexByName_[labels[0]] = 0;
+  }
   for (var i = 1; i < datasets.length; i++) {
+    this.setIndexByName_[labels[i]] = i;
     if (!this.visibility()[i - 1]) continue;
-    this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
+    this.layout_.addDataset(labels[i], datasets[i]);
   }
 
   this.computeYAxisRanges_(extremes);
@@ -2031,7 +2145,7 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) {
   if (this.attr_("timingName")) {
     var end = new Date();
     if (console) {
-      console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms")
+      console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms");
     }
   }
 };
@@ -2042,10 +2156,10 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) {
   this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
                                           this.canvas_.height);
 
-  if (is_initial_draw) {
-    // Generate a static legend before any particular point is selected.
-    this.setLegendHTML_();
-  } else {
+  // Generate a static legend before any particular point is selected.
+  this.setLegendHTML_();
+
+  if (!is_initial_draw) {
     if (clearSelection) {
       if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
         // We should select the point nearest the page x/y here, but it's easier
@@ -2081,10 +2195,10 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) {
 Dygraph.prototype.computeYAxes_ = function() {
   // Preserve valueWindow settings if they exist, and if the user hasn't
   // specified a new valueRange.
-  var valueWindows;
-  if (this.axes_ != undefined && this.user_attrs_.hasOwnProperty("valueRange") == false) {
+  var i, valueWindows, seriesName, axis, index, opts, v;
+  if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) {
     valueWindows = [];
-    for (var index = 0; index < this.axes_.length; index++) {
+    for (index = 0; index < this.axes_.length; index++) {
       valueWindows.push(this.axes_[index].valueWindow);
     }
   }
@@ -2095,7 +2209,7 @@ Dygraph.prototype.computeYAxes_ = function() {
   // 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);
+  for (i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
 
   // all options which could be applied per-axis:
   var axisOptions = [
@@ -2111,23 +2225,23 @@ Dygraph.prototype.computeYAxes_ = function() {
   ];
 
   // Copy global axis options over to the first axis.
-  for (var i = 0; i < axisOptions.length; i++) {
+  for (i = 0; i < axisOptions.length; i++) {
     var k = axisOptions[i];
-    var v = this.attr_(k);
+    v = this.attr_(k);
     if (v) this.axes_[0][k] = v;
   }
 
   // Go through once and add all the axes.
-  for (var seriesName in series) {
+  for (seriesName in series) {
     if (!series.hasOwnProperty(seriesName)) continue;
-    var axis = this.attr_("axis", seriesName);
-    if (axis == null) {
+    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 = {};
+      opts = {};
       Dygraph.update(opts, this.axes_[0]);
       Dygraph.update(opts, { valueRange: null });  // shouldn't inherit this.
       var yAxisId = this.axes_.length;
@@ -2141,9 +2255,9 @@ Dygraph.prototype.computeYAxes_ = function() {
 
   // 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) {
+  for (seriesName in series) {
     if (!series.hasOwnProperty(seriesName)) continue;
-    var axis = this.attr_("axis", seriesName);
+    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 " +
@@ -2155,23 +2269,28 @@ Dygraph.prototype.computeYAxes_ = function() {
     }
   }
 
-  // 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;
-
-  if (valueWindows != undefined) {
+  if (valueWindows !== undefined) {
     // Restore valueWindow settings.
-    for (var index = 0; index < valueWindows.length; index++) {
+    for (index = 0; index < valueWindows.length; index++) {
       this.axes_[index].valueWindow = valueWindows[index];
     }
   }
+
+  // New axes options
+  for (axis = 0; axis < this.axes_.length; axis++) {
+    if (axis === 0) {
+      opts = this.optionsViewForAxis_('y' + (axis ? '2' : ''));
+      v = opts("valueRange");
+      if (v) this.axes_[axis].valueRange = v;
+    } else {  // To keep old behavior
+      var axes = this.user_attrs_.axes;
+      if (axes && axes.y2) {
+        v = axes.y2.valueRange;
+        if (v) this.axes_[axis].valueRange = v;
+      }
+    }
+  }
+
 };
 
 /**
@@ -2208,8 +2327,8 @@ Dygraph.prototype.axisPropertiesForSeries = function(series) {
  */
 Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
   // Build a map from axis number -> [list of series names]
-  var seriesForAxis = [];
-  for (var series in this.seriesToAxisMap_) {
+  var seriesForAxis = [], series;
+  for (series in this.seriesToAxisMap_) {
     if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
     var idx = this.seriesToAxisMap_[series];
     while (seriesForAxis.length <= idx) seriesForAxis.push([]);
@@ -2225,40 +2344,43 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
       axis.extremeRange = [0, 1];
     } else {
       // Calculate the extremes of extremes.
-      var series = seriesForAxis[i];
+      series = seriesForAxis[i];
       var minY = Infinity;  // extremes[series[0]][0];
       var maxY = -Infinity;  // extremes[series[0]][1];
       var extremeMinY, extremeMaxY;
+
       for (var j = 0; j < series.length; j++) {
+        // this skips invisible series
+        if (!extremes.hasOwnProperty(series[j])) continue;
+
         // Only use valid extremes to stop null data series' from corrupting the scale.
         extremeMinY = extremes[series[j]][0];
-        if (extremeMinY != null) {
+        if (extremeMinY !== null) {
           minY = Math.min(extremeMinY, minY);
         }
         extremeMaxY = extremes[series[j]][1];
-        if (extremeMaxY != null) {
+        if (extremeMaxY !== null) {
           maxY = Math.max(extremeMaxY, maxY);
         }
       }
       if (axis.includeZero && minY > 0) minY = 0;
 
-      // Ensure we have a valid scale, otherwise defualt to zero for safety.
+      // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
       if (minY == Infinity) minY = 0;
-      if (maxY == -Infinity) maxY = 0;
+      if (maxY == -Infinity) maxY = 1;
 
       // 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; }
+      if (span === 0) { span = maxY; }
 
-      var maxAxisY;
-      var minAxisY;
+      var maxAxisY, minAxisY;
       if (axis.logscale) {
-        var maxAxisY = maxY + 0.1 * span;
-        var minAxisY = minY;
+        maxAxisY = maxY + 0.1 * span;
+        minAxisY = minY;
       } else {
-        var maxAxisY = maxY + 0.1 * span;
-        var minAxisY = minY - 0.1 * span;
+        maxAxisY = maxY + 0.1 * span;
+        minAxisY = minY - 0.1 * span;
 
         // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
         if (!this.attr_("avoidMinZero")) {
@@ -2290,7 +2412,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
     // independent ticks, then that is permissible as well.
     var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
     var ticker = opts('ticker');
-    if (i == 0 || axis.independentTicks) {
+    if (i === 0 || axis.independentTicks) {
       axis.ticks = ticker(axis.computedValueRange[0],
                           axis.computedValueRange[1],
                           this.height_,  // TODO(danvk): should be area.height
@@ -2341,7 +2463,7 @@ Dygraph.prototype.extractSeries_ = function(rawData, i, logScale, connectSeparat
       }
       series.push([x, point]);
     } else {
-      if (point != null || !connectSeparatedPoints) {
+      if (point !== null || !connectSeparatedPoints) {
         series.push([x, point]);
       }
     }
@@ -2365,15 +2487,16 @@ Dygraph.prototype.extractSeries_ = function(rawData, i, logScale, connectSeparat
 Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
   if (originalData.length < 2)
     return originalData;
-  var rollPeriod = Math.min(rollPeriod, originalData.length);
+  rollPeriod = Math.min(rollPeriod, originalData.length);
   var rollingData = [];
   var sigma = this.attr_("sigma");
 
+  var low, high, i, j, y, sum, num_ok, stddev;
   if (this.fractions_) {
     var num = 0;
     var den = 0;  // numerator/denominator
     var mult = 100.0;
-    for (var i = 0; i < originalData.length; i++) {
+    for (i = 0; i < originalData.length; i++) {
       num += originalData[i][1][0];
       den += originalData[i][1][1];
       if (i - rollPeriod >= 0) {
@@ -2384,22 +2507,22 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
       var date = originalData[i][0];
       var value = den ? num / den : 0.0;
       if (this.attr_("errorBars")) {
-        if (this.wilsonInterval_) {
+        if (this.attr_("wilsonInterval")) {
           // For more details on this confidence interval, see:
           // http://en.wikipedia.org/wiki/Binomial_confidence_interval
           if (den) {
             var p = value < 0 ? 0 : value, n = den;
             var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
             var denom = 1 + sigma * sigma / den;
-            var low  = (p + sigma * sigma / (2 * den) - pm) / denom;
-            var high = (p + sigma * sigma / (2 * den) + pm) / denom;
+            low  = (p + sigma * sigma / (2 * den) - pm) / denom;
+            high = (p + sigma * sigma / (2 * den) + pm) / denom;
             rollingData[i] = [date,
                               [p * mult, (p - low) * mult, (high - p) * mult]];
           } else {
             rollingData[i] = [date, [0, 0, 0]];
           }
         } else {
-          var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
+          stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
           rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
         }
       } else {
@@ -2407,16 +2530,16 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
       }
     }
   } else if (this.attr_("customBars")) {
-    var low = 0;
+    low = 0;
     var mid = 0;
-    var high = 0;
+    high = 0;
     var count = 0;
-    for (var i = 0; i < originalData.length; i++) {
+    for (i = 0; i < originalData.length; i++) {
       var data = originalData[i][1];
-      var y = data[1];
+      y = data[1];
       rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
 
-      if (y != null && !isNaN(y)) {
+      if (y !== null && !isNaN(y)) {
         low += data[0];
         mid += y;
         high += data[2];
@@ -2424,7 +2547,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
       }
       if (i - rollPeriod >= 0) {
         var prev = originalData[i - rollPeriod];
-        if (prev[1][1] != null && !isNaN(prev[1][1])) {
+        if (prev[1][1] !== null && !isNaN(prev[1][1])) {
           low -= prev[1][0];
           mid -= prev[1][1];
           high -= prev[1][2];
@@ -2442,18 +2565,17 @@ 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 points
-    var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
     if (!this.attr_("errorBars")){
       if (rollPeriod == 1) {
         return originalData;
       }
 
-      for (var i = 0; i < originalData.length; i++) {
-        var sum = 0;
-        var num_ok = 0;
-        for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
-          var y = originalData[j][1];
-          if (y == null || isNaN(y)) continue;
+      for (i = 0; i < originalData.length; i++) {
+        sum = 0;
+        num_ok = 0;
+        for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
+          y = originalData[j][1];
+          if (y === null || isNaN(y)) continue;
           num_ok++;
           sum += originalData[j][1];
         }
@@ -2465,19 +2587,19 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
       }
 
     } else {
-      for (var i = 0; i < originalData.length; i++) {
-        var sum = 0;
+      for (i = 0; i < originalData.length; i++) {
+        sum = 0;
         var variance = 0;
-        var num_ok = 0;
-        for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
-          var y = originalData[j][1][0];
-          if (y == null || isNaN(y)) continue;
+        num_ok = 0;
+        for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
+          y = originalData[j][1][0];
+          if (y === null || isNaN(y)) continue;
           num_ok++;
           sum += originalData[j][1][0];
           variance += Math.pow(originalData[j][1][1], 2);
         }
         if (num_ok) {
-          var stddev = Math.sqrt(variance) / num_ok;
+          stddev = Math.sqrt(variance) / num_ok;
           rollingData[i] = [originalData[i][0],
                             [sum / num_ok, sigma * stddev, sigma * stddev]];
         } else {
@@ -2578,6 +2700,7 @@ Dygraph.prototype.parseFloat_ = function(x, opt_line_no, opt_line) {
 Dygraph.prototype.parseCSV_ = function(data) {
   var ret = [];
   var lines = data.split("\n");
+  var vals, j;
 
   // Use the default delimiter or fall back to a tab if that makes sense.
   var delim = this.attr_('delimiter');
@@ -2600,7 +2723,7 @@ Dygraph.prototype.parseCSV_ = function(data) {
   for (var i = start; i < lines.length; i++) {
     var line = lines[i];
     line_no = i;
-    if (line.length == 0) continue;  // skip blank lines
+    if (line.length === 0) continue;  // skip blank lines
     if (line[0] == '#') continue;    // skip comment lines
     var inFields = line.split(delim);
     if (inFields.length < 2) continue;
@@ -2615,9 +2738,9 @@ Dygraph.prototype.parseCSV_ = function(data) {
 
     // If fractions are expected, parse the numbers as "A/B"
     if (this.fractions_) {
-      for (var j = 1; j < inFields.length; j++) {
+      for (j = 1; j < inFields.length; j++) {
         // TODO(danvk): figure out an appropriate way to flag parse errors.
-        var vals = inFields[j].split("/");
+        vals = inFields[j].split("/");
         if (vals.length != 2) {
           this.error('Expected fractional "num/den" values in CSV data ' +
                      "but found a value '" + inFields[j] + "' on line " +
@@ -2635,32 +2758,32 @@ Dygraph.prototype.parseCSV_ = function(data) {
                    'but line ' + (1 + i) + ' has an odd number of values (' +
                    (inFields.length - 1) + "): '" + line + "'");
       }
-      for (var j = 1; j < inFields.length; j += 2) {
+      for (j = 1; j < inFields.length; j += 2) {
         fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
                                this.parseFloat_(inFields[j + 1], i, line)];
       }
     } else if (this.attr_("customBars")) {
       // Bars are a low;center;high tuple
-      for (var j = 1; j < inFields.length; j++) {
+      for (j = 1; j < inFields.length; j++) {
         var val = inFields[j];
         if (/^ *$/.test(val)) {
           fields[j] = [null, null, null];
         } else {
-          var vals = val.split(";");
+          vals = val.split(";");
           if (vals.length == 3) {
             fields[j] = [ this.parseFloat_(vals[0], i, line),
                           this.parseFloat_(vals[1], i, line),
                           this.parseFloat_(vals[2], i, line) ];
           } else {
-            this.warning('When using customBars, values must be either blank ' +
-                         'or "low;center;high" tuples (got "' + val +
-                         '" on line ' + (1+i));
+            this.warn('When using customBars, values must be either blank ' +
+                      'or "low;center;high" tuples (got "' + val +
+                      '" on line ' + (1+i));
           }
         }
       }
     } else {
       // Values are just numbers
-      for (var j = 1; j < inFields.length; j++) {
+      for (j = 1; j < inFields.length; j++) {
         fields[j] = this.parseFloat_(inFields[j], i, line);
       }
     }
@@ -2678,9 +2801,9 @@ Dygraph.prototype.parseCSV_ = function(data) {
     // first row parsed correctly, then they probably double-specified the
     // labels. We go with the values set in the option, discard this row and
     // log a warning to the JS console.
-    if (i == 0 && this.attr_('labels')) {
+    if (i === 0 && this.attr_('labels')) {
       var all_null = true;
-      for (var j = 0; all_null && j < fields.length; j++) {
+      for (j = 0; all_null && j < fields.length; j++) {
         if (fields[j]) all_null = false;
       }
       if (all_null) {
@@ -2695,7 +2818,7 @@ Dygraph.prototype.parseCSV_ = function(data) {
 
   if (outOfOrder) {
     this.warn("CSV is out of order; order it correctly to speed loading.");
-    ret.sort(function(a,b) { return a[0] - b[0] });
+    ret.sort(function(a,b) { return a[0] - b[0]; });
   }
 
   return ret;
@@ -2711,20 +2834,21 @@ Dygraph.prototype.parseCSV_ = function(data) {
  */
 Dygraph.prototype.parseArray_ = function(data) {
   // Peek at the first x value to see if it's numeric.
-  if (data.length == 0) {
+  if (data.length === 0) {
     this.error("Can't plot empty data set");
     return null;
   }
-  if (data[0].length == 0) {
+  if (data[0].length === 0) {
     this.error("Data set cannot contain an empty row");
     return null;
   }
 
-  if (this.attr_("labels") == null) {
+  var i;
+  if (this.attr_("labels") === null) {
     this.warn("Using default labels. Set labels explicitly via 'labels' " +
               "in the options parameter");
     this.attrs_.labels = [ "X" ];
-    for (var i = 1; i < data[0].length; i++) {
+    for (i = 1; i < data[0].length; i++) {
       this.attrs_.labels.push("Y" + i);
     }
   }
@@ -2737,14 +2861,14 @@ Dygraph.prototype.parseArray_ = function(data) {
 
     // Assume they're all dates.
     var parsedData = Dygraph.clone(data);
-    for (var i = 0; i < data.length; i++) {
-      if (parsedData[i].length == 0) {
+    for (i = 0; i < data.length; i++) {
+      if (parsedData[i].length === 0) {
         this.error("Row " + (1 + i) + " of data is empty");
         return null;
       }
-      if (parsedData[i][0] == null
-          || typeof(parsedData[i][0].getTime) != 'function'
-          || isNaN(parsedData[i][0].getTime())) {
+      if (parsedData[i][0] === null ||
+          typeof(parsedData[i][0].getTime) != 'function' ||
+          isNaN(parsedData[i][0].getTime())) {
         this.error("x value in row " + (1 + i) + " is not a Date");
         return null;
       }
@@ -2771,6 +2895,19 @@ Dygraph.prototype.parseArray_ = function(data) {
  * @private
  */
 Dygraph.prototype.parseDataTable_ = function(data) {
+  var shortTextForAnnotationNum = function(num) {
+    // converts [0-9]+ [A-Z][a-z]*
+    // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
+    // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
+    var shortText = String.fromCharCode(65 /* A */ + num % 26);
+    num = Math.floor(num / 26);
+    while ( num > 0 ) {
+      shortText = String.fromCharCode(65 /* A */ + (num - 1) % 26 ) + shortText.toLowerCase();
+      num = Math.floor((num - 1) / 26);
+    }
+    return shortText;
+  }
+
   var cols = data.getNumberOfColumns();
   var rows = data.getNumberOfRows();
 
@@ -2795,7 +2932,8 @@ Dygraph.prototype.parseDataTable_ = function(data) {
   var colIdx = [];
   var annotationCols = {};  // data index -> [annotation cols]
   var hasAnnotations = false;
-  for (var i = 1; i < cols; i++) {
+  var i, j;
+  for (i = 1; i < cols; i++) {
     var type = data.getColumnType(i);
     if (type == 'number') {
       colIdx.push(i);
@@ -2817,7 +2955,7 @@ Dygraph.prototype.parseDataTable_ = function(data) {
   // Read column labels
   // TODO(danvk): add support back for errorBars
   var labels = [data.getColumnLabel(0)];
-  for (var i = 0; i < colIdx.length; i++) {
+  for (i = 0; i < colIdx.length; i++) {
     labels.push(data.getColumnLabel(colIdx[i]));
     if (this.attr_("errorBars")) i += 1;
   }
@@ -2827,7 +2965,7 @@ Dygraph.prototype.parseDataTable_ = function(data) {
   var ret = [];
   var outOfOrder = false;
   var annotations = [];
-  for (var i = 0; i < rows; i++) {
+  for (i = 0; i < rows; i++) {
     var row = [];
     if (typeof(data.getValue(i, 0)) === 'undefined' ||
         data.getValue(i, 0) === null) {
@@ -2842,16 +2980,16 @@ Dygraph.prototype.parseDataTable_ = function(data) {
       row.push(data.getValue(i, 0));
     }
     if (!this.attr_("errorBars")) {
-      for (var j = 0; j < colIdx.length; j++) {
+      for (j = 0; j < colIdx.length; j++) {
         var col = colIdx[j];
         row.push(data.getValue(i, col));
         if (hasAnnotations &&
             annotationCols.hasOwnProperty(col) &&
-            data.getValue(i, annotationCols[col][0]) != null) {
+            data.getValue(i, annotationCols[col][0]) !== null) {
           var ann = {};
           ann.series = data.getColumnLabel(col);
           ann.xval = row[0];
-          ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
+          ann.shortText = shortTextForAnnotationNum(annotations.length);
           ann.text = '';
           for (var k = 0; k < annotationCols[col].length; k++) {
             if (k) ann.text += "\n";
@@ -2862,11 +3000,11 @@ Dygraph.prototype.parseDataTable_ = function(data) {
       }
 
       // Strip out infinities, which give dygraphs problems later on.
-      for (var j = 0; j < row.length; j++) {
+      for (j = 0; j < row.length; j++) {
         if (!isFinite(row[j])) row[j] = null;
       }
     } else {
-      for (var j = 0; j < cols - 1; j++) {
+      for (j = 0; j < cols - 1; j++) {
         row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
       }
     }
@@ -2878,14 +3016,14 @@ Dygraph.prototype.parseDataTable_ = function(data) {
 
   if (outOfOrder) {
     this.warn("DataTable is out of order; order it correctly to speed loading.");
-    ret.sort(function(a,b) { return a[0] - b[0] });
+    ret.sort(function(a,b) { return a[0] - b[0]; });
   }
   this.rawData_ = ret;
 
   if (annotations.length > 0) {
     this.setAnnotations(annotations, true);
   }
-}
+};
 
 /**
  * Get the CSV data. If it's in a function, call that function. If it's in a
@@ -2893,38 +3031,42 @@ Dygraph.prototype.parseDataTable_ = function(data) {
  * @private
  */
 Dygraph.prototype.start_ = function() {
-  if (typeof this.file_ == 'function') {
-    // CSV string. Pretend we got it via XHR.
-    this.loadedEvent_(this.file_());
-  } else if (Dygraph.isArrayLike(this.file_)) {
-    this.rawData_ = this.parseArray_(this.file_);
+  var data = this.file_;
+
+  // Functions can return references of all other types.
+  if (typeof data == 'function') {
+    data = data();
+  }
+
+  if (Dygraph.isArrayLike(data)) {
+    this.rawData_ = this.parseArray_(data);
     this.predraw_();
-  } else if (typeof this.file_ == 'object' &&
-             typeof this.file_.getColumnRange == 'function') {
+  } else if (typeof data == 'object' &&
+             typeof data.getColumnRange == 'function') {
     // must be a DataTable from gviz.
-    this.parseDataTable_(this.file_);
+    this.parseDataTable_(data);
     this.predraw_();
-  } else if (typeof this.file_ == 'string') {
+  } else if (typeof data == 'string') {
     // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
-    if (this.file_.indexOf('\n') >= 0) {
-      this.loadedEvent_(this.file_);
+    if (data.indexOf('\n') >= 0) {
+      this.loadedEvent_(data);
     } else {
       var req = new XMLHttpRequest();
       var caller = this;
       req.onreadystatechange = function () {
         if (req.readyState == 4) {
-          if (req.status == 200 ||  // Normal http
-              req.status == 0) {    // Chrome w/ --allow-file-access-from-files
+          if (req.status === 200 ||  // Normal http
+              req.status === 0) {    // Chrome w/ --allow-file-access-from-files
             caller.loadedEvent_(req.responseText);
           }
         }
       };
 
-      req.open("GET", this.file_, true);
+      req.open("GET", data, true);
       req.send(null);
     }
   } else {
-    this.error("Unknown data format: " + (typeof this.file_));
+    this.error("Unknown data format: " + (typeof data));
   }
 };
 
@@ -2949,7 +3091,7 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
   if (typeof(block_redraw) == 'undefined') block_redraw = false;
 
   // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
-  var file = input_attrs['file'];
+  var file = input_attrs.file;
   var attrs = Dygraph.mapLegacyOptions_(input_attrs);
 
   // TODO(danvk): this is a mess. Move these options into attr_.
@@ -2959,11 +3101,11 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
   if ('dateWindow' in attrs) {
     this.dateWindow_ = attrs.dateWindow;
     if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
-      this.zoomed_x_ = attrs.dateWindow != null;
+      this.zoomed_x_ = (attrs.dateWindow !== null);
     }
   }
   if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
-    this.zoomed_y_ = attrs.valueRange != null;
+    this.zoomed_y_ = (attrs.valueRange !== null);
   }
 
   // TODO(danvk): validate per-series options.
@@ -3098,10 +3240,11 @@ Dygraph.prototype.visibility = function() {
   // Do lazy-initialization, so that this happens after we know the number of
   // data series.
   if (!this.attr_("visibility")) {
-    this.attrs_["visibility"] = [];
+    this.attrs_.visibility = [];
   }
-  while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
-    this.attr_("visibility").push(true);
+  // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs.
+  while (this.attr_("visibility").length < this.numColumns() - 1) {
+    this.attrs_.visibility.push(true);
   }
   return this.attr_("visibility");
 };
@@ -3153,15 +3296,19 @@ Dygraph.prototype.annotations = function() {
 };
 
 /**
+ * Get the list of label names for this graph. The first column is the
+ * x-axis, so the data series names start at index 1.
+ */
+Dygraph.prototype.getLabels = function(name) {
+  return this.attr_("labels").slice();
+};
+
+/**
  * Get the index of a series (column) given its name. The first column is the
  * x-axis, so the data series start with index 1.
  */
 Dygraph.prototype.indexFromSetName = function(name) {
-  var labels = this.attr_("labels");
-  for (var i = 0; i < labels.length; i++) {
-    if (labels[i] == name) return i;
-  }
-  return null;
+  return this.setIndexByName_[name];
 };
 
 /**
@@ -3203,7 +3350,7 @@ Dygraph.addAnnotationRule = function() {
   }
 
   this.warn("Unable to add default annotation CSS rule; display may be off.");
-}
+};
 
 // Older pages may still use this name.
 var DateGraph = Dygraph;