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