X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=3eaa18e7e412478834aa5deb76ea445ec043985e;hb=50360fd082e74dd47cdc95b96892fef7f2067ce9;hp=3f8f90e3d2b16ea8a3993eb0163afb59a80a83d6;hpb=239c712da4bb92732b6bbac34f619afd48587d35;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 3f8f90e..3eaa18e 100644 --- a/dygraph.js +++ b/dygraph.js @@ -92,6 +92,9 @@ Dygraph.DEFAULT_ATTRS = { labelsSeparateLines: false, labelsKMB: false, labelsKMG2: false, + showLabelsOnHighlight: true, + + yValueFormatter: null, strokeWidth: 1.0, @@ -116,6 +119,7 @@ Dygraph.DEFAULT_ATTRS = { customBars: false, fillGraph: false, fillAlpha: 0.15, + connectSeparatedPoints: false, stackedGraph: false, hideOverlayOnMouseOut: true @@ -143,8 +147,8 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit * and interaction <canvas> inside of it. See the constructor for details * on the parameters. + * @param {Element} div the Element to render the graph into. * @param {String | Function} file Source data - * @param {Array.} labels Names of the data series * @param {Object} attrs Miscellaneous other options * @private */ @@ -209,6 +213,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.attrs_ = {}; Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS); + this.boundaryIds_ = []; + // Make a note of whether labels will be pulled from the CSV file. this.labelsFromCSV_ = (this.attr_("labels") == null); @@ -558,7 +564,7 @@ Dygraph.prototype.getColors = function() { Dygraph.findPosX = function(obj) { var curleft = 0; if(obj.offsetParent) - while(1) + while(1) { curleft += obj.offsetLeft; if(!obj.offsetParent) @@ -883,7 +889,7 @@ Dygraph.prototype.mouseMove_ = function(event) { var idx = -1; for (var i = 0; i < points.length; i++) { var dist = Math.abs(points[i].canvasx - canvasx); - if (dist > minDist) break; + if (dist > minDist) continue; minDist = dist; idx = i; } @@ -894,9 +900,22 @@ Dygraph.prototype.mouseMove_ = function(event) { // Extract the points we've selected this.selPoints_ = []; - for (var i = 0; i < points.length; i++) { + var cumulative_sum = 0; // used only if we have a stackedGraph. + var l = points.length; + for (var i = 0; i < l; i++) { if (points[i].xval == lastx) { - this.selPoints_.push(points[i]); + if (!this.attr_("stackedGraph")) { + this.selPoints_.push(points[i]); + } else { + // Clone the point, since we need to 'unstack' it below. Stacked points + // are in reverse order. + var p = {}; + for (var k in points[l - i - 1]) { + p[k] = points[l - i -1][k]; + } + p.yval -= cumulative_sum; + cumulative_sum += p.yval; + } } } @@ -905,25 +924,13 @@ Dygraph.prototype.mouseMove_ = function(event) { 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); - } + this.attr_("highlightCallback")(event, lastx, this.selPoints_); } } // Save last x position for callbacks. this.lastx_ = lastx; - + this.updateSelection_(); }; @@ -948,27 +955,34 @@ Dygraph.prototype.updateSelection_ = function() { // Set the status message to indicate the selected point(s) var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":"; + var fmtFunc = this.attr_('yValueFormatter'); var clen = this.colors_.length; - for (var i = 0; i < this.selPoints_.length; i++) { - if (!isOK(this.selPoints_[i].canvasy)) continue; - if (this.attr_("labelsSeparateLines")) { - replace += "
"; + + if (this.attr_('showLabelsOnHighlight')) { + // Set the status message to indicate the selected point(s) + for (var i = 0; i < this.selPoints_.length; i++) { + if (!isOK(this.selPoints_[i].canvasy)) continue; + if (this.attr_("labelsSeparateLines")) { + replace += "
"; + } + var point = this.selPoints_[i]; + var c = new RGBColor(this.colors_[i%clen]); + var yval = fmtFunc ? fmtFunc(point.yval) : this.round_(point.yval, 2); + replace += " " + + point.name + ":" + + yval; } - var point = this.selPoints_[i]; - var c = new RGBColor(this.colors_[i%clen]); - replace += " " - + point.name + ":" - + this.round_(point.yval, 2); + + this.attr_("labelsDiv").innerHTML = replace; } - this.attr_("labelsDiv").innerHTML = replace; // Draw colored circles over the center of each selected point ctx.save(); for (var i = 0; i < this.selPoints_.length; i++) { - if (!isOK(this.selPoints_[i%clen].canvasy)) continue; + if (!isOK(this.selPoints_[i].canvasy)) continue; ctx.beginPath(); - ctx.fillStyle = this.colors_[i%clen]; - ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize, + ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name]; + ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize, 0, 2 * Math.PI, false); ctx.fill(); } @@ -988,13 +1002,21 @@ Dygraph.prototype.setSelection = function(row) { // Extract the points we've selected this.selPoints_ = []; var pos = 0; - + if (row !== false) { + row = row-this.boundaryIds_[0][0]; + } + + if (row !== false && row >= 0) { for (var i in this.layout_.datasets) { - this.selPoints_.push(this.layout_.points[pos+row]); + if (row < this.layout_.datasets[i].length) { + this.selPoints_.push(this.layout_.points[pos+row]); + } pos += this.layout_.datasets[i].length; } - + } + + if (this.selPoints_.length) { this.lastx_ = this.selPoints_[0].xval; this.updateSelection_(); } else { @@ -1028,6 +1050,24 @@ Dygraph.prototype.clearSelection = function() { this.lastx_ = -1; } +/** + * Returns the number of the currently selected row + * @return int row number, of -1 if nothing is selected + * @public + */ +Dygraph.prototype.getSelection = function() { + if (!this.selPoints_ || this.selPoints_.length < 1) { + return -1; + } + + for (var row=0; row pixelsPerTick) break; @@ -1352,6 +1392,9 @@ Dygraph.numericTicks = function(minV, maxV, self) { k_labels = [ "k", "M", "G", "T" ]; } + // Allow reverse y-axis if it's explicitly requested. + if (low_val > high_val) scale *= -1; + for (var i = 0; i < nTicks; i++) { var tickV = low_val + i * scale; var absTickV = Math.abs(tickV); @@ -1443,6 +1486,8 @@ Dygraph.prototype.drawGraph_ = function(data) { this.setColors_(); this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize'); + var connectSeparatedPoints = this.attr_('connectSeparatedPoints'); + // For stacked series. var cumulative_y = []; var stacked_datasets = []; @@ -1453,8 +1498,10 @@ Dygraph.prototype.drawGraph_ = function(data) { var series = []; for (var j = 0; j < data.length; j++) { - var date = data[j][0]; - series[j] = [date, data[j][i]]; + if (data[j][i] || !connectSeparatedPoints) { + var date = data[j][0]; + series.push([date, data[j][i]]); + } } series = this.rollingAverage(series, this.rollPeriod_); @@ -1481,10 +1528,13 @@ Dygraph.prototype.drawGraph_ = function(data) { if (firstIdx > 0) firstIdx--; if (lastIdx === null) lastIdx = series.length - 1; if (lastIdx < series.length - 1) lastIdx++; + this.boundaryIds_[i-1] = [firstIdx, lastIdx]; for (var k = firstIdx; k <= lastIdx; k++) { pruned.push(series[k]); } series = pruned; + } else { + this.boundaryIds_[i-1] = [0, series.length-1]; } var extremes = this.extremeValues_(series); @@ -2113,7 +2163,7 @@ Dygraph.prototype.updateOptions = function(attrs) { // TODO(danvk): this doesn't match the constructor logic this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") }); - if (attrs['file'] && attrs['file'] != this.file_) { + if (attrs['file']) { this.file_ = attrs['file']; this.start_(); } else { @@ -2226,8 +2276,7 @@ Dygraph.GVizChart.prototype.draw = function(data, options) { /** * Google charts compatible setSelection - * Only row selection is supported, all points in the - * row will be highlighted + * Only row selection is supported, all points in the row will be highlighted * @param {Array} array of the selected cells * @public */ @@ -2239,5 +2288,26 @@ Dygraph.GVizChart.prototype.setSelection = function(selection_array) { this.date_graph.setSelection(row); } +/** + * Google charts compatible getSelection implementation + * @return {Array} array of the selected cells + * @public + */ +Dygraph.GVizChart.prototype.getSelection = function() { + var selection = []; + + var row = this.date_graph.getSelection(); + + if (row < 0) return selection; + + col = 1; + for (var i in this.date_graph.layout_.datasets) { + selection.push({row: row, column: col}); + col++; + } + + return selection; +} + // Older pages may still use this name. DateGraph = Dygraph;