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 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
267 this.zoomed_x_
= false;
268 this.zoomed_y_
= false;
270 // Number of digits to use when labeling the x (if numeric) and y axis
272 this.numXDigits_
= 2;
273 this.numYDigits_
= 2;
275 // When labeling x (if numeric) or y values in the legend, there are
276 // numDigits + numExtraDigits of precision used. For axes labels with N
277 // digits of precision, the data should be displayed with at least N+1 digits
278 // of precision. The reason for this is to divide each interval between
279 // successive ticks into tenths (for 1) or hundredths (for 2), etc. For
280 // example, if the labels are [0, 1, 2], we want data to be displayed as
282 this.numExtraDigits_
= 1;
284 // Clear the div. This ensure that, if multiple dygraphs are passed the same
285 // div, then only one will be drawn.
288 // If the div isn't already sized then inherit from our attrs or
289 // give it a default size.
290 if (div
.style
.width
== '') {
291 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
293 if (div
.style
.height
== '') {
294 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
296 this.width_
= parseInt(div
.style
.width
, 10);
297 this.height_
= parseInt(div
.style
.height
, 10);
298 // The div might have been specified as percent of the current window size,
299 // convert that to an appropriate number of pixels.
300 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
301 this.width_
= div
.offsetWidth
;
303 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
304 this.height_
= div
.offsetHeight
;
307 if (this.width_
== 0) {
308 this.error("dygraph has zero width. Please specify a width in pixels.");
310 if (this.height_
== 0) {
311 this.error("dygraph has zero height. Please specify a height in pixels.");
314 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
315 if (attrs
['stackedGraph']) {
316 attrs
['fillGraph'] = true;
317 // TODO(nikhilk): Add any other stackedGraph checks here.
320 // Dygraphs has many options, some of which interact with one another.
321 // To keep track of everything, we maintain two sets of options:
323 // this.user_attrs_ only options explicitly set by the user.
324 // this.attrs_ defaults, options derived from user_attrs_, data.
326 // Options are then accessed this.attr_('attr'), which first looks at
327 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
328 // defaults without overriding behavior that the user specifically asks for.
329 this.user_attrs_
= {};
330 Dygraph
.update(this.user_attrs_
, attrs
);
333 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
335 this.boundaryIds_
= [];
337 // Make a note of whether labels will be pulled from the CSV file.
338 this.labelsFromCSV_
= (this.attr_("labels") == null);
340 // Create the containing DIV and other interactive elements
341 this.createInterface_();
347 * Returns the zoomed status of the chart for one or both axes.
349 * Axis is an optional parameter. Can be set to 'x' or 'y'.
351 * The zoomed status for an axis is set whenever a user zooms using the mouse
352 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
353 * option is also specified).
355 Dygraph
.prototype.isZoomed
= function(axis
) {
356 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
357 if (axis
== 'x') return this.zoomed_x_
;
358 if (axis
== 'y') return this.zoomed_y_
;
359 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
362 Dygraph
.prototype.toString
= function() {
363 var maindiv
= this.maindiv_
;
364 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
365 return "[Dygraph " + id
+ "]";
368 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
369 // <REMOVE_FOR_COMBINED>
370 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
371 this.error('Must include options reference JS for testing');
372 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
373 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
374 'in the Dygraphs.OPTIONS_REFERENCE listing.');
375 // Only log this error once.
376 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
378 // </REMOVE_FOR_COMBINED
>
380 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
381 this.user_attrs_
[seriesName
] != null &&
382 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
383 return this.user_attrs_
[seriesName
][name
];
384 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
385 return this.user_attrs_
[name
];
386 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
387 return this.attrs_
[name
];
393 // TODO(danvk): any way I can get the line numbers to be this.warn call?
394 Dygraph
.prototype.log
= function(severity
, message
) {
395 if (typeof(console
) != 'undefined') {
398 console
.debug('dygraphs: ' + message
);
401 console
.info('dygraphs: ' + message
);
403 case Dygraph
.WARNING
:
404 console
.warn('dygraphs: ' + message
);
407 console
.error('dygraphs: ' + message
);
412 Dygraph
.prototype.info
= function(message
) {
413 this.log(Dygraph
.INFO
, message
);
415 Dygraph
.prototype.warn
= function(message
) {
416 this.log(Dygraph
.WARNING
, message
);
418 Dygraph
.prototype.error
= function(message
) {
419 this.log(Dygraph
.ERROR
, message
);
423 * Returns the current rolling period, as set by the user or an option.
424 * @return {Number} The number of points in the rolling window
426 Dygraph
.prototype.rollPeriod
= function() {
427 return this.rollPeriod_
;
431 * Returns the currently-visible x-range. This can be affected by zooming,
432 * panning or a call to updateOptions.
433 * Returns a two-element array: [left, right].
434 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
436 Dygraph
.prototype.xAxisRange
= function() {
437 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
441 * Returns the lower- and upper-bound x-axis values of the
444 Dygraph
.prototype.xAxisExtremes
= function() {
445 var left
= this.rawData_
[0][0];
446 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
447 return [left
, right
];
451 * Returns the currently-visible y-range for an axis. This can be affected by
452 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
453 * called with no arguments, returns the range of the first axis.
454 * Returns a two-element array: [bottom, top].
456 Dygraph
.prototype.yAxisRange
= function(idx
) {
457 if (typeof(idx
) == "undefined") idx
= 0;
458 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
459 return [ this.axes_
[idx
].computedValueRange
[0],
460 this.axes_
[idx
].computedValueRange
[1] ];
464 * Returns the currently-visible y-ranges for each axis. This can be affected by
465 * zooming, panning, calls to updateOptions, etc.
466 * Returns an array of [bottom, top] pairs, one for each y-axis.
468 Dygraph
.prototype.yAxisRanges
= function() {
470 for (var i
= 0; i
< this.axes_
.length
; i
++) {
471 ret
.push(this.yAxisRange(i
));
476 // TODO(danvk): use these functions throughout dygraphs.
478 * Convert from data coordinates to canvas/div X/Y coordinates.
479 * If specified, do this conversion for the coordinate system of a particular
480 * axis. Uses the first axis by default.
481 * Returns a two-element array: [X, Y]
483 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
484 * instead of toDomCoords(null, y, axis).
486 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
487 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
491 * Convert from data x coordinates to canvas/div X coordinate.
492 * If specified, do this conversion for the coordinate system of a particular
494 * Returns a single value or null if x is null.
496 Dygraph
.prototype.toDomXCoord
= function(x
) {
501 var area
= this.plotter_
.area
;
502 var xRange
= this.xAxisRange();
503 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
507 * Convert from data x coordinates to canvas/div Y coordinate and optional
508 * axis. Uses the first axis by default.
510 * returns a single value or null if y is null.
512 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
513 var pct
= this.toPercentYCoord(y
, axis
);
518 var area
= this.plotter_
.area
;
519 return area
.y
+ pct
* area
.h
;
523 * Convert from canvas/div coords to data coordinates.
524 * If specified, do this conversion for the coordinate system of a particular
525 * axis. Uses the first axis by default.
526 * Returns a two-element array: [X, Y].
528 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
529 * instead of toDataCoords(null, y, axis).
531 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
532 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
536 * Convert from canvas/div x coordinate to data coordinate.
538 * If x is null, this returns null.
540 Dygraph
.prototype.toDataXCoord
= function(x
) {
545 var area
= this.plotter_
.area
;
546 var xRange
= this.xAxisRange();
547 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
551 * Convert from canvas/div y coord to value.
553 * If y is null, this returns null.
554 * if axis is null, this uses the first axis.
556 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
561 var area
= this.plotter_
.area
;
562 var yRange
= this.yAxisRange(axis
);
564 if (typeof(axis
) == "undefined") axis
= 0;
565 if (!this.axes_
[axis
].logscale
) {
566 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
568 // Computing the inverse of toDomCoord.
569 var pct
= (y
- area
.y
) / area
.h
571 // Computing the inverse of toPercentYCoord. The function was arrived at with
572 // the following steps:
574 // Original calcuation:
575 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
577 // Move denominator to both sides:
578 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
580 // subtract logr1, and take the negative value.
581 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
583 // Swap both sides of the equation, and we can compute the log of the
584 // return value. Which means we just need to use that as the exponent in
586 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
588 var logr1
= Dygraph
.log10(yRange
[1]);
589 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
590 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
596 * Converts a y for an axis to a percentage from the top to the
597 * bottom of the drawing area.
599 * If the coordinate represents a value visible on the canvas, then
600 * the value will be between 0 and 1, where 0 is the top of the canvas.
601 * However, this method will return values outside the range, as
602 * values can fall outside the canvas.
604 * If y is null, this returns null.
605 * if axis is null, this uses the first axis.
607 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
611 if (typeof(axis
) == "undefined") axis
= 0;
613 var area
= this.plotter_
.area
;
614 var yRange
= this.yAxisRange(axis
);
617 if (!this.axes_
[axis
].logscale
) {
618 // yRange[1] - y is unit distance from the bottom.
619 // yRange[1] - yRange[0] is the scale of the range.
620 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
621 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
623 var logr1
= Dygraph
.log10(yRange
[1]);
624 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
630 * Converts an x value to a percentage from the left to the right of
633 * If the coordinate represents a value visible on the canvas, then
634 * the value will be between 0 and 1, where 0 is the left of the canvas.
635 * However, this method will return values outside the range, as
636 * values can fall outside the canvas.
638 * If x is null, this returns null.
640 Dygraph
.prototype.toPercentXCoord
= function(x
) {
645 var xRange
= this.xAxisRange();
646 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
650 * Returns the number of columns (including the independent variable).
652 Dygraph
.prototype.numColumns
= function() {
653 return this.rawData_
[0].length
;
657 * Returns the number of rows (excluding any header/label row).
659 Dygraph
.prototype.numRows
= function() {
660 return this.rawData_
.length
;
664 * Returns the value in the given row and column. If the row and column exceed
665 * the bounds on the data, returns null. Also returns null if the value is
668 Dygraph
.prototype.getValue
= function(row
, col
) {
669 if (row
< 0 || row
> this.rawData_
.length
) return null;
670 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
672 return this.rawData_
[row
][col
];
675 Dygraph
.addEvent
= function(el
, evt
, fn
) {
676 var normed_fn
= function(e
) {
677 if (!e
) var e
= window
.event
;
680 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
681 el
.addEventListener(evt
, normed_fn
, false);
683 el
.attachEvent('on' + evt
, normed_fn
);
688 // Based on the article at
689 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
690 Dygraph
.cancelEvent
= function(e
) {
691 e
= e
? e
: window
.event
;
692 if (e
.stopPropagation
) {
695 if (e
.preventDefault
) {
698 e
.cancelBubble
= true;
700 e
.returnValue
= false;
706 * Generates interface elements for the Dygraph: a containing div, a div to
707 * display the current point, and a textbox to adjust the rolling average
708 * period. Also creates the Renderer/Layout elements.
711 Dygraph
.prototype.createInterface_
= function() {
712 // Create the all-enclosing graph div
713 var enclosing
= this.maindiv_
;
715 this.graphDiv
= document
.createElement("div");
716 this.graphDiv
.style
.width
= this.width_
+ "px";
717 this.graphDiv
.style
.height
= this.height_
+ "px";
718 enclosing
.appendChild(this.graphDiv
);
720 // Create the canvas for interactive parts of the chart.
721 this.canvas_
= Dygraph
.createCanvas();
722 this.canvas_
.style
.position
= "absolute";
723 this.canvas_
.width
= this.width_
;
724 this.canvas_
.height
= this.height_
;
725 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
726 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
728 // ... and for static parts of the chart.
729 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
731 // The interactive parts of the graph are drawn on top of the chart.
732 this.graphDiv
.appendChild(this.hidden_
);
733 this.graphDiv
.appendChild(this.canvas_
);
734 this.mouseEventElement_
= this.canvas_
;
737 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
738 dygraph
.mouseMove_(e
);
740 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
741 dygraph
.mouseOut_(e
);
744 // Create the grapher
745 // TODO(danvk): why does the Layout need its own set of options?
746 this.layoutOptions_
= { 'xOriginIsZero': false };
747 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
748 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
749 Dygraph
.update(this.layoutOptions_
, {
750 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
752 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
754 // TODO(danvk): why does the Renderer need its own set of options?
755 this.renderOptions_
= { colorScheme
: this.colors_
,
757 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
758 Dygraph
.update(this.renderOptions_
, this.attrs_
);
759 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
761 this.createStatusMessage_();
762 this.createDragInterface_();
766 * Detach DOM elements in the dygraph and null out all data references.
767 * Calling this when you're done with a dygraph can dramatically reduce memory
768 * usage. See, e.g., the tests/perf.html example.
770 Dygraph
.prototype.destroy
= function() {
771 var removeRecursive
= function(node
) {
772 while (node
.hasChildNodes()) {
773 removeRecursive(node
.firstChild
);
774 node
.removeChild(node
.firstChild
);
777 removeRecursive(this.maindiv_
);
779 var nullOut
= function(obj
) {
781 if (typeof(obj
[n
]) === 'object') {
787 // These may not all be necessary, but it can't hurt...
788 nullOut(this.layout_
);
789 nullOut(this.plotter_
);
794 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
795 * this particular canvas. All Dygraph work is done on this.canvas_.
796 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
797 * @return {Object} The newly-created canvas
800 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
801 var h
= Dygraph
.createCanvas();
802 h
.style
.position
= "absolute";
803 // TODO(danvk): h should be offset from canvas. canvas needs to include
804 // some extra area to make it easier to zoom in on the far left and far
805 // right. h needs to be precisely the plot area, so that clipping occurs.
806 h
.style
.top
= canvas
.style
.top
;
807 h
.style
.left
= canvas
.style
.left
;
808 h
.width
= this.width_
;
809 h
.height
= this.height_
;
810 h
.style
.width
= this.width_
+ "px"; // for IE
811 h
.style
.height
= this.height_
+ "px"; // for IE
815 // Taken from MochiKit.Color
816 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
820 if (saturation
=== 0) {
825 var i
= Math
.floor(hue
* 6);
826 var f
= (hue
* 6) - i
;
827 var p
= value
* (1 - saturation
);
828 var q
= value
* (1 - (saturation
* f
));
829 var t
= value
* (1 - (saturation
* (1 - f
)));
831 case 1: red
= q
; green
= value
; blue
= p
; break;
832 case 2: red
= p
; green
= value
; blue
= t
; break;
833 case 3: red
= p
; green
= q
; blue
= value
; break;
834 case 4: red
= t
; green
= p
; blue
= value
; break;
835 case 5: red
= value
; green
= p
; blue
= q
; break;
836 case 6: // fall through
837 case 0: red
= value
; green
= t
; blue
= p
; break;
840 red
= Math
.floor(255 * red
+ 0.5);
841 green
= Math
.floor(255 * green
+ 0.5);
842 blue
= Math
.floor(255 * blue
+ 0.5);
843 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
848 * Generate a set of distinct colors for the data series. This is done with a
849 * color wheel. Saturation/Value are customizable, and the hue is
850 * equally-spaced around the color wheel. If a custom set of colors is
851 * specified, that is used instead.
854 Dygraph
.prototype.setColors_
= function() {
855 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
856 // away with this.renderOptions_.
857 var num
= this.attr_("labels").length
- 1;
859 var colors
= this.attr_('colors');
861 var sat
= this.attr_('colorSaturation') || 1.0;
862 var val
= this.attr_('colorValue') || 0.5;
863 var half
= Math
.ceil(num
/ 2);
864 for (var i
= 1; i
<= num
; i
++) {
865 if (!this.visibility()[i
-1]) continue;
866 // alternate colors for high contrast.
867 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
868 var hue
= (1.0 * idx
/ (1 + num
));
869 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
872 for (var i
= 0; i
< num
; i
++) {
873 if (!this.visibility()[i
]) continue;
874 var colorStr
= colors
[i
% colors
.length
];
875 this.colors_
.push(colorStr
);
879 // TODO(danvk): update this w/r
/t/ the
new options system
.
880 this.renderOptions_
.colorScheme
= this.colors_
;
881 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
882 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
883 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
887 * Return the list of colors. This is either the list of colors passed in the
888 * attributes, or the autogenerated list of rgb(r,g,b) strings.
889 * @return {Array<string>} The list of colors.
891 Dygraph
.prototype.getColors
= function() {
895 // The following functions are from quirksmode.org with a modification for Safari from
896 // http://blog.firetree.net/2005/07/04/javascript-find-position/
897 // http://www.quirksmode.org/js
/findpos
.html
898 Dygraph
.findPosX
= function(obj
) {
903 curleft
+= obj
.offsetLeft
;
904 if(!obj
.offsetParent
)
906 obj
= obj
.offsetParent
;
913 Dygraph
.findPosY
= function(obj
) {
918 curtop
+= obj
.offsetTop
;
919 if(!obj
.offsetParent
)
921 obj
= obj
.offsetParent
;
931 * Create the div that contains information on the selected point(s)
932 * This goes in the top right of the canvas, unless an external div has already
936 Dygraph
.prototype.createStatusMessage_
= function() {
937 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
938 if (userLabelsDiv
&& null != userLabelsDiv
939 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
940 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
942 if (!this.attr_("labelsDiv")) {
943 var divWidth
= this.attr_('labelsDivWidth');
945 "position": "absolute",
948 "width": divWidth
+ "px",
950 "left": (this.width_
- divWidth
- 2) + "px",
951 "background": "white",
953 "overflow": "hidden"};
954 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
955 var div
= document
.createElement("div");
956 for (var name
in messagestyle
) {
957 if (messagestyle
.hasOwnProperty(name
)) {
958 div
.style
[name
] = messagestyle
[name
];
961 this.graphDiv
.appendChild(div
);
962 this.attrs_
.labelsDiv
= div
;
967 * Position the labels div so that:
968 * - its right edge is flush with the right edge of the charting area
969 * - its top edge is flush with the top edge of the charting area
971 Dygraph
.prototype.positionLabelsDiv_
= function() {
972 // Don't touch a user-specified labelsDiv.
973 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
975 var area
= this.plotter_
.area
;
976 var div
= this.attr_("labelsDiv");
977 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
978 div
.style
.top
= area
.y
+ "px";
982 * Create the text box to adjust the averaging period
985 Dygraph
.prototype.createRollInterface_
= function() {
986 // Create a roller if one doesn't exist already.
988 this.roller_
= document
.createElement("input");
989 this.roller_
.type
= "text";
990 this.roller_
.style
.display
= "none";
991 this.graphDiv
.appendChild(this.roller_
);
994 var display
= this.attr_('showRoller') ? 'block' : 'none';
996 var area
= this.plotter_
.area
;
997 var textAttr
= { "position": "absolute",
999 "top": (area
.y
+ area
.h
- 25) + "px",
1000 "left": (area
.x
+ 1) + "px",
1003 this.roller_
.size
= "2";
1004 this.roller_
.value
= this.rollPeriod_
;
1005 for (var name
in textAttr
) {
1006 if (textAttr
.hasOwnProperty(name
)) {
1007 this.roller_
.style
[name
] = textAttr
[name
];
1012 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1015 // These functions are taken from MochiKit.Signal
1016 Dygraph
.pageX
= function(e
) {
1018 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1021 var b
= document
.body
;
1023 (de
.scrollLeft
|| b
.scrollLeft
) -
1024 (de
.clientLeft
|| 0);
1028 Dygraph
.pageY
= function(e
) {
1030 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1033 var b
= document
.body
;
1035 (de
.scrollTop
|| b
.scrollTop
) -
1036 (de
.clientTop
|| 0);
1040 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1041 return Dygraph
.pageX(e
) - context
.px
1044 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1045 return Dygraph
.pageY(e
) - context
.py
1048 // Called in response to an interaction model operation that
1049 // should start the default panning behavior.
1051 // It's used in the default callback for "mousedown" operations.
1052 // Custom interaction model builders can use it to provide the default
1053 // panning behavior.
1055 Dygraph
.startPan
= function(event
, g
, context
) {
1056 context
.isPanning
= true;
1057 var xRange
= g
.xAxisRange();
1058 context
.dateRange
= xRange
[1] - xRange
[0];
1059 context
.initialLeftmostDate
= xRange
[0];
1060 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1062 if (g
.attr_("panEdgeFraction")) {
1063 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1064 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1066 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1067 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1069 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1070 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1071 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1073 var boundedValues
= [];
1074 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1076 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1077 var axis
= g
.axes_
[i
];
1078 var yExtremes
= axis
.extremeRange
;
1080 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1081 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1083 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1084 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1086 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1088 context
.boundedValues
= boundedValues
;
1091 // Record the range of each y-axis at the start of the drag.
1092 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1093 context
.is2DPan
= false;
1094 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1095 var axis
= g
.axes_
[i
];
1096 var yRange
= g
.yAxisRange(i
);
1097 // TODO(konigsberg): These values should be in |context|.
1098 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1099 if (axis
.logscale
) {
1100 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1101 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1103 axis
.initialTopValue
= yRange
[1];
1104 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1106 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1108 // While calculating axes, set 2dpan.
1109 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1113 // Called in response to an interaction model operation that
1114 // responds to an event that pans the view.
1116 // It's used in the default callback for "mousemove" operations.
1117 // Custom interaction model builders can use it to provide the default
1118 // panning behavior.
1120 Dygraph
.movePan
= function(event
, g
, context
) {
1121 context
.dragEndX
= g
.dragGetX_(event
, context
);
1122 context
.dragEndY
= g
.dragGetY_(event
, context
);
1124 var minDate
= context
.initialLeftmostDate
-
1125 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1126 if (context
.boundedDates
) {
1127 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1129 var maxDate
= minDate
+ context
.dateRange
;
1130 if (context
.boundedDates
) {
1131 if (maxDate
> context
.boundedDates
[1]) {
1132 // Adjust minDate, and recompute maxDate.
1133 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1134 maxDate
= minDate
+ context
.dateRange
;
1138 g
.dateWindow_
= [minDate
, maxDate
];
1140 // y-axis scaling is automatic unless this is a full 2D pan.
1141 if (context
.is2DPan
) {
1142 // Adjust each axis appropriately.
1143 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1144 var axis
= g
.axes_
[i
];
1146 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1147 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1149 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1151 // In log scale, maxValue and minValue are the logs of those values.
1152 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1154 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1156 var minValue
= maxValue
- axis
.dragValueRange
;
1158 if (minValue
< boundedValue
[0]) {
1159 // Adjust maxValue, and recompute minValue.
1160 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1161 minValue
= maxValue
- axis
.dragValueRange
;
1164 if (axis
.logscale
) {
1165 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1166 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1168 axis
.valueWindow
= [ minValue
, maxValue
];
1176 // Called in response to an interaction model operation that
1177 // responds to an event that ends panning.
1179 // It's used in the default callback for "mouseup" operations.
1180 // Custom interaction model builders can use it to provide the default
1181 // panning behavior.
1183 Dygraph
.endPan
= function(event
, g
, context
) {
1184 // TODO(konigsberg): Clear the context data from the axis.
1185 // TODO(konigsberg): mouseup should just delete the
1186 // context object, and mousedown should create a new one.
1187 context
.isPanning
= false;
1188 context
.is2DPan
= false;
1189 context
.initialLeftmostDate
= null;
1190 context
.dateRange
= null;
1191 context
.valueRange
= null;
1192 context
.boundedDates
= null;
1193 context
.boundedValues
= null;
1196 // Called in response to an interaction model operation that
1197 // responds to an event that starts zooming.
1199 // It's used in the default callback for "mousedown" operations.
1200 // Custom interaction model builders can use it to provide the default
1201 // zooming behavior.
1203 Dygraph
.startZoom
= function(event
, g
, context
) {
1204 context
.isZooming
= true;
1207 // Called in response to an interaction model operation that
1208 // responds to an event that defines zoom boundaries.
1210 // It's used in the default callback for "mousemove" operations.
1211 // Custom interaction model builders can use it to provide the default
1212 // zooming behavior.
1214 Dygraph
.moveZoom
= function(event
, g
, context
) {
1215 context
.dragEndX
= g
.dragGetX_(event
, context
);
1216 context
.dragEndY
= g
.dragGetY_(event
, context
);
1218 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1219 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1221 // drag direction threshold for y axis is twice as large as x axis
1222 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1225 context
.dragDirection
,
1230 context
.prevDragDirection
,
1234 context
.prevEndX
= context
.dragEndX
;
1235 context
.prevEndY
= context
.dragEndY
;
1236 context
.prevDragDirection
= context
.dragDirection
;
1239 // Called in response to an interaction model operation that
1240 // responds to an event that performs a zoom based on previously defined
1243 // It's used in the default callback for "mouseup" operations.
1244 // Custom interaction model builders can use it to provide the default
1245 // zooming behavior.
1247 Dygraph
.endZoom
= function(event
, g
, context
) {
1248 context
.isZooming
= false;
1249 context
.dragEndX
= g
.dragGetX_(event
, context
);
1250 context
.dragEndY
= g
.dragGetY_(event
, context
);
1251 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1252 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1254 if (regionWidth
< 2 && regionHeight
< 2 &&
1255 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1256 // TODO(danvk): pass along more info about the points, e.g. 'x'
1257 if (g
.attr_('clickCallback') != null) {
1258 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1260 if (g
.attr_('pointClickCallback')) {
1261 // check if the click was on a particular point.
1262 var closestIdx
= -1;
1263 var closestDistance
= 0;
1264 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1265 var p
= g
.selPoints_
[i
];
1266 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1267 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1268 if (closestIdx
== -1 || distance
< closestDistance
) {
1269 closestDistance
= distance
;
1274 // Allow any click within two pixels of the dot.
1275 var radius
= g
.attr_('highlightCircleSize') + 2;
1276 if (closestDistance
<= 5 * 5) {
1277 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1282 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1283 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1284 Math
.max(context
.dragStartX
, context
.dragEndX
));
1285 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1286 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1287 Math
.max(context
.dragStartY
, context
.dragEndY
));
1289 g
.canvas_
.getContext("2d").clearRect(0, 0,
1293 context
.dragStartX
= null;
1294 context
.dragStartY
= null;
1297 Dygraph
.defaultInteractionModel
= {
1298 // Track the beginning of drag events
1299 mousedown
: function(event
, g
, context
) {
1300 context
.initializeMouseDown(event
, g
, context
);
1302 if (event
.altKey
|| event
.shiftKey
) {
1303 Dygraph
.startPan(event
, g
, context
);
1305 Dygraph
.startZoom(event
, g
, context
);
1309 // Draw zoom rectangles when the mouse is down and the user moves around
1310 mousemove
: function(event
, g
, context
) {
1311 if (context
.isZooming
) {
1312 Dygraph
.moveZoom(event
, g
, context
);
1313 } else if (context
.isPanning
) {
1314 Dygraph
.movePan(event
, g
, context
);
1318 mouseup
: function(event
, g
, context
) {
1319 if (context
.isZooming
) {
1320 Dygraph
.endZoom(event
, g
, context
);
1321 } else if (context
.isPanning
) {
1322 Dygraph
.endPan(event
, g
, context
);
1326 // Temporarily cancel the dragging event when the mouse leaves the graph
1327 mouseout
: function(event
, g
, context
) {
1328 if (context
.isZooming
) {
1329 context
.dragEndX
= null;
1330 context
.dragEndY
= null;
1334 // Disable zooming out if panning.
1335 dblclick
: function(event
, g
, context
) {
1336 if (event
.altKey
|| event
.shiftKey
) {
1339 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1340 // friendlier to public use.
1345 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1348 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1352 Dygraph
.prototype.createDragInterface_
= function() {
1354 // Tracks whether the mouse is down right now
1356 isPanning
: false, // is this drag part of a pan?
1357 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1362 dragDirection
: null,
1365 prevDragDirection
: null,
1367 // The value on the left side of the graph when a pan operation starts.
1368 initialLeftmostDate
: null,
1370 // The number of units each pixel spans. (This won't be valid for log
1372 xUnitsPerPixel
: null,
1374 // TODO(danvk): update this comment
1375 // The range in second/value units that the viewport encompasses during a
1376 // panning operation.
1379 // Utility function to convert page-wide coordinates to canvas coords
1383 // Values for use with panEdgeFraction, which limit how far outside the
1384 // graph's data boundaries it can be panned.
1385 boundedDates
: null, // [minDate, maxDate]
1386 boundedValues
: null, // [[minValue, maxValue] ...]
1388 initializeMouseDown
: function(event
, g
, context
) {
1389 // prevents mouse drags from selecting page text.
1390 if (event
.preventDefault
) {
1391 event
.preventDefault(); // Firefox, Chrome, etc.
1393 event
.returnValue
= false; // IE
1394 event
.cancelBubble
= true;
1397 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1398 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1399 context
.dragStartX
= g
.dragGetX_(event
, context
);
1400 context
.dragStartY
= g
.dragGetY_(event
, context
);
1404 var interactionModel
= this.attr_("interactionModel");
1406 // Self is the graph.
1409 // Function that binds the graph and context to the handler.
1410 var bindHandler
= function(handler
) {
1411 return function(event
) {
1412 handler(event
, self
, context
);
1416 for (var eventName
in interactionModel
) {
1417 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1418 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1419 bindHandler(interactionModel
[eventName
]));
1422 // If the user releases the mouse button during a drag, but not over the
1423 // canvas, then it doesn't count as a zooming action.
1424 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1425 if (context
.isZooming
|| context
.isPanning
) {
1426 context
.isZooming
= false;
1427 context
.dragStartX
= null;
1428 context
.dragStartY
= null;
1431 if (context
.isPanning
) {
1432 context
.isPanning
= false;
1433 context
.draggingDate
= null;
1434 context
.dateRange
= null;
1435 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1436 delete self
.axes_
[i
].draggingValue
;
1437 delete self
.axes_
[i
].dragValueRange
;
1445 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1446 * up any previous zoom rectangles that were drawn. This could be optimized to
1447 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1450 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1451 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1452 * @param {Number} startX The X position where the drag started, in canvas
1454 * @param {Number} endX The current X position of the drag, in canvas coords.
1455 * @param {Number} startY The Y position where the drag started, in canvas
1457 * @param {Number} endY The current Y position of the drag, in canvas coords.
1458 * @param {Number} prevDirection the value of direction on the previous call to
1459 * this function. Used to avoid excess redrawing
1460 * @param {Number} prevEndX The value of endX on the previous call to this
1461 * function. Used to avoid excess redrawing
1462 * @param {Number} prevEndY The value of endY on the previous call to this
1463 * function. Used to avoid excess redrawing
1466 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1467 endY
, prevDirection
, prevEndX
,
1469 var ctx
= this.canvas_
.getContext("2d");
1471 // Clean up from the previous rect if necessary
1472 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1473 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1474 Math
.abs(startX
- prevEndX
), this.height_
);
1475 } else if (prevDirection
== Dygraph
.VERTICAL
){
1476 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1477 this.width_
, Math
.abs(startY
- prevEndY
));
1480 // Draw a light-grey rectangle to show the new viewing area
1481 if (direction
== Dygraph
.HORIZONTAL
) {
1482 if (endX
&& startX
) {
1483 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1484 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1485 Math
.abs(endX
- startX
), this.height_
);
1488 if (direction
== Dygraph
.VERTICAL
) {
1489 if (endY
&& startY
) {
1490 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1491 ctx
.fillRect(0, Math
.min(startY
, endY
),
1492 this.width_
, Math
.abs(endY
- startY
));
1498 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1499 * the canvas. The exact zoom window may be slightly larger if there are no data
1500 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1501 * which accepts dates that match the raw data. This function redraws the graph.
1503 * @param {Number} lowX The leftmost pixel value that should be visible.
1504 * @param {Number} highX The rightmost pixel value that should be visible.
1507 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1508 // Find the earliest and latest dates contained in this canvasx range.
1509 // Convert the call to date ranges of the raw data.
1510 var minDate
= this.toDataXCoord(lowX
);
1511 var maxDate
= this.toDataXCoord(highX
);
1512 this.doZoomXDates_(minDate
, maxDate
);
1516 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1517 * method with doZoomX which accepts pixel coordinates. This function redraws
1520 * @param {Number} minDate The minimum date that should be visible.
1521 * @param {Number} maxDate The maximum date that should be visible.
1524 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1525 this.dateWindow_
= [minDate
, maxDate
];
1526 this.zoomed_x_
= true;
1528 if (this.attr_("zoomCallback")) {
1529 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1534 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1535 * the canvas. This function redraws the graph.
1537 * @param {Number} lowY The topmost pixel value that should be visible.
1538 * @param {Number} highY The lowest pixel value that should be visible.
1541 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1542 // Find the highest and lowest values in pixel range for each axis.
1543 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1544 // This is because pixels increase as you go down on the screen, whereas data
1545 // coordinates increase as you go up the screen.
1546 var valueRanges
= [];
1547 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1548 var hi
= this.toDataYCoord(lowY
, i
);
1549 var low
= this.toDataYCoord(highY
, i
);
1550 this.axes_
[i
].valueWindow
= [low
, hi
];
1551 valueRanges
.push([low
, hi
]);
1554 this.zoomed_y_
= true;
1556 if (this.attr_("zoomCallback")) {
1557 var xRange
= this.xAxisRange();
1558 var yRange
= this.yAxisRange();
1559 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1564 * Reset the zoom to the original view coordinates. This is the same as
1565 * double-clicking on the graph.
1569 Dygraph
.prototype.doUnzoom_
= function() {
1571 if (this.dateWindow_
!= null) {
1573 this.dateWindow_
= null;
1576 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1577 if (this.axes_
[i
].valueWindow
!= null) {
1579 delete this.axes_
[i
].valueWindow
;
1584 // Putting the drawing operation before the callback because it resets
1586 this.zoomed_x_
= false;
1587 this.zoomed_y_
= false;
1589 if (this.attr_("zoomCallback")) {
1590 var minDate
= this.rawData_
[0][0];
1591 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1592 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1598 * When the mouse moves in the canvas, display information about a nearby data
1599 * point and draw dots over those points in the data series. This function
1600 * takes care of cleanup of previously-drawn dots.
1601 * @param {Object} event The mousemove event from the browser.
1604 Dygraph
.prototype.mouseMove_
= function(event
) {
1605 // This prevents JS errors when mousing over the canvas before data loads.
1606 var points
= this.layout_
.points
;
1607 if (points
=== undefined
) return;
1609 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1614 // Loop through all the points and find the date nearest to our current
1616 var minDist
= 1e+100;
1618 for (var i
= 0; i
< points
.length
; i
++) {
1619 var point
= points
[i
];
1620 if (point
== null) continue;
1621 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1622 if (dist
> minDist
) continue;
1626 if (idx
>= 0) lastx
= points
[idx
].xval
;
1628 // Extract the points we've selected
1629 this.selPoints_
= [];
1630 var l
= points
.length
;
1631 if (!this.attr_("stackedGraph")) {
1632 for (var i
= 0; i
< l
; i
++) {
1633 if (points
[i
].xval
== lastx
) {
1634 this.selPoints_
.push(points
[i
]);
1638 // Need to 'unstack' points starting from the bottom
1639 var cumulative_sum
= 0;
1640 for (var i
= l
- 1; i
>= 0; i
--) {
1641 if (points
[i
].xval
== lastx
) {
1642 var p
= {}; // Clone the point since we modify it
1643 for (var k
in points
[i
]) {
1644 p
[k
] = points
[i
][k
];
1646 p
.yval
-= cumulative_sum
;
1647 cumulative_sum
+= p
.yval
;
1648 this.selPoints_
.push(p
);
1651 this.selPoints_
.reverse();
1654 if (this.attr_("highlightCallback")) {
1655 var px
= this.lastx_
;
1656 if (px
!== null && lastx
!= px
) {
1657 // only fire if the selected point has changed.
1658 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1662 // Save last x position for callbacks.
1663 this.lastx_
= lastx
;
1665 this.updateSelection_();
1669 * Transforms layout_.points index into data row number.
1670 * @param int layout_.points index
1671 * @return int row number, or -1 if none could be found.
1674 Dygraph
.prototype.idxToRow_
= function(idx
) {
1675 if (idx
< 0) return -1;
1677 for (var i
in this.layout_
.datasets
) {
1678 if (idx
< this.layout_
.datasets
[i
].length
) {
1679 return this.boundaryIds_
[0][0]+idx
;
1681 idx
-= this.layout_
.datasets
[i
].length
;
1686 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1687 Dygraph
.isOK
= function(x
) {
1688 return x
&& !isNaN(x
);
1691 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1692 // If no points are selected, we display a default legend. Traditionally,
1693 // this has been blank. But a better default would be a conventional legend,
1694 // which provides essential information for a non-interactive chart.
1695 if (typeof(x
) === 'undefined') {
1696 if (this.attr_('legend') != 'always') return '';
1698 var sepLines
= this.attr_('labelsSeparateLines');
1699 var labels
= this.attr_('labels');
1701 for (var i
= 1; i
< labels
.length
; i
++) {
1702 if (!this.visibility()[i
- 1]) continue;
1703 var c
= this.plotter_
.colors
[labels
[i
]];
1704 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1705 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1711 var displayDigits
= this.numXDigits_
+ this.numExtraDigits_
;
1712 var html
= this.attr_('xValueFormatter')(x
, displayDigits
) + ":";
1714 var fmtFunc
= this.attr_('yValueFormatter');
1715 var showZeros
= this.attr_("labelsShowZeroValues");
1716 var sepLines
= this.attr_("labelsSeparateLines");
1717 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1718 var pt
= this.selPoints_
[i
];
1719 if (pt
.yval
== 0 && !showZeros
) continue;
1720 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1721 if (sepLines
) html
+= "<br/>";
1723 var c
= this.plotter_
.colors
[pt
.name
];
1724 var yval
= fmtFunc(pt
.yval
, displayDigits
);
1725 // TODO(danvk): use a template string here and make it an attribute.
1726 html
+= " <b><span style='color: " + c
+ ";'>"
1727 + pt
.name
+ "</span></b>:"
1734 * Draw dots over the selectied points in the data series. This function
1735 * takes care of cleanup of previously-drawn dots.
1738 Dygraph
.prototype.updateSelection_
= function() {
1739 // Clear the previously drawn vertical, if there is one
1740 var ctx
= this.canvas_
.getContext("2d");
1741 if (this.previousVerticalX_
>= 0) {
1742 // Determine the maximum highlight circle size.
1743 var maxCircleSize
= 0;
1744 var labels
= this.attr_('labels');
1745 for (var i
= 1; i
< labels
.length
; i
++) {
1746 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1747 if (r
> maxCircleSize
) maxCircleSize
= r
;
1749 var px
= this.previousVerticalX_
;
1750 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1751 2 * maxCircleSize
+ 2, this.height_
);
1754 if (this.selPoints_
.length
> 0) {
1755 // Set the status message to indicate the selected point(s)
1756 if (this.attr_('showLabelsOnHighlight')) {
1757 var html
= this.generateLegendHTML_(this.lastx_
, this.selPoints_
);
1758 this.attr_("labelsDiv").innerHTML
= html
;
1761 // Draw colored circles over the center of each selected point
1762 var canvasx
= this.selPoints_
[0].canvasx
;
1764 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1765 var pt
= this.selPoints_
[i
];
1766 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1768 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1770 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1771 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1776 this.previousVerticalX_
= canvasx
;
1781 * Set manually set selected dots, and display information about them
1782 * @param int row number that should by highlighted
1783 * false value clears the selection
1786 Dygraph
.prototype.setSelection
= function(row
) {
1787 // Extract the points we've selected
1788 this.selPoints_
= [];
1791 if (row
!== false) {
1792 row
= row
-this.boundaryIds_
[0][0];
1795 if (row
!== false && row
>= 0) {
1796 for (var i
in this.layout_
.datasets
) {
1797 if (row
< this.layout_
.datasets
[i
].length
) {
1798 var point
= this.layout_
.points
[pos
+row
];
1800 if (this.attr_("stackedGraph")) {
1801 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1804 this.selPoints_
.push(point
);
1806 pos
+= this.layout_
.datasets
[i
].length
;
1810 if (this.selPoints_
.length
) {
1811 this.lastx_
= this.selPoints_
[0].xval
;
1812 this.updateSelection_();
1814 this.clearSelection();
1820 * The mouse has left the canvas. Clear out whatever artifacts remain
1821 * @param {Object} event the mouseout event from the browser.
1824 Dygraph
.prototype.mouseOut_
= function(event
) {
1825 if (this.attr_("unhighlightCallback")) {
1826 this.attr_("unhighlightCallback")(event
);
1829 if (this.attr_("hideOverlayOnMouseOut")) {
1830 this.clearSelection();
1835 * Remove all selection from the canvas
1838 Dygraph
.prototype.clearSelection
= function() {
1839 // Get rid of the overlay data
1840 var ctx
= this.canvas_
.getContext("2d");
1841 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1842 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
1843 this.selPoints_
= [];
1848 * Returns the number of the currently selected row
1849 * @return int row number, of -1 if nothing is selected
1852 Dygraph
.prototype.getSelection
= function() {
1853 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1857 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1858 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1859 return row
+ this.boundaryIds_
[0][0];
1865 Dygraph
.zeropad
= function(x
) {
1866 if (x
< 10) return "0" + x
; else return "" + x
;
1870 * Return a string version of the hours, minutes and seconds portion of a date.
1871 * @param {Number} date The JavaScript date (ms since epoch)
1872 * @return {String} A time of the form "HH:MM:SS"
1875 Dygraph
.hmsString_
= function(date
) {
1876 var zeropad
= Dygraph
.zeropad
;
1877 var d
= new Date(date
);
1878 if (d
.getSeconds()) {
1879 return zeropad(d
.getHours()) + ":" +
1880 zeropad(d
.getMinutes()) + ":" +
1881 zeropad(d
.getSeconds());
1883 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1888 * Convert a JS date to a string appropriate to display on an axis that
1889 * is displaying values at the stated granularity.
1890 * @param {Date} date The date to format
1891 * @param {Number} granularity One of the Dygraph granularity constants
1892 * @return {String} The formatted date
1895 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1896 if (granularity
>= Dygraph
.DECADAL
) {
1897 return date
.strftime('%Y');
1898 } else if (granularity
>= Dygraph
.MONTHLY
) {
1899 return date
.strftime('%b %y');
1901 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1902 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1903 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1905 return Dygraph
.hmsString_(date
.getTime());
1911 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1912 * @param {Number} date The JavaScript date (ms since epoch)
1913 * @return {String} A date of the form "YYYY/MM/DD"
1916 Dygraph
.dateString_
= function(date
) {
1917 var zeropad
= Dygraph
.zeropad
;
1918 var d
= new Date(date
);
1921 var year
= "" + d
.getFullYear();
1922 // Get a 0 padded month string
1923 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1924 // Get a 0 padded day string
1925 var day
= zeropad(d
.getDate());
1928 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1929 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1931 return year
+ "/" + month + "/" + day
+ ret
;
1935 * Fires when there's data available to be graphed.
1936 * @param {String} data Raw CSV data to be plotted
1939 Dygraph
.prototype.loadedEvent_
= function(data
) {
1940 this.rawData_
= this.parseCSV_(data
);
1944 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1945 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1946 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1949 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1952 Dygraph
.prototype.addXTicks_
= function() {
1953 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1955 if (this.dateWindow_
) {
1956 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1958 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1961 var formatter
= this.attr_('xTicker');
1962 var ret
= formatter(range
[0], range
[1], this);
1965 // Note: numericTicks() returns a {ticks: [...], numDigits: yy} dictionary,
1966 // whereas dateTicker and user-defined tickers typically just return a ticks
1968 if (ret
.ticks
!== undefined
) {
1970 this.numXDigits_
= ret
.numDigits
;
1975 this.layout_
.updateOptions({xTicks
: xTicks
});
1978 // Time granularity enumeration
1979 Dygraph
.SECONDLY
= 0;
1980 Dygraph
.TWO_SECONDLY
= 1;
1981 Dygraph
.FIVE_SECONDLY
= 2;
1982 Dygraph
.TEN_SECONDLY
= 3;
1983 Dygraph
.THIRTY_SECONDLY
= 4;
1984 Dygraph
.MINUTELY
= 5;
1985 Dygraph
.TWO_MINUTELY
= 6;
1986 Dygraph
.FIVE_MINUTELY
= 7;
1987 Dygraph
.TEN_MINUTELY
= 8;
1988 Dygraph
.THIRTY_MINUTELY
= 9;
1989 Dygraph
.HOURLY
= 10;
1990 Dygraph
.TWO_HOURLY
= 11;
1991 Dygraph
.SIX_HOURLY
= 12;
1993 Dygraph
.WEEKLY
= 14;
1994 Dygraph
.MONTHLY
= 15;
1995 Dygraph
.QUARTERLY
= 16;
1996 Dygraph
.BIANNUAL
= 17;
1997 Dygraph
.ANNUAL
= 18;
1998 Dygraph
.DECADAL
= 19;
1999 Dygraph
.CENTENNIAL
= 20;
2000 Dygraph
.NUM_GRANULARITIES
= 21;
2002 Dygraph
.SHORT_SPACINGS
= [];
2003 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
2004 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
2005 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
2006 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
2007 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
2008 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
2009 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
2010 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
2011 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
2012 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
2013 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
2014 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
2015 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
2016 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
2017 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
2021 // If we used this time granularity, how many ticks would there be?
2022 // This is only an approximation, but it's generally good enough.
2024 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2025 if (granularity
< Dygraph
.MONTHLY
) {
2026 // Generate one tick mark for every fixed interval of time.
2027 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2028 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2030 var year_mod
= 1; // e.g. to only print one point every 10 years.
2031 var num_months
= 12;
2032 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2033 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2034 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2035 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2036 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2038 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2039 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2040 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2046 // Construct an x-axis of nicely-formatted times on meaningful boundaries
2047 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2049 // Returns an array containing {v: millis, label: label} dictionaries.
2051 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2052 var formatter
= this.attr_("xAxisLabelFormatter");
2054 if (granularity
< Dygraph
.MONTHLY
) {
2055 // Generate one tick mark for every fixed interval of time.
2056 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2057 var format
= '%d%b'; // e.g. "1Jan"
2059 // Find a time less than start_time which occurs on a "nice" time boundary
2060 // for this granularity.
2061 var g
= spacing
/ 1000;
2062 var d
= new Date(start_time
);
2063 if (g
<= 60) { // seconds
2064 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2068 if (g
<= 60) { // minutes
2069 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2074 if (g
<= 24) { // days
2075 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2080 if (g
== 7) { // one week
2081 d
.setDate(d
.getDate() - d
.getDay());
2086 start_time
= d
.getTime();
2088 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2089 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2092 // Display a tick mark on the first of a set of months of each year.
2093 // Years get a tick mark iff y % year_mod == 0. This is useful for
2094 // displaying a tick mark once every 10 years, say, on long time scales.
2096 var year_mod
= 1; // e.g. to only print one point every 10 years.
2098 if (granularity
== Dygraph
.MONTHLY
) {
2099 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2100 } else if (granularity
== Dygraph
.QUARTERLY
) {
2101 months
= [ 0, 3, 6, 9 ];
2102 } else if (granularity
== Dygraph
.BIANNUAL
) {
2104 } else if (granularity
== Dygraph
.ANNUAL
) {
2106 } else if (granularity
== Dygraph
.DECADAL
) {
2109 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2113 this.warn("Span of dates is too long");
2116 var start_year
= new Date(start_time
).getFullYear();
2117 var end_year
= new Date(end_time
).getFullYear();
2118 var zeropad
= Dygraph
.zeropad
;
2119 for (var i
= start_year
; i
<= end_year
; i
++) {
2120 if (i
% year_mod
!= 0) continue;
2121 for (var j
= 0; j
< months
.length
; j
++) {
2122 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2123 var t
= Dygraph
.dateStrToMillis(date_str
);
2124 if (t
< start_time
|| t
> end_time
) continue;
2125 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2135 * Add ticks to the x-axis based on a date range.
2136 * @param {Number} startDate Start of the date window (millis since epoch)
2137 * @param {Number} endDate End of the date window (millis since epoch)
2138 * @return {Array.<Object>} Array of {label, value} tuples.
2141 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2143 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2144 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2145 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2152 return self
.GetXAxis(startDate
, endDate
, chosen
);
2154 // TODO(danvk): signal error.
2158 // This is a list of human-friendly values at which to show tick marks on a log
2159 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2160 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2161 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2162 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2164 for (var power
= -39; power
<= 39; power
++) {
2165 var range
= Math
.pow(10, power
);
2166 for (var mult
= 1; mult
<= 9; mult
++) {
2167 var val
= range
* mult
;
2174 // val is the value to search for
2175 // arry is the value over which to search
2176 // if abs > 0, find the lowest entry greater than val
2177 // if abs < 0, find the highest entry less than val
2178 // if abs == 0, find the entry that equals val.
2179 // Currently does not work when val is outside the range of arry's values.
2180 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2181 if (low
== null || high
== null) {
2183 high
= arry
.length
- 1;
2191 var validIndex
= function(idx
) {
2192 return idx
>= 0 && idx
< arry
.length
;
2194 var mid
= parseInt((low
+ high
) / 2);
2195 var element
= arry
[mid
];
2196 if (element
== val
) {
2199 if (element
> val
) {
2201 // Accept if element > val, but also if prior element < val.
2203 if (validIndex(idx
) && arry
[idx
] < val
) {
2207 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2209 if (element
< val
) {
2211 // Accept if element < val, but also if prior element > val.
2213 if (validIndex(idx
) && arry
[idx
] > val
) {
2217 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2222 * Determine the number of significant figures in a Number up to the specified
2223 * precision. Note that there is no way to determine if a trailing '0' is
2224 * significant or not, so by convention we return 1 for all of the following
2225 * inputs: 1, 1.0, 1.00, 1.000 etc.
2226 * @param {Number} x The input value.
2227 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
2228 * Default and maximum allowed value is 13.
2229 * @return {Number} The number of significant figures which is >= 1.
2231 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
2232 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
2234 // Convert the number to its exponential notation form and work backwards,
2235 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
2236 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
2237 // the JavaScript interpreter handle the low level bits of the Number for us.
2238 var s
= x
.toExponential(precision
);
2239 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
2241 for (var i
= ePos
- 1; i
>= 0; i
--) {
2243 // Got to the decimal place. We'll call this 1 digit of precision because
2244 // we can't know for sure how many trailing 0s are significant.
2246 } else if (s
[i
] != '0') {
2247 // Found the first non-zero digit. Return the number of characters
2248 // except for the '.'.
2249 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
2253 // Occurs if toExponential() doesn't return a string containing 'e', which
2254 // should never happen.
2259 * Add ticks when the x axis has numbers on it (instead of dates)
2260 * TODO(konigsberg): Update comment.
2262 * @param {Number} minV minimum value
2263 * @param {Number} maxV maximum value
2265 * @param {function} attribute accessor function.
2266 * @return {Array.<Object>} Array of {label, value} tuples.
2269 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2270 var attr
= function(k
) {
2271 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2272 return self
.attr_(k
);
2277 for (var i
= 0; i
< vals
.length
; i
++) {
2278 ticks
.push({v
: vals
[i
]});
2281 if (axis_props
&& attr("logscale")) {
2282 var pixelsPerTick
= attr('pixelsPerYLabel');
2283 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2284 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2285 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2286 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2291 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2293 // Count the number of tick values would appear, if we can get at least
2294 // nTicks / 4 accept them
.
2295 var lastDisplayed
= null;
2296 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2297 var axisId
= axis_props
.yAxisId
;
2298 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2299 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2300 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2301 var tick
= { v
: tickValue
};
2302 if (lastDisplayed
== null) {
2304 tickValue
: tickValue
,
2308 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2310 tickValue
: tickValue
,
2319 // Since we went in backwards order.
2324 // ticks.length won't be 0 if the log scale function finds values to insert.
2325 if (ticks
.length
== 0) {
2327 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2328 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2329 // The first spacing greater than pixelsPerYLabel is what we use.
2330 // TODO(danvk): version that works on a log scale.
2331 if (attr("labelsKMG2")) {
2332 var mults
= [1, 2, 4, 8];
2334 var mults
= [1, 2, 5];
2336 var scale
, low_val
, high_val
, nTicks
;
2337 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2338 var pixelsPerTick
= attr('pixelsPerYLabel');
2339 for (var i
= -10; i
< 50; i
++) {
2340 if (attr("labelsKMG2")) {
2341 var base_scale
= Math
.pow(16, i
);
2343 var base_scale
= Math
.pow(10, i
);
2345 for (var j
= 0; j
< mults
.length
; j
++) {
2346 scale
= base_scale
* mults
[j
];
2347 low_val
= Math
.floor(minV
/ scale
) * scale
;
2348 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2349 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2350 var spacing
= self
.height_
/ nTicks
;
2351 // wish I could break out of both loops at once...
2352 if (spacing
> pixelsPerTick
) break;
2354 if (spacing
> pixelsPerTick
) break;
2357 // Construct the set of ticks.
2358 // Allow reverse y-axis if it's explicitly requested.
2359 if (low_val
> high_val
) scale
*= -1;
2360 for (var i
= 0; i
< nTicks
; i
++) {
2361 var tickV
= low_val
+ i
* scale
;
2362 ticks
.push( {v
: tickV
} );
2367 // Add formatted labels to the ticks.
2370 if (attr("labelsKMB")) {
2372 k_labels
= [ "K", "M", "B", "T" ];
2374 if (attr("labelsKMG2")) {
2375 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2377 k_labels
= [ "k", "M", "G", "T" ];
2379 var formatter
= attr('yAxisLabelFormatter') ?
2380 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2382 // Determine the number of decimal places needed for the labels below by
2383 // taking the maximum number of significant figures for any label. We must
2384 // take the max because we can't tell if trailing 0s are significant.
2386 for (var i
= 0; i
< ticks
.length
; i
++) {
2387 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
2390 // Add labels to the ticks.
2391 for (var i
= 0; i
< ticks
.length
; i
++) {
2392 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2393 var tickV
= ticks
[i
].v
;
2394 var absTickV
= Math
.abs(tickV
);
2395 var label
= (formatter
!== undefined
) ?
2396 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
2397 if (k_labels
.length
> 0) {
2398 // Round up to an appropriate unit.
2400 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2401 if (absTickV
>= n
) {
2402 label
= formatter(tickV
/ n
, numDigits
) + k_labels
[j
];
2407 ticks
[i
].label
= label
;
2410 return {ticks
: ticks
, numDigits
: numDigits
};
2413 // Computes the range of the data series (including confidence intervals).
2414 // series is either [ [x1, y1], [x2, y2], ... ] or
2415 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2416 // Returns [low, high]
2417 Dygraph
.prototype.extremeValues_
= function(series
) {
2418 var minY
= null, maxY
= null;
2420 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2422 // With custom bars, maxY is the max of the high values.
2423 for (var j
= 0; j
< series
.length
; j
++) {
2424 var y
= series
[j
][1][0];
2426 var low
= y
- series
[j
][1][1];
2427 var high
= y
+ series
[j
][1][2];
2428 if (low
> y
) low
= y
; // this can happen with custom bars,
2429 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2430 if (maxY
== null || high
> maxY
) {
2433 if (minY
== null || low
< minY
) {
2438 for (var j
= 0; j
< series
.length
; j
++) {
2439 var y
= series
[j
][1];
2440 if (y
=== null || isNaN(y
)) continue;
2441 if (maxY
== null || y
> maxY
) {
2444 if (minY
== null || y
< minY
) {
2450 return [minY
, maxY
];
2454 * This function is called once when the chart's data is changed or the options
2455 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2456 * idea is that values derived from the chart's data can be computed here,
2457 * rather than every time the chart is drawn. This includes things like the
2458 * number of axes, rolling averages, etc.
2460 Dygraph
.prototype.predraw_
= function() {
2461 // TODO(danvk): move more computations out of drawGraph_ and into here.
2462 this.computeYAxes_();
2464 // Create a new plotter.
2465 if (this.plotter_
) this.plotter_
.clear();
2466 this.plotter_
= new DygraphCanvasRenderer(this,
2467 this.hidden_
, this.layout_
,
2468 this.renderOptions_
);
2470 // The roller sits in the bottom left corner of the chart. We don't know where
2471 // this will be until the options are available, so it's positioned here.
2472 this.createRollInterface_();
2474 // Same thing applies for the labelsDiv. It's right edge should be flush with
2475 // the right edge of the charting area (which may not be the same as the right
2476 // edge of the div, if we have two y-axes.
2477 this.positionLabelsDiv_();
2479 // If the data or options have changed, then we'd better redraw.
2484 * Update the graph with new data. This method is called when the viewing area
2485 * has changed. If the underlying data or options have changed, predraw_ will
2486 * be called before drawGraph_ is called.
2489 Dygraph
.prototype.drawGraph_
= function() {
2490 var data
= this.rawData_
;
2492 // This is used to set the second parameter to drawCallback, below.
2493 var is_initial_draw
= this.is_initial_draw_
;
2494 this.is_initial_draw_
= false;
2496 var minY
= null, maxY
= null;
2497 this.layout_
.removeAllDatasets();
2499 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2501 // Loop over the fields (series). Go from the last to the first,
2502 // because if they're stacked that's how we accumulate the values.
2504 var cumulative_y
= []; // For stacked series.
2507 var extremes
= {}; // series name -> [low, high]
2509 // Loop over all fields and create datasets
2510 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2511 if (!this.visibility()[i
- 1]) continue;
2513 var seriesName
= this.attr_("labels")[i
];
2514 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2515 var logScale
= this.attr_('logscale', i
);
2518 for (var j
= 0; j
< data
.length
; j
++) {
2519 var date
= data
[j
][0];
2520 var point
= data
[j
][i
];
2522 // On the log scale, points less than zero do not exist.
2523 // This will create a gap in the chart. Note that this ignores
2524 // connectSeparatedPoints.
2528 series
.push([date
, point
]);
2530 if (point
!= null || !connectSeparatedPoints
) {
2531 series
.push([date
, point
]);
2536 // TODO(danvk): move this into predraw_. It's insane to do it here.
2537 series
= this.rollingAverage(series
, this.rollPeriod_
);
2539 // Prune down to the desired range, if necessary (for zooming)
2540 // Because there can be lines going to points outside of the visible area,
2541 // we actually prune to visible points, plus one on either side.
2542 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2543 if (this.dateWindow_
) {
2544 var low
= this.dateWindow_
[0];
2545 var high
= this.dateWindow_
[1];
2547 // TODO(danvk): do binary search instead of linear search.
2548 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2549 var firstIdx
= null, lastIdx
= null;
2550 for (var k
= 0; k
< series
.length
; k
++) {
2551 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2554 if (series
[k
][0] <= high
) {
2558 if (firstIdx
=== null) firstIdx
= 0;
2559 if (firstIdx
> 0) firstIdx
--;
2560 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2561 if (lastIdx
< series
.length
- 1) lastIdx
++;
2562 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2563 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2564 pruned
.push(series
[k
]);
2568 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2571 var seriesExtremes
= this.extremeValues_(series
);
2574 for (var j
=0; j
<series
.length
; j
++) {
2575 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2578 } else if (this.attr_("stackedGraph")) {
2579 var l
= series
.length
;
2581 for (var j
= 0; j
< l
; j
++) {
2582 // If one data set has a NaN, let all subsequent stacked
2583 // sets inherit the NaN -- only start at 0 for the first set.
2584 var x
= series
[j
][0];
2585 if (cumulative_y
[x
] === undefined
) {
2586 cumulative_y
[x
] = 0;
2589 actual_y
= series
[j
][1];
2590 cumulative_y
[x
] += actual_y
;
2592 series
[j
] = [x
, cumulative_y
[x
]]
2594 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2595 seriesExtremes
[1] = cumulative_y
[x
];
2597 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2598 seriesExtremes
[0] = cumulative_y
[x
];
2602 extremes
[seriesName
] = seriesExtremes
;
2604 datasets
[i
] = series
;
2607 for (var i
= 1; i
< datasets
.length
; i
++) {
2608 if (!this.visibility()[i
- 1]) continue;
2609 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2612 this.computeYAxisRanges_(extremes
);
2613 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2614 seriesToAxisMap
: this.seriesToAxisMap_
2618 // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
2619 var tmp_zoomed_x
= this.zoomed_x_
;
2620 // Tell PlotKit to use this new data and render itself
2621 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2622 this.zoomed_x_
= tmp_zoomed_x
;
2623 this.layout_
.evaluateWithError();
2624 this.plotter_
.clear();
2625 this.plotter_
.render();
2626 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2627 this.canvas_
.height
);
2629 if (is_initial_draw
) {
2630 // Generate a static legend before any particular point is selected.
2631 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
2633 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2634 this.lastx_
= this.selPoints_
[0].xval
;
2635 this.updateSelection_();
2637 this.clearSelection();
2641 if (this.attr_("drawCallback") !== null) {
2642 this.attr_("drawCallback")(this, is_initial_draw
);
2647 * Determine properties of the y-axes which are independent of the data
2648 * currently being displayed. This includes things like the number of axes and
2649 * the style of the axes. It does not include the range of each axis and its
2651 * This fills in this.axes_ and this.seriesToAxisMap_.
2652 * axes_ = [ { options } ]
2653 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2654 * indices are into the axes_ array.
2656 Dygraph
.prototype.computeYAxes_
= function() {
2658 if (this.axes_
!= undefined
) {
2659 // Preserve valueWindow settings.
2661 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2662 valueWindows
.push(this.axes_
[index
].valueWindow
);
2666 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2667 this.seriesToAxisMap_
= {};
2669 // Get a list of series names.
2670 var labels
= this.attr_("labels");
2672 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2674 // all options which could be applied per-axis:
2682 'axisLabelFontSize',
2687 // Copy global axis options over to the first axis.
2688 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2689 var k
= axisOptions
[i
];
2690 var v
= this.attr_(k
);
2691 if (v
) this.axes_
[0][k
] = v
;
2694 // Go through once and add all the axes.
2695 for (var seriesName
in series
) {
2696 if (!series
.hasOwnProperty(seriesName
)) continue;
2697 var axis
= this.attr_("axis", seriesName
);
2699 this.seriesToAxisMap_
[seriesName
] = 0;
2702 if (typeof(axis
) == 'object') {
2703 // Add a new axis, making a copy of its per-axis options.
2705 Dygraph
.update(opts
, this.axes_
[0]);
2706 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2707 var yAxisId
= this.axes_
.length
;
2708 opts
.yAxisId
= yAxisId
;
2710 Dygraph
.update(opts
, axis
);
2711 this.axes_
.push(opts
);
2712 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2716 // Go through one more time and assign series to an axis defined by another
2717 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2718 for (var seriesName
in series
) {
2719 if (!series
.hasOwnProperty(seriesName
)) continue;
2720 var axis
= this.attr_("axis", seriesName
);
2721 if (typeof(axis
) == 'string') {
2722 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2723 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2724 "series " + axis
+ ", which does not define its own axis.");
2727 var idx
= this.seriesToAxisMap_
[axis
];
2728 this.seriesToAxisMap_
[seriesName
] = idx
;
2732 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2733 // this last so that hiding the first series doesn't destroy the axis
2734 // properties of the primary axis.
2735 var seriesToAxisFiltered
= {};
2736 var vis
= this.visibility();
2737 for (var i
= 1; i
< labels
.length
; i
++) {
2739 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2741 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2743 if (valueWindows
!= undefined
) {
2744 // Restore valueWindow settings.
2745 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2746 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2752 * Returns the number of y-axes on the chart.
2753 * @return {Number} the number of axes.
2755 Dygraph
.prototype.numAxes
= function() {
2757 for (var series
in this.seriesToAxisMap_
) {
2758 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2759 var idx
= this.seriesToAxisMap_
[series
];
2760 if (idx
> last_axis
) last_axis
= idx
;
2762 return 1 + last_axis
;
2766 * Determine the value range and tick marks for each axis.
2767 * @param {Object} extremes A mapping from seriesName -> [low, high]
2768 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2770 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2771 // Build a map from axis number -> [list of series names]
2772 var seriesForAxis
= [];
2773 for (var series
in this.seriesToAxisMap_
) {
2774 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2775 var idx
= this.seriesToAxisMap_
[series
];
2776 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2777 seriesForAxis
[idx
].push(series
);
2780 // Compute extreme values, a span and tick marks for each axis.
2781 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2782 var axis
= this.axes_
[i
];
2784 if (!seriesForAxis
[i
]) {
2785 // If no series are defined or visible then use a reasonable default
2786 axis
.extremeRange
= [0, 1];
2788 // Calculate the extremes of extremes.
2789 var series
= seriesForAxis
[i
];
2790 var minY
= Infinity
; // extremes[series[0]][0];
2791 var maxY
= -Infinity
; // extremes[series[0]][1];
2792 var extremeMinY
, extremeMaxY
;
2793 for (var j
= 0; j
< series
.length
; j
++) {
2794 // Only use valid extremes to stop null data series' from corrupting the scale.
2795 extremeMinY
= extremes
[series
[j
]][0];
2796 if (extremeMinY
!= null) {
2797 minY
= Math
.min(extremeMinY
, minY
);
2799 extremeMaxY
= extremes
[series
[j
]][1];
2800 if (extremeMaxY
!= null) {
2801 maxY
= Math
.max(extremeMaxY
, maxY
);
2804 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2806 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2807 if (minY
== Infinity
) minY
= 0;
2808 if (maxY
== -Infinity
) maxY
= 0;
2810 // Add some padding and round up to an integer to be human-friendly.
2811 var span
= maxY
- minY
;
2812 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2813 if (span
== 0) { span
= maxY
; }
2817 if (axis
.logscale
) {
2818 var maxAxisY
= maxY
+ 0.1 * span
;
2819 var minAxisY
= minY
;
2821 var maxAxisY
= maxY
+ 0.1 * span
;
2822 var minAxisY
= minY
- 0.1 * span
;
2824 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2825 if (!this.attr_("avoidMinZero")) {
2826 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2827 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2830 if (this.attr_("includeZero")) {
2831 if (maxY
< 0) maxAxisY
= 0;
2832 if (minY
> 0) minAxisY
= 0;
2835 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2837 if (axis
.valueWindow
) {
2838 // This is only set if the user has zoomed on the y-axis. It is never set
2839 // by a user. It takes precedence over axis.valueRange because, if you set
2840 // valueRange, you'd still expect to be able to pan.
2841 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2842 } else if (axis
.valueRange
) {
2843 // This is a user-set value range for this axis.
2844 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2846 axis
.computedValueRange
= axis
.extremeRange
;
2849 // Add ticks. By default, all axes inherit the tick positions of the
2850 // primary axis. However, if an axis is specifically marked as having
2851 // independent ticks, then that is permissible as well.
2852 if (i
== 0 || axis
.independentTicks
) {
2854 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2855 axis
.computedValueRange
[1],
2858 axis
.ticks
= ret
.ticks
;
2859 this.numYDigits_
= ret
.numDigits
;
2861 var p_axis
= this.axes_
[0];
2862 var p_ticks
= p_axis
.ticks
;
2863 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2864 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2865 var tick_values
= [];
2866 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2867 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2868 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2869 tick_values
.push(y_val
);
2873 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2874 axis
.computedValueRange
[1],
2875 this, axis
, tick_values
);
2876 axis
.ticks
= ret
.ticks
;
2877 this.numYDigits_
= ret
.numDigits
;
2883 * Calculates the rolling average of a data set.
2884 * If originalData is [label, val], rolls the average of those.
2885 * If originalData is [label, [, it's interpreted as [value, stddev]
2886 * and the roll is returned in the same form, with appropriately reduced
2887 * stddev for each value.
2888 * Note that this is where fractional input (i.e. '5/10') is converted into
2890 * @param {Array} originalData The data in the appropriate format (see above)
2891 * @param {Number} rollPeriod The number of points over which to average the
2894 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2895 if (originalData
.length
< 2)
2896 return originalData
;
2897 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2898 var rollingData
= [];
2899 var sigma
= this.attr_("sigma");
2901 if (this.fractions_
) {
2903 var den
= 0; // numerator/denominator
2905 for (var i
= 0; i
< originalData
.length
; i
++) {
2906 num
+= originalData
[i
][1][0];
2907 den
+= originalData
[i
][1][1];
2908 if (i
- rollPeriod
>= 0) {
2909 num
-= originalData
[i
- rollPeriod
][1][0];
2910 den
-= originalData
[i
- rollPeriod
][1][1];
2913 var date
= originalData
[i
][0];
2914 var value
= den
? num
/ den
: 0.0;
2915 if (this.attr_("errorBars")) {
2916 if (this.wilsonInterval_
) {
2917 // For more details on this confidence interval, see:
2918 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2920 var p
= value
< 0 ? 0 : value
, n
= den
;
2921 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2922 var denom
= 1 + sigma
* sigma
/ den
;
2923 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2924 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2925 rollingData
[i
] = [date
,
2926 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2928 rollingData
[i
] = [date
, [0, 0, 0]];
2931 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2932 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2935 rollingData
[i
] = [date
, mult
* value
];
2938 } else if (this.attr_("customBars")) {
2943 for (var i
= 0; i
< originalData
.length
; i
++) {
2944 var data
= originalData
[i
][1];
2946 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2948 if (y
!= null && !isNaN(y
)) {
2954 if (i
- rollPeriod
>= 0) {
2955 var prev
= originalData
[i
- rollPeriod
];
2956 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2963 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2964 1.0 * (mid
- low
) / count
,
2965 1.0 * (high
- mid
) / count
]];
2968 // Calculate the rolling average for the first rollPeriod - 1 points where
2969 // there is not enough data to roll over the full number of points
2970 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2971 if (!this.attr_("errorBars")){
2972 if (rollPeriod
== 1) {
2973 return originalData
;
2976 for (var i
= 0; i
< originalData
.length
; i
++) {
2979 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2980 var y
= originalData
[j
][1];
2981 if (y
== null || isNaN(y
)) continue;
2983 sum
+= originalData
[j
][1];
2986 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2988 rollingData
[i
] = [originalData
[i
][0], null];
2993 for (var i
= 0; i
< originalData
.length
; i
++) {
2997 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2998 var y
= originalData
[j
][1][0];
2999 if (y
== null || isNaN(y
)) continue;
3001 sum
+= originalData
[j
][1][0];
3002 variance
+= Math
.pow(originalData
[j
][1][1], 2);
3005 var stddev
= Math
.sqrt(variance
) / num_ok
;
3006 rollingData
[i
] = [originalData
[i
][0],
3007 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
3009 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
3019 * Parses a date, returning the number of milliseconds since epoch. This can be
3020 * passed in as an xValueParser in the Dygraph constructor.
3021 * TODO(danvk): enumerate formats that this understands.
3022 * @param {String} A date in YYYYMMDD format.
3023 * @return {Number} Milliseconds since epoch.
3026 Dygraph
.dateParser
= function(dateStr
, self
) {
3029 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
3030 dateStrSlashed
= dateStr
.replace("-", "/", "g");
3031 while (dateStrSlashed
.search("-") != -1) {
3032 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
3034 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3035 } else if (dateStr
.length
== 8) { // e.g. '20090712'
3036 // TODO(danvk): remove support for this format. It's confusing.
3037 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
3038 + "/" + dateStr
.substr(6,2);
3039 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
3041 // Any format that Date.parse will accept, e.g. "2009/07/12" or
3042 // "2009/07/12 12:34:56"
3043 d
= Dygraph
.dateStrToMillis(dateStr
);
3046 if (!d
|| isNaN(d
)) {
3047 self
.error("Couldn't parse " + dateStr
+ " as a date");
3053 * Detects the type of the str (date or numeric) and sets the various
3054 * formatting attributes in this.attrs_ based on this type.
3055 * @param {String} str An x value.
3058 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3060 if (str
.indexOf('-') > 0 ||
3061 str
.indexOf('/') >= 0 ||
3062 isNaN(parseFloat(str
))) {
3064 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3065 // TODO(danvk): remove support for this format.
3070 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3071 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3072 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3073 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3075 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3076 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3077 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3078 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3083 * Parses the value as a floating point number. This is like the parseFloat()
3084 * built-in, but with a few differences:
3085 * - the empty string is parsed as null, rather than NaN.
3086 * - if the string cannot be parsed at all, an error is logged.
3087 * If the string can't be parsed, this method returns null.
3088 * @param {String} x The string to be parsed
3089 * @param {Number} opt_line_no The line number from which the string comes.
3090 * @param {String} opt_line The text of the line from which the string comes.
3094 // Parse the x as a float or return null if it's not a number.
3095 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3096 var val
= parseFloat(x
);
3097 if (!isNaN(val
)) return val
;
3099 // Try to figure out what happeend.
3100 // If the value is the empty string, parse it as null.
3101 if (/^ *$/.test(x
)) return null;
3103 // If it was actually "NaN", return it as NaN.
3104 if (/^ *nan *$/i.test(x
)) return NaN
;
3106 // Looks like a parsing error.
3107 var msg
= "Unable to parse '" + x
+ "' as a number";
3108 if (opt_line
!== null && opt_line_no
!== null) {
3109 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3117 * Parses a string in a special csv format. We expect a csv file where each
3118 * line is a date point, and the first field in each line is the date string.
3119 * We also expect that all remaining fields represent series.
3120 * if the errorBars attribute is set, then interpret the fields as:
3121 * date, series1, stddev1, series2, stddev2, ...
3122 * @param {Array.<Object>} data See above.
3125 * @return Array.<Object> An array with one entry for each row. These entries
3126 * are an array of cells in that row. The first entry is the parsed x-value for
3127 * the row. The second, third, etc. are the y-values. These can take on one of
3128 * three forms, depending on the CSV and constructor parameters:
3130 * 2. [ value, stddev ]
3131 * 3. [ low value, center value, high value ]
3133 Dygraph
.prototype.parseCSV_
= function(data
) {
3135 var lines
= data
.split("\n");
3137 // Use the default delimiter or fall back to a tab if that makes sense.
3138 var delim
= this.attr_('delimiter');
3139 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3144 if (this.labelsFromCSV_
) {
3146 this.attrs_
.labels
= lines
[0].split(delim
);
3151 var defaultParserSet
= false; // attempt to auto-detect x value type
3152 var expectedCols
= this.attr_("labels").length
;
3153 var outOfOrder
= false;
3154 for (var i
= start
; i
< lines
.length
; i
++) {
3155 var line
= lines
[i
];
3157 if (line
.length
== 0) continue; // skip blank lines
3158 if (line
[0] == '#') continue; // skip comment lines
3159 var inFields
= line
.split(delim
);
3160 if (inFields
.length
< 2) continue;
3163 if (!defaultParserSet
) {
3164 this.detectTypeFromString_(inFields
[0]);
3165 xParser
= this.attr_("xValueParser");
3166 defaultParserSet
= true;
3168 fields
[0] = xParser(inFields
[0], this);
3170 // If fractions are expected, parse the numbers as "A/B
"
3171 if (this.fractions_) {
3172 for (var j = 1; j < inFields.length; j++) {
3173 // TODO(danvk): figure out an appropriate way to flag parse errors.
3174 var vals = inFields[j].split("/");
3175 if (vals.length != 2) {
3176 this.error('Expected fractional "num
/den
" values in CSV data ' +
3177 "but found a value
'" + inFields[j] + "' on line
" +
3178 (1 + i) + " ('" + line + "') which is not of
this form
.");
3181 fields[j] = [this.parseFloat_(vals[0], i, line),
3182 this.parseFloat_(vals[1], i, line)];
3185 } else if (this.attr_("errorBars
")) {
3186 // If there are error bars, values are (value, stddev) pairs
3187 if (inFields.length % 2 != 1) {
3188 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3189 'but line ' + (1 + i) + ' has an odd number of values (' +
3190 (inFields.length - 1) + "): '" + line + "'");
3192 for (var j = 1; j < inFields.length; j += 2) {
3193 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3194 this.parseFloat_(inFields[j + 1], i, line)];
3196 } else if (this.attr_("customBars
")) {
3197 // Bars are a low;center;high tuple
3198 for (var j = 1; j < inFields.length; j++) {
3199 var vals = inFields[j].split(";");
3200 fields[j] = [ this.parseFloat_(vals[0], i, line),
3201 this.parseFloat_(vals[1], i, line),
3202 this.parseFloat_(vals[2], i, line) ];
3205 // Values are just numbers
3206 for (var j = 1; j < inFields.length; j++) {
3207 fields[j] = this.parseFloat_(inFields[j], i, line);
3210 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3214 if (fields.length != expectedCols) {
3215 this.error("Number of columns
in line
" + i + " (" + fields.length +
3216 ") does not agree
with number of
labels (" + expectedCols +
3220 // If the user specified the 'labels' option and none of the cells of the
3221 // first row parsed correctly, then they probably double-specified the
3222 // labels. We go with the values set in the option, discard this row and
3223 // log a warning to the JS console.
3224 if (i == 0 && this.attr_('labels')) {
3225 var all_null = true;
3226 for (var j = 0; all_null && j < fields.length; j++) {
3227 if (fields[j]) all_null = false;
3230 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3231 "CSV
data ('" + line + "') appears to also contain labels
. " +
3232 "Will drop the CSV labels and
use the option labels
.");
3240 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3241 ret.sort(function(a,b) { return a[0] - b[0] });
3248 * The user has provided their data as a pre-packaged JS array. If the x values
3249 * are numeric, this is the same as dygraphs' internal format. If the x values
3250 * are dates, we need to convert them from Date objects to ms since epoch.
3251 * @param {Array.<Object>} data
3252 * @return {Array.<Object>} data with numeric x values.
3254 Dygraph.prototype.parseArray_ = function(data) {
3255 // Peek at the first x value to see if it's numeric.
3256 if (data.length == 0) {
3257 this.error("Can
't plot empty data set");
3260 if (data[0].length == 0) {
3261 this.error("Data set cannot contain an empty row");
3265 if (this.attr_("labels") == null) {
3266 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3267 "in the options parameter");
3268 this.attrs_.labels = [ "X" ];
3269 for (var i = 1; i < data[0].length; i++) {
3270 this.attrs_.labels.push("Y" + i);
3274 if (Dygraph.isDateLike(data[0][0])) {
3275 // Some intelligent defaults for a date x-axis.
3276 this.attrs_.xValueFormatter = Dygraph.dateString_;
3277 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3278 this.attrs_.xTicker = Dygraph.dateTicker;
3280 // Assume they're all dates
.
3281 var parsedData
= Dygraph
.clone(data
);
3282 for (var i
= 0; i
< data
.length
; i
++) {
3283 if (parsedData
[i
].length
== 0) {
3284 this.error("Row " + (1 + i
) + " of data is empty");
3287 if (parsedData
[i
][0] == null
3288 || typeof(parsedData
[i
][0].getTime
) != 'function'
3289 || isNaN(parsedData
[i
][0].getTime())) {
3290 this.error("x value in row " + (1 + i
) + " is not a Date");
3293 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3297 // Some intelligent defaults for a numeric x-axis.
3298 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3299 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3305 * Parses a DataTable object from gviz.
3306 * The data is expected to have a first column that is either a date or a
3307 * number. All subsequent columns must be numbers. If there is a clear mismatch
3308 * between this.xValueParser_ and the type of the first column, it will be
3309 * fixed. Fills out rawData_.
3310 * @param {Array.<Object>} data See above.
3313 Dygraph
.prototype.parseDataTable_
= function(data
) {
3314 var cols
= data
.getNumberOfColumns();
3315 var rows
= data
.getNumberOfRows();
3317 var indepType
= data
.getColumnType(0);
3318 if (indepType
== 'date' || indepType
== 'datetime') {
3319 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3320 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3321 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3322 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3323 } else if (indepType
== 'number') {
3324 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3325 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3326 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3327 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3329 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3330 "column 1 of DataTable input (Got '" + indepType
+ "')");
3334 // Array of the column indices which contain data (and not annotations).
3336 var annotationCols
= {}; // data index -> [annotation cols]
3337 var hasAnnotations
= false;
3338 for (var i
= 1; i
< cols
; i
++) {
3339 var type
= data
.getColumnType(i
);
3340 if (type
== 'number') {
3342 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3343 // This is OK -- it's an annotation column.
3344 var dataIdx
= colIdx
[colIdx
.length
- 1];
3345 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3346 annotationCols
[dataIdx
] = [i
];
3348 annotationCols
[dataIdx
].push(i
);
3350 hasAnnotations
= true;
3352 this.error("Only 'number' is supported as a dependent type with Gviz." +
3353 " 'string' is only supported if displayAnnotations is true");
3357 // Read column labels
3358 // TODO(danvk): add support back for errorBars
3359 var labels
= [data
.getColumnLabel(0)];
3360 for (var i
= 0; i
< colIdx
.length
; i
++) {
3361 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3362 if (this.attr_("errorBars")) i
+= 1;
3364 this.attrs_
.labels
= labels
;
3365 cols
= labels
.length
;
3368 var outOfOrder
= false;
3369 var annotations
= [];
3370 for (var i
= 0; i
< rows
; i
++) {
3372 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3373 data
.getValue(i
, 0) === null) {
3374 this.warn("Ignoring row " + i
+
3375 " of DataTable because of undefined or null first column.");
3379 if (indepType
== 'date' || indepType
== 'datetime') {
3380 row
.push(data
.getValue(i
, 0).getTime());
3382 row
.push(data
.getValue(i
, 0));
3384 if (!this.attr_("errorBars")) {
3385 for (var j
= 0; j
< colIdx
.length
; j
++) {
3386 var col
= colIdx
[j
];
3387 row
.push(data
.getValue(i
, col
));
3388 if (hasAnnotations
&&
3389 annotationCols
.hasOwnProperty(col
) &&
3390 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3392 ann
.series
= data
.getColumnLabel(col
);
3394 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3396 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3397 if (k
) ann
.text
+= "\n";
3398 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3400 annotations
.push(ann
);
3404 // Strip out infinities, which give dygraphs problems later on.
3405 for (var j
= 0; j
< row
.length
; j
++) {
3406 if (!isFinite(row
[j
])) row
[j
] = null;
3409 for (var j
= 0; j
< cols
- 1; j
++) {
3410 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3413 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3420 this.warn("DataTable is out of order; order it correctly to speed loading.");
3421 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3423 this.rawData_
= ret
;
3425 if (annotations
.length
> 0) {
3426 this.setAnnotations(annotations
, true);
3430 // This is identical to JavaScript's built-in Date.parse() method, except that
3431 // it doesn't get replaced with an incompatible method by aggressive JS
3432 // libraries like MooTools or Joomla.
3433 Dygraph
.dateStrToMillis
= function(str
) {
3434 return new Date(str
).getTime();
3437 // These functions are all based on MochiKit.
3438 Dygraph
.update
= function (self
, o
) {
3439 if (typeof(o
) != 'undefined' && o
!== null) {
3441 if (o
.hasOwnProperty(k
)) {
3449 Dygraph
.isArrayLike
= function (o
) {
3450 var typ
= typeof(o
);
3452 (typ
!= 'object' && !(typ
== 'function' &&
3453 typeof(o
.item
) == 'function')) ||
3455 typeof(o
.length
) != 'number' ||
3463 Dygraph
.isDateLike
= function (o
) {
3464 if (typeof(o
) != "object" || o
=== null ||
3465 typeof(o
.getTime
) != 'function') {
3471 Dygraph
.clone
= function(o
) {
3472 // TODO(danvk): figure out how MochiKit's version works
3474 for (var i
= 0; i
< o
.length
; i
++) {
3475 if (Dygraph
.isArrayLike(o
[i
])) {
3476 r
.push(Dygraph
.clone(o
[i
]));
3486 * Get the CSV data. If it's in a function, call that function. If it's in a
3487 * file, do an XMLHttpRequest to get it.
3490 Dygraph
.prototype.start_
= function() {
3491 if (typeof this.file_
== 'function') {
3492 // CSV string. Pretend we got it via XHR.
3493 this.loadedEvent_(this.file_());
3494 } else if (Dygraph
.isArrayLike(this.file_
)) {
3495 this.rawData_
= this.parseArray_(this.file_
);
3497 } else if (typeof this.file_
== 'object' &&
3498 typeof this.file_
.getColumnRange
== 'function') {
3499 // must be a DataTable from gviz.
3500 this.parseDataTable_(this.file_
);
3502 } else if (typeof this.file_
== 'string') {
3503 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3504 if (this.file_
.indexOf('\n') >= 0) {
3505 this.loadedEvent_(this.file_
);
3507 var req
= new XMLHttpRequest();
3509 req
.onreadystatechange
= function () {
3510 if (req
.readyState
== 4) {
3511 if (req
.status
== 200) {
3512 caller
.loadedEvent_(req
.responseText
);
3517 req
.open("GET", this.file_
, true);
3521 this.error("Unknown data format: " + (typeof this.file_
));
3526 * Changes various properties of the graph. These can include:
3528 * <li>file: changes the source data for the graph</li>
3529 * <li>errorBars: changes whether the data contains stddev</li>
3532 * @param {Object} attrs The new properties and values
3534 Dygraph
.prototype.updateOptions
= function(attrs
) {
3535 // TODO(danvk): this is a mess. Rethink this function.
3536 if ('rollPeriod' in attrs
) {
3537 this.rollPeriod_
= attrs
.rollPeriod
;
3539 if ('dateWindow' in attrs
) {
3540 this.dateWindow_
= attrs
.dateWindow
;
3541 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3542 this.zoomed_x_
= attrs
.dateWindow
!= null;
3545 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3546 this.zoomed_y_
= attrs
.valueRange
!= null;
3549 // TODO(danvk): validate per-series options.
3554 // highlightCircleSize
3556 Dygraph
.update(this.user_attrs_
, attrs
);
3557 Dygraph
.update(this.renderOptions_
, attrs
);
3559 this.labelsFromCSV_
= (this.attr_("labels") == null);
3561 // TODO(danvk): this doesn't match the constructor logic
3562 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3563 if (attrs
['file']) {
3564 this.file_
= attrs
['file'];
3572 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3573 * containing div (which has presumably changed size since the dygraph was
3574 * instantiated. If the width/height are specified, the div will be resized.
3576 * This is far more efficient than destroying and re-instantiating a
3577 * Dygraph, since it doesn't have to reparse the underlying data.
3579 * @param {Number} width Width (in pixels)
3580 * @param {Number} height Height (in pixels)
3582 Dygraph
.prototype.resize
= function(width
, height
) {
3583 if (this.resize_lock
) {
3586 this.resize_lock
= true;
3588 if ((width
=== null) != (height
=== null)) {
3589 this.warn("Dygraph.resize() should be called with zero parameters or " +
3590 "two non-NULL parameters. Pretending it was zero.");
3591 width
= height
= null;
3594 // TODO(danvk): there should be a clear() method.
3595 this.maindiv_
.innerHTML
= "";
3596 this.attrs_
.labelsDiv
= null;
3599 this.maindiv_
.style
.width
= width
+ "px";
3600 this.maindiv_
.style
.height
= height
+ "px";
3601 this.width_
= width
;
3602 this.height_
= height
;
3604 this.width_
= this.maindiv_
.offsetWidth
;
3605 this.height_
= this.maindiv_
.offsetHeight
;
3608 this.createInterface_();
3611 this.resize_lock
= false;
3615 * Adjusts the number of points in the rolling average. Updates the graph to
3616 * reflect the new averaging period.
3617 * @param {Number} length Number of points over which to average the data.
3619 Dygraph
.prototype.adjustRoll
= function(length
) {
3620 this.rollPeriod_
= length
;
3625 * Returns a boolean array of visibility statuses.
3627 Dygraph
.prototype.visibility
= function() {
3628 // Do lazy-initialization, so that this happens after we know the number of
3630 if (!this.attr_("visibility")) {
3631 this.attrs_
["visibility"] = [];
3633 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3634 this.attr_("visibility").push(true);
3636 return this.attr_("visibility");
3640 * Changes the visiblity of a series.
3642 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3643 var x
= this.visibility();
3644 if (num
< 0 || num
>= x
.length
) {
3645 this.warn("invalid series number in setVisibility: " + num
);
3653 * Update the list of annotations and redraw the chart.
3655 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3656 // Only add the annotation CSS rule once we know it will be used.
3657 Dygraph
.addAnnotationRule();
3658 this.annotations_
= ann
;
3659 this.layout_
.setAnnotations(this.annotations_
);
3660 if (!suppressDraw
) {
3666 * Return the list of annotations.
3668 Dygraph
.prototype.annotations
= function() {
3669 return this.annotations_
;
3673 * Get the index of a series (column) given its name. The first column is the
3674 * x-axis, so the data series start with index 1.
3676 Dygraph
.prototype.indexFromSetName
= function(name
) {
3677 var labels
= this.attr_("labels");
3678 for (var i
= 0; i
< labels
.length
; i
++) {
3679 if (labels
[i
] == name
) return i
;
3684 Dygraph
.addAnnotationRule
= function() {
3685 if (Dygraph
.addedAnnotationCSS
) return;
3687 var rule
= "border: 1px solid black; " +
3688 "background-color: white; " +
3689 "text-align: center;";
3691 var styleSheetElement
= document
.createElement("style");
3692 styleSheetElement
.type
= "text/css";
3693 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3695 // Find the first style sheet that we can access.
3696 // We may not add a rule to a style sheet from another domain for security
3697 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3698 // adds its own style sheets from google.com.
3699 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3700 if (document
.styleSheets
[i
].disabled
) continue;
3701 var mysheet
= document
.styleSheets
[i
];
3703 if (mysheet
.insertRule
) { // Firefox
3704 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3705 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3706 } else if (mysheet
.addRule
) { // IE
3707 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3709 Dygraph
.addedAnnotationCSS
= true;
3712 // Was likely a security exception.
3716 this.warn("Unable to add default annotation CSS rule; display may be off.");
3720 * Create a new canvas element. This is more complex than a simple
3721 * document.createElement("canvas") because of IE and excanvas.
3723 Dygraph
.createCanvas
= function() {
3724 var canvas
= document
.createElement("canvas");
3726 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3727 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3728 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3736 * A wrapper around Dygraph that implements the gviz API.
3737 * @param {Object} container The DOM object the visualization should live in.
3739 Dygraph
.GVizChart
= function(container
) {
3740 this.container
= container
;
3743 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3744 // Clear out any existing dygraph.
3745 // TODO(danvk): would it make more sense to simply redraw using the current
3746 // date_graph object?
3747 this.container
.innerHTML
= '';
3748 if (typeof(this.date_graph
) != 'undefined') {
3749 this.date_graph
.destroy();
3752 this.date_graph
= new Dygraph(this.container
, data
, options
);
3756 * Google charts compatible setSelection
3757 * Only row selection is supported, all points in the row will be highlighted
3758 * @param {Array} array of the selected cells
3761 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3763 if (selection_array
.length
) {
3764 row
= selection_array
[0].row
;
3766 this.date_graph
.setSelection(row
);
3770 * Google charts compatible getSelection implementation
3771 * @return {Array} array of the selected cells
3774 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3777 var row
= this.date_graph
.getSelection();
3779 if (row
< 0) return selection
;
3782 for (var i
in this.date_graph
.layout_
.datasets
) {
3783 selection
.push({row
: row
, column
: col
});
3790 // Older pages may still use this name.
3791 DateGraph
= Dygraph
;
3793 // <REMOVE_FOR_COMBINED>
3794 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
3797 "default": "parseFloat() or Date.parse()*",
3798 "labels": ["CSV parsing"],
3799 "type": "function(str) -> number",
3800 "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."
3804 "labels": ["Data Line display"],
3806 "description": "If set, stack series on top of one another rather than drawing them independently."
3810 "labels": ["Data Line display"],
3812 "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."
3814 "labelsDivStyles": {
3816 "labels": ["Legend"],
3818 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
3822 "labels": ["Data Line display"],
3824 "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."
3828 "labels": ["Overall display"],
3830 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3834 "labels": ["Callbacks"],
3835 "type": "function(minDate, maxDate, yRanges)",
3836 "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."
3838 "pointClickCallback": {
3840 "labels": ["Callbacks", "Interactive Elements"],
3845 "default": "(see description)",
3846 "labels": ["Data Series Colors"],
3847 "type": "array<string>",
3848 "example": "['red', '#00FF00']",
3849 "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."
3851 "connectSeparatedPoints": {
3853 "labels": ["Data Line display"],
3855 "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."
3857 "highlightCallback": {
3859 "labels": ["Callbacks"],
3860 "type": "function(event, x, points,row)",
3861 "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>"
3865 "labels": ["Axis display"],
3867 "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"
3871 "labels": ["Error Bars", "Rolling Averages"],
3872 "type": "integer >= 1",
3873 "description": "Number of days over which to average data. Discussed extensively above."
3875 "unhighlightCallback": {
3877 "labels": ["Callbacks"],
3878 "type": "function(event)",
3879 "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."
3883 "labels": ["Axis display"],
3885 "description": "The size of the line to display next to each tick mark on x- or y-axes."
3887 "labelsSeparateLines": {
3889 "labels": ["Legend"],
3891 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
3893 "xValueFormatter": {
3894 "default": "(Round to 2 decimal places)",
3895 "labels": ["Axis display"],
3896 "type": "function(x)",
3897 "description": "Function to provide a custom display format for the X value for mouseover."
3899 "pixelsPerYLabel": {
3901 "labels": ["Axis display", "Grid"],
3903 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3905 "annotationMouseOverHandler": {
3907 "labels": ["Annotations"],
3908 "type": "function(annotation, point, dygraph, event)",
3909 "description": "If provided, this function is called whenever the user mouses over an annotation."
3911 "annotationMouseOutHandler": {
3913 "labels": ["Annotations"],
3914 "type": "function(annotation, point, dygraph, event)",
3915 "description": "If provided, this function is called whenever the user mouses out of an annotation."
3917 "annotationClickHandler": {
3919 "labels": ["Annotations"],
3920 "type": "function(annotation, point, dygraph, event)",
3921 "description": "If provided, this function is called whenever the user clicks on an annotation."
3923 "annotationDblClickHandler": {
3925 "labels": ["Annotations"],
3926 "type": "function(annotation, point, dygraph, event)",
3927 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
3931 "labels": ["Callbacks"],
3932 "type": "function(dygraph, is_initial)",
3933 "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."
3937 "labels": ["Value display/formatting"],
3939 "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."
3943 "labels": ["CSV parsing"],
3945 "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."
3947 "axisLabelFontSize": {
3949 "labels": ["Axis display"],
3951 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
3953 "underlayCallback": {
3955 "labels": ["Callbacks"],
3956 "type": "function(canvas, area, dygraph)",
3957 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
3961 "labels": ["Overall display"],
3963 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3965 "interactionModel": {
3967 "labels": ["Interactive Elements"],
3969 "description": "TODO(konigsberg): document this"
3972 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
3973 "labels": ["Axis display"],
3974 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
3975 "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."
3977 "xAxisLabelWidth": {
3979 "labels": ["Axis display"],
3981 "description": "Width, in pixels, of the x-axis labels."
3983 "showLabelsOnHighlight": {
3985 "labels": ["Interactive Elements", "Legend"],
3987 "description": "Whether to show the legend upon mouseover."
3990 "default": "(none)",
3991 "labels": ["Axis display"],
3992 "type": "string or object",
3993 "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."
3995 "pixelsPerXLabel": {
3997 "labels": ["Axis display", "Grid"],
3999 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
4003 "labels": ["Legend"],
4004 "type": "DOM element or string",
4005 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
4006 "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."
4010 "labels": ["CSV parsing", "Error Bars"],
4012 "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)."
4016 "labels": ["Axis display"],
4018 "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."
4022 "labels": ["Data Line display"],
4024 "example": "0.5, 2.0",
4025 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
4029 "labels": ["Error Bars"],
4031 "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."
4035 "labels": ["Data Line display"],
4037 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
4039 "highlightCircleSize": {
4041 "labels": ["Interactive Elements"],
4043 "description": "The size in pixels of the dot drawn over highlighted points."
4046 "default": "rgb(128,128,128)",
4048 "type": "red, blue",
4049 "description": "The color of the gridlines."
4052 "default": "[true, true, ...]",
4053 "labels": ["Data Line display"],
4054 "type": "Array of booleans",
4055 "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."
4058 "default": "Full range of the input is shown",
4059 "labels": ["Axis display"],
4060 "type": "Array of two numbers",
4061 "example": "[10, 110]",
4062 "description": "Explicitly set the vertical range of the graph to [low, high]."
4066 "labels": ["Legend"],
4068 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
4070 "colorSaturation": {
4072 "labels": ["Data Series Colors"],
4073 "type": "0.0 - 1.0",
4074 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4076 "yAxisLabelWidth": {
4078 "labels": ["Axis display"],
4080 "description": "Width, in pixels, of the y-axis labels."
4082 "hideOverlayOnMouseOut": {
4084 "labels": ["Interactive Elements", "Legend"],
4086 "description": "Whether to hide the legend when the mouse leaves the chart area."
4088 "yValueFormatter": {
4089 "default": "(Round to 2 decimal places)",
4090 "labels": ["Axis display"],
4091 "type": "function(x)",
4092 "description": "Function to provide a custom display format for the Y value for mouseover."
4095 "default": "onmouseover",
4096 "labels": ["Legend"],
4098 "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."
4100 "labelsShowZeroValues": {
4102 "labels": ["Legend"],
4104 "description": "Show zero value labels in the labelsDiv."
4108 "labels": ["Data Line display"],
4110 "description": "When set, display the graph as a step plot instead of a line plot."
4114 "labels": ["Value display/formatting"],
4116 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4120 "labels": ["Overall display"],
4122 "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."
4126 "labels": ["Axis display"],
4128 "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."
4130 "xAxisLabelFormatter": {
4131 "default": "Dygraph.dateAxisFormatter",
4132 "labels": ["Axis display", "Value display/formatting"],
4133 "type": "function(date, granularity)",
4134 "description": "Function to call to format values along the x axis."
4137 "snippet": "function(e, date){<br> alert(date);<br>}",
4139 "labels": ["Callbacks"],
4140 "type": "function(e, date)",
4141 "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."
4143 "yAxisLabelFormatter": {
4144 "default": "yValueFormatter",
4145 "labels": ["Axis display", "Value display/formatting"],
4146 "type": "function(x)",
4147 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4150 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4151 "labels": ["Legend"],
4152 "type": "array<string>",
4153 "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."
4156 "default": "Full range of the input is shown",
4157 "labels": ["Axis display"],
4158 "type": "Array of two Dates or numbers",
4159 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4160 "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."
4164 "labels": ["Interactive Elements", "Rolling Averages"],
4166 "description": "If the rolling average period text box should be shown."
4170 "labels": ["Error Bars"],
4172 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4176 "labels": ["CSV parsing", "Error Bars"],
4178 "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."
4182 "labels": ["Data Series Colors"],
4183 "type": "float (0.0 - 1.0)",
4184 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4188 "labels": ["CSV parsing", "Error Bars"],
4190 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4192 "displayAnnotations": {
4194 "labels": ["Annotations"],
4196 "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."
4198 "panEdgeFraction": {
4200 "labels": ["Axis Display", "Interactive Elements"],
4203 "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."
4206 "labels": ["Chart labels"],
4209 "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."
4213 "labels": ["Chart labels"],
4215 "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."
4218 "labels": ["Chart labels"],
4221 "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."
4224 "labels": ["Chart labels"],
4227 "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."
4230 "labels": ["Chart labels"],
4233 "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."
4236 "labels": ["Chart labels"],
4239 "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."
4241 "isZoomedIgnoreProgrammaticZoom" : {
4243 "labels": ["Zooming"],
4245 "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
4249 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4250 // JSON. This assumption cannot be checked in JS, but it will be checked when
4251 // documentation is generated by the generate-documentation.py script. For the
4252 // most part, this just means that you should always use double quotes.
4254 // Do a quick sanity check on the options reference.
4256 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4257 var flds
= ['type', 'default', 'description'];
4264 'Data Line display',
4265 'Data Series Colors',
4268 'Interactive Elements',
4272 'Value display/formatting',
4276 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4278 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4279 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4280 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4281 for (var i
= 0; i
< flds
.length
; i
++) {
4282 if (!op
.hasOwnProperty(flds
[i
])) {
4283 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4284 } else if (typeof(op
[flds
[i
]]) != 'string') {
4285 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4288 var labels
= op
['labels'];
4289 if (typeof(labels
) !== 'object') {
4290 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4291 for (var i
= 0; i
< labels
.length
; i
++) {
4292 if (!cats
.hasOwnProperty(labels
[i
])) {
4293 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4294 '", which is invalid.');
4300 // </REMOVE_FOR_COMBINED
>