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
;
1472 // This prevents JS errors when mousing over the canvas before data loads.
1473 if (points
=== 'undefined') return;
1478 // Loop through all the points and find the date nearest to our current
1480 var minDist
= 1e+100;
1482 for (var i
= 0; i
< points
.length
; i
++) {
1483 var point
= points
[i
];
1484 if (point
== null) continue;
1485 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1486 if (dist
> minDist
) continue;
1490 if (idx
>= 0) lastx
= points
[idx
].xval
;
1492 // Extract the points we've selected
1493 this.selPoints_
= [];
1494 var l
= points
.length
;
1495 if (!this.attr_("stackedGraph")) {
1496 for (var i
= 0; i
< l
; i
++) {
1497 if (points
[i
].xval
== lastx
) {
1498 this.selPoints_
.push(points
[i
]);
1502 // Need to 'unstack' points starting from the bottom
1503 var cumulative_sum
= 0;
1504 for (var i
= l
- 1; i
>= 0; i
--) {
1505 if (points
[i
].xval
== lastx
) {
1506 var p
= {}; // Clone the point since we modify it
1507 for (var k
in points
[i
]) {
1508 p
[k
] = points
[i
][k
];
1510 p
.yval
-= cumulative_sum
;
1511 cumulative_sum
+= p
.yval
;
1512 this.selPoints_
.push(p
);
1515 this.selPoints_
.reverse();
1518 if (this.attr_("highlightCallback")) {
1519 var px
= this.lastx_
;
1520 if (px
!== null && lastx
!= px
) {
1521 // only fire if the selected point has changed.
1522 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1526 // Save last x position for callbacks.
1527 this.lastx_
= lastx
;
1529 this.updateSelection_();
1533 * Transforms layout_.points index into data row number.
1534 * @param int layout_.points index
1535 * @return int row number, or -1 if none could be found.
1538 Dygraph
.prototype.idxToRow_
= function(idx
) {
1539 if (idx
< 0) return -1;
1541 for (var i
in this.layout_
.datasets
) {
1542 if (idx
< this.layout_
.datasets
[i
].length
) {
1543 return this.boundaryIds_
[0][0]+idx
;
1545 idx
-= this.layout_
.datasets
[i
].length
;
1551 * Draw dots over the selectied points in the data series. This function
1552 * takes care of cleanup of previously-drawn dots.
1555 Dygraph
.prototype.updateSelection_
= function() {
1556 // Clear the previously drawn vertical, if there is one
1557 var ctx
= this.canvas_
.getContext("2d");
1558 if (this.previousVerticalX_
>= 0) {
1559 // Determine the maximum highlight circle size.
1560 var maxCircleSize
= 0;
1561 var labels
= this.attr_('labels');
1562 for (var i
= 1; i
< labels
.length
; i
++) {
1563 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1564 if (r
> maxCircleSize
) maxCircleSize
= r
;
1566 var px
= this.previousVerticalX_
;
1567 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1568 2 * maxCircleSize
+ 2, this.height_
);
1571 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1573 if (this.selPoints_
.length
> 0) {
1574 var canvasx
= this.selPoints_
[0].canvasx
;
1576 // Set the status message to indicate the selected point(s)
1577 var replace
= this.attr_('xValueFormatter')(
1578 this.lastx_
, this.numXDigits_
+ this.numExtraDigits_
) + ":";
1579 var fmtFunc
= this.attr_('yValueFormatter');
1580 var clen
= this.colors_
.length
;
1582 if (this.attr_('showLabelsOnHighlight')) {
1583 // Set the status message to indicate the selected point(s)
1584 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1585 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1586 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1587 if (this.attr_("labelsSeparateLines")) {
1590 var point
= this.selPoints_
[i
];
1591 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1592 var yval
= fmtFunc(point
.yval
, this.numYDigits_
+ this.numExtraDigits_
);
1593 replace
+= " <b><font color='" + c
.toHex() + "'>"
1594 + point
.name
+ "</font></b>:"
1598 this.attr_("labelsDiv").innerHTML
= replace
;
1601 // Draw colored circles over the center of each selected point
1603 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1604 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1606 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1608 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1609 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1610 0, 2 * Math
.PI
, false);
1615 this.previousVerticalX_
= canvasx
;
1620 * Set manually set selected dots, and display information about them
1621 * @param int row number that should by highlighted
1622 * false value clears the selection
1625 Dygraph
.prototype.setSelection
= function(row
) {
1626 // Extract the points we've selected
1627 this.selPoints_
= [];
1630 if (row
!== false) {
1631 row
= row
-this.boundaryIds_
[0][0];
1634 if (row
!== false && row
>= 0) {
1635 for (var i
in this.layout_
.datasets
) {
1636 if (row
< this.layout_
.datasets
[i
].length
) {
1637 var point
= this.layout_
.points
[pos
+row
];
1639 if (this.attr_("stackedGraph")) {
1640 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1643 this.selPoints_
.push(point
);
1645 pos
+= this.layout_
.datasets
[i
].length
;
1649 if (this.selPoints_
.length
) {
1650 this.lastx_
= this.selPoints_
[0].xval
;
1651 this.updateSelection_();
1654 this.clearSelection();
1660 * The mouse has left the canvas. Clear out whatever artifacts remain
1661 * @param {Object} event the mouseout event from the browser.
1664 Dygraph
.prototype.mouseOut_
= function(event
) {
1665 if (this.attr_("unhighlightCallback")) {
1666 this.attr_("unhighlightCallback")(event
);
1669 if (this.attr_("hideOverlayOnMouseOut")) {
1670 this.clearSelection();
1675 * Remove all selection from the canvas
1678 Dygraph
.prototype.clearSelection
= function() {
1679 // Get rid of the overlay data
1680 var ctx
= this.canvas_
.getContext("2d");
1681 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1682 this.attr_("labelsDiv").innerHTML
= "";
1683 this.selPoints_
= [];
1688 * Returns the number of the currently selected row
1689 * @return int row number, of -1 if nothing is selected
1692 Dygraph
.prototype.getSelection
= function() {
1693 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1697 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1698 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1699 return row
+ this.boundaryIds_
[0][0];
1705 Dygraph
.zeropad
= function(x
) {
1706 if (x
< 10) return "0" + x
; else return "" + x
;
1710 * Return a string version of the hours, minutes and seconds portion of a date.
1711 * @param {Number} date The JavaScript date (ms since epoch)
1712 * @return {String} A time of the form "HH:MM:SS"
1715 Dygraph
.hmsString_
= function(date
) {
1716 var zeropad
= Dygraph
.zeropad
;
1717 var d
= new Date(date
);
1718 if (d
.getSeconds()) {
1719 return zeropad(d
.getHours()) + ":" +
1720 zeropad(d
.getMinutes()) + ":" +
1721 zeropad(d
.getSeconds());
1723 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1728 * Convert a JS date to a string appropriate to display on an axis that
1729 * is displaying values at the stated granularity.
1730 * @param {Date} date The date to format
1731 * @param {Number} granularity One of the Dygraph granularity constants
1732 * @return {String} The formatted date
1735 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1736 if (granularity
>= Dygraph
.DECADAL
) {
1737 return date
.strftime('%Y');
1738 } else if (granularity
>= Dygraph
.MONTHLY
) {
1739 return date
.strftime('%b %y');
1741 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1742 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1743 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1745 return Dygraph
.hmsString_(date
.getTime());
1751 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1752 * @param {Number} date The JavaScript date (ms since epoch)
1753 * @return {String} A date of the form "YYYY/MM/DD"
1756 Dygraph
.dateString_
= function(date
) {
1757 var zeropad
= Dygraph
.zeropad
;
1758 var d
= new Date(date
);
1761 var year
= "" + d
.getFullYear();
1762 // Get a 0 padded month string
1763 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1764 // Get a 0 padded day string
1765 var day
= zeropad(d
.getDate());
1768 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1769 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1771 return year
+ "/" + month + "/" + day
+ ret
;
1775 * Fires when there's data available to be graphed.
1776 * @param {String} data Raw CSV data to be plotted
1779 Dygraph
.prototype.loadedEvent_
= function(data
) {
1780 this.rawData_
= this.parseCSV_(data
);
1784 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1785 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1786 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1789 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1792 Dygraph
.prototype.addXTicks_
= function() {
1793 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1795 if (this.dateWindow_
) {
1796 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1798 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1801 var formatter
= this.attr_('xTicker');
1802 var ret
= formatter(range
[0], range
[1], this);
1805 if (ret
.ticks
!== undefined
) {
1806 // numericTicks() returns multiple values.
1808 this.numXDigits_
= ret
.numDigits
;
1813 this.layout_
.updateOptions({xTicks
: xTicks
});
1816 // Time granularity enumeration
1817 Dygraph
.SECONDLY
= 0;
1818 Dygraph
.TWO_SECONDLY
= 1;
1819 Dygraph
.FIVE_SECONDLY
= 2;
1820 Dygraph
.TEN_SECONDLY
= 3;
1821 Dygraph
.THIRTY_SECONDLY
= 4;
1822 Dygraph
.MINUTELY
= 5;
1823 Dygraph
.TWO_MINUTELY
= 6;
1824 Dygraph
.FIVE_MINUTELY
= 7;
1825 Dygraph
.TEN_MINUTELY
= 8;
1826 Dygraph
.THIRTY_MINUTELY
= 9;
1827 Dygraph
.HOURLY
= 10;
1828 Dygraph
.TWO_HOURLY
= 11;
1829 Dygraph
.SIX_HOURLY
= 12;
1831 Dygraph
.WEEKLY
= 14;
1832 Dygraph
.MONTHLY
= 15;
1833 Dygraph
.QUARTERLY
= 16;
1834 Dygraph
.BIANNUAL
= 17;
1835 Dygraph
.ANNUAL
= 18;
1836 Dygraph
.DECADAL
= 19;
1837 Dygraph
.CENTENNIAL
= 20;
1838 Dygraph
.NUM_GRANULARITIES
= 21;
1840 Dygraph
.SHORT_SPACINGS
= [];
1841 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1842 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1843 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1844 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1845 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1846 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1847 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1848 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1849 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1850 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1851 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1852 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1853 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1854 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1855 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1859 // If we used this time granularity, how many ticks would there be?
1860 // This is only an approximation, but it's generally good enough.
1862 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1863 if (granularity
< Dygraph
.MONTHLY
) {
1864 // Generate one tick mark for every fixed interval of time.
1865 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1866 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1868 var year_mod
= 1; // e.g. to only print one point every 10 years.
1869 var num_months
= 12;
1870 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1871 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1872 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1873 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1874 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1876 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1877 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1878 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1884 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1885 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1887 // Returns an array containing {v: millis, label: label} dictionaries.
1889 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1890 var formatter
= this.attr_("xAxisLabelFormatter");
1892 if (granularity
< Dygraph
.MONTHLY
) {
1893 // Generate one tick mark for every fixed interval of time.
1894 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1895 var format
= '%d%b'; // e.g. "1Jan"
1897 // Find a time less than start_time which occurs on a "nice" time boundary
1898 // for this granularity.
1899 var g
= spacing
/ 1000;
1900 var d
= new Date(start_time
);
1901 if (g
<= 60) { // seconds
1902 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1906 if (g
<= 60) { // minutes
1907 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1912 if (g
<= 24) { // days
1913 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1918 if (g
== 7) { // one week
1919 d
.setDate(d
.getDate() - d
.getDay());
1924 start_time
= d
.getTime();
1926 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1927 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1930 // Display a tick mark on the first of a set of months of each year.
1931 // Years get a tick mark iff y % year_mod == 0. This is useful for
1932 // displaying a tick mark once every 10 years, say, on long time scales.
1934 var year_mod
= 1; // e.g. to only print one point every 10 years.
1936 if (granularity
== Dygraph
.MONTHLY
) {
1937 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1938 } else if (granularity
== Dygraph
.QUARTERLY
) {
1939 months
= [ 0, 3, 6, 9 ];
1940 } else if (granularity
== Dygraph
.BIANNUAL
) {
1942 } else if (granularity
== Dygraph
.ANNUAL
) {
1944 } else if (granularity
== Dygraph
.DECADAL
) {
1947 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1951 this.warn("Span of dates is too long");
1954 var start_year
= new Date(start_time
).getFullYear();
1955 var end_year
= new Date(end_time
).getFullYear();
1956 var zeropad
= Dygraph
.zeropad
;
1957 for (var i
= start_year
; i
<= end_year
; i
++) {
1958 if (i
% year_mod
!= 0) continue;
1959 for (var j
= 0; j
< months
.length
; j
++) {
1960 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1961 var t
= Date
.parse(date_str
);
1962 if (t
< start_time
|| t
> end_time
) continue;
1963 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1973 * Add ticks to the x-axis based on a date range.
1974 * @param {Number} startDate Start of the date window (millis since epoch)
1975 * @param {Number} endDate End of the date window (millis since epoch)
1976 * @return {Array.<Object>} Array of {label, value} tuples.
1979 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1981 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1982 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1983 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1990 return self
.GetXAxis(startDate
, endDate
, chosen
);
1992 // TODO(danvk): signal error.
1996 // This is a list of human-friendly values at which to show tick marks on a log
1997 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
1998 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
1999 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2000 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2002 for (var power
= -39; power
<= 39; power
++) {
2003 var range
= Math
.pow(10, power
);
2004 for (var mult
= 1; mult
<= 9; mult
++) {
2005 var val
= range
* mult
;
2012 // val is the value to search for
2013 // arry is the value over which to search
2014 // if abs > 0, find the lowest entry greater than val
2015 // if abs < 0, find the highest entry less than val
2016 // if abs == 0, find the entry that equals val.
2017 // Currently does not work when val is outside the range of arry's values.
2018 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2019 if (low
== null || high
== null) {
2021 high
= arry
.length
- 1;
2029 var validIndex
= function(idx
) {
2030 return idx
>= 0 && idx
< arry
.length
;
2032 var mid
= parseInt((low
+ high
) / 2);
2033 var element
= arry
[mid
];
2034 if (element
== val
) {
2037 if (element
> val
) {
2039 // Accept if element > val, but also if prior element < val.
2041 if (validIndex(idx
) && arry
[idx
] < val
) {
2045 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2047 if (element
< val
) {
2049 // Accept if element < val, but also if prior element > val.
2051 if (validIndex(idx
) && arry
[idx
] > val
) {
2055 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2060 * Determine the number of significant figures in a Number up to the specified
2061 * precision. Note that there is no way to determine if a trailing '0' is
2062 * significant or not, so by convention we return 1 for all of the following
2063 * inputs: 1, 1.0, 1.00, 1.000 etc.
2064 * @param {Number} x The input value.
2065 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
2066 * Default and maximum allowed value is 13.
2067 * @return {Number} The number of significant figures which is >= 1.
2069 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
2070 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
2072 // Convert the number to its exponential notation form and work backwards,
2073 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
2074 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
2075 // the JavaScript interpreter handle the low level bits of the Number for us.
2076 var s
= x
.toExponential(precision
);
2077 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
2079 for (var i
= ePos
- 1; i
>= 0; i
--) {
2081 // Got to the decimal place. We'll call this 1 digit of precision because
2082 // we can't know for sure how many trailing 0s are significant.
2084 } else if (s
[i
] != '0') {
2085 // Found the first non-zero digit. Return the number of characters
2086 // except for the '.'.
2087 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
2091 // Occurs if toExponential() doesn't return a string containing 'e', which
2092 // should never happen.
2097 * Add ticks when the x axis has numbers on it (instead of dates)
2098 * TODO(konigsberg): Update comment.
2100 * @param {Number} minV minimum value
2101 * @param {Number} maxV maximum value
2103 * @param {function} attribute accessor function.
2104 * @return {Array.<Object>} Array of {label, value} tuples.
2107 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2108 var attr
= function(k
) {
2109 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2110 return self
.attr_(k
);
2115 for (var i
= 0; i
< vals
.length
; i
++) {
2116 ticks
.push({v
: vals
[i
]});
2119 if (axis_props
&& attr("logscale")) {
2120 var pixelsPerTick
= attr('pixelsPerYLabel');
2121 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2122 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2123 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2124 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2129 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2131 // Count the number of tick values would appear, if we can get at least
2132 // nTicks / 4 accept them
.
2133 var lastDisplayed
= null;
2134 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2135 var axisId
= axis_props
.yAxisId
;
2136 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2137 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2138 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2139 var tick
= { v
: tickValue
};
2140 if (lastDisplayed
== null) {
2142 tickValue
: tickValue
,
2146 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2148 tickValue
: tickValue
,
2157 // Since we went in backwards order.
2162 // ticks.length won't be 0 if the log scale function finds values to insert.
2163 if (ticks
.length
== 0) {
2165 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2166 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2167 // The first spacing greater than pixelsPerYLabel is what we use.
2168 // TODO(danvk): version that works on a log scale.
2169 if (attr("labelsKMG2")) {
2170 var mults
= [1, 2, 4, 8];
2172 var mults
= [1, 2, 5];
2174 var scale
, low_val
, high_val
, nTicks
;
2175 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2176 var pixelsPerTick
= attr('pixelsPerYLabel');
2177 for (var i
= -10; i
< 50; i
++) {
2178 if (attr("labelsKMG2")) {
2179 var base_scale
= Math
.pow(16, i
);
2181 var base_scale
= Math
.pow(10, i
);
2183 for (var j
= 0; j
< mults
.length
; j
++) {
2184 scale
= base_scale
* mults
[j
];
2185 low_val
= Math
.floor(minV
/ scale
) * scale
;
2186 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2187 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2188 var spacing
= self
.height_
/ nTicks
;
2189 // wish I could break out of both loops at once...
2190 if (spacing
> pixelsPerTick
) break;
2192 if (spacing
> pixelsPerTick
) break;
2195 // Construct the set of ticks.
2196 // Allow reverse y-axis if it's explicitly requested.
2197 if (low_val
> high_val
) scale
*= -1;
2198 for (var i
= 0; i
< nTicks
; i
++) {
2199 var tickV
= low_val
+ i
* scale
;
2200 ticks
.push( {v
: tickV
} );
2205 // Add formatted labels to the ticks.
2208 if (attr("labelsKMB")) {
2210 k_labels
= [ "K", "M", "B", "T" ];
2212 if (attr("labelsKMG2")) {
2213 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2215 k_labels
= [ "k", "M", "G", "T" ];
2217 var formatter
= attr('yAxisLabelFormatter') ?
2218 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2220 // Determine the number of decimal places needed for the labels below by
2221 // taking the maximum number of significant figures for any label. We must
2222 // take the max because we can't tell if trailing 0s are significant.
2224 for (var i
= 0; i
< ticks
.length
; i
++) {
2225 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
2228 // Add labels to the ticks.
2229 for (var i
= 0; i
< ticks
.length
; i
++) {
2230 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2231 var tickV
= ticks
[i
].v
;
2232 var absTickV
= Math
.abs(tickV
);
2233 var label
= (formatter
!== undefined
) ?
2234 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
2235 if (k_labels
.length
> 0) {
2236 // Round up to an appropriate unit.
2238 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2239 if (absTickV
>= n
) {
2240 label
= formatter(tickV
/ n
, numDigits
) + k_labels
[j
];
2245 ticks
[i
].label
= label
;
2248 return {ticks
: ticks
, numDigits
: numDigits
};
2251 // Computes the range of the data series (including confidence intervals).
2252 // series is either [ [x1, y1], [x2, y2], ... ] or
2253 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2254 // Returns [low, high]
2255 Dygraph
.prototype.extremeValues_
= function(series
) {
2256 var minY
= null, maxY
= null;
2258 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2260 // With custom bars, maxY is the max of the high values.
2261 for (var j
= 0; j
< series
.length
; j
++) {
2262 var y
= series
[j
][1][0];
2264 var low
= y
- series
[j
][1][1];
2265 var high
= y
+ series
[j
][1][2];
2266 if (low
> y
) low
= y
; // this can happen with custom bars,
2267 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2268 if (maxY
== null || high
> maxY
) {
2271 if (minY
== null || low
< minY
) {
2276 for (var j
= 0; j
< series
.length
; j
++) {
2277 var y
= series
[j
][1];
2278 if (y
=== null || isNaN(y
)) continue;
2279 if (maxY
== null || y
> maxY
) {
2282 if (minY
== null || y
< minY
) {
2288 return [minY
, maxY
];
2292 * This function is called once when the chart's data is changed or the options
2293 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2294 * idea is that values derived from the chart's data can be computed here,
2295 * rather than every time the chart is drawn. This includes things like the
2296 * number of axes, rolling averages, etc.
2298 Dygraph
.prototype.predraw_
= function() {
2299 // TODO(danvk): move more computations out of drawGraph_ and into here.
2300 this.computeYAxes_();
2302 // Create a new plotter.
2303 if (this.plotter_
) this.plotter_
.clear();
2304 this.plotter_
= new DygraphCanvasRenderer(this,
2305 this.hidden_
, this.layout_
,
2306 this.renderOptions_
);
2308 // The roller sits in the bottom left corner of the chart. We don't know where
2309 // this will be until the options are available, so it's positioned here.
2310 this.createRollInterface_();
2312 // Same thing applies for the labelsDiv. It's right edge should be flush with
2313 // the right edge of the charting area (which may not be the same as the right
2314 // edge of the div, if we have two y-axes.
2315 this.positionLabelsDiv_();
2317 // If the data or options have changed, then we'd better redraw.
2322 * Update the graph with new data. This method is called when the viewing area
2323 * has changed. If the underlying data or options have changed, predraw_ will
2324 * be called before drawGraph_ is called.
2327 Dygraph
.prototype.drawGraph_
= function() {
2328 var data
= this.rawData_
;
2330 // This is used to set the second parameter to drawCallback, below.
2331 var is_initial_draw
= this.is_initial_draw_
;
2332 this.is_initial_draw_
= false;
2334 var minY
= null, maxY
= null;
2335 this.layout_
.removeAllDatasets();
2337 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2339 // Loop over the fields (series). Go from the last to the first,
2340 // because if they're stacked that's how we accumulate the values.
2342 var cumulative_y
= []; // For stacked series.
2345 var extremes
= {}; // series name -> [low, high]
2347 // Loop over all fields and create datasets
2348 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2349 if (!this.visibility()[i
- 1]) continue;
2351 var seriesName
= this.attr_("labels")[i
];
2352 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2353 var logScale
= this.attr_('logscale', i
);
2356 for (var j
= 0; j
< data
.length
; j
++) {
2357 var date
= data
[j
][0];
2358 var point
= data
[j
][i
];
2360 // On the log scale, points less than zero do not exist.
2361 // This will create a gap in the chart. Note that this ignores
2362 // connectSeparatedPoints.
2366 series
.push([date
, point
]);
2368 if (point
!= null || !connectSeparatedPoints
) {
2369 series
.push([date
, point
]);
2374 // TODO(danvk): move this into predraw_. It's insane to do it here.
2375 series
= this.rollingAverage(series
, this.rollPeriod_
);
2377 // Prune down to the desired range, if necessary (for zooming)
2378 // Because there can be lines going to points outside of the visible area,
2379 // we actually prune to visible points, plus one on either side.
2380 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2381 if (this.dateWindow_
) {
2382 var low
= this.dateWindow_
[0];
2383 var high
= this.dateWindow_
[1];
2385 // TODO(danvk): do binary search instead of linear search.
2386 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2387 var firstIdx
= null, lastIdx
= null;
2388 for (var k
= 0; k
< series
.length
; k
++) {
2389 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2392 if (series
[k
][0] <= high
) {
2396 if (firstIdx
=== null) firstIdx
= 0;
2397 if (firstIdx
> 0) firstIdx
--;
2398 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2399 if (lastIdx
< series
.length
- 1) lastIdx
++;
2400 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2401 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2402 pruned
.push(series
[k
]);
2406 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2409 var seriesExtremes
= this.extremeValues_(series
);
2412 for (var j
=0; j
<series
.length
; j
++) {
2413 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2416 } else if (this.attr_("stackedGraph")) {
2417 var l
= series
.length
;
2419 for (var j
= 0; j
< l
; j
++) {
2420 // If one data set has a NaN, let all subsequent stacked
2421 // sets inherit the NaN -- only start at 0 for the first set.
2422 var x
= series
[j
][0];
2423 if (cumulative_y
[x
] === undefined
) {
2424 cumulative_y
[x
] = 0;
2427 actual_y
= series
[j
][1];
2428 cumulative_y
[x
] += actual_y
;
2430 series
[j
] = [x
, cumulative_y
[x
]]
2432 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2433 seriesExtremes
[1] = cumulative_y
[x
];
2435 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2436 seriesExtremes
[0] = cumulative_y
[x
];
2440 extremes
[seriesName
] = seriesExtremes
;
2442 datasets
[i
] = series
;
2445 for (var i
= 1; i
< datasets
.length
; i
++) {
2446 if (!this.visibility()[i
- 1]) continue;
2447 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2450 this.computeYAxisRanges_(extremes
);
2451 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2452 seriesToAxisMap
: this.seriesToAxisMap_
2457 // Tell PlotKit to use this new data and render itself
2458 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2459 this.layout_
.evaluateWithError();
2460 this.plotter_
.clear();
2461 this.plotter_
.render();
2462 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2463 this.canvas_
.height
);
2465 if (this.attr_("drawCallback") !== null) {
2466 this.attr_("drawCallback")(this, is_initial_draw
);
2471 * Determine properties of the y-axes which are independent of the data
2472 * currently being displayed. This includes things like the number of axes and
2473 * the style of the axes. It does not include the range of each axis and its
2475 * This fills in this.axes_ and this.seriesToAxisMap_.
2476 * axes_ = [ { options } ]
2477 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2478 * indices are into the axes_ array.
2480 Dygraph
.prototype.computeYAxes_
= function() {
2481 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2482 this.seriesToAxisMap_
= {};
2484 // Get a list of series names.
2485 var labels
= this.attr_("labels");
2487 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2489 // all options which could be applied per-axis:
2497 'axisLabelFontSize',
2502 // Copy global axis options over to the first axis.
2503 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2504 var k
= axisOptions
[i
];
2505 var v
= this.attr_(k
);
2506 if (v
) this.axes_
[0][k
] = v
;
2509 // Go through once and add all the axes.
2510 for (var seriesName
in series
) {
2511 if (!series
.hasOwnProperty(seriesName
)) continue;
2512 var axis
= this.attr_("axis", seriesName
);
2514 this.seriesToAxisMap_
[seriesName
] = 0;
2517 if (typeof(axis
) == 'object') {
2518 // Add a new axis, making a copy of its per-axis options.
2520 Dygraph
.update(opts
, this.axes_
[0]);
2521 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2522 var yAxisId
= this.axes_
.length
;
2523 opts
.yAxisId
= yAxisId
;
2525 Dygraph
.update(opts
, axis
);
2526 this.axes_
.push(opts
);
2527 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2531 // Go through one more time and assign series to an axis defined by another
2532 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2533 for (var seriesName
in series
) {
2534 if (!series
.hasOwnProperty(seriesName
)) continue;
2535 var axis
= this.attr_("axis", seriesName
);
2536 if (typeof(axis
) == 'string') {
2537 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2538 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2539 "series " + axis
+ ", which does not define its own axis.");
2542 var idx
= this.seriesToAxisMap_
[axis
];
2543 this.seriesToAxisMap_
[seriesName
] = idx
;
2547 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2548 // this last so that hiding the first series doesn't destroy the axis
2549 // properties of the primary axis.
2550 var seriesToAxisFiltered
= {};
2551 var vis
= this.visibility();
2552 for (var i
= 1; i
< labels
.length
; i
++) {
2554 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2556 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2560 * Returns the number of y-axes on the chart.
2561 * @return {Number} the number of axes.
2563 Dygraph
.prototype.numAxes
= function() {
2565 for (var series
in this.seriesToAxisMap_
) {
2566 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2567 var idx
= this.seriesToAxisMap_
[series
];
2568 if (idx
> last_axis
) last_axis
= idx
;
2570 return 1 + last_axis
;
2574 * Determine the value range and tick marks for each axis.
2575 * @param {Object} extremes A mapping from seriesName -> [low, high]
2576 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2578 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2579 // Build a map from axis number -> [list of series names]
2580 var seriesForAxis
= [];
2581 for (var series
in this.seriesToAxisMap_
) {
2582 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2583 var idx
= this.seriesToAxisMap_
[series
];
2584 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2585 seriesForAxis
[idx
].push(series
);
2588 // Compute extreme values, a span and tick marks for each axis.
2589 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2590 var axis
= this.axes_
[i
];
2591 if (axis
.valueWindow
) {
2592 // This is only set if the user has zoomed on the y-axis. It is never set
2593 // by a user. It takes precedence over axis.valueRange because, if you set
2594 // valueRange, you'd still expect to be able to pan.
2595 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2596 } else if (axis
.valueRange
) {
2597 // This is a user-set value range for this axis.
2598 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2600 // Calculate the extremes of extremes.
2601 var series
= seriesForAxis
[i
];
2602 var minY
= Infinity
; // extremes[series[0]][0];
2603 var maxY
= -Infinity
; // extremes[series[0]][1];
2604 for (var j
= 0; j
< series
.length
; j
++) {
2605 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2606 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2608 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2610 // Add some padding and round up to an integer to be human-friendly.
2611 var span
= maxY
- minY
;
2612 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2613 if (span
== 0) { span
= maxY
; }
2617 if (axis
.logscale
) {
2618 var maxAxisY
= maxY
+ 0.1 * span
;
2619 var minAxisY
= minY
;
2621 var maxAxisY
= maxY
+ 0.1 * span
;
2622 var minAxisY
= minY
- 0.1 * span
;
2624 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2625 if (!this.attr_("avoidMinZero")) {
2626 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2627 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2630 if (this.attr_("includeZero")) {
2631 if (maxY
< 0) maxAxisY
= 0;
2632 if (minY
> 0) minAxisY
= 0;
2636 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2639 // Add ticks. By default, all axes inherit the tick positions of the
2640 // primary axis. However, if an axis is specifically marked as having
2641 // independent ticks, then that is permissible as well.
2642 if (i
== 0 || axis
.independentTicks
) {
2644 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2645 axis
.computedValueRange
[1],
2648 axis
.ticks
= ret
.ticks
;
2649 this.numYDigits_
= ret
.numDigits
;
2651 var p_axis
= this.axes_
[0];
2652 var p_ticks
= p_axis
.ticks
;
2653 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2654 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2655 var tick_values
= [];
2656 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2657 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2658 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2659 tick_values
.push(y_val
);
2663 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2664 axis
.computedValueRange
[1],
2665 this, axis
, tick_values
);
2666 axis
.ticks
= ret
.ticks
;
2667 this.numYDigits_
= ret
.numDigits
;
2673 * Calculates the rolling average of a data set.
2674 * If originalData is [label, val], rolls the average of those.
2675 * If originalData is [label, [, it's interpreted as [value, stddev]
2676 * and the roll is returned in the same form, with appropriately reduced
2677 * stddev for each value.
2678 * Note that this is where fractional input (i.e. '5/10') is converted into
2680 * @param {Array} originalData The data in the appropriate format (see above)
2681 * @param {Number} rollPeriod The number of points over which to average the
2684 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2685 if (originalData
.length
< 2)
2686 return originalData
;
2687 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2688 var rollingData
= [];
2689 var sigma
= this.attr_("sigma");
2691 if (this.fractions_
) {
2693 var den
= 0; // numerator/denominator
2695 for (var i
= 0; i
< originalData
.length
; i
++) {
2696 num
+= originalData
[i
][1][0];
2697 den
+= originalData
[i
][1][1];
2698 if (i
- rollPeriod
>= 0) {
2699 num
-= originalData
[i
- rollPeriod
][1][0];
2700 den
-= originalData
[i
- rollPeriod
][1][1];
2703 var date
= originalData
[i
][0];
2704 var value
= den
? num
/ den
: 0.0;
2705 if (this.attr_("errorBars")) {
2706 if (this.wilsonInterval_
) {
2707 // For more details on this confidence interval, see:
2708 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2710 var p
= value
< 0 ? 0 : value
, n
= den
;
2711 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2712 var denom
= 1 + sigma
* sigma
/ den
;
2713 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2714 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2715 rollingData
[i
] = [date
,
2716 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2718 rollingData
[i
] = [date
, [0, 0, 0]];
2721 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2722 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2725 rollingData
[i
] = [date
, mult
* value
];
2728 } else if (this.attr_("customBars")) {
2733 for (var i
= 0; i
< originalData
.length
; i
++) {
2734 var data
= originalData
[i
][1];
2736 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2738 if (y
!= null && !isNaN(y
)) {
2744 if (i
- rollPeriod
>= 0) {
2745 var prev
= originalData
[i
- rollPeriod
];
2746 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2753 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2754 1.0 * (mid
- low
) / count
,
2755 1.0 * (high
- mid
) / count
]];
2758 // Calculate the rolling average for the first rollPeriod - 1 points where
2759 // there is not enough data to roll over the full number of points
2760 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2761 if (!this.attr_("errorBars")){
2762 if (rollPeriod
== 1) {
2763 return originalData
;
2766 for (var i
= 0; i
< originalData
.length
; i
++) {
2769 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2770 var y
= originalData
[j
][1];
2771 if (y
== null || isNaN(y
)) continue;
2773 sum
+= originalData
[j
][1];
2776 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2778 rollingData
[i
] = [originalData
[i
][0], null];
2783 for (var i
= 0; i
< originalData
.length
; i
++) {
2787 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2788 var y
= originalData
[j
][1][0];
2789 if (y
== null || isNaN(y
)) continue;
2791 sum
+= originalData
[j
][1][0];
2792 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2795 var stddev
= Math
.sqrt(variance
) / num_ok
;
2796 rollingData
[i
] = [originalData
[i
][0],
2797 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2799 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2809 * Parses a date, returning the number of milliseconds since epoch. This can be
2810 * passed in as an xValueParser in the Dygraph constructor.
2811 * TODO(danvk): enumerate formats that this understands.
2812 * @param {String} A date in YYYYMMDD format.
2813 * @return {Number} Milliseconds since epoch.
2816 Dygraph
.dateParser
= function(dateStr
, self
) {
2819 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2820 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2821 while (dateStrSlashed
.search("-") != -1) {
2822 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2824 d
= Date
.parse(dateStrSlashed
);
2825 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2826 // TODO(danvk): remove support for this format. It's confusing.
2827 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2828 + "/" + dateStr
.substr(6,2);
2829 d
= Date
.parse(dateStrSlashed
);
2831 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2832 // "2009/07/12 12:34:56"
2833 d
= Date
.parse(dateStr
);
2836 if (!d
|| isNaN(d
)) {
2837 self
.error("Couldn't parse " + dateStr
+ " as a date");
2843 * Detects the type of the str (date or numeric) and sets the various
2844 * formatting attributes in this.attrs_ based on this type.
2845 * @param {String} str An x value.
2848 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2850 if (str
.indexOf('-') > 0 ||
2851 str
.indexOf('/') >= 0 ||
2852 isNaN(parseFloat(str
))) {
2854 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2855 // TODO(danvk): remove support for this format.
2860 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2861 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2862 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2863 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2865 this.attrs_
.xValueFormatter
= this.attrs_
.xValueFormatter
;
2866 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2867 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2868 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2873 * Parses a string in a special csv format. We expect a csv file where each
2874 * line is a date point, and the first field in each line is the date string.
2875 * We also expect that all remaining fields represent series.
2876 * if the errorBars attribute is set, then interpret the fields as:
2877 * date, series1, stddev1, series2, stddev2, ...
2878 * @param {Array.<Object>} data See above.
2881 * @return Array.<Object> An array with one entry for each row. These entries
2882 * are an array of cells in that row. The first entry is the parsed x-value for
2883 * the row. The second, third, etc. are the y-values. These can take on one of
2884 * three forms, depending on the CSV and constructor parameters:
2886 * 2. [ value, stddev ]
2887 * 3. [ low value, center value, high value ]
2889 Dygraph
.prototype.parseCSV_
= function(data
) {
2891 var lines
= data
.split("\n");
2893 // Use the default delimiter or fall back to a tab if that makes sense.
2894 var delim
= this.attr_('delimiter');
2895 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2900 if (this.labelsFromCSV_
) {
2902 this.attrs_
.labels
= lines
[0].split(delim
);
2905 // Parse the x as a float or return null if it's not a number.
2906 var parseFloatOrNull
= function(x
) {
2907 var val
= parseFloat(x
);
2908 // isFinite() returns false for NaN and +/-Infinity
.
2909 return isFinite(val
) ? val
: null;
2913 var defaultParserSet
= false; // attempt to auto-detect x value type
2914 var expectedCols
= this.attr_("labels").length
;
2915 var outOfOrder
= false;
2916 for (var i
= start
; i
< lines
.length
; i
++) {
2917 var line
= lines
[i
];
2918 if (line
.length
== 0) continue; // skip blank lines
2919 if (line
[0] == '#') continue; // skip comment lines
2920 var inFields
= line
.split(delim
);
2921 if (inFields
.length
< 2) continue;
2924 if (!defaultParserSet
) {
2925 this.detectTypeFromString_(inFields
[0]);
2926 xParser
= this.attr_("xValueParser");
2927 defaultParserSet
= true;
2929 fields
[0] = xParser(inFields
[0], this);
2931 // If fractions are expected, parse the numbers as "A/B
"
2932 if (this.fractions_) {
2933 for (var j = 1; j < inFields.length; j++) {
2934 // TODO(danvk): figure out an appropriate way to flag parse errors.
2935 var vals = inFields[j].split("/");
2936 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2938 } else if (this.attr_("errorBars
")) {
2939 // If there are error bars, values are (value, stddev) pairs
2940 for (var j = 1; j < inFields.length; j += 2)
2941 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2942 parseFloatOrNull(inFields[j + 1])];
2943 } else if (this.attr_("customBars
")) {
2944 // Bars are a low;center;high tuple
2945 for (var j = 1; j < inFields.length; j++) {
2946 var vals = inFields[j].split(";");
2947 fields[j] = [ parseFloatOrNull(vals[0]),
2948 parseFloatOrNull(vals[1]),
2949 parseFloatOrNull(vals[2]) ];
2952 // Values are just numbers
2953 for (var j = 1; j < inFields.length; j++) {
2954 fields[j] = parseFloatOrNull(inFields[j]);
2957 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2962 if (fields.length != expectedCols) {
2963 this.error("Number of columns
in line
" + i + " (" + fields.length +
2964 ") does not agree
with number of
labels (" + expectedCols +
2970 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2971 ret.sort(function(a,b) { return a[0] - b[0] });
2978 * The user has provided their data as a pre-packaged JS array. If the x values
2979 * are numeric, this is the same as dygraphs' internal format. If the x values
2980 * are dates, we need to convert them from Date objects to ms since epoch.
2981 * @param {Array.<Object>} data
2982 * @return {Array.<Object>} data with numeric x values.
2984 Dygraph.prototype.parseArray_ = function(data) {
2985 // Peek at the first x value to see if it's numeric.
2986 if (data.length == 0) {
2987 this.error("Can
't plot empty data set");
2990 if (data[0].length == 0) {
2991 this.error("Data set cannot contain an empty row");
2995 if (this.attr_("labels") == null) {
2996 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2997 "in the options parameter");
2998 this.attrs_.labels = [ "X" ];
2999 for (var i = 1; i < data[0].length; i++) {
3000 this.attrs_.labels.push("Y" + i);
3004 if (Dygraph.isDateLike(data[0][0])) {
3005 // Some intelligent defaults for a date x-axis.
3006 this.attrs_.xValueFormatter = Dygraph.dateString_;
3007 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3008 this.attrs_.xTicker = Dygraph.dateTicker;
3010 // Assume they're all dates
.
3011 var parsedData
= Dygraph
.clone(data
);
3012 for (var i
= 0; i
< data
.length
; i
++) {
3013 if (parsedData
[i
].length
== 0) {
3014 this.error("Row " + (1 + i
) + " of data is empty");
3017 if (parsedData
[i
][0] == null
3018 || typeof(parsedData
[i
][0].getTime
) != 'function'
3019 || isNaN(parsedData
[i
][0].getTime())) {
3020 this.error("x value in row " + (1 + i
) + " is not a Date");
3023 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3027 // Some intelligent defaults for a numeric x-axis.
3028 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3029 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3035 * Parses a DataTable object from gviz.
3036 * The data is expected to have a first column that is either a date or a
3037 * number. All subsequent columns must be numbers. If there is a clear mismatch
3038 * between this.xValueParser_ and the type of the first column, it will be
3039 * fixed. Fills out rawData_.
3040 * @param {Array.<Object>} data See above.
3043 Dygraph
.prototype.parseDataTable_
= function(data
) {
3044 var cols
= data
.getNumberOfColumns();
3045 var rows
= data
.getNumberOfRows();
3047 var indepType
= data
.getColumnType(0);
3048 if (indepType
== 'date' || indepType
== 'datetime') {
3049 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3050 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3051 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3052 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3053 } else if (indepType
== 'number') {
3054 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
3055 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3056 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3057 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3059 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3060 "column 1 of DataTable input (Got '" + indepType
+ "')");
3064 // Array of the column indices which contain data (and not annotations).
3066 var annotationCols
= {}; // data index -> [annotation cols]
3067 var hasAnnotations
= false;
3068 for (var i
= 1; i
< cols
; i
++) {
3069 var type
= data
.getColumnType(i
);
3070 if (type
== 'number') {
3072 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3073 // This is OK -- it's an annotation column.
3074 var dataIdx
= colIdx
[colIdx
.length
- 1];
3075 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3076 annotationCols
[dataIdx
] = [i
];
3078 annotationCols
[dataIdx
].push(i
);
3080 hasAnnotations
= true;
3082 this.error("Only 'number' is supported as a dependent type with Gviz." +
3083 " 'string' is only supported if displayAnnotations is true");
3087 // Read column labels
3088 // TODO(danvk): add support back for errorBars
3089 var labels
= [data
.getColumnLabel(0)];
3090 for (var i
= 0; i
< colIdx
.length
; i
++) {
3091 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3092 if (this.attr_("errorBars")) i
+= 1;
3094 this.attrs_
.labels
= labels
;
3095 cols
= labels
.length
;
3098 var outOfOrder
= false;
3099 var annotations
= [];
3100 for (var i
= 0; i
< rows
; i
++) {
3102 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3103 data
.getValue(i
, 0) === null) {
3104 this.warn("Ignoring row " + i
+
3105 " of DataTable because of undefined or null first column.");
3109 if (indepType
== 'date' || indepType
== 'datetime') {
3110 row
.push(data
.getValue(i
, 0).getTime());
3112 row
.push(data
.getValue(i
, 0));
3114 if (!this.attr_("errorBars")) {
3115 for (var j
= 0; j
< colIdx
.length
; j
++) {
3116 var col
= colIdx
[j
];
3117 row
.push(data
.getValue(i
, col
));
3118 if (hasAnnotations
&&
3119 annotationCols
.hasOwnProperty(col
) &&
3120 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3122 ann
.series
= data
.getColumnLabel(col
);
3124 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3126 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3127 if (k
) ann
.text
+= "\n";
3128 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3130 annotations
.push(ann
);
3134 for (var j
= 0; j
< cols
- 1; j
++) {
3135 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3138 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3142 // Strip out infinities, which give dygraphs problems later on.
3143 for (var j
= 0; j
< row
.length
; j
++) {
3144 if (!isFinite(row
[j
])) row
[j
] = null;
3150 this.warn("DataTable is out of order; order it correctly to speed loading.");
3151 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3153 this.rawData_
= ret
;
3155 if (annotations
.length
> 0) {
3156 this.setAnnotations(annotations
, true);
3160 // These functions are all based on MochiKit.
3161 Dygraph
.update
= function (self
, o
) {
3162 if (typeof(o
) != 'undefined' && o
!== null) {
3164 if (o
.hasOwnProperty(k
)) {
3172 Dygraph
.isArrayLike
= function (o
) {
3173 var typ
= typeof(o
);
3175 (typ
!= 'object' && !(typ
== 'function' &&
3176 typeof(o
.item
) == 'function')) ||
3178 typeof(o
.length
) != 'number' ||
3186 Dygraph
.isDateLike
= function (o
) {
3187 if (typeof(o
) != "object" || o
=== null ||
3188 typeof(o
.getTime
) != 'function') {
3194 Dygraph
.clone
= function(o
) {
3195 // TODO(danvk): figure out how MochiKit's version works
3197 for (var i
= 0; i
< o
.length
; i
++) {
3198 if (Dygraph
.isArrayLike(o
[i
])) {
3199 r
.push(Dygraph
.clone(o
[i
]));
3209 * Get the CSV data. If it's in a function, call that function. If it's in a
3210 * file, do an XMLHttpRequest to get it.
3213 Dygraph
.prototype.start_
= function() {
3214 if (typeof this.file_
== 'function') {
3215 // CSV string. Pretend we got it via XHR.
3216 this.loadedEvent_(this.file_());
3217 } else if (Dygraph
.isArrayLike(this.file_
)) {
3218 this.rawData_
= this.parseArray_(this.file_
);
3220 } else if (typeof this.file_
== 'object' &&
3221 typeof this.file_
.getColumnRange
== 'function') {
3222 // must be a DataTable from gviz.
3223 this.parseDataTable_(this.file_
);
3225 } else if (typeof this.file_
== 'string') {
3226 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3227 if (this.file_
.indexOf('\n') >= 0) {
3228 this.loadedEvent_(this.file_
);
3230 var req
= new XMLHttpRequest();
3232 req
.onreadystatechange
= function () {
3233 if (req
.readyState
== 4) {
3234 if (req
.status
== 200) {
3235 caller
.loadedEvent_(req
.responseText
);
3240 req
.open("GET", this.file_
, true);
3244 this.error("Unknown data format: " + (typeof this.file_
));
3249 * Changes various properties of the graph. These can include:
3251 * <li>file: changes the source data for the graph</li>
3252 * <li>errorBars: changes whether the data contains stddev</li>
3254 * @param {Object} attrs The new properties and values
3256 Dygraph
.prototype.updateOptions
= function(attrs
) {
3257 // TODO(danvk): this is a mess. Rethink this function.
3258 if ('rollPeriod' in attrs
) {
3259 this.rollPeriod_
= attrs
.rollPeriod
;
3261 if ('dateWindow' in attrs
) {
3262 this.dateWindow_
= attrs
.dateWindow
;
3265 // TODO(danvk): validate per-series options.
3270 // highlightCircleSize
3272 Dygraph
.update(this.user_attrs_
, attrs
);
3273 Dygraph
.update(this.renderOptions_
, attrs
);
3275 this.labelsFromCSV_
= (this.attr_("labels") == null);
3277 // TODO(danvk): this doesn't match the constructor logic
3278 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3279 if (attrs
['file']) {
3280 this.file_
= attrs
['file'];
3288 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3289 * containing div (which has presumably changed size since the dygraph was
3290 * instantiated. If the width/height are specified, the div will be resized.
3292 * This is far more efficient than destroying and re-instantiating a
3293 * Dygraph, since it doesn't have to reparse the underlying data.
3295 * @param {Number} width Width (in pixels)
3296 * @param {Number} height Height (in pixels)
3298 Dygraph
.prototype.resize
= function(width
, height
) {
3299 if (this.resize_lock
) {
3302 this.resize_lock
= true;
3304 if ((width
=== null) != (height
=== null)) {
3305 this.warn("Dygraph.resize() should be called with zero parameters or " +
3306 "two non-NULL parameters. Pretending it was zero.");
3307 width
= height
= null;
3310 // TODO(danvk): there should be a clear() method.
3311 this.maindiv_
.innerHTML
= "";
3312 this.attrs_
.labelsDiv
= null;
3315 this.maindiv_
.style
.width
= width
+ "px";
3316 this.maindiv_
.style
.height
= height
+ "px";
3317 this.width_
= width
;
3318 this.height_
= height
;
3320 this.width_
= this.maindiv_
.offsetWidth
;
3321 this.height_
= this.maindiv_
.offsetHeight
;
3324 this.createInterface_();
3327 this.resize_lock
= false;
3331 * Adjusts the number of points in the rolling average. Updates the graph to
3332 * reflect the new averaging period.
3333 * @param {Number} length Number of points over which to average the data.
3335 Dygraph
.prototype.adjustRoll
= function(length
) {
3336 this.rollPeriod_
= length
;
3341 * Returns a boolean array of visibility statuses.
3343 Dygraph
.prototype.visibility
= function() {
3344 // Do lazy-initialization, so that this happens after we know the number of
3346 if (!this.attr_("visibility")) {
3347 this.attrs_
["visibility"] = [];
3349 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3350 this.attr_("visibility").push(true);
3352 return this.attr_("visibility");
3356 * Changes the visiblity of a series.
3358 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3359 var x
= this.visibility();
3360 if (num
< 0 || num
>= x
.length
) {
3361 this.warn("invalid series number in setVisibility: " + num
);
3369 * Update the list of annotations and redraw the chart.
3371 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3372 // Only add the annotation CSS rule once we know it will be used.
3373 Dygraph
.addAnnotationRule();
3374 this.annotations_
= ann
;
3375 this.layout_
.setAnnotations(this.annotations_
);
3376 if (!suppressDraw
) {
3382 * Return the list of annotations.
3384 Dygraph
.prototype.annotations
= function() {
3385 return this.annotations_
;
3389 * Get the index of a series (column) given its name. The first column is the
3390 * x-axis, so the data series start with index 1.
3392 Dygraph
.prototype.indexFromSetName
= function(name
) {
3393 var labels
= this.attr_("labels");
3394 for (var i
= 0; i
< labels
.length
; i
++) {
3395 if (labels
[i
] == name
) return i
;
3400 Dygraph
.addAnnotationRule
= function() {
3401 if (Dygraph
.addedAnnotationCSS
) return;
3403 var rule
= "border: 1px solid black; " +
3404 "background-color: white; " +
3405 "text-align: center;";
3407 var styleSheetElement
= document
.createElement("style");
3408 styleSheetElement
.type
= "text/css";
3409 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3411 // Find the first style sheet that we can access.
3412 // We may not add a rule to a style sheet from another domain for security
3413 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3414 // adds its own style sheets from google.com.
3415 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3416 if (document
.styleSheets
[i
].disabled
) continue;
3417 var mysheet
= document
.styleSheets
[i
];
3419 if (mysheet
.insertRule
) { // Firefox
3420 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3421 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3422 } else if (mysheet
.addRule
) { // IE
3423 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3425 Dygraph
.addedAnnotationCSS
= true;
3428 // Was likely a security exception.
3432 this.warn("Unable to add default annotation CSS rule; display may be off.");
3436 * Create a new canvas element. This is more complex than a simple
3437 * document.createElement("canvas") because of IE and excanvas.
3439 Dygraph
.createCanvas
= function() {
3440 var canvas
= document
.createElement("canvas");
3442 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3443 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3444 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3452 * A wrapper around Dygraph that implements the gviz API.
3453 * @param {Object} container The DOM object the visualization should live in.
3455 Dygraph
.GVizChart
= function(container
) {
3456 this.container
= container
;
3459 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3460 // Clear out any existing dygraph.
3461 // TODO(danvk): would it make more sense to simply redraw using the current
3462 // date_graph object?
3463 this.container
.innerHTML
= '';
3464 if (typeof(this.date_graph
) != 'undefined') {
3465 this.date_graph
.destroy();
3468 this.date_graph
= new Dygraph(this.container
, data
, options
);
3472 * Google charts compatible setSelection
3473 * Only row selection is supported, all points in the row will be highlighted
3474 * @param {Array} array of the selected cells
3477 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3479 if (selection_array
.length
) {
3480 row
= selection_array
[0].row
;
3482 this.date_graph
.setSelection(row
);
3486 * Google charts compatible getSelection implementation
3487 * @return {Array} array of the selected cells
3490 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3493 var row
= this.date_graph
.getSelection();
3495 if (row
< 0) return selection
;
3498 for (var i
in this.date_graph
.layout_
.datasets
) {
3499 selection
.push({row
: row
, column
: col
});
3506 // Older pages may still use this name.
3507 DateGraph
= Dygraph
;