Dygraph.DEFAULT_HEIGHT = 320;
Dygraph.AXIS_LINE_WIDTH = 0.3;
+
// Default attribute values.
Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
labelsKMG2: false,
showLabelsOnHighlight: true,
- yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
+ yValueFormatter: function(x, opt_numDigits) {
+ return x.toPrecision(Math.min(21, Math.max(1, opt_numDigits || 2)));
+ },
strokeWidth: 1.0,
stepPlot: false,
avoidMinZero: false,
+
+ interactionModel: null // will be set to Dygraph.defaultInteractionModel.
};
// Various logging levels.
/**
* Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
- * and context <canvas> inside of it. See the constructor for details
+ * and context <canvas> inside of it. See the constructor for details.
* on the parameters.
* @param {Element} div the Element to render the graph into.
* @param {String | Function} file Source data
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.
/**
* Returns the current rolling period, as set by the user or an option.
- * @return {Number} The number of days in the rolling window
+ * @return {Number} The number of points in the rolling window
*/
Dygraph.prototype.rollPeriod = function() {
return this.rollPeriod_;
};
-//
-// An attempt at scroll wheel management.
-//
// Based on the article at
// http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
-
Dygraph.cancelEvent = function(e) {
e = e ? e : window.event;
if (e.stopPropagation) {
return false;
}
-
/**
* Generates interface elements for the Dygraph: a containing div, a div to
* display the current point, and a textbox to adjust the rolling average
return Dygraph.pageY(e) - context.py
};
+// Called in response to an interaction model operation that
+// should start the default panning behavior.
+//
+// It's used in the default callback for "mousedown" operations.
+// Custom interaction model builders can use it to provide the default
+// panning behavior.
+//
Dygraph.startPan = function(event, g, context) {
// have to be zoomed in to pan.
+ // TODO(konigsberg): Let's loosen this zoom-to-pan restriction, also
+ // perhaps create panning boundaries? A more flexible pan would make it,
+ // ahem, 'pan-useful'.
var zoomedY = false;
for (var i = 0; i < g.axes_.length; i++) {
if (g.axes_[i].valueWindow || g.axes_[i].valueRange) {
context.draggingDate = (context.dragStartX / g.width_) * context.dateRange + xRange[0];
};
+// Called in response to an interaction model operation that
+// responds to an event that pans the view.
+//
+// It's used in the default callback for "mousemove" operations.
+// Custom interaction model builders can use it to provide the default
+// panning behavior.
+//
Dygraph.movePan = function(event, g, context) {
context.dragEndX = g.dragGetX_(event, context);
context.dragEndY = g.dragGetY_(event, context);
g.drawGraph_();
}
+// Called in response to an interaction model operation that
+// responds to an event that ends panning.
+//
+// It's used in the default callback for "mouseup" operations.
+// Custom interaction model builders can use it to provide the default
+// panning behavior.
+//
Dygraph.endPan = function(event, g, context) {
context.isPanning = false;
context.is2DPan = false;
context.valueRange = null;
}
+// Called in response to an interaction model operation that
+// responds to an event that starts zooming.
+//
+// It's used in the default callback for "mousedown" operations.
+// Custom interaction model builders can use it to provide the default
+// zooming behavior.
+//
Dygraph.startZoom = function(event, g, context) {
context.isZooming = true;
}
+// Called in response to an interaction model operation that
+// responds to an event that defines zoom boundaries.
+//
+// It's used in the default callback for "mousemove" operations.
+// Custom interaction model builders can use it to provide the default
+// zooming behavior.
+//
Dygraph.moveZoom = function(event, g, context) {
context.dragEndX = g.dragGetX_(event, context);
context.dragEndY = g.dragGetY_(event, context);
context.prevDragDirection = context.dragDirection;
}
+// Called in response to an interaction model operation that
+// responds to an event that performs a zoom based on previously defined
+// bounds..
+//
+// It's used in the default callback for "mouseup" operations.
+// Custom interaction model builders can use it to provide the default
+// zooming behavior.
+//
Dygraph.endZoom = function(event, g, context) {
context.isZooming = false;
context.dragEndX = g.dragGetX_(event, context);
context.dragStartY = null;
}
-// Track the beginning of drag events
-Dygraph.prototype.defaultMouseDownFunction = function(event, g, context) {
- context.initializeMouseDown(event, g, context);
+Dygraph.defaultInteractionModel = {
+ // Track the beginning of drag events
+ mousedown: function(event, g, context) {
+ context.initializeMouseDown(event, g, context);
- if (event.altKey || event.shiftKey) {
- Dygraph.startPan(event, g, context);
- } else {
- Dygraph.startZoom(event, g, context);
- }
-};
+ if (event.altKey || event.shiftKey) {
+ Dygraph.startPan(event, g, context);
+ } else {
+ Dygraph.startZoom(event, g, context);
+ }
+ },
-// Draw zoom rectangles when the mouse is down and the user moves around
-Dygraph.prototype.defaultMouseMoveFunction = function(event, g, context) {
- if (context.isZooming) {
- Dygraph.moveZoom(event, g, context);
- } else if (context.isPanning) {
- Dygraph.movePan(event, g, context);
- }
-};
+ // Draw zoom rectangles when the mouse is down and the user moves around
+ mousemove: function(event, g, context) {
+ if (context.isZooming) {
+ Dygraph.moveZoom(event, g, context);
+ } else if (context.isPanning) {
+ Dygraph.movePan(event, g, context);
+ }
+ },
-Dygraph.prototype.defaultMouseUpFunction = function(event, g, context) {
- if (context.isZooming) {
- Dygraph.endZoom(event, g, context);
- } else if (context.isPanning) {
- Dygraph.endPan(event, g, context);
- }
-};
+ mouseup: function(event, g, context) {
+ if (context.isZooming) {
+ Dygraph.endZoom(event, g, context);
+ } else if (context.isPanning) {
+ Dygraph.endPan(event, g, context);
+ }
+ },
-Dygraph.prototype.defaultMouseOutFunction = function(event, g, context) {
// Temporarily cancel the dragging event when the mouse leaves the graph
- if (context.isZooming) {
- context.dragEndX = null;
- context.dragEndY = null;
- }
-};
+ mouseout: function(event, g, context) {
+ if (context.isZooming) {
+ context.dragEndX = null;
+ context.dragEndY = null;
+ }
+ },
-// Double-clicking zooms back out
-Dygraph.prototype.defaultMouseDoubleClickFunction = function(event, g, context) {
// Disable zooming out if panning.
- if (event.altKey || event.shiftKey) {
- return;
+ dblclick: function(event, g, context) {
+ if (event.altKey || event.shiftKey) {
+ return;
+ }
+ // TODO(konigsberg): replace g.doUnzoom()_ with something that is
+ // friendlier to public use.
+ g.doUnzoom_();
}
- g.doUnzoom_();
};
+Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.defaultInteractionModel;
+
/**
* Set up all the mouse handlers needed to capture dragging behavior for zoom
* events.
Dygraph.prototype.createDragInterface_ = function() {
var context = {
// Tracks whether the mouse is down right now
- isZooming : false,
- isPanning : false, // is this drag part of a pan?
- is2DPan : false, // if so, is that pan 1- or 2-dimensional?
- dragStartX : null,
- dragStartY : null,
- dragEndX : null,
- dragEndY : null,
- dragDirection : null,
- prevEndX : null,
- prevEndY : null,
- prevDragDirection : null,
+ isZooming: false,
+ isPanning: false, // is this drag part of a pan?
+ is2DPan: false, // if so, is that pan 1- or 2-dimensional?
+ dragStartX: null,
+ dragStartY: null,
+ dragEndX: null,
+ dragEndY: null,
+ dragDirection: null,
+ prevEndX: null,
+ prevEndY: null,
+ prevDragDirection: null,
// TODO(danvk): update this comment
// draggingDate and draggingValue represent the [date,value] point on the
// graph at which the mouse was pressed. As the mouse moves while panning,
// the viewport must pan so that the mouse position points to
// [draggingDate, draggingValue]
- draggingDate : null,
+ draggingDate: null,
// TODO(danvk): update this comment
// The range in second/value units that the viewport encompasses during a
// panning operation.
- dateRange : null,
+ dateRange: null,
// Utility function to convert page-wide coordinates to canvas coords
- px : 0,
- py : 0,
+ px: 0,
+ py: 0,
- initializeMouseDown : function(event, g, context) {
- // prevents mouse drags from selecting page text.
+ initializeMouseDown: function(event, g, context) {
+ // prevents mouse drags from selecting page text.
if (event.preventDefault) {
event.preventDefault(); // Firefox, Chrome, etc.
} else {
event.returnValue = false; // IE
- event.cancelBubble = true;
+ event.cancelBubble = true;
}
-
+
context.px = Dygraph.findPosX(g.canvas_);
context.py = Dygraph.findPosY(g.canvas_);
context.dragStartX = g.dragGetX_(event, context);
}
};
- // Defines default behavior if there are no event handlers.
- var handlers = this.user_attrs_.interactionModel || {
- 'mousedown' : this.defaultMouseDownFunction,
- 'mousemove' : this.defaultMouseMoveFunction,
- 'mouseup' : this.defaultMouseUpFunction,
- 'mouseout' : this.defaultMouseOutFunction,
- 'dblclick' : this.defaultMouseDoubleClickFunction
- };
+ var interactionModel = this.attr_("interactionModel");
+
+ // Self is the graph.
+ var self = this;
- // Function that binds g and context to the handler.
- var bindHandler = function(handler, g) {
+ // Function that binds the graph and context to the handler.
+ var bindHandler = function(handler) {
return function(event) {
- handler(event, g, context);
+ handler(event, self, context);
};
};
- for (var eventName in handlers) {
+ for (var eventName in interactionModel) {
+ if (!interactionModel.hasOwnProperty(eventName)) continue;
Dygraph.addEvent(this.mouseEventElement_, eventName,
- bindHandler(handlers[eventName], this));
+ bindHandler(interactionModel[eventName]));
}
- // Self is the graph.
- var self = this;
-
// If the user releases the mouse button during a drag, but not over the
// canvas, then it doesn't count as a zooming action.
Dygraph.addEvent(document, 'mouseup', function(event) {
/**
* Draw a gray zoom rectangle over the desired area of the canvas. Also clears
* up any previous zoom rectangles that were drawn. This could be optimized to
- * avoid extra redrawing, but it's tricky to avoid contexts with the status
+ * avoid extra redrawing, but it's tricky to avoid interactions with the status
* dots.
*
* @param {Number} direction the direction of the zoom rectangle. Acceptable
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;
}
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;
* @private
*/
Dygraph.dateAxisFormatter = function(date, granularity) {
- if (granularity >= Dygraph.MONTHLY) {
+ if (granularity >= Dygraph.DECADAL) {
+ return date.strftime('%Y');
+ } else if (granularity >= Dygraph.MONTHLY) {
return date.strftime('%b %y');
} else {
var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
* @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);
};
/**
- * 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
*/
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
Dygraph.BIANNUAL = 17;
Dygraph.ANNUAL = 18;
Dygraph.DECADAL = 19;
-Dygraph.NUM_GRANULARITIES = 20;
+Dygraph.CENTENNIAL = 20;
+Dygraph.NUM_GRANULARITIES = 21;
Dygraph.SHORT_SPACINGS = [];
Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
if (granularity == Dygraph.BIANNUAL) num_months = 2;
if (granularity == Dygraph.ANNUAL) num_months = 1;
if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
+ if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; }
var msInYear = 365.2524 * 24 * 3600 * 1000;
var num_years = 1.0 * (end_time - start_time) / msInYear;
} else if (granularity == Dygraph.DECADAL) {
months = [ 0 ];
year_mod = 10;
+ } else if (granularity == Dygraph.CENTENNIAL) {
+ months = [ 0 ];
+ year_mod = 100;
+ } else {
+ this.warn("Span of dates is too long");
}
var start_year = new Date(start_time).getFullYear();
};
/**
+ * 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)
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:
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).
this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
}
- // TODO(danvk): this method doesn't need to return anything.
- var out = this.computeYAxisRanges_(extremes);
- var axes = out[0];
- var seriesToAxisMap = out[1];
- this.layout_.updateOptions( { yAxes: axes,
- seriesToAxisMap: seriesToAxisMap
+ this.computeYAxisRanges_(extremes);
+ this.layout_.updateOptions( { yAxes: this.axes_,
+ seriesToAxisMap: this.seriesToAxisMap_
} );
this.addXTicks_();
// 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;
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;
}
}
-
- return [this.axes_, this.seriesToAxisMap_];
};
/**
* Note that this is where fractional input (i.e. '5/10') is converted into
* decimal values.
* @param {Array} originalData The data in the appropriate format (see above)
- * @param {Number} rollPeriod The number of days over which to average the data
+ * @param {Number} rollPeriod The number of points over which to average the
+ * data
*/
Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
if (originalData.length < 2)
}
} else {
// Calculate the rolling average for the first rollPeriod - 1 points where
- // there is not enough data to roll over the full number of days
+ // there is not enough data to roll over the full number of points
var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
if (!this.attr_("errorBars")){
if (rollPeriod == 1) {
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;
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;
}
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;
};
/**
- * Adjusts the number of days in the rolling average. Updates the graph to
+ * Adjusts the number of points in the rolling average. Updates the graph to
* reflect the new averaging period.
- * @param {Number} length Number of days over which to average the data.
+ * @param {Number} length Number of points over which to average the data.
*/
Dygraph.prototype.adjustRoll = function(length) {
this.rollPeriod_ = length;
projects / dygraphs.git / blobdiff