update combiend
[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,
afefbcdb 94 labelsKMG2: false,
285a6bda
DV
95
96 strokeWidth: 1.0,
8e4a6af3 97
8846615a
DV
98 axisTickSize: 3,
99 axisLabelFontSize: 14,
100 xAxisLabelWidth: 50,
101 yAxisLabelWidth: 50,
102 rightGap: 5,
285a6bda
DV
103
104 showRoller: false,
105 xValueFormatter: Dygraph.dateString_,
106 xValueParser: Dygraph.dateParser,
107 xTicker: Dygraph.dateTicker,
108
3d67f03b
DV
109 delimiter: ',',
110
ff00d3e2 111 logScale: false,
285a6bda
DV
112 sigma: 2.0,
113 errorBars: false,
114 fractions: false,
115 wilsonInterval: true, // only relevant if fractions is true
5954ef32
DV
116 customBars: false,
117 fillGraph: false
285a6bda
DV
118};
119
120// Various logging levels.
121Dygraph.DEBUG = 1;
122Dygraph.INFO = 2;
123Dygraph.WARNING = 3;
124Dygraph.ERROR = 3;
125
126Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
127 // Labels is no longer a constructor parameter, since it's typically set
128 // directly from the data source. It also conains a name for the x-axis,
129 // which the previous constructor form did not.
130 if (labels != null) {
131 var new_labels = ["Date"];
132 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
fc80a396 133 Dygraph.update(attrs, { 'labels': new_labels });
285a6bda
DV
134 }
135 this.__init__(div, file, attrs);
8e4a6af3
DV
136};
137
6a1aa64f 138/**
285a6bda 139 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
6a1aa64f
DV
140 * and interaction &lt;canvas&gt; inside of it. See the constructor for details
141 * on the parameters.
142 * @param {String | Function} file Source data
143 * @param {Array.<String>} labels Names of the data series
144 * @param {Object} attrs Miscellaneous other options
145 * @private
146 */
285a6bda
DV
147Dygraph.prototype.__init__ = function(div, file, attrs) {
148 // Support two-argument constructor
149 if (attrs == null) { attrs = {}; }
150
6a1aa64f 151 // Copy the important bits into the object
32988383 152 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
6a1aa64f 153 this.maindiv_ = div;
6a1aa64f 154 this.file_ = file;
285a6bda 155 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
6a1aa64f 156 this.previousVerticalX_ = -1;
6a1aa64f 157 this.fractions_ = attrs.fractions || false;
6a1aa64f
DV
158 this.dateWindow_ = attrs.dateWindow || null;
159 this.valueRange_ = attrs.valueRange || null;
6a1aa64f 160 this.wilsonInterval_ = attrs.wilsonInterval || true;
8e4a6af3 161
f7d6278e
DV
162 // Clear the div. This ensure that, if multiple dygraphs are passed the same
163 // div, then only one will be drawn.
164 div.innerHTML = "";
165
c21d2c2d 166 // If the div isn't already sized then inherit from our attrs or
167 // give it a default size.
285a6bda 168 if (div.style.width == '') {
c21d2c2d 169 div.style.width = attrs.width || Dygraph.DEFAULT_WIDTH + "px";
285a6bda
DV
170 }
171 if (div.style.height == '') {
c21d2c2d 172 div.style.height = attrs.height || Dygraph.DEFAULT_HEIGHT + "px";
32988383 173 }
285a6bda
DV
174 this.width_ = parseInt(div.style.width, 10);
175 this.height_ = parseInt(div.style.height, 10);
c21d2c2d 176 // The div might have been specified as percent of the current window size,
177 // convert that to an appropriate number of pixels.
178 if (div.style.width.indexOf("%") == div.style.width.length - 1) {
179 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
180 this.width_ = (this.width_ * self.innerWidth / 100) - 10;
181 }
182 if (div.style.height.indexOf("%") == div.style.height.length - 1) {
183 this.height_ = (this.height_ * self.innerHeight / 100) - 10;
184 }
32988383 185
285a6bda
DV
186 // Dygraphs has many options, some of which interact with one another.
187 // To keep track of everything, we maintain two sets of options:
188 //
c21d2c2d 189 // this.user_attrs_ only options explicitly set by the user.
285a6bda
DV
190 // this.attrs_ defaults, options derived from user_attrs_, data.
191 //
192 // Options are then accessed this.attr_('attr'), which first looks at
193 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
194 // defaults without overriding behavior that the user specifically asks for.
195 this.user_attrs_ = {};
fc80a396 196 Dygraph.update(this.user_attrs_, attrs);
6a1aa64f 197
285a6bda 198 this.attrs_ = {};
fc80a396 199 Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
6a1aa64f 200
285a6bda
DV
201 // Make a note of whether labels will be pulled from the CSV file.
202 this.labelsFromCSV_ = (this.attr_("labels") == null);
6a1aa64f
DV
203
204 // Create the containing DIV and other interactive elements
205 this.createInterface_();
206
738fc797 207 this.start_();
6a1aa64f
DV
208};
209
285a6bda
DV
210Dygraph.prototype.attr_ = function(name) {
211 if (typeof(this.user_attrs_[name]) != 'undefined') {
212 return this.user_attrs_[name];
213 } else if (typeof(this.attrs_[name]) != 'undefined') {
214 return this.attrs_[name];
215 } else {
216 return null;
217 }
218};
219
220// TODO(danvk): any way I can get the line numbers to be this.warn call?
221Dygraph.prototype.log = function(severity, message) {
222 if (typeof(console) != 'undefined') {
223 switch (severity) {
224 case Dygraph.DEBUG:
225 console.debug('dygraphs: ' + message);
226 break;
227 case Dygraph.INFO:
228 console.info('dygraphs: ' + message);
229 break;
230 case Dygraph.WARNING:
231 console.warn('dygraphs: ' + message);
232 break;
233 case Dygraph.ERROR:
234 console.error('dygraphs: ' + message);
235 break;
236 }
237 }
238}
239Dygraph.prototype.info = function(message) {
240 this.log(Dygraph.INFO, message);
241}
242Dygraph.prototype.warn = function(message) {
243 this.log(Dygraph.WARNING, message);
244}
245Dygraph.prototype.error = function(message) {
246 this.log(Dygraph.ERROR, message);
247}
248
6a1aa64f
DV
249/**
250 * Returns the current rolling period, as set by the user or an option.
251 * @return {Number} The number of days in the rolling window
252 */
285a6bda 253Dygraph.prototype.rollPeriod = function() {
6a1aa64f 254 return this.rollPeriod_;
76171648
DV
255};
256
257Dygraph.addEvent = function(el, evt, fn) {
258 var normed_fn = function(e) {
259 if (!e) var e = window.event;
260 fn(e);
261 };
262 if (window.addEventListener) { // Mozilla, Netscape, Firefox
263 el.addEventListener(evt, normed_fn, false);
264 } else { // IE
265 el.attachEvent('on' + evt, normed_fn);
266 }
267};
6a1aa64f
DV
268
269/**
285a6bda 270 * Generates interface elements for the Dygraph: a containing div, a div to
6a1aa64f 271 * display the current point, and a textbox to adjust the rolling average
697e70b2 272 * period. Also creates the Renderer/Layout elements.
6a1aa64f
DV
273 * @private
274 */
285a6bda 275Dygraph.prototype.createInterface_ = function() {
6a1aa64f
DV
276 // Create the all-enclosing graph div
277 var enclosing = this.maindiv_;
278
b0c3b730
DV
279 this.graphDiv = document.createElement("div");
280 this.graphDiv.style.width = this.width_ + "px";
281 this.graphDiv.style.height = this.height_ + "px";
282 enclosing.appendChild(this.graphDiv);
283
284 // Create the canvas for interactive parts of the chart.
f8cfec73
DV
285 // this.canvas_ = document.createElement("canvas");
286 this.canvas_ = Dygraph.createCanvas();
b0c3b730
DV
287 this.canvas_.style.position = "absolute";
288 this.canvas_.width = this.width_;
289 this.canvas_.height = this.height_;
f8cfec73
DV
290 this.canvas_.style.width = this.width_ + "px"; // for IE
291 this.canvas_.style.height = this.height_ + "px"; // for IE
b0c3b730
DV
292 this.graphDiv.appendChild(this.canvas_);
293
294 // ... and for static parts of the chart.
6a1aa64f 295 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
76171648
DV
296
297 var dygraph = this;
298 Dygraph.addEvent(this.hidden_, 'mousemove', function(e) {
299 dygraph.mouseMove_(e);
300 });
301 Dygraph.addEvent(this.hidden_, 'mouseout', function(e) {
302 dygraph.mouseOut_(e);
303 });
697e70b2
DV
304
305 // Create the grapher
306 // TODO(danvk): why does the Layout need its own set of options?
307 this.layoutOptions_ = { 'xOriginIsZero': false };
308 Dygraph.update(this.layoutOptions_, this.attrs_);
309 Dygraph.update(this.layoutOptions_, this.user_attrs_);
310 Dygraph.update(this.layoutOptions_, {
311 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
312
313 this.layout_ = new DygraphLayout(this, this.layoutOptions_);
314
315 // TODO(danvk): why does the Renderer need its own set of options?
316 this.renderOptions_ = { colorScheme: this.colors_,
317 strokeColor: null,
318 axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
319 Dygraph.update(this.renderOptions_, this.attrs_);
320 Dygraph.update(this.renderOptions_, this.user_attrs_);
321 this.plotter_ = new DygraphCanvasRenderer(this,
322 this.hidden_, this.layout_,
323 this.renderOptions_);
324
325 this.createStatusMessage_();
326 this.createRollInterface_();
327 this.createDragInterface_();
6a1aa64f
DV
328}
329
330/**
331 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
285a6bda 332 * this particular canvas. All Dygraph work is done on this.canvas_.
8846615a 333 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
6a1aa64f
DV
334 * @return {Object} The newly-created canvas
335 * @private
336 */
285a6bda 337Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
f8cfec73
DV
338 // var h = document.createElement("canvas");
339 var h = Dygraph.createCanvas();
6a1aa64f
DV
340 h.style.position = "absolute";
341 h.style.top = canvas.style.top;
342 h.style.left = canvas.style.left;
343 h.width = this.width_;
344 h.height = this.height_;
f8cfec73
DV
345 h.style.width = this.width_ + "px"; // for IE
346 h.style.height = this.height_ + "px"; // for IE
b0c3b730 347 this.graphDiv.appendChild(h);
6a1aa64f
DV
348 return h;
349};
350
f474c2a3
DV
351// Taken from MochiKit.Color
352Dygraph.hsvToRGB = function (hue, saturation, value) {
353 var red;
354 var green;
355 var blue;
356 if (saturation === 0) {
357 red = value;
358 green = value;
359 blue = value;
360 } else {
361 var i = Math.floor(hue * 6);
362 var f = (hue * 6) - i;
363 var p = value * (1 - saturation);
364 var q = value * (1 - (saturation * f));
365 var t = value * (1 - (saturation * (1 - f)));
366 switch (i) {
367 case 1: red = q; green = value; blue = p; break;
368 case 2: red = p; green = value; blue = t; break;
369 case 3: red = p; green = q; blue = value; break;
370 case 4: red = t; green = p; blue = value; break;
371 case 5: red = value; green = p; blue = q; break;
372 case 6: // fall through
373 case 0: red = value; green = t; blue = p; break;
374 }
375 }
376 red = Math.floor(255 * red + 0.5);
377 green = Math.floor(255 * green + 0.5);
378 blue = Math.floor(255 * blue + 0.5);
379 return 'rgb(' + red + ',' + green + ',' + blue + ')';
380};
381
382
6a1aa64f
DV
383/**
384 * Generate a set of distinct colors for the data series. This is done with a
385 * color wheel. Saturation/Value are customizable, and the hue is
386 * equally-spaced around the color wheel. If a custom set of colors is
387 * specified, that is used instead.
6a1aa64f
DV
388 * @private
389 */
285a6bda
DV
390Dygraph.prototype.setColors_ = function() {
391 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
392 // away with this.renderOptions_.
393 var num = this.attr_("labels").length - 1;
6a1aa64f 394 this.colors_ = [];
285a6bda
DV
395 var colors = this.attr_('colors');
396 if (!colors) {
397 var sat = this.attr_('colorSaturation') || 1.0;
398 var val = this.attr_('colorValue') || 0.5;
6a1aa64f 399 for (var i = 1; i <= num; i++) {
ec1959eb 400 if (!this.visibility()[i-1]) continue;
6a1aa64f 401 var hue = (1.0*i/(1+num));
f474c2a3 402 this.colors_.push( Dygraph.hsvToRGB(hue, sat, val) );
6a1aa64f
DV
403 }
404 } else {
405 for (var i = 0; i < num; i++) {
ec1959eb 406 if (!this.visibility()[i]) continue;
285a6bda 407 var colorStr = colors[i % colors.length];
f474c2a3 408 this.colors_.push(colorStr);
6a1aa64f
DV
409 }
410 }
285a6bda 411
c21d2c2d 412 // TODO(danvk): update this w/r/t/ the new options system.
285a6bda 413 this.renderOptions_.colorScheme = this.colors_;
fc80a396
DV
414 Dygraph.update(this.plotter_.options, this.renderOptions_);
415 Dygraph.update(this.layoutOptions_, this.user_attrs_);
416 Dygraph.update(this.layoutOptions_, this.attrs_);
6a1aa64f
DV
417}
418
3df0ccf0
DV
419// The following functions are from quirksmode.org
420// http://www.quirksmode.org/js/findpos.html
421Dygraph.findPosX = function(obj) {
422 var curleft = 0;
423 if (obj.offsetParent) {
424 while (obj.offsetParent) {
425 curleft += obj.offsetLeft;
426 obj = obj.offsetParent;
427 }
428 }
429 else if (obj.x)
430 curleft += obj.x;
431 return curleft;
432};
c21d2c2d 433
3df0ccf0
DV
434Dygraph.findPosY = function(obj) {
435 var curtop = 0;
436 if (obj.offsetParent) {
437 while (obj.offsetParent) {
438 curtop += obj.offsetTop;
439 obj = obj.offsetParent;
440 }
441 }
442 else if (obj.y)
443 curtop += obj.y;
444 return curtop;
445};
446
6a1aa64f
DV
447/**
448 * Create the div that contains information on the selected point(s)
449 * This goes in the top right of the canvas, unless an external div has already
450 * been specified.
451 * @private
452 */
285a6bda
DV
453Dygraph.prototype.createStatusMessage_ = function(){
454 if (!this.attr_("labelsDiv")) {
455 var divWidth = this.attr_('labelsDivWidth');
b0c3b730 456 var messagestyle = {
6a1aa64f
DV
457 "position": "absolute",
458 "fontSize": "14px",
459 "zIndex": 10,
460 "width": divWidth + "px",
461 "top": "0px",
8846615a 462 "left": (this.width_ - divWidth - 2) + "px",
6a1aa64f
DV
463 "background": "white",
464 "textAlign": "left",
b0c3b730 465 "overflow": "hidden"};
fc80a396 466 Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
b0c3b730
DV
467 var div = document.createElement("div");
468 for (var name in messagestyle) {
85b99f0b
DV
469 if (messagestyle.hasOwnProperty(name)) {
470 div.style[name] = messagestyle[name];
471 }
b0c3b730
DV
472 }
473 this.graphDiv.appendChild(div);
285a6bda 474 this.attrs_.labelsDiv = div;
6a1aa64f
DV
475 }
476};
477
478/**
479 * Create the text box to adjust the averaging period
480 * @return {Object} The newly-created text box
481 * @private
482 */
285a6bda 483Dygraph.prototype.createRollInterface_ = function() {
285a6bda 484 var display = this.attr_('showRoller') ? "block" : "none";
b0c3b730
DV
485 var textAttr = { "position": "absolute",
486 "zIndex": 10,
487 "top": (this.plotter_.area.h - 25) + "px",
488 "left": (this.plotter_.area.x + 1) + "px",
489 "display": display
6a1aa64f 490 };
b0c3b730
DV
491 var roller = document.createElement("input");
492 roller.type = "text";
493 roller.size = "2";
494 roller.value = this.rollPeriod_;
495 for (var name in textAttr) {
85b99f0b
DV
496 if (textAttr.hasOwnProperty(name)) {
497 roller.style[name] = textAttr[name];
498 }
b0c3b730
DV
499 }
500
6a1aa64f 501 var pa = this.graphDiv;
b0c3b730 502 pa.appendChild(roller);
76171648
DV
503 var dygraph = this;
504 roller.onchange = function() { dygraph.adjustRoll(roller.value); };
6a1aa64f 505 return roller;
76171648
DV
506};
507
508// These functions are taken from MochiKit.Signal
509Dygraph.pageX = function(e) {
510 if (e.pageX) {
511 return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
512 } else {
513 var de = document;
514 var b = document.body;
515 return e.clientX +
516 (de.scrollLeft || b.scrollLeft) -
517 (de.clientLeft || 0);
518 }
519};
520
521Dygraph.pageY = function(e) {
522 if (e.pageY) {
523 return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
524 } else {
525 var de = document;
526 var b = document.body;
527 return e.clientY +
528 (de.scrollTop || b.scrollTop) -
529 (de.clientTop || 0);
530 }
531};
6a1aa64f
DV
532
533/**
534 * Set up all the mouse handlers needed to capture dragging behavior for zoom
27385109 535 * events.
6a1aa64f
DV
536 * @private
537 */
285a6bda 538Dygraph.prototype.createDragInterface_ = function() {
6a1aa64f
DV
539 var self = this;
540
541 // Tracks whether the mouse is down right now
bce01b0f 542 var isZooming = false;
c776c216 543 var isPanning = false;
6a1aa64f
DV
544 var dragStartX = null;
545 var dragStartY = null;
546 var dragEndX = null;
547 var dragEndY = null;
548 var prevEndX = null;
bce01b0f
DV
549 var draggingDate = null;
550 var dateRange = null;
6a1aa64f
DV
551
552 // Utility function to convert page-wide coordinates to canvas coords
67e650dc
DV
553 var px = 0;
554 var py = 0;
76171648
DV
555 var getX = function(e) { return Dygraph.pageX(e) - px };
556 var getY = function(e) { return Dygraph.pageX(e) - py };
6a1aa64f
DV
557
558 // Draw zoom rectangles when the mouse is down and the user moves around
76171648 559 Dygraph.addEvent(this.hidden_, 'mousemove', function(event) {
bce01b0f 560 if (isZooming) {
6a1aa64f
DV
561 dragEndX = getX(event);
562 dragEndY = getY(event);
563
564 self.drawZoomRect_(dragStartX, dragEndX, prevEndX);
565 prevEndX = dragEndX;
bce01b0f
DV
566 } else if (isPanning) {
567 dragEndX = getX(event);
568 dragEndY = getY(event);
569
570 // Want to have it so that:
571 // 1. draggingDate appears at dragEndX
572 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
573
574 self.dateWindow_[0] = draggingDate - (dragEndX / self.width_) * dateRange;
575 self.dateWindow_[1] = self.dateWindow_[0] + dateRange;
576 self.drawGraph_(self.rawData_);
6a1aa64f
DV
577 }
578 });
579
580 // Track the beginning of drag events
76171648 581 Dygraph.addEvent(this.hidden_, 'mousedown', function(event) {
3df0ccf0
DV
582 px = Dygraph.findPosX(self.canvas_);
583 py = Dygraph.findPosY(self.canvas_);
6a1aa64f
DV
584 dragStartX = getX(event);
585 dragStartY = getY(event);
bce01b0f 586
2dab69c3 587 if (event.altKey || event.shiftKey) {
d12999d3 588 if (!self.dateWindow_) return; // have to be zoomed in to pan.
bce01b0f
DV
589 isPanning = true;
590 dateRange = self.dateWindow_[1] - self.dateWindow_[0];
d12999d3
DV
591 draggingDate = (dragStartX / self.width_) * dateRange +
592 self.dateWindow_[0];
bce01b0f
DV
593 } else {
594 isZooming = true;
595 }
6a1aa64f
DV
596 });
597
598 // If the user releases the mouse button during a drag, but not over the
599 // canvas, then it doesn't count as a zooming action.
76171648 600 Dygraph.addEvent(document, 'mouseup', function(event) {
bce01b0f
DV
601 if (isZooming || isPanning) {
602 isZooming = false;
6a1aa64f
DV
603 dragStartX = null;
604 dragStartY = null;
605 }
bce01b0f
DV
606
607 if (isPanning) {
608 isPanning = false;
609 draggingDate = null;
610 dateRange = null;
611 }
6a1aa64f
DV
612 });
613
614 // Temporarily cancel the dragging event when the mouse leaves the graph
76171648 615 Dygraph.addEvent(this.hidden_, 'mouseout', function(event) {
bce01b0f 616 if (isZooming) {
6a1aa64f
DV
617 dragEndX = null;
618 dragEndY = null;
619 }
620 });
621
622 // If the mouse is released on the canvas during a drag event, then it's a
623 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
76171648 624 Dygraph.addEvent(this.hidden_, 'mouseup', function(event) {
bce01b0f
DV
625 if (isZooming) {
626 isZooming = false;
6a1aa64f
DV
627 dragEndX = getX(event);
628 dragEndY = getY(event);
629 var regionWidth = Math.abs(dragEndX - dragStartX);
630 var regionHeight = Math.abs(dragEndY - dragStartY);
631
632 if (regionWidth < 2 && regionHeight < 2 &&
285a6bda 633 self.attr_('clickCallback') != null &&
6a1aa64f 634 self.lastx_ != undefined) {
b258a3da
DV
635 // TODO(danvk): pass along more info about the points.
636 self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
6a1aa64f
DV
637 }
638
639 if (regionWidth >= 10) {
640 self.doZoom_(Math.min(dragStartX, dragEndX),
641 Math.max(dragStartX, dragEndX));
642 } else {
643 self.canvas_.getContext("2d").clearRect(0, 0,
644 self.canvas_.width,
645 self.canvas_.height);
646 }
647
648 dragStartX = null;
649 dragStartY = null;
650 }
bce01b0f
DV
651
652 if (isPanning) {
653 isPanning = false;
654 draggingDate = null;
655 dateRange = null;
656 }
6a1aa64f
DV
657 });
658
659 // Double-clicking zooms back out
76171648 660 Dygraph.addEvent(this.hidden_, 'dblclick', function(event) {
b258a3da 661 if (self.dateWindow_ == null) return;
6a1aa64f
DV
662 self.dateWindow_ = null;
663 self.drawGraph_(self.rawData_);
664 var minDate = self.rawData_[0][0];
665 var maxDate = self.rawData_[self.rawData_.length - 1][0];
285a6bda
DV
666 if (self.attr_("zoomCallback")) {
667 self.attr_("zoomCallback")(minDate, maxDate);
67e650dc 668 }
6a1aa64f
DV
669 });
670};
671
672/**
673 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
674 * up any previous zoom rectangles that were drawn. This could be optimized to
675 * avoid extra redrawing, but it's tricky to avoid interactions with the status
676 * dots.
677 * @param {Number} startX The X position where the drag started, in canvas
678 * coordinates.
679 * @param {Number} endX The current X position of the drag, in canvas coords.
680 * @param {Number} prevEndX The value of endX on the previous call to this
681 * function. Used to avoid excess redrawing
682 * @private
683 */
285a6bda 684Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) {
6a1aa64f
DV
685 var ctx = this.canvas_.getContext("2d");
686
687 // Clean up from the previous rect if necessary
688 if (prevEndX) {
689 ctx.clearRect(Math.min(startX, prevEndX), 0,
690 Math.abs(startX - prevEndX), this.height_);
691 }
692
693 // Draw a light-grey rectangle to show the new viewing area
694 if (endX && startX) {
695 ctx.fillStyle = "rgba(128,128,128,0.33)";
696 ctx.fillRect(Math.min(startX, endX), 0,
697 Math.abs(endX - startX), this.height_);
698 }
699};
700
701/**
702 * Zoom to something containing [lowX, highX]. These are pixel coordinates
703 * in the canvas. The exact zoom window may be slightly larger if there are no
704 * data points near lowX or highX. This function redraws the graph.
705 * @param {Number} lowX The leftmost pixel value that should be visible.
706 * @param {Number} highX The rightmost pixel value that should be visible.
707 * @private
708 */
285a6bda 709Dygraph.prototype.doZoom_ = function(lowX, highX) {
6a1aa64f
DV
710 // Find the earliest and latest dates contained in this canvasx range.
711 var points = this.layout_.points;
712 var minDate = null;
713 var maxDate = null;
714 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
715 for (var i = 0; i < points.length; i++) {
716 var cx = points[i].canvasx;
717 var x = points[i].xval;
718 if (cx < lowX && (minDate == null || x > minDate)) minDate = x;
719 if (cx > highX && (maxDate == null || x < maxDate)) maxDate = x;
720 }
721 // Use the extremes if either is missing
722 if (minDate == null) minDate = points[0].xval;
723 if (maxDate == null) maxDate = points[points.length-1].xval;
724
725 this.dateWindow_ = [minDate, maxDate];
726 this.drawGraph_(this.rawData_);
285a6bda
DV
727 if (this.attr_("zoomCallback")) {
728 this.attr_("zoomCallback")(minDate, maxDate);
67e650dc 729 }
6a1aa64f
DV
730};
731
732/**
733 * When the mouse moves in the canvas, display information about a nearby data
734 * point and draw dots over those points in the data series. This function
735 * takes care of cleanup of previously-drawn dots.
736 * @param {Object} event The mousemove event from the browser.
737 * @private
738 */
285a6bda 739Dygraph.prototype.mouseMove_ = function(event) {
76171648 740 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.hidden_);
6a1aa64f
DV
741 var points = this.layout_.points;
742
743 var lastx = -1;
744 var lasty = -1;
745
746 // Loop through all the points and find the date nearest to our current
747 // location.
748 var minDist = 1e+100;
749 var idx = -1;
750 for (var i = 0; i < points.length; i++) {
751 var dist = Math.abs(points[i].canvasx - canvasx);
752 if (dist > minDist) break;
753 minDist = dist;
754 idx = i;
755 }
756 if (idx >= 0) lastx = points[idx].xval;
757 // Check that you can really highlight the last day's data
758 if (canvasx > points[points.length-1].canvasx)
759 lastx = points[points.length-1].xval;
760
761 // Extract the points we've selected
b258a3da 762 this.selPoints_ = [];
6a1aa64f
DV
763 for (var i = 0; i < points.length; i++) {
764 if (points[i].xval == lastx) {
b258a3da 765 this.selPoints_.push(points[i]);
6a1aa64f
DV
766 }
767 }
768
b258a3da
DV
769 if (this.attr_("highlightCallback")) {
770 this.attr_("highlightCallback")(event, lastx, this.selPoints_);
771 }
772
6a1aa64f 773 // Clear the previously drawn vertical, if there is one
285a6bda 774 var circleSize = this.attr_('highlightCircleSize');
6a1aa64f
DV
775 var ctx = this.canvas_.getContext("2d");
776 if (this.previousVerticalX_ >= 0) {
777 var px = this.previousVerticalX_;
778 ctx.clearRect(px - circleSize - 1, 0, 2 * circleSize + 2, this.height_);
779 }
780
584ceeaa
DV
781 var isOK = function(x) { return x && !isNaN(x); };
782
b258a3da
DV
783 if (this.selPoints_.length > 0) {
784 var canvasx = this.selPoints_[0].canvasx;
6a1aa64f
DV
785
786 // Set the status message to indicate the selected point(s)
285a6bda 787 var replace = this.attr_('xValueFormatter')(lastx, this) + ":";
6a1aa64f 788 var clen = this.colors_.length;
b258a3da
DV
789 for (var i = 0; i < this.selPoints_.length; i++) {
790 if (!isOK(this.selPoints_[i].canvasy)) continue;
285a6bda 791 if (this.attr_("labelsSeparateLines")) {
6a1aa64f
DV
792 replace += "<br/>";
793 }
b258a3da 794 var point = this.selPoints_[i];
f474c2a3
DV
795 var c = new RGBColor(this.colors_[i%clen]);
796 replace += " <b><font color='" + c.toHex() + "'>"
6a1aa64f
DV
797 + point.name + "</font></b>:"
798 + this.round_(point.yval, 2);
799 }
285a6bda 800 this.attr_("labelsDiv").innerHTML = replace;
6a1aa64f
DV
801
802 // Save last x position for callbacks.
803 this.lastx_ = lastx;
804
805 // Draw colored circles over the center of each selected point
806 ctx.save()
b258a3da
DV
807 for (var i = 0; i < this.selPoints_.length; i++) {
808 if (!isOK(this.selPoints_[i%clen].canvasy)) continue;
6a1aa64f 809 ctx.beginPath();
f474c2a3 810 ctx.fillStyle = this.colors_[i%clen];
b258a3da 811 ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize,
7bf6a9fe 812 0, 2 * Math.PI, false);
6a1aa64f
DV
813 ctx.fill();
814 }
815 ctx.restore();
816
817 this.previousVerticalX_ = canvasx;
818 }
819};
820
821/**
822 * The mouse has left the canvas. Clear out whatever artifacts remain
823 * @param {Object} event the mouseout event from the browser.
824 * @private
825 */
285a6bda 826Dygraph.prototype.mouseOut_ = function(event) {
6a1aa64f
DV
827 // Get rid of the overlay data
828 var ctx = this.canvas_.getContext("2d");
829 ctx.clearRect(0, 0, this.width_, this.height_);
285a6bda 830 this.attr_("labelsDiv").innerHTML = "";
6a1aa64f
DV
831};
832
285a6bda 833Dygraph.zeropad = function(x) {
32988383
DV
834 if (x < 10) return "0" + x; else return "" + x;
835}
836
6a1aa64f 837/**
6b8e33dd
DV
838 * Return a string version of the hours, minutes and seconds portion of a date.
839 * @param {Number} date The JavaScript date (ms since epoch)
840 * @return {String} A time of the form "HH:MM:SS"
841 * @private
842 */
285a6bda
DV
843Dygraph.prototype.hmsString_ = function(date) {
844 var zeropad = Dygraph.zeropad;
6b8e33dd
DV
845 var d = new Date(date);
846 if (d.getSeconds()) {
847 return zeropad(d.getHours()) + ":" +
848 zeropad(d.getMinutes()) + ":" +
849 zeropad(d.getSeconds());
850 } else if (d.getMinutes()) {
851 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
852 } else {
853 return zeropad(d.getHours());
854 }
855}
856
857/**
6a1aa64f
DV
858 * Convert a JS date (millis since epoch) to YYYY/MM/DD
859 * @param {Number} date The JavaScript date (ms since epoch)
860 * @return {String} A date of the form "YYYY/MM/DD"
861 * @private
285a6bda 862 * TODO(danvk): why is this part of the prototype?
6a1aa64f 863 */
285a6bda
DV
864Dygraph.dateString_ = function(date, self) {
865 var zeropad = Dygraph.zeropad;
6a1aa64f
DV
866 var d = new Date(date);
867
868 // Get the year:
869 var year = "" + d.getFullYear();
870 // Get a 0 padded month string
6b8e33dd 871 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
6a1aa64f 872 // Get a 0 padded day string
6b8e33dd 873 var day = zeropad(d.getDate());
6a1aa64f 874
6b8e33dd
DV
875 var ret = "";
876 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
285a6bda 877 if (frac) ret = " " + self.hmsString_(date);
6b8e33dd
DV
878
879 return year + "/" + month + "/" + day + ret;
6a1aa64f
DV
880};
881
882/**
883 * Round a number to the specified number of digits past the decimal point.
884 * @param {Number} num The number to round
885 * @param {Number} places The number of decimals to which to round
886 * @return {Number} The rounded number
887 * @private
888 */
285a6bda 889Dygraph.prototype.round_ = function(num, places) {
6a1aa64f
DV
890 var shift = Math.pow(10, places);
891 return Math.round(num * shift)/shift;
892};
893
894/**
895 * Fires when there's data available to be graphed.
896 * @param {String} data Raw CSV data to be plotted
897 * @private
898 */
285a6bda 899Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f
DV
900 this.rawData_ = this.parseCSV_(data);
901 this.drawGraph_(this.rawData_);
902};
903
285a6bda 904Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
8846615a 905 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
285a6bda 906Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
6a1aa64f
DV
907
908/**
909 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
910 * @private
911 */
285a6bda 912Dygraph.prototype.addXTicks_ = function() {
6a1aa64f
DV
913 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
914 var startDate, endDate;
915 if (this.dateWindow_) {
916 startDate = this.dateWindow_[0];
917 endDate = this.dateWindow_[1];
918 } else {
919 startDate = this.rawData_[0][0];
920 endDate = this.rawData_[this.rawData_.length - 1][0];
921 }
922
285a6bda 923 var xTicks = this.attr_('xTicker')(startDate, endDate, this);
6a1aa64f 924 this.layout_.updateOptions({xTicks: xTicks});
32988383
DV
925};
926
927// Time granularity enumeration
285a6bda 928Dygraph.SECONDLY = 0;
20a41c17
DV
929Dygraph.TWO_SECONDLY = 1;
930Dygraph.FIVE_SECONDLY = 2;
931Dygraph.TEN_SECONDLY = 3;
932Dygraph.THIRTY_SECONDLY = 4;
933Dygraph.MINUTELY = 5;
934Dygraph.TWO_MINUTELY = 6;
935Dygraph.FIVE_MINUTELY = 7;
936Dygraph.TEN_MINUTELY = 8;
937Dygraph.THIRTY_MINUTELY = 9;
938Dygraph.HOURLY = 10;
939Dygraph.TWO_HOURLY = 11;
940Dygraph.SIX_HOURLY = 12;
941Dygraph.DAILY = 13;
942Dygraph.WEEKLY = 14;
943Dygraph.MONTHLY = 15;
944Dygraph.QUARTERLY = 16;
945Dygraph.BIANNUAL = 17;
946Dygraph.ANNUAL = 18;
947Dygraph.DECADAL = 19;
948Dygraph.NUM_GRANULARITIES = 20;
285a6bda
DV
949
950Dygraph.SHORT_SPACINGS = [];
951Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
20a41c17
DV
952Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
953Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
285a6bda
DV
954Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
955Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
956Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
20a41c17
DV
957Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
958Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
285a6bda
DV
959Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
960Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
961Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
20a41c17 962Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
805d5519 963Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
285a6bda
DV
964Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
965Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
32988383
DV
966
967// NumXTicks()
968//
969// If we used this time granularity, how many ticks would there be?
970// This is only an approximation, but it's generally good enough.
971//
285a6bda
DV
972Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
973 if (granularity < Dygraph.MONTHLY) {
32988383 974 // Generate one tick mark for every fixed interval of time.
285a6bda 975 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383
DV
976 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
977 } else {
978 var year_mod = 1; // e.g. to only print one point every 10 years.
979 var num_months = 12;
285a6bda
DV
980 if (granularity == Dygraph.QUARTERLY) num_months = 3;
981 if (granularity == Dygraph.BIANNUAL) num_months = 2;
982 if (granularity == Dygraph.ANNUAL) num_months = 1;
983 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
32988383
DV
984
985 var msInYear = 365.2524 * 24 * 3600 * 1000;
986 var num_years = 1.0 * (end_time - start_time) / msInYear;
987 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
988 }
989};
990
991// GetXAxis()
992//
993// Construct an x-axis of nicely-formatted times on meaningful boundaries
994// (e.g. 'Jan 09' rather than 'Jan 22, 2009').
995//
996// Returns an array containing {v: millis, label: label} dictionaries.
997//
285a6bda 998Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
32988383 999 var ticks = [];
285a6bda 1000 if (granularity < Dygraph.MONTHLY) {
32988383 1001 // Generate one tick mark for every fixed interval of time.
285a6bda 1002 var spacing = Dygraph.SHORT_SPACINGS[granularity];
3d29302c 1003 var format = '%d%b'; // e.g. "1Jan"
076c9622
DV
1004
1005 // Find a time less than start_time which occurs on a "nice" time boundary
1006 // for this granularity.
1007 var g = spacing / 1000;
076c9622
DV
1008 var d = new Date(start_time);
1009 if (g <= 60) { // seconds
1010 var x = d.getSeconds(); d.setSeconds(x - x % g);
1011 } else {
1012 d.setSeconds(0);
1013 g /= 60;
1014 if (g <= 60) { // minutes
1015 var x = d.getMinutes(); d.setMinutes(x - x % g);
1016 } else {
1017 d.setMinutes(0);
1018 g /= 60;
1019
1020 if (g <= 24) { // days
1021 var x = d.getHours(); d.setHours(x - x % g);
1022 } else {
1023 d.setHours(0);
1024 g /= 24;
1025
1026 if (g == 7) { // one week
20a41c17 1027 d.setDate(d.getDate() - d.getDay());
076c9622
DV
1028 }
1029 }
1030 }
328bb812 1031 }
076c9622
DV
1032 start_time = d.getTime();
1033
32988383
DV
1034 for (var t = start_time; t <= end_time; t += spacing) {
1035 var d = new Date(t);
1036 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
285a6bda 1037 if (frac == 0 || granularity >= Dygraph.DAILY) {
32988383
DV
1038 // the extra hour covers DST problems.
1039 ticks.push({ v:t, label: new Date(t + 3600*1000).strftime(format) });
1040 } else {
1041 ticks.push({ v:t, label: this.hmsString_(t) });
1042 }
1043 }
1044 } else {
1045 // Display a tick mark on the first of a set of months of each year.
1046 // Years get a tick mark iff y % year_mod == 0. This is useful for
1047 // displaying a tick mark once every 10 years, say, on long time scales.
1048 var months;
1049 var year_mod = 1; // e.g. to only print one point every 10 years.
1050
285a6bda 1051 if (granularity == Dygraph.MONTHLY) {
32988383 1052 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
285a6bda 1053 } else if (granularity == Dygraph.QUARTERLY) {
32988383 1054 months = [ 0, 3, 6, 9 ];
285a6bda 1055 } else if (granularity == Dygraph.BIANNUAL) {
32988383 1056 months = [ 0, 6 ];
285a6bda 1057 } else if (granularity == Dygraph.ANNUAL) {
32988383 1058 months = [ 0 ];
285a6bda 1059 } else if (granularity == Dygraph.DECADAL) {
32988383
DV
1060 months = [ 0 ];
1061 year_mod = 10;
1062 }
1063
1064 var start_year = new Date(start_time).getFullYear();
1065 var end_year = new Date(end_time).getFullYear();
285a6bda 1066 var zeropad = Dygraph.zeropad;
32988383
DV
1067 for (var i = start_year; i <= end_year; i++) {
1068 if (i % year_mod != 0) continue;
1069 for (var j = 0; j < months.length; j++) {
1070 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
1071 var t = Date.parse(date_str);
1072 if (t < start_time || t > end_time) continue;
1073 ticks.push({ v:t, label: new Date(t).strftime('%b %y') });
1074 }
1075 }
1076 }
1077
1078 return ticks;
1079};
1080
6a1aa64f
DV
1081
1082/**
1083 * Add ticks to the x-axis based on a date range.
1084 * @param {Number} startDate Start of the date window (millis since epoch)
1085 * @param {Number} endDate End of the date window (millis since epoch)
1086 * @return {Array.<Object>} Array of {label, value} tuples.
1087 * @public
1088 */
285a6bda 1089Dygraph.dateTicker = function(startDate, endDate, self) {
32988383 1090 var chosen = -1;
285a6bda
DV
1091 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
1092 var num_ticks = self.NumXTicks(startDate, endDate, i);
1093 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
32988383
DV
1094 chosen = i;
1095 break;
2769de62 1096 }
6a1aa64f
DV
1097 }
1098
32988383 1099 if (chosen >= 0) {
285a6bda 1100 return self.GetXAxis(startDate, endDate, chosen);
6a1aa64f 1101 } else {
32988383 1102 // TODO(danvk): signal error.
6a1aa64f 1103 }
6a1aa64f
DV
1104};
1105
1106/**
1107 * Add ticks when the x axis has numbers on it (instead of dates)
1108 * @param {Number} startDate Start of the date window (millis since epoch)
1109 * @param {Number} endDate End of the date window (millis since epoch)
1110 * @return {Array.<Object>} Array of {label, value} tuples.
1111 * @public
1112 */
285a6bda 1113Dygraph.numericTicks = function(minV, maxV, self) {
c6336f04
DV
1114 // Basic idea:
1115 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1116 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
285a6bda 1117 // The first spacing greater than pixelsPerYLabel is what we use.
ff00d3e2 1118 // TODO(danvk): version that works on a log scale.
f09e46d4
DV
1119 if (self.attr_("labelsKMG2")) {
1120 var mults = [1, 2, 4, 8];
1121 } else {
1122 var mults = [1, 2, 5];
1123 }
c6336f04 1124 var scale, low_val, high_val, nTicks;
285a6bda
DV
1125 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1126 var pixelsPerTick = self.attr_('pixelsPerYLabel');
c6336f04 1127 for (var i = -10; i < 50; i++) {
f09e46d4
DV
1128 if (self.attr_("labelsKMG2")) {
1129 var base_scale = Math.pow(16, i);
1130 } else {
1131 var base_scale = Math.pow(10, i);
1132 }
c6336f04
DV
1133 for (var j = 0; j < mults.length; j++) {
1134 scale = base_scale * mults[j];
c6336f04
DV
1135 low_val = Math.floor(minV / scale) * scale;
1136 high_val = Math.ceil(maxV / scale) * scale;
1137 nTicks = (high_val - low_val) / scale;
285a6bda 1138 var spacing = self.height_ / nTicks;
c6336f04 1139 // wish I could break out of both loops at once...
285a6bda 1140 if (spacing > pixelsPerTick) break;
c6336f04 1141 }
285a6bda 1142 if (spacing > pixelsPerTick) break;
6a1aa64f
DV
1143 }
1144
1145 // Construct labels for the ticks
1146 var ticks = [];
ed11be50
DV
1147 var k;
1148 var k_labels = [];
1149 if (self.attr_("labelsKMB")) {
1150 k = 1000;
1151 k_labels = [ "K", "M", "B", "T" ];
1152 }
1153 if (self.attr_("labelsKMG2")) {
1154 if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1155 k = 1024;
1156 k_labels = [ "k", "M", "G", "T" ];
1157 }
1158
c6336f04
DV
1159 for (var i = 0; i < nTicks; i++) {
1160 var tickV = low_val + i * scale;
0af6e346 1161 var absTickV = Math.abs(tickV);
285a6bda 1162 var label = self.round_(tickV, 2);
ed11be50
DV
1163 if (k_labels.length) {
1164 // Round up to an appropriate unit.
1165 var n = k*k*k*k;
1166 for (var j = 3; j >= 0; j--, n /= k) {
1167 if (absTickV >= n) {
1168 label = self.round_(tickV / n, 1) + k_labels[j];
1169 break;
1170 }
afefbcdb 1171 }
6a1aa64f
DV
1172 }
1173 ticks.push( {label: label, v: tickV} );
1174 }
1175 return ticks;
1176};
1177
1178/**
1179 * Adds appropriate ticks on the y-axis
1180 * @param {Number} minY The minimum Y value in the data set
1181 * @param {Number} maxY The maximum Y value in the data set
1182 * @private
1183 */
285a6bda 1184Dygraph.prototype.addYTicks_ = function(minY, maxY) {
6a1aa64f 1185 // Set the number of ticks so that the labels are human-friendly.
285a6bda
DV
1186 // TODO(danvk): make this an attribute as well.
1187 var ticks = Dygraph.numericTicks(minY, maxY, this);
6a1aa64f
DV
1188 this.layout_.updateOptions( { yAxis: [minY, maxY],
1189 yTicks: ticks } );
1190};
1191
5011e7a1
DV
1192// Computes the range of the data series (including confidence intervals).
1193// series is either [ [x1, y1], [x2, y2], ... ] or
1194// [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1195// Returns [low, high]
1196Dygraph.prototype.extremeValues_ = function(series) {
1197 var minY = null, maxY = null;
1198
9922b78b 1199 var bars = this.attr_("errorBars") || this.attr_("customBars");
5011e7a1
DV
1200 if (bars) {
1201 // With custom bars, maxY is the max of the high values.
1202 for (var j = 0; j < series.length; j++) {
1203 var y = series[j][1][0];
1204 if (!y) continue;
1205 var low = y - series[j][1][1];
1206 var high = y + series[j][1][2];
1207 if (low > y) low = y; // this can happen with custom bars,
1208 if (high < y) high = y; // e.g. in tests/custom-bars.html
1209 if (maxY == null || high > maxY) {
1210 maxY = high;
1211 }
1212 if (minY == null || low < minY) {
1213 minY = low;
1214 }
1215 }
1216 } else {
1217 for (var j = 0; j < series.length; j++) {
1218 var y = series[j][1];
d12999d3 1219 if (y === null || isNaN(y)) continue;
5011e7a1
DV
1220 if (maxY == null || y > maxY) {
1221 maxY = y;
1222 }
1223 if (minY == null || y < minY) {
1224 minY = y;
1225 }
1226 }
1227 }
1228
1229 return [minY, maxY];
1230};
1231
6a1aa64f
DV
1232/**
1233 * Update the graph with new data. Data is in the format
1234 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1235 * or, if errorBars=true,
1236 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1237 * @param {Array.<Object>} data The data (see above)
1238 * @private
1239 */
285a6bda 1240Dygraph.prototype.drawGraph_ = function(data) {
3bd9c228 1241 var minY = null, maxY = null;
6a1aa64f 1242 this.layout_.removeAllDatasets();
285a6bda 1243 this.setColors_();
9317362d 1244 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
285a6bda 1245
6a1aa64f
DV
1246 // Loop over all fields in the dataset
1247 for (var i = 1; i < data[0].length; i++) {
1cf11047
DV
1248 if (!this.visibility()[i - 1]) continue;
1249
6a1aa64f
DV
1250 var series = [];
1251 for (var j = 0; j < data.length; j++) {
1252 var date = data[j][0];
1253 series[j] = [date, data[j][i]];
1254 }
1255 series = this.rollingAverage(series, this.rollPeriod_);
1256
1257 // Prune down to the desired range, if necessary (for zooming)
9922b78b 1258 var bars = this.attr_("errorBars") || this.attr_("customBars");
6a1aa64f
DV
1259 if (this.dateWindow_) {
1260 var low = this.dateWindow_[0];
1261 var high= this.dateWindow_[1];
1262 var pruned = [];
1263 for (var k = 0; k < series.length; k++) {
1264 if (series[k][0] >= low && series[k][0] <= high) {
1265 pruned.push(series[k]);
6a1aa64f
DV
1266 }
1267 }
1268 series = pruned;
6a1aa64f
DV
1269 }
1270
648acd28
DV
1271 var extremes = this.extremeValues_(series);
1272 var thisMinY = extremes[0];
1273 var thisMaxY = extremes[1];
5011e7a1
DV
1274 if (!minY || thisMinY < minY) minY = thisMinY;
1275 if (!maxY || thisMaxY > maxY) maxY = thisMaxY;
1276
6a1aa64f
DV
1277 if (bars) {
1278 var vals = [];
1279 for (var j=0; j<series.length; j++)
1280 vals[j] = [series[j][0],
1281 series[j][1][0], series[j][1][1], series[j][1][2]];
285a6bda 1282 this.layout_.addDataset(this.attr_("labels")[i], vals);
6a1aa64f 1283 } else {
285a6bda 1284 this.layout_.addDataset(this.attr_("labels")[i], series);
6a1aa64f
DV
1285 }
1286 }
1287
1288 // Use some heuristics to come up with a good maxY value, unless it's been
1289 // set explicitly by the user.
1290 if (this.valueRange_ != null) {
1291 this.addYTicks_(this.valueRange_[0], this.valueRange_[1]);
1292 } else {
1293 // Add some padding and round up to an integer to be human-friendly.
3bd9c228 1294 var span = maxY - minY;
93dfacfd
DV
1295 // special case: if we have no sense of scale, use +/-10% of the sole value.
1296 if (span == 0) { span = maxY; }
3bd9c228
DV
1297 var maxAxisY = maxY + 0.1 * span;
1298 var minAxisY = minY - 0.1 * span;
1299
1300 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
ceb009dd
DV
1301 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
1302 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
3bd9c228
DV
1303
1304 if (this.attr_("includeZero")) {
1305 if (maxY < 0) maxAxisY = 0;
1306 if (minY > 0) minAxisY = 0;
1307 }
1308
1309 this.addYTicks_(minAxisY, maxAxisY);
6a1aa64f
DV
1310 }
1311
1312 this.addXTicks_();
1313
1314 // Tell PlotKit to use this new data and render itself
d033ae1c 1315 this.layout_.updateOptions({dateWindow: this.dateWindow_});
6a1aa64f
DV
1316 this.layout_.evaluateWithError();
1317 this.plotter_.clear();
1318 this.plotter_.render();
f6401bf6
DV
1319 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
1320 this.canvas_.height);
6a1aa64f
DV
1321};
1322
1323/**
1324 * Calculates the rolling average of a data set.
1325 * If originalData is [label, val], rolls the average of those.
1326 * If originalData is [label, [, it's interpreted as [value, stddev]
1327 * and the roll is returned in the same form, with appropriately reduced
1328 * stddev for each value.
1329 * Note that this is where fractional input (i.e. '5/10') is converted into
1330 * decimal values.
1331 * @param {Array} originalData The data in the appropriate format (see above)
1332 * @param {Number} rollPeriod The number of days over which to average the data
1333 */
285a6bda 1334Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
6a1aa64f
DV
1335 if (originalData.length < 2)
1336 return originalData;
1337 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
1338 var rollingData = [];
285a6bda 1339 var sigma = this.attr_("sigma");
6a1aa64f
DV
1340
1341 if (this.fractions_) {
1342 var num = 0;
1343 var den = 0; // numerator/denominator
1344 var mult = 100.0;
1345 for (var i = 0; i < originalData.length; i++) {
1346 num += originalData[i][1][0];
1347 den += originalData[i][1][1];
1348 if (i - rollPeriod >= 0) {
1349 num -= originalData[i - rollPeriod][1][0];
1350 den -= originalData[i - rollPeriod][1][1];
1351 }
1352
1353 var date = originalData[i][0];
1354 var value = den ? num / den : 0.0;
285a6bda 1355 if (this.attr_("errorBars")) {
6a1aa64f
DV
1356 if (this.wilsonInterval_) {
1357 // For more details on this confidence interval, see:
1358 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
1359 if (den) {
1360 var p = value < 0 ? 0 : value, n = den;
1361 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
1362 var denom = 1 + sigma * sigma / den;
1363 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
1364 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
1365 rollingData[i] = [date,
1366 [p * mult, (p - low) * mult, (high - p) * mult]];
1367 } else {
1368 rollingData[i] = [date, [0, 0, 0]];
1369 }
1370 } else {
1371 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
1372 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
1373 }
1374 } else {
1375 rollingData[i] = [date, mult * value];
1376 }
1377 }
9922b78b 1378 } else if (this.attr_("customBars")) {
f6885d6a
DV
1379 var low = 0;
1380 var mid = 0;
1381 var high = 0;
1382 var count = 0;
6a1aa64f
DV
1383 for (var i = 0; i < originalData.length; i++) {
1384 var data = originalData[i][1];
1385 var y = data[1];
1386 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
f6885d6a 1387
8b91c51f 1388 if (y != null && !isNaN(y)) {
49a7d0d5
DV
1389 low += data[0];
1390 mid += y;
1391 high += data[2];
1392 count += 1;
1393 }
f6885d6a
DV
1394 if (i - rollPeriod >= 0) {
1395 var prev = originalData[i - rollPeriod];
8b91c51f 1396 if (prev[1][1] != null && !isNaN(prev[1][1])) {
49a7d0d5
DV
1397 low -= prev[1][0];
1398 mid -= prev[1][1];
1399 high -= prev[1][2];
1400 count -= 1;
1401 }
f6885d6a
DV
1402 }
1403 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
1404 1.0 * (mid - low) / count,
1405 1.0 * (high - mid) / count ]];
2769de62 1406 }
6a1aa64f
DV
1407 } else {
1408 // Calculate the rolling average for the first rollPeriod - 1 points where
1409 // there is not enough data to roll over the full number of days
1410 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
285a6bda 1411 if (!this.attr_("errorBars")){
5011e7a1
DV
1412 if (rollPeriod == 1) {
1413 return originalData;
1414 }
1415
2847c1cf 1416 for (var i = 0; i < originalData.length; i++) {
6a1aa64f 1417 var sum = 0;
5011e7a1 1418 var num_ok = 0;
2847c1cf
DV
1419 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
1420 var y = originalData[j][1];
8b91c51f 1421 if (y == null || isNaN(y)) continue;
5011e7a1 1422 num_ok++;
2847c1cf 1423 sum += originalData[j][1];
6a1aa64f 1424 }
5011e7a1 1425 if (num_ok) {
2847c1cf 1426 rollingData[i] = [originalData[i][0], sum / num_ok];
5011e7a1 1427 } else {
2847c1cf 1428 rollingData[i] = [originalData[i][0], null];
5011e7a1 1429 }
6a1aa64f 1430 }
2847c1cf
DV
1431
1432 } else {
1433 for (var i = 0; i < originalData.length; i++) {
6a1aa64f
DV
1434 var sum = 0;
1435 var variance = 0;
5011e7a1 1436 var num_ok = 0;
2847c1cf 1437 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
5011e7a1 1438 var y = originalData[j][1][0];
8b91c51f 1439 if (y == null || isNaN(y)) continue;
5011e7a1 1440 num_ok++;
6a1aa64f
DV
1441 sum += originalData[j][1][0];
1442 variance += Math.pow(originalData[j][1][1], 2);
1443 }
5011e7a1
DV
1444 if (num_ok) {
1445 var stddev = Math.sqrt(variance) / num_ok;
1446 rollingData[i] = [originalData[i][0],
1447 [sum / num_ok, sigma * stddev, sigma * stddev]];
1448 } else {
1449 rollingData[i] = [originalData[i][0], [null, null, null]];
1450 }
6a1aa64f
DV
1451 }
1452 }
1453 }
1454
1455 return rollingData;
1456};
1457
1458/**
1459 * Parses a date, returning the number of milliseconds since epoch. This can be
285a6bda
DV
1460 * passed in as an xValueParser in the Dygraph constructor.
1461 * TODO(danvk): enumerate formats that this understands.
6a1aa64f
DV
1462 * @param {String} A date in YYYYMMDD format.
1463 * @return {Number} Milliseconds since epoch.
1464 * @public
1465 */
285a6bda 1466Dygraph.dateParser = function(dateStr, self) {
6a1aa64f 1467 var dateStrSlashed;
285a6bda 1468 var d;
2769de62 1469 if (dateStr.length == 10 && dateStr.search("-") != -1) { // e.g. '2009-07-12'
6a1aa64f 1470 dateStrSlashed = dateStr.replace("-", "/", "g");
353a0294
DV
1471 while (dateStrSlashed.search("-") != -1) {
1472 dateStrSlashed = dateStrSlashed.replace("-", "/");
1473 }
285a6bda 1474 d = Date.parse(dateStrSlashed);
2769de62 1475 } else if (dateStr.length == 8) { // e.g. '20090712'
285a6bda 1476 // TODO(danvk): remove support for this format. It's confusing.
6a1aa64f
DV
1477 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
1478 + "/" + dateStr.substr(6,2);
285a6bda 1479 d = Date.parse(dateStrSlashed);
2769de62
DV
1480 } else {
1481 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1482 // "2009/07/12 12:34:56"
285a6bda
DV
1483 d = Date.parse(dateStr);
1484 }
1485
1486 if (!d || isNaN(d)) {
1487 self.error("Couldn't parse " + dateStr + " as a date");
1488 }
1489 return d;
1490};
1491
1492/**
1493 * Detects the type of the str (date or numeric) and sets the various
1494 * formatting attributes in this.attrs_ based on this type.
1495 * @param {String} str An x value.
1496 * @private
1497 */
1498Dygraph.prototype.detectTypeFromString_ = function(str) {
1499 var isDate = false;
1500 if (str.indexOf('-') >= 0 ||
1501 str.indexOf('/') >= 0 ||
1502 isNaN(parseFloat(str))) {
1503 isDate = true;
1504 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
1505 // TODO(danvk): remove support for this format.
1506 isDate = true;
1507 }
1508
1509 if (isDate) {
1510 this.attrs_.xValueFormatter = Dygraph.dateString_;
1511 this.attrs_.xValueParser = Dygraph.dateParser;
1512 this.attrs_.xTicker = Dygraph.dateTicker;
1513 } else {
1514 this.attrs_.xValueFormatter = function(x) { return x; };
1515 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
1516 this.attrs_.xTicker = Dygraph.numericTicks;
6a1aa64f 1517 }
6a1aa64f
DV
1518};
1519
1520/**
1521 * Parses a string in a special csv format. We expect a csv file where each
1522 * line is a date point, and the first field in each line is the date string.
1523 * We also expect that all remaining fields represent series.
285a6bda 1524 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f
DV
1525 * date, series1, stddev1, series2, stddev2, ...
1526 * @param {Array.<Object>} data See above.
1527 * @private
285a6bda
DV
1528 *
1529 * @return Array.<Object> An array with one entry for each row. These entries
1530 * are an array of cells in that row. The first entry is the parsed x-value for
1531 * the row. The second, third, etc. are the y-values. These can take on one of
1532 * three forms, depending on the CSV and constructor parameters:
1533 * 1. numeric value
1534 * 2. [ value, stddev ]
1535 * 3. [ low value, center value, high value ]
6a1aa64f 1536 */
285a6bda 1537Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f
DV
1538 var ret = [];
1539 var lines = data.split("\n");
3d67f03b
DV
1540
1541 // Use the default delimiter or fall back to a tab if that makes sense.
1542 var delim = this.attr_('delimiter');
1543 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
1544 delim = '\t';
1545 }
1546
285a6bda 1547 var start = 0;
6a1aa64f 1548 if (this.labelsFromCSV_) {
285a6bda 1549 start = 1;
3d67f03b 1550 this.attrs_.labels = lines[0].split(delim);
6a1aa64f
DV
1551 }
1552
285a6bda
DV
1553 var xParser;
1554 var defaultParserSet = false; // attempt to auto-detect x value type
1555 var expectedCols = this.attr_("labels").length;
987840a2 1556 var outOfOrder = false;
6a1aa64f
DV
1557 for (var i = start; i < lines.length; i++) {
1558 var line = lines[i];
1559 if (line.length == 0) continue; // skip blank lines
3d67f03b
DV
1560 if (line[0] == '#') continue; // skip comment lines
1561 var inFields = line.split(delim);
285a6bda 1562 if (inFields.length < 2) continue;
6a1aa64f
DV
1563
1564 var fields = [];
285a6bda
DV
1565 if (!defaultParserSet) {
1566 this.detectTypeFromString_(inFields[0]);
1567 xParser = this.attr_("xValueParser");
1568 defaultParserSet = true;
1569 }
1570 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
1571
1572 // If fractions are expected, parse the numbers as "A/B"
1573 if (this.fractions_) {
1574 for (var j = 1; j < inFields.length; j++) {
1575 // TODO(danvk): figure out an appropriate way to flag parse errors.
1576 var vals = inFields[j].split("/");
1577 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1578 }
285a6bda 1579 } else if (this.attr_("errorBars")) {
6a1aa64f
DV
1580 // If there are error bars, values are (value, stddev) pairs
1581 for (var j = 1; j < inFields.length; j += 2)
1582 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1583 parseFloat(inFields[j + 1])];
9922b78b 1584 } else if (this.attr_("customBars")) {
6a1aa64f
DV
1585 // Bars are a low;center;high tuple
1586 for (var j = 1; j < inFields.length; j++) {
1587 var vals = inFields[j].split(";");
1588 fields[j] = [ parseFloat(vals[0]),
1589 parseFloat(vals[1]),
1590 parseFloat(vals[2]) ];
1591 }
1592 } else {
1593 // Values are just numbers
285a6bda 1594 for (var j = 1; j < inFields.length; j++) {
6a1aa64f 1595 fields[j] = parseFloat(inFields[j]);
285a6bda 1596 }
6a1aa64f 1597 }
987840a2
DV
1598 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1599 outOfOrder = true;
1600 }
6a1aa64f 1601 ret.push(fields);
285a6bda
DV
1602
1603 if (fields.length != expectedCols) {
1604 this.error("Number of columns in line " + i + " (" + fields.length +
1605 ") does not agree with number of labels (" + expectedCols +
1606 ") " + line);
1607 }
6a1aa64f 1608 }
987840a2
DV
1609
1610 if (outOfOrder) {
1611 this.warn("CSV is out of order; order it correctly to speed loading.");
1612 ret.sort(function(a,b) { return a[0] - b[0] });
1613 }
1614
6a1aa64f
DV
1615 return ret;
1616};
1617
1618/**
285a6bda
DV
1619 * The user has provided their data as a pre-packaged JS array. If the x values
1620 * are numeric, this is the same as dygraphs' internal format. If the x values
1621 * are dates, we need to convert them from Date objects to ms since epoch.
1622 * @param {Array.<Object>} data
1623 * @return {Array.<Object>} data with numeric x values.
1624 */
1625Dygraph.prototype.parseArray_ = function(data) {
1626 // Peek at the first x value to see if it's numeric.
1627 if (data.length == 0) {
1628 this.error("Can't plot empty data set");
1629 return null;
1630 }
1631 if (data[0].length == 0) {
1632 this.error("Data set cannot contain an empty row");
1633 return null;
1634 }
1635
1636 if (this.attr_("labels") == null) {
1637 this.warn("Using default labels. Set labels explicitly via 'labels' " +
1638 "in the options parameter");
1639 this.attrs_.labels = [ "X" ];
1640 for (var i = 1; i < data[0].length; i++) {
1641 this.attrs_.labels.push("Y" + i);
1642 }
1643 }
1644
2dda3850 1645 if (Dygraph.isDateLike(data[0][0])) {
285a6bda
DV
1646 // Some intelligent defaults for a date x-axis.
1647 this.attrs_.xValueFormatter = Dygraph.dateString_;
1648 this.attrs_.xTicker = Dygraph.dateTicker;
1649
1650 // Assume they're all dates.
e3ab7b40 1651 var parsedData = Dygraph.clone(data);
285a6bda
DV
1652 for (var i = 0; i < data.length; i++) {
1653 if (parsedData[i].length == 0) {
1654 this.error("Row " << (1 + i) << " of data is empty");
1655 return null;
1656 }
1657 if (parsedData[i][0] == null
1658 || typeof(parsedData[i][0].getTime) != 'function') {
1659 this.error("x value in row " << (1 + i) << " is not a Date");
1660 return null;
1661 }
1662 parsedData[i][0] = parsedData[i][0].getTime();
1663 }
1664 return parsedData;
1665 } else {
1666 // Some intelligent defaults for a numeric x-axis.
1667 this.attrs_.xValueFormatter = function(x) { return x; };
1668 this.attrs_.xTicker = Dygraph.numericTicks;
1669 return data;
1670 }
1671};
1672
1673/**
79420a1e
DV
1674 * Parses a DataTable object from gviz.
1675 * The data is expected to have a first column that is either a date or a
1676 * number. All subsequent columns must be numbers. If there is a clear mismatch
1677 * between this.xValueParser_ and the type of the first column, it will be
1678 * fixed. Returned value is in the same format as return value of parseCSV_.
1679 * @param {Array.<Object>} data See above.
1680 * @private
1681 */
285a6bda 1682Dygraph.prototype.parseDataTable_ = function(data) {
79420a1e
DV
1683 var cols = data.getNumberOfColumns();
1684 var rows = data.getNumberOfRows();
1685
1686 // Read column labels
1687 var labels = [];
1688 for (var i = 0; i < cols; i++) {
1689 labels.push(data.getColumnLabel(i));
3e3f84e4 1690 if (i != 0 && this.attr_("errorBars")) i += 1;
79420a1e 1691 }
285a6bda 1692 this.attrs_.labels = labels;
3e3f84e4 1693 cols = labels.length;
79420a1e 1694
d955e223 1695 var indepType = data.getColumnType(0);
4440f6c8 1696 if (indepType == 'date' || indepType == 'datetime') {
285a6bda
DV
1697 this.attrs_.xValueFormatter = Dygraph.dateString_;
1698 this.attrs_.xValueParser = Dygraph.dateParser;
1699 this.attrs_.xTicker = Dygraph.dateTicker;
33127159 1700 } else if (indepType == 'number') {
285a6bda
DV
1701 this.attrs_.xValueFormatter = function(x) { return x; };
1702 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
1703 this.attrs_.xTicker = Dygraph.numericTicks;
1704 } else {
987840a2
DV
1705 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1706 "column 1 of DataTable input (Got '" + indepType + "')");
79420a1e
DV
1707 return null;
1708 }
1709
1710 var ret = [];
987840a2 1711 var outOfOrder = false;
79420a1e
DV
1712 for (var i = 0; i < rows; i++) {
1713 var row = [];
debe4434
DV
1714 if (typeof(data.getValue(i, 0)) === 'undefined' ||
1715 data.getValue(i, 0) === null) {
1716 this.warning("Ignoring row " + i +
1717 " of DataTable because of undefined or null first column.");
1718 continue;
1719 }
1720
c21d2c2d 1721 if (indepType == 'date' || indepType == 'datetime') {
d955e223
DV
1722 row.push(data.getValue(i, 0).getTime());
1723 } else {
1724 row.push(data.getValue(i, 0));
1725 }
3e3f84e4
DV
1726 if (!this.attr_("errorBars")) {
1727 for (var j = 1; j < cols; j++) {
1728 row.push(data.getValue(i, j));
1729 }
1730 } else {
1731 for (var j = 0; j < cols - 1; j++) {
1732 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
1733 }
79420a1e 1734 }
987840a2
DV
1735 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
1736 outOfOrder = true;
1737 }
243d96e8 1738 ret.push(row);
79420a1e 1739 }
987840a2
DV
1740
1741 if (outOfOrder) {
1742 this.warn("DataTable is out of order; order it correctly to speed loading.");
1743 ret.sort(function(a,b) { return a[0] - b[0] });
1744 }
79420a1e
DV
1745 return ret;
1746}
1747
24e5350c 1748// These functions are all based on MochiKit.
fc80a396
DV
1749Dygraph.update = function (self, o) {
1750 if (typeof(o) != 'undefined' && o !== null) {
1751 for (var k in o) {
85b99f0b
DV
1752 if (o.hasOwnProperty(k)) {
1753 self[k] = o[k];
1754 }
fc80a396
DV
1755 }
1756 }
1757 return self;
1758};
1759
2dda3850
DV
1760Dygraph.isArrayLike = function (o) {
1761 var typ = typeof(o);
1762 if (
c21d2c2d 1763 (typ != 'object' && !(typ == 'function' &&
2dda3850
DV
1764 typeof(o.item) == 'function')) ||
1765 o === null ||
1766 typeof(o.length) != 'number' ||
1767 o.nodeType === 3
1768 ) {
1769 return false;
1770 }
1771 return true;
1772};
1773
1774Dygraph.isDateLike = function (o) {
1775 if (typeof(o) != "object" || o === null ||
1776 typeof(o.getTime) != 'function') {
1777 return false;
1778 }
1779 return true;
1780};
1781
e3ab7b40
DV
1782Dygraph.clone = function(o) {
1783 // TODO(danvk): figure out how MochiKit's version works
1784 var r = [];
1785 for (var i = 0; i < o.length; i++) {
1786 if (Dygraph.isArrayLike(o[i])) {
1787 r.push(Dygraph.clone(o[i]));
1788 } else {
1789 r.push(o[i]);
1790 }
1791 }
1792 return r;
24e5350c
DV
1793};
1794
2dda3850 1795
79420a1e 1796/**
6a1aa64f
DV
1797 * Get the CSV data. If it's in a function, call that function. If it's in a
1798 * file, do an XMLHttpRequest to get it.
1799 * @private
1800 */
285a6bda 1801Dygraph.prototype.start_ = function() {
6a1aa64f 1802 if (typeof this.file_ == 'function') {
285a6bda 1803 // CSV string. Pretend we got it via XHR.
6a1aa64f 1804 this.loadedEvent_(this.file_());
2dda3850 1805 } else if (Dygraph.isArrayLike(this.file_)) {
285a6bda
DV
1806 this.rawData_ = this.parseArray_(this.file_);
1807 this.drawGraph_(this.rawData_);
79420a1e
DV
1808 } else if (typeof this.file_ == 'object' &&
1809 typeof this.file_.getColumnRange == 'function') {
1810 // must be a DataTable from gviz.
1811 this.rawData_ = this.parseDataTable_(this.file_);
1812 this.drawGraph_(this.rawData_);
285a6bda
DV
1813 } else if (typeof this.file_ == 'string') {
1814 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1815 if (this.file_.indexOf('\n') >= 0) {
1816 this.loadedEvent_(this.file_);
1817 } else {
1818 var req = new XMLHttpRequest();
1819 var caller = this;
1820 req.onreadystatechange = function () {
1821 if (req.readyState == 4) {
1822 if (req.status == 200) {
1823 caller.loadedEvent_(req.responseText);
1824 }
6a1aa64f 1825 }
285a6bda 1826 };
6a1aa64f 1827
285a6bda
DV
1828 req.open("GET", this.file_, true);
1829 req.send(null);
1830 }
1831 } else {
1832 this.error("Unknown data format: " + (typeof this.file_));
6a1aa64f
DV
1833 }
1834};
1835
1836/**
1837 * Changes various properties of the graph. These can include:
1838 * <ul>
1839 * <li>file: changes the source data for the graph</li>
1840 * <li>errorBars: changes whether the data contains stddev</li>
1841 * </ul>
1842 * @param {Object} attrs The new properties and values
1843 */
285a6bda
DV
1844Dygraph.prototype.updateOptions = function(attrs) {
1845 // TODO(danvk): this is a mess. Rethink this function.
6a1aa64f
DV
1846 if (attrs.rollPeriod) {
1847 this.rollPeriod_ = attrs.rollPeriod;
1848 }
1849 if (attrs.dateWindow) {
1850 this.dateWindow_ = attrs.dateWindow;
1851 }
1852 if (attrs.valueRange) {
1853 this.valueRange_ = attrs.valueRange;
1854 }
fc80a396 1855 Dygraph.update(this.user_attrs_, attrs);
285a6bda
DV
1856
1857 this.labelsFromCSV_ = (this.attr_("labels") == null);
1858
1859 // TODO(danvk): this doesn't match the constructor logic
1860 this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
6a1aa64f
DV
1861 if (attrs['file'] && attrs['file'] != this.file_) {
1862 this.file_ = attrs['file'];
1863 this.start_();
1864 } else {
1865 this.drawGraph_(this.rawData_);
1866 }
1867};
1868
1869/**
697e70b2
DV
1870 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1871 * containing div (which has presumably changed size since the dygraph was
1872 * instantiated. If the width/height are specified, the div will be resized.
964f30c6
DV
1873 *
1874 * This is far more efficient than destroying and re-instantiating a
1875 * Dygraph, since it doesn't have to reparse the underlying data.
1876 *
697e70b2
DV
1877 * @param {Number} width Width (in pixels)
1878 * @param {Number} height Height (in pixels)
1879 */
1880Dygraph.prototype.resize = function(width, height) {
1881 if ((width === null) != (height === null)) {
1882 this.warn("Dygraph.resize() should be called with zero parameters or " +
1883 "two non-NULL parameters. Pretending it was zero.");
1884 width = height = null;
1885 }
1886
b16e6369 1887 // TODO(danvk): there should be a clear() method.
697e70b2 1888 this.maindiv_.innerHTML = "";
b16e6369
DV
1889 this.attrs_.labelsDiv = null;
1890
697e70b2
DV
1891 if (width) {
1892 this.maindiv_.style.width = width + "px";
1893 this.maindiv_.style.height = height + "px";
1894 this.width_ = width;
1895 this.height_ = height;
1896 } else {
1897 this.width_ = this.maindiv_.offsetWidth;
1898 this.height_ = this.maindiv_.offsetHeight;
1899 }
1900
1901 this.createInterface_();
964f30c6 1902 this.drawGraph_(this.rawData_);
697e70b2
DV
1903};
1904
1905/**
6a1aa64f
DV
1906 * Adjusts the number of days in the rolling average. Updates the graph to
1907 * reflect the new averaging period.
1908 * @param {Number} length Number of days over which to average the data.
1909 */
285a6bda 1910Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f
DV
1911 this.rollPeriod_ = length;
1912 this.drawGraph_(this.rawData_);
1913};
540d00f1 1914
f8cfec73 1915/**
1cf11047
DV
1916 * Returns a boolean array of visibility statuses.
1917 */
1918Dygraph.prototype.visibility = function() {
1919 // Do lazy-initialization, so that this happens after we know the number of
1920 // data series.
1921 if (!this.attr_("visibility")) {
f38dec01 1922 this.attrs_["visibility"] = [];
1cf11047
DV
1923 }
1924 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
f38dec01 1925 this.attr_("visibility").push(true);
1cf11047
DV
1926 }
1927 return this.attr_("visibility");
1928};
1929
1930/**
1931 * Changes the visiblity of a series.
1932 */
1933Dygraph.prototype.setVisibility = function(num, value) {
1934 var x = this.visibility();
1935 if (num < 0 && num >= x.length) {
1936 this.warn("invalid series number in setVisibility: " + num);
1937 } else {
1938 x[num] = value;
1939 this.drawGraph_(this.rawData_);
1940 }
1941};
1942
1943/**
f8cfec73
DV
1944 * Create a new canvas element. This is more complex than a simple
1945 * document.createElement("canvas") because of IE and excanvas.
1946 */
1947Dygraph.createCanvas = function() {
1948 var canvas = document.createElement("canvas");
1949
1950 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
1951 if (isIE) {
1952 canvas = G_vmlCanvasManager.initElement(canvas);
1953 }
1954
1955 return canvas;
1956};
1957
540d00f1
DV
1958
1959/**
285a6bda 1960 * A wrapper around Dygraph that implements the gviz API.
540d00f1
DV
1961 * @param {Object} container The DOM object the visualization should live in.
1962 */
285a6bda 1963Dygraph.GVizChart = function(container) {
540d00f1
DV
1964 this.container = container;
1965}
1966
285a6bda 1967Dygraph.GVizChart.prototype.draw = function(data, options) {
540d00f1 1968 this.container.innerHTML = '';
285a6bda 1969 this.date_graph = new Dygraph(this.container, data, options);
540d00f1 1970}
285a6bda
DV
1971
1972// Older pages may still use this name.
1973DateGraph = Dygraph;