Merge branch 'master' of https://github.com/flooey/dygraphs
[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
285a6bda 27 Date,SeriesA,SeriesB,...
6a1aa64f
DV
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
30
31 If the 'fractions' option is set, the input should be of the form:
32
285a6bda 33 Date,SeriesA,SeriesB,...
6a1aa64f
DV
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
36
37 And error bars will be calculated automatically using a binomial distribution.
38
ee672584 39 For further documentation and examples, see http://dygraphs.com/
6a1aa64f
DV
40
41 */
42
43/**
44 * An interactive, zoomable graph
45 * @param {String | Function} file A file containing CSV data or a function that
46 * returns this data. The expected format for each line is
47 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
48 * YYYYMMDD,val1,stddev1,val2,stddev2,...
6a1aa64f
DV
49 * @param {Object} attrs Various other attributes, e.g. errorBars determines
50 * whether the input data contains error ranges.
51 */
285a6bda
DV
52Dygraph = function(div, data, opts) {
53 if (arguments.length > 0) {
54 if (arguments.length == 4) {
55 // Old versions of dygraphs took in the series labels as a constructor
56 // parameter. This doesn't make sense anymore, but it's easy to continue
57 // to support this usage.
58 this.warn("Using deprecated four-argument dygraph constructor");
59 this.__old_init__(div, data, arguments[2], arguments[3]);
60 } else {
61 this.__init__(div, data, opts);
62 }
63 }
6a1aa64f
DV
64};
65
285a6bda
DV
66Dygraph.NAME = "Dygraph";
67Dygraph.VERSION = "1.2";
68Dygraph.__repr__ = function() {
6a1aa64f
DV
69 return "[" + this.NAME + " " + this.VERSION + "]";
70};
285a6bda 71Dygraph.toString = function() {
6a1aa64f
DV
72 return this.__repr__();
73};
74
75// Various default values
285a6bda
DV
76Dygraph.DEFAULT_ROLL_PERIOD = 1;
77Dygraph.DEFAULT_WIDTH = 480;
78Dygraph.DEFAULT_HEIGHT = 320;
79Dygraph.AXIS_LINE_WIDTH = 0.3;
6a1aa64f 80
d59b6f34 81Dygraph.LOG_SCALE = 10;
0037b2a4 82Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
d59b6f34 83Dygraph.log10 = function(x) {
0037b2a4 84 return Math.log(x) / Dygraph.LN_TEN;
d59b6f34 85}
885c13e4 86
8e4a6af3 87// Default attribute values.
285a6bda 88Dygraph.DEFAULT_ATTRS = {
a9fc39ab 89 highlightCircleSize: 3,
8e4a6af3 90 pixelsPerXLabel: 60,
c6336f04 91 pixelsPerYLabel: 30,
285a6bda 92
8e4a6af3
DV
93 labelsDivWidth: 250,
94 labelsDivStyles: {
95 // TODO(danvk): move defaults from createStatusMessage_ here.
285a6bda
DV
96 },
97 labelsSeparateLines: false,
bcd3ebf0 98 labelsShowZeroValues: true,
285a6bda 99 labelsKMB: false,
afefbcdb 100 labelsKMG2: false,
d160cc3b 101 showLabelsOnHighlight: true,
12e4c741 102
029da4b6 103 yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
285a6bda
DV
104
105 strokeWidth: 1.0,
8e4a6af3 106
8846615a
DV
107 axisTickSize: 3,
108 axisLabelFontSize: 14,
109 xAxisLabelWidth: 50,
110 yAxisLabelWidth: 50,
bf640e56 111 xAxisLabelFormatter: Dygraph.dateAxisFormatter,
8846615a 112 rightGap: 5,
285a6bda
DV
113
114 showRoller: false,
115 xValueFormatter: Dygraph.dateString_,
116 xValueParser: Dygraph.dateParser,
117 xTicker: Dygraph.dateTicker,
118
3d67f03b
DV
119 delimiter: ',',
120
285a6bda
DV
121 sigma: 2.0,
122 errorBars: false,
123 fractions: false,
124 wilsonInterval: true, // only relevant if fractions is true
5954ef32 125 customBars: false,
43af96e7
NK
126 fillGraph: false,
127 fillAlpha: 0.15,
f032c51d 128 connectSeparatedPoints: false,
43af96e7
NK
129
130 stackedGraph: false,
afdc483f
NN
131 hideOverlayOnMouseOut: true,
132
00c281d4 133 stepPlot: false,
ee672584 134 avoidMinZero: false,
4f0c5aa0
DV
135
136 interactionModel: null // will be set to Dygraph.defaultInteractionModel.
285a6bda
DV
137};
138
139// Various logging levels.
140Dygraph.DEBUG = 1;
141Dygraph.INFO = 2;
142Dygraph.WARNING = 3;
143Dygraph.ERROR = 3;
144
39b0e098
RK
145// Directions for panning and zooming. Use bit operations when combined
146// values are possible.
147Dygraph.HORIZONTAL = 1;
148Dygraph.VERTICAL = 2;
149
5c528fa2
DV
150// Used for initializing annotation CSS rules only once.
151Dygraph.addedAnnotationCSS = false;
152
285a6bda
DV
153Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
154 // Labels is no longer a constructor parameter, since it's typically set
155 // directly from the data source. It also conains a name for the x-axis,
156 // which the previous constructor form did not.
157 if (labels != null) {
158 var new_labels = ["Date"];
159 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
fc80a396 160 Dygraph.update(attrs, { 'labels': new_labels });
285a6bda
DV
161 }
162 this.__init__(div, file, attrs);
8e4a6af3
DV
163};
164
6a1aa64f 165/**
285a6bda 166 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
885c13e4 167 * and context &lt;canvas&gt; inside of it. See the constructor for details.
6a1aa64f 168 * on the parameters.
12e4c741 169 * @param {Element} div the Element to render the graph into.
6a1aa64f 170 * @param {String | Function} file Source data
6a1aa64f
DV
171 * @param {Object} attrs Miscellaneous other options
172 * @private
173 */
285a6bda 174Dygraph.prototype.__init__ = function(div, file, attrs) {
a2c8fff4
DV
175 // Hack for IE: if we're using excanvas and the document hasn't finished
176 // loading yet (and hence may not have initialized whatever it needs to
177 // initialize), then keep calling this routine periodically until it has.
178 if (/MSIE/.test(navigator.userAgent) && !window.opera &&
179 typeof(G_vmlCanvasManager) != 'undefined' &&
180 document.readyState != 'complete') {
181 var self = this;
182 setTimeout(function() { self.__init__(div, file, attrs) }, 100);
183 }
184
285a6bda
DV
185 // Support two-argument constructor
186 if (attrs == null) { attrs = {}; }
187
6a1aa64f 188 // Copy the important bits into the object
32988383 189 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
6a1aa64f 190 this.maindiv_ = div;
6a1aa64f 191 this.file_ = file;
285a6bda 192 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
6a1aa64f 193 this.previousVerticalX_ = -1;
6a1aa64f 194 this.fractions_ = attrs.fractions || false;
6a1aa64f 195 this.dateWindow_ = attrs.dateWindow || null;
8b83c6cc 196
6a1aa64f 197 this.wilsonInterval_ = attrs.wilsonInterval || true;
fe0b7c03 198 this.is_initial_draw_ = true;
5c528fa2 199 this.annotations_ = [];
8e4a6af3 200
f7d6278e
DV
201 // Clear the div. This ensure that, if multiple dygraphs are passed the same
202 // div, then only one will be drawn.
203 div.innerHTML = "";
204
c21d2c2d 205 // If the div isn't already sized then inherit from our attrs or
206 // give it a default size.
285a6bda 207 if (div.style.width == '') {
ddd1b11f 208 div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px";
285a6bda
DV
209 }
210 if (div.style.height == '') {
ddd1b11f 211 div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px";
32988383 212 }
285a6bda
DV
213 this.width_ = parseInt(div.style.width, 10);
214 this.height_ = parseInt(div.style.height, 10);
c21d2c2d 215 // The div might have been specified as percent of the current window size,
216 // convert that to an appropriate number of pixels.
217 if (div.style.width.indexOf("%") == div.style.width.length - 1) {
c6f45033 218 this.width_ = div.offsetWidth;
c21d2c2d 219 }
220 if (div.style.height.indexOf("%") == div.style.height.length - 1) {
c6f45033 221 this.height_ = div.offsetHeight;
c21d2c2d 222 }
32988383 223
10a6456d
DV
224 if (this.width_ == 0) {
225 this.error("dygraph has zero width. Please specify a width in pixels.");
226 }
227 if (this.height_ == 0) {
228 this.error("dygraph has zero height. Please specify a height in pixels.");
229 }
230
344ba8c0 231 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
43af96e7
NK
232 if (attrs['stackedGraph']) {
233 attrs['fillGraph'] = true;
234 // TODO(nikhilk): Add any other stackedGraph checks here.
235 }
236
285a6bda
DV
237 // Dygraphs has many options, some of which interact with one another.
238 // To keep track of everything, we maintain two sets of options:
239 //
c21d2c2d 240 // this.user_attrs_ only options explicitly set by the user.
285a6bda
DV
241 // this.attrs_ defaults, options derived from user_attrs_, data.
242 //
243 // Options are then accessed this.attr_('attr'), which first looks at
244 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
245 // defaults without overriding behavior that the user specifically asks for.
246 this.user_attrs_ = {};
fc80a396 247 Dygraph.update(this.user_attrs_, attrs);
6a1aa64f 248
285a6bda 249 this.attrs_ = {};
fc80a396 250 Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
6a1aa64f 251
16269f6e 252 this.boundaryIds_ = [];
6a1aa64f 253
285a6bda
DV
254 // Make a note of whether labels will be pulled from the CSV file.
255 this.labelsFromCSV_ = (this.attr_("labels") == null);
6a1aa64f
DV
256
257 // Create the containing DIV and other interactive elements
258 this.createInterface_();
259
738fc797 260 this.start_();
6a1aa64f
DV
261};
262
227b93cc
DV
263Dygraph.prototype.attr_ = function(name, seriesName) {
264 if (seriesName &&
265 typeof(this.user_attrs_[seriesName]) != 'undefined' &&
266 this.user_attrs_[seriesName] != null &&
267 typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
268 return this.user_attrs_[seriesName][name];
450fe64b 269 } else if (typeof(this.user_attrs_[name]) != 'undefined') {
285a6bda
DV
270 return this.user_attrs_[name];
271 } else if (typeof(this.attrs_[name]) != 'undefined') {
272 return this.attrs_[name];
273 } else {
274 return null;
275 }
276};
277
278// TODO(danvk): any way I can get the line numbers to be this.warn call?
279Dygraph.prototype.log = function(severity, message) {
280 if (typeof(console) != 'undefined') {
281 switch (severity) {
282 case Dygraph.DEBUG:
283 console.debug('dygraphs: ' + message);
284 break;
285 case Dygraph.INFO:
286 console.info('dygraphs: ' + message);
287 break;
288 case Dygraph.WARNING:
289 console.warn('dygraphs: ' + message);
290 break;
291 case Dygraph.ERROR:
292 console.error('dygraphs: ' + message);
293 break;
294 }
295 }
296}
297Dygraph.prototype.info = function(message) {
298 this.log(Dygraph.INFO, message);
299}
300Dygraph.prototype.warn = function(message) {
301 this.log(Dygraph.WARNING, message);
302}
303Dygraph.prototype.error = function(message) {
304 this.log(Dygraph.ERROR, message);
305}
306
6a1aa64f
DV
307/**
308 * Returns the current rolling period, as set by the user or an option.
309 * @return {Number} The number of days in the rolling window
310 */
285a6bda 311Dygraph.prototype.rollPeriod = function() {
6a1aa64f 312 return this.rollPeriod_;
76171648
DV
313};
314
599fb4ad
DV
315/**
316 * Returns the currently-visible x-range. This can be affected by zooming,
317 * panning or a call to updateOptions.
318 * Returns a two-element array: [left, right].
319 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
320 */
321Dygraph.prototype.xAxisRange = function() {
322 if (this.dateWindow_) return this.dateWindow_;
323
324 // The entire chart is visible.
325 var left = this.rawData_[0][0];
326 var right = this.rawData_[this.rawData_.length - 1][0];
327 return [left, right];
328};
329
3230c662 330/**
d58ae307
DV
331 * Returns the currently-visible y-range for an axis. This can be affected by
332 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
333 * called with no arguments, returns the range of the first axis.
3230c662
DV
334 * Returns a two-element array: [bottom, top].
335 */
d58ae307 336Dygraph.prototype.yAxisRange = function(idx) {
d63e6799 337 if (typeof(idx) == "undefined") idx = 0;
d58ae307
DV
338 if (idx < 0 || idx >= this.axes_.length) return null;
339 return [ this.axes_[idx].computedValueRange[0],
340 this.axes_[idx].computedValueRange[1] ];
341};
342
343/**
344 * Returns the currently-visible y-ranges for each axis. This can be affected by
345 * zooming, panning, calls to updateOptions, etc.
346 * Returns an array of [bottom, top] pairs, one for each y-axis.
347 */
348Dygraph.prototype.yAxisRanges = function() {
349 var ret = [];
350 for (var i = 0; i < this.axes_.length; i++) {
351 ret.push(this.yAxisRange(i));
352 }
353 return ret;
3230c662
DV
354};
355
d58ae307 356// TODO(danvk): use these functions throughout dygraphs.
3230c662
DV
357/**
358 * Convert from data coordinates to canvas/div X/Y coordinates.
d58ae307
DV
359 * If specified, do this conversion for the coordinate system of a particular
360 * axis. Uses the first axis by default.
3230c662 361 * Returns a two-element array: [X, Y]
ff022deb 362 *
0747928a 363 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
ff022deb 364 * instead of toDomCoords(null, y, axis).
3230c662 365 */
d58ae307 366Dygraph.prototype.toDomCoords = function(x, y, axis) {
ff022deb
RK
367 return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
368};
369
370/**
371 * Convert from data x coordinates to canvas/div X coordinate.
372 * If specified, do this conversion for the coordinate system of a particular
0037b2a4
RK
373 * axis.
374 * Returns a single value or null if x is null.
ff022deb
RK
375 */
376Dygraph.prototype.toDomXCoord = function(x) {
377 if (x == null) {
378 return null;
379 };
380
3230c662 381 var area = this.plotter_.area;
ff022deb
RK
382 var xRange = this.xAxisRange();
383 return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
384}
3230c662 385
ff022deb
RK
386/**
387 * Convert from data x coordinates to canvas/div Y coordinate and optional
388 * axis. Uses the first axis by default.
389 *
390 * returns a single value or null if y is null.
391 */
392Dygraph.prototype.toDomYCoord = function(y, axis) {
0747928a 393 var pct = this.toPercentYCoord(y, axis);
3230c662 394
ff022deb
RK
395 if (pct == null) {
396 return null;
397 }
e4416fb9 398 var area = this.plotter_.area;
ff022deb
RK
399 return area.y + pct * area.h;
400}
3230c662
DV
401
402/**
403 * Convert from canvas/div coords to data coordinates.
d58ae307
DV
404 * If specified, do this conversion for the coordinate system of a particular
405 * axis. Uses the first axis by default.
ff022deb
RK
406 * Returns a two-element array: [X, Y].
407 *
0747928a 408 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
ff022deb 409 * instead of toDataCoords(null, y, axis).
3230c662 410 */
d58ae307 411Dygraph.prototype.toDataCoords = function(x, y, axis) {
ff022deb
RK
412 return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
413};
414
415/**
416 * Convert from canvas/div x coordinate to data coordinate.
417 *
418 * If x is null, this returns null.
419 */
420Dygraph.prototype.toDataXCoord = function(x) {
421 if (x == null) {
422 return null;
3230c662
DV
423 }
424
ff022deb
RK
425 var area = this.plotter_.area;
426 var xRange = this.xAxisRange();
427 return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
428};
429
430/**
431 * Convert from canvas/div y coord to value.
432 *
433 * If y is null, this returns null.
434 * if axis is null, this uses the first axis.
435 */
436Dygraph.prototype.toDataYCoord = function(y, axis) {
437 if (y == null) {
438 return null;
3230c662
DV
439 }
440
ff022deb
RK
441 var area = this.plotter_.area;
442 var yRange = this.yAxisRange(axis);
443
b70247dc
RK
444 if (typeof(axis) == "undefined") axis = 0;
445 if (!this.axes_[axis].logscale) {
ff022deb
RK
446 return yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
447 } else {
448 // Computing the inverse of toDomCoord.
449 var pct = (y - area.y) / area.h
450
451 // Computing the inverse of toPercentYCoord. The function was arrived at with
452 // the following steps:
453 //
454 // Original calcuation:
d59b6f34 455 // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
ff022deb
RK
456 //
457 // Move denominator to both sides:
d59b6f34 458 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
ff022deb
RK
459 //
460 // subtract logr1, and take the negative value.
d59b6f34 461 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
ff022deb
RK
462 //
463 // Swap both sides of the equation, and we can compute the log of the
464 // return value. Which means we just need to use that as the exponent in
465 // e^exponent.
d59b6f34 466 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
ff022deb 467
d59b6f34
RK
468 var logr1 = Dygraph.log10(yRange[1]);
469 var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
470 var value = Math.pow(Dygraph.LOG_SCALE, exponent);
ff022deb
RK
471 return value;
472 }
3230c662
DV
473};
474
e99fde05 475/**
ff022deb
RK
476 * Converts a y for an axis to a percentage from the top to the
477 * bottom of the div.
478 *
479 * If the coordinate represents a value visible on the canvas, then
480 * the value will be between 0 and 1, where 0 is the top of the canvas.
481 * However, this method will return values outside the range, as
482 * values can fall outside the canvas.
483 *
484 * If y is null, this returns null.
485 * if axis is null, this uses the first axis.
486 */
487Dygraph.prototype.toPercentYCoord = function(y, axis) {
488 if (y == null) {
489 return null;
490 }
7d0e7a0d 491 if (typeof(axis) == "undefined") axis = 0;
ff022deb
RK
492
493 var area = this.plotter_.area;
494 var yRange = this.yAxisRange(axis);
495
496 var pct;
7d0e7a0d 497 if (!this.axes_[axis].logscale) {
ff022deb
RK
498 // yrange[1] - y is unit distance from the bottom.
499 // yrange[1] - yrange[0] is the scale of the range.
500 // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
501 pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
502 } else {
d59b6f34
RK
503 var logr1 = Dygraph.log10(yRange[1]);
504 pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
ff022deb
RK
505 }
506 return pct;
507}
508
509/**
e99fde05
DV
510 * Returns the number of columns (including the independent variable).
511 */
512Dygraph.prototype.numColumns = function() {
513 return this.rawData_[0].length;
514};
515
516/**
517 * Returns the number of rows (excluding any header/label row).
518 */
519Dygraph.prototype.numRows = function() {
520 return this.rawData_.length;
521};
522
523/**
524 * Returns the value in the given row and column. If the row and column exceed
525 * the bounds on the data, returns null. Also returns null if the value is
526 * missing.
527 */
528Dygraph.prototype.getValue = function(row, col) {
529 if (row < 0 || row > this.rawData_.length) return null;
530 if (col < 0 || col > this.rawData_[row].length) return null;
531
532 return this.rawData_[row][col];
533};
534
76171648
DV
535Dygraph.addEvent = function(el, evt, fn) {
536 var normed_fn = function(e) {
537 if (!e) var e = window.event;
538 fn(e);
539 };
540 if (window.addEventListener) { // Mozilla, Netscape, Firefox
541 el.addEventListener(evt, normed_fn, false);
542 } else { // IE
543 el.attachEvent('on' + evt, normed_fn);
544 }
545};
6a1aa64f 546
ee672584 547
ee672584
RK
548// Based on the article at
549// http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
ee672584
RK
550Dygraph.cancelEvent = function(e) {
551 e = e ? e : window.event;
552 if (e.stopPropagation) {
553 e.stopPropagation();
554 }
555 if (e.preventDefault) {
556 e.preventDefault();
557 }
558 e.cancelBubble = true;
559 e.cancel = true;
560 e.returnValue = false;
561 return false;
562}
563
6a1aa64f 564/**
285a6bda 565 * Generates interface elements for the Dygraph: a containing div, a div to
6a1aa64f 566 * display the current point, and a textbox to adjust the rolling average
697e70b2 567 * period. Also creates the Renderer/Layout elements.
6a1aa64f
DV
568 * @private
569 */
285a6bda 570Dygraph.prototype.createInterface_ = function() {
6a1aa64f
DV
571 // Create the all-enclosing graph div
572 var enclosing = this.maindiv_;
573
b0c3b730
DV
574 this.graphDiv = document.createElement("div");
575 this.graphDiv.style.width = this.width_ + "px";
576 this.graphDiv.style.height = this.height_ + "px";
577 enclosing.appendChild(this.graphDiv);
578
579 // Create the canvas for interactive parts of the chart.
f8cfec73 580 this.canvas_ = Dygraph.createCanvas();
b0c3b730
DV
581 this.canvas_.style.position = "absolute";
582 this.canvas_.width = this.width_;
583 this.canvas_.height = this.height_;
f8cfec73
DV
584 this.canvas_.style.width = this.width_ + "px"; // for IE
585 this.canvas_.style.height = this.height_ + "px"; // for IE
b0c3b730
DV
586
587 // ... and for static parts of the chart.
6a1aa64f 588 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
76171648 589
eb7bf005
EC
590 // The interactive parts of the graph are drawn on top of the chart.
591 this.graphDiv.appendChild(this.hidden_);
592 this.graphDiv.appendChild(this.canvas_);
593 this.mouseEventElement_ = this.canvas_;
594
76171648 595 var dygraph = this;
eb7bf005 596 Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
76171648
DV
597 dygraph.mouseMove_(e);
598 });
eb7bf005 599 Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
76171648
DV
600 dygraph.mouseOut_(e);
601 });
697e70b2
DV
602
603 // Create the grapher
604 // TODO(danvk): why does the Layout need its own set of options?
605 this.layoutOptions_ = { 'xOriginIsZero': false };
606 Dygraph.update(this.layoutOptions_, this.attrs_);
607 Dygraph.update(this.layoutOptions_, this.user_attrs_);
608 Dygraph.update(this.layoutOptions_, {
609 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
610
611 this.layout_ = new DygraphLayout(this, this.layoutOptions_);
612
613 // TODO(danvk): why does the Renderer need its own set of options?
614 this.renderOptions_ = { colorScheme: this.colors_,
615 strokeColor: null,
616 axisLineWidth: Dygraph.AXIS_LINE_WIDTH };
617 Dygraph.update(this.renderOptions_, this.attrs_);
618 Dygraph.update(this.renderOptions_, this.user_attrs_);
697e70b2
DV
619
620 this.createStatusMessage_();
697e70b2 621 this.createDragInterface_();
4cfcc38c
DV
622};
623
624/**
625 * Detach DOM elements in the dygraph and null out all data references.
626 * Calling this when you're done with a dygraph can dramatically reduce memory
627 * usage. See, e.g., the tests/perf.html example.
628 */
629Dygraph.prototype.destroy = function() {
630 var removeRecursive = function(node) {
631 while (node.hasChildNodes()) {
632 removeRecursive(node.firstChild);
633 node.removeChild(node.firstChild);
634 }
635 };
636 removeRecursive(this.maindiv_);
637
638 var nullOut = function(obj) {
639 for (var n in obj) {
640 if (typeof(obj[n]) === 'object') {
641 obj[n] = null;
642 }
643 }
644 };
645
646 // These may not all be necessary, but it can't hurt...
647 nullOut(this.layout_);
648 nullOut(this.plotter_);
649 nullOut(this);
650};
6a1aa64f
DV
651
652/**
653 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
285a6bda 654 * this particular canvas. All Dygraph work is done on this.canvas_.
8846615a 655 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
6a1aa64f
DV
656 * @return {Object} The newly-created canvas
657 * @private
658 */
285a6bda 659Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
f8cfec73 660 var h = Dygraph.createCanvas();
6a1aa64f 661 h.style.position = "absolute";
9ac5e4ae
DV
662 // TODO(danvk): h should be offset from canvas. canvas needs to include
663 // some extra area to make it easier to zoom in on the far left and far
664 // right. h needs to be precisely the plot area, so that clipping occurs.
6a1aa64f
DV
665 h.style.top = canvas.style.top;
666 h.style.left = canvas.style.left;
667 h.width = this.width_;
668 h.height = this.height_;
f8cfec73
DV
669 h.style.width = this.width_ + "px"; // for IE
670 h.style.height = this.height_ + "px"; // for IE
6a1aa64f
DV
671 return h;
672};
673
f474c2a3
DV
674// Taken from MochiKit.Color
675Dygraph.hsvToRGB = function (hue, saturation, value) {
676 var red;
677 var green;
678 var blue;
679 if (saturation === 0) {
680 red = value;
681 green = value;
682 blue = value;
683 } else {
684 var i = Math.floor(hue * 6);
685 var f = (hue * 6) - i;
686 var p = value * (1 - saturation);
687 var q = value * (1 - (saturation * f));
688 var t = value * (1 - (saturation * (1 - f)));
689 switch (i) {
690 case 1: red = q; green = value; blue = p; break;
691 case 2: red = p; green = value; blue = t; break;
692 case 3: red = p; green = q; blue = value; break;
693 case 4: red = t; green = p; blue = value; break;
694 case 5: red = value; green = p; blue = q; break;
695 case 6: // fall through
696 case 0: red = value; green = t; blue = p; break;
697 }
698 }
699 red = Math.floor(255 * red + 0.5);
700 green = Math.floor(255 * green + 0.5);
701 blue = Math.floor(255 * blue + 0.5);
702 return 'rgb(' + red + ',' + green + ',' + blue + ')';
703};
704
705
6a1aa64f
DV
706/**
707 * Generate a set of distinct colors for the data series. This is done with a
708 * color wheel. Saturation/Value are customizable, and the hue is
709 * equally-spaced around the color wheel. If a custom set of colors is
710 * specified, that is used instead.
6a1aa64f
DV
711 * @private
712 */
285a6bda
DV
713Dygraph.prototype.setColors_ = function() {
714 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
715 // away with this.renderOptions_.
716 var num = this.attr_("labels").length - 1;
6a1aa64f 717 this.colors_ = [];
285a6bda
DV
718 var colors = this.attr_('colors');
719 if (!colors) {
720 var sat = this.attr_('colorSaturation') || 1.0;
721 var val = this.attr_('colorValue') || 0.5;
2aa21213 722 var half = Math.ceil(num / 2);
6a1aa64f 723 for (var i = 1; i <= num; i++) {
ec1959eb 724 if (!this.visibility()[i-1]) continue;
43af96e7 725 // alternate colors for high contrast.
2aa21213 726 var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
43af96e7
NK
727 var hue = (1.0 * idx/ (1 + num));
728 this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
6a1aa64f
DV
729 }
730 } else {
731 for (var i = 0; i < num; i++) {
ec1959eb 732 if (!this.visibility()[i]) continue;
285a6bda 733 var colorStr = colors[i % colors.length];
f474c2a3 734 this.colors_.push(colorStr);
6a1aa64f
DV
735 }
736 }
285a6bda 737
c21d2c2d 738 // TODO(danvk): update this w/r/t/ the new options system.
285a6bda 739 this.renderOptions_.colorScheme = this.colors_;
fc80a396
DV
740 Dygraph.update(this.plotter_.options, this.renderOptions_);
741 Dygraph.update(this.layoutOptions_, this.user_attrs_);
742 Dygraph.update(this.layoutOptions_, this.attrs_);
6a1aa64f
DV
743}
744
43af96e7
NK
745/**
746 * Return the list of colors. This is either the list of colors passed in the
747 * attributes, or the autogenerated list of rgb(r,g,b) strings.
748 * @return {Array<string>} The list of colors.
749 */
750Dygraph.prototype.getColors = function() {
751 return this.colors_;
752};
753
5e60386d
DV
754// The following functions are from quirksmode.org with a modification for Safari from
755// http://blog.firetree.net/2005/07/04/javascript-find-position/
3df0ccf0
DV
756// http://www.quirksmode.org/js/findpos.html
757Dygraph.findPosX = function(obj) {
758 var curleft = 0;
5e60386d 759 if(obj.offsetParent)
50360fd0 760 while(1)
5e60386d 761 {
3df0ccf0 762 curleft += obj.offsetLeft;
5e60386d
DV
763 if(!obj.offsetParent)
764 break;
3df0ccf0
DV
765 obj = obj.offsetParent;
766 }
5e60386d 767 else if(obj.x)
3df0ccf0
DV
768 curleft += obj.x;
769 return curleft;
770};
c21d2c2d 771
3df0ccf0
DV
772Dygraph.findPosY = function(obj) {
773 var curtop = 0;
5e60386d
DV
774 if(obj.offsetParent)
775 while(1)
776 {
3df0ccf0 777 curtop += obj.offsetTop;
5e60386d
DV
778 if(!obj.offsetParent)
779 break;
3df0ccf0
DV
780 obj = obj.offsetParent;
781 }
5e60386d 782 else if(obj.y)
3df0ccf0
DV
783 curtop += obj.y;
784 return curtop;
785};
786
5e60386d 787
71a11a8e 788
6a1aa64f
DV
789/**
790 * Create the div that contains information on the selected point(s)
791 * This goes in the top right of the canvas, unless an external div has already
792 * been specified.
793 * @private
794 */
fedbd797 795Dygraph.prototype.createStatusMessage_ = function() {
796 var userLabelsDiv = this.user_attrs_["labelsDiv"];
797 if (userLabelsDiv && null != userLabelsDiv
798 && (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
799 this.user_attrs_["labelsDiv"] = document.getElementById(userLabelsDiv);
800 }
285a6bda
DV
801 if (!this.attr_("labelsDiv")) {
802 var divWidth = this.attr_('labelsDivWidth');
b0c3b730 803 var messagestyle = {
6a1aa64f
DV
804 "position": "absolute",
805 "fontSize": "14px",
806 "zIndex": 10,
807 "width": divWidth + "px",
808 "top": "0px",
8846615a 809 "left": (this.width_ - divWidth - 2) + "px",
6a1aa64f
DV
810 "background": "white",
811 "textAlign": "left",
b0c3b730 812 "overflow": "hidden"};
fc80a396 813 Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
b0c3b730
DV
814 var div = document.createElement("div");
815 for (var name in messagestyle) {
85b99f0b
DV
816 if (messagestyle.hasOwnProperty(name)) {
817 div.style[name] = messagestyle[name];
818 }
b0c3b730
DV
819 }
820 this.graphDiv.appendChild(div);
285a6bda 821 this.attrs_.labelsDiv = div;
6a1aa64f
DV
822 }
823};
824
825/**
0abfbd7e
DV
826 * Position the labels div so that its right edge is flush with the right edge
827 * of the charting area.
828 */
829Dygraph.prototype.positionLabelsDiv_ = function() {
830 // Don't touch a user-specified labelsDiv.
831 if (this.user_attrs_.hasOwnProperty("labelsDiv")) return;
832
833 var area = this.plotter_.area;
834 var div = this.attr_("labelsDiv");
8c21adcf 835 div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
0abfbd7e
DV
836};
837
838/**
6a1aa64f 839 * Create the text box to adjust the averaging period
6a1aa64f
DV
840 * @private
841 */
285a6bda 842Dygraph.prototype.createRollInterface_ = function() {
8c69de65
DV
843 // Create a roller if one doesn't exist already.
844 if (!this.roller_) {
845 this.roller_ = document.createElement("input");
846 this.roller_.type = "text";
847 this.roller_.style.display = "none";
848 this.graphDiv.appendChild(this.roller_);
849 }
850
851 var display = this.attr_('showRoller') ? 'block' : 'none';
26ca7938 852
b0c3b730
DV
853 var textAttr = { "position": "absolute",
854 "zIndex": 10,
855 "top": (this.plotter_.area.h - 25) + "px",
856 "left": (this.plotter_.area.x + 1) + "px",
857 "display": display
6a1aa64f 858 };
8c69de65
DV
859 this.roller_.size = "2";
860 this.roller_.value = this.rollPeriod_;
b0c3b730 861 for (var name in textAttr) {
85b99f0b 862 if (textAttr.hasOwnProperty(name)) {
8c69de65 863 this.roller_.style[name] = textAttr[name];
85b99f0b 864 }
b0c3b730
DV
865 }
866
76171648 867 var dygraph = this;
8c69de65 868 this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); };
76171648
DV
869};
870
871// These functions are taken from MochiKit.Signal
872Dygraph.pageX = function(e) {
873 if (e.pageX) {
874 return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
875 } else {
876 var de = document;
877 var b = document.body;
878 return e.clientX +
879 (de.scrollLeft || b.scrollLeft) -
880 (de.clientLeft || 0);
881 }
882};
883
884Dygraph.pageY = function(e) {
885 if (e.pageY) {
886 return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
887 } else {
888 var de = document;
889 var b = document.body;
890 return e.clientY +
891 (de.scrollTop || b.scrollTop) -
892 (de.clientTop || 0);
893 }
894};
6a1aa64f 895
ee672584
RK
896Dygraph.prototype.dragGetX_ = function(e, context) {
897 return Dygraph.pageX(e) - context.px
898};
6a1aa64f 899
ee672584
RK
900Dygraph.prototype.dragGetY_ = function(e, context) {
901 return Dygraph.pageY(e) - context.py
902};
e3489f4f 903
885c13e4
RK
904// Called in response to an interaction model operation that
905// should start the default panning behavior.
906//
907// It's used in the default callback for "mousedown" operations.
908// Custom interaction model builders can use it to provide the default
909// panning behavior.
910//
ee672584 911Dygraph.startPan = function(event, g, context) {
ee672584
RK
912 context.isPanning = true;
913 var xRange = g.xAxisRange();
914 context.dateRange = xRange[1] - xRange[0];
ec291cbe
RK
915 context.initialLeftmostDate = xRange[0];
916 context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1);
ee672584
RK
917
918 // Record the range of each y-axis at the start of the drag.
919 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
920 context.is2DPan = false;
921 for (var i = 0; i < g.axes_.length; i++) {
922 var axis = g.axes_[i];
923 var yRange = g.yAxisRange(i);
ec291cbe 924 // TODO(konigsberg): These values should be in |context|.
ed898bdd
RK
925 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
926 if (axis.logscale) {
927 axis.initialTopValue = Dygraph.log10(yRange[1]);
928 axis.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]);
929 } else {
930 axis.initialTopValue = yRange[1];
931 axis.dragValueRange = yRange[1] - yRange[0];
932 }
ec291cbe 933 axis.unitsPerPixel = axis.dragValueRange / (g.plotter_.area.h - 1);
ed898bdd
RK
934
935 // While calculating axes, set 2dpan.
ee672584
RK
936 if (axis.valueWindow || axis.valueRange) context.is2DPan = true;
937 }
ee672584
RK
938};
939
885c13e4
RK
940// Called in response to an interaction model operation that
941// responds to an event that pans the view.
942//
943// It's used in the default callback for "mousemove" operations.
944// Custom interaction model builders can use it to provide the default
945// panning behavior.
946//
ee672584
RK
947Dygraph.movePan = function(event, g, context) {
948 context.dragEndX = g.dragGetX_(event, context);
949 context.dragEndY = g.dragGetY_(event, context);
e3489f4f 950
ec291cbe
RK
951 var minDate = context.initialLeftmostDate -
952 (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel;
ee672584
RK
953 var maxDate = minDate + context.dateRange;
954 g.dateWindow_ = [minDate, maxDate];
955
956 // y-axis scaling is automatic unless this is a full 2D pan.
957 if (context.is2DPan) {
958 // Adjust each axis appropriately.
ee672584
RK
959 for (var i = 0; i < g.axes_.length; i++) {
960 var axis = g.axes_[i];
ed898bdd
RK
961
962 var pixelsDragged = context.dragEndY - context.dragStartY;
963 var unitsDragged = pixelsDragged * axis.unitsPerPixel;
964
965 // In log scale, maxValue and minValue are the logs of those values.
966 var maxValue = axis.initialTopValue + unitsDragged;
ee672584 967 var minValue = maxValue - axis.dragValueRange;
ed898bdd 968 if (axis.logscale) {
5db0e241
DV
969 axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue),
970 Math.pow(Dygraph.LOG_SCALE, maxValue) ];
ed898bdd
RK
971 } else {
972 axis.valueWindow = [ minValue, maxValue ];
973 }
ee672584
RK
974 }
975 }
976
977 g.drawGraph_();
978}
979
885c13e4
RK
980// Called in response to an interaction model operation that
981// responds to an event that ends panning.
982//
983// It's used in the default callback for "mouseup" operations.
984// Custom interaction model builders can use it to provide the default
985// panning behavior.
986//
ee672584 987Dygraph.endPan = function(event, g, context) {
ec291cbe
RK
988 // TODO(konigsberg): Clear the context data from the axis.
989 // TODO(konigsberg): mouseup should just delete the
990 // context object, and mousedown should create a new one.
ee672584
RK
991 context.isPanning = false;
992 context.is2DPan = false;
ec291cbe 993 context.initialLeftmostDate = null;
ee672584
RK
994 context.dateRange = null;
995 context.valueRange = null;
996}
997
885c13e4
RK
998// Called in response to an interaction model operation that
999// responds to an event that starts zooming.
1000//
1001// It's used in the default callback for "mousedown" operations.
1002// Custom interaction model builders can use it to provide the default
1003// zooming behavior.
1004//
ee672584
RK
1005Dygraph.startZoom = function(event, g, context) {
1006 context.isZooming = true;
1007}
1008
885c13e4
RK
1009// Called in response to an interaction model operation that
1010// responds to an event that defines zoom boundaries.
1011//
1012// It's used in the default callback for "mousemove" operations.
1013// Custom interaction model builders can use it to provide the default
1014// zooming behavior.
1015//
ee672584
RK
1016Dygraph.moveZoom = function(event, g, context) {
1017 context.dragEndX = g.dragGetX_(event, context);
1018 context.dragEndY = g.dragGetY_(event, context);
1019
1020 var xDelta = Math.abs(context.dragStartX - context.dragEndX);
1021 var yDelta = Math.abs(context.dragStartY - context.dragEndY);
1022
1023 // drag direction threshold for y axis is twice as large as x axis
1024 context.dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
1025
1026 g.drawZoomRect_(
1027 context.dragDirection,
1028 context.dragStartX,
1029 context.dragEndX,
1030 context.dragStartY,
1031 context.dragEndY,
1032 context.prevDragDirection,
1033 context.prevEndX,
1034 context.prevEndY);
1035
1036 context.prevEndX = context.dragEndX;
1037 context.prevEndY = context.dragEndY;
1038 context.prevDragDirection = context.dragDirection;
1039}
1040
885c13e4
RK
1041// Called in response to an interaction model operation that
1042// responds to an event that performs a zoom based on previously defined
1043// bounds..
1044//
1045// It's used in the default callback for "mouseup" operations.
1046// Custom interaction model builders can use it to provide the default
1047// zooming behavior.
1048//
ee672584
RK
1049Dygraph.endZoom = function(event, g, context) {
1050 context.isZooming = false;
1051 context.dragEndX = g.dragGetX_(event, context);
1052 context.dragEndY = g.dragGetY_(event, context);
1053 var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
1054 var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
1055
1056 if (regionWidth < 2 && regionHeight < 2 &&
1057 g.lastx_ != undefined && g.lastx_ != -1) {
1058 // TODO(danvk): pass along more info about the points, e.g. 'x'
1059 if (g.attr_('clickCallback') != null) {
1060 g.attr_('clickCallback')(event, g.lastx_, g.selPoints_);
1061 }
1062 if (g.attr_('pointClickCallback')) {
1063 // check if the click was on a particular point.
1064 var closestIdx = -1;
1065 var closestDistance = 0;
1066 for (var i = 0; i < g.selPoints_.length; i++) {
1067 var p = g.selPoints_[i];
1068 var distance = Math.pow(p.canvasx - context.dragEndX, 2) +
1069 Math.pow(p.canvasy - context.dragEndY, 2);
1070 if (closestIdx == -1 || distance < closestDistance) {
1071 closestDistance = distance;
1072 closestIdx = i;
d58ae307 1073 }
74f09e22 1074 }
bce01b0f 1075
ee672584
RK
1076 // Allow any click within two pixels of the dot.
1077 var radius = g.attr_('highlightCircleSize') + 2;
1078 if (closestDistance <= 5 * 5) {
1079 g.attr_('pointClickCallback')(event, g.selPoints_[closestIdx]);
1080 }
6a1aa64f 1081 }
ee672584 1082 }
6a1aa64f 1083
ee672584
RK
1084 if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
1085 g.doZoomX_(Math.min(context.dragStartX, context.dragEndX),
1086 Math.max(context.dragStartX, context.dragEndX));
1087 } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
1088 g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
1089 Math.max(context.dragStartY, context.dragEndY));
1090 } else {
1091 g.canvas_.getContext("2d").clearRect(0, 0,
1092 g.canvas_.width,
1093 g.canvas_.height);
1094 }
1095 context.dragStartX = null;
1096 context.dragStartY = null;
1097}
79b3ee42 1098
0a52ab7a
RK
1099Dygraph.defaultInteractionModel = {
1100 // Track the beginning of drag events
4f0c5aa0
DV
1101 mousedown: function(event, g, context) {
1102 context.initializeMouseDown(event, g, context);
0a52ab7a 1103
4f0c5aa0
DV
1104 if (event.altKey || event.shiftKey) {
1105 Dygraph.startPan(event, g, context);
1106 } else {
1107 Dygraph.startZoom(event, g, context);
1108 }
1109 },
0a52ab7a
RK
1110
1111 // Draw zoom rectangles when the mouse is down and the user moves around
4f0c5aa0
DV
1112 mousemove: function(event, g, context) {
1113 if (context.isZooming) {
1114 Dygraph.moveZoom(event, g, context);
1115 } else if (context.isPanning) {
1116 Dygraph.movePan(event, g, context);
1117 }
1118 },
0a52ab7a 1119
4f0c5aa0
DV
1120 mouseup: function(event, g, context) {
1121 if (context.isZooming) {
1122 Dygraph.endZoom(event, g, context);
1123 } else if (context.isPanning) {
1124 Dygraph.endPan(event, g, context);
1125 }
1126 },
0a52ab7a
RK
1127
1128 // Temporarily cancel the dragging event when the mouse leaves the graph
4f0c5aa0
DV
1129 mouseout: function(event, g, context) {
1130 if (context.isZooming) {
1131 context.dragEndX = null;
1132 context.dragEndY = null;
1133 }
1134 },
0a52ab7a
RK
1135
1136 // Disable zooming out if panning.
4f0c5aa0
DV
1137 dblclick: function(event, g, context) {
1138 if (event.altKey || event.shiftKey) {
1139 return;
0a52ab7a 1140 }
4f0c5aa0
DV
1141 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1142 // friendlier to public use.
1143 g.doUnzoom_();
1144 }
0a52ab7a
RK
1145};
1146
1147Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.defaultInteractionModel;
ee672584
RK
1148
1149/**
1150 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1151 * events.
1152 * @private
1153 */
1154Dygraph.prototype.createDragInterface_ = function() {
1155 var context = {
1156 // Tracks whether the mouse is down right now
4f0c5aa0
DV
1157 isZooming: false,
1158 isPanning: false, // is this drag part of a pan?
1159 is2DPan: false, // if so, is that pan 1- or 2-dimensional?
1160 dragStartX: null,
1161 dragStartY: null,
1162 dragEndX: null,
1163 dragEndY: null,
1164 dragDirection: null,
1165 prevEndX: null,
1166 prevEndY: null,
1167 prevDragDirection: null,
ee672584 1168
ec291cbe
RK
1169 // The value on the left side of the graph when a pan operation starts.
1170 initialLeftmostDate: null,
1171
1172 // The number of units each pixel spans. (This won't be valid for log
1173 // scales)
1174 xUnitsPerPixel: null,
ee672584
RK
1175
1176 // TODO(danvk): update this comment
1177 // The range in second/value units that the viewport encompasses during a
1178 // panning operation.
4f0c5aa0 1179 dateRange: null,
ee672584
RK
1180
1181 // Utility function to convert page-wide coordinates to canvas coords
4f0c5aa0
DV
1182 px: 0,
1183 py: 0,
ee672584 1184
4f0c5aa0 1185 initializeMouseDown: function(event, g, context) {
885c13e4 1186 // prevents mouse drags from selecting page text.
ee672584
RK
1187 if (event.preventDefault) {
1188 event.preventDefault(); // Firefox, Chrome, etc.
1189 } else {
1190 event.returnValue = false; // IE
4f0c5aa0 1191 event.cancelBubble = true;
ee672584 1192 }
4f0c5aa0 1193
ee672584
RK
1194 context.px = Dygraph.findPosX(g.canvas_);
1195 context.py = Dygraph.findPosY(g.canvas_);
1196 context.dragStartX = g.dragGetX_(event, context);
1197 context.dragStartY = g.dragGetY_(event, context);
bce01b0f 1198 }
ee672584
RK
1199 };
1200
885c13e4
RK
1201 var interactionModel = this.attr_("interactionModel");
1202
2b188b3d
RK
1203 // Self is the graph.
1204 var self = this;
1205
1206 // Function that binds the graph and context to the handler.
1207 var bindHandler = function(handler) {
ee672584 1208 return function(event) {
2b188b3d 1209 handler(event, self, context);
ee672584
RK
1210 };
1211 };
1212
885c13e4
RK
1213 for (var eventName in interactionModel) {
1214 if (!interactionModel.hasOwnProperty(eventName)) continue;
ee672584 1215 Dygraph.addEvent(this.mouseEventElement_, eventName,
2b188b3d 1216 bindHandler(interactionModel[eventName]));
ee672584
RK
1217 }
1218
6a1aa64f
DV
1219 // If the user releases the mouse button during a drag, but not over the
1220 // canvas, then it doesn't count as a zooming action.
76171648 1221 Dygraph.addEvent(document, 'mouseup', function(event) {
ee672584
RK
1222 if (context.isZooming || context.isPanning) {
1223 context.isZooming = false;
1224 context.dragStartX = null;
1225 context.dragStartY = null;
6a1aa64f 1226 }
bce01b0f 1227
ee672584
RK
1228 if (context.isPanning) {
1229 context.isPanning = false;
1230 context.draggingDate = null;
1231 context.dateRange = null;
d58ae307 1232 for (var i = 0; i < self.axes_.length; i++) {
d63e6799
DV
1233 delete self.axes_[i].draggingValue;
1234 delete self.axes_[i].dragValueRange;
d58ae307 1235 }
bce01b0f 1236 }
6a1aa64f 1237 });
6a1aa64f
DV
1238};
1239
1240/**
1241 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1242 * up any previous zoom rectangles that were drawn. This could be optimized to
885c13e4 1243 * avoid extra redrawing, but it's tricky to avoid interactions with the status
6a1aa64f 1244 * dots.
8b83c6cc 1245 *
39b0e098
RK
1246 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1247 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
6a1aa64f
DV
1248 * @param {Number} startX The X position where the drag started, in canvas
1249 * coordinates.
1250 * @param {Number} endX The current X position of the drag, in canvas coords.
8b83c6cc
RK
1251 * @param {Number} startY The Y position where the drag started, in canvas
1252 * coordinates.
1253 * @param {Number} endY The current Y position of the drag, in canvas coords.
39b0e098 1254 * @param {Number} prevDirection the value of direction on the previous call to
8b83c6cc 1255 * this function. Used to avoid excess redrawing
6a1aa64f
DV
1256 * @param {Number} prevEndX The value of endX on the previous call to this
1257 * function. Used to avoid excess redrawing
8b83c6cc
RK
1258 * @param {Number} prevEndY The value of endY on the previous call to this
1259 * function. Used to avoid excess redrawing
6a1aa64f
DV
1260 * @private
1261 */
8b83c6cc
RK
1262Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, endY,
1263 prevDirection, prevEndX, prevEndY) {
6a1aa64f
DV
1264 var ctx = this.canvas_.getContext("2d");
1265
1266 // Clean up from the previous rect if necessary
39b0e098 1267 if (prevDirection == Dygraph.HORIZONTAL) {
6a1aa64f
DV
1268 ctx.clearRect(Math.min(startX, prevEndX), 0,
1269 Math.abs(startX - prevEndX), this.height_);
39b0e098 1270 } else if (prevDirection == Dygraph.VERTICAL){
8b83c6cc
RK
1271 ctx.clearRect(0, Math.min(startY, prevEndY),
1272 this.width_, Math.abs(startY - prevEndY));
6a1aa64f
DV
1273 }
1274
1275 // Draw a light-grey rectangle to show the new viewing area
39b0e098 1276 if (direction == Dygraph.HORIZONTAL) {
8b83c6cc
RK
1277 if (endX && startX) {
1278 ctx.fillStyle = "rgba(128,128,128,0.33)";
1279 ctx.fillRect(Math.min(startX, endX), 0,
1280 Math.abs(endX - startX), this.height_);
1281 }
1282 }
39b0e098 1283 if (direction == Dygraph.VERTICAL) {
8b83c6cc
RK
1284 if (endY && startY) {
1285 ctx.fillStyle = "rgba(128,128,128,0.33)";
1286 ctx.fillRect(0, Math.min(startY, endY),
1287 this.width_, Math.abs(endY - startY));
1288 }
6a1aa64f
DV
1289 }
1290};
1291
1292/**
8b83c6cc
RK
1293 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1294 * the canvas. The exact zoom window may be slightly larger if there are no data
1295 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1296 * which accepts dates that match the raw data. This function redraws the graph.
d58ae307 1297 *
6a1aa64f
DV
1298 * @param {Number} lowX The leftmost pixel value that should be visible.
1299 * @param {Number} highX The rightmost pixel value that should be visible.
1300 * @private
1301 */
8b83c6cc 1302Dygraph.prototype.doZoomX_ = function(lowX, highX) {
6a1aa64f 1303 // Find the earliest and latest dates contained in this canvasx range.
8b83c6cc 1304 // Convert the call to date ranges of the raw data.
ff022deb
RK
1305 var minDate = this.toDataXCoord(lowX);
1306 var maxDate = this.toDataXCoord(highX);
8b83c6cc
RK
1307 this.doZoomXDates_(minDate, maxDate);
1308};
6a1aa64f 1309
8b83c6cc
RK
1310/**
1311 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1312 * method with doZoomX which accepts pixel coordinates. This function redraws
1313 * the graph.
d58ae307 1314 *
8b83c6cc
RK
1315 * @param {Number} minDate The minimum date that should be visible.
1316 * @param {Number} maxDate The maximum date that should be visible.
1317 * @private
1318 */
1319Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
6a1aa64f 1320 this.dateWindow_ = [minDate, maxDate];
26ca7938 1321 this.drawGraph_();
285a6bda 1322 if (this.attr_("zoomCallback")) {
dea5c743 1323 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
8b83c6cc
RK
1324 }
1325};
1326
1327/**
1328 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
d58ae307
DV
1329 * the canvas. This function redraws the graph.
1330 *
8b83c6cc
RK
1331 * @param {Number} lowY The topmost pixel value that should be visible.
1332 * @param {Number} highY The lowest pixel value that should be visible.
1333 * @private
1334 */
1335Dygraph.prototype.doZoomY_ = function(lowY, highY) {
d58ae307
DV
1336 // Find the highest and lowest values in pixel range for each axis.
1337 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1338 // This is because pixels increase as you go down on the screen, whereas data
1339 // coordinates increase as you go up the screen.
1340 var valueRanges = [];
1341 for (var i = 0; i < this.axes_.length; i++) {
ff022deb
RK
1342 var hi = this.toDataYCoord(lowY, i);
1343 var low = this.toDataYCoord(highY, i);
1344 this.axes_[i].valueWindow = [low, hi];
1345 valueRanges.push([low, hi]);
d58ae307 1346 }
8b83c6cc 1347
66c380c4 1348 this.drawGraph_();
8b83c6cc 1349 if (this.attr_("zoomCallback")) {
d58ae307
DV
1350 var xRange = this.xAxisRange();
1351 this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges());
8b83c6cc
RK
1352 }
1353};
1354
1355/**
1356 * Reset the zoom to the original view coordinates. This is the same as
1357 * double-clicking on the graph.
d58ae307 1358 *
8b83c6cc
RK
1359 * @private
1360 */
1361Dygraph.prototype.doUnzoom_ = function() {
d58ae307 1362 var dirty = false;
8b83c6cc 1363 if (this.dateWindow_ != null) {
d58ae307 1364 dirty = true;
8b83c6cc
RK
1365 this.dateWindow_ = null;
1366 }
d58ae307
DV
1367
1368 for (var i = 0; i < this.axes_.length; i++) {
1369 if (this.axes_[i].valueWindow != null) {
1370 dirty = true;
1371 delete this.axes_[i].valueWindow;
1372 }
8b83c6cc
RK
1373 }
1374
1375 if (dirty) {
437c0979
RK
1376 // Putting the drawing operation before the callback because it resets
1377 // yAxisRange.
66c380c4 1378 this.drawGraph_();
8b83c6cc
RK
1379 if (this.attr_("zoomCallback")) {
1380 var minDate = this.rawData_[0][0];
1381 var maxDate = this.rawData_[this.rawData_.length - 1][0];
d58ae307 1382 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
8b83c6cc 1383 }
67e650dc 1384 }
6a1aa64f
DV
1385};
1386
1387/**
1388 * When the mouse moves in the canvas, display information about a nearby data
1389 * point and draw dots over those points in the data series. This function
1390 * takes care of cleanup of previously-drawn dots.
1391 * @param {Object} event The mousemove event from the browser.
1392 * @private
1393 */
285a6bda 1394Dygraph.prototype.mouseMove_ = function(event) {
eb7bf005 1395 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
6a1aa64f
DV
1396 var points = this.layout_.points;
1397
1398 var lastx = -1;
1399 var lasty = -1;
1400
1401 // Loop through all the points and find the date nearest to our current
1402 // location.
1403 var minDist = 1e+100;
1404 var idx = -1;
1405 for (var i = 0; i < points.length; i++) {
8a7cc60e
RK
1406 var point = points[i];
1407 if (point == null) continue;
ee672584 1408 var dist = Math.abs(point.canvasx - canvasx);
f032c51d 1409 if (dist > minDist) continue;
6a1aa64f
DV
1410 minDist = dist;
1411 idx = i;
1412 }
1413 if (idx >= 0) lastx = points[idx].xval;
6a1aa64f
DV
1414
1415 // Extract the points we've selected
b258a3da 1416 this.selPoints_ = [];
50360fd0 1417 var l = points.length;
416b05ad
NK
1418 if (!this.attr_("stackedGraph")) {
1419 for (var i = 0; i < l; i++) {
1420 if (points[i].xval == lastx) {
1421 this.selPoints_.push(points[i]);
1422 }
1423 }
1424 } else {
354e15ab
DE
1425 // Need to 'unstack' points starting from the bottom
1426 var cumulative_sum = 0;
416b05ad
NK
1427 for (var i = l - 1; i >= 0; i--) {
1428 if (points[i].xval == lastx) {
354e15ab 1429 var p = {}; // Clone the point since we modify it
d4139cd8
NK
1430 for (var k in points[i]) {
1431 p[k] = points[i][k];
50360fd0
NK
1432 }
1433 p.yval -= cumulative_sum;
1434 cumulative_sum += p.yval;
d4139cd8 1435 this.selPoints_.push(p);
12e4c741 1436 }
6a1aa64f 1437 }
354e15ab 1438 this.selPoints_.reverse();
6a1aa64f
DV
1439 }
1440
b258a3da 1441 if (this.attr_("highlightCallback")) {
a4c6a67c 1442 var px = this.lastx_;
dd082dda 1443 if (px !== null && lastx != px) {
344ba8c0 1444 // only fire if the selected point has changed.
2ddb1197 1445 this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx));
43af96e7 1446 }
12e4c741 1447 }
43af96e7 1448
239c712d
NAG
1449 // Save last x position for callbacks.
1450 this.lastx_ = lastx;
50360fd0 1451
239c712d
NAG
1452 this.updateSelection_();
1453};
b258a3da 1454
239c712d 1455/**
1903f1e4 1456 * Transforms layout_.points index into data row number.
2ddb1197 1457 * @param int layout_.points index
1903f1e4 1458 * @return int row number, or -1 if none could be found.
2ddb1197
SC
1459 * @private
1460 */
1461Dygraph.prototype.idxToRow_ = function(idx) {
1903f1e4 1462 if (idx < 0) return -1;
2ddb1197 1463
1903f1e4
DV
1464 for (var i in this.layout_.datasets) {
1465 if (idx < this.layout_.datasets[i].length) {
1466 return this.boundaryIds_[0][0]+idx;
1467 }
1468 idx -= this.layout_.datasets[i].length;
1469 }
1470 return -1;
1471};
2ddb1197
SC
1472
1473/**
239c712d
NAG
1474 * Draw dots over the selectied points in the data series. This function
1475 * takes care of cleanup of previously-drawn dots.
1476 * @private
1477 */
1478Dygraph.prototype.updateSelection_ = function() {
6a1aa64f 1479 // Clear the previously drawn vertical, if there is one
6a1aa64f
DV
1480 var ctx = this.canvas_.getContext("2d");
1481 if (this.previousVerticalX_ >= 0) {
46dde5f9
DV
1482 // Determine the maximum highlight circle size.
1483 var maxCircleSize = 0;
227b93cc
DV
1484 var labels = this.attr_('labels');
1485 for (var i = 1; i < labels.length; i++) {
1486 var r = this.attr_('highlightCircleSize', labels[i]);
46dde5f9
DV
1487 if (r > maxCircleSize) maxCircleSize = r;
1488 }
6a1aa64f 1489 var px = this.previousVerticalX_;
46dde5f9
DV
1490 ctx.clearRect(px - maxCircleSize - 1, 0,
1491 2 * maxCircleSize + 2, this.height_);
6a1aa64f
DV
1492 }
1493
584ceeaa
DV
1494 var isOK = function(x) { return x && !isNaN(x); };
1495
d160cc3b 1496 if (this.selPoints_.length > 0) {
b258a3da 1497 var canvasx = this.selPoints_[0].canvasx;
6a1aa64f
DV
1498
1499 // Set the status message to indicate the selected point(s)
239c712d 1500 var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
50360fd0 1501 var fmtFunc = this.attr_('yValueFormatter');
6a1aa64f 1502 var clen = this.colors_.length;
d160cc3b
NK
1503
1504 if (this.attr_('showLabelsOnHighlight')) {
1505 // Set the status message to indicate the selected point(s)
d160cc3b 1506 for (var i = 0; i < this.selPoints_.length; i++) {
129569a5 1507 if (!this.attr_("labelsShowZeroValues") && this.selPoints_[i].yval == 0) continue;
d160cc3b
NK
1508 if (!isOK(this.selPoints_[i].canvasy)) continue;
1509 if (this.attr_("labelsSeparateLines")) {
1510 replace += "<br/>";
1511 }
1512 var point = this.selPoints_[i];
8fb6dc24 1513 var c = new RGBColor(this.plotter_.colors[point.name]);
029da4b6 1514 var yval = fmtFunc(point.yval);
d160cc3b
NK
1515 replace += " <b><font color='" + c.toHex() + "'>"
1516 + point.name + "</font></b>:"
1517 + yval;
6a1aa64f 1518 }
50360fd0 1519
d160cc3b 1520 this.attr_("labelsDiv").innerHTML = replace;
6a1aa64f 1521 }
6a1aa64f 1522
6a1aa64f 1523 // Draw colored circles over the center of each selected point
43af96e7 1524 ctx.save();
b258a3da 1525 for (var i = 0; i < this.selPoints_.length; i++) {
f032c51d 1526 if (!isOK(this.selPoints_[i].canvasy)) continue;
227b93cc
DV
1527 var circleSize =
1528 this.attr_('highlightCircleSize', this.selPoints_[i].name);
6a1aa64f 1529 ctx.beginPath();
563c70ca 1530 ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
f032c51d 1531 ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
7bf6a9fe 1532 0, 2 * Math.PI, false);
6a1aa64f
DV
1533 ctx.fill();
1534 }
1535 ctx.restore();
1536
1537 this.previousVerticalX_ = canvasx;
1538 }
1539};
1540
1541/**
239c712d
NAG
1542 * Set manually set selected dots, and display information about them
1543 * @param int row number that should by highlighted
1544 * false value clears the selection
1545 * @public
1546 */
1547Dygraph.prototype.setSelection = function(row) {
1548 // Extract the points we've selected
1549 this.selPoints_ = [];
1550 var pos = 0;
50360fd0 1551
239c712d 1552 if (row !== false) {
16269f6e
NAG
1553 row = row-this.boundaryIds_[0][0];
1554 }
50360fd0 1555
16269f6e 1556 if (row !== false && row >= 0) {
239c712d 1557 for (var i in this.layout_.datasets) {
16269f6e 1558 if (row < this.layout_.datasets[i].length) {
38f33a44 1559 var point = this.layout_.points[pos+row];
1560
1561 if (this.attr_("stackedGraph")) {
8c03ba63 1562 point = this.layout_.unstackPointAtIndex(pos+row);
38f33a44 1563 }
1564
1565 this.selPoints_.push(point);
16269f6e 1566 }
239c712d
NAG
1567 pos += this.layout_.datasets[i].length;
1568 }
16269f6e 1569 }
50360fd0 1570
16269f6e 1571 if (this.selPoints_.length) {
239c712d
NAG
1572 this.lastx_ = this.selPoints_[0].xval;
1573 this.updateSelection_();
1574 } else {
1575 this.lastx_ = -1;
1576 this.clearSelection();
1577 }
1578
1579};
1580
1581/**
6a1aa64f
DV
1582 * The mouse has left the canvas. Clear out whatever artifacts remain
1583 * @param {Object} event the mouseout event from the browser.
1584 * @private
1585 */
285a6bda 1586Dygraph.prototype.mouseOut_ = function(event) {
a4c6a67c
AV
1587 if (this.attr_("unhighlightCallback")) {
1588 this.attr_("unhighlightCallback")(event);
1589 }
1590
43af96e7 1591 if (this.attr_("hideOverlayOnMouseOut")) {
239c712d 1592 this.clearSelection();
43af96e7 1593 }
6a1aa64f
DV
1594};
1595
239c712d
NAG
1596/**
1597 * Remove all selection from the canvas
1598 * @public
1599 */
1600Dygraph.prototype.clearSelection = function() {
1601 // Get rid of the overlay data
1602 var ctx = this.canvas_.getContext("2d");
1603 ctx.clearRect(0, 0, this.width_, this.height_);
1604 this.attr_("labelsDiv").innerHTML = "";
1605 this.selPoints_ = [];
1606 this.lastx_ = -1;
1607}
1608
103b7292
NAG
1609/**
1610 * Returns the number of the currently selected row
1611 * @return int row number, of -1 if nothing is selected
1612 * @public
1613 */
1614Dygraph.prototype.getSelection = function() {
1615 if (!this.selPoints_ || this.selPoints_.length < 1) {
1616 return -1;
1617 }
50360fd0 1618
103b7292
NAG
1619 for (var row=0; row<this.layout_.points.length; row++ ) {
1620 if (this.layout_.points[row].x == this.selPoints_[0].x) {
16269f6e 1621 return row + this.boundaryIds_[0][0];
103b7292
NAG
1622 }
1623 }
1624 return -1;
1625}
1626
285a6bda 1627Dygraph.zeropad = function(x) {
32988383
DV
1628 if (x < 10) return "0" + x; else return "" + x;
1629}
1630
6a1aa64f 1631/**
6b8e33dd
DV
1632 * Return a string version of the hours, minutes and seconds portion of a date.
1633 * @param {Number} date The JavaScript date (ms since epoch)
1634 * @return {String} A time of the form "HH:MM:SS"
1635 * @private
1636 */
bf640e56 1637Dygraph.hmsString_ = function(date) {
285a6bda 1638 var zeropad = Dygraph.zeropad;
6b8e33dd
DV
1639 var d = new Date(date);
1640 if (d.getSeconds()) {
1641 return zeropad(d.getHours()) + ":" +
1642 zeropad(d.getMinutes()) + ":" +
1643 zeropad(d.getSeconds());
6b8e33dd 1644 } else {
054531ca 1645 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
6b8e33dd
DV
1646 }
1647}
1648
1649/**
bf640e56
AV
1650 * Convert a JS date to a string appropriate to display on an axis that
1651 * is displaying values at the stated granularity.
1652 * @param {Date} date The date to format
1653 * @param {Number} granularity One of the Dygraph granularity constants
1654 * @return {String} The formatted date
1655 * @private
1656 */
1657Dygraph.dateAxisFormatter = function(date, granularity) {
5f70132f
DV
1658 if (granularity >= Dygraph.DECADAL) {
1659 return date.strftime('%Y');
1660 } else if (granularity >= Dygraph.MONTHLY) {
bf640e56
AV
1661 return date.strftime('%b %y');
1662 } else {
31eddad3 1663 var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
bf640e56
AV
1664 if (frac == 0 || granularity >= Dygraph.DAILY) {
1665 return new Date(date.getTime() + 3600*1000).strftime('%d%b');
1666 } else {
1667 return Dygraph.hmsString_(date.getTime());
1668 }
1669 }
1670}
1671
1672/**
6a1aa64f
DV
1673 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1674 * @param {Number} date The JavaScript date (ms since epoch)
1675 * @return {String} A date of the form "YYYY/MM/DD"
1676 * @private
1677 */
285a6bda
DV
1678Dygraph.dateString_ = function(date, self) {
1679 var zeropad = Dygraph.zeropad;
6a1aa64f
DV
1680 var d = new Date(date);
1681
1682 // Get the year:
1683 var year = "" + d.getFullYear();
1684 // Get a 0 padded month string
6b8e33dd 1685 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
6a1aa64f 1686 // Get a 0 padded day string
6b8e33dd 1687 var day = zeropad(d.getDate());
6a1aa64f 1688
6b8e33dd
DV
1689 var ret = "";
1690 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
bf640e56 1691 if (frac) ret = " " + Dygraph.hmsString_(date);
6b8e33dd
DV
1692
1693 return year + "/" + month + "/" + day + ret;
6a1aa64f
DV
1694};
1695
1696/**
1697 * Round a number to the specified number of digits past the decimal point.
1698 * @param {Number} num The number to round
1699 * @param {Number} places The number of decimals to which to round
1700 * @return {Number} The rounded number
1701 * @private
1702 */
029da4b6 1703Dygraph.round_ = function(num, places) {
6a1aa64f
DV
1704 var shift = Math.pow(10, places);
1705 return Math.round(num * shift)/shift;
1706};
1707
1708/**
1709 * Fires when there's data available to be graphed.
1710 * @param {String} data Raw CSV data to be plotted
1711 * @private
1712 */
285a6bda 1713Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f 1714 this.rawData_ = this.parseCSV_(data);
26ca7938 1715 this.predraw_();
6a1aa64f
DV
1716};
1717
285a6bda 1718Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
8846615a 1719 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
285a6bda 1720Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
6a1aa64f
DV
1721
1722/**
1723 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1724 * @private
1725 */
285a6bda 1726Dygraph.prototype.addXTicks_ = function() {
6a1aa64f
DV
1727 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1728 var startDate, endDate;
1729 if (this.dateWindow_) {
1730 startDate = this.dateWindow_[0];
1731 endDate = this.dateWindow_[1];
1732 } else {
1733 startDate = this.rawData_[0][0];
1734 endDate = this.rawData_[this.rawData_.length - 1][0];
1735 }
1736
285a6bda 1737 var xTicks = this.attr_('xTicker')(startDate, endDate, this);
6a1aa64f 1738 this.layout_.updateOptions({xTicks: xTicks});
32988383
DV
1739};
1740
1741// Time granularity enumeration
285a6bda 1742Dygraph.SECONDLY = 0;
20a41c17
DV
1743Dygraph.TWO_SECONDLY = 1;
1744Dygraph.FIVE_SECONDLY = 2;
1745Dygraph.TEN_SECONDLY = 3;
1746Dygraph.THIRTY_SECONDLY = 4;
1747Dygraph.MINUTELY = 5;
1748Dygraph.TWO_MINUTELY = 6;
1749Dygraph.FIVE_MINUTELY = 7;
1750Dygraph.TEN_MINUTELY = 8;
1751Dygraph.THIRTY_MINUTELY = 9;
1752Dygraph.HOURLY = 10;
1753Dygraph.TWO_HOURLY = 11;
1754Dygraph.SIX_HOURLY = 12;
1755Dygraph.DAILY = 13;
1756Dygraph.WEEKLY = 14;
1757Dygraph.MONTHLY = 15;
1758Dygraph.QUARTERLY = 16;
1759Dygraph.BIANNUAL = 17;
1760Dygraph.ANNUAL = 18;
1761Dygraph.DECADAL = 19;
3db4c464 1762Dygraph.CENTENNIAL = 20;
5f70132f 1763Dygraph.NUM_GRANULARITIES = 21;
285a6bda
DV
1764
1765Dygraph.SHORT_SPACINGS = [];
1766Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
20a41c17
DV
1767Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
1768Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
285a6bda
DV
1769Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
1770Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
1771Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
20a41c17
DV
1772Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
1773Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
285a6bda
DV
1774Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
1775Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
1776Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
20a41c17 1777Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
805d5519 1778Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
285a6bda
DV
1779Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
1780Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
32988383
DV
1781
1782// NumXTicks()
1783//
1784// If we used this time granularity, how many ticks would there be?
1785// This is only an approximation, but it's generally good enough.
1786//
285a6bda
DV
1787Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
1788 if (granularity < Dygraph.MONTHLY) {
32988383 1789 // Generate one tick mark for every fixed interval of time.
285a6bda 1790 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383
DV
1791 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
1792 } else {
1793 var year_mod = 1; // e.g. to only print one point every 10 years.
1794 var num_months = 12;
285a6bda
DV
1795 if (granularity == Dygraph.QUARTERLY) num_months = 3;
1796 if (granularity == Dygraph.BIANNUAL) num_months = 2;
1797 if (granularity == Dygraph.ANNUAL) num_months = 1;
1798 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
3db4c464 1799 if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; }
32988383
DV
1800
1801 var msInYear = 365.2524 * 24 * 3600 * 1000;
1802 var num_years = 1.0 * (end_time - start_time) / msInYear;
1803 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
1804 }
1805};
1806
1807// GetXAxis()
1808//
1809// Construct an x-axis of nicely-formatted times on meaningful boundaries
1810// (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1811//
1812// Returns an array containing {v: millis, label: label} dictionaries.
1813//
285a6bda 1814Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
bf640e56 1815 var formatter = this.attr_("xAxisLabelFormatter");
32988383 1816 var ticks = [];
285a6bda 1817 if (granularity < Dygraph.MONTHLY) {
32988383 1818 // Generate one tick mark for every fixed interval of time.
285a6bda 1819 var spacing = Dygraph.SHORT_SPACINGS[granularity];
3d29302c 1820 var format = '%d%b'; // e.g. "1Jan"
076c9622
DV
1821
1822 // Find a time less than start_time which occurs on a "nice" time boundary
1823 // for this granularity.
1824 var g = spacing / 1000;
076c9622
DV
1825 var d = new Date(start_time);
1826 if (g <= 60) { // seconds
1827 var x = d.getSeconds(); d.setSeconds(x - x % g);
1828 } else {
1829 d.setSeconds(0);
1830 g /= 60;
1831 if (g <= 60) { // minutes
1832 var x = d.getMinutes(); d.setMinutes(x - x % g);
1833 } else {
1834 d.setMinutes(0);
1835 g /= 60;
1836
1837 if (g <= 24) { // days
1838 var x = d.getHours(); d.setHours(x - x % g);
1839 } else {
1840 d.setHours(0);
1841 g /= 24;
1842
1843 if (g == 7) { // one week
20a41c17 1844 d.setDate(d.getDate() - d.getDay());
076c9622
DV
1845 }
1846 }
1847 }
328bb812 1848 }
076c9622
DV
1849 start_time = d.getTime();
1850
32988383 1851 for (var t = start_time; t <= end_time; t += spacing) {
bf640e56 1852 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
32988383
DV
1853 }
1854 } else {
1855 // Display a tick mark on the first of a set of months of each year.
1856 // Years get a tick mark iff y % year_mod == 0. This is useful for
1857 // displaying a tick mark once every 10 years, say, on long time scales.
1858 var months;
1859 var year_mod = 1; // e.g. to only print one point every 10 years.
1860
285a6bda 1861 if (granularity == Dygraph.MONTHLY) {
32988383 1862 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
285a6bda 1863 } else if (granularity == Dygraph.QUARTERLY) {
32988383 1864 months = [ 0, 3, 6, 9 ];
285a6bda 1865 } else if (granularity == Dygraph.BIANNUAL) {
32988383 1866 months = [ 0, 6 ];
285a6bda 1867 } else if (granularity == Dygraph.ANNUAL) {
32988383 1868 months = [ 0 ];
285a6bda 1869 } else if (granularity == Dygraph.DECADAL) {
32988383
DV
1870 months = [ 0 ];
1871 year_mod = 10;
3db4c464 1872 } else if (granularity == Dygraph.CENTENNIAL) {
5f70132f
DV
1873 months = [ 0 ];
1874 year_mod = 100;
1875 } else {
1876 this.warn("Span of dates is too long");
32988383
DV
1877 }
1878
1879 var start_year = new Date(start_time).getFullYear();
1880 var end_year = new Date(end_time).getFullYear();
285a6bda 1881 var zeropad = Dygraph.zeropad;
32988383
DV
1882 for (var i = start_year; i <= end_year; i++) {
1883 if (i % year_mod != 0) continue;
1884 for (var j = 0; j < months.length; j++) {
1885 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
1886 var t = Date.parse(date_str);
1887 if (t < start_time || t > end_time) continue;
bf640e56 1888 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
32988383
DV
1889 }
1890 }
1891 }
1892
1893 return ticks;
1894};
1895
6a1aa64f
DV
1896
1897/**
1898 * Add ticks to the x-axis based on a date range.
1899 * @param {Number} startDate Start of the date window (millis since epoch)
1900 * @param {Number} endDate End of the date window (millis since epoch)
1901 * @return {Array.<Object>} Array of {label, value} tuples.
1902 * @public
1903 */
285a6bda 1904Dygraph.dateTicker = function(startDate, endDate, self) {
32988383 1905 var chosen = -1;
285a6bda
DV
1906 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
1907 var num_ticks = self.NumXTicks(startDate, endDate, i);
1908 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
32988383
DV
1909 chosen = i;
1910 break;
2769de62 1911 }
6a1aa64f
DV
1912 }
1913
32988383 1914 if (chosen >= 0) {
285a6bda 1915 return self.GetXAxis(startDate, endDate, chosen);
6a1aa64f 1916 } else {
32988383 1917 // TODO(danvk): signal error.
6a1aa64f 1918 }
6a1aa64f
DV
1919};
1920
c1bc242a
DV
1921// This is a list of human-friendly values at which to show tick marks on a log
1922// scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
1923// ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
5db0e241 1924// NOTE: this assumes that Dygraph.LOG_SCALE = 10.
0cfa06d1 1925Dygraph.PREFERRED_LOG_TICK_VALUES = function() {
6821efbe
RK
1926 var vals = [];
1927 for (var power = -39; power <= 39; power++) {
1928 var range = Math.pow(10, power);
4b467120
RK
1929 for (var mult = 1; mult <= 9; mult++) {
1930 var val = range * mult;
6821efbe
RK
1931 vals.push(val);
1932 }
1933 }
1934 return vals;
1935}();
1936
0cfa06d1
RK
1937// val is the value to search for
1938// arry is the value over which to search
1939// if abs > 0, find the lowest entry greater than val
1940// if abs < 0, find the highest entry less than val
1941// if abs == 0, find the entry that equals val.
1942// Currently does not work when val is outside the range of arry's values.
1943Dygraph.binarySearch = function(val, arry, abs, low, high) {
1944 if (low == null || high == null) {
1945 low = 0;
1946 high = arry.length - 1;
1947 }
1948 if (low > high) {
1949 return -1;
1950 }
1951 if (abs == null) {
1952 abs = 0;
1953 }
1954 var validIndex = function(idx) {
1955 return idx >= 0 && idx < arry.length;
1956 }
1957 var mid = parseInt((low + high) / 2);
1958 var element = arry[mid];
1959 if (element == val) {
1960 return mid;
1961 }
1962 if (element > val) {
1963 if (abs > 0) {
1964 // Accept if element > val, but also if prior element < val.
1965 var idx = mid - 1;
1966 if (validIndex(idx) && arry[idx] < val) {
1967 return mid;
1968 }
1969 }
c1bc242a 1970 return Dygraph.binarySearch(val, arry, abs, low, mid - 1);
0cfa06d1
RK
1971 }
1972 if (element < val) {
1973 if (abs < 0) {
1974 // Accept if element < val, but also if prior element > val.
1975 var idx = mid + 1;
1976 if (validIndex(idx) && arry[idx] > val) {
1977 return mid;
1978 }
1979 }
1980 return Dygraph.binarySearch(val, arry, abs, mid + 1, high);
1981 }
60a19014 1982};
0cfa06d1 1983
6a1aa64f
DV
1984/**
1985 * Add ticks when the x axis has numbers on it (instead of dates)
ff022deb
RK
1986 * TODO(konigsberg): Update comment.
1987 *
7d0e7a0d
RK
1988 * @param {Number} minV minimum value
1989 * @param {Number} maxV maximum value
84fc6aa7 1990 * @param self
f30cf740 1991 * @param {function} attribute accessor function.
6a1aa64f
DV
1992 * @return {Array.<Object>} Array of {label, value} tuples.
1993 * @public
1994 */
0d64e596 1995Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
70c80071
DV
1996 var attr = function(k) {
1997 if (axis_props && axis_props.hasOwnProperty(k)) return axis_props[k];
1998 return self.attr_(k);
1999 };
f09fc545 2000
0d64e596
DV
2001 var ticks = [];
2002 if (vals) {
2003 for (var i = 0; i < vals.length; i++) {
2004 ticks.push({v: vals[i]});
2005 }
f09e46d4 2006 } else {
7d0e7a0d 2007 if (axis_props && attr("logscale")) {
ff022deb 2008 var pixelsPerTick = attr('pixelsPerYLabel');
7d0e7a0d 2009 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
ff022deb 2010 var nTicks = Math.floor(self.height_ / pixelsPerTick);
0cfa06d1
RK
2011 var minIdx = Dygraph.binarySearch(minV, Dygraph.PREFERRED_LOG_TICK_VALUES, 1);
2012 var maxIdx = Dygraph.binarySearch(maxV, Dygraph.PREFERRED_LOG_TICK_VALUES, -1);
2013 if (minIdx == -1) {
6821efbe
RK
2014 minIdx = 0;
2015 }
0cfa06d1
RK
2016 if (maxIdx == -1) {
2017 maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1;
6821efbe 2018 }
0cfa06d1
RK
2019 // Count the number of tick values would appear, if we can get at least
2020 // nTicks / 4 accept them.
00aa7f61 2021 var lastDisplayed = null;
0cfa06d1 2022 if (maxIdx - minIdx >= nTicks / 4) {
00aa7f61 2023 var axisId = axis_props.yAxisId;
0cfa06d1
RK
2024 for (var idx = maxIdx; idx >= minIdx; idx--) {
2025 var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx];
00aa7f61
RK
2026 var domCoord = axis_props.g.toDomYCoord(tickValue, axisId);
2027 var tick = { v: tickValue };
2028 if (lastDisplayed == null) {
2029 lastDisplayed = {
2030 tickValue : tickValue,
2031 domCoord : domCoord
2032 };
2033 } else {
2034 if (domCoord - lastDisplayed.domCoord >= pixelsPerTick) {
2035 lastDisplayed = {
2036 tickValue : tickValue,
2037 domCoord : domCoord
2038 };
2039 } else {
c1bc242a 2040 tick.label = "";
00aa7f61
RK
2041 }
2042 }
2043 ticks.push(tick);
6821efbe 2044 }
0cfa06d1
RK
2045 // Since we went in backwards order.
2046 ticks.reverse();
6821efbe
RK
2047 }
2048 }
c1bc242a 2049
6821efbe
RK
2050 // ticks.length won't be 0 if the log scale function finds values to insert.
2051 if (ticks.length == 0) {
ff022deb
RK
2052 // Basic idea:
2053 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2054 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
2055 // The first spacing greater than pixelsPerYLabel is what we use.
2056 // TODO(danvk): version that works on a log scale.
0d64e596 2057 if (attr("labelsKMG2")) {
ff022deb 2058 var mults = [1, 2, 4, 8];
0d64e596 2059 } else {
ff022deb 2060 var mults = [1, 2, 5];
0d64e596 2061 }
ff022deb
RK
2062 var scale, low_val, high_val, nTicks;
2063 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2064 var pixelsPerTick = attr('pixelsPerYLabel');
2065 for (var i = -10; i < 50; i++) {
2066 if (attr("labelsKMG2")) {
2067 var base_scale = Math.pow(16, i);
2068 } else {
2069 var base_scale = Math.pow(10, i);
2070 }
2071 for (var j = 0; j < mults.length; j++) {
2072 scale = base_scale * mults[j];
2073 low_val = Math.floor(minV / scale) * scale;
2074 high_val = Math.ceil(maxV / scale) * scale;
2075 nTicks = Math.abs(high_val - low_val) / scale;
2076 var spacing = self.height_ / nTicks;
2077 // wish I could break out of both loops at once...
2078 if (spacing > pixelsPerTick) break;
2079 }
0d64e596
DV
2080 if (spacing > pixelsPerTick) break;
2081 }
0d64e596 2082
ff022deb
RK
2083 // Construct the set of ticks.
2084 // Allow reverse y-axis if it's explicitly requested.
2085 if (low_val > high_val) scale *= -1;
2086 for (var i = 0; i < nTicks; i++) {
2087 var tickV = low_val + i * scale;
2088 ticks.push( {v: tickV} );
2089 }
0d64e596 2090 }
6a1aa64f
DV
2091 }
2092
0d64e596 2093 // Add formatted labels to the ticks.
ed11be50
DV
2094 var k;
2095 var k_labels = [];
f09fc545 2096 if (attr("labelsKMB")) {
ed11be50
DV
2097 k = 1000;
2098 k_labels = [ "K", "M", "B", "T" ];
2099 }
f09fc545 2100 if (attr("labelsKMG2")) {
ed11be50
DV
2101 if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2102 k = 1024;
2103 k_labels = [ "k", "M", "G", "T" ];
2104 }
c94eee24 2105 var formatter = attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
ed11be50 2106
0cfa06d1 2107 // Add labels to the ticks.
0d64e596 2108 for (var i = 0; i < ticks.length; i++) {
0cfa06d1
RK
2109 if (ticks[i].label == null) {
2110 var tickV = ticks[i].v;
2111 var absTickV = Math.abs(tickV);
2112 var label;
2113 if (formatter != undefined) {
2114 label = formatter(tickV);
2115 } else {
2116 label = Dygraph.round_(tickV, 2);
2117 }
2118 if (k_labels.length) {
2119 // Round up to an appropriate unit.
2120 var n = k*k*k*k;
2121 for (var j = 3; j >= 0; j--, n /= k) {
2122 if (absTickV >= n) {
2123 label = Dygraph.round_(tickV / n, 1) + k_labels[j];
2124 break;
2125 }
ed11be50 2126 }
afefbcdb 2127 }
0cfa06d1 2128 ticks[i].label = label;
6a1aa64f 2129 }
6a1aa64f
DV
2130 }
2131 return ticks;
2132};
2133
5011e7a1
DV
2134// Computes the range of the data series (including confidence intervals).
2135// series is either [ [x1, y1], [x2, y2], ... ] or
2136// [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2137// Returns [low, high]
2138Dygraph.prototype.extremeValues_ = function(series) {
2139 var minY = null, maxY = null;
2140
9922b78b 2141 var bars = this.attr_("errorBars") || this.attr_("customBars");
5011e7a1
DV
2142 if (bars) {
2143 // With custom bars, maxY is the max of the high values.
2144 for (var j = 0; j < series.length; j++) {
2145 var y = series[j][1][0];
2146 if (!y) continue;
2147 var low = y - series[j][1][1];
2148 var high = y + series[j][1][2];
2149 if (low > y) low = y; // this can happen with custom bars,
2150 if (high < y) high = y; // e.g. in tests/custom-bars.html
2151 if (maxY == null || high > maxY) {
2152 maxY = high;
2153 }
2154 if (minY == null || low < minY) {
2155 minY = low;
2156 }
2157 }
2158 } else {
2159 for (var j = 0; j < series.length; j++) {
2160 var y = series[j][1];
d12999d3 2161 if (y === null || isNaN(y)) continue;
5011e7a1
DV
2162 if (maxY == null || y > maxY) {
2163 maxY = y;
2164 }
2165 if (minY == null || y < minY) {
2166 minY = y;
2167 }
2168 }
2169 }
2170
2171 return [minY, maxY];
2172};
2173
6a1aa64f 2174/**
26ca7938
DV
2175 * This function is called once when the chart's data is changed or the options
2176 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2177 * idea is that values derived from the chart's data can be computed here,
2178 * rather than every time the chart is drawn. This includes things like the
2179 * number of axes, rolling averages, etc.
2180 */
2181Dygraph.prototype.predraw_ = function() {
60a19014 2182 // TODO(danvk): move more computations out of drawGraph_ and into here.
26ca7938
DV
2183 this.computeYAxes_();
2184
2185 // Create a new plotter.
70c80071 2186 if (this.plotter_) this.plotter_.clear();
26ca7938
DV
2187 this.plotter_ = new DygraphCanvasRenderer(this,
2188 this.hidden_, this.layout_,
2189 this.renderOptions_);
2190
0abfbd7e
DV
2191 // The roller sits in the bottom left corner of the chart. We don't know where
2192 // this will be until the options are available, so it's positioned here.
8c69de65 2193 this.createRollInterface_();
26ca7938 2194
0abfbd7e
DV
2195 // Same thing applies for the labelsDiv. It's right edge should be flush with
2196 // the right edge of the charting area (which may not be the same as the right
2197 // edge of the div, if we have two y-axes.
2198 this.positionLabelsDiv_();
2199
26ca7938
DV
2200 // If the data or options have changed, then we'd better redraw.
2201 this.drawGraph_();
2202};
2203
2204/**
2205 * Update the graph with new data. This method is called when the viewing area
2206 * has changed. If the underlying data or options have changed, predraw_ will
2207 * be called before drawGraph_ is called.
6a1aa64f
DV
2208 * @private
2209 */
26ca7938
DV
2210Dygraph.prototype.drawGraph_ = function() {
2211 var data = this.rawData_;
2212
fe0b7c03
DV
2213 // This is used to set the second parameter to drawCallback, below.
2214 var is_initial_draw = this.is_initial_draw_;
2215 this.is_initial_draw_ = false;
2216
3bd9c228 2217 var minY = null, maxY = null;
6a1aa64f 2218 this.layout_.removeAllDatasets();
285a6bda 2219 this.setColors_();
9317362d 2220 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
285a6bda 2221
354e15ab
DE
2222 // Loop over the fields (series). Go from the last to the first,
2223 // because if they're stacked that's how we accumulate the values.
43af96e7 2224
354e15ab
DE
2225 var cumulative_y = []; // For stacked series.
2226 var datasets = [];
2227
f09fc545
DV
2228 var extremes = {}; // series name -> [low, high]
2229
354e15ab
DE
2230 // Loop over all fields and create datasets
2231 for (var i = data[0].length - 1; i >= 1; i--) {
1cf11047
DV
2232 if (!this.visibility()[i - 1]) continue;
2233
f09fc545 2234 var seriesName = this.attr_("labels")[i];
450fe64b 2235 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
6e6a2b0a 2236 var logScale = this.attr_('logscale', i);
450fe64b 2237
6a1aa64f
DV
2238 var series = [];
2239 for (var j = 0; j < data.length; j++) {
6e6a2b0a
RK
2240 var date = data[j][0];
2241 var point = data[j][i];
2242 if (logScale) {
2243 // On the log scale, points less than zero do not exist.
2244 // This will create a gap in the chart. Note that this ignores
2245 // connectSeparatedPoints.
2246 if (point < 0) {
2247 point = null;
2248 }
2249 series.push([date, point]);
2250 } else {
2251 if (point != null || !connectSeparatedPoints) {
2252 series.push([date, point]);
2253 }
f032c51d 2254 }
6a1aa64f 2255 }
2f5e7e1a
DV
2256
2257 // TODO(danvk): move this into predraw_. It's insane to do it here.
6a1aa64f
DV
2258 series = this.rollingAverage(series, this.rollPeriod_);
2259
2260 // Prune down to the desired range, if necessary (for zooming)
1a26f3fb
DV
2261 // Because there can be lines going to points outside of the visible area,
2262 // we actually prune to visible points, plus one on either side.
9922b78b 2263 var bars = this.attr_("errorBars") || this.attr_("customBars");
6a1aa64f
DV
2264 if (this.dateWindow_) {
2265 var low = this.dateWindow_[0];
2266 var high= this.dateWindow_[1];
2267 var pruned = [];
1a26f3fb
DV
2268 // TODO(danvk): do binary search instead of linear search.
2269 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2270 var firstIdx = null, lastIdx = null;
6a1aa64f 2271 for (var k = 0; k < series.length; k++) {
1a26f3fb
DV
2272 if (series[k][0] >= low && firstIdx === null) {
2273 firstIdx = k;
2274 }
2275 if (series[k][0] <= high) {
2276 lastIdx = k;
6a1aa64f
DV
2277 }
2278 }
1a26f3fb
DV
2279 if (firstIdx === null) firstIdx = 0;
2280 if (firstIdx > 0) firstIdx--;
2281 if (lastIdx === null) lastIdx = series.length - 1;
2282 if (lastIdx < series.length - 1) lastIdx++;
16269f6e 2283 this.boundaryIds_[i-1] = [firstIdx, lastIdx];
1a26f3fb
DV
2284 for (var k = firstIdx; k <= lastIdx; k++) {
2285 pruned.push(series[k]);
6a1aa64f
DV
2286 }
2287 series = pruned;
16269f6e
NAG
2288 } else {
2289 this.boundaryIds_[i-1] = [0, series.length-1];
6a1aa64f
DV
2290 }
2291
f09fc545 2292 var seriesExtremes = this.extremeValues_(series);
5011e7a1 2293
6a1aa64f 2294 if (bars) {
354e15ab
DE
2295 for (var j=0; j<series.length; j++) {
2296 val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
2297 series[j] = val;
2298 }
43af96e7 2299 } else if (this.attr_("stackedGraph")) {
43af96e7
NK
2300 var l = series.length;
2301 var actual_y;
2302 for (var j = 0; j < l; j++) {
354e15ab
DE
2303 // If one data set has a NaN, let all subsequent stacked
2304 // sets inherit the NaN -- only start at 0 for the first set.
2305 var x = series[j][0];
41b0f691 2306 if (cumulative_y[x] === undefined) {
354e15ab 2307 cumulative_y[x] = 0;
41b0f691 2308 }
43af96e7
NK
2309
2310 actual_y = series[j][1];
354e15ab 2311 cumulative_y[x] += actual_y;
43af96e7 2312
354e15ab 2313 series[j] = [x, cumulative_y[x]]
43af96e7 2314
41b0f691
DV
2315 if (cumulative_y[x] > seriesExtremes[1]) {
2316 seriesExtremes[1] = cumulative_y[x];
2317 }
2318 if (cumulative_y[x] < seriesExtremes[0]) {
2319 seriesExtremes[0] = cumulative_y[x];
2320 }
43af96e7 2321 }
6a1aa64f 2322 }
41b0f691 2323 extremes[seriesName] = seriesExtremes;
354e15ab
DE
2324
2325 datasets[i] = series;
6a1aa64f
DV
2326 }
2327
354e15ab 2328 for (var i = 1; i < datasets.length; i++) {
4523c1f6 2329 if (!this.visibility()[i - 1]) continue;
354e15ab 2330 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
43af96e7
NK
2331 }
2332
26ca7938
DV
2333 // TODO(danvk): this method doesn't need to return anything.
2334 var out = this.computeYAxisRanges_(extremes);
f09fc545
DV
2335 var axes = out[0];
2336 var seriesToAxisMap = out[1];
9012dd21 2337 this.layout_.updateOptions( { yAxes: axes,
ea4942ed 2338 seriesToAxisMap: seriesToAxisMap
9012dd21 2339 } );
f09fc545 2340
6a1aa64f
DV
2341 this.addXTicks_();
2342
2343 // Tell PlotKit to use this new data and render itself
d033ae1c 2344 this.layout_.updateOptions({dateWindow: this.dateWindow_});
6a1aa64f
DV
2345 this.layout_.evaluateWithError();
2346 this.plotter_.clear();
2347 this.plotter_.render();
f6401bf6 2348 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2f5e7e1a 2349 this.canvas_.height);
599fb4ad
DV
2350
2351 if (this.attr_("drawCallback") !== null) {
fe0b7c03 2352 this.attr_("drawCallback")(this, is_initial_draw);
599fb4ad 2353 }
6a1aa64f
DV
2354};
2355
2356/**
26ca7938
DV
2357 * Determine properties of the y-axes which are independent of the data
2358 * currently being displayed. This includes things like the number of axes and
2359 * the style of the axes. It does not include the range of each axis and its
2360 * tick marks.
2361 * This fills in this.axes_ and this.seriesToAxisMap_.
2362 * axes_ = [ { options } ]
2363 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2364 * indices are into the axes_ array.
f09fc545 2365 */
26ca7938 2366Dygraph.prototype.computeYAxes_ = function() {
00aa7f61 2367 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
26ca7938
DV
2368 this.seriesToAxisMap_ = {};
2369
2370 // Get a list of series names.
2371 var labels = this.attr_("labels");
1c77a3a1 2372 var series = {};
26ca7938 2373 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
f09fc545
DV
2374
2375 // all options which could be applied per-axis:
2376 var axisOptions = [
2377 'includeZero',
2378 'valueRange',
2379 'labelsKMB',
2380 'labelsKMG2',
2381 'pixelsPerYLabel',
2382 'yAxisLabelWidth',
2383 'axisLabelFontSize',
7d0e7a0d
RK
2384 'axisTickSize',
2385 'logscale'
f09fc545
DV
2386 ];
2387
2388 // Copy global axis options over to the first axis.
2389 for (var i = 0; i < axisOptions.length; i++) {
2390 var k = axisOptions[i];
2391 var v = this.attr_(k);
26ca7938 2392 if (v) this.axes_[0][k] = v;
f09fc545
DV
2393 }
2394
2395 // Go through once and add all the axes.
26ca7938
DV
2396 for (var seriesName in series) {
2397 if (!series.hasOwnProperty(seriesName)) continue;
f09fc545
DV
2398 var axis = this.attr_("axis", seriesName);
2399 if (axis == null) {
26ca7938 2400 this.seriesToAxisMap_[seriesName] = 0;
f09fc545
DV
2401 continue;
2402 }
2403 if (typeof(axis) == 'object') {
2404 // Add a new axis, making a copy of its per-axis options.
2405 var opts = {};
26ca7938 2406 Dygraph.update(opts, this.axes_[0]);
f09fc545 2407 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
00aa7f61
RK
2408 var yAxisId = this.axes_.length;
2409 opts.yAxisId = yAxisId;
2410 opts.g = this;
f09fc545 2411 Dygraph.update(opts, axis);
26ca7938 2412 this.axes_.push(opts);
00aa7f61 2413 this.seriesToAxisMap_[seriesName] = yAxisId;
f09fc545
DV
2414 }
2415 }
2416
2417 // Go through one more time and assign series to an axis defined by another
2418 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
26ca7938
DV
2419 for (var seriesName in series) {
2420 if (!series.hasOwnProperty(seriesName)) continue;
f09fc545
DV
2421 var axis = this.attr_("axis", seriesName);
2422 if (typeof(axis) == 'string') {
26ca7938 2423 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
f09fc545
DV
2424 this.error("Series " + seriesName + " wants to share a y-axis with " +
2425 "series " + axis + ", which does not define its own axis.");
2426 return null;
2427 }
26ca7938
DV
2428 var idx = this.seriesToAxisMap_[axis];
2429 this.seriesToAxisMap_[seriesName] = idx;
f09fc545
DV
2430 }
2431 }
1c77a3a1
DV
2432
2433 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2434 // this last so that hiding the first series doesn't destroy the axis
2435 // properties of the primary axis.
2436 var seriesToAxisFiltered = {};
2437 var vis = this.visibility();
2438 for (var i = 1; i < labels.length; i++) {
2439 var s = labels[i];
2440 if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s];
2441 }
2442 this.seriesToAxisMap_ = seriesToAxisFiltered;
26ca7938
DV
2443};
2444
2445/**
2446 * Returns the number of y-axes on the chart.
2447 * @return {Number} the number of axes.
2448 */
2449Dygraph.prototype.numAxes = function() {
2450 var last_axis = 0;
2451 for (var series in this.seriesToAxisMap_) {
2452 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2453 var idx = this.seriesToAxisMap_[series];
2454 if (idx > last_axis) last_axis = idx;
2455 }
2456 return 1 + last_axis;
2457};
2458
2459/**
2460 * Determine the value range and tick marks for each axis.
2461 * @param {Object} extremes A mapping from seriesName -> [low, high]
2462 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2463 */
2464Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2465 // Build a map from axis number -> [list of series names]
2466 var seriesForAxis = [];
2467 for (var series in this.seriesToAxisMap_) {
2468 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2469 var idx = this.seriesToAxisMap_[series];
2470 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2471 seriesForAxis[idx].push(series);
2472 }
f09fc545
DV
2473
2474 // Compute extreme values, a span and tick marks for each axis.
26ca7938
DV
2475 for (var i = 0; i < this.axes_.length; i++) {
2476 var axis = this.axes_[i];
d58ae307
DV
2477 if (axis.valueWindow) {
2478 // This is only set if the user has zoomed on the y-axis. It is never set
2479 // by a user. It takes precedence over axis.valueRange because, if you set
2480 // valueRange, you'd still expect to be able to pan.
2481 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
2482 } else if (axis.valueRange) {
2483 // This is a user-set value range for this axis.
26ca7938
DV
2484 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
2485 } else {
1c77a3a1 2486 // Calculate the extremes of extremes.
f09fc545
DV
2487 var series = seriesForAxis[i];
2488 var minY = Infinity; // extremes[series[0]][0];
2489 var maxY = -Infinity; // extremes[series[0]][1];
2490 for (var j = 0; j < series.length; j++) {
2491 minY = Math.min(extremes[series[j]][0], minY);
e3b6727e 2492 maxY = Math.max(extremes[series[j]][1], maxY);
f09fc545
DV
2493 }
2494 if (axis.includeZero && minY > 0) minY = 0;
2495
2496 // Add some padding and round up to an integer to be human-friendly.
2497 var span = maxY - minY;
2498 // special case: if we have no sense of scale, use +/-10% of the sole value.
2499 if (span == 0) { span = maxY; }
f09fc545 2500
ff022deb
RK
2501 var maxAxisY;
2502 var minAxisY;
7d0e7a0d 2503 if (axis.logscale) {
ff022deb
RK
2504 var maxAxisY = maxY + 0.1 * span;
2505 var minAxisY = minY;
2506 } else {
2507 var maxAxisY = maxY + 0.1 * span;
2508 var minAxisY = minY - 0.1 * span;
2509
2510 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2511 if (!this.attr_("avoidMinZero")) {
2512 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2513 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2514 }
f09fc545 2515
ff022deb
RK
2516 if (this.attr_("includeZero")) {
2517 if (maxY < 0) maxAxisY = 0;
2518 if (minY > 0) minAxisY = 0;
2519 }
f09fc545
DV
2520 }
2521
26ca7938 2522 axis.computedValueRange = [minAxisY, maxAxisY];
f09fc545
DV
2523 }
2524
0d64e596
DV
2525 // Add ticks. By default, all axes inherit the tick positions of the
2526 // primary axis. However, if an axis is specifically marked as having
2527 // independent ticks, then that is permissible as well.
2528 if (i == 0 || axis.independentTicks) {
2529 axis.ticks =
2530 Dygraph.numericTicks(axis.computedValueRange[0],
2531 axis.computedValueRange[1],
2532 this,
2533 axis);
2534 } else {
2535 var p_axis = this.axes_[0];
2536 var p_ticks = p_axis.ticks;
2537 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2538 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2539 var tick_values = [];
2540 for (var i = 0; i < p_ticks.length; i++) {
2541 var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
2542 var y_val = axis.computedValueRange[0] + y_frac * scale;
2543 tick_values.push(y_val);
2544 }
2545
2546 axis.ticks =
2547 Dygraph.numericTicks(axis.computedValueRange[0],
2548 axis.computedValueRange[1],
2549 this, axis, tick_values);
2550 }
f09fc545
DV
2551 }
2552
26ca7938 2553 return [this.axes_, this.seriesToAxisMap_];
f09fc545
DV
2554};
2555
2556/**
6a1aa64f
DV
2557 * Calculates the rolling average of a data set.
2558 * If originalData is [label, val], rolls the average of those.
2559 * If originalData is [label, [, it's interpreted as [value, stddev]
2560 * and the roll is returned in the same form, with appropriately reduced
2561 * stddev for each value.
2562 * Note that this is where fractional input (i.e. '5/10') is converted into
2563 * decimal values.
2564 * @param {Array} originalData The data in the appropriate format (see above)
2565 * @param {Number} rollPeriod The number of days over which to average the data
2566 */
285a6bda 2567Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
6a1aa64f
DV
2568 if (originalData.length < 2)
2569 return originalData;
2570 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
2571 var rollingData = [];
285a6bda 2572 var sigma = this.attr_("sigma");
6a1aa64f
DV
2573
2574 if (this.fractions_) {
2575 var num = 0;
2576 var den = 0; // numerator/denominator
2577 var mult = 100.0;
2578 for (var i = 0; i < originalData.length; i++) {
2579 num += originalData[i][1][0];
2580 den += originalData[i][1][1];
2581 if (i - rollPeriod >= 0) {
2582 num -= originalData[i - rollPeriod][1][0];
2583 den -= originalData[i - rollPeriod][1][1];
2584 }
2585
2586 var date = originalData[i][0];
2587 var value = den ? num / den : 0.0;
285a6bda 2588 if (this.attr_("errorBars")) {
6a1aa64f
DV
2589 if (this.wilsonInterval_) {
2590 // For more details on this confidence interval, see:
2591 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
2592 if (den) {
2593 var p = value < 0 ? 0 : value, n = den;
2594 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
2595 var denom = 1 + sigma * sigma / den;
2596 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
2597 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
2598 rollingData[i] = [date,
2599 [p * mult, (p - low) * mult, (high - p) * mult]];
2600 } else {
2601 rollingData[i] = [date, [0, 0, 0]];
2602 }
2603 } else {
2604 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
2605 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
2606 }
2607 } else {
2608 rollingData[i] = [date, mult * value];
2609 }
2610 }
9922b78b 2611 } else if (this.attr_("customBars")) {
f6885d6a
DV
2612 var low = 0;
2613 var mid = 0;
2614 var high = 0;
2615 var count = 0;
6a1aa64f
DV
2616 for (var i = 0; i < originalData.length; i++) {
2617 var data = originalData[i][1];
2618 var y = data[1];
2619 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
f6885d6a 2620
8b91c51f 2621 if (y != null && !isNaN(y)) {
49a7d0d5
DV
2622 low += data[0];
2623 mid += y;
2624 high += data[2];
2625 count += 1;
2626 }
f6885d6a
DV
2627 if (i - rollPeriod >= 0) {
2628 var prev = originalData[i - rollPeriod];
8b91c51f 2629 if (prev[1][1] != null && !isNaN(prev[1][1])) {
49a7d0d5
DV
2630 low -= prev[1][0];
2631 mid -= prev[1][1];
2632 high -= prev[1][2];
2633 count -= 1;
2634 }
f6885d6a
DV
2635 }
2636 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
2637 1.0 * (mid - low) / count,
2638 1.0 * (high - mid) / count ]];
2769de62 2639 }
6a1aa64f
DV
2640 } else {
2641 // Calculate the rolling average for the first rollPeriod - 1 points where
2642 // there is not enough data to roll over the full number of days
2643 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
285a6bda 2644 if (!this.attr_("errorBars")){
5011e7a1
DV
2645 if (rollPeriod == 1) {
2646 return originalData;
2647 }
2648
2847c1cf 2649 for (var i = 0; i < originalData.length; i++) {
6a1aa64f 2650 var sum = 0;
5011e7a1 2651 var num_ok = 0;
2847c1cf
DV
2652 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
2653 var y = originalData[j][1];
8b91c51f 2654 if (y == null || isNaN(y)) continue;
5011e7a1 2655 num_ok++;
2847c1cf 2656 sum += originalData[j][1];
6a1aa64f 2657 }
5011e7a1 2658 if (num_ok) {
2847c1cf 2659 rollingData[i] = [originalData[i][0], sum / num_ok];
5011e7a1 2660 } else {
2847c1cf 2661 rollingData[i] = [originalData[i][0], null];
5011e7a1 2662 }
6a1aa64f 2663 }
2847c1cf
DV
2664
2665 } else {
2666 for (var i = 0; i < originalData.length; i++) {
6a1aa64f
DV
2667 var sum = 0;
2668 var variance = 0;
5011e7a1 2669 var num_ok = 0;
2847c1cf 2670 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
5011e7a1 2671 var y = originalData[j][1][0];
8b91c51f 2672 if (y == null || isNaN(y)) continue;
5011e7a1 2673 num_ok++;
6a1aa64f
DV
2674 sum += originalData[j][1][0];
2675 variance += Math.pow(originalData[j][1][1], 2);
2676 }
5011e7a1
DV
2677 if (num_ok) {
2678 var stddev = Math.sqrt(variance) / num_ok;
2679 rollingData[i] = [originalData[i][0],
2680 [sum / num_ok, sigma * stddev, sigma * stddev]];
2681 } else {
2682 rollingData[i] = [originalData[i][0], [null, null, null]];
2683 }
6a1aa64f
DV
2684 }
2685 }
2686 }
2687
2688 return rollingData;
2689};
2690
2691/**
2692 * Parses a date, returning the number of milliseconds since epoch. This can be
285a6bda
DV
2693 * passed in as an xValueParser in the Dygraph constructor.
2694 * TODO(danvk): enumerate formats that this understands.
6a1aa64f
DV
2695 * @param {String} A date in YYYYMMDD format.
2696 * @return {Number} Milliseconds since epoch.
2697 * @public
2698 */
285a6bda 2699Dygraph.dateParser = function(dateStr, self) {
6a1aa64f 2700 var dateStrSlashed;
285a6bda 2701 var d;
986a5026 2702 if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
6a1aa64f 2703 dateStrSlashed = dateStr.replace("-", "/", "g");
353a0294
DV
2704 while (dateStrSlashed.search("-") != -1) {
2705 dateStrSlashed = dateStrSlashed.replace("-", "/");
2706 }
285a6bda 2707 d = Date.parse(dateStrSlashed);
2769de62 2708 } else if (dateStr.length == 8) { // e.g. '20090712'
285a6bda 2709 // TODO(danvk): remove support for this format. It's confusing.
6a1aa64f
DV
2710 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
2711 + "/" + dateStr.substr(6,2);
285a6bda 2712 d = Date.parse(dateStrSlashed);
2769de62
DV
2713 } else {
2714 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2715 // "2009/07/12 12:34:56"
285a6bda
DV
2716 d = Date.parse(dateStr);
2717 }
2718
2719 if (!d || isNaN(d)) {
2720 self.error("Couldn't parse " + dateStr + " as a date");
2721 }
2722 return d;
2723};
2724
2725/**
2726 * Detects the type of the str (date or numeric) and sets the various
2727 * formatting attributes in this.attrs_ based on this type.
2728 * @param {String} str An x value.
2729 * @private
2730 */
2731Dygraph.prototype.detectTypeFromString_ = function(str) {
2732 var isDate = false;
2733 if (str.indexOf('-') >= 0 ||
2734 str.indexOf('/') >= 0 ||
2735 isNaN(parseFloat(str))) {
2736 isDate = true;
2737 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2738 // TODO(danvk): remove support for this format.
2739 isDate = true;
2740 }
2741
2742 if (isDate) {
2743 this.attrs_.xValueFormatter = Dygraph.dateString_;
2744 this.attrs_.xValueParser = Dygraph.dateParser;
2745 this.attrs_.xTicker = Dygraph.dateTicker;
bf640e56 2746 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
2747 } else {
2748 this.attrs_.xValueFormatter = function(x) { return x; };
2749 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2750 this.attrs_.xTicker = Dygraph.numericTicks;
bf640e56 2751 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
6a1aa64f 2752 }
6a1aa64f
DV
2753};
2754
2755/**
2756 * Parses a string in a special csv format. We expect a csv file where each
2757 * line is a date point, and the first field in each line is the date string.
2758 * We also expect that all remaining fields represent series.
285a6bda 2759 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f
DV
2760 * date, series1, stddev1, series2, stddev2, ...
2761 * @param {Array.<Object>} data See above.
2762 * @private
285a6bda
DV
2763 *
2764 * @return Array.<Object> An array with one entry for each row. These entries
2765 * are an array of cells in that row. The first entry is the parsed x-value for
2766 * the row. The second, third, etc. are the y-values. These can take on one of
2767 * three forms, depending on the CSV and constructor parameters:
2768 * 1. numeric value
2769 * 2. [ value, stddev ]
2770 * 3. [ low value, center value, high value ]
6a1aa64f 2771 */
285a6bda 2772Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f
DV
2773 var ret = [];
2774 var lines = data.split("\n");
3d67f03b
DV
2775
2776 // Use the default delimiter or fall back to a tab if that makes sense.
2777 var delim = this.attr_('delimiter');
2778 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2779 delim = '\t';
2780 }
2781
285a6bda 2782 var start = 0;
6a1aa64f 2783 if (this.labelsFromCSV_) {
285a6bda 2784 start = 1;
3d67f03b 2785 this.attrs_.labels = lines[0].split(delim);
6a1aa64f
DV
2786 }
2787
03b522a4
DV
2788 // Parse the x as a float or return null if it's not a number.
2789 var parseFloatOrNull = function(x) {
41333ec0 2790 var val = parseFloat(x);
1f7f664b
DV
2791 // isFinite() returns false for NaN and +/-Infinity.
2792 return isFinite(val) ? val : null;
03b522a4
DV
2793 };
2794
285a6bda
DV
2795 var xParser;
2796 var defaultParserSet = false; // attempt to auto-detect x value type
2797 var expectedCols = this.attr_("labels").length;
987840a2 2798 var outOfOrder = false;
6a1aa64f
DV
2799 for (var i = start; i < lines.length; i++) {
2800 var line = lines[i];
2801 if (line.length == 0) continue; // skip blank lines
3d67f03b
DV
2802 if (line[0] == '#') continue; // skip comment lines
2803 var inFields = line.split(delim);
285a6bda 2804 if (inFields.length < 2) continue;
6a1aa64f
DV
2805
2806 var fields = [];
285a6bda
DV
2807 if (!defaultParserSet) {
2808 this.detectTypeFromString_(inFields[0]);
2809 xParser = this.attr_("xValueParser");
2810 defaultParserSet = true;
2811 }
2812 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
2813
2814 // If fractions are expected, parse the numbers as "A/B"
2815 if (this.fractions_) {
2816 for (var j = 1; j < inFields.length; j++) {
2817 // TODO(danvk): figure out an appropriate way to flag parse errors.
2818 var vals = inFields[j].split("/");
03b522a4 2819 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
6a1aa64f 2820 }
285a6bda 2821 } else if (this.attr_("errorBars")) {
6a1aa64f
DV
2822 // If there are error bars, values are (value, stddev) pairs
2823 for (var j = 1; j < inFields.length; j += 2)
03b522a4
DV
2824 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2825 parseFloatOrNull(inFields[j + 1])];
9922b78b 2826 } else if (this.attr_("customBars")) {
6a1aa64f
DV
2827 // Bars are a low;center;high tuple
2828 for (var j = 1; j < inFields.length; j++) {
2829 var vals = inFields[j].split(";");
03b522a4
DV
2830 fields[j] = [ parseFloatOrNull(vals[0]),
2831 parseFloatOrNull(vals[1]),
2832 parseFloatOrNull(vals[2]) ];
6a1aa64f
DV
2833 }
2834 } else {
2835 // Values are just numbers
285a6bda 2836 for (var j = 1; j < inFields.length; j++) {
03b522a4 2837 fields[j] = parseFloatOrNull(inFields[j]);
285a6bda 2838 }
6a1aa64f 2839 }
987840a2
DV
2840 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2841 outOfOrder = true;
2842 }
6a1aa64f 2843 ret.push(fields);
285a6bda
DV
2844
2845 if (fields.length != expectedCols) {
2846 this.error("Number of columns in line " + i + " (" + fields.length +
2847 ") does not agree with number of labels (" + expectedCols +
2848 ") " + line);
2849 }
6a1aa64f 2850 }
987840a2
DV
2851
2852 if (outOfOrder) {
2853 this.warn("CSV is out of order; order it correctly to speed loading.");
2854 ret.sort(function(a,b) { return a[0] - b[0] });
2855 }
2856
6a1aa64f
DV
2857 return ret;
2858};
2859
2860/**
285a6bda
DV
2861 * The user has provided their data as a pre-packaged JS array. If the x values
2862 * are numeric, this is the same as dygraphs' internal format. If the x values
2863 * are dates, we need to convert them from Date objects to ms since epoch.
2864 * @param {Array.<Object>} data
2865 * @return {Array.<Object>} data with numeric x values.
2866 */
2867Dygraph.prototype.parseArray_ = function(data) {
2868 // Peek at the first x value to see if it's numeric.
2869 if (data.length == 0) {
2870 this.error("Can't plot empty data set");
2871 return null;
2872 }
2873 if (data[0].length == 0) {
2874 this.error("Data set cannot contain an empty row");
2875 return null;
2876 }
2877
2878 if (this.attr_("labels") == null) {
2879 this.warn("Using default labels. Set labels explicitly via 'labels' " +
2880 "in the options parameter");
2881 this.attrs_.labels = [ "X" ];
2882 for (var i = 1; i < data[0].length; i++) {
2883 this.attrs_.labels.push("Y" + i);
2884 }
2885 }
2886
2dda3850 2887 if (Dygraph.isDateLike(data[0][0])) {
285a6bda
DV
2888 // Some intelligent defaults for a date x-axis.
2889 this.attrs_.xValueFormatter = Dygraph.dateString_;
bf640e56 2890 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
2891 this.attrs_.xTicker = Dygraph.dateTicker;
2892
2893 // Assume they're all dates.
e3ab7b40 2894 var parsedData = Dygraph.clone(data);
285a6bda
DV
2895 for (var i = 0; i < data.length; i++) {
2896 if (parsedData[i].length == 0) {
a323ff4a 2897 this.error("Row " + (1 + i) + " of data is empty");
285a6bda
DV
2898 return null;
2899 }
2900 if (parsedData[i][0] == null
3a909ec5
DV
2901 || typeof(parsedData[i][0].getTime) != 'function'
2902 || isNaN(parsedData[i][0].getTime())) {
be96a1f5 2903 this.error("x value in row " + (1 + i) + " is not a Date");
285a6bda
DV
2904 return null;
2905 }
2906 parsedData[i][0] = parsedData[i][0].getTime();
2907 }
2908 return parsedData;
2909 } else {
2910 // Some intelligent defaults for a numeric x-axis.
2911 this.attrs_.xValueFormatter = function(x) { return x; };
2912 this.attrs_.xTicker = Dygraph.numericTicks;
2913 return data;
2914 }
2915};
2916
2917/**
79420a1e
DV
2918 * Parses a DataTable object from gviz.
2919 * The data is expected to have a first column that is either a date or a
2920 * number. All subsequent columns must be numbers. If there is a clear mismatch
2921 * between this.xValueParser_ and the type of the first column, it will be
a685723c 2922 * fixed. Fills out rawData_.
79420a1e
DV
2923 * @param {Array.<Object>} data See above.
2924 * @private
2925 */
285a6bda 2926Dygraph.prototype.parseDataTable_ = function(data) {
79420a1e
DV
2927 var cols = data.getNumberOfColumns();
2928 var rows = data.getNumberOfRows();
2929
d955e223 2930 var indepType = data.getColumnType(0);
4440f6c8 2931 if (indepType == 'date' || indepType == 'datetime') {
285a6bda
DV
2932 this.attrs_.xValueFormatter = Dygraph.dateString_;
2933 this.attrs_.xValueParser = Dygraph.dateParser;
2934 this.attrs_.xTicker = Dygraph.dateTicker;
bf640e56 2935 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
33127159 2936 } else if (indepType == 'number') {
285a6bda
DV
2937 this.attrs_.xValueFormatter = function(x) { return x; };
2938 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2939 this.attrs_.xTicker = Dygraph.numericTicks;
bf640e56 2940 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
285a6bda 2941 } else {
987840a2
DV
2942 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2943 "column 1 of DataTable input (Got '" + indepType + "')");
79420a1e
DV
2944 return null;
2945 }
2946
a685723c
DV
2947 // Array of the column indices which contain data (and not annotations).
2948 var colIdx = [];
2949 var annotationCols = {}; // data index -> [annotation cols]
2950 var hasAnnotations = false;
2951 for (var i = 1; i < cols; i++) {
2952 var type = data.getColumnType(i);
2953 if (type == 'number') {
2954 colIdx.push(i);
2955 } else if (type == 'string' && this.attr_('displayAnnotations')) {
2956 // This is OK -- it's an annotation column.
2957 var dataIdx = colIdx[colIdx.length - 1];
2958 if (!annotationCols.hasOwnProperty(dataIdx)) {
2959 annotationCols[dataIdx] = [i];
2960 } else {
2961 annotationCols[dataIdx].push(i);
2962 }
2963 hasAnnotations = true;
2964 } else {
2965 this.error("Only 'number' is supported as a dependent type with Gviz." +
2966 " 'string' is only supported if displayAnnotations is true");
2967 }
2968 }
2969
2970 // Read column labels
2971 // TODO(danvk): add support back for errorBars
2972 var labels = [data.getColumnLabel(0)];
2973 for (var i = 0; i < colIdx.length; i++) {
2974 labels.push(data.getColumnLabel(colIdx[i]));
f9348814 2975 if (this.attr_("errorBars")) i += 1;
a685723c
DV
2976 }
2977 this.attrs_.labels = labels;
2978 cols = labels.length;
2979
79420a1e 2980 var ret = [];
987840a2 2981 var outOfOrder = false;
a685723c 2982 var annotations = [];
79420a1e
DV
2983 for (var i = 0; i < rows; i++) {
2984 var row = [];
debe4434
DV
2985 if (typeof(data.getValue(i, 0)) === 'undefined' ||
2986 data.getValue(i, 0) === null) {
129569a5
FD
2987 this.warn("Ignoring row " + i +
2988 " of DataTable because of undefined or null first column.");
debe4434
DV
2989 continue;
2990 }
2991
c21d2c2d 2992 if (indepType == 'date' || indepType == 'datetime') {
d955e223
DV
2993 row.push(data.getValue(i, 0).getTime());
2994 } else {
2995 row.push(data.getValue(i, 0));
2996 }
3e3f84e4 2997 if (!this.attr_("errorBars")) {
a685723c
DV
2998 for (var j = 0; j < colIdx.length; j++) {
2999 var col = colIdx[j];
3000 row.push(data.getValue(i, col));
3001 if (hasAnnotations &&
3002 annotationCols.hasOwnProperty(col) &&
3003 data.getValue(i, annotationCols[col][0]) != null) {
3004 var ann = {};
3005 ann.series = data.getColumnLabel(col);
3006 ann.xval = row[0];
3007 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
3008 ann.text = '';
3009 for (var k = 0; k < annotationCols[col].length; k++) {
3010 if (k) ann.text += "\n";
3011 ann.text += data.getValue(i, annotationCols[col][k]);
3012 }
3013 annotations.push(ann);
3014 }
3e3f84e4
DV
3015 }
3016 } else {
3017 for (var j = 0; j < cols - 1; j++) {
3018 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3019 }
79420a1e 3020 }
987840a2
DV
3021 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3022 outOfOrder = true;
3023 }
1f7f664b
DV
3024
3025 // Strip out infinities, which give dygraphs problems later on.
3026 for (var j = 0; j < row.length; j++) {
3027 if (!isFinite(row[j])) row[j] = null;
3028 }
243d96e8 3029 ret.push(row);
79420a1e 3030 }
987840a2
DV
3031
3032 if (outOfOrder) {
3033 this.warn("DataTable is out of order; order it correctly to speed loading.");
3034 ret.sort(function(a,b) { return a[0] - b[0] });
3035 }
a685723c
DV
3036 this.rawData_ = ret;
3037
3038 if (annotations.length > 0) {
3039 this.setAnnotations(annotations, true);
3040 }
79420a1e
DV
3041}
3042
24e5350c 3043// These functions are all based on MochiKit.
fc80a396
DV
3044Dygraph.update = function (self, o) {
3045 if (typeof(o) != 'undefined' && o !== null) {
3046 for (var k in o) {
85b99f0b
DV
3047 if (o.hasOwnProperty(k)) {
3048 self[k] = o[k];
3049 }
fc80a396
DV
3050 }
3051 }
3052 return self;
3053};
3054
2dda3850
DV
3055Dygraph.isArrayLike = function (o) {
3056 var typ = typeof(o);
3057 if (
c21d2c2d 3058 (typ != 'object' && !(typ == 'function' &&
2dda3850
DV
3059 typeof(o.item) == 'function')) ||
3060 o === null ||
3061 typeof(o.length) != 'number' ||
3062 o.nodeType === 3
3063 ) {
3064 return false;
3065 }
3066 return true;
3067};
3068
3069Dygraph.isDateLike = function (o) {
3070 if (typeof(o) != "object" || o === null ||
3071 typeof(o.getTime) != 'function') {
3072 return false;
3073 }
3074 return true;
3075};
3076
e3ab7b40
DV
3077Dygraph.clone = function(o) {
3078 // TODO(danvk): figure out how MochiKit's version works
3079 var r = [];
3080 for (var i = 0; i < o.length; i++) {
3081 if (Dygraph.isArrayLike(o[i])) {
3082 r.push(Dygraph.clone(o[i]));
3083 } else {
3084 r.push(o[i]);
3085 }
3086 }
3087 return r;
24e5350c
DV
3088};
3089
2dda3850 3090
79420a1e 3091/**
6a1aa64f
DV
3092 * Get the CSV data. If it's in a function, call that function. If it's in a
3093 * file, do an XMLHttpRequest to get it.
3094 * @private
3095 */
285a6bda 3096Dygraph.prototype.start_ = function() {
6a1aa64f 3097 if (typeof this.file_ == 'function') {
285a6bda 3098 // CSV string. Pretend we got it via XHR.
6a1aa64f 3099 this.loadedEvent_(this.file_());
2dda3850 3100 } else if (Dygraph.isArrayLike(this.file_)) {
285a6bda 3101 this.rawData_ = this.parseArray_(this.file_);
26ca7938 3102 this.predraw_();
79420a1e
DV
3103 } else if (typeof this.file_ == 'object' &&
3104 typeof this.file_.getColumnRange == 'function') {
3105 // must be a DataTable from gviz.
a685723c 3106 this.parseDataTable_(this.file_);
26ca7938 3107 this.predraw_();
285a6bda
DV
3108 } else if (typeof this.file_ == 'string') {
3109 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3110 if (this.file_.indexOf('\n') >= 0) {
3111 this.loadedEvent_(this.file_);
3112 } else {
3113 var req = new XMLHttpRequest();
3114 var caller = this;
3115 req.onreadystatechange = function () {
3116 if (req.readyState == 4) {
3117 if (req.status == 200) {
3118 caller.loadedEvent_(req.responseText);
3119 }
6a1aa64f 3120 }
285a6bda 3121 };
6a1aa64f 3122
285a6bda
DV
3123 req.open("GET", this.file_, true);
3124 req.send(null);
3125 }
3126 } else {
3127 this.error("Unknown data format: " + (typeof this.file_));
6a1aa64f
DV
3128 }
3129};
3130
3131/**
3132 * Changes various properties of the graph. These can include:
3133 * <ul>
3134 * <li>file: changes the source data for the graph</li>
3135 * <li>errorBars: changes whether the data contains stddev</li>
3136 * </ul>
3137 * @param {Object} attrs The new properties and values
3138 */
285a6bda
DV
3139Dygraph.prototype.updateOptions = function(attrs) {
3140 // TODO(danvk): this is a mess. Rethink this function.
c65f2303 3141 if ('rollPeriod' in attrs) {
6a1aa64f
DV
3142 this.rollPeriod_ = attrs.rollPeriod;
3143 }
c65f2303 3144 if ('dateWindow' in attrs) {
6a1aa64f
DV
3145 this.dateWindow_ = attrs.dateWindow;
3146 }
450fe64b
DV
3147
3148 // TODO(danvk): validate per-series options.
46dde5f9
DV
3149 // Supported:
3150 // strokeWidth
3151 // pointSize
3152 // drawPoints
3153 // highlightCircleSize
450fe64b 3154
fc80a396 3155 Dygraph.update(this.user_attrs_, attrs);
87bb7958 3156 Dygraph.update(this.renderOptions_, attrs);
285a6bda
DV
3157
3158 this.labelsFromCSV_ = (this.attr_("labels") == null);
3159
3160 // TODO(danvk): this doesn't match the constructor logic
3161 this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
5e50289f 3162 if (attrs['file']) {
6a1aa64f
DV
3163 this.file_ = attrs['file'];
3164 this.start_();
3165 } else {
26ca7938 3166 this.predraw_();
6a1aa64f
DV
3167 }
3168};
3169
3170/**
697e70b2
DV
3171 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3172 * containing div (which has presumably changed size since the dygraph was
3173 * instantiated. If the width/height are specified, the div will be resized.
964f30c6
DV
3174 *
3175 * This is far more efficient than destroying and re-instantiating a
3176 * Dygraph, since it doesn't have to reparse the underlying data.
3177 *
697e70b2
DV
3178 * @param {Number} width Width (in pixels)
3179 * @param {Number} height Height (in pixels)
3180 */
3181Dygraph.prototype.resize = function(width, height) {
e8c7ef86
DV
3182 if (this.resize_lock) {
3183 return;
3184 }
3185 this.resize_lock = true;
3186
697e70b2
DV
3187 if ((width === null) != (height === null)) {
3188 this.warn("Dygraph.resize() should be called with zero parameters or " +
3189 "two non-NULL parameters. Pretending it was zero.");
3190 width = height = null;
3191 }
3192
b16e6369 3193 // TODO(danvk): there should be a clear() method.
697e70b2 3194 this.maindiv_.innerHTML = "";
b16e6369
DV
3195 this.attrs_.labelsDiv = null;
3196
697e70b2
DV
3197 if (width) {
3198 this.maindiv_.style.width = width + "px";
3199 this.maindiv_.style.height = height + "px";
3200 this.width_ = width;
3201 this.height_ = height;
3202 } else {
3203 this.width_ = this.maindiv_.offsetWidth;
3204 this.height_ = this.maindiv_.offsetHeight;
3205 }
3206
3207 this.createInterface_();
26ca7938 3208 this.predraw_();
e8c7ef86
DV
3209
3210 this.resize_lock = false;
697e70b2
DV
3211};
3212
3213/**
6a1aa64f
DV
3214 * Adjusts the number of days in the rolling average. Updates the graph to
3215 * reflect the new averaging period.
3216 * @param {Number} length Number of days over which to average the data.
3217 */
285a6bda 3218Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f 3219 this.rollPeriod_ = length;
26ca7938 3220 this.predraw_();
6a1aa64f 3221};
540d00f1 3222
f8cfec73 3223/**
1cf11047
DV
3224 * Returns a boolean array of visibility statuses.
3225 */
3226Dygraph.prototype.visibility = function() {
3227 // Do lazy-initialization, so that this happens after we know the number of
3228 // data series.
3229 if (!this.attr_("visibility")) {
f38dec01 3230 this.attrs_["visibility"] = [];
1cf11047
DV
3231 }
3232 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
f38dec01 3233 this.attr_("visibility").push(true);
1cf11047
DV
3234 }
3235 return this.attr_("visibility");
3236};
3237
3238/**
3239 * Changes the visiblity of a series.
3240 */
3241Dygraph.prototype.setVisibility = function(num, value) {
3242 var x = this.visibility();
a6c109c1 3243 if (num < 0 || num >= x.length) {
1cf11047
DV
3244 this.warn("invalid series number in setVisibility: " + num);
3245 } else {
3246 x[num] = value;
26ca7938 3247 this.predraw_();
1cf11047
DV
3248 }
3249};
3250
3251/**
5c528fa2
DV
3252 * Update the list of annotations and redraw the chart.
3253 */
a685723c 3254Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3c51ab74
DV
3255 // Only add the annotation CSS rule once we know it will be used.
3256 Dygraph.addAnnotationRule();
5c528fa2
DV
3257 this.annotations_ = ann;
3258 this.layout_.setAnnotations(this.annotations_);
a685723c 3259 if (!suppressDraw) {
26ca7938 3260 this.predraw_();
a685723c 3261 }
5c528fa2
DV
3262};
3263
3264/**
3265 * Return the list of annotations.
3266 */
3267Dygraph.prototype.annotations = function() {
3268 return this.annotations_;
3269};
3270
46dde5f9
DV
3271/**
3272 * Get the index of a series (column) given its name. The first column is the
3273 * x-axis, so the data series start with index 1.
3274 */
3275Dygraph.prototype.indexFromSetName = function(name) {
3276 var labels = this.attr_("labels");
3277 for (var i = 0; i < labels.length; i++) {
3278 if (labels[i] == name) return i;
3279 }
3280 return null;
3281};
3282
5c528fa2
DV
3283Dygraph.addAnnotationRule = function() {
3284 if (Dygraph.addedAnnotationCSS) return;
3285
5c528fa2
DV
3286 var rule = "border: 1px solid black; " +
3287 "background-color: white; " +
3288 "text-align: center;";
22186871
DV
3289
3290 var styleSheetElement = document.createElement("style");
3291 styleSheetElement.type = "text/css";
3292 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3293
3294 // Find the first style sheet that we can access.
3295 // We may not add a rule to a style sheet from another domain for security
3296 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3297 // adds its own style sheets from google.com.
3298 for (var i = 0; i < document.styleSheets.length; i++) {
3299 if (document.styleSheets[i].disabled) continue;
3300 var mysheet = document.styleSheets[i];
3301 try {
3302 if (mysheet.insertRule) { // Firefox
3303 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3304 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3305 } else if (mysheet.addRule) { // IE
3306 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3307 }
3308 Dygraph.addedAnnotationCSS = true;
3309 return;
3310 } catch(err) {
3311 // Was likely a security exception.
3312 }
5c528fa2
DV
3313 }
3314
22186871 3315 this.warn("Unable to add default annotation CSS rule; display may be off.");
5c528fa2
DV
3316}
3317
3318/**
f8cfec73
DV
3319 * Create a new canvas element. This is more complex than a simple
3320 * document.createElement("canvas") because of IE and excanvas.
3321 */
3322Dygraph.createCanvas = function() {
3323 var canvas = document.createElement("canvas");
3324
3325 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
8b8f2d59 3326 if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) {
f8cfec73
DV
3327 canvas = G_vmlCanvasManager.initElement(canvas);
3328 }
3329
3330 return canvas;
3331};
3332
540d00f1
DV
3333
3334/**
285a6bda 3335 * A wrapper around Dygraph that implements the gviz API.
540d00f1
DV
3336 * @param {Object} container The DOM object the visualization should live in.
3337 */
285a6bda 3338Dygraph.GVizChart = function(container) {
540d00f1
DV
3339 this.container = container;
3340}
3341
285a6bda 3342Dygraph.GVizChart.prototype.draw = function(data, options) {
c91f4ae8
DV
3343 // Clear out any existing dygraph.
3344 // TODO(danvk): would it make more sense to simply redraw using the current
3345 // date_graph object?
540d00f1 3346 this.container.innerHTML = '';
c91f4ae8
DV
3347 if (typeof(this.date_graph) != 'undefined') {
3348 this.date_graph.destroy();
3349 }
3350
285a6bda 3351 this.date_graph = new Dygraph(this.container, data, options);
540d00f1 3352}
285a6bda 3353
239c712d
NAG
3354/**
3355 * Google charts compatible setSelection
50360fd0 3356 * Only row selection is supported, all points in the row will be highlighted
239c712d
NAG
3357 * @param {Array} array of the selected cells
3358 * @public
3359 */
3360Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
3361 var row = false;
3362 if (selection_array.length) {
3363 row = selection_array[0].row;
3364 }
3365 this.date_graph.setSelection(row);
3366}
3367
103b7292
NAG
3368/**
3369 * Google charts compatible getSelection implementation
3370 * @return {Array} array of the selected cells
3371 * @public
3372 */
3373Dygraph.GVizChart.prototype.getSelection = function() {
3374 var selection = [];
50360fd0 3375
103b7292 3376 var row = this.date_graph.getSelection();
50360fd0 3377
103b7292 3378 if (row < 0) return selection;
50360fd0 3379
103b7292
NAG
3380 col = 1;
3381 for (var i in this.date_graph.layout_.datasets) {
3382 selection.push({row: row, column: col});
3383 col++;
3384 }
3385
3386 return selection;
3387}
3388
285a6bda
DV
3389// Older pages may still use this name.
3390DateGraph = Dygraph;