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
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://dygraphs.com/
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
93 labelsShowZeroValues
: true,
96 showLabelsOnHighlight
: true,
98 yValueFormatter
: function(x
, opt_numDigits
) {
99 return x
.toPrecision(Math
.min(21, Math
.max(1, opt_numDigits
|| 2)));
105 axisLabelFontSize
: 14,
108 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
112 xValueFormatter
: Dygraph
.dateString_
,
113 xValueParser
: Dygraph
.dateParser
,
114 xTicker
: Dygraph
.dateTicker
,
122 wilsonInterval
: true, // only relevant if fractions is true
126 connectSeparatedPoints
: false,
129 hideOverlayOnMouseOut
: true,
135 // Various logging levels.
141 // Directions for panning and zooming. Use bit operations when combined
142 // values are possible.
143 Dygraph
.HORIZONTAL
= 1;
144 Dygraph
.VERTICAL
= 2;
146 // Used for initializing annotation CSS rules only once.
147 Dygraph
.addedAnnotationCSS
= false;
149 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
150 // Labels is no longer a constructor parameter, since it's typically set
151 // directly from the data source. It also conains a name for the x-axis,
152 // which the previous constructor form did not.
153 if (labels
!= null) {
154 var new_labels
= ["Date"];
155 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
156 Dygraph
.update(attrs
, { 'labels': new_labels
});
158 this.__init__(div
, file
, attrs
);
162 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
163 * and interaction <canvas> inside of it. See the constructor for details
165 * @param {Element} div the Element to render the graph into.
166 * @param {String | Function} file Source data
167 * @param {Object} attrs Miscellaneous other options
170 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
171 // Hack for IE: if we're using excanvas and the document hasn't finished
172 // loading yet (and hence may not have initialized whatever it needs to
173 // initialize), then keep calling this routine periodically until it has.
174 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
175 typeof(G_vmlCanvasManager
) != 'undefined' &&
176 document
.readyState
!= 'complete') {
178 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
181 // Support two-argument constructor
182 if (attrs
== null) { attrs
= {}; }
184 // Copy the important bits into the object
185 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
188 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
189 this.previousVerticalX_
= -1;
190 this.fractions_
= attrs
.fractions
|| false;
191 this.dateWindow_
= attrs
.dateWindow
|| null;
193 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
194 this.is_initial_draw_
= true;
195 this.annotations_
= [];
197 // Number of digits to use when labeling the x (if numeric) and y axis
199 this.numXDigits_
= 2;
200 this.numYDigits_
= 2;
202 // When labeling x (if numeric) or y values in the legend, there are
203 // numDigits + numExtraDigits of precision used. For axes labels with N
204 // digits of precision, the data should be displayed with at least N+1 digits
205 // of precision. The reason for this is to divide each interval between
206 // successive ticks into tenths (for 1) or hundredths (for 2), etc. For
207 // example, if the labels are [0, 1, 2], we want data to be displayed as
209 this.numExtraDigits_
= 1;
211 // Clear the div. This ensure that, if multiple dygraphs are passed the same
212 // div, then only one will be drawn.
215 // If the div isn't already sized then inherit from our attrs or
216 // give it a default size.
217 if (div
.style
.width
== '') {
218 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
220 if (div
.style
.height
== '') {
221 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
223 this.width_
= parseInt(div
.style
.width
, 10);
224 this.height_
= parseInt(div
.style
.height
, 10);
225 // The div might have been specified as percent of the current window size,
226 // convert that to an appropriate number of pixels.
227 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
228 this.width_
= div
.offsetWidth
;
230 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
231 this.height_
= div
.offsetHeight
;
234 if (this.width_
== 0) {
235 this.error("dygraph has zero width. Please specify a width in pixels.");
237 if (this.height_
== 0) {
238 this.error("dygraph has zero height. Please specify a height in pixels.");
241 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
242 if (attrs
['stackedGraph']) {
243 attrs
['fillGraph'] = true;
244 // TODO(nikhilk): Add any other stackedGraph checks here.
247 // Dygraphs has many options, some of which interact with one another.
248 // To keep track of everything, we maintain two sets of options:
250 // this.user_attrs_ only options explicitly set by the user.
251 // this.attrs_ defaults, options derived from user_attrs_, data.
253 // Options are then accessed this.attr_('attr'), which first looks at
254 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
255 // defaults without overriding behavior that the user specifically asks for.
256 this.user_attrs_
= {};
257 Dygraph
.update(this.user_attrs_
, attrs
);
260 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
262 this.boundaryIds_
= [];
264 // Make a note of whether labels will be pulled from the CSV file.
265 this.labelsFromCSV_
= (this.attr_("labels") == null);
267 // Create the containing DIV and other interactive elements
268 this.createInterface_();
273 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
275 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
276 this.user_attrs_
[seriesName
] != null &&
277 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
278 return this.user_attrs_
[seriesName
][name
];
279 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
280 return this.user_attrs_
[name
];
281 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
282 return this.attrs_
[name
];
288 // TODO(danvk): any way I can get the line numbers to be this.warn call?
289 Dygraph
.prototype.log
= function(severity
, message
) {
290 if (typeof(console
) != 'undefined') {
293 console
.debug('dygraphs: ' + message
);
296 console
.info('dygraphs: ' + message
);
298 case Dygraph
.WARNING
:
299 console
.warn('dygraphs: ' + message
);
302 console
.error('dygraphs: ' + message
);
307 Dygraph
.prototype.info
= function(message
) {
308 this.log(Dygraph
.INFO
, message
);
310 Dygraph
.prototype.warn
= function(message
) {
311 this.log(Dygraph
.WARNING
, message
);
313 Dygraph
.prototype.error
= function(message
) {
314 this.log(Dygraph
.ERROR
, message
);
318 * Returns the current rolling period, as set by the user or an option.
319 * @return {Number} The number of points in the rolling window
321 Dygraph
.prototype.rollPeriod
= function() {
322 return this.rollPeriod_
;
326 * Returns the currently-visible x-range. This can be affected by zooming,
327 * panning or a call to updateOptions.
328 * Returns a two-element array: [left, right].
329 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
331 Dygraph
.prototype.xAxisRange
= function() {
332 if (this.dateWindow_
) return this.dateWindow_
;
334 // The entire chart is visible.
335 var left
= this.rawData_
[0][0];
336 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
337 return [left
, right
];
341 * Returns the currently-visible y-range for an axis. This can be affected by
342 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
343 * called with no arguments, returns the range of the first axis.
344 * Returns a two-element array: [bottom, top].
346 Dygraph
.prototype.yAxisRange
= function(idx
) {
347 if (typeof(idx
) == "undefined") idx
= 0;
348 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
349 return [ this.axes_
[idx
].computedValueRange
[0],
350 this.axes_
[idx
].computedValueRange
[1] ];
354 * Returns the currently-visible y-ranges for each axis. This can be affected by
355 * zooming, panning, calls to updateOptions, etc.
356 * Returns an array of [bottom, top] pairs, one for each y-axis.
358 Dygraph
.prototype.yAxisRanges
= function() {
360 for (var i
= 0; i
< this.axes_
.length
; i
++) {
361 ret
.push(this.yAxisRange(i
));
366 // TODO(danvk): use these functions throughout dygraphs.
368 * Convert from data coordinates to canvas/div X/Y coordinates.
369 * If specified, do this conversion for the coordinate system of a particular
370 * axis. Uses the first axis by default.
371 * Returns a two-element array: [X, Y]
373 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
374 var ret
= [null, null];
375 var area
= this.plotter_
.area
;
377 var xRange
= this.xAxisRange();
378 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
382 var yRange
= this.yAxisRange(axis
);
383 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
390 * Convert from canvas/div coords to data coordinates.
391 * If specified, do this conversion for the coordinate system of a particular
392 * axis. Uses the first axis by default.
393 * Returns a two-element array: [X, Y]
395 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
396 var ret
= [null, null];
397 var area
= this.plotter_
.area
;
399 var xRange
= this.xAxisRange();
400 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
404 var yRange
= this.yAxisRange(axis
);
405 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
412 * Returns the number of columns (including the independent variable).
414 Dygraph
.prototype.numColumns
= function() {
415 return this.rawData_
[0].length
;
419 * Returns the number of rows (excluding any header/label row).
421 Dygraph
.prototype.numRows
= function() {
422 return this.rawData_
.length
;
426 * Returns the value in the given row and column. If the row and column exceed
427 * the bounds on the data, returns null. Also returns null if the value is
430 Dygraph
.prototype.getValue
= function(row
, col
) {
431 if (row
< 0 || row
> this.rawData_
.length
) return null;
432 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
434 return this.rawData_
[row
][col
];
437 Dygraph
.addEvent
= function(el
, evt
, fn
) {
438 var normed_fn
= function(e
) {
439 if (!e
) var e
= window
.event
;
442 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
443 el
.addEventListener(evt
, normed_fn
, false);
445 el
.attachEvent('on' + evt
, normed_fn
);
450 * Generates interface elements for the Dygraph: a containing div, a div to
451 * display the current point, and a textbox to adjust the rolling average
452 * period. Also creates the Renderer/Layout elements.
455 Dygraph
.prototype.createInterface_
= function() {
456 // Create the all-enclosing graph div
457 var enclosing
= this.maindiv_
;
459 this.graphDiv
= document
.createElement("div");
460 this.graphDiv
.style
.width
= this.width_
+ "px";
461 this.graphDiv
.style
.height
= this.height_
+ "px";
462 enclosing
.appendChild(this.graphDiv
);
464 // Create the canvas for interactive parts of the chart.
465 this.canvas_
= Dygraph
.createCanvas();
466 this.canvas_
.style
.position
= "absolute";
467 this.canvas_
.width
= this.width_
;
468 this.canvas_
.height
= this.height_
;
469 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
470 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
472 // ... and for static parts of the chart.
473 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
475 // The interactive parts of the graph are drawn on top of the chart.
476 this.graphDiv
.appendChild(this.hidden_
);
477 this.graphDiv
.appendChild(this.canvas_
);
478 this.mouseEventElement_
= this.canvas_
;
481 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
482 dygraph
.mouseMove_(e
);
484 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
485 dygraph
.mouseOut_(e
);
488 // Create the grapher
489 // TODO(danvk): why does the Layout need its own set of options?
490 this.layoutOptions_
= { 'xOriginIsZero': false };
491 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
492 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
493 Dygraph
.update(this.layoutOptions_
, {
494 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
496 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
498 // TODO(danvk): why does the Renderer need its own set of options?
499 this.renderOptions_
= { colorScheme
: this.colors_
,
501 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
502 Dygraph
.update(this.renderOptions_
, this.attrs_
);
503 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
505 this.createStatusMessage_();
506 this.createDragInterface_();
510 * Detach DOM elements in the dygraph and null out all data references.
511 * Calling this when you're done with a dygraph can dramatically reduce memory
512 * usage. See, e.g., the tests/perf.html example.
514 Dygraph
.prototype.destroy
= function() {
515 var removeRecursive
= function(node
) {
516 while (node
.hasChildNodes()) {
517 removeRecursive(node
.firstChild
);
518 node
.removeChild(node
.firstChild
);
521 removeRecursive(this.maindiv_
);
523 var nullOut
= function(obj
) {
525 if (typeof(obj
[n
]) === 'object') {
531 // These may not all be necessary, but it can't hurt...
532 nullOut(this.layout_
);
533 nullOut(this.plotter_
);
538 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
539 * this particular canvas. All Dygraph work is done on this.canvas_.
540 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
541 * @return {Object} The newly-created canvas
544 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
545 var h
= Dygraph
.createCanvas();
546 h
.style
.position
= "absolute";
547 // TODO(danvk): h should be offset from canvas. canvas needs to include
548 // some extra area to make it easier to zoom in on the far left and far
549 // right. h needs to be precisely the plot area, so that clipping occurs.
550 h
.style
.top
= canvas
.style
.top
;
551 h
.style
.left
= canvas
.style
.left
;
552 h
.width
= this.width_
;
553 h
.height
= this.height_
;
554 h
.style
.width
= this.width_
+ "px"; // for IE
555 h
.style
.height
= this.height_
+ "px"; // for IE
559 // Taken from MochiKit.Color
560 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
564 if (saturation
=== 0) {
569 var i
= Math
.floor(hue
* 6);
570 var f
= (hue
* 6) - i
;
571 var p
= value
* (1 - saturation
);
572 var q
= value
* (1 - (saturation
* f
));
573 var t
= value
* (1 - (saturation
* (1 - f
)));
575 case 1: red
= q
; green
= value
; blue
= p
; break;
576 case 2: red
= p
; green
= value
; blue
= t
; break;
577 case 3: red
= p
; green
= q
; blue
= value
; break;
578 case 4: red
= t
; green
= p
; blue
= value
; break;
579 case 5: red
= value
; green
= p
; blue
= q
; break;
580 case 6: // fall through
581 case 0: red
= value
; green
= t
; blue
= p
; break;
584 red
= Math
.floor(255 * red
+ 0.5);
585 green
= Math
.floor(255 * green
+ 0.5);
586 blue
= Math
.floor(255 * blue
+ 0.5);
587 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
592 * Generate a set of distinct colors for the data series. This is done with a
593 * color wheel. Saturation/Value are customizable, and the hue is
594 * equally-spaced around the color wheel. If a custom set of colors is
595 * specified, that is used instead.
598 Dygraph
.prototype.setColors_
= function() {
599 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
600 // away with this.renderOptions_.
601 var num
= this.attr_("labels").length
- 1;
603 var colors
= this.attr_('colors');
605 var sat
= this.attr_('colorSaturation') || 1.0;
606 var val
= this.attr_('colorValue') || 0.5;
607 var half
= Math
.ceil(num
/ 2);
608 for (var i
= 1; i
<= num
; i
++) {
609 if (!this.visibility()[i
-1]) continue;
610 // alternate colors for high contrast.
611 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
612 var hue
= (1.0 * idx
/ (1 + num
));
613 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
616 for (var i
= 0; i
< num
; i
++) {
617 if (!this.visibility()[i
]) continue;
618 var colorStr
= colors
[i
% colors
.length
];
619 this.colors_
.push(colorStr
);
623 // TODO(danvk): update this w/r
/t/ the
new options system
.
624 this.renderOptions_
.colorScheme
= this.colors_
;
625 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
626 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
627 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
631 * Return the list of colors. This is either the list of colors passed in the
632 * attributes, or the autogenerated list of rgb(r,g,b) strings.
633 * @return {Array<string>} The list of colors.
635 Dygraph
.prototype.getColors
= function() {
639 // The following functions are from quirksmode.org with a modification for Safari from
640 // http://blog.firetree.net/2005/07/04/javascript-find-position/
641 // http://www.quirksmode.org/js
/findpos
.html
642 Dygraph
.findPosX
= function(obj
) {
647 curleft
+= obj
.offsetLeft
;
648 if(!obj
.offsetParent
)
650 obj
= obj
.offsetParent
;
657 Dygraph
.findPosY
= function(obj
) {
662 curtop
+= obj
.offsetTop
;
663 if(!obj
.offsetParent
)
665 obj
= obj
.offsetParent
;
675 * Create the div that contains information on the selected point(s)
676 * This goes in the top right of the canvas, unless an external div has already
680 Dygraph
.prototype.createStatusMessage_
= function() {
681 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
682 if (userLabelsDiv
&& null != userLabelsDiv
683 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
684 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
686 if (!this.attr_("labelsDiv")) {
687 var divWidth
= this.attr_('labelsDivWidth');
689 "position": "absolute",
692 "width": divWidth
+ "px",
694 "left": (this.width_
- divWidth
- 2) + "px",
695 "background": "white",
697 "overflow": "hidden"};
698 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
699 var div
= document
.createElement("div");
700 for (var name
in messagestyle
) {
701 if (messagestyle
.hasOwnProperty(name
)) {
702 div
.style
[name
] = messagestyle
[name
];
705 this.graphDiv
.appendChild(div
);
706 this.attrs_
.labelsDiv
= div
;
711 * Position the labels div so that its right edge is flush with the right edge
712 * of the charting area.
714 Dygraph
.prototype.positionLabelsDiv_
= function() {
715 // Don't touch a user-specified labelsDiv.
716 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
718 var area
= this.plotter_
.area
;
719 var div
= this.attr_("labelsDiv");
720 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
724 * Create the text box to adjust the averaging period
727 Dygraph
.prototype.createRollInterface_
= function() {
728 // Create a roller if one doesn't exist already.
730 this.roller_
= document
.createElement("input");
731 this.roller_
.type
= "text";
732 this.roller_
.style
.display
= "none";
733 this.graphDiv
.appendChild(this.roller_
);
736 var display
= this.attr_('showRoller') ? 'block' : 'none';
738 var textAttr
= { "position": "absolute",
740 "top": (this.plotter_
.area
.h
- 25) + "px",
741 "left": (this.plotter_
.area
.x
+ 1) + "px",
744 this.roller_
.size
= "2";
745 this.roller_
.value
= this.rollPeriod_
;
746 for (var name
in textAttr
) {
747 if (textAttr
.hasOwnProperty(name
)) {
748 this.roller_
.style
[name
] = textAttr
[name
];
753 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
756 // These functions are taken from MochiKit.Signal
757 Dygraph
.pageX
= function(e
) {
759 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
762 var b
= document
.body
;
764 (de
.scrollLeft
|| b
.scrollLeft
) -
765 (de
.clientLeft
|| 0);
769 Dygraph
.pageY
= function(e
) {
771 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
774 var b
= document
.body
;
776 (de
.scrollTop
|| b
.scrollTop
) -
782 * Set up all the mouse handlers needed to capture dragging behavior for zoom
786 Dygraph
.prototype.createDragInterface_
= function() {
789 // Tracks whether the mouse is down right now
790 var isZooming
= false;
791 var isPanning
= false; // is this drag part of a pan?
792 var is2DPan
= false; // if so, is that pan 1- or 2-dimensional?
793 var dragStartX
= null;
794 var dragStartY
= null;
797 var dragDirection
= null;
800 var prevDragDirection
= null;
802 // TODO(danvk): update this comment
803 // draggingDate and draggingValue represent the [date,value] point on the
804 // graph at which the mouse was pressed. As the mouse moves while panning,
805 // the viewport must pan so that the mouse position points to
806 // [draggingDate, draggingValue]
807 var draggingDate
= null;
809 // TODO(danvk): update this comment
810 // The range in second/value units that the viewport encompasses during a
811 // panning operation.
812 var dateRange
= null;
814 // Utility function to convert page-wide coordinates to canvas coords
817 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
818 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
820 // Draw zoom rectangles when the mouse is down and the user moves around
821 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
823 dragEndX
= getX(event
);
824 dragEndY
= getY(event
);
826 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
827 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
829 // drag direction threshold for y axis is twice as large as x axis
830 dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
832 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
833 prevDragDirection
, prevEndX
, prevEndY
);
837 prevDragDirection
= dragDirection
;
838 } else if (isPanning
) {
839 dragEndX
= getX(event
);
840 dragEndY
= getY(event
);
842 // TODO(danvk): update this comment
843 // Want to have it so that:
844 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
845 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
846 // 3. draggingValue appears at dragEndY.
847 // 4. valueRange is unaltered.
849 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
850 var maxDate
= minDate
+ dateRange
;
851 self
.dateWindow_
= [minDate
, maxDate
];
854 // y-axis scaling is automatic unless this is a full 2D pan.
856 // Adjust each axis appropriately.
857 var y_frac
= dragEndY
/ self
.height_
;
858 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
859 var axis
= self
.axes_
[i
];
860 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
861 var minValue
= maxValue
- axis
.dragValueRange
;
862 axis
.valueWindow
= [ minValue
, maxValue
];
870 // Track the beginning of drag events
871 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
872 // prevents mouse drags from selecting page text.
873 if (event
.preventDefault
) {
874 event
.preventDefault(); // Firefox, Chrome, etc.
876 event
.returnValue
= false; // IE
877 event
.cancelBubble
= true;
880 px
= Dygraph
.findPosX(self
.canvas_
);
881 py
= Dygraph
.findPosY(self
.canvas_
);
882 dragStartX
= getX(event
);
883 dragStartY
= getY(event
);
885 if (event
.altKey
|| event
.shiftKey
) {
886 // have to be zoomed in to pan.
888 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
889 if (self
.axes_
[i
].valueWindow
|| self
.axes_
[i
].valueRange
) {
894 if (!self
.dateWindow_
&& !zoomedY
) return;
897 var xRange
= self
.xAxisRange();
898 dateRange
= xRange
[1] - xRange
[0];
900 // Record the range of each y-axis at the start of the drag.
901 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
903 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
904 var axis
= self
.axes_
[i
];
905 var yRange
= self
.yAxisRange(i
);
906 axis
.dragValueRange
= yRange
[1] - yRange
[0];
907 var r
= self
.toDataCoords(null, dragStartY
, i
);
908 axis
.draggingValue
= r
[1];
909 if (axis
.valueWindow
|| axis
.valueRange
) is2DPan
= true;
912 // TODO(konigsberg): Switch from all this math to toDataCoords?
913 // Seems to work for the dragging value.
914 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+ xRange
[0];
920 // If the user releases the mouse button during a drag, but not over the
921 // canvas, then it doesn't count as a zooming action.
922 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
923 if (isZooming
|| isPanning
) {
933 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
934 delete self
.axes_
[i
].draggingValue
;
935 delete self
.axes_
[i
].dragValueRange
;
940 // Temporarily cancel the dragging event when the mouse leaves the graph
941 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
948 // If the mouse is released on the canvas during a drag event, then it's a
949 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
950 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
953 dragEndX
= getX(event
);
954 dragEndY
= getY(event
);
955 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
956 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
958 if (regionWidth
< 2 && regionHeight
< 2 &&
959 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
960 // TODO(danvk): pass along more info about the points, e.g. 'x'
961 if (self
.attr_('clickCallback') != null) {
962 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
964 if (self
.attr_('pointClickCallback')) {
965 // check if the click was on a particular point.
967 var closestDistance
= 0;
968 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
969 var p
= self
.selPoints_
[i
];
970 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
971 Math
.pow(p
.canvasy
- dragEndY
, 2);
972 if (closestIdx
== -1 || distance
< closestDistance
) {
973 closestDistance
= distance
;
978 // Allow any click within two pixels of the dot.
979 var radius
= self
.attr_('highlightCircleSize') + 2;
980 if (closestDistance
<= 5 * 5) {
981 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
986 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
987 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
988 Math
.max(dragStartX
, dragEndX
));
989 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
990 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
991 Math
.max(dragStartY
, dragEndY
));
993 self
.canvas_
.getContext("2d").clearRect(0, 0,
995 self
.canvas_
.height
);
1005 draggingDate
= null;
1011 // Double-clicking zooms back out
1012 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
1013 // Disable zooming out if panning.
1014 if (event
.altKey
|| event
.shiftKey
) return;
1021 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1022 * up any previous zoom rectangles that were drawn. This could be optimized to
1023 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1026 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1027 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1028 * @param {Number} startX The X position where the drag started, in canvas
1030 * @param {Number} endX The current X position of the drag, in canvas coords.
1031 * @param {Number} startY The Y position where the drag started, in canvas
1033 * @param {Number} endY The current Y position of the drag, in canvas coords.
1034 * @param {Number} prevDirection the value of direction on the previous call to
1035 * this function. Used to avoid excess redrawing
1036 * @param {Number} prevEndX The value of endX on the previous call to this
1037 * function. Used to avoid excess redrawing
1038 * @param {Number} prevEndY The value of endY on the previous call to this
1039 * function. Used to avoid excess redrawing
1042 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1043 prevDirection
, prevEndX
, prevEndY
) {
1044 var ctx
= this.canvas_
.getContext("2d");
1046 // Clean up from the previous rect if necessary
1047 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1048 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1049 Math
.abs(startX
- prevEndX
), this.height_
);
1050 } else if (prevDirection
== Dygraph
.VERTICAL
){
1051 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1052 this.width_
, Math
.abs(startY
- prevEndY
));
1055 // Draw a light-grey rectangle to show the new viewing area
1056 if (direction
== Dygraph
.HORIZONTAL
) {
1057 if (endX
&& startX
) {
1058 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1059 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1060 Math
.abs(endX
- startX
), this.height_
);
1063 if (direction
== Dygraph
.VERTICAL
) {
1064 if (endY
&& startY
) {
1065 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1066 ctx
.fillRect(0, Math
.min(startY
, endY
),
1067 this.width_
, Math
.abs(endY
- startY
));
1073 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1074 * the canvas. The exact zoom window may be slightly larger if there are no data
1075 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1076 * which accepts dates that match the raw data. This function redraws the graph.
1078 * @param {Number} lowX The leftmost pixel value that should be visible.
1079 * @param {Number} highX The rightmost pixel value that should be visible.
1082 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1083 // Find the earliest and latest dates contained in this canvasx range.
1084 // Convert the call to date ranges of the raw data.
1085 var r
= this.toDataCoords(lowX
, null);
1087 r
= this.toDataCoords(highX
, null);
1089 this.doZoomXDates_(minDate
, maxDate
);
1093 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1094 * method with doZoomX which accepts pixel coordinates. This function redraws
1097 * @param {Number} minDate The minimum date that should be visible.
1098 * @param {Number} maxDate The maximum date that should be visible.
1101 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1102 this.dateWindow_
= [minDate
, maxDate
];
1104 if (this.attr_("zoomCallback")) {
1105 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1110 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1111 * the canvas. This function redraws the graph.
1113 * @param {Number} lowY The topmost pixel value that should be visible.
1114 * @param {Number} highY The lowest pixel value that should be visible.
1117 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1118 // Find the highest and lowest values in pixel range for each axis.
1119 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1120 // This is because pixels increase as you go down on the screen, whereas data
1121 // coordinates increase as you go up the screen.
1122 var valueRanges
= [];
1123 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1124 var hi
= this.toDataCoords(null, lowY
, i
);
1125 var low
= this.toDataCoords(null, highY
, i
);
1126 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1127 valueRanges
.push([low
[1], hi
[1]]);
1131 if (this.attr_("zoomCallback")) {
1132 var xRange
= this.xAxisRange();
1133 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1138 * Reset the zoom to the original view coordinates. This is the same as
1139 * double-clicking on the graph.
1143 Dygraph
.prototype.doUnzoom_
= function() {
1145 if (this.dateWindow_
!= null) {
1147 this.dateWindow_
= null;
1150 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1151 if (this.axes_
[i
].valueWindow
!= null) {
1153 delete this.axes_
[i
].valueWindow
;
1158 // Putting the drawing operation before the callback because it resets
1161 if (this.attr_("zoomCallback")) {
1162 var minDate
= this.rawData_
[0][0];
1163 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1164 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1170 * When the mouse moves in the canvas, display information about a nearby data
1171 * point and draw dots over those points in the data series. This function
1172 * takes care of cleanup of previously-drawn dots.
1173 * @param {Object} event The mousemove event from the browser.
1176 Dygraph
.prototype.mouseMove_
= function(event
) {
1177 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1178 var points
= this.layout_
.points
;
1183 // Loop through all the points and find the date nearest to our current
1185 var minDist
= 1e+100;
1187 for (var i
= 0; i
< points
.length
; i
++) {
1188 var point
= points
[i
];
1189 if (point
== null) continue;
1190 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1191 if (dist
> minDist
) continue;
1195 if (idx
>= 0) lastx
= points
[idx
].xval
;
1196 // Check that you can really highlight the last day's data
1197 var last
= points
[points
.length
-1];
1198 if (last
!= null && canvasx
> last
.canvasx
)
1199 lastx
= points
[points
.length
-1].xval
;
1201 // Extract the points we've selected
1202 this.selPoints_
= [];
1203 var l
= points
.length
;
1204 if (!this.attr_("stackedGraph")) {
1205 for (var i
= 0; i
< l
; i
++) {
1206 if (points
[i
].xval
== lastx
) {
1207 this.selPoints_
.push(points
[i
]);
1211 // Need to 'unstack' points starting from the bottom
1212 var cumulative_sum
= 0;
1213 for (var i
= l
- 1; i
>= 0; i
--) {
1214 if (points
[i
].xval
== lastx
) {
1215 var p
= {}; // Clone the point since we modify it
1216 for (var k
in points
[i
]) {
1217 p
[k
] = points
[i
][k
];
1219 p
.yval
-= cumulative_sum
;
1220 cumulative_sum
+= p
.yval
;
1221 this.selPoints_
.push(p
);
1224 this.selPoints_
.reverse();
1227 if (this.attr_("highlightCallback")) {
1228 var px
= this.lastx_
;
1229 if (px
!== null && lastx
!= px
) {
1230 // only fire if the selected point has changed.
1231 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1235 // Save last x position for callbacks.
1236 this.lastx_
= lastx
;
1238 this.updateSelection_();
1242 * Transforms layout_.points index into data row number.
1243 * @param int layout_.points index
1244 * @return int row number, or -1 if none could be found.
1247 Dygraph
.prototype.idxToRow_
= function(idx
) {
1248 if (idx
< 0) return -1;
1250 for (var i
in this.layout_
.datasets
) {
1251 if (idx
< this.layout_
.datasets
[i
].length
) {
1252 return this.boundaryIds_
[0][0]+idx
;
1254 idx
-= this.layout_
.datasets
[i
].length
;
1260 * Draw dots over the selectied points in the data series. This function
1261 * takes care of cleanup of previously-drawn dots.
1264 Dygraph
.prototype.updateSelection_
= function() {
1265 // Clear the previously drawn vertical, if there is one
1266 var ctx
= this.canvas_
.getContext("2d");
1267 if (this.previousVerticalX_
>= 0) {
1268 // Determine the maximum highlight circle size.
1269 var maxCircleSize
= 0;
1270 var labels
= this.attr_('labels');
1271 for (var i
= 1; i
< labels
.length
; i
++) {
1272 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1273 if (r
> maxCircleSize
) maxCircleSize
= r
;
1275 var px
= this.previousVerticalX_
;
1276 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1277 2 * maxCircleSize
+ 2, this.height_
);
1280 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1282 if (this.selPoints_
.length
> 0) {
1283 var canvasx
= this.selPoints_
[0].canvasx
;
1285 // Set the status message to indicate the selected point(s)
1286 var replace
= this.attr_('xValueFormatter')(
1287 this.lastx_
, this.numXDigits_
+ this.numExtraDigits_
) + ":";
1288 var fmtFunc
= this.attr_('yValueFormatter');
1289 var clen
= this.colors_
.length
;
1291 if (this.attr_('showLabelsOnHighlight')) {
1292 // Set the status message to indicate the selected point(s)
1293 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1294 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1295 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1296 if (this.attr_("labelsSeparateLines")) {
1299 var point
= this.selPoints_
[i
];
1300 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1301 var yval
= fmtFunc(point
.yval
, this.numYDigits_
+ this.numExtraDigits_
);
1302 replace
+= " <b><font color='" + c
.toHex() + "'>"
1303 + point
.name
+ "</font></b>:"
1307 this.attr_("labelsDiv").innerHTML
= replace
;
1310 // Draw colored circles over the center of each selected point
1312 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1313 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1315 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1317 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1318 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1319 0, 2 * Math
.PI
, false);
1324 this.previousVerticalX_
= canvasx
;
1329 * Set manually set selected dots, and display information about them
1330 * @param int row number that should by highlighted
1331 * false value clears the selection
1334 Dygraph
.prototype.setSelection
= function(row
) {
1335 // Extract the points we've selected
1336 this.selPoints_
= [];
1339 if (row
!== false) {
1340 row
= row
-this.boundaryIds_
[0][0];
1343 if (row
!== false && row
>= 0) {
1344 for (var i
in this.layout_
.datasets
) {
1345 if (row
< this.layout_
.datasets
[i
].length
) {
1346 var point
= this.layout_
.points
[pos
+row
];
1348 if (this.attr_("stackedGraph")) {
1349 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1352 this.selPoints_
.push(point
);
1354 pos
+= this.layout_
.datasets
[i
].length
;
1358 if (this.selPoints_
.length
) {
1359 this.lastx_
= this.selPoints_
[0].xval
;
1360 this.updateSelection_();
1363 this.clearSelection();
1369 * The mouse has left the canvas. Clear out whatever artifacts remain
1370 * @param {Object} event the mouseout event from the browser.
1373 Dygraph
.prototype.mouseOut_
= function(event
) {
1374 if (this.attr_("unhighlightCallback")) {
1375 this.attr_("unhighlightCallback")(event
);
1378 if (this.attr_("hideOverlayOnMouseOut")) {
1379 this.clearSelection();
1384 * Remove all selection from the canvas
1387 Dygraph
.prototype.clearSelection
= function() {
1388 // Get rid of the overlay data
1389 var ctx
= this.canvas_
.getContext("2d");
1390 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1391 this.attr_("labelsDiv").innerHTML
= "";
1392 this.selPoints_
= [];
1397 * Returns the number of the currently selected row
1398 * @return int row number, of -1 if nothing is selected
1401 Dygraph
.prototype.getSelection
= function() {
1402 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1406 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1407 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1408 return row
+ this.boundaryIds_
[0][0];
1414 Dygraph
.zeropad
= function(x
) {
1415 if (x
< 10) return "0" + x
; else return "" + x
;
1419 * Return a string version of the hours, minutes and seconds portion of a date.
1420 * @param {Number} date The JavaScript date (ms since epoch)
1421 * @return {String} A time of the form "HH:MM:SS"
1424 Dygraph
.hmsString_
= function(date
) {
1425 var zeropad
= Dygraph
.zeropad
;
1426 var d
= new Date(date
);
1427 if (d
.getSeconds()) {
1428 return zeropad(d
.getHours()) + ":" +
1429 zeropad(d
.getMinutes()) + ":" +
1430 zeropad(d
.getSeconds());
1432 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1437 * Convert a JS date to a string appropriate to display on an axis that
1438 * is displaying values at the stated granularity.
1439 * @param {Date} date The date to format
1440 * @param {Number} granularity One of the Dygraph granularity constants
1441 * @return {String} The formatted date
1444 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1445 if (granularity
>= Dygraph
.MONTHLY
) {
1446 return date
.strftime('%b %y');
1448 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1449 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1450 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1452 return Dygraph
.hmsString_(date
.getTime());
1458 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1459 * @param {Number} date The JavaScript date (ms since epoch)
1460 * @return {String} A date of the form "YYYY/MM/DD"
1463 Dygraph
.dateString_
= function(date
) {
1464 var zeropad
= Dygraph
.zeropad
;
1465 var d
= new Date(date
);
1468 var year
= "" + d
.getFullYear();
1469 // Get a 0 padded month string
1470 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1471 // Get a 0 padded day string
1472 var day
= zeropad(d
.getDate());
1475 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1476 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1478 return year
+ "/" + month + "/" + day
+ ret
;
1482 * Fires when there's data available to be graphed.
1483 * @param {String} data Raw CSV data to be plotted
1486 Dygraph
.prototype.loadedEvent_
= function(data
) {
1487 this.rawData_
= this.parseCSV_(data
);
1491 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1492 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1493 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1496 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1499 Dygraph
.prototype.addXTicks_
= function() {
1500 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1501 var opts
= {xTicks
: []};
1502 var formatter
= this.attr_('xTicker');
1503 if (this.dateWindow_
) {
1504 opts
.xTicks
= formatter(this.dateWindow_
[0], this.dateWindow_
[1], this);
1506 // numericTicks() returns multiple values.
1507 var ret
= formatter(this.rawData_
[0][0],
1508 this.rawData_
[this.rawData_
.length
- 1][0], this);
1509 opts
.xTicks
= ret
.ticks
;
1510 this.numXDigits_
= ret
.numDigits
;
1512 this.layout_
.updateOptions(opts
);
1515 // Time granularity enumeration
1516 Dygraph
.SECONDLY
= 0;
1517 Dygraph
.TWO_SECONDLY
= 1;
1518 Dygraph
.FIVE_SECONDLY
= 2;
1519 Dygraph
.TEN_SECONDLY
= 3;
1520 Dygraph
.THIRTY_SECONDLY
= 4;
1521 Dygraph
.MINUTELY
= 5;
1522 Dygraph
.TWO_MINUTELY
= 6;
1523 Dygraph
.FIVE_MINUTELY
= 7;
1524 Dygraph
.TEN_MINUTELY
= 8;
1525 Dygraph
.THIRTY_MINUTELY
= 9;
1526 Dygraph
.HOURLY
= 10;
1527 Dygraph
.TWO_HOURLY
= 11;
1528 Dygraph
.SIX_HOURLY
= 12;
1530 Dygraph
.WEEKLY
= 14;
1531 Dygraph
.MONTHLY
= 15;
1532 Dygraph
.QUARTERLY
= 16;
1533 Dygraph
.BIANNUAL
= 17;
1534 Dygraph
.ANNUAL
= 18;
1535 Dygraph
.DECADAL
= 19;
1536 Dygraph
.NUM_GRANULARITIES
= 20;
1538 Dygraph
.SHORT_SPACINGS
= [];
1539 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1540 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1541 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1542 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1543 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1544 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1545 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1546 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1547 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1548 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1549 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1550 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1551 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1552 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1553 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1557 // If we used this time granularity, how many ticks would there be?
1558 // This is only an approximation, but it's generally good enough.
1560 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1561 if (granularity
< Dygraph
.MONTHLY
) {
1562 // Generate one tick mark for every fixed interval of time.
1563 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1564 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1566 var year_mod
= 1; // e.g. to only print one point every 10 years.
1567 var num_months
= 12;
1568 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1569 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1570 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1571 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1573 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1574 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1575 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1581 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1582 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1584 // Returns an array containing {v: millis, label: label} dictionaries.
1586 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1587 var formatter
= this.attr_("xAxisLabelFormatter");
1589 if (granularity
< Dygraph
.MONTHLY
) {
1590 // Generate one tick mark for every fixed interval of time.
1591 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1592 var format
= '%d%b'; // e.g. "1Jan"
1594 // Find a time less than start_time which occurs on a "nice" time boundary
1595 // for this granularity.
1596 var g
= spacing
/ 1000;
1597 var d
= new Date(start_time
);
1598 if (g
<= 60) { // seconds
1599 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1603 if (g
<= 60) { // minutes
1604 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1609 if (g
<= 24) { // days
1610 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1615 if (g
== 7) { // one week
1616 d
.setDate(d
.getDate() - d
.getDay());
1621 start_time
= d
.getTime();
1623 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1624 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1627 // Display a tick mark on the first of a set of months of each year.
1628 // Years get a tick mark iff y % year_mod == 0. This is useful for
1629 // displaying a tick mark once every 10 years, say, on long time scales.
1631 var year_mod
= 1; // e.g. to only print one point every 10 years.
1633 if (granularity
== Dygraph
.MONTHLY
) {
1634 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1635 } else if (granularity
== Dygraph
.QUARTERLY
) {
1636 months
= [ 0, 3, 6, 9 ];
1637 } else if (granularity
== Dygraph
.BIANNUAL
) {
1639 } else if (granularity
== Dygraph
.ANNUAL
) {
1641 } else if (granularity
== Dygraph
.DECADAL
) {
1646 var start_year
= new Date(start_time
).getFullYear();
1647 var end_year
= new Date(end_time
).getFullYear();
1648 var zeropad
= Dygraph
.zeropad
;
1649 for (var i
= start_year
; i
<= end_year
; i
++) {
1650 if (i
% year_mod
!= 0) continue;
1651 for (var j
= 0; j
< months
.length
; j
++) {
1652 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1653 var t
= Date
.parse(date_str
);
1654 if (t
< start_time
|| t
> end_time
) continue;
1655 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1665 * Add ticks to the x-axis based on a date range.
1666 * @param {Number} startDate Start of the date window (millis since epoch)
1667 * @param {Number} endDate End of the date window (millis since epoch)
1668 * @return {Array.<Object>} Array of {label, value} tuples.
1671 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1673 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1674 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1675 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1682 return self
.GetXAxis(startDate
, endDate
, chosen
);
1684 // TODO(danvk): signal error.
1689 * Determine the number of significant figures in a Number up to the specified
1690 * precision. Note that there is no way to determine if a trailing '0' is
1691 * significant or not, so by convention we return 1 for all of the following
1692 * inputs: 1, 1.0, 1.00, 1.000 etc.
1693 * @param {Number} x The input value.
1694 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
1695 * Default and maximum allowed value is 13.
1696 * @return {Number} The number of significant figures which is >= 1.
1698 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
1699 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
1701 // Convert the number to its exponential notation form and work backwards,
1702 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
1703 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
1704 // the JavaScript interpreter handle the low level bits of the Number for us.
1705 var s
= x
.toExponential(precision
);
1706 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
1708 for (var i
= ePos
- 1; i
>= 0; i
--) {
1710 // Got to the decimal place. We'll call this 1 digit of precision because
1711 // we can't know for sure how many trailing 0s are significant.
1713 } else if (s
[i
] != '0') {
1714 // Found the first non-zero digit. Return the number of characters
1715 // except for the '.'.
1716 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
1720 // Occurs if toExponential() doesn't return a string containing 'e', which
1721 // should never happen.
1726 * Add ticks when the x axis has numbers on it (instead of dates)
1727 * @param {Number} startDate Start of the date window (millis since epoch)
1728 * @param {Number} endDate End of the date window (millis since epoch)
1730 * @param {function} attribute accessor function.
1731 * @return {Array.<Object>} Array of {label, value} tuples.
1734 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1735 var attr
= function(k
) {
1736 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1737 return self
.attr_(k
);
1742 for (var i
= 0; i
< vals
.length
; i
++) {
1743 ticks
[i
].push({v
: vals
[i
]});
1747 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1748 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1749 // The first spacing greater than pixelsPerYLabel is what we use.
1750 // TODO(danvk): version that works on a log scale.
1751 if (attr("labelsKMG2")) {
1752 var mults
= [1, 2, 4, 8];
1754 var mults
= [1, 2, 5];
1756 var scale
, low_val
, high_val
, nTicks
;
1757 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1758 var pixelsPerTick
= attr('pixelsPerYLabel');
1759 for (var i
= -10; i
< 50; i
++) {
1760 if (attr("labelsKMG2")) {
1761 var base_scale
= Math
.pow(16, i
);
1763 var base_scale
= Math
.pow(10, i
);
1765 for (var j
= 0; j
< mults
.length
; j
++) {
1766 scale
= base_scale
* mults
[j
];
1767 low_val
= Math
.floor(minV
/ scale
) * scale
;
1768 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1769 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1770 var spacing
= self
.height_
/ nTicks
;
1771 // wish I could break out of both loops at once...
1772 if (spacing
> pixelsPerTick
) break;
1774 if (spacing
> pixelsPerTick
) break;
1777 // Construct the set of ticks.
1778 // Allow reverse y-axis if it's explicitly requested.
1779 if (low_val
> high_val
) scale
*= -1;
1780 for (var i
= 0; i
< nTicks
; i
++) {
1781 var tickV
= low_val
+ i
* scale
;
1782 ticks
.push( {v
: tickV
} );
1786 // Add formatted labels to the ticks.
1789 if (attr("labelsKMB")) {
1791 k_labels
= [ "K", "M", "B", "T" ];
1793 if (attr("labelsKMG2")) {
1794 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1796 k_labels
= [ "k", "M", "G", "T" ];
1798 var formatter
= attr('yAxisLabelFormatter') ?
1799 attr('yAxisLabelFormatter') : attr('yValueFormatter');
1801 // Determine the number of decimal places needed for the labels below by
1802 // taking the maximum number of significant figures for any label. We must
1803 // take the max because we can't tell if trailing 0s are significant.
1805 for (var i
= 0; i
< ticks
.length
; i
++) {
1806 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
1809 for (var i
= 0; i
< ticks
.length
; i
++) {
1810 var tickV
= ticks
[i
].v
;
1811 var absTickV
= Math
.abs(tickV
);
1812 var label
= (formatter
!== undefined
) ?
1813 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
1814 if (k_labels
.length
> 0) {
1815 // Round up to an appropriate unit.
1817 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1818 if (absTickV
>= n
) {
1819 label
= (tickV
/ n
).toPrecision(numDigits
) + k_labels
[j
];
1824 ticks
[i
].label
= label
;
1826 return {ticks
: ticks
, numDigits
: numDigits
};
1829 // Computes the range of the data series (including confidence intervals).
1830 // series is either [ [x1, y1], [x2, y2], ... ] or
1831 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1832 // Returns [low, high]
1833 Dygraph
.prototype.extremeValues_
= function(series
) {
1834 var minY
= null, maxY
= null;
1836 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1838 // With custom bars, maxY is the max of the high values.
1839 for (var j
= 0; j
< series
.length
; j
++) {
1840 var y
= series
[j
][1][0];
1842 var low
= y
- series
[j
][1][1];
1843 var high
= y
+ series
[j
][1][2];
1844 if (low
> y
) low
= y
; // this can happen with custom bars,
1845 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1846 if (maxY
== null || high
> maxY
) {
1849 if (minY
== null || low
< minY
) {
1854 for (var j
= 0; j
< series
.length
; j
++) {
1855 var y
= series
[j
][1];
1856 if (y
=== null || isNaN(y
)) continue;
1857 if (maxY
== null || y
> maxY
) {
1860 if (minY
== null || y
< minY
) {
1866 return [minY
, maxY
];
1870 * This function is called once when the chart's data is changed or the options
1871 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1872 * idea is that values derived from the chart's data can be computed here,
1873 * rather than every time the chart is drawn. This includes things like the
1874 * number of axes, rolling averages, etc.
1876 Dygraph
.prototype.predraw_
= function() {
1877 // TODO(danvk): move more computations out of drawGraph_ and into here.
1878 this.computeYAxes_();
1880 // Create a new plotter.
1881 if (this.plotter_
) this.plotter_
.clear();
1882 this.plotter_
= new DygraphCanvasRenderer(this,
1883 this.hidden_
, this.layout_
,
1884 this.renderOptions_
);
1886 // The roller sits in the bottom left corner of the chart. We don't know where
1887 // this will be until the options are available, so it's positioned here.
1888 this.createRollInterface_();
1890 // Same thing applies for the labelsDiv. It's right edge should be flush with
1891 // the right edge of the charting area (which may not be the same as the right
1892 // edge of the div, if we have two y-axes.
1893 this.positionLabelsDiv_();
1895 // If the data or options have changed, then we'd better redraw.
1901 * Update the graph with new data. This method is called when the viewing area
1902 * has changed. If the underlying data or options have changed, predraw_ will
1903 * be called before drawGraph_ is called.
1906 Dygraph
.prototype.drawGraph_
= function() {
1907 var data
= this.rawData_
;
1909 // This is used to set the second parameter to drawCallback, below.
1910 var is_initial_draw
= this.is_initial_draw_
;
1911 this.is_initial_draw_
= false;
1913 var minY
= null, maxY
= null;
1914 this.layout_
.removeAllDatasets();
1916 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1918 // Loop over the fields (series). Go from the last to the first,
1919 // because if they're stacked that's how we accumulate the values.
1921 var cumulative_y
= []; // For stacked series.
1924 var extremes
= {}; // series name -> [low, high]
1926 // Loop over all fields and create datasets
1927 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1928 if (!this.visibility()[i
- 1]) continue;
1930 var seriesName
= this.attr_("labels")[i
];
1931 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1934 for (var j
= 0; j
< data
.length
; j
++) {
1935 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1936 var date
= data
[j
][0];
1937 series
.push([date
, data
[j
][i
]]);
1941 // TODO(danvk): move this into predraw_. It's insane to do it here.
1942 series
= this.rollingAverage(series
, this.rollPeriod_
);
1944 // Prune down to the desired range, if necessary (for zooming)
1945 // Because there can be lines going to points outside of the visible area,
1946 // we actually prune to visible points, plus one on either side.
1947 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1948 if (this.dateWindow_
) {
1949 var low
= this.dateWindow_
[0];
1950 var high
= this.dateWindow_
[1];
1952 // TODO(danvk): do binary search instead of linear search.
1953 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1954 var firstIdx
= null, lastIdx
= null;
1955 for (var k
= 0; k
< series
.length
; k
++) {
1956 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1959 if (series
[k
][0] <= high
) {
1963 if (firstIdx
=== null) firstIdx
= 0;
1964 if (firstIdx
> 0) firstIdx
--;
1965 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1966 if (lastIdx
< series
.length
- 1) lastIdx
++;
1967 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1968 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1969 pruned
.push(series
[k
]);
1973 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1976 var seriesExtremes
= this.extremeValues_(series
);
1979 for (var j
=0; j
<series
.length
; j
++) {
1980 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1983 } else if (this.attr_("stackedGraph")) {
1984 var l
= series
.length
;
1986 for (var j
= 0; j
< l
; j
++) {
1987 // If one data set has a NaN, let all subsequent stacked
1988 // sets inherit the NaN -- only start at 0 for the first set.
1989 var x
= series
[j
][0];
1990 if (cumulative_y
[x
] === undefined
) {
1991 cumulative_y
[x
] = 0;
1994 actual_y
= series
[j
][1];
1995 cumulative_y
[x
] += actual_y
;
1997 series
[j
] = [x
, cumulative_y
[x
]]
1999 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2000 seriesExtremes
[1] = cumulative_y
[x
];
2002 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2003 seriesExtremes
[0] = cumulative_y
[x
];
2007 extremes
[seriesName
] = seriesExtremes
;
2009 datasets
[i
] = series
;
2012 for (var i
= 1; i
< datasets
.length
; i
++) {
2013 if (!this.visibility()[i
- 1]) continue;
2014 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2017 this.computeYAxisRanges_(extremes
);
2018 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2019 seriesToAxisMap
: this.seriesToAxisMap_
2024 // Tell PlotKit to use this new data and render itself
2025 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2026 this.layout_
.evaluateWithError();
2027 this.plotter_
.clear();
2028 this.plotter_
.render();
2029 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2030 this.canvas_
.height
);
2032 if (this.attr_("drawCallback") !== null) {
2033 this.attr_("drawCallback")(this, is_initial_draw
);
2038 * Determine properties of the y-axes which are independent of the data
2039 * currently being displayed. This includes things like the number of axes and
2040 * the style of the axes. It does not include the range of each axis and its
2042 * This fills in this.axes_ and this.seriesToAxisMap_.
2043 * axes_ = [ { options } ]
2044 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2045 * indices are into the axes_ array.
2047 Dygraph
.prototype.computeYAxes_
= function() {
2048 this.axes_
= [{}]; // always have at least one y-axis.
2049 this.seriesToAxisMap_
= {};
2051 // Get a list of series names.
2052 var labels
= this.attr_("labels");
2054 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2056 // all options which could be applied per-axis:
2064 'axisLabelFontSize',
2068 // Copy global axis options over to the first axis.
2069 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2070 var k
= axisOptions
[i
];
2071 var v
= this.attr_(k
);
2072 if (v
) this.axes_
[0][k
] = v
;
2075 // Go through once and add all the axes.
2076 for (var seriesName
in series
) {
2077 if (!series
.hasOwnProperty(seriesName
)) continue;
2078 var axis
= this.attr_("axis", seriesName
);
2080 this.seriesToAxisMap_
[seriesName
] = 0;
2083 if (typeof(axis
) == 'object') {
2084 // Add a new axis, making a copy of its per-axis options.
2086 Dygraph
.update(opts
, this.axes_
[0]);
2087 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2088 Dygraph
.update(opts
, axis
);
2089 this.axes_
.push(opts
);
2090 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2094 // Go through one more time and assign series to an axis defined by another
2095 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2096 for (var seriesName
in series
) {
2097 if (!series
.hasOwnProperty(seriesName
)) continue;
2098 var axis
= this.attr_("axis", seriesName
);
2099 if (typeof(axis
) == 'string') {
2100 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2101 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2102 "series " + axis
+ ", which does not define its own axis.");
2105 var idx
= this.seriesToAxisMap_
[axis
];
2106 this.seriesToAxisMap_
[seriesName
] = idx
;
2110 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2111 // this last so that hiding the first series doesn't destroy the axis
2112 // properties of the primary axis.
2113 var seriesToAxisFiltered
= {};
2114 var vis
= this.visibility();
2115 for (var i
= 1; i
< labels
.length
; i
++) {
2117 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2119 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2123 * Returns the number of y-axes on the chart.
2124 * @return {Number} the number of axes.
2126 Dygraph
.prototype.numAxes
= function() {
2128 for (var series
in this.seriesToAxisMap_
) {
2129 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2130 var idx
= this.seriesToAxisMap_
[series
];
2131 if (idx
> last_axis
) last_axis
= idx
;
2133 return 1 + last_axis
;
2137 * Determine the value range and tick marks for each axis.
2138 * @param {Object} extremes A mapping from seriesName -> [low, high]
2139 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2141 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2142 // Build a map from axis number -> [list of series names]
2143 var seriesForAxis
= [];
2144 for (var series
in this.seriesToAxisMap_
) {
2145 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2146 var idx
= this.seriesToAxisMap_
[series
];
2147 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2148 seriesForAxis
[idx
].push(series
);
2151 // Compute extreme values, a span and tick marks for each axis.
2152 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2153 var axis
= this.axes_
[i
];
2154 if (axis
.valueWindow
) {
2155 // This is only set if the user has zoomed on the y-axis. It is never set
2156 // by a user. It takes precedence over axis.valueRange because, if you set
2157 // valueRange, you'd still expect to be able to pan.
2158 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2159 } else if (axis
.valueRange
) {
2160 // This is a user-set value range for this axis.
2161 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2163 // Calculate the extremes of extremes.
2164 var series
= seriesForAxis
[i
];
2165 var minY
= Infinity
; // extremes[series[0]][0];
2166 var maxY
= -Infinity
; // extremes[series[0]][1];
2167 for (var j
= 0; j
< series
.length
; j
++) {
2168 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2169 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2171 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2173 // Add some padding and round up to an integer to be human-friendly.
2174 var span
= maxY
- minY
;
2175 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2176 if (span
== 0) { span
= maxY
; }
2177 var maxAxisY
= maxY
+ 0.1 * span
;
2178 var minAxisY
= minY
- 0.1 * span
;
2180 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2181 if (!this.attr_("avoidMinZero")) {
2182 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2183 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2186 if (this.attr_("includeZero")) {
2187 if (maxY
< 0) maxAxisY
= 0;
2188 if (minY
> 0) minAxisY
= 0;
2191 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2194 // Add ticks. By default, all axes inherit the tick positions of the
2195 // primary axis. However, if an axis is specifically marked as having
2196 // independent ticks, then that is permissible as well.
2197 if (i
== 0 || axis
.independentTicks
) {
2199 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2200 axis
.computedValueRange
[1],
2203 axis
.ticks
= ret
.ticks
;
2204 this.numYDigits_
= ret
.numDigits
;
2206 var p_axis
= this.axes_
[0];
2207 var p_ticks
= p_axis
.ticks
;
2208 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2209 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2210 var tick_values
= [];
2211 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2212 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2213 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2214 tick_values
.push(y_val
);
2218 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2219 axis
.computedValueRange
[1],
2220 this, axis
, tick_values
);
2221 axis
.ticks
= ret
.ticks
;
2222 this.numYDigits_
= ret
.numDigits
;
2228 * Calculates the rolling average of a data set.
2229 * If originalData is [label, val], rolls the average of those.
2230 * If originalData is [label, [, it's interpreted as [value, stddev]
2231 * and the roll is returned in the same form, with appropriately reduced
2232 * stddev for each value.
2233 * Note that this is where fractional input (i.e. '5/10') is converted into
2235 * @param {Array} originalData The data in the appropriate format (see above)
2236 * @param {Number} rollPeriod The number of points over which to average the
2239 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2240 if (originalData
.length
< 2)
2241 return originalData
;
2242 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2243 var rollingData
= [];
2244 var sigma
= this.attr_("sigma");
2246 if (this.fractions_
) {
2248 var den
= 0; // numerator/denominator
2250 for (var i
= 0; i
< originalData
.length
; i
++) {
2251 num
+= originalData
[i
][1][0];
2252 den
+= originalData
[i
][1][1];
2253 if (i
- rollPeriod
>= 0) {
2254 num
-= originalData
[i
- rollPeriod
][1][0];
2255 den
-= originalData
[i
- rollPeriod
][1][1];
2258 var date
= originalData
[i
][0];
2259 var value
= den
? num
/ den
: 0.0;
2260 if (this.attr_("errorBars")) {
2261 if (this.wilsonInterval_
) {
2262 // For more details on this confidence interval, see:
2263 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2265 var p
= value
< 0 ? 0 : value
, n
= den
;
2266 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2267 var denom
= 1 + sigma
* sigma
/ den
;
2268 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2269 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2270 rollingData
[i
] = [date
,
2271 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2273 rollingData
[i
] = [date
, [0, 0, 0]];
2276 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2277 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2280 rollingData
[i
] = [date
, mult
* value
];
2283 } else if (this.attr_("customBars")) {
2288 for (var i
= 0; i
< originalData
.length
; i
++) {
2289 var data
= originalData
[i
][1];
2291 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2293 if (y
!= null && !isNaN(y
)) {
2299 if (i
- rollPeriod
>= 0) {
2300 var prev
= originalData
[i
- rollPeriod
];
2301 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2308 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2309 1.0 * (mid
- low
) / count
,
2310 1.0 * (high
- mid
) / count
]];
2313 // Calculate the rolling average for the first rollPeriod - 1 points where
2314 // there is not enough data to roll over the full number of points
2315 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2316 if (!this.attr_("errorBars")){
2317 if (rollPeriod
== 1) {
2318 return originalData
;
2321 for (var i
= 0; i
< originalData
.length
; i
++) {
2324 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2325 var y
= originalData
[j
][1];
2326 if (y
== null || isNaN(y
)) continue;
2328 sum
+= originalData
[j
][1];
2331 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2333 rollingData
[i
] = [originalData
[i
][0], null];
2338 for (var i
= 0; i
< originalData
.length
; i
++) {
2342 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2343 var y
= originalData
[j
][1][0];
2344 if (y
== null || isNaN(y
)) continue;
2346 sum
+= originalData
[j
][1][0];
2347 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2350 var stddev
= Math
.sqrt(variance
) / num_ok
;
2351 rollingData
[i
] = [originalData
[i
][0],
2352 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2354 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2364 * Parses a date, returning the number of milliseconds since epoch. This can be
2365 * passed in as an xValueParser in the Dygraph constructor.
2366 * TODO(danvk): enumerate formats that this understands.
2367 * @param {String} A date in YYYYMMDD format.
2368 * @return {Number} Milliseconds since epoch.
2371 Dygraph
.dateParser
= function(dateStr
, self
) {
2374 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2375 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2376 while (dateStrSlashed
.search("-") != -1) {
2377 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2379 d
= Date
.parse(dateStrSlashed
);
2380 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2381 // TODO(danvk): remove support for this format. It's confusing.
2382 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2383 + "/" + dateStr
.substr(6,2);
2384 d
= Date
.parse(dateStrSlashed
);
2386 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2387 // "2009/07/12 12:34:56"
2388 d
= Date
.parse(dateStr
);
2391 if (!d
|| isNaN(d
)) {
2392 self
.error("Couldn't parse " + dateStr
+ " as a date");
2398 * Detects the type of the str (date or numeric) and sets the various
2399 * formatting attributes in this.attrs_ based on this type.
2400 * @param {String} str An x value.
2403 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2405 if (str
.indexOf('-') >= 0 ||
2406 str
.indexOf('/') >= 0 ||
2407 isNaN(parseFloat(str
))) {
2409 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2410 // TODO(danvk): remove support for this format.
2415 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2416 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2417 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2418 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2420 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
2421 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2422 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2423 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2428 * Parses a string in a special csv format. We expect a csv file where each
2429 * line is a date point, and the first field in each line is the date string.
2430 * We also expect that all remaining fields represent series.
2431 * if the errorBars attribute is set, then interpret the fields as:
2432 * date, series1, stddev1, series2, stddev2, ...
2433 * @param {Array.<Object>} data See above.
2436 * @return Array.<Object> An array with one entry for each row. These entries
2437 * are an array of cells in that row. The first entry is the parsed x-value for
2438 * the row. The second, third, etc. are the y-values. These can take on one of
2439 * three forms, depending on the CSV and constructor parameters:
2441 * 2. [ value, stddev ]
2442 * 3. [ low value, center value, high value ]
2444 Dygraph
.prototype.parseCSV_
= function(data
) {
2446 var lines
= data
.split("\n");
2448 // Use the default delimiter or fall back to a tab if that makes sense.
2449 var delim
= this.attr_('delimiter');
2450 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2455 if (this.labelsFromCSV_
) {
2457 this.attrs_
.labels
= lines
[0].split(delim
);
2460 // Parse the x as a float or return null if it's not a number.
2461 var parseFloatOrNull
= function(x
) {
2462 var val
= parseFloat(x
);
2463 // isFinite() returns false for NaN and +/-Infinity
.
2464 return isFinite(val
) ? val
: null;
2468 var defaultParserSet
= false; // attempt to auto-detect x value type
2469 var expectedCols
= this.attr_("labels").length
;
2470 var outOfOrder
= false;
2471 for (var i
= start
; i
< lines
.length
; i
++) {
2472 var line
= lines
[i
];
2473 if (line
.length
== 0) continue; // skip blank lines
2474 if (line
[0] == '#') continue; // skip comment lines
2475 var inFields
= line
.split(delim
);
2476 if (inFields
.length
< 2) continue;
2479 if (!defaultParserSet
) {
2480 this.detectTypeFromString_(inFields
[0]);
2481 xParser
= this.attr_("xValueParser");
2482 defaultParserSet
= true;
2484 fields
[0] = xParser(inFields
[0], this);
2486 // If fractions are expected, parse the numbers as "A/B
"
2487 if (this.fractions_) {
2488 for (var j = 1; j < inFields.length; j++) {
2489 // TODO(danvk): figure out an appropriate way to flag parse errors.
2490 var vals = inFields[j].split("/");
2491 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2493 } else if (this.attr_("errorBars
")) {
2494 // If there are error bars, values are (value, stddev) pairs
2495 for (var j = 1; j < inFields.length; j += 2)
2496 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2497 parseFloatOrNull(inFields[j + 1])];
2498 } else if (this.attr_("customBars
")) {
2499 // Bars are a low;center;high tuple
2500 for (var j = 1; j < inFields.length; j++) {
2501 var vals = inFields[j].split(";");
2502 fields[j] = [ parseFloatOrNull(vals[0]),
2503 parseFloatOrNull(vals[1]),
2504 parseFloatOrNull(vals[2]) ];
2507 // Values are just numbers
2508 for (var j = 1; j < inFields.length; j++) {
2509 fields[j] = parseFloatOrNull(inFields[j]);
2512 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2517 if (fields.length != expectedCols) {
2518 this.error("Number of columns
in line
" + i + " (" + fields.length +
2519 ") does not agree
with number of
labels (" + expectedCols +
2525 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2526 ret.sort(function(a,b) { return a[0] - b[0] });
2533 * The user has provided their data as a pre-packaged JS array. If the x values
2534 * are numeric, this is the same as dygraphs' internal format. If the x values
2535 * are dates, we need to convert them from Date objects to ms since epoch.
2536 * @param {Array.<Object>} data
2537 * @return {Array.<Object>} data with numeric x values.
2539 Dygraph.prototype.parseArray_ = function(data) {
2540 // Peek at the first x value to see if it's numeric.
2541 if (data.length == 0) {
2542 this.error("Can
't plot empty data set");
2545 if (data[0].length == 0) {
2546 this.error("Data set cannot contain an empty row");
2550 if (this.attr_("labels") == null) {
2551 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2552 "in the options parameter");
2553 this.attrs_.labels = [ "X" ];
2554 for (var i = 1; i < data[0].length; i++) {
2555 this.attrs_.labels.push("Y" + i);
2559 if (Dygraph.isDateLike(data[0][0])) {
2560 // Some intelligent defaults for a date x-axis.
2561 this.attrs_.xValueFormatter = Dygraph.dateString_;
2562 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2563 this.attrs_.xTicker = Dygraph.dateTicker;
2565 // Assume they're all dates
.
2566 var parsedData
= Dygraph
.clone(data
);
2567 for (var i
= 0; i
< data
.length
; i
++) {
2568 if (parsedData
[i
].length
== 0) {
2569 this.error("Row " + (1 + i
) + " of data is empty");
2572 if (parsedData
[i
][0] == null
2573 || typeof(parsedData
[i
][0].getTime
) != 'function'
2574 || isNaN(parsedData
[i
][0].getTime())) {
2575 this.error("x value in row " + (1 + i
) + " is not a Date");
2578 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2582 // Some intelligent defaults for a numeric x-axis.
2583 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
2584 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2590 * Parses a DataTable object from gviz.
2591 * The data is expected to have a first column that is either a date or a
2592 * number. All subsequent columns must be numbers. If there is a clear mismatch
2593 * between this.xValueParser_ and the type of the first column, it will be
2594 * fixed. Fills out rawData_.
2595 * @param {Array.<Object>} data See above.
2598 Dygraph
.prototype.parseDataTable_
= function(data
) {
2599 var cols
= data
.getNumberOfColumns();
2600 var rows
= data
.getNumberOfRows();
2602 var indepType
= data
.getColumnType(0);
2603 if (indepType
== 'date' || indepType
== 'datetime') {
2604 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2605 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2606 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2607 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2608 } else if (indepType
== 'number') {
2609 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
2610 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2611 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2612 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2614 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2615 "column 1 of DataTable input (Got '" + indepType
+ "')");
2619 // Array of the column indices which contain data (and not annotations).
2621 var annotationCols
= {}; // data index -> [annotation cols]
2622 var hasAnnotations
= false;
2623 for (var i
= 1; i
< cols
; i
++) {
2624 var type
= data
.getColumnType(i
);
2625 if (type
== 'number') {
2627 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2628 // This is OK -- it's an annotation column.
2629 var dataIdx
= colIdx
[colIdx
.length
- 1];
2630 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2631 annotationCols
[dataIdx
] = [i
];
2633 annotationCols
[dataIdx
].push(i
);
2635 hasAnnotations
= true;
2637 this.error("Only 'number' is supported as a dependent type with Gviz." +
2638 " 'string' is only supported if displayAnnotations is true");
2642 // Read column labels
2643 // TODO(danvk): add support back for errorBars
2644 var labels
= [data
.getColumnLabel(0)];
2645 for (var i
= 0; i
< colIdx
.length
; i
++) {
2646 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2647 if (this.attr_("errorBars")) i
+= 1;
2649 this.attrs_
.labels
= labels
;
2650 cols
= labels
.length
;
2653 var outOfOrder
= false;
2654 var annotations
= [];
2655 for (var i
= 0; i
< rows
; i
++) {
2657 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2658 data
.getValue(i
, 0) === null) {
2659 this.warn("Ignoring row " + i
+
2660 " of DataTable because of undefined or null first column.");
2664 if (indepType
== 'date' || indepType
== 'datetime') {
2665 row
.push(data
.getValue(i
, 0).getTime());
2667 row
.push(data
.getValue(i
, 0));
2669 if (!this.attr_("errorBars")) {
2670 for (var j
= 0; j
< colIdx
.length
; j
++) {
2671 var col
= colIdx
[j
];
2672 row
.push(data
.getValue(i
, col
));
2673 if (hasAnnotations
&&
2674 annotationCols
.hasOwnProperty(col
) &&
2675 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2677 ann
.series
= data
.getColumnLabel(col
);
2679 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2681 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2682 if (k
) ann
.text
+= "\n";
2683 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2685 annotations
.push(ann
);
2689 for (var j
= 0; j
< cols
- 1; j
++) {
2690 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2693 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2697 // Strip out infinities, which give dygraphs problems later on.
2698 for (var j
= 0; j
< row
.length
; j
++) {
2699 if (!isFinite(row
[j
])) row
[j
] = null;
2705 this.warn("DataTable is out of order; order it correctly to speed loading.");
2706 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2708 this.rawData_
= ret
;
2710 if (annotations
.length
> 0) {
2711 this.setAnnotations(annotations
, true);
2715 // These functions are all based on MochiKit.
2716 Dygraph
.update
= function (self
, o
) {
2717 if (typeof(o
) != 'undefined' && o
!== null) {
2719 if (o
.hasOwnProperty(k
)) {
2727 Dygraph
.isArrayLike
= function (o
) {
2728 var typ
= typeof(o
);
2730 (typ
!= 'object' && !(typ
== 'function' &&
2731 typeof(o
.item
) == 'function')) ||
2733 typeof(o
.length
) != 'number' ||
2741 Dygraph
.isDateLike
= function (o
) {
2742 if (typeof(o
) != "object" || o
=== null ||
2743 typeof(o
.getTime
) != 'function') {
2749 Dygraph
.clone
= function(o
) {
2750 // TODO(danvk): figure out how MochiKit's version works
2752 for (var i
= 0; i
< o
.length
; i
++) {
2753 if (Dygraph
.isArrayLike(o
[i
])) {
2754 r
.push(Dygraph
.clone(o
[i
]));
2764 * Get the CSV data. If it's in a function, call that function. If it's in a
2765 * file, do an XMLHttpRequest to get it.
2768 Dygraph
.prototype.start_
= function() {
2769 if (typeof this.file_
== 'function') {
2770 // CSV string. Pretend we got it via XHR.
2771 this.loadedEvent_(this.file_());
2772 } else if (Dygraph
.isArrayLike(this.file_
)) {
2773 this.rawData_
= this.parseArray_(this.file_
);
2775 } else if (typeof this.file_
== 'object' &&
2776 typeof this.file_
.getColumnRange
== 'function') {
2777 // must be a DataTable from gviz.
2778 this.parseDataTable_(this.file_
);
2780 } else if (typeof this.file_
== 'string') {
2781 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2782 if (this.file_
.indexOf('\n') >= 0) {
2783 this.loadedEvent_(this.file_
);
2785 var req
= new XMLHttpRequest();
2787 req
.onreadystatechange
= function () {
2788 if (req
.readyState
== 4) {
2789 if (req
.status
== 200) {
2790 caller
.loadedEvent_(req
.responseText
);
2795 req
.open("GET", this.file_
, true);
2799 this.error("Unknown data format: " + (typeof this.file_
));
2804 * Changes various properties of the graph. These can include:
2806 * <li>file: changes the source data for the graph</li>
2807 * <li>errorBars: changes whether the data contains stddev</li>
2809 * @param {Object} attrs The new properties and values
2811 Dygraph
.prototype.updateOptions
= function(attrs
) {
2812 // TODO(danvk): this is a mess. Rethink this function.
2813 if ('rollPeriod' in attrs
) {
2814 this.rollPeriod_
= attrs
.rollPeriod
;
2816 if ('dateWindow' in attrs
) {
2817 this.dateWindow_
= attrs
.dateWindow
;
2820 // TODO(danvk): validate per-series options.
2825 // highlightCircleSize
2827 Dygraph
.update(this.user_attrs_
, attrs
);
2828 Dygraph
.update(this.renderOptions_
, attrs
);
2830 this.labelsFromCSV_
= (this.attr_("labels") == null);
2832 // TODO(danvk): this doesn't match the constructor logic
2833 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2834 if (attrs
['file']) {
2835 this.file_
= attrs
['file'];
2843 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2844 * containing div (which has presumably changed size since the dygraph was
2845 * instantiated. If the width/height are specified, the div will be resized.
2847 * This is far more efficient than destroying and re-instantiating a
2848 * Dygraph, since it doesn't have to reparse the underlying data.
2850 * @param {Number} width Width (in pixels)
2851 * @param {Number} height Height (in pixels)
2853 Dygraph
.prototype.resize
= function(width
, height
) {
2854 if (this.resize_lock
) {
2857 this.resize_lock
= true;
2859 if ((width
=== null) != (height
=== null)) {
2860 this.warn("Dygraph.resize() should be called with zero parameters or " +
2861 "two non-NULL parameters. Pretending it was zero.");
2862 width
= height
= null;
2865 // TODO(danvk): there should be a clear() method.
2866 this.maindiv_
.innerHTML
= "";
2867 this.attrs_
.labelsDiv
= null;
2870 this.maindiv_
.style
.width
= width
+ "px";
2871 this.maindiv_
.style
.height
= height
+ "px";
2872 this.width_
= width
;
2873 this.height_
= height
;
2875 this.width_
= this.maindiv_
.offsetWidth
;
2876 this.height_
= this.maindiv_
.offsetHeight
;
2879 this.createInterface_();
2882 this.resize_lock
= false;
2886 * Adjusts the number of points in the rolling average. Updates the graph to
2887 * reflect the new averaging period.
2888 * @param {Number} length Number of points over which to average the data.
2890 Dygraph
.prototype.adjustRoll
= function(length
) {
2891 this.rollPeriod_
= length
;
2896 * Returns a boolean array of visibility statuses.
2898 Dygraph
.prototype.visibility
= function() {
2899 // Do lazy-initialization, so that this happens after we know the number of
2901 if (!this.attr_("visibility")) {
2902 this.attrs_
["visibility"] = [];
2904 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2905 this.attr_("visibility").push(true);
2907 return this.attr_("visibility");
2911 * Changes the visiblity of a series.
2913 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2914 var x
= this.visibility();
2915 if (num
< 0 || num
>= x
.length
) {
2916 this.warn("invalid series number in setVisibility: " + num
);
2924 * Update the list of annotations and redraw the chart.
2926 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2927 // Only add the annotation CSS rule once we know it will be used.
2928 Dygraph
.addAnnotationRule();
2929 this.annotations_
= ann
;
2930 this.layout_
.setAnnotations(this.annotations_
);
2931 if (!suppressDraw
) {
2937 * Return the list of annotations.
2939 Dygraph
.prototype.annotations
= function() {
2940 return this.annotations_
;
2944 * Get the index of a series (column) given its name. The first column is the
2945 * x-axis, so the data series start with index 1.
2947 Dygraph
.prototype.indexFromSetName
= function(name
) {
2948 var labels
= this.attr_("labels");
2949 for (var i
= 0; i
< labels
.length
; i
++) {
2950 if (labels
[i
] == name
) return i
;
2955 Dygraph
.addAnnotationRule
= function() {
2956 if (Dygraph
.addedAnnotationCSS
) return;
2958 var rule
= "border: 1px solid black; " +
2959 "background-color: white; " +
2960 "text-align: center;";
2962 var styleSheetElement
= document
.createElement("style");
2963 styleSheetElement
.type
= "text/css";
2964 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2966 // Find the first style sheet that we can access.
2967 // We may not add a rule to a style sheet from another domain for security
2968 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
2969 // adds its own style sheets from google.com.
2970 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
2971 if (document
.styleSheets
[i
].disabled
) continue;
2972 var mysheet
= document
.styleSheets
[i
];
2974 if (mysheet
.insertRule
) { // Firefox
2975 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2976 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2977 } else if (mysheet
.addRule
) { // IE
2978 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2980 Dygraph
.addedAnnotationCSS
= true;
2983 // Was likely a security exception.
2987 this.warn("Unable to add default annotation CSS rule; display may be off.");
2991 * Create a new canvas element. This is more complex than a simple
2992 * document.createElement("canvas") because of IE and excanvas.
2994 Dygraph
.createCanvas
= function() {
2995 var canvas
= document
.createElement("canvas");
2997 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2998 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2999 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3007 * A wrapper around Dygraph that implements the gviz API.
3008 * @param {Object} container The DOM object the visualization should live in.
3010 Dygraph
.GVizChart
= function(container
) {
3011 this.container
= container
;
3014 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3015 // Clear out any existing dygraph.
3016 // TODO(danvk): would it make more sense to simply redraw using the current
3017 // date_graph object?
3018 this.container
.innerHTML
= '';
3019 if (typeof(this.date_graph
) != 'undefined') {
3020 this.date_graph
.destroy();
3023 this.date_graph
= new Dygraph(this.container
, data
, options
);
3027 * Google charts compatible setSelection
3028 * Only row selection is supported, all points in the row will be highlighted
3029 * @param {Array} array of the selected cells
3032 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3034 if (selection_array
.length
) {
3035 row
= selection_array
[0].row
;
3037 this.date_graph
.setSelection(row
);
3041 * Google charts compatible getSelection implementation
3042 * @return {Array} array of the selected cells
3045 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3048 var row
= this.date_graph
.getSelection();
3050 if (row
< 0) return selection
;
3053 for (var i
in this.date_graph
.layout_
.datasets
) {
3054 selection
.push({row
: row
, column
: col
});
3061 // Older pages may still use this name.
3062 DateGraph
= Dygraph
;