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