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,
193 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
196 // Various logging levels.
202 // Directions for panning and zooming. Use bit operations when combined
203 // values are possible.
204 Dygraph
.HORIZONTAL
= 1;
205 Dygraph
.VERTICAL
= 2;
207 // Used for initializing annotation CSS rules only once.
208 Dygraph
.addedAnnotationCSS
= false;
210 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
211 // Labels is no longer a constructor parameter, since it's typically set
212 // directly from the data source. It also conains a name for the x-axis,
213 // which the previous constructor form did not.
214 if (labels
!= null) {
215 var new_labels
= ["Date"];
216 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
217 Dygraph
.update(attrs
, { 'labels': new_labels
});
219 this.__init__(div
, file
, attrs
);
223 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
224 * and context <canvas> inside of it. See the constructor for details
226 * @param {Element} div the Element to render the graph into.
227 * @param {String | Function} file Source data
228 * @param {Object} attrs Miscellaneous other options
231 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
232 // Hack for IE: if we're using excanvas and the document hasn't finished
233 // loading yet (and hence may not have initialized whatever it needs to
234 // initialize), then keep calling this routine periodically until it has.
235 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
236 typeof(G_vmlCanvasManager
) != 'undefined' &&
237 document
.readyState
!= 'complete') {
239 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
242 // Support two-argument constructor
243 if (attrs
== null) { attrs
= {}; }
245 // Copy the important bits into the object
246 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
249 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
250 this.previousVerticalX_
= -1;
251 this.fractions_
= attrs
.fractions
|| false;
252 this.dateWindow_
= attrs
.dateWindow
|| null;
254 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
255 this.is_initial_draw_
= true;
256 this.annotations_
= [];
258 // Number of digits to use when labeling the x (if numeric) and y axis
260 this.numXDigits_
= 2;
261 this.numYDigits_
= 2;
263 // When labeling x (if numeric) or y values in the legend, there are
264 // numDigits + numExtraDigits of precision used. For axes labels with N
265 // digits of precision, the data should be displayed with at least N+1 digits
266 // of precision. The reason for this is to divide each interval between
267 // successive ticks into tenths (for 1) or hundredths (for 2), etc. For
268 // example, if the labels are [0, 1, 2], we want data to be displayed as
270 this.numExtraDigits_
= 1;
272 // Clear the div. This ensure that, if multiple dygraphs are passed the same
273 // div, then only one will be drawn.
276 // If the div isn't already sized then inherit from our attrs or
277 // give it a default size.
278 if (div
.style
.width
== '') {
279 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
281 if (div
.style
.height
== '') {
282 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
284 this.width_
= parseInt(div
.style
.width
, 10);
285 this.height_
= parseInt(div
.style
.height
, 10);
286 // The div might have been specified as percent of the current window size,
287 // convert that to an appropriate number of pixels.
288 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
289 this.width_
= div
.offsetWidth
;
291 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
292 this.height_
= div
.offsetHeight
;
295 if (this.width_
== 0) {
296 this.error("dygraph has zero width. Please specify a width in pixels.");
298 if (this.height_
== 0) {
299 this.error("dygraph has zero height. Please specify a height in pixels.");
302 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
303 if (attrs
['stackedGraph']) {
304 attrs
['fillGraph'] = true;
305 // TODO(nikhilk): Add any other stackedGraph checks here.
308 // Dygraphs has many options, some of which interact with one another.
309 // To keep track of everything, we maintain two sets of options:
311 // this.user_attrs_ only options explicitly set by the user.
312 // this.attrs_ defaults, options derived from user_attrs_, data.
314 // Options are then accessed this.attr_('attr'), which first looks at
315 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
316 // defaults without overriding behavior that the user specifically asks for.
317 this.user_attrs_
= {};
318 Dygraph
.update(this.user_attrs_
, attrs
);
321 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
323 this.boundaryIds_
= [];
325 // Make a note of whether labels will be pulled from the CSV file.
326 this.labelsFromCSV_
= (this.attr_("labels") == null);
328 // Create the containing DIV and other interactive elements
329 this.createInterface_();
334 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
336 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
337 this.user_attrs_
[seriesName
] != null &&
338 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
339 return this.user_attrs_
[seriesName
][name
];
340 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
341 return this.user_attrs_
[name
];
342 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
343 return this.attrs_
[name
];
349 // TODO(danvk): any way I can get the line numbers to be this.warn call?
350 Dygraph
.prototype.log
= function(severity
, message
) {
351 if (typeof(console
) != 'undefined') {
354 console
.debug('dygraphs: ' + message
);
357 console
.info('dygraphs: ' + message
);
359 case Dygraph
.WARNING
:
360 console
.warn('dygraphs: ' + message
);
363 console
.error('dygraphs: ' + message
);
368 Dygraph
.prototype.info
= function(message
) {
369 this.log(Dygraph
.INFO
, message
);
371 Dygraph
.prototype.warn
= function(message
) {
372 this.log(Dygraph
.WARNING
, message
);
374 Dygraph
.prototype.error
= function(message
) {
375 this.log(Dygraph
.ERROR
, message
);
379 * Returns the current rolling period, as set by the user or an option.
380 * @return {Number} The number of points in the rolling window
382 Dygraph
.prototype.rollPeriod
= function() {
383 return this.rollPeriod_
;
387 * Returns the currently-visible x-range. This can be affected by zooming,
388 * panning or a call to updateOptions.
389 * Returns a two-element array: [left, right].
390 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
392 Dygraph
.prototype.xAxisRange
= function() {
393 if (this.dateWindow_
) return this.dateWindow_
;
395 // The entire chart is visible.
396 var left
= this.rawData_
[0][0];
397 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
398 return [left
, right
];
402 * Returns the currently-visible y-range for an axis. This can be affected by
403 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
404 * called with no arguments, returns the range of the first axis.
405 * Returns a two-element array: [bottom, top].
407 Dygraph
.prototype.yAxisRange
= function(idx
) {
408 if (typeof(idx
) == "undefined") idx
= 0;
409 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
410 return [ this.axes_
[idx
].computedValueRange
[0],
411 this.axes_
[idx
].computedValueRange
[1] ];
415 * Returns the currently-visible y-ranges for each axis. This can be affected by
416 * zooming, panning, calls to updateOptions, etc.
417 * Returns an array of [bottom, top] pairs, one for each y-axis.
419 Dygraph
.prototype.yAxisRanges
= function() {
421 for (var i
= 0; i
< this.axes_
.length
; i
++) {
422 ret
.push(this.yAxisRange(i
));
427 // TODO(danvk): use these functions throughout dygraphs.
429 * Convert from data coordinates to canvas/div X/Y coordinates.
430 * If specified, do this conversion for the coordinate system of a particular
431 * axis. Uses the first axis by default.
432 * Returns a two-element array: [X, Y]
434 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
435 * instead of toDomCoords(null, y, axis).
437 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
438 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
442 * Convert from data x coordinates to canvas/div X coordinate.
443 * If specified, do this conversion for the coordinate system of a particular
445 * Returns a single value or null if x is null.
447 Dygraph
.prototype.toDomXCoord
= function(x
) {
452 var area
= this.plotter_
.area
;
453 var xRange
= this.xAxisRange();
454 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
458 * Convert from data x coordinates to canvas/div Y coordinate and optional
459 * axis. Uses the first axis by default.
461 * returns a single value or null if y is null.
463 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
464 var pct
= this.toPercentYCoord(y
, axis
);
469 var area
= this.plotter_
.area
;
470 return area
.y
+ pct
* area
.h
;
474 * Convert from canvas/div coords to data coordinates.
475 * If specified, do this conversion for the coordinate system of a particular
476 * axis. Uses the first axis by default.
477 * Returns a two-element array: [X, Y].
479 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
480 * instead of toDataCoords(null, y, axis).
482 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
483 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
487 * Convert from canvas/div x coordinate to data coordinate.
489 * If x is null, this returns null.
491 Dygraph
.prototype.toDataXCoord
= function(x
) {
496 var area
= this.plotter_
.area
;
497 var xRange
= this.xAxisRange();
498 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
502 * Convert from canvas/div y coord to value.
504 * If y is null, this returns null.
505 * if axis is null, this uses the first axis.
507 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
512 var area
= this.plotter_
.area
;
513 var yRange
= this.yAxisRange(axis
);
515 if (typeof(axis
) == "undefined") axis
= 0;
516 if (!this.axes_
[axis
].logscale
) {
517 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
519 // Computing the inverse of toDomCoord.
520 var pct
= (y
- area
.y
) / area
.h
522 // Computing the inverse of toPercentYCoord. The function was arrived at with
523 // the following steps:
525 // Original calcuation:
526 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
528 // Move denominator to both sides:
529 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
531 // subtract logr1, and take the negative value.
532 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
534 // Swap both sides of the equation, and we can compute the log of the
535 // return value. Which means we just need to use that as the exponent in
537 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
539 var logr1
= Dygraph
.log10(yRange
[1]);
540 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
541 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
547 * Converts a y for an axis to a percentage from the top to the
550 * If the coordinate represents a value visible on the canvas, then
551 * the value will be between 0 and 1, where 0 is the top of the canvas.
552 * However, this method will return values outside the range, as
553 * values can fall outside the canvas.
555 * If y is null, this returns null.
556 * if axis is null, this uses the first axis.
558 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
562 if (typeof(axis
) == "undefined") axis
= 0;
564 var area
= this.plotter_
.area
;
565 var yRange
= this.yAxisRange(axis
);
568 if (!this.axes_
[axis
].logscale
) {
569 // yrange[1] - y is unit distance from the bottom.
570 // yrange[1] - yrange[0] is the scale of the range.
571 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
572 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
574 var logr1
= Dygraph
.log10(yRange
[1]);
575 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
581 * Returns the number of columns (including the independent variable).
583 Dygraph
.prototype.numColumns
= function() {
584 return this.rawData_
[0].length
;
588 * Returns the number of rows (excluding any header/label row).
590 Dygraph
.prototype.numRows
= function() {
591 return this.rawData_
.length
;
595 * Returns the value in the given row and column. If the row and column exceed
596 * the bounds on the data, returns null. Also returns null if the value is
599 Dygraph
.prototype.getValue
= function(row
, col
) {
600 if (row
< 0 || row
> this.rawData_
.length
) return null;
601 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
603 return this.rawData_
[row
][col
];
606 Dygraph
.addEvent
= function(el
, evt
, fn
) {
607 var normed_fn
= function(e
) {
608 if (!e
) var e
= window
.event
;
611 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
612 el
.addEventListener(evt
, normed_fn
, false);
614 el
.attachEvent('on' + evt
, normed_fn
);
619 // Based on the article at
620 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
621 Dygraph
.cancelEvent
= function(e
) {
622 e
= e
? e
: window
.event
;
623 if (e
.stopPropagation
) {
626 if (e
.preventDefault
) {
629 e
.cancelBubble
= true;
631 e
.returnValue
= false;
637 * Generates interface elements for the Dygraph: a containing div, a div to
638 * display the current point, and a textbox to adjust the rolling average
639 * period. Also creates the Renderer/Layout elements.
642 Dygraph
.prototype.createInterface_
= function() {
643 // Create the all-enclosing graph div
644 var enclosing
= this.maindiv_
;
646 this.graphDiv
= document
.createElement("div");
647 this.graphDiv
.style
.width
= this.width_
+ "px";
648 this.graphDiv
.style
.height
= this.height_
+ "px";
649 enclosing
.appendChild(this.graphDiv
);
651 // Create the canvas for interactive parts of the chart.
652 this.canvas_
= Dygraph
.createCanvas();
653 this.canvas_
.style
.position
= "absolute";
654 this.canvas_
.width
= this.width_
;
655 this.canvas_
.height
= this.height_
;
656 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
657 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
659 // ... and for static parts of the chart.
660 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
662 // The interactive parts of the graph are drawn on top of the chart.
663 this.graphDiv
.appendChild(this.hidden_
);
664 this.graphDiv
.appendChild(this.canvas_
);
665 this.mouseEventElement_
= this.canvas_
;
668 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
669 dygraph
.mouseMove_(e
);
671 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
672 dygraph
.mouseOut_(e
);
675 // Create the grapher
676 // TODO(danvk): why does the Layout need its own set of options?
677 this.layoutOptions_
= { 'xOriginIsZero': false };
678 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
679 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
680 Dygraph
.update(this.layoutOptions_
, {
681 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
683 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
685 // TODO(danvk): why does the Renderer need its own set of options?
686 this.renderOptions_
= { colorScheme
: this.colors_
,
688 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
689 Dygraph
.update(this.renderOptions_
, this.attrs_
);
690 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
692 this.createStatusMessage_();
693 this.createDragInterface_();
697 * Detach DOM elements in the dygraph and null out all data references.
698 * Calling this when you're done with a dygraph can dramatically reduce memory
699 * usage. See, e.g., the tests/perf.html example.
701 Dygraph
.prototype.destroy
= function() {
702 var removeRecursive
= function(node
) {
703 while (node
.hasChildNodes()) {
704 removeRecursive(node
.firstChild
);
705 node
.removeChild(node
.firstChild
);
708 removeRecursive(this.maindiv_
);
710 var nullOut
= function(obj
) {
712 if (typeof(obj
[n
]) === 'object') {
718 // These may not all be necessary, but it can't hurt...
719 nullOut(this.layout_
);
720 nullOut(this.plotter_
);
725 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
726 * this particular canvas. All Dygraph work is done on this.canvas_.
727 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
728 * @return {Object} The newly-created canvas
731 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
732 var h
= Dygraph
.createCanvas();
733 h
.style
.position
= "absolute";
734 // TODO(danvk): h should be offset from canvas. canvas needs to include
735 // some extra area to make it easier to zoom in on the far left and far
736 // right. h needs to be precisely the plot area, so that clipping occurs.
737 h
.style
.top
= canvas
.style
.top
;
738 h
.style
.left
= canvas
.style
.left
;
739 h
.width
= this.width_
;
740 h
.height
= this.height_
;
741 h
.style
.width
= this.width_
+ "px"; // for IE
742 h
.style
.height
= this.height_
+ "px"; // for IE
746 // Taken from MochiKit.Color
747 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
751 if (saturation
=== 0) {
756 var i
= Math
.floor(hue
* 6);
757 var f
= (hue
* 6) - i
;
758 var p
= value
* (1 - saturation
);
759 var q
= value
* (1 - (saturation
* f
));
760 var t
= value
* (1 - (saturation
* (1 - f
)));
762 case 1: red
= q
; green
= value
; blue
= p
; break;
763 case 2: red
= p
; green
= value
; blue
= t
; break;
764 case 3: red
= p
; green
= q
; blue
= value
; break;
765 case 4: red
= t
; green
= p
; blue
= value
; break;
766 case 5: red
= value
; green
= p
; blue
= q
; break;
767 case 6: // fall through
768 case 0: red
= value
; green
= t
; blue
= p
; break;
771 red
= Math
.floor(255 * red
+ 0.5);
772 green
= Math
.floor(255 * green
+ 0.5);
773 blue
= Math
.floor(255 * blue
+ 0.5);
774 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
779 * Generate a set of distinct colors for the data series. This is done with a
780 * color wheel. Saturation/Value are customizable, and the hue is
781 * equally-spaced around the color wheel. If a custom set of colors is
782 * specified, that is used instead.
785 Dygraph
.prototype.setColors_
= function() {
786 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
787 // away with this.renderOptions_.
788 var num
= this.attr_("labels").length
- 1;
790 var colors
= this.attr_('colors');
792 var sat
= this.attr_('colorSaturation') || 1.0;
793 var val
= this.attr_('colorValue') || 0.5;
794 var half
= Math
.ceil(num
/ 2);
795 for (var i
= 1; i
<= num
; i
++) {
796 if (!this.visibility()[i
-1]) continue;
797 // alternate colors for high contrast.
798 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
799 var hue
= (1.0 * idx
/ (1 + num
));
800 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
803 for (var i
= 0; i
< num
; i
++) {
804 if (!this.visibility()[i
]) continue;
805 var colorStr
= colors
[i
% colors
.length
];
806 this.colors_
.push(colorStr
);
810 // TODO(danvk): update this w/r
/t/ the
new options system
.
811 this.renderOptions_
.colorScheme
= this.colors_
;
812 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
813 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
814 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
818 * Return the list of colors. This is either the list of colors passed in the
819 * attributes, or the autogenerated list of rgb(r,g,b) strings.
820 * @return {Array<string>} The list of colors.
822 Dygraph
.prototype.getColors
= function() {
826 // The following functions are from quirksmode.org with a modification for Safari from
827 // http://blog.firetree.net/2005/07/04/javascript-find-position/
828 // http://www.quirksmode.org/js
/findpos
.html
829 Dygraph
.findPosX
= function(obj
) {
834 curleft
+= obj
.offsetLeft
;
835 if(!obj
.offsetParent
)
837 obj
= obj
.offsetParent
;
844 Dygraph
.findPosY
= function(obj
) {
849 curtop
+= obj
.offsetTop
;
850 if(!obj
.offsetParent
)
852 obj
= obj
.offsetParent
;
862 * Create the div that contains information on the selected point(s)
863 * This goes in the top right of the canvas, unless an external div has already
867 Dygraph
.prototype.createStatusMessage_
= function() {
868 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
869 if (userLabelsDiv
&& null != userLabelsDiv
870 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
871 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
873 if (!this.attr_("labelsDiv")) {
874 var divWidth
= this.attr_('labelsDivWidth');
876 "position": "absolute",
879 "width": divWidth
+ "px",
881 "left": (this.width_
- divWidth
- 2) + "px",
882 "background": "white",
884 "overflow": "hidden"};
885 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
886 var div
= document
.createElement("div");
887 for (var name
in messagestyle
) {
888 if (messagestyle
.hasOwnProperty(name
)) {
889 div
.style
[name
] = messagestyle
[name
];
892 this.graphDiv
.appendChild(div
);
893 this.attrs_
.labelsDiv
= div
;
898 * Position the labels div so that its right edge is flush with the right edge
899 * of the charting area.
901 Dygraph
.prototype.positionLabelsDiv_
= function() {
902 // Don't touch a user-specified labelsDiv.
903 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
905 var area
= this.plotter_
.area
;
906 var div
= this.attr_("labelsDiv");
907 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
911 * Create the text box to adjust the averaging period
914 Dygraph
.prototype.createRollInterface_
= function() {
915 // Create a roller if one doesn't exist already.
917 this.roller_
= document
.createElement("input");
918 this.roller_
.type
= "text";
919 this.roller_
.style
.display
= "none";
920 this.graphDiv
.appendChild(this.roller_
);
923 var display
= this.attr_('showRoller') ? 'block' : 'none';
925 var textAttr
= { "position": "absolute",
927 "top": (this.plotter_
.area
.h
- 25) + "px",
928 "left": (this.plotter_
.area
.x
+ 1) + "px",
931 this.roller_
.size
= "2";
932 this.roller_
.value
= this.rollPeriod_
;
933 for (var name
in textAttr
) {
934 if (textAttr
.hasOwnProperty(name
)) {
935 this.roller_
.style
[name
] = textAttr
[name
];
940 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
943 // These functions are taken from MochiKit.Signal
944 Dygraph
.pageX
= function(e
) {
946 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
949 var b
= document
.body
;
951 (de
.scrollLeft
|| b
.scrollLeft
) -
952 (de
.clientLeft
|| 0);
956 Dygraph
.pageY
= function(e
) {
958 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
961 var b
= document
.body
;
963 (de
.scrollTop
|| b
.scrollTop
) -
968 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
969 return Dygraph
.pageX(e
) - context
.px
972 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
973 return Dygraph
.pageY(e
) - context
.py
976 // Called in response to an interaction model operation that
977 // should start the default panning behavior.
979 // It's used in the default callback for "mousedown" operations.
980 // Custom interaction model builders can use it to provide the default
983 Dygraph
.startPan
= function(event
, g
, context
) {
984 context
.isPanning
= true;
985 var xRange
= g
.xAxisRange();
986 context
.dateRange
= xRange
[1] - xRange
[0];
987 context
.initialLeftmostDate
= xRange
[0];
988 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
990 // Record the range of each y-axis at the start of the drag.
991 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
992 context
.is2DPan
= false;
993 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
994 var axis
= g
.axes_
[i
];
995 var yRange
= g
.yAxisRange(i
);
996 // TODO(konigsberg): These values should be in |context|.
997 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
999 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1000 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1002 axis
.initialTopValue
= yRange
[1];
1003 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1005 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1007 // While calculating axes, set 2dpan.
1008 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1012 // Called in response to an interaction model operation that
1013 // responds to an event that pans the view.
1015 // It's used in the default callback for "mousemove" operations.
1016 // Custom interaction model builders can use it to provide the default
1017 // panning behavior.
1019 Dygraph
.movePan
= function(event
, g
, context
) {
1020 context
.dragEndX
= g
.dragGetX_(event
, context
);
1021 context
.dragEndY
= g
.dragGetY_(event
, context
);
1023 var minDate
= context
.initialLeftmostDate
-
1024 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1025 var maxDate
= minDate
+ context
.dateRange
;
1026 g
.dateWindow_
= [minDate
, maxDate
];
1028 // y-axis scaling is automatic unless this is a full 2D pan.
1029 if (context
.is2DPan
) {
1030 // Adjust each axis appropriately.
1031 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1032 var axis
= g
.axes_
[i
];
1034 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1035 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1037 // In log scale, maxValue and minValue are the logs of those values.
1038 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1039 var minValue
= maxValue
- axis
.dragValueRange
;
1040 if (axis
.logscale
) {
1041 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1042 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1044 axis
.valueWindow
= [ minValue
, maxValue
];
1052 // Called in response to an interaction model operation that
1053 // responds to an event that ends panning.
1055 // It's used in the default callback for "mouseup" operations.
1056 // Custom interaction model builders can use it to provide the default
1057 // panning behavior.
1059 Dygraph
.endPan
= function(event
, g
, context
) {
1060 // TODO(konigsberg): Clear the context data from the axis.
1061 // TODO(konigsberg): mouseup should just delete the
1062 // context object, and mousedown should create a new one.
1063 context
.isPanning
= false;
1064 context
.is2DPan
= false;
1065 context
.initialLeftmostDate
= null;
1066 context
.dateRange
= null;
1067 context
.valueRange
= null;
1070 // Called in response to an interaction model operation that
1071 // responds to an event that starts zooming.
1073 // It's used in the default callback for "mousedown" operations.
1074 // Custom interaction model builders can use it to provide the default
1075 // zooming behavior.
1077 Dygraph
.startZoom
= function(event
, g
, context
) {
1078 context
.isZooming
= true;
1081 // Called in response to an interaction model operation that
1082 // responds to an event that defines zoom boundaries.
1084 // It's used in the default callback for "mousemove" operations.
1085 // Custom interaction model builders can use it to provide the default
1086 // zooming behavior.
1088 Dygraph
.moveZoom
= function(event
, g
, context
) {
1089 context
.dragEndX
= g
.dragGetX_(event
, context
);
1090 context
.dragEndY
= g
.dragGetY_(event
, context
);
1092 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1093 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1095 // drag direction threshold for y axis is twice as large as x axis
1096 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1099 context
.dragDirection
,
1104 context
.prevDragDirection
,
1108 context
.prevEndX
= context
.dragEndX
;
1109 context
.prevEndY
= context
.dragEndY
;
1110 context
.prevDragDirection
= context
.dragDirection
;
1113 // Called in response to an interaction model operation that
1114 // responds to an event that performs a zoom based on previously defined
1117 // It's used in the default callback for "mouseup" operations.
1118 // Custom interaction model builders can use it to provide the default
1119 // zooming behavior.
1121 Dygraph
.endZoom
= function(event
, g
, context
) {
1122 context
.isZooming
= false;
1123 context
.dragEndX
= g
.dragGetX_(event
, context
);
1124 context
.dragEndY
= g
.dragGetY_(event
, context
);
1125 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1126 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1128 if (regionWidth
< 2 && regionHeight
< 2 &&
1129 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1130 // TODO(danvk): pass along more info about the points, e.g. 'x'
1131 if (g
.attr_('clickCallback') != null) {
1132 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1134 if (g
.attr_('pointClickCallback')) {
1135 // check if the click was on a particular point.
1136 var closestIdx
= -1;
1137 var closestDistance
= 0;
1138 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1139 var p
= g
.selPoints_
[i
];
1140 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1141 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1142 if (closestIdx
== -1 || distance
< closestDistance
) {
1143 closestDistance
= distance
;
1148 // Allow any click within two pixels of the dot.
1149 var radius
= g
.attr_('highlightCircleSize') + 2;
1150 if (closestDistance
<= 5 * 5) {
1151 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1156 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1157 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1158 Math
.max(context
.dragStartX
, context
.dragEndX
));
1159 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1160 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1161 Math
.max(context
.dragStartY
, context
.dragEndY
));
1163 g
.canvas_
.getContext("2d").clearRect(0, 0,
1167 context
.dragStartX
= null;
1168 context
.dragStartY
= null;
1171 Dygraph
.defaultInteractionModel
= {
1172 // Track the beginning of drag events
1173 mousedown
: function(event
, g
, context
) {
1174 context
.initializeMouseDown(event
, g
, context
);
1176 if (event
.altKey
|| event
.shiftKey
) {
1177 Dygraph
.startPan(event
, g
, context
);
1179 Dygraph
.startZoom(event
, g
, context
);
1183 // Draw zoom rectangles when the mouse is down and the user moves around
1184 mousemove
: function(event
, g
, context
) {
1185 if (context
.isZooming
) {
1186 Dygraph
.moveZoom(event
, g
, context
);
1187 } else if (context
.isPanning
) {
1188 Dygraph
.movePan(event
, g
, context
);
1192 mouseup
: function(event
, g
, context
) {
1193 if (context
.isZooming
) {
1194 Dygraph
.endZoom(event
, g
, context
);
1195 } else if (context
.isPanning
) {
1196 Dygraph
.endPan(event
, g
, context
);
1200 // Temporarily cancel the dragging event when the mouse leaves the graph
1201 mouseout
: function(event
, g
, context
) {
1202 if (context
.isZooming
) {
1203 context
.dragEndX
= null;
1204 context
.dragEndY
= null;
1208 // Disable zooming out if panning.
1209 dblclick
: function(event
, g
, context
) {
1210 if (event
.altKey
|| event
.shiftKey
) {
1213 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1214 // friendlier to public use.
1219 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1222 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1226 Dygraph
.prototype.createDragInterface_
= function() {
1228 // Tracks whether the mouse is down right now
1230 isPanning
: false, // is this drag part of a pan?
1231 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1236 dragDirection
: null,
1239 prevDragDirection
: null,
1241 // The value on the left side of the graph when a pan operation starts.
1242 initialLeftmostDate
: null,
1244 // The number of units each pixel spans. (This won't be valid for log
1246 xUnitsPerPixel
: null,
1248 // TODO(danvk): update this comment
1249 // The range in second/value units that the viewport encompasses during a
1250 // panning operation.
1253 // Utility function to convert page-wide coordinates to canvas coords
1257 initializeMouseDown
: function(event
, g
, context
) {
1258 // prevents mouse drags from selecting page text.
1259 if (event
.preventDefault
) {
1260 event
.preventDefault(); // Firefox, Chrome, etc.
1262 event
.returnValue
= false; // IE
1263 event
.cancelBubble
= true;
1266 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1267 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1268 context
.dragStartX
= g
.dragGetX_(event
, context
);
1269 context
.dragStartY
= g
.dragGetY_(event
, context
);
1273 var interactionModel
= this.attr_("interactionModel");
1275 // Self is the graph.
1278 // Function that binds the graph and context to the handler.
1279 var bindHandler
= function(handler
) {
1280 return function(event
) {
1281 handler(event
, self
, context
);
1285 for (var eventName
in interactionModel
) {
1286 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1287 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1288 bindHandler(interactionModel
[eventName
]));
1291 // If the user releases the mouse button during a drag, but not over the
1292 // canvas, then it doesn't count as a zooming action.
1293 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1294 if (context
.isZooming
|| context
.isPanning
) {
1295 context
.isZooming
= false;
1296 context
.dragStartX
= null;
1297 context
.dragStartY
= null;
1300 if (context
.isPanning
) {
1301 context
.isPanning
= false;
1302 context
.draggingDate
= null;
1303 context
.dateRange
= null;
1304 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1305 delete self
.axes_
[i
].draggingValue
;
1306 delete self
.axes_
[i
].dragValueRange
;
1314 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1315 * up any previous zoom rectangles that were drawn. This could be optimized to
1316 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1319 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1320 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1321 * @param {Number} startX The X position where the drag started, in canvas
1323 * @param {Number} endX The current X position of the drag, in canvas coords.
1324 * @param {Number} startY The Y position where the drag started, in canvas
1326 * @param {Number} endY The current Y position of the drag, in canvas coords.
1327 * @param {Number} prevDirection the value of direction on the previous call to
1328 * this function. Used to avoid excess redrawing
1329 * @param {Number} prevEndX The value of endX on the previous call to this
1330 * function. Used to avoid excess redrawing
1331 * @param {Number} prevEndY The value of endY on the previous call to this
1332 * function. Used to avoid excess redrawing
1335 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1336 endY
, prevDirection
, prevEndX
,
1338 var ctx
= this.canvas_
.getContext("2d");
1340 // Clean up from the previous rect if necessary
1341 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1342 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1343 Math
.abs(startX
- prevEndX
), this.height_
);
1344 } else if (prevDirection
== Dygraph
.VERTICAL
){
1345 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1346 this.width_
, Math
.abs(startY
- prevEndY
));
1349 // Draw a light-grey rectangle to show the new viewing area
1350 if (direction
== Dygraph
.HORIZONTAL
) {
1351 if (endX
&& startX
) {
1352 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1353 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1354 Math
.abs(endX
- startX
), this.height_
);
1357 if (direction
== Dygraph
.VERTICAL
) {
1358 if (endY
&& startY
) {
1359 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1360 ctx
.fillRect(0, Math
.min(startY
, endY
),
1361 this.width_
, Math
.abs(endY
- startY
));
1367 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1368 * the canvas. The exact zoom window may be slightly larger if there are no data
1369 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1370 * which accepts dates that match the raw data. This function redraws the graph.
1372 * @param {Number} lowX The leftmost pixel value that should be visible.
1373 * @param {Number} highX The rightmost pixel value that should be visible.
1376 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1377 // Find the earliest and latest dates contained in this canvasx range.
1378 // Convert the call to date ranges of the raw data.
1379 var minDate
= this.toDataXCoord(lowX
);
1380 var maxDate
= this.toDataXCoord(highX
);
1381 this.doZoomXDates_(minDate
, maxDate
);
1385 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1386 * method with doZoomX which accepts pixel coordinates. This function redraws
1389 * @param {Number} minDate The minimum date that should be visible.
1390 * @param {Number} maxDate The maximum date that should be visible.
1393 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1394 this.dateWindow_
= [minDate
, maxDate
];
1396 if (this.attr_("zoomCallback")) {
1397 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1402 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1403 * the canvas. This function redraws the graph.
1405 * @param {Number} lowY The topmost pixel value that should be visible.
1406 * @param {Number} highY The lowest pixel value that should be visible.
1409 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1410 // Find the highest and lowest values in pixel range for each axis.
1411 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1412 // This is because pixels increase as you go down on the screen, whereas data
1413 // coordinates increase as you go up the screen.
1414 var valueRanges
= [];
1415 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1416 var hi
= this.toDataYCoord(lowY
, i
);
1417 var low
= this.toDataYCoord(highY
, i
);
1418 this.axes_
[i
].valueWindow
= [low
, hi
];
1419 valueRanges
.push([low
, hi
]);
1423 if (this.attr_("zoomCallback")) {
1424 var xRange
= this.xAxisRange();
1425 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1430 * Reset the zoom to the original view coordinates. This is the same as
1431 * double-clicking on the graph.
1435 Dygraph
.prototype.doUnzoom_
= function() {
1437 if (this.dateWindow_
!= null) {
1439 this.dateWindow_
= null;
1442 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1443 if (this.axes_
[i
].valueWindow
!= null) {
1445 delete this.axes_
[i
].valueWindow
;
1450 // Putting the drawing operation before the callback because it resets
1453 if (this.attr_("zoomCallback")) {
1454 var minDate
= this.rawData_
[0][0];
1455 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1456 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1462 * When the mouse moves in the canvas, display information about a nearby data
1463 * point and draw dots over those points in the data series. This function
1464 * takes care of cleanup of previously-drawn dots.
1465 * @param {Object} event The mousemove event from the browser.
1468 Dygraph
.prototype.mouseMove_
= function(event
) {
1469 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1470 var points
= this.layout_
.points
;
1475 // Loop through all the points and find the date nearest to our current
1477 var minDist
= 1e+100;
1479 for (var i
= 0; i
< points
.length
; i
++) {
1480 var point
= points
[i
];
1481 if (point
== null) continue;
1482 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1483 if (dist
> minDist
) continue;
1487 if (idx
>= 0) lastx
= points
[idx
].xval
;
1489 // Extract the points we've selected
1490 this.selPoints_
= [];
1491 var l
= points
.length
;
1492 if (!this.attr_("stackedGraph")) {
1493 for (var i
= 0; i
< l
; i
++) {
1494 if (points
[i
].xval
== lastx
) {
1495 this.selPoints_
.push(points
[i
]);
1499 // Need to 'unstack' points starting from the bottom
1500 var cumulative_sum
= 0;
1501 for (var i
= l
- 1; i
>= 0; i
--) {
1502 if (points
[i
].xval
== lastx
) {
1503 var p
= {}; // Clone the point since we modify it
1504 for (var k
in points
[i
]) {
1505 p
[k
] = points
[i
][k
];
1507 p
.yval
-= cumulative_sum
;
1508 cumulative_sum
+= p
.yval
;
1509 this.selPoints_
.push(p
);
1512 this.selPoints_
.reverse();
1515 if (this.attr_("highlightCallback")) {
1516 var px
= this.lastx_
;
1517 if (px
!== null && lastx
!= px
) {
1518 // only fire if the selected point has changed.
1519 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1523 // Save last x position for callbacks.
1524 this.lastx_
= lastx
;
1526 this.updateSelection_();
1530 * Transforms layout_.points index into data row number.
1531 * @param int layout_.points index
1532 * @return int row number, or -1 if none could be found.
1535 Dygraph
.prototype.idxToRow_
= function(idx
) {
1536 if (idx
< 0) return -1;
1538 for (var i
in this.layout_
.datasets
) {
1539 if (idx
< this.layout_
.datasets
[i
].length
) {
1540 return this.boundaryIds_
[0][0]+idx
;
1542 idx
-= this.layout_
.datasets
[i
].length
;
1548 * Draw dots over the selectied points in the data series. This function
1549 * takes care of cleanup of previously-drawn dots.
1552 Dygraph
.prototype.updateSelection_
= function() {
1553 // Clear the previously drawn vertical, if there is one
1554 var ctx
= this.canvas_
.getContext("2d");
1555 if (this.previousVerticalX_
>= 0) {
1556 // Determine the maximum highlight circle size.
1557 var maxCircleSize
= 0;
1558 var labels
= this.attr_('labels');
1559 for (var i
= 1; i
< labels
.length
; i
++) {
1560 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1561 if (r
> maxCircleSize
) maxCircleSize
= r
;
1563 var px
= this.previousVerticalX_
;
1564 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1565 2 * maxCircleSize
+ 2, this.height_
);
1568 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1570 if (this.selPoints_
.length
> 0) {
1571 var canvasx
= this.selPoints_
[0].canvasx
;
1573 // Set the status message to indicate the selected point(s)
1574 var replace
= this.attr_('xValueFormatter')(
1575 this.lastx_
, this.numXDigits_
+ this.numExtraDigits_
) + ":";
1576 var fmtFunc
= this.attr_('yValueFormatter');
1577 var clen
= this.colors_
.length
;
1579 if (this.attr_('showLabelsOnHighlight')) {
1580 // Set the status message to indicate the selected point(s)
1581 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1582 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1583 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1584 if (this.attr_("labelsSeparateLines")) {
1587 var point
= this.selPoints_
[i
];
1588 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1589 var yval
= fmtFunc(point
.yval
, this.numYDigits_
+ this.numExtraDigits_
);
1590 replace
+= " <b><font color='" + c
.toHex() + "'>"
1591 + point
.name
+ "</font></b>:"
1595 this.attr_("labelsDiv").innerHTML
= replace
;
1598 // Draw colored circles over the center of each selected point
1600 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1601 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1603 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1605 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1606 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1607 0, 2 * Math
.PI
, false);
1612 this.previousVerticalX_
= canvasx
;
1617 * Set manually set selected dots, and display information about them
1618 * @param int row number that should by highlighted
1619 * false value clears the selection
1622 Dygraph
.prototype.setSelection
= function(row
) {
1623 // Extract the points we've selected
1624 this.selPoints_
= [];
1627 if (row
!== false) {
1628 row
= row
-this.boundaryIds_
[0][0];
1631 if (row
!== false && row
>= 0) {
1632 for (var i
in this.layout_
.datasets
) {
1633 if (row
< this.layout_
.datasets
[i
].length
) {
1634 var point
= this.layout_
.points
[pos
+row
];
1636 if (this.attr_("stackedGraph")) {
1637 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1640 this.selPoints_
.push(point
);
1642 pos
+= this.layout_
.datasets
[i
].length
;
1646 if (this.selPoints_
.length
) {
1647 this.lastx_
= this.selPoints_
[0].xval
;
1648 this.updateSelection_();
1651 this.clearSelection();
1657 * The mouse has left the canvas. Clear out whatever artifacts remain
1658 * @param {Object} event the mouseout event from the browser.
1661 Dygraph
.prototype.mouseOut_
= function(event
) {
1662 if (this.attr_("unhighlightCallback")) {
1663 this.attr_("unhighlightCallback")(event
);
1666 if (this.attr_("hideOverlayOnMouseOut")) {
1667 this.clearSelection();
1672 * Remove all selection from the canvas
1675 Dygraph
.prototype.clearSelection
= function() {
1676 // Get rid of the overlay data
1677 var ctx
= this.canvas_
.getContext("2d");
1678 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1679 this.attr_("labelsDiv").innerHTML
= "";
1680 this.selPoints_
= [];
1685 * Returns the number of the currently selected row
1686 * @return int row number, of -1 if nothing is selected
1689 Dygraph
.prototype.getSelection
= function() {
1690 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1694 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1695 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1696 return row
+ this.boundaryIds_
[0][0];
1702 Dygraph
.zeropad
= function(x
) {
1703 if (x
< 10) return "0" + x
; else return "" + x
;
1707 * Return a string version of the hours, minutes and seconds portion of a date.
1708 * @param {Number} date The JavaScript date (ms since epoch)
1709 * @return {String} A time of the form "HH:MM:SS"
1712 Dygraph
.hmsString_
= function(date
) {
1713 var zeropad
= Dygraph
.zeropad
;
1714 var d
= new Date(date
);
1715 if (d
.getSeconds()) {
1716 return zeropad(d
.getHours()) + ":" +
1717 zeropad(d
.getMinutes()) + ":" +
1718 zeropad(d
.getSeconds());
1720 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1725 * Convert a JS date to a string appropriate to display on an axis that
1726 * is displaying values at the stated granularity.
1727 * @param {Date} date The date to format
1728 * @param {Number} granularity One of the Dygraph granularity constants
1729 * @return {String} The formatted date
1732 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1733 if (granularity
>= Dygraph
.DECADAL
) {
1734 return date
.strftime('%Y');
1735 } else if (granularity
>= Dygraph
.MONTHLY
) {
1736 return date
.strftime('%b %y');
1738 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1739 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1740 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1742 return Dygraph
.hmsString_(date
.getTime());
1748 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1749 * @param {Number} date The JavaScript date (ms since epoch)
1750 * @return {String} A date of the form "YYYY/MM/DD"
1753 Dygraph
.dateString_
= function(date
) {
1754 var zeropad
= Dygraph
.zeropad
;
1755 var d
= new Date(date
);
1758 var year
= "" + d
.getFullYear();
1759 // Get a 0 padded month string
1760 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1761 // Get a 0 padded day string
1762 var day
= zeropad(d
.getDate());
1765 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1766 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1768 return year
+ "/" + month + "/" + day
+ ret
;
1772 * Fires when there's data available to be graphed.
1773 * @param {String} data Raw CSV data to be plotted
1776 Dygraph
.prototype.loadedEvent_
= function(data
) {
1777 this.rawData_
= this.parseCSV_(data
);
1781 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1782 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1783 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1786 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1789 Dygraph
.prototype.addXTicks_
= function() {
1790 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1792 if (this.dateWindow_
) {
1793 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1795 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1798 var formatter
= this.attr_('xTicker');
1799 var ret
= formatter(range
[0], range
[1], this);
1802 if (ret
.ticks
!== undefined
) {
1803 // numericTicks() returns multiple values.
1805 this.numXDigits_
= ret
.numDigits
;
1810 this.layout_
.updateOptions({xTicks
: xTicks
});
1813 // Time granularity enumeration
1814 Dygraph
.SECONDLY
= 0;
1815 Dygraph
.TWO_SECONDLY
= 1;
1816 Dygraph
.FIVE_SECONDLY
= 2;
1817 Dygraph
.TEN_SECONDLY
= 3;
1818 Dygraph
.THIRTY_SECONDLY
= 4;
1819 Dygraph
.MINUTELY
= 5;
1820 Dygraph
.TWO_MINUTELY
= 6;
1821 Dygraph
.FIVE_MINUTELY
= 7;
1822 Dygraph
.TEN_MINUTELY
= 8;
1823 Dygraph
.THIRTY_MINUTELY
= 9;
1824 Dygraph
.HOURLY
= 10;
1825 Dygraph
.TWO_HOURLY
= 11;
1826 Dygraph
.SIX_HOURLY
= 12;
1828 Dygraph
.WEEKLY
= 14;
1829 Dygraph
.MONTHLY
= 15;
1830 Dygraph
.QUARTERLY
= 16;
1831 Dygraph
.BIANNUAL
= 17;
1832 Dygraph
.ANNUAL
= 18;
1833 Dygraph
.DECADAL
= 19;
1834 Dygraph
.CENTENNIAL
= 20;
1835 Dygraph
.NUM_GRANULARITIES
= 21;
1837 Dygraph
.SHORT_SPACINGS
= [];
1838 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1839 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1840 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1841 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1842 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1843 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1844 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1845 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1846 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1847 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1848 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1849 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1850 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1851 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1852 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1856 // If we used this time granularity, how many ticks would there be?
1857 // This is only an approximation, but it's generally good enough.
1859 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1860 if (granularity
< Dygraph
.MONTHLY
) {
1861 // Generate one tick mark for every fixed interval of time.
1862 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1863 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1865 var year_mod
= 1; // e.g. to only print one point every 10 years.
1866 var num_months
= 12;
1867 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1868 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1869 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1870 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1871 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1873 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1874 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1875 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1881 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1882 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1884 // Returns an array containing {v: millis, label: label} dictionaries.
1886 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1887 var formatter
= this.attr_("xAxisLabelFormatter");
1889 if (granularity
< Dygraph
.MONTHLY
) {
1890 // Generate one tick mark for every fixed interval of time.
1891 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1892 var format
= '%d%b'; // e.g. "1Jan"
1894 // Find a time less than start_time which occurs on a "nice" time boundary
1895 // for this granularity.
1896 var g
= spacing
/ 1000;
1897 var d
= new Date(start_time
);
1898 if (g
<= 60) { // seconds
1899 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1903 if (g
<= 60) { // minutes
1904 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1909 if (g
<= 24) { // days
1910 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1915 if (g
== 7) { // one week
1916 d
.setDate(d
.getDate() - d
.getDay());
1921 start_time
= d
.getTime();
1923 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1924 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1927 // Display a tick mark on the first of a set of months of each year.
1928 // Years get a tick mark iff y % year_mod == 0. This is useful for
1929 // displaying a tick mark once every 10 years, say, on long time scales.
1931 var year_mod
= 1; // e.g. to only print one point every 10 years.
1933 if (granularity
== Dygraph
.MONTHLY
) {
1934 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1935 } else if (granularity
== Dygraph
.QUARTERLY
) {
1936 months
= [ 0, 3, 6, 9 ];
1937 } else if (granularity
== Dygraph
.BIANNUAL
) {
1939 } else if (granularity
== Dygraph
.ANNUAL
) {
1941 } else if (granularity
== Dygraph
.DECADAL
) {
1944 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1948 this.warn("Span of dates is too long");
1951 var start_year
= new Date(start_time
).getFullYear();
1952 var end_year
= new Date(end_time
).getFullYear();
1953 var zeropad
= Dygraph
.zeropad
;
1954 for (var i
= start_year
; i
<= end_year
; i
++) {
1955 if (i
% year_mod
!= 0) continue;
1956 for (var j
= 0; j
< months
.length
; j
++) {
1957 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1958 var t
= Date
.parse(date_str
);
1959 if (t
< start_time
|| t
> end_time
) continue;
1960 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1970 * Add ticks to the x-axis based on a date range.
1971 * @param {Number} startDate Start of the date window (millis since epoch)
1972 * @param {Number} endDate End of the date window (millis since epoch)
1973 * @return {Array.<Object>} Array of {label, value} tuples.
1976 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1978 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1979 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1980 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1987 return self
.GetXAxis(startDate
, endDate
, chosen
);
1989 // TODO(danvk): signal error.
1993 // This is a list of human-friendly values at which to show tick marks on a log
1994 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
1995 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
1996 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
1997 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
1999 for (var power
= -39; power
<= 39; power
++) {
2000 var range
= Math
.pow(10, power
);
2001 for (var mult
= 1; mult
<= 9; mult
++) {
2002 var val
= range
* mult
;
2009 // val is the value to search for
2010 // arry is the value over which to search
2011 // if abs > 0, find the lowest entry greater than val
2012 // if abs < 0, find the highest entry less than val
2013 // if abs == 0, find the entry that equals val.
2014 // Currently does not work when val is outside the range of arry's values.
2015 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2016 if (low
== null || high
== null) {
2018 high
= arry
.length
- 1;
2026 var validIndex
= function(idx
) {
2027 return idx
>= 0 && idx
< arry
.length
;
2029 var mid
= parseInt((low
+ high
) / 2);
2030 var element
= arry
[mid
];
2031 if (element
== val
) {
2034 if (element
> val
) {
2036 // Accept if element > val, but also if prior element < val.
2038 if (validIndex(idx
) && arry
[idx
] < val
) {
2042 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2044 if (element
< val
) {
2046 // Accept if element < val, but also if prior element > val.
2048 if (validIndex(idx
) && arry
[idx
] > val
) {
2052 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2057 * Determine the number of significant figures in a Number up to the specified
2058 * precision. Note that there is no way to determine if a trailing '0' is
2059 * significant or not, so by convention we return 1 for all of the following
2060 * inputs: 1, 1.0, 1.00, 1.000 etc.
2061 * @param {Number} x The input value.
2062 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
2063 * Default and maximum allowed value is 13.
2064 * @return {Number} The number of significant figures which is >= 1.
2066 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
2067 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
2069 // Convert the number to its exponential notation form and work backwards,
2070 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
2071 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
2072 // the JavaScript interpreter handle the low level bits of the Number for us.
2073 var s
= x
.toExponential(precision
);
2074 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
2076 for (var i
= ePos
- 1; i
>= 0; i
--) {
2078 // Got to the decimal place. We'll call this 1 digit of precision because
2079 // we can't know for sure how many trailing 0s are significant.
2081 } else if (s
[i
] != '0') {
2082 // Found the first non-zero digit. Return the number of characters
2083 // except for the '.'.
2084 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
2088 // Occurs if toExponential() doesn't return a string containing 'e', which
2089 // should never happen.
2094 * Add ticks when the x axis has numbers on it (instead of dates)
2095 * TODO(konigsberg): Update comment.
2097 * @param {Number} minV minimum value
2098 * @param {Number} maxV maximum value
2100 * @param {function} attribute accessor function.
2101 * @return {Array.<Object>} Array of {label, value} tuples.
2104 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2105 var attr
= function(k
) {
2106 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2107 return self
.attr_(k
);
2112 for (var i
= 0; i
< vals
.length
; i
++) {
2113 ticks
[i
].push({v
: vals
[i
]});
2116 if (axis_props
&& attr("logscale")) {
2117 var pixelsPerTick
= attr('pixelsPerYLabel');
2118 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2119 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2120 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2121 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2126 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2128 // Count the number of tick values would appear, if we can get at least
2129 // nTicks / 4 accept them
.
2130 var lastDisplayed
= null;
2131 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2132 var axisId
= axis_props
.yAxisId
;
2133 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2134 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2135 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2136 var tick
= { v
: tickValue
};
2137 if (lastDisplayed
== null) {
2139 tickValue
: tickValue
,
2143 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2145 tickValue
: tickValue
,
2154 // Since we went in backwards order.
2159 // ticks.length won't be 0 if the log scale function finds values to insert.
2160 if (ticks
.length
== 0) {
2162 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2163 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2164 // The first spacing greater than pixelsPerYLabel is what we use.
2165 // TODO(danvk): version that works on a log scale.
2166 if (attr("labelsKMG2")) {
2167 var mults
= [1, 2, 4, 8];
2169 var mults
= [1, 2, 5];
2171 var scale
, low_val
, high_val
, nTicks
;
2172 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2173 var pixelsPerTick
= attr('pixelsPerYLabel');
2174 for (var i
= -10; i
< 50; i
++) {
2175 if (attr("labelsKMG2")) {
2176 var base_scale
= Math
.pow(16, i
);
2178 var base_scale
= Math
.pow(10, i
);
2180 for (var j
= 0; j
< mults
.length
; j
++) {
2181 scale
= base_scale
* mults
[j
];
2182 low_val
= Math
.floor(minV
/ scale
) * scale
;
2183 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2184 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2185 var spacing
= self
.height_
/ nTicks
;
2186 // wish I could break out of both loops at once...
2187 if (spacing
> pixelsPerTick
) break;
2189 if (spacing
> pixelsPerTick
) break;
2192 // Construct the set of ticks.
2193 // Allow reverse y-axis if it's explicitly requested.
2194 if (low_val
> high_val
) scale
*= -1;
2195 for (var i
= 0; i
< nTicks
; i
++) {
2196 var tickV
= low_val
+ i
* scale
;
2197 ticks
.push( {v
: tickV
} );
2202 // Add formatted labels to the ticks.
2205 if (attr("labelsKMB")) {
2207 k_labels
= [ "K", "M", "B", "T" ];
2209 if (attr("labelsKMG2")) {
2210 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2212 k_labels
= [ "k", "M", "G", "T" ];
2214 var formatter
= attr('yAxisLabelFormatter') ?
2215 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2217 // Determine the number of decimal places needed for the labels below by
2218 // taking the maximum number of significant figures for any label. We must
2219 // take the max because we can't tell if trailing 0s are significant.
2221 for (var i
= 0; i
< ticks
.length
; i
++) {
2222 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
2225 // Add labels to the ticks.
2226 for (var i
= 0; i
< ticks
.length
; i
++) {
2227 var tickV
= ticks
[i
].v
;
2228 var absTickV
= Math
.abs(tickV
);
2229 var label
= (formatter
!== undefined
) ?
2230 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
2231 if (k_labels
.length
> 0) {
2232 // Round up to an appropriate unit.
2234 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2235 if (absTickV
>= n
) {
2236 label
= (tickV
/ n
).toPrecision(numDigits
) + k_labels
[j
];
2240 ticks
[i
].label
= label
;
2243 return {ticks
: ticks
, numDigits
: numDigits
};
2246 // Computes the range of the data series (including confidence intervals).
2247 // series is either [ [x1, y1], [x2, y2], ... ] or
2248 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2249 // Returns [low, high]
2250 Dygraph
.prototype.extremeValues_
= function(series
) {
2251 var minY
= null, maxY
= null;
2253 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2255 // With custom bars, maxY is the max of the high values.
2256 for (var j
= 0; j
< series
.length
; j
++) {
2257 var y
= series
[j
][1][0];
2259 var low
= y
- series
[j
][1][1];
2260 var high
= y
+ series
[j
][1][2];
2261 if (low
> y
) low
= y
; // this can happen with custom bars,
2262 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2263 if (maxY
== null || high
> maxY
) {
2266 if (minY
== null || low
< minY
) {
2271 for (var j
= 0; j
< series
.length
; j
++) {
2272 var y
= series
[j
][1];
2273 if (y
=== null || isNaN(y
)) continue;
2274 if (maxY
== null || y
> maxY
) {
2277 if (minY
== null || y
< minY
) {
2283 return [minY
, maxY
];
2287 * This function is called once when the chart's data is changed or the options
2288 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2289 * idea is that values derived from the chart's data can be computed here,
2290 * rather than every time the chart is drawn. This includes things like the
2291 * number of axes, rolling averages, etc.
2293 Dygraph
.prototype.predraw_
= function() {
2294 // TODO(danvk): move more computations out of drawGraph_ and into here.
2295 this.computeYAxes_();
2297 // Create a new plotter.
2298 if (this.plotter_
) this.plotter_
.clear();
2299 this.plotter_
= new DygraphCanvasRenderer(this,
2300 this.hidden_
, this.layout_
,
2301 this.renderOptions_
);
2303 // The roller sits in the bottom left corner of the chart. We don't know where
2304 // this will be until the options are available, so it's positioned here.
2305 this.createRollInterface_();
2307 // Same thing applies for the labelsDiv. It's right edge should be flush with
2308 // the right edge of the charting area (which may not be the same as the right
2309 // edge of the div, if we have two y-axes.
2310 this.positionLabelsDiv_();
2312 // If the data or options have changed, then we'd better redraw.
2317 * Update the graph with new data. This method is called when the viewing area
2318 * has changed. If the underlying data or options have changed, predraw_ will
2319 * be called before drawGraph_ is called.
2322 Dygraph
.prototype.drawGraph_
= function() {
2323 var data
= this.rawData_
;
2325 // This is used to set the second parameter to drawCallback, below.
2326 var is_initial_draw
= this.is_initial_draw_
;
2327 this.is_initial_draw_
= false;
2329 var minY
= null, maxY
= null;
2330 this.layout_
.removeAllDatasets();
2332 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2334 // Loop over the fields (series). Go from the last to the first,
2335 // because if they're stacked that's how we accumulate the values.
2337 var cumulative_y
= []; // For stacked series.
2340 var extremes
= {}; // series name -> [low, high]
2342 // Loop over all fields and create datasets
2343 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2344 if (!this.visibility()[i
- 1]) continue;
2346 var seriesName
= this.attr_("labels")[i
];
2347 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2348 var logScale
= this.attr_('logscale', i
);
2351 for (var j
= 0; j
< data
.length
; j
++) {
2352 var date
= data
[j
][0];
2353 var point
= data
[j
][i
];
2355 // On the log scale, points less than zero do not exist.
2356 // This will create a gap in the chart. Note that this ignores
2357 // connectSeparatedPoints.
2361 series
.push([date
, point
]);
2363 if (point
!= null || !connectSeparatedPoints
) {
2364 series
.push([date
, point
]);
2369 // TODO(danvk): move this into predraw_. It's insane to do it here.
2370 series
= this.rollingAverage(series
, this.rollPeriod_
);
2372 // Prune down to the desired range, if necessary (for zooming)
2373 // Because there can be lines going to points outside of the visible area,
2374 // we actually prune to visible points, plus one on either side.
2375 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2376 if (this.dateWindow_
) {
2377 var low
= this.dateWindow_
[0];
2378 var high
= this.dateWindow_
[1];
2380 // TODO(danvk): do binary search instead of linear search.
2381 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2382 var firstIdx
= null, lastIdx
= null;
2383 for (var k
= 0; k
< series
.length
; k
++) {
2384 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2387 if (series
[k
][0] <= high
) {
2391 if (firstIdx
=== null) firstIdx
= 0;
2392 if (firstIdx
> 0) firstIdx
--;
2393 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2394 if (lastIdx
< series
.length
- 1) lastIdx
++;
2395 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2396 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2397 pruned
.push(series
[k
]);
2401 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2404 var seriesExtremes
= this.extremeValues_(series
);
2407 for (var j
=0; j
<series
.length
; j
++) {
2408 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2411 } else if (this.attr_("stackedGraph")) {
2412 var l
= series
.length
;
2414 for (var j
= 0; j
< l
; j
++) {
2415 // If one data set has a NaN, let all subsequent stacked
2416 // sets inherit the NaN -- only start at 0 for the first set.
2417 var x
= series
[j
][0];
2418 if (cumulative_y
[x
] === undefined
) {
2419 cumulative_y
[x
] = 0;
2422 actual_y
= series
[j
][1];
2423 cumulative_y
[x
] += actual_y
;
2425 series
[j
] = [x
, cumulative_y
[x
]]
2427 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2428 seriesExtremes
[1] = cumulative_y
[x
];
2430 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2431 seriesExtremes
[0] = cumulative_y
[x
];
2435 extremes
[seriesName
] = seriesExtremes
;
2437 datasets
[i
] = series
;
2440 for (var i
= 1; i
< datasets
.length
; i
++) {
2441 if (!this.visibility()[i
- 1]) continue;
2442 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2445 this.computeYAxisRanges_(extremes
);
2446 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2447 seriesToAxisMap
: this.seriesToAxisMap_
2452 // Tell PlotKit to use this new data and render itself
2453 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2454 this.layout_
.evaluateWithError();
2455 this.plotter_
.clear();
2456 this.plotter_
.render();
2457 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2458 this.canvas_
.height
);
2460 if (this.attr_("drawCallback") !== null) {
2461 this.attr_("drawCallback")(this, is_initial_draw
);
2466 * Determine properties of the y-axes which are independent of the data
2467 * currently being displayed. This includes things like the number of axes and
2468 * the style of the axes. It does not include the range of each axis and its
2470 * This fills in this.axes_ and this.seriesToAxisMap_.
2471 * axes_ = [ { options } ]
2472 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2473 * indices are into the axes_ array.
2475 Dygraph
.prototype.computeYAxes_
= function() {
2476 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2477 this.seriesToAxisMap_
= {};
2479 // Get a list of series names.
2480 var labels
= this.attr_("labels");
2482 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2484 // all options which could be applied per-axis:
2492 'axisLabelFontSize',
2497 // Copy global axis options over to the first axis.
2498 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2499 var k
= axisOptions
[i
];
2500 var v
= this.attr_(k
);
2501 if (v
) this.axes_
[0][k
] = v
;
2504 // Go through once and add all the axes.
2505 for (var seriesName
in series
) {
2506 if (!series
.hasOwnProperty(seriesName
)) continue;
2507 var axis
= this.attr_("axis", seriesName
);
2509 this.seriesToAxisMap_
[seriesName
] = 0;
2512 if (typeof(axis
) == 'object') {
2513 // Add a new axis, making a copy of its per-axis options.
2515 Dygraph
.update(opts
, this.axes_
[0]);
2516 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2517 var yAxisId
= this.axes_
.length
;
2518 opts
.yAxisId
= yAxisId
;
2520 Dygraph
.update(opts
, axis
);
2521 this.axes_
.push(opts
);
2522 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2526 // Go through one more time and assign series to an axis defined by another
2527 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2528 for (var seriesName
in series
) {
2529 if (!series
.hasOwnProperty(seriesName
)) continue;
2530 var axis
= this.attr_("axis", seriesName
);
2531 if (typeof(axis
) == 'string') {
2532 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2533 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2534 "series " + axis
+ ", which does not define its own axis.");
2537 var idx
= this.seriesToAxisMap_
[axis
];
2538 this.seriesToAxisMap_
[seriesName
] = idx
;
2542 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2543 // this last so that hiding the first series doesn't destroy the axis
2544 // properties of the primary axis.
2545 var seriesToAxisFiltered
= {};
2546 var vis
= this.visibility();
2547 for (var i
= 1; i
< labels
.length
; i
++) {
2549 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2551 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2555 * Returns the number of y-axes on the chart.
2556 * @return {Number} the number of axes.
2558 Dygraph
.prototype.numAxes
= function() {
2560 for (var series
in this.seriesToAxisMap_
) {
2561 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2562 var idx
= this.seriesToAxisMap_
[series
];
2563 if (idx
> last_axis
) last_axis
= idx
;
2565 return 1 + last_axis
;
2569 * Determine the value range and tick marks for each axis.
2570 * @param {Object} extremes A mapping from seriesName -> [low, high]
2571 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2573 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2574 // Build a map from axis number -> [list of series names]
2575 var seriesForAxis
= [];
2576 for (var series
in this.seriesToAxisMap_
) {
2577 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2578 var idx
= this.seriesToAxisMap_
[series
];
2579 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2580 seriesForAxis
[idx
].push(series
);
2583 // Compute extreme values, a span and tick marks for each axis.
2584 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2585 var axis
= this.axes_
[i
];
2586 if (axis
.valueWindow
) {
2587 // This is only set if the user has zoomed on the y-axis. It is never set
2588 // by a user. It takes precedence over axis.valueRange because, if you set
2589 // valueRange, you'd still expect to be able to pan.
2590 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2591 } else if (axis
.valueRange
) {
2592 // This is a user-set value range for this axis.
2593 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2595 // Calculate the extremes of extremes.
2596 var series
= seriesForAxis
[i
];
2597 var minY
= Infinity
; // extremes[series[0]][0];
2598 var maxY
= -Infinity
; // extremes[series[0]][1];
2599 for (var j
= 0; j
< series
.length
; j
++) {
2600 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2601 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2603 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2605 // Add some padding and round up to an integer to be human-friendly.
2606 var span
= maxY
- minY
;
2607 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2608 if (span
== 0) { span
= maxY
; }
2612 if (axis
.logscale
) {
2613 var maxAxisY
= maxY
+ 0.1 * span
;
2614 var minAxisY
= minY
;
2616 var maxAxisY
= maxY
+ 0.1 * span
;
2617 var minAxisY
= minY
- 0.1 * span
;
2619 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2620 if (!this.attr_("avoidMinZero")) {
2621 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2622 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2625 if (this.attr_("includeZero")) {
2626 if (maxY
< 0) maxAxisY
= 0;
2627 if (minY
> 0) minAxisY
= 0;
2631 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2634 // Add ticks. By default, all axes inherit the tick positions of the
2635 // primary axis. However, if an axis is specifically marked as having
2636 // independent ticks, then that is permissible as well.
2637 if (i
== 0 || axis
.independentTicks
) {
2639 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2640 axis
.computedValueRange
[1],
2643 axis
.ticks
= ret
.ticks
;
2644 this.numYDigits_
= ret
.numDigits
;
2646 var p_axis
= this.axes_
[0];
2647 var p_ticks
= p_axis
.ticks
;
2648 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2649 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2650 var tick_values
= [];
2651 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2652 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2653 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2654 tick_values
.push(y_val
);
2658 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2659 axis
.computedValueRange
[1],
2660 this, axis
, tick_values
);
2661 axis
.ticks
= ret
.ticks
;
2662 this.numYDigits_
= ret
.numDigits
;
2668 * Calculates the rolling average of a data set.
2669 * If originalData is [label, val], rolls the average of those.
2670 * If originalData is [label, [, it's interpreted as [value, stddev]
2671 * and the roll is returned in the same form, with appropriately reduced
2672 * stddev for each value.
2673 * Note that this is where fractional input (i.e. '5/10') is converted into
2675 * @param {Array} originalData The data in the appropriate format (see above)
2676 * @param {Number} rollPeriod The number of points over which to average the
2679 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2680 if (originalData
.length
< 2)
2681 return originalData
;
2682 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2683 var rollingData
= [];
2684 var sigma
= this.attr_("sigma");
2686 if (this.fractions_
) {
2688 var den
= 0; // numerator/denominator
2690 for (var i
= 0; i
< originalData
.length
; i
++) {
2691 num
+= originalData
[i
][1][0];
2692 den
+= originalData
[i
][1][1];
2693 if (i
- rollPeriod
>= 0) {
2694 num
-= originalData
[i
- rollPeriod
][1][0];
2695 den
-= originalData
[i
- rollPeriod
][1][1];
2698 var date
= originalData
[i
][0];
2699 var value
= den
? num
/ den
: 0.0;
2700 if (this.attr_("errorBars")) {
2701 if (this.wilsonInterval_
) {
2702 // For more details on this confidence interval, see:
2703 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2705 var p
= value
< 0 ? 0 : value
, n
= den
;
2706 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2707 var denom
= 1 + sigma
* sigma
/ den
;
2708 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2709 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2710 rollingData
[i
] = [date
,
2711 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2713 rollingData
[i
] = [date
, [0, 0, 0]];
2716 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2717 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2720 rollingData
[i
] = [date
, mult
* value
];
2723 } else if (this.attr_("customBars")) {
2728 for (var i
= 0; i
< originalData
.length
; i
++) {
2729 var data
= originalData
[i
][1];
2731 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2733 if (y
!= null && !isNaN(y
)) {
2739 if (i
- rollPeriod
>= 0) {
2740 var prev
= originalData
[i
- rollPeriod
];
2741 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2748 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2749 1.0 * (mid
- low
) / count
,
2750 1.0 * (high
- mid
) / count
]];
2753 // Calculate the rolling average for the first rollPeriod - 1 points where
2754 // there is not enough data to roll over the full number of points
2755 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2756 if (!this.attr_("errorBars")){
2757 if (rollPeriod
== 1) {
2758 return originalData
;
2761 for (var i
= 0; i
< originalData
.length
; i
++) {
2764 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2765 var y
= originalData
[j
][1];
2766 if (y
== null || isNaN(y
)) continue;
2768 sum
+= originalData
[j
][1];
2771 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2773 rollingData
[i
] = [originalData
[i
][0], null];
2778 for (var i
= 0; i
< originalData
.length
; i
++) {
2782 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2783 var y
= originalData
[j
][1][0];
2784 if (y
== null || isNaN(y
)) continue;
2786 sum
+= originalData
[j
][1][0];
2787 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2790 var stddev
= Math
.sqrt(variance
) / num_ok
;
2791 rollingData
[i
] = [originalData
[i
][0],
2792 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2794 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2804 * Parses a date, returning the number of milliseconds since epoch. This can be
2805 * passed in as an xValueParser in the Dygraph constructor.
2806 * TODO(danvk): enumerate formats that this understands.
2807 * @param {String} A date in YYYYMMDD format.
2808 * @return {Number} Milliseconds since epoch.
2811 Dygraph
.dateParser
= function(dateStr
, self
) {
2814 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2815 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2816 while (dateStrSlashed
.search("-") != -1) {
2817 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2819 d
= Date
.parse(dateStrSlashed
);
2820 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2821 // TODO(danvk): remove support for this format. It's confusing.
2822 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2823 + "/" + dateStr
.substr(6,2);
2824 d
= Date
.parse(dateStrSlashed
);
2826 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2827 // "2009/07/12 12:34:56"
2828 d
= Date
.parse(dateStr
);
2831 if (!d
|| isNaN(d
)) {
2832 self
.error("Couldn't parse " + dateStr
+ " as a date");
2838 * Detects the type of the str (date or numeric) and sets the various
2839 * formatting attributes in this.attrs_ based on this type.
2840 * @param {String} str An x value.
2843 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2845 if (str
.indexOf('-') > 0 ||
2846 str
.indexOf('/') >= 0 ||
2847 isNaN(parseFloat(str
))) {
2849 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2850 // TODO(danvk): remove support for this format.
2855 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2856 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2857 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2858 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2860 this.attrs_
.xValueFormatter
= this.attrs_
.xValueFormatter
;
2861 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2862 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2863 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2868 * Parses a string in a special csv format. We expect a csv file where each
2869 * line is a date point, and the first field in each line is the date string.
2870 * We also expect that all remaining fields represent series.
2871 * if the errorBars attribute is set, then interpret the fields as:
2872 * date, series1, stddev1, series2, stddev2, ...
2873 * @param {Array.<Object>} data See above.
2876 * @return Array.<Object> An array with one entry for each row. These entries
2877 * are an array of cells in that row. The first entry is the parsed x-value for
2878 * the row. The second, third, etc. are the y-values. These can take on one of
2879 * three forms, depending on the CSV and constructor parameters:
2881 * 2. [ value, stddev ]
2882 * 3. [ low value, center value, high value ]
2884 Dygraph
.prototype.parseCSV_
= function(data
) {
2886 var lines
= data
.split("\n");
2888 // Use the default delimiter or fall back to a tab if that makes sense.
2889 var delim
= this.attr_('delimiter');
2890 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2895 if (this.labelsFromCSV_
) {
2897 this.attrs_
.labels
= lines
[0].split(delim
);
2900 // Parse the x as a float or return null if it's not a number.
2901 var parseFloatOrNull
= function(x
) {
2902 var val
= parseFloat(x
);
2903 // isFinite() returns false for NaN and +/-Infinity
.
2904 return isFinite(val
) ? val
: null;
2908 var defaultParserSet
= false; // attempt to auto-detect x value type
2909 var expectedCols
= this.attr_("labels").length
;
2910 var outOfOrder
= false;
2911 for (var i
= start
; i
< lines
.length
; i
++) {
2912 var line
= lines
[i
];
2913 if (line
.length
== 0) continue; // skip blank lines
2914 if (line
[0] == '#') continue; // skip comment lines
2915 var inFields
= line
.split(delim
);
2916 if (inFields
.length
< 2) continue;
2919 if (!defaultParserSet
) {
2920 this.detectTypeFromString_(inFields
[0]);
2921 xParser
= this.attr_("xValueParser");
2922 defaultParserSet
= true;
2924 fields
[0] = xParser(inFields
[0], this);
2926 // If fractions are expected, parse the numbers as "A/B
"
2927 if (this.fractions_) {
2928 for (var j = 1; j < inFields.length; j++) {
2929 // TODO(danvk): figure out an appropriate way to flag parse errors.
2930 var vals = inFields[j].split("/");
2931 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2933 } else if (this.attr_("errorBars
")) {
2934 // If there are error bars, values are (value, stddev) pairs
2935 for (var j = 1; j < inFields.length; j += 2)
2936 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2937 parseFloatOrNull(inFields[j + 1])];
2938 } else if (this.attr_("customBars
")) {
2939 // Bars are a low;center;high tuple
2940 for (var j = 1; j < inFields.length; j++) {
2941 var vals = inFields[j].split(";");
2942 fields[j] = [ parseFloatOrNull(vals[0]),
2943 parseFloatOrNull(vals[1]),
2944 parseFloatOrNull(vals[2]) ];
2947 // Values are just numbers
2948 for (var j = 1; j < inFields.length; j++) {
2949 fields[j] = parseFloatOrNull(inFields[j]);
2952 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2957 if (fields.length != expectedCols) {
2958 this.error("Number of columns
in line
" + i + " (" + fields.length +
2959 ") does not agree
with number of
labels (" + expectedCols +
2965 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2966 ret.sort(function(a,b) { return a[0] - b[0] });
2973 * The user has provided their data as a pre-packaged JS array. If the x values
2974 * are numeric, this is the same as dygraphs' internal format. If the x values
2975 * are dates, we need to convert them from Date objects to ms since epoch.
2976 * @param {Array.<Object>} data
2977 * @return {Array.<Object>} data with numeric x values.
2979 Dygraph.prototype.parseArray_ = function(data) {
2980 // Peek at the first x value to see if it's numeric.
2981 if (data.length == 0) {
2982 this.error("Can
't plot empty data set");
2985 if (data[0].length == 0) {
2986 this.error("Data set cannot contain an empty row");
2990 if (this.attr_("labels") == null) {
2991 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2992 "in the options parameter");
2993 this.attrs_.labels = [ "X" ];
2994 for (var i = 1; i < data[0].length; i++) {
2995 this.attrs_.labels.push("Y" + i);
2999 if (Dygraph.isDateLike(data[0][0])) {
3000 // Some intelligent defaults for a date x-axis.
3001 this.attrs_.xValueFormatter = Dygraph.dateString_;
3002 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3003 this.attrs_.xTicker = Dygraph.dateTicker;
3005 // Assume they're all dates
.
3006 var parsedData
= Dygraph
.clone(data
);
3007 for (var i
= 0; i
< data
.length
; i
++) {
3008 if (parsedData
[i
].length
== 0) {
3009 this.error("Row " + (1 + i
) + " of data is empty");
3012 if (parsedData
[i
][0] == null
3013 || typeof(parsedData
[i
][0].getTime
) != 'function'
3014 || isNaN(parsedData
[i
][0].getTime())) {
3015 this.error("x value in row " + (1 + i
) + " is not a Date");
3018 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3022 // Some intelligent defaults for a numeric x-axis.
3023 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3024 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3030 * Parses a DataTable object from gviz.
3031 * The data is expected to have a first column that is either a date or a
3032 * number. All subsequent columns must be numbers. If there is a clear mismatch
3033 * between this.xValueParser_ and the type of the first column, it will be
3034 * fixed. Fills out rawData_.
3035 * @param {Array.<Object>} data See above.
3038 Dygraph
.prototype.parseDataTable_
= function(data
) {
3039 var cols
= data
.getNumberOfColumns();
3040 var rows
= data
.getNumberOfRows();
3042 var indepType
= data
.getColumnType(0);
3043 if (indepType
== 'date' || indepType
== 'datetime') {
3044 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3045 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3046 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3047 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3048 } else if (indepType
== 'number') {
3049 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3050 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3051 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3052 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3054 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3055 "column 1 of DataTable input (Got '" + indepType
+ "')");
3059 // Array of the column indices which contain data (and not annotations).
3061 var annotationCols
= {}; // data index -> [annotation cols]
3062 var hasAnnotations
= false;
3063 for (var i
= 1; i
< cols
; i
++) {
3064 var type
= data
.getColumnType(i
);
3065 if (type
== 'number') {
3067 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3068 // This is OK -- it's an annotation column.
3069 var dataIdx
= colIdx
[colIdx
.length
- 1];
3070 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3071 annotationCols
[dataIdx
] = [i
];
3073 annotationCols
[dataIdx
].push(i
);
3075 hasAnnotations
= true;
3077 this.error("Only 'number' is supported as a dependent type with Gviz." +
3078 " 'string' is only supported if displayAnnotations is true");
3082 // Read column labels
3083 // TODO(danvk): add support back for errorBars
3084 var labels
= [data
.getColumnLabel(0)];
3085 for (var i
= 0; i
< colIdx
.length
; i
++) {
3086 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3087 if (this.attr_("errorBars")) i
+= 1;
3089 this.attrs_
.labels
= labels
;
3090 cols
= labels
.length
;
3093 var outOfOrder
= false;
3094 var annotations
= [];
3095 for (var i
= 0; i
< rows
; i
++) {
3097 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3098 data
.getValue(i
, 0) === null) {
3099 this.warn("Ignoring row " + i
+
3100 " of DataTable because of undefined or null first column.");
3104 if (indepType
== 'date' || indepType
== 'datetime') {
3105 row
.push(data
.getValue(i
, 0).getTime());
3107 row
.push(data
.getValue(i
, 0));
3109 if (!this.attr_("errorBars")) {
3110 for (var j
= 0; j
< colIdx
.length
; j
++) {
3111 var col
= colIdx
[j
];
3112 row
.push(data
.getValue(i
, col
));
3113 if (hasAnnotations
&&
3114 annotationCols
.hasOwnProperty(col
) &&
3115 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3117 ann
.series
= data
.getColumnLabel(col
);
3119 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3121 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3122 if (k
) ann
.text
+= "\n";
3123 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3125 annotations
.push(ann
);
3129 for (var j
= 0; j
< cols
- 1; j
++) {
3130 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3133 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3137 // Strip out infinities, which give dygraphs problems later on.
3138 for (var j
= 0; j
< row
.length
; j
++) {
3139 if (!isFinite(row
[j
])) row
[j
] = null;
3145 this.warn("DataTable is out of order; order it correctly to speed loading.");
3146 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3148 this.rawData_
= ret
;
3150 if (annotations
.length
> 0) {
3151 this.setAnnotations(annotations
, true);
3155 // These functions are all based on MochiKit.
3156 Dygraph
.update
= function (self
, o
) {
3157 if (typeof(o
) != 'undefined' && o
!== null) {
3159 if (o
.hasOwnProperty(k
)) {
3167 Dygraph
.isArrayLike
= function (o
) {
3168 var typ
= typeof(o
);
3170 (typ
!= 'object' && !(typ
== 'function' &&
3171 typeof(o
.item
) == 'function')) ||
3173 typeof(o
.length
) != 'number' ||
3181 Dygraph
.isDateLike
= function (o
) {
3182 if (typeof(o
) != "object" || o
=== null ||
3183 typeof(o
.getTime
) != 'function') {
3189 Dygraph
.clone
= function(o
) {
3190 // TODO(danvk): figure out how MochiKit's version works
3192 for (var i
= 0; i
< o
.length
; i
++) {
3193 if (Dygraph
.isArrayLike(o
[i
])) {
3194 r
.push(Dygraph
.clone(o
[i
]));
3204 * Get the CSV data. If it's in a function, call that function. If it's in a
3205 * file, do an XMLHttpRequest to get it.
3208 Dygraph
.prototype.start_
= function() {
3209 if (typeof this.file_
== 'function') {
3210 // CSV string. Pretend we got it via XHR.
3211 this.loadedEvent_(this.file_());
3212 } else if (Dygraph
.isArrayLike(this.file_
)) {
3213 this.rawData_
= this.parseArray_(this.file_
);
3215 } else if (typeof this.file_
== 'object' &&
3216 typeof this.file_
.getColumnRange
== 'function') {
3217 // must be a DataTable from gviz.
3218 this.parseDataTable_(this.file_
);
3220 } else if (typeof this.file_
== 'string') {
3221 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3222 if (this.file_
.indexOf('\n') >= 0) {
3223 this.loadedEvent_(this.file_
);
3225 var req
= new XMLHttpRequest();
3227 req
.onreadystatechange
= function () {
3228 if (req
.readyState
== 4) {
3229 if (req
.status
== 200) {
3230 caller
.loadedEvent_(req
.responseText
);
3235 req
.open("GET", this.file_
, true);
3239 this.error("Unknown data format: " + (typeof this.file_
));
3244 * Changes various properties of the graph. These can include:
3246 * <li>file: changes the source data for the graph</li>
3247 * <li>errorBars: changes whether the data contains stddev</li>
3249 * @param {Object} attrs The new properties and values
3251 Dygraph
.prototype.updateOptions
= function(attrs
) {
3252 // TODO(danvk): this is a mess. Rethink this function.
3253 if ('rollPeriod' in attrs
) {
3254 this.rollPeriod_
= attrs
.rollPeriod
;
3256 if ('dateWindow' in attrs
) {
3257 this.dateWindow_
= attrs
.dateWindow
;
3260 // TODO(danvk): validate per-series options.
3265 // highlightCircleSize
3267 Dygraph
.update(this.user_attrs_
, attrs
);
3268 Dygraph
.update(this.renderOptions_
, attrs
);
3270 this.labelsFromCSV_
= (this.attr_("labels") == null);
3272 // TODO(danvk): this doesn't match the constructor logic
3273 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3274 if (attrs
['file']) {
3275 this.file_
= attrs
['file'];
3283 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3284 * containing div (which has presumably changed size since the dygraph was
3285 * instantiated. If the width/height are specified, the div will be resized.
3287 * This is far more efficient than destroying and re-instantiating a
3288 * Dygraph, since it doesn't have to reparse the underlying data.
3290 * @param {Number} width Width (in pixels)
3291 * @param {Number} height Height (in pixels)
3293 Dygraph
.prototype.resize
= function(width
, height
) {
3294 if (this.resize_lock
) {
3297 this.resize_lock
= true;
3299 if ((width
=== null) != (height
=== null)) {
3300 this.warn("Dygraph.resize() should be called with zero parameters or " +
3301 "two non-NULL parameters. Pretending it was zero.");
3302 width
= height
= null;
3305 // TODO(danvk): there should be a clear() method.
3306 this.maindiv_
.innerHTML
= "";
3307 this.attrs_
.labelsDiv
= null;
3310 this.maindiv_
.style
.width
= width
+ "px";
3311 this.maindiv_
.style
.height
= height
+ "px";
3312 this.width_
= width
;
3313 this.height_
= height
;
3315 this.width_
= this.maindiv_
.offsetWidth
;
3316 this.height_
= this.maindiv_
.offsetHeight
;
3319 this.createInterface_();
3322 this.resize_lock
= false;
3326 * Adjusts the number of points in the rolling average. Updates the graph to
3327 * reflect the new averaging period.
3328 * @param {Number} length Number of points over which to average the data.
3330 Dygraph
.prototype.adjustRoll
= function(length
) {
3331 this.rollPeriod_
= length
;
3336 * Returns a boolean array of visibility statuses.
3338 Dygraph
.prototype.visibility
= function() {
3339 // Do lazy-initialization, so that this happens after we know the number of
3341 if (!this.attr_("visibility")) {
3342 this.attrs_
["visibility"] = [];
3344 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3345 this.attr_("visibility").push(true);
3347 return this.attr_("visibility");
3351 * Changes the visiblity of a series.
3353 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3354 var x
= this.visibility();
3355 if (num
< 0 || num
>= x
.length
) {
3356 this.warn("invalid series number in setVisibility: " + num
);
3364 * Update the list of annotations and redraw the chart.
3366 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3367 // Only add the annotation CSS rule once we know it will be used.
3368 Dygraph
.addAnnotationRule();
3369 this.annotations_
= ann
;
3370 this.layout_
.setAnnotations(this.annotations_
);
3371 if (!suppressDraw
) {
3377 * Return the list of annotations.
3379 Dygraph
.prototype.annotations
= function() {
3380 return this.annotations_
;
3384 * Get the index of a series (column) given its name. The first column is the
3385 * x-axis, so the data series start with index 1.
3387 Dygraph
.prototype.indexFromSetName
= function(name
) {
3388 var labels
= this.attr_("labels");
3389 for (var i
= 0; i
< labels
.length
; i
++) {
3390 if (labels
[i
] == name
) return i
;
3395 Dygraph
.addAnnotationRule
= function() {
3396 if (Dygraph
.addedAnnotationCSS
) return;
3398 var rule
= "border: 1px solid black; " +
3399 "background-color: white; " +
3400 "text-align: center;";
3402 var styleSheetElement
= document
.createElement("style");
3403 styleSheetElement
.type
= "text/css";
3404 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3406 // Find the first style sheet that we can access.
3407 // We may not add a rule to a style sheet from another domain for security
3408 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3409 // adds its own style sheets from google.com.
3410 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3411 if (document
.styleSheets
[i
].disabled
) continue;
3412 var mysheet
= document
.styleSheets
[i
];
3414 if (mysheet
.insertRule
) { // Firefox
3415 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3416 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3417 } else if (mysheet
.addRule
) { // IE
3418 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3420 Dygraph
.addedAnnotationCSS
= true;
3423 // Was likely a security exception.
3427 this.warn("Unable to add default annotation CSS rule; display may be off.");
3431 * Create a new canvas element. This is more complex than a simple
3432 * document.createElement("canvas") because of IE and excanvas.
3434 Dygraph
.createCanvas
= function() {
3435 var canvas
= document
.createElement("canvas");
3437 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3438 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3439 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3447 * A wrapper around Dygraph that implements the gviz API.
3448 * @param {Object} container The DOM object the visualization should live in.
3450 Dygraph
.GVizChart
= function(container
) {
3451 this.container
= container
;
3454 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3455 // Clear out any existing dygraph.
3456 // TODO(danvk): would it make more sense to simply redraw using the current
3457 // date_graph object?
3458 this.container
.innerHTML
= '';
3459 if (typeof(this.date_graph
) != 'undefined') {
3460 this.date_graph
.destroy();
3463 this.date_graph
= new Dygraph(this.container
, data
, options
);
3467 * Google charts compatible setSelection
3468 * Only row selection is supported, all points in the row will be highlighted
3469 * @param {Array} array of the selected cells
3472 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3474 if (selection_array
.length
) {
3475 row
= selection_array
[0].row
;
3477 this.date_graph
.setSelection(row
);
3481 * Google charts compatible getSelection implementation
3482 * @return {Array} array of the selected cells
3485 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3488 var row
= this.date_graph
.getSelection();
3490 if (row
< 0) return selection
;
3493 for (var i
in this.date_graph
.layout_
.datasets
) {
3494 selection
.push({row
: row
, column
: col
});
3501 // Older pages may still use this name.
3502 DateGraph
= Dygraph
;