X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=inline;f=dygraph.js;h=4b9b6f143187788bd3376baf132901ce97b3f78f;hb=563c70ca88b5c168b6497955710f4312dfe4a6ac;hp=6369f1143ee7a362dea4347724aae6105381ddd4;hpb=6a1aa64f6d22473e0357ad1cd7bd93259d899a69;p=dygraphs.git
diff --git a/dygraph.js b/dygraph.js
index 6369f11..4b9b6f1 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -3,42 +3,41 @@
/**
* @fileoverview Creates an interactive, zoomable graph based on a CSV file or
- * string. DateGraph can handle multiple series with or without error bars. The
- * date/value ranges will be automatically set. DateGraph uses the
+ * string. Dygraph can handle multiple series with or without error bars. The
+ * date/value ranges will be automatically set. Dygraph uses the
* <canvas> tag, so it only works in FF1.5+.
* @author danvdk@gmail.com (Dan Vanderkam)
Usage:
The CSV file is of the form
+ Date,SeriesA,SeriesB,SeriesC
YYYYMMDD,A1,B1,C1
YYYYMMDD,A2,B2,C2
- If null is passed as the third parameter (series names), then the first line
- of the CSV file is assumed to contain names for each series.
-
If the 'errorBars' option is set in the constructor, the input should be of
the form
+ Date,SeriesA,SeriesB,...
YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
If the 'fractions' option is set, the input should be of the form:
+ Date,SeriesA,SeriesB,...
YYYYMMDD,A1/B1,A2/B2,...
YYYYMMDD,A1/B1,A2/B2,...
And error bars will be calculated automatically using a binomial distribution.
- For further documentation and examples, see http://www/~danvk/dg/
+ For further documentation and examples, see http://www.danvk.org/dygraphs
*/
@@ -48,33 +47,101 @@
* returns this data. The expected format for each line is
* YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
* YYYYMMDD,val1,stddev1,val2,stddev2,...
- * @param {Array.} labels Labels for the data series
* @param {Object} attrs Various other attributes, e.g. errorBars determines
* whether the input data contains error ranges.
*/
-DateGraph = function(div, file, labels, attrs) {
- if (arguments.length > 0)
- this.__init__(div, file, labels, attrs);
+Dygraph = function(div, data, opts) {
+ if (arguments.length > 0) {
+ if (arguments.length == 4) {
+ // Old versions of dygraphs took in the series labels as a constructor
+ // parameter. This doesn't make sense anymore, but it's easy to continue
+ // to support this usage.
+ this.warn("Using deprecated four-argument dygraph constructor");
+ this.__old_init__(div, data, arguments[2], arguments[3]);
+ } else {
+ this.__init__(div, data, opts);
+ }
+ }
};
-DateGraph.NAME = "DateGraph";
-DateGraph.VERSION = "1.1";
-DateGraph.__repr__ = function() {
+Dygraph.NAME = "Dygraph";
+Dygraph.VERSION = "1.2";
+Dygraph.__repr__ = function() {
return "[" + this.NAME + " " + this.VERSION + "]";
};
-DateGraph.toString = function() {
+Dygraph.toString = function() {
return this.__repr__();
};
// Various default values
-DateGraph.DEFAULT_ROLL_PERIOD = 1;
-DateGraph.DEFAULT_WIDTH = 480;
-DateGraph.DEFAULT_HEIGHT = 320;
-DateGraph.DEFAULT_STROKE_WIDTH = 1.0;
-DateGraph.AXIS_LINE_WIDTH = 0.3;
+Dygraph.DEFAULT_ROLL_PERIOD = 1;
+Dygraph.DEFAULT_WIDTH = 480;
+Dygraph.DEFAULT_HEIGHT = 320;
+Dygraph.AXIS_LINE_WIDTH = 0.3;
+
+// Default attribute values.
+Dygraph.DEFAULT_ATTRS = {
+ highlightCircleSize: 3,
+ pixelsPerXLabel: 60,
+ pixelsPerYLabel: 30,
+
+ labelsDivWidth: 250,
+ labelsDivStyles: {
+ // TODO(danvk): move defaults from createStatusMessage_ here.
+ },
+ labelsSeparateLines: false,
+ labelsKMB: false,
+ labelsKMG2: false,
+
+ strokeWidth: 1.0,
+
+ axisTickSize: 3,
+ axisLabelFontSize: 14,
+ xAxisLabelWidth: 50,
+ yAxisLabelWidth: 50,
+ rightGap: 5,
+
+ showRoller: false,
+ xValueFormatter: Dygraph.dateString_,
+ xValueParser: Dygraph.dateParser,
+ xTicker: Dygraph.dateTicker,
+
+ delimiter: ',',
+
+ logScale: false,
+ sigma: 2.0,
+ errorBars: false,
+ fractions: false,
+ wilsonInterval: true, // only relevant if fractions is true
+ customBars: false,
+ fillGraph: false,
+ fillAlpha: 0.15,
+ connectSeparatedPoints: false,
+
+ stackedGraph: false,
+ hideOverlayOnMouseOut: true
+};
+
+// Various logging levels.
+Dygraph.DEBUG = 1;
+Dygraph.INFO = 2;
+Dygraph.WARNING = 3;
+Dygraph.ERROR = 3;
+
+Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
+ // Labels is no longer a constructor parameter, since it's typically set
+ // directly from the data source. It also conains a name for the x-axis,
+ // which the previous constructor form did not.
+ if (labels != null) {
+ var new_labels = ["Date"];
+ for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
+ Dygraph.update(attrs, { 'labels': new_labels });
+ }
+ this.__init__(div, file, attrs);
+};
/**
- * Initializes the DateGraph. This creates a new DIV and constructs the PlotKit
+ * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
* and interaction <canvas> inside of it. See the constructor for details
* on the parameters.
* @param {String | Function} file Source data
@@ -82,171 +149,475 @@ DateGraph.AXIS_LINE_WIDTH = 0.3;
* @param {Object} attrs Miscellaneous other options
* @private
*/
-DateGraph.prototype.__init__ = function(div, file, labels, attrs) {
+Dygraph.prototype.__init__ = function(div, file, attrs) {
+ // Support two-argument constructor
+ if (attrs == null) { attrs = {}; }
+
// Copy the important bits into the object
+ // TODO(danvk): most of these should just stay in the attrs_ dictionary.
this.maindiv_ = div;
- this.labels_ = labels;
this.file_ = file;
- this.rollPeriod_ = attrs.rollPeriod || DateGraph.DEFAULT_ROLL_PERIOD;
+ this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
this.previousVerticalX_ = -1;
- this.width_ = parseInt(div.style.width, 10);
- this.height_ = parseInt(div.style.height, 10);
- this.errorBars_ = attrs.errorBars || false;
this.fractions_ = attrs.fractions || false;
- this.strokeWidth_ = attrs.strokeWidth || DateGraph.DEFAULT_STROKE_WIDTH;
this.dateWindow_ = attrs.dateWindow || null;
this.valueRange_ = attrs.valueRange || null;
- this.labelsSeparateLines = attrs.labelsSeparateLines || false;
- this.labelsDiv_ = attrs.labelsDiv || null;
- this.labelsKMB_ = attrs.labelsKMB || false;
- this.minTickSize_ = attrs.minTickSize || 0;
- this.xValueParser_ = attrs.xValueParser || DateGraph.prototype.dateParser;
- this.xValueFormatter_ = attrs.xValueFormatter ||
- DateGraph.prototype.dateString_;
- this.xTicker_ = attrs.xTicker || DateGraph.prototype.dateTicker;
- this.sigma_ = attrs.sigma || 2.0;
this.wilsonInterval_ = attrs.wilsonInterval || true;
- this.customBars_ = attrs.customBars || false;
- this.attrs_ = attrs;
+ this.is_initial_draw_ = true;
- // Make a note of whether labels will be pulled from the CSV file.
- this.labelsFromCSV_ = (this.labels_ == null);
- if (this.labels_ == null)
- this.labels_ = [];
+ // Clear the div. This ensure that, if multiple dygraphs are passed the same
+ // div, then only one will be drawn.
+ div.innerHTML = "";
- // Prototype of the callback is "void clickCallback(event, date)"
- this.clickCallback_ = attrs.clickCallback || null;
-
- // Prototype of zoom callback is "void dragCallback(minDate, maxDate)"
- this.zoomCallback_ = attrs.zoomCallback || null;
+ // If the div isn't already sized then inherit from our attrs or
+ // give it a default size.
+ if (div.style.width == '') {
+ div.style.width = attrs.width || Dygraph.DEFAULT_WIDTH + "px";
+ }
+ if (div.style.height == '') {
+ div.style.height = attrs.height || Dygraph.DEFAULT_HEIGHT + "px";
+ }
+ this.width_ = parseInt(div.style.width, 10);
+ this.height_ = parseInt(div.style.height, 10);
+ // The div might have been specified as percent of the current window size,
+ // convert that to an appropriate number of pixels.
+ if (div.style.width.indexOf("%") == div.style.width.length - 1) {
+ // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
+ this.width_ = (this.width_ * self.innerWidth / 100) - 10;
+ }
+ if (div.style.height.indexOf("%") == div.style.height.length - 1) {
+ this.height_ = (this.height_ * self.innerHeight / 100) - 10;
+ }
- // Create the containing DIV and other interactive elements
- this.createInterface_();
+ // 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.
+ }
- // Create the PlotKit grapher
- this.layoutOptions_ = { 'errorBars': (this.errorBars_ || this.customBars_),
- 'xOriginIsZero': false };
- MochiKit.Base.update(this.layoutOptions_, attrs);
- this.setColors_(attrs);
+ // Dygraphs has many options, some of which interact with one another.
+ // To keep track of everything, we maintain two sets of options:
+ //
+ // this.user_attrs_ only options explicitly set by the user.
+ // this.attrs_ defaults, options derived from user_attrs_, data.
+ //
+ // Options are then accessed this.attr_('attr'), which first looks at
+ // 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_ = {};
+ Dygraph.update(this.user_attrs_, attrs);
+
+ this.attrs_ = {};
+ Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
+
+ this.boundaryIds_ = [];
- this.layout_ = new DateGraphLayout(this.layoutOptions_);
+ // Make a note of whether labels will be pulled from the CSV file.
+ this.labelsFromCSV_ = (this.attr_("labels") == null);
- this.renderOptions_ = { colorScheme: this.colors_,
- strokeColor: null,
- strokeWidth: this.strokeWidth_,
- axisLabelFontSize: 14,
- axisLineWidth: DateGraph.AXIS_LINE_WIDTH };
- MochiKit.Base.update(this.renderOptions_, attrs);
- this.plotter_ = new DateGraphCanvasRenderer(this.hidden_, this.layout_,
- this.renderOptions_);
+ // Create the containing DIV and other interactive elements
+ this.createInterface_();
- this.createStatusMessage_();
- this.createRollInterface_();
- this.createDragInterface_();
+ this.start_();
+};
- MochiKit.DOM.addLoadEvent(this.start_());
+Dygraph.prototype.attr_ = function(name) {
+ if (typeof(this.user_attrs_[name]) != 'undefined') {
+ return this.user_attrs_[name];
+ } else if (typeof(this.attrs_[name]) != 'undefined') {
+ return this.attrs_[name];
+ } else {
+ return null;
+ }
};
+// TODO(danvk): any way I can get the line numbers to be this.warn call?
+Dygraph.prototype.log = function(severity, message) {
+ if (typeof(console) != 'undefined') {
+ switch (severity) {
+ case Dygraph.DEBUG:
+ console.debug('dygraphs: ' + message);
+ break;
+ case Dygraph.INFO:
+ console.info('dygraphs: ' + message);
+ break;
+ case Dygraph.WARNING:
+ console.warn('dygraphs: ' + message);
+ break;
+ case Dygraph.ERROR:
+ console.error('dygraphs: ' + message);
+ break;
+ }
+ }
+}
+Dygraph.prototype.info = function(message) {
+ this.log(Dygraph.INFO, message);
+}
+Dygraph.prototype.warn = function(message) {
+ this.log(Dygraph.WARNING, message);
+}
+Dygraph.prototype.error = function(message) {
+ this.log(Dygraph.ERROR, message);
+}
+
/**
* Returns the current rolling period, as set by the user or an option.
* @return {Number} The number of days in the rolling window
*/
-DateGraph.prototype.rollPeriod = function() {
+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];
+};
+
+/**
+ * Returns the currently-visible y-range. This can be affected by zooming,
+ * panning or a call to updateOptions.
+ * Returns a two-element array: [bottom, top].
+ */
+Dygraph.prototype.yAxisRange = function() {
+ return this.displayedYRange_;
+};
/**
- * Generates interface elements for the DateGraph: a containing div, a div to
+ * Convert from data coordinates to canvas/div X/Y coordinates.
+ * Returns a two-element array: [X, Y]
+ */
+Dygraph.prototype.toDomCoords = function(x, y) {
+ var ret = [null, null];
+ var area = this.plotter_.area;
+ if (x !== null) {
+ var xRange = this.xAxisRange();
+ ret[0] = area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
+ }
+
+ if (y !== null) {
+ var yRange = this.yAxisRange();
+ ret[1] = area.y + (yRange[1] - y) / (yRange[1] - yRange[0]) * area.h;
+ }
+
+ return ret;
+};
+
+// TODO(danvk): use these functions throughout dygraphs.
+/**
+ * Convert from canvas/div coords to data coordinates.
+ * Returns a two-element array: [X, Y]
+ */
+Dygraph.prototype.toDataCoords = function(x, y) {
+ var ret = [null, null];
+ var area = this.plotter_.area;
+ if (x !== null) {
+ var xRange = this.xAxisRange();
+ ret[0] = xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
+ }
+
+ if (y !== null) {
+ var yRange = this.yAxisRange();
+ ret[1] = yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
+ }
+
+ return ret;
+};
+
+Dygraph.addEvent = function(el, evt, fn) {
+ var normed_fn = function(e) {
+ if (!e) var e = window.event;
+ fn(e);
+ };
+ if (window.addEventListener) { // Mozilla, Netscape, Firefox
+ el.addEventListener(evt, normed_fn, false);
+ } else { // IE
+ el.attachEvent('on' + evt, normed_fn);
+ }
+};
+
+Dygraph.clipCanvas_ = function(cnv, clip) {
+ var ctx = cnv.getContext("2d");
+ ctx.beginPath();
+ ctx.rect(clip.left, clip.top, clip.width, clip.height);
+ ctx.clip();
+};
+
+/**
+ * Generates interface elements for the Dygraph: a containing div, a div to
* display the current point, and a textbox to adjust the rolling average
- * period.
+ * period. Also creates the Renderer/Layout elements.
* @private
*/
-DateGraph.prototype.createInterface_ = function() {
+Dygraph.prototype.createInterface_ = function() {
// Create the all-enclosing graph div
var enclosing = this.maindiv_;
- this.graphDiv = MochiKit.DOM.DIV( { style: { 'width': this.width_ + "px",
- 'height': this.height_ + "px"
- }});
- appendChildNodes(enclosing, this.graphDiv);
+ this.graphDiv = document.createElement("div");
+ this.graphDiv.style.width = this.width_ + "px";
+ this.graphDiv.style.height = this.height_ + "px";
+ enclosing.appendChild(this.graphDiv);
+
+ var clip = {
+ top: 0,
+ left: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
+ };
+ clip.width = this.width_ - clip.left - this.attr_("rightGap");
+ clip.height = this.height_ - this.attr_("axisLabelFontSize")
+ - 2 * this.attr_("axisTickSize");
+ this.clippingArea_ = clip;
+
+ // Create the canvas for interactive parts of the chart.
+ 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.
+ this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
- // Create the canvas to store
- var canvas = MochiKit.DOM.CANVAS;
- this.canvas_ = canvas( { style: { 'position': 'absolute' },
- width: this.width_,
- height: this.height_});
- appendChildNodes(this.graphDiv, this.canvas_);
+ // Make sure we don't overdraw.
+ Dygraph.clipCanvas_(this.hidden_, this.clippingArea_);
+ Dygraph.clipCanvas_(this.canvas_, this.clippingArea_);
- this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
- connect(this.hidden_, 'onmousemove', this, function(e) { this.mouseMove_(e) });
- connect(this.hidden_, 'onmouseout', this, function(e) { this.mouseOut_(e) });
-}
+ var dygraph = this;
+ Dygraph.addEvent(this.hidden_, 'mousemove', function(e) {
+ dygraph.mouseMove_(e);
+ });
+ Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
+ dygraph.mouseOut_(e);
+ });
+
+ // Create the grapher
+ // TODO(danvk): why does the Layout need its own set of options?
+ 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_);
+
+ // TODO(danvk): why does the Renderer need its own set of options?
+ this.renderOptions_ = { colorScheme: this.colors_,
+ strokeColor: null,
+ axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
+ Dygraph.update(this.renderOptions_, this.attrs_);
+ Dygraph.update(this.renderOptions_, this.user_attrs_);
+ this.plotter_ = new DygraphCanvasRenderer(this,
+ this.hidden_, this.layout_,
+ this.renderOptions_);
+
+ this.createStatusMessage_();
+ this.createRollInterface_();
+ this.createDragInterface_();
+};
+
+/**
+ * Detach DOM elements in the dygraph and null out all data references.
+ * Calling this when you're done with a dygraph can dramatically reduce memory
+ * usage. See, e.g., the tests/perf.html example.
+ */
+Dygraph.prototype.destroy = function() {
+ var removeRecursive = function(node) {
+ while (node.hasChildNodes()) {
+ removeRecursive(node.firstChild);
+ node.removeChild(node.firstChild);
+ }
+ };
+ removeRecursive(this.maindiv_);
+
+ var nullOut = function(obj) {
+ for (var n in obj) {
+ if (typeof(obj[n]) === 'object') {
+ obj[n] = null;
+ }
+ }
+ };
+
+ // These may not all be necessary, but it can't hurt...
+ nullOut(this.layout_);
+ nullOut(this.plotter_);
+ nullOut(this);
+};
/**
* Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
- * this particular canvas. All DateGraph work is done on this.canvas_.
- * @param {Object} canvas The DateGraph canvas to over which to overlay the plot
+ * this particular canvas. All Dygraph work is done on this.canvas_.
+ * @param {Object} canvas The Dygraph canvas over which to overlay the plot
* @return {Object} The newly-created canvas
* @private
*/
-DateGraph.prototype.createPlotKitCanvas_ = function(canvas) {
- var h = document.createElement("canvas");
+Dygraph.prototype.createPlotKitCanvas_ = function(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_;
h.height = this.height_;
- MochiKit.DOM.appendChildNodes(this.graphDiv, h);
+ h.style.width = this.width_ + "px"; // for IE
+ h.style.height = this.height_ + "px"; // for IE
+ this.graphDiv.appendChild(h);
return h;
};
+// Taken from MochiKit.Color
+Dygraph.hsvToRGB = function (hue, saturation, value) {
+ var red;
+ var green;
+ var blue;
+ if (saturation === 0) {
+ red = value;
+ green = value;
+ blue = value;
+ } else {
+ var i = Math.floor(hue * 6);
+ var f = (hue * 6) - i;
+ var p = value * (1 - saturation);
+ var q = value * (1 - (saturation * f));
+ var t = value * (1 - (saturation * (1 - f)));
+ switch (i) {
+ case 1: red = q; green = value; blue = p; break;
+ case 2: red = p; green = value; blue = t; break;
+ case 3: red = p; green = q; blue = value; break;
+ case 4: red = t; green = p; blue = value; break;
+ case 5: red = value; green = p; blue = q; break;
+ case 6: // fall through
+ case 0: red = value; green = t; blue = p; break;
+ }
+ }
+ red = Math.floor(255 * red + 0.5);
+ green = Math.floor(255 * green + 0.5);
+ blue = Math.floor(255 * blue + 0.5);
+ return 'rgb(' + red + ',' + green + ',' + blue + ')';
+};
+
+
/**
* Generate a set of distinct colors for the data series. This is done with a
* color wheel. Saturation/Value are customizable, and the hue is
* equally-spaced around the color wheel. If a custom set of colors is
* specified, that is used instead.
- * @param {Object} attrs Various attributes, e.g. saturation and value
* @private
*/
-DateGraph.prototype.setColors_ = function(attrs) {
- var num = this.labels_.length;
+Dygraph.prototype.setColors_ = function() {
+ // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
+ // away with this.renderOptions_.
+ var num = this.attr_("labels").length - 1;
this.colors_ = [];
- if (!attrs.colors) {
- var sat = attrs.colorSaturation || 1.0;
- var val = attrs.colorValue || 0.5;
+ var colors = this.attr_('colors');
+ if (!colors) {
+ var sat = this.attr_('colorSaturation') || 1.0;
+ var val = this.attr_('colorValue') || 0.5;
for (var i = 1; i <= num; i++) {
- var hue = (1.0*i/(1+num));
- this.colors_.push( MochiKit.Color.Color.fromHSV(hue, sat, val) );
+ if (!this.visibility()[i-1]) continue;
+ // 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++) {
- var colorStr = attrs.colors[i % attrs.colors.length];
- this.colors_.push( MochiKit.Color.Color.fromString(colorStr) );
+ if (!this.visibility()[i]) continue;
+ var colorStr = colors[i % colors.length];
+ this.colors_.push(colorStr);
}
}
+
+ // TODO(danvk): update this w/r/t/ the new options system.
+ this.renderOptions_.colorScheme = this.colors_;
+ Dygraph.update(this.plotter_.options, this.renderOptions_);
+ Dygraph.update(this.layoutOptions_, this.user_attrs_);
+ Dygraph.update(this.layoutOptions_, this.attrs_);
}
/**
+ * 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} 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(1)
+ {
+ curleft += obj.offsetLeft;
+ if(!obj.offsetParent)
+ break;
+ obj = obj.offsetParent;
+ }
+ else if(obj.x)
+ curleft += obj.x;
+ return curleft;
+};
+
+Dygraph.findPosY = function(obj) {
+ var curtop = 0;
+ if(obj.offsetParent)
+ while(1)
+ {
+ curtop += obj.offsetTop;
+ if(!obj.offsetParent)
+ break;
+ obj = obj.offsetParent;
+ }
+ 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
* been specified.
* @private
*/
-DateGraph.prototype.createStatusMessage_ = function(){
- if (!this.labelsDiv_) {
- var divWidth = 250;
- var messagestyle = { "style": {
+Dygraph.prototype.createStatusMessage_ = function(){
+ if (!this.attr_("labelsDiv")) {
+ var divWidth = this.attr_('labelsDivWidth');
+ var messagestyle = {
"position": "absolute",
"fontSize": "14px",
"zIndex": 10,
"width": divWidth + "px",
"top": "0px",
- "left": this.width_ - divWidth + "px",
+ "left": (this.width_ - divWidth - 2) + "px",
"background": "white",
"textAlign": "left",
- "overflow": "hidden"}};
- this.labelsDiv_ = MochiKit.DOM.DIV(messagestyle);
- MochiKit.DOM.appendChildNodes(this.graphDiv, this.labelsDiv_);
+ "overflow": "hidden"};
+ Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
+ var div = document.createElement("div");
+ for (var name in messagestyle) {
+ if (messagestyle.hasOwnProperty(name)) {
+ div.style[name] = messagestyle[name];
+ }
+ }
+ this.graphDiv.appendChild(div);
+ this.attrs_.labelsDiv = div;
}
};
@@ -255,77 +626,140 @@ DateGraph.prototype.createStatusMessage_ = function(){
* @return {Object} The newly-created text box
* @private
*/
-DateGraph.prototype.createRollInterface_ = function() {
- var padding = this.plotter_.options.padding;
- var textAttr = { "type": "text",
- "size": "2",
- "value": this.rollPeriod_,
- "style": { "position": "absolute",
- "zIndex": 10,
- "top": (this.height_ - 25 - padding.bottom) + "px",
- "left": (padding.left+1) + "px" }
+Dygraph.prototype.createRollInterface_ = function() {
+ var display = this.attr_('showRoller') ? "block" : "none";
+ var textAttr = { "position": "absolute",
+ "zIndex": 10,
+ "top": (this.plotter_.area.h - 25) + "px",
+ "left": (this.plotter_.area.x + 1) + "px",
+ "display": display
};
- var roller = MochiKit.DOM.INPUT(textAttr);
+ var roller = document.createElement("input");
+ roller.type = "text";
+ roller.size = "2";
+ roller.value = this.rollPeriod_;
+ for (var name in textAttr) {
+ if (textAttr.hasOwnProperty(name)) {
+ roller.style[name] = textAttr[name];
+ }
+ }
+
var pa = this.graphDiv;
- MochiKit.DOM.appendChildNodes(pa, roller);
- connect(roller, 'onchange', this,
- function() { this.adjustRoll(roller.value); });
+ pa.appendChild(roller);
+ var dygraph = this;
+ roller.onchange = function() { dygraph.adjustRoll(roller.value); };
return roller;
-}
+};
+
+// These functions are taken from MochiKit.Signal
+Dygraph.pageX = function(e) {
+ if (e.pageX) {
+ return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
+ } else {
+ var de = document;
+ var b = document.body;
+ return e.clientX +
+ (de.scrollLeft || b.scrollLeft) -
+ (de.clientLeft || 0);
+ }
+};
+
+Dygraph.pageY = function(e) {
+ if (e.pageY) {
+ return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
+ } else {
+ var de = document;
+ var b = document.body;
+ return e.clientY +
+ (de.scrollTop || b.scrollTop) -
+ (de.clientTop || 0);
+ }
+};
/**
* Set up all the mouse handlers needed to capture dragging behavior for zoom
- * events. Uses MochiKit.Signal to attach all the event handlers.
+ * events.
* @private
*/
-DateGraph.prototype.createDragInterface_ = function() {
+Dygraph.prototype.createDragInterface_ = function() {
var self = this;
// Tracks whether the mouse is down right now
- var mouseDown = false;
+ var isZooming = false;
+ var isPanning = false;
var dragStartX = null;
var dragStartY = null;
var dragEndX = null;
var dragEndY = null;
var prevEndX = null;
+ var draggingDate = null;
+ var dateRange = null;
// Utility function to convert page-wide coordinates to canvas coords
- var px = PlotKit.Base.findPosX(this.canvas_);
- var py = PlotKit.Base.findPosY(this.canvas_);
- var getX = function(e) { return e.mouse().page.x - px };
- var getY = function(e) { return e.mouse().page.y - py };
+ var px = 0;
+ var py = 0;
+ var getX = function(e) { return Dygraph.pageX(e) - px };
+ var getY = function(e) { return Dygraph.pageX(e) - py };
// Draw zoom rectangles when the mouse is down and the user moves around
- connect(this.hidden_, 'onmousemove', function(event) {
- if (mouseDown) {
+ Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
+ if (isZooming) {
dragEndX = getX(event);
dragEndY = getY(event);
self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
prevEndX = dragEndX;
+ } else if (isPanning) {
+ dragEndX = getX(event);
+ dragEndY = getY(event);
+
+ // Want to have it so that:
+ // 1. draggingDate appears at dragEndX
+ // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
+
+ self.dateWindow_[0] = draggingDate - (dragEndX / self.width_) * dateRange;
+ self.dateWindow_[1] = self.dateWindow_[0] + dateRange;
+ self.drawGraph_(self.rawData_);
}
});
// Track the beginning of drag events
- connect(this.hidden_, 'onmousedown', function(event) {
- mouseDown = true;
+ Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
+ px = Dygraph.findPosX(self.canvas_);
+ py = Dygraph.findPosY(self.canvas_);
dragStartX = getX(event);
dragStartY = getY(event);
+
+ if (event.altKey || event.shiftKey) {
+ if (!self.dateWindow_) return; // have to be zoomed in to pan.
+ isPanning = true;
+ dateRange = self.dateWindow_[1] - self.dateWindow_[0];
+ draggingDate = (dragStartX / self.width_) * dateRange +
+ self.dateWindow_[0];
+ } else {
+ isZooming = true;
+ }
});
// If the user releases the mouse button during a drag, but not over the
// canvas, then it doesn't count as a zooming action.
- connect(document, 'onmouseup', this, function(event) {
- if (mouseDown) {
- mouseDown = false;
+ Dygraph.addEvent(document, 'mouseup', function(event) {
+ if (isZooming || isPanning) {
+ isZooming = false;
dragStartX = null;
dragStartY = null;
}
+
+ if (isPanning) {
+ isPanning = false;
+ draggingDate = null;
+ dateRange = null;
+ }
});
// Temporarily cancel the dragging event when the mouse leaves the graph
- connect(this.hidden_, 'onmouseout', this, function(event) {
- if (mouseDown) {
+ Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
+ if (isZooming) {
dragEndX = null;
dragEndY = null;
}
@@ -333,18 +767,19 @@ DateGraph.prototype.createDragInterface_ = function() {
// If the mouse is released on the canvas during a drag event, then it's a
// zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
- connect(this.hidden_, 'onmouseup', this, function(event) {
- if (mouseDown) {
- mouseDown = false;
+ Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
+ if (isZooming) {
+ isZooming = false;
dragEndX = getX(event);
dragEndY = getY(event);
var regionWidth = Math.abs(dragEndX - dragStartX);
var regionHeight = Math.abs(dragEndY - dragStartY);
if (regionWidth < 2 && regionHeight < 2 &&
- self.clickCallback_ != null &&
+ self.attr_('clickCallback') != null &&
self.lastx_ != undefined) {
- self.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) {
@@ -359,15 +794,24 @@ DateGraph.prototype.createDragInterface_ = function() {
dragStartX = null;
dragStartY = null;
}
+
+ if (isPanning) {
+ isPanning = false;
+ draggingDate = null;
+ dateRange = null;
+ }
});
// Double-clicking zooms back out
- connect(this.hidden_, 'ondblclick', this, function(event) {
+ 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];
var maxDate = self.rawData_[self.rawData_.length - 1][0];
- self.zoomCallback_(minDate, maxDate);
+ if (self.attr_("zoomCallback")) {
+ self.attr_("zoomCallback")(minDate, maxDate);
+ }
});
};
@@ -383,7 +827,7 @@ DateGraph.prototype.createDragInterface_ = function() {
* function. Used to avoid excess redrawing
* @private
*/
-DateGraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
+Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
var ctx = this.canvas_.getContext("2d");
// Clean up from the previous rect if necessary
@@ -408,25 +852,18 @@ DateGraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
* @param {Number} highX The rightmost pixel value that should be visible.
* @private
*/
-DateGraph.prototype.doZoom_ = function(lowX, highX) {
+Dygraph.prototype.doZoom_ = function(lowX, highX) {
// Find the earliest and latest dates contained in this canvasx range.
- var points = this.layout_.points;
- var minDate = null;
- var maxDate = null;
- // Find the nearest [minDate, maxDate] that contains [lowX, highX]
- for (var i = 0; i < points.length; i++) {
- var cx = points[i].canvasx;
- var x = points[i].xval;
- if (cx < lowX && (minDate == null || x > minDate)) minDate = x;
- if (cx > highX && (maxDate == null || x < maxDate)) maxDate = x;
- }
- // Use the extremes if either is missing
- if (minDate == null) minDate = points[0].xval;
- if (maxDate == null) maxDate = points[points.length-1].xval;
+ var r = this.toDataCoords(lowX, null);
+ var minDate = r[0];
+ r = this.toDataCoords(highX, null);
+ var maxDate = r[0];
this.dateWindow_ = [minDate, maxDate];
this.drawGraph_(this.rawData_);
- this.zoomCallback_(minDate, maxDate);
+ if (this.attr_("zoomCallback")) {
+ this.attr_("zoomCallback")(minDate, maxDate);
+ }
};
/**
@@ -436,8 +873,8 @@ DateGraph.prototype.doZoom_ = function(lowX, highX) {
* @param {Object} event The mousemove event from the browser.
* @private
*/
-DateGraph.prototype.mouseMove_ = function(event) {
- var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_);
+Dygraph.prototype.mouseMove_ = function(event) {
+ var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
var points = this.layout_.points;
var lastx = -1;
@@ -449,7 +886,7 @@ DateGraph.prototype.mouseMove_ = function(event) {
var idx = -1;
for (var i = 0; i < points.length; i++) {
var dist = Math.abs(points[i].canvasx - canvasx);
- if (dist > minDist) break;
+ if (dist > minDist) continue;
minDist = dist;
idx = i;
}
@@ -459,47 +896,83 @@ DateGraph.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")) {
+ 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);
+ }
}
}
+ // Save last x position for callbacks.
+ this.lastx_ = lastx;
+
+ this.updateSelection_();
+};
+
+/**
+ * Draw dots over the selectied points in the data series. This function
+ * takes care of cleanup of previously-drawn dots.
+ * @private
+ */
+Dygraph.prototype.updateSelection_ = function() {
// Clear the previously drawn vertical, if there is one
- var circleSize = 3;
+ var circleSize = this.attr_('highlightCircleSize');
var ctx = this.canvas_.getContext("2d");
if (this.previousVerticalX_ >= 0) {
var px = this.previousVerticalX_;
ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
}
- if (selPoints.length > 0) {
- var canvasx = selPoints[0].canvasx;
+ var isOK = function(x) { return x && !isNaN(x); };
+
+ if (this.selPoints_.length > 0) {
+ var canvasx = this.selPoints_[0].canvasx;
// Set the status message to indicate the selected point(s)
- var replace = this.xValueFormatter_(lastx) + ":";
+ var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
var clen = this.colors_.length;
- for (var i = 0; i < selPoints.length; i++) {
- if (this.labelsSeparateLines) {
+ for (var i = 0; i < this.selPoints_.length; i++) {
+ if (!isOK(this.selPoints_[i].canvasy)) continue;
+ if (this.attr_("labelsSeparateLines")) {
replace += " ";
}
- var point = selPoints[i];
- replace += " "
+ var point = this.selPoints_[i];
+ var c = new RGBColor(this.plotter_.colors[point.name]);
+ replace += " "
+ point.name + ":"
+ this.round_(point.yval, 2);
}
- this.labelsDiv_.innerHTML = replace;
-
- // Save last x position for callbacks.
- this.lastx_ = lastx;
+ this.attr_("labelsDiv").innerHTML = replace;
// Draw colored circles over the center of each selected point
- ctx.save()
- for (var i = 0; i < selPoints.length; i++) {
+ ctx.save();
+ for (var i = 0; i < this.selPoints_.length; i++) {
+ if (!isOK(this.selPoints_[i].canvasy)) continue;
ctx.beginPath();
- ctx.fillStyle = this.colors_[i%clen].toRGBString();
- ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
+ ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
+ ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
+ 0, 2 * Math.PI, false);
ctx.fill();
}
ctx.restore();
@@ -509,36 +982,126 @@ DateGraph.prototype.mouseMove_ = function(event) {
};
/**
+ * Set manually set selected dots, and display information about them
+ * @param int row number that should by highlighted
+ * false value clears the selection
+ * @public
+ */
+Dygraph.prototype.setSelection = function(row) {
+ // Extract the points we've selected
+ this.selPoints_ = [];
+ var pos = 0;
+
+ if (row !== false) {
+ row = row-this.boundaryIds_[0][0];
+ }
+
+ if (row !== false && row >= 0) {
+ for (var i in this.layout_.datasets) {
+ if (row < this.layout_.datasets[i].length) {
+ this.selPoints_.push(this.layout_.points[pos+row]);
+ }
+ pos += this.layout_.datasets[i].length;
+ }
+ }
+
+ if (this.selPoints_.length) {
+ this.lastx_ = this.selPoints_[0].xval;
+ this.updateSelection_();
+ } else {
+ this.lastx_ = -1;
+ this.clearSelection();
+ }
+
+};
+
+/**
* The mouse has left the canvas. Clear out whatever artifacts remain
* @param {Object} event the mouseout event from the browser.
* @private
*/
-DateGraph.prototype.mouseOut_ = function(event) {
+Dygraph.prototype.mouseOut_ = function(event) {
+ if (this.attr_("hideOverlayOnMouseOut")) {
+ this.clearSelection();
+ }
+};
+
+/**
+ * Remove all selection from the canvas
+ * @public
+ */
+Dygraph.prototype.clearSelection = function() {
// Get rid of the overlay data
var ctx = this.canvas_.getContext("2d");
ctx.clearRect(0, 0, this.width_, this.height_);
- this.labelsDiv_.innerHTML = "";
-};
+ this.attr_("labelsDiv").innerHTML = "";
+ this.selPoints_ = [];
+ this.lastx_ = -1;
+}
+
+/**
+ * Returns the number of the currently selected row
+ * @return int row number, of -1 if nothing is selected
+ * @public
+ */
+Dygraph.prototype.getSelection = function() {
+ if (!this.selPoints_ || this.selPoints_.length < 1) {
+ return -1;
+ }
+
+ for (var row=0; row= Dygraph.DAILY) {
+ // the extra hour covers DST problems.
+ ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
+ } else {
+ ticks.push({ v:t, label: this.hmsString_(t) });
+ }
+ }
+ } else {
+ // Display a tick mark on the first of a set of months of each year.
+ // Years get a tick mark iff y % year_mod == 0. This is useful for
+ // displaying a tick mark once every 10 years, say, on long time scales.
+ var months;
+ var year_mod = 1; // e.g. to only print one point every 10 years.
+
+ if (granularity == Dygraph.MONTHLY) {
+ months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
+ } else if (granularity == Dygraph.QUARTERLY) {
+ months = [ 0, 3, 6, 9 ];
+ } else if (granularity == Dygraph.BIANNUAL) {
+ months = [ 0, 6 ];
+ } else if (granularity == Dygraph.ANNUAL) {
+ months = [ 0 ];
+ } else if (granularity == Dygraph.DECADAL) {
+ months = [ 0 ];
+ year_mod = 10;
+ }
+
+ var start_year = new Date(start_time).getFullYear();
+ var end_year = new Date(end_time).getFullYear();
+ var zeropad = Dygraph.zeropad;
+ for (var i = start_year; i <= end_year; i++) {
+ 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);
+ if (t < start_time || t > end_time) continue;
+ ticks.push({ v:t, label: new Date(t).strftime('%b %y') });
+ }
+ }
+ }
+
+ return ticks;
+};
+
/**
* Add ticks to the x-axis based on a date range.
@@ -593,60 +1311,21 @@ DateGraph.prototype.addXTicks_ = function() {
* @return {Array.