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 px
= Dygraph
.findPosX(self
.canvas_
);
847 py
= Dygraph
.findPosY(self
.canvas_
);
848 dragStartX
= getX(event
);
849 dragStartY
= getY(event
);
851 if (event
.altKey
|| event
.shiftKey
) {
852 // have to be zoomed in to pan.
854 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
855 if (self
.axes_
[i
].valueWindow
|| self
.axes_
[i
].valueRange
) {
860 if (!self
.dateWindow_
&& !zoomedY
) return;
863 var xRange
= self
.xAxisRange();
864 dateRange
= xRange
[1] - xRange
[0];
866 // Record the range of each y-axis at the start of the drag.
867 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
869 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
870 var axis
= self
.axes_
[i
];
871 var yRange
= self
.yAxisRange(i
);
872 axis
.dragValueRange
= yRange
[1] - yRange
[0];
873 var r
= self
.toDataCoords(null, dragStartY
, i
);
874 axis
.draggingValue
= r
[1];
875 if (axis
.valueWindow
|| axis
.valueRange
) is2DPan
= true;
878 // TODO(konigsberg): Switch from all this math to toDataCoords?
879 // Seems to work for the dragging value.
880 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+ xRange
[0];
886 // If the user releases the mouse button during a drag, but not over the
887 // canvas, then it doesn't count as a zooming action.
888 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
889 if (isZooming
|| isPanning
) {
899 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
900 delete self
.axes_
[i
].draggingValue
;
901 delete self
.axes_
[i
].dragValueRange
;
906 // Temporarily cancel the dragging event when the mouse leaves the graph
907 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
914 // If the mouse is released on the canvas during a drag event, then it's a
915 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
916 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
919 dragEndX
= getX(event
);
920 dragEndY
= getY(event
);
921 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
922 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
924 if (regionWidth
< 2 && regionHeight
< 2 &&
925 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
926 // TODO(danvk): pass along more info about the points, e.g. 'x'
927 if (self
.attr_('clickCallback') != null) {
928 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
930 if (self
.attr_('pointClickCallback')) {
931 // check if the click was on a particular point.
933 var closestDistance
= 0;
934 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
935 var p
= self
.selPoints_
[i
];
936 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
937 Math
.pow(p
.canvasy
- dragEndY
, 2);
938 if (closestIdx
== -1 || distance
< closestDistance
) {
939 closestDistance
= distance
;
944 // Allow any click within two pixels of the dot.
945 var radius
= self
.attr_('highlightCircleSize') + 2;
946 if (closestDistance
<= 5 * 5) {
947 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
952 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
953 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
954 Math
.max(dragStartX
, dragEndX
));
955 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
956 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
957 Math
.max(dragStartY
, dragEndY
));
959 self
.canvas_
.getContext("2d").clearRect(0, 0,
961 self
.canvas_
.height
);
977 // Double-clicking zooms back out
978 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
979 // Disable zooming out if panning.
980 if (event
.altKey
|| event
.shiftKey
) return;
987 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
988 * up any previous zoom rectangles that were drawn. This could be optimized to
989 * avoid extra redrawing, but it's tricky to avoid interactions with the status
992 * @param {Number} direction the direction of the zoom rectangle. Acceptable
993 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
994 * @param {Number} startX The X position where the drag started, in canvas
996 * @param {Number} endX The current X position of the drag, in canvas coords.
997 * @param {Number} startY The Y position where the drag started, in canvas
999 * @param {Number} endY The current Y position of the drag, in canvas coords.
1000 * @param {Number} prevDirection the value of direction on the previous call to
1001 * this function. Used to avoid excess redrawing
1002 * @param {Number} prevEndX The value of endX on the previous call to this
1003 * function. Used to avoid excess redrawing
1004 * @param {Number} prevEndY The value of endY on the previous call to this
1005 * function. Used to avoid excess redrawing
1008 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1009 prevDirection
, prevEndX
, prevEndY
) {
1010 var ctx
= this.canvas_
.getContext("2d");
1012 // Clean up from the previous rect if necessary
1013 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1014 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1015 Math
.abs(startX
- prevEndX
), this.height_
);
1016 } else if (prevDirection
== Dygraph
.VERTICAL
){
1017 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1018 this.width_
, Math
.abs(startY
- prevEndY
));
1021 // Draw a light-grey rectangle to show the new viewing area
1022 if (direction
== Dygraph
.HORIZONTAL
) {
1023 if (endX
&& startX
) {
1024 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1025 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1026 Math
.abs(endX
- startX
), this.height_
);
1029 if (direction
== Dygraph
.VERTICAL
) {
1030 if (endY
&& startY
) {
1031 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1032 ctx
.fillRect(0, Math
.min(startY
, endY
),
1033 this.width_
, Math
.abs(endY
- startY
));
1039 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1040 * the canvas. The exact zoom window may be slightly larger if there are no data
1041 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1042 * which accepts dates that match the raw data. This function redraws the graph.
1044 * @param {Number} lowX The leftmost pixel value that should be visible.
1045 * @param {Number} highX The rightmost pixel value that should be visible.
1048 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1049 // Find the earliest and latest dates contained in this canvasx range.
1050 // Convert the call to date ranges of the raw data.
1051 var r
= this.toDataCoords(lowX
, null);
1053 r
= this.toDataCoords(highX
, null);
1055 this.doZoomXDates_(minDate
, maxDate
);
1059 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1060 * method with doZoomX which accepts pixel coordinates. This function redraws
1063 * @param {Number} minDate The minimum date that should be visible.
1064 * @param {Number} maxDate The maximum date that should be visible.
1067 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1068 this.dateWindow_
= [minDate
, maxDate
];
1070 if (this.attr_("zoomCallback")) {
1071 var yRange
= this.yAxisRange();
1072 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1077 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1078 * the canvas. This function redraws the graph.
1080 * @param {Number} lowY The topmost pixel value that should be visible.
1081 * @param {Number} highY The lowest pixel value that should be visible.
1084 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1085 // Find the highest and lowest values in pixel range for each axis.
1086 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1087 // This is because pixels increase as you go down on the screen, whereas data
1088 // coordinates increase as you go up the screen.
1089 var valueRanges
= [];
1090 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1091 var hi
= this.toDataCoords(null, lowY
, i
);
1092 var low
= this.toDataCoords(null, highY
, i
);
1093 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1094 valueRanges
.push([low
[1], hi
[1]]);
1098 if (this.attr_("zoomCallback")) {
1099 var xRange
= this.xAxisRange();
1100 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1105 * Reset the zoom to the original view coordinates. This is the same as
1106 * double-clicking on the graph.
1110 Dygraph
.prototype.doUnzoom_
= function() {
1112 if (this.dateWindow_
!= null) {
1114 this.dateWindow_
= null;
1117 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1118 if (this.axes_
[i
].valueWindow
!= null) {
1120 delete this.axes_
[i
].valueWindow
;
1125 // Putting the drawing operation before the callback because it resets
1128 if (this.attr_("zoomCallback")) {
1129 var minDate
= this.rawData_
[0][0];
1130 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1131 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1137 * When the mouse moves in the canvas, display information about a nearby data
1138 * point and draw dots over those points in the data series. This function
1139 * takes care of cleanup of previously-drawn dots.
1140 * @param {Object} event The mousemove event from the browser.
1143 Dygraph
.prototype.mouseMove_
= function(event
) {
1144 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1145 var points
= this.layout_
.points
;
1150 // Loop through all the points and find the date nearest to our current
1152 var minDist
= 1e+100;
1154 for (var i
= 0; i
< points
.length
; i
++) {
1155 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1156 if (dist
> minDist
) continue;
1160 if (idx
>= 0) lastx
= points
[idx
].xval
;
1161 // Check that you can really highlight the last day's data
1162 if (canvasx
> points
[points
.length
-1].canvasx
)
1163 lastx
= points
[points
.length
-1].xval
;
1165 // Extract the points we've selected
1166 this.selPoints_
= [];
1167 var l
= points
.length
;
1168 if (!this.attr_("stackedGraph")) {
1169 for (var i
= 0; i
< l
; i
++) {
1170 if (points
[i
].xval
== lastx
) {
1171 this.selPoints_
.push(points
[i
]);
1175 // Need to 'unstack' points starting from the bottom
1176 var cumulative_sum
= 0;
1177 for (var i
= l
- 1; i
>= 0; i
--) {
1178 if (points
[i
].xval
== lastx
) {
1179 var p
= {}; // Clone the point since we modify it
1180 for (var k
in points
[i
]) {
1181 p
[k
] = points
[i
][k
];
1183 p
.yval
-= cumulative_sum
;
1184 cumulative_sum
+= p
.yval
;
1185 this.selPoints_
.push(p
);
1188 this.selPoints_
.reverse();
1191 if (this.attr_("highlightCallback")) {
1192 var px
= this.lastx_
;
1193 if (px
!== null && lastx
!= px
) {
1194 // only fire if the selected point has changed.
1195 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1199 // Save last x position for callbacks.
1200 this.lastx_
= lastx
;
1202 this.updateSelection_();
1206 * Draw dots over the selectied points in the data series. This function
1207 * takes care of cleanup of previously-drawn dots.
1210 Dygraph
.prototype.updateSelection_
= function() {
1211 // Clear the previously drawn vertical, if there is one
1212 var ctx
= this.canvas_
.getContext("2d");
1213 if (this.previousVerticalX_
>= 0) {
1214 // Determine the maximum highlight circle size.
1215 var maxCircleSize
= 0;
1216 var labels
= this.attr_('labels');
1217 for (var i
= 1; i
< labels
.length
; i
++) {
1218 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1219 if (r
> maxCircleSize
) maxCircleSize
= r
;
1221 var px
= this.previousVerticalX_
;
1222 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1223 2 * maxCircleSize
+ 2, this.height_
);
1226 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1228 if (this.selPoints_
.length
> 0) {
1229 var canvasx
= this.selPoints_
[0].canvasx
;
1231 // Set the status message to indicate the selected point(s)
1232 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1233 var fmtFunc
= this.attr_('yValueFormatter');
1234 var clen
= this.colors_
.length
;
1236 if (this.attr_('showLabelsOnHighlight')) {
1237 // Set the status message to indicate the selected point(s)
1238 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1239 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1240 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1241 if (this.attr_("labelsSeparateLines")) {
1244 var point
= this.selPoints_
[i
];
1245 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1246 var yval
= fmtFunc(point
.yval
);
1247 replace
+= " <b><font color='" + c
.toHex() + "'>"
1248 + point
.name
+ "</font></b>:"
1252 this.attr_("labelsDiv").innerHTML
= replace
;
1255 // Draw colored circles over the center of each selected point
1257 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1258 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1260 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1262 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1263 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1264 0, 2 * Math
.PI
, false);
1269 this.previousVerticalX_
= canvasx
;
1274 * Set manually set selected dots, and display information about them
1275 * @param int row number that should by highlighted
1276 * false value clears the selection
1279 Dygraph
.prototype.setSelection
= function(row
) {
1280 // Extract the points we've selected
1281 this.selPoints_
= [];
1284 if (row
!== false) {
1285 row
= row
-this.boundaryIds_
[0][0];
1288 if (row
!== false && row
>= 0) {
1289 for (var i
in this.layout_
.datasets
) {
1290 if (row
< this.layout_
.datasets
[i
].length
) {
1291 var point
= this.layout_
.points
[pos
+row
];
1293 if (this.attr_("stackedGraph")) {
1294 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1297 this.selPoints_
.push(point
);
1299 pos
+= this.layout_
.datasets
[i
].length
;
1303 if (this.selPoints_
.length
) {
1304 this.lastx_
= this.selPoints_
[0].xval
;
1305 this.updateSelection_();
1308 this.clearSelection();
1314 * The mouse has left the canvas. Clear out whatever artifacts remain
1315 * @param {Object} event the mouseout event from the browser.
1318 Dygraph
.prototype.mouseOut_
= function(event
) {
1319 if (this.attr_("unhighlightCallback")) {
1320 this.attr_("unhighlightCallback")(event
);
1323 if (this.attr_("hideOverlayOnMouseOut")) {
1324 this.clearSelection();
1329 * Remove all selection from the canvas
1332 Dygraph
.prototype.clearSelection
= function() {
1333 // Get rid of the overlay data
1334 var ctx
= this.canvas_
.getContext("2d");
1335 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1336 this.attr_("labelsDiv").innerHTML
= "";
1337 this.selPoints_
= [];
1342 * Returns the number of the currently selected row
1343 * @return int row number, of -1 if nothing is selected
1346 Dygraph
.prototype.getSelection
= function() {
1347 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1351 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1352 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1353 return row
+ this.boundaryIds_
[0][0];
1359 Dygraph
.zeropad
= function(x
) {
1360 if (x
< 10) return "0" + x
; else return "" + x
;
1364 * Return a string version of the hours, minutes and seconds portion of a date.
1365 * @param {Number} date The JavaScript date (ms since epoch)
1366 * @return {String} A time of the form "HH:MM:SS"
1369 Dygraph
.hmsString_
= function(date
) {
1370 var zeropad
= Dygraph
.zeropad
;
1371 var d
= new Date(date
);
1372 if (d
.getSeconds()) {
1373 return zeropad(d
.getHours()) + ":" +
1374 zeropad(d
.getMinutes()) + ":" +
1375 zeropad(d
.getSeconds());
1377 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1382 * Convert a JS date to a string appropriate to display on an axis that
1383 * is displaying values at the stated granularity.
1384 * @param {Date} date The date to format
1385 * @param {Number} granularity One of the Dygraph granularity constants
1386 * @return {String} The formatted date
1389 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1390 if (granularity
>= Dygraph
.MONTHLY
) {
1391 return date
.strftime('%b %y');
1393 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1394 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1395 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1397 return Dygraph
.hmsString_(date
.getTime());
1403 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1404 * @param {Number} date The JavaScript date (ms since epoch)
1405 * @return {String} A date of the form "YYYY/MM/DD"
1408 Dygraph
.dateString_
= function(date
, self
) {
1409 var zeropad
= Dygraph
.zeropad
;
1410 var d
= new Date(date
);
1413 var year
= "" + d
.getFullYear();
1414 // Get a 0 padded month string
1415 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1416 // Get a 0 padded day string
1417 var day
= zeropad(d
.getDate());
1420 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1421 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1423 return year
+ "/" + month + "/" + day
+ ret
;
1427 * Round a number to the specified number of digits past the decimal point.
1428 * @param {Number} num The number to round
1429 * @param {Number} places The number of decimals to which to round
1430 * @return {Number} The rounded number
1433 Dygraph
.round_
= function(num
, places
) {
1434 var shift
= Math
.pow(10, places
);
1435 return Math
.round(num
* shift
)/shift
;
1439 * Fires when there's data available to be graphed.
1440 * @param {String} data Raw CSV data to be plotted
1443 Dygraph
.prototype.loadedEvent_
= function(data
) {
1444 this.rawData_
= this.parseCSV_(data
);
1448 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1449 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1450 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1453 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1456 Dygraph
.prototype.addXTicks_
= function() {
1457 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1458 var startDate
, endDate
;
1459 if (this.dateWindow_
) {
1460 startDate
= this.dateWindow_
[0];
1461 endDate
= this.dateWindow_
[1];
1463 startDate
= this.rawData_
[0][0];
1464 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1467 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1468 this.layout_
.updateOptions({xTicks
: xTicks
});
1471 // Time granularity enumeration
1472 Dygraph
.SECONDLY
= 0;
1473 Dygraph
.TWO_SECONDLY
= 1;
1474 Dygraph
.FIVE_SECONDLY
= 2;
1475 Dygraph
.TEN_SECONDLY
= 3;
1476 Dygraph
.THIRTY_SECONDLY
= 4;
1477 Dygraph
.MINUTELY
= 5;
1478 Dygraph
.TWO_MINUTELY
= 6;
1479 Dygraph
.FIVE_MINUTELY
= 7;
1480 Dygraph
.TEN_MINUTELY
= 8;
1481 Dygraph
.THIRTY_MINUTELY
= 9;
1482 Dygraph
.HOURLY
= 10;
1483 Dygraph
.TWO_HOURLY
= 11;
1484 Dygraph
.SIX_HOURLY
= 12;
1486 Dygraph
.WEEKLY
= 14;
1487 Dygraph
.MONTHLY
= 15;
1488 Dygraph
.QUARTERLY
= 16;
1489 Dygraph
.BIANNUAL
= 17;
1490 Dygraph
.ANNUAL
= 18;
1491 Dygraph
.DECADAL
= 19;
1492 Dygraph
.NUM_GRANULARITIES
= 20;
1494 Dygraph
.SHORT_SPACINGS
= [];
1495 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1496 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1497 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1498 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1499 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1500 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1501 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1502 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1503 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1504 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1505 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1506 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1507 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1508 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1509 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1513 // If we used this time granularity, how many ticks would there be?
1514 // This is only an approximation, but it's generally good enough.
1516 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1517 if (granularity
< Dygraph
.MONTHLY
) {
1518 // Generate one tick mark for every fixed interval of time.
1519 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1520 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1522 var year_mod
= 1; // e.g. to only print one point every 10 years.
1523 var num_months
= 12;
1524 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1525 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1526 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1527 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1529 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1530 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1531 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1537 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1538 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1540 // Returns an array containing {v: millis, label: label} dictionaries.
1542 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1543 var formatter
= this.attr_("xAxisLabelFormatter");
1545 if (granularity
< Dygraph
.MONTHLY
) {
1546 // Generate one tick mark for every fixed interval of time.
1547 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1548 var format
= '%d%b'; // e.g. "1Jan"
1550 // Find a time less than start_time which occurs on a "nice" time boundary
1551 // for this granularity.
1552 var g
= spacing
/ 1000;
1553 var d
= new Date(start_time
);
1554 if (g
<= 60) { // seconds
1555 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1559 if (g
<= 60) { // minutes
1560 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1565 if (g
<= 24) { // days
1566 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1571 if (g
== 7) { // one week
1572 d
.setDate(d
.getDate() - d
.getDay());
1577 start_time
= d
.getTime();
1579 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1580 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1583 // Display a tick mark on the first of a set of months of each year.
1584 // Years get a tick mark iff y % year_mod == 0. This is useful for
1585 // displaying a tick mark once every 10 years, say, on long time scales.
1587 var year_mod
= 1; // e.g. to only print one point every 10 years.
1589 if (granularity
== Dygraph
.MONTHLY
) {
1590 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1591 } else if (granularity
== Dygraph
.QUARTERLY
) {
1592 months
= [ 0, 3, 6, 9 ];
1593 } else if (granularity
== Dygraph
.BIANNUAL
) {
1595 } else if (granularity
== Dygraph
.ANNUAL
) {
1597 } else if (granularity
== Dygraph
.DECADAL
) {
1602 var start_year
= new Date(start_time
).getFullYear();
1603 var end_year
= new Date(end_time
).getFullYear();
1604 var zeropad
= Dygraph
.zeropad
;
1605 for (var i
= start_year
; i
<= end_year
; i
++) {
1606 if (i
% year_mod
!= 0) continue;
1607 for (var j
= 0; j
< months
.length
; j
++) {
1608 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1609 var t
= Date
.parse(date_str
);
1610 if (t
< start_time
|| t
> end_time
) continue;
1611 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1621 * Add ticks to the x-axis based on a date range.
1622 * @param {Number} startDate Start of the date window (millis since epoch)
1623 * @param {Number} endDate End of the date window (millis since epoch)
1624 * @return {Array.<Object>} Array of {label, value} tuples.
1627 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1629 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1630 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1631 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1638 return self
.GetXAxis(startDate
, endDate
, chosen
);
1640 // TODO(danvk): signal error.
1645 * Add ticks when the x axis has numbers on it (instead of dates)
1646 * @param {Number} startDate Start of the date window (millis since epoch)
1647 * @param {Number} endDate End of the date window (millis since epoch)
1649 * @param {function} attribute accessor function.
1650 * @return {Array.<Object>} Array of {label, value} tuples.
1653 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1654 var attr
= function(k
) {
1655 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1656 return self
.attr_(k
);
1661 for (var i
= 0; i
< vals
.length
; i
++) {
1662 ticks
.push({v
: vals
[i
]});
1666 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1667 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1668 // The first spacing greater than pixelsPerYLabel is what we use.
1669 // TODO(danvk): version that works on a log scale.
1670 if (attr("labelsKMG2")) {
1671 var mults
= [1, 2, 4, 8];
1673 var mults
= [1, 2, 5];
1675 var scale
, low_val
, high_val
, nTicks
;
1676 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1677 var pixelsPerTick
= attr('pixelsPerYLabel');
1678 for (var i
= -10; i
< 50; i
++) {
1679 if (attr("labelsKMG2")) {
1680 var base_scale
= Math
.pow(16, i
);
1682 var base_scale
= Math
.pow(10, i
);
1684 for (var j
= 0; j
< mults
.length
; j
++) {
1685 scale
= base_scale
* mults
[j
];
1686 low_val
= Math
.floor(minV
/ scale
) * scale
;
1687 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1688 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1689 var spacing
= self
.height_
/ nTicks
;
1690 // wish I could break out of both loops at once...
1691 if (spacing
> pixelsPerTick
) break;
1693 if (spacing
> pixelsPerTick
) break;
1696 // Construct the set of ticks.
1697 // Allow reverse y-axis if it's explicitly requested.
1698 if (low_val
> high_val
) scale
*= -1;
1699 for (var i
= 0; i
< nTicks
; i
++) {
1700 var tickV
= low_val
+ i
* scale
;
1701 ticks
.push( {v
: tickV
} );
1705 // Add formatted labels to the ticks.
1708 if (attr("labelsKMB")) {
1710 k_labels
= [ "K", "M", "B", "T" ];
1712 if (attr("labelsKMG2")) {
1713 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1715 k_labels
= [ "k", "M", "G", "T" ];
1717 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1719 for (var i
= 0; i
< ticks
.length
; i
++) {
1720 var tickV
= ticks
[i
].v
;
1721 var absTickV
= Math
.abs(tickV
);
1723 if (formatter
!= undefined
) {
1724 label
= formatter(tickV
);
1726 label
= Dygraph
.round_(tickV
, 2);
1728 if (k_labels
.length
) {
1729 // Round up to an appropriate unit.
1731 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1732 if (absTickV
>= n
) {
1733 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1738 ticks
[i
].label
= label
;
1743 // Computes the range of the data series (including confidence intervals).
1744 // series is either [ [x1, y1], [x2, y2], ... ] or
1745 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1746 // Returns [low, high]
1747 Dygraph
.prototype.extremeValues_
= function(series
) {
1748 var minY
= null, maxY
= null;
1750 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1752 // With custom bars, maxY is the max of the high values.
1753 for (var j
= 0; j
< series
.length
; j
++) {
1754 var y
= series
[j
][1][0];
1756 var low
= y
- series
[j
][1][1];
1757 var high
= y
+ series
[j
][1][2];
1758 if (low
> y
) low
= y
; // this can happen with custom bars,
1759 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1760 if (maxY
== null || high
> maxY
) {
1763 if (minY
== null || low
< minY
) {
1768 for (var j
= 0; j
< series
.length
; j
++) {
1769 var y
= series
[j
][1];
1770 if (y
=== null || isNaN(y
)) continue;
1771 if (maxY
== null || y
> maxY
) {
1774 if (minY
== null || y
< minY
) {
1780 return [minY
, maxY
];
1784 * This function is called once when the chart's data is changed or the options
1785 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1786 * idea is that values derived from the chart's data can be computed here,
1787 * rather than every time the chart is drawn. This includes things like the
1788 * number of axes, rolling averages, etc.
1790 Dygraph
.prototype.predraw_
= function() {
1791 // TODO(danvk): move more computations out of drawGraph_ and into here.
1792 this.computeYAxes_();
1794 // Create a new plotter.
1795 if (this.plotter_
) this.plotter_
.clear();
1796 this.plotter_
= new DygraphCanvasRenderer(this,
1797 this.hidden_
, this.layout_
,
1798 this.renderOptions_
);
1800 // The roller sits in the bottom left corner of the chart. We don't know where
1801 // this will be until the options are available, so it's positioned here.
1802 this.createRollInterface_();
1804 // Same thing applies for the labelsDiv. It's right edge should be flush with
1805 // the right edge of the charting area (which may not be the same as the right
1806 // edge of the div, if we have two y-axes.
1807 this.positionLabelsDiv_();
1809 // If the data or options have changed, then we'd better redraw.
1815 * Update the graph with new data. This method is called when the viewing area
1816 * has changed. If the underlying data or options have changed, predraw_ will
1817 * be called before drawGraph_ is called.
1820 Dygraph
.prototype.drawGraph_
= function() {
1821 var data
= this.rawData_
;
1823 // This is used to set the second parameter to drawCallback, below.
1824 var is_initial_draw
= this.is_initial_draw_
;
1825 this.is_initial_draw_
= false;
1827 var minY
= null, maxY
= null;
1828 this.layout_
.removeAllDatasets();
1830 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1832 // Loop over the fields (series). Go from the last to the first,
1833 // because if they're stacked that's how we accumulate the values.
1835 var cumulative_y
= []; // For stacked series.
1838 var extremes
= {}; // series name -> [low, high]
1840 // Loop over all fields and create datasets
1841 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1842 if (!this.visibility()[i
- 1]) continue;
1844 var seriesName
= this.attr_("labels")[i
];
1845 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1848 for (var j
= 0; j
< data
.length
; j
++) {
1849 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1850 var date
= data
[j
][0];
1851 series
.push([date
, data
[j
][i
]]);
1855 // TODO(danvk): move this into predraw_. It's insane to do it here.
1856 series
= this.rollingAverage(series
, this.rollPeriod_
);
1858 // Prune down to the desired range, if necessary (for zooming)
1859 // Because there can be lines going to points outside of the visible area,
1860 // we actually prune to visible points, plus one on either side.
1861 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1862 if (this.dateWindow_
) {
1863 var low
= this.dateWindow_
[0];
1864 var high
= this.dateWindow_
[1];
1866 // TODO(danvk): do binary search instead of linear search.
1867 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1868 var firstIdx
= null, lastIdx
= null;
1869 for (var k
= 0; k
< series
.length
; k
++) {
1870 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1873 if (series
[k
][0] <= high
) {
1877 if (firstIdx
=== null) firstIdx
= 0;
1878 if (firstIdx
> 0) firstIdx
--;
1879 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1880 if (lastIdx
< series
.length
- 1) lastIdx
++;
1881 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1882 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1883 pruned
.push(series
[k
]);
1887 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1890 var seriesExtremes
= this.extremeValues_(series
);
1893 for (var j
=0; j
<series
.length
; j
++) {
1894 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1897 } else if (this.attr_("stackedGraph")) {
1898 var l
= series
.length
;
1900 for (var j
= 0; j
< l
; j
++) {
1901 // If one data set has a NaN, let all subsequent stacked
1902 // sets inherit the NaN -- only start at 0 for the first set.
1903 var x
= series
[j
][0];
1904 if (cumulative_y
[x
] === undefined
) {
1905 cumulative_y
[x
] = 0;
1908 actual_y
= series
[j
][1];
1909 cumulative_y
[x
] += actual_y
;
1911 series
[j
] = [x
, cumulative_y
[x
]]
1913 if (cumulative_y
[x
] > seriesExtremes
[1]) {
1914 seriesExtremes
[1] = cumulative_y
[x
];
1916 if (cumulative_y
[x
] < seriesExtremes
[0]) {
1917 seriesExtremes
[0] = cumulative_y
[x
];
1921 extremes
[seriesName
] = seriesExtremes
;
1923 datasets
[i
] = series
;
1926 for (var i
= 1; i
< datasets
.length
; i
++) {
1927 if (!this.visibility()[i
- 1]) continue;
1928 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1931 // TODO(danvk): this method doesn't need to return anything.
1932 var out
= this.computeYAxisRanges_(extremes
);
1934 var seriesToAxisMap
= out
[1];
1935 this.layout_
.updateOptions( { yAxes
: axes
,
1936 seriesToAxisMap
: seriesToAxisMap
1941 // Tell PlotKit to use this new data and render itself
1942 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1943 this.layout_
.evaluateWithError();
1944 this.plotter_
.clear();
1945 this.plotter_
.render();
1946 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1947 this.canvas_
.height
);
1949 if (this.attr_("drawCallback") !== null) {
1950 this.attr_("drawCallback")(this, is_initial_draw
);
1955 * Determine properties of the y-axes which are independent of the data
1956 * currently being displayed. This includes things like the number of axes and
1957 * the style of the axes. It does not include the range of each axis and its
1959 * This fills in this.axes_ and this.seriesToAxisMap_.
1960 * axes_ = [ { options } ]
1961 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
1962 * indices are into the axes_ array.
1964 Dygraph
.prototype.computeYAxes_
= function() {
1965 this.axes_
= [{}]; // always have at least one y-axis.
1966 this.seriesToAxisMap_
= {};
1968 // Get a list of series names.
1969 var labels
= this.attr_("labels");
1971 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
1973 // all options which could be applied per-axis:
1981 'axisLabelFontSize',
1985 // Copy global axis options over to the first axis.
1986 for (var i
= 0; i
< axisOptions
.length
; i
++) {
1987 var k
= axisOptions
[i
];
1988 var v
= this.attr_(k
);
1989 if (v
) this.axes_
[0][k
] = v
;
1992 // Go through once and add all the axes.
1993 for (var seriesName
in series
) {
1994 if (!series
.hasOwnProperty(seriesName
)) continue;
1995 var axis
= this.attr_("axis", seriesName
);
1997 this.seriesToAxisMap_
[seriesName
] = 0;
2000 if (typeof(axis
) == 'object') {
2001 // Add a new axis, making a copy of its per-axis options.
2003 Dygraph
.update(opts
, this.axes_
[0]);
2004 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2005 Dygraph
.update(opts
, axis
);
2006 this.axes_
.push(opts
);
2007 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2011 // Go through one more time and assign series to an axis defined by another
2012 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2013 for (var seriesName
in series
) {
2014 if (!series
.hasOwnProperty(seriesName
)) continue;
2015 var axis
= this.attr_("axis", seriesName
);
2016 if (typeof(axis
) == 'string') {
2017 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2018 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2019 "series " + axis
+ ", which does not define its own axis.");
2022 var idx
= this.seriesToAxisMap_
[axis
];
2023 this.seriesToAxisMap_
[seriesName
] = idx
;
2027 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2028 // this last so that hiding the first series doesn't destroy the axis
2029 // properties of the primary axis.
2030 var seriesToAxisFiltered
= {};
2031 var vis
= this.visibility();
2032 for (var i
= 1; i
< labels
.length
; i
++) {
2034 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2036 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2040 * Returns the number of y-axes on the chart.
2041 * @return {Number} the number of axes.
2043 Dygraph
.prototype.numAxes
= function() {
2045 for (var series
in this.seriesToAxisMap_
) {
2046 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2047 var idx
= this.seriesToAxisMap_
[series
];
2048 if (idx
> last_axis
) last_axis
= idx
;
2050 return 1 + last_axis
;
2054 * Determine the value range and tick marks for each axis.
2055 * @param {Object} extremes A mapping from seriesName -> [low, high]
2056 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2058 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2059 // Build a map from axis number -> [list of series names]
2060 var seriesForAxis
= [];
2061 for (var series
in this.seriesToAxisMap_
) {
2062 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2063 var idx
= this.seriesToAxisMap_
[series
];
2064 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2065 seriesForAxis
[idx
].push(series
);
2068 // Compute extreme values, a span and tick marks for each axis.
2069 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2070 var axis
= this.axes_
[i
];
2071 if (axis
.valueWindow
) {
2072 // This is only set if the user has zoomed on the y-axis. It is never set
2073 // by a user. It takes precedence over axis.valueRange because, if you set
2074 // valueRange, you'd still expect to be able to pan.
2075 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2076 } else if (axis
.valueRange
) {
2077 // This is a user-set value range for this axis.
2078 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2080 // Calculate the extremes of extremes.
2081 var series
= seriesForAxis
[i
];
2082 var minY
= Infinity
; // extremes[series[0]][0];
2083 var maxY
= -Infinity
; // extremes[series[0]][1];
2084 for (var j
= 0; j
< series
.length
; j
++) {
2085 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2086 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2088 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2090 // Add some padding and round up to an integer to be human-friendly.
2091 var span
= maxY
- minY
;
2092 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2093 if (span
== 0) { span
= maxY
; }
2094 var maxAxisY
= maxY
+ 0.1 * span
;
2095 var minAxisY
= minY
- 0.1 * span
;
2097 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2098 if (!this.attr_("avoidMinZero")) {
2099 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2100 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2103 if (this.attr_("includeZero")) {
2104 if (maxY
< 0) maxAxisY
= 0;
2105 if (minY
> 0) minAxisY
= 0;
2108 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2111 // Add ticks. By default, all axes inherit the tick positions of the
2112 // primary axis. However, if an axis is specifically marked as having
2113 // independent ticks, then that is permissible as well.
2114 if (i
== 0 || axis
.independentTicks
) {
2116 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2117 axis
.computedValueRange
[1],
2121 var p_axis
= this.axes_
[0];
2122 var p_ticks
= p_axis
.ticks
;
2123 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2124 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2125 var tick_values
= [];
2126 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2127 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2128 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2129 tick_values
.push(y_val
);
2133 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2134 axis
.computedValueRange
[1],
2135 this, axis
, tick_values
);
2139 return [this.axes_
, this.seriesToAxisMap_
];
2143 * Calculates the rolling average of a data set.
2144 * If originalData is [label, val], rolls the average of those.
2145 * If originalData is [label, [, it's interpreted as [value, stddev]
2146 * and the roll is returned in the same form, with appropriately reduced
2147 * stddev for each value.
2148 * Note that this is where fractional input (i.e. '5/10') is converted into
2150 * @param {Array} originalData The data in the appropriate format (see above)
2151 * @param {Number} rollPeriod The number of days over which to average the data
2153 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2154 if (originalData
.length
< 2)
2155 return originalData
;
2156 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2157 var rollingData
= [];
2158 var sigma
= this.attr_("sigma");
2160 if (this.fractions_
) {
2162 var den
= 0; // numerator/denominator
2164 for (var i
= 0; i
< originalData
.length
; i
++) {
2165 num
+= originalData
[i
][1][0];
2166 den
+= originalData
[i
][1][1];
2167 if (i
- rollPeriod
>= 0) {
2168 num
-= originalData
[i
- rollPeriod
][1][0];
2169 den
-= originalData
[i
- rollPeriod
][1][1];
2172 var date
= originalData
[i
][0];
2173 var value
= den
? num
/ den
: 0.0;
2174 if (this.attr_("errorBars")) {
2175 if (this.wilsonInterval_
) {
2176 // For more details on this confidence interval, see:
2177 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2179 var p
= value
< 0 ? 0 : value
, n
= den
;
2180 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2181 var denom
= 1 + sigma
* sigma
/ den
;
2182 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2183 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2184 rollingData
[i
] = [date
,
2185 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2187 rollingData
[i
] = [date
, [0, 0, 0]];
2190 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2191 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2194 rollingData
[i
] = [date
, mult
* value
];
2197 } else if (this.attr_("customBars")) {
2202 for (var i
= 0; i
< originalData
.length
; i
++) {
2203 var data
= originalData
[i
][1];
2205 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2207 if (y
!= null && !isNaN(y
)) {
2213 if (i
- rollPeriod
>= 0) {
2214 var prev
= originalData
[i
- rollPeriod
];
2215 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2222 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2223 1.0 * (mid
- low
) / count
,
2224 1.0 * (high
- mid
) / count
]];
2227 // Calculate the rolling average for the first rollPeriod - 1 points where
2228 // there is not enough data to roll over the full number of days
2229 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2230 if (!this.attr_("errorBars")){
2231 if (rollPeriod
== 1) {
2232 return originalData
;
2235 for (var i
= 0; i
< originalData
.length
; i
++) {
2238 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2239 var y
= originalData
[j
][1];
2240 if (y
== null || isNaN(y
)) continue;
2242 sum
+= originalData
[j
][1];
2245 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2247 rollingData
[i
] = [originalData
[i
][0], null];
2252 for (var i
= 0; i
< originalData
.length
; i
++) {
2256 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2257 var y
= originalData
[j
][1][0];
2258 if (y
== null || isNaN(y
)) continue;
2260 sum
+= originalData
[j
][1][0];
2261 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2264 var stddev
= Math
.sqrt(variance
) / num_ok
;
2265 rollingData
[i
] = [originalData
[i
][0],
2266 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2268 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2278 * Parses a date, returning the number of milliseconds since epoch. This can be
2279 * passed in as an xValueParser in the Dygraph constructor.
2280 * TODO(danvk): enumerate formats that this understands.
2281 * @param {String} A date in YYYYMMDD format.
2282 * @return {Number} Milliseconds since epoch.
2285 Dygraph
.dateParser
= function(dateStr
, self
) {
2288 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2289 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2290 while (dateStrSlashed
.search("-") != -1) {
2291 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2293 d
= Date
.parse(dateStrSlashed
);
2294 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2295 // TODO(danvk): remove support for this format. It's confusing.
2296 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2297 + "/" + dateStr
.substr(6,2);
2298 d
= Date
.parse(dateStrSlashed
);
2300 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2301 // "2009/07/12 12:34:56"
2302 d
= Date
.parse(dateStr
);
2305 if (!d
|| isNaN(d
)) {
2306 self
.error("Couldn't parse " + dateStr
+ " as a date");
2312 * Detects the type of the str (date or numeric) and sets the various
2313 * formatting attributes in this.attrs_ based on this type.
2314 * @param {String} str An x value.
2317 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2319 if (str
.indexOf('-') >= 0 ||
2320 str
.indexOf('/') >= 0 ||
2321 isNaN(parseFloat(str
))) {
2323 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2324 // TODO(danvk): remove support for this format.
2329 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2330 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2331 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2332 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2334 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2335 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2336 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2337 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2342 * Parses a string in a special csv format. We expect a csv file where each
2343 * line is a date point, and the first field in each line is the date string.
2344 * We also expect that all remaining fields represent series.
2345 * if the errorBars attribute is set, then interpret the fields as:
2346 * date, series1, stddev1, series2, stddev2, ...
2347 * @param {Array.<Object>} data See above.
2350 * @return Array.<Object> An array with one entry for each row. These entries
2351 * are an array of cells in that row. The first entry is the parsed x-value for
2352 * the row. The second, third, etc. are the y-values. These can take on one of
2353 * three forms, depending on the CSV and constructor parameters:
2355 * 2. [ value, stddev ]
2356 * 3. [ low value, center value, high value ]
2358 Dygraph
.prototype.parseCSV_
= function(data
) {
2360 var lines
= data
.split("\n");
2362 // Use the default delimiter or fall back to a tab if that makes sense.
2363 var delim
= this.attr_('delimiter');
2364 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2369 if (this.labelsFromCSV_
) {
2371 this.attrs_
.labels
= lines
[0].split(delim
);
2374 // Parse the x as a float or return null if it's not a number.
2375 var parseFloatOrNull
= function(x
) {
2376 var val
= parseFloat(x
);
2377 return isNaN(val
) ? null : val
;
2381 var defaultParserSet
= false; // attempt to auto-detect x value type
2382 var expectedCols
= this.attr_("labels").length
;
2383 var outOfOrder
= false;
2384 for (var i
= start
; i
< lines
.length
; i
++) {
2385 var line
= lines
[i
];
2386 if (line
.length
== 0) continue; // skip blank lines
2387 if (line
[0] == '#') continue; // skip comment lines
2388 var inFields
= line
.split(delim
);
2389 if (inFields
.length
< 2) continue;
2392 if (!defaultParserSet
) {
2393 this.detectTypeFromString_(inFields
[0]);
2394 xParser
= this.attr_("xValueParser");
2395 defaultParserSet
= true;
2397 fields
[0] = xParser(inFields
[0], this);
2399 // If fractions are expected, parse the numbers as "A/B
"
2400 if (this.fractions_) {
2401 for (var j = 1; j < inFields.length; j++) {
2402 // TODO(danvk): figure out an appropriate way to flag parse errors.
2403 var vals = inFields[j].split("/");
2404 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2406 } else if (this.attr_("errorBars
")) {
2407 // If there are error bars, values are (value, stddev) pairs
2408 for (var j = 1; j < inFields.length; j += 2)
2409 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2410 parseFloatOrNull(inFields[j + 1])];
2411 } else if (this.attr_("customBars
")) {
2412 // Bars are a low;center;high tuple
2413 for (var j = 1; j < inFields.length; j++) {
2414 var vals = inFields[j].split(";");
2415 fields[j] = [ parseFloatOrNull(vals[0]),
2416 parseFloatOrNull(vals[1]),
2417 parseFloatOrNull(vals[2]) ];
2420 // Values are just numbers
2421 for (var j = 1; j < inFields.length; j++) {
2422 fields[j] = parseFloatOrNull(inFields[j]);
2425 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2430 if (fields.length != expectedCols) {
2431 this.error("Number of columns
in line
" + i + " (" + fields.length +
2432 ") does not agree
with number of
labels (" + expectedCols +
2438 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2439 ret.sort(function(a,b) { return a[0] - b[0] });
2446 * The user has provided their data as a pre-packaged JS array. If the x values
2447 * are numeric, this is the same as dygraphs' internal format. If the x values
2448 * are dates, we need to convert them from Date objects to ms since epoch.
2449 * @param {Array.<Object>} data
2450 * @return {Array.<Object>} data with numeric x values.
2452 Dygraph.prototype.parseArray_ = function(data) {
2453 // Peek at the first x value to see if it's numeric.
2454 if (data.length == 0) {
2455 this.error("Can
't plot empty data set");
2458 if (data[0].length == 0) {
2459 this.error("Data set cannot contain an empty row");
2463 if (this.attr_("labels") == null) {
2464 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2465 "in the options parameter");
2466 this.attrs_.labels = [ "X" ];
2467 for (var i = 1; i < data[0].length; i++) {
2468 this.attrs_.labels.push("Y" + i);
2472 if (Dygraph.isDateLike(data[0][0])) {
2473 // Some intelligent defaults for a date x-axis.
2474 this.attrs_.xValueFormatter = Dygraph.dateString_;
2475 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2476 this.attrs_.xTicker = Dygraph.dateTicker;
2478 // Assume they're all dates
.
2479 var parsedData
= Dygraph
.clone(data
);
2480 for (var i
= 0; i
< data
.length
; i
++) {
2481 if (parsedData
[i
].length
== 0) {
2482 this.error("Row " + (1 + i
) + " of data is empty");
2485 if (parsedData
[i
][0] == null
2486 || typeof(parsedData
[i
][0].getTime
) != 'function'
2487 || isNaN(parsedData
[i
][0].getTime())) {
2488 this.error("x value in row " + (1 + i
) + " is not a Date");
2491 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2495 // Some intelligent defaults for a numeric x-axis.
2496 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2497 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2503 * Parses a DataTable object from gviz.
2504 * The data is expected to have a first column that is either a date or a
2505 * number. All subsequent columns must be numbers. If there is a clear mismatch
2506 * between this.xValueParser_ and the type of the first column, it will be
2507 * fixed. Fills out rawData_.
2508 * @param {Array.<Object>} data See above.
2511 Dygraph
.prototype.parseDataTable_
= function(data
) {
2512 var cols
= data
.getNumberOfColumns();
2513 var rows
= data
.getNumberOfRows();
2515 var indepType
= data
.getColumnType(0);
2516 if (indepType
== 'date' || indepType
== 'datetime') {
2517 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2518 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2519 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2520 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2521 } else if (indepType
== 'number') {
2522 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2523 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2524 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2525 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2527 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2528 "column 1 of DataTable input (Got '" + indepType
+ "')");
2532 // Array of the column indices which contain data (and not annotations).
2534 var annotationCols
= {}; // data index -> [annotation cols]
2535 var hasAnnotations
= false;
2536 for (var i
= 1; i
< cols
; i
++) {
2537 var type
= data
.getColumnType(i
);
2538 if (type
== 'number') {
2540 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2541 // This is OK -- it's an annotation column.
2542 var dataIdx
= colIdx
[colIdx
.length
- 1];
2543 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2544 annotationCols
[dataIdx
] = [i
];
2546 annotationCols
[dataIdx
].push(i
);
2548 hasAnnotations
= true;
2550 this.error("Only 'number' is supported as a dependent type with Gviz." +
2551 " 'string' is only supported if displayAnnotations is true");
2555 // Read column labels
2556 // TODO(danvk): add support back for errorBars
2557 var labels
= [data
.getColumnLabel(0)];
2558 for (var i
= 0; i
< colIdx
.length
; i
++) {
2559 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2560 if (this.attr_("errorBars")) i
+= 1;
2562 this.attrs_
.labels
= labels
;
2563 cols
= labels
.length
;
2566 var outOfOrder
= false;
2567 var annotations
= [];
2568 for (var i
= 0; i
< rows
; i
++) {
2570 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2571 data
.getValue(i
, 0) === null) {
2572 this.warn("Ignoring row " + i
+
2573 " of DataTable because of undefined or null first column.");
2577 if (indepType
== 'date' || indepType
== 'datetime') {
2578 row
.push(data
.getValue(i
, 0).getTime());
2580 row
.push(data
.getValue(i
, 0));
2582 if (!this.attr_("errorBars")) {
2583 for (var j
= 0; j
< colIdx
.length
; j
++) {
2584 var col
= colIdx
[j
];
2585 row
.push(data
.getValue(i
, col
));
2586 if (hasAnnotations
&&
2587 annotationCols
.hasOwnProperty(col
) &&
2588 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2590 ann
.series
= data
.getColumnLabel(col
);
2592 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2594 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2595 if (k
) ann
.text
+= "\n";
2596 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2598 annotations
.push(ann
);
2602 for (var j
= 0; j
< cols
- 1; j
++) {
2603 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2606 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2613 this.warn("DataTable is out of order; order it correctly to speed loading.");
2614 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2616 this.rawData_
= ret
;
2618 if (annotations
.length
> 0) {
2619 this.setAnnotations(annotations
, true);
2623 // These functions are all based on MochiKit.
2624 Dygraph
.update
= function (self
, o
) {
2625 if (typeof(o
) != 'undefined' && o
!== null) {
2627 if (o
.hasOwnProperty(k
)) {
2635 Dygraph
.isArrayLike
= function (o
) {
2636 var typ
= typeof(o
);
2638 (typ
!= 'object' && !(typ
== 'function' &&
2639 typeof(o
.item
) == 'function')) ||
2641 typeof(o
.length
) != 'number' ||
2649 Dygraph
.isDateLike
= function (o
) {
2650 if (typeof(o
) != "object" || o
=== null ||
2651 typeof(o
.getTime
) != 'function') {
2657 Dygraph
.clone
= function(o
) {
2658 // TODO(danvk): figure out how MochiKit's version works
2660 for (var i
= 0; i
< o
.length
; i
++) {
2661 if (Dygraph
.isArrayLike(o
[i
])) {
2662 r
.push(Dygraph
.clone(o
[i
]));
2672 * Get the CSV data. If it's in a function, call that function. If it's in a
2673 * file, do an XMLHttpRequest to get it.
2676 Dygraph
.prototype.start_
= function() {
2677 if (typeof this.file_
== 'function') {
2678 // CSV string. Pretend we got it via XHR.
2679 this.loadedEvent_(this.file_());
2680 } else if (Dygraph
.isArrayLike(this.file_
)) {
2681 this.rawData_
= this.parseArray_(this.file_
);
2683 } else if (typeof this.file_
== 'object' &&
2684 typeof this.file_
.getColumnRange
== 'function') {
2685 // must be a DataTable from gviz.
2686 this.parseDataTable_(this.file_
);
2688 } else if (typeof this.file_
== 'string') {
2689 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2690 if (this.file_
.indexOf('\n') >= 0) {
2691 this.loadedEvent_(this.file_
);
2693 var req
= new XMLHttpRequest();
2695 req
.onreadystatechange
= function () {
2696 if (req
.readyState
== 4) {
2697 if (req
.status
== 200) {
2698 caller
.loadedEvent_(req
.responseText
);
2703 req
.open("GET", this.file_
, true);
2707 this.error("Unknown data format: " + (typeof this.file_
));
2712 * Changes various properties of the graph. These can include:
2714 * <li>file: changes the source data for the graph</li>
2715 * <li>errorBars: changes whether the data contains stddev</li>
2717 * @param {Object} attrs The new properties and values
2719 Dygraph
.prototype.updateOptions
= function(attrs
) {
2720 // TODO(danvk): this is a mess. Rethink this function.
2721 if ('rollPeriod' in attrs
) {
2722 this.rollPeriod_
= attrs
.rollPeriod
;
2724 if ('dateWindow' in attrs
) {
2725 this.dateWindow_
= attrs
.dateWindow
;
2728 // TODO(danvk): validate per-series options.
2733 // highlightCircleSize
2735 Dygraph
.update(this.user_attrs_
, attrs
);
2736 Dygraph
.update(this.renderOptions_
, attrs
);
2738 this.labelsFromCSV_
= (this.attr_("labels") == null);
2740 // TODO(danvk): this doesn't match the constructor logic
2741 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2742 if (attrs
['file']) {
2743 this.file_
= attrs
['file'];
2751 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2752 * containing div (which has presumably changed size since the dygraph was
2753 * instantiated. If the width/height are specified, the div will be resized.
2755 * This is far more efficient than destroying and re-instantiating a
2756 * Dygraph, since it doesn't have to reparse the underlying data.
2758 * @param {Number} width Width (in pixels)
2759 * @param {Number} height Height (in pixels)
2761 Dygraph
.prototype.resize
= function(width
, height
) {
2762 if (this.resize_lock
) {
2765 this.resize_lock
= true;
2767 if ((width
=== null) != (height
=== null)) {
2768 this.warn("Dygraph.resize() should be called with zero parameters or " +
2769 "two non-NULL parameters. Pretending it was zero.");
2770 width
= height
= null;
2773 // TODO(danvk): there should be a clear() method.
2774 this.maindiv_
.innerHTML
= "";
2775 this.attrs_
.labelsDiv
= null;
2778 this.maindiv_
.style
.width
= width
+ "px";
2779 this.maindiv_
.style
.height
= height
+ "px";
2780 this.width_
= width
;
2781 this.height_
= height
;
2783 this.width_
= this.maindiv_
.offsetWidth
;
2784 this.height_
= this.maindiv_
.offsetHeight
;
2787 this.createInterface_();
2790 this.resize_lock
= false;
2794 * Adjusts the number of days in the rolling average. Updates the graph to
2795 * reflect the new averaging period.
2796 * @param {Number} length Number of days over which to average the data.
2798 Dygraph
.prototype.adjustRoll
= function(length
) {
2799 this.rollPeriod_
= length
;
2804 * Returns a boolean array of visibility statuses.
2806 Dygraph
.prototype.visibility
= function() {
2807 // Do lazy-initialization, so that this happens after we know the number of
2809 if (!this.attr_("visibility")) {
2810 this.attrs_
["visibility"] = [];
2812 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2813 this.attr_("visibility").push(true);
2815 return this.attr_("visibility");
2819 * Changes the visiblity of a series.
2821 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2822 var x
= this.visibility();
2823 if (num
< 0 || num
>= x
.length
) {
2824 this.warn("invalid series number in setVisibility: " + num
);
2832 * Update the list of annotations and redraw the chart.
2834 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2835 // Only add the annotation CSS rule once we know it will be used.
2836 Dygraph
.addAnnotationRule();
2837 this.annotations_
= ann
;
2838 this.layout_
.setAnnotations(this.annotations_
);
2839 if (!suppressDraw
) {
2845 * Return the list of annotations.
2847 Dygraph
.prototype.annotations
= function() {
2848 return this.annotations_
;
2852 * Get the index of a series (column) given its name. The first column is the
2853 * x-axis, so the data series start with index 1.
2855 Dygraph
.prototype.indexFromSetName
= function(name
) {
2856 var labels
= this.attr_("labels");
2857 for (var i
= 0; i
< labels
.length
; i
++) {
2858 if (labels
[i
] == name
) return i
;
2863 Dygraph
.addAnnotationRule
= function() {
2864 if (Dygraph
.addedAnnotationCSS
) return;
2867 if (document
.styleSheets
.length
> 0) {
2868 mysheet
= document
.styleSheets
[0];
2870 var styleSheetElement
= document
.createElement("style");
2871 styleSheetElement
.type
= "text/css";
2872 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2873 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2874 if (document
.styleSheets
[i
].disabled
) continue;
2875 mysheet
= document
.styleSheets
[i
];
2879 var rule
= "border: 1px solid black; " +
2880 "background-color: white; " +
2881 "text-align: center;";
2882 if (mysheet
.insertRule
) { // Firefox
2883 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2884 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2885 } else if (mysheet
.addRule
) { // IE
2886 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2889 Dygraph
.addedAnnotationCSS
= true;
2893 * Create a new canvas element. This is more complex than a simple
2894 * document.createElement("canvas") because of IE and excanvas.
2896 Dygraph
.createCanvas
= function() {
2897 var canvas
= document
.createElement("canvas");
2899 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2900 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2901 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2909 * A wrapper around Dygraph that implements the gviz API.
2910 * @param {Object} container The DOM object the visualization should live in.
2912 Dygraph
.GVizChart
= function(container
) {
2913 this.container
= container
;
2916 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2917 this.container
.innerHTML
= '';
2918 this.date_graph
= new Dygraph(this.container
, data
, options
);
2922 * Google charts compatible setSelection
2923 * Only row selection is supported, all points in the row will be highlighted
2924 * @param {Array} array of the selected cells
2927 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2929 if (selection_array
.length
) {
2930 row
= selection_array
[0].row
;
2932 this.date_graph
.setSelection(row
);
2936 * Google charts compatible getSelection implementation
2937 * @return {Array} array of the selected cells
2940 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2943 var row
= this.date_graph
.getSelection();
2945 if (row
< 0) return selection
;
2948 for (var i
in this.date_graph
.layout_
.datasets
) {
2949 selection
.push({row
: row
, column
: col
});
2956 // Older pages may still use this name.
2957 DateGraph
= Dygraph
;