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__();
76 * Formatting to use for an integer number.
78 * @param {Number} x The number to format
79 * @param {Number} unused_precision The precision to use, ignored.
80 * @return {String} A string formatted like %g in printf. The max generated
81 * string length should be precision + 6 (e.g 1.123e+300).
83 Dygraph
.intFormat
= function(x
, unused_precision
) {
88 * Number formatting function which mimicks the behavior of %g in printf, i.e.
89 * either exponential or fixed format (without trailing 0s) is used depending on
90 * the length of the generated string. The advantage of this format is that
91 * there is a predictable upper bound on the resulting string length,
92 * significant figures are not dropped, and normal numbers are not displayed in
93 * exponential notation.
95 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
96 * It creates strings which are too long for absolute values between 10^-4 and
97 * 10^-6. See tests/number-format.html for output examples.
99 * @param {Number} x The number to format
100 * @param {Number} opt_precision The precision to use, default 2.
101 * @return {String} A string formatted like %g in printf. The max generated
102 * string length should be precision + 6 (e.g 1.123e+300).
104 Dygraph
.floatFormat
= function(x
, opt_precision
) {
105 // Avoid invalid precision values; [1, 21] is the valid range.
106 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
108 // This is deceptively simple. The actual algorithm comes from:
110 // Max allowed length = p + 4
111 // where 4 comes from 'e+n' and '.'.
113 // Length of fixed format = 2 + y + p
114 // where 2 comes from '0.' and y = # of leading zeroes.
116 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
119 // Since the behavior of toPrecision() is identical for larger numbers, we
120 // don't have to worry about the other bound.
122 // Finally, the argument for toExponential() is the number of trailing digits,
123 // so we take off 1 for the value before the '.'.
124 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
125 x
.toExponential(p
- 1) : x
.toPrecision(p
);
128 // Various default values
129 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
130 Dygraph
.DEFAULT_WIDTH
= 480;
131 Dygraph
.DEFAULT_HEIGHT
= 320;
132 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
134 Dygraph
.LOG_SCALE
= 10;
135 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
136 Dygraph
.log10
= function(x
) {
137 return Math
.log(x
) / Dygraph
.LN_TEN
;
140 // Default attribute values.
141 Dygraph
.DEFAULT_ATTRS
= {
142 highlightCircleSize
: 3,
148 // TODO(danvk): move defaults from createStatusMessage_ here.
150 labelsSeparateLines
: false,
151 labelsShowZeroValues
: true,
154 showLabelsOnHighlight
: true,
156 yValueFormatter
: function(x
, opt_precision
) {
157 var s
= Dygraph
.floatFormat(x
, opt_precision
);
158 var s2
= Dygraph
.intFormat(x
);
159 return s
.length
< s2
.length
? s
: s2
;
165 axisLabelFontSize
: 14,
168 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
172 xValueFormatter
: Dygraph
.dateString_
,
173 xValueParser
: Dygraph
.dateParser
,
174 xTicker
: Dygraph
.dateTicker
,
181 wilsonInterval
: true, // only relevant if fractions is true
185 connectSeparatedPoints
: false,
188 hideOverlayOnMouseOut
: true,
190 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
191 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
196 // Sizes of the various chart labels.
201 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
204 // Various logging levels.
210 // Directions for panning and zooming. Use bit operations when combined
211 // values are possible.
212 Dygraph
.HORIZONTAL
= 1;
213 Dygraph
.VERTICAL
= 2;
215 // Used for initializing annotation CSS rules only once.
216 Dygraph
.addedAnnotationCSS
= false;
218 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
219 // Labels is no longer a constructor parameter, since it's typically set
220 // directly from the data source. It also conains a name for the x-axis,
221 // which the previous constructor form did not.
222 if (labels
!= null) {
223 var new_labels
= ["Date"];
224 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
225 Dygraph
.update(attrs
, { 'labels': new_labels
});
227 this.__init__(div
, file
, attrs
);
231 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
232 * and context <canvas> inside of it. See the constructor for details.
234 * @param {Element} div the Element to render the graph into.
235 * @param {String | Function} file Source data
236 * @param {Object} attrs Miscellaneous other options
239 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
240 // Hack for IE: if we're using excanvas and the document hasn't finished
241 // loading yet (and hence may not have initialized whatever it needs to
242 // initialize), then keep calling this routine periodically until it has.
243 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
244 typeof(G_vmlCanvasManager
) != 'undefined' &&
245 document
.readyState
!= 'complete') {
247 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
250 // Support two-argument constructor
251 if (attrs
== null) { attrs
= {}; }
253 // Copy the important bits into the object
254 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
257 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
258 this.previousVerticalX_
= -1;
259 this.fractions_
= attrs
.fractions
|| false;
260 this.dateWindow_
= attrs
.dateWindow
|| null;
262 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
263 this.is_initial_draw_
= true;
264 this.annotations_
= [];
266 // Number of digits to use when labeling the x (if numeric) and y axis
268 this.numXDigits_
= 2;
269 this.numYDigits_
= 2;
271 // When labeling x (if numeric) or y values in the legend, there are
272 // numDigits + numExtraDigits of precision used. For axes labels with N
273 // digits of precision, the data should be displayed with at least N+1 digits
274 // of precision. The reason for this is to divide each interval between
275 // successive ticks into tenths (for 1) or hundredths (for 2), etc. For
276 // example, if the labels are [0, 1, 2], we want data to be displayed as
278 this.numExtraDigits_
= 1;
280 // Clear the div. This ensure that, if multiple dygraphs are passed the same
281 // div, then only one will be drawn.
284 // If the div isn't already sized then inherit from our attrs or
285 // give it a default size.
286 if (div
.style
.width
== '') {
287 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
289 if (div
.style
.height
== '') {
290 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
292 this.width_
= parseInt(div
.style
.width
, 10);
293 this.height_
= parseInt(div
.style
.height
, 10);
294 // The div might have been specified as percent of the current window size,
295 // convert that to an appropriate number of pixels.
296 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
297 this.width_
= div
.offsetWidth
;
299 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
300 this.height_
= div
.offsetHeight
;
303 if (this.width_
== 0) {
304 this.error("dygraph has zero width. Please specify a width in pixels.");
306 if (this.height_
== 0) {
307 this.error("dygraph has zero height. Please specify a height in pixels.");
310 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
311 if (attrs
['stackedGraph']) {
312 attrs
['fillGraph'] = true;
313 // TODO(nikhilk): Add any other stackedGraph checks here.
316 // Dygraphs has many options, some of which interact with one another.
317 // To keep track of everything, we maintain two sets of options:
319 // this.user_attrs_ only options explicitly set by the user.
320 // this.attrs_ defaults, options derived from user_attrs_, data.
322 // Options are then accessed this.attr_('attr'), which first looks at
323 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
324 // defaults without overriding behavior that the user specifically asks for.
325 this.user_attrs_
= {};
326 Dygraph
.update(this.user_attrs_
, attrs
);
329 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
331 this.boundaryIds_
= [];
333 // Make a note of whether labels will be pulled from the CSV file.
334 this.labelsFromCSV_
= (this.attr_("labels") == null);
336 // Create the containing DIV and other interactive elements
337 this.createInterface_();
342 Dygraph
.prototype.toString
= function() {
343 var maindiv
= this.maindiv_
;
344 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
345 return "[Dygraph " + id
+ "]";
348 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
349 // <REMOVE_FOR_COMBINED>
350 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
351 this.error('Must include options reference JS for testing');
352 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
353 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
354 'in the Dygraphs.OPTIONS_REFERENCE listing.');
355 // Only log this error once.
356 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
358 // </REMOVE_FOR_COMBINED
>
360 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
361 this.user_attrs_
[seriesName
] != null &&
362 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
363 return this.user_attrs_
[seriesName
][name
];
364 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
365 return this.user_attrs_
[name
];
366 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
367 return this.attrs_
[name
];
373 // TODO(danvk): any way I can get the line numbers to be this.warn call?
374 Dygraph
.prototype.log
= function(severity
, message
) {
375 if (typeof(console
) != 'undefined') {
378 console
.debug('dygraphs: ' + message
);
381 console
.info('dygraphs: ' + message
);
383 case Dygraph
.WARNING
:
384 console
.warn('dygraphs: ' + message
);
387 console
.error('dygraphs: ' + message
);
392 Dygraph
.prototype.info
= function(message
) {
393 this.log(Dygraph
.INFO
, message
);
395 Dygraph
.prototype.warn
= function(message
) {
396 this.log(Dygraph
.WARNING
, message
);
398 Dygraph
.prototype.error
= function(message
) {
399 this.log(Dygraph
.ERROR
, message
);
403 * Returns the current rolling period, as set by the user or an option.
404 * @return {Number} The number of points in the rolling window
406 Dygraph
.prototype.rollPeriod
= function() {
407 return this.rollPeriod_
;
411 * Returns the currently-visible x-range. This can be affected by zooming,
412 * panning or a call to updateOptions.
413 * Returns a two-element array: [left, right].
414 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
416 Dygraph
.prototype.xAxisRange
= function() {
417 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
421 * Returns the lower- and upper-bound x-axis values of the
424 Dygraph
.prototype.xAxisExtremes
= function() {
425 var left
= this.rawData_
[0][0];
426 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
427 return [left
, right
];
431 * Returns the currently-visible y-range for an axis. This can be affected by
432 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
433 * called with no arguments, returns the range of the first axis.
434 * Returns a two-element array: [bottom, top].
436 Dygraph
.prototype.yAxisRange
= function(idx
) {
437 if (typeof(idx
) == "undefined") idx
= 0;
438 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
439 return [ this.axes_
[idx
].computedValueRange
[0],
440 this.axes_
[idx
].computedValueRange
[1] ];
444 * Returns the currently-visible y-ranges for each axis. This can be affected by
445 * zooming, panning, calls to updateOptions, etc.
446 * Returns an array of [bottom, top] pairs, one for each y-axis.
448 Dygraph
.prototype.yAxisRanges
= function() {
450 for (var i
= 0; i
< this.axes_
.length
; i
++) {
451 ret
.push(this.yAxisRange(i
));
456 // TODO(danvk): use these functions throughout dygraphs.
458 * Convert from data coordinates to canvas/div X/Y coordinates.
459 * If specified, do this conversion for the coordinate system of a particular
460 * axis. Uses the first axis by default.
461 * Returns a two-element array: [X, Y]
463 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
464 * instead of toDomCoords(null, y, axis).
466 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
467 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
471 * Convert from data x coordinates to canvas/div X coordinate.
472 * If specified, do this conversion for the coordinate system of a particular
474 * Returns a single value or null if x is null.
476 Dygraph
.prototype.toDomXCoord
= function(x
) {
481 var area
= this.plotter_
.area
;
482 var xRange
= this.xAxisRange();
483 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
487 * Convert from data x coordinates to canvas/div Y coordinate and optional
488 * axis. Uses the first axis by default.
490 * returns a single value or null if y is null.
492 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
493 var pct
= this.toPercentYCoord(y
, axis
);
498 var area
= this.plotter_
.area
;
499 return area
.y
+ pct
* area
.h
;
503 * Convert from canvas/div coords to data coordinates.
504 * If specified, do this conversion for the coordinate system of a particular
505 * axis. Uses the first axis by default.
506 * Returns a two-element array: [X, Y].
508 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
509 * instead of toDataCoords(null, y, axis).
511 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
512 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
516 * Convert from canvas/div x coordinate to data coordinate.
518 * If x is null, this returns null.
520 Dygraph
.prototype.toDataXCoord
= function(x
) {
525 var area
= this.plotter_
.area
;
526 var xRange
= this.xAxisRange();
527 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
531 * Convert from canvas/div y coord to value.
533 * If y is null, this returns null.
534 * if axis is null, this uses the first axis.
536 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
541 var area
= this.plotter_
.area
;
542 var yRange
= this.yAxisRange(axis
);
544 if (typeof(axis
) == "undefined") axis
= 0;
545 if (!this.axes_
[axis
].logscale
) {
546 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
548 // Computing the inverse of toDomCoord.
549 var pct
= (y
- area
.y
) / area
.h
551 // Computing the inverse of toPercentYCoord. The function was arrived at with
552 // the following steps:
554 // Original calcuation:
555 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
557 // Move denominator to both sides:
558 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
560 // subtract logr1, and take the negative value.
561 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
563 // Swap both sides of the equation, and we can compute the log of the
564 // return value. Which means we just need to use that as the exponent in
566 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
568 var logr1
= Dygraph
.log10(yRange
[1]);
569 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
570 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
576 * Converts a y for an axis to a percentage from the top to the
577 * bottom of the drawing area.
579 * If the coordinate represents a value visible on the canvas, then
580 * the value will be between 0 and 1, where 0 is the top of the canvas.
581 * However, this method will return values outside the range, as
582 * values can fall outside the canvas.
584 * If y is null, this returns null.
585 * if axis is null, this uses the first axis.
587 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
591 if (typeof(axis
) == "undefined") axis
= 0;
593 var area
= this.plotter_
.area
;
594 var yRange
= this.yAxisRange(axis
);
597 if (!this.axes_
[axis
].logscale
) {
598 // yRange[1] - y is unit distance from the bottom.
599 // yRange[1] - yRange[0] is the scale of the range.
600 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
601 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
603 var logr1
= Dygraph
.log10(yRange
[1]);
604 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
610 * Converts an x value to a percentage from the left to the right of
613 * If the coordinate represents a value visible on the canvas, then
614 * the value will be between 0 and 1, where 0 is the left of the canvas.
615 * However, this method will return values outside the range, as
616 * values can fall outside the canvas.
618 * If x is null, this returns null.
620 Dygraph
.prototype.toPercentXCoord
= function(x
) {
625 var xRange
= this.xAxisRange();
626 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
630 * Returns the number of columns (including the independent variable).
632 Dygraph
.prototype.numColumns
= function() {
633 return this.rawData_
[0].length
;
637 * Returns the number of rows (excluding any header/label row).
639 Dygraph
.prototype.numRows
= function() {
640 return this.rawData_
.length
;
644 * Returns the value in the given row and column. If the row and column exceed
645 * the bounds on the data, returns null. Also returns null if the value is
648 Dygraph
.prototype.getValue
= function(row
, col
) {
649 if (row
< 0 || row
> this.rawData_
.length
) return null;
650 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
652 return this.rawData_
[row
][col
];
655 Dygraph
.addEvent
= function(el
, evt
, fn
) {
656 var normed_fn
= function(e
) {
657 if (!e
) var e
= window
.event
;
660 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
661 el
.addEventListener(evt
, normed_fn
, false);
663 el
.attachEvent('on' + evt
, normed_fn
);
668 // Based on the article at
669 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
670 Dygraph
.cancelEvent
= function(e
) {
671 e
= e
? e
: window
.event
;
672 if (e
.stopPropagation
) {
675 if (e
.preventDefault
) {
678 e
.cancelBubble
= true;
680 e
.returnValue
= false;
686 * Generates interface elements for the Dygraph: a containing div, a div to
687 * display the current point, and a textbox to adjust the rolling average
688 * period. Also creates the Renderer/Layout elements.
691 Dygraph
.prototype.createInterface_
= function() {
692 // Create the all-enclosing graph div
693 var enclosing
= this.maindiv_
;
695 this.graphDiv
= document
.createElement("div");
696 this.graphDiv
.style
.width
= this.width_
+ "px";
697 this.graphDiv
.style
.height
= this.height_
+ "px";
698 enclosing
.appendChild(this.graphDiv
);
700 // Create the canvas for interactive parts of the chart.
701 this.canvas_
= Dygraph
.createCanvas();
702 this.canvas_
.style
.position
= "absolute";
703 this.canvas_
.width
= this.width_
;
704 this.canvas_
.height
= this.height_
;
705 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
706 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
708 // ... and for static parts of the chart.
709 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
711 // The interactive parts of the graph are drawn on top of the chart.
712 this.graphDiv
.appendChild(this.hidden_
);
713 this.graphDiv
.appendChild(this.canvas_
);
714 this.mouseEventElement_
= this.canvas_
;
717 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
718 dygraph
.mouseMove_(e
);
720 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
721 dygraph
.mouseOut_(e
);
724 // Create the grapher
725 // TODO(danvk): why does the Layout need its own set of options?
726 this.layoutOptions_
= { 'xOriginIsZero': false };
727 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
728 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
729 Dygraph
.update(this.layoutOptions_
, {
730 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
732 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
734 // TODO(danvk): why does the Renderer need its own set of options?
735 this.renderOptions_
= { colorScheme
: this.colors_
,
737 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
738 Dygraph
.update(this.renderOptions_
, this.attrs_
);
739 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
741 this.createStatusMessage_();
742 this.createDragInterface_();
746 * Detach DOM elements in the dygraph and null out all data references.
747 * Calling this when you're done with a dygraph can dramatically reduce memory
748 * usage. See, e.g., the tests/perf.html example.
750 Dygraph
.prototype.destroy
= function() {
751 var removeRecursive
= function(node
) {
752 while (node
.hasChildNodes()) {
753 removeRecursive(node
.firstChild
);
754 node
.removeChild(node
.firstChild
);
757 removeRecursive(this.maindiv_
);
759 var nullOut
= function(obj
) {
761 if (typeof(obj
[n
]) === 'object') {
767 // These may not all be necessary, but it can't hurt...
768 nullOut(this.layout_
);
769 nullOut(this.plotter_
);
774 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
775 * this particular canvas. All Dygraph work is done on this.canvas_.
776 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
777 * @return {Object} The newly-created canvas
780 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
781 var h
= Dygraph
.createCanvas();
782 h
.style
.position
= "absolute";
783 // TODO(danvk): h should be offset from canvas. canvas needs to include
784 // some extra area to make it easier to zoom in on the far left and far
785 // right. h needs to be precisely the plot area, so that clipping occurs.
786 h
.style
.top
= canvas
.style
.top
;
787 h
.style
.left
= canvas
.style
.left
;
788 h
.width
= this.width_
;
789 h
.height
= this.height_
;
790 h
.style
.width
= this.width_
+ "px"; // for IE
791 h
.style
.height
= this.height_
+ "px"; // for IE
795 // Taken from MochiKit.Color
796 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
800 if (saturation
=== 0) {
805 var i
= Math
.floor(hue
* 6);
806 var f
= (hue
* 6) - i
;
807 var p
= value
* (1 - saturation
);
808 var q
= value
* (1 - (saturation
* f
));
809 var t
= value
* (1 - (saturation
* (1 - f
)));
811 case 1: red
= q
; green
= value
; blue
= p
; break;
812 case 2: red
= p
; green
= value
; blue
= t
; break;
813 case 3: red
= p
; green
= q
; blue
= value
; break;
814 case 4: red
= t
; green
= p
; blue
= value
; break;
815 case 5: red
= value
; green
= p
; blue
= q
; break;
816 case 6: // fall through
817 case 0: red
= value
; green
= t
; blue
= p
; break;
820 red
= Math
.floor(255 * red
+ 0.5);
821 green
= Math
.floor(255 * green
+ 0.5);
822 blue
= Math
.floor(255 * blue
+ 0.5);
823 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
828 * Generate a set of distinct colors for the data series. This is done with a
829 * color wheel. Saturation/Value are customizable, and the hue is
830 * equally-spaced around the color wheel. If a custom set of colors is
831 * specified, that is used instead.
834 Dygraph
.prototype.setColors_
= function() {
835 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
836 // away with this.renderOptions_.
837 var num
= this.attr_("labels").length
- 1;
839 var colors
= this.attr_('colors');
841 var sat
= this.attr_('colorSaturation') || 1.0;
842 var val
= this.attr_('colorValue') || 0.5;
843 var half
= Math
.ceil(num
/ 2);
844 for (var i
= 1; i
<= num
; i
++) {
845 if (!this.visibility()[i
-1]) continue;
846 // alternate colors for high contrast.
847 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
848 var hue
= (1.0 * idx
/ (1 + num
));
849 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
852 for (var i
= 0; i
< num
; i
++) {
853 if (!this.visibility()[i
]) continue;
854 var colorStr
= colors
[i
% colors
.length
];
855 this.colors_
.push(colorStr
);
859 // TODO(danvk): update this w/r
/t/ the
new options system
.
860 this.renderOptions_
.colorScheme
= this.colors_
;
861 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
862 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
863 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
867 * Return the list of colors. This is either the list of colors passed in the
868 * attributes, or the autogenerated list of rgb(r,g,b) strings.
869 * @return {Array<string>} The list of colors.
871 Dygraph
.prototype.getColors
= function() {
875 // The following functions are from quirksmode.org with a modification for Safari from
876 // http://blog.firetree.net/2005/07/04/javascript-find-position/
877 // http://www.quirksmode.org/js
/findpos
.html
878 Dygraph
.findPosX
= function(obj
) {
883 curleft
+= obj
.offsetLeft
;
884 if(!obj
.offsetParent
)
886 obj
= obj
.offsetParent
;
893 Dygraph
.findPosY
= function(obj
) {
898 curtop
+= obj
.offsetTop
;
899 if(!obj
.offsetParent
)
901 obj
= obj
.offsetParent
;
911 * Create the div that contains information on the selected point(s)
912 * This goes in the top right of the canvas, unless an external div has already
916 Dygraph
.prototype.createStatusMessage_
= function() {
917 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
918 if (userLabelsDiv
&& null != userLabelsDiv
919 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
920 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
922 if (!this.attr_("labelsDiv")) {
923 var divWidth
= this.attr_('labelsDivWidth');
925 "position": "absolute",
928 "width": divWidth
+ "px",
930 "left": (this.width_
- divWidth
- 2) + "px",
931 "background": "white",
933 "overflow": "hidden"};
934 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
935 var div
= document
.createElement("div");
936 for (var name
in messagestyle
) {
937 if (messagestyle
.hasOwnProperty(name
)) {
938 div
.style
[name
] = messagestyle
[name
];
941 this.graphDiv
.appendChild(div
);
942 this.attrs_
.labelsDiv
= div
;
947 * Position the labels div so that:
948 * - its right edge is flush with the right edge of the charting area
949 * - its top edge is flush with the top edge of the charting area
951 Dygraph
.prototype.positionLabelsDiv_
= function() {
952 // Don't touch a user-specified labelsDiv.
953 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
955 var area
= this.plotter_
.area
;
956 var div
= this.attr_("labelsDiv");
957 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
958 div
.style
.top
= area
.y
+ "px";
962 * Create the text box to adjust the averaging period
965 Dygraph
.prototype.createRollInterface_
= function() {
966 // Create a roller if one doesn't exist already.
968 this.roller_
= document
.createElement("input");
969 this.roller_
.type
= "text";
970 this.roller_
.style
.display
= "none";
971 this.graphDiv
.appendChild(this.roller_
);
974 var display
= this.attr_('showRoller') ? 'block' : 'none';
976 var area
= this.plotter_
.area
;
977 var textAttr
= { "position": "absolute",
979 "top": (area
.y
+ area
.h
- 25) + "px",
980 "left": (area
.x
+ 1) + "px",
983 this.roller_
.size
= "2";
984 this.roller_
.value
= this.rollPeriod_
;
985 for (var name
in textAttr
) {
986 if (textAttr
.hasOwnProperty(name
)) {
987 this.roller_
.style
[name
] = textAttr
[name
];
992 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
995 // These functions are taken from MochiKit.Signal
996 Dygraph
.pageX
= function(e
) {
998 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1001 var b
= document
.body
;
1003 (de
.scrollLeft
|| b
.scrollLeft
) -
1004 (de
.clientLeft
|| 0);
1008 Dygraph
.pageY
= function(e
) {
1010 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1013 var b
= document
.body
;
1015 (de
.scrollTop
|| b
.scrollTop
) -
1016 (de
.clientTop
|| 0);
1020 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1021 return Dygraph
.pageX(e
) - context
.px
1024 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1025 return Dygraph
.pageY(e
) - context
.py
1028 // Called in response to an interaction model operation that
1029 // should start the default panning behavior.
1031 // It's used in the default callback for "mousedown" operations.
1032 // Custom interaction model builders can use it to provide the default
1033 // panning behavior.
1035 Dygraph
.startPan
= function(event
, g
, context
) {
1036 context
.isPanning
= true;
1037 var xRange
= g
.xAxisRange();
1038 context
.dateRange
= xRange
[1] - xRange
[0];
1039 context
.initialLeftmostDate
= xRange
[0];
1040 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1042 if (g
.attr_("panEdgeFraction")) {
1043 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1044 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1046 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1047 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1049 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1050 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1051 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1053 var boundedValues
= [];
1054 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1056 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1057 var axis
= g
.axes_
[i
];
1058 var yExtremes
= axis
.extremeRange
;
1060 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1061 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1063 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1064 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1066 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1068 context
.boundedValues
= boundedValues
;
1071 // Record the range of each y-axis at the start of the drag.
1072 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1073 context
.is2DPan
= false;
1074 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1075 var axis
= g
.axes_
[i
];
1076 var yRange
= g
.yAxisRange(i
);
1077 // TODO(konigsberg): These values should be in |context|.
1078 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1079 if (axis
.logscale
) {
1080 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1081 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1083 axis
.initialTopValue
= yRange
[1];
1084 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1086 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1088 // While calculating axes, set 2dpan.
1089 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1093 // Called in response to an interaction model operation that
1094 // responds to an event that pans the view.
1096 // It's used in the default callback for "mousemove" operations.
1097 // Custom interaction model builders can use it to provide the default
1098 // panning behavior.
1100 Dygraph
.movePan
= function(event
, g
, context
) {
1101 context
.dragEndX
= g
.dragGetX_(event
, context
);
1102 context
.dragEndY
= g
.dragGetY_(event
, context
);
1104 var minDate
= context
.initialLeftmostDate
-
1105 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1106 if (context
.boundedDates
) {
1107 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1109 var maxDate
= minDate
+ context
.dateRange
;
1110 if (context
.boundedDates
) {
1111 if (maxDate
> context
.boundedDates
[1]) {
1112 // Adjust minDate, and recompute maxDate.
1113 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1114 maxDate
= minDate
+ context
.dateRange
;
1118 g
.dateWindow_
= [minDate
, maxDate
];
1120 // y-axis scaling is automatic unless this is a full 2D pan.
1121 if (context
.is2DPan
) {
1122 // Adjust each axis appropriately.
1123 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1124 var axis
= g
.axes_
[i
];
1126 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1127 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1129 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1131 // In log scale, maxValue and minValue are the logs of those values.
1132 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1134 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1136 var minValue
= maxValue
- axis
.dragValueRange
;
1138 if (minValue
< boundedValue
[0]) {
1139 // Adjust maxValue, and recompute minValue.
1140 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1141 minValue
= maxValue
- axis
.dragValueRange
;
1144 if (axis
.logscale
) {
1145 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1146 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1148 axis
.valueWindow
= [ minValue
, maxValue
];
1156 // Called in response to an interaction model operation that
1157 // responds to an event that ends panning.
1159 // It's used in the default callback for "mouseup" operations.
1160 // Custom interaction model builders can use it to provide the default
1161 // panning behavior.
1163 Dygraph
.endPan
= function(event
, g
, context
) {
1164 // TODO(konigsberg): Clear the context data from the axis.
1165 // TODO(konigsberg): mouseup should just delete the
1166 // context object, and mousedown should create a new one.
1167 context
.isPanning
= false;
1168 context
.is2DPan
= false;
1169 context
.initialLeftmostDate
= null;
1170 context
.dateRange
= null;
1171 context
.valueRange
= null;
1172 context
.boundedDates
= null;
1173 context
.boundedValues
= null;
1176 // Called in response to an interaction model operation that
1177 // responds to an event that starts zooming.
1179 // It's used in the default callback for "mousedown" operations.
1180 // Custom interaction model builders can use it to provide the default
1181 // zooming behavior.
1183 Dygraph
.startZoom
= function(event
, g
, context
) {
1184 context
.isZooming
= true;
1187 // Called in response to an interaction model operation that
1188 // responds to an event that defines zoom boundaries.
1190 // It's used in the default callback for "mousemove" operations.
1191 // Custom interaction model builders can use it to provide the default
1192 // zooming behavior.
1194 Dygraph
.moveZoom
= function(event
, g
, context
) {
1195 context
.dragEndX
= g
.dragGetX_(event
, context
);
1196 context
.dragEndY
= g
.dragGetY_(event
, context
);
1198 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1199 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1201 // drag direction threshold for y axis is twice as large as x axis
1202 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1205 context
.dragDirection
,
1210 context
.prevDragDirection
,
1214 context
.prevEndX
= context
.dragEndX
;
1215 context
.prevEndY
= context
.dragEndY
;
1216 context
.prevDragDirection
= context
.dragDirection
;
1219 // Called in response to an interaction model operation that
1220 // responds to an event that performs a zoom based on previously defined
1223 // It's used in the default callback for "mouseup" operations.
1224 // Custom interaction model builders can use it to provide the default
1225 // zooming behavior.
1227 Dygraph
.endZoom
= function(event
, g
, context
) {
1228 context
.isZooming
= false;
1229 context
.dragEndX
= g
.dragGetX_(event
, context
);
1230 context
.dragEndY
= g
.dragGetY_(event
, context
);
1231 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1232 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1234 if (regionWidth
< 2 && regionHeight
< 2 &&
1235 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1236 // TODO(danvk): pass along more info about the points, e.g. 'x'
1237 if (g
.attr_('clickCallback') != null) {
1238 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1240 if (g
.attr_('pointClickCallback')) {
1241 // check if the click was on a particular point.
1242 var closestIdx
= -1;
1243 var closestDistance
= 0;
1244 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1245 var p
= g
.selPoints_
[i
];
1246 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1247 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1248 if (closestIdx
== -1 || distance
< closestDistance
) {
1249 closestDistance
= distance
;
1254 // Allow any click within two pixels of the dot.
1255 var radius
= g
.attr_('highlightCircleSize') + 2;
1256 if (closestDistance
<= 5 * 5) {
1257 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1262 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1263 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1264 Math
.max(context
.dragStartX
, context
.dragEndX
));
1265 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1266 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1267 Math
.max(context
.dragStartY
, context
.dragEndY
));
1269 g
.canvas_
.getContext("2d").clearRect(0, 0,
1273 context
.dragStartX
= null;
1274 context
.dragStartY
= null;
1277 Dygraph
.defaultInteractionModel
= {
1278 // Track the beginning of drag events
1279 mousedown
: function(event
, g
, context
) {
1280 context
.initializeMouseDown(event
, g
, context
);
1282 if (event
.altKey
|| event
.shiftKey
) {
1283 Dygraph
.startPan(event
, g
, context
);
1285 Dygraph
.startZoom(event
, g
, context
);
1289 // Draw zoom rectangles when the mouse is down and the user moves around
1290 mousemove
: function(event
, g
, context
) {
1291 if (context
.isZooming
) {
1292 Dygraph
.moveZoom(event
, g
, context
);
1293 } else if (context
.isPanning
) {
1294 Dygraph
.movePan(event
, g
, context
);
1298 mouseup
: function(event
, g
, context
) {
1299 if (context
.isZooming
) {
1300 Dygraph
.endZoom(event
, g
, context
);
1301 } else if (context
.isPanning
) {
1302 Dygraph
.endPan(event
, g
, context
);
1306 // Temporarily cancel the dragging event when the mouse leaves the graph
1307 mouseout
: function(event
, g
, context
) {
1308 if (context
.isZooming
) {
1309 context
.dragEndX
= null;
1310 context
.dragEndY
= null;
1314 // Disable zooming out if panning.
1315 dblclick
: function(event
, g
, context
) {
1316 if (event
.altKey
|| event
.shiftKey
) {
1319 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1320 // friendlier to public use.
1325 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1328 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1332 Dygraph
.prototype.createDragInterface_
= function() {
1334 // Tracks whether the mouse is down right now
1336 isPanning
: false, // is this drag part of a pan?
1337 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1342 dragDirection
: null,
1345 prevDragDirection
: null,
1347 // The value on the left side of the graph when a pan operation starts.
1348 initialLeftmostDate
: null,
1350 // The number of units each pixel spans. (This won't be valid for log
1352 xUnitsPerPixel
: null,
1354 // TODO(danvk): update this comment
1355 // The range in second/value units that the viewport encompasses during a
1356 // panning operation.
1359 // Utility function to convert page-wide coordinates to canvas coords
1363 // Values for use with panEdgeFraction, which limit how far outside the
1364 // graph's data boundaries it can be panned.
1365 boundedDates
: null, // [minDate, maxDate]
1366 boundedValues
: null, // [[minValue, maxValue] ...]
1368 initializeMouseDown
: function(event
, g
, context
) {
1369 // prevents mouse drags from selecting page text.
1370 if (event
.preventDefault
) {
1371 event
.preventDefault(); // Firefox, Chrome, etc.
1373 event
.returnValue
= false; // IE
1374 event
.cancelBubble
= true;
1377 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1378 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1379 context
.dragStartX
= g
.dragGetX_(event
, context
);
1380 context
.dragStartY
= g
.dragGetY_(event
, context
);
1384 var interactionModel
= this.attr_("interactionModel");
1386 // Self is the graph.
1389 // Function that binds the graph and context to the handler.
1390 var bindHandler
= function(handler
) {
1391 return function(event
) {
1392 handler(event
, self
, context
);
1396 for (var eventName
in interactionModel
) {
1397 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1398 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1399 bindHandler(interactionModel
[eventName
]));
1402 // If the user releases the mouse button during a drag, but not over the
1403 // canvas, then it doesn't count as a zooming action.
1404 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1405 if (context
.isZooming
|| context
.isPanning
) {
1406 context
.isZooming
= false;
1407 context
.dragStartX
= null;
1408 context
.dragStartY
= null;
1411 if (context
.isPanning
) {
1412 context
.isPanning
= false;
1413 context
.draggingDate
= null;
1414 context
.dateRange
= null;
1415 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1416 delete self
.axes_
[i
].draggingValue
;
1417 delete self
.axes_
[i
].dragValueRange
;
1425 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1426 * up any previous zoom rectangles that were drawn. This could be optimized to
1427 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1430 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1431 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1432 * @param {Number} startX The X position where the drag started, in canvas
1434 * @param {Number} endX The current X position of the drag, in canvas coords.
1435 * @param {Number} startY The Y position where the drag started, in canvas
1437 * @param {Number} endY The current Y position of the drag, in canvas coords.
1438 * @param {Number} prevDirection the value of direction on the previous call to
1439 * this function. Used to avoid excess redrawing
1440 * @param {Number} prevEndX The value of endX on the previous call to this
1441 * function. Used to avoid excess redrawing
1442 * @param {Number} prevEndY The value of endY on the previous call to this
1443 * function. Used to avoid excess redrawing
1446 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1447 endY
, prevDirection
, prevEndX
,
1449 var ctx
= this.canvas_
.getContext("2d");
1451 // Clean up from the previous rect if necessary
1452 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1453 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1454 Math
.abs(startX
- prevEndX
), this.height_
);
1455 } else if (prevDirection
== Dygraph
.VERTICAL
){
1456 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1457 this.width_
, Math
.abs(startY
- prevEndY
));
1460 // Draw a light-grey rectangle to show the new viewing area
1461 if (direction
== Dygraph
.HORIZONTAL
) {
1462 if (endX
&& startX
) {
1463 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1464 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1465 Math
.abs(endX
- startX
), this.height_
);
1468 if (direction
== Dygraph
.VERTICAL
) {
1469 if (endY
&& startY
) {
1470 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1471 ctx
.fillRect(0, Math
.min(startY
, endY
),
1472 this.width_
, Math
.abs(endY
- startY
));
1478 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1479 * the canvas. The exact zoom window may be slightly larger if there are no data
1480 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1481 * which accepts dates that match the raw data. This function redraws the graph.
1483 * @param {Number} lowX The leftmost pixel value that should be visible.
1484 * @param {Number} highX The rightmost pixel value that should be visible.
1487 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1488 // Find the earliest and latest dates contained in this canvasx range.
1489 // Convert the call to date ranges of the raw data.
1490 var minDate
= this.toDataXCoord(lowX
);
1491 var maxDate
= this.toDataXCoord(highX
);
1492 this.doZoomXDates_(minDate
, maxDate
);
1496 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1497 * method with doZoomX which accepts pixel coordinates. This function redraws
1500 * @param {Number} minDate The minimum date that should be visible.
1501 * @param {Number} maxDate The maximum date that should be visible.
1504 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1505 this.dateWindow_
= [minDate
, maxDate
];
1507 if (this.attr_("zoomCallback")) {
1508 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1513 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1514 * the canvas. This function redraws the graph.
1516 * @param {Number} lowY The topmost pixel value that should be visible.
1517 * @param {Number} highY The lowest pixel value that should be visible.
1520 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1521 // Find the highest and lowest values in pixel range for each axis.
1522 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1523 // This is because pixels increase as you go down on the screen, whereas data
1524 // coordinates increase as you go up the screen.
1525 var valueRanges
= [];
1526 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1527 var hi
= this.toDataYCoord(lowY
, i
);
1528 var low
= this.toDataYCoord(highY
, i
);
1529 this.axes_
[i
].valueWindow
= [low
, hi
];
1530 valueRanges
.push([low
, hi
]);
1534 if (this.attr_("zoomCallback")) {
1535 var xRange
= this.xAxisRange();
1536 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1541 * Reset the zoom to the original view coordinates. This is the same as
1542 * double-clicking on the graph.
1546 Dygraph
.prototype.doUnzoom_
= function() {
1548 if (this.dateWindow_
!= null) {
1550 this.dateWindow_
= null;
1553 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1554 if (this.axes_
[i
].valueWindow
!= null) {
1556 delete this.axes_
[i
].valueWindow
;
1561 // Putting the drawing operation before the callback because it resets
1564 if (this.attr_("zoomCallback")) {
1565 var minDate
= this.rawData_
[0][0];
1566 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1567 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1573 * When the mouse moves in the canvas, display information about a nearby data
1574 * point and draw dots over those points in the data series. This function
1575 * takes care of cleanup of previously-drawn dots.
1576 * @param {Object} event The mousemove event from the browser.
1579 Dygraph
.prototype.mouseMove_
= function(event
) {
1580 // This prevents JS errors when mousing over the canvas before data loads.
1581 var points
= this.layout_
.points
;
1582 if (points
=== undefined
) return;
1584 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1589 // Loop through all the points and find the date nearest to our current
1591 var minDist
= 1e+100;
1593 for (var i
= 0; i
< points
.length
; i
++) {
1594 var point
= points
[i
];
1595 if (point
== null) continue;
1596 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1597 if (dist
> minDist
) continue;
1601 if (idx
>= 0) lastx
= points
[idx
].xval
;
1603 // Extract the points we've selected
1604 this.selPoints_
= [];
1605 var l
= points
.length
;
1606 if (!this.attr_("stackedGraph")) {
1607 for (var i
= 0; i
< l
; i
++) {
1608 if (points
[i
].xval
== lastx
) {
1609 this.selPoints_
.push(points
[i
]);
1613 // Need to 'unstack' points starting from the bottom
1614 var cumulative_sum
= 0;
1615 for (var i
= l
- 1; i
>= 0; i
--) {
1616 if (points
[i
].xval
== lastx
) {
1617 var p
= {}; // Clone the point since we modify it
1618 for (var k
in points
[i
]) {
1619 p
[k
] = points
[i
][k
];
1621 p
.yval
-= cumulative_sum
;
1622 cumulative_sum
+= p
.yval
;
1623 this.selPoints_
.push(p
);
1626 this.selPoints_
.reverse();
1629 if (this.attr_("highlightCallback")) {
1630 var px
= this.lastx_
;
1631 if (px
!== null && lastx
!= px
) {
1632 // only fire if the selected point has changed.
1633 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1637 // Save last x position for callbacks.
1638 this.lastx_
= lastx
;
1640 this.updateSelection_();
1644 * Transforms layout_.points index into data row number.
1645 * @param int layout_.points index
1646 * @return int row number, or -1 if none could be found.
1649 Dygraph
.prototype.idxToRow_
= function(idx
) {
1650 if (idx
< 0) return -1;
1652 for (var i
in this.layout_
.datasets
) {
1653 if (idx
< this.layout_
.datasets
[i
].length
) {
1654 return this.boundaryIds_
[0][0]+idx
;
1656 idx
-= this.layout_
.datasets
[i
].length
;
1661 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1662 Dygraph
.isOK
= function(x
) {
1663 return x
&& !isNaN(x
);
1666 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1667 // If no points are selected, we display a default legend. Traditionally,
1668 // this has been blank. But a better default would be a conventional legend,
1669 // which provides essential information for a non-interactive chart.
1670 if (typeof(x
) === 'undefined') {
1671 if (this.attr_('legend') != 'always') return '';
1673 var sepLines
= this.attr_('labelsSeparateLines');
1674 var labels
= this.attr_('labels');
1676 for (var i
= 1; i
< labels
.length
; i
++) {
1677 var c
= new RGBColor(this.plotter_
.colors
[labels
[i
]]);
1678 if (i
> 1) html
+= (sepLines
? '<br/>' : ' ');
1679 html
+= "<b><font color='" + c
.toHex() + "'>—" + labels
[i
] +
1685 var displayDigits
= this.numXDigits_
+ this.numExtraDigits_
;
1686 var html
= this.attr_('xValueFormatter')(x
, displayDigits
) + ":";
1688 var fmtFunc
= this.attr_('yValueFormatter');
1689 var showZeros
= this.attr_("labelsShowZeroValues");
1690 var sepLines
= this.attr_("labelsSeparateLines");
1691 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1692 var pt
= this.selPoints_
[i
];
1693 if (pt
.yval
== 0 && !showZeros
) continue;
1694 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1695 if (sepLines
) html
+= "<br/>";
1697 var c
= new RGBColor(this.plotter_
.colors
[pt
.name
]);
1698 var yval
= fmtFunc(pt
.yval
, displayDigits
);
1699 // TODO(danvk): use a template string here and make it an attribute.
1700 html
+= " <b><font color='" + c
.toHex() + "'>"
1701 + pt
.name
+ "</font></b>:"
1708 * Draw dots over the selectied points in the data series. This function
1709 * takes care of cleanup of previously-drawn dots.
1712 Dygraph
.prototype.updateSelection_
= function() {
1713 // Clear the previously drawn vertical, if there is one
1714 var ctx
= this.canvas_
.getContext("2d");
1715 if (this.previousVerticalX_
>= 0) {
1716 // Determine the maximum highlight circle size.
1717 var maxCircleSize
= 0;
1718 var labels
= this.attr_('labels');
1719 for (var i
= 1; i
< labels
.length
; i
++) {
1720 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1721 if (r
> maxCircleSize
) maxCircleSize
= r
;
1723 var px
= this.previousVerticalX_
;
1724 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1725 2 * maxCircleSize
+ 2, this.height_
);
1728 if (this.selPoints_
.length
> 0) {
1729 // Set the status message to indicate the selected point(s)
1730 if (this.attr_('showLabelsOnHighlight')) {
1731 var html
= this.generateLegendHTML_(this.lastx_
, this.selPoints_
);
1732 this.attr_("labelsDiv").innerHTML
= html
;
1735 // Draw colored circles over the center of each selected point
1736 var canvasx
= this.selPoints_
[0].canvasx
;
1738 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1739 var pt
= this.selPoints_
[i
];
1740 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1742 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1744 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1745 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1750 this.previousVerticalX_
= canvasx
;
1755 * Set manually set selected dots, and display information about them
1756 * @param int row number that should by highlighted
1757 * false value clears the selection
1760 Dygraph
.prototype.setSelection
= function(row
) {
1761 // Extract the points we've selected
1762 this.selPoints_
= [];
1765 if (row
!== false) {
1766 row
= row
-this.boundaryIds_
[0][0];
1769 if (row
!== false && row
>= 0) {
1770 for (var i
in this.layout_
.datasets
) {
1771 if (row
< this.layout_
.datasets
[i
].length
) {
1772 var point
= this.layout_
.points
[pos
+row
];
1774 if (this.attr_("stackedGraph")) {
1775 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1778 this.selPoints_
.push(point
);
1780 pos
+= this.layout_
.datasets
[i
].length
;
1784 if (this.selPoints_
.length
) {
1785 this.lastx_
= this.selPoints_
[0].xval
;
1786 this.updateSelection_();
1789 this.clearSelection();
1795 * The mouse has left the canvas. Clear out whatever artifacts remain
1796 * @param {Object} event the mouseout event from the browser.
1799 Dygraph
.prototype.mouseOut_
= function(event
) {
1800 if (this.attr_("unhighlightCallback")) {
1801 this.attr_("unhighlightCallback")(event
);
1804 if (this.attr_("hideOverlayOnMouseOut")) {
1805 this.clearSelection();
1810 * Remove all selection from the canvas
1813 Dygraph
.prototype.clearSelection
= function() {
1814 // Get rid of the overlay data
1815 var ctx
= this.canvas_
.getContext("2d");
1816 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1817 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
1818 this.selPoints_
= [];
1823 * Returns the number of the currently selected row
1824 * @return int row number, of -1 if nothing is selected
1827 Dygraph
.prototype.getSelection
= function() {
1828 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1832 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1833 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1834 return row
+ this.boundaryIds_
[0][0];
1840 Dygraph
.zeropad
= function(x
) {
1841 if (x
< 10) return "0" + x
; else return "" + x
;
1845 * Return a string version of the hours, minutes and seconds portion of a date.
1846 * @param {Number} date The JavaScript date (ms since epoch)
1847 * @return {String} A time of the form "HH:MM:SS"
1850 Dygraph
.hmsString_
= function(date
) {
1851 var zeropad
= Dygraph
.zeropad
;
1852 var d
= new Date(date
);
1853 if (d
.getSeconds()) {
1854 return zeropad(d
.getHours()) + ":" +
1855 zeropad(d
.getMinutes()) + ":" +
1856 zeropad(d
.getSeconds());
1858 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1863 * Convert a JS date to a string appropriate to display on an axis that
1864 * is displaying values at the stated granularity.
1865 * @param {Date} date The date to format
1866 * @param {Number} granularity One of the Dygraph granularity constants
1867 * @return {String} The formatted date
1870 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1871 if (granularity
>= Dygraph
.DECADAL
) {
1872 return date
.strftime('%Y');
1873 } else if (granularity
>= Dygraph
.MONTHLY
) {
1874 return date
.strftime('%b %y');
1876 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1877 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1878 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1880 return Dygraph
.hmsString_(date
.getTime());
1886 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1887 * @param {Number} date The JavaScript date (ms since epoch)
1888 * @return {String} A date of the form "YYYY/MM/DD"
1891 Dygraph
.dateString_
= function(date
) {
1892 var zeropad
= Dygraph
.zeropad
;
1893 var d
= new Date(date
);
1896 var year
= "" + d
.getFullYear();
1897 // Get a 0 padded month string
1898 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1899 // Get a 0 padded day string
1900 var day
= zeropad(d
.getDate());
1903 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1904 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1906 return year
+ "/" + month + "/" + day
+ ret
;
1910 * Fires when there's data available to be graphed.
1911 * @param {String} data Raw CSV data to be plotted
1914 Dygraph
.prototype.loadedEvent_
= function(data
) {
1915 this.rawData_
= this.parseCSV_(data
);
1919 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1920 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1921 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1924 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1927 Dygraph
.prototype.addXTicks_
= function() {
1928 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1930 if (this.dateWindow_
) {
1931 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1933 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1936 var formatter
= this.attr_('xTicker');
1937 var ret
= formatter(range
[0], range
[1], this);
1940 // Note: numericTicks() returns a {ticks: [...], numDigits: yy} dictionary,
1941 // whereas dateTicker and user-defined tickers typically just return a ticks
1943 if (ret
.ticks
!== undefined
) {
1945 this.numXDigits_
= ret
.numDigits
;
1950 this.layout_
.updateOptions({xTicks
: xTicks
});
1953 // Time granularity enumeration
1954 Dygraph
.SECONDLY
= 0;
1955 Dygraph
.TWO_SECONDLY
= 1;
1956 Dygraph
.FIVE_SECONDLY
= 2;
1957 Dygraph
.TEN_SECONDLY
= 3;
1958 Dygraph
.THIRTY_SECONDLY
= 4;
1959 Dygraph
.MINUTELY
= 5;
1960 Dygraph
.TWO_MINUTELY
= 6;
1961 Dygraph
.FIVE_MINUTELY
= 7;
1962 Dygraph
.TEN_MINUTELY
= 8;
1963 Dygraph
.THIRTY_MINUTELY
= 9;
1964 Dygraph
.HOURLY
= 10;
1965 Dygraph
.TWO_HOURLY
= 11;
1966 Dygraph
.SIX_HOURLY
= 12;
1968 Dygraph
.WEEKLY
= 14;
1969 Dygraph
.MONTHLY
= 15;
1970 Dygraph
.QUARTERLY
= 16;
1971 Dygraph
.BIANNUAL
= 17;
1972 Dygraph
.ANNUAL
= 18;
1973 Dygraph
.DECADAL
= 19;
1974 Dygraph
.CENTENNIAL
= 20;
1975 Dygraph
.NUM_GRANULARITIES
= 21;
1977 Dygraph
.SHORT_SPACINGS
= [];
1978 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1979 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1980 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1981 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1982 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1983 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1984 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1985 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1986 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1987 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1988 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1989 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1990 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1991 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1992 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1996 // If we used this time granularity, how many ticks would there be?
1997 // This is only an approximation, but it's generally good enough.
1999 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2000 if (granularity
< Dygraph
.MONTHLY
) {
2001 // Generate one tick mark for every fixed interval of time.
2002 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2003 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2005 var year_mod
= 1; // e.g. to only print one point every 10 years.
2006 var num_months
= 12;
2007 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2008 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2009 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2010 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2011 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2013 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2014 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2015 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2021 // Construct an x-axis of nicely-formatted times on meaningful boundaries
2022 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2024 // Returns an array containing {v: millis, label: label} dictionaries.
2026 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2027 var formatter
= this.attr_("xAxisLabelFormatter");
2029 if (granularity
< Dygraph
.MONTHLY
) {
2030 // Generate one tick mark for every fixed interval of time.
2031 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2032 var format
= '%d%b'; // e.g. "1Jan"
2034 // Find a time less than start_time which occurs on a "nice" time boundary
2035 // for this granularity.
2036 var g
= spacing
/ 1000;
2037 var d
= new Date(start_time
);
2038 if (g
<= 60) { // seconds
2039 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2043 if (g
<= 60) { // minutes
2044 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2049 if (g
<= 24) { // days
2050 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2055 if (g
== 7) { // one week
2056 d
.setDate(d
.getDate() - d
.getDay());
2061 start_time
= d
.getTime();
2063 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2064 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2067 // Display a tick mark on the first of a set of months of each year.
2068 // Years get a tick mark iff y % year_mod == 0. This is useful for
2069 // displaying a tick mark once every 10 years, say, on long time scales.
2071 var year_mod
= 1; // e.g. to only print one point every 10 years.
2073 if (granularity
== Dygraph
.MONTHLY
) {
2074 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2075 } else if (granularity
== Dygraph
.QUARTERLY
) {
2076 months
= [ 0, 3, 6, 9 ];
2077 } else if (granularity
== Dygraph
.BIANNUAL
) {
2079 } else if (granularity
== Dygraph
.ANNUAL
) {
2081 } else if (granularity
== Dygraph
.DECADAL
) {
2084 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2088 this.warn("Span of dates is too long");
2091 var start_year
= new Date(start_time
).getFullYear();
2092 var end_year
= new Date(end_time
).getFullYear();
2093 var zeropad
= Dygraph
.zeropad
;
2094 for (var i
= start_year
; i
<= end_year
; i
++) {
2095 if (i
% year_mod
!= 0) continue;
2096 for (var j
= 0; j
< months
.length
; j
++) {
2097 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2098 var t
= Dygraph
.dateStrToMillis(date_str
);
2099 if (t
< start_time
|| t
> end_time
) continue;
2100 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2110 * Add ticks to the x-axis based on a date range.
2111 * @param {Number} startDate Start of the date window (millis since epoch)
2112 * @param {Number} endDate End of the date window (millis since epoch)
2113 * @return {Array.<Object>} Array of {label, value} tuples.
2116 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2118 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2119 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2120 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2127 return self
.GetXAxis(startDate
, endDate
, chosen
);
2129 // TODO(danvk): signal error.
2133 // This is a list of human-friendly values at which to show tick marks on a log
2134 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2135 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2136 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2137 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2139 for (var power
= -39; power
<= 39; power
++) {
2140 var range
= Math
.pow(10, power
);
2141 for (var mult
= 1; mult
<= 9; mult
++) {
2142 var val
= range
* mult
;
2149 // val is the value to search for
2150 // arry is the value over which to search
2151 // if abs > 0, find the lowest entry greater than val
2152 // if abs < 0, find the highest entry less than val
2153 // if abs == 0, find the entry that equals val.
2154 // Currently does not work when val is outside the range of arry's values.
2155 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2156 if (low
== null || high
== null) {
2158 high
= arry
.length
- 1;
2166 var validIndex
= function(idx
) {
2167 return idx
>= 0 && idx
< arry
.length
;
2169 var mid
= parseInt((low
+ high
) / 2);
2170 var element
= arry
[mid
];
2171 if (element
== val
) {
2174 if (element
> val
) {
2176 // Accept if element > val, but also if prior element < val.
2178 if (validIndex(idx
) && arry
[idx
] < val
) {
2182 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2184 if (element
< val
) {
2186 // Accept if element < val, but also if prior element > val.
2188 if (validIndex(idx
) && arry
[idx
] > val
) {
2192 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2197 * Determine the number of significant figures in a Number up to the specified
2198 * precision. Note that there is no way to determine if a trailing '0' is
2199 * significant or not, so by convention we return 1 for all of the following
2200 * inputs: 1, 1.0, 1.00, 1.000 etc.
2201 * @param {Number} x The input value.
2202 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
2203 * Default and maximum allowed value is 13.
2204 * @return {Number} The number of significant figures which is >= 1.
2206 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
2207 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
2209 // Convert the number to its exponential notation form and work backwards,
2210 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
2211 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
2212 // the JavaScript interpreter handle the low level bits of the Number for us.
2213 var s
= x
.toExponential(precision
);
2214 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
2216 for (var i
= ePos
- 1; i
>= 0; i
--) {
2218 // Got to the decimal place. We'll call this 1 digit of precision because
2219 // we can't know for sure how many trailing 0s are significant.
2221 } else if (s
[i
] != '0') {
2222 // Found the first non-zero digit. Return the number of characters
2223 // except for the '.'.
2224 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
2228 // Occurs if toExponential() doesn't return a string containing 'e', which
2229 // should never happen.
2234 * Add ticks when the x axis has numbers on it (instead of dates)
2235 * TODO(konigsberg): Update comment.
2237 * @param {Number} minV minimum value
2238 * @param {Number} maxV maximum value
2240 * @param {function} attribute accessor function.
2241 * @return {Array.<Object>} Array of {label, value} tuples.
2244 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2245 var attr
= function(k
) {
2246 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2247 return self
.attr_(k
);
2252 for (var i
= 0; i
< vals
.length
; i
++) {
2253 ticks
.push({v
: vals
[i
]});
2256 if (axis_props
&& attr("logscale")) {
2257 var pixelsPerTick
= attr('pixelsPerYLabel');
2258 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2259 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2260 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2261 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2266 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2268 // Count the number of tick values would appear, if we can get at least
2269 // nTicks / 4 accept them
.
2270 var lastDisplayed
= null;
2271 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2272 var axisId
= axis_props
.yAxisId
;
2273 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2274 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2275 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2276 var tick
= { v
: tickValue
};
2277 if (lastDisplayed
== null) {
2279 tickValue
: tickValue
,
2283 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2285 tickValue
: tickValue
,
2294 // Since we went in backwards order.
2299 // ticks.length won't be 0 if the log scale function finds values to insert.
2300 if (ticks
.length
== 0) {
2302 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2303 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2304 // The first spacing greater than pixelsPerYLabel is what we use.
2305 // TODO(danvk): version that works on a log scale.
2306 if (attr("labelsKMG2")) {
2307 var mults
= [1, 2, 4, 8];
2309 var mults
= [1, 2, 5];
2311 var scale
, low_val
, high_val
, nTicks
;
2312 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2313 var pixelsPerTick
= attr('pixelsPerYLabel');
2314 for (var i
= -10; i
< 50; i
++) {
2315 if (attr("labelsKMG2")) {
2316 var base_scale
= Math
.pow(16, i
);
2318 var base_scale
= Math
.pow(10, i
);
2320 for (var j
= 0; j
< mults
.length
; j
++) {
2321 scale
= base_scale
* mults
[j
];
2322 low_val
= Math
.floor(minV
/ scale
) * scale
;
2323 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2324 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2325 var spacing
= self
.height_
/ nTicks
;
2326 // wish I could break out of both loops at once...
2327 if (spacing
> pixelsPerTick
) break;
2329 if (spacing
> pixelsPerTick
) break;
2332 // Construct the set of ticks.
2333 // Allow reverse y-axis if it's explicitly requested.
2334 if (low_val
> high_val
) scale
*= -1;
2335 for (var i
= 0; i
< nTicks
; i
++) {
2336 var tickV
= low_val
+ i
* scale
;
2337 ticks
.push( {v
: tickV
} );
2342 // Add formatted labels to the ticks.
2345 if (attr("labelsKMB")) {
2347 k_labels
= [ "K", "M", "B", "T" ];
2349 if (attr("labelsKMG2")) {
2350 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2352 k_labels
= [ "k", "M", "G", "T" ];
2354 var formatter
= attr('yAxisLabelFormatter') ?
2355 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2357 // Determine the number of decimal places needed for the labels below by
2358 // taking the maximum number of significant figures for any label. We must
2359 // take the max because we can't tell if trailing 0s are significant.
2361 for (var i
= 0; i
< ticks
.length
; i
++) {
2362 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
2365 // Add labels to the ticks.
2366 for (var i
= 0; i
< ticks
.length
; i
++) {
2367 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2368 var tickV
= ticks
[i
].v
;
2369 var absTickV
= Math
.abs(tickV
);
2370 var label
= (formatter
!== undefined
) ?
2371 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
2372 if (k_labels
.length
> 0) {
2373 // Round up to an appropriate unit.
2375 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2376 if (absTickV
>= n
) {
2377 label
= formatter(tickV
/ n
, numDigits
) + k_labels
[j
];
2382 ticks
[i
].label
= label
;
2385 return {ticks
: ticks
, numDigits
: numDigits
};
2388 // Computes the range of the data series (including confidence intervals).
2389 // series is either [ [x1, y1], [x2, y2], ... ] or
2390 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2391 // Returns [low, high]
2392 Dygraph
.prototype.extremeValues_
= function(series
) {
2393 var minY
= null, maxY
= null;
2395 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2397 // With custom bars, maxY is the max of the high values.
2398 for (var j
= 0; j
< series
.length
; j
++) {
2399 var y
= series
[j
][1][0];
2401 var low
= y
- series
[j
][1][1];
2402 var high
= y
+ series
[j
][1][2];
2403 if (low
> y
) low
= y
; // this can happen with custom bars,
2404 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2405 if (maxY
== null || high
> maxY
) {
2408 if (minY
== null || low
< minY
) {
2413 for (var j
= 0; j
< series
.length
; j
++) {
2414 var y
= series
[j
][1];
2415 if (y
=== null || isNaN(y
)) continue;
2416 if (maxY
== null || y
> maxY
) {
2419 if (minY
== null || y
< minY
) {
2425 return [minY
, maxY
];
2429 * This function is called once when the chart's data is changed or the options
2430 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2431 * idea is that values derived from the chart's data can be computed here,
2432 * rather than every time the chart is drawn. This includes things like the
2433 * number of axes, rolling averages, etc.
2435 Dygraph
.prototype.predraw_
= function() {
2436 // TODO(danvk): move more computations out of drawGraph_ and into here.
2437 this.computeYAxes_();
2439 // Create a new plotter.
2440 if (this.plotter_
) this.plotter_
.clear();
2441 this.plotter_
= new DygraphCanvasRenderer(this,
2442 this.hidden_
, this.layout_
,
2443 this.renderOptions_
);
2445 // The roller sits in the bottom left corner of the chart. We don't know where
2446 // this will be until the options are available, so it's positioned here.
2447 this.createRollInterface_();
2449 // Same thing applies for the labelsDiv. It's right edge should be flush with
2450 // the right edge of the charting area (which may not be the same as the right
2451 // edge of the div, if we have two y-axes.
2452 this.positionLabelsDiv_();
2454 // If the data or options have changed, then we'd better redraw.
2459 * Update the graph with new data. This method is called when the viewing area
2460 * has changed. If the underlying data or options have changed, predraw_ will
2461 * be called before drawGraph_ is called.
2464 Dygraph
.prototype.drawGraph_
= function() {
2465 var data
= this.rawData_
;
2467 // This is used to set the second parameter to drawCallback, below.
2468 var is_initial_draw
= this.is_initial_draw_
;
2469 this.is_initial_draw_
= false;
2471 var minY
= null, maxY
= null;
2472 this.layout_
.removeAllDatasets();
2474 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2476 // Loop over the fields (series). Go from the last to the first,
2477 // because if they're stacked that's how we accumulate the values.
2479 var cumulative_y
= []; // For stacked series.
2482 var extremes
= {}; // series name -> [low, high]
2484 // Loop over all fields and create datasets
2485 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2486 if (!this.visibility()[i
- 1]) continue;
2488 var seriesName
= this.attr_("labels")[i
];
2489 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2490 var logScale
= this.attr_('logscale', i
);
2493 for (var j
= 0; j
< data
.length
; j
++) {
2494 var date
= data
[j
][0];
2495 var point
= data
[j
][i
];
2497 // On the log scale, points less than zero do not exist.
2498 // This will create a gap in the chart. Note that this ignores
2499 // connectSeparatedPoints.
2503 series
.push([date
, point
]);
2505 if (point
!= null || !connectSeparatedPoints
) {
2506 series
.push([date
, point
]);
2511 // TODO(danvk): move this into predraw_. It's insane to do it here.
2512 series
= this.rollingAverage(series
, this.rollPeriod_
);
2514 // Prune down to the desired range, if necessary (for zooming)
2515 // Because there can be lines going to points outside of the visible area,
2516 // we actually prune to visible points, plus one on either side.
2517 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2518 if (this.dateWindow_
) {
2519 var low
= this.dateWindow_
[0];
2520 var high
= this.dateWindow_
[1];
2522 // TODO(danvk): do binary search instead of linear search.
2523 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2524 var firstIdx
= null, lastIdx
= null;
2525 for (var k
= 0; k
< series
.length
; k
++) {
2526 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2529 if (series
[k
][0] <= high
) {
2533 if (firstIdx
=== null) firstIdx
= 0;
2534 if (firstIdx
> 0) firstIdx
--;
2535 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2536 if (lastIdx
< series
.length
- 1) lastIdx
++;
2537 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2538 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2539 pruned
.push(series
[k
]);
2543 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2546 var seriesExtremes
= this.extremeValues_(series
);
2549 for (var j
=0; j
<series
.length
; j
++) {
2550 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2553 } else if (this.attr_("stackedGraph")) {
2554 var l
= series
.length
;
2556 for (var j
= 0; j
< l
; j
++) {
2557 // If one data set has a NaN, let all subsequent stacked
2558 // sets inherit the NaN -- only start at 0 for the first set.
2559 var x
= series
[j
][0];
2560 if (cumulative_y
[x
] === undefined
) {
2561 cumulative_y
[x
] = 0;
2564 actual_y
= series
[j
][1];
2565 cumulative_y
[x
] += actual_y
;
2567 series
[j
] = [x
, cumulative_y
[x
]]
2569 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2570 seriesExtremes
[1] = cumulative_y
[x
];
2572 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2573 seriesExtremes
[0] = cumulative_y
[x
];
2577 extremes
[seriesName
] = seriesExtremes
;
2579 datasets
[i
] = series
;
2582 for (var i
= 1; i
< datasets
.length
; i
++) {
2583 if (!this.visibility()[i
- 1]) continue;
2584 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2587 this.computeYAxisRanges_(extremes
);
2588 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2589 seriesToAxisMap
: this.seriesToAxisMap_
2594 // Tell PlotKit to use this new data and render itself
2595 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2596 this.layout_
.evaluateWithError();
2597 this.plotter_
.clear();
2598 this.plotter_
.render();
2599 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2600 this.canvas_
.height
);
2602 if (is_initial_draw
) {
2603 // Generate a static legend before any particular point is selected.
2604 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
2607 if (this.attr_("drawCallback") !== null) {
2608 this.attr_("drawCallback")(this, is_initial_draw
);
2613 * Determine properties of the y-axes which are independent of the data
2614 * currently being displayed. This includes things like the number of axes and
2615 * the style of the axes. It does not include the range of each axis and its
2617 * This fills in this.axes_ and this.seriesToAxisMap_.
2618 * axes_ = [ { options } ]
2619 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2620 * indices are into the axes_ array.
2622 Dygraph
.prototype.computeYAxes_
= function() {
2623 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2624 this.seriesToAxisMap_
= {};
2626 // Get a list of series names.
2627 var labels
= this.attr_("labels");
2629 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2631 // all options which could be applied per-axis:
2639 'axisLabelFontSize',
2644 // Copy global axis options over to the first axis.
2645 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2646 var k
= axisOptions
[i
];
2647 var v
= this.attr_(k
);
2648 if (v
) this.axes_
[0][k
] = v
;
2651 // Go through once and add all the axes.
2652 for (var seriesName
in series
) {
2653 if (!series
.hasOwnProperty(seriesName
)) continue;
2654 var axis
= this.attr_("axis", seriesName
);
2656 this.seriesToAxisMap_
[seriesName
] = 0;
2659 if (typeof(axis
) == 'object') {
2660 // Add a new axis, making a copy of its per-axis options.
2662 Dygraph
.update(opts
, this.axes_
[0]);
2663 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2664 var yAxisId
= this.axes_
.length
;
2665 opts
.yAxisId
= yAxisId
;
2667 Dygraph
.update(opts
, axis
);
2668 this.axes_
.push(opts
);
2669 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2673 // Go through one more time and assign series to an axis defined by another
2674 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2675 for (var seriesName
in series
) {
2676 if (!series
.hasOwnProperty(seriesName
)) continue;
2677 var axis
= this.attr_("axis", seriesName
);
2678 if (typeof(axis
) == 'string') {
2679 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2680 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2681 "series " + axis
+ ", which does not define its own axis.");
2684 var idx
= this.seriesToAxisMap_
[axis
];
2685 this.seriesToAxisMap_
[seriesName
] = idx
;
2689 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2690 // this last so that hiding the first series doesn't destroy the axis
2691 // properties of the primary axis.
2692 var seriesToAxisFiltered
= {};
2693 var vis
= this.visibility();
2694 for (var i
= 1; i
< labels
.length
; i
++) {
2696 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2698 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2702 * Returns the number of y-axes on the chart.
2703 * @return {Number} the number of axes.
2705 Dygraph
.prototype.numAxes
= function() {
2707 for (var series
in this.seriesToAxisMap_
) {
2708 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2709 var idx
= this.seriesToAxisMap_
[series
];
2710 if (idx
> last_axis
) last_axis
= idx
;
2712 return 1 + last_axis
;
2716 * Determine the value range and tick marks for each axis.
2717 * @param {Object} extremes A mapping from seriesName -> [low, high]
2718 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2720 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2721 // Build a map from axis number -> [list of series names]
2722 var seriesForAxis
= [];
2723 for (var series
in this.seriesToAxisMap_
) {
2724 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2725 var idx
= this.seriesToAxisMap_
[series
];
2726 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2727 seriesForAxis
[idx
].push(series
);
2730 // If no series are defined or visible then fill in some reasonable defaults.
2731 if (seriesForAxis
.length
== 0) {
2732 var axis
= this.axes_
[0];
2733 axis
.computedValueRange
= [0, 1];
2735 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2736 axis
.computedValueRange
[1],
2739 axis
.ticks
= ret
.ticks
;
2740 this.numYDigits_
= ret
.numDigits
;
2744 // Compute extreme values, a span and tick marks for each axis.
2745 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2746 var axis
= this.axes_
[i
];
2749 // Calculate the extremes of extremes.
2750 var series
= seriesForAxis
[i
];
2751 var minY
= Infinity
; // extremes[series[0]][0];
2752 var maxY
= -Infinity
; // extremes[series[0]][1];
2753 for (var j
= 0; j
< series
.length
; j
++) {
2754 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2755 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2757 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2759 // Add some padding and round up to an integer to be human-friendly.
2760 var span
= maxY
- minY
;
2761 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2762 if (span
== 0) { span
= maxY
; }
2766 if (axis
.logscale
) {
2767 var maxAxisY
= maxY
+ 0.1 * span
;
2768 var minAxisY
= minY
;
2770 var maxAxisY
= maxY
+ 0.1 * span
;
2771 var minAxisY
= minY
- 0.1 * span
;
2773 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2774 if (!this.attr_("avoidMinZero")) {
2775 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2776 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2779 if (this.attr_("includeZero")) {
2780 if (maxY
< 0) maxAxisY
= 0;
2781 if (minY
> 0) minAxisY
= 0;
2784 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2786 if (axis
.valueWindow
) {
2787 // This is only set if the user has zoomed on the y-axis. It is never set
2788 // by a user. It takes precedence over axis.valueRange because, if you set
2789 // valueRange, you'd still expect to be able to pan.
2790 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2791 } else if (axis
.valueRange
) {
2792 // This is a user-set value range for this axis.
2793 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2795 axis
.computedValueRange
= axis
.extremeRange
;
2798 // Add ticks. By default, all axes inherit the tick positions of the
2799 // primary axis. However, if an axis is specifically marked as having
2800 // independent ticks, then that is permissible as well.
2801 if (i
== 0 || axis
.independentTicks
) {
2803 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2804 axis
.computedValueRange
[1],
2807 axis
.ticks
= ret
.ticks
;
2808 this.numYDigits_
= ret
.numDigits
;
2810 var p_axis
= this.axes_
[0];
2811 var p_ticks
= p_axis
.ticks
;
2812 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2813 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2814 var tick_values
= [];
2815 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2816 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2817 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2818 tick_values
.push(y_val
);
2822 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2823 axis
.computedValueRange
[1],
2824 this, axis
, tick_values
);
2825 axis
.ticks
= ret
.ticks
;
2826 this.numYDigits_
= ret
.numDigits
;
2832 * Calculates the rolling average of a data set.
2833 * If originalData is [label, val], rolls the average of those.
2834 * If originalData is [label, [, it's interpreted as [value, stddev]
2835 * and the roll is returned in the same form, with appropriately reduced
2836 * stddev for each value.
2837 * Note that this is where fractional input (i.e. '5/10') is converted into
2839 * @param {Array} originalData The data in the appropriate format (see above)
2840 * @param {Number} rollPeriod The number of points over which to average the
2843 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2844 if (originalData
.length
< 2)
2845 return originalData
;
2846 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2847 var rollingData
= [];
2848 var sigma
= this.attr_("sigma");
2850 if (this.fractions_
) {
2852 var den
= 0; // numerator/denominator
2854 for (var i
= 0; i
< originalData
.length
; i
++) {
2855 num
+= originalData
[i
][1][0];
2856 den
+= originalData
[i
][1][1];
2857 if (i
- rollPeriod
>= 0) {
2858 num
-= originalData
[i
- rollPeriod
][1][0];
2859 den
-= originalData
[i
- rollPeriod
][1][1];
2862 var date
= originalData
[i
][0];
2863 var value
= den
? num
/ den
: 0.0;
2864 if (this.attr_("errorBars")) {
2865 if (this.wilsonInterval_
) {
2866 // For more details on this confidence interval, see:
2867 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2869 var p
= value
< 0 ? 0 : value
, n
= den
;
2870 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2871 var denom
= 1 + sigma
* sigma
/ den
;
2872 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2873 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2874 rollingData
[i
] = [date
,
2875 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2877 rollingData
[i
] = [date
, [0, 0, 0]];
2880 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2881 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2884 rollingData
[i
] = [date
, mult
* value
];
2887 } else if (this.attr_("customBars")) {
2892 for (var i
= 0; i
< originalData
.length
; i
++) {
2893 var data
= originalData
[i
][1];
2895 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2897 if (y
!= null && !isNaN(y
)) {
2903 if (i
- rollPeriod
>= 0) {
2904 var prev
= originalData
[i
- rollPeriod
];
2905 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2912 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2913 1.0 * (mid
- low
) / count
,
2914 1.0 * (high
- mid
) / count
]];
2917 // Calculate the rolling average for the first rollPeriod - 1 points where
2918 // there is not enough data to roll over the full number of points
2919 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2920 if (!this.attr_("errorBars")){
2921 if (rollPeriod
== 1) {
2922 return originalData
;
2925 for (var i
= 0; i
< originalData
.length
; i
++) {
2928 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2929 var y
= originalData
[j
][1];
2930 if (y
== null || isNaN(y
)) continue;
2932 sum
+= originalData
[j
][1];
2935 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2937 rollingData
[i
] = [originalData
[i
][0], null];
2942 for (var i
= 0; i
< originalData
.length
; i
++) {
2946 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2947 var y
= originalData
[j
][1][0];
2948 if (y
== null || isNaN(y
)) continue;
2950 sum
+= originalData
[j
][1][0];
2951 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2954 var stddev
= Math
.sqrt(variance
) / num_ok
;
2955 rollingData
[i
] = [originalData
[i
][0],
2956 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2958 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2968 * Parses a date, returning the number of milliseconds since epoch. This can be
2969 * passed in as an xValueParser in the Dygraph constructor.
2970 * TODO(danvk): enumerate formats that this understands.
2971 * @param {String} A date in YYYYMMDD format.
2972 * @return {Number} Milliseconds since epoch.
2975 Dygraph
.dateParser
= function(dateStr
, self
) {
2978 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2979 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2980 while (dateStrSlashed
.search("-") != -1) {
2981 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2983 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2984 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2985 // TODO(danvk): remove support for this format. It's confusing.
2986 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2987 + "/" + dateStr
.substr(6,2);
2988 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2990 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2991 // "2009/07/12 12:34:56"
2992 d
= Dygraph
.dateStrToMillis(dateStr
);
2995 if (!d
|| isNaN(d
)) {
2996 self
.error("Couldn't parse " + dateStr
+ " as a date");
3002 * Detects the type of the str (date or numeric) and sets the various
3003 * formatting attributes in this.attrs_ based on this type.
3004 * @param {String} str An x value.
3007 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3009 if (str
.indexOf('-') > 0 ||
3010 str
.indexOf('/') >= 0 ||
3011 isNaN(parseFloat(str
))) {
3013 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3014 // TODO(danvk): remove support for this format.
3019 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3020 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3021 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3022 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3024 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3025 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3026 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3027 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3032 * Parses the value as a floating point number. This is like the parseFloat()
3033 * built-in, but with a few differences:
3034 * - the empty string is parsed as null, rather than NaN.
3035 * - if the string cannot be parsed at all, an error is logged.
3036 * If the string can't be parsed, this method returns null.
3037 * @param {String} x The string to be parsed
3038 * @param {Number} opt_line_no The line number from which the string comes.
3039 * @param {String} opt_line The text of the line from which the string comes.
3043 // Parse the x as a float or return null if it's not a number.
3044 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3045 var val
= parseFloat(x
);
3046 if (!isNaN(val
)) return val
;
3048 // Try to figure out what happeend.
3049 // If the value is the empty string, parse it as null.
3050 if (/^ *$/.test(x
)) return null;
3052 // If it was actually "NaN", return it as NaN.
3053 if (/^ *nan *$/i.test(x
)) return NaN
;
3055 // Looks like a parsing error.
3056 var msg
= "Unable to parse '" + x
+ "' as a number";
3057 if (opt_line
!== null && opt_line_no
!== null) {
3058 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3066 * Parses a string in a special csv format. We expect a csv file where each
3067 * line is a date point, and the first field in each line is the date string.
3068 * We also expect that all remaining fields represent series.
3069 * if the errorBars attribute is set, then interpret the fields as:
3070 * date, series1, stddev1, series2, stddev2, ...
3071 * @param {Array.<Object>} data See above.
3074 * @return Array.<Object> An array with one entry for each row. These entries
3075 * are an array of cells in that row. The first entry is the parsed x-value for
3076 * the row. The second, third, etc. are the y-values. These can take on one of
3077 * three forms, depending on the CSV and constructor parameters:
3079 * 2. [ value, stddev ]
3080 * 3. [ low value, center value, high value ]
3082 Dygraph
.prototype.parseCSV_
= function(data
) {
3084 var lines
= data
.split("\n");
3086 // Use the default delimiter or fall back to a tab if that makes sense.
3087 var delim
= this.attr_('delimiter');
3088 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3093 if (this.labelsFromCSV_
) {
3095 this.attrs_
.labels
= lines
[0].split(delim
);
3100 var defaultParserSet
= false; // attempt to auto-detect x value type
3101 var expectedCols
= this.attr_("labels").length
;
3102 var outOfOrder
= false;
3103 for (var i
= start
; i
< lines
.length
; i
++) {
3104 var line
= lines
[i
];
3106 if (line
.length
== 0) continue; // skip blank lines
3107 if (line
[0] == '#') continue; // skip comment lines
3108 var inFields
= line
.split(delim
);
3109 if (inFields
.length
< 2) continue;
3112 if (!defaultParserSet
) {
3113 this.detectTypeFromString_(inFields
[0]);
3114 xParser
= this.attr_("xValueParser");
3115 defaultParserSet
= true;
3117 fields
[0] = xParser(inFields
[0], this);
3119 // If fractions are expected, parse the numbers as "A/B
"
3120 if (this.fractions_) {
3121 for (var j = 1; j < inFields.length; j++) {
3122 // TODO(danvk): figure out an appropriate way to flag parse errors.
3123 var vals = inFields[j].split("/");
3124 if (vals.length != 2) {
3125 this.error('Expected fractional "num
/den
" values in CSV data ' +
3126 "but found a value
'" + inFields[j] + "' on line
" +
3127 (1 + i) + " ('" + line + "') which is not of
this form
.");
3130 fields[j] = [this.parseFloat_(vals[0], i, line),
3131 this.parseFloat_(vals[1], i, line)];
3134 } else if (this.attr_("errorBars
")) {
3135 // If there are error bars, values are (value, stddev) pairs
3136 if (inFields.length % 2 != 1) {
3137 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3138 'but line ' + (1 + i) + ' has an odd number of values (' +
3139 (inFields.length - 1) + "): '" + line + "'");
3141 for (var j = 1; j < inFields.length; j += 2) {
3142 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3143 this.parseFloat_(inFields[j + 1], i, line)];
3145 } else if (this.attr_("customBars
")) {
3146 // Bars are a low;center;high tuple
3147 for (var j = 1; j < inFields.length; j++) {
3148 var vals = inFields[j].split(";");
3149 fields[j] = [ this.parseFloat_(vals[0], i, line),
3150 this.parseFloat_(vals[1], i, line),
3151 this.parseFloat_(vals[2], i, line) ];
3154 // Values are just numbers
3155 for (var j = 1; j < inFields.length; j++) {
3156 fields[j] = this.parseFloat_(inFields[j], i, line);
3159 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3163 if (fields.length != expectedCols) {
3164 this.error("Number of columns
in line
" + i + " (" + fields.length +
3165 ") does not agree
with number of
labels (" + expectedCols +
3169 // If the user specified the 'labels' option and none of the cells of the
3170 // first row parsed correctly, then they probably double-specified the
3171 // labels. We go with the values set in the option, discard this row and
3172 // log a warning to the JS console.
3173 if (i == 0 && this.attr_('labels')) {
3174 var all_null = true;
3175 for (var j = 0; all_null && j < fields.length; j++) {
3176 if (fields[j]) all_null = false;
3179 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3180 "CSV
data ('" + line + "') appears to also contain labels
. " +
3181 "Will drop the CSV labels and
use the option labels
.");
3189 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3190 ret.sort(function(a,b) { return a[0] - b[0] });
3197 * The user has provided their data as a pre-packaged JS array. If the x values
3198 * are numeric, this is the same as dygraphs' internal format. If the x values
3199 * are dates, we need to convert them from Date objects to ms since epoch.
3200 * @param {Array.<Object>} data
3201 * @return {Array.<Object>} data with numeric x values.
3203 Dygraph.prototype.parseArray_ = function(data) {
3204 // Peek at the first x value to see if it's numeric.
3205 if (data.length == 0) {
3206 this.error("Can
't plot empty data set");
3209 if (data[0].length == 0) {
3210 this.error("Data set cannot contain an empty row");
3214 if (this.attr_("labels") == null) {
3215 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3216 "in the options parameter");
3217 this.attrs_.labels = [ "X" ];
3218 for (var i = 1; i < data[0].length; i++) {
3219 this.attrs_.labels.push("Y" + i);
3223 if (Dygraph.isDateLike(data[0][0])) {
3224 // Some intelligent defaults for a date x-axis.
3225 this.attrs_.xValueFormatter = Dygraph.dateString_;
3226 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3227 this.attrs_.xTicker = Dygraph.dateTicker;
3229 // Assume they're all dates
.
3230 var parsedData
= Dygraph
.clone(data
);
3231 for (var i
= 0; i
< data
.length
; i
++) {
3232 if (parsedData
[i
].length
== 0) {
3233 this.error("Row " + (1 + i
) + " of data is empty");
3236 if (parsedData
[i
][0] == null
3237 || typeof(parsedData
[i
][0].getTime
) != 'function'
3238 || isNaN(parsedData
[i
][0].getTime())) {
3239 this.error("x value in row " + (1 + i
) + " is not a Date");
3242 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3246 // Some intelligent defaults for a numeric x-axis.
3247 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3248 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3254 * Parses a DataTable object from gviz.
3255 * The data is expected to have a first column that is either a date or a
3256 * number. All subsequent columns must be numbers. If there is a clear mismatch
3257 * between this.xValueParser_ and the type of the first column, it will be
3258 * fixed. Fills out rawData_.
3259 * @param {Array.<Object>} data See above.
3262 Dygraph
.prototype.parseDataTable_
= function(data
) {
3263 var cols
= data
.getNumberOfColumns();
3264 var rows
= data
.getNumberOfRows();
3266 var indepType
= data
.getColumnType(0);
3267 if (indepType
== 'date' || indepType
== 'datetime') {
3268 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3269 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3270 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3271 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3272 } else if (indepType
== 'number') {
3273 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3274 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3275 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3276 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3278 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3279 "column 1 of DataTable input (Got '" + indepType
+ "')");
3283 // Array of the column indices which contain data (and not annotations).
3285 var annotationCols
= {}; // data index -> [annotation cols]
3286 var hasAnnotations
= false;
3287 for (var i
= 1; i
< cols
; i
++) {
3288 var type
= data
.getColumnType(i
);
3289 if (type
== 'number') {
3291 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3292 // This is OK -- it's an annotation column.
3293 var dataIdx
= colIdx
[colIdx
.length
- 1];
3294 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3295 annotationCols
[dataIdx
] = [i
];
3297 annotationCols
[dataIdx
].push(i
);
3299 hasAnnotations
= true;
3301 this.error("Only 'number' is supported as a dependent type with Gviz." +
3302 " 'string' is only supported if displayAnnotations is true");
3306 // Read column labels
3307 // TODO(danvk): add support back for errorBars
3308 var labels
= [data
.getColumnLabel(0)];
3309 for (var i
= 0; i
< colIdx
.length
; i
++) {
3310 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3311 if (this.attr_("errorBars")) i
+= 1;
3313 this.attrs_
.labels
= labels
;
3314 cols
= labels
.length
;
3317 var outOfOrder
= false;
3318 var annotations
= [];
3319 for (var i
= 0; i
< rows
; i
++) {
3321 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3322 data
.getValue(i
, 0) === null) {
3323 this.warn("Ignoring row " + i
+
3324 " of DataTable because of undefined or null first column.");
3328 if (indepType
== 'date' || indepType
== 'datetime') {
3329 row
.push(data
.getValue(i
, 0).getTime());
3331 row
.push(data
.getValue(i
, 0));
3333 if (!this.attr_("errorBars")) {
3334 for (var j
= 0; j
< colIdx
.length
; j
++) {
3335 var col
= colIdx
[j
];
3336 row
.push(data
.getValue(i
, col
));
3337 if (hasAnnotations
&&
3338 annotationCols
.hasOwnProperty(col
) &&
3339 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3341 ann
.series
= data
.getColumnLabel(col
);
3343 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3345 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3346 if (k
) ann
.text
+= "\n";
3347 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3349 annotations
.push(ann
);
3353 // Strip out infinities, which give dygraphs problems later on.
3354 for (var j
= 0; j
< row
.length
; j
++) {
3355 if (!isFinite(row
[j
])) row
[j
] = null;
3358 for (var j
= 0; j
< cols
- 1; j
++) {
3359 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3362 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3369 this.warn("DataTable is out of order; order it correctly to speed loading.");
3370 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3372 this.rawData_
= ret
;
3374 if (annotations
.length
> 0) {
3375 this.setAnnotations(annotations
, true);
3379 // This is identical to JavaScript's built-in Date.parse() method, except that
3380 // it doesn't get replaced with an incompatible method by aggressive JS
3381 // libraries like MooTools or Joomla.
3382 Dygraph
.dateStrToMillis
= function(str
) {
3383 return new Date(str
).getTime();
3386 // These functions are all based on MochiKit.
3387 Dygraph
.update
= function (self
, o
) {
3388 if (typeof(o
) != 'undefined' && o
!== null) {
3390 if (o
.hasOwnProperty(k
)) {
3398 Dygraph
.isArrayLike
= function (o
) {
3399 var typ
= typeof(o
);
3401 (typ
!= 'object' && !(typ
== 'function' &&
3402 typeof(o
.item
) == 'function')) ||
3404 typeof(o
.length
) != 'number' ||
3412 Dygraph
.isDateLike
= function (o
) {
3413 if (typeof(o
) != "object" || o
=== null ||
3414 typeof(o
.getTime
) != 'function') {
3420 Dygraph
.clone
= function(o
) {
3421 // TODO(danvk): figure out how MochiKit's version works
3423 for (var i
= 0; i
< o
.length
; i
++) {
3424 if (Dygraph
.isArrayLike(o
[i
])) {
3425 r
.push(Dygraph
.clone(o
[i
]));
3435 * Get the CSV data. If it's in a function, call that function. If it's in a
3436 * file, do an XMLHttpRequest to get it.
3439 Dygraph
.prototype.start_
= function() {
3440 if (typeof this.file_
== 'function') {
3441 // CSV string. Pretend we got it via XHR.
3442 this.loadedEvent_(this.file_());
3443 } else if (Dygraph
.isArrayLike(this.file_
)) {
3444 this.rawData_
= this.parseArray_(this.file_
);
3446 } else if (typeof this.file_
== 'object' &&
3447 typeof this.file_
.getColumnRange
== 'function') {
3448 // must be a DataTable from gviz.
3449 this.parseDataTable_(this.file_
);
3451 } else if (typeof this.file_
== 'string') {
3452 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3453 if (this.file_
.indexOf('\n') >= 0) {
3454 this.loadedEvent_(this.file_
);
3456 var req
= new XMLHttpRequest();
3458 req
.onreadystatechange
= function () {
3459 if (req
.readyState
== 4) {
3460 if (req
.status
== 200) {
3461 caller
.loadedEvent_(req
.responseText
);
3466 req
.open("GET", this.file_
, true);
3470 this.error("Unknown data format: " + (typeof this.file_
));
3475 * Changes various properties of the graph. These can include:
3477 * <li>file: changes the source data for the graph</li>
3478 * <li>errorBars: changes whether the data contains stddev</li>
3480 * @param {Object} attrs The new properties and values
3482 Dygraph
.prototype.updateOptions
= function(attrs
) {
3483 // TODO(danvk): this is a mess. Rethink this function.
3484 if ('rollPeriod' in attrs
) {
3485 this.rollPeriod_
= attrs
.rollPeriod
;
3487 if ('dateWindow' in attrs
) {
3488 this.dateWindow_
= attrs
.dateWindow
;
3491 // TODO(danvk): validate per-series options.
3496 // highlightCircleSize
3498 Dygraph
.update(this.user_attrs_
, attrs
);
3499 Dygraph
.update(this.renderOptions_
, attrs
);
3501 this.labelsFromCSV_
= (this.attr_("labels") == null);
3503 // TODO(danvk): this doesn't match the constructor logic
3504 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3505 if (attrs
['file']) {
3506 this.file_
= attrs
['file'];
3514 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3515 * containing div (which has presumably changed size since the dygraph was
3516 * instantiated. If the width/height are specified, the div will be resized.
3518 * This is far more efficient than destroying and re-instantiating a
3519 * Dygraph, since it doesn't have to reparse the underlying data.
3521 * @param {Number} width Width (in pixels)
3522 * @param {Number} height Height (in pixels)
3524 Dygraph
.prototype.resize
= function(width
, height
) {
3525 if (this.resize_lock
) {
3528 this.resize_lock
= true;
3530 if ((width
=== null) != (height
=== null)) {
3531 this.warn("Dygraph.resize() should be called with zero parameters or " +
3532 "two non-NULL parameters. Pretending it was zero.");
3533 width
= height
= null;
3536 // TODO(danvk): there should be a clear() method.
3537 this.maindiv_
.innerHTML
= "";
3538 this.attrs_
.labelsDiv
= null;
3541 this.maindiv_
.style
.width
= width
+ "px";
3542 this.maindiv_
.style
.height
= height
+ "px";
3543 this.width_
= width
;
3544 this.height_
= height
;
3546 this.width_
= this.maindiv_
.offsetWidth
;
3547 this.height_
= this.maindiv_
.offsetHeight
;
3550 this.createInterface_();
3553 this.resize_lock
= false;
3557 * Adjusts the number of points in the rolling average. Updates the graph to
3558 * reflect the new averaging period.
3559 * @param {Number} length Number of points over which to average the data.
3561 Dygraph
.prototype.adjustRoll
= function(length
) {
3562 this.rollPeriod_
= length
;
3567 * Returns a boolean array of visibility statuses.
3569 Dygraph
.prototype.visibility
= function() {
3570 // Do lazy-initialization, so that this happens after we know the number of
3572 if (!this.attr_("visibility")) {
3573 this.attrs_
["visibility"] = [];
3575 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3576 this.attr_("visibility").push(true);
3578 return this.attr_("visibility");
3582 * Changes the visiblity of a series.
3584 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3585 var x
= this.visibility();
3586 if (num
< 0 || num
>= x
.length
) {
3587 this.warn("invalid series number in setVisibility: " + num
);
3595 * Update the list of annotations and redraw the chart.
3597 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3598 // Only add the annotation CSS rule once we know it will be used.
3599 Dygraph
.addAnnotationRule();
3600 this.annotations_
= ann
;
3601 this.layout_
.setAnnotations(this.annotations_
);
3602 if (!suppressDraw
) {
3608 * Return the list of annotations.
3610 Dygraph
.prototype.annotations
= function() {
3611 return this.annotations_
;
3615 * Get the index of a series (column) given its name. The first column is the
3616 * x-axis, so the data series start with index 1.
3618 Dygraph
.prototype.indexFromSetName
= function(name
) {
3619 var labels
= this.attr_("labels");
3620 for (var i
= 0; i
< labels
.length
; i
++) {
3621 if (labels
[i
] == name
) return i
;
3626 Dygraph
.addAnnotationRule
= function() {
3627 if (Dygraph
.addedAnnotationCSS
) return;
3629 var rule
= "border: 1px solid black; " +
3630 "background-color: white; " +
3631 "text-align: center;";
3633 var styleSheetElement
= document
.createElement("style");
3634 styleSheetElement
.type
= "text/css";
3635 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3637 // Find the first style sheet that we can access.
3638 // We may not add a rule to a style sheet from another domain for security
3639 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3640 // adds its own style sheets from google.com.
3641 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3642 if (document
.styleSheets
[i
].disabled
) continue;
3643 var mysheet
= document
.styleSheets
[i
];
3645 if (mysheet
.insertRule
) { // Firefox
3646 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3647 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3648 } else if (mysheet
.addRule
) { // IE
3649 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3651 Dygraph
.addedAnnotationCSS
= true;
3654 // Was likely a security exception.
3658 this.warn("Unable to add default annotation CSS rule; display may be off.");
3662 * Create a new canvas element. This is more complex than a simple
3663 * document.createElement("canvas") because of IE and excanvas.
3665 Dygraph
.createCanvas
= function() {
3666 var canvas
= document
.createElement("canvas");
3668 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3669 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3670 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3678 * A wrapper around Dygraph that implements the gviz API.
3679 * @param {Object} container The DOM object the visualization should live in.
3681 Dygraph
.GVizChart
= function(container
) {
3682 this.container
= container
;
3685 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3686 // Clear out any existing dygraph.
3687 // TODO(danvk): would it make more sense to simply redraw using the current
3688 // date_graph object?
3689 this.container
.innerHTML
= '';
3690 if (typeof(this.date_graph
) != 'undefined') {
3691 this.date_graph
.destroy();
3694 this.date_graph
= new Dygraph(this.container
, data
, options
);
3698 * Google charts compatible setSelection
3699 * Only row selection is supported, all points in the row will be highlighted
3700 * @param {Array} array of the selected cells
3703 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3705 if (selection_array
.length
) {
3706 row
= selection_array
[0].row
;
3708 this.date_graph
.setSelection(row
);
3712 * Google charts compatible getSelection implementation
3713 * @return {Array} array of the selected cells
3716 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3719 var row
= this.date_graph
.getSelection();
3721 if (row
< 0) return selection
;
3724 for (var i
in this.date_graph
.layout_
.datasets
) {
3725 selection
.push({row
: row
, column
: col
});
3732 // Older pages may still use this name.
3733 DateGraph
= Dygraph
;
3735 // <REMOVE_FOR_COMBINED>
3736 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
3739 "default": "parseFloat() or Date.parse()*",
3740 "labels": ["CSV parsing"],
3741 "type": "function(str) -> number",
3742 "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."
3746 "labels": ["Data Line display"],
3748 "description": "If set, stack series on top of one another rather than drawing them independently."
3752 "labels": ["Data Line display"],
3754 "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."
3756 "labelsDivStyles": {
3758 "labels": ["Legend"],
3760 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
3764 "labels": ["Data Line display"],
3766 "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."
3770 "labels": ["Overall display"],
3772 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3776 "labels": ["Callbacks"],
3777 "type": "function(minDate, maxDate, yRanges)",
3778 "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."
3780 "pointClickCallback": {
3782 "labels": ["Callbacks", "Interactive Elements"],
3787 "default": "(see description)",
3788 "labels": ["Data Series Colors"],
3789 "type": "array<string>",
3790 "example": "['red', '#00FF00']",
3791 "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."
3793 "connectSeparatedPoints": {
3795 "labels": ["Data Line display"],
3797 "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."
3799 "highlightCallback": {
3801 "labels": ["Callbacks"],
3802 "type": "function(event, x, points,row)",
3803 "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>"
3807 "labels": ["Axis display"],
3809 "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"
3813 "labels": ["Error Bars", "Rolling Averages"],
3814 "type": "integer >= 1",
3815 "description": "Number of days over which to average data. Discussed extensively above."
3817 "unhighlightCallback": {
3819 "labels": ["Callbacks"],
3820 "type": "function(event)",
3821 "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."
3825 "labels": ["Axis display"],
3827 "description": "The size of the line to display next to each tick mark on x- or y-axes."
3829 "labelsSeparateLines": {
3831 "labels": ["Legend"],
3833 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
3835 "xValueFormatter": {
3836 "default": "(Round to 2 decimal places)",
3837 "labels": ["Axis display"],
3838 "type": "function(x)",
3839 "description": "Function to provide a custom display format for the X value for mouseover."
3841 "pixelsPerYLabel": {
3843 "labels": ["Axis display", "Grid"],
3845 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3847 "annotationMouseOverHandler": {
3849 "labels": ["Annotations"],
3850 "type": "function(annotation, point, dygraph, event)",
3851 "description": "If provided, this function is called whenever the user mouses over an annotation."
3853 "annotationMouseOutHandler": {
3855 "labels": ["Annotations"],
3856 "type": "function(annotation, point, dygraph, event)",
3857 "description": "If provided, this function is called whenever the user mouses out of an annotation."
3859 "annotationClickHandler": {
3861 "labels": ["Annotations"],
3862 "type": "function(annotation, point, dygraph, event)",
3863 "description": "If provided, this function is called whenever the user clicks on an annotation."
3865 "annotationDblClickHandler": {
3867 "labels": ["Annotations"],
3868 "type": "function(annotation, point, dygraph, event)",
3869 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
3873 "labels": ["Callbacks"],
3874 "type": "function(dygraph, is_initial)",
3875 "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."
3879 "labels": ["Value display/formatting"],
3881 "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."
3885 "labels": ["CSV parsing"],
3887 "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."
3889 "axisLabelFontSize": {
3891 "labels": ["Axis display"],
3893 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
3895 "underlayCallback": {
3897 "labels": ["Callbacks"],
3898 "type": "function(canvas, area, dygraph)",
3899 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
3903 "labels": ["Overall display"],
3905 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3907 "interactionModel": {
3909 "labels": ["Interactive Elements"],
3911 "description": "TODO(konigsberg): document this"
3914 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
3915 "labels": ["Axis display"],
3916 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
3917 "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."
3919 "xAxisLabelWidth": {
3921 "labels": ["Axis display"],
3923 "description": "Width, in pixels, of the x-axis labels."
3925 "showLabelsOnHighlight": {
3927 "labels": ["Interactive Elements", "Legend"],
3929 "description": "Whether to show the legend upon mouseover."
3932 "default": "(none)",
3933 "labels": ["Axis display"],
3934 "type": "string or object",
3935 "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."
3937 "pixelsPerXLabel": {
3939 "labels": ["Axis display", "Grid"],
3941 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3945 "labels": ["Legend"],
3946 "type": "DOM element or string",
3947 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
3948 "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."
3952 "labels": ["CSV parsing", "Error Bars"],
3954 "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)."
3958 "labels": ["Axis display"],
3960 "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."
3964 "labels": ["Data Line display"],
3966 "example": "0.5, 2.0",
3967 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
3971 "labels": ["Error Bars"],
3973 "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."
3977 "labels": ["Data Line display"],
3979 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
3981 "highlightCircleSize": {
3983 "labels": ["Interactive Elements"],
3985 "description": "The size in pixels of the dot drawn over highlighted points."
3988 "default": "rgb(128,128,128)",
3990 "type": "red, blue",
3991 "description": "The color of the gridlines."
3994 "default": "[true, true, ...]",
3995 "labels": ["Data Line display"],
3996 "type": "Array of booleans",
3997 "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."
4000 "default": "Full range of the input is shown",
4001 "labels": ["Axis display"],
4002 "type": "Array of two numbers",
4003 "example": "[10, 110]",
4004 "description": "Explicitly set the vertical range of the graph to [low, high]."
4008 "labels": ["Legend"],
4010 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4012 "colorSaturation": {
4014 "labels": ["Data Series Colors"],
4015 "type": "0.0 - 1.0",
4016 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4018 "yAxisLabelWidth": {
4020 "labels": ["Axis display"],
4022 "description": "Width, in pixels, of the y-axis labels."
4024 "hideOverlayOnMouseOut": {
4026 "labels": ["Interactive Elements", "Legend"],
4028 "description": "Whether to hide the legend when the mouse leaves the chart area."
4030 "yValueFormatter": {
4031 "default": "(Round to 2 decimal places)",
4032 "labels": ["Axis display"],
4033 "type": "function(x)",
4034 "description": "Function to provide a custom display format for the Y value for mouseover."
4037 "default": "onmouseover",
4038 "labels": ["Legend"],
4040 "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."
4042 "labelsShowZeroValues": {
4044 "labels": ["Legend"],
4046 "description": "Show zero value labels in the labelsDiv."
4050 "labels": ["Data Line display"],
4052 "description": "When set, display the graph as a step plot instead of a line plot."
4056 "labels": ["Value display/formatting"],
4058 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4062 "labels": ["Overall display"],
4064 "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."
4068 "labels": ["Axis display"],
4070 "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."
4072 "xAxisLabelFormatter": {
4073 "default": "Dygraph.dateAxisFormatter",
4074 "labels": ["Axis display", "Value display/formatting"],
4075 "type": "function(date, granularity)",
4076 "description": "Function to call to format values along the x axis."
4079 "snippet": "function(e, date){<br> alert(date);<br>}",
4081 "labels": ["Callbacks"],
4082 "type": "function(e, date)",
4083 "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."
4085 "yAxisLabelFormatter": {
4086 "default": "yValueFormatter",
4087 "labels": ["Axis display", "Value display/formatting"],
4088 "type": "function(x)",
4089 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4092 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4093 "labels": ["Legend"],
4094 "type": "array<string>",
4095 "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."
4098 "default": "Full range of the input is shown",
4099 "labels": ["Axis display"],
4100 "type": "Array of two Dates or numbers",
4101 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4102 "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."
4106 "labels": ["Interactive Elements", "Rolling Averages"],
4108 "description": "If the rolling average period text box should be shown."
4112 "labels": ["Error Bars"],
4114 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4118 "labels": ["CSV parsing", "Error Bars"],
4120 "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."
4124 "labels": ["Data Series Colors"],
4125 "type": "float (0.0 - 1.0)",
4126 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4130 "labels": ["CSV parsing", "Error Bars"],
4132 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4134 "displayAnnotations": {
4136 "labels": ["Annotations"],
4138 "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."
4140 "panEdgeFraction": {
4142 "labels": ["Axis Display", "Interactive Elements"],
4145 "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."
4148 "labels": ["Chart labels"],
4151 "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."
4155 "labels": ["Chart labels"],
4157 "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."
4160 "labels": ["Chart labels"],
4163 "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."
4166 "labels": ["Chart labels"],
4169 "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."
4172 "labels": ["Chart labels"],
4175 "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."
4178 "labels": ["Chart labels"],
4181 "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."
4185 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4186 // JSON. This assumption cannot be checked in JS, but it will be checked when
4187 // documentation is generated by the generate-documentation.py script. For the
4188 // most part, this just means that you should always use double quotes.
4190 // Do a quick sanity check on the options reference.
4192 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4193 var flds
= ['type', 'default', 'description'];
4200 'Data Line display',
4201 'Data Series Colors',
4204 'Interactive Elements',
4208 'Value display/formatting'
4211 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4213 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4214 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4215 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4216 for (var i
= 0; i
< flds
.length
; i
++) {
4217 if (!op
.hasOwnProperty(flds
[i
])) {
4218 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4219 } else if (typeof(op
[flds
[i
]]) != 'string') {
4220 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4223 var labels
= op
['labels'];
4224 if (typeof(labels
) !== 'object') {
4225 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4226 for (var i
= 0; i
< labels
.length
; i
++) {
4227 if (!cats
.hasOwnProperty(labels
[i
])) {
4228 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4229 '", which is invalid.');
4235 // </REMOVE_FOR_COMBINED
>