labelsSeparateLines: false,
labelsKMB: false,
labelsKMG2: false,
+ showLabelsOnHighlight: true,
+
+ yValueFormatter: null,
strokeWidth: 1.0,
customBars: false,
fillGraph: false,
fillAlpha: 0.15,
+ connectSeparatedPoints: false,
stackedGraph: false,
hideOverlayOnMouseOut: true
* 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.<String>} labels Names of the data series
* @param {Object} attrs Miscellaneous other options
* @private
*/
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);
Dygraph.findPosX = function(obj) {
var curleft = 0;
if(obj.offsetParent)
- while(1)
+ while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
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;
}
// 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;
+ }
}
}
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_();
+};
+
+/**
+ * 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 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 += "<br/>";
+
+ 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 += "<br/>";
+ }
+ 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 += " <b><font color='" + c.toHex() + "'>"
+ + point.name + "</font></b>:"
+ + yval;
}
- var point = this.selPoints_[i];
- var c = new RGBColor(this.colors_[i%clen]);
- replace += " <b><font color='" + c.toHex() + "'>"
- + point.name + "</font></b>:"
- + this.round_(point.yval, 2);
- }
- this.attr_("labelsDiv").innerHTML = replace;
- // Save last x position for callbacks.
- this.lastx_ = lastx;
+ 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();
}
};
/**
+ * 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) {
+ row = row-this.boundaryIds_[0][0];
+ }
+
+ if (row !== false && row >= 0) {
+ for (var i in this.layout_.datasets) {
+ 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 {
+ 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")) {
- // 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.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;
+}
+
+/**
+ * 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<this.layout_.points.length; row++ ) {
+ if (this.layout_.points[row].x == this.selPoints_[0].x) {
+ return row + this.boundaryIds_[0][0];
+ }
+ }
+ return -1;
+}
+
Dygraph.zeropad = function(x) {
if (x < 10) return "0" + x; else return "" + x;
}
scale = base_scale * mults[j];
low_val = Math.floor(minV / scale) * scale;
high_val = Math.ceil(maxV / scale) * scale;
- nTicks = (high_val - low_val) / scale;
+ nTicks = Math.abs(high_val - low_val) / scale;
var spacing = self.height_ / nTicks;
// wish I could break out of both loops at once...
if (spacing > pixelsPerTick) break;
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);
this.setColors_();
this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
+ var connectSeparatedPoints = this.attr_('connectSeparatedPoints');
+
// For stacked series.
var cumulative_y = [];
var stacked_datasets = [];
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_);
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);
// 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 {
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);
+}
+
+/**
+ * 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;