return this.__repr__();
};
-/**
- * Formatting to use for an integer number.
- *
- * @param {Number} x The number to format
- * @param {Number} unused_precision The precision to use, ignored.
- * @return {String} A string formatted like %g in printf. The max generated
- * string length should be precision + 6 (e.g 1.123e+300).
- */
-Dygraph.intFormat = function(x, unused_precision) {
- return x.toString();
-}
-
-/**
- * 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,
- * significant figures are not dropped, and normal numbers are not displayed in
- * exponential notation.
- *
- * 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 output 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 + 6 (e.g 1.123e+300).
- */
-Dygraph.floatFormat = 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;
labelsKMG2: false,
showLabelsOnHighlight: true,
- yValueFormatter: function(x, opt_precision) {
- var s = Dygraph.floatFormat(x, opt_precision);
- var s2 = Dygraph.intFormat(x);
- return s.length < s2.length ? s : s2;
- },
+ yValueFormatter: function(a,b) { return Dygraph.numberFormatter(a,b); },
+ digitsAfterDecimal: 2,
+ maxNumberWidth: 6,
strokeWidth: 1.0,
stepPlot: false,
avoidMinZero: false,
+ // Sizes of the various chart labels.
+ titleHeight: 28,
+ xLabelHeight: 18,
+ yLabelWidth: 18,
+
interactionModel: null // will be set to Dygraph.defaultInteractionModel.
};
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;
+ // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
+ this.zoomed_x_ = false;
+ this.zoomed_y_ = false;
// Clear the div. This ensure that, if multiple dygraphs are passed the same
// div, then only one will be drawn.
this.start_();
};
+/**
+ * Returns the zoomed status of the chart for one or both axes.
+ *
+ * Axis is an optional parameter. Can be set to 'x' or 'y'.
+ *
+ * The zoomed status for an axis is set whenever a user zooms using the mouse
+ * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
+ * option is also specified).
+ */
+Dygraph.prototype.isZoomed = function(axis) {
+ if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
+ if (axis == 'x') return this.zoomed_x_;
+ if (axis == 'y') return this.zoomed_y_;
+ throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
+};
+
Dygraph.prototype.toString = function() {
var maindiv = this.maindiv_;
var id = (maindiv && maindiv.id) ? maindiv.id : maindiv
};
/**
- * Position the labels div so that its right edge is flush with the right edge
- * of the charting area.
+ * Position the labels div so that:
+ * - its right edge is flush with the right edge of the charting area
+ * - its top edge is flush with the top edge of the charting area
*/
Dygraph.prototype.positionLabelsDiv_ = function() {
// Don't touch a user-specified labelsDiv.
var area = this.plotter_.area;
var div = this.attr_("labelsDiv");
div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
+ div.style.top = area.y + "px";
};
/**
var display = this.attr_('showRoller') ? 'block' : 'none';
+ var area = this.plotter_.area;
var textAttr = { "position": "absolute",
"zIndex": 10,
- "top": (this.plotter_.area.h - 25) + "px",
- "left": (this.plotter_.area.x + 1) + "px",
+ "top": (area.y + area.h - 25) + "px",
+ "left": (area.x + 1) + "px",
"display": display
};
this.roller_.size = "2";
context.initialLeftmostDate = null;
context.dateRange = null;
context.valueRange = null;
+ context.boundedDates = null;
+ context.boundedValues = null;
}
// Called in response to an interaction model operation that
*/
Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
this.dateWindow_ = [minDate, maxDate];
+ this.zoomed_x_ = true;
this.drawGraph_();
if (this.attr_("zoomCallback")) {
this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
valueRanges.push([low, hi]);
}
+ this.zoomed_y_ = true;
this.drawGraph_();
if (this.attr_("zoomCallback")) {
var xRange = this.xAxisRange();
+ var yRange = this.yAxisRange();
this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges());
}
};
if (dirty) {
// Putting the drawing operation before the callback because it resets
// yAxisRange.
+ this.zoomed_x_ = false;
+ this.zoomed_y_ = false;
this.drawGraph_();
if (this.attr_("zoomCallback")) {
var minDate = this.rawData_[0][0];
return html;
}
- var displayDigits = this.numXDigits_ + this.numExtraDigits_;
- var html = this.attr_('xValueFormatter')(x, displayDigits) + ":";
+ var html = this.attr_('xValueFormatter')(x) + ":";
var fmtFunc = this.attr_('yValueFormatter');
var showZeros = this.attr_("labelsShowZeroValues");
if (sepLines) html += "<br/>";
var c = new RGBColor(this.plotter_.colors[pt.name]);
- var yval = fmtFunc(pt.yval, displayDigits);
+ var yval = fmtFunc(pt.yval, this);
// TODO(danvk): use a template string here and make it an attribute.
html += " <b><font color='" + c.toHex() + "'>"
+ pt.name + "</font></b>:"
}
}
return -1;
-}
+};
Dygraph.zeropad = function(x) {
if (x < 10) return "0" + x; else return "" + x;
-}
+};
+
+/**
+ * Return a string version of a number. This respects the digitsAfterDecimal
+ * and maxNumberWidth options.
+ * @param {Number} x The number to be formatted
+ * @param {Dygraph} g The dygraph object
+ */
+Dygraph.numberFormatter = function(x, g) {
+ var digits = g.attr_('digitsAfterDecimal');
+ var maxNumberWidth = g.attr_('maxNumberWidth');
+
+ if (Math.abs(x) >= Math.pow(10, maxNumberWidth) ||
+ Math.abs(x) < Math.pow(10, -digits)) {
+ // switch to scientific notation.
+ } else {
+ return '' + Dygraph.round_(x, digits);
+ }
+};
/**
* Return a string version of the hours, minutes and seconds portion of a date.
} else {
return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
}
-}
+};
/**
* Convert a JS date to a string appropriate to display on an axis that
return Dygraph.hmsString_(date.getTime());
}
}
-}
+};
/**
* Convert a JS date (millis since epoch) to YYYY/MM/DD
};
/**
+ * Round a number to the specified number of digits past the decimal point.
+ * @param {Number} num The number to round
+ * @param {Number} places The number of decimals to which to round
+ * @return {Number} The rounded number
+ * @private
+ */
+Dygraph.round_ = function(num, places) {
+ var shift = Math.pow(10, places);
+ return Math.round(num * shift)/shift;
+};
+
+/**
* Fires when there's data available to be graphed.
* @param {String} data Raw CSV data to be plotted
* @private
range = [this.rawData_[0][0], this.rawData_[this.rawData_.length - 1][0]];
}
- var formatter = this.attr_('xTicker');
- var ret = formatter(range[0], range[1], this);
- var xTicks = [];
-
- // Note: numericTicks() returns a {ticks: [...], numDigits: yy} dictionary,
- // whereas dateTicker and user-defined tickers typically just return a ticks
- // array.
- if (ret.ticks !== undefined) {
- xTicks = ret.ticks;
- this.numXDigits_ = ret.numDigits;
- } else {
- xTicks = ret;
- }
-
+ var xTicks = this.attr_('xTicker')(range[0], range[1], this);
this.layout_.updateOptions({xTicks: xTicks});
};
if (i % year_mod != 0) continue;
for (var j = 0; j < months.length; j++) {
var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
- var t = Date.parse(date_str);
+ var t = Dygraph.dateStrToMillis(date_str);
if (t < start_time || t > end_time) continue;
ticks.push({ v:t, label: formatter(new Date(t), granularity) });
}
};
/**
- * 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)
* TODO(konigsberg): Update comment.
*
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);
- }
-
// Add labels to the ticks.
for (var i = 0; i < ticks.length; i++) {
if (ticks[i].label !== undefined) continue; // Use current label.
var tickV = ticks[i].v;
var absTickV = Math.abs(tickV);
- var label = (formatter !== undefined) ?
- formatter(tickV, numDigits) : tickV.toPrecision(numDigits);
+ var label = formatter(tickV, self);
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 = formatter(tickV / n, numDigits) + k_labels[j];
+ label = Dygraph.round_(tickV / n, 1) + k_labels[j];
break;
}
}
ticks[i].label = label;
}
- return {ticks: ticks, numDigits: numDigits};
+ return ticks;
};
// Computes the range of the data series (including confidence intervals).
this.layout_.updateOptions( { yAxes: this.axes_,
seriesToAxisMap: this.seriesToAxisMap_
} );
-
this.addXTicks_();
+ // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
+ var tmp_zoomed_x = this.zoomed_x_;
// Tell PlotKit to use this new data and render itself
this.layout_.updateOptions({dateWindow: this.dateWindow_});
+ this.zoomed_x_ = tmp_zoomed_x;
this.layout_.evaluateWithError();
this.plotter_.clear();
this.plotter_.render();
* indices are into the axes_ array.
*/
Dygraph.prototype.computeYAxes_ = function() {
+ var valueWindows;
+ if (this.axes_ != undefined) {
+ // Preserve valueWindow settings.
+ valueWindows = [];
+ for (var index = 0; index < this.axes_.length; index++) {
+ valueWindows.push(this.axes_[index].valueWindow);
+ }
+ }
+
this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
this.seriesToAxisMap_ = {};
if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s];
}
this.seriesToAxisMap_ = seriesToAxisFiltered;
+
+ if (valueWindows != undefined) {
+ // Restore valueWindow settings.
+ for (var index = 0; index < valueWindows.length; index++) {
+ this.axes_[index].valueWindow = valueWindows[index];
+ }
+ }
};
/**
for (var i = 0; i < this.axes_.length; i++) {
var axis = this.axes_[i];
- {
+ if (!seriesForAxis[i]) {
+ // If no series are defined or visible then use a reasonable default
+ axis.extremeRange = [0, 1];
+ } else {
// Calculate the extremes of extremes.
var series = seriesForAxis[i];
var minY = Infinity; // extremes[series[0]][0];
var maxY = -Infinity; // extremes[series[0]][1];
+ var extremeMinY, extremeMaxY;
for (var j = 0; j < series.length; j++) {
- minY = Math.min(extremes[series[j]][0], minY);
- maxY = Math.max(extremes[series[j]][1], maxY);
+ // Only use valid extremes to stop null data series' from corrupting the scale.
+ extremeMinY = extremes[series[j]][0];
+ if (extremeMinY != null) {
+ minY = Math.min(extremeMinY, minY);
+ }
+ extremeMaxY = extremes[series[j]][1];
+ if (extremeMaxY != null) {
+ maxY = Math.max(extremeMaxY, maxY);
+ }
}
if (axis.includeZero && minY > 0) minY = 0;
+ // Ensure we have a valid scale, otherwise defualt to zero for safety.
+ if (minY == Infinity) minY = 0;
+ if (maxY == -Infinity) maxY = 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.
// primary axis. However, if an axis is specifically marked as having
// independent ticks, then that is permissible as well.
if (i == 0 || axis.independentTicks) {
- var ret =
+ axis.ticks =
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;
tick_values.push(y_val);
}
- var ret =
+ axis.ticks =
Dygraph.numericTicks(axis.computedValueRange[0],
axis.computedValueRange[1],
this, axis, tick_values);
- axis.ticks = ret.ticks;
- this.numYDigits_ = ret.numDigits;
}
}
};
while (dateStrSlashed.search("-") != -1) {
dateStrSlashed = dateStrSlashed.replace("-", "/");
}
- d = Date.parse(dateStrSlashed);
+ d = Dygraph.dateStrToMillis(dateStrSlashed);
} else if (dateStr.length == 8) { // e.g. '20090712'
// TODO(danvk): remove support for this format. It's confusing.
dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
+ "/" + dateStr.substr(6,2);
- d = Date.parse(dateStrSlashed);
+ d = Dygraph.dateStrToMillis(dateStrSlashed);
} else {
// Any format that Date.parse will accept, e.g. "2009/07/12" or
// "2009/07/12 12:34:56"
- d = Date.parse(dateStr);
+ d = Dygraph.dateStrToMillis(dateStr);
}
if (!d || isNaN(d)) {
this.attrs_.xTicker = Dygraph.dateTicker;
this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
} else {
- this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
+ 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;
return parsedData;
} else {
// Some intelligent defaults for a numeric x-axis.
- this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
+ this.attrs_.xValueFormatter = function(x) { return x; };
this.attrs_.xTicker = Dygraph.numericTicks;
return data;
}
this.attrs_.xTicker = Dygraph.dateTicker;
this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
} else if (indepType == 'number') {
- this.attrs_.xValueFormatter = this.attrs_.yValueFormatter;
+ 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;
annotations.push(ann);
}
}
+
+ // Strip out infinities, which give dygraphs problems later on.
+ for (var j = 0; j < row.length; j++) {
+ if (!isFinite(row[j])) row[j] = null;
+ }
} else {
for (var j = 0; j < cols - 1; j++) {
row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
outOfOrder = true;
}
-
- // Strip out infinities, which give dygraphs problems later on.
- for (var j = 0; j < row.length; j++) {
- if (!isFinite(row[j])) row[j] = null;
- }
ret.push(row);
}
}
}
+// This is identical to JavaScript's built-in Date.parse() method, except that
+// it doesn't get replaced with an incompatible method by aggressive JS
+// libraries like MooTools or Joomla.
+Dygraph.dateStrToMillis = function(str) {
+ return new Date(str).getTime();
+};
+
// These functions are all based on MochiKit.
Dygraph.update = function (self, o) {
if (typeof(o) != 'undefined' && o !== null) {
* <li>file: changes the source data for the graph</li>
* <li>errorBars: changes whether the data contains stddev</li>
* </ul>
+ *
* @param {Object} attrs The new properties and values
*/
Dygraph.prototype.updateOptions = function(attrs) {
}
if ('dateWindow' in attrs) {
this.dateWindow_ = attrs.dateWindow;
+ if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
+ this.zoomed_x_ = attrs.dateWindow != null;
+ }
+ }
+ if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
+ this.zoomed_y_ = attrs.valueRange != null;
}
// TODO(danvk): validate per-series options.
"sigma": {
"default": "2.0",
"labels": ["Error Bars"],
- "type": "integer",
+ "type": "float",
"description": "When errorBars is set, shade this many standard deviations above/below each point."
},
"customBars": {
"type": "float",
"default": "null",
"description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
+ },
+ "title": {
+ "labels": ["Chart labels"],
+ "type": "string",
+ "default": "null",
+ "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
+ },
+ "titleHeight": {
+ "default": "18",
+ "labels": ["Chart labels"],
+ "type": "integer",
+ "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
+ },
+ "xlabel": {
+ "labels": ["Chart labels"],
+ "type": "string",
+ "default": "null",
+ "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
+ },
+ "xLabelHeight": {
+ "labels": ["Chart labels"],
+ "type": "integer",
+ "default": "18",
+ "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
+ },
+ "ylabel": {
+ "labels": ["Chart labels"],
+ "type": "string",
+ "default": "null",
+ "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
+ },
+ "yLabelWidth": {
+ "labels": ["Chart labels"],
+ "type": "integer",
+ "default": "18",
+ "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
+ },
+ "isZoomedIgnoreProgrammaticZoom" : {
+ "default": "false",
+ "labels": ["Zooming"],
+ "type": "boolean",
+ "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
}
}
; // </JSON>
// NOTE: in addition to parsing as JS, this snippet is expected to be valid
// JSON. This assumption cannot be checked in JS, but it will be checked when
-// documentation is generated by the generate-documentation.py script.
+// documentation is generated by the generate-documentation.py script. For the
+// most part, this just means that you should always use double quotes.
// Do a quick sanity check on the options reference.
(function() {
var valid_cats = [
'Annotations',
'Axis display',
+ 'Chart labels',
'CSV parsing',
'Callbacks',
'Data Line display',
'Legend',
'Overall display',
'Rolling Averages',
- 'Value display/formatting'
+ 'Value display/formatting',
+ 'Zooming'
];
var cats = {};
for (var i = 0; i < valid_cats.length; i++) cats[valid_cats[i]] = true;
projects / dygraphs.git / blobdiff