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
) return null;
452 return [ this.axes_
[idx
].computedValueRange
[0],
453 this.axes_
[idx
].computedValueRange
[1] ];
457 * Returns the currently-visible y-ranges for each axis. This can be affected by
458 * zooming, panning, calls to updateOptions, etc.
459 * Returns an array of [bottom, top] pairs, one for each y-axis.
461 Dygraph
.prototype.yAxisRanges
= function() {
463 for (var i
= 0; i
< this.axes_
.length
; i
++) {
464 ret
.push(this.yAxisRange(i
));
469 // TODO(danvk): use these functions throughout dygraphs.
471 * Convert from data coordinates to canvas/div X/Y coordinates.
472 * If specified, do this conversion for the coordinate system of a particular
473 * axis. Uses the first axis by default.
474 * Returns a two-element array: [X, Y]
476 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
477 * instead of toDomCoords(null, y, axis).
479 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
480 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
484 * Convert from data x coordinates to canvas/div X coordinate.
485 * If specified, do this conversion for the coordinate system of a particular
487 * Returns a single value or null if x is null.
489 Dygraph
.prototype.toDomXCoord
= function(x
) {
494 var area
= this.plotter_
.area
;
495 var xRange
= this.xAxisRange();
496 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
500 * Convert from data x coordinates to canvas/div Y coordinate and optional
501 * axis. Uses the first axis by default.
503 * returns a single value or null if y is null.
505 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
506 var pct
= this.toPercentYCoord(y
, axis
);
511 var area
= this.plotter_
.area
;
512 return area
.y
+ pct
* area
.h
;
516 * Convert from canvas/div coords to data coordinates.
517 * If specified, do this conversion for the coordinate system of a particular
518 * axis. Uses the first axis by default.
519 * Returns a two-element array: [X, Y].
521 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
522 * instead of toDataCoords(null, y, axis).
524 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
525 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
529 * Convert from canvas/div x coordinate to data coordinate.
531 * If x is null, this returns null.
533 Dygraph
.prototype.toDataXCoord
= function(x
) {
538 var area
= this.plotter_
.area
;
539 var xRange
= this.xAxisRange();
540 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
544 * Convert from canvas/div y coord to value.
546 * If y is null, this returns null.
547 * if axis is null, this uses the first axis.
549 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
554 var area
= this.plotter_
.area
;
555 var yRange
= this.yAxisRange(axis
);
557 if (typeof(axis
) == "undefined") axis
= 0;
558 if (!this.axes_
[axis
].logscale
) {
559 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
561 // Computing the inverse of toDomCoord.
562 var pct
= (y
- area
.y
) / area
.h
564 // Computing the inverse of toPercentYCoord. The function was arrived at with
565 // the following steps:
567 // Original calcuation:
568 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
570 // Move denominator to both sides:
571 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
573 // subtract logr1, and take the negative value.
574 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
576 // Swap both sides of the equation, and we can compute the log of the
577 // return value. Which means we just need to use that as the exponent in
579 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
581 var logr1
= Dygraph
.log10(yRange
[1]);
582 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
583 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
589 * Converts a y for an axis to a percentage from the top to the
590 * bottom of the drawing area.
592 * If the coordinate represents a value visible on the canvas, then
593 * the value will be between 0 and 1, where 0 is the top of the canvas.
594 * However, this method will return values outside the range, as
595 * values can fall outside the canvas.
597 * If y is null, this returns null.
598 * if axis is null, this uses the first axis.
600 * @param { Number } y The data y-coordinate.
601 * @param { Number } [axis] The axis number on which the data coordinate lives.
602 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
604 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
608 if (typeof(axis
) == "undefined") axis
= 0;
610 var area
= this.plotter_
.area
;
611 var yRange
= this.yAxisRange(axis
);
614 if (!this.axes_
[axis
].logscale
) {
615 // yRange[1] - y is unit distance from the bottom.
616 // yRange[1] - yRange[0] is the scale of the range.
617 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
618 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
620 var logr1
= Dygraph
.log10(yRange
[1]);
621 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
627 * Converts an x value to a percentage from the left to the right of
630 * If the coordinate represents a value visible on the canvas, then
631 * the value will be between 0 and 1, where 0 is the left of the canvas.
632 * However, this method will return values outside the range, as
633 * values can fall outside the canvas.
635 * If x is null, this returns null.
636 * @param { Number } x The data x-coordinate.
637 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
639 Dygraph
.prototype.toPercentXCoord
= function(x
) {
644 var xRange
= this.xAxisRange();
645 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
649 * Returns the number of columns (including the independent variable).
650 * @return { Integer } The number of columns.
652 Dygraph
.prototype.numColumns
= function() {
653 return this.rawData_
[0].length
;
657 * Returns the number of rows (excluding any header/label row).
658 * @return { Integer } The number of rows, less any header.
660 Dygraph
.prototype.numRows
= function() {
661 return this.rawData_
.length
;
665 * Returns the value in the given row and column. If the row and column exceed
666 * the bounds on the data, returns null. Also returns null if the value is
668 * @param { Number} row The row number of the data (0-based). Row 0 is the
669 * first row of data, not a header row.
670 * @param { Number} col The column number of the data (0-based)
671 * @return { Number } The value in the specified cell or null if the row/col
674 Dygraph
.prototype.getValue
= function(row
, col
) {
675 if (row
< 0 || row
> this.rawData_
.length
) return null;
676 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
678 return this.rawData_
[row
][col
];
683 * Add an event handler. This smooths a difference between IE and the rest of
685 * @param { DOM element } el The element to add the event to.
686 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
687 * @param { Function } fn The function to call on the event. The function takes
688 * one parameter: the event object.
690 Dygraph
.addEvent
= function(el
, evt
, fn
) {
691 var normed_fn
= function(e
) {
692 if (!e
) var e
= window
.event
;
695 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
696 el
.addEventListener(evt
, normed_fn
, false);
698 el
.attachEvent('on' + evt
, normed_fn
);
705 * Cancels further processing of an event. This is useful to prevent default
706 * browser actions, e.g. highlighting text on a double-click.
707 * Based on the article at
708 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
709 * @param { Event } e The event whose normal behavior should be canceled.
711 Dygraph
.cancelEvent
= function(e
) {
712 e
= e
? e
: window
.event
;
713 if (e
.stopPropagation
) {
716 if (e
.preventDefault
) {
719 e
.cancelBubble
= true;
721 e
.returnValue
= false;
727 * Generates interface elements for the Dygraph: a containing div, a div to
728 * display the current point, and a textbox to adjust the rolling average
729 * period. Also creates the Renderer/Layout elements.
732 Dygraph
.prototype.createInterface_
= function() {
733 // Create the all-enclosing graph div
734 var enclosing
= this.maindiv_
;
736 this.graphDiv
= document
.createElement("div");
737 this.graphDiv
.style
.width
= this.width_
+ "px";
738 this.graphDiv
.style
.height
= this.height_
+ "px";
739 enclosing
.appendChild(this.graphDiv
);
741 // Create the canvas for interactive parts of the chart.
742 this.canvas_
= Dygraph
.createCanvas();
743 this.canvas_
.style
.position
= "absolute";
744 this.canvas_
.width
= this.width_
;
745 this.canvas_
.height
= this.height_
;
746 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
747 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
749 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
751 // ... and for static parts of the chart.
752 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
753 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
755 // The interactive parts of the graph are drawn on top of the chart.
756 this.graphDiv
.appendChild(this.hidden_
);
757 this.graphDiv
.appendChild(this.canvas_
);
758 this.mouseEventElement_
= this.canvas_
;
761 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
762 dygraph
.mouseMove_(e
);
764 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
765 dygraph
.mouseOut_(e
);
768 // Create the grapher
769 this.layout_
= new DygraphLayout(this);
771 this.createStatusMessage_();
772 this.createDragInterface_();
776 * Detach DOM elements in the dygraph and null out all data references.
777 * Calling this when you're done with a dygraph can dramatically reduce memory
778 * usage. See, e.g., the tests/perf.html example.
780 Dygraph
.prototype.destroy
= function() {
781 var removeRecursive
= function(node
) {
782 while (node
.hasChildNodes()) {
783 removeRecursive(node
.firstChild
);
784 node
.removeChild(node
.firstChild
);
787 removeRecursive(this.maindiv_
);
789 var nullOut
= function(obj
) {
791 if (typeof(obj
[n
]) === 'object') {
797 // These may not all be necessary, but it can't hurt...
798 nullOut(this.layout_
);
799 nullOut(this.plotter_
);
804 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
805 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
806 * or the zoom rectangles) is done on this.canvas_.
807 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
808 * @return {Object} The newly-created canvas
811 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
812 var h
= Dygraph
.createCanvas();
813 h
.style
.position
= "absolute";
814 // TODO(danvk): h should be offset from canvas. canvas needs to include
815 // some extra area to make it easier to zoom in on the far left and far
816 // right. h needs to be precisely the plot area, so that clipping occurs.
817 h
.style
.top
= canvas
.style
.top
;
818 h
.style
.left
= canvas
.style
.left
;
819 h
.width
= this.width_
;
820 h
.height
= this.height_
;
821 h
.style
.width
= this.width_
+ "px"; // for IE
822 h
.style
.height
= this.height_
+ "px"; // for IE
827 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
828 * is used to generate default series colors which are evenly spaced on the
830 * @param { Number } hue Range is 0.0-1.0.
831 * @param { Number } saturation Range is 0.0-1.0.
832 * @param { Number } value Range is 0.0-1.0.
833 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
836 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
840 if (saturation
=== 0) {
845 var i
= Math
.floor(hue
* 6);
846 var f
= (hue
* 6) - i
;
847 var p
= value
* (1 - saturation
);
848 var q
= value
* (1 - (saturation
* f
));
849 var t
= value
* (1 - (saturation
* (1 - f
)));
851 case 1: red
= q
; green
= value
; blue
= p
; break;
852 case 2: red
= p
; green
= value
; blue
= t
; break;
853 case 3: red
= p
; green
= q
; blue
= value
; break;
854 case 4: red
= t
; green
= p
; blue
= value
; break;
855 case 5: red
= value
; green
= p
; blue
= q
; break;
856 case 6: // fall through
857 case 0: red
= value
; green
= t
; blue
= p
; break;
860 red
= Math
.floor(255 * red
+ 0.5);
861 green
= Math
.floor(255 * green
+ 0.5);
862 blue
= Math
.floor(255 * blue
+ 0.5);
863 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
868 * Generate a set of distinct colors for the data series. This is done with a
869 * color wheel. Saturation/Value are customizable, and the hue is
870 * equally-spaced around the color wheel. If a custom set of colors is
871 * specified, that is used instead.
874 Dygraph
.prototype.setColors_
= function() {
875 var num
= this.attr_("labels").length
- 1;
877 var colors
= this.attr_('colors');
879 var sat
= this.attr_('colorSaturation') || 1.0;
880 var val
= this.attr_('colorValue') || 0.5;
881 var half
= Math
.ceil(num
/ 2);
882 for (var i
= 1; i
<= num
; i
++) {
883 if (!this.visibility()[i
-1]) continue;
884 // alternate colors for high contrast.
885 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
886 var hue
= (1.0 * idx
/ (1 + num
));
887 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
890 for (var i
= 0; i
< num
; i
++) {
891 if (!this.visibility()[i
]) continue;
892 var colorStr
= colors
[i
% colors
.length
];
893 this.colors_
.push(colorStr
);
897 this.plotter_
.setColors(this.colors_
);
901 * Return the list of colors. This is either the list of colors passed in the
902 * attributes or the autogenerated list of rgb(r,g,b) strings.
903 * @return {Array<string>} The list of colors.
905 Dygraph
.prototype.getColors
= function() {
909 // The following functions are from quirksmode.org with a modification for Safari from
910 // http://blog.firetree.net/2005/07/04/javascript-find-position/
911 // http://www.quirksmode.org/js
/findpos
.html
914 Dygraph
.findPosX
= function(obj
) {
919 curleft
+= obj
.offsetLeft
;
920 if(!obj
.offsetParent
)
922 obj
= obj
.offsetParent
;
931 Dygraph
.findPosY
= function(obj
) {
936 curtop
+= obj
.offsetTop
;
937 if(!obj
.offsetParent
)
939 obj
= obj
.offsetParent
;
948 * Create the div that contains information on the selected point(s)
949 * This goes in the top right of the canvas, unless an external div has already
953 Dygraph
.prototype.createStatusMessage_
= function() {
954 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
955 if (userLabelsDiv
&& null != userLabelsDiv
956 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
957 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
959 if (!this.attr_("labelsDiv")) {
960 var divWidth
= this.attr_('labelsDivWidth');
962 "position": "absolute",
965 "width": divWidth
+ "px",
967 "left": (this.width_
- divWidth
- 2) + "px",
968 "background": "white",
970 "overflow": "hidden"};
971 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
972 var div
= document
.createElement("div");
973 for (var name
in messagestyle
) {
974 if (messagestyle
.hasOwnProperty(name
)) {
975 div
.style
[name
] = messagestyle
[name
];
978 this.graphDiv
.appendChild(div
);
979 this.attrs_
.labelsDiv
= div
;
984 * Position the labels div so that:
985 * - its right edge is flush with the right edge of the charting area
986 * - its top edge is flush with the top edge of the charting area
989 Dygraph
.prototype.positionLabelsDiv_
= function() {
990 // Don't touch a user-specified labelsDiv.
991 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
993 var area
= this.plotter_
.area
;
994 var div
= this.attr_("labelsDiv");
995 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
996 div
.style
.top
= area
.y
+ "px";
1000 * Create the text box to adjust the averaging period
1003 Dygraph
.prototype.createRollInterface_
= function() {
1004 // Create a roller if one doesn't exist already.
1005 if (!this.roller_
) {
1006 this.roller_
= document
.createElement("input");
1007 this.roller_
.type
= "text";
1008 this.roller_
.style
.display
= "none";
1009 this.graphDiv
.appendChild(this.roller_
);
1012 var display
= this.attr_('showRoller') ? 'block' : 'none';
1014 var area
= this.plotter_
.area
;
1015 var textAttr
= { "position": "absolute",
1017 "top": (area
.y
+ area
.h
- 25) + "px",
1018 "left": (area
.x
+ 1) + "px",
1021 this.roller_
.size
= "2";
1022 this.roller_
.value
= this.rollPeriod_
;
1023 for (var name
in textAttr
) {
1024 if (textAttr
.hasOwnProperty(name
)) {
1025 this.roller_
.style
[name
] = textAttr
[name
];
1030 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1035 * Returns the x-coordinate of the event in a coordinate system where the
1036 * top-left corner of the page (not the window) is (0,0).
1037 * Taken from MochiKit.Signal
1039 Dygraph
.pageX
= function(e
) {
1041 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1044 var b
= document
.body
;
1046 (de
.scrollLeft
|| b
.scrollLeft
) -
1047 (de
.clientLeft
|| 0);
1053 * Returns the y-coordinate of the event in a coordinate system where the
1054 * top-left corner of the page (not the window) is (0,0).
1055 * Taken from MochiKit.Signal
1057 Dygraph
.pageY
= function(e
) {
1059 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1062 var b
= document
.body
;
1064 (de
.scrollTop
|| b
.scrollTop
) -
1065 (de
.clientTop
|| 0);
1071 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1072 * canvas (i.e. DOM Coords).
1074 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1075 return Dygraph
.pageX(e
) - context
.px
1080 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1081 * canvas (i.e. DOM Coords).
1083 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1084 return Dygraph
.pageY(e
) - context
.py
1088 * A collection of functions to facilitate build custom interaction models.
1091 Dygraph
.Interaction
= {};
1094 * Called in response to an interaction model operation that
1095 * should start the default panning behavior.
1097 * It's used in the default callback for "mousedown" operations.
1098 * Custom interaction model builders can use it to provide the default
1101 * @param { Event } event the event object which led to the startPan call.
1102 * @param { Dygraph} g The dygraph on which to act.
1103 * @param { Object} context The dragging context object (with
1104 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1106 Dygraph
.Interaction
.startPan
= function(event
, g
, context
) {
1107 context
.isPanning
= true;
1108 var xRange
= g
.xAxisRange();
1109 context
.dateRange
= xRange
[1] - xRange
[0];
1110 context
.initialLeftmostDate
= xRange
[0];
1111 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1113 if (g
.attr_("panEdgeFraction")) {
1114 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1115 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1117 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1118 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1120 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1121 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1122 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1124 var boundedValues
= [];
1125 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1127 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1128 var axis
= g
.axes_
[i
];
1129 var yExtremes
= axis
.extremeRange
;
1131 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1132 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1134 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1135 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1137 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1139 context
.boundedValues
= boundedValues
;
1142 // Record the range of each y-axis at the start of the drag.
1143 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1144 context
.is2DPan
= false;
1145 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1146 var axis
= g
.axes_
[i
];
1147 var yRange
= g
.yAxisRange(i
);
1148 // TODO(konigsberg): These values should be in |context|.
1149 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1150 if (axis
.logscale
) {
1151 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1152 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1154 axis
.initialTopValue
= yRange
[1];
1155 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1157 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1159 // While calculating axes, set 2dpan.
1160 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1165 * Called in response to an interaction model operation that
1166 * responds to an event that pans the view.
1168 * It's used in the default callback for "mousemove" operations.
1169 * Custom interaction model builders can use it to provide the default
1172 * @param { Event } event the event object which led to the movePan call.
1173 * @param { Dygraph} g The dygraph on which to act.
1174 * @param { Object} context The dragging context object (with
1175 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1177 Dygraph
.Interaction
.movePan
= function(event
, g
, context
) {
1178 context
.dragEndX
= g
.dragGetX_(event
, context
);
1179 context
.dragEndY
= g
.dragGetY_(event
, context
);
1181 var minDate
= context
.initialLeftmostDate
-
1182 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1183 if (context
.boundedDates
) {
1184 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1186 var maxDate
= minDate
+ context
.dateRange
;
1187 if (context
.boundedDates
) {
1188 if (maxDate
> context
.boundedDates
[1]) {
1189 // Adjust minDate, and recompute maxDate.
1190 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1191 maxDate
= minDate
+ context
.dateRange
;
1195 g
.dateWindow_
= [minDate
, maxDate
];
1197 // y-axis scaling is automatic unless this is a full 2D pan.
1198 if (context
.is2DPan
) {
1199 // Adjust each axis appropriately.
1200 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1201 var axis
= g
.axes_
[i
];
1203 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1204 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1206 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1208 // In log scale, maxValue and minValue are the logs of those values.
1209 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1211 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1213 var minValue
= maxValue
- axis
.dragValueRange
;
1215 if (minValue
< boundedValue
[0]) {
1216 // Adjust maxValue, and recompute minValue.
1217 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1218 minValue
= maxValue
- axis
.dragValueRange
;
1221 if (axis
.logscale
) {
1222 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1223 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1225 axis
.valueWindow
= [ minValue
, maxValue
];
1230 g
.drawGraph_(false);
1234 * Called in response to an interaction model operation that
1235 * responds to an event that ends panning.
1237 * It's used in the default callback for "mouseup" operations.
1238 * Custom interaction model builders can use it to provide the default
1241 * @param { Event } event the event object which led to the startZoom call.
1242 * @param { Dygraph} g The dygraph on which to act.
1243 * @param { Object} context The dragging context object (with
1244 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1246 Dygraph
.Interaction
.endPan
= function(event
, g
, context
) {
1247 context
.dragEndX
= g
.dragGetX_(event
, context
);
1248 context
.dragEndY
= g
.dragGetY_(event
, context
);
1250 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1251 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1253 if (regionWidth
< 2 && regionHeight
< 2 &&
1254 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1255 Dygraph
.Interaction
.treatMouseOpAsClick(g
, context
);
1258 // TODO(konigsberg): Clear the context data from the axis.
1259 // (replace with "context = {}" ?)
1260 // TODO(konigsberg): mouseup should just delete the
1261 // context object, and mousedown should create a new one.
1262 context
.isPanning
= false;
1263 context
.is2DPan
= false;
1264 context
.initialLeftmostDate
= null;
1265 context
.dateRange
= null;
1266 context
.valueRange
= null;
1267 context
.boundedDates
= null;
1268 context
.boundedValues
= null;
1270 var dragEndX
= g
.dragGetX_(event
, context
);
1271 var dragEndY
= g
.dragGetY_(event
, context
);
1272 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1273 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1275 if (regionWidth
< 2 && regionHeight
< 2 &&
1276 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1277 Dygraph
.Interaction
.treatMouseOpAsClick(g
);
1282 * Called in response to an interaction model operation that
1283 * responds to an event that starts zooming.
1285 * It's used in the default callback for "mousedown" operations.
1286 * Custom interaction model builders can use it to provide the default
1289 * @param { Event } event the event object which led to the startZoom call.
1290 * @param { Dygraph} g The dygraph on which to act.
1291 * @param { Object} context The dragging context object (with
1292 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1294 Dygraph
.Interaction
.startZoom
= function(event
, g
, context
) {
1295 context
.isZooming
= true;
1299 * Called in response to an interaction model operation that
1300 * responds to an event that defines zoom boundaries.
1302 * It's used in the default callback for "mousemove" operations.
1303 * Custom interaction model builders can use it to provide the default
1306 * @param { Event } event the event object which led to the moveZoom call.
1307 * @param { Dygraph} g The dygraph on which to act.
1308 * @param { Object} context The dragging context object (with
1309 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1311 Dygraph
.Interaction
.moveZoom
= function(event
, g
, context
) {
1312 context
.dragEndX
= g
.dragGetX_(event
, context
);
1313 context
.dragEndY
= g
.dragGetY_(event
, context
);
1315 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1316 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1318 // drag direction threshold for y axis is twice as large as x axis
1319 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1322 context
.dragDirection
,
1327 context
.prevDragDirection
,
1331 context
.prevEndX
= context
.dragEndX
;
1332 context
.prevEndY
= context
.dragEndY
;
1333 context
.prevDragDirection
= context
.dragDirection
;
1336 Dygraph
.Interaction
.treatMouseOpAsClick
= function(g
, context
) {
1337 // TODO(danvk): pass along more info about the points, e.g. 'x'
1338 if (g
.attr_('clickCallback') != null) {
1339 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
, context
);
1341 if (g
.attr_('pointClickCallback')) {
1342 // check if the click was on a particular point.
1343 var closestIdx
= -1;
1344 var closestDistance
= 0;
1345 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1346 var p
= g
.selPoints_
[i
];
1347 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1348 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1349 if (closestIdx
== -1 || distance
< closestDistance
) {
1350 closestDistance
= distance
;
1355 // Allow any click within two pixels of the dot.
1356 var radius
= g
.attr_('highlightCircleSize') + 2;
1357 if (closestDistance
<= 5 * 5) {
1358 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1364 * Called in response to an interaction model operation that
1365 * responds to an event that performs a zoom based on previously defined
1368 * It's used in the default callback for "mouseup" operations.
1369 * Custom interaction model builders can use it to provide the default
1372 * @param { Event } event the event object which led to the endZoom call.
1373 * @param { Dygraph} g The dygraph on which to end the zoom.
1374 * @param { Object} context The dragging context object (with
1375 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1377 Dygraph
.Interaction
.endZoom
= function(event
, g
, context
) {
1378 context
.isZooming
= false;
1379 context
.dragEndX
= g
.dragGetX_(event
, context
);
1380 context
.dragEndY
= g
.dragGetY_(event
, context
);
1381 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1382 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1384 if (regionWidth
< 2 && regionHeight
< 2 &&
1385 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1386 Dygraph
.Interaction
.treatMouseOpAsClick(g
);
1389 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1390 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1391 Math
.max(context
.dragStartX
, context
.dragEndX
));
1392 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1393 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1394 Math
.max(context
.dragStartY
, context
.dragEndY
));
1396 g
.canvas_ctx_
.clearRect(0, 0, g
.canvas_
.width
, g
.canvas_
.height
);
1398 context
.dragStartX
= null;
1399 context
.dragStartY
= null;
1403 * Default interation model for dygraphs. You can refer to specific elements of
1404 * this when constructing your own interaction model, e.g.:
1405 * g.updateOptions( {
1406 * interactionModel: {
1407 * mousedown: Dygraph.defaultInteractionModel.mousedown
1411 Dygraph
.Interaction
.defaultModel
= {
1412 // Track the beginning of drag events
1413 mousedown
: function(event
, g
, context
) {
1414 context
.initializeMouseDown(event
, g
, context
);
1416 if (event
.altKey
|| event
.shiftKey
) {
1417 Dygraph
.startPan(event
, g
, context
);
1419 Dygraph
.startZoom(event
, g
, context
);
1423 // Draw zoom rectangles when the mouse is down and the user moves around
1424 mousemove
: function(event
, g
, context
) {
1425 if (context
.isZooming
) {
1426 Dygraph
.moveZoom(event
, g
, context
);
1427 } else if (context
.isPanning
) {
1428 Dygraph
.movePan(event
, g
, context
);
1432 mouseup
: function(event
, g
, context
) {
1433 if (context
.isZooming
) {
1434 Dygraph
.endZoom(event
, g
, context
);
1435 } else if (context
.isPanning
) {
1436 Dygraph
.endPan(event
, g
, context
);
1440 // Temporarily cancel the dragging event when the mouse leaves the graph
1441 mouseout
: function(event
, g
, context
) {
1442 if (context
.isZooming
) {
1443 context
.dragEndX
= null;
1444 context
.dragEndY
= null;
1448 // Disable zooming out if panning.
1449 dblclick
: function(event
, g
, context
) {
1450 if (event
.altKey
|| event
.shiftKey
) {
1453 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1454 // friendlier to public use.
1459 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.Interaction
.defaultModel
;
1461 // old ways of accessing these methods/properties
1462 Dygraph
.defaultInteractionModel
= Dygraph
.Interaction
.defaultModel
;
1463 Dygraph
.endZoom
= Dygraph
.Interaction
.endZoom
;
1464 Dygraph
.moveZoom
= Dygraph
.Interaction
.moveZoom
;
1465 Dygraph
.startZoom
= Dygraph
.Interaction
.startZoom
;
1466 Dygraph
.endPan
= Dygraph
.Interaction
.endPan
;
1467 Dygraph
.movePan
= Dygraph
.Interaction
.movePan
;
1468 Dygraph
.startPan
= Dygraph
.Interaction
.startPan
;
1471 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1475 Dygraph
.prototype.createDragInterface_
= function() {
1477 // Tracks whether the mouse is down right now
1479 isPanning
: false, // is this drag part of a pan?
1480 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1485 dragDirection
: null,
1488 prevDragDirection
: null,
1490 // The value on the left side of the graph when a pan operation starts.
1491 initialLeftmostDate
: null,
1493 // The number of units each pixel spans. (This won't be valid for log
1495 xUnitsPerPixel
: null,
1497 // TODO(danvk): update this comment
1498 // The range in second/value units that the viewport encompasses during a
1499 // panning operation.
1502 // Utility function to convert page-wide coordinates to canvas coords
1506 // Values for use with panEdgeFraction, which limit how far outside the
1507 // graph's data boundaries it can be panned.
1508 boundedDates
: null, // [minDate, maxDate]
1509 boundedValues
: null, // [[minValue, maxValue] ...]
1511 initializeMouseDown
: function(event
, g
, context
) {
1512 // prevents mouse drags from selecting page text.
1513 if (event
.preventDefault
) {
1514 event
.preventDefault(); // Firefox, Chrome, etc.
1516 event
.returnValue
= false; // IE
1517 event
.cancelBubble
= true;
1520 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1521 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1522 context
.dragStartX
= g
.dragGetX_(event
, context
);
1523 context
.dragStartY
= g
.dragGetY_(event
, context
);
1527 var interactionModel
= this.attr_("interactionModel");
1529 // Self is the graph.
1532 // Function that binds the graph and context to the handler.
1533 var bindHandler
= function(handler
) {
1534 return function(event
) {
1535 handler(event
, self
, context
);
1539 for (var eventName
in interactionModel
) {
1540 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1541 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1542 bindHandler(interactionModel
[eventName
]));
1545 // If the user releases the mouse button during a drag, but not over the
1546 // canvas, then it doesn't count as a zooming action.
1547 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1548 if (context
.isZooming
|| context
.isPanning
) {
1549 context
.isZooming
= false;
1550 context
.dragStartX
= null;
1551 context
.dragStartY
= null;
1554 if (context
.isPanning
) {
1555 context
.isPanning
= false;
1556 context
.draggingDate
= null;
1557 context
.dateRange
= null;
1558 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1559 delete self
.axes_
[i
].draggingValue
;
1560 delete self
.axes_
[i
].dragValueRange
;
1568 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1569 * up any previous zoom rectangles that were drawn. This could be optimized to
1570 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1573 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1574 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1575 * @param {Number} startX The X position where the drag started, in canvas
1577 * @param {Number} endX The current X position of the drag, in canvas coords.
1578 * @param {Number} startY The Y position where the drag started, in canvas
1580 * @param {Number} endY The current Y position of the drag, in canvas coords.
1581 * @param {Number} prevDirection the value of direction on the previous call to
1582 * this function. Used to avoid excess redrawing
1583 * @param {Number} prevEndX The value of endX on the previous call to this
1584 * function. Used to avoid excess redrawing
1585 * @param {Number} prevEndY The value of endY on the previous call to this
1586 * function. Used to avoid excess redrawing
1589 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1590 endY
, prevDirection
, prevEndX
,
1592 var ctx
= this.canvas_ctx_
;
1594 // Clean up from the previous rect if necessary
1595 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1596 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1597 Math
.abs(startX
- prevEndX
), this.height_
);
1598 } else if (prevDirection
== Dygraph
.VERTICAL
){
1599 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1600 this.width_
, Math
.abs(startY
- prevEndY
));
1603 // Draw a light-grey rectangle to show the new viewing area
1604 if (direction
== Dygraph
.HORIZONTAL
) {
1605 if (endX
&& startX
) {
1606 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1607 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1608 Math
.abs(endX
- startX
), this.height_
);
1611 if (direction
== Dygraph
.VERTICAL
) {
1612 if (endY
&& startY
) {
1613 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1614 ctx
.fillRect(0, Math
.min(startY
, endY
),
1615 this.width_
, Math
.abs(endY
- startY
));
1621 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1622 * the canvas. The exact zoom window may be slightly larger if there are no data
1623 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1624 * which accepts dates that match the raw data. This function redraws the graph.
1626 * @param {Number} lowX The leftmost pixel value that should be visible.
1627 * @param {Number} highX The rightmost pixel value that should be visible.
1630 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1631 // Find the earliest and latest dates contained in this canvasx range.
1632 // Convert the call to date ranges of the raw data.
1633 var minDate
= this.toDataXCoord(lowX
);
1634 var maxDate
= this.toDataXCoord(highX
);
1635 this.doZoomXDates_(minDate
, maxDate
);
1639 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1640 * method with doZoomX which accepts pixel coordinates. This function redraws
1643 * @param {Number} minDate The minimum date that should be visible.
1644 * @param {Number} maxDate The maximum date that should be visible.
1647 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1648 this.dateWindow_
= [minDate
, maxDate
];
1649 this.zoomed_x_
= true;
1651 if (this.attr_("zoomCallback")) {
1652 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1657 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1658 * the canvas. This function redraws the graph.
1660 * @param {Number} lowY The topmost pixel value that should be visible.
1661 * @param {Number} highY The lowest pixel value that should be visible.
1664 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1665 // Find the highest and lowest values in pixel range for each axis.
1666 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1667 // This is because pixels increase as you go down on the screen, whereas data
1668 // coordinates increase as you go up the screen.
1669 var valueRanges
= [];
1670 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1671 var hi
= this.toDataYCoord(lowY
, i
);
1672 var low
= this.toDataYCoord(highY
, i
);
1673 this.axes_
[i
].valueWindow
= [low
, hi
];
1674 valueRanges
.push([low
, hi
]);
1677 this.zoomed_y_
= true;
1679 if (this.attr_("zoomCallback")) {
1680 var xRange
= this.xAxisRange();
1681 var yRange
= this.yAxisRange();
1682 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1687 * Reset the zoom to the original view coordinates. This is the same as
1688 * double-clicking on the graph.
1692 Dygraph
.prototype.doUnzoom_
= function() {
1694 if (this.dateWindow_
!= null) {
1696 this.dateWindow_
= null;
1699 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1700 if (this.axes_
[i
].valueWindow
!= null) {
1702 delete this.axes_
[i
].valueWindow
;
1706 // Clear any selection, since it's likely to be drawn in the wrong place.
1707 this.clearSelection();
1710 // Putting the drawing operation before the callback because it resets
1712 this.zoomed_x_
= false;
1713 this.zoomed_y_
= false;
1715 if (this.attr_("zoomCallback")) {
1716 var minDate
= this.rawData_
[0][0];
1717 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1718 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1724 * When the mouse moves in the canvas, display information about a nearby data
1725 * point and draw dots over those points in the data series. This function
1726 * takes care of cleanup of previously-drawn dots.
1727 * @param {Object} event The mousemove event from the browser.
1730 Dygraph
.prototype.mouseMove_
= function(event
) {
1731 // This prevents JS errors when mousing over the canvas before data loads.
1732 var points
= this.layout_
.points
;
1733 if (points
=== undefined
) return;
1735 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1740 // Loop through all the points and find the date nearest to our current
1742 var minDist
= 1e+100;
1744 for (var i
= 0; i
< points
.length
; i
++) {
1745 var point
= points
[i
];
1746 if (point
== null) continue;
1747 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1748 if (dist
> minDist
) continue;
1752 if (idx
>= 0) lastx
= points
[idx
].xval
;
1754 // Extract the points we've selected
1755 this.selPoints_
= [];
1756 var l
= points
.length
;
1757 if (!this.attr_("stackedGraph")) {
1758 for (var i
= 0; i
< l
; i
++) {
1759 if (points
[i
].xval
== lastx
) {
1760 this.selPoints_
.push(points
[i
]);
1764 // Need to 'unstack' points starting from the bottom
1765 var cumulative_sum
= 0;
1766 for (var i
= l
- 1; i
>= 0; i
--) {
1767 if (points
[i
].xval
== lastx
) {
1768 var p
= {}; // Clone the point since we modify it
1769 for (var k
in points
[i
]) {
1770 p
[k
] = points
[i
][k
];
1772 p
.yval
-= cumulative_sum
;
1773 cumulative_sum
+= p
.yval
;
1774 this.selPoints_
.push(p
);
1777 this.selPoints_
.reverse();
1780 if (this.attr_("highlightCallback")) {
1781 var px
= this.lastx_
;
1782 if (px
!== null && lastx
!= px
) {
1783 // only fire if the selected point has changed.
1784 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1788 // Save last x position for callbacks.
1789 this.lastx_
= lastx
;
1791 this.updateSelection_();
1795 * Transforms layout_.points index into data row number.
1796 * @param int layout_.points index
1797 * @return int row number, or -1 if none could be found.
1800 Dygraph
.prototype.idxToRow_
= function(idx
) {
1801 if (idx
< 0) return -1;
1803 for (var i
in this.layout_
.datasets
) {
1804 if (idx
< this.layout_
.datasets
[i
].length
) {
1805 return this.boundaryIds_
[0][0]+idx
;
1807 idx
-= this.layout_
.datasets
[i
].length
;
1814 * @param { Number } x The number to consider.
1815 * @return { Boolean } Whether the number is zero or NaN.
1817 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1818 Dygraph
.isOK
= function(x
) {
1819 return x
&& !isNaN(x
);
1824 * Generates HTML for the legend which is displayed when hovering over the
1825 * chart. If no selected points are specified, a default legend is returned
1826 * (this may just be the empty string).
1827 * @param { Number } [x] The x-value of the selected points.
1828 * @param { [Object] } [sel_points] List of selected points for the given
1829 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1831 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1832 // If no points are selected, we display a default legend. Traditionally,
1833 // this has been blank. But a better default would be a conventional legend,
1834 // which provides essential information for a non-interactive chart.
1835 if (typeof(x
) === 'undefined') {
1836 if (this.attr_('legend') != 'always') return '';
1838 var sepLines
= this.attr_('labelsSeparateLines');
1839 var labels
= this.attr_('labels');
1841 for (var i
= 1; i
< labels
.length
; i
++) {
1842 if (!this.visibility()[i
- 1]) continue;
1843 var c
= this.plotter_
.colors
[labels
[i
]];
1844 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1845 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1851 var html
= this.attr_('xValueFormatter')(x
) + ":";
1853 var fmtFunc
= this.attr_('yValueFormatter');
1854 var showZeros
= this.attr_("labelsShowZeroValues");
1855 var sepLines
= this.attr_("labelsSeparateLines");
1856 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1857 var pt
= this.selPoints_
[i
];
1858 if (pt
.yval
== 0 && !showZeros
) continue;
1859 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1860 if (sepLines
) html
+= "<br/>";
1862 var c
= this.plotter_
.colors
[pt
.name
];
1863 var yval
= fmtFunc(pt
.yval
, this);
1864 // TODO(danvk): use a template string here and make it an attribute.
1865 html
+= " <b><span style='color: " + c
+ ";'>"
1866 + pt
.name
+ "</span></b>:"
1874 * Displays information about the selected points in the legend. If there is no
1875 * selection, the legend will be cleared.
1876 * @param { Number } [x] The x-value of the selected points.
1877 * @param { [Object] } [sel_points] List of selected points for the given
1878 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1880 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1881 var html
= this.generateLegendHTML_(x
, sel_points
);
1882 var labelsDiv
= this.attr_("labelsDiv");
1883 if (labelsDiv
!== null) {
1884 labelsDiv
.innerHTML
= html
;
1886 if (typeof(this.shown_legend_error_
) == 'undefined') {
1887 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1888 this.shown_legend_error_
= true;
1894 * Draw dots over the selectied points in the data series. This function
1895 * takes care of cleanup of previously-drawn dots.
1898 Dygraph
.prototype.updateSelection_
= function() {
1899 // Clear the previously drawn vertical, if there is one
1900 var ctx
= this.canvas_ctx_
;
1901 if (this.previousVerticalX_
>= 0) {
1902 // Determine the maximum highlight circle size.
1903 var maxCircleSize
= 0;
1904 var labels
= this.attr_('labels');
1905 for (var i
= 1; i
< labels
.length
; i
++) {
1906 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1907 if (r
> maxCircleSize
) maxCircleSize
= r
;
1909 var px
= this.previousVerticalX_
;
1910 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1911 2 * maxCircleSize
+ 2, this.height_
);
1914 if (this.selPoints_
.length
> 0) {
1915 // Set the status message to indicate the selected point(s)
1916 if (this.attr_('showLabelsOnHighlight')) {
1917 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1920 // Draw colored circles over the center of each selected point
1921 var canvasx
= this.selPoints_
[0].canvasx
;
1923 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1924 var pt
= this.selPoints_
[i
];
1925 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1927 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1929 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1930 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1935 this.previousVerticalX_
= canvasx
;
1940 * Manually set the selected points and display information about them in the
1941 * legend. The selection can be cleared using clearSelection() and queried
1942 * using getSelection().
1943 * @param { Integer } row number that should be highlighted (i.e. appear with
1944 * hover dots on the chart). Set to false to clear any selection.
1946 Dygraph
.prototype.setSelection
= function(row
) {
1947 // Extract the points we've selected
1948 this.selPoints_
= [];
1951 if (row
!== false) {
1952 row
= row
-this.boundaryIds_
[0][0];
1955 if (row
!== false && row
>= 0) {
1956 for (var i
in this.layout_
.datasets
) {
1957 if (row
< this.layout_
.datasets
[i
].length
) {
1958 var point
= this.layout_
.points
[pos
+row
];
1960 if (this.attr_("stackedGraph")) {
1961 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1964 this.selPoints_
.push(point
);
1966 pos
+= this.layout_
.datasets
[i
].length
;
1970 if (this.selPoints_
.length
) {
1971 this.lastx_
= this.selPoints_
[0].xval
;
1972 this.updateSelection_();
1974 this.clearSelection();
1980 * The mouse has left the canvas. Clear out whatever artifacts remain
1981 * @param {Object} event the mouseout event from the browser.
1984 Dygraph
.prototype.mouseOut_
= function(event
) {
1985 if (this.attr_("unhighlightCallback")) {
1986 this.attr_("unhighlightCallback")(event
);
1989 if (this.attr_("hideOverlayOnMouseOut")) {
1990 this.clearSelection();
1995 * Clears the current selection (i.e. points that were highlighted by moving
1996 * the mouse over the chart).
1998 Dygraph
.prototype.clearSelection
= function() {
1999 // Get rid of the overlay data
2000 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
2001 this.setLegendHTML_();
2002 this.selPoints_
= [];
2007 * Returns the number of the currently selected row. To get data for this row,
2008 * you can use the getValue method.
2009 * @return { Integer } row number, or -1 if nothing is selected
2011 Dygraph
.prototype.getSelection
= function() {
2012 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2016 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
2017 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
2018 return row
+ this.boundaryIds_
[0][0];
2025 * Number formatting function which mimicks the behavior of %g in printf, i.e.
2026 * either exponential or fixed format (without trailing 0s) is used depending on
2027 * the length of the generated string. The advantage of this format is that
2028 * there is a predictable upper bound on the resulting string length,
2029 * significant figures are not dropped, and normal numbers are not displayed in
2030 * exponential notation.
2032 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
2033 * It creates strings which are too long for absolute values between 10^-4 and
2034 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
2037 * @param {Number} x The number to format
2038 * @param {Number} opt_precision The precision to use, default 2.
2039 * @return {String} A string formatted like %g in printf. The max generated
2040 * string length should be precision + 6 (e.g 1.123e+300).
2042 Dygraph
.floatFormat
= function(x
, opt_precision
) {
2043 // Avoid invalid precision values; [1, 21] is the valid range.
2044 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
2046 // This is deceptively simple. The actual algorithm comes from:
2048 // Max allowed length = p + 4
2049 // where 4 comes from 'e+n' and '.'.
2051 // Length of fixed format = 2 + y + p
2052 // where 2 comes from '0.' and y = # of leading zeroes.
2054 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
2057 // Since the behavior of toPrecision() is identical for larger numbers, we
2058 // don't have to worry about the other bound.
2060 // Finally, the argument for toExponential() is the number of trailing digits,
2061 // so we take off 1 for the value before the '.'.
2062 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
2063 x
.toExponential(p
- 1) : x
.toPrecision(p
);
2068 * Return a string version of a number. This respects the digitsAfterDecimal
2069 * and maxNumberWidth options.
2070 * @param {Number} x The number to be formatted
2071 * @param {Dygraph} g The dygraph object
2073 Dygraph
.numberFormatter
= function(x
, g
) {
2074 var sigFigs
= g
.attr_('sigFigs');
2076 if (sigFigs
!== null) {
2077 // User has opted for a fixed number of significant figures.
2078 return Dygraph
.floatFormat(x
, sigFigs
);
2081 var digits
= g
.attr_('digitsAfterDecimal');
2082 var maxNumberWidth
= g
.attr_('maxNumberWidth');
2084 // switch to scientific notation if we underflow or overflow fixed display.
2086 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
2087 Math
.abs(x
) < Math
.pow(10, -digits
))) {
2088 return x
.toExponential(digits
);
2090 return '' + Dygraph
.round_(x
, digits
);
2096 * Converts '9' to '09' (useful for dates)
2098 Dygraph
.zeropad
= function(x
) {
2099 if (x
< 10) return "0" + x
; else return "" + x
;
2103 * Return a string version of the hours, minutes and seconds portion of a date.
2104 * @param {Number} date The JavaScript date (ms since epoch)
2105 * @return {String} A time of the form "HH:MM:SS"
2108 Dygraph
.hmsString_
= function(date
) {
2109 var zeropad
= Dygraph
.zeropad
;
2110 var d
= new Date(date
);
2111 if (d
.getSeconds()) {
2112 return zeropad(d
.getHours()) + ":" +
2113 zeropad(d
.getMinutes()) + ":" +
2114 zeropad(d
.getSeconds());
2116 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
2121 * Convert a JS date to a string appropriate to display on an axis that
2122 * is displaying values at the stated granularity.
2123 * @param {Date} date The date to format
2124 * @param {Number} granularity One of the Dygraph granularity constants
2125 * @return {String} The formatted date
2128 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
2129 if (granularity
>= Dygraph
.DECADAL
) {
2130 return date
.strftime('%Y');
2131 } else if (granularity
>= Dygraph
.MONTHLY
) {
2132 return date
.strftime('%b %y');
2134 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
2135 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
2136 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
2138 return Dygraph
.hmsString_(date
.getTime());
2144 * Convert a JS date (millis since epoch) to YYYY/MM/DD
2145 * @param {Number} date The JavaScript date (ms since epoch)
2146 * @return {String} A date of the form "YYYY/MM/DD"
2149 Dygraph
.dateString_
= function(date
) {
2150 var zeropad
= Dygraph
.zeropad
;
2151 var d
= new Date(date
);
2154 var year
= "" + d
.getFullYear();
2155 // Get a 0 padded month string
2156 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
2157 // Get a 0 padded day string
2158 var day
= zeropad(d
.getDate());
2161 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
2162 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
2164 return year
+ "/" + month + "/" + day
+ ret
;
2168 * Round a number to the specified number of digits past the decimal point.
2169 * @param {Number} num The number to round
2170 * @param {Number} places The number of decimals to which to round
2171 * @return {Number} The rounded number
2174 Dygraph
.round_
= function(num
, places
) {
2175 var shift
= Math
.pow(10, places
);
2176 return Math
.round(num
* shift
)/shift
;
2180 * Fires when there's data available to be graphed.
2181 * @param {String} data Raw CSV data to be plotted
2184 Dygraph
.prototype.loadedEvent_
= function(data
) {
2185 this.rawData_
= this.parseCSV_(data
);
2189 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
2190 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
2191 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
2194 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2197 Dygraph
.prototype.addXTicks_
= function() {
2198 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2200 if (this.dateWindow_
) {
2201 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2203 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
2206 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
2207 this.layout_
.setXTicks(xTicks
);
2210 // Time granularity enumeration
2211 Dygraph
.SECONDLY
= 0;
2212 Dygraph
.TWO_SECONDLY
= 1;
2213 Dygraph
.FIVE_SECONDLY
= 2;
2214 Dygraph
.TEN_SECONDLY
= 3;
2215 Dygraph
.THIRTY_SECONDLY
= 4;
2216 Dygraph
.MINUTELY
= 5;
2217 Dygraph
.TWO_MINUTELY
= 6;
2218 Dygraph
.FIVE_MINUTELY
= 7;
2219 Dygraph
.TEN_MINUTELY
= 8;
2220 Dygraph
.THIRTY_MINUTELY
= 9;
2221 Dygraph
.HOURLY
= 10;
2222 Dygraph
.TWO_HOURLY
= 11;
2223 Dygraph
.SIX_HOURLY
= 12;
2225 Dygraph
.WEEKLY
= 14;
2226 Dygraph
.MONTHLY
= 15;
2227 Dygraph
.QUARTERLY
= 16;
2228 Dygraph
.BIANNUAL
= 17;
2229 Dygraph
.ANNUAL
= 18;
2230 Dygraph
.DECADAL
= 19;
2231 Dygraph
.CENTENNIAL
= 20;
2232 Dygraph
.NUM_GRANULARITIES
= 21;
2234 Dygraph
.SHORT_SPACINGS
= [];
2235 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
2236 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
2237 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
2238 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
2239 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
2240 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
2241 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
2242 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
2243 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
2244 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
2245 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
2246 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
2247 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
2248 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
2249 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
2253 * If we used this time granularity, how many ticks would there be?
2254 * This is only an approximation, but it's generally good enough.
2256 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2257 if (granularity
< Dygraph
.MONTHLY
) {
2258 // Generate one tick mark for every fixed interval of time.
2259 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2260 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2262 var year_mod
= 1; // e.g. to only print one point every 10 years.
2263 var num_months
= 12;
2264 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2265 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2266 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2267 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2268 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2270 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2271 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2272 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2279 * Construct an x-axis of nicely-formatted times on meaningful boundaries
2280 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2282 * Returns an array containing {v: millis, label: label} dictionaries.
2284 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2285 var formatter
= this.attr_("xAxisLabelFormatter");
2287 if (granularity
< Dygraph
.MONTHLY
) {
2288 // Generate one tick mark for every fixed interval of time.
2289 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2290 var format
= '%d%b'; // e.g. "1Jan"
2292 // Find a time less than start_time which occurs on a "nice" time boundary
2293 // for this granularity.
2294 var g
= spacing
/ 1000;
2295 var d
= new Date(start_time
);
2296 if (g
<= 60) { // seconds
2297 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2301 if (g
<= 60) { // minutes
2302 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2307 if (g
<= 24) { // days
2308 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2313 if (g
== 7) { // one week
2314 d
.setDate(d
.getDate() - d
.getDay());
2319 start_time
= d
.getTime();
2321 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2322 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2325 // Display a tick mark on the first of a set of months of each year.
2326 // Years get a tick mark iff y % year_mod == 0. This is useful for
2327 // displaying a tick mark once every 10 years, say, on long time scales.
2329 var year_mod
= 1; // e.g. to only print one point every 10 years.
2331 if (granularity
== Dygraph
.MONTHLY
) {
2332 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2333 } else if (granularity
== Dygraph
.QUARTERLY
) {
2334 months
= [ 0, 3, 6, 9 ];
2335 } else if (granularity
== Dygraph
.BIANNUAL
) {
2337 } else if (granularity
== Dygraph
.ANNUAL
) {
2339 } else if (granularity
== Dygraph
.DECADAL
) {
2342 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2346 this.warn("Span of dates is too long");
2349 var start_year
= new Date(start_time
).getFullYear();
2350 var end_year
= new Date(end_time
).getFullYear();
2351 var zeropad
= Dygraph
.zeropad
;
2352 for (var i
= start_year
; i
<= end_year
; i
++) {
2353 if (i
% year_mod
!= 0) continue;
2354 for (var j
= 0; j
< months
.length
; j
++) {
2355 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2356 var t
= Dygraph
.dateStrToMillis(date_str
);
2357 if (t
< start_time
|| t
> end_time
) continue;
2358 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2368 * Add ticks to the x-axis based on a date range.
2369 * @param {Number} startDate Start of the date window (millis since epoch)
2370 * @param {Number} endDate End of the date window (millis since epoch)
2371 * @param {Dygraph} self The dygraph object
2372 * @return { [Object] } Array of {label, value} tuples.
2375 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2376 // TODO(danvk): why does this take 'self' as a param?
2378 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2379 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2380 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2387 return self
.GetXAxis(startDate
, endDate
, chosen
);
2389 // TODO(danvk): signal error.
2395 * This is a list of human-friendly values at which to show tick marks on a log
2396 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2397 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2398 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2400 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2402 for (var power
= -39; power
<= 39; power
++) {
2403 var range
= Math
.pow(10, power
);
2404 for (var mult
= 1; mult
<= 9; mult
++) {
2405 var val
= range
* mult
;
2414 * Implementation of binary search over an array.
2415 * Currently does not work when val is outside the range of arry's values.
2416 * @param { Integer } val the value to search for
2417 * @param { Integer[] } arry is the value over which to search
2418 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2419 * If abs < 0, find the highest entry less than val.
2420 * if abs == 0, find the entry that equals val.
2421 * @param { Integer } [low] The first index in arry to consider (optional)
2422 * @param { Integer } [high] The last index in arry to consider (optional)
2424 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2425 if (low
== null || high
== null) {
2427 high
= arry
.length
- 1;
2435 var validIndex
= function(idx
) {
2436 return idx
>= 0 && idx
< arry
.length
;
2438 var mid
= parseInt((low
+ high
) / 2);
2439 var element
= arry
[mid
];
2440 if (element
== val
) {
2443 if (element
> val
) {
2445 // Accept if element > val, but also if prior element < val.
2447 if (validIndex(idx
) && arry
[idx
] < val
) {
2451 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2453 if (element
< val
) {
2455 // Accept if element < val, but also if prior element > val.
2457 if (validIndex(idx
) && arry
[idx
] > val
) {
2461 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2465 // TODO(konigsberg): Update comment.
2467 * Add ticks when the x axis has numbers on it (instead of dates)
2469 * @param {Number} minV minimum value
2470 * @param {Number} maxV maximum value
2472 * @param {function} attribute accessor function.
2473 * @return {[Object]} Array of {label, value} tuples.
2475 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2476 var attr
= function(k
) {
2477 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2478 return self
.attr_(k
);
2483 for (var i
= 0; i
< vals
.length
; i
++) {
2484 ticks
.push({v
: vals
[i
]});
2487 if (axis_props
&& attr("logscale")) {
2488 var pixelsPerTick
= attr('pixelsPerYLabel');
2489 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2490 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2491 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2492 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2497 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2499 // Count the number of tick values would appear, if we can get at least
2500 // nTicks / 4 accept them
.
2501 var lastDisplayed
= null;
2502 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2503 var axisId
= axis_props
.yAxisId
;
2504 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2505 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2506 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2507 var tick
= { v
: tickValue
};
2508 if (lastDisplayed
== null) {
2510 tickValue
: tickValue
,
2514 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2516 tickValue
: tickValue
,
2525 // Since we went in backwards order.
2530 // ticks.length won't be 0 if the log scale function finds values to insert.
2531 if (ticks
.length
== 0) {
2533 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2534 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2535 // The first spacing greater than pixelsPerYLabel is what we use.
2536 // TODO(danvk): version that works on a log scale.
2537 if (attr("labelsKMG2")) {
2538 var mults
= [1, 2, 4, 8];
2540 var mults
= [1, 2, 5];
2542 var scale
, low_val
, high_val
, nTicks
;
2543 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2544 var pixelsPerTick
= attr('pixelsPerYLabel');
2545 for (var i
= -10; i
< 50; i
++) {
2546 if (attr("labelsKMG2")) {
2547 var base_scale
= Math
.pow(16, i
);
2549 var base_scale
= Math
.pow(10, i
);
2551 for (var j
= 0; j
< mults
.length
; j
++) {
2552 scale
= base_scale
* mults
[j
];
2553 low_val
= Math
.floor(minV
/ scale
) * scale
;
2554 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2555 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2556 var spacing
= self
.height_
/ nTicks
;
2557 // wish I could break out of both loops at once...
2558 if (spacing
> pixelsPerTick
) break;
2560 if (spacing
> pixelsPerTick
) break;
2563 // Construct the set of ticks.
2564 // Allow reverse y-axis if it's explicitly requested.
2565 if (low_val
> high_val
) scale
*= -1;
2566 for (var i
= 0; i
< nTicks
; i
++) {
2567 var tickV
= low_val
+ i
* scale
;
2568 ticks
.push( {v
: tickV
} );
2573 // Add formatted labels to the ticks.
2576 if (attr("labelsKMB")) {
2578 k_labels
= [ "K", "M", "B", "T" ];
2580 if (attr("labelsKMG2")) {
2581 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2583 k_labels
= [ "k", "M", "G", "T" ];
2585 var formatter
= attr('yAxisLabelFormatter') ?
2586 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2588 // Add labels to the ticks.
2589 for (var i
= 0; i
< ticks
.length
; i
++) {
2590 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2591 var tickV
= ticks
[i
].v
;
2592 var absTickV
= Math
.abs(tickV
);
2593 var label
= formatter(tickV
, self
);
2594 if (k_labels
.length
> 0) {
2595 // Round up to an appropriate unit.
2597 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2598 if (absTickV
>= n
) {
2599 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
2604 ticks
[i
].label
= label
;
2612 * Computes the range of the data series (including confidence intervals).
2613 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2614 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2615 * @return [low, high]
2617 Dygraph
.prototype.extremeValues_
= function(series
) {
2618 var minY
= null, maxY
= null;
2620 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2622 // With custom bars, maxY is the max of the high values.
2623 for (var j
= 0; j
< series
.length
; j
++) {
2624 var y
= series
[j
][1][0];
2626 var low
= y
- series
[j
][1][1];
2627 var high
= y
+ series
[j
][1][2];
2628 if (low
> y
) low
= y
; // this can happen with custom bars,
2629 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2630 if (maxY
== null || high
> maxY
) {
2633 if (minY
== null || low
< minY
) {
2638 for (var j
= 0; j
< series
.length
; j
++) {
2639 var y
= series
[j
][1];
2640 if (y
=== null || isNaN(y
)) continue;
2641 if (maxY
== null || y
> maxY
) {
2644 if (minY
== null || y
< minY
) {
2650 return [minY
, maxY
];
2655 * This function is called once when the chart's data is changed or the options
2656 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2657 * idea is that values derived from the chart's data can be computed here,
2658 * rather than every time the chart is drawn. This includes things like the
2659 * number of axes, rolling averages, etc.
2661 Dygraph
.prototype.predraw_
= function() {
2662 // TODO(danvk): move more computations out of drawGraph_ and into here.
2663 this.computeYAxes_();
2665 // Create a new plotter.
2666 if (this.plotter_
) this.plotter_
.clear();
2667 this.plotter_
= new DygraphCanvasRenderer(this,
2672 // The roller sits in the bottom left corner of the chart. We don't know where
2673 // this will be until the options are available, so it's positioned here.
2674 this.createRollInterface_();
2676 // Same thing applies for the labelsDiv. It's right edge should be flush with
2677 // the right edge of the charting area (which may not be the same as the right
2678 // edge of the div, if we have two y-axes.
2679 this.positionLabelsDiv_();
2681 // If the data or options have changed, then we'd better redraw.
2686 * Update the graph with new data. This method is called when the viewing area
2687 * has changed. If the underlying data or options have changed, predraw_ will
2688 * be called before drawGraph_ is called.
2690 * clearSelection, when undefined or true, causes this.clearSelection to be
2691 * called at the end of the draw operation. This should rarely be defined,
2692 * and never true (that is it should be undefined most of the time, and
2697 Dygraph
.prototype.drawGraph_
= function(clearSelection
) {
2698 if (typeof(clearSelection
) === 'undefined') {
2699 clearSelection
= true;
2702 var data
= this.rawData_
;
2704 // This is used to set the second parameter to drawCallback, below.
2705 var is_initial_draw
= this.is_initial_draw_
;
2706 this.is_initial_draw_
= false;
2708 var minY
= null, maxY
= null;
2709 this.layout_
.removeAllDatasets();
2711 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2713 // Loop over the fields (series). Go from the last to the first,
2714 // because if they're stacked that's how we accumulate the values.
2716 var cumulative_y
= []; // For stacked series.
2719 var extremes
= {}; // series name -> [low, high]
2721 // Loop over all fields and create datasets
2722 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2723 if (!this.visibility()[i
- 1]) continue;
2725 var seriesName
= this.attr_("labels")[i
];
2726 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2727 var logScale
= this.attr_('logscale', i
);
2730 for (var j
= 0; j
< data
.length
; j
++) {
2731 var date
= data
[j
][0];
2732 var point
= data
[j
][i
];
2734 // On the log scale, points less than zero do not exist.
2735 // This will create a gap in the chart. Note that this ignores
2736 // connectSeparatedPoints.
2740 series
.push([date
, point
]);
2742 if (point
!= null || !connectSeparatedPoints
) {
2743 series
.push([date
, point
]);
2748 // TODO(danvk): move this into predraw_. It's insane to do it here.
2749 series
= this.rollingAverage(series
, this.rollPeriod_
);
2751 // Prune down to the desired range, if necessary (for zooming)
2752 // Because there can be lines going to points outside of the visible area,
2753 // we actually prune to visible points, plus one on either side.
2754 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2755 if (this.dateWindow_
) {
2756 var low
= this.dateWindow_
[0];
2757 var high
= this.dateWindow_
[1];
2759 // TODO(danvk): do binary search instead of linear search.
2760 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2761 var firstIdx
= null, lastIdx
= null;
2762 for (var k
= 0; k
< series
.length
; k
++) {
2763 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2766 if (series
[k
][0] <= high
) {
2770 if (firstIdx
=== null) firstIdx
= 0;
2771 if (firstIdx
> 0) firstIdx
--;
2772 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2773 if (lastIdx
< series
.length
- 1) lastIdx
++;
2774 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2775 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2776 pruned
.push(series
[k
]);
2780 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2783 var seriesExtremes
= this.extremeValues_(series
);
2786 for (var j
=0; j
<series
.length
; j
++) {
2787 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2790 } else if (this.attr_("stackedGraph")) {
2791 var l
= series
.length
;
2793 for (var j
= 0; j
< l
; j
++) {
2794 // If one data set has a NaN, let all subsequent stacked
2795 // sets inherit the NaN -- only start at 0 for the first set.
2796 var x
= series
[j
][0];
2797 if (cumulative_y
[x
] === undefined
) {
2798 cumulative_y
[x
] = 0;
2801 actual_y
= series
[j
][1];
2802 cumulative_y
[x
] += actual_y
;
2804 series
[j
] = [x
, cumulative_y
[x
]]
2806 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2807 seriesExtremes
[1] = cumulative_y
[x
];
2809 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2810 seriesExtremes
[0] = cumulative_y
[x
];
2814 extremes
[seriesName
] = seriesExtremes
;
2816 datasets
[i
] = series
;
2819 for (var i
= 1; i
< datasets
.length
; i
++) {
2820 if (!this.visibility()[i
- 1]) continue;
2821 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2824 this.computeYAxisRanges_(extremes
);
2825 this.layout_
.setYAxes(this.axes_
);
2829 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2830 var tmp_zoomed_x
= this.zoomed_x_
;
2831 // Tell PlotKit to use this new data and render itself
2832 this.layout_
.setDateWindow(this.dateWindow_
);
2833 this.zoomed_x_
= tmp_zoomed_x
;
2834 this.layout_
.evaluateWithError();
2835 this.plotter_
.clear();
2836 this.plotter_
.render();
2837 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2838 this.canvas_
.height
);
2840 if (is_initial_draw
) {
2841 // Generate a static legend before any particular point is selected.
2842 this.setLegendHTML_();
2844 if (clearSelection
) {
2845 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2846 // We should select the point nearest the page x/y here
, but it
's easier
2847 // to just clear the selection. This prevents erroneous hover dots from
2849 this.clearSelection();
2851 this.clearSelection();
2856 if (this.attr_("drawCallback") !== null) {
2857 this.attr_("drawCallback")(this, is_initial_draw);
2863 * Determine properties of the y-axes which are independent of the data
2864 * currently being displayed. This includes things like the number of axes and
2865 * the style of the axes. It does not include the range of each axis and its
2867 * This fills in this.axes_ and this.seriesToAxisMap_.
2868 * axes_ = [ { options } ]
2869 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2870 * indices are into the axes_ array.
2872 Dygraph.prototype.computeYAxes_ = function() {
2873 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
2874 this.seriesToAxisMap_ = {};
2876 // Get a list of series names.
2877 var labels = this.attr_("labels");
2879 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
2881 // all options which could be applied per-axis:
2889 'axisLabelFontSize
',
2894 // Copy global axis options over to the first axis.
2895 for (var i = 0; i < axisOptions.length; i++) {
2896 var k = axisOptions[i];
2897 var v = this.attr_(k);
2898 if (v) this.axes_[0][k] = v;
2901 // Go through once and add all the axes.
2902 for (var seriesName in series) {
2903 if (!series.hasOwnProperty(seriesName)) continue;
2904 var axis = this.attr_("axis", seriesName);
2906 this.seriesToAxisMap_[seriesName] = 0;
2909 if (typeof(axis) == 'object
') {
2910 // Add a new axis, making a copy of its per-axis options.
2912 Dygraph.update(opts, this.axes_[0]);
2913 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit
this.
2914 var yAxisId
= this.axes_
.length
;
2915 opts
.yAxisId
= yAxisId
;
2917 Dygraph
.update(opts
, axis
);
2918 this.axes_
.push(opts
);
2919 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2923 // Go through one more time and assign series to an axis defined by another
2924 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2925 for (var seriesName
in series
) {
2926 if (!series
.hasOwnProperty(seriesName
)) continue;
2927 var axis
= this.attr_("axis", seriesName
);
2928 if (typeof(axis
) == 'string') {
2929 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2930 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2931 "series " + axis
+ ", which does not define its own axis.");
2934 var idx
= this.seriesToAxisMap_
[axis
];
2935 this.seriesToAxisMap_
[seriesName
] = idx
;
2939 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2940 // this last so that hiding the first series doesn't destroy the axis
2941 // properties of the primary axis.
2942 var seriesToAxisFiltered
= {};
2943 var vis
= this.visibility();
2944 for (var i
= 1; i
< labels
.length
; i
++) {
2946 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2948 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2952 * Returns the number of y-axes on the chart.
2953 * @return {Number} the number of axes.
2955 Dygraph
.prototype.numAxes
= function() {
2957 for (var series
in this.seriesToAxisMap_
) {
2958 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2959 var idx
= this.seriesToAxisMap_
[series
];
2960 if (idx
> last_axis
) last_axis
= idx
;
2962 return 1 + last_axis
;
2967 * Returns axis properties for the given series.
2968 * @param { String } setName The name of the series for which to get axis
2969 * properties, e.g. 'Y1'.
2970 * @return { Object } The axis properties.
2972 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2973 // TODO(danvk): handle errors.
2974 return this.axes_
[this.seriesToAxisMap_
[series
]];
2979 * Determine the value range and tick marks for each axis.
2980 * @param {Object} extremes A mapping from seriesName -> [low, high]
2981 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2983 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2984 // Build a map from axis number -> [list of series names]
2985 var seriesForAxis
= [];
2986 for (var series
in this.seriesToAxisMap_
) {
2987 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2988 var idx
= this.seriesToAxisMap_
[series
];
2989 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2990 seriesForAxis
[idx
].push(series
);
2993 // Compute extreme values, a span and tick marks for each axis.
2994 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2995 var axis
= this.axes_
[i
];
2997 if (!seriesForAxis
[i
]) {
2998 // If no series are defined or visible then use a reasonable default
2999 axis
.extremeRange
= [0, 1];
3001 // Calculate the extremes of extremes.
3002 var series
= seriesForAxis
[i
];
3003 var minY
= Infinity
; // extremes[series[0]][0];
3004 var maxY
= -Infinity
; // extremes[series[0]][1];
3005 var extremeMinY
, extremeMaxY
;
3006 for (var j
= 0; j
< series
.length
; j
++) {
3007 // Only use valid extremes to stop null data series' from corrupting the scale.
3008 extremeMinY
= extremes
[series
[j
]][0];
3009 if (extremeMinY
!= null) {
3010 minY
= Math
.min(extremeMinY
, minY
);
3012 extremeMaxY
= extremes
[series
[j
]][1];
3013 if (extremeMaxY
!= null) {
3014 maxY
= Math
.max(extremeMaxY
, maxY
);
3017 if (axis
.includeZero
&& minY
> 0) minY
= 0;
3019 // Ensure we have a valid scale, otherwise defualt to zero for safety.
3020 if (minY
== Infinity
) minY
= 0;
3021 if (maxY
== -Infinity
) maxY
= 0;
3023 // Add some padding and round up to an integer to be human-friendly.
3024 var span
= maxY
- minY
;
3025 // special case: if we have no sense of scale, use +/-10% of the sole value
.
3026 if (span
== 0) { span
= maxY
; }
3030 if (axis
.logscale
) {
3031 var maxAxisY
= maxY
+ 0.1 * span
;
3032 var minAxisY
= minY
;
3034 var maxAxisY
= maxY
+ 0.1 * span
;
3035 var minAxisY
= minY
- 0.1 * span
;
3037 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
3038 if (!this.attr_("avoidMinZero")) {
3039 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
3040 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
3043 if (this.attr_("includeZero")) {
3044 if (maxY
< 0) maxAxisY
= 0;
3045 if (minY
> 0) minAxisY
= 0;
3048 axis
.extremeRange
= [minAxisY
, maxAxisY
];
3050 if (axis
.valueWindow
) {
3051 // This is only set if the user has zoomed on the y-axis. It is never set
3052 // by a user. It takes precedence over axis.valueRange because, if you set
3053 // valueRange, you'd still expect to be able to pan.
3054 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
3055 } else if (axis
.valueRange
) {
3056 // This is a user-set value range for this axis.
3057 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
3059 axis
.computedValueRange
= axis
.extremeRange
;
3062 // Add ticks. By default, all axes inherit the tick positions of the
3063 // primary axis. However, if an axis is specifically marked as having
3064 // independent ticks, then that is permissible as well.
3065 if (i
== 0 || axis
.independentTicks
) {
3067 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3068 axis
.computedValueRange
[1],
3072 var p_axis
= this.axes_
[0];
3073 var p_ticks
= p_axis
.ticks
;
3074 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
3075 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
3076 var tick_values
= [];
3077 for (var i
= 0; i
< p_ticks
.length
; i
++) {
3078 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
3079 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
3080 tick_values
.push(y_val
);
3084 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3085 axis
.computedValueRange
[1],
3086 this, axis
, tick_values
);
3093 * Calculates the rolling average of a data set.
3094 * If originalData is [label, val], rolls the average of those.
3095 * If originalData is [label, [, it's interpreted as [value, stddev]
3096 * and the roll is returned in the same form, with appropriately reduced
3097 * stddev for each value.
3098 * Note that this is where fractional input (i.e. '5/10') is converted into
3100 * @param {Array} originalData The data in the appropriate format (see above)
3101 * @param {Number} rollPeriod The number of points over which to average the
3104 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
3105 if (originalData
.length
< 2)
3106 return originalData
;
3107 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
3108 var rollingData
= [];
3109 var sigma
= this.attr_("sigma");
3111 if (this.fractions_
) {
3113 var den
= 0; // numerator/denominator
3115 for (var i
= 0; i
< originalData
.length
; i
++) {
3116 num
+= originalData
[i
][1][0];
3117 den
+= originalData
[i
][1][1];
3118 if (i
- rollPeriod
>= 0) {
3119 num
-= originalData
[i
- rollPeriod
][1][0];
3120 den
-= originalData
[i
- rollPeriod
][1][1];
3123 var date
= originalData
[i
][0];
3124 var value
= den
? num
/ den
: 0.0;
3125 if (this.attr_("errorBars")) {
3126 if (this.wilsonInterval_
) {
3127 // For more details on this confidence interval, see:
3128 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
3130 var p
= value
< 0 ? 0 : value
, n
= den
;
3131 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
3132 var denom
= 1 + sigma
* sigma
/ den
;
3133 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
3134 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
3135 rollingData
[i
] = [date
,
3136 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
3138 rollingData
[i
] = [date
, [0, 0, 0]];
3141 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
3142 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
3145 rollingData
[i
] = [date
, mult
* value
];
3148 } else if (this.attr_("customBars")) {
3153 for (var i
= 0; i
< originalData
.length
; i
++) {
3154 var data
= originalData
[i
][1];
3156 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
3158 if (y
!= null && !isNaN(y
)) {
3164 if (i
- rollPeriod
>= 0) {
3165 var prev
= originalData
[i
- rollPeriod
];
3166 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
3173 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
3174 1.0 * (mid
- low
) / count
,
3175 1.0 * (high
- mid
) / count
]];
3178 // Calculate the rolling average for the first rollPeriod - 1 points where
3179 // there is not enough data to roll over the full number of points
3180 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
3181 if (!this.attr_("errorBars")){
3182 if (rollPeriod
== 1) {
3183 return originalData
;
3186 for (var i
= 0; i
< originalData
.length
; i
++) {
3189 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3190 var y
= originalData
[j
][1];
3191 if (y
== null || isNaN(y
)) continue;
3193 sum
+= originalData
[j
][1];
3196 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
3198 rollingData
[i
] = [originalData
[i
][0], null];
3203 for (var i
= 0; i
< originalData
.length
; i
++) {
3207 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3208 var y
= originalData
[j
][1][0];
3209 if (y
== null || isNaN(y
)) continue;
3211 sum
+= originalData
[j
][1][0];
3212 variance
+= Math
.pow(originalData
[j
][1][1], 2);
3215 var stddev
= Math
.sqrt(variance
) / num_ok
;
3216 rollingData
[i
] = [originalData
[i
][0],
3217 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
3219 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
3230 * Parses a date, returning the number of milliseconds since epoch. This can be
3231 * passed in as an xValueParser in the Dygraph constructor.
3232 * TODO(danvk): enumerate formats that this understands.
3233 * @param {String} A date in YYYYMMDD format.
3234 * @return {Number} Milliseconds since epoch.
3236 Dygraph
.dateParser
= function(dateStr
, self
) {
3239 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3240 dateStrSlashed
= dateStr
.replace("-", "/", "g");
3241 while (dateStrSlashed
.search("-") != -1) {
3242 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
3244 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3245 } else if (dateStr
.length
== 8) { // e.g. '20090712'
3246 // TODO(danvk): remove support for this format. It's confusing.
3247 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
3248 + "/" + dateStr
.substr(6,2);
3249 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3251 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3252 // "2009/07/12 12:34:56"
3253 d
= Dygraph
.dateStrToMillis(dateStr
);
3256 if (!d
|| isNaN(d
)) {
3257 self
.error("Couldn't parse " + dateStr
+ " as a date");
3263 * Detects the type of the str (date or numeric) and sets the various
3264 * formatting attributes in this.attrs_ based on this type.
3265 * @param {String} str An x value.
3268 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3270 if (str
.indexOf('-') > 0 ||
3271 str
.indexOf('/') >= 0 ||
3272 isNaN(parseFloat(str
))) {
3274 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3275 // TODO(danvk): remove support for this format.
3280 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3281 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3282 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3283 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3285 // TODO(danvk): use Dygraph.numberFormatter here?
3286 /** @private (shut up, jsdoc!) */
3287 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3288 /** @private (shut up, jsdoc!) */
3289 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3290 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3291 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3296 * Parses the value as a floating point number. This is like the parseFloat()
3297 * built-in, but with a few differences:
3298 * - the empty string is parsed as null, rather than NaN.
3299 * - if the string cannot be parsed at all, an error is logged.
3300 * If the string can't be parsed, this method returns null.
3301 * @param {String} x The string to be parsed
3302 * @param {Number} opt_line_no The line number from which the string comes.
3303 * @param {String} opt_line The text of the line from which the string comes.
3307 // Parse the x as a float or return null if it's not a number.
3308 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3309 var val
= parseFloat(x
);
3310 if (!isNaN(val
)) return val
;
3312 // Try to figure out what happeend.
3313 // If the value is the empty string, parse it as null.
3314 if (/^ *$/.test(x
)) return null;
3316 // If it was actually "NaN", return it as NaN.
3317 if (/^ *nan *$/i.test(x
)) return NaN
;
3319 // Looks like a parsing error.
3320 var msg
= "Unable to parse '" + x
+ "' as a number";
3321 if (opt_line
!== null && opt_line_no
!== null) {
3322 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3331 * Parses a string in a special csv format. We expect a csv file where each
3332 * line is a date point, and the first field in each line is the date string.
3333 * We also expect that all remaining fields represent series.
3334 * if the errorBars attribute is set, then interpret the fields as:
3335 * date, series1, stddev1, series2, stddev2, ...
3336 * @param {[Object]} data See above.
3338 * @return [Object] An array with one entry for each row. These entries
3339 * are an array of cells in that row. The first entry is the parsed x-value for
3340 * the row. The second, third, etc. are the y-values. These can take on one of
3341 * three forms, depending on the CSV and constructor parameters:
3343 * 2. [ value, stddev ]
3344 * 3. [ low value, center value, high value ]
3346 Dygraph
.prototype.parseCSV_
= function(data
) {
3348 var lines
= data
.split("\n");
3350 // Use the default delimiter or fall back to a tab if that makes sense.
3351 var delim
= this.attr_('delimiter');
3352 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3357 if (!('labels' in this.user_attrs_
)) {
3358 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
3360 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
3365 var defaultParserSet
= false; // attempt to auto-detect x value type
3366 var expectedCols
= this.attr_("labels").length
;
3367 var outOfOrder
= false;
3368 for (var i
= start
; i
< lines
.length
; i
++) {
3369 var line
= lines
[i
];
3371 if (line
.length
== 0) continue; // skip blank lines
3372 if (line
[0] == '#') continue; // skip comment lines
3373 var inFields
= line
.split(delim
);
3374 if (inFields
.length
< 2) continue;
3377 if (!defaultParserSet
) {
3378 this.detectTypeFromString_(inFields
[0]);
3379 xParser
= this.attr_("xValueParser");
3380 defaultParserSet
= true;
3382 fields
[0] = xParser(inFields
[0], this);
3384 // If fractions are expected, parse the numbers as "A/B
"
3385 if (this.fractions_) {
3386 for (var j = 1; j < inFields.length; j++) {
3387 // TODO(danvk): figure out an appropriate way to flag parse errors.
3388 var vals = inFields[j].split("/");
3389 if (vals.length != 2) {
3390 this.error('Expected fractional "num
/den
" values in CSV data ' +
3391 "but found a value
'" + inFields[j] + "' on line
" +
3392 (1 + i) + " ('" + line + "') which is not of
this form
.");
3395 fields[j] = [this.parseFloat_(vals[0], i, line),
3396 this.parseFloat_(vals[1], i, line)];
3399 } else if (this.attr_("errorBars
")) {
3400 // If there are error bars, values are (value, stddev) pairs
3401 if (inFields.length % 2 != 1) {
3402 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3403 'but line ' + (1 + i) + ' has an odd number of values (' +
3404 (inFields.length - 1) + "): '" + line + "'");
3406 for (var j = 1; j < inFields.length; j += 2) {
3407 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3408 this.parseFloat_(inFields[j + 1], i, line)];
3410 } else if (this.attr_("customBars
")) {
3411 // Bars are a low;center;high tuple
3412 for (var j = 1; j < inFields.length; j++) {
3413 var val = inFields[j];
3414 if (/^ *$/.test(val)) {
3415 fields[j] = [null, null, null];
3417 var vals = val.split(";");
3418 if (vals.length == 3) {
3419 fields[j] = [ this.parseFloat_(vals[0], i, line),
3420 this.parseFloat_(vals[1], i, line),
3421 this.parseFloat_(vals[2], i, line) ];
3423 this.warning('When using customBars, values must be either blank ' +
3424 'or "low
;center
;high
" tuples (got "' + val +
3425 '" on line ' + (1+i));
3430 // Values are just numbers
3431 for (var j = 1; j < inFields.length; j++) {
3432 fields[j] = this.parseFloat_(inFields[j], i, line);
3435 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3439 if (fields.length != expectedCols) {
3440 this.error("Number of columns
in line
" + i + " (" + fields.length +
3441 ") does not agree
with number of
labels (" + expectedCols +
3445 // If the user specified the 'labels' option and none of the cells of the
3446 // first row parsed correctly, then they probably double-specified the
3447 // labels. We go with the values set in the option, discard this row and
3448 // log a warning to the JS console.
3449 if (i == 0 && this.attr_('labels')) {
3450 var all_null = true;
3451 for (var j = 0; all_null && j < fields.length; j++) {
3452 if (fields[j]) all_null = false;
3455 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3456 "CSV
data ('" + line + "') appears to also contain labels
. " +
3457 "Will drop the CSV labels and
use the option labels
.");
3465 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3466 ret.sort(function(a,b) { return a[0] - b[0] });
3474 * The user has provided their data as a pre-packaged JS array. If the x values
3475 * are numeric, this is the same as dygraphs' internal format. If the x values
3476 * are dates, we need to convert them from Date objects to ms since epoch.
3477 * @param {[Object]} data
3478 * @return {[Object]} data with numeric x values.
3480 Dygraph.prototype.parseArray_ = function(data) {
3481 // Peek at the first x value to see if it's numeric.
3482 if (data.length == 0) {
3483 this.error("Can
't plot empty data set");
3486 if (data[0].length == 0) {
3487 this.error("Data set cannot contain an empty row");
3491 if (this.attr_("labels") == null) {
3492 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3493 "in the options parameter");
3494 this.attrs_.labels = [ "X" ];
3495 for (var i = 1; i < data[0].length; i++) {
3496 this.attrs_.labels.push("Y" + i);
3500 if (Dygraph.isDateLike(data[0][0])) {
3501 // Some intelligent defaults for a date x-axis.
3502 this.attrs_.xValueFormatter = Dygraph.dateString_;
3503 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3504 this.attrs_.xTicker = Dygraph.dateTicker;
3506 // Assume they're all dates
.
3507 var parsedData
= Dygraph
.clone(data
);
3508 for (var i
= 0; i
< data
.length
; i
++) {
3509 if (parsedData
[i
].length
== 0) {
3510 this.error("Row " + (1 + i
) + " of data is empty");
3513 if (parsedData
[i
][0] == null
3514 || typeof(parsedData
[i
][0].getTime
) != 'function'
3515 || isNaN(parsedData
[i
][0].getTime())) {
3516 this.error("x value in row " + (1 + i
) + " is not a Date");
3519 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3523 // Some intelligent defaults for a numeric x-axis.
3524 /** @private (shut up, jsdoc!) */
3525 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3526 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3532 * Parses a DataTable object from gviz.
3533 * The data is expected to have a first column that is either a date or a
3534 * number. All subsequent columns must be numbers. If there is a clear mismatch
3535 * between this.xValueParser_ and the type of the first column, it will be
3536 * fixed. Fills out rawData_.
3537 * @param {[Object]} data See above.
3540 Dygraph
.prototype.parseDataTable_
= function(data
) {
3541 var cols
= data
.getNumberOfColumns();
3542 var rows
= data
.getNumberOfRows();
3544 var indepType
= data
.getColumnType(0);
3545 if (indepType
== 'date' || indepType
== 'datetime') {
3546 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3547 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3548 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3549 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3550 } else if (indepType
== 'number') {
3551 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3552 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3553 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3554 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3556 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3557 "column 1 of DataTable input (Got '" + indepType
+ "')");
3561 // Array of the column indices which contain data (and not annotations).
3563 var annotationCols
= {}; // data index -> [annotation cols]
3564 var hasAnnotations
= false;
3565 for (var i
= 1; i
< cols
; i
++) {
3566 var type
= data
.getColumnType(i
);
3567 if (type
== 'number') {
3569 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3570 // This is OK -- it's an annotation column.
3571 var dataIdx
= colIdx
[colIdx
.length
- 1];
3572 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3573 annotationCols
[dataIdx
] = [i
];
3575 annotationCols
[dataIdx
].push(i
);
3577 hasAnnotations
= true;
3579 this.error("Only 'number' is supported as a dependent type with Gviz." +
3580 " 'string' is only supported if displayAnnotations is true");
3584 // Read column labels
3585 // TODO(danvk): add support back for errorBars
3586 var labels
= [data
.getColumnLabel(0)];
3587 for (var i
= 0; i
< colIdx
.length
; i
++) {
3588 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3589 if (this.attr_("errorBars")) i
+= 1;
3591 this.attrs_
.labels
= labels
;
3592 cols
= labels
.length
;
3595 var outOfOrder
= false;
3596 var annotations
= [];
3597 for (var i
= 0; i
< rows
; i
++) {
3599 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3600 data
.getValue(i
, 0) === null) {
3601 this.warn("Ignoring row " + i
+
3602 " of DataTable because of undefined or null first column.");
3606 if (indepType
== 'date' || indepType
== 'datetime') {
3607 row
.push(data
.getValue(i
, 0).getTime());
3609 row
.push(data
.getValue(i
, 0));
3611 if (!this.attr_("errorBars")) {
3612 for (var j
= 0; j
< colIdx
.length
; j
++) {
3613 var col
= colIdx
[j
];
3614 row
.push(data
.getValue(i
, col
));
3615 if (hasAnnotations
&&
3616 annotationCols
.hasOwnProperty(col
) &&
3617 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3619 ann
.series
= data
.getColumnLabel(col
);
3621 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3623 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3624 if (k
) ann
.text
+= "\n";
3625 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3627 annotations
.push(ann
);
3631 // Strip out infinities, which give dygraphs problems later on.
3632 for (var j
= 0; j
< row
.length
; j
++) {
3633 if (!isFinite(row
[j
])) row
[j
] = null;
3636 for (var j
= 0; j
< cols
- 1; j
++) {
3637 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3640 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3647 this.warn("DataTable is out of order; order it correctly to speed loading.");
3648 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3650 this.rawData_
= ret
;
3652 if (annotations
.length
> 0) {
3653 this.setAnnotations(annotations
, true);
3659 * This is identical to JavaScript's built-in Date.parse() method, except that
3660 * it doesn't get replaced with an incompatible method by aggressive JS
3661 * libraries like MooTools or Joomla.
3662 * @param { String } str The date string, e.g. "2011/05/06"
3663 * @return { Integer } millis since epoch
3665 Dygraph
.dateStrToMillis
= function(str
) {
3666 return new Date(str
).getTime();
3669 // These functions are all based on MochiKit.
3673 Dygraph
.update
= function (self
, o
) {
3674 if (typeof(o
) != 'undefined' && o
!== null) {
3676 if (o
.hasOwnProperty(k
)) {
3687 Dygraph
.isArrayLike
= function (o
) {
3688 var typ
= typeof(o
);
3690 (typ
!= 'object' && !(typ
== 'function' &&
3691 typeof(o
.item
) == 'function')) ||
3693 typeof(o
.length
) != 'number' ||
3704 Dygraph
.isDateLike
= function (o
) {
3705 if (typeof(o
) != "object" || o
=== null ||
3706 typeof(o
.getTime
) != 'function') {
3715 Dygraph
.clone
= function(o
) {
3716 // TODO(danvk): figure out how MochiKit's version works
3718 for (var i
= 0; i
< o
.length
; i
++) {
3719 if (Dygraph
.isArrayLike(o
[i
])) {
3720 r
.push(Dygraph
.clone(o
[i
]));
3730 * Get the CSV data. If it's in a function, call that function. If it's in a
3731 * file, do an XMLHttpRequest to get it.
3734 Dygraph
.prototype.start_
= function() {
3735 if (typeof this.file_
== 'function') {
3736 // CSV string. Pretend we got it via XHR.
3737 this.loadedEvent_(this.file_());
3738 } else if (Dygraph
.isArrayLike(this.file_
)) {
3739 this.rawData_
= this.parseArray_(this.file_
);
3741 } else if (typeof this.file_
== 'object' &&
3742 typeof this.file_
.getColumnRange
== 'function') {
3743 // must be a DataTable from gviz.
3744 this.parseDataTable_(this.file_
);
3746 } else if (typeof this.file_
== 'string') {
3747 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3748 if (this.file_
.indexOf('\n') >= 0) {
3749 this.loadedEvent_(this.file_
);
3751 var req
= new XMLHttpRequest();
3753 req
.onreadystatechange
= function () {
3754 if (req
.readyState
== 4) {
3755 if (req
.status
== 200) {
3756 caller
.loadedEvent_(req
.responseText
);
3761 req
.open("GET", this.file_
, true);
3765 this.error("Unknown data format: " + (typeof this.file_
));
3770 * Changes various properties of the graph. These can include:
3772 * <li>file: changes the source data for the graph</li>
3773 * <li>errorBars: changes whether the data contains stddev</li>
3776 * There's a huge variety of options that can be passed to this method. For a
3777 * full list, see http://dygraphs.com/options.html.
3779 * @param {Object} attrs The new properties and values
3780 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3781 * call to updateOptions(). If you know better, you can pass true to explicitly
3782 * block the redraw. This can be useful for chaining updateOptions() calls,
3783 * avoiding the occasional infinite loop and preventing redraws when it's not
3784 * necessary (e.g. when updating a callback).
3786 Dygraph
.prototype.updateOptions
= function(attrs
, block_redraw
) {
3787 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3789 // TODO(danvk): this is a mess. Move these options into attr_.
3790 if ('rollPeriod' in attrs
) {
3791 this.rollPeriod_
= attrs
.rollPeriod
;
3793 if ('dateWindow' in attrs
) {
3794 this.dateWindow_
= attrs
.dateWindow
;
3795 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3796 this.zoomed_x_
= attrs
.dateWindow
!= null;
3799 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3800 this.zoomed_y_
= attrs
.valueRange
!= null;
3803 // TODO(danvk): validate per-series options.
3808 // highlightCircleSize
3810 Dygraph
.update(this.user_attrs_
, attrs
);
3812 if (attrs
['file']) {
3813 this.file_
= attrs
['file'];
3814 if (!block_redraw
) this.start_();
3816 if (!block_redraw
) this.predraw_();
3821 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3822 * containing div (which has presumably changed size since the dygraph was
3823 * instantiated. If the width/height are specified, the div will be resized.
3825 * This is far more efficient than destroying and re-instantiating a
3826 * Dygraph, since it doesn't have to reparse the underlying data.
3828 * @param {Number} [width] Width (in pixels)
3829 * @param {Number} [height] Height (in pixels)
3831 Dygraph
.prototype.resize
= function(width
, height
) {
3832 if (this.resize_lock
) {
3835 this.resize_lock
= true;
3837 if ((width
=== null) != (height
=== null)) {
3838 this.warn("Dygraph.resize() should be called with zero parameters or " +
3839 "two non-NULL parameters. Pretending it was zero.");
3840 width
= height
= null;
3843 // TODO(danvk): there should be a clear() method.
3844 this.maindiv_
.innerHTML
= "";
3845 this.attrs_
.labelsDiv
= null;
3848 this.maindiv_
.style
.width
= width
+ "px";
3849 this.maindiv_
.style
.height
= height
+ "px";
3850 this.width_
= width
;
3851 this.height_
= height
;
3853 this.width_
= this.maindiv_
.offsetWidth
;
3854 this.height_
= this.maindiv_
.offsetHeight
;
3857 this.createInterface_();
3860 this.resize_lock
= false;
3864 * Adjusts the number of points in the rolling average. Updates the graph to
3865 * reflect the new averaging period.
3866 * @param {Number} length Number of points over which to average the data.
3868 Dygraph
.prototype.adjustRoll
= function(length
) {
3869 this.rollPeriod_
= length
;
3874 * Returns a boolean array of visibility statuses.
3876 Dygraph
.prototype.visibility
= function() {
3877 // Do lazy-initialization, so that this happens after we know the number of
3879 if (!this.attr_("visibility")) {
3880 this.attrs_
["visibility"] = [];
3882 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3883 this.attr_("visibility").push(true);
3885 return this.attr_("visibility");
3889 * Changes the visiblity of a series.
3891 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3892 var x
= this.visibility();
3893 if (num
< 0 || num
>= x
.length
) {
3894 this.warn("invalid series number in setVisibility: " + num
);
3902 * Update the list of annotations and redraw the chart.
3904 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3905 // Only add the annotation CSS rule once we know it will be used.
3906 Dygraph
.addAnnotationRule();
3907 this.annotations_
= ann
;
3908 this.layout_
.setAnnotations(this.annotations_
);
3909 if (!suppressDraw
) {
3915 * Return the list of annotations.
3917 Dygraph
.prototype.annotations
= function() {
3918 return this.annotations_
;
3922 * Get the index of a series (column) given its name. The first column is the
3923 * x-axis, so the data series start with index 1.
3925 Dygraph
.prototype.indexFromSetName
= function(name
) {
3926 var labels
= this.attr_("labels");
3927 for (var i
= 0; i
< labels
.length
; i
++) {
3928 if (labels
[i
] == name
) return i
;
3935 * Adds a default style for the annotation CSS classes to the document. This is
3936 * only executed when annotations are actually used. It is designed to only be
3937 * called once -- all calls after the first will return immediately.
3939 Dygraph
.addAnnotationRule
= function() {
3940 if (Dygraph
.addedAnnotationCSS
) return;
3942 var rule
= "border: 1px solid black; " +
3943 "background-color: white; " +
3944 "text-align: center;";
3946 var styleSheetElement
= document
.createElement("style");
3947 styleSheetElement
.type
= "text/css";
3948 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3950 // Find the first style sheet that we can access.
3951 // We may not add a rule to a style sheet from another domain for security
3952 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3953 // adds its own style sheets from google.com.
3954 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3955 if (document
.styleSheets
[i
].disabled
) continue;
3956 var mysheet
= document
.styleSheets
[i
];
3958 if (mysheet
.insertRule
) { // Firefox
3959 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3960 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3961 } else if (mysheet
.addRule
) { // IE
3962 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3964 Dygraph
.addedAnnotationCSS
= true;
3967 // Was likely a security exception.
3971 this.warn("Unable to add default annotation CSS rule; display may be off.");
3976 * Create a new canvas element. This is more complex than a simple
3977 * document.createElement("canvas") because of IE and excanvas.
3979 Dygraph
.createCanvas
= function() {
3980 var canvas
= document
.createElement("canvas");
3982 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3983 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3984 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3992 * A wrapper around Dygraph that implements the gviz API.
3993 * @param {Object} container The DOM object the visualization should live in.
3995 Dygraph
.GVizChart
= function(container
) {
3996 this.container
= container
;
3999 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
4000 // Clear out any existing dygraph.
4001 // TODO(danvk): would it make more sense to simply redraw using the current
4002 // date_graph object?
4003 this.container
.innerHTML
= '';
4004 if (typeof(this.date_graph
) != 'undefined') {
4005 this.date_graph
.destroy();
4008 this.date_graph
= new Dygraph(this.container
, data
, options
);
4012 * Google charts compatible setSelection
4013 * Only row selection is supported, all points in the row will be highlighted
4014 * @param {Array} array of the selected cells
4017 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
4019 if (selection_array
.length
) {
4020 row
= selection_array
[0].row
;
4022 this.date_graph
.setSelection(row
);
4026 * Google charts compatible getSelection implementation
4027 * @return {Array} array of the selected cells
4030 Dygraph
.GVizChart
.prototype.getSelection
= function() {
4033 var row
= this.date_graph
.getSelection();
4035 if (row
< 0) return selection
;
4038 for (var i
in this.date_graph
.layout_
.datasets
) {
4039 selection
.push({row
: row
, column
: col
});
4046 // Older pages may still use this name.
4047 DateGraph
= Dygraph
;
4049 // <REMOVE_FOR_COMBINED>
4050 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
4053 "default": "parseFloat() or Date.parse()*",
4054 "labels": ["CSV parsing"],
4055 "type": "function(str) -> number",
4056 "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."
4060 "labels": ["Data Line display"],
4062 "description": "If set, stack series on top of one another rather than drawing them independently."
4066 "labels": ["Data Line display"],
4068 "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."
4070 "labelsDivStyles": {
4072 "labels": ["Legend"],
4074 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
4078 "labels": ["Data Line display"],
4080 "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."
4084 "labels": ["Overall display"],
4086 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4090 "labels": ["Callbacks"],
4091 "type": "function(minDate, maxDate, yRanges)",
4092 "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."
4094 "pointClickCallback": {
4096 "labels": ["Callbacks", "Interactive Elements"],
4101 "default": "(see description)",
4102 "labels": ["Data Series Colors"],
4103 "type": "array<string>",
4104 "example": "['red', '#00FF00']",
4105 "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."
4107 "connectSeparatedPoints": {
4109 "labels": ["Data Line display"],
4111 "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."
4113 "highlightCallback": {
4115 "labels": ["Callbacks"],
4116 "type": "function(event, x, points,row)",
4117 "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>"
4121 "labels": ["Axis display"],
4123 "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"
4127 "labels": ["Error Bars", "Rolling Averages"],
4128 "type": "integer >= 1",
4129 "description": "Number of days over which to average data. Discussed extensively above."
4131 "unhighlightCallback": {
4133 "labels": ["Callbacks"],
4134 "type": "function(event)",
4135 "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."
4139 "labels": ["Axis display"],
4141 "description": "The size of the line to display next to each tick mark on x- or y-axes."
4143 "labelsSeparateLines": {
4145 "labels": ["Legend"],
4147 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
4149 "xValueFormatter": {
4150 "default": "(Round to 2 decimal places)",
4151 "labels": ["Axis display"],
4152 "type": "function(x)",
4153 "description": "Function to provide a custom display format for the X value for mouseover."
4155 "pixelsPerYLabel": {
4157 "labels": ["Axis display", "Grid"],
4159 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4161 "annotationMouseOverHandler": {
4163 "labels": ["Annotations"],
4164 "type": "function(annotation, point, dygraph, event)",
4165 "description": "If provided, this function is called whenever the user mouses over an annotation."
4167 "annotationMouseOutHandler": {
4169 "labels": ["Annotations"],
4170 "type": "function(annotation, point, dygraph, event)",
4171 "description": "If provided, this function is called whenever the user mouses out of an annotation."
4173 "annotationClickHandler": {
4175 "labels": ["Annotations"],
4176 "type": "function(annotation, point, dygraph, event)",
4177 "description": "If provided, this function is called whenever the user clicks on an annotation."
4179 "annotationDblClickHandler": {
4181 "labels": ["Annotations"],
4182 "type": "function(annotation, point, dygraph, event)",
4183 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
4187 "labels": ["Callbacks"],
4188 "type": "function(dygraph, is_initial)",
4189 "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."
4193 "labels": ["Value display/formatting"],
4195 "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."
4199 "labels": ["CSV parsing"],
4201 "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."
4203 "axisLabelFontSize": {
4205 "labels": ["Axis display"],
4207 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4209 "underlayCallback": {
4211 "labels": ["Callbacks"],
4212 "type": "function(canvas, area, dygraph)",
4213 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
4217 "labels": ["Overall display"],
4219 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4221 "interactionModel": {
4223 "labels": ["Interactive Elements"],
4225 "description": "TODO(konigsberg): document this"
4228 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4229 "labels": ["Axis display"],
4230 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4231 "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."
4233 "xAxisLabelWidth": {
4235 "labels": ["Axis display"],
4237 "description": "Width, in pixels, of the x-axis labels."
4239 "showLabelsOnHighlight": {
4241 "labels": ["Interactive Elements", "Legend"],
4243 "description": "Whether to show the legend upon mouseover."
4246 "default": "(none)",
4247 "labels": ["Axis display"],
4248 "type": "string or object",
4249 "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."
4251 "pixelsPerXLabel": {
4253 "labels": ["Axis display", "Grid"],
4255 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4259 "labels": ["Legend"],
4260 "type": "DOM element or string",
4261 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4262 "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."
4266 "labels": ["CSV parsing", "Error Bars"],
4268 "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)."
4272 "labels": ["Axis display"],
4274 "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."
4278 "labels": ["Data Line display"],
4280 "example": "0.5, 2.0",
4281 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4285 "labels": ["Error Bars"],
4287 "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."
4291 "labels": ["Data Line display"],
4293 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4295 "highlightCircleSize": {
4297 "labels": ["Interactive Elements"],
4299 "description": "The size in pixels of the dot drawn over highlighted points."
4302 "default": "rgb(128,128,128)",
4304 "type": "red, blue",
4305 "description": "The color of the gridlines."
4308 "default": "[true, true, ...]",
4309 "labels": ["Data Line display"],
4310 "type": "Array of booleans",
4311 "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."
4314 "default": "Full range of the input is shown",
4315 "labels": ["Axis display"],
4316 "type": "Array of two numbers",
4317 "example": "[10, 110]",
4318 "description": "Explicitly set the vertical range of the graph to [low, high]."
4322 "labels": ["Legend"],
4324 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4326 "colorSaturation": {
4328 "labels": ["Data Series Colors"],
4329 "type": "float (0.0 - 1.0)",
4330 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4332 "yAxisLabelWidth": {
4334 "labels": ["Axis display"],
4336 "description": "Width, in pixels, of the y-axis labels. This also affects the amount of space available for a y-axis chart label."
4338 "hideOverlayOnMouseOut": {
4340 "labels": ["Interactive Elements", "Legend"],
4342 "description": "Whether to hide the legend when the mouse leaves the chart area."
4344 "yValueFormatter": {
4345 "default": "(Round to 2 decimal places)",
4346 "labels": ["Axis display"],
4347 "type": "function(x)",
4348 "description": "Function to provide a custom display format for the Y value for mouseover."
4351 "default": "onmouseover",
4352 "labels": ["Legend"],
4354 "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."
4356 "labelsShowZeroValues": {
4358 "labels": ["Legend"],
4360 "description": "Show zero value labels in the labelsDiv."
4364 "labels": ["Data Line display"],
4366 "description": "When set, display the graph as a step plot instead of a line plot."
4370 "labels": ["Value display/formatting"],
4372 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4376 "labels": ["Overall display"],
4378 "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."
4382 "labels": ["Axis display"],
4384 "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."
4386 "xAxisLabelFormatter": {
4387 "default": "Dygraph.dateAxisFormatter",
4388 "labels": ["Axis display", "Value display/formatting"],
4389 "type": "function(date, granularity)",
4390 "description": "Function to call to format values along the x axis."
4393 "snippet": "function(e, date){<br> alert(date);<br>}",
4395 "labels": ["Callbacks"],
4396 "type": "function(e, date)",
4397 "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."
4399 "yAxisLabelFormatter": {
4400 "default": "yValueFormatter",
4401 "labels": ["Axis display", "Value display/formatting"],
4402 "type": "function(x)",
4403 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4406 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4407 "labels": ["Legend"],
4408 "type": "array<string>",
4409 "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."
4412 "default": "Full range of the input is shown",
4413 "labels": ["Axis display"],
4414 "type": "Array of two Dates or numbers",
4415 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4416 "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."
4420 "labels": ["Interactive Elements", "Rolling Averages"],
4422 "description": "If the rolling average period text box should be shown."
4426 "labels": ["Error Bars"],
4428 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4432 "labels": ["CSV parsing", "Error Bars"],
4434 "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."
4438 "labels": ["Data Series Colors"],
4439 "type": "float (0.0 - 1.0)",
4440 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4444 "labels": ["CSV parsing", "Error Bars"],
4446 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4448 "displayAnnotations": {
4450 "labels": ["Annotations"],
4452 "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."
4454 "panEdgeFraction": {
4456 "labels": ["Axis Display", "Interactive Elements"],
4459 "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."
4462 "labels": ["Chart labels"],
4465 "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."
4469 "labels": ["Chart labels"],
4471 "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."
4474 "labels": ["Chart labels"],
4477 "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."
4480 "labels": ["Chart labels"],
4483 "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."
4486 "labels": ["Chart labels"],
4489 "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."
4492 "labels": ["Chart labels"],
4495 "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."
4497 "isZoomedIgnoreProgrammaticZoom" : {
4499 "labels": ["Zooming"],
4501 "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."
4507 "description" : "Whether to display vertical gridlines under the chart."
4513 "description" : "Whether to display horizontal gridlines under the chart."
4517 "labels": ["Axis display"],
4519 "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."
4523 "labels": ["Axis display"],
4525 "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."
4531 "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."
4535 "labels": ["Axis display"],
4537 "description" : "Thickness (in pixels) of the x- and y-axis lines."
4541 "labels": ["Axis display"],
4543 "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)'."
4547 "labels": ["Error bars", "Data Series Colors"],
4548 "type": "float (0.0 - 1.0)",
4549 "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."
4553 "labels": ["Axis display"],
4555 "description" : "Color for x- and y-axis labels. This is a CSS color string."
4559 "labels": ["Axis display", "Chart labels"],
4561 "description" : "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls "
4565 "labels": ["Value display/formatting"],
4567 "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."
4569 "digitsAfterDecimal" : {
4571 "labels": ["Value display/formatting"],
4573 "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."
4575 "maxNumberWidth" : {
4577 "labels": ["Value display/formatting"],
4579 "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."
4582 "default": "(set when constructed)",
4584 "type": "string (URL of CSV or CSV), GViz DataTable or 2D Array",
4585 "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."
4589 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4590 // JSON. This assumption cannot be checked in JS, but it will be checked when
4591 // documentation is generated by the generate-documentation.py script. For the
4592 // most part, this just means that you should always use double quotes.
4594 // Do a quick sanity check on the options reference.
4596 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4597 var flds
= ['type', 'default', 'description'];
4605 'Data Line display',
4606 'Data Series Colors',
4609 'Interactive Elements',
4613 'Value display/formatting',
4617 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4619 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4620 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4621 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4622 for (var i
= 0; i
< flds
.length
; i
++) {
4623 if (!op
.hasOwnProperty(flds
[i
])) {
4624 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4625 } else if (typeof(op
[flds
[i
]]) != 'string') {
4626 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4629 var labels
= op
['labels'];
4630 if (typeof(labels
) !== 'object') {
4631 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4632 for (var i
= 0; i
< labels
.length
; i
++) {
4633 if (!cats
.hasOwnProperty(labels
[i
])) {
4634 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4635 '", which is invalid.');
4641 // </REMOVE_FOR_COMBINED
>