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;
88 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
90 Dygraph
.LOG_SCALE
= 10;
91 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
93 Dygraph
.log10
= function(x
) {
94 return Math
.log(x
) / Dygraph
.LN_TEN
;
97 // Default attribute values.
98 Dygraph
.DEFAULT_ATTRS
= {
99 highlightCircleSize
: 3,
105 // TODO(danvk): move defaults from createStatusMessage_ here.
107 labelsSeparateLines
: false,
108 labelsShowZeroValues
: true,
111 showLabelsOnHighlight
: true,
113 yValueFormatter
: function(a
,b
) { return Dygraph
.numberFormatter(a
,b
); },
114 digitsAfterDecimal
: 2,
121 axisLabelFontSize
: 14,
124 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
128 xValueFormatter
: Dygraph
.dateString_
,
129 xValueParser
: Dygraph
.dateParser
,
130 xTicker
: Dygraph
.dateTicker
,
137 wilsonInterval
: true, // only relevant if fractions is true
141 connectSeparatedPoints
: false,
144 hideOverlayOnMouseOut
: true,
146 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
147 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
152 // Sizes of the various chart labels.
157 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
160 // Various logging levels.
166 // Directions for panning and zooming. Use bit operations when combined
167 // values are possible.
168 Dygraph
.HORIZONTAL
= 1;
169 Dygraph
.VERTICAL
= 2;
171 // Used for initializing annotation CSS rules only once.
172 Dygraph
.addedAnnotationCSS
= false;
176 * Return the 2d context for a dygraph canvas.
178 * This method is only exposed for the sake of replacing the function in
179 * automated tests, e.g.
181 * var oldFunc = Dygraph.getContext();
182 * Dygraph.getContext = function(canvas) {
183 * var realContext = oldFunc(canvas);
184 * return new Proxy(realContext);
187 Dygraph
.getContext
= function(canvas
) {
188 return canvas
.getContext("2d");
191 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
192 // Labels is no longer a constructor parameter, since it's typically set
193 // directly from the data source. It also conains a name for the x-axis,
194 // which the previous constructor form did not.
195 if (labels
!= null) {
196 var new_labels
= ["Date"];
197 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
198 Dygraph
.update(attrs
, { 'labels': new_labels
});
200 this.__init__(div
, file
, attrs
);
204 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
205 * and context <canvas> inside of it. See the constructor for details.
207 * @param {Element} div the Element to render the graph into.
208 * @param {String | Function} file Source data
209 * @param {Object} attrs Miscellaneous other options
212 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
213 // Hack for IE: if we're using excanvas and the document hasn't finished
214 // loading yet (and hence may not have initialized whatever it needs to
215 // initialize), then keep calling this routine periodically until it has.
216 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
217 typeof(G_vmlCanvasManager
) != 'undefined' &&
218 document
.readyState
!= 'complete') {
220 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
223 // Support two-argument constructor
224 if (attrs
== null) { attrs
= {}; }
226 // Copy the important bits into the object
227 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
230 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
231 this.previousVerticalX_
= -1;
232 this.fractions_
= attrs
.fractions
|| false;
233 this.dateWindow_
= attrs
.dateWindow
|| null;
235 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
236 this.is_initial_draw_
= true;
237 this.annotations_
= [];
239 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
240 this.zoomed_x_
= false;
241 this.zoomed_y_
= false;
243 // Clear the div. This ensure that, if multiple dygraphs are passed the same
244 // div, then only one will be drawn.
247 // If the div isn't already sized then inherit from our attrs or
248 // give it a default size.
249 if (div
.style
.width
== '') {
250 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
252 if (div
.style
.height
== '') {
253 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
255 this.width_
= parseInt(div
.style
.width
, 10);
256 this.height_
= parseInt(div
.style
.height
, 10);
257 // The div might have been specified as percent of the current window size,
258 // convert that to an appropriate number of pixels.
259 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
260 this.width_
= div
.offsetWidth
;
262 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
263 this.height_
= div
.offsetHeight
;
266 if (this.width_
== 0) {
267 this.error("dygraph has zero width. Please specify a width in pixels.");
269 if (this.height_
== 0) {
270 this.error("dygraph has zero height. Please specify a height in pixels.");
273 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
274 if (attrs
['stackedGraph']) {
275 attrs
['fillGraph'] = true;
276 // TODO(nikhilk): Add any other stackedGraph checks here.
279 // Dygraphs has many options, some of which interact with one another.
280 // To keep track of everything, we maintain two sets of options:
282 // this.user_attrs_ only options explicitly set by the user.
283 // this.attrs_ defaults, options derived from user_attrs_, data.
285 // Options are then accessed this.attr_('attr'), which first looks at
286 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
287 // defaults without overriding behavior that the user specifically asks for.
288 this.user_attrs_
= {};
289 Dygraph
.update(this.user_attrs_
, attrs
);
292 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
294 this.boundaryIds_
= [];
296 // Make a note of whether labels will be pulled from the CSV file.
297 this.labelsFromCSV_
= (this.attr_("labels") == null);
299 // Create the containing DIV and other interactive elements
300 this.createInterface_();
306 * Returns the zoomed status of the chart for one or both axes.
308 * Axis is an optional parameter. Can be set to 'x' or 'y'.
310 * The zoomed status for an axis is set whenever a user zooms using the mouse
311 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
312 * option is also specified).
314 Dygraph
.prototype.isZoomed
= function(axis
) {
315 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
316 if (axis
== 'x') return this.zoomed_x_
;
317 if (axis
== 'y') return this.zoomed_y_
;
318 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
322 * Returns information about the Dygraph object, including its containing ID.
324 Dygraph
.prototype.toString
= function() {
325 var maindiv
= this.maindiv_
;
326 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
327 return "[Dygraph " + id
+ "]";
332 * Returns the value of an option. This may be set by the user (either in the
333 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
335 * @param { String } name The name of the option, e.g. 'rollPeriod'.
336 * @param { String } [seriesName] The name of the series to which the option
337 * will be applied. If no per-series value of this option is available, then
338 * the global value is returned. This is optional.
339 * @return { ... } The value of the option.
341 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
342 // <REMOVE_FOR_COMBINED>
343 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
344 this.error('Must include options reference JS for testing');
345 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
346 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
347 'in the Dygraphs.OPTIONS_REFERENCE listing.');
348 // Only log this error once.
349 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
351 // </REMOVE_FOR_COMBINED
>
353 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
354 this.user_attrs_
[seriesName
] != null &&
355 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
356 return this.user_attrs_
[seriesName
][name
];
357 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
358 return this.user_attrs_
[name
];
359 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
360 return this.attrs_
[name
];
366 // TODO(danvk): any way I can get the line numbers to be this.warn call?
369 * Log an error on the JS console at the given severity.
370 * @param { Integer } severity One of Dygraph.{DEBUG,INFO,WARNING,ERROR}
371 * @param { String } The message to log.
373 Dygraph
.prototype.log
= function(severity
, message
) {
374 if (typeof(console
) != 'undefined') {
377 console
.debug('dygraphs: ' + message
);
380 console
.info('dygraphs: ' + message
);
382 case Dygraph
.WARNING
:
383 console
.warn('dygraphs: ' + message
);
386 console
.error('dygraphs: ' + message
);
393 Dygraph
.prototype.info
= function(message
) {
394 this.log(Dygraph
.INFO
, message
);
398 Dygraph
.prototype.warn
= function(message
) {
399 this.log(Dygraph
.WARNING
, message
);
403 Dygraph
.prototype.error
= function(message
) {
404 this.log(Dygraph
.ERROR
, message
);
408 * Returns the current rolling period, as set by the user or an option.
409 * @return {Number} The number of points in the rolling window
411 Dygraph
.prototype.rollPeriod
= function() {
412 return this.rollPeriod_
;
416 * Returns the currently-visible x-range. This can be affected by zooming,
417 * panning or a call to updateOptions.
418 * Returns a two-element array: [left, right].
419 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
421 Dygraph
.prototype.xAxisRange
= function() {
422 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
426 * Returns the lower- and upper-bound x-axis values of the
429 Dygraph
.prototype.xAxisExtremes
= function() {
430 var left
= this.rawData_
[0][0];
431 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
432 return [left
, right
];
436 * Returns the currently-visible y-range for an axis. This can be affected by
437 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
438 * called with no arguments, returns the range of the first axis.
439 * Returns a two-element array: [bottom, top].
441 Dygraph
.prototype.yAxisRange
= function(idx
) {
442 if (typeof(idx
) == "undefined") idx
= 0;
443 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
444 return [ this.axes_
[idx
].computedValueRange
[0],
445 this.axes_
[idx
].computedValueRange
[1] ];
449 * Returns the currently-visible y-ranges for each axis. This can be affected by
450 * zooming, panning, calls to updateOptions, etc.
451 * Returns an array of [bottom, top] pairs, one for each y-axis.
453 Dygraph
.prototype.yAxisRanges
= function() {
455 for (var i
= 0; i
< this.axes_
.length
; i
++) {
456 ret
.push(this.yAxisRange(i
));
461 // TODO(danvk): use these functions throughout dygraphs.
463 * Convert from data coordinates to canvas/div X/Y coordinates.
464 * If specified, do this conversion for the coordinate system of a particular
465 * axis. Uses the first axis by default.
466 * Returns a two-element array: [X, Y]
468 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
469 * instead of toDomCoords(null, y, axis).
471 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
472 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
476 * Convert from data x coordinates to canvas/div X coordinate.
477 * If specified, do this conversion for the coordinate system of a particular
479 * Returns a single value or null if x is null.
481 Dygraph
.prototype.toDomXCoord
= function(x
) {
486 var area
= this.plotter_
.area
;
487 var xRange
= this.xAxisRange();
488 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
492 * Convert from data x coordinates to canvas/div Y coordinate and optional
493 * axis. Uses the first axis by default.
495 * returns a single value or null if y is null.
497 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
498 var pct
= this.toPercentYCoord(y
, axis
);
503 var area
= this.plotter_
.area
;
504 return area
.y
+ pct
* area
.h
;
508 * Convert from canvas/div coords to data coordinates.
509 * If specified, do this conversion for the coordinate system of a particular
510 * axis. Uses the first axis by default.
511 * Returns a two-element array: [X, Y].
513 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
514 * instead of toDataCoords(null, y, axis).
516 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
517 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
521 * Convert from canvas/div x coordinate to data coordinate.
523 * If x is null, this returns null.
525 Dygraph
.prototype.toDataXCoord
= function(x
) {
530 var area
= this.plotter_
.area
;
531 var xRange
= this.xAxisRange();
532 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
536 * Convert from canvas/div y coord to value.
538 * If y is null, this returns null.
539 * if axis is null, this uses the first axis.
541 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
546 var area
= this.plotter_
.area
;
547 var yRange
= this.yAxisRange(axis
);
549 if (typeof(axis
) == "undefined") axis
= 0;
550 if (!this.axes_
[axis
].logscale
) {
551 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
553 // Computing the inverse of toDomCoord.
554 var pct
= (y
- area
.y
) / area
.h
556 // Computing the inverse of toPercentYCoord. The function was arrived at with
557 // the following steps:
559 // Original calcuation:
560 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
562 // Move denominator to both sides:
563 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
565 // subtract logr1, and take the negative value.
566 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
568 // Swap both sides of the equation, and we can compute the log of the
569 // return value. Which means we just need to use that as the exponent in
571 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
573 var logr1
= Dygraph
.log10(yRange
[1]);
574 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
575 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
581 * Converts a y for an axis to a percentage from the top to the
582 * bottom of the drawing area.
584 * If the coordinate represents a value visible on the canvas, then
585 * the value will be between 0 and 1, where 0 is the top of the canvas.
586 * However, this method will return values outside the range, as
587 * values can fall outside the canvas.
589 * If y is null, this returns null.
590 * if axis is null, this uses the first axis.
592 * @param { Number } y The data y-coordinate.
593 * @param { Number } [axis] The axis number on which the data coordinate lives.
594 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
596 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
600 if (typeof(axis
) == "undefined") axis
= 0;
602 var area
= this.plotter_
.area
;
603 var yRange
= this.yAxisRange(axis
);
606 if (!this.axes_
[axis
].logscale
) {
607 // yRange[1] - y is unit distance from the bottom.
608 // yRange[1] - yRange[0] is the scale of the range.
609 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
610 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
612 var logr1
= Dygraph
.log10(yRange
[1]);
613 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
619 * Converts an x value to a percentage from the left to the right of
622 * If the coordinate represents a value visible on the canvas, then
623 * the value will be between 0 and 1, where 0 is the left of the canvas.
624 * However, this method will return values outside the range, as
625 * values can fall outside the canvas.
627 * If x is null, this returns null.
628 * @param { Number } x The data x-coordinate.
629 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
631 Dygraph
.prototype.toPercentXCoord
= function(x
) {
636 var xRange
= this.xAxisRange();
637 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
641 * Returns the number of columns (including the independent variable).
642 * @return { Integer } The number of columns.
644 Dygraph
.prototype.numColumns
= function() {
645 return this.rawData_
[0].length
;
649 * Returns the number of rows (excluding any header/label row).
650 * @return { Integer } The number of rows, less any header.
652 Dygraph
.prototype.numRows
= function() {
653 return this.rawData_
.length
;
657 * Returns the value in the given row and column. If the row and column exceed
658 * the bounds on the data, returns null. Also returns null if the value is
660 * @param { Number} row The row number of the data (0-based). Row 0 is the
661 * first row of data, not a header row.
662 * @param { Number} col The column number of the data (0-based)
663 * @return { Number } The value in the specified cell or null if the row/col
666 Dygraph
.prototype.getValue
= function(row
, col
) {
667 if (row
< 0 || row
> this.rawData_
.length
) return null;
668 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
670 return this.rawData_
[row
][col
];
675 * Add an event handler. This smooths a difference between IE and the rest of
677 * @param { DOM element } el The element to add the event to.
678 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
679 * @param { Function } fn The function to call on the event. The function takes
680 * one parameter: the event object.
682 Dygraph
.addEvent
= function(el
, evt
, fn
) {
683 var normed_fn
= function(e
) {
684 if (!e
) var e
= window
.event
;
687 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
688 el
.addEventListener(evt
, normed_fn
, false);
690 el
.attachEvent('on' + evt
, normed_fn
);
697 * Cancels further processing of an event. This is useful to prevent default
698 * browser actions, e.g. highlighting text on a double-click.
699 * Based on the article at
700 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
701 * @param { Event } e The event whose normal behavior should be canceled.
703 Dygraph
.cancelEvent
= function(e
) {
704 e
= e
? e
: window
.event
;
705 if (e
.stopPropagation
) {
708 if (e
.preventDefault
) {
711 e
.cancelBubble
= true;
713 e
.returnValue
= false;
719 * Generates interface elements for the Dygraph: a containing div, a div to
720 * display the current point, and a textbox to adjust the rolling average
721 * period. Also creates the Renderer/Layout elements.
724 Dygraph
.prototype.createInterface_
= function() {
725 // Create the all-enclosing graph div
726 var enclosing
= this.maindiv_
;
728 this.graphDiv
= document
.createElement("div");
729 this.graphDiv
.style
.width
= this.width_
+ "px";
730 this.graphDiv
.style
.height
= this.height_
+ "px";
731 enclosing
.appendChild(this.graphDiv
);
733 // Create the canvas for interactive parts of the chart.
734 this.canvas_
= Dygraph
.createCanvas();
735 this.canvas_
.style
.position
= "absolute";
736 this.canvas_
.width
= this.width_
;
737 this.canvas_
.height
= this.height_
;
738 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
739 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
741 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
743 // ... and for static parts of the chart.
744 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
745 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
747 // The interactive parts of the graph are drawn on top of the chart.
748 this.graphDiv
.appendChild(this.hidden_
);
749 this.graphDiv
.appendChild(this.canvas_
);
750 this.mouseEventElement_
= this.canvas_
;
753 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
754 dygraph
.mouseMove_(e
);
756 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
757 dygraph
.mouseOut_(e
);
760 // Create the grapher
761 // TODO(danvk): why does the Layout need its own set of options?
762 this.layoutOptions_
= { 'xOriginIsZero': false };
763 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
764 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
765 Dygraph
.update(this.layoutOptions_
, {
766 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
768 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
770 // TODO(danvk): why does the Renderer need its own set of options?
771 this.renderOptions_
= { colorScheme
: this.colors_
,
773 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
774 Dygraph
.update(this.renderOptions_
, this.attrs_
);
775 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
777 this.createStatusMessage_();
778 this.createDragInterface_();
782 * Detach DOM elements in the dygraph and null out all data references.
783 * Calling this when you're done with a dygraph can dramatically reduce memory
784 * usage. See, e.g., the tests/perf.html example.
786 Dygraph
.prototype.destroy
= function() {
787 var removeRecursive
= function(node
) {
788 while (node
.hasChildNodes()) {
789 removeRecursive(node
.firstChild
);
790 node
.removeChild(node
.firstChild
);
793 removeRecursive(this.maindiv_
);
795 var nullOut
= function(obj
) {
797 if (typeof(obj
[n
]) === 'object') {
803 // These may not all be necessary, but it can't hurt...
804 nullOut(this.layout_
);
805 nullOut(this.plotter_
);
810 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
811 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
812 * or the zoom rectangles) is done on this.canvas_.
813 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
814 * @return {Object} The newly-created canvas
817 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
818 var h
= Dygraph
.createCanvas();
819 h
.style
.position
= "absolute";
820 // TODO(danvk): h should be offset from canvas. canvas needs to include
821 // some extra area to make it easier to zoom in on the far left and far
822 // right. h needs to be precisely the plot area, so that clipping occurs.
823 h
.style
.top
= canvas
.style
.top
;
824 h
.style
.left
= canvas
.style
.left
;
825 h
.width
= this.width_
;
826 h
.height
= this.height_
;
827 h
.style
.width
= this.width_
+ "px"; // for IE
828 h
.style
.height
= this.height_
+ "px"; // for IE
833 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
834 * is used to generate default series colors which are evenly spaced on the
836 * @param { Number } hue Range is 0.0-1.0.
837 * @param { Number } saturation Range is 0.0-1.0.
838 * @param { Number } value Range is 0.0-1.0.
839 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
842 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
846 if (saturation
=== 0) {
851 var i
= Math
.floor(hue
* 6);
852 var f
= (hue
* 6) - i
;
853 var p
= value
* (1 - saturation
);
854 var q
= value
* (1 - (saturation
* f
));
855 var t
= value
* (1 - (saturation
* (1 - f
)));
857 case 1: red
= q
; green
= value
; blue
= p
; break;
858 case 2: red
= p
; green
= value
; blue
= t
; break;
859 case 3: red
= p
; green
= q
; blue
= value
; break;
860 case 4: red
= t
; green
= p
; blue
= value
; break;
861 case 5: red
= value
; green
= p
; blue
= q
; break;
862 case 6: // fall through
863 case 0: red
= value
; green
= t
; blue
= p
; break;
866 red
= Math
.floor(255 * red
+ 0.5);
867 green
= Math
.floor(255 * green
+ 0.5);
868 blue
= Math
.floor(255 * blue
+ 0.5);
869 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
874 * Generate a set of distinct colors for the data series. This is done with a
875 * color wheel. Saturation/Value are customizable, and the hue is
876 * equally-spaced around the color wheel. If a custom set of colors is
877 * specified, that is used instead.
880 Dygraph
.prototype.setColors_
= function() {
881 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
882 // away with this.renderOptions_.
883 var num
= this.attr_("labels").length
- 1;
885 var colors
= this.attr_('colors');
887 var sat
= this.attr_('colorSaturation') || 1.0;
888 var val
= this.attr_('colorValue') || 0.5;
889 var half
= Math
.ceil(num
/ 2);
890 for (var i
= 1; i
<= num
; i
++) {
891 if (!this.visibility()[i
-1]) continue;
892 // alternate colors for high contrast.
893 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
894 var hue
= (1.0 * idx
/ (1 + num
));
895 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
898 for (var i
= 0; i
< num
; i
++) {
899 if (!this.visibility()[i
]) continue;
900 var colorStr
= colors
[i
% colors
.length
];
901 this.colors_
.push(colorStr
);
905 // TODO(danvk): update this w/r
/t/ the
new options system
.
906 this.renderOptions_
.colorScheme
= this.colors_
;
907 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
908 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
909 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
913 * Return the list of colors. This is either the list of colors passed in the
914 * attributes or the autogenerated list of rgb(r,g,b) strings.
915 * @return {Array<string>} The list of colors.
917 Dygraph
.prototype.getColors
= function() {
921 // The following functions are from quirksmode.org with a modification for Safari from
922 // http://blog.firetree.net/2005/07/04/javascript-find-position/
923 // http://www.quirksmode.org/js
/findpos
.html
926 Dygraph
.findPosX
= function(obj
) {
931 curleft
+= obj
.offsetLeft
;
932 if(!obj
.offsetParent
)
934 obj
= obj
.offsetParent
;
943 Dygraph
.findPosY
= function(obj
) {
948 curtop
+= obj
.offsetTop
;
949 if(!obj
.offsetParent
)
951 obj
= obj
.offsetParent
;
960 * Create the div that contains information on the selected point(s)
961 * This goes in the top right of the canvas, unless an external div has already
965 Dygraph
.prototype.createStatusMessage_
= function() {
966 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
967 if (userLabelsDiv
&& null != userLabelsDiv
968 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
969 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
971 if (!this.attr_("labelsDiv")) {
972 var divWidth
= this.attr_('labelsDivWidth');
974 "position": "absolute",
977 "width": divWidth
+ "px",
979 "left": (this.width_
- divWidth
- 2) + "px",
980 "background": "white",
982 "overflow": "hidden"};
983 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
984 var div
= document
.createElement("div");
985 for (var name
in messagestyle
) {
986 if (messagestyle
.hasOwnProperty(name
)) {
987 div
.style
[name
] = messagestyle
[name
];
990 this.graphDiv
.appendChild(div
);
991 this.attrs_
.labelsDiv
= div
;
996 * Position the labels div so that:
997 * - its right edge is flush with the right edge of the charting area
998 * - its top edge is flush with the top edge of the charting area
1001 Dygraph
.prototype.positionLabelsDiv_
= function() {
1002 // Don't touch a user-specified labelsDiv.
1003 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
1005 var area
= this.plotter_
.area
;
1006 var div
= this.attr_("labelsDiv");
1007 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
1008 div
.style
.top
= area
.y
+ "px";
1012 * Create the text box to adjust the averaging period
1015 Dygraph
.prototype.createRollInterface_
= function() {
1016 // Create a roller if one doesn't exist already.
1017 if (!this.roller_
) {
1018 this.roller_
= document
.createElement("input");
1019 this.roller_
.type
= "text";
1020 this.roller_
.style
.display
= "none";
1021 this.graphDiv
.appendChild(this.roller_
);
1024 var display
= this.attr_('showRoller') ? 'block' : 'none';
1026 var area
= this.plotter_
.area
;
1027 var textAttr
= { "position": "absolute",
1029 "top": (area
.y
+ area
.h
- 25) + "px",
1030 "left": (area
.x
+ 1) + "px",
1033 this.roller_
.size
= "2";
1034 this.roller_
.value
= this.rollPeriod_
;
1035 for (var name
in textAttr
) {
1036 if (textAttr
.hasOwnProperty(name
)) {
1037 this.roller_
.style
[name
] = textAttr
[name
];
1042 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1047 * Returns the x-coordinate of the event in a coordinate system where the
1048 * top-left corner of the page (not the window) is (0,0).
1049 * Taken from MochiKit.Signal
1051 Dygraph
.pageX
= function(e
) {
1053 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1056 var b
= document
.body
;
1058 (de
.scrollLeft
|| b
.scrollLeft
) -
1059 (de
.clientLeft
|| 0);
1065 * Returns the y-coordinate of the event in a coordinate system where the
1066 * top-left corner of the page (not the window) is (0,0).
1067 * Taken from MochiKit.Signal
1069 Dygraph
.pageY
= function(e
) {
1071 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1074 var b
= document
.body
;
1076 (de
.scrollTop
|| b
.scrollTop
) -
1077 (de
.clientTop
|| 0);
1083 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1084 * canvas (i.e. DOM Coords).
1086 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1087 return Dygraph
.pageX(e
) - context
.px
1092 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1093 * canvas (i.e. DOM Coords).
1095 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1096 return Dygraph
.pageY(e
) - context
.py
1100 * A collection of functions to facilitate build custom interaction models.
1103 Dygraph
.Interaction
= {};
1106 * Called in response to an interaction model operation that
1107 * should start the default panning behavior.
1109 * It's used in the default callback for "mousedown" operations.
1110 * Custom interaction model builders can use it to provide the default
1113 * @param { Event } event the event object which led to the startPan call.
1114 * @param { Dygraph} g The dygraph on which to act.
1115 * @param { Object} context The dragging context object (with
1116 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1118 Dygraph
.Interaction
.startPan
= function(event
, g
, context
) {
1119 context
.isPanning
= true;
1120 var xRange
= g
.xAxisRange();
1121 context
.dateRange
= xRange
[1] - xRange
[0];
1122 context
.initialLeftmostDate
= xRange
[0];
1123 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1125 if (g
.attr_("panEdgeFraction")) {
1126 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1127 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1129 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1130 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1132 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1133 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1134 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1136 var boundedValues
= [];
1137 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1139 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1140 var axis
= g
.axes_
[i
];
1141 var yExtremes
= axis
.extremeRange
;
1143 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1144 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1146 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1147 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1149 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1151 context
.boundedValues
= boundedValues
;
1154 // Record the range of each y-axis at the start of the drag.
1155 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1156 context
.is2DPan
= false;
1157 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1158 var axis
= g
.axes_
[i
];
1159 var yRange
= g
.yAxisRange(i
);
1160 // TODO(konigsberg): These values should be in |context|.
1161 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1162 if (axis
.logscale
) {
1163 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1164 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1166 axis
.initialTopValue
= yRange
[1];
1167 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1169 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1171 // While calculating axes, set 2dpan.
1172 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1177 * Called in response to an interaction model operation that
1178 * responds to an event that pans the view.
1180 * It's used in the default callback for "mousemove" operations.
1181 * Custom interaction model builders can use it to provide the default
1184 * @param { Event } event the event object which led to the movePan call.
1185 * @param { Dygraph} g The dygraph on which to act.
1186 * @param { Object} context The dragging context object (with
1187 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1189 Dygraph
.Interaction
.movePan
= function(event
, g
, context
) {
1190 context
.dragEndX
= g
.dragGetX_(event
, context
);
1191 context
.dragEndY
= g
.dragGetY_(event
, context
);
1193 var minDate
= context
.initialLeftmostDate
-
1194 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1195 if (context
.boundedDates
) {
1196 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1198 var maxDate
= minDate
+ context
.dateRange
;
1199 if (context
.boundedDates
) {
1200 if (maxDate
> context
.boundedDates
[1]) {
1201 // Adjust minDate, and recompute maxDate.
1202 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1203 maxDate
= minDate
+ context
.dateRange
;
1207 g
.dateWindow_
= [minDate
, maxDate
];
1209 // y-axis scaling is automatic unless this is a full 2D pan.
1210 if (context
.is2DPan
) {
1211 // Adjust each axis appropriately.
1212 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1213 var axis
= g
.axes_
[i
];
1215 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1216 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1218 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1220 // In log scale, maxValue and minValue are the logs of those values.
1221 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1223 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1225 var minValue
= maxValue
- axis
.dragValueRange
;
1227 if (minValue
< boundedValue
[0]) {
1228 // Adjust maxValue, and recompute minValue.
1229 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1230 minValue
= maxValue
- axis
.dragValueRange
;
1233 if (axis
.logscale
) {
1234 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1235 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1237 axis
.valueWindow
= [ minValue
, maxValue
];
1246 * Called in response to an interaction model operation that
1247 * responds to an event that ends panning.
1249 * It's used in the default callback for "mouseup" operations.
1250 * Custom interaction model builders can use it to provide the default
1253 * @param { Event } event the event object which led to the startZoom call.
1254 * @param { Dygraph} g The dygraph on which to act.
1255 * @param { Object} context The dragging context object (with
1256 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1258 Dygraph
.Interaction
.endPan
= function(event
, g
, context
) {
1259 // TODO(konigsberg): Clear the context data from the axis.
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;
1272 * Called in response to an interaction model operation that
1273 * responds to an event that starts zooming.
1275 * It's used in the default callback for "mousedown" operations.
1276 * Custom interaction model builders can use it to provide the default
1279 * @param { Event } event the event object which led to the startZoom call.
1280 * @param { Dygraph} g The dygraph on which to act.
1281 * @param { Object} context The dragging context object (with
1282 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1284 Dygraph
.Interaction
.startZoom
= function(event
, g
, context
) {
1285 context
.isZooming
= true;
1289 * Called in response to an interaction model operation that
1290 * responds to an event that defines zoom boundaries.
1292 * It's used in the default callback for "mousemove" operations.
1293 * Custom interaction model builders can use it to provide the default
1296 * @param { Event } event the event object which led to the moveZoom call.
1297 * @param { Dygraph} g The dygraph on which to act.
1298 * @param { Object} context The dragging context object (with
1299 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1301 Dygraph
.Interaction
.moveZoom
= function(event
, g
, context
) {
1302 context
.dragEndX
= g
.dragGetX_(event
, context
);
1303 context
.dragEndY
= g
.dragGetY_(event
, context
);
1305 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1306 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1308 // drag direction threshold for y axis is twice as large as x axis
1309 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1312 context
.dragDirection
,
1317 context
.prevDragDirection
,
1321 context
.prevEndX
= context
.dragEndX
;
1322 context
.prevEndY
= context
.dragEndY
;
1323 context
.prevDragDirection
= context
.dragDirection
;
1327 * Called in response to an interaction model operation that
1328 * responds to an event that performs a zoom based on previously defined
1331 * It's used in the default callback for "mouseup" operations.
1332 * Custom interaction model builders can use it to provide the default
1335 * @param { Event } event the event object which led to the endZoom call.
1336 * @param { Dygraph} g The dygraph on which to end the zoom.
1337 * @param { Object} context The dragging context object (with
1338 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1340 Dygraph
.Interaction
.endZoom
= function(event
, g
, context
) {
1341 // TODO(konigsberg): Refactor or rename this fn -- it deals with clicks, too.
1342 context
.isZooming
= false;
1343 context
.dragEndX
= g
.dragGetX_(event
, context
);
1344 context
.dragEndY
= g
.dragGetY_(event
, context
);
1345 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1346 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1348 if (regionWidth
< 2 && regionHeight
< 2 &&
1349 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1350 // TODO(danvk): pass along more info about the points, e.g. 'x'
1351 if (g
.attr_('clickCallback') != null) {
1352 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1354 if (g
.attr_('pointClickCallback')) {
1355 // check if the click was on a particular point.
1356 var closestIdx
= -1;
1357 var closestDistance
= 0;
1358 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1359 var p
= g
.selPoints_
[i
];
1360 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1361 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1362 if (closestIdx
== -1 || distance
< closestDistance
) {
1363 closestDistance
= distance
;
1368 // Allow any click within two pixels of the dot.
1369 var radius
= g
.attr_('highlightCircleSize') + 2;
1370 if (closestDistance
<= 5 * 5) {
1371 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1376 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1377 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1378 Math
.max(context
.dragStartX
, context
.dragEndX
));
1379 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1380 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1381 Math
.max(context
.dragStartY
, context
.dragEndY
));
1383 g
.canvas_ctx_
.clearRect(0, 0, g
.canvas_
.width
, g
.canvas_
.height
);
1385 context
.dragStartX
= null;
1386 context
.dragStartY
= null;
1390 * Default interation model for dygraphs. You can refer to specific elements of
1391 * this when constructing your own interaction model, e.g.:
1392 * g.updateOptions( {
1393 * interactionModel: {
1394 * mousedown: Dygraph.defaultInteractionModel.mousedown
1398 Dygraph
.Interaction
.defaultModel
= {
1399 // Track the beginning of drag events
1400 mousedown
: function(event
, g
, context
) {
1401 context
.initializeMouseDown(event
, g
, context
);
1403 if (event
.altKey
|| event
.shiftKey
) {
1404 Dygraph
.startPan(event
, g
, context
);
1406 Dygraph
.startZoom(event
, g
, context
);
1410 // Draw zoom rectangles when the mouse is down and the user moves around
1411 mousemove
: function(event
, g
, context
) {
1412 if (context
.isZooming
) {
1413 Dygraph
.moveZoom(event
, g
, context
);
1414 } else if (context
.isPanning
) {
1415 Dygraph
.movePan(event
, g
, context
);
1419 mouseup
: function(event
, g
, context
) {
1420 if (context
.isZooming
) {
1421 Dygraph
.endZoom(event
, g
, context
);
1422 } else if (context
.isPanning
) {
1423 Dygraph
.endPan(event
, g
, context
);
1427 // Temporarily cancel the dragging event when the mouse leaves the graph
1428 mouseout
: function(event
, g
, context
) {
1429 if (context
.isZooming
) {
1430 context
.dragEndX
= null;
1431 context
.dragEndY
= null;
1435 // Disable zooming out if panning.
1436 dblclick
: function(event
, g
, context
) {
1437 if (event
.altKey
|| event
.shiftKey
) {
1440 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1441 // friendlier to public use.
1446 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.Interaction
.defaultModel
;
1448 // old ways of accessing these methods/properties
1449 Dygraph
.defaultInteractionModel
= Dygraph
.Interaction
.defaultModel
;
1450 Dygraph
.endZoom
= Dygraph
.Interaction
.endZoom
;
1451 Dygraph
.moveZoom
= Dygraph
.Interaction
.moveZoom
;
1452 Dygraph
.startZoom
= Dygraph
.Interaction
.startZoom
;
1453 Dygraph
.endPan
= Dygraph
.Interaction
.endPan
;
1454 Dygraph
.movePan
= Dygraph
.Interaction
.movePan
;
1455 Dygraph
.startPan
= Dygraph
.Interaction
.startPan
;
1458 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1462 Dygraph
.prototype.createDragInterface_
= function() {
1464 // Tracks whether the mouse is down right now
1466 isPanning
: false, // is this drag part of a pan?
1467 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1472 dragDirection
: null,
1475 prevDragDirection
: null,
1477 // The value on the left side of the graph when a pan operation starts.
1478 initialLeftmostDate
: null,
1480 // The number of units each pixel spans. (This won't be valid for log
1482 xUnitsPerPixel
: null,
1484 // TODO(danvk): update this comment
1485 // The range in second/value units that the viewport encompasses during a
1486 // panning operation.
1489 // Utility function to convert page-wide coordinates to canvas coords
1493 // Values for use with panEdgeFraction, which limit how far outside the
1494 // graph's data boundaries it can be panned.
1495 boundedDates
: null, // [minDate, maxDate]
1496 boundedValues
: null, // [[minValue, maxValue] ...]
1498 initializeMouseDown
: function(event
, g
, context
) {
1499 // prevents mouse drags from selecting page text.
1500 if (event
.preventDefault
) {
1501 event
.preventDefault(); // Firefox, Chrome, etc.
1503 event
.returnValue
= false; // IE
1504 event
.cancelBubble
= true;
1507 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1508 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1509 context
.dragStartX
= g
.dragGetX_(event
, context
);
1510 context
.dragStartY
= g
.dragGetY_(event
, context
);
1514 var interactionModel
= this.attr_("interactionModel");
1516 // Self is the graph.
1519 // Function that binds the graph and context to the handler.
1520 var bindHandler
= function(handler
) {
1521 return function(event
) {
1522 handler(event
, self
, context
);
1526 for (var eventName
in interactionModel
) {
1527 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1528 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1529 bindHandler(interactionModel
[eventName
]));
1532 // If the user releases the mouse button during a drag, but not over the
1533 // canvas, then it doesn't count as a zooming action.
1534 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1535 if (context
.isZooming
|| context
.isPanning
) {
1536 context
.isZooming
= false;
1537 context
.dragStartX
= null;
1538 context
.dragStartY
= null;
1541 if (context
.isPanning
) {
1542 context
.isPanning
= false;
1543 context
.draggingDate
= null;
1544 context
.dateRange
= null;
1545 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1546 delete self
.axes_
[i
].draggingValue
;
1547 delete self
.axes_
[i
].dragValueRange
;
1555 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1556 * up any previous zoom rectangles that were drawn. This could be optimized to
1557 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1560 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1561 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1562 * @param {Number} startX The X position where the drag started, in canvas
1564 * @param {Number} endX The current X position of the drag, in canvas coords.
1565 * @param {Number} startY The Y position where the drag started, in canvas
1567 * @param {Number} endY The current Y position of the drag, in canvas coords.
1568 * @param {Number} prevDirection the value of direction on the previous call to
1569 * this function. Used to avoid excess redrawing
1570 * @param {Number} prevEndX The value of endX on the previous call to this
1571 * function. Used to avoid excess redrawing
1572 * @param {Number} prevEndY The value of endY on the previous call to this
1573 * function. Used to avoid excess redrawing
1576 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1577 endY
, prevDirection
, prevEndX
,
1579 var ctx
= this.canvas_ctx_
;
1581 // Clean up from the previous rect if necessary
1582 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1583 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1584 Math
.abs(startX
- prevEndX
), this.height_
);
1585 } else if (prevDirection
== Dygraph
.VERTICAL
){
1586 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1587 this.width_
, Math
.abs(startY
- prevEndY
));
1590 // Draw a light-grey rectangle to show the new viewing area
1591 if (direction
== Dygraph
.HORIZONTAL
) {
1592 if (endX
&& startX
) {
1593 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1594 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1595 Math
.abs(endX
- startX
), this.height_
);
1598 if (direction
== Dygraph
.VERTICAL
) {
1599 if (endY
&& startY
) {
1600 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1601 ctx
.fillRect(0, Math
.min(startY
, endY
),
1602 this.width_
, Math
.abs(endY
- startY
));
1608 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1609 * the canvas. The exact zoom window may be slightly larger if there are no data
1610 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1611 * which accepts dates that match the raw data. This function redraws the graph.
1613 * @param {Number} lowX The leftmost pixel value that should be visible.
1614 * @param {Number} highX The rightmost pixel value that should be visible.
1617 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1618 // Find the earliest and latest dates contained in this canvasx range.
1619 // Convert the call to date ranges of the raw data.
1620 var minDate
= this.toDataXCoord(lowX
);
1621 var maxDate
= this.toDataXCoord(highX
);
1622 this.doZoomXDates_(minDate
, maxDate
);
1626 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1627 * method with doZoomX which accepts pixel coordinates. This function redraws
1630 * @param {Number} minDate The minimum date that should be visible.
1631 * @param {Number} maxDate The maximum date that should be visible.
1634 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1635 this.dateWindow_
= [minDate
, maxDate
];
1636 this.zoomed_x_
= true;
1638 if (this.attr_("zoomCallback")) {
1639 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1644 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1645 * the canvas. This function redraws the graph.
1647 * @param {Number} lowY The topmost pixel value that should be visible.
1648 * @param {Number} highY The lowest pixel value that should be visible.
1651 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1652 // Find the highest and lowest values in pixel range for each axis.
1653 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1654 // This is because pixels increase as you go down on the screen, whereas data
1655 // coordinates increase as you go up the screen.
1656 var valueRanges
= [];
1657 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1658 var hi
= this.toDataYCoord(lowY
, i
);
1659 var low
= this.toDataYCoord(highY
, i
);
1660 this.axes_
[i
].valueWindow
= [low
, hi
];
1661 valueRanges
.push([low
, hi
]);
1664 this.zoomed_y_
= true;
1666 if (this.attr_("zoomCallback")) {
1667 var xRange
= this.xAxisRange();
1668 var yRange
= this.yAxisRange();
1669 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1674 * Reset the zoom to the original view coordinates. This is the same as
1675 * double-clicking on the graph.
1679 Dygraph
.prototype.doUnzoom_
= function() {
1681 if (this.dateWindow_
!= null) {
1683 this.dateWindow_
= null;
1686 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1687 if (this.axes_
[i
].valueWindow
!= null) {
1689 delete this.axes_
[i
].valueWindow
;
1694 // Putting the drawing operation before the callback because it resets
1696 this.zoomed_x_
= false;
1697 this.zoomed_y_
= false;
1699 if (this.attr_("zoomCallback")) {
1700 var minDate
= this.rawData_
[0][0];
1701 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1702 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1708 * When the mouse moves in the canvas, display information about a nearby data
1709 * point and draw dots over those points in the data series. This function
1710 * takes care of cleanup of previously-drawn dots.
1711 * @param {Object} event The mousemove event from the browser.
1714 Dygraph
.prototype.mouseMove_
= function(event
) {
1715 // This prevents JS errors when mousing over the canvas before data loads.
1716 var points
= this.layout_
.points
;
1717 if (points
=== undefined
) return;
1719 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1724 // Loop through all the points and find the date nearest to our current
1726 var minDist
= 1e+100;
1728 for (var i
= 0; i
< points
.length
; i
++) {
1729 var point
= points
[i
];
1730 if (point
== null) continue;
1731 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1732 if (dist
> minDist
) continue;
1736 if (idx
>= 0) lastx
= points
[idx
].xval
;
1738 // Extract the points we've selected
1739 this.selPoints_
= [];
1740 var l
= points
.length
;
1741 if (!this.attr_("stackedGraph")) {
1742 for (var i
= 0; i
< l
; i
++) {
1743 if (points
[i
].xval
== lastx
) {
1744 this.selPoints_
.push(points
[i
]);
1748 // Need to 'unstack' points starting from the bottom
1749 var cumulative_sum
= 0;
1750 for (var i
= l
- 1; i
>= 0; i
--) {
1751 if (points
[i
].xval
== lastx
) {
1752 var p
= {}; // Clone the point since we modify it
1753 for (var k
in points
[i
]) {
1754 p
[k
] = points
[i
][k
];
1756 p
.yval
-= cumulative_sum
;
1757 cumulative_sum
+= p
.yval
;
1758 this.selPoints_
.push(p
);
1761 this.selPoints_
.reverse();
1764 if (this.attr_("highlightCallback")) {
1765 var px
= this.lastx_
;
1766 if (px
!== null && lastx
!= px
) {
1767 // only fire if the selected point has changed.
1768 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1772 // Save last x position for callbacks.
1773 this.lastx_
= lastx
;
1775 this.updateSelection_();
1779 * Transforms layout_.points index into data row number.
1780 * @param int layout_.points index
1781 * @return int row number, or -1 if none could be found.
1784 Dygraph
.prototype.idxToRow_
= function(idx
) {
1785 if (idx
< 0) return -1;
1787 for (var i
in this.layout_
.datasets
) {
1788 if (idx
< this.layout_
.datasets
[i
].length
) {
1789 return this.boundaryIds_
[0][0]+idx
;
1791 idx
-= this.layout_
.datasets
[i
].length
;
1798 * @param { Number } x The number to consider.
1799 * @return { Boolean } Whether the number is zero or NaN.
1801 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1802 Dygraph
.isOK
= function(x
) {
1803 return x
&& !isNaN(x
);
1808 * Generates HTML for the legend which is displayed when hovering over the
1809 * chart. If no selected points are specified, a default legend is returned
1810 * (this may just be the empty string).
1811 * @param { Number } [x] The x-value of the selected points.
1812 * @param { [Object] } [sel_points] List of selected points for the given
1813 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1815 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1816 // If no points are selected, we display a default legend. Traditionally,
1817 // this has been blank. But a better default would be a conventional legend,
1818 // which provides essential information for a non-interactive chart.
1819 if (typeof(x
) === 'undefined') {
1820 if (this.attr_('legend') != 'always') return '';
1822 var sepLines
= this.attr_('labelsSeparateLines');
1823 var labels
= this.attr_('labels');
1825 for (var i
= 1; i
< labels
.length
; i
++) {
1826 if (!this.visibility()[i
- 1]) continue;
1827 var c
= this.plotter_
.colors
[labels
[i
]];
1828 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1829 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1835 var html
= this.attr_('xValueFormatter')(x
) + ":";
1837 var fmtFunc
= this.attr_('yValueFormatter');
1838 var showZeros
= this.attr_("labelsShowZeroValues");
1839 var sepLines
= this.attr_("labelsSeparateLines");
1840 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1841 var pt
= this.selPoints_
[i
];
1842 if (pt
.yval
== 0 && !showZeros
) continue;
1843 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1844 if (sepLines
) html
+= "<br/>";
1846 var c
= this.plotter_
.colors
[pt
.name
];
1847 var yval
= fmtFunc(pt
.yval
, this);
1848 // TODO(danvk): use a template string here and make it an attribute.
1849 html
+= " <b><span style='color: " + c
+ ";'>"
1850 + pt
.name
+ "</span></b>:"
1858 * Displays information about the selected points in the legend. If there is no
1859 * selection, the legend will be cleared.
1860 * @param { Number } [x] The x-value of the selected points.
1861 * @param { [Object] } [sel_points] List of selected points for the given
1862 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1864 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1865 var html
= this.generateLegendHTML_(x
, sel_points
);
1866 var labelsDiv
= this.attr_("labelsDiv");
1867 if (labelsDiv
!== null) {
1868 labelsDiv
.innerHTML
= html
;
1870 if (typeof(this.shown_legend_error_
) == 'undefined') {
1871 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1872 this.shown_legend_error_
= true;
1878 * Draw dots over the selectied points in the data series. This function
1879 * takes care of cleanup of previously-drawn dots.
1882 Dygraph
.prototype.updateSelection_
= function() {
1883 // Clear the previously drawn vertical, if there is one
1884 var ctx
= this.canvas_ctx_
;
1885 if (this.previousVerticalX_
>= 0) {
1886 // Determine the maximum highlight circle size.
1887 var maxCircleSize
= 0;
1888 var labels
= this.attr_('labels');
1889 for (var i
= 1; i
< labels
.length
; i
++) {
1890 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1891 if (r
> maxCircleSize
) maxCircleSize
= r
;
1893 var px
= this.previousVerticalX_
;
1894 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1895 2 * maxCircleSize
+ 2, this.height_
);
1898 if (this.selPoints_
.length
> 0) {
1899 // Set the status message to indicate the selected point(s)
1900 if (this.attr_('showLabelsOnHighlight')) {
1901 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1904 // Draw colored circles over the center of each selected point
1905 var canvasx
= this.selPoints_
[0].canvasx
;
1907 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1908 var pt
= this.selPoints_
[i
];
1909 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1911 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1913 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1914 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1919 this.previousVerticalX_
= canvasx
;
1924 * Manually set the selected points and display information about them in the
1925 * legend. The selection can be cleared using clearSelection() and queried
1926 * using getSelection().
1927 * @param { Integer } row number that should be highlighted (i.e. appear with
1928 * hover dots on the chart). Set to false to clear any selection.
1930 Dygraph
.prototype.setSelection
= function(row
) {
1931 // Extract the points we've selected
1932 this.selPoints_
= [];
1935 if (row
!== false) {
1936 row
= row
-this.boundaryIds_
[0][0];
1939 if (row
!== false && row
>= 0) {
1940 for (var i
in this.layout_
.datasets
) {
1941 if (row
< this.layout_
.datasets
[i
].length
) {
1942 var point
= this.layout_
.points
[pos
+row
];
1944 if (this.attr_("stackedGraph")) {
1945 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1948 this.selPoints_
.push(point
);
1950 pos
+= this.layout_
.datasets
[i
].length
;
1954 if (this.selPoints_
.length
) {
1955 this.lastx_
= this.selPoints_
[0].xval
;
1956 this.updateSelection_();
1958 this.clearSelection();
1964 * The mouse has left the canvas. Clear out whatever artifacts remain
1965 * @param {Object} event the mouseout event from the browser.
1968 Dygraph
.prototype.mouseOut_
= function(event
) {
1969 if (this.attr_("unhighlightCallback")) {
1970 this.attr_("unhighlightCallback")(event
);
1973 if (this.attr_("hideOverlayOnMouseOut")) {
1974 this.clearSelection();
1979 * Clears the current selection (i.e. points that were highlighted by moving
1980 * the mouse over the chart).
1982 Dygraph
.prototype.clearSelection
= function() {
1983 // Get rid of the overlay data
1984 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1985 this.setLegendHTML_();
1986 this.selPoints_
= [];
1991 * Returns the number of the currently selected row. To get data for this row,
1992 * you can use the getValue method.
1993 * @return { Integer } row number, or -1 if nothing is selected
1995 Dygraph
.prototype.getSelection
= function() {
1996 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
2000 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
2001 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
2002 return row
+ this.boundaryIds_
[0][0];
2009 * Number formatting function which mimicks the behavior of %g in printf, i.e.
2010 * either exponential or fixed format (without trailing 0s) is used depending on
2011 * the length of the generated string. The advantage of this format is that
2012 * there is a predictable upper bound on the resulting string length,
2013 * significant figures are not dropped, and normal numbers are not displayed in
2014 * exponential notation.
2016 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
2017 * It creates strings which are too long for absolute values between 10^-4 and
2018 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
2021 * @param {Number} x The number to format
2022 * @param {Number} opt_precision The precision to use, default 2.
2023 * @return {String} A string formatted like %g in printf. The max generated
2024 * string length should be precision + 6 (e.g 1.123e+300).
2026 Dygraph
.floatFormat
= function(x
, opt_precision
) {
2027 // Avoid invalid precision values; [1, 21] is the valid range.
2028 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
2030 // This is deceptively simple. The actual algorithm comes from:
2032 // Max allowed length = p + 4
2033 // where 4 comes from 'e+n' and '.'.
2035 // Length of fixed format = 2 + y + p
2036 // where 2 comes from '0.' and y = # of leading zeroes.
2038 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
2041 // Since the behavior of toPrecision() is identical for larger numbers, we
2042 // don't have to worry about the other bound.
2044 // Finally, the argument for toExponential() is the number of trailing digits,
2045 // so we take off 1 for the value before the '.'.
2046 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
2047 x
.toExponential(p
- 1) : x
.toPrecision(p
);
2052 * Return a string version of a number. This respects the digitsAfterDecimal
2053 * and maxNumberWidth options.
2054 * @param {Number} x The number to be formatted
2055 * @param {Dygraph} g The dygraph object
2057 Dygraph
.numberFormatter
= function(x
, g
) {
2058 var sigFigs
= g
.attr_('sigFigs');
2060 if (sigFigs
!== null) {
2061 // User has opted for a fixed number of significant figures.
2062 return Dygraph
.floatFormat(x
, sigFigs
);
2065 var digits
= g
.attr_('digitsAfterDecimal');
2066 var maxNumberWidth
= g
.attr_('maxNumberWidth');
2068 // switch to scientific notation if we underflow or overflow fixed display.
2070 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
2071 Math
.abs(x
) < Math
.pow(10, -digits
))) {
2072 return x
.toExponential(digits
);
2074 return '' + Dygraph
.round_(x
, digits
);
2080 * Converts '9' to '09' (useful for dates)
2082 Dygraph
.zeropad
= function(x
) {
2083 if (x
< 10) return "0" + x
; else return "" + x
;
2087 * Return a string version of the hours, minutes and seconds portion of a date.
2088 * @param {Number} date The JavaScript date (ms since epoch)
2089 * @return {String} A time of the form "HH:MM:SS"
2092 Dygraph
.hmsString_
= function(date
) {
2093 var zeropad
= Dygraph
.zeropad
;
2094 var d
= new Date(date
);
2095 if (d
.getSeconds()) {
2096 return zeropad(d
.getHours()) + ":" +
2097 zeropad(d
.getMinutes()) + ":" +
2098 zeropad(d
.getSeconds());
2100 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
2105 * Convert a JS date to a string appropriate to display on an axis that
2106 * is displaying values at the stated granularity.
2107 * @param {Date} date The date to format
2108 * @param {Number} granularity One of the Dygraph granularity constants
2109 * @return {String} The formatted date
2112 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
2113 if (granularity
>= Dygraph
.DECADAL
) {
2114 return date
.strftime('%Y');
2115 } else if (granularity
>= Dygraph
.MONTHLY
) {
2116 return date
.strftime('%b %y');
2118 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
2119 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
2120 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
2122 return Dygraph
.hmsString_(date
.getTime());
2128 * Convert a JS date (millis since epoch) to YYYY/MM/DD
2129 * @param {Number} date The JavaScript date (ms since epoch)
2130 * @return {String} A date of the form "YYYY/MM/DD"
2133 Dygraph
.dateString_
= function(date
) {
2134 var zeropad
= Dygraph
.zeropad
;
2135 var d
= new Date(date
);
2138 var year
= "" + d
.getFullYear();
2139 // Get a 0 padded month string
2140 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
2141 // Get a 0 padded day string
2142 var day
= zeropad(d
.getDate());
2145 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
2146 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
2148 return year
+ "/" + month + "/" + day
+ ret
;
2152 * Round a number to the specified number of digits past the decimal point.
2153 * @param {Number} num The number to round
2154 * @param {Number} places The number of decimals to which to round
2155 * @return {Number} The rounded number
2158 Dygraph
.round_
= function(num
, places
) {
2159 var shift
= Math
.pow(10, places
);
2160 return Math
.round(num
* shift
)/shift
;
2164 * Fires when there's data available to be graphed.
2165 * @param {String} data Raw CSV data to be plotted
2168 Dygraph
.prototype.loadedEvent_
= function(data
) {
2169 this.rawData_
= this.parseCSV_(data
);
2173 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
2174 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
2175 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
2178 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2181 Dygraph
.prototype.addXTicks_
= function() {
2182 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2184 if (this.dateWindow_
) {
2185 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2187 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
2190 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
2191 this.layout_
.updateOptions({xTicks
: xTicks
});
2194 // Time granularity enumeration
2195 Dygraph
.SECONDLY
= 0;
2196 Dygraph
.TWO_SECONDLY
= 1;
2197 Dygraph
.FIVE_SECONDLY
= 2;
2198 Dygraph
.TEN_SECONDLY
= 3;
2199 Dygraph
.THIRTY_SECONDLY
= 4;
2200 Dygraph
.MINUTELY
= 5;
2201 Dygraph
.TWO_MINUTELY
= 6;
2202 Dygraph
.FIVE_MINUTELY
= 7;
2203 Dygraph
.TEN_MINUTELY
= 8;
2204 Dygraph
.THIRTY_MINUTELY
= 9;
2205 Dygraph
.HOURLY
= 10;
2206 Dygraph
.TWO_HOURLY
= 11;
2207 Dygraph
.SIX_HOURLY
= 12;
2209 Dygraph
.WEEKLY
= 14;
2210 Dygraph
.MONTHLY
= 15;
2211 Dygraph
.QUARTERLY
= 16;
2212 Dygraph
.BIANNUAL
= 17;
2213 Dygraph
.ANNUAL
= 18;
2214 Dygraph
.DECADAL
= 19;
2215 Dygraph
.CENTENNIAL
= 20;
2216 Dygraph
.NUM_GRANULARITIES
= 21;
2218 Dygraph
.SHORT_SPACINGS
= [];
2219 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
2220 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
2221 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
2222 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
2223 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
2224 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
2225 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
2226 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
2227 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
2228 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
2229 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
2230 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
2231 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
2232 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
2233 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
2237 * If we used this time granularity, how many ticks would there be?
2238 * This is only an approximation, but it's generally good enough.
2240 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2241 if (granularity
< Dygraph
.MONTHLY
) {
2242 // Generate one tick mark for every fixed interval of time.
2243 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2244 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2246 var year_mod
= 1; // e.g. to only print one point every 10 years.
2247 var num_months
= 12;
2248 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2249 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2250 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2251 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2252 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2254 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2255 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2256 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2263 * Construct an x-axis of nicely-formatted times on meaningful boundaries
2264 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2266 * Returns an array containing {v: millis, label: label} dictionaries.
2268 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2269 var formatter
= this.attr_("xAxisLabelFormatter");
2271 if (granularity
< Dygraph
.MONTHLY
) {
2272 // Generate one tick mark for every fixed interval of time.
2273 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2274 var format
= '%d%b'; // e.g. "1Jan"
2276 // Find a time less than start_time which occurs on a "nice" time boundary
2277 // for this granularity.
2278 var g
= spacing
/ 1000;
2279 var d
= new Date(start_time
);
2280 if (g
<= 60) { // seconds
2281 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2285 if (g
<= 60) { // minutes
2286 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2291 if (g
<= 24) { // days
2292 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2297 if (g
== 7) { // one week
2298 d
.setDate(d
.getDate() - d
.getDay());
2303 start_time
= d
.getTime();
2305 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2306 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2309 // Display a tick mark on the first of a set of months of each year.
2310 // Years get a tick mark iff y % year_mod == 0. This is useful for
2311 // displaying a tick mark once every 10 years, say, on long time scales.
2313 var year_mod
= 1; // e.g. to only print one point every 10 years.
2315 if (granularity
== Dygraph
.MONTHLY
) {
2316 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2317 } else if (granularity
== Dygraph
.QUARTERLY
) {
2318 months
= [ 0, 3, 6, 9 ];
2319 } else if (granularity
== Dygraph
.BIANNUAL
) {
2321 } else if (granularity
== Dygraph
.ANNUAL
) {
2323 } else if (granularity
== Dygraph
.DECADAL
) {
2326 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2330 this.warn("Span of dates is too long");
2333 var start_year
= new Date(start_time
).getFullYear();
2334 var end_year
= new Date(end_time
).getFullYear();
2335 var zeropad
= Dygraph
.zeropad
;
2336 for (var i
= start_year
; i
<= end_year
; i
++) {
2337 if (i
% year_mod
!= 0) continue;
2338 for (var j
= 0; j
< months
.length
; j
++) {
2339 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2340 var t
= Dygraph
.dateStrToMillis(date_str
);
2341 if (t
< start_time
|| t
> end_time
) continue;
2342 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2352 * Add ticks to the x-axis based on a date range.
2353 * @param {Number} startDate Start of the date window (millis since epoch)
2354 * @param {Number} endDate End of the date window (millis since epoch)
2355 * @param {Dygraph} self The dygraph object
2356 * @return { [Object] } Array of {label, value} tuples.
2359 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2360 // TODO(danvk): why does this take 'self' as a param?
2362 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2363 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2364 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2371 return self
.GetXAxis(startDate
, endDate
, chosen
);
2373 // TODO(danvk): signal error.
2379 * This is a list of human-friendly values at which to show tick marks on a log
2380 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2381 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2382 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2384 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2386 for (var power
= -39; power
<= 39; power
++) {
2387 var range
= Math
.pow(10, power
);
2388 for (var mult
= 1; mult
<= 9; mult
++) {
2389 var val
= range
* mult
;
2398 * Implementation of binary search over an array.
2399 * Currently does not work when val is outside the range of arry's values.
2400 * @param { Integer } val the value to search for
2401 * @param { Integer[] } arry is the value over which to search
2402 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2403 * If abs < 0, find the highest entry less than val.
2404 * if abs == 0, find the entry that equals val.
2405 * @param { Integer } [low] The first index in arry to consider (optional)
2406 * @param { Integer } [high] The last index in arry to consider (optional)
2408 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2409 if (low
== null || high
== null) {
2411 high
= arry
.length
- 1;
2419 var validIndex
= function(idx
) {
2420 return idx
>= 0 && idx
< arry
.length
;
2422 var mid
= parseInt((low
+ high
) / 2);
2423 var element
= arry
[mid
];
2424 if (element
== val
) {
2427 if (element
> val
) {
2429 // Accept if element > val, but also if prior element < val.
2431 if (validIndex(idx
) && arry
[idx
] < val
) {
2435 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2437 if (element
< val
) {
2439 // Accept if element < val, but also if prior element > val.
2441 if (validIndex(idx
) && arry
[idx
] > val
) {
2445 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2449 // TODO(konigsberg): Update comment.
2451 * Add ticks when the x axis has numbers on it (instead of dates)
2453 * @param {Number} minV minimum value
2454 * @param {Number} maxV maximum value
2456 * @param {function} attribute accessor function.
2457 * @return {[Object]} Array of {label, value} tuples.
2459 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2460 var attr
= function(k
) {
2461 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2462 return self
.attr_(k
);
2467 for (var i
= 0; i
< vals
.length
; i
++) {
2468 ticks
.push({v
: vals
[i
]});
2471 if (axis_props
&& attr("logscale")) {
2472 var pixelsPerTick
= attr('pixelsPerYLabel');
2473 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2474 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2475 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2476 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2481 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2483 // Count the number of tick values would appear, if we can get at least
2484 // nTicks / 4 accept them
.
2485 var lastDisplayed
= null;
2486 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2487 var axisId
= axis_props
.yAxisId
;
2488 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2489 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2490 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2491 var tick
= { v
: tickValue
};
2492 if (lastDisplayed
== null) {
2494 tickValue
: tickValue
,
2498 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2500 tickValue
: tickValue
,
2509 // Since we went in backwards order.
2514 // ticks.length won't be 0 if the log scale function finds values to insert.
2515 if (ticks
.length
== 0) {
2517 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2518 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2519 // The first spacing greater than pixelsPerYLabel is what we use.
2520 // TODO(danvk): version that works on a log scale.
2521 if (attr("labelsKMG2")) {
2522 var mults
= [1, 2, 4, 8];
2524 var mults
= [1, 2, 5];
2526 var scale
, low_val
, high_val
, nTicks
;
2527 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2528 var pixelsPerTick
= attr('pixelsPerYLabel');
2529 for (var i
= -10; i
< 50; i
++) {
2530 if (attr("labelsKMG2")) {
2531 var base_scale
= Math
.pow(16, i
);
2533 var base_scale
= Math
.pow(10, i
);
2535 for (var j
= 0; j
< mults
.length
; j
++) {
2536 scale
= base_scale
* mults
[j
];
2537 low_val
= Math
.floor(minV
/ scale
) * scale
;
2538 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2539 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2540 var spacing
= self
.height_
/ nTicks
;
2541 // wish I could break out of both loops at once...
2542 if (spacing
> pixelsPerTick
) break;
2544 if (spacing
> pixelsPerTick
) break;
2547 // Construct the set of ticks.
2548 // Allow reverse y-axis if it's explicitly requested.
2549 if (low_val
> high_val
) scale
*= -1;
2550 for (var i
= 0; i
< nTicks
; i
++) {
2551 var tickV
= low_val
+ i
* scale
;
2552 ticks
.push( {v
: tickV
} );
2557 // Add formatted labels to the ticks.
2560 if (attr("labelsKMB")) {
2562 k_labels
= [ "K", "M", "B", "T" ];
2564 if (attr("labelsKMG2")) {
2565 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2567 k_labels
= [ "k", "M", "G", "T" ];
2569 var formatter
= attr('yAxisLabelFormatter') ?
2570 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2572 // Add labels to the ticks.
2573 for (var i
= 0; i
< ticks
.length
; i
++) {
2574 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2575 var tickV
= ticks
[i
].v
;
2576 var absTickV
= Math
.abs(tickV
);
2577 var label
= formatter(tickV
, self
);
2578 if (k_labels
.length
> 0) {
2579 // Round up to an appropriate unit.
2581 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2582 if (absTickV
>= n
) {
2583 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
2588 ticks
[i
].label
= label
;
2596 * Computes the range of the data series (including confidence intervals).
2597 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2598 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2599 * @return [low, high]
2601 Dygraph
.prototype.extremeValues_
= function(series
) {
2602 var minY
= null, maxY
= null;
2604 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2606 // With custom bars, maxY is the max of the high values.
2607 for (var j
= 0; j
< series
.length
; j
++) {
2608 var y
= series
[j
][1][0];
2610 var low
= y
- series
[j
][1][1];
2611 var high
= y
+ series
[j
][1][2];
2612 if (low
> y
) low
= y
; // this can happen with custom bars,
2613 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2614 if (maxY
== null || high
> maxY
) {
2617 if (minY
== null || low
< minY
) {
2622 for (var j
= 0; j
< series
.length
; j
++) {
2623 var y
= series
[j
][1];
2624 if (y
=== null || isNaN(y
)) continue;
2625 if (maxY
== null || y
> maxY
) {
2628 if (minY
== null || y
< minY
) {
2634 return [minY
, maxY
];
2639 * This function is called once when the chart's data is changed or the options
2640 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2641 * idea is that values derived from the chart's data can be computed here,
2642 * rather than every time the chart is drawn. This includes things like the
2643 * number of axes, rolling averages, etc.
2645 Dygraph
.prototype.predraw_
= function() {
2646 // TODO(danvk): move more computations out of drawGraph_ and into here.
2647 this.computeYAxes_();
2649 // Create a new plotter.
2650 if (this.plotter_
) this.plotter_
.clear();
2651 this.plotter_
= new DygraphCanvasRenderer(this,
2655 this.renderOptions_
);
2657 // The roller sits in the bottom left corner of the chart. We don't know where
2658 // this will be until the options are available, so it's positioned here.
2659 this.createRollInterface_();
2661 // Same thing applies for the labelsDiv. It's right edge should be flush with
2662 // the right edge of the charting area (which may not be the same as the right
2663 // edge of the div, if we have two y-axes.
2664 this.positionLabelsDiv_();
2666 // If the data or options have changed, then we'd better redraw.
2671 * Update the graph with new data. This method is called when the viewing area
2672 * has changed. If the underlying data or options have changed, predraw_ will
2673 * be called before drawGraph_ is called.
2676 Dygraph
.prototype.drawGraph_
= function() {
2677 var data
= this.rawData_
;
2679 // This is used to set the second parameter to drawCallback, below.
2680 var is_initial_draw
= this.is_initial_draw_
;
2681 this.is_initial_draw_
= false;
2683 var minY
= null, maxY
= null;
2684 this.layout_
.removeAllDatasets();
2686 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2688 // Loop over the fields (series). Go from the last to the first,
2689 // because if they're stacked that's how we accumulate the values.
2691 var cumulative_y
= []; // For stacked series.
2694 var extremes
= {}; // series name -> [low, high]
2696 // Loop over all fields and create datasets
2697 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2698 if (!this.visibility()[i
- 1]) continue;
2700 var seriesName
= this.attr_("labels")[i
];
2701 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2702 var logScale
= this.attr_('logscale', i
);
2705 for (var j
= 0; j
< data
.length
; j
++) {
2706 var date
= data
[j
][0];
2707 var point
= data
[j
][i
];
2709 // On the log scale, points less than zero do not exist.
2710 // This will create a gap in the chart. Note that this ignores
2711 // connectSeparatedPoints.
2715 series
.push([date
, point
]);
2717 if (point
!= null || !connectSeparatedPoints
) {
2718 series
.push([date
, point
]);
2723 // TODO(danvk): move this into predraw_. It's insane to do it here.
2724 series
= this.rollingAverage(series
, this.rollPeriod_
);
2726 // Prune down to the desired range, if necessary (for zooming)
2727 // Because there can be lines going to points outside of the visible area,
2728 // we actually prune to visible points, plus one on either side.
2729 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2730 if (this.dateWindow_
) {
2731 var low
= this.dateWindow_
[0];
2732 var high
= this.dateWindow_
[1];
2734 // TODO(danvk): do binary search instead of linear search.
2735 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2736 var firstIdx
= null, lastIdx
= null;
2737 for (var k
= 0; k
< series
.length
; k
++) {
2738 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2741 if (series
[k
][0] <= high
) {
2745 if (firstIdx
=== null) firstIdx
= 0;
2746 if (firstIdx
> 0) firstIdx
--;
2747 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2748 if (lastIdx
< series
.length
- 1) lastIdx
++;
2749 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2750 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2751 pruned
.push(series
[k
]);
2755 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2758 var seriesExtremes
= this.extremeValues_(series
);
2761 for (var j
=0; j
<series
.length
; j
++) {
2762 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2765 } else if (this.attr_("stackedGraph")) {
2766 var l
= series
.length
;
2768 for (var j
= 0; j
< l
; j
++) {
2769 // If one data set has a NaN, let all subsequent stacked
2770 // sets inherit the NaN -- only start at 0 for the first set.
2771 var x
= series
[j
][0];
2772 if (cumulative_y
[x
] === undefined
) {
2773 cumulative_y
[x
] = 0;
2776 actual_y
= series
[j
][1];
2777 cumulative_y
[x
] += actual_y
;
2779 series
[j
] = [x
, cumulative_y
[x
]]
2781 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2782 seriesExtremes
[1] = cumulative_y
[x
];
2784 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2785 seriesExtremes
[0] = cumulative_y
[x
];
2789 extremes
[seriesName
] = seriesExtremes
;
2791 datasets
[i
] = series
;
2794 for (var i
= 1; i
< datasets
.length
; i
++) {
2795 if (!this.visibility()[i
- 1]) continue;
2796 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2799 this.computeYAxisRanges_(extremes
);
2800 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2801 seriesToAxisMap
: this.seriesToAxisMap_
2805 // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
2806 var tmp_zoomed_x
= this.zoomed_x_
;
2807 // Tell PlotKit to use this new data and render itself
2808 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2809 this.zoomed_x_
= tmp_zoomed_x
;
2810 this.layout_
.evaluateWithError();
2811 this.plotter_
.clear();
2812 this.plotter_
.render();
2813 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2814 this.canvas_
.height
);
2816 if (is_initial_draw
) {
2817 // Generate a static legend before any particular point is selected.
2818 this.setLegendHTML_();
2820 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2821 this.lastx_
= this.selPoints_
[0].xval
;
2822 this.updateSelection_();
2824 this.clearSelection();
2828 if (this.attr_("drawCallback") !== null) {
2829 this.attr_("drawCallback")(this, is_initial_draw
);
2835 * Determine properties of the y-axes which are independent of the data
2836 * currently being displayed. This includes things like the number of axes and
2837 * the style of the axes. It does not include the range of each axis and its
2839 * This fills in this.axes_ and this.seriesToAxisMap_.
2840 * axes_ = [ { options } ]
2841 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2842 * indices are into the axes_ array.
2844 Dygraph
.prototype.computeYAxes_
= function() {
2845 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2846 this.seriesToAxisMap_
= {};
2848 // Get a list of series names.
2849 var labels
= this.attr_("labels");
2851 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2853 // all options which could be applied per-axis:
2861 'axisLabelFontSize',
2866 // Copy global axis options over to the first axis.
2867 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2868 var k
= axisOptions
[i
];
2869 var v
= this.attr_(k
);
2870 if (v
) this.axes_
[0][k
] = v
;
2873 // Go through once and add all the axes.
2874 for (var seriesName
in series
) {
2875 if (!series
.hasOwnProperty(seriesName
)) continue;
2876 var axis
= this.attr_("axis", seriesName
);
2878 this.seriesToAxisMap_
[seriesName
] = 0;
2881 if (typeof(axis
) == 'object') {
2882 // Add a new axis, making a copy of its per-axis options.
2884 Dygraph
.update(opts
, this.axes_
[0]);
2885 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2886 var yAxisId
= this.axes_
.length
;
2887 opts
.yAxisId
= yAxisId
;
2889 Dygraph
.update(opts
, axis
);
2890 this.axes_
.push(opts
);
2891 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2895 // Go through one more time and assign series to an axis defined by another
2896 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2897 for (var seriesName
in series
) {
2898 if (!series
.hasOwnProperty(seriesName
)) continue;
2899 var axis
= this.attr_("axis", seriesName
);
2900 if (typeof(axis
) == 'string') {
2901 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2902 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2903 "series " + axis
+ ", which does not define its own axis.");
2906 var idx
= this.seriesToAxisMap_
[axis
];
2907 this.seriesToAxisMap_
[seriesName
] = idx
;
2911 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2912 // this last so that hiding the first series doesn't destroy the axis
2913 // properties of the primary axis.
2914 var seriesToAxisFiltered
= {};
2915 var vis
= this.visibility();
2916 for (var i
= 1; i
< labels
.length
; i
++) {
2918 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2920 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2924 * Returns the number of y-axes on the chart.
2925 * @return {Number} the number of axes.
2927 Dygraph
.prototype.numAxes
= function() {
2929 for (var series
in this.seriesToAxisMap_
) {
2930 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2931 var idx
= this.seriesToAxisMap_
[series
];
2932 if (idx
> last_axis
) last_axis
= idx
;
2934 return 1 + last_axis
;
2939 * Determine the value range and tick marks for each axis.
2940 * @param {Object} extremes A mapping from seriesName -> [low, high]
2941 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2943 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2944 // Build a map from axis number -> [list of series names]
2945 var seriesForAxis
= [];
2946 for (var series
in this.seriesToAxisMap_
) {
2947 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2948 var idx
= this.seriesToAxisMap_
[series
];
2949 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2950 seriesForAxis
[idx
].push(series
);
2953 // Compute extreme values, a span and tick marks for each axis.
2954 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2955 var axis
= this.axes_
[i
];
2957 if (!seriesForAxis
[i
]) {
2958 // If no series are defined or visible then use a reasonable default
2959 axis
.extremeRange
= [0, 1];
2961 // Calculate the extremes of extremes.
2962 var series
= seriesForAxis
[i
];
2963 var minY
= Infinity
; // extremes[series[0]][0];
2964 var maxY
= -Infinity
; // extremes[series[0]][1];
2965 var extremeMinY
, extremeMaxY
;
2966 for (var j
= 0; j
< series
.length
; j
++) {
2967 // Only use valid extremes to stop null data series' from corrupting the scale.
2968 extremeMinY
= extremes
[series
[j
]][0];
2969 if (extremeMinY
!= null) {
2970 minY
= Math
.min(extremeMinY
, minY
);
2972 extremeMaxY
= extremes
[series
[j
]][1];
2973 if (extremeMaxY
!= null) {
2974 maxY
= Math
.max(extremeMaxY
, maxY
);
2977 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2979 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2980 if (minY
== Infinity
) minY
= 0;
2981 if (maxY
== -Infinity
) maxY
= 0;
2983 // Add some padding and round up to an integer to be human-friendly.
2984 var span
= maxY
- minY
;
2985 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2986 if (span
== 0) { span
= maxY
; }
2990 if (axis
.logscale
) {
2991 var maxAxisY
= maxY
+ 0.1 * span
;
2992 var minAxisY
= minY
;
2994 var maxAxisY
= maxY
+ 0.1 * span
;
2995 var minAxisY
= minY
- 0.1 * span
;
2997 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2998 if (!this.attr_("avoidMinZero")) {
2999 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
3000 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
3003 if (this.attr_("includeZero")) {
3004 if (maxY
< 0) maxAxisY
= 0;
3005 if (minY
> 0) minAxisY
= 0;
3008 axis
.extremeRange
= [minAxisY
, maxAxisY
];
3010 if (axis
.valueWindow
) {
3011 // This is only set if the user has zoomed on the y-axis. It is never set
3012 // by a user. It takes precedence over axis.valueRange because, if you set
3013 // valueRange, you'd still expect to be able to pan.
3014 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
3015 } else if (axis
.valueRange
) {
3016 // This is a user-set value range for this axis.
3017 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
3019 axis
.computedValueRange
= axis
.extremeRange
;
3022 // Add ticks. By default, all axes inherit the tick positions of the
3023 // primary axis. However, if an axis is specifically marked as having
3024 // independent ticks, then that is permissible as well.
3025 if (i
== 0 || axis
.independentTicks
) {
3027 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3028 axis
.computedValueRange
[1],
3032 var p_axis
= this.axes_
[0];
3033 var p_ticks
= p_axis
.ticks
;
3034 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
3035 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
3036 var tick_values
= [];
3037 for (var i
= 0; i
< p_ticks
.length
; i
++) {
3038 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
3039 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
3040 tick_values
.push(y_val
);
3044 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3045 axis
.computedValueRange
[1],
3046 this, axis
, tick_values
);
3053 * Calculates the rolling average of a data set.
3054 * If originalData is [label, val], rolls the average of those.
3055 * If originalData is [label, [, it's interpreted as [value, stddev]
3056 * and the roll is returned in the same form, with appropriately reduced
3057 * stddev for each value.
3058 * Note that this is where fractional input (i.e. '5/10') is converted into
3060 * @param {Array} originalData The data in the appropriate format (see above)
3061 * @param {Number} rollPeriod The number of points over which to average the
3064 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
3065 if (originalData
.length
< 2)
3066 return originalData
;
3067 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
3068 var rollingData
= [];
3069 var sigma
= this.attr_("sigma");
3071 if (this.fractions_
) {
3073 var den
= 0; // numerator/denominator
3075 for (var i
= 0; i
< originalData
.length
; i
++) {
3076 num
+= originalData
[i
][1][0];
3077 den
+= originalData
[i
][1][1];
3078 if (i
- rollPeriod
>= 0) {
3079 num
-= originalData
[i
- rollPeriod
][1][0];
3080 den
-= originalData
[i
- rollPeriod
][1][1];
3083 var date
= originalData
[i
][0];
3084 var value
= den
? num
/ den
: 0.0;
3085 if (this.attr_("errorBars")) {
3086 if (this.wilsonInterval_
) {
3087 // For more details on this confidence interval, see:
3088 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
3090 var p
= value
< 0 ? 0 : value
, n
= den
;
3091 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
3092 var denom
= 1 + sigma
* sigma
/ den
;
3093 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
3094 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
3095 rollingData
[i
] = [date
,
3096 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
3098 rollingData
[i
] = [date
, [0, 0, 0]];
3101 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
3102 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
3105 rollingData
[i
] = [date
, mult
* value
];
3108 } else if (this.attr_("customBars")) {
3113 for (var i
= 0; i
< originalData
.length
; i
++) {
3114 var data
= originalData
[i
][1];
3116 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
3118 if (y
!= null && !isNaN(y
)) {
3124 if (i
- rollPeriod
>= 0) {
3125 var prev
= originalData
[i
- rollPeriod
];
3126 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
3133 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
3134 1.0 * (mid
- low
) / count
,
3135 1.0 * (high
- mid
) / count
]];
3138 // Calculate the rolling average for the first rollPeriod - 1 points where
3139 // there is not enough data to roll over the full number of points
3140 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
3141 if (!this.attr_("errorBars")){
3142 if (rollPeriod
== 1) {
3143 return originalData
;
3146 for (var i
= 0; i
< originalData
.length
; i
++) {
3149 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3150 var y
= originalData
[j
][1];
3151 if (y
== null || isNaN(y
)) continue;
3153 sum
+= originalData
[j
][1];
3156 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
3158 rollingData
[i
] = [originalData
[i
][0], null];
3163 for (var i
= 0; i
< originalData
.length
; i
++) {
3167 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3168 var y
= originalData
[j
][1][0];
3169 if (y
== null || isNaN(y
)) continue;
3171 sum
+= originalData
[j
][1][0];
3172 variance
+= Math
.pow(originalData
[j
][1][1], 2);
3175 var stddev
= Math
.sqrt(variance
) / num_ok
;
3176 rollingData
[i
] = [originalData
[i
][0],
3177 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
3179 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
3190 * Parses a date, returning the number of milliseconds since epoch. This can be
3191 * passed in as an xValueParser in the Dygraph constructor.
3192 * TODO(danvk): enumerate formats that this understands.
3193 * @param {String} A date in YYYYMMDD format.
3194 * @return {Number} Milliseconds since epoch.
3196 Dygraph
.dateParser
= function(dateStr
, self
) {
3199 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3200 dateStrSlashed
= dateStr
.replace("-", "/", "g");
3201 while (dateStrSlashed
.search("-") != -1) {
3202 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
3204 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3205 } else if (dateStr
.length
== 8) { // e.g. '20090712'
3206 // TODO(danvk): remove support for this format. It's confusing.
3207 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
3208 + "/" + dateStr
.substr(6,2);
3209 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3211 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3212 // "2009/07/12 12:34:56"
3213 d
= Dygraph
.dateStrToMillis(dateStr
);
3216 if (!d
|| isNaN(d
)) {
3217 self
.error("Couldn't parse " + dateStr
+ " as a date");
3223 * Detects the type of the str (date or numeric) and sets the various
3224 * formatting attributes in this.attrs_ based on this type.
3225 * @param {String} str An x value.
3228 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3230 if (str
.indexOf('-') > 0 ||
3231 str
.indexOf('/') >= 0 ||
3232 isNaN(parseFloat(str
))) {
3234 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3235 // TODO(danvk): remove support for this format.
3240 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3241 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3242 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3243 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3245 // TODO(danvk): use Dygraph.numberFormatter here?
3246 /** @private (shut up, jsdoc!) */
3247 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3248 /** @private (shut up, jsdoc!) */
3249 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3250 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3251 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3256 * Parses the value as a floating point number. This is like the parseFloat()
3257 * built-in, but with a few differences:
3258 * - the empty string is parsed as null, rather than NaN.
3259 * - if the string cannot be parsed at all, an error is logged.
3260 * If the string can't be parsed, this method returns null.
3261 * @param {String} x The string to be parsed
3262 * @param {Number} opt_line_no The line number from which the string comes.
3263 * @param {String} opt_line The text of the line from which the string comes.
3267 // Parse the x as a float or return null if it's not a number.
3268 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3269 var val
= parseFloat(x
);
3270 if (!isNaN(val
)) return val
;
3272 // Try to figure out what happeend.
3273 // If the value is the empty string, parse it as null.
3274 if (/^ *$/.test(x
)) return null;
3276 // If it was actually "NaN", return it as NaN.
3277 if (/^ *nan *$/i.test(x
)) return NaN
;
3279 // Looks like a parsing error.
3280 var msg
= "Unable to parse '" + x
+ "' as a number";
3281 if (opt_line
!== null && opt_line_no
!== null) {
3282 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3291 * Parses a string in a special csv format. We expect a csv file where each
3292 * line is a date point, and the first field in each line is the date string.
3293 * We also expect that all remaining fields represent series.
3294 * if the errorBars attribute is set, then interpret the fields as:
3295 * date, series1, stddev1, series2, stddev2, ...
3296 * @param {[Object]} data See above.
3298 * @return [Object] An array with one entry for each row. These entries
3299 * are an array of cells in that row. The first entry is the parsed x-value for
3300 * the row. The second, third, etc. are the y-values. These can take on one of
3301 * three forms, depending on the CSV and constructor parameters:
3303 * 2. [ value, stddev ]
3304 * 3. [ low value, center value, high value ]
3306 Dygraph
.prototype.parseCSV_
= function(data
) {
3308 var lines
= data
.split("\n");
3310 // Use the default delimiter or fall back to a tab if that makes sense.
3311 var delim
= this.attr_('delimiter');
3312 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3317 if (this.labelsFromCSV_
) {
3319 this.attrs_
.labels
= lines
[0].split(delim
);
3324 var defaultParserSet
= false; // attempt to auto-detect x value type
3325 var expectedCols
= this.attr_("labels").length
;
3326 var outOfOrder
= false;
3327 for (var i
= start
; i
< lines
.length
; i
++) {
3328 var line
= lines
[i
];
3330 if (line
.length
== 0) continue; // skip blank lines
3331 if (line
[0] == '#') continue; // skip comment lines
3332 var inFields
= line
.split(delim
);
3333 if (inFields
.length
< 2) continue;
3336 if (!defaultParserSet
) {
3337 this.detectTypeFromString_(inFields
[0]);
3338 xParser
= this.attr_("xValueParser");
3339 defaultParserSet
= true;
3341 fields
[0] = xParser(inFields
[0], this);
3343 // If fractions are expected, parse the numbers as "A/B
"
3344 if (this.fractions_) {
3345 for (var j = 1; j < inFields.length; j++) {
3346 // TODO(danvk): figure out an appropriate way to flag parse errors.
3347 var vals = inFields[j].split("/");
3348 if (vals.length != 2) {
3349 this.error('Expected fractional "num
/den
" values in CSV data ' +
3350 "but found a value
'" + inFields[j] + "' on line
" +
3351 (1 + i) + " ('" + line + "') which is not of
this form
.");
3354 fields[j] = [this.parseFloat_(vals[0], i, line),
3355 this.parseFloat_(vals[1], i, line)];
3358 } else if (this.attr_("errorBars
")) {
3359 // If there are error bars, values are (value, stddev) pairs
3360 if (inFields.length % 2 != 1) {
3361 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3362 'but line ' + (1 + i) + ' has an odd number of values (' +
3363 (inFields.length - 1) + "): '" + line + "'");
3365 for (var j = 1; j < inFields.length; j += 2) {
3366 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3367 this.parseFloat_(inFields[j + 1], i, line)];
3369 } else if (this.attr_("customBars
")) {
3370 // Bars are a low;center;high tuple
3371 for (var j = 1; j < inFields.length; j++) {
3372 var val = inFields[j];
3373 if (/^ *$/.test(val)) {
3374 fields[j] = [null, null, null];
3376 var vals = val.split(";");
3377 if (vals.length == 3) {
3378 fields[j] = [ this.parseFloat_(vals[0], i, line),
3379 this.parseFloat_(vals[1], i, line),
3380 this.parseFloat_(vals[2], i, line) ];
3382 this.warning('When using customBars, values must be either blank ' +
3383 'or "low
;center
;high
" tuples (got "' + val +
3384 '" on line ' + (1+i));
3389 // Values are just numbers
3390 for (var j = 1; j < inFields.length; j++) {
3391 fields[j] = this.parseFloat_(inFields[j], i, line);
3394 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3398 if (fields.length != expectedCols) {
3399 this.error("Number of columns
in line
" + i + " (" + fields.length +
3400 ") does not agree
with number of
labels (" + expectedCols +
3404 // If the user specified the 'labels' option and none of the cells of the
3405 // first row parsed correctly, then they probably double-specified the
3406 // labels. We go with the values set in the option, discard this row and
3407 // log a warning to the JS console.
3408 if (i == 0 && this.attr_('labels')) {
3409 var all_null = true;
3410 for (var j = 0; all_null && j < fields.length; j++) {
3411 if (fields[j]) all_null = false;
3414 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3415 "CSV
data ('" + line + "') appears to also contain labels
. " +
3416 "Will drop the CSV labels and
use the option labels
.");
3424 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3425 ret.sort(function(a,b) { return a[0] - b[0] });
3433 * The user has provided their data as a pre-packaged JS array. If the x values
3434 * are numeric, this is the same as dygraphs' internal format. If the x values
3435 * are dates, we need to convert them from Date objects to ms since epoch.
3436 * @param {[Object]} data
3437 * @return {[Object]} data with numeric x values.
3439 Dygraph.prototype.parseArray_ = function(data) {
3440 // Peek at the first x value to see if it's numeric.
3441 if (data.length == 0) {
3442 this.error("Can
't plot empty data set");
3445 if (data[0].length == 0) {
3446 this.error("Data set cannot contain an empty row");
3450 if (this.attr_("labels") == null) {
3451 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3452 "in the options parameter");
3453 this.attrs_.labels = [ "X" ];
3454 for (var i = 1; i < data[0].length; i++) {
3455 this.attrs_.labels.push("Y" + i);
3459 if (Dygraph.isDateLike(data[0][0])) {
3460 // Some intelligent defaults for a date x-axis.
3461 this.attrs_.xValueFormatter = Dygraph.dateString_;
3462 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3463 this.attrs_.xTicker = Dygraph.dateTicker;
3465 // Assume they're all dates
.
3466 var parsedData
= Dygraph
.clone(data
);
3467 for (var i
= 0; i
< data
.length
; i
++) {
3468 if (parsedData
[i
].length
== 0) {
3469 this.error("Row " + (1 + i
) + " of data is empty");
3472 if (parsedData
[i
][0] == null
3473 || typeof(parsedData
[i
][0].getTime
) != 'function'
3474 || isNaN(parsedData
[i
][0].getTime())) {
3475 this.error("x value in row " + (1 + i
) + " is not a Date");
3478 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3482 // Some intelligent defaults for a numeric x-axis.
3483 /** @private (shut up, jsdoc!) */
3484 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3485 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3491 * Parses a DataTable object from gviz.
3492 * The data is expected to have a first column that is either a date or a
3493 * number. All subsequent columns must be numbers. If there is a clear mismatch
3494 * between this.xValueParser_ and the type of the first column, it will be
3495 * fixed. Fills out rawData_.
3496 * @param {[Object]} data See above.
3499 Dygraph
.prototype.parseDataTable_
= function(data
) {
3500 var cols
= data
.getNumberOfColumns();
3501 var rows
= data
.getNumberOfRows();
3503 var indepType
= data
.getColumnType(0);
3504 if (indepType
== 'date' || indepType
== 'datetime') {
3505 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3506 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3507 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3508 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3509 } else if (indepType
== 'number') {
3510 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3511 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3512 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3513 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3515 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3516 "column 1 of DataTable input (Got '" + indepType
+ "')");
3520 // Array of the column indices which contain data (and not annotations).
3522 var annotationCols
= {}; // data index -> [annotation cols]
3523 var hasAnnotations
= false;
3524 for (var i
= 1; i
< cols
; i
++) {
3525 var type
= data
.getColumnType(i
);
3526 if (type
== 'number') {
3528 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3529 // This is OK -- it's an annotation column.
3530 var dataIdx
= colIdx
[colIdx
.length
- 1];
3531 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3532 annotationCols
[dataIdx
] = [i
];
3534 annotationCols
[dataIdx
].push(i
);
3536 hasAnnotations
= true;
3538 this.error("Only 'number' is supported as a dependent type with Gviz." +
3539 " 'string' is only supported if displayAnnotations is true");
3543 // Read column labels
3544 // TODO(danvk): add support back for errorBars
3545 var labels
= [data
.getColumnLabel(0)];
3546 for (var i
= 0; i
< colIdx
.length
; i
++) {
3547 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3548 if (this.attr_("errorBars")) i
+= 1;
3550 this.attrs_
.labels
= labels
;
3551 cols
= labels
.length
;
3554 var outOfOrder
= false;
3555 var annotations
= [];
3556 for (var i
= 0; i
< rows
; i
++) {
3558 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3559 data
.getValue(i
, 0) === null) {
3560 this.warn("Ignoring row " + i
+
3561 " of DataTable because of undefined or null first column.");
3565 if (indepType
== 'date' || indepType
== 'datetime') {
3566 row
.push(data
.getValue(i
, 0).getTime());
3568 row
.push(data
.getValue(i
, 0));
3570 if (!this.attr_("errorBars")) {
3571 for (var j
= 0; j
< colIdx
.length
; j
++) {
3572 var col
= colIdx
[j
];
3573 row
.push(data
.getValue(i
, col
));
3574 if (hasAnnotations
&&
3575 annotationCols
.hasOwnProperty(col
) &&
3576 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3578 ann
.series
= data
.getColumnLabel(col
);
3580 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3582 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3583 if (k
) ann
.text
+= "\n";
3584 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3586 annotations
.push(ann
);
3590 // Strip out infinities, which give dygraphs problems later on.
3591 for (var j
= 0; j
< row
.length
; j
++) {
3592 if (!isFinite(row
[j
])) row
[j
] = null;
3595 for (var j
= 0; j
< cols
- 1; j
++) {
3596 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3599 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3606 this.warn("DataTable is out of order; order it correctly to speed loading.");
3607 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3609 this.rawData_
= ret
;
3611 if (annotations
.length
> 0) {
3612 this.setAnnotations(annotations
, true);
3618 * This is identical to JavaScript's built-in Date.parse() method, except that
3619 * it doesn't get replaced with an incompatible method by aggressive JS
3620 * libraries like MooTools or Joomla.
3621 * @param { String } str The date string, e.g. "2011/05/06"
3622 * @return { Integer } millis since epoch
3624 Dygraph
.dateStrToMillis
= function(str
) {
3625 return new Date(str
).getTime();
3628 // These functions are all based on MochiKit.
3632 Dygraph
.update
= function (self
, o
) {
3633 if (typeof(o
) != 'undefined' && o
!== null) {
3635 if (o
.hasOwnProperty(k
)) {
3646 Dygraph
.isArrayLike
= function (o
) {
3647 var typ
= typeof(o
);
3649 (typ
!= 'object' && !(typ
== 'function' &&
3650 typeof(o
.item
) == 'function')) ||
3652 typeof(o
.length
) != 'number' ||
3663 Dygraph
.isDateLike
= function (o
) {
3664 if (typeof(o
) != "object" || o
=== null ||
3665 typeof(o
.getTime
) != 'function') {
3674 Dygraph
.clone
= function(o
) {
3675 // TODO(danvk): figure out how MochiKit's version works
3677 for (var i
= 0; i
< o
.length
; i
++) {
3678 if (Dygraph
.isArrayLike(o
[i
])) {
3679 r
.push(Dygraph
.clone(o
[i
]));
3689 * Get the CSV data. If it's in a function, call that function. If it's in a
3690 * file, do an XMLHttpRequest to get it.
3693 Dygraph
.prototype.start_
= function() {
3694 if (typeof this.file_
== 'function') {
3695 // CSV string. Pretend we got it via XHR.
3696 this.loadedEvent_(this.file_());
3697 } else if (Dygraph
.isArrayLike(this.file_
)) {
3698 this.rawData_
= this.parseArray_(this.file_
);
3700 } else if (typeof this.file_
== 'object' &&
3701 typeof this.file_
.getColumnRange
== 'function') {
3702 // must be a DataTable from gviz.
3703 this.parseDataTable_(this.file_
);
3705 } else if (typeof this.file_
== 'string') {
3706 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3707 if (this.file_
.indexOf('\n') >= 0) {
3708 this.loadedEvent_(this.file_
);
3710 var req
= new XMLHttpRequest();
3712 req
.onreadystatechange
= function () {
3713 if (req
.readyState
== 4) {
3714 if (req
.status
== 200) {
3715 caller
.loadedEvent_(req
.responseText
);
3720 req
.open("GET", this.file_
, true);
3724 this.error("Unknown data format: " + (typeof this.file_
));
3729 * Changes various properties of the graph. These can include:
3731 * <li>file: changes the source data for the graph</li>
3732 * <li>errorBars: changes whether the data contains stddev</li>
3735 * @param {Object} attrs The new properties and values
3737 Dygraph
.prototype.updateOptions
= function(attrs
) {
3738 // TODO(danvk): this is a mess. Rethink this function.
3739 if ('rollPeriod' in attrs
) {
3740 this.rollPeriod_
= attrs
.rollPeriod
;
3742 if ('dateWindow' in attrs
) {
3743 this.dateWindow_
= attrs
.dateWindow
;
3744 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3745 this.zoomed_x_
= attrs
.dateWindow
!= null;
3748 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3749 this.zoomed_y_
= attrs
.valueRange
!= null;
3752 // TODO(danvk): validate per-series options.
3757 // highlightCircleSize
3759 Dygraph
.update(this.user_attrs_
, attrs
);
3760 Dygraph
.update(this.renderOptions_
, attrs
);
3762 this.labelsFromCSV_
= (this.attr_("labels") == null);
3764 // TODO(danvk): this doesn't match the constructor logic
3765 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3766 if (attrs
['file']) {
3767 this.file_
= attrs
['file'];
3775 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3776 * containing div (which has presumably changed size since the dygraph was
3777 * instantiated. If the width/height are specified, the div will be resized.
3779 * This is far more efficient than destroying and re-instantiating a
3780 * Dygraph, since it doesn't have to reparse the underlying data.
3782 * @param {Number} [width] Width (in pixels)
3783 * @param {Number} [height] Height (in pixels)
3785 Dygraph
.prototype.resize
= function(width
, height
) {
3786 if (this.resize_lock
) {
3789 this.resize_lock
= true;
3791 if ((width
=== null) != (height
=== null)) {
3792 this.warn("Dygraph.resize() should be called with zero parameters or " +
3793 "two non-NULL parameters. Pretending it was zero.");
3794 width
= height
= null;
3797 // TODO(danvk): there should be a clear() method.
3798 this.maindiv_
.innerHTML
= "";
3799 this.attrs_
.labelsDiv
= null;
3802 this.maindiv_
.style
.width
= width
+ "px";
3803 this.maindiv_
.style
.height
= height
+ "px";
3804 this.width_
= width
;
3805 this.height_
= height
;
3807 this.width_
= this.maindiv_
.offsetWidth
;
3808 this.height_
= this.maindiv_
.offsetHeight
;
3811 this.createInterface_();
3814 this.resize_lock
= false;
3818 * Adjusts the number of points in the rolling average. Updates the graph to
3819 * reflect the new averaging period.
3820 * @param {Number} length Number of points over which to average the data.
3822 Dygraph
.prototype.adjustRoll
= function(length
) {
3823 this.rollPeriod_
= length
;
3828 * Returns a boolean array of visibility statuses.
3830 Dygraph
.prototype.visibility
= function() {
3831 // Do lazy-initialization, so that this happens after we know the number of
3833 if (!this.attr_("visibility")) {
3834 this.attrs_
["visibility"] = [];
3836 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3837 this.attr_("visibility").push(true);
3839 return this.attr_("visibility");
3843 * Changes the visiblity of a series.
3845 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3846 var x
= this.visibility();
3847 if (num
< 0 || num
>= x
.length
) {
3848 this.warn("invalid series number in setVisibility: " + num
);
3856 * Update the list of annotations and redraw the chart.
3858 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3859 // Only add the annotation CSS rule once we know it will be used.
3860 Dygraph
.addAnnotationRule();
3861 this.annotations_
= ann
;
3862 this.layout_
.setAnnotations(this.annotations_
);
3863 if (!suppressDraw
) {
3869 * Return the list of annotations.
3871 Dygraph
.prototype.annotations
= function() {
3872 return this.annotations_
;
3876 * Get the index of a series (column) given its name. The first column is the
3877 * x-axis, so the data series start with index 1.
3879 Dygraph
.prototype.indexFromSetName
= function(name
) {
3880 var labels
= this.attr_("labels");
3881 for (var i
= 0; i
< labels
.length
; i
++) {
3882 if (labels
[i
] == name
) return i
;
3889 * Adds a default style for the annotation CSS classes to the document. This is
3890 * only executed when annotations are actually used. It is designed to only be
3891 * called once -- all calls after the first will return immediately.
3893 Dygraph
.addAnnotationRule
= function() {
3894 if (Dygraph
.addedAnnotationCSS
) return;
3896 var rule
= "border: 1px solid black; " +
3897 "background-color: white; " +
3898 "text-align: center;";
3900 var styleSheetElement
= document
.createElement("style");
3901 styleSheetElement
.type
= "text/css";
3902 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3904 // Find the first style sheet that we can access.
3905 // We may not add a rule to a style sheet from another domain for security
3906 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3907 // adds its own style sheets from google.com.
3908 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3909 if (document
.styleSheets
[i
].disabled
) continue;
3910 var mysheet
= document
.styleSheets
[i
];
3912 if (mysheet
.insertRule
) { // Firefox
3913 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3914 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3915 } else if (mysheet
.addRule
) { // IE
3916 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3918 Dygraph
.addedAnnotationCSS
= true;
3921 // Was likely a security exception.
3925 this.warn("Unable to add default annotation CSS rule; display may be off.");
3930 * Create a new canvas element. This is more complex than a simple
3931 * document.createElement("canvas") because of IE and excanvas.
3933 Dygraph
.createCanvas
= function() {
3934 var canvas
= document
.createElement("canvas");
3936 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3937 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3938 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3946 * A wrapper around Dygraph that implements the gviz API.
3947 * @param {Object} container The DOM object the visualization should live in.
3949 Dygraph
.GVizChart
= function(container
) {
3950 this.container
= container
;
3953 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3954 // Clear out any existing dygraph.
3955 // TODO(danvk): would it make more sense to simply redraw using the current
3956 // date_graph object?
3957 this.container
.innerHTML
= '';
3958 if (typeof(this.date_graph
) != 'undefined') {
3959 this.date_graph
.destroy();
3962 this.date_graph
= new Dygraph(this.container
, data
, options
);
3966 * Google charts compatible setSelection
3967 * Only row selection is supported, all points in the row will be highlighted
3968 * @param {Array} array of the selected cells
3971 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3973 if (selection_array
.length
) {
3974 row
= selection_array
[0].row
;
3976 this.date_graph
.setSelection(row
);
3980 * Google charts compatible getSelection implementation
3981 * @return {Array} array of the selected cells
3984 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3987 var row
= this.date_graph
.getSelection();
3989 if (row
< 0) return selection
;
3992 for (var i
in this.date_graph
.layout_
.datasets
) {
3993 selection
.push({row
: row
, column
: col
});
4000 // Older pages may still use this name.
4001 DateGraph
= Dygraph
;
4003 // <REMOVE_FOR_COMBINED>
4004 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
4007 "default": "parseFloat() or Date.parse()*",
4008 "labels": ["CSV parsing"],
4009 "type": "function(str) -> number",
4010 "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."
4014 "labels": ["Data Line display"],
4016 "description": "If set, stack series on top of one another rather than drawing them independently."
4020 "labels": ["Data Line display"],
4022 "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."
4024 "labelsDivStyles": {
4026 "labels": ["Legend"],
4028 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
4032 "labels": ["Data Line display"],
4034 "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."
4038 "labels": ["Overall display"],
4040 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4044 "labels": ["Callbacks"],
4045 "type": "function(minDate, maxDate, yRanges)",
4046 "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."
4048 "pointClickCallback": {
4050 "labels": ["Callbacks", "Interactive Elements"],
4055 "default": "(see description)",
4056 "labels": ["Data Series Colors"],
4057 "type": "array<string>",
4058 "example": "['red', '#00FF00']",
4059 "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."
4061 "connectSeparatedPoints": {
4063 "labels": ["Data Line display"],
4065 "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."
4067 "highlightCallback": {
4069 "labels": ["Callbacks"],
4070 "type": "function(event, x, points,row)",
4071 "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>"
4075 "labels": ["Axis display"],
4077 "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"
4081 "labels": ["Error Bars", "Rolling Averages"],
4082 "type": "integer >= 1",
4083 "description": "Number of days over which to average data. Discussed extensively above."
4085 "unhighlightCallback": {
4087 "labels": ["Callbacks"],
4088 "type": "function(event)",
4089 "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."
4093 "labels": ["Axis display"],
4095 "description": "The size of the line to display next to each tick mark on x- or y-axes."
4097 "labelsSeparateLines": {
4099 "labels": ["Legend"],
4101 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
4103 "xValueFormatter": {
4104 "default": "(Round to 2 decimal places)",
4105 "labels": ["Axis display"],
4106 "type": "function(x)",
4107 "description": "Function to provide a custom display format for the X value for mouseover."
4109 "pixelsPerYLabel": {
4111 "labels": ["Axis display", "Grid"],
4113 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4115 "annotationMouseOverHandler": {
4117 "labels": ["Annotations"],
4118 "type": "function(annotation, point, dygraph, event)",
4119 "description": "If provided, this function is called whenever the user mouses over an annotation."
4121 "annotationMouseOutHandler": {
4123 "labels": ["Annotations"],
4124 "type": "function(annotation, point, dygraph, event)",
4125 "description": "If provided, this function is called whenever the user mouses out of an annotation."
4127 "annotationClickHandler": {
4129 "labels": ["Annotations"],
4130 "type": "function(annotation, point, dygraph, event)",
4131 "description": "If provided, this function is called whenever the user clicks on an annotation."
4133 "annotationDblClickHandler": {
4135 "labels": ["Annotations"],
4136 "type": "function(annotation, point, dygraph, event)",
4137 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
4141 "labels": ["Callbacks"],
4142 "type": "function(dygraph, is_initial)",
4143 "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."
4147 "labels": ["Value display/formatting"],
4149 "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."
4153 "labels": ["CSV parsing"],
4155 "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."
4157 "axisLabelFontSize": {
4159 "labels": ["Axis display"],
4161 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4163 "underlayCallback": {
4165 "labels": ["Callbacks"],
4166 "type": "function(canvas, area, dygraph)",
4167 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
4171 "labels": ["Overall display"],
4173 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4175 "interactionModel": {
4177 "labels": ["Interactive Elements"],
4179 "description": "TODO(konigsberg): document this"
4182 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4183 "labels": ["Axis display"],
4184 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4185 "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."
4187 "xAxisLabelWidth": {
4189 "labels": ["Axis display"],
4191 "description": "Width, in pixels, of the x-axis labels."
4193 "showLabelsOnHighlight": {
4195 "labels": ["Interactive Elements", "Legend"],
4197 "description": "Whether to show the legend upon mouseover."
4200 "default": "(none)",
4201 "labels": ["Axis display"],
4202 "type": "string or object",
4203 "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."
4205 "pixelsPerXLabel": {
4207 "labels": ["Axis display", "Grid"],
4209 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4213 "labels": ["Legend"],
4214 "type": "DOM element or string",
4215 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4216 "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."
4220 "labels": ["CSV parsing", "Error Bars"],
4222 "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)."
4226 "labels": ["Axis display"],
4228 "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."
4232 "labels": ["Data Line display"],
4234 "example": "0.5, 2.0",
4235 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4239 "labels": ["Error Bars"],
4241 "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."
4245 "labels": ["Data Line display"],
4247 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4249 "highlightCircleSize": {
4251 "labels": ["Interactive Elements"],
4253 "description": "The size in pixels of the dot drawn over highlighted points."
4256 "default": "rgb(128,128,128)",
4258 "type": "red, blue",
4259 "description": "The color of the gridlines."
4262 "default": "[true, true, ...]",
4263 "labels": ["Data Line display"],
4264 "type": "Array of booleans",
4265 "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."
4268 "default": "Full range of the input is shown",
4269 "labels": ["Axis display"],
4270 "type": "Array of two numbers",
4271 "example": "[10, 110]",
4272 "description": "Explicitly set the vertical range of the graph to [low, high]."
4276 "labels": ["Legend"],
4278 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4280 "colorSaturation": {
4282 "labels": ["Data Series Colors"],
4283 "type": "0.0 - 1.0",
4284 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4286 "yAxisLabelWidth": {
4288 "labels": ["Axis display"],
4290 "description": "Width, in pixels, of the y-axis labels."
4292 "hideOverlayOnMouseOut": {
4294 "labels": ["Interactive Elements", "Legend"],
4296 "description": "Whether to hide the legend when the mouse leaves the chart area."
4298 "yValueFormatter": {
4299 "default": "(Round to 2 decimal places)",
4300 "labels": ["Axis display"],
4301 "type": "function(x)",
4302 "description": "Function to provide a custom display format for the Y value for mouseover."
4305 "default": "onmouseover",
4306 "labels": ["Legend"],
4308 "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."
4310 "labelsShowZeroValues": {
4312 "labels": ["Legend"],
4314 "description": "Show zero value labels in the labelsDiv."
4318 "labels": ["Data Line display"],
4320 "description": "When set, display the graph as a step plot instead of a line plot."
4324 "labels": ["Value display/formatting"],
4326 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4330 "labels": ["Overall display"],
4332 "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."
4336 "labels": ["Axis display"],
4338 "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."
4340 "xAxisLabelFormatter": {
4341 "default": "Dygraph.dateAxisFormatter",
4342 "labels": ["Axis display", "Value display/formatting"],
4343 "type": "function(date, granularity)",
4344 "description": "Function to call to format values along the x axis."
4347 "snippet": "function(e, date){<br> alert(date);<br>}",
4349 "labels": ["Callbacks"],
4350 "type": "function(e, date)",
4351 "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."
4353 "yAxisLabelFormatter": {
4354 "default": "yValueFormatter",
4355 "labels": ["Axis display", "Value display/formatting"],
4356 "type": "function(x)",
4357 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4360 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4361 "labels": ["Legend"],
4362 "type": "array<string>",
4363 "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."
4366 "default": "Full range of the input is shown",
4367 "labels": ["Axis display"],
4368 "type": "Array of two Dates or numbers",
4369 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4370 "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."
4374 "labels": ["Interactive Elements", "Rolling Averages"],
4376 "description": "If the rolling average period text box should be shown."
4380 "labels": ["Error Bars"],
4382 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4386 "labels": ["CSV parsing", "Error Bars"],
4388 "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."
4392 "labels": ["Data Series Colors"],
4393 "type": "float (0.0 - 1.0)",
4394 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4398 "labels": ["CSV parsing", "Error Bars"],
4400 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4402 "displayAnnotations": {
4404 "labels": ["Annotations"],
4406 "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."
4408 "panEdgeFraction": {
4410 "labels": ["Axis Display", "Interactive Elements"],
4413 "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."
4416 "labels": ["Chart labels"],
4419 "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."
4423 "labels": ["Chart labels"],
4425 "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."
4428 "labels": ["Chart labels"],
4431 "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."
4434 "labels": ["Chart labels"],
4437 "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."
4440 "labels": ["Chart labels"],
4443 "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."
4446 "labels": ["Chart labels"],
4449 "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."
4451 "isZoomedIgnoreProgrammaticZoom" : {
4453 "labels": ["Zooming"],
4455 "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."
4459 "labels": ["Value display/formatting"],
4461 "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."
4463 "digitsAfterDecimal" : {
4465 "labels": ["Value display/formatting"],
4467 "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."
4469 "maxNumberWidth" : {
4471 "labels": ["Value display/formatting"],
4473 "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."
4477 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4478 // JSON. This assumption cannot be checked in JS, but it will be checked when
4479 // documentation is generated by the generate-documentation.py script. For the
4480 // most part, this just means that you should always use double quotes.
4482 // Do a quick sanity check on the options reference.
4484 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4485 var flds
= ['type', 'default', 'description'];
4492 'Data Line display',
4493 'Data Series Colors',
4496 'Interactive Elements',
4500 'Value display/formatting',
4504 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4506 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4507 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4508 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4509 for (var i
= 0; i
< flds
.length
; i
++) {
4510 if (!op
.hasOwnProperty(flds
[i
])) {
4511 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4512 } else if (typeof(op
[flds
[i
]]) != 'string') {
4513 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4516 var labels
= op
['labels'];
4517 if (typeof(labels
) !== 'object') {
4518 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4519 for (var i
= 0; i
< labels
.length
; i
++) {
4520 if (!cats
.hasOwnProperty(labels
[i
])) {
4521 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4522 '", which is invalid.');
4528 // </REMOVE_FOR_COMBINED
>