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
) { return Dygraph
.round_(x
, 2); },
103 axisLabelFontSize
: 14,
106 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
110 xValueFormatter
: Dygraph
.dateString_
,
111 xValueParser
: Dygraph
.dateParser
,
112 xTicker
: Dygraph
.dateTicker
,
120 wilsonInterval
: true, // only relevant if fractions is true
124 connectSeparatedPoints
: false,
127 hideOverlayOnMouseOut
: true,
133 // Various logging levels.
139 // Directions for panning and zooming. Use bit operations when combined
140 // values are possible.
141 Dygraph
.HORIZONTAL
= 1;
142 Dygraph
.VERTICAL
= 2;
144 // Used for initializing annotation CSS rules only once.
145 Dygraph
.addedAnnotationCSS
= false;
147 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
148 // Labels is no longer a constructor parameter, since it's typically set
149 // directly from the data source. It also conains a name for the x-axis,
150 // which the previous constructor form did not.
151 if (labels
!= null) {
152 var new_labels
= ["Date"];
153 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
154 Dygraph
.update(attrs
, { 'labels': new_labels
});
156 this.__init__(div
, file
, attrs
);
160 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
161 * and context <canvas> inside of it. See the constructor for details
163 * @param {Element} div the Element to render the graph into.
164 * @param {String | Function} file Source data
165 * @param {Object} attrs Miscellaneous other options
168 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
169 // Hack for IE: if we're using excanvas and the document hasn't finished
170 // loading yet (and hence may not have initialized whatever it needs to
171 // initialize), then keep calling this routine periodically until it has.
172 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
173 typeof(G_vmlCanvasManager
) != 'undefined' &&
174 document
.readyState
!= 'complete') {
176 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
179 // Support two-argument constructor
180 if (attrs
== null) { attrs
= {}; }
182 // Copy the important bits into the object
183 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
186 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
187 this.previousVerticalX_
= -1;
188 this.fractions_
= attrs
.fractions
|| false;
189 this.dateWindow_
= attrs
.dateWindow
|| null;
191 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
192 this.is_initial_draw_
= true;
193 this.annotations_
= [];
195 // Clear the div. This ensure that, if multiple dygraphs are passed the same
196 // div, then only one will be drawn.
199 // If the div isn't already sized then inherit from our attrs or
200 // give it a default size.
201 if (div
.style
.width
== '') {
202 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
204 if (div
.style
.height
== '') {
205 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
207 this.width_
= parseInt(div
.style
.width
, 10);
208 this.height_
= parseInt(div
.style
.height
, 10);
209 // The div might have been specified as percent of the current window size,
210 // convert that to an appropriate number of pixels.
211 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
212 this.width_
= div
.offsetWidth
;
214 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
215 this.height_
= div
.offsetHeight
;
218 if (this.width_
== 0) {
219 this.error("dygraph has zero width. Please specify a width in pixels.");
221 if (this.height_
== 0) {
222 this.error("dygraph has zero height. Please specify a height in pixels.");
225 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
226 if (attrs
['stackedGraph']) {
227 attrs
['fillGraph'] = true;
228 // TODO(nikhilk): Add any other stackedGraph checks here.
231 // Dygraphs has many options, some of which interact with one another.
232 // To keep track of everything, we maintain two sets of options:
234 // this.user_attrs_ only options explicitly set by the user.
235 // this.attrs_ defaults, options derived from user_attrs_, data.
237 // Options are then accessed this.attr_('attr'), which first looks at
238 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
239 // defaults without overriding behavior that the user specifically asks for.
240 this.user_attrs_
= {};
241 Dygraph
.update(this.user_attrs_
, attrs
);
244 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
246 this.boundaryIds_
= [];
248 // Make a note of whether labels will be pulled from the CSV file.
249 this.labelsFromCSV_
= (this.attr_("labels") == null);
251 // Create the containing DIV and other interactive elements
252 this.createInterface_();
257 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
259 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
260 this.user_attrs_
[seriesName
] != null &&
261 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
262 return this.user_attrs_
[seriesName
][name
];
263 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
264 return this.user_attrs_
[name
];
265 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
266 return this.attrs_
[name
];
272 // TODO(danvk): any way I can get the line numbers to be this.warn call?
273 Dygraph
.prototype.log
= function(severity
, message
) {
274 if (typeof(console
) != 'undefined') {
277 console
.debug('dygraphs: ' + message
);
280 console
.info('dygraphs: ' + message
);
282 case Dygraph
.WARNING
:
283 console
.warn('dygraphs: ' + message
);
286 console
.error('dygraphs: ' + message
);
291 Dygraph
.prototype.info
= function(message
) {
292 this.log(Dygraph
.INFO
, message
);
294 Dygraph
.prototype.warn
= function(message
) {
295 this.log(Dygraph
.WARNING
, message
);
297 Dygraph
.prototype.error
= function(message
) {
298 this.log(Dygraph
.ERROR
, message
);
302 * Returns the current rolling period, as set by the user or an option.
303 * @return {Number} The number of days in the rolling window
305 Dygraph
.prototype.rollPeriod
= function() {
306 return this.rollPeriod_
;
310 * Returns the currently-visible x-range. This can be affected by zooming,
311 * panning or a call to updateOptions.
312 * Returns a two-element array: [left, right].
313 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
315 Dygraph
.prototype.xAxisRange
= function() {
316 if (this.dateWindow_
) return this.dateWindow_
;
318 // The entire chart is visible.
319 var left
= this.rawData_
[0][0];
320 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
321 return [left
, right
];
325 * Returns the currently-visible y-range for an axis. This can be affected by
326 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
327 * called with no arguments, returns the range of the first axis.
328 * Returns a two-element array: [bottom, top].
330 Dygraph
.prototype.yAxisRange
= function(idx
) {
331 if (typeof(idx
) == "undefined") idx
= 0;
332 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
333 return [ this.axes_
[idx
].computedValueRange
[0],
334 this.axes_
[idx
].computedValueRange
[1] ];
338 * Returns the currently-visible y-ranges for each axis. This can be affected by
339 * zooming, panning, calls to updateOptions, etc.
340 * Returns an array of [bottom, top] pairs, one for each y-axis.
342 Dygraph
.prototype.yAxisRanges
= function() {
344 for (var i
= 0; i
< this.axes_
.length
; i
++) {
345 ret
.push(this.yAxisRange(i
));
350 // TODO(danvk): use these functions throughout dygraphs.
352 * Convert from data coordinates to canvas/div X/Y coordinates.
353 * If specified, do this conversion for the coordinate system of a particular
354 * axis. Uses the first axis by default.
355 * Returns a two-element array: [X, Y]
357 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
358 var ret
= [null, null];
359 var area
= this.plotter_
.area
;
361 var xRange
= this.xAxisRange();
362 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
366 var yRange
= this.yAxisRange(axis
);
367 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
374 * Convert from canvas/div coords to data coordinates.
375 * If specified, do this conversion for the coordinate system of a particular
376 * axis. Uses the first axis by default.
377 * Returns a two-element array: [X, Y]
379 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
380 var ret
= [null, null];
381 var area
= this.plotter_
.area
;
383 var xRange
= this.xAxisRange();
384 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
388 var yRange
= this.yAxisRange(axis
);
389 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
396 * Returns the number of columns (including the independent variable).
398 Dygraph
.prototype.numColumns
= function() {
399 return this.rawData_
[0].length
;
403 * Returns the number of rows (excluding any header/label row).
405 Dygraph
.prototype.numRows
= function() {
406 return this.rawData_
.length
;
410 * Returns the value in the given row and column. If the row and column exceed
411 * the bounds on the data, returns null. Also returns null if the value is
414 Dygraph
.prototype.getValue
= function(row
, col
) {
415 if (row
< 0 || row
> this.rawData_
.length
) return null;
416 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
418 return this.rawData_
[row
][col
];
421 Dygraph
.addEvent
= function(el
, evt
, fn
) {
422 var normed_fn
= function(e
) {
423 if (!e
) var e
= window
.event
;
426 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
427 el
.addEventListener(evt
, normed_fn
, false);
429 el
.attachEvent('on' + evt
, normed_fn
);
435 // An attempt at scroll wheel management.
437 // Based on the article at
438 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
440 Dygraph
.cancelEvent
= function(e
) {
441 e
= e
? e
: window
.event
;
442 if (e
.stopPropagation
) {
445 if (e
.preventDefault
) {
448 e
.cancelBubble
= true;
450 e
.returnValue
= false;
456 * Generates interface elements for the Dygraph: a containing div, a div to
457 * display the current point, and a textbox to adjust the rolling average
458 * period. Also creates the Renderer/Layout elements.
461 Dygraph
.prototype.createInterface_
= function() {
462 // Create the all-enclosing graph div
463 var enclosing
= this.maindiv_
;
465 this.graphDiv
= document
.createElement("div");
466 this.graphDiv
.style
.width
= this.width_
+ "px";
467 this.graphDiv
.style
.height
= this.height_
+ "px";
468 enclosing
.appendChild(this.graphDiv
);
470 // Create the canvas for interactive parts of the chart.
471 this.canvas_
= Dygraph
.createCanvas();
472 this.canvas_
.style
.position
= "absolute";
473 this.canvas_
.width
= this.width_
;
474 this.canvas_
.height
= this.height_
;
475 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
476 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
478 // ... and for static parts of the chart.
479 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
481 // The interactive parts of the graph are drawn on top of the chart.
482 this.graphDiv
.appendChild(this.hidden_
);
483 this.graphDiv
.appendChild(this.canvas_
);
484 this.mouseEventElement_
= this.canvas_
;
487 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
488 dygraph
.mouseMove_(e
);
490 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
491 dygraph
.mouseOut_(e
);
494 // Create the grapher
495 // TODO(danvk): why does the Layout need its own set of options?
496 this.layoutOptions_
= { 'xOriginIsZero': false };
497 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
498 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
499 Dygraph
.update(this.layoutOptions_
, {
500 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
502 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
504 // TODO(danvk): why does the Renderer need its own set of options?
505 this.renderOptions_
= { colorScheme
: this.colors_
,
507 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
508 Dygraph
.update(this.renderOptions_
, this.attrs_
);
509 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
511 this.createStatusMessage_();
512 this.createDragInterface_();
516 * Detach DOM elements in the dygraph and null out all data references.
517 * Calling this when you're done with a dygraph can dramatically reduce memory
518 * usage. See, e.g., the tests/perf.html example.
520 Dygraph
.prototype.destroy
= function() {
521 var removeRecursive
= function(node
) {
522 while (node
.hasChildNodes()) {
523 removeRecursive(node
.firstChild
);
524 node
.removeChild(node
.firstChild
);
527 removeRecursive(this.maindiv_
);
529 var nullOut
= function(obj
) {
531 if (typeof(obj
[n
]) === 'object') {
537 // These may not all be necessary, but it can't hurt...
538 nullOut(this.layout_
);
539 nullOut(this.plotter_
);
544 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
545 * this particular canvas. All Dygraph work is done on this.canvas_.
546 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
547 * @return {Object} The newly-created canvas
550 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
551 var h
= Dygraph
.createCanvas();
552 h
.style
.position
= "absolute";
553 // TODO(danvk): h should be offset from canvas. canvas needs to include
554 // some extra area to make it easier to zoom in on the far left and far
555 // right. h needs to be precisely the plot area, so that clipping occurs.
556 h
.style
.top
= canvas
.style
.top
;
557 h
.style
.left
= canvas
.style
.left
;
558 h
.width
= this.width_
;
559 h
.height
= this.height_
;
560 h
.style
.width
= this.width_
+ "px"; // for IE
561 h
.style
.height
= this.height_
+ "px"; // for IE
565 // Taken from MochiKit.Color
566 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
570 if (saturation
=== 0) {
575 var i
= Math
.floor(hue
* 6);
576 var f
= (hue
* 6) - i
;
577 var p
= value
* (1 - saturation
);
578 var q
= value
* (1 - (saturation
* f
));
579 var t
= value
* (1 - (saturation
* (1 - f
)));
581 case 1: red
= q
; green
= value
; blue
= p
; break;
582 case 2: red
= p
; green
= value
; blue
= t
; break;
583 case 3: red
= p
; green
= q
; blue
= value
; break;
584 case 4: red
= t
; green
= p
; blue
= value
; break;
585 case 5: red
= value
; green
= p
; blue
= q
; break;
586 case 6: // fall through
587 case 0: red
= value
; green
= t
; blue
= p
; break;
590 red
= Math
.floor(255 * red
+ 0.5);
591 green
= Math
.floor(255 * green
+ 0.5);
592 blue
= Math
.floor(255 * blue
+ 0.5);
593 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
598 * Generate a set of distinct colors for the data series. This is done with a
599 * color wheel. Saturation/Value are customizable, and the hue is
600 * equally-spaced around the color wheel. If a custom set of colors is
601 * specified, that is used instead.
604 Dygraph
.prototype.setColors_
= function() {
605 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
606 // away with this.renderOptions_.
607 var num
= this.attr_("labels").length
- 1;
609 var colors
= this.attr_('colors');
611 var sat
= this.attr_('colorSaturation') || 1.0;
612 var val
= this.attr_('colorValue') || 0.5;
613 var half
= Math
.ceil(num
/ 2);
614 for (var i
= 1; i
<= num
; i
++) {
615 if (!this.visibility()[i
-1]) continue;
616 // alternate colors for high contrast.
617 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
618 var hue
= (1.0 * idx
/ (1 + num
));
619 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
622 for (var i
= 0; i
< num
; i
++) {
623 if (!this.visibility()[i
]) continue;
624 var colorStr
= colors
[i
% colors
.length
];
625 this.colors_
.push(colorStr
);
629 // TODO(danvk): update this w/r
/t/ the
new options system
.
630 this.renderOptions_
.colorScheme
= this.colors_
;
631 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
632 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
633 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
637 * Return the list of colors. This is either the list of colors passed in the
638 * attributes, or the autogenerated list of rgb(r,g,b) strings.
639 * @return {Array<string>} The list of colors.
641 Dygraph
.prototype.getColors
= function() {
645 // The following functions are from quirksmode.org with a modification for Safari from
646 // http://blog.firetree.net/2005/07/04/javascript-find-position/
647 // http://www.quirksmode.org/js
/findpos
.html
648 Dygraph
.findPosX
= function(obj
) {
653 curleft
+= obj
.offsetLeft
;
654 if(!obj
.offsetParent
)
656 obj
= obj
.offsetParent
;
663 Dygraph
.findPosY
= function(obj
) {
668 curtop
+= obj
.offsetTop
;
669 if(!obj
.offsetParent
)
671 obj
= obj
.offsetParent
;
681 * Create the div that contains information on the selected point(s)
682 * This goes in the top right of the canvas, unless an external div has already
686 Dygraph
.prototype.createStatusMessage_
= function() {
687 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
688 if (userLabelsDiv
&& null != userLabelsDiv
689 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
690 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
692 if (!this.attr_("labelsDiv")) {
693 var divWidth
= this.attr_('labelsDivWidth');
695 "position": "absolute",
698 "width": divWidth
+ "px",
700 "left": (this.width_
- divWidth
- 2) + "px",
701 "background": "white",
703 "overflow": "hidden"};
704 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
705 var div
= document
.createElement("div");
706 for (var name
in messagestyle
) {
707 if (messagestyle
.hasOwnProperty(name
)) {
708 div
.style
[name
] = messagestyle
[name
];
711 this.graphDiv
.appendChild(div
);
712 this.attrs_
.labelsDiv
= div
;
717 * Position the labels div so that its right edge is flush with the right edge
718 * of the charting area.
720 Dygraph
.prototype.positionLabelsDiv_
= function() {
721 // Don't touch a user-specified labelsDiv.
722 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
724 var area
= this.plotter_
.area
;
725 var div
= this.attr_("labelsDiv");
726 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
730 * Create the text box to adjust the averaging period
733 Dygraph
.prototype.createRollInterface_
= function() {
734 // Create a roller if one doesn't exist already.
736 this.roller_
= document
.createElement("input");
737 this.roller_
.type
= "text";
738 this.roller_
.style
.display
= "none";
739 this.graphDiv
.appendChild(this.roller_
);
742 var display
= this.attr_('showRoller') ? 'block' : 'none';
744 var textAttr
= { "position": "absolute",
746 "top": (this.plotter_
.area
.h
- 25) + "px",
747 "left": (this.plotter_
.area
.x
+ 1) + "px",
750 this.roller_
.size
= "2";
751 this.roller_
.value
= this.rollPeriod_
;
752 for (var name
in textAttr
) {
753 if (textAttr
.hasOwnProperty(name
)) {
754 this.roller_
.style
[name
] = textAttr
[name
];
759 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
762 // These functions are taken from MochiKit.Signal
763 Dygraph
.pageX
= function(e
) {
765 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
768 var b
= document
.body
;
770 (de
.scrollLeft
|| b
.scrollLeft
) -
771 (de
.clientLeft
|| 0);
775 Dygraph
.pageY
= function(e
) {
777 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
780 var b
= document
.body
;
782 (de
.scrollTop
|| b
.scrollTop
) -
787 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
788 return Dygraph
.pageX(e
) - context
.px
791 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
792 return Dygraph
.pageY(e
) - context
.py
795 Dygraph
.startPan
= function(event
, g
, context
) {
796 // have to be zoomed in to pan.
798 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
799 if (g
.axes_
[i
].valueWindow
|| g
.axes_
[i
].valueRange
) {
804 if (!g
.dateWindow_
&& !zoomedY
) return;
806 context
.isPanning
= true;
807 var xRange
= g
.xAxisRange();
808 context
.dateRange
= xRange
[1] - xRange
[0];
810 // Record the range of each y-axis at the start of the drag.
811 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
812 context
.is2DPan
= false;
813 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
814 var axis
= g
.axes_
[i
];
815 var yRange
= g
.yAxisRange(i
);
816 axis
.dragValueRange
= yRange
[1] - yRange
[0];
817 var r
= g
.toDataCoords(null, context
.dragStartY
, i
);
818 axis
.draggingValue
= r
[1];
819 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
822 // TODO(konigsberg): Switch from all this math to toDataCoords?
823 // Seems to work for the dragging value.
824 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
827 Dygraph
.movePan
= function(event
, g
, context
) {
828 context
.dragEndX
= g
.dragGetX_(event
, context
);
829 context
.dragEndY
= g
.dragGetY_(event
, context
);
831 // TODO(danvk): update this comment
832 // Want to have it so that:
833 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
834 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
835 // 3. draggingValue appears at dragEndY.
836 // 4. valueRange is unaltered.
838 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
839 var maxDate
= minDate
+ context
.dateRange
;
840 g
.dateWindow_
= [minDate
, maxDate
];
842 // y-axis scaling is automatic unless this is a full 2D pan.
843 if (context
.is2DPan
) {
844 // Adjust each axis appropriately.
845 var y_frac
= context
.dragEndY
/ g
.height_
;
846 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
847 var axis
= g
.axes_
[i
];
848 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
849 var minValue
= maxValue
- axis
.dragValueRange
;
850 axis
.valueWindow
= [ minValue
, maxValue
];
857 Dygraph
.endPan
= function(event
, g
, context
) {
858 context
.isPanning
= false;
859 context
.is2DPan
= false;
860 context
.draggingDate
= null;
861 context
.dateRange
= null;
862 context
.valueRange
= null;
865 Dygraph
.startZoom
= function(event
, g
, context
) {
866 context
.isZooming
= true;
869 Dygraph
.moveZoom
= function(event
, g
, context
) {
870 context
.dragEndX
= g
.dragGetX_(event
, context
);
871 context
.dragEndY
= g
.dragGetY_(event
, context
);
873 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
874 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
876 // drag direction threshold for y axis is twice as large as x axis
877 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
880 context
.dragDirection
,
885 context
.prevDragDirection
,
889 context
.prevEndX
= context
.dragEndX
;
890 context
.prevEndY
= context
.dragEndY
;
891 context
.prevDragDirection
= context
.dragDirection
;
894 Dygraph
.endZoom
= function(event
, g
, context
) {
895 context
.isZooming
= false;
896 context
.dragEndX
= g
.dragGetX_(event
, context
);
897 context
.dragEndY
= g
.dragGetY_(event
, context
);
898 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
899 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
901 if (regionWidth
< 2 && regionHeight
< 2 &&
902 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
903 // TODO(danvk): pass along more info about the points, e.g. 'x'
904 if (g
.attr_('clickCallback') != null) {
905 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
907 if (g
.attr_('pointClickCallback')) {
908 // check if the click was on a particular point.
910 var closestDistance
= 0;
911 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
912 var p
= g
.selPoints_
[i
];
913 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
914 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
915 if (closestIdx
== -1 || distance
< closestDistance
) {
916 closestDistance
= distance
;
921 // Allow any click within two pixels of the dot.
922 var radius
= g
.attr_('highlightCircleSize') + 2;
923 if (closestDistance
<= 5 * 5) {
924 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
929 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
930 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
931 Math
.max(context
.dragStartX
, context
.dragEndX
));
932 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
933 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
934 Math
.max(context
.dragStartY
, context
.dragEndY
));
936 g
.canvas_
.getContext("2d").clearRect(0, 0,
940 context
.dragStartX
= null;
941 context
.dragStartY
= null;
944 // Track the beginning of drag events
945 Dygraph
.prototype.defaultMouseDownFunction
= function(event
, g
, context
) {
946 context
.initializeMouseDown(event
, g
, context
);
948 if (event
.altKey
|| event
.shiftKey
) {
949 Dygraph
.startPan(event
, g
, context
);
951 Dygraph
.startZoom(event
, g
, context
);
955 // Draw zoom rectangles when the mouse is down and the user moves around
956 Dygraph
.prototype.defaultMouseMoveFunction
= function(event
, g
, context
) {
957 if (context
.isZooming
) {
958 Dygraph
.moveZoom(event
, g
, context
);
959 } else if (context
.isPanning
) {
960 Dygraph
.movePan(event
, g
, context
);
964 Dygraph
.prototype.defaultMouseUpFunction
= function(event
, g
, context
) {
965 if (context
.isZooming
) {
966 Dygraph
.endZoom(event
, g
, context
);
967 } else if (context
.isPanning
) {
968 Dygraph
.endPan(event
, g
, context
);
972 Dygraph
.prototype.defaultMouseOutFunction
= function(event
, g
, context
) {
973 // Temporarily cancel the dragging event when the mouse leaves the graph
974 if (context
.isZooming
) {
975 context
.dragEndX
= null;
976 context
.dragEndY
= null;
980 // Double-clicking zooms back out
981 Dygraph
.prototype.defaultMouseDoubleClickFunction
= function(event
, g
, context
) {
982 // Disable zooming out if panning.
983 if (event
.altKey
|| event
.shiftKey
) {
990 * Set up all the mouse handlers needed to capture dragging behavior for zoom
994 Dygraph
.prototype.createDragInterface_
= function() {
996 // Tracks whether the mouse is down right now
998 isPanning
: false, // is this drag part of a pan?
999 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1004 dragDirection
: null,
1007 prevDragDirection
: null,
1009 // TODO(danvk): update this comment
1010 // draggingDate and draggingValue represent the [date,value] point on the
1011 // graph at which the mouse was pressed. As the mouse moves while panning,
1012 // the viewport must pan so that the mouse position points to
1013 // [draggingDate, draggingValue]
1014 draggingDate
: null,
1016 // TODO(danvk): update this comment
1017 // The range in second/value units that the viewport encompasses during a
1018 // panning operation.
1021 // Utility function to convert page-wide coordinates to canvas coords
1025 initializeMouseDown
: function(event
, g
, context
) {
1026 // prevents mouse drags from selecting page text.
1027 if (event
.preventDefault
) {
1028 event
.preventDefault(); // Firefox, Chrome, etc.
1030 event
.returnValue
= false; // IE
1031 event
.cancelBubble
= true;
1034 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1035 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1036 context
.dragStartX
= g
.dragGetX_(event
, context
);
1037 context
.dragStartY
= g
.dragGetY_(event
, context
);
1041 // Defines default behavior if there are no event handlers.
1042 var handlers
= this.user_attrs_
.interactionModel
|| {
1043 'mousedown' : this.defaultMouseDownFunction
,
1044 'mousemove' : this.defaultMouseMoveFunction
,
1045 'mouseup' : this.defaultMouseUpFunction
,
1046 'mouseout' : this.defaultMouseOutFunction
,
1047 'dblclick' : this.defaultMouseDoubleClickFunction
1050 // Function that binds g and context to the handler.
1051 var bindHandler
= function(handler
, g
) {
1052 return function(event
) {
1053 handler(event
, g
, context
);
1057 for (var eventName
in handlers
) {
1058 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1059 bindHandler(handlers
[eventName
], this));
1062 // Self is the graph.
1065 // If the user releases the mouse button during a drag, but not over the
1066 // canvas, then it doesn't count as a zooming action.
1067 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1068 if (context
.isZooming
|| context
.isPanning
) {
1069 context
.isZooming
= false;
1070 context
.dragStartX
= null;
1071 context
.dragStartY
= null;
1074 if (context
.isPanning
) {
1075 context
.isPanning
= false;
1076 context
.draggingDate
= null;
1077 context
.dateRange
= null;
1078 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1079 delete self
.axes_
[i
].draggingValue
;
1080 delete self
.axes_
[i
].dragValueRange
;
1087 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1088 * up any previous zoom rectangles that were drawn. This could be optimized to
1089 * avoid extra redrawing, but it's tricky to avoid contexts with the status
1092 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1093 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1094 * @param {Number} startX The X position where the drag started, in canvas
1096 * @param {Number} endX The current X position of the drag, in canvas coords.
1097 * @param {Number} startY The Y position where the drag started, in canvas
1099 * @param {Number} endY The current Y position of the drag, in canvas coords.
1100 * @param {Number} prevDirection the value of direction on the previous call to
1101 * this function. Used to avoid excess redrawing
1102 * @param {Number} prevEndX The value of endX on the previous call to this
1103 * function. Used to avoid excess redrawing
1104 * @param {Number} prevEndY The value of endY on the previous call to this
1105 * function. Used to avoid excess redrawing
1108 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1109 prevDirection
, prevEndX
, prevEndY
) {
1110 var ctx
= this.canvas_
.getContext("2d");
1112 // Clean up from the previous rect if necessary
1113 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1114 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1115 Math
.abs(startX
- prevEndX
), this.height_
);
1116 } else if (prevDirection
== Dygraph
.VERTICAL
){
1117 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1118 this.width_
, Math
.abs(startY
- prevEndY
));
1121 // Draw a light-grey rectangle to show the new viewing area
1122 if (direction
== Dygraph
.HORIZONTAL
) {
1123 if (endX
&& startX
) {
1124 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1125 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1126 Math
.abs(endX
- startX
), this.height_
);
1129 if (direction
== Dygraph
.VERTICAL
) {
1130 if (endY
&& startY
) {
1131 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1132 ctx
.fillRect(0, Math
.min(startY
, endY
),
1133 this.width_
, Math
.abs(endY
- startY
));
1139 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1140 * the canvas. The exact zoom window may be slightly larger if there are no data
1141 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1142 * which accepts dates that match the raw data. This function redraws the graph.
1144 * @param {Number} lowX The leftmost pixel value that should be visible.
1145 * @param {Number} highX The rightmost pixel value that should be visible.
1148 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1149 // Find the earliest and latest dates contained in this canvasx range.
1150 // Convert the call to date ranges of the raw data.
1151 var r
= this.toDataCoords(lowX
, null);
1153 r
= this.toDataCoords(highX
, null);
1155 this.doZoomXDates_(minDate
, maxDate
);
1159 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1160 * method with doZoomX which accepts pixel coordinates. This function redraws
1163 * @param {Number} minDate The minimum date that should be visible.
1164 * @param {Number} maxDate The maximum date that should be visible.
1167 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1168 this.dateWindow_
= [minDate
, maxDate
];
1170 if (this.attr_("zoomCallback")) {
1171 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1176 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1177 * the canvas. This function redraws the graph.
1179 * @param {Number} lowY The topmost pixel value that should be visible.
1180 * @param {Number} highY The lowest pixel value that should be visible.
1183 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1184 // Find the highest and lowest values in pixel range for each axis.
1185 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1186 // This is because pixels increase as you go down on the screen, whereas data
1187 // coordinates increase as you go up the screen.
1188 var valueRanges
= [];
1189 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1190 var hi
= this.toDataCoords(null, lowY
, i
);
1191 var low
= this.toDataCoords(null, highY
, i
);
1192 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1193 valueRanges
.push([low
[1], hi
[1]]);
1197 if (this.attr_("zoomCallback")) {
1198 var xRange
= this.xAxisRange();
1199 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1204 * Reset the zoom to the original view coordinates. This is the same as
1205 * double-clicking on the graph.
1209 Dygraph
.prototype.doUnzoom_
= function() {
1211 if (this.dateWindow_
!= null) {
1213 this.dateWindow_
= null;
1216 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1217 if (this.axes_
[i
].valueWindow
!= null) {
1219 delete this.axes_
[i
].valueWindow
;
1224 // Putting the drawing operation before the callback because it resets
1227 if (this.attr_("zoomCallback")) {
1228 var minDate
= this.rawData_
[0][0];
1229 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1230 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1236 * When the mouse moves in the canvas, display information about a nearby data
1237 * point and draw dots over those points in the data series. This function
1238 * takes care of cleanup of previously-drawn dots.
1239 * @param {Object} event The mousemove event from the browser.
1242 Dygraph
.prototype.mouseMove_
= function(event
) {
1243 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1244 var points
= this.layout_
.points
;
1249 // Loop through all the points and find the date nearest to our current
1251 var minDist
= 1e+100;
1253 for (var i
= 0; i
< points
.length
; i
++) {
1254 var point
= points
[i
];
1255 if (point
== null) continue;
1256 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1257 if (dist
> minDist
) continue;
1261 if (idx
>= 0) lastx
= points
[idx
].xval
;
1262 // Check that you can really highlight the last day's data
1263 var last
= points
[points
.length
-1];
1264 if (last
!= null && canvasx
> last
.canvasx
)
1265 lastx
= points
[points
.length
-1].xval
;
1267 // Extract the points we've selected
1268 this.selPoints_
= [];
1269 var l
= points
.length
;
1270 if (!this.attr_("stackedGraph")) {
1271 for (var i
= 0; i
< l
; i
++) {
1272 if (points
[i
].xval
== lastx
) {
1273 this.selPoints_
.push(points
[i
]);
1277 // Need to 'unstack' points starting from the bottom
1278 var cumulative_sum
= 0;
1279 for (var i
= l
- 1; i
>= 0; i
--) {
1280 if (points
[i
].xval
== lastx
) {
1281 var p
= {}; // Clone the point since we modify it
1282 for (var k
in points
[i
]) {
1283 p
[k
] = points
[i
][k
];
1285 p
.yval
-= cumulative_sum
;
1286 cumulative_sum
+= p
.yval
;
1287 this.selPoints_
.push(p
);
1290 this.selPoints_
.reverse();
1293 if (this.attr_("highlightCallback")) {
1294 var px
= this.lastx_
;
1295 if (px
!== null && lastx
!= px
) {
1296 // only fire if the selected point has changed.
1297 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1301 // Save last x position for callbacks.
1302 this.lastx_
= lastx
;
1304 this.updateSelection_();
1308 * Transforms layout_.points index into data row number.
1309 * @param int layout_.points index
1310 * @return int row number, or -1 if none could be found.
1313 Dygraph
.prototype.idxToRow_
= function(idx
) {
1314 if (idx
< 0) return -1;
1316 for (var i
in this.layout_
.datasets
) {
1317 if (idx
< this.layout_
.datasets
[i
].length
) {
1318 return this.boundaryIds_
[0][0]+idx
;
1320 idx
-= this.layout_
.datasets
[i
].length
;
1326 * Draw dots over the selectied points in the data series. This function
1327 * takes care of cleanup of previously-drawn dots.
1330 Dygraph
.prototype.updateSelection_
= function() {
1331 // Clear the previously drawn vertical, if there is one
1332 var ctx
= this.canvas_
.getContext("2d");
1333 if (this.previousVerticalX_
>= 0) {
1334 // Determine the maximum highlight circle size.
1335 var maxCircleSize
= 0;
1336 var labels
= this.attr_('labels');
1337 for (var i
= 1; i
< labels
.length
; i
++) {
1338 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1339 if (r
> maxCircleSize
) maxCircleSize
= r
;
1341 var px
= this.previousVerticalX_
;
1342 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1343 2 * maxCircleSize
+ 2, this.height_
);
1346 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1348 if (this.selPoints_
.length
> 0) {
1349 var canvasx
= this.selPoints_
[0].canvasx
;
1351 // Set the status message to indicate the selected point(s)
1352 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1353 var fmtFunc
= this.attr_('yValueFormatter');
1354 var clen
= this.colors_
.length
;
1356 if (this.attr_('showLabelsOnHighlight')) {
1357 // Set the status message to indicate the selected point(s)
1358 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1359 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1360 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1361 if (this.attr_("labelsSeparateLines")) {
1364 var point
= this.selPoints_
[i
];
1365 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1366 var yval
= fmtFunc(point
.yval
);
1367 replace
+= " <b><font color='" + c
.toHex() + "'>"
1368 + point
.name
+ "</font></b>:"
1372 this.attr_("labelsDiv").innerHTML
= replace
;
1375 // Draw colored circles over the center of each selected point
1377 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1378 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1380 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1382 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1383 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1384 0, 2 * Math
.PI
, false);
1389 this.previousVerticalX_
= canvasx
;
1394 * Set manually set selected dots, and display information about them
1395 * @param int row number that should by highlighted
1396 * false value clears the selection
1399 Dygraph
.prototype.setSelection
= function(row
) {
1400 // Extract the points we've selected
1401 this.selPoints_
= [];
1404 if (row
!== false) {
1405 row
= row
-this.boundaryIds_
[0][0];
1408 if (row
!== false && row
>= 0) {
1409 for (var i
in this.layout_
.datasets
) {
1410 if (row
< this.layout_
.datasets
[i
].length
) {
1411 var point
= this.layout_
.points
[pos
+row
];
1413 if (this.attr_("stackedGraph")) {
1414 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1417 this.selPoints_
.push(point
);
1419 pos
+= this.layout_
.datasets
[i
].length
;
1423 if (this.selPoints_
.length
) {
1424 this.lastx_
= this.selPoints_
[0].xval
;
1425 this.updateSelection_();
1428 this.clearSelection();
1434 * The mouse has left the canvas. Clear out whatever artifacts remain
1435 * @param {Object} event the mouseout event from the browser.
1438 Dygraph
.prototype.mouseOut_
= function(event
) {
1439 if (this.attr_("unhighlightCallback")) {
1440 this.attr_("unhighlightCallback")(event
);
1443 if (this.attr_("hideOverlayOnMouseOut")) {
1444 this.clearSelection();
1449 * Remove all selection from the canvas
1452 Dygraph
.prototype.clearSelection
= function() {
1453 // Get rid of the overlay data
1454 var ctx
= this.canvas_
.getContext("2d");
1455 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1456 this.attr_("labelsDiv").innerHTML
= "";
1457 this.selPoints_
= [];
1462 * Returns the number of the currently selected row
1463 * @return int row number, of -1 if nothing is selected
1466 Dygraph
.prototype.getSelection
= function() {
1467 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1471 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1472 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1473 return row
+ this.boundaryIds_
[0][0];
1479 Dygraph
.zeropad
= function(x
) {
1480 if (x
< 10) return "0" + x
; else return "" + x
;
1484 * Return a string version of the hours, minutes and seconds portion of a date.
1485 * @param {Number} date The JavaScript date (ms since epoch)
1486 * @return {String} A time of the form "HH:MM:SS"
1489 Dygraph
.hmsString_
= function(date
) {
1490 var zeropad
= Dygraph
.zeropad
;
1491 var d
= new Date(date
);
1492 if (d
.getSeconds()) {
1493 return zeropad(d
.getHours()) + ":" +
1494 zeropad(d
.getMinutes()) + ":" +
1495 zeropad(d
.getSeconds());
1497 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1502 * Convert a JS date to a string appropriate to display on an axis that
1503 * is displaying values at the stated granularity.
1504 * @param {Date} date The date to format
1505 * @param {Number} granularity One of the Dygraph granularity constants
1506 * @return {String} The formatted date
1509 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1510 if (granularity
>= Dygraph
.MONTHLY
) {
1511 return date
.strftime('%b %y');
1513 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1514 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1515 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1517 return Dygraph
.hmsString_(date
.getTime());
1523 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1524 * @param {Number} date The JavaScript date (ms since epoch)
1525 * @return {String} A date of the form "YYYY/MM/DD"
1528 Dygraph
.dateString_
= function(date
, self
) {
1529 var zeropad
= Dygraph
.zeropad
;
1530 var d
= new Date(date
);
1533 var year
= "" + d
.getFullYear();
1534 // Get a 0 padded month string
1535 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1536 // Get a 0 padded day string
1537 var day
= zeropad(d
.getDate());
1540 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1541 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1543 return year
+ "/" + month + "/" + day
+ ret
;
1547 * Round a number to the specified number of digits past the decimal point.
1548 * @param {Number} num The number to round
1549 * @param {Number} places The number of decimals to which to round
1550 * @return {Number} The rounded number
1553 Dygraph
.round_
= function(num
, places
) {
1554 var shift
= Math
.pow(10, places
);
1555 return Math
.round(num
* shift
)/shift
;
1559 * Fires when there's data available to be graphed.
1560 * @param {String} data Raw CSV data to be plotted
1563 Dygraph
.prototype.loadedEvent_
= function(data
) {
1564 this.rawData_
= this.parseCSV_(data
);
1568 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1569 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1570 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1573 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1576 Dygraph
.prototype.addXTicks_
= function() {
1577 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1578 var startDate
, endDate
;
1579 if (this.dateWindow_
) {
1580 startDate
= this.dateWindow_
[0];
1581 endDate
= this.dateWindow_
[1];
1583 startDate
= this.rawData_
[0][0];
1584 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1587 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1588 this.layout_
.updateOptions({xTicks
: xTicks
});
1591 // Time granularity enumeration
1592 Dygraph
.SECONDLY
= 0;
1593 Dygraph
.TWO_SECONDLY
= 1;
1594 Dygraph
.FIVE_SECONDLY
= 2;
1595 Dygraph
.TEN_SECONDLY
= 3;
1596 Dygraph
.THIRTY_SECONDLY
= 4;
1597 Dygraph
.MINUTELY
= 5;
1598 Dygraph
.TWO_MINUTELY
= 6;
1599 Dygraph
.FIVE_MINUTELY
= 7;
1600 Dygraph
.TEN_MINUTELY
= 8;
1601 Dygraph
.THIRTY_MINUTELY
= 9;
1602 Dygraph
.HOURLY
= 10;
1603 Dygraph
.TWO_HOURLY
= 11;
1604 Dygraph
.SIX_HOURLY
= 12;
1606 Dygraph
.WEEKLY
= 14;
1607 Dygraph
.MONTHLY
= 15;
1608 Dygraph
.QUARTERLY
= 16;
1609 Dygraph
.BIANNUAL
= 17;
1610 Dygraph
.ANNUAL
= 18;
1611 Dygraph
.DECADAL
= 19;
1612 Dygraph
.NUM_GRANULARITIES
= 20;
1614 Dygraph
.SHORT_SPACINGS
= [];
1615 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1616 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1617 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1618 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1619 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1620 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1621 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1622 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1623 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1624 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1625 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1626 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1627 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1628 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1629 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1633 // If we used this time granularity, how many ticks would there be?
1634 // This is only an approximation, but it's generally good enough.
1636 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1637 if (granularity
< Dygraph
.MONTHLY
) {
1638 // Generate one tick mark for every fixed interval of time.
1639 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1640 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1642 var year_mod
= 1; // e.g. to only print one point every 10 years.
1643 var num_months
= 12;
1644 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1645 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1646 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1647 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1649 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1650 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1651 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1657 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1658 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1660 // Returns an array containing {v: millis, label: label} dictionaries.
1662 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1663 var formatter
= this.attr_("xAxisLabelFormatter");
1665 if (granularity
< Dygraph
.MONTHLY
) {
1666 // Generate one tick mark for every fixed interval of time.
1667 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1668 var format
= '%d%b'; // e.g. "1Jan"
1670 // Find a time less than start_time which occurs on a "nice" time boundary
1671 // for this granularity.
1672 var g
= spacing
/ 1000;
1673 var d
= new Date(start_time
);
1674 if (g
<= 60) { // seconds
1675 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1679 if (g
<= 60) { // minutes
1680 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1685 if (g
<= 24) { // days
1686 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1691 if (g
== 7) { // one week
1692 d
.setDate(d
.getDate() - d
.getDay());
1697 start_time
= d
.getTime();
1699 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1700 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1703 // Display a tick mark on the first of a set of months of each year.
1704 // Years get a tick mark iff y % year_mod == 0. This is useful for
1705 // displaying a tick mark once every 10 years, say, on long time scales.
1707 var year_mod
= 1; // e.g. to only print one point every 10 years.
1709 if (granularity
== Dygraph
.MONTHLY
) {
1710 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1711 } else if (granularity
== Dygraph
.QUARTERLY
) {
1712 months
= [ 0, 3, 6, 9 ];
1713 } else if (granularity
== Dygraph
.BIANNUAL
) {
1715 } else if (granularity
== Dygraph
.ANNUAL
) {
1717 } else if (granularity
== Dygraph
.DECADAL
) {
1722 var start_year
= new Date(start_time
).getFullYear();
1723 var end_year
= new Date(end_time
).getFullYear();
1724 var zeropad
= Dygraph
.zeropad
;
1725 for (var i
= start_year
; i
<= end_year
; i
++) {
1726 if (i
% year_mod
!= 0) continue;
1727 for (var j
= 0; j
< months
.length
; j
++) {
1728 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1729 var t
= Date
.parse(date_str
);
1730 if (t
< start_time
|| t
> end_time
) continue;
1731 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1741 * Add ticks to the x-axis based on a date range.
1742 * @param {Number} startDate Start of the date window (millis since epoch)
1743 * @param {Number} endDate End of the date window (millis since epoch)
1744 * @return {Array.<Object>} Array of {label, value} tuples.
1747 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1749 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1750 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1751 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1758 return self
.GetXAxis(startDate
, endDate
, chosen
);
1760 // TODO(danvk): signal error.
1765 * Add ticks when the x axis has numbers on it (instead of dates)
1766 * @param {Number} startDate Start of the date window (millis since epoch)
1767 * @param {Number} endDate End of the date window (millis since epoch)
1769 * @param {function} attribute accessor function.
1770 * @return {Array.<Object>} Array of {label, value} tuples.
1773 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1774 var attr
= function(k
) {
1775 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1776 return self
.attr_(k
);
1781 for (var i
= 0; i
< vals
.length
; i
++) {
1782 ticks
.push({v
: vals
[i
]});
1786 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1787 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1788 // The first spacing greater than pixelsPerYLabel is what we use.
1789 // TODO(danvk): version that works on a log scale.
1790 if (attr("labelsKMG2")) {
1791 var mults
= [1, 2, 4, 8];
1793 var mults
= [1, 2, 5];
1795 var scale
, low_val
, high_val
, nTicks
;
1796 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1797 var pixelsPerTick
= attr('pixelsPerYLabel');
1798 for (var i
= -10; i
< 50; i
++) {
1799 if (attr("labelsKMG2")) {
1800 var base_scale
= Math
.pow(16, i
);
1802 var base_scale
= Math
.pow(10, i
);
1804 for (var j
= 0; j
< mults
.length
; j
++) {
1805 scale
= base_scale
* mults
[j
];
1806 low_val
= Math
.floor(minV
/ scale
) * scale
;
1807 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1808 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1809 var spacing
= self
.height_
/ nTicks
;
1810 // wish I could break out of both loops at once...
1811 if (spacing
> pixelsPerTick
) break;
1813 if (spacing
> pixelsPerTick
) break;
1816 // Construct the set of ticks.
1817 // Allow reverse y-axis if it's explicitly requested.
1818 if (low_val
> high_val
) scale
*= -1;
1819 for (var i
= 0; i
< nTicks
; i
++) {
1820 var tickV
= low_val
+ i
* scale
;
1821 ticks
.push( {v
: tickV
} );
1825 // Add formatted labels to the ticks.
1828 if (attr("labelsKMB")) {
1830 k_labels
= [ "K", "M", "B", "T" ];
1832 if (attr("labelsKMG2")) {
1833 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1835 k_labels
= [ "k", "M", "G", "T" ];
1837 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1839 for (var i
= 0; i
< ticks
.length
; i
++) {
1840 var tickV
= ticks
[i
].v
;
1841 var absTickV
= Math
.abs(tickV
);
1843 if (formatter
!= undefined
) {
1844 label
= formatter(tickV
);
1846 label
= Dygraph
.round_(tickV
, 2);
1848 if (k_labels
.length
) {
1849 // Round up to an appropriate unit.
1851 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1852 if (absTickV
>= n
) {
1853 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1858 ticks
[i
].label
= label
;
1863 // Computes the range of the data series (including confidence intervals).
1864 // series is either [ [x1, y1], [x2, y2], ... ] or
1865 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1866 // Returns [low, high]
1867 Dygraph
.prototype.extremeValues_
= function(series
) {
1868 var minY
= null, maxY
= null;
1870 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1872 // With custom bars, maxY is the max of the high values.
1873 for (var j
= 0; j
< series
.length
; j
++) {
1874 var y
= series
[j
][1][0];
1876 var low
= y
- series
[j
][1][1];
1877 var high
= y
+ series
[j
][1][2];
1878 if (low
> y
) low
= y
; // this can happen with custom bars,
1879 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1880 if (maxY
== null || high
> maxY
) {
1883 if (minY
== null || low
< minY
) {
1888 for (var j
= 0; j
< series
.length
; j
++) {
1889 var y
= series
[j
][1];
1890 if (y
=== null || isNaN(y
)) continue;
1891 if (maxY
== null || y
> maxY
) {
1894 if (minY
== null || y
< minY
) {
1900 return [minY
, maxY
];
1904 * This function is called once when the chart's data is changed or the options
1905 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1906 * idea is that values derived from the chart's data can be computed here,
1907 * rather than every time the chart is drawn. This includes things like the
1908 * number of axes, rolling averages, etc.
1910 Dygraph
.prototype.predraw_
= function() {
1911 // TODO(danvk): move more computations out of drawGraph_ and into here.
1912 this.computeYAxes_();
1914 // Create a new plotter.
1915 if (this.plotter_
) this.plotter_
.clear();
1916 this.plotter_
= new DygraphCanvasRenderer(this,
1917 this.hidden_
, this.layout_
,
1918 this.renderOptions_
);
1920 // The roller sits in the bottom left corner of the chart. We don't know where
1921 // this will be until the options are available, so it's positioned here.
1922 this.createRollInterface_();
1924 // Same thing applies for the labelsDiv. It's right edge should be flush with
1925 // the right edge of the charting area (which may not be the same as the right
1926 // edge of the div, if we have two y-axes.
1927 this.positionLabelsDiv_();
1929 // If the data or options have changed, then we'd better redraw.
1935 * Update the graph with new data. This method is called when the viewing area
1936 * has changed. If the underlying data or options have changed, predraw_ will
1937 * be called before drawGraph_ is called.
1940 Dygraph
.prototype.drawGraph_
= function() {
1941 var data
= this.rawData_
;
1943 // This is used to set the second parameter to drawCallback, below.
1944 var is_initial_draw
= this.is_initial_draw_
;
1945 this.is_initial_draw_
= false;
1947 var minY
= null, maxY
= null;
1948 this.layout_
.removeAllDatasets();
1950 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1952 // Loop over the fields (series). Go from the last to the first,
1953 // because if they're stacked that's how we accumulate the values.
1955 var cumulative_y
= []; // For stacked series.
1958 var extremes
= {}; // series name -> [low, high]
1960 // Loop over all fields and create datasets
1961 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1962 if (!this.visibility()[i
- 1]) continue;
1964 var seriesName
= this.attr_("labels")[i
];
1965 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1968 for (var j
= 0; j
< data
.length
; j
++) {
1969 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1970 var date
= data
[j
][0];
1971 series
.push([date
, data
[j
][i
]]);
1975 // TODO(danvk): move this into predraw_. It's insane to do it here.
1976 series
= this.rollingAverage(series
, this.rollPeriod_
);
1978 // Prune down to the desired range, if necessary (for zooming)
1979 // Because there can be lines going to points outside of the visible area,
1980 // we actually prune to visible points, plus one on either side.
1981 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1982 if (this.dateWindow_
) {
1983 var low
= this.dateWindow_
[0];
1984 var high
= this.dateWindow_
[1];
1986 // TODO(danvk): do binary search instead of linear search.
1987 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1988 var firstIdx
= null, lastIdx
= null;
1989 for (var k
= 0; k
< series
.length
; k
++) {
1990 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1993 if (series
[k
][0] <= high
) {
1997 if (firstIdx
=== null) firstIdx
= 0;
1998 if (firstIdx
> 0) firstIdx
--;
1999 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2000 if (lastIdx
< series
.length
- 1) lastIdx
++;
2001 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2002 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2003 pruned
.push(series
[k
]);
2007 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2010 var seriesExtremes
= this.extremeValues_(series
);
2013 for (var j
=0; j
<series
.length
; j
++) {
2014 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2017 } else if (this.attr_("stackedGraph")) {
2018 var l
= series
.length
;
2020 for (var j
= 0; j
< l
; j
++) {
2021 // If one data set has a NaN, let all subsequent stacked
2022 // sets inherit the NaN -- only start at 0 for the first set.
2023 var x
= series
[j
][0];
2024 if (cumulative_y
[x
] === undefined
) {
2025 cumulative_y
[x
] = 0;
2028 actual_y
= series
[j
][1];
2029 cumulative_y
[x
] += actual_y
;
2031 series
[j
] = [x
, cumulative_y
[x
]]
2033 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2034 seriesExtremes
[1] = cumulative_y
[x
];
2036 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2037 seriesExtremes
[0] = cumulative_y
[x
];
2041 extremes
[seriesName
] = seriesExtremes
;
2043 datasets
[i
] = series
;
2046 for (var i
= 1; i
< datasets
.length
; i
++) {
2047 if (!this.visibility()[i
- 1]) continue;
2048 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2051 // TODO(danvk): this method doesn't need to return anything.
2052 var out
= this.computeYAxisRanges_(extremes
);
2054 var seriesToAxisMap
= out
[1];
2055 this.layout_
.updateOptions( { yAxes
: axes
,
2056 seriesToAxisMap
: seriesToAxisMap
2061 // Tell PlotKit to use this new data and render itself
2062 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2063 this.layout_
.evaluateWithError();
2064 this.plotter_
.clear();
2065 this.plotter_
.render();
2066 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2067 this.canvas_
.height
);
2069 if (this.attr_("drawCallback") !== null) {
2070 this.attr_("drawCallback")(this, is_initial_draw
);
2075 * Determine properties of the y-axes which are independent of the data
2076 * currently being displayed. This includes things like the number of axes and
2077 * the style of the axes. It does not include the range of each axis and its
2079 * This fills in this.axes_ and this.seriesToAxisMap_.
2080 * axes_ = [ { options } ]
2081 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2082 * indices are into the axes_ array.
2084 Dygraph
.prototype.computeYAxes_
= function() {
2085 this.axes_
= [{}]; // always have at least one y-axis.
2086 this.seriesToAxisMap_
= {};
2088 // Get a list of series names.
2089 var labels
= this.attr_("labels");
2091 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2093 // all options which could be applied per-axis:
2101 'axisLabelFontSize',
2105 // Copy global axis options over to the first axis.
2106 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2107 var k
= axisOptions
[i
];
2108 var v
= this.attr_(k
);
2109 if (v
) this.axes_
[0][k
] = v
;
2112 // Go through once and add all the axes.
2113 for (var seriesName
in series
) {
2114 if (!series
.hasOwnProperty(seriesName
)) continue;
2115 var axis
= this.attr_("axis", seriesName
);
2117 this.seriesToAxisMap_
[seriesName
] = 0;
2120 if (typeof(axis
) == 'object') {
2121 // Add a new axis, making a copy of its per-axis options.
2123 Dygraph
.update(opts
, this.axes_
[0]);
2124 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2125 Dygraph
.update(opts
, axis
);
2126 this.axes_
.push(opts
);
2127 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2131 // Go through one more time and assign series to an axis defined by another
2132 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2133 for (var seriesName
in series
) {
2134 if (!series
.hasOwnProperty(seriesName
)) continue;
2135 var axis
= this.attr_("axis", seriesName
);
2136 if (typeof(axis
) == 'string') {
2137 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2138 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2139 "series " + axis
+ ", which does not define its own axis.");
2142 var idx
= this.seriesToAxisMap_
[axis
];
2143 this.seriesToAxisMap_
[seriesName
] = idx
;
2147 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2148 // this last so that hiding the first series doesn't destroy the axis
2149 // properties of the primary axis.
2150 var seriesToAxisFiltered
= {};
2151 var vis
= this.visibility();
2152 for (var i
= 1; i
< labels
.length
; i
++) {
2154 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2156 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2160 * Returns the number of y-axes on the chart.
2161 * @return {Number} the number of axes.
2163 Dygraph
.prototype.numAxes
= function() {
2165 for (var series
in this.seriesToAxisMap_
) {
2166 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2167 var idx
= this.seriesToAxisMap_
[series
];
2168 if (idx
> last_axis
) last_axis
= idx
;
2170 return 1 + last_axis
;
2174 * Determine the value range and tick marks for each axis.
2175 * @param {Object} extremes A mapping from seriesName -> [low, high]
2176 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2178 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2179 // Build a map from axis number -> [list of series names]
2180 var seriesForAxis
= [];
2181 for (var series
in this.seriesToAxisMap_
) {
2182 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2183 var idx
= this.seriesToAxisMap_
[series
];
2184 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2185 seriesForAxis
[idx
].push(series
);
2188 // Compute extreme values, a span and tick marks for each axis.
2189 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2190 var axis
= this.axes_
[i
];
2191 if (axis
.valueWindow
) {
2192 // This is only set if the user has zoomed on the y-axis. It is never set
2193 // by a user. It takes precedence over axis.valueRange because, if you set
2194 // valueRange, you'd still expect to be able to pan.
2195 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2196 } else if (axis
.valueRange
) {
2197 // This is a user-set value range for this axis.
2198 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2200 // Calculate the extremes of extremes.
2201 var series
= seriesForAxis
[i
];
2202 var minY
= Infinity
; // extremes[series[0]][0];
2203 var maxY
= -Infinity
; // extremes[series[0]][1];
2204 for (var j
= 0; j
< series
.length
; j
++) {
2205 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2206 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2208 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2210 // Add some padding and round up to an integer to be human-friendly.
2211 var span
= maxY
- minY
;
2212 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2213 if (span
== 0) { span
= maxY
; }
2214 var maxAxisY
= maxY
+ 0.1 * span
;
2215 var minAxisY
= minY
- 0.1 * span
;
2217 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2218 if (!this.attr_("avoidMinZero")) {
2219 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2220 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2223 if (this.attr_("includeZero")) {
2224 if (maxY
< 0) maxAxisY
= 0;
2225 if (minY
> 0) minAxisY
= 0;
2228 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2231 // Add ticks. By default, all axes inherit the tick positions of the
2232 // primary axis. However, if an axis is specifically marked as having
2233 // independent ticks, then that is permissible as well.
2234 if (i
== 0 || axis
.independentTicks
) {
2236 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2237 axis
.computedValueRange
[1],
2241 var p_axis
= this.axes_
[0];
2242 var p_ticks
= p_axis
.ticks
;
2243 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2244 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2245 var tick_values
= [];
2246 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2247 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2248 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2249 tick_values
.push(y_val
);
2253 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2254 axis
.computedValueRange
[1],
2255 this, axis
, tick_values
);
2259 return [this.axes_
, this.seriesToAxisMap_
];
2263 * Calculates the rolling average of a data set.
2264 * If originalData is [label, val], rolls the average of those.
2265 * If originalData is [label, [, it's interpreted as [value, stddev]
2266 * and the roll is returned in the same form, with appropriately reduced
2267 * stddev for each value.
2268 * Note that this is where fractional input (i.e. '5/10') is converted into
2270 * @param {Array} originalData The data in the appropriate format (see above)
2271 * @param {Number} rollPeriod The number of days over which to average the data
2273 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2274 if (originalData
.length
< 2)
2275 return originalData
;
2276 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2277 var rollingData
= [];
2278 var sigma
= this.attr_("sigma");
2280 if (this.fractions_
) {
2282 var den
= 0; // numerator/denominator
2284 for (var i
= 0; i
< originalData
.length
; i
++) {
2285 num
+= originalData
[i
][1][0];
2286 den
+= originalData
[i
][1][1];
2287 if (i
- rollPeriod
>= 0) {
2288 num
-= originalData
[i
- rollPeriod
][1][0];
2289 den
-= originalData
[i
- rollPeriod
][1][1];
2292 var date
= originalData
[i
][0];
2293 var value
= den
? num
/ den
: 0.0;
2294 if (this.attr_("errorBars")) {
2295 if (this.wilsonInterval_
) {
2296 // For more details on this confidence interval, see:
2297 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2299 var p
= value
< 0 ? 0 : value
, n
= den
;
2300 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2301 var denom
= 1 + sigma
* sigma
/ den
;
2302 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2303 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2304 rollingData
[i
] = [date
,
2305 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2307 rollingData
[i
] = [date
, [0, 0, 0]];
2310 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2311 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2314 rollingData
[i
] = [date
, mult
* value
];
2317 } else if (this.attr_("customBars")) {
2322 for (var i
= 0; i
< originalData
.length
; i
++) {
2323 var data
= originalData
[i
][1];
2325 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2327 if (y
!= null && !isNaN(y
)) {
2333 if (i
- rollPeriod
>= 0) {
2334 var prev
= originalData
[i
- rollPeriod
];
2335 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2342 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2343 1.0 * (mid
- low
) / count
,
2344 1.0 * (high
- mid
) / count
]];
2347 // Calculate the rolling average for the first rollPeriod - 1 points where
2348 // there is not enough data to roll over the full number of days
2349 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2350 if (!this.attr_("errorBars")){
2351 if (rollPeriod
== 1) {
2352 return originalData
;
2355 for (var i
= 0; i
< originalData
.length
; i
++) {
2358 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2359 var y
= originalData
[j
][1];
2360 if (y
== null || isNaN(y
)) continue;
2362 sum
+= originalData
[j
][1];
2365 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2367 rollingData
[i
] = [originalData
[i
][0], null];
2372 for (var i
= 0; i
< originalData
.length
; i
++) {
2376 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2377 var y
= originalData
[j
][1][0];
2378 if (y
== null || isNaN(y
)) continue;
2380 sum
+= originalData
[j
][1][0];
2381 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2384 var stddev
= Math
.sqrt(variance
) / num_ok
;
2385 rollingData
[i
] = [originalData
[i
][0],
2386 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2388 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2398 * Parses a date, returning the number of milliseconds since epoch. This can be
2399 * passed in as an xValueParser in the Dygraph constructor.
2400 * TODO(danvk): enumerate formats that this understands.
2401 * @param {String} A date in YYYYMMDD format.
2402 * @return {Number} Milliseconds since epoch.
2405 Dygraph
.dateParser
= function(dateStr
, self
) {
2408 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2409 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2410 while (dateStrSlashed
.search("-") != -1) {
2411 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2413 d
= Date
.parse(dateStrSlashed
);
2414 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2415 // TODO(danvk): remove support for this format. It's confusing.
2416 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2417 + "/" + dateStr
.substr(6,2);
2418 d
= Date
.parse(dateStrSlashed
);
2420 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2421 // "2009/07/12 12:34:56"
2422 d
= Date
.parse(dateStr
);
2425 if (!d
|| isNaN(d
)) {
2426 self
.error("Couldn't parse " + dateStr
+ " as a date");
2432 * Detects the type of the str (date or numeric) and sets the various
2433 * formatting attributes in this.attrs_ based on this type.
2434 * @param {String} str An x value.
2437 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2439 if (str
.indexOf('-') >= 0 ||
2440 str
.indexOf('/') >= 0 ||
2441 isNaN(parseFloat(str
))) {
2443 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2444 // TODO(danvk): remove support for this format.
2449 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2450 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2451 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2452 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2454 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2455 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2456 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2457 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2462 * Parses a string in a special csv format. We expect a csv file where each
2463 * line is a date point, and the first field in each line is the date string.
2464 * We also expect that all remaining fields represent series.
2465 * if the errorBars attribute is set, then interpret the fields as:
2466 * date, series1, stddev1, series2, stddev2, ...
2467 * @param {Array.<Object>} data See above.
2470 * @return Array.<Object> An array with one entry for each row. These entries
2471 * are an array of cells in that row. The first entry is the parsed x-value for
2472 * the row. The second, third, etc. are the y-values. These can take on one of
2473 * three forms, depending on the CSV and constructor parameters:
2475 * 2. [ value, stddev ]
2476 * 3. [ low value, center value, high value ]
2478 Dygraph
.prototype.parseCSV_
= function(data
) {
2480 var lines
= data
.split("\n");
2482 // Use the default delimiter or fall back to a tab if that makes sense.
2483 var delim
= this.attr_('delimiter');
2484 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2489 if (this.labelsFromCSV_
) {
2491 this.attrs_
.labels
= lines
[0].split(delim
);
2494 // Parse the x as a float or return null if it's not a number.
2495 var parseFloatOrNull
= function(x
) {
2496 var val
= parseFloat(x
);
2497 // isFinite() returns false for NaN and +/-Infinity
.
2498 return isFinite(val
) ? val
: null;
2502 var defaultParserSet
= false; // attempt to auto-detect x value type
2503 var expectedCols
= this.attr_("labels").length
;
2504 var outOfOrder
= false;
2505 for (var i
= start
; i
< lines
.length
; i
++) {
2506 var line
= lines
[i
];
2507 if (line
.length
== 0) continue; // skip blank lines
2508 if (line
[0] == '#') continue; // skip comment lines
2509 var inFields
= line
.split(delim
);
2510 if (inFields
.length
< 2) continue;
2513 if (!defaultParserSet
) {
2514 this.detectTypeFromString_(inFields
[0]);
2515 xParser
= this.attr_("xValueParser");
2516 defaultParserSet
= true;
2518 fields
[0] = xParser(inFields
[0], this);
2520 // If fractions are expected, parse the numbers as "A/B
"
2521 if (this.fractions_) {
2522 for (var j = 1; j < inFields.length; j++) {
2523 // TODO(danvk): figure out an appropriate way to flag parse errors.
2524 var vals = inFields[j].split("/");
2525 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2527 } else if (this.attr_("errorBars
")) {
2528 // If there are error bars, values are (value, stddev) pairs
2529 for (var j = 1; j < inFields.length; j += 2)
2530 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2531 parseFloatOrNull(inFields[j + 1])];
2532 } else if (this.attr_("customBars
")) {
2533 // Bars are a low;center;high tuple
2534 for (var j = 1; j < inFields.length; j++) {
2535 var vals = inFields[j].split(";");
2536 fields[j] = [ parseFloatOrNull(vals[0]),
2537 parseFloatOrNull(vals[1]),
2538 parseFloatOrNull(vals[2]) ];
2541 // Values are just numbers
2542 for (var j = 1; j < inFields.length; j++) {
2543 fields[j] = parseFloatOrNull(inFields[j]);
2546 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2551 if (fields.length != expectedCols) {
2552 this.error("Number of columns
in line
" + i + " (" + fields.length +
2553 ") does not agree
with number of
labels (" + expectedCols +
2559 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2560 ret.sort(function(a,b) { return a[0] - b[0] });
2567 * The user has provided their data as a pre-packaged JS array. If the x values
2568 * are numeric, this is the same as dygraphs' internal format. If the x values
2569 * are dates, we need to convert them from Date objects to ms since epoch.
2570 * @param {Array.<Object>} data
2571 * @return {Array.<Object>} data with numeric x values.
2573 Dygraph.prototype.parseArray_ = function(data) {
2574 // Peek at the first x value to see if it's numeric.
2575 if (data.length == 0) {
2576 this.error("Can
't plot empty data set");
2579 if (data[0].length == 0) {
2580 this.error("Data set cannot contain an empty row");
2584 if (this.attr_("labels") == null) {
2585 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2586 "in the options parameter");
2587 this.attrs_.labels = [ "X" ];
2588 for (var i = 1; i < data[0].length; i++) {
2589 this.attrs_.labels.push("Y" + i);
2593 if (Dygraph.isDateLike(data[0][0])) {
2594 // Some intelligent defaults for a date x-axis.
2595 this.attrs_.xValueFormatter = Dygraph.dateString_;
2596 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2597 this.attrs_.xTicker = Dygraph.dateTicker;
2599 // Assume they're all dates
.
2600 var parsedData
= Dygraph
.clone(data
);
2601 for (var i
= 0; i
< data
.length
; i
++) {
2602 if (parsedData
[i
].length
== 0) {
2603 this.error("Row " + (1 + i
) + " of data is empty");
2606 if (parsedData
[i
][0] == null
2607 || typeof(parsedData
[i
][0].getTime
) != 'function'
2608 || isNaN(parsedData
[i
][0].getTime())) {
2609 this.error("x value in row " + (1 + i
) + " is not a Date");
2612 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2616 // Some intelligent defaults for a numeric x-axis.
2617 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2618 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2624 * Parses a DataTable object from gviz.
2625 * The data is expected to have a first column that is either a date or a
2626 * number. All subsequent columns must be numbers. If there is a clear mismatch
2627 * between this.xValueParser_ and the type of the first column, it will be
2628 * fixed. Fills out rawData_.
2629 * @param {Array.<Object>} data See above.
2632 Dygraph
.prototype.parseDataTable_
= function(data
) {
2633 var cols
= data
.getNumberOfColumns();
2634 var rows
= data
.getNumberOfRows();
2636 var indepType
= data
.getColumnType(0);
2637 if (indepType
== 'date' || indepType
== 'datetime') {
2638 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2639 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2640 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2641 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2642 } else if (indepType
== 'number') {
2643 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2644 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2645 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2646 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2648 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2649 "column 1 of DataTable input (Got '" + indepType
+ "')");
2653 // Array of the column indices which contain data (and not annotations).
2655 var annotationCols
= {}; // data index -> [annotation cols]
2656 var hasAnnotations
= false;
2657 for (var i
= 1; i
< cols
; i
++) {
2658 var type
= data
.getColumnType(i
);
2659 if (type
== 'number') {
2661 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2662 // This is OK -- it's an annotation column.
2663 var dataIdx
= colIdx
[colIdx
.length
- 1];
2664 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2665 annotationCols
[dataIdx
] = [i
];
2667 annotationCols
[dataIdx
].push(i
);
2669 hasAnnotations
= true;
2671 this.error("Only 'number' is supported as a dependent type with Gviz." +
2672 " 'string' is only supported if displayAnnotations is true");
2676 // Read column labels
2677 // TODO(danvk): add support back for errorBars
2678 var labels
= [data
.getColumnLabel(0)];
2679 for (var i
= 0; i
< colIdx
.length
; i
++) {
2680 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2681 if (this.attr_("errorBars")) i
+= 1;
2683 this.attrs_
.labels
= labels
;
2684 cols
= labels
.length
;
2687 var outOfOrder
= false;
2688 var annotations
= [];
2689 for (var i
= 0; i
< rows
; i
++) {
2691 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2692 data
.getValue(i
, 0) === null) {
2693 this.warn("Ignoring row " + i
+
2694 " of DataTable because of undefined or null first column.");
2698 if (indepType
== 'date' || indepType
== 'datetime') {
2699 row
.push(data
.getValue(i
, 0).getTime());
2701 row
.push(data
.getValue(i
, 0));
2703 if (!this.attr_("errorBars")) {
2704 for (var j
= 0; j
< colIdx
.length
; j
++) {
2705 var col
= colIdx
[j
];
2706 row
.push(data
.getValue(i
, col
));
2707 if (hasAnnotations
&&
2708 annotationCols
.hasOwnProperty(col
) &&
2709 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2711 ann
.series
= data
.getColumnLabel(col
);
2713 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2715 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2716 if (k
) ann
.text
+= "\n";
2717 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2719 annotations
.push(ann
);
2723 for (var j
= 0; j
< cols
- 1; j
++) {
2724 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2727 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2731 // Strip out infinities, which give dygraphs problems later on.
2732 for (var j
= 0; j
< row
.length
; j
++) {
2733 if (!isFinite(row
[j
])) row
[j
] = null;
2739 this.warn("DataTable is out of order; order it correctly to speed loading.");
2740 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2742 this.rawData_
= ret
;
2744 if (annotations
.length
> 0) {
2745 this.setAnnotations(annotations
, true);
2749 // These functions are all based on MochiKit.
2750 Dygraph
.update
= function (self
, o
) {
2751 if (typeof(o
) != 'undefined' && o
!== null) {
2753 if (o
.hasOwnProperty(k
)) {
2761 Dygraph
.isArrayLike
= function (o
) {
2762 var typ
= typeof(o
);
2764 (typ
!= 'object' && !(typ
== 'function' &&
2765 typeof(o
.item
) == 'function')) ||
2767 typeof(o
.length
) != 'number' ||
2775 Dygraph
.isDateLike
= function (o
) {
2776 if (typeof(o
) != "object" || o
=== null ||
2777 typeof(o
.getTime
) != 'function') {
2783 Dygraph
.clone
= function(o
) {
2784 // TODO(danvk): figure out how MochiKit's version works
2786 for (var i
= 0; i
< o
.length
; i
++) {
2787 if (Dygraph
.isArrayLike(o
[i
])) {
2788 r
.push(Dygraph
.clone(o
[i
]));
2798 * Get the CSV data. If it's in a function, call that function. If it's in a
2799 * file, do an XMLHttpRequest to get it.
2802 Dygraph
.prototype.start_
= function() {
2803 if (typeof this.file_
== 'function') {
2804 // CSV string. Pretend we got it via XHR.
2805 this.loadedEvent_(this.file_());
2806 } else if (Dygraph
.isArrayLike(this.file_
)) {
2807 this.rawData_
= this.parseArray_(this.file_
);
2809 } else if (typeof this.file_
== 'object' &&
2810 typeof this.file_
.getColumnRange
== 'function') {
2811 // must be a DataTable from gviz.
2812 this.parseDataTable_(this.file_
);
2814 } else if (typeof this.file_
== 'string') {
2815 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2816 if (this.file_
.indexOf('\n') >= 0) {
2817 this.loadedEvent_(this.file_
);
2819 var req
= new XMLHttpRequest();
2821 req
.onreadystatechange
= function () {
2822 if (req
.readyState
== 4) {
2823 if (req
.status
== 200) {
2824 caller
.loadedEvent_(req
.responseText
);
2829 req
.open("GET", this.file_
, true);
2833 this.error("Unknown data format: " + (typeof this.file_
));
2838 * Changes various properties of the graph. These can include:
2840 * <li>file: changes the source data for the graph</li>
2841 * <li>errorBars: changes whether the data contains stddev</li>
2843 * @param {Object} attrs The new properties and values
2845 Dygraph
.prototype.updateOptions
= function(attrs
) {
2846 // TODO(danvk): this is a mess. Rethink this function.
2847 if ('rollPeriod' in attrs
) {
2848 this.rollPeriod_
= attrs
.rollPeriod
;
2850 if ('dateWindow' in attrs
) {
2851 this.dateWindow_
= attrs
.dateWindow
;
2854 // TODO(danvk): validate per-series options.
2859 // highlightCircleSize
2861 Dygraph
.update(this.user_attrs_
, attrs
);
2862 Dygraph
.update(this.renderOptions_
, attrs
);
2864 this.labelsFromCSV_
= (this.attr_("labels") == null);
2866 // TODO(danvk): this doesn't match the constructor logic
2867 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2868 if (attrs
['file']) {
2869 this.file_
= attrs
['file'];
2877 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2878 * containing div (which has presumably changed size since the dygraph was
2879 * instantiated. If the width/height are specified, the div will be resized.
2881 * This is far more efficient than destroying and re-instantiating a
2882 * Dygraph, since it doesn't have to reparse the underlying data.
2884 * @param {Number} width Width (in pixels)
2885 * @param {Number} height Height (in pixels)
2887 Dygraph
.prototype.resize
= function(width
, height
) {
2888 if (this.resize_lock
) {
2891 this.resize_lock
= true;
2893 if ((width
=== null) != (height
=== null)) {
2894 this.warn("Dygraph.resize() should be called with zero parameters or " +
2895 "two non-NULL parameters. Pretending it was zero.");
2896 width
= height
= null;
2899 // TODO(danvk): there should be a clear() method.
2900 this.maindiv_
.innerHTML
= "";
2901 this.attrs_
.labelsDiv
= null;
2904 this.maindiv_
.style
.width
= width
+ "px";
2905 this.maindiv_
.style
.height
= height
+ "px";
2906 this.width_
= width
;
2907 this.height_
= height
;
2909 this.width_
= this.maindiv_
.offsetWidth
;
2910 this.height_
= this.maindiv_
.offsetHeight
;
2913 this.createInterface_();
2916 this.resize_lock
= false;
2920 * Adjusts the number of days in the rolling average. Updates the graph to
2921 * reflect the new averaging period.
2922 * @param {Number} length Number of days over which to average the data.
2924 Dygraph
.prototype.adjustRoll
= function(length
) {
2925 this.rollPeriod_
= length
;
2930 * Returns a boolean array of visibility statuses.
2932 Dygraph
.prototype.visibility
= function() {
2933 // Do lazy-initialization, so that this happens after we know the number of
2935 if (!this.attr_("visibility")) {
2936 this.attrs_
["visibility"] = [];
2938 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2939 this.attr_("visibility").push(true);
2941 return this.attr_("visibility");
2945 * Changes the visiblity of a series.
2947 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2948 var x
= this.visibility();
2949 if (num
< 0 || num
>= x
.length
) {
2950 this.warn("invalid series number in setVisibility: " + num
);
2958 * Update the list of annotations and redraw the chart.
2960 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2961 // Only add the annotation CSS rule once we know it will be used.
2962 Dygraph
.addAnnotationRule();
2963 this.annotations_
= ann
;
2964 this.layout_
.setAnnotations(this.annotations_
);
2965 if (!suppressDraw
) {
2971 * Return the list of annotations.
2973 Dygraph
.prototype.annotations
= function() {
2974 return this.annotations_
;
2978 * Get the index of a series (column) given its name. The first column is the
2979 * x-axis, so the data series start with index 1.
2981 Dygraph
.prototype.indexFromSetName
= function(name
) {
2982 var labels
= this.attr_("labels");
2983 for (var i
= 0; i
< labels
.length
; i
++) {
2984 if (labels
[i
] == name
) return i
;
2989 Dygraph
.addAnnotationRule
= function() {
2990 if (Dygraph
.addedAnnotationCSS
) return;
2992 var rule
= "border: 1px solid black; " +
2993 "background-color: white; " +
2994 "text-align: center;";
2996 var styleSheetElement
= document
.createElement("style");
2997 styleSheetElement
.type
= "text/css";
2998 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3000 // Find the first style sheet that we can access.
3001 // We may not add a rule to a style sheet from another domain for security
3002 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3003 // adds its own style sheets from google.com.
3004 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3005 if (document
.styleSheets
[i
].disabled
) continue;
3006 var mysheet
= document
.styleSheets
[i
];
3008 if (mysheet
.insertRule
) { // Firefox
3009 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3010 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3011 } else if (mysheet
.addRule
) { // IE
3012 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3014 Dygraph
.addedAnnotationCSS
= true;
3017 // Was likely a security exception.
3021 this.warn("Unable to add default annotation CSS rule; display may be off.");
3025 * Create a new canvas element. This is more complex than a simple
3026 * document.createElement("canvas") because of IE and excanvas.
3028 Dygraph
.createCanvas
= function() {
3029 var canvas
= document
.createElement("canvas");
3031 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3032 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3033 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3041 * A wrapper around Dygraph that implements the gviz API.
3042 * @param {Object} container The DOM object the visualization should live in.
3044 Dygraph
.GVizChart
= function(container
) {
3045 this.container
= container
;
3048 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3049 // Clear out any existing dygraph.
3050 // TODO(danvk): would it make more sense to simply redraw using the current
3051 // date_graph object?
3052 this.container
.innerHTML
= '';
3053 if (typeof(this.date_graph
) != 'undefined') {
3054 this.date_graph
.destroy();
3057 this.date_graph
= new Dygraph(this.container
, data
, options
);
3061 * Google charts compatible setSelection
3062 * Only row selection is supported, all points in the row will be highlighted
3063 * @param {Array} array of the selected cells
3066 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3068 if (selection_array
.length
) {
3069 row
= selection_array
[0].row
;
3071 this.date_graph
.setSelection(row
);
3075 * Google charts compatible getSelection implementation
3076 * @return {Array} array of the selected cells
3079 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3082 var row
= this.date_graph
.getSelection();
3084 if (row
< 0) return selection
;
3087 for (var i
in this.date_graph
.layout_
.datasets
) {
3088 selection
.push({row
: row
, column
: col
});
3095 // Older pages may still use this name.
3096 DateGraph
= Dygraph
;