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 area
= this.plotter_
.area
;
621 var xRange
= this.xAxisRange();
624 // xRange[1] - x is unit distance from the right.
625 // xRange[1] - xRange[0] is the scale of the range.
626 // (xRange[1] - x / (xRange
[1] - xRange
[0]) is the
% from the right
.
627 // 1 - (that) is the % distance from the left.
628 pct
= (xRange
[1] - x
) / (xRange
[1] - xRange
[0]);
629 // There's a way to optimize that, but I'm copying the y-coord function
635 * Returns the number of columns (including the independent variable).
637 Dygraph
.prototype.numColumns
= function() {
638 return this.rawData_
[0].length
;
642 * Returns the number of rows (excluding any header/label row).
644 Dygraph
.prototype.numRows
= function() {
645 return this.rawData_
.length
;
649 * Returns the value in the given row and column. If the row and column exceed
650 * the bounds on the data, returns null. Also returns null if the value is
653 Dygraph
.prototype.getValue
= function(row
, col
) {
654 if (row
< 0 || row
> this.rawData_
.length
) return null;
655 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
657 return this.rawData_
[row
][col
];
660 Dygraph
.addEvent
= function(el
, evt
, fn
) {
661 var normed_fn
= function(e
) {
662 if (!e
) var e
= window
.event
;
665 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
666 el
.addEventListener(evt
, normed_fn
, false);
668 el
.attachEvent('on' + evt
, normed_fn
);
673 // Based on the article at
674 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
675 Dygraph
.cancelEvent
= function(e
) {
676 e
= e
? e
: window
.event
;
677 if (e
.stopPropagation
) {
680 if (e
.preventDefault
) {
683 e
.cancelBubble
= true;
685 e
.returnValue
= false;
691 * Generates interface elements for the Dygraph: a containing div, a div to
692 * display the current point, and a textbox to adjust the rolling average
693 * period. Also creates the Renderer/Layout elements.
696 Dygraph
.prototype.createInterface_
= function() {
697 // Create the all-enclosing graph div
698 var enclosing
= this.maindiv_
;
700 this.graphDiv
= document
.createElement("div");
701 this.graphDiv
.style
.width
= this.width_
+ "px";
702 this.graphDiv
.style
.height
= this.height_
+ "px";
703 enclosing
.appendChild(this.graphDiv
);
705 // Create the canvas for interactive parts of the chart.
706 this.canvas_
= Dygraph
.createCanvas();
707 this.canvas_
.style
.position
= "absolute";
708 this.canvas_
.width
= this.width_
;
709 this.canvas_
.height
= this.height_
;
710 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
711 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
713 // ... and for static parts of the chart.
714 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
716 // The interactive parts of the graph are drawn on top of the chart.
717 this.graphDiv
.appendChild(this.hidden_
);
718 this.graphDiv
.appendChild(this.canvas_
);
719 this.mouseEventElement_
= this.canvas_
;
722 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
723 dygraph
.mouseMove_(e
);
725 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
726 dygraph
.mouseOut_(e
);
729 // Create the grapher
730 // TODO(danvk): why does the Layout need its own set of options?
731 this.layoutOptions_
= { 'xOriginIsZero': false };
732 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
733 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
734 Dygraph
.update(this.layoutOptions_
, {
735 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
737 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
739 // TODO(danvk): why does the Renderer need its own set of options?
740 this.renderOptions_
= { colorScheme
: this.colors_
,
742 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
743 Dygraph
.update(this.renderOptions_
, this.attrs_
);
744 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
746 this.createStatusMessage_();
747 this.createDragInterface_();
751 * Detach DOM elements in the dygraph and null out all data references.
752 * Calling this when you're done with a dygraph can dramatically reduce memory
753 * usage. See, e.g., the tests/perf.html example.
755 Dygraph
.prototype.destroy
= function() {
756 var removeRecursive
= function(node
) {
757 while (node
.hasChildNodes()) {
758 removeRecursive(node
.firstChild
);
759 node
.removeChild(node
.firstChild
);
762 removeRecursive(this.maindiv_
);
764 var nullOut
= function(obj
) {
766 if (typeof(obj
[n
]) === 'object') {
772 // These may not all be necessary, but it can't hurt...
773 nullOut(this.layout_
);
774 nullOut(this.plotter_
);
779 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
780 * this particular canvas. All Dygraph work is done on this.canvas_.
781 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
782 * @return {Object} The newly-created canvas
785 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
786 var h
= Dygraph
.createCanvas();
787 h
.style
.position
= "absolute";
788 // TODO(danvk): h should be offset from canvas. canvas needs to include
789 // some extra area to make it easier to zoom in on the far left and far
790 // right. h needs to be precisely the plot area, so that clipping occurs.
791 h
.style
.top
= canvas
.style
.top
;
792 h
.style
.left
= canvas
.style
.left
;
793 h
.width
= this.width_
;
794 h
.height
= this.height_
;
795 h
.style
.width
= this.width_
+ "px"; // for IE
796 h
.style
.height
= this.height_
+ "px"; // for IE
800 // Taken from MochiKit.Color
801 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
805 if (saturation
=== 0) {
810 var i
= Math
.floor(hue
* 6);
811 var f
= (hue
* 6) - i
;
812 var p
= value
* (1 - saturation
);
813 var q
= value
* (1 - (saturation
* f
));
814 var t
= value
* (1 - (saturation
* (1 - f
)));
816 case 1: red
= q
; green
= value
; blue
= p
; break;
817 case 2: red
= p
; green
= value
; blue
= t
; break;
818 case 3: red
= p
; green
= q
; blue
= value
; break;
819 case 4: red
= t
; green
= p
; blue
= value
; break;
820 case 5: red
= value
; green
= p
; blue
= q
; break;
821 case 6: // fall through
822 case 0: red
= value
; green
= t
; blue
= p
; break;
825 red
= Math
.floor(255 * red
+ 0.5);
826 green
= Math
.floor(255 * green
+ 0.5);
827 blue
= Math
.floor(255 * blue
+ 0.5);
828 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
833 * Generate a set of distinct colors for the data series. This is done with a
834 * color wheel. Saturation/Value are customizable, and the hue is
835 * equally-spaced around the color wheel. If a custom set of colors is
836 * specified, that is used instead.
839 Dygraph
.prototype.setColors_
= function() {
840 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
841 // away with this.renderOptions_.
842 var num
= this.attr_("labels").length
- 1;
844 var colors
= this.attr_('colors');
846 var sat
= this.attr_('colorSaturation') || 1.0;
847 var val
= this.attr_('colorValue') || 0.5;
848 var half
= Math
.ceil(num
/ 2);
849 for (var i
= 1; i
<= num
; i
++) {
850 if (!this.visibility()[i
-1]) continue;
851 // alternate colors for high contrast.
852 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
853 var hue
= (1.0 * idx
/ (1 + num
));
854 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
857 for (var i
= 0; i
< num
; i
++) {
858 if (!this.visibility()[i
]) continue;
859 var colorStr
= colors
[i
% colors
.length
];
860 this.colors_
.push(colorStr
);
864 // TODO(danvk): update this w/r
/t/ the
new options system
.
865 this.renderOptions_
.colorScheme
= this.colors_
;
866 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
867 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
868 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
872 * Return the list of colors. This is either the list of colors passed in the
873 * attributes, or the autogenerated list of rgb(r,g,b) strings.
874 * @return {Array<string>} The list of colors.
876 Dygraph
.prototype.getColors
= function() {
880 // The following functions are from quirksmode.org with a modification for Safari from
881 // http://blog.firetree.net/2005/07/04/javascript-find-position/
882 // http://www.quirksmode.org/js
/findpos
.html
883 Dygraph
.findPosX
= function(obj
) {
888 curleft
+= obj
.offsetLeft
;
889 if(!obj
.offsetParent
)
891 obj
= obj
.offsetParent
;
898 Dygraph
.findPosY
= function(obj
) {
903 curtop
+= obj
.offsetTop
;
904 if(!obj
.offsetParent
)
906 obj
= obj
.offsetParent
;
916 * Create the div that contains information on the selected point(s)
917 * This goes in the top right of the canvas, unless an external div has already
921 Dygraph
.prototype.createStatusMessage_
= function() {
922 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
923 if (userLabelsDiv
&& null != userLabelsDiv
924 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
925 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
927 if (!this.attr_("labelsDiv")) {
928 var divWidth
= this.attr_('labelsDivWidth');
930 "position": "absolute",
933 "width": divWidth
+ "px",
935 "left": (this.width_
- divWidth
- 2) + "px",
936 "background": "white",
938 "overflow": "hidden"};
939 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
940 var div
= document
.createElement("div");
941 for (var name
in messagestyle
) {
942 if (messagestyle
.hasOwnProperty(name
)) {
943 div
.style
[name
] = messagestyle
[name
];
946 this.graphDiv
.appendChild(div
);
947 this.attrs_
.labelsDiv
= div
;
952 * Position the labels div so that its right edge is flush with the right edge
953 * of the charting area.
955 Dygraph
.prototype.positionLabelsDiv_
= function() {
956 // Don't touch a user-specified labelsDiv.
957 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
959 var area
= this.plotter_
.area
;
960 var div
= this.attr_("labelsDiv");
961 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
965 * Create the text box to adjust the averaging period
968 Dygraph
.prototype.createRollInterface_
= function() {
969 // Create a roller if one doesn't exist already.
971 this.roller_
= document
.createElement("input");
972 this.roller_
.type
= "text";
973 this.roller_
.style
.display
= "none";
974 this.graphDiv
.appendChild(this.roller_
);
977 var display
= this.attr_('showRoller') ? 'block' : 'none';
979 var textAttr
= { "position": "absolute",
981 "top": (this.plotter_
.area
.h
- 25) + "px",
982 "left": (this.plotter_
.area
.x
+ 1) + "px",
985 this.roller_
.size
= "2";
986 this.roller_
.value
= this.rollPeriod_
;
987 for (var name
in textAttr
) {
988 if (textAttr
.hasOwnProperty(name
)) {
989 this.roller_
.style
[name
] = textAttr
[name
];
994 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
997 // These functions are taken from MochiKit.Signal
998 Dygraph
.pageX
= function(e
) {
1000 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
1003 var b
= document
.body
;
1005 (de
.scrollLeft
|| b
.scrollLeft
) -
1006 (de
.clientLeft
|| 0);
1010 Dygraph
.pageY
= function(e
) {
1012 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
1015 var b
= document
.body
;
1017 (de
.scrollTop
|| b
.scrollTop
) -
1018 (de
.clientTop
|| 0);
1022 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1023 return Dygraph
.pageX(e
) - context
.px
1026 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1027 return Dygraph
.pageY(e
) - context
.py
1030 // Called in response to an interaction model operation that
1031 // should start the default panning behavior.
1033 // It's used in the default callback for "mousedown" operations.
1034 // Custom interaction model builders can use it to provide the default
1035 // panning behavior.
1037 Dygraph
.startPan
= function(event
, g
, context
) {
1038 context
.isPanning
= true;
1039 var xRange
= g
.xAxisRange();
1040 context
.dateRange
= xRange
[1] - xRange
[0];
1041 context
.initialLeftmostDate
= xRange
[0];
1042 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
1044 // TODO(konigsberg): do that clever "undefined" thing.
1045 if (g
.attr_("panFrame")) {
1046 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panFrame");
1047 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
1049 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
1050 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1052 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1053 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1054 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1056 var boundedValues
= [];
1057 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panFrame");
1059 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1060 var axis
= g
.axes_
[i
];
1061 var yExtremes
= axis
.extremeRange
;
1063 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1064 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1066 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1067 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1069 console
.log(yExtremes
[0], yExtremes
[1], boundedTopValue
, boundedBottomValue
);
1070 // could reverse these, who knows?
1071 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1073 context
.boundedValues
= boundedValues
;
1076 // Record the range of each y-axis at the start of the drag.
1077 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1078 context
.is2DPan
= false;
1079 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1080 var axis
= g
.axes_
[i
];
1081 var yRange
= g
.yAxisRange(i
);
1082 // TODO(konigsberg): These values should be in |context|.
1083 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1084 if (axis
.logscale
) {
1085 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1086 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1088 axis
.initialTopValue
= yRange
[1];
1089 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1091 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1093 // While calculating axes, set 2dpan.
1094 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1098 // Called in response to an interaction model operation that
1099 // responds to an event that pans the view.
1101 // It's used in the default callback for "mousemove" operations.
1102 // Custom interaction model builders can use it to provide the default
1103 // panning behavior.
1105 Dygraph
.movePan
= function(event
, g
, context
) {
1106 context
.dragEndX
= g
.dragGetX_(event
, context
);
1107 context
.dragEndY
= g
.dragGetY_(event
, context
);
1109 var minDate
= context
.initialLeftmostDate
-
1110 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1111 if (context
.boundedDates
) {
1112 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1114 var maxDate
= minDate
+ context
.dateRange
;
1115 if (context
.boundedDates
) {
1116 if (maxDate
> context
.boundedDates
[1]) {
1117 // Adjust minDate, and recompute maxDate.
1118 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1119 var maxDate
= minDate
+ context
.dateRange
;
1123 g
.dateWindow_
= [minDate
, maxDate
];
1125 // y-axis scaling is automatic unless this is a full 2D pan.
1126 if (context
.is2DPan
) {
1127 // Adjust each axis appropriately.
1128 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1129 var axis
= g
.axes_
[i
];
1131 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1132 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1134 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1136 // In log scale, maxValue and minValue are the logs of those values.
1137 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1139 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1141 var minValue
= maxValue
- axis
.dragValueRange
;
1143 if (minValue
< boundedValue
[0]) {
1144 // Adjust maxValue, and recompute minValue.
1145 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1146 minValue
= maxValue
- axis
.dragValueRange
;
1149 if (axis
.logscale
) {
1150 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1151 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1153 axis
.valueWindow
= [ minValue
, maxValue
];
1161 // Called in response to an interaction model operation that
1162 // responds to an event that ends panning.
1164 // It's used in the default callback for "mouseup" operations.
1165 // Custom interaction model builders can use it to provide the default
1166 // panning behavior.
1168 Dygraph
.endPan
= function(event
, g
, context
) {
1169 // TODO(konigsberg): Clear the context data from the axis.
1170 // TODO(konigsberg): mouseup should just delete the
1171 // context object, and mousedown should create a new one.
1172 context
.isPanning
= false;
1173 context
.is2DPan
= false;
1174 context
.initialLeftmostDate
= null;
1175 context
.dateRange
= null;
1176 context
.valueRange
= null;
1179 // Called in response to an interaction model operation that
1180 // responds to an event that starts zooming.
1182 // It's used in the default callback for "mousedown" operations.
1183 // Custom interaction model builders can use it to provide the default
1184 // zooming behavior.
1186 Dygraph
.startZoom
= function(event
, g
, context
) {
1187 context
.isZooming
= true;
1190 // Called in response to an interaction model operation that
1191 // responds to an event that defines zoom boundaries.
1193 // It's used in the default callback for "mousemove" operations.
1194 // Custom interaction model builders can use it to provide the default
1195 // zooming behavior.
1197 Dygraph
.moveZoom
= function(event
, g
, context
) {
1198 context
.dragEndX
= g
.dragGetX_(event
, context
);
1199 context
.dragEndY
= g
.dragGetY_(event
, context
);
1201 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1202 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1204 // drag direction threshold for y axis is twice as large as x axis
1205 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1208 context
.dragDirection
,
1213 context
.prevDragDirection
,
1217 context
.prevEndX
= context
.dragEndX
;
1218 context
.prevEndY
= context
.dragEndY
;
1219 context
.prevDragDirection
= context
.dragDirection
;
1222 // Called in response to an interaction model operation that
1223 // responds to an event that performs a zoom based on previously defined
1226 // It's used in the default callback for "mouseup" operations.
1227 // Custom interaction model builders can use it to provide the default
1228 // zooming behavior.
1230 Dygraph
.endZoom
= function(event
, g
, context
) {
1231 context
.isZooming
= false;
1232 context
.dragEndX
= g
.dragGetX_(event
, context
);
1233 context
.dragEndY
= g
.dragGetY_(event
, context
);
1234 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1235 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1237 if (regionWidth
< 2 && regionHeight
< 2 &&
1238 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1239 // TODO(danvk): pass along more info about the points, e.g. 'x'
1240 if (g
.attr_('clickCallback') != null) {
1241 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1243 if (g
.attr_('pointClickCallback')) {
1244 // check if the click was on a particular point.
1245 var closestIdx
= -1;
1246 var closestDistance
= 0;
1247 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1248 var p
= g
.selPoints_
[i
];
1249 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1250 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1251 if (closestIdx
== -1 || distance
< closestDistance
) {
1252 closestDistance
= distance
;
1257 // Allow any click within two pixels of the dot.
1258 var radius
= g
.attr_('highlightCircleSize') + 2;
1259 if (closestDistance
<= 5 * 5) {
1260 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1265 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1266 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1267 Math
.max(context
.dragStartX
, context
.dragEndX
));
1268 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1269 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1270 Math
.max(context
.dragStartY
, context
.dragEndY
));
1272 g
.canvas_
.getContext("2d").clearRect(0, 0,
1276 context
.dragStartX
= null;
1277 context
.dragStartY
= null;
1280 Dygraph
.defaultInteractionModel
= {
1281 // Track the beginning of drag events
1282 mousedown
: function(event
, g
, context
) {
1283 context
.initializeMouseDown(event
, g
, context
);
1285 if (event
.altKey
|| event
.shiftKey
) {
1286 Dygraph
.startPan(event
, g
, context
);
1288 Dygraph
.startZoom(event
, g
, context
);
1292 // Draw zoom rectangles when the mouse is down and the user moves around
1293 mousemove
: function(event
, g
, context
) {
1294 if (context
.isZooming
) {
1295 Dygraph
.moveZoom(event
, g
, context
);
1296 } else if (context
.isPanning
) {
1297 Dygraph
.movePan(event
, g
, context
);
1301 mouseup
: function(event
, g
, context
) {
1302 if (context
.isZooming
) {
1303 Dygraph
.endZoom(event
, g
, context
);
1304 } else if (context
.isPanning
) {
1305 Dygraph
.endPan(event
, g
, context
);
1309 // Temporarily cancel the dragging event when the mouse leaves the graph
1310 mouseout
: function(event
, g
, context
) {
1311 if (context
.isZooming
) {
1312 context
.dragEndX
= null;
1313 context
.dragEndY
= null;
1317 // Disable zooming out if panning.
1318 dblclick
: function(event
, g
, context
) {
1319 if (event
.altKey
|| event
.shiftKey
) {
1322 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1323 // friendlier to public use.
1328 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1331 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1335 Dygraph
.prototype.createDragInterface_
= function() {
1337 // Tracks whether the mouse is down right now
1339 isPanning
: false, // is this drag part of a pan?
1340 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1345 dragDirection
: null,
1348 prevDragDirection
: null,
1350 // The value on the left side of the graph when a pan operation starts.
1351 initialLeftmostDate
: null,
1353 // The number of units each pixel spans. (This won't be valid for log
1355 xUnitsPerPixel
: null,
1357 // TODO(danvk): update this comment
1358 // The range in second/value units that the viewport encompasses during a
1359 // panning operation.
1362 // Utility function to convert page-wide coordinates to canvas coords
1366 // Values for use with panFrame, which limit how far outside the
1367 // graph's data boundaries it can be panned.
1368 boundedDates
: null, // [minDate, maxDate]
1369 boundedValues
: null, // [[minValue, maxValue] ...]
1371 initializeMouseDown
: function(event
, g
, context
) {
1372 // prevents mouse drags from selecting page text.
1373 if (event
.preventDefault
) {
1374 event
.preventDefault(); // Firefox, Chrome, etc.
1376 event
.returnValue
= false; // IE
1377 event
.cancelBubble
= true;
1380 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1381 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1382 context
.dragStartX
= g
.dragGetX_(event
, context
);
1383 context
.dragStartY
= g
.dragGetY_(event
, context
);
1387 var interactionModel
= this.attr_("interactionModel");
1389 // Self is the graph.
1392 // Function that binds the graph and context to the handler.
1393 var bindHandler
= function(handler
) {
1394 return function(event
) {
1395 handler(event
, self
, context
);
1399 for (var eventName
in interactionModel
) {
1400 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1401 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1402 bindHandler(interactionModel
[eventName
]));
1405 // If the user releases the mouse button during a drag, but not over the
1406 // canvas, then it doesn't count as a zooming action.
1407 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1408 if (context
.isZooming
|| context
.isPanning
) {
1409 context
.isZooming
= false;
1410 context
.dragStartX
= null;
1411 context
.dragStartY
= null;
1414 if (context
.isPanning
) {
1415 context
.isPanning
= false;
1416 context
.draggingDate
= null;
1417 context
.dateRange
= null;
1418 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1419 delete self
.axes_
[i
].draggingValue
;
1420 delete self
.axes_
[i
].dragValueRange
;
1428 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1429 * up any previous zoom rectangles that were drawn. This could be optimized to
1430 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1433 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1434 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1435 * @param {Number} startX The X position where the drag started, in canvas
1437 * @param {Number} endX The current X position of the drag, in canvas coords.
1438 * @param {Number} startY The Y position where the drag started, in canvas
1440 * @param {Number} endY The current Y position of the drag, in canvas coords.
1441 * @param {Number} prevDirection the value of direction on the previous call to
1442 * this function. Used to avoid excess redrawing
1443 * @param {Number} prevEndX The value of endX on the previous call to this
1444 * function. Used to avoid excess redrawing
1445 * @param {Number} prevEndY The value of endY on the previous call to this
1446 * function. Used to avoid excess redrawing
1449 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1450 endY
, prevDirection
, prevEndX
,
1452 var ctx
= this.canvas_
.getContext("2d");
1454 // Clean up from the previous rect if necessary
1455 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1456 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1457 Math
.abs(startX
- prevEndX
), this.height_
);
1458 } else if (prevDirection
== Dygraph
.VERTICAL
){
1459 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1460 this.width_
, Math
.abs(startY
- prevEndY
));
1463 // Draw a light-grey rectangle to show the new viewing area
1464 if (direction
== Dygraph
.HORIZONTAL
) {
1465 if (endX
&& startX
) {
1466 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1467 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1468 Math
.abs(endX
- startX
), this.height_
);
1471 if (direction
== Dygraph
.VERTICAL
) {
1472 if (endY
&& startY
) {
1473 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1474 ctx
.fillRect(0, Math
.min(startY
, endY
),
1475 this.width_
, Math
.abs(endY
- startY
));
1481 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1482 * the canvas. The exact zoom window may be slightly larger if there are no data
1483 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1484 * which accepts dates that match the raw data. This function redraws the graph.
1486 * @param {Number} lowX The leftmost pixel value that should be visible.
1487 * @param {Number} highX The rightmost pixel value that should be visible.
1490 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1491 // Find the earliest and latest dates contained in this canvasx range.
1492 // Convert the call to date ranges of the raw data.
1493 var minDate
= this.toDataXCoord(lowX
);
1494 var maxDate
= this.toDataXCoord(highX
);
1495 this.doZoomXDates_(minDate
, maxDate
);
1499 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1500 * method with doZoomX which accepts pixel coordinates. This function redraws
1503 * @param {Number} minDate The minimum date that should be visible.
1504 * @param {Number} maxDate The maximum date that should be visible.
1507 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1508 this.dateWindow_
= [minDate
, maxDate
];
1510 if (this.attr_("zoomCallback")) {
1511 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1516 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1517 * the canvas. This function redraws the graph.
1519 * @param {Number} lowY The topmost pixel value that should be visible.
1520 * @param {Number} highY The lowest pixel value that should be visible.
1523 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1524 // Find the highest and lowest values in pixel range for each axis.
1525 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1526 // This is because pixels increase as you go down on the screen, whereas data
1527 // coordinates increase as you go up the screen.
1528 var valueRanges
= [];
1529 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1530 var hi
= this.toDataYCoord(lowY
, i
);
1531 var low
= this.toDataYCoord(highY
, i
);
1532 this.axes_
[i
].valueWindow
= [low
, hi
];
1533 valueRanges
.push([low
, hi
]);
1537 if (this.attr_("zoomCallback")) {
1538 var xRange
= this.xAxisRange();
1539 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1544 * Reset the zoom to the original view coordinates. This is the same as
1545 * double-clicking on the graph.
1549 Dygraph
.prototype.doUnzoom_
= function() {
1551 if (this.dateWindow_
!= null) {
1553 this.dateWindow_
= null;
1556 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1557 if (this.axes_
[i
].valueWindow
!= null) {
1559 delete this.axes_
[i
].valueWindow
;
1564 // Putting the drawing operation before the callback because it resets
1567 if (this.attr_("zoomCallback")) {
1568 var minDate
= this.rawData_
[0][0];
1569 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1570 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1576 * When the mouse moves in the canvas, display information about a nearby data
1577 * point and draw dots over those points in the data series. This function
1578 * takes care of cleanup of previously-drawn dots.
1579 * @param {Object} event The mousemove event from the browser.
1582 Dygraph
.prototype.mouseMove_
= function(event
) {
1583 // This prevents JS errors when mousing over the canvas before data loads.
1584 var points
= this.layout_
.points
;
1585 if (points
=== undefined
) return;
1587 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1592 // Loop through all the points and find the date nearest to our current
1594 var minDist
= 1e+100;
1596 for (var i
= 0; i
< points
.length
; i
++) {
1597 var point
= points
[i
];
1598 if (point
== null) continue;
1599 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1600 if (dist
> minDist
) continue;
1604 if (idx
>= 0) lastx
= points
[idx
].xval
;
1606 // Extract the points we've selected
1607 this.selPoints_
= [];
1608 var l
= points
.length
;
1609 if (!this.attr_("stackedGraph")) {
1610 for (var i
= 0; i
< l
; i
++) {
1611 if (points
[i
].xval
== lastx
) {
1612 this.selPoints_
.push(points
[i
]);
1616 // Need to 'unstack' points starting from the bottom
1617 var cumulative_sum
= 0;
1618 for (var i
= l
- 1; i
>= 0; i
--) {
1619 if (points
[i
].xval
== lastx
) {
1620 var p
= {}; // Clone the point since we modify it
1621 for (var k
in points
[i
]) {
1622 p
[k
] = points
[i
][k
];
1624 p
.yval
-= cumulative_sum
;
1625 cumulative_sum
+= p
.yval
;
1626 this.selPoints_
.push(p
);
1629 this.selPoints_
.reverse();
1632 if (this.attr_("highlightCallback")) {
1633 var px
= this.lastx_
;
1634 if (px
!== null && lastx
!= px
) {
1635 // only fire if the selected point has changed.
1636 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1640 // Save last x position for callbacks.
1641 this.lastx_
= lastx
;
1643 this.updateSelection_();
1647 * Transforms layout_.points index into data row number.
1648 * @param int layout_.points index
1649 * @return int row number, or -1 if none could be found.
1652 Dygraph
.prototype.idxToRow_
= function(idx
) {
1653 if (idx
< 0) return -1;
1655 for (var i
in this.layout_
.datasets
) {
1656 if (idx
< this.layout_
.datasets
[i
].length
) {
1657 return this.boundaryIds_
[0][0]+idx
;
1659 idx
-= this.layout_
.datasets
[i
].length
;
1664 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1665 Dygraph
.isOK
= function(x
) {
1666 return x
&& !isNaN(x
);
1669 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1670 // If no points are selected, we display a default legend. Traditionally,
1671 // this has been blank. But a better default would be a conventional legend,
1672 // which provides essential information for a non-interactive chart.
1673 if (typeof(x
) === 'undefined') {
1674 if (this.attr_('legend') != 'always') return '';
1676 var sepLines
= this.attr_('labelsSeparateLines');
1677 var labels
= this.attr_('labels');
1679 for (var i
= 1; i
< labels
.length
; i
++) {
1680 var c
= new RGBColor(this.plotter_
.colors
[labels
[i
]]);
1681 if (i
> 1) html
+= (sepLines
? '<br/>' : ' ');
1682 html
+= "<b><font color='" + c
.toHex() + "'>—" + labels
[i
] +
1688 var displayDigits
= this.numXDigits_
+ this.numExtraDigits_
;
1689 var html
= this.attr_('xValueFormatter')(x
, displayDigits
) + ":";
1691 var fmtFunc
= this.attr_('yValueFormatter');
1692 var showZeros
= this.attr_("labelsShowZeroValues");
1693 var sepLines
= this.attr_("labelsSeparateLines");
1694 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1695 var pt
= this.selPoints_
[i
];
1696 if (pt
.yval
== 0 && !showZeros
) continue;
1697 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1698 if (sepLines
) html
+= "<br/>";
1700 var c
= new RGBColor(this.plotter_
.colors
[pt
.name
]);
1701 var yval
= fmtFunc(pt
.yval
, displayDigits
);
1702 // TODO(danvk): use a template string here and make it an attribute.
1703 html
+= " <b><font color='" + c
.toHex() + "'>"
1704 + pt
.name
+ "</font></b>:"
1711 * Draw dots over the selectied points in the data series. This function
1712 * takes care of cleanup of previously-drawn dots.
1715 Dygraph
.prototype.updateSelection_
= function() {
1716 // Clear the previously drawn vertical, if there is one
1717 var ctx
= this.canvas_
.getContext("2d");
1718 if (this.previousVerticalX_
>= 0) {
1719 // Determine the maximum highlight circle size.
1720 var maxCircleSize
= 0;
1721 var labels
= this.attr_('labels');
1722 for (var i
= 1; i
< labels
.length
; i
++) {
1723 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1724 if (r
> maxCircleSize
) maxCircleSize
= r
;
1726 var px
= this.previousVerticalX_
;
1727 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1728 2 * maxCircleSize
+ 2, this.height_
);
1731 if (this.selPoints_
.length
> 0) {
1732 // Set the status message to indicate the selected point(s)
1733 if (this.attr_('showLabelsOnHighlight')) {
1734 var html
= this.generateLegendHTML_(this.lastx_
, this.selPoints_
);
1735 this.attr_("labelsDiv").innerHTML
= html
;
1738 // Draw colored circles over the center of each selected point
1739 var canvasx
= this.selPoints_
[0].canvasx
;
1741 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1742 var pt
= this.selPoints_
[i
];
1743 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1745 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1747 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1748 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1753 this.previousVerticalX_
= canvasx
;
1758 * Set manually set selected dots, and display information about them
1759 * @param int row number that should by highlighted
1760 * false value clears the selection
1763 Dygraph
.prototype.setSelection
= function(row
) {
1764 // Extract the points we've selected
1765 this.selPoints_
= [];
1768 if (row
!== false) {
1769 row
= row
-this.boundaryIds_
[0][0];
1772 if (row
!== false && row
>= 0) {
1773 for (var i
in this.layout_
.datasets
) {
1774 if (row
< this.layout_
.datasets
[i
].length
) {
1775 var point
= this.layout_
.points
[pos
+row
];
1777 if (this.attr_("stackedGraph")) {
1778 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1781 this.selPoints_
.push(point
);
1783 pos
+= this.layout_
.datasets
[i
].length
;
1787 if (this.selPoints_
.length
) {
1788 this.lastx_
= this.selPoints_
[0].xval
;
1789 this.updateSelection_();
1792 this.clearSelection();
1798 * The mouse has left the canvas. Clear out whatever artifacts remain
1799 * @param {Object} event the mouseout event from the browser.
1802 Dygraph
.prototype.mouseOut_
= function(event
) {
1803 if (this.attr_("unhighlightCallback")) {
1804 this.attr_("unhighlightCallback")(event
);
1807 if (this.attr_("hideOverlayOnMouseOut")) {
1808 this.clearSelection();
1813 * Remove all selection from the canvas
1816 Dygraph
.prototype.clearSelection
= function() {
1817 // Get rid of the overlay data
1818 var ctx
= this.canvas_
.getContext("2d");
1819 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1820 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
1821 this.selPoints_
= [];
1826 * Returns the number of the currently selected row
1827 * @return int row number, of -1 if nothing is selected
1830 Dygraph
.prototype.getSelection
= function() {
1831 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1835 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1836 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1837 return row
+ this.boundaryIds_
[0][0];
1843 Dygraph
.zeropad
= function(x
) {
1844 if (x
< 10) return "0" + x
; else return "" + x
;
1848 * Return a string version of the hours, minutes and seconds portion of a date.
1849 * @param {Number} date The JavaScript date (ms since epoch)
1850 * @return {String} A time of the form "HH:MM:SS"
1853 Dygraph
.hmsString_
= function(date
) {
1854 var zeropad
= Dygraph
.zeropad
;
1855 var d
= new Date(date
);
1856 if (d
.getSeconds()) {
1857 return zeropad(d
.getHours()) + ":" +
1858 zeropad(d
.getMinutes()) + ":" +
1859 zeropad(d
.getSeconds());
1861 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1866 * Convert a JS date to a string appropriate to display on an axis that
1867 * is displaying values at the stated granularity.
1868 * @param {Date} date The date to format
1869 * @param {Number} granularity One of the Dygraph granularity constants
1870 * @return {String} The formatted date
1873 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1874 if (granularity
>= Dygraph
.DECADAL
) {
1875 return date
.strftime('%Y');
1876 } else if (granularity
>= Dygraph
.MONTHLY
) {
1877 return date
.strftime('%b %y');
1879 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1880 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1881 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1883 return Dygraph
.hmsString_(date
.getTime());
1889 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1890 * @param {Number} date The JavaScript date (ms since epoch)
1891 * @return {String} A date of the form "YYYY/MM/DD"
1894 Dygraph
.dateString_
= function(date
) {
1895 var zeropad
= Dygraph
.zeropad
;
1896 var d
= new Date(date
);
1899 var year
= "" + d
.getFullYear();
1900 // Get a 0 padded month string
1901 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1902 // Get a 0 padded day string
1903 var day
= zeropad(d
.getDate());
1906 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1907 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1909 return year
+ "/" + month + "/" + day
+ ret
;
1913 * Fires when there's data available to be graphed.
1914 * @param {String} data Raw CSV data to be plotted
1917 Dygraph
.prototype.loadedEvent_
= function(data
) {
1918 this.rawData_
= this.parseCSV_(data
);
1922 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1923 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1924 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1927 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1930 Dygraph
.prototype.addXTicks_
= function() {
1931 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1933 if (this.dateWindow_
) {
1934 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1936 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1939 var formatter
= this.attr_('xTicker');
1940 var ret
= formatter(range
[0], range
[1], this);
1943 // Note: numericTicks() returns a {ticks: [...], numDigits: yy} dictionary,
1944 // whereas dateTicker and user-defined tickers typically just return a ticks
1946 if (ret
.ticks
!== undefined
) {
1948 this.numXDigits_
= ret
.numDigits
;
1953 this.layout_
.updateOptions({xTicks
: xTicks
});
1956 // Time granularity enumeration
1957 Dygraph
.SECONDLY
= 0;
1958 Dygraph
.TWO_SECONDLY
= 1;
1959 Dygraph
.FIVE_SECONDLY
= 2;
1960 Dygraph
.TEN_SECONDLY
= 3;
1961 Dygraph
.THIRTY_SECONDLY
= 4;
1962 Dygraph
.MINUTELY
= 5;
1963 Dygraph
.TWO_MINUTELY
= 6;
1964 Dygraph
.FIVE_MINUTELY
= 7;
1965 Dygraph
.TEN_MINUTELY
= 8;
1966 Dygraph
.THIRTY_MINUTELY
= 9;
1967 Dygraph
.HOURLY
= 10;
1968 Dygraph
.TWO_HOURLY
= 11;
1969 Dygraph
.SIX_HOURLY
= 12;
1971 Dygraph
.WEEKLY
= 14;
1972 Dygraph
.MONTHLY
= 15;
1973 Dygraph
.QUARTERLY
= 16;
1974 Dygraph
.BIANNUAL
= 17;
1975 Dygraph
.ANNUAL
= 18;
1976 Dygraph
.DECADAL
= 19;
1977 Dygraph
.CENTENNIAL
= 20;
1978 Dygraph
.NUM_GRANULARITIES
= 21;
1980 Dygraph
.SHORT_SPACINGS
= [];
1981 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1982 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1983 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1984 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1985 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1986 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1987 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1988 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1989 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1990 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1991 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1992 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1993 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1994 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1995 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1999 // If we used this time granularity, how many ticks would there be?
2000 // This is only an approximation, but it's generally good enough.
2002 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
2003 if (granularity
< Dygraph
.MONTHLY
) {
2004 // Generate one tick mark for every fixed interval of time.
2005 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2006 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
2008 var year_mod
= 1; // e.g. to only print one point every 10 years.
2009 var num_months
= 12;
2010 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
2011 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
2012 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
2013 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
2014 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
2016 var msInYear
= 365.2524 * 24 * 3600 * 1000;
2017 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
2018 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
2024 // Construct an x-axis of nicely-formatted times on meaningful boundaries
2025 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
2027 // Returns an array containing {v: millis, label: label} dictionaries.
2029 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
2030 var formatter
= this.attr_("xAxisLabelFormatter");
2032 if (granularity
< Dygraph
.MONTHLY
) {
2033 // Generate one tick mark for every fixed interval of time.
2034 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2035 var format
= '%d%b'; // e.g. "1Jan"
2037 // Find a time less than start_time which occurs on a "nice" time boundary
2038 // for this granularity.
2039 var g
= spacing
/ 1000;
2040 var d
= new Date(start_time
);
2041 if (g
<= 60) { // seconds
2042 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2046 if (g
<= 60) { // minutes
2047 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2052 if (g
<= 24) { // days
2053 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2058 if (g
== 7) { // one week
2059 d
.setDate(d
.getDate() - d
.getDay());
2064 start_time
= d
.getTime();
2066 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2067 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2070 // Display a tick mark on the first of a set of months of each year.
2071 // Years get a tick mark iff y % year_mod == 0. This is useful for
2072 // displaying a tick mark once every 10 years, say, on long time scales.
2074 var year_mod
= 1; // e.g. to only print one point every 10 years.
2076 if (granularity
== Dygraph
.MONTHLY
) {
2077 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2078 } else if (granularity
== Dygraph
.QUARTERLY
) {
2079 months
= [ 0, 3, 6, 9 ];
2080 } else if (granularity
== Dygraph
.BIANNUAL
) {
2082 } else if (granularity
== Dygraph
.ANNUAL
) {
2084 } else if (granularity
== Dygraph
.DECADAL
) {
2087 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2091 this.warn("Span of dates is too long");
2094 var start_year
= new Date(start_time
).getFullYear();
2095 var end_year
= new Date(end_time
).getFullYear();
2096 var zeropad
= Dygraph
.zeropad
;
2097 for (var i
= start_year
; i
<= end_year
; i
++) {
2098 if (i
% year_mod
!= 0) continue;
2099 for (var j
= 0; j
< months
.length
; j
++) {
2100 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2101 var t
= Date
.parse(date_str
);
2102 if (t
< start_time
|| t
> end_time
) continue;
2103 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2113 * Add ticks to the x-axis based on a date range.
2114 * @param {Number} startDate Start of the date window (millis since epoch)
2115 * @param {Number} endDate End of the date window (millis since epoch)
2116 * @return {Array.<Object>} Array of {label, value} tuples.
2119 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2121 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2122 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2123 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2130 return self
.GetXAxis(startDate
, endDate
, chosen
);
2132 // TODO(danvk): signal error.
2136 // This is a list of human-friendly values at which to show tick marks on a log
2137 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2138 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2139 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2140 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2142 for (var power
= -39; power
<= 39; power
++) {
2143 var range
= Math
.pow(10, power
);
2144 for (var mult
= 1; mult
<= 9; mult
++) {
2145 var val
= range
* mult
;
2152 // val is the value to search for
2153 // arry is the value over which to search
2154 // if abs > 0, find the lowest entry greater than val
2155 // if abs < 0, find the highest entry less than val
2156 // if abs == 0, find the entry that equals val.
2157 // Currently does not work when val is outside the range of arry's values.
2158 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2159 if (low
== null || high
== null) {
2161 high
= arry
.length
- 1;
2169 var validIndex
= function(idx
) {
2170 return idx
>= 0 && idx
< arry
.length
;
2172 var mid
= parseInt((low
+ high
) / 2);
2173 var element
= arry
[mid
];
2174 if (element
== val
) {
2177 if (element
> val
) {
2179 // Accept if element > val, but also if prior element < val.
2181 if (validIndex(idx
) && arry
[idx
] < val
) {
2185 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2187 if (element
< val
) {
2189 // Accept if element < val, but also if prior element > val.
2191 if (validIndex(idx
) && arry
[idx
] > val
) {
2195 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2200 * Determine the number of significant figures in a Number up to the specified
2201 * precision. Note that there is no way to determine if a trailing '0' is
2202 * significant or not, so by convention we return 1 for all of the following
2203 * inputs: 1, 1.0, 1.00, 1.000 etc.
2204 * @param {Number} x The input value.
2205 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
2206 * Default and maximum allowed value is 13.
2207 * @return {Number} The number of significant figures which is >= 1.
2209 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
2210 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
2212 // Convert the number to its exponential notation form and work backwards,
2213 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
2214 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
2215 // the JavaScript interpreter handle the low level bits of the Number for us.
2216 var s
= x
.toExponential(precision
);
2217 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
2219 for (var i
= ePos
- 1; i
>= 0; i
--) {
2221 // Got to the decimal place. We'll call this 1 digit of precision because
2222 // we can't know for sure how many trailing 0s are significant.
2224 } else if (s
[i
] != '0') {
2225 // Found the first non-zero digit. Return the number of characters
2226 // except for the '.'.
2227 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
2231 // Occurs if toExponential() doesn't return a string containing 'e', which
2232 // should never happen.
2237 * Add ticks when the x axis has numbers on it (instead of dates)
2238 * TODO(konigsberg): Update comment.
2240 * @param {Number} minV minimum value
2241 * @param {Number} maxV maximum value
2243 * @param {function} attribute accessor function.
2244 * @return {Array.<Object>} Array of {label, value} tuples.
2247 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2248 var attr
= function(k
) {
2249 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2250 return self
.attr_(k
);
2255 for (var i
= 0; i
< vals
.length
; i
++) {
2256 ticks
.push({v
: vals
[i
]});
2259 if (axis_props
&& attr("logscale")) {
2260 var pixelsPerTick
= attr('pixelsPerYLabel');
2261 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2262 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2263 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2264 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2269 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2271 // Count the number of tick values would appear, if we can get at least
2272 // nTicks / 4 accept them
.
2273 var lastDisplayed
= null;
2274 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2275 var axisId
= axis_props
.yAxisId
;
2276 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2277 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2278 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2279 var tick
= { v
: tickValue
};
2280 if (lastDisplayed
== null) {
2282 tickValue
: tickValue
,
2286 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2288 tickValue
: tickValue
,
2297 // Since we went in backwards order.
2302 // ticks.length won't be 0 if the log scale function finds values to insert.
2303 if (ticks
.length
== 0) {
2305 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2306 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2307 // The first spacing greater than pixelsPerYLabel is what we use.
2308 // TODO(danvk): version that works on a log scale.
2309 if (attr("labelsKMG2")) {
2310 var mults
= [1, 2, 4, 8];
2312 var mults
= [1, 2, 5];
2314 var scale
, low_val
, high_val
, nTicks
;
2315 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2316 var pixelsPerTick
= attr('pixelsPerYLabel');
2317 for (var i
= -10; i
< 50; i
++) {
2318 if (attr("labelsKMG2")) {
2319 var base_scale
= Math
.pow(16, i
);
2321 var base_scale
= Math
.pow(10, i
);
2323 for (var j
= 0; j
< mults
.length
; j
++) {
2324 scale
= base_scale
* mults
[j
];
2325 low_val
= Math
.floor(minV
/ scale
) * scale
;
2326 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2327 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2328 var spacing
= self
.height_
/ nTicks
;
2329 // wish I could break out of both loops at once...
2330 if (spacing
> pixelsPerTick
) break;
2332 if (spacing
> pixelsPerTick
) break;
2335 // Construct the set of ticks.
2336 // Allow reverse y-axis if it's explicitly requested.
2337 if (low_val
> high_val
) scale
*= -1;
2338 for (var i
= 0; i
< nTicks
; i
++) {
2339 var tickV
= low_val
+ i
* scale
;
2340 ticks
.push( {v
: tickV
} );
2345 // Add formatted labels to the ticks.
2348 if (attr("labelsKMB")) {
2350 k_labels
= [ "K", "M", "B", "T" ];
2352 if (attr("labelsKMG2")) {
2353 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2355 k_labels
= [ "k", "M", "G", "T" ];
2357 var formatter
= attr('yAxisLabelFormatter') ?
2358 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2360 // Determine the number of decimal places needed for the labels below by
2361 // taking the maximum number of significant figures for any label. We must
2362 // take the max because we can't tell if trailing 0s are significant.
2364 for (var i
= 0; i
< ticks
.length
; i
++) {
2365 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
2368 // Add labels to the ticks.
2369 for (var i
= 0; i
< ticks
.length
; i
++) {
2370 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2371 var tickV
= ticks
[i
].v
;
2372 var absTickV
= Math
.abs(tickV
);
2373 var label
= (formatter
!== undefined
) ?
2374 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
2375 if (k_labels
.length
> 0) {
2376 // Round up to an appropriate unit.
2378 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2379 if (absTickV
>= n
) {
2380 label
= formatter(tickV
/ n
, numDigits
) + k_labels
[j
];
2385 ticks
[i
].label
= label
;
2388 return {ticks
: ticks
, numDigits
: numDigits
};
2391 // Computes the range of the data series (including confidence intervals).
2392 // series is either [ [x1, y1], [x2, y2], ... ] or
2393 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2394 // Returns [low, high]
2395 Dygraph
.prototype.extremeValues_
= function(series
) {
2396 var minY
= null, maxY
= null;
2398 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2400 // With custom bars, maxY is the max of the high values.
2401 for (var j
= 0; j
< series
.length
; j
++) {
2402 var y
= series
[j
][1][0];
2404 var low
= y
- series
[j
][1][1];
2405 var high
= y
+ series
[j
][1][2];
2406 if (low
> y
) low
= y
; // this can happen with custom bars,
2407 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2408 if (maxY
== null || high
> maxY
) {
2411 if (minY
== null || low
< minY
) {
2416 for (var j
= 0; j
< series
.length
; j
++) {
2417 var y
= series
[j
][1];
2418 if (y
=== null || isNaN(y
)) continue;
2419 if (maxY
== null || y
> maxY
) {
2422 if (minY
== null || y
< minY
) {
2428 return [minY
, maxY
];
2432 * This function is called once when the chart's data is changed or the options
2433 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2434 * idea is that values derived from the chart's data can be computed here,
2435 * rather than every time the chart is drawn. This includes things like the
2436 * number of axes, rolling averages, etc.
2438 Dygraph
.prototype.predraw_
= function() {
2439 // TODO(danvk): move more computations out of drawGraph_ and into here.
2440 this.computeYAxes_();
2442 // Create a new plotter.
2443 if (this.plotter_
) this.plotter_
.clear();
2444 this.plotter_
= new DygraphCanvasRenderer(this,
2445 this.hidden_
, this.layout_
,
2446 this.renderOptions_
);
2448 // The roller sits in the bottom left corner of the chart. We don't know where
2449 // this will be until the options are available, so it's positioned here.
2450 this.createRollInterface_();
2452 // Same thing applies for the labelsDiv. It's right edge should be flush with
2453 // the right edge of the charting area (which may not be the same as the right
2454 // edge of the div, if we have two y-axes.
2455 this.positionLabelsDiv_();
2457 // If the data or options have changed, then we'd better redraw.
2462 * Update the graph with new data. This method is called when the viewing area
2463 * has changed. If the underlying data or options have changed, predraw_ will
2464 * be called before drawGraph_ is called.
2467 Dygraph
.prototype.drawGraph_
= function() {
2468 var data
= this.rawData_
;
2470 // This is used to set the second parameter to drawCallback, below.
2471 var is_initial_draw
= this.is_initial_draw_
;
2472 this.is_initial_draw_
= false;
2474 var minY
= null, maxY
= null;
2475 this.layout_
.removeAllDatasets();
2477 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2479 // Loop over the fields (series). Go from the last to the first,
2480 // because if they're stacked that's how we accumulate the values.
2482 var cumulative_y
= []; // For stacked series.
2485 var extremes
= {}; // series name -> [low, high]
2487 // Loop over all fields and create datasets
2488 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2489 if (!this.visibility()[i
- 1]) continue;
2491 var seriesName
= this.attr_("labels")[i
];
2492 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2493 var logScale
= this.attr_('logscale', i
);
2496 for (var j
= 0; j
< data
.length
; j
++) {
2497 var date
= data
[j
][0];
2498 var point
= data
[j
][i
];
2500 // On the log scale, points less than zero do not exist.
2501 // This will create a gap in the chart. Note that this ignores
2502 // connectSeparatedPoints.
2506 series
.push([date
, point
]);
2508 if (point
!= null || !connectSeparatedPoints
) {
2509 series
.push([date
, point
]);
2514 // TODO(danvk): move this into predraw_. It's insane to do it here.
2515 series
= this.rollingAverage(series
, this.rollPeriod_
);
2517 // Prune down to the desired range, if necessary (for zooming)
2518 // Because there can be lines going to points outside of the visible area,
2519 // we actually prune to visible points, plus one on either side.
2520 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2521 if (this.dateWindow_
) {
2522 var low
= this.dateWindow_
[0];
2523 var high
= this.dateWindow_
[1];
2525 // TODO(danvk): do binary search instead of linear search.
2526 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2527 var firstIdx
= null, lastIdx
= null;
2528 for (var k
= 0; k
< series
.length
; k
++) {
2529 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2532 if (series
[k
][0] <= high
) {
2536 if (firstIdx
=== null) firstIdx
= 0;
2537 if (firstIdx
> 0) firstIdx
--;
2538 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2539 if (lastIdx
< series
.length
- 1) lastIdx
++;
2540 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2541 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2542 pruned
.push(series
[k
]);
2546 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2549 var seriesExtremes
= this.extremeValues_(series
);
2552 for (var j
=0; j
<series
.length
; j
++) {
2553 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2556 } else if (this.attr_("stackedGraph")) {
2557 var l
= series
.length
;
2559 for (var j
= 0; j
< l
; j
++) {
2560 // If one data set has a NaN, let all subsequent stacked
2561 // sets inherit the NaN -- only start at 0 for the first set.
2562 var x
= series
[j
][0];
2563 if (cumulative_y
[x
] === undefined
) {
2564 cumulative_y
[x
] = 0;
2567 actual_y
= series
[j
][1];
2568 cumulative_y
[x
] += actual_y
;
2570 series
[j
] = [x
, cumulative_y
[x
]]
2572 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2573 seriesExtremes
[1] = cumulative_y
[x
];
2575 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2576 seriesExtremes
[0] = cumulative_y
[x
];
2580 extremes
[seriesName
] = seriesExtremes
;
2582 datasets
[i
] = series
;
2585 for (var i
= 1; i
< datasets
.length
; i
++) {
2586 if (!this.visibility()[i
- 1]) continue;
2587 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2590 this.computeYAxisRanges_(extremes
);
2591 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2592 seriesToAxisMap
: this.seriesToAxisMap_
2597 // Tell PlotKit to use this new data and render itself
2598 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2599 this.layout_
.evaluateWithError();
2600 this.plotter_
.clear();
2601 this.plotter_
.render();
2602 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2603 this.canvas_
.height
);
2605 if (is_initial_draw
) {
2606 // Generate a static legend before any particular point is selected.
2607 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
2610 if (this.attr_("drawCallback") !== null) {
2611 this.attr_("drawCallback")(this, is_initial_draw
);
2616 * Determine properties of the y-axes which are independent of the data
2617 * currently being displayed. This includes things like the number of axes and
2618 * the style of the axes. It does not include the range of each axis and its
2620 * This fills in this.axes_ and this.seriesToAxisMap_.
2621 * axes_ = [ { options } ]
2622 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2623 * indices are into the axes_ array.
2625 Dygraph
.prototype.computeYAxes_
= function() {
2626 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2627 this.seriesToAxisMap_
= {};
2629 // Get a list of series names.
2630 var labels
= this.attr_("labels");
2632 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2634 // all options which could be applied per-axis:
2642 'axisLabelFontSize',
2647 // Copy global axis options over to the first axis.
2648 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2649 var k
= axisOptions
[i
];
2650 var v
= this.attr_(k
);
2651 if (v
) this.axes_
[0][k
] = v
;
2654 // Go through once and add all the axes.
2655 for (var seriesName
in series
) {
2656 if (!series
.hasOwnProperty(seriesName
)) continue;
2657 var axis
= this.attr_("axis", seriesName
);
2659 this.seriesToAxisMap_
[seriesName
] = 0;
2662 if (typeof(axis
) == 'object') {
2663 // Add a new axis, making a copy of its per-axis options.
2665 Dygraph
.update(opts
, this.axes_
[0]);
2666 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2667 var yAxisId
= this.axes_
.length
;
2668 opts
.yAxisId
= yAxisId
;
2670 Dygraph
.update(opts
, axis
);
2671 this.axes_
.push(opts
);
2672 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2676 // Go through one more time and assign series to an axis defined by another
2677 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2678 for (var seriesName
in series
) {
2679 if (!series
.hasOwnProperty(seriesName
)) continue;
2680 var axis
= this.attr_("axis", seriesName
);
2681 if (typeof(axis
) == 'string') {
2682 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2683 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2684 "series " + axis
+ ", which does not define its own axis.");
2687 var idx
= this.seriesToAxisMap_
[axis
];
2688 this.seriesToAxisMap_
[seriesName
] = idx
;
2692 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2693 // this last so that hiding the first series doesn't destroy the axis
2694 // properties of the primary axis.
2695 var seriesToAxisFiltered
= {};
2696 var vis
= this.visibility();
2697 for (var i
= 1; i
< labels
.length
; i
++) {
2699 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2701 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2705 * Returns the number of y-axes on the chart.
2706 * @return {Number} the number of axes.
2708 Dygraph
.prototype.numAxes
= function() {
2710 for (var series
in this.seriesToAxisMap_
) {
2711 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2712 var idx
= this.seriesToAxisMap_
[series
];
2713 if (idx
> last_axis
) last_axis
= idx
;
2715 return 1 + last_axis
;
2719 * Determine the value range and tick marks for each axis.
2720 * @param {Object} extremes A mapping from seriesName -> [low, high]
2721 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2723 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2724 // Build a map from axis number -> [list of series names]
2725 var seriesForAxis
= [];
2726 for (var series
in this.seriesToAxisMap_
) {
2727 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2728 var idx
= this.seriesToAxisMap_
[series
];
2729 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2730 seriesForAxis
[idx
].push(series
);
2733 // Compute extreme values, a span and tick marks for each axis.
2734 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2735 var axis
= this.axes_
[i
];
2738 // Calculate the extremes of extremes.
2739 var series
= seriesForAxis
[i
];
2740 var minY
= Infinity
; // extremes[series[0]][0];
2741 var maxY
= -Infinity
; // extremes[series[0]][1];
2742 for (var j
= 0; j
< series
.length
; j
++) {
2743 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2744 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2746 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2748 // Add some padding and round up to an integer to be human-friendly.
2749 var span
= maxY
- minY
;
2750 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2751 if (span
== 0) { span
= maxY
; }
2755 if (axis
.logscale
) {
2756 var maxAxisY
= maxY
+ 0.1 * span
;
2757 var minAxisY
= minY
;
2759 var maxAxisY
= maxY
+ 0.1 * span
;
2760 var minAxisY
= minY
- 0.1 * span
;
2762 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2763 if (!this.attr_("avoidMinZero")) {
2764 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2765 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2768 if (this.attr_("includeZero")) {
2769 if (maxY
< 0) maxAxisY
= 0;
2770 if (minY
> 0) minAxisY
= 0;
2773 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2775 if (axis
.valueWindow
) {
2776 // This is only set if the user has zoomed on the y-axis. It is never set
2777 // by a user. It takes precedence over axis.valueRange because, if you set
2778 // valueRange, you'd still expect to be able to pan.
2779 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2780 } else if (axis
.valueRange
) {
2781 // This is a user-set value range for this axis.
2782 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2784 axis
.computedValueRange
= axis
.extremeRange
;
2787 // Add ticks. By default, all axes inherit the tick positions of the
2788 // primary axis. However, if an axis is specifically marked as having
2789 // independent ticks, then that is permissible as well.
2790 if (i
== 0 || axis
.independentTicks
) {
2792 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2793 axis
.computedValueRange
[1],
2796 axis
.ticks
= ret
.ticks
;
2797 this.numYDigits_
= ret
.numDigits
;
2799 var p_axis
= this.axes_
[0];
2800 var p_ticks
= p_axis
.ticks
;
2801 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2802 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2803 var tick_values
= [];
2804 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2805 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2806 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2807 tick_values
.push(y_val
);
2811 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2812 axis
.computedValueRange
[1],
2813 this, axis
, tick_values
);
2814 axis
.ticks
= ret
.ticks
;
2815 this.numYDigits_
= ret
.numDigits
;
2821 * Calculates the rolling average of a data set.
2822 * If originalData is [label, val], rolls the average of those.
2823 * If originalData is [label, [, it's interpreted as [value, stddev]
2824 * and the roll is returned in the same form, with appropriately reduced
2825 * stddev for each value.
2826 * Note that this is where fractional input (i.e. '5/10') is converted into
2828 * @param {Array} originalData The data in the appropriate format (see above)
2829 * @param {Number} rollPeriod The number of points over which to average the
2832 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2833 if (originalData
.length
< 2)
2834 return originalData
;
2835 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2836 var rollingData
= [];
2837 var sigma
= this.attr_("sigma");
2839 if (this.fractions_
) {
2841 var den
= 0; // numerator/denominator
2843 for (var i
= 0; i
< originalData
.length
; i
++) {
2844 num
+= originalData
[i
][1][0];
2845 den
+= originalData
[i
][1][1];
2846 if (i
- rollPeriod
>= 0) {
2847 num
-= originalData
[i
- rollPeriod
][1][0];
2848 den
-= originalData
[i
- rollPeriod
][1][1];
2851 var date
= originalData
[i
][0];
2852 var value
= den
? num
/ den
: 0.0;
2853 if (this.attr_("errorBars")) {
2854 if (this.wilsonInterval_
) {
2855 // For more details on this confidence interval, see:
2856 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2858 var p
= value
< 0 ? 0 : value
, n
= den
;
2859 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2860 var denom
= 1 + sigma
* sigma
/ den
;
2861 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2862 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2863 rollingData
[i
] = [date
,
2864 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2866 rollingData
[i
] = [date
, [0, 0, 0]];
2869 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2870 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2873 rollingData
[i
] = [date
, mult
* value
];
2876 } else if (this.attr_("customBars")) {
2881 for (var i
= 0; i
< originalData
.length
; i
++) {
2882 var data
= originalData
[i
][1];
2884 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2886 if (y
!= null && !isNaN(y
)) {
2892 if (i
- rollPeriod
>= 0) {
2893 var prev
= originalData
[i
- rollPeriod
];
2894 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2901 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2902 1.0 * (mid
- low
) / count
,
2903 1.0 * (high
- mid
) / count
]];
2906 // Calculate the rolling average for the first rollPeriod - 1 points where
2907 // there is not enough data to roll over the full number of points
2908 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2909 if (!this.attr_("errorBars")){
2910 if (rollPeriod
== 1) {
2911 return originalData
;
2914 for (var i
= 0; i
< originalData
.length
; i
++) {
2917 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2918 var y
= originalData
[j
][1];
2919 if (y
== null || isNaN(y
)) continue;
2921 sum
+= originalData
[j
][1];
2924 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2926 rollingData
[i
] = [originalData
[i
][0], null];
2931 for (var i
= 0; i
< originalData
.length
; i
++) {
2935 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2936 var y
= originalData
[j
][1][0];
2937 if (y
== null || isNaN(y
)) continue;
2939 sum
+= originalData
[j
][1][0];
2940 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2943 var stddev
= Math
.sqrt(variance
) / num_ok
;
2944 rollingData
[i
] = [originalData
[i
][0],
2945 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2947 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2957 * Parses a date, returning the number of milliseconds since epoch. This can be
2958 * passed in as an xValueParser in the Dygraph constructor.
2959 * TODO(danvk): enumerate formats that this understands.
2960 * @param {String} A date in YYYYMMDD format.
2961 * @return {Number} Milliseconds since epoch.
2964 Dygraph
.dateParser
= function(dateStr
, self
) {
2967 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2968 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2969 while (dateStrSlashed
.search("-") != -1) {
2970 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2972 d
= Date
.parse(dateStrSlashed
);
2973 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2974 // TODO(danvk): remove support for this format. It's confusing.
2975 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2976 + "/" + dateStr
.substr(6,2);
2977 d
= Date
.parse(dateStrSlashed
);
2979 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2980 // "2009/07/12 12:34:56"
2981 d
= Date
.parse(dateStr
);
2984 if (!d
|| isNaN(d
)) {
2985 self
.error("Couldn't parse " + dateStr
+ " as a date");
2991 * Detects the type of the str (date or numeric) and sets the various
2992 * formatting attributes in this.attrs_ based on this type.
2993 * @param {String} str An x value.
2996 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2998 if (str
.indexOf('-') > 0 ||
2999 str
.indexOf('/') >= 0 ||
3000 isNaN(parseFloat(str
))) {
3002 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
3003 // TODO(danvk): remove support for this format.
3008 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3009 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3010 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3011 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3013 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3014 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3015 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3016 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3021 * Parses the value as a floating point number. This is like the parseFloat()
3022 * built-in, but with a few differences:
3023 * - the empty string is parsed as null, rather than NaN.
3024 * - if the string cannot be parsed at all, an error is logged.
3025 * If the string can't be parsed, this method returns null.
3026 * @param {String} x The string to be parsed
3027 * @param {Number} opt_line_no The line number from which the string comes.
3028 * @param {String} opt_line The text of the line from which the string comes.
3032 // Parse the x as a float or return null if it's not a number.
3033 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
3034 var val
= parseFloat(x
);
3035 if (!isNaN(val
)) return val
;
3037 // Try to figure out what happeend.
3038 // If the value is the empty string, parse it as null.
3039 if (/^ *$/.test(x
)) return null;
3041 // If it was actually "NaN", return it as NaN.
3042 if (/^ *nan *$/i.test(x
)) return NaN
;
3044 // Looks like a parsing error.
3045 var msg
= "Unable to parse '" + x
+ "' as a number";
3046 if (opt_line
!== null && opt_line_no
!== null) {
3047 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3055 * Parses a string in a special csv format. We expect a csv file where each
3056 * line is a date point, and the first field in each line is the date string.
3057 * We also expect that all remaining fields represent series.
3058 * if the errorBars attribute is set, then interpret the fields as:
3059 * date, series1, stddev1, series2, stddev2, ...
3060 * @param {Array.<Object>} data See above.
3063 * @return Array.<Object> An array with one entry for each row. These entries
3064 * are an array of cells in that row. The first entry is the parsed x-value for
3065 * the row. The second, third, etc. are the y-values. These can take on one of
3066 * three forms, depending on the CSV and constructor parameters:
3068 * 2. [ value, stddev ]
3069 * 3. [ low value, center value, high value ]
3071 Dygraph
.prototype.parseCSV_
= function(data
) {
3073 var lines
= data
.split("\n");
3075 // Use the default delimiter or fall back to a tab if that makes sense.
3076 var delim
= this.attr_('delimiter');
3077 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3082 if (this.labelsFromCSV_
) {
3084 this.attrs_
.labels
= lines
[0].split(delim
);
3089 var defaultParserSet
= false; // attempt to auto-detect x value type
3090 var expectedCols
= this.attr_("labels").length
;
3091 var outOfOrder
= false;
3092 for (var i
= start
; i
< lines
.length
; i
++) {
3093 var line
= lines
[i
];
3095 if (line
.length
== 0) continue; // skip blank lines
3096 if (line
[0] == '#') continue; // skip comment lines
3097 var inFields
= line
.split(delim
);
3098 if (inFields
.length
< 2) continue;
3101 if (!defaultParserSet
) {
3102 this.detectTypeFromString_(inFields
[0]);
3103 xParser
= this.attr_("xValueParser");
3104 defaultParserSet
= true;
3106 fields
[0] = xParser(inFields
[0], this);
3108 // If fractions are expected, parse the numbers as "A/B
"
3109 if (this.fractions_) {
3110 for (var j = 1; j < inFields.length; j++) {
3111 // TODO(danvk): figure out an appropriate way to flag parse errors.
3112 var vals = inFields[j].split("/");
3113 if (vals.length != 2) {
3114 this.error('Expected fractional "num
/den
" values in CSV data ' +
3115 "but found a value
'" + inFields[j] + "' on line
" +
3116 (1 + i) + " ('" + line + "') which is not of
this form
.");
3119 fields[j] = [this.parseFloat_(vals[0], i, line),
3120 this.parseFloat_(vals[1], i, line)];
3123 } else if (this.attr_("errorBars
")) {
3124 // If there are error bars, values are (value, stddev) pairs
3125 if (inFields.length % 2 != 1) {
3126 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3127 'but line ' + (1 + i) + ' has an odd number of values (' +
3128 (inFields.length - 1) + "): '" + line + "'");
3130 for (var j = 1; j < inFields.length; j += 2) {
3131 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3132 this.parseFloat_(inFields[j + 1], i, line)];
3134 } else if (this.attr_("customBars
")) {
3135 // Bars are a low;center;high tuple
3136 for (var j = 1; j < inFields.length; j++) {
3137 var vals = inFields[j].split(";");
3138 fields[j] = [ this.parseFloat_(vals[0], i, line),
3139 this.parseFloat_(vals[1], i, line),
3140 this.parseFloat_(vals[2], i, line) ];
3143 // Values are just numbers
3144 for (var j = 1; j < inFields.length; j++) {
3145 fields[j] = this.parseFloat_(inFields[j], i, line);
3148 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3152 if (fields.length != expectedCols) {
3153 this.error("Number of columns
in line
" + i + " (" + fields.length +
3154 ") does not agree
with number of
labels (" + expectedCols +
3158 // If the user specified the 'labels' option and none of the cells of the
3159 // first row parsed correctly, then they probably double-specified the
3160 // labels. We go with the values set in the option, discard this row and
3161 // log a warning to the JS console.
3162 if (i == 0 && this.attr_('labels')) {
3163 var all_null = true;
3164 for (var j = 0; all_null && j < fields.length; j++) {
3165 if (fields[j]) all_null = false;
3168 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3169 "CSV
data ('" + line + "') appears to also contain labels
. " +
3170 "Will drop the CSV labels and
use the option labels
.");
3178 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3179 ret.sort(function(a,b) { return a[0] - b[0] });
3186 * The user has provided their data as a pre-packaged JS array. If the x values
3187 * are numeric, this is the same as dygraphs' internal format. If the x values
3188 * are dates, we need to convert them from Date objects to ms since epoch.
3189 * @param {Array.<Object>} data
3190 * @return {Array.<Object>} data with numeric x values.
3192 Dygraph.prototype.parseArray_ = function(data) {
3193 // Peek at the first x value to see if it's numeric.
3194 if (data.length == 0) {
3195 this.error("Can
't plot empty data set");
3198 if (data[0].length == 0) {
3199 this.error("Data set cannot contain an empty row");
3203 if (this.attr_("labels") == null) {
3204 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3205 "in the options parameter");
3206 this.attrs_.labels = [ "X" ];
3207 for (var i = 1; i < data[0].length; i++) {
3208 this.attrs_.labels.push("Y" + i);
3212 if (Dygraph.isDateLike(data[0][0])) {
3213 // Some intelligent defaults for a date x-axis.
3214 this.attrs_.xValueFormatter = Dygraph.dateString_;
3215 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3216 this.attrs_.xTicker = Dygraph.dateTicker;
3218 // Assume they're all dates
.
3219 var parsedData
= Dygraph
.clone(data
);
3220 for (var i
= 0; i
< data
.length
; i
++) {
3221 if (parsedData
[i
].length
== 0) {
3222 this.error("Row " + (1 + i
) + " of data is empty");
3225 if (parsedData
[i
][0] == null
3226 || typeof(parsedData
[i
][0].getTime
) != 'function'
3227 || isNaN(parsedData
[i
][0].getTime())) {
3228 this.error("x value in row " + (1 + i
) + " is not a Date");
3231 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3235 // Some intelligent defaults for a numeric x-axis.
3236 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3237 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3243 * Parses a DataTable object from gviz.
3244 * The data is expected to have a first column that is either a date or a
3245 * number. All subsequent columns must be numbers. If there is a clear mismatch
3246 * between this.xValueParser_ and the type of the first column, it will be
3247 * fixed. Fills out rawData_.
3248 * @param {Array.<Object>} data See above.
3251 Dygraph
.prototype.parseDataTable_
= function(data
) {
3252 var cols
= data
.getNumberOfColumns();
3253 var rows
= data
.getNumberOfRows();
3255 var indepType
= data
.getColumnType(0);
3256 if (indepType
== 'date' || indepType
== 'datetime') {
3257 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3258 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3259 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3260 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3261 } else if (indepType
== 'number') {
3262 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3263 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3264 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3265 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3267 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3268 "column 1 of DataTable input (Got '" + indepType
+ "')");
3272 // Array of the column indices which contain data (and not annotations).
3274 var annotationCols
= {}; // data index -> [annotation cols]
3275 var hasAnnotations
= false;
3276 for (var i
= 1; i
< cols
; i
++) {
3277 var type
= data
.getColumnType(i
);
3278 if (type
== 'number') {
3280 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3281 // This is OK -- it's an annotation column.
3282 var dataIdx
= colIdx
[colIdx
.length
- 1];
3283 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3284 annotationCols
[dataIdx
] = [i
];
3286 annotationCols
[dataIdx
].push(i
);
3288 hasAnnotations
= true;
3290 this.error("Only 'number' is supported as a dependent type with Gviz." +
3291 " 'string' is only supported if displayAnnotations is true");
3295 // Read column labels
3296 // TODO(danvk): add support back for errorBars
3297 var labels
= [data
.getColumnLabel(0)];
3298 for (var i
= 0; i
< colIdx
.length
; i
++) {
3299 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3300 if (this.attr_("errorBars")) i
+= 1;
3302 this.attrs_
.labels
= labels
;
3303 cols
= labels
.length
;
3306 var outOfOrder
= false;
3307 var annotations
= [];
3308 for (var i
= 0; i
< rows
; i
++) {
3310 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3311 data
.getValue(i
, 0) === null) {
3312 this.warn("Ignoring row " + i
+
3313 " of DataTable because of undefined or null first column.");
3317 if (indepType
== 'date' || indepType
== 'datetime') {
3318 row
.push(data
.getValue(i
, 0).getTime());
3320 row
.push(data
.getValue(i
, 0));
3322 if (!this.attr_("errorBars")) {
3323 for (var j
= 0; j
< colIdx
.length
; j
++) {
3324 var col
= colIdx
[j
];
3325 row
.push(data
.getValue(i
, col
));
3326 if (hasAnnotations
&&
3327 annotationCols
.hasOwnProperty(col
) &&
3328 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3330 ann
.series
= data
.getColumnLabel(col
);
3332 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3334 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3335 if (k
) ann
.text
+= "\n";
3336 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3338 annotations
.push(ann
);
3342 for (var j
= 0; j
< cols
- 1; j
++) {
3343 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3346 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3350 // Strip out infinities, which give dygraphs problems later on.
3351 for (var j
= 0; j
< row
.length
; j
++) {
3352 if (!isFinite(row
[j
])) row
[j
] = null;
3358 this.warn("DataTable is out of order; order it correctly to speed loading.");
3359 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3361 this.rawData_
= ret
;
3363 if (annotations
.length
> 0) {
3364 this.setAnnotations(annotations
, true);
3368 // These functions are all based on MochiKit.
3369 Dygraph
.update
= function (self
, o
) {
3370 if (typeof(o
) != 'undefined' && o
!== null) {
3372 if (o
.hasOwnProperty(k
)) {
3380 Dygraph
.isArrayLike
= function (o
) {
3381 var typ
= typeof(o
);
3383 (typ
!= 'object' && !(typ
== 'function' &&
3384 typeof(o
.item
) == 'function')) ||
3386 typeof(o
.length
) != 'number' ||
3394 Dygraph
.isDateLike
= function (o
) {
3395 if (typeof(o
) != "object" || o
=== null ||
3396 typeof(o
.getTime
) != 'function') {
3402 Dygraph
.clone
= function(o
) {
3403 // TODO(danvk): figure out how MochiKit's version works
3405 for (var i
= 0; i
< o
.length
; i
++) {
3406 if (Dygraph
.isArrayLike(o
[i
])) {
3407 r
.push(Dygraph
.clone(o
[i
]));
3417 * Get the CSV data. If it's in a function, call that function. If it's in a
3418 * file, do an XMLHttpRequest to get it.
3421 Dygraph
.prototype.start_
= function() {
3422 if (typeof this.file_
== 'function') {
3423 // CSV string. Pretend we got it via XHR.
3424 this.loadedEvent_(this.file_());
3425 } else if (Dygraph
.isArrayLike(this.file_
)) {
3426 this.rawData_
= this.parseArray_(this.file_
);
3428 } else if (typeof this.file_
== 'object' &&
3429 typeof this.file_
.getColumnRange
== 'function') {
3430 // must be a DataTable from gviz.
3431 this.parseDataTable_(this.file_
);
3433 } else if (typeof this.file_
== 'string') {
3434 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3435 if (this.file_
.indexOf('\n') >= 0) {
3436 this.loadedEvent_(this.file_
);
3438 var req
= new XMLHttpRequest();
3440 req
.onreadystatechange
= function () {
3441 if (req
.readyState
== 4) {
3442 if (req
.status
== 200) {
3443 caller
.loadedEvent_(req
.responseText
);
3448 req
.open("GET", this.file_
, true);
3452 this.error("Unknown data format: " + (typeof this.file_
));
3457 * Changes various properties of the graph. These can include:
3459 * <li>file: changes the source data for the graph</li>
3460 * <li>errorBars: changes whether the data contains stddev</li>
3462 * @param {Object} attrs The new properties and values
3464 Dygraph
.prototype.updateOptions
= function(attrs
) {
3465 // TODO(danvk): this is a mess. Rethink this function.
3466 if ('rollPeriod' in attrs
) {
3467 this.rollPeriod_
= attrs
.rollPeriod
;
3469 if ('dateWindow' in attrs
) {
3470 this.dateWindow_
= attrs
.dateWindow
;
3473 // TODO(danvk): validate per-series options.
3478 // highlightCircleSize
3480 Dygraph
.update(this.user_attrs_
, attrs
);
3481 Dygraph
.update(this.renderOptions_
, attrs
);
3483 this.labelsFromCSV_
= (this.attr_("labels") == null);
3485 // TODO(danvk): this doesn't match the constructor logic
3486 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3487 if (attrs
['file']) {
3488 this.file_
= attrs
['file'];
3496 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3497 * containing div (which has presumably changed size since the dygraph was
3498 * instantiated. If the width/height are specified, the div will be resized.
3500 * This is far more efficient than destroying and re-instantiating a
3501 * Dygraph, since it doesn't have to reparse the underlying data.
3503 * @param {Number} width Width (in pixels)
3504 * @param {Number} height Height (in pixels)
3506 Dygraph
.prototype.resize
= function(width
, height
) {
3507 if (this.resize_lock
) {
3510 this.resize_lock
= true;
3512 if ((width
=== null) != (height
=== null)) {
3513 this.warn("Dygraph.resize() should be called with zero parameters or " +
3514 "two non-NULL parameters. Pretending it was zero.");
3515 width
= height
= null;
3518 // TODO(danvk): there should be a clear() method.
3519 this.maindiv_
.innerHTML
= "";
3520 this.attrs_
.labelsDiv
= null;
3523 this.maindiv_
.style
.width
= width
+ "px";
3524 this.maindiv_
.style
.height
= height
+ "px";
3525 this.width_
= width
;
3526 this.height_
= height
;
3528 this.width_
= this.maindiv_
.offsetWidth
;
3529 this.height_
= this.maindiv_
.offsetHeight
;
3532 this.createInterface_();
3535 this.resize_lock
= false;
3539 * Adjusts the number of points in the rolling average. Updates the graph to
3540 * reflect the new averaging period.
3541 * @param {Number} length Number of points over which to average the data.
3543 Dygraph
.prototype.adjustRoll
= function(length
) {
3544 this.rollPeriod_
= length
;
3549 * Returns a boolean array of visibility statuses.
3551 Dygraph
.prototype.visibility
= function() {
3552 // Do lazy-initialization, so that this happens after we know the number of
3554 if (!this.attr_("visibility")) {
3555 this.attrs_
["visibility"] = [];
3557 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3558 this.attr_("visibility").push(true);
3560 return this.attr_("visibility");
3564 * Changes the visiblity of a series.
3566 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3567 var x
= this.visibility();
3568 if (num
< 0 || num
>= x
.length
) {
3569 this.warn("invalid series number in setVisibility: " + num
);
3577 * Update the list of annotations and redraw the chart.
3579 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3580 // Only add the annotation CSS rule once we know it will be used.
3581 Dygraph
.addAnnotationRule();
3582 this.annotations_
= ann
;
3583 this.layout_
.setAnnotations(this.annotations_
);
3584 if (!suppressDraw
) {
3590 * Return the list of annotations.
3592 Dygraph
.prototype.annotations
= function() {
3593 return this.annotations_
;
3597 * Get the index of a series (column) given its name. The first column is the
3598 * x-axis, so the data series start with index 1.
3600 Dygraph
.prototype.indexFromSetName
= function(name
) {
3601 var labels
= this.attr_("labels");
3602 for (var i
= 0; i
< labels
.length
; i
++) {
3603 if (labels
[i
] == name
) return i
;
3608 Dygraph
.addAnnotationRule
= function() {
3609 if (Dygraph
.addedAnnotationCSS
) return;
3611 var rule
= "border: 1px solid black; " +
3612 "background-color: white; " +
3613 "text-align: center;";
3615 var styleSheetElement
= document
.createElement("style");
3616 styleSheetElement
.type
= "text/css";
3617 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3619 // Find the first style sheet that we can access.
3620 // We may not add a rule to a style sheet from another domain for security
3621 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3622 // adds its own style sheets from google.com.
3623 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3624 if (document
.styleSheets
[i
].disabled
) continue;
3625 var mysheet
= document
.styleSheets
[i
];
3627 if (mysheet
.insertRule
) { // Firefox
3628 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3629 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3630 } else if (mysheet
.addRule
) { // IE
3631 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3633 Dygraph
.addedAnnotationCSS
= true;
3636 // Was likely a security exception.
3640 this.warn("Unable to add default annotation CSS rule; display may be off.");
3644 * Create a new canvas element. This is more complex than a simple
3645 * document.createElement("canvas") because of IE and excanvas.
3647 Dygraph
.createCanvas
= function() {
3648 var canvas
= document
.createElement("canvas");
3650 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3651 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3652 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3660 * A wrapper around Dygraph that implements the gviz API.
3661 * @param {Object} container The DOM object the visualization should live in.
3663 Dygraph
.GVizChart
= function(container
) {
3664 this.container
= container
;
3667 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3668 // Clear out any existing dygraph.
3669 // TODO(danvk): would it make more sense to simply redraw using the current
3670 // date_graph object?
3671 this.container
.innerHTML
= '';
3672 if (typeof(this.date_graph
) != 'undefined') {
3673 this.date_graph
.destroy();
3676 this.date_graph
= new Dygraph(this.container
, data
, options
);
3680 * Google charts compatible setSelection
3681 * Only row selection is supported, all points in the row will be highlighted
3682 * @param {Array} array of the selected cells
3685 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3687 if (selection_array
.length
) {
3688 row
= selection_array
[0].row
;
3690 this.date_graph
.setSelection(row
);
3694 * Google charts compatible getSelection implementation
3695 * @return {Array} array of the selected cells
3698 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3701 var row
= this.date_graph
.getSelection();
3703 if (row
< 0) return selection
;
3706 for (var i
in this.date_graph
.layout_
.datasets
) {
3707 selection
.push({row
: row
, column
: col
});
3714 // Older pages may still use this name.
3715 DateGraph
= Dygraph
;
3717 // <REMOVE_FOR_COMBINED>
3718 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
3721 "default": "parseFloat() or Date.parse()*",
3722 "labels": ["CSV parsing"],
3723 "type": "function(str) -> number",
3724 "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."
3728 "labels": ["Data Line display"],
3730 "description": "If set, stack series on top of one another rather than drawing them independently."
3734 "labels": ["Data Line display"],
3736 "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."
3738 "labelsDivStyles": {
3740 "labels": ["Legend"],
3742 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
3746 "labels": ["Data Line display"],
3748 "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."
3752 "labels": ["Overall display"],
3754 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3758 "labels": ["Callbacks"],
3759 "type": "function(minDate, maxDate, yRanges)",
3760 "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."
3762 "pointClickCallback": {
3764 "labels": ["Callbacks", "Interactive Elements"],
3769 "default": "(see description)",
3770 "labels": ["Data Series Colors"],
3771 "type": "array<string>",
3772 "example": "['red', '#00FF00']",
3773 "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."
3775 "connectSeparatedPoints": {
3777 "labels": ["Data Line display"],
3779 "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."
3781 "highlightCallback": {
3783 "labels": ["Callbacks"],
3784 "type": "function(event, x, points,row)",
3785 "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>"
3789 "labels": ["Axis display"],
3791 "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"
3795 "labels": ["Error Bars", "Rolling Averages"],
3796 "type": "integer >= 1",
3797 "description": "Number of days over which to average data. Discussed extensively above."
3799 "unhighlightCallback": {
3801 "labels": ["Callbacks"],
3802 "type": "function(event)",
3803 "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."
3807 "labels": ["Axis display"],
3809 "description": "The size of the line to display next to each tick mark on x- or y-axes."
3811 "labelsSeparateLines": {
3813 "labels": ["Legend"],
3815 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
3817 "xValueFormatter": {
3818 "default": "(Round to 2 decimal places)",
3819 "labels": ["Axis display"],
3820 "type": "function(x)",
3821 "description": "Function to provide a custom display format for the X value for mouseover."
3823 "pixelsPerYLabel": {
3825 "labels": ["Axis display", "Grid"],
3827 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3829 "annotationMouseOverHandler": {
3831 "labels": ["Annotations"],
3832 "type": "function(annotation, point, dygraph, event)",
3833 "description": "If provided, this function is called whenever the user mouses over an annotation."
3835 "annotationMouseOutHandler": {
3837 "labels": ["Annotations"],
3838 "type": "function(annotation, point, dygraph, event)",
3839 "description": "If provided, this function is called whenever the user mouses out of an annotation."
3841 "annotationClickHandler": {
3843 "labels": ["Annotations"],
3844 "type": "function(annotation, point, dygraph, event)",
3845 "description": "If provided, this function is called whenever the user clicks on an annotation."
3847 "annotationDblClickHandler": {
3849 "labels": ["Annotations"],
3850 "type": "function(annotation, point, dygraph, event)",
3851 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
3855 "labels": ["Callbacks"],
3856 "type": "function(dygraph, is_initial)",
3857 "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."
3861 "labels": ["Value display/formatting"],
3863 "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."
3867 "labels": ["CSV parsing"],
3869 "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."
3871 "axisLabelFontSize": {
3873 "labels": ["Axis display"],
3875 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
3877 "underlayCallback": {
3879 "labels": ["Callbacks"],
3880 "type": "function(canvas, area, dygraph)",
3881 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
3885 "labels": ["Overall display"],
3887 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3889 "interactionModel": {
3891 "labels": ["Interactive Elements"],
3893 "description": "TODO(konigsberg): document this"
3896 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
3897 "labels": ["Axis display"],
3898 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
3899 "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."
3901 "xAxisLabelWidth": {
3903 "labels": ["Axis display"],
3905 "description": "Width, in pixels, of the x-axis labels."
3907 "showLabelsOnHighlight": {
3909 "labels": ["Interactive Elements", "Legend"],
3911 "description": "Whether to show the legend upon mouseover."
3914 "default": "(none)",
3915 "labels": ["Axis display"],
3916 "type": "string or object",
3917 "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."
3919 "pixelsPerXLabel": {
3921 "labels": ["Axis display", "Grid"],
3923 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3927 "labels": ["Legend"],
3928 "type": "DOM element or string",
3929 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
3930 "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."
3934 "labels": ["CSV parsing", "Error Bars"],
3936 "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)."
3940 "labels": ["Axis display"],
3942 "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."
3946 "labels": ["Data Line display"],
3948 "example": "0.5, 2.0",
3949 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
3953 "labels": ["Error Bars"],
3955 "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."
3959 "labels": ["Data Line display"],
3961 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
3963 "highlightCircleSize": {
3965 "labels": ["Interactive Elements"],
3967 "description": "The size in pixels of the dot drawn over highlighted points."
3970 "default": "rgb(128,128,128)",
3972 "type": "red, blue",
3973 "description": "The color of the gridlines."
3976 "default": "[true, true, ...]",
3977 "labels": ["Data Line display"],
3978 "type": "Array of booleans",
3979 "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."
3982 "default": "Full range of the input is shown",
3983 "labels": ["Axis display"],
3984 "type": "Array of two numbers",
3985 "example": "[10, 110]",
3986 "description": "Explicitly set the vertical range of the graph to [low, high]."
3990 "labels": ["Legend"],
3992 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
3994 "colorSaturation": {
3996 "labels": ["Data Series Colors"],
3997 "type": "0.0 - 1.0",
3998 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
4000 "yAxisLabelWidth": {
4002 "labels": ["Axis display"],
4004 "description": "Width, in pixels, of the y-axis labels."
4006 "hideOverlayOnMouseOut": {
4008 "labels": ["Interactive Elements", "Legend"],
4010 "description": "Whether to hide the legend when the mouse leaves the chart area."
4012 "yValueFormatter": {
4013 "default": "(Round to 2 decimal places)",
4014 "labels": ["Axis display"],
4015 "type": "function(x)",
4016 "description": "Function to provide a custom display format for the Y value for mouseover."
4019 "default": "onmouseover",
4020 "labels": ["Legend"],
4022 "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."
4024 "labelsShowZeroValues": {
4026 "labels": ["Legend"],
4028 "description": "Show zero value labels in the labelsDiv."
4032 "labels": ["Data Line display"],
4034 "description": "When set, display the graph as a step plot instead of a line plot."
4038 "labels": ["Value display/formatting"],
4040 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4044 "labels": ["Overall display"],
4046 "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."
4050 "labels": ["Axis display"],
4052 "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."
4054 "xAxisLabelFormatter": {
4055 "default": "Dygraph.dateAxisFormatter",
4056 "labels": ["Axis display", "Value display/formatting"],
4057 "type": "function(date, granularity)",
4058 "description": "Function to call to format values along the x axis."
4061 "snippet": "function(e, date){<br> alert(date);<br>}",
4063 "labels": ["Callbacks"],
4064 "type": "function(e, date)",
4065 "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."
4067 "yAxisLabelFormatter": {
4068 "default": "yValueFormatter",
4069 "labels": ["Axis display", "Value display/formatting"],
4070 "type": "function(x)",
4071 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4074 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4075 "labels": ["Legend"],
4076 "type": "array<string>",
4077 "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."
4080 "default": "Full range of the input is shown",
4081 "labels": ["Axis display"],
4082 "type": "Array of two Dates or numbers",
4083 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4084 "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."
4088 "labels": ["Interactive Elements", "Rolling Averages"],
4090 "description": "If the rolling average period text box should be shown."
4094 "labels": ["Error Bars"],
4096 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4100 "labels": ["CSV parsing", "Error Bars"],
4102 "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."
4106 "labels": ["Data Series Colors"],
4107 "type": "float (0.0 - 1.0)",
4108 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4112 "labels": ["CSV parsing", "Error Bars"],
4114 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4116 "displayAnnotations": {
4118 "labels": ["Annotations"],
4120 "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."
4124 "labels": ["Axis Display?"],
4127 "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."
4131 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4132 // JSON. This assumption cannot be checked in JS, but it will be checked when
4133 // documentation is generated by the generate-documentation.py script.
4135 // Do a quick sanity check on the options reference.
4137 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4138 var flds
= ['type', 'default', 'description'];
4144 'Data Line display',
4145 'Data Series Colors',
4148 'Interactive Elements',
4152 'Value display/formatting'
4155 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4157 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4158 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4159 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4160 for (var i
= 0; i
< flds
.length
; i
++) {
4161 if (!op
.hasOwnProperty(flds
[i
])) {
4162 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4163 } else if (typeof(op
[flds
[i
]]) != 'string') {
4164 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4167 var labels
= op
['labels'];
4168 if (typeof(labels
) !== 'object') {
4169 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4170 for (var i
= 0; i
< labels
.length
; i
++) {
4171 if (!cats
.hasOwnProperty(labels
[i
])) {
4172 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4173 '", which is invalid.');
4179 // </REMOVE_FOR_COMBINED
>