labelsSeparateLines: false,
labelsKMB: false,
labelsKMG2: false,
+ showLabelsOnHighlight: true,
+
+ yValueFormatter: null,
strokeWidth: 1.0,
* 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.
Dygraph.findPosX = function(obj) {
var curleft = 0;
if(obj.offsetParent)
- while(1)
+ while(1)
{
curleft += obj.offsetLeft;
if(!obj.offsetParent)
// 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_();
};
// 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 += "<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.plotter_.colors[point.name]);
- replace += " <b><font color='" + c.toHex() + "'>"
- + point.name + "</font></b>:"
- + 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();
// 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) {
pos += this.layout_.datasets[i].length;
}
}
-
+
if (this.selPoints_.length) {
this.lastx_ = this.selPoints_[0].xval;
this.updateSelection_();
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];
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);
// 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 {
/**
* 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
*/
*/
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});