notes; stop clipping
[dygraphs.git] / dygraph.js
index a08f668..f8ca478 100644 (file)
@@ -114,7 +114,11 @@ Dygraph.DEFAULT_ATTRS = {
   fractions: false,
   wilsonInterval: true,  // only relevant if fractions is true
   customBars: false,
-  fillGraph: false
+  fillGraph: false,
+  fillAlpha: 0.15,
+
+  stackedGraph: false,
+  hideOverlayOnMouseOut: true
 };
 
 // Various logging levels.
@@ -183,6 +187,12 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
     this.height_ = (this.height_ * self.innerHeight / 100) - 10;
   }
 
+  // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
+  if (attrs['stackedGraph']) {
+    attrs['fillGraph'] = true;
+    // TODO(nikhilk): Add any other stackedGraph checks here.
+  }
+
   // Dygraphs has many options, some of which interact with one another.
   // To keep track of everything, we maintain two sets of options:
   //
@@ -254,6 +264,21 @@ Dygraph.prototype.rollPeriod = function() {
   return this.rollPeriod_;
 };
 
+/**
+ * Returns the currently-visible x-range. This can be affected by zooming,
+ * panning or a call to updateOptions.
+ * Returns a two-element array: [left, right].
+ * If the Dygraph has dates on the x-axis, these will be millis since epoch.
+ */
+Dygraph.prototype.xAxisRange = function() {
+  if (this.dateWindow_) return this.dateWindow_;
+
+  // The entire chart is visible.
+  var left = this.rawData_[0][0];
+  var right = this.rawData_[this.rawData_.length - 1][0];
+  return [left, right];
+};
+
 Dygraph.addEvent = function(el, evt, fn) {
   var normed_fn = function(e) {
     if (!e) var e = window.event;
@@ -335,9 +360,11 @@ Dygraph.prototype.createInterface_ = function() {
  * @private
  */
 Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
-  // var h = document.createElement("canvas");
   var h = Dygraph.createCanvas();
   h.style.position = "absolute";
+  // TODO(danvk): h should be offset from canvas. canvas needs to include
+  // some extra area to make it easier to zoom in on the far left and far
+  // right. h needs to be precisely the plot area, so that clipping occurs.
   h.style.top = canvas.style.top;
   h.style.left = canvas.style.left;
   h.width = this.width_;
@@ -398,8 +425,10 @@ Dygraph.prototype.setColors_ = function() {
     var val = this.attr_('colorValue') || 0.5;
     for (var i = 1; i <= num; i++) {
       if (!this.visibility()[i-1]) continue;
-      var hue = (1.0*i/(1+num));
-      this.colors_.push( Dygraph.hsvToRGB(hue, sat, val) );
+      // alternate colors for high contrast.
+      var idx = i - parseInt(i % 2 ? i / 2 : (i - num)/2, 10);
+      var hue = (1.0 * idx/ (1 + num));
+      this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
     }
   } else {
     for (var i = 0; i < num; i++) {
@@ -416,34 +445,50 @@ Dygraph.prototype.setColors_ = function() {
   Dygraph.update(this.layoutOptions_, this.attrs_);
 }
 
-// The following functions are from quirksmode.org
+/**
+ * Return the list of colors. This is either the list of colors passed in the
+ * attributes, or the autogenerated list of rgb(r,g,b) strings.
+ * @return {Array<string>} The list of colors.
+ */
+Dygraph.prototype.getColors = function() {
+  return this.colors_;
+};
+
+// The following functions are from quirksmode.org with a modification for Safari from
+// http://blog.firetree.net/2005/07/04/javascript-find-position/
 // http://www.quirksmode.org/js/findpos.html
 Dygraph.findPosX = function(obj) {
   var curleft = 0;
-  if (obj.offsetParent) {
-    while (obj.offsetParent) {
+  if(obj.offsetParent)
+    while(1) 
+    {
       curleft += obj.offsetLeft;
+      if(!obj.offsetParent)
+        break;
       obj = obj.offsetParent;
     }
-  }
-  else if (obj.x)
+  else if(obj.x)
     curleft += obj.x;
   return curleft;
 };
 
 Dygraph.findPosY = function(obj) {
   var curtop = 0;
-  if (obj.offsetParent) {
-    while (obj.offsetParent) {
+  if(obj.offsetParent)
+    while(1)
+    {
       curtop += obj.offsetTop;
+      if(!obj.offsetParent)
+        break;
       obj = obj.offsetParent;
     }
-  }
-  else if (obj.y)
+  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
@@ -767,7 +812,24 @@ Dygraph.prototype.mouseMove_ = function(event) {
   }
 
   if (this.attr_("highlightCallback")) {
-    this.attr_("highlightCallback")(event, lastx, this.selPoints_);
+    var px = this.lastHighlightCallbackX;
+    if (px !== null && lastx != px) {
+      // only fire if the selected point has changed.
+      this.lastHighlightCallbackX = lastx;
+      if (!this.attr_("stackedGraph")) {
+        this.attr_("highlightCallback")(event, lastx, this.selPoints_);
+      } else {
+        // "unstack" the points.
+        var callbackPoints = this.selPoints_.map(
+            function(p) { return {xval: p.xval, yval: p.yval, name: p.name} });
+        var cumulative_sum = 0;
+        for (var j = callbackPoints.length - 1; j >= 0; j--) {
+          callbackPoints[j].yval -= cumulative_sum;
+          cumulative_sum += callbackPoints[j].yval;
+        }
+        this.attr_("highlightCallback")(event, lastx, callbackPoints);
+      }
+    }
   }
 
   // Clear the previously drawn vertical, if there is one
@@ -803,7 +865,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
     this.lastx_ = lastx;
 
     // Draw colored circles over the center of each selected point
-    ctx.save()
+    ctx.save();
     for (var i = 0; i < this.selPoints_.length; i++) {
       if (!isOK(this.selPoints_[i%clen].canvasy)) continue;
       ctx.beginPath();
@@ -824,10 +886,12 @@ Dygraph.prototype.mouseMove_ = function(event) {
  * @private
  */
 Dygraph.prototype.mouseOut_ = function(event) {
-  // Get rid of the overlay data
-  var ctx = this.canvas_.getContext("2d");
-  ctx.clearRect(0, 0, this.width_, this.height_);
-  this.attr_("labelsDiv").innerHTML = "";
+  if (this.attr_("hideOverlayOnMouseOut")) {
+    // Get rid of the overlay data
+    var ctx = this.canvas_.getContext("2d");
+    ctx.clearRect(0, 0, this.width_, this.height_);
+    this.attr_("labelsDiv").innerHTML = "";
+  }
 };
 
 Dygraph.zeropad = function(x) {
@@ -847,10 +911,8 @@ Dygraph.prototype.hmsString_ = function(date) {
     return zeropad(d.getHours()) + ":" +
            zeropad(d.getMinutes()) + ":" +
            zeropad(d.getSeconds());
-  } else if (d.getMinutes()) {
-    return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
   } else {
-    return zeropad(d.getHours());
+    return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
   }
 }
 
@@ -1243,7 +1305,12 @@ Dygraph.prototype.drawGraph_ = function(data) {
   this.setColors_();
   this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
 
+  // For stacked series.
+  var cumulative_y = [];
+  var stacked_datasets = [];
+
   // Loop over all fields in the dataset
+
   for (var i = 1; i < data[0].length; i++) {
     if (!this.visibility()[i - 1]) continue;
 
@@ -1261,9 +1328,9 @@ Dygraph.prototype.drawGraph_ = function(data) {
       var high= this.dateWindow_[1];
       var pruned = [];
       for (var k = 0; k < series.length; k++) {
-        if (series[k][0] >= low && series[k][0] <= high) {
+        // if (series[k][0] >= low && series[k][0] <= high) {
           pruned.push(series[k]);
-        }
+        // }
       }
       series = pruned;
     }
@@ -1280,16 +1347,45 @@ Dygraph.prototype.drawGraph_ = function(data) {
         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);
+    } 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;
+
+        actual_y = series[j][1];
+        cumulative_y[series[j][0]] += actual_y;
+
+        vals[j] = [series[j][0], cumulative_y[series[j][0]]]
+
+        if (!maxY || cumulative_y[series[j][0]] > maxY)
+          maxY = cumulative_y[series[j][0]];
+      }
+      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);
     }
   }
 
+  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]);
+    }
+  }
+
   // Use some heuristics to come up with a good maxY value, unless it's been
   // set explicitly by the user.
   if (this.valueRange_ != null) {
     this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
   } else {
+    // This affects the calculation of span, below.
+    if (this.attr_("includeZero") && minY > 0) {
+      minY = 0;
+    }
+
     // Add some padding and round up to an integer to be human-friendly.
     var span = maxY - minY;
     // special case: if we have no sense of scale, use +/-10% of the sole value.
@@ -1318,6 +1414,10 @@ Dygraph.prototype.drawGraph_ = function(data) {
   this.plotter_.render();
   this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
                                          this.canvas_.height);
+
+  if (this.attr_("drawCallback") !== null) {
+    this.attr_("drawCallback")(this);
+  }
 };
 
 /**
@@ -1466,7 +1566,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
 Dygraph.dateParser = function(dateStr, self) {
   var dateStrSlashed;
   var d;
-  if (dateStr.length == 10 && dateStr.search("-") != -1) {  // e.g. '2009-07-12'
+  if (dateStr.search("-") != -1) {  // e.g. '2009-7-12' or '2009-07-12'
     dateStrSlashed = dateStr.replace("-", "/", "g");
     while (dateStrSlashed.search("-") != -1) {
       dateStrSlashed = dateStrSlashed.replace("-", "/");
@@ -1693,7 +1793,7 @@ Dygraph.prototype.parseDataTable_ = function(data) {
   cols = labels.length;
 
   var indepType = data.getColumnType(0);
-  if (indepType == 'date' || 'datetime') {
+  if (indepType == 'date' || indepType == 'datetime') {
     this.attrs_.xValueFormatter = Dygraph.dateString_;
     this.attrs_.xValueParser = Dygraph.dateParser;
     this.attrs_.xTicker = Dygraph.dateTicker;