labelsSeparateLines: false,
labelsKMB: false,
labelsKMG2: false,
+ showLabelsOnHighlight: true,
+
+ yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
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.
if (!colors) {
var sat = this.attr_('colorSaturation') || 1.0;
var val = this.attr_('colorValue') || 0.5;
+ var half = Math.ceil(num / 2);
for (var i = 1; i <= num; i++) {
if (!this.visibility()[i-1]) continue;
// alternate colors for high contrast.
- var idx = i - parseInt(i % 2 ? i / 2 : (i - num)/2, 10);
+ var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
var hue = (1.0 * idx/ (1 + num));
this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
}
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;
+ var isStacked = this.attr_("stackedGraph");
+ for (var i = l - 1; i >= 0; i--) {
if (points[i].xval == lastx) {
- this.selPoints_.push(points[i]);
+ if (!isStacked) {
+ this.selPoints_.unshift(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[i]) {
+ p[k] = points[i][k];
+ }
+ p.yval -= cumulative_sum;
+ cumulative_sum += p.yval;
+ this.selPoints_.push(p);
+ }
}
}
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(point.yval);
+ 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;
}
- 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();
}
// 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];
* @return {Number} The rounded number
* @private
*/
-Dygraph.prototype.round_ = function(num, places) {
+Dygraph.round_ = function(num, places) {
var shift = Math.pow(10, places);
return Math.round(num * shift)/shift;
};
for (var i = 0; i < nTicks; i++) {
var tickV = low_val + i * scale;
var absTickV = Math.abs(tickV);
- var label = self.round_(tickV, 2);
+ var label = Dygraph.round_(tickV, 2);
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];
+ label = Dygraph.round_(tickV / n, 1) + k_labels[j];
break;
}
}
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_);
/**
* 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});
projects / dygraphs.git / blobdiff