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.defaultInteractionModel.
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
.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 * A collection of functions to facilitate build custom interaction models.
1093 Dygraph
.Interaction
= {};
1096 * Called in response to an interaction model operation that
1097 * should start the default panning behavior.
1099 * It's used in the default callback for "mousedown" operations.
1100 * Custom interaction model builders can use it to provide the default
1103 * @param { Event } event the event object which led to the startPan call.
1104 * @param { Dygraph} g The dygraph on which to act.
1105 * @param { Object} context The dragging context object (with
1106 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1108 Dygraph
.Interaction
.startPan
= function(event
, g
, context
) {
1109 context
.isPanning
= true;
1110 var xRange
= g
.xAxisRange();
1111 context
.dateRange
= xRange
[1] - xRange
[0];
1112 context
.initialLeftmostDate
= xRange
[0];
1113 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1115 if (g
.attr_("panEdgeFraction")) {
1116 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1117 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1119 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1120 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1122 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1123 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1124 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1126 var boundedValues
= [];
1127 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1129 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1130 var axis
= g
.axes_
[i
];
1131 var yExtremes
= axis
.extremeRange
;
1133 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1134 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1136 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1137 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1139 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1141 context
.boundedValues
= boundedValues
;
1144 // Record the range of each y-axis at the start of the drag.
1145 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1146 context
.is2DPan
= false;
1147 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1148 var axis
= g
.axes_
[i
];
1149 var yRange
= g
.yAxisRange(i
);
1150 // TODO(konigsberg): These values should be in |context|.
1151 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1152 if (axis
.logscale
) {
1153 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1154 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1156 axis
.initialTopValue
= yRange
[1];
1157 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1159 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1161 // While calculating axes, set 2dpan.
1162 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1167 * Called in response to an interaction model operation that
1168 * responds to an event that pans the view.
1170 * It's used in the default callback for "mousemove" operations.
1171 * Custom interaction model builders can use it to provide the default
1174 * @param { Event } event the event object which led to the movePan call.
1175 * @param { Dygraph} g The dygraph on which to act.
1176 * @param { Object} context The dragging context object (with
1177 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1179 Dygraph
.Interaction
.movePan
= function(event
, g
, context
) {
1180 context
.dragEndX
= g
.dragGetX_(event
, context
);
1181 context
.dragEndY
= g
.dragGetY_(event
, context
);
1183 var minDate
= context
.initialLeftmostDate
-
1184 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1185 if (context
.boundedDates
) {
1186 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1188 var maxDate
= minDate
+ context
.dateRange
;
1189 if (context
.boundedDates
) {
1190 if (maxDate
> context
.boundedDates
[1]) {
1191 // Adjust minDate, and recompute maxDate.
1192 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1193 maxDate
= minDate
+ context
.dateRange
;
1197 g
.dateWindow_
= [minDate
, maxDate
];
1199 // y-axis scaling is automatic unless this is a full 2D pan.
1200 if (context
.is2DPan
) {
1201 // Adjust each axis appropriately.
1202 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1203 var axis
= g
.axes_
[i
];
1205 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1206 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1208 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1210 // In log scale, maxValue and minValue are the logs of those values.
1211 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1213 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1215 var minValue
= maxValue
- axis
.dragValueRange
;
1217 if (minValue
< boundedValue
[0]) {
1218 // Adjust maxValue, and recompute minValue.
1219 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1220 minValue
= maxValue
- axis
.dragValueRange
;
1223 if (axis
.logscale
) {
1224 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1225 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1227 axis
.valueWindow
= [ minValue
, maxValue
];
1232 g
.drawGraph_(false);
1236 * Called in response to an interaction model operation that
1237 * responds to an event that ends panning.
1239 * It's used in the default callback for "mouseup" operations.
1240 * Custom interaction model builders can use it to provide the default
1243 * @param { Event } event the event object which led to the startZoom call.
1244 * @param { Dygraph} g The dygraph on which to act.
1245 * @param { Object} context The dragging context object (with
1246 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1248 Dygraph
.Interaction
.endPan
= function(event
, g
, context
) {
1249 context
.dragEndX
= g
.dragGetX_(event
, context
);
1250 context
.dragEndY
= g
.dragGetY_(event
, context
);
1252 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1253 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1255 if (regionWidth
< 2 && regionHeight
< 2 &&
1256 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1257 Dygraph
.Interaction
.treatMouseOpAsClick(g
, context
);
1260 // TODO(konigsberg): Clear the context data from the axis.
1261 // (replace with "context = {}" ?)
1262 // TODO(konigsberg): mouseup should just delete the
1263 // context object, and mousedown should create a new one.
1264 context
.isPanning
= false;
1265 context
.is2DPan
= false;
1266 context
.initialLeftmostDate
= null;
1267 context
.dateRange
= null;
1268 context
.valueRange
= null;
1269 context
.boundedDates
= null;
1270 context
.boundedValues
= null;
1272 var dragEndX
= g
.dragGetX_(event
, context
);
1273 var dragEndY
= g
.dragGetY_(event
, context
);
1274 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1275 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1277 if (regionWidth
< 2 && regionHeight
< 2 &&
1278 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1279 Dygraph
.Interaction
.treatMouseOpAsClick(g
, context
);
1284 * Called in response to an interaction model operation that
1285 * responds to an event that starts zooming.
1287 * It's used in the default callback for "mousedown" operations.
1288 * Custom interaction model builders can use it to provide the default
1291 * @param { Event } event the event object which led to the startZoom call.
1292 * @param { Dygraph} g The dygraph on which to act.
1293 * @param { Object} context The dragging context object (with
1294 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1296 Dygraph
.Interaction
.startZoom
= function(event
, g
, context
) {
1297 context
.isZooming
= true;
1301 * Called in response to an interaction model operation that
1302 * responds to an event that defines zoom boundaries.
1304 * It's used in the default callback for "mousemove" operations.
1305 * Custom interaction model builders can use it to provide the default
1308 * @param { Event } event the event object which led to the moveZoom call.
1309 * @param { Dygraph} g The dygraph on which to act.
1310 * @param { Object} context The dragging context object (with
1311 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1313 Dygraph
.Interaction
.moveZoom
= function(event
, g
, context
) {
1314 context
.dragEndX
= g
.dragGetX_(event
, context
);
1315 context
.dragEndY
= g
.dragGetY_(event
, context
);
1317 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1318 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1320 // drag direction threshold for y axis is twice as large as x axis
1321 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1324 context
.dragDirection
,
1329 context
.prevDragDirection
,
1333 context
.prevEndX
= context
.dragEndX
;
1334 context
.prevEndY
= context
.dragEndY
;
1335 context
.prevDragDirection
= context
.dragDirection
;
1338 Dygraph
.Interaction
.treatMouseOpAsClick
= function(g
, context
) {
1339 // TODO(danvk): pass along more info about the points, e.g. 'x'
1340 if (g
.attr_('clickCallback') != null) {
1341 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
, context
);
1343 if (g
.attr_('pointClickCallback')) {
1344 // check if the click was on a particular point.
1345 var closestIdx
= -1;
1346 var closestDistance
= 0;
1347 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1348 var p
= g
.selPoints_
[i
];
1349 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1350 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1351 if (closestIdx
== -1 || distance
< closestDistance
) {
1352 closestDistance
= distance
;
1357 // Allow any click within two pixels of the dot.
1358 var radius
= g
.attr_('highlightCircleSize') + 2;
1359 if (closestDistance
<= 5 * 5) {
1360 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1366 * Called in response to an interaction model operation that
1367 * responds to an event that performs a zoom based on previously defined
1370 * It's used in the default callback for "mouseup" operations.
1371 * Custom interaction model builders can use it to provide the default
1374 * @param { Event } event the event object which led to the endZoom call.
1375 * @param { Dygraph} g The dygraph on which to end the zoom.
1376 * @param { Object} context The dragging context object (with
1377 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1379 Dygraph
.Interaction
.endZoom
= function(event
, g
, context
) {
1380 context
.isZooming
= false;
1381 context
.dragEndX
= g
.dragGetX_(event
, context
);
1382 context
.dragEndY
= g
.dragGetY_(event
, context
);
1383 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1384 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1386 if (regionWidth
< 2 && regionHeight
< 2 &&
1387 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1388 Dygraph
.Interaction
.treatMouseOpAsClick(g
, context
);
1391 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1392 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1393 Math
.max(context
.dragStartX
, context
.dragEndX
));
1394 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1395 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1396 Math
.max(context
.dragStartY
, context
.dragEndY
));
1398 g
.canvas_ctx_
.clearRect(0, 0, g
.canvas_
.width
, g
.canvas_
.height
);
1400 context
.dragStartX
= null;
1401 context
.dragStartY
= null;
1405 * Default interation model for dygraphs. You can refer to specific elements of
1406 * this when constructing your own interaction model, e.g.:
1407 * g.updateOptions( {
1408 * interactionModel: {
1409 * mousedown: Dygraph.defaultInteractionModel.mousedown
1413 Dygraph
.Interaction
.defaultModel
= {
1414 // Track the beginning of drag events
1415 mousedown
: function(event
, g
, context
) {
1416 context
.initializeMouseDown(event
, g
, context
);
1418 if (event
.altKey
|| event
.shiftKey
) {
1419 Dygraph
.startPan(event
, g
, context
);
1421 Dygraph
.startZoom(event
, g
, context
);
1425 // Draw zoom rectangles when the mouse is down and the user moves around
1426 mousemove
: function(event
, g
, context
) {
1427 if (context
.isZooming
) {
1428 Dygraph
.moveZoom(event
, g
, context
);
1429 } else if (context
.isPanning
) {
1430 Dygraph
.movePan(event
, g
, context
);
1434 mouseup
: function(event
, g
, context
) {
1435 if (context
.isZooming
) {
1436 Dygraph
.endZoom(event
, g
, context
);
1437 } else if (context
.isPanning
) {
1438 Dygraph
.endPan(event
, g
, context
);
1442 // Temporarily cancel the dragging event when the mouse leaves the graph
1443 mouseout
: function(event
, g
, context
) {
1444 if (context
.isZooming
) {
1445 context
.dragEndX
= null;
1446 context
.dragEndY
= null;
1450 // Disable zooming out if panning.
1451 dblclick
: function(event
, g
, context
) {
1452 if (event
.altKey
|| event
.shiftKey
) {
1455 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1456 // friendlier to public use.
1461 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.Interaction
.defaultModel
;
1463 // old ways of accessing these methods/properties
1464 Dygraph
.defaultInteractionModel
= Dygraph
.Interaction
.defaultModel
;
1465 Dygraph
.endZoom
= Dygraph
.Interaction
.endZoom
;
1466 Dygraph
.moveZoom
= Dygraph
.Interaction
.moveZoom
;
1467 Dygraph
.startZoom
= Dygraph
.Interaction
.startZoom
;
1468 Dygraph
.endPan
= Dygraph
.Interaction
.endPan
;
1469 Dygraph
.movePan
= Dygraph
.Interaction
.movePan
;
1470 Dygraph
.startPan
= Dygraph
.Interaction
.startPan
;
1473 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1477 Dygraph
.prototype.createDragInterface_
= function() {
1479 // Tracks whether the mouse is down right now
1481 isPanning
: false, // is this drag part of a pan?
1482 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1487 dragDirection
: null,
1490 prevDragDirection
: null,
1492 // The value on the left side of the graph when a pan operation starts.
1493 initialLeftmostDate
: null,
1495 // The number of units each pixel spans. (This won't be valid for log
1497 xUnitsPerPixel
: null,
1499 // TODO(danvk): update this comment
1500 // The range in second/value units that the viewport encompasses during a
1501 // panning operation.
1504 // Utility function to convert page-wide coordinates to canvas coords
1508 // Values for use with panEdgeFraction, which limit how far outside the
1509 // graph's data boundaries it can be panned.
1510 boundedDates
: null, // [minDate, maxDate]
1511 boundedValues
: null, // [[minValue, maxValue] ...]
1513 initializeMouseDown
: function(event
, g
, context
) {
1514 // prevents mouse drags from selecting page text.
1515 if (event
.preventDefault
) {
1516 event
.preventDefault(); // Firefox, Chrome, etc.
1518 event
.returnValue
= false; // IE
1519 event
.cancelBubble
= true;
1522 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1523 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1524 context
.dragStartX
= g
.dragGetX_(event
, context
);
1525 context
.dragStartY
= g
.dragGetY_(event
, context
);
1529 var interactionModel
= this.attr_("interactionModel");
1531 // Self is the graph.
1534 // Function that binds the graph and context to the handler.
1535 var bindHandler
= function(handler
) {
1536 return function(event
) {
1537 handler(event
, self
, context
);
1541 for (var eventName
in interactionModel
) {
1542 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1543 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1544 bindHandler(interactionModel
[eventName
]));
1547 // If the user releases the mouse button during a drag, but not over the
1548 // canvas, then it doesn't count as a zooming action.
1549 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1550 if (context
.isZooming
|| context
.isPanning
) {
1551 context
.isZooming
= false;
1552 context
.dragStartX
= null;
1553 context
.dragStartY
= null;
1556 if (context
.isPanning
) {
1557 context
.isPanning
= false;
1558 context
.draggingDate
= null;
1559 context
.dateRange
= null;
1560 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1561 delete self
.axes_
[i
].draggingValue
;
1562 delete self
.axes_
[i
].dragValueRange
;
1570 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1571 * up any previous zoom rectangles that were drawn. This could be optimized to
1572 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1575 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1576 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1577 * @param {Number} startX The X position where the drag started, in canvas
1579 * @param {Number} endX The current X position of the drag, in canvas coords.
1580 * @param {Number} startY The Y position where the drag started, in canvas
1582 * @param {Number} endY The current Y position of the drag, in canvas coords.
1583 * @param {Number} prevDirection the value of direction on the previous call to
1584 * this function. Used to avoid excess redrawing
1585 * @param {Number} prevEndX The value of endX on the previous call to this
1586 * function. Used to avoid excess redrawing
1587 * @param {Number} prevEndY The value of endY on the previous call to this
1588 * function. Used to avoid excess redrawing
1591 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1592 endY
, prevDirection
, prevEndX
,
1594 var ctx
= this.canvas_ctx_
;
1596 // Clean up from the previous rect if necessary
1597 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1598 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1599 Math
.abs(startX
- prevEndX
), this.height_
);
1600 } else if (prevDirection
== Dygraph
.VERTICAL
){
1601 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1602 this.width_
, Math
.abs(startY
- prevEndY
));
1605 // Draw a light-grey rectangle to show the new viewing area
1606 if (direction
== Dygraph
.HORIZONTAL
) {
1607 if (endX
&& startX
) {
1608 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1609 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1610 Math
.abs(endX
- startX
), this.height_
);
1613 if (direction
== Dygraph
.VERTICAL
) {
1614 if (endY
&& startY
) {
1615 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1616 ctx
.fillRect(0, Math
.min(startY
, endY
),
1617 this.width_
, Math
.abs(endY
- startY
));
1623 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1624 * the canvas. The exact zoom window may be slightly larger if there are no data
1625 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1626 * which accepts dates that match the raw data. This function redraws the graph.
1628 * @param {Number} lowX The leftmost pixel value that should be visible.
1629 * @param {Number} highX The rightmost pixel value that should be visible.
1632 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1633 // Find the earliest and latest dates contained in this canvasx range.
1634 // Convert the call to date ranges of the raw data.
1635 var minDate
= this.toDataXCoord(lowX
);
1636 var maxDate
= this.toDataXCoord(highX
);
1637 this.doZoomXDates_(minDate
, maxDate
);
1641 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1642 * method with doZoomX which accepts pixel coordinates. This function redraws
1645 * @param {Number} minDate The minimum date that should be visible.
1646 * @param {Number} maxDate The maximum date that should be visible.
1649 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1650 this.dateWindow_
= [minDate
, maxDate
];
1651 this.zoomed_x_
= true;
1653 if (this.attr_("zoomCallback")) {
1654 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1659 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1660 * the canvas. This function redraws the graph.
1662 * @param {Number} lowY The topmost pixel value that should be visible.
1663 * @param {Number} highY The lowest pixel value that should be visible.
1666 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1667 // Find the highest and lowest values in pixel range for each axis.
1668 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1669 // This is because pixels increase as you go down on the screen, whereas data
1670 // coordinates increase as you go up the screen.
1671 var valueRanges
= [];
1672 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1673 var hi
= this.toDataYCoord(lowY
, i
);
1674 var low
= this.toDataYCoord(highY
, i
);
1675 this.axes_
[i
].valueWindow
= [low
, hi
];
1676 valueRanges
.push([low
, hi
]);
1679 this.zoomed_y_
= true;
1681 if (this.attr_("zoomCallback")) {
1682 var xRange
= this.xAxisRange();
1683 var yRange
= this.yAxisRange();
1684 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1689 * Reset the zoom to the original view coordinates. This is the same as
1690 * double-clicking on the graph.
1694 Dygraph
.prototype.doUnzoom_
= function() {
1696 if (this.dateWindow_
!= null) {
1698 this.dateWindow_
= null;
1701 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1702 if (this.axes_
[i
].valueWindow
!= null) {
1704 delete this.axes_
[i
].valueWindow
;
1708 // Clear any selection, since it's likely to be drawn in the wrong place.
1709 this.clearSelection();
1712 // Putting the drawing operation before the callback because it resets
1714 this.zoomed_x_
= false;
1715 this.zoomed_y_
= false;
1717 if (this.attr_("zoomCallback")) {
1718 var minDate
= this.rawData_
[0][0];
1719 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1720 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1726 * When the mouse moves in the canvas, display information about a nearby data
1727 * point and draw dots over those points in the data series. This function
1728 * takes care of cleanup of previously-drawn dots.
1729 * @param {Object} event The mousemove event from the browser.
1732 Dygraph
.prototype.mouseMove_
= function(event
) {
1733 // This prevents JS errors when mousing over the canvas before data loads.
1734 var points
= this.layout_
.points
;
1735 if (points
=== undefined
) return;
1737 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1742 // Loop through all the points and find the date nearest to our current
1744 var minDist
= 1e+100;
1746 for (var i
= 0; i
< points
.length
; i
++) {
1747 var point
= points
[i
];
1748 if (point
== null) continue;
1749 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1750 if (dist
> minDist
) continue;
1754 if (idx
>= 0) lastx
= points
[idx
].xval
;
1756 // Extract the points we've selected
1757 this.selPoints_
= [];
1758 var l
= points
.length
;
1759 if (!this.attr_("stackedGraph")) {
1760 for (var i
= 0; i
< l
; i
++) {
1761 if (points
[i
].xval
== lastx
) {
1762 this.selPoints_
.push(points
[i
]);
1766 // Need to 'unstack' points starting from the bottom
1767 var cumulative_sum
= 0;
1768 for (var i
= l
- 1; i
>= 0; i
--) {
1769 if (points
[i
].xval
== lastx
) {
1770 var p
= {}; // Clone the point since we modify it
1771 for (var k
in points
[i
]) {
1772 p
[k
] = points
[i
][k
];
1774 p
.yval
-= cumulative_sum
;
1775 cumulative_sum
+= p
.yval
;
1776 this.selPoints_
.push(p
);
1779 this.selPoints_
.reverse();
1782 if (this.attr_("highlightCallback")) {
1783 var px
= this.lastx_
;
1784 if (px
!== null && lastx
!= px
) {
1785 // only fire if the selected point has changed.
1786 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1790 // Save last x position for callbacks.
1791 this.lastx_
= lastx
;
1793 this.updateSelection_();
1797 * Transforms layout_.points index into data row number.
1798 * @param int layout_.points index
1799 * @return int row number, or -1 if none could be found.
1802 Dygraph
.prototype.idxToRow_
= function(idx
) {
1803 if (idx
< 0) return -1;
1805 for (var i
in this.layout_
.datasets
) {
1806 if (idx
< this.layout_
.datasets
[i
].length
) {
1807 return this.boundaryIds_
[0][0]+idx
;
1809 idx
-= this.layout_
.datasets
[i
].length
;
1816 * @param { Number } x The number to consider.
1817 * @return { Boolean } Whether the number is zero or NaN.
1819 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1820 Dygraph
.isOK
= function(x
) {
1821 return x
&& !isNaN(x
);
1826 * Generates HTML for the legend which is displayed when hovering over the
1827 * chart. If no selected points are specified, a default legend is returned
1828 * (this may just be the empty string).
1829 * @param { Number } [x] The x-value of the selected points.
1830 * @param { [Object] } [sel_points] List of selected points for the given
1831 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1833 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1834 // If no points are selected, we display a default legend. Traditionally,
1835 // this has been blank. But a better default would be a conventional legend,
1836 // which provides essential information for a non-interactive chart.
1837 if (typeof(x
) === 'undefined') {
1838 if (this.attr_('legend') != 'always') return '';
1840 var sepLines
= this.attr_('labelsSeparateLines');
1841 var labels
= this.attr_('labels');
1843 for (var i
= 1; i
< labels
.length
; i
++) {
1844 if (!this.visibility()[i
- 1]) continue;
1845 var c
= this.plotter_
.colors
[labels
[i
]];
1846 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1847 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1853 var html
= this.attr_('xValueFormatter')(x
) + ":";
1855 var fmtFunc
= this.attr_('yValueFormatter');
1856 var showZeros
= this.attr_("labelsShowZeroValues");
1857 var sepLines
= this.attr_("labelsSeparateLines");
1858 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1859 var pt
= this.selPoints_
[i
];
1860 if (pt
.yval
== 0 && !showZeros
) continue;
1861 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1862 if (sepLines
) html
+= "<br/>";
1864 var c
= this.plotter_
.colors
[pt
.name
];
1865 var yval
= fmtFunc(pt
.yval
, this);
1866 // TODO(danvk): use a template string here and make it an attribute.
1867 html
+= " <b><span style='color: " + c
+ ";'>"
1868 + pt
.name
+ "</span></b>:"
1876 * Displays information about the selected points in the legend. If there is no
1877 * selection, the legend will be cleared.
1878 * @param { Number } [x] The x-value of the selected points.
1879 * @param { [Object] } [sel_points] List of selected points for the given
1880 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1882 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1883 var html
= this.generateLegendHTML_(x
, sel_points
);
1884 var labelsDiv
= this.attr_("labelsDiv");
1885 if (labelsDiv
!== null) {
1886 labelsDiv
.innerHTML
= html
;
1888 if (typeof(this.shown_legend_error_
) == 'undefined') {
1889 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1890 this.shown_legend_error_
= true;
1896 * Draw dots over the selectied points in the data series. This function
1897 * takes care of cleanup of previously-drawn dots.
1900 Dygraph
.prototype.updateSelection_
= function() {
1901 // Clear the previously drawn vertical, if there is one
1902 var ctx
= this.canvas_ctx_
;
1903 if (this.previousVerticalX_
>= 0) {
1904 // Determine the maximum highlight circle size.
1905 var maxCircleSize
= 0;
1906 var labels
= this.attr_('labels');
1907 for (var i
= 1; i
< labels
.length
; i
++) {
1908 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1909 if (r
> maxCircleSize
) maxCircleSize
= r
;
1911 var px
= this.previousVerticalX_
;
1912 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1913 2 * maxCircleSize
+ 2, this.height_
);
1916 if (this.selPoints_
.length
> 0) {
1917 // Set the status message to indicate the selected point(s)
1918 if (this.attr_('showLabelsOnHighlight')) {
1919 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1922 // Draw colored circles over the center of each selected point
1923 var canvasx
= this.selPoints_
[0].canvasx
;
1925 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1926 var pt
= this.selPoints_
[i
];
1927 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1929 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1931 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1932 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1937 this.previousVerticalX_
= canvasx
;
1942 * Manually set the selected points and display information about them in the
1943 * legend. The selection can be cleared using clearSelection() and queried
1944 * using getSelection().
1945 * @param { Integer } row number that should be highlighted (i.e. appear with
1946 * hover dots on the chart). Set to false to clear any selection.
1948 Dygraph
.prototype.setSelection
= function(row
) {
1949 // Extract the points we've selected
1950 this.selPoints_
= [];
1953 if (row
!== false) {
1954 row
= row
-this.boundaryIds_
[0][0];
1957 if (row
!== false && row
>= 0) {
1958 for (var i
in this.layout_
.datasets
) {
1959 if (row
< this.layout_
.datasets
[i
].length
) {
1960 var point
= this.layout_
.points
[pos
+row
];
1962 if (this.attr_("stackedGraph")) {
1963 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1966 this.selPoints_
.push(point
);
1968 pos
+= this.layout_
.datasets
[i
].length
;
1972 if (this.selPoints_
.length
) {
1973 this.lastx_
= this.selPoints_
[0].xval
;
1974 this.updateSelection_();
1976 this.clearSelection();
1982 * The mouse has left the canvas. Clear out whatever artifacts remain
1983 * @param {Object} event the mouseout event from the browser.
1986 Dygraph
.prototype.mouseOut_
= function(event
) {
1987 if (this.attr_("unhighlightCallback")) {
1988 this.attr_("unhighlightCallback")(event
);
1991 if (this.attr_("hideOverlayOnMouseOut")) {
1992 this.clearSelection();
1997 * Clears the current selection (i.e. points that were highlighted by moving
1998 * the mouse over the chart).
2000 Dygraph
.prototype.clearSelection
= function() {
2001 // Get rid of the overlay data
2002 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2003 this.setLegendHTML_();
2004 this.selPoints_
= [];
2009 * Returns the number of the currently selected row. To get data for this row,
2010 * you can use the getValue method.
2011 * @return { Integer } row number, or -1 if nothing is selected
2013 Dygraph
.prototype.getSelection
= function() {
2014 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2018 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
2019 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
2020 return row
+ this.boundaryIds_
[0][0];
2027 * Number formatting function which mimicks the behavior of %g in printf, i.e.
2028 * either exponential or fixed format (without trailing 0s) is used depending on
2029 * the length of the generated string. The advantage of this format is that
2030 * there is a predictable upper bound on the resulting string length,
2031 * significant figures are not dropped, and normal numbers are not displayed in
2032 * exponential notation.
2034 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
2035 * It creates strings which are too long for absolute values between 10^-4 and
2036 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
2039 * @param {Number} x The number to format
2040 * @param {Number} opt_precision The precision to use, default 2.
2041 * @return {String} A string formatted like %g in printf. The max generated
2042 * string length should be precision + 6 (e.g 1.123e+300).
2044 Dygraph
.floatFormat
= function(x
, opt_precision
) {
2045 // Avoid invalid precision values; [1, 21] is the valid range.
2046 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
2048 // This is deceptively simple. The actual algorithm comes from:
2050 // Max allowed length = p + 4
2051 // where 4 comes from 'e+n' and '.'.
2053 // Length of fixed format = 2 + y + p
2054 // where 2 comes from '0.' and y = # of leading zeroes.
2056 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
2059 // Since the behavior of toPrecision() is identical for larger numbers, we
2060 // don't have to worry about the other bound.
2062 // Finally, the argument for toExponential() is the number of trailing digits,
2063 // so we take off 1 for the value before the '.'.
2064 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
2065 x
.toExponential(p
- 1) : x
.toPrecision(p
);
2070 * Return a string version of a number. This respects the digitsAfterDecimal
2071 * and maxNumberWidth options.
2072 * @param {Number} x The number to be formatted
2073 * @param {Dygraph} g The dygraph object
2075 Dygraph
.numberFormatter
= function(x
, g
) {
2076 var sigFigs
= g
.attr_('sigFigs');
2078 if (sigFigs
!== null) {
2079 // User has opted for a fixed number of significant figures.
2080 return Dygraph
.floatFormat(x
, sigFigs
);
2083 var digits
= g
.attr_('digitsAfterDecimal');
2084 var maxNumberWidth
= g
.attr_('maxNumberWidth');
2086 // switch to scientific notation if we underflow or overflow fixed display.
2088 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
2089 Math
.abs(x
) < Math
.pow(10, -digits
))) {
2090 return x
.toExponential(digits
);
2092 return '' + Dygraph
.round_(x
, digits
);
2098 * Converts '9' to '09' (useful for dates)
2100 Dygraph
.zeropad
= function(x
) {
2101 if (x
< 10) return "0" + x
; else return "" + x
;
2105 * Return a string version of the hours, minutes and seconds portion of a date.
2106 * @param {Number} date The JavaScript date (ms since epoch)
2107 * @return {String} A time of the form "HH:MM:SS"
2110 Dygraph
.hmsString_
= function(date
) {
2111 var zeropad
= Dygraph
.zeropad
;
2112 var d
= new Date(date
);
2113 if (d
.getSeconds()) {
2114 return zeropad(d
.getHours()) + ":" +
2115 zeropad(d
.getMinutes()) + ":" +
2116 zeropad(d
.getSeconds());
2118 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
2123 * Convert a JS date to a string appropriate to display on an axis that
2124 * is displaying values at the stated granularity.
2125 * @param {Date} date The date to format
2126 * @param {Number} granularity One of the Dygraph granularity constants
2127 * @return {String} The formatted date
2130 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
2131 if (granularity
>= Dygraph
.DECADAL
) {
2132 return date
.strftime('%Y');
2133 } else if (granularity
>= Dygraph
.MONTHLY
) {
2134 return date
.strftime('%b %y');
2136 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
2137 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
2138 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
2140 return Dygraph
.hmsString_(date
.getTime());
2146 * Convert a JS date (millis since epoch) to YYYY/MM/DD
2147 * @param {Number} date The JavaScript date (ms since epoch)
2148 * @return {String} A date of the form "YYYY/MM/DD"
2151 Dygraph
.dateString_
= function(date
) {
2152 var zeropad
= Dygraph
.zeropad
;
2153 var d
= new Date(date
);
2156 var year
= "" + d
.getFullYear();
2157 // Get a 0 padded month string
2158 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
2159 // Get a 0 padded day string
2160 var day
= zeropad(d
.getDate());
2163 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
2164 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
2166 return year
+ "/" + month + "/" + day
+ ret
;
2170 * Round a number to the specified number of digits past the decimal point.
2171 * @param {Number} num The number to round
2172 * @param {Number} places The number of decimals to which to round
2173 * @return {Number} The rounded number
2176 Dygraph
.round_
= function(num
, places
) {
2177 var shift
= Math
.pow(10, places
);
2178 return Math
.round(num
* shift
)/shift
;
2182 * Fires when there's data available to be graphed.
2183 * @param {String} data Raw CSV data to be plotted
2186 Dygraph
.prototype.loadedEvent_
= function(data
) {
2187 this.rawData_
= this.parseCSV_(data
);
2191 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
2192 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
2193 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
2196 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2199 Dygraph
.prototype.addXTicks_
= function() {
2200 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2202 if (this.dateWindow_
) {
2203 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2205 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
2208 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
2209 this.layout_
.setXTicks(xTicks
);
2212 // Time granularity enumeration
2213 Dygraph
.SECONDLY
= 0;
2214 Dygraph
.TWO_SECONDLY
= 1;
2215 Dygraph
.FIVE_SECONDLY
= 2;
2216 Dygraph
.TEN_SECONDLY
= 3;
2217 Dygraph
.THIRTY_SECONDLY
= 4;
2218 Dygraph
.MINUTELY
= 5;
2219 Dygraph
.TWO_MINUTELY
= 6;
2220 Dygraph
.FIVE_MINUTELY
= 7;
2221 Dygraph
.TEN_MINUTELY
= 8;
2222 Dygraph
.THIRTY_MINUTELY
= 9;
2223 Dygraph
.HOURLY
= 10;
2224 Dygraph
.TWO_HOURLY
= 11;
2225 Dygraph
.SIX_HOURLY
= 12;
2227 Dygraph
.WEEKLY
= 14;
2228 Dygraph
.MONTHLY
= 15;
2229 Dygraph
.QUARTERLY
= 16;
2230 Dygraph
.BIANNUAL
= 17;
2231 Dygraph
.ANNUAL
= 18;
2232 Dygraph
.DECADAL
= 19;
2233 Dygraph
.CENTENNIAL
= 20;
2234 Dygraph
.NUM_GRANULARITIES
= 21;
2236 Dygraph
.SHORT_SPACINGS
= [];
2237 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
2238 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
2239 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
2240 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
2241 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
2242 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
2243 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
2244 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
2245 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
2246 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
2247 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
2248 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
2249 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
2250 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
2251 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
2255 * If we used this time granularity, how many ticks would there be?
2256 * This is only an approximation, but it's generally good enough.
2258 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2259 if (granularity
< Dygraph
.MONTHLY
) {
2260 // Generate one tick mark for every fixed interval of time.
2261 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2262 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2264 var year_mod
= 1; // e.g. to only print one point every 10 years.
2265 var num_months
= 12;
2266 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2267 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2268 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2269 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2270 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2272 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2273 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2274 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2281 * Construct an x-axis of nicely-formatted times on meaningful boundaries
2282 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2284 * Returns an array containing {v: millis, label: label} dictionaries.
2286 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2287 var formatter
= this.attr_("xAxisLabelFormatter");
2289 if (granularity
< Dygraph
.MONTHLY
) {
2290 // Generate one tick mark for every fixed interval of time.
2291 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2292 var format
= '%d%b'; // e.g. "1Jan"
2294 // Find a time less than start_time which occurs on a "nice" time boundary
2295 // for this granularity.
2296 var g
= spacing
/ 1000;
2297 var d
= new Date(start_time
);
2298 if (g
<= 60) { // seconds
2299 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2303 if (g
<= 60) { // minutes
2304 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2309 if (g
<= 24) { // days
2310 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2315 if (g
== 7) { // one week
2316 d
.setDate(d
.getDate() - d
.getDay());
2321 start_time
= d
.getTime();
2323 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2324 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2327 // Display a tick mark on the first of a set of months of each year.
2328 // Years get a tick mark iff y % year_mod == 0. This is useful for
2329 // displaying a tick mark once every 10 years, say, on long time scales.
2331 var year_mod
= 1; // e.g. to only print one point every 10 years.
2333 if (granularity
== Dygraph
.MONTHLY
) {
2334 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2335 } else if (granularity
== Dygraph
.QUARTERLY
) {
2336 months
= [ 0, 3, 6, 9 ];
2337 } else if (granularity
== Dygraph
.BIANNUAL
) {
2339 } else if (granularity
== Dygraph
.ANNUAL
) {
2341 } else if (granularity
== Dygraph
.DECADAL
) {
2344 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2348 this.warn("Span of dates is too long");
2351 var start_year
= new Date(start_time
).getFullYear();
2352 var end_year
= new Date(end_time
).getFullYear();
2353 var zeropad
= Dygraph
.zeropad
;
2354 for (var i
= start_year
; i
<= end_year
; i
++) {
2355 if (i
% year_mod
!= 0) continue;
2356 for (var j
= 0; j
< months
.length
; j
++) {
2357 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2358 var t
= Dygraph
.dateStrToMillis(date_str
);
2359 if (t
< start_time
|| t
> end_time
) continue;
2360 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2370 * Add ticks to the x-axis based on a date range.
2371 * @param {Number} startDate Start of the date window (millis since epoch)
2372 * @param {Number} endDate End of the date window (millis since epoch)
2373 * @param {Dygraph} self The dygraph object
2374 * @return { [Object] } Array of {label, value} tuples.
2377 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2378 // TODO(danvk): why does this take 'self' as a param?
2380 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2381 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2382 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2389 return self
.GetXAxis(startDate
, endDate
, chosen
);
2391 // TODO(danvk): signal error.
2397 * This is a list of human-friendly values at which to show tick marks on a log
2398 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2399 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2400 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2402 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2404 for (var power
= -39; power
<= 39; power
++) {
2405 var range
= Math
.pow(10, power
);
2406 for (var mult
= 1; mult
<= 9; mult
++) {
2407 var val
= range
* mult
;
2416 * Implementation of binary search over an array.
2417 * Currently does not work when val is outside the range of arry's values.
2418 * @param { Integer } val the value to search for
2419 * @param { Integer[] } arry is the value over which to search
2420 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2421 * If abs < 0, find the highest entry less than val.
2422 * if abs == 0, find the entry that equals val.
2423 * @param { Integer } [low] The first index in arry to consider (optional)
2424 * @param { Integer } [high] The last index in arry to consider (optional)
2426 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2427 if (low
== null || high
== null) {
2429 high
= arry
.length
- 1;
2437 var validIndex
= function(idx
) {
2438 return idx
>= 0 && idx
< arry
.length
;
2440 var mid
= parseInt((low
+ high
) / 2);
2441 var element
= arry
[mid
];
2442 if (element
== val
) {
2445 if (element
> val
) {
2447 // Accept if element > val, but also if prior element < val.
2449 if (validIndex(idx
) && arry
[idx
] < val
) {
2453 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2455 if (element
< val
) {
2457 // Accept if element < val, but also if prior element > val.
2459 if (validIndex(idx
) && arry
[idx
] > val
) {
2463 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2467 // TODO(konigsberg): Update comment.
2469 * Add ticks when the x axis has numbers on it (instead of dates)
2471 * @param {Number} minV minimum value
2472 * @param {Number} maxV maximum value
2474 * @param {function} attribute accessor function.
2475 * @return {[Object]} Array of {label, value} tuples.
2477 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2478 var attr
= function(k
) {
2479 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2480 return self
.attr_(k
);
2485 for (var i
= 0; i
< vals
.length
; i
++) {
2486 ticks
.push({v
: vals
[i
]});
2489 if (axis_props
&& attr("logscale")) {
2490 var pixelsPerTick
= attr('pixelsPerYLabel');
2491 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2492 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2493 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2494 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2499 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2501 // Count the number of tick values would appear, if we can get at least
2502 // nTicks / 4 accept them
.
2503 var lastDisplayed
= null;
2504 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2505 var axisId
= axis_props
.yAxisId
;
2506 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2507 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2508 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2509 var tick
= { v
: tickValue
};
2510 if (lastDisplayed
== null) {
2512 tickValue
: tickValue
,
2516 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2518 tickValue
: tickValue
,
2527 // Since we went in backwards order.
2532 // ticks.length won't be 0 if the log scale function finds values to insert.
2533 if (ticks
.length
== 0) {
2535 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2536 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2537 // The first spacing greater than pixelsPerYLabel is what we use.
2538 // TODO(danvk): version that works on a log scale.
2539 if (attr("labelsKMG2")) {
2540 var mults
= [1, 2, 4, 8];
2542 var mults
= [1, 2, 5];
2544 var scale
, low_val
, high_val
, nTicks
;
2545 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2546 var pixelsPerTick
= attr('pixelsPerYLabel');
2547 for (var i
= -10; i
< 50; i
++) {
2548 if (attr("labelsKMG2")) {
2549 var base_scale
= Math
.pow(16, i
);
2551 var base_scale
= Math
.pow(10, i
);
2553 for (var j
= 0; j
< mults
.length
; j
++) {
2554 scale
= base_scale
* mults
[j
];
2555 low_val
= Math
.floor(minV
/ scale
) * scale
;
2556 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2557 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2558 var spacing
= self
.height_
/ nTicks
;
2559 // wish I could break out of both loops at once...
2560 if (spacing
> pixelsPerTick
) break;
2562 if (spacing
> pixelsPerTick
) break;
2565 // Construct the set of ticks.
2566 // Allow reverse y-axis if it's explicitly requested.
2567 if (low_val
> high_val
) scale
*= -1;
2568 for (var i
= 0; i
< nTicks
; i
++) {
2569 var tickV
= low_val
+ i
* scale
;
2570 ticks
.push( {v
: tickV
} );
2575 // Add formatted labels to the ticks.
2578 if (attr("labelsKMB")) {
2580 k_labels
= [ "K", "M", "B", "T" ];
2582 if (attr("labelsKMG2")) {
2583 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2585 k_labels
= [ "k", "M", "G", "T" ];
2587 var formatter
= attr('yAxisLabelFormatter') ?
2588 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2590 // Add labels to the ticks.
2591 for (var i
= 0; i
< ticks
.length
; i
++) {
2592 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2593 var tickV
= ticks
[i
].v
;
2594 var absTickV
= Math
.abs(tickV
);
2595 var label
= formatter(tickV
, self
);
2596 if (k_labels
.length
> 0) {
2597 // Round up to an appropriate unit.
2599 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2600 if (absTickV
>= n
) {
2601 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
2606 ticks
[i
].label
= label
;
2614 * Computes the range of the data series (including confidence intervals).
2615 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2616 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2617 * @return [low, high]
2619 Dygraph
.prototype.extremeValues_
= function(series
) {
2620 var minY
= null, maxY
= null;
2622 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2624 // With custom bars, maxY is the max of the high values.
2625 for (var j
= 0; j
< series
.length
; j
++) {
2626 var y
= series
[j
][1][0];
2628 var low
= y
- series
[j
][1][1];
2629 var high
= y
+ series
[j
][1][2];
2630 if (low
> y
) low
= y
; // this can happen with custom bars,
2631 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2632 if (maxY
== null || high
> maxY
) {
2635 if (minY
== null || low
< minY
) {
2640 for (var j
= 0; j
< series
.length
; j
++) {
2641 var y
= series
[j
][1];
2642 if (y
=== null || isNaN(y
)) continue;
2643 if (maxY
== null || y
> maxY
) {
2646 if (minY
== null || y
< minY
) {
2652 return [minY
, maxY
];
2657 * This function is called once when the chart's data is changed or the options
2658 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2659 * idea is that values derived from the chart's data can be computed here,
2660 * rather than every time the chart is drawn. This includes things like the
2661 * number of axes, rolling averages, etc.
2663 Dygraph
.prototype.predraw_
= function() {
2664 // TODO(danvk): move more computations out of drawGraph_ and into here.
2665 this.computeYAxes_();
2667 // Create a new plotter.
2668 if (this.plotter_
) this.plotter_
.clear();
2669 this.plotter_
= new DygraphCanvasRenderer(this,
2674 // The roller sits in the bottom left corner of the chart. We don't know where
2675 // this will be until the options are available, so it's positioned here.
2676 this.createRollInterface_();
2678 // Same thing applies for the labelsDiv. It's right edge should be flush with
2679 // the right edge of the charting area (which may not be the same as the right
2680 // edge of the div, if we have two y-axes.
2681 this.positionLabelsDiv_();
2683 // If the data or options have changed, then we'd better redraw.
2688 * Update the graph with new data. This method is called when the viewing area
2689 * has changed. If the underlying data or options have changed, predraw_ will
2690 * be called before drawGraph_ is called.
2692 * clearSelection, when undefined or true, causes this.clearSelection to be
2693 * called at the end of the draw operation. This should rarely be defined,
2694 * and never true (that is it should be undefined most of the time, and
2699 Dygraph
.prototype.drawGraph_
= function(clearSelection
) {
2700 if (typeof(clearSelection
) === 'undefined') {
2701 clearSelection
= true;
2704 var data
= this.rawData_
;
2706 // This is used to set the second parameter to drawCallback, below.
2707 var is_initial_draw
= this.is_initial_draw_
;
2708 this.is_initial_draw_
= false;
2710 var minY
= null, maxY
= null;
2711 this.layout_
.removeAllDatasets();
2713 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2715 // Loop over the fields (series). Go from the last to the first,
2716 // because if they're stacked that's how we accumulate the values.
2718 var cumulative_y
= []; // For stacked series.
2721 var extremes
= {}; // series name -> [low, high]
2723 // Loop over all fields and create datasets
2724 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2725 if (!this.visibility()[i
- 1]) continue;
2727 var seriesName
= this.attr_("labels")[i
];
2728 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2729 var logScale
= this.attr_('logscale', i
);
2732 for (var j
= 0; j
< data
.length
; j
++) {
2733 var date
= data
[j
][0];
2734 var point
= data
[j
][i
];
2736 // On the log scale, points less than zero do not exist.
2737 // This will create a gap in the chart. Note that this ignores
2738 // connectSeparatedPoints.
2742 series
.push([date
, point
]);
2744 if (point
!= null || !connectSeparatedPoints
) {
2745 series
.push([date
, point
]);
2750 // TODO(danvk): move this into predraw_. It's insane to do it here.
2751 series
= this.rollingAverage(series
, this.rollPeriod_
);
2753 // Prune down to the desired range, if necessary (for zooming)
2754 // Because there can be lines going to points outside of the visible area,
2755 // we actually prune to visible points, plus one on either side.
2756 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2757 if (this.dateWindow_
) {
2758 var low
= this.dateWindow_
[0];
2759 var high
= this.dateWindow_
[1];
2761 // TODO(danvk): do binary search instead of linear search.
2762 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2763 var firstIdx
= null, lastIdx
= null;
2764 for (var k
= 0; k
< series
.length
; k
++) {
2765 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2768 if (series
[k
][0] <= high
) {
2772 if (firstIdx
=== null) firstIdx
= 0;
2773 if (firstIdx
> 0) firstIdx
--;
2774 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2775 if (lastIdx
< series
.length
- 1) lastIdx
++;
2776 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2777 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2778 pruned
.push(series
[k
]);
2782 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2785 var seriesExtremes
= this.extremeValues_(series
);
2788 for (var j
=0; j
<series
.length
; j
++) {
2789 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2792 } else if (this.attr_("stackedGraph")) {
2793 var l
= series
.length
;
2795 for (var j
= 0; j
< l
; j
++) {
2796 // If one data set has a NaN, let all subsequent stacked
2797 // sets inherit the NaN -- only start at 0 for the first set.
2798 var x
= series
[j
][0];
2799 if (cumulative_y
[x
] === undefined
) {
2800 cumulative_y
[x
] = 0;
2803 actual_y
= series
[j
][1];
2804 cumulative_y
[x
] += actual_y
;
2806 series
[j
] = [x
, cumulative_y
[x
]]
2808 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2809 seriesExtremes
[1] = cumulative_y
[x
];
2811 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2812 seriesExtremes
[0] = cumulative_y
[x
];
2816 extremes
[seriesName
] = seriesExtremes
;
2818 datasets
[i
] = series
;
2821 for (var i
= 1; i
< datasets
.length
; i
++) {
2822 if (!this.visibility()[i
- 1]) continue;
2823 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2826 this.computeYAxisRanges_(extremes
);
2827 this.layout_
.setYAxes(this.axes_
);
2831 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2832 var tmp_zoomed_x
= this.zoomed_x_
;
2833 // Tell PlotKit to use this new data and render itself
2834 this.layout_
.setDateWindow(this.dateWindow_
);
2835 this.zoomed_x_
= tmp_zoomed_x
;
2836 this.layout_
.evaluateWithError();
2837 this.plotter_
.clear();
2838 this.plotter_
.render();
2839 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2840 this.canvas_
.height
);
2842 if (is_initial_draw
) {
2843 // Generate a static legend before any particular point is selected.
2844 this.setLegendHTML_();
2846 if (clearSelection
) {
2847 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2848 // We should select the point nearest the page x/y here
, but it
's easier
2849 // to just clear the selection. This prevents erroneous hover dots from
2851 this.clearSelection();
2853 this.clearSelection();
2858 if (this.attr_("drawCallback") !== null) {
2859 this.attr_("drawCallback")(this, is_initial_draw);
2865 * Determine properties of the y-axes which are independent of the data
2866 * currently being displayed. This includes things like the number of axes and
2867 * the style of the axes. It does not include the range of each axis and its
2869 * This fills in this.axes_ and this.seriesToAxisMap_.
2870 * axes_ = [ { options } ]
2871 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2872 * indices are into the axes_ array.
2874 Dygraph.prototype.computeYAxes_ = function() {
2875 // Preserve valueWindow settings if they exist, and if the user hasn't
2876 // specified a new valueRange.
2878 if (this.axes_
!= undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") == false) {
2880 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2881 valueWindows
.push(this.axes_
[index
].valueWindow
);
2886 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2887 this.seriesToAxisMap_
= {};
2889 // Get a list of series names.
2890 var labels
= this.attr_("labels");
2892 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2894 // all options which could be applied per-axis:
2902 'axisLabelFontSize',
2907 // Copy global axis options over to the first axis.
2908 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2909 var k
= axisOptions
[i
];
2910 var v
= this.attr_(k
);
2911 if (v
) this.axes_
[0][k
] = v
;
2914 // Go through once and add all the axes.
2915 for (var seriesName
in series
) {
2916 if (!series
.hasOwnProperty(seriesName
)) continue;
2917 var axis
= this.attr_("axis", seriesName
);
2919 this.seriesToAxisMap_
[seriesName
] = 0;
2922 if (typeof(axis
) == 'object') {
2923 // Add a new axis, making a copy of its per-axis options.
2925 Dygraph
.update(opts
, this.axes_
[0]);
2926 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2927 var yAxisId
= this.axes_
.length
;
2928 opts
.yAxisId
= yAxisId
;
2930 Dygraph
.update(opts
, axis
);
2931 this.axes_
.push(opts
);
2932 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2936 // Go through one more time and assign series to an axis defined by another
2937 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2938 for (var seriesName
in series
) {
2939 if (!series
.hasOwnProperty(seriesName
)) continue;
2940 var axis
= this.attr_("axis", seriesName
);
2941 if (typeof(axis
) == 'string') {
2942 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2943 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2944 "series " + axis
+ ", which does not define its own axis.");
2947 var idx
= this.seriesToAxisMap_
[axis
];
2948 this.seriesToAxisMap_
[seriesName
] = idx
;
2952 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2953 // this last so that hiding the first series doesn't destroy the axis
2954 // properties of the primary axis.
2955 var seriesToAxisFiltered
= {};
2956 var vis
= this.visibility();
2957 for (var i
= 1; i
< labels
.length
; i
++) {
2959 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2961 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2963 if (valueWindows
!= undefined
) {
2964 // Restore valueWindow settings.
2965 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2966 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2972 * Returns the number of y-axes on the chart.
2973 * @return {Number} the number of axes.
2975 Dygraph
.prototype.numAxes
= function() {
2977 for (var series
in this.seriesToAxisMap_
) {
2978 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2979 var idx
= this.seriesToAxisMap_
[series
];
2980 if (idx
> last_axis
) last_axis
= idx
;
2982 return 1 + last_axis
;
2987 * Returns axis properties for the given series.
2988 * @param { String } setName The name of the series for which to get axis
2989 * properties, e.g. 'Y1'.
2990 * @return { Object } The axis properties.
2992 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2993 // TODO(danvk): handle errors.
2994 return this.axes_
[this.seriesToAxisMap_
[series
]];
2999 * Determine the value range and tick marks for each axis.
3000 * @param {Object} extremes A mapping from seriesName -> [low, high]
3001 * This fills in the valueRange and ticks fields in each entry of this.axes_.
3003 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
3004 // Build a map from axis number -> [list of series names]
3005 var seriesForAxis
= [];
3006 for (var series
in this.seriesToAxisMap_
) {
3007 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
3008 var idx
= this.seriesToAxisMap_
[series
];
3009 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
3010 seriesForAxis
[idx
].push(series
);
3013 // Compute extreme values, a span and tick marks for each axis.
3014 for (var i
= 0; i
< this.axes_
.length
; i
++) {
3015 var axis
= this.axes_
[i
];
3017 if (!seriesForAxis
[i
]) {
3018 // If no series are defined or visible then use a reasonable default
3019 axis
.extremeRange
= [0, 1];
3021 // Calculate the extremes of extremes.
3022 var series
= seriesForAxis
[i
];
3023 var minY
= Infinity
; // extremes[series[0]][0];
3024 var maxY
= -Infinity
; // extremes[series[0]][1];
3025 var extremeMinY
, extremeMaxY
;
3026 for (var j
= 0; j
< series
.length
; j
++) {
3027 // Only use valid extremes to stop null data series' from corrupting the scale.
3028 extremeMinY
= extremes
[series
[j
]][0];
3029 if (extremeMinY
!= null) {
3030 minY
= Math
.min(extremeMinY
, minY
);
3032 extremeMaxY
= extremes
[series
[j
]][1];
3033 if (extremeMaxY
!= null) {
3034 maxY
= Math
.max(extremeMaxY
, maxY
);
3037 if (axis
.includeZero
&& minY
> 0) minY
= 0;
3039 // Ensure we have a valid scale, otherwise defualt to zero for safety.
3040 if (minY
== Infinity
) minY
= 0;
3041 if (maxY
== -Infinity
) maxY
= 0;
3043 // Add some padding and round up to an integer to be human-friendly.
3044 var span
= maxY
- minY
;
3045 // special case: if we have no sense of scale, use +/-10% of the sole value
.
3046 if (span
== 0) { span
= maxY
; }
3050 if (axis
.logscale
) {
3051 var maxAxisY
= maxY
+ 0.1 * span
;
3052 var minAxisY
= minY
;
3054 var maxAxisY
= maxY
+ 0.1 * span
;
3055 var minAxisY
= minY
- 0.1 * span
;
3057 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
3058 if (!this.attr_("avoidMinZero")) {
3059 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
3060 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
3063 if (this.attr_("includeZero")) {
3064 if (maxY
< 0) maxAxisY
= 0;
3065 if (minY
> 0) minAxisY
= 0;
3068 axis
.extremeRange
= [minAxisY
, maxAxisY
];
3070 if (axis
.valueWindow
) {
3071 // This is only set if the user has zoomed on the y-axis. It is never set
3072 // by a user. It takes precedence over axis.valueRange because, if you set
3073 // valueRange, you'd still expect to be able to pan.
3074 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
3075 } else if (axis
.valueRange
) {
3076 // This is a user-set value range for this axis.
3077 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
3079 axis
.computedValueRange
= axis
.extremeRange
;
3082 // Add ticks. By default, all axes inherit the tick positions of the
3083 // primary axis. However, if an axis is specifically marked as having
3084 // independent ticks, then that is permissible as well.
3085 if (i
== 0 || axis
.independentTicks
) {
3087 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3088 axis
.computedValueRange
[1],
3092 var p_axis
= this.axes_
[0];
3093 var p_ticks
= p_axis
.ticks
;
3094 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
3095 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
3096 var tick_values
= [];
3097 for (var i
= 0; i
< p_ticks
.length
; i
++) {
3098 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
3099 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
3100 tick_values
.push(y_val
);
3104 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3105 axis
.computedValueRange
[1],
3106 this, axis
, tick_values
);
3113 * Calculates the rolling average of a data set.
3114 * If originalData is [label, val], rolls the average of those.
3115 * If originalData is [label, [, it's interpreted as [value, stddev]
3116 * and the roll is returned in the same form, with appropriately reduced
3117 * stddev for each value.
3118 * Note that this is where fractional input (i.e. '5/10') is converted into
3120 * @param {Array} originalData The data in the appropriate format (see above)
3121 * @param {Number} rollPeriod The number of points over which to average the
3124 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
3125 if (originalData
.length
< 2)
3126 return originalData
;
3127 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
3128 var rollingData
= [];
3129 var sigma
= this.attr_("sigma");
3131 if (this.fractions_
) {
3133 var den
= 0; // numerator/denominator
3135 for (var i
= 0; i
< originalData
.length
; i
++) {
3136 num
+= originalData
[i
][1][0];
3137 den
+= originalData
[i
][1][1];
3138 if (i
- rollPeriod
>= 0) {
3139 num
-= originalData
[i
- rollPeriod
][1][0];
3140 den
-= originalData
[i
- rollPeriod
][1][1];
3143 var date
= originalData
[i
][0];
3144 var value
= den
? num
/ den
: 0.0;
3145 if (this.attr_("errorBars")) {
3146 if (this.wilsonInterval_
) {
3147 // For more details on this confidence interval, see:
3148 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
3150 var p
= value
< 0 ? 0 : value
, n
= den
;
3151 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
3152 var denom
= 1 + sigma
* sigma
/ den
;
3153 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
3154 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
3155 rollingData
[i
] = [date
,
3156 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
3158 rollingData
[i
] = [date
, [0, 0, 0]];
3161 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
3162 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
3165 rollingData
[i
] = [date
, mult
* value
];
3168 } else if (this.attr_("customBars")) {
3173 for (var i
= 0; i
< originalData
.length
; i
++) {
3174 var data
= originalData
[i
][1];
3176 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
3178 if (y
!= null && !isNaN(y
)) {
3184 if (i
- rollPeriod
>= 0) {
3185 var prev
= originalData
[i
- rollPeriod
];
3186 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
3193 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
3194 1.0 * (mid
- low
) / count
,
3195 1.0 * (high
- mid
) / count
]];
3198 // Calculate the rolling average for the first rollPeriod - 1 points where
3199 // there is not enough data to roll over the full number of points
3200 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
3201 if (!this.attr_("errorBars")){
3202 if (rollPeriod
== 1) {
3203 return originalData
;
3206 for (var i
= 0; i
< originalData
.length
; i
++) {
3209 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3210 var y
= originalData
[j
][1];
3211 if (y
== null || isNaN(y
)) continue;
3213 sum
+= originalData
[j
][1];
3216 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
3218 rollingData
[i
] = [originalData
[i
][0], null];
3223 for (var i
= 0; i
< originalData
.length
; i
++) {
3227 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3228 var y
= originalData
[j
][1][0];
3229 if (y
== null || isNaN(y
)) continue;
3231 sum
+= originalData
[j
][1][0];
3232 variance
+= Math
.pow(originalData
[j
][1][1], 2);
3235 var stddev
= Math
.sqrt(variance
) / num_ok
;
3236 rollingData
[i
] = [originalData
[i
][0],
3237 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
3239 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
3250 * Parses a date, returning the number of milliseconds since epoch. This can be
3251 * passed in as an xValueParser in the Dygraph constructor.
3252 * TODO(danvk): enumerate formats that this understands.
3253 * @param {String} A date in YYYYMMDD format.
3254 * @return {Number} Milliseconds since epoch.
3256 Dygraph
.dateParser
= function(dateStr
, self
) {
3259 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3260 dateStrSlashed
= dateStr
.replace("-", "/", "g");
3261 while (dateStrSlashed
.search("-") != -1) {
3262 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
3264 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3265 } else if (dateStr
.length
== 8) { // e.g. '20090712'
3266 // TODO(danvk): remove support for this format. It's confusing.
3267 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
3268 + "/" + dateStr
.substr(6,2);
3269 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3271 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3272 // "2009/07/12 12:34:56"
3273 d
= Dygraph
.dateStrToMillis(dateStr
);
3276 if (!d
|| isNaN(d
)) {
3277 self
.error("Couldn't parse " + dateStr
+ " as a date");
3283 * Detects the type of the str (date or numeric) and sets the various
3284 * formatting attributes in this.attrs_ based on this type.
3285 * @param {String} str An x value.
3288 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3290 if (str
.indexOf('-') > 0 ||
3291 str
.indexOf('/') >= 0 ||
3292 isNaN(parseFloat(str
))) {
3294 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3295 // TODO(danvk): remove support for this format.
3300 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3301 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3302 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3303 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3305 // TODO(danvk): use Dygraph.numberFormatter here?
3306 /** @private (shut up, jsdoc!) */
3307 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3308 /** @private (shut up, jsdoc!) */
3309 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3310 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3311 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3316 * Parses the value as a floating point number. This is like the parseFloat()
3317 * built-in, but with a few differences:
3318 * - the empty string is parsed as null, rather than NaN.
3319 * - if the string cannot be parsed at all, an error is logged.
3320 * If the string can't be parsed, this method returns null.
3321 * @param {String} x The string to be parsed
3322 * @param {Number} opt_line_no The line number from which the string comes.
3323 * @param {String} opt_line The text of the line from which the string comes.
3327 // Parse the x as a float or return null if it's not a number.
3328 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3329 var val
= parseFloat(x
);
3330 if (!isNaN(val
)) return val
;
3332 // Try to figure out what happeend.
3333 // If the value is the empty string, parse it as null.
3334 if (/^ *$/.test(x
)) return null;
3336 // If it was actually "NaN", return it as NaN.
3337 if (/^ *nan *$/i.test(x
)) return NaN
;
3339 // Looks like a parsing error.
3340 var msg
= "Unable to parse '" + x
+ "' as a number";
3341 if (opt_line
!== null && opt_line_no
!== null) {
3342 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3351 * Parses a string in a special csv format. We expect a csv file where each
3352 * line is a date point, and the first field in each line is the date string.
3353 * We also expect that all remaining fields represent series.
3354 * if the errorBars attribute is set, then interpret the fields as:
3355 * date, series1, stddev1, series2, stddev2, ...
3356 * @param {[Object]} data See above.
3358 * @return [Object] An array with one entry for each row. These entries
3359 * are an array of cells in that row. The first entry is the parsed x-value for
3360 * the row. The second, third, etc. are the y-values. These can take on one of
3361 * three forms, depending on the CSV and constructor parameters:
3363 * 2. [ value, stddev ]
3364 * 3. [ low value, center value, high value ]
3366 Dygraph
.prototype.parseCSV_
= function(data
) {
3368 var lines
= data
.split("\n");
3370 // Use the default delimiter or fall back to a tab if that makes sense.
3371 var delim
= this.attr_('delimiter');
3372 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3377 if (!('labels' in this.user_attrs_
)) {
3378 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3380 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3385 var defaultParserSet
= false; // attempt to auto-detect x value type
3386 var expectedCols
= this.attr_("labels").length
;
3387 var outOfOrder
= false;
3388 for (var i
= start
; i
< lines
.length
; i
++) {
3389 var line
= lines
[i
];
3391 if (line
.length
== 0) continue; // skip blank lines
3392 if (line
[0] == '#') continue; // skip comment lines
3393 var inFields
= line
.split(delim
);
3394 if (inFields
.length
< 2) continue;
3397 if (!defaultParserSet
) {
3398 this.detectTypeFromString_(inFields
[0]);
3399 xParser
= this.attr_("xValueParser");
3400 defaultParserSet
= true;
3402 fields
[0] = xParser(inFields
[0], this);
3404 // If fractions are expected, parse the numbers as "A/B
"
3405 if (this.fractions_) {
3406 for (var j = 1; j < inFields.length; j++) {
3407 // TODO(danvk): figure out an appropriate way to flag parse errors.
3408 var vals = inFields[j].split("/");
3409 if (vals.length != 2) {
3410 this.error('Expected fractional "num
/den
" values in CSV data ' +
3411 "but found a value
'" + inFields[j] + "' on line
" +
3412 (1 + i) + " ('" + line + "') which is not of
this form
.");
3415 fields[j] = [this.parseFloat_(vals[0], i, line),
3416 this.parseFloat_(vals[1], i, line)];
3419 } else if (this.attr_("errorBars
")) {
3420 // If there are error bars, values are (value, stddev) pairs
3421 if (inFields.length % 2 != 1) {
3422 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3423 'but line ' + (1 + i) + ' has an odd number of values (' +
3424 (inFields.length - 1) + "): '" + line + "'");
3426 for (var j = 1; j < inFields.length; j += 2) {
3427 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3428 this.parseFloat_(inFields[j + 1], i, line)];
3430 } else if (this.attr_("customBars
")) {
3431 // Bars are a low;center;high tuple
3432 for (var j = 1; j < inFields.length; j++) {
3433 var val = inFields[j];
3434 if (/^ *$/.test(val)) {
3435 fields[j] = [null, null, null];
3437 var vals = val.split(";");
3438 if (vals.length == 3) {
3439 fields[j] = [ this.parseFloat_(vals[0], i, line),
3440 this.parseFloat_(vals[1], i, line),
3441 this.parseFloat_(vals[2], i, line) ];
3443 this.warning('When using customBars, values must be either blank ' +
3444 'or "low
;center
;high
" tuples (got "' + val +
3445 '" on line ' + (1+i));
3450 // Values are just numbers
3451 for (var j = 1; j < inFields.length; j++) {
3452 fields[j] = this.parseFloat_(inFields[j], i, line);
3455 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3459 if (fields.length != expectedCols) {
3460 this.error("Number of columns
in line
" + i + " (" + fields.length +
3461 ") does not agree
with number of
labels (" + expectedCols +
3465 // If the user specified the 'labels' option and none of the cells of the
3466 // first row parsed correctly, then they probably double-specified the
3467 // labels. We go with the values set in the option, discard this row and
3468 // log a warning to the JS console.
3469 if (i == 0 && this.attr_('labels')) {
3470 var all_null = true;
3471 for (var j = 0; all_null && j < fields.length; j++) {
3472 if (fields[j]) all_null = false;
3475 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3476 "CSV
data ('" + line + "') appears to also contain labels
. " +
3477 "Will drop the CSV labels and
use the option labels
.");
3485 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3486 ret.sort(function(a,b) { return a[0] - b[0] });
3494 * The user has provided their data as a pre-packaged JS array. If the x values
3495 * are numeric, this is the same as dygraphs' internal format. If the x values
3496 * are dates, we need to convert them from Date objects to ms since epoch.
3497 * @param {[Object]} data
3498 * @return {[Object]} data with numeric x values.
3500 Dygraph.prototype.parseArray_ = function(data) {
3501 // Peek at the first x value to see if it's numeric.
3502 if (data.length == 0) {
3503 this.error("Can
't plot empty data set");
3506 if (data[0].length == 0) {
3507 this.error("Data set cannot contain an empty row");
3511 if (this.attr_("labels") == null) {
3512 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3513 "in the options parameter");
3514 this.attrs_.labels = [ "X" ];
3515 for (var i = 1; i < data[0].length; i++) {
3516 this.attrs_.labels.push("Y" + i);
3520 if (Dygraph.isDateLike(data[0][0])) {
3521 // Some intelligent defaults for a date x-axis.
3522 this.attrs_.xValueFormatter = Dygraph.dateString_;
3523 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3524 this.attrs_.xTicker = Dygraph.dateTicker;
3526 // Assume they're all dates
.
3527 var parsedData
= Dygraph
.clone(data
);
3528 for (var i
= 0; i
< data
.length
; i
++) {
3529 if (parsedData
[i
].length
== 0) {
3530 this.error("Row " + (1 + i
) + " of data is empty");
3533 if (parsedData
[i
][0] == null
3534 || typeof(parsedData
[i
][0].getTime
) != 'function'
3535 || isNaN(parsedData
[i
][0].getTime())) {
3536 this.error("x value in row " + (1 + i
) + " is not a Date");
3539 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3543 // Some intelligent defaults for a numeric x-axis.
3544 /** @private (shut up, jsdoc!) */
3545 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3546 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3552 * Parses a DataTable object from gviz.
3553 * The data is expected to have a first column that is either a date or a
3554 * number. All subsequent columns must be numbers. If there is a clear mismatch
3555 * between this.xValueParser_ and the type of the first column, it will be
3556 * fixed. Fills out rawData_.
3557 * @param {[Object]} data See above.
3560 Dygraph
.prototype.parseDataTable_
= function(data
) {
3561 var cols
= data
.getNumberOfColumns();
3562 var rows
= data
.getNumberOfRows();
3564 var indepType
= data
.getColumnType(0);
3565 if (indepType
== 'date' || indepType
== 'datetime') {
3566 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3567 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3568 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3569 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3570 } else if (indepType
== 'number') {
3571 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3572 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3573 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3574 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3576 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3577 "column 1 of DataTable input (Got '" + indepType
+ "')");
3581 // Array of the column indices which contain data (and not annotations).
3583 var annotationCols
= {}; // data index -> [annotation cols]
3584 var hasAnnotations
= false;
3585 for (var i
= 1; i
< cols
; i
++) {
3586 var type
= data
.getColumnType(i
);
3587 if (type
== 'number') {
3589 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3590 // This is OK -- it's an annotation column.
3591 var dataIdx
= colIdx
[colIdx
.length
- 1];
3592 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3593 annotationCols
[dataIdx
] = [i
];
3595 annotationCols
[dataIdx
].push(i
);
3597 hasAnnotations
= true;
3599 this.error("Only 'number' is supported as a dependent type with Gviz." +
3600 " 'string' is only supported if displayAnnotations is true");
3604 // Read column labels
3605 // TODO(danvk): add support back for errorBars
3606 var labels
= [data
.getColumnLabel(0)];
3607 for (var i
= 0; i
< colIdx
.length
; i
++) {
3608 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3609 if (this.attr_("errorBars")) i
+= 1;
3611 this.attrs_
.labels
= labels
;
3612 cols
= labels
.length
;
3615 var outOfOrder
= false;
3616 var annotations
= [];
3617 for (var i
= 0; i
< rows
; i
++) {
3619 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3620 data
.getValue(i
, 0) === null) {
3621 this.warn("Ignoring row " + i
+
3622 " of DataTable because of undefined or null first column.");
3626 if (indepType
== 'date' || indepType
== 'datetime') {
3627 row
.push(data
.getValue(i
, 0).getTime());
3629 row
.push(data
.getValue(i
, 0));
3631 if (!this.attr_("errorBars")) {
3632 for (var j
= 0; j
< colIdx
.length
; j
++) {
3633 var col
= colIdx
[j
];
3634 row
.push(data
.getValue(i
, col
));
3635 if (hasAnnotations
&&
3636 annotationCols
.hasOwnProperty(col
) &&
3637 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3639 ann
.series
= data
.getColumnLabel(col
);
3641 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3643 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3644 if (k
) ann
.text
+= "\n";
3645 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3647 annotations
.push(ann
);
3651 // Strip out infinities, which give dygraphs problems later on.
3652 for (var j
= 0; j
< row
.length
; j
++) {
3653 if (!isFinite(row
[j
])) row
[j
] = null;
3656 for (var j
= 0; j
< cols
- 1; j
++) {
3657 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3660 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3667 this.warn("DataTable is out of order; order it correctly to speed loading.");
3668 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3670 this.rawData_
= ret
;
3672 if (annotations
.length
> 0) {
3673 this.setAnnotations(annotations
, true);
3679 * This is identical to JavaScript's built-in Date.parse() method, except that
3680 * it doesn't get replaced with an incompatible method by aggressive JS
3681 * libraries like MooTools or Joomla.
3682 * @param { String } str The date string, e.g. "2011/05/06"
3683 * @return { Integer } millis since epoch
3685 Dygraph
.dateStrToMillis
= function(str
) {
3686 return new Date(str
).getTime();
3689 // These functions are all based on MochiKit.
3691 * Copies all the properties from o to self.
3695 Dygraph
.update
= function (self
, o
) {
3696 if (typeof(o
) != 'undefined' && o
!== null) {
3698 if (o
.hasOwnProperty(k
)) {
3709 Dygraph
.isArrayLike
= function (o
) {
3710 var typ
= typeof(o
);
3712 (typ
!= 'object' && !(typ
== 'function' &&
3713 typeof(o
.item
) == 'function')) ||
3715 typeof(o
.length
) != 'number' ||
3726 Dygraph
.isDateLike
= function (o
) {
3727 if (typeof(o
) != "object" || o
=== null ||
3728 typeof(o
.getTime
) != 'function') {
3737 Dygraph
.clone
= function(o
) {
3738 // TODO(danvk): figure out how MochiKit's version works
3740 for (var i
= 0; i
< o
.length
; i
++) {
3741 if (Dygraph
.isArrayLike(o
[i
])) {
3742 r
.push(Dygraph
.clone(o
[i
]));
3752 * Get the CSV data. If it's in a function, call that function. If it's in a
3753 * file, do an XMLHttpRequest to get it.
3756 Dygraph
.prototype.start_
= function() {
3757 if (typeof this.file_
== 'function') {
3758 // CSV string. Pretend we got it via XHR.
3759 this.loadedEvent_(this.file_());
3760 } else if (Dygraph
.isArrayLike(this.file_
)) {
3761 this.rawData_
= this.parseArray_(this.file_
);
3763 } else if (typeof this.file_
== 'object' &&
3764 typeof this.file_
.getColumnRange
== 'function') {
3765 // must be a DataTable from gviz.
3766 this.parseDataTable_(this.file_
);
3768 } else if (typeof this.file_
== 'string') {
3769 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3770 if (this.file_
.indexOf('\n') >= 0) {
3771 this.loadedEvent_(this.file_
);
3773 var req
= new XMLHttpRequest();
3775 req
.onreadystatechange
= function () {
3776 if (req
.readyState
== 4) {
3777 if (req
.status
== 200) {
3778 caller
.loadedEvent_(req
.responseText
);
3783 req
.open("GET", this.file_
, true);
3787 this.error("Unknown data format: " + (typeof this.file_
));
3792 * Changes various properties of the graph. These can include:
3794 * <li>file: changes the source data for the graph</li>
3795 * <li>errorBars: changes whether the data contains stddev</li>
3798 * There's a huge variety of options that can be passed to this method. For a
3799 * full list, see http://dygraphs.com/options.html.
3801 * @param {Object} attrs The new properties and values
3802 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3803 * call to updateOptions(). If you know better, you can pass true to explicitly
3804 * block the redraw. This can be useful for chaining updateOptions() calls,
3805 * avoiding the occasional infinite loop and preventing redraws when it's not
3806 * necessary (e.g. when updating a callback).
3808 Dygraph
.prototype.updateOptions
= function(attrs
, block_redraw
) {
3809 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3811 // TODO(danvk): this is a mess. Move these options into attr_.
3812 if ('rollPeriod' in attrs
) {
3813 this.rollPeriod_
= attrs
.rollPeriod
;
3815 if ('dateWindow' in attrs
) {
3816 this.dateWindow_
= attrs
.dateWindow
;
3817 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3818 this.zoomed_x_
= attrs
.dateWindow
!= null;
3821 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3822 this.zoomed_y_
= attrs
.valueRange
!= null;
3825 // TODO(danvk): validate per-series options.
3830 // highlightCircleSize
3832 Dygraph
.update(this.user_attrs_
, attrs
);
3834 if (attrs
['file']) {
3835 this.file_
= attrs
['file'];
3836 if (!block_redraw
) this.start_();
3838 if (!block_redraw
) this.predraw_();
3843 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3844 * containing div (which has presumably changed size since the dygraph was
3845 * instantiated. If the width/height are specified, the div will be resized.
3847 * This is far more efficient than destroying and re-instantiating a
3848 * Dygraph, since it doesn't have to reparse the underlying data.
3850 * @param {Number} [width] Width (in pixels)
3851 * @param {Number} [height] Height (in pixels)
3853 Dygraph
.prototype.resize
= function(width
, height
) {
3854 if (this.resize_lock
) {
3857 this.resize_lock
= true;
3859 if ((width
=== null) != (height
=== null)) {
3860 this.warn("Dygraph.resize() should be called with zero parameters or " +
3861 "two non-NULL parameters. Pretending it was zero.");
3862 width
= height
= null;
3865 // TODO(danvk): there should be a clear() method.
3866 this.maindiv_
.innerHTML
= "";
3867 this.attrs_
.labelsDiv
= null;
3870 this.maindiv_
.style
.width
= width
+ "px";
3871 this.maindiv_
.style
.height
= height
+ "px";
3872 this.width_
= width
;
3873 this.height_
= height
;
3875 this.width_
= this.maindiv_
.offsetWidth
;
3876 this.height_
= this.maindiv_
.offsetHeight
;
3879 this.createInterface_();
3882 this.resize_lock
= false;
3886 * Adjusts the number of points in the rolling average. Updates the graph to
3887 * reflect the new averaging period.
3888 * @param {Number} length Number of points over which to average the data.
3890 Dygraph
.prototype.adjustRoll
= function(length
) {
3891 this.rollPeriod_
= length
;
3896 * Returns a boolean array of visibility statuses.
3898 Dygraph
.prototype.visibility
= function() {
3899 // Do lazy-initialization, so that this happens after we know the number of
3901 if (!this.attr_("visibility")) {
3902 this.attrs_
["visibility"] = [];
3904 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3905 this.attr_("visibility").push(true);
3907 return this.attr_("visibility");
3911 * Changes the visiblity of a series.
3913 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3914 var x
= this.visibility();
3915 if (num
< 0 || num
>= x
.length
) {
3916 this.warn("invalid series number in setVisibility: " + num
);
3924 * Update the list of annotations and redraw the chart.
3926 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3927 // Only add the annotation CSS rule once we know it will be used.
3928 Dygraph
.addAnnotationRule();
3929 this.annotations_
= ann
;
3930 this.layout_
.setAnnotations(this.annotations_
);
3931 if (!suppressDraw
) {
3937 * Return the list of annotations.
3939 Dygraph
.prototype.annotations
= function() {
3940 return this.annotations_
;
3944 * Get the index of a series (column) given its name. The first column is the
3945 * x-axis, so the data series start with index 1.
3947 Dygraph
.prototype.indexFromSetName
= function(name
) {
3948 var labels
= this.attr_("labels");
3949 for (var i
= 0; i
< labels
.length
; i
++) {
3950 if (labels
[i
] == name
) return i
;
3957 * Adds a default style for the annotation CSS classes to the document. This is
3958 * only executed when annotations are actually used. It is designed to only be
3959 * called once -- all calls after the first will return immediately.
3961 Dygraph
.addAnnotationRule
= function() {
3962 if (Dygraph
.addedAnnotationCSS
) return;
3964 var rule
= "border: 1px solid black; " +
3965 "background-color: white; " +
3966 "text-align: center;";
3968 var styleSheetElement
= document
.createElement("style");
3969 styleSheetElement
.type
= "text/css";
3970 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3972 // Find the first style sheet that we can access.
3973 // We may not add a rule to a style sheet from another domain for security
3974 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3975 // adds its own style sheets from google.com.
3976 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3977 if (document
.styleSheets
[i
].disabled
) continue;
3978 var mysheet
= document
.styleSheets
[i
];
3980 if (mysheet
.insertRule
) { // Firefox
3981 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3982 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3983 } else if (mysheet
.addRule
) { // IE
3984 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3986 Dygraph
.addedAnnotationCSS
= true;
3989 // Was likely a security exception.
3993 this.warn("Unable to add default annotation CSS rule; display may be off.");
3998 * Create a new canvas element. This is more complex than a simple
3999 * document.createElement("canvas") because of IE and excanvas.
4001 Dygraph
.createCanvas
= function() {
4002 var canvas
= document
.createElement("canvas");
4004 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
4005 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
4006 canvas
= G_vmlCanvasManager
.initElement(canvas
);
4014 * A wrapper around Dygraph that implements the gviz API.
4015 * @param {Object} container The DOM object the visualization should live in.
4017 Dygraph
.GVizChart
= function(container
) {
4018 this.container
= container
;
4021 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
4022 // Clear out any existing dygraph.
4023 // TODO(danvk): would it make more sense to simply redraw using the current
4024 // date_graph object?
4025 this.container
.innerHTML
= '';
4026 if (typeof(this.date_graph
) != 'undefined') {
4027 this.date_graph
.destroy();
4030 this.date_graph
= new Dygraph(this.container
, data
, options
);
4034 * Google charts compatible setSelection
4035 * Only row selection is supported, all points in the row will be highlighted
4036 * @param {Array} array of the selected cells
4039 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
4041 if (selection_array
.length
) {
4042 row
= selection_array
[0].row
;
4044 this.date_graph
.setSelection(row
);
4048 * Google charts compatible getSelection implementation
4049 * @return {Array} array of the selected cells
4052 Dygraph
.GVizChart
.prototype.getSelection
= function() {
4055 var row
= this.date_graph
.getSelection();
4057 if (row
< 0) return selection
;
4060 for (var i
in this.date_graph
.layout_
.datasets
) {
4061 selection
.push({row
: row
, column
: col
});
4068 // Older pages may still use this name.
4069 DateGraph
= Dygraph
;
4071 // <REMOVE_FOR_COMBINED>
4072 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
4075 "default": "parseFloat() or Date.parse()*",
4076 "labels": ["CSV parsing"],
4077 "type": "function(str) -> number",
4078 "description": "A function which parses x-values (i.e. the dependent series). Must return a number, even when the values are dates. In this case, millis since epoch are used. This is used primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which it will parse. See code for details."
4082 "labels": ["Data Line display"],
4084 "description": "If set, stack series on top of one another rather than drawing them independently."
4088 "labels": ["Data Line display"],
4090 "description": "The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is \"isolated\", i.e. there is a missing point on either side of it. This also controls the size of those dots."
4092 "labelsDivStyles": {
4094 "labels": ["Legend"],
4096 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
4100 "labels": ["Data Line display"],
4102 "description": "Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart."
4106 "labels": ["Overall display"],
4108 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4112 "labels": ["Callbacks"],
4113 "type": "function(minDate, maxDate, yRanges)",
4114 "description": "A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each y-axis."
4116 "pointClickCallback": {
4118 "labels": ["Callbacks", "Interactive Elements"],
4123 "default": "(see description)",
4124 "labels": ["Data Series Colors"],
4125 "type": "array<string>",
4126 "example": "['red', '#00FF00']",
4127 "description": "List of colors for the data series. These can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\", etc. If not specified, equally-spaced points around a color wheel are used."
4129 "connectSeparatedPoints": {
4131 "labels": ["Data Line display"],
4133 "description": "Usually, when Dygraphs encounters a missing value in a data series, it interprets this as a gap and draws it as such. If, instead, the missing values represents an x-value for which only a different series has data, then you'll want to connect the dots by setting this to true. To explicitly include a gap with this option set, use a value of NaN."
4135 "highlightCallback": {
4137 "labels": ["Callbacks"],
4138 "type": "function(event, x, points,row)",
4139 "description": "When set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: <code>[ {name: 'series', yval: y-value}, … ]</code>"
4143 "labels": ["Axis display"],
4145 "description": "Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data"
4149 "labels": ["Error Bars", "Rolling Averages"],
4150 "type": "integer >= 1",
4151 "description": "Number of days over which to average data. Discussed extensively above."
4153 "unhighlightCallback": {
4155 "labels": ["Callbacks"],
4156 "type": "function(event)",
4157 "description": "When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph. The parameter is the mouseout event."
4161 "labels": ["Axis display"],
4163 "description": "The size of the line to display next to each tick mark on x- or y-axes."
4165 "labelsSeparateLines": {
4167 "labels": ["Legend"],
4169 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
4171 "xValueFormatter": {
4172 "default": "(Round to 2 decimal places)",
4173 "labels": ["Axis display"],
4174 "type": "function(x)",
4175 "description": "Function to provide a custom display format for the X value for mouseover."
4177 "pixelsPerYLabel": {
4179 "labels": ["Axis display", "Grid"],
4181 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4183 "annotationMouseOverHandler": {
4185 "labels": ["Annotations"],
4186 "type": "function(annotation, point, dygraph, event)",
4187 "description": "If provided, this function is called whenever the user mouses over an annotation."
4189 "annotationMouseOutHandler": {
4191 "labels": ["Annotations"],
4192 "type": "function(annotation, point, dygraph, event)",
4193 "description": "If provided, this function is called whenever the user mouses out of an annotation."
4195 "annotationClickHandler": {
4197 "labels": ["Annotations"],
4198 "type": "function(annotation, point, dygraph, event)",
4199 "description": "If provided, this function is called whenever the user clicks on an annotation."
4201 "annotationDblClickHandler": {
4203 "labels": ["Annotations"],
4204 "type": "function(annotation, point, dygraph, event)",
4205 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
4209 "labels": ["Callbacks"],
4210 "type": "function(dygraph, is_initial)",
4211 "description": "When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn. The second is a boolean value indicating whether this is the initial draw."
4215 "labels": ["Value display/formatting"],
4217 "description": "Show k/M/G for kilo/Mega/Giga on y-axis. This is different than <code>labelsKMB</code> in that it uses base 2, not 10."
4221 "labels": ["CSV parsing"],
4223 "description": "The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not usually necessary, since tab-delimited data is auto-detected."
4225 "axisLabelFontSize": {
4227 "labels": ["Axis display"],
4229 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4231 "underlayCallback": {
4233 "labels": ["Callbacks"],
4234 "type": "function(canvas, area, dygraph)",
4235 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
4239 "labels": ["Overall display"],
4241 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4243 "interactionModel": {
4245 "labels": ["Interactive Elements"],
4247 "description": "TODO(konigsberg): document this"
4250 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4251 "labels": ["Axis display"],
4252 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4253 "description": "This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks are an array of (value, label) pairs. The built-in functions go to great lengths to choose good tick marks so, if you set this option, you'll most likely want to call one of them and modify the result."
4255 "xAxisLabelWidth": {
4257 "labels": ["Axis display"],
4259 "description": "Width, in pixels, of the x-axis labels."
4261 "showLabelsOnHighlight": {
4263 "labels": ["Interactive Elements", "Legend"],
4265 "description": "Whether to show the legend upon mouseover."
4268 "default": "(none)",
4269 "labels": ["Axis display"],
4270 "type": "string or object",
4271 "description": "Set to either an object ({}) filled with options for this axis or to the name of an existing data series with its own axis to re-use that axis. See tests for usage."
4273 "pixelsPerXLabel": {
4275 "labels": ["Axis display", "Grid"],
4277 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4281 "labels": ["Legend"],
4282 "type": "DOM element or string",
4283 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4284 "description": "Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id."
4288 "labels": ["CSV parsing", "Error Bars"],
4290 "description": "When set, attempt to parse each cell in the CSV file as \"a/b\", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below)."
4294 "labels": ["Axis display"],
4296 "description": "When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal to zero are not displayed.\n\nNot compatible with showZero, and ignores connectSeparatedPoints. Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph."
4300 "labels": ["Data Line display"],
4302 "example": "0.5, 2.0",
4303 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4307 "labels": ["Error Bars"],
4309 "description": "Use in conjunction with the \"fractions\" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1."
4313 "labels": ["Data Line display"],
4315 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4317 "highlightCircleSize": {
4319 "labels": ["Interactive Elements"],
4321 "description": "The size in pixels of the dot drawn over highlighted points."
4324 "default": "rgb(128,128,128)",
4326 "type": "red, blue",
4327 "description": "The color of the gridlines."
4330 "default": "[true, true, ...]",
4331 "labels": ["Data Line display"],
4332 "type": "Array of booleans",
4333 "description": "Which series should initially be visible? Once the Dygraph has been constructed, you can access and modify the visibility of each series using the <code>visibility</code> and <code>setVisibility</code> methods."
4336 "default": "Full range of the input is shown",
4337 "labels": ["Axis display"],
4338 "type": "Array of two numbers",
4339 "example": "[10, 110]",
4340 "description": "Explicitly set the vertical range of the graph to [low, high]."
4344 "labels": ["Legend"],
4346 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4348 "colorSaturation": {
4350 "labels": ["Data Series Colors"],
4351 "type": "float (0.0 - 1.0)",
4352 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4354 "yAxisLabelWidth": {
4356 "labels": ["Axis display"],
4358 "description": "Width, in pixels, of the y-axis labels. This also affects the amount of space available for a y-axis chart label."
4360 "hideOverlayOnMouseOut": {
4362 "labels": ["Interactive Elements", "Legend"],
4364 "description": "Whether to hide the legend when the mouse leaves the chart area."
4366 "yValueFormatter": {
4367 "default": "(Round to 2 decimal places)",
4368 "labels": ["Axis display"],
4369 "type": "function(x)",
4370 "description": "Function to provide a custom display format for the Y value for mouseover."
4373 "default": "onmouseover",
4374 "labels": ["Legend"],
4376 "description": "When to display the legend. By default, it only appears when a user mouses over the chart. Set it to \"always\" to always display a legend of some sort."
4378 "labelsShowZeroValues": {
4380 "labels": ["Legend"],
4382 "description": "Show zero value labels in the labelsDiv."
4386 "labels": ["Data Line display"],
4388 "description": "When set, display the graph as a step plot instead of a line plot."
4392 "labels": ["Value display/formatting"],
4394 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4398 "labels": ["Overall display"],
4400 "description": "Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point."
4404 "labels": ["Axis display"],
4406 "description": "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis."
4408 "xAxisLabelFormatter": {
4409 "default": "Dygraph.dateAxisFormatter",
4410 "labels": ["Axis display", "Value display/formatting"],
4411 "type": "function(date, granularity)",
4412 "description": "Function to call to format values along the x axis."
4415 "snippet": "function(e, date){<br> alert(date);<br>}",
4417 "labels": ["Callbacks"],
4418 "type": "function(e, date)",
4419 "description": "A function to call when a data point is clicked. The function should take two arguments, the event object for the click and the date that was clicked."
4421 "yAxisLabelFormatter": {
4422 "default": "yValueFormatter",
4423 "labels": ["Axis display", "Value display/formatting"],
4424 "type": "function(x)",
4425 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4428 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4429 "labels": ["Legend"],
4430 "type": "array<string>",
4431 "description": "A name for each data series, including the independent (X) series. For CSV files and DataTable objections, this is determined by context. For raw data, this must be specified. If it is not, default values are supplied and a warning is logged."
4434 "default": "Full range of the input is shown",
4435 "labels": ["Axis display"],
4436 "type": "Array of two Dates or numbers",
4437 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4438 "description": "Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow must also be numbers."
4442 "labels": ["Interactive Elements", "Rolling Averages"],
4444 "description": "If the rolling average period text box should be shown."
4448 "labels": ["Error Bars"],
4450 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4454 "labels": ["CSV parsing", "Error Bars"],
4456 "description": "When set, parse each CSV cell as \"low;middle;high\". Error bars will be drawn for each point between low and high, with the series itself going through middle."
4460 "labels": ["Data Series Colors"],
4461 "type": "float (0.0 - 1.0)",
4462 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4466 "labels": ["CSV parsing", "Error Bars"],
4468 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4470 "displayAnnotations": {
4472 "labels": ["Annotations"],
4474 "description": "Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series to be interpreted as annotations on points in that series. This is the same format used by Google's AnnotatedTimeLine chart."
4476 "panEdgeFraction": {
4478 "labels": ["Axis Display", "Interactive Elements"],
4481 "description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
4484 "labels": ["Chart labels"],
4487 "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
4491 "labels": ["Chart labels"],
4493 "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
4496 "labels": ["Chart labels"],
4499 "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
4502 "labels": ["Chart labels"],
4505 "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
4508 "labels": ["Chart labels"],
4511 "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
4514 "labels": ["Chart labels"],
4517 "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
4519 "isZoomedIgnoreProgrammaticZoom" : {
4521 "labels": ["Zooming"],
4523 "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
4529 "description" : "Whether to display vertical gridlines under the chart."
4535 "description" : "Whether to display horizontal gridlines under the chart."
4539 "labels": ["Axis display"],
4541 "description" : "Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4545 "labels": ["Axis display"],
4547 "description" : "Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4553 "description" : "Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawXGrid and drawYGrid options."
4557 "labels": ["Axis display"],
4559 "description" : "Thickness (in pixels) of the x- and y-axis lines."
4563 "labels": ["Axis display"],
4565 "description" : "Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'."
4569 "labels": ["Error bars", "Data Series Colors"],
4570 "type": "float (0.0 - 1.0)",
4571 "description" : "Error bars (or custom bars) for each series are drawn in the same color as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the error bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point."
4575 "labels": ["Axis display"],
4577 "description" : "Color for x- and y-axis labels. This is a CSS color string."
4581 "labels": ["Axis display", "Chart labels"],
4583 "description" : "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls "
4587 "labels": ["Value display/formatting"],
4589 "description": "By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you'd prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3."
4591 "digitsAfterDecimal" : {
4593 "labels": ["Value display/formatting"],
4595 "description": "Unless it's run in scientific mode (see the <code>sigFigs</code> option), dygraphs displays numbers with <code>digitsAfterDecimal</code> digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation."
4597 "maxNumberWidth" : {
4599 "labels": ["Value display/formatting"],
4601 "description": "When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than <code>maxNumberWidth</code> digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you'd like to see all those digits, set this to something large, like 20 or 30."
4604 "default": "(set when constructed)",
4606 "type": "string (URL of CSV or CSV), GViz DataTable or 2D Array",
4607 "description": "Sets the data being displayed in the chart. This can only be set when calling updateOptions; it cannot be set from the constructor. For a full description of valid data formats, see the <a href='http://dygraphs.com/data.html'>Data Formats</a> page."
4611 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4612 // JSON. This assumption cannot be checked in JS, but it will be checked when
4613 // documentation is generated by the generate-documentation.py script. For the
4614 // most part, this just means that you should always use double quotes.
4616 // Do a quick sanity check on the options reference.
4618 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4619 var flds
= ['type', 'default', 'description'];
4627 'Data Line display',
4628 'Data Series Colors',
4631 'Interactive Elements',
4635 'Value display/formatting',
4639 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4641 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4642 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4643 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4644 for (var i
= 0; i
< flds
.length
; i
++) {
4645 if (!op
.hasOwnProperty(flds
[i
])) {
4646 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4647 } else if (typeof(op
[flds
[i
]]) != 'string') {
4648 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4651 var labels
= op
['labels'];
4652 if (typeof(labels
) !== 'object') {
4653 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4654 for (var i
= 0; i
< labels
.length
; i
++) {
4655 if (!cats
.hasOwnProperty(labels
[i
])) {
4656 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4657 '", which is invalid.');
4663 // </REMOVE_FOR_COMBINED
>