X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=5e824ae9ae92de2e4412929cad0506d4470ea5dd;hb=bbf72e4acf7a2bf30d414039a37b1cc30853597d;hp=39ababeab38d3a663dacd5778f4b501a31908f27;hpb=9922b78bed671c0366f8457cdac40ea6dafc56c0;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 39ababe..5e824ae 100644 --- a/dygraph.js +++ b/dygraph.js @@ -91,6 +91,7 @@ Dygraph.DEFAULT_ATTRS = { }, labelsSeparateLines: false, labelsKMB: false, + labelsKMG2: false, strokeWidth: 1.0, @@ -105,11 +106,19 @@ Dygraph.DEFAULT_ATTRS = { 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 + customBars: false, + fillGraph: false, + fillAlpha: 0.15, + + stackedGraph: false, + hideOverlayOnMouseOut: true }; // Various logging levels. @@ -125,7 +134,7 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { if (labels != null) { var new_labels = ["Date"]; for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]); - MochiKit.Base.update(attrs, { 'labels': new_labels }); + Dygraph.update(attrs, { 'labels': new_labels }); } this.__init__(div, file, attrs); }; @@ -153,35 +162,52 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { 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 // 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_ = {}; - MochiKit.Base.update(this.user_attrs_, attrs); + Dygraph.update(this.user_attrs_, attrs); this.attrs_ = {}; - MochiKit.Base.update(this.attrs_, Dygraph.DEFAULT_ATTRS); + Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS); // Make a note of whether labels will be pulled from the CSV file. this.labelsFromCSV_ = (this.attr_("labels") == null); @@ -189,31 +215,6 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // 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_ = { 'errorBars': (this.attr_("errorBars") || - this.attr_("customBars")), - 'xOriginIsZero': false }; - MochiKit.Base.update(this.layoutOptions_, this.attrs_); - MochiKit.Base.update(this.layoutOptions_, this.user_attrs_); - - this.layout_ = new DygraphLayout(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 }; - MochiKit.Base.update(this.renderOptions_, this.attrs_); - MochiKit.Base.update(this.renderOptions_, this.user_attrs_); - this.plotter_ = new DygraphCanvasRenderer(this, - this.hidden_, this.layout_, - this.renderOptions_); - - this.createStatusMessage_(); - this.createRollInterface_(); - this.createDragInterface_(); - - // connect(window, 'onload', this, function(e) { this.start_(); }); this.start_(); }; @@ -262,43 +263,94 @@ Dygraph.prototype.error = function(message) { */ 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]; +}; + +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); + } +}; /** * 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() { // 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); - - // Create the canvas to store - // We need to subtract out some space for the x- and y-axis labels. - // For the x-axis: - // - remove from height: (axisTickSize + height of tick label) - // height of tick label == axisLabelFontSize? - // - remove from width: axisLabelWidth / 2 (maybe on both ends) - // For the y-axis: - // - remove axisLabelFontSize from the top - // - remove axisTickSize from the left - - var canvas = MochiKit.DOM.CANVAS; - this.canvas_ = canvas( { style: { 'position': 'absolute' }, - width: this.width_, - height: this.height_ - }); - appendChildNodes(this.graphDiv, this.canvas_); - + this.graphDiv = document.createElement("div"); + this.graphDiv.style.width = this.width_ + "px"; + this.graphDiv.style.height = this.height_ + "px"; + enclosing.appendChild(this.graphDiv); + + // 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_; + 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_); - 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_(); } /** @@ -309,16 +361,51 @@ Dygraph.prototype.createInterface_ = function() { * @private */ Dygraph.prototype.createPlotKitCanvas_ = function(canvas) { - var h = document.createElement("canvas"); + // var h = document.createElement("canvas"); + var h = Dygraph.createCanvas(); h.style.position = "absolute"; 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 @@ -336,24 +423,72 @@ Dygraph.prototype.setColors_ = function() { 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++) { + if (!this.visibility()[i]) continue; var colorStr = colors[i % colors.length]; - this.colors_.push( MochiKit.Color.Color.fromString(colorStr) ); + 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_; - MochiKit.Base.update(this.plotter_.options, this.renderOptions_); - MochiKit.Base.update(this.layoutOptions_, this.user_attrs_); - MochiKit.Base.update(this.layoutOptions_, this.attrs_); + 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. @@ -362,7 +497,7 @@ Dygraph.prototype.setColors_ = function() { Dygraph.prototype.createStatusMessage_ = function(){ if (!this.attr_("labelsDiv")) { var divWidth = this.attr_('labelsDivWidth'); - var messagestyle = { "style": { + var messagestyle = { "position": "absolute", "fontSize": "14px", "zIndex": 10, @@ -371,10 +506,15 @@ Dygraph.prototype.createStatusMessage_ = function(){ "left": (this.width_ - divWidth - 2) + "px", "background": "white", "textAlign": "left", - "overflow": "hidden"}}; - MochiKit.Base.update(messagestyle["style"], this.attr_('labelsDivStyles')); - var div = MochiKit.DOM.DIV(messagestyle); - MochiKit.DOM.appendChildNodes(this.graphDiv, div); + "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; } }; @@ -386,78 +526,138 @@ Dygraph.prototype.createStatusMessage_ = function(){ */ Dygraph.prototype.createRollInterface_ = function() { var display = this.attr_('showRoller') ? "block" : "none"; - var textAttr = { "type": "text", - "size": "2", - "value": this.rollPeriod_, - "style": { "position": "absolute", - "zIndex": 10, - "top": (this.plotter_.area.h - 25) + "px", - "left": (this.plotter_.area.x + 1) + "px", - "display": display } + 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 */ 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 = 0; var py = 0; - var getX = function(e) { return e.mouse().page.x - px }; - var getY = function(e) { return e.mouse().page.y - py }; + 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; - px = PlotKit.Base.findPosX(self.canvas_); - py = PlotKit.Base.findPosY(self.canvas_); + 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; } @@ -465,9 +665,9 @@ Dygraph.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); @@ -476,8 +676,8 @@ Dygraph.prototype.createDragInterface_ = function() { if (regionWidth < 2 && regionHeight < 2 && self.attr_('clickCallback') != null && self.lastx_ != undefined) { - // TODO(danvk): pass along more info about the point. - self.attr_('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) { @@ -492,10 +692,17 @@ Dygraph.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]; @@ -574,7 +781,7 @@ Dygraph.prototype.doZoom_ = function(lowX, highX) { * @private */ Dygraph.prototype.mouseMove_ = function(event) { - var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_); + var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_); var points = this.layout_.points; var lastx = -1; @@ -596,10 +803,31 @@ Dygraph.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); + } } } @@ -613,19 +841,20 @@ Dygraph.prototype.mouseMove_ = function(event) { var isOK = function(x) { return x && !isNaN(x); }; - if (selPoints.length > 0) { - var canvasx = selPoints[0].canvasx; + if (this.selPoints_.length > 0) { + var canvasx = this.selPoints_[0].canvasx; // Set the status message to indicate the selected point(s) var replace = this.attr_('xValueFormatter')(lastx, this) + ":"; var clen = this.colors_.length; - for (var i = 0; i < selPoints.length; i++) { - if (!isOK(selPoints[i].canvasy)) continue; + 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.colors_[i%clen]); + replace += " " + point.name + ":" + this.round_(point.yval, 2); } @@ -635,12 +864,13 @@ Dygraph.prototype.mouseMove_ = function(event) { this.lastx_ = lastx; // Draw colored circles over the center of each selected point - ctx.save() - for (var i = 0; i < selPoints.length; i++) { - if (!isOK(selPoints[i%clen].canvasy)) continue; + ctx.save(); + for (var i = 0; i < this.selPoints_.length; i++) { + if (!isOK(this.selPoints_[i%clen].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.colors_[i%clen]; + ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize, + 0, 2 * Math.PI, false); ctx.fill(); } ctx.restore(); @@ -655,10 +885,12 @@ Dygraph.prototype.mouseMove_ = function(event) { * @private */ Dygraph.prototype.mouseOut_ = function(event) { - // Get rid of the overlay data - var ctx = this.canvas_.getContext("2d"); - ctx.clearRect(0, 0, this.width_, this.height_); - this.attr_("labelsDiv").innerHTML = ""; + if (this.attr_("hideOverlayOnMouseOut")) { + // Get rid of the overlay data + var ctx = this.canvas_.getContext("2d"); + ctx.clearRect(0, 0, this.width_, this.height_); + this.attr_("labelsDiv").innerHTML = ""; + } }; Dygraph.zeropad = function(x) { @@ -678,10 +910,8 @@ Dygraph.prototype.hmsString_ = function(date) { 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()); } } @@ -757,31 +987,41 @@ Dygraph.prototype.addXTicks_ = function() { // 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; @@ -821,11 +1061,37 @@ Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) { 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(); @@ -910,12 +1176,21 @@ Dygraph.numericTicks = function(minV, maxV, self) { // 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; @@ -930,17 +1205,30 @@ Dygraph.numericTicks = function(minV, maxV, self) { // 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} ); @@ -989,7 +1277,7 @@ Dygraph.prototype.extremeValues_ = function(series) { } 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; } @@ -1011,13 +1299,24 @@ Dygraph.prototype.extremeValues_ = function(series) { * @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]; @@ -1051,18 +1350,49 @@ Dygraph.prototype.drawGraph_ = function(data) { 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]); } 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; @@ -1081,11 +1411,16 @@ Dygraph.prototype.drawGraph_ = function(data) { 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); + } }; /** @@ -1153,16 +1488,20 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { var y = data[1]; rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]]; - low += data[0]; - mid += y; - high += data[2]; - count += 1; + if (y != null && !isNaN(y)) { + low += data[0]; + mid += y; + high += data[2]; + count += 1; + } if (i - rollPeriod >= 0) { var prev = originalData[i - rollPeriod]; - low -= prev[1][0]; - mid -= prev[1][1]; - high -= prev[1][2]; - count -= 1; + if (prev[1][1] != null && !isNaN(prev[1][1])) { + low -= prev[1][0]; + mid -= prev[1][1]; + high -= prev[1][2]; + count -= 1; + } } rollingData[i] = [originalData[i][0], [ 1.0 * mid / count, 1.0 * (mid - low) / count, @@ -1182,7 +1521,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { var num_ok = 0; for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { var y = originalData[j][1]; - if (!y || isNaN(y)) continue; + if (y == null || isNaN(y)) continue; num_ok++; sum += originalData[j][1]; } @@ -1200,7 +1539,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { var num_ok = 0; for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { var y = originalData[j][1][0]; - if (!y || isNaN(y)) continue; + if (y == null || isNaN(y)) continue; num_ok++; sum += originalData[j][1][0]; variance += Math.pow(originalData[j][1][1], 2); @@ -1230,7 +1569,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { 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("-", "/"); @@ -1301,19 +1640,28 @@ Dygraph.prototype.detectTypeFromString_ = function(str) { Dygraph.prototype.parseCSV_ = function(data) { var ret = []; var lines = data.split("\n"); + + // Use the default delimiter or fall back to a tab if that makes sense. + var delim = this.attr_('delimiter'); + if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) { + delim = '\t'; + } + var start = 0; if (this.labelsFromCSV_) { start = 1; - this.attrs_.labels = lines[0].split(","); + this.attrs_.labels = lines[0].split(delim); } 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 - var inFields = line.split(','); + if (line[0] == '#') continue; // skip comment lines + var inFields = line.split(delim); if (inFields.length < 2) continue; var fields = []; @@ -1350,6 +1698,9 @@ Dygraph.prototype.parseCSV_ = function(data) { 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) { @@ -1358,6 +1709,12 @@ Dygraph.prototype.parseCSV_ = function(data) { ") " + 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; }; @@ -1388,13 +1745,13 @@ Dygraph.prototype.parseArray_ = function(data) { } } - if (MochiKit.Base.isDateLike(data[0][0])) { + if (Dygraph.isDateLike(data[0][0])) { // Some intelligent defaults for a date x-axis. this.attrs_.xValueFormatter = Dygraph.dateString_; this.attrs_.xTicker = Dygraph.dateTicker; // Assume they're all dates. - var parsedData = MochiKit.Base.clone(data); + var parsedData = Dygraph.clone(data); for (var i = 0; i < data.length; i++) { if (parsedData[i].length == 0) { this.error("Row " << (1 + i) << " of data is empty"); @@ -1433,11 +1790,13 @@ Dygraph.prototype.parseDataTable_ = function(data) { var labels = []; for (var i = 0; i < cols; i++) { labels.push(data.getColumnLabel(i)); + if (i != 0 && this.attr_("errorBars")) i += 1; } this.attrs_.labels = labels; + 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; @@ -1446,28 +1805,97 @@ Dygraph.prototype.parseDataTable_ = function(data) { 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)); } - for (var j = 1; j < cols; j++) { - row.push(data.getValue(i, j)); + if (!this.attr_("errorBars")) { + for (var j = 1; j < cols; j++) { + row.push(data.getValue(i, j)); + } + } else { + for (var j = 0; j < cols - 1; j++) { + row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]); + } + } + if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) { + outOfOrder = true; } 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; } +// These functions are all based on MochiKit. +Dygraph.update = function (self, o) { + if (typeof(o) != 'undefined' && o !== null) { + for (var k in o) { + if (o.hasOwnProperty(k)) { + self[k] = o[k]; + } + } + } + return self; +}; + +Dygraph.isArrayLike = function (o) { + var typ = typeof(o); + if ( + (typ != 'object' && !(typ == 'function' && + typeof(o.item) == 'function')) || + o === null || + typeof(o.length) != 'number' || + o.nodeType === 3 + ) { + return false; + } + return true; +}; + +Dygraph.isDateLike = function (o) { + if (typeof(o) != "object" || o === null || + typeof(o.getTime) != 'function') { + return false; + } + return true; +}; + +Dygraph.clone = function(o) { + // TODO(danvk): figure out how MochiKit's version works + var r = []; + for (var i = 0; i < o.length; i++) { + if (Dygraph.isArrayLike(o[i])) { + r.push(Dygraph.clone(o[i])); + } else { + r.push(o[i]); + } + } + return r; +}; + + /** * Get the CSV data. If it's in a function, call that function. If it's in a * file, do an XMLHttpRequest to get it. @@ -1477,7 +1905,7 @@ Dygraph.prototype.start_ = function() { if (typeof this.file_ == 'function') { // CSV string. Pretend we got it via XHR. this.loadedEvent_(this.file_()); - } else if (MochiKit.Base.isArrayLike(this.file_)) { + } else if (Dygraph.isArrayLike(this.file_)) { this.rawData_ = this.parseArray_(this.file_); this.drawGraph_(this.rawData_); } else if (typeof this.file_ == 'object' && @@ -1527,7 +1955,7 @@ Dygraph.prototype.updateOptions = function(attrs) { if (attrs.valueRange) { this.valueRange_ = attrs.valueRange; } - MochiKit.Base.update(this.user_attrs_, attrs); + Dygraph.update(this.user_attrs_, attrs); this.labelsFromCSV_ = (this.attr_("labels") == null); @@ -1542,6 +1970,42 @@ Dygraph.prototype.updateOptions = function(attrs) { }; /** + * 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. @@ -1551,6 +2015,49 @@ Dygraph.prototype.adjustRoll = function(length) { this.drawGraph_(this.rawData_); }; +/** + * 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. + */ +Dygraph.createCanvas = function() { + var canvas = document.createElement("canvas"); + + isIE = (/MSIE/.test(navigator.userAgent) && !window.opera); + if (isIE) { + canvas = G_vmlCanvasManager.initElement(canvas); + } + + return canvas; +}; + /** * A wrapper around Dygraph that implements the gviz API.