3 * Copyright 2011 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview This file contains utility functions used by dygraphs. These
9 * are typically static (i.e. not related to any particular dygraph). Examples
10 * include date/time formatting functions, basic algorithms (e.g. binary
11 * search) and generic DOM-manipulation functions.
16 /*global Dygraph:false, Node:false */
19 Dygraph
.LOG_SCALE
= 10;
20 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
27 Dygraph
.log10
= function(x
) {
28 return Math
.log(x
) / Dygraph
.LN_TEN
;
31 /** A dotted line stroke pattern. */
32 Dygraph
.DOTTED_LINE
= [2, 2];
33 /** A dashed line stroke pattern. */
34 Dygraph
.DASHED_LINE
= [7, 3];
35 /** A dot dash stroke pattern. */
36 Dygraph
.DOT_DASH_LINE
= [7, 2, 2, 2];
39 * Return the 2d context for a dygraph canvas.
41 * This method is only exposed for the sake of replacing the function in
42 * automated tests, e.g.
44 * var oldFunc = Dygraph.getContext();
45 * Dygraph.getContext = function(canvas) {
46 * var realContext = oldFunc(canvas);
47 * return new Proxy(realContext);
49 * @param {!HTMLCanvasElement} canvas
50 * @return {!CanvasRenderingContext2D}
53 Dygraph
.getContext
= function(canvas
) {
54 return /** @type{!CanvasRenderingContext2D}*/(canvas
.getContext("2d"));
58 * Add an event handler.
59 * @param {!Node} elem The element to add the event to.
60 * @param {string} type The type of the event, e.g. 'click' or 'mousemove'.
61 * @param {function(Event):(boolean|undefined)} fn The function to call
62 * on the event. The function takes one parameter: the event object.
65 Dygraph
.addEvent
= function addEvent(elem
, type
, fn
) {
66 elem
.addEventListener(type
, fn
, false);
70 * Add an event handler. This event handler is kept until the graph is
71 * destroyed with a call to graph.destroy().
73 * @param {!Node} elem The element to add the event to.
74 * @param {string} type The type of the event, e.g. 'click' or 'mousemove'.
75 * @param {function(Event):(boolean|undefined)} fn The function to call
76 * on the event. The function takes one parameter: the event object.
79 Dygraph
.prototype.addAndTrackEvent
= function(elem
, type
, fn
) {
80 Dygraph
.addEvent(elem
, type
, fn
);
81 this.registeredEvents_
.push({ elem
: elem
, type
: type
, fn
: fn
});
85 * Remove an event handler.
86 * @param {!Node} elem The element to remove the event from.
87 * @param {string} type The type of the event, e.g. 'click' or 'mousemove'.
88 * @param {function(Event):(boolean|undefined)} fn The function to call
89 * on the event. The function takes one parameter: the event object.
92 Dygraph
.removeEvent
= function(elem
, type
, fn
) {
93 elem
.removeEventListener(type
, fn
, false);
96 Dygraph
.prototype.removeTrackedEvents_
= function() {
97 if (this.registeredEvents_
) {
98 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
99 var reg
= this.registeredEvents_
[idx
];
100 Dygraph
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
104 this.registeredEvents_
= [];
108 * Cancels further processing of an event. This is useful to prevent default
109 * browser actions, e.g. highlighting text on a double-click.
110 * Based on the article at
111 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
112 * @param {!Event} e The event whose normal behavior should be canceled.
115 Dygraph
.cancelEvent
= function(e
) {
116 e
= e
? e
: window
.event
;
117 if (e
.stopPropagation
) {
120 if (e
.preventDefault
) {
123 e
.cancelBubble
= true;
125 e
.returnValue
= false;
130 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
131 * is used to generate default series colors which are evenly spaced on the
133 * @param { number } hue Range is 0.0-1.0.
134 * @param { number } saturation Range is 0.0-1.0.
135 * @param { number } value Range is 0.0-1.0.
136 * @return { string } "rgb(r,g,b)" where r, g and b range from 0-255.
139 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
143 if (saturation
=== 0) {
148 var i
= Math
.floor(hue
* 6);
149 var f
= (hue
* 6) - i
;
150 var p
= value
* (1 - saturation
);
151 var q
= value
* (1 - (saturation
* f
));
152 var t
= value
* (1 - (saturation
* (1 - f
)));
154 case 1: red
= q
; green
= value
; blue
= p
; break;
155 case 2: red
= p
; green
= value
; blue
= t
; break;
156 case 3: red
= p
; green
= q
; blue
= value
; break;
157 case 4: red
= t
; green
= p
; blue
= value
; break;
158 case 5: red
= value
; green
= p
; blue
= q
; break;
159 case 6: // fall through
160 case 0: red
= value
; green
= t
; blue
= p
; break;
163 red
= Math
.floor(255 * red
+ 0.5);
164 green
= Math
.floor(255 * green
+ 0.5);
165 blue
= Math
.floor(255 * blue
+ 0.5);
166 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
170 * Find the coordinates of an object relative to the top left of the page.
173 * @return {{x:number,y:number}}
176 Dygraph
.findPos
= function(obj
) {
177 var p
= obj
.getBoundingClientRect(),
179 d
= document
.documentElement
;
182 x
: p
.left
+ (w
.pageXOffset
|| d
.scrollLeft
),
183 y
: p
.top
+ (w
.pageYOffset
|| d
.scrollTop
)
188 * Returns the x-coordinate of the event in a coordinate system where the
189 * top-left corner of the page (not the window) is (0,0).
190 * Taken from MochiKit.Signal
195 Dygraph
.pageX
= function(e
) {
196 if (e
.isTouchOver
) return (!e
.touches
[0] || e
.touches
[0].pageX
< 0) ? 0 : e
.touches
[0].pageX
;
197 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
201 * Returns the y-coordinate of the event in a coordinate system where the
202 * top-left corner of the page (not the window) is (0,0).
203 * Taken from MochiKit.Signal
208 Dygraph
.pageY
= function(e
) {
209 if (e
.isTouchOver
) return (!e
.touches
[0] || e
.touches
[0].pageY
< 0) ? 0 : e
.touches
[0].pageY
;
210 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
214 * Converts page the x-coordinate of the event to pixel x-coordinates on the
215 * canvas (i.e. DOM Coords).
216 * @param {!Event} e Drag event.
217 * @param {!DygraphInteractionContext} context Interaction context object.
218 * @return {number} The amount by which the drag has moved to the right.
220 Dygraph
.dragGetX_
= function(e
, context
) {
221 return Dygraph
.pageX(e
) - context
.px
;
225 * Converts page the y-coordinate of the event to pixel y-coordinates on the
226 * canvas (i.e. DOM Coords).
227 * @param {!Event} e Drag event.
228 * @param {!DygraphInteractionContext} context Interaction context object.
229 * @return {number} The amount by which the drag has moved down.
231 Dygraph
.dragGetY_
= function(e
, context
) {
232 return Dygraph
.pageY(e
) - context
.py
;
236 * This returns true unless the parameter is 0, null, undefined or NaN.
237 * TODO(danvk): rename this function to something like 'isNonZeroNan'.
239 * @param {number} x The number to consider.
240 * @return {boolean} Whether the number is zero or NaN.
243 Dygraph
.isOK
= function(x
) {
244 return !!x
&& !isNaN(x
);
248 * @param {{x:?number,y:?number,yval:?number}} p The point to consider, valid
249 * points are {x, y} objects
250 * @param {boolean=} opt_allowNaNY Treat point with y=NaN as valid
251 * @return {boolean} Whether the point has numeric x and y.
254 Dygraph
.isValidPoint
= function(p
, opt_allowNaNY
) {
255 if (!p
) return false; // null or undefined object
256 if (p
.yval
=== null) return false; // missing point
257 if (p
.x
=== null || p
.x
=== undefined
) return false;
258 if (p
.y
=== null || p
.y
=== undefined
) return false;
259 if (isNaN(p
.x
) || (!opt_allowNaNY
&& isNaN(p
.y
))) return false;
264 * Number formatting function which mimicks the behavior of %g in printf, i.e.
265 * either exponential or fixed format (without trailing 0s) is used depending on
266 * the length of the generated string. The advantage of this format is that
267 * there is a predictable upper bound on the resulting string length,
268 * significant figures are not dropped, and normal numbers are not displayed in
269 * exponential notation.
271 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
272 * It creates strings which are too long for absolute values between 10^-4 and
273 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
276 * @param {number} x The number to format
277 * @param {number=} opt_precision The precision to use, default 2.
278 * @return {string} A string formatted like %g in printf. The max generated
279 * string length should be precision + 6 (e.g 1.123e+300).
281 Dygraph
.floatFormat
= function(x
, opt_precision
) {
282 // Avoid invalid precision values; [1, 21] is the valid range.
283 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
285 // This is deceptively simple. The actual algorithm comes from:
287 // Max allowed length = p + 4
288 // where 4 comes from 'e+n' and '.'.
290 // Length of fixed format = 2 + y + p
291 // where 2 comes from '0.' and y = # of leading zeroes.
293 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
296 // Since the behavior of toPrecision() is identical for larger numbers, we
297 // don't have to worry about the other bound.
299 // Finally, the argument for toExponential() is the number of trailing digits,
300 // so we take off 1 for the value before the '.'.
301 return (Math
.abs(x
) < 1.0e-3 && x
!== 0.0) ?
302 x
.toExponential(p
- 1) : x
.toPrecision(p
);
306 * Converts '9' to '09' (useful for dates)
311 Dygraph
.zeropad
= function(x
) {
312 if (x
< 10) return "0" + x
; else return "" + x
;
316 * Date accessors to get the parts of a calendar date (year, month,
317 * day, hour, minute, second and millisecond) according to local time,
318 * and factory method to call the Date constructor with an array of arguments.
320 Dygraph
.DateAccessorsLocal
= {
321 getFullYear
: function(d
) {return d
.getFullYear();},
322 getMonth
: function(d
) {return d
.getMonth();},
323 getDate
: function(d
) {return d
.getDate();},
324 getHours
: function(d
) {return d
.getHours();},
325 getMinutes
: function(d
) {return d
.getMinutes();},
326 getSeconds
: function(d
) {return d
.getSeconds();},
327 getMilliseconds
: function(d
) {return d
.getMilliseconds();},
328 getDay
: function(d
) {return d
.getDay();},
329 makeDate
: function(y
, m
, d
, hh
, mm
, ss
, ms
) {
330 return new Date(y
, m
, d
, hh
, mm
, ss
, ms
);
335 * Date accessors to get the parts of a calendar date (year, month,
336 * day of month, hour, minute, second and millisecond) according to UTC time,
337 * and factory method to call the Date constructor with an array of arguments.
339 Dygraph
.DateAccessorsUTC
= {
340 getFullYear
: function(d
) {return d
.getUTCFullYear();},
341 getMonth
: function(d
) {return d
.getUTCMonth();},
342 getDate
: function(d
) {return d
.getUTCDate();},
343 getHours
: function(d
) {return d
.getUTCHours();},
344 getMinutes
: function(d
) {return d
.getUTCMinutes();},
345 getSeconds
: function(d
) {return d
.getUTCSeconds();},
346 getMilliseconds
: function(d
) {return d
.getUTCMilliseconds();},
347 getDay
: function(d
) {return d
.getUTCDay();},
348 makeDate
: function(y
, m
, d
, hh
, mm
, ss
, ms
) {
349 return new Date(Date
.UTC(y
, m
, d
, hh
, mm
, ss
, ms
));
354 * Return a string version of the hours, minutes and seconds portion of a date.
355 * @param {number} hh The hours (from 0-23)
356 * @param {number} mm The minutes (from 0-59)
357 * @param {number} ss The seconds (from 0-59)
358 * @return {string} A time of the form "HH:MM" or "HH:MM:SS"
361 Dygraph
.hmsString_
= function(hh
, mm
, ss
) {
362 var zeropad
= Dygraph
.zeropad
;
363 var ret
= zeropad(hh
) + ":" + zeropad(mm
);
365 ret
+= ":" + zeropad(ss
);
371 * Convert a JS date (millis since epoch) to a formatted string.
372 * @param {number} time The JavaScript time value (ms since epoch)
373 * @param {boolean} utc Wether output UTC or local time
374 * @return {string} A date of one of these forms:
375 * "YYYY/MM/DD", "YYYY/MM/DD HH:MM" or "YYYY/MM/DD HH:MM:SS"
378 Dygraph
.dateString_
= function(time
, utc
) {
379 var zeropad
= Dygraph
.zeropad
;
380 var accessors
= utc
? Dygraph
.DateAccessorsUTC
: Dygraph
.DateAccessorsLocal
;
381 var date
= new Date(time
);
382 var y
= accessors
.getFullYear(date
);
383 var m
= accessors
.getMonth(date
);
384 var d
= accessors
.getDate(date
);
385 var hh
= accessors
.getHours(date
);
386 var mm
= accessors
.getMinutes(date
);
387 var ss
= accessors
.getSeconds(date
);
388 // Get a year string:
390 // Get a 0 padded month string
391 var month
= zeropad(m
+ 1); //months are 0-offset, sigh
392 // Get a 0 padded day string
393 var day
= zeropad(d
);
394 var frac
= hh
* 3600 + mm
* 60 + ss
;
395 var ret
= year
+ "/" + month + "/" + day
;
397 ret
+= " " + Dygraph
.hmsString_(hh
, mm
, ss
);
403 * Round a number to the specified number of digits past the decimal point.
404 * @param {number} num The number to round
405 * @param {number} places The number of decimals to which to round
406 * @return {number} The rounded number
409 Dygraph
.round_
= function(num
, places
) {
410 var shift
= Math
.pow(10, places
);
411 return Math
.round(num
* shift
)/shift
;
415 * Implementation of binary search over an array.
416 * Currently does not work when val is outside the range of arry's values.
417 * @param {number} val the value to search for
418 * @param {Array.<number>} arry is the value over which to search
419 * @param {number} abs If abs > 0, find the lowest entry greater than val
420 * If abs < 0, find the highest entry less than val.
421 * If abs == 0, find the entry that equals val.
422 * @param {number=} low The first index in arry to consider (optional)
423 * @param {number=} high The last index in arry to consider (optional)
424 * @return {number} Index of the element, or -1 if it isn't found.
427 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
428 if (low
=== null || low
=== undefined
||
429 high
=== null || high
=== undefined
) {
431 high
= arry
.length
- 1;
436 if (abs
=== null || abs
=== undefined
) {
439 var validIndex
= function(idx
) {
440 return idx
>= 0 && idx
< arry
.length
;
442 var mid
= parseInt((low
+ high
) / 2, 10);
443 var element
= arry
[mid
];
445 if (element
== val
) {
447 } else if (element
> val
) {
449 // Accept if element > val, but also if prior element < val.
451 if (validIndex(idx
) && arry
[idx
] < val
) {
455 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
456 } else if (element
< val
) {
458 // Accept if element < val, but also if prior element > val.
460 if (validIndex(idx
) && arry
[idx
] > val
) {
464 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
466 return -1; // can't actually happen, but makes closure compiler happy
470 * Parses a date, returning the number of milliseconds since epoch. This can be
471 * passed in as an xValueParser in the Dygraph constructor.
472 * TODO(danvk): enumerate formats that this understands.
474 * @param {string} dateStr A date in a variety of possible string formats.
475 * @return {number} Milliseconds since epoch.
478 Dygraph
.dateParser
= function(dateStr
) {
482 // Let the system try the format first, with one caveat:
483 // YYYY-MM-DD[ HH:MM:SS] is interpreted as UTC by a variety of browsers.
484 // dygraphs displays dates in local time, so this will result in surprising
485 // inconsistencies. But if you specify "T" or "Z" (i.e. YYYY-MM-DDTHH:MM:SS),
486 // then you probably know what you're doing, so we'll let you go ahead.
487 // Issue: http://code.google.com/p/dygraphs/issues/detail
?id
=255
488 if (dateStr
.search("-") == -1 ||
489 dateStr
.search("T") != -1 || dateStr
.search("Z") != -1) {
490 d
= Dygraph
.dateStrToMillis(dateStr
);
491 if (d
&& !isNaN(d
)) return d
;
494 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
495 dateStrSlashed
= dateStr
.replace("-", "/", "g");
496 while (dateStrSlashed
.search("-") != -1) {
497 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
499 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
500 } else if (dateStr
.length
== 8) { // e.g. '20090712'
501 // TODO(danvk): remove support for this format. It's confusing.
502 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr.substr(4,2) + "/" +
504 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
506 // Any format that Date.parse will accept, e.g. "2009/07/12" or
507 // "2009/07/12 12:34:56"
508 d
= Dygraph
.dateStrToMillis(dateStr
);
511 if (!d
|| isNaN(d
)) {
512 console
.error("Couldn't parse " + dateStr
+ " as a date");
518 * This is identical to JavaScript's built-in Date.parse() method, except that
519 * it doesn't get replaced with an incompatible method by aggressive JS
520 * libraries like MooTools or Joomla.
521 * @param {string} str The date string, e.g. "2011/05/06"
522 * @return {number} millis since epoch
525 Dygraph
.dateStrToMillis
= function(str
) {
526 return new Date(str
).getTime();
529 // These functions are all based on MochiKit.
531 * Copies all the properties from o to self.
533 * @param {!Object} self
537 Dygraph
.update
= function(self
, o
) {
538 if (typeof(o
) != 'undefined' && o
!== null) {
540 if (o
.hasOwnProperty(k
)) {
549 * Copies all the properties from o to self.
551 * @param {!Object} self
556 Dygraph
.updateDeep
= function (self
, o
) {
557 // Taken from http://stackoverflow.com/questions
/384286/javascript
-isdom
-how
-do-you
-check
-if-a
-javascript
-object
-is
-a
-dom
-object
560 typeof Node
=== "object" ? o
instanceof Node
:
561 typeof o
=== "object" && typeof o
.nodeType
=== "number" && typeof o
.nodeName
==="string"
565 if (typeof(o
) != 'undefined' && o
!== null) {
567 if (o
.hasOwnProperty(k
)) {
570 } else if (Dygraph
.isArrayLike(o
[k
])) {
571 self
[k
] = o
[k
].slice();
572 } else if (isNode(o
[k
])) {
573 // DOM objects are shallowly-copied.
575 } else if (typeof(o
[k
]) == 'object') {
576 if (typeof(self
[k
]) != 'object' || self
[k
] === null) {
579 Dygraph
.updateDeep(self
[k
], o
[k
]);
594 Dygraph
.isArrayLike
= function(o
) {
597 (typ
!= 'object' && !(typ
== 'function' &&
598 typeof(o
.item
) == 'function')) ||
600 typeof(o
.length
) != 'number' ||
613 Dygraph
.isDateLike
= function (o
) {
614 if (typeof(o
) != "object" || o
=== null ||
615 typeof(o
.getTime
) != 'function') {
622 * Note: this only seems to work for arrays.
627 Dygraph
.clone
= function(o
) {
628 // TODO(danvk): figure out how MochiKit's version works
630 for (var i
= 0; i
< o
.length
; i
++) {
631 if (Dygraph
.isArrayLike(o
[i
])) {
632 r
.push(Dygraph
.clone(o
[i
]));
641 * Create a new canvas element.
643 * @return {!HTMLCanvasElement}
646 Dygraph
.createCanvas
= function() {
647 return document
.createElement('canvas');
651 * Returns the context's pixel ratio, which is the ratio between the device
652 * pixel ratio and the backing store ratio. Typically this is 1 for conventional
653 * displays, and > 1 for HiDPI displays (such as the Retina MBP).
654 * See http://www.html5rocks.com/en/tutorials/canvas/hidpi/ for more details.
656 * @param {!CanvasRenderingContext2D} context The canvas's 2d context.
657 * @return {number} The ratio of the device pixel ratio and the backing store
658 * ratio for the specified context.
660 Dygraph
.getContextPixelRatio
= function(context
) {
662 var devicePixelRatio
= window
.devicePixelRatio
;
663 var backingStoreRatio
= context
.webkitBackingStorePixelRatio
||
664 context
.mozBackingStorePixelRatio
||
665 context
.msBackingStorePixelRatio
||
666 context
.oBackingStorePixelRatio
||
667 context
.backingStorePixelRatio
|| 1;
668 if (devicePixelRatio
!== undefined
) {
669 return devicePixelRatio
/ backingStoreRatio
;
671 // At least devicePixelRatio must be defined for this ratio to make sense.
672 // We default backingStoreRatio to 1: this does not exist on some browsers
673 // (i.e. desktop Chrome).
682 * Checks whether the user is on an Android browser.
683 * Android does not fully support the <canvas> tag, e.g. w/r/t/ clipping.
687 Dygraph
.isAndroid
= function() {
688 return (/Android/).test(navigator
.userAgent
);
693 * TODO(danvk): use @template here when it's better supported for classes.
694 * @param {!Array} array
695 * @param {number} start
696 * @param {number} length
697 * @param {function(!Array,?):boolean=} predicate
700 Dygraph
.Iterator
= function(array
, start
, length
, predicate
) {
702 length
= length
|| array
.length
;
703 this.hasNext
= true; // Use to identify if there's another element.
704 this.peek
= null; // Use for look-ahead
707 this.predicate_
= predicate
;
708 this.end_
= Math
.min(array
.length
, start
+ length
);
709 this.nextIdx_
= start
- 1; // use -1 so initial advance works.
710 this.next(); // ignoring result.
716 Dygraph
.Iterator
.prototype.next
= function() {
722 var nextIdx
= this.nextIdx_
+ 1;
724 while (nextIdx
< this.end_
) {
725 if (!this.predicate_
|| this.predicate_(this.array_
, nextIdx
)) {
726 this.peek
= this.array_
[nextIdx
];
732 this.nextIdx_
= nextIdx
;
734 this.hasNext
= false;
741 * Returns a new iterator over array, between indexes start and
742 * start + length, and only returns entries that pass the accept function
744 * @param {!Array} array the array to iterate over.
745 * @param {number} start the first index to iterate over, 0 if absent.
746 * @param {number} length the number of elements in the array to iterate over.
747 * This, along with start, defines a slice of the array, and so length
748 * doesn't imply the number of elements in the iterator when accept doesn't
749 * always accept all values. array.length when absent.
750 * @param {function(?):boolean=} opt_predicate a function that takes
751 * parameters array and idx, which returns true when the element should be
752 * returned. If omitted, all elements are accepted.
755 Dygraph
.createIterator
= function(array
, start
, length
, opt_predicate
) {
756 return new Dygraph
.Iterator(array
, start
, length
, opt_predicate
);
759 // Shim layer with setTimeout fallback.
760 // From: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
761 // Should be called with the window context:
762 // Dygraph.requestAnimFrame.call(window, function() {})
763 Dygraph
.requestAnimFrame
= (function() {
764 return window
.requestAnimationFrame
||
765 window
.webkitRequestAnimationFrame
||
766 window
.mozRequestAnimationFrame
||
767 window
.oRequestAnimationFrame
||
768 window
.msRequestAnimationFrame
||
769 function (callback
) {
770 window
.setTimeout(callback
, 1000 / 60);
775 * Call a function at most maxFrames times at an attempted interval of
776 * framePeriodInMillis, then call a cleanup function once. repeatFn is called
777 * once immediately, then at most (maxFrames - 1) times asynchronously. If
778 * maxFrames==1, then cleanup_fn() is also called synchronously. This function
779 * is used to sequence animation.
780 * @param {function(number)} repeatFn Called repeatedly -- takes the frame
781 * number (from 0 to maxFrames-1) as an argument.
782 * @param {number} maxFrames The max number of times to call repeatFn
783 * @param {number} framePeriodInMillis Max requested time between frames.
784 * @param {function()} cleanupFn A function to call after all repeatFn calls.
787 Dygraph
.repeatAndCleanup
= function(repeatFn
, maxFrames
, framePeriodInMillis
,
790 var previousFrameNumber
;
791 var startTime
= new Date().getTime();
792 repeatFn(frameNumber
);
793 if (maxFrames
== 1) {
797 var maxFrameArg
= maxFrames
- 1;
800 if (frameNumber
>= maxFrames
) return;
801 Dygraph
.requestAnimFrame
.call(window
, function() {
802 // Determine which frame to draw based on the delay so far. Will skip
803 // frames if necessary.
804 var currentTime
= new Date().getTime();
805 var delayInMillis
= currentTime
- startTime
;
806 previousFrameNumber
= frameNumber
;
807 frameNumber
= Math
.floor(delayInMillis
/ framePeriodInMillis
);
808 var frameDelta
= frameNumber
- previousFrameNumber
;
809 // If we predict that the subsequent repeatFn call will overshoot our
810 // total frame target, so our last call will cause a stutter, then jump to
811 // the last call immediately. If we're going to cause a stutter, better
812 // to do it faster than slower.
813 var predictOvershootStutter
= (frameNumber
+ frameDelta
) > maxFrameArg
;
814 if (predictOvershootStutter
|| (frameNumber
>= maxFrameArg
)) {
815 repeatFn(maxFrameArg
); // Ensure final call with maxFrameArg.
818 if (frameDelta
!== 0) { // Don't call repeatFn with duplicate frames.
819 repeatFn(frameNumber
);
827 // A whitelist of options that do not change pixel positions.
828 var pixelSafeOptions
= {
829 'annotationClickHandler': true,
830 'annotationDblClickHandler': true,
831 'annotationMouseOutHandler': true,
832 'annotationMouseOverHandler': true,
833 'axisLabelColor': true,
834 'axisLineColor': true,
835 'axisLineWidth': true,
836 'clickCallback': true,
837 'drawCallback': true,
838 'drawHighlightPointCallback': true,
840 'drawPointCallback': true,
843 'gridLineColor': true,
844 'gridLineWidth': true,
845 'hideOverlayOnMouseOut': true,
846 'highlightCallback': true,
847 'highlightCircleSize': true,
848 'interactionModel': true,
849 'isZoomedIgnoreProgrammaticZoom': true,
851 'labelsDivStyles': true,
852 'labelsDivWidth': true,
855 'labelsSeparateLines': true,
856 'labelsShowZeroValues': true,
858 'panEdgeFraction': true,
859 'pixelsPerYLabel': true,
860 'pointClickCallback': true,
862 'rangeSelectorPlotFillColor': true,
863 'rangeSelectorPlotFillGradientColor': true,
864 'rangeSelectorPlotStrokeColor': true,
865 'rangeSelectorBackgroundStrokeColor': true,
866 'rangeSelectorBackgroundLineWidth': true,
867 'rangeSelectorPlotLineWidth': true,
868 'rangeSelectorForegroundStrokeColor': true,
869 'rangeSelectorForegroundLineWidth': true,
870 'rangeSelectorAlpha': true,
871 'showLabelsOnHighlight': true,
874 'underlayCallback': true,
875 'unhighlightCallback': true,
880 * This function will scan the option list and determine if they
881 * require us to recalculate the pixel positions of each point.
882 * TODO: move this into dygraph-options.js
883 * @param {!Array.<string>} labels a list of options to check.
884 * @param {!Object} attrs
885 * @return {boolean} true if the graph needs new points else false.
888 Dygraph
.isPixelChangingOptionList
= function(labels
, attrs
) {
889 // Assume that we do not require new points.
890 // This will change to true if we actually do need new points.
892 // Create a dictionary of series names for faster lookup.
893 // If there are no labels, then the dictionary stays empty.
894 var seriesNamesDictionary
= { };
896 for (var i
= 1; i
< labels
.length
; i
++) {
897 seriesNamesDictionary
[labels
[i
]] = true;
901 // Scan through a flat (i.e. non-nested) object of options.
902 // Returns true/false depending on whether
new points are needed
.
903 var scanFlatOptions
= function(options
) {
904 for (var property
in options
) {
905 if (options
.hasOwnProperty(property
) &&
906 !pixelSafeOptions
[property
]) {
913 // Iterate through the list of updated options.
914 for (var property
in attrs
) {
915 if (!attrs
.hasOwnProperty(property
)) continue;
917 // Find out of this field is actually a series specific options list.
918 if (property
== 'highlightSeriesOpts' ||
919 (seriesNamesDictionary
[property
] && !attrs
.series
)) {
920 // This property value is a list of options for this series.
921 if (scanFlatOptions(attrs
[property
])) return true;
922 } else if (property
== 'series' || property
== 'axes') {
923 // This is twice-nested options list.
924 var perSeries
= attrs
[property
];
925 for (var series
in perSeries
) {
926 if (perSeries
.hasOwnProperty(series
) &&
927 scanFlatOptions(perSeries
[series
])) {
932 // If this was not a series specific option list, check if it's a pixel
933 // changing property.
934 if (!pixelSafeOptions
[property
]) return true;
942 DEFAULT
: function(g
, name
, ctx
, canvasx
, canvasy
, color
, radius
) {
944 ctx
.fillStyle
= color
;
945 ctx
.arc(canvasx
, canvasy
, radius
, 0, 2 * Math
.PI
, false);
948 // For more shapes, include extras/shapes.js
952 * To create a "drag" interaction, you typically register a mousedown event
953 * handler on the element where the drag begins. In that handler, you register a
954 * mouseup handler on the window to determine when the mouse is released,
955 * wherever that release happens. This works well, except when the user releases
956 * the mouse over an off-domain iframe. In that case, the mouseup event is
957 * handled by the iframe and never bubbles up to the window handler.
959 * To deal with this issue, we cover iframes with high z-index divs to make sure
960 * they don't capture mouseup.
963 * element.addEventListener('mousedown', function() {
964 * var tarper = new Dygraph.IFrameTarp();
966 * var mouseUpHandler = function() {
968 * window.removeEventListener(mouseUpHandler);
971 * window.addEventListener('mouseup', mouseUpHandler);
976 Dygraph
.IFrameTarp
= function() {
977 /** @type {Array.<!HTMLDivElement>} */
982 * Find all the iframes in the document and cover them with high z-index
985 Dygraph
.IFrameTarp
.prototype.cover
= function() {
986 var iframes
= document
.getElementsByTagName("iframe");
987 for (var i
= 0; i
< iframes
.length
; i
++) {
988 var iframe
= iframes
[i
];
989 var pos
= Dygraph
.findPos(iframe
),
992 width
= iframe
.offsetWidth
,
993 height
= iframe
.offsetHeight
;
995 var div
= document
.createElement("div");
996 div
.style
.position
= "absolute";
997 div
.style
.left
= x
+ 'px';
998 div
.style
.top
= y
+ 'px';
999 div
.style
.width
= width
+ 'px';
1000 div
.style
.height
= height
+ 'px';
1001 div
.style
.zIndex
= 999;
1002 document
.body
.appendChild(div
);
1003 this.tarps
.push(div
);
1008 * Remove all the iframe covers. You should call this in a mouseup handler.
1010 Dygraph
.IFrameTarp
.prototype.uncover
= function() {
1011 for (var i
= 0; i
< this.tarps
.length
; i
++) {
1012 this.tarps
[i
].parentNode
.removeChild(this.tarps
[i
]);
1018 * Determine whether |data| is delimited by CR, CRLF, LF, LFCR.
1019 * @param {string} data
1020 * @return {?string} the delimiter that was detected (or null on failure).
1022 Dygraph
.detectLineDelimiter
= function(data
) {
1023 for (var i
= 0; i
< data
.length
; i
++) {
1024 var code
= data
.charAt(i
);
1025 if (code
=== '\r') {
1026 // Might actually be "\r\n".
1027 if (((i
+ 1) < data
.length
) && (data
.charAt(i
+ 1) === '\n')) {
1032 if (code
=== '\n') {
1033 // Might actually be "\n\r".
1034 if (((i
+ 1) < data
.length
) && (data
.charAt(i
+ 1) === '\r')) {
1045 * Is one node contained by another?
1046 * @param {Node} containee The contained node.
1047 * @param {Node} container The container node.
1048 * @return {boolean} Whether containee is inside (or equal to) container.
1051 Dygraph
.isNodeContainedBy
= function(containee
, container
) {
1052 if (container
=== null || containee
=== null) {
1055 var containeeNode
= /** @type {Node} */ (containee
);
1056 while (containeeNode
&& containeeNode
!== container
) {
1057 containeeNode
= containeeNode
.parentNode
;
1059 return (containeeNode
=== container
);
1063 // This masks some numeric issues in older versions of Firefox,
1064 // where 1.0/Math
.pow(10,2) != Math
.pow(10,-2).
1065 /** @type {function(number,number):number} */
1066 Dygraph
.pow
= function(base
, exp
) {
1068 return 1.0 / Math
.pow(base
, -exp
);
1070 return Math
.pow(base
, exp
);
1073 var RGBA_RE
= /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*([01](?:\.\d+)?))?\)$/;
1076 * Helper for Dygraph.toRGB_ which parses strings of the form:
1078 * rgba(123, 45, 67, 0.5)
1079 * @return parsed {r,g,b,a?} tuple or null.
1081 function parseRGBA(rgbStr
) {
1082 var bits
= RGBA_RE
.exec(rgbStr
);
1083 if (!bits
) return null;
1084 var r
= parseInt(bits
[1], 10),
1085 g
= parseInt(bits
[2], 10),
1086 b
= parseInt(bits
[3], 10);
1088 return {r
: r
, g
: g
, b
: b
, a
: parseFloat(bits
[4])};
1090 return {r
: r
, g
: g
, b
: b
};
1095 * Converts any valid CSS color (hex, rgb(), named color) to an RGB tuple.
1097 * @param {!string} colorStr Any valid CSS color string.
1098 * @return {{r:number,g:number,b:number,a:number?}} Parsed RGB tuple.
1101 Dygraph
.toRGB_
= function(colorStr
) {
1102 // Strategy: First try to parse colorStr directly. This is fast & avoids DOM
1103 // manipulation. If that fails (e.g. for named colors like 'red'), then
1104 // create a hidden DOM element and parse its computed color.
1105 var rgb
= parseRGBA(colorStr
);
1106 if (rgb
) return rgb
;
1108 var div
= document
.createElement('div');
1109 div
.style
.backgroundColor
= colorStr
;
1110 div
.style
.visibility
= 'hidden';
1111 document
.body
.appendChild(div
);
1112 var rgbStr
= window
.getComputedStyle(div
, null).backgroundColor
;
1113 document
.body
.removeChild(div
);
1114 return parseRGBA(rgbStr
);
1118 * Checks whether the browser supports the <canvas> tag.
1119 * @param {HTMLCanvasElement=} opt_canvasElement Pass a canvas element as an
1120 * optimization if you have one.
1121 * @return {boolean} Whether the browser supports canvas.
1123 Dygraph
.isCanvasSupported
= function(opt_canvasElement
) {
1125 var canvas
= opt_canvasElement
|| document
.createElement("canvas");
1126 canvas
.getContext("2d");
1134 * Parses the value as a floating point number. This is like the parseFloat()
1135 * built-in, but with a few differences:
1136 * - the empty string is parsed as null, rather than NaN.
1137 * - if the string cannot be parsed at all, an error is logged.
1138 * If the string can't be parsed, this method returns null.
1139 * @param {string} x The string to be parsed
1140 * @param {number=} opt_line_no The line number from which the string comes.
1141 * @param {string=} opt_line The text of the line from which the string comes.
1143 Dygraph
.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
1144 var val
= parseFloat(x
);
1145 if (!isNaN(val
)) return val
;
1147 // Try to figure out what happeend.
1148 // If the value is the empty string, parse it as null.
1149 if (/^ *$/.test(x
)) return null;
1151 // If it was actually "NaN", return it as NaN.
1152 if (/^ *nan *$/i.test(x
)) return NaN
;
1154 // Looks like a parsing error.
1155 var msg
= "Unable to parse '" + x
+ "' as a number";
1156 if (opt_line
!== undefined
&& opt_line_no
!== undefined
) {
1157 msg
+= " on line " + (1+(opt_line_no
||0)) + " ('" + opt_line
+ "') of CSV.";