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 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
199 // Various logging levels.
205 // Directions for panning and zooming. Use bit operations when combined
206 // values are possible.
207 Dygraph
.HORIZONTAL
= 1;
208 Dygraph
.VERTICAL
= 2;
210 // Used for initializing annotation CSS rules only once.
211 Dygraph
.addedAnnotationCSS
= false;
213 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
214 // Labels is no longer a constructor parameter, since it's typically set
215 // directly from the data source. It also conains a name for the x-axis,
216 // which the previous constructor form did not.
217 if (labels
!= null) {
218 var new_labels
= ["Date"];
219 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
220 Dygraph
.update(attrs
, { 'labels': new_labels
});
222 this.__init__(div
, file
, attrs
);
226 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
227 * and context <canvas> inside of it. See the constructor for details.
229 * @param {Element} div the Element to render the graph into.
230 * @param {String | Function} file Source data
231 * @param {Object} attrs Miscellaneous other options
234 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
235 // Hack for IE: if we're using excanvas and the document hasn't finished
236 // loading yet (and hence may not have initialized whatever it needs to
237 // initialize), then keep calling this routine periodically until it has.
238 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
239 typeof(G_vmlCanvasManager
) != 'undefined' &&
240 document
.readyState
!= 'complete') {
242 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
245 // Support two-argument constructor
246 if (attrs
== null) { attrs
= {}; }
248 // Copy the important bits into the object
249 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
252 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
253 this.previousVerticalX_
= -1;
254 this.fractions_
= attrs
.fractions
|| false;
255 this.dateWindow_
= attrs
.dateWindow
|| null;
257 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
258 this.is_initial_draw_
= true;
259 this.annotations_
= [];
261 // Number of digits to use when labeling the x (if numeric) and y axis
263 this.numXDigits_
= 2;
264 this.numYDigits_
= 2;
266 // When labeling x (if numeric) or y values in the legend, there are
267 // numDigits + numExtraDigits of precision used. For axes labels with N
268 // digits of precision, the data should be displayed with at least N+1 digits
269 // of precision. The reason for this is to divide each interval between
270 // successive ticks into tenths (for 1) or hundredths (for 2), etc. For
271 // example, if the labels are [0, 1, 2], we want data to be displayed as
273 this.numExtraDigits_
= 1;
275 // Clear the div. This ensure that, if multiple dygraphs are passed the same
276 // div, then only one will be drawn.
279 // If the div isn't already sized then inherit from our attrs or
280 // give it a default size.
281 if (div
.style
.width
== '') {
282 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
284 if (div
.style
.height
== '') {
285 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
287 this.width_
= parseInt(div
.style
.width
, 10);
288 this.height_
= parseInt(div
.style
.height
, 10);
289 // The div might have been specified as percent of the current window size,
290 // convert that to an appropriate number of pixels.
291 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
292 this.width_
= div
.offsetWidth
;
294 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
295 this.height_
= div
.offsetHeight
;
298 if (this.width_
== 0) {
299 this.error("dygraph has zero width. Please specify a width in pixels.");
301 if (this.height_
== 0) {
302 this.error("dygraph has zero height. Please specify a height in pixels.");
305 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
306 if (attrs
['stackedGraph']) {
307 attrs
['fillGraph'] = true;
308 // TODO(nikhilk): Add any other stackedGraph checks here.
311 // Dygraphs has many options, some of which interact with one another.
312 // To keep track of everything, we maintain two sets of options:
314 // this.user_attrs_ only options explicitly set by the user.
315 // this.attrs_ defaults, options derived from user_attrs_, data.
317 // Options are then accessed this.attr_('attr'), which first looks at
318 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
319 // defaults without overriding behavior that the user specifically asks for.
320 this.user_attrs_
= {};
321 Dygraph
.update(this.user_attrs_
, attrs
);
324 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
326 this.boundaryIds_
= [];
328 // Make a note of whether labels will be pulled from the CSV file.
329 this.labelsFromCSV_
= (this.attr_("labels") == null);
331 // Create the containing DIV and other interactive elements
332 this.createInterface_();
337 Dygraph
.prototype.toString
= function() {
338 var maindiv
= this.maindiv_
;
339 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
340 return "[Dygraph " + id
+ "]";
343 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
344 // <REMOVE_FOR_COMBINED>
345 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
346 this.error('Must include options reference JS for testing');
347 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
348 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
349 'in the Dygraphs.OPTIONS_REFERENCE listing.');
350 // Only log this error once.
351 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
353 // </REMOVE_FOR_COMBINED
>
355 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
356 this.user_attrs_
[seriesName
] != null &&
357 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
358 return this.user_attrs_
[seriesName
][name
];
359 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
360 return this.user_attrs_
[name
];
361 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
362 return this.attrs_
[name
];
368 // TODO(danvk): any way I can get the line numbers to be this.warn call?
369 Dygraph
.prototype.log
= function(severity
, message
) {
370 if (typeof(console
) != 'undefined') {
373 console
.debug('dygraphs: ' + message
);
376 console
.info('dygraphs: ' + message
);
378 case Dygraph
.WARNING
:
379 console
.warn('dygraphs: ' + message
);
382 console
.error('dygraphs: ' + message
);
387 Dygraph
.prototype.info
= function(message
) {
388 this.log(Dygraph
.INFO
, message
);
390 Dygraph
.prototype.warn
= function(message
) {
391 this.log(Dygraph
.WARNING
, message
);
393 Dygraph
.prototype.error
= function(message
) {
394 this.log(Dygraph
.ERROR
, message
);
398 * Returns the current rolling period, as set by the user or an option.
399 * @return {Number} The number of points in the rolling window
401 Dygraph
.prototype.rollPeriod
= function() {
402 return this.rollPeriod_
;
406 * Returns the currently-visible x-range. This can be affected by zooming,
407 * panning or a call to updateOptions.
408 * Returns a two-element array: [left, right].
409 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
411 Dygraph
.prototype.xAxisRange
= function() {
412 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
416 * Returns the lower- and upper-bound x-axis values of the
419 Dygraph
.prototype.xAxisExtremes
= function() {
420 var left
= this.rawData_
[0][0];
421 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
422 return [left
, right
];
426 * Returns the currently-visible y-range for an axis. This can be affected by
427 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
428 * called with no arguments, returns the range of the first axis.
429 * Returns a two-element array: [bottom, top].
431 Dygraph
.prototype.yAxisRange
= function(idx
) {
432 if (typeof(idx
) == "undefined") idx
= 0;
433 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
434 return [ this.axes_
[idx
].computedValueRange
[0],
435 this.axes_
[idx
].computedValueRange
[1] ];
439 * Returns the currently-visible y-ranges for each axis. This can be affected by
440 * zooming, panning, calls to updateOptions, etc.
441 * Returns an array of [bottom, top] pairs, one for each y-axis.
443 Dygraph
.prototype.yAxisRanges
= function() {
445 for (var i
= 0; i
< this.axes_
.length
; i
++) {
446 ret
.push(this.yAxisRange(i
));
451 // TODO(danvk): use these functions throughout dygraphs.
453 * Convert from data coordinates to canvas/div X/Y coordinates.
454 * If specified, do this conversion for the coordinate system of a particular
455 * axis. Uses the first axis by default.
456 * Returns a two-element array: [X, Y]
458 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
459 * instead of toDomCoords(null, y, axis).
461 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
462 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
466 * Convert from data x coordinates to canvas/div X coordinate.
467 * If specified, do this conversion for the coordinate system of a particular
469 * Returns a single value or null if x is null.
471 Dygraph
.prototype.toDomXCoord
= function(x
) {
476 var area
= this.plotter_
.area
;
477 var xRange
= this.xAxisRange();
478 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
482 * Convert from data x coordinates to canvas/div Y coordinate and optional
483 * axis. Uses the first axis by default.
485 * returns a single value or null if y is null.
487 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
488 var pct
= this.toPercentYCoord(y
, axis
);
493 var area
= this.plotter_
.area
;
494 return area
.y
+ pct
* area
.h
;
498 * Convert from canvas/div coords to data coordinates.
499 * If specified, do this conversion for the coordinate system of a particular
500 * axis. Uses the first axis by default.
501 * Returns a two-element array: [X, Y].
503 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
504 * instead of toDataCoords(null, y, axis).
506 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
507 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
511 * Convert from canvas/div x coordinate to data coordinate.
513 * If x is null, this returns null.
515 Dygraph
.prototype.toDataXCoord
= function(x
) {
520 var area
= this.plotter_
.area
;
521 var xRange
= this.xAxisRange();
522 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
526 * Convert from canvas/div y coord to value.
528 * If y is null, this returns null.
529 * if axis is null, this uses the first axis.
531 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
536 var area
= this.plotter_
.area
;
537 var yRange
= this.yAxisRange(axis
);
539 if (typeof(axis
) == "undefined") axis
= 0;
540 if (!this.axes_
[axis
].logscale
) {
541 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
543 // Computing the inverse of toDomCoord.
544 var pct
= (y
- area
.y
) / area
.h
546 // Computing the inverse of toPercentYCoord. The function was arrived at with
547 // the following steps:
549 // Original calcuation:
550 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
552 // Move denominator to both sides:
553 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
555 // subtract logr1, and take the negative value.
556 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
558 // Swap both sides of the equation, and we can compute the log of the
559 // return value. Which means we just need to use that as the exponent in
561 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
563 var logr1
= Dygraph
.log10(yRange
[1]);
564 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
565 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
571 * Converts a y for an axis to a percentage from the top to the
572 * bottom of the drawing area.
574 * If the coordinate represents a value visible on the canvas, then
575 * the value will be between 0 and 1, where 0 is the top of the canvas.
576 * However, this method will return values outside the range, as
577 * values can fall outside the canvas.
579 * If y is null, this returns null.
580 * if axis is null, this uses the first axis.
582 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
586 if (typeof(axis
) == "undefined") axis
= 0;
588 var area
= this.plotter_
.area
;
589 var yRange
= this.yAxisRange(axis
);
592 if (!this.axes_
[axis
].logscale
) {
593 // yRange[1] - y is unit distance from the bottom.
594 // yRange[1] - yRange[0] is the scale of the range.
595 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
596 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
598 var logr1
= Dygraph
.log10(yRange
[1]);
599 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
605 * Converts an x value to a percentage from the left to the right of
608 * If the coordinate represents a value visible on the canvas, then
609 * the value will be between 0 and 1, where 0 is the left of the canvas.
610 * However, this method will return values outside the range, as
611 * values can fall outside the canvas.
613 * If x is null, this returns null.
615 Dygraph
.prototype.toPercentXCoord
= function(x
) {
620 var xRange
= this.xAxisRange();
621 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
625 * Returns the number of columns (including the independent variable).
627 Dygraph
.prototype.numColumns
= function() {
628 return this.rawData_
[0].length
;
632 * Returns the number of rows (excluding any header/label row).
634 Dygraph
.prototype.numRows
= function() {
635 return this.rawData_
.length
;
639 * Returns the value in the given row and column. If the row and column exceed
640 * the bounds on the data, returns null. Also returns null if the value is
643 Dygraph
.prototype.getValue
= function(row
, col
) {
644 if (row
< 0 || row
> this.rawData_
.length
) return null;
645 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
647 return this.rawData_
[row
][col
];
650 Dygraph
.addEvent
= function(el
, evt
, fn
) {
651 var normed_fn
= function(e
) {
652 if (!e
) var e
= window
.event
;
655 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
656 el
.addEventListener(evt
, normed_fn
, false);
658 el
.attachEvent('on' + evt
, normed_fn
);
663 // Based on the article at
664 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
665 Dygraph
.cancelEvent
= function(e
) {
666 e
= e
? e
: window
.event
;
667 if (e
.stopPropagation
) {
670 if (e
.preventDefault
) {
673 e
.cancelBubble
= true;
675 e
.returnValue
= false;
681 * Generates interface elements for the Dygraph: a containing div, a div to
682 * display the current point, and a textbox to adjust the rolling average
683 * period. Also creates the Renderer/Layout elements.
686 Dygraph
.prototype.createInterface_
= function() {
687 // Create the all-enclosing graph div
688 var enclosing
= this.maindiv_
;
690 this.graphDiv
= document
.createElement("div");
691 this.graphDiv
.style
.width
= this.width_
+ "px";
692 this.graphDiv
.style
.height
= this.height_
+ "px";
693 enclosing
.appendChild(this.graphDiv
);
695 // Create the canvas for interactive parts of the chart.
696 this.canvas_
= Dygraph
.createCanvas();
697 this.canvas_
.style
.position
= "absolute";
698 this.canvas_
.width
= this.width_
;
699 this.canvas_
.height
= this.height_
;
700 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
701 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
703 // ... and for static parts of the chart.
704 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
706 // The interactive parts of the graph are drawn on top of the chart.
707 this.graphDiv
.appendChild(this.hidden_
);
708 this.graphDiv
.appendChild(this.canvas_
);
709 this.mouseEventElement_
= this.canvas_
;
712 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
713 dygraph
.mouseMove_(e
);
715 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
716 dygraph
.mouseOut_(e
);
719 // Create the grapher
720 // TODO(danvk): why does the Layout need its own set of options?
721 this.layoutOptions_
= { 'xOriginIsZero': false };
722 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
723 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
724 Dygraph
.update(this.layoutOptions_
, {
725 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
727 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
729 // TODO(danvk): why does the Renderer need its own set of options?
730 this.renderOptions_
= { colorScheme
: this.colors_
,
732 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
733 Dygraph
.update(this.renderOptions_
, this.attrs_
);
734 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
736 this.createStatusMessage_();
737 this.createDragInterface_();
741 * Detach DOM elements in the dygraph and null out all data references.
742 * Calling this when you're done with a dygraph can dramatically reduce memory
743 * usage. See, e.g., the tests/perf.html example.
745 Dygraph
.prototype.destroy
= function() {
746 var removeRecursive
= function(node
) {
747 while (node
.hasChildNodes()) {
748 removeRecursive(node
.firstChild
);
749 node
.removeChild(node
.firstChild
);
752 removeRecursive(this.maindiv_
);
754 var nullOut
= function(obj
) {
756 if (typeof(obj
[n
]) === 'object') {
762 // These may not all be necessary, but it can't hurt...
763 nullOut(this.layout_
);
764 nullOut(this.plotter_
);
769 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
770 * this particular canvas. All Dygraph work is done on this.canvas_.
771 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
772 * @return {Object} The newly-created canvas
775 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
776 var h
= Dygraph
.createCanvas();
777 h
.style
.position
= "absolute";
778 // TODO(danvk): h should be offset from canvas. canvas needs to include
779 // some extra area to make it easier to zoom in on the far left and far
780 // right. h needs to be precisely the plot area, so that clipping occurs.
781 h
.style
.top
= canvas
.style
.top
;
782 h
.style
.left
= canvas
.style
.left
;
783 h
.width
= this.width_
;
784 h
.height
= this.height_
;
785 h
.style
.width
= this.width_
+ "px"; // for IE
786 h
.style
.height
= this.height_
+ "px"; // for IE
790 // Taken from MochiKit.Color
791 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
795 if (saturation
=== 0) {
800 var i
= Math
.floor(hue
* 6);
801 var f
= (hue
* 6) - i
;
802 var p
= value
* (1 - saturation
);
803 var q
= value
* (1 - (saturation
* f
));
804 var t
= value
* (1 - (saturation
* (1 - f
)));
806 case 1: red
= q
; green
= value
; blue
= p
; break;
807 case 2: red
= p
; green
= value
; blue
= t
; break;
808 case 3: red
= p
; green
= q
; blue
= value
; break;
809 case 4: red
= t
; green
= p
; blue
= value
; break;
810 case 5: red
= value
; green
= p
; blue
= q
; break;
811 case 6: // fall through
812 case 0: red
= value
; green
= t
; blue
= p
; break;
815 red
= Math
.floor(255 * red
+ 0.5);
816 green
= Math
.floor(255 * green
+ 0.5);
817 blue
= Math
.floor(255 * blue
+ 0.5);
818 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
823 * Generate a set of distinct colors for the data series. This is done with a
824 * color wheel. Saturation/Value are customizable, and the hue is
825 * equally-spaced around the color wheel. If a custom set of colors is
826 * specified, that is used instead.
829 Dygraph
.prototype.setColors_
= function() {
830 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
831 // away with this.renderOptions_.
832 var num
= this.attr_("labels").length
- 1;
834 var colors
= this.attr_('colors');
836 var sat
= this.attr_('colorSaturation') || 1.0;
837 var val
= this.attr_('colorValue') || 0.5;
838 var half
= Math
.ceil(num
/ 2);
839 for (var i
= 1; i
<= num
; i
++) {
840 if (!this.visibility()[i
-1]) continue;
841 // alternate colors for high contrast.
842 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
843 var hue
= (1.0 * idx
/ (1 + num
));
844 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
847 for (var i
= 0; i
< num
; i
++) {
848 if (!this.visibility()[i
]) continue;
849 var colorStr
= colors
[i
% colors
.length
];
850 this.colors_
.push(colorStr
);
854 // TODO(danvk): update this w/r
/t/ the
new options system
.
855 this.renderOptions_
.colorScheme
= this.colors_
;
856 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
857 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
858 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
862 * Return the list of colors. This is either the list of colors passed in the
863 * attributes, or the autogenerated list of rgb(r,g,b) strings.
864 * @return {Array<string>} The list of colors.
866 Dygraph
.prototype.getColors
= function() {
870 // The following functions are from quirksmode.org with a modification for Safari from
871 // http://blog.firetree.net/2005/07/04/javascript-find-position/
872 // http://www.quirksmode.org/js
/findpos
.html
873 Dygraph
.findPosX
= function(obj
) {
878 curleft
+= obj
.offsetLeft
;
879 if(!obj
.offsetParent
)
881 obj
= obj
.offsetParent
;
888 Dygraph
.findPosY
= function(obj
) {
893 curtop
+= obj
.offsetTop
;
894 if(!obj
.offsetParent
)
896 obj
= obj
.offsetParent
;
906 * Create the div that contains information on the selected point(s)
907 * This goes in the top right of the canvas, unless an external div has already
911 Dygraph
.prototype.createStatusMessage_
= function() {
912 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
913 if (userLabelsDiv
&& null != userLabelsDiv
914 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
915 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
917 if (!this.attr_("labelsDiv")) {
918 var divWidth
= this.attr_('labelsDivWidth');
920 "position": "absolute",
923 "width": divWidth
+ "px",
925 "left": (this.width_
- divWidth
- 2) + "px",
926 "background": "white",
928 "overflow": "hidden"};
929 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
930 var div
= document
.createElement("div");
931 for (var name
in messagestyle
) {
932 if (messagestyle
.hasOwnProperty(name
)) {
933 div
.style
[name
] = messagestyle
[name
];
936 this.graphDiv
.appendChild(div
);
937 this.attrs_
.labelsDiv
= div
;
942 * Position the labels div so that its right edge is flush with the right edge
943 * of the charting area.
945 Dygraph
.prototype.positionLabelsDiv_
= function() {
946 // Don't touch a user-specified labelsDiv.
947 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
949 var area
= this.plotter_
.area
;
950 var div
= this.attr_("labelsDiv");
951 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
955 * Create the text box to adjust the averaging period
958 Dygraph
.prototype.createRollInterface_
= function() {
959 // Create a roller if one doesn't exist already.
961 this.roller_
= document
.createElement("input");
962 this.roller_
.type
= "text";
963 this.roller_
.style
.display
= "none";
964 this.graphDiv
.appendChild(this.roller_
);
967 var display
= this.attr_('showRoller') ? 'block' : 'none';
969 var textAttr
= { "position": "absolute",
971 "top": (this.plotter_
.area
.h
- 25) + "px",
972 "left": (this.plotter_
.area
.x
+ 1) + "px",
975 this.roller_
.size
= "2";
976 this.roller_
.value
= this.rollPeriod_
;
977 for (var name
in textAttr
) {
978 if (textAttr
.hasOwnProperty(name
)) {
979 this.roller_
.style
[name
] = textAttr
[name
];
984 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
987 // These functions are taken from MochiKit.Signal
988 Dygraph
.pageX
= function(e
) {
990 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
993 var b
= document
.body
;
995 (de
.scrollLeft
|| b
.scrollLeft
) -
996 (de
.clientLeft
|| 0);
1000 Dygraph
.pageY
= function(e
) {
1002 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1005 var b
= document
.body
;
1007 (de
.scrollTop
|| b
.scrollTop
) -
1008 (de
.clientTop
|| 0);
1012 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1013 return Dygraph
.pageX(e
) - context
.px
1016 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1017 return Dygraph
.pageY(e
) - context
.py
1020 // Called in response to an interaction model operation that
1021 // should start the default panning behavior.
1023 // It's used in the default callback for "mousedown" operations.
1024 // Custom interaction model builders can use it to provide the default
1025 // panning behavior.
1027 Dygraph
.startPan
= function(event
, g
, context
) {
1028 context
.isPanning
= true;
1029 var xRange
= g
.xAxisRange();
1030 context
.dateRange
= xRange
[1] - xRange
[0];
1031 context
.initialLeftmostDate
= xRange
[0];
1032 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1034 if (g
.attr_("panEdgeFraction")) {
1035 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
1036 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1038 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1039 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1041 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1042 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1043 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1045 var boundedValues
= [];
1046 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1048 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1049 var axis
= g
.axes_
[i
];
1050 var yExtremes
= axis
.extremeRange
;
1052 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1053 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1055 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1056 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1058 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1060 context
.boundedValues
= boundedValues
;
1063 // Record the range of each y-axis at the start of the drag.
1064 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1065 context
.is2DPan
= false;
1066 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1067 var axis
= g
.axes_
[i
];
1068 var yRange
= g
.yAxisRange(i
);
1069 // TODO(konigsberg): These values should be in |context|.
1070 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1071 if (axis
.logscale
) {
1072 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1073 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1075 axis
.initialTopValue
= yRange
[1];
1076 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1078 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1080 // While calculating axes, set 2dpan.
1081 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1085 // Called in response to an interaction model operation that
1086 // responds to an event that pans the view.
1088 // It's used in the default callback for "mousemove" operations.
1089 // Custom interaction model builders can use it to provide the default
1090 // panning behavior.
1092 Dygraph
.movePan
= function(event
, g
, context
) {
1093 context
.dragEndX
= g
.dragGetX_(event
, context
);
1094 context
.dragEndY
= g
.dragGetY_(event
, context
);
1096 var minDate
= context
.initialLeftmostDate
-
1097 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1098 if (context
.boundedDates
) {
1099 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1101 var maxDate
= minDate
+ context
.dateRange
;
1102 if (context
.boundedDates
) {
1103 if (maxDate
> context
.boundedDates
[1]) {
1104 // Adjust minDate, and recompute maxDate.
1105 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1106 maxDate
= minDate
+ context
.dateRange
;
1110 g
.dateWindow_
= [minDate
, maxDate
];
1112 // y-axis scaling is automatic unless this is a full 2D pan.
1113 if (context
.is2DPan
) {
1114 // Adjust each axis appropriately.
1115 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1116 var axis
= g
.axes_
[i
];
1118 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1119 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1121 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1123 // In log scale, maxValue and minValue are the logs of those values.
1124 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1126 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1128 var minValue
= maxValue
- axis
.dragValueRange
;
1130 if (minValue
< boundedValue
[0]) {
1131 // Adjust maxValue, and recompute minValue.
1132 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1133 minValue
= maxValue
- axis
.dragValueRange
;
1136 if (axis
.logscale
) {
1137 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1138 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1140 axis
.valueWindow
= [ minValue
, maxValue
];
1148 // Called in response to an interaction model operation that
1149 // responds to an event that ends panning.
1151 // It's used in the default callback for "mouseup" operations.
1152 // Custom interaction model builders can use it to provide the default
1153 // panning behavior.
1155 Dygraph
.endPan
= function(event
, g
, context
) {
1156 // TODO(konigsberg): Clear the context data from the axis.
1157 // TODO(konigsberg): mouseup should just delete the
1158 // context object, and mousedown should create a new one.
1159 context
.isPanning
= false;
1160 context
.is2DPan
= false;
1161 context
.initialLeftmostDate
= null;
1162 context
.dateRange
= null;
1163 context
.valueRange
= null;
1164 context
.boundedDates
= null;
1165 context
.boundedValues
= null;
1168 // Called in response to an interaction model operation that
1169 // responds to an event that starts zooming.
1171 // It's used in the default callback for "mousedown" operations.
1172 // Custom interaction model builders can use it to provide the default
1173 // zooming behavior.
1175 Dygraph
.startZoom
= function(event
, g
, context
) {
1176 context
.isZooming
= true;
1179 // Called in response to an interaction model operation that
1180 // responds to an event that defines zoom boundaries.
1182 // It's used in the default callback for "mousemove" operations.
1183 // Custom interaction model builders can use it to provide the default
1184 // zooming behavior.
1186 Dygraph
.moveZoom
= function(event
, g
, context
) {
1187 context
.dragEndX
= g
.dragGetX_(event
, context
);
1188 context
.dragEndY
= g
.dragGetY_(event
, context
);
1190 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1191 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1193 // drag direction threshold for y axis is twice as large as x axis
1194 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1197 context
.dragDirection
,
1202 context
.prevDragDirection
,
1206 context
.prevEndX
= context
.dragEndX
;
1207 context
.prevEndY
= context
.dragEndY
;
1208 context
.prevDragDirection
= context
.dragDirection
;
1211 // Called in response to an interaction model operation that
1212 // responds to an event that performs a zoom based on previously defined
1215 // It's used in the default callback for "mouseup" operations.
1216 // Custom interaction model builders can use it to provide the default
1217 // zooming behavior.
1219 Dygraph
.endZoom
= function(event
, g
, context
) {
1220 context
.isZooming
= false;
1221 context
.dragEndX
= g
.dragGetX_(event
, context
);
1222 context
.dragEndY
= g
.dragGetY_(event
, context
);
1223 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1224 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1226 if (regionWidth
< 2 && regionHeight
< 2 &&
1227 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1228 // TODO(danvk): pass along more info about the points, e.g. 'x'
1229 if (g
.attr_('clickCallback') != null) {
1230 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1232 if (g
.attr_('pointClickCallback')) {
1233 // check if the click was on a particular point.
1234 var closestIdx
= -1;
1235 var closestDistance
= 0;
1236 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1237 var p
= g
.selPoints_
[i
];
1238 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1239 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1240 if (closestIdx
== -1 || distance
< closestDistance
) {
1241 closestDistance
= distance
;
1246 // Allow any click within two pixels of the dot.
1247 var radius
= g
.attr_('highlightCircleSize') + 2;
1248 if (closestDistance
<= 5 * 5) {
1249 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1254 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1255 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1256 Math
.max(context
.dragStartX
, context
.dragEndX
));
1257 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1258 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1259 Math
.max(context
.dragStartY
, context
.dragEndY
));
1261 g
.canvas_
.getContext("2d").clearRect(0, 0,
1265 context
.dragStartX
= null;
1266 context
.dragStartY
= null;
1269 Dygraph
.defaultInteractionModel
= {
1270 // Track the beginning of drag events
1271 mousedown
: function(event
, g
, context
) {
1272 context
.initializeMouseDown(event
, g
, context
);
1274 if (event
.altKey
|| event
.shiftKey
) {
1275 Dygraph
.startPan(event
, g
, context
);
1277 Dygraph
.startZoom(event
, g
, context
);
1281 // Draw zoom rectangles when the mouse is down and the user moves around
1282 mousemove
: function(event
, g
, context
) {
1283 if (context
.isZooming
) {
1284 Dygraph
.moveZoom(event
, g
, context
);
1285 } else if (context
.isPanning
) {
1286 Dygraph
.movePan(event
, g
, context
);
1290 mouseup
: function(event
, g
, context
) {
1291 if (context
.isZooming
) {
1292 Dygraph
.endZoom(event
, g
, context
);
1293 } else if (context
.isPanning
) {
1294 Dygraph
.endPan(event
, g
, context
);
1298 // Temporarily cancel the dragging event when the mouse leaves the graph
1299 mouseout
: function(event
, g
, context
) {
1300 if (context
.isZooming
) {
1301 context
.dragEndX
= null;
1302 context
.dragEndY
= null;
1306 // Disable zooming out if panning.
1307 dblclick
: function(event
, g
, context
) {
1308 if (event
.altKey
|| event
.shiftKey
) {
1311 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1312 // friendlier to public use.
1317 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1320 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1324 Dygraph
.prototype.createDragInterface_
= function() {
1326 // Tracks whether the mouse is down right now
1328 isPanning
: false, // is this drag part of a pan?
1329 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1334 dragDirection
: null,
1337 prevDragDirection
: null,
1339 // The value on the left side of the graph when a pan operation starts.
1340 initialLeftmostDate
: null,
1342 // The number of units each pixel spans. (This won't be valid for log
1344 xUnitsPerPixel
: null,
1346 // TODO(danvk): update this comment
1347 // The range in second/value units that the viewport encompasses during a
1348 // panning operation.
1351 // Utility function to convert page-wide coordinates to canvas coords
1355 // Values for use with panEdgeFraction, which limit how far outside the
1356 // graph's data boundaries it can be panned.
1357 boundedDates
: null, // [minDate, maxDate]
1358 boundedValues
: null, // [[minValue, maxValue] ...]
1360 initializeMouseDown
: function(event
, g
, context
) {
1361 // prevents mouse drags from selecting page text.
1362 if (event
.preventDefault
) {
1363 event
.preventDefault(); // Firefox, Chrome, etc.
1365 event
.returnValue
= false; // IE
1366 event
.cancelBubble
= true;
1369 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1370 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1371 context
.dragStartX
= g
.dragGetX_(event
, context
);
1372 context
.dragStartY
= g
.dragGetY_(event
, context
);
1376 var interactionModel
= this.attr_("interactionModel");
1378 // Self is the graph.
1381 // Function that binds the graph and context to the handler.
1382 var bindHandler
= function(handler
) {
1383 return function(event
) {
1384 handler(event
, self
, context
);
1388 for (var eventName
in interactionModel
) {
1389 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1390 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1391 bindHandler(interactionModel
[eventName
]));
1394 // If the user releases the mouse button during a drag, but not over the
1395 // canvas, then it doesn't count as a zooming action.
1396 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1397 if (context
.isZooming
|| context
.isPanning
) {
1398 context
.isZooming
= false;
1399 context
.dragStartX
= null;
1400 context
.dragStartY
= null;
1403 if (context
.isPanning
) {
1404 context
.isPanning
= false;
1405 context
.draggingDate
= null;
1406 context
.dateRange
= null;
1407 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1408 delete self
.axes_
[i
].draggingValue
;
1409 delete self
.axes_
[i
].dragValueRange
;
1417 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1418 * up any previous zoom rectangles that were drawn. This could be optimized to
1419 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1422 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1423 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1424 * @param {Number} startX The X position where the drag started, in canvas
1426 * @param {Number} endX The current X position of the drag, in canvas coords.
1427 * @param {Number} startY The Y position where the drag started, in canvas
1429 * @param {Number} endY The current Y position of the drag, in canvas coords.
1430 * @param {Number} prevDirection the value of direction on the previous call to
1431 * this function. Used to avoid excess redrawing
1432 * @param {Number} prevEndX The value of endX on the previous call to this
1433 * function. Used to avoid excess redrawing
1434 * @param {Number} prevEndY The value of endY on the previous call to this
1435 * function. Used to avoid excess redrawing
1438 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1439 endY
, prevDirection
, prevEndX
,
1441 var ctx
= this.canvas_
.getContext("2d");
1443 // Clean up from the previous rect if necessary
1444 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1445 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1446 Math
.abs(startX
- prevEndX
), this.height_
);
1447 } else if (prevDirection
== Dygraph
.VERTICAL
){
1448 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1449 this.width_
, Math
.abs(startY
- prevEndY
));
1452 // Draw a light-grey rectangle to show the new viewing area
1453 if (direction
== Dygraph
.HORIZONTAL
) {
1454 if (endX
&& startX
) {
1455 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1456 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1457 Math
.abs(endX
- startX
), this.height_
);
1460 if (direction
== Dygraph
.VERTICAL
) {
1461 if (endY
&& startY
) {
1462 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1463 ctx
.fillRect(0, Math
.min(startY
, endY
),
1464 this.width_
, Math
.abs(endY
- startY
));
1470 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1471 * the canvas. The exact zoom window may be slightly larger if there are no data
1472 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1473 * which accepts dates that match the raw data. This function redraws the graph.
1475 * @param {Number} lowX The leftmost pixel value that should be visible.
1476 * @param {Number} highX The rightmost pixel value that should be visible.
1479 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1480 // Find the earliest and latest dates contained in this canvasx range.
1481 // Convert the call to date ranges of the raw data.
1482 var minDate
= this.toDataXCoord(lowX
);
1483 var maxDate
= this.toDataXCoord(highX
);
1484 this.doZoomXDates_(minDate
, maxDate
);
1488 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1489 * method with doZoomX which accepts pixel coordinates. This function redraws
1492 * @param {Number} minDate The minimum date that should be visible.
1493 * @param {Number} maxDate The maximum date that should be visible.
1496 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1497 this.dateWindow_
= [minDate
, maxDate
];
1499 if (this.attr_("zoomCallback")) {
1500 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1505 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1506 * the canvas. This function redraws the graph.
1508 * @param {Number} lowY The topmost pixel value that should be visible.
1509 * @param {Number} highY The lowest pixel value that should be visible.
1512 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1513 // Find the highest and lowest values in pixel range for each axis.
1514 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1515 // This is because pixels increase as you go down on the screen, whereas data
1516 // coordinates increase as you go up the screen.
1517 var valueRanges
= [];
1518 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1519 var hi
= this.toDataYCoord(lowY
, i
);
1520 var low
= this.toDataYCoord(highY
, i
);
1521 this.axes_
[i
].valueWindow
= [low
, hi
];
1522 valueRanges
.push([low
, hi
]);
1526 if (this.attr_("zoomCallback")) {
1527 var xRange
= this.xAxisRange();
1528 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1533 * Reset the zoom to the original view coordinates. This is the same as
1534 * double-clicking on the graph.
1538 Dygraph
.prototype.doUnzoom_
= function() {
1540 if (this.dateWindow_
!= null) {
1542 this.dateWindow_
= null;
1545 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1546 if (this.axes_
[i
].valueWindow
!= null) {
1548 delete this.axes_
[i
].valueWindow
;
1553 // Putting the drawing operation before the callback because it resets
1556 if (this.attr_("zoomCallback")) {
1557 var minDate
= this.rawData_
[0][0];
1558 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1559 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1565 * When the mouse moves in the canvas, display information about a nearby data
1566 * point and draw dots over those points in the data series. This function
1567 * takes care of cleanup of previously-drawn dots.
1568 * @param {Object} event The mousemove event from the browser.
1571 Dygraph
.prototype.mouseMove_
= function(event
) {
1572 // This prevents JS errors when mousing over the canvas before data loads.
1573 var points
= this.layout_
.points
;
1574 if (points
=== undefined
) return;
1576 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1581 // Loop through all the points and find the date nearest to our current
1583 var minDist
= 1e+100;
1585 for (var i
= 0; i
< points
.length
; i
++) {
1586 var point
= points
[i
];
1587 if (point
== null) continue;
1588 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1589 if (dist
> minDist
) continue;
1593 if (idx
>= 0) lastx
= points
[idx
].xval
;
1595 // Extract the points we've selected
1596 this.selPoints_
= [];
1597 var l
= points
.length
;
1598 if (!this.attr_("stackedGraph")) {
1599 for (var i
= 0; i
< l
; i
++) {
1600 if (points
[i
].xval
== lastx
) {
1601 this.selPoints_
.push(points
[i
]);
1605 // Need to 'unstack' points starting from the bottom
1606 var cumulative_sum
= 0;
1607 for (var i
= l
- 1; i
>= 0; i
--) {
1608 if (points
[i
].xval
== lastx
) {
1609 var p
= {}; // Clone the point since we modify it
1610 for (var k
in points
[i
]) {
1611 p
[k
] = points
[i
][k
];
1613 p
.yval
-= cumulative_sum
;
1614 cumulative_sum
+= p
.yval
;
1615 this.selPoints_
.push(p
);
1618 this.selPoints_
.reverse();
1621 if (this.attr_("highlightCallback")) {
1622 var px
= this.lastx_
;
1623 if (px
!== null && lastx
!= px
) {
1624 // only fire if the selected point has changed.
1625 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1629 // Save last x position for callbacks.
1630 this.lastx_
= lastx
;
1632 this.updateSelection_();
1636 * Transforms layout_.points index into data row number.
1637 * @param int layout_.points index
1638 * @return int row number, or -1 if none could be found.
1641 Dygraph
.prototype.idxToRow_
= function(idx
) {
1642 if (idx
< 0) return -1;
1644 for (var i
in this.layout_
.datasets
) {
1645 if (idx
< this.layout_
.datasets
[i
].length
) {
1646 return this.boundaryIds_
[0][0]+idx
;
1648 idx
-= this.layout_
.datasets
[i
].length
;
1653 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1654 Dygraph
.isOK
= function(x
) {
1655 return x
&& !isNaN(x
);
1658 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1659 // If no points are selected, we display a default legend. Traditionally,
1660 // this has been blank. But a better default would be a conventional legend,
1661 // which provides essential information for a non-interactive chart.
1662 if (typeof(x
) === 'undefined') {
1663 if (this.attr_('legend') != 'always') return '';
1665 var sepLines
= this.attr_('labelsSeparateLines');
1666 var labels
= this.attr_('labels');
1668 for (var i
= 1; i
< labels
.length
; i
++) {
1669 var c
= new RGBColor(this.plotter_
.colors
[labels
[i
]]);
1670 if (i
> 1) html
+= (sepLines
? '<br/>' : ' ');
1671 html
+= "<b><font color='" + c
.toHex() + "'>—" + labels
[i
] +
1677 var displayDigits
= this.numXDigits_
+ this.numExtraDigits_
;
1678 var html
= this.attr_('xValueFormatter')(x
, displayDigits
) + ":";
1680 var fmtFunc
= this.attr_('yValueFormatter');
1681 var showZeros
= this.attr_("labelsShowZeroValues");
1682 var sepLines
= this.attr_("labelsSeparateLines");
1683 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1684 var pt
= this.selPoints_
[i
];
1685 if (pt
.yval
== 0 && !showZeros
) continue;
1686 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1687 if (sepLines
) html
+= "<br/>";
1689 var c
= new RGBColor(this.plotter_
.colors
[pt
.name
]);
1690 var yval
= fmtFunc(pt
.yval
, displayDigits
);
1691 // TODO(danvk): use a template string here and make it an attribute.
1692 html
+= " <b><font color='" + c
.toHex() + "'>"
1693 + pt
.name
+ "</font></b>:"
1700 * Draw dots over the selectied points in the data series. This function
1701 * takes care of cleanup of previously-drawn dots.
1704 Dygraph
.prototype.updateSelection_
= function() {
1705 // Clear the previously drawn vertical, if there is one
1706 var ctx
= this.canvas_
.getContext("2d");
1707 if (this.previousVerticalX_
>= 0) {
1708 // Determine the maximum highlight circle size.
1709 var maxCircleSize
= 0;
1710 var labels
= this.attr_('labels');
1711 for (var i
= 1; i
< labels
.length
; i
++) {
1712 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1713 if (r
> maxCircleSize
) maxCircleSize
= r
;
1715 var px
= this.previousVerticalX_
;
1716 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1717 2 * maxCircleSize
+ 2, this.height_
);
1720 if (this.selPoints_
.length
> 0) {
1721 // Set the status message to indicate the selected point(s)
1722 if (this.attr_('showLabelsOnHighlight')) {
1723 var html
= this.generateLegendHTML_(this.lastx_
, this.selPoints_
);
1724 this.attr_("labelsDiv").innerHTML
= html
;
1727 // Draw colored circles over the center of each selected point
1728 var canvasx
= this.selPoints_
[0].canvasx
;
1730 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1731 var pt
= this.selPoints_
[i
];
1732 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1734 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1736 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1737 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1742 this.previousVerticalX_
= canvasx
;
1747 * Set manually set selected dots, and display information about them
1748 * @param int row number that should by highlighted
1749 * false value clears the selection
1752 Dygraph
.prototype.setSelection
= function(row
) {
1753 // Extract the points we've selected
1754 this.selPoints_
= [];
1757 if (row
!== false) {
1758 row
= row
-this.boundaryIds_
[0][0];
1761 if (row
!== false && row
>= 0) {
1762 for (var i
in this.layout_
.datasets
) {
1763 if (row
< this.layout_
.datasets
[i
].length
) {
1764 var point
= this.layout_
.points
[pos
+row
];
1766 if (this.attr_("stackedGraph")) {
1767 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1770 this.selPoints_
.push(point
);
1772 pos
+= this.layout_
.datasets
[i
].length
;
1776 if (this.selPoints_
.length
) {
1777 this.lastx_
= this.selPoints_
[0].xval
;
1778 this.updateSelection_();
1781 this.clearSelection();
1787 * The mouse has left the canvas. Clear out whatever artifacts remain
1788 * @param {Object} event the mouseout event from the browser.
1791 Dygraph
.prototype.mouseOut_
= function(event
) {
1792 if (this.attr_("unhighlightCallback")) {
1793 this.attr_("unhighlightCallback")(event
);
1796 if (this.attr_("hideOverlayOnMouseOut")) {
1797 this.clearSelection();
1802 * Remove all selection from the canvas
1805 Dygraph
.prototype.clearSelection
= function() {
1806 // Get rid of the overlay data
1807 var ctx
= this.canvas_
.getContext("2d");
1808 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1809 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
1810 this.selPoints_
= [];
1815 * Returns the number of the currently selected row
1816 * @return int row number, of -1 if nothing is selected
1819 Dygraph
.prototype.getSelection
= function() {
1820 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1824 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1825 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1826 return row
+ this.boundaryIds_
[0][0];
1832 Dygraph
.zeropad
= function(x
) {
1833 if (x
< 10) return "0" + x
; else return "" + x
;
1837 * Return a string version of the hours, minutes and seconds portion of a date.
1838 * @param {Number} date The JavaScript date (ms since epoch)
1839 * @return {String} A time of the form "HH:MM:SS"
1842 Dygraph
.hmsString_
= function(date
) {
1843 var zeropad
= Dygraph
.zeropad
;
1844 var d
= new Date(date
);
1845 if (d
.getSeconds()) {
1846 return zeropad(d
.getHours()) + ":" +
1847 zeropad(d
.getMinutes()) + ":" +
1848 zeropad(d
.getSeconds());
1850 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1855 * Convert a JS date to a string appropriate to display on an axis that
1856 * is displaying values at the stated granularity.
1857 * @param {Date} date The date to format
1858 * @param {Number} granularity One of the Dygraph granularity constants
1859 * @return {String} The formatted date
1862 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1863 if (granularity
>= Dygraph
.DECADAL
) {
1864 return date
.strftime('%Y');
1865 } else if (granularity
>= Dygraph
.MONTHLY
) {
1866 return date
.strftime('%b %y');
1868 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1869 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1870 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1872 return Dygraph
.hmsString_(date
.getTime());
1878 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1879 * @param {Number} date The JavaScript date (ms since epoch)
1880 * @return {String} A date of the form "YYYY/MM/DD"
1883 Dygraph
.dateString_
= function(date
) {
1884 var zeropad
= Dygraph
.zeropad
;
1885 var d
= new Date(date
);
1888 var year
= "" + d
.getFullYear();
1889 // Get a 0 padded month string
1890 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1891 // Get a 0 padded day string
1892 var day
= zeropad(d
.getDate());
1895 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1896 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1898 return year
+ "/" + month + "/" + day
+ ret
;
1902 * Fires when there's data available to be graphed.
1903 * @param {String} data Raw CSV data to be plotted
1906 Dygraph
.prototype.loadedEvent_
= function(data
) {
1907 this.rawData_
= this.parseCSV_(data
);
1911 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1912 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1913 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1916 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1919 Dygraph
.prototype.addXTicks_
= function() {
1920 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1922 if (this.dateWindow_
) {
1923 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1925 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1928 var formatter
= this.attr_('xTicker');
1929 var ret
= formatter(range
[0], range
[1], this);
1932 // Note: numericTicks() returns a {ticks: [...], numDigits: yy} dictionary,
1933 // whereas dateTicker and user-defined tickers typically just return a ticks
1935 if (ret
.ticks
!== undefined
) {
1937 this.numXDigits_
= ret
.numDigits
;
1942 this.layout_
.updateOptions({xTicks
: xTicks
});
1945 // Time granularity enumeration
1946 Dygraph
.SECONDLY
= 0;
1947 Dygraph
.TWO_SECONDLY
= 1;
1948 Dygraph
.FIVE_SECONDLY
= 2;
1949 Dygraph
.TEN_SECONDLY
= 3;
1950 Dygraph
.THIRTY_SECONDLY
= 4;
1951 Dygraph
.MINUTELY
= 5;
1952 Dygraph
.TWO_MINUTELY
= 6;
1953 Dygraph
.FIVE_MINUTELY
= 7;
1954 Dygraph
.TEN_MINUTELY
= 8;
1955 Dygraph
.THIRTY_MINUTELY
= 9;
1956 Dygraph
.HOURLY
= 10;
1957 Dygraph
.TWO_HOURLY
= 11;
1958 Dygraph
.SIX_HOURLY
= 12;
1960 Dygraph
.WEEKLY
= 14;
1961 Dygraph
.MONTHLY
= 15;
1962 Dygraph
.QUARTERLY
= 16;
1963 Dygraph
.BIANNUAL
= 17;
1964 Dygraph
.ANNUAL
= 18;
1965 Dygraph
.DECADAL
= 19;
1966 Dygraph
.CENTENNIAL
= 20;
1967 Dygraph
.NUM_GRANULARITIES
= 21;
1969 Dygraph
.SHORT_SPACINGS
= [];
1970 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1971 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1972 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1973 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1974 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1975 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1976 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1977 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1978 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1979 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1980 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1981 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1982 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1983 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1984 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1988 // If we used this time granularity, how many ticks would there be?
1989 // This is only an approximation, but it's generally good enough.
1991 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1992 if (granularity
< Dygraph
.MONTHLY
) {
1993 // Generate one tick mark for every fixed interval of time.
1994 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1995 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1997 var year_mod
= 1; // e.g. to only print one point every 10 years.
1998 var num_months
= 12;
1999 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2000 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2001 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2002 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2003 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2005 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2006 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2007 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2013 // Construct an x-axis of nicely-formatted times on meaningful boundaries
2014 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2016 // Returns an array containing {v: millis, label: label} dictionaries.
2018 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2019 var formatter
= this.attr_("xAxisLabelFormatter");
2021 if (granularity
< Dygraph
.MONTHLY
) {
2022 // Generate one tick mark for every fixed interval of time.
2023 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2024 var format
= '%d%b'; // e.g. "1Jan"
2026 // Find a time less than start_time which occurs on a "nice" time boundary
2027 // for this granularity.
2028 var g
= spacing
/ 1000;
2029 var d
= new Date(start_time
);
2030 if (g
<= 60) { // seconds
2031 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2035 if (g
<= 60) { // minutes
2036 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2041 if (g
<= 24) { // days
2042 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2047 if (g
== 7) { // one week
2048 d
.setDate(d
.getDate() - d
.getDay());
2053 start_time
= d
.getTime();
2055 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2056 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2059 // Display a tick mark on the first of a set of months of each year.
2060 // Years get a tick mark iff y % year_mod == 0. This is useful for
2061 // displaying a tick mark once every 10 years, say, on long time scales.
2063 var year_mod
= 1; // e.g. to only print one point every 10 years.
2065 if (granularity
== Dygraph
.MONTHLY
) {
2066 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2067 } else if (granularity
== Dygraph
.QUARTERLY
) {
2068 months
= [ 0, 3, 6, 9 ];
2069 } else if (granularity
== Dygraph
.BIANNUAL
) {
2071 } else if (granularity
== Dygraph
.ANNUAL
) {
2073 } else if (granularity
== Dygraph
.DECADAL
) {
2076 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2080 this.warn("Span of dates is too long");
2083 var start_year
= new Date(start_time
).getFullYear();
2084 var end_year
= new Date(end_time
).getFullYear();
2085 var zeropad
= Dygraph
.zeropad
;
2086 for (var i
= start_year
; i
<= end_year
; i
++) {
2087 if (i
% year_mod
!= 0) continue;
2088 for (var j
= 0; j
< months
.length
; j
++) {
2089 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2090 var t
= Date
.parse(date_str
);
2091 if (t
< start_time
|| t
> end_time
) continue;
2092 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2102 * Add ticks to the x-axis based on a date range.
2103 * @param {Number} startDate Start of the date window (millis since epoch)
2104 * @param {Number} endDate End of the date window (millis since epoch)
2105 * @return {Array.<Object>} Array of {label, value} tuples.
2108 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2110 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2111 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2112 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2119 return self
.GetXAxis(startDate
, endDate
, chosen
);
2121 // TODO(danvk): signal error.
2125 // This is a list of human-friendly values at which to show tick marks on a log
2126 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2127 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2128 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2129 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2131 for (var power
= -39; power
<= 39; power
++) {
2132 var range
= Math
.pow(10, power
);
2133 for (var mult
= 1; mult
<= 9; mult
++) {
2134 var val
= range
* mult
;
2141 // val is the value to search for
2142 // arry is the value over which to search
2143 // if abs > 0, find the lowest entry greater than val
2144 // if abs < 0, find the highest entry less than val
2145 // if abs == 0, find the entry that equals val.
2146 // Currently does not work when val is outside the range of arry's values.
2147 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2148 if (low
== null || high
== null) {
2150 high
= arry
.length
- 1;
2158 var validIndex
= function(idx
) {
2159 return idx
>= 0 && idx
< arry
.length
;
2161 var mid
= parseInt((low
+ high
) / 2);
2162 var element
= arry
[mid
];
2163 if (element
== val
) {
2166 if (element
> val
) {
2168 // Accept if element > val, but also if prior element < val.
2170 if (validIndex(idx
) && arry
[idx
] < val
) {
2174 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2176 if (element
< val
) {
2178 // Accept if element < val, but also if prior element > val.
2180 if (validIndex(idx
) && arry
[idx
] > val
) {
2184 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2189 * Determine the number of significant figures in a Number up to the specified
2190 * precision. Note that there is no way to determine if a trailing '0' is
2191 * significant or not, so by convention we return 1 for all of the following
2192 * inputs: 1, 1.0, 1.00, 1.000 etc.
2193 * @param {Number} x The input value.
2194 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
2195 * Default and maximum allowed value is 13.
2196 * @return {Number} The number of significant figures which is >= 1.
2198 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
2199 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
2201 // Convert the number to its exponential notation form and work backwards,
2202 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
2203 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
2204 // the JavaScript interpreter handle the low level bits of the Number for us.
2205 var s
= x
.toExponential(precision
);
2206 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
2208 for (var i
= ePos
- 1; i
>= 0; i
--) {
2210 // Got to the decimal place. We'll call this 1 digit of precision because
2211 // we can't know for sure how many trailing 0s are significant.
2213 } else if (s
[i
] != '0') {
2214 // Found the first non-zero digit. Return the number of characters
2215 // except for the '.'.
2216 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
2220 // Occurs if toExponential() doesn't return a string containing 'e', which
2221 // should never happen.
2226 * Add ticks when the x axis has numbers on it (instead of dates)
2227 * TODO(konigsberg): Update comment.
2229 * @param {Number} minV minimum value
2230 * @param {Number} maxV maximum value
2232 * @param {function} attribute accessor function.
2233 * @return {Array.<Object>} Array of {label, value} tuples.
2236 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2237 var attr
= function(k
) {
2238 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2239 return self
.attr_(k
);
2244 for (var i
= 0; i
< vals
.length
; i
++) {
2245 ticks
.push({v
: vals
[i
]});
2248 if (axis_props
&& attr("logscale")) {
2249 var pixelsPerTick
= attr('pixelsPerYLabel');
2250 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2251 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2252 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2253 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2258 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2260 // Count the number of tick values would appear, if we can get at least
2261 // nTicks / 4 accept them
.
2262 var lastDisplayed
= null;
2263 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2264 var axisId
= axis_props
.yAxisId
;
2265 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2266 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2267 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2268 var tick
= { v
: tickValue
};
2269 if (lastDisplayed
== null) {
2271 tickValue
: tickValue
,
2275 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2277 tickValue
: tickValue
,
2286 // Since we went in backwards order.
2291 // ticks.length won't be 0 if the log scale function finds values to insert.
2292 if (ticks
.length
== 0) {
2294 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2295 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2296 // The first spacing greater than pixelsPerYLabel is what we use.
2297 // TODO(danvk): version that works on a log scale.
2298 if (attr("labelsKMG2")) {
2299 var mults
= [1, 2, 4, 8];
2301 var mults
= [1, 2, 5];
2303 var scale
, low_val
, high_val
, nTicks
;
2304 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2305 var pixelsPerTick
= attr('pixelsPerYLabel');
2306 for (var i
= -10; i
< 50; i
++) {
2307 if (attr("labelsKMG2")) {
2308 var base_scale
= Math
.pow(16, i
);
2310 var base_scale
= Math
.pow(10, i
);
2312 for (var j
= 0; j
< mults
.length
; j
++) {
2313 scale
= base_scale
* mults
[j
];
2314 low_val
= Math
.floor(minV
/ scale
) * scale
;
2315 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2316 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2317 var spacing
= self
.height_
/ nTicks
;
2318 // wish I could break out of both loops at once...
2319 if (spacing
> pixelsPerTick
) break;
2321 if (spacing
> pixelsPerTick
) break;
2324 // Construct the set of ticks.
2325 // Allow reverse y-axis if it's explicitly requested.
2326 if (low_val
> high_val
) scale
*= -1;
2327 for (var i
= 0; i
< nTicks
; i
++) {
2328 var tickV
= low_val
+ i
* scale
;
2329 ticks
.push( {v
: tickV
} );
2334 // Add formatted labels to the ticks.
2337 if (attr("labelsKMB")) {
2339 k_labels
= [ "K", "M", "B", "T" ];
2341 if (attr("labelsKMG2")) {
2342 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2344 k_labels
= [ "k", "M", "G", "T" ];
2346 var formatter
= attr('yAxisLabelFormatter') ?
2347 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2349 // Determine the number of decimal places needed for the labels below by
2350 // taking the maximum number of significant figures for any label. We must
2351 // take the max because we can't tell if trailing 0s are significant.
2353 for (var i
= 0; i
< ticks
.length
; i
++) {
2354 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
2357 // Add labels to the ticks.
2358 for (var i
= 0; i
< ticks
.length
; i
++) {
2359 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2360 var tickV
= ticks
[i
].v
;
2361 var absTickV
= Math
.abs(tickV
);
2362 var label
= (formatter
!== undefined
) ?
2363 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
2364 if (k_labels
.length
> 0) {
2365 // Round up to an appropriate unit.
2367 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2368 if (absTickV
>= n
) {
2369 label
= formatter(tickV
/ n
, numDigits
) + k_labels
[j
];
2374 ticks
[i
].label
= label
;
2377 return {ticks
: ticks
, numDigits
: numDigits
};
2380 // Computes the range of the data series (including confidence intervals).
2381 // series is either [ [x1, y1], [x2, y2], ... ] or
2382 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2383 // Returns [low, high]
2384 Dygraph
.prototype.extremeValues_
= function(series
) {
2385 var minY
= null, maxY
= null;
2387 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2389 // With custom bars, maxY is the max of the high values.
2390 for (var j
= 0; j
< series
.length
; j
++) {
2391 var y
= series
[j
][1][0];
2393 var low
= y
- series
[j
][1][1];
2394 var high
= y
+ series
[j
][1][2];
2395 if (low
> y
) low
= y
; // this can happen with custom bars,
2396 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2397 if (maxY
== null || high
> maxY
) {
2400 if (minY
== null || low
< minY
) {
2405 for (var j
= 0; j
< series
.length
; j
++) {
2406 var y
= series
[j
][1];
2407 if (y
=== null || isNaN(y
)) continue;
2408 if (maxY
== null || y
> maxY
) {
2411 if (minY
== null || y
< minY
) {
2417 return [minY
, maxY
];
2421 * This function is called once when the chart's data is changed or the options
2422 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2423 * idea is that values derived from the chart's data can be computed here,
2424 * rather than every time the chart is drawn. This includes things like the
2425 * number of axes, rolling averages, etc.
2427 Dygraph
.prototype.predraw_
= function() {
2428 // TODO(danvk): move more computations out of drawGraph_ and into here.
2429 this.computeYAxes_();
2431 // Create a new plotter.
2432 if (this.plotter_
) this.plotter_
.clear();
2433 this.plotter_
= new DygraphCanvasRenderer(this,
2434 this.hidden_
, this.layout_
,
2435 this.renderOptions_
);
2437 // The roller sits in the bottom left corner of the chart. We don't know where
2438 // this will be until the options are available, so it's positioned here.
2439 this.createRollInterface_();
2441 // Same thing applies for the labelsDiv. It's right edge should be flush with
2442 // the right edge of the charting area (which may not be the same as the right
2443 // edge of the div, if we have two y-axes.
2444 this.positionLabelsDiv_();
2446 // If the data or options have changed, then we'd better redraw.
2451 * Update the graph with new data. This method is called when the viewing area
2452 * has changed. If the underlying data or options have changed, predraw_ will
2453 * be called before drawGraph_ is called.
2456 Dygraph
.prototype.drawGraph_
= function() {
2457 var data
= this.rawData_
;
2459 // This is used to set the second parameter to drawCallback, below.
2460 var is_initial_draw
= this.is_initial_draw_
;
2461 this.is_initial_draw_
= false;
2463 var minY
= null, maxY
= null;
2464 this.layout_
.removeAllDatasets();
2466 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2468 // Loop over the fields (series). Go from the last to the first,
2469 // because if they're stacked that's how we accumulate the values.
2471 var cumulative_y
= []; // For stacked series.
2474 var extremes
= {}; // series name -> [low, high]
2476 // Loop over all fields and create datasets
2477 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2478 if (!this.visibility()[i
- 1]) continue;
2480 var seriesName
= this.attr_("labels")[i
];
2481 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2482 var logScale
= this.attr_('logscale', i
);
2485 for (var j
= 0; j
< data
.length
; j
++) {
2486 var date
= data
[j
][0];
2487 var point
= data
[j
][i
];
2489 // On the log scale, points less than zero do not exist.
2490 // This will create a gap in the chart. Note that this ignores
2491 // connectSeparatedPoints.
2495 series
.push([date
, point
]);
2497 if (point
!= null || !connectSeparatedPoints
) {
2498 series
.push([date
, point
]);
2503 // TODO(danvk): move this into predraw_. It's insane to do it here.
2504 series
= this.rollingAverage(series
, this.rollPeriod_
);
2506 // Prune down to the desired range, if necessary (for zooming)
2507 // Because there can be lines going to points outside of the visible area,
2508 // we actually prune to visible points, plus one on either side.
2509 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2510 if (this.dateWindow_
) {
2511 var low
= this.dateWindow_
[0];
2512 var high
= this.dateWindow_
[1];
2514 // TODO(danvk): do binary search instead of linear search.
2515 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2516 var firstIdx
= null, lastIdx
= null;
2517 for (var k
= 0; k
< series
.length
; k
++) {
2518 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2521 if (series
[k
][0] <= high
) {
2525 if (firstIdx
=== null) firstIdx
= 0;
2526 if (firstIdx
> 0) firstIdx
--;
2527 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2528 if (lastIdx
< series
.length
- 1) lastIdx
++;
2529 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2530 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2531 pruned
.push(series
[k
]);
2535 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2538 var seriesExtremes
= this.extremeValues_(series
);
2541 for (var j
=0; j
<series
.length
; j
++) {
2542 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2545 } else if (this.attr_("stackedGraph")) {
2546 var l
= series
.length
;
2548 for (var j
= 0; j
< l
; j
++) {
2549 // If one data set has a NaN, let all subsequent stacked
2550 // sets inherit the NaN -- only start at 0 for the first set.
2551 var x
= series
[j
][0];
2552 if (cumulative_y
[x
] === undefined
) {
2553 cumulative_y
[x
] = 0;
2556 actual_y
= series
[j
][1];
2557 cumulative_y
[x
] += actual_y
;
2559 series
[j
] = [x
, cumulative_y
[x
]]
2561 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2562 seriesExtremes
[1] = cumulative_y
[x
];
2564 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2565 seriesExtremes
[0] = cumulative_y
[x
];
2569 extremes
[seriesName
] = seriesExtremes
;
2571 datasets
[i
] = series
;
2574 for (var i
= 1; i
< datasets
.length
; i
++) {
2575 if (!this.visibility()[i
- 1]) continue;
2576 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2579 this.computeYAxisRanges_(extremes
);
2580 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2581 seriesToAxisMap
: this.seriesToAxisMap_
2586 // Tell PlotKit to use this new data and render itself
2587 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2588 this.layout_
.evaluateWithError();
2589 this.plotter_
.clear();
2590 this.plotter_
.render();
2591 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2592 this.canvas_
.height
);
2594 if (is_initial_draw
) {
2595 // Generate a static legend before any particular point is selected.
2596 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
2599 if (this.attr_("drawCallback") !== null) {
2600 this.attr_("drawCallback")(this, is_initial_draw
);
2605 * Determine properties of the y-axes which are independent of the data
2606 * currently being displayed. This includes things like the number of axes and
2607 * the style of the axes. It does not include the range of each axis and its
2609 * This fills in this.axes_ and this.seriesToAxisMap_.
2610 * axes_ = [ { options } ]
2611 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2612 * indices are into the axes_ array.
2614 Dygraph
.prototype.computeYAxes_
= function() {
2615 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2616 this.seriesToAxisMap_
= {};
2618 // Get a list of series names.
2619 var labels
= this.attr_("labels");
2621 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2623 // all options which could be applied per-axis:
2631 'axisLabelFontSize',
2636 // Copy global axis options over to the first axis.
2637 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2638 var k
= axisOptions
[i
];
2639 var v
= this.attr_(k
);
2640 if (v
) this.axes_
[0][k
] = v
;
2643 // Go through once and add all the axes.
2644 for (var seriesName
in series
) {
2645 if (!series
.hasOwnProperty(seriesName
)) continue;
2646 var axis
= this.attr_("axis", seriesName
);
2648 this.seriesToAxisMap_
[seriesName
] = 0;
2651 if (typeof(axis
) == 'object') {
2652 // Add a new axis, making a copy of its per-axis options.
2654 Dygraph
.update(opts
, this.axes_
[0]);
2655 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2656 var yAxisId
= this.axes_
.length
;
2657 opts
.yAxisId
= yAxisId
;
2659 Dygraph
.update(opts
, axis
);
2660 this.axes_
.push(opts
);
2661 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2665 // Go through one more time and assign series to an axis defined by another
2666 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2667 for (var seriesName
in series
) {
2668 if (!series
.hasOwnProperty(seriesName
)) continue;
2669 var axis
= this.attr_("axis", seriesName
);
2670 if (typeof(axis
) == 'string') {
2671 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2672 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2673 "series " + axis
+ ", which does not define its own axis.");
2676 var idx
= this.seriesToAxisMap_
[axis
];
2677 this.seriesToAxisMap_
[seriesName
] = idx
;
2681 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2682 // this last so that hiding the first series doesn't destroy the axis
2683 // properties of the primary axis.
2684 var seriesToAxisFiltered
= {};
2685 var vis
= this.visibility();
2686 for (var i
= 1; i
< labels
.length
; i
++) {
2688 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2690 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2694 * Returns the number of y-axes on the chart.
2695 * @return {Number} the number of axes.
2697 Dygraph
.prototype.numAxes
= function() {
2699 for (var series
in this.seriesToAxisMap_
) {
2700 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2701 var idx
= this.seriesToAxisMap_
[series
];
2702 if (idx
> last_axis
) last_axis
= idx
;
2704 return 1 + last_axis
;
2708 * Determine the value range and tick marks for each axis.
2709 * @param {Object} extremes A mapping from seriesName -> [low, high]
2710 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2712 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2713 // Build a map from axis number -> [list of series names]
2714 var seriesForAxis
= [];
2715 for (var series
in this.seriesToAxisMap_
) {
2716 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2717 var idx
= this.seriesToAxisMap_
[series
];
2718 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2719 seriesForAxis
[idx
].push(series
);
2722 // If no series are defined or visible then fill in some reasonable defaults.
2723 if (seriesForAxis
.length
== 0) {
2724 var axis
= this.axes_
[0];
2725 axis
.computedValueRange
= [0, 1];
2727 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2728 axis
.computedValueRange
[1],
2731 axis
.ticks
= ret
.ticks
;
2732 this.numYDigits_
= ret
.numDigits
;
2736 // Compute extreme values, a span and tick marks for each axis.
2737 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2738 var axis
= this.axes_
[i
];
2741 // Calculate the extremes of extremes.
2742 var series
= seriesForAxis
[i
];
2743 var minY
= Infinity
; // extremes[series[0]][0];
2744 var maxY
= -Infinity
; // extremes[series[0]][1];
2745 for (var j
= 0; j
< series
.length
; j
++) {
2746 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2747 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2749 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2751 // Add some padding and round up to an integer to be human-friendly.
2752 var span
= maxY
- minY
;
2753 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2754 if (span
== 0) { span
= maxY
; }
2758 if (axis
.logscale
) {
2759 var maxAxisY
= maxY
+ 0.1 * span
;
2760 var minAxisY
= minY
;
2762 var maxAxisY
= maxY
+ 0.1 * span
;
2763 var minAxisY
= minY
- 0.1 * span
;
2765 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2766 if (!this.attr_("avoidMinZero")) {
2767 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2768 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2771 if (this.attr_("includeZero")) {
2772 if (maxY
< 0) maxAxisY
= 0;
2773 if (minY
> 0) minAxisY
= 0;
2776 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2778 if (axis
.valueWindow
) {
2779 // This is only set if the user has zoomed on the y-axis. It is never set
2780 // by a user. It takes precedence over axis.valueRange because, if you set
2781 // valueRange, you'd still expect to be able to pan.
2782 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2783 } else if (axis
.valueRange
) {
2784 // This is a user-set value range for this axis.
2785 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2787 axis
.computedValueRange
= axis
.extremeRange
;
2790 // Add ticks. By default, all axes inherit the tick positions of the
2791 // primary axis. However, if an axis is specifically marked as having
2792 // independent ticks, then that is permissible as well.
2793 if (i
== 0 || axis
.independentTicks
) {
2795 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2796 axis
.computedValueRange
[1],
2799 axis
.ticks
= ret
.ticks
;
2800 this.numYDigits_
= ret
.numDigits
;
2802 var p_axis
= this.axes_
[0];
2803 var p_ticks
= p_axis
.ticks
;
2804 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2805 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2806 var tick_values
= [];
2807 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2808 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2809 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2810 tick_values
.push(y_val
);
2814 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2815 axis
.computedValueRange
[1],
2816 this, axis
, tick_values
);
2817 axis
.ticks
= ret
.ticks
;
2818 this.numYDigits_
= ret
.numDigits
;
2824 * Calculates the rolling average of a data set.
2825 * If originalData is [label, val], rolls the average of those.
2826 * If originalData is [label, [, it's interpreted as [value, stddev]
2827 * and the roll is returned in the same form, with appropriately reduced
2828 * stddev for each value.
2829 * Note that this is where fractional input (i.e. '5/10') is converted into
2831 * @param {Array} originalData The data in the appropriate format (see above)
2832 * @param {Number} rollPeriod The number of points over which to average the
2835 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2836 if (originalData
.length
< 2)
2837 return originalData
;
2838 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2839 var rollingData
= [];
2840 var sigma
= this.attr_("sigma");
2842 if (this.fractions_
) {
2844 var den
= 0; // numerator/denominator
2846 for (var i
= 0; i
< originalData
.length
; i
++) {
2847 num
+= originalData
[i
][1][0];
2848 den
+= originalData
[i
][1][1];
2849 if (i
- rollPeriod
>= 0) {
2850 num
-= originalData
[i
- rollPeriod
][1][0];
2851 den
-= originalData
[i
- rollPeriod
][1][1];
2854 var date
= originalData
[i
][0];
2855 var value
= den
? num
/ den
: 0.0;
2856 if (this.attr_("errorBars")) {
2857 if (this.wilsonInterval_
) {
2858 // For more details on this confidence interval, see:
2859 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2861 var p
= value
< 0 ? 0 : value
, n
= den
;
2862 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2863 var denom
= 1 + sigma
* sigma
/ den
;
2864 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2865 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2866 rollingData
[i
] = [date
,
2867 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2869 rollingData
[i
] = [date
, [0, 0, 0]];
2872 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2873 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2876 rollingData
[i
] = [date
, mult
* value
];
2879 } else if (this.attr_("customBars")) {
2884 for (var i
= 0; i
< originalData
.length
; i
++) {
2885 var data
= originalData
[i
][1];
2887 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2889 if (y
!= null && !isNaN(y
)) {
2895 if (i
- rollPeriod
>= 0) {
2896 var prev
= originalData
[i
- rollPeriod
];
2897 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2904 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2905 1.0 * (mid
- low
) / count
,
2906 1.0 * (high
- mid
) / count
]];
2909 // Calculate the rolling average for the first rollPeriod - 1 points where
2910 // there is not enough data to roll over the full number of points
2911 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2912 if (!this.attr_("errorBars")){
2913 if (rollPeriod
== 1) {
2914 return originalData
;
2917 for (var i
= 0; i
< originalData
.length
; i
++) {
2920 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2921 var y
= originalData
[j
][1];
2922 if (y
== null || isNaN(y
)) continue;
2924 sum
+= originalData
[j
][1];
2927 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2929 rollingData
[i
] = [originalData
[i
][0], null];
2934 for (var i
= 0; i
< originalData
.length
; i
++) {
2938 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2939 var y
= originalData
[j
][1][0];
2940 if (y
== null || isNaN(y
)) continue;
2942 sum
+= originalData
[j
][1][0];
2943 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2946 var stddev
= Math
.sqrt(variance
) / num_ok
;
2947 rollingData
[i
] = [originalData
[i
][0],
2948 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2950 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2960 * Parses a date, returning the number of milliseconds since epoch. This can be
2961 * passed in as an xValueParser in the Dygraph constructor.
2962 * TODO(danvk): enumerate formats that this understands.
2963 * @param {String} A date in YYYYMMDD format.
2964 * @return {Number} Milliseconds since epoch.
2967 Dygraph
.dateParser
= function(dateStr
, self
) {
2970 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2971 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2972 while (dateStrSlashed
.search("-") != -1) {
2973 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2975 d
= Date
.parse(dateStrSlashed
);
2976 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2977 // TODO(danvk): remove support for this format. It's confusing.
2978 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2979 + "/" + dateStr
.substr(6,2);
2980 d
= Date
.parse(dateStrSlashed
);
2982 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2983 // "2009/07/12 12:34:56"
2984 d
= Date
.parse(dateStr
);
2987 if (!d
|| isNaN(d
)) {
2988 self
.error("Couldn't parse " + dateStr
+ " as a date");
2994 * Detects the type of the str (date or numeric) and sets the various
2995 * formatting attributes in this.attrs_ based on this type.
2996 * @param {String} str An x value.
2999 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
3001 if (str
.indexOf('-') > 0 ||
3002 str
.indexOf('/') >= 0 ||
3003 isNaN(parseFloat(str
))) {
3005 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3006 // TODO(danvk): remove support for this format.
3011 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3012 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3013 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3014 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3016 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3017 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3018 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3019 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3024 * Parses the value as a floating point number. This is like the parseFloat()
3025 * built-in, but with a few differences:
3026 * - the empty string is parsed as null, rather than NaN.
3027 * - if the string cannot be parsed at all, an error is logged.
3028 * If the string can't be parsed, this method returns null.
3029 * @param {String} x The string to be parsed
3030 * @param {Number} opt_line_no The line number from which the string comes.
3031 * @param {String} opt_line The text of the line from which the string comes.
3035 // Parse the x as a float or return null if it's not a number.
3036 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3037 var val
= parseFloat(x
);
3038 if (!isNaN(val
)) return val
;
3040 // Try to figure out what happeend.
3041 // If the value is the empty string, parse it as null.
3042 if (/^ *$/.test(x
)) return null;
3044 // If it was actually "NaN", return it as NaN.
3045 if (/^ *nan *$/i.test(x
)) return NaN
;
3047 // Looks like a parsing error.
3048 var msg
= "Unable to parse '" + x
+ "' as a number";
3049 if (opt_line
!== null && opt_line_no
!== null) {
3050 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3058 * Parses a string in a special csv format. We expect a csv file where each
3059 * line is a date point, and the first field in each line is the date string.
3060 * We also expect that all remaining fields represent series.
3061 * if the errorBars attribute is set, then interpret the fields as:
3062 * date, series1, stddev1, series2, stddev2, ...
3063 * @param {Array.<Object>} data See above.
3066 * @return Array.<Object> An array with one entry for each row. These entries
3067 * are an array of cells in that row. The first entry is the parsed x-value for
3068 * the row. The second, third, etc. are the y-values. These can take on one of
3069 * three forms, depending on the CSV and constructor parameters:
3071 * 2. [ value, stddev ]
3072 * 3. [ low value, center value, high value ]
3074 Dygraph
.prototype.parseCSV_
= function(data
) {
3076 var lines
= data
.split("\n");
3078 // Use the default delimiter or fall back to a tab if that makes sense.
3079 var delim
= this.attr_('delimiter');
3080 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3085 if (this.labelsFromCSV_
) {
3087 this.attrs_
.labels
= lines
[0].split(delim
);
3092 var defaultParserSet
= false; // attempt to auto-detect x value type
3093 var expectedCols
= this.attr_("labels").length
;
3094 var outOfOrder
= false;
3095 for (var i
= start
; i
< lines
.length
; i
++) {
3096 var line
= lines
[i
];
3098 if (line
.length
== 0) continue; // skip blank lines
3099 if (line
[0] == '#') continue; // skip comment lines
3100 var inFields
= line
.split(delim
);
3101 if (inFields
.length
< 2) continue;
3104 if (!defaultParserSet
) {
3105 this.detectTypeFromString_(inFields
[0]);
3106 xParser
= this.attr_("xValueParser");
3107 defaultParserSet
= true;
3109 fields
[0] = xParser(inFields
[0], this);
3111 // If fractions are expected, parse the numbers as "A/B
"
3112 if (this.fractions_) {
3113 for (var j = 1; j < inFields.length; j++) {
3114 // TODO(danvk): figure out an appropriate way to flag parse errors.
3115 var vals = inFields[j].split("/");
3116 if (vals.length != 2) {
3117 this.error('Expected fractional "num
/den
" values in CSV data ' +
3118 "but found a value
'" + inFields[j] + "' on line
" +
3119 (1 + i) + " ('" + line + "') which is not of
this form
.");
3122 fields[j] = [this.parseFloat_(vals[0], i, line),
3123 this.parseFloat_(vals[1], i, line)];
3126 } else if (this.attr_("errorBars
")) {
3127 // If there are error bars, values are (value, stddev) pairs
3128 if (inFields.length % 2 != 1) {
3129 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3130 'but line ' + (1 + i) + ' has an odd number of values (' +
3131 (inFields.length - 1) + "): '" + line + "'");
3133 for (var j = 1; j < inFields.length; j += 2) {
3134 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3135 this.parseFloat_(inFields[j + 1], i, line)];
3137 } else if (this.attr_("customBars
")) {
3138 // Bars are a low;center;high tuple
3139 for (var j = 1; j < inFields.length; j++) {
3140 var vals = inFields[j].split(";");
3141 fields[j] = [ this.parseFloat_(vals[0], i, line),
3142 this.parseFloat_(vals[1], i, line),
3143 this.parseFloat_(vals[2], i, line) ];
3146 // Values are just numbers
3147 for (var j = 1; j < inFields.length; j++) {
3148 fields[j] = this.parseFloat_(inFields[j], i, line);
3151 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3155 if (fields.length != expectedCols) {
3156 this.error("Number of columns
in line
" + i + " (" + fields.length +
3157 ") does not agree
with number of
labels (" + expectedCols +
3161 // If the user specified the 'labels' option and none of the cells of the
3162 // first row parsed correctly, then they probably double-specified the
3163 // labels. We go with the values set in the option, discard this row and
3164 // log a warning to the JS console.
3165 if (i == 0 && this.attr_('labels')) {
3166 var all_null = true;
3167 for (var j = 0; all_null && j < fields.length; j++) {
3168 if (fields[j]) all_null = false;
3171 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3172 "CSV
data ('" + line + "') appears to also contain labels
. " +
3173 "Will drop the CSV labels and
use the option labels
.");
3181 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3182 ret.sort(function(a,b) { return a[0] - b[0] });
3189 * The user has provided their data as a pre-packaged JS array. If the x values
3190 * are numeric, this is the same as dygraphs' internal format. If the x values
3191 * are dates, we need to convert them from Date objects to ms since epoch.
3192 * @param {Array.<Object>} data
3193 * @return {Array.<Object>} data with numeric x values.
3195 Dygraph.prototype.parseArray_ = function(data) {
3196 // Peek at the first x value to see if it's numeric.
3197 if (data.length == 0) {
3198 this.error("Can
't plot empty data set");
3201 if (data[0].length == 0) {
3202 this.error("Data set cannot contain an empty row");
3206 if (this.attr_("labels") == null) {
3207 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3208 "in the options parameter");
3209 this.attrs_.labels = [ "X" ];
3210 for (var i = 1; i < data[0].length; i++) {
3211 this.attrs_.labels.push("Y" + i);
3215 if (Dygraph.isDateLike(data[0][0])) {
3216 // Some intelligent defaults for a date x-axis.
3217 this.attrs_.xValueFormatter = Dygraph.dateString_;
3218 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3219 this.attrs_.xTicker = Dygraph.dateTicker;
3221 // Assume they're all dates
.
3222 var parsedData
= Dygraph
.clone(data
);
3223 for (var i
= 0; i
< data
.length
; i
++) {
3224 if (parsedData
[i
].length
== 0) {
3225 this.error("Row " + (1 + i
) + " of data is empty");
3228 if (parsedData
[i
][0] == null
3229 || typeof(parsedData
[i
][0].getTime
) != 'function'
3230 || isNaN(parsedData
[i
][0].getTime())) {
3231 this.error("x value in row " + (1 + i
) + " is not a Date");
3234 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3238 // Some intelligent defaults for a numeric x-axis.
3239 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3240 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3246 * Parses a DataTable object from gviz.
3247 * The data is expected to have a first column that is either a date or a
3248 * number. All subsequent columns must be numbers. If there is a clear mismatch
3249 * between this.xValueParser_ and the type of the first column, it will be
3250 * fixed. Fills out rawData_.
3251 * @param {Array.<Object>} data See above.
3254 Dygraph
.prototype.parseDataTable_
= function(data
) {
3255 var cols
= data
.getNumberOfColumns();
3256 var rows
= data
.getNumberOfRows();
3258 var indepType
= data
.getColumnType(0);
3259 if (indepType
== 'date' || indepType
== 'datetime') {
3260 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3261 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3262 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3263 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3264 } else if (indepType
== 'number') {
3265 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3266 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3267 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3268 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3270 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3271 "column 1 of DataTable input (Got '" + indepType
+ "')");
3275 // Array of the column indices which contain data (and not annotations).
3277 var annotationCols
= {}; // data index -> [annotation cols]
3278 var hasAnnotations
= false;
3279 for (var i
= 1; i
< cols
; i
++) {
3280 var type
= data
.getColumnType(i
);
3281 if (type
== 'number') {
3283 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3284 // This is OK -- it's an annotation column.
3285 var dataIdx
= colIdx
[colIdx
.length
- 1];
3286 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3287 annotationCols
[dataIdx
] = [i
];
3289 annotationCols
[dataIdx
].push(i
);
3291 hasAnnotations
= true;
3293 this.error("Only 'number' is supported as a dependent type with Gviz." +
3294 " 'string' is only supported if displayAnnotations is true");
3298 // Read column labels
3299 // TODO(danvk): add support back for errorBars
3300 var labels
= [data
.getColumnLabel(0)];
3301 for (var i
= 0; i
< colIdx
.length
; i
++) {
3302 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3303 if (this.attr_("errorBars")) i
+= 1;
3305 this.attrs_
.labels
= labels
;
3306 cols
= labels
.length
;
3309 var outOfOrder
= false;
3310 var annotations
= [];
3311 for (var i
= 0; i
< rows
; i
++) {
3313 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3314 data
.getValue(i
, 0) === null) {
3315 this.warn("Ignoring row " + i
+
3316 " of DataTable because of undefined or null first column.");
3320 if (indepType
== 'date' || indepType
== 'datetime') {
3321 row
.push(data
.getValue(i
, 0).getTime());
3323 row
.push(data
.getValue(i
, 0));
3325 if (!this.attr_("errorBars")) {
3326 for (var j
= 0; j
< colIdx
.length
; j
++) {
3327 var col
= colIdx
[j
];
3328 row
.push(data
.getValue(i
, col
));
3329 if (hasAnnotations
&&
3330 annotationCols
.hasOwnProperty(col
) &&
3331 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3333 ann
.series
= data
.getColumnLabel(col
);
3335 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3337 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3338 if (k
) ann
.text
+= "\n";
3339 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3341 annotations
.push(ann
);
3345 // Strip out infinities, which give dygraphs problems later on.
3346 for (var j
= 0; j
< row
.length
; j
++) {
3347 if (!isFinite(row
[j
])) row
[j
] = null;
3350 for (var j
= 0; j
< cols
- 1; j
++) {
3351 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3354 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3361 this.warn("DataTable is out of order; order it correctly to speed loading.");
3362 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3364 this.rawData_
= ret
;
3366 if (annotations
.length
> 0) {
3367 this.setAnnotations(annotations
, true);
3371 // These functions are all based on MochiKit.
3372 Dygraph
.update
= function (self
, o
) {
3373 if (typeof(o
) != 'undefined' && o
!== null) {
3375 if (o
.hasOwnProperty(k
)) {
3383 Dygraph
.isArrayLike
= function (o
) {
3384 var typ
= typeof(o
);
3386 (typ
!= 'object' && !(typ
== 'function' &&
3387 typeof(o
.item
) == 'function')) ||
3389 typeof(o
.length
) != 'number' ||
3397 Dygraph
.isDateLike
= function (o
) {
3398 if (typeof(o
) != "object" || o
=== null ||
3399 typeof(o
.getTime
) != 'function') {
3405 Dygraph
.clone
= function(o
) {
3406 // TODO(danvk): figure out how MochiKit's version works
3408 for (var i
= 0; i
< o
.length
; i
++) {
3409 if (Dygraph
.isArrayLike(o
[i
])) {
3410 r
.push(Dygraph
.clone(o
[i
]));
3420 * Get the CSV data. If it's in a function, call that function. If it's in a
3421 * file, do an XMLHttpRequest to get it.
3424 Dygraph
.prototype.start_
= function() {
3425 if (typeof this.file_
== 'function') {
3426 // CSV string. Pretend we got it via XHR.
3427 this.loadedEvent_(this.file_());
3428 } else if (Dygraph
.isArrayLike(this.file_
)) {
3429 this.rawData_
= this.parseArray_(this.file_
);
3431 } else if (typeof this.file_
== 'object' &&
3432 typeof this.file_
.getColumnRange
== 'function') {
3433 // must be a DataTable from gviz.
3434 this.parseDataTable_(this.file_
);
3436 } else if (typeof this.file_
== 'string') {
3437 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3438 if (this.file_
.indexOf('\n') >= 0) {
3439 this.loadedEvent_(this.file_
);
3441 var req
= new XMLHttpRequest();
3443 req
.onreadystatechange
= function () {
3444 if (req
.readyState
== 4) {
3445 if (req
.status
== 200) {
3446 caller
.loadedEvent_(req
.responseText
);
3451 req
.open("GET", this.file_
, true);
3455 this.error("Unknown data format: " + (typeof this.file_
));
3460 * Changes various properties of the graph. These can include:
3462 * <li>file: changes the source data for the graph</li>
3463 * <li>errorBars: changes whether the data contains stddev</li>
3465 * @param {Object} attrs The new properties and values
3467 Dygraph
.prototype.updateOptions
= function(attrs
) {
3468 // TODO(danvk): this is a mess. Rethink this function.
3469 if ('rollPeriod' in attrs
) {
3470 this.rollPeriod_
= attrs
.rollPeriod
;
3472 if ('dateWindow' in attrs
) {
3473 this.dateWindow_
= attrs
.dateWindow
;
3476 // TODO(danvk): validate per-series options.
3481 // highlightCircleSize
3483 Dygraph
.update(this.user_attrs_
, attrs
);
3484 Dygraph
.update(this.renderOptions_
, attrs
);
3486 this.labelsFromCSV_
= (this.attr_("labels") == null);
3488 // TODO(danvk): this doesn't match the constructor logic
3489 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3490 if (attrs
['file']) {
3491 this.file_
= attrs
['file'];
3499 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3500 * containing div (which has presumably changed size since the dygraph was
3501 * instantiated. If the width/height are specified, the div will be resized.
3503 * This is far more efficient than destroying and re-instantiating a
3504 * Dygraph, since it doesn't have to reparse the underlying data.
3506 * @param {Number} width Width (in pixels)
3507 * @param {Number} height Height (in pixels)
3509 Dygraph
.prototype.resize
= function(width
, height
) {
3510 if (this.resize_lock
) {
3513 this.resize_lock
= true;
3515 if ((width
=== null) != (height
=== null)) {
3516 this.warn("Dygraph.resize() should be called with zero parameters or " +
3517 "two non-NULL parameters. Pretending it was zero.");
3518 width
= height
= null;
3521 // TODO(danvk): there should be a clear() method.
3522 this.maindiv_
.innerHTML
= "";
3523 this.attrs_
.labelsDiv
= null;
3526 this.maindiv_
.style
.width
= width
+ "px";
3527 this.maindiv_
.style
.height
= height
+ "px";
3528 this.width_
= width
;
3529 this.height_
= height
;
3531 this.width_
= this.maindiv_
.offsetWidth
;
3532 this.height_
= this.maindiv_
.offsetHeight
;
3535 this.createInterface_();
3538 this.resize_lock
= false;
3542 * Adjusts the number of points in the rolling average. Updates the graph to
3543 * reflect the new averaging period.
3544 * @param {Number} length Number of points over which to average the data.
3546 Dygraph
.prototype.adjustRoll
= function(length
) {
3547 this.rollPeriod_
= length
;
3552 * Returns a boolean array of visibility statuses.
3554 Dygraph
.prototype.visibility
= function() {
3555 // Do lazy-initialization, so that this happens after we know the number of
3557 if (!this.attr_("visibility")) {
3558 this.attrs_
["visibility"] = [];
3560 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3561 this.attr_("visibility").push(true);
3563 return this.attr_("visibility");
3567 * Changes the visiblity of a series.
3569 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3570 var x
= this.visibility();
3571 if (num
< 0 || num
>= x
.length
) {
3572 this.warn("invalid series number in setVisibility: " + num
);
3580 * Update the list of annotations and redraw the chart.
3582 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3583 // Only add the annotation CSS rule once we know it will be used.
3584 Dygraph
.addAnnotationRule();
3585 this.annotations_
= ann
;
3586 this.layout_
.setAnnotations(this.annotations_
);
3587 if (!suppressDraw
) {
3593 * Return the list of annotations.
3595 Dygraph
.prototype.annotations
= function() {
3596 return this.annotations_
;
3600 * Get the index of a series (column) given its name. The first column is the
3601 * x-axis, so the data series start with index 1.
3603 Dygraph
.prototype.indexFromSetName
= function(name
) {
3604 var labels
= this.attr_("labels");
3605 for (var i
= 0; i
< labels
.length
; i
++) {
3606 if (labels
[i
] == name
) return i
;
3611 Dygraph
.addAnnotationRule
= function() {
3612 if (Dygraph
.addedAnnotationCSS
) return;
3614 var rule
= "border: 1px solid black; " +
3615 "background-color: white; " +
3616 "text-align: center;";
3618 var styleSheetElement
= document
.createElement("style");
3619 styleSheetElement
.type
= "text/css";
3620 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3622 // Find the first style sheet that we can access.
3623 // We may not add a rule to a style sheet from another domain for security
3624 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3625 // adds its own style sheets from google.com.
3626 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3627 if (document
.styleSheets
[i
].disabled
) continue;
3628 var mysheet
= document
.styleSheets
[i
];
3630 if (mysheet
.insertRule
) { // Firefox
3631 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3632 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3633 } else if (mysheet
.addRule
) { // IE
3634 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3636 Dygraph
.addedAnnotationCSS
= true;
3639 // Was likely a security exception.
3643 this.warn("Unable to add default annotation CSS rule; display may be off.");
3647 * Create a new canvas element. This is more complex than a simple
3648 * document.createElement("canvas") because of IE and excanvas.
3650 Dygraph
.createCanvas
= function() {
3651 var canvas
= document
.createElement("canvas");
3653 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3654 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3655 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3663 * A wrapper around Dygraph that implements the gviz API.
3664 * @param {Object} container The DOM object the visualization should live in.
3666 Dygraph
.GVizChart
= function(container
) {
3667 this.container
= container
;
3670 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3671 // Clear out any existing dygraph.
3672 // TODO(danvk): would it make more sense to simply redraw using the current
3673 // date_graph object?
3674 this.container
.innerHTML
= '';
3675 if (typeof(this.date_graph
) != 'undefined') {
3676 this.date_graph
.destroy();
3679 this.date_graph
= new Dygraph(this.container
, data
, options
);
3683 * Google charts compatible setSelection
3684 * Only row selection is supported, all points in the row will be highlighted
3685 * @param {Array} array of the selected cells
3688 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3690 if (selection_array
.length
) {
3691 row
= selection_array
[0].row
;
3693 this.date_graph
.setSelection(row
);
3697 * Google charts compatible getSelection implementation
3698 * @return {Array} array of the selected cells
3701 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3704 var row
= this.date_graph
.getSelection();
3706 if (row
< 0) return selection
;
3709 for (var i
in this.date_graph
.layout_
.datasets
) {
3710 selection
.push({row
: row
, column
: col
});
3717 // Older pages may still use this name.
3718 DateGraph
= Dygraph
;
3720 // <REMOVE_FOR_COMBINED>
3721 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
3724 "default": "parseFloat() or Date.parse()*",
3725 "labels": ["CSV parsing"],
3726 "type": "function(str) -> number",
3727 "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."
3731 "labels": ["Data Line display"],
3733 "description": "If set, stack series on top of one another rather than drawing them independently."
3737 "labels": ["Data Line display"],
3739 "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."
3741 "labelsDivStyles": {
3743 "labels": ["Legend"],
3745 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
3749 "labels": ["Data Line display"],
3751 "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."
3755 "labels": ["Overall display"],
3757 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3761 "labels": ["Callbacks"],
3762 "type": "function(minDate, maxDate, yRanges)",
3763 "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."
3765 "pointClickCallback": {
3767 "labels": ["Callbacks", "Interactive Elements"],
3772 "default": "(see description)",
3773 "labels": ["Data Series Colors"],
3774 "type": "array<string>",
3775 "example": "['red', '#00FF00']",
3776 "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."
3778 "connectSeparatedPoints": {
3780 "labels": ["Data Line display"],
3782 "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."
3784 "highlightCallback": {
3786 "labels": ["Callbacks"],
3787 "type": "function(event, x, points,row)",
3788 "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>"
3792 "labels": ["Axis display"],
3794 "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"
3798 "labels": ["Error Bars", "Rolling Averages"],
3799 "type": "integer >= 1",
3800 "description": "Number of days over which to average data. Discussed extensively above."
3802 "unhighlightCallback": {
3804 "labels": ["Callbacks"],
3805 "type": "function(event)",
3806 "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."
3810 "labels": ["Axis display"],
3812 "description": "The size of the line to display next to each tick mark on x- or y-axes."
3814 "labelsSeparateLines": {
3816 "labels": ["Legend"],
3818 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
3820 "xValueFormatter": {
3821 "default": "(Round to 2 decimal places)",
3822 "labels": ["Axis display"],
3823 "type": "function(x)",
3824 "description": "Function to provide a custom display format for the X value for mouseover."
3826 "pixelsPerYLabel": {
3828 "labels": ["Axis display", "Grid"],
3830 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3832 "annotationMouseOverHandler": {
3834 "labels": ["Annotations"],
3835 "type": "function(annotation, point, dygraph, event)",
3836 "description": "If provided, this function is called whenever the user mouses over an annotation."
3838 "annotationMouseOutHandler": {
3840 "labels": ["Annotations"],
3841 "type": "function(annotation, point, dygraph, event)",
3842 "description": "If provided, this function is called whenever the user mouses out of an annotation."
3844 "annotationClickHandler": {
3846 "labels": ["Annotations"],
3847 "type": "function(annotation, point, dygraph, event)",
3848 "description": "If provided, this function is called whenever the user clicks on an annotation."
3850 "annotationDblClickHandler": {
3852 "labels": ["Annotations"],
3853 "type": "function(annotation, point, dygraph, event)",
3854 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
3858 "labels": ["Callbacks"],
3859 "type": "function(dygraph, is_initial)",
3860 "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."
3864 "labels": ["Value display/formatting"],
3866 "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."
3870 "labels": ["CSV parsing"],
3872 "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."
3874 "axisLabelFontSize": {
3876 "labels": ["Axis display"],
3878 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
3880 "underlayCallback": {
3882 "labels": ["Callbacks"],
3883 "type": "function(canvas, area, dygraph)",
3884 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
3888 "labels": ["Overall display"],
3890 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3892 "interactionModel": {
3894 "labels": ["Interactive Elements"],
3896 "description": "TODO(konigsberg): document this"
3899 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
3900 "labels": ["Axis display"],
3901 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
3902 "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."
3904 "xAxisLabelWidth": {
3906 "labels": ["Axis display"],
3908 "description": "Width, in pixels, of the x-axis labels."
3910 "showLabelsOnHighlight": {
3912 "labels": ["Interactive Elements", "Legend"],
3914 "description": "Whether to show the legend upon mouseover."
3917 "default": "(none)",
3918 "labels": ["Axis display"],
3919 "type": "string or object",
3920 "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."
3922 "pixelsPerXLabel": {
3924 "labels": ["Axis display", "Grid"],
3926 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3930 "labels": ["Legend"],
3931 "type": "DOM element or string",
3932 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
3933 "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."
3937 "labels": ["CSV parsing", "Error Bars"],
3939 "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)."
3943 "labels": ["Axis display"],
3945 "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."
3949 "labels": ["Data Line display"],
3951 "example": "0.5, 2.0",
3952 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
3956 "labels": ["Error Bars"],
3958 "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."
3962 "labels": ["Data Line display"],
3964 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
3966 "highlightCircleSize": {
3968 "labels": ["Interactive Elements"],
3970 "description": "The size in pixels of the dot drawn over highlighted points."
3973 "default": "rgb(128,128,128)",
3975 "type": "red, blue",
3976 "description": "The color of the gridlines."
3979 "default": "[true, true, ...]",
3980 "labels": ["Data Line display"],
3981 "type": "Array of booleans",
3982 "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."
3985 "default": "Full range of the input is shown",
3986 "labels": ["Axis display"],
3987 "type": "Array of two numbers",
3988 "example": "[10, 110]",
3989 "description": "Explicitly set the vertical range of the graph to [low, high]."
3993 "labels": ["Legend"],
3995 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
3997 "colorSaturation": {
3999 "labels": ["Data Series Colors"],
4000 "type": "0.0 - 1.0",
4001 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4003 "yAxisLabelWidth": {
4005 "labels": ["Axis display"],
4007 "description": "Width, in pixels, of the y-axis labels."
4009 "hideOverlayOnMouseOut": {
4011 "labels": ["Interactive Elements", "Legend"],
4013 "description": "Whether to hide the legend when the mouse leaves the chart area."
4015 "yValueFormatter": {
4016 "default": "(Round to 2 decimal places)",
4017 "labels": ["Axis display"],
4018 "type": "function(x)",
4019 "description": "Function to provide a custom display format for the Y value for mouseover."
4022 "default": "onmouseover",
4023 "labels": ["Legend"],
4025 "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."
4027 "labelsShowZeroValues": {
4029 "labels": ["Legend"],
4031 "description": "Show zero value labels in the labelsDiv."
4035 "labels": ["Data Line display"],
4037 "description": "When set, display the graph as a step plot instead of a line plot."
4041 "labels": ["Value display/formatting"],
4043 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4047 "labels": ["Overall display"],
4049 "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."
4053 "labels": ["Axis display"],
4055 "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."
4057 "xAxisLabelFormatter": {
4058 "default": "Dygraph.dateAxisFormatter",
4059 "labels": ["Axis display", "Value display/formatting"],
4060 "type": "function(date, granularity)",
4061 "description": "Function to call to format values along the x axis."
4064 "snippet": "function(e, date){<br> alert(date);<br>}",
4066 "labels": ["Callbacks"],
4067 "type": "function(e, date)",
4068 "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."
4070 "yAxisLabelFormatter": {
4071 "default": "yValueFormatter",
4072 "labels": ["Axis display", "Value display/formatting"],
4073 "type": "function(x)",
4074 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4077 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4078 "labels": ["Legend"],
4079 "type": "array<string>",
4080 "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."
4083 "default": "Full range of the input is shown",
4084 "labels": ["Axis display"],
4085 "type": "Array of two Dates or numbers",
4086 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4087 "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."
4091 "labels": ["Interactive Elements", "Rolling Averages"],
4093 "description": "If the rolling average period text box should be shown."
4097 "labels": ["Error Bars"],
4099 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4103 "labels": ["CSV parsing", "Error Bars"],
4105 "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."
4109 "labels": ["Data Series Colors"],
4110 "type": "float (0.0 - 1.0)",
4111 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4115 "labels": ["CSV parsing", "Error Bars"],
4117 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4119 "displayAnnotations": {
4121 "labels": ["Annotations"],
4123 "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."
4125 "panEdgeFraction": {
4127 "labels": ["Axis Display", "Interactive Elements"],
4130 "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."
4134 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4135 // JSON. This assumption cannot be checked in JS, but it will be checked when
4136 // documentation is generated by the generate-documentation.py script.
4138 // Do a quick sanity check on the options reference.
4140 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4141 var flds
= ['type', 'default', 'description'];
4147 'Data Line display',
4148 'Data Series Colors',
4151 'Interactive Elements',
4155 'Value display/formatting'
4158 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4160 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4161 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4162 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4163 for (var i
= 0; i
< flds
.length
; i
++) {
4164 if (!op
.hasOwnProperty(flds
[i
])) {
4165 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4166 } else if (typeof(op
[flds
[i
]]) != 'string') {
4167 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4170 var labels
= op
['labels'];
4171 if (typeof(labels
) !== 'object') {
4172 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4173 for (var i
= 0; i
< labels
.length
; i
++) {
4174 if (!cats
.hasOwnProperty(labels
[i
])) {
4175 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4176 '", which is invalid.');
4182 // </REMOVE_FOR_COMBINED
>