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