},
labelsSeparateLines: false,
labelsKMB: false,
+ labelsKMG2: false,
strokeWidth: 1.0,
// Create the containing DIV and other interactive elements
this.createInterface_();
- // Create the PlotKit grapher
- // TODO(danvk): why does the Layout need its own set of options?
- this.layoutOptions_ = { 'errorBars': (this.attr_("errorBars") ||
- this.attr_("customBars")),
- 'xOriginIsZero': false };
- Dygraph.update(this.layoutOptions_, this.attrs_);
- Dygraph.update(this.layoutOptions_, this.user_attrs_);
-
- this.layout_ = new DygraphLayout(this, this.layoutOptions_);
-
- // TODO(danvk): why does the Renderer need its own set of options?
- this.renderOptions_ = { colorScheme: this.colors_,
- strokeColor: null,
- axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
- Dygraph.update(this.renderOptions_, this.attrs_);
- Dygraph.update(this.renderOptions_, this.user_attrs_);
- this.plotter_ = new DygraphCanvasRenderer(this,
- this.hidden_, this.layout_,
- this.renderOptions_);
-
- this.createStatusMessage_();
- this.createRollInterface_();
- this.createDragInterface_();
-
this.start_();
};
/**
* Generates interface elements for the Dygraph: a containing div, a div to
* display the current point, and a textbox to adjust the rolling average
- * period.
+ * period. Also creates the Renderer/Layout elements.
* @private
*/
Dygraph.prototype.createInterface_ = function() {
enclosing.appendChild(this.graphDiv);
// Create the canvas for interactive parts of the chart.
- this.canvas_ = document.createElement("canvas");
+ // this.canvas_ = document.createElement("canvas");
+ this.canvas_ = Dygraph.createCanvas();
this.canvas_.style.position = "absolute";
this.canvas_.width = this.width_;
this.canvas_.height = this.height_;
+ this.canvas_.style.width = this.width_ + "px"; // for IE
+ this.canvas_.style.height = this.height_ + "px"; // for IE
this.graphDiv.appendChild(this.canvas_);
// ... and for static parts of the chart.
Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
dygraph.mouseOut_(e);
});
+
+ // Create the grapher
+ // TODO(danvk): why does the Layout need its own set of options?
+ this.layoutOptions_ = { 'xOriginIsZero': false };
+ Dygraph.update(this.layoutOptions_, this.attrs_);
+ Dygraph.update(this.layoutOptions_, this.user_attrs_);
+ Dygraph.update(this.layoutOptions_, {
+ 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
+
+ this.layout_ = new DygraphLayout(this, this.layoutOptions_);
+
+ // TODO(danvk): why does the Renderer need its own set of options?
+ this.renderOptions_ = { colorScheme: this.colors_,
+ strokeColor: null,
+ axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
+ Dygraph.update(this.renderOptions_, this.attrs_);
+ Dygraph.update(this.renderOptions_, this.user_attrs_);
+ this.plotter_ = new DygraphCanvasRenderer(this,
+ this.hidden_, this.layout_,
+ this.renderOptions_);
+
+ this.createStatusMessage_();
+ this.createRollInterface_();
+ this.createDragInterface_();
}
/**
* @private
*/
Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
- var h = document.createElement("canvas");
+ // var h = document.createElement("canvas");
+ var h = Dygraph.createCanvas();
h.style.position = "absolute";
h.style.top = canvas.style.top;
h.style.left = canvas.style.left;
h.width = this.width_;
h.height = this.height_;
+ h.style.width = this.width_ + "px"; // for IE
+ h.style.height = this.height_ + "px"; // for IE
this.graphDiv.appendChild(h);
return h;
};
Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
var div = document.createElement("div");
for (var name in messagestyle) {
- div.style[name] = messagestyle[name];
+ if (messagestyle.hasOwnProperty(name)) {
+ div.style[name] = messagestyle[name];
+ }
}
this.graphDiv.appendChild(div);
this.attrs_.labelsDiv = div;
roller.size = "2";
roller.value = this.rollPeriod_;
for (var name in textAttr) {
- roller.style[name] = textAttr[name];
+ if (textAttr.hasOwnProperty(name)) {
+ roller.style[name] = textAttr[name];
+ }
}
var pa = this.graphDiv;
if (regionWidth < 2 && regionHeight < 2 &&
self.attr_('clickCallback') != null &&
self.lastx_ != undefined) {
- // TODO(danvk): pass along more info about the point.
- self.attr_('clickCallback')(event, new Date(self.lastx_));
+ // TODO(danvk): pass along more info about the points.
+ self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
}
if (regionWidth >= 10) {
// Double-clicking zooms back out
Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
+ if (self.dateWindow_ == null) return;
self.dateWindow_ = null;
self.drawGraph_(self.rawData_);
var minDate = self.rawData_[0][0];
lastx = points[points.length-1].xval;
// Extract the points we've selected
- var selPoints = [];
+ this.selPoints_ = [];
for (var i = 0; i < points.length; i++) {
if (points[i].xval == lastx) {
- selPoints.push(points[i]);
+ this.selPoints_.push(points[i]);
}
}
+ if (this.attr_("highlightCallback")) {
+ this.attr_("highlightCallback")(event, lastx, this.selPoints_);
+ }
+
// Clear the previously drawn vertical, if there is one
var circleSize = this.attr_('highlightCircleSize');
var ctx = this.canvas_.getContext("2d");
var isOK = function(x) { return x && !isNaN(x); };
- if (selPoints.length > 0) {
- var canvasx = selPoints[0].canvasx;
+ if (this.selPoints_.length > 0) {
+ var canvasx = this.selPoints_[0].canvasx;
// Set the status message to indicate the selected point(s)
var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
var clen = this.colors_.length;
- for (var i = 0; i < selPoints.length; i++) {
- if (!isOK(selPoints[i].canvasy)) continue;
+ for (var i = 0; i < this.selPoints_.length; i++) {
+ if (!isOK(this.selPoints_[i].canvasy)) continue;
if (this.attr_("labelsSeparateLines")) {
replace += "<br/>";
}
- var point = selPoints[i];
+ var point = this.selPoints_[i];
var c = new RGBColor(this.colors_[i%clen]);
replace += " <b><font color='" + c.toHex() + "'>"
+ point.name + "</font></b>:"
// Draw colored circles over the center of each selected point
ctx.save()
- for (var i = 0; i < selPoints.length; i++) {
- if (!isOK(selPoints[i%clen].canvasy)) continue;
+ for (var i = 0; i < this.selPoints_.length; i++) {
+ if (!isOK(this.selPoints_[i%clen].canvasy)) continue;
ctx.beginPath();
ctx.fillStyle = this.colors_[i%clen];
- ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
+ ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize,
+ 0, 2 * Math.PI, false);
ctx.fill();
}
ctx.restore();
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.HOURLY] = 1000 * 3600 * 6;
+Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
// Construct labels for the ticks
var ticks = [];
+ var k;
+ var k_labels = [];
+ if (self.attr_("labelsKMB")) {
+ k = 1000;
+ k_labels = [ "K", "M", "B", "T" ];
+ }
+ if (self.attr_("labelsKMG2")) {
+ if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
+ k = 1024;
+ k_labels = [ "k", "M", "G", "T" ];
+ }
+
for (var i = 0; i < nTicks; i++) {
var tickV = low_val + i * scale;
+ var absTickV = Math.abs(tickV);
var label = self.round_(tickV, 2);
- if (self.attr_("labelsKMB")) {
- var k = 1000;
- if (tickV >= k*k*k) {
- label = self.round_(tickV/(k*k*k), 1) + "B";
- } else if (tickV >= k*k) {
- label = self.round_(tickV/(k*k), 1) + "M";
- } else if (tickV >= k) {
- label = self.round_(tickV/k, 1) + "K";
+ 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];
+ break;
+ }
}
}
ticks.push( {label: label, v: tickV} );
var y = data[1];
rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
- low += data[0];
- mid += y;
- high += data[2];
- count += 1;
+ if (y != null && !isNaN(y)) {
+ low += data[0];
+ mid += y;
+ high += data[2];
+ count += 1;
+ }
if (i - rollPeriod >= 0) {
var prev = originalData[i - rollPeriod];
- low -= prev[1][0];
- mid -= prev[1][1];
- high -= prev[1][2];
- count -= 1;
+ if (prev[1][1] != null && !isNaN(prev[1][1])) {
+ low -= prev[1][0];
+ mid -= prev[1][1];
+ high -= prev[1][2];
+ count -= 1;
+ }
}
rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
1.0 * (mid - low) / count,
var num_ok = 0;
for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
var y = originalData[j][1];
- if (!y || isNaN(y)) continue;
+ if (y == null || isNaN(y)) continue;
num_ok++;
sum += originalData[j][1];
}
var num_ok = 0;
for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
var y = originalData[j][1][0];
- if (!y || isNaN(y)) continue;
+ if (y == null || isNaN(y)) continue;
num_ok++;
sum += originalData[j][1][0];
variance += Math.pow(originalData[j][1][1], 2);
var labels = [];
for (var i = 0; i < cols; i++) {
labels.push(data.getColumnLabel(i));
+ if (i != 0 && this.attr_("errorBars")) i += 1;
}
this.attrs_.labels = labels;
+ cols = labels.length;
var indepType = data.getColumnType(0);
if (indepType == 'date') {
} else {
row.push(data.getValue(i, 0));
}
- for (var j = 1; j < cols; j++) {
- row.push(data.getValue(i, j));
+ if (!this.attr_("errorBars")) {
+ for (var j = 1; j < cols; j++) {
+ row.push(data.getValue(i, j));
+ }
+ } else {
+ for (var j = 0; j < cols - 1; j++) {
+ row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
+ }
}
ret.push(row);
}
Dygraph.update = function (self, o) {
if (typeof(o) != 'undefined' && o !== null) {
for (var k in o) {
- self[k] = o[k];
+ if (o.hasOwnProperty(k)) {
+ self[k] = o[k];
+ }
}
}
return self;
};
/**
+ * Resizes the dygraph. If no parameters are specified, resizes to fill the
+ * containing div (which has presumably changed size since the dygraph was
+ * instantiated. If the width/height are specified, the div will be resized.
+ *
+ * This is far more efficient than destroying and re-instantiating a
+ * Dygraph, since it doesn't have to reparse the underlying data.
+ *
+ * @param {Number} width Width (in pixels)
+ * @param {Number} height Height (in pixels)
+ */
+Dygraph.prototype.resize = function(width, height) {
+ if ((width === null) != (height === null)) {
+ this.warn("Dygraph.resize() should be called with zero parameters or " +
+ "two non-NULL parameters. Pretending it was zero.");
+ width = height = null;
+ }
+
+ this.maindiv_.innerHTML = "";
+ if (width) {
+ this.maindiv_.style.width = width + "px";
+ this.maindiv_.style.height = height + "px";
+ this.width_ = width;
+ this.height_ = height;
+ } else {
+ this.width_ = this.maindiv_.offsetWidth;
+ this.height_ = this.maindiv_.offsetHeight;
+ }
+
+ this.createInterface_();
+ this.drawGraph_(this.rawData_);
+};
+
+/**
* Adjusts the number of days in the rolling average. Updates the graph to
* reflect the new averaging period.
* @param {Number} length Number of days over which to average the data.
this.drawGraph_(this.rawData_);
};
+/**
+ * Create a new canvas element. This is more complex than a simple
+ * document.createElement("canvas") because of IE and excanvas.
+ */
+Dygraph.createCanvas = function() {
+ var canvas = document.createElement("canvas");
+
+ isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
+ if (isIE) {
+ canvas = G_vmlCanvasManager.initElement(canvas);
+ }
+
+ return canvas;
+};
+
/**
* A wrapper around Dygraph that implements the gviz API.
projects / dygraphs.git / blobdiff