X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=bdfa1b11660628811328de983dc8cdb42baf153a;hb=1946f7ceb9125de69c2b123567a34590faa4b21f;hp=b4e16e34ffec96318e24585c2446c33c31b31318;hpb=273851096cac891c11a78cf1deb1fd15052fda53;p=dygraphs.git

diff --git a/dygraph.js b/dygraph.js
index b4e16e3..bdfa1b1 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -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);
 };
@@ -178,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);
@@ -191,11 +193,11 @@ 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.attr_("customBars")),
-                          'xOriginIsZero': false };
-  MochiKit.Base.update(this.layoutOptions_, this.attrs_);
-  MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
+  this.layoutOptions_ = { 'xOriginIsZero': false };
+  Dygraph.update(this.layoutOptions_, this.attrs_);
+  Dygraph.update(this.layoutOptions_, this.user_attrs_);
+  Dygraph.update(this.layoutOptions_, {
+    'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
 
   this.layout_ = new DygraphLayout(this, this.layoutOptions_);
 
@@ -203,8 +205,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   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_);
+  Dygraph.update(this.renderOptions_, this.attrs_);
+  Dygraph.update(this.renderOptions_, this.user_attrs_);
   this.plotter_ = new DygraphCanvasRenderer(this,
                                             this.hidden_, this.layout_,
                                             this.renderOptions_);
@@ -291,10 +293,13 @@ Dygraph.prototype.createInterface_ = function() {
   enclosing.appendChild(this.graphDiv);
 
   // Create the canvas for interactive parts of the chart.
-  this.canvas_ = document.createElement("canvas");
+  // this.canvas_ = document.createElement("canvas");
+  this.canvas_ = Dygraph.createCanvas();
   this.canvas_.style.position = "absolute";
   this.canvas_.width = this.width_;
   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.
@@ -317,12 +322,15 @@ Dygraph.prototype.createInterface_ = function() {
  * @private
  */
 Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
-  var h = document.createElement("canvas");
+  // var h = document.createElement("canvas");
+  var h = Dygraph.createCanvas();
   h.style.position = "absolute";
   h.style.top = canvas.style.top;
   h.style.left = canvas.style.left;
   h.width = this.width_;
   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;
 };
@@ -388,9 +396,9 @@ Dygraph.prototype.setColors_ = function() {
 
   // 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
@@ -440,7 +448,7 @@ Dygraph.prototype.createStatusMessage_ = function(){
       "background": "white",
       "textAlign": "left",
       "overflow": "hidden"};
-    MochiKit.Base.update(messagestyle, this.attr_('labelsDivStyles'));
+    Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
     var div = document.createElement("div");
     for (var name in messagestyle) {
       div.style[name] = messagestyle[name];
@@ -576,8 +584,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) {
@@ -596,6 +604,7 @@ Dygraph.prototype.createDragInterface_ = function() {
 
   // Double-clicking zooms back out
   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];
@@ -696,13 +705,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");
@@ -713,18 +726,18 @@ 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];
+      var point = this.selPoints_[i];
       var c = new RGBColor(this.colors_[i%clen]);
       replace += " <b><font color='" + c.toHex() + "'>"
               + point.name + "</font></b>:"
@@ -737,11 +750,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];
-      ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
+      ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize,
+              0, 2 * Math.PI, false);
       ctx.fill();
     }
     ctx.restore();
@@ -1254,16 +1268,20 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
       var y = data[1];
       rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
 
-      low += data[0];
-      mid += y;
-      high += data[2];
-      count += 1;
+      if (y && !isNaN(y)) {
+        low += data[0];
+        mid += y;
+        high += data[2];
+        count += 1;
+      }
       if (i - rollPeriod >= 0) {
         var prev = originalData[i - rollPeriod];
-        low -= prev[1][0];
-        mid -= prev[1][1];
-        high -= prev[1][2];
-        count -= 1;
+        if (prev[1][1] && !isNaN(prev[1][1])) {
+          low -= prev[1][0];
+          mid -= prev[1][1];
+          high -= prev[1][2];
+          count -= 1;
+        }
       }
       rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
                                               1.0 * (mid - low) / count,
@@ -1402,10 +1420,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;
@@ -1414,7 +1439,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 = [];
@@ -1489,13 +1515,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");
@@ -1569,6 +1595,52 @@ Dygraph.prototype.parseDataTable_ = function(data) {
   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.
@@ -1578,7 +1650,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' &&
@@ -1628,7 +1700,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);
 
@@ -1652,6 +1724,21 @@ Dygraph.prototype.adjustRoll = function(length) {
   this.drawGraph_(this.rawData_);
 };
 
+/**
+ * Create a new canvas element. This is more complex than a simple
+ * document.createElement("canvas") because of IE and excanvas.
+ */
+Dygraph.createCanvas = function() {
+  var canvas = document.createElement("canvas");
+
+  isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
+  if (isIE) {
+    canvas = G_vmlCanvasManager.initElement(canvas);
+  }
+
+  return canvas;
+};
+
 
 /**
  * A wrapper around Dygraph that implements the gviz API.