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
,
114 wilsonInterval
: true, // only relevant if fractions is true
118 // Various logging levels.
124 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
125 // Labels is no longer a constructor parameter, since it's typically set
126 // directly from the data source. It also conains a name for the x-axis,
127 // which the previous constructor form did not.
128 if (labels
!= null) {
129 var new_labels
= ["Date"];
130 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
131 Dygraph
.update(attrs
, { 'labels': new_labels
});
133 this.__init__(div
, file
, attrs
);
137 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
138 * and interaction <canvas> inside of it. See the constructor for details
140 * @param {String | Function} file Source data
141 * @param {Array.<String>} labels Names of the data series
142 * @param {Object} attrs Miscellaneous other options
145 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
146 // Support two-argument constructor
147 if (attrs
== null) { attrs
= {}; }
149 // Copy the important bits into the object
150 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
153 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
154 this.previousVerticalX_
= -1;
155 this.fractions_
= attrs
.fractions
|| false;
156 this.dateWindow_
= attrs
.dateWindow
|| null;
157 this.valueRange_
= attrs
.valueRange
|| null;
158 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
160 // Clear the div. This ensure that, if multiple dygraphs are passed the same
161 // div, then only one will be drawn.
164 // If the div isn't already sized then give it a default size.
165 if (div
.style
.width
== '') {
166 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
168 if (div
.style
.height
== '') {
169 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
171 this.width_
= parseInt(div
.style
.width
, 10);
172 this.height_
= parseInt(div
.style
.height
, 10);
174 // Dygraphs has many options, some of which interact with one another.
175 // To keep track of everything, we maintain two sets of options:
177 // this.user_attrs_ only options explicitly set by the user.
178 // this.attrs_ defaults, options derived from user_attrs_, data.
180 // Options are then accessed this.attr_('attr'), which first looks at
181 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
182 // defaults without overriding behavior that the user specifically asks for.
183 this.user_attrs_
= {};
184 Dygraph
.update(this.user_attrs_
, attrs
);
187 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
189 // Make a note of whether labels will be pulled from the CSV file.
190 this.labelsFromCSV_
= (this.attr_("labels") == null);
192 // Create the containing DIV and other interactive elements
193 this.createInterface_();
198 Dygraph
.prototype.attr_
= function(name
) {
199 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
200 return this.user_attrs_
[name
];
201 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
202 return this.attrs_
[name
];
208 // TODO(danvk): any way I can get the line numbers to be this.warn call?
209 Dygraph
.prototype.log
= function(severity
, message
) {
210 if (typeof(console
) != 'undefined') {
213 console
.debug('dygraphs: ' + message
);
216 console
.info('dygraphs: ' + message
);
218 case Dygraph
.WARNING
:
219 console
.warn('dygraphs: ' + message
);
222 console
.error('dygraphs: ' + message
);
227 Dygraph
.prototype.info
= function(message
) {
228 this.log(Dygraph
.INFO
, message
);
230 Dygraph
.prototype.warn
= function(message
) {
231 this.log(Dygraph
.WARNING
, message
);
233 Dygraph
.prototype.error
= function(message
) {
234 this.log(Dygraph
.ERROR
, message
);
238 * Returns the current rolling period, as set by the user or an option.
239 * @return {Number} The number of days in the rolling window
241 Dygraph
.prototype.rollPeriod
= function() {
242 return this.rollPeriod_
;
245 Dygraph
.addEvent
= function(el
, evt
, fn
) {
246 var normed_fn
= function(e
) {
247 if (!e
) var e
= window
.event
;
250 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
251 el
.addEventListener(evt
, normed_fn
, false);
253 el
.attachEvent('on' + evt
, normed_fn
);
258 * Generates interface elements for the Dygraph: a containing div, a div to
259 * display the current point, and a textbox to adjust the rolling average
260 * period. Also creates the Renderer/Layout elements.
263 Dygraph
.prototype.createInterface_
= function() {
264 // Create the all-enclosing graph div
265 var enclosing
= this.maindiv_
;
267 this.graphDiv
= document
.createElement("div");
268 this.graphDiv
.style
.width
= this.width_
+ "px";
269 this.graphDiv
.style
.height
= this.height_
+ "px";
270 enclosing
.appendChild(this.graphDiv
);
272 // Create the canvas for interactive parts of the chart.
273 // this.canvas_ = document.createElement("canvas");
274 this.canvas_
= Dygraph
.createCanvas();
275 this.canvas_
.style
.position
= "absolute";
276 this.canvas_
.width
= this.width_
;
277 this.canvas_
.height
= this.height_
;
278 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
279 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
280 this.graphDiv
.appendChild(this.canvas_
);
282 // ... and for static parts of the chart.
283 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
286 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
287 dygraph
.mouseMove_(e
);
289 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
290 dygraph
.mouseOut_(e
);
293 // Create the grapher
294 // TODO(danvk): why does the Layout need its own set of options?
295 this.layoutOptions_
= { 'xOriginIsZero': false };
296 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
297 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
298 Dygraph
.update(this.layoutOptions_
, {
299 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
301 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
303 // TODO(danvk): why does the Renderer need its own set of options?
304 this.renderOptions_
= { colorScheme
: this.colors_
,
306 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
307 Dygraph
.update(this.renderOptions_
, this.attrs_
);
308 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
309 this.plotter_
= new DygraphCanvasRenderer(this,
310 this.hidden_
, this.layout_
,
311 this.renderOptions_
);
313 this.createStatusMessage_();
314 this.createRollInterface_();
315 this.createDragInterface_();
319 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
320 * this particular canvas. All Dygraph work is done on this.canvas_.
321 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
322 * @return {Object} The newly-created canvas
325 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
326 // var h = document.createElement("canvas");
327 var h
= Dygraph
.createCanvas();
328 h
.style
.position
= "absolute";
329 h
.style
.top
= canvas
.style
.top
;
330 h
.style
.left
= canvas
.style
.left
;
331 h
.width
= this.width_
;
332 h
.height
= this.height_
;
333 h
.style
.width
= this.width_
+ "px"; // for IE
334 h
.style
.height
= this.height_
+ "px"; // for IE
335 this.graphDiv
.appendChild(h
);
339 // Taken from MochiKit.Color
340 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
344 if (saturation
=== 0) {
349 var i
= Math
.floor(hue
* 6);
350 var f
= (hue
* 6) - i
;
351 var p
= value
* (1 - saturation
);
352 var q
= value
* (1 - (saturation
* f
));
353 var t
= value
* (1 - (saturation
* (1 - f
)));
355 case 1: red
= q
; green
= value
; blue
= p
; break;
356 case 2: red
= p
; green
= value
; blue
= t
; break;
357 case 3: red
= p
; green
= q
; blue
= value
; break;
358 case 4: red
= t
; green
= p
; blue
= value
; break;
359 case 5: red
= value
; green
= p
; blue
= q
; break;
360 case 6: // fall through
361 case 0: red
= value
; green
= t
; blue
= p
; break;
364 red
= Math
.floor(255 * red
+ 0.5);
365 green
= Math
.floor(255 * green
+ 0.5);
366 blue
= Math
.floor(255 * blue
+ 0.5);
367 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
372 * Generate a set of distinct colors for the data series. This is done with a
373 * color wheel. Saturation/Value are customizable, and the hue is
374 * equally-spaced around the color wheel. If a custom set of colors is
375 * specified, that is used instead.
378 Dygraph
.prototype.setColors_
= function() {
379 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
380 // away with this.renderOptions_.
381 var num
= this.attr_("labels").length
- 1;
383 var colors
= this.attr_('colors');
385 var sat
= this.attr_('colorSaturation') || 1.0;
386 var val
= this.attr_('colorValue') || 0.5;
387 for (var i
= 1; i
<= num
; i
++) {
388 var hue
= (1.0*i
/(1+num
));
389 this.colors_
.push( Dygraph
.hsvToRGB(hue
, sat
, val
) );
392 for (var i
= 0; i
< num
; i
++) {
393 var colorStr
= colors
[i
% colors
.length
];
394 this.colors_
.push(colorStr
);
398 // TODO(danvk): update this w/r
/t/ the
new options system
.
399 this.renderOptions_
.colorScheme
= this.colors_
;
400 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
401 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
402 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
405 // The following functions are from quirksmode.org
406 // http://www.quirksmode.org/js
/findpos
.html
407 Dygraph
.findPosX
= function(obj
) {
409 if (obj
.offsetParent
) {
410 while (obj
.offsetParent
) {
411 curleft
+= obj
.offsetLeft
;
412 obj
= obj
.offsetParent
;
420 Dygraph
.findPosY
= function(obj
) {
422 if (obj
.offsetParent
) {
423 while (obj
.offsetParent
) {
424 curtop
+= obj
.offsetTop
;
425 obj
= obj
.offsetParent
;
434 * Create the div that contains information on the selected point(s)
435 * This goes in the top right of the canvas, unless an external div has already
439 Dygraph
.prototype.createStatusMessage_
= function(){
440 if (!this.attr_("labelsDiv")) {
441 var divWidth
= this.attr_('labelsDivWidth');
443 "position": "absolute",
446 "width": divWidth
+ "px",
448 "left": (this.width_
- divWidth
- 2) + "px",
449 "background": "white",
451 "overflow": "hidden"};
452 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
453 var div
= document
.createElement("div");
454 for (var name
in messagestyle
) {
455 if (messagestyle
.hasOwnProperty(name
)) {
456 div
.style
[name
] = messagestyle
[name
];
459 this.graphDiv
.appendChild(div
);
460 this.attrs_
.labelsDiv
= div
;
465 * Create the text box to adjust the averaging period
466 * @return {Object} The newly-created text box
469 Dygraph
.prototype.createRollInterface_
= function() {
470 var display
= this.attr_('showRoller') ? "block" : "none";
471 var textAttr
= { "position": "absolute",
473 "top": (this.plotter_
.area
.h
- 25) + "px",
474 "left": (this.plotter_
.area
.x
+ 1) + "px",
477 var roller
= document
.createElement("input");
478 roller
.type
= "text";
480 roller
.value
= this.rollPeriod_
;
481 for (var name
in textAttr
) {
482 if (textAttr
.hasOwnProperty(name
)) {
483 roller
.style
[name
] = textAttr
[name
];
487 var pa
= this.graphDiv
;
488 pa
.appendChild(roller
);
490 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
494 // These functions are taken from MochiKit.Signal
495 Dygraph
.pageX
= function(e
) {
497 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
500 var b
= document
.body
;
502 (de
.scrollLeft
|| b
.scrollLeft
) -
503 (de
.clientLeft
|| 0);
507 Dygraph
.pageY
= function(e
) {
509 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
512 var b
= document
.body
;
514 (de
.scrollTop
|| b
.scrollTop
) -
520 * Set up all the mouse handlers needed to capture dragging behavior for zoom
524 Dygraph
.prototype.createDragInterface_
= function() {
527 // Tracks whether the mouse is down right now
528 var isZooming
= false;
529 var isPanning
= false;
530 var dragStartX
= null;
531 var dragStartY
= null;
535 var draggingDate
= null;
536 var dateRange
= null;
538 // Utility function to convert page-wide coordinates to canvas coords
541 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
542 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
544 // Draw zoom rectangles when the mouse is down and the user moves around
545 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
547 dragEndX
= getX(event
);
548 dragEndY
= getY(event
);
550 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
552 } else if (isPanning
) {
553 dragEndX
= getX(event
);
554 dragEndY
= getY(event
);
556 // Want to have it so that:
557 // 1. draggingDate appears at dragEndX
558 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
560 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
561 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
562 self
.drawGraph_(self
.rawData_
);
566 // Track the beginning of drag events
567 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
568 px
= Dygraph
.findPosX(self
.canvas_
);
569 py
= Dygraph
.findPosY(self
.canvas_
);
570 dragStartX
= getX(event
);
571 dragStartY
= getY(event
);
573 if (event
.altKey
|| event
.shiftKey
) {
574 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
576 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
577 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
584 // If the user releases the mouse button during a drag, but not over the
585 // canvas, then it doesn't count as a zooming action.
586 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
587 if (isZooming
|| isPanning
) {
600 // Temporarily cancel the dragging event when the mouse leaves the graph
601 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
608 // If the mouse is released on the canvas during a drag event, then it's a
609 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
610 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
613 dragEndX
= getX(event
);
614 dragEndY
= getY(event
);
615 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
616 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
618 if (regionWidth
< 2 && regionHeight
< 2 &&
619 self
.attr_('clickCallback') != null &&
620 self
.lastx_
!= undefined
) {
621 // TODO(danvk): pass along more info about the points.
622 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
625 if (regionWidth
>= 10) {
626 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
627 Math
.max(dragStartX
, dragEndX
));
629 self
.canvas_
.getContext("2d").clearRect(0, 0,
631 self
.canvas_
.height
);
645 // Double-clicking zooms back out
646 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
647 if (self
.dateWindow_
== null) return;
648 self
.dateWindow_
= null;
649 self
.drawGraph_(self
.rawData_
);
650 var minDate
= self
.rawData_
[0][0];
651 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
652 if (self
.attr_("zoomCallback")) {
653 self
.attr_("zoomCallback")(minDate
, maxDate
);
659 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
660 * up any previous zoom rectangles that were drawn. This could be optimized to
661 * avoid extra redrawing, but it's tricky to avoid interactions with the status
663 * @param {Number} startX The X position where the drag started, in canvas
665 * @param {Number} endX The current X position of the drag, in canvas coords.
666 * @param {Number} prevEndX The value of endX on the previous call to this
667 * function. Used to avoid excess redrawing
670 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
671 var ctx
= this.canvas_
.getContext("2d");
673 // Clean up from the previous rect if necessary
675 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
676 Math
.abs(startX
- prevEndX
), this.height_
);
679 // Draw a light-grey rectangle to show the new viewing area
680 if (endX
&& startX
) {
681 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
682 ctx
.fillRect(Math
.min(startX
, endX
), 0,
683 Math
.abs(endX
- startX
), this.height_
);
688 * Zoom to something containing [lowX, highX]. These are pixel coordinates
689 * in the canvas. The exact zoom window may be slightly larger if there are no
690 * data points near lowX or highX. This function redraws the graph.
691 * @param {Number} lowX The leftmost pixel value that should be visible.
692 * @param {Number} highX The rightmost pixel value that should be visible.
695 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
696 // Find the earliest and latest dates contained in this canvasx range.
697 var points
= this.layout_
.points
;
700 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
701 for (var i
= 0; i
< points
.length
; i
++) {
702 var cx
= points
[i
].canvasx
;
703 var x
= points
[i
].xval
;
704 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
705 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
707 // Use the extremes if either is missing
708 if (minDate
== null) minDate
= points
[0].xval
;
709 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
711 this.dateWindow_
= [minDate
, maxDate
];
712 this.drawGraph_(this.rawData_
);
713 if (this.attr_("zoomCallback")) {
714 this.attr_("zoomCallback")(minDate
, maxDate
);
719 * When the mouse moves in the canvas, display information about a nearby data
720 * point and draw dots over those points in the data series. This function
721 * takes care of cleanup of previously-drawn dots.
722 * @param {Object} event The mousemove event from the browser.
725 Dygraph
.prototype.mouseMove_
= function(event
) {
726 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
727 var points
= this.layout_
.points
;
732 // Loop through all the points and find the date nearest to our current
734 var minDist
= 1e+100;
736 for (var i
= 0; i
< points
.length
; i
++) {
737 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
738 if (dist
> minDist
) break;
742 if (idx
>= 0) lastx
= points
[idx
].xval
;
743 // Check that you can really highlight the last day's data
744 if (canvasx
> points
[points
.length
-1].canvasx
)
745 lastx
= points
[points
.length
-1].xval
;
747 // Extract the points we've selected
748 this.selPoints_
= [];
749 for (var i
= 0; i
< points
.length
; i
++) {
750 if (points
[i
].xval
== lastx
) {
751 this.selPoints_
.push(points
[i
]);
755 if (this.attr_("highlightCallback")) {
756 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
759 // Clear the previously drawn vertical, if there is one
760 var circleSize
= this.attr_('highlightCircleSize');
761 var ctx
= this.canvas_
.getContext("2d");
762 if (this.previousVerticalX_
>= 0) {
763 var px
= this.previousVerticalX_
;
764 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
767 var isOK
= function(x
) { return x
&& !isNaN(x
); };
769 if (this.selPoints_
.length
> 0) {
770 var canvasx
= this.selPoints_
[0].canvasx
;
772 // Set the status message to indicate the selected point(s)
773 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
774 var clen
= this.colors_
.length
;
775 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
776 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
777 if (this.attr_("labelsSeparateLines")) {
780 var point
= this.selPoints_
[i
];
781 var c
= new RGBColor(this.colors_
[i
%clen
]);
782 replace
+= " <b><font color='" + c
.toHex() + "'>"
783 + point
.name
+ "</font></b>:"
784 + this.round_(point
.yval
, 2);
786 this.attr_("labelsDiv").innerHTML
= replace
;
788 // Save last x position for callbacks.
791 // Draw colored circles over the center of each selected point
793 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
794 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
796 ctx
.fillStyle
= this.colors_
[i
%clen
];
797 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
798 0, 2 * Math
.PI
, false);
803 this.previousVerticalX_
= canvasx
;
808 * The mouse has left the canvas. Clear out whatever artifacts remain
809 * @param {Object} event the mouseout event from the browser.
812 Dygraph
.prototype.mouseOut_
= function(event
) {
813 // Get rid of the overlay data
814 var ctx
= this.canvas_
.getContext("2d");
815 ctx
.clearRect(0, 0, this.width_
, this.height_
);
816 this.attr_("labelsDiv").innerHTML
= "";
819 Dygraph
.zeropad
= function(x
) {
820 if (x
< 10) return "0" + x
; else return "" + x
;
824 * Return a string version of the hours, minutes and seconds portion of a date.
825 * @param {Number} date The JavaScript date (ms since epoch)
826 * @return {String} A time of the form "HH:MM:SS"
829 Dygraph
.prototype.hmsString_
= function(date
) {
830 var zeropad
= Dygraph
.zeropad
;
831 var d
= new Date(date
);
832 if (d
.getSeconds()) {
833 return zeropad(d
.getHours()) + ":" +
834 zeropad(d
.getMinutes()) + ":" +
835 zeropad(d
.getSeconds());
836 } else if (d
.getMinutes()) {
837 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
839 return zeropad(d
.getHours());
844 * Convert a JS date (millis since epoch) to YYYY/MM/DD
845 * @param {Number} date The JavaScript date (ms since epoch)
846 * @return {String} A date of the form "YYYY/MM/DD"
848 * TODO(danvk): why is this part of the prototype?
850 Dygraph
.dateString_
= function(date
, self
) {
851 var zeropad
= Dygraph
.zeropad
;
852 var d
= new Date(date
);
855 var year
= "" + d
.getFullYear();
856 // Get a 0 padded month string
857 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
858 // Get a 0 padded day string
859 var day
= zeropad(d
.getDate());
862 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
863 if (frac
) ret
= " " + self
.hmsString_(date
);
865 return year
+ "/" + month + "/" + day
+ ret
;
869 * Round a number to the specified number of digits past the decimal point.
870 * @param {Number} num The number to round
871 * @param {Number} places The number of decimals to which to round
872 * @return {Number} The rounded number
875 Dygraph
.prototype.round_
= function(num
, places
) {
876 var shift
= Math
.pow(10, places
);
877 return Math
.round(num
* shift
)/shift
;
881 * Fires when there's data available to be graphed.
882 * @param {String} data Raw CSV data to be plotted
885 Dygraph
.prototype.loadedEvent_
= function(data
) {
886 this.rawData_
= this.parseCSV_(data
);
887 this.drawGraph_(this.rawData_
);
890 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
891 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
892 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
895 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
898 Dygraph
.prototype.addXTicks_
= function() {
899 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
900 var startDate
, endDate
;
901 if (this.dateWindow_
) {
902 startDate
= this.dateWindow_
[0];
903 endDate
= this.dateWindow_
[1];
905 startDate
= this.rawData_
[0][0];
906 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
909 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
910 this.layout_
.updateOptions({xTicks
: xTicks
});
913 // Time granularity enumeration
914 Dygraph
.SECONDLY
= 0;
915 Dygraph
.TWO_SECONDLY
= 1;
916 Dygraph
.FIVE_SECONDLY
= 2;
917 Dygraph
.TEN_SECONDLY
= 3;
918 Dygraph
.THIRTY_SECONDLY
= 4;
919 Dygraph
.MINUTELY
= 5;
920 Dygraph
.TWO_MINUTELY
= 6;
921 Dygraph
.FIVE_MINUTELY
= 7;
922 Dygraph
.TEN_MINUTELY
= 8;
923 Dygraph
.THIRTY_MINUTELY
= 9;
925 Dygraph
.TWO_HOURLY
= 11;
926 Dygraph
.SIX_HOURLY
= 12;
929 Dygraph
.MONTHLY
= 15;
930 Dygraph
.QUARTERLY
= 16;
931 Dygraph
.BIANNUAL
= 17;
933 Dygraph
.DECADAL
= 19;
934 Dygraph
.NUM_GRANULARITIES
= 20;
936 Dygraph
.SHORT_SPACINGS
= [];
937 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
938 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
939 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
940 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
941 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
942 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
943 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
944 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
945 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
946 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
947 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
948 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
949 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
950 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
951 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
955 // If we used this time granularity, how many ticks would there be?
956 // This is only an approximation, but it's generally good enough.
958 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
959 if (granularity
< Dygraph
.MONTHLY
) {
960 // Generate one tick mark for every fixed interval of time.
961 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
962 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
964 var year_mod
= 1; // e.g. to only print one point every 10 years.
966 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
967 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
968 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
969 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
971 var msInYear
= 365.2524 * 24 * 3600 * 1000;
972 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
973 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
979 // Construct an x-axis of nicely-formatted times on meaningful boundaries
980 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
982 // Returns an array containing {v: millis, label: label} dictionaries.
984 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
986 if (granularity
< Dygraph
.MONTHLY
) {
987 // Generate one tick mark for every fixed interval of time.
988 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
989 var format
= '%d%b'; // e.g. "1Jan"
991 // Find a time less than start_time which occurs on a "nice" time boundary
992 // for this granularity.
993 var g
= spacing
/ 1000;
994 var d
= new Date(start_time
);
995 if (g
<= 60) { // seconds
996 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1000 if (g
<= 60) { // minutes
1001 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1006 if (g
<= 24) { // days
1007 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1012 if (g
== 7) { // one week
1013 d
.setDate(d
.getDate() - d
.getDay());
1018 start_time
= d
.getTime();
1020 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1021 var d
= new Date(t
);
1022 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1023 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1024 // the extra hour covers DST problems.
1025 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1027 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1031 // Display a tick mark on the first of a set of months of each year.
1032 // Years get a tick mark iff y % year_mod == 0. This is useful for
1033 // displaying a tick mark once every 10 years, say, on long time scales.
1035 var year_mod
= 1; // e.g. to only print one point every 10 years.
1037 if (granularity
== Dygraph
.MONTHLY
) {
1038 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1039 } else if (granularity
== Dygraph
.QUARTERLY
) {
1040 months
= [ 0, 3, 6, 9 ];
1041 } else if (granularity
== Dygraph
.BIANNUAL
) {
1043 } else if (granularity
== Dygraph
.ANNUAL
) {
1045 } else if (granularity
== Dygraph
.DECADAL
) {
1050 var start_year
= new Date(start_time
).getFullYear();
1051 var end_year
= new Date(end_time
).getFullYear();
1052 var zeropad
= Dygraph
.zeropad
;
1053 for (var i
= start_year
; i
<= end_year
; i
++) {
1054 if (i
% year_mod
!= 0) continue;
1055 for (var j
= 0; j
< months
.length
; j
++) {
1056 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1057 var t
= Date
.parse(date_str
);
1058 if (t
< start_time
|| t
> end_time
) continue;
1059 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1069 * Add ticks to the x-axis based on a date range.
1070 * @param {Number} startDate Start of the date window (millis since epoch)
1071 * @param {Number} endDate End of the date window (millis since epoch)
1072 * @return {Array.<Object>} Array of {label, value} tuples.
1075 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1077 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1078 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1079 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1086 return self
.GetXAxis(startDate
, endDate
, chosen
);
1088 // TODO(danvk): signal error.
1093 * Add ticks when the x axis has numbers on it (instead of dates)
1094 * @param {Number} startDate Start of the date window (millis since epoch)
1095 * @param {Number} endDate End of the date window (millis since epoch)
1096 * @return {Array.<Object>} Array of {label, value} tuples.
1099 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1101 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1102 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1103 // The first spacing greater than pixelsPerYLabel is what we use.
1104 if (self
.attr_("labelsKMG2")) {
1105 var mults
= [1, 2, 4, 8];
1107 var mults
= [1, 2, 5];
1109 var scale
, low_val
, high_val
, nTicks
;
1110 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1111 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1112 for (var i
= -10; i
< 50; i
++) {
1113 if (self
.attr_("labelsKMG2")) {
1114 var base_scale
= Math
.pow(16, i
);
1116 var base_scale
= Math
.pow(10, i
);
1118 for (var j
= 0; j
< mults
.length
; j
++) {
1119 scale
= base_scale
* mults
[j
];
1120 low_val
= Math
.floor(minV
/ scale
) * scale
;
1121 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1122 nTicks
= (high_val
- low_val
) / scale
;
1123 var spacing
= self
.height_
/ nTicks
;
1124 // wish I could break out of both loops at once...
1125 if (spacing
> pixelsPerTick
) break;
1127 if (spacing
> pixelsPerTick
) break;
1130 // Construct labels for the ticks
1134 if (self
.attr_("labelsKMB")) {
1136 k_labels
= [ "K", "M", "B", "T" ];
1138 if (self
.attr_("labelsKMG2")) {
1139 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1141 k_labels
= [ "k", "M", "G", "T" ];
1144 for (var i
= 0; i
< nTicks
; i
++) {
1145 var tickV
= low_val
+ i
* scale
;
1146 var absTickV
= Math
.abs(tickV
);
1147 var label
= self
.round_(tickV
, 2);
1148 if (k_labels
.length
) {
1149 // Round up to an appropriate unit.
1151 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1152 if (absTickV
>= n
) {
1153 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1158 ticks
.push( {label
: label
, v
: tickV
} );
1164 * Adds appropriate ticks on the y-axis
1165 * @param {Number} minY The minimum Y value in the data set
1166 * @param {Number} maxY The maximum Y value in the data set
1169 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1170 // Set the number of ticks so that the labels are human-friendly.
1171 // TODO(danvk): make this an attribute as well.
1172 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1173 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1177 // Computes the range of the data series (including confidence intervals).
1178 // series is either [ [x1, y1], [x2, y2], ... ] or
1179 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1180 // Returns [low, high]
1181 Dygraph
.prototype.extremeValues_
= function(series
) {
1182 var minY
= null, maxY
= null;
1184 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1186 // With custom bars, maxY is the max of the high values.
1187 for (var j
= 0; j
< series
.length
; j
++) {
1188 var y
= series
[j
][1][0];
1190 var low
= y
- series
[j
][1][1];
1191 var high
= y
+ series
[j
][1][2];
1192 if (low
> y
) low
= y
; // this can happen with custom bars,
1193 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1194 if (maxY
== null || high
> maxY
) {
1197 if (minY
== null || low
< minY
) {
1202 for (var j
= 0; j
< series
.length
; j
++) {
1203 var y
= series
[j
][1];
1204 if (y
=== null || isNaN(y
)) continue;
1205 if (maxY
== null || y
> maxY
) {
1208 if (minY
== null || y
< minY
) {
1214 return [minY
, maxY
];
1218 * Update the graph with new data. Data is in the format
1219 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1220 * or, if errorBars=true,
1221 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1222 * @param {Array.<Object>} data The data (see above)
1225 Dygraph
.prototype.drawGraph_
= function(data
) {
1226 var minY
= null, maxY
= null;
1227 this.layout_
.removeAllDatasets();
1229 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1231 // Loop over all fields in the dataset
1232 for (var i
= 1; i
< data
[0].length
; i
++) {
1234 for (var j
= 0; j
< data
.length
; j
++) {
1235 var date
= data
[j
][0];
1236 series
[j
] = [date
, data
[j
][i
]];
1238 series
= this.rollingAverage(series
, this.rollPeriod_
);
1240 // Prune down to the desired range, if necessary (for zooming)
1241 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1242 if (this.dateWindow_
) {
1243 var low
= this.dateWindow_
[0];
1244 var high
= this.dateWindow_
[1];
1246 for (var k
= 0; k
< series
.length
; k
++) {
1247 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1248 pruned
.push(series
[k
]);
1254 var extremes
= this.extremeValues_(series
);
1255 var thisMinY
= extremes
[0];
1256 var thisMaxY
= extremes
[1];
1257 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1258 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1262 for (var j
=0; j
<series
.length
; j
++)
1263 vals
[j
] = [series
[j
][0],
1264 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1265 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1267 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1271 // Use some heuristics to come up with a good maxY value, unless it's been
1272 // set explicitly by the user.
1273 if (this.valueRange_
!= null) {
1274 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1276 // Add some padding and round up to an integer to be human-friendly.
1277 var span
= maxY
- minY
;
1278 var maxAxisY
= maxY
+ 0.1 * span
;
1279 var minAxisY
= minY
- 0.1 * span
;
1281 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1282 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1283 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1285 if (this.attr_("includeZero")) {
1286 if (maxY
< 0) maxAxisY
= 0;
1287 if (minY
> 0) minAxisY
= 0;
1290 this.addYTicks_(minAxisY
, maxAxisY
);
1295 // Tell PlotKit to use this new data and render itself
1296 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1297 this.layout_
.evaluateWithError();
1298 this.plotter_
.clear();
1299 this.plotter_
.render();
1300 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1301 this.canvas_
.height
);
1305 * Calculates the rolling average of a data set.
1306 * If originalData is [label, val], rolls the average of those.
1307 * If originalData is [label, [, it's interpreted as [value, stddev]
1308 * and the roll is returned in the same form, with appropriately reduced
1309 * stddev for each value.
1310 * Note that this is where fractional input (i.e. '5/10') is converted into
1312 * @param {Array} originalData The data in the appropriate format (see above)
1313 * @param {Number} rollPeriod The number of days over which to average the data
1315 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1316 if (originalData
.length
< 2)
1317 return originalData
;
1318 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1319 var rollingData
= [];
1320 var sigma
= this.attr_("sigma");
1322 if (this.fractions_
) {
1324 var den
= 0; // numerator/denominator
1326 for (var i
= 0; i
< originalData
.length
; i
++) {
1327 num
+= originalData
[i
][1][0];
1328 den
+= originalData
[i
][1][1];
1329 if (i
- rollPeriod
>= 0) {
1330 num
-= originalData
[i
- rollPeriod
][1][0];
1331 den
-= originalData
[i
- rollPeriod
][1][1];
1334 var date
= originalData
[i
][0];
1335 var value
= den
? num
/ den
: 0.0;
1336 if (this.attr_("errorBars")) {
1337 if (this.wilsonInterval_
) {
1338 // For more details on this confidence interval, see:
1339 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1341 var p
= value
< 0 ? 0 : value
, n
= den
;
1342 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1343 var denom
= 1 + sigma
* sigma
/ den
;
1344 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1345 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1346 rollingData
[i
] = [date
,
1347 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1349 rollingData
[i
] = [date
, [0, 0, 0]];
1352 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1353 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1356 rollingData
[i
] = [date
, mult
* value
];
1359 } else if (this.attr_("customBars")) {
1364 for (var i
= 0; i
< originalData
.length
; i
++) {
1365 var data
= originalData
[i
][1];
1367 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1369 if (y
!= null && !isNaN(y
)) {
1375 if (i
- rollPeriod
>= 0) {
1376 var prev
= originalData
[i
- rollPeriod
];
1377 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1384 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1385 1.0 * (mid
- low
) / count
,
1386 1.0 * (high
- mid
) / count
]];
1389 // Calculate the rolling average for the first rollPeriod - 1 points where
1390 // there is not enough data to roll over the full number of days
1391 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1392 if (!this.attr_("errorBars")){
1393 if (rollPeriod
== 1) {
1394 return originalData
;
1397 for (var i
= 0; i
< originalData
.length
; i
++) {
1400 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1401 var y
= originalData
[j
][1];
1402 if (y
== null || isNaN(y
)) continue;
1404 sum
+= originalData
[j
][1];
1407 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1409 rollingData
[i
] = [originalData
[i
][0], null];
1414 for (var i
= 0; i
< originalData
.length
; i
++) {
1418 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1419 var y
= originalData
[j
][1][0];
1420 if (y
== null || isNaN(y
)) continue;
1422 sum
+= originalData
[j
][1][0];
1423 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1426 var stddev
= Math
.sqrt(variance
) / num_ok
;
1427 rollingData
[i
] = [originalData
[i
][0],
1428 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1430 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1440 * Parses a date, returning the number of milliseconds since epoch. This can be
1441 * passed in as an xValueParser in the Dygraph constructor.
1442 * TODO(danvk): enumerate formats that this understands.
1443 * @param {String} A date in YYYYMMDD format.
1444 * @return {Number} Milliseconds since epoch.
1447 Dygraph
.dateParser
= function(dateStr
, self
) {
1450 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1451 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1452 while (dateStrSlashed
.search("-") != -1) {
1453 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1455 d
= Date
.parse(dateStrSlashed
);
1456 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1457 // TODO(danvk): remove support for this format. It's confusing.
1458 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1459 + "/" + dateStr
.substr(6,2);
1460 d
= Date
.parse(dateStrSlashed
);
1462 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1463 // "2009/07/12 12:34:56"
1464 d
= Date
.parse(dateStr
);
1467 if (!d
|| isNaN(d
)) {
1468 self
.error("Couldn't parse " + dateStr
+ " as a date");
1474 * Detects the type of the str (date or numeric) and sets the various
1475 * formatting attributes in this.attrs_ based on this type.
1476 * @param {String} str An x value.
1479 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1481 if (str
.indexOf('-') >= 0 ||
1482 str
.indexOf('/') >= 0 ||
1483 isNaN(parseFloat(str
))) {
1485 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1486 // TODO(danvk): remove support for this format.
1491 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1492 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1493 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1495 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1496 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1497 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1502 * Parses a string in a special csv format. We expect a csv file where each
1503 * line is a date point, and the first field in each line is the date string.
1504 * We also expect that all remaining fields represent series.
1505 * if the errorBars attribute is set, then interpret the fields as:
1506 * date, series1, stddev1, series2, stddev2, ...
1507 * @param {Array.<Object>} data See above.
1510 * @return Array.<Object> An array with one entry for each row. These entries
1511 * are an array of cells in that row. The first entry is the parsed x-value for
1512 * the row. The second, third, etc. are the y-values. These can take on one of
1513 * three forms, depending on the CSV and constructor parameters:
1515 * 2. [ value, stddev ]
1516 * 3. [ low value, center value, high value ]
1518 Dygraph
.prototype.parseCSV_
= function(data
) {
1520 var lines
= data
.split("\n");
1522 // Use the default delimiter or fall back to a tab if that makes sense.
1523 var delim
= this.attr_('delimiter');
1524 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1529 if (this.labelsFromCSV_
) {
1531 this.attrs_
.labels
= lines
[0].split(delim
);
1535 var defaultParserSet
= false; // attempt to auto-detect x value type
1536 var expectedCols
= this.attr_("labels").length
;
1537 for (var i
= start
; i
< lines
.length
; i
++) {
1538 var line
= lines
[i
];
1539 if (line
.length
== 0) continue; // skip blank lines
1540 if (line
[0] == '#') continue; // skip comment lines
1541 var inFields
= line
.split(delim
);
1542 if (inFields
.length
< 2) continue;
1545 if (!defaultParserSet
) {
1546 this.detectTypeFromString_(inFields
[0]);
1547 xParser
= this.attr_("xValueParser");
1548 defaultParserSet
= true;
1550 fields
[0] = xParser(inFields
[0], this);
1552 // If fractions are expected, parse the numbers as "A/B
"
1553 if (this.fractions_) {
1554 for (var j = 1; j < inFields.length; j++) {
1555 // TODO(danvk): figure out an appropriate way to flag parse errors.
1556 var vals = inFields[j].split("/");
1557 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1559 } else if (this.attr_("errorBars
")) {
1560 // If there are error bars, values are (value, stddev) pairs
1561 for (var j = 1; j < inFields.length; j += 2)
1562 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1563 parseFloat(inFields[j + 1])];
1564 } else if (this.attr_("customBars
")) {
1565 // Bars are a low;center;high tuple
1566 for (var j = 1; j < inFields.length; j++) {
1567 var vals = inFields[j].split(";");
1568 fields[j] = [ parseFloat(vals[0]),
1569 parseFloat(vals[1]),
1570 parseFloat(vals[2]) ];
1573 // Values are just numbers
1574 for (var j = 1; j < inFields.length; j++) {
1575 fields[j] = parseFloat(inFields[j]);
1580 if (fields.length != expectedCols) {
1581 this.error("Number of columns
in line
" + i + " (" + fields.length +
1582 ") does not agree
with number of
labels (" + expectedCols +
1590 * The user has provided their data as a pre-packaged JS array. If the x values
1591 * are numeric, this is the same as dygraphs' internal format. If the x values
1592 * are dates, we need to convert them from Date objects to ms since epoch.
1593 * @param {Array.<Object>} data
1594 * @return {Array.<Object>} data with numeric x values.
1596 Dygraph.prototype.parseArray_ = function(data) {
1597 // Peek at the first x value to see if it's numeric.
1598 if (data.length == 0) {
1599 this.error("Can
't plot empty data set");
1602 if (data[0].length == 0) {
1603 this.error("Data set cannot contain an empty row");
1607 if (this.attr_("labels") == null) {
1608 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1609 "in the options parameter");
1610 this.attrs_.labels = [ "X" ];
1611 for (var i = 1; i < data[0].length; i++) {
1612 this.attrs_.labels.push("Y" + i);
1616 if (Dygraph.isDateLike(data[0][0])) {
1617 // Some intelligent defaults for a date x-axis.
1618 this.attrs_.xValueFormatter = Dygraph.dateString_;
1619 this.attrs_.xTicker = Dygraph.dateTicker;
1621 // Assume they're all dates
.
1622 var parsedData
= Dygraph
.clone(data
);
1623 for (var i
= 0; i
< data
.length
; i
++) {
1624 if (parsedData
[i
].length
== 0) {
1625 this.error("Row " << (1 + i
) << " of data is empty");
1628 if (parsedData
[i
][0] == null
1629 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1630 this.error("x value in row " << (1 + i
) << " is not a Date");
1633 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1637 // Some intelligent defaults for a numeric x-axis.
1638 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1639 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1645 * Parses a DataTable object from gviz.
1646 * The data is expected to have a first column that is either a date or a
1647 * number. All subsequent columns must be numbers. If there is a clear mismatch
1648 * between this.xValueParser_ and the type of the first column, it will be
1649 * fixed. Returned value is in the same format as return value of parseCSV_.
1650 * @param {Array.<Object>} data See above.
1653 Dygraph
.prototype.parseDataTable_
= function(data
) {
1654 var cols
= data
.getNumberOfColumns();
1655 var rows
= data
.getNumberOfRows();
1657 // Read column labels
1659 for (var i
= 0; i
< cols
; i
++) {
1660 labels
.push(data
.getColumnLabel(i
));
1661 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1663 this.attrs_
.labels
= labels
;
1664 cols
= labels
.length
;
1666 var indepType
= data
.getColumnType(0);
1667 if (indepType
== 'date') {
1668 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1669 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1670 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1671 } else if (indepType
== 'number') {
1672 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1673 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1674 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1676 this.error("only 'date' and 'number' types are supported for column 1 " +
1677 "of DataTable input (Got '" + indepType
+ "')");
1682 for (var i
= 0; i
< rows
; i
++) {
1684 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1685 data
.getValue(i
, 0) === null) {
1686 this.warning("Ignoring row " + i
+
1687 " of DataTable because of undefined or null first column.");
1691 if (indepType
== 'date') {
1692 row
.push(data
.getValue(i
, 0).getTime());
1694 row
.push(data
.getValue(i
, 0));
1696 if (!this.attr_("errorBars")) {
1697 for (var j
= 1; j
< cols
; j
++) {
1698 row
.push(data
.getValue(i
, j
));
1701 for (var j
= 0; j
< cols
- 1; j
++) {
1702 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1710 // These functions are all based on MochiKit.
1711 Dygraph
.update
= function (self
, o
) {
1712 if (typeof(o
) != 'undefined' && o
!== null) {
1714 if (o
.hasOwnProperty(k
)) {
1722 Dygraph
.isArrayLike
= function (o
) {
1723 var typ
= typeof(o
);
1725 (typ
!= 'object' && !(typ
== 'function' &&
1726 typeof(o
.item
) == 'function')) ||
1728 typeof(o
.length
) != 'number' ||
1736 Dygraph
.isDateLike
= function (o
) {
1737 if (typeof(o
) != "object" || o
=== null ||
1738 typeof(o
.getTime
) != 'function') {
1744 Dygraph
.clone
= function(o
) {
1745 // TODO(danvk): figure out how MochiKit's version works
1747 for (var i
= 0; i
< o
.length
; i
++) {
1748 if (Dygraph
.isArrayLike(o
[i
])) {
1749 r
.push(Dygraph
.clone(o
[i
]));
1759 * Get the CSV data. If it's in a function, call that function. If it's in a
1760 * file, do an XMLHttpRequest to get it.
1763 Dygraph
.prototype.start_
= function() {
1764 if (typeof this.file_
== 'function') {
1765 // CSV string. Pretend we got it via XHR.
1766 this.loadedEvent_(this.file_());
1767 } else if (Dygraph
.isArrayLike(this.file_
)) {
1768 this.rawData_
= this.parseArray_(this.file_
);
1769 this.drawGraph_(this.rawData_
);
1770 } else if (typeof this.file_
== 'object' &&
1771 typeof this.file_
.getColumnRange
== 'function') {
1772 // must be a DataTable from gviz.
1773 this.rawData_
= this.parseDataTable_(this.file_
);
1774 this.drawGraph_(this.rawData_
);
1775 } else if (typeof this.file_
== 'string') {
1776 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1777 if (this.file_
.indexOf('\n') >= 0) {
1778 this.loadedEvent_(this.file_
);
1780 var req
= new XMLHttpRequest();
1782 req
.onreadystatechange
= function () {
1783 if (req
.readyState
== 4) {
1784 if (req
.status
== 200) {
1785 caller
.loadedEvent_(req
.responseText
);
1790 req
.open("GET", this.file_
, true);
1794 this.error("Unknown data format: " + (typeof this.file_
));
1799 * Changes various properties of the graph. These can include:
1801 * <li>file: changes the source data for the graph</li>
1802 * <li>errorBars: changes whether the data contains stddev</li>
1804 * @param {Object} attrs The new properties and values
1806 Dygraph
.prototype.updateOptions
= function(attrs
) {
1807 // TODO(danvk): this is a mess. Rethink this function.
1808 if (attrs
.rollPeriod
) {
1809 this.rollPeriod_
= attrs
.rollPeriod
;
1811 if (attrs
.dateWindow
) {
1812 this.dateWindow_
= attrs
.dateWindow
;
1814 if (attrs
.valueRange
) {
1815 this.valueRange_
= attrs
.valueRange
;
1817 Dygraph
.update(this.user_attrs_
, attrs
);
1819 this.labelsFromCSV_
= (this.attr_("labels") == null);
1821 // TODO(danvk): this doesn't match the constructor logic
1822 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1823 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1824 this.file_
= attrs
['file'];
1827 this.drawGraph_(this.rawData_
);
1832 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1833 * containing div (which has presumably changed size since the dygraph was
1834 * instantiated. If the width/height are specified, the div will be resized.
1836 * This is far more efficient than destroying and re-instantiating a
1837 * Dygraph, since it doesn't have to reparse the underlying data.
1839 * @param {Number} width Width (in pixels)
1840 * @param {Number} height Height (in pixels)
1842 Dygraph
.prototype.resize
= function(width
, height
) {
1843 if ((width
=== null) != (height
=== null)) {
1844 this.warn("Dygraph.resize() should be called with zero parameters or " +
1845 "two non-NULL parameters. Pretending it was zero.");
1846 width
= height
= null;
1849 // TODO(danvk): there should be a clear() method.
1850 this.maindiv_
.innerHTML
= "";
1851 this.attrs_
.labelsDiv
= null;
1854 this.maindiv_
.style
.width
= width
+ "px";
1855 this.maindiv_
.style
.height
= height
+ "px";
1856 this.width_
= width
;
1857 this.height_
= height
;
1859 this.width_
= this.maindiv_
.offsetWidth
;
1860 this.height_
= this.maindiv_
.offsetHeight
;
1863 this.createInterface_();
1864 this.drawGraph_(this.rawData_
);
1868 * Adjusts the number of days in the rolling average. Updates the graph to
1869 * reflect the new averaging period.
1870 * @param {Number} length Number of days over which to average the data.
1872 Dygraph
.prototype.adjustRoll
= function(length
) {
1873 this.rollPeriod_
= length
;
1874 this.drawGraph_(this.rawData_
);
1878 * Create a new canvas element. This is more complex than a simple
1879 * document.createElement("canvas") because of IE and excanvas.
1881 Dygraph
.createCanvas
= function() {
1882 var canvas
= document
.createElement("canvas");
1884 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1886 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1894 * A wrapper around Dygraph that implements the gviz API.
1895 * @param {Object} container The DOM object the visualization should live in.
1897 Dygraph
.GVizChart
= function(container
) {
1898 this.container
= container
;
1901 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1902 this.container
.innerHTML
= '';
1903 this.date_graph
= new Dygraph(this.container
, data
, options
);
1906 // Older pages may still use this name.
1907 DateGraph
= Dygraph
;