1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
27 Date,SeriesA,SeriesB,...
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
31 If the 'fractions' option is set, the input should be of the form:
33 Date,SeriesA,SeriesB,...
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
37 And error bars will be calculated automatically using a binomial distribution.
39 For further documentation and examples, see http://dygraphs.com/
44 * Creates an interactive, zoomable chart.
47 * @param {div | String} div A div or the id of a div into which to construct
49 * @param {String | Function} file A file containing CSV data or a function
50 * that returns this data. The most basic expected format for each line is
51 * "YYYY/MM/DD,val1,val2,...". For more information, see
52 * http://dygraphs.com/data.html.
53 * @param {Object} attrs Various other attributes, e.g. errorBars determines
54 * whether the input data contains error ranges. For a complete list of
55 * options, see http://dygraphs.com/options.html.
57 Dygraph
= function(div
, data
, opts
) {
58 if (arguments
.length
> 0) {
59 if (arguments
.length
== 4) {
60 // Old versions of dygraphs took in the series labels as a constructor
61 // parameter. This doesn't make sense anymore, but it's easy to continue
62 // to support this usage.
63 this.warn("Using deprecated four-argument dygraph constructor");
64 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
66 this.__init__(div
, data
, opts
);
71 Dygraph
.NAME
= "Dygraph";
72 Dygraph
.VERSION
= "1.2";
73 Dygraph
.__repr__
= function() {
74 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
78 * Returns information about the Dygraph class.
80 Dygraph
.toString
= function() {
81 return this.__repr__();
84 // Various default values
85 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
86 Dygraph
.DEFAULT_WIDTH
= 480;
87 Dygraph
.DEFAULT_HEIGHT
= 320;
89 Dygraph
.LOG_SCALE
= 10;
90 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
92 Dygraph
.log10
= function(x
) {
93 return Math
.log(x
) / Dygraph
.LN_TEN
;
96 // Default attribute values.
97 Dygraph
.DEFAULT_ATTRS
= {
98 highlightCircleSize
: 3,
104 // TODO(danvk): move defaults from createStatusMessage_ here.
106 labelsSeparateLines
: false,
107 labelsShowZeroValues
: true,
110 showLabelsOnHighlight
: true,
112 yValueFormatter
: function(a
,b
) { return Dygraph
.numberFormatter(a
,b
); },
113 digitsAfterDecimal
: 2,
120 axisLabelFontSize
: 14,
123 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
127 xValueFormatter
: Dygraph
.dateString_
,
128 xValueParser
: Dygraph
.dateParser
,
129 xTicker
: Dygraph
.dateTicker
,
136 wilsonInterval
: true, // only relevant if fractions is true
140 connectSeparatedPoints
: false,
143 hideOverlayOnMouseOut
: true,
145 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
146 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
151 // Sizes of the various chart labels.
158 axisLineColor
: "black",
161 axisLabelColor
: "black",
162 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
166 gridLineColor
: "rgb(128,128,128)",
168 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
171 // Various logging levels.
177 // Directions for panning and zooming. Use bit operations when combined
178 // values are possible.
179 Dygraph
.HORIZONTAL
= 1;
180 Dygraph
.VERTICAL
= 2;
182 // Used for initializing annotation CSS rules only once.
183 Dygraph
.addedAnnotationCSS
= false;
187 * Return the 2d context for a dygraph canvas.
189 * This method is only exposed for the sake of replacing the function in
190 * automated tests, e.g.
192 * var oldFunc = Dygraph.getContext();
193 * Dygraph.getContext = function(canvas) {
194 * var realContext = oldFunc(canvas);
195 * return new Proxy(realContext);
198 Dygraph
.getContext
= function(canvas
) {
199 return canvas
.getContext("2d");
202 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
203 // Labels is no longer a constructor parameter, since it's typically set
204 // directly from the data source. It also conains a name for the x-axis,
205 // which the previous constructor form did not.
206 if (labels
!= null) {
207 var new_labels
= ["Date"];
208 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
209 Dygraph
.update(attrs
, { 'labels': new_labels
});
211 this.__init__(div
, file
, attrs
);
215 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
216 * and context <canvas> inside of it. See the constructor for details.
218 * @param {Element} div the Element to render the graph into.
219 * @param {String | Function} file Source data
220 * @param {Object} attrs Miscellaneous other options
223 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
224 // Hack for IE: if we're using excanvas and the document hasn't finished
225 // loading yet (and hence may not have initialized whatever it needs to
226 // initialize), then keep calling this routine periodically until it has.
227 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
228 typeof(G_vmlCanvasManager
) != 'undefined' &&
229 document
.readyState
!= 'complete') {
231 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
234 // Support two-argument constructor
235 if (attrs
== null) { attrs
= {}; }
237 // Copy the important bits into the object
238 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
241 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
242 this.previousVerticalX_
= -1;
243 this.fractions_
= attrs
.fractions
|| false;
244 this.dateWindow_
= attrs
.dateWindow
|| null;
246 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
247 this.is_initial_draw_
= true;
248 this.annotations_
= [];
250 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
251 this.zoomed_x_
= false;
252 this.zoomed_y_
= false;
254 // Clear the div. This ensure that, if multiple dygraphs are passed the same
255 // div, then only one will be drawn.
258 // If the div isn't already sized then inherit from our attrs or
259 // give it a default size.
260 if (div
.style
.width
== '') {
261 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
263 if (div
.style
.height
== '') {
264 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
266 this.width_
= parseInt(div
.style
.width
, 10);
267 this.height_
= parseInt(div
.style
.height
, 10);
268 // The div might have been specified as percent of the current window size,
269 // convert that to an appropriate number of pixels.
270 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
271 this.width_
= div
.offsetWidth
;
273 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
274 this.height_
= div
.offsetHeight
;
277 if (this.width_
== 0) {
278 this.error("dygraph has zero width. Please specify a width in pixels.");
280 if (this.height_
== 0) {
281 this.error("dygraph has zero height. Please specify a height in pixels.");
284 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
285 if (attrs
['stackedGraph']) {
286 attrs
['fillGraph'] = true;
287 // TODO(nikhilk): Add any other stackedGraph checks here.
290 // Dygraphs has many options, some of which interact with one another.
291 // To keep track of everything, we maintain two sets of options:
293 // this.user_attrs_ only options explicitly set by the user.
294 // this.attrs_ defaults, options derived from user_attrs_, data.
296 // Options are then accessed this.attr_('attr'), which first looks at
297 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
298 // defaults without overriding behavior that the user specifically asks for.
299 this.user_attrs_
= {};
300 Dygraph
.update(this.user_attrs_
, attrs
);
303 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
305 this.boundaryIds_
= [];
307 // Make a note of whether labels will be pulled from the CSV file.
308 this.labelsFromCSV_
= (this.attr_("labels") == null);
310 // Create the containing DIV and other interactive elements
311 this.createInterface_();
317 * Returns the zoomed status of the chart for one or both axes.
319 * Axis is an optional parameter. Can be set to 'x' or 'y'.
321 * The zoomed status for an axis is set whenever a user zooms using the mouse
322 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
323 * option is also specified).
325 Dygraph
.prototype.isZoomed
= function(axis
) {
326 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
327 if (axis
== 'x') return this.zoomed_x_
;
328 if (axis
== 'y') return this.zoomed_y_
;
329 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
333 * Returns information about the Dygraph object, including its containing ID.
335 Dygraph
.prototype.toString
= function() {
336 var maindiv
= this.maindiv_
;
337 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
338 return "[Dygraph " + id
+ "]";
343 * Returns the value of an option. This may be set by the user (either in the
344 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
346 * @param { String } name The name of the option, e.g. 'rollPeriod'.
347 * @param { String } [seriesName] The name of the series to which the option
348 * will be applied. If no per-series value of this option is available, then
349 * the global value is returned. This is optional.
350 * @return { ... } The value of the option.
352 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
353 // <REMOVE_FOR_COMBINED>
354 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
355 this.error('Must include options reference JS for testing');
356 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
357 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
358 'in the Dygraphs.OPTIONS_REFERENCE listing.');
359 // Only log this error once.
360 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
362 // </REMOVE_FOR_COMBINED
>
364 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
365 this.user_attrs_
[seriesName
] != null &&
366 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
367 return this.user_attrs_
[seriesName
][name
];
368 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
369 return this.user_attrs_
[name
];
370 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
371 return this.attrs_
[name
];
377 // TODO(danvk): any way I can get the line numbers to be this.warn call?
380 * Log an error on the JS console at the given severity.
381 * @param { Integer } severity One of Dygraph.{DEBUG,INFO,WARNING,ERROR}
382 * @param { String } The message to log.
384 Dygraph
.prototype.log
= function(severity
, message
) {
385 if (typeof(console
) != 'undefined') {
388 console
.debug('dygraphs: ' + message
);
391 console
.info('dygraphs: ' + message
);
393 case Dygraph
.WARNING
:
394 console
.warn('dygraphs: ' + message
);
397 console
.error('dygraphs: ' + message
);
404 Dygraph
.prototype.info
= function(message
) {
405 this.log(Dygraph
.INFO
, message
);
409 Dygraph
.prototype.warn
= function(message
) {
410 this.log(Dygraph
.WARNING
, message
);
414 Dygraph
.prototype.error
= function(message
) {
415 this.log(Dygraph
.ERROR
, message
);
419 * Returns the current rolling period, as set by the user or an option.
420 * @return {Number} The number of points in the rolling window
422 Dygraph
.prototype.rollPeriod
= function() {
423 return this.rollPeriod_
;
427 * Returns the currently-visible x-range. This can be affected by zooming,
428 * panning or a call to updateOptions.
429 * Returns a two-element array: [left, right].
430 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
432 Dygraph
.prototype.xAxisRange
= function() {
433 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
437 * Returns the lower- and upper-bound x-axis values of the
440 Dygraph
.prototype.xAxisExtremes
= function() {
441 var left
= this.rawData_
[0][0];
442 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
443 return [left
, right
];
447 * Returns the currently-visible y-range for an axis. This can be affected by
448 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
449 * called with no arguments, returns the range of the first axis.
450 * Returns a two-element array: [bottom, top].
452 Dygraph
.prototype.yAxisRange
= function(idx
) {
453 if (typeof(idx
) == "undefined") idx
= 0;
454 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
455 return [ this.axes_
[idx
].computedValueRange
[0],
456 this.axes_
[idx
].computedValueRange
[1] ];
460 * Returns the currently-visible y-ranges for each axis. This can be affected by
461 * zooming, panning, calls to updateOptions, etc.
462 * Returns an array of [bottom, top] pairs, one for each y-axis.
464 Dygraph
.prototype.yAxisRanges
= function() {
466 for (var i
= 0; i
< this.axes_
.length
; i
++) {
467 ret
.push(this.yAxisRange(i
));
472 // TODO(danvk): use these functions throughout dygraphs.
474 * Convert from data coordinates to canvas/div X/Y coordinates.
475 * If specified, do this conversion for the coordinate system of a particular
476 * axis. Uses the first axis by default.
477 * Returns a two-element array: [X, Y]
479 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
480 * instead of toDomCoords(null, y, axis).
482 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
483 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
487 * Convert from data x coordinates to canvas/div X coordinate.
488 * If specified, do this conversion for the coordinate system of a particular
490 * Returns a single value or null if x is null.
492 Dygraph
.prototype.toDomXCoord
= function(x
) {
497 var area
= this.plotter_
.area
;
498 var xRange
= this.xAxisRange();
499 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
503 * Convert from data x coordinates to canvas/div Y coordinate and optional
504 * axis. Uses the first axis by default.
506 * returns a single value or null if y is null.
508 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
509 var pct
= this.toPercentYCoord(y
, axis
);
514 var area
= this.plotter_
.area
;
515 return area
.y
+ pct
* area
.h
;
519 * Convert from canvas/div coords to data coordinates.
520 * If specified, do this conversion for the coordinate system of a particular
521 * axis. Uses the first axis by default.
522 * Returns a two-element array: [X, Y].
524 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
525 * instead of toDataCoords(null, y, axis).
527 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
528 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
532 * Convert from canvas/div x coordinate to data coordinate.
534 * If x is null, this returns null.
536 Dygraph
.prototype.toDataXCoord
= function(x
) {
541 var area
= this.plotter_
.area
;
542 var xRange
= this.xAxisRange();
543 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
547 * Convert from canvas/div y coord to value.
549 * If y is null, this returns null.
550 * if axis is null, this uses the first axis.
552 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
557 var area
= this.plotter_
.area
;
558 var yRange
= this.yAxisRange(axis
);
560 if (typeof(axis
) == "undefined") axis
= 0;
561 if (!this.axes_
[axis
].logscale
) {
562 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
564 // Computing the inverse of toDomCoord.
565 var pct
= (y
- area
.y
) / area
.h
567 // Computing the inverse of toPercentYCoord. The function was arrived at with
568 // the following steps:
570 // Original calcuation:
571 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
573 // Move denominator to both sides:
574 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
576 // subtract logr1, and take the negative value.
577 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
579 // Swap both sides of the equation, and we can compute the log of the
580 // return value. Which means we just need to use that as the exponent in
582 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
584 var logr1
= Dygraph
.log10(yRange
[1]);
585 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
586 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
592 * Converts a y for an axis to a percentage from the top to the
593 * bottom of the drawing area.
595 * If the coordinate represents a value visible on the canvas, then
596 * the value will be between 0 and 1, where 0 is the top of the canvas.
597 * However, this method will return values outside the range, as
598 * values can fall outside the canvas.
600 * If y is null, this returns null.
601 * if axis is null, this uses the first axis.
603 * @param { Number } y The data y-coordinate.
604 * @param { Number } [axis] The axis number on which the data coordinate lives.
605 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
607 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
611 if (typeof(axis
) == "undefined") axis
= 0;
613 var area
= this.plotter_
.area
;
614 var yRange
= this.yAxisRange(axis
);
617 if (!this.axes_
[axis
].logscale
) {
618 // yRange[1] - y is unit distance from the bottom.
619 // yRange[1] - yRange[0] is the scale of the range.
620 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
621 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
623 var logr1
= Dygraph
.log10(yRange
[1]);
624 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
630 * Converts an x value to a percentage from the left to the right of
633 * If the coordinate represents a value visible on the canvas, then
634 * the value will be between 0 and 1, where 0 is the left of the canvas.
635 * However, this method will return values outside the range, as
636 * values can fall outside the canvas.
638 * If x is null, this returns null.
639 * @param { Number } x The data x-coordinate.
640 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
642 Dygraph
.prototype.toPercentXCoord
= function(x
) {
647 var xRange
= this.xAxisRange();
648 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
652 * Returns the number of columns (including the independent variable).
653 * @return { Integer } The number of columns.
655 Dygraph
.prototype.numColumns
= function() {
656 return this.rawData_
[0].length
;
660 * Returns the number of rows (excluding any header/label row).
661 * @return { Integer } The number of rows, less any header.
663 Dygraph
.prototype.numRows
= function() {
664 return this.rawData_
.length
;
668 * Returns the value in the given row and column. If the row and column exceed
669 * the bounds on the data, returns null. Also returns null if the value is
671 * @param { Number} row The row number of the data (0-based). Row 0 is the
672 * first row of data, not a header row.
673 * @param { Number} col The column number of the data (0-based)
674 * @return { Number } The value in the specified cell or null if the row/col
677 Dygraph
.prototype.getValue
= function(row
, col
) {
678 if (row
< 0 || row
> this.rawData_
.length
) return null;
679 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
681 return this.rawData_
[row
][col
];
686 * Add an event handler. This smooths a difference between IE and the rest of
688 * @param { DOM element } el The element to add the event to.
689 * @param { String } evt The name of the event, e.g. 'click' or 'mousemove'.
690 * @param { Function } fn The function to call on the event. The function takes
691 * one parameter: the event object.
693 Dygraph
.addEvent
= function(el
, evt
, fn
) {
694 var normed_fn
= function(e
) {
695 if (!e
) var e
= window
.event
;
698 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
699 el
.addEventListener(evt
, normed_fn
, false);
701 el
.attachEvent('on' + evt
, normed_fn
);
708 * Cancels further processing of an event. This is useful to prevent default
709 * browser actions, e.g. highlighting text on a double-click.
710 * Based on the article at
711 * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
712 * @param { Event } e The event whose normal behavior should be canceled.
714 Dygraph
.cancelEvent
= function(e
) {
715 e
= e
? e
: window
.event
;
716 if (e
.stopPropagation
) {
719 if (e
.preventDefault
) {
722 e
.cancelBubble
= true;
724 e
.returnValue
= false;
730 * Generates interface elements for the Dygraph: a containing div, a div to
731 * display the current point, and a textbox to adjust the rolling average
732 * period. Also creates the Renderer/Layout elements.
735 Dygraph
.prototype.createInterface_
= function() {
736 // Create the all-enclosing graph div
737 var enclosing
= this.maindiv_
;
739 this.graphDiv
= document
.createElement("div");
740 this.graphDiv
.style
.width
= this.width_
+ "px";
741 this.graphDiv
.style
.height
= this.height_
+ "px";
742 enclosing
.appendChild(this.graphDiv
);
744 // Create the canvas for interactive parts of the chart.
745 this.canvas_
= Dygraph
.createCanvas();
746 this.canvas_
.style
.position
= "absolute";
747 this.canvas_
.width
= this.width_
;
748 this.canvas_
.height
= this.height_
;
749 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
750 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
752 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
754 // ... and for static parts of the chart.
755 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
756 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
758 // The interactive parts of the graph are drawn on top of the chart.
759 this.graphDiv
.appendChild(this.hidden_
);
760 this.graphDiv
.appendChild(this.canvas_
);
761 this.mouseEventElement_
= this.canvas_
;
764 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
765 dygraph
.mouseMove_(e
);
767 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
768 dygraph
.mouseOut_(e
);
771 // Create the grapher
772 this.layout_
= new DygraphLayout(this);
774 this.createStatusMessage_();
775 this.createDragInterface_();
779 * Detach DOM elements in the dygraph and null out all data references.
780 * Calling this when you're done with a dygraph can dramatically reduce memory
781 * usage. See, e.g., the tests/perf.html example.
783 Dygraph
.prototype.destroy
= function() {
784 var removeRecursive
= function(node
) {
785 while (node
.hasChildNodes()) {
786 removeRecursive(node
.firstChild
);
787 node
.removeChild(node
.firstChild
);
790 removeRecursive(this.maindiv_
);
792 var nullOut
= function(obj
) {
794 if (typeof(obj
[n
]) === 'object') {
800 // These may not all be necessary, but it can't hurt...
801 nullOut(this.layout_
);
802 nullOut(this.plotter_
);
807 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
808 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
809 * or the zoom rectangles) is done on this.canvas_.
810 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
811 * @return {Object} The newly-created canvas
814 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
815 var h
= Dygraph
.createCanvas();
816 h
.style
.position
= "absolute";
817 // TODO(danvk): h should be offset from canvas. canvas needs to include
818 // some extra area to make it easier to zoom in on the far left and far
819 // right. h needs to be precisely the plot area, so that clipping occurs.
820 h
.style
.top
= canvas
.style
.top
;
821 h
.style
.left
= canvas
.style
.left
;
822 h
.width
= this.width_
;
823 h
.height
= this.height_
;
824 h
.style
.width
= this.width_
+ "px"; // for IE
825 h
.style
.height
= this.height_
+ "px"; // for IE
830 * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This
831 * is used to generate default series colors which are evenly spaced on the
833 * @param { Number } hue Range is 0.0-1.0.
834 * @param { Number } saturation Range is 0.0-1.0.
835 * @param { Number } value Range is 0.0-1.0.
836 * @return { String } "rgb(r,g,b)" where r, g and b range from 0-255.
839 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
843 if (saturation
=== 0) {
848 var i
= Math
.floor(hue
* 6);
849 var f
= (hue
* 6) - i
;
850 var p
= value
* (1 - saturation
);
851 var q
= value
* (1 - (saturation
* f
));
852 var t
= value
* (1 - (saturation
* (1 - f
)));
854 case 1: red
= q
; green
= value
; blue
= p
; break;
855 case 2: red
= p
; green
= value
; blue
= t
; break;
856 case 3: red
= p
; green
= q
; blue
= value
; break;
857 case 4: red
= t
; green
= p
; blue
= value
; break;
858 case 5: red
= value
; green
= p
; blue
= q
; break;
859 case 6: // fall through
860 case 0: red
= value
; green
= t
; blue
= p
; break;
863 red
= Math
.floor(255 * red
+ 0.5);
864 green
= Math
.floor(255 * green
+ 0.5);
865 blue
= Math
.floor(255 * blue
+ 0.5);
866 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
871 * Generate a set of distinct colors for the data series. This is done with a
872 * color wheel. Saturation/Value are customizable, and the hue is
873 * equally-spaced around the color wheel. If a custom set of colors is
874 * specified, that is used instead.
877 Dygraph
.prototype.setColors_
= function() {
878 var num
= this.attr_("labels").length
- 1;
880 var colors
= this.attr_('colors');
882 var sat
= this.attr_('colorSaturation') || 1.0;
883 var val
= this.attr_('colorValue') || 0.5;
884 var half
= Math
.ceil(num
/ 2);
885 for (var i
= 1; i
<= num
; i
++) {
886 if (!this.visibility()[i
-1]) continue;
887 // alternate colors for high contrast.
888 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
889 var hue
= (1.0 * idx
/ (1 + num
));
890 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
893 for (var i
= 0; i
< num
; i
++) {
894 if (!this.visibility()[i
]) continue;
895 var colorStr
= colors
[i
% colors
.length
];
896 this.colors_
.push(colorStr
);
900 this.plotter_
.setColors(this.colors_
);
904 * Return the list of colors. This is either the list of colors passed in the
905 * attributes or the autogenerated list of rgb(r,g,b) strings.
906 * @return {Array<string>} The list of colors.
908 Dygraph
.prototype.getColors
= function() {
912 // The following functions are from quirksmode.org with a modification for Safari from
913 // http://blog.firetree.net/2005/07/04/javascript-find-position/
914 // http://www.quirksmode.org/js
/findpos
.html
917 Dygraph
.findPosX
= function(obj
) {
922 curleft
+= obj
.offsetLeft
;
923 if(!obj
.offsetParent
)
925 obj
= obj
.offsetParent
;
934 Dygraph
.findPosY
= function(obj
) {
939 curtop
+= obj
.offsetTop
;
940 if(!obj
.offsetParent
)
942 obj
= obj
.offsetParent
;
951 * Create the div that contains information on the selected point(s)
952 * This goes in the top right of the canvas, unless an external div has already
956 Dygraph
.prototype.createStatusMessage_
= function() {
957 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
958 if (userLabelsDiv
&& null != userLabelsDiv
959 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
960 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
962 if (!this.attr_("labelsDiv")) {
963 var divWidth
= this.attr_('labelsDivWidth');
965 "position": "absolute",
968 "width": divWidth
+ "px",
970 "left": (this.width_
- divWidth
- 2) + "px",
971 "background": "white",
973 "overflow": "hidden"};
974 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
975 var div
= document
.createElement("div");
976 for (var name
in messagestyle
) {
977 if (messagestyle
.hasOwnProperty(name
)) {
978 div
.style
[name
] = messagestyle
[name
];
981 this.graphDiv
.appendChild(div
);
982 this.attrs_
.labelsDiv
= div
;
987 * Position the labels div so that:
988 * - its right edge is flush with the right edge of the charting area
989 * - its top edge is flush with the top edge of the charting area
992 Dygraph
.prototype.positionLabelsDiv_
= function() {
993 // Don't touch a user-specified labelsDiv.
994 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
996 var area
= this.plotter_
.area
;
997 var div
= this.attr_("labelsDiv");
998 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
999 div
.style
.top
= area
.y
+ "px";
1003 * Create the text box to adjust the averaging period
1006 Dygraph
.prototype.createRollInterface_
= function() {
1007 // Create a roller if one doesn't exist already.
1008 if (!this.roller_
) {
1009 this.roller_
= document
.createElement("input");
1010 this.roller_
.type
= "text";
1011 this.roller_
.style
.display
= "none";
1012 this.graphDiv
.appendChild(this.roller_
);
1015 var display
= this.attr_('showRoller') ? 'block' : 'none';
1017 var area
= this.plotter_
.area
;
1018 var textAttr
= { "position": "absolute",
1020 "top": (area
.y
+ area
.h
- 25) + "px",
1021 "left": (area
.x
+ 1) + "px",
1024 this.roller_
.size
= "2";
1025 this.roller_
.value
= this.rollPeriod_
;
1026 for (var name
in textAttr
) {
1027 if (textAttr
.hasOwnProperty(name
)) {
1028 this.roller_
.style
[name
] = textAttr
[name
];
1033 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1038 * Returns the x-coordinate of the event in a coordinate system where the
1039 * top-left corner of the page (not the window) is (0,0).
1040 * Taken from MochiKit.Signal
1042 Dygraph
.pageX
= function(e
) {
1044 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1047 var b
= document
.body
;
1049 (de
.scrollLeft
|| b
.scrollLeft
) -
1050 (de
.clientLeft
|| 0);
1056 * Returns the y-coordinate of the event in a coordinate system where the
1057 * top-left corner of the page (not the window) is (0,0).
1058 * Taken from MochiKit.Signal
1060 Dygraph
.pageY
= function(e
) {
1062 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1065 var b
= document
.body
;
1067 (de
.scrollTop
|| b
.scrollTop
) -
1068 (de
.clientTop
|| 0);
1074 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1075 * canvas (i.e. DOM Coords).
1077 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1078 return Dygraph
.pageX(e
) - context
.px
1083 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1084 * canvas (i.e. DOM Coords).
1086 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1087 return Dygraph
.pageY(e
) - context
.py
1091 * A collection of functions to facilitate build custom interaction models.
1094 Dygraph
.Interaction
= {};
1097 * Called in response to an interaction model operation that
1098 * should start the default panning behavior.
1100 * It's used in the default callback for "mousedown" operations.
1101 * Custom interaction model builders can use it to provide the default
1104 * @param { Event } event the event object which led to the startPan call.
1105 * @param { Dygraph} g The dygraph on which to act.
1106 * @param { Object} context The dragging context object (with
1107 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1109 Dygraph
.Interaction
.startPan
= function(event
, g
, context
) {
1110 context
.isPanning
= true;
1111 var xRange
= g
.xAxisRange();
1112 context
.dateRange
= xRange
[1] - xRange
[0];
1113 context
.initialLeftmostDate
= xRange
[0];
1114 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1116 if (g
.attr_("panEdgeFraction")) {
1117 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1118 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1120 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1121 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1123 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1124 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1125 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1127 var boundedValues
= [];
1128 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1130 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1131 var axis
= g
.axes_
[i
];
1132 var yExtremes
= axis
.extremeRange
;
1134 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1135 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1137 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1138 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1140 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1142 context
.boundedValues
= boundedValues
;
1145 // Record the range of each y-axis at the start of the drag.
1146 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1147 context
.is2DPan
= false;
1148 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1149 var axis
= g
.axes_
[i
];
1150 var yRange
= g
.yAxisRange(i
);
1151 // TODO(konigsberg): These values should be in |context|.
1152 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1153 if (axis
.logscale
) {
1154 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1155 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1157 axis
.initialTopValue
= yRange
[1];
1158 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1160 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1162 // While calculating axes, set 2dpan.
1163 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1168 * Called in response to an interaction model operation that
1169 * responds to an event that pans the view.
1171 * It's used in the default callback for "mousemove" operations.
1172 * Custom interaction model builders can use it to provide the default
1175 * @param { Event } event the event object which led to the movePan call.
1176 * @param { Dygraph} g The dygraph on which to act.
1177 * @param { Object} context The dragging context object (with
1178 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1180 Dygraph
.Interaction
.movePan
= function(event
, g
, context
) {
1181 context
.dragEndX
= g
.dragGetX_(event
, context
);
1182 context
.dragEndY
= g
.dragGetY_(event
, context
);
1184 var minDate
= context
.initialLeftmostDate
-
1185 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1186 if (context
.boundedDates
) {
1187 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1189 var maxDate
= minDate
+ context
.dateRange
;
1190 if (context
.boundedDates
) {
1191 if (maxDate
> context
.boundedDates
[1]) {
1192 // Adjust minDate, and recompute maxDate.
1193 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1194 maxDate
= minDate
+ context
.dateRange
;
1198 g
.dateWindow_
= [minDate
, maxDate
];
1200 // y-axis scaling is automatic unless this is a full 2D pan.
1201 if (context
.is2DPan
) {
1202 // Adjust each axis appropriately.
1203 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1204 var axis
= g
.axes_
[i
];
1206 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1207 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1209 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1211 // In log scale, maxValue and minValue are the logs of those values.
1212 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1214 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1216 var minValue
= maxValue
- axis
.dragValueRange
;
1218 if (minValue
< boundedValue
[0]) {
1219 // Adjust maxValue, and recompute minValue.
1220 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1221 minValue
= maxValue
- axis
.dragValueRange
;
1224 if (axis
.logscale
) {
1225 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1226 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1228 axis
.valueWindow
= [ minValue
, maxValue
];
1237 * Called in response to an interaction model operation that
1238 * responds to an event that ends panning.
1240 * It's used in the default callback for "mouseup" operations.
1241 * Custom interaction model builders can use it to provide the default
1244 * @param { Event } event the event object which led to the startZoom call.
1245 * @param { Dygraph} g The dygraph on which to act.
1246 * @param { Object} context The dragging context object (with
1247 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1249 Dygraph
.Interaction
.endPan
= function(event
, g
, context
) {
1250 // TODO(konigsberg): Clear the context data from the axis.
1251 // TODO(konigsberg): mouseup should just delete the
1252 // context object, and mousedown should create a new one.
1253 context
.isPanning
= false;
1254 context
.is2DPan
= false;
1255 context
.initialLeftmostDate
= null;
1256 context
.dateRange
= null;
1257 context
.valueRange
= null;
1258 context
.boundedDates
= null;
1259 context
.boundedValues
= null;
1263 * Called in response to an interaction model operation that
1264 * responds to an event that starts zooming.
1266 * It's used in the default callback for "mousedown" operations.
1267 * Custom interaction model builders can use it to provide the default
1270 * @param { Event } event the event object which led to the startZoom call.
1271 * @param { Dygraph} g The dygraph on which to act.
1272 * @param { Object} context The dragging context object (with
1273 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1275 Dygraph
.Interaction
.startZoom
= function(event
, g
, context
) {
1276 context
.isZooming
= true;
1280 * Called in response to an interaction model operation that
1281 * responds to an event that defines zoom boundaries.
1283 * It's used in the default callback for "mousemove" operations.
1284 * Custom interaction model builders can use it to provide the default
1287 * @param { Event } event the event object which led to the moveZoom call.
1288 * @param { Dygraph} g The dygraph on which to act.
1289 * @param { Object} context The dragging context object (with
1290 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1292 Dygraph
.Interaction
.moveZoom
= function(event
, g
, context
) {
1293 context
.dragEndX
= g
.dragGetX_(event
, context
);
1294 context
.dragEndY
= g
.dragGetY_(event
, context
);
1296 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1297 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1299 // drag direction threshold for y axis is twice as large as x axis
1300 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1303 context
.dragDirection
,
1308 context
.prevDragDirection
,
1312 context
.prevEndX
= context
.dragEndX
;
1313 context
.prevEndY
= context
.dragEndY
;
1314 context
.prevDragDirection
= context
.dragDirection
;
1318 * Called in response to an interaction model operation that
1319 * responds to an event that performs a zoom based on previously defined
1322 * It's used in the default callback for "mouseup" operations.
1323 * Custom interaction model builders can use it to provide the default
1326 * @param { Event } event the event object which led to the endZoom call.
1327 * @param { Dygraph} g The dygraph on which to end the zoom.
1328 * @param { Object} context The dragging context object (with
1329 * dragStartX/dragStartY/etc. properties). This function modifies the context.
1331 Dygraph
.Interaction
.endZoom
= function(event
, g
, context
) {
1332 // TODO(konigsberg): Refactor or rename this fn -- it deals with clicks, too.
1333 context
.isZooming
= false;
1334 context
.dragEndX
= g
.dragGetX_(event
, context
);
1335 context
.dragEndY
= g
.dragGetY_(event
, context
);
1336 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1337 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1339 if (regionWidth
< 2 && regionHeight
< 2 &&
1340 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1341 // TODO(danvk): pass along more info about the points, e.g. 'x'
1342 if (g
.attr_('clickCallback') != null) {
1343 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1345 if (g
.attr_('pointClickCallback')) {
1346 // check if the click was on a particular point.
1347 var closestIdx
= -1;
1348 var closestDistance
= 0;
1349 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1350 var p
= g
.selPoints_
[i
];
1351 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1352 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1353 if (closestIdx
== -1 || distance
< closestDistance
) {
1354 closestDistance
= distance
;
1359 // Allow any click within two pixels of the dot.
1360 var radius
= g
.attr_('highlightCircleSize') + 2;
1361 if (closestDistance
<= 5 * 5) {
1362 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1367 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1368 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1369 Math
.max(context
.dragStartX
, context
.dragEndX
));
1370 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1371 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1372 Math
.max(context
.dragStartY
, context
.dragEndY
));
1374 g
.canvas_ctx_
.clearRect(0, 0, g
.canvas_
.width
, g
.canvas_
.height
);
1376 context
.dragStartX
= null;
1377 context
.dragStartY
= null;
1381 * Default interation model for dygraphs. You can refer to specific elements of
1382 * this when constructing your own interaction model, e.g.:
1383 * g.updateOptions( {
1384 * interactionModel: {
1385 * mousedown: Dygraph.defaultInteractionModel.mousedown
1389 Dygraph
.Interaction
.defaultModel
= {
1390 // Track the beginning of drag events
1391 mousedown
: function(event
, g
, context
) {
1392 context
.initializeMouseDown(event
, g
, context
);
1394 if (event
.altKey
|| event
.shiftKey
) {
1395 Dygraph
.startPan(event
, g
, context
);
1397 Dygraph
.startZoom(event
, g
, context
);
1401 // Draw zoom rectangles when the mouse is down and the user moves around
1402 mousemove
: function(event
, g
, context
) {
1403 if (context
.isZooming
) {
1404 Dygraph
.moveZoom(event
, g
, context
);
1405 } else if (context
.isPanning
) {
1406 Dygraph
.movePan(event
, g
, context
);
1410 mouseup
: function(event
, g
, context
) {
1411 if (context
.isZooming
) {
1412 Dygraph
.endZoom(event
, g
, context
);
1413 } else if (context
.isPanning
) {
1414 Dygraph
.endPan(event
, g
, context
);
1418 // Temporarily cancel the dragging event when the mouse leaves the graph
1419 mouseout
: function(event
, g
, context
) {
1420 if (context
.isZooming
) {
1421 context
.dragEndX
= null;
1422 context
.dragEndY
= null;
1426 // Disable zooming out if panning.
1427 dblclick
: function(event
, g
, context
) {
1428 if (event
.altKey
|| event
.shiftKey
) {
1431 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1432 // friendlier to public use.
1437 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.Interaction
.defaultModel
;
1439 // old ways of accessing these methods/properties
1440 Dygraph
.defaultInteractionModel
= Dygraph
.Interaction
.defaultModel
;
1441 Dygraph
.endZoom
= Dygraph
.Interaction
.endZoom
;
1442 Dygraph
.moveZoom
= Dygraph
.Interaction
.moveZoom
;
1443 Dygraph
.startZoom
= Dygraph
.Interaction
.startZoom
;
1444 Dygraph
.endPan
= Dygraph
.Interaction
.endPan
;
1445 Dygraph
.movePan
= Dygraph
.Interaction
.movePan
;
1446 Dygraph
.startPan
= Dygraph
.Interaction
.startPan
;
1449 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1453 Dygraph
.prototype.createDragInterface_
= function() {
1455 // Tracks whether the mouse is down right now
1457 isPanning
: false, // is this drag part of a pan?
1458 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1463 dragDirection
: null,
1466 prevDragDirection
: null,
1468 // The value on the left side of the graph when a pan operation starts.
1469 initialLeftmostDate
: null,
1471 // The number of units each pixel spans. (This won't be valid for log
1473 xUnitsPerPixel
: null,
1475 // TODO(danvk): update this comment
1476 // The range in second/value units that the viewport encompasses during a
1477 // panning operation.
1480 // Utility function to convert page-wide coordinates to canvas coords
1484 // Values for use with panEdgeFraction, which limit how far outside the
1485 // graph's data boundaries it can be panned.
1486 boundedDates
: null, // [minDate, maxDate]
1487 boundedValues
: null, // [[minValue, maxValue] ...]
1489 initializeMouseDown
: function(event
, g
, context
) {
1490 // prevents mouse drags from selecting page text.
1491 if (event
.preventDefault
) {
1492 event
.preventDefault(); // Firefox, Chrome, etc.
1494 event
.returnValue
= false; // IE
1495 event
.cancelBubble
= true;
1498 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1499 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1500 context
.dragStartX
= g
.dragGetX_(event
, context
);
1501 context
.dragStartY
= g
.dragGetY_(event
, context
);
1505 var interactionModel
= this.attr_("interactionModel");
1507 // Self is the graph.
1510 // Function that binds the graph and context to the handler.
1511 var bindHandler
= function(handler
) {
1512 return function(event
) {
1513 handler(event
, self
, context
);
1517 for (var eventName
in interactionModel
) {
1518 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1519 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1520 bindHandler(interactionModel
[eventName
]));
1523 // If the user releases the mouse button during a drag, but not over the
1524 // canvas, then it doesn't count as a zooming action.
1525 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1526 if (context
.isZooming
|| context
.isPanning
) {
1527 context
.isZooming
= false;
1528 context
.dragStartX
= null;
1529 context
.dragStartY
= null;
1532 if (context
.isPanning
) {
1533 context
.isPanning
= false;
1534 context
.draggingDate
= null;
1535 context
.dateRange
= null;
1536 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1537 delete self
.axes_
[i
].draggingValue
;
1538 delete self
.axes_
[i
].dragValueRange
;
1546 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1547 * up any previous zoom rectangles that were drawn. This could be optimized to
1548 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1551 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1552 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1553 * @param {Number} startX The X position where the drag started, in canvas
1555 * @param {Number} endX The current X position of the drag, in canvas coords.
1556 * @param {Number} startY The Y position where the drag started, in canvas
1558 * @param {Number} endY The current Y position of the drag, in canvas coords.
1559 * @param {Number} prevDirection the value of direction on the previous call to
1560 * this function. Used to avoid excess redrawing
1561 * @param {Number} prevEndX The value of endX on the previous call to this
1562 * function. Used to avoid excess redrawing
1563 * @param {Number} prevEndY The value of endY on the previous call to this
1564 * function. Used to avoid excess redrawing
1567 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1568 endY
, prevDirection
, prevEndX
,
1570 var ctx
= this.canvas_ctx_
;
1572 // Clean up from the previous rect if necessary
1573 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1574 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1575 Math
.abs(startX
- prevEndX
), this.height_
);
1576 } else if (prevDirection
== Dygraph
.VERTICAL
){
1577 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1578 this.width_
, Math
.abs(startY
- prevEndY
));
1581 // Draw a light-grey rectangle to show the new viewing area
1582 if (direction
== Dygraph
.HORIZONTAL
) {
1583 if (endX
&& startX
) {
1584 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1585 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1586 Math
.abs(endX
- startX
), this.height_
);
1589 if (direction
== Dygraph
.VERTICAL
) {
1590 if (endY
&& startY
) {
1591 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1592 ctx
.fillRect(0, Math
.min(startY
, endY
),
1593 this.width_
, Math
.abs(endY
- startY
));
1599 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1600 * the canvas. The exact zoom window may be slightly larger if there are no data
1601 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1602 * which accepts dates that match the raw data. This function redraws the graph.
1604 * @param {Number} lowX The leftmost pixel value that should be visible.
1605 * @param {Number} highX The rightmost pixel value that should be visible.
1608 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1609 // Find the earliest and latest dates contained in this canvasx range.
1610 // Convert the call to date ranges of the raw data.
1611 var minDate
= this.toDataXCoord(lowX
);
1612 var maxDate
= this.toDataXCoord(highX
);
1613 this.doZoomXDates_(minDate
, maxDate
);
1617 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1618 * method with doZoomX which accepts pixel coordinates. This function redraws
1621 * @param {Number} minDate The minimum date that should be visible.
1622 * @param {Number} maxDate The maximum date that should be visible.
1625 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1626 this.dateWindow_
= [minDate
, maxDate
];
1627 this.zoomed_x_
= true;
1629 if (this.attr_("zoomCallback")) {
1630 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1635 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1636 * the canvas. This function redraws the graph.
1638 * @param {Number} lowY The topmost pixel value that should be visible.
1639 * @param {Number} highY The lowest pixel value that should be visible.
1642 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1643 // Find the highest and lowest values in pixel range for each axis.
1644 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1645 // This is because pixels increase as you go down on the screen, whereas data
1646 // coordinates increase as you go up the screen.
1647 var valueRanges
= [];
1648 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1649 var hi
= this.toDataYCoord(lowY
, i
);
1650 var low
= this.toDataYCoord(highY
, i
);
1651 this.axes_
[i
].valueWindow
= [low
, hi
];
1652 valueRanges
.push([low
, hi
]);
1655 this.zoomed_y_
= true;
1657 if (this.attr_("zoomCallback")) {
1658 var xRange
= this.xAxisRange();
1659 var yRange
= this.yAxisRange();
1660 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1665 * Reset the zoom to the original view coordinates. This is the same as
1666 * double-clicking on the graph.
1670 Dygraph
.prototype.doUnzoom_
= function() {
1672 if (this.dateWindow_
!= null) {
1674 this.dateWindow_
= null;
1677 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1678 if (this.axes_
[i
].valueWindow
!= null) {
1680 delete this.axes_
[i
].valueWindow
;
1684 // Clear any selection, since it's likely to be drawn in the wrong place.
1685 this.clearSelection();
1688 // Putting the drawing operation before the callback because it resets
1690 this.zoomed_x_
= false;
1691 this.zoomed_y_
= false;
1693 if (this.attr_("zoomCallback")) {
1694 var minDate
= this.rawData_
[0][0];
1695 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1696 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1702 * When the mouse moves in the canvas, display information about a nearby data
1703 * point and draw dots over those points in the data series. This function
1704 * takes care of cleanup of previously-drawn dots.
1705 * @param {Object} event The mousemove event from the browser.
1708 Dygraph
.prototype.mouseMove_
= function(event
) {
1709 // This prevents JS errors when mousing over the canvas before data loads.
1710 var points
= this.layout_
.points
;
1711 if (points
=== undefined
) return;
1713 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1718 // Loop through all the points and find the date nearest to our current
1720 var minDist
= 1e+100;
1722 for (var i
= 0; i
< points
.length
; i
++) {
1723 var point
= points
[i
];
1724 if (point
== null) continue;
1725 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1726 if (dist
> minDist
) continue;
1730 if (idx
>= 0) lastx
= points
[idx
].xval
;
1732 // Extract the points we've selected
1733 this.selPoints_
= [];
1734 var l
= points
.length
;
1735 if (!this.attr_("stackedGraph")) {
1736 for (var i
= 0; i
< l
; i
++) {
1737 if (points
[i
].xval
== lastx
) {
1738 this.selPoints_
.push(points
[i
]);
1742 // Need to 'unstack' points starting from the bottom
1743 var cumulative_sum
= 0;
1744 for (var i
= l
- 1; i
>= 0; i
--) {
1745 if (points
[i
].xval
== lastx
) {
1746 var p
= {}; // Clone the point since we modify it
1747 for (var k
in points
[i
]) {
1748 p
[k
] = points
[i
][k
];
1750 p
.yval
-= cumulative_sum
;
1751 cumulative_sum
+= p
.yval
;
1752 this.selPoints_
.push(p
);
1755 this.selPoints_
.reverse();
1758 if (this.attr_("highlightCallback")) {
1759 var px
= this.lastx_
;
1760 if (px
!== null && lastx
!= px
) {
1761 // only fire if the selected point has changed.
1762 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1766 // Save last x position for callbacks.
1767 this.lastx_
= lastx
;
1769 this.updateSelection_();
1773 * Transforms layout_.points index into data row number.
1774 * @param int layout_.points index
1775 * @return int row number, or -1 if none could be found.
1778 Dygraph
.prototype.idxToRow_
= function(idx
) {
1779 if (idx
< 0) return -1;
1781 for (var i
in this.layout_
.datasets
) {
1782 if (idx
< this.layout_
.datasets
[i
].length
) {
1783 return this.boundaryIds_
[0][0]+idx
;
1785 idx
-= this.layout_
.datasets
[i
].length
;
1792 * @param { Number } x The number to consider.
1793 * @return { Boolean } Whether the number is zero or NaN.
1795 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1796 Dygraph
.isOK
= function(x
) {
1797 return x
&& !isNaN(x
);
1802 * Generates HTML for the legend which is displayed when hovering over the
1803 * chart. If no selected points are specified, a default legend is returned
1804 * (this may just be the empty string).
1805 * @param { Number } [x] The x-value of the selected points.
1806 * @param { [Object] } [sel_points] List of selected points for the given
1807 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1809 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1810 // If no points are selected, we display a default legend. Traditionally,
1811 // this has been blank. But a better default would be a conventional legend,
1812 // which provides essential information for a non-interactive chart.
1813 if (typeof(x
) === 'undefined') {
1814 if (this.attr_('legend') != 'always') return '';
1816 var sepLines
= this.attr_('labelsSeparateLines');
1817 var labels
= this.attr_('labels');
1819 for (var i
= 1; i
< labels
.length
; i
++) {
1820 if (!this.visibility()[i
- 1]) continue;
1821 var c
= this.plotter_
.colors
[labels
[i
]];
1822 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1823 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1829 var html
= this.attr_('xValueFormatter')(x
) + ":";
1831 var fmtFunc
= this.attr_('yValueFormatter');
1832 var showZeros
= this.attr_("labelsShowZeroValues");
1833 var sepLines
= this.attr_("labelsSeparateLines");
1834 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1835 var pt
= this.selPoints_
[i
];
1836 if (pt
.yval
== 0 && !showZeros
) continue;
1837 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1838 if (sepLines
) html
+= "<br/>";
1840 var c
= this.plotter_
.colors
[pt
.name
];
1841 var yval
= fmtFunc(pt
.yval
, this);
1842 // TODO(danvk): use a template string here and make it an attribute.
1843 html
+= " <b><span style='color: " + c
+ ";'>"
1844 + pt
.name
+ "</span></b>:"
1852 * Displays information about the selected points in the legend. If there is no
1853 * selection, the legend will be cleared.
1854 * @param { Number } [x] The x-value of the selected points.
1855 * @param { [Object] } [sel_points] List of selected points for the given
1856 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1858 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1859 var html
= this.generateLegendHTML_(x
, sel_points
);
1860 var labelsDiv
= this.attr_("labelsDiv");
1861 if (labelsDiv
!== null) {
1862 labelsDiv
.innerHTML
= html
;
1864 if (typeof(this.shown_legend_error_
) == 'undefined') {
1865 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1866 this.shown_legend_error_
= true;
1872 * Draw dots over the selectied points in the data series. This function
1873 * takes care of cleanup of previously-drawn dots.
1876 Dygraph
.prototype.updateSelection_
= function() {
1877 // Clear the previously drawn vertical, if there is one
1878 var ctx
= this.canvas_ctx_
;
1879 if (this.previousVerticalX_
>= 0) {
1880 // Determine the maximum highlight circle size.
1881 var maxCircleSize
= 0;
1882 var labels
= this.attr_('labels');
1883 for (var i
= 1; i
< labels
.length
; i
++) {
1884 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1885 if (r
> maxCircleSize
) maxCircleSize
= r
;
1887 var px
= this.previousVerticalX_
;
1888 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1889 2 * maxCircleSize
+ 2, this.height_
);
1892 if (this.selPoints_
.length
> 0) {
1893 // Set the status message to indicate the selected point(s)
1894 if (this.attr_('showLabelsOnHighlight')) {
1895 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1898 // Draw colored circles over the center of each selected point
1899 var canvasx
= this.selPoints_
[0].canvasx
;
1901 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1902 var pt
= this.selPoints_
[i
];
1903 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1905 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1907 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1908 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1913 this.previousVerticalX_
= canvasx
;
1918 * Manually set the selected points and display information about them in the
1919 * legend. The selection can be cleared using clearSelection() and queried
1920 * using getSelection().
1921 * @param { Integer } row number that should be highlighted (i.e. appear with
1922 * hover dots on the chart). Set to false to clear any selection.
1924 Dygraph
.prototype.setSelection
= function(row
) {
1925 // Extract the points we've selected
1926 this.selPoints_
= [];
1929 if (row
!== false) {
1930 row
= row
-this.boundaryIds_
[0][0];
1933 if (row
!== false && row
>= 0) {
1934 for (var i
in this.layout_
.datasets
) {
1935 if (row
< this.layout_
.datasets
[i
].length
) {
1936 var point
= this.layout_
.points
[pos
+row
];
1938 if (this.attr_("stackedGraph")) {
1939 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1942 this.selPoints_
.push(point
);
1944 pos
+= this.layout_
.datasets
[i
].length
;
1948 if (this.selPoints_
.length
) {
1949 this.lastx_
= this.selPoints_
[0].xval
;
1950 this.updateSelection_();
1952 this.clearSelection();
1958 * The mouse has left the canvas. Clear out whatever artifacts remain
1959 * @param {Object} event the mouseout event from the browser.
1962 Dygraph
.prototype.mouseOut_
= function(event
) {
1963 if (this.attr_("unhighlightCallback")) {
1964 this.attr_("unhighlightCallback")(event
);
1967 if (this.attr_("hideOverlayOnMouseOut")) {
1968 this.clearSelection();
1973 * Clears the current selection (i.e. points that were highlighted by moving
1974 * the mouse over the chart).
1976 Dygraph
.prototype.clearSelection
= function() {
1977 // Get rid of the overlay data
1978 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1979 this.setLegendHTML_();
1980 this.selPoints_
= [];
1985 * Returns the number of the currently selected row. To get data for this row,
1986 * you can use the getValue method.
1987 * @return { Integer } row number, or -1 if nothing is selected
1989 Dygraph
.prototype.getSelection
= function() {
1990 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1994 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1995 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1996 return row
+ this.boundaryIds_
[0][0];
2003 * Number formatting function which mimicks the behavior of %g in printf, i.e.
2004 * either exponential or fixed format (without trailing 0s) is used depending on
2005 * the length of the generated string. The advantage of this format is that
2006 * there is a predictable upper bound on the resulting string length,
2007 * significant figures are not dropped, and normal numbers are not displayed in
2008 * exponential notation.
2010 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
2011 * It creates strings which are too long for absolute values between 10^-4 and
2012 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
2015 * @param {Number} x The number to format
2016 * @param {Number} opt_precision The precision to use, default 2.
2017 * @return {String} A string formatted like %g in printf. The max generated
2018 * string length should be precision + 6 (e.g 1.123e+300).
2020 Dygraph
.floatFormat
= function(x
, opt_precision
) {
2021 // Avoid invalid precision values; [1, 21] is the valid range.
2022 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
2024 // This is deceptively simple. The actual algorithm comes from:
2026 // Max allowed length = p + 4
2027 // where 4 comes from 'e+n' and '.'.
2029 // Length of fixed format = 2 + y + p
2030 // where 2 comes from '0.' and y = # of leading zeroes.
2032 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
2035 // Since the behavior of toPrecision() is identical for larger numbers, we
2036 // don't have to worry about the other bound.
2038 // Finally, the argument for toExponential() is the number of trailing digits,
2039 // so we take off 1 for the value before the '.'.
2040 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
2041 x
.toExponential(p
- 1) : x
.toPrecision(p
);
2046 * Return a string version of a number. This respects the digitsAfterDecimal
2047 * and maxNumberWidth options.
2048 * @param {Number} x The number to be formatted
2049 * @param {Dygraph} g The dygraph object
2051 Dygraph
.numberFormatter
= function(x
, g
) {
2052 var sigFigs
= g
.attr_('sigFigs');
2054 if (sigFigs
!== null) {
2055 // User has opted for a fixed number of significant figures.
2056 return Dygraph
.floatFormat(x
, sigFigs
);
2059 var digits
= g
.attr_('digitsAfterDecimal');
2060 var maxNumberWidth
= g
.attr_('maxNumberWidth');
2062 // switch to scientific notation if we underflow or overflow fixed display.
2064 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
2065 Math
.abs(x
) < Math
.pow(10, -digits
))) {
2066 return x
.toExponential(digits
);
2068 return '' + Dygraph
.round_(x
, digits
);
2074 * Converts '9' to '09' (useful for dates)
2076 Dygraph
.zeropad
= function(x
) {
2077 if (x
< 10) return "0" + x
; else return "" + x
;
2081 * Return a string version of the hours, minutes and seconds portion of a date.
2082 * @param {Number} date The JavaScript date (ms since epoch)
2083 * @return {String} A time of the form "HH:MM:SS"
2086 Dygraph
.hmsString_
= function(date
) {
2087 var zeropad
= Dygraph
.zeropad
;
2088 var d
= new Date(date
);
2089 if (d
.getSeconds()) {
2090 return zeropad(d
.getHours()) + ":" +
2091 zeropad(d
.getMinutes()) + ":" +
2092 zeropad(d
.getSeconds());
2094 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
2099 * Convert a JS date to a string appropriate to display on an axis that
2100 * is displaying values at the stated granularity.
2101 * @param {Date} date The date to format
2102 * @param {Number} granularity One of the Dygraph granularity constants
2103 * @return {String} The formatted date
2106 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
2107 if (granularity
>= Dygraph
.DECADAL
) {
2108 return date
.strftime('%Y');
2109 } else if (granularity
>= Dygraph
.MONTHLY
) {
2110 return date
.strftime('%b %y');
2112 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
2113 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
2114 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
2116 return Dygraph
.hmsString_(date
.getTime());
2122 * Convert a JS date (millis since epoch) to YYYY/MM/DD
2123 * @param {Number} date The JavaScript date (ms since epoch)
2124 * @return {String} A date of the form "YYYY/MM/DD"
2127 Dygraph
.dateString_
= function(date
) {
2128 var zeropad
= Dygraph
.zeropad
;
2129 var d
= new Date(date
);
2132 var year
= "" + d
.getFullYear();
2133 // Get a 0 padded month string
2134 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
2135 // Get a 0 padded day string
2136 var day
= zeropad(d
.getDate());
2139 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
2140 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
2142 return year
+ "/" + month + "/" + day
+ ret
;
2146 * Round a number to the specified number of digits past the decimal point.
2147 * @param {Number} num The number to round
2148 * @param {Number} places The number of decimals to which to round
2149 * @return {Number} The rounded number
2152 Dygraph
.round_
= function(num
, places
) {
2153 var shift
= Math
.pow(10, places
);
2154 return Math
.round(num
* shift
)/shift
;
2158 * Fires when there's data available to be graphed.
2159 * @param {String} data Raw CSV data to be plotted
2162 Dygraph
.prototype.loadedEvent_
= function(data
) {
2163 this.rawData_
= this.parseCSV_(data
);
2167 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
2168 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
2169 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
2172 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2175 Dygraph
.prototype.addXTicks_
= function() {
2176 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
2178 if (this.dateWindow_
) {
2179 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
2181 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
2184 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
2185 this.layout_
.setXTicks(xTicks
);
2188 // Time granularity enumeration
2189 Dygraph
.SECONDLY
= 0;
2190 Dygraph
.TWO_SECONDLY
= 1;
2191 Dygraph
.FIVE_SECONDLY
= 2;
2192 Dygraph
.TEN_SECONDLY
= 3;
2193 Dygraph
.THIRTY_SECONDLY
= 4;
2194 Dygraph
.MINUTELY
= 5;
2195 Dygraph
.TWO_MINUTELY
= 6;
2196 Dygraph
.FIVE_MINUTELY
= 7;
2197 Dygraph
.TEN_MINUTELY
= 8;
2198 Dygraph
.THIRTY_MINUTELY
= 9;
2199 Dygraph
.HOURLY
= 10;
2200 Dygraph
.TWO_HOURLY
= 11;
2201 Dygraph
.SIX_HOURLY
= 12;
2203 Dygraph
.WEEKLY
= 14;
2204 Dygraph
.MONTHLY
= 15;
2205 Dygraph
.QUARTERLY
= 16;
2206 Dygraph
.BIANNUAL
= 17;
2207 Dygraph
.ANNUAL
= 18;
2208 Dygraph
.DECADAL
= 19;
2209 Dygraph
.CENTENNIAL
= 20;
2210 Dygraph
.NUM_GRANULARITIES
= 21;
2212 Dygraph
.SHORT_SPACINGS
= [];
2213 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
2214 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
2215 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
2216 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
2217 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
2218 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
2219 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
2220 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
2221 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
2222 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
2223 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
2224 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
2225 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
2226 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
2227 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
2231 * If we used this time granularity, how many ticks would there be?
2232 * This is only an approximation, but it's generally good enough.
2234 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2235 if (granularity
< Dygraph
.MONTHLY
) {
2236 // Generate one tick mark for every fixed interval of time.
2237 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2238 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2240 var year_mod
= 1; // e.g. to only print one point every 10 years.
2241 var num_months
= 12;
2242 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2243 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2244 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2245 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2246 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2248 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2249 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2250 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2257 * Construct an x-axis of nicely-formatted times on meaningful boundaries
2258 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2260 * Returns an array containing {v: millis, label: label} dictionaries.
2262 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2263 var formatter
= this.attr_("xAxisLabelFormatter");
2265 if (granularity
< Dygraph
.MONTHLY
) {
2266 // Generate one tick mark for every fixed interval of time.
2267 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2268 var format
= '%d%b'; // e.g. "1Jan"
2270 // Find a time less than start_time which occurs on a "nice" time boundary
2271 // for this granularity.
2272 var g
= spacing
/ 1000;
2273 var d
= new Date(start_time
);
2274 if (g
<= 60) { // seconds
2275 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2279 if (g
<= 60) { // minutes
2280 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2285 if (g
<= 24) { // days
2286 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2291 if (g
== 7) { // one week
2292 d
.setDate(d
.getDate() - d
.getDay());
2297 start_time
= d
.getTime();
2299 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2300 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2303 // Display a tick mark on the first of a set of months of each year.
2304 // Years get a tick mark iff y % year_mod == 0. This is useful for
2305 // displaying a tick mark once every 10 years, say, on long time scales.
2307 var year_mod
= 1; // e.g. to only print one point every 10 years.
2309 if (granularity
== Dygraph
.MONTHLY
) {
2310 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2311 } else if (granularity
== Dygraph
.QUARTERLY
) {
2312 months
= [ 0, 3, 6, 9 ];
2313 } else if (granularity
== Dygraph
.BIANNUAL
) {
2315 } else if (granularity
== Dygraph
.ANNUAL
) {
2317 } else if (granularity
== Dygraph
.DECADAL
) {
2320 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2324 this.warn("Span of dates is too long");
2327 var start_year
= new Date(start_time
).getFullYear();
2328 var end_year
= new Date(end_time
).getFullYear();
2329 var zeropad
= Dygraph
.zeropad
;
2330 for (var i
= start_year
; i
<= end_year
; i
++) {
2331 if (i
% year_mod
!= 0) continue;
2332 for (var j
= 0; j
< months
.length
; j
++) {
2333 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2334 var t
= Dygraph
.dateStrToMillis(date_str
);
2335 if (t
< start_time
|| t
> end_time
) continue;
2336 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2346 * Add ticks to the x-axis based on a date range.
2347 * @param {Number} startDate Start of the date window (millis since epoch)
2348 * @param {Number} endDate End of the date window (millis since epoch)
2349 * @param {Dygraph} self The dygraph object
2350 * @return { [Object] } Array of {label, value} tuples.
2353 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2354 // TODO(danvk): why does this take 'self' as a param?
2356 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2357 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2358 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2365 return self
.GetXAxis(startDate
, endDate
, chosen
);
2367 // TODO(danvk): signal error.
2373 * This is a list of human-friendly values at which to show tick marks on a log
2374 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2375 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2376 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2378 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2380 for (var power
= -39; power
<= 39; power
++) {
2381 var range
= Math
.pow(10, power
);
2382 for (var mult
= 1; mult
<= 9; mult
++) {
2383 var val
= range
* mult
;
2392 * Implementation of binary search over an array.
2393 * Currently does not work when val is outside the range of arry's values.
2394 * @param { Integer } val the value to search for
2395 * @param { Integer[] } arry is the value over which to search
2396 * @param { Integer } abs If abs > 0, find the lowest entry greater than val
2397 * If abs < 0, find the highest entry less than val.
2398 * if abs == 0, find the entry that equals val.
2399 * @param { Integer } [low] The first index in arry to consider (optional)
2400 * @param { Integer } [high] The last index in arry to consider (optional)
2402 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2403 if (low
== null || high
== null) {
2405 high
= arry
.length
- 1;
2413 var validIndex
= function(idx
) {
2414 return idx
>= 0 && idx
< arry
.length
;
2416 var mid
= parseInt((low
+ high
) / 2);
2417 var element
= arry
[mid
];
2418 if (element
== val
) {
2421 if (element
> val
) {
2423 // Accept if element > val, but also if prior element < val.
2425 if (validIndex(idx
) && arry
[idx
] < val
) {
2429 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2431 if (element
< val
) {
2433 // Accept if element < val, but also if prior element > val.
2435 if (validIndex(idx
) && arry
[idx
] > val
) {
2439 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2443 // TODO(konigsberg): Update comment.
2445 * Add ticks when the x axis has numbers on it (instead of dates)
2447 * @param {Number} minV minimum value
2448 * @param {Number} maxV maximum value
2450 * @param {function} attribute accessor function.
2451 * @return {[Object]} Array of {label, value} tuples.
2453 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2454 var attr
= function(k
) {
2455 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2456 return self
.attr_(k
);
2461 for (var i
= 0; i
< vals
.length
; i
++) {
2462 ticks
.push({v
: vals
[i
]});
2465 if (axis_props
&& attr("logscale")) {
2466 var pixelsPerTick
= attr('pixelsPerYLabel');
2467 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2468 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2469 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2470 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2475 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2477 // Count the number of tick values would appear, if we can get at least
2478 // nTicks / 4 accept them
.
2479 var lastDisplayed
= null;
2480 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2481 var axisId
= axis_props
.yAxisId
;
2482 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2483 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2484 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2485 var tick
= { v
: tickValue
};
2486 if (lastDisplayed
== null) {
2488 tickValue
: tickValue
,
2492 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2494 tickValue
: tickValue
,
2503 // Since we went in backwards order.
2508 // ticks.length won't be 0 if the log scale function finds values to insert.
2509 if (ticks
.length
== 0) {
2511 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2512 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2513 // The first spacing greater than pixelsPerYLabel is what we use.
2514 // TODO(danvk): version that works on a log scale.
2515 if (attr("labelsKMG2")) {
2516 var mults
= [1, 2, 4, 8];
2518 var mults
= [1, 2, 5];
2520 var scale
, low_val
, high_val
, nTicks
;
2521 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2522 var pixelsPerTick
= attr('pixelsPerYLabel');
2523 for (var i
= -10; i
< 50; i
++) {
2524 if (attr("labelsKMG2")) {
2525 var base_scale
= Math
.pow(16, i
);
2527 var base_scale
= Math
.pow(10, i
);
2529 for (var j
= 0; j
< mults
.length
; j
++) {
2530 scale
= base_scale
* mults
[j
];
2531 low_val
= Math
.floor(minV
/ scale
) * scale
;
2532 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2533 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2534 var spacing
= self
.height_
/ nTicks
;
2535 // wish I could break out of both loops at once...
2536 if (spacing
> pixelsPerTick
) break;
2538 if (spacing
> pixelsPerTick
) break;
2541 // Construct the set of ticks.
2542 // Allow reverse y-axis if it's explicitly requested.
2543 if (low_val
> high_val
) scale
*= -1;
2544 for (var i
= 0; i
< nTicks
; i
++) {
2545 var tickV
= low_val
+ i
* scale
;
2546 ticks
.push( {v
: tickV
} );
2551 // Add formatted labels to the ticks.
2554 if (attr("labelsKMB")) {
2556 k_labels
= [ "K", "M", "B", "T" ];
2558 if (attr("labelsKMG2")) {
2559 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2561 k_labels
= [ "k", "M", "G", "T" ];
2563 var formatter
= attr('yAxisLabelFormatter') ?
2564 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2566 // Add labels to the ticks.
2567 for (var i
= 0; i
< ticks
.length
; i
++) {
2568 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2569 var tickV
= ticks
[i
].v
;
2570 var absTickV
= Math
.abs(tickV
);
2571 var label
= formatter(tickV
, self
);
2572 if (k_labels
.length
> 0) {
2573 // Round up to an appropriate unit.
2575 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2576 if (absTickV
>= n
) {
2577 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
2582 ticks
[i
].label
= label
;
2590 * Computes the range of the data series (including confidence intervals).
2591 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
2592 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2593 * @return [low, high]
2595 Dygraph
.prototype.extremeValues_
= function(series
) {
2596 var minY
= null, maxY
= null;
2598 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2600 // With custom bars, maxY is the max of the high values.
2601 for (var j
= 0; j
< series
.length
; j
++) {
2602 var y
= series
[j
][1][0];
2604 var low
= y
- series
[j
][1][1];
2605 var high
= y
+ series
[j
][1][2];
2606 if (low
> y
) low
= y
; // this can happen with custom bars,
2607 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2608 if (maxY
== null || high
> maxY
) {
2611 if (minY
== null || low
< minY
) {
2616 for (var j
= 0; j
< series
.length
; j
++) {
2617 var y
= series
[j
][1];
2618 if (y
=== null || isNaN(y
)) continue;
2619 if (maxY
== null || y
> maxY
) {
2622 if (minY
== null || y
< minY
) {
2628 return [minY
, maxY
];
2633 * This function is called once when the chart's data is changed or the options
2634 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2635 * idea is that values derived from the chart's data can be computed here,
2636 * rather than every time the chart is drawn. This includes things like the
2637 * number of axes, rolling averages, etc.
2639 Dygraph
.prototype.predraw_
= function() {
2640 // TODO(danvk): move more computations out of drawGraph_ and into here.
2641 this.computeYAxes_();
2643 // Create a new plotter.
2644 if (this.plotter_
) this.plotter_
.clear();
2645 this.plotter_
= new DygraphCanvasRenderer(this,
2650 // The roller sits in the bottom left corner of the chart. We don't know where
2651 // this will be until the options are available, so it's positioned here.
2652 this.createRollInterface_();
2654 // Same thing applies for the labelsDiv. It's right edge should be flush with
2655 // the right edge of the charting area (which may not be the same as the right
2656 // edge of the div, if we have two y-axes.
2657 this.positionLabelsDiv_();
2659 // If the data or options have changed, then we'd better redraw.
2664 * Update the graph with new data. This method is called when the viewing area
2665 * has changed. If the underlying data or options have changed, predraw_ will
2666 * be called before drawGraph_ is called.
2669 Dygraph
.prototype.drawGraph_
= function() {
2670 var data
= this.rawData_
;
2672 // This is used to set the second parameter to drawCallback, below.
2673 var is_initial_draw
= this.is_initial_draw_
;
2674 this.is_initial_draw_
= false;
2676 var minY
= null, maxY
= null;
2677 this.layout_
.removeAllDatasets();
2679 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2681 // Loop over the fields (series). Go from the last to the first,
2682 // because if they're stacked that's how we accumulate the values.
2684 var cumulative_y
= []; // For stacked series.
2687 var extremes
= {}; // series name -> [low, high]
2689 // Loop over all fields and create datasets
2690 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2691 if (!this.visibility()[i
- 1]) continue;
2693 var seriesName
= this.attr_("labels")[i
];
2694 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2695 var logScale
= this.attr_('logscale', i
);
2698 for (var j
= 0; j
< data
.length
; j
++) {
2699 var date
= data
[j
][0];
2700 var point
= data
[j
][i
];
2702 // On the log scale, points less than zero do not exist.
2703 // This will create a gap in the chart. Note that this ignores
2704 // connectSeparatedPoints.
2708 series
.push([date
, point
]);
2710 if (point
!= null || !connectSeparatedPoints
) {
2711 series
.push([date
, point
]);
2716 // TODO(danvk): move this into predraw_. It's insane to do it here.
2717 series
= this.rollingAverage(series
, this.rollPeriod_
);
2719 // Prune down to the desired range, if necessary (for zooming)
2720 // Because there can be lines going to points outside of the visible area,
2721 // we actually prune to visible points, plus one on either side.
2722 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2723 if (this.dateWindow_
) {
2724 var low
= this.dateWindow_
[0];
2725 var high
= this.dateWindow_
[1];
2727 // TODO(danvk): do binary search instead of linear search.
2728 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2729 var firstIdx
= null, lastIdx
= null;
2730 for (var k
= 0; k
< series
.length
; k
++) {
2731 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2734 if (series
[k
][0] <= high
) {
2738 if (firstIdx
=== null) firstIdx
= 0;
2739 if (firstIdx
> 0) firstIdx
--;
2740 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2741 if (lastIdx
< series
.length
- 1) lastIdx
++;
2742 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2743 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2744 pruned
.push(series
[k
]);
2748 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2751 var seriesExtremes
= this.extremeValues_(series
);
2754 for (var j
=0; j
<series
.length
; j
++) {
2755 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2758 } else if (this.attr_("stackedGraph")) {
2759 var l
= series
.length
;
2761 for (var j
= 0; j
< l
; j
++) {
2762 // If one data set has a NaN, let all subsequent stacked
2763 // sets inherit the NaN -- only start at 0 for the first set.
2764 var x
= series
[j
][0];
2765 if (cumulative_y
[x
] === undefined
) {
2766 cumulative_y
[x
] = 0;
2769 actual_y
= series
[j
][1];
2770 cumulative_y
[x
] += actual_y
;
2772 series
[j
] = [x
, cumulative_y
[x
]]
2774 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2775 seriesExtremes
[1] = cumulative_y
[x
];
2777 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2778 seriesExtremes
[0] = cumulative_y
[x
];
2782 extremes
[seriesName
] = seriesExtremes
;
2784 datasets
[i
] = series
;
2787 for (var i
= 1; i
< datasets
.length
; i
++) {
2788 if (!this.visibility()[i
- 1]) continue;
2789 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2792 this.computeYAxisRanges_(extremes
);
2793 this.layout_
.setYAxes(this.axes_
);
2797 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2798 var tmp_zoomed_x
= this.zoomed_x_
;
2799 // Tell PlotKit to use this new data and render itself
2800 this.layout_
.setDateWindow(this.dateWindow_
);
2801 this.zoomed_x_
= tmp_zoomed_x
;
2802 this.layout_
.evaluateWithError();
2803 this.plotter_
.clear();
2804 this.plotter_
.render();
2805 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2806 this.canvas_
.height
);
2808 if (is_initial_draw
) {
2809 // Generate a static legend before any particular point is selected.
2810 this.setLegendHTML_();
2812 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2813 // We should select the point nearest the page x/y here
, but it
's easier
2814 // to just clear the selection. This prevents erroneous hover dots from
2816 this.clearSelection();
2818 this.clearSelection();
2822 if (this.attr_("drawCallback") !== null) {
2823 this.attr_("drawCallback")(this, is_initial_draw);
2829 * Determine properties of the y-axes which are independent of the data
2830 * currently being displayed. This includes things like the number of axes and
2831 * the style of the axes. It does not include the range of each axis and its
2833 * This fills in this.axes_ and this.seriesToAxisMap_.
2834 * axes_ = [ { options } ]
2835 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2836 * indices are into the axes_ array.
2838 Dygraph.prototype.computeYAxes_ = function() {
2839 this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis.
2840 this.seriesToAxisMap_ = {};
2842 // Get a list of series names.
2843 var labels = this.attr_("labels");
2845 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
2847 // all options which could be applied per-axis:
2855 'axisLabelFontSize
',
2860 // Copy global axis options over to the first axis.
2861 for (var i = 0; i < axisOptions.length; i++) {
2862 var k = axisOptions[i];
2863 var v = this.attr_(k);
2864 if (v) this.axes_[0][k] = v;
2867 // Go through once and add all the axes.
2868 for (var seriesName in series) {
2869 if (!series.hasOwnProperty(seriesName)) continue;
2870 var axis = this.attr_("axis", seriesName);
2872 this.seriesToAxisMap_[seriesName] = 0;
2875 if (typeof(axis) == 'object
') {
2876 // Add a new axis, making a copy of its per-axis options.
2878 Dygraph.update(opts, this.axes_[0]);
2879 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit
this.
2880 var yAxisId
= this.axes_
.length
;
2881 opts
.yAxisId
= yAxisId
;
2883 Dygraph
.update(opts
, axis
);
2884 this.axes_
.push(opts
);
2885 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2889 // Go through one more time and assign series to an axis defined by another
2890 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2891 for (var seriesName
in series
) {
2892 if (!series
.hasOwnProperty(seriesName
)) continue;
2893 var axis
= this.attr_("axis", seriesName
);
2894 if (typeof(axis
) == 'string') {
2895 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2896 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2897 "series " + axis
+ ", which does not define its own axis.");
2900 var idx
= this.seriesToAxisMap_
[axis
];
2901 this.seriesToAxisMap_
[seriesName
] = idx
;
2905 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2906 // this last so that hiding the first series doesn't destroy the axis
2907 // properties of the primary axis.
2908 var seriesToAxisFiltered
= {};
2909 var vis
= this.visibility();
2910 for (var i
= 1; i
< labels
.length
; i
++) {
2912 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2914 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2918 * Returns the number of y-axes on the chart.
2919 * @return {Number} the number of axes.
2921 Dygraph
.prototype.numAxes
= function() {
2923 for (var series
in this.seriesToAxisMap_
) {
2924 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2925 var idx
= this.seriesToAxisMap_
[series
];
2926 if (idx
> last_axis
) last_axis
= idx
;
2928 return 1 + last_axis
;
2933 * Returns axis properties for the given series.
2934 * @param { String } setName The name of the series for which to get axis
2935 * properties, e.g. 'Y1'.
2936 * @return { Object } The axis properties.
2938 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2939 // TODO(danvk): handle errors.
2940 return this.axes_
[this.seriesToAxisMap_
[series
]];
2945 * Determine the value range and tick marks for each axis.
2946 * @param {Object} extremes A mapping from seriesName -> [low, high]
2947 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2949 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2950 // Build a map from axis number -> [list of series names]
2951 var seriesForAxis
= [];
2952 for (var series
in this.seriesToAxisMap_
) {
2953 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2954 var idx
= this.seriesToAxisMap_
[series
];
2955 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2956 seriesForAxis
[idx
].push(series
);
2959 // Compute extreme values, a span and tick marks for each axis.
2960 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2961 var axis
= this.axes_
[i
];
2963 if (!seriesForAxis
[i
]) {
2964 // If no series are defined or visible then use a reasonable default
2965 axis
.extremeRange
= [0, 1];
2967 // Calculate the extremes of extremes.
2968 var series
= seriesForAxis
[i
];
2969 var minY
= Infinity
; // extremes[series[0]][0];
2970 var maxY
= -Infinity
; // extremes[series[0]][1];
2971 var extremeMinY
, extremeMaxY
;
2972 for (var j
= 0; j
< series
.length
; j
++) {
2973 // Only use valid extremes to stop null data series' from corrupting the scale.
2974 extremeMinY
= extremes
[series
[j
]][0];
2975 if (extremeMinY
!= null) {
2976 minY
= Math
.min(extremeMinY
, minY
);
2978 extremeMaxY
= extremes
[series
[j
]][1];
2979 if (extremeMaxY
!= null) {
2980 maxY
= Math
.max(extremeMaxY
, maxY
);
2983 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2985 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2986 if (minY
== Infinity
) minY
= 0;
2987 if (maxY
== -Infinity
) maxY
= 0;
2989 // Add some padding and round up to an integer to be human-friendly.
2990 var span
= maxY
- minY
;
2991 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2992 if (span
== 0) { span
= maxY
; }
2996 if (axis
.logscale
) {
2997 var maxAxisY
= maxY
+ 0.1 * span
;
2998 var minAxisY
= minY
;
3000 var maxAxisY
= maxY
+ 0.1 * span
;
3001 var minAxisY
= minY
- 0.1 * span
;
3003 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
3004 if (!this.attr_("avoidMinZero")) {
3005 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
3006 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
3009 if (this.attr_("includeZero")) {
3010 if (maxY
< 0) maxAxisY
= 0;
3011 if (minY
> 0) minAxisY
= 0;
3014 axis
.extremeRange
= [minAxisY
, maxAxisY
];
3016 if (axis
.valueWindow
) {
3017 // This is only set if the user has zoomed on the y-axis. It is never set
3018 // by a user. It takes precedence over axis.valueRange because, if you set
3019 // valueRange, you'd still expect to be able to pan.
3020 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
3021 } else if (axis
.valueRange
) {
3022 // This is a user-set value range for this axis.
3023 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
3025 axis
.computedValueRange
= axis
.extremeRange
;
3028 // Add ticks. By default, all axes inherit the tick positions of the
3029 // primary axis. However, if an axis is specifically marked as having
3030 // independent ticks, then that is permissible as well.
3031 if (i
== 0 || axis
.independentTicks
) {
3033 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3034 axis
.computedValueRange
[1],
3038 var p_axis
= this.axes_
[0];
3039 var p_ticks
= p_axis
.ticks
;
3040 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
3041 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
3042 var tick_values
= [];
3043 for (var i
= 0; i
< p_ticks
.length
; i
++) {
3044 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
3045 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
3046 tick_values
.push(y_val
);
3050 Dygraph
.numericTicks(axis
.computedValueRange
[0],
3051 axis
.computedValueRange
[1],
3052 this, axis
, tick_values
);
3059 * Calculates the rolling average of a data set.
3060 * If originalData is [label, val], rolls the average of those.
3061 * If originalData is [label, [, it's interpreted as [value, stddev]
3062 * and the roll is returned in the same form, with appropriately reduced
3063 * stddev for each value.
3064 * Note that this is where fractional input (i.e. '5/10') is converted into
3066 * @param {Array} originalData The data in the appropriate format (see above)
3067 * @param {Number} rollPeriod The number of points over which to average the
3070 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
3071 if (originalData
.length
< 2)
3072 return originalData
;
3073 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
3074 var rollingData
= [];
3075 var sigma
= this.attr_("sigma");
3077 if (this.fractions_
) {
3079 var den
= 0; // numerator/denominator
3081 for (var i
= 0; i
< originalData
.length
; i
++) {
3082 num
+= originalData
[i
][1][0];
3083 den
+= originalData
[i
][1][1];
3084 if (i
- rollPeriod
>= 0) {
3085 num
-= originalData
[i
- rollPeriod
][1][0];
3086 den
-= originalData
[i
- rollPeriod
][1][1];
3089 var date
= originalData
[i
][0];
3090 var value
= den
? num
/ den
: 0.0;
3091 if (this.attr_("errorBars")) {
3092 if (this.wilsonInterval_
) {
3093 // For more details on this confidence interval, see:
3094 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
3096 var p
= value
< 0 ? 0 : value
, n
= den
;
3097 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
3098 var denom
= 1 + sigma
* sigma
/ den
;
3099 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
3100 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
3101 rollingData
[i
] = [date
,
3102 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
3104 rollingData
[i
] = [date
, [0, 0, 0]];
3107 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
3108 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
3111 rollingData
[i
] = [date
, mult
* value
];
3114 } else if (this.attr_("customBars")) {
3119 for (var i
= 0; i
< originalData
.length
; i
++) {
3120 var data
= originalData
[i
][1];
3122 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
3124 if (y
!= null && !isNaN(y
)) {
3130 if (i
- rollPeriod
>= 0) {
3131 var prev
= originalData
[i
- rollPeriod
];
3132 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
3139 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
3140 1.0 * (mid
- low
) / count
,
3141 1.0 * (high
- mid
) / count
]];
3144 // Calculate the rolling average for the first rollPeriod - 1 points where
3145 // there is not enough data to roll over the full number of points
3146 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
3147 if (!this.attr_("errorBars")){
3148 if (rollPeriod
== 1) {
3149 return originalData
;
3152 for (var i
= 0; i
< originalData
.length
; i
++) {
3155 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3156 var y
= originalData
[j
][1];
3157 if (y
== null || isNaN(y
)) continue;
3159 sum
+= originalData
[j
][1];
3162 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
3164 rollingData
[i
] = [originalData
[i
][0], null];
3169 for (var i
= 0; i
< originalData
.length
; i
++) {
3173 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
3174 var y
= originalData
[j
][1][0];
3175 if (y
== null || isNaN(y
)) continue;
3177 sum
+= originalData
[j
][1][0];
3178 variance
+= Math
.pow(originalData
[j
][1][1], 2);
3181 var stddev
= Math
.sqrt(variance
) / num_ok
;
3182 rollingData
[i
] = [originalData
[i
][0],
3183 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
3185 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
3196 * Parses a date, returning the number of milliseconds since epoch. This can be
3197 * passed in as an xValueParser in the Dygraph constructor.
3198 * TODO(danvk): enumerate formats that this understands.
3199 * @param {String} A date in YYYYMMDD format.
3200 * @return {Number} Milliseconds since epoch.
3202 Dygraph
.dateParser
= function(dateStr
, self
) {
3205 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3206 dateStrSlashed
= dateStr
.replace("-", "/", "g");
3207 while (dateStrSlashed
.search("-") != -1) {
3208 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
3210 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3211 } else if (dateStr
.length
== 8) { // e.g. '20090712'
3212 // TODO(danvk): remove support for this format. It's confusing.
3213 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
3214 + "/" + dateStr
.substr(6,2);
3215 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3217 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3218 // "2009/07/12 12:34:56"
3219 d
= Dygraph
.dateStrToMillis(dateStr
);
3222 if (!d
|| isNaN(d
)) {
3223 self
.error("Couldn't parse " + dateStr
+ " as a date");
3229 * Detects the type of the str (date or numeric) and sets the various
3230 * formatting attributes in this.attrs_ based on this type.
3231 * @param {String} str An x value.
3234 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3236 if (str
.indexOf('-') > 0 ||
3237 str
.indexOf('/') >= 0 ||
3238 isNaN(parseFloat(str
))) {
3240 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3241 // TODO(danvk): remove support for this format.
3246 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3247 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3248 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3249 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3251 // TODO(danvk): use Dygraph.numberFormatter here?
3252 /** @private (shut up, jsdoc!) */
3253 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3254 /** @private (shut up, jsdoc!) */
3255 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3256 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3257 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3262 * Parses the value as a floating point number. This is like the parseFloat()
3263 * built-in, but with a few differences:
3264 * - the empty string is parsed as null, rather than NaN.
3265 * - if the string cannot be parsed at all, an error is logged.
3266 * If the string can't be parsed, this method returns null.
3267 * @param {String} x The string to be parsed
3268 * @param {Number} opt_line_no The line number from which the string comes.
3269 * @param {String} opt_line The text of the line from which the string comes.
3273 // Parse the x as a float or return null if it's not a number.
3274 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3275 var val
= parseFloat(x
);
3276 if (!isNaN(val
)) return val
;
3278 // Try to figure out what happeend.
3279 // If the value is the empty string, parse it as null.
3280 if (/^ *$/.test(x
)) return null;
3282 // If it was actually "NaN", return it as NaN.
3283 if (/^ *nan *$/i.test(x
)) return NaN
;
3285 // Looks like a parsing error.
3286 var msg
= "Unable to parse '" + x
+ "' as a number";
3287 if (opt_line
!== null && opt_line_no
!== null) {
3288 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3297 * Parses a string in a special csv format. We expect a csv file where each
3298 * line is a date point, and the first field in each line is the date string.
3299 * We also expect that all remaining fields represent series.
3300 * if the errorBars attribute is set, then interpret the fields as:
3301 * date, series1, stddev1, series2, stddev2, ...
3302 * @param {[Object]} data See above.
3304 * @return [Object] An array with one entry for each row. These entries
3305 * are an array of cells in that row. The first entry is the parsed x-value for
3306 * the row. The second, third, etc. are the y-values. These can take on one of
3307 * three forms, depending on the CSV and constructor parameters:
3309 * 2. [ value, stddev ]
3310 * 3. [ low value, center value, high value ]
3312 Dygraph
.prototype.parseCSV_
= function(data
) {
3314 var lines
= data
.split("\n");
3316 // Use the default delimiter or fall back to a tab if that makes sense.
3317 var delim
= this.attr_('delimiter');
3318 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3323 if (this.labelsFromCSV_
) {
3325 this.attrs_
.labels
= lines
[0].split(delim
);
3330 var defaultParserSet
= false; // attempt to auto-detect x value type
3331 var expectedCols
= this.attr_("labels").length
;
3332 var outOfOrder
= false;
3333 for (var i
= start
; i
< lines
.length
; i
++) {
3334 var line
= lines
[i
];
3336 if (line
.length
== 0) continue; // skip blank lines
3337 if (line
[0] == '#') continue; // skip comment lines
3338 var inFields
= line
.split(delim
);
3339 if (inFields
.length
< 2) continue;
3342 if (!defaultParserSet
) {
3343 this.detectTypeFromString_(inFields
[0]);
3344 xParser
= this.attr_("xValueParser");
3345 defaultParserSet
= true;
3347 fields
[0] = xParser(inFields
[0], this);
3349 // If fractions are expected, parse the numbers as "A/B
"
3350 if (this.fractions_) {
3351 for (var j = 1; j < inFields.length; j++) {
3352 // TODO(danvk): figure out an appropriate way to flag parse errors.
3353 var vals = inFields[j].split("/");
3354 if (vals.length != 2) {
3355 this.error('Expected fractional "num
/den
" values in CSV data ' +
3356 "but found a value
'" + inFields[j] + "' on line
" +
3357 (1 + i) + " ('" + line + "') which is not of
this form
.");
3360 fields[j] = [this.parseFloat_(vals[0], i, line),
3361 this.parseFloat_(vals[1], i, line)];
3364 } else if (this.attr_("errorBars
")) {
3365 // If there are error bars, values are (value, stddev) pairs
3366 if (inFields.length % 2 != 1) {
3367 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3368 'but line ' + (1 + i) + ' has an odd number of values (' +
3369 (inFields.length - 1) + "): '" + line + "'");
3371 for (var j = 1; j < inFields.length; j += 2) {
3372 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3373 this.parseFloat_(inFields[j + 1], i, line)];
3375 } else if (this.attr_("customBars
")) {
3376 // Bars are a low;center;high tuple
3377 for (var j = 1; j < inFields.length; j++) {
3378 var val = inFields[j];
3379 if (/^ *$/.test(val)) {
3380 fields[j] = [null, null, null];
3382 var vals = val.split(";");
3383 if (vals.length == 3) {
3384 fields[j] = [ this.parseFloat_(vals[0], i, line),
3385 this.parseFloat_(vals[1], i, line),
3386 this.parseFloat_(vals[2], i, line) ];
3388 this.warning('When using customBars, values must be either blank ' +
3389 'or "low
;center
;high
" tuples (got "' + val +
3390 '" on line ' + (1+i));
3395 // Values are just numbers
3396 for (var j = 1; j < inFields.length; j++) {
3397 fields[j] = this.parseFloat_(inFields[j], i, line);
3400 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3404 if (fields.length != expectedCols) {
3405 this.error("Number of columns
in line
" + i + " (" + fields.length +
3406 ") does not agree
with number of
labels (" + expectedCols +
3410 // If the user specified the 'labels' option and none of the cells of the
3411 // first row parsed correctly, then they probably double-specified the
3412 // labels. We go with the values set in the option, discard this row and
3413 // log a warning to the JS console.
3414 if (i == 0 && this.attr_('labels')) {
3415 var all_null = true;
3416 for (var j = 0; all_null && j < fields.length; j++) {
3417 if (fields[j]) all_null = false;
3420 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3421 "CSV
data ('" + line + "') appears to also contain labels
. " +
3422 "Will drop the CSV labels and
use the option labels
.");
3430 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3431 ret.sort(function(a,b) { return a[0] - b[0] });
3439 * The user has provided their data as a pre-packaged JS array. If the x values
3440 * are numeric, this is the same as dygraphs' internal format. If the x values
3441 * are dates, we need to convert them from Date objects to ms since epoch.
3442 * @param {[Object]} data
3443 * @return {[Object]} data with numeric x values.
3445 Dygraph.prototype.parseArray_ = function(data) {
3446 // Peek at the first x value to see if it's numeric.
3447 if (data.length == 0) {
3448 this.error("Can
't plot empty data set");
3451 if (data[0].length == 0) {
3452 this.error("Data set cannot contain an empty row");
3456 if (this.attr_("labels") == null) {
3457 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3458 "in the options parameter");
3459 this.attrs_.labels = [ "X" ];
3460 for (var i = 1; i < data[0].length; i++) {
3461 this.attrs_.labels.push("Y" + i);
3465 if (Dygraph.isDateLike(data[0][0])) {
3466 // Some intelligent defaults for a date x-axis.
3467 this.attrs_.xValueFormatter = Dygraph.dateString_;
3468 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3469 this.attrs_.xTicker = Dygraph.dateTicker;
3471 // Assume they're all dates
.
3472 var parsedData
= Dygraph
.clone(data
);
3473 for (var i
= 0; i
< data
.length
; i
++) {
3474 if (parsedData
[i
].length
== 0) {
3475 this.error("Row " + (1 + i
) + " of data is empty");
3478 if (parsedData
[i
][0] == null
3479 || typeof(parsedData
[i
][0].getTime
) != 'function'
3480 || isNaN(parsedData
[i
][0].getTime())) {
3481 this.error("x value in row " + (1 + i
) + " is not a Date");
3484 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3488 // Some intelligent defaults for a numeric x-axis.
3489 /** @private (shut up, jsdoc!) */
3490 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3491 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3497 * Parses a DataTable object from gviz.
3498 * The data is expected to have a first column that is either a date or a
3499 * number. All subsequent columns must be numbers. If there is a clear mismatch
3500 * between this.xValueParser_ and the type of the first column, it will be
3501 * fixed. Fills out rawData_.
3502 * @param {[Object]} data See above.
3505 Dygraph
.prototype.parseDataTable_
= function(data
) {
3506 var cols
= data
.getNumberOfColumns();
3507 var rows
= data
.getNumberOfRows();
3509 var indepType
= data
.getColumnType(0);
3510 if (indepType
== 'date' || indepType
== 'datetime') {
3511 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3512 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3513 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3514 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3515 } else if (indepType
== 'number') {
3516 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3517 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3518 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3519 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3521 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3522 "column 1 of DataTable input (Got '" + indepType
+ "')");
3526 // Array of the column indices which contain data (and not annotations).
3528 var annotationCols
= {}; // data index -> [annotation cols]
3529 var hasAnnotations
= false;
3530 for (var i
= 1; i
< cols
; i
++) {
3531 var type
= data
.getColumnType(i
);
3532 if (type
== 'number') {
3534 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3535 // This is OK -- it's an annotation column.
3536 var dataIdx
= colIdx
[colIdx
.length
- 1];
3537 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3538 annotationCols
[dataIdx
] = [i
];
3540 annotationCols
[dataIdx
].push(i
);
3542 hasAnnotations
= true;
3544 this.error("Only 'number' is supported as a dependent type with Gviz." +
3545 " 'string' is only supported if displayAnnotations is true");
3549 // Read column labels
3550 // TODO(danvk): add support back for errorBars
3551 var labels
= [data
.getColumnLabel(0)];
3552 for (var i
= 0; i
< colIdx
.length
; i
++) {
3553 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3554 if (this.attr_("errorBars")) i
+= 1;
3556 this.attrs_
.labels
= labels
;
3557 cols
= labels
.length
;
3560 var outOfOrder
= false;
3561 var annotations
= [];
3562 for (var i
= 0; i
< rows
; i
++) {
3564 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3565 data
.getValue(i
, 0) === null) {
3566 this.warn("Ignoring row " + i
+
3567 " of DataTable because of undefined or null first column.");
3571 if (indepType
== 'date' || indepType
== 'datetime') {
3572 row
.push(data
.getValue(i
, 0).getTime());
3574 row
.push(data
.getValue(i
, 0));
3576 if (!this.attr_("errorBars")) {
3577 for (var j
= 0; j
< colIdx
.length
; j
++) {
3578 var col
= colIdx
[j
];
3579 row
.push(data
.getValue(i
, col
));
3580 if (hasAnnotations
&&
3581 annotationCols
.hasOwnProperty(col
) &&
3582 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3584 ann
.series
= data
.getColumnLabel(col
);
3586 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3588 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3589 if (k
) ann
.text
+= "\n";
3590 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3592 annotations
.push(ann
);
3596 // Strip out infinities, which give dygraphs problems later on.
3597 for (var j
= 0; j
< row
.length
; j
++) {
3598 if (!isFinite(row
[j
])) row
[j
] = null;
3601 for (var j
= 0; j
< cols
- 1; j
++) {
3602 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3605 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3612 this.warn("DataTable is out of order; order it correctly to speed loading.");
3613 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3615 this.rawData_
= ret
;
3617 if (annotations
.length
> 0) {
3618 this.setAnnotations(annotations
, true);
3624 * This is identical to JavaScript's built-in Date.parse() method, except that
3625 * it doesn't get replaced with an incompatible method by aggressive JS
3626 * libraries like MooTools or Joomla.
3627 * @param { String } str The date string, e.g. "2011/05/06"
3628 * @return { Integer } millis since epoch
3630 Dygraph
.dateStrToMillis
= function(str
) {
3631 return new Date(str
).getTime();
3634 // These functions are all based on MochiKit.
3638 Dygraph
.update
= function (self
, o
) {
3639 if (typeof(o
) != 'undefined' && o
!== null) {
3641 if (o
.hasOwnProperty(k
)) {
3652 Dygraph
.isArrayLike
= function (o
) {
3653 var typ
= typeof(o
);
3655 (typ
!= 'object' && !(typ
== 'function' &&
3656 typeof(o
.item
) == 'function')) ||
3658 typeof(o
.length
) != 'number' ||
3669 Dygraph
.isDateLike
= function (o
) {
3670 if (typeof(o
) != "object" || o
=== null ||
3671 typeof(o
.getTime
) != 'function') {
3680 Dygraph
.clone
= function(o
) {
3681 // TODO(danvk): figure out how MochiKit's version works
3683 for (var i
= 0; i
< o
.length
; i
++) {
3684 if (Dygraph
.isArrayLike(o
[i
])) {
3685 r
.push(Dygraph
.clone(o
[i
]));
3695 * Get the CSV data. If it's in a function, call that function. If it's in a
3696 * file, do an XMLHttpRequest to get it.
3699 Dygraph
.prototype.start_
= function() {
3700 if (typeof this.file_
== 'function') {
3701 // CSV string. Pretend we got it via XHR.
3702 this.loadedEvent_(this.file_());
3703 } else if (Dygraph
.isArrayLike(this.file_
)) {
3704 this.rawData_
= this.parseArray_(this.file_
);
3706 } else if (typeof this.file_
== 'object' &&
3707 typeof this.file_
.getColumnRange
== 'function') {
3708 // must be a DataTable from gviz.
3709 this.parseDataTable_(this.file_
);
3711 } else if (typeof this.file_
== 'string') {
3712 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3713 if (this.file_
.indexOf('\n') >= 0) {
3714 this.loadedEvent_(this.file_
);
3716 var req
= new XMLHttpRequest();
3718 req
.onreadystatechange
= function () {
3719 if (req
.readyState
== 4) {
3720 if (req
.status
== 200) {
3721 caller
.loadedEvent_(req
.responseText
);
3726 req
.open("GET", this.file_
, true);
3730 this.error("Unknown data format: " + (typeof this.file_
));
3735 * Changes various properties of the graph. These can include:
3737 * <li>file: changes the source data for the graph</li>
3738 * <li>errorBars: changes whether the data contains stddev</li>
3741 * There's a huge variety of options that can be passed to this method. For a
3742 * full list, see http://dygraphs.com/options.html.
3744 * @param {Object} attrs The new properties and values
3745 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
3746 * call to updateOptions(). If you know better, you can pass true to explicitly
3747 * block the redraw. This can be useful for chaining updateOptions() calls,
3748 * avoiding the occasional infinite loop and preventing redraws when it's not
3749 * necessary (e.g. when updating a callback).
3751 Dygraph
.prototype.updateOptions
= function(attrs
, block_redraw
) {
3752 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3754 // TODO(danvk): this is a mess. Move these options into attr_.
3755 if ('rollPeriod' in attrs
) {
3756 this.rollPeriod_
= attrs
.rollPeriod
;
3758 if ('dateWindow' in attrs
) {
3759 this.dateWindow_
= attrs
.dateWindow
;
3760 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3761 this.zoomed_x_
= attrs
.dateWindow
!= null;
3764 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3765 this.zoomed_y_
= attrs
.valueRange
!= null;
3768 // TODO(danvk): validate per-series options.
3773 // highlightCircleSize
3775 Dygraph
.update(this.user_attrs_
, attrs
);
3777 this.labelsFromCSV_
= (this.attr_("labels") == null);
3779 if (attrs
['file']) {
3780 this.file_
= attrs
['file'];
3781 if (!block_redraw
) this.start_();
3783 if (!block_redraw
) this.predraw_();
3788 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3789 * containing div (which has presumably changed size since the dygraph was
3790 * instantiated. If the width/height are specified, the div will be resized.
3792 * This is far more efficient than destroying and re-instantiating a
3793 * Dygraph, since it doesn't have to reparse the underlying data.
3795 * @param {Number} [width] Width (in pixels)
3796 * @param {Number} [height] Height (in pixels)
3798 Dygraph
.prototype.resize
= function(width
, height
) {
3799 if (this.resize_lock
) {
3802 this.resize_lock
= true;
3804 if ((width
=== null) != (height
=== null)) {
3805 this.warn("Dygraph.resize() should be called with zero parameters or " +
3806 "two non-NULL parameters. Pretending it was zero.");
3807 width
= height
= null;
3810 // TODO(danvk): there should be a clear() method.
3811 this.maindiv_
.innerHTML
= "";
3812 this.attrs_
.labelsDiv
= null;
3815 this.maindiv_
.style
.width
= width
+ "px";
3816 this.maindiv_
.style
.height
= height
+ "px";
3817 this.width_
= width
;
3818 this.height_
= height
;
3820 this.width_
= this.maindiv_
.offsetWidth
;
3821 this.height_
= this.maindiv_
.offsetHeight
;
3824 this.createInterface_();
3827 this.resize_lock
= false;
3831 * Adjusts the number of points in the rolling average. Updates the graph to
3832 * reflect the new averaging period.
3833 * @param {Number} length Number of points over which to average the data.
3835 Dygraph
.prototype.adjustRoll
= function(length
) {
3836 this.rollPeriod_
= length
;
3841 * Returns a boolean array of visibility statuses.
3843 Dygraph
.prototype.visibility
= function() {
3844 // Do lazy-initialization, so that this happens after we know the number of
3846 if (!this.attr_("visibility")) {
3847 this.attrs_
["visibility"] = [];
3849 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3850 this.attr_("visibility").push(true);
3852 return this.attr_("visibility");
3856 * Changes the visiblity of a series.
3858 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3859 var x
= this.visibility();
3860 if (num
< 0 || num
>= x
.length
) {
3861 this.warn("invalid series number in setVisibility: " + num
);
3869 * Update the list of annotations and redraw the chart.
3871 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3872 // Only add the annotation CSS rule once we know it will be used.
3873 Dygraph
.addAnnotationRule();
3874 this.annotations_
= ann
;
3875 this.layout_
.setAnnotations(this.annotations_
);
3876 if (!suppressDraw
) {
3882 * Return the list of annotations.
3884 Dygraph
.prototype.annotations
= function() {
3885 return this.annotations_
;
3889 * Get the index of a series (column) given its name. The first column is the
3890 * x-axis, so the data series start with index 1.
3892 Dygraph
.prototype.indexFromSetName
= function(name
) {
3893 var labels
= this.attr_("labels");
3894 for (var i
= 0; i
< labels
.length
; i
++) {
3895 if (labels
[i
] == name
) return i
;
3902 * Adds a default style for the annotation CSS classes to the document. This is
3903 * only executed when annotations are actually used. It is designed to only be
3904 * called once -- all calls after the first will return immediately.
3906 Dygraph
.addAnnotationRule
= function() {
3907 if (Dygraph
.addedAnnotationCSS
) return;
3909 var rule
= "border: 1px solid black; " +
3910 "background-color: white; " +
3911 "text-align: center;";
3913 var styleSheetElement
= document
.createElement("style");
3914 styleSheetElement
.type
= "text/css";
3915 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3917 // Find the first style sheet that we can access.
3918 // We may not add a rule to a style sheet from another domain for security
3919 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3920 // adds its own style sheets from google.com.
3921 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3922 if (document
.styleSheets
[i
].disabled
) continue;
3923 var mysheet
= document
.styleSheets
[i
];
3925 if (mysheet
.insertRule
) { // Firefox
3926 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3927 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3928 } else if (mysheet
.addRule
) { // IE
3929 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3931 Dygraph
.addedAnnotationCSS
= true;
3934 // Was likely a security exception.
3938 this.warn("Unable to add default annotation CSS rule; display may be off.");
3943 * Create a new canvas element. This is more complex than a simple
3944 * document.createElement("canvas") because of IE and excanvas.
3946 Dygraph
.createCanvas
= function() {
3947 var canvas
= document
.createElement("canvas");
3949 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3950 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3951 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3959 * A wrapper around Dygraph that implements the gviz API.
3960 * @param {Object} container The DOM object the visualization should live in.
3962 Dygraph
.GVizChart
= function(container
) {
3963 this.container
= container
;
3966 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3967 // Clear out any existing dygraph.
3968 // TODO(danvk): would it make more sense to simply redraw using the current
3969 // date_graph object?
3970 this.container
.innerHTML
= '';
3971 if (typeof(this.date_graph
) != 'undefined') {
3972 this.date_graph
.destroy();
3975 this.date_graph
= new Dygraph(this.container
, data
, options
);
3979 * Google charts compatible setSelection
3980 * Only row selection is supported, all points in the row will be highlighted
3981 * @param {Array} array of the selected cells
3984 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3986 if (selection_array
.length
) {
3987 row
= selection_array
[0].row
;
3989 this.date_graph
.setSelection(row
);
3993 * Google charts compatible getSelection implementation
3994 * @return {Array} array of the selected cells
3997 Dygraph
.GVizChart
.prototype.getSelection
= function() {
4000 var row
= this.date_graph
.getSelection();
4002 if (row
< 0) return selection
;
4005 for (var i
in this.date_graph
.layout_
.datasets
) {
4006 selection
.push({row
: row
, column
: col
});
4013 // Older pages may still use this name.
4014 DateGraph
= Dygraph
;
4016 // <REMOVE_FOR_COMBINED>
4017 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
4020 "default": "parseFloat() or Date.parse()*",
4021 "labels": ["CSV parsing"],
4022 "type": "function(str) -> number",
4023 "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."
4027 "labels": ["Data Line display"],
4029 "description": "If set, stack series on top of one another rather than drawing them independently."
4033 "labels": ["Data Line display"],
4035 "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."
4037 "labelsDivStyles": {
4039 "labels": ["Legend"],
4041 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
4045 "labels": ["Data Line display"],
4047 "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."
4051 "labels": ["Overall display"],
4053 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4057 "labels": ["Callbacks"],
4058 "type": "function(minDate, maxDate, yRanges)",
4059 "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."
4061 "pointClickCallback": {
4063 "labels": ["Callbacks", "Interactive Elements"],
4068 "default": "(see description)",
4069 "labels": ["Data Series Colors"],
4070 "type": "array<string>",
4071 "example": "['red', '#00FF00']",
4072 "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."
4074 "connectSeparatedPoints": {
4076 "labels": ["Data Line display"],
4078 "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."
4080 "highlightCallback": {
4082 "labels": ["Callbacks"],
4083 "type": "function(event, x, points,row)",
4084 "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>"
4088 "labels": ["Axis display"],
4090 "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"
4094 "labels": ["Error Bars", "Rolling Averages"],
4095 "type": "integer >= 1",
4096 "description": "Number of days over which to average data. Discussed extensively above."
4098 "unhighlightCallback": {
4100 "labels": ["Callbacks"],
4101 "type": "function(event)",
4102 "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."
4106 "labels": ["Axis display"],
4108 "description": "The size of the line to display next to each tick mark on x- or y-axes."
4110 "labelsSeparateLines": {
4112 "labels": ["Legend"],
4114 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
4116 "xValueFormatter": {
4117 "default": "(Round to 2 decimal places)",
4118 "labels": ["Axis display"],
4119 "type": "function(x)",
4120 "description": "Function to provide a custom display format for the X value for mouseover."
4122 "pixelsPerYLabel": {
4124 "labels": ["Axis display", "Grid"],
4126 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4128 "annotationMouseOverHandler": {
4130 "labels": ["Annotations"],
4131 "type": "function(annotation, point, dygraph, event)",
4132 "description": "If provided, this function is called whenever the user mouses over an annotation."
4134 "annotationMouseOutHandler": {
4136 "labels": ["Annotations"],
4137 "type": "function(annotation, point, dygraph, event)",
4138 "description": "If provided, this function is called whenever the user mouses out of an annotation."
4140 "annotationClickHandler": {
4142 "labels": ["Annotations"],
4143 "type": "function(annotation, point, dygraph, event)",
4144 "description": "If provided, this function is called whenever the user clicks on an annotation."
4146 "annotationDblClickHandler": {
4148 "labels": ["Annotations"],
4149 "type": "function(annotation, point, dygraph, event)",
4150 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
4154 "labels": ["Callbacks"],
4155 "type": "function(dygraph, is_initial)",
4156 "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."
4160 "labels": ["Value display/formatting"],
4162 "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."
4166 "labels": ["CSV parsing"],
4168 "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."
4170 "axisLabelFontSize": {
4172 "labels": ["Axis display"],
4174 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
4176 "underlayCallback": {
4178 "labels": ["Callbacks"],
4179 "type": "function(canvas, area, dygraph)",
4180 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
4184 "labels": ["Overall display"],
4186 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
4188 "interactionModel": {
4190 "labels": ["Interactive Elements"],
4192 "description": "TODO(konigsberg): document this"
4195 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
4196 "labels": ["Axis display"],
4197 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
4198 "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."
4200 "xAxisLabelWidth": {
4202 "labels": ["Axis display"],
4204 "description": "Width, in pixels, of the x-axis labels."
4206 "showLabelsOnHighlight": {
4208 "labels": ["Interactive Elements", "Legend"],
4210 "description": "Whether to show the legend upon mouseover."
4213 "default": "(none)",
4214 "labels": ["Axis display"],
4215 "type": "string or object",
4216 "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."
4218 "pixelsPerXLabel": {
4220 "labels": ["Axis display", "Grid"],
4222 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4226 "labels": ["Legend"],
4227 "type": "DOM element or string",
4228 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4229 "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."
4233 "labels": ["CSV parsing", "Error Bars"],
4235 "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)."
4239 "labels": ["Axis display"],
4241 "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."
4245 "labels": ["Data Line display"],
4247 "example": "0.5, 2.0",
4248 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4252 "labels": ["Error Bars"],
4254 "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."
4258 "labels": ["Data Line display"],
4260 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4262 "highlightCircleSize": {
4264 "labels": ["Interactive Elements"],
4266 "description": "The size in pixels of the dot drawn over highlighted points."
4269 "default": "rgb(128,128,128)",
4271 "type": "red, blue",
4272 "description": "The color of the gridlines."
4275 "default": "[true, true, ...]",
4276 "labels": ["Data Line display"],
4277 "type": "Array of booleans",
4278 "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."
4281 "default": "Full range of the input is shown",
4282 "labels": ["Axis display"],
4283 "type": "Array of two numbers",
4284 "example": "[10, 110]",
4285 "description": "Explicitly set the vertical range of the graph to [low, high]."
4289 "labels": ["Legend"],
4291 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4293 "colorSaturation": {
4295 "labels": ["Data Series Colors"],
4296 "type": "float (0.0 - 1.0)",
4297 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4299 "yAxisLabelWidth": {
4301 "labels": ["Axis display"],
4303 "description": "Width, in pixels, of the y-axis labels. This also affects the amount of space available for a y-axis chart label."
4305 "hideOverlayOnMouseOut": {
4307 "labels": ["Interactive Elements", "Legend"],
4309 "description": "Whether to hide the legend when the mouse leaves the chart area."
4311 "yValueFormatter": {
4312 "default": "(Round to 2 decimal places)",
4313 "labels": ["Axis display"],
4314 "type": "function(x)",
4315 "description": "Function to provide a custom display format for the Y value for mouseover."
4318 "default": "onmouseover",
4319 "labels": ["Legend"],
4321 "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."
4323 "labelsShowZeroValues": {
4325 "labels": ["Legend"],
4327 "description": "Show zero value labels in the labelsDiv."
4331 "labels": ["Data Line display"],
4333 "description": "When set, display the graph as a step plot instead of a line plot."
4337 "labels": ["Value display/formatting"],
4339 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4343 "labels": ["Overall display"],
4345 "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."
4349 "labels": ["Axis display"],
4351 "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."
4353 "xAxisLabelFormatter": {
4354 "default": "Dygraph.dateAxisFormatter",
4355 "labels": ["Axis display", "Value display/formatting"],
4356 "type": "function(date, granularity)",
4357 "description": "Function to call to format values along the x axis."
4360 "snippet": "function(e, date){<br> alert(date);<br>}",
4362 "labels": ["Callbacks"],
4363 "type": "function(e, date)",
4364 "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."
4366 "yAxisLabelFormatter": {
4367 "default": "yValueFormatter",
4368 "labels": ["Axis display", "Value display/formatting"],
4369 "type": "function(x)",
4370 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4373 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4374 "labels": ["Legend"],
4375 "type": "array<string>",
4376 "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."
4379 "default": "Full range of the input is shown",
4380 "labels": ["Axis display"],
4381 "type": "Array of two Dates or numbers",
4382 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4383 "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."
4387 "labels": ["Interactive Elements", "Rolling Averages"],
4389 "description": "If the rolling average period text box should be shown."
4393 "labels": ["Error Bars"],
4395 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4399 "labels": ["CSV parsing", "Error Bars"],
4401 "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."
4405 "labels": ["Data Series Colors"],
4406 "type": "float (0.0 - 1.0)",
4407 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4411 "labels": ["CSV parsing", "Error Bars"],
4413 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4415 "displayAnnotations": {
4417 "labels": ["Annotations"],
4419 "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."
4421 "panEdgeFraction": {
4423 "labels": ["Axis Display", "Interactive Elements"],
4426 "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."
4429 "labels": ["Chart labels"],
4432 "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."
4436 "labels": ["Chart labels"],
4438 "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."
4441 "labels": ["Chart labels"],
4444 "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."
4447 "labels": ["Chart labels"],
4450 "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."
4453 "labels": ["Chart labels"],
4456 "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."
4459 "labels": ["Chart labels"],
4462 "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."
4464 "isZoomedIgnoreProgrammaticZoom" : {
4466 "labels": ["Zooming"],
4468 "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."
4474 "description" : "Whether to display vertical gridlines under the chart."
4480 "description" : "Whether to display horizontal gridlines under the chart."
4484 "labels": ["Axis display"],
4486 "description" : "Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4490 "labels": ["Axis display"],
4492 "description" : "Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn and reclaims the space for the chart grid/lines."
4498 "description" : "Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines can be turned off entirely by using the drawXGrid and drawYGrid options."
4502 "labels": ["Axis display"],
4504 "description" : "Thickness (in pixels) of the x- and y-axis lines."
4508 "labels": ["Axis display"],
4510 "description" : "Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute understands, e.g. 'black' or 'rgb(0, 100, 255)'."
4514 "labels": ["Error bars", "Data Series Colors"],
4515 "type": "float (0.0 - 1.0)",
4516 "description" : "Error bars (or custom bars) for each series are drawn in the same color as the series, but with partial transparency. This sets the transparency. A value of 0.0 means that the error bars will not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for the series itself. This can be used to produce chart lines whose thickness varies at each point."
4520 "labels": ["Axis display"],
4522 "description" : "Color for x- and y-axis labels. This is a CSS color string."
4526 "labels": ["Axis display", "Chart labels"],
4528 "description" : "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls "
4532 "labels": ["Value display/formatting"],
4534 "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."
4536 "digitsAfterDecimal" : {
4538 "labels": ["Value display/formatting"],
4540 "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."
4542 "maxNumberWidth" : {
4544 "labels": ["Value display/formatting"],
4546 "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."
4549 "default": "(set when constructed)",
4551 "type": "string (URL of CSV or CSV), GViz DataTable or 2D Array",
4552 "description": "Sets the data being displayed in the chart. This can only be set when calling updateOptions; it cannot be set from the constructor. For a full description of valid data formats, see the <a href='http://dygraphs.com/data.html'>Data Formats</a> page."
4556 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4557 // JSON. This assumption cannot be checked in JS, but it will be checked when
4558 // documentation is generated by the generate-documentation.py script. For the
4559 // most part, this just means that you should always use double quotes.
4561 // Do a quick sanity check on the options reference.
4563 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4564 var flds
= ['type', 'default', 'description'];
4572 'Data Line display',
4573 'Data Series Colors',
4576 'Interactive Elements',
4580 'Value display/formatting',
4584 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4586 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4587 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4588 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4589 for (var i
= 0; i
< flds
.length
; i
++) {
4590 if (!op
.hasOwnProperty(flds
[i
])) {
4591 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4592 } else if (typeof(op
[flds
[i
]]) != 'string') {
4593 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4596 var labels
= op
['labels'];
4597 if (typeof(labels
) !== 'object') {
4598 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4599 for (var i
= 0; i
< labels
.length
; i
++) {
4600 if (!cats
.hasOwnProperty(labels
[i
])) {
4601 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4602 '", which is invalid.');
4608 // </REMOVE_FOR_COMBINED
>