Additional minor adjustments to dygraphs to get clickCallbacks to work.
[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
727439b4 39 For further documentation and examples, see http://dygraphs.com/
6a1aa64f
DV
40
41 */
42
43/**
629a09ae
DV
44 * Creates an interactive, zoomable chart.
45 *
46 * @constructor
47 * @param {div | String} div A div or the id of a div into which to construct
48 * the chart.
49 * @param {String | Function} file A file containing CSV data or a function
50 * that returns this data. The most basic expected format for each line is
51 * "YYYY/MM/DD,val1,val2,...". For more information, see
52 * http://dygraphs.com/data.html.
6a1aa64f 53 * @param {Object} attrs Various other attributes, e.g. errorBars determines
629a09ae
DV
54 * whether the input data contains error ranges. For a complete list of
55 * options, see http://dygraphs.com/options.html.
6a1aa64f 56 */
285a6bda
DV
57Dygraph = function(div, data, opts) {
58 if (arguments.length > 0) {
59 if (arguments.length == 4) {
60 // Old versions of dygraphs took in the series labels as a constructor
61 // parameter. This doesn't make sense anymore, but it's easy to continue
62 // to support this usage.
63 this.warn("Using deprecated four-argument dygraph constructor");
64 this.__old_init__(div, data, arguments[2], arguments[3]);
65 } else {
66 this.__init__(div, data, opts);
67 }
68 }
6a1aa64f
DV
69};
70
285a6bda
DV
71Dygraph.NAME = "Dygraph";
72Dygraph.VERSION = "1.2";
73Dygraph.__repr__ = function() {
6a1aa64f
DV
74 return "[" + this.NAME + " " + this.VERSION + "]";
75};
629a09ae
DV
76
77/**
78 * Returns information about the Dygraph class.
79 */
285a6bda 80Dygraph.toString = function() {
6a1aa64f
DV
81 return this.__repr__();
82};
83
84// Various default values
285a6bda
DV
85Dygraph.DEFAULT_ROLL_PERIOD = 1;
86Dygraph.DEFAULT_WIDTH = 480;
87Dygraph.DEFAULT_HEIGHT = 320;
6a1aa64f 88
d59b6f34 89Dygraph.LOG_SCALE = 10;
0037b2a4 90Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE);
3234efcf 91/** @private */
d59b6f34 92Dygraph.log10 = function(x) {
0037b2a4 93 return Math.log(x) / Dygraph.LN_TEN;
d59b6f34 94}
062ef401 95
8e4a6af3 96// Default attribute values.
285a6bda 97Dygraph.DEFAULT_ATTRS = {
a9fc39ab 98 highlightCircleSize: 3,
8e4a6af3 99 pixelsPerXLabel: 60,
c6336f04 100 pixelsPerYLabel: 30,
285a6bda 101
8e4a6af3
DV
102 labelsDivWidth: 250,
103 labelsDivStyles: {
104 // TODO(danvk): move defaults from createStatusMessage_ here.
285a6bda
DV
105 },
106 labelsSeparateLines: false,
bcd3ebf0 107 labelsShowZeroValues: true,
285a6bda 108 labelsKMB: false,
afefbcdb 109 labelsKMG2: false,
d160cc3b 110 showLabelsOnHighlight: true,
12e4c741 111
2e1fcf1a
DV
112 yValueFormatter: function(a,b) { return Dygraph.numberFormatter(a,b); },
113 digitsAfterDecimal: 2,
114 maxNumberWidth: 6,
19589a3e 115 sigFigs: null,
285a6bda
DV
116
117 strokeWidth: 1.0,
8e4a6af3 118
8846615a
DV
119 axisTickSize: 3,
120 axisLabelFontSize: 14,
121 xAxisLabelWidth: 50,
122 yAxisLabelWidth: 50,
bf640e56 123 xAxisLabelFormatter: Dygraph.dateAxisFormatter,
8846615a 124 rightGap: 5,
285a6bda
DV
125
126 showRoller: false,
127 xValueFormatter: Dygraph.dateString_,
128 xValueParser: Dygraph.dateParser,
129 xTicker: Dygraph.dateTicker,
130
3d67f03b
DV
131 delimiter: ',',
132
285a6bda
DV
133 sigma: 2.0,
134 errorBars: false,
135 fractions: false,
136 wilsonInterval: true, // only relevant if fractions is true
5954ef32 137 customBars: false,
43af96e7
NK
138 fillGraph: false,
139 fillAlpha: 0.15,
f032c51d 140 connectSeparatedPoints: false,
43af96e7
NK
141
142 stackedGraph: false,
afdc483f
NN
143 hideOverlayOnMouseOut: true,
144
2fccd3dc
DV
145 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
146 legend: 'onmouseover', // the only relevant value at the moment is 'always'.
147
00c281d4 148 stepPlot: false,
062ef401
JB
149 avoidMinZero: false,
150
ad1798c2 151 // Sizes of the various chart labels.
b4202b3d 152 titleHeight: 28,
86cce9e8
DV
153 xLabelHeight: 18,
154 yLabelWidth: 18,
ad1798c2 155
423f5ed3
DV
156 drawXAxis: true,
157 drawYAxis: true,
158 axisLineColor: "black",
990d6a35
DV
159 axisLineWidth: 0.3,
160 gridLineWidth: 0.3,
161 axisLabelColor: "black",
162 axisLabelFont: "Arial", // TODO(danvk): is this implemented?
163 axisLabelWidth: 50,
164 drawYGrid: true,
165 drawXGrid: true,
166 gridLineColor: "rgb(128,128,128)",
423f5ed3 167
062ef401 168 interactionModel: null // will be set to Dygraph.defaultInteractionModel.
285a6bda
DV
169};
170
171// Various logging levels.
172Dygraph.DEBUG = 1;
173Dygraph.INFO = 2;
174Dygraph.WARNING = 3;
175Dygraph.ERROR = 3;
176
39b0e098
RK
177// Directions for panning and zooming. Use bit operations when combined
178// values are possible.
179Dygraph.HORIZONTAL = 1;
180Dygraph.VERTICAL = 2;
181
5c528fa2
DV
182// Used for initializing annotation CSS rules only once.
183Dygraph.addedAnnotationCSS = false;
184
2cf95fff 185/**
629a09ae 186 * @private
2cf95fff
RK
187 * Return the 2d context for a dygraph canvas.
188 *
189 * This method is only exposed for the sake of replacing the function in
190 * automated tests, e.g.
191 *
192 * var oldFunc = Dygraph.getContext();
193 * Dygraph.getContext = function(canvas) {
194 * var realContext = oldFunc(canvas);
195 * return new Proxy(realContext);
196 * };
197 */
198Dygraph.getContext = function(canvas) {
199 return canvas.getContext("2d");
200};
201
285a6bda
DV
202Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
203 // Labels is no longer a constructor parameter, since it's typically set
204 // directly from the data source. It also conains a name for the x-axis,
205 // which the previous constructor form did not.
206 if (labels != null) {
207 var new_labels = ["Date"];
208 for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]);
fc80a396 209 Dygraph.update(attrs, { 'labels': new_labels });
285a6bda
DV
210 }
211 this.__init__(div, file, attrs);
8e4a6af3
DV
212};
213
6a1aa64f 214/**
285a6bda 215 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
7aedf6fe 216 * and context &lt;canvas&gt; inside of it. See the constructor for details.
6a1aa64f 217 * on the parameters.
12e4c741 218 * @param {Element} div the Element to render the graph into.
6a1aa64f 219 * @param {String | Function} file Source data
6a1aa64f
DV
220 * @param {Object} attrs Miscellaneous other options
221 * @private
222 */
285a6bda 223Dygraph.prototype.__init__ = function(div, file, attrs) {
a2c8fff4
DV
224 // Hack for IE: if we're using excanvas and the document hasn't finished
225 // loading yet (and hence may not have initialized whatever it needs to
226 // initialize), then keep calling this routine periodically until it has.
227 if (/MSIE/.test(navigator.userAgent) && !window.opera &&
228 typeof(G_vmlCanvasManager) != 'undefined' &&
229 document.readyState != 'complete') {
230 var self = this;
231 setTimeout(function() { self.__init__(div, file, attrs) }, 100);
232 }
233
285a6bda
DV
234 // Support two-argument constructor
235 if (attrs == null) { attrs = {}; }
236
6a1aa64f 237 // Copy the important bits into the object
32988383 238 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
6a1aa64f 239 this.maindiv_ = div;
6a1aa64f 240 this.file_ = file;
285a6bda 241 this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD;
6a1aa64f 242 this.previousVerticalX_ = -1;
6a1aa64f 243 this.fractions_ = attrs.fractions || false;
6a1aa64f 244 this.dateWindow_ = attrs.dateWindow || null;
8b83c6cc 245
6a1aa64f 246 this.wilsonInterval_ = attrs.wilsonInterval || true;
fe0b7c03 247 this.is_initial_draw_ = true;
5c528fa2 248 this.annotations_ = [];
7aedf6fe 249
45f2c689 250 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
57baab03
NN
251 this.zoomed_x_ = false;
252 this.zoomed_y_ = false;
45f2c689 253
f7d6278e
DV
254 // Clear the div. This ensure that, if multiple dygraphs are passed the same
255 // div, then only one will be drawn.
256 div.innerHTML = "";
257
c21d2c2d 258 // If the div isn't already sized then inherit from our attrs or
259 // give it a default size.
285a6bda 260 if (div.style.width == '') {
ddd1b11f 261 div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px";
285a6bda
DV
262 }
263 if (div.style.height == '') {
ddd1b11f 264 div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px";
32988383 265 }
285a6bda
DV
266 this.width_ = parseInt(div.style.width, 10);
267 this.height_ = parseInt(div.style.height, 10);
c21d2c2d 268 // The div might have been specified as percent of the current window size,
269 // convert that to an appropriate number of pixels.
270 if (div.style.width.indexOf("%") == div.style.width.length - 1) {
c6f45033 271 this.width_ = div.offsetWidth;
c21d2c2d 272 }
273 if (div.style.height.indexOf("%") == div.style.height.length - 1) {
c6f45033 274 this.height_ = div.offsetHeight;
c21d2c2d 275 }
32988383 276
10a6456d
DV
277 if (this.width_ == 0) {
278 this.error("dygraph has zero width. Please specify a width in pixels.");
279 }
280 if (this.height_ == 0) {
281 this.error("dygraph has zero height. Please specify a height in pixels.");
282 }
283
344ba8c0 284 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
43af96e7
NK
285 if (attrs['stackedGraph']) {
286 attrs['fillGraph'] = true;
287 // TODO(nikhilk): Add any other stackedGraph checks here.
288 }
289
285a6bda
DV
290 // Dygraphs has many options, some of which interact with one another.
291 // To keep track of everything, we maintain two sets of options:
292 //
c21d2c2d 293 // this.user_attrs_ only options explicitly set by the user.
285a6bda
DV
294 // this.attrs_ defaults, options derived from user_attrs_, data.
295 //
296 // Options are then accessed this.attr_('attr'), which first looks at
297 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
298 // defaults without overriding behavior that the user specifically asks for.
299 this.user_attrs_ = {};
fc80a396 300 Dygraph.update(this.user_attrs_, attrs);
6a1aa64f 301
285a6bda 302 this.attrs_ = {};
fc80a396 303 Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
6a1aa64f 304
16269f6e 305 this.boundaryIds_ = [];
6a1aa64f 306
6a1aa64f
DV
307 // Create the containing DIV and other interactive elements
308 this.createInterface_();
309
738fc797 310 this.start_();
6a1aa64f
DV
311};
312
dcb25130
NN
313/**
314 * Returns the zoomed status of the chart for one or both axes.
315 *
316 * Axis is an optional parameter. Can be set to 'x' or 'y'.
317 *
318 * The zoomed status for an axis is set whenever a user zooms using the mouse
e5152598 319 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
dcb25130
NN
320 * option is also specified).
321 */
57baab03
NN
322Dygraph.prototype.isZoomed = function(axis) {
323 if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
324 if (axis == 'x') return this.zoomed_x_;
325 if (axis == 'y') return this.zoomed_y_;
326 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
327};
328
629a09ae
DV
329/**
330 * Returns information about the Dygraph object, including its containing ID.
331 */
22bd1dfb
RK
332Dygraph.prototype.toString = function() {
333 var maindiv = this.maindiv_;
334 var id = (maindiv && maindiv.id) ? maindiv.id : maindiv
335 return "[Dygraph " + id + "]";
336}
337
629a09ae
DV
338/**
339 * @private
340 * Returns the value of an option. This may be set by the user (either in the
341 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
342 * per-series value.
343 * @param { String } name The name of the option, e.g. 'rollPeriod'.
344 * @param { String } [seriesName] The name of the series to which the option
345 * will be applied. If no per-series value of this option is available, then
346 * the global value is returned. This is optional.
347 * @return { ... } The value of the option.
348 */
227b93cc 349Dygraph.prototype.attr_ = function(name, seriesName) {
028ddf8a
DV
350// <REMOVE_FOR_COMBINED>
351 if (typeof(Dygraph.OPTIONS_REFERENCE) === 'undefined') {
352 this.error('Must include options reference JS for testing');
353 } else if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(name)) {
354 this.error('Dygraphs is using property ' + name + ', which has no entry ' +
355 'in the Dygraphs.OPTIONS_REFERENCE listing.');
356 // Only log this error once.
357 Dygraph.OPTIONS_REFERENCE[name] = true;
358 }
359// </REMOVE_FOR_COMBINED>
227b93cc
DV
360 if (seriesName &&
361 typeof(this.user_attrs_[seriesName]) != 'undefined' &&
362 this.user_attrs_[seriesName] != null &&
363 typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
364 return this.user_attrs_[seriesName][name];
450fe64b 365 } else if (typeof(this.user_attrs_[name]) != 'undefined') {
285a6bda
DV
366 return this.user_attrs_[name];
367 } else if (typeof(this.attrs_[name]) != 'undefined') {
368 return this.attrs_[name];
369 } else {
370 return null;
371 }
372};
373
374// TODO(danvk): any way I can get the line numbers to be this.warn call?
629a09ae
DV
375/**
376 * @private
377 * Log an error on the JS console at the given severity.
378 * @param { Integer } severity One of Dygraph.{DEBUG,INFO,WARNING,ERROR}
379 * @param { String } The message to log.
380 */
285a6bda
DV
381Dygraph.prototype.log = function(severity, message) {
382 if (typeof(console) != 'undefined') {
383 switch (severity) {
384 case Dygraph.DEBUG:
385 console.debug('dygraphs: ' + message);
386 break;
387 case Dygraph.INFO:
388 console.info('dygraphs: ' + message);
389 break;
390 case Dygraph.WARNING:
391 console.warn('dygraphs: ' + message);
392 break;
393 case Dygraph.ERROR:
394 console.error('dygraphs: ' + message);
395 break;
396 }
397 }
629a09ae
DV
398};
399
3234efcf 400/** @private */
285a6bda
DV
401Dygraph.prototype.info = function(message) {
402 this.log(Dygraph.INFO, message);
629a09ae
DV
403};
404
3234efcf 405/** @private */
285a6bda
DV
406Dygraph.prototype.warn = function(message) {
407 this.log(Dygraph.WARNING, message);
629a09ae
DV
408};
409
3234efcf 410/** @private */
285a6bda
DV
411Dygraph.prototype.error = function(message) {
412 this.log(Dygraph.ERROR, message);
629a09ae 413};
285a6bda 414
6a1aa64f
DV
415/**
416 * Returns the current rolling period, as set by the user or an option.
6faebb69 417 * @return {Number} The number of points in the rolling window
6a1aa64f 418 */
285a6bda 419Dygraph.prototype.rollPeriod = function() {
6a1aa64f 420 return this.rollPeriod_;
76171648
DV
421};
422
599fb4ad
DV
423/**
424 * Returns the currently-visible x-range. This can be affected by zooming,
425 * panning or a call to updateOptions.
426 * Returns a two-element array: [left, right].
427 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
428 */
429Dygraph.prototype.xAxisRange = function() {
4cac8c7a
RK
430 return this.dateWindow_ ? this.dateWindow_ : this.xAxisExtremes();
431};
599fb4ad 432
4cac8c7a
RK
433/**
434 * Returns the lower- and upper-bound x-axis values of the
435 * data set.
436 */
437Dygraph.prototype.xAxisExtremes = function() {
599fb4ad
DV
438 var left = this.rawData_[0][0];
439 var right = this.rawData_[this.rawData_.length - 1][0];
440 return [left, right];
441};
442
3230c662 443/**
d58ae307
DV
444 * Returns the currently-visible y-range for an axis. This can be affected by
445 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
446 * called with no arguments, returns the range of the first axis.
3230c662
DV
447 * Returns a two-element array: [bottom, top].
448 */
d58ae307 449Dygraph.prototype.yAxisRange = function(idx) {
d63e6799 450 if (typeof(idx) == "undefined") idx = 0;
d58ae307
DV
451 if (idx < 0 || idx >= this.axes_.length) return null;
452 return [ this.axes_[idx].computedValueRange[0],
453 this.axes_[idx].computedValueRange[1] ];
454};
455
456/**
457 * Returns the currently-visible y-ranges for each axis. This can be affected by
458 * zooming, panning, calls to updateOptions, etc.
459 * Returns an array of [bottom, top] pairs, one for each y-axis.
460 */
461Dygraph.prototype.yAxisRanges = function() {
462 var ret = [];
463 for (var i = 0; i < this.axes_.length; i++) {
464 ret.push(this.yAxisRange(i));
465 }
466 return ret;
3230c662
DV
467};
468
d58ae307 469// TODO(danvk): use these functions throughout dygraphs.
3230c662
DV
470/**
471 * Convert from data coordinates to canvas/div X/Y coordinates.
d58ae307
DV
472 * If specified, do this conversion for the coordinate system of a particular
473 * axis. Uses the first axis by default.
3230c662 474 * Returns a two-element array: [X, Y]
ff022deb 475 *
0747928a 476 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
ff022deb 477 * instead of toDomCoords(null, y, axis).
3230c662 478 */
d58ae307 479Dygraph.prototype.toDomCoords = function(x, y, axis) {
ff022deb
RK
480 return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
481};
482
483/**
484 * Convert from data x coordinates to canvas/div X coordinate.
485 * If specified, do this conversion for the coordinate system of a particular
0037b2a4
RK
486 * axis.
487 * Returns a single value or null if x is null.
ff022deb
RK
488 */
489Dygraph.prototype.toDomXCoord = function(x) {
490 if (x == null) {
491 return null;
492 };
493
3230c662 494 var area = this.plotter_.area;
ff022deb
RK
495 var xRange = this.xAxisRange();
496 return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
497}
3230c662 498
ff022deb
RK
499/**
500 * Convert from data x coordinates to canvas/div Y coordinate and optional
501 * axis. Uses the first axis by default.
502 *
503 * returns a single value or null if y is null.
504 */
505Dygraph.prototype.toDomYCoord = function(y, axis) {
0747928a 506 var pct = this.toPercentYCoord(y, axis);
3230c662 507
ff022deb
RK
508 if (pct == null) {
509 return null;
510 }
e4416fb9 511 var area = this.plotter_.area;
ff022deb
RK
512 return area.y + pct * area.h;
513}
3230c662
DV
514
515/**
516 * Convert from canvas/div coords to data coordinates.
d58ae307
DV
517 * If specified, do this conversion for the coordinate system of a particular
518 * axis. Uses the first axis by default.
ff022deb
RK
519 * Returns a two-element array: [X, Y].
520 *
0747928a 521 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
ff022deb 522 * instead of toDataCoords(null, y, axis).
3230c662 523 */
d58ae307 524Dygraph.prototype.toDataCoords = function(x, y, axis) {
ff022deb
RK
525 return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
526};
527
528/**
529 * Convert from canvas/div x coordinate to data coordinate.
530 *
531 * If x is null, this returns null.
532 */
533Dygraph.prototype.toDataXCoord = function(x) {
534 if (x == null) {
535 return null;
3230c662
DV
536 }
537
ff022deb
RK
538 var area = this.plotter_.area;
539 var xRange = this.xAxisRange();
540 return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
541};
542
543/**
544 * Convert from canvas/div y coord to value.
545 *
546 * If y is null, this returns null.
547 * if axis is null, this uses the first axis.
548 */
549Dygraph.prototype.toDataYCoord = function(y, axis) {
550 if (y == null) {
551 return null;
3230c662
DV
552 }
553
ff022deb
RK
554 var area = this.plotter_.area;
555 var yRange = this.yAxisRange(axis);
556
b70247dc
RK
557 if (typeof(axis) == "undefined") axis = 0;
558 if (!this.axes_[axis].logscale) {
ff022deb
RK
559 return yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]);
560 } else {
561 // Computing the inverse of toDomCoord.
562 var pct = (y - area.y) / area.h
563
564 // Computing the inverse of toPercentYCoord. The function was arrived at with
565 // the following steps:
566 //
567 // Original calcuation:
d59b6f34 568 // pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
ff022deb
RK
569 //
570 // Move denominator to both sides:
d59b6f34 571 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
ff022deb
RK
572 //
573 // subtract logr1, and take the negative value.
d59b6f34 574 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
ff022deb
RK
575 //
576 // Swap both sides of the equation, and we can compute the log of the
577 // return value. Which means we just need to use that as the exponent in
578 // e^exponent.
d59b6f34 579 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
ff022deb 580
d59b6f34
RK
581 var logr1 = Dygraph.log10(yRange[1]);
582 var exponent = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
583 var value = Math.pow(Dygraph.LOG_SCALE, exponent);
ff022deb
RK
584 return value;
585 }
3230c662
DV
586};
587
e99fde05 588/**
ff022deb 589 * Converts a y for an axis to a percentage from the top to the
4cac8c7a 590 * bottom of the drawing area.
ff022deb
RK
591 *
592 * If the coordinate represents a value visible on the canvas, then
593 * the value will be between 0 and 1, where 0 is the top of the canvas.
594 * However, this method will return values outside the range, as
595 * values can fall outside the canvas.
596 *
597 * If y is null, this returns null.
598 * if axis is null, this uses the first axis.
629a09ae
DV
599 *
600 * @param { Number } y The data y-coordinate.
601 * @param { Number } [axis] The axis number on which the data coordinate lives.
602 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
ff022deb
RK
603 */
604Dygraph.prototype.toPercentYCoord = function(y, axis) {
605 if (y == null) {
606 return null;
607 }
7d0e7a0d 608 if (typeof(axis) == "undefined") axis = 0;
ff022deb
RK
609
610 var area = this.plotter_.area;
611 var yRange = this.yAxisRange(axis);
612
613 var pct;
7d0e7a0d 614 if (!this.axes_[axis].logscale) {
4cac8c7a
RK
615 // yRange[1] - y is unit distance from the bottom.
616 // yRange[1] - yRange[0] is the scale of the range.
ff022deb
RK
617 // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
618 pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
619 } else {
d59b6f34
RK
620 var logr1 = Dygraph.log10(yRange[1]);
621 pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0]));
ff022deb
RK
622 }
623 return pct;
624}
625
626/**
4cac8c7a
RK
627 * Converts an x value to a percentage from the left to the right of
628 * the drawing area.
629 *
630 * If the coordinate represents a value visible on the canvas, then
631 * the value will be between 0 and 1, where 0 is the left of the canvas.
632 * However, this method will return values outside the range, as
633 * values can fall outside the canvas.
634 *
635 * If x is null, this returns null.
629a09ae
DV
636 * @param { Number } x The data x-coordinate.
637 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
4cac8c7a
RK
638 */
639Dygraph.prototype.toPercentXCoord = function(x) {
640 if (x == null) {
641 return null;
642 }
643
4cac8c7a 644 var xRange = this.xAxisRange();
965a030e 645 return (x - xRange[0]) / (xRange[1] - xRange[0]);
629a09ae 646};
4cac8c7a
RK
647
648/**
e99fde05 649 * Returns the number of columns (including the independent variable).
629a09ae 650 * @return { Integer } The number of columns.
e99fde05
DV
651 */
652Dygraph.prototype.numColumns = function() {
653 return this.rawData_[0].length;
654};
655
656/**
657 * Returns the number of rows (excluding any header/label row).
629a09ae 658 * @return { Integer } The number of rows, less any header.
e99fde05
DV
659 */
660Dygraph.prototype.numRows = function() {
661 return this.rawData_.length;
662};
663
664/**
665 * Returns the value in the given row and column. If the row and column exceed
666 * the bounds on the data, returns null. Also returns null if the value is
667 * missing.
629a09ae
DV
668 * @param { Number} row The row number of the data (0-based). Row 0 is the
669 * first row of data, not a header row.
670 * @param { Number} col The column number of the data (0-based)
671 * @return { Number } The value in the specified cell or null if the row/col
672 * were out of range.
e99fde05
DV
673 */
674Dygraph.prototype.getValue = function(row, col) {
675 if (row < 0 || row > this.rawData_.length) return null;
676 if (col < 0 || col > this.rawData_[row].length) return null;
677
678 return this.rawData_[row][col];
679};
680
629a09ae
DV
681/**
682 * @private
683 * Add an event handler. This smooths a difference between IE and the rest of
684 * the world.
685 * @param { DOM element } el The element to add the event to.
686 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
687 * @param { Function } fn The function to call on the event. The function takes
688 * one parameter: the event object.
689 */
76171648
DV
690Dygraph.addEvent = function(el, evt, fn) {
691 var normed_fn = function(e) {
692 if (!e) var e = window.event;
693 fn(e);
694 };
695 if (window.addEventListener) { // Mozilla, Netscape, Firefox
696 el.addEventListener(evt, normed_fn, false);
697 } else { // IE
698 el.attachEvent('on' + evt, normed_fn);
699 }
700};
6a1aa64f 701
062ef401 702
629a09ae
DV
703/**
704 * @private
705 * Cancels further processing of an event. This is useful to prevent default
706 * browser actions, e.g. highlighting text on a double-click.
707 * Based on the article at
708 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
709 * @param { Event } e The event whose normal behavior should be canceled.
710 */
062ef401
JB
711Dygraph.cancelEvent = function(e) {
712 e = e ? e : window.event;
713 if (e.stopPropagation) {
714 e.stopPropagation();
715 }
716 if (e.preventDefault) {
717 e.preventDefault();
718 }
719 e.cancelBubble = true;
720 e.cancel = true;
721 e.returnValue = false;
722 return false;
629a09ae 723};
062ef401
JB
724
725
6a1aa64f 726/**
285a6bda 727 * Generates interface elements for the Dygraph: a containing div, a div to
6a1aa64f 728 * display the current point, and a textbox to adjust the rolling average
697e70b2 729 * period. Also creates the Renderer/Layout elements.
6a1aa64f
DV
730 * @private
731 */
285a6bda 732Dygraph.prototype.createInterface_ = function() {
6a1aa64f
DV
733 // Create the all-enclosing graph div
734 var enclosing = this.maindiv_;
735
b0c3b730
DV
736 this.graphDiv = document.createElement("div");
737 this.graphDiv.style.width = this.width_ + "px";
738 this.graphDiv.style.height = this.height_ + "px";
739 enclosing.appendChild(this.graphDiv);
740
741 // Create the canvas for interactive parts of the chart.
f8cfec73 742 this.canvas_ = Dygraph.createCanvas();
b0c3b730
DV
743 this.canvas_.style.position = "absolute";
744 this.canvas_.width = this.width_;
745 this.canvas_.height = this.height_;
f8cfec73
DV
746 this.canvas_.style.width = this.width_ + "px"; // for IE
747 this.canvas_.style.height = this.height_ + "px"; // for IE
b0c3b730 748
2cf95fff
RK
749 this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
750
b0c3b730 751 // ... and for static parts of the chart.
6a1aa64f 752 this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
2cf95fff 753 this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
76171648 754
eb7bf005
EC
755 // The interactive parts of the graph are drawn on top of the chart.
756 this.graphDiv.appendChild(this.hidden_);
757 this.graphDiv.appendChild(this.canvas_);
758 this.mouseEventElement_ = this.canvas_;
759
76171648 760 var dygraph = this;
eb7bf005 761 Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
76171648
DV
762 dygraph.mouseMove_(e);
763 });
eb7bf005 764 Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
76171648
DV
765 dygraph.mouseOut_(e);
766 });
697e70b2
DV
767
768 // Create the grapher
b2c9222a 769 this.layout_ = new DygraphLayout(this);
697e70b2 770
697e70b2 771 this.createStatusMessage_();
697e70b2 772 this.createDragInterface_();
4cfcc38c
DV
773};
774
775/**
776 * Detach DOM elements in the dygraph and null out all data references.
777 * Calling this when you're done with a dygraph can dramatically reduce memory
778 * usage. See, e.g., the tests/perf.html example.
779 */
780Dygraph.prototype.destroy = function() {
781 var removeRecursive = function(node) {
782 while (node.hasChildNodes()) {
783 removeRecursive(node.firstChild);
784 node.removeChild(node.firstChild);
785 }
786 };
787 removeRecursive(this.maindiv_);
788
789 var nullOut = function(obj) {
790 for (var n in obj) {
791 if (typeof(obj[n]) === 'object') {
792 obj[n] = null;
793 }
794 }
795 };
796
797 // These may not all be necessary, but it can't hurt...
798 nullOut(this.layout_);
799 nullOut(this.plotter_);
800 nullOut(this);
801};
6a1aa64f
DV
802
803/**
629a09ae
DV
804 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
805 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
806 * or the zoom rectangles) is done on this.canvas_.
8846615a 807 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
6a1aa64f
DV
808 * @return {Object} The newly-created canvas
809 * @private
810 */
285a6bda 811Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
f8cfec73 812 var h = Dygraph.createCanvas();
6a1aa64f 813 h.style.position = "absolute";
9ac5e4ae
DV
814 // TODO(danvk): h should be offset from canvas. canvas needs to include
815 // some extra area to make it easier to zoom in on the far left and far
816 // right. h needs to be precisely the plot area, so that clipping occurs.
6a1aa64f
DV
817 h.style.top = canvas.style.top;
818 h.style.left = canvas.style.left;
819 h.width = this.width_;
820 h.height = this.height_;
f8cfec73
DV
821 h.style.width = this.width_ + "px"; // for IE
822 h.style.height = this.height_ + "px"; // for IE
6a1aa64f
DV
823 return h;
824};
825
629a09ae
DV
826/**
827 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
828 * is used to generate default series colors which are evenly spaced on the
829 * color wheel.
830 * @param { Number } hue Range is 0.0-1.0.
831 * @param { Number } saturation Range is 0.0-1.0.
832 * @param { Number } value Range is 0.0-1.0.
833 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
834 * @private
835 */
f474c2a3
DV
836Dygraph.hsvToRGB = function (hue, saturation, value) {
837 var red;
838 var green;
839 var blue;
840 if (saturation === 0) {
841 red = value;
842 green = value;
843 blue = value;
844 } else {
845 var i = Math.floor(hue * 6);
846 var f = (hue * 6) - i;
847 var p = value * (1 - saturation);
848 var q = value * (1 - (saturation * f));
849 var t = value * (1 - (saturation * (1 - f)));
850 switch (i) {
851 case 1: red = q; green = value; blue = p; break;
852 case 2: red = p; green = value; blue = t; break;
853 case 3: red = p; green = q; blue = value; break;
854 case 4: red = t; green = p; blue = value; break;
855 case 5: red = value; green = p; blue = q; break;
856 case 6: // fall through
857 case 0: red = value; green = t; blue = p; break;
858 }
859 }
860 red = Math.floor(255 * red + 0.5);
861 green = Math.floor(255 * green + 0.5);
862 blue = Math.floor(255 * blue + 0.5);
863 return 'rgb(' + red + ',' + green + ',' + blue + ')';
864};
865
866
6a1aa64f
DV
867/**
868 * Generate a set of distinct colors for the data series. This is done with a
869 * color wheel. Saturation/Value are customizable, and the hue is
870 * equally-spaced around the color wheel. If a custom set of colors is
871 * specified, that is used instead.
6a1aa64f
DV
872 * @private
873 */
285a6bda 874Dygraph.prototype.setColors_ = function() {
285a6bda 875 var num = this.attr_("labels").length - 1;
6a1aa64f 876 this.colors_ = [];
285a6bda
DV
877 var colors = this.attr_('colors');
878 if (!colors) {
879 var sat = this.attr_('colorSaturation') || 1.0;
880 var val = this.attr_('colorValue') || 0.5;
2aa21213 881 var half = Math.ceil(num / 2);
6a1aa64f 882 for (var i = 1; i <= num; i++) {
ec1959eb 883 if (!this.visibility()[i-1]) continue;
43af96e7 884 // alternate colors for high contrast.
2aa21213 885 var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
43af96e7
NK
886 var hue = (1.0 * idx/ (1 + num));
887 this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
6a1aa64f
DV
888 }
889 } else {
890 for (var i = 0; i < num; i++) {
ec1959eb 891 if (!this.visibility()[i]) continue;
285a6bda 892 var colorStr = colors[i % colors.length];
f474c2a3 893 this.colors_.push(colorStr);
6a1aa64f
DV
894 }
895 }
600d841a
DV
896
897 this.plotter_.setColors(this.colors_);
629a09ae 898};
6a1aa64f 899
43af96e7
NK
900/**
901 * Return the list of colors. This is either the list of colors passed in the
629a09ae 902 * attributes or the autogenerated list of rgb(r,g,b) strings.
43af96e7
NK
903 * @return {Array<string>} The list of colors.
904 */
905Dygraph.prototype.getColors = function() {
906 return this.colors_;
907};
908
5e60386d
DV
909// The following functions are from quirksmode.org with a modification for Safari from
910// http://blog.firetree.net/2005/07/04/javascript-find-position/
3df0ccf0 911// http://www.quirksmode.org/js/findpos.html
629a09ae 912
c39e1d93 913/** @private */
3df0ccf0
DV
914Dygraph.findPosX = function(obj) {
915 var curleft = 0;
5e60386d 916 if(obj.offsetParent)
50360fd0 917 while(1)
5e60386d 918 {
3df0ccf0 919 curleft += obj.offsetLeft;
5e60386d
DV
920 if(!obj.offsetParent)
921 break;
3df0ccf0
DV
922 obj = obj.offsetParent;
923 }
5e60386d 924 else if(obj.x)
3df0ccf0
DV
925 curleft += obj.x;
926 return curleft;
927};
c21d2c2d 928
629a09ae 929
c39e1d93 930/** @private */
3df0ccf0
DV
931Dygraph.findPosY = function(obj) {
932 var curtop = 0;
5e60386d
DV
933 if(obj.offsetParent)
934 while(1)
935 {
3df0ccf0 936 curtop += obj.offsetTop;
5e60386d
DV
937 if(!obj.offsetParent)
938 break;
3df0ccf0
DV
939 obj = obj.offsetParent;
940 }
5e60386d 941 else if(obj.y)
3df0ccf0
DV
942 curtop += obj.y;
943 return curtop;
944};
945
5e60386d 946
6a1aa64f
DV
947/**
948 * Create the div that contains information on the selected point(s)
949 * This goes in the top right of the canvas, unless an external div has already
950 * been specified.
951 * @private
952 */
fedbd797 953Dygraph.prototype.createStatusMessage_ = function() {
954 var userLabelsDiv = this.user_attrs_["labelsDiv"];
955 if (userLabelsDiv && null != userLabelsDiv
956 && (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
957 this.user_attrs_["labelsDiv"] = document.getElementById(userLabelsDiv);
958 }
285a6bda
DV
959 if (!this.attr_("labelsDiv")) {
960 var divWidth = this.attr_('labelsDivWidth');
b0c3b730 961 var messagestyle = {
6a1aa64f
DV
962 "position": "absolute",
963 "fontSize": "14px",
964 "zIndex": 10,
965 "width": divWidth + "px",
966 "top": "0px",
8846615a 967 "left": (this.width_ - divWidth - 2) + "px",
6a1aa64f
DV
968 "background": "white",
969 "textAlign": "left",
b0c3b730 970 "overflow": "hidden"};
fc80a396 971 Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
b0c3b730
DV
972 var div = document.createElement("div");
973 for (var name in messagestyle) {
85b99f0b
DV
974 if (messagestyle.hasOwnProperty(name)) {
975 div.style[name] = messagestyle[name];
976 }
b0c3b730
DV
977 }
978 this.graphDiv.appendChild(div);
285a6bda 979 this.attrs_.labelsDiv = div;
6a1aa64f
DV
980 }
981};
982
983/**
ad1798c2
DV
984 * Position the labels div so that:
985 * - its right edge is flush with the right edge of the charting area
986 * - its top edge is flush with the top edge of the charting area
629a09ae 987 * @private
0abfbd7e
DV
988 */
989Dygraph.prototype.positionLabelsDiv_ = function() {
990 // Don't touch a user-specified labelsDiv.
991 if (this.user_attrs_.hasOwnProperty("labelsDiv")) return;
992
993 var area = this.plotter_.area;
994 var div = this.attr_("labelsDiv");
8c21adcf 995 div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
ad1798c2 996 div.style.top = area.y + "px";
0abfbd7e
DV
997};
998
999/**
6a1aa64f 1000 * Create the text box to adjust the averaging period
6a1aa64f
DV
1001 * @private
1002 */
285a6bda 1003Dygraph.prototype.createRollInterface_ = function() {
8c69de65
DV
1004 // Create a roller if one doesn't exist already.
1005 if (!this.roller_) {
1006 this.roller_ = document.createElement("input");
1007 this.roller_.type = "text";
1008 this.roller_.style.display = "none";
1009 this.graphDiv.appendChild(this.roller_);
1010 }
1011
1012 var display = this.attr_('showRoller') ? 'block' : 'none';
26ca7938 1013
0c38f187 1014 var area = this.plotter_.area;
b0c3b730
DV
1015 var textAttr = { "position": "absolute",
1016 "zIndex": 10,
0c38f187
DV
1017 "top": (area.y + area.h - 25) + "px",
1018 "left": (area.x + 1) + "px",
b0c3b730 1019 "display": display
6a1aa64f 1020 };
8c69de65
DV
1021 this.roller_.size = "2";
1022 this.roller_.value = this.rollPeriod_;
b0c3b730 1023 for (var name in textAttr) {
85b99f0b 1024 if (textAttr.hasOwnProperty(name)) {
8c69de65 1025 this.roller_.style[name] = textAttr[name];
85b99f0b 1026 }
b0c3b730
DV
1027 }
1028
76171648 1029 var dygraph = this;
8c69de65 1030 this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); };
76171648
DV
1031};
1032
629a09ae
DV
1033/**
1034 * @private
1035 * Returns the x-coordinate of the event in a coordinate system where the
1036 * top-left corner of the page (not the window) is (0,0).
1037 * Taken from MochiKit.Signal
1038 */
76171648
DV
1039Dygraph.pageX = function(e) {
1040 if (e.pageX) {
1041 return (!e.pageX || e.pageX < 0) ? 0 : e.pageX;
1042 } else {
1043 var de = document;
1044 var b = document.body;
1045 return e.clientX +
1046 (de.scrollLeft || b.scrollLeft) -
1047 (de.clientLeft || 0);
1048 }
1049};
1050
629a09ae
DV
1051/**
1052 * @private
1053 * Returns the y-coordinate of the event in a coordinate system where the
1054 * top-left corner of the page (not the window) is (0,0).
1055 * Taken from MochiKit.Signal
1056 */
76171648
DV
1057Dygraph.pageY = function(e) {
1058 if (e.pageY) {
1059 return (!e.pageY || e.pageY < 0) ? 0 : e.pageY;
1060 } else {
1061 var de = document;
1062 var b = document.body;
1063 return e.clientY +
1064 (de.scrollTop || b.scrollTop) -
1065 (de.clientTop || 0);
1066 }
1067};
6a1aa64f 1068
629a09ae
DV
1069/**
1070 * @private
1071 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1072 * canvas (i.e. DOM Coords).
1073 */
062ef401
JB
1074Dygraph.prototype.dragGetX_ = function(e, context) {
1075 return Dygraph.pageX(e) - context.px
1076};
bce01b0f 1077
629a09ae
DV
1078/**
1079 * @private
1080 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1081 * canvas (i.e. DOM Coords).
1082 */
062ef401
JB
1083Dygraph.prototype.dragGetY_ = function(e, context) {
1084 return Dygraph.pageY(e) - context.py
1085};
ee672584 1086
629a09ae 1087/**
0393dbfd
DV
1088 * A collection of functions to facilitate build custom interaction models.
1089 * @class
1090 */
1091Dygraph.Interaction = {};
1092
1093/**
629a09ae
DV
1094 * Called in response to an interaction model operation that
1095 * should start the default panning behavior.
1096 *
1097 * It's used in the default callback for "mousedown" operations.
1098 * Custom interaction model builders can use it to provide the default
1099 * panning behavior.
1100 *
1101 * @param { Event } event the event object which led to the startPan call.
1102 * @param { Dygraph} g The dygraph on which to act.
1103 * @param { Object} context The dragging context object (with
1104 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1105 */
0393dbfd 1106Dygraph.Interaction.startPan = function(event, g, context) {
062ef401
JB
1107 context.isPanning = true;
1108 var xRange = g.xAxisRange();
1109 context.dateRange = xRange[1] - xRange[0];
ec291cbe
RK
1110 context.initialLeftmostDate = xRange[0];
1111 context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1);
062ef401 1112
965a030e
RK
1113 if (g.attr_("panEdgeFraction")) {
1114 var maxXPixelsToDraw = g.width_ * g.attr_("panEdgeFraction");
4cac8c7a
RK
1115 var xExtremes = g.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1116
1117 var boundedLeftX = g.toDomXCoord(xExtremes[0]) - maxXPixelsToDraw;
1118 var boundedRightX = g.toDomXCoord(xExtremes[1]) + maxXPixelsToDraw;
1119
1120 var boundedLeftDate = g.toDataXCoord(boundedLeftX);
1121 var boundedRightDate = g.toDataXCoord(boundedRightX);
1122 context.boundedDates = [boundedLeftDate, boundedRightDate];
1123
1124 var boundedValues = [];
965a030e 1125 var maxYPixelsToDraw = g.height_ * g.attr_("panEdgeFraction");
4cac8c7a
RK
1126
1127 for (var i = 0; i < g.axes_.length; i++) {
1128 var axis = g.axes_[i];
1129 var yExtremes = axis.extremeRange;
1130
1131 var boundedTopY = g.toDomYCoord(yExtremes[0], i) + maxYPixelsToDraw;
1132 var boundedBottomY = g.toDomYCoord(yExtremes[1], i) - maxYPixelsToDraw;
1133
1134 var boundedTopValue = g.toDataYCoord(boundedTopY);
1135 var boundedBottomValue = g.toDataYCoord(boundedBottomY);
1136
4cac8c7a
RK
1137 boundedValues[i] = [boundedTopValue, boundedBottomValue];
1138 }
1139 context.boundedValues = boundedValues;
1140 }
1141
062ef401
JB
1142 // Record the range of each y-axis at the start of the drag.
1143 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1144 context.is2DPan = false;
1145 for (var i = 0; i < g.axes_.length; i++) {
1146 var axis = g.axes_[i];
1147 var yRange = g.yAxisRange(i);
ec291cbe 1148 // TODO(konigsberg): These values should be in |context|.
ed898bdd
RK
1149 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1150 if (axis.logscale) {
1151 axis.initialTopValue = Dygraph.log10(yRange[1]);
1152 axis.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]);
1153 } else {
1154 axis.initialTopValue = yRange[1];
1155 axis.dragValueRange = yRange[1] - yRange[0];
1156 }
ec291cbe 1157 axis.unitsPerPixel = axis.dragValueRange / (g.plotter_.area.h - 1);
ed898bdd
RK
1158
1159 // While calculating axes, set 2dpan.
062ef401
JB
1160 if (axis.valueWindow || axis.valueRange) context.is2DPan = true;
1161 }
062ef401 1162};
6a1aa64f 1163
629a09ae
DV
1164/**
1165 * Called in response to an interaction model operation that
1166 * responds to an event that pans the view.
1167 *
1168 * It's used in the default callback for "mousemove" operations.
1169 * Custom interaction model builders can use it to provide the default
1170 * panning behavior.
1171 *
1172 * @param { Event } event the event object which led to the movePan call.
1173 * @param { Dygraph} g The dygraph on which to act.
1174 * @param { Object} context The dragging context object (with
1175 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1176 */
0393dbfd 1177Dygraph.Interaction.movePan = function(event, g, context) {
062ef401
JB
1178 context.dragEndX = g.dragGetX_(event, context);
1179 context.dragEndY = g.dragGetY_(event, context);
79b3ee42 1180
ec291cbe
RK
1181 var minDate = context.initialLeftmostDate -
1182 (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel;
4cac8c7a
RK
1183 if (context.boundedDates) {
1184 minDate = Math.max(minDate, context.boundedDates[0]);
1185 }
062ef401 1186 var maxDate = minDate + context.dateRange;
4cac8c7a
RK
1187 if (context.boundedDates) {
1188 if (maxDate > context.boundedDates[1]) {
1189 // Adjust minDate, and recompute maxDate.
1190 minDate = minDate - (maxDate - context.boundedDates[1]);
965a030e 1191 maxDate = minDate + context.dateRange;
4cac8c7a
RK
1192 }
1193 }
1194
062ef401
JB
1195 g.dateWindow_ = [minDate, maxDate];
1196
1197 // y-axis scaling is automatic unless this is a full 2D pan.
1198 if (context.is2DPan) {
1199 // Adjust each axis appropriately.
062ef401
JB
1200 for (var i = 0; i < g.axes_.length; i++) {
1201 var axis = g.axes_[i];
ed898bdd
RK
1202
1203 var pixelsDragged = context.dragEndY - context.dragStartY;
1204 var unitsDragged = pixelsDragged * axis.unitsPerPixel;
4cac8c7a
RK
1205
1206 var boundedValue = context.boundedValues ? context.boundedValues[i] : null;
ed898bdd
RK
1207
1208 // In log scale, maxValue and minValue are the logs of those values.
1209 var maxValue = axis.initialTopValue + unitsDragged;
4cac8c7a
RK
1210 if (boundedValue) {
1211 maxValue = Math.min(maxValue, boundedValue[1]);
1212 }
062ef401 1213 var minValue = maxValue - axis.dragValueRange;
4cac8c7a
RK
1214 if (boundedValue) {
1215 if (minValue < boundedValue[0]) {
1216 // Adjust maxValue, and recompute minValue.
1217 maxValue = maxValue - (minValue - boundedValue[0]);
1218 minValue = maxValue - axis.dragValueRange;
1219 }
1220 }
ed898bdd 1221 if (axis.logscale) {
5db0e241
DV
1222 axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue),
1223 Math.pow(Dygraph.LOG_SCALE, maxValue) ];
ed898bdd
RK
1224 } else {
1225 axis.valueWindow = [ minValue, maxValue ];
1226 }
6faebb69 1227 }
062ef401 1228 }
bce01b0f 1229
fc4e84fa 1230 g.drawGraph_(false);
629a09ae 1231};
ee672584 1232
629a09ae
DV
1233/**
1234 * Called in response to an interaction model operation that
1235 * responds to an event that ends panning.
1236 *
1237 * It's used in the default callback for "mouseup" operations.
1238 * Custom interaction model builders can use it to provide the default
1239 * panning behavior.
1240 *
1241 * @param { Event } event the event object which led to the startZoom call.
1242 * @param { Dygraph} g The dygraph on which to act.
1243 * @param { Object} context The dragging context object (with
1244 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1245 */
0393dbfd 1246Dygraph.Interaction.endPan = function(event, g, context) {
c682f205
RK
1247 context.dragEndX = g.dragGetX_(event, context);
1248 context.dragEndY = g.dragGetY_(event, context);
1249
1250 var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
1251 var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
1252
1253 if (regionWidth < 2 && regionHeight < 2 &&
1254 g.lastx_ != undefined && g.lastx_ != -1) {
1255 Dygraph.Interaction.treatMouseOpAsClick(g, context);
1256 }
1257
ec291cbe 1258 // TODO(konigsberg): Clear the context data from the axis.
c682f205 1259 // (replace with "context = {}" ?)
ec291cbe
RK
1260 // TODO(konigsberg): mouseup should just delete the
1261 // context object, and mousedown should create a new one.
062ef401
JB
1262 context.isPanning = false;
1263 context.is2DPan = false;
ec291cbe 1264 context.initialLeftmostDate = null;
062ef401
JB
1265 context.dateRange = null;
1266 context.valueRange = null;
9ec21d0a
RK
1267 context.boundedDates = null;
1268 context.boundedValues = null;
9c831431
RK
1269
1270 var dragEndX = g.dragGetX_(event, context);
1271 var dragEndY = g.dragGetY_(event, context);
1272 var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
1273 var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
1274
1275 if (regionWidth < 2 && regionHeight < 2 &&
1276 g.lastx_ != undefined && g.lastx_ != -1) {
1277 Dygraph.Interaction.treatMouseOpAsClick(g);
1278 }
629a09ae 1279};
ee672584 1280
629a09ae
DV
1281/**
1282 * Called in response to an interaction model operation that
1283 * responds to an event that starts zooming.
1284 *
1285 * It's used in the default callback for "mousedown" operations.
1286 * Custom interaction model builders can use it to provide the default
1287 * zooming behavior.
1288 *
1289 * @param { Event } event the event object which led to the startZoom call.
1290 * @param { Dygraph} g The dygraph on which to act.
1291 * @param { Object} context The dragging context object (with
1292 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1293 */
0393dbfd 1294Dygraph.Interaction.startZoom = function(event, g, context) {
062ef401 1295 context.isZooming = true;
629a09ae 1296};
062ef401 1297
629a09ae
DV
1298/**
1299 * Called in response to an interaction model operation that
1300 * responds to an event that defines zoom boundaries.
1301 *
1302 * It's used in the default callback for "mousemove" operations.
1303 * Custom interaction model builders can use it to provide the default
1304 * zooming behavior.
1305 *
1306 * @param { Event } event the event object which led to the moveZoom call.
1307 * @param { Dygraph} g The dygraph on which to act.
1308 * @param { Object} context The dragging context object (with
1309 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1310 */
0393dbfd 1311Dygraph.Interaction.moveZoom = function(event, g, context) {
062ef401
JB
1312 context.dragEndX = g.dragGetX_(event, context);
1313 context.dragEndY = g.dragGetY_(event, context);
1314
1315 var xDelta = Math.abs(context.dragStartX - context.dragEndX);
1316 var yDelta = Math.abs(context.dragStartY - context.dragEndY);
1317
1318 // drag direction threshold for y axis is twice as large as x axis
1319 context.dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL;
1320
1321 g.drawZoomRect_(
1322 context.dragDirection,
1323 context.dragStartX,
1324 context.dragEndX,
1325 context.dragStartY,
1326 context.dragEndY,
1327 context.prevDragDirection,
1328 context.prevEndX,
1329 context.prevEndY);
1330
1331 context.prevEndX = context.dragEndX;
1332 context.prevEndY = context.dragEndY;
1333 context.prevDragDirection = context.dragDirection;
629a09ae 1334};
062ef401 1335
c682f205 1336Dygraph.Interaction.treatMouseOpAsClick = function(g, context) {
9c831431
RK
1337 // TODO(danvk): pass along more info about the points, e.g. 'x'
1338 if (g.attr_('clickCallback') != null) {
c682f205 1339 g.attr_('clickCallback')(event, g.lastx_, g.selPoints_, context);
9c831431
RK
1340 }
1341 if (g.attr_('pointClickCallback')) {
1342 // check if the click was on a particular point.
1343 var closestIdx = -1;
1344 var closestDistance = 0;
1345 for (var i = 0; i < g.selPoints_.length; i++) {
1346 var p = g.selPoints_[i];
1347 var distance = Math.pow(p.canvasx - context.dragEndX, 2) +
1348 Math.pow(p.canvasy - context.dragEndY, 2);
1349 if (closestIdx == -1 || distance < closestDistance) {
1350 closestDistance = distance;
1351 closestIdx = i;
1352 }
1353 }
1354
1355 // Allow any click within two pixels of the dot.
1356 var radius = g.attr_('highlightCircleSize') + 2;
1357 if (closestDistance <= 5 * 5) {
1358 g.attr_('pointClickCallback')(event, g.selPoints_[closestIdx]);
1359 }
1360 }
1361}
1362
629a09ae
DV
1363/**
1364 * Called in response to an interaction model operation that
1365 * responds to an event that performs a zoom based on previously defined
1366 * bounds..
1367 *
1368 * It's used in the default callback for "mouseup" operations.
1369 * Custom interaction model builders can use it to provide the default
1370 * zooming behavior.
1371 *
1372 * @param { Event } event the event object which led to the endZoom call.
1373 * @param { Dygraph} g The dygraph on which to end the zoom.
1374 * @param { Object} context The dragging context object (with
1375 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1376 */
0393dbfd 1377Dygraph.Interaction.endZoom = function(event, g, context) {
062ef401
JB
1378 context.isZooming = false;
1379 context.dragEndX = g.dragGetX_(event, context);
1380 context.dragEndY = g.dragGetY_(event, context);
1381 var regionWidth = Math.abs(context.dragEndX - context.dragStartX);
1382 var regionHeight = Math.abs(context.dragEndY - context.dragStartY);
1383
1384 if (regionWidth < 2 && regionHeight < 2 &&
1385 g.lastx_ != undefined && g.lastx_ != -1) {
9c831431 1386 Dygraph.Interaction.treatMouseOpAsClick(g);
062ef401 1387 }
0a52ab7a 1388
062ef401
JB
1389 if (regionWidth >= 10 && context.dragDirection == Dygraph.HORIZONTAL) {
1390 g.doZoomX_(Math.min(context.dragStartX, context.dragEndX),
1391 Math.max(context.dragStartX, context.dragEndX));
1392 } else if (regionHeight >= 10 && context.dragDirection == Dygraph.VERTICAL) {
1393 g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
1394 Math.max(context.dragStartY, context.dragEndY));
1395 } else {
2cf95fff 1396 g.canvas_ctx_.clearRect(0, 0, g.canvas_.width, g.canvas_.height);
062ef401
JB
1397 }
1398 context.dragStartX = null;
1399 context.dragStartY = null;
629a09ae 1400};
062ef401 1401
629a09ae
DV
1402/**
1403 * Default interation model for dygraphs. You can refer to specific elements of
1404 * this when constructing your own interaction model, e.g.:
1405 * g.updateOptions( {
1406 * interactionModel: {
1407 * mousedown: Dygraph.defaultInteractionModel.mousedown
1408 * }
1409 * } );
1410 */
0393dbfd 1411Dygraph.Interaction.defaultModel = {
062ef401
JB
1412 // Track the beginning of drag events
1413 mousedown: function(event, g, context) {
1414 context.initializeMouseDown(event, g, context);
1415
1416 if (event.altKey || event.shiftKey) {
1417 Dygraph.startPan(event, g, context);
bce01b0f 1418 } else {
062ef401 1419 Dygraph.startZoom(event, g, context);
bce01b0f 1420 }
062ef401 1421 },
6a1aa64f 1422
062ef401
JB
1423 // Draw zoom rectangles when the mouse is down and the user moves around
1424 mousemove: function(event, g, context) {
1425 if (context.isZooming) {
1426 Dygraph.moveZoom(event, g, context);
1427 } else if (context.isPanning) {
1428 Dygraph.movePan(event, g, context);
6a1aa64f 1429 }
062ef401 1430 },
bce01b0f 1431
062ef401
JB
1432 mouseup: function(event, g, context) {
1433 if (context.isZooming) {
1434 Dygraph.endZoom(event, g, context);
1435 } else if (context.isPanning) {
1436 Dygraph.endPan(event, g, context);
bce01b0f 1437 }
062ef401 1438 },
6a1aa64f
DV
1439
1440 // Temporarily cancel the dragging event when the mouse leaves the graph
062ef401
JB
1441 mouseout: function(event, g, context) {
1442 if (context.isZooming) {
1443 context.dragEndX = null;
1444 context.dragEndY = null;
6a1aa64f 1445 }
062ef401 1446 },
6a1aa64f 1447
062ef401
JB
1448 // Disable zooming out if panning.
1449 dblclick: function(event, g, context) {
1450 if (event.altKey || event.shiftKey) {
1451 return;
1452 }
1453 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1454 // friendlier to public use.
1455 g.doUnzoom_();
1456 }
1457};
1e1bf7df 1458
0393dbfd
DV
1459Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel;
1460
1461// old ways of accessing these methods/properties
1462Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel;
1463Dygraph.endZoom = Dygraph.Interaction.endZoom;
1464Dygraph.moveZoom = Dygraph.Interaction.moveZoom;
1465Dygraph.startZoom = Dygraph.Interaction.startZoom;
1466Dygraph.endPan = Dygraph.Interaction.endPan;
1467Dygraph.movePan = Dygraph.Interaction.movePan;
1468Dygraph.startPan = Dygraph.Interaction.startPan;
6a1aa64f 1469
062ef401
JB
1470/**
1471 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1472 * events.
1473 * @private
1474 */
1475Dygraph.prototype.createDragInterface_ = function() {
1476 var context = {
1477 // Tracks whether the mouse is down right now
1478 isZooming: false,
1479 isPanning: false, // is this drag part of a pan?
1480 is2DPan: false, // if so, is that pan 1- or 2-dimensional?
1481 dragStartX: null,
1482 dragStartY: null,
1483 dragEndX: null,
1484 dragEndY: null,
1485 dragDirection: null,
1486 prevEndX: null,
1487 prevEndY: null,
1488 prevDragDirection: null,
1489
ec291cbe
RK
1490 // The value on the left side of the graph when a pan operation starts.
1491 initialLeftmostDate: null,
1492
1493 // The number of units each pixel spans. (This won't be valid for log
1494 // scales)
1495 xUnitsPerPixel: null,
062ef401
JB
1496
1497 // TODO(danvk): update this comment
1498 // The range in second/value units that the viewport encompasses during a
1499 // panning operation.
1500 dateRange: null,
1501
1502 // Utility function to convert page-wide coordinates to canvas coords
1503 px: 0,
1504 py: 0,
1505
965a030e 1506 // Values for use with panEdgeFraction, which limit how far outside the
4cac8c7a
RK
1507 // graph's data boundaries it can be panned.
1508 boundedDates: null, // [minDate, maxDate]
1509 boundedValues: null, // [[minValue, maxValue] ...]
1510
062ef401
JB
1511 initializeMouseDown: function(event, g, context) {
1512 // prevents mouse drags from selecting page text.
1513 if (event.preventDefault) {
1514 event.preventDefault(); // Firefox, Chrome, etc.
6a1aa64f 1515 } else {
062ef401
JB
1516 event.returnValue = false; // IE
1517 event.cancelBubble = true;
6a1aa64f
DV
1518 }
1519
062ef401
JB
1520 context.px = Dygraph.findPosX(g.canvas_);
1521 context.py = Dygraph.findPosY(g.canvas_);
1522 context.dragStartX = g.dragGetX_(event, context);
1523 context.dragStartY = g.dragGetY_(event, context);
6a1aa64f 1524 }
062ef401 1525 };
2b188b3d 1526
062ef401 1527 var interactionModel = this.attr_("interactionModel");
8b83c6cc 1528
062ef401
JB
1529 // Self is the graph.
1530 var self = this;
6faebb69 1531
062ef401
JB
1532 // Function that binds the graph and context to the handler.
1533 var bindHandler = function(handler) {
1534 return function(event) {
1535 handler(event, self, context);
1536 };
1537 };
1538
1539 for (var eventName in interactionModel) {
1540 if (!interactionModel.hasOwnProperty(eventName)) continue;
1541 Dygraph.addEvent(this.mouseEventElement_, eventName,
1542 bindHandler(interactionModel[eventName]));
1543 }
1544
1545 // If the user releases the mouse button during a drag, but not over the
1546 // canvas, then it doesn't count as a zooming action.
1547 Dygraph.addEvent(document, 'mouseup', function(event) {
1548 if (context.isZooming || context.isPanning) {
1549 context.isZooming = false;
1550 context.dragStartX = null;
1551 context.dragStartY = null;
1552 }
1553
1554 if (context.isPanning) {
1555 context.isPanning = false;
1556 context.draggingDate = null;
1557 context.dateRange = null;
1558 for (var i = 0; i < self.axes_.length; i++) {
1559 delete self.axes_[i].draggingValue;
1560 delete self.axes_[i].dragValueRange;
1561 }
1562 }
6a1aa64f
DV
1563 });
1564};
1565
062ef401 1566
6a1aa64f
DV
1567/**
1568 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1569 * up any previous zoom rectangles that were drawn. This could be optimized to
1570 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1571 * dots.
8b83c6cc 1572 *
39b0e098
RK
1573 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1574 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
6a1aa64f
DV
1575 * @param {Number} startX The X position where the drag started, in canvas
1576 * coordinates.
1577 * @param {Number} endX The current X position of the drag, in canvas coords.
8b83c6cc
RK
1578 * @param {Number} startY The Y position where the drag started, in canvas
1579 * coordinates.
1580 * @param {Number} endY The current Y position of the drag, in canvas coords.
39b0e098 1581 * @param {Number} prevDirection the value of direction on the previous call to
8b83c6cc 1582 * this function. Used to avoid excess redrawing
6a1aa64f
DV
1583 * @param {Number} prevEndX The value of endX on the previous call to this
1584 * function. Used to avoid excess redrawing
8b83c6cc
RK
1585 * @param {Number} prevEndY The value of endY on the previous call to this
1586 * function. Used to avoid excess redrawing
6a1aa64f
DV
1587 * @private
1588 */
7201b11e
JB
1589Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
1590 endY, prevDirection, prevEndX,
1591 prevEndY) {
2cf95fff 1592 var ctx = this.canvas_ctx_;
6a1aa64f
DV
1593
1594 // Clean up from the previous rect if necessary
39b0e098 1595 if (prevDirection == Dygraph.HORIZONTAL) {
6a1aa64f
DV
1596 ctx.clearRect(Math.min(startX, prevEndX), 0,
1597 Math.abs(startX - prevEndX), this.height_);
39b0e098 1598 } else if (prevDirection == Dygraph.VERTICAL){
8b83c6cc
RK
1599 ctx.clearRect(0, Math.min(startY, prevEndY),
1600 this.width_, Math.abs(startY - prevEndY));
6a1aa64f
DV
1601 }
1602
1603 // Draw a light-grey rectangle to show the new viewing area
39b0e098 1604 if (direction == Dygraph.HORIZONTAL) {
8b83c6cc
RK
1605 if (endX && startX) {
1606 ctx.fillStyle = "rgba(128,128,128,0.33)";
1607 ctx.fillRect(Math.min(startX, endX), 0,
1608 Math.abs(endX - startX), this.height_);
1609 }
1610 }
39b0e098 1611 if (direction == Dygraph.VERTICAL) {
8b83c6cc
RK
1612 if (endY && startY) {
1613 ctx.fillStyle = "rgba(128,128,128,0.33)";
1614 ctx.fillRect(0, Math.min(startY, endY),
1615 this.width_, Math.abs(endY - startY));
1616 }
6a1aa64f
DV
1617 }
1618};
1619
1620/**
8b83c6cc
RK
1621 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1622 * the canvas. The exact zoom window may be slightly larger if there are no data
1623 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1624 * which accepts dates that match the raw data. This function redraws the graph.
d58ae307 1625 *
6a1aa64f
DV
1626 * @param {Number} lowX The leftmost pixel value that should be visible.
1627 * @param {Number} highX The rightmost pixel value that should be visible.
1628 * @private
1629 */
8b83c6cc 1630Dygraph.prototype.doZoomX_ = function(lowX, highX) {
6a1aa64f 1631 // Find the earliest and latest dates contained in this canvasx range.
8b83c6cc 1632 // Convert the call to date ranges of the raw data.
ff022deb
RK
1633 var minDate = this.toDataXCoord(lowX);
1634 var maxDate = this.toDataXCoord(highX);
8b83c6cc
RK
1635 this.doZoomXDates_(minDate, maxDate);
1636};
6a1aa64f 1637
8b83c6cc
RK
1638/**
1639 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1640 * method with doZoomX which accepts pixel coordinates. This function redraws
1641 * the graph.
d58ae307 1642 *
8b83c6cc
RK
1643 * @param {Number} minDate The minimum date that should be visible.
1644 * @param {Number} maxDate The maximum date that should be visible.
1645 * @private
1646 */
1647Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
6a1aa64f 1648 this.dateWindow_ = [minDate, maxDate];
57baab03 1649 this.zoomed_x_ = true;
26ca7938 1650 this.drawGraph_();
285a6bda 1651 if (this.attr_("zoomCallback")) {
ac139d19 1652 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
8b83c6cc
RK
1653 }
1654};
1655
1656/**
1657 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
d58ae307
DV
1658 * the canvas. This function redraws the graph.
1659 *
8b83c6cc
RK
1660 * @param {Number} lowY The topmost pixel value that should be visible.
1661 * @param {Number} highY The lowest pixel value that should be visible.
1662 * @private
1663 */
1664Dygraph.prototype.doZoomY_ = function(lowY, highY) {
d58ae307
DV
1665 // Find the highest and lowest values in pixel range for each axis.
1666 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1667 // This is because pixels increase as you go down on the screen, whereas data
1668 // coordinates increase as you go up the screen.
1669 var valueRanges = [];
1670 for (var i = 0; i < this.axes_.length; i++) {
ff022deb
RK
1671 var hi = this.toDataYCoord(lowY, i);
1672 var low = this.toDataYCoord(highY, i);
1673 this.axes_[i].valueWindow = [low, hi];
1674 valueRanges.push([low, hi]);
d58ae307 1675 }
8b83c6cc 1676
57baab03 1677 this.zoomed_y_ = true;
66c380c4 1678 this.drawGraph_();
8b83c6cc 1679 if (this.attr_("zoomCallback")) {
d58ae307 1680 var xRange = this.xAxisRange();
45f2c689 1681 var yRange = this.yAxisRange();
d58ae307 1682 this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges());
8b83c6cc
RK
1683 }
1684};
1685
1686/**
1687 * Reset the zoom to the original view coordinates. This is the same as
1688 * double-clicking on the graph.
d58ae307 1689 *
8b83c6cc
RK
1690 * @private
1691 */
1692Dygraph.prototype.doUnzoom_ = function() {
d58ae307 1693 var dirty = false;
8b83c6cc 1694 if (this.dateWindow_ != null) {
d58ae307 1695 dirty = true;
8b83c6cc
RK
1696 this.dateWindow_ = null;
1697 }
d58ae307
DV
1698
1699 for (var i = 0; i < this.axes_.length; i++) {
1700 if (this.axes_[i].valueWindow != null) {
1701 dirty = true;
1702 delete this.axes_[i].valueWindow;
1703 }
8b83c6cc
RK
1704 }
1705
da1369a5
DV
1706 // Clear any selection, since it's likely to be drawn in the wrong place.
1707 this.clearSelection();
1708
8b83c6cc 1709 if (dirty) {
437c0979
RK
1710 // Putting the drawing operation before the callback because it resets
1711 // yAxisRange.
57baab03
NN
1712 this.zoomed_x_ = false;
1713 this.zoomed_y_ = false;
66c380c4 1714 this.drawGraph_();
8b83c6cc
RK
1715 if (this.attr_("zoomCallback")) {
1716 var minDate = this.rawData_[0][0];
1717 var maxDate = this.rawData_[this.rawData_.length - 1][0];
d58ae307 1718 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
8b83c6cc 1719 }
67e650dc 1720 }
6a1aa64f
DV
1721};
1722
1723/**
1724 * When the mouse moves in the canvas, display information about a nearby data
1725 * point and draw dots over those points in the data series. This function
1726 * takes care of cleanup of previously-drawn dots.
1727 * @param {Object} event The mousemove event from the browser.
1728 * @private
1729 */
285a6bda 1730Dygraph.prototype.mouseMove_ = function(event) {
e863a17d 1731 // This prevents JS errors when mousing over the canvas before data loads.
4cac8c7a 1732 var points = this.layout_.points;
685ebbb3 1733 if (points === undefined) return;
e863a17d 1734
4cac8c7a
RK
1735 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
1736
6a1aa64f
DV
1737 var lastx = -1;
1738 var lasty = -1;
1739
1740 // Loop through all the points and find the date nearest to our current
1741 // location.
1742 var minDist = 1e+100;
1743 var idx = -1;
1744 for (var i = 0; i < points.length; i++) {
8a7cc60e
RK
1745 var point = points[i];
1746 if (point == null) continue;
062ef401 1747 var dist = Math.abs(point.canvasx - canvasx);
f032c51d 1748 if (dist > minDist) continue;
6a1aa64f
DV
1749 minDist = dist;
1750 idx = i;
1751 }
1752 if (idx >= 0) lastx = points[idx].xval;
6a1aa64f
DV
1753
1754 // Extract the points we've selected
b258a3da 1755 this.selPoints_ = [];
50360fd0 1756 var l = points.length;
416b05ad
NK
1757 if (!this.attr_("stackedGraph")) {
1758 for (var i = 0; i < l; i++) {
1759 if (points[i].xval == lastx) {
1760 this.selPoints_.push(points[i]);
1761 }
1762 }
1763 } else {
354e15ab
DE
1764 // Need to 'unstack' points starting from the bottom
1765 var cumulative_sum = 0;
416b05ad
NK
1766 for (var i = l - 1; i >= 0; i--) {
1767 if (points[i].xval == lastx) {
354e15ab 1768 var p = {}; // Clone the point since we modify it
d4139cd8
NK
1769 for (var k in points[i]) {
1770 p[k] = points[i][k];
50360fd0
NK
1771 }
1772 p.yval -= cumulative_sum;
1773 cumulative_sum += p.yval;
d4139cd8 1774 this.selPoints_.push(p);
12e4c741 1775 }
6a1aa64f 1776 }
354e15ab 1777 this.selPoints_.reverse();
6a1aa64f
DV
1778 }
1779
b258a3da 1780 if (this.attr_("highlightCallback")) {
a4c6a67c 1781 var px = this.lastx_;
dd082dda 1782 if (px !== null && lastx != px) {
344ba8c0 1783 // only fire if the selected point has changed.
2ddb1197 1784 this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx));
43af96e7 1785 }
12e4c741 1786 }
43af96e7 1787
239c712d
NAG
1788 // Save last x position for callbacks.
1789 this.lastx_ = lastx;
50360fd0 1790
239c712d
NAG
1791 this.updateSelection_();
1792};
b258a3da 1793
239c712d 1794/**
1903f1e4 1795 * Transforms layout_.points index into data row number.
2ddb1197 1796 * @param int layout_.points index
1903f1e4 1797 * @return int row number, or -1 if none could be found.
2ddb1197
SC
1798 * @private
1799 */
1800Dygraph.prototype.idxToRow_ = function(idx) {
1903f1e4 1801 if (idx < 0) return -1;
2ddb1197 1802
1903f1e4
DV
1803 for (var i in this.layout_.datasets) {
1804 if (idx < this.layout_.datasets[i].length) {
1805 return this.boundaryIds_[0][0]+idx;
1806 }
1807 idx -= this.layout_.datasets[i].length;
1808 }
1809 return -1;
1810};
2ddb1197 1811
629a09ae
DV
1812/**
1813 * @private
1814 * @param { Number } x The number to consider.
1815 * @return { Boolean } Whether the number is zero or NaN.
1816 */
2fccd3dc 1817// TODO(danvk): rename this function to something like 'isNonZeroNan'.
e9fe4a2f
DV
1818Dygraph.isOK = function(x) {
1819 return x && !isNaN(x);
1820};
1821
629a09ae
DV
1822/**
1823 * @private
1824 * Generates HTML for the legend which is displayed when hovering over the
1825 * chart. If no selected points are specified, a default legend is returned
1826 * (this may just be the empty string).
1827 * @param { Number } [x] The x-value of the selected points.
1828 * @param { [Object] } [sel_points] List of selected points for the given
1829 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1830 */
e9fe4a2f 1831Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) {
2fccd3dc
DV
1832 // If no points are selected, we display a default legend. Traditionally,
1833 // this has been blank. But a better default would be a conventional legend,
1834 // which provides essential information for a non-interactive chart.
1835 if (typeof(x) === 'undefined') {
1836 if (this.attr_('legend') != 'always') return '';
1837
1838 var sepLines = this.attr_('labelsSeparateLines');
1839 var labels = this.attr_('labels');
1840 var html = '';
1841 for (var i = 1; i < labels.length; i++) {
352c8310 1842 if (!this.visibility()[i - 1]) continue;
bafe040e 1843 var c = this.plotter_.colors[labels[i]];
352c8310 1844 if (html != '') html += (sepLines ? '<br/>' : ' ');
bafe040e
DV
1845 html += "<b><span style='color: " + c + ";'>&mdash;" + labels[i] +
1846 "</span></b>";
2fccd3dc
DV
1847 }
1848 return html;
1849 }
1850
032e4c1d 1851 var html = this.attr_('xValueFormatter')(x) + ":";
e9fe4a2f
DV
1852
1853 var fmtFunc = this.attr_('yValueFormatter');
1854 var showZeros = this.attr_("labelsShowZeroValues");
1855 var sepLines = this.attr_("labelsSeparateLines");
1856 for (var i = 0; i < this.selPoints_.length; i++) {
1857 var pt = this.selPoints_[i];
1858 if (pt.yval == 0 && !showZeros) continue;
1859 if (!Dygraph.isOK(pt.canvasy)) continue;
1860 if (sepLines) html += "<br/>";
1861
bafe040e 1862 var c = this.plotter_.colors[pt.name];
91c10d9c 1863 var yval = fmtFunc(pt.yval, this);
2fccd3dc 1864 // TODO(danvk): use a template string here and make it an attribute.
bafe040e
DV
1865 html += " <b><span style='color: " + c + ";'>"
1866 + pt.name + "</span></b>:"
e9fe4a2f
DV
1867 + yval;
1868 }
1869 return html;
1870};
1871
629a09ae
DV
1872/**
1873 * @private
1874 * Displays information about the selected points in the legend. If there is no
1875 * selection, the legend will be cleared.
1876 * @param { Number } [x] The x-value of the selected points.
1877 * @param { [Object] } [sel_points] List of selected points for the given
1878 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1879 */
91c10d9c
DV
1880Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
1881 var html = this.generateLegendHTML_(x, sel_points);
1882 var labelsDiv = this.attr_("labelsDiv");
1883 if (labelsDiv !== null) {
1884 labelsDiv.innerHTML = html;
1885 } else {
1886 if (typeof(this.shown_legend_error_) == 'undefined') {
1887 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1888 this.shown_legend_error_ = true;
1889 }
1890 }
1891};
1892
2ddb1197 1893/**
239c712d
NAG
1894 * Draw dots over the selectied points in the data series. This function
1895 * takes care of cleanup of previously-drawn dots.
1896 * @private
1897 */
1898Dygraph.prototype.updateSelection_ = function() {
6a1aa64f 1899 // Clear the previously drawn vertical, if there is one
2cf95fff 1900 var ctx = this.canvas_ctx_;
6a1aa64f 1901 if (this.previousVerticalX_ >= 0) {
46dde5f9
DV
1902 // Determine the maximum highlight circle size.
1903 var maxCircleSize = 0;
227b93cc
DV
1904 var labels = this.attr_('labels');
1905 for (var i = 1; i < labels.length; i++) {
1906 var r = this.attr_('highlightCircleSize', labels[i]);
46dde5f9
DV
1907 if (r > maxCircleSize) maxCircleSize = r;
1908 }
6a1aa64f 1909 var px = this.previousVerticalX_;
46dde5f9
DV
1910 ctx.clearRect(px - maxCircleSize - 1, 0,
1911 2 * maxCircleSize + 2, this.height_);
6a1aa64f
DV
1912 }
1913
d160cc3b 1914 if (this.selPoints_.length > 0) {
6a1aa64f 1915 // Set the status message to indicate the selected point(s)
d160cc3b 1916 if (this.attr_('showLabelsOnHighlight')) {
91c10d9c 1917 this.setLegendHTML_(this.lastx_, this.selPoints_);
6a1aa64f 1918 }
6a1aa64f 1919
6a1aa64f 1920 // Draw colored circles over the center of each selected point
e9fe4a2f 1921 var canvasx = this.selPoints_[0].canvasx;
43af96e7 1922 ctx.save();
b258a3da 1923 for (var i = 0; i < this.selPoints_.length; i++) {
e9fe4a2f
DV
1924 var pt = this.selPoints_[i];
1925 if (!Dygraph.isOK(pt.canvasy)) continue;
1926
1927 var circleSize = this.attr_('highlightCircleSize', pt.name);
6a1aa64f 1928 ctx.beginPath();
e9fe4a2f
DV
1929 ctx.fillStyle = this.plotter_.colors[pt.name];
1930 ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false);
6a1aa64f
DV
1931 ctx.fill();
1932 }
1933 ctx.restore();
1934
1935 this.previousVerticalX_ = canvasx;
1936 }
1937};
1938
1939/**
629a09ae
DV
1940 * Manually set the selected points and display information about them in the
1941 * legend. The selection can be cleared using clearSelection() and queried
1942 * using getSelection().
1943 * @param { Integer } row number that should be highlighted (i.e. appear with
1944 * hover dots on the chart). Set to false to clear any selection.
239c712d
NAG
1945 */
1946Dygraph.prototype.setSelection = function(row) {
1947 // Extract the points we've selected
1948 this.selPoints_ = [];
1949 var pos = 0;
50360fd0 1950
239c712d 1951 if (row !== false) {
16269f6e
NAG
1952 row = row-this.boundaryIds_[0][0];
1953 }
50360fd0 1954
16269f6e 1955 if (row !== false && row >= 0) {
239c712d 1956 for (var i in this.layout_.datasets) {
16269f6e 1957 if (row < this.layout_.datasets[i].length) {
38f33a44 1958 var point = this.layout_.points[pos+row];
1959
1960 if (this.attr_("stackedGraph")) {
8c03ba63 1961 point = this.layout_.unstackPointAtIndex(pos+row);
38f33a44 1962 }
1963
1964 this.selPoints_.push(point);
16269f6e 1965 }
239c712d
NAG
1966 pos += this.layout_.datasets[i].length;
1967 }
16269f6e 1968 }
50360fd0 1969
16269f6e 1970 if (this.selPoints_.length) {
239c712d
NAG
1971 this.lastx_ = this.selPoints_[0].xval;
1972 this.updateSelection_();
1973 } else {
239c712d
NAG
1974 this.clearSelection();
1975 }
1976
1977};
1978
1979/**
6a1aa64f
DV
1980 * The mouse has left the canvas. Clear out whatever artifacts remain
1981 * @param {Object} event the mouseout event from the browser.
1982 * @private
1983 */
285a6bda 1984Dygraph.prototype.mouseOut_ = function(event) {
a4c6a67c
AV
1985 if (this.attr_("unhighlightCallback")) {
1986 this.attr_("unhighlightCallback")(event);
1987 }
1988
43af96e7 1989 if (this.attr_("hideOverlayOnMouseOut")) {
239c712d 1990 this.clearSelection();
43af96e7 1991 }
6a1aa64f
DV
1992};
1993
239c712d 1994/**
629a09ae
DV
1995 * Clears the current selection (i.e. points that were highlighted by moving
1996 * the mouse over the chart).
239c712d
NAG
1997 */
1998Dygraph.prototype.clearSelection = function() {
1999 // Get rid of the overlay data
2cf95fff 2000 this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
91c10d9c 2001 this.setLegendHTML_();
239c712d
NAG
2002 this.selPoints_ = [];
2003 this.lastx_ = -1;
2004}
2005
103b7292 2006/**
629a09ae
DV
2007 * Returns the number of the currently selected row. To get data for this row,
2008 * you can use the getValue method.
2009 * @return { Integer } row number, or -1 if nothing is selected
103b7292
NAG
2010 */
2011Dygraph.prototype.getSelection = function() {
2012 if (!this.selPoints_ || this.selPoints_.length < 1) {
2013 return -1;
2014 }
50360fd0 2015
103b7292
NAG
2016 for (var row=0; row<this.layout_.points.length; row++ ) {
2017 if (this.layout_.points[row].x == this.selPoints_[0].x) {
16269f6e 2018 return row + this.boundaryIds_[0][0];
103b7292
NAG
2019 }
2020 }
2021 return -1;
2e1fcf1a 2022};
103b7292 2023
19589a3e
DV
2024/**
2025 * Number formatting function which mimicks the behavior of %g in printf, i.e.
2026 * either exponential or fixed format (without trailing 0s) is used depending on
2027 * the length of the generated string. The advantage of this format is that
2028 * there is a predictable upper bound on the resulting string length,
2029 * significant figures are not dropped, and normal numbers are not displayed in
2030 * exponential notation.
2031 *
2032 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
2033 * It creates strings which are too long for absolute values between 10^-4 and
2034 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
2035 * output examples.
2036 *
2037 * @param {Number} x The number to format
2038 * @param {Number} opt_precision The precision to use, default 2.
2039 * @return {String} A string formatted like %g in printf. The max generated
2040 * string length should be precision + 6 (e.g 1.123e+300).
2041 */
2042Dygraph.floatFormat = function(x, opt_precision) {
2043 // Avoid invalid precision values; [1, 21] is the valid range.
2044 var p = Math.min(Math.max(1, opt_precision || 2), 21);
2045
2046 // This is deceptively simple. The actual algorithm comes from:
2047 //
2048 // Max allowed length = p + 4
2049 // where 4 comes from 'e+n' and '.'.
2050 //
2051 // Length of fixed format = 2 + y + p
2052 // where 2 comes from '0.' and y = # of leading zeroes.
2053 //
2054 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
2055 // 1.0e-3.
2056 //
2057 // Since the behavior of toPrecision() is identical for larger numbers, we
2058 // don't have to worry about the other bound.
2059 //
2060 // Finally, the argument for toExponential() is the number of trailing digits,
2061 // so we take off 1 for the value before the '.'.
2062 return (Math.abs(x) < 1.0e-3 && x != 0.0) ?
2063 x.toExponential(p - 1) : x.toPrecision(p);
2e1fcf1a
DV
2064};
2065
2066/**
629a09ae 2067 * @private
2e1fcf1a
DV
2068 * Return a string version of a number. This respects the digitsAfterDecimal
2069 * and maxNumberWidth options.
2070 * @param {Number} x The number to be formatted
2071 * @param {Dygraph} g The dygraph object
2072 */
2073Dygraph.numberFormatter = function(x, g) {
19589a3e
DV
2074 var sigFigs = g.attr_('sigFigs');
2075
2076 if (sigFigs !== null) {
2077 // User has opted for a fixed number of significant figures.
2078 return Dygraph.floatFormat(x, sigFigs);
2079 }
2080
2e1fcf1a
DV
2081 var digits = g.attr_('digitsAfterDecimal');
2082 var maxNumberWidth = g.attr_('maxNumberWidth');
2083
19589a3e
DV
2084 // switch to scientific notation if we underflow or overflow fixed display.
2085 if (x !== 0.0 &&
2086 (Math.abs(x) >= Math.pow(10, maxNumberWidth) ||
2087 Math.abs(x) < Math.pow(10, -digits))) {
2088 return x.toExponential(digits);
2e1fcf1a
DV
2089 } else {
2090 return '' + Dygraph.round_(x, digits);
2091 }
2092};
32988383 2093
629a09ae
DV
2094/**
2095 * @private
2096 * Converts '9' to '09' (useful for dates)
2097 */
19589a3e
DV
2098Dygraph.zeropad = function(x) {
2099 if (x < 10) return "0" + x; else return "" + x;
2100};
2101
6a1aa64f 2102/**
6b8e33dd
DV
2103 * Return a string version of the hours, minutes and seconds portion of a date.
2104 * @param {Number} date The JavaScript date (ms since epoch)
2105 * @return {String} A time of the form "HH:MM:SS"
2106 * @private
2107 */
bf640e56 2108Dygraph.hmsString_ = function(date) {
285a6bda 2109 var zeropad = Dygraph.zeropad;
6b8e33dd
DV
2110 var d = new Date(date);
2111 if (d.getSeconds()) {
2112 return zeropad(d.getHours()) + ":" +
2113 zeropad(d.getMinutes()) + ":" +
2114 zeropad(d.getSeconds());
6b8e33dd 2115 } else {
054531ca 2116 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
6b8e33dd 2117 }
2e1fcf1a 2118};
6b8e33dd
DV
2119
2120/**
bf640e56
AV
2121 * Convert a JS date to a string appropriate to display on an axis that
2122 * is displaying values at the stated granularity.
2123 * @param {Date} date The date to format
2124 * @param {Number} granularity One of the Dygraph granularity constants
2125 * @return {String} The formatted date
2126 * @private
2127 */
2128Dygraph.dateAxisFormatter = function(date, granularity) {
062ef401
JB
2129 if (granularity >= Dygraph.DECADAL) {
2130 return date.strftime('%Y');
2131 } else if (granularity >= Dygraph.MONTHLY) {
bf640e56
AV
2132 return date.strftime('%b %y');
2133 } else {
31eddad3 2134 var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
bf640e56
AV
2135 if (frac == 0 || granularity >= Dygraph.DAILY) {
2136 return new Date(date.getTime() + 3600*1000).strftime('%d%b');
2137 } else {
2138 return Dygraph.hmsString_(date.getTime());
2139 }
2140 }
2e1fcf1a 2141};
bf640e56
AV
2142
2143/**
6a1aa64f
DV
2144 * Convert a JS date (millis since epoch) to YYYY/MM/DD
2145 * @param {Number} date The JavaScript date (ms since epoch)
2146 * @return {String} A date of the form "YYYY/MM/DD"
2147 * @private
2148 */
6be8e54c 2149Dygraph.dateString_ = function(date) {
285a6bda 2150 var zeropad = Dygraph.zeropad;
6a1aa64f
DV
2151 var d = new Date(date);
2152
2153 // Get the year:
2154 var year = "" + d.getFullYear();
2155 // Get a 0 padded month string
6b8e33dd 2156 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
6a1aa64f 2157 // Get a 0 padded day string
6b8e33dd 2158 var day = zeropad(d.getDate());
6a1aa64f 2159
6b8e33dd
DV
2160 var ret = "";
2161 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
bf640e56 2162 if (frac) ret = " " + Dygraph.hmsString_(date);
6b8e33dd
DV
2163
2164 return year + "/" + month + "/" + day + ret;
6a1aa64f
DV
2165};
2166
2167/**
032e4c1d
DV
2168 * Round a number to the specified number of digits past the decimal point.
2169 * @param {Number} num The number to round
2170 * @param {Number} places The number of decimals to which to round
2171 * @return {Number} The rounded number
2172 * @private
2173 */
2174Dygraph.round_ = function(num, places) {
2175 var shift = Math.pow(10, places);
2176 return Math.round(num * shift)/shift;
2177};
2178
2179/**
6a1aa64f
DV
2180 * Fires when there's data available to be graphed.
2181 * @param {String} data Raw CSV data to be plotted
2182 * @private
2183 */
285a6bda 2184Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f 2185 this.rawData_ = this.parseCSV_(data);
26ca7938 2186 this.predraw_();
6a1aa64f
DV
2187};
2188
285a6bda 2189Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
8846615a 2190 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
285a6bda 2191Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
6a1aa64f
DV
2192
2193/**
2194 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2195 * @private
2196 */
285a6bda 2197Dygraph.prototype.addXTicks_ = function() {
6a1aa64f 2198 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
7201b11e 2199 var range;
6a1aa64f 2200 if (this.dateWindow_) {
7201b11e 2201 range = [this.dateWindow_[0], this.dateWindow_[1]];
6a1aa64f 2202 } else {
7201b11e
JB
2203 range = [this.rawData_[0][0], this.rawData_[this.rawData_.length - 1][0]];
2204 }
2205
032e4c1d 2206 var xTicks = this.attr_('xTicker')(range[0], range[1], this);
b2c9222a 2207 this.layout_.setXTicks(xTicks);
32988383
DV
2208};
2209
2210// Time granularity enumeration
285a6bda 2211Dygraph.SECONDLY = 0;
20a41c17
DV
2212Dygraph.TWO_SECONDLY = 1;
2213Dygraph.FIVE_SECONDLY = 2;
2214Dygraph.TEN_SECONDLY = 3;
2215Dygraph.THIRTY_SECONDLY = 4;
2216Dygraph.MINUTELY = 5;
2217Dygraph.TWO_MINUTELY = 6;
2218Dygraph.FIVE_MINUTELY = 7;
2219Dygraph.TEN_MINUTELY = 8;
2220Dygraph.THIRTY_MINUTELY = 9;
2221Dygraph.HOURLY = 10;
2222Dygraph.TWO_HOURLY = 11;
2223Dygraph.SIX_HOURLY = 12;
2224Dygraph.DAILY = 13;
2225Dygraph.WEEKLY = 14;
2226Dygraph.MONTHLY = 15;
2227Dygraph.QUARTERLY = 16;
2228Dygraph.BIANNUAL = 17;
2229Dygraph.ANNUAL = 18;
2230Dygraph.DECADAL = 19;
062ef401
JB
2231Dygraph.CENTENNIAL = 20;
2232Dygraph.NUM_GRANULARITIES = 21;
285a6bda
DV
2233
2234Dygraph.SHORT_SPACINGS = [];
2235Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
20a41c17
DV
2236Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
2237Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
285a6bda
DV
2238Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
2239Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
2240Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
20a41c17
DV
2241Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
2242Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
285a6bda
DV
2243Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
2244Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
2245Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
20a41c17 2246Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
805d5519 2247Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
285a6bda
DV
2248Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
2249Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
32988383 2250
629a09ae
DV
2251/**
2252 * @private
2253 * If we used this time granularity, how many ticks would there be?
2254 * This is only an approximation, but it's generally good enough.
2255 */
285a6bda
DV
2256Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
2257 if (granularity < Dygraph.MONTHLY) {
32988383 2258 // Generate one tick mark for every fixed interval of time.
285a6bda 2259 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383
DV
2260 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
2261 } else {
2262 var year_mod = 1; // e.g. to only print one point every 10 years.
2263 var num_months = 12;
285a6bda
DV
2264 if (granularity == Dygraph.QUARTERLY) num_months = 3;
2265 if (granularity == Dygraph.BIANNUAL) num_months = 2;
2266 if (granularity == Dygraph.ANNUAL) num_months = 1;
2267 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
062ef401 2268 if (granularity == Dygraph.CENTENNIAL) { num_months = 1; year_mod = 100; }
32988383
DV
2269
2270 var msInYear = 365.2524 * 24 * 3600 * 1000;
2271 var num_years = 1.0 * (end_time - start_time) / msInYear;
2272 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
2273 }
2274};
2275
629a09ae
DV
2276/**
2277 * @private
2278 *
2279 * Construct an x-axis of nicely-formatted times on meaningful boundaries
2280 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2281 *
2282 * Returns an array containing {v: millis, label: label} dictionaries.
2283 */
285a6bda 2284Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
bf640e56 2285 var formatter = this.attr_("xAxisLabelFormatter");
32988383 2286 var ticks = [];
285a6bda 2287 if (granularity < Dygraph.MONTHLY) {
32988383 2288 // Generate one tick mark for every fixed interval of time.
285a6bda 2289 var spacing = Dygraph.SHORT_SPACINGS[granularity];
3d29302c 2290 var format = '%d%b'; // e.g. "1Jan"
076c9622
DV
2291
2292 // Find a time less than start_time which occurs on a "nice" time boundary
2293 // for this granularity.
2294 var g = spacing / 1000;
076c9622
DV
2295 var d = new Date(start_time);
2296 if (g <= 60) { // seconds
2297 var x = d.getSeconds(); d.setSeconds(x - x % g);
2298 } else {
2299 d.setSeconds(0);
2300 g /= 60;
2301 if (g <= 60) { // minutes
2302 var x = d.getMinutes(); d.setMinutes(x - x % g);
2303 } else {
2304 d.setMinutes(0);
2305 g /= 60;
2306
2307 if (g <= 24) { // days
2308 var x = d.getHours(); d.setHours(x - x % g);
2309 } else {
2310 d.setHours(0);
2311 g /= 24;
2312
2313 if (g == 7) { // one week
20a41c17 2314 d.setDate(d.getDate() - d.getDay());
076c9622
DV
2315 }
2316 }
2317 }
328bb812 2318 }
076c9622
DV
2319 start_time = d.getTime();
2320
32988383 2321 for (var t = start_time; t <= end_time; t += spacing) {
bf640e56 2322 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
32988383
DV
2323 }
2324 } else {
2325 // Display a tick mark on the first of a set of months of each year.
2326 // Years get a tick mark iff y % year_mod == 0. This is useful for
2327 // displaying a tick mark once every 10 years, say, on long time scales.
2328 var months;
2329 var year_mod = 1; // e.g. to only print one point every 10 years.
2330
285a6bda 2331 if (granularity == Dygraph.MONTHLY) {
32988383 2332 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
285a6bda 2333 } else if (granularity == Dygraph.QUARTERLY) {
32988383 2334 months = [ 0, 3, 6, 9 ];
285a6bda 2335 } else if (granularity == Dygraph.BIANNUAL) {
32988383 2336 months = [ 0, 6 ];
285a6bda 2337 } else if (granularity == Dygraph.ANNUAL) {
32988383 2338 months = [ 0 ];
285a6bda 2339 } else if (granularity == Dygraph.DECADAL) {
32988383
DV
2340 months = [ 0 ];
2341 year_mod = 10;
062ef401
JB
2342 } else if (granularity == Dygraph.CENTENNIAL) {
2343 months = [ 0 ];
2344 year_mod = 100;
2345 } else {
2346 this.warn("Span of dates is too long");
32988383
DV
2347 }
2348
2349 var start_year = new Date(start_time).getFullYear();
2350 var end_year = new Date(end_time).getFullYear();
285a6bda 2351 var zeropad = Dygraph.zeropad;
32988383
DV
2352 for (var i = start_year; i <= end_year; i++) {
2353 if (i % year_mod != 0) continue;
2354 for (var j = 0; j < months.length; j++) {
2355 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
d96b7d1a 2356 var t = Dygraph.dateStrToMillis(date_str);
32988383 2357 if (t < start_time || t > end_time) continue;
bf640e56 2358 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
32988383
DV
2359 }
2360 }
2361 }
2362
2363 return ticks;
2364};
2365
6a1aa64f
DV
2366
2367/**
2368 * Add ticks to the x-axis based on a date range.
2369 * @param {Number} startDate Start of the date window (millis since epoch)
2370 * @param {Number} endDate End of the date window (millis since epoch)
629a09ae
DV
2371 * @param {Dygraph} self The dygraph object
2372 * @return { [Object] } Array of {label, value} tuples.
6a1aa64f
DV
2373 * @public
2374 */
285a6bda 2375Dygraph.dateTicker = function(startDate, endDate, self) {
629a09ae 2376 // TODO(danvk): why does this take 'self' as a param?
32988383 2377 var chosen = -1;
285a6bda
DV
2378 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
2379 var num_ticks = self.NumXTicks(startDate, endDate, i);
2380 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
32988383
DV
2381 chosen = i;
2382 break;
2769de62 2383 }
6a1aa64f
DV
2384 }
2385
32988383 2386 if (chosen >= 0) {
285a6bda 2387 return self.GetXAxis(startDate, endDate, chosen);
6a1aa64f 2388 } else {
32988383 2389 // TODO(danvk): signal error.
6a1aa64f 2390 }
6a1aa64f
DV
2391};
2392
629a09ae
DV
2393/**
2394 * @private
2395 * This is a list of human-friendly values at which to show tick marks on a log
2396 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2397 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2398 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2399 */
0cfa06d1 2400Dygraph.PREFERRED_LOG_TICK_VALUES = function() {
6821efbe
RK
2401 var vals = [];
2402 for (var power = -39; power <= 39; power++) {
2403 var range = Math.pow(10, power);
4b467120
RK
2404 for (var mult = 1; mult <= 9; mult++) {
2405 var val = range * mult;
6821efbe
RK
2406 vals.push(val);
2407 }
2408 }
2409 return vals;
2410}();
2411
629a09ae
DV
2412/**
2413 * @private
2414 * Implementation of binary search over an array.
2415 * Currently does not work when val is outside the range of arry's values.
2416 * @param { Integer } val the value to search for
2417 * @param { Integer[] } arry is the value over which to search
2418 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2419 * If abs < 0, find the highest entry less than val.
2420 * if abs == 0, find the entry that equals val.
2421 * @param { Integer } [low] The first index in arry to consider (optional)
2422 * @param { Integer } [high] The last index in arry to consider (optional)
2423 */
0cfa06d1
RK
2424Dygraph.binarySearch = function(val, arry, abs, low, high) {
2425 if (low == null || high == null) {
2426 low = 0;
2427 high = arry.length - 1;
2428 }
2429 if (low > high) {
2430 return -1;
2431 }
2432 if (abs == null) {
2433 abs = 0;
2434 }
2435 var validIndex = function(idx) {
2436 return idx >= 0 && idx < arry.length;
2437 }
2438 var mid = parseInt((low + high) / 2);
2439 var element = arry[mid];
2440 if (element == val) {
2441 return mid;
2442 }
2443 if (element > val) {
2444 if (abs > 0) {
2445 // Accept if element > val, but also if prior element < val.
2446 var idx = mid - 1;
2447 if (validIndex(idx) && arry[idx] < val) {
2448 return mid;
2449 }
2450 }
c1bc242a 2451 return Dygraph.binarySearch(val, arry, abs, low, mid - 1);
0cfa06d1
RK
2452 }
2453 if (element < val) {
2454 if (abs < 0) {
2455 // Accept if element < val, but also if prior element > val.
2456 var idx = mid + 1;
2457 if (validIndex(idx) && arry[idx] > val) {
2458 return mid;
2459 }
2460 }
2461 return Dygraph.binarySearch(val, arry, abs, mid + 1, high);
2462 }
60a19014 2463};
0cfa06d1 2464
629a09ae 2465// TODO(konigsberg): Update comment.
6a1aa64f
DV
2466/**
2467 * Add ticks when the x axis has numbers on it (instead of dates)
ff022deb 2468 *
7d0e7a0d
RK
2469 * @param {Number} minV minimum value
2470 * @param {Number} maxV maximum value
84fc6aa7 2471 * @param self
f30cf740 2472 * @param {function} attribute accessor function.
629a09ae 2473 * @return {[Object]} Array of {label, value} tuples.
6a1aa64f 2474 */
0d64e596 2475Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
70c80071
DV
2476 var attr = function(k) {
2477 if (axis_props && axis_props.hasOwnProperty(k)) return axis_props[k];
2478 return self.attr_(k);
2479 };
f09fc545 2480
0d64e596
DV
2481 var ticks = [];
2482 if (vals) {
2483 for (var i = 0; i < vals.length; i++) {
e863a17d 2484 ticks.push({v: vals[i]});
0d64e596 2485 }
f09e46d4 2486 } else {
7d0e7a0d 2487 if (axis_props && attr("logscale")) {
ff022deb 2488 var pixelsPerTick = attr('pixelsPerYLabel');
7d0e7a0d 2489 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
ff022deb 2490 var nTicks = Math.floor(self.height_ / pixelsPerTick);
0cfa06d1
RK
2491 var minIdx = Dygraph.binarySearch(minV, Dygraph.PREFERRED_LOG_TICK_VALUES, 1);
2492 var maxIdx = Dygraph.binarySearch(maxV, Dygraph.PREFERRED_LOG_TICK_VALUES, -1);
2493 if (minIdx == -1) {
6821efbe
RK
2494 minIdx = 0;
2495 }
0cfa06d1
RK
2496 if (maxIdx == -1) {
2497 maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1;
6821efbe 2498 }
0cfa06d1
RK
2499 // Count the number of tick values would appear, if we can get at least
2500 // nTicks / 4 accept them.
00aa7f61 2501 var lastDisplayed = null;
0cfa06d1 2502 if (maxIdx - minIdx >= nTicks / 4) {
00aa7f61 2503 var axisId = axis_props.yAxisId;
0cfa06d1
RK
2504 for (var idx = maxIdx; idx >= minIdx; idx--) {
2505 var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx];
00aa7f61
RK
2506 var domCoord = axis_props.g.toDomYCoord(tickValue, axisId);
2507 var tick = { v: tickValue };
2508 if (lastDisplayed == null) {
2509 lastDisplayed = {
2510 tickValue : tickValue,
2511 domCoord : domCoord
2512 };
2513 } else {
2514 if (domCoord - lastDisplayed.domCoord >= pixelsPerTick) {
2515 lastDisplayed = {
2516 tickValue : tickValue,
2517 domCoord : domCoord
2518 };
2519 } else {
c1bc242a 2520 tick.label = "";
00aa7f61
RK
2521 }
2522 }
2523 ticks.push(tick);
6821efbe 2524 }
0cfa06d1
RK
2525 // Since we went in backwards order.
2526 ticks.reverse();
6821efbe 2527 }
f09e46d4 2528 }
c1bc242a 2529
6821efbe
RK
2530 // ticks.length won't be 0 if the log scale function finds values to insert.
2531 if (ticks.length == 0) {
ff022deb
RK
2532 // Basic idea:
2533 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2534 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
2535 // The first spacing greater than pixelsPerYLabel is what we use.
2536 // TODO(danvk): version that works on a log scale.
0d64e596 2537 if (attr("labelsKMG2")) {
ff022deb 2538 var mults = [1, 2, 4, 8];
0d64e596 2539 } else {
ff022deb 2540 var mults = [1, 2, 5];
0d64e596 2541 }
ff022deb
RK
2542 var scale, low_val, high_val, nTicks;
2543 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2544 var pixelsPerTick = attr('pixelsPerYLabel');
2545 for (var i = -10; i < 50; i++) {
2546 if (attr("labelsKMG2")) {
2547 var base_scale = Math.pow(16, i);
2548 } else {
2549 var base_scale = Math.pow(10, i);
2550 }
2551 for (var j = 0; j < mults.length; j++) {
2552 scale = base_scale * mults[j];
2553 low_val = Math.floor(minV / scale) * scale;
2554 high_val = Math.ceil(maxV / scale) * scale;
2555 nTicks = Math.abs(high_val - low_val) / scale;
2556 var spacing = self.height_ / nTicks;
2557 // wish I could break out of both loops at once...
2558 if (spacing > pixelsPerTick) break;
2559 }
0d64e596
DV
2560 if (spacing > pixelsPerTick) break;
2561 }
0d64e596 2562
ff022deb
RK
2563 // Construct the set of ticks.
2564 // Allow reverse y-axis if it's explicitly requested.
2565 if (low_val > high_val) scale *= -1;
2566 for (var i = 0; i < nTicks; i++) {
2567 var tickV = low_val + i * scale;
2568 ticks.push( {v: tickV} );
2569 }
0d64e596 2570 }
6a1aa64f
DV
2571 }
2572
0d64e596 2573 // Add formatted labels to the ticks.
ed11be50
DV
2574 var k;
2575 var k_labels = [];
f09fc545 2576 if (attr("labelsKMB")) {
ed11be50
DV
2577 k = 1000;
2578 k_labels = [ "K", "M", "B", "T" ];
2579 }
f09fc545 2580 if (attr("labelsKMG2")) {
ed11be50
DV
2581 if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2582 k = 1024;
2583 k_labels = [ "k", "M", "G", "T" ];
2584 }
3c1d225b
JB
2585 var formatter = attr('yAxisLabelFormatter') ?
2586 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2587
0cfa06d1 2588 // Add labels to the ticks.
0d64e596 2589 for (var i = 0; i < ticks.length; i++) {
e863a17d 2590 if (ticks[i].label !== undefined) continue; // Use current label.
0d64e596 2591 var tickV = ticks[i].v;
0af6e346 2592 var absTickV = Math.abs(tickV);
2e1fcf1a 2593 var label = formatter(tickV, self);
3c1d225b 2594 if (k_labels.length > 0) {
ed11be50
DV
2595 // Round up to an appropriate unit.
2596 var n = k*k*k*k;
2597 for (var j = 3; j >= 0; j--, n /= k) {
2598 if (absTickV >= n) {
17d0210c 2599 label = Dygraph.round_(tickV / n, attr('digitsAfterDecimal')) + k_labels[j];
ed11be50
DV
2600 break;
2601 }
afefbcdb 2602 }
6a1aa64f 2603 }
d916677a 2604 ticks[i].label = label;
6a1aa64f 2605 }
d916677a 2606
032e4c1d 2607 return ticks;
6a1aa64f
DV
2608};
2609
629a09ae
DV
2610/**
2611 * @private
2612 * Computes the range of the data series (including confidence intervals).
2613 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2614 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2615 * @return [low, high]
2616 */
5011e7a1
DV
2617Dygraph.prototype.extremeValues_ = function(series) {
2618 var minY = null, maxY = null;
2619
9922b78b 2620 var bars = this.attr_("errorBars") || this.attr_("customBars");
5011e7a1
DV
2621 if (bars) {
2622 // With custom bars, maxY is the max of the high values.
2623 for (var j = 0; j < series.length; j++) {
2624 var y = series[j][1][0];
2625 if (!y) continue;
2626 var low = y - series[j][1][1];
2627 var high = y + series[j][1][2];
2628 if (low > y) low = y; // this can happen with custom bars,
2629 if (high < y) high = y; // e.g. in tests/custom-bars.html
2630 if (maxY == null || high > maxY) {
2631 maxY = high;
2632 }
2633 if (minY == null || low < minY) {
2634 minY = low;
2635 }
2636 }
2637 } else {
2638 for (var j = 0; j < series.length; j++) {
2639 var y = series[j][1];
d12999d3 2640 if (y === null || isNaN(y)) continue;
5011e7a1
DV
2641 if (maxY == null || y > maxY) {
2642 maxY = y;
2643 }
2644 if (minY == null || y < minY) {
2645 minY = y;
2646 }
2647 }
2648 }
2649
2650 return [minY, maxY];
2651};
2652
6a1aa64f 2653/**
629a09ae 2654 * @private
26ca7938
DV
2655 * This function is called once when the chart's data is changed or the options
2656 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2657 * idea is that values derived from the chart's data can be computed here,
2658 * rather than every time the chart is drawn. This includes things like the
2659 * number of axes, rolling averages, etc.
2660 */
2661Dygraph.prototype.predraw_ = function() {
2662 // TODO(danvk): move more computations out of drawGraph_ and into here.
2663 this.computeYAxes_();
2664
2665 // Create a new plotter.
70c80071 2666 if (this.plotter_) this.plotter_.clear();
26ca7938 2667 this.plotter_ = new DygraphCanvasRenderer(this,
2cf95fff
RK
2668 this.hidden_,
2669 this.hidden_ctx_,
0e23cfc6 2670 this.layout_);
26ca7938 2671
0abfbd7e
DV
2672 // The roller sits in the bottom left corner of the chart. We don't know where
2673 // this will be until the options are available, so it's positioned here.
8c69de65 2674 this.createRollInterface_();
26ca7938 2675
0abfbd7e
DV
2676 // Same thing applies for the labelsDiv. It's right edge should be flush with
2677 // the right edge of the charting area (which may not be the same as the right
2678 // edge of the div, if we have two y-axes.
2679 this.positionLabelsDiv_();
2680
26ca7938
DV
2681 // If the data or options have changed, then we'd better redraw.
2682 this.drawGraph_();
2683};
2684
2685/**
2686 * Update the graph with new data. This method is called when the viewing area
2687 * has changed. If the underlying data or options have changed, predraw_ will
2688 * be called before drawGraph_ is called.
fc4e84fa
RK
2689 *
2690 * clearSelection, when undefined or true, causes this.clearSelection to be
2691 * called at the end of the draw operation. This should rarely be defined,
2692 * and never true (that is it should be undefined most of the time, and
2693 * rarely false.)
2694 *
6a1aa64f
DV
2695 * @private
2696 */
fc4e84fa 2697Dygraph.prototype.drawGraph_ = function(clearSelection) {
c682f205 2698 if (typeof(clearSelection) === 'undefined') {
fc4e84fa
RK
2699 clearSelection = true;
2700 }
2701
26ca7938
DV
2702 var data = this.rawData_;
2703
fe0b7c03
DV
2704 // This is used to set the second parameter to drawCallback, below.
2705 var is_initial_draw = this.is_initial_draw_;
2706 this.is_initial_draw_ = false;
2707
3bd9c228 2708 var minY = null, maxY = null;
6a1aa64f 2709 this.layout_.removeAllDatasets();
285a6bda 2710 this.setColors_();
9317362d 2711 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
285a6bda 2712
354e15ab
DE
2713 // Loop over the fields (series). Go from the last to the first,
2714 // because if they're stacked that's how we accumulate the values.
43af96e7 2715
354e15ab
DE
2716 var cumulative_y = []; // For stacked series.
2717 var datasets = [];
2718
f09fc545
DV
2719 var extremes = {}; // series name -> [low, high]
2720
354e15ab
DE
2721 // Loop over all fields and create datasets
2722 for (var i = data[0].length - 1; i >= 1; i--) {
1cf11047
DV
2723 if (!this.visibility()[i - 1]) continue;
2724
f09fc545 2725 var seriesName = this.attr_("labels")[i];
450fe64b 2726 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
6e6a2b0a 2727 var logScale = this.attr_('logscale', i);
450fe64b 2728
6a1aa64f
DV
2729 var series = [];
2730 for (var j = 0; j < data.length; j++) {
6e6a2b0a
RK
2731 var date = data[j][0];
2732 var point = data[j][i];
2733 if (logScale) {
2734 // On the log scale, points less than zero do not exist.
2735 // This will create a gap in the chart. Note that this ignores
2736 // connectSeparatedPoints.
e863a17d 2737 if (point <= 0) {
6e6a2b0a
RK
2738 point = null;
2739 }
2740 series.push([date, point]);
2741 } else {
2742 if (point != null || !connectSeparatedPoints) {
2743 series.push([date, point]);
2744 }
f032c51d 2745 }
6a1aa64f 2746 }
2f5e7e1a
DV
2747
2748 // TODO(danvk): move this into predraw_. It's insane to do it here.
6a1aa64f
DV
2749 series = this.rollingAverage(series, this.rollPeriod_);
2750
2751 // Prune down to the desired range, if necessary (for zooming)
1a26f3fb
DV
2752 // Because there can be lines going to points outside of the visible area,
2753 // we actually prune to visible points, plus one on either side.
9922b78b 2754 var bars = this.attr_("errorBars") || this.attr_("customBars");
6a1aa64f
DV
2755 if (this.dateWindow_) {
2756 var low = this.dateWindow_[0];
2757 var high= this.dateWindow_[1];
2758 var pruned = [];
1a26f3fb
DV
2759 // TODO(danvk): do binary search instead of linear search.
2760 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2761 var firstIdx = null, lastIdx = null;
6a1aa64f 2762 for (var k = 0; k < series.length; k++) {
1a26f3fb
DV
2763 if (series[k][0] >= low && firstIdx === null) {
2764 firstIdx = k;
2765 }
2766 if (series[k][0] <= high) {
2767 lastIdx = k;
6a1aa64f
DV
2768 }
2769 }
1a26f3fb
DV
2770 if (firstIdx === null) firstIdx = 0;
2771 if (firstIdx > 0) firstIdx--;
2772 if (lastIdx === null) lastIdx = series.length - 1;
2773 if (lastIdx < series.length - 1) lastIdx++;
16269f6e 2774 this.boundaryIds_[i-1] = [firstIdx, lastIdx];
1a26f3fb
DV
2775 for (var k = firstIdx; k <= lastIdx; k++) {
2776 pruned.push(series[k]);
6a1aa64f
DV
2777 }
2778 series = pruned;
16269f6e
NAG
2779 } else {
2780 this.boundaryIds_[i-1] = [0, series.length-1];
6a1aa64f
DV
2781 }
2782
f09fc545 2783 var seriesExtremes = this.extremeValues_(series);
5011e7a1 2784
6a1aa64f 2785 if (bars) {
354e15ab
DE
2786 for (var j=0; j<series.length; j++) {
2787 val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
2788 series[j] = val;
2789 }
43af96e7 2790 } else if (this.attr_("stackedGraph")) {
43af96e7
NK
2791 var l = series.length;
2792 var actual_y;
2793 for (var j = 0; j < l; j++) {
354e15ab
DE
2794 // If one data set has a NaN, let all subsequent stacked
2795 // sets inherit the NaN -- only start at 0 for the first set.
2796 var x = series[j][0];
41b0f691 2797 if (cumulative_y[x] === undefined) {
354e15ab 2798 cumulative_y[x] = 0;
41b0f691 2799 }
43af96e7
NK
2800
2801 actual_y = series[j][1];
354e15ab 2802 cumulative_y[x] += actual_y;
43af96e7 2803
354e15ab 2804 series[j] = [x, cumulative_y[x]]
43af96e7 2805
41b0f691
DV
2806 if (cumulative_y[x] > seriesExtremes[1]) {
2807 seriesExtremes[1] = cumulative_y[x];
2808 }
2809 if (cumulative_y[x] < seriesExtremes[0]) {
2810 seriesExtremes[0] = cumulative_y[x];
2811 }
43af96e7 2812 }
6a1aa64f 2813 }
41b0f691 2814 extremes[seriesName] = seriesExtremes;
354e15ab
DE
2815
2816 datasets[i] = series;
6a1aa64f
DV
2817 }
2818
354e15ab 2819 for (var i = 1; i < datasets.length; i++) {
4523c1f6 2820 if (!this.visibility()[i - 1]) continue;
354e15ab 2821 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
43af96e7
NK
2822 }
2823
6faebb69 2824 this.computeYAxisRanges_(extremes);
b2c9222a
DV
2825 this.layout_.setYAxes(this.axes_);
2826
6a1aa64f
DV
2827 this.addXTicks_();
2828
b2c9222a 2829 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
81856f70 2830 var tmp_zoomed_x = this.zoomed_x_;
6a1aa64f 2831 // Tell PlotKit to use this new data and render itself
b2c9222a 2832 this.layout_.setDateWindow(this.dateWindow_);
81856f70 2833 this.zoomed_x_ = tmp_zoomed_x;
6a1aa64f
DV
2834 this.layout_.evaluateWithError();
2835 this.plotter_.clear();
2836 this.plotter_.render();
f6401bf6 2837 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2f5e7e1a 2838 this.canvas_.height);
599fb4ad 2839
2fccd3dc
DV
2840 if (is_initial_draw) {
2841 // Generate a static legend before any particular point is selected.
91c10d9c 2842 this.setLegendHTML_();
06303c32 2843 } else {
fc4e84fa
RK
2844 if (clearSelection) {
2845 if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
2846 // We should select the point nearest the page x/y here, but it's easier
2847 // to just clear the selection. This prevents erroneous hover dots from
2848 // being displayed.
2849 this.clearSelection();
2850 } else {
2851 this.clearSelection();
2852 }
06303c32 2853 }
2fccd3dc
DV
2854 }
2855
599fb4ad 2856 if (this.attr_("drawCallback") !== null) {
fe0b7c03 2857 this.attr_("drawCallback")(this, is_initial_draw);
599fb4ad 2858 }
6a1aa64f
DV
2859};
2860
2861/**
629a09ae 2862 * @private
26ca7938
DV
2863 * Determine properties of the y-axes which are independent of the data
2864 * currently being displayed. This includes things like the number of axes and
2865 * the style of the axes. It does not include the range of each axis and its
2866 * tick marks.
2867 * This fills in this.axes_ and this.seriesToAxisMap_.
2868 * axes_ = [ { options } ]
2869 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2870 * indices are into the axes_ array.
f09fc545 2871 */
26ca7938 2872Dygraph.prototype.computeYAxes_ = function() {
00aa7f61 2873 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
26ca7938
DV
2874 this.seriesToAxisMap_ = {};
2875
2876 // Get a list of series names.
2877 var labels = this.attr_("labels");
1c77a3a1 2878 var series = {};
26ca7938 2879 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
f09fc545
DV
2880
2881 // all options which could be applied per-axis:
2882 var axisOptions = [
2883 'includeZero',
2884 'valueRange',
2885 'labelsKMB',
2886 'labelsKMG2',
2887 'pixelsPerYLabel',
2888 'yAxisLabelWidth',
2889 'axisLabelFontSize',
7d0e7a0d
RK
2890 'axisTickSize',
2891 'logscale'
f09fc545
DV
2892 ];
2893
2894 // Copy global axis options over to the first axis.
2895 for (var i = 0; i < axisOptions.length; i++) {
2896 var k = axisOptions[i];
2897 var v = this.attr_(k);
26ca7938 2898 if (v) this.axes_[0][k] = v;
f09fc545
DV
2899 }
2900
2901 // Go through once and add all the axes.
26ca7938
DV
2902 for (var seriesName in series) {
2903 if (!series.hasOwnProperty(seriesName)) continue;
f09fc545
DV
2904 var axis = this.attr_("axis", seriesName);
2905 if (axis == null) {
26ca7938 2906 this.seriesToAxisMap_[seriesName] = 0;
f09fc545
DV
2907 continue;
2908 }
2909 if (typeof(axis) == 'object') {
2910 // Add a new axis, making a copy of its per-axis options.
2911 var opts = {};
26ca7938 2912 Dygraph.update(opts, this.axes_[0]);
f09fc545 2913 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
00aa7f61
RK
2914 var yAxisId = this.axes_.length;
2915 opts.yAxisId = yAxisId;
2916 opts.g = this;
f09fc545 2917 Dygraph.update(opts, axis);
26ca7938 2918 this.axes_.push(opts);
00aa7f61 2919 this.seriesToAxisMap_[seriesName] = yAxisId;
f09fc545
DV
2920 }
2921 }
2922
2923 // Go through one more time and assign series to an axis defined by another
2924 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
26ca7938
DV
2925 for (var seriesName in series) {
2926 if (!series.hasOwnProperty(seriesName)) continue;
f09fc545
DV
2927 var axis = this.attr_("axis", seriesName);
2928 if (typeof(axis) == 'string') {
26ca7938 2929 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
f09fc545
DV
2930 this.error("Series " + seriesName + " wants to share a y-axis with " +
2931 "series " + axis + ", which does not define its own axis.");
2932 return null;
2933 }
26ca7938
DV
2934 var idx = this.seriesToAxisMap_[axis];
2935 this.seriesToAxisMap_[seriesName] = idx;
f09fc545
DV
2936 }
2937 }
1c77a3a1
DV
2938
2939 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2940 // this last so that hiding the first series doesn't destroy the axis
2941 // properties of the primary axis.
2942 var seriesToAxisFiltered = {};
2943 var vis = this.visibility();
2944 for (var i = 1; i < labels.length; i++) {
2945 var s = labels[i];
2946 if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s];
2947 }
2948 this.seriesToAxisMap_ = seriesToAxisFiltered;
26ca7938
DV
2949};
2950
2951/**
2952 * Returns the number of y-axes on the chart.
2953 * @return {Number} the number of axes.
2954 */
2955Dygraph.prototype.numAxes = function() {
2956 var last_axis = 0;
2957 for (var series in this.seriesToAxisMap_) {
2958 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2959 var idx = this.seriesToAxisMap_[series];
2960 if (idx > last_axis) last_axis = idx;
2961 }
2962 return 1 + last_axis;
2963};
2964
2965/**
629a09ae 2966 * @private
b2c9222a
DV
2967 * Returns axis properties for the given series.
2968 * @param { String } setName The name of the series for which to get axis
2969 * properties, e.g. 'Y1'.
2970 * @return { Object } The axis properties.
2971 */
2972Dygraph.prototype.axisPropertiesForSeries = function(series) {
2973 // TODO(danvk): handle errors.
2974 return this.axes_[this.seriesToAxisMap_[series]];
2975};
2976
2977/**
2978 * @private
26ca7938
DV
2979 * Determine the value range and tick marks for each axis.
2980 * @param {Object} extremes A mapping from seriesName -> [low, high]
2981 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2982 */
2983Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2984 // Build a map from axis number -> [list of series names]
2985 var seriesForAxis = [];
2986 for (var series in this.seriesToAxisMap_) {
2987 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2988 var idx = this.seriesToAxisMap_[series];
2989 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2990 seriesForAxis[idx].push(series);
2991 }
f09fc545
DV
2992
2993 // Compute extreme values, a span and tick marks for each axis.
26ca7938
DV
2994 for (var i = 0; i < this.axes_.length; i++) {
2995 var axis = this.axes_[i];
4cac8c7a 2996
06fc69b6
AV
2997 if (!seriesForAxis[i]) {
2998 // If no series are defined or visible then use a reasonable default
2999 axis.extremeRange = [0, 1];
3000 } else {
1c77a3a1 3001 // Calculate the extremes of extremes.
f09fc545
DV
3002 var series = seriesForAxis[i];
3003 var minY = Infinity; // extremes[series[0]][0];
3004 var maxY = -Infinity; // extremes[series[0]][1];
ba049b89 3005 var extremeMinY, extremeMaxY;
f09fc545 3006 for (var j = 0; j < series.length; j++) {
ba049b89
NN
3007 // Only use valid extremes to stop null data series' from corrupting the scale.
3008 extremeMinY = extremes[series[j]][0];
3009 if (extremeMinY != null) {
36dfa958 3010 minY = Math.min(extremeMinY, minY);
ba049b89
NN
3011 }
3012 extremeMaxY = extremes[series[j]][1];
3013 if (extremeMaxY != null) {
36dfa958 3014 maxY = Math.max(extremeMaxY, maxY);
ba049b89 3015 }
f09fc545
DV
3016 }
3017 if (axis.includeZero && minY > 0) minY = 0;
3018
ba049b89 3019 // Ensure we have a valid scale, otherwise defualt to zero for safety.
36dfa958
DV
3020 if (minY == Infinity) minY = 0;
3021 if (maxY == -Infinity) maxY = 0;
ba049b89 3022
f09fc545
DV
3023 // Add some padding and round up to an integer to be human-friendly.
3024 var span = maxY - minY;
3025 // special case: if we have no sense of scale, use +/-10% of the sole value.
3026 if (span == 0) { span = maxY; }
f09fc545 3027
ff022deb
RK
3028 var maxAxisY;
3029 var minAxisY;
7d0e7a0d 3030 if (axis.logscale) {
ff022deb
RK
3031 var maxAxisY = maxY + 0.1 * span;
3032 var minAxisY = minY;
3033 } else {
3034 var maxAxisY = maxY + 0.1 * span;
3035 var minAxisY = minY - 0.1 * span;
f09fc545 3036
ff022deb
RK
3037 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
3038 if (!this.attr_("avoidMinZero")) {
3039 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
3040 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
3041 }
f09fc545 3042
ff022deb
RK
3043 if (this.attr_("includeZero")) {
3044 if (maxY < 0) maxAxisY = 0;
3045 if (minY > 0) minAxisY = 0;
3046 }
f09fc545 3047 }
4cac8c7a
RK
3048 axis.extremeRange = [minAxisY, maxAxisY];
3049 }
3050 if (axis.valueWindow) {
3051 // This is only set if the user has zoomed on the y-axis. It is never set
3052 // by a user. It takes precedence over axis.valueRange because, if you set
3053 // valueRange, you'd still expect to be able to pan.
3054 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
3055 } else if (axis.valueRange) {
3056 // This is a user-set value range for this axis.
3057 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
3058 } else {
3059 axis.computedValueRange = axis.extremeRange;
f09fc545
DV
3060 }
3061
0d64e596
DV
3062 // Add ticks. By default, all axes inherit the tick positions of the
3063 // primary axis. However, if an axis is specifically marked as having
3064 // independent ticks, then that is permissible as well.
3065 if (i == 0 || axis.independentTicks) {
032e4c1d 3066 axis.ticks =
0d64e596
DV
3067 Dygraph.numericTicks(axis.computedValueRange[0],
3068 axis.computedValueRange[1],
3069 this,
3070 axis);
3071 } else {
3072 var p_axis = this.axes_[0];
3073 var p_ticks = p_axis.ticks;
3074 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
3075 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
3076 var tick_values = [];
3077 for (var i = 0; i < p_ticks.length; i++) {
3078 var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
3079 var y_val = axis.computedValueRange[0] + y_frac * scale;
3080 tick_values.push(y_val);
3081 }
3082
032e4c1d 3083 axis.ticks =
0d64e596
DV
3084 Dygraph.numericTicks(axis.computedValueRange[0],
3085 axis.computedValueRange[1],
3086 this, axis, tick_values);
3087 }
f09fc545 3088 }
f09fc545
DV
3089};
3090
3091/**
629a09ae 3092 * @private
6a1aa64f
DV
3093 * Calculates the rolling average of a data set.
3094 * If originalData is [label, val], rolls the average of those.
3095 * If originalData is [label, [, it's interpreted as [value, stddev]
3096 * and the roll is returned in the same form, with appropriately reduced
3097 * stddev for each value.
3098 * Note that this is where fractional input (i.e. '5/10') is converted into
3099 * decimal values.
3100 * @param {Array} originalData The data in the appropriate format (see above)
6faebb69
JB
3101 * @param {Number} rollPeriod The number of points over which to average the
3102 * data
6a1aa64f 3103 */
285a6bda 3104Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
6a1aa64f
DV
3105 if (originalData.length < 2)
3106 return originalData;
3107 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
3108 var rollingData = [];
285a6bda 3109 var sigma = this.attr_("sigma");
6a1aa64f
DV
3110
3111 if (this.fractions_) {
3112 var num = 0;
3113 var den = 0; // numerator/denominator
3114 var mult = 100.0;
3115 for (var i = 0; i < originalData.length; i++) {
3116 num += originalData[i][1][0];
3117 den += originalData[i][1][1];
3118 if (i - rollPeriod >= 0) {
3119 num -= originalData[i - rollPeriod][1][0];
3120 den -= originalData[i - rollPeriod][1][1];
3121 }
3122
3123 var date = originalData[i][0];
3124 var value = den ? num / den : 0.0;
285a6bda 3125 if (this.attr_("errorBars")) {
6a1aa64f
DV
3126 if (this.wilsonInterval_) {
3127 // For more details on this confidence interval, see:
3128 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
3129 if (den) {
3130 var p = value < 0 ? 0 : value, n = den;
3131 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
3132 var denom = 1 + sigma * sigma / den;
3133 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
3134 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
3135 rollingData[i] = [date,
3136 [p * mult, (p - low) * mult, (high - p) * mult]];
3137 } else {
3138 rollingData[i] = [date, [0, 0, 0]];
3139 }
3140 } else {
3141 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
3142 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
3143 }
3144 } else {
3145 rollingData[i] = [date, mult * value];
3146 }
3147 }
9922b78b 3148 } else if (this.attr_("customBars")) {
f6885d6a
DV
3149 var low = 0;
3150 var mid = 0;
3151 var high = 0;
3152 var count = 0;
6a1aa64f
DV
3153 for (var i = 0; i < originalData.length; i++) {
3154 var data = originalData[i][1];
3155 var y = data[1];
3156 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
f6885d6a 3157
8b91c51f 3158 if (y != null && !isNaN(y)) {
49a7d0d5
DV
3159 low += data[0];
3160 mid += y;
3161 high += data[2];
3162 count += 1;
3163 }
f6885d6a
DV
3164 if (i - rollPeriod >= 0) {
3165 var prev = originalData[i - rollPeriod];
8b91c51f 3166 if (prev[1][1] != null && !isNaN(prev[1][1])) {
49a7d0d5
DV
3167 low -= prev[1][0];
3168 mid -= prev[1][1];
3169 high -= prev[1][2];
3170 count -= 1;
3171 }
f6885d6a
DV
3172 }
3173 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
3174 1.0 * (mid - low) / count,
3175 1.0 * (high - mid) / count ]];
2769de62 3176 }
6a1aa64f
DV
3177 } else {
3178 // Calculate the rolling average for the first rollPeriod - 1 points where
6faebb69 3179 // there is not enough data to roll over the full number of points
6a1aa64f 3180 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
285a6bda 3181 if (!this.attr_("errorBars")){
5011e7a1
DV
3182 if (rollPeriod == 1) {
3183 return originalData;
3184 }
3185
2847c1cf 3186 for (var i = 0; i < originalData.length; i++) {
6a1aa64f 3187 var sum = 0;
5011e7a1 3188 var num_ok = 0;
2847c1cf
DV
3189 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
3190 var y = originalData[j][1];
8b91c51f 3191 if (y == null || isNaN(y)) continue;
5011e7a1 3192 num_ok++;
2847c1cf 3193 sum += originalData[j][1];
6a1aa64f 3194 }
5011e7a1 3195 if (num_ok) {
2847c1cf 3196 rollingData[i] = [originalData[i][0], sum / num_ok];
5011e7a1 3197 } else {
2847c1cf 3198 rollingData[i] = [originalData[i][0], null];
5011e7a1 3199 }
6a1aa64f 3200 }
2847c1cf
DV
3201
3202 } else {
3203 for (var i = 0; i < originalData.length; i++) {
6a1aa64f
DV
3204 var sum = 0;
3205 var variance = 0;
5011e7a1 3206 var num_ok = 0;
2847c1cf 3207 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
5011e7a1 3208 var y = originalData[j][1][0];
8b91c51f 3209 if (y == null || isNaN(y)) continue;
5011e7a1 3210 num_ok++;
6a1aa64f
DV
3211 sum += originalData[j][1][0];
3212 variance += Math.pow(originalData[j][1][1], 2);
3213 }
5011e7a1
DV
3214 if (num_ok) {
3215 var stddev = Math.sqrt(variance) / num_ok;
3216 rollingData[i] = [originalData[i][0],
3217 [sum / num_ok, sigma * stddev, sigma * stddev]];
3218 } else {
3219 rollingData[i] = [originalData[i][0], [null, null, null]];
3220 }
6a1aa64f
DV
3221 }
3222 }
3223 }
3224
3225 return rollingData;
3226};
3227
3228/**
629a09ae 3229 * @private
6a1aa64f 3230 * Parses a date, returning the number of milliseconds since epoch. This can be
285a6bda
DV
3231 * passed in as an xValueParser in the Dygraph constructor.
3232 * TODO(danvk): enumerate formats that this understands.
6a1aa64f
DV
3233 * @param {String} A date in YYYYMMDD format.
3234 * @return {Number} Milliseconds since epoch.
6a1aa64f 3235 */
285a6bda 3236Dygraph.dateParser = function(dateStr, self) {
6a1aa64f 3237 var dateStrSlashed;
285a6bda 3238 var d;
986a5026 3239 if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
6a1aa64f 3240 dateStrSlashed = dateStr.replace("-", "/", "g");
353a0294
DV
3241 while (dateStrSlashed.search("-") != -1) {
3242 dateStrSlashed = dateStrSlashed.replace("-", "/");
3243 }
d96b7d1a 3244 d = Dygraph.dateStrToMillis(dateStrSlashed);
2769de62 3245 } else if (dateStr.length == 8) { // e.g. '20090712'
285a6bda 3246 // TODO(danvk): remove support for this format. It's confusing.
6a1aa64f
DV
3247 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
3248 + "/" + dateStr.substr(6,2);
d96b7d1a 3249 d = Dygraph.dateStrToMillis(dateStrSlashed);
2769de62
DV
3250 } else {
3251 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3252 // "2009/07/12 12:34:56"
d96b7d1a 3253 d = Dygraph.dateStrToMillis(dateStr);
285a6bda
DV
3254 }
3255
3256 if (!d || isNaN(d)) {
3257 self.error("Couldn't parse " + dateStr + " as a date");
3258 }
3259 return d;
3260};
3261
3262/**
3263 * Detects the type of the str (date or numeric) and sets the various
3264 * formatting attributes in this.attrs_ based on this type.
3265 * @param {String} str An x value.
3266 * @private
3267 */
3268Dygraph.prototype.detectTypeFromString_ = function(str) {
3269 var isDate = false;
ea62df82 3270 if (str.indexOf('-') > 0 ||
285a6bda
DV
3271 str.indexOf('/') >= 0 ||
3272 isNaN(parseFloat(str))) {
3273 isDate = true;
3274 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
3275 // TODO(danvk): remove support for this format.
3276 isDate = true;
3277 }
3278
3279 if (isDate) {
3280 this.attrs_.xValueFormatter = Dygraph.dateString_;
3281 this.attrs_.xValueParser = Dygraph.dateParser;
3282 this.attrs_.xTicker = Dygraph.dateTicker;
bf640e56 3283 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda 3284 } else {
17d0210c 3285 // TODO(danvk): use Dygraph.numberFormatter here?
c39e1d93 3286 /** @private (shut up, jsdoc!) */
032e4c1d 3287 this.attrs_.xValueFormatter = function(x) { return x; };
c39e1d93 3288 /** @private (shut up, jsdoc!) */
285a6bda
DV
3289 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
3290 this.attrs_.xTicker = Dygraph.numericTicks;
bf640e56 3291 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
6a1aa64f 3292 }
6a1aa64f
DV
3293};
3294
3295/**
5cd7ac68
DV
3296 * Parses the value as a floating point number. This is like the parseFloat()
3297 * built-in, but with a few differences:
3298 * - the empty string is parsed as null, rather than NaN.
3299 * - if the string cannot be parsed at all, an error is logged.
3300 * If the string can't be parsed, this method returns null.
3301 * @param {String} x The string to be parsed
3302 * @param {Number} opt_line_no The line number from which the string comes.
3303 * @param {String} opt_line The text of the line from which the string comes.
3304 * @private
3305 */
3306
3307// Parse the x as a float or return null if it's not a number.
3308Dygraph.prototype.parseFloat_ = function(x, opt_line_no, opt_line) {
3309 var val = parseFloat(x);
3310 if (!isNaN(val)) return val;
3311
3312 // Try to figure out what happeend.
3313 // If the value is the empty string, parse it as null.
3314 if (/^ *$/.test(x)) return null;
3315
3316 // If it was actually "NaN", return it as NaN.
3317 if (/^ *nan *$/i.test(x)) return NaN;
3318
3319 // Looks like a parsing error.
3320 var msg = "Unable to parse '" + x + "' as a number";
3321 if (opt_line !== null && opt_line_no !== null) {
3322 msg += " on line " + (1+opt_line_no) + " ('" + opt_line + "') of CSV.";
3323 }
3324 this.error(msg);
3325
3326 return null;
3327};
3328
3329/**
629a09ae 3330 * @private
6a1aa64f
DV
3331 * Parses a string in a special csv format. We expect a csv file where each
3332 * line is a date point, and the first field in each line is the date string.
3333 * We also expect that all remaining fields represent series.
285a6bda 3334 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f 3335 * date, series1, stddev1, series2, stddev2, ...
629a09ae 3336 * @param {[Object]} data See above.
285a6bda 3337 *
629a09ae 3338 * @return [Object] An array with one entry for each row. These entries
285a6bda
DV
3339 * are an array of cells in that row. The first entry is the parsed x-value for
3340 * the row. The second, third, etc. are the y-values. These can take on one of
3341 * three forms, depending on the CSV and constructor parameters:
3342 * 1. numeric value
3343 * 2. [ value, stddev ]
3344 * 3. [ low value, center value, high value ]
6a1aa64f 3345 */
285a6bda 3346Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f
DV
3347 var ret = [];
3348 var lines = data.split("\n");
3d67f03b
DV
3349
3350 // Use the default delimiter or fall back to a tab if that makes sense.
3351 var delim = this.attr_('delimiter');
3352 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
3353 delim = '\t';
3354 }
3355
285a6bda 3356 var start = 0;
d7beab6b
DV
3357 if (!('labels' in this.user_attrs_)) {
3358 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
285a6bda 3359 start = 1;
d7beab6b 3360 this.attrs_.labels = lines[0].split(delim); // NOTE: _not_ user_attrs_.
6a1aa64f 3361 }
5cd7ac68 3362 var line_no = 0;
03b522a4 3363
285a6bda
DV
3364 var xParser;
3365 var defaultParserSet = false; // attempt to auto-detect x value type
3366 var expectedCols = this.attr_("labels").length;
987840a2 3367 var outOfOrder = false;
6a1aa64f
DV
3368 for (var i = start; i < lines.length; i++) {
3369 var line = lines[i];
5cd7ac68 3370 line_no = i;
6a1aa64f 3371 if (line.length == 0) continue; // skip blank lines
3d67f03b
DV
3372 if (line[0] == '#') continue; // skip comment lines
3373 var inFields = line.split(delim);
285a6bda 3374 if (inFields.length < 2) continue;
6a1aa64f
DV
3375
3376 var fields = [];
285a6bda
DV
3377 if (!defaultParserSet) {
3378 this.detectTypeFromString_(inFields[0]);
3379 xParser = this.attr_("xValueParser");
3380 defaultParserSet = true;
3381 }
3382 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
3383
3384 // If fractions are expected, parse the numbers as "A/B"
3385 if (this.fractions_) {
3386 for (var j = 1; j < inFields.length; j++) {
3387 // TODO(danvk): figure out an appropriate way to flag parse errors.
3388 var vals = inFields[j].split("/");
7219edb3
DV
3389 if (vals.length != 2) {
3390 this.error('Expected fractional "num/den" values in CSV data ' +
3391 "but found a value '" + inFields[j] + "' on line " +
3392 (1 + i) + " ('" + line + "') which is not of this form.");
3393 fields[j] = [0, 0];
3394 } else {
3395 fields[j] = [this.parseFloat_(vals[0], i, line),
3396 this.parseFloat_(vals[1], i, line)];
3397 }
6a1aa64f 3398 }
285a6bda 3399 } else if (this.attr_("errorBars")) {
6a1aa64f 3400 // If there are error bars, values are (value, stddev) pairs
7219edb3
DV
3401 if (inFields.length % 2 != 1) {
3402 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3403 'but line ' + (1 + i) + ' has an odd number of values (' +
3404 (inFields.length - 1) + "): '" + line + "'");
3405 }
3406 for (var j = 1; j < inFields.length; j += 2) {
5cd7ac68
DV
3407 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3408 this.parseFloat_(inFields[j + 1], i, line)];
7219edb3 3409 }
9922b78b 3410 } else if (this.attr_("customBars")) {
6a1aa64f
DV
3411 // Bars are a low;center;high tuple
3412 for (var j = 1; j < inFields.length; j++) {
327a9279
DV
3413 var val = inFields[j];
3414 if (/^ *$/.test(val)) {
3415 fields[j] = [null, null, null];
3416 } else {
3417 var vals = val.split(";");
3418 if (vals.length == 3) {
3419 fields[j] = [ this.parseFloat_(vals[0], i, line),
3420 this.parseFloat_(vals[1], i, line),
3421 this.parseFloat_(vals[2], i, line) ];
3422 } else {
3423 this.warning('When using customBars, values must be either blank ' +
3424 'or "low;center;high" tuples (got "' + val +
3425 '" on line ' + (1+i));
3426 }
3427 }
6a1aa64f
DV
3428 }
3429 } else {
3430 // Values are just numbers
285a6bda 3431 for (var j = 1; j < inFields.length; j++) {
5cd7ac68 3432 fields[j] = this.parseFloat_(inFields[j], i, line);
285a6bda 3433 }
6a1aa64f 3434 }
987840a2
DV
3435 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3436 outOfOrder = true;
3437 }
285a6bda
DV
3438
3439 if (fields.length != expectedCols) {
3440 this.error("Number of columns in line " + i + " (" + fields.length +
3441 ") does not agree with number of labels (" + expectedCols +
3442 ") " + line);
3443 }
6d0aaa09
DV
3444
3445 // If the user specified the 'labels' option and none of the cells of the
3446 // first row parsed correctly, then they probably double-specified the
3447 // labels. We go with the values set in the option, discard this row and
3448 // log a warning to the JS console.
3449 if (i == 0 && this.attr_('labels')) {
3450 var all_null = true;
3451 for (var j = 0; all_null && j < fields.length; j++) {
3452 if (fields[j]) all_null = false;
3453 }
3454 if (all_null) {
3455 this.warn("The dygraphs 'labels' option is set, but the first row of " +
3456 "CSV data ('" + line + "') appears to also contain labels. " +
3457 "Will drop the CSV labels and use the option labels.");
3458 continue;
3459 }
3460 }
3461 ret.push(fields);
6a1aa64f 3462 }
987840a2
DV
3463
3464 if (outOfOrder) {
3465 this.warn("CSV is out of order; order it correctly to speed loading.");
3466 ret.sort(function(a,b) { return a[0] - b[0] });
3467 }
3468
6a1aa64f
DV
3469 return ret;
3470};
3471
3472/**
629a09ae 3473 * @private
285a6bda
DV
3474 * The user has provided their data as a pre-packaged JS array. If the x values
3475 * are numeric, this is the same as dygraphs' internal format. If the x values
3476 * are dates, we need to convert them from Date objects to ms since epoch.
629a09ae
DV
3477 * @param {[Object]} data
3478 * @return {[Object]} data with numeric x values.
285a6bda
DV
3479 */
3480Dygraph.prototype.parseArray_ = function(data) {
3481 // Peek at the first x value to see if it's numeric.
3482 if (data.length == 0) {
3483 this.error("Can't plot empty data set");
3484 return null;
3485 }
3486 if (data[0].length == 0) {
3487 this.error("Data set cannot contain an empty row");
3488 return null;
3489 }
3490
3491 if (this.attr_("labels") == null) {
3492 this.warn("Using default labels. Set labels explicitly via 'labels' " +
3493 "in the options parameter");
3494 this.attrs_.labels = [ "X" ];
3495 for (var i = 1; i < data[0].length; i++) {
3496 this.attrs_.labels.push("Y" + i);
3497 }
3498 }
3499
2dda3850 3500 if (Dygraph.isDateLike(data[0][0])) {
285a6bda
DV
3501 // Some intelligent defaults for a date x-axis.
3502 this.attrs_.xValueFormatter = Dygraph.dateString_;
bf640e56 3503 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
3504 this.attrs_.xTicker = Dygraph.dateTicker;
3505
3506 // Assume they're all dates.
e3ab7b40 3507 var parsedData = Dygraph.clone(data);
285a6bda
DV
3508 for (var i = 0; i < data.length; i++) {
3509 if (parsedData[i].length == 0) {
a323ff4a 3510 this.error("Row " + (1 + i) + " of data is empty");
285a6bda
DV
3511 return null;
3512 }
3513 if (parsedData[i][0] == null
3a909ec5
DV
3514 || typeof(parsedData[i][0].getTime) != 'function'
3515 || isNaN(parsedData[i][0].getTime())) {
be96a1f5 3516 this.error("x value in row " + (1 + i) + " is not a Date");
285a6bda
DV
3517 return null;
3518 }
3519 parsedData[i][0] = parsedData[i][0].getTime();
3520 }
3521 return parsedData;
3522 } else {
3523 // Some intelligent defaults for a numeric x-axis.
c39e1d93 3524 /** @private (shut up, jsdoc!) */
032e4c1d 3525 this.attrs_.xValueFormatter = function(x) { return x; };
285a6bda
DV
3526 this.attrs_.xTicker = Dygraph.numericTicks;
3527 return data;
3528 }
3529};
3530
3531/**
79420a1e
DV
3532 * Parses a DataTable object from gviz.
3533 * The data is expected to have a first column that is either a date or a
3534 * number. All subsequent columns must be numbers. If there is a clear mismatch
3535 * between this.xValueParser_ and the type of the first column, it will be
a685723c 3536 * fixed. Fills out rawData_.
629a09ae 3537 * @param {[Object]} data See above.
79420a1e
DV
3538 * @private
3539 */
285a6bda 3540Dygraph.prototype.parseDataTable_ = function(data) {
79420a1e
DV
3541 var cols = data.getNumberOfColumns();
3542 var rows = data.getNumberOfRows();
3543
d955e223 3544 var indepType = data.getColumnType(0);
4440f6c8 3545 if (indepType == 'date' || indepType == 'datetime') {
285a6bda
DV
3546 this.attrs_.xValueFormatter = Dygraph.dateString_;
3547 this.attrs_.xValueParser = Dygraph.dateParser;
3548 this.attrs_.xTicker = Dygraph.dateTicker;
bf640e56 3549 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
33127159 3550 } else if (indepType == 'number') {
032e4c1d 3551 this.attrs_.xValueFormatter = function(x) { return x; };
285a6bda
DV
3552 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
3553 this.attrs_.xTicker = Dygraph.numericTicks;
bf640e56 3554 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
285a6bda 3555 } else {
987840a2
DV
3556 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3557 "column 1 of DataTable input (Got '" + indepType + "')");
79420a1e
DV
3558 return null;
3559 }
3560
a685723c
DV
3561 // Array of the column indices which contain data (and not annotations).
3562 var colIdx = [];
3563 var annotationCols = {}; // data index -> [annotation cols]
3564 var hasAnnotations = false;
3565 for (var i = 1; i < cols; i++) {
3566 var type = data.getColumnType(i);
3567 if (type == 'number') {
3568 colIdx.push(i);
3569 } else if (type == 'string' && this.attr_('displayAnnotations')) {
3570 // This is OK -- it's an annotation column.
3571 var dataIdx = colIdx[colIdx.length - 1];
3572 if (!annotationCols.hasOwnProperty(dataIdx)) {
3573 annotationCols[dataIdx] = [i];
3574 } else {
3575 annotationCols[dataIdx].push(i);
3576 }
3577 hasAnnotations = true;
3578 } else {
3579 this.error("Only 'number' is supported as a dependent type with Gviz." +
3580 " 'string' is only supported if displayAnnotations is true");
3581 }
3582 }
3583
3584 // Read column labels
3585 // TODO(danvk): add support back for errorBars
3586 var labels = [data.getColumnLabel(0)];
3587 for (var i = 0; i < colIdx.length; i++) {
3588 labels.push(data.getColumnLabel(colIdx[i]));
f9348814 3589 if (this.attr_("errorBars")) i += 1;
a685723c
DV
3590 }
3591 this.attrs_.labels = labels;
3592 cols = labels.length;
3593
79420a1e 3594 var ret = [];
987840a2 3595 var outOfOrder = false;
a685723c 3596 var annotations = [];
79420a1e
DV
3597 for (var i = 0; i < rows; i++) {
3598 var row = [];
debe4434
DV
3599 if (typeof(data.getValue(i, 0)) === 'undefined' ||
3600 data.getValue(i, 0) === null) {
129569a5
FD
3601 this.warn("Ignoring row " + i +
3602 " of DataTable because of undefined or null first column.");
debe4434
DV
3603 continue;
3604 }
3605
c21d2c2d 3606 if (indepType == 'date' || indepType == 'datetime') {
d955e223
DV
3607 row.push(data.getValue(i, 0).getTime());
3608 } else {
3609 row.push(data.getValue(i, 0));
3610 }
3e3f84e4 3611 if (!this.attr_("errorBars")) {
a685723c
DV
3612 for (var j = 0; j < colIdx.length; j++) {
3613 var col = colIdx[j];
3614 row.push(data.getValue(i, col));
3615 if (hasAnnotations &&
3616 annotationCols.hasOwnProperty(col) &&
3617 data.getValue(i, annotationCols[col][0]) != null) {
3618 var ann = {};
3619 ann.series = data.getColumnLabel(col);
3620 ann.xval = row[0];
3621 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
3622 ann.text = '';
3623 for (var k = 0; k < annotationCols[col].length; k++) {
3624 if (k) ann.text += "\n";
3625 ann.text += data.getValue(i, annotationCols[col][k]);
3626 }
3627 annotations.push(ann);
3628 }
3e3f84e4 3629 }
92fd68d8
DV
3630
3631 // Strip out infinities, which give dygraphs problems later on.
3632 for (var j = 0; j < row.length; j++) {
3633 if (!isFinite(row[j])) row[j] = null;
3634 }
3e3f84e4
DV
3635 } else {
3636 for (var j = 0; j < cols - 1; j++) {
3637 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3638 }
79420a1e 3639 }
987840a2
DV
3640 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3641 outOfOrder = true;
3642 }
243d96e8 3643 ret.push(row);
79420a1e 3644 }
987840a2
DV
3645
3646 if (outOfOrder) {
3647 this.warn("DataTable is out of order; order it correctly to speed loading.");
3648 ret.sort(function(a,b) { return a[0] - b[0] });
3649 }
a685723c
DV
3650 this.rawData_ = ret;
3651
3652 if (annotations.length > 0) {
3653 this.setAnnotations(annotations, true);
3654 }
79420a1e
DV
3655}
3656
629a09ae
DV
3657/**
3658 * @private
3659 * This is identical to JavaScript's built-in Date.parse() method, except that
3660 * it doesn't get replaced with an incompatible method by aggressive JS
3661 * libraries like MooTools or Joomla.
3662 * @param { String } str The date string, e.g. "2011/05/06"
3663 * @return { Integer } millis since epoch
3664 */
d96b7d1a
DV
3665Dygraph.dateStrToMillis = function(str) {
3666 return new Date(str).getTime();
3667};
3668
24e5350c 3669// These functions are all based on MochiKit.
629a09ae
DV
3670/**
3671 * @private
3672 */
fc80a396
DV
3673Dygraph.update = function (self, o) {
3674 if (typeof(o) != 'undefined' && o !== null) {
3675 for (var k in o) {
85b99f0b
DV
3676 if (o.hasOwnProperty(k)) {
3677 self[k] = o[k];
3678 }
fc80a396
DV
3679 }
3680 }
3681 return self;
3682};
3683
629a09ae
DV
3684/**
3685 * @private
3686 */
2dda3850
DV
3687Dygraph.isArrayLike = function (o) {
3688 var typ = typeof(o);
3689 if (
c21d2c2d 3690 (typ != 'object' && !(typ == 'function' &&
2dda3850
DV
3691 typeof(o.item) == 'function')) ||
3692 o === null ||
3693 typeof(o.length) != 'number' ||
3694 o.nodeType === 3
3695 ) {
3696 return false;
3697 }
3698 return true;
3699};
3700
629a09ae
DV
3701/**
3702 * @private
3703 */
2dda3850
DV
3704Dygraph.isDateLike = function (o) {
3705 if (typeof(o) != "object" || o === null ||
3706 typeof(o.getTime) != 'function') {
3707 return false;
3708 }
3709 return true;
3710};
3711
629a09ae
DV
3712/**
3713 * @private
3714 */
e3ab7b40
DV
3715Dygraph.clone = function(o) {
3716 // TODO(danvk): figure out how MochiKit's version works
3717 var r = [];
3718 for (var i = 0; i < o.length; i++) {
3719 if (Dygraph.isArrayLike(o[i])) {
3720 r.push(Dygraph.clone(o[i]));
3721 } else {
3722 r.push(o[i]);
3723 }
3724 }
3725 return r;
24e5350c
DV
3726};
3727
2dda3850 3728
79420a1e 3729/**
6a1aa64f
DV
3730 * Get the CSV data. If it's in a function, call that function. If it's in a
3731 * file, do an XMLHttpRequest to get it.
3732 * @private
3733 */
285a6bda 3734Dygraph.prototype.start_ = function() {
6a1aa64f 3735 if (typeof this.file_ == 'function') {
285a6bda 3736 // CSV string. Pretend we got it via XHR.
6a1aa64f 3737 this.loadedEvent_(this.file_());
2dda3850 3738 } else if (Dygraph.isArrayLike(this.file_)) {
285a6bda 3739 this.rawData_ = this.parseArray_(this.file_);
26ca7938 3740 this.predraw_();
79420a1e
DV
3741 } else if (typeof this.file_ == 'object' &&
3742 typeof this.file_.getColumnRange == 'function') {
3743 // must be a DataTable from gviz.
a685723c 3744 this.parseDataTable_(this.file_);
26ca7938 3745 this.predraw_();
285a6bda
DV
3746 } else if (typeof this.file_ == 'string') {
3747 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3748 if (this.file_.indexOf('\n') >= 0) {
3749 this.loadedEvent_(this.file_);
3750 } else {
3751 var req = new XMLHttpRequest();
3752 var caller = this;
3753 req.onreadystatechange = function () {
3754 if (req.readyState == 4) {
3755 if (req.status == 200) {
3756 caller.loadedEvent_(req.responseText);
3757 }
6a1aa64f 3758 }
285a6bda 3759 };
6a1aa64f 3760
285a6bda
DV
3761 req.open("GET", this.file_, true);
3762 req.send(null);
3763 }
3764 } else {
3765 this.error("Unknown data format: " + (typeof this.file_));
6a1aa64f
DV
3766 }
3767};
3768
3769/**
3770 * Changes various properties of the graph. These can include:
3771 * <ul>
3772 * <li>file: changes the source data for the graph</li>
3773 * <li>errorBars: changes whether the data contains stddev</li>
3774 * </ul>
dcb25130 3775 *
ccfcc169
DV
3776 * There's a huge variety of options that can be passed to this method. For a
3777 * full list, see http://dygraphs.com/options.html.
3778 *
6a1aa64f 3779 * @param {Object} attrs The new properties and values
ccfcc169
DV
3780 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3781 * call to updateOptions(). If you know better, you can pass true to explicitly
3782 * block the redraw. This can be useful for chaining updateOptions() calls,
3783 * avoiding the occasional infinite loop and preventing redraws when it's not
3784 * necessary (e.g. when updating a callback).
6a1aa64f 3785 */
ccfcc169
DV
3786Dygraph.prototype.updateOptions = function(attrs, block_redraw) {
3787 if (typeof(block_redraw) == 'undefined') block_redraw = false;
3788
3789 // TODO(danvk): this is a mess. Move these options into attr_.
c65f2303 3790 if ('rollPeriod' in attrs) {
6a1aa64f
DV
3791 this.rollPeriod_ = attrs.rollPeriod;
3792 }
c65f2303 3793 if ('dateWindow' in attrs) {
6a1aa64f 3794 this.dateWindow_ = attrs.dateWindow;
e5152598 3795 if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
81856f70
NN
3796 this.zoomed_x_ = attrs.dateWindow != null;
3797 }
b7e5862d 3798 }
e5152598 3799 if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
b7e5862d 3800 this.zoomed_y_ = attrs.valueRange != null;
6a1aa64f 3801 }
450fe64b
DV
3802
3803 // TODO(danvk): validate per-series options.
46dde5f9
DV
3804 // Supported:
3805 // strokeWidth
3806 // pointSize
3807 // drawPoints
3808 // highlightCircleSize
450fe64b 3809
fc80a396 3810 Dygraph.update(this.user_attrs_, attrs);
285a6bda 3811
5e50289f 3812 if (attrs['file']) {
6a1aa64f 3813 this.file_ = attrs['file'];
ccfcc169 3814 if (!block_redraw) this.start_();
6a1aa64f 3815 } else {
ccfcc169 3816 if (!block_redraw) this.predraw_();
6a1aa64f
DV
3817 }
3818};
3819
3820/**
697e70b2
DV
3821 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3822 * containing div (which has presumably changed size since the dygraph was
3823 * instantiated. If the width/height are specified, the div will be resized.
964f30c6
DV
3824 *
3825 * This is far more efficient than destroying and re-instantiating a
3826 * Dygraph, since it doesn't have to reparse the underlying data.
3827 *
629a09ae
DV
3828 * @param {Number} [width] Width (in pixels)
3829 * @param {Number} [height] Height (in pixels)
697e70b2
DV
3830 */
3831Dygraph.prototype.resize = function(width, height) {
e8c7ef86
DV
3832 if (this.resize_lock) {
3833 return;
3834 }
3835 this.resize_lock = true;
3836
697e70b2
DV
3837 if ((width === null) != (height === null)) {
3838 this.warn("Dygraph.resize() should be called with zero parameters or " +
3839 "two non-NULL parameters. Pretending it was zero.");
3840 width = height = null;
3841 }
3842
b16e6369 3843 // TODO(danvk): there should be a clear() method.
697e70b2 3844 this.maindiv_.innerHTML = "";
b16e6369
DV
3845 this.attrs_.labelsDiv = null;
3846
697e70b2
DV
3847 if (width) {
3848 this.maindiv_.style.width = width + "px";
3849 this.maindiv_.style.height = height + "px";
3850 this.width_ = width;
3851 this.height_ = height;
3852 } else {
3853 this.width_ = this.maindiv_.offsetWidth;
3854 this.height_ = this.maindiv_.offsetHeight;
3855 }
3856
3857 this.createInterface_();
26ca7938 3858 this.predraw_();
e8c7ef86
DV
3859
3860 this.resize_lock = false;
697e70b2
DV
3861};
3862
3863/**
6faebb69 3864 * Adjusts the number of points in the rolling average. Updates the graph to
6a1aa64f 3865 * reflect the new averaging period.
6faebb69 3866 * @param {Number} length Number of points over which to average the data.
6a1aa64f 3867 */
285a6bda 3868Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f 3869 this.rollPeriod_ = length;
26ca7938 3870 this.predraw_();
6a1aa64f 3871};
540d00f1 3872
f8cfec73 3873/**
1cf11047
DV
3874 * Returns a boolean array of visibility statuses.
3875 */
3876Dygraph.prototype.visibility = function() {
3877 // Do lazy-initialization, so that this happens after we know the number of
3878 // data series.
3879 if (!this.attr_("visibility")) {
f38dec01 3880 this.attrs_["visibility"] = [];
1cf11047
DV
3881 }
3882 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
f38dec01 3883 this.attr_("visibility").push(true);
1cf11047
DV
3884 }
3885 return this.attr_("visibility");
3886};
3887
3888/**
3889 * Changes the visiblity of a series.
3890 */
3891Dygraph.prototype.setVisibility = function(num, value) {
3892 var x = this.visibility();
a6c109c1 3893 if (num < 0 || num >= x.length) {
1cf11047
DV
3894 this.warn("invalid series number in setVisibility: " + num);
3895 } else {
3896 x[num] = value;
26ca7938 3897 this.predraw_();
1cf11047
DV
3898 }
3899};
3900
3901/**
5c528fa2
DV
3902 * Update the list of annotations and redraw the chart.
3903 */
a685723c 3904Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3c51ab74
DV
3905 // Only add the annotation CSS rule once we know it will be used.
3906 Dygraph.addAnnotationRule();
5c528fa2
DV
3907 this.annotations_ = ann;
3908 this.layout_.setAnnotations(this.annotations_);
a685723c 3909 if (!suppressDraw) {
26ca7938 3910 this.predraw_();
a685723c 3911 }
5c528fa2
DV
3912};
3913
3914/**
3915 * Return the list of annotations.
3916 */
3917Dygraph.prototype.annotations = function() {
3918 return this.annotations_;
3919};
3920
46dde5f9
DV
3921/**
3922 * Get the index of a series (column) given its name. The first column is the
3923 * x-axis, so the data series start with index 1.
3924 */
3925Dygraph.prototype.indexFromSetName = function(name) {
3926 var labels = this.attr_("labels");
3927 for (var i = 0; i < labels.length; i++) {
3928 if (labels[i] == name) return i;
3929 }
3930 return null;
3931};
3932
629a09ae
DV
3933/**
3934 * @private
3935 * Adds a default style for the annotation CSS classes to the document. This is
3936 * only executed when annotations are actually used. It is designed to only be
3937 * called once -- all calls after the first will return immediately.
3938 */
5c528fa2
DV
3939Dygraph.addAnnotationRule = function() {
3940 if (Dygraph.addedAnnotationCSS) return;
3941
5c528fa2
DV
3942 var rule = "border: 1px solid black; " +
3943 "background-color: white; " +
3944 "text-align: center;";
22186871
DV
3945
3946 var styleSheetElement = document.createElement("style");
3947 styleSheetElement.type = "text/css";
3948 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3949
3950 // Find the first style sheet that we can access.
3951 // We may not add a rule to a style sheet from another domain for security
3952 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3953 // adds its own style sheets from google.com.
3954 for (var i = 0; i < document.styleSheets.length; i++) {
3955 if (document.styleSheets[i].disabled) continue;
3956 var mysheet = document.styleSheets[i];
3957 try {
3958 if (mysheet.insertRule) { // Firefox
3959 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3960 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3961 } else if (mysheet.addRule) { // IE
3962 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3963 }
3964 Dygraph.addedAnnotationCSS = true;
3965 return;
3966 } catch(err) {
3967 // Was likely a security exception.
3968 }
5c528fa2
DV
3969 }
3970
22186871 3971 this.warn("Unable to add default annotation CSS rule; display may be off.");
5c528fa2
DV
3972}
3973
3974/**
629a09ae 3975 * @private
f8cfec73
DV
3976 * Create a new canvas element. This is more complex than a simple
3977 * document.createElement("canvas") because of IE and excanvas.
3978 */
3979Dygraph.createCanvas = function() {
3980 var canvas = document.createElement("canvas");
3981
3982 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
8b8f2d59 3983 if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) {
f8cfec73
DV
3984 canvas = G_vmlCanvasManager.initElement(canvas);
3985 }
3986
3987 return canvas;
3988};
3989
540d00f1
DV
3990
3991/**
285a6bda 3992 * A wrapper around Dygraph that implements the gviz API.
540d00f1
DV
3993 * @param {Object} container The DOM object the visualization should live in.
3994 */
285a6bda 3995Dygraph.GVizChart = function(container) {
540d00f1
DV
3996 this.container = container;
3997}
3998
285a6bda 3999Dygraph.GVizChart.prototype.draw = function(data, options) {
c91f4ae8
DV
4000 // Clear out any existing dygraph.
4001 // TODO(danvk): would it make more sense to simply redraw using the current
4002 // date_graph object?
540d00f1 4003 this.container.innerHTML = '';
c91f4ae8
DV
4004 if (typeof(this.date_graph) != 'undefined') {
4005 this.date_graph.destroy();
4006 }
4007
285a6bda 4008 this.date_graph = new Dygraph(this.container, data, options);
540d00f1 4009}
285a6bda 4010
239c712d
NAG
4011/**
4012 * Google charts compatible setSelection
50360fd0 4013 * Only row selection is supported, all points in the row will be highlighted
239c712d
NAG
4014 * @param {Array} array of the selected cells
4015 * @public
4016 */
4017Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
4018 var row = false;
4019 if (selection_array.length) {
4020 row = selection_array[0].row;
4021 }
4022 this.date_graph.setSelection(row);
4023}
4024
103b7292
NAG
4025/**
4026 * Google charts compatible getSelection implementation
4027 * @return {Array} array of the selected cells
4028 * @public
4029 */
4030Dygraph.GVizChart.prototype.getSelection = function() {
4031 var selection = [];
50360fd0 4032
103b7292 4033 var row = this.date_graph.getSelection();
50360fd0 4034
103b7292 4035 if (row < 0) return selection;
50360fd0 4036
103b7292
NAG
4037 col = 1;
4038 for (var i in this.date_graph.layout_.datasets) {
4039 selection.push({row: row, column: col});
4040 col++;
4041 }
4042
4043 return selection;
4044}
4045
285a6bda
DV
4046// Older pages may still use this name.
4047DateGraph = Dygraph;
028ddf8a
DV
4048
4049// <REMOVE_FOR_COMBINED>
0addac07
DV
4050Dygraph.OPTIONS_REFERENCE = // <JSON>
4051{
a38e9336
DV
4052 "xValueParser": {
4053 "default": "parseFloat() or Date.parse()*",
4054 "labels": ["CSV parsing"],
4055 "type": "function(str) -> number",
4056 "description": "A function which parses x-values (i.e. the dependent series). Must return a number, even when the values are dates. In this case, millis since epoch are used. This is used primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which it will parse. See code for details."
4057 },
4058 "stackedGraph": {
a96f59f4 4059 "default": "false",
a38e9336
DV
4060 "labels": ["Data Line display"],
4061 "type": "boolean",
4062 "description": "If set, stack series on top of one another rather than drawing them independently."
a96f59f4 4063 },
a38e9336 4064 "pointSize": {
a96f59f4 4065 "default": "1",
a38e9336
DV
4066 "labels": ["Data Line display"],
4067 "type": "integer",
4068 "description": "The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is \"isolated\", i.e. there is a missing point on either side of it. This also controls the size of those dots."
a96f59f4 4069 },
a38e9336
DV
4070 "labelsDivStyles": {
4071 "default": "null",
4072 "labels": ["Legend"],
4073 "type": "{}",
4074 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
a96f59f4 4075 },
a38e9336 4076 "drawPoints": {
a96f59f4 4077 "default": "false",
a38e9336
DV
4078 "labels": ["Data Line display"],
4079 "type": "boolean",
4080 "description": "Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart."
a96f59f4 4081 },
a38e9336
DV
4082 "height": {
4083 "default": "320",
4084 "labels": ["Overall display"],
4085 "type": "integer",
4086 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
a96f59f4
DV
4087 },
4088 "zoomCallback": {
a96f59f4 4089 "default": "null",
a38e9336
DV
4090 "labels": ["Callbacks"],
4091 "type": "function(minDate, maxDate, yRanges)",
a96f59f4
DV
4092 "description": "A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each y-axis."
4093 },
a38e9336
DV
4094 "pointClickCallback": {
4095 "default": "",
4096 "labels": ["Callbacks", "Interactive Elements"],
4097 "type": "",
4098 "description": ""
a96f59f4 4099 },
a38e9336
DV
4100 "colors": {
4101 "default": "(see description)",
4102 "labels": ["Data Series Colors"],
4103 "type": "array<string>",
4104 "example": "['red', '#00FF00']",
4105 "description": "List of colors for the data series. These can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\", etc. If not specified, equally-spaced points around a color wheel are used."
a96f59f4 4106 },
a38e9336 4107 "connectSeparatedPoints": {
a96f59f4 4108 "default": "false",
a38e9336
DV
4109 "labels": ["Data Line display"],
4110 "type": "boolean",
4111 "description": "Usually, when Dygraphs encounters a missing value in a data series, it interprets this as a gap and draws it as such. If, instead, the missing values represents an x-value for which only a different series has data, then you'll want to connect the dots by setting this to true. To explicitly include a gap with this option set, use a value of NaN."
a96f59f4 4112 },
a38e9336 4113 "highlightCallback": {
a96f59f4 4114 "default": "null",
a38e9336
DV
4115 "labels": ["Callbacks"],
4116 "type": "function(event, x, points,row)",
4117 "description": "When set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: <code>[ {name: 'series', yval: y-value}, &hellip; ]</code>"
a96f59f4 4118 },
a38e9336 4119 "includeZero": {
a96f59f4 4120 "default": "false",
a38e9336 4121 "labels": ["Axis display"],
a96f59f4 4122 "type": "boolean",
a38e9336 4123 "description": "Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data"
a96f59f4 4124 },
a38e9336
DV
4125 "rollPeriod": {
4126 "default": "1",
4127 "labels": ["Error Bars", "Rolling Averages"],
4128 "type": "integer &gt;= 1",
4129 "description": "Number of days over which to average data. Discussed extensively above."
a96f59f4 4130 },
a38e9336 4131 "unhighlightCallback": {
a96f59f4 4132 "default": "null",
a38e9336
DV
4133 "labels": ["Callbacks"],
4134 "type": "function(event)",
4135 "description": "When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph. The parameter is the mouseout event."
a96f59f4 4136 },
a38e9336
DV
4137 "axisTickSize": {
4138 "default": "3.0",
4139 "labels": ["Axis display"],
4140 "type": "number",
4141 "description": "The size of the line to display next to each tick mark on x- or y-axes."
a96f59f4 4142 },
a38e9336 4143 "labelsSeparateLines": {
a96f59f4 4144 "default": "false",
a38e9336
DV
4145 "labels": ["Legend"],
4146 "type": "boolean",
4147 "description": "Put <code>&lt;br/&gt;</code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
a96f59f4 4148 },
a38e9336
DV
4149 "xValueFormatter": {
4150 "default": "(Round to 2 decimal places)",
4151 "labels": ["Axis display"],
4152 "type": "function(x)",
4153 "description": "Function to provide a custom display format for the X value for mouseover."
a96f59f4
DV
4154 },
4155 "pixelsPerYLabel": {
a96f59f4 4156 "default": "30",
a38e9336
DV
4157 "labels": ["Axis display", "Grid"],
4158 "type": "integer",
a96f59f4
DV
4159 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4160 },
a38e9336 4161 "annotationMouseOverHandler": {
5cc5f631 4162 "default": "null",
a38e9336 4163 "labels": ["Annotations"],
5cc5f631
DV
4164 "type": "function(annotation, point, dygraph, event)",
4165 "description": "If provided, this function is called whenever the user mouses over an annotation."
4166 },
4167 "annotationMouseOutHandler": {
4168 "default": "null",
4169 "labels": ["Annotations"],
4170 "type": "function(annotation, point, dygraph, event)",
4171 "description": "If provided, this function is called whenever the user mouses out of an annotation."
a96f59f4 4172 },
8165189e 4173 "annotationClickHandler": {
5cc5f631 4174 "default": "null",
8165189e 4175 "labels": ["Annotations"],
5cc5f631
DV
4176 "type": "function(annotation, point, dygraph, event)",
4177 "description": "If provided, this function is called whenever the user clicks on an annotation."
8165189e
DV
4178 },
4179 "annotationDblClickHandler": {
5cc5f631 4180 "default": "null",
8165189e 4181 "labels": ["Annotations"],
5cc5f631
DV
4182 "type": "function(annotation, point, dygraph, event)",
4183 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
8165189e 4184 },
a38e9336
DV
4185 "drawCallback": {
4186 "default": "null",
4187 "labels": ["Callbacks"],
4188 "type": "function(dygraph, is_initial)",
4189 "description": "When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn. The second is a boolean value indicating whether this is the initial draw."
4190 },
4191 "labelsKMG2": {
4192 "default": "false",
4193 "labels": ["Value display/formatting"],
4194 "type": "boolean",
4195 "description": "Show k/M/G for kilo/Mega/Giga on y-axis. This is different than <code>labelsKMB</code> in that it uses base 2, not 10."
4196 },
4197 "delimiter": {
4198 "default": ",",
4199 "labels": ["CSV parsing"],
4200 "type": "string",
4201 "description": "The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not usually necessary, since tab-delimited data is auto-detected."
a96f59f4
DV
4202 },
4203 "axisLabelFontSize": {
a96f59f4 4204 "default": "14",
a38e9336
DV
4205 "labels": ["Axis display"],
4206 "type": "integer",
a96f59f4
DV
4207 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4208 },
a38e9336
DV
4209 "underlayCallback": {
4210 "default": "null",
4211 "labels": ["Callbacks"],
4212 "type": "function(canvas, area, dygraph)",
4213 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
a96f59f4 4214 },
a38e9336
DV
4215 "width": {
4216 "default": "480",
4217 "labels": ["Overall display"],
4218 "type": "integer",
4219 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
a96f59f4 4220 },
a38e9336
DV
4221 "interactionModel": {
4222 "default": "...",
4223 "labels": ["Interactive Elements"],
4224 "type": "Object",
4225 "description": "TODO(konigsberg): document this"
4226 },
4227 "xTicker": {
4228 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4229 "labels": ["Axis display"],
4230 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4231 "description": "This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks are an array of (value, label) pairs. The built-in functions go to great lengths to choose good tick marks so, if you set this option, you'll most likely want to call one of them and modify the result."
4232 },
4233 "xAxisLabelWidth": {
4234 "default": "50",
4235 "labels": ["Axis display"],
a96f59f4 4236 "type": "integer",
a38e9336 4237 "description": "Width, in pixels, of the x-axis labels."
a96f59f4 4238 },
a38e9336
DV
4239 "showLabelsOnHighlight": {
4240 "default": "true",
4241 "labels": ["Interactive Elements", "Legend"],
a96f59f4 4242 "type": "boolean",
a38e9336 4243 "description": "Whether to show the legend upon mouseover."
a96f59f4 4244 },
a38e9336
DV
4245 "axis": {
4246 "default": "(none)",
4247 "labels": ["Axis display"],
4248 "type": "string or object",
4249 "description": "Set to either an object ({}) filled with options for this axis or to the name of an existing data series with its own axis to re-use that axis. See tests for usage."
4250 },
4251 "pixelsPerXLabel": {
4252 "default": "60",
4253 "labels": ["Axis display", "Grid"],
a96f59f4 4254 "type": "integer",
a38e9336
DV
4255 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4256 },
4257 "labelsDiv": {
4258 "default": "null",
4259 "labels": ["Legend"],
4260 "type": "DOM element or string",
4261 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4262 "description": "Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id."
a96f59f4
DV
4263 },
4264 "fractions": {
a96f59f4 4265 "default": "false",
a38e9336
DV
4266 "labels": ["CSV parsing", "Error Bars"],
4267 "type": "boolean",
a96f59f4
DV
4268 "description": "When set, attempt to parse each cell in the CSV file as \"a/b\", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below)."
4269 },
a38e9336
DV
4270 "logscale": {
4271 "default": "false",
4272 "labels": ["Axis display"],
a96f59f4 4273 "type": "boolean",
a109b711 4274 "description": "When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal to zero are not displayed.\n\nNot compatible with showZero, and ignores connectSeparatedPoints. Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph."
a38e9336
DV
4275 },
4276 "strokeWidth": {
4277 "default": "1.0",
4278 "labels": ["Data Line display"],
4279 "type": "integer",
4280 "example": "0.5, 2.0",
4281 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4282 },
4283 "wilsonInterval": {
a96f59f4 4284 "default": "true",
a38e9336
DV
4285 "labels": ["Error Bars"],
4286 "type": "boolean",
a96f59f4
DV
4287 "description": "Use in conjunction with the \"fractions\" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1."
4288 },
a38e9336 4289 "fillGraph": {
a96f59f4 4290 "default": "false",
a38e9336
DV
4291 "labels": ["Data Line display"],
4292 "type": "boolean",
4293 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
a96f59f4 4294 },
a38e9336
DV
4295 "highlightCircleSize": {
4296 "default": "3",
4297 "labels": ["Interactive Elements"],
4298 "type": "integer",
4299 "description": "The size in pixels of the dot drawn over highlighted points."
a96f59f4
DV
4300 },
4301 "gridLineColor": {
a96f59f4 4302 "default": "rgb(128,128,128)",
a38e9336
DV
4303 "labels": ["Grid"],
4304 "type": "red, blue",
a96f59f4
DV
4305 "description": "The color of the gridlines."
4306 },
a38e9336
DV
4307 "visibility": {
4308 "default": "[true, true, ...]",
4309 "labels": ["Data Line display"],
4310 "type": "Array of booleans",
4311 "description": "Which series should initially be visible? Once the Dygraph has been constructed, you can access and modify the visibility of each series using the <code>visibility</code> and <code>setVisibility</code> methods."
a96f59f4 4312 },
a38e9336
DV
4313 "valueRange": {
4314 "default": "Full range of the input is shown",
4315 "labels": ["Axis display"],
4316 "type": "Array of two numbers",
4317 "example": "[10, 110]",
4318 "description": "Explicitly set the vertical range of the graph to [low, high]."
a96f59f4 4319 },
a38e9336
DV
4320 "labelsDivWidth": {
4321 "default": "250",
4322 "labels": ["Legend"],
a96f59f4 4323 "type": "integer",
a38e9336 4324 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
a96f59f4 4325 },
a38e9336
DV
4326 "colorSaturation": {
4327 "default": "1.0",
4328 "labels": ["Data Series Colors"],
990d6a35 4329 "type": "float (0.0 - 1.0)",
a38e9336
DV
4330 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4331 },
4332 "yAxisLabelWidth": {
4333 "default": "50",
4334 "labels": ["Axis display"],
a96f59f4 4335 "type": "integer",
990d6a35 4336 "description": "Width, in pixels, of the y-axis labels. This also affects the amount of space available for a y-axis chart label."
a96f59f4 4337 },
a38e9336
DV
4338 "hideOverlayOnMouseOut": {
4339 "default": "true",
4340 "labels": ["Interactive Elements", "Legend"],
a96f59f4 4341 "type": "boolean",
a38e9336 4342 "description": "Whether to hide the legend when the mouse leaves the chart area."
a96f59f4
DV
4343 },
4344 "yValueFormatter": {
a96f59f4 4345 "default": "(Round to 2 decimal places)",
a38e9336
DV
4346 "labels": ["Axis display"],
4347 "type": "function(x)",
a96f59f4
DV
4348 "description": "Function to provide a custom display format for the Y value for mouseover."
4349 },
a38e9336
DV
4350 "legend": {
4351 "default": "onmouseover",
4352 "labels": ["Legend"],
4353 "type": "string",
4354 "description": "When to display the legend. By default, it only appears when a user mouses over the chart. Set it to \"always\" to always display a legend of some sort."
4355 },
4356 "labelsShowZeroValues": {
4357 "default": "true",
4358 "labels": ["Legend"],
a96f59f4 4359 "type": "boolean",
a38e9336
DV
4360 "description": "Show zero value labels in the labelsDiv."
4361 },
4362 "stepPlot": {
a96f59f4 4363 "default": "false",
a38e9336
DV
4364 "labels": ["Data Line display"],
4365 "type": "boolean",
4366 "description": "When set, display the graph as a step plot instead of a line plot."
a96f59f4 4367 },
a38e9336
DV
4368 "labelsKMB": {
4369 "default": "false",
4370 "labels": ["Value display/formatting"],
a96f59f4 4371 "type": "boolean",
a38e9336
DV
4372 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4373 },
4374 "rightGap": {
4375 "default": "5",
4376 "labels": ["Overall display"],
4377 "type": "integer",
4378 "description": "Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point."
4379 },
4380 "avoidMinZero": {
a96f59f4 4381 "default": "false",
a38e9336
DV
4382 "labels": ["Axis display"],
4383 "type": "boolean",
4384 "description": "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis."
4385 },
4386 "xAxisLabelFormatter": {
4387 "default": "Dygraph.dateAxisFormatter",
4388 "labels": ["Axis display", "Value display/formatting"],
4389 "type": "function(date, granularity)",
4390 "description": "Function to call to format values along the x axis."
4391 },
4392 "clickCallback": {
4393 "snippet": "function(e, date){<br>&nbsp;&nbsp;alert(date);<br>}",
4394 "default": "null",
4395 "labels": ["Callbacks"],
4396 "type": "function(e, date)",
4397 "description": "A function to call when a data point is clicked. The function should take two arguments, the event object for the click and the date that was clicked."
4398 },
4399 "yAxisLabelFormatter": {
4400 "default": "yValueFormatter",
4401 "labels": ["Axis display", "Value display/formatting"],
4402 "type": "function(x)",
4403 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
a96f59f4
DV
4404 },
4405 "labels": {
a96f59f4 4406 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
a38e9336
DV
4407 "labels": ["Legend"],
4408 "type": "array<string>",
a96f59f4
DV
4409 "description": "A name for each data series, including the independent (X) series. For CSV files and DataTable objections, this is determined by context. For raw data, this must be specified. If it is not, default values are supplied and a warning is logged."
4410 },
a38e9336
DV
4411 "dateWindow": {
4412 "default": "Full range of the input is shown",
4413 "labels": ["Axis display"],
4414 "type": "Array of two Dates or numbers",
4415 "example": "[<br>&nbsp;&nbsp;Date.parse('2006-01-01'),<br>&nbsp;&nbsp;(new Date()).valueOf()<br>]",
4416 "description": "Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow must also be numbers."
a96f59f4 4417 },
a38e9336
DV
4418 "showRoller": {
4419 "default": "false",
4420 "labels": ["Interactive Elements", "Rolling Averages"],
4421 "type": "boolean",
4422 "description": "If the rolling average period text box should be shown."
a96f59f4 4423 },
a38e9336
DV
4424 "sigma": {
4425 "default": "2.0",
4426 "labels": ["Error Bars"],
ca49434a 4427 "type": "float",
a38e9336 4428 "description": "When errorBars is set, shade this many standard deviations above/below each point."
a96f59f4 4429 },
a38e9336 4430 "customBars": {
a96f59f4 4431 "default": "false",
a38e9336 4432 "labels": ["CSV parsing", "Error Bars"],
a96f59f4 4433 "type": "boolean",
a38e9336 4434 "description": "When set, parse each CSV cell as \"low;middle;high\". Error bars will be drawn for each point between low and high, with the series itself going through middle."
a96f59f4 4435 },
a38e9336
DV
4436 "colorValue": {
4437 "default": "1.0",
4438 "labels": ["Data Series Colors"],
4439 "type": "float (0.0 - 1.0)",
4440 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
a96f59f4 4441 },
a38e9336
DV
4442 "errorBars": {
4443 "default": "false",
4444 "labels": ["CSV parsing", "Error Bars"],
a96f59f4 4445 "type": "boolean",
a38e9336 4446 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
a96f59f4 4447 },
a38e9336
DV
4448 "displayAnnotations": {
4449 "default": "false",
4450 "labels": ["Annotations"],
a96f59f4 4451 "type": "boolean",
a38e9336 4452 "description": "Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series to be interpreted as annotations on points in that series. This is the same format used by Google's AnnotatedTimeLine chart."
4cac8c7a 4453 },
965a030e 4454 "panEdgeFraction": {
4cac8c7a 4455 "default": "null",
965a030e 4456 "labels": ["Axis Display", "Interactive Elements"],
4cac8c7a
RK
4457 "type": "float",
4458 "default": "null",
4459 "description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
ca49434a
DV
4460 },
4461 "title": {
4462 "labels": ["Chart labels"],
4463 "type": "string",
4464 "default": "null",
4465 "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
4466 },
4467 "titleHeight": {
4468 "default": "18",
4469 "labels": ["Chart labels"],
4470 "type": "integer",
4471 "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
4472 },
4473 "xlabel": {
4474 "labels": ["Chart labels"],
4475 "type": "string",
4476 "default": "null",
4477 "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
4478 },
4479 "xLabelHeight": {
4480 "labels": ["Chart labels"],
4481 "type": "integer",
4482 "default": "18",
4483 "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
4484 },
4485 "ylabel": {
4486 "labels": ["Chart labels"],
4487 "type": "string",
4488 "default": "null",
4489 "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
4490 },
4491 "yLabelWidth": {
4492 "labels": ["Chart labels"],
4493 "type": "integer",
4494 "default": "18",
4495 "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
5bc3e265 4496 },
e5152598
NN
4497 "isZoomedIgnoreProgrammaticZoom" : {
4498 "default": "false",
4499 "labels": ["Zooming"],
4500 "type": "boolean",
36dfa958 4501 "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
17d0210c 4502 },
990d6a35
DV
4503 "drawXGrid": {
4504 "default": "true",
4505 "labels": ["Grid"],
4506 "type": "boolean",
4507 "description" : "Whether to display vertical gridlines under the chart."
4508 },
4509 "drawYGrid": {
4510 "default": "true",
4511 "labels": ["Grid"],
4512 "type": "boolean",
4513 "description" : "Whether to display horizontal gridlines under the chart."
4514 },
4515 "drawXAxis": {
4516 "default": "true",
4517 "labels": ["Axis display"],
4518 "type": "boolean",
4519 "description" : "Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4520 },
4521 "drawYAxis": {
4522 "default": "true",
4523 "labels": ["Axis display"],
4524 "type": "boolean",
4525 "description" : "Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4526 },
4527 "gridLineWidth": {
4528 "default": "0.3",
4529 "labels": ["Grid"],
4530 "type": "float",
4531 "description" : "Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawXGrid and drawYGrid options."
4532 },
4533 "axisLineWidth": {
4534 "default": "0.3",
4535 "labels": ["Axis display"],
4536 "type": "float",
4537 "description" : "Thickness (in pixels) of the x- and y-axis lines."
4538 },
4539 "axisLineColor": {
4540 "default": "black",
4541 "labels": ["Axis display"],
4542 "type": "string",
4543 "description" : "Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'."
4544 },
4545 "fillAlpha": {
4546 "default": "0.15",
e829f52c 4547 "labels": ["Error bars", "Data Series Colors"],
990d6a35
DV
4548 "type": "float (0.0 - 1.0)",
4549 "description" : "Error bars (or custom bars) for each series are drawn in the same color as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the error bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point."
4550 },
4551 "axisLabelColor": {
4552 "default": "black",
4553 "labels": ["Axis display"],
4554 "type": "string",
4555 "description" : "Color for x- and y-axis labels. This is a CSS color string."
4556 },
4557 "axisLabelWidth": {
4558 "default": "50",
6beca822 4559 "labels": ["Axis display", "Chart labels"],
990d6a35
DV
4560 "type": "integer",
4561 "description" : "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls "
4562 },
17d0210c
DV
4563 "sigFigs" : {
4564 "default": "null",
4565 "labels": ["Value display/formatting"],
4566 "type": "integer",
4567 "description": "By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you'd prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3."
4568 },
4569 "digitsAfterDecimal" : {
4570 "default": "2",
4571 "labels": ["Value display/formatting"],
4572 "type": "integer",
4573 "description": "Unless it's run in scientific mode (see the <code>sigFigs</code> option), dygraphs displays numbers with <code>digitsAfterDecimal</code> digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation."
4574 },
4575 "maxNumberWidth" : {
4576 "default": "6",
4577 "labels": ["Value display/formatting"],
4578 "type": "integer",
4579 "description": "When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than <code>maxNumberWidth</code> digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you'd like to see all those digits, set this to something large, like 20 or 30."
e829f52c
DV
4580 },
4581 "file": {
4582 "default": "(set when constructed)",
4583 "labels": ["Data"],
4584 "type": "string (URL of CSV or CSV), GViz DataTable or 2D Array",
4585 "description": "Sets the data being displayed in the chart. This can only be set when calling updateOptions; it cannot be set from the constructor. For a full description of valid data formats, see the <a href='http://dygraphs.com/data.html'>Data Formats</a> page."
028ddf8a 4586 }
0addac07
DV
4587}
4588; // </JSON>
4589// NOTE: in addition to parsing as JS, this snippet is expected to be valid
4590// JSON. This assumption cannot be checked in JS, but it will be checked when
ca49434a
DV
4591// documentation is generated by the generate-documentation.py script. For the
4592// most part, this just means that you should always use double quotes.
028ddf8a
DV
4593
4594// Do a quick sanity check on the options reference.
4595(function() {
4596 var warn = function(msg) { if (console) console.warn(msg); };
4597 var flds = ['type', 'default', 'description'];
a38e9336
DV
4598 var valid_cats = [
4599 'Annotations',
4600 'Axis display',
ca49434a 4601 'Chart labels',
a38e9336
DV
4602 'CSV parsing',
4603 'Callbacks',
e829f52c 4604 'Data',
a38e9336
DV
4605 'Data Line display',
4606 'Data Series Colors',
4607 'Error Bars',
4608 'Grid',
4609 'Interactive Elements',
4610 'Legend',
4611 'Overall display',
4612 'Rolling Averages',
36dfa958
DV
4613 'Value display/formatting',
4614 'Zooming'
a38e9336
DV
4615 ];
4616 var cats = {};
4617 for (var i = 0; i < valid_cats.length; i++) cats[valid_cats[i]] = true;
4618
028ddf8a
DV
4619 for (var k in Dygraph.OPTIONS_REFERENCE) {
4620 if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(k)) continue;
4621 var op = Dygraph.OPTIONS_REFERENCE[k];
4622 for (var i = 0; i < flds.length; i++) {
4623 if (!op.hasOwnProperty(flds[i])) {
4624 warn('Option ' + k + ' missing "' + flds[i] + '" property');
4625 } else if (typeof(op[flds[i]]) != 'string') {
4626 warn(k + '.' + flds[i] + ' must be of type string');
4627 }
4628 }
a38e9336
DV
4629 var labels = op['labels'];
4630 if (typeof(labels) !== 'object') {
4631 warn('Option "' + k + '" is missing a "labels": [...] option');
4632 for (var i = 0; i < labels.length; i++) {
4633 if (!cats.hasOwnProperty(labels[i])) {
4634 warn('Option "' + k + '" has label "' + labels[i] +
4635 '", which is invalid.');
4636 }
4637 }
4638 }
028ddf8a
DV
4639 }
4640})();
4641// </REMOVE_FOR_COMBINED>