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,
95 showLabelsOnHighlight
: true,
97 yValueFormatter
: null,
102 axisLabelFontSize
: 14,
108 xValueFormatter
: Dygraph
.dateString_
,
109 xValueParser
: Dygraph
.dateParser
,
110 xTicker
: Dygraph
.dateTicker
,
118 wilsonInterval
: true, // only relevant if fractions is true
124 hideOverlayOnMouseOut
: true
127 // Various logging levels.
133 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
134 // Labels is no longer a constructor parameter, since it's typically set
135 // directly from the data source. It also conains a name for the x-axis,
136 // which the previous constructor form did not.
137 if (labels
!= null) {
138 var new_labels
= ["Date"];
139 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
140 Dygraph
.update(attrs
, { 'labels': new_labels
});
142 this.__init__(div
, file
, attrs
);
146 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
147 * and interaction <canvas> inside of it. See the constructor for details
149 * @param {Element} div the Element to render the graph into.
150 * @param {String | Function} file Source data
151 * @param {Object} attrs Miscellaneous other options
154 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
155 // Support two-argument constructor
156 if (attrs
== null) { attrs
= {}; }
158 // Copy the important bits into the object
159 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
162 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
163 this.previousVerticalX_
= -1;
164 this.fractions_
= attrs
.fractions
|| false;
165 this.dateWindow_
= attrs
.dateWindow
|| null;
166 this.valueRange_
= attrs
.valueRange
|| null;
167 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
169 // Clear the div. This ensure that, if multiple dygraphs are passed the same
170 // div, then only one will be drawn.
173 // If the div isn't already sized then inherit from our attrs or
174 // give it a default size.
175 if (div
.style
.width
== '') {
176 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
178 if (div
.style
.height
== '') {
179 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
181 this.width_
= parseInt(div
.style
.width
, 10);
182 this.height_
= parseInt(div
.style
.height
, 10);
183 // The div might have been specified as percent of the current window size,
184 // convert that to an appropriate number of pixels.
185 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
186 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
187 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
189 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
190 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
193 if (attrs
['stackedGraph']) {
194 attrs
['fillGraph'] = true;
195 // TODO(nikhilk): Add any other stackedGraph checks here.
198 // Dygraphs has many options, some of which interact with one another.
199 // To keep track of everything, we maintain two sets of options:
201 // this.user_attrs_ only options explicitly set by the user.
202 // this.attrs_ defaults, options derived from user_attrs_, data.
204 // Options are then accessed this.attr_('attr'), which first looks at
205 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
206 // defaults without overriding behavior that the user specifically asks for.
207 this.user_attrs_
= {};
208 Dygraph
.update(this.user_attrs_
, attrs
);
211 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
213 // Make a note of whether labels will be pulled from the CSV file.
214 this.labelsFromCSV_
= (this.attr_("labels") == null);
216 // Create the containing DIV and other interactive elements
217 this.createInterface_();
222 Dygraph
.prototype.attr_
= function(name
) {
223 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
224 return this.user_attrs_
[name
];
225 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
226 return this.attrs_
[name
];
232 // TODO(danvk): any way I can get the line numbers to be this.warn call?
233 Dygraph
.prototype.log
= function(severity
, message
) {
234 if (typeof(console
) != 'undefined') {
237 console
.debug('dygraphs: ' + message
);
240 console
.info('dygraphs: ' + message
);
242 case Dygraph
.WARNING
:
243 console
.warn('dygraphs: ' + message
);
246 console
.error('dygraphs: ' + message
);
251 Dygraph
.prototype.info
= function(message
) {
252 this.log(Dygraph
.INFO
, message
);
254 Dygraph
.prototype.warn
= function(message
) {
255 this.log(Dygraph
.WARNING
, message
);
257 Dygraph
.prototype.error
= function(message
) {
258 this.log(Dygraph
.ERROR
, message
);
262 * Returns the current rolling period, as set by the user or an option.
263 * @return {Number} The number of days in the rolling window
265 Dygraph
.prototype.rollPeriod
= function() {
266 return this.rollPeriod_
;
269 Dygraph
.addEvent
= function(el
, evt
, fn
) {
270 var normed_fn
= function(e
) {
271 if (!e
) var e
= window
.event
;
274 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
275 el
.addEventListener(evt
, normed_fn
, false);
277 el
.attachEvent('on' + evt
, normed_fn
);
282 * Generates interface elements for the Dygraph: a containing div, a div to
283 * display the current point, and a textbox to adjust the rolling average
284 * period. Also creates the Renderer/Layout elements.
287 Dygraph
.prototype.createInterface_
= function() {
288 // Create the all-enclosing graph div
289 var enclosing
= this.maindiv_
;
291 this.graphDiv
= document
.createElement("div");
292 this.graphDiv
.style
.width
= this.width_
+ "px";
293 this.graphDiv
.style
.height
= this.height_
+ "px";
294 enclosing
.appendChild(this.graphDiv
);
296 // Create the canvas for interactive parts of the chart.
297 // this.canvas_ = document.createElement("canvas");
298 this.canvas_
= Dygraph
.createCanvas();
299 this.canvas_
.style
.position
= "absolute";
300 this.canvas_
.width
= this.width_
;
301 this.canvas_
.height
= this.height_
;
302 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
303 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
304 this.graphDiv
.appendChild(this.canvas_
);
306 // ... and for static parts of the chart.
307 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
310 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
311 dygraph
.mouseMove_(e
);
313 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
314 dygraph
.mouseOut_(e
);
317 // Create the grapher
318 // TODO(danvk): why does the Layout need its own set of options?
319 this.layoutOptions_
= { 'xOriginIsZero': false };
320 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
321 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
322 Dygraph
.update(this.layoutOptions_
, {
323 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
325 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
327 // TODO(danvk): why does the Renderer need its own set of options?
328 this.renderOptions_
= { colorScheme
: this.colors_
,
330 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
331 Dygraph
.update(this.renderOptions_
, this.attrs_
);
332 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
333 this.plotter_
= new DygraphCanvasRenderer(this,
334 this.hidden_
, this.layout_
,
335 this.renderOptions_
);
337 this.createStatusMessage_();
338 this.createRollInterface_();
339 this.createDragInterface_();
343 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
344 * this particular canvas. All Dygraph work is done on this.canvas_.
345 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
346 * @return {Object} The newly-created canvas
349 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
350 // var h = document.createElement("canvas");
351 var h
= Dygraph
.createCanvas();
352 h
.style
.position
= "absolute";
353 h
.style
.top
= canvas
.style
.top
;
354 h
.style
.left
= canvas
.style
.left
;
355 h
.width
= this.width_
;
356 h
.height
= this.height_
;
357 h
.style
.width
= this.width_
+ "px"; // for IE
358 h
.style
.height
= this.height_
+ "px"; // for IE
359 this.graphDiv
.appendChild(h
);
363 // Taken from MochiKit.Color
364 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
368 if (saturation
=== 0) {
373 var i
= Math
.floor(hue
* 6);
374 var f
= (hue
* 6) - i
;
375 var p
= value
* (1 - saturation
);
376 var q
= value
* (1 - (saturation
* f
));
377 var t
= value
* (1 - (saturation
* (1 - f
)));
379 case 1: red
= q
; green
= value
; blue
= p
; break;
380 case 2: red
= p
; green
= value
; blue
= t
; break;
381 case 3: red
= p
; green
= q
; blue
= value
; break;
382 case 4: red
= t
; green
= p
; blue
= value
; break;
383 case 5: red
= value
; green
= p
; blue
= q
; break;
384 case 6: // fall through
385 case 0: red
= value
; green
= t
; blue
= p
; break;
388 red
= Math
.floor(255 * red
+ 0.5);
389 green
= Math
.floor(255 * green
+ 0.5);
390 blue
= Math
.floor(255 * blue
+ 0.5);
391 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
396 * Generate a set of distinct colors for the data series. This is done with a
397 * color wheel. Saturation/Value are customizable, and the hue is
398 * equally-spaced around the color wheel. If a custom set of colors is
399 * specified, that is used instead.
402 Dygraph
.prototype.setColors_
= function() {
403 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
404 // away with this.renderOptions_.
405 var num
= this.attr_("labels").length
- 1;
407 var colors
= this.attr_('colors');
409 var sat
= this.attr_('colorSaturation') || 1.0;
410 var val
= this.attr_('colorValue') || 0.5;
411 for (var i
= 1; i
<= num
; i
++) {
412 if (!this.visibility()[i
-1]) continue;
413 // alternate colors for high contrast.
414 var idx
= i
- parseInt(i
% 2 ? i
/ 2 : (i - num)/2, 10);
415 var hue
= (1.0 * idx
/ (1 + num
));
416 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
419 for (var i
= 0; i
< num
; i
++) {
420 if (!this.visibility()[i
]) continue;
421 var colorStr
= colors
[i
% colors
.length
];
422 this.colors_
.push(colorStr
);
426 // TODO(danvk): update this w/r
/t/ the
new options system
.
427 this.renderOptions_
.colorScheme
= this.colors_
;
428 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
429 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
430 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
434 * Return the list of colors. This is either the list of colors passed in the
435 * attributes, or the autogenerated list of rgb(r,g,b) strings.
436 * @return {Array<string>} The list of colors.
438 Dygraph
.prototype.getColors
= function() {
442 // The following functions are from quirksmode.org
443 // http://www.quirksmode.org/js
/findpos
.html
444 Dygraph
.findPosX
= function(obj
) {
446 if (obj
.offsetParent
) {
447 while (obj
.offsetParent
) {
448 curleft
+= obj
.offsetLeft
;
449 obj
= obj
.offsetParent
;
457 Dygraph
.findPosY
= function(obj
) {
459 if (obj
.offsetParent
) {
460 while (obj
.offsetParent
) {
461 curtop
+= obj
.offsetTop
;
462 obj
= obj
.offsetParent
;
471 * Create the div that contains information on the selected point(s)
472 * This goes in the top right of the canvas, unless an external div has already
476 Dygraph
.prototype.createStatusMessage_
= function(){
477 if (!this.attr_("labelsDiv")) {
478 var divWidth
= this.attr_('labelsDivWidth');
480 "position": "absolute",
483 "width": divWidth
+ "px",
485 "left": (this.width_
- divWidth
- 2) + "px",
486 "background": "white",
488 "overflow": "hidden"};
489 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
490 var div
= document
.createElement("div");
491 for (var name
in messagestyle
) {
492 if (messagestyle
.hasOwnProperty(name
)) {
493 div
.style
[name
] = messagestyle
[name
];
496 this.graphDiv
.appendChild(div
);
497 this.attrs_
.labelsDiv
= div
;
502 * Create the text box to adjust the averaging period
503 * @return {Object} The newly-created text box
506 Dygraph
.prototype.createRollInterface_
= function() {
507 var display
= this.attr_('showRoller') ? "block" : "none";
508 var textAttr
= { "position": "absolute",
510 "top": (this.plotter_
.area
.h
- 25) + "px",
511 "left": (this.plotter_
.area
.x
+ 1) + "px",
514 var roller
= document
.createElement("input");
515 roller
.type
= "text";
517 roller
.value
= this.rollPeriod_
;
518 for (var name
in textAttr
) {
519 if (textAttr
.hasOwnProperty(name
)) {
520 roller
.style
[name
] = textAttr
[name
];
524 var pa
= this.graphDiv
;
525 pa
.appendChild(roller
);
527 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
531 // These functions are taken from MochiKit.Signal
532 Dygraph
.pageX
= function(e
) {
534 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
537 var b
= document
.body
;
539 (de
.scrollLeft
|| b
.scrollLeft
) -
540 (de
.clientLeft
|| 0);
544 Dygraph
.pageY
= function(e
) {
546 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
549 var b
= document
.body
;
551 (de
.scrollTop
|| b
.scrollTop
) -
557 * Set up all the mouse handlers needed to capture dragging behavior for zoom
561 Dygraph
.prototype.createDragInterface_
= function() {
564 // Tracks whether the mouse is down right now
565 var isZooming
= false;
566 var isPanning
= false;
567 var dragStartX
= null;
568 var dragStartY
= null;
572 var draggingDate
= null;
573 var dateRange
= null;
575 // Utility function to convert page-wide coordinates to canvas coords
578 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
579 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
581 // Draw zoom rectangles when the mouse is down and the user moves around
582 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
584 dragEndX
= getX(event
);
585 dragEndY
= getY(event
);
587 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
589 } else if (isPanning
) {
590 dragEndX
= getX(event
);
591 dragEndY
= getY(event
);
593 // Want to have it so that:
594 // 1. draggingDate appears at dragEndX
595 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
597 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
598 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
599 self
.drawGraph_(self
.rawData_
);
603 // Track the beginning of drag events
604 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
605 px
= Dygraph
.findPosX(self
.canvas_
);
606 py
= Dygraph
.findPosY(self
.canvas_
);
607 dragStartX
= getX(event
);
608 dragStartY
= getY(event
);
610 if (event
.altKey
|| event
.shiftKey
) {
611 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
613 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
614 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
621 // If the user releases the mouse button during a drag, but not over the
622 // canvas, then it doesn't count as a zooming action.
623 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
624 if (isZooming
|| isPanning
) {
637 // Temporarily cancel the dragging event when the mouse leaves the graph
638 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
645 // If the mouse is released on the canvas during a drag event, then it's a
646 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
647 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
650 dragEndX
= getX(event
);
651 dragEndY
= getY(event
);
652 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
653 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
655 if (regionWidth
< 2 && regionHeight
< 2 &&
656 self
.attr_('clickCallback') != null &&
657 self
.lastx_
!= undefined
) {
658 // TODO(danvk): pass along more info about the points.
659 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
662 if (regionWidth
>= 10) {
663 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
664 Math
.max(dragStartX
, dragEndX
));
666 self
.canvas_
.getContext("2d").clearRect(0, 0,
668 self
.canvas_
.height
);
682 // Double-clicking zooms back out
683 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
684 if (self
.dateWindow_
== null) return;
685 self
.dateWindow_
= null;
686 self
.drawGraph_(self
.rawData_
);
687 var minDate
= self
.rawData_
[0][0];
688 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
689 if (self
.attr_("zoomCallback")) {
690 self
.attr_("zoomCallback")(minDate
, maxDate
);
696 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
697 * up any previous zoom rectangles that were drawn. This could be optimized to
698 * avoid extra redrawing, but it's tricky to avoid interactions with the status
700 * @param {Number} startX The X position where the drag started, in canvas
702 * @param {Number} endX The current X position of the drag, in canvas coords.
703 * @param {Number} prevEndX The value of endX on the previous call to this
704 * function. Used to avoid excess redrawing
707 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
708 var ctx
= this.canvas_
.getContext("2d");
710 // Clean up from the previous rect if necessary
712 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
713 Math
.abs(startX
- prevEndX
), this.height_
);
716 // Draw a light-grey rectangle to show the new viewing area
717 if (endX
&& startX
) {
718 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
719 ctx
.fillRect(Math
.min(startX
, endX
), 0,
720 Math
.abs(endX
- startX
), this.height_
);
725 * Zoom to something containing [lowX, highX]. These are pixel coordinates
726 * in the canvas. The exact zoom window may be slightly larger if there are no
727 * data points near lowX or highX. This function redraws the graph.
728 * @param {Number} lowX The leftmost pixel value that should be visible.
729 * @param {Number} highX The rightmost pixel value that should be visible.
732 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
733 // Find the earliest and latest dates contained in this canvasx range.
734 var points
= this.layout_
.points
;
737 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
738 for (var i
= 0; i
< points
.length
; i
++) {
739 var cx
= points
[i
].canvasx
;
740 var x
= points
[i
].xval
;
741 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
742 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
744 // Use the extremes if either is missing
745 if (minDate
== null) minDate
= points
[0].xval
;
746 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
748 this.dateWindow_
= [minDate
, maxDate
];
749 this.drawGraph_(this.rawData_
);
750 if (this.attr_("zoomCallback")) {
751 this.attr_("zoomCallback")(minDate
, maxDate
);
756 * When the mouse moves in the canvas, display information about a nearby data
757 * point and draw dots over those points in the data series. This function
758 * takes care of cleanup of previously-drawn dots.
759 * @param {Object} event The mousemove event from the browser.
762 Dygraph
.prototype.mouseMove_
= function(event
) {
763 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
764 var points
= this.layout_
.points
;
769 // Loop through all the points and find the date nearest to our current
771 var minDist
= 1e+100;
773 for (var i
= 0; i
< points
.length
; i
++) {
774 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
775 if (dist
> minDist
) break;
779 if (idx
>= 0) lastx
= points
[idx
].xval
;
780 // Check that you can really highlight the last day's data
781 if (canvasx
> points
[points
.length
-1].canvasx
)
782 lastx
= points
[points
.length
-1].xval
;
784 // Extract the points we've selected
785 this.selPoints_
= [];
786 for (var i
= 0; i
< points
.length
; i
++) {
787 if (points
[i
].xval
== lastx
) {
790 for (var k
in points
[i
]) {
793 this.selPoints_
.push(p
);
797 if (this.attr_("stackedGraph")) {
798 // "unstack" the points.
799 var cumulative_sum
= 0;
800 for (var j
= this.selPoints_
.length
- 1; j
>= 0; j
--) {
801 this.selPoints_
[j
].yval
-= cumulative_sum
;
802 cumulative_sum
+= this.selPoints_
[j
].yval
;
806 if (this.attr_("highlightCallback")) {
807 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
810 // Clear the previously drawn vertical, if there is one
811 var circleSize
= this.attr_('highlightCircleSize');
812 var ctx
= this.canvas_
.getContext("2d");
813 if (this.previousVerticalX_
>= 0) {
814 var px
= this.previousVerticalX_
;
815 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
818 var isOK
= function(x
) { return x
&& !isNaN(x
); };
820 if (this.selPoints_
.length
> 0) {
821 var canvasx
= this.selPoints_
[0].canvasx
;
822 var clen
= this.colors_
.length
;
824 if (this.attr_('showLabelsOnHighlight')) {
825 // Set the status message to indicate the selected point(s)
826 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
827 var fmtFunc
= this.attr_('yValueFormatter');
828 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
829 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
830 if (this.attr_("labelsSeparateLines")) {
833 var point
= this.selPoints_
[i
];
834 var c
= new RGBColor(this.colors_
[i
%clen
]);
835 var yval
= fmtFunc
? fmtFunc(point
.yval
) : this.round_(point
.yval
, 2);
836 replace
+= " <b><font color='" + c
.toHex() + "'>"
837 + point
.name
+ "</font></b>:"
840 this.attr_("labelsDiv").innerHTML
= replace
;
843 // Save last x position for callbacks.
846 // Draw colored circles over the center of each selected point
848 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
849 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
851 ctx
.fillStyle
= this.colors_
[i
%clen
];
852 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
853 0, 2 * Math
.PI
, false);
858 this.previousVerticalX_
= canvasx
;
863 * The mouse has left the canvas. Clear out whatever artifacts remain
864 * @param {Object} event the mouseout event from the browser.
867 Dygraph
.prototype.mouseOut_
= function(event
) {
868 if (this.attr_("hideOverlayOnMouseOut")) {
869 // Get rid of the overlay data
870 var ctx
= this.canvas_
.getContext("2d");
871 ctx
.clearRect(0, 0, this.width_
, this.height_
);
872 this.attr_("labelsDiv").innerHTML
= "";
876 Dygraph
.zeropad
= function(x
) {
877 if (x
< 10) return "0" + x
; else return "" + x
;
881 * Return a string version of the hours, minutes and seconds portion of a date.
882 * @param {Number} date The JavaScript date (ms since epoch)
883 * @return {String} A time of the form "HH:MM:SS"
886 Dygraph
.prototype.hmsString_
= function(date
) {
887 var zeropad
= Dygraph
.zeropad
;
888 var d
= new Date(date
);
889 if (d
.getSeconds()) {
890 return zeropad(d
.getHours()) + ":" +
891 zeropad(d
.getMinutes()) + ":" +
892 zeropad(d
.getSeconds());
893 } else if (d
.getMinutes()) {
894 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
896 return zeropad(d
.getHours());
901 * Convert a JS date (millis since epoch) to YYYY/MM/DD
902 * @param {Number} date The JavaScript date (ms since epoch)
903 * @return {String} A date of the form "YYYY/MM/DD"
905 * TODO(danvk): why is this part of the prototype?
907 Dygraph
.dateString_
= function(date
, self
) {
908 var zeropad
= Dygraph
.zeropad
;
909 var d
= new Date(date
);
912 var year
= "" + d
.getFullYear();
913 // Get a 0 padded month string
914 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
915 // Get a 0 padded day string
916 var day
= zeropad(d
.getDate());
919 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
920 if (frac
) ret
= " " + self
.hmsString_(date
);
922 return year
+ "/" + month + "/" + day
+ ret
;
926 * Round a number to the specified number of digits past the decimal point.
927 * @param {Number} num The number to round
928 * @param {Number} places The number of decimals to which to round
929 * @return {Number} The rounded number
932 Dygraph
.prototype.round_
= function(num
, places
) {
933 var shift
= Math
.pow(10, places
);
934 return Math
.round(num
* shift
)/shift
;
938 * Fires when there's data available to be graphed.
939 * @param {String} data Raw CSV data to be plotted
942 Dygraph
.prototype.loadedEvent_
= function(data
) {
943 this.rawData_
= this.parseCSV_(data
);
944 this.drawGraph_(this.rawData_
);
947 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
948 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
949 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
952 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
955 Dygraph
.prototype.addXTicks_
= function() {
956 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
957 var startDate
, endDate
;
958 if (this.dateWindow_
) {
959 startDate
= this.dateWindow_
[0];
960 endDate
= this.dateWindow_
[1];
962 startDate
= this.rawData_
[0][0];
963 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
966 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
967 this.layout_
.updateOptions({xTicks
: xTicks
});
970 // Time granularity enumeration
971 Dygraph
.SECONDLY
= 0;
972 Dygraph
.TWO_SECONDLY
= 1;
973 Dygraph
.FIVE_SECONDLY
= 2;
974 Dygraph
.TEN_SECONDLY
= 3;
975 Dygraph
.THIRTY_SECONDLY
= 4;
976 Dygraph
.MINUTELY
= 5;
977 Dygraph
.TWO_MINUTELY
= 6;
978 Dygraph
.FIVE_MINUTELY
= 7;
979 Dygraph
.TEN_MINUTELY
= 8;
980 Dygraph
.THIRTY_MINUTELY
= 9;
982 Dygraph
.TWO_HOURLY
= 11;
983 Dygraph
.SIX_HOURLY
= 12;
986 Dygraph
.MONTHLY
= 15;
987 Dygraph
.QUARTERLY
= 16;
988 Dygraph
.BIANNUAL
= 17;
990 Dygraph
.DECADAL
= 19;
991 Dygraph
.NUM_GRANULARITIES
= 20;
993 Dygraph
.SHORT_SPACINGS
= [];
994 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
995 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
996 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
997 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
998 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
999 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1000 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1001 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1002 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1003 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1004 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1005 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1006 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1007 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1008 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1012 // If we used this time granularity, how many ticks would there be?
1013 // This is only an approximation, but it's generally good enough.
1015 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1016 if (granularity
< Dygraph
.MONTHLY
) {
1017 // Generate one tick mark for every fixed interval of time.
1018 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1019 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1021 var year_mod
= 1; // e.g. to only print one point every 10 years.
1022 var num_months
= 12;
1023 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1024 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1025 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1026 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1028 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1029 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1030 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1036 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1037 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1039 // Returns an array containing {v: millis, label: label} dictionaries.
1041 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1043 if (granularity
< Dygraph
.MONTHLY
) {
1044 // Generate one tick mark for every fixed interval of time.
1045 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1046 var format
= '%d%b'; // e.g. "1Jan"
1048 // Find a time less than start_time which occurs on a "nice" time boundary
1049 // for this granularity.
1050 var g
= spacing
/ 1000;
1051 var d
= new Date(start_time
);
1052 if (g
<= 60) { // seconds
1053 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1057 if (g
<= 60) { // minutes
1058 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1063 if (g
<= 24) { // days
1064 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1069 if (g
== 7) { // one week
1070 d
.setDate(d
.getDate() - d
.getDay());
1075 start_time
= d
.getTime();
1077 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1078 var d
= new Date(t
);
1079 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1080 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1081 // the extra hour covers DST problems.
1082 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1084 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1088 // Display a tick mark on the first of a set of months of each year.
1089 // Years get a tick mark iff y % year_mod == 0. This is useful for
1090 // displaying a tick mark once every 10 years, say, on long time scales.
1092 var year_mod
= 1; // e.g. to only print one point every 10 years.
1094 if (granularity
== Dygraph
.MONTHLY
) {
1095 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1096 } else if (granularity
== Dygraph
.QUARTERLY
) {
1097 months
= [ 0, 3, 6, 9 ];
1098 } else if (granularity
== Dygraph
.BIANNUAL
) {
1100 } else if (granularity
== Dygraph
.ANNUAL
) {
1102 } else if (granularity
== Dygraph
.DECADAL
) {
1107 var start_year
= new Date(start_time
).getFullYear();
1108 var end_year
= new Date(end_time
).getFullYear();
1109 var zeropad
= Dygraph
.zeropad
;
1110 for (var i
= start_year
; i
<= end_year
; i
++) {
1111 if (i
% year_mod
!= 0) continue;
1112 for (var j
= 0; j
< months
.length
; j
++) {
1113 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1114 var t
= Date
.parse(date_str
);
1115 if (t
< start_time
|| t
> end_time
) continue;
1116 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1126 * Add ticks to the x-axis based on a date range.
1127 * @param {Number} startDate Start of the date window (millis since epoch)
1128 * @param {Number} endDate End of the date window (millis since epoch)
1129 * @return {Array.<Object>} Array of {label, value} tuples.
1132 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1134 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1135 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1136 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1143 return self
.GetXAxis(startDate
, endDate
, chosen
);
1145 // TODO(danvk): signal error.
1150 * Add ticks when the x axis has numbers on it (instead of dates)
1151 * @param {Number} startDate Start of the date window (millis since epoch)
1152 * @param {Number} endDate End of the date window (millis since epoch)
1153 * @return {Array.<Object>} Array of {label, value} tuples.
1156 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1158 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1159 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1160 // The first spacing greater than pixelsPerYLabel is what we use.
1161 // TODO(danvk): version that works on a log scale.
1162 if (self
.attr_("labelsKMG2")) {
1163 var mults
= [1, 2, 4, 8];
1165 var mults
= [1, 2, 5];
1167 var scale
, low_val
, high_val
, nTicks
;
1168 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1169 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1170 for (var i
= -10; i
< 50; i
++) {
1171 if (self
.attr_("labelsKMG2")) {
1172 var base_scale
= Math
.pow(16, i
);
1174 var base_scale
= Math
.pow(10, i
);
1176 for (var j
= 0; j
< mults
.length
; j
++) {
1177 scale
= base_scale
* mults
[j
];
1178 low_val
= Math
.floor(minV
/ scale
) * scale
;
1179 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1180 nTicks
= (high_val
- low_val
) / scale
;
1181 var spacing
= self
.height_
/ nTicks
;
1182 // wish I could break out of both loops at once...
1183 if (spacing
> pixelsPerTick
) break;
1185 if (spacing
> pixelsPerTick
) break;
1188 // Construct labels for the ticks
1192 if (self
.attr_("labelsKMB")) {
1194 k_labels
= [ "K", "M", "B", "T" ];
1196 if (self
.attr_("labelsKMG2")) {
1197 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1199 k_labels
= [ "k", "M", "G", "T" ];
1202 for (var i
= 0; i
< nTicks
; i
++) {
1203 var tickV
= low_val
+ i
* scale
;
1204 var absTickV
= Math
.abs(tickV
);
1205 var label
= self
.round_(tickV
, 2);
1206 if (k_labels
.length
) {
1207 // Round up to an appropriate unit.
1209 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1210 if (absTickV
>= n
) {
1211 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1216 ticks
.push( {label
: label
, v
: tickV
} );
1222 * Adds appropriate ticks on the y-axis
1223 * @param {Number} minY The minimum Y value in the data set
1224 * @param {Number} maxY The maximum Y value in the data set
1227 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1228 // Set the number of ticks so that the labels are human-friendly.
1229 // TODO(danvk): make this an attribute as well.
1230 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1231 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1235 // Computes the range of the data series (including confidence intervals).
1236 // series is either [ [x1, y1], [x2, y2], ... ] or
1237 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1238 // Returns [low, high]
1239 Dygraph
.prototype.extremeValues_
= function(series
) {
1240 var minY
= null, maxY
= null;
1242 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1244 // With custom bars, maxY is the max of the high values.
1245 for (var j
= 0; j
< series
.length
; j
++) {
1246 var y
= series
[j
][1][0];
1248 var low
= y
- series
[j
][1][1];
1249 var high
= y
+ series
[j
][1][2];
1250 if (low
> y
) low
= y
; // this can happen with custom bars,
1251 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1252 if (maxY
== null || high
> maxY
) {
1255 if (minY
== null || low
< minY
) {
1260 for (var j
= 0; j
< series
.length
; j
++) {
1261 var y
= series
[j
][1];
1262 if (y
=== null || isNaN(y
)) continue;
1263 if (maxY
== null || y
> maxY
) {
1266 if (minY
== null || y
< minY
) {
1272 return [minY
, maxY
];
1276 * Update the graph with new data. Data is in the format
1277 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1278 * or, if errorBars=true,
1279 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1280 * @param {Array.<Object>} data The data (see above)
1283 Dygraph
.prototype.drawGraph_
= function(data
) {
1284 var minY
= null, maxY
= null;
1285 this.layout_
.removeAllDatasets();
1287 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1289 // For stacked series.
1290 var cumulative_y
= [];
1293 // Loop over all fields in the dataset
1295 for (var i
= 1; i
< data
[0].length
; i
++) {
1296 if (!this.visibility()[i
- 1]) continue;
1299 for (var j
= 0; j
< data
.length
; j
++) {
1300 var date
= data
[j
][0];
1301 series
[j
] = [date
, data
[j
][i
]];
1303 series
= this.rollingAverage(series
, this.rollPeriod_
);
1305 // Prune down to the desired range, if necessary (for zooming)
1306 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1307 if (this.dateWindow_
) {
1308 var low
= this.dateWindow_
[0];
1309 var high
= this.dateWindow_
[1];
1311 for (var k
= 0; k
< series
.length
; k
++) {
1312 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1313 pruned
.push(series
[k
]);
1319 var extremes
= this.extremeValues_(series
);
1320 var thisMinY
= extremes
[0];
1321 var thisMaxY
= extremes
[1];
1322 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1323 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1327 for (var j
=0; j
<series
.length
; j
++)
1328 vals
[j
] = [series
[j
][0],
1329 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1330 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1331 } else if (this.attr_("stackedGraph")) {
1333 var l
= series
.length
;
1335 for (var j
= 0; j
< l
; j
++) {
1336 if (cumulative_y
[series
[j
][0]] === undefined
)
1337 cumulative_y
[series
[j
][0]] = 0;
1339 actual_y
= series
[j
][1];
1340 cumulative_y
[series
[j
][0]] += actual_y
;
1342 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1344 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1345 maxY
= cumulative_y
[series
[j
][0]];
1347 datasets
.push([this.attr_("labels")[i
], vals
]);
1348 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1350 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1354 if (datasets
.length
> 0) {
1355 for (var i
= (datasets
.length
- 1); i
>= 0; i
--) {
1356 this.layout_
.addDataset(datasets
[i
][0], datasets
[i
][1]);
1360 // Use some heuristics to come up with a good maxY value, unless it's been
1361 // set explicitly by the user.
1362 if (this.valueRange_
!= null) {
1363 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1365 // This affects the calculation of span, below.
1366 if (this.attr_("includeZero") && minY
> 0) {
1370 // Add some padding and round up to an integer to be human-friendly.
1371 var span
= maxY
- minY
;
1372 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1373 if (span
== 0) { span
= maxY
; }
1374 var maxAxisY
= maxY
+ 0.1 * span
;
1375 var minAxisY
= minY
- 0.1 * span
;
1377 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1378 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1379 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1381 if (this.attr_("includeZero")) {
1382 if (maxY
< 0) maxAxisY
= 0;
1383 if (minY
> 0) minAxisY
= 0;
1386 this.addYTicks_(minAxisY
, maxAxisY
);
1391 // Tell PlotKit to use this new data and render itself
1392 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1393 this.layout_
.evaluateWithError();
1394 this.plotter_
.clear();
1395 this.plotter_
.render();
1396 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1397 this.canvas_
.height
);
1401 * Calculates the rolling average of a data set.
1402 * If originalData is [label, val], rolls the average of those.
1403 * If originalData is [label, [, it's interpreted as [value, stddev]
1404 * and the roll is returned in the same form, with appropriately reduced
1405 * stddev for each value.
1406 * Note that this is where fractional input (i.e. '5/10') is converted into
1408 * @param {Array} originalData The data in the appropriate format (see above)
1409 * @param {Number} rollPeriod The number of days over which to average the data
1411 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1412 if (originalData
.length
< 2)
1413 return originalData
;
1414 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1415 var rollingData
= [];
1416 var sigma
= this.attr_("sigma");
1418 if (this.fractions_
) {
1420 var den
= 0; // numerator/denominator
1422 for (var i
= 0; i
< originalData
.length
; i
++) {
1423 num
+= originalData
[i
][1][0];
1424 den
+= originalData
[i
][1][1];
1425 if (i
- rollPeriod
>= 0) {
1426 num
-= originalData
[i
- rollPeriod
][1][0];
1427 den
-= originalData
[i
- rollPeriod
][1][1];
1430 var date
= originalData
[i
][0];
1431 var value
= den
? num
/ den
: 0.0;
1432 if (this.attr_("errorBars")) {
1433 if (this.wilsonInterval_
) {
1434 // For more details on this confidence interval, see:
1435 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1437 var p
= value
< 0 ? 0 : value
, n
= den
;
1438 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1439 var denom
= 1 + sigma
* sigma
/ den
;
1440 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1441 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1442 rollingData
[i
] = [date
,
1443 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1445 rollingData
[i
] = [date
, [0, 0, 0]];
1448 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1449 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1452 rollingData
[i
] = [date
, mult
* value
];
1455 } else if (this.attr_("customBars")) {
1460 for (var i
= 0; i
< originalData
.length
; i
++) {
1461 var data
= originalData
[i
][1];
1463 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1465 if (y
!= null && !isNaN(y
)) {
1471 if (i
- rollPeriod
>= 0) {
1472 var prev
= originalData
[i
- rollPeriod
];
1473 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1480 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1481 1.0 * (mid
- low
) / count
,
1482 1.0 * (high
- mid
) / count
]];
1485 // Calculate the rolling average for the first rollPeriod - 1 points where
1486 // there is not enough data to roll over the full number of days
1487 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1488 if (!this.attr_("errorBars")){
1489 if (rollPeriod
== 1) {
1490 return originalData
;
1493 for (var i
= 0; i
< originalData
.length
; i
++) {
1496 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1497 var y
= originalData
[j
][1];
1498 if (y
== null || isNaN(y
)) continue;
1500 sum
+= originalData
[j
][1];
1503 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1505 rollingData
[i
] = [originalData
[i
][0], null];
1510 for (var i
= 0; i
< originalData
.length
; i
++) {
1514 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1515 var y
= originalData
[j
][1][0];
1516 if (y
== null || isNaN(y
)) continue;
1518 sum
+= originalData
[j
][1][0];
1519 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1522 var stddev
= Math
.sqrt(variance
) / num_ok
;
1523 rollingData
[i
] = [originalData
[i
][0],
1524 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1526 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1536 * Parses a date, returning the number of milliseconds since epoch. This can be
1537 * passed in as an xValueParser in the Dygraph constructor.
1538 * TODO(danvk): enumerate formats that this understands.
1539 * @param {String} A date in YYYYMMDD format.
1540 * @return {Number} Milliseconds since epoch.
1543 Dygraph
.dateParser
= function(dateStr
, self
) {
1546 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1547 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1548 while (dateStrSlashed
.search("-") != -1) {
1549 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1551 d
= Date
.parse(dateStrSlashed
);
1552 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1553 // TODO(danvk): remove support for this format. It's confusing.
1554 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1555 + "/" + dateStr
.substr(6,2);
1556 d
= Date
.parse(dateStrSlashed
);
1558 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1559 // "2009/07/12 12:34:56"
1560 d
= Date
.parse(dateStr
);
1563 if (!d
|| isNaN(d
)) {
1564 self
.error("Couldn't parse " + dateStr
+ " as a date");
1570 * Detects the type of the str (date or numeric) and sets the various
1571 * formatting attributes in this.attrs_ based on this type.
1572 * @param {String} str An x value.
1575 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1577 if (str
.indexOf('-') >= 0 ||
1578 str
.indexOf('/') >= 0 ||
1579 isNaN(parseFloat(str
))) {
1581 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1582 // TODO(danvk): remove support for this format.
1587 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1588 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1589 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1591 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1592 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1593 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1598 * Parses a string in a special csv format. We expect a csv file where each
1599 * line is a date point, and the first field in each line is the date string.
1600 * We also expect that all remaining fields represent series.
1601 * if the errorBars attribute is set, then interpret the fields as:
1602 * date, series1, stddev1, series2, stddev2, ...
1603 * @param {Array.<Object>} data See above.
1606 * @return Array.<Object> An array with one entry for each row. These entries
1607 * are an array of cells in that row. The first entry is the parsed x-value for
1608 * the row. The second, third, etc. are the y-values. These can take on one of
1609 * three forms, depending on the CSV and constructor parameters:
1611 * 2. [ value, stddev ]
1612 * 3. [ low value, center value, high value ]
1614 Dygraph
.prototype.parseCSV_
= function(data
) {
1616 var lines
= data
.split("\n");
1618 // Use the default delimiter or fall back to a tab if that makes sense.
1619 var delim
= this.attr_('delimiter');
1620 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1625 if (this.labelsFromCSV_
) {
1627 this.attrs_
.labels
= lines
[0].split(delim
);
1631 var defaultParserSet
= false; // attempt to auto-detect x value type
1632 var expectedCols
= this.attr_("labels").length
;
1633 var outOfOrder
= false;
1634 for (var i
= start
; i
< lines
.length
; i
++) {
1635 var line
= lines
[i
];
1636 if (line
.length
== 0) continue; // skip blank lines
1637 if (line
[0] == '#') continue; // skip comment lines
1638 var inFields
= line
.split(delim
);
1639 if (inFields
.length
< 2) continue;
1642 if (!defaultParserSet
) {
1643 this.detectTypeFromString_(inFields
[0]);
1644 xParser
= this.attr_("xValueParser");
1645 defaultParserSet
= true;
1647 fields
[0] = xParser(inFields
[0], this);
1649 // If fractions are expected, parse the numbers as "A/B
"
1650 if (this.fractions_) {
1651 for (var j = 1; j < inFields.length; j++) {
1652 // TODO(danvk): figure out an appropriate way to flag parse errors.
1653 var vals = inFields[j].split("/");
1654 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1656 } else if (this.attr_("errorBars
")) {
1657 // If there are error bars, values are (value, stddev) pairs
1658 for (var j = 1; j < inFields.length; j += 2)
1659 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1660 parseFloat(inFields[j + 1])];
1661 } else if (this.attr_("customBars
")) {
1662 // Bars are a low;center;high tuple
1663 for (var j = 1; j < inFields.length; j++) {
1664 var vals = inFields[j].split(";");
1665 fields[j] = [ parseFloat(vals[0]),
1666 parseFloat(vals[1]),
1667 parseFloat(vals[2]) ];
1670 // Values are just numbers
1671 for (var j = 1; j < inFields.length; j++) {
1672 fields[j] = parseFloat(inFields[j]);
1675 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1680 if (fields.length != expectedCols) {
1681 this.error("Number of columns
in line
" + i + " (" + fields.length +
1682 ") does not agree
with number of
labels (" + expectedCols +
1688 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1689 ret.sort(function(a,b) { return a[0] - b[0] });
1696 * The user has provided their data as a pre-packaged JS array. If the x values
1697 * are numeric, this is the same as dygraphs' internal format. If the x values
1698 * are dates, we need to convert them from Date objects to ms since epoch.
1699 * @param {Array.<Object>} data
1700 * @return {Array.<Object>} data with numeric x values.
1702 Dygraph.prototype.parseArray_ = function(data) {
1703 // Peek at the first x value to see if it's numeric.
1704 if (data.length == 0) {
1705 this.error("Can
't plot empty data set");
1708 if (data[0].length == 0) {
1709 this.error("Data set cannot contain an empty row");
1713 if (this.attr_("labels") == null) {
1714 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1715 "in the options parameter");
1716 this.attrs_.labels = [ "X" ];
1717 for (var i = 1; i < data[0].length; i++) {
1718 this.attrs_.labels.push("Y" + i);
1722 if (Dygraph.isDateLike(data[0][0])) {
1723 // Some intelligent defaults for a date x-axis.
1724 this.attrs_.xValueFormatter = Dygraph.dateString_;
1725 this.attrs_.xTicker = Dygraph.dateTicker;
1727 // Assume they're all dates
.
1728 var parsedData
= Dygraph
.clone(data
);
1729 for (var i
= 0; i
< data
.length
; i
++) {
1730 if (parsedData
[i
].length
== 0) {
1731 this.error("Row " << (1 + i
) << " of data is empty");
1734 if (parsedData
[i
][0] == null
1735 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1736 this.error("x value in row " << (1 + i
) << " is not a Date");
1739 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1743 // Some intelligent defaults for a numeric x-axis.
1744 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1745 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1751 * Parses a DataTable object from gviz.
1752 * The data is expected to have a first column that is either a date or a
1753 * number. All subsequent columns must be numbers. If there is a clear mismatch
1754 * between this.xValueParser_ and the type of the first column, it will be
1755 * fixed. Returned value is in the same format as return value of parseCSV_.
1756 * @param {Array.<Object>} data See above.
1759 Dygraph
.prototype.parseDataTable_
= function(data
) {
1760 var cols
= data
.getNumberOfColumns();
1761 var rows
= data
.getNumberOfRows();
1763 // Read column labels
1765 for (var i
= 0; i
< cols
; i
++) {
1766 labels
.push(data
.getColumnLabel(i
));
1767 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1769 this.attrs_
.labels
= labels
;
1770 cols
= labels
.length
;
1772 var indepType
= data
.getColumnType(0);
1773 if (indepType
== 'date' || indepType
== 'datetime') {
1774 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1775 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1776 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1777 } else if (indepType
== 'number') {
1778 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1779 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1780 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1782 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1783 "column 1 of DataTable input (Got '" + indepType
+ "')");
1788 var outOfOrder
= false;
1789 for (var i
= 0; i
< rows
; i
++) {
1791 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1792 data
.getValue(i
, 0) === null) {
1793 this.warning("Ignoring row " + i
+
1794 " of DataTable because of undefined or null first column.");
1798 if (indepType
== 'date' || indepType
== 'datetime') {
1799 row
.push(data
.getValue(i
, 0).getTime());
1801 row
.push(data
.getValue(i
, 0));
1803 if (!this.attr_("errorBars")) {
1804 for (var j
= 1; j
< cols
; j
++) {
1805 row
.push(data
.getValue(i
, j
));
1808 for (var j
= 0; j
< cols
- 1; j
++) {
1809 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1812 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1819 this.warn("DataTable is out of order; order it correctly to speed loading.");
1820 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1825 // These functions are all based on MochiKit.
1826 Dygraph
.update
= function (self
, o
) {
1827 if (typeof(o
) != 'undefined' && o
!== null) {
1829 if (o
.hasOwnProperty(k
)) {
1837 Dygraph
.isArrayLike
= function (o
) {
1838 var typ
= typeof(o
);
1840 (typ
!= 'object' && !(typ
== 'function' &&
1841 typeof(o
.item
) == 'function')) ||
1843 typeof(o
.length
) != 'number' ||
1851 Dygraph
.isDateLike
= function (o
) {
1852 if (typeof(o
) != "object" || o
=== null ||
1853 typeof(o
.getTime
) != 'function') {
1859 Dygraph
.clone
= function(o
) {
1860 // TODO(danvk): figure out how MochiKit's version works
1862 for (var i
= 0; i
< o
.length
; i
++) {
1863 if (Dygraph
.isArrayLike(o
[i
])) {
1864 r
.push(Dygraph
.clone(o
[i
]));
1874 * Get the CSV data. If it's in a function, call that function. If it's in a
1875 * file, do an XMLHttpRequest to get it.
1878 Dygraph
.prototype.start_
= function() {
1879 if (typeof this.file_
== 'function') {
1880 // CSV string. Pretend we got it via XHR.
1881 this.loadedEvent_(this.file_());
1882 } else if (Dygraph
.isArrayLike(this.file_
)) {
1883 this.rawData_
= this.parseArray_(this.file_
);
1884 this.drawGraph_(this.rawData_
);
1885 } else if (typeof this.file_
== 'object' &&
1886 typeof this.file_
.getColumnRange
== 'function') {
1887 // must be a DataTable from gviz.
1888 this.rawData_
= this.parseDataTable_(this.file_
);
1889 this.drawGraph_(this.rawData_
);
1890 } else if (typeof this.file_
== 'string') {
1891 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1892 if (this.file_
.indexOf('\n') >= 0) {
1893 this.loadedEvent_(this.file_
);
1895 var req
= new XMLHttpRequest();
1897 req
.onreadystatechange
= function () {
1898 if (req
.readyState
== 4) {
1899 if (req
.status
== 200) {
1900 caller
.loadedEvent_(req
.responseText
);
1905 req
.open("GET", this.file_
, true);
1909 this.error("Unknown data format: " + (typeof this.file_
));
1914 * Changes various properties of the graph. These can include:
1916 * <li>file: changes the source data for the graph</li>
1917 * <li>errorBars: changes whether the data contains stddev</li>
1919 * @param {Object} attrs The new properties and values
1921 Dygraph
.prototype.updateOptions
= function(attrs
) {
1922 // TODO(danvk): this is a mess. Rethink this function.
1923 if (attrs
.rollPeriod
) {
1924 this.rollPeriod_
= attrs
.rollPeriod
;
1926 if (attrs
.dateWindow
) {
1927 this.dateWindow_
= attrs
.dateWindow
;
1929 if (attrs
.valueRange
) {
1930 this.valueRange_
= attrs
.valueRange
;
1932 Dygraph
.update(this.user_attrs_
, attrs
);
1934 this.labelsFromCSV_
= (this.attr_("labels") == null);
1936 // TODO(danvk): this doesn't match the constructor logic
1937 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1938 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1939 this.file_
= attrs
['file'];
1942 this.drawGraph_(this.rawData_
);
1947 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1948 * containing div (which has presumably changed size since the dygraph was
1949 * instantiated. If the width/height are specified, the div will be resized.
1951 * This is far more efficient than destroying and re-instantiating a
1952 * Dygraph, since it doesn't have to reparse the underlying data.
1954 * @param {Number} width Width (in pixels)
1955 * @param {Number} height Height (in pixels)
1957 Dygraph
.prototype.resize
= function(width
, height
) {
1958 if ((width
=== null) != (height
=== null)) {
1959 this.warn("Dygraph.resize() should be called with zero parameters or " +
1960 "two non-NULL parameters. Pretending it was zero.");
1961 width
= height
= null;
1964 // TODO(danvk): there should be a clear() method.
1965 this.maindiv_
.innerHTML
= "";
1966 this.attrs_
.labelsDiv
= null;
1969 this.maindiv_
.style
.width
= width
+ "px";
1970 this.maindiv_
.style
.height
= height
+ "px";
1971 this.width_
= width
;
1972 this.height_
= height
;
1974 this.width_
= this.maindiv_
.offsetWidth
;
1975 this.height_
= this.maindiv_
.offsetHeight
;
1978 this.createInterface_();
1979 this.drawGraph_(this.rawData_
);
1983 * Adjusts the number of days in the rolling average. Updates the graph to
1984 * reflect the new averaging period.
1985 * @param {Number} length Number of days over which to average the data.
1987 Dygraph
.prototype.adjustRoll
= function(length
) {
1988 this.rollPeriod_
= length
;
1989 this.drawGraph_(this.rawData_
);
1993 * Returns a boolean array of visibility statuses.
1995 Dygraph
.prototype.visibility
= function() {
1996 // Do lazy-initialization, so that this happens after we know the number of
1998 if (!this.attr_("visibility")) {
1999 this.attrs_
["visibility"] = [];
2001 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2002 this.attr_("visibility").push(true);
2004 return this.attr_("visibility");
2008 * Changes the visiblity of a series.
2010 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2011 var x
= this.visibility();
2012 if (num
< 0 && num
>= x
.length
) {
2013 this.warn("invalid series number in setVisibility: " + num
);
2016 this.drawGraph_(this.rawData_
);
2021 * Create a new canvas element. This is more complex than a simple
2022 * document.createElement("canvas") because of IE and excanvas.
2024 Dygraph
.createCanvas
= function() {
2025 var canvas
= document
.createElement("canvas");
2027 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2029 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2037 * A wrapper around Dygraph that implements the gviz API.
2038 * @param {Object} container The DOM object the visualization should live in.
2040 Dygraph
.GVizChart
= function(container
) {
2041 this.container
= container
;
2044 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2045 this.container
.innerHTML
= '';
2046 this.date_graph
= new Dygraph(this.container
, data
, options
);
2049 // Older pages may still use this name.
2050 DateGraph
= Dygraph
;