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 event
.preventDefault(); // prevents mouse drags from selecting page text.
847 px
= Dygraph
.findPosX(self
.canvas_
);
848 py
= Dygraph
.findPosY(self
.canvas_
);
849 dragStartX
= getX(event
);
850 dragStartY
= getY(event
);
852 if (event
.altKey
|| event
.shiftKey
) {
853 // have to be zoomed in to pan.
855 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
856 if (self
.axes_
[i
].valueWindow
|| self
.axes_
[i
].valueRange
) {
861 if (!self
.dateWindow_
&& !zoomedY
) return;
864 var xRange
= self
.xAxisRange();
865 dateRange
= xRange
[1] - xRange
[0];
867 // Record the range of each y-axis at the start of the drag.
868 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
870 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
871 var axis
= self
.axes_
[i
];
872 var yRange
= self
.yAxisRange(i
);
873 axis
.dragValueRange
= yRange
[1] - yRange
[0];
874 var r
= self
.toDataCoords(null, dragStartY
, i
);
875 axis
.draggingValue
= r
[1];
876 if (axis
.valueWindow
|| axis
.valueRange
) is2DPan
= true;
879 // TODO(konigsberg): Switch from all this math to toDataCoords?
880 // Seems to work for the dragging value.
881 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+ xRange
[0];
887 // If the user releases the mouse button during a drag, but not over the
888 // canvas, then it doesn't count as a zooming action.
889 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
890 if (isZooming
|| isPanning
) {
900 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
901 delete self
.axes_
[i
].draggingValue
;
902 delete self
.axes_
[i
].dragValueRange
;
907 // Temporarily cancel the dragging event when the mouse leaves the graph
908 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
915 // If the mouse is released on the canvas during a drag event, then it's a
916 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
917 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
920 dragEndX
= getX(event
);
921 dragEndY
= getY(event
);
922 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
923 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
925 if (regionWidth
< 2 && regionHeight
< 2 &&
926 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
927 // TODO(danvk): pass along more info about the points, e.g. 'x'
928 if (self
.attr_('clickCallback') != null) {
929 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
931 if (self
.attr_('pointClickCallback')) {
932 // check if the click was on a particular point.
934 var closestDistance
= 0;
935 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
936 var p
= self
.selPoints_
[i
];
937 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
938 Math
.pow(p
.canvasy
- dragEndY
, 2);
939 if (closestIdx
== -1 || distance
< closestDistance
) {
940 closestDistance
= distance
;
945 // Allow any click within two pixels of the dot.
946 var radius
= self
.attr_('highlightCircleSize') + 2;
947 if (closestDistance
<= 5 * 5) {
948 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
953 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
954 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
955 Math
.max(dragStartX
, dragEndX
));
956 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
957 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
958 Math
.max(dragStartY
, dragEndY
));
960 self
.canvas_
.getContext("2d").clearRect(0, 0,
962 self
.canvas_
.height
);
978 // Double-clicking zooms back out
979 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
980 // Disable zooming out if panning.
981 if (event
.altKey
|| event
.shiftKey
) return;
988 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
989 * up any previous zoom rectangles that were drawn. This could be optimized to
990 * avoid extra redrawing, but it's tricky to avoid interactions with the status
993 * @param {Number} direction the direction of the zoom rectangle. Acceptable
994 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
995 * @param {Number} startX The X position where the drag started, in canvas
997 * @param {Number} endX The current X position of the drag, in canvas coords.
998 * @param {Number} startY The Y position where the drag started, in canvas
1000 * @param {Number} endY The current Y position of the drag, in canvas coords.
1001 * @param {Number} prevDirection the value of direction on the previous call to
1002 * this function. Used to avoid excess redrawing
1003 * @param {Number} prevEndX The value of endX on the previous call to this
1004 * function. Used to avoid excess redrawing
1005 * @param {Number} prevEndY The value of endY on the previous call to this
1006 * function. Used to avoid excess redrawing
1009 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1010 prevDirection
, prevEndX
, prevEndY
) {
1011 var ctx
= this.canvas_
.getContext("2d");
1013 // Clean up from the previous rect if necessary
1014 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1015 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1016 Math
.abs(startX
- prevEndX
), this.height_
);
1017 } else if (prevDirection
== Dygraph
.VERTICAL
){
1018 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1019 this.width_
, Math
.abs(startY
- prevEndY
));
1022 // Draw a light-grey rectangle to show the new viewing area
1023 if (direction
== Dygraph
.HORIZONTAL
) {
1024 if (endX
&& startX
) {
1025 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1026 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1027 Math
.abs(endX
- startX
), this.height_
);
1030 if (direction
== Dygraph
.VERTICAL
) {
1031 if (endY
&& startY
) {
1032 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1033 ctx
.fillRect(0, Math
.min(startY
, endY
),
1034 this.width_
, Math
.abs(endY
- startY
));
1040 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1041 * the canvas. The exact zoom window may be slightly larger if there are no data
1042 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1043 * which accepts dates that match the raw data. This function redraws the graph.
1045 * @param {Number} lowX The leftmost pixel value that should be visible.
1046 * @param {Number} highX The rightmost pixel value that should be visible.
1049 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1050 // Find the earliest and latest dates contained in this canvasx range.
1051 // Convert the call to date ranges of the raw data.
1052 var r
= this.toDataCoords(lowX
, null);
1054 r
= this.toDataCoords(highX
, null);
1056 this.doZoomXDates_(minDate
, maxDate
);
1060 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1061 * method with doZoomX which accepts pixel coordinates. This function redraws
1064 * @param {Number} minDate The minimum date that should be visible.
1065 * @param {Number} maxDate The maximum date that should be visible.
1068 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1069 this.dateWindow_
= [minDate
, maxDate
];
1071 if (this.attr_("zoomCallback")) {
1072 var yRange
= this.yAxisRange();
1073 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1078 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1079 * the canvas. This function redraws the graph.
1081 * @param {Number} lowY The topmost pixel value that should be visible.
1082 * @param {Number} highY The lowest pixel value that should be visible.
1085 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1086 // Find the highest and lowest values in pixel range for each axis.
1087 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1088 // This is because pixels increase as you go down on the screen, whereas data
1089 // coordinates increase as you go up the screen.
1090 var valueRanges
= [];
1091 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1092 var hi
= this.toDataCoords(null, lowY
, i
);
1093 var low
= this.toDataCoords(null, highY
, i
);
1094 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1095 valueRanges
.push([low
[1], hi
[1]]);
1099 if (this.attr_("zoomCallback")) {
1100 var xRange
= this.xAxisRange();
1101 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1106 * Reset the zoom to the original view coordinates. This is the same as
1107 * double-clicking on the graph.
1111 Dygraph
.prototype.doUnzoom_
= function() {
1113 if (this.dateWindow_
!= null) {
1115 this.dateWindow_
= null;
1118 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1119 if (this.axes_
[i
].valueWindow
!= null) {
1121 delete this.axes_
[i
].valueWindow
;
1126 // Putting the drawing operation before the callback because it resets
1129 if (this.attr_("zoomCallback")) {
1130 var minDate
= this.rawData_
[0][0];
1131 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1132 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1138 * When the mouse moves in the canvas, display information about a nearby data
1139 * point and draw dots over those points in the data series. This function
1140 * takes care of cleanup of previously-drawn dots.
1141 * @param {Object} event The mousemove event from the browser.
1144 Dygraph
.prototype.mouseMove_
= function(event
) {
1145 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1146 var points
= this.layout_
.points
;
1151 // Loop through all the points and find the date nearest to our current
1153 var minDist
= 1e+100;
1155 for (var i
= 0; i
< points
.length
; i
++) {
1156 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1157 if (dist
> minDist
) continue;
1161 if (idx
>= 0) lastx
= points
[idx
].xval
;
1162 // Check that you can really highlight the last day's data
1163 if (canvasx
> points
[points
.length
-1].canvasx
)
1164 lastx
= points
[points
.length
-1].xval
;
1166 // Extract the points we've selected
1167 this.selPoints_
= [];
1168 var l
= points
.length
;
1169 if (!this.attr_("stackedGraph")) {
1170 for (var i
= 0; i
< l
; i
++) {
1171 if (points
[i
].xval
== lastx
) {
1172 this.selPoints_
.push(points
[i
]);
1176 // Need to 'unstack' points starting from the bottom
1177 var cumulative_sum
= 0;
1178 for (var i
= l
- 1; i
>= 0; i
--) {
1179 if (points
[i
].xval
== lastx
) {
1180 var p
= {}; // Clone the point since we modify it
1181 for (var k
in points
[i
]) {
1182 p
[k
] = points
[i
][k
];
1184 p
.yval
-= cumulative_sum
;
1185 cumulative_sum
+= p
.yval
;
1186 this.selPoints_
.push(p
);
1189 this.selPoints_
.reverse();
1192 if (this.attr_("highlightCallback")) {
1193 var px
= this.lastx_
;
1194 if (px
!== null && lastx
!= px
) {
1195 // only fire if the selected point has changed.
1196 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1200 // Save last x position for callbacks.
1201 this.lastx_
= lastx
;
1203 this.updateSelection_();
1207 * Draw dots over the selectied points in the data series. This function
1208 * takes care of cleanup of previously-drawn dots.
1211 Dygraph
.prototype.updateSelection_
= function() {
1212 // Clear the previously drawn vertical, if there is one
1213 var ctx
= this.canvas_
.getContext("2d");
1214 if (this.previousVerticalX_
>= 0) {
1215 // Determine the maximum highlight circle size.
1216 var maxCircleSize
= 0;
1217 var labels
= this.attr_('labels');
1218 for (var i
= 1; i
< labels
.length
; i
++) {
1219 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1220 if (r
> maxCircleSize
) maxCircleSize
= r
;
1222 var px
= this.previousVerticalX_
;
1223 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1224 2 * maxCircleSize
+ 2, this.height_
);
1227 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1229 if (this.selPoints_
.length
> 0) {
1230 var canvasx
= this.selPoints_
[0].canvasx
;
1232 // Set the status message to indicate the selected point(s)
1233 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1234 var fmtFunc
= this.attr_('yValueFormatter');
1235 var clen
= this.colors_
.length
;
1237 if (this.attr_('showLabelsOnHighlight')) {
1238 // Set the status message to indicate the selected point(s)
1239 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1240 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1241 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1242 if (this.attr_("labelsSeparateLines")) {
1245 var point
= this.selPoints_
[i
];
1246 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1247 var yval
= fmtFunc(point
.yval
);
1248 replace
+= " <b><font color='" + c
.toHex() + "'>"
1249 + point
.name
+ "</font></b>:"
1253 this.attr_("labelsDiv").innerHTML
= replace
;
1256 // Draw colored circles over the center of each selected point
1258 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1259 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1261 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1263 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1264 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1265 0, 2 * Math
.PI
, false);
1270 this.previousVerticalX_
= canvasx
;
1275 * Set manually set selected dots, and display information about them
1276 * @param int row number that should by highlighted
1277 * false value clears the selection
1280 Dygraph
.prototype.setSelection
= function(row
) {
1281 // Extract the points we've selected
1282 this.selPoints_
= [];
1285 if (row
!== false) {
1286 row
= row
-this.boundaryIds_
[0][0];
1289 if (row
!== false && row
>= 0) {
1290 for (var i
in this.layout_
.datasets
) {
1291 if (row
< this.layout_
.datasets
[i
].length
) {
1292 var point
= this.layout_
.points
[pos
+row
];
1294 if (this.attr_("stackedGraph")) {
1295 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1298 this.selPoints_
.push(point
);
1300 pos
+= this.layout_
.datasets
[i
].length
;
1304 if (this.selPoints_
.length
) {
1305 this.lastx_
= this.selPoints_
[0].xval
;
1306 this.updateSelection_();
1309 this.clearSelection();
1315 * The mouse has left the canvas. Clear out whatever artifacts remain
1316 * @param {Object} event the mouseout event from the browser.
1319 Dygraph
.prototype.mouseOut_
= function(event
) {
1320 if (this.attr_("unhighlightCallback")) {
1321 this.attr_("unhighlightCallback")(event
);
1324 if (this.attr_("hideOverlayOnMouseOut")) {
1325 this.clearSelection();
1330 * Remove all selection from the canvas
1333 Dygraph
.prototype.clearSelection
= function() {
1334 // Get rid of the overlay data
1335 var ctx
= this.canvas_
.getContext("2d");
1336 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1337 this.attr_("labelsDiv").innerHTML
= "";
1338 this.selPoints_
= [];
1343 * Returns the number of the currently selected row
1344 * @return int row number, of -1 if nothing is selected
1347 Dygraph
.prototype.getSelection
= function() {
1348 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1352 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1353 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1354 return row
+ this.boundaryIds_
[0][0];
1360 Dygraph
.zeropad
= function(x
) {
1361 if (x
< 10) return "0" + x
; else return "" + x
;
1365 * Return a string version of the hours, minutes and seconds portion of a date.
1366 * @param {Number} date The JavaScript date (ms since epoch)
1367 * @return {String} A time of the form "HH:MM:SS"
1370 Dygraph
.hmsString_
= function(date
) {
1371 var zeropad
= Dygraph
.zeropad
;
1372 var d
= new Date(date
);
1373 if (d
.getSeconds()) {
1374 return zeropad(d
.getHours()) + ":" +
1375 zeropad(d
.getMinutes()) + ":" +
1376 zeropad(d
.getSeconds());
1378 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1383 * Convert a JS date to a string appropriate to display on an axis that
1384 * is displaying values at the stated granularity.
1385 * @param {Date} date The date to format
1386 * @param {Number} granularity One of the Dygraph granularity constants
1387 * @return {String} The formatted date
1390 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1391 if (granularity
>= Dygraph
.MONTHLY
) {
1392 return date
.strftime('%b %y');
1394 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1395 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1396 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1398 return Dygraph
.hmsString_(date
.getTime());
1404 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1405 * @param {Number} date The JavaScript date (ms since epoch)
1406 * @return {String} A date of the form "YYYY/MM/DD"
1409 Dygraph
.dateString_
= function(date
, self
) {
1410 var zeropad
= Dygraph
.zeropad
;
1411 var d
= new Date(date
);
1414 var year
= "" + d
.getFullYear();
1415 // Get a 0 padded month string
1416 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1417 // Get a 0 padded day string
1418 var day
= zeropad(d
.getDate());
1421 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1422 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1424 return year
+ "/" + month + "/" + day
+ ret
;
1428 * Round a number to the specified number of digits past the decimal point.
1429 * @param {Number} num The number to round
1430 * @param {Number} places The number of decimals to which to round
1431 * @return {Number} The rounded number
1434 Dygraph
.round_
= function(num
, places
) {
1435 var shift
= Math
.pow(10, places
);
1436 return Math
.round(num
* shift
)/shift
;
1440 * Fires when there's data available to be graphed.
1441 * @param {String} data Raw CSV data to be plotted
1444 Dygraph
.prototype.loadedEvent_
= function(data
) {
1445 this.rawData_
= this.parseCSV_(data
);
1449 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1450 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1451 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1454 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1457 Dygraph
.prototype.addXTicks_
= function() {
1458 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1459 var startDate
, endDate
;
1460 if (this.dateWindow_
) {
1461 startDate
= this.dateWindow_
[0];
1462 endDate
= this.dateWindow_
[1];
1464 startDate
= this.rawData_
[0][0];
1465 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1468 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1469 this.layout_
.updateOptions({xTicks
: xTicks
});
1472 // Time granularity enumeration
1473 Dygraph
.SECONDLY
= 0;
1474 Dygraph
.TWO_SECONDLY
= 1;
1475 Dygraph
.FIVE_SECONDLY
= 2;
1476 Dygraph
.TEN_SECONDLY
= 3;
1477 Dygraph
.THIRTY_SECONDLY
= 4;
1478 Dygraph
.MINUTELY
= 5;
1479 Dygraph
.TWO_MINUTELY
= 6;
1480 Dygraph
.FIVE_MINUTELY
= 7;
1481 Dygraph
.TEN_MINUTELY
= 8;
1482 Dygraph
.THIRTY_MINUTELY
= 9;
1483 Dygraph
.HOURLY
= 10;
1484 Dygraph
.TWO_HOURLY
= 11;
1485 Dygraph
.SIX_HOURLY
= 12;
1487 Dygraph
.WEEKLY
= 14;
1488 Dygraph
.MONTHLY
= 15;
1489 Dygraph
.QUARTERLY
= 16;
1490 Dygraph
.BIANNUAL
= 17;
1491 Dygraph
.ANNUAL
= 18;
1492 Dygraph
.DECADAL
= 19;
1493 Dygraph
.NUM_GRANULARITIES
= 20;
1495 Dygraph
.SHORT_SPACINGS
= [];
1496 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1497 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1498 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1499 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1500 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1501 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1502 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1503 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1504 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1505 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1506 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1507 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1508 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1509 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1510 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1514 // If we used this time granularity, how many ticks would there be?
1515 // This is only an approximation, but it's generally good enough.
1517 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1518 if (granularity
< Dygraph
.MONTHLY
) {
1519 // Generate one tick mark for every fixed interval of time.
1520 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1521 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1523 var year_mod
= 1; // e.g. to only print one point every 10 years.
1524 var num_months
= 12;
1525 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1526 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1527 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1528 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1530 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1531 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1532 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1538 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1539 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1541 // Returns an array containing {v: millis, label: label} dictionaries.
1543 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1544 var formatter
= this.attr_("xAxisLabelFormatter");
1546 if (granularity
< Dygraph
.MONTHLY
) {
1547 // Generate one tick mark for every fixed interval of time.
1548 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1549 var format
= '%d%b'; // e.g. "1Jan"
1551 // Find a time less than start_time which occurs on a "nice" time boundary
1552 // for this granularity.
1553 var g
= spacing
/ 1000;
1554 var d
= new Date(start_time
);
1555 if (g
<= 60) { // seconds
1556 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1560 if (g
<= 60) { // minutes
1561 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1566 if (g
<= 24) { // days
1567 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1572 if (g
== 7) { // one week
1573 d
.setDate(d
.getDate() - d
.getDay());
1578 start_time
= d
.getTime();
1580 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1581 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1584 // Display a tick mark on the first of a set of months of each year.
1585 // Years get a tick mark iff y % year_mod == 0. This is useful for
1586 // displaying a tick mark once every 10 years, say, on long time scales.
1588 var year_mod
= 1; // e.g. to only print one point every 10 years.
1590 if (granularity
== Dygraph
.MONTHLY
) {
1591 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1592 } else if (granularity
== Dygraph
.QUARTERLY
) {
1593 months
= [ 0, 3, 6, 9 ];
1594 } else if (granularity
== Dygraph
.BIANNUAL
) {
1596 } else if (granularity
== Dygraph
.ANNUAL
) {
1598 } else if (granularity
== Dygraph
.DECADAL
) {
1603 var start_year
= new Date(start_time
).getFullYear();
1604 var end_year
= new Date(end_time
).getFullYear();
1605 var zeropad
= Dygraph
.zeropad
;
1606 for (var i
= start_year
; i
<= end_year
; i
++) {
1607 if (i
% year_mod
!= 0) continue;
1608 for (var j
= 0; j
< months
.length
; j
++) {
1609 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1610 var t
= Date
.parse(date_str
);
1611 if (t
< start_time
|| t
> end_time
) continue;
1612 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1622 * Add ticks to the x-axis based on a date range.
1623 * @param {Number} startDate Start of the date window (millis since epoch)
1624 * @param {Number} endDate End of the date window (millis since epoch)
1625 * @return {Array.<Object>} Array of {label, value} tuples.
1628 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1630 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1631 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1632 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1639 return self
.GetXAxis(startDate
, endDate
, chosen
);
1641 // TODO(danvk): signal error.
1646 * Add ticks when the x axis has numbers on it (instead of dates)
1647 * @param {Number} startDate Start of the date window (millis since epoch)
1648 * @param {Number} endDate End of the date window (millis since epoch)
1650 * @param {function} attribute accessor function.
1651 * @return {Array.<Object>} Array of {label, value} tuples.
1654 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1655 var attr
= function(k
) {
1656 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1657 return self
.attr_(k
);
1662 for (var i
= 0; i
< vals
.length
; i
++) {
1663 ticks
.push({v
: vals
[i
]});
1667 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1668 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1669 // The first spacing greater than pixelsPerYLabel is what we use.
1670 // TODO(danvk): version that works on a log scale.
1671 if (attr("labelsKMG2")) {
1672 var mults
= [1, 2, 4, 8];
1674 var mults
= [1, 2, 5];
1676 var scale
, low_val
, high_val
, nTicks
;
1677 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1678 var pixelsPerTick
= attr('pixelsPerYLabel');
1679 for (var i
= -10; i
< 50; i
++) {
1680 if (attr("labelsKMG2")) {
1681 var base_scale
= Math
.pow(16, i
);
1683 var base_scale
= Math
.pow(10, i
);
1685 for (var j
= 0; j
< mults
.length
; j
++) {
1686 scale
= base_scale
* mults
[j
];
1687 low_val
= Math
.floor(minV
/ scale
) * scale
;
1688 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1689 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1690 var spacing
= self
.height_
/ nTicks
;
1691 // wish I could break out of both loops at once...
1692 if (spacing
> pixelsPerTick
) break;
1694 if (spacing
> pixelsPerTick
) break;
1697 // Construct the set of ticks.
1698 // Allow reverse y-axis if it's explicitly requested.
1699 if (low_val
> high_val
) scale
*= -1;
1700 for (var i
= 0; i
< nTicks
; i
++) {
1701 var tickV
= low_val
+ i
* scale
;
1702 ticks
.push( {v
: tickV
} );
1706 // Add formatted labels to the ticks.
1709 if (attr("labelsKMB")) {
1711 k_labels
= [ "K", "M", "B", "T" ];
1713 if (attr("labelsKMG2")) {
1714 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1716 k_labels
= [ "k", "M", "G", "T" ];
1718 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1720 for (var i
= 0; i
< ticks
.length
; i
++) {
1721 var tickV
= ticks
[i
].v
;
1722 var absTickV
= Math
.abs(tickV
);
1724 if (formatter
!= undefined
) {
1725 label
= formatter(tickV
);
1727 label
= Dygraph
.round_(tickV
, 2);
1729 if (k_labels
.length
) {
1730 // Round up to an appropriate unit.
1732 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1733 if (absTickV
>= n
) {
1734 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1739 ticks
[i
].label
= label
;
1744 // Computes the range of the data series (including confidence intervals).
1745 // series is either [ [x1, y1], [x2, y2], ... ] or
1746 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1747 // Returns [low, high]
1748 Dygraph
.prototype.extremeValues_
= function(series
) {
1749 var minY
= null, maxY
= null;
1751 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1753 // With custom bars, maxY is the max of the high values.
1754 for (var j
= 0; j
< series
.length
; j
++) {
1755 var y
= series
[j
][1][0];
1757 var low
= y
- series
[j
][1][1];
1758 var high
= y
+ series
[j
][1][2];
1759 if (low
> y
) low
= y
; // this can happen with custom bars,
1760 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1761 if (maxY
== null || high
> maxY
) {
1764 if (minY
== null || low
< minY
) {
1769 for (var j
= 0; j
< series
.length
; j
++) {
1770 var y
= series
[j
][1];
1771 if (y
=== null || isNaN(y
)) continue;
1772 if (maxY
== null || y
> maxY
) {
1775 if (minY
== null || y
< minY
) {
1781 return [minY
, maxY
];
1785 * This function is called once when the chart's data is changed or the options
1786 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1787 * idea is that values derived from the chart's data can be computed here,
1788 * rather than every time the chart is drawn. This includes things like the
1789 * number of axes, rolling averages, etc.
1791 Dygraph
.prototype.predraw_
= function() {
1792 // TODO(danvk): move more computations out of drawGraph_ and into here.
1793 this.computeYAxes_();
1795 // Create a new plotter.
1796 if (this.plotter_
) this.plotter_
.clear();
1797 this.plotter_
= new DygraphCanvasRenderer(this,
1798 this.hidden_
, this.layout_
,
1799 this.renderOptions_
);
1801 // The roller sits in the bottom left corner of the chart. We don't know where
1802 // this will be until the options are available, so it's positioned here.
1803 this.createRollInterface_();
1805 // Same thing applies for the labelsDiv. It's right edge should be flush with
1806 // the right edge of the charting area (which may not be the same as the right
1807 // edge of the div, if we have two y-axes.
1808 this.positionLabelsDiv_();
1810 // If the data or options have changed, then we'd better redraw.
1816 * Update the graph with new data. This method is called when the viewing area
1817 * has changed. If the underlying data or options have changed, predraw_ will
1818 * be called before drawGraph_ is called.
1821 Dygraph
.prototype.drawGraph_
= function() {
1822 var data
= this.rawData_
;
1824 // This is used to set the second parameter to drawCallback, below.
1825 var is_initial_draw
= this.is_initial_draw_
;
1826 this.is_initial_draw_
= false;
1828 var minY
= null, maxY
= null;
1829 this.layout_
.removeAllDatasets();
1831 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1833 // Loop over the fields (series). Go from the last to the first,
1834 // because if they're stacked that's how we accumulate the values.
1836 var cumulative_y
= []; // For stacked series.
1839 var extremes
= {}; // series name -> [low, high]
1841 // Loop over all fields and create datasets
1842 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1843 if (!this.visibility()[i
- 1]) continue;
1845 var seriesName
= this.attr_("labels")[i
];
1846 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1849 for (var j
= 0; j
< data
.length
; j
++) {
1850 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1851 var date
= data
[j
][0];
1852 series
.push([date
, data
[j
][i
]]);
1856 // TODO(danvk): move this into predraw_. It's insane to do it here.
1857 series
= this.rollingAverage(series
, this.rollPeriod_
);
1859 // Prune down to the desired range, if necessary (for zooming)
1860 // Because there can be lines going to points outside of the visible area,
1861 // we actually prune to visible points, plus one on either side.
1862 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1863 if (this.dateWindow_
) {
1864 var low
= this.dateWindow_
[0];
1865 var high
= this.dateWindow_
[1];
1867 // TODO(danvk): do binary search instead of linear search.
1868 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1869 var firstIdx
= null, lastIdx
= null;
1870 for (var k
= 0; k
< series
.length
; k
++) {
1871 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1874 if (series
[k
][0] <= high
) {
1878 if (firstIdx
=== null) firstIdx
= 0;
1879 if (firstIdx
> 0) firstIdx
--;
1880 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1881 if (lastIdx
< series
.length
- 1) lastIdx
++;
1882 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1883 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1884 pruned
.push(series
[k
]);
1888 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1891 var seriesExtremes
= this.extremeValues_(series
);
1894 for (var j
=0; j
<series
.length
; j
++) {
1895 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1898 } else if (this.attr_("stackedGraph")) {
1899 var l
= series
.length
;
1901 for (var j
= 0; j
< l
; j
++) {
1902 // If one data set has a NaN, let all subsequent stacked
1903 // sets inherit the NaN -- only start at 0 for the first set.
1904 var x
= series
[j
][0];
1905 if (cumulative_y
[x
] === undefined
) {
1906 cumulative_y
[x
] = 0;
1909 actual_y
= series
[j
][1];
1910 cumulative_y
[x
] += actual_y
;
1912 series
[j
] = [x
, cumulative_y
[x
]]
1914 if (cumulative_y
[x
] > seriesExtremes
[1]) {
1915 seriesExtremes
[1] = cumulative_y
[x
];
1917 if (cumulative_y
[x
] < seriesExtremes
[0]) {
1918 seriesExtremes
[0] = cumulative_y
[x
];
1922 extremes
[seriesName
] = seriesExtremes
;
1924 datasets
[i
] = series
;
1927 for (var i
= 1; i
< datasets
.length
; i
++) {
1928 if (!this.visibility()[i
- 1]) continue;
1929 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1932 // TODO(danvk): this method doesn't need to return anything.
1933 var out
= this.computeYAxisRanges_(extremes
);
1935 var seriesToAxisMap
= out
[1];
1936 this.layout_
.updateOptions( { yAxes
: axes
,
1937 seriesToAxisMap
: seriesToAxisMap
1942 // Tell PlotKit to use this new data and render itself
1943 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1944 this.layout_
.evaluateWithError();
1945 this.plotter_
.clear();
1946 this.plotter_
.render();
1947 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1948 this.canvas_
.height
);
1950 if (this.attr_("drawCallback") !== null) {
1951 this.attr_("drawCallback")(this, is_initial_draw
);
1956 * Determine properties of the y-axes which are independent of the data
1957 * currently being displayed. This includes things like the number of axes and
1958 * the style of the axes. It does not include the range of each axis and its
1960 * This fills in this.axes_ and this.seriesToAxisMap_.
1961 * axes_ = [ { options } ]
1962 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
1963 * indices are into the axes_ array.
1965 Dygraph
.prototype.computeYAxes_
= function() {
1966 this.axes_
= [{}]; // always have at least one y-axis.
1967 this.seriesToAxisMap_
= {};
1969 // Get a list of series names.
1970 var labels
= this.attr_("labels");
1972 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
1974 // all options which could be applied per-axis:
1982 'axisLabelFontSize',
1986 // Copy global axis options over to the first axis.
1987 for (var i
= 0; i
< axisOptions
.length
; i
++) {
1988 var k
= axisOptions
[i
];
1989 var v
= this.attr_(k
);
1990 if (v
) this.axes_
[0][k
] = v
;
1993 // Go through once and add all the axes.
1994 for (var seriesName
in series
) {
1995 if (!series
.hasOwnProperty(seriesName
)) continue;
1996 var axis
= this.attr_("axis", seriesName
);
1998 this.seriesToAxisMap_
[seriesName
] = 0;
2001 if (typeof(axis
) == 'object') {
2002 // Add a new axis, making a copy of its per-axis options.
2004 Dygraph
.update(opts
, this.axes_
[0]);
2005 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2006 Dygraph
.update(opts
, axis
);
2007 this.axes_
.push(opts
);
2008 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2012 // Go through one more time and assign series to an axis defined by another
2013 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2014 for (var seriesName
in series
) {
2015 if (!series
.hasOwnProperty(seriesName
)) continue;
2016 var axis
= this.attr_("axis", seriesName
);
2017 if (typeof(axis
) == 'string') {
2018 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2019 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2020 "series " + axis
+ ", which does not define its own axis.");
2023 var idx
= this.seriesToAxisMap_
[axis
];
2024 this.seriesToAxisMap_
[seriesName
] = idx
;
2028 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2029 // this last so that hiding the first series doesn't destroy the axis
2030 // properties of the primary axis.
2031 var seriesToAxisFiltered
= {};
2032 var vis
= this.visibility();
2033 for (var i
= 1; i
< labels
.length
; i
++) {
2035 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2037 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2041 * Returns the number of y-axes on the chart.
2042 * @return {Number} the number of axes.
2044 Dygraph
.prototype.numAxes
= function() {
2046 for (var series
in this.seriesToAxisMap_
) {
2047 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2048 var idx
= this.seriesToAxisMap_
[series
];
2049 if (idx
> last_axis
) last_axis
= idx
;
2051 return 1 + last_axis
;
2055 * Determine the value range and tick marks for each axis.
2056 * @param {Object} extremes A mapping from seriesName -> [low, high]
2057 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2059 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2060 // Build a map from axis number -> [list of series names]
2061 var seriesForAxis
= [];
2062 for (var series
in this.seriesToAxisMap_
) {
2063 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2064 var idx
= this.seriesToAxisMap_
[series
];
2065 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2066 seriesForAxis
[idx
].push(series
);
2069 // Compute extreme values, a span and tick marks for each axis.
2070 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2071 var axis
= this.axes_
[i
];
2072 if (axis
.valueWindow
) {
2073 // This is only set if the user has zoomed on the y-axis. It is never set
2074 // by a user. It takes precedence over axis.valueRange because, if you set
2075 // valueRange, you'd still expect to be able to pan.
2076 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2077 } else if (axis
.valueRange
) {
2078 // This is a user-set value range for this axis.
2079 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2081 // Calculate the extremes of extremes.
2082 var series
= seriesForAxis
[i
];
2083 var minY
= Infinity
; // extremes[series[0]][0];
2084 var maxY
= -Infinity
; // extremes[series[0]][1];
2085 for (var j
= 0; j
< series
.length
; j
++) {
2086 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2087 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2089 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2091 // Add some padding and round up to an integer to be human-friendly.
2092 var span
= maxY
- minY
;
2093 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2094 if (span
== 0) { span
= maxY
; }
2095 var maxAxisY
= maxY
+ 0.1 * span
;
2096 var minAxisY
= minY
- 0.1 * span
;
2098 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2099 if (!this.attr_("avoidMinZero")) {
2100 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2101 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2104 if (this.attr_("includeZero")) {
2105 if (maxY
< 0) maxAxisY
= 0;
2106 if (minY
> 0) minAxisY
= 0;
2109 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2112 // Add ticks. By default, all axes inherit the tick positions of the
2113 // primary axis. However, if an axis is specifically marked as having
2114 // independent ticks, then that is permissible as well.
2115 if (i
== 0 || axis
.independentTicks
) {
2117 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2118 axis
.computedValueRange
[1],
2122 var p_axis
= this.axes_
[0];
2123 var p_ticks
= p_axis
.ticks
;
2124 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2125 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2126 var tick_values
= [];
2127 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2128 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2129 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2130 tick_values
.push(y_val
);
2134 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2135 axis
.computedValueRange
[1],
2136 this, axis
, tick_values
);
2140 return [this.axes_
, this.seriesToAxisMap_
];
2144 * Calculates the rolling average of a data set.
2145 * If originalData is [label, val], rolls the average of those.
2146 * If originalData is [label, [, it's interpreted as [value, stddev]
2147 * and the roll is returned in the same form, with appropriately reduced
2148 * stddev for each value.
2149 * Note that this is where fractional input (i.e. '5/10') is converted into
2151 * @param {Array} originalData The data in the appropriate format (see above)
2152 * @param {Number} rollPeriod The number of days over which to average the data
2154 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2155 if (originalData
.length
< 2)
2156 return originalData
;
2157 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2158 var rollingData
= [];
2159 var sigma
= this.attr_("sigma");
2161 if (this.fractions_
) {
2163 var den
= 0; // numerator/denominator
2165 for (var i
= 0; i
< originalData
.length
; i
++) {
2166 num
+= originalData
[i
][1][0];
2167 den
+= originalData
[i
][1][1];
2168 if (i
- rollPeriod
>= 0) {
2169 num
-= originalData
[i
- rollPeriod
][1][0];
2170 den
-= originalData
[i
- rollPeriod
][1][1];
2173 var date
= originalData
[i
][0];
2174 var value
= den
? num
/ den
: 0.0;
2175 if (this.attr_("errorBars")) {
2176 if (this.wilsonInterval_
) {
2177 // For more details on this confidence interval, see:
2178 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2180 var p
= value
< 0 ? 0 : value
, n
= den
;
2181 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2182 var denom
= 1 + sigma
* sigma
/ den
;
2183 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2184 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2185 rollingData
[i
] = [date
,
2186 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2188 rollingData
[i
] = [date
, [0, 0, 0]];
2191 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2192 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2195 rollingData
[i
] = [date
, mult
* value
];
2198 } else if (this.attr_("customBars")) {
2203 for (var i
= 0; i
< originalData
.length
; i
++) {
2204 var data
= originalData
[i
][1];
2206 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2208 if (y
!= null && !isNaN(y
)) {
2214 if (i
- rollPeriod
>= 0) {
2215 var prev
= originalData
[i
- rollPeriod
];
2216 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2223 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2224 1.0 * (mid
- low
) / count
,
2225 1.0 * (high
- mid
) / count
]];
2228 // Calculate the rolling average for the first rollPeriod - 1 points where
2229 // there is not enough data to roll over the full number of days
2230 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2231 if (!this.attr_("errorBars")){
2232 if (rollPeriod
== 1) {
2233 return originalData
;
2236 for (var i
= 0; i
< originalData
.length
; i
++) {
2239 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2240 var y
= originalData
[j
][1];
2241 if (y
== null || isNaN(y
)) continue;
2243 sum
+= originalData
[j
][1];
2246 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2248 rollingData
[i
] = [originalData
[i
][0], null];
2253 for (var i
= 0; i
< originalData
.length
; i
++) {
2257 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2258 var y
= originalData
[j
][1][0];
2259 if (y
== null || isNaN(y
)) continue;
2261 sum
+= originalData
[j
][1][0];
2262 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2265 var stddev
= Math
.sqrt(variance
) / num_ok
;
2266 rollingData
[i
] = [originalData
[i
][0],
2267 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2269 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2279 * Parses a date, returning the number of milliseconds since epoch. This can be
2280 * passed in as an xValueParser in the Dygraph constructor.
2281 * TODO(danvk): enumerate formats that this understands.
2282 * @param {String} A date in YYYYMMDD format.
2283 * @return {Number} Milliseconds since epoch.
2286 Dygraph
.dateParser
= function(dateStr
, self
) {
2289 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2290 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2291 while (dateStrSlashed
.search("-") != -1) {
2292 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2294 d
= Date
.parse(dateStrSlashed
);
2295 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2296 // TODO(danvk): remove support for this format. It's confusing.
2297 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2298 + "/" + dateStr
.substr(6,2);
2299 d
= Date
.parse(dateStrSlashed
);
2301 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2302 // "2009/07/12 12:34:56"
2303 d
= Date
.parse(dateStr
);
2306 if (!d
|| isNaN(d
)) {
2307 self
.error("Couldn't parse " + dateStr
+ " as a date");
2313 * Detects the type of the str (date or numeric) and sets the various
2314 * formatting attributes in this.attrs_ based on this type.
2315 * @param {String} str An x value.
2318 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2320 if (str
.indexOf('-') >= 0 ||
2321 str
.indexOf('/') >= 0 ||
2322 isNaN(parseFloat(str
))) {
2324 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2325 // TODO(danvk): remove support for this format.
2330 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2331 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2332 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2333 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2335 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2336 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2337 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2338 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2343 * Parses a string in a special csv format. We expect a csv file where each
2344 * line is a date point, and the first field in each line is the date string.
2345 * We also expect that all remaining fields represent series.
2346 * if the errorBars attribute is set, then interpret the fields as:
2347 * date, series1, stddev1, series2, stddev2, ...
2348 * @param {Array.<Object>} data See above.
2351 * @return Array.<Object> An array with one entry for each row. These entries
2352 * are an array of cells in that row. The first entry is the parsed x-value for
2353 * the row. The second, third, etc. are the y-values. These can take on one of
2354 * three forms, depending on the CSV and constructor parameters:
2356 * 2. [ value, stddev ]
2357 * 3. [ low value, center value, high value ]
2359 Dygraph
.prototype.parseCSV_
= function(data
) {
2361 var lines
= data
.split("\n");
2363 // Use the default delimiter or fall back to a tab if that makes sense.
2364 var delim
= this.attr_('delimiter');
2365 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2370 if (this.labelsFromCSV_
) {
2372 this.attrs_
.labels
= lines
[0].split(delim
);
2375 // Parse the x as a float or return null if it's not a number.
2376 var parseFloatOrNull
= function(x
) {
2377 var val
= parseFloat(x
);
2378 return isNaN(val
) ? null : val
;
2382 var defaultParserSet
= false; // attempt to auto-detect x value type
2383 var expectedCols
= this.attr_("labels").length
;
2384 var outOfOrder
= false;
2385 for (var i
= start
; i
< lines
.length
; i
++) {
2386 var line
= lines
[i
];
2387 if (line
.length
== 0) continue; // skip blank lines
2388 if (line
[0] == '#') continue; // skip comment lines
2389 var inFields
= line
.split(delim
);
2390 if (inFields
.length
< 2) continue;
2393 if (!defaultParserSet
) {
2394 this.detectTypeFromString_(inFields
[0]);
2395 xParser
= this.attr_("xValueParser");
2396 defaultParserSet
= true;
2398 fields
[0] = xParser(inFields
[0], this);
2400 // If fractions are expected, parse the numbers as "A/B
"
2401 if (this.fractions_) {
2402 for (var j = 1; j < inFields.length; j++) {
2403 // TODO(danvk): figure out an appropriate way to flag parse errors.
2404 var vals = inFields[j].split("/");
2405 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2407 } else if (this.attr_("errorBars
")) {
2408 // If there are error bars, values are (value, stddev) pairs
2409 for (var j = 1; j < inFields.length; j += 2)
2410 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2411 parseFloatOrNull(inFields[j + 1])];
2412 } else if (this.attr_("customBars
")) {
2413 // Bars are a low;center;high tuple
2414 for (var j = 1; j < inFields.length; j++) {
2415 var vals = inFields[j].split(";");
2416 fields[j] = [ parseFloatOrNull(vals[0]),
2417 parseFloatOrNull(vals[1]),
2418 parseFloatOrNull(vals[2]) ];
2421 // Values are just numbers
2422 for (var j = 1; j < inFields.length; j++) {
2423 fields[j] = parseFloatOrNull(inFields[j]);
2426 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2431 if (fields.length != expectedCols) {
2432 this.error("Number of columns
in line
" + i + " (" + fields.length +
2433 ") does not agree
with number of
labels (" + expectedCols +
2439 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2440 ret.sort(function(a,b) { return a[0] - b[0] });
2447 * The user has provided their data as a pre-packaged JS array. If the x values
2448 * are numeric, this is the same as dygraphs' internal format. If the x values
2449 * are dates, we need to convert them from Date objects to ms since epoch.
2450 * @param {Array.<Object>} data
2451 * @return {Array.<Object>} data with numeric x values.
2453 Dygraph.prototype.parseArray_ = function(data) {
2454 // Peek at the first x value to see if it's numeric.
2455 if (data.length == 0) {
2456 this.error("Can
't plot empty data set");
2459 if (data[0].length == 0) {
2460 this.error("Data set cannot contain an empty row");
2464 if (this.attr_("labels") == null) {
2465 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2466 "in the options parameter");
2467 this.attrs_.labels = [ "X" ];
2468 for (var i = 1; i < data[0].length; i++) {
2469 this.attrs_.labels.push("Y" + i);
2473 if (Dygraph.isDateLike(data[0][0])) {
2474 // Some intelligent defaults for a date x-axis.
2475 this.attrs_.xValueFormatter = Dygraph.dateString_;
2476 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2477 this.attrs_.xTicker = Dygraph.dateTicker;
2479 // Assume they're all dates
.
2480 var parsedData
= Dygraph
.clone(data
);
2481 for (var i
= 0; i
< data
.length
; i
++) {
2482 if (parsedData
[i
].length
== 0) {
2483 this.error("Row " + (1 + i
) + " of data is empty");
2486 if (parsedData
[i
][0] == null
2487 || typeof(parsedData
[i
][0].getTime
) != 'function'
2488 || isNaN(parsedData
[i
][0].getTime())) {
2489 this.error("x value in row " + (1 + i
) + " is not a Date");
2492 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2496 // Some intelligent defaults for a numeric x-axis.
2497 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2498 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2504 * Parses a DataTable object from gviz.
2505 * The data is expected to have a first column that is either a date or a
2506 * number. All subsequent columns must be numbers. If there is a clear mismatch
2507 * between this.xValueParser_ and the type of the first column, it will be
2508 * fixed. Fills out rawData_.
2509 * @param {Array.<Object>} data See above.
2512 Dygraph
.prototype.parseDataTable_
= function(data
) {
2513 var cols
= data
.getNumberOfColumns();
2514 var rows
= data
.getNumberOfRows();
2516 var indepType
= data
.getColumnType(0);
2517 if (indepType
== 'date' || indepType
== 'datetime') {
2518 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2519 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2520 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2521 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2522 } else if (indepType
== 'number') {
2523 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2524 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2525 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2526 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2528 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2529 "column 1 of DataTable input (Got '" + indepType
+ "')");
2533 // Array of the column indices which contain data (and not annotations).
2535 var annotationCols
= {}; // data index -> [annotation cols]
2536 var hasAnnotations
= false;
2537 for (var i
= 1; i
< cols
; i
++) {
2538 var type
= data
.getColumnType(i
);
2539 if (type
== 'number') {
2541 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2542 // This is OK -- it's an annotation column.
2543 var dataIdx
= colIdx
[colIdx
.length
- 1];
2544 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2545 annotationCols
[dataIdx
] = [i
];
2547 annotationCols
[dataIdx
].push(i
);
2549 hasAnnotations
= true;
2551 this.error("Only 'number' is supported as a dependent type with Gviz." +
2552 " 'string' is only supported if displayAnnotations is true");
2556 // Read column labels
2557 // TODO(danvk): add support back for errorBars
2558 var labels
= [data
.getColumnLabel(0)];
2559 for (var i
= 0; i
< colIdx
.length
; i
++) {
2560 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2561 if (this.attr_("errorBars")) i
+= 1;
2563 this.attrs_
.labels
= labels
;
2564 cols
= labels
.length
;
2567 var outOfOrder
= false;
2568 var annotations
= [];
2569 for (var i
= 0; i
< rows
; i
++) {
2571 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2572 data
.getValue(i
, 0) === null) {
2573 this.warn("Ignoring row " + i
+
2574 " of DataTable because of undefined or null first column.");
2578 if (indepType
== 'date' || indepType
== 'datetime') {
2579 row
.push(data
.getValue(i
, 0).getTime());
2581 row
.push(data
.getValue(i
, 0));
2583 if (!this.attr_("errorBars")) {
2584 for (var j
= 0; j
< colIdx
.length
; j
++) {
2585 var col
= colIdx
[j
];
2586 row
.push(data
.getValue(i
, col
));
2587 if (hasAnnotations
&&
2588 annotationCols
.hasOwnProperty(col
) &&
2589 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2591 ann
.series
= data
.getColumnLabel(col
);
2593 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2595 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2596 if (k
) ann
.text
+= "\n";
2597 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2599 annotations
.push(ann
);
2603 for (var j
= 0; j
< cols
- 1; j
++) {
2604 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2607 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2614 this.warn("DataTable is out of order; order it correctly to speed loading.");
2615 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2617 this.rawData_
= ret
;
2619 if (annotations
.length
> 0) {
2620 this.setAnnotations(annotations
, true);
2624 // These functions are all based on MochiKit.
2625 Dygraph
.update
= function (self
, o
) {
2626 if (typeof(o
) != 'undefined' && o
!== null) {
2628 if (o
.hasOwnProperty(k
)) {
2636 Dygraph
.isArrayLike
= function (o
) {
2637 var typ
= typeof(o
);
2639 (typ
!= 'object' && !(typ
== 'function' &&
2640 typeof(o
.item
) == 'function')) ||
2642 typeof(o
.length
) != 'number' ||
2650 Dygraph
.isDateLike
= function (o
) {
2651 if (typeof(o
) != "object" || o
=== null ||
2652 typeof(o
.getTime
) != 'function') {
2658 Dygraph
.clone
= function(o
) {
2659 // TODO(danvk): figure out how MochiKit's version works
2661 for (var i
= 0; i
< o
.length
; i
++) {
2662 if (Dygraph
.isArrayLike(o
[i
])) {
2663 r
.push(Dygraph
.clone(o
[i
]));
2673 * Get the CSV data. If it's in a function, call that function. If it's in a
2674 * file, do an XMLHttpRequest to get it.
2677 Dygraph
.prototype.start_
= function() {
2678 if (typeof this.file_
== 'function') {
2679 // CSV string. Pretend we got it via XHR.
2680 this.loadedEvent_(this.file_());
2681 } else if (Dygraph
.isArrayLike(this.file_
)) {
2682 this.rawData_
= this.parseArray_(this.file_
);
2684 } else if (typeof this.file_
== 'object' &&
2685 typeof this.file_
.getColumnRange
== 'function') {
2686 // must be a DataTable from gviz.
2687 this.parseDataTable_(this.file_
);
2689 } else if (typeof this.file_
== 'string') {
2690 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2691 if (this.file_
.indexOf('\n') >= 0) {
2692 this.loadedEvent_(this.file_
);
2694 var req
= new XMLHttpRequest();
2696 req
.onreadystatechange
= function () {
2697 if (req
.readyState
== 4) {
2698 if (req
.status
== 200) {
2699 caller
.loadedEvent_(req
.responseText
);
2704 req
.open("GET", this.file_
, true);
2708 this.error("Unknown data format: " + (typeof this.file_
));
2713 * Changes various properties of the graph. These can include:
2715 * <li>file: changes the source data for the graph</li>
2716 * <li>errorBars: changes whether the data contains stddev</li>
2718 * @param {Object} attrs The new properties and values
2720 Dygraph
.prototype.updateOptions
= function(attrs
) {
2721 // TODO(danvk): this is a mess. Rethink this function.
2722 if ('rollPeriod' in attrs
) {
2723 this.rollPeriod_
= attrs
.rollPeriod
;
2725 if ('dateWindow' in attrs
) {
2726 this.dateWindow_
= attrs
.dateWindow
;
2729 // TODO(danvk): validate per-series options.
2734 // highlightCircleSize
2736 Dygraph
.update(this.user_attrs_
, attrs
);
2737 Dygraph
.update(this.renderOptions_
, attrs
);
2739 this.labelsFromCSV_
= (this.attr_("labels") == null);
2741 // TODO(danvk): this doesn't match the constructor logic
2742 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2743 if (attrs
['file']) {
2744 this.file_
= attrs
['file'];
2752 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2753 * containing div (which has presumably changed size since the dygraph was
2754 * instantiated. If the width/height are specified, the div will be resized.
2756 * This is far more efficient than destroying and re-instantiating a
2757 * Dygraph, since it doesn't have to reparse the underlying data.
2759 * @param {Number} width Width (in pixels)
2760 * @param {Number} height Height (in pixels)
2762 Dygraph
.prototype.resize
= function(width
, height
) {
2763 if (this.resize_lock
) {
2766 this.resize_lock
= true;
2768 if ((width
=== null) != (height
=== null)) {
2769 this.warn("Dygraph.resize() should be called with zero parameters or " +
2770 "two non-NULL parameters. Pretending it was zero.");
2771 width
= height
= null;
2774 // TODO(danvk): there should be a clear() method.
2775 this.maindiv_
.innerHTML
= "";
2776 this.attrs_
.labelsDiv
= null;
2779 this.maindiv_
.style
.width
= width
+ "px";
2780 this.maindiv_
.style
.height
= height
+ "px";
2781 this.width_
= width
;
2782 this.height_
= height
;
2784 this.width_
= this.maindiv_
.offsetWidth
;
2785 this.height_
= this.maindiv_
.offsetHeight
;
2788 this.createInterface_();
2791 this.resize_lock
= false;
2795 * Adjusts the number of days in the rolling average. Updates the graph to
2796 * reflect the new averaging period.
2797 * @param {Number} length Number of days over which to average the data.
2799 Dygraph
.prototype.adjustRoll
= function(length
) {
2800 this.rollPeriod_
= length
;
2805 * Returns a boolean array of visibility statuses.
2807 Dygraph
.prototype.visibility
= function() {
2808 // Do lazy-initialization, so that this happens after we know the number of
2810 if (!this.attr_("visibility")) {
2811 this.attrs_
["visibility"] = [];
2813 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2814 this.attr_("visibility").push(true);
2816 return this.attr_("visibility");
2820 * Changes the visiblity of a series.
2822 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2823 var x
= this.visibility();
2824 if (num
< 0 || num
>= x
.length
) {
2825 this.warn("invalid series number in setVisibility: " + num
);
2833 * Update the list of annotations and redraw the chart.
2835 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2836 // Only add the annotation CSS rule once we know it will be used.
2837 Dygraph
.addAnnotationRule();
2838 this.annotations_
= ann
;
2839 this.layout_
.setAnnotations(this.annotations_
);
2840 if (!suppressDraw
) {
2846 * Return the list of annotations.
2848 Dygraph
.prototype.annotations
= function() {
2849 return this.annotations_
;
2853 * Get the index of a series (column) given its name. The first column is the
2854 * x-axis, so the data series start with index 1.
2856 Dygraph
.prototype.indexFromSetName
= function(name
) {
2857 var labels
= this.attr_("labels");
2858 for (var i
= 0; i
< labels
.length
; i
++) {
2859 if (labels
[i
] == name
) return i
;
2864 Dygraph
.addAnnotationRule
= function() {
2865 if (Dygraph
.addedAnnotationCSS
) return;
2868 if (document
.styleSheets
.length
> 0) {
2869 mysheet
= document
.styleSheets
[0];
2871 var styleSheetElement
= document
.createElement("style");
2872 styleSheetElement
.type
= "text/css";
2873 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2874 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2875 if (document
.styleSheets
[i
].disabled
) continue;
2876 mysheet
= document
.styleSheets
[i
];
2880 var rule
= "border: 1px solid black; " +
2881 "background-color: white; " +
2882 "text-align: center;";
2883 if (mysheet
.insertRule
) { // Firefox
2884 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2885 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2886 } else if (mysheet
.addRule
) { // IE
2887 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2890 Dygraph
.addedAnnotationCSS
= true;
2894 * Create a new canvas element. This is more complex than a simple
2895 * document.createElement("canvas") because of IE and excanvas.
2897 Dygraph
.createCanvas
= function() {
2898 var canvas
= document
.createElement("canvas");
2900 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2901 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2902 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2910 * A wrapper around Dygraph that implements the gviz API.
2911 * @param {Object} container The DOM object the visualization should live in.
2913 Dygraph
.GVizChart
= function(container
) {
2914 this.container
= container
;
2917 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2918 this.container
.innerHTML
= '';
2919 this.date_graph
= new Dygraph(this.container
, data
, options
);
2923 * Google charts compatible setSelection
2924 * Only row selection is supported, all points in the row will be highlighted
2925 * @param {Array} array of the selected cells
2928 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2930 if (selection_array
.length
) {
2931 row
= selection_array
[0].row
;
2933 this.date_graph
.setSelection(row
);
2937 * Google charts compatible getSelection implementation
2938 * @return {Array} array of the selected cells
2941 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2944 var row
= this.date_graph
.getSelection();
2946 if (row
< 0) return selection
;
2949 for (var i
in this.date_graph
.layout_
.datasets
) {
2950 selection
.push({row
: row
, column
: col
});
2957 // Older pages may still use this name.
2958 DateGraph
= Dygraph
;