X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=e8afb2b5b12cf6cf8db6728b9e092d1b77d5a6ae;hb=a685723c0438aa2b29060404e6048d4409b95b1c;hp=4fbf443dc32fbf09960c6435dc8b2adaefab3127;hpb=d4139cd8006a7e0c5fba31a8917d16178817b4e7;p=dygraphs.git

diff --git a/dygraph.js b/dygraph.js
index 4fbf443..e8afb2b 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -94,7 +94,7 @@ Dygraph.DEFAULT_ATTRS = {
   labelsKMG2: false,
   showLabelsOnHighlight: true,
 
-  yValueFormatter: null,
+  yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
 
   strokeWidth: 1.0,
 
@@ -102,6 +102,7 @@ Dygraph.DEFAULT_ATTRS = {
   axisLabelFontSize: 14,
   xAxisLabelWidth: 50,
   yAxisLabelWidth: 50,
+  xAxisLabelFormatter: Dygraph.dateAxisFormatter,
   rightGap: 5,
 
   showRoller: false,
@@ -122,7 +123,9 @@ Dygraph.DEFAULT_ATTRS = {
   connectSeparatedPoints: false,
 
   stackedGraph: false,
-  hideOverlayOnMouseOut: true
+  hideOverlayOnMouseOut: true,
+
+  stepPlot: false
 };
 
 // Various logging levels.
@@ -131,6 +134,9 @@ Dygraph.INFO = 2;
 Dygraph.WARNING = 3;
 Dygraph.ERROR = 3;
 
+// Used for initializing annotation CSS rules only once.
+Dygraph.addedAnnotationCSS = false;
+
 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,
@@ -167,6 +173,7 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   this.valueRange_ = attrs.valueRange || null;
   this.wilsonInterval_ = attrs.wilsonInterval || true;
   this.is_initial_draw_ = true;
+  this.annotations_ = [];
 
   // Clear the div. This ensure that, if multiple dygraphs are passed the same
   // div, then only one will be drawn.
@@ -185,11 +192,17 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // The div might have been specified as percent of the current window size,
   // convert that to an appropriate number of pixels.
   if (div.style.width.indexOf("%") == div.style.width.length - 1) {
-    // Minus ten pixels  keeps scrollbars from showing up for a 100% width div.
-    this.width_ = (this.width_ * self.innerWidth / 100) - 10;
+    this.width_ = div.offsetWidth;
   }
   if (div.style.height.indexOf("%") == div.style.height.length - 1) {
-    this.height_ = (this.height_ * self.innerHeight / 100) - 10;
+    this.height_ = div.offsetHeight;
+  }
+
+  if (this.width_ == 0) {
+    this.error("dygraph has zero width. Please specify a width in pixels.");
+  }
+  if (this.height_ == 0) {
+    this.error("dygraph has zero height. Please specify a height in pixels.");
   }
 
   // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
@@ -218,6 +231,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // Make a note of whether labels will be pulled from the CSV file.
   this.labelsFromCSV_ = (this.attr_("labels") == null);
 
+  Dygraph.addAnnotationRule();
+
   // Create the containing DIV and other interactive elements
   this.createInterface_();
 
@@ -386,20 +401,24 @@ Dygraph.prototype.createInterface_ = function() {
   this.canvas_.height = this.height_;
   this.canvas_.style.width = this.width_ + "px";    // for IE
   this.canvas_.style.height = this.height_ + "px";  // for IE
-  this.graphDiv.appendChild(this.canvas_);
 
   // ... and for static parts of the chart.
   this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
 
+  // The interactive parts of the graph are drawn on top of the chart.
+  this.graphDiv.appendChild(this.hidden_);
+  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.hidden_, 'mousemove', function(e) {
+  Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
     dygraph.mouseMove_(e);
   });
-  Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
+  Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
     dygraph.mouseOut_(e);
   });
 
@@ -475,7 +494,6 @@ Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
   h.height = this.height_;
   h.style.width = this.width_ + "px";    // for IE
   h.style.height = this.height_ + "px";  // for IE
-  this.graphDiv.appendChild(h);
   return h;
 };
 
@@ -527,10 +545,11 @@ Dygraph.prototype.setColors_ = function() {
   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++) {
       if (!this.visibility()[i-1]) continue;
       // alternate colors for high contrast.
-      var idx = i - parseInt(i % 2 ? i / 2 : (i - num)/2, 10);
+      var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
       var hue = (1.0 * idx/ (1 + num));
       this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
     }
@@ -705,7 +724,7 @@ Dygraph.prototype.createDragInterface_ = function() {
   var getY = function(e) { return Dygraph.pageX(e) - py };
 
   // Draw zoom rectangles when the mouse is down and the user moves around
-  Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
+  Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(event) {
     if (isZooming) {
       dragEndX = getX(event);
       dragEndY = getY(event);
@@ -727,7 +746,7 @@ Dygraph.prototype.createDragInterface_ = function() {
   });
 
   // Track the beginning of drag events
-  Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
+  Dygraph.addEvent(this.mouseEventElement_, 'mousedown', function(event) {
     px = Dygraph.findPosX(self.canvas_);
     py = Dygraph.findPosY(self.canvas_);
     dragStartX = getX(event);
@@ -761,7 +780,7 @@ Dygraph.prototype.createDragInterface_ = function() {
   });
 
   // Temporarily cancel the dragging event when the mouse leaves the graph
-  Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
+  Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(event) {
     if (isZooming) {
       dragEndX = null;
       dragEndY = null;
@@ -770,7 +789,7 @@ Dygraph.prototype.createDragInterface_ = function() {
 
   // 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.hidden_, 'mouseup', function(event) {
+  Dygraph.addEvent(this.mouseEventElement_, 'mouseup', function(event) {
     if (isZooming) {
       isZooming = false;
       dragEndX = getX(event);
@@ -806,7 +825,7 @@ Dygraph.prototype.createDragInterface_ = function() {
   });
 
   // Double-clicking zooms back out
-  Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
+  Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) {
     if (self.dateWindow_ == null) return;
     self.dateWindow_ = null;
     self.drawGraph_(self.rawData_);
@@ -877,7 +896,7 @@ Dygraph.prototype.doZoom_ = function(lowX, highX) {
  * @private
  */
 Dygraph.prototype.mouseMove_ = function(event) {
-  var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
+  var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
   var points = this.layout_.points;
 
   var lastx = -1;
@@ -900,16 +919,19 @@ Dygraph.prototype.mouseMove_ = function(event) {
 
   // Extract the points we've selected
   this.selPoints_ = [];
-  var cumulative_sum = 0;  // used only if we have a stackedGraph.
   var l = points.length;
-  for (var i = l - 1; i >= 0; i--) {
-    if (points[i].xval == lastx) {
-      if (!this.attr_("stackedGraph")) {
-        this.selPoints_.unshift(points[i]);
-      } else {
-        // Clone the point, since we need to 'unstack' it below. Stacked points
-        // are in reverse order.
-        var p = {};
+  if (!this.attr_("stackedGraph")) {
+    for (var i = 0; i < l; i++) {
+      if (points[i].xval == lastx) {
+        this.selPoints_.push(points[i]);
+      }
+    }
+  } else {
+    // Need to 'unstack' points starting from the bottom
+    var cumulative_sum = 0;
+    for (var 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]) {
           p[k] = points[i][k];
         }
@@ -918,13 +940,13 @@ Dygraph.prototype.mouseMove_ = function(event) {
         this.selPoints_.push(p);
       }
     }
+    this.selPoints_.reverse();
   }
 
   if (this.attr_("highlightCallback")) {
-    var px = this.lastHighlightCallbackX;
+    var px = this.lastx_;
     if (px !== null && lastx != px) {
       // only fire if the selected point has changed.
-      this.lastHighlightCallbackX = lastx;
       this.attr_("highlightCallback")(event, lastx, this.selPoints_);
     }
   }
@@ -968,7 +990,7 @@ Dygraph.prototype.updateSelection_ = function() {
         }
         var point = this.selPoints_[i];
         var c = new RGBColor(this.colors_[i%clen]);
-        var yval = fmtFunc ? fmtFunc(point.yval) : this.round_(point.yval, 2);
+        var yval = fmtFunc(point.yval);
         replace += " <b><font color='" + c.toHex() + "'>"
                 + point.name + "</font></b>:"
                 + yval;
@@ -1033,6 +1055,10 @@ Dygraph.prototype.setSelection = function(row) {
  * @private
  */
 Dygraph.prototype.mouseOut_ = function(event) {
+  if (this.attr_("unhighlightCallback")) {
+    this.attr_("unhighlightCallback")(event);
+  }
+
   if (this.attr_("hideOverlayOnMouseOut")) {
     this.clearSelection();
   }
@@ -1079,7 +1105,7 @@ Dygraph.zeropad = function(x) {
  * @return {String} A time of the form "HH:MM:SS"
  * @private
  */
-Dygraph.prototype.hmsString_ = function(date) {
+Dygraph.hmsString_ = function(date) {
   var zeropad = Dygraph.zeropad;
   var d = new Date(date);
   if (d.getSeconds()) {
@@ -1092,11 +1118,31 @@ Dygraph.prototype.hmsString_ = function(date) {
 }
 
 /**
+ * Convert a JS date to a string appropriate to display on an axis that
+ * is displaying values at the stated granularity.
+ * @param {Date} date The date to format
+ * @param {Number} granularity One of the Dygraph granularity constants
+ * @return {String} The formatted date
+ * @private
+ */
+Dygraph.dateAxisFormatter = function(date, granularity) {
+  if (granularity >= Dygraph.MONTHLY) {
+    return date.strftime('%b %y');
+  } else {
+    var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
+    if (frac == 0 || granularity >= Dygraph.DAILY) {
+      return new Date(date.getTime() + 3600*1000).strftime('%d%b');
+    } else {
+      return Dygraph.hmsString_(date.getTime());
+    }
+  }
+}
+
+/**
  * Convert a JS date (millis since epoch) to YYYY/MM/DD
  * @param {Number} date The JavaScript date (ms since epoch)
  * @return {String} A date of the form "YYYY/MM/DD"
  * @private
- * TODO(danvk): why is this part of the prototype?
  */
 Dygraph.dateString_ = function(date, self) {
   var zeropad = Dygraph.zeropad;
@@ -1111,7 +1157,7 @@ Dygraph.dateString_ = function(date, self) {
 
   var ret = "";
   var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
-  if (frac) ret = " " + self.hmsString_(date);
+  if (frac) ret = " " + Dygraph.hmsString_(date);
 
   return year + "/" + month + "/" + day + ret;
 };
@@ -1123,7 +1169,7 @@ Dygraph.dateString_ = function(date, self) {
  * @return {Number} The rounded number
  * @private
  */
-Dygraph.prototype.round_ = function(num, places) {
+Dygraph.round_ = function(num, places) {
   var shift = Math.pow(10, places);
   return Math.round(num * shift)/shift;
 };
@@ -1233,6 +1279,7 @@ Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
 //   Returns an array containing {v: millis, label: label} dictionaries.
 //
 Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
+  var formatter = this.attr_("xAxisLabelFormatter");
   var ticks = [];
   if (granularity < Dygraph.MONTHLY) {
     // Generate one tick mark for every fixed interval of time.
@@ -1269,14 +1316,7 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
     start_time = d.getTime();
 
     for (var t = start_time; t <= end_time; t += spacing) {
-      var d = new Date(t);
-      var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
-      if (frac == 0 || granularity >= Dygraph.DAILY) {
-        // the extra hour covers DST problems.
-        ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
-      } else {
-        ticks.push({ v:t, label: this.hmsString_(t) });
-      }
+      ticks.push({ v:t, label: formatter(new Date(t), granularity) });
     }
   } else {
     // Display a tick mark on the first of a set of months of each year.
@@ -1307,7 +1347,7 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
         var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
         var t = Date.parse(date_str);
         if (t < start_time || t > end_time) continue;
-        ticks.push({ v:t, label: new Date(t).strftime('%b %y') });
+        ticks.push({ v:t, label: formatter(new Date(t), granularity) });
       }
     }
   }
@@ -1399,13 +1439,13 @@ Dygraph.numericTicks = function(minV, maxV, self) {
   for (var i = 0; i < nTicks; i++) {
     var tickV = low_val + i * scale;
     var absTickV = Math.abs(tickV);
-    var label = self.round_(tickV, 2);
+    var label = Dygraph.round_(tickV, 2);
     if (k_labels.length) {
       // 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 = self.round_(tickV / n, 1) + k_labels[j];
+          label = Dygraph.round_(tickV / n, 1) + k_labels[j];
           break;
         }
       }
@@ -1489,17 +1529,19 @@ Dygraph.prototype.drawGraph_ = function(data) {
 
   var connectSeparatedPoints = this.attr_('connectSeparatedPoints');
 
-  // For stacked series.
-  var cumulative_y = [];
-  var stacked_datasets = [];
+  // 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 cumulative_y = [];  // For stacked series.
+  var datasets = [];
 
-  // Loop over all fields in the dataset
-  for (var i = 1; i < data[0].length; i++) {
+  // Loop over all fields and create datasets
+  for (var i = data[0].length - 1; i >= 1; i--) {
     if (!this.visibility()[i - 1]) continue;
 
     var series = [];
     for (var j = 0; j < data.length; j++) {
-      if (data[j][i] || !connectSeparatedPoints) {
+      if (data[j][i] != null || !connectSeparatedPoints) {
         var date = data[j][0];
         series.push([date, data[j][i]]);
       }
@@ -1541,42 +1583,40 @@ Dygraph.prototype.drawGraph_ = function(data) {
     var extremes = this.extremeValues_(series);
     var thisMinY = extremes[0];
     var thisMaxY = extremes[1];
-    if (!minY || thisMinY < minY) minY = thisMinY;
-    if (!maxY || thisMaxY > maxY) maxY = thisMaxY;
+    if (minY === null || thisMinY < minY) minY = thisMinY;
+    if (maxY === null || thisMaxY > maxY) maxY = thisMaxY;
 
     if (bars) {
-      var vals = [];
-      for (var j=0; j<series.length; j++)
-        vals[j] = [series[j][0],
-                   series[j][1][0], series[j][1][1], series[j][1][2]];
-      this.layout_.addDataset(this.attr_("labels")[i], vals);
+      for (var j=0; j<series.length; j++) {
+        val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
+        series[j] = val;
+      }
     } else if (this.attr_("stackedGraph")) {
-      var vals = [];
       var l = series.length;
       var actual_y;
       for (var j = 0; j < l; j++) {
-        if (cumulative_y[series[j][0]] === undefined)
-          cumulative_y[series[j][0]] = 0;
+        // 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)
+          cumulative_y[x] = 0;
 
         actual_y = series[j][1];
-        cumulative_y[series[j][0]] += actual_y;
+        cumulative_y[x] += actual_y;
 
-        vals[j] = [series[j][0], cumulative_y[series[j][0]]]
+        series[j] = [x, cumulative_y[x]]
 
-        if (!maxY || cumulative_y[series[j][0]] > maxY)
-          maxY = cumulative_y[series[j][0]];
+        if (!maxY || cumulative_y[x] > maxY)
+          maxY = cumulative_y[x];
       }
-      stacked_datasets.push([this.attr_("labels")[i], vals]);
-      //this.layout_.addDataset(this.attr_("labels")[i], vals);
-    } else {
-      this.layout_.addDataset(this.attr_("labels")[i], series);
     }
+
+    datasets[i] = series;
   }
 
-  if (stacked_datasets.length > 0) {
-    for (var i = (stacked_datasets.length - 1); i >= 0; i--) {
-      this.layout_.addDataset(stacked_datasets[i][0], stacked_datasets[i][1]);
-    }
+  for (var i = 1; i < datasets.length; i++) {
+    if (!this.visibility()[i - 1]) continue;
+    this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
   }
 
   // Use some heuristics to come up with a good maxY value, unless it's been
@@ -1815,10 +1855,12 @@ Dygraph.prototype.detectTypeFromString_ = function(str) {
     this.attrs_.xValueFormatter = Dygraph.dateString_;
     this.attrs_.xValueParser = Dygraph.dateParser;
     this.attrs_.xTicker = Dygraph.dateTicker;
+    this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else {
     this.attrs_.xValueFormatter = function(x) { return x; };
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
+    this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
   }
 };
 
@@ -1950,6 +1992,7 @@ Dygraph.prototype.parseArray_ = function(data) {
   if (Dygraph.isDateLike(data[0][0])) {
     // Some intelligent defaults for a date x-axis.
     this.attrs_.xValueFormatter = Dygraph.dateString_;
+    this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
     this.attrs_.xTicker = Dygraph.dateTicker;
 
     // Assume they're all dates.
@@ -1981,7 +2024,7 @@ Dygraph.prototype.parseArray_ = function(data) {
  * The data is expected to have a first column that is either a date or a
  * number. All subsequent columns must be numbers. If there is a clear mismatch
  * between this.xValueParser_ and the type of the first column, it will be
- * fixed. Returned value is in the same format as return value of parseCSV_.
+ * fixed. Fills out rawData_.
  * @param {Array.<Object>} data See above.
  * @private
  */
@@ -1989,32 +2032,58 @@ Dygraph.prototype.parseDataTable_ = function(data) {
   var cols = data.getNumberOfColumns();
   var rows = data.getNumberOfRows();
 
-  // Read column labels
-  var labels = [];
-  for (var i = 0; i < cols; i++) {
-    labels.push(data.getColumnLabel(i));
-    if (i != 0 && this.attr_("errorBars")) i += 1;
-  }
-  this.attrs_.labels = labels;
-  cols = labels.length;
-
   var indepType = data.getColumnType(0);
   if (indepType == 'date' || indepType == 'datetime') {
     this.attrs_.xValueFormatter = Dygraph.dateString_;
     this.attrs_.xValueParser = Dygraph.dateParser;
     this.attrs_.xTicker = Dygraph.dateTicker;
+    this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else if (indepType == 'number') {
     this.attrs_.xValueFormatter = function(x) { return x; };
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
+    this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
   } else {
     this.error("only 'date', 'datetime' and 'number' types are supported for " +
                "column 1 of DataTable input (Got '" + indepType + "')");
     return null;
   }
 
+  // Array of the column indices which contain data (and not annotations).
+  var colIdx = [];
+  var annotationCols = {};  // data index -> [annotation cols]
+  var hasAnnotations = false;
+  for (var i = 1; i < cols; i++) {
+    var type = data.getColumnType(i);
+    if (type == 'number') {
+      colIdx.push(i);
+    } else if (type == 'string' && this.attr_('displayAnnotations')) {
+      // This is OK -- it's an annotation column.
+      var dataIdx = colIdx[colIdx.length - 1];
+      if (!annotationCols.hasOwnProperty(dataIdx)) {
+        annotationCols[dataIdx] = [i];
+      } else {
+        annotationCols[dataIdx].push(i);
+      }
+      hasAnnotations = true;
+    } else {
+      this.error("Only 'number' is supported as a dependent type with Gviz." +
+                 " 'string' is only supported if displayAnnotations is true");
+    }
+  }
+
+  // Read column labels
+  // TODO(danvk): add support back for errorBars
+  var labels = [data.getColumnLabel(0)];
+  for (var i = 0; i < colIdx.length; i++) {
+    labels.push(data.getColumnLabel(colIdx[i]));
+  }
+  this.attrs_.labels = labels;
+  cols = labels.length;
+
   var ret = [];
   var outOfOrder = false;
+  var annotations = [];
   for (var i = 0; i < rows; i++) {
     var row = [];
     if (typeof(data.getValue(i, 0)) === 'undefined' ||
@@ -2030,8 +2099,23 @@ Dygraph.prototype.parseDataTable_ = function(data) {
       row.push(data.getValue(i, 0));
     }
     if (!this.attr_("errorBars")) {
-      for (var j = 1; j < cols; j++) {
-        row.push(data.getValue(i, j));
+      for (var 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) {
+          var ann = {};
+          ann.series = data.getColumnLabel(col);
+          ann.xval = row[0];
+          ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
+          ann.text = '';
+          for (var k = 0; k < annotationCols[col].length; k++) {
+            if (k) ann.text += "\n";
+            ann.text += data.getValue(i, annotationCols[col][k]);
+          }
+          annotations.push(ann);
+        }
       }
     } else {
       for (var j = 0; j < cols - 1; j++) {
@@ -2048,7 +2132,11 @@ Dygraph.prototype.parseDataTable_ = function(data) {
     this.warn("DataTable is out of order; order it correctly to speed loading.");
     ret.sort(function(a,b) { return a[0] - b[0] });
   }
-  return ret;
+  this.rawData_ = ret;
+
+  if (annotations.length > 0) {
+    this.setAnnotations(annotations, true);
+  }
 }
 
 // These functions are all based on MochiKit.
@@ -2114,7 +2202,7 @@ Dygraph.prototype.start_ = function() {
   } else if (typeof this.file_ == 'object' &&
              typeof this.file_.getColumnRange == 'function') {
     // must be a DataTable from gviz.
-    this.rawData_ = this.parseDataTable_(this.file_);
+    this.parseDataTable_(this.file_);
     this.drawGraph_(this.rawData_);
   } else if (typeof this.file_ == 'string') {
     // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
@@ -2159,6 +2247,7 @@ Dygraph.prototype.updateOptions = function(attrs) {
     this.valueRange_ = attrs.valueRange;
   }
   Dygraph.update(this.user_attrs_, attrs);
+  Dygraph.update(this.renderOptions_, attrs);
 
   this.labelsFromCSV_ = (this.attr_("labels") == null);
 
@@ -2184,6 +2273,11 @@ Dygraph.prototype.updateOptions = function(attrs) {
  * @param {Number} height Height (in pixels)
  */
 Dygraph.prototype.resize = function(width, height) {
+  if (this.resize_lock) {
+    return;
+  }
+  this.resize_lock = true;
+
   if ((width === null) != (height === null)) {
     this.warn("Dygraph.resize() should be called with zero parameters or " +
               "two non-NULL parameters. Pretending it was zero.");
@@ -2206,6 +2300,8 @@ Dygraph.prototype.resize = function(width, height) {
 
   this.createInterface_();
   this.drawGraph_(this.rawData_);
+
+  this.resize_lock = false;
 };
 
 /**
@@ -2247,6 +2343,40 @@ Dygraph.prototype.setVisibility = function(num, value) {
 };
 
 /**
+ * Update the list of annotations and redraw the chart.
+ */
+Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
+  this.annotations_ = ann;
+  this.layout_.setAnnotations(this.annotations_);
+  if (!suppressDraw) {
+    this.drawGraph_(this.rawData_);
+  }
+};
+
+/**
+ * Return the list of annotations.
+ */
+Dygraph.prototype.annotations = function() {
+  return this.annotations_;
+};
+
+Dygraph.addAnnotationRule = function() {
+  if (Dygraph.addedAnnotationCSS) return;
+
+  var mysheet=document.styleSheets[0]
+  var rule = "border: 1px solid black; " +
+             "background-color: white; " +
+             "text-align: center;";
+  if (mysheet.insertRule) {  // Firefox
+    mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }");
+  } else if (mysheet.addRule) {  // IE
+    mysheet.addRule(".dygraphDefaultAnnotation", rule);
+  }
+
+  Dygraph.addedAnnotationCSS = true;
+}
+
+/**
  * Create a new canvas element. This is more complex than a simple
  * document.createElement("canvas") because of IE and excanvas.
  */