update combined js
[dygraphs.git] / dygraph.js
CommitLineData
6a1aa64f
DV
1// Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2// All Rights Reserved.
3
4/**
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
285a6bda
DV
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
6a1aa64f
DV
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
10
11 Usage:
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
285a6bda
DV
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
16 { }); // options
6a1aa64f
DV
17 </script>
18
19 The CSV file is of the form
20
285a6bda 21 Date,SeriesA,SeriesB,SeriesC
6a1aa64f
DV
22 YYYYMMDD,A1,B1,C1
23 YYYYMMDD,A2,B2,C2
24
6a1aa64f
DV
25 If the 'errorBars' option is set in the constructor, the input should be of
26 the form
27
285a6bda 28 Date,SeriesA,SeriesB,...
6a1aa64f
DV
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
31
32 If the 'fractions' option is set, the input should be of the form:
33
285a6bda 34 Date,SeriesA,SeriesB,...
6a1aa64f
DV
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
37
38 And error bars will be calculated automatically using a binomial distribution.
39
285a6bda 40 For further documentation and examples, see http://www.danvk.org/dygraphs
6a1aa64f
DV
41
42 */
43
44/**
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
6a1aa64f
DV
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
52 */
285a6bda
DV
53Dygraph = function(div, data, opts) {
54 if (arguments.length > 0) {
55 if (arguments.length == 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div, data, arguments[2], arguments[3]);
61 } else {
62 this.__init__(div, data, opts);
63 }
64 }
6a1aa64f
DV
65};
66
285a6bda
DV
67Dygraph.NAME = "Dygraph";
68Dygraph.VERSION = "1.2";
69Dygraph.__repr__ = function() {
6a1aa64f
DV
70 return "[" + this.NAME + " " + this.VERSION + "]";
71};
285a6bda 72Dygraph.toString = function() {
6a1aa64f
DV
73 return this.__repr__();
74};
75
76// Various default values
285a6bda
DV
77Dygraph.DEFAULT_ROLL_PERIOD = 1;
78Dygraph.DEFAULT_WIDTH = 480;
79Dygraph.DEFAULT_HEIGHT = 320;
80Dygraph.AXIS_LINE_WIDTH = 0.3;
6a1aa64f 81
8e4a6af3 82// Default attribute values.
285a6bda 83Dygraph.DEFAULT_ATTRS = {
a9fc39ab 84 highlightCircleSize: 3,
8e4a6af3 85 pixelsPerXLabel: 60,
c6336f04 86 pixelsPerYLabel: 30,
285a6bda 87
8e4a6af3
DV
88 labelsDivWidth: 250,
89 labelsDivStyles: {
90 // TODO(danvk): move defaults from createStatusMessage_ here.
285a6bda
DV
91 },
92 labelsSeparateLines: false,
93 labelsKMB: false,
94
95 strokeWidth: 1.0,
8e4a6af3 96
8846615a
DV
97 axisTickSize: 3,
98 axisLabelFontSize: 14,
99 xAxisLabelWidth: 50,
100 yAxisLabelWidth: 50,
101 rightGap: 5,
285a6bda
DV
102
103 showRoller: false,
104 xValueFormatter: Dygraph.dateString_,
105 xValueParser: Dygraph.dateParser,
106 xTicker: Dygraph.dateTicker,
107
108 sigma: 2.0,
109 errorBars: false,
110 fractions: false,
111 wilsonInterval: true, // only relevant if fractions is true
112 customBars: false
113};
114
115// Various logging levels.
116Dygraph.DEBUG = 1;
117Dygraph.INFO = 2;
118Dygraph.WARNING = 3;
119Dygraph.ERROR = 3;
120
121Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
122 // Labels is no longer a constructor parameter, since it's typically set
123 // directly from the data source. It also conains a name for the x-axis,
124 // which the previous constructor form did not.
125 if (labels != null) {
126 var new_labels = ["Date"];
127 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
128 MochiKit.Base.update(attrs, { 'labels': new_labels });
129 }
130 this.__init__(div, file, attrs);
8e4a6af3
DV
131};
132
6a1aa64f 133/**
285a6bda 134 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
6a1aa64f
DV
135 * and interaction &lt;canvas&gt; inside of it. See the constructor for details
136 * on the parameters.
137 * @param {String | Function} file Source data
138 * @param {Array.<String>} labels Names of the data series
139 * @param {Object} attrs Miscellaneous other options
140 * @private
141 */
285a6bda
DV
142Dygraph.prototype.__init__ = function(div, file, attrs) {
143 // Support two-argument constructor
144 if (attrs == null) { attrs = {}; }
145
6a1aa64f 146 // Copy the important bits into the object
32988383 147 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
6a1aa64f 148 this.maindiv_ = div;
6a1aa64f 149 this.file_ = file;
285a6bda 150 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
6a1aa64f 151 this.previousVerticalX_ = -1;
6a1aa64f 152 this.fractions_ = attrs.fractions || false;
6a1aa64f
DV
153 this.dateWindow_ = attrs.dateWindow || null;
154 this.valueRange_ = attrs.valueRange || null;
6a1aa64f
DV
155 this.wilsonInterval_ = attrs.wilsonInterval || true;
156 this.customBars_ = attrs.customBars || false;
8e4a6af3 157
285a6bda
DV
158 // If the div isn't already sized then give it a default size.
159 if (div.style.width == '') {
160 div.style.width = Dygraph.DEFAULT_WIDTH + "px";
161 }
162 if (div.style.height == '') {
163 div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
32988383 164 }
285a6bda
DV
165 this.width_ = parseInt(div.style.width, 10);
166 this.height_ = parseInt(div.style.height, 10);
32988383 167
285a6bda
DV
168 // Dygraphs has many options, some of which interact with one another.
169 // To keep track of everything, we maintain two sets of options:
170 //
171 // this.user_attrs_ only options explicitly set by the user.
172 // this.attrs_ defaults, options derived from user_attrs_, data.
173 //
174 // Options are then accessed this.attr_('attr'), which first looks at
175 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
176 // defaults without overriding behavior that the user specifically asks for.
177 this.user_attrs_ = {};
178 MochiKit.Base.update(this.user_attrs_, attrs);
6a1aa64f 179
285a6bda
DV
180 this.attrs_ = {};
181 MochiKit.Base.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
6a1aa64f 182
285a6bda
DV
183 // Make a note of whether labels will be pulled from the CSV file.
184 this.labelsFromCSV_ = (this.attr_("labels") == null);
6a1aa64f
DV
185
186 // Create the containing DIV and other interactive elements
187 this.createInterface_();
188
189 // Create the PlotKit grapher
285a6bda
DV
190 // TODO(danvk): why does the Layout need its own set of options?
191 this.layoutOptions_ = { 'errorBars': (this.attr_("errorBars") ||
192 this.customBars_),
6a1aa64f 193 'xOriginIsZero': false };
285a6bda
DV
194 MochiKit.Base.update(this.layoutOptions_, this.attrs_);
195 MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
6a1aa64f 196
285a6bda 197 this.layout_ = new DygraphLayout(this.layoutOptions_);
6a1aa64f 198
285a6bda 199 // TODO(danvk): why does the Renderer need its own set of options?
6a1aa64f
DV
200 this.renderOptions_ = { colorScheme: this.colors_,
201 strokeColor: null,
285a6bda
DV
202 axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
203 MochiKit.Base.update(this.renderOptions_, this.attrs_);
204 MochiKit.Base.update(this.renderOptions_, this.user_attrs_);
205 this.plotter_ = new DygraphCanvasRenderer(this.hidden_, this.layout_,
206 this.renderOptions_);
6a1aa64f
DV
207
208 this.createStatusMessage_();
209 this.createRollInterface_();
210 this.createDragInterface_();
211
738fc797
DV
212 // connect(window, 'onload', this, function(e) { this.start_(); });
213 this.start_();
6a1aa64f
DV
214};
215
285a6bda
DV
216Dygraph.prototype.attr_ = function(name) {
217 if (typeof(this.user_attrs_[name]) != 'undefined') {
218 return this.user_attrs_[name];
219 } else if (typeof(this.attrs_[name]) != 'undefined') {
220 return this.attrs_[name];
221 } else {
222 return null;
223 }
224};
225
226// TODO(danvk): any way I can get the line numbers to be this.warn call?
227Dygraph.prototype.log = function(severity, message) {
228 if (typeof(console) != 'undefined') {
229 switch (severity) {
230 case Dygraph.DEBUG:
231 console.debug('dygraphs: ' + message);
232 break;
233 case Dygraph.INFO:
234 console.info('dygraphs: ' + message);
235 break;
236 case Dygraph.WARNING:
237 console.warn('dygraphs: ' + message);
238 break;
239 case Dygraph.ERROR:
240 console.error('dygraphs: ' + message);
241 break;
242 }
243 }
244}
245Dygraph.prototype.info = function(message) {
246 this.log(Dygraph.INFO, message);
247}
248Dygraph.prototype.warn = function(message) {
249 this.log(Dygraph.WARNING, message);
250}
251Dygraph.prototype.error = function(message) {
252 this.log(Dygraph.ERROR, message);
253}
254
6a1aa64f
DV
255/**
256 * Returns the current rolling period, as set by the user or an option.
257 * @return {Number} The number of days in the rolling window
258 */
285a6bda 259Dygraph.prototype.rollPeriod = function() {
6a1aa64f
DV
260 return this.rollPeriod_;
261}
262
263/**
285a6bda 264 * Generates interface elements for the Dygraph: a containing div, a div to
6a1aa64f
DV
265 * display the current point, and a textbox to adjust the rolling average
266 * period.
267 * @private
268 */
285a6bda 269Dygraph.prototype.createInterface_ = function() {
6a1aa64f
DV
270 // Create the all-enclosing graph div
271 var enclosing = this.maindiv_;
272
273 this.graphDiv = MochiKit.DOM.DIV( { style: { 'width': this.width_ + "px",
274 'height': this.height_ + "px"
275 }});
276 appendChildNodes(enclosing, this.graphDiv);
277
278 // Create the canvas to store
8846615a
DV
279 // We need to subtract out some space for the x- and y-axis labels.
280 // For the x-axis:
281 // - remove from height: (axisTickSize + height of tick label)
282 // height of tick label == axisLabelFontSize?
283 // - remove from width: axisLabelWidth / 2 (maybe on both ends)
284 // For the y-axis:
285 // - remove axisLabelFontSize from the top
286 // - remove axisTickSize from the left
287
6a1aa64f
DV
288 var canvas = MochiKit.DOM.CANVAS;
289 this.canvas_ = canvas( { style: { 'position': 'absolute' },
290 width: this.width_,
8846615a
DV
291 height: this.height_
292 });
6a1aa64f
DV
293 appendChildNodes(this.graphDiv, this.canvas_);
294
295 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
296 connect(this.hidden_, 'onmousemove', this, function(e) { this.mouseMove_(e) });
297 connect(this.hidden_, 'onmouseout', this, function(e) { this.mouseOut_(e) });
298}
299
300/**
301 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
285a6bda 302 * this particular canvas. All Dygraph work is done on this.canvas_.
8846615a 303 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
6a1aa64f
DV
304 * @return {Object} The newly-created canvas
305 * @private
306 */
285a6bda 307Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
6a1aa64f
DV
308 var h = document.createElement("canvas");
309 h.style.position = "absolute";
310 h.style.top = canvas.style.top;
311 h.style.left = canvas.style.left;
312 h.width = this.width_;
313 h.height = this.height_;
314 MochiKit.DOM.appendChildNodes(this.graphDiv, h);
315 return h;
316};
317
318/**
319 * Generate a set of distinct colors for the data series. This is done with a
320 * color wheel. Saturation/Value are customizable, and the hue is
321 * equally-spaced around the color wheel. If a custom set of colors is
322 * specified, that is used instead.
6a1aa64f
DV
323 * @private
324 */
285a6bda
DV
325Dygraph.prototype.setColors_ = function() {
326 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
327 // away with this.renderOptions_.
328 var num = this.attr_("labels").length - 1;
6a1aa64f 329 this.colors_ = [];
285a6bda
DV
330 var colors = this.attr_('colors');
331 if (!colors) {
332 var sat = this.attr_('colorSaturation') || 1.0;
333 var val = this.attr_('colorValue') || 0.5;
6a1aa64f
DV
334 for (var i = 1; i <= num; i++) {
335 var hue = (1.0*i/(1+num));
336 this.colors_.push( MochiKit.Color.Color.fromHSV(hue, sat, val) );
337 }
338 } else {
339 for (var i = 0; i < num; i++) {
285a6bda 340 var colorStr = colors[i % colors.length];
6a1aa64f
DV
341 this.colors_.push( MochiKit.Color.Color.fromString(colorStr) );
342 }
343 }
285a6bda
DV
344
345 // TODO(danvk): update this w/r/t/ the new options system.
346 this.renderOptions_.colorScheme = this.colors_;
347 MochiKit.Base.update(this.plotter_.options, this.renderOptions_);
348 MochiKit.Base.update(this.layoutOptions_, this.user_attrs_);
349 MochiKit.Base.update(this.layoutOptions_, this.attrs_);
6a1aa64f
DV
350}
351
352/**
353 * Create the div that contains information on the selected point(s)
354 * This goes in the top right of the canvas, unless an external div has already
355 * been specified.
356 * @private
357 */
285a6bda
DV
358Dygraph.prototype.createStatusMessage_ = function(){
359 if (!this.attr_("labelsDiv")) {
360 var divWidth = this.attr_('labelsDivWidth');
6a1aa64f
DV
361 var messagestyle = { "style": {
362 "position": "absolute",
363 "fontSize": "14px",
364 "zIndex": 10,
365 "width": divWidth + "px",
366 "top": "0px",
8846615a 367 "left": (this.width_ - divWidth - 2) + "px",
6a1aa64f
DV
368 "background": "white",
369 "textAlign": "left",
370 "overflow": "hidden"}};
285a6bda
DV
371 MochiKit.Base.update(messagestyle["style"], this.attr_('labelsDivStyles'));
372 var div = MochiKit.DOM.DIV(messagestyle);
373 MochiKit.DOM.appendChildNodes(this.graphDiv, div);
374 this.attrs_.labelsDiv = div;
6a1aa64f
DV
375 }
376};
377
378/**
379 * Create the text box to adjust the averaging period
380 * @return {Object} The newly-created text box
381 * @private
382 */
285a6bda 383Dygraph.prototype.createRollInterface_ = function() {
285a6bda 384 var display = this.attr_('showRoller') ? "block" : "none";
6a1aa64f
DV
385 var textAttr = { "type": "text",
386 "size": "2",
387 "value": this.rollPeriod_,
388 "style": { "position": "absolute",
389 "zIndex": 10,
8846615a
DV
390 "top": (this.plotter_.area.h - 25) + "px",
391 "left": (this.plotter_.area.x + 1) + "px",
738fc797 392 "display": display }
6a1aa64f
DV
393 };
394 var roller = MochiKit.DOM.INPUT(textAttr);
395 var pa = this.graphDiv;
396 MochiKit.DOM.appendChildNodes(pa, roller);
397 connect(roller, 'onchange', this,
398 function() { this.adjustRoll(roller.value); });
399 return roller;
400}
401
402/**
403 * Set up all the mouse handlers needed to capture dragging behavior for zoom
404 * events. Uses MochiKit.Signal to attach all the event handlers.
405 * @private
406 */
285a6bda 407Dygraph.prototype.createDragInterface_ = function() {
6a1aa64f
DV
408 var self = this;
409
410 // Tracks whether the mouse is down right now
411 var mouseDown = false;
412 var dragStartX = null;
413 var dragStartY = null;
414 var dragEndX = null;
415 var dragEndY = null;
416 var prevEndX = null;
417
418 // Utility function to convert page-wide coordinates to canvas coords
67e650dc
DV
419 var px = 0;
420 var py = 0;
6a1aa64f
DV
421 var getX = function(e) { return e.mouse().page.x - px };
422 var getY = function(e) { return e.mouse().page.y - py };
423
424 // Draw zoom rectangles when the mouse is down and the user moves around
425 connect(this.hidden_, 'onmousemove', function(event) {
426 if (mouseDown) {
427 dragEndX = getX(event);
428 dragEndY = getY(event);
429
430 self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
431 prevEndX = dragEndX;
432 }
433 });
434
435 // Track the beginning of drag events
436 connect(this.hidden_, 'onmousedown', function(event) {
437 mouseDown = true;
67e650dc
DV
438 px = PlotKit.Base.findPosX(self.canvas_);
439 py = PlotKit.Base.findPosY(self.canvas_);
6a1aa64f
DV
440 dragStartX = getX(event);
441 dragStartY = getY(event);
442 });
443
444 // If the user releases the mouse button during a drag, but not over the
445 // canvas, then it doesn't count as a zooming action.
446 connect(document, 'onmouseup', this, function(event) {
447 if (mouseDown) {
448 mouseDown = false;
449 dragStartX = null;
450 dragStartY = null;
451 }
452 });
453
454 // Temporarily cancel the dragging event when the mouse leaves the graph
455 connect(this.hidden_, 'onmouseout', this, function(event) {
456 if (mouseDown) {
457 dragEndX = null;
458 dragEndY = null;
459 }
460 });
461
462 // If the mouse is released on the canvas during a drag event, then it's a
463 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
464 connect(this.hidden_, 'onmouseup', this, function(event) {
465 if (mouseDown) {
466 mouseDown = false;
467 dragEndX = getX(event);
468 dragEndY = getY(event);
469 var regionWidth = Math.abs(dragEndX - dragStartX);
470 var regionHeight = Math.abs(dragEndY - dragStartY);
471
472 if (regionWidth < 2 && regionHeight < 2 &&
285a6bda 473 self.attr_('clickCallback') != null &&
6a1aa64f 474 self.lastx_ != undefined) {
285a6bda
DV
475 // TODO(danvk): pass along more info about the point.
476 self.attr_('clickCallback')(event, new Date(self.lastx_));
6a1aa64f
DV
477 }
478
479 if (regionWidth >= 10) {
480 self.doZoom_(Math.min(dragStartX, dragEndX),
481 Math.max(dragStartX, dragEndX));
482 } else {
483 self.canvas_.getContext("2d").clearRect(0, 0,
484 self.canvas_.width,
485 self.canvas_.height);
486 }
487
488 dragStartX = null;
489 dragStartY = null;
490 }
491 });
492
493 // Double-clicking zooms back out
494 connect(this.hidden_, 'ondblclick', this, function(event) {
495 self.dateWindow_ = null;
496 self.drawGraph_(self.rawData_);
497 var minDate = self.rawData_[0][0];
498 var maxDate = self.rawData_[self.rawData_.length - 1][0];
285a6bda
DV
499 if (self.attr_("zoomCallback")) {
500 self.attr_("zoomCallback")(minDate, maxDate);
67e650dc 501 }
6a1aa64f
DV
502 });
503};
504
505/**
506 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
507 * up any previous zoom rectangles that were drawn. This could be optimized to
508 * avoid extra redrawing, but it's tricky to avoid interactions with the status
509 * dots.
510 * @param {Number} startX The X position where the drag started, in canvas
511 * coordinates.
512 * @param {Number} endX The current X position of the drag, in canvas coords.
513 * @param {Number} prevEndX The value of endX on the previous call to this
514 * function. Used to avoid excess redrawing
515 * @private
516 */
285a6bda 517Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
6a1aa64f
DV
518 var ctx = this.canvas_.getContext("2d");
519
520 // Clean up from the previous rect if necessary
521 if (prevEndX) {
522 ctx.clearRect(Math.min(startX, prevEndX), 0,
523 Math.abs(startX - prevEndX), this.height_);
524 }
525
526 // Draw a light-grey rectangle to show the new viewing area
527 if (endX && startX) {
528 ctx.fillStyle = "rgba(128,128,128,0.33)";
529 ctx.fillRect(Math.min(startX, endX), 0,
530 Math.abs(endX - startX), this.height_);
531 }
532};
533
534/**
535 * Zoom to something containing [lowX, highX]. These are pixel coordinates
536 * in the canvas. The exact zoom window may be slightly larger if there are no
537 * data points near lowX or highX. This function redraws the graph.
538 * @param {Number} lowX The leftmost pixel value that should be visible.
539 * @param {Number} highX The rightmost pixel value that should be visible.
540 * @private
541 */
285a6bda 542Dygraph.prototype.doZoom_ = function(lowX, highX) {
6a1aa64f
DV
543 // Find the earliest and latest dates contained in this canvasx range.
544 var points = this.layout_.points;
545 var minDate = null;
546 var maxDate = null;
547 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
548 for (var i = 0; i < points.length; i++) {
549 var cx = points[i].canvasx;
550 var x = points[i].xval;
551 if (cx < lowX && (minDate == null || x > minDate)) minDate = x;
552 if (cx > highX && (maxDate == null || x < maxDate)) maxDate = x;
553 }
554 // Use the extremes if either is missing
555 if (minDate == null) minDate = points[0].xval;
556 if (maxDate == null) maxDate = points[points.length-1].xval;
557
558 this.dateWindow_ = [minDate, maxDate];
559 this.drawGraph_(this.rawData_);
285a6bda
DV
560 if (this.attr_("zoomCallback")) {
561 this.attr_("zoomCallback")(minDate, maxDate);
67e650dc 562 }
6a1aa64f
DV
563};
564
565/**
566 * When the mouse moves in the canvas, display information about a nearby data
567 * point and draw dots over those points in the data series. This function
568 * takes care of cleanup of previously-drawn dots.
569 * @param {Object} event The mousemove event from the browser.
570 * @private
571 */
285a6bda 572Dygraph.prototype.mouseMove_ = function(event) {
6a1aa64f
DV
573 var canvasx = event.mouse().page.x - PlotKit.Base.findPosX(this.hidden_);
574 var points = this.layout_.points;
575
576 var lastx = -1;
577 var lasty = -1;
578
579 // Loop through all the points and find the date nearest to our current
580 // location.
581 var minDist = 1e+100;
582 var idx = -1;
583 for (var i = 0; i < points.length; i++) {
584 var dist = Math.abs(points[i].canvasx - canvasx);
585 if (dist > minDist) break;
586 minDist = dist;
587 idx = i;
588 }
589 if (idx >= 0) lastx = points[idx].xval;
590 // Check that you can really highlight the last day's data
591 if (canvasx > points[points.length-1].canvasx)
592 lastx = points[points.length-1].xval;
593
594 // Extract the points we've selected
595 var selPoints = [];
596 for (var i = 0; i < points.length; i++) {
597 if (points[i].xval == lastx) {
598 selPoints.push(points[i]);
599 }
600 }
601
602 // Clear the previously drawn vertical, if there is one
285a6bda 603 var circleSize = this.attr_('highlightCircleSize');
6a1aa64f
DV
604 var ctx = this.canvas_.getContext("2d");
605 if (this.previousVerticalX_ >= 0) {
606 var px = this.previousVerticalX_;
607 ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
608 }
609
610 if (selPoints.length > 0) {
611 var canvasx = selPoints[0].canvasx;
612
613 // Set the status message to indicate the selected point(s)
285a6bda 614 var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
6a1aa64f
DV
615 var clen = this.colors_.length;
616 for (var i = 0; i < selPoints.length; i++) {
285a6bda 617 if (this.attr_("labelsSeparateLines")) {
6a1aa64f
DV
618 replace += "<br/>";
619 }
620 var point = selPoints[i];
621 replace += " <b><font color='" + this.colors_[i%clen].toHexString() + "'>"
622 + point.name + "</font></b>:"
623 + this.round_(point.yval, 2);
624 }
285a6bda 625 this.attr_("labelsDiv").innerHTML = replace;
6a1aa64f
DV
626
627 // Save last x position for callbacks.
628 this.lastx_ = lastx;
629
630 // Draw colored circles over the center of each selected point
631 ctx.save()
632 for (var i = 0; i < selPoints.length; i++) {
633 ctx.beginPath();
634 ctx.fillStyle = this.colors_[i%clen].toRGBString();
635 ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false);
636 ctx.fill();
637 }
638 ctx.restore();
639
640 this.previousVerticalX_ = canvasx;
641 }
642};
643
644/**
645 * The mouse has left the canvas. Clear out whatever artifacts remain
646 * @param {Object} event the mouseout event from the browser.
647 * @private
648 */
285a6bda 649Dygraph.prototype.mouseOut_ = function(event) {
6a1aa64f
DV
650 // Get rid of the overlay data
651 var ctx = this.canvas_.getContext("2d");
652 ctx.clearRect(0, 0, this.width_, this.height_);
285a6bda 653 this.attr_("labelsDiv").innerHTML = "";
6a1aa64f
DV
654};
655
285a6bda 656Dygraph.zeropad = function(x) {
32988383
DV
657 if (x < 10) return "0" + x; else return "" + x;
658}
659
6a1aa64f 660/**
6b8e33dd
DV
661 * Return a string version of the hours, minutes and seconds portion of a date.
662 * @param {Number} date The JavaScript date (ms since epoch)
663 * @return {String} A time of the form "HH:MM:SS"
664 * @private
665 */
285a6bda
DV
666Dygraph.prototype.hmsString_ = function(date) {
667 var zeropad = Dygraph.zeropad;
6b8e33dd
DV
668 var d = new Date(date);
669 if (d.getSeconds()) {
670 return zeropad(d.getHours()) + ":" +
671 zeropad(d.getMinutes()) + ":" +
672 zeropad(d.getSeconds());
673 } else if (d.getMinutes()) {
674 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
675 } else {
676 return zeropad(d.getHours());
677 }
678}
679
680/**
6a1aa64f
DV
681 * Convert a JS date (millis since epoch) to YYYY/MM/DD
682 * @param {Number} date The JavaScript date (ms since epoch)
683 * @return {String} A date of the form "YYYY/MM/DD"
684 * @private
285a6bda 685 * TODO(danvk): why is this part of the prototype?
6a1aa64f 686 */
285a6bda
DV
687Dygraph.dateString_ = function(date, self) {
688 var zeropad = Dygraph.zeropad;
6a1aa64f
DV
689 var d = new Date(date);
690
691 // Get the year:
692 var year = "" + d.getFullYear();
693 // Get a 0 padded month string
6b8e33dd 694 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
6a1aa64f 695 // Get a 0 padded day string
6b8e33dd 696 var day = zeropad(d.getDate());
6a1aa64f 697
6b8e33dd
DV
698 var ret = "";
699 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
285a6bda 700 if (frac) ret = " " + self.hmsString_(date);
6b8e33dd
DV
701
702 return year + "/" + month + "/" + day + ret;
6a1aa64f
DV
703};
704
705/**
706 * Round a number to the specified number of digits past the decimal point.
707 * @param {Number} num The number to round
708 * @param {Number} places The number of decimals to which to round
709 * @return {Number} The rounded number
710 * @private
711 */
285a6bda 712Dygraph.prototype.round_ = function(num, places) {
6a1aa64f
DV
713 var shift = Math.pow(10, places);
714 return Math.round(num * shift)/shift;
715};
716
717/**
718 * Fires when there's data available to be graphed.
719 * @param {String} data Raw CSV data to be plotted
720 * @private
721 */
285a6bda 722Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f
DV
723 this.rawData_ = this.parseCSV_(data);
724 this.drawGraph_(this.rawData_);
725};
726
285a6bda 727Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
8846615a 728 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
285a6bda 729Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
6a1aa64f
DV
730
731/**
732 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
733 * @private
734 */
285a6bda 735Dygraph.prototype.addXTicks_ = function() {
6a1aa64f
DV
736 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
737 var startDate, endDate;
738 if (this.dateWindow_) {
739 startDate = this.dateWindow_[0];
740 endDate = this.dateWindow_[1];
741 } else {
742 startDate = this.rawData_[0][0];
743 endDate = this.rawData_[this.rawData_.length - 1][0];
744 }
745
285a6bda 746 var xTicks = this.attr_('xTicker')(startDate, endDate, this);
6a1aa64f 747 this.layout_.updateOptions({xTicks: xTicks});
32988383
DV
748};
749
750// Time granularity enumeration
285a6bda
DV
751Dygraph.SECONDLY = 0;
752Dygraph.TEN_SECONDLY = 1;
753Dygraph.THIRTY_SECONDLY = 2;
754Dygraph.MINUTELY = 3;
755Dygraph.TEN_MINUTELY = 4;
756Dygraph.THIRTY_MINUTELY = 5;
757Dygraph.HOURLY = 6;
758Dygraph.SIX_HOURLY = 7;
759Dygraph.DAILY = 8;
760Dygraph.WEEKLY = 9;
761Dygraph.MONTHLY = 10;
762Dygraph.QUARTERLY = 11;
763Dygraph.BIANNUAL = 12;
764Dygraph.ANNUAL = 13;
765Dygraph.DECADAL = 14;
766Dygraph.NUM_GRANULARITIES = 15;
767
768Dygraph.SHORT_SPACINGS = [];
769Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
770Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
771Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
772Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
773Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
774Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
775Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
776Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600 * 6;
777Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
778Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
32988383
DV
779
780// NumXTicks()
781//
782// If we used this time granularity, how many ticks would there be?
783// This is only an approximation, but it's generally good enough.
784//
285a6bda
DV
785Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
786 if (granularity < Dygraph.MONTHLY) {
32988383 787 // Generate one tick mark for every fixed interval of time.
285a6bda 788 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383
DV
789 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
790 } else {
791 var year_mod = 1; // e.g. to only print one point every 10 years.
792 var num_months = 12;
285a6bda
DV
793 if (granularity == Dygraph.QUARTERLY) num_months = 3;
794 if (granularity == Dygraph.BIANNUAL) num_months = 2;
795 if (granularity == Dygraph.ANNUAL) num_months = 1;
796 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
32988383
DV
797
798 var msInYear = 365.2524 * 24 * 3600 * 1000;
799 var num_years = 1.0 * (end_time - start_time) / msInYear;
800 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
801 }
802};
803
804// GetXAxis()
805//
806// Construct an x-axis of nicely-formatted times on meaningful boundaries
807// (e.g. 'Jan 09' rather than 'Jan 22, 2009').
808//
809// Returns an array containing {v: millis, label: label} dictionaries.
810//
285a6bda 811Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
32988383 812 var ticks = [];
285a6bda 813 if (granularity < Dygraph.MONTHLY) {
32988383 814 // Generate one tick mark for every fixed interval of time.
285a6bda 815 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383 816 var format = '%d%b'; // e.g. "1 Jan"
328bb812 817 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
285a6bda 818 if (granularity < Dygraph.HOURLY) {
328bb812
DV
819 start_time = spacing * Math.floor(0.5 + start_time / spacing);
820 }
32988383
DV
821 for (var t = start_time; t <= end_time; t += spacing) {
822 var d = new Date(t);
823 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
285a6bda 824 if (frac == 0 || granularity >= Dygraph.DAILY) {
32988383
DV
825 // the extra hour covers DST problems.
826 ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
827 } else {
828 ticks.push({ v:t, label: this.hmsString_(t) });
829 }
830 }
831 } else {
832 // Display a tick mark on the first of a set of months of each year.
833 // Years get a tick mark iff y % year_mod == 0. This is useful for
834 // displaying a tick mark once every 10 years, say, on long time scales.
835 var months;
836 var year_mod = 1; // e.g. to only print one point every 10 years.
837
285a6bda 838 if (granularity == Dygraph.MONTHLY) {
32988383 839 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
285a6bda 840 } else if (granularity == Dygraph.QUARTERLY) {
32988383 841 months = [ 0, 3, 6, 9 ];
285a6bda 842 } else if (granularity == Dygraph.BIANNUAL) {
32988383 843 months = [ 0, 6 ];
285a6bda 844 } else if (granularity == Dygraph.ANNUAL) {
32988383 845 months = [ 0 ];
285a6bda 846 } else if (granularity == Dygraph.DECADAL) {
32988383
DV
847 months = [ 0 ];
848 year_mod = 10;
849 }
850
851 var start_year = new Date(start_time).getFullYear();
852 var end_year = new Date(end_time).getFullYear();
285a6bda 853 var zeropad = Dygraph.zeropad;
32988383
DV
854 for (var i = start_year; i <= end_year; i++) {
855 if (i % year_mod != 0) continue;
856 for (var j = 0; j < months.length; j++) {
857 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
858 var t = Date.parse(date_str);
859 if (t < start_time || t > end_time) continue;
860 ticks.push({ v:t, label: new Date(t).strftime('%b %y') });
861 }
862 }
863 }
864
865 return ticks;
866};
867
6a1aa64f
DV
868
869/**
870 * Add ticks to the x-axis based on a date range.
871 * @param {Number} startDate Start of the date window (millis since epoch)
872 * @param {Number} endDate End of the date window (millis since epoch)
873 * @return {Array.<Object>} Array of {label, value} tuples.
874 * @public
875 */
285a6bda 876Dygraph.dateTicker = function(startDate, endDate, self) {
32988383 877 var chosen = -1;
285a6bda
DV
878 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
879 var num_ticks = self.NumXTicks(startDate, endDate, i);
880 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
32988383
DV
881 chosen = i;
882 break;
2769de62 883 }
6a1aa64f
DV
884 }
885
32988383 886 if (chosen >= 0) {
285a6bda 887 return self.GetXAxis(startDate, endDate, chosen);
6a1aa64f 888 } else {
32988383 889 // TODO(danvk): signal error.
6a1aa64f 890 }
6a1aa64f
DV
891};
892
893/**
894 * Add ticks when the x axis has numbers on it (instead of dates)
895 * @param {Number} startDate Start of the date window (millis since epoch)
896 * @param {Number} endDate End of the date window (millis since epoch)
897 * @return {Array.<Object>} Array of {label, value} tuples.
898 * @public
899 */
285a6bda 900Dygraph.numericTicks = function(minV, maxV, self) {
c6336f04
DV
901 // Basic idea:
902 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
903 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
285a6bda 904 // The first spacing greater than pixelsPerYLabel is what we use.
c6336f04
DV
905 var mults = [1, 2, 5];
906 var scale, low_val, high_val, nTicks;
285a6bda
DV
907 // TODO(danvk): make it possible to set this for x- and y-axes independently.
908 var pixelsPerTick = self.attr_('pixelsPerYLabel');
c6336f04
DV
909 for (var i = -10; i < 50; i++) {
910 var base_scale = Math.pow(10, i);
911 for (var j = 0; j < mults.length; j++) {
912 scale = base_scale * mults[j];
c6336f04
DV
913 low_val = Math.floor(minV / scale) * scale;
914 high_val = Math.ceil(maxV / scale) * scale;
915 nTicks = (high_val - low_val) / scale;
285a6bda 916 var spacing = self.height_ / nTicks;
c6336f04 917 // wish I could break out of both loops at once...
285a6bda 918 if (spacing > pixelsPerTick) break;
c6336f04 919 }
285a6bda 920 if (spacing > pixelsPerTick) break;
6a1aa64f
DV
921 }
922
923 // Construct labels for the ticks
924 var ticks = [];
c6336f04
DV
925 for (var i = 0; i < nTicks; i++) {
926 var tickV = low_val + i * scale;
285a6bda
DV
927 var label = self.round_(tickV, 2);
928 if (self.attr_("labelsKMB")) {
6a1aa64f
DV
929 var k = 1000;
930 if (tickV >= k*k*k) {
285a6bda 931 label = self.round_(tickV/(k*k*k), 1) + "B";
6a1aa64f 932 } else if (tickV >= k*k) {
285a6bda 933 label = self.round_(tickV/(k*k), 1) + "M";
6a1aa64f 934 } else if (tickV >= k) {
285a6bda 935 label = self.round_(tickV/k, 1) + "K";
6a1aa64f
DV
936 }
937 }
938 ticks.push( {label: label, v: tickV} );
939 }
940 return ticks;
941};
942
943/**
944 * Adds appropriate ticks on the y-axis
945 * @param {Number} minY The minimum Y value in the data set
946 * @param {Number} maxY The maximum Y value in the data set
947 * @private
948 */
285a6bda 949Dygraph.prototype.addYTicks_ = function(minY, maxY) {
6a1aa64f 950 // Set the number of ticks so that the labels are human-friendly.
285a6bda
DV
951 // TODO(danvk): make this an attribute as well.
952 var ticks = Dygraph.numericTicks(minY, maxY, this);
6a1aa64f
DV
953 this.layout_.updateOptions( { yAxis: [minY, maxY],
954 yTicks: ticks } );
955};
956
957/**
958 * Update the graph with new data. Data is in the format
959 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
960 * or, if errorBars=true,
961 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
962 * @param {Array.<Object>} data The data (see above)
963 * @private
964 */
285a6bda 965Dygraph.prototype.drawGraph_ = function(data) {
6a1aa64f
DV
966 var maxY = null;
967 this.layout_.removeAllDatasets();
285a6bda
DV
968 this.setColors_();
969
6a1aa64f
DV
970 // Loop over all fields in the dataset
971 for (var i = 1; i < data[0].length; i++) {
972 var series = [];
973 for (var j = 0; j < data.length; j++) {
974 var date = data[j][0];
975 series[j] = [date, data[j][i]];
976 }
977 series = this.rollingAverage(series, this.rollPeriod_);
978
979 // Prune down to the desired range, if necessary (for zooming)
285a6bda 980 var bars = this.attr_("errorBars") || this.customBars_;
6a1aa64f
DV
981 if (this.dateWindow_) {
982 var low = this.dateWindow_[0];
983 var high= this.dateWindow_[1];
984 var pruned = [];
985 for (var k = 0; k < series.length; k++) {
986 if (series[k][0] >= low && series[k][0] <= high) {
987 pruned.push(series[k]);
988 var y = bars ? series[k][1][0] : series[k][1];
989 if (maxY == null || y > maxY) maxY = y;
990 }
991 }
992 series = pruned;
993 } else {
285a6bda
DV
994 if (!this.customBars_) {
995 for (var j = 0; j < series.length; j++) {
996 var y = bars ? series[j][1][0] : series[j][1];
997 if (maxY == null || y > maxY) {
998 maxY = bars ? y + series[j][1][1] : y;
999 }
1000 }
1001 } else {
1002 // With custom bars, maxY is the max of the high values.
1003 for (var j = 0; j < series.length; j++) {
1004 var y = series[j][1][0];
1005 var high = series[j][1][2];
1006 if (high > y) y = high;
1007 if (maxY == null || y > maxY) {
1008 maxY = y;
1009 }
6a1aa64f
DV
1010 }
1011 }
1012 }
1013
1014 if (bars) {
1015 var vals = [];
1016 for (var j=0; j<series.length; j++)
1017 vals[j] = [series[j][0],
1018 series[j][1][0], series[j][1][1], series[j][1][2]];
285a6bda 1019 this.layout_.addDataset(this.attr_("labels")[i], vals);
6a1aa64f 1020 } else {
285a6bda 1021 this.layout_.addDataset(this.attr_("labels")[i], series);
6a1aa64f
DV
1022 }
1023 }
1024
1025 // Use some heuristics to come up with a good maxY value, unless it's been
1026 // set explicitly by the user.
1027 if (this.valueRange_ != null) {
1028 this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
1029 } else {
1030 // Add some padding and round up to an integer to be human-friendly.
1031 maxY *= 1.1;
1032 if (maxY <= 0.0) maxY = 1.0;
6a1aa64f
DV
1033 this.addYTicks_(0, maxY);
1034 }
1035
1036 this.addXTicks_();
1037
1038 // Tell PlotKit to use this new data and render itself
1039 this.layout_.evaluateWithError();
1040 this.plotter_.clear();
1041 this.plotter_.render();
1042 this.canvas_.getContext('2d').clearRect(0, 0,
1043 this.canvas_.width, this.canvas_.height);
1044};
1045
1046/**
1047 * Calculates the rolling average of a data set.
1048 * If originalData is [label, val], rolls the average of those.
1049 * If originalData is [label, [, it's interpreted as [value, stddev]
1050 * and the roll is returned in the same form, with appropriately reduced
1051 * stddev for each value.
1052 * Note that this is where fractional input (i.e. '5/10') is converted into
1053 * decimal values.
1054 * @param {Array} originalData The data in the appropriate format (see above)
1055 * @param {Number} rollPeriod The number of days over which to average the data
1056 */
285a6bda 1057Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
6a1aa64f
DV
1058 if (originalData.length < 2)
1059 return originalData;
1060 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
1061 var rollingData = [];
285a6bda 1062 var sigma = this.attr_("sigma");
6a1aa64f
DV
1063
1064 if (this.fractions_) {
1065 var num = 0;
1066 var den = 0; // numerator/denominator
1067 var mult = 100.0;
1068 for (var i = 0; i < originalData.length; i++) {
1069 num += originalData[i][1][0];
1070 den += originalData[i][1][1];
1071 if (i - rollPeriod >= 0) {
1072 num -= originalData[i - rollPeriod][1][0];
1073 den -= originalData[i - rollPeriod][1][1];
1074 }
1075
1076 var date = originalData[i][0];
1077 var value = den ? num / den : 0.0;
285a6bda 1078 if (this.attr_("errorBars")) {
6a1aa64f
DV
1079 if (this.wilsonInterval_) {
1080 // For more details on this confidence interval, see:
1081 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
1082 if (den) {
1083 var p = value < 0 ? 0 : value, n = den;
1084 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
1085 var denom = 1 + sigma * sigma / den;
1086 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
1087 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
1088 rollingData[i] = [date,
1089 [p * mult, (p - low) * mult, (high - p) * mult]];
1090 } else {
1091 rollingData[i] = [date, [0, 0, 0]];
1092 }
1093 } else {
1094 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
1095 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
1096 }
1097 } else {
1098 rollingData[i] = [date, mult * value];
1099 }
1100 }
1101 } else if (this.customBars_) {
f6885d6a
DV
1102 var low = 0;
1103 var mid = 0;
1104 var high = 0;
1105 var count = 0;
6a1aa64f
DV
1106 for (var i = 0; i < originalData.length; i++) {
1107 var data = originalData[i][1];
1108 var y = data[1];
1109 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
f6885d6a
DV
1110
1111 low += data[0];
1112 mid += y;
1113 high += data[2];
1114 count += 1;
1115 if (i - rollPeriod >= 0) {
1116 var prev = originalData[i - rollPeriod];
1117 low -= prev[1][0];
1118 mid -= prev[1][1];
1119 high -= prev[1][2];
1120 count -= 1;
1121 }
1122 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
1123 1.0 * (mid - low) / count,
1124 1.0 * (high - mid) / count ]];
2769de62 1125 }
6a1aa64f
DV
1126 } else {
1127 // Calculate the rolling average for the first rollPeriod - 1 points where
1128 // there is not enough data to roll over the full number of days
1129 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
285a6bda 1130 if (!this.attr_("errorBars")){
6a1aa64f
DV
1131 for (var i = 0; i < num_init_points; i++) {
1132 var sum = 0;
1133 for (var j = 0; j < i + 1; j++)
1134 sum += originalData[j][1];
1135 rollingData[i] = [originalData[i][0], sum / (i + 1)];
1136 }
1137 // Calculate the rolling average for the remaining points
1138 for (var i = Math.min(rollPeriod - 1, originalData.length - 2);
1139 i < originalData.length;
1140 i++) {
1141 var sum = 0;
1142 for (var j = i - rollPeriod + 1; j < i + 1; j++)
1143 sum += originalData[j][1];
1144 rollingData[i] = [originalData[i][0], sum / rollPeriod];
1145 }
1146 } else {
1147 for (var i = 0; i < num_init_points; i++) {
1148 var sum = 0;
1149 var variance = 0;
1150 for (var j = 0; j < i + 1; j++) {
1151 sum += originalData[j][1][0];
1152 variance += Math.pow(originalData[j][1][1], 2);
1153 }
1154 var stddev = Math.sqrt(variance)/(i+1);
1155 rollingData[i] = [originalData[i][0],
1156 [sum/(i+1), sigma * stddev, sigma * stddev]];
1157 }
1158 // Calculate the rolling average for the remaining points
1159 for (var i = Math.min(rollPeriod - 1, originalData.length - 2);
1160 i < originalData.length;
1161 i++) {
1162 var sum = 0;
1163 var variance = 0;
1164 for (var j = i - rollPeriod + 1; j < i + 1; j++) {
1165 sum += originalData[j][1][0];
1166 variance += Math.pow(originalData[j][1][1], 2);
1167 }
1168 var stddev = Math.sqrt(variance) / rollPeriod;
1169 rollingData[i] = [originalData[i][0],
1170 [sum / rollPeriod, sigma * stddev, sigma * stddev]];
1171 }
1172 }
1173 }
1174
1175 return rollingData;
1176};
1177
1178/**
1179 * Parses a date, returning the number of milliseconds since epoch. This can be
285a6bda
DV
1180 * passed in as an xValueParser in the Dygraph constructor.
1181 * TODO(danvk): enumerate formats that this understands.
6a1aa64f
DV
1182 * @param {String} A date in YYYYMMDD format.
1183 * @return {Number} Milliseconds since epoch.
1184 * @public
1185 */
285a6bda 1186Dygraph.dateParser = function(dateStr, self) {
6a1aa64f 1187 var dateStrSlashed;
285a6bda 1188 var d;
2769de62 1189 if (dateStr.length == 10 && dateStr.search("-") != -1) { // e.g. '2009-07-12'
6a1aa64f 1190 dateStrSlashed = dateStr.replace("-", "/", "g");
353a0294
DV
1191 while (dateStrSlashed.search("-") != -1) {
1192 dateStrSlashed = dateStrSlashed.replace("-", "/");
1193 }
285a6bda 1194 d = Date.parse(dateStrSlashed);
2769de62 1195 } else if (dateStr.length == 8) { // e.g. '20090712'
285a6bda 1196 // TODO(danvk): remove support for this format. It's confusing.
6a1aa64f
DV
1197 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
1198 + "/" + dateStr.substr(6,2);
285a6bda 1199 d = Date.parse(dateStrSlashed);
2769de62
DV
1200 } else {
1201 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1202 // "2009/07/12 12:34:56"
285a6bda
DV
1203 d = Date.parse(dateStr);
1204 }
1205
1206 if (!d || isNaN(d)) {
1207 self.error("Couldn't parse " + dateStr + " as a date");
1208 }
1209 return d;
1210};
1211
1212/**
1213 * Detects the type of the str (date or numeric) and sets the various
1214 * formatting attributes in this.attrs_ based on this type.
1215 * @param {String} str An x value.
1216 * @private
1217 */
1218Dygraph.prototype.detectTypeFromString_ = function(str) {
1219 var isDate = false;
1220 if (str.indexOf('-') >= 0 ||
1221 str.indexOf('/') >= 0 ||
1222 isNaN(parseFloat(str))) {
1223 isDate = true;
1224 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
1225 // TODO(danvk): remove support for this format.
1226 isDate = true;
1227 }
1228
1229 if (isDate) {
1230 this.attrs_.xValueFormatter = Dygraph.dateString_;
1231 this.attrs_.xValueParser = Dygraph.dateParser;
1232 this.attrs_.xTicker = Dygraph.dateTicker;
1233 } else {
1234 this.attrs_.xValueFormatter = function(x) { return x; };
1235 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
1236 this.attrs_.xTicker = Dygraph.numericTicks;
6a1aa64f 1237 }
6a1aa64f
DV
1238};
1239
1240/**
1241 * Parses a string in a special csv format. We expect a csv file where each
1242 * line is a date point, and the first field in each line is the date string.
1243 * We also expect that all remaining fields represent series.
285a6bda 1244 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f
DV
1245 * date, series1, stddev1, series2, stddev2, ...
1246 * @param {Array.<Object>} data See above.
1247 * @private
285a6bda
DV
1248 *
1249 * @return Array.<Object> An array with one entry for each row. These entries
1250 * are an array of cells in that row. The first entry is the parsed x-value for
1251 * the row. The second, third, etc. are the y-values. These can take on one of
1252 * three forms, depending on the CSV and constructor parameters:
1253 * 1. numeric value
1254 * 2. [ value, stddev ]
1255 * 3. [ low value, center value, high value ]
6a1aa64f 1256 */
285a6bda 1257Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f
DV
1258 var ret = [];
1259 var lines = data.split("\n");
285a6bda 1260 var start = 0;
6a1aa64f 1261 if (this.labelsFromCSV_) {
285a6bda
DV
1262 start = 1;
1263 this.attrs_.labels = lines[0].split(",");
6a1aa64f
DV
1264 }
1265
285a6bda
DV
1266 var xParser;
1267 var defaultParserSet = false; // attempt to auto-detect x value type
1268 var expectedCols = this.attr_("labels").length;
6a1aa64f
DV
1269 for (var i = start; i < lines.length; i++) {
1270 var line = lines[i];
1271 if (line.length == 0) continue; // skip blank lines
1272 var inFields = line.split(',');
285a6bda 1273 if (inFields.length < 2) continue;
6a1aa64f
DV
1274
1275 var fields = [];
285a6bda
DV
1276 if (!defaultParserSet) {
1277 this.detectTypeFromString_(inFields[0]);
1278 xParser = this.attr_("xValueParser");
1279 defaultParserSet = true;
1280 }
1281 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
1282
1283 // If fractions are expected, parse the numbers as "A/B"
1284 if (this.fractions_) {
1285 for (var j = 1; j < inFields.length; j++) {
1286 // TODO(danvk): figure out an appropriate way to flag parse errors.
1287 var vals = inFields[j].split("/");
1288 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1289 }
285a6bda 1290 } else if (this.attr_("errorBars")) {
6a1aa64f
DV
1291 // If there are error bars, values are (value, stddev) pairs
1292 for (var j = 1; j < inFields.length; j += 2)
1293 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1294 parseFloat(inFields[j + 1])];
1295 } else if (this.customBars_) {
1296 // Bars are a low;center;high tuple
1297 for (var j = 1; j < inFields.length; j++) {
1298 var vals = inFields[j].split(";");
1299 fields[j] = [ parseFloat(vals[0]),
1300 parseFloat(vals[1]),
1301 parseFloat(vals[2]) ];
1302 }
1303 } else {
1304 // Values are just numbers
285a6bda 1305 for (var j = 1; j < inFields.length; j++) {
6a1aa64f 1306 fields[j] = parseFloat(inFields[j]);
285a6bda 1307 }
6a1aa64f
DV
1308 }
1309 ret.push(fields);
285a6bda
DV
1310
1311 if (fields.length != expectedCols) {
1312 this.error("Number of columns in line " + i + " (" + fields.length +
1313 ") does not agree with number of labels (" + expectedCols +
1314 ") " + line);
1315 }
6a1aa64f
DV
1316 }
1317 return ret;
1318};
1319
1320/**
285a6bda
DV
1321 * The user has provided their data as a pre-packaged JS array. If the x values
1322 * are numeric, this is the same as dygraphs' internal format. If the x values
1323 * are dates, we need to convert them from Date objects to ms since epoch.
1324 * @param {Array.<Object>} data
1325 * @return {Array.<Object>} data with numeric x values.
1326 */
1327Dygraph.prototype.parseArray_ = function(data) {
1328 // Peek at the first x value to see if it's numeric.
1329 if (data.length == 0) {
1330 this.error("Can't plot empty data set");
1331 return null;
1332 }
1333 if (data[0].length == 0) {
1334 this.error("Data set cannot contain an empty row");
1335 return null;
1336 }
1337
1338 if (this.attr_("labels") == null) {
1339 this.warn("Using default labels. Set labels explicitly via 'labels' " +
1340 "in the options parameter");
1341 this.attrs_.labels = [ "X" ];
1342 for (var i = 1; i < data[0].length; i++) {
1343 this.attrs_.labels.push("Y" + i);
1344 }
1345 }
1346
1347 if (MochiKit.Base.isDateLike(data[0][0])) {
1348 // Some intelligent defaults for a date x-axis.
1349 this.attrs_.xValueFormatter = Dygraph.dateString_;
1350 this.attrs_.xTicker = Dygraph.dateTicker;
1351
1352 // Assume they're all dates.
1353 var parsedData = MochiKit.Base.clone(data);
1354 for (var i = 0; i < data.length; i++) {
1355 if (parsedData[i].length == 0) {
1356 this.error("Row " << (1 + i) << " of data is empty");
1357 return null;
1358 }
1359 if (parsedData[i][0] == null
1360 || typeof(parsedData[i][0].getTime) != 'function') {
1361 this.error("x value in row " << (1 + i) << " is not a Date");
1362 return null;
1363 }
1364 parsedData[i][0] = parsedData[i][0].getTime();
1365 }
1366 return parsedData;
1367 } else {
1368 // Some intelligent defaults for a numeric x-axis.
1369 this.attrs_.xValueFormatter = function(x) { return x; };
1370 this.attrs_.xTicker = Dygraph.numericTicks;
1371 return data;
1372 }
1373};
1374
1375/**
79420a1e
DV
1376 * Parses a DataTable object from gviz.
1377 * The data is expected to have a first column that is either a date or a
1378 * number. All subsequent columns must be numbers. If there is a clear mismatch
1379 * between this.xValueParser_ and the type of the first column, it will be
1380 * fixed. Returned value is in the same format as return value of parseCSV_.
1381 * @param {Array.<Object>} data See above.
1382 * @private
1383 */
285a6bda 1384Dygraph.prototype.parseDataTable_ = function(data) {
79420a1e
DV
1385 var cols = data.getNumberOfColumns();
1386 var rows = data.getNumberOfRows();
1387
1388 // Read column labels
1389 var labels = [];
1390 for (var i = 0; i < cols; i++) {
1391 labels.push(data.getColumnLabel(i));
1392 }
285a6bda 1393 this.attrs_.labels = labels;
79420a1e 1394
d955e223 1395 var indepType = data.getColumnType(0);
285a6bda
DV
1396 if (indepType == 'date') {
1397 this.attrs_.xValueFormatter = Dygraph.dateString_;
1398 this.attrs_.xValueParser = Dygraph.dateParser;
1399 this.attrs_.xTicker = Dygraph.dateTicker;
1400 } else if (indepType != 'number') {
1401 this.attrs_.xValueFormatter = function(x) { return x; };
1402 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
1403 this.attrs_.xTicker = Dygraph.numericTicks;
1404 } else {
1405 this.error("only 'date' and 'number' types are supported for column 1" +
1406 "of DataTable input (Got '" + indepType + "')");
79420a1e
DV
1407 return null;
1408 }
1409
1410 var ret = [];
1411 for (var i = 0; i < rows; i++) {
1412 var row = [];
d955e223
DV
1413 if (indepType == 'date') {
1414 row.push(data.getValue(i, 0).getTime());
1415 } else {
1416 row.push(data.getValue(i, 0));
1417 }
79420a1e
DV
1418 for (var j = 1; j < cols; j++) {
1419 row.push(data.getValue(i, j));
1420 }
1421 ret.push(row);
1422 }
1423 return ret;
1424}
1425
1426/**
6a1aa64f
DV
1427 * Get the CSV data. If it's in a function, call that function. If it's in a
1428 * file, do an XMLHttpRequest to get it.
1429 * @private
1430 */
285a6bda 1431Dygraph.prototype.start_ = function() {
6a1aa64f 1432 if (typeof this.file_ == 'function') {
285a6bda 1433 // CSV string. Pretend we got it via XHR.
6a1aa64f 1434 this.loadedEvent_(this.file_());
285a6bda
DV
1435 } else if (MochiKit.Base.isArrayLike(this.file_)) {
1436 this.rawData_ = this.parseArray_(this.file_);
1437 this.drawGraph_(this.rawData_);
79420a1e
DV
1438 } else if (typeof this.file_ == 'object' &&
1439 typeof this.file_.getColumnRange == 'function') {
1440 // must be a DataTable from gviz.
1441 this.rawData_ = this.parseDataTable_(this.file_);
1442 this.drawGraph_(this.rawData_);
285a6bda
DV
1443 } else if (typeof this.file_ == 'string') {
1444 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1445 if (this.file_.indexOf('\n') >= 0) {
1446 this.loadedEvent_(this.file_);
1447 } else {
1448 var req = new XMLHttpRequest();
1449 var caller = this;
1450 req.onreadystatechange = function () {
1451 if (req.readyState == 4) {
1452 if (req.status == 200) {
1453 caller.loadedEvent_(req.responseText);
1454 }
6a1aa64f 1455 }
285a6bda 1456 };
6a1aa64f 1457
285a6bda
DV
1458 req.open("GET", this.file_, true);
1459 req.send(null);
1460 }
1461 } else {
1462 this.error("Unknown data format: " + (typeof this.file_));
6a1aa64f
DV
1463 }
1464};
1465
1466/**
1467 * Changes various properties of the graph. These can include:
1468 * <ul>
1469 * <li>file: changes the source data for the graph</li>
1470 * <li>errorBars: changes whether the data contains stddev</li>
1471 * </ul>
1472 * @param {Object} attrs The new properties and values
1473 */
285a6bda
DV
1474Dygraph.prototype.updateOptions = function(attrs) {
1475 // TODO(danvk): this is a mess. Rethink this function.
6a1aa64f
DV
1476 if (attrs.customBars) {
1477 this.customBars_ = attrs.customBars;
1478 }
6a1aa64f
DV
1479 if (attrs.rollPeriod) {
1480 this.rollPeriod_ = attrs.rollPeriod;
1481 }
1482 if (attrs.dateWindow) {
1483 this.dateWindow_ = attrs.dateWindow;
1484 }
1485 if (attrs.valueRange) {
1486 this.valueRange_ = attrs.valueRange;
1487 }
285a6bda
DV
1488 MochiKit.Base.update(this.user_attrs_, attrs);
1489
1490 this.labelsFromCSV_ = (this.attr_("labels") == null);
1491
1492 // TODO(danvk): this doesn't match the constructor logic
1493 this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
6a1aa64f
DV
1494 if (attrs['file'] && attrs['file'] != this.file_) {
1495 this.file_ = attrs['file'];
1496 this.start_();
1497 } else {
1498 this.drawGraph_(this.rawData_);
1499 }
1500};
1501
1502/**
1503 * Adjusts the number of days in the rolling average. Updates the graph to
1504 * reflect the new averaging period.
1505 * @param {Number} length Number of days over which to average the data.
1506 */
285a6bda 1507Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f
DV
1508 this.rollPeriod_ = length;
1509 this.drawGraph_(this.rawData_);
1510};
540d00f1
DV
1511
1512
1513/**
285a6bda 1514 * A wrapper around Dygraph that implements the gviz API.
540d00f1
DV
1515 * @param {Object} container The DOM object the visualization should live in.
1516 */
285a6bda 1517Dygraph.GVizChart = function(container) {
540d00f1
DV
1518 this.container = container;
1519}
1520
285a6bda 1521Dygraph.GVizChart.prototype.draw = function(data, options) {
540d00f1 1522 this.container.innerHTML = '';
285a6bda 1523 this.date_graph = new Dygraph(this.container, data, options);
540d00f1 1524}
285a6bda
DV
1525
1526// Older pages may still use this name.
1527DateGraph = Dygraph;