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 * An interactive, zoomable graph
45 * @param {String | Function} file A file containing CSV data or a function that
46 * returns this data. The expected format for each line is
47 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
48 * YYYYMMDD,val1,stddev1,val2,stddev2,...
49 * @param {Object} attrs Various other attributes, e.g. errorBars determines
50 * whether the input data contains error ranges.
52 Dygraph
= function(div
, data
, opts
) {
53 if (arguments
.length
> 0) {
54 if (arguments
.length
== 4) {
55 // Old versions of dygraphs took in the series labels as a constructor
56 // parameter. This doesn't make sense anymore, but it's easy to continue
57 // to support this usage.
58 this.warn("Using deprecated four-argument dygraph constructor");
59 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
61 this.__init__(div
, data
, opts
);
66 Dygraph
.NAME
= "Dygraph";
67 Dygraph
.VERSION
= "1.2";
68 Dygraph
.__repr__
= function() {
69 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
71 Dygraph
.toString
= function() {
72 return this.__repr__();
75 // Various default values
76 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
77 Dygraph
.DEFAULT_WIDTH
= 480;
78 Dygraph
.DEFAULT_HEIGHT
= 320;
79 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
81 Dygraph
.LOG_SCALE
= 10;
82 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
83 Dygraph
.log10
= function(x
) {
84 return Math
.log(x
) / Dygraph
.LN_TEN
;
87 // Default attribute values.
88 Dygraph
.DEFAULT_ATTRS
= {
89 highlightCircleSize
: 3,
95 // TODO(danvk): move defaults from createStatusMessage_ here.
97 labelsSeparateLines
: false,
98 labelsShowZeroValues
: true,
101 showLabelsOnHighlight
: true,
103 yValueFormatter
: function(a
,b
) { return Dygraph
.numberFormatter(a
,b
); },
104 digitsAfterDecimal
: 2,
111 axisLabelFontSize
: 14,
114 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
118 xValueFormatter
: Dygraph
.dateString_
,
119 xValueParser
: Dygraph
.dateParser
,
120 xTicker
: Dygraph
.dateTicker
,
127 wilsonInterval
: true, // only relevant if fractions is true
131 connectSeparatedPoints
: false,
134 hideOverlayOnMouseOut
: true,
136 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
137 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
142 // Sizes of the various chart labels.
147 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
150 // Various logging levels.
156 // Directions for panning and zooming. Use bit operations when combined
157 // values are possible.
158 Dygraph
.HORIZONTAL
= 1;
159 Dygraph
.VERTICAL
= 2;
161 // Used for initializing annotation CSS rules only once.
162 Dygraph
.addedAnnotationCSS
= false;
164 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
165 // Labels is no longer a constructor parameter, since it's typically set
166 // directly from the data source. It also conains a name for the x-axis,
167 // which the previous constructor form did not.
168 if (labels
!= null) {
169 var new_labels
= ["Date"];
170 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
171 Dygraph
.update(attrs
, { 'labels': new_labels
});
173 this.__init__(div
, file
, attrs
);
177 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
178 * and context <canvas> inside of it. See the constructor for details.
180 * @param {Element} div the Element to render the graph into.
181 * @param {String | Function} file Source data
182 * @param {Object} attrs Miscellaneous other options
185 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
186 // Hack for IE: if we're using excanvas and the document hasn't finished
187 // loading yet (and hence may not have initialized whatever it needs to
188 // initialize), then keep calling this routine periodically until it has.
189 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
190 typeof(G_vmlCanvasManager
) != 'undefined' &&
191 document
.readyState
!= 'complete') {
193 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
196 // Support two-argument constructor
197 if (attrs
== null) { attrs
= {}; }
199 // Copy the important bits into the object
200 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
203 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
204 this.previousVerticalX_
= -1;
205 this.fractions_
= attrs
.fractions
|| false;
206 this.dateWindow_
= attrs
.dateWindow
|| null;
208 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
209 this.is_initial_draw_
= true;
210 this.annotations_
= [];
212 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
213 this.zoomed_x_
= false;
214 this.zoomed_y_
= false;
216 // Clear the div. This ensure that, if multiple dygraphs are passed the same
217 // div, then only one will be drawn.
220 // If the div isn't already sized then inherit from our attrs or
221 // give it a default size.
222 if (div
.style
.width
== '') {
223 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
225 if (div
.style
.height
== '') {
226 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
228 this.width_
= parseInt(div
.style
.width
, 10);
229 this.height_
= parseInt(div
.style
.height
, 10);
230 // The div might have been specified as percent of the current window size,
231 // convert that to an appropriate number of pixels.
232 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
233 this.width_
= div
.offsetWidth
;
235 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
236 this.height_
= div
.offsetHeight
;
239 if (this.width_
== 0) {
240 this.error("dygraph has zero width. Please specify a width in pixels.");
242 if (this.height_
== 0) {
243 this.error("dygraph has zero height. Please specify a height in pixels.");
246 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
247 if (attrs
['stackedGraph']) {
248 attrs
['fillGraph'] = true;
249 // TODO(nikhilk): Add any other stackedGraph checks here.
252 // Dygraphs has many options, some of which interact with one another.
253 // To keep track of everything, we maintain two sets of options:
255 // this.user_attrs_ only options explicitly set by the user.
256 // this.attrs_ defaults, options derived from user_attrs_, data.
258 // Options are then accessed this.attr_('attr'), which first looks at
259 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
260 // defaults without overriding behavior that the user specifically asks for.
261 this.user_attrs_
= {};
262 Dygraph
.update(this.user_attrs_
, attrs
);
265 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
267 this.boundaryIds_
= [];
269 // Make a note of whether labels will be pulled from the CSV file.
270 this.labelsFromCSV_
= (this.attr_("labels") == null);
272 // Create the containing DIV and other interactive elements
273 this.createInterface_();
279 * Returns the zoomed status of the chart for one or both axes.
281 * Axis is an optional parameter. Can be set to 'x' or 'y'.
283 * The zoomed status for an axis is set whenever a user zooms using the mouse
284 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
285 * option is also specified).
287 Dygraph
.prototype.isZoomed
= function(axis
) {
288 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
289 if (axis
== 'x') return this.zoomed_x_
;
290 if (axis
== 'y') return this.zoomed_y_
;
291 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
294 Dygraph
.prototype.toString
= function() {
295 var maindiv
= this.maindiv_
;
296 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
297 return "[Dygraph " + id
+ "]";
300 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
301 // <REMOVE_FOR_COMBINED>
302 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
303 this.error('Must include options reference JS for testing');
304 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
305 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
306 'in the Dygraphs.OPTIONS_REFERENCE listing.');
307 // Only log this error once.
308 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
310 // </REMOVE_FOR_COMBINED
>
312 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
313 this.user_attrs_
[seriesName
] != null &&
314 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
315 return this.user_attrs_
[seriesName
][name
];
316 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
317 return this.user_attrs_
[name
];
318 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
319 return this.attrs_
[name
];
325 // TODO(danvk): any way I can get the line numbers to be this.warn call?
326 Dygraph
.prototype.log
= function(severity
, message
) {
327 if (typeof(console
) != 'undefined') {
330 console
.debug('dygraphs: ' + message
);
333 console
.info('dygraphs: ' + message
);
335 case Dygraph
.WARNING
:
336 console
.warn('dygraphs: ' + message
);
339 console
.error('dygraphs: ' + message
);
344 Dygraph
.prototype.info
= function(message
) {
345 this.log(Dygraph
.INFO
, message
);
347 Dygraph
.prototype.warn
= function(message
) {
348 this.log(Dygraph
.WARNING
, message
);
350 Dygraph
.prototype.error
= function(message
) {
351 this.log(Dygraph
.ERROR
, message
);
355 * Returns the current rolling period, as set by the user or an option.
356 * @return {Number} The number of points in the rolling window
358 Dygraph
.prototype.rollPeriod
= function() {
359 return this.rollPeriod_
;
363 * Returns the currently-visible x-range. This can be affected by zooming,
364 * panning or a call to updateOptions.
365 * Returns a two-element array: [left, right].
366 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
368 Dygraph
.prototype.xAxisRange
= function() {
369 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
373 * Returns the lower- and upper-bound x-axis values of the
376 Dygraph
.prototype.xAxisExtremes
= function() {
377 var left
= this.rawData_
[0][0];
378 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
379 return [left
, right
];
383 * Returns the currently-visible y-range for an axis. This can be affected by
384 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
385 * called with no arguments, returns the range of the first axis.
386 * Returns a two-element array: [bottom, top].
388 Dygraph
.prototype.yAxisRange
= function(idx
) {
389 if (typeof(idx
) == "undefined") idx
= 0;
390 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
391 return [ this.axes_
[idx
].computedValueRange
[0],
392 this.axes_
[idx
].computedValueRange
[1] ];
396 * Returns the currently-visible y-ranges for each axis. This can be affected by
397 * zooming, panning, calls to updateOptions, etc.
398 * Returns an array of [bottom, top] pairs, one for each y-axis.
400 Dygraph
.prototype.yAxisRanges
= function() {
402 for (var i
= 0; i
< this.axes_
.length
; i
++) {
403 ret
.push(this.yAxisRange(i
));
408 // TODO(danvk): use these functions throughout dygraphs.
410 * Convert from data coordinates to canvas/div X/Y coordinates.
411 * If specified, do this conversion for the coordinate system of a particular
412 * axis. Uses the first axis by default.
413 * Returns a two-element array: [X, Y]
415 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
416 * instead of toDomCoords(null, y, axis).
418 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
419 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
423 * Convert from data x coordinates to canvas/div X coordinate.
424 * If specified, do this conversion for the coordinate system of a particular
426 * Returns a single value or null if x is null.
428 Dygraph
.prototype.toDomXCoord
= function(x
) {
433 var area
= this.plotter_
.area
;
434 var xRange
= this.xAxisRange();
435 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
439 * Convert from data x coordinates to canvas/div Y coordinate and optional
440 * axis. Uses the first axis by default.
442 * returns a single value or null if y is null.
444 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
445 var pct
= this.toPercentYCoord(y
, axis
);
450 var area
= this.plotter_
.area
;
451 return area
.y
+ pct
* area
.h
;
455 * Convert from canvas/div coords to data coordinates.
456 * If specified, do this conversion for the coordinate system of a particular
457 * axis. Uses the first axis by default.
458 * Returns a two-element array: [X, Y].
460 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
461 * instead of toDataCoords(null, y, axis).
463 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
464 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
468 * Convert from canvas/div x coordinate to data coordinate.
470 * If x is null, this returns null.
472 Dygraph
.prototype.toDataXCoord
= function(x
) {
477 var area
= this.plotter_
.area
;
478 var xRange
= this.xAxisRange();
479 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
483 * Convert from canvas/div y coord to value.
485 * If y is null, this returns null.
486 * if axis is null, this uses the first axis.
488 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
493 var area
= this.plotter_
.area
;
494 var yRange
= this.yAxisRange(axis
);
496 if (typeof(axis
) == "undefined") axis
= 0;
497 if (!this.axes_
[axis
].logscale
) {
498 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
500 // Computing the inverse of toDomCoord.
501 var pct
= (y
- area
.y
) / area
.h
503 // Computing the inverse of toPercentYCoord. The function was arrived at with
504 // the following steps:
506 // Original calcuation:
507 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
509 // Move denominator to both sides:
510 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
512 // subtract logr1, and take the negative value.
513 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
515 // Swap both sides of the equation, and we can compute the log of the
516 // return value. Which means we just need to use that as the exponent in
518 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
520 var logr1
= Dygraph
.log10(yRange
[1]);
521 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
522 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
528 * Converts a y for an axis to a percentage from the top to the
529 * bottom of the drawing area.
531 * If the coordinate represents a value visible on the canvas, then
532 * the value will be between 0 and 1, where 0 is the top of the canvas.
533 * However, this method will return values outside the range, as
534 * values can fall outside the canvas.
536 * If y is null, this returns null.
537 * if axis is null, this uses the first axis.
539 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
543 if (typeof(axis
) == "undefined") axis
= 0;
545 var area
= this.plotter_
.area
;
546 var yRange
= this.yAxisRange(axis
);
549 if (!this.axes_
[axis
].logscale
) {
550 // yRange[1] - y is unit distance from the bottom.
551 // yRange[1] - yRange[0] is the scale of the range.
552 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
553 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
555 var logr1
= Dygraph
.log10(yRange
[1]);
556 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
562 * Converts an x value to a percentage from the left to the right of
565 * If the coordinate represents a value visible on the canvas, then
566 * the value will be between 0 and 1, where 0 is the left of the canvas.
567 * However, this method will return values outside the range, as
568 * values can fall outside the canvas.
570 * If x is null, this returns null.
572 Dygraph
.prototype.toPercentXCoord
= function(x
) {
577 var xRange
= this.xAxisRange();
578 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
582 * Returns the number of columns (including the independent variable).
584 Dygraph
.prototype.numColumns
= function() {
585 return this.rawData_
[0].length
;
589 * Returns the number of rows (excluding any header/label row).
591 Dygraph
.prototype.numRows
= function() {
592 return this.rawData_
.length
;
596 * Returns the value in the given row and column. If the row and column exceed
597 * the bounds on the data, returns null. Also returns null if the value is
600 Dygraph
.prototype.getValue
= function(row
, col
) {
601 if (row
< 0 || row
> this.rawData_
.length
) return null;
602 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
604 return this.rawData_
[row
][col
];
607 Dygraph
.addEvent
= function(el
, evt
, fn
) {
608 var normed_fn
= function(e
) {
609 if (!e
) var e
= window
.event
;
612 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
613 el
.addEventListener(evt
, normed_fn
, false);
615 el
.attachEvent('on' + evt
, normed_fn
);
620 // Based on the article at
621 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
622 Dygraph
.cancelEvent
= function(e
) {
623 e
= e
? e
: window
.event
;
624 if (e
.stopPropagation
) {
627 if (e
.preventDefault
) {
630 e
.cancelBubble
= true;
632 e
.returnValue
= false;
638 * Generates interface elements for the Dygraph: a containing div, a div to
639 * display the current point, and a textbox to adjust the rolling average
640 * period. Also creates the Renderer/Layout elements.
643 Dygraph
.prototype.createInterface_
= function() {
644 // Create the all-enclosing graph div
645 var enclosing
= this.maindiv_
;
647 this.graphDiv
= document
.createElement("div");
648 this.graphDiv
.style
.width
= this.width_
+ "px";
649 this.graphDiv
.style
.height
= this.height_
+ "px";
650 enclosing
.appendChild(this.graphDiv
);
652 // Create the canvas for interactive parts of the chart.
653 this.canvas_
= Dygraph
.createCanvas();
654 this.canvas_
.style
.position
= "absolute";
655 this.canvas_
.width
= this.width_
;
656 this.canvas_
.height
= this.height_
;
657 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
658 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
660 // ... and for static parts of the chart.
661 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
663 // The interactive parts of the graph are drawn on top of the chart.
664 this.graphDiv
.appendChild(this.hidden_
);
665 this.graphDiv
.appendChild(this.canvas_
);
666 this.mouseEventElement_
= this.canvas_
;
669 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
670 dygraph
.mouseMove_(e
);
672 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
673 dygraph
.mouseOut_(e
);
676 // Create the grapher
677 // TODO(danvk): why does the Layout need its own set of options?
678 this.layoutOptions_
= { 'xOriginIsZero': false };
679 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
680 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
681 Dygraph
.update(this.layoutOptions_
, {
682 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
684 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
686 // TODO(danvk): why does the Renderer need its own set of options?
687 this.renderOptions_
= { colorScheme
: this.colors_
,
689 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
690 Dygraph
.update(this.renderOptions_
, this.attrs_
);
691 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
693 this.createStatusMessage_();
694 this.createDragInterface_();
698 * Detach DOM elements in the dygraph and null out all data references.
699 * Calling this when you're done with a dygraph can dramatically reduce memory
700 * usage. See, e.g., the tests/perf.html example.
702 Dygraph
.prototype.destroy
= function() {
703 var removeRecursive
= function(node
) {
704 while (node
.hasChildNodes()) {
705 removeRecursive(node
.firstChild
);
706 node
.removeChild(node
.firstChild
);
709 removeRecursive(this.maindiv_
);
711 var nullOut
= function(obj
) {
713 if (typeof(obj
[n
]) === 'object') {
719 // These may not all be necessary, but it can't hurt...
720 nullOut(this.layout_
);
721 nullOut(this.plotter_
);
726 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
727 * this particular canvas. All Dygraph work is done on this.canvas_.
728 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
729 * @return {Object} The newly-created canvas
732 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
733 var h
= Dygraph
.createCanvas();
734 h
.style
.position
= "absolute";
735 // TODO(danvk): h should be offset from canvas. canvas needs to include
736 // some extra area to make it easier to zoom in on the far left and far
737 // right. h needs to be precisely the plot area, so that clipping occurs.
738 h
.style
.top
= canvas
.style
.top
;
739 h
.style
.left
= canvas
.style
.left
;
740 h
.width
= this.width_
;
741 h
.height
= this.height_
;
742 h
.style
.width
= this.width_
+ "px"; // for IE
743 h
.style
.height
= this.height_
+ "px"; // for IE
747 // Taken from MochiKit.Color
748 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
752 if (saturation
=== 0) {
757 var i
= Math
.floor(hue
* 6);
758 var f
= (hue
* 6) - i
;
759 var p
= value
* (1 - saturation
);
760 var q
= value
* (1 - (saturation
* f
));
761 var t
= value
* (1 - (saturation
* (1 - f
)));
763 case 1: red
= q
; green
= value
; blue
= p
; break;
764 case 2: red
= p
; green
= value
; blue
= t
; break;
765 case 3: red
= p
; green
= q
; blue
= value
; break;
766 case 4: red
= t
; green
= p
; blue
= value
; break;
767 case 5: red
= value
; green
= p
; blue
= q
; break;
768 case 6: // fall through
769 case 0: red
= value
; green
= t
; blue
= p
; break;
772 red
= Math
.floor(255 * red
+ 0.5);
773 green
= Math
.floor(255 * green
+ 0.5);
774 blue
= Math
.floor(255 * blue
+ 0.5);
775 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
780 * Generate a set of distinct colors for the data series. This is done with a
781 * color wheel. Saturation/Value are customizable, and the hue is
782 * equally-spaced around the color wheel. If a custom set of colors is
783 * specified, that is used instead.
786 Dygraph
.prototype.setColors_
= function() {
787 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
788 // away with this.renderOptions_.
789 var num
= this.attr_("labels").length
- 1;
791 var colors
= this.attr_('colors');
793 var sat
= this.attr_('colorSaturation') || 1.0;
794 var val
= this.attr_('colorValue') || 0.5;
795 var half
= Math
.ceil(num
/ 2);
796 for (var i
= 1; i
<= num
; i
++) {
797 if (!this.visibility()[i
-1]) continue;
798 // alternate colors for high contrast.
799 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
800 var hue
= (1.0 * idx
/ (1 + num
));
801 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
804 for (var i
= 0; i
< num
; i
++) {
805 if (!this.visibility()[i
]) continue;
806 var colorStr
= colors
[i
% colors
.length
];
807 this.colors_
.push(colorStr
);
811 // TODO(danvk): update this w/r
/t/ the
new options system
.
812 this.renderOptions_
.colorScheme
= this.colors_
;
813 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
814 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
815 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
819 * Return the list of colors. This is either the list of colors passed in the
820 * attributes, or the autogenerated list of rgb(r,g,b) strings.
821 * @return {Array<string>} The list of colors.
823 Dygraph
.prototype.getColors
= function() {
827 // The following functions are from quirksmode.org with a modification for Safari from
828 // http://blog.firetree.net/2005/07/04/javascript-find-position/
829 // http://www.quirksmode.org/js
/findpos
.html
830 Dygraph
.findPosX
= function(obj
) {
835 curleft
+= obj
.offsetLeft
;
836 if(!obj
.offsetParent
)
838 obj
= obj
.offsetParent
;
845 Dygraph
.findPosY
= function(obj
) {
850 curtop
+= obj
.offsetTop
;
851 if(!obj
.offsetParent
)
853 obj
= obj
.offsetParent
;
863 * Create the div that contains information on the selected point(s)
864 * This goes in the top right of the canvas, unless an external div has already
868 Dygraph
.prototype.createStatusMessage_
= function() {
869 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
870 if (userLabelsDiv
&& null != userLabelsDiv
871 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
872 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
874 if (!this.attr_("labelsDiv")) {
875 var divWidth
= this.attr_('labelsDivWidth');
877 "position": "absolute",
880 "width": divWidth
+ "px",
882 "left": (this.width_
- divWidth
- 2) + "px",
883 "background": "white",
885 "overflow": "hidden"};
886 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
887 var div
= document
.createElement("div");
888 for (var name
in messagestyle
) {
889 if (messagestyle
.hasOwnProperty(name
)) {
890 div
.style
[name
] = messagestyle
[name
];
893 this.graphDiv
.appendChild(div
);
894 this.attrs_
.labelsDiv
= div
;
899 * Position the labels div so that:
900 * - its right edge is flush with the right edge of the charting area
901 * - its top edge is flush with the top edge of the charting area
903 Dygraph
.prototype.positionLabelsDiv_
= function() {
904 // Don't touch a user-specified labelsDiv.
905 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
907 var area
= this.plotter_
.area
;
908 var div
= this.attr_("labelsDiv");
909 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
910 div
.style
.top
= area
.y
+ "px";
914 * Create the text box to adjust the averaging period
917 Dygraph
.prototype.createRollInterface_
= function() {
918 // Create a roller if one doesn't exist already.
920 this.roller_
= document
.createElement("input");
921 this.roller_
.type
= "text";
922 this.roller_
.style
.display
= "none";
923 this.graphDiv
.appendChild(this.roller_
);
926 var display
= this.attr_('showRoller') ? 'block' : 'none';
928 var area
= this.plotter_
.area
;
929 var textAttr
= { "position": "absolute",
931 "top": (area
.y
+ area
.h
- 25) + "px",
932 "left": (area
.x
+ 1) + "px",
935 this.roller_
.size
= "2";
936 this.roller_
.value
= this.rollPeriod_
;
937 for (var name
in textAttr
) {
938 if (textAttr
.hasOwnProperty(name
)) {
939 this.roller_
.style
[name
] = textAttr
[name
];
944 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
947 // These functions are taken from MochiKit.Signal
948 Dygraph
.pageX
= function(e
) {
950 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
953 var b
= document
.body
;
955 (de
.scrollLeft
|| b
.scrollLeft
) -
956 (de
.clientLeft
|| 0);
960 Dygraph
.pageY
= function(e
) {
962 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
965 var b
= document
.body
;
967 (de
.scrollTop
|| b
.scrollTop
) -
972 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
973 return Dygraph
.pageX(e
) - context
.px
976 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
977 return Dygraph
.pageY(e
) - context
.py
980 // Called in response to an interaction model operation that
981 // should start the default panning behavior.
983 // It's used in the default callback for "mousedown" operations.
984 // Custom interaction model builders can use it to provide the default
987 Dygraph
.startPan
= function(event
, g
, context
) {
988 context
.isPanning
= true;
989 var xRange
= g
.xAxisRange();
990 context
.dateRange
= xRange
[1] - xRange
[0];
991 context
.initialLeftmostDate
= xRange
[0];
992 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
994 if (g
.attr_("panEdgeFraction")) {
995 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
996 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
998 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
999 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1001 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1002 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1003 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1005 var boundedValues
= [];
1006 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1008 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1009 var axis
= g
.axes_
[i
];
1010 var yExtremes
= axis
.extremeRange
;
1012 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1013 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1015 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1016 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1018 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1020 context
.boundedValues
= boundedValues
;
1023 // Record the range of each y-axis at the start of the drag.
1024 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1025 context
.is2DPan
= false;
1026 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1027 var axis
= g
.axes_
[i
];
1028 var yRange
= g
.yAxisRange(i
);
1029 // TODO(konigsberg): These values should be in |context|.
1030 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1031 if (axis
.logscale
) {
1032 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1033 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1035 axis
.initialTopValue
= yRange
[1];
1036 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1038 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1040 // While calculating axes, set 2dpan.
1041 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1045 // Called in response to an interaction model operation that
1046 // responds to an event that pans the view.
1048 // It's used in the default callback for "mousemove" operations.
1049 // Custom interaction model builders can use it to provide the default
1050 // panning behavior.
1052 Dygraph
.movePan
= function(event
, g
, context
) {
1053 context
.dragEndX
= g
.dragGetX_(event
, context
);
1054 context
.dragEndY
= g
.dragGetY_(event
, context
);
1056 var minDate
= context
.initialLeftmostDate
-
1057 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1058 if (context
.boundedDates
) {
1059 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1061 var maxDate
= minDate
+ context
.dateRange
;
1062 if (context
.boundedDates
) {
1063 if (maxDate
> context
.boundedDates
[1]) {
1064 // Adjust minDate, and recompute maxDate.
1065 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1066 maxDate
= minDate
+ context
.dateRange
;
1070 g
.dateWindow_
= [minDate
, maxDate
];
1072 // y-axis scaling is automatic unless this is a full 2D pan.
1073 if (context
.is2DPan
) {
1074 // Adjust each axis appropriately.
1075 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1076 var axis
= g
.axes_
[i
];
1078 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1079 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1081 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1083 // In log scale, maxValue and minValue are the logs of those values.
1084 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1086 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1088 var minValue
= maxValue
- axis
.dragValueRange
;
1090 if (minValue
< boundedValue
[0]) {
1091 // Adjust maxValue, and recompute minValue.
1092 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1093 minValue
= maxValue
- axis
.dragValueRange
;
1096 if (axis
.logscale
) {
1097 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1098 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1100 axis
.valueWindow
= [ minValue
, maxValue
];
1108 // Called in response to an interaction model operation that
1109 // responds to an event that ends panning.
1111 // It's used in the default callback for "mouseup" operations.
1112 // Custom interaction model builders can use it to provide the default
1113 // panning behavior.
1115 Dygraph
.endPan
= function(event
, g
, context
) {
1116 // TODO(konigsberg): Clear the context data from the axis.
1117 // TODO(konigsberg): mouseup should just delete the
1118 // context object, and mousedown should create a new one.
1119 context
.isPanning
= false;
1120 context
.is2DPan
= false;
1121 context
.initialLeftmostDate
= null;
1122 context
.dateRange
= null;
1123 context
.valueRange
= null;
1124 context
.boundedDates
= null;
1125 context
.boundedValues
= null;
1128 // Called in response to an interaction model operation that
1129 // responds to an event that starts zooming.
1131 // It's used in the default callback for "mousedown" operations.
1132 // Custom interaction model builders can use it to provide the default
1133 // zooming behavior.
1135 Dygraph
.startZoom
= function(event
, g
, context
) {
1136 context
.isZooming
= true;
1139 // Called in response to an interaction model operation that
1140 // responds to an event that defines zoom boundaries.
1142 // It's used in the default callback for "mousemove" operations.
1143 // Custom interaction model builders can use it to provide the default
1144 // zooming behavior.
1146 Dygraph
.moveZoom
= function(event
, g
, context
) {
1147 context
.dragEndX
= g
.dragGetX_(event
, context
);
1148 context
.dragEndY
= g
.dragGetY_(event
, context
);
1150 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1151 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1153 // drag direction threshold for y axis is twice as large as x axis
1154 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1157 context
.dragDirection
,
1162 context
.prevDragDirection
,
1166 context
.prevEndX
= context
.dragEndX
;
1167 context
.prevEndY
= context
.dragEndY
;
1168 context
.prevDragDirection
= context
.dragDirection
;
1171 // Called in response to an interaction model operation that
1172 // responds to an event that performs a zoom based on previously defined
1175 // It's used in the default callback for "mouseup" operations.
1176 // Custom interaction model builders can use it to provide the default
1177 // zooming behavior.
1179 Dygraph
.endZoom
= function(event
, g
, context
) {
1180 context
.isZooming
= false;
1181 context
.dragEndX
= g
.dragGetX_(event
, context
);
1182 context
.dragEndY
= g
.dragGetY_(event
, context
);
1183 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1184 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1186 if (regionWidth
< 2 && regionHeight
< 2 &&
1187 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1188 // TODO(danvk): pass along more info about the points, e.g. 'x'
1189 if (g
.attr_('clickCallback') != null) {
1190 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1192 if (g
.attr_('pointClickCallback')) {
1193 // check if the click was on a particular point.
1194 var closestIdx
= -1;
1195 var closestDistance
= 0;
1196 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1197 var p
= g
.selPoints_
[i
];
1198 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1199 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1200 if (closestIdx
== -1 || distance
< closestDistance
) {
1201 closestDistance
= distance
;
1206 // Allow any click within two pixels of the dot.
1207 var radius
= g
.attr_('highlightCircleSize') + 2;
1208 if (closestDistance
<= 5 * 5) {
1209 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1214 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1215 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1216 Math
.max(context
.dragStartX
, context
.dragEndX
));
1217 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1218 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1219 Math
.max(context
.dragStartY
, context
.dragEndY
));
1221 g
.canvas_
.getContext("2d").clearRect(0, 0,
1225 context
.dragStartX
= null;
1226 context
.dragStartY
= null;
1229 Dygraph
.defaultInteractionModel
= {
1230 // Track the beginning of drag events
1231 mousedown
: function(event
, g
, context
) {
1232 context
.initializeMouseDown(event
, g
, context
);
1234 if (event
.altKey
|| event
.shiftKey
) {
1235 Dygraph
.startPan(event
, g
, context
);
1237 Dygraph
.startZoom(event
, g
, context
);
1241 // Draw zoom rectangles when the mouse is down and the user moves around
1242 mousemove
: function(event
, g
, context
) {
1243 if (context
.isZooming
) {
1244 Dygraph
.moveZoom(event
, g
, context
);
1245 } else if (context
.isPanning
) {
1246 Dygraph
.movePan(event
, g
, context
);
1250 mouseup
: function(event
, g
, context
) {
1251 if (context
.isZooming
) {
1252 Dygraph
.endZoom(event
, g
, context
);
1253 } else if (context
.isPanning
) {
1254 Dygraph
.endPan(event
, g
, context
);
1258 // Temporarily cancel the dragging event when the mouse leaves the graph
1259 mouseout
: function(event
, g
, context
) {
1260 if (context
.isZooming
) {
1261 context
.dragEndX
= null;
1262 context
.dragEndY
= null;
1266 // Disable zooming out if panning.
1267 dblclick
: function(event
, g
, context
) {
1268 if (event
.altKey
|| event
.shiftKey
) {
1271 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1272 // friendlier to public use.
1277 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1280 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1284 Dygraph
.prototype.createDragInterface_
= function() {
1286 // Tracks whether the mouse is down right now
1288 isPanning
: false, // is this drag part of a pan?
1289 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1294 dragDirection
: null,
1297 prevDragDirection
: null,
1299 // The value on the left side of the graph when a pan operation starts.
1300 initialLeftmostDate
: null,
1302 // The number of units each pixel spans. (This won't be valid for log
1304 xUnitsPerPixel
: null,
1306 // TODO(danvk): update this comment
1307 // The range in second/value units that the viewport encompasses during a
1308 // panning operation.
1311 // Utility function to convert page-wide coordinates to canvas coords
1315 // Values for use with panEdgeFraction, which limit how far outside the
1316 // graph's data boundaries it can be panned.
1317 boundedDates
: null, // [minDate, maxDate]
1318 boundedValues
: null, // [[minValue, maxValue] ...]
1320 initializeMouseDown
: function(event
, g
, context
) {
1321 // prevents mouse drags from selecting page text.
1322 if (event
.preventDefault
) {
1323 event
.preventDefault(); // Firefox, Chrome, etc.
1325 event
.returnValue
= false; // IE
1326 event
.cancelBubble
= true;
1329 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1330 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1331 context
.dragStartX
= g
.dragGetX_(event
, context
);
1332 context
.dragStartY
= g
.dragGetY_(event
, context
);
1336 var interactionModel
= this.attr_("interactionModel");
1338 // Self is the graph.
1341 // Function that binds the graph and context to the handler.
1342 var bindHandler
= function(handler
) {
1343 return function(event
) {
1344 handler(event
, self
, context
);
1348 for (var eventName
in interactionModel
) {
1349 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1350 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1351 bindHandler(interactionModel
[eventName
]));
1354 // If the user releases the mouse button during a drag, but not over the
1355 // canvas, then it doesn't count as a zooming action.
1356 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1357 if (context
.isZooming
|| context
.isPanning
) {
1358 context
.isZooming
= false;
1359 context
.dragStartX
= null;
1360 context
.dragStartY
= null;
1363 if (context
.isPanning
) {
1364 context
.isPanning
= false;
1365 context
.draggingDate
= null;
1366 context
.dateRange
= null;
1367 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1368 delete self
.axes_
[i
].draggingValue
;
1369 delete self
.axes_
[i
].dragValueRange
;
1377 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1378 * up any previous zoom rectangles that were drawn. This could be optimized to
1379 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1382 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1383 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1384 * @param {Number} startX The X position where the drag started, in canvas
1386 * @param {Number} endX The current X position of the drag, in canvas coords.
1387 * @param {Number} startY The Y position where the drag started, in canvas
1389 * @param {Number} endY The current Y position of the drag, in canvas coords.
1390 * @param {Number} prevDirection the value of direction on the previous call to
1391 * this function. Used to avoid excess redrawing
1392 * @param {Number} prevEndX The value of endX on the previous call to this
1393 * function. Used to avoid excess redrawing
1394 * @param {Number} prevEndY The value of endY on the previous call to this
1395 * function. Used to avoid excess redrawing
1398 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1399 endY
, prevDirection
, prevEndX
,
1401 var ctx
= this.canvas_
.getContext("2d");
1403 // Clean up from the previous rect if necessary
1404 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1405 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1406 Math
.abs(startX
- prevEndX
), this.height_
);
1407 } else if (prevDirection
== Dygraph
.VERTICAL
){
1408 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1409 this.width_
, Math
.abs(startY
- prevEndY
));
1412 // Draw a light-grey rectangle to show the new viewing area
1413 if (direction
== Dygraph
.HORIZONTAL
) {
1414 if (endX
&& startX
) {
1415 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1416 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1417 Math
.abs(endX
- startX
), this.height_
);
1420 if (direction
== Dygraph
.VERTICAL
) {
1421 if (endY
&& startY
) {
1422 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1423 ctx
.fillRect(0, Math
.min(startY
, endY
),
1424 this.width_
, Math
.abs(endY
- startY
));
1430 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1431 * the canvas. The exact zoom window may be slightly larger if there are no data
1432 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1433 * which accepts dates that match the raw data. This function redraws the graph.
1435 * @param {Number} lowX The leftmost pixel value that should be visible.
1436 * @param {Number} highX The rightmost pixel value that should be visible.
1439 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1440 // Find the earliest and latest dates contained in this canvasx range.
1441 // Convert the call to date ranges of the raw data.
1442 var minDate
= this.toDataXCoord(lowX
);
1443 var maxDate
= this.toDataXCoord(highX
);
1444 this.doZoomXDates_(minDate
, maxDate
);
1448 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1449 * method with doZoomX which accepts pixel coordinates. This function redraws
1452 * @param {Number} minDate The minimum date that should be visible.
1453 * @param {Number} maxDate The maximum date that should be visible.
1456 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1457 this.dateWindow_
= [minDate
, maxDate
];
1458 this.zoomed_x_
= true;
1460 if (this.attr_("zoomCallback")) {
1461 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1466 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1467 * the canvas. This function redraws the graph.
1469 * @param {Number} lowY The topmost pixel value that should be visible.
1470 * @param {Number} highY The lowest pixel value that should be visible.
1473 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1474 // Find the highest and lowest values in pixel range for each axis.
1475 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1476 // This is because pixels increase as you go down on the screen, whereas data
1477 // coordinates increase as you go up the screen.
1478 var valueRanges
= [];
1479 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1480 var hi
= this.toDataYCoord(lowY
, i
);
1481 var low
= this.toDataYCoord(highY
, i
);
1482 this.axes_
[i
].valueWindow
= [low
, hi
];
1483 valueRanges
.push([low
, hi
]);
1486 this.zoomed_y_
= true;
1488 if (this.attr_("zoomCallback")) {
1489 var xRange
= this.xAxisRange();
1490 var yRange
= this.yAxisRange();
1491 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1496 * Reset the zoom to the original view coordinates. This is the same as
1497 * double-clicking on the graph.
1501 Dygraph
.prototype.doUnzoom_
= function() {
1503 if (this.dateWindow_
!= null) {
1505 this.dateWindow_
= null;
1508 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1509 if (this.axes_
[i
].valueWindow
!= null) {
1511 delete this.axes_
[i
].valueWindow
;
1516 // Putting the drawing operation before the callback because it resets
1518 this.zoomed_x_
= false;
1519 this.zoomed_y_
= false;
1521 if (this.attr_("zoomCallback")) {
1522 var minDate
= this.rawData_
[0][0];
1523 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1524 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1530 * When the mouse moves in the canvas, display information about a nearby data
1531 * point and draw dots over those points in the data series. This function
1532 * takes care of cleanup of previously-drawn dots.
1533 * @param {Object} event The mousemove event from the browser.
1536 Dygraph
.prototype.mouseMove_
= function(event
) {
1537 // This prevents JS errors when mousing over the canvas before data loads.
1538 var points
= this.layout_
.points
;
1539 if (points
=== undefined
) return;
1541 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1546 // Loop through all the points and find the date nearest to our current
1548 var minDist
= 1e+100;
1550 for (var i
= 0; i
< points
.length
; i
++) {
1551 var point
= points
[i
];
1552 if (point
== null) continue;
1553 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1554 if (dist
> minDist
) continue;
1558 if (idx
>= 0) lastx
= points
[idx
].xval
;
1560 // Extract the points we've selected
1561 this.selPoints_
= [];
1562 var l
= points
.length
;
1563 if (!this.attr_("stackedGraph")) {
1564 for (var i
= 0; i
< l
; i
++) {
1565 if (points
[i
].xval
== lastx
) {
1566 this.selPoints_
.push(points
[i
]);
1570 // Need to 'unstack' points starting from the bottom
1571 var cumulative_sum
= 0;
1572 for (var i
= l
- 1; i
>= 0; i
--) {
1573 if (points
[i
].xval
== lastx
) {
1574 var p
= {}; // Clone the point since we modify it
1575 for (var k
in points
[i
]) {
1576 p
[k
] = points
[i
][k
];
1578 p
.yval
-= cumulative_sum
;
1579 cumulative_sum
+= p
.yval
;
1580 this.selPoints_
.push(p
);
1583 this.selPoints_
.reverse();
1586 if (this.attr_("highlightCallback")) {
1587 var px
= this.lastx_
;
1588 if (px
!== null && lastx
!= px
) {
1589 // only fire if the selected point has changed.
1590 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1594 // Save last x position for callbacks.
1595 this.lastx_
= lastx
;
1597 this.updateSelection_();
1601 * Transforms layout_.points index into data row number.
1602 * @param int layout_.points index
1603 * @return int row number, or -1 if none could be found.
1606 Dygraph
.prototype.idxToRow_
= function(idx
) {
1607 if (idx
< 0) return -1;
1609 for (var i
in this.layout_
.datasets
) {
1610 if (idx
< this.layout_
.datasets
[i
].length
) {
1611 return this.boundaryIds_
[0][0]+idx
;
1613 idx
-= this.layout_
.datasets
[i
].length
;
1618 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1619 Dygraph
.isOK
= function(x
) {
1620 return x
&& !isNaN(x
);
1623 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1624 // If no points are selected, we display a default legend. Traditionally,
1625 // this has been blank. But a better default would be a conventional legend,
1626 // which provides essential information for a non-interactive chart.
1627 if (typeof(x
) === 'undefined') {
1628 if (this.attr_('legend') != 'always') return '';
1630 var sepLines
= this.attr_('labelsSeparateLines');
1631 var labels
= this.attr_('labels');
1633 for (var i
= 1; i
< labels
.length
; i
++) {
1634 if (!this.visibility()[i
- 1]) continue;
1635 var c
= this.plotter_
.colors
[labels
[i
]];
1636 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1637 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1643 var html
= this.attr_('xValueFormatter')(x
) + ":";
1645 var fmtFunc
= this.attr_('yValueFormatter');
1646 var showZeros
= this.attr_("labelsShowZeroValues");
1647 var sepLines
= this.attr_("labelsSeparateLines");
1648 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1649 var pt
= this.selPoints_
[i
];
1650 if (pt
.yval
== 0 && !showZeros
) continue;
1651 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1652 if (sepLines
) html
+= "<br/>";
1654 var c
= this.plotter_
.colors
[pt
.name
];
1655 var yval
= fmtFunc(pt
.yval
, this);
1656 // TODO(danvk): use a template string here and make it an attribute.
1657 html
+= " <b><span style='color: " + c
+ ";'>"
1658 + pt
.name
+ "</span></b>:"
1664 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1665 var html
= this.generateLegendHTML_(x
, sel_points
);
1666 var labelsDiv
= this.attr_("labelsDiv");
1667 if (labelsDiv
!== null) {
1668 labelsDiv
.innerHTML
= html
;
1670 if (typeof(this.shown_legend_error_
) == 'undefined') {
1671 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1672 this.shown_legend_error_
= true;
1678 * Draw dots over the selectied points in the data series. This function
1679 * takes care of cleanup of previously-drawn dots.
1682 Dygraph
.prototype.updateSelection_
= function() {
1683 // Clear the previously drawn vertical, if there is one
1684 var ctx
= this.canvas_
.getContext("2d");
1685 if (this.previousVerticalX_
>= 0) {
1686 // Determine the maximum highlight circle size.
1687 var maxCircleSize
= 0;
1688 var labels
= this.attr_('labels');
1689 for (var i
= 1; i
< labels
.length
; i
++) {
1690 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1691 if (r
> maxCircleSize
) maxCircleSize
= r
;
1693 var px
= this.previousVerticalX_
;
1694 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1695 2 * maxCircleSize
+ 2, this.height_
);
1698 if (this.selPoints_
.length
> 0) {
1699 // Set the status message to indicate the selected point(s)
1700 if (this.attr_('showLabelsOnHighlight')) {
1701 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1704 // Draw colored circles over the center of each selected point
1705 var canvasx
= this.selPoints_
[0].canvasx
;
1707 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1708 var pt
= this.selPoints_
[i
];
1709 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1711 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1713 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1714 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1719 this.previousVerticalX_
= canvasx
;
1724 * Set manually set selected dots, and display information about them
1725 * @param int row number that should by highlighted
1726 * false value clears the selection
1729 Dygraph
.prototype.setSelection
= function(row
) {
1730 // Extract the points we've selected
1731 this.selPoints_
= [];
1734 if (row
!== false) {
1735 row
= row
-this.boundaryIds_
[0][0];
1738 if (row
!== false && row
>= 0) {
1739 for (var i
in this.layout_
.datasets
) {
1740 if (row
< this.layout_
.datasets
[i
].length
) {
1741 var point
= this.layout_
.points
[pos
+row
];
1743 if (this.attr_("stackedGraph")) {
1744 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1747 this.selPoints_
.push(point
);
1749 pos
+= this.layout_
.datasets
[i
].length
;
1753 if (this.selPoints_
.length
) {
1754 this.lastx_
= this.selPoints_
[0].xval
;
1755 this.updateSelection_();
1757 this.clearSelection();
1763 * The mouse has left the canvas. Clear out whatever artifacts remain
1764 * @param {Object} event the mouseout event from the browser.
1767 Dygraph
.prototype.mouseOut_
= function(event
) {
1768 if (this.attr_("unhighlightCallback")) {
1769 this.attr_("unhighlightCallback")(event
);
1772 if (this.attr_("hideOverlayOnMouseOut")) {
1773 this.clearSelection();
1778 * Remove all selection from the canvas
1781 Dygraph
.prototype.clearSelection
= function() {
1782 // Get rid of the overlay data
1783 var ctx
= this.canvas_
.getContext("2d");
1784 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1785 this.setLegendHTML_();
1786 this.selPoints_
= [];
1791 * Returns the number of the currently selected row
1792 * @return int row number, of -1 if nothing is selected
1795 Dygraph
.prototype.getSelection
= function() {
1796 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1800 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1801 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1802 return row
+ this.boundaryIds_
[0][0];
1809 * Number formatting function which mimicks the behavior of %g in printf, i.e.
1810 * either exponential or fixed format (without trailing 0s) is used depending on
1811 * the length of the generated string. The advantage of this format is that
1812 * there is a predictable upper bound on the resulting string length,
1813 * significant figures are not dropped, and normal numbers are not displayed in
1814 * exponential notation.
1816 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
1817 * It creates strings which are too long for absolute values between 10^-4 and
1818 * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for
1821 * @param {Number} x The number to format
1822 * @param {Number} opt_precision The precision to use, default 2.
1823 * @return {String} A string formatted like %g in printf. The max generated
1824 * string length should be precision + 6 (e.g 1.123e+300).
1826 Dygraph
.floatFormat
= function(x
, opt_precision
) {
1827 // Avoid invalid precision values; [1, 21] is the valid range.
1828 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
1830 // This is deceptively simple. The actual algorithm comes from:
1832 // Max allowed length = p + 4
1833 // where 4 comes from 'e+n' and '.'.
1835 // Length of fixed format = 2 + y + p
1836 // where 2 comes from '0.' and y = # of leading zeroes.
1838 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
1841 // Since the behavior of toPrecision() is identical for larger numbers, we
1842 // don't have to worry about the other bound.
1844 // Finally, the argument for toExponential() is the number of trailing digits,
1845 // so we take off 1 for the value before the '.'.
1846 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
1847 x
.toExponential(p
- 1) : x
.toPrecision(p
);
1851 * Return a string version of a number. This respects the digitsAfterDecimal
1852 * and maxNumberWidth options.
1853 * @param {Number} x The number to be formatted
1854 * @param {Dygraph} g The dygraph object
1856 Dygraph
.numberFormatter
= function(x
, g
) {
1857 var sigFigs
= g
.attr_('sigFigs');
1859 if (sigFigs
!== null) {
1860 // User has opted for a fixed number of significant figures.
1861 return Dygraph
.floatFormat(x
, sigFigs
);
1864 var digits
= g
.attr_('digitsAfterDecimal');
1865 var maxNumberWidth
= g
.attr_('maxNumberWidth');
1867 // switch to scientific notation if we underflow or overflow fixed display.
1869 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
1870 Math
.abs(x
) < Math
.pow(10, -digits
))) {
1871 return x
.toExponential(digits
);
1873 return '' + Dygraph
.round_(x
, digits
);
1877 Dygraph
.zeropad
= function(x
) {
1878 if (x
< 10) return "0" + x
; else return "" + x
;
1882 * Return a string version of the hours, minutes and seconds portion of a date.
1883 * @param {Number} date The JavaScript date (ms since epoch)
1884 * @return {String} A time of the form "HH:MM:SS"
1887 Dygraph
.hmsString_
= function(date
) {
1888 var zeropad
= Dygraph
.zeropad
;
1889 var d
= new Date(date
);
1890 if (d
.getSeconds()) {
1891 return zeropad(d
.getHours()) + ":" +
1892 zeropad(d
.getMinutes()) + ":" +
1893 zeropad(d
.getSeconds());
1895 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1900 * Convert a JS date to a string appropriate to display on an axis that
1901 * is displaying values at the stated granularity.
1902 * @param {Date} date The date to format
1903 * @param {Number} granularity One of the Dygraph granularity constants
1904 * @return {String} The formatted date
1907 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1908 if (granularity
>= Dygraph
.DECADAL
) {
1909 return date
.strftime('%Y');
1910 } else if (granularity
>= Dygraph
.MONTHLY
) {
1911 return date
.strftime('%b %y');
1913 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1914 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1915 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1917 return Dygraph
.hmsString_(date
.getTime());
1923 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1924 * @param {Number} date The JavaScript date (ms since epoch)
1925 * @return {String} A date of the form "YYYY/MM/DD"
1928 Dygraph
.dateString_
= function(date
) {
1929 var zeropad
= Dygraph
.zeropad
;
1930 var d
= new Date(date
);
1933 var year
= "" + d
.getFullYear();
1934 // Get a 0 padded month string
1935 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1936 // Get a 0 padded day string
1937 var day
= zeropad(d
.getDate());
1940 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1941 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1943 return year
+ "/" + month + "/" + day
+ ret
;
1947 * Round a number to the specified number of digits past the decimal point.
1948 * @param {Number} num The number to round
1949 * @param {Number} places The number of decimals to which to round
1950 * @return {Number} The rounded number
1953 Dygraph
.round_
= function(num
, places
) {
1954 var shift
= Math
.pow(10, places
);
1955 return Math
.round(num
* shift
)/shift
;
1959 * Fires when there's data available to be graphed.
1960 * @param {String} data Raw CSV data to be plotted
1963 Dygraph
.prototype.loadedEvent_
= function(data
) {
1964 this.rawData_
= this.parseCSV_(data
);
1968 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1969 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1970 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1973 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1976 Dygraph
.prototype.addXTicks_
= function() {
1977 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1979 if (this.dateWindow_
) {
1980 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1982 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1985 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
1986 this.layout_
.updateOptions({xTicks
: xTicks
});
1989 // Time granularity enumeration
1990 Dygraph
.SECONDLY
= 0;
1991 Dygraph
.TWO_SECONDLY
= 1;
1992 Dygraph
.FIVE_SECONDLY
= 2;
1993 Dygraph
.TEN_SECONDLY
= 3;
1994 Dygraph
.THIRTY_SECONDLY
= 4;
1995 Dygraph
.MINUTELY
= 5;
1996 Dygraph
.TWO_MINUTELY
= 6;
1997 Dygraph
.FIVE_MINUTELY
= 7;
1998 Dygraph
.TEN_MINUTELY
= 8;
1999 Dygraph
.THIRTY_MINUTELY
= 9;
2000 Dygraph
.HOURLY
= 10;
2001 Dygraph
.TWO_HOURLY
= 11;
2002 Dygraph
.SIX_HOURLY
= 12;
2004 Dygraph
.WEEKLY
= 14;
2005 Dygraph
.MONTHLY
= 15;
2006 Dygraph
.QUARTERLY
= 16;
2007 Dygraph
.BIANNUAL
= 17;
2008 Dygraph
.ANNUAL
= 18;
2009 Dygraph
.DECADAL
= 19;
2010 Dygraph
.CENTENNIAL
= 20;
2011 Dygraph
.NUM_GRANULARITIES
= 21;
2013 Dygraph
.SHORT_SPACINGS
= [];
2014 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
2015 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
2016 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
2017 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
2018 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
2019 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
2020 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
2021 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
2022 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
2023 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
2024 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
2025 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
2026 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
2027 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
2028 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
2032 // If we used this time granularity, how many ticks would there be?
2033 // This is only an approximation, but it's generally good enough.
2035 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2036 if (granularity
< Dygraph
.MONTHLY
) {
2037 // Generate one tick mark for every fixed interval of time.
2038 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2039 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2041 var year_mod
= 1; // e.g. to only print one point every 10 years.
2042 var num_months
= 12;
2043 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2044 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2045 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2046 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2047 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2049 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2050 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2051 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2057 // Construct an x-axis of nicely-formatted times on meaningful boundaries
2058 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2060 // Returns an array containing {v: millis, label: label} dictionaries.
2062 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2063 var formatter
= this.attr_("xAxisLabelFormatter");
2065 if (granularity
< Dygraph
.MONTHLY
) {
2066 // Generate one tick mark for every fixed interval of time.
2067 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2068 var format
= '%d%b'; // e.g. "1Jan"
2070 // Find a time less than start_time which occurs on a "nice" time boundary
2071 // for this granularity.
2072 var g
= spacing
/ 1000;
2073 var d
= new Date(start_time
);
2074 if (g
<= 60) { // seconds
2075 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2079 if (g
<= 60) { // minutes
2080 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2085 if (g
<= 24) { // days
2086 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2091 if (g
== 7) { // one week
2092 d
.setDate(d
.getDate() - d
.getDay());
2097 start_time
= d
.getTime();
2099 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2100 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2103 // Display a tick mark on the first of a set of months of each year.
2104 // Years get a tick mark iff y % year_mod == 0. This is useful for
2105 // displaying a tick mark once every 10 years, say, on long time scales.
2107 var year_mod
= 1; // e.g. to only print one point every 10 years.
2109 if (granularity
== Dygraph
.MONTHLY
) {
2110 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2111 } else if (granularity
== Dygraph
.QUARTERLY
) {
2112 months
= [ 0, 3, 6, 9 ];
2113 } else if (granularity
== Dygraph
.BIANNUAL
) {
2115 } else if (granularity
== Dygraph
.ANNUAL
) {
2117 } else if (granularity
== Dygraph
.DECADAL
) {
2120 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2124 this.warn("Span of dates is too long");
2127 var start_year
= new Date(start_time
).getFullYear();
2128 var end_year
= new Date(end_time
).getFullYear();
2129 var zeropad
= Dygraph
.zeropad
;
2130 for (var i
= start_year
; i
<= end_year
; i
++) {
2131 if (i
% year_mod
!= 0) continue;
2132 for (var j
= 0; j
< months
.length
; j
++) {
2133 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2134 var t
= Dygraph
.dateStrToMillis(date_str
);
2135 if (t
< start_time
|| t
> end_time
) continue;
2136 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2146 * Add ticks to the x-axis based on a date range.
2147 * @param {Number} startDate Start of the date window (millis since epoch)
2148 * @param {Number} endDate End of the date window (millis since epoch)
2149 * @return {Array.<Object>} Array of {label, value} tuples.
2152 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2154 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2155 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2156 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2163 return self
.GetXAxis(startDate
, endDate
, chosen
);
2165 // TODO(danvk): signal error.
2169 // This is a list of human-friendly values at which to show tick marks on a log
2170 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2171 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2172 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2173 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2175 for (var power
= -39; power
<= 39; power
++) {
2176 var range
= Math
.pow(10, power
);
2177 for (var mult
= 1; mult
<= 9; mult
++) {
2178 var val
= range
* mult
;
2185 // val is the value to search for
2186 // arry is the value over which to search
2187 // if abs > 0, find the lowest entry greater than val
2188 // if abs < 0, find the highest entry less than val
2189 // if abs == 0, find the entry that equals val.
2190 // Currently does not work when val is outside the range of arry's values.
2191 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2192 if (low
== null || high
== null) {
2194 high
= arry
.length
- 1;
2202 var validIndex
= function(idx
) {
2203 return idx
>= 0 && idx
< arry
.length
;
2205 var mid
= parseInt((low
+ high
) / 2);
2206 var element
= arry
[mid
];
2207 if (element
== val
) {
2210 if (element
> val
) {
2212 // Accept if element > val, but also if prior element < val.
2214 if (validIndex(idx
) && arry
[idx
] < val
) {
2218 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2220 if (element
< val
) {
2222 // Accept if element < val, but also if prior element > val.
2224 if (validIndex(idx
) && arry
[idx
] > val
) {
2228 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2233 * Add ticks when the x axis has numbers on it (instead of dates)
2234 * TODO(konigsberg): Update comment.
2236 * @param {Number} minV minimum value
2237 * @param {Number} maxV maximum value
2239 * @param {function} attribute accessor function.
2240 * @return {Array.<Object>} Array of {label, value} tuples.
2243 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2244 var attr
= function(k
) {
2245 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2246 return self
.attr_(k
);
2251 for (var i
= 0; i
< vals
.length
; i
++) {
2252 ticks
.push({v
: vals
[i
]});
2255 if (axis_props
&& attr("logscale")) {
2256 var pixelsPerTick
= attr('pixelsPerYLabel');
2257 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2258 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2259 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2260 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2265 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2267 // Count the number of tick values would appear, if we can get at least
2268 // nTicks / 4 accept them
.
2269 var lastDisplayed
= null;
2270 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2271 var axisId
= axis_props
.yAxisId
;
2272 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2273 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2274 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2275 var tick
= { v
: tickValue
};
2276 if (lastDisplayed
== null) {
2278 tickValue
: tickValue
,
2282 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2284 tickValue
: tickValue
,
2293 // Since we went in backwards order.
2298 // ticks.length won't be 0 if the log scale function finds values to insert.
2299 if (ticks
.length
== 0) {
2301 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2302 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2303 // The first spacing greater than pixelsPerYLabel is what we use.
2304 // TODO(danvk): version that works on a log scale.
2305 if (attr("labelsKMG2")) {
2306 var mults
= [1, 2, 4, 8];
2308 var mults
= [1, 2, 5];
2310 var scale
, low_val
, high_val
, nTicks
;
2311 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2312 var pixelsPerTick
= attr('pixelsPerYLabel');
2313 for (var i
= -10; i
< 50; i
++) {
2314 if (attr("labelsKMG2")) {
2315 var base_scale
= Math
.pow(16, i
);
2317 var base_scale
= Math
.pow(10, i
);
2319 for (var j
= 0; j
< mults
.length
; j
++) {
2320 scale
= base_scale
* mults
[j
];
2321 low_val
= Math
.floor(minV
/ scale
) * scale
;
2322 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2323 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2324 var spacing
= self
.height_
/ nTicks
;
2325 // wish I could break out of both loops at once...
2326 if (spacing
> pixelsPerTick
) break;
2328 if (spacing
> pixelsPerTick
) break;
2331 // Construct the set of ticks.
2332 // Allow reverse y-axis if it's explicitly requested.
2333 if (low_val
> high_val
) scale
*= -1;
2334 for (var i
= 0; i
< nTicks
; i
++) {
2335 var tickV
= low_val
+ i
* scale
;
2336 ticks
.push( {v
: tickV
} );
2341 // Add formatted labels to the ticks.
2344 if (attr("labelsKMB")) {
2346 k_labels
= [ "K", "M", "B", "T" ];
2348 if (attr("labelsKMG2")) {
2349 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2351 k_labels
= [ "k", "M", "G", "T" ];
2353 var formatter
= attr('yAxisLabelFormatter') ?
2354 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2356 // Add labels to the ticks.
2357 for (var i
= 0; i
< ticks
.length
; i
++) {
2358 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2359 var tickV
= ticks
[i
].v
;
2360 var absTickV
= Math
.abs(tickV
);
2361 var label
= formatter(tickV
, self
);
2362 if (k_labels
.length
> 0) {
2363 // Round up to an appropriate unit.
2365 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2366 if (absTickV
>= n
) {
2367 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
2372 ticks
[i
].label
= label
;
2378 // Computes the range of the data series (including confidence intervals).
2379 // series is either [ [x1, y1], [x2, y2], ... ] or
2380 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2381 // Returns [low, high]
2382 Dygraph
.prototype.extremeValues_
= function(series
) {
2383 var minY
= null, maxY
= null;
2385 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2387 // With custom bars, maxY is the max of the high values.
2388 for (var j
= 0; j
< series
.length
; j
++) {
2389 var y
= series
[j
][1][0];
2391 var low
= y
- series
[j
][1][1];
2392 var high
= y
+ series
[j
][1][2];
2393 if (low
> y
) low
= y
; // this can happen with custom bars,
2394 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2395 if (maxY
== null || high
> maxY
) {
2398 if (minY
== null || low
< minY
) {
2403 for (var j
= 0; j
< series
.length
; j
++) {
2404 var y
= series
[j
][1];
2405 if (y
=== null || isNaN(y
)) continue;
2406 if (maxY
== null || y
> maxY
) {
2409 if (minY
== null || y
< minY
) {
2415 return [minY
, maxY
];
2419 * This function is called once when the chart's data is changed or the options
2420 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2421 * idea is that values derived from the chart's data can be computed here,
2422 * rather than every time the chart is drawn. This includes things like the
2423 * number of axes, rolling averages, etc.
2425 Dygraph
.prototype.predraw_
= function() {
2426 // TODO(danvk): move more computations out of drawGraph_ and into here.
2427 this.computeYAxes_();
2429 // Create a new plotter.
2430 if (this.plotter_
) this.plotter_
.clear();
2431 this.plotter_
= new DygraphCanvasRenderer(this,
2432 this.hidden_
, this.layout_
,
2433 this.renderOptions_
);
2435 // The roller sits in the bottom left corner of the chart. We don't know where
2436 // this will be until the options are available, so it's positioned here.
2437 this.createRollInterface_();
2439 // Same thing applies for the labelsDiv. It's right edge should be flush with
2440 // the right edge of the charting area (which may not be the same as the right
2441 // edge of the div, if we have two y-axes.
2442 this.positionLabelsDiv_();
2444 // If the data or options have changed, then we'd better redraw.
2449 * Update the graph with new data. This method is called when the viewing area
2450 * has changed. If the underlying data or options have changed, predraw_ will
2451 * be called before drawGraph_ is called.
2454 Dygraph
.prototype.drawGraph_
= function() {
2455 var data
= this.rawData_
;
2457 // This is used to set the second parameter to drawCallback, below.
2458 var is_initial_draw
= this.is_initial_draw_
;
2459 this.is_initial_draw_
= false;
2461 var minY
= null, maxY
= null;
2462 this.layout_
.removeAllDatasets();
2464 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2466 // Loop over the fields (series). Go from the last to the first,
2467 // because if they're stacked that's how we accumulate the values.
2469 var cumulative_y
= []; // For stacked series.
2472 var extremes
= {}; // series name -> [low, high]
2474 // Loop over all fields and create datasets
2475 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2476 if (!this.visibility()[i
- 1]) continue;
2478 var seriesName
= this.attr_("labels")[i
];
2479 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2480 var logScale
= this.attr_('logscale', i
);
2483 for (var j
= 0; j
< data
.length
; j
++) {
2484 var date
= data
[j
][0];
2485 var point
= data
[j
][i
];
2487 // On the log scale, points less than zero do not exist.
2488 // This will create a gap in the chart. Note that this ignores
2489 // connectSeparatedPoints.
2493 series
.push([date
, point
]);
2495 if (point
!= null || !connectSeparatedPoints
) {
2496 series
.push([date
, point
]);
2501 // TODO(danvk): move this into predraw_. It's insane to do it here.
2502 series
= this.rollingAverage(series
, this.rollPeriod_
);
2504 // Prune down to the desired range, if necessary (for zooming)
2505 // Because there can be lines going to points outside of the visible area,
2506 // we actually prune to visible points, plus one on either side.
2507 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2508 if (this.dateWindow_
) {
2509 var low
= this.dateWindow_
[0];
2510 var high
= this.dateWindow_
[1];
2512 // TODO(danvk): do binary search instead of linear search.
2513 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2514 var firstIdx
= null, lastIdx
= null;
2515 for (var k
= 0; k
< series
.length
; k
++) {
2516 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2519 if (series
[k
][0] <= high
) {
2523 if (firstIdx
=== null) firstIdx
= 0;
2524 if (firstIdx
> 0) firstIdx
--;
2525 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2526 if (lastIdx
< series
.length
- 1) lastIdx
++;
2527 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2528 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2529 pruned
.push(series
[k
]);
2533 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2536 var seriesExtremes
= this.extremeValues_(series
);
2539 for (var j
=0; j
<series
.length
; j
++) {
2540 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2543 } else if (this.attr_("stackedGraph")) {
2544 var l
= series
.length
;
2546 for (var j
= 0; j
< l
; j
++) {
2547 // If one data set has a NaN, let all subsequent stacked
2548 // sets inherit the NaN -- only start at 0 for the first set.
2549 var x
= series
[j
][0];
2550 if (cumulative_y
[x
] === undefined
) {
2551 cumulative_y
[x
] = 0;
2554 actual_y
= series
[j
][1];
2555 cumulative_y
[x
] += actual_y
;
2557 series
[j
] = [x
, cumulative_y
[x
]]
2559 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2560 seriesExtremes
[1] = cumulative_y
[x
];
2562 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2563 seriesExtremes
[0] = cumulative_y
[x
];
2567 extremes
[seriesName
] = seriesExtremes
;
2569 datasets
[i
] = series
;
2572 for (var i
= 1; i
< datasets
.length
; i
++) {
2573 if (!this.visibility()[i
- 1]) continue;
2574 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2577 this.computeYAxisRanges_(extremes
);
2578 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2579 seriesToAxisMap
: this.seriesToAxisMap_
2583 // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
2584 var tmp_zoomed_x
= this.zoomed_x_
;
2585 // Tell PlotKit to use this new data and render itself
2586 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2587 this.zoomed_x_
= tmp_zoomed_x
;
2588 this.layout_
.evaluateWithError();
2589 this.plotter_
.clear();
2590 this.plotter_
.render();
2591 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2592 this.canvas_
.height
);
2594 if (is_initial_draw
) {
2595 // Generate a static legend before any particular point is selected.
2596 this.setLegendHTML_();
2598 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2599 this.lastx_
= this.selPoints_
[0].xval
;
2600 this.updateSelection_();
2602 this.clearSelection();
2606 if (this.attr_("drawCallback") !== null) {
2607 this.attr_("drawCallback")(this, is_initial_draw
);
2612 * Determine properties of the y-axes which are independent of the data
2613 * currently being displayed. This includes things like the number of axes and
2614 * the style of the axes. It does not include the range of each axis and its
2616 * This fills in this.axes_ and this.seriesToAxisMap_.
2617 * axes_ = [ { options } ]
2618 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2619 * indices are into the axes_ array.
2621 Dygraph
.prototype.computeYAxes_
= function() {
2623 if (this.axes_
!= undefined
) {
2624 // Preserve valueWindow settings.
2626 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2627 valueWindows
.push(this.axes_
[index
].valueWindow
);
2631 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2632 this.seriesToAxisMap_
= {};
2634 // Get a list of series names.
2635 var labels
= this.attr_("labels");
2637 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2639 // all options which could be applied per-axis:
2647 'axisLabelFontSize',
2652 // Copy global axis options over to the first axis.
2653 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2654 var k
= axisOptions
[i
];
2655 var v
= this.attr_(k
);
2656 if (v
) this.axes_
[0][k
] = v
;
2659 // Go through once and add all the axes.
2660 for (var seriesName
in series
) {
2661 if (!series
.hasOwnProperty(seriesName
)) continue;
2662 var axis
= this.attr_("axis", seriesName
);
2664 this.seriesToAxisMap_
[seriesName
] = 0;
2667 if (typeof(axis
) == 'object') {
2668 // Add a new axis, making a copy of its per-axis options.
2670 Dygraph
.update(opts
, this.axes_
[0]);
2671 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2672 var yAxisId
= this.axes_
.length
;
2673 opts
.yAxisId
= yAxisId
;
2675 Dygraph
.update(opts
, axis
);
2676 this.axes_
.push(opts
);
2677 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2681 // Go through one more time and assign series to an axis defined by another
2682 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2683 for (var seriesName
in series
) {
2684 if (!series
.hasOwnProperty(seriesName
)) continue;
2685 var axis
= this.attr_("axis", seriesName
);
2686 if (typeof(axis
) == 'string') {
2687 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2688 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2689 "series " + axis
+ ", which does not define its own axis.");
2692 var idx
= this.seriesToAxisMap_
[axis
];
2693 this.seriesToAxisMap_
[seriesName
] = idx
;
2697 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2698 // this last so that hiding the first series doesn't destroy the axis
2699 // properties of the primary axis.
2700 var seriesToAxisFiltered
= {};
2701 var vis
= this.visibility();
2702 for (var i
= 1; i
< labels
.length
; i
++) {
2704 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2706 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2708 if (valueWindows
!= undefined
) {
2709 // Restore valueWindow settings.
2710 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2711 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2717 * Returns the number of y-axes on the chart.
2718 * @return {Number} the number of axes.
2720 Dygraph
.prototype.numAxes
= function() {
2722 for (var series
in this.seriesToAxisMap_
) {
2723 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2724 var idx
= this.seriesToAxisMap_
[series
];
2725 if (idx
> last_axis
) last_axis
= idx
;
2727 return 1 + last_axis
;
2731 * Determine the value range and tick marks for each axis.
2732 * @param {Object} extremes A mapping from seriesName -> [low, high]
2733 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2735 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2736 // Build a map from axis number -> [list of series names]
2737 var seriesForAxis
= [];
2738 for (var series
in this.seriesToAxisMap_
) {
2739 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2740 var idx
= this.seriesToAxisMap_
[series
];
2741 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2742 seriesForAxis
[idx
].push(series
);
2745 // Compute extreme values, a span and tick marks for each axis.
2746 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2747 var axis
= this.axes_
[i
];
2749 if (!seriesForAxis
[i
]) {
2750 // If no series are defined or visible then use a reasonable default
2751 axis
.extremeRange
= [0, 1];
2753 // Calculate the extremes of extremes.
2754 var series
= seriesForAxis
[i
];
2755 var minY
= Infinity
; // extremes[series[0]][0];
2756 var maxY
= -Infinity
; // extremes[series[0]][1];
2757 var extremeMinY
, extremeMaxY
;
2758 for (var j
= 0; j
< series
.length
; j
++) {
2759 // Only use valid extremes to stop null data series' from corrupting the scale.
2760 extremeMinY
= extremes
[series
[j
]][0];
2761 if (extremeMinY
!= null) {
2762 minY
= Math
.min(extremeMinY
, minY
);
2764 extremeMaxY
= extremes
[series
[j
]][1];
2765 if (extremeMaxY
!= null) {
2766 maxY
= Math
.max(extremeMaxY
, maxY
);
2769 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2771 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2772 if (minY
== Infinity
) minY
= 0;
2773 if (maxY
== -Infinity
) maxY
= 0;
2775 // Add some padding and round up to an integer to be human-friendly.
2776 var span
= maxY
- minY
;
2777 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2778 if (span
== 0) { span
= maxY
; }
2782 if (axis
.logscale
) {
2783 var maxAxisY
= maxY
+ 0.1 * span
;
2784 var minAxisY
= minY
;
2786 var maxAxisY
= maxY
+ 0.1 * span
;
2787 var minAxisY
= minY
- 0.1 * span
;
2789 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2790 if (!this.attr_("avoidMinZero")) {
2791 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2792 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2795 if (this.attr_("includeZero")) {
2796 if (maxY
< 0) maxAxisY
= 0;
2797 if (minY
> 0) minAxisY
= 0;
2800 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2802 if (axis
.valueWindow
) {
2803 // This is only set if the user has zoomed on the y-axis. It is never set
2804 // by a user. It takes precedence over axis.valueRange because, if you set
2805 // valueRange, you'd still expect to be able to pan.
2806 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2807 } else if (axis
.valueRange
) {
2808 // This is a user-set value range for this axis.
2809 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2811 axis
.computedValueRange
= axis
.extremeRange
;
2814 // Add ticks. By default, all axes inherit the tick positions of the
2815 // primary axis. However, if an axis is specifically marked as having
2816 // independent ticks, then that is permissible as well.
2817 if (i
== 0 || axis
.independentTicks
) {
2819 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2820 axis
.computedValueRange
[1],
2824 var p_axis
= this.axes_
[0];
2825 var p_ticks
= p_axis
.ticks
;
2826 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2827 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2828 var tick_values
= [];
2829 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2830 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2831 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2832 tick_values
.push(y_val
);
2836 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2837 axis
.computedValueRange
[1],
2838 this, axis
, tick_values
);
2844 * Calculates the rolling average of a data set.
2845 * If originalData is [label, val], rolls the average of those.
2846 * If originalData is [label, [, it's interpreted as [value, stddev]
2847 * and the roll is returned in the same form, with appropriately reduced
2848 * stddev for each value.
2849 * Note that this is where fractional input (i.e. '5/10') is converted into
2851 * @param {Array} originalData The data in the appropriate format (see above)
2852 * @param {Number} rollPeriod The number of points over which to average the
2855 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2856 if (originalData
.length
< 2)
2857 return originalData
;
2858 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2859 var rollingData
= [];
2860 var sigma
= this.attr_("sigma");
2862 if (this.fractions_
) {
2864 var den
= 0; // numerator/denominator
2866 for (var i
= 0; i
< originalData
.length
; i
++) {
2867 num
+= originalData
[i
][1][0];
2868 den
+= originalData
[i
][1][1];
2869 if (i
- rollPeriod
>= 0) {
2870 num
-= originalData
[i
- rollPeriod
][1][0];
2871 den
-= originalData
[i
- rollPeriod
][1][1];
2874 var date
= originalData
[i
][0];
2875 var value
= den
? num
/ den
: 0.0;
2876 if (this.attr_("errorBars")) {
2877 if (this.wilsonInterval_
) {
2878 // For more details on this confidence interval, see:
2879 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2881 var p
= value
< 0 ? 0 : value
, n
= den
;
2882 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2883 var denom
= 1 + sigma
* sigma
/ den
;
2884 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2885 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2886 rollingData
[i
] = [date
,
2887 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2889 rollingData
[i
] = [date
, [0, 0, 0]];
2892 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2893 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2896 rollingData
[i
] = [date
, mult
* value
];
2899 } else if (this.attr_("customBars")) {
2904 for (var i
= 0; i
< originalData
.length
; i
++) {
2905 var data
= originalData
[i
][1];
2907 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2909 if (y
!= null && !isNaN(y
)) {
2915 if (i
- rollPeriod
>= 0) {
2916 var prev
= originalData
[i
- rollPeriod
];
2917 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2924 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2925 1.0 * (mid
- low
) / count
,
2926 1.0 * (high
- mid
) / count
]];
2929 // Calculate the rolling average for the first rollPeriod - 1 points where
2930 // there is not enough data to roll over the full number of points
2931 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2932 if (!this.attr_("errorBars")){
2933 if (rollPeriod
== 1) {
2934 return originalData
;
2937 for (var i
= 0; i
< originalData
.length
; i
++) {
2940 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2941 var y
= originalData
[j
][1];
2942 if (y
== null || isNaN(y
)) continue;
2944 sum
+= originalData
[j
][1];
2947 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2949 rollingData
[i
] = [originalData
[i
][0], null];
2954 for (var i
= 0; i
< originalData
.length
; i
++) {
2958 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2959 var y
= originalData
[j
][1][0];
2960 if (y
== null || isNaN(y
)) continue;
2962 sum
+= originalData
[j
][1][0];
2963 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2966 var stddev
= Math
.sqrt(variance
) / num_ok
;
2967 rollingData
[i
] = [originalData
[i
][0],
2968 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2970 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2980 * Parses a date, returning the number of milliseconds since epoch. This can be
2981 * passed in as an xValueParser in the Dygraph constructor.
2982 * TODO(danvk): enumerate formats that this understands.
2983 * @param {String} A date in YYYYMMDD format.
2984 * @return {Number} Milliseconds since epoch.
2987 Dygraph
.dateParser
= function(dateStr
, self
) {
2990 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2991 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2992 while (dateStrSlashed
.search("-") != -1) {
2993 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2995 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2996 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2997 // TODO(danvk): remove support for this format. It's confusing.
2998 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2999 + "/" + dateStr
.substr(6,2);
3000 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3002 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3003 // "2009/07/12 12:34:56"
3004 d
= Dygraph
.dateStrToMillis(dateStr
);
3007 if (!d
|| isNaN(d
)) {
3008 self
.error("Couldn't parse " + dateStr
+ " as a date");
3014 * Detects the type of the str (date or numeric) and sets the various
3015 * formatting attributes in this.attrs_ based on this type.
3016 * @param {String} str An x value.
3019 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3021 if (str
.indexOf('-') > 0 ||
3022 str
.indexOf('/') >= 0 ||
3023 isNaN(parseFloat(str
))) {
3025 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3026 // TODO(danvk): remove support for this format.
3031 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3032 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3033 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3034 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3036 // TODO(danvk): use Dygraph.numberFormatter here?
3037 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3038 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3039 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3040 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3045 * Parses the value as a floating point number. This is like the parseFloat()
3046 * built-in, but with a few differences:
3047 * - the empty string is parsed as null, rather than NaN.
3048 * - if the string cannot be parsed at all, an error is logged.
3049 * If the string can't be parsed, this method returns null.
3050 * @param {String} x The string to be parsed
3051 * @param {Number} opt_line_no The line number from which the string comes.
3052 * @param {String} opt_line The text of the line from which the string comes.
3056 // Parse the x as a float or return null if it's not a number.
3057 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3058 var val
= parseFloat(x
);
3059 if (!isNaN(val
)) return val
;
3061 // Try to figure out what happeend.
3062 // If the value is the empty string, parse it as null.
3063 if (/^ *$/.test(x
)) return null;
3065 // If it was actually "NaN", return it as NaN.
3066 if (/^ *nan *$/i.test(x
)) return NaN
;
3068 // Looks like a parsing error.
3069 var msg
= "Unable to parse '" + x
+ "' as a number";
3070 if (opt_line
!== null && opt_line_no
!== null) {
3071 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3079 * Parses a string in a special csv format. We expect a csv file where each
3080 * line is a date point, and the first field in each line is the date string.
3081 * We also expect that all remaining fields represent series.
3082 * if the errorBars attribute is set, then interpret the fields as:
3083 * date, series1, stddev1, series2, stddev2, ...
3084 * @param {Array.<Object>} data See above.
3087 * @return Array.<Object> An array with one entry for each row. These entries
3088 * are an array of cells in that row. The first entry is the parsed x-value for
3089 * the row. The second, third, etc. are the y-values. These can take on one of
3090 * three forms, depending on the CSV and constructor parameters:
3092 * 2. [ value, stddev ]
3093 * 3. [ low value, center value, high value ]
3095 Dygraph
.prototype.parseCSV_
= function(data
) {
3097 var lines
= data
.split("\n");
3099 // Use the default delimiter or fall back to a tab if that makes sense.
3100 var delim
= this.attr_('delimiter');
3101 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3106 if (this.labelsFromCSV_
) {
3108 this.attrs_
.labels
= lines
[0].split(delim
);
3113 var defaultParserSet
= false; // attempt to auto-detect x value type
3114 var expectedCols
= this.attr_("labels").length
;
3115 var outOfOrder
= false;
3116 for (var i
= start
; i
< lines
.length
; i
++) {
3117 var line
= lines
[i
];
3119 if (line
.length
== 0) continue; // skip blank lines
3120 if (line
[0] == '#') continue; // skip comment lines
3121 var inFields
= line
.split(delim
);
3122 if (inFields
.length
< 2) continue;
3125 if (!defaultParserSet
) {
3126 this.detectTypeFromString_(inFields
[0]);
3127 xParser
= this.attr_("xValueParser");
3128 defaultParserSet
= true;
3130 fields
[0] = xParser(inFields
[0], this);
3132 // If fractions are expected, parse the numbers as "A/B
"
3133 if (this.fractions_) {
3134 for (var j = 1; j < inFields.length; j++) {
3135 // TODO(danvk): figure out an appropriate way to flag parse errors.
3136 var vals = inFields[j].split("/");
3137 if (vals.length != 2) {
3138 this.error('Expected fractional "num
/den
" values in CSV data ' +
3139 "but found a value
'" + inFields[j] + "' on line
" +
3140 (1 + i) + " ('" + line + "') which is not of
this form
.");
3143 fields[j] = [this.parseFloat_(vals[0], i, line),
3144 this.parseFloat_(vals[1], i, line)];
3147 } else if (this.attr_("errorBars
")) {
3148 // If there are error bars, values are (value, stddev) pairs
3149 if (inFields.length % 2 != 1) {
3150 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3151 'but line ' + (1 + i) + ' has an odd number of values (' +
3152 (inFields.length - 1) + "): '" + line + "'");
3154 for (var j = 1; j < inFields.length; j += 2) {
3155 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3156 this.parseFloat_(inFields[j + 1], i, line)];
3158 } else if (this.attr_("customBars
")) {
3159 // Bars are a low;center;high tuple
3160 for (var j = 1; j < inFields.length; j++) {
3161 var val = inFields[j];
3162 if (/^ *$/.test(val)) {
3163 fields[j] = [null, null, null];
3165 var vals = val.split(";");
3166 if (vals.length == 3) {
3167 fields[j] = [ this.parseFloat_(vals[0], i, line),
3168 this.parseFloat_(vals[1], i, line),
3169 this.parseFloat_(vals[2], i, line) ];
3171 this.warning('When using customBars, values must be either blank ' +
3172 'or "low
;center
;high
" tuples (got "' + val +
3173 '" on line ' + (1+i));
3178 // Values are just numbers
3179 for (var j = 1; j < inFields.length; j++) {
3180 fields[j] = this.parseFloat_(inFields[j], i, line);
3183 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3187 if (fields.length != expectedCols) {
3188 this.error("Number of columns
in line
" + i + " (" + fields.length +
3189 ") does not agree
with number of
labels (" + expectedCols +
3193 // If the user specified the 'labels' option and none of the cells of the
3194 // first row parsed correctly, then they probably double-specified the
3195 // labels. We go with the values set in the option, discard this row and
3196 // log a warning to the JS console.
3197 if (i == 0 && this.attr_('labels')) {
3198 var all_null = true;
3199 for (var j = 0; all_null && j < fields.length; j++) {
3200 if (fields[j]) all_null = false;
3203 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3204 "CSV
data ('" + line + "') appears to also contain labels
. " +
3205 "Will drop the CSV labels and
use the option labels
.");
3213 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3214 ret.sort(function(a,b) { return a[0] - b[0] });
3221 * The user has provided their data as a pre-packaged JS array. If the x values
3222 * are numeric, this is the same as dygraphs' internal format. If the x values
3223 * are dates, we need to convert them from Date objects to ms since epoch.
3224 * @param {Array.<Object>} data
3225 * @return {Array.<Object>} data with numeric x values.
3227 Dygraph.prototype.parseArray_ = function(data) {
3228 // Peek at the first x value to see if it's numeric.
3229 if (data.length == 0) {
3230 this.error("Can
't plot empty data set");
3233 if (data[0].length == 0) {
3234 this.error("Data set cannot contain an empty row");
3238 if (this.attr_("labels") == null) {
3239 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3240 "in the options parameter");
3241 this.attrs_.labels = [ "X" ];
3242 for (var i = 1; i < data[0].length; i++) {
3243 this.attrs_.labels.push("Y" + i);
3247 if (Dygraph.isDateLike(data[0][0])) {
3248 // Some intelligent defaults for a date x-axis.
3249 this.attrs_.xValueFormatter = Dygraph.dateString_;
3250 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3251 this.attrs_.xTicker = Dygraph.dateTicker;
3253 // Assume they're all dates
.
3254 var parsedData
= Dygraph
.clone(data
);
3255 for (var i
= 0; i
< data
.length
; i
++) {
3256 if (parsedData
[i
].length
== 0) {
3257 this.error("Row " + (1 + i
) + " of data is empty");
3260 if (parsedData
[i
][0] == null
3261 || typeof(parsedData
[i
][0].getTime
) != 'function'
3262 || isNaN(parsedData
[i
][0].getTime())) {
3263 this.error("x value in row " + (1 + i
) + " is not a Date");
3266 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3270 // Some intelligent defaults for a numeric x-axis.
3271 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3272 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3278 * Parses a DataTable object from gviz.
3279 * The data is expected to have a first column that is either a date or a
3280 * number. All subsequent columns must be numbers. If there is a clear mismatch
3281 * between this.xValueParser_ and the type of the first column, it will be
3282 * fixed. Fills out rawData_.
3283 * @param {Array.<Object>} data See above.
3286 Dygraph
.prototype.parseDataTable_
= function(data
) {
3287 var cols
= data
.getNumberOfColumns();
3288 var rows
= data
.getNumberOfRows();
3290 var indepType
= data
.getColumnType(0);
3291 if (indepType
== 'date' || indepType
== 'datetime') {
3292 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3293 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3294 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3295 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3296 } else if (indepType
== 'number') {
3297 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3298 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3299 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3300 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3302 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3303 "column 1 of DataTable input (Got '" + indepType
+ "')");
3307 // Array of the column indices which contain data (and not annotations).
3309 var annotationCols
= {}; // data index -> [annotation cols]
3310 var hasAnnotations
= false;
3311 for (var i
= 1; i
< cols
; i
++) {
3312 var type
= data
.getColumnType(i
);
3313 if (type
== 'number') {
3315 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3316 // This is OK -- it's an annotation column.
3317 var dataIdx
= colIdx
[colIdx
.length
- 1];
3318 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3319 annotationCols
[dataIdx
] = [i
];
3321 annotationCols
[dataIdx
].push(i
);
3323 hasAnnotations
= true;
3325 this.error("Only 'number' is supported as a dependent type with Gviz." +
3326 " 'string' is only supported if displayAnnotations is true");
3330 // Read column labels
3331 // TODO(danvk): add support back for errorBars
3332 var labels
= [data
.getColumnLabel(0)];
3333 for (var i
= 0; i
< colIdx
.length
; i
++) {
3334 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3335 if (this.attr_("errorBars")) i
+= 1;
3337 this.attrs_
.labels
= labels
;
3338 cols
= labels
.length
;
3341 var outOfOrder
= false;
3342 var annotations
= [];
3343 for (var i
= 0; i
< rows
; i
++) {
3345 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3346 data
.getValue(i
, 0) === null) {
3347 this.warn("Ignoring row " + i
+
3348 " of DataTable because of undefined or null first column.");
3352 if (indepType
== 'date' || indepType
== 'datetime') {
3353 row
.push(data
.getValue(i
, 0).getTime());
3355 row
.push(data
.getValue(i
, 0));
3357 if (!this.attr_("errorBars")) {
3358 for (var j
= 0; j
< colIdx
.length
; j
++) {
3359 var col
= colIdx
[j
];
3360 row
.push(data
.getValue(i
, col
));
3361 if (hasAnnotations
&&
3362 annotationCols
.hasOwnProperty(col
) &&
3363 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3365 ann
.series
= data
.getColumnLabel(col
);
3367 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3369 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3370 if (k
) ann
.text
+= "\n";
3371 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3373 annotations
.push(ann
);
3377 // Strip out infinities, which give dygraphs problems later on.
3378 for (var j
= 0; j
< row
.length
; j
++) {
3379 if (!isFinite(row
[j
])) row
[j
] = null;
3382 for (var j
= 0; j
< cols
- 1; j
++) {
3383 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3386 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3393 this.warn("DataTable is out of order; order it correctly to speed loading.");
3394 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3396 this.rawData_
= ret
;
3398 if (annotations
.length
> 0) {
3399 this.setAnnotations(annotations
, true);
3403 // This is identical to JavaScript's built-in Date.parse() method, except that
3404 // it doesn't get replaced with an incompatible method by aggressive JS
3405 // libraries like MooTools or Joomla.
3406 Dygraph
.dateStrToMillis
= function(str
) {
3407 return new Date(str
).getTime();
3410 // These functions are all based on MochiKit.
3411 Dygraph
.update
= function (self
, o
) {
3412 if (typeof(o
) != 'undefined' && o
!== null) {
3414 if (o
.hasOwnProperty(k
)) {
3422 Dygraph
.isArrayLike
= function (o
) {
3423 var typ
= typeof(o
);
3425 (typ
!= 'object' && !(typ
== 'function' &&
3426 typeof(o
.item
) == 'function')) ||
3428 typeof(o
.length
) != 'number' ||
3436 Dygraph
.isDateLike
= function (o
) {
3437 if (typeof(o
) != "object" || o
=== null ||
3438 typeof(o
.getTime
) != 'function') {
3444 Dygraph
.clone
= function(o
) {
3445 // TODO(danvk): figure out how MochiKit's version works
3447 for (var i
= 0; i
< o
.length
; i
++) {
3448 if (Dygraph
.isArrayLike(o
[i
])) {
3449 r
.push(Dygraph
.clone(o
[i
]));
3459 * Get the CSV data. If it's in a function, call that function. If it's in a
3460 * file, do an XMLHttpRequest to get it.
3463 Dygraph
.prototype.start_
= function() {
3464 if (typeof this.file_
== 'function') {
3465 // CSV string. Pretend we got it via XHR.
3466 this.loadedEvent_(this.file_());
3467 } else if (Dygraph
.isArrayLike(this.file_
)) {
3468 this.rawData_
= this.parseArray_(this.file_
);
3470 } else if (typeof this.file_
== 'object' &&
3471 typeof this.file_
.getColumnRange
== 'function') {
3472 // must be a DataTable from gviz.
3473 this.parseDataTable_(this.file_
);
3475 } else if (typeof this.file_
== 'string') {
3476 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3477 if (this.file_
.indexOf('\n') >= 0) {
3478 this.loadedEvent_(this.file_
);
3480 var req
= new XMLHttpRequest();
3482 req
.onreadystatechange
= function () {
3483 if (req
.readyState
== 4) {
3484 if (req
.status
== 200) {
3485 caller
.loadedEvent_(req
.responseText
);
3490 req
.open("GET", this.file_
, true);
3494 this.error("Unknown data format: " + (typeof this.file_
));
3499 * Changes various properties of the graph. These can include:
3501 * <li>file: changes the source data for the graph</li>
3502 * <li>errorBars: changes whether the data contains stddev</li>
3505 * @param {Object} attrs The new properties and values
3507 Dygraph
.prototype.updateOptions
= function(attrs
) {
3508 // TODO(danvk): this is a mess. Rethink this function.
3509 if ('rollPeriod' in attrs
) {
3510 this.rollPeriod_
= attrs
.rollPeriod
;
3512 if ('dateWindow' in attrs
) {
3513 this.dateWindow_
= attrs
.dateWindow
;
3514 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3515 this.zoomed_x_
= attrs
.dateWindow
!= null;
3518 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3519 this.zoomed_y_
= attrs
.valueRange
!= null;
3522 // TODO(danvk): validate per-series options.
3527 // highlightCircleSize
3529 Dygraph
.update(this.user_attrs_
, attrs
);
3530 Dygraph
.update(this.renderOptions_
, attrs
);
3532 this.labelsFromCSV_
= (this.attr_("labels") == null);
3534 // TODO(danvk): this doesn't match the constructor logic
3535 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3536 if (attrs
['file']) {
3537 this.file_
= attrs
['file'];
3545 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3546 * containing div (which has presumably changed size since the dygraph was
3547 * instantiated. If the width/height are specified, the div will be resized.
3549 * This is far more efficient than destroying and re-instantiating a
3550 * Dygraph, since it doesn't have to reparse the underlying data.
3552 * @param {Number} width Width (in pixels)
3553 * @param {Number} height Height (in pixels)
3555 Dygraph
.prototype.resize
= function(width
, height
) {
3556 if (this.resize_lock
) {
3559 this.resize_lock
= true;
3561 if ((width
=== null) != (height
=== null)) {
3562 this.warn("Dygraph.resize() should be called with zero parameters or " +
3563 "two non-NULL parameters. Pretending it was zero.");
3564 width
= height
= null;
3567 // TODO(danvk): there should be a clear() method.
3568 this.maindiv_
.innerHTML
= "";
3569 this.attrs_
.labelsDiv
= null;
3572 this.maindiv_
.style
.width
= width
+ "px";
3573 this.maindiv_
.style
.height
= height
+ "px";
3574 this.width_
= width
;
3575 this.height_
= height
;
3577 this.width_
= this.maindiv_
.offsetWidth
;
3578 this.height_
= this.maindiv_
.offsetHeight
;
3581 this.createInterface_();
3584 this.resize_lock
= false;
3588 * Adjusts the number of points in the rolling average. Updates the graph to
3589 * reflect the new averaging period.
3590 * @param {Number} length Number of points over which to average the data.
3592 Dygraph
.prototype.adjustRoll
= function(length
) {
3593 this.rollPeriod_
= length
;
3598 * Returns a boolean array of visibility statuses.
3600 Dygraph
.prototype.visibility
= function() {
3601 // Do lazy-initialization, so that this happens after we know the number of
3603 if (!this.attr_("visibility")) {
3604 this.attrs_
["visibility"] = [];
3606 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3607 this.attr_("visibility").push(true);
3609 return this.attr_("visibility");
3613 * Changes the visiblity of a series.
3615 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3616 var x
= this.visibility();
3617 if (num
< 0 || num
>= x
.length
) {
3618 this.warn("invalid series number in setVisibility: " + num
);
3626 * Update the list of annotations and redraw the chart.
3628 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3629 // Only add the annotation CSS rule once we know it will be used.
3630 Dygraph
.addAnnotationRule();
3631 this.annotations_
= ann
;
3632 this.layout_
.setAnnotations(this.annotations_
);
3633 if (!suppressDraw
) {
3639 * Return the list of annotations.
3641 Dygraph
.prototype.annotations
= function() {
3642 return this.annotations_
;
3646 * Get the index of a series (column) given its name. The first column is the
3647 * x-axis, so the data series start with index 1.
3649 Dygraph
.prototype.indexFromSetName
= function(name
) {
3650 var labels
= this.attr_("labels");
3651 for (var i
= 0; i
< labels
.length
; i
++) {
3652 if (labels
[i
] == name
) return i
;
3657 Dygraph
.addAnnotationRule
= function() {
3658 if (Dygraph
.addedAnnotationCSS
) return;
3660 var rule
= "border: 1px solid black; " +
3661 "background-color: white; " +
3662 "text-align: center;";
3664 var styleSheetElement
= document
.createElement("style");
3665 styleSheetElement
.type
= "text/css";
3666 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3668 // Find the first style sheet that we can access.
3669 // We may not add a rule to a style sheet from another domain for security
3670 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3671 // adds its own style sheets from google.com.
3672 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3673 if (document
.styleSheets
[i
].disabled
) continue;
3674 var mysheet
= document
.styleSheets
[i
];
3676 if (mysheet
.insertRule
) { // Firefox
3677 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3678 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3679 } else if (mysheet
.addRule
) { // IE
3680 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3682 Dygraph
.addedAnnotationCSS
= true;
3685 // Was likely a security exception.
3689 this.warn("Unable to add default annotation CSS rule; display may be off.");
3693 * Create a new canvas element. This is more complex than a simple
3694 * document.createElement("canvas") because of IE and excanvas.
3696 Dygraph
.createCanvas
= function() {
3697 var canvas
= document
.createElement("canvas");
3699 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3700 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3701 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3709 * A wrapper around Dygraph that implements the gviz API.
3710 * @param {Object} container The DOM object the visualization should live in.
3712 Dygraph
.GVizChart
= function(container
) {
3713 this.container
= container
;
3716 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3717 // Clear out any existing dygraph.
3718 // TODO(danvk): would it make more sense to simply redraw using the current
3719 // date_graph object?
3720 this.container
.innerHTML
= '';
3721 if (typeof(this.date_graph
) != 'undefined') {
3722 this.date_graph
.destroy();
3725 this.date_graph
= new Dygraph(this.container
, data
, options
);
3729 * Google charts compatible setSelection
3730 * Only row selection is supported, all points in the row will be highlighted
3731 * @param {Array} array of the selected cells
3734 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3736 if (selection_array
.length
) {
3737 row
= selection_array
[0].row
;
3739 this.date_graph
.setSelection(row
);
3743 * Google charts compatible getSelection implementation
3744 * @return {Array} array of the selected cells
3747 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3750 var row
= this.date_graph
.getSelection();
3752 if (row
< 0) return selection
;
3755 for (var i
in this.date_graph
.layout_
.datasets
) {
3756 selection
.push({row
: row
, column
: col
});
3763 // Older pages may still use this name.
3764 DateGraph
= Dygraph
;
3766 // <REMOVE_FOR_COMBINED>
3767 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
3770 "default": "parseFloat() or Date.parse()*",
3771 "labels": ["CSV parsing"],
3772 "type": "function(str) -> number",
3773 "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."
3777 "labels": ["Data Line display"],
3779 "description": "If set, stack series on top of one another rather than drawing them independently."
3783 "labels": ["Data Line display"],
3785 "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."
3787 "labelsDivStyles": {
3789 "labels": ["Legend"],
3791 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
3795 "labels": ["Data Line display"],
3797 "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."
3801 "labels": ["Overall display"],
3803 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3807 "labels": ["Callbacks"],
3808 "type": "function(minDate, maxDate, yRanges)",
3809 "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."
3811 "pointClickCallback": {
3813 "labels": ["Callbacks", "Interactive Elements"],
3818 "default": "(see description)",
3819 "labels": ["Data Series Colors"],
3820 "type": "array<string>",
3821 "example": "['red', '#00FF00']",
3822 "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."
3824 "connectSeparatedPoints": {
3826 "labels": ["Data Line display"],
3828 "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."
3830 "highlightCallback": {
3832 "labels": ["Callbacks"],
3833 "type": "function(event, x, points,row)",
3834 "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>"
3838 "labels": ["Axis display"],
3840 "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"
3844 "labels": ["Error Bars", "Rolling Averages"],
3845 "type": "integer >= 1",
3846 "description": "Number of days over which to average data. Discussed extensively above."
3848 "unhighlightCallback": {
3850 "labels": ["Callbacks"],
3851 "type": "function(event)",
3852 "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."
3856 "labels": ["Axis display"],
3858 "description": "The size of the line to display next to each tick mark on x- or y-axes."
3860 "labelsSeparateLines": {
3862 "labels": ["Legend"],
3864 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
3866 "xValueFormatter": {
3867 "default": "(Round to 2 decimal places)",
3868 "labels": ["Axis display"],
3869 "type": "function(x)",
3870 "description": "Function to provide a custom display format for the X value for mouseover."
3872 "pixelsPerYLabel": {
3874 "labels": ["Axis display", "Grid"],
3876 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3878 "annotationMouseOverHandler": {
3880 "labels": ["Annotations"],
3881 "type": "function(annotation, point, dygraph, event)",
3882 "description": "If provided, this function is called whenever the user mouses over an annotation."
3884 "annotationMouseOutHandler": {
3886 "labels": ["Annotations"],
3887 "type": "function(annotation, point, dygraph, event)",
3888 "description": "If provided, this function is called whenever the user mouses out of an annotation."
3890 "annotationClickHandler": {
3892 "labels": ["Annotations"],
3893 "type": "function(annotation, point, dygraph, event)",
3894 "description": "If provided, this function is called whenever the user clicks on an annotation."
3896 "annotationDblClickHandler": {
3898 "labels": ["Annotations"],
3899 "type": "function(annotation, point, dygraph, event)",
3900 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
3904 "labels": ["Callbacks"],
3905 "type": "function(dygraph, is_initial)",
3906 "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."
3910 "labels": ["Value display/formatting"],
3912 "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."
3916 "labels": ["CSV parsing"],
3918 "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."
3920 "axisLabelFontSize": {
3922 "labels": ["Axis display"],
3924 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
3926 "underlayCallback": {
3928 "labels": ["Callbacks"],
3929 "type": "function(canvas, area, dygraph)",
3930 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
3934 "labels": ["Overall display"],
3936 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3938 "interactionModel": {
3940 "labels": ["Interactive Elements"],
3942 "description": "TODO(konigsberg): document this"
3945 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
3946 "labels": ["Axis display"],
3947 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
3948 "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."
3950 "xAxisLabelWidth": {
3952 "labels": ["Axis display"],
3954 "description": "Width, in pixels, of the x-axis labels."
3956 "showLabelsOnHighlight": {
3958 "labels": ["Interactive Elements", "Legend"],
3960 "description": "Whether to show the legend upon mouseover."
3963 "default": "(none)",
3964 "labels": ["Axis display"],
3965 "type": "string or object",
3966 "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."
3968 "pixelsPerXLabel": {
3970 "labels": ["Axis display", "Grid"],
3972 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3976 "labels": ["Legend"],
3977 "type": "DOM element or string",
3978 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
3979 "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."
3983 "labels": ["CSV parsing", "Error Bars"],
3985 "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)."
3989 "labels": ["Axis display"],
3991 "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."
3995 "labels": ["Data Line display"],
3997 "example": "0.5, 2.0",
3998 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4002 "labels": ["Error Bars"],
4004 "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."
4008 "labels": ["Data Line display"],
4010 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4012 "highlightCircleSize": {
4014 "labels": ["Interactive Elements"],
4016 "description": "The size in pixels of the dot drawn over highlighted points."
4019 "default": "rgb(128,128,128)",
4021 "type": "red, blue",
4022 "description": "The color of the gridlines."
4025 "default": "[true, true, ...]",
4026 "labels": ["Data Line display"],
4027 "type": "Array of booleans",
4028 "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."
4031 "default": "Full range of the input is shown",
4032 "labels": ["Axis display"],
4033 "type": "Array of two numbers",
4034 "example": "[10, 110]",
4035 "description": "Explicitly set the vertical range of the graph to [low, high]."
4039 "labels": ["Legend"],
4041 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4043 "colorSaturation": {
4045 "labels": ["Data Series Colors"],
4046 "type": "0.0 - 1.0",
4047 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4049 "yAxisLabelWidth": {
4051 "labels": ["Axis display"],
4053 "description": "Width, in pixels, of the y-axis labels."
4055 "hideOverlayOnMouseOut": {
4057 "labels": ["Interactive Elements", "Legend"],
4059 "description": "Whether to hide the legend when the mouse leaves the chart area."
4061 "yValueFormatter": {
4062 "default": "(Round to 2 decimal places)",
4063 "labels": ["Axis display"],
4064 "type": "function(x)",
4065 "description": "Function to provide a custom display format for the Y value for mouseover."
4068 "default": "onmouseover",
4069 "labels": ["Legend"],
4071 "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."
4073 "labelsShowZeroValues": {
4075 "labels": ["Legend"],
4077 "description": "Show zero value labels in the labelsDiv."
4081 "labels": ["Data Line display"],
4083 "description": "When set, display the graph as a step plot instead of a line plot."
4087 "labels": ["Value display/formatting"],
4089 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4093 "labels": ["Overall display"],
4095 "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."
4099 "labels": ["Axis display"],
4101 "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."
4103 "xAxisLabelFormatter": {
4104 "default": "Dygraph.dateAxisFormatter",
4105 "labels": ["Axis display", "Value display/formatting"],
4106 "type": "function(date, granularity)",
4107 "description": "Function to call to format values along the x axis."
4110 "snippet": "function(e, date){<br> alert(date);<br>}",
4112 "labels": ["Callbacks"],
4113 "type": "function(e, date)",
4114 "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."
4116 "yAxisLabelFormatter": {
4117 "default": "yValueFormatter",
4118 "labels": ["Axis display", "Value display/formatting"],
4119 "type": "function(x)",
4120 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4123 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4124 "labels": ["Legend"],
4125 "type": "array<string>",
4126 "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."
4129 "default": "Full range of the input is shown",
4130 "labels": ["Axis display"],
4131 "type": "Array of two Dates or numbers",
4132 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4133 "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."
4137 "labels": ["Interactive Elements", "Rolling Averages"],
4139 "description": "If the rolling average period text box should be shown."
4143 "labels": ["Error Bars"],
4145 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4149 "labels": ["CSV parsing", "Error Bars"],
4151 "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."
4155 "labels": ["Data Series Colors"],
4156 "type": "float (0.0 - 1.0)",
4157 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4161 "labels": ["CSV parsing", "Error Bars"],
4163 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4165 "displayAnnotations": {
4167 "labels": ["Annotations"],
4169 "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."
4171 "panEdgeFraction": {
4173 "labels": ["Axis Display", "Interactive Elements"],
4176 "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."
4179 "labels": ["Chart labels"],
4182 "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."
4186 "labels": ["Chart labels"],
4188 "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."
4191 "labels": ["Chart labels"],
4194 "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."
4197 "labels": ["Chart labels"],
4200 "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."
4203 "labels": ["Chart labels"],
4206 "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."
4209 "labels": ["Chart labels"],
4212 "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."
4214 "isZoomedIgnoreProgrammaticZoom" : {
4216 "labels": ["Zooming"],
4218 "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."
4222 "labels": ["Value display/formatting"],
4224 "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."
4226 "digitsAfterDecimal" : {
4228 "labels": ["Value display/formatting"],
4230 "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."
4232 "maxNumberWidth" : {
4234 "labels": ["Value display/formatting"],
4236 "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."
4240 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4241 // JSON. This assumption cannot be checked in JS, but it will be checked when
4242 // documentation is generated by the generate-documentation.py script. For the
4243 // most part, this just means that you should always use double quotes.
4245 // Do a quick sanity check on the options reference.
4247 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4248 var flds
= ['type', 'default', 'description'];
4255 'Data Line display',
4256 'Data Series Colors',
4259 'Interactive Elements',
4263 'Value display/formatting',
4267 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4269 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4270 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4271 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4272 for (var i
= 0; i
< flds
.length
; i
++) {
4273 if (!op
.hasOwnProperty(flds
[i
])) {
4274 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4275 } else if (typeof(op
[flds
[i
]]) != 'string') {
4276 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4279 var labels
= op
['labels'];
4280 if (typeof(labels
) !== 'object') {
4281 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4282 for (var i
= 0; i
< labels
.length
; i
++) {
4283 if (!cats
.hasOwnProperty(labels
[i
])) {
4284 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4285 '", which is invalid.');
4291 // </REMOVE_FOR_COMBINED
>