Merge branch 'master' of https://github.com/danvk/dygraphs
[dygraphs.git] / dygraph.js
index 0d21e42..3b9a98d 100644 (file)
@@ -73,6 +73,46 @@ Dygraph.toString = function() {
   return this.__repr__();
 };
 
+/**
+ * Number formatting function which mimicks the behavior of %g in printf, i.e.
+ * either exponential or fixed format (without trailing 0s) is used depending on
+ * the length of the generated string.  The advantage of this format is that
+ * there is a predictable upper bound on the resulting string length and
+ * significant figures are not dropped.
+ *
+ * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
+ * It creates strings which are too long for absolute values between 10^-4 and
+ * 10^-6.  See tests/number-format.html for examples.
+ *
+ * @param {Number} x The number to format
+ * @param {Number} opt_precision The precision to use, default 2.
+ * @return {String} A string formatted like %g in printf.  The max generated
+ *                  string length should be precision +
+ */
+Dygraph.defaultFormat = function(x, opt_precision) {
+  // Avoid invalid precision values; [1, 21] is the valid range.
+  var p = Math.min(Math.max(1, opt_precision || 2), 21);
+
+  // This is deceptively simple.  The actual algorithm comes from:
+  //
+  // Max allowed length = p + 4
+  // where 4 comes from 'e+n' and '.'.
+  //
+  // Length of fixed format = 2 + y + p
+  // where 2 comes from '0.' and y = # of leading zeroes.
+  //
+  // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
+  // 1.0e-3.
+  //
+  // Since the behavior of toPrecision() is identical for larger numbers, we
+  // don't have to worry about the other bound.
+  //
+  // Finally, the argument for toExponential() is the number of trailing digits,
+  // so we take off 1 for the value before the '.'.
+  return (Math.abs(x) < 1.0e-3 && x != 0.0) ?
+      x.toExponential(p - 1) : x.toPrecision(p);
+};
+
 // Various default values
 Dygraph.DEFAULT_ROLL_PERIOD = 1;
 Dygraph.DEFAULT_WIDTH = 480;
@@ -96,7 +136,7 @@ Dygraph.DEFAULT_ATTRS = {
   labelsKMG2: false,
   showLabelsOnHighlight: true,
 
-  yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
+  yValueFormatter: Dygraph.defaultFormat,
 
   strokeWidth: 1.0,
 
@@ -194,6 +234,20 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
   this.wilsonInterval_ = attrs.wilsonInterval || true;
   this.is_initial_draw_ = true;
   this.annotations_ = [];
+  
+  // Number of digits to use when labeling the x (if numeric) and y axis
+  // ticks.
+  this.numXDigits_ = 2;
+  this.numYDigits_ = 2;
+
+  // When labeling x (if numeric) or y values in the legend, there are
+  // numDigits + numExtraDigits of precision used.  For axes labels with N
+  // digits of precision, the data should be displayed with at least N+1 digits
+  // of precision. The reason for this is to divide each interval between
+  // successive ticks into tenths (for 1) or hundredths (for 2), etc.  For
+  // example, if the labels are [0, 1, 2], we want data to be displayed as
+  // 0.1, 1.3, etc.
+  this.numExtraDigits_ = 1;
 
   // Clear the div. This ensure that, if multiple dygraphs are passed the same
   // div, then only one will be drawn.
@@ -1392,7 +1446,8 @@ Dygraph.prototype.updateSelection_ = function() {
     var canvasx = this.selPoints_[0].canvasx;
 
     // Set the status message to indicate the selected point(s)
-    var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
+    var replace = this.attr_('xValueFormatter')(
+          this.lastx_, this.numXDigits_ + this.numExtraDigits_) + ":";
     var fmtFunc = this.attr_('yValueFormatter');
     var clen = this.colors_.length;
 
@@ -1406,7 +1461,7 @@ Dygraph.prototype.updateSelection_ = function() {
         }
         var point = this.selPoints_[i];
         var c = new RGBColor(this.plotter_.colors[point.name]);
-        var yval = fmtFunc(point.yval);
+        var yval = fmtFunc(point.yval, this.numYDigits_ + this.numExtraDigits_);
         replace += " <b><font color='" + c.toHex() + "'>"
                 + point.name + "</font></b>:"
                 + yval;
@@ -1570,7 +1625,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) {
  * @return {String} A date of the form "YYYY/MM/DD"
  * @private
  */
-Dygraph.dateString_ = function(date, self) {
+Dygraph.dateString_ = function(date) {
   var zeropad = Dygraph.zeropad;
   var d = new Date(date);
 
@@ -1620,17 +1675,18 @@ Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
  */
 Dygraph.prototype.addXTicks_ = function() {
   // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
-  var startDate, endDate;
+  var opts = {xTicks: []};
+  var formatter = this.attr_('xTicker');
   if (this.dateWindow_) {
-    startDate = this.dateWindow_[0];
-    endDate = this.dateWindow_[1];
+    opts.xTicks = formatter(this.dateWindow_[0], this.dateWindow_[1], this);
   } else {
-    startDate = this.rawData_[0][0];
-    endDate   = this.rawData_[this.rawData_.length - 1][0];
+    // numericTicks() returns multiple values.
+    var ret = formatter(this.rawData_[0][0],
+                        this.rawData_[this.rawData_.length - 1][0], this);
+    opts.xTicks = ret.ticks;
+    this.numXDigits_ = ret.numDigits;
   }
-
-  var xTicks = this.attr_('xTicker')(startDate, endDate, this);
-  this.layout_.updateOptions({xTicks: xTicks});
+  this.layout_.updateOptions(opts);
 };
 
 // Time granularity enumeration
@@ -1814,6 +1870,43 @@ Dygraph.dateTicker = function(startDate, endDate, self) {
 };
 
 /**
+ * Determine the number of significant figures in a Number up to the specified
+ * precision.  Note that there is no way to determine if a trailing '0' is
+ * significant or not, so by convention we return 1 for all of the following
+ * inputs: 1, 1.0, 1.00, 1.000 etc.
+ * @param {Number} x The input value.
+ * @param {Number} opt_maxPrecision Optional maximum precision to consider.
+ *                                  Default and maximum allowed value is 13.
+ * @return {Number} The number of significant figures which is >= 1.
+ */
+Dygraph.significantFigures = function(x, opt_maxPrecision) {
+  var precision = Math.max(opt_maxPrecision || 13, 13);
+
+  // Convert the number to its exponential notation form and work backwards,
+  // ignoring the 'e+xx' bit.  This may seem like a hack, but doing a loop and
+  // dividing by 10 leads to roundoff errors.  By using toExponential(), we let
+  // the JavaScript interpreter handle the low level bits of the Number for us.
+  var s = x.toExponential(precision);
+  var ePos = s.lastIndexOf('e');  // -1 case handled by return below.
+
+  for (var i = ePos - 1; i >= 0; i--) {
+    if (s[i] == '.') {
+      // Got to the decimal place.  We'll call this 1 digit of precision because
+      // we can't know for sure how many trailing 0s are significant.
+      return 1;
+    } else if (s[i] != '0') {
+      // Found the first non-zero digit.  Return the number of characters
+      // except for the '.'.
+      return i;  // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
+    }
+  }
+
+  // Occurs if toExponential() doesn't return a string containing 'e', which
+  // should never happen.
+  return 1;
+};
+
+/**
  * Add ticks when the x axis has numbers on it (instead of dates)
  * @param {Number} startDate Start of the date window (millis since epoch)
  * @param {Number} endDate End of the date window (millis since epoch)
@@ -1831,7 +1924,7 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
   var ticks = [];
   if (vals) {
     for (var i = 0; i < vals.length; i++) {
-      ticks.push({v: vals[i]});
+      ticks[i].push({v: vals[i]});
     }
   } else {
     // Basic idea:
@@ -1886,30 +1979,35 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
     k = 1024;
     k_labels = [ "k", "M", "G", "T" ];
   }
-  var formatter = attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter'); 
+  var formatter = attr('yAxisLabelFormatter') ?
+      attr('yAxisLabelFormatter') : attr('yValueFormatter');
+
+  // Determine the number of decimal places needed for the labels below by
+  // taking the maximum number of significant figures for any label.  We must
+  // take the max because we can't tell if trailing 0s are significant.
+  var numDigits = 0;
+  for (var i = 0; i < ticks.length; i++) {
+    numDigits = Math.max(Dygraph.significantFigures(ticks[i].v), numDigits);
+  }
 
   for (var i = 0; i < ticks.length; i++) {
     var tickV = ticks[i].v;
     var absTickV = Math.abs(tickV);
-    var label;
-    if (formatter != undefined) {
-      label = formatter(tickV);
-    } else {
-      label = Dygraph.round_(tickV, 2);
-    }
-    if (k_labels.length) {
+    var label = (formatter !== undefined) ?
+        formatter(tickV, numDigits) : tickV.toPrecision(numDigits);
+    if (k_labels.length > 0) {
       // 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 = Dygraph.round_(tickV / n, 1) + k_labels[j];
+          label = (tickV / n).toPrecision(numDigits) + k_labels[j];
           break;
         }
       }
     }
     ticks[i].label = label;
   }
-  return ticks;
+  return {ticks: ticks, numDigits: numDigits};
 };
 
 // Computes the range of the data series (including confidence intervals).
@@ -2284,11 +2382,13 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
     // primary axis. However, if an axis is specifically marked as having
     // independent ticks, then that is permissible as well.
     if (i == 0 || axis.independentTicks) {
-      axis.ticks =
+      var ret =
         Dygraph.numericTicks(axis.computedValueRange[0],
                              axis.computedValueRange[1],
                              this,
                              axis);
+      axis.ticks = ret.ticks;
+      this.numYDigits_ = ret.numDigits;
     } else {
       var p_axis = this.axes_[0];
       var p_ticks = p_axis.ticks;
@@ -2301,10 +2401,12 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
         tick_values.push(y_val);
       }
 
-      axis.ticks =
+      var ret =
         Dygraph.numericTicks(axis.computedValueRange[0],
                              axis.computedValueRange[1],
                              this, axis, tick_values);
+      axis.ticks = ret.ticks;
+      this.numYDigits_ = ret.numDigits;
     }
   }
 
@@ -2503,7 +2605,7 @@ Dygraph.prototype.detectTypeFromString_ = function(str) {
     this.attrs_.xTicker = Dygraph.dateTicker;
     this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else {
-    this.attrs_.xValueFormatter = function(x) { return x; };
+    this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
     this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
@@ -2666,7 +2768,7 @@ Dygraph.prototype.parseArray_ = function(data) {
     return parsedData;
   } else {
     // Some intelligent defaults for a numeric x-axis.
-    this.attrs_.xValueFormatter = function(x) { return x; };
+    this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
     this.attrs_.xTicker = Dygraph.numericTicks;
     return data;
   }
@@ -2692,7 +2794,7 @@ Dygraph.prototype.parseDataTable_ = function(data) {
     this.attrs_.xTicker = Dygraph.dateTicker;
     this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else if (indepType == 'number') {
-    this.attrs_.xValueFormatter = function(x) { return x; };
+    this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;
     this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;