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://www.danvk.org/dygraphs
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 interaction <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 // Support two-argument constructor
170 if (attrs
== null) { attrs
= {}; }
172 // Copy the important bits into the object
173 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
176 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
177 this.previousVerticalX_
= -1;
178 this.fractions_
= attrs
.fractions
|| false;
179 this.dateWindow_
= attrs
.dateWindow
|| null;
181 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
182 this.is_initial_draw_
= true;
183 this.annotations_
= [];
185 // Clear the div. This ensure that, if multiple dygraphs are passed the same
186 // div, then only one will be drawn.
189 // If the div isn't already sized then inherit from our attrs or
190 // give it a default size.
191 if (div
.style
.width
== '') {
192 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
194 if (div
.style
.height
== '') {
195 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
197 this.width_
= parseInt(div
.style
.width
, 10);
198 this.height_
= parseInt(div
.style
.height
, 10);
199 // The div might have been specified as percent of the current window size,
200 // convert that to an appropriate number of pixels.
201 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
202 this.width_
= div
.offsetWidth
;
204 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
205 this.height_
= div
.offsetHeight
;
208 if (this.width_
== 0) {
209 this.error("dygraph has zero width. Please specify a width in pixels.");
211 if (this.height_
== 0) {
212 this.error("dygraph has zero height. Please specify a height in pixels.");
215 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
216 if (attrs
['stackedGraph']) {
217 attrs
['fillGraph'] = true;
218 // TODO(nikhilk): Add any other stackedGraph checks here.
221 // Dygraphs has many options, some of which interact with one another.
222 // To keep track of everything, we maintain two sets of options:
224 // this.user_attrs_ only options explicitly set by the user.
225 // this.attrs_ defaults, options derived from user_attrs_, data.
227 // Options are then accessed this.attr_('attr'), which first looks at
228 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
229 // defaults without overriding behavior that the user specifically asks for.
230 this.user_attrs_
= {};
231 Dygraph
.update(this.user_attrs_
, attrs
);
234 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
236 this.boundaryIds_
= [];
238 // Make a note of whether labels will be pulled from the CSV file.
239 this.labelsFromCSV_
= (this.attr_("labels") == null);
241 // Create the containing DIV and other interactive elements
242 this.createInterface_();
247 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
249 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
250 this.user_attrs_
[seriesName
] != null &&
251 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
252 return this.user_attrs_
[seriesName
][name
];
253 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
254 return this.user_attrs_
[name
];
255 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
256 return this.attrs_
[name
];
262 // TODO(danvk): any way I can get the line numbers to be this.warn call?
263 Dygraph
.prototype.log
= function(severity
, message
) {
264 if (typeof(console
) != 'undefined') {
267 console
.debug('dygraphs: ' + message
);
270 console
.info('dygraphs: ' + message
);
272 case Dygraph
.WARNING
:
273 console
.warn('dygraphs: ' + message
);
276 console
.error('dygraphs: ' + message
);
281 Dygraph
.prototype.info
= function(message
) {
282 this.log(Dygraph
.INFO
, message
);
284 Dygraph
.prototype.warn
= function(message
) {
285 this.log(Dygraph
.WARNING
, message
);
287 Dygraph
.prototype.error
= function(message
) {
288 this.log(Dygraph
.ERROR
, message
);
292 * Returns the current rolling period, as set by the user or an option.
293 * @return {Number} The number of days in the rolling window
295 Dygraph
.prototype.rollPeriod
= function() {
296 return this.rollPeriod_
;
300 * Returns the currently-visible x-range. This can be affected by zooming,
301 * panning or a call to updateOptions.
302 * Returns a two-element array: [left, right].
303 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
305 Dygraph
.prototype.xAxisRange
= function() {
306 if (this.dateWindow_
) return this.dateWindow_
;
308 // The entire chart is visible.
309 var left
= this.rawData_
[0][0];
310 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
311 return [left
, right
];
315 * Returns the currently-visible y-range for an axis. This can be affected by
316 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
317 * called with no arguments, returns the range of the first axis.
318 * Returns a two-element array: [bottom, top].
320 Dygraph
.prototype.yAxisRange
= function(idx
) {
321 if (typeof(idx
) == "undefined") idx
= 0;
322 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
323 return [ this.axes_
[idx
].computedValueRange
[0],
324 this.axes_
[idx
].computedValueRange
[1] ];
328 * Returns the currently-visible y-ranges for each axis. This can be affected by
329 * zooming, panning, calls to updateOptions, etc.
330 * Returns an array of [bottom, top] pairs, one for each y-axis.
332 Dygraph
.prototype.yAxisRanges
= function() {
334 for (var i
= 0; i
< this.axes_
.length
; i
++) {
335 ret
.push(this.yAxisRange(i
));
340 // TODO(danvk): use these functions throughout dygraphs.
342 * Convert from data coordinates to canvas/div X/Y coordinates.
343 * If specified, do this conversion for the coordinate system of a particular
344 * axis. Uses the first axis by default.
345 * Returns a two-element array: [X, Y]
347 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
348 var ret
= [null, null];
349 var area
= this.plotter_
.area
;
351 var xRange
= this.xAxisRange();
352 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
356 var yRange
= this.yAxisRange(axis
);
357 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
364 * Convert from canvas/div coords to data coordinates.
365 * If specified, do this conversion for the coordinate system of a particular
366 * axis. Uses the first axis by default.
367 * Returns a two-element array: [X, Y]
369 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
370 var ret
= [null, null];
371 var area
= this.plotter_
.area
;
373 var xRange
= this.xAxisRange();
374 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
378 var yRange
= this.yAxisRange(axis
);
379 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
386 * Returns the number of columns (including the independent variable).
388 Dygraph
.prototype.numColumns
= function() {
389 return this.rawData_
[0].length
;
393 * Returns the number of rows (excluding any header/label row).
395 Dygraph
.prototype.numRows
= function() {
396 return this.rawData_
.length
;
400 * Returns the value in the given row and column. If the row and column exceed
401 * the bounds on the data, returns null. Also returns null if the value is
404 Dygraph
.prototype.getValue
= function(row
, col
) {
405 if (row
< 0 || row
> this.rawData_
.length
) return null;
406 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
408 return this.rawData_
[row
][col
];
411 Dygraph
.addEvent
= function(el
, evt
, fn
) {
412 var normed_fn
= function(e
) {
413 if (!e
) var e
= window
.event
;
416 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
417 el
.addEventListener(evt
, normed_fn
, false);
419 el
.attachEvent('on' + evt
, normed_fn
);
424 * Generates interface elements for the Dygraph: a containing div, a div to
425 * display the current point, and a textbox to adjust the rolling average
426 * period. Also creates the Renderer/Layout elements.
429 Dygraph
.prototype.createInterface_
= function() {
430 // Create the all-enclosing graph div
431 var enclosing
= this.maindiv_
;
433 this.graphDiv
= document
.createElement("div");
434 this.graphDiv
.style
.width
= this.width_
+ "px";
435 this.graphDiv
.style
.height
= this.height_
+ "px";
436 enclosing
.appendChild(this.graphDiv
);
438 // Create the canvas for interactive parts of the chart.
439 this.canvas_
= Dygraph
.createCanvas();
440 this.canvas_
.style
.position
= "absolute";
441 this.canvas_
.width
= this.width_
;
442 this.canvas_
.height
= this.height_
;
443 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
444 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
446 // ... and for static parts of the chart.
447 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
449 // The interactive parts of the graph are drawn on top of the chart.
450 this.graphDiv
.appendChild(this.hidden_
);
451 this.graphDiv
.appendChild(this.canvas_
);
452 this.mouseEventElement_
= this.canvas_
;
455 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
456 dygraph
.mouseMove_(e
);
458 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
459 dygraph
.mouseOut_(e
);
462 // Create the grapher
463 // TODO(danvk): why does the Layout need its own set of options?
464 this.layoutOptions_
= { 'xOriginIsZero': false };
465 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
466 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
467 Dygraph
.update(this.layoutOptions_
, {
468 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
470 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
472 // TODO(danvk): why does the Renderer need its own set of options?
473 this.renderOptions_
= { colorScheme
: this.colors_
,
475 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
476 Dygraph
.update(this.renderOptions_
, this.attrs_
);
477 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
479 this.createStatusMessage_();
480 this.createDragInterface_();
484 * Detach DOM elements in the dygraph and null out all data references.
485 * Calling this when you're done with a dygraph can dramatically reduce memory
486 * usage. See, e.g., the tests/perf.html example.
488 Dygraph
.prototype.destroy
= function() {
489 var removeRecursive
= function(node
) {
490 while (node
.hasChildNodes()) {
491 removeRecursive(node
.firstChild
);
492 node
.removeChild(node
.firstChild
);
495 removeRecursive(this.maindiv_
);
497 var nullOut
= function(obj
) {
499 if (typeof(obj
[n
]) === 'object') {
505 // These may not all be necessary, but it can't hurt...
506 nullOut(this.layout_
);
507 nullOut(this.plotter_
);
512 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
513 * this particular canvas. All Dygraph work is done on this.canvas_.
514 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
515 * @return {Object} The newly-created canvas
518 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
519 var h
= Dygraph
.createCanvas();
520 h
.style
.position
= "absolute";
521 // TODO(danvk): h should be offset from canvas. canvas needs to include
522 // some extra area to make it easier to zoom in on the far left and far
523 // right. h needs to be precisely the plot area, so that clipping occurs.
524 h
.style
.top
= canvas
.style
.top
;
525 h
.style
.left
= canvas
.style
.left
;
526 h
.width
= this.width_
;
527 h
.height
= this.height_
;
528 h
.style
.width
= this.width_
+ "px"; // for IE
529 h
.style
.height
= this.height_
+ "px"; // for IE
533 // Taken from MochiKit.Color
534 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
538 if (saturation
=== 0) {
543 var i
= Math
.floor(hue
* 6);
544 var f
= (hue
* 6) - i
;
545 var p
= value
* (1 - saturation
);
546 var q
= value
* (1 - (saturation
* f
));
547 var t
= value
* (1 - (saturation
* (1 - f
)));
549 case 1: red
= q
; green
= value
; blue
= p
; break;
550 case 2: red
= p
; green
= value
; blue
= t
; break;
551 case 3: red
= p
; green
= q
; blue
= value
; break;
552 case 4: red
= t
; green
= p
; blue
= value
; break;
553 case 5: red
= value
; green
= p
; blue
= q
; break;
554 case 6: // fall through
555 case 0: red
= value
; green
= t
; blue
= p
; break;
558 red
= Math
.floor(255 * red
+ 0.5);
559 green
= Math
.floor(255 * green
+ 0.5);
560 blue
= Math
.floor(255 * blue
+ 0.5);
561 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
566 * Generate a set of distinct colors for the data series. This is done with a
567 * color wheel. Saturation/Value are customizable, and the hue is
568 * equally-spaced around the color wheel. If a custom set of colors is
569 * specified, that is used instead.
572 Dygraph
.prototype.setColors_
= function() {
573 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
574 // away with this.renderOptions_.
575 var num
= this.attr_("labels").length
- 1;
577 var colors
= this.attr_('colors');
579 var sat
= this.attr_('colorSaturation') || 1.0;
580 var val
= this.attr_('colorValue') || 0.5;
581 var half
= Math
.ceil(num
/ 2);
582 for (var i
= 1; i
<= num
; i
++) {
583 if (!this.visibility()[i
-1]) continue;
584 // alternate colors for high contrast.
585 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
586 var hue
= (1.0 * idx
/ (1 + num
));
587 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
590 for (var i
= 0; i
< num
; i
++) {
591 if (!this.visibility()[i
]) continue;
592 var colorStr
= colors
[i
% colors
.length
];
593 this.colors_
.push(colorStr
);
597 // TODO(danvk): update this w/r
/t/ the
new options system
.
598 this.renderOptions_
.colorScheme
= this.colors_
;
599 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
600 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
601 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
605 * Return the list of colors. This is either the list of colors passed in the
606 * attributes, or the autogenerated list of rgb(r,g,b) strings.
607 * @return {Array<string>} The list of colors.
609 Dygraph
.prototype.getColors
= function() {
613 // The following functions are from quirksmode.org with a modification for Safari from
614 // http://blog.firetree.net/2005/07/04/javascript-find-position/
615 // http://www.quirksmode.org/js
/findpos
.html
616 Dygraph
.findPosX
= function(obj
) {
621 curleft
+= obj
.offsetLeft
;
622 if(!obj
.offsetParent
)
624 obj
= obj
.offsetParent
;
631 Dygraph
.findPosY
= function(obj
) {
636 curtop
+= obj
.offsetTop
;
637 if(!obj
.offsetParent
)
639 obj
= obj
.offsetParent
;
649 * Create the div that contains information on the selected point(s)
650 * This goes in the top right of the canvas, unless an external div has already
654 Dygraph
.prototype.createStatusMessage_
= function() {
655 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
656 if (userLabelsDiv
&& null != userLabelsDiv
657 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
658 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
660 if (!this.attr_("labelsDiv")) {
661 var divWidth
= this.attr_('labelsDivWidth');
663 "position": "absolute",
666 "width": divWidth
+ "px",
668 "left": (this.width_
- divWidth
- 2) + "px",
669 "background": "white",
671 "overflow": "hidden"};
672 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
673 var div
= document
.createElement("div");
674 for (var name
in messagestyle
) {
675 if (messagestyle
.hasOwnProperty(name
)) {
676 div
.style
[name
] = messagestyle
[name
];
679 this.graphDiv
.appendChild(div
);
680 this.attrs_
.labelsDiv
= div
;
685 * Position the labels div so that its right edge is flush with the right edge
686 * of the charting area.
688 Dygraph
.prototype.positionLabelsDiv_
= function() {
689 // Don't touch a user-specified labelsDiv.
690 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
692 var area
= this.plotter_
.area
;
693 var div
= this.attr_("labelsDiv");
694 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
698 * Create the text box to adjust the averaging period
701 Dygraph
.prototype.createRollInterface_
= function() {
702 // Create a roller if one doesn't exist already.
704 this.roller_
= document
.createElement("input");
705 this.roller_
.type
= "text";
706 this.roller_
.style
.display
= "none";
707 this.graphDiv
.appendChild(this.roller_
);
710 var display
= this.attr_('showRoller') ? 'block' : 'none';
712 var textAttr
= { "position": "absolute",
714 "top": (this.plotter_
.area
.h
- 25) + "px",
715 "left": (this.plotter_
.area
.x
+ 1) + "px",
718 this.roller_
.size
= "2";
719 this.roller_
.value
= this.rollPeriod_
;
720 for (var name
in textAttr
) {
721 if (textAttr
.hasOwnProperty(name
)) {
722 this.roller_
.style
[name
] = textAttr
[name
];
727 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
730 // These functions are taken from MochiKit.Signal
731 Dygraph
.pageX
= function(e
) {
733 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
736 var b
= document
.body
;
738 (de
.scrollLeft
|| b
.scrollLeft
) -
739 (de
.clientLeft
|| 0);
743 Dygraph
.pageY
= function(e
) {
745 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
748 var b
= document
.body
;
750 (de
.scrollTop
|| b
.scrollTop
) -
756 * Set up all the mouse handlers needed to capture dragging behavior for zoom
760 Dygraph
.prototype.createDragInterface_
= function() {
763 // Tracks whether the mouse is down right now
764 var isZooming
= false;
765 var isPanning
= false; // is this drag part of a pan?
766 var is2DPan
= false; // if so, is that pan 1- or 2-dimensional?
767 var dragStartX
= null;
768 var dragStartY
= null;
771 var dragDirection
= null;
774 var prevDragDirection
= null;
776 // TODO(danvk): update this comment
777 // draggingDate and draggingValue represent the [date,value] point on the
778 // graph at which the mouse was pressed. As the mouse moves while panning,
779 // the viewport must pan so that the mouse position points to
780 // [draggingDate, draggingValue]
781 var draggingDate
= null;
783 // TODO(danvk): update this comment
784 // The range in second/value units that the viewport encompasses during a
785 // panning operation.
786 var dateRange
= null;
788 // Utility function to convert page-wide coordinates to canvas coords
791 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
792 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
794 // Draw zoom rectangles when the mouse is down and the user moves around
795 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
797 dragEndX
= getX(event
);
798 dragEndY
= getY(event
);
800 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
801 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
803 // drag direction threshold for y axis is twice as large as x axis
804 dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
806 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
807 prevDragDirection
, prevEndX
, prevEndY
);
811 prevDragDirection
= dragDirection
;
812 } else if (isPanning
) {
813 dragEndX
= getX(event
);
814 dragEndY
= getY(event
);
816 // TODO(danvk): update this comment
817 // Want to have it so that:
818 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
819 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
820 // 3. draggingValue appears at dragEndY.
821 // 4. valueRange is unaltered.
823 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
824 var maxDate
= minDate
+ dateRange
;
825 self
.dateWindow_
= [minDate
, maxDate
];
828 // y-axis scaling is automatic unless this is a full 2D pan.
830 // Adjust each axis appropriately.
831 var y_frac
= dragEndY
/ self
.height_
;
832 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
833 var axis
= self
.axes_
[i
];
834 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
835 var minValue
= maxValue
- axis
.dragValueRange
;
836 axis
.valueWindow
= [ minValue
, maxValue
];
844 // Track the beginning of drag events
845 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
846 // prevents mouse drags from selecting page text.
847 if (event
.preventDefault
) {
848 event
.preventDefault(); // Firefox, Chrome, etc.
850 event
.returnValue
= false; // IE
851 event
.cancelBubble
= true;
854 px
= Dygraph
.findPosX(self
.canvas_
);
855 py
= Dygraph
.findPosY(self
.canvas_
);
856 dragStartX
= getX(event
);
857 dragStartY
= getY(event
);
859 if (event
.altKey
|| event
.shiftKey
) {
860 // have to be zoomed in to pan.
862 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
863 if (self
.axes_
[i
].valueWindow
|| self
.axes_
[i
].valueRange
) {
868 if (!self
.dateWindow_
&& !zoomedY
) return;
871 var xRange
= self
.xAxisRange();
872 dateRange
= xRange
[1] - xRange
[0];
874 // Record the range of each y-axis at the start of the drag.
875 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
877 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
878 var axis
= self
.axes_
[i
];
879 var yRange
= self
.yAxisRange(i
);
880 axis
.dragValueRange
= yRange
[1] - yRange
[0];
881 var r
= self
.toDataCoords(null, dragStartY
, i
);
882 axis
.draggingValue
= r
[1];
883 if (axis
.valueWindow
|| axis
.valueRange
) is2DPan
= true;
886 // TODO(konigsberg): Switch from all this math to toDataCoords?
887 // Seems to work for the dragging value.
888 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+ xRange
[0];
894 // If the user releases the mouse button during a drag, but not over the
895 // canvas, then it doesn't count as a zooming action.
896 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
897 if (isZooming
|| isPanning
) {
907 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
908 delete self
.axes_
[i
].draggingValue
;
909 delete self
.axes_
[i
].dragValueRange
;
914 // Temporarily cancel the dragging event when the mouse leaves the graph
915 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
922 // If the mouse is released on the canvas during a drag event, then it's a
923 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
924 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
927 dragEndX
= getX(event
);
928 dragEndY
= getY(event
);
929 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
930 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
932 if (regionWidth
< 2 && regionHeight
< 2 &&
933 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
934 // TODO(danvk): pass along more info about the points, e.g. 'x'
935 if (self
.attr_('clickCallback') != null) {
936 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
938 if (self
.attr_('pointClickCallback')) {
939 // check if the click was on a particular point.
941 var closestDistance
= 0;
942 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
943 var p
= self
.selPoints_
[i
];
944 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
945 Math
.pow(p
.canvasy
- dragEndY
, 2);
946 if (closestIdx
== -1 || distance
< closestDistance
) {
947 closestDistance
= distance
;
952 // Allow any click within two pixels of the dot.
953 var radius
= self
.attr_('highlightCircleSize') + 2;
954 if (closestDistance
<= 5 * 5) {
955 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
960 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
961 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
962 Math
.max(dragStartX
, dragEndX
));
963 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
964 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
965 Math
.max(dragStartY
, dragEndY
));
967 self
.canvas_
.getContext("2d").clearRect(0, 0,
969 self
.canvas_
.height
);
985 // Double-clicking zooms back out
986 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
987 // Disable zooming out if panning.
988 if (event
.altKey
|| event
.shiftKey
) return;
995 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
996 * up any previous zoom rectangles that were drawn. This could be optimized to
997 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1000 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1001 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1002 * @param {Number} startX The X position where the drag started, in canvas
1004 * @param {Number} endX The current X position of the drag, in canvas coords.
1005 * @param {Number} startY The Y position where the drag started, in canvas
1007 * @param {Number} endY The current Y position of the drag, in canvas coords.
1008 * @param {Number} prevDirection the value of direction on the previous call to
1009 * this function. Used to avoid excess redrawing
1010 * @param {Number} prevEndX The value of endX on the previous call to this
1011 * function. Used to avoid excess redrawing
1012 * @param {Number} prevEndY The value of endY on the previous call to this
1013 * function. Used to avoid excess redrawing
1016 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1017 prevDirection
, prevEndX
, prevEndY
) {
1018 var ctx
= this.canvas_
.getContext("2d");
1020 // Clean up from the previous rect if necessary
1021 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1022 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1023 Math
.abs(startX
- prevEndX
), this.height_
);
1024 } else if (prevDirection
== Dygraph
.VERTICAL
){
1025 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1026 this.width_
, Math
.abs(startY
- prevEndY
));
1029 // Draw a light-grey rectangle to show the new viewing area
1030 if (direction
== Dygraph
.HORIZONTAL
) {
1031 if (endX
&& startX
) {
1032 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1033 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1034 Math
.abs(endX
- startX
), this.height_
);
1037 if (direction
== Dygraph
.VERTICAL
) {
1038 if (endY
&& startY
) {
1039 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1040 ctx
.fillRect(0, Math
.min(startY
, endY
),
1041 this.width_
, Math
.abs(endY
- startY
));
1047 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1048 * the canvas. The exact zoom window may be slightly larger if there are no data
1049 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1050 * which accepts dates that match the raw data. This function redraws the graph.
1052 * @param {Number} lowX The leftmost pixel value that should be visible.
1053 * @param {Number} highX The rightmost pixel value that should be visible.
1056 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1057 // Find the earliest and latest dates contained in this canvasx range.
1058 // Convert the call to date ranges of the raw data.
1059 var r
= this.toDataCoords(lowX
, null);
1061 r
= this.toDataCoords(highX
, null);
1063 this.doZoomXDates_(minDate
, maxDate
);
1067 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1068 * method with doZoomX which accepts pixel coordinates. This function redraws
1071 * @param {Number} minDate The minimum date that should be visible.
1072 * @param {Number} maxDate The maximum date that should be visible.
1075 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1076 this.dateWindow_
= [minDate
, maxDate
];
1078 if (this.attr_("zoomCallback")) {
1079 var yRange
= this.yAxisRange();
1080 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1085 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1086 * the canvas. This function redraws the graph.
1088 * @param {Number} lowY The topmost pixel value that should be visible.
1089 * @param {Number} highY The lowest pixel value that should be visible.
1092 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1093 // Find the highest and lowest values in pixel range for each axis.
1094 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1095 // This is because pixels increase as you go down on the screen, whereas data
1096 // coordinates increase as you go up the screen.
1097 var valueRanges
= [];
1098 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1099 var hi
= this.toDataCoords(null, lowY
, i
);
1100 var low
= this.toDataCoords(null, highY
, i
);
1101 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1102 valueRanges
.push([low
[1], hi
[1]]);
1106 if (this.attr_("zoomCallback")) {
1107 var xRange
= this.xAxisRange();
1108 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1113 * Reset the zoom to the original view coordinates. This is the same as
1114 * double-clicking on the graph.
1118 Dygraph
.prototype.doUnzoom_
= function() {
1120 if (this.dateWindow_
!= null) {
1122 this.dateWindow_
= null;
1125 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1126 if (this.axes_
[i
].valueWindow
!= null) {
1128 delete this.axes_
[i
].valueWindow
;
1133 // Putting the drawing operation before the callback because it resets
1136 if (this.attr_("zoomCallback")) {
1137 var minDate
= this.rawData_
[0][0];
1138 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1139 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1145 * When the mouse moves in the canvas, display information about a nearby data
1146 * point and draw dots over those points in the data series. This function
1147 * takes care of cleanup of previously-drawn dots.
1148 * @param {Object} event The mousemove event from the browser.
1151 Dygraph
.prototype.mouseMove_
= function(event
) {
1152 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1153 var points
= this.layout_
.points
;
1158 // Loop through all the points and find the date nearest to our current
1160 var minDist
= 1e+100;
1162 for (var i
= 0; i
< points
.length
; i
++) {
1163 var point
= points
[i
];
1164 if (point
== null) continue;
1165 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1166 if (dist
> minDist
) continue;
1170 if (idx
>= 0) lastx
= points
[idx
].xval
;
1171 // Check that you can really highlight the last day's data
1172 var last
= points
[points
.length
-1];
1173 if (last
!= null && canvasx
> last
.canvasx
)
1174 lastx
= points
[points
.length
-1].xval
;
1176 // Extract the points we've selected
1177 this.selPoints_
= [];
1178 var l
= points
.length
;
1179 if (!this.attr_("stackedGraph")) {
1180 for (var i
= 0; i
< l
; i
++) {
1181 if (points
[i
].xval
== lastx
) {
1182 this.selPoints_
.push(points
[i
]);
1186 // Need to 'unstack' points starting from the bottom
1187 var cumulative_sum
= 0;
1188 for (var i
= l
- 1; i
>= 0; i
--) {
1189 if (points
[i
].xval
== lastx
) {
1190 var p
= {}; // Clone the point since we modify it
1191 for (var k
in points
[i
]) {
1192 p
[k
] = points
[i
][k
];
1194 p
.yval
-= cumulative_sum
;
1195 cumulative_sum
+= p
.yval
;
1196 this.selPoints_
.push(p
);
1199 this.selPoints_
.reverse();
1202 if (this.attr_("highlightCallback")) {
1203 var px
= this.lastx_
;
1204 if (px
!== null && lastx
!= px
) {
1205 // only fire if the selected point has changed.
1206 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1210 // Save last x position for callbacks.
1211 this.lastx_
= lastx
;
1213 this.updateSelection_();
1217 * Transforms layout_.points index into data row number.
1218 * @param int layout_.points index
1219 * @return int row number, or -1 if none could be found.
1222 Dygraph
.prototype.idxToRow_
= function(idx
) {
1223 if (idx
< 0) return -1;
1225 for (var i
in this.layout_
.datasets
) {
1226 if (idx
< this.layout_
.datasets
[i
].length
) {
1227 return this.boundaryIds_
[0][0]+idx
;
1229 idx
-= this.layout_
.datasets
[i
].length
;
1235 * Draw dots over the selectied points in the data series. This function
1236 * takes care of cleanup of previously-drawn dots.
1239 Dygraph
.prototype.updateSelection_
= function() {
1240 // Clear the previously drawn vertical, if there is one
1241 var ctx
= this.canvas_
.getContext("2d");
1242 if (this.previousVerticalX_
>= 0) {
1243 // Determine the maximum highlight circle size.
1244 var maxCircleSize
= 0;
1245 var labels
= this.attr_('labels');
1246 for (var i
= 1; i
< labels
.length
; i
++) {
1247 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1248 if (r
> maxCircleSize
) maxCircleSize
= r
;
1250 var px
= this.previousVerticalX_
;
1251 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1252 2 * maxCircleSize
+ 2, this.height_
);
1255 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1257 if (this.selPoints_
.length
> 0) {
1258 var canvasx
= this.selPoints_
[0].canvasx
;
1260 // Set the status message to indicate the selected point(s)
1261 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1262 var fmtFunc
= this.attr_('yValueFormatter');
1263 var clen
= this.colors_
.length
;
1265 if (this.attr_('showLabelsOnHighlight')) {
1266 // Set the status message to indicate the selected point(s)
1267 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1268 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1269 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1270 if (this.attr_("labelsSeparateLines")) {
1273 var point
= this.selPoints_
[i
];
1274 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1275 var yval
= fmtFunc(point
.yval
);
1276 replace
+= " <b><font color='" + c
.toHex() + "'>"
1277 + point
.name
+ "</font></b>:"
1281 this.attr_("labelsDiv").innerHTML
= replace
;
1284 // Draw colored circles over the center of each selected point
1286 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1287 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1289 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1291 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1292 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1293 0, 2 * Math
.PI
, false);
1298 this.previousVerticalX_
= canvasx
;
1303 * Set manually set selected dots, and display information about them
1304 * @param int row number that should by highlighted
1305 * false value clears the selection
1308 Dygraph
.prototype.setSelection
= function(row
) {
1309 // Extract the points we've selected
1310 this.selPoints_
= [];
1313 if (row
!== false) {
1314 row
= row
-this.boundaryIds_
[0][0];
1317 if (row
!== false && row
>= 0) {
1318 for (var i
in this.layout_
.datasets
) {
1319 if (row
< this.layout_
.datasets
[i
].length
) {
1320 var point
= this.layout_
.points
[pos
+row
];
1322 if (this.attr_("stackedGraph")) {
1323 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1326 this.selPoints_
.push(point
);
1328 pos
+= this.layout_
.datasets
[i
].length
;
1332 if (this.selPoints_
.length
) {
1333 this.lastx_
= this.selPoints_
[0].xval
;
1334 this.updateSelection_();
1337 this.clearSelection();
1343 * The mouse has left the canvas. Clear out whatever artifacts remain
1344 * @param {Object} event the mouseout event from the browser.
1347 Dygraph
.prototype.mouseOut_
= function(event
) {
1348 if (this.attr_("unhighlightCallback")) {
1349 this.attr_("unhighlightCallback")(event
);
1352 if (this.attr_("hideOverlayOnMouseOut")) {
1353 this.clearSelection();
1358 * Remove all selection from the canvas
1361 Dygraph
.prototype.clearSelection
= function() {
1362 // Get rid of the overlay data
1363 var ctx
= this.canvas_
.getContext("2d");
1364 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1365 this.attr_("labelsDiv").innerHTML
= "";
1366 this.selPoints_
= [];
1371 * Returns the number of the currently selected row
1372 * @return int row number, of -1 if nothing is selected
1375 Dygraph
.prototype.getSelection
= function() {
1376 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1380 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1381 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1382 return row
+ this.boundaryIds_
[0][0];
1388 Dygraph
.zeropad
= function(x
) {
1389 if (x
< 10) return "0" + x
; else return "" + x
;
1393 * Return a string version of the hours, minutes and seconds portion of a date.
1394 * @param {Number} date The JavaScript date (ms since epoch)
1395 * @return {String} A time of the form "HH:MM:SS"
1398 Dygraph
.hmsString_
= function(date
) {
1399 var zeropad
= Dygraph
.zeropad
;
1400 var d
= new Date(date
);
1401 if (d
.getSeconds()) {
1402 return zeropad(d
.getHours()) + ":" +
1403 zeropad(d
.getMinutes()) + ":" +
1404 zeropad(d
.getSeconds());
1406 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1411 * Convert a JS date to a string appropriate to display on an axis that
1412 * is displaying values at the stated granularity.
1413 * @param {Date} date The date to format
1414 * @param {Number} granularity One of the Dygraph granularity constants
1415 * @return {String} The formatted date
1418 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1419 if (granularity
>= Dygraph
.MONTHLY
) {
1420 return date
.strftime('%b %y');
1422 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1423 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1424 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1426 return Dygraph
.hmsString_(date
.getTime());
1432 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1433 * @param {Number} date The JavaScript date (ms since epoch)
1434 * @return {String} A date of the form "YYYY/MM/DD"
1437 Dygraph
.dateString_
= function(date
, self
) {
1438 var zeropad
= Dygraph
.zeropad
;
1439 var d
= new Date(date
);
1442 var year
= "" + d
.getFullYear();
1443 // Get a 0 padded month string
1444 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1445 // Get a 0 padded day string
1446 var day
= zeropad(d
.getDate());
1449 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1450 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1452 return year
+ "/" + month + "/" + day
+ ret
;
1456 * Round a number to the specified number of digits past the decimal point.
1457 * @param {Number} num The number to round
1458 * @param {Number} places The number of decimals to which to round
1459 * @return {Number} The rounded number
1462 Dygraph
.round_
= function(num
, places
) {
1463 var shift
= Math
.pow(10, places
);
1464 return Math
.round(num
* shift
)/shift
;
1468 * Fires when there's data available to be graphed.
1469 * @param {String} data Raw CSV data to be plotted
1472 Dygraph
.prototype.loadedEvent_
= function(data
) {
1473 this.rawData_
= this.parseCSV_(data
);
1477 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1478 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1479 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1482 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1485 Dygraph
.prototype.addXTicks_
= function() {
1486 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1487 var startDate
, endDate
;
1488 if (this.dateWindow_
) {
1489 startDate
= this.dateWindow_
[0];
1490 endDate
= this.dateWindow_
[1];
1492 startDate
= this.rawData_
[0][0];
1493 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1496 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1497 this.layout_
.updateOptions({xTicks
: xTicks
});
1500 // Time granularity enumeration
1501 Dygraph
.SECONDLY
= 0;
1502 Dygraph
.TWO_SECONDLY
= 1;
1503 Dygraph
.FIVE_SECONDLY
= 2;
1504 Dygraph
.TEN_SECONDLY
= 3;
1505 Dygraph
.THIRTY_SECONDLY
= 4;
1506 Dygraph
.MINUTELY
= 5;
1507 Dygraph
.TWO_MINUTELY
= 6;
1508 Dygraph
.FIVE_MINUTELY
= 7;
1509 Dygraph
.TEN_MINUTELY
= 8;
1510 Dygraph
.THIRTY_MINUTELY
= 9;
1511 Dygraph
.HOURLY
= 10;
1512 Dygraph
.TWO_HOURLY
= 11;
1513 Dygraph
.SIX_HOURLY
= 12;
1515 Dygraph
.WEEKLY
= 14;
1516 Dygraph
.MONTHLY
= 15;
1517 Dygraph
.QUARTERLY
= 16;
1518 Dygraph
.BIANNUAL
= 17;
1519 Dygraph
.ANNUAL
= 18;
1520 Dygraph
.DECADAL
= 19;
1521 Dygraph
.NUM_GRANULARITIES
= 20;
1523 Dygraph
.SHORT_SPACINGS
= [];
1524 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1525 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1526 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1527 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1528 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1529 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1530 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1531 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1532 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1533 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1534 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1535 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1536 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1537 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1538 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1542 // If we used this time granularity, how many ticks would there be?
1543 // This is only an approximation, but it's generally good enough.
1545 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1546 if (granularity
< Dygraph
.MONTHLY
) {
1547 // Generate one tick mark for every fixed interval of time.
1548 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1549 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1551 var year_mod
= 1; // e.g. to only print one point every 10 years.
1552 var num_months
= 12;
1553 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1554 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1555 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1556 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1558 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1559 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1560 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1566 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1567 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1569 // Returns an array containing {v: millis, label: label} dictionaries.
1571 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1572 var formatter
= this.attr_("xAxisLabelFormatter");
1574 if (granularity
< Dygraph
.MONTHLY
) {
1575 // Generate one tick mark for every fixed interval of time.
1576 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1577 var format
= '%d%b'; // e.g. "1Jan"
1579 // Find a time less than start_time which occurs on a "nice" time boundary
1580 // for this granularity.
1581 var g
= spacing
/ 1000;
1582 var d
= new Date(start_time
);
1583 if (g
<= 60) { // seconds
1584 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1588 if (g
<= 60) { // minutes
1589 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1594 if (g
<= 24) { // days
1595 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1600 if (g
== 7) { // one week
1601 d
.setDate(d
.getDate() - d
.getDay());
1606 start_time
= d
.getTime();
1608 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1609 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1612 // Display a tick mark on the first of a set of months of each year.
1613 // Years get a tick mark iff y % year_mod == 0. This is useful for
1614 // displaying a tick mark once every 10 years, say, on long time scales.
1616 var year_mod
= 1; // e.g. to only print one point every 10 years.
1618 if (granularity
== Dygraph
.MONTHLY
) {
1619 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1620 } else if (granularity
== Dygraph
.QUARTERLY
) {
1621 months
= [ 0, 3, 6, 9 ];
1622 } else if (granularity
== Dygraph
.BIANNUAL
) {
1624 } else if (granularity
== Dygraph
.ANNUAL
) {
1626 } else if (granularity
== Dygraph
.DECADAL
) {
1631 var start_year
= new Date(start_time
).getFullYear();
1632 var end_year
= new Date(end_time
).getFullYear();
1633 var zeropad
= Dygraph
.zeropad
;
1634 for (var i
= start_year
; i
<= end_year
; i
++) {
1635 if (i
% year_mod
!= 0) continue;
1636 for (var j
= 0; j
< months
.length
; j
++) {
1637 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1638 var t
= Date
.parse(date_str
);
1639 if (t
< start_time
|| t
> end_time
) continue;
1640 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1650 * Add ticks to the x-axis based on a date range.
1651 * @param {Number} startDate Start of the date window (millis since epoch)
1652 * @param {Number} endDate End of the date window (millis since epoch)
1653 * @return {Array.<Object>} Array of {label, value} tuples.
1656 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1658 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1659 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1660 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1667 return self
.GetXAxis(startDate
, endDate
, chosen
);
1669 // TODO(danvk): signal error.
1674 * Add ticks when the x axis has numbers on it (instead of dates)
1675 * @param {Number} startDate Start of the date window (millis since epoch)
1676 * @param {Number} endDate End of the date window (millis since epoch)
1678 * @param {function} attribute accessor function.
1679 * @return {Array.<Object>} Array of {label, value} tuples.
1682 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1683 var attr
= function(k
) {
1684 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1685 return self
.attr_(k
);
1690 for (var i
= 0; i
< vals
.length
; i
++) {
1691 ticks
.push({v
: vals
[i
]});
1695 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1696 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1697 // The first spacing greater than pixelsPerYLabel is what we use.
1698 // TODO(danvk): version that works on a log scale.
1699 if (attr("labelsKMG2")) {
1700 var mults
= [1, 2, 4, 8];
1702 var mults
= [1, 2, 5];
1704 var scale
, low_val
, high_val
, nTicks
;
1705 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1706 var pixelsPerTick
= attr('pixelsPerYLabel');
1707 for (var i
= -10; i
< 50; i
++) {
1708 if (attr("labelsKMG2")) {
1709 var base_scale
= Math
.pow(16, i
);
1711 var base_scale
= Math
.pow(10, i
);
1713 for (var j
= 0; j
< mults
.length
; j
++) {
1714 scale
= base_scale
* mults
[j
];
1715 low_val
= Math
.floor(minV
/ scale
) * scale
;
1716 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1717 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1718 var spacing
= self
.height_
/ nTicks
;
1719 // wish I could break out of both loops at once...
1720 if (spacing
> pixelsPerTick
) break;
1722 if (spacing
> pixelsPerTick
) break;
1725 // Construct the set of ticks.
1726 // Allow reverse y-axis if it's explicitly requested.
1727 if (low_val
> high_val
) scale
*= -1;
1728 for (var i
= 0; i
< nTicks
; i
++) {
1729 var tickV
= low_val
+ i
* scale
;
1730 ticks
.push( {v
: tickV
} );
1734 // Add formatted labels to the ticks.
1737 if (attr("labelsKMB")) {
1739 k_labels
= [ "K", "M", "B", "T" ];
1741 if (attr("labelsKMG2")) {
1742 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1744 k_labels
= [ "k", "M", "G", "T" ];
1746 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1748 for (var i
= 0; i
< ticks
.length
; i
++) {
1749 var tickV
= ticks
[i
].v
;
1750 var absTickV
= Math
.abs(tickV
);
1752 if (formatter
!= undefined
) {
1753 label
= formatter(tickV
);
1755 label
= Dygraph
.round_(tickV
, 2);
1757 if (k_labels
.length
) {
1758 // Round up to an appropriate unit.
1760 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1761 if (absTickV
>= n
) {
1762 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1767 ticks
[i
].label
= label
;
1772 // Computes the range of the data series (including confidence intervals).
1773 // series is either [ [x1, y1], [x2, y2], ... ] or
1774 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1775 // Returns [low, high]
1776 Dygraph
.prototype.extremeValues_
= function(series
) {
1777 var minY
= null, maxY
= null;
1779 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1781 // With custom bars, maxY is the max of the high values.
1782 for (var j
= 0; j
< series
.length
; j
++) {
1783 var y
= series
[j
][1][0];
1785 var low
= y
- series
[j
][1][1];
1786 var high
= y
+ series
[j
][1][2];
1787 if (low
> y
) low
= y
; // this can happen with custom bars,
1788 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1789 if (maxY
== null || high
> maxY
) {
1792 if (minY
== null || low
< minY
) {
1797 for (var j
= 0; j
< series
.length
; j
++) {
1798 var y
= series
[j
][1];
1799 if (y
=== null || isNaN(y
)) continue;
1800 if (maxY
== null || y
> maxY
) {
1803 if (minY
== null || y
< minY
) {
1809 return [minY
, maxY
];
1813 * This function is called once when the chart's data is changed or the options
1814 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1815 * idea is that values derived from the chart's data can be computed here,
1816 * rather than every time the chart is drawn. This includes things like the
1817 * number of axes, rolling averages, etc.
1819 Dygraph
.prototype.predraw_
= function() {
1820 // TODO(danvk): move more computations out of drawGraph_ and into here.
1821 this.computeYAxes_();
1823 // Create a new plotter.
1824 if (this.plotter_
) this.plotter_
.clear();
1825 this.plotter_
= new DygraphCanvasRenderer(this,
1826 this.hidden_
, this.layout_
,
1827 this.renderOptions_
);
1829 // The roller sits in the bottom left corner of the chart. We don't know where
1830 // this will be until the options are available, so it's positioned here.
1831 this.createRollInterface_();
1833 // Same thing applies for the labelsDiv. It's right edge should be flush with
1834 // the right edge of the charting area (which may not be the same as the right
1835 // edge of the div, if we have two y-axes.
1836 this.positionLabelsDiv_();
1838 // If the data or options have changed, then we'd better redraw.
1844 * Update the graph with new data. This method is called when the viewing area
1845 * has changed. If the underlying data or options have changed, predraw_ will
1846 * be called before drawGraph_ is called.
1849 Dygraph
.prototype.drawGraph_
= function() {
1850 var data
= this.rawData_
;
1852 // This is used to set the second parameter to drawCallback, below.
1853 var is_initial_draw
= this.is_initial_draw_
;
1854 this.is_initial_draw_
= false;
1856 var minY
= null, maxY
= null;
1857 this.layout_
.removeAllDatasets();
1859 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1861 // Loop over the fields (series). Go from the last to the first,
1862 // because if they're stacked that's how we accumulate the values.
1864 var cumulative_y
= []; // For stacked series.
1867 var extremes
= {}; // series name -> [low, high]
1869 // Loop over all fields and create datasets
1870 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1871 if (!this.visibility()[i
- 1]) continue;
1873 var seriesName
= this.attr_("labels")[i
];
1874 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1877 for (var j
= 0; j
< data
.length
; j
++) {
1878 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1879 var date
= data
[j
][0];
1880 series
.push([date
, data
[j
][i
]]);
1884 // TODO(danvk): move this into predraw_. It's insane to do it here.
1885 series
= this.rollingAverage(series
, this.rollPeriod_
);
1887 // Prune down to the desired range, if necessary (for zooming)
1888 // Because there can be lines going to points outside of the visible area,
1889 // we actually prune to visible points, plus one on either side.
1890 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1891 if (this.dateWindow_
) {
1892 var low
= this.dateWindow_
[0];
1893 var high
= this.dateWindow_
[1];
1895 // TODO(danvk): do binary search instead of linear search.
1896 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1897 var firstIdx
= null, lastIdx
= null;
1898 for (var k
= 0; k
< series
.length
; k
++) {
1899 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1902 if (series
[k
][0] <= high
) {
1906 if (firstIdx
=== null) firstIdx
= 0;
1907 if (firstIdx
> 0) firstIdx
--;
1908 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1909 if (lastIdx
< series
.length
- 1) lastIdx
++;
1910 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1911 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1912 pruned
.push(series
[k
]);
1916 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1919 var seriesExtremes
= this.extremeValues_(series
);
1922 for (var j
=0; j
<series
.length
; j
++) {
1923 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1926 } else if (this.attr_("stackedGraph")) {
1927 var l
= series
.length
;
1929 for (var j
= 0; j
< l
; j
++) {
1930 // If one data set has a NaN, let all subsequent stacked
1931 // sets inherit the NaN -- only start at 0 for the first set.
1932 var x
= series
[j
][0];
1933 if (cumulative_y
[x
] === undefined
) {
1934 cumulative_y
[x
] = 0;
1937 actual_y
= series
[j
][1];
1938 cumulative_y
[x
] += actual_y
;
1940 series
[j
] = [x
, cumulative_y
[x
]]
1942 if (cumulative_y
[x
] > seriesExtremes
[1]) {
1943 seriesExtremes
[1] = cumulative_y
[x
];
1945 if (cumulative_y
[x
] < seriesExtremes
[0]) {
1946 seriesExtremes
[0] = cumulative_y
[x
];
1950 extremes
[seriesName
] = seriesExtremes
;
1952 datasets
[i
] = series
;
1955 for (var i
= 1; i
< datasets
.length
; i
++) {
1956 if (!this.visibility()[i
- 1]) continue;
1957 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1960 // TODO(danvk): this method doesn't need to return anything.
1961 var out
= this.computeYAxisRanges_(extremes
);
1963 var seriesToAxisMap
= out
[1];
1964 this.layout_
.updateOptions( { yAxes
: axes
,
1965 seriesToAxisMap
: seriesToAxisMap
1970 // Tell PlotKit to use this new data and render itself
1971 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1972 this.layout_
.evaluateWithError();
1973 this.plotter_
.clear();
1974 this.plotter_
.render();
1975 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1976 this.canvas_
.height
);
1978 if (this.attr_("drawCallback") !== null) {
1979 this.attr_("drawCallback")(this, is_initial_draw
);
1984 * Determine properties of the y-axes which are independent of the data
1985 * currently being displayed. This includes things like the number of axes and
1986 * the style of the axes. It does not include the range of each axis and its
1988 * This fills in this.axes_ and this.seriesToAxisMap_.
1989 * axes_ = [ { options } ]
1990 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
1991 * indices are into the axes_ array.
1993 Dygraph
.prototype.computeYAxes_
= function() {
1994 this.axes_
= [{}]; // always have at least one y-axis.
1995 this.seriesToAxisMap_
= {};
1997 // Get a list of series names.
1998 var labels
= this.attr_("labels");
2000 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2002 // all options which could be applied per-axis:
2010 'axisLabelFontSize',
2014 // Copy global axis options over to the first axis.
2015 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2016 var k
= axisOptions
[i
];
2017 var v
= this.attr_(k
);
2018 if (v
) this.axes_
[0][k
] = v
;
2021 // Go through once and add all the axes.
2022 for (var seriesName
in series
) {
2023 if (!series
.hasOwnProperty(seriesName
)) continue;
2024 var axis
= this.attr_("axis", seriesName
);
2026 this.seriesToAxisMap_
[seriesName
] = 0;
2029 if (typeof(axis
) == 'object') {
2030 // Add a new axis, making a copy of its per-axis options.
2032 Dygraph
.update(opts
, this.axes_
[0]);
2033 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2034 Dygraph
.update(opts
, axis
);
2035 this.axes_
.push(opts
);
2036 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2040 // Go through one more time and assign series to an axis defined by another
2041 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2042 for (var seriesName
in series
) {
2043 if (!series
.hasOwnProperty(seriesName
)) continue;
2044 var axis
= this.attr_("axis", seriesName
);
2045 if (typeof(axis
) == 'string') {
2046 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2047 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2048 "series " + axis
+ ", which does not define its own axis.");
2051 var idx
= this.seriesToAxisMap_
[axis
];
2052 this.seriesToAxisMap_
[seriesName
] = idx
;
2056 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2057 // this last so that hiding the first series doesn't destroy the axis
2058 // properties of the primary axis.
2059 var seriesToAxisFiltered
= {};
2060 var vis
= this.visibility();
2061 for (var i
= 1; i
< labels
.length
; i
++) {
2063 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2065 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2069 * Returns the number of y-axes on the chart.
2070 * @return {Number} the number of axes.
2072 Dygraph
.prototype.numAxes
= function() {
2074 for (var series
in this.seriesToAxisMap_
) {
2075 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2076 var idx
= this.seriesToAxisMap_
[series
];
2077 if (idx
> last_axis
) last_axis
= idx
;
2079 return 1 + last_axis
;
2083 * Determine the value range and tick marks for each axis.
2084 * @param {Object} extremes A mapping from seriesName -> [low, high]
2085 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2087 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2088 // Build a map from axis number -> [list of series names]
2089 var seriesForAxis
= [];
2090 for (var series
in this.seriesToAxisMap_
) {
2091 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2092 var idx
= this.seriesToAxisMap_
[series
];
2093 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2094 seriesForAxis
[idx
].push(series
);
2097 // Compute extreme values, a span and tick marks for each axis.
2098 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2099 var axis
= this.axes_
[i
];
2100 if (axis
.valueWindow
) {
2101 // This is only set if the user has zoomed on the y-axis. It is never set
2102 // by a user. It takes precedence over axis.valueRange because, if you set
2103 // valueRange, you'd still expect to be able to pan.
2104 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2105 } else if (axis
.valueRange
) {
2106 // This is a user-set value range for this axis.
2107 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2109 // Calculate the extremes of extremes.
2110 var series
= seriesForAxis
[i
];
2111 var minY
= Infinity
; // extremes[series[0]][0];
2112 var maxY
= -Infinity
; // extremes[series[0]][1];
2113 for (var j
= 0; j
< series
.length
; j
++) {
2114 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2115 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2117 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2119 // Add some padding and round up to an integer to be human-friendly.
2120 var span
= maxY
- minY
;
2121 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2122 if (span
== 0) { span
= maxY
; }
2123 var maxAxisY
= maxY
+ 0.1 * span
;
2124 var minAxisY
= minY
- 0.1 * span
;
2126 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2127 if (!this.attr_("avoidMinZero")) {
2128 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2129 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2132 if (this.attr_("includeZero")) {
2133 if (maxY
< 0) maxAxisY
= 0;
2134 if (minY
> 0) minAxisY
= 0;
2137 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2140 // Add ticks. By default, all axes inherit the tick positions of the
2141 // primary axis. However, if an axis is specifically marked as having
2142 // independent ticks, then that is permissible as well.
2143 if (i
== 0 || axis
.independentTicks
) {
2145 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2146 axis
.computedValueRange
[1],
2150 var p_axis
= this.axes_
[0];
2151 var p_ticks
= p_axis
.ticks
;
2152 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2153 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2154 var tick_values
= [];
2155 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2156 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2157 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2158 tick_values
.push(y_val
);
2162 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2163 axis
.computedValueRange
[1],
2164 this, axis
, tick_values
);
2168 return [this.axes_
, this.seriesToAxisMap_
];
2172 * Calculates the rolling average of a data set.
2173 * If originalData is [label, val], rolls the average of those.
2174 * If originalData is [label, [, it's interpreted as [value, stddev]
2175 * and the roll is returned in the same form, with appropriately reduced
2176 * stddev for each value.
2177 * Note that this is where fractional input (i.e. '5/10') is converted into
2179 * @param {Array} originalData The data in the appropriate format (see above)
2180 * @param {Number} rollPeriod The number of days over which to average the data
2182 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2183 if (originalData
.length
< 2)
2184 return originalData
;
2185 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2186 var rollingData
= [];
2187 var sigma
= this.attr_("sigma");
2189 if (this.fractions_
) {
2191 var den
= 0; // numerator/denominator
2193 for (var i
= 0; i
< originalData
.length
; i
++) {
2194 num
+= originalData
[i
][1][0];
2195 den
+= originalData
[i
][1][1];
2196 if (i
- rollPeriod
>= 0) {
2197 num
-= originalData
[i
- rollPeriod
][1][0];
2198 den
-= originalData
[i
- rollPeriod
][1][1];
2201 var date
= originalData
[i
][0];
2202 var value
= den
? num
/ den
: 0.0;
2203 if (this.attr_("errorBars")) {
2204 if (this.wilsonInterval_
) {
2205 // For more details on this confidence interval, see:
2206 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2208 var p
= value
< 0 ? 0 : value
, n
= den
;
2209 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2210 var denom
= 1 + sigma
* sigma
/ den
;
2211 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2212 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2213 rollingData
[i
] = [date
,
2214 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2216 rollingData
[i
] = [date
, [0, 0, 0]];
2219 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2220 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2223 rollingData
[i
] = [date
, mult
* value
];
2226 } else if (this.attr_("customBars")) {
2231 for (var i
= 0; i
< originalData
.length
; i
++) {
2232 var data
= originalData
[i
][1];
2234 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2236 if (y
!= null && !isNaN(y
)) {
2242 if (i
- rollPeriod
>= 0) {
2243 var prev
= originalData
[i
- rollPeriod
];
2244 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2251 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2252 1.0 * (mid
- low
) / count
,
2253 1.0 * (high
- mid
) / count
]];
2256 // Calculate the rolling average for the first rollPeriod - 1 points where
2257 // there is not enough data to roll over the full number of days
2258 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2259 if (!this.attr_("errorBars")){
2260 if (rollPeriod
== 1) {
2261 return originalData
;
2264 for (var i
= 0; i
< originalData
.length
; i
++) {
2267 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2268 var y
= originalData
[j
][1];
2269 if (y
== null || isNaN(y
)) continue;
2271 sum
+= originalData
[j
][1];
2274 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2276 rollingData
[i
] = [originalData
[i
][0], null];
2281 for (var i
= 0; i
< originalData
.length
; i
++) {
2285 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2286 var y
= originalData
[j
][1][0];
2287 if (y
== null || isNaN(y
)) continue;
2289 sum
+= originalData
[j
][1][0];
2290 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2293 var stddev
= Math
.sqrt(variance
) / num_ok
;
2294 rollingData
[i
] = [originalData
[i
][0],
2295 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2297 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2307 * Parses a date, returning the number of milliseconds since epoch. This can be
2308 * passed in as an xValueParser in the Dygraph constructor.
2309 * TODO(danvk): enumerate formats that this understands.
2310 * @param {String} A date in YYYYMMDD format.
2311 * @return {Number} Milliseconds since epoch.
2314 Dygraph
.dateParser
= function(dateStr
, self
) {
2317 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2318 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2319 while (dateStrSlashed
.search("-") != -1) {
2320 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2322 d
= Date
.parse(dateStrSlashed
);
2323 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2324 // TODO(danvk): remove support for this format. It's confusing.
2325 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2326 + "/" + dateStr
.substr(6,2);
2327 d
= Date
.parse(dateStrSlashed
);
2329 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2330 // "2009/07/12 12:34:56"
2331 d
= Date
.parse(dateStr
);
2334 if (!d
|| isNaN(d
)) {
2335 self
.error("Couldn't parse " + dateStr
+ " as a date");
2341 * Detects the type of the str (date or numeric) and sets the various
2342 * formatting attributes in this.attrs_ based on this type.
2343 * @param {String} str An x value.
2346 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2348 if (str
.indexOf('-') >= 0 ||
2349 str
.indexOf('/') >= 0 ||
2350 isNaN(parseFloat(str
))) {
2352 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2353 // TODO(danvk): remove support for this format.
2358 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2359 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2360 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2361 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2363 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2364 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2365 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2366 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2371 * Parses a string in a special csv format. We expect a csv file where each
2372 * line is a date point, and the first field in each line is the date string.
2373 * We also expect that all remaining fields represent series.
2374 * if the errorBars attribute is set, then interpret the fields as:
2375 * date, series1, stddev1, series2, stddev2, ...
2376 * @param {Array.<Object>} data See above.
2379 * @return Array.<Object> An array with one entry for each row. These entries
2380 * are an array of cells in that row. The first entry is the parsed x-value for
2381 * the row. The second, third, etc. are the y-values. These can take on one of
2382 * three forms, depending on the CSV and constructor parameters:
2384 * 2. [ value, stddev ]
2385 * 3. [ low value, center value, high value ]
2387 Dygraph
.prototype.parseCSV_
= function(data
) {
2389 var lines
= data
.split("\n");
2391 // Use the default delimiter or fall back to a tab if that makes sense.
2392 var delim
= this.attr_('delimiter');
2393 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2398 if (this.labelsFromCSV_
) {
2400 this.attrs_
.labels
= lines
[0].split(delim
);
2403 // Parse the x as a float or return null if it's not a number.
2404 var parseFloatOrNull
= function(x
) {
2405 var val
= parseFloat(x
);
2406 return isNaN(val
) ? null : val
;
2410 var defaultParserSet
= false; // attempt to auto-detect x value type
2411 var expectedCols
= this.attr_("labels").length
;
2412 var outOfOrder
= false;
2413 for (var i
= start
; i
< lines
.length
; i
++) {
2414 var line
= lines
[i
];
2415 if (line
.length
== 0) continue; // skip blank lines
2416 if (line
[0] == '#') continue; // skip comment lines
2417 var inFields
= line
.split(delim
);
2418 if (inFields
.length
< 2) continue;
2421 if (!defaultParserSet
) {
2422 this.detectTypeFromString_(inFields
[0]);
2423 xParser
= this.attr_("xValueParser");
2424 defaultParserSet
= true;
2426 fields
[0] = xParser(inFields
[0], this);
2428 // If fractions are expected, parse the numbers as "A/B
"
2429 if (this.fractions_) {
2430 for (var j = 1; j < inFields.length; j++) {
2431 // TODO(danvk): figure out an appropriate way to flag parse errors.
2432 var vals = inFields[j].split("/");
2433 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2435 } else if (this.attr_("errorBars
")) {
2436 // If there are error bars, values are (value, stddev) pairs
2437 for (var j = 1; j < inFields.length; j += 2)
2438 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2439 parseFloatOrNull(inFields[j + 1])];
2440 } else if (this.attr_("customBars
")) {
2441 // Bars are a low;center;high tuple
2442 for (var j = 1; j < inFields.length; j++) {
2443 var vals = inFields[j].split(";");
2444 fields[j] = [ parseFloatOrNull(vals[0]),
2445 parseFloatOrNull(vals[1]),
2446 parseFloatOrNull(vals[2]) ];
2449 // Values are just numbers
2450 for (var j = 1; j < inFields.length; j++) {
2451 fields[j] = parseFloatOrNull(inFields[j]);
2454 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2459 if (fields.length != expectedCols) {
2460 this.error("Number of columns
in line
" + i + " (" + fields.length +
2461 ") does not agree
with number of
labels (" + expectedCols +
2467 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2468 ret.sort(function(a,b) { return a[0] - b[0] });
2475 * The user has provided their data as a pre-packaged JS array. If the x values
2476 * are numeric, this is the same as dygraphs' internal format. If the x values
2477 * are dates, we need to convert them from Date objects to ms since epoch.
2478 * @param {Array.<Object>} data
2479 * @return {Array.<Object>} data with numeric x values.
2481 Dygraph.prototype.parseArray_ = function(data) {
2482 // Peek at the first x value to see if it's numeric.
2483 if (data.length == 0) {
2484 this.error("Can
't plot empty data set");
2487 if (data[0].length == 0) {
2488 this.error("Data set cannot contain an empty row");
2492 if (this.attr_("labels") == null) {
2493 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2494 "in the options parameter");
2495 this.attrs_.labels = [ "X" ];
2496 for (var i = 1; i < data[0].length; i++) {
2497 this.attrs_.labels.push("Y" + i);
2501 if (Dygraph.isDateLike(data[0][0])) {
2502 // Some intelligent defaults for a date x-axis.
2503 this.attrs_.xValueFormatter = Dygraph.dateString_;
2504 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2505 this.attrs_.xTicker = Dygraph.dateTicker;
2507 // Assume they're all dates
.
2508 var parsedData
= Dygraph
.clone(data
);
2509 for (var i
= 0; i
< data
.length
; i
++) {
2510 if (parsedData
[i
].length
== 0) {
2511 this.error("Row " + (1 + i
) + " of data is empty");
2514 if (parsedData
[i
][0] == null
2515 || typeof(parsedData
[i
][0].getTime
) != 'function'
2516 || isNaN(parsedData
[i
][0].getTime())) {
2517 this.error("x value in row " + (1 + i
) + " is not a Date");
2520 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2524 // Some intelligent defaults for a numeric x-axis.
2525 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2526 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2532 * Parses a DataTable object from gviz.
2533 * The data is expected to have a first column that is either a date or a
2534 * number. All subsequent columns must be numbers. If there is a clear mismatch
2535 * between this.xValueParser_ and the type of the first column, it will be
2536 * fixed. Fills out rawData_.
2537 * @param {Array.<Object>} data See above.
2540 Dygraph
.prototype.parseDataTable_
= function(data
) {
2541 var cols
= data
.getNumberOfColumns();
2542 var rows
= data
.getNumberOfRows();
2544 var indepType
= data
.getColumnType(0);
2545 if (indepType
== 'date' || indepType
== 'datetime') {
2546 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2547 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2548 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2549 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2550 } else if (indepType
== 'number') {
2551 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2552 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2553 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2554 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2556 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2557 "column 1 of DataTable input (Got '" + indepType
+ "')");
2561 // Array of the column indices which contain data (and not annotations).
2563 var annotationCols
= {}; // data index -> [annotation cols]
2564 var hasAnnotations
= false;
2565 for (var i
= 1; i
< cols
; i
++) {
2566 var type
= data
.getColumnType(i
);
2567 if (type
== 'number') {
2569 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2570 // This is OK -- it's an annotation column.
2571 var dataIdx
= colIdx
[colIdx
.length
- 1];
2572 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2573 annotationCols
[dataIdx
] = [i
];
2575 annotationCols
[dataIdx
].push(i
);
2577 hasAnnotations
= true;
2579 this.error("Only 'number' is supported as a dependent type with Gviz." +
2580 " 'string' is only supported if displayAnnotations is true");
2584 // Read column labels
2585 // TODO(danvk): add support back for errorBars
2586 var labels
= [data
.getColumnLabel(0)];
2587 for (var i
= 0; i
< colIdx
.length
; i
++) {
2588 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2589 if (this.attr_("errorBars")) i
+= 1;
2591 this.attrs_
.labels
= labels
;
2592 cols
= labels
.length
;
2595 var outOfOrder
= false;
2596 var annotations
= [];
2597 for (var i
= 0; i
< rows
; i
++) {
2599 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2600 data
.getValue(i
, 0) === null) {
2601 this.warn("Ignoring row " + i
+
2602 " of DataTable because of undefined or null first column.");
2606 if (indepType
== 'date' || indepType
== 'datetime') {
2607 row
.push(data
.getValue(i
, 0).getTime());
2609 row
.push(data
.getValue(i
, 0));
2611 if (!this.attr_("errorBars")) {
2612 for (var j
= 0; j
< colIdx
.length
; j
++) {
2613 var col
= colIdx
[j
];
2614 row
.push(data
.getValue(i
, col
));
2615 if (hasAnnotations
&&
2616 annotationCols
.hasOwnProperty(col
) &&
2617 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2619 ann
.series
= data
.getColumnLabel(col
);
2621 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2623 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2624 if (k
) ann
.text
+= "\n";
2625 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2627 annotations
.push(ann
);
2631 for (var j
= 0; j
< cols
- 1; j
++) {
2632 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2635 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2642 this.warn("DataTable is out of order; order it correctly to speed loading.");
2643 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2645 this.rawData_
= ret
;
2647 if (annotations
.length
> 0) {
2648 this.setAnnotations(annotations
, true);
2652 // These functions are all based on MochiKit.
2653 Dygraph
.update
= function (self
, o
) {
2654 if (typeof(o
) != 'undefined' && o
!== null) {
2656 if (o
.hasOwnProperty(k
)) {
2664 Dygraph
.isArrayLike
= function (o
) {
2665 var typ
= typeof(o
);
2667 (typ
!= 'object' && !(typ
== 'function' &&
2668 typeof(o
.item
) == 'function')) ||
2670 typeof(o
.length
) != 'number' ||
2678 Dygraph
.isDateLike
= function (o
) {
2679 if (typeof(o
) != "object" || o
=== null ||
2680 typeof(o
.getTime
) != 'function') {
2686 Dygraph
.clone
= function(o
) {
2687 // TODO(danvk): figure out how MochiKit's version works
2689 for (var i
= 0; i
< o
.length
; i
++) {
2690 if (Dygraph
.isArrayLike(o
[i
])) {
2691 r
.push(Dygraph
.clone(o
[i
]));
2701 * Get the CSV data. If it's in a function, call that function. If it's in a
2702 * file, do an XMLHttpRequest to get it.
2705 Dygraph
.prototype.start_
= function() {
2706 if (typeof this.file_
== 'function') {
2707 // CSV string. Pretend we got it via XHR.
2708 this.loadedEvent_(this.file_());
2709 } else if (Dygraph
.isArrayLike(this.file_
)) {
2710 this.rawData_
= this.parseArray_(this.file_
);
2712 } else if (typeof this.file_
== 'object' &&
2713 typeof this.file_
.getColumnRange
== 'function') {
2714 // must be a DataTable from gviz.
2715 this.parseDataTable_(this.file_
);
2717 } else if (typeof this.file_
== 'string') {
2718 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2719 if (this.file_
.indexOf('\n') >= 0) {
2720 this.loadedEvent_(this.file_
);
2722 var req
= new XMLHttpRequest();
2724 req
.onreadystatechange
= function () {
2725 if (req
.readyState
== 4) {
2726 if (req
.status
== 200) {
2727 caller
.loadedEvent_(req
.responseText
);
2732 req
.open("GET", this.file_
, true);
2736 this.error("Unknown data format: " + (typeof this.file_
));
2741 * Changes various properties of the graph. These can include:
2743 * <li>file: changes the source data for the graph</li>
2744 * <li>errorBars: changes whether the data contains stddev</li>
2746 * @param {Object} attrs The new properties and values
2748 Dygraph
.prototype.updateOptions
= function(attrs
) {
2749 // TODO(danvk): this is a mess. Rethink this function.
2750 if ('rollPeriod' in attrs
) {
2751 this.rollPeriod_
= attrs
.rollPeriod
;
2753 if ('dateWindow' in attrs
) {
2754 this.dateWindow_
= attrs
.dateWindow
;
2757 // TODO(danvk): validate per-series options.
2762 // highlightCircleSize
2764 Dygraph
.update(this.user_attrs_
, attrs
);
2765 Dygraph
.update(this.renderOptions_
, attrs
);
2767 this.labelsFromCSV_
= (this.attr_("labels") == null);
2769 // TODO(danvk): this doesn't match the constructor logic
2770 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2771 if (attrs
['file']) {
2772 this.file_
= attrs
['file'];
2780 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2781 * containing div (which has presumably changed size since the dygraph was
2782 * instantiated. If the width/height are specified, the div will be resized.
2784 * This is far more efficient than destroying and re-instantiating a
2785 * Dygraph, since it doesn't have to reparse the underlying data.
2787 * @param {Number} width Width (in pixels)
2788 * @param {Number} height Height (in pixels)
2790 Dygraph
.prototype.resize
= function(width
, height
) {
2791 if (this.resize_lock
) {
2794 this.resize_lock
= true;
2796 if ((width
=== null) != (height
=== null)) {
2797 this.warn("Dygraph.resize() should be called with zero parameters or " +
2798 "two non-NULL parameters. Pretending it was zero.");
2799 width
= height
= null;
2802 // TODO(danvk): there should be a clear() method.
2803 this.maindiv_
.innerHTML
= "";
2804 this.attrs_
.labelsDiv
= null;
2807 this.maindiv_
.style
.width
= width
+ "px";
2808 this.maindiv_
.style
.height
= height
+ "px";
2809 this.width_
= width
;
2810 this.height_
= height
;
2812 this.width_
= this.maindiv_
.offsetWidth
;
2813 this.height_
= this.maindiv_
.offsetHeight
;
2816 this.createInterface_();
2819 this.resize_lock
= false;
2823 * Adjusts the number of days in the rolling average. Updates the graph to
2824 * reflect the new averaging period.
2825 * @param {Number} length Number of days over which to average the data.
2827 Dygraph
.prototype.adjustRoll
= function(length
) {
2828 this.rollPeriod_
= length
;
2833 * Returns a boolean array of visibility statuses.
2835 Dygraph
.prototype.visibility
= function() {
2836 // Do lazy-initialization, so that this happens after we know the number of
2838 if (!this.attr_("visibility")) {
2839 this.attrs_
["visibility"] = [];
2841 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2842 this.attr_("visibility").push(true);
2844 return this.attr_("visibility");
2848 * Changes the visiblity of a series.
2850 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2851 var x
= this.visibility();
2852 if (num
< 0 || num
>= x
.length
) {
2853 this.warn("invalid series number in setVisibility: " + num
);
2861 * Update the list of annotations and redraw the chart.
2863 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2864 // Only add the annotation CSS rule once we know it will be used.
2865 Dygraph
.addAnnotationRule();
2866 this.annotations_
= ann
;
2867 this.layout_
.setAnnotations(this.annotations_
);
2868 if (!suppressDraw
) {
2874 * Return the list of annotations.
2876 Dygraph
.prototype.annotations
= function() {
2877 return this.annotations_
;
2881 * Get the index of a series (column) given its name. The first column is the
2882 * x-axis, so the data series start with index 1.
2884 Dygraph
.prototype.indexFromSetName
= function(name
) {
2885 var labels
= this.attr_("labels");
2886 for (var i
= 0; i
< labels
.length
; i
++) {
2887 if (labels
[i
] == name
) return i
;
2892 Dygraph
.addAnnotationRule
= function() {
2893 if (Dygraph
.addedAnnotationCSS
) return;
2895 var rule
= "border: 1px solid black; " +
2896 "background-color: white; " +
2897 "text-align: center;";
2899 var styleSheetElement
= document
.createElement("style");
2900 styleSheetElement
.type
= "text/css";
2901 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2903 // Find the first style sheet that we can access.
2904 // We may not add a rule to a style sheet from another domain for security
2905 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
2906 // adds its own style sheets from google.com.
2907 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
2908 if (document
.styleSheets
[i
].disabled
) continue;
2909 var mysheet
= document
.styleSheets
[i
];
2911 if (mysheet
.insertRule
) { // Firefox
2912 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2913 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2914 } else if (mysheet
.addRule
) { // IE
2915 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2917 Dygraph
.addedAnnotationCSS
= true;
2920 // Was likely a security exception.
2924 this.warn("Unable to add default annotation CSS rule; display may be off.");
2928 * Create a new canvas element. This is more complex than a simple
2929 * document.createElement("canvas") because of IE and excanvas.
2931 Dygraph
.createCanvas
= function() {
2932 var canvas
= document
.createElement("canvas");
2934 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2935 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2936 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2944 * A wrapper around Dygraph that implements the gviz API.
2945 * @param {Object} container The DOM object the visualization should live in.
2947 Dygraph
.GVizChart
= function(container
) {
2948 this.container
= container
;
2951 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2952 // Clear out any existing dygraph.
2953 // TODO(danvk): would it make more sense to simply redraw using the current
2954 // date_graph object?
2955 this.container
.innerHTML
= '';
2956 if (typeof(this.date_graph
) != 'undefined') {
2957 this.date_graph
.destroy();
2960 this.date_graph
= new Dygraph(this.container
, data
, options
);
2964 * Google charts compatible setSelection
2965 * Only row selection is supported, all points in the row will be highlighted
2966 * @param {Array} array of the selected cells
2969 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2971 if (selection_array
.length
) {
2972 row
= selection_array
[0].row
;
2974 this.date_graph
.setSelection(row
);
2978 * Google charts compatible getSelection implementation
2979 * @return {Array} array of the selected cells
2982 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2985 var row
= this.date_graph
.getSelection();
2987 if (row
< 0) return selection
;
2990 for (var i
in this.date_graph
.layout_
.datasets
) {
2991 selection
.push({row
: row
, column
: col
});
2998 // Older pages may still use this name.
2999 DateGraph
= Dygraph
;