},
labelsSeparateLines: false,
labelsKMB: false,
+ labelsKMG2: false,
strokeWidth: 1.0,
xValueParser: Dygraph.dateParser,
xTicker: Dygraph.dateTicker,
+ delimiter: ',',
+
sigma: 2.0,
errorBars: false,
fractions: false,
if (labels != null) {
var new_labels = ["Date"];
for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
- MochiKit.Base.update(attrs, { 'labels': new_labels });
+ Dygraph.update(attrs, { 'labels': new_labels });
}
this.__init__(div, file, attrs);
};
// user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
// defaults without overriding behavior that the user specifically asks for.
this.user_attrs_ = {};
- MochiKit.Base.update(this.user_attrs_, attrs);
+ Dygraph.update(this.user_attrs_, attrs);
this.attrs_ = {};
- MochiKit.Base.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
+ Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
// Make a note of whether labels will be pulled from the CSV file.
this.labelsFromCSV_ = (this.attr_("labels") == null);
// 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 };
- MochiKit.Base.update(this.layoutOptions_, this.attrs_);
- MochiKit.Base.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 };
- MochiKit.Base.update(this.renderOptions_, this.attrs_);
- MochiKit.Base.update(this.renderOptions_, this.user_attrs_);
- this.plotter_ = new DygraphCanvasRenderer(this,
- this.hidden_, this.layout_,
- this.renderOptions_);
-
- this.createStatusMessage_();
- this.createRollInterface_();
- this.createDragInterface_();
-
- // connect(window, 'onload', this, function(e) { this.start_(); });
this.start_();
};
*/
Dygraph.prototype.rollPeriod = function() {
return this.rollPeriod_;
-}
+};
+
+Dygraph.addEvent = function(el, evt, fn) {
+ var normed_fn = function(e) {
+ if (!e) var e = window.event;
+ fn(e);
+ };
+ if (window.addEventListener) { // Mozilla, Netscape, Firefox
+ el.addEventListener(evt, normed_fn, false);
+ } else { // IE
+ el.attachEvent('on' + evt, normed_fn);
+ }
+};
/**
* 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() {
// Create the all-enclosing graph div
var enclosing = this.maindiv_;
- this.graphDiv = MochiKit.DOM.DIV( { style: { 'width': this.width_ + "px",
- 'height': this.height_ + "px"
- }});
- appendChildNodes(enclosing, this.graphDiv);
-
- // Create the canvas to store
- // We need to subtract out some space for the x- and y-axis labels.
- // For the x-axis:
- // - remove from height: (axisTickSize + height of tick label)
- // height of tick label == axisLabelFontSize?
- // - remove from width: axisLabelWidth / 2 (maybe on both ends)
- // For the y-axis:
- // - remove axisLabelFontSize from the top
- // - remove axisTickSize from the left
-
- var canvas = MochiKit.DOM.CANVAS;
- this.canvas_ = canvas( { style: { 'position': 'absolute' },
- width: this.width_,
- height: this.height_
- });
- appendChildNodes(this.graphDiv, this.canvas_);
-
+ this.graphDiv = document.createElement("div");
+ this.graphDiv.style.width = this.width_ + "px";
+ this.graphDiv.style.height = this.height_ + "px";
+ enclosing.appendChild(this.graphDiv);
+
+ // Create the canvas for interactive parts of the chart.
+ // 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.
this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
- connect(this.hidden_, 'onmousemove', this, function(e) { this.mouseMove_(e) });
- connect(this.hidden_, 'onmouseout', this, function(e) { this.mouseOut_(e) });
+
+ var dygraph = this;
+ Dygraph.addEvent(this.hidden_, 'mousemove', function(e) {
+ dygraph.mouseMove_(e);
+ });
+ 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_;
- MochiKit.DOM.appendChildNodes(this.graphDiv, h);
+ h.style.width = this.width_ + "px"; // for IE
+ h.style.height = this.height_ + "px"; // for IE
+ this.graphDiv.appendChild(h);
return h;
};
+// Taken from MochiKit.Color
+Dygraph.hsvToRGB = function (hue, saturation, value) {
+ var red;
+ var green;
+ var blue;
+ if (saturation === 0) {
+ red = value;
+ green = value;
+ blue = value;
+ } else {
+ var i = Math.floor(hue * 6);
+ var f = (hue * 6) - i;
+ var p = value * (1 - saturation);
+ var q = value * (1 - (saturation * f));
+ var t = value * (1 - (saturation * (1 - f)));
+ switch (i) {
+ case 1: red = q; green = value; blue = p; break;
+ case 2: red = p; green = value; blue = t; break;
+ case 3: red = p; green = q; blue = value; break;
+ case 4: red = t; green = p; blue = value; break;
+ case 5: red = value; green = p; blue = q; break;
+ case 6: // fall through
+ case 0: red = value; green = t; blue = p; break;
+ }
+ }
+ red = Math.floor(255 * red + 0.5);
+ green = Math.floor(255 * green + 0.5);
+ blue = Math.floor(255 * blue + 0.5);
+ return 'rgb(' + red + ',' + green + ',' + blue + ')';
+};
+
+
/**
* Generate a set of distinct colors for the data series. This is done with a
* color wheel. Saturation/Value are customizable, and the hue is
var val = this.attr_('colorValue') || 0.5;
for (var i = 1; i <= num; i++) {
var hue = (1.0*i/(1+num));
- this.colors_.push( MochiKit.Color.Color.fromHSV(hue, sat, val) );
+ this.colors_.push( Dygraph.hsvToRGB(hue, sat, val) );
}
} else {
for (var i = 0; i < num; i++) {
var colorStr = colors[i % colors.length];
- this.colors_.push( MochiKit.Color.Color.fromString(colorStr) );
+ this.colors_.push(colorStr);
}
}
// TODO(danvk): update this w/r/t/ the new options system.
this.renderOptions_.colorScheme = this.colors_;
- MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
- MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
- MochiKit.Base.update(this.layoutOptions_, this.attrs_);
+ Dygraph.update(this.plotter_.options, this.renderOptions_);
+ Dygraph.update(this.layoutOptions_, this.user_attrs_);
+ Dygraph.update(this.layoutOptions_, this.attrs_);
}
+// The following functions are from quirksmode.org
+// http://www.quirksmode.org/js/findpos.html
+Dygraph.findPosX = function(obj) {
+ var curleft = 0;
+ if (obj.offsetParent) {
+ while (obj.offsetParent) {
+ curleft += obj.offsetLeft;
+ obj = obj.offsetParent;
+ }
+ }
+ else if (obj.x)
+ curleft += obj.x;
+ return curleft;
+};
+
+Dygraph.findPosY = function(obj) {
+ var curtop = 0;
+ if (obj.offsetParent) {
+ while (obj.offsetParent) {
+ curtop += obj.offsetTop;
+ obj = obj.offsetParent;
+ }
+ }
+ else if (obj.y)
+ curtop += obj.y;
+ return curtop;
+};
+
/**
* Create the div that contains information on the selected point(s)
* This goes in the top right of the canvas, unless an external div has already
Dygraph.prototype.createStatusMessage_ = function(){
if (!this.attr_("labelsDiv")) {
var divWidth = this.attr_('labelsDivWidth');
- var messagestyle = { "style": {
+ var messagestyle = {
"position": "absolute",
"fontSize": "14px",
"zIndex": 10,
"left": (this.width_ - divWidth - 2) + "px",
"background": "white",
"textAlign": "left",
- "overflow": "hidden"}};
- MochiKit.Base.update(messagestyle["style"], this.attr_('labelsDivStyles'));
- var div = MochiKit.DOM.DIV(messagestyle);
- MochiKit.DOM.appendChildNodes(this.graphDiv, div);
+ "overflow": "hidden"};
+ Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
+ var div = document.createElement("div");
+ for (var name in messagestyle) {
+ if (messagestyle.hasOwnProperty(name)) {
+ div.style[name] = messagestyle[name];
+ }
+ }
+ this.graphDiv.appendChild(div);
this.attrs_.labelsDiv = div;
}
};
*/
Dygraph.prototype.createRollInterface_ = function() {
var display = this.attr_('showRoller') ? "block" : "none";
- var textAttr = { "type": "text",
- "size": "2",
- "value": this.rollPeriod_,
- "style": { "position": "absolute",
- "zIndex": 10,
- "top": (this.plotter_.area.h - 25) + "px",
- "left": (this.plotter_.area.x + 1) + "px",
- "display": display }
+ var textAttr = { "position": "absolute",
+ "zIndex": 10,
+ "top": (this.plotter_.area.h - 25) + "px",
+ "left": (this.plotter_.area.x + 1) + "px",
+ "display": display
};
- var roller = MochiKit.DOM.INPUT(textAttr);
+ var roller = document.createElement("input");
+ roller.type = "text";
+ roller.size = "2";
+ roller.value = this.rollPeriod_;
+ for (var name in textAttr) {
+ if (textAttr.hasOwnProperty(name)) {
+ roller.style[name] = textAttr[name];
+ }
+ }
+
var pa = this.graphDiv;
- MochiKit.DOM.appendChildNodes(pa, roller);
- connect(roller, 'onchange', this,
- function() { this.adjustRoll(roller.value); });
+ pa.appendChild(roller);
+ var dygraph = this;
+ roller.onchange = function() { dygraph.adjustRoll(roller.value); };
return roller;
-}
+};
+
+// These functions are taken from MochiKit.Signal
+Dygraph.pageX = function(e) {
+ if (e.pageX) {
+ return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
+ } else {
+ var de = document;
+ var b = document.body;
+ return e.clientX +
+ (de.scrollLeft || b.scrollLeft) -
+ (de.clientLeft || 0);
+ }
+};
+
+Dygraph.pageY = function(e) {
+ if (e.pageY) {
+ return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
+ } else {
+ var de = document;
+ var b = document.body;
+ return e.clientY +
+ (de.scrollTop || b.scrollTop) -
+ (de.clientTop || 0);
+ }
+};
/**
* Set up all the mouse handlers needed to capture dragging behavior for zoom
- * events. Uses MochiKit.Signal to attach all the event handlers.
+ * events.
* @private
*/
Dygraph.prototype.createDragInterface_ = function() {
var self = this;
// Tracks whether the mouse is down right now
- var mouseDown = false;
+ var isZooming = false;
+ var isPanning = false;
var dragStartX = null;
var dragStartY = null;
var dragEndX = null;
var dragEndY = null;
var prevEndX = null;
+ var draggingDate = null;
+ var dateRange = null;
// Utility function to convert page-wide coordinates to canvas coords
var px = 0;
var py = 0;
- var getX = function(e) { return e.mouse().page.x - px };
- var getY = function(e) { return e.mouse().page.y - py };
+ var getX = function(e) { return Dygraph.pageX(e) - px };
+ var getY = function(e) { return Dygraph.pageX(e) - py };
// Draw zoom rectangles when the mouse is down and the user moves around
- connect(this.hidden_, 'onmousemove', function(event) {
- if (mouseDown) {
+ Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
+ if (isZooming) {
dragEndX = getX(event);
dragEndY = getY(event);
self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
prevEndX = dragEndX;
+ } else if (isPanning) {
+ dragEndX = getX(event);
+ dragEndY = getY(event);
+
+ // Want to have it so that:
+ // 1. draggingDate appears at dragEndX
+ // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
+
+ self.dateWindow_[0] = draggingDate - (dragEndX / self.width_) * dateRange;
+ self.dateWindow_[1] = self.dateWindow_[0] + dateRange;
+ self.drawGraph_(self.rawData_);
}
});
// Track the beginning of drag events
- connect(this.hidden_, 'onmousedown', function(event) {
- mouseDown = true;
- px = PlotKit.Base.findPosX(self.canvas_);
- py = PlotKit.Base.findPosY(self.canvas_);
+ Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
+ px = Dygraph.findPosX(self.canvas_);
+ py = Dygraph.findPosY(self.canvas_);
dragStartX = getX(event);
dragStartY = getY(event);
+
+ if (event.altKey) {
+ if (!self.dateWindow_) return; // have to be zoomed in to pan.
+ isPanning = true;
+ dateRange = self.dateWindow_[1] - self.dateWindow_[0];
+ draggingDate = (dragStartX / self.width_) * dateRange +
+ self.dateWindow_[0];
+ } else {
+ isZooming = true;
+ }
});
// If the user releases the mouse button during a drag, but not over the
// canvas, then it doesn't count as a zooming action.
- connect(document, 'onmouseup', this, function(event) {
- if (mouseDown) {
- mouseDown = false;
+ Dygraph.addEvent(document, 'mouseup', function(event) {
+ if (isZooming || isPanning) {
+ isZooming = false;
dragStartX = null;
dragStartY = null;
}
+
+ if (isPanning) {
+ isPanning = false;
+ draggingDate = null;
+ dateRange = null;
+ }
});
// Temporarily cancel the dragging event when the mouse leaves the graph
- connect(this.hidden_, 'onmouseout', this, function(event) {
- if (mouseDown) {
+ Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
+ if (isZooming) {
dragEndX = null;
dragEndY = null;
}
// If the mouse is released on the canvas during a drag event, then it's a
// zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
- connect(this.hidden_, 'onmouseup', this, function(event) {
- if (mouseDown) {
- mouseDown = false;
+ Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
+ if (isZooming) {
+ isZooming = false;
dragEndX = getX(event);
dragEndY = getY(event);
var regionWidth = Math.abs(dragEndX - dragStartX);
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) {
dragStartX = null;
dragStartY = null;
}
+
+ if (isPanning) {
+ isPanning = false;
+ draggingDate = null;
+ dateRange = null;
+ }
});
// Double-clicking zooms back out
- connect(this.hidden_, 'ondblclick', this, function(event) {
+ 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];
* @private
*/
Dygraph.prototype.mouseMove_ = function(event) {
- var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_);
+ var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
var points = this.layout_.points;
var lastx = -1;
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];
- replace += " <b><font color='" + this.colors_[i%clen].toHexString() + "'>"
+ 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);
}
// 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].toRGBString();
- ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
+ ctx.fillStyle = this.colors_[i%clen];
+ 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;
if (granularity < Dygraph.MONTHLY) {
// Generate one tick mark for every fixed interval of time.
var spacing = Dygraph.SHORT_SPACINGS[granularity];
- var format = '%d%b'; // e.g. "1 Jan"
+ var format = '%d%b'; // e.g. "1Jan"
// TODO(danvk): be smarter about making sure this really hits a "nice" time.
if (granularity < Dygraph.HOURLY) {
start_time = spacing * Math.floor(0.5 + start_time / spacing);
// Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
// Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
// The first spacing greater than pixelsPerYLabel is what we use.
- var mults = [1, 2, 5];
+ if (self.attr_("labelsKMG2")) {
+ var mults = [1, 2, 4, 8];
+ } else {
+ var mults = [1, 2, 5];
+ }
var scale, low_val, high_val, nTicks;
// TODO(danvk): make it possible to set this for x- and y-axes independently.
var pixelsPerTick = self.attr_('pixelsPerYLabel');
for (var i = -10; i < 50; i++) {
- var base_scale = Math.pow(10, i);
+ if (self.attr_("labelsKMG2")) {
+ var base_scale = Math.pow(16, i);
+ } else {
+ var base_scale = Math.pow(10, i);
+ }
for (var j = 0; j < mults.length; j++) {
scale = base_scale * mults[j];
low_val = Math.floor(minV / scale) * scale;
// 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} );
} else {
for (var j = 0; j < series.length; j++) {
var y = series[j][1];
- if (!y) continue;
+ if (y === null || isNaN(y)) continue;
if (maxY == null || y > maxY) {
maxY = y;
}
this.addXTicks_();
// Tell PlotKit to use this new data and render itself
+ this.layout_.updateOptions({dateWindow: this.dateWindow_});
this.layout_.evaluateWithError();
this.plotter_.clear();
this.plotter_.render();
- this.canvas_.getContext('2d').clearRect(0, 0,
- this.canvas_.width, this.canvas_.height);
+ this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
+ this.canvas_.height);
};
/**
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);
Dygraph.prototype.parseCSV_ = function(data) {
var ret = [];
var lines = data.split("\n");
+
+ // Use the default delimiter or fall back to a tab if that makes sense.
+ var delim = this.attr_('delimiter');
+ if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
+ delim = '\t';
+ }
+
var start = 0;
if (this.labelsFromCSV_) {
start = 1;
- this.attrs_.labels = lines[0].split(",");
+ this.attrs_.labels = lines[0].split(delim);
}
var xParser;
for (var i = start; i < lines.length; i++) {
var line = lines[i];
if (line.length == 0) continue; // skip blank lines
- var inFields = line.split(',');
+ if (line[0] == '#') continue; // skip comment lines
+ var inFields = line.split(delim);
if (inFields.length < 2) continue;
var fields = [];
}
}
- if (MochiKit.Base.isDateLike(data[0][0])) {
+ if (Dygraph.isDateLike(data[0][0])) {
// Some intelligent defaults for a date x-axis.
this.attrs_.xValueFormatter = Dygraph.dateString_;
this.attrs_.xTicker = Dygraph.dateTicker;
// Assume they're all dates.
- var parsedData = MochiKit.Base.clone(data);
+ var parsedData = Dygraph.clone(data);
for (var i = 0; i < data.length; i++) {
if (parsedData[i].length == 0) {
this.error("Row " << (1 + i) << " of data is empty");
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') {
var ret = [];
for (var i = 0; i < rows; i++) {
var row = [];
- if (!data.getValue(i, 0)) continue;
+ if (typeof(data.getValue(i, 0)) === 'undefined' ||
+ data.getValue(i, 0) === null) {
+ this.warning("Ignoring row " + i +
+ " of DataTable because of undefined or null first column.");
+ continue;
+ }
+
if (indepType == 'date') {
row.push(data.getValue(i, 0).getTime());
} 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);
}
return ret;
}
+// These functions are all based on MochiKit.
+Dygraph.update = function (self, o) {
+ if (typeof(o) != 'undefined' && o !== null) {
+ for (var k in o) {
+ if (o.hasOwnProperty(k)) {
+ self[k] = o[k];
+ }
+ }
+ }
+ return self;
+};
+
+Dygraph.isArrayLike = function (o) {
+ var typ = typeof(o);
+ if (
+ (typ != 'object' && !(typ == 'function' &&
+ typeof(o.item) == 'function')) ||
+ o === null ||
+ typeof(o.length) != 'number' ||
+ o.nodeType === 3
+ ) {
+ return false;
+ }
+ return true;
+};
+
+Dygraph.isDateLike = function (o) {
+ if (typeof(o) != "object" || o === null ||
+ typeof(o.getTime) != 'function') {
+ return false;
+ }
+ return true;
+};
+
+Dygraph.clone = function(o) {
+ // TODO(danvk): figure out how MochiKit's version works
+ var r = [];
+ for (var i = 0; i < o.length; i++) {
+ if (Dygraph.isArrayLike(o[i])) {
+ r.push(Dygraph.clone(o[i]));
+ } else {
+ r.push(o[i]);
+ }
+ }
+ return r;
+};
+
+
/**
* Get the CSV data. If it's in a function, call that function. If it's in a
* file, do an XMLHttpRequest to get it.
if (typeof this.file_ == 'function') {
// CSV string. Pretend we got it via XHR.
this.loadedEvent_(this.file_());
- } else if (MochiKit.Base.isArrayLike(this.file_)) {
+ } else if (Dygraph.isArrayLike(this.file_)) {
this.rawData_ = this.parseArray_(this.file_);
this.drawGraph_(this.rawData_);
} else if (typeof this.file_ == 'object' &&
if (attrs.valueRange) {
this.valueRange_ = attrs.valueRange;
}
- MochiKit.Base.update(this.user_attrs_, attrs);
+ Dygraph.update(this.user_attrs_, attrs);
this.labelsFromCSV_ = (this.attr_("labels") == null);
};
/**
+ * 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;
+ }
+
+ // TODO(danvk): there should be a clear() method.
+ this.maindiv_.innerHTML = "";
+ this.attrs_.labelsDiv = null;
+
+ 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