1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
27 Date,SeriesA,SeriesB,...
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
31 If the 'fractions' option is set, the input should be of the form:
33 Date,SeriesA,SeriesB,...
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
37 And error bars will be calculated automatically using a binomial distribution.
39 For further documentation and examples, see http://dygraphs.com/
44 * Creates an interactive, zoomable chart.
47 * @param {div | String} div A div or the id of a div into which to construct
49 * @param {String | Function} file A file containing CSV data or a function
50 * that returns this data. The most basic expected format for each line is
51 * "YYYY/MM/DD,val1,val2,...". For more information, see
52 * http://dygraphs.com/data.html.
53 * @param {Object} attrs Various other attributes, e.g. errorBars determines
54 * whether the input data contains error ranges. For a complete list of
55 * options, see http://dygraphs.com/options.html.
57 Dygraph
= function(div
, data
, opts
) {
58 if (arguments
.length
> 0) {
59 if (arguments
.length
== 4) {
60 // Old versions of dygraphs took in the series labels as a constructor
61 // parameter. This doesn't make sense anymore, but it's easy to continue
62 // to support this usage.
63 this.warn("Using deprecated four-argument dygraph constructor");
64 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
66 this.__init__(div
, data
, opts
);
71 Dygraph
.NAME
= "Dygraph";
72 Dygraph
.VERSION
= "1.2";
73 Dygraph
.__repr__
= function() {
74 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
78 * Returns information about the Dygraph class.
80 Dygraph
.toString
= function() {
81 return this.__repr__();
84 // Various default values
85 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
86 Dygraph
.DEFAULT_WIDTH
= 480;
87 Dygraph
.DEFAULT_HEIGHT
= 320;
89 Dygraph
.LOG_SCALE
= 10;
90 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
92 Dygraph
.log10
= function(x
) {
93 return Math
.log(x
) / Dygraph
.LN_TEN
;
96 // Default attribute values.
97 Dygraph
.DEFAULT_ATTRS
= {
98 highlightCircleSize
: 3,
104 // TODO(danvk): move defaults from createStatusMessage_ here.
106 labelsSeparateLines
: false,
107 labelsShowZeroValues
: true,
110 showLabelsOnHighlight
: true,
112 yValueFormatter
: function(a
,b
) { return Dygraph
.numberFormatter(a
,b
); },
113 digitsAfterDecimal
: 2,
120 axisLabelFontSize
: 14,
123 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
127 xValueFormatter
: Dygraph
.dateString_
,
128 xValueParser
: Dygraph
.dateParser
,
129 xTicker
: Dygraph
.dateTicker
,
136 wilsonInterval
: true, // only relevant if fractions is true
140 connectSeparatedPoints
: false,
143 hideOverlayOnMouseOut
: true,
145 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
146 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
151 // Sizes of the various chart labels.
158 axisLineColor
: "black",
161 axisLabelColor
: "black",
162 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
166 gridLineColor
: "rgb(128,128,128)",
168 interactionModel
: null // will be set to Dygraph.Interaction.defaultModel
171 // Various logging levels.
177 // Directions for panning and zooming. Use bit operations when combined
178 // values are possible.
179 Dygraph
.HORIZONTAL
= 1;
180 Dygraph
.VERTICAL
= 2;
182 // Used for initializing annotation CSS rules only once.
183 Dygraph
.addedAnnotationCSS
= false;
187 * Return the 2d context for a dygraph canvas.
189 * This method is only exposed for the sake of replacing the function in
190 * automated tests, e.g.
192 * var oldFunc = Dygraph.getContext();
193 * Dygraph.getContext = function(canvas) {
194 * var realContext = oldFunc(canvas);
195 * return new Proxy(realContext);
198 Dygraph
.getContext
= function(canvas
) {
199 return canvas
.getContext("2d");
202 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
203 // Labels is no longer a constructor parameter, since it's typically set
204 // directly from the data source. It also conains a name for the x-axis,
205 // which the previous constructor form did not.
206 if (labels
!= null) {
207 var new_labels
= ["Date"];
208 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
209 Dygraph
.update(attrs
, { 'labels': new_labels
});
211 this.__init__(div
, file
, attrs
);
215 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
216 * and context <canvas> inside of it. See the constructor for details.
218 * @param {Element} div the Element to render the graph into.
219 * @param {String | Function} file Source data
220 * @param {Object} attrs Miscellaneous other options
223 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
224 // Hack for IE: if we're using excanvas and the document hasn't finished
225 // loading yet (and hence may not have initialized whatever it needs to
226 // initialize), then keep calling this routine periodically until it has.
227 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
228 typeof(G_vmlCanvasManager
) != 'undefined' &&
229 document
.readyState
!= 'complete') {
231 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
234 // Support two-argument constructor
235 if (attrs
== null) { attrs
= {}; }
237 // Copy the important bits into the object
238 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
241 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
242 this.previousVerticalX_
= -1;
243 this.fractions_
= attrs
.fractions
|| false;
244 this.dateWindow_
= attrs
.dateWindow
|| null;
246 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
247 this.is_initial_draw_
= true;
248 this.annotations_
= [];
250 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
251 this.zoomed_x_
= false;
252 this.zoomed_y_
= false;
254 // Clear the div. This ensure that, if multiple dygraphs are passed the same
255 // div, then only one will be drawn.
258 // If the div isn't already sized then inherit from our attrs or
259 // give it a default size.
260 if (div
.style
.width
== '') {
261 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
263 if (div
.style
.height
== '') {
264 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
266 this.width_
= parseInt(div
.style
.width
, 10);
267 this.height_
= parseInt(div
.style
.height
, 10);
268 // The div might have been specified as percent of the current window size,
269 // convert that to an appropriate number of pixels.
270 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
271 this.width_
= div
.offsetWidth
;
273 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
274 this.height_
= div
.offsetHeight
;
277 if (this.width_
== 0) {
278 this.error("dygraph has zero width. Please specify a width in pixels.");
280 if (this.height_
== 0) {
281 this.error("dygraph has zero height. Please specify a height in pixels.");
284 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
285 if (attrs
['stackedGraph']) {
286 attrs
['fillGraph'] = true;
287 // TODO(nikhilk): Add any other stackedGraph checks here.
290 // Dygraphs has many options, some of which interact with one another.
291 // To keep track of everything, we maintain two sets of options:
293 // this.user_attrs_ only options explicitly set by the user.
294 // this.attrs_ defaults, options derived from user_attrs_, data.
296 // Options are then accessed this.attr_('attr'), which first looks at
297 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
298 // defaults without overriding behavior that the user specifically asks for.
299 this.user_attrs_
= {};
300 Dygraph
.update(this.user_attrs_
, attrs
);
303 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
305 this.boundaryIds_
= [];
307 // Create the containing DIV and other interactive elements
308 this.createInterface_();
314 * Returns the zoomed status of the chart for one or both axes.
316 * Axis is an optional parameter. Can be set to 'x' or 'y'.
318 * The zoomed status for an axis is set whenever a user zooms using the mouse
319 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
320 * option is also specified).
322 Dygraph
.prototype.isZoomed
= function(axis
) {
323 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
324 if (axis
== 'x') return this.zoomed_x_
;
325 if (axis
== 'y') return this.zoomed_y_
;
326 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
330 * Returns information about the Dygraph object, including its containing ID.
332 Dygraph
.prototype.toString
= function() {
333 var maindiv
= this.maindiv_
;
334 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
335 return "[Dygraph " + id
+ "]";
340 * Returns the value of an option. This may be set by the user (either in the
341 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
343 * @param { String } name The name of the option, e.g. 'rollPeriod'.
344 * @param { String } [seriesName] The name of the series to which the option
345 * will be applied. If no per-series value of this option is available, then
346 * the global value is returned. This is optional.
347 * @return { ... } The value of the option.
349 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
350 // <REMOVE_FOR_COMBINED>
351 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
352 this.error('Must include options reference JS for testing');
353 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
354 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
355 'in the Dygraphs.OPTIONS_REFERENCE listing.');
356 // Only log this error once.
357 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
359 // </REMOVE_FOR_COMBINED
>
361 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
362 this.user_attrs_
[seriesName
] != null &&
363 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
364 return this.user_attrs_
[seriesName
][name
];
365 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
366 return this.user_attrs_
[name
];
367 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
368 return this.attrs_
[name
];
374 // TODO(danvk): any way I can get the line numbers to be this.warn call?
377 * Log an error on the JS console at the given severity.
378 * @param { Integer } severity One of Dygraph.{DEBUG,INFO,WARNING,ERROR}
379 * @param { String } The message to log.
381 Dygraph
.prototype.log
= function(severity
, message
) {
382 if (typeof(console
) != 'undefined') {
385 console
.debug('dygraphs: ' + message
);
388 console
.info('dygraphs: ' + message
);
390 case Dygraph
.WARNING
:
391 console
.warn('dygraphs: ' + message
);
394 console
.error('dygraphs: ' + message
);
401 Dygraph
.prototype.info
= function(message
) {
402 this.log(Dygraph
.INFO
, message
);
406 Dygraph
.prototype.warn
= function(message
) {
407 this.log(Dygraph
.WARNING
, message
);
411 Dygraph
.prototype.error
= function(message
) {
412 this.log(Dygraph
.ERROR
, message
);
416 * Returns the current rolling period, as set by the user or an option.
417 * @return {Number} The number of points in the rolling window
419 Dygraph
.prototype.rollPeriod
= function() {
420 return this.rollPeriod_
;
424 * Returns the currently-visible x-range. This can be affected by zooming,
425 * panning or a call to updateOptions.
426 * Returns a two-element array: [left, right].
427 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
429 Dygraph
.prototype.xAxisRange
= function() {
430 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
434 * Returns the lower- and upper-bound x-axis values of the
437 Dygraph
.prototype.xAxisExtremes
= function() {
438 var left
= this.rawData_
[0][0];
439 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
440 return [left
, right
];
444 * Returns the currently-visible y-range for an axis. This can be affected by
445 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
446 * called with no arguments, returns the range of the first axis.
447 * Returns a two-element array: [bottom, top].
449 Dygraph
.prototype.yAxisRange
= function(idx
) {
450 if (typeof(idx
) == "undefined") idx
= 0;
451 if (idx
< 0 || idx
>= this.axes_
.length
) {
454 var axis
= this.axes_
[idx
];
455 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
459 * Returns the currently-visible y-ranges for each axis. This can be affected by
460 * zooming, panning, calls to updateOptions, etc.
461 * Returns an array of [bottom, top] pairs, one for each y-axis.
463 Dygraph
.prototype.yAxisRanges
= function() {
465 for (var i
= 0; i
< this.axes_
.length
; i
++) {
466 ret
.push(this.yAxisRange(i
));
471 // TODO(danvk): use these functions throughout dygraphs.
473 * Convert from data coordinates to canvas/div X/Y coordinates.
474 * If specified, do this conversion for the coordinate system of a particular
475 * axis. Uses the first axis by default.
476 * Returns a two-element array: [X, Y]
478 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
479 * instead of toDomCoords(null, y, axis).
481 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
482 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
486 * Convert from data x coordinates to canvas/div X coordinate.
487 * If specified, do this conversion for the coordinate system of a particular
489 * Returns a single value or null if x is null.
491 Dygraph
.prototype.toDomXCoord
= function(x
) {
496 var area
= this.plotter_
.area
;
497 var xRange
= this.xAxisRange();
498 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
502 * Convert from data x coordinates to canvas/div Y coordinate and optional
503 * axis. Uses the first axis by default.
505 * returns a single value or null if y is null.
507 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
508 var pct
= this.toPercentYCoord(y
, axis
);
513 var area
= this.plotter_
.area
;
514 return area
.y
+ pct
* area
.h
;
518 * Convert from canvas/div coords to data coordinates.
519 * If specified, do this conversion for the coordinate system of a particular
520 * axis. Uses the first axis by default.
521 * Returns a two-element array: [X, Y].
523 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
524 * instead of toDataCoords(null, y, axis).
526 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
527 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
531 * Convert from canvas/div x coordinate to data coordinate.
533 * If x is null, this returns null.
535 Dygraph
.prototype.toDataXCoord
= function(x
) {
540 var area
= this.plotter_
.area
;
541 var xRange
= this.xAxisRange();
542 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
546 * Convert from canvas/div y coord to value.
548 * If y is null, this returns null.
549 * if axis is null, this uses the first axis.
551 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
556 var area
= this.plotter_
.area
;
557 var yRange
= this.yAxisRange(axis
);
559 if (typeof(axis
) == "undefined") axis
= 0;
560 if (!this.axes_
[axis
].logscale
) {
561 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
563 // Computing the inverse of toDomCoord.
564 var pct
= (y
- area
.y
) / area
.h
566 // Computing the inverse of toPercentYCoord. The function was arrived at with
567 // the following steps:
569 // Original calcuation:
570 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
572 // Move denominator to both sides:
573 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
575 // subtract logr1, and take the negative value.
576 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
578 // Swap both sides of the equation, and we can compute the log of the
579 // return value. Which means we just need to use that as the exponent in
581 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
583 var logr1
= Dygraph
.log10(yRange
[1]);
584 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
585 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
591 * Converts a y for an axis to a percentage from the top to the
592 * bottom of the drawing area.
594 * If the coordinate represents a value visible on the canvas, then
595 * the value will be between 0 and 1, where 0 is the top of the canvas.
596 * However, this method will return values outside the range, as
597 * values can fall outside the canvas.
599 * If y is null, this returns null.
600 * if axis is null, this uses the first axis.
602 * @param { Number } y The data y-coordinate.
603 * @param { Number } [axis] The axis number on which the data coordinate lives.
604 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
606 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
610 if (typeof(axis
) == "undefined") axis
= 0;
612 var area
= this.plotter_
.area
;
613 var yRange
= this.yAxisRange(axis
);
616 if (!this.axes_
[axis
].logscale
) {
617 // yRange[1] - y is unit distance from the bottom.
618 // yRange[1] - yRange[0] is the scale of the range.
619 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
620 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
622 var logr1
= Dygraph
.log10(yRange
[1]);
623 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
629 * Converts an x value to a percentage from the left to the right of
632 * If the coordinate represents a value visible on the canvas, then
633 * the value will be between 0 and 1, where 0 is the left of the canvas.
634 * However, this method will return values outside the range, as
635 * values can fall outside the canvas.
637 * If x is null, this returns null.
638 * @param { Number } x The data x-coordinate.
639 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
641 Dygraph
.prototype.toPercentXCoord
= function(x
) {
646 var xRange
= this.xAxisRange();
647 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
651 * Returns the number of columns (including the independent variable).
652 * @return { Integer } The number of columns.
654 Dygraph
.prototype.numColumns
= function() {
655 return this.rawData_
[0].length
;
659 * Returns the number of rows (excluding any header/label row).
660 * @return { Integer } The number of rows, less any header.
662 Dygraph
.prototype.numRows
= function() {
663 return this.rawData_
.length
;
667 * Returns the value in the given row and column. If the row and column exceed
668 * the bounds on the data, returns null. Also returns null if the value is
670 * @param { Number} row The row number of the data (0-based). Row 0 is the
671 * first row of data, not a header row.
672 * @param { Number} col The column number of the data (0-based)
673 * @return { Number } The value in the specified cell or null if the row/col
676 Dygraph
.prototype.getValue
= function(row
, col
) {
677 if (row
< 0 || row
> this.rawData_
.length
) return null;
678 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
680 return this.rawData_
[row
][col
];
685 * Add an event handler. This smooths a difference between IE and the rest of
687 * @param { DOM element } el The element to add the event to.
688 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
689 * @param { Function } fn The function to call on the event. The function takes
690 * one parameter: the event object.
692 Dygraph
.addEvent
= function(el
, evt
, fn
) {
693 var normed_fn
= function(e
) {
694 if (!e
) var e
= window
.event
;
697 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
698 el
.addEventListener(evt
, normed_fn
, false);
700 el
.attachEvent('on' + evt
, normed_fn
);
707 * Cancels further processing of an event. This is useful to prevent default
708 * browser actions, e.g. highlighting text on a double-click.
709 * Based on the article at
710 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
711 * @param { Event } e The event whose normal behavior should be canceled.
713 Dygraph
.cancelEvent
= function(e
) {
714 e
= e
? e
: window
.event
;
715 if (e
.stopPropagation
) {
718 if (e
.preventDefault
) {
721 e
.cancelBubble
= true;
723 e
.returnValue
= false;
729 * Generates interface elements for the Dygraph: a containing div, a div to
730 * display the current point, and a textbox to adjust the rolling average
731 * period. Also creates the Renderer/Layout elements.
734 Dygraph
.prototype.createInterface_
= function() {
735 // Create the all-enclosing graph div
736 var enclosing
= this.maindiv_
;
738 this.graphDiv
= document
.createElement("div");
739 this.graphDiv
.style
.width
= this.width_
+ "px";
740 this.graphDiv
.style
.height
= this.height_
+ "px";
741 enclosing
.appendChild(this.graphDiv
);
743 // Create the canvas for interactive parts of the chart.
744 this.canvas_
= Dygraph
.createCanvas();
745 this.canvas_
.style
.position
= "absolute";
746 this.canvas_
.width
= this.width_
;
747 this.canvas_
.height
= this.height_
;
748 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
749 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
751 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
753 // ... and for static parts of the chart.
754 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
755 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
757 // The interactive parts of the graph are drawn on top of the chart.
758 this.graphDiv
.appendChild(this.hidden_
);
759 this.graphDiv
.appendChild(this.canvas_
);
760 this.mouseEventElement_
= this.canvas_
;
763 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
764 dygraph
.mouseMove_(e
);
766 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
767 dygraph
.mouseOut_(e
);
770 // Create the grapher
771 this.layout_
= new DygraphLayout(this);
773 this.createStatusMessage_();
774 this.createDragInterface_();
778 * Detach DOM elements in the dygraph and null out all data references.
779 * Calling this when you're done with a dygraph can dramatically reduce memory
780 * usage. See, e.g., the tests/perf.html example.
782 Dygraph
.prototype.destroy
= function() {
783 var removeRecursive
= function(node
) {
784 while (node
.hasChildNodes()) {
785 removeRecursive(node
.firstChild
);
786 node
.removeChild(node
.firstChild
);
789 removeRecursive(this.maindiv_
);
791 var nullOut
= function(obj
) {
793 if (typeof(obj
[n
]) === 'object') {
799 // These may not all be necessary, but it can't hurt...
800 nullOut(this.layout_
);
801 nullOut(this.plotter_
);
806 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
807 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
808 * or the zoom rectangles) is done on this.canvas_.
809 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
810 * @return {Object} The newly-created canvas
813 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
814 var h
= Dygraph
.createCanvas();
815 h
.style
.position
= "absolute";
816 // TODO(danvk): h should be offset from canvas. canvas needs to include
817 // some extra area to make it easier to zoom in on the far left and far
818 // right. h needs to be precisely the plot area, so that clipping occurs.
819 h
.style
.top
= canvas
.style
.top
;
820 h
.style
.left
= canvas
.style
.left
;
821 h
.width
= this.width_
;
822 h
.height
= this.height_
;
823 h
.style
.width
= this.width_
+ "px"; // for IE
824 h
.style
.height
= this.height_
+ "px"; // for IE
829 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
830 * is used to generate default series colors which are evenly spaced on the
832 * @param { Number } hue Range is 0.0-1.0.
833 * @param { Number } saturation Range is 0.0-1.0.
834 * @param { Number } value Range is 0.0-1.0.
835 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
838 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
842 if (saturation
=== 0) {
847 var i
= Math
.floor(hue
* 6);
848 var f
= (hue
* 6) - i
;
849 var p
= value
* (1 - saturation
);
850 var q
= value
* (1 - (saturation
* f
));
851 var t
= value
* (1 - (saturation
* (1 - f
)));
853 case 1: red
= q
; green
= value
; blue
= p
; break;
854 case 2: red
= p
; green
= value
; blue
= t
; break;
855 case 3: red
= p
; green
= q
; blue
= value
; break;
856 case 4: red
= t
; green
= p
; blue
= value
; break;
857 case 5: red
= value
; green
= p
; blue
= q
; break;
858 case 6: // fall through
859 case 0: red
= value
; green
= t
; blue
= p
; break;
862 red
= Math
.floor(255 * red
+ 0.5);
863 green
= Math
.floor(255 * green
+ 0.5);
864 blue
= Math
.floor(255 * blue
+ 0.5);
865 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
870 * Generate a set of distinct colors for the data series. This is done with a
871 * color wheel. Saturation/Value are customizable, and the hue is
872 * equally-spaced around the color wheel. If a custom set of colors is
873 * specified, that is used instead.
876 Dygraph
.prototype.setColors_
= function() {
877 var num
= this.attr_("labels").length
- 1;
879 var colors
= this.attr_('colors');
881 var sat
= this.attr_('colorSaturation') || 1.0;
882 var val
= this.attr_('colorValue') || 0.5;
883 var half
= Math
.ceil(num
/ 2);
884 for (var i
= 1; i
<= num
; i
++) {
885 if (!this.visibility()[i
-1]) continue;
886 // alternate colors for high contrast.
887 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
888 var hue
= (1.0 * idx
/ (1 + num
));
889 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
892 for (var i
= 0; i
< num
; i
++) {
893 if (!this.visibility()[i
]) continue;
894 var colorStr
= colors
[i
% colors
.length
];
895 this.colors_
.push(colorStr
);
899 this.plotter_
.setColors(this.colors_
);
903 * Return the list of colors. This is either the list of colors passed in the
904 * attributes or the autogenerated list of rgb(r,g,b) strings.
905 * @return {Array<string>} The list of colors.
907 Dygraph
.prototype.getColors
= function() {
911 // The following functions are from quirksmode.org with a modification for Safari from
912 // http://blog.firetree.net/2005/07/04/javascript-find-position/
913 // http://www.quirksmode.org/js
/findpos
.html
916 Dygraph
.findPosX
= function(obj
) {
921 curleft
+= obj
.offsetLeft
;
922 if(!obj
.offsetParent
)
924 obj
= obj
.offsetParent
;
933 Dygraph
.findPosY
= function(obj
) {
938 curtop
+= obj
.offsetTop
;
939 if(!obj
.offsetParent
)
941 obj
= obj
.offsetParent
;
950 * Create the div that contains information on the selected point(s)
951 * This goes in the top right of the canvas, unless an external div has already
955 Dygraph
.prototype.createStatusMessage_
= function() {
956 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
957 if (userLabelsDiv
&& null != userLabelsDiv
958 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
959 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
961 if (!this.attr_("labelsDiv")) {
962 var divWidth
= this.attr_('labelsDivWidth');
964 "position": "absolute",
967 "width": divWidth
+ "px",
969 "left": (this.width_
- divWidth
- 2) + "px",
970 "background": "white",
972 "overflow": "hidden"};
973 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
974 var div
= document
.createElement("div");
975 for (var name
in messagestyle
) {
976 if (messagestyle
.hasOwnProperty(name
)) {
977 div
.style
[name
] = messagestyle
[name
];
980 this.graphDiv
.appendChild(div
);
981 this.attrs_
.labelsDiv
= div
;
986 * Position the labels div so that:
987 * - its right edge is flush with the right edge of the charting area
988 * - its top edge is flush with the top edge of the charting area
991 Dygraph
.prototype.positionLabelsDiv_
= function() {
992 // Don't touch a user-specified labelsDiv.
993 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
995 var area
= this.plotter_
.area
;
996 var div
= this.attr_("labelsDiv");
997 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
998 div
.style
.top
= area
.y
+ "px";
1002 * Create the text box to adjust the averaging period
1005 Dygraph
.prototype.createRollInterface_
= function() {
1006 // Create a roller if one doesn't exist already.
1007 if (!this.roller_
) {
1008 this.roller_
= document
.createElement("input");
1009 this.roller_
.type
= "text";
1010 this.roller_
.style
.display
= "none";
1011 this.graphDiv
.appendChild(this.roller_
);
1014 var display
= this.attr_('showRoller') ? 'block' : 'none';
1016 var area
= this.plotter_
.area
;
1017 var textAttr
= { "position": "absolute",
1019 "top": (area
.y
+ area
.h
- 25) + "px",
1020 "left": (area
.x
+ 1) + "px",
1023 this.roller_
.size
= "2";
1024 this.roller_
.value
= this.rollPeriod_
;
1025 for (var name
in textAttr
) {
1026 if (textAttr
.hasOwnProperty(name
)) {
1027 this.roller_
.style
[name
] = textAttr
[name
];
1032 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1037 * Returns the x-coordinate of the event in a coordinate system where the
1038 * top-left corner of the page (not the window) is (0,0).
1039 * Taken from MochiKit.Signal
1041 Dygraph
.pageX
= function(e
) {
1043 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1046 var b
= document
.body
;
1048 (de
.scrollLeft
|| b
.scrollLeft
) -
1049 (de
.clientLeft
|| 0);
1055 * Returns the y-coordinate of the event in a coordinate system where the
1056 * top-left corner of the page (not the window) is (0,0).
1057 * Taken from MochiKit.Signal
1059 Dygraph
.pageY
= function(e
) {
1061 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1064 var b
= document
.body
;
1066 (de
.scrollTop
|| b
.scrollTop
) -
1067 (de
.clientTop
|| 0);
1073 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1074 * canvas (i.e. DOM Coords).
1076 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1077 return Dygraph
.pageX(e
) - context
.px
1082 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1083 * canvas (i.e. DOM Coords).
1085 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1086 return Dygraph
.pageY(e
) - context
.py
1090 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1094 Dygraph
.prototype.createDragInterface_
= function() {
1096 // Tracks whether the mouse is down right now
1098 isPanning
: false, // is this drag part of a pan?
1099 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1104 dragDirection
: null,
1107 prevDragDirection
: null,
1109 // The value on the left side of the graph when a pan operation starts.
1110 initialLeftmostDate
: null,
1112 // The number of units each pixel spans. (This won't be valid for log
1114 xUnitsPerPixel
: null,
1116 // TODO(danvk): update this comment
1117 // The range in second/value units that the viewport encompasses during a
1118 // panning operation.
1121 // Utility function to convert page-wide coordinates to canvas coords
1125 // Values for use with panEdgeFraction, which limit how far outside the
1126 // graph's data boundaries it can be panned.
1127 boundedDates
: null, // [minDate, maxDate]
1128 boundedValues
: null, // [[minValue, maxValue] ...]
1130 initializeMouseDown
: function(event
, g
, context
) {
1131 // prevents mouse drags from selecting page text.
1132 if (event
.preventDefault
) {
1133 event
.preventDefault(); // Firefox, Chrome, etc.
1135 event
.returnValue
= false; // IE
1136 event
.cancelBubble
= true;
1139 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1140 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1141 context
.dragStartX
= g
.dragGetX_(event
, context
);
1142 context
.dragStartY
= g
.dragGetY_(event
, context
);
1146 var interactionModel
= this.attr_("interactionModel");
1148 // Self is the graph.
1151 // Function that binds the graph and context to the handler.
1152 var bindHandler
= function(handler
) {
1153 return function(event
) {
1154 handler(event
, self
, context
);
1158 for (var eventName
in interactionModel
) {
1159 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1160 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1161 bindHandler(interactionModel
[eventName
]));
1164 // If the user releases the mouse button during a drag, but not over the
1165 // canvas, then it doesn't count as a zooming action.
1166 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1167 if (context
.isZooming
|| context
.isPanning
) {
1168 context
.isZooming
= false;
1169 context
.dragStartX
= null;
1170 context
.dragStartY
= null;
1173 if (context
.isPanning
) {
1174 context
.isPanning
= false;
1175 context
.draggingDate
= null;
1176 context
.dateRange
= null;
1177 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1178 delete self
.axes_
[i
].draggingValue
;
1179 delete self
.axes_
[i
].dragValueRange
;
1187 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1188 * up any previous zoom rectangles that were drawn. This could be optimized to
1189 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1192 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1193 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1194 * @param {Number} startX The X position where the drag started, in canvas
1196 * @param {Number} endX The current X position of the drag, in canvas coords.
1197 * @param {Number} startY The Y position where the drag started, in canvas
1199 * @param {Number} endY The current Y position of the drag, in canvas coords.
1200 * @param {Number} prevDirection the value of direction on the previous call to
1201 * this function. Used to avoid excess redrawing
1202 * @param {Number} prevEndX The value of endX on the previous call to this
1203 * function. Used to avoid excess redrawing
1204 * @param {Number} prevEndY The value of endY on the previous call to this
1205 * function. Used to avoid excess redrawing
1208 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1209 endY
, prevDirection
, prevEndX
,
1211 var ctx
= this.canvas_ctx_
;
1213 // Clean up from the previous rect if necessary
1214 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1215 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1216 Math
.abs(startX
- prevEndX
), this.height_
);
1217 } else if (prevDirection
== Dygraph
.VERTICAL
){
1218 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1219 this.width_
, Math
.abs(startY
- prevEndY
));
1222 // Draw a light-grey rectangle to show the new viewing area
1223 if (direction
== Dygraph
.HORIZONTAL
) {
1224 if (endX
&& startX
) {
1225 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1226 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1227 Math
.abs(endX
- startX
), this.height_
);
1230 if (direction
== Dygraph
.VERTICAL
) {
1231 if (endY
&& startY
) {
1232 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1233 ctx
.fillRect(0, Math
.min(startY
, endY
),
1234 this.width_
, Math
.abs(endY
- startY
));
1240 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1241 * the canvas. The exact zoom window may be slightly larger if there are no data
1242 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1243 * which accepts dates that match the raw data. This function redraws the graph.
1245 * @param {Number} lowX The leftmost pixel value that should be visible.
1246 * @param {Number} highX The rightmost pixel value that should be visible.
1249 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1250 // Find the earliest and latest dates contained in this canvasx range.
1251 // Convert the call to date ranges of the raw data.
1252 var minDate
= this.toDataXCoord(lowX
);
1253 var maxDate
= this.toDataXCoord(highX
);
1254 this.doZoomXDates_(minDate
, maxDate
);
1258 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1259 * method with doZoomX which accepts pixel coordinates. This function redraws
1262 * @param {Number} minDate The minimum date that should be visible.
1263 * @param {Number} maxDate The maximum date that should be visible.
1266 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1267 this.dateWindow_
= [minDate
, maxDate
];
1268 this.zoomed_x_
= true;
1270 if (this.attr_("zoomCallback")) {
1271 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1276 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1277 * the canvas. This function redraws the graph.
1279 * @param {Number} lowY The topmost pixel value that should be visible.
1280 * @param {Number} highY The lowest pixel value that should be visible.
1283 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1284 // Find the highest and lowest values in pixel range for each axis.
1285 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1286 // This is because pixels increase as you go down on the screen, whereas data
1287 // coordinates increase as you go up the screen.
1288 var valueRanges
= [];
1289 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1290 var hi
= this.toDataYCoord(lowY
, i
);
1291 var low
= this.toDataYCoord(highY
, i
);
1292 this.axes_
[i
].valueWindow
= [low
, hi
];
1293 valueRanges
.push([low
, hi
]);
1296 this.zoomed_y_
= true;
1298 if (this.attr_("zoomCallback")) {
1299 var xRange
= this.xAxisRange();
1300 var yRange
= this.yAxisRange();
1301 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1306 * Reset the zoom to the original view coordinates. This is the same as
1307 * double-clicking on the graph.
1311 Dygraph
.prototype.doUnzoom_
= function() {
1313 if (this.dateWindow_
!= null) {
1315 this.dateWindow_
= null;
1318 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1319 if (this.axes_
[i
].valueWindow
!= null) {
1321 delete this.axes_
[i
].valueWindow
;
1325 // Clear any selection, since it's likely to be drawn in the wrong place.
1326 this.clearSelection();
1329 // Putting the drawing operation before the callback because it resets
1331 this.zoomed_x_
= false;
1332 this.zoomed_y_
= false;
1334 if (this.attr_("zoomCallback")) {
1335 var minDate
= this.rawData_
[0][0];
1336 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1337 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1343 * When the mouse moves in the canvas, display information about a nearby data
1344 * point and draw dots over those points in the data series. This function
1345 * takes care of cleanup of previously-drawn dots.
1346 * @param {Object} event The mousemove event from the browser.
1349 Dygraph
.prototype.mouseMove_
= function(event
) {
1350 // This prevents JS errors when mousing over the canvas before data loads.
1351 var points
= this.layout_
.points
;
1352 if (points
=== undefined
) return;
1354 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1359 // Loop through all the points and find the date nearest to our current
1361 var minDist
= 1e+100;
1363 for (var i
= 0; i
< points
.length
; i
++) {
1364 var point
= points
[i
];
1365 if (point
== null) continue;
1366 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1367 if (dist
> minDist
) continue;
1371 if (idx
>= 0) lastx
= points
[idx
].xval
;
1373 // Extract the points we've selected
1374 this.selPoints_
= [];
1375 var l
= points
.length
;
1376 if (!this.attr_("stackedGraph")) {
1377 for (var i
= 0; i
< l
; i
++) {
1378 if (points
[i
].xval
== lastx
) {
1379 this.selPoints_
.push(points
[i
]);
1383 // Need to 'unstack' points starting from the bottom
1384 var cumulative_sum
= 0;
1385 for (var i
= l
- 1; i
>= 0; i
--) {
1386 if (points
[i
].xval
== lastx
) {
1387 var p
= {}; // Clone the point since we modify it
1388 for (var k
in points
[i
]) {
1389 p
[k
] = points
[i
][k
];
1391 p
.yval
-= cumulative_sum
;
1392 cumulative_sum
+= p
.yval
;
1393 this.selPoints_
.push(p
);
1396 this.selPoints_
.reverse();
1399 if (this.attr_("highlightCallback")) {
1400 var px
= this.lastx_
;
1401 if (px
!== null && lastx
!= px
) {
1402 // only fire if the selected point has changed.
1403 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1407 // Save last x position for callbacks.
1408 this.lastx_
= lastx
;
1410 this.updateSelection_();
1414 * Transforms layout_.points index into data row number.
1415 * @param int layout_.points index
1416 * @return int row number, or -1 if none could be found.
1419 Dygraph
.prototype.idxToRow_
= function(idx
) {
1420 if (idx
< 0) return -1;
1422 for (var i
in this.layout_
.datasets
) {
1423 if (idx
< this.layout_
.datasets
[i
].length
) {
1424 return this.boundaryIds_
[0][0]+idx
;
1426 idx
-= this.layout_
.datasets
[i
].length
;
1433 * @param { Number } x The number to consider.
1434 * @return { Boolean } Whether the number is zero or NaN.
1436 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1437 Dygraph
.isOK
= function(x
) {
1438 return x
&& !isNaN(x
);
1443 * Generates HTML for the legend which is displayed when hovering over the
1444 * chart. If no selected points are specified, a default legend is returned
1445 * (this may just be the empty string).
1446 * @param { Number } [x] The x-value of the selected points.
1447 * @param { [Object] } [sel_points] List of selected points for the given
1448 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1450 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1451 // If no points are selected, we display a default legend. Traditionally,
1452 // this has been blank. But a better default would be a conventional legend,
1453 // which provides essential information for a non-interactive chart.
1454 if (typeof(x
) === 'undefined') {
1455 if (this.attr_('legend') != 'always') return '';
1457 var sepLines
= this.attr_('labelsSeparateLines');
1458 var labels
= this.attr_('labels');
1460 for (var i
= 1; i
< labels
.length
; i
++) {
1461 if (!this.visibility()[i
- 1]) continue;
1462 var c
= this.plotter_
.colors
[labels
[i
]];
1463 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1464 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1470 var html
= this.attr_('xValueFormatter')(x
) + ":";
1472 var fmtFunc
= this.attr_('yValueFormatter');
1473 var showZeros
= this.attr_("labelsShowZeroValues");
1474 var sepLines
= this.attr_("labelsSeparateLines");
1475 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1476 var pt
= this.selPoints_
[i
];
1477 if (pt
.yval
== 0 && !showZeros
) continue;
1478 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1479 if (sepLines
) html
+= "<br/>";
1481 var c
= this.plotter_
.colors
[pt
.name
];
1482 var yval
= fmtFunc(pt
.yval
, this);
1483 // TODO(danvk): use a template string here and make it an attribute.
1484 html
+= " <b><span style='color: " + c
+ ";'>"
1485 + pt
.name
+ "</span></b>:"
1493 * Displays information about the selected points in the legend. If there is no
1494 * selection, the legend will be cleared.
1495 * @param { Number } [x] The x-value of the selected points.
1496 * @param { [Object] } [sel_points] List of selected points for the given
1497 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1499 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1500 var html
= this.generateLegendHTML_(x
, sel_points
);
1501 var labelsDiv
= this.attr_("labelsDiv");
1502 if (labelsDiv
!== null) {
1503 labelsDiv
.innerHTML
= html
;
1505 if (typeof(this.shown_legend_error_
) == 'undefined') {
1506 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1507 this.shown_legend_error_
= true;
1513 * Draw dots over the selectied points in the data series. This function
1514 * takes care of cleanup of previously-drawn dots.
1517 Dygraph
.prototype.updateSelection_
= function() {
1518 // Clear the previously drawn vertical, if there is one
1519 var ctx
= this.canvas_ctx_
;
1520 if (this.previousVerticalX_
>= 0) {
1521 // Determine the maximum highlight circle size.
1522 var maxCircleSize
= 0;
1523 var labels
= this.attr_('labels');
1524 for (var i
= 1; i
< labels
.length
; i
++) {
1525 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1526 if (r
> maxCircleSize
) maxCircleSize
= r
;
1528 var px
= this.previousVerticalX_
;
1529 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1530 2 * maxCircleSize
+ 2, this.height_
);
1533 if (this.selPoints_
.length
> 0) {
1534 // Set the status message to indicate the selected point(s)
1535 if (this.attr_('showLabelsOnHighlight')) {
1536 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1539 // Draw colored circles over the center of each selected point
1540 var canvasx
= this.selPoints_
[0].canvasx
;
1542 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1543 var pt
= this.selPoints_
[i
];
1544 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1546 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1548 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1549 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1554 this.previousVerticalX_
= canvasx
;
1559 * Manually set the selected points and display information about them in the
1560 * legend. The selection can be cleared using clearSelection() and queried
1561 * using getSelection().
1562 * @param { Integer } row number that should be highlighted (i.e. appear with
1563 * hover dots on the chart). Set to false to clear any selection.
1565 Dygraph
.prototype.setSelection
= function(row
) {
1566 // Extract the points we've selected
1567 this.selPoints_
= [];
1570 if (row
!== false) {
1571 row
= row
-this.boundaryIds_
[0][0];
1574 if (row
!== false && row
>= 0) {
1575 for (var i
in this.layout_
.datasets
) {
1576 if (row
< this.layout_
.datasets
[i
].length
) {
1577 var point
= this.layout_
.points
[pos
+row
];
1579 if (this.attr_("stackedGraph")) {
1580 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1583 this.selPoints_
.push(point
);
1585 pos
+= this.layout_
.datasets
[i
].length
;
1589 if (this.selPoints_
.length
) {
1590 this.lastx_
= this.selPoints_
[0].xval
;
1591 this.updateSelection_();
1593 this.clearSelection();
1599 * The mouse has left the canvas. Clear out whatever artifacts remain
1600 * @param {Object} event the mouseout event from the browser.
1603 Dygraph
.prototype.mouseOut_
= function(event
) {
1604 if (this.attr_("unhighlightCallback")) {
1605 this.attr_("unhighlightCallback")(event
);
1608 if (this.attr_("hideOverlayOnMouseOut")) {
1609 this.clearSelection();
1614 * Clears the current selection (i.e. points that were highlighted by moving
1615 * the mouse over the chart).
1617 Dygraph
.prototype.clearSelection
= function() {
1618 // Get rid of the overlay data
1619 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1620 this.setLegendHTML_();
1621 this.selPoints_
= [];
1626 * Returns the number of the currently selected row. To get data for this row,
1627 * you can use the getValue method.
1628 * @return { Integer } row number, or -1 if nothing is selected
1630 Dygraph
.prototype.getSelection
= function() {
1631 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1635 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1636 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1637 return row
+ this.boundaryIds_
[0][0];
1644 * Number formatting function which mimicks the behavior of %g in printf, i.e.
1645 * either exponential or fixed format (without trailing 0s) is used depending on
1646 * the length of the generated string. The advantage of this format is that
1647 * there is a predictable upper bound on the resulting string length,
1648 * significant figures are not dropped, and normal numbers are not displayed in
1649 * exponential notation.
1651 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
1652 * It creates strings which are too long for absolute values between 10^-4 and
1653 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
1656 * @param {Number} x The number to format
1657 * @param {Number} opt_precision The precision to use, default 2.
1658 * @return {String} A string formatted like %g in printf. The max generated
1659 * string length should be precision + 6 (e.g 1.123e+300).
1661 Dygraph
.floatFormat
= function(x
, opt_precision
) {
1662 // Avoid invalid precision values; [1, 21] is the valid range.
1663 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
1665 // This is deceptively simple. The actual algorithm comes from:
1667 // Max allowed length = p + 4
1668 // where 4 comes from 'e+n' and '.'.
1670 // Length of fixed format = 2 + y + p
1671 // where 2 comes from '0.' and y = # of leading zeroes.
1673 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
1676 // Since the behavior of toPrecision() is identical for larger numbers, we
1677 // don't have to worry about the other bound.
1679 // Finally, the argument for toExponential() is the number of trailing digits,
1680 // so we take off 1 for the value before the '.'.
1681 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
1682 x
.toExponential(p
- 1) : x
.toPrecision(p
);
1687 * Return a string version of a number. This respects the digitsAfterDecimal
1688 * and maxNumberWidth options.
1689 * @param {Number} x The number to be formatted
1690 * @param {Dygraph} g The dygraph object
1692 Dygraph
.numberFormatter
= function(x
, g
) {
1693 var sigFigs
= g
.attr_('sigFigs');
1695 if (sigFigs
!== null) {
1696 // User has opted for a fixed number of significant figures.
1697 return Dygraph
.floatFormat(x
, sigFigs
);
1700 var digits
= g
.attr_('digitsAfterDecimal');
1701 var maxNumberWidth
= g
.attr_('maxNumberWidth');
1703 // switch to scientific notation if we underflow or overflow fixed display.
1705 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
1706 Math
.abs(x
) < Math
.pow(10, -digits
))) {
1707 return x
.toExponential(digits
);
1709 return '' + Dygraph
.round_(x
, digits
);
1715 * Converts '9' to '09' (useful for dates)
1717 Dygraph
.zeropad
= function(x
) {
1718 if (x
< 10) return "0" + x
; else return "" + x
;
1722 * Return a string version of the hours, minutes and seconds portion of a date.
1723 * @param {Number} date The JavaScript date (ms since epoch)
1724 * @return {String} A time of the form "HH:MM:SS"
1727 Dygraph
.hmsString_
= function(date
) {
1728 var zeropad
= Dygraph
.zeropad
;
1729 var d
= new Date(date
);
1730 if (d
.getSeconds()) {
1731 return zeropad(d
.getHours()) + ":" +
1732 zeropad(d
.getMinutes()) + ":" +
1733 zeropad(d
.getSeconds());
1735 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1740 * Convert a JS date to a string appropriate to display on an axis that
1741 * is displaying values at the stated granularity.
1742 * @param {Date} date The date to format
1743 * @param {Number} granularity One of the Dygraph granularity constants
1744 * @return {String} The formatted date
1747 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1748 if (granularity
>= Dygraph
.DECADAL
) {
1749 return date
.strftime('%Y');
1750 } else if (granularity
>= Dygraph
.MONTHLY
) {
1751 return date
.strftime('%b %y');
1753 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1754 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1755 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1757 return Dygraph
.hmsString_(date
.getTime());
1763 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1764 * @param {Number} date The JavaScript date (ms since epoch)
1765 * @return {String} A date of the form "YYYY/MM/DD"
1768 Dygraph
.dateString_
= function(date
) {
1769 var zeropad
= Dygraph
.zeropad
;
1770 var d
= new Date(date
);
1773 var year
= "" + d
.getFullYear();
1774 // Get a 0 padded month string
1775 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1776 // Get a 0 padded day string
1777 var day
= zeropad(d
.getDate());
1780 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1781 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1783 return year
+ "/" + month + "/" + day
+ ret
;
1787 * Round a number to the specified number of digits past the decimal point.
1788 * @param {Number} num The number to round
1789 * @param {Number} places The number of decimals to which to round
1790 * @return {Number} The rounded number
1793 Dygraph
.round_
= function(num
, places
) {
1794 var shift
= Math
.pow(10, places
);
1795 return Math
.round(num
* shift
)/shift
;
1799 * Fires when there's data available to be graphed.
1800 * @param {String} data Raw CSV data to be plotted
1803 Dygraph
.prototype.loadedEvent_
= function(data
) {
1804 this.rawData_
= this.parseCSV_(data
);
1808 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1809 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1810 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1813 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1816 Dygraph
.prototype.addXTicks_
= function() {
1817 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1819 if (this.dateWindow_
) {
1820 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1822 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1825 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
1826 this.layout_
.setXTicks(xTicks
);
1829 // Time granularity enumeration
1830 Dygraph
.SECONDLY
= 0;
1831 Dygraph
.TWO_SECONDLY
= 1;
1832 Dygraph
.FIVE_SECONDLY
= 2;
1833 Dygraph
.TEN_SECONDLY
= 3;
1834 Dygraph
.THIRTY_SECONDLY
= 4;
1835 Dygraph
.MINUTELY
= 5;
1836 Dygraph
.TWO_MINUTELY
= 6;
1837 Dygraph
.FIVE_MINUTELY
= 7;
1838 Dygraph
.TEN_MINUTELY
= 8;
1839 Dygraph
.THIRTY_MINUTELY
= 9;
1840 Dygraph
.HOURLY
= 10;
1841 Dygraph
.TWO_HOURLY
= 11;
1842 Dygraph
.SIX_HOURLY
= 12;
1844 Dygraph
.WEEKLY
= 14;
1845 Dygraph
.MONTHLY
= 15;
1846 Dygraph
.QUARTERLY
= 16;
1847 Dygraph
.BIANNUAL
= 17;
1848 Dygraph
.ANNUAL
= 18;
1849 Dygraph
.DECADAL
= 19;
1850 Dygraph
.CENTENNIAL
= 20;
1851 Dygraph
.NUM_GRANULARITIES
= 21;
1853 Dygraph
.SHORT_SPACINGS
= [];
1854 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1855 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1856 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1857 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1858 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1859 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1860 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1861 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1862 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1863 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1864 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1865 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1866 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1867 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1868 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1872 * If we used this time granularity, how many ticks would there be?
1873 * This is only an approximation, but it's generally good enough.
1875 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1876 if (granularity
< Dygraph
.MONTHLY
) {
1877 // Generate one tick mark for every fixed interval of time.
1878 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1879 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1881 var year_mod
= 1; // e.g. to only print one point every 10 years.
1882 var num_months
= 12;
1883 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1884 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1885 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1886 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1887 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1889 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1890 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1891 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1898 * Construct an x-axis of nicely-formatted times on meaningful boundaries
1899 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1901 * Returns an array containing {v: millis, label: label} dictionaries.
1903 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1904 var formatter
= this.attr_("xAxisLabelFormatter");
1906 if (granularity
< Dygraph
.MONTHLY
) {
1907 // Generate one tick mark for every fixed interval of time.
1908 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1909 var format
= '%d%b'; // e.g. "1Jan"
1911 // Find a time less than start_time which occurs on a "nice" time boundary
1912 // for this granularity.
1913 var g
= spacing
/ 1000;
1914 var d
= new Date(start_time
);
1915 if (g
<= 60) { // seconds
1916 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1920 if (g
<= 60) { // minutes
1921 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1926 if (g
<= 24) { // days
1927 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1932 if (g
== 7) { // one week
1933 d
.setDate(d
.getDate() - d
.getDay());
1938 start_time
= d
.getTime();
1940 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1941 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1944 // Display a tick mark on the first of a set of months of each year.
1945 // Years get a tick mark iff y % year_mod == 0. This is useful for
1946 // displaying a tick mark once every 10 years, say, on long time scales.
1948 var year_mod
= 1; // e.g. to only print one point every 10 years.
1950 if (granularity
== Dygraph
.MONTHLY
) {
1951 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1952 } else if (granularity
== Dygraph
.QUARTERLY
) {
1953 months
= [ 0, 3, 6, 9 ];
1954 } else if (granularity
== Dygraph
.BIANNUAL
) {
1956 } else if (granularity
== Dygraph
.ANNUAL
) {
1958 } else if (granularity
== Dygraph
.DECADAL
) {
1961 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1965 this.warn("Span of dates is too long");
1968 var start_year
= new Date(start_time
).getFullYear();
1969 var end_year
= new Date(end_time
).getFullYear();
1970 var zeropad
= Dygraph
.zeropad
;
1971 for (var i
= start_year
; i
<= end_year
; i
++) {
1972 if (i
% year_mod
!= 0) continue;
1973 for (var j
= 0; j
< months
.length
; j
++) {
1974 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1975 var t
= Dygraph
.dateStrToMillis(date_str
);
1976 if (t
< start_time
|| t
> end_time
) continue;
1977 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1987 * Add ticks to the x-axis based on a date range.
1988 * @param {Number} startDate Start of the date window (millis since epoch)
1989 * @param {Number} endDate End of the date window (millis since epoch)
1990 * @param {Dygraph} self The dygraph object
1991 * @return { [Object] } Array of {label, value} tuples.
1994 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1995 // TODO(danvk): why does this take 'self' as a param?
1997 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1998 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1999 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2006 return self
.GetXAxis(startDate
, endDate
, chosen
);
2008 // TODO(danvk): signal error.
2014 * This is a list of human-friendly values at which to show tick marks on a log
2015 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2016 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2017 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2019 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2021 for (var power
= -39; power
<= 39; power
++) {
2022 var range
= Math
.pow(10, power
);
2023 for (var mult
= 1; mult
<= 9; mult
++) {
2024 var val
= range
* mult
;
2033 * Implementation of binary search over an array.
2034 * Currently does not work when val is outside the range of arry's values.
2035 * @param { Integer } val the value to search for
2036 * @param { Integer[] } arry is the value over which to search
2037 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2038 * If abs < 0, find the highest entry less than val.
2039 * if abs == 0, find the entry that equals val.
2040 * @param { Integer } [low] The first index in arry to consider (optional)
2041 * @param { Integer } [high] The last index in arry to consider (optional)
2043 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2044 if (low
== null || high
== null) {
2046 high
= arry
.length
- 1;
2054 var validIndex
= function(idx
) {
2055 return idx
>= 0 && idx
< arry
.length
;
2057 var mid
= parseInt((low
+ high
) / 2);
2058 var element
= arry
[mid
];
2059 if (element
== val
) {
2062 if (element
> val
) {
2064 // Accept if element > val, but also if prior element < val.
2066 if (validIndex(idx
) && arry
[idx
] < val
) {
2070 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2072 if (element
< val
) {
2074 // Accept if element < val, but also if prior element > val.
2076 if (validIndex(idx
) && arry
[idx
] > val
) {
2080 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2084 // TODO(konigsberg): Update comment.
2086 * Add ticks when the x axis has numbers on it (instead of dates)
2088 * @param {Number} minV minimum value
2089 * @param {Number} maxV maximum value
2091 * @param {function} attribute accessor function.
2092 * @return {[Object]} Array of {label, value} tuples.
2094 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2095 var attr
= function(k
) {
2096 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2097 return self
.attr_(k
);
2102 for (var i
= 0; i
< vals
.length
; i
++) {
2103 ticks
.push({v
: vals
[i
]});
2106 if (axis_props
&& attr("logscale")) {
2107 var pixelsPerTick
= attr('pixelsPerYLabel');
2108 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2109 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2110 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2111 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2116 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2118 // Count the number of tick values would appear, if we can get at least
2119 // nTicks / 4 accept them
.
2120 var lastDisplayed
= null;
2121 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2122 var axisId
= axis_props
.yAxisId
;
2123 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2124 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2125 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2126 var tick
= { v
: tickValue
};
2127 if (lastDisplayed
== null) {
2129 tickValue
: tickValue
,
2133 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2135 tickValue
: tickValue
,
2144 // Since we went in backwards order.
2149 // ticks.length won't be 0 if the log scale function finds values to insert.
2150 if (ticks
.length
== 0) {
2152 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2153 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2154 // The first spacing greater than pixelsPerYLabel is what we use.
2155 // TODO(danvk): version that works on a log scale.
2156 if (attr("labelsKMG2")) {
2157 var mults
= [1, 2, 4, 8];
2159 var mults
= [1, 2, 5];
2161 var scale
, low_val
, high_val
, nTicks
;
2162 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2163 var pixelsPerTick
= attr('pixelsPerYLabel');
2164 for (var i
= -10; i
< 50; i
++) {
2165 if (attr("labelsKMG2")) {
2166 var base_scale
= Math
.pow(16, i
);
2168 var base_scale
= Math
.pow(10, i
);
2170 for (var j
= 0; j
< mults
.length
; j
++) {
2171 scale
= base_scale
* mults
[j
];
2172 low_val
= Math
.floor(minV
/ scale
) * scale
;
2173 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2174 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2175 var spacing
= self
.height_
/ nTicks
;
2176 // wish I could break out of both loops at once...
2177 if (spacing
> pixelsPerTick
) break;
2179 if (spacing
> pixelsPerTick
) break;
2182 // Construct the set of ticks.
2183 // Allow reverse y-axis if it's explicitly requested.
2184 if (low_val
> high_val
) scale
*= -1;
2185 for (var i
= 0; i
< nTicks
; i
++) {
2186 var tickV
= low_val
+ i
* scale
;
2187 ticks
.push( {v
: tickV
} );
2192 // Add formatted labels to the ticks.
2195 if (attr("labelsKMB")) {
2197 k_labels
= [ "K", "M", "B", "T" ];
2199 if (attr("labelsKMG2")) {
2200 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2202 k_labels
= [ "k", "M", "G", "T" ];
2204 var formatter
= attr('yAxisLabelFormatter') ?
2205 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2207 // Add labels to the ticks.
2208 for (var i
= 0; i
< ticks
.length
; i
++) {
2209 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2210 var tickV
= ticks
[i
].v
;
2211 var absTickV
= Math
.abs(tickV
);
2212 var label
= formatter(tickV
, self
);
2213 if (k_labels
.length
> 0) {
2214 // Round up to an appropriate unit.
2216 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2217 if (absTickV
>= n
) {
2218 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
2223 ticks
[i
].label
= label
;
2231 * Computes the range of the data series (including confidence intervals).
2232 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2233 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2234 * @return [low, high]
2236 Dygraph
.prototype.extremeValues_
= function(series
) {
2237 var minY
= null, maxY
= null;
2239 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2241 // With custom bars, maxY is the max of the high values.
2242 for (var j
= 0; j
< series
.length
; j
++) {
2243 var y
= series
[j
][1][0];
2245 var low
= y
- series
[j
][1][1];
2246 var high
= y
+ series
[j
][1][2];
2247 if (low
> y
) low
= y
; // this can happen with custom bars,
2248 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2249 if (maxY
== null || high
> maxY
) {
2252 if (minY
== null || low
< minY
) {
2257 for (var j
= 0; j
< series
.length
; j
++) {
2258 var y
= series
[j
][1];
2259 if (y
=== null || isNaN(y
)) continue;
2260 if (maxY
== null || y
> maxY
) {
2263 if (minY
== null || y
< minY
) {
2269 return [minY
, maxY
];
2274 * This function is called once when the chart's data is changed or the options
2275 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2276 * idea is that values derived from the chart's data can be computed here,
2277 * rather than every time the chart is drawn. This includes things like the
2278 * number of axes, rolling averages, etc.
2280 Dygraph
.prototype.predraw_
= function() {
2281 // TODO(danvk): move more computations out of drawGraph_ and into here.
2282 this.computeYAxes_();
2284 // Create a new plotter.
2285 if (this.plotter_
) this.plotter_
.clear();
2286 this.plotter_
= new DygraphCanvasRenderer(this,
2291 // The roller sits in the bottom left corner of the chart. We don't know where
2292 // this will be until the options are available, so it's positioned here.
2293 this.createRollInterface_();
2295 // Same thing applies for the labelsDiv. It's right edge should be flush with
2296 // the right edge of the charting area (which may not be the same as the right
2297 // edge of the div, if we have two y-axes.
2298 this.positionLabelsDiv_();
2300 // If the data or options have changed, then we'd better redraw.
2305 * Update the graph with new data. This method is called when the viewing area
2306 * has changed. If the underlying data or options have changed, predraw_ will
2307 * be called before drawGraph_ is called.
2309 * clearSelection, when undefined or true, causes this.clearSelection to be
2310 * called at the end of the draw operation. This should rarely be defined,
2311 * and never true (that is it should be undefined most of the time, and
2316 Dygraph
.prototype.drawGraph_
= function(clearSelection
) {
2317 if (typeof(clearSelection
) === 'undefined') {
2318 clearSelection
= true;
2321 var data
= this.rawData_
;
2323 // This is used to set the second parameter to drawCallback, below.
2324 var is_initial_draw
= this.is_initial_draw_
;
2325 this.is_initial_draw_
= false;
2327 var minY
= null, maxY
= null;
2328 this.layout_
.removeAllDatasets();
2330 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2332 // Loop over the fields (series). Go from the last to the first,
2333 // because if they're stacked that's how we accumulate the values.
2335 var cumulative_y
= []; // For stacked series.
2338 var extremes
= {}; // series name -> [low, high]
2340 // Loop over all fields and create datasets
2341 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2342 if (!this.visibility()[i
- 1]) continue;
2344 var seriesName
= this.attr_("labels")[i
];
2345 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2346 var logScale
= this.attr_('logscale', i
);
2349 for (var j
= 0; j
< data
.length
; j
++) {
2350 var date
= data
[j
][0];
2351 var point
= data
[j
][i
];
2353 // On the log scale, points less than zero do not exist.
2354 // This will create a gap in the chart. Note that this ignores
2355 // connectSeparatedPoints.
2359 series
.push([date
, point
]);
2361 if (point
!= null || !connectSeparatedPoints
) {
2362 series
.push([date
, point
]);
2367 // TODO(danvk): move this into predraw_. It's insane to do it here.
2368 series
= this.rollingAverage(series
, this.rollPeriod_
);
2370 // Prune down to the desired range, if necessary (for zooming)
2371 // Because there can be lines going to points outside of the visible area,
2372 // we actually prune to visible points, plus one on either side.
2373 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2374 if (this.dateWindow_
) {
2375 var low
= this.dateWindow_
[0];
2376 var high
= this.dateWindow_
[1];
2378 // TODO(danvk): do binary search instead of linear search.
2379 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2380 var firstIdx
= null, lastIdx
= null;
2381 for (var k
= 0; k
< series
.length
; k
++) {
2382 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2385 if (series
[k
][0] <= high
) {
2389 if (firstIdx
=== null) firstIdx
= 0;
2390 if (firstIdx
> 0) firstIdx
--;
2391 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2392 if (lastIdx
< series
.length
- 1) lastIdx
++;
2393 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2394 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2395 pruned
.push(series
[k
]);
2399 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2402 var seriesExtremes
= this.extremeValues_(series
);
2405 for (var j
=0; j
<series
.length
; j
++) {
2406 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2409 } else if (this.attr_("stackedGraph")) {
2410 var l
= series
.length
;
2412 for (var j
= 0; j
< l
; j
++) {
2413 // If one data set has a NaN, let all subsequent stacked
2414 // sets inherit the NaN -- only start at 0 for the first set.
2415 var x
= series
[j
][0];
2416 if (cumulative_y
[x
] === undefined
) {
2417 cumulative_y
[x
] = 0;
2420 actual_y
= series
[j
][1];
2421 cumulative_y
[x
] += actual_y
;
2423 series
[j
] = [x
, cumulative_y
[x
]]
2425 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2426 seriesExtremes
[1] = cumulative_y
[x
];
2428 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2429 seriesExtremes
[0] = cumulative_y
[x
];
2433 extremes
[seriesName
] = seriesExtremes
;
2435 datasets
[i
] = series
;
2438 for (var i
= 1; i
< datasets
.length
; i
++) {
2439 if (!this.visibility()[i
- 1]) continue;
2440 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2443 this.computeYAxisRanges_(extremes
);
2444 this.layout_
.setYAxes(this.axes_
);
2448 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2449 var tmp_zoomed_x
= this.zoomed_x_
;
2450 // Tell PlotKit to use this new data and render itself
2451 this.layout_
.setDateWindow(this.dateWindow_
);
2452 this.zoomed_x_
= tmp_zoomed_x
;
2453 this.layout_
.evaluateWithError();
2454 this.plotter_
.clear();
2455 this.plotter_
.render();
2456 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2457 this.canvas_
.height
);
2459 if (is_initial_draw
) {
2460 // Generate a static legend before any particular point is selected.
2461 this.setLegendHTML_();
2463 if (clearSelection
) {
2464 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2465 // We should select the point nearest the page x/y here
, but it
's easier
2466 // to just clear the selection. This prevents erroneous hover dots from
2468 this.clearSelection();
2470 this.clearSelection();
2475 if (this.attr_("drawCallback") !== null) {
2476 this.attr_("drawCallback")(this, is_initial_draw);
2482 * Determine properties of the y-axes which are independent of the data
2483 * currently being displayed. This includes things like the number of axes and
2484 * the style of the axes. It does not include the range of each axis and its
2486 * This fills in this.axes_ and this.seriesToAxisMap_.
2487 * axes_ = [ { options } ]
2488 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2489 * indices are into the axes_ array.
2491 Dygraph.prototype.computeYAxes_ = function() {
2492 // Preserve valueWindow settings if they exist, and if the user hasn't
2493 // specified a new valueRange.
2495 if (this.axes_
!= undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") == false) {
2497 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2498 valueWindows
.push(this.axes_
[index
].valueWindow
);
2503 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2504 this.seriesToAxisMap_
= {};
2506 // Get a list of series names.
2507 var labels
= this.attr_("labels");
2509 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2511 // all options which could be applied per-axis:
2519 'axisLabelFontSize',
2524 // Copy global axis options over to the first axis.
2525 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2526 var k
= axisOptions
[i
];
2527 var v
= this.attr_(k
);
2528 if (v
) this.axes_
[0][k
] = v
;
2531 // Go through once and add all the axes.
2532 for (var seriesName
in series
) {
2533 if (!series
.hasOwnProperty(seriesName
)) continue;
2534 var axis
= this.attr_("axis", seriesName
);
2536 this.seriesToAxisMap_
[seriesName
] = 0;
2539 if (typeof(axis
) == 'object') {
2540 // Add a new axis, making a copy of its per-axis options.
2542 Dygraph
.update(opts
, this.axes_
[0]);
2543 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2544 var yAxisId
= this.axes_
.length
;
2545 opts
.yAxisId
= yAxisId
;
2547 Dygraph
.update(opts
, axis
);
2548 this.axes_
.push(opts
);
2549 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2553 // Go through one more time and assign series to an axis defined by another
2554 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2555 for (var seriesName
in series
) {
2556 if (!series
.hasOwnProperty(seriesName
)) continue;
2557 var axis
= this.attr_("axis", seriesName
);
2558 if (typeof(axis
) == 'string') {
2559 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2560 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2561 "series " + axis
+ ", which does not define its own axis.");
2564 var idx
= this.seriesToAxisMap_
[axis
];
2565 this.seriesToAxisMap_
[seriesName
] = idx
;
2569 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2570 // this last so that hiding the first series doesn't destroy the axis
2571 // properties of the primary axis.
2572 var seriesToAxisFiltered
= {};
2573 var vis
= this.visibility();
2574 for (var i
= 1; i
< labels
.length
; i
++) {
2576 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2578 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2580 if (valueWindows
!= undefined
) {
2581 // Restore valueWindow settings.
2582 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2583 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2589 * Returns the number of y-axes on the chart.
2590 * @return {Number} the number of axes.
2592 Dygraph
.prototype.numAxes
= function() {
2594 for (var series
in this.seriesToAxisMap_
) {
2595 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2596 var idx
= this.seriesToAxisMap_
[series
];
2597 if (idx
> last_axis
) last_axis
= idx
;
2599 return 1 + last_axis
;
2604 * Returns axis properties for the given series.
2605 * @param { String } setName The name of the series for which to get axis
2606 * properties, e.g. 'Y1'.
2607 * @return { Object } The axis properties.
2609 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2610 // TODO(danvk): handle errors.
2611 return this.axes_
[this.seriesToAxisMap_
[series
]];
2616 * Determine the value range and tick marks for each axis.
2617 * @param {Object} extremes A mapping from seriesName -> [low, high]
2618 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2620 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2621 // Build a map from axis number -> [list of series names]
2622 var seriesForAxis
= [];
2623 for (var series
in this.seriesToAxisMap_
) {
2624 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2625 var idx
= this.seriesToAxisMap_
[series
];
2626 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2627 seriesForAxis
[idx
].push(series
);
2630 // Compute extreme values, a span and tick marks for each axis.
2631 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2632 var axis
= this.axes_
[i
];
2634 if (!seriesForAxis
[i
]) {
2635 // If no series are defined or visible then use a reasonable default
2636 axis
.extremeRange
= [0, 1];
2638 // Calculate the extremes of extremes.
2639 var series
= seriesForAxis
[i
];
2640 var minY
= Infinity
; // extremes[series[0]][0];
2641 var maxY
= -Infinity
; // extremes[series[0]][1];
2642 var extremeMinY
, extremeMaxY
;
2643 for (var j
= 0; j
< series
.length
; j
++) {
2644 // Only use valid extremes to stop null data series' from corrupting the scale.
2645 extremeMinY
= extremes
[series
[j
]][0];
2646 if (extremeMinY
!= null) {
2647 minY
= Math
.min(extremeMinY
, minY
);
2649 extremeMaxY
= extremes
[series
[j
]][1];
2650 if (extremeMaxY
!= null) {
2651 maxY
= Math
.max(extremeMaxY
, maxY
);
2654 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2656 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2657 if (minY
== Infinity
) minY
= 0;
2658 if (maxY
== -Infinity
) maxY
= 0;
2660 // Add some padding and round up to an integer to be human-friendly.
2661 var span
= maxY
- minY
;
2662 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2663 if (span
== 0) { span
= maxY
; }
2667 if (axis
.logscale
) {
2668 var maxAxisY
= maxY
+ 0.1 * span
;
2669 var minAxisY
= minY
;
2671 var maxAxisY
= maxY
+ 0.1 * span
;
2672 var minAxisY
= minY
- 0.1 * span
;
2674 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2675 if (!this.attr_("avoidMinZero")) {
2676 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2677 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2680 if (this.attr_("includeZero")) {
2681 if (maxY
< 0) maxAxisY
= 0;
2682 if (minY
> 0) minAxisY
= 0;
2685 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2687 if (axis
.valueWindow
) {
2688 // This is only set if the user has zoomed on the y-axis. It is never set
2689 // by a user. It takes precedence over axis.valueRange because, if you set
2690 // valueRange, you'd still expect to be able to pan.
2691 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2692 } else if (axis
.valueRange
) {
2693 // This is a user-set value range for this axis.
2694 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2696 axis
.computedValueRange
= axis
.extremeRange
;
2699 // Add ticks. By default, all axes inherit the tick positions of the
2700 // primary axis. However, if an axis is specifically marked as having
2701 // independent ticks, then that is permissible as well.
2702 if (i
== 0 || axis
.independentTicks
) {
2704 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2705 axis
.computedValueRange
[1],
2709 var p_axis
= this.axes_
[0];
2710 var p_ticks
= p_axis
.ticks
;
2711 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2712 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2713 var tick_values
= [];
2714 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2715 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2716 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2717 tick_values
.push(y_val
);
2721 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2722 axis
.computedValueRange
[1],
2723 this, axis
, tick_values
);
2730 * Calculates the rolling average of a data set.
2731 * If originalData is [label, val], rolls the average of those.
2732 * If originalData is [label, [, it's interpreted as [value, stddev]
2733 * and the roll is returned in the same form, with appropriately reduced
2734 * stddev for each value.
2735 * Note that this is where fractional input (i.e. '5/10') is converted into
2737 * @param {Array} originalData The data in the appropriate format (see above)
2738 * @param {Number} rollPeriod The number of points over which to average the
2741 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2742 if (originalData
.length
< 2)
2743 return originalData
;
2744 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2745 var rollingData
= [];
2746 var sigma
= this.attr_("sigma");
2748 if (this.fractions_
) {
2750 var den
= 0; // numerator/denominator
2752 for (var i
= 0; i
< originalData
.length
; i
++) {
2753 num
+= originalData
[i
][1][0];
2754 den
+= originalData
[i
][1][1];
2755 if (i
- rollPeriod
>= 0) {
2756 num
-= originalData
[i
- rollPeriod
][1][0];
2757 den
-= originalData
[i
- rollPeriod
][1][1];
2760 var date
= originalData
[i
][0];
2761 var value
= den
? num
/ den
: 0.0;
2762 if (this.attr_("errorBars")) {
2763 if (this.wilsonInterval_
) {
2764 // For more details on this confidence interval, see:
2765 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2767 var p
= value
< 0 ? 0 : value
, n
= den
;
2768 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2769 var denom
= 1 + sigma
* sigma
/ den
;
2770 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2771 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2772 rollingData
[i
] = [date
,
2773 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2775 rollingData
[i
] = [date
, [0, 0, 0]];
2778 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2779 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2782 rollingData
[i
] = [date
, mult
* value
];
2785 } else if (this.attr_("customBars")) {
2790 for (var i
= 0; i
< originalData
.length
; i
++) {
2791 var data
= originalData
[i
][1];
2793 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2795 if (y
!= null && !isNaN(y
)) {
2801 if (i
- rollPeriod
>= 0) {
2802 var prev
= originalData
[i
- rollPeriod
];
2803 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2810 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2811 1.0 * (mid
- low
) / count
,
2812 1.0 * (high
- mid
) / count
]];
2815 // Calculate the rolling average for the first rollPeriod - 1 points where
2816 // there is not enough data to roll over the full number of points
2817 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2818 if (!this.attr_("errorBars")){
2819 if (rollPeriod
== 1) {
2820 return originalData
;
2823 for (var i
= 0; i
< originalData
.length
; i
++) {
2826 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2827 var y
= originalData
[j
][1];
2828 if (y
== null || isNaN(y
)) continue;
2830 sum
+= originalData
[j
][1];
2833 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2835 rollingData
[i
] = [originalData
[i
][0], null];
2840 for (var i
= 0; i
< originalData
.length
; i
++) {
2844 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2845 var y
= originalData
[j
][1][0];
2846 if (y
== null || isNaN(y
)) continue;
2848 sum
+= originalData
[j
][1][0];
2849 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2852 var stddev
= Math
.sqrt(variance
) / num_ok
;
2853 rollingData
[i
] = [originalData
[i
][0],
2854 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2856 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2867 * Parses a date, returning the number of milliseconds since epoch. This can be
2868 * passed in as an xValueParser in the Dygraph constructor.
2869 * TODO(danvk): enumerate formats that this understands.
2870 * @param {String} A date in YYYYMMDD format.
2871 * @return {Number} Milliseconds since epoch.
2873 Dygraph
.dateParser
= function(dateStr
, self
) {
2876 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2877 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2878 while (dateStrSlashed
.search("-") != -1) {
2879 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2881 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2882 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2883 // TODO(danvk): remove support for this format. It's confusing.
2884 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2885 + "/" + dateStr
.substr(6,2);
2886 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2888 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2889 // "2009/07/12 12:34:56"
2890 d
= Dygraph
.dateStrToMillis(dateStr
);
2893 if (!d
|| isNaN(d
)) {
2894 self
.error("Couldn't parse " + dateStr
+ " as a date");
2900 * Detects the type of the str (date or numeric) and sets the various
2901 * formatting attributes in this.attrs_ based on this type.
2902 * @param {String} str An x value.
2905 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2907 if (str
.indexOf('-') > 0 ||
2908 str
.indexOf('/') >= 0 ||
2909 isNaN(parseFloat(str
))) {
2911 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2912 // TODO(danvk): remove support for this format.
2917 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2918 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2919 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2920 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2922 // TODO(danvk): use Dygraph.numberFormatter here?
2923 /** @private (shut up, jsdoc!) */
2924 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2925 /** @private (shut up, jsdoc!) */
2926 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2927 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2928 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2933 * Parses the value as a floating point number. This is like the parseFloat()
2934 * built-in, but with a few differences:
2935 * - the empty string is parsed as null, rather than NaN.
2936 * - if the string cannot be parsed at all, an error is logged.
2937 * If the string can't be parsed, this method returns null.
2938 * @param {String} x The string to be parsed
2939 * @param {Number} opt_line_no The line number from which the string comes.
2940 * @param {String} opt_line The text of the line from which the string comes.
2944 // Parse the x as a float or return null if it's not a number.
2945 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2946 var val
= parseFloat(x
);
2947 if (!isNaN(val
)) return val
;
2949 // Try to figure out what happeend.
2950 // If the value is the empty string, parse it as null.
2951 if (/^ *$/.test(x
)) return null;
2953 // If it was actually "NaN", return it as NaN.
2954 if (/^ *nan *$/i.test(x
)) return NaN
;
2956 // Looks like a parsing error.
2957 var msg
= "Unable to parse '" + x
+ "' as a number";
2958 if (opt_line
!== null && opt_line_no
!== null) {
2959 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2968 * Parses a string in a special csv format. We expect a csv file where each
2969 * line is a date point, and the first field in each line is the date string.
2970 * We also expect that all remaining fields represent series.
2971 * if the errorBars attribute is set, then interpret the fields as:
2972 * date, series1, stddev1, series2, stddev2, ...
2973 * @param {[Object]} data See above.
2975 * @return [Object] An array with one entry for each row. These entries
2976 * are an array of cells in that row. The first entry is the parsed x-value for
2977 * the row. The second, third, etc. are the y-values. These can take on one of
2978 * three forms, depending on the CSV and constructor parameters:
2980 * 2. [ value, stddev ]
2981 * 3. [ low value, center value, high value ]
2983 Dygraph
.prototype.parseCSV_
= function(data
) {
2985 var lines
= data
.split("\n");
2987 // Use the default delimiter or fall back to a tab if that makes sense.
2988 var delim
= this.attr_('delimiter');
2989 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2994 if (!('labels' in this.user_attrs_
)) {
2995 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2997 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3002 var defaultParserSet
= false; // attempt to auto-detect x value type
3003 var expectedCols
= this.attr_("labels").length
;
3004 var outOfOrder
= false;
3005 for (var i
= start
; i
< lines
.length
; i
++) {
3006 var line
= lines
[i
];
3008 if (line
.length
== 0) continue; // skip blank lines
3009 if (line
[0] == '#') continue; // skip comment lines
3010 var inFields
= line
.split(delim
);
3011 if (inFields
.length
< 2) continue;
3014 if (!defaultParserSet
) {
3015 this.detectTypeFromString_(inFields
[0]);
3016 xParser
= this.attr_("xValueParser");
3017 defaultParserSet
= true;
3019 fields
[0] = xParser(inFields
[0], this);
3021 // If fractions are expected, parse the numbers as "A/B
"
3022 if (this.fractions_) {
3023 for (var j = 1; j < inFields.length; j++) {
3024 // TODO(danvk): figure out an appropriate way to flag parse errors.
3025 var vals = inFields[j].split("/");
3026 if (vals.length != 2) {
3027 this.error('Expected fractional "num
/den
" values in CSV data ' +
3028 "but found a value
'" + inFields[j] + "' on line
" +
3029 (1 + i) + " ('" + line + "') which is not of
this form
.");
3032 fields[j] = [this.parseFloat_(vals[0], i, line),
3033 this.parseFloat_(vals[1], i, line)];
3036 } else if (this.attr_("errorBars
")) {
3037 // If there are error bars, values are (value, stddev) pairs
3038 if (inFields.length % 2 != 1) {
3039 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3040 'but line ' + (1 + i) + ' has an odd number of values (' +
3041 (inFields.length - 1) + "): '" + line + "'");
3043 for (var j = 1; j < inFields.length; j += 2) {
3044 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3045 this.parseFloat_(inFields[j + 1], i, line)];
3047 } else if (this.attr_("customBars
")) {
3048 // Bars are a low;center;high tuple
3049 for (var j = 1; j < inFields.length; j++) {
3050 var val = inFields[j];
3051 if (/^ *$/.test(val)) {
3052 fields[j] = [null, null, null];
3054 var vals = val.split(";");
3055 if (vals.length == 3) {
3056 fields[j] = [ this.parseFloat_(vals[0], i, line),
3057 this.parseFloat_(vals[1], i, line),
3058 this.parseFloat_(vals[2], i, line) ];
3060 this.warning('When using customBars, values must be either blank ' +
3061 'or "low
;center
;high
" tuples (got "' + val +
3062 '" on line ' + (1+i));
3067 // Values are just numbers
3068 for (var j = 1; j < inFields.length; j++) {
3069 fields[j] = this.parseFloat_(inFields[j], i, line);
3072 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3076 if (fields.length != expectedCols) {
3077 this.error("Number of columns
in line
" + i + " (" + fields.length +
3078 ") does not agree
with number of
labels (" + expectedCols +
3082 // If the user specified the 'labels' option and none of the cells of the
3083 // first row parsed correctly, then they probably double-specified the
3084 // labels. We go with the values set in the option, discard this row and
3085 // log a warning to the JS console.
3086 if (i == 0 && this.attr_('labels')) {
3087 var all_null = true;
3088 for (var j = 0; all_null && j < fields.length; j++) {
3089 if (fields[j]) all_null = false;
3092 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3093 "CSV
data ('" + line + "') appears to also contain labels
. " +
3094 "Will drop the CSV labels and
use the option labels
.");
3102 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3103 ret.sort(function(a,b) { return a[0] - b[0] });
3111 * The user has provided their data as a pre-packaged JS array. If the x values
3112 * are numeric, this is the same as dygraphs' internal format. If the x values
3113 * are dates, we need to convert them from Date objects to ms since epoch.
3114 * @param {[Object]} data
3115 * @return {[Object]} data with numeric x values.
3117 Dygraph.prototype.parseArray_ = function(data) {
3118 // Peek at the first x value to see if it's numeric.
3119 if (data.length == 0) {
3120 this.error("Can
't plot empty data set");
3123 if (data[0].length == 0) {
3124 this.error("Data set cannot contain an empty row");
3128 if (this.attr_("labels") == null) {
3129 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3130 "in the options parameter");
3131 this.attrs_.labels = [ "X" ];
3132 for (var i = 1; i < data[0].length; i++) {
3133 this.attrs_.labels.push("Y" + i);
3137 if (Dygraph.isDateLike(data[0][0])) {
3138 // Some intelligent defaults for a date x-axis.
3139 this.attrs_.xValueFormatter = Dygraph.dateString_;
3140 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3141 this.attrs_.xTicker = Dygraph.dateTicker;
3143 // Assume they're all dates
.
3144 var parsedData
= Dygraph
.clone(data
);
3145 for (var i
= 0; i
< data
.length
; i
++) {
3146 if (parsedData
[i
].length
== 0) {
3147 this.error("Row " + (1 + i
) + " of data is empty");
3150 if (parsedData
[i
][0] == null
3151 || typeof(parsedData
[i
][0].getTime
) != 'function'
3152 || isNaN(parsedData
[i
][0].getTime())) {
3153 this.error("x value in row " + (1 + i
) + " is not a Date");
3156 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3160 // Some intelligent defaults for a numeric x-axis.
3161 /** @private (shut up, jsdoc!) */
3162 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3163 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3169 * Parses a DataTable object from gviz.
3170 * The data is expected to have a first column that is either a date or a
3171 * number. All subsequent columns must be numbers. If there is a clear mismatch
3172 * between this.xValueParser_ and the type of the first column, it will be
3173 * fixed. Fills out rawData_.
3174 * @param {[Object]} data See above.
3177 Dygraph
.prototype.parseDataTable_
= function(data
) {
3178 var cols
= data
.getNumberOfColumns();
3179 var rows
= data
.getNumberOfRows();
3181 var indepType
= data
.getColumnType(0);
3182 if (indepType
== 'date' || indepType
== 'datetime') {
3183 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3184 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3185 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3186 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3187 } else if (indepType
== 'number') {
3188 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3189 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3190 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3191 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3193 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3194 "column 1 of DataTable input (Got '" + indepType
+ "')");
3198 // Array of the column indices which contain data (and not annotations).
3200 var annotationCols
= {}; // data index -> [annotation cols]
3201 var hasAnnotations
= false;
3202 for (var i
= 1; i
< cols
; i
++) {
3203 var type
= data
.getColumnType(i
);
3204 if (type
== 'number') {
3206 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3207 // This is OK -- it's an annotation column.
3208 var dataIdx
= colIdx
[colIdx
.length
- 1];
3209 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3210 annotationCols
[dataIdx
] = [i
];
3212 annotationCols
[dataIdx
].push(i
);
3214 hasAnnotations
= true;
3216 this.error("Only 'number' is supported as a dependent type with Gviz." +
3217 " 'string' is only supported if displayAnnotations is true");
3221 // Read column labels
3222 // TODO(danvk): add support back for errorBars
3223 var labels
= [data
.getColumnLabel(0)];
3224 for (var i
= 0; i
< colIdx
.length
; i
++) {
3225 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3226 if (this.attr_("errorBars")) i
+= 1;
3228 this.attrs_
.labels
= labels
;
3229 cols
= labels
.length
;
3232 var outOfOrder
= false;
3233 var annotations
= [];
3234 for (var i
= 0; i
< rows
; i
++) {
3236 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3237 data
.getValue(i
, 0) === null) {
3238 this.warn("Ignoring row " + i
+
3239 " of DataTable because of undefined or null first column.");
3243 if (indepType
== 'date' || indepType
== 'datetime') {
3244 row
.push(data
.getValue(i
, 0).getTime());
3246 row
.push(data
.getValue(i
, 0));
3248 if (!this.attr_("errorBars")) {
3249 for (var j
= 0; j
< colIdx
.length
; j
++) {
3250 var col
= colIdx
[j
];
3251 row
.push(data
.getValue(i
, col
));
3252 if (hasAnnotations
&&
3253 annotationCols
.hasOwnProperty(col
) &&
3254 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3256 ann
.series
= data
.getColumnLabel(col
);
3258 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3260 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3261 if (k
) ann
.text
+= "\n";
3262 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3264 annotations
.push(ann
);
3268 // Strip out infinities, which give dygraphs problems later on.
3269 for (var j
= 0; j
< row
.length
; j
++) {
3270 if (!isFinite(row
[j
])) row
[j
] = null;
3273 for (var j
= 0; j
< cols
- 1; j
++) {
3274 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3277 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3284 this.warn("DataTable is out of order; order it correctly to speed loading.");
3285 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3287 this.rawData_
= ret
;
3289 if (annotations
.length
> 0) {
3290 this.setAnnotations(annotations
, true);
3296 * This is identical to JavaScript's built-in Date.parse() method, except that
3297 * it doesn't get replaced with an incompatible method by aggressive JS
3298 * libraries like MooTools or Joomla.
3299 * @param { String } str The date string, e.g. "2011/05/06"
3300 * @return { Integer } millis since epoch
3302 Dygraph
.dateStrToMillis
= function(str
) {
3303 return new Date(str
).getTime();
3306 // These functions are all based on MochiKit.
3308 * Copies all the properties from o to self.
3312 Dygraph
.update
= function (self
, o
) {
3313 if (typeof(o
) != 'undefined' && o
!== null) {
3315 if (o
.hasOwnProperty(k
)) {
3326 Dygraph
.isArrayLike
= function (o
) {
3327 var typ
= typeof(o
);
3329 (typ
!= 'object' && !(typ
== 'function' &&
3330 typeof(o
.item
) == 'function')) ||
3332 typeof(o
.length
) != 'number' ||
3343 Dygraph
.isDateLike
= function (o
) {
3344 if (typeof(o
) != "object" || o
=== null ||
3345 typeof(o
.getTime
) != 'function') {
3354 Dygraph
.clone
= function(o
) {
3355 // TODO(danvk): figure out how MochiKit's version works
3357 for (var i
= 0; i
< o
.length
; i
++) {
3358 if (Dygraph
.isArrayLike(o
[i
])) {
3359 r
.push(Dygraph
.clone(o
[i
]));
3369 * Get the CSV data. If it's in a function, call that function. If it's in a
3370 * file, do an XMLHttpRequest to get it.
3373 Dygraph
.prototype.start_
= function() {
3374 if (typeof this.file_
== 'function') {
3375 // CSV string. Pretend we got it via XHR.
3376 this.loadedEvent_(this.file_());
3377 } else if (Dygraph
.isArrayLike(this.file_
)) {
3378 this.rawData_
= this.parseArray_(this.file_
);
3380 } else if (typeof this.file_
== 'object' &&
3381 typeof this.file_
.getColumnRange
== 'function') {
3382 // must be a DataTable from gviz.
3383 this.parseDataTable_(this.file_
);
3385 } else if (typeof this.file_
== 'string') {
3386 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3387 if (this.file_
.indexOf('\n') >= 0) {
3388 this.loadedEvent_(this.file_
);
3390 var req
= new XMLHttpRequest();
3392 req
.onreadystatechange
= function () {
3393 if (req
.readyState
== 4) {
3394 if (req
.status
== 200 || // Normal http
3395 req
.status
== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3396 caller
.loadedEvent_(req
.responseText
);
3401 req
.open("GET", this.file_
, true);
3405 this.error("Unknown data format: " + (typeof this.file_
));
3410 * Changes various properties of the graph. These can include:
3412 * <li>file: changes the source data for the graph</li>
3413 * <li>errorBars: changes whether the data contains stddev</li>
3416 * There's a huge variety of options that can be passed to this method. For a
3417 * full list, see http://dygraphs.com/options.html.
3419 * @param {Object} attrs The new properties and values
3420 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3421 * call to updateOptions(). If you know better, you can pass true to explicitly
3422 * block the redraw. This can be useful for chaining updateOptions() calls,
3423 * avoiding the occasional infinite loop and preventing redraws when it's not
3424 * necessary (e.g. when updating a callback).
3426 Dygraph
.prototype.updateOptions
= function(attrs
, block_redraw
) {
3427 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3429 // TODO(danvk): this is a mess. Move these options into attr_.
3430 if ('rollPeriod' in attrs
) {
3431 this.rollPeriod_
= attrs
.rollPeriod
;
3433 if ('dateWindow' in attrs
) {
3434 this.dateWindow_
= attrs
.dateWindow
;
3435 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3436 this.zoomed_x_
= attrs
.dateWindow
!= null;
3439 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3440 this.zoomed_y_
= attrs
.valueRange
!= null;
3443 // TODO(danvk): validate per-series options.
3448 // highlightCircleSize
3450 Dygraph
.update(this.user_attrs_
, attrs
);
3452 if (attrs
['file']) {
3453 this.file_
= attrs
['file'];
3454 if (!block_redraw
) this.start_();
3456 if (!block_redraw
) this.predraw_();
3461 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3462 * containing div (which has presumably changed size since the dygraph was
3463 * instantiated. If the width/height are specified, the div will be resized.
3465 * This is far more efficient than destroying and re-instantiating a
3466 * Dygraph, since it doesn't have to reparse the underlying data.
3468 * @param {Number} [width] Width (in pixels)
3469 * @param {Number} [height] Height (in pixels)
3471 Dygraph
.prototype.resize
= function(width
, height
) {
3472 if (this.resize_lock
) {
3475 this.resize_lock
= true;
3477 if ((width
=== null) != (height
=== null)) {
3478 this.warn("Dygraph.resize() should be called with zero parameters or " +
3479 "two non-NULL parameters. Pretending it was zero.");
3480 width
= height
= null;
3483 // TODO(danvk): there should be a clear() method.
3484 this.maindiv_
.innerHTML
= "";
3485 this.attrs_
.labelsDiv
= null;
3488 this.maindiv_
.style
.width
= width
+ "px";
3489 this.maindiv_
.style
.height
= height
+ "px";
3490 this.width_
= width
;
3491 this.height_
= height
;
3493 this.width_
= this.maindiv_
.offsetWidth
;
3494 this.height_
= this.maindiv_
.offsetHeight
;
3497 this.createInterface_();
3500 this.resize_lock
= false;
3504 * Adjusts the number of points in the rolling average. Updates the graph to
3505 * reflect the new averaging period.
3506 * @param {Number} length Number of points over which to average the data.
3508 Dygraph
.prototype.adjustRoll
= function(length
) {
3509 this.rollPeriod_
= length
;
3514 * Returns a boolean array of visibility statuses.
3516 Dygraph
.prototype.visibility
= function() {
3517 // Do lazy-initialization, so that this happens after we know the number of
3519 if (!this.attr_("visibility")) {
3520 this.attrs_
["visibility"] = [];
3522 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3523 this.attr_("visibility").push(true);
3525 return this.attr_("visibility");
3529 * Changes the visiblity of a series.
3531 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3532 var x
= this.visibility();
3533 if (num
< 0 || num
>= x
.length
) {
3534 this.warn("invalid series number in setVisibility: " + num
);
3542 * Update the list of annotations and redraw the chart.
3544 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3545 // Only add the annotation CSS rule once we know it will be used.
3546 Dygraph
.addAnnotationRule();
3547 this.annotations_
= ann
;
3548 this.layout_
.setAnnotations(this.annotations_
);
3549 if (!suppressDraw
) {
3555 * Return the list of annotations.
3557 Dygraph
.prototype.annotations
= function() {
3558 return this.annotations_
;
3562 * Get the index of a series (column) given its name. The first column is the
3563 * x-axis, so the data series start with index 1.
3565 Dygraph
.prototype.indexFromSetName
= function(name
) {
3566 var labels
= this.attr_("labels");
3567 for (var i
= 0; i
< labels
.length
; i
++) {
3568 if (labels
[i
] == name
) return i
;
3575 * Adds a default style for the annotation CSS classes to the document. This is
3576 * only executed when annotations are actually used. It is designed to only be
3577 * called once -- all calls after the first will return immediately.
3579 Dygraph
.addAnnotationRule
= function() {
3580 if (Dygraph
.addedAnnotationCSS
) return;
3582 var rule
= "border: 1px solid black; " +
3583 "background-color: white; " +
3584 "text-align: center;";
3586 var styleSheetElement
= document
.createElement("style");
3587 styleSheetElement
.type
= "text/css";
3588 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3590 // Find the first style sheet that we can access.
3591 // We may not add a rule to a style sheet from another domain for security
3592 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3593 // adds its own style sheets from google.com.
3594 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3595 if (document
.styleSheets
[i
].disabled
) continue;
3596 var mysheet
= document
.styleSheets
[i
];
3598 if (mysheet
.insertRule
) { // Firefox
3599 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3600 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3601 } else if (mysheet
.addRule
) { // IE
3602 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3604 Dygraph
.addedAnnotationCSS
= true;
3607 // Was likely a security exception.
3611 this.warn("Unable to add default annotation CSS rule; display may be off.");
3616 * Create a new canvas element. This is more complex than a simple
3617 * document.createElement("canvas") because of IE and excanvas.
3619 Dygraph
.createCanvas
= function() {
3620 var canvas
= document
.createElement("canvas");
3622 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3623 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3624 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3630 // Older pages may still use this name.
3631 DateGraph
= Dygraph
;