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. This can be affected by zooming,
316 * panning or a call to updateOptions.
317 * Returns a two-element array: [bottom, top].
319 Dygraph
.prototype.yAxisRange
= function() {
320 return this.displayedYRange_
;
324 * Convert from data coordinates to canvas/div X/Y coordinates.
325 * Returns a two-element array: [X, Y]
327 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
328 var ret
= [null, null];
329 var area
= this.plotter_
.area
;
331 var xRange
= this.xAxisRange();
332 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
336 var yRange
= this.yAxisRange();
337 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
343 // TODO(danvk): use these functions throughout dygraphs.
345 * Convert from canvas/div coords to data coordinates.
346 * Returns a two-element array: [X, Y]
348 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
349 var ret
= [null, null];
350 var area
= this.plotter_
.area
;
352 var xRange
= this.xAxisRange();
353 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
357 var yRange
= this.yAxisRange();
358 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
365 * Returns the number of columns (including the independent variable).
367 Dygraph
.prototype.numColumns
= function() {
368 return this.rawData_
[0].length
;
372 * Returns the number of rows (excluding any header/label row).
374 Dygraph
.prototype.numRows
= function() {
375 return this.rawData_
.length
;
379 * Returns the value in the given row and column. If the row and column exceed
380 * the bounds on the data, returns null. Also returns null if the value is
383 Dygraph
.prototype.getValue
= function(row
, col
) {
384 if (row
< 0 || row
> this.rawData_
.length
) return null;
385 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
387 return this.rawData_
[row
][col
];
390 Dygraph
.addEvent
= function(el
, evt
, fn
) {
391 var normed_fn
= function(e
) {
392 if (!e
) var e
= window
.event
;
395 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
396 el
.addEventListener(evt
, normed_fn
, false);
398 el
.attachEvent('on' + evt
, normed_fn
);
403 * Generates interface elements for the Dygraph: a containing div, a div to
404 * display the current point, and a textbox to adjust the rolling average
405 * period. Also creates the Renderer/Layout elements.
408 Dygraph
.prototype.createInterface_
= function() {
409 // Create the all-enclosing graph div
410 var enclosing
= this.maindiv_
;
412 this.graphDiv
= document
.createElement("div");
413 this.graphDiv
.style
.width
= this.width_
+ "px";
414 this.graphDiv
.style
.height
= this.height_
+ "px";
415 enclosing
.appendChild(this.graphDiv
);
417 // Create the canvas for interactive parts of the chart.
418 this.canvas_
= Dygraph
.createCanvas();
419 this.canvas_
.style
.position
= "absolute";
420 this.canvas_
.width
= this.width_
;
421 this.canvas_
.height
= this.height_
;
422 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
423 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
425 // ... and for static parts of the chart.
426 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
428 // The interactive parts of the graph are drawn on top of the chart.
429 this.graphDiv
.appendChild(this.hidden_
);
430 this.graphDiv
.appendChild(this.canvas_
);
431 this.mouseEventElement_
= this.canvas_
;
434 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
435 dygraph
.mouseMove_(e
);
437 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
438 dygraph
.mouseOut_(e
);
441 // Create the grapher
442 // TODO(danvk): why does the Layout need its own set of options?
443 this.layoutOptions_
= { 'xOriginIsZero': false };
444 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
445 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
446 Dygraph
.update(this.layoutOptions_
, {
447 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
449 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
451 // TODO(danvk): why does the Renderer need its own set of options?
452 this.renderOptions_
= { colorScheme
: this.colors_
,
454 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
455 Dygraph
.update(this.renderOptions_
, this.attrs_
);
456 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
458 this.createStatusMessage_();
459 this.createDragInterface_();
463 * Detach DOM elements in the dygraph and null out all data references.
464 * Calling this when you're done with a dygraph can dramatically reduce memory
465 * usage. See, e.g., the tests/perf.html example.
467 Dygraph
.prototype.destroy
= function() {
468 var removeRecursive
= function(node
) {
469 while (node
.hasChildNodes()) {
470 removeRecursive(node
.firstChild
);
471 node
.removeChild(node
.firstChild
);
474 removeRecursive(this.maindiv_
);
476 var nullOut
= function(obj
) {
478 if (typeof(obj
[n
]) === 'object') {
484 // These may not all be necessary, but it can't hurt...
485 nullOut(this.layout_
);
486 nullOut(this.plotter_
);
491 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
492 * this particular canvas. All Dygraph work is done on this.canvas_.
493 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
494 * @return {Object} The newly-created canvas
497 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
498 var h
= Dygraph
.createCanvas();
499 h
.style
.position
= "absolute";
500 // TODO(danvk): h should be offset from canvas. canvas needs to include
501 // some extra area to make it easier to zoom in on the far left and far
502 // right. h needs to be precisely the plot area, so that clipping occurs.
503 h
.style
.top
= canvas
.style
.top
;
504 h
.style
.left
= canvas
.style
.left
;
505 h
.width
= this.width_
;
506 h
.height
= this.height_
;
507 h
.style
.width
= this.width_
+ "px"; // for IE
508 h
.style
.height
= this.height_
+ "px"; // for IE
512 // Taken from MochiKit.Color
513 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
517 if (saturation
=== 0) {
522 var i
= Math
.floor(hue
* 6);
523 var f
= (hue
* 6) - i
;
524 var p
= value
* (1 - saturation
);
525 var q
= value
* (1 - (saturation
* f
));
526 var t
= value
* (1 - (saturation
* (1 - f
)));
528 case 1: red
= q
; green
= value
; blue
= p
; break;
529 case 2: red
= p
; green
= value
; blue
= t
; break;
530 case 3: red
= p
; green
= q
; blue
= value
; break;
531 case 4: red
= t
; green
= p
; blue
= value
; break;
532 case 5: red
= value
; green
= p
; blue
= q
; break;
533 case 6: // fall through
534 case 0: red
= value
; green
= t
; blue
= p
; break;
537 red
= Math
.floor(255 * red
+ 0.5);
538 green
= Math
.floor(255 * green
+ 0.5);
539 blue
= Math
.floor(255 * blue
+ 0.5);
540 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
545 * Generate a set of distinct colors for the data series. This is done with a
546 * color wheel. Saturation/Value are customizable, and the hue is
547 * equally-spaced around the color wheel. If a custom set of colors is
548 * specified, that is used instead.
551 Dygraph
.prototype.setColors_
= function() {
552 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
553 // away with this.renderOptions_.
554 var num
= this.attr_("labels").length
- 1;
556 var colors
= this.attr_('colors');
558 var sat
= this.attr_('colorSaturation') || 1.0;
559 var val
= this.attr_('colorValue') || 0.5;
560 var half
= Math
.ceil(num
/ 2);
561 for (var i
= 1; i
<= num
; i
++) {
562 if (!this.visibility()[i
-1]) continue;
563 // alternate colors for high contrast.
564 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
565 var hue
= (1.0 * idx
/ (1 + num
));
566 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
569 for (var i
= 0; i
< num
; i
++) {
570 if (!this.visibility()[i
]) continue;
571 var colorStr
= colors
[i
% colors
.length
];
572 this.colors_
.push(colorStr
);
576 // TODO(danvk): update this w/r
/t/ the
new options system
.
577 this.renderOptions_
.colorScheme
= this.colors_
;
578 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
579 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
580 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
584 * Return the list of colors. This is either the list of colors passed in the
585 * attributes, or the autogenerated list of rgb(r,g,b) strings.
586 * @return {Array<string>} The list of colors.
588 Dygraph
.prototype.getColors
= function() {
592 // The following functions are from quirksmode.org with a modification for Safari from
593 // http://blog.firetree.net/2005/07/04/javascript-find-position/
594 // http://www.quirksmode.org/js
/findpos
.html
595 Dygraph
.findPosX
= function(obj
) {
600 curleft
+= obj
.offsetLeft
;
601 if(!obj
.offsetParent
)
603 obj
= obj
.offsetParent
;
610 Dygraph
.findPosY
= function(obj
) {
615 curtop
+= obj
.offsetTop
;
616 if(!obj
.offsetParent
)
618 obj
= obj
.offsetParent
;
628 * Create the div that contains information on the selected point(s)
629 * This goes in the top right of the canvas, unless an external div has already
633 Dygraph
.prototype.createStatusMessage_
= function() {
634 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
635 if (userLabelsDiv
&& null != userLabelsDiv
636 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
637 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
639 if (!this.attr_("labelsDiv")) {
640 var divWidth
= this.attr_('labelsDivWidth');
642 "position": "absolute",
645 "width": divWidth
+ "px",
647 "left": (this.width_
- divWidth
- 2) + "px",
648 "background": "white",
650 "overflow": "hidden"};
651 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
652 var div
= document
.createElement("div");
653 for (var name
in messagestyle
) {
654 if (messagestyle
.hasOwnProperty(name
)) {
655 div
.style
[name
] = messagestyle
[name
];
658 this.graphDiv
.appendChild(div
);
659 this.attrs_
.labelsDiv
= div
;
664 * Position the labels div so that its right edge is flush with the right edge
665 * of the charting area.
667 Dygraph
.prototype.positionLabelsDiv_
= function() {
668 // Don't touch a user-specified labelsDiv.
669 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
671 var area
= this.plotter_
.area
;
672 var div
= this.attr_("labelsDiv");
673 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") + "px";
677 * Create the text box to adjust the averaging period
678 * @return {Object} The newly-created text box
681 Dygraph
.prototype.createRollInterface_
= function() {
682 // Destroy any existing roller.
683 if (this.roller_
) this.graphDiv
.removeChild(this.roller_
);
685 var display
= this.attr_('showRoller') ? "block" : "none";
686 var textAttr
= { "position": "absolute",
688 "top": (this.plotter_
.area
.h
- 25) + "px",
689 "left": (this.plotter_
.area
.x
+ 1) + "px",
692 var roller
= document
.createElement("input");
693 roller
.type
= "text";
695 roller
.value
= this.rollPeriod_
;
696 for (var name
in textAttr
) {
697 if (textAttr
.hasOwnProperty(name
)) {
698 roller
.style
[name
] = textAttr
[name
];
702 var pa
= this.graphDiv
;
703 pa
.appendChild(roller
);
705 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
709 // These functions are taken from MochiKit.Signal
710 Dygraph
.pageX
= function(e
) {
712 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
715 var b
= document
.body
;
717 (de
.scrollLeft
|| b
.scrollLeft
) -
718 (de
.clientLeft
|| 0);
722 Dygraph
.pageY
= function(e
) {
724 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
727 var b
= document
.body
;
729 (de
.scrollTop
|| b
.scrollTop
) -
735 * Set up all the mouse handlers needed to capture dragging behavior for zoom
739 Dygraph
.prototype.createDragInterface_
= function() {
742 // Tracks whether the mouse is down right now
743 var isZooming
= false;
744 var isPanning
= false;
745 var dragStartX
= null;
746 var dragStartY
= null;
749 var dragDirection
= null;
752 var prevDragDirection
= null;
754 // draggingDate and draggingValue represent the [date,value] point on the
755 // graph at which the mouse was pressed. As the mouse moves while panning,
756 // the viewport must pan so that the mouse position points to
757 // [draggingDate, draggingValue]
758 var draggingDate
= null;
759 var draggingValue
= null;
761 // The range in second/value units that the viewport encompasses during a
762 // panning operation.
763 var dateRange
= null;
764 var valueRange
= null;
766 // Utility function to convert page-wide coordinates to canvas coords
769 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
770 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
772 // Draw zoom rectangles when the mouse is down and the user moves around
773 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
775 dragEndX
= getX(event
);
776 dragEndY
= getY(event
);
778 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
779 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
781 // drag direction threshold for y axis is twice as large as x axis
782 dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
784 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
785 prevDragDirection
, prevEndX
, prevEndY
);
789 prevDragDirection
= dragDirection
;
790 } else if (isPanning
) {
791 dragEndX
= getX(event
);
792 dragEndY
= getY(event
);
794 // Want to have it so that:
795 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
796 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
797 // 3. draggingValue appears at dragEndY.
798 // 4. valueRange is unaltered.
800 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
801 var maxDate
= minDate
+ dateRange
;
802 self
.dateWindow_
= [minDate
, maxDate
];
807 // y-axis scaling is automatic unless a valueRange is defined or
808 // if the user zooms in on the y-axis. If neither is true, valueWindow_
810 if (self
.valueWindow_
) {
811 var maxValue
= draggingValue
+ (dragEndY
/ self
.height_
) * valueRange
;
812 var minValue
= maxValue
- valueRange
;
813 self
.valueWindow_
= [ minValue
, maxValue
];
821 // Track the beginning of drag events
822 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
823 px
= Dygraph
.findPosX(self
.canvas_
);
824 py
= Dygraph
.findPosY(self
.canvas_
);
825 dragStartX
= getX(event
);
826 dragStartY
= getY(event
);
828 if (event
.altKey
|| event
.shiftKey
) {
829 // have to be zoomed in to pan.
830 if (!self
.dateWindow_
&& !self
.valueWindow_
) return;
833 var xRange
= self
.xAxisRange();
834 dateRange
= xRange
[1] - xRange
[0];
835 var yRange
= self
.yAxisRange();
836 valueRange
= yRange
[1] - yRange
[0];
838 // TODO(konigsberg): Switch from all this math to toDataCoords?
839 // Seems to work for the dragging value.
840 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
842 var r
= self
.toDataCoords(null, dragStartY
);
843 draggingValue
= r
[1];
849 // If the user releases the mouse button during a drag, but not over the
850 // canvas, then it doesn't count as a zooming action.
851 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
852 if (isZooming
|| isPanning
) {
861 draggingValue
= null;
867 // Temporarily cancel the dragging event when the mouse leaves the graph
868 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
875 // If the mouse is released on the canvas during a drag event, then it's a
876 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
877 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
880 dragEndX
= getX(event
);
881 dragEndY
= getY(event
);
882 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
883 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
885 if (regionWidth
< 2 && regionHeight
< 2 &&
886 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
887 // TODO(danvk): pass along more info about the points, e.g. 'x'
888 if (self
.attr_('clickCallback') != null) {
889 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
891 if (self
.attr_('pointClickCallback')) {
892 // check if the click was on a particular point.
894 var closestDistance
= 0;
895 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
896 var p
= self
.selPoints_
[i
];
897 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
898 Math
.pow(p
.canvasy
- dragEndY
, 2);
899 if (closestIdx
== -1 || distance
< closestDistance
) {
900 closestDistance
= distance
;
905 // Allow any click within two pixels of the dot.
906 var radius
= self
.attr_('highlightCircleSize') + 2;
907 if (closestDistance
<= 5 * 5) {
908 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
913 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
914 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
915 Math
.max(dragStartX
, dragEndX
));
916 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
917 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
918 Math
.max(dragStartY
, dragEndY
));
920 self
.canvas_
.getContext("2d").clearRect(0, 0,
922 self
.canvas_
.height
);
932 draggingValue
= null;
938 // Double-clicking zooms back out
939 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
940 // Disable zooming out if panning.
941 if (event
.altKey
|| event
.shiftKey
) return;
948 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
949 * up any previous zoom rectangles that were drawn. This could be optimized to
950 * avoid extra redrawing, but it's tricky to avoid interactions with the status
953 * @param {Number} direction the direction of the zoom rectangle. Acceptable
954 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
955 * @param {Number} startX The X position where the drag started, in canvas
957 * @param {Number} endX The current X position of the drag, in canvas coords.
958 * @param {Number} startY The Y position where the drag started, in canvas
960 * @param {Number} endY The current Y position of the drag, in canvas coords.
961 * @param {Number} prevDirection the value of direction on the previous call to
962 * this function. Used to avoid excess redrawing
963 * @param {Number} prevEndX The value of endX on the previous call to this
964 * function. Used to avoid excess redrawing
965 * @param {Number} prevEndY The value of endY on the previous call to this
966 * function. Used to avoid excess redrawing
969 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
970 prevDirection
, prevEndX
, prevEndY
) {
971 var ctx
= this.canvas_
.getContext("2d");
973 // Clean up from the previous rect if necessary
974 if (prevDirection
== Dygraph
.HORIZONTAL
) {
975 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
976 Math
.abs(startX
- prevEndX
), this.height_
);
977 } else if (prevDirection
== Dygraph
.VERTICAL
){
978 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
979 this.width_
, Math
.abs(startY
- prevEndY
));
982 // Draw a light-grey rectangle to show the new viewing area
983 if (direction
== Dygraph
.HORIZONTAL
) {
984 if (endX
&& startX
) {
985 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
986 ctx
.fillRect(Math
.min(startX
, endX
), 0,
987 Math
.abs(endX
- startX
), this.height_
);
990 if (direction
== Dygraph
.VERTICAL
) {
991 if (endY
&& startY
) {
992 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
993 ctx
.fillRect(0, Math
.min(startY
, endY
),
994 this.width_
, Math
.abs(endY
- startY
));
1000 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1001 * the canvas. The exact zoom window may be slightly larger if there are no data
1002 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1003 * which accepts dates that match the raw data. This function redraws the graph.
1005 * @param {Number} lowX The leftmost pixel value that should be visible.
1006 * @param {Number} highX The rightmost pixel value that should be visible.
1009 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1010 // Find the earliest and latest dates contained in this canvasx range.
1011 // Convert the call to date ranges of the raw data.
1012 var r
= this.toDataCoords(lowX
, null);
1014 r
= this.toDataCoords(highX
, null);
1016 this.doZoomXDates_(minDate
, maxDate
);
1020 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1021 * method with doZoomX which accepts pixel coordinates. This function redraws
1024 * @param {Number} minDate The minimum date that should be visible.
1025 * @param {Number} maxDate The maximum date that should be visible.
1028 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1029 this.dateWindow_
= [minDate
, maxDate
];
1031 if (this.attr_("zoomCallback")) {
1032 var yRange
= this.yAxisRange();
1033 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1038 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1039 * the canvas. The exact zoom window may be slightly larger if there are no
1040 * data points near lowY or highY. Don't confuse this function with
1041 * doZoomYValues, which accepts parameters that match the raw data. This
1042 * function redraws the graph.
1044 * @param {Number} lowY The topmost pixel value that should be visible.
1045 * @param {Number} highY The lowest pixel value that should be visible.
1048 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1049 // Find the highest and lowest values in pixel range.
1050 var r
= this.toDataCoords(null, lowY
);
1051 var maxValue
= r
[1];
1052 r
= this.toDataCoords(null, highY
);
1053 var minValue
= r
[1];
1055 this.doZoomYValues_(minValue
, maxValue
);
1059 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1060 * method with doZoomY which accepts pixel coordinates. This function redraws
1063 * @param {Number} minValue The minimum Value that should be visible.
1064 * @param {Number} maxValue The maximum value that should be visible.
1067 // MERGE: this doesn't make sense anymore.
1068 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1069 this.valueWindow_
= [minValue
, maxValue
];
1071 if (this.attr_("zoomCallback")) {
1072 var xRange
= this.xAxisRange();
1073 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1078 * Reset the zoom to the original view coordinates. This is the same as
1079 * double-clicking on the graph.
1083 Dygraph
.prototype.doUnzoom_
= function() {
1085 if (this.dateWindow_
!= null) {
1087 this.dateWindow_
= null;
1089 if (this.valueWindow_
!= null) {
1091 this.valueWindow_
= this.valueRange_
;
1095 // Putting the drawing operation before the callback because it resets
1098 if (this.attr_("zoomCallback")) {
1099 var minDate
= this.rawData_
[0][0];
1100 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1101 var minValue
= this.yAxisRange()[0];
1102 var maxValue
= this.yAxisRange()[1];
1103 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1109 * When the mouse moves in the canvas, display information about a nearby data
1110 * point and draw dots over those points in the data series. This function
1111 * takes care of cleanup of previously-drawn dots.
1112 * @param {Object} event The mousemove event from the browser.
1115 Dygraph
.prototype.mouseMove_
= function(event
) {
1116 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1117 var points
= this.layout_
.points
;
1122 // Loop through all the points and find the date nearest to our current
1124 var minDist
= 1e+100;
1126 for (var i
= 0; i
< points
.length
; i
++) {
1127 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1128 if (dist
> minDist
) continue;
1132 if (idx
>= 0) lastx
= points
[idx
].xval
;
1133 // Check that you can really highlight the last day's data
1134 if (canvasx
> points
[points
.length
-1].canvasx
)
1135 lastx
= points
[points
.length
-1].xval
;
1137 // Extract the points we've selected
1138 this.selPoints_
= [];
1139 var l
= points
.length
;
1140 if (!this.attr_("stackedGraph")) {
1141 for (var i
= 0; i
< l
; i
++) {
1142 if (points
[i
].xval
== lastx
) {
1143 this.selPoints_
.push(points
[i
]);
1147 // Need to 'unstack' points starting from the bottom
1148 var cumulative_sum
= 0;
1149 for (var i
= l
- 1; i
>= 0; i
--) {
1150 if (points
[i
].xval
== lastx
) {
1151 var p
= {}; // Clone the point since we modify it
1152 for (var k
in points
[i
]) {
1153 p
[k
] = points
[i
][k
];
1155 p
.yval
-= cumulative_sum
;
1156 cumulative_sum
+= p
.yval
;
1157 this.selPoints_
.push(p
);
1160 this.selPoints_
.reverse();
1163 if (this.attr_("highlightCallback")) {
1164 var px
= this.lastx_
;
1165 if (px
!== null && lastx
!= px
) {
1166 // only fire if the selected point has changed.
1167 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1171 // Save last x position for callbacks.
1172 this.lastx_
= lastx
;
1174 this.updateSelection_();
1178 * Draw dots over the selectied points in the data series. This function
1179 * takes care of cleanup of previously-drawn dots.
1182 Dygraph
.prototype.updateSelection_
= function() {
1183 // Clear the previously drawn vertical, if there is one
1184 var ctx
= this.canvas_
.getContext("2d");
1185 if (this.previousVerticalX_
>= 0) {
1186 // Determine the maximum highlight circle size.
1187 var maxCircleSize
= 0;
1188 var labels
= this.attr_('labels');
1189 for (var i
= 1; i
< labels
.length
; i
++) {
1190 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1191 if (r
> maxCircleSize
) maxCircleSize
= r
;
1193 var px
= this.previousVerticalX_
;
1194 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1195 2 * maxCircleSize
+ 2, this.height_
);
1198 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1200 if (this.selPoints_
.length
> 0) {
1201 var canvasx
= this.selPoints_
[0].canvasx
;
1203 // Set the status message to indicate the selected point(s)
1204 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1205 var fmtFunc
= this.attr_('yValueFormatter');
1206 var clen
= this.colors_
.length
;
1208 if (this.attr_('showLabelsOnHighlight')) {
1209 // Set the status message to indicate the selected point(s)
1210 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1211 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1212 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1213 if (this.attr_("labelsSeparateLines")) {
1216 var point
= this.selPoints_
[i
];
1217 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1218 var yval
= fmtFunc(point
.yval
);
1219 replace
+= " <b><font color='" + c
.toHex() + "'>"
1220 + point
.name
+ "</font></b>:"
1224 this.attr_("labelsDiv").innerHTML
= replace
;
1227 // Draw colored circles over the center of each selected point
1229 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1230 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1232 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1234 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1235 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1236 0, 2 * Math
.PI
, false);
1241 this.previousVerticalX_
= canvasx
;
1246 * Set manually set selected dots, and display information about them
1247 * @param int row number that should by highlighted
1248 * false value clears the selection
1251 Dygraph
.prototype.setSelection
= function(row
) {
1252 // Extract the points we've selected
1253 this.selPoints_
= [];
1256 if (row
!== false) {
1257 row
= row
-this.boundaryIds_
[0][0];
1260 if (row
!== false && row
>= 0) {
1261 for (var i
in this.layout_
.datasets
) {
1262 if (row
< this.layout_
.datasets
[i
].length
) {
1263 var point
= this.layout_
.points
[pos
+row
];
1265 if (this.attr_("stackedGraph")) {
1266 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1269 this.selPoints_
.push(point
);
1271 pos
+= this.layout_
.datasets
[i
].length
;
1275 if (this.selPoints_
.length
) {
1276 this.lastx_
= this.selPoints_
[0].xval
;
1277 this.updateSelection_();
1280 this.clearSelection();
1286 * The mouse has left the canvas. Clear out whatever artifacts remain
1287 * @param {Object} event the mouseout event from the browser.
1290 Dygraph
.prototype.mouseOut_
= function(event
) {
1291 if (this.attr_("unhighlightCallback")) {
1292 this.attr_("unhighlightCallback")(event
);
1295 if (this.attr_("hideOverlayOnMouseOut")) {
1296 this.clearSelection();
1301 * Remove all selection from the canvas
1304 Dygraph
.prototype.clearSelection
= function() {
1305 // Get rid of the overlay data
1306 var ctx
= this.canvas_
.getContext("2d");
1307 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1308 this.attr_("labelsDiv").innerHTML
= "";
1309 this.selPoints_
= [];
1314 * Returns the number of the currently selected row
1315 * @return int row number, of -1 if nothing is selected
1318 Dygraph
.prototype.getSelection
= function() {
1319 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1323 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1324 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1325 return row
+ this.boundaryIds_
[0][0];
1331 Dygraph
.zeropad
= function(x
) {
1332 if (x
< 10) return "0" + x
; else return "" + x
;
1336 * Return a string version of the hours, minutes and seconds portion of a date.
1337 * @param {Number} date The JavaScript date (ms since epoch)
1338 * @return {String} A time of the form "HH:MM:SS"
1341 Dygraph
.hmsString_
= function(date
) {
1342 var zeropad
= Dygraph
.zeropad
;
1343 var d
= new Date(date
);
1344 if (d
.getSeconds()) {
1345 return zeropad(d
.getHours()) + ":" +
1346 zeropad(d
.getMinutes()) + ":" +
1347 zeropad(d
.getSeconds());
1349 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1354 * Convert a JS date to a string appropriate to display on an axis that
1355 * is displaying values at the stated granularity.
1356 * @param {Date} date The date to format
1357 * @param {Number} granularity One of the Dygraph granularity constants
1358 * @return {String} The formatted date
1361 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1362 if (granularity
>= Dygraph
.MONTHLY
) {
1363 return date
.strftime('%b %y');
1365 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1366 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1367 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1369 return Dygraph
.hmsString_(date
.getTime());
1375 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1376 * @param {Number} date The JavaScript date (ms since epoch)
1377 * @return {String} A date of the form "YYYY/MM/DD"
1380 Dygraph
.dateString_
= function(date
, self
) {
1381 var zeropad
= Dygraph
.zeropad
;
1382 var d
= new Date(date
);
1385 var year
= "" + d
.getFullYear();
1386 // Get a 0 padded month string
1387 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1388 // Get a 0 padded day string
1389 var day
= zeropad(d
.getDate());
1392 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1393 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1395 return year
+ "/" + month + "/" + day
+ ret
;
1399 * Round a number to the specified number of digits past the decimal point.
1400 * @param {Number} num The number to round
1401 * @param {Number} places The number of decimals to which to round
1402 * @return {Number} The rounded number
1405 Dygraph
.round_
= function(num
, places
) {
1406 var shift
= Math
.pow(10, places
);
1407 return Math
.round(num
* shift
)/shift
;
1411 * Fires when there's data available to be graphed.
1412 * @param {String} data Raw CSV data to be plotted
1415 Dygraph
.prototype.loadedEvent_
= function(data
) {
1416 this.rawData_
= this.parseCSV_(data
);
1420 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1421 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1422 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1425 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1428 Dygraph
.prototype.addXTicks_
= function() {
1429 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1430 var startDate
, endDate
;
1431 if (this.dateWindow_
) {
1432 startDate
= this.dateWindow_
[0];
1433 endDate
= this.dateWindow_
[1];
1435 startDate
= this.rawData_
[0][0];
1436 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1439 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1440 this.layout_
.updateOptions({xTicks
: xTicks
});
1443 // Time granularity enumeration
1444 Dygraph
.SECONDLY
= 0;
1445 Dygraph
.TWO_SECONDLY
= 1;
1446 Dygraph
.FIVE_SECONDLY
= 2;
1447 Dygraph
.TEN_SECONDLY
= 3;
1448 Dygraph
.THIRTY_SECONDLY
= 4;
1449 Dygraph
.MINUTELY
= 5;
1450 Dygraph
.TWO_MINUTELY
= 6;
1451 Dygraph
.FIVE_MINUTELY
= 7;
1452 Dygraph
.TEN_MINUTELY
= 8;
1453 Dygraph
.THIRTY_MINUTELY
= 9;
1454 Dygraph
.HOURLY
= 10;
1455 Dygraph
.TWO_HOURLY
= 11;
1456 Dygraph
.SIX_HOURLY
= 12;
1458 Dygraph
.WEEKLY
= 14;
1459 Dygraph
.MONTHLY
= 15;
1460 Dygraph
.QUARTERLY
= 16;
1461 Dygraph
.BIANNUAL
= 17;
1462 Dygraph
.ANNUAL
= 18;
1463 Dygraph
.DECADAL
= 19;
1464 Dygraph
.NUM_GRANULARITIES
= 20;
1466 Dygraph
.SHORT_SPACINGS
= [];
1467 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1468 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1469 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1470 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1471 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1472 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1473 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1474 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1475 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1476 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1477 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1478 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1479 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1480 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1481 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1485 // If we used this time granularity, how many ticks would there be?
1486 // This is only an approximation, but it's generally good enough.
1488 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1489 if (granularity
< Dygraph
.MONTHLY
) {
1490 // Generate one tick mark for every fixed interval of time.
1491 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1492 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1494 var year_mod
= 1; // e.g. to only print one point every 10 years.
1495 var num_months
= 12;
1496 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1497 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1498 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1499 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1501 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1502 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1503 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1509 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1510 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1512 // Returns an array containing {v: millis, label: label} dictionaries.
1514 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1515 var formatter
= this.attr_("xAxisLabelFormatter");
1517 if (granularity
< Dygraph
.MONTHLY
) {
1518 // Generate one tick mark for every fixed interval of time.
1519 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1520 var format
= '%d%b'; // e.g. "1Jan"
1522 // Find a time less than start_time which occurs on a "nice" time boundary
1523 // for this granularity.
1524 var g
= spacing
/ 1000;
1525 var d
= new Date(start_time
);
1526 if (g
<= 60) { // seconds
1527 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1531 if (g
<= 60) { // minutes
1532 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1537 if (g
<= 24) { // days
1538 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1543 if (g
== 7) { // one week
1544 d
.setDate(d
.getDate() - d
.getDay());
1549 start_time
= d
.getTime();
1551 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1552 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1555 // Display a tick mark on the first of a set of months of each year.
1556 // Years get a tick mark iff y % year_mod == 0. This is useful for
1557 // displaying a tick mark once every 10 years, say, on long time scales.
1559 var year_mod
= 1; // e.g. to only print one point every 10 years.
1561 if (granularity
== Dygraph
.MONTHLY
) {
1562 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1563 } else if (granularity
== Dygraph
.QUARTERLY
) {
1564 months
= [ 0, 3, 6, 9 ];
1565 } else if (granularity
== Dygraph
.BIANNUAL
) {
1567 } else if (granularity
== Dygraph
.ANNUAL
) {
1569 } else if (granularity
== Dygraph
.DECADAL
) {
1574 var start_year
= new Date(start_time
).getFullYear();
1575 var end_year
= new Date(end_time
).getFullYear();
1576 var zeropad
= Dygraph
.zeropad
;
1577 for (var i
= start_year
; i
<= end_year
; i
++) {
1578 if (i
% year_mod
!= 0) continue;
1579 for (var j
= 0; j
< months
.length
; j
++) {
1580 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1581 var t
= Date
.parse(date_str
);
1582 if (t
< start_time
|| t
> end_time
) continue;
1583 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1593 * Add ticks to the x-axis based on a date range.
1594 * @param {Number} startDate Start of the date window (millis since epoch)
1595 * @param {Number} endDate End of the date window (millis since epoch)
1596 * @return {Array.<Object>} Array of {label, value} tuples.
1599 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1601 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1602 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1603 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1610 return self
.GetXAxis(startDate
, endDate
, chosen
);
1612 // TODO(danvk): signal error.
1617 * Add ticks when the x axis has numbers on it (instead of dates)
1618 * @param {Number} startDate Start of the date window (millis since epoch)
1619 * @param {Number} endDate End of the date window (millis since epoch)
1621 * @param {function} attribute accessor function.
1622 * @return {Array.<Object>} Array of {label, value} tuples.
1625 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1626 var attr
= function(k
) {
1627 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1628 return self
.attr_(k
);
1633 for (var i
= 0; i
< vals
.length
; i
++) {
1634 ticks
.push({v
: vals
[i
]});
1638 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1639 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1640 // The first spacing greater than pixelsPerYLabel is what we use.
1641 // TODO(danvk): version that works on a log scale.
1642 if (attr("labelsKMG2")) {
1643 var mults
= [1, 2, 4, 8];
1645 var mults
= [1, 2, 5];
1647 var scale
, low_val
, high_val
, nTicks
;
1648 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1649 var pixelsPerTick
= attr('pixelsPerYLabel');
1650 for (var i
= -10; i
< 50; i
++) {
1651 if (attr("labelsKMG2")) {
1652 var base_scale
= Math
.pow(16, i
);
1654 var base_scale
= Math
.pow(10, i
);
1656 for (var j
= 0; j
< mults
.length
; j
++) {
1657 scale
= base_scale
* mults
[j
];
1658 low_val
= Math
.floor(minV
/ scale
) * scale
;
1659 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1660 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1661 var spacing
= self
.height_
/ nTicks
;
1662 // wish I could break out of both loops at once...
1663 if (spacing
> pixelsPerTick
) break;
1665 if (spacing
> pixelsPerTick
) break;
1668 // Construct the set of ticks.
1669 // Allow reverse y-axis if it's explicitly requested.
1670 if (low_val
> high_val
) scale
*= -1;
1671 for (var i
= 0; i
< nTicks
; i
++) {
1672 var tickV
= low_val
+ i
* scale
;
1673 ticks
.push( {v
: tickV
} );
1677 // Add formatted labels to the ticks.
1680 if (attr("labelsKMB")) {
1682 k_labels
= [ "K", "M", "B", "T" ];
1684 if (attr("labelsKMG2")) {
1685 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1687 k_labels
= [ "k", "M", "G", "T" ];
1689 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1691 for (var i
= 0; i
< ticks
.length
; i
++) {
1692 var tickV
= ticks
[i
].v
;
1693 var absTickV
= Math
.abs(tickV
);
1695 if (formatter
!= undefined
) {
1696 label
= formatter(tickV
);
1698 label
= Dygraph
.round_(tickV
, 2);
1700 if (k_labels
.length
) {
1701 // Round up to an appropriate unit.
1703 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1704 if (absTickV
>= n
) {
1705 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1710 ticks
[i
].label
= label
;
1715 // Computes the range of the data series (including confidence intervals).
1716 // series is either [ [x1, y1], [x2, y2], ... ] or
1717 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1718 // Returns [low, high]
1719 Dygraph
.prototype.extremeValues_
= function(series
) {
1720 var minY
= null, maxY
= null;
1722 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1724 // With custom bars, maxY is the max of the high values.
1725 for (var j
= 0; j
< series
.length
; j
++) {
1726 var y
= series
[j
][1][0];
1728 var low
= y
- series
[j
][1][1];
1729 var high
= y
+ series
[j
][1][2];
1730 if (low
> y
) low
= y
; // this can happen with custom bars,
1731 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1732 if (maxY
== null || high
> maxY
) {
1735 if (minY
== null || low
< minY
) {
1740 for (var j
= 0; j
< series
.length
; j
++) {
1741 var y
= series
[j
][1];
1742 if (y
=== null || isNaN(y
)) continue;
1743 if (maxY
== null || y
> maxY
) {
1746 if (minY
== null || y
< minY
) {
1752 return [minY
, maxY
];
1756 * This function is called once when the chart's data is changed or the options
1757 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1758 * idea is that values derived from the chart's data can be computed here,
1759 * rather than every time the chart is drawn. This includes things like the
1760 * number of axes, rolling averages, etc.
1762 Dygraph
.prototype.predraw_
= function() {
1763 // TODO(danvk): move more computations out of drawGraph_ and into here.
1764 this.computeYAxes_();
1766 // Create a new plotter.
1767 if (this.plotter_
) this.plotter_
.clear();
1768 this.plotter_
= new DygraphCanvasRenderer(this,
1769 this.hidden_
, this.layout_
,
1770 this.renderOptions_
);
1772 // The roller sits in the bottom left corner of the chart. We don't know where
1773 // this will be until the options are available, so it's positioned here.
1774 this.roller_
= this.createRollInterface_();
1776 // Same thing applies for the labelsDiv. It's right edge should be flush with
1777 // the right edge of the charting area (which may not be the same as the right
1778 // edge of the div, if we have two y-axes.
1779 this.positionLabelsDiv_();
1781 // If the data or options have changed, then we'd better redraw.
1787 * Update the graph with new data. This method is called when the viewing area
1788 * has changed. If the underlying data or options have changed, predraw_ will
1789 * be called before drawGraph_ is called.
1792 Dygraph
.prototype.drawGraph_
= function() {
1793 var data
= this.rawData_
;
1795 // This is used to set the second parameter to drawCallback, below.
1796 var is_initial_draw
= this.is_initial_draw_
;
1797 this.is_initial_draw_
= false;
1799 var minY
= null, maxY
= null;
1800 this.layout_
.removeAllDatasets();
1802 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1804 // Loop over the fields (series). Go from the last to the first,
1805 // because if they're stacked that's how we accumulate the values.
1807 var cumulative_y
= []; // For stacked series.
1810 var extremes
= {}; // series name -> [low, high]
1812 // Loop over all fields and create datasets
1813 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1814 if (!this.visibility()[i
- 1]) continue;
1816 var seriesName
= this.attr_("labels")[i
];
1817 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1820 for (var j
= 0; j
< data
.length
; j
++) {
1821 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1822 var date
= data
[j
][0];
1823 series
.push([date
, data
[j
][i
]]);
1827 // TODO(danvk): move this into predraw_. It's insane to do it here.
1828 series
= this.rollingAverage(series
, this.rollPeriod_
);
1830 // Prune down to the desired range, if necessary (for zooming)
1831 // Because there can be lines going to points outside of the visible area,
1832 // we actually prune to visible points, plus one on either side.
1833 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1834 if (this.dateWindow_
) {
1835 var low
= this.dateWindow_
[0];
1836 var high
= this.dateWindow_
[1];
1838 // TODO(danvk): do binary search instead of linear search.
1839 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1840 var firstIdx
= null, lastIdx
= null;
1841 for (var k
= 0; k
< series
.length
; k
++) {
1842 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1845 if (series
[k
][0] <= high
) {
1849 if (firstIdx
=== null) firstIdx
= 0;
1850 if (firstIdx
> 0) firstIdx
--;
1851 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1852 if (lastIdx
< series
.length
- 1) lastIdx
++;
1853 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1854 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1855 pruned
.push(series
[k
]);
1859 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1862 var seriesExtremes
= this.extremeValues_(series
);
1863 extremes
[seriesName
] = seriesExtremes
;
1864 var thisMinY
= seriesExtremes
[0];
1865 var thisMaxY
= seriesExtremes
[1];
1866 if (minY
=== null || (thisMinY
!= null && thisMinY
< minY
)) minY
= thisMinY
;
1867 if (maxY
=== null || (thisMaxY
!= null && thisMaxY
> maxY
)) maxY
= thisMaxY
;
1870 for (var j
=0; j
<series
.length
; j
++) {
1871 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1874 } else if (this.attr_("stackedGraph")) {
1875 var l
= series
.length
;
1877 for (var j
= 0; j
< l
; j
++) {
1878 // If one data set has a NaN, let all subsequent stacked
1879 // sets inherit the NaN -- only start at 0 for the first set.
1880 var x
= series
[j
][0];
1881 if (cumulative_y
[x
] === undefined
)
1882 cumulative_y
[x
] = 0;
1884 actual_y
= series
[j
][1];
1885 cumulative_y
[x
] += actual_y
;
1887 series
[j
] = [x
, cumulative_y
[x
]]
1889 if (!maxY
|| cumulative_y
[x
] > maxY
)
1890 maxY
= cumulative_y
[x
];
1894 datasets
[i
] = series
;
1897 for (var i
= 1; i
< datasets
.length
; i
++) {
1898 if (!this.visibility()[i
- 1]) continue;
1899 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1902 // TODO(danvk): this method doesn't need to return anything.
1903 var out
= this.computeYAxisRanges_(extremes
);
1905 var seriesToAxisMap
= out
[1];
1906 this.displayedYRange_
= axes
[0].valueRange
;
1907 this.layout_
.updateOptions( { yAxes
: axes
,
1908 seriesToAxisMap
: seriesToAxisMap
1913 // Tell PlotKit to use this new data and render itself
1914 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1915 this.layout_
.evaluateWithError();
1916 this.plotter_
.clear();
1917 this.plotter_
.render();
1918 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1919 this.canvas_
.height
);
1921 if (this.attr_("drawCallback") !== null) {
1922 this.attr_("drawCallback")(this, is_initial_draw
);
1927 * Determine properties of the y-axes which are independent of the data
1928 * currently being displayed. This includes things like the number of axes and
1929 * the style of the axes. It does not include the range of each axis and its
1931 * This fills in this.axes_ and this.seriesToAxisMap_.
1932 * axes_ = [ { options } ]
1933 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
1934 * indices are into the axes_ array.
1936 Dygraph
.prototype.computeYAxes_
= function() {
1937 this.axes_
= [{}]; // always have at least one y-axis.
1938 this.seriesToAxisMap_
= {};
1940 // Get a list of series names.
1941 var labels
= this.attr_("labels");
1943 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
1945 // all options which could be applied per-axis:
1953 'axisLabelFontSize',
1957 // Copy global axis options over to the first axis.
1958 for (var i
= 0; i
< axisOptions
.length
; i
++) {
1959 var k
= axisOptions
[i
];
1960 var v
= this.attr_(k
);
1961 if (v
) this.axes_
[0][k
] = v
;
1964 // Go through once and add all the axes.
1965 for (var seriesName
in series
) {
1966 if (!series
.hasOwnProperty(seriesName
)) continue;
1967 var axis
= this.attr_("axis", seriesName
);
1969 this.seriesToAxisMap_
[seriesName
] = 0;
1972 if (typeof(axis
) == 'object') {
1973 // Add a new axis, making a copy of its per-axis options.
1975 Dygraph
.update(opts
, this.axes_
[0]);
1976 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
1977 Dygraph
.update(opts
, axis
);
1978 this.axes_
.push(opts
);
1979 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
1983 // Go through one more time and assign series to an axis defined by another
1984 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
1985 for (var seriesName
in series
) {
1986 if (!series
.hasOwnProperty(seriesName
)) continue;
1987 var axis
= this.attr_("axis", seriesName
);
1988 if (typeof(axis
) == 'string') {
1989 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
1990 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
1991 "series " + axis
+ ", which does not define its own axis.");
1994 var idx
= this.seriesToAxisMap_
[axis
];
1995 this.seriesToAxisMap_
[seriesName
] = idx
;
2001 * Returns the number of y-axes on the chart.
2002 * @return {Number} the number of axes.
2004 Dygraph
.prototype.numAxes
= function() {
2006 for (var series
in this.seriesToAxisMap_
) {
2007 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2008 var idx
= this.seriesToAxisMap_
[series
];
2009 if (idx
> last_axis
) last_axis
= idx
;
2011 return 1 + last_axis
;
2015 * Determine the value range and tick marks for each axis.
2016 * @param {Object} extremes A mapping from seriesName -> [low, high]
2017 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2019 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2020 // Build a map from axis number -> [list of series names]
2021 var seriesForAxis
= [];
2022 for (var series
in this.seriesToAxisMap_
) {
2023 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2024 var idx
= this.seriesToAxisMap_
[series
];
2025 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2026 seriesForAxis
[idx
].push(series
);
2029 // Compute extreme values, a span and tick marks for each axis.
2030 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2031 var axis
= this.axes_
[i
];
2032 if (axis
.valueRange
) {
2033 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2035 // Calcuate the extremes of extremes.
2036 var series
= seriesForAxis
[i
];
2037 var minY
= Infinity
; // extremes[series[0]][0];
2038 var maxY
= -Infinity
; // extremes[series[0]][1];
2039 for (var j
= 0; j
< series
.length
; j
++) {
2040 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2041 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2043 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2045 // Add some padding and round up to an integer to be human-friendly.
2046 var span
= maxY
- minY
;
2047 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2048 if (span
== 0) { span
= maxY
; }
2049 var maxAxisY
= maxY
+ 0.1 * span
;
2050 var minAxisY
= minY
- 0.1 * span
;
2052 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2053 if (!this.attr_("avoidMinZero")) {
2054 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2055 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2058 if (this.attr_("includeZero")) {
2059 if (maxY
< 0) maxAxisY
= 0;
2060 if (minY
> 0) minAxisY
= 0;
2063 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2066 // Add ticks. By default, all axes inherit the tick positions of the
2067 // primary axis. However, if an axis is specifically marked as having
2068 // independent ticks, then that is permissible as well.
2069 if (i
== 0 || axis
.independentTicks
) {
2071 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2072 axis
.computedValueRange
[1],
2076 var p_axis
= this.axes_
[0];
2077 var p_ticks
= p_axis
.ticks
;
2078 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2079 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2080 var tick_values
= [];
2081 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2082 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2083 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2084 tick_values
.push(y_val
);
2088 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2089 axis
.computedValueRange
[1],
2090 this, axis
, tick_values
);
2094 return [this.axes_
, this.seriesToAxisMap_
];
2098 * Calculates the rolling average of a data set.
2099 * If originalData is [label, val], rolls the average of those.
2100 * If originalData is [label, [, it's interpreted as [value, stddev]
2101 * and the roll is returned in the same form, with appropriately reduced
2102 * stddev for each value.
2103 * Note that this is where fractional input (i.e. '5/10') is converted into
2105 * @param {Array} originalData The data in the appropriate format (see above)
2106 * @param {Number} rollPeriod The number of days over which to average the data
2108 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2109 if (originalData
.length
< 2)
2110 return originalData
;
2111 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2112 var rollingData
= [];
2113 var sigma
= this.attr_("sigma");
2115 if (this.fractions_
) {
2117 var den
= 0; // numerator/denominator
2119 for (var i
= 0; i
< originalData
.length
; i
++) {
2120 num
+= originalData
[i
][1][0];
2121 den
+= originalData
[i
][1][1];
2122 if (i
- rollPeriod
>= 0) {
2123 num
-= originalData
[i
- rollPeriod
][1][0];
2124 den
-= originalData
[i
- rollPeriod
][1][1];
2127 var date
= originalData
[i
][0];
2128 var value
= den
? num
/ den
: 0.0;
2129 if (this.attr_("errorBars")) {
2130 if (this.wilsonInterval_
) {
2131 // For more details on this confidence interval, see:
2132 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2134 var p
= value
< 0 ? 0 : value
, n
= den
;
2135 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2136 var denom
= 1 + sigma
* sigma
/ den
;
2137 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2138 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2139 rollingData
[i
] = [date
,
2140 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2142 rollingData
[i
] = [date
, [0, 0, 0]];
2145 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2146 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2149 rollingData
[i
] = [date
, mult
* value
];
2152 } else if (this.attr_("customBars")) {
2157 for (var i
= 0; i
< originalData
.length
; i
++) {
2158 var data
= originalData
[i
][1];
2160 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2162 if (y
!= null && !isNaN(y
)) {
2168 if (i
- rollPeriod
>= 0) {
2169 var prev
= originalData
[i
- rollPeriod
];
2170 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2177 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2178 1.0 * (mid
- low
) / count
,
2179 1.0 * (high
- mid
) / count
]];
2182 // Calculate the rolling average for the first rollPeriod - 1 points where
2183 // there is not enough data to roll over the full number of days
2184 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2185 if (!this.attr_("errorBars")){
2186 if (rollPeriod
== 1) {
2187 return originalData
;
2190 for (var i
= 0; i
< originalData
.length
; i
++) {
2193 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2194 var y
= originalData
[j
][1];
2195 if (y
== null || isNaN(y
)) continue;
2197 sum
+= originalData
[j
][1];
2200 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2202 rollingData
[i
] = [originalData
[i
][0], null];
2207 for (var i
= 0; i
< originalData
.length
; i
++) {
2211 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2212 var y
= originalData
[j
][1][0];
2213 if (y
== null || isNaN(y
)) continue;
2215 sum
+= originalData
[j
][1][0];
2216 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2219 var stddev
= Math
.sqrt(variance
) / num_ok
;
2220 rollingData
[i
] = [originalData
[i
][0],
2221 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2223 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2233 * Parses a date, returning the number of milliseconds since epoch. This can be
2234 * passed in as an xValueParser in the Dygraph constructor.
2235 * TODO(danvk): enumerate formats that this understands.
2236 * @param {String} A date in YYYYMMDD format.
2237 * @return {Number} Milliseconds since epoch.
2240 Dygraph
.dateParser
= function(dateStr
, self
) {
2243 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2244 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2245 while (dateStrSlashed
.search("-") != -1) {
2246 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2248 d
= Date
.parse(dateStrSlashed
);
2249 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2250 // TODO(danvk): remove support for this format. It's confusing.
2251 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2252 + "/" + dateStr
.substr(6,2);
2253 d
= Date
.parse(dateStrSlashed
);
2255 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2256 // "2009/07/12 12:34:56"
2257 d
= Date
.parse(dateStr
);
2260 if (!d
|| isNaN(d
)) {
2261 self
.error("Couldn't parse " + dateStr
+ " as a date");
2267 * Detects the type of the str (date or numeric) and sets the various
2268 * formatting attributes in this.attrs_ based on this type.
2269 * @param {String} str An x value.
2272 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2274 if (str
.indexOf('-') >= 0 ||
2275 str
.indexOf('/') >= 0 ||
2276 isNaN(parseFloat(str
))) {
2278 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2279 // TODO(danvk): remove support for this format.
2284 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2285 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2286 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2287 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2289 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2290 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2291 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2292 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2297 * Parses a string in a special csv format. We expect a csv file where each
2298 * line is a date point, and the first field in each line is the date string.
2299 * We also expect that all remaining fields represent series.
2300 * if the errorBars attribute is set, then interpret the fields as:
2301 * date, series1, stddev1, series2, stddev2, ...
2302 * @param {Array.<Object>} data See above.
2305 * @return Array.<Object> An array with one entry for each row. These entries
2306 * are an array of cells in that row. The first entry is the parsed x-value for
2307 * the row. The second, third, etc. are the y-values. These can take on one of
2308 * three forms, depending on the CSV and constructor parameters:
2310 * 2. [ value, stddev ]
2311 * 3. [ low value, center value, high value ]
2313 Dygraph
.prototype.parseCSV_
= function(data
) {
2315 var lines
= data
.split("\n");
2317 // Use the default delimiter or fall back to a tab if that makes sense.
2318 var delim
= this.attr_('delimiter');
2319 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2324 if (this.labelsFromCSV_
) {
2326 this.attrs_
.labels
= lines
[0].split(delim
);
2329 // Parse the x as a float or return null if it's not a number.
2330 var parseFloatOrNull
= function(x
) {
2331 var val
= parseFloat(x
);
2332 return isNaN(val
) ? null : val
;
2336 var defaultParserSet
= false; // attempt to auto-detect x value type
2337 var expectedCols
= this.attr_("labels").length
;
2338 var outOfOrder
= false;
2339 for (var i
= start
; i
< lines
.length
; i
++) {
2340 var line
= lines
[i
];
2341 if (line
.length
== 0) continue; // skip blank lines
2342 if (line
[0] == '#') continue; // skip comment lines
2343 var inFields
= line
.split(delim
);
2344 if (inFields
.length
< 2) continue;
2347 if (!defaultParserSet
) {
2348 this.detectTypeFromString_(inFields
[0]);
2349 xParser
= this.attr_("xValueParser");
2350 defaultParserSet
= true;
2352 fields
[0] = xParser(inFields
[0], this);
2354 // If fractions are expected, parse the numbers as "A/B
"
2355 if (this.fractions_) {
2356 for (var j = 1; j < inFields.length; j++) {
2357 // TODO(danvk): figure out an appropriate way to flag parse errors.
2358 var vals = inFields[j].split("/");
2359 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2361 } else if (this.attr_("errorBars
")) {
2362 // If there are error bars, values are (value, stddev) pairs
2363 for (var j = 1; j < inFields.length; j += 2)
2364 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2365 parseFloatOrNull(inFields[j + 1])];
2366 } else if (this.attr_("customBars
")) {
2367 // Bars are a low;center;high tuple
2368 for (var j = 1; j < inFields.length; j++) {
2369 var vals = inFields[j].split(";");
2370 fields[j] = [ parseFloatOrNull(vals[0]),
2371 parseFloatOrNull(vals[1]),
2372 parseFloatOrNull(vals[2]) ];
2375 // Values are just numbers
2376 for (var j = 1; j < inFields.length; j++) {
2377 fields[j] = parseFloatOrNull(inFields[j]);
2380 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2385 if (fields.length != expectedCols) {
2386 this.error("Number of columns
in line
" + i + " (" + fields.length +
2387 ") does not agree
with number of
labels (" + expectedCols +
2393 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2394 ret.sort(function(a,b) { return a[0] - b[0] });
2401 * The user has provided their data as a pre-packaged JS array. If the x values
2402 * are numeric, this is the same as dygraphs' internal format. If the x values
2403 * are dates, we need to convert them from Date objects to ms since epoch.
2404 * @param {Array.<Object>} data
2405 * @return {Array.<Object>} data with numeric x values.
2407 Dygraph.prototype.parseArray_ = function(data) {
2408 // Peek at the first x value to see if it's numeric.
2409 if (data.length == 0) {
2410 this.error("Can
't plot empty data set");
2413 if (data[0].length == 0) {
2414 this.error("Data set cannot contain an empty row");
2418 if (this.attr_("labels") == null) {
2419 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2420 "in the options parameter");
2421 this.attrs_.labels = [ "X" ];
2422 for (var i = 1; i < data[0].length; i++) {
2423 this.attrs_.labels.push("Y" + i);
2427 if (Dygraph.isDateLike(data[0][0])) {
2428 // Some intelligent defaults for a date x-axis.
2429 this.attrs_.xValueFormatter = Dygraph.dateString_;
2430 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2431 this.attrs_.xTicker = Dygraph.dateTicker;
2433 // Assume they're all dates
.
2434 var parsedData
= Dygraph
.clone(data
);
2435 for (var i
= 0; i
< data
.length
; i
++) {
2436 if (parsedData
[i
].length
== 0) {
2437 this.error("Row " + (1 + i
) + " of data is empty");
2440 if (parsedData
[i
][0] == null
2441 || typeof(parsedData
[i
][0].getTime
) != 'function'
2442 || isNaN(parsedData
[i
][0].getTime())) {
2443 this.error("x value in row " + (1 + i
) + " is not a Date");
2446 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2450 // Some intelligent defaults for a numeric x-axis.
2451 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2452 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2458 * Parses a DataTable object from gviz.
2459 * The data is expected to have a first column that is either a date or a
2460 * number. All subsequent columns must be numbers. If there is a clear mismatch
2461 * between this.xValueParser_ and the type of the first column, it will be
2462 * fixed. Fills out rawData_.
2463 * @param {Array.<Object>} data See above.
2466 Dygraph
.prototype.parseDataTable_
= function(data
) {
2467 var cols
= data
.getNumberOfColumns();
2468 var rows
= data
.getNumberOfRows();
2470 var indepType
= data
.getColumnType(0);
2471 if (indepType
== 'date' || indepType
== 'datetime') {
2472 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2473 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2474 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2475 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2476 } else if (indepType
== 'number') {
2477 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2478 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2479 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2480 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2482 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2483 "column 1 of DataTable input (Got '" + indepType
+ "')");
2487 // Array of the column indices which contain data (and not annotations).
2489 var annotationCols
= {}; // data index -> [annotation cols]
2490 var hasAnnotations
= false;
2491 for (var i
= 1; i
< cols
; i
++) {
2492 var type
= data
.getColumnType(i
);
2493 if (type
== 'number') {
2495 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2496 // This is OK -- it's an annotation column.
2497 var dataIdx
= colIdx
[colIdx
.length
- 1];
2498 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2499 annotationCols
[dataIdx
] = [i
];
2501 annotationCols
[dataIdx
].push(i
);
2503 hasAnnotations
= true;
2505 this.error("Only 'number' is supported as a dependent type with Gviz." +
2506 " 'string' is only supported if displayAnnotations is true");
2510 // Read column labels
2511 // TODO(danvk): add support back for errorBars
2512 var labels
= [data
.getColumnLabel(0)];
2513 for (var i
= 0; i
< colIdx
.length
; i
++) {
2514 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2515 if (this.attr_("errorBars")) i
+= 1;
2517 this.attrs_
.labels
= labels
;
2518 cols
= labels
.length
;
2521 var outOfOrder
= false;
2522 var annotations
= [];
2523 for (var i
= 0; i
< rows
; i
++) {
2525 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2526 data
.getValue(i
, 0) === null) {
2527 this.warn("Ignoring row " + i
+
2528 " of DataTable because of undefined or null first column.");
2532 if (indepType
== 'date' || indepType
== 'datetime') {
2533 row
.push(data
.getValue(i
, 0).getTime());
2535 row
.push(data
.getValue(i
, 0));
2537 if (!this.attr_("errorBars")) {
2538 for (var j
= 0; j
< colIdx
.length
; j
++) {
2539 var col
= colIdx
[j
];
2540 row
.push(data
.getValue(i
, col
));
2541 if (hasAnnotations
&&
2542 annotationCols
.hasOwnProperty(col
) &&
2543 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2545 ann
.series
= data
.getColumnLabel(col
);
2547 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2549 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2550 if (k
) ann
.text
+= "\n";
2551 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2553 annotations
.push(ann
);
2557 for (var j
= 0; j
< cols
- 1; j
++) {
2558 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2561 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2568 this.warn("DataTable is out of order; order it correctly to speed loading.");
2569 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2571 this.rawData_
= ret
;
2573 if (annotations
.length
> 0) {
2574 this.setAnnotations(annotations
, true);
2578 // These functions are all based on MochiKit.
2579 Dygraph
.update
= function (self
, o
) {
2580 if (typeof(o
) != 'undefined' && o
!== null) {
2582 if (o
.hasOwnProperty(k
)) {
2590 Dygraph
.isArrayLike
= function (o
) {
2591 var typ
= typeof(o
);
2593 (typ
!= 'object' && !(typ
== 'function' &&
2594 typeof(o
.item
) == 'function')) ||
2596 typeof(o
.length
) != 'number' ||
2604 Dygraph
.isDateLike
= function (o
) {
2605 if (typeof(o
) != "object" || o
=== null ||
2606 typeof(o
.getTime
) != 'function') {
2612 Dygraph
.clone
= function(o
) {
2613 // TODO(danvk): figure out how MochiKit's version works
2615 for (var i
= 0; i
< o
.length
; i
++) {
2616 if (Dygraph
.isArrayLike(o
[i
])) {
2617 r
.push(Dygraph
.clone(o
[i
]));
2627 * Get the CSV data. If it's in a function, call that function. If it's in a
2628 * file, do an XMLHttpRequest to get it.
2631 Dygraph
.prototype.start_
= function() {
2632 if (typeof this.file_
== 'function') {
2633 // CSV string. Pretend we got it via XHR.
2634 this.loadedEvent_(this.file_());
2635 } else if (Dygraph
.isArrayLike(this.file_
)) {
2636 this.rawData_
= this.parseArray_(this.file_
);
2638 } else if (typeof this.file_
== 'object' &&
2639 typeof this.file_
.getColumnRange
== 'function') {
2640 // must be a DataTable from gviz.
2641 this.parseDataTable_(this.file_
);
2643 } else if (typeof this.file_
== 'string') {
2644 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2645 if (this.file_
.indexOf('\n') >= 0) {
2646 this.loadedEvent_(this.file_
);
2648 var req
= new XMLHttpRequest();
2650 req
.onreadystatechange
= function () {
2651 if (req
.readyState
== 4) {
2652 if (req
.status
== 200) {
2653 caller
.loadedEvent_(req
.responseText
);
2658 req
.open("GET", this.file_
, true);
2662 this.error("Unknown data format: " + (typeof this.file_
));
2667 * Changes various properties of the graph. These can include:
2669 * <li>file: changes the source data for the graph</li>
2670 * <li>errorBars: changes whether the data contains stddev</li>
2672 * @param {Object} attrs The new properties and values
2674 Dygraph
.prototype.updateOptions
= function(attrs
) {
2675 // TODO(danvk): this is a mess. Rethink this function.
2676 if ('rollPeriod' in attrs
) {
2677 this.rollPeriod_
= attrs
.rollPeriod
;
2679 if ('dateWindow' in attrs
) {
2680 this.dateWindow_
= attrs
.dateWindow
;
2683 // TODO(danvk): validate per-series options.
2688 // highlightCircleSize
2690 Dygraph
.update(this.user_attrs_
, attrs
);
2691 Dygraph
.update(this.renderOptions_
, attrs
);
2693 this.labelsFromCSV_
= (this.attr_("labels") == null);
2695 // TODO(danvk): this doesn't match the constructor logic
2696 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2697 if (attrs
['file']) {
2698 this.file_
= attrs
['file'];
2706 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2707 * containing div (which has presumably changed size since the dygraph was
2708 * instantiated. If the width/height are specified, the div will be resized.
2710 * This is far more efficient than destroying and re-instantiating a
2711 * Dygraph, since it doesn't have to reparse the underlying data.
2713 * @param {Number} width Width (in pixels)
2714 * @param {Number} height Height (in pixels)
2716 Dygraph
.prototype.resize
= function(width
, height
) {
2717 if (this.resize_lock
) {
2720 this.resize_lock
= true;
2722 if ((width
=== null) != (height
=== null)) {
2723 this.warn("Dygraph.resize() should be called with zero parameters or " +
2724 "two non-NULL parameters. Pretending it was zero.");
2725 width
= height
= null;
2728 // TODO(danvk): there should be a clear() method.
2729 this.maindiv_
.innerHTML
= "";
2730 this.attrs_
.labelsDiv
= null;
2733 this.maindiv_
.style
.width
= width
+ "px";
2734 this.maindiv_
.style
.height
= height
+ "px";
2735 this.width_
= width
;
2736 this.height_
= height
;
2738 this.width_
= this.maindiv_
.offsetWidth
;
2739 this.height_
= this.maindiv_
.offsetHeight
;
2742 this.createInterface_();
2745 this.resize_lock
= false;
2749 * Adjusts the number of days in the rolling average. Updates the graph to
2750 * reflect the new averaging period.
2751 * @param {Number} length Number of days over which to average the data.
2753 Dygraph
.prototype.adjustRoll
= function(length
) {
2754 this.rollPeriod_
= length
;
2759 * Returns a boolean array of visibility statuses.
2761 Dygraph
.prototype.visibility
= function() {
2762 // Do lazy-initialization, so that this happens after we know the number of
2764 if (!this.attr_("visibility")) {
2765 this.attrs_
["visibility"] = [];
2767 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2768 this.attr_("visibility").push(true);
2770 return this.attr_("visibility");
2774 * Changes the visiblity of a series.
2776 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2777 var x
= this.visibility();
2778 if (num
< 0 && num
>= x
.length
) {
2779 this.warn("invalid series number in setVisibility: " + num
);
2787 * Update the list of annotations and redraw the chart.
2789 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2790 // Only add the annotation CSS rule once we know it will be used.
2791 Dygraph
.addAnnotationRule();
2792 this.annotations_
= ann
;
2793 this.layout_
.setAnnotations(this.annotations_
);
2794 if (!suppressDraw
) {
2800 * Return the list of annotations.
2802 Dygraph
.prototype.annotations
= function() {
2803 return this.annotations_
;
2807 * Get the index of a series (column) given its name. The first column is the
2808 * x-axis, so the data series start with index 1.
2810 Dygraph
.prototype.indexFromSetName
= function(name
) {
2811 var labels
= this.attr_("labels");
2812 for (var i
= 0; i
< labels
.length
; i
++) {
2813 if (labels
[i
] == name
) return i
;
2818 Dygraph
.addAnnotationRule
= function() {
2819 if (Dygraph
.addedAnnotationCSS
) return;
2822 if (document
.styleSheets
.length
> 0) {
2823 mysheet
= document
.styleSheets
[0];
2825 var styleSheetElement
= document
.createElement("style");
2826 styleSheetElement
.type
= "text/css";
2827 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2828 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2829 if (document
.styleSheets
[i
].disabled
) continue;
2830 mysheet
= document
.styleSheets
[i
];
2834 var rule
= "border: 1px solid black; " +
2835 "background-color: white; " +
2836 "text-align: center;";
2837 if (mysheet
.insertRule
) { // Firefox
2838 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2839 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2840 } else if (mysheet
.addRule
) { // IE
2841 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2844 Dygraph
.addedAnnotationCSS
= true;
2848 * Create a new canvas element. This is more complex than a simple
2849 * document.createElement("canvas") because of IE and excanvas.
2851 Dygraph
.createCanvas
= function() {
2852 var canvas
= document
.createElement("canvas");
2854 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2855 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2856 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2864 * A wrapper around Dygraph that implements the gviz API.
2865 * @param {Object} container The DOM object the visualization should live in.
2867 Dygraph
.GVizChart
= function(container
) {
2868 this.container
= container
;
2871 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2872 this.container
.innerHTML
= '';
2873 this.date_graph
= new Dygraph(this.container
, data
, options
);
2877 * Google charts compatible setSelection
2878 * Only row selection is supported, all points in the row will be highlighted
2879 * @param {Array} array of the selected cells
2882 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2884 if (selection_array
.length
) {
2885 row
= selection_array
[0].row
;
2887 this.date_graph
.setSelection(row
);
2891 * Google charts compatible getSelection implementation
2892 * @return {Array} array of the selected cells
2895 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2898 var row
= this.date_graph
.getSelection();
2900 if (row
< 0) return selection
;
2903 for (var i
in this.date_graph
.layout_
.datasets
) {
2904 selection
.push({row
: row
, column
: col
});
2911 // Older pages may still use this name.
2912 DateGraph
= Dygraph
;