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