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