X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=c893e027b7c9ab8669727da9d1c1191ddbda6f6e;hb=21ff17d117faed5a1654c4b5032c4a10d89fcd5a;hp=f5b5d725c25f0bf37b207ec6aee752c7d91d7a56;hpb=d955e223be111db06e403e9e40cc5007270c0950;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index f5b5d72..c893e02 100644 --- a/dygraph.js +++ b/dygraph.js @@ -3,42 +3,41 @@ /** * @fileoverview Creates an interactive, zoomable graph based on a CSV file or - * string. DateGraph can handle multiple series with or without error bars. The - * date/value ranges will be automatically set. DateGraph uses the + * string. Dygraph can handle multiple series with or without error bars. The + * date/value ranges will be automatically set. Dygraph uses the * <canvas> tag, so it only works in FF1.5+. * @author danvdk@gmail.com (Dan Vanderkam) Usage:
The CSV file is of the form + Date,SeriesA,SeriesB,SeriesC YYYYMMDD,A1,B1,C1 YYYYMMDD,A2,B2,C2 - If null is passed as the third parameter (series names), then the first line - of the CSV file is assumed to contain names for each series. - If the 'errorBars' option is set in the constructor, the input should be of the form + Date,SeriesA,SeriesB,... YYYYMMDD,A1,sigmaA1,B1,sigmaB1,... YYYYMMDD,A2,sigmaA2,B2,sigmaB2,... If the 'fractions' option is set, the input should be of the form: + Date,SeriesA,SeriesB,... YYYYMMDD,A1/B1,A2/B2,... YYYYMMDD,A1/B1,A2/B2,... And error bars will be calculated automatically using a binomial distribution. - For further documentation and examples, see http://www/~danvk/dg/ + For further documentation and examples, see http://www.danvk.org/dygraphs */ @@ -48,33 +47,91 @@ * returns this data. The expected format for each line is * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set, * YYYYMMDD,val1,stddev1,val2,stddev2,... - * @param {Array.} labels Labels for the data series * @param {Object} attrs Various other attributes, e.g. errorBars determines * whether the input data contains error ranges. */ -DateGraph = function(div, file, labels, attrs) { - if (arguments.length > 0) - this.__init__(div, file, labels, attrs); +Dygraph = function(div, data, opts) { + if (arguments.length > 0) { + if (arguments.length == 4) { + // Old versions of dygraphs took in the series labels as a constructor + // parameter. This doesn't make sense anymore, but it's easy to continue + // to support this usage. + this.warn("Using deprecated four-argument dygraph constructor"); + this.__old_init__(div, data, arguments[2], arguments[3]); + } else { + this.__init__(div, data, opts); + } + } }; -DateGraph.NAME = "DateGraph"; -DateGraph.VERSION = "1.1"; -DateGraph.__repr__ = function() { +Dygraph.NAME = "Dygraph"; +Dygraph.VERSION = "1.2"; +Dygraph.__repr__ = function() { return "[" + this.NAME + " " + this.VERSION + "]"; }; -DateGraph.toString = function() { +Dygraph.toString = function() { return this.__repr__(); }; // Various default values -DateGraph.DEFAULT_ROLL_PERIOD = 1; -DateGraph.DEFAULT_WIDTH = 480; -DateGraph.DEFAULT_HEIGHT = 320; -DateGraph.DEFAULT_STROKE_WIDTH = 1.0; -DateGraph.AXIS_LINE_WIDTH = 0.3; +Dygraph.DEFAULT_ROLL_PERIOD = 1; +Dygraph.DEFAULT_WIDTH = 480; +Dygraph.DEFAULT_HEIGHT = 320; +Dygraph.AXIS_LINE_WIDTH = 0.3; + +// Default attribute values. +Dygraph.DEFAULT_ATTRS = { + highlightCircleSize: 3, + pixelsPerXLabel: 60, + pixelsPerYLabel: 30, + + labelsDivWidth: 250, + labelsDivStyles: { + // TODO(danvk): move defaults from createStatusMessage_ here. + }, + labelsSeparateLines: false, + labelsKMB: false, + + strokeWidth: 1.0, + + axisTickSize: 3, + axisLabelFontSize: 14, + xAxisLabelWidth: 50, + yAxisLabelWidth: 50, + rightGap: 5, + + showRoller: false, + xValueFormatter: Dygraph.dateString_, + xValueParser: Dygraph.dateParser, + xTicker: Dygraph.dateTicker, + + sigma: 2.0, + errorBars: false, + fractions: false, + wilsonInterval: true, // only relevant if fractions is true + customBars: false +}; + +// Various logging levels. +Dygraph.DEBUG = 1; +Dygraph.INFO = 2; +Dygraph.WARNING = 3; +Dygraph.ERROR = 3; + +Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { + // Labels is no longer a constructor parameter, since it's typically set + // directly from the data source. It also conains a name for the x-axis, + // which the previous constructor form did not. + 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 }); + } + this.__init__(div, file, attrs); +}; /** - * Initializes the DateGraph. This creates a new DIV and constructs the PlotKit + * 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 {String | Function} file Source data @@ -82,68 +139,75 @@ DateGraph.AXIS_LINE_WIDTH = 0.3; * @param {Object} attrs Miscellaneous other options * @private */ -DateGraph.prototype.__init__ = function(div, file, labels, attrs) { +Dygraph.prototype.__init__ = function(div, file, attrs) { + // Support two-argument constructor + if (attrs == null) { attrs = {}; } + // Copy the important bits into the object // TODO(danvk): most of these should just stay in the attrs_ dictionary. this.maindiv_ = div; - this.labels_ = labels; this.file_ = file; - this.rollPeriod_ = attrs.rollPeriod || DateGraph.DEFAULT_ROLL_PERIOD; + this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD; this.previousVerticalX_ = -1; - this.width_ = parseInt(div.style.width, 10); - this.height_ = parseInt(div.style.height, 10); - this.errorBars_ = attrs.errorBars || false; this.fractions_ = attrs.fractions || false; - this.strokeWidth_ = attrs.strokeWidth || DateGraph.DEFAULT_STROKE_WIDTH; this.dateWindow_ = attrs.dateWindow || null; this.valueRange_ = attrs.valueRange || null; - this.labelsSeparateLines = attrs.labelsSeparateLines || false; - this.labelsDiv_ = attrs.labelsDiv || null; - this.labelsKMB_ = attrs.labelsKMB || false; - this.minTickSize_ = attrs.minTickSize || 0; - this.xValueParser_ = attrs.xValueParser || DateGraph.prototype.dateParser; - this.xValueFormatter_ = attrs.xValueFormatter || - DateGraph.prototype.dateString_; - this.xTicker_ = attrs.xTicker || DateGraph.prototype.dateTicker; - this.sigma_ = attrs.sigma || 2.0; this.wilsonInterval_ = attrs.wilsonInterval || true; this.customBars_ = attrs.customBars || false; - this.attrs_ = attrs; - if (typeof this.attrs_.pixelsPerXLabel == 'undefined') { - this.attrs_.pixelsPerXLabel = 60; - } + // Clear the div. This ensure that, if multiple dygraphs are passed the same + // div, then only one will be drawn. + div.innerHTML = ""; - // Make a note of whether labels will be pulled from the CSV file. - this.labelsFromCSV_ = (this.labels_ == null); - if (this.labels_ == null) - this.labels_ = []; + // If the div isn't already sized then give it a default size. + if (div.style.width == '') { + div.style.width = Dygraph.DEFAULT_WIDTH + "px"; + } + if (div.style.height == '') { + div.style.height = Dygraph.DEFAULT_HEIGHT + "px"; + } + this.width_ = parseInt(div.style.width, 10); + this.height_ = parseInt(div.style.height, 10); - // Prototype of the callback is "void clickCallback(event, date)" - this.clickCallback_ = attrs.clickCallback || null; + // Dygraphs has many options, some of which interact with one another. + // To keep track of everything, we maintain two sets of options: + // + // this.user_attrs_ only options explicitly set by the user. + // this.attrs_ defaults, options derived from user_attrs_, data. + // + // Options are then accessed this.attr_('attr'), which first looks at + // 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); + + this.attrs_ = {}; + MochiKit.Base.update(this.attrs_, Dygraph.DEFAULT_ATTRS); - // Prototype of zoom callback is "void dragCallback(minDate, maxDate)" - this.zoomCallback_ = attrs.zoomCallback || null; + // 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 - this.layoutOptions_ = { 'errorBars': (this.errorBars_ || this.customBars_), + // TODO(danvk): why does the Layout need its own set of options? + this.layoutOptions_ = { 'errorBars': (this.attr_("errorBars") || + this.customBars_), 'xOriginIsZero': false }; - MochiKit.Base.update(this.layoutOptions_, attrs); - this.setColors_(attrs); + MochiKit.Base.update(this.layoutOptions_, this.attrs_); + MochiKit.Base.update(this.layoutOptions_, this.user_attrs_); - this.layout_ = new DateGraphLayout(this.layoutOptions_); + this.layout_ = new DygraphLayout(this.layoutOptions_); + // TODO(danvk): why does the Renderer need its own set of options? this.renderOptions_ = { colorScheme: this.colors_, strokeColor: null, - strokeWidth: this.strokeWidth_, - axisLabelFontSize: 14, - axisLineWidth: DateGraph.AXIS_LINE_WIDTH }; - MochiKit.Base.update(this.renderOptions_, attrs); - this.plotter_ = new DateGraphCanvasRenderer(this.hidden_, this.layout_, - this.renderOptions_); + 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.hidden_, this.layout_, + this.renderOptions_); this.createStatusMessage_(); this.createRollInterface_(); @@ -153,21 +217,60 @@ DateGraph.prototype.__init__ = function(div, file, labels, attrs) { this.start_(); }; +Dygraph.prototype.attr_ = function(name) { + if (typeof(this.user_attrs_[name]) != 'undefined') { + return this.user_attrs_[name]; + } else if (typeof(this.attrs_[name]) != 'undefined') { + return this.attrs_[name]; + } else { + return null; + } +}; + +// TODO(danvk): any way I can get the line numbers to be this.warn call? +Dygraph.prototype.log = function(severity, message) { + if (typeof(console) != 'undefined') { + switch (severity) { + case Dygraph.DEBUG: + console.debug('dygraphs: ' + message); + break; + case Dygraph.INFO: + console.info('dygraphs: ' + message); + break; + case Dygraph.WARNING: + console.warn('dygraphs: ' + message); + break; + case Dygraph.ERROR: + console.error('dygraphs: ' + message); + break; + } + } +} +Dygraph.prototype.info = function(message) { + this.log(Dygraph.INFO, message); +} +Dygraph.prototype.warn = function(message) { + this.log(Dygraph.WARNING, message); +} +Dygraph.prototype.error = function(message) { + this.log(Dygraph.ERROR, message); +} + /** * Returns the current rolling period, as set by the user or an option. * @return {Number} The number of days in the rolling window */ -DateGraph.prototype.rollPeriod = function() { +Dygraph.prototype.rollPeriod = function() { return this.rollPeriod_; } /** - * Generates interface elements for the DateGraph: a containing div, a div to + * 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. * @private */ -DateGraph.prototype.createInterface_ = function() { +Dygraph.prototype.createInterface_ = function() { // Create the all-enclosing graph div var enclosing = this.maindiv_; @@ -177,10 +280,20 @@ DateGraph.prototype.createInterface_ = function() { 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_}); + height: this.height_ + }); appendChildNodes(this.graphDiv, this.canvas_); this.hidden_ = this.createPlotKitCanvas_(this.canvas_); @@ -190,12 +303,12 @@ DateGraph.prototype.createInterface_ = function() { /** * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on - * this particular canvas. All DateGraph work is done on this.canvas_. - * @param {Object} canvas The DateGraph canvas to over which to overlay the plot + * this particular canvas. All Dygraph work is done on this.canvas_. + * @param {Object} canvas The Dygraph canvas over which to overlay the plot * @return {Object} The newly-created canvas * @private */ -DateGraph.prototype.createPlotKitCanvas_ = function(canvas) { +Dygraph.prototype.createPlotKitCanvas_ = function(canvas) { var h = document.createElement("canvas"); h.style.position = "absolute"; h.style.top = canvas.style.top; @@ -211,25 +324,33 @@ DateGraph.prototype.createPlotKitCanvas_ = function(canvas) { * color wheel. Saturation/Value are customizable, and the hue is * equally-spaced around the color wheel. If a custom set of colors is * specified, that is used instead. - * @param {Object} attrs Various attributes, e.g. saturation and value * @private */ -DateGraph.prototype.setColors_ = function(attrs) { - var num = this.labels_.length; +Dygraph.prototype.setColors_ = function() { + // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do + // away with this.renderOptions_. + var num = this.attr_("labels").length - 1; this.colors_ = []; - if (!attrs.colors) { - var sat = attrs.colorSaturation || 1.0; - var val = attrs.colorValue || 0.5; + var colors = this.attr_('colors'); + if (!colors) { + var sat = this.attr_('colorSaturation') || 1.0; + 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) ); } } else { for (var i = 0; i < num; i++) { - var colorStr = attrs.colors[i % attrs.colors.length]; + var colorStr = colors[i % colors.length]; this.colors_.push( MochiKit.Color.Color.fromString(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_); } /** @@ -238,21 +359,23 @@ DateGraph.prototype.setColors_ = function(attrs) { * been specified. * @private */ -DateGraph.prototype.createStatusMessage_ = function(){ - if (!this.labelsDiv_) { - var divWidth = 250; +Dygraph.prototype.createStatusMessage_ = function(){ + if (!this.attr_("labelsDiv")) { + var divWidth = this.attr_('labelsDivWidth'); var messagestyle = { "style": { "position": "absolute", "fontSize": "14px", "zIndex": 10, "width": divWidth + "px", "top": "0px", - "left": this.width_ - divWidth + "px", + "left": (this.width_ - divWidth - 2) + "px", "background": "white", "textAlign": "left", "overflow": "hidden"}}; - this.labelsDiv_ = MochiKit.DOM.DIV(messagestyle); - MochiKit.DOM.appendChildNodes(this.graphDiv, this.labelsDiv_); + MochiKit.Base.update(messagestyle["style"], this.attr_('labelsDivStyles')); + var div = MochiKit.DOM.DIV(messagestyle); + MochiKit.DOM.appendChildNodes(this.graphDiv, div); + this.attrs_.labelsDiv = div; } }; @@ -261,19 +384,15 @@ DateGraph.prototype.createStatusMessage_ = function(){ * @return {Object} The newly-created text box * @private */ -DateGraph.prototype.createRollInterface_ = function() { - var padding = this.plotter_.options.padding; - if (typeof this.attrs_.showRoller == 'undefined') { - this.attrs_.showRoller = false; - } - var display = this.attrs_.showRoller ? "block" : "none"; +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.height_ - 25 - padding.bottom) + "px", - "left": (padding.left+1) + "px", + "top": (this.plotter_.area.h - 25) + "px", + "left": (this.plotter_.area.x + 1) + "px", "display": display } }; var roller = MochiKit.DOM.INPUT(textAttr); @@ -289,7 +408,7 @@ DateGraph.prototype.createRollInterface_ = function() { * events. Uses MochiKit.Signal to attach all the event handlers. * @private */ -DateGraph.prototype.createDragInterface_ = function() { +Dygraph.prototype.createDragInterface_ = function() { var self = this; // Tracks whether the mouse is down right now @@ -355,9 +474,10 @@ DateGraph.prototype.createDragInterface_ = function() { var regionHeight = Math.abs(dragEndY - dragStartY); if (regionWidth < 2 && regionHeight < 2 && - self.clickCallback_ != null && + self.attr_('clickCallback') != null && self.lastx_ != undefined) { - self.clickCallback_(event, new Date(self.lastx_)); + // TODO(danvk): pass along more info about the point. + self.attr_('clickCallback')(event, new Date(self.lastx_)); } if (regionWidth >= 10) { @@ -380,8 +500,8 @@ DateGraph.prototype.createDragInterface_ = function() { self.drawGraph_(self.rawData_); var minDate = self.rawData_[0][0]; var maxDate = self.rawData_[self.rawData_.length - 1][0]; - if (self.zoomCallback_) { - self.zoomCallback_(minDate, maxDate); + if (self.attr_("zoomCallback")) { + self.attr_("zoomCallback")(minDate, maxDate); } }); }; @@ -398,7 +518,7 @@ DateGraph.prototype.createDragInterface_ = function() { * function. Used to avoid excess redrawing * @private */ -DateGraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) { +Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) { var ctx = this.canvas_.getContext("2d"); // Clean up from the previous rect if necessary @@ -423,7 +543,7 @@ DateGraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) { * @param {Number} highX The rightmost pixel value that should be visible. * @private */ -DateGraph.prototype.doZoom_ = function(lowX, highX) { +Dygraph.prototype.doZoom_ = function(lowX, highX) { // Find the earliest and latest dates contained in this canvasx range. var points = this.layout_.points; var minDate = null; @@ -441,8 +561,8 @@ DateGraph.prototype.doZoom_ = function(lowX, highX) { this.dateWindow_ = [minDate, maxDate]; this.drawGraph_(this.rawData_); - if (this.zoomCallback_) { - this.zoomCallback_(minDate, maxDate); + if (this.attr_("zoomCallback")) { + this.attr_("zoomCallback")(minDate, maxDate); } }; @@ -453,7 +573,7 @@ DateGraph.prototype.doZoom_ = function(lowX, highX) { * @param {Object} event The mousemove event from the browser. * @private */ -DateGraph.prototype.mouseMove_ = function(event) { +Dygraph.prototype.mouseMove_ = function(event) { var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_); var points = this.layout_.points; @@ -484,21 +604,24 @@ DateGraph.prototype.mouseMove_ = function(event) { } // Clear the previously drawn vertical, if there is one - var circleSize = 3; + var circleSize = this.attr_('highlightCircleSize'); var ctx = this.canvas_.getContext("2d"); if (this.previousVerticalX_ >= 0) { var px = this.previousVerticalX_; ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_); } + var isOK = function(x) { return x && !isNaN(x); }; + if (selPoints.length > 0) { var canvasx = selPoints[0].canvasx; // Set the status message to indicate the selected point(s) - var replace = this.xValueFormatter_(lastx) + ":"; + var replace = this.attr_('xValueFormatter')(lastx, this) + ":"; var clen = this.colors_.length; for (var i = 0; i < selPoints.length; i++) { - if (this.labelsSeparateLines) { + if (!isOK(selPoints[i].canvasy)) continue; + if (this.attr_("labelsSeparateLines")) { replace += "
"; } var point = selPoints[i]; @@ -506,7 +629,7 @@ DateGraph.prototype.mouseMove_ = function(event) { + point.name + ":" + this.round_(point.yval, 2); } - this.labelsDiv_.innerHTML = replace; + this.attr_("labelsDiv").innerHTML = replace; // Save last x position for callbacks. this.lastx_ = lastx; @@ -514,6 +637,7 @@ DateGraph.prototype.mouseMove_ = function(event) { // 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; ctx.beginPath(); ctx.fillStyle = this.colors_[i%clen].toRGBString(); ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false); @@ -530,14 +654,14 @@ DateGraph.prototype.mouseMove_ = function(event) { * @param {Object} event the mouseout event from the browser. * @private */ -DateGraph.prototype.mouseOut_ = function(event) { +Dygraph.prototype.mouseOut_ = function(event) { // Get rid of the overlay data var ctx = this.canvas_.getContext("2d"); ctx.clearRect(0, 0, this.width_, this.height_); - this.labelsDiv_.innerHTML = ""; + this.attr_("labelsDiv").innerHTML = ""; }; -DateGraph.zeropad = function(x) { +Dygraph.zeropad = function(x) { if (x < 10) return "0" + x; else return "" + x; } @@ -547,8 +671,8 @@ DateGraph.zeropad = function(x) { * @return {String} A time of the form "HH:MM:SS" * @private */ -DateGraph.prototype.hmsString_ = function(date) { - var zeropad = DateGraph.zeropad; +Dygraph.prototype.hmsString_ = function(date) { + var zeropad = Dygraph.zeropad; var d = new Date(date); if (d.getSeconds()) { return zeropad(d.getHours()) + ":" + @@ -566,9 +690,10 @@ DateGraph.prototype.hmsString_ = function(date) { * @param {Number} date The JavaScript date (ms since epoch) * @return {String} A date of the form "YYYY/MM/DD" * @private + * TODO(danvk): why is this part of the prototype? */ -DateGraph.prototype.dateString_ = function(date) { - var zeropad = DateGraph.zeropad; +Dygraph.dateString_ = function(date, self) { + var zeropad = Dygraph.zeropad; var d = new Date(date); // Get the year: @@ -580,7 +705,7 @@ DateGraph.prototype.dateString_ = function(date) { var ret = ""; var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds(); - if (frac) ret = " " + this.hmsString_(date); + if (frac) ret = " " + self.hmsString_(date); return year + "/" + month + "/" + day + ret; }; @@ -592,7 +717,7 @@ DateGraph.prototype.dateString_ = function(date) { * @return {Number} The rounded number * @private */ -DateGraph.prototype.round_ = function(num, places) { +Dygraph.prototype.round_ = function(num, places) { var shift = Math.pow(10, places); return Math.round(num * shift)/shift; }; @@ -602,20 +727,20 @@ DateGraph.prototype.round_ = function(num, places) { * @param {String} data Raw CSV data to be plotted * @private */ -DateGraph.prototype.loadedEvent_ = function(data) { +Dygraph.prototype.loadedEvent_ = function(data) { this.rawData_ = this.parseCSV_(data); this.drawGraph_(this.rawData_); }; -DateGraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", - "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; -DateGraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"]; +Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", + "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; +Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"]; /** * Add ticks on the x-axis representing years, months, quarters, weeks, or days * @private */ -DateGraph.prototype.addXTicks_ = function() { +Dygraph.prototype.addXTicks_ = function() { // Determine the correct ticks scale on the x-axis: quarterly, monthly, ... var startDate, endDate; if (this.dateWindow_) { @@ -626,47 +751,57 @@ DateGraph.prototype.addXTicks_ = function() { endDate = this.rawData_[this.rawData_.length - 1][0]; } - var xTicks = this.xTicker_(startDate, endDate); + var xTicks = this.attr_('xTicker')(startDate, endDate, this); this.layout_.updateOptions({xTicks: xTicks}); }; // Time granularity enumeration -DateGraph.SECONDLY = 0; -DateGraph.MINUTELY = 1; -DateGraph.HOURLY = 2; -DateGraph.DAILY = 3; -DateGraph.WEEKLY = 4; -DateGraph.MONTHLY = 5; -DateGraph.QUARTERLY = 6; -DateGraph.BIANNUAL = 7; -DateGraph.ANNUAL = 8; -DateGraph.DECADAL = 9; -DateGraph.NUM_GRANULARITIES = 10; - -DateGraph.SHORT_SPACINGS = []; -DateGraph.SHORT_SPACINGS[DateGraph.SECONDLY] = 1000 * 1; -DateGraph.SHORT_SPACINGS[DateGraph.MINUTELY] = 1000 * 60; -DateGraph.SHORT_SPACINGS[DateGraph.HOURLY] = 1000 * 3600; -DateGraph.SHORT_SPACINGS[DateGraph.DAILY] = 1000 * 86400; -DateGraph.SHORT_SPACINGS[DateGraph.WEEKLY] = 1000 * 604800; +Dygraph.SECONDLY = 0; +Dygraph.TEN_SECONDLY = 1; +Dygraph.THIRTY_SECONDLY = 2; +Dygraph.MINUTELY = 3; +Dygraph.TEN_MINUTELY = 4; +Dygraph.THIRTY_MINUTELY = 5; +Dygraph.HOURLY = 6; +Dygraph.SIX_HOURLY = 7; +Dygraph.DAILY = 8; +Dygraph.WEEKLY = 9; +Dygraph.MONTHLY = 10; +Dygraph.QUARTERLY = 11; +Dygraph.BIANNUAL = 12; +Dygraph.ANNUAL = 13; +Dygraph.DECADAL = 14; +Dygraph.NUM_GRANULARITIES = 15; + +Dygraph.SHORT_SPACINGS = []; +Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1; +Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10; +Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30; +Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60; +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.DAILY] = 1000 * 86400; +Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800; // NumXTicks() // // If we used this time granularity, how many ticks would there be? // This is only an approximation, but it's generally good enough. // -DateGraph.prototype.NumXTicks = function(start_time, end_time, granularity) { - if (granularity < DateGraph.MONTHLY) { +Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) { + if (granularity < Dygraph.MONTHLY) { // Generate one tick mark for every fixed interval of time. - var spacing = DateGraph.SHORT_SPACINGS[granularity]; + var spacing = Dygraph.SHORT_SPACINGS[granularity]; return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing); } else { var year_mod = 1; // e.g. to only print one point every 10 years. var num_months = 12; - if (granularity == DateGraph.QUARTERLY) num_months = 3; - if (granularity == DateGraph.BIANNUAL) num_months = 2; - if (granularity == DateGraph.ANNUAL) num_months = 1; - if (granularity == DateGraph.DECADAL) { num_months = 1; year_mod = 10; } + if (granularity == Dygraph.QUARTERLY) num_months = 3; + if (granularity == Dygraph.BIANNUAL) num_months = 2; + if (granularity == Dygraph.ANNUAL) num_months = 1; + if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; } var msInYear = 365.2524 * 24 * 3600 * 1000; var num_years = 1.0 * (end_time - start_time) / msInYear; @@ -681,16 +816,20 @@ DateGraph.prototype.NumXTicks = function(start_time, end_time, granularity) { // // Returns an array containing {v: millis, label: label} dictionaries. // -DateGraph.prototype.GetXAxis = function(start_time, end_time, granularity) { +Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) { var ticks = []; - if (granularity < DateGraph.MONTHLY) { + if (granularity < Dygraph.MONTHLY) { // Generate one tick mark for every fixed interval of time. - var spacing = DateGraph.SHORT_SPACINGS[granularity]; + var spacing = Dygraph.SHORT_SPACINGS[granularity]; var format = '%d%b'; // e.g. "1 Jan" + // 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); + } for (var t = start_time; t <= end_time; t += spacing) { var d = new Date(t); var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds(); - if (frac == 0 || granularity >= DateGraph.DAILY) { + if (frac == 0 || granularity >= Dygraph.DAILY) { // the extra hour covers DST problems. ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) }); } else { @@ -704,23 +843,22 @@ DateGraph.prototype.GetXAxis = function(start_time, end_time, granularity) { var months; var year_mod = 1; // e.g. to only print one point every 10 years. - // TODO(danvk): use CachingRoundTime where appropriate to get boundaries. - if (granularity == DateGraph.MONTHLY) { + if (granularity == Dygraph.MONTHLY) { months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]; - } else if (granularity == DateGraph.QUARTERLY) { + } else if (granularity == Dygraph.QUARTERLY) { months = [ 0, 3, 6, 9 ]; - } else if (granularity == DateGraph.BIANNUAL) { + } else if (granularity == Dygraph.BIANNUAL) { months = [ 0, 6 ]; - } else if (granularity == DateGraph.ANNUAL) { + } else if (granularity == Dygraph.ANNUAL) { months = [ 0 ]; - } else if (granularity == DateGraph.DECADAL) { + } else if (granularity == Dygraph.DECADAL) { months = [ 0 ]; year_mod = 10; } var start_year = new Date(start_time).getFullYear(); var end_year = new Date(end_time).getFullYear(); - var zeropad = DateGraph.zeropad; + var zeropad = Dygraph.zeropad; for (var i = start_year; i <= end_year; i++) { if (i % year_mod != 0) continue; for (var j = 0; j < months.length; j++) { @@ -743,18 +881,18 @@ DateGraph.prototype.GetXAxis = function(start_time, end_time, granularity) { * @return {Array.} Array of {label, value} tuples. * @public */ -DateGraph.prototype.dateTicker = function(startDate, endDate) { +Dygraph.dateTicker = function(startDate, endDate, self) { var chosen = -1; - for (var i = 0; i < DateGraph.NUM_GRANULARITIES; i++) { - var num_ticks = this.NumXTicks(startDate, endDate, i); - if (this.width_ / num_ticks >= this.attrs_.pixelsPerXLabel) { + for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) { + var num_ticks = self.NumXTicks(startDate, endDate, i); + if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) { chosen = i; break; } } if (chosen >= 0) { - return this.GetXAxis(startDate, endDate, chosen); + return self.GetXAxis(startDate, endDate, chosen); } else { // TODO(danvk): signal error. } @@ -767,36 +905,42 @@ DateGraph.prototype.dateTicker = function(startDate, endDate) { * @return {Array.} Array of {label, value} tuples. * @public */ -DateGraph.prototype.numericTicks = function(minV, maxV) { - var scale; - if (maxV <= 0.0) { - scale = 1.0; - } else { - scale = Math.pow( 10, Math.floor(Math.log(maxV)/Math.log(10.0)) ); - } - - // Add a smallish number of ticks at human-friendly points - var nTicks = (maxV - minV) / scale; - while (2 * nTicks < 20) { - nTicks *= 2; - } - if ((maxV - minV) / nTicks < this.minTickSize_) { - nTicks = this.round_((maxV - minV) / this.minTickSize_, 1); +Dygraph.numericTicks = function(minV, maxV, self) { + // Basic idea: + // 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]; + 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); + for (var j = 0; j < mults.length; j++) { + 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; + var spacing = self.height_ / nTicks; + // wish I could break out of both loops at once... + if (spacing > pixelsPerTick) break; + } + if (spacing > pixelsPerTick) break; } // Construct labels for the ticks var ticks = []; - for (var i = 0; i <= nTicks; i++) { - var tickV = minV + i * (maxV - minV) / nTicks; - var label = this.round_(tickV, 2); - if (this.labelsKMB_) { + for (var i = 0; i < nTicks; i++) { + var tickV = low_val + i * scale; + var label = self.round_(tickV, 2); + if (self.attr_("labelsKMB")) { var k = 1000; if (tickV >= k*k*k) { - label = this.round_(tickV/(k*k*k), 1) + "B"; + label = self.round_(tickV/(k*k*k), 1) + "B"; } else if (tickV >= k*k) { - label = this.round_(tickV/(k*k), 1) + "M"; + label = self.round_(tickV/(k*k), 1) + "M"; } else if (tickV >= k) { - label = this.round_(tickV/k, 1) + "K"; + label = self.round_(tickV/k, 1) + "K"; } } ticks.push( {label: label, v: tickV} ); @@ -810,13 +954,54 @@ DateGraph.prototype.numericTicks = function(minV, maxV) { * @param {Number} maxY The maximum Y value in the data set * @private */ -DateGraph.prototype.addYTicks_ = function(minY, maxY) { +Dygraph.prototype.addYTicks_ = function(minY, maxY) { // Set the number of ticks so that the labels are human-friendly. - var ticks = this.numericTicks(minY, maxY); + // TODO(danvk): make this an attribute as well. + var ticks = Dygraph.numericTicks(minY, maxY, this); this.layout_.updateOptions( { yAxis: [minY, maxY], yTicks: ticks } ); }; +// Computes the range of the data series (including confidence intervals). +// series is either [ [x1, y1], [x2, y2], ... ] or +// [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ... +// Returns [low, high] +Dygraph.prototype.extremeValues_ = function(series) { + var minY = null, maxY = null; + + var bars = this.attr_("errorBars") || this.customBars_; + if (bars) { + // With custom bars, maxY is the max of the high values. + for (var j = 0; j < series.length; j++) { + var y = series[j][1][0]; + if (!y) continue; + var low = y - series[j][1][1]; + var high = y + series[j][1][2]; + if (low > y) low = y; // this can happen with custom bars, + if (high < y) high = y; // e.g. in tests/custom-bars.html + if (maxY == null || high > maxY) { + maxY = high; + } + if (minY == null || low < minY) { + minY = low; + } + } + } else { + for (var j = 0; j < series.length; j++) { + var y = series[j][1]; + if (!y) continue; + if (maxY == null || y > maxY) { + maxY = y; + } + if (minY == null || y < minY) { + minY = y; + } + } + } + + return [minY, maxY]; +}; + /** * Update the graph with new data. Data is in the format * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false @@ -825,9 +1010,11 @@ DateGraph.prototype.addYTicks_ = function(minY, maxY) { * @param {Array.} data The data (see above) * @private */ -DateGraph.prototype.drawGraph_ = function(data) { - var maxY = null; +Dygraph.prototype.drawGraph_ = function(data) { + var minY = null, maxY = null; this.layout_.removeAllDatasets(); + this.setColors_(); + // Loop over all fields in the dataset for (var i = 1; i < data[0].length; i++) { var series = []; @@ -838,7 +1025,7 @@ DateGraph.prototype.drawGraph_ = function(data) { series = this.rollingAverage(series, this.rollPeriod_); // Prune down to the desired range, if necessary (for zooming) - var bars = this.errorBars_ || this.customBars_; + var bars = this.attr_("errorBars") || this.customBars_; if (this.dateWindow_) { var low = this.dateWindow_[0]; var high= this.dateWindow_[1]; @@ -846,28 +1033,25 @@ DateGraph.prototype.drawGraph_ = function(data) { for (var k = 0; k < series.length; k++) { if (series[k][0] >= low && series[k][0] <= high) { pruned.push(series[k]); - var y = bars ? series[k][1][0] : series[k][1]; - if (maxY == null || y > maxY) maxY = y; } } series = pruned; - } else { - for (var j = 0; j < series.length; j++) { - var y = bars ? series[j][1][0] : series[j][1]; - if (maxY == null || y > maxY) { - maxY = bars ? y + series[j][1][1] : y; - } - } } + var extremes = this.extremeValues_(series); + var thisMinY = extremes[0]; + var thisMaxY = extremes[1]; + if (!minY || thisMinY < minY) minY = thisMinY; + if (!maxY || thisMaxY > maxY) maxY = thisMaxY; + if (bars) { var vals = []; for (var j=0; j= 0) minAxisY = 0; + if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0; + + if (this.attr_("includeZero")) { + if (maxY < 0) maxAxisY = 0; + if (minY > 0) minAxisY = 0; } - this.addYTicks_(0, maxY); + + this.addYTicks_(minAxisY, maxAxisY); } this.addXTicks_(); @@ -907,12 +1098,12 @@ DateGraph.prototype.drawGraph_ = function(data) { * @param {Array} originalData The data in the appropriate format (see above) * @param {Number} rollPeriod The number of days over which to average the data */ -DateGraph.prototype.rollingAverage = function(originalData, rollPeriod) { +Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { if (originalData.length < 2) return originalData; var rollPeriod = Math.min(rollPeriod, originalData.length - 1); var rollingData = []; - var sigma = this.sigma_; + var sigma = this.attr_("sigma"); if (this.fractions_) { var num = 0; @@ -928,7 +1119,7 @@ DateGraph.prototype.rollingAverage = function(originalData, rollPeriod) { var date = originalData[i][0]; var value = den ? num / den : 0.0; - if (this.errorBars_) { + if (this.attr_("errorBars")) { if (this.wilsonInterval_) { // For more details on this confidence interval, see: // http://en.wikipedia.org/wiki/Binomial_confidence_interval @@ -980,47 +1171,46 @@ DateGraph.prototype.rollingAverage = function(originalData, rollPeriod) { // Calculate the rolling average for the first rollPeriod - 1 points where // there is not enough data to roll over the full number of days var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2); - if (!this.errorBars_){ - for (var i = 0; i < num_init_points; i++) { - var sum = 0; - for (var j = 0; j < i + 1; j++) - sum += originalData[j][1]; - rollingData[i] = [originalData[i][0], sum / (i + 1)]; + if (!this.attr_("errorBars")){ + if (rollPeriod == 1) { + return originalData; } - // Calculate the rolling average for the remaining points - for (var i = Math.min(rollPeriod - 1, originalData.length - 2); - i < originalData.length; - i++) { + + for (var i = 0; i < originalData.length; i++) { var sum = 0; - for (var j = i - rollPeriod + 1; j < i + 1; j++) + 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; + num_ok++; sum += originalData[j][1]; - rollingData[i] = [originalData[i][0], sum / rollPeriod]; + } + if (num_ok) { + rollingData[i] = [originalData[i][0], sum / num_ok]; + } else { + rollingData[i] = [originalData[i][0], null]; + } } + } else { - for (var i = 0; i < num_init_points; i++) { + for (var i = 0; i < originalData.length; i++) { var sum = 0; var variance = 0; - for (var j = 0; j < i + 1; j++) { + 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; + num_ok++; sum += originalData[j][1][0]; variance += Math.pow(originalData[j][1][1], 2); } - var stddev = Math.sqrt(variance)/(i+1); - rollingData[i] = [originalData[i][0], - [sum/(i+1), sigma * stddev, sigma * stddev]]; - } - // Calculate the rolling average for the remaining points - for (var i = Math.min(rollPeriod - 1, originalData.length - 2); - i < originalData.length; - i++) { - var sum = 0; - var variance = 0; - for (var j = i - rollPeriod + 1; j < i + 1; j++) { - sum += originalData[j][1][0]; - variance += Math.pow(originalData[j][1][1], 2); + if (num_ok) { + var stddev = Math.sqrt(variance) / num_ok; + rollingData[i] = [originalData[i][0], + [sum / num_ok, sigma * stddev, sigma * stddev]]; + } else { + rollingData[i] = [originalData[i][0], [null, null, null]]; } - var stddev = Math.sqrt(variance) / rollPeriod; - rollingData[i] = [originalData[i][0], - [sum / rollPeriod, sigma * stddev, sigma * stddev]]; } } } @@ -1030,27 +1220,63 @@ DateGraph.prototype.rollingAverage = function(originalData, rollPeriod) { /** * Parses a date, returning the number of milliseconds since epoch. This can be - * passed in as an xValueParser in the DateGraph constructor. + * passed in as an xValueParser in the Dygraph constructor. + * TODO(danvk): enumerate formats that this understands. * @param {String} A date in YYYYMMDD format. * @return {Number} Milliseconds since epoch. * @public */ -DateGraph.prototype.dateParser = function(dateStr) { +Dygraph.dateParser = function(dateStr, self) { var dateStrSlashed; + var d; if (dateStr.length == 10 && dateStr.search("-") != -1) { // e.g. '2009-07-12' dateStrSlashed = dateStr.replace("-", "/", "g"); while (dateStrSlashed.search("-") != -1) { dateStrSlashed = dateStrSlashed.replace("-", "/"); } - return Date.parse(dateStrSlashed); + d = Date.parse(dateStrSlashed); } else if (dateStr.length == 8) { // e.g. '20090712' + // TODO(danvk): remove support for this format. It's confusing. dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2) + "/" + dateStr.substr(6,2); - return Date.parse(dateStrSlashed); + d = Date.parse(dateStrSlashed); } else { // Any format that Date.parse will accept, e.g. "2009/07/12" or // "2009/07/12 12:34:56" - return Date.parse(dateStr); + d = Date.parse(dateStr); + } + + if (!d || isNaN(d)) { + self.error("Couldn't parse " + dateStr + " as a date"); + } + return d; +}; + +/** + * Detects the type of the str (date or numeric) and sets the various + * formatting attributes in this.attrs_ based on this type. + * @param {String} str An x value. + * @private + */ +Dygraph.prototype.detectTypeFromString_ = function(str) { + var isDate = false; + if (str.indexOf('-') >= 0 || + str.indexOf('/') >= 0 || + isNaN(parseFloat(str))) { + isDate = true; + } else if (str.length == 8 && str > '19700101' && str < '20371231') { + // TODO(danvk): remove support for this format. + isDate = true; + } + + if (isDate) { + this.attrs_.xValueFormatter = Dygraph.dateString_; + this.attrs_.xValueParser = Dygraph.dateParser; + this.attrs_.xTicker = Dygraph.dateTicker; + } else { + this.attrs_.xValueFormatter = function(x) { return x; }; + this.attrs_.xValueParser = function(x) { return parseFloat(x); }; + this.attrs_.xTicker = Dygraph.numericTicks; } }; @@ -1058,35 +1284,44 @@ DateGraph.prototype.dateParser = function(dateStr) { * Parses a string in a special csv format. We expect a csv file where each * line is a date point, and the first field in each line is the date string. * We also expect that all remaining fields represent series. - * if this.errorBars_ is set, then interpret the fields as: + * if the errorBars attribute is set, then interpret the fields as: * date, series1, stddev1, series2, stddev2, ... * @param {Array.} data See above. * @private + * + * @return Array. An array with one entry for each row. These entries + * are an array of cells in that row. The first entry is the parsed x-value for + * the row. The second, third, etc. are the y-values. These can take on one of + * three forms, depending on the CSV and constructor parameters: + * 1. numeric value + * 2. [ value, stddev ] + * 3. [ low value, center value, high value ] */ -DateGraph.prototype.parseCSV_ = function(data) { +Dygraph.prototype.parseCSV_ = function(data) { var ret = []; var lines = data.split("\n"); - var start = this.labelsFromCSV_ ? 1 : 0; + var start = 0; if (this.labelsFromCSV_) { - var labels = lines[0].split(","); - labels.shift(); // a "date" parameter is assumed. - this.labels_ = labels; - // regenerate automatic colors. - this.setColors_(this.attrs_); - this.renderOptions_.colorScheme = this.colors_; - MochiKit.Base.update(this.plotter_.options, this.renderOptions_); - MochiKit.Base.update(this.layoutOptions_, this.attrs_); + start = 1; + this.attrs_.labels = lines[0].split(","); } + var xParser; + var defaultParserSet = false; // attempt to auto-detect x value type + var expectedCols = this.attr_("labels").length; 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 (inFields.length < 2) - continue; + if (inFields.length < 2) continue; var fields = []; - fields[0] = this.xValueParser_(inFields[0]); + if (!defaultParserSet) { + this.detectTypeFromString_(inFields[0]); + xParser = this.attr_("xValueParser"); + defaultParserSet = true; + } + fields[0] = xParser(inFields[0], this); // If fractions are expected, parse the numbers as "A/B" if (this.fractions_) { @@ -1095,7 +1330,7 @@ DateGraph.prototype.parseCSV_ = function(data) { var vals = inFields[j].split("/"); fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])]; } - } else if (this.errorBars_) { + } else if (this.attr_("errorBars")) { // If there are error bars, values are (value, stddev) pairs for (var j = 1; j < inFields.length; j += 2) fields[(j + 1) / 2] = [parseFloat(inFields[j]), @@ -1110,15 +1345,77 @@ DateGraph.prototype.parseCSV_ = function(data) { } } else { // Values are just numbers - for (var j = 1; j < inFields.length; j++) + for (var j = 1; j < inFields.length; j++) { fields[j] = parseFloat(inFields[j]); + } } ret.push(fields); + + if (fields.length != expectedCols) { + this.error("Number of columns in line " + i + " (" + fields.length + + ") does not agree with number of labels (" + expectedCols + + ") " + line); + } } return ret; }; /** + * The user has provided their data as a pre-packaged JS array. If the x values + * are numeric, this is the same as dygraphs' internal format. If the x values + * are dates, we need to convert them from Date objects to ms since epoch. + * @param {Array.} data + * @return {Array.} data with numeric x values. + */ +Dygraph.prototype.parseArray_ = function(data) { + // Peek at the first x value to see if it's numeric. + if (data.length == 0) { + this.error("Can't plot empty data set"); + return null; + } + if (data[0].length == 0) { + this.error("Data set cannot contain an empty row"); + return null; + } + + if (this.attr_("labels") == null) { + this.warn("Using default labels. Set labels explicitly via 'labels' " + + "in the options parameter"); + this.attrs_.labels = [ "X" ]; + for (var i = 1; i < data[0].length; i++) { + this.attrs_.labels.push("Y" + i); + } + } + + if (MochiKit.Base.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); + for (var i = 0; i < data.length; i++) { + if (parsedData[i].length == 0) { + this.error("Row " << (1 + i) << " of data is empty"); + return null; + } + if (parsedData[i][0] == null + || typeof(parsedData[i][0].getTime) != 'function') { + this.error("x value in row " << (1 + i) << " is not a Date"); + return null; + } + parsedData[i][0] = parsedData[i][0].getTime(); + } + return parsedData; + } else { + // Some intelligent defaults for a numeric x-axis. + this.attrs_.xValueFormatter = function(x) { return x; }; + this.attrs_.xTicker = Dygraph.numericTicks; + return data; + } +}; + +/** * Parses a DataTable object from gviz. * The data is expected to have a first column that is either a date or a * number. All subsequent columns must be numbers. If there is a clear mismatch @@ -1127,7 +1424,7 @@ DateGraph.prototype.parseCSV_ = function(data) { * @param {Array.} data See above. * @private */ -DateGraph.prototype.parseDataTable_ = function(data) { +Dygraph.prototype.parseDataTable_ = function(data) { var cols = data.getNumberOfColumns(); var rows = data.getNumberOfRows(); @@ -1136,25 +1433,27 @@ DateGraph.prototype.parseDataTable_ = function(data) { for (var i = 0; i < cols; i++) { labels.push(data.getColumnLabel(i)); } - labels.shift(); // the x-axis parameter is assumed and unnamed. - this.labels_ = labels; - // regenerate automatic colors. - this.setColors_(this.attrs_); - this.renderOptions_.colorScheme = this.colors_; - MochiKit.Base.update(this.plotter_.options, this.renderOptions_); - MochiKit.Base.update(this.layoutOptions_, this.attrs_); + this.attrs_.labels = labels; var indepType = data.getColumnType(0); - if (indepType != 'date' && indepType != 'number') { - // TODO(danvk): standardize error reporting. - alert("only 'date' and 'number' types are supported for column 1" + - "of DataTable input (Got '" + indepType + "')"); + if (indepType == 'date') { + this.attrs_.xValueFormatter = Dygraph.dateString_; + this.attrs_.xValueParser = Dygraph.dateParser; + this.attrs_.xTicker = Dygraph.dateTicker; + } else if (indepType == 'number') { + this.attrs_.xValueFormatter = function(x) { return x; }; + this.attrs_.xValueParser = function(x) { return parseFloat(x); }; + this.attrs_.xTicker = Dygraph.numericTicks; + } else { + this.error("only 'date' and 'number' types are supported for column 1 " + + "of DataTable input (Got '" + indepType + "')"); return null; } var ret = []; for (var i = 0; i < rows; i++) { var row = []; + if (!data.getValue(i, 0)) continue; if (indepType == 'date') { row.push(data.getValue(i, 0).getTime()); } else { @@ -1173,28 +1472,38 @@ DateGraph.prototype.parseDataTable_ = function(data) { * file, do an XMLHttpRequest to get it. * @private */ -DateGraph.prototype.start_ = function() { +Dygraph.prototype.start_ = function() { if (typeof this.file_ == 'function') { - // Stubbed out to allow this to run off a filesystem + // CSV string. Pretend we got it via XHR. this.loadedEvent_(this.file_()); + } else if (MochiKit.Base.isArrayLike(this.file_)) { + this.rawData_ = this.parseArray_(this.file_); + this.drawGraph_(this.rawData_); } else if (typeof this.file_ == 'object' && typeof this.file_.getColumnRange == 'function') { // must be a DataTable from gviz. this.rawData_ = this.parseDataTable_(this.file_); this.drawGraph_(this.rawData_); - } else { - var req = new XMLHttpRequest(); - var caller = this; - req.onreadystatechange = function () { - if (req.readyState == 4) { - if (req.status == 200) { - caller.loadedEvent_(req.responseText); + } else if (typeof this.file_ == 'string') { + // Heuristic: a newline means it's CSV data. Otherwise it's an URL. + if (this.file_.indexOf('\n') >= 0) { + this.loadedEvent_(this.file_); + } else { + var req = new XMLHttpRequest(); + var caller = this; + req.onreadystatechange = function () { + if (req.readyState == 4) { + if (req.status == 200) { + caller.loadedEvent_(req.responseText); + } } - } - }; + }; - req.open("GET", this.file_, true); - req.send(null); + req.open("GET", this.file_, true); + req.send(null); + } + } else { + this.error("Unknown data format: " + (typeof this.file_)); } }; @@ -1206,16 +1515,11 @@ DateGraph.prototype.start_ = function() { * * @param {Object} attrs The new properties and values */ -DateGraph.prototype.updateOptions = function(attrs) { - if (attrs.errorBars) { - this.errorBars_ = attrs.errorBars; - } +Dygraph.prototype.updateOptions = function(attrs) { + // TODO(danvk): this is a mess. Rethink this function. if (attrs.customBars) { this.customBars_ = attrs.customBars; } - if (attrs.strokeWidth) { - this.strokeWidth_ = attrs.strokeWidth; - } if (attrs.rollPeriod) { this.rollPeriod_ = attrs.rollPeriod; } @@ -1225,14 +1529,12 @@ DateGraph.prototype.updateOptions = function(attrs) { if (attrs.valueRange) { this.valueRange_ = attrs.valueRange; } - if (attrs.minTickSize) { - this.minTickSize_ = attrs.minTickSize; - } - if (typeof(attrs.labels) != 'undefined') { - this.labels_ = attrs.labels; - this.labelsFromCSV_ = (attrs.labels == null); - } - this.layout_.updateOptions({ 'errorBars': this.errorBars_ }); + MochiKit.Base.update(this.user_attrs_, attrs); + + this.labelsFromCSV_ = (this.attr_("labels") == null); + + // TODO(danvk): this doesn't match the constructor logic + this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") }); if (attrs['file'] && attrs['file'] != this.file_) { this.file_ = attrs['file']; this.start_(); @@ -1246,21 +1548,24 @@ DateGraph.prototype.updateOptions = function(attrs) { * reflect the new averaging period. * @param {Number} length Number of days over which to average the data. */ -DateGraph.prototype.adjustRoll = function(length) { +Dygraph.prototype.adjustRoll = function(length) { this.rollPeriod_ = length; this.drawGraph_(this.rawData_); }; /** - * A wrapper around DateGraph that implements the gviz API. + * A wrapper around Dygraph that implements the gviz API. * @param {Object} container The DOM object the visualization should live in. */ -DateGraph.GVizChart = function(container) { +Dygraph.GVizChart = function(container) { this.container = container; } -DateGraph.GVizChart.prototype.draw = function(data, options) { +Dygraph.GVizChart.prototype.draw = function(data, options) { this.container.innerHTML = ''; - this.date_graph = new DateGraph(this.container, data, null, options || {}); + this.date_graph = new Dygraph(this.container, data, options); } + +// Older pages may still use this name. +DateGraph = Dygraph;