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,
99 axisLabelFontSize
: 14,
105 xValueFormatter
: Dygraph
.dateString_
,
106 xValueParser
: Dygraph
.dateParser
,
107 xTicker
: Dygraph
.dateTicker
,
115 wilsonInterval
: true, // only relevant if fractions is true
121 hideOverlayOnMouseOut
: true
124 // Various logging levels.
130 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
131 // Labels is no longer a constructor parameter, since it's typically set
132 // directly from the data source. It also conains a name for the x-axis,
133 // which the previous constructor form did not.
134 if (labels
!= null) {
135 var new_labels
= ["Date"];
136 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
137 Dygraph
.update(attrs
, { 'labels': new_labels
});
139 this.__init__(div
, file
, attrs
);
143 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
144 * and interaction <canvas> inside of it. See the constructor for details
146 * @param {String | Function} file Source data
147 * @param {Array.<String>} labels Names of the data series
148 * @param {Object} attrs Miscellaneous other options
151 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
152 // Support two-argument constructor
153 if (attrs
== null) { attrs
= {}; }
155 // Copy the important bits into the object
156 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
159 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
160 this.previousVerticalX_
= -1;
161 this.fractions_
= attrs
.fractions
|| false;
162 this.dateWindow_
= attrs
.dateWindow
|| null;
163 this.valueRange_
= attrs
.valueRange
|| null;
164 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
166 // Clear the div. This ensure that, if multiple dygraphs are passed the same
167 // div, then only one will be drawn.
170 // If the div isn't already sized then inherit from our attrs or
171 // give it a default size.
172 if (div
.style
.width
== '') {
173 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
175 if (div
.style
.height
== '') {
176 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
178 this.width_
= parseInt(div
.style
.width
, 10);
179 this.height_
= parseInt(div
.style
.height
, 10);
180 // The div might have been specified as percent of the current window size,
181 // convert that to an appropriate number of pixels.
182 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
183 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
184 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
186 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
187 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
190 if (attrs
['stackedGraph']) {
191 attrs
['fillGraph'] = true;
192 // TODO(nikhilk): Add any other stackedGraph checks here.
195 // Dygraphs has many options, some of which interact with one another.
196 // To keep track of everything, we maintain two sets of options:
198 // this.user_attrs_ only options explicitly set by the user.
199 // this.attrs_ defaults, options derived from user_attrs_, data.
201 // Options are then accessed this.attr_('attr'), which first looks at
202 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
203 // defaults without overriding behavior that the user specifically asks for.
204 this.user_attrs_
= {};
205 Dygraph
.update(this.user_attrs_
, attrs
);
208 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
210 // Make a note of whether labels will be pulled from the CSV file.
211 this.labelsFromCSV_
= (this.attr_("labels") == null);
213 // Create the containing DIV and other interactive elements
214 this.createInterface_();
219 Dygraph
.prototype.attr_
= function(name
) {
220 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
221 return this.user_attrs_
[name
];
222 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
223 return this.attrs_
[name
];
229 // TODO(danvk): any way I can get the line numbers to be this.warn call?
230 Dygraph
.prototype.log
= function(severity
, message
) {
231 if (typeof(console
) != 'undefined') {
234 console
.debug('dygraphs: ' + message
);
237 console
.info('dygraphs: ' + message
);
239 case Dygraph
.WARNING
:
240 console
.warn('dygraphs: ' + message
);
243 console
.error('dygraphs: ' + message
);
248 Dygraph
.prototype.info
= function(message
) {
249 this.log(Dygraph
.INFO
, message
);
251 Dygraph
.prototype.warn
= function(message
) {
252 this.log(Dygraph
.WARNING
, message
);
254 Dygraph
.prototype.error
= function(message
) {
255 this.log(Dygraph
.ERROR
, message
);
259 * Returns the current rolling period, as set by the user or an option.
260 * @return {Number} The number of days in the rolling window
262 Dygraph
.prototype.rollPeriod
= function() {
263 return this.rollPeriod_
;
267 * Returns the currently-visible x-range. This can be affected by zooming,
268 * panning or a call to updateOptions.
269 * Returns a two-element array: [left, right].
270 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
272 Dygraph
.prototype.xAxisRange
= function() {
273 if (this.dateWindow_
) return this.dateWindow_
;
275 // The entire chart is visible.
276 var left
= this.rawData_
[0][0];
277 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
278 return [left
, right
];
281 Dygraph
.addEvent
= function(el
, evt
, fn
) {
282 var normed_fn
= function(e
) {
283 if (!e
) var e
= window
.event
;
286 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
287 el
.addEventListener(evt
, normed_fn
, false);
289 el
.attachEvent('on' + evt
, normed_fn
);
294 * Generates interface elements for the Dygraph: a containing div, a div to
295 * display the current point, and a textbox to adjust the rolling average
296 * period. Also creates the Renderer/Layout elements.
299 Dygraph
.prototype.createInterface_
= function() {
300 // Create the all-enclosing graph div
301 var enclosing
= this.maindiv_
;
303 this.graphDiv
= document
.createElement("div");
304 this.graphDiv
.style
.width
= this.width_
+ "px";
305 this.graphDiv
.style
.height
= this.height_
+ "px";
306 enclosing
.appendChild(this.graphDiv
);
308 // Create the canvas for interactive parts of the chart.
309 // this.canvas_ = document.createElement("canvas");
310 this.canvas_
= Dygraph
.createCanvas();
311 this.canvas_
.style
.position
= "absolute";
312 this.canvas_
.width
= this.width_
;
313 this.canvas_
.height
= this.height_
;
314 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
315 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
316 this.graphDiv
.appendChild(this.canvas_
);
318 // ... and for static parts of the chart.
319 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
322 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
323 dygraph
.mouseMove_(e
);
325 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
326 dygraph
.mouseOut_(e
);
329 // Create the grapher
330 // TODO(danvk): why does the Layout need its own set of options?
331 this.layoutOptions_
= { 'xOriginIsZero': false };
332 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
333 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
334 Dygraph
.update(this.layoutOptions_
, {
335 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
337 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
339 // TODO(danvk): why does the Renderer need its own set of options?
340 this.renderOptions_
= { colorScheme
: this.colors_
,
342 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
343 Dygraph
.update(this.renderOptions_
, this.attrs_
);
344 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
345 this.plotter_
= new DygraphCanvasRenderer(this,
346 this.hidden_
, this.layout_
,
347 this.renderOptions_
);
349 this.createStatusMessage_();
350 this.createRollInterface_();
351 this.createDragInterface_();
355 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
356 * this particular canvas. All Dygraph work is done on this.canvas_.
357 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
358 * @return {Object} The newly-created canvas
361 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
362 // var h = document.createElement("canvas");
363 var h
= Dygraph
.createCanvas();
364 h
.style
.position
= "absolute";
365 h
.style
.top
= canvas
.style
.top
;
366 h
.style
.left
= canvas
.style
.left
;
367 h
.width
= this.width_
;
368 h
.height
= this.height_
;
369 h
.style
.width
= this.width_
+ "px"; // for IE
370 h
.style
.height
= this.height_
+ "px"; // for IE
371 this.graphDiv
.appendChild(h
);
375 // Taken from MochiKit.Color
376 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
380 if (saturation
=== 0) {
385 var i
= Math
.floor(hue
* 6);
386 var f
= (hue
* 6) - i
;
387 var p
= value
* (1 - saturation
);
388 var q
= value
* (1 - (saturation
* f
));
389 var t
= value
* (1 - (saturation
* (1 - f
)));
391 case 1: red
= q
; green
= value
; blue
= p
; break;
392 case 2: red
= p
; green
= value
; blue
= t
; break;
393 case 3: red
= p
; green
= q
; blue
= value
; break;
394 case 4: red
= t
; green
= p
; blue
= value
; break;
395 case 5: red
= value
; green
= p
; blue
= q
; break;
396 case 6: // fall through
397 case 0: red
= value
; green
= t
; blue
= p
; break;
400 red
= Math
.floor(255 * red
+ 0.5);
401 green
= Math
.floor(255 * green
+ 0.5);
402 blue
= Math
.floor(255 * blue
+ 0.5);
403 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
408 * Generate a set of distinct colors for the data series. This is done with a
409 * color wheel. Saturation/Value are customizable, and the hue is
410 * equally-spaced around the color wheel. If a custom set of colors is
411 * specified, that is used instead.
414 Dygraph
.prototype.setColors_
= function() {
415 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
416 // away with this.renderOptions_.
417 var num
= this.attr_("labels").length
- 1;
419 var colors
= this.attr_('colors');
421 var sat
= this.attr_('colorSaturation') || 1.0;
422 var val
= this.attr_('colorValue') || 0.5;
423 for (var i
= 1; i
<= num
; i
++) {
424 if (!this.visibility()[i
-1]) continue;
425 // alternate colors for high contrast.
426 var idx
= i
- parseInt(i
% 2 ? i
/ 2 : (i - num)/2, 10);
427 var hue
= (1.0 * idx
/ (1 + num
));
428 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
431 for (var i
= 0; i
< num
; i
++) {
432 if (!this.visibility()[i
]) continue;
433 var colorStr
= colors
[i
% colors
.length
];
434 this.colors_
.push(colorStr
);
438 // TODO(danvk): update this w/r
/t/ the
new options system
.
439 this.renderOptions_
.colorScheme
= this.colors_
;
440 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
441 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
442 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
446 * Return the list of colors. This is either the list of colors passed in the
447 * attributes, or the autogenerated list of rgb(r,g,b) strings.
448 * @return {Array<string>} The list of colors.
450 Dygraph
.prototype.getColors
= function() {
454 // The following functions are from quirksmode.org with a modification for Safari from
455 // http://blog.firetree.net/2005/07/04/javascript-find-position/
456 // http://www.quirksmode.org/js
/findpos
.html
457 Dygraph
.findPosX
= function(obj
) {
462 curleft
+= obj
.offsetLeft
;
463 if(!obj
.offsetParent
)
465 obj
= obj
.offsetParent
;
472 Dygraph
.findPosY
= function(obj
) {
477 curtop
+= obj
.offsetTop
;
478 if(!obj
.offsetParent
)
480 obj
= obj
.offsetParent
;
490 * Create the div that contains information on the selected point(s)
491 * This goes in the top right of the canvas, unless an external div has already
495 Dygraph
.prototype.createStatusMessage_
= function(){
496 if (!this.attr_("labelsDiv")) {
497 var divWidth
= this.attr_('labelsDivWidth');
499 "position": "absolute",
502 "width": divWidth
+ "px",
504 "left": (this.width_
- divWidth
- 2) + "px",
505 "background": "white",
507 "overflow": "hidden"};
508 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
509 var div
= document
.createElement("div");
510 for (var name
in messagestyle
) {
511 if (messagestyle
.hasOwnProperty(name
)) {
512 div
.style
[name
] = messagestyle
[name
];
515 this.graphDiv
.appendChild(div
);
516 this.attrs_
.labelsDiv
= div
;
521 * Create the text box to adjust the averaging period
522 * @return {Object} The newly-created text box
525 Dygraph
.prototype.createRollInterface_
= function() {
526 var display
= this.attr_('showRoller') ? "block" : "none";
527 var textAttr
= { "position": "absolute",
529 "top": (this.plotter_
.area
.h
- 25) + "px",
530 "left": (this.plotter_
.area
.x
+ 1) + "px",
533 var roller
= document
.createElement("input");
534 roller
.type
= "text";
536 roller
.value
= this.rollPeriod_
;
537 for (var name
in textAttr
) {
538 if (textAttr
.hasOwnProperty(name
)) {
539 roller
.style
[name
] = textAttr
[name
];
543 var pa
= this.graphDiv
;
544 pa
.appendChild(roller
);
546 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
550 // These functions are taken from MochiKit.Signal
551 Dygraph
.pageX
= function(e
) {
553 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
556 var b
= document
.body
;
558 (de
.scrollLeft
|| b
.scrollLeft
) -
559 (de
.clientLeft
|| 0);
563 Dygraph
.pageY
= function(e
) {
565 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
568 var b
= document
.body
;
570 (de
.scrollTop
|| b
.scrollTop
) -
576 * Set up all the mouse handlers needed to capture dragging behavior for zoom
580 Dygraph
.prototype.createDragInterface_
= function() {
583 // Tracks whether the mouse is down right now
584 var isZooming
= false;
585 var isPanning
= false;
586 var dragStartX
= null;
587 var dragStartY
= null;
591 var draggingDate
= null;
592 var dateRange
= null;
594 // Utility function to convert page-wide coordinates to canvas coords
597 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
598 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
600 // Draw zoom rectangles when the mouse is down and the user moves around
601 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
603 dragEndX
= getX(event
);
604 dragEndY
= getY(event
);
606 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
608 } else if (isPanning
) {
609 dragEndX
= getX(event
);
610 dragEndY
= getY(event
);
612 // Want to have it so that:
613 // 1. draggingDate appears at dragEndX
614 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
616 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
617 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
618 self
.drawGraph_(self
.rawData_
);
622 // Track the beginning of drag events
623 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
624 px
= Dygraph
.findPosX(self
.canvas_
);
625 py
= Dygraph
.findPosY(self
.canvas_
);
626 dragStartX
= getX(event
);
627 dragStartY
= getY(event
);
629 if (event
.altKey
|| event
.shiftKey
) {
630 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
632 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
633 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
640 // If the user releases the mouse button during a drag, but not over the
641 // canvas, then it doesn't count as a zooming action.
642 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
643 if (isZooming
|| isPanning
) {
656 // Temporarily cancel the dragging event when the mouse leaves the graph
657 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
664 // If the mouse is released on the canvas during a drag event, then it's a
665 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
666 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
669 dragEndX
= getX(event
);
670 dragEndY
= getY(event
);
671 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
672 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
674 if (regionWidth
< 2 && regionHeight
< 2 &&
675 self
.attr_('clickCallback') != null &&
676 self
.lastx_
!= undefined
) {
677 // TODO(danvk): pass along more info about the points.
678 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
681 if (regionWidth
>= 10) {
682 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
683 Math
.max(dragStartX
, dragEndX
));
685 self
.canvas_
.getContext("2d").clearRect(0, 0,
687 self
.canvas_
.height
);
701 // Double-clicking zooms back out
702 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
703 if (self
.dateWindow_
== null) return;
704 self
.dateWindow_
= null;
705 self
.drawGraph_(self
.rawData_
);
706 var minDate
= self
.rawData_
[0][0];
707 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
708 if (self
.attr_("zoomCallback")) {
709 self
.attr_("zoomCallback")(minDate
, maxDate
);
715 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
716 * up any previous zoom rectangles that were drawn. This could be optimized to
717 * avoid extra redrawing, but it's tricky to avoid interactions with the status
719 * @param {Number} startX The X position where the drag started, in canvas
721 * @param {Number} endX The current X position of the drag, in canvas coords.
722 * @param {Number} prevEndX The value of endX on the previous call to this
723 * function. Used to avoid excess redrawing
726 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
727 var ctx
= this.canvas_
.getContext("2d");
729 // Clean up from the previous rect if necessary
731 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
732 Math
.abs(startX
- prevEndX
), this.height_
);
735 // Draw a light-grey rectangle to show the new viewing area
736 if (endX
&& startX
) {
737 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
738 ctx
.fillRect(Math
.min(startX
, endX
), 0,
739 Math
.abs(endX
- startX
), this.height_
);
744 * Zoom to something containing [lowX, highX]. These are pixel coordinates
745 * in the canvas. The exact zoom window may be slightly larger if there are no
746 * data points near lowX or highX. This function redraws the graph.
747 * @param {Number} lowX The leftmost pixel value that should be visible.
748 * @param {Number} highX The rightmost pixel value that should be visible.
751 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
752 // Find the earliest and latest dates contained in this canvasx range.
753 var points
= this.layout_
.points
;
756 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
757 for (var i
= 0; i
< points
.length
; i
++) {
758 var cx
= points
[i
].canvasx
;
759 var x
= points
[i
].xval
;
760 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
761 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
763 // Use the extremes if either is missing
764 if (minDate
== null) minDate
= points
[0].xval
;
765 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
767 this.dateWindow_
= [minDate
, maxDate
];
768 this.drawGraph_(this.rawData_
);
769 if (this.attr_("zoomCallback")) {
770 this.attr_("zoomCallback")(minDate
, maxDate
);
775 * When the mouse moves in the canvas, display information about a nearby data
776 * point and draw dots over those points in the data series. This function
777 * takes care of cleanup of previously-drawn dots.
778 * @param {Object} event The mousemove event from the browser.
781 Dygraph
.prototype.mouseMove_
= function(event
) {
782 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
783 var points
= this.layout_
.points
;
788 // Loop through all the points and find the date nearest to our current
790 var minDist
= 1e+100;
792 for (var i
= 0; i
< points
.length
; i
++) {
793 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
794 if (dist
> minDist
) break;
798 if (idx
>= 0) lastx
= points
[idx
].xval
;
799 // Check that you can really highlight the last day's data
800 if (canvasx
> points
[points
.length
-1].canvasx
)
801 lastx
= points
[points
.length
-1].xval
;
803 // Extract the points we've selected
804 this.selPoints_
= [];
805 for (var i
= 0; i
< points
.length
; i
++) {
806 if (points
[i
].xval
== lastx
) {
807 this.selPoints_
.push(points
[i
]);
811 // MERGE: check if this breaks compatibility.
812 if (this.attr_("highlightCallback")) {
813 var px
= this.lastHighlightCallbackX
;
814 if (px
!== null && lastx
!= px
) {
815 this.lastHighlightCallbackX
= lastx
;
816 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
817 var callbackPoints
= this.selPoints_
.map(
818 function(p
) { return {xval
: p
.xval
, yval
: p
.yval
, name
: p
.name
} });
819 if (this.attr_("stackedGraph")) {
820 // "unstack" the points.
821 var cumulative_sum
= 0;
822 for (var j
= callbackPoints
.length
- 1; j
>= 0; j
--) {
823 callbackPoints
[j
].yval
-= cumulative_sum
;
824 cumulative_sum
+= callbackPoints
[j
].yval
;
827 this.attr_("highlightCallback")(event
, lastx
, callbackPoints
);
831 // Clear the previously drawn vertical, if there is one
832 var circleSize
= this.attr_('highlightCircleSize');
833 var ctx
= this.canvas_
.getContext("2d");
834 if (this.previousVerticalX_
>= 0) {
835 var px
= this.previousVerticalX_
;
836 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
839 var isOK
= function(x
) { return x
&& !isNaN(x
); };
841 if (this.selPoints_
.length
> 0) {
842 var canvasx
= this.selPoints_
[0].canvasx
;
844 // Set the status message to indicate the selected point(s)
845 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
846 var clen
= this.colors_
.length
;
847 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
848 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
849 if (this.attr_("labelsSeparateLines")) {
852 var point
= this.selPoints_
[i
];
853 var c
= new RGBColor(this.colors_
[i
%clen
]);
854 replace
+= " <b><font color='" + c
.toHex() + "'>"
855 + point
.name
+ "</font></b>:"
856 + this.round_(point
.yval
, 2);
858 this.attr_("labelsDiv").innerHTML
= replace
;
860 // Save last x position for callbacks.
863 // Draw colored circles over the center of each selected point
865 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
866 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
868 ctx
.fillStyle
= this.colors_
[i
%clen
];
869 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
870 0, 2 * Math
.PI
, false);
875 this.previousVerticalX_
= canvasx
;
880 * The mouse has left the canvas. Clear out whatever artifacts remain
881 * @param {Object} event the mouseout event from the browser.
884 Dygraph
.prototype.mouseOut_
= function(event
) {
885 if (this.attr_("hideOverlayOnMouseOut")) {
886 // Get rid of the overlay data
887 var ctx
= this.canvas_
.getContext("2d");
888 ctx
.clearRect(0, 0, this.width_
, this.height_
);
889 this.attr_("labelsDiv").innerHTML
= "";
893 Dygraph
.zeropad
= function(x
) {
894 if (x
< 10) return "0" + x
; else return "" + x
;
898 * Return a string version of the hours, minutes and seconds portion of a date.
899 * @param {Number} date The JavaScript date (ms since epoch)
900 * @return {String} A time of the form "HH:MM:SS"
903 Dygraph
.prototype.hmsString_
= function(date
) {
904 var zeropad
= Dygraph
.zeropad
;
905 var d
= new Date(date
);
906 if (d
.getSeconds()) {
907 return zeropad(d
.getHours()) + ":" +
908 zeropad(d
.getMinutes()) + ":" +
909 zeropad(d
.getSeconds());
910 } else if (d
.getMinutes()) {
911 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
913 return zeropad(d
.getHours());
918 * Convert a JS date (millis since epoch) to YYYY/MM/DD
919 * @param {Number} date The JavaScript date (ms since epoch)
920 * @return {String} A date of the form "YYYY/MM/DD"
922 * TODO(danvk): why is this part of the prototype?
924 Dygraph
.dateString_
= function(date
, self
) {
925 var zeropad
= Dygraph
.zeropad
;
926 var d
= new Date(date
);
929 var year
= "" + d
.getFullYear();
930 // Get a 0 padded month string
931 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
932 // Get a 0 padded day string
933 var day
= zeropad(d
.getDate());
936 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
937 if (frac
) ret
= " " + self
.hmsString_(date
);
939 return year
+ "/" + month + "/" + day
+ ret
;
943 * Round a number to the specified number of digits past the decimal point.
944 * @param {Number} num The number to round
945 * @param {Number} places The number of decimals to which to round
946 * @return {Number} The rounded number
949 Dygraph
.prototype.round_
= function(num
, places
) {
950 var shift
= Math
.pow(10, places
);
951 return Math
.round(num
* shift
)/shift
;
955 * Fires when there's data available to be graphed.
956 * @param {String} data Raw CSV data to be plotted
959 Dygraph
.prototype.loadedEvent_
= function(data
) {
960 this.rawData_
= this.parseCSV_(data
);
961 this.drawGraph_(this.rawData_
);
964 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
965 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
966 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
969 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
972 Dygraph
.prototype.addXTicks_
= function() {
973 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
974 var startDate
, endDate
;
975 if (this.dateWindow_
) {
976 startDate
= this.dateWindow_
[0];
977 endDate
= this.dateWindow_
[1];
979 startDate
= this.rawData_
[0][0];
980 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
983 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
984 this.layout_
.updateOptions({xTicks
: xTicks
});
987 // Time granularity enumeration
988 Dygraph
.SECONDLY
= 0;
989 Dygraph
.TWO_SECONDLY
= 1;
990 Dygraph
.FIVE_SECONDLY
= 2;
991 Dygraph
.TEN_SECONDLY
= 3;
992 Dygraph
.THIRTY_SECONDLY
= 4;
993 Dygraph
.MINUTELY
= 5;
994 Dygraph
.TWO_MINUTELY
= 6;
995 Dygraph
.FIVE_MINUTELY
= 7;
996 Dygraph
.TEN_MINUTELY
= 8;
997 Dygraph
.THIRTY_MINUTELY
= 9;
999 Dygraph
.TWO_HOURLY
= 11;
1000 Dygraph
.SIX_HOURLY
= 12;
1002 Dygraph
.WEEKLY
= 14;
1003 Dygraph
.MONTHLY
= 15;
1004 Dygraph
.QUARTERLY
= 16;
1005 Dygraph
.BIANNUAL
= 17;
1006 Dygraph
.ANNUAL
= 18;
1007 Dygraph
.DECADAL
= 19;
1008 Dygraph
.NUM_GRANULARITIES
= 20;
1010 Dygraph
.SHORT_SPACINGS
= [];
1011 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1012 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1013 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1014 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1015 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1016 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1017 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1018 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1019 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1020 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1021 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1022 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1023 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1024 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1025 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1029 // If we used this time granularity, how many ticks would there be?
1030 // This is only an approximation, but it's generally good enough.
1032 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1033 if (granularity
< Dygraph
.MONTHLY
) {
1034 // Generate one tick mark for every fixed interval of time.
1035 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1036 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1038 var year_mod
= 1; // e.g. to only print one point every 10 years.
1039 var num_months
= 12;
1040 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1041 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1042 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1043 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1045 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1046 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1047 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1053 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1054 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1056 // Returns an array containing {v: millis, label: label} dictionaries.
1058 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1060 if (granularity
< Dygraph
.MONTHLY
) {
1061 // Generate one tick mark for every fixed interval of time.
1062 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1063 var format
= '%d%b'; // e.g. "1Jan"
1065 // Find a time less than start_time which occurs on a "nice" time boundary
1066 // for this granularity.
1067 var g
= spacing
/ 1000;
1068 var d
= new Date(start_time
);
1069 if (g
<= 60) { // seconds
1070 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1074 if (g
<= 60) { // minutes
1075 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1080 if (g
<= 24) { // days
1081 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1086 if (g
== 7) { // one week
1087 d
.setDate(d
.getDate() - d
.getDay());
1092 start_time
= d
.getTime();
1094 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1095 var d
= new Date(t
);
1096 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1097 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1098 // the extra hour covers DST problems.
1099 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1101 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1105 // Display a tick mark on the first of a set of months of each year.
1106 // Years get a tick mark iff y % year_mod == 0. This is useful for
1107 // displaying a tick mark once every 10 years, say, on long time scales.
1109 var year_mod
= 1; // e.g. to only print one point every 10 years.
1111 if (granularity
== Dygraph
.MONTHLY
) {
1112 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1113 } else if (granularity
== Dygraph
.QUARTERLY
) {
1114 months
= [ 0, 3, 6, 9 ];
1115 } else if (granularity
== Dygraph
.BIANNUAL
) {
1117 } else if (granularity
== Dygraph
.ANNUAL
) {
1119 } else if (granularity
== Dygraph
.DECADAL
) {
1124 var start_year
= new Date(start_time
).getFullYear();
1125 var end_year
= new Date(end_time
).getFullYear();
1126 var zeropad
= Dygraph
.zeropad
;
1127 for (var i
= start_year
; i
<= end_year
; i
++) {
1128 if (i
% year_mod
!= 0) continue;
1129 for (var j
= 0; j
< months
.length
; j
++) {
1130 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1131 var t
= Date
.parse(date_str
);
1132 if (t
< start_time
|| t
> end_time
) continue;
1133 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1143 * Add ticks to the x-axis based on a date range.
1144 * @param {Number} startDate Start of the date window (millis since epoch)
1145 * @param {Number} endDate End of the date window (millis since epoch)
1146 * @return {Array.<Object>} Array of {label, value} tuples.
1149 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1151 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1152 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1153 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1160 return self
.GetXAxis(startDate
, endDate
, chosen
);
1162 // TODO(danvk): signal error.
1167 * Add ticks when the x axis has numbers on it (instead of dates)
1168 * @param {Number} startDate Start of the date window (millis since epoch)
1169 * @param {Number} endDate End of the date window (millis since epoch)
1170 * @return {Array.<Object>} Array of {label, value} tuples.
1173 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1175 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1176 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1177 // The first spacing greater than pixelsPerYLabel is what we use.
1178 // TODO(danvk): version that works on a log scale.
1179 if (self
.attr_("labelsKMG2")) {
1180 var mults
= [1, 2, 4, 8];
1182 var mults
= [1, 2, 5];
1184 var scale
, low_val
, high_val
, nTicks
;
1185 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1186 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1187 for (var i
= -10; i
< 50; i
++) {
1188 if (self
.attr_("labelsKMG2")) {
1189 var base_scale
= Math
.pow(16, i
);
1191 var base_scale
= Math
.pow(10, i
);
1193 for (var j
= 0; j
< mults
.length
; j
++) {
1194 scale
= base_scale
* mults
[j
];
1195 low_val
= Math
.floor(minV
/ scale
) * scale
;
1196 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1197 nTicks
= (high_val
- low_val
) / scale
;
1198 var spacing
= self
.height_
/ nTicks
;
1199 // wish I could break out of both loops at once...
1200 if (spacing
> pixelsPerTick
) break;
1202 if (spacing
> pixelsPerTick
) break;
1205 // Construct labels for the ticks
1209 if (self
.attr_("labelsKMB")) {
1211 k_labels
= [ "K", "M", "B", "T" ];
1213 if (self
.attr_("labelsKMG2")) {
1214 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1216 k_labels
= [ "k", "M", "G", "T" ];
1219 for (var i
= 0; i
< nTicks
; i
++) {
1220 var tickV
= low_val
+ i
* scale
;
1221 var absTickV
= Math
.abs(tickV
);
1222 var label
= self
.round_(tickV
, 2);
1223 if (k_labels
.length
) {
1224 // Round up to an appropriate unit.
1226 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1227 if (absTickV
>= n
) {
1228 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1233 ticks
.push( {label
: label
, v
: tickV
} );
1239 * Adds appropriate ticks on the y-axis
1240 * @param {Number} minY The minimum Y value in the data set
1241 * @param {Number} maxY The maximum Y value in the data set
1244 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1245 // Set the number of ticks so that the labels are human-friendly.
1246 // TODO(danvk): make this an attribute as well.
1247 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1248 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1252 // Computes the range of the data series (including confidence intervals).
1253 // series is either [ [x1, y1], [x2, y2], ... ] or
1254 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1255 // Returns [low, high]
1256 Dygraph
.prototype.extremeValues_
= function(series
) {
1257 var minY
= null, maxY
= null;
1259 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1261 // With custom bars, maxY is the max of the high values.
1262 for (var j
= 0; j
< series
.length
; j
++) {
1263 var y
= series
[j
][1][0];
1265 var low
= y
- series
[j
][1][1];
1266 var high
= y
+ series
[j
][1][2];
1267 if (low
> y
) low
= y
; // this can happen with custom bars,
1268 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1269 if (maxY
== null || high
> maxY
) {
1272 if (minY
== null || low
< minY
) {
1277 for (var j
= 0; j
< series
.length
; j
++) {
1278 var y
= series
[j
][1];
1279 if (y
=== null || isNaN(y
)) continue;
1280 if (maxY
== null || y
> maxY
) {
1283 if (minY
== null || y
< minY
) {
1289 return [minY
, maxY
];
1293 * Update the graph with new data. Data is in the format
1294 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1295 * or, if errorBars=true,
1296 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1297 * @param {Array.<Object>} data The data (see above)
1300 Dygraph
.prototype.drawGraph_
= function(data
) {
1301 var minY
= null, maxY
= null;
1302 this.layout_
.removeAllDatasets();
1304 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1306 // For stacked series.
1307 var cumulative_y
= [];
1310 // Loop over all fields in the dataset
1312 for (var i
= 1; i
< data
[0].length
; i
++) {
1313 if (!this.visibility()[i
- 1]) continue;
1316 for (var j
= 0; j
< data
.length
; j
++) {
1317 var date
= data
[j
][0];
1318 series
[j
] = [date
, data
[j
][i
]];
1320 series
= this.rollingAverage(series
, this.rollPeriod_
);
1322 // Prune down to the desired range, if necessary (for zooming)
1323 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1324 if (this.dateWindow_
) {
1325 var low
= this.dateWindow_
[0];
1326 var high
= this.dateWindow_
[1];
1328 for (var k
= 0; k
< series
.length
; k
++) {
1329 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1330 pruned
.push(series
[k
]);
1336 var extremes
= this.extremeValues_(series
);
1337 var thisMinY
= extremes
[0];
1338 var thisMaxY
= extremes
[1];
1339 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1340 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1344 for (var j
=0; j
<series
.length
; j
++)
1345 vals
[j
] = [series
[j
][0],
1346 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1347 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1348 } else if (this.attr_("stackedGraph")) {
1350 var l
= series
.length
;
1352 for (var j
= 0; j
< l
; j
++) {
1353 if (cumulative_y
[series
[j
][0]] === undefined
)
1354 cumulative_y
[series
[j
][0]] = 0;
1356 actual_y
= series
[j
][1];
1357 cumulative_y
[series
[j
][0]] += actual_y
;
1359 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1361 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1362 maxY
= cumulative_y
[series
[j
][0]];
1364 datasets
.push([this.attr_("labels")[i
], vals
]);
1365 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1367 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1371 // MERGE: move up into the stackedGraph section.
1372 if (datasets
.length
> 0) {
1373 for (var i
= (datasets
.length
- 1); i
>= 0; i
--) {
1374 this.layout_
.addDataset(datasets
[i
][0], datasets
[i
][1]);
1378 // Use some heuristics to come up with a good maxY value, unless it's been
1379 // set explicitly by the user.
1380 if (this.valueRange_
!= null) {
1381 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1383 // This affects the calculation of span, below.
1384 if (this.attr_("includeZero") && minY
> 0) {
1388 // Add some padding and round up to an integer to be human-friendly.
1389 var span
= maxY
- minY
;
1390 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1391 if (span
== 0) { span
= maxY
; }
1392 var maxAxisY
= maxY
+ 0.1 * span
;
1393 var minAxisY
= minY
- 0.1 * span
;
1395 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1396 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1397 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1399 if (this.attr_("includeZero")) {
1400 if (maxY
< 0) maxAxisY
= 0;
1401 if (minY
> 0) minAxisY
= 0;
1404 this.addYTicks_(minAxisY
, maxAxisY
);
1409 // Tell PlotKit to use this new data and render itself
1410 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1411 this.layout_
.evaluateWithError();
1412 this.plotter_
.clear();
1413 this.plotter_
.render();
1414 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1415 this.canvas_
.height
);
1417 if (this.attr_("drawCallback") !== null) {
1418 this.attr_("drawCallback")(this);
1423 * Calculates the rolling average of a data set.
1424 * If originalData is [label, val], rolls the average of those.
1425 * If originalData is [label, [, it's interpreted as [value, stddev]
1426 * and the roll is returned in the same form, with appropriately reduced
1427 * stddev for each value.
1428 * Note that this is where fractional input (i.e. '5/10') is converted into
1430 * @param {Array} originalData The data in the appropriate format (see above)
1431 * @param {Number} rollPeriod The number of days over which to average the data
1433 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1434 if (originalData
.length
< 2)
1435 return originalData
;
1436 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1437 var rollingData
= [];
1438 var sigma
= this.attr_("sigma");
1440 if (this.fractions_
) {
1442 var den
= 0; // numerator/denominator
1444 for (var i
= 0; i
< originalData
.length
; i
++) {
1445 num
+= originalData
[i
][1][0];
1446 den
+= originalData
[i
][1][1];
1447 if (i
- rollPeriod
>= 0) {
1448 num
-= originalData
[i
- rollPeriod
][1][0];
1449 den
-= originalData
[i
- rollPeriod
][1][1];
1452 var date
= originalData
[i
][0];
1453 var value
= den
? num
/ den
: 0.0;
1454 if (this.attr_("errorBars")) {
1455 if (this.wilsonInterval_
) {
1456 // For more details on this confidence interval, see:
1457 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1459 var p
= value
< 0 ? 0 : value
, n
= den
;
1460 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1461 var denom
= 1 + sigma
* sigma
/ den
;
1462 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1463 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1464 rollingData
[i
] = [date
,
1465 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1467 rollingData
[i
] = [date
, [0, 0, 0]];
1470 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1471 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1474 rollingData
[i
] = [date
, mult
* value
];
1477 } else if (this.attr_("customBars")) {
1482 for (var i
= 0; i
< originalData
.length
; i
++) {
1483 var data
= originalData
[i
][1];
1485 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1487 if (y
!= null && !isNaN(y
)) {
1493 if (i
- rollPeriod
>= 0) {
1494 var prev
= originalData
[i
- rollPeriod
];
1495 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1502 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1503 1.0 * (mid
- low
) / count
,
1504 1.0 * (high
- mid
) / count
]];
1507 // Calculate the rolling average for the first rollPeriod - 1 points where
1508 // there is not enough data to roll over the full number of days
1509 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1510 if (!this.attr_("errorBars")){
1511 if (rollPeriod
== 1) {
1512 return originalData
;
1515 for (var i
= 0; i
< originalData
.length
; i
++) {
1518 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1519 var y
= originalData
[j
][1];
1520 if (y
== null || isNaN(y
)) continue;
1522 sum
+= originalData
[j
][1];
1525 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1527 rollingData
[i
] = [originalData
[i
][0], null];
1532 for (var i
= 0; i
< originalData
.length
; i
++) {
1536 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1537 var y
= originalData
[j
][1][0];
1538 if (y
== null || isNaN(y
)) continue;
1540 sum
+= originalData
[j
][1][0];
1541 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1544 var stddev
= Math
.sqrt(variance
) / num_ok
;
1545 rollingData
[i
] = [originalData
[i
][0],
1546 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1548 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1558 * Parses a date, returning the number of milliseconds since epoch. This can be
1559 * passed in as an xValueParser in the Dygraph constructor.
1560 * TODO(danvk): enumerate formats that this understands.
1561 * @param {String} A date in YYYYMMDD format.
1562 * @return {Number} Milliseconds since epoch.
1565 Dygraph
.dateParser
= function(dateStr
, self
) {
1568 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1569 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1570 while (dateStrSlashed
.search("-") != -1) {
1571 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1573 d
= Date
.parse(dateStrSlashed
);
1574 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1575 // TODO(danvk): remove support for this format. It's confusing.
1576 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1577 + "/" + dateStr
.substr(6,2);
1578 d
= Date
.parse(dateStrSlashed
);
1580 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1581 // "2009/07/12 12:34:56"
1582 d
= Date
.parse(dateStr
);
1585 if (!d
|| isNaN(d
)) {
1586 self
.error("Couldn't parse " + dateStr
+ " as a date");
1592 * Detects the type of the str (date or numeric) and sets the various
1593 * formatting attributes in this.attrs_ based on this type.
1594 * @param {String} str An x value.
1597 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1599 if (str
.indexOf('-') >= 0 ||
1600 str
.indexOf('/') >= 0 ||
1601 isNaN(parseFloat(str
))) {
1603 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1604 // TODO(danvk): remove support for this format.
1609 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1610 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1611 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1613 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1614 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1615 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1620 * Parses a string in a special csv format. We expect a csv file where each
1621 * line is a date point, and the first field in each line is the date string.
1622 * We also expect that all remaining fields represent series.
1623 * if the errorBars attribute is set, then interpret the fields as:
1624 * date, series1, stddev1, series2, stddev2, ...
1625 * @param {Array.<Object>} data See above.
1628 * @return Array.<Object> An array with one entry for each row. These entries
1629 * are an array of cells in that row. The first entry is the parsed x-value for
1630 * the row. The second, third, etc. are the y-values. These can take on one of
1631 * three forms, depending on the CSV and constructor parameters:
1633 * 2. [ value, stddev ]
1634 * 3. [ low value, center value, high value ]
1636 Dygraph
.prototype.parseCSV_
= function(data
) {
1638 var lines
= data
.split("\n");
1640 // Use the default delimiter or fall back to a tab if that makes sense.
1641 var delim
= this.attr_('delimiter');
1642 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1647 if (this.labelsFromCSV_
) {
1649 this.attrs_
.labels
= lines
[0].split(delim
);
1653 var defaultParserSet
= false; // attempt to auto-detect x value type
1654 var expectedCols
= this.attr_("labels").length
;
1655 var outOfOrder
= false;
1656 for (var i
= start
; i
< lines
.length
; i
++) {
1657 var line
= lines
[i
];
1658 if (line
.length
== 0) continue; // skip blank lines
1659 if (line
[0] == '#') continue; // skip comment lines
1660 var inFields
= line
.split(delim
);
1661 if (inFields
.length
< 2) continue;
1664 if (!defaultParserSet
) {
1665 this.detectTypeFromString_(inFields
[0]);
1666 xParser
= this.attr_("xValueParser");
1667 defaultParserSet
= true;
1669 fields
[0] = xParser(inFields
[0], this);
1671 // If fractions are expected, parse the numbers as "A/B
"
1672 if (this.fractions_) {
1673 for (var j = 1; j < inFields.length; j++) {
1674 // TODO(danvk): figure out an appropriate way to flag parse errors.
1675 var vals = inFields[j].split("/");
1676 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1678 } else if (this.attr_("errorBars
")) {
1679 // If there are error bars, values are (value, stddev) pairs
1680 for (var j = 1; j < inFields.length; j += 2)
1681 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1682 parseFloat(inFields[j + 1])];
1683 } else if (this.attr_("customBars
")) {
1684 // Bars are a low;center;high tuple
1685 for (var j = 1; j < inFields.length; j++) {
1686 var vals = inFields[j].split(";");
1687 fields[j] = [ parseFloat(vals[0]),
1688 parseFloat(vals[1]),
1689 parseFloat(vals[2]) ];
1692 // Values are just numbers
1693 for (var j = 1; j < inFields.length; j++) {
1694 fields[j] = parseFloat(inFields[j]);
1697 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1702 if (fields.length != expectedCols) {
1703 this.error("Number of columns
in line
" + i + " (" + fields.length +
1704 ") does not agree
with number of
labels (" + expectedCols +
1710 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1711 ret.sort(function(a,b) { return a[0] - b[0] });
1718 * The user has provided their data as a pre-packaged JS array. If the x values
1719 * are numeric, this is the same as dygraphs' internal format. If the x values
1720 * are dates, we need to convert them from Date objects to ms since epoch.
1721 * @param {Array.<Object>} data
1722 * @return {Array.<Object>} data with numeric x values.
1724 Dygraph.prototype.parseArray_ = function(data) {
1725 // Peek at the first x value to see if it's numeric.
1726 if (data.length == 0) {
1727 this.error("Can
't plot empty data set");
1730 if (data[0].length == 0) {
1731 this.error("Data set cannot contain an empty row");
1735 if (this.attr_("labels") == null) {
1736 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1737 "in the options parameter");
1738 this.attrs_.labels = [ "X" ];
1739 for (var i = 1; i < data[0].length; i++) {
1740 this.attrs_.labels.push("Y" + i);
1744 if (Dygraph.isDateLike(data[0][0])) {
1745 // Some intelligent defaults for a date x-axis.
1746 this.attrs_.xValueFormatter = Dygraph.dateString_;
1747 this.attrs_.xTicker = Dygraph.dateTicker;
1749 // Assume they're all dates
.
1750 var parsedData
= Dygraph
.clone(data
);
1751 for (var i
= 0; i
< data
.length
; i
++) {
1752 if (parsedData
[i
].length
== 0) {
1753 this.error("Row " << (1 + i
) << " of data is empty");
1756 if (parsedData
[i
][0] == null
1757 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1758 this.error("x value in row " << (1 + i
) << " is not a Date");
1761 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1765 // Some intelligent defaults for a numeric x-axis.
1766 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1767 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1773 * Parses a DataTable object from gviz.
1774 * The data is expected to have a first column that is either a date or a
1775 * number. All subsequent columns must be numbers. If there is a clear mismatch
1776 * between this.xValueParser_ and the type of the first column, it will be
1777 * fixed. Returned value is in the same format as return value of parseCSV_.
1778 * @param {Array.<Object>} data See above.
1781 Dygraph
.prototype.parseDataTable_
= function(data
) {
1782 var cols
= data
.getNumberOfColumns();
1783 var rows
= data
.getNumberOfRows();
1785 // Read column labels
1787 for (var i
= 0; i
< cols
; i
++) {
1788 labels
.push(data
.getColumnLabel(i
));
1789 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1791 this.attrs_
.labels
= labels
;
1792 cols
= labels
.length
;
1794 var indepType
= data
.getColumnType(0);
1795 if (indepType
== 'date' || indepType
== 'datetime') {
1796 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1797 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1798 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1799 } else if (indepType
== 'number') {
1800 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1801 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1802 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1804 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1805 "column 1 of DataTable input (Got '" + indepType
+ "')");
1810 var outOfOrder
= false;
1811 for (var i
= 0; i
< rows
; i
++) {
1813 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1814 data
.getValue(i
, 0) === null) {
1815 this.warning("Ignoring row " + i
+
1816 " of DataTable because of undefined or null first column.");
1820 if (indepType
== 'date' || indepType
== 'datetime') {
1821 row
.push(data
.getValue(i
, 0).getTime());
1823 row
.push(data
.getValue(i
, 0));
1825 if (!this.attr_("errorBars")) {
1826 for (var j
= 1; j
< cols
; j
++) {
1827 row
.push(data
.getValue(i
, j
));
1830 for (var j
= 0; j
< cols
- 1; j
++) {
1831 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1834 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1841 this.warn("DataTable is out of order; order it correctly to speed loading.");
1842 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1847 // These functions are all based on MochiKit.
1848 Dygraph
.update
= function (self
, o
) {
1849 if (typeof(o
) != 'undefined' && o
!== null) {
1851 if (o
.hasOwnProperty(k
)) {
1859 Dygraph
.isArrayLike
= function (o
) {
1860 var typ
= typeof(o
);
1862 (typ
!= 'object' && !(typ
== 'function' &&
1863 typeof(o
.item
) == 'function')) ||
1865 typeof(o
.length
) != 'number' ||
1873 Dygraph
.isDateLike
= function (o
) {
1874 if (typeof(o
) != "object" || o
=== null ||
1875 typeof(o
.getTime
) != 'function') {
1881 Dygraph
.clone
= function(o
) {
1882 // TODO(danvk): figure out how MochiKit's version works
1884 for (var i
= 0; i
< o
.length
; i
++) {
1885 if (Dygraph
.isArrayLike(o
[i
])) {
1886 r
.push(Dygraph
.clone(o
[i
]));
1896 * Get the CSV data. If it's in a function, call that function. If it's in a
1897 * file, do an XMLHttpRequest to get it.
1900 Dygraph
.prototype.start_
= function() {
1901 if (typeof this.file_
== 'function') {
1902 // CSV string. Pretend we got it via XHR.
1903 this.loadedEvent_(this.file_());
1904 } else if (Dygraph
.isArrayLike(this.file_
)) {
1905 this.rawData_
= this.parseArray_(this.file_
);
1906 this.drawGraph_(this.rawData_
);
1907 } else if (typeof this.file_
== 'object' &&
1908 typeof this.file_
.getColumnRange
== 'function') {
1909 // must be a DataTable from gviz.
1910 this.rawData_
= this.parseDataTable_(this.file_
);
1911 this.drawGraph_(this.rawData_
);
1912 } else if (typeof this.file_
== 'string') {
1913 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1914 if (this.file_
.indexOf('\n') >= 0) {
1915 this.loadedEvent_(this.file_
);
1917 var req
= new XMLHttpRequest();
1919 req
.onreadystatechange
= function () {
1920 if (req
.readyState
== 4) {
1921 if (req
.status
== 200) {
1922 caller
.loadedEvent_(req
.responseText
);
1927 req
.open("GET", this.file_
, true);
1931 this.error("Unknown data format: " + (typeof this.file_
));
1936 * Changes various properties of the graph. These can include:
1938 * <li>file: changes the source data for the graph</li>
1939 * <li>errorBars: changes whether the data contains stddev</li>
1941 * @param {Object} attrs The new properties and values
1943 Dygraph
.prototype.updateOptions
= function(attrs
) {
1944 // TODO(danvk): this is a mess. Rethink this function.
1945 if (attrs
.rollPeriod
) {
1946 this.rollPeriod_
= attrs
.rollPeriod
;
1948 if (attrs
.dateWindow
) {
1949 this.dateWindow_
= attrs
.dateWindow
;
1951 if (attrs
.valueRange
) {
1952 this.valueRange_
= attrs
.valueRange
;
1954 Dygraph
.update(this.user_attrs_
, attrs
);
1956 this.labelsFromCSV_
= (this.attr_("labels") == null);
1958 // TODO(danvk): this doesn't match the constructor logic
1959 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1960 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1961 this.file_
= attrs
['file'];
1964 this.drawGraph_(this.rawData_
);
1969 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1970 * containing div (which has presumably changed size since the dygraph was
1971 * instantiated. If the width/height are specified, the div will be resized.
1973 * This is far more efficient than destroying and re-instantiating a
1974 * Dygraph, since it doesn't have to reparse the underlying data.
1976 * @param {Number} width Width (in pixels)
1977 * @param {Number} height Height (in pixels)
1979 Dygraph
.prototype.resize
= function(width
, height
) {
1980 if ((width
=== null) != (height
=== null)) {
1981 this.warn("Dygraph.resize() should be called with zero parameters or " +
1982 "two non-NULL parameters. Pretending it was zero.");
1983 width
= height
= null;
1986 // TODO(danvk): there should be a clear() method.
1987 this.maindiv_
.innerHTML
= "";
1988 this.attrs_
.labelsDiv
= null;
1991 this.maindiv_
.style
.width
= width
+ "px";
1992 this.maindiv_
.style
.height
= height
+ "px";
1993 this.width_
= width
;
1994 this.height_
= height
;
1996 this.width_
= this.maindiv_
.offsetWidth
;
1997 this.height_
= this.maindiv_
.offsetHeight
;
2000 this.createInterface_();
2001 this.drawGraph_(this.rawData_
);
2005 * Adjusts the number of days in the rolling average. Updates the graph to
2006 * reflect the new averaging period.
2007 * @param {Number} length Number of days over which to average the data.
2009 Dygraph
.prototype.adjustRoll
= function(length
) {
2010 this.rollPeriod_
= length
;
2011 this.drawGraph_(this.rawData_
);
2015 * Returns a boolean array of visibility statuses.
2017 Dygraph
.prototype.visibility
= function() {
2018 // Do lazy-initialization, so that this happens after we know the number of
2020 if (!this.attr_("visibility")) {
2021 this.attrs_
["visibility"] = [];
2023 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2024 this.attr_("visibility").push(true);
2026 return this.attr_("visibility");
2030 * Changes the visiblity of a series.
2032 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2033 var x
= this.visibility();
2034 if (num
< 0 && num
>= x
.length
) {
2035 this.warn("invalid series number in setVisibility: " + num
);
2038 this.drawGraph_(this.rawData_
);
2043 * Create a new canvas element. This is more complex than a simple
2044 * document.createElement("canvas") because of IE and excanvas.
2046 Dygraph
.createCanvas
= function() {
2047 var canvas
= document
.createElement("canvas");
2049 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2051 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2059 * A wrapper around Dygraph that implements the gviz API.
2060 * @param {Object} container The DOM object the visualization should live in.
2062 Dygraph
.GVizChart
= function(container
) {
2063 this.container
= container
;
2066 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2067 this.container
.innerHTML
= '';
2068 this.date_graph
= new Dygraph(this.container
, data
, options
);
2071 // Older pages may still use this name.
2072 DateGraph
= Dygraph
;