add highlightCallback, add selPoints to callbacks, callback test
[dygraphs.git] / dygraph.js
index 33f1e81..f940cad 100644 (file)
@@ -105,6 +105,8 @@ Dygraph.DEFAULT_ATTRS = {
   xValueParser: Dygraph.dateParser,
   xTicker: Dygraph.dateTicker,
 
+  delimiter: ',',
+
   sigma: 2.0,
   errorBars: false,
   fractions: false,
@@ -125,7 +127,7 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
   if (labels != null) {
     var new_labels = ["Date"];
     for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
-    MochiKit.Base.update(attrs, { 'labels': new_labels });
+    Dygraph.update(attrs, { 'labels': new_labels });
   }
   this.__init__(div, file, attrs);
 };
@@ -153,7 +155,6 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   this.dateWindow_ = attrs.dateWindow || null;
   this.valueRange_ = attrs.valueRange || null;
   this.wilsonInterval_ = attrs.wilsonInterval || true;
-  this.customBars_ = attrs.customBars || false;
 
   // Clear the div. This ensure that, if multiple dygraphs are passed the same
   // div, then only one will be drawn.
@@ -179,10 +180,10 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
   // defaults without overriding behavior that the user specifically asks for.
   this.user_attrs_ = {};
-  MochiKit.Base.update(this.user_attrs_, attrs);
+  Dygraph.update(this.user_attrs_, attrs);
 
   this.attrs_ = {};
-  MochiKit.Base.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
+  Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
 
   // Make a note of whether labels will be pulled from the CSV file.
   this.labelsFromCSV_ = (this.attr_("labels") == null);
@@ -193,27 +194,27 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   // Create the PlotKit grapher
   // TODO(danvk): why does the Layout need its own set of options?
   this.layoutOptions_ = { 'errorBars': (this.attr_("errorBars") ||
-                                        this.customBars_),
+                                        this.attr_("customBars")),
                           'xOriginIsZero': false };
-  MochiKit.Base.update(this.layoutOptions_, this.attrs_);
-  MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
+  Dygraph.update(this.layoutOptions_, this.attrs_);
+  Dygraph.update(this.layoutOptions_, this.user_attrs_);
 
-  this.layout_ = new DygraphLayout(this.layoutOptions_);
+  this.layout_ = new DygraphLayout(this, this.layoutOptions_);
 
   // TODO(danvk): why does the Renderer need its own set of options?
   this.renderOptions_ = { colorScheme: this.colors_,
                           strokeColor: null,
                           axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
-  MochiKit.Base.update(this.renderOptions_, this.attrs_);
-  MochiKit.Base.update(this.renderOptions_, this.user_attrs_);
-  this.plotter_ = new DygraphCanvasRenderer(this.hidden_, this.layout_,
+  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_();
 
-  // connect(window, 'onload', this, function(e) { this.start_(); });
   this.start_();
 };
 
@@ -262,7 +263,19 @@ Dygraph.prototype.error = function(message) {
  */
 Dygraph.prototype.rollPeriod = function() {
   return this.rollPeriod_;
-}
+};
+
+Dygraph.addEvent = function(el, evt, fn) {
+  var normed_fn = function(e) {
+    if (!e) var e = window.event;
+    fn(e);
+  };
+  if (window.addEventListener) {  // Mozilla, Netscape, Firefox
+    el.addEventListener(evt, normed_fn, false);
+  } else {  // IE
+    el.attachEvent('on' + evt, normed_fn);
+  }
+};
 
 /**
  * Generates interface elements for the Dygraph: a containing div, a div to
@@ -274,31 +287,28 @@ Dygraph.prototype.createInterface_ = function() {
   // Create the all-enclosing graph div
   var enclosing = this.maindiv_;
 
-  this.graphDiv = MochiKit.DOM.DIV( { style: { 'width': this.width_ + "px",
-                                                'height': this.height_ + "px"
-                                                 }});
-  appendChildNodes(enclosing, this.graphDiv);
-
-  // Create the canvas to store
-  // We need to subtract out some space for the x- and y-axis labels.
-  // For the x-axis:
-  //   - remove from height: (axisTickSize + height of tick label)
-  //          height of tick label == axisLabelFontSize?
-  //   - remove from width: axisLabelWidth / 2 (maybe on both ends)
-  // For the y-axis:
-  //   - remove axisLabelFontSize from the top
-  //   - remove axisTickSize from the left
-
-  var canvas = MochiKit.DOM.CANVAS;
-  this.canvas_ = canvas( { style: { 'position': 'absolute' },
-                          width: this.width_,
-                          height: this.height_
-                         });
-  appendChildNodes(this.graphDiv, this.canvas_);
+  this.graphDiv = document.createElement("div");
+  this.graphDiv.style.width = this.width_ + "px";
+  this.graphDiv.style.height = this.height_ + "px";
+  enclosing.appendChild(this.graphDiv);
+
+  // Create the canvas for interactive parts of the chart.
+  this.canvas_ = document.createElement("canvas");
+  this.canvas_.style.position = "absolute";
+  this.canvas_.width = this.width_;
+  this.canvas_.height = this.height_;
+  this.graphDiv.appendChild(this.canvas_);
 
+  // ... and for static parts of the chart.
   this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
-  connect(this.hidden_, 'onmousemove', this, function(e) { this.mouseMove_(e) });
-  connect(this.hidden_, 'onmouseout', this, function(e) { this.mouseOut_(e) });
+
+  var dygraph = this;
+  Dygraph.addEvent(this.hidden_, 'mousemove', function(e) {
+    dygraph.mouseMove_(e);
+  });
+  Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
+    dygraph.mouseOut_(e);
+  });
 }
 
 /**
@@ -315,10 +325,42 @@ Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
   h.style.left = canvas.style.left;
   h.width = this.width_;
   h.height = this.height_;
-  MochiKit.DOM.appendChildNodes(this.graphDiv, h);
+  this.graphDiv.appendChild(h);
   return h;
 };
 
+// Taken from MochiKit.Color
+Dygraph.hsvToRGB = function (hue, saturation, value) {
+  var red;
+  var green;
+  var blue;
+  if (saturation === 0) {
+    red = value;
+    green = value;
+    blue = value;
+  } else {
+    var i = Math.floor(hue * 6);
+    var f = (hue * 6) - i;
+    var p = value * (1 - saturation);
+    var q = value * (1 - (saturation * f));
+    var t = value * (1 - (saturation * (1 - f)));
+    switch (i) {
+      case 1: red = q; green = value; blue = p; break;
+      case 2: red = p; green = value; blue = t; break;
+      case 3: red = p; green = q; blue = value; break;
+      case 4: red = t; green = p; blue = value; break;
+      case 5: red = value; green = p; blue = q; break;
+      case 6: // fall through
+      case 0: red = value; green = t; blue = p; break;
+    }
+  }
+  red = Math.floor(255 * red + 0.5);
+  green = Math.floor(255 * green + 0.5);
+  blue = Math.floor(255 * blue + 0.5);
+  return 'rgb(' + red + ',' + green + ',' + blue + ')';
+};
+
+
 /**
  * Generate a set of distinct colors for the data series. This is done with a
  * color wheel. Saturation/Value are customizable, and the hue is
@@ -337,22 +379,50 @@ Dygraph.prototype.setColors_ = function() {
     var val = this.attr_('colorValue') || 0.5;
     for (var i = 1; i <= num; i++) {
       var hue = (1.0*i/(1+num));
-      this.colors_.push( MochiKit.Color.Color.fromHSV(hue, sat, val) );
+      this.colors_.push( Dygraph.hsvToRGB(hue, sat, val) );
     }
   } else {
     for (var i = 0; i < num; i++) {
       var colorStr = colors[i % colors.length];
-      this.colors_.push( MochiKit.Color.Color.fromString(colorStr) );
+      this.colors_.push(colorStr);
     }
   }
 
   // TODO(danvk): update this w/r/t/ the new options system. 
   this.renderOptions_.colorScheme = this.colors_;
-  MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
-  MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
-  MochiKit.Base.update(this.layoutOptions_, this.attrs_);
+  Dygraph.update(this.plotter_.options, this.renderOptions_);
+  Dygraph.update(this.layoutOptions_, this.user_attrs_);
+  Dygraph.update(this.layoutOptions_, this.attrs_);
 }
 
+// The following functions are from quirksmode.org
+// http://www.quirksmode.org/js/findpos.html
+Dygraph.findPosX = function(obj) {
+  var curleft = 0;
+  if (obj.offsetParent) {
+    while (obj.offsetParent) {
+      curleft += obj.offsetLeft;
+      obj = obj.offsetParent;
+    }
+  }
+  else if (obj.x)
+    curleft += obj.x;
+  return curleft;
+};
+                   
+Dygraph.findPosY = function(obj) {
+  var curtop = 0;
+  if (obj.offsetParent) {
+    while (obj.offsetParent) {
+      curtop += obj.offsetTop;
+      obj = obj.offsetParent;
+    }
+  }
+  else if (obj.y)
+    curtop += obj.y;
+  return curtop;
+};
+
 /**
  * Create the div that contains information on the selected point(s)
  * This goes in the top right of the canvas, unless an external div has already
@@ -362,7 +432,7 @@ Dygraph.prototype.setColors_ = function() {
 Dygraph.prototype.createStatusMessage_ = function(){
   if (!this.attr_("labelsDiv")) {
     var divWidth = this.attr_('labelsDivWidth');
-    var messagestyle = { "style": {
+    var messagestyle = {
       "position": "absolute",
       "fontSize": "14px",
       "zIndex": 10,
@@ -371,10 +441,13 @@ Dygraph.prototype.createStatusMessage_ = function(){
       "left": (this.width_ - divWidth - 2) + "px",
       "background": "white",
       "textAlign": "left",
-      "overflow": "hidden"}};
-    MochiKit.Base.update(messagestyle["style"], this.attr_('labelsDivStyles'));
-    var div = MochiKit.DOM.DIV(messagestyle);
-    MochiKit.DOM.appendChildNodes(this.graphDiv, div);
+      "overflow": "hidden"};
+    Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
+    var div = document.createElement("div");
+    for (var name in messagestyle) {
+      div.style[name] = messagestyle[name];
+    }
+    this.graphDiv.appendChild(div);
     this.attrs_.labelsDiv = div;
   }
 };
@@ -386,26 +459,55 @@ Dygraph.prototype.createStatusMessage_ = function(){
  */
 Dygraph.prototype.createRollInterface_ = function() {
   var display = this.attr_('showRoller') ? "block" : "none";
-  var textAttr = { "type": "text",
-                   "size": "2",
-                   "value": this.rollPeriod_,
-                   "style": { "position": "absolute",
-                              "zIndex": 10,
-                              "top": (this.plotter_.area.h - 25) + "px",
-                              "left": (this.plotter_.area.x + 1) + "px",
-                              "display": display }
+  var textAttr = { "position": "absolute",
+                   "zIndex": 10,
+                   "top": (this.plotter_.area.h - 25) + "px",
+                   "left": (this.plotter_.area.x + 1) + "px",
+                   "display": display
                   };
-  var roller = MochiKit.DOM.INPUT(textAttr);
+  var roller = document.createElement("input");
+  roller.type = "text";
+  roller.size = "2";
+  roller.value = this.rollPeriod_;
+  for (var name in textAttr) {
+    roller.style[name] = textAttr[name];
+  }
+
   var pa = this.graphDiv;
-  MochiKit.DOM.appendChildNodes(pa, roller);
-  connect(roller, 'onchange', this,
-          function() { this.adjustRoll(roller.value); });
+  pa.appendChild(roller);
+  var dygraph = this;
+  roller.onchange = function() { dygraph.adjustRoll(roller.value); };
   return roller;
-}
+};
+
+// These functions are taken from MochiKit.Signal
+Dygraph.pageX = function(e) {
+  if (e.pageX) {
+    return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
+  } else {
+    var de = document;
+    var b = document.body;
+    return e.clientX +
+        (de.scrollLeft || b.scrollLeft) -
+        (de.clientLeft || 0);
+  }
+};
+
+Dygraph.pageY = function(e) {
+  if (e.pageY) {
+    return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
+  } else {
+    var de = document;
+    var b = document.body;
+    return e.clientY +
+        (de.scrollTop || b.scrollTop) -
+        (de.clientTop || 0);
+  }
+};
 
 /**
  * Set up all the mouse handlers needed to capture dragging behavior for zoom
- * events. Uses MochiKit.Signal to attach all the event handlers.
+ * events.
  * @private
  */
 Dygraph.prototype.createDragInterface_ = function() {
@@ -422,11 +524,11 @@ Dygraph.prototype.createDragInterface_ = function() {
   // Utility function to convert page-wide coordinates to canvas coords
   var px = 0;
   var py = 0;
-  var getX = function(e) { return e.mouse().page.x - px };
-  var getY = function(e) { return e.mouse().page.y - py };
+  var getX = function(e) { return Dygraph.pageX(e) - px };
+  var getY = function(e) { return Dygraph.pageX(e) - py };
 
   // Draw zoom rectangles when the mouse is down and the user moves around
-  connect(this.hidden_, 'onmousemove', function(event) {
+  Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
     if (mouseDown) {
       dragEndX = getX(event);
       dragEndY = getY(event);
@@ -437,17 +539,17 @@ Dygraph.prototype.createDragInterface_ = function() {
   });
 
   // Track the beginning of drag events
-  connect(this.hidden_, 'onmousedown', function(event) {
+  Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
     mouseDown = true;
-    px = PlotKit.Base.findPosX(self.canvas_);
-    py = PlotKit.Base.findPosY(self.canvas_);
+    px = Dygraph.findPosX(self.canvas_);
+    py = Dygraph.findPosY(self.canvas_);
     dragStartX = getX(event);
     dragStartY = getY(event);
   });
 
   // If the user releases the mouse button during a drag, but not over the
   // canvas, then it doesn't count as a zooming action.
-  connect(document, 'onmouseup', this, function(event) {
+  Dygraph.addEvent(document, 'mouseup', function(event) {
     if (mouseDown) {
       mouseDown = false;
       dragStartX = null;
@@ -456,7 +558,7 @@ Dygraph.prototype.createDragInterface_ = function() {
   });
 
   // Temporarily cancel the dragging event when the mouse leaves the graph
-  connect(this.hidden_, 'onmouseout', this, function(event) {
+  Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
     if (mouseDown) {
       dragEndX = null;
       dragEndY = null;
@@ -465,7 +567,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)
-  connect(this.hidden_, 'onmouseup', this, function(event) {
+  Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
     if (mouseDown) {
       mouseDown = false;
       dragEndX = getX(event);
@@ -476,8 +578,8 @@ Dygraph.prototype.createDragInterface_ = function() {
       if (regionWidth < 2 && regionHeight < 2 &&
           self.attr_('clickCallback') != null &&
           self.lastx_ != undefined) {
-        // TODO(danvk): pass along more info about the point.
-        self.attr_('clickCallback')(event, new Date(self.lastx_));
+        // TODO(danvk): pass along more info about the points.
+        self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
       }
 
       if (regionWidth >= 10) {
@@ -495,7 +597,8 @@ Dygraph.prototype.createDragInterface_ = function() {
   });
 
   // Double-clicking zooms back out
-  connect(this.hidden_, 'ondblclick', this, function(event) {
+  Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
+    if (self.dateWindow_ == null) return;
     self.dateWindow_ = null;
     self.drawGraph_(self.rawData_);
     var minDate = self.rawData_[0][0];
@@ -574,7 +677,7 @@ Dygraph.prototype.doZoom_ = function(lowX, highX) {
  * @private
  */
 Dygraph.prototype.mouseMove_ = function(event) {
-  var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_);
+  var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
   var points = this.layout_.points;
 
   var lastx = -1;
@@ -596,13 +699,17 @@ Dygraph.prototype.mouseMove_ = function(event) {
     lastx = points[points.length-1].xval;
 
   // Extract the points we've selected
-  var selPoints = [];
+  this.selPoints_ = [];
   for (var i = 0; i < points.length; i++) {
     if (points[i].xval == lastx) {
-      selPoints.push(points[i]);
+      this.selPoints_.push(points[i]);
     }
   }
 
+  if (this.attr_("highlightCallback")) {
+    this.attr_("highlightCallback")(event, lastx, this.selPoints_);
+  }
+
   // Clear the previously drawn vertical, if there is one
   var circleSize = this.attr_('highlightCircleSize');
   var ctx = this.canvas_.getContext("2d");
@@ -613,19 +720,20 @@ Dygraph.prototype.mouseMove_ = function(event) {
 
   var isOK = function(x) { return x && !isNaN(x); };
 
-  if (selPoints.length > 0) {
-    var canvasx = selPoints[0].canvasx;
+  if (this.selPoints_.length > 0) {
+    var canvasx = this.selPoints_[0].canvasx;
 
     // Set the status message to indicate the selected point(s)
     var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
     var clen = this.colors_.length;
-    for (var i = 0; i < selPoints.length; i++) {
-      if (!isOK(selPoints[i].canvasy)) continue;
+    for (var i = 0; i < this.selPoints_.length; i++) {
+      if (!isOK(this.selPoints_[i].canvasy)) continue;
       if (this.attr_("labelsSeparateLines")) {
         replace += "<br/>";
       }
-      var point = selPoints[i];
-      replace += " <b><font color='" + this.colors_[i%clen].toHexString() + "'>"
+      var point = this.selPoints_[i];
+      var c = new RGBColor(this.colors_[i%clen]);
+      replace += " <b><font color='" + c.toHex() + "'>"
               + point.name + "</font></b>:"
               + this.round_(point.yval, 2);
     }
@@ -636,11 +744,12 @@ Dygraph.prototype.mouseMove_ = function(event) {
 
     // Draw colored circles over the center of each selected point
     ctx.save()
-    for (var i = 0; i < selPoints.length; i++) {
-      if (!isOK(selPoints[i%clen].canvasy)) continue;
+    for (var i = 0; i < this.selPoints_.length; i++) {
+      if (!isOK(this.selPoints_[i%clen].canvasy)) continue;
       ctx.beginPath();
-      ctx.fillStyle = this.colors_[i%clen].toRGBString();
-      ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
+      ctx.fillStyle = this.colors_[i%clen];
+      ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize,
+              0, 360, false);
       ctx.fill();
     }
     ctx.restore();
@@ -969,7 +1078,7 @@ Dygraph.prototype.addYTicks_ = function(minY, maxY) {
 Dygraph.prototype.extremeValues_ = function(series) {
   var minY = null, maxY = null;
 
-  var bars = this.attr_("errorBars") || this.customBars_;
+  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++) {
@@ -1014,6 +1123,7 @@ Dygraph.prototype.drawGraph_ = function(data) {
   var minY = null, maxY = null;
   this.layout_.removeAllDatasets();
   this.setColors_();
+  this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
 
   // Loop over all fields in the dataset
   for (var i = 1; i < data[0].length; i++) {
@@ -1025,7 +1135,7 @@ Dygraph.prototype.drawGraph_ = function(data) {
     series = this.rollingAverage(series, this.rollPeriod_);
 
     // Prune down to the desired range, if necessary (for zooming)
-    var bars = this.attr_("errorBars") || this.customBars_;
+    var bars = this.attr_("errorBars") || this.attr_("customBars");
     if (this.dateWindow_) {
       var low = this.dateWindow_[0];
       var high= this.dateWindow_[1];
@@ -1142,7 +1252,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
         rollingData[i] = [date, mult * value];
       }
     }
-  } else if (this.customBars_) {
+  } else if (this.attr_("customBars")) {
     var low = 0;
     var mid = 0;
     var high = 0;
@@ -1176,49 +1286,28 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
         return originalData;
       }
 
-      for (var i = 0; i < num_init_points; i++) {
+      for (var i = 0; i < originalData.length; i++) {
         var sum = 0;
-        for (var j = 0; j < i + 1; j++)
-          sum += originalData[j][1];
-        rollingData[i] = [originalData[i][0], sum / (i + 1)];
-      }
-      // Calculate the rolling average for the remaining points
-      for (var i = Math.min(rollPeriod - 1, originalData.length - 2);
-          i < originalData.length;
-          i++) {
-        var sum = 0;
-        for (var j = i - rollPeriod + 1; j < i + 1; j++)
-          sum += originalData[j][1];
-        rollingData[i] = [originalData[i][0], sum / rollPeriod];
-      }
-    } else {
-      for (var i = 0; i < num_init_points; i++) {
-        var sum = 0;
-        var variance = 0;
         var num_ok = 0;
-        for (var j = 0; j < i + 1; j++) {
-          var y = originalData[j][1][0];
+        for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
+          var y = originalData[j][1];
           if (!y || isNaN(y)) continue;
           num_ok++;
-          sum += y;
-          variance += Math.pow(originalData[j][1][1], 2);
+          sum += originalData[j][1];
         }
         if (num_ok) {
-          var stddev = Math.sqrt(variance)/num_ok;
-          rollingData[i] = [originalData[i][0],
-                            [sum/num_ok, sigma * stddev, sigma * stddev]];
+          rollingData[i] = [originalData[i][0], sum / num_ok];
         } else {
-          rollingData[i] = [originalData[i][0], [null, null, null]];
+          rollingData[i] = [originalData[i][0], null];
         }
       }
-      // Calculate the rolling average for the remaining points
-      for (var i = Math.min(rollPeriod - 1, originalData.length - 2);
-          i < originalData.length;
-          i++) {
+
+    } else {
+      for (var i = 0; i < originalData.length; i++) {
         var sum = 0;
         var variance = 0;
         var num_ok = 0;
-        for (var j = i - rollPeriod + 1; j < i + 1; j++) {
+        for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
           var y = originalData[j][1][0];
           if (!y || isNaN(y)) continue;
           num_ok++;
@@ -1321,10 +1410,17 @@ Dygraph.prototype.detectTypeFromString_ = function(str) {
 Dygraph.prototype.parseCSV_ = function(data) {
   var ret = [];
   var lines = data.split("\n");
+
+  // Use the default delimiter or fall back to a tab if that makes sense.
+  var delim = this.attr_('delimiter');
+  if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
+    delim = '\t';
+  }
+
   var start = 0;
   if (this.labelsFromCSV_) {
     start = 1;
-    this.attrs_.labels = lines[0].split(",");
+    this.attrs_.labels = lines[0].split(delim);
   }
 
   var xParser;
@@ -1333,7 +1429,8 @@ Dygraph.prototype.parseCSV_ = function(data) {
   for (var i = start; i < lines.length; i++) {
     var line = lines[i];
     if (line.length == 0) continue;  // skip blank lines
-    var inFields = line.split(',');
+    if (line[0] == '#') continue;    // skip comment lines
+    var inFields = line.split(delim);
     if (inFields.length < 2) continue;
 
     var fields = [];
@@ -1356,7 +1453,7 @@ Dygraph.prototype.parseCSV_ = function(data) {
       for (var j = 1; j < inFields.length; j += 2)
         fields[(j + 1) / 2] = [parseFloat(inFields[j]),
                                parseFloat(inFields[j + 1])];
-    } else if (this.customBars_) {
+    } else if (this.attr_("customBars")) {
       // Bars are a low;center;high tuple
       for (var j = 1; j < inFields.length; j++) {
         var vals = inFields[j].split(";");
@@ -1408,13 +1505,13 @@ Dygraph.prototype.parseArray_ = function(data) {
     }
   }
 
-  if (MochiKit.Base.isDateLike(data[0][0])) {
+  if (Dygraph.isDateLike(data[0][0])) {
     // Some intelligent defaults for a date x-axis.
     this.attrs_.xValueFormatter = Dygraph.dateString_;
     this.attrs_.xTicker = Dygraph.dateTicker;
 
     // Assume they're all dates.
-    var parsedData = MochiKit.Base.clone(data);
+    var parsedData = Dygraph.clone(data);
     for (var i = 0; i < data.length; i++) {
       if (parsedData[i].length == 0) {
         this.error("Row " << (1 + i) << " of data is empty");
@@ -1480,16 +1577,60 @@ Dygraph.prototype.parseDataTable_ = function(data) {
     } else {
       row.push(data.getValue(i, 0));
     }
-    var any_data = false;
     for (var j = 1; j < cols; j++) {
       row.push(data.getValue(i, j));
-      if (data.getValue(i, j)) any_data = true;
     }
-    if (any_data) ret.push(row);
+    ret.push(row);
   }
   return ret;
 }
 
+// These functions are all based on MochiKit.
+Dygraph.update = function (self, o) {
+  if (typeof(o) != 'undefined' && o !== null) {
+    for (var k in o) {
+      self[k] = o[k];
+    }
+  }
+  return self;
+};
+
+Dygraph.isArrayLike = function (o) {
+  var typ = typeof(o);
+  if (
+      (typ != 'object' && !(typ == 'function' && 
+        typeof(o.item) == 'function')) ||
+      o === null ||
+      typeof(o.length) != 'number' ||
+      o.nodeType === 3
+     ) {
+    return false;
+  }
+  return true;
+};
+
+Dygraph.isDateLike = function (o) {
+  if (typeof(o) != "object" || o === null ||
+      typeof(o.getTime) != 'function') {
+    return false;
+  }
+  return true;
+};
+
+Dygraph.clone = function(o) {
+  // TODO(danvk): figure out how MochiKit's version works
+  var r = [];
+  for (var i = 0; i < o.length; i++) {
+    if (Dygraph.isArrayLike(o[i])) {
+      r.push(Dygraph.clone(o[i]));
+    } else {
+      r.push(o[i]);
+    }
+  }
+  return r;
+};
+
+
 /**
  * Get the CSV data. If it's in a function, call that function. If it's in a
  * file, do an XMLHttpRequest to get it.
@@ -1499,7 +1640,7 @@ Dygraph.prototype.start_ = function() {
   if (typeof this.file_ == 'function') {
     // CSV string. Pretend we got it via XHR.
     this.loadedEvent_(this.file_());
-  } else if (MochiKit.Base.isArrayLike(this.file_)) {
+  } else if (Dygraph.isArrayLike(this.file_)) {
     this.rawData_ = this.parseArray_(this.file_);
     this.drawGraph_(this.rawData_);
   } else if (typeof this.file_ == 'object' &&
@@ -1540,9 +1681,6 @@ Dygraph.prototype.start_ = function() {
  */
 Dygraph.prototype.updateOptions = function(attrs) {
   // TODO(danvk): this is a mess. Rethink this function.
-  if (attrs.customBars) {
-    this.customBars_ = attrs.customBars;
-  }
   if (attrs.rollPeriod) {
     this.rollPeriod_ = attrs.rollPeriod;
   }
@@ -1552,7 +1690,7 @@ Dygraph.prototype.updateOptions = function(attrs) {
   if (attrs.valueRange) {
     this.valueRange_ = attrs.valueRange;
   }
-  MochiKit.Base.update(this.user_attrs_, attrs);
+  Dygraph.update(this.user_attrs_, attrs);
 
   this.labelsFromCSV_ = (this.attr_("labels") == null);