X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=386781dec93f9d7ca171f60b055530e116ac3a90;hb=f6401bf68f1ccec4c891b2b6bf40982fb806b32d;hp=4fc26bc52fb1f082e483fc17180b39ac11cfe9c6;hpb=3e3f84e4cc861dd0582531c220937f78d5b2bfc3;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 4fc26bc..386781d 100644 --- a/dygraph.js +++ b/dygraph.js @@ -91,6 +91,7 @@ Dygraph.DEFAULT_ATTRS = { }, labelsSeparateLines: false, labelsKMB: false, + labelsKMG2: false, strokeWidth: 1.0, @@ -191,30 +192,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_ = { '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_(); }; @@ -280,7 +257,7 @@ Dygraph.addEvent = function(el, evt, 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() { @@ -312,6 +289,30 @@ Dygraph.prototype.createInterface_ = function() { 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_(); } /** @@ -451,7 +452,9 @@ Dygraph.prototype.createStatusMessage_ = function(){ Dygraph.update(messagestyle, this.attr_('labelsDivStyles')); var div = document.createElement("div"); for (var name in messagestyle) { - div.style[name] = messagestyle[name]; + if (messagestyle.hasOwnProperty(name)) { + div.style[name] = messagestyle[name]; + } } this.graphDiv.appendChild(div); this.attrs_.labelsDiv = div; @@ -476,7 +479,9 @@ Dygraph.prototype.createRollInterface_ = function() { roller.size = "2"; roller.value = this.rollPeriod_; for (var name in textAttr) { - roller.style[name] = textAttr[name]; + if (textAttr.hasOwnProperty(name)) { + roller.style[name] = textAttr[name]; + } } var pa = this.graphDiv; @@ -520,12 +525,14 @@ Dygraph.prototype.createDragInterface_ = function() { var self = this; // Tracks whether the mouse is down right now - var mouseDown = false; + var isZooming = 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; @@ -535,37 +542,63 @@ Dygraph.prototype.createDragInterface_ = function() { // 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) { + 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; } @@ -574,8 +607,8 @@ 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) 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); @@ -600,6 +633,12 @@ Dygraph.prototype.createDragInterface_ = function() { dragStartX = null; dragStartY = null; } + + if (isPanning) { + isPanning = false; + draggingDate = null; + dateRange = null; + } }); // Double-clicking zooms back out @@ -896,7 +935,7 @@ Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60; 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.SIX_HOURLY] = 1000 * 3600 * 6; Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400; Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800; @@ -1045,17 +1084,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} ); @@ -1104,7 +1156,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; } @@ -1196,11 +1248,14 @@ Dygraph.prototype.drawGraph_ = function(data) { this.addXTicks_(); // Tell PlotKit to use this new data and render itself + if (this.dateWindow_) { + 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); }; /** @@ -1268,7 +1323,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { var y = data[1]; rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]]; - if (y && !isNaN(y)) { + if (y != null && !isNaN(y)) { low += data[0]; mid += y; high += data[2]; @@ -1276,7 +1331,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { } if (i - rollPeriod >= 0) { var prev = originalData[i - rollPeriod]; - if (prev[1][1] && !isNaN(prev[1][1])) { + if (prev[1][1] != null && !isNaN(prev[1][1])) { low -= prev[1][0]; mid -= prev[1][1]; high -= prev[1][2]; @@ -1301,7 +1356,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]; } @@ -1319,7 +1374,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); @@ -1607,7 +1662,9 @@ Dygraph.prototype.parseDataTable_ = function(data) { Dygraph.update = function (self, o) { if (typeof(o) != 'undefined' && o !== null) { for (var k in o) { - self[k] = o[k]; + if (o.hasOwnProperty(k)) { + self[k] = o[k]; + } } } return self; @@ -1723,6 +1780,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.