X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=ff70bcb005cc01033f5131839c0abcb422ccef48;hb=1cf11047ed006208ed70bfbe5666254264137a6a;hp=74b76e49ca1148834ba1aca06f252505d2825f35;hpb=b16e636940e6566cc8176c7eb4ed90fba7d118c9;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 74b76e4..ff70bcb 100644 --- a/dygraph.js +++ b/dygraph.js @@ -112,7 +112,8 @@ Dygraph.DEFAULT_ATTRS = { errorBars: false, fractions: false, wilsonInterval: true, // only relevant if fractions is true - customBars: false + customBars: false, + fillGraph: false }; // Various logging levels. @@ -525,12 +526,15 @@ 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; @@ -540,37 +544,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 || 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; } @@ -579,8 +609,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); @@ -605,6 +635,12 @@ Dygraph.prototype.createDragInterface_ = function() { dragStartX = null; dragStartY = null; } + + if (isPanning) { + isPanning = false; + draggingDate = null; + dateRange = null; + } }); // Double-clicking zooms back out @@ -877,30 +913,40 @@ 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.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; @@ -941,11 +987,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(); @@ -1030,12 +1102,20 @@ 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]; + 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; @@ -1122,7 +1202,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; } @@ -1151,6 +1231,8 @@ Dygraph.prototype.drawGraph_ = function(data) { // 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]; @@ -1214,11 +1296,12 @@ 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); }; /** @@ -1601,7 +1684,13 @@ Dygraph.prototype.parseDataTable_ = function(data) { var ret = []; for (var i = 0; i < rows; i++) { var row = []; - if (!data.getValue(i, 0)) continue; + 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') { row.push(data.getValue(i, 0).getTime()); } else { @@ -1789,6 +1878,34 @@ Dygraph.prototype.adjustRoll = function(length) { }; /** + * 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.attr_["visibility"] = []; + } + while (this.attr_("visibility").length < this.rawData_[0].length - 1) { + this.attr_("visibility").push(false); + } + 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. */