},
labelsSeparateLines: false,
labelsKMB: false,
+ labelsKMG2: false,
strokeWidth: 1.0,
delimiter: ',',
+ logScale: false,
sigma: 2.0,
errorBars: false,
fractions: false,
wilsonInterval: true, // only relevant if fractions is true
- customBars: false
+ customBars: false,
+ fillGraph: false,
+ fillAlpha: 0.15,
+
+ stackedGraph: false,
+ hideOverlayOnMouseOut: true
};
// Various logging levels.
this.dateWindow_ = attrs.dateWindow || null;
this.valueRange_ = attrs.valueRange || null;
this.wilsonInterval_ = attrs.wilsonInterval || true;
+ this.is_initial_draw_ = true;
// Clear the div. This ensure that, if multiple dygraphs are passed the same
// div, then only one will be drawn.
div.innerHTML = "";
- // If the div isn't already sized then give it a default size.
+ // 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 = Dygraph.DEFAULT_WIDTH + "px";
+ div.style.width = attrs.width || Dygraph.DEFAULT_WIDTH + "px";
}
if (div.style.height == '') {
- div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
+ 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;
+ }
+
+ // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
+ if (attrs['stackedGraph']) {
+ attrs['fillGraph'] = true;
+ // TODO(nikhilk): Add any other stackedGraph checks here.
+ }
// Dygraphs has many options, some of which interact with one another.
// To keep track of everything, we maintain two sets of options:
//
- // this.user_attrs_ only options explicitly set by the user.
+ // 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
// Create the containing DIV and other interactive elements
this.createInterface_();
- // Create the PlotKit 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_();
-
this.start_();
};
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_;
+};
+
+/**
+ * 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;
}
};
+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
*/
Dygraph.prototype.createInterface_ = function() {
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_ = document.createElement("canvas");
this.canvas_ = Dygraph.createCanvas();
this.canvas_.style.position = "absolute";
this.canvas_.width = this.width_;
// ... and for static parts of the chart.
this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
+ // Make sure we don't overdraw.
+ Dygraph.clipCanvas_(this.hidden_, this.clippingArea_);
+ Dygraph.clipCanvas_(this.canvas_, this.clippingArea_);
+
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
* @private
*/
Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
- // var h = document.createElement("canvas");
var h = Dygraph.createCanvas();
h.style.position = "absolute";
+ // TODO(danvk): h should be offset from canvas. canvas needs to include
+ // some extra area to make it easier to zoom in on the far left and far
+ // right. h needs to be precisely the plot area, so that clipping occurs.
h.style.top = canvas.style.top;
h.style.left = canvas.style.left;
h.width = this.width_;
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( Dygraph.hsvToRGB(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++) {
+ 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.
+ // 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_);
}
-// The following functions are from quirksmode.org
+/**
+ * Return the list of colors. This is either the list of colors passed in the
+ * attributes, or the autogenerated list of rgb(r,g,b) strings.
+ * @return {Array<string>} The list of colors.
+ */
+Dygraph.prototype.getColors = function() {
+ return this.colors_;
+};
+
+// The following functions are from quirksmode.org with a modification for Safari from
+// http://blog.firetree.net/2005/07/04/javascript-find-position/
// http://www.quirksmode.org/js/findpos.html
Dygraph.findPosX = function(obj) {
var curleft = 0;
- if (obj.offsetParent) {
- while (obj.offsetParent) {
+ if(obj.offsetParent)
+ while(1)
+ {
curleft += obj.offsetLeft;
+ if(!obj.offsetParent)
+ break;
obj = obj.offsetParent;
}
- }
- else if (obj.x)
+ else if(obj.x)
curleft += obj.x;
return curleft;
};
-
+
Dygraph.findPosY = function(obj) {
var curtop = 0;
- if (obj.offsetParent) {
- while (obj.offsetParent) {
+ if(obj.offsetParent)
+ while(1)
+ {
curtop += obj.offsetTop;
+ if(!obj.offsetParent)
+ break;
obj = obj.offsetParent;
}
- }
- else if (obj.y)
+ else if(obj.y)
curtop += obj.y;
return curtop;
};
+
+
/**
* Create the div that contains information on the selected point(s)
* This goes in the top right of the canvas, unless an external div has already
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];
- }
+ if (messagestyle.hasOwnProperty(name)) {
+ div.style[name] = messagestyle[name];
+ }
}
this.graphDiv.appendChild(div);
this.attrs_.labelsDiv = div;
roller.size = "2";
roller.value = this.rollPeriod_;
for (var name in textAttr) {
- if (textAttr.hasOwnProperty(name)) {
- roller.style[name] = textAttr[name];
- }
+ if (textAttr.hasOwnProperty(name)) {
+ roller.style[name] = textAttr[name];
+ }
}
var pa = this.graphDiv;
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 = 0;
// Draw zoom rectangles when the mouse is down and the user moves around
Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
- if (mouseDown) {
+ 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
Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
- mouseDown = true;
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.
Dygraph.addEvent(document, 'mouseup', function(event) {
- if (mouseDown) {
- mouseDown = false;
+ 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
Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
- if (mouseDown) {
+ if (isZooming) {
dragEndX = null;
dragEndY = null;
}
// 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)
Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
- if (mouseDown) {
- mouseDown = false;
+ if (isZooming) {
+ isZooming = false;
dragEndX = getX(event);
dragEndY = getY(event);
var regionWidth = Math.abs(dragEndX - dragStartX);
dragStartX = null;
dragStartY = null;
}
+
+ if (isPanning) {
+ isPanning = false;
+ draggingDate = null;
+ dateRange = null;
+ }
});
// Double-clicking zooms back out
*/
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_);
}
if (this.attr_("highlightCallback")) {
- this.attr_("highlightCallback")(event, lastx, this.selPoints_);
+ var px = this.lastHighlightCallbackX;
+ if (px !== null && lastx != px) {
+ // only fire if the selected point has changed.
+ this.lastHighlightCallbackX = lastx;
+ if (!this.attr_("stackedGraph")) {
+ this.attr_("highlightCallback")(event, lastx, this.selPoints_);
+ } else {
+ // "unstack" the points.
+ var callbackPoints = this.selPoints_.map(
+ function(p) { return {xval: p.xval, yval: p.yval, name: p.name} });
+ var cumulative_sum = 0;
+ for (var j = callbackPoints.length - 1; j >= 0; j--) {
+ callbackPoints[j].yval -= cumulative_sum;
+ cumulative_sum += callbackPoints[j].yval;
+ }
+ this.attr_("highlightCallback")(event, lastx, callbackPoints);
+ }
+ }
}
+ // 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 = this.attr_('highlightCircleSize');
var ctx = this.canvas_.getContext("2d");
var canvasx = this.selPoints_[0].canvasx;
// Set the status message to indicate the selected point(s)
- var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
+ var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
var clen = this.colors_.length;
for (var i = 0; i < this.selPoints_.length; i++) {
if (!isOK(this.selPoints_[i].canvasy)) continue;
}
this.attr_("labelsDiv").innerHTML = replace;
- // Save last x position for callbacks.
- this.lastx_ = lastx;
-
// Draw colored circles over the center of each selected point
- ctx.save()
+ ctx.save();
for (var i = 0; i < this.selPoints_.length; i++) {
if (!isOK(this.selPoints_[i%clen].canvasy)) continue;
ctx.beginPath();
};
/**
+ * 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) {
+ for (var i in this.layout_.datasets) {
+ this.selPoints_.push(this.layout_.points[pos+row]);
+ pos += this.layout_.datasets[i].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
*/
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.attr_("labelsDiv").innerHTML = "";
-};
+ this.selPoints_ = [];
+ this.lastx_ = -1;
+}
Dygraph.zeropad = function(x) {
if (x < 10) return "0" + x; else return "" + x;
return zeropad(d.getHours()) + ":" +
zeropad(d.getMinutes()) + ":" +
zeropad(d.getSeconds());
- } else if (d.getMinutes()) {
- return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
} else {
- return zeropad(d.getHours());
+ return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
}
}
// Time granularity enumeration
Dygraph.SECONDLY = 0;
-Dygraph.TEN_SECONDLY = 1;
-Dygraph.THIRTY_SECONDLY = 2;
-Dygraph.MINUTELY = 3;
-Dygraph.TEN_MINUTELY = 4;
-Dygraph.THIRTY_MINUTELY = 5;
-Dygraph.HOURLY = 6;
-Dygraph.SIX_HOURLY = 7;
-Dygraph.DAILY = 8;
-Dygraph.WEEKLY = 9;
-Dygraph.MONTHLY = 10;
-Dygraph.QUARTERLY = 11;
-Dygraph.BIANNUAL = 12;
-Dygraph.ANNUAL = 13;
-Dygraph.DECADAL = 14;
-Dygraph.NUM_GRANULARITIES = 15;
+Dygraph.TWO_SECONDLY = 1;
+Dygraph.FIVE_SECONDLY = 2;
+Dygraph.TEN_SECONDLY = 3;
+Dygraph.THIRTY_SECONDLY = 4;
+Dygraph.MINUTELY = 5;
+Dygraph.TWO_MINUTELY = 6;
+Dygraph.FIVE_MINUTELY = 7;
+Dygraph.TEN_MINUTELY = 8;
+Dygraph.THIRTY_MINUTELY = 9;
+Dygraph.HOURLY = 10;
+Dygraph.TWO_HOURLY = 11;
+Dygraph.SIX_HOURLY = 12;
+Dygraph.DAILY = 13;
+Dygraph.WEEKLY = 14;
+Dygraph.MONTHLY = 15;
+Dygraph.QUARTERLY = 16;
+Dygraph.BIANNUAL = 17;
+Dygraph.ANNUAL = 18;
+Dygraph.DECADAL = 19;
+Dygraph.NUM_GRANULARITIES = 20;
Dygraph.SHORT_SPACINGS = [];
Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
+Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
+Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
+Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
+Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
-Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600 * 6;
+Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
+Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
if (granularity < Dygraph.MONTHLY) {
// Generate one tick mark for every fixed interval of time.
var spacing = Dygraph.SHORT_SPACINGS[granularity];
- var format = '%d%b'; // e.g. "1 Jan"
- // TODO(danvk): be smarter about making sure this really hits a "nice" time.
- if (granularity < Dygraph.HOURLY) {
- start_time = spacing * Math.floor(0.5 + start_time / spacing);
+ var format = '%d%b'; // e.g. "1Jan"
+
+ // Find a time less than start_time which occurs on a "nice" time boundary
+ // for this granularity.
+ var g = spacing / 1000;
+ var d = new Date(start_time);
+ if (g <= 60) { // seconds
+ var x = d.getSeconds(); d.setSeconds(x - x % g);
+ } else {
+ d.setSeconds(0);
+ g /= 60;
+ if (g <= 60) { // minutes
+ var x = d.getMinutes(); d.setMinutes(x - x % g);
+ } else {
+ d.setMinutes(0);
+ g /= 60;
+
+ if (g <= 24) { // days
+ var x = d.getHours(); d.setHours(x - x % g);
+ } else {
+ d.setHours(0);
+ g /= 24;
+
+ if (g == 7) { // one week
+ d.setDate(d.getDate() - d.getDay());
+ }
+ }
+ }
}
+ start_time = d.getTime();
+
for (var t = start_time; t <= end_time; t += spacing) {
var d = new Date(t);
var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
// Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
// Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
// The first spacing greater than pixelsPerYLabel is what we use.
- var mults = [1, 2, 5];
+ // TODO(danvk): version that works on a log scale.
+ if (self.attr_("labelsKMG2")) {
+ var mults = [1, 2, 4, 8];
+ } else {
+ var mults = [1, 2, 5];
+ }
var scale, low_val, high_val, nTicks;
// TODO(danvk): make it possible to set this for x- and y-axes independently.
var pixelsPerTick = self.attr_('pixelsPerYLabel');
for (var i = -10; i < 50; i++) {
- var base_scale = Math.pow(10, i);
+ if (self.attr_("labelsKMG2")) {
+ var base_scale = Math.pow(16, i);
+ } else {
+ var base_scale = Math.pow(10, i);
+ }
for (var j = 0; j < mults.length; j++) {
scale = base_scale * mults[j];
low_val = Math.floor(minV / scale) * scale;
// Construct labels for the ticks
var ticks = [];
+ var k;
+ var k_labels = [];
+ if (self.attr_("labelsKMB")) {
+ k = 1000;
+ k_labels = [ "K", "M", "B", "T" ];
+ }
+ if (self.attr_("labelsKMG2")) {
+ if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
+ k = 1024;
+ k_labels = [ "k", "M", "G", "T" ];
+ }
+
for (var i = 0; i < nTicks; i++) {
var tickV = low_val + i * scale;
+ var absTickV = Math.abs(tickV);
var label = self.round_(tickV, 2);
- if (self.attr_("labelsKMB")) {
- var k = 1000;
- if (tickV >= k*k*k) {
- label = self.round_(tickV/(k*k*k), 1) + "B";
- } else if (tickV >= k*k) {
- label = self.round_(tickV/(k*k), 1) + "M";
- } else if (tickV >= k) {
- label = self.round_(tickV/k, 1) + "K";
+ if (k_labels.length) {
+ // 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 = self.round_(tickV / n, 1) + k_labels[j];
+ break;
+ }
}
}
ticks.push( {label: label, v: tickV} );
} else {
for (var j = 0; j < series.length; j++) {
var y = series[j][1];
- if (!y) continue;
+ if (y === null || isNaN(y)) continue;
if (maxY == null || y > maxY) {
maxY = y;
}
* @private
*/
Dygraph.prototype.drawGraph_ = function(data) {
+ // This is used to set the second parameter to drawCallback, below.
+ var is_initial_draw = this.is_initial_draw_;
+ this.is_initial_draw_ = false;
+
var minY = null, maxY = null;
this.layout_.removeAllDatasets();
this.setColors_();
this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
+ // For stacked series.
+ var cumulative_y = [];
+ var stacked_datasets = [];
+
// Loop over all fields in the dataset
for (var i = 1; i < data[0].length; i++) {
+ if (!this.visibility()[i - 1]) continue;
+
var series = [];
for (var j = 0; j < data.length; j++) {
var date = data[j][0];
series = this.rollingAverage(series, this.rollPeriod_);
// Prune down to the desired range, if necessary (for zooming)
+ // Because there can be lines going to points outside of the visible area,
+ // we actually prune to visible points, plus one on either side.
var bars = this.attr_("errorBars") || this.attr_("customBars");
if (this.dateWindow_) {
var low = this.dateWindow_[0];
var high= this.dateWindow_[1];
var pruned = [];
+ // TODO(danvk): do binary search instead of linear search.
+ // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
+ var firstIdx = null, lastIdx = null;
for (var k = 0; k < series.length; k++) {
- if (series[k][0] >= low && series[k][0] <= high) {
- pruned.push(series[k]);
+ if (series[k][0] >= low && firstIdx === null) {
+ firstIdx = k;
+ }
+ if (series[k][0] <= high) {
+ lastIdx = k;
}
}
+ if (firstIdx === null) firstIdx = 0;
+ if (firstIdx > 0) firstIdx--;
+ if (lastIdx === null) lastIdx = series.length - 1;
+ if (lastIdx < series.length - 1) lastIdx++;
+ for (var k = firstIdx; k <= lastIdx; k++) {
+ pruned.push(series[k]);
+ }
series = pruned;
}
vals[j] = [series[j][0],
series[j][1][0], series[j][1][1], series[j][1][2]];
this.layout_.addDataset(this.attr_("labels")[i], vals);
+ } else if (this.attr_("stackedGraph")) {
+ var vals = [];
+ var l = series.length;
+ var actual_y;
+ for (var j = 0; j < l; j++) {
+ if (cumulative_y[series[j][0]] === undefined)
+ cumulative_y[series[j][0]] = 0;
+
+ actual_y = series[j][1];
+ cumulative_y[series[j][0]] += actual_y;
+
+ vals[j] = [series[j][0], cumulative_y[series[j][0]]]
+
+ if (!maxY || cumulative_y[series[j][0]] > maxY)
+ maxY = cumulative_y[series[j][0]];
+ }
+ stacked_datasets.push([this.attr_("labels")[i], vals]);
+ //this.layout_.addDataset(this.attr_("labels")[i], vals);
} else {
this.layout_.addDataset(this.attr_("labels")[i], series);
}
}
+ if (stacked_datasets.length > 0) {
+ for (var i = (stacked_datasets.length - 1); i >= 0; i--) {
+ this.layout_.addDataset(stacked_datasets[i][0], stacked_datasets[i][1]);
+ }
+ }
+
// Use some heuristics to come up with a good maxY value, unless it's been
// set explicitly by the user.
if (this.valueRange_ != null) {
this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
+ this.displayedYRange_ = this.valueRange_;
} else {
+ // This affects the calculation of span, below.
+ if (this.attr_("includeZero") && minY > 0) {
+ minY = 0;
+ }
+
// Add some padding and round up to an integer to be human-friendly.
var span = maxY - minY;
+ // special case: if we have no sense of scale, use +/-10% of the sole value.
+ if (span == 0) { span = maxY; }
var maxAxisY = maxY + 0.1 * span;
var minAxisY = minY - 0.1 * span;
}
this.addYTicks_(minAxisY, maxAxisY);
+ this.displayedYRange_ = [minAxisY, maxAxisY];
}
this.addXTicks_();
// Tell PlotKit to use this new data and render itself
+ this.layout_.updateOptions({dateWindow: this.dateWindow_});
this.layout_.evaluateWithError();
this.plotter_.clear();
this.plotter_.render();
- this.canvas_.getContext('2d').clearRect(0, 0,
- this.canvas_.width, this.canvas_.height);
+ this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
+ this.canvas_.height);
+
+ if (this.attr_("drawCallback") !== null) {
+ this.attr_("drawCallback")(this, is_initial_draw);
+ }
};
/**
Dygraph.dateParser = function(dateStr, self) {
var dateStrSlashed;
var d;
- if (dateStr.length == 10 && dateStr.search("-") != -1) { // e.g. '2009-07-12'
+ if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
dateStrSlashed = dateStr.replace("-", "/", "g");
while (dateStrSlashed.search("-") != -1) {
dateStrSlashed = dateStrSlashed.replace("-", "/");
var xParser;
var defaultParserSet = false; // attempt to auto-detect x value type
var expectedCols = this.attr_("labels").length;
+ var outOfOrder = false;
for (var i = start; i < lines.length; i++) {
var line = lines[i];
if (line.length == 0) continue; // skip blank lines
fields[j] = parseFloat(inFields[j]);
}
}
+ if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
+ outOfOrder = true;
+ }
ret.push(fields);
if (fields.length != expectedCols) {
") " + line);
}
}
+
+ if (outOfOrder) {
+ this.warn("CSV is out of order; order it correctly to speed loading.");
+ ret.sort(function(a,b) { return a[0] - b[0] });
+ }
+
return ret;
};
return null;
}
if (parsedData[i][0] == null
- || typeof(parsedData[i][0].getTime) != 'function') {
- this.error("x value in row " << (1 + i) << " is not a Date");
+ || typeof(parsedData[i][0].getTime) != 'function'
+ || isNaN(parsedData[i][0].getTime())) {
+ this.error("x value in row " + (1 + i) + " is not a Date");
return null;
}
parsedData[i][0] = parsedData[i][0].getTime();
cols = labels.length;
var indepType = data.getColumnType(0);
- if (indepType == 'date') {
+ if (indepType == 'date' || indepType == 'datetime') {
this.attrs_.xValueFormatter = Dygraph.dateString_;
this.attrs_.xValueParser = Dygraph.dateParser;
this.attrs_.xTicker = Dygraph.dateTicker;
this.attrs_.xValueParser = function(x) { return parseFloat(x); };
this.attrs_.xTicker = Dygraph.numericTicks;
} else {
- this.error("only 'date' and 'number' types are supported for column 1 " +
- "of DataTable input (Got '" + indepType + "')");
+ this.error("only 'date', 'datetime' and 'number' types are supported for " +
+ "column 1 of DataTable input (Got '" + indepType + "')");
return null;
}
var ret = [];
+ var outOfOrder = false;
for (var i = 0; i < rows; i++) {
var row = [];
- if (!data.getValue(i, 0)) continue;
- if (indepType == 'date') {
+ if (typeof(data.getValue(i, 0)) === 'undefined' ||
+ data.getValue(i, 0) === null) {
+ this.warning("Ignoring row " + i +
+ " of DataTable because of undefined or null first column.");
+ continue;
+ }
+
+ if (indepType == 'date' || indepType == 'datetime') {
row.push(data.getValue(i, 0).getTime());
} else {
row.push(data.getValue(i, 0));
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;
+ }
ret.push(row);
}
+
+ if (outOfOrder) {
+ this.warn("DataTable is out of order; order it correctly to speed loading.");
+ ret.sort(function(a,b) { return a[0] - b[0] });
+ }
return ret;
}
Dygraph.update = function (self, o) {
if (typeof(o) != 'undefined' && o !== null) {
for (var k in o) {
- if (o.hasOwnProperty(k)) {
- self[k] = o[k];
- }
+ if (o.hasOwnProperty(k)) {
+ self[k] = o[k];
+ }
}
}
return self;
Dygraph.isArrayLike = function (o) {
var typ = typeof(o);
if (
- (typ != 'object' && !(typ == 'function' &&
+ (typ != 'object' && !(typ == 'function' &&
typeof(o.item) == 'function')) ||
o === null ||
typeof(o.length) != 'number' ||
};
/**
+ * Resizes the dygraph. If no parameters are specified, resizes to fill the
+ * containing div (which has presumably changed size since the dygraph was
+ * instantiated. If the width/height are specified, the div will be resized.
+ *
+ * This is far more efficient than destroying and re-instantiating a
+ * Dygraph, since it doesn't have to reparse the underlying data.
+ *
+ * @param {Number} width Width (in pixels)
+ * @param {Number} height Height (in pixels)
+ */
+Dygraph.prototype.resize = function(width, height) {
+ if ((width === null) != (height === null)) {
+ this.warn("Dygraph.resize() should be called with zero parameters or " +
+ "two non-NULL parameters. Pretending it was zero.");
+ width = height = null;
+ }
+
+ // TODO(danvk): there should be a clear() method.
+ this.maindiv_.innerHTML = "";
+ this.attrs_.labelsDiv = null;
+
+ if (width) {
+ this.maindiv_.style.width = width + "px";
+ this.maindiv_.style.height = height + "px";
+ this.width_ = width;
+ this.height_ = height;
+ } else {
+ this.width_ = this.maindiv_.offsetWidth;
+ this.height_ = this.maindiv_.offsetHeight;
+ }
+
+ this.createInterface_();
+ this.drawGraph_(this.rawData_);
+};
+
+/**
* Adjusts the number of days 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.
};
/**
+ * Returns a boolean array of visibility statuses.
+ */
+Dygraph.prototype.visibility = function() {
+ // Do lazy-initialization, so that this happens after we know the number of
+ // data series.
+ if (!this.attr_("visibility")) {
+ this.attrs_["visibility"] = [];
+ }
+ while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
+ this.attr_("visibility").push(true);
+ }
+ return this.attr_("visibility");
+};
+
+/**
+ * Changes the visiblity of a series.
+ */
+Dygraph.prototype.setVisibility = function(num, value) {
+ var x = this.visibility();
+ if (num < 0 && num >= x.length) {
+ this.warn("invalid series number in setVisibility: " + num);
+ } else {
+ x[num] = value;
+ this.drawGraph_(this.rawData_);
+ }
+};
+
+/**
* Create a new canvas element. This is more complex than a simple
* document.createElement("canvas") because of IE and excanvas.
*/
this.date_graph = new Dygraph(this.container, data, options);
}
+/**
+ * Google charts compatible setSelection
+ * Only row selection is supported, all points in the
+ * row will be highlighted
+ * @param {Array} array of the selected cells
+ * @public
+ */
+Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
+ var row = false;
+ if (selection_array.length) {
+ row = selection_array[0].row;
+ }
+ this.date_graph.setSelection(row);
+}
+
// Older pages may still use this name.
DateGraph = Dygraph;