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
119 // Various logging levels.
125 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
126 // Labels is no longer a constructor parameter, since it's typically set
127 // directly from the data source. It also conains a name for the x-axis,
128 // which the previous constructor form did not.
129 if (labels
!= null) {
130 var new_labels
= ["Date"];
131 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
132 Dygraph
.update(attrs
, { 'labels': new_labels
});
134 this.__init__(div
, file
, attrs
);
138 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
139 * and interaction <canvas> inside of it. See the constructor for details
141 * @param {String | Function} file Source data
142 * @param {Array.<String>} labels Names of the data series
143 * @param {Object} attrs Miscellaneous other options
146 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
147 // Support two-argument constructor
148 if (attrs
== null) { attrs
= {}; }
150 // Copy the important bits into the object
151 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
154 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
155 this.previousVerticalX_
= -1;
156 this.fractions_
= attrs
.fractions
|| false;
157 this.dateWindow_
= attrs
.dateWindow
|| null;
158 this.valueRange_
= attrs
.valueRange
|| null;
159 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
161 // Clear the div. This ensure that, if multiple dygraphs are passed the same
162 // div, then only one will be drawn.
165 // If the div isn't already sized then give it a default size.
166 if (div
.style
.width
== '') {
167 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
169 if (div
.style
.height
== '') {
170 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
172 this.width_
= parseInt(div
.style
.width
, 10);
173 this.height_
= parseInt(div
.style
.height
, 10);
175 // Dygraphs has many options, some of which interact with one another.
176 // To keep track of everything, we maintain two sets of options:
178 // this.user_attrs_ only options explicitly set by the user.
179 // this.attrs_ defaults, options derived from user_attrs_, data.
181 // Options are then accessed this.attr_('attr'), which first looks at
182 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
183 // defaults without overriding behavior that the user specifically asks for.
184 this.user_attrs_
= {};
185 Dygraph
.update(this.user_attrs_
, attrs
);
188 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
190 // Make a note of whether labels will be pulled from the CSV file.
191 this.labelsFromCSV_
= (this.attr_("labels") == null);
193 // Create the containing DIV and other interactive elements
194 this.createInterface_();
199 Dygraph
.prototype.attr_
= function(name
) {
200 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
201 return this.user_attrs_
[name
];
202 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
203 return this.attrs_
[name
];
209 // TODO(danvk): any way I can get the line numbers to be this.warn call?
210 Dygraph
.prototype.log
= function(severity
, message
) {
211 if (typeof(console
) != 'undefined') {
214 console
.debug('dygraphs: ' + message
);
217 console
.info('dygraphs: ' + message
);
219 case Dygraph
.WARNING
:
220 console
.warn('dygraphs: ' + message
);
223 console
.error('dygraphs: ' + message
);
228 Dygraph
.prototype.info
= function(message
) {
229 this.log(Dygraph
.INFO
, message
);
231 Dygraph
.prototype.warn
= function(message
) {
232 this.log(Dygraph
.WARNING
, message
);
234 Dygraph
.prototype.error
= function(message
) {
235 this.log(Dygraph
.ERROR
, message
);
239 * Returns the current rolling period, as set by the user or an option.
240 * @return {Number} The number of days in the rolling window
242 Dygraph
.prototype.rollPeriod
= function() {
243 return this.rollPeriod_
;
246 Dygraph
.addEvent
= function(el
, evt
, fn
) {
247 var normed_fn
= function(e
) {
248 if (!e
) var e
= window
.event
;
251 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
252 el
.addEventListener(evt
, normed_fn
, false);
254 el
.attachEvent('on' + evt
, normed_fn
);
259 * Generates interface elements for the Dygraph: a containing div, a div to
260 * display the current point, and a textbox to adjust the rolling average
261 * period. Also creates the Renderer/Layout elements.
264 Dygraph
.prototype.createInterface_
= function() {
265 // Create the all-enclosing graph div
266 var enclosing
= this.maindiv_
;
268 this.graphDiv
= document
.createElement("div");
269 this.graphDiv
.style
.width
= this.width_
+ "px";
270 this.graphDiv
.style
.height
= this.height_
+ "px";
271 enclosing
.appendChild(this.graphDiv
);
273 // Create the canvas for interactive parts of the chart.
274 // this.canvas_ = document.createElement("canvas");
275 this.canvas_
= Dygraph
.createCanvas();
276 this.canvas_
.style
.position
= "absolute";
277 this.canvas_
.width
= this.width_
;
278 this.canvas_
.height
= this.height_
;
279 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
280 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
281 this.graphDiv
.appendChild(this.canvas_
);
283 // ... and for static parts of the chart.
284 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
287 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
288 dygraph
.mouseMove_(e
);
290 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
291 dygraph
.mouseOut_(e
);
294 // Create the grapher
295 // TODO(danvk): why does the Layout need its own set of options?
296 this.layoutOptions_
= { 'xOriginIsZero': false };
297 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
298 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
299 Dygraph
.update(this.layoutOptions_
, {
300 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
302 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
304 // TODO(danvk): why does the Renderer need its own set of options?
305 this.renderOptions_
= { colorScheme
: this.colors_
,
307 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
308 Dygraph
.update(this.renderOptions_
, this.attrs_
);
309 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
310 this.plotter_
= new DygraphCanvasRenderer(this,
311 this.hidden_
, this.layout_
,
312 this.renderOptions_
);
314 this.createStatusMessage_();
315 this.createRollInterface_();
316 this.createDragInterface_();
320 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
321 * this particular canvas. All Dygraph work is done on this.canvas_.
322 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
323 * @return {Object} The newly-created canvas
326 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
327 // var h = document.createElement("canvas");
328 var h
= Dygraph
.createCanvas();
329 h
.style
.position
= "absolute";
330 h
.style
.top
= canvas
.style
.top
;
331 h
.style
.left
= canvas
.style
.left
;
332 h
.width
= this.width_
;
333 h
.height
= this.height_
;
334 h
.style
.width
= this.width_
+ "px"; // for IE
335 h
.style
.height
= this.height_
+ "px"; // for IE
336 this.graphDiv
.appendChild(h
);
340 // Taken from MochiKit.Color
341 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
345 if (saturation
=== 0) {
350 var i
= Math
.floor(hue
* 6);
351 var f
= (hue
* 6) - i
;
352 var p
= value
* (1 - saturation
);
353 var q
= value
* (1 - (saturation
* f
));
354 var t
= value
* (1 - (saturation
* (1 - f
)));
356 case 1: red
= q
; green
= value
; blue
= p
; break;
357 case 2: red
= p
; green
= value
; blue
= t
; break;
358 case 3: red
= p
; green
= q
; blue
= value
; break;
359 case 4: red
= t
; green
= p
; blue
= value
; break;
360 case 5: red
= value
; green
= p
; blue
= q
; break;
361 case 6: // fall through
362 case 0: red
= value
; green
= t
; blue
= p
; break;
365 red
= Math
.floor(255 * red
+ 0.5);
366 green
= Math
.floor(255 * green
+ 0.5);
367 blue
= Math
.floor(255 * blue
+ 0.5);
368 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
373 * Generate a set of distinct colors for the data series. This is done with a
374 * color wheel. Saturation/Value are customizable, and the hue is
375 * equally-spaced around the color wheel. If a custom set of colors is
376 * specified, that is used instead.
379 Dygraph
.prototype.setColors_
= function() {
380 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
381 // away with this.renderOptions_.
382 var num
= this.attr_("labels").length
- 1;
384 var colors
= this.attr_('colors');
386 var sat
= this.attr_('colorSaturation') || 1.0;
387 var val
= this.attr_('colorValue') || 0.5;
388 for (var i
= 1; i
<= num
; i
++) {
389 var hue
= (1.0*i
/(1+num
));
390 this.colors_
.push( Dygraph
.hsvToRGB(hue
, sat
, val
) );
393 for (var i
= 0; i
< num
; i
++) {
394 var colorStr
= colors
[i
% colors
.length
];
395 this.colors_
.push(colorStr
);
399 // TODO(danvk): update this w/r
/t/ the
new options system
.
400 this.renderOptions_
.colorScheme
= this.colors_
;
401 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
402 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
403 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
406 // The following functions are from quirksmode.org
407 // http://www.quirksmode.org/js
/findpos
.html
408 Dygraph
.findPosX
= function(obj
) {
410 if (obj
.offsetParent
) {
411 while (obj
.offsetParent
) {
412 curleft
+= obj
.offsetLeft
;
413 obj
= obj
.offsetParent
;
421 Dygraph
.findPosY
= function(obj
) {
423 if (obj
.offsetParent
) {
424 while (obj
.offsetParent
) {
425 curtop
+= obj
.offsetTop
;
426 obj
= obj
.offsetParent
;
435 * Create the div that contains information on the selected point(s)
436 * This goes in the top right of the canvas, unless an external div has already
440 Dygraph
.prototype.createStatusMessage_
= function(){
441 if (!this.attr_("labelsDiv")) {
442 var divWidth
= this.attr_('labelsDivWidth');
444 "position": "absolute",
447 "width": divWidth
+ "px",
449 "left": (this.width_
- divWidth
- 2) + "px",
450 "background": "white",
452 "overflow": "hidden"};
453 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
454 var div
= document
.createElement("div");
455 for (var name
in messagestyle
) {
456 if (messagestyle
.hasOwnProperty(name
)) {
457 div
.style
[name
] = messagestyle
[name
];
460 this.graphDiv
.appendChild(div
);
461 this.attrs_
.labelsDiv
= div
;
466 * Create the text box to adjust the averaging period
467 * @return {Object} The newly-created text box
470 Dygraph
.prototype.createRollInterface_
= function() {
471 var display
= this.attr_('showRoller') ? "block" : "none";
472 var textAttr
= { "position": "absolute",
474 "top": (this.plotter_
.area
.h
- 25) + "px",
475 "left": (this.plotter_
.area
.x
+ 1) + "px",
478 var roller
= document
.createElement("input");
479 roller
.type
= "text";
481 roller
.value
= this.rollPeriod_
;
482 for (var name
in textAttr
) {
483 if (textAttr
.hasOwnProperty(name
)) {
484 roller
.style
[name
] = textAttr
[name
];
488 var pa
= this.graphDiv
;
489 pa
.appendChild(roller
);
491 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
495 // These functions are taken from MochiKit.Signal
496 Dygraph
.pageX
= function(e
) {
498 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
501 var b
= document
.body
;
503 (de
.scrollLeft
|| b
.scrollLeft
) -
504 (de
.clientLeft
|| 0);
508 Dygraph
.pageY
= function(e
) {
510 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
513 var b
= document
.body
;
515 (de
.scrollTop
|| b
.scrollTop
) -
521 * Set up all the mouse handlers needed to capture dragging behavior for zoom
525 Dygraph
.prototype.createDragInterface_
= function() {
528 // Tracks whether the mouse is down right now
529 var isZooming
= false;
530 var isPanning
= false;
531 var dragStartX
= null;
532 var dragStartY
= null;
536 var draggingDate
= null;
537 var dateRange
= null;
539 // Utility function to convert page-wide coordinates to canvas coords
542 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
543 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
545 // Draw zoom rectangles when the mouse is down and the user moves around
546 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
548 dragEndX
= getX(event
);
549 dragEndY
= getY(event
);
551 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
553 } else if (isPanning
) {
554 dragEndX
= getX(event
);
555 dragEndY
= getY(event
);
557 // Want to have it so that:
558 // 1. draggingDate appears at dragEndX
559 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
561 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
562 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
563 self
.drawGraph_(self
.rawData_
);
567 // Track the beginning of drag events
568 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
569 px
= Dygraph
.findPosX(self
.canvas_
);
570 py
= Dygraph
.findPosY(self
.canvas_
);
571 dragStartX
= getX(event
);
572 dragStartY
= getY(event
);
574 if (event
.altKey
|| event
.shiftKey
) {
575 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
577 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
578 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
585 // If the user releases the mouse button during a drag, but not over the
586 // canvas, then it doesn't count as a zooming action.
587 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
588 if (isZooming
|| isPanning
) {
601 // Temporarily cancel the dragging event when the mouse leaves the graph
602 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
609 // If the mouse is released on the canvas during a drag event, then it's a
610 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
611 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
614 dragEndX
= getX(event
);
615 dragEndY
= getY(event
);
616 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
617 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
619 if (regionWidth
< 2 && regionHeight
< 2 &&
620 self
.attr_('clickCallback') != null &&
621 self
.lastx_
!= undefined
) {
622 // TODO(danvk): pass along more info about the points.
623 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
626 if (regionWidth
>= 10) {
627 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
628 Math
.max(dragStartX
, dragEndX
));
630 self
.canvas_
.getContext("2d").clearRect(0, 0,
632 self
.canvas_
.height
);
646 // Double-clicking zooms back out
647 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
648 if (self
.dateWindow_
== null) return;
649 self
.dateWindow_
= null;
650 self
.drawGraph_(self
.rawData_
);
651 var minDate
= self
.rawData_
[0][0];
652 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
653 if (self
.attr_("zoomCallback")) {
654 self
.attr_("zoomCallback")(minDate
, maxDate
);
660 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
661 * up any previous zoom rectangles that were drawn. This could be optimized to
662 * avoid extra redrawing, but it's tricky to avoid interactions with the status
664 * @param {Number} startX The X position where the drag started, in canvas
666 * @param {Number} endX The current X position of the drag, in canvas coords.
667 * @param {Number} prevEndX The value of endX on the previous call to this
668 * function. Used to avoid excess redrawing
671 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
672 var ctx
= this.canvas_
.getContext("2d");
674 // Clean up from the previous rect if necessary
676 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
677 Math
.abs(startX
- prevEndX
), this.height_
);
680 // Draw a light-grey rectangle to show the new viewing area
681 if (endX
&& startX
) {
682 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
683 ctx
.fillRect(Math
.min(startX
, endX
), 0,
684 Math
.abs(endX
- startX
), this.height_
);
689 * Zoom to something containing [lowX, highX]. These are pixel coordinates
690 * in the canvas. The exact zoom window may be slightly larger if there are no
691 * data points near lowX or highX. This function redraws the graph.
692 * @param {Number} lowX The leftmost pixel value that should be visible.
693 * @param {Number} highX The rightmost pixel value that should be visible.
696 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
697 // Find the earliest and latest dates contained in this canvasx range.
698 var points
= this.layout_
.points
;
701 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
702 for (var i
= 0; i
< points
.length
; i
++) {
703 var cx
= points
[i
].canvasx
;
704 var x
= points
[i
].xval
;
705 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
706 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
708 // Use the extremes if either is missing
709 if (minDate
== null) minDate
= points
[0].xval
;
710 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
712 this.dateWindow_
= [minDate
, maxDate
];
713 this.drawGraph_(this.rawData_
);
714 if (this.attr_("zoomCallback")) {
715 this.attr_("zoomCallback")(minDate
, maxDate
);
720 * When the mouse moves in the canvas, display information about a nearby data
721 * point and draw dots over those points in the data series. This function
722 * takes care of cleanup of previously-drawn dots.
723 * @param {Object} event The mousemove event from the browser.
726 Dygraph
.prototype.mouseMove_
= function(event
) {
727 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
728 var points
= this.layout_
.points
;
733 // Loop through all the points and find the date nearest to our current
735 var minDist
= 1e+100;
737 for (var i
= 0; i
< points
.length
; i
++) {
738 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
739 if (dist
> minDist
) break;
743 if (idx
>= 0) lastx
= points
[idx
].xval
;
744 // Check that you can really highlight the last day's data
745 if (canvasx
> points
[points
.length
-1].canvasx
)
746 lastx
= points
[points
.length
-1].xval
;
748 // Extract the points we've selected
749 this.selPoints_
= [];
750 for (var i
= 0; i
< points
.length
; i
++) {
751 if (points
[i
].xval
== lastx
) {
752 this.selPoints_
.push(points
[i
]);
756 if (this.attr_("highlightCallback")) {
757 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
760 // Clear the previously drawn vertical, if there is one
761 var circleSize
= this.attr_('highlightCircleSize');
762 var ctx
= this.canvas_
.getContext("2d");
763 if (this.previousVerticalX_
>= 0) {
764 var px
= this.previousVerticalX_
;
765 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
768 var isOK
= function(x
) { return x
&& !isNaN(x
); };
770 if (this.selPoints_
.length
> 0) {
771 var canvasx
= this.selPoints_
[0].canvasx
;
773 // Set the status message to indicate the selected point(s)
774 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
775 var clen
= this.colors_
.length
;
776 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
777 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
778 if (this.attr_("labelsSeparateLines")) {
781 var point
= this.selPoints_
[i
];
782 var c
= new RGBColor(this.colors_
[i
%clen
]);
783 replace
+= " <b><font color='" + c
.toHex() + "'>"
784 + point
.name
+ "</font></b>:"
785 + this.round_(point
.yval
, 2);
787 this.attr_("labelsDiv").innerHTML
= replace
;
789 // Save last x position for callbacks.
792 // Draw colored circles over the center of each selected point
794 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
795 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
797 ctx
.fillStyle
= this.colors_
[i
%clen
];
798 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
799 0, 2 * Math
.PI
, false);
804 this.previousVerticalX_
= canvasx
;
809 * The mouse has left the canvas. Clear out whatever artifacts remain
810 * @param {Object} event the mouseout event from the browser.
813 Dygraph
.prototype.mouseOut_
= function(event
) {
814 // Get rid of the overlay data
815 var ctx
= this.canvas_
.getContext("2d");
816 ctx
.clearRect(0, 0, this.width_
, this.height_
);
817 this.attr_("labelsDiv").innerHTML
= "";
820 Dygraph
.zeropad
= function(x
) {
821 if (x
< 10) return "0" + x
; else return "" + x
;
825 * Return a string version of the hours, minutes and seconds portion of a date.
826 * @param {Number} date The JavaScript date (ms since epoch)
827 * @return {String} A time of the form "HH:MM:SS"
830 Dygraph
.prototype.hmsString_
= function(date
) {
831 var zeropad
= Dygraph
.zeropad
;
832 var d
= new Date(date
);
833 if (d
.getSeconds()) {
834 return zeropad(d
.getHours()) + ":" +
835 zeropad(d
.getMinutes()) + ":" +
836 zeropad(d
.getSeconds());
837 } else if (d
.getMinutes()) {
838 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
840 return zeropad(d
.getHours());
845 * Convert a JS date (millis since epoch) to YYYY/MM/DD
846 * @param {Number} date The JavaScript date (ms since epoch)
847 * @return {String} A date of the form "YYYY/MM/DD"
849 * TODO(danvk): why is this part of the prototype?
851 Dygraph
.dateString_
= function(date
, self
) {
852 var zeropad
= Dygraph
.zeropad
;
853 var d
= new Date(date
);
856 var year
= "" + d
.getFullYear();
857 // Get a 0 padded month string
858 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
859 // Get a 0 padded day string
860 var day
= zeropad(d
.getDate());
863 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
864 if (frac
) ret
= " " + self
.hmsString_(date
);
866 return year
+ "/" + month + "/" + day
+ ret
;
870 * Round a number to the specified number of digits past the decimal point.
871 * @param {Number} num The number to round
872 * @param {Number} places The number of decimals to which to round
873 * @return {Number} The rounded number
876 Dygraph
.prototype.round_
= function(num
, places
) {
877 var shift
= Math
.pow(10, places
);
878 return Math
.round(num
* shift
)/shift
;
882 * Fires when there's data available to be graphed.
883 * @param {String} data Raw CSV data to be plotted
886 Dygraph
.prototype.loadedEvent_
= function(data
) {
887 this.rawData_
= this.parseCSV_(data
);
888 this.drawGraph_(this.rawData_
);
891 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
892 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
893 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
896 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
899 Dygraph
.prototype.addXTicks_
= function() {
900 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
901 var startDate
, endDate
;
902 if (this.dateWindow_
) {
903 startDate
= this.dateWindow_
[0];
904 endDate
= this.dateWindow_
[1];
906 startDate
= this.rawData_
[0][0];
907 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
910 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
911 this.layout_
.updateOptions({xTicks
: xTicks
});
914 // Time granularity enumeration
915 Dygraph
.SECONDLY
= 0;
916 Dygraph
.TWO_SECONDLY
= 1;
917 Dygraph
.FIVE_SECONDLY
= 2;
918 Dygraph
.TEN_SECONDLY
= 3;
919 Dygraph
.THIRTY_SECONDLY
= 4;
920 Dygraph
.MINUTELY
= 5;
921 Dygraph
.TWO_MINUTELY
= 6;
922 Dygraph
.FIVE_MINUTELY
= 7;
923 Dygraph
.TEN_MINUTELY
= 8;
924 Dygraph
.THIRTY_MINUTELY
= 9;
926 Dygraph
.TWO_HOURLY
= 11;
927 Dygraph
.SIX_HOURLY
= 12;
930 Dygraph
.MONTHLY
= 15;
931 Dygraph
.QUARTERLY
= 16;
932 Dygraph
.BIANNUAL
= 17;
934 Dygraph
.DECADAL
= 19;
935 Dygraph
.NUM_GRANULARITIES
= 20;
937 Dygraph
.SHORT_SPACINGS
= [];
938 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
939 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
940 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
941 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
942 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
943 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
944 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
945 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
946 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
947 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
948 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
949 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
950 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
951 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
952 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
956 // If we used this time granularity, how many ticks would there be?
957 // This is only an approximation, but it's generally good enough.
959 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
960 if (granularity
< Dygraph
.MONTHLY
) {
961 // Generate one tick mark for every fixed interval of time.
962 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
963 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
965 var year_mod
= 1; // e.g. to only print one point every 10 years.
967 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
968 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
969 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
970 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
972 var msInYear
= 365.2524 * 24 * 3600 * 1000;
973 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
974 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
980 // Construct an x-axis of nicely-formatted times on meaningful boundaries
981 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
983 // Returns an array containing {v: millis, label: label} dictionaries.
985 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
987 if (granularity
< Dygraph
.MONTHLY
) {
988 // Generate one tick mark for every fixed interval of time.
989 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
990 var format
= '%d%b'; // e.g. "1Jan"
992 // Find a time less than start_time which occurs on a "nice" time boundary
993 // for this granularity.
994 var g
= spacing
/ 1000;
995 var d
= new Date(start_time
);
996 if (g
<= 60) { // seconds
997 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1001 if (g
<= 60) { // minutes
1002 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1007 if (g
<= 24) { // days
1008 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1013 if (g
== 7) { // one week
1014 d
.setDate(d
.getDate() - d
.getDay());
1019 start_time
= d
.getTime();
1021 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1022 var d
= new Date(t
);
1023 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1024 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1025 // the extra hour covers DST problems.
1026 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1028 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1032 // Display a tick mark on the first of a set of months of each year.
1033 // Years get a tick mark iff y % year_mod == 0. This is useful for
1034 // displaying a tick mark once every 10 years, say, on long time scales.
1036 var year_mod
= 1; // e.g. to only print one point every 10 years.
1038 if (granularity
== Dygraph
.MONTHLY
) {
1039 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1040 } else if (granularity
== Dygraph
.QUARTERLY
) {
1041 months
= [ 0, 3, 6, 9 ];
1042 } else if (granularity
== Dygraph
.BIANNUAL
) {
1044 } else if (granularity
== Dygraph
.ANNUAL
) {
1046 } else if (granularity
== Dygraph
.DECADAL
) {
1051 var start_year
= new Date(start_time
).getFullYear();
1052 var end_year
= new Date(end_time
).getFullYear();
1053 var zeropad
= Dygraph
.zeropad
;
1054 for (var i
= start_year
; i
<= end_year
; i
++) {
1055 if (i
% year_mod
!= 0) continue;
1056 for (var j
= 0; j
< months
.length
; j
++) {
1057 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1058 var t
= Date
.parse(date_str
);
1059 if (t
< start_time
|| t
> end_time
) continue;
1060 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1070 * Add ticks to the x-axis based on a date range.
1071 * @param {Number} startDate Start of the date window (millis since epoch)
1072 * @param {Number} endDate End of the date window (millis since epoch)
1073 * @return {Array.<Object>} Array of {label, value} tuples.
1076 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1078 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1079 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1080 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1087 return self
.GetXAxis(startDate
, endDate
, chosen
);
1089 // TODO(danvk): signal error.
1094 * Add ticks when the x axis has numbers on it (instead of dates)
1095 * @param {Number} startDate Start of the date window (millis since epoch)
1096 * @param {Number} endDate End of the date window (millis since epoch)
1097 * @return {Array.<Object>} Array of {label, value} tuples.
1100 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1102 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1103 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1104 // The first spacing greater than pixelsPerYLabel is what we use.
1105 if (self
.attr_("labelsKMG2")) {
1106 var mults
= [1, 2, 4, 8];
1108 var mults
= [1, 2, 5];
1110 var scale
, low_val
, high_val
, nTicks
;
1111 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1112 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1113 for (var i
= -10; i
< 50; i
++) {
1114 if (self
.attr_("labelsKMG2")) {
1115 var base_scale
= Math
.pow(16, i
);
1117 var base_scale
= Math
.pow(10, i
);
1119 for (var j
= 0; j
< mults
.length
; j
++) {
1120 scale
= base_scale
* mults
[j
];
1121 low_val
= Math
.floor(minV
/ scale
) * scale
;
1122 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1123 nTicks
= (high_val
- low_val
) / scale
;
1124 var spacing
= self
.height_
/ nTicks
;
1125 // wish I could break out of both loops at once...
1126 if (spacing
> pixelsPerTick
) break;
1128 if (spacing
> pixelsPerTick
) break;
1131 // Construct labels for the ticks
1135 if (self
.attr_("labelsKMB")) {
1137 k_labels
= [ "K", "M", "B", "T" ];
1139 if (self
.attr_("labelsKMG2")) {
1140 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1142 k_labels
= [ "k", "M", "G", "T" ];
1145 for (var i
= 0; i
< nTicks
; i
++) {
1146 var tickV
= low_val
+ i
* scale
;
1147 var absTickV
= Math
.abs(tickV
);
1148 var label
= self
.round_(tickV
, 2);
1149 if (k_labels
.length
) {
1150 // Round up to an appropriate unit.
1152 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1153 if (absTickV
>= n
) {
1154 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1159 ticks
.push( {label
: label
, v
: tickV
} );
1165 * Adds appropriate ticks on the y-axis
1166 * @param {Number} minY The minimum Y value in the data set
1167 * @param {Number} maxY The maximum Y value in the data set
1170 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1171 // Set the number of ticks so that the labels are human-friendly.
1172 // TODO(danvk): make this an attribute as well.
1173 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1174 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1178 // Computes the range of the data series (including confidence intervals).
1179 // series is either [ [x1, y1], [x2, y2], ... ] or
1180 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1181 // Returns [low, high]
1182 Dygraph
.prototype.extremeValues_
= function(series
) {
1183 var minY
= null, maxY
= null;
1185 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1187 // With custom bars, maxY is the max of the high values.
1188 for (var j
= 0; j
< series
.length
; j
++) {
1189 var y
= series
[j
][1][0];
1191 var low
= y
- series
[j
][1][1];
1192 var high
= y
+ series
[j
][1][2];
1193 if (low
> y
) low
= y
; // this can happen with custom bars,
1194 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1195 if (maxY
== null || high
> maxY
) {
1198 if (minY
== null || low
< minY
) {
1203 for (var j
= 0; j
< series
.length
; j
++) {
1204 var y
= series
[j
][1];
1205 if (y
=== null || isNaN(y
)) continue;
1206 if (maxY
== null || y
> maxY
) {
1209 if (minY
== null || y
< minY
) {
1215 return [minY
, maxY
];
1219 * Update the graph with new data. Data is in the format
1220 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1221 * or, if errorBars=true,
1222 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1223 * @param {Array.<Object>} data The data (see above)
1226 Dygraph
.prototype.drawGraph_
= function(data
) {
1227 var minY
= null, maxY
= null;
1228 this.layout_
.removeAllDatasets();
1230 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1232 // Loop over all fields in the dataset
1233 for (var i
= 1; i
< data
[0].length
; i
++) {
1234 if (!this.visibility()[i
- 1]) continue;
1237 for (var j
= 0; j
< data
.length
; j
++) {
1238 var date
= data
[j
][0];
1239 series
[j
] = [date
, data
[j
][i
]];
1241 series
= this.rollingAverage(series
, this.rollPeriod_
);
1243 // Prune down to the desired range, if necessary (for zooming)
1244 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1245 if (this.dateWindow_
) {
1246 var low
= this.dateWindow_
[0];
1247 var high
= this.dateWindow_
[1];
1249 for (var k
= 0; k
< series
.length
; k
++) {
1250 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1251 pruned
.push(series
[k
]);
1257 var extremes
= this.extremeValues_(series
);
1258 var thisMinY
= extremes
[0];
1259 var thisMaxY
= extremes
[1];
1260 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1261 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1265 for (var j
=0; j
<series
.length
; j
++)
1266 vals
[j
] = [series
[j
][0],
1267 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1268 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1270 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1274 // Use some heuristics to come up with a good maxY value, unless it's been
1275 // set explicitly by the user.
1276 if (this.valueRange_
!= null) {
1277 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1279 // Add some padding and round up to an integer to be human-friendly.
1280 var span
= maxY
- minY
;
1281 var maxAxisY
= maxY
+ 0.1 * span
;
1282 var minAxisY
= minY
- 0.1 * span
;
1284 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1285 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1286 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1288 if (this.attr_("includeZero")) {
1289 if (maxY
< 0) maxAxisY
= 0;
1290 if (minY
> 0) minAxisY
= 0;
1293 this.addYTicks_(minAxisY
, maxAxisY
);
1298 // Tell PlotKit to use this new data and render itself
1299 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1300 this.layout_
.evaluateWithError();
1301 this.plotter_
.clear();
1302 this.plotter_
.render();
1303 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1304 this.canvas_
.height
);
1308 * Calculates the rolling average of a data set.
1309 * If originalData is [label, val], rolls the average of those.
1310 * If originalData is [label, [, it's interpreted as [value, stddev]
1311 * and the roll is returned in the same form, with appropriately reduced
1312 * stddev for each value.
1313 * Note that this is where fractional input (i.e. '5/10') is converted into
1315 * @param {Array} originalData The data in the appropriate format (see above)
1316 * @param {Number} rollPeriod The number of days over which to average the data
1318 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1319 if (originalData
.length
< 2)
1320 return originalData
;
1321 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1322 var rollingData
= [];
1323 var sigma
= this.attr_("sigma");
1325 if (this.fractions_
) {
1327 var den
= 0; // numerator/denominator
1329 for (var i
= 0; i
< originalData
.length
; i
++) {
1330 num
+= originalData
[i
][1][0];
1331 den
+= originalData
[i
][1][1];
1332 if (i
- rollPeriod
>= 0) {
1333 num
-= originalData
[i
- rollPeriod
][1][0];
1334 den
-= originalData
[i
- rollPeriod
][1][1];
1337 var date
= originalData
[i
][0];
1338 var value
= den
? num
/ den
: 0.0;
1339 if (this.attr_("errorBars")) {
1340 if (this.wilsonInterval_
) {
1341 // For more details on this confidence interval, see:
1342 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1344 var p
= value
< 0 ? 0 : value
, n
= den
;
1345 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1346 var denom
= 1 + sigma
* sigma
/ den
;
1347 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1348 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1349 rollingData
[i
] = [date
,
1350 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1352 rollingData
[i
] = [date
, [0, 0, 0]];
1355 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1356 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1359 rollingData
[i
] = [date
, mult
* value
];
1362 } else if (this.attr_("customBars")) {
1367 for (var i
= 0; i
< originalData
.length
; i
++) {
1368 var data
= originalData
[i
][1];
1370 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1372 if (y
!= null && !isNaN(y
)) {
1378 if (i
- rollPeriod
>= 0) {
1379 var prev
= originalData
[i
- rollPeriod
];
1380 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1387 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1388 1.0 * (mid
- low
) / count
,
1389 1.0 * (high
- mid
) / count
]];
1392 // Calculate the rolling average for the first rollPeriod - 1 points where
1393 // there is not enough data to roll over the full number of days
1394 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1395 if (!this.attr_("errorBars")){
1396 if (rollPeriod
== 1) {
1397 return originalData
;
1400 for (var i
= 0; i
< originalData
.length
; i
++) {
1403 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1404 var y
= originalData
[j
][1];
1405 if (y
== null || isNaN(y
)) continue;
1407 sum
+= originalData
[j
][1];
1410 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1412 rollingData
[i
] = [originalData
[i
][0], null];
1417 for (var i
= 0; i
< originalData
.length
; i
++) {
1421 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1422 var y
= originalData
[j
][1][0];
1423 if (y
== null || isNaN(y
)) continue;
1425 sum
+= originalData
[j
][1][0];
1426 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1429 var stddev
= Math
.sqrt(variance
) / num_ok
;
1430 rollingData
[i
] = [originalData
[i
][0],
1431 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1433 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1443 * Parses a date, returning the number of milliseconds since epoch. This can be
1444 * passed in as an xValueParser in the Dygraph constructor.
1445 * TODO(danvk): enumerate formats that this understands.
1446 * @param {String} A date in YYYYMMDD format.
1447 * @return {Number} Milliseconds since epoch.
1450 Dygraph
.dateParser
= function(dateStr
, self
) {
1453 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1454 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1455 while (dateStrSlashed
.search("-") != -1) {
1456 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1458 d
= Date
.parse(dateStrSlashed
);
1459 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1460 // TODO(danvk): remove support for this format. It's confusing.
1461 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1462 + "/" + dateStr
.substr(6,2);
1463 d
= Date
.parse(dateStrSlashed
);
1465 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1466 // "2009/07/12 12:34:56"
1467 d
= Date
.parse(dateStr
);
1470 if (!d
|| isNaN(d
)) {
1471 self
.error("Couldn't parse " + dateStr
+ " as a date");
1477 * Detects the type of the str (date or numeric) and sets the various
1478 * formatting attributes in this.attrs_ based on this type.
1479 * @param {String} str An x value.
1482 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1484 if (str
.indexOf('-') >= 0 ||
1485 str
.indexOf('/') >= 0 ||
1486 isNaN(parseFloat(str
))) {
1488 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1489 // TODO(danvk): remove support for this format.
1494 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1495 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1496 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1498 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1499 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1500 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1505 * Parses a string in a special csv format. We expect a csv file where each
1506 * line is a date point, and the first field in each line is the date string.
1507 * We also expect that all remaining fields represent series.
1508 * if the errorBars attribute is set, then interpret the fields as:
1509 * date, series1, stddev1, series2, stddev2, ...
1510 * @param {Array.<Object>} data See above.
1513 * @return Array.<Object> An array with one entry for each row. These entries
1514 * are an array of cells in that row. The first entry is the parsed x-value for
1515 * the row. The second, third, etc. are the y-values. These can take on one of
1516 * three forms, depending on the CSV and constructor parameters:
1518 * 2. [ value, stddev ]
1519 * 3. [ low value, center value, high value ]
1521 Dygraph
.prototype.parseCSV_
= function(data
) {
1523 var lines
= data
.split("\n");
1525 // Use the default delimiter or fall back to a tab if that makes sense.
1526 var delim
= this.attr_('delimiter');
1527 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1532 if (this.labelsFromCSV_
) {
1534 this.attrs_
.labels
= lines
[0].split(delim
);
1538 var defaultParserSet
= false; // attempt to auto-detect x value type
1539 var expectedCols
= this.attr_("labels").length
;
1540 for (var i
= start
; i
< lines
.length
; i
++) {
1541 var line
= lines
[i
];
1542 if (line
.length
== 0) continue; // skip blank lines
1543 if (line
[0] == '#') continue; // skip comment lines
1544 var inFields
= line
.split(delim
);
1545 if (inFields
.length
< 2) continue;
1548 if (!defaultParserSet
) {
1549 this.detectTypeFromString_(inFields
[0]);
1550 xParser
= this.attr_("xValueParser");
1551 defaultParserSet
= true;
1553 fields
[0] = xParser(inFields
[0], this);
1555 // If fractions are expected, parse the numbers as "A/B
"
1556 if (this.fractions_) {
1557 for (var j = 1; j < inFields.length; j++) {
1558 // TODO(danvk): figure out an appropriate way to flag parse errors.
1559 var vals = inFields[j].split("/");
1560 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1562 } else if (this.attr_("errorBars
")) {
1563 // If there are error bars, values are (value, stddev) pairs
1564 for (var j = 1; j < inFields.length; j += 2)
1565 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1566 parseFloat(inFields[j + 1])];
1567 } else if (this.attr_("customBars
")) {
1568 // Bars are a low;center;high tuple
1569 for (var j = 1; j < inFields.length; j++) {
1570 var vals = inFields[j].split(";");
1571 fields[j] = [ parseFloat(vals[0]),
1572 parseFloat(vals[1]),
1573 parseFloat(vals[2]) ];
1576 // Values are just numbers
1577 for (var j = 1; j < inFields.length; j++) {
1578 fields[j] = parseFloat(inFields[j]);
1583 if (fields.length != expectedCols) {
1584 this.error("Number of columns
in line
" + i + " (" + fields.length +
1585 ") does not agree
with number of
labels (" + expectedCols +
1593 * The user has provided their data as a pre-packaged JS array. If the x values
1594 * are numeric, this is the same as dygraphs' internal format. If the x values
1595 * are dates, we need to convert them from Date objects to ms since epoch.
1596 * @param {Array.<Object>} data
1597 * @return {Array.<Object>} data with numeric x values.
1599 Dygraph.prototype.parseArray_ = function(data) {
1600 // Peek at the first x value to see if it's numeric.
1601 if (data.length == 0) {
1602 this.error("Can
't plot empty data set");
1605 if (data[0].length == 0) {
1606 this.error("Data set cannot contain an empty row");
1610 if (this.attr_("labels") == null) {
1611 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1612 "in the options parameter");
1613 this.attrs_.labels = [ "X" ];
1614 for (var i = 1; i < data[0].length; i++) {
1615 this.attrs_.labels.push("Y" + i);
1619 if (Dygraph.isDateLike(data[0][0])) {
1620 // Some intelligent defaults for a date x-axis.
1621 this.attrs_.xValueFormatter = Dygraph.dateString_;
1622 this.attrs_.xTicker = Dygraph.dateTicker;
1624 // Assume they're all dates
.
1625 var parsedData
= Dygraph
.clone(data
);
1626 for (var i
= 0; i
< data
.length
; i
++) {
1627 if (parsedData
[i
].length
== 0) {
1628 this.error("Row " << (1 + i
) << " of data is empty");
1631 if (parsedData
[i
][0] == null
1632 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1633 this.error("x value in row " << (1 + i
) << " is not a Date");
1636 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1640 // Some intelligent defaults for a numeric x-axis.
1641 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1642 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1648 * Parses a DataTable object from gviz.
1649 * The data is expected to have a first column that is either a date or a
1650 * number. All subsequent columns must be numbers. If there is a clear mismatch
1651 * between this.xValueParser_ and the type of the first column, it will be
1652 * fixed. Returned value is in the same format as return value of parseCSV_.
1653 * @param {Array.<Object>} data See above.
1656 Dygraph
.prototype.parseDataTable_
= function(data
) {
1657 var cols
= data
.getNumberOfColumns();
1658 var rows
= data
.getNumberOfRows();
1660 // Read column labels
1662 for (var i
= 0; i
< cols
; i
++) {
1663 labels
.push(data
.getColumnLabel(i
));
1664 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1666 this.attrs_
.labels
= labels
;
1667 cols
= labels
.length
;
1669 var indepType
= data
.getColumnType(0);
1670 if (indepType
== 'date') {
1671 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1672 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1673 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1674 } else if (indepType
== 'number') {
1675 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1676 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1677 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1679 this.error("only 'date' and 'number' types are supported for column 1 " +
1680 "of DataTable input (Got '" + indepType
+ "')");
1685 for (var i
= 0; i
< rows
; i
++) {
1687 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1688 data
.getValue(i
, 0) === null) {
1689 this.warning("Ignoring row " + i
+
1690 " of DataTable because of undefined or null first column.");
1694 if (indepType
== 'date') {
1695 row
.push(data
.getValue(i
, 0).getTime());
1697 row
.push(data
.getValue(i
, 0));
1699 if (!this.attr_("errorBars")) {
1700 for (var j
= 1; j
< cols
; j
++) {
1701 row
.push(data
.getValue(i
, j
));
1704 for (var j
= 0; j
< cols
- 1; j
++) {
1705 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1713 // These functions are all based on MochiKit.
1714 Dygraph
.update
= function (self
, o
) {
1715 if (typeof(o
) != 'undefined' && o
!== null) {
1717 if (o
.hasOwnProperty(k
)) {
1725 Dygraph
.isArrayLike
= function (o
) {
1726 var typ
= typeof(o
);
1728 (typ
!= 'object' && !(typ
== 'function' &&
1729 typeof(o
.item
) == 'function')) ||
1731 typeof(o
.length
) != 'number' ||
1739 Dygraph
.isDateLike
= function (o
) {
1740 if (typeof(o
) != "object" || o
=== null ||
1741 typeof(o
.getTime
) != 'function') {
1747 Dygraph
.clone
= function(o
) {
1748 // TODO(danvk): figure out how MochiKit's version works
1750 for (var i
= 0; i
< o
.length
; i
++) {
1751 if (Dygraph
.isArrayLike(o
[i
])) {
1752 r
.push(Dygraph
.clone(o
[i
]));
1762 * Get the CSV data. If it's in a function, call that function. If it's in a
1763 * file, do an XMLHttpRequest to get it.
1766 Dygraph
.prototype.start_
= function() {
1767 if (typeof this.file_
== 'function') {
1768 // CSV string. Pretend we got it via XHR.
1769 this.loadedEvent_(this.file_());
1770 } else if (Dygraph
.isArrayLike(this.file_
)) {
1771 this.rawData_
= this.parseArray_(this.file_
);
1772 this.drawGraph_(this.rawData_
);
1773 } else if (typeof this.file_
== 'object' &&
1774 typeof this.file_
.getColumnRange
== 'function') {
1775 // must be a DataTable from gviz.
1776 this.rawData_
= this.parseDataTable_(this.file_
);
1777 this.drawGraph_(this.rawData_
);
1778 } else if (typeof this.file_
== 'string') {
1779 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1780 if (this.file_
.indexOf('\n') >= 0) {
1781 this.loadedEvent_(this.file_
);
1783 var req
= new XMLHttpRequest();
1785 req
.onreadystatechange
= function () {
1786 if (req
.readyState
== 4) {
1787 if (req
.status
== 200) {
1788 caller
.loadedEvent_(req
.responseText
);
1793 req
.open("GET", this.file_
, true);
1797 this.error("Unknown data format: " + (typeof this.file_
));
1802 * Changes various properties of the graph. These can include:
1804 * <li>file: changes the source data for the graph</li>
1805 * <li>errorBars: changes whether the data contains stddev</li>
1807 * @param {Object} attrs The new properties and values
1809 Dygraph
.prototype.updateOptions
= function(attrs
) {
1810 // TODO(danvk): this is a mess. Rethink this function.
1811 if (attrs
.rollPeriod
) {
1812 this.rollPeriod_
= attrs
.rollPeriod
;
1814 if (attrs
.dateWindow
) {
1815 this.dateWindow_
= attrs
.dateWindow
;
1817 if (attrs
.valueRange
) {
1818 this.valueRange_
= attrs
.valueRange
;
1820 Dygraph
.update(this.user_attrs_
, attrs
);
1822 this.labelsFromCSV_
= (this.attr_("labels") == null);
1824 // TODO(danvk): this doesn't match the constructor logic
1825 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1826 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1827 this.file_
= attrs
['file'];
1830 this.drawGraph_(this.rawData_
);
1835 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1836 * containing div (which has presumably changed size since the dygraph was
1837 * instantiated. If the width/height are specified, the div will be resized.
1839 * This is far more efficient than destroying and re-instantiating a
1840 * Dygraph, since it doesn't have to reparse the underlying data.
1842 * @param {Number} width Width (in pixels)
1843 * @param {Number} height Height (in pixels)
1845 Dygraph
.prototype.resize
= function(width
, height
) {
1846 if ((width
=== null) != (height
=== null)) {
1847 this.warn("Dygraph.resize() should be called with zero parameters or " +
1848 "two non-NULL parameters. Pretending it was zero.");
1849 width
= height
= null;
1852 // TODO(danvk): there should be a clear() method.
1853 this.maindiv_
.innerHTML
= "";
1854 this.attrs_
.labelsDiv
= null;
1857 this.maindiv_
.style
.width
= width
+ "px";
1858 this.maindiv_
.style
.height
= height
+ "px";
1859 this.width_
= width
;
1860 this.height_
= height
;
1862 this.width_
= this.maindiv_
.offsetWidth
;
1863 this.height_
= this.maindiv_
.offsetHeight
;
1866 this.createInterface_();
1867 this.drawGraph_(this.rawData_
);
1871 * Adjusts the number of days in the rolling average. Updates the graph to
1872 * reflect the new averaging period.
1873 * @param {Number} length Number of days over which to average the data.
1875 Dygraph
.prototype.adjustRoll
= function(length
) {
1876 this.rollPeriod_
= length
;
1877 this.drawGraph_(this.rawData_
);
1881 * Returns a boolean array of visibility statuses.
1883 Dygraph
.prototype.visibility
= function() {
1884 // Do lazy-initialization, so that this happens after we know the number of
1886 if (!this.attr_("visibility")) {
1887 this.attr_
["visibility"] = [];
1889 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
1890 this.attr_("visibility").push(false);
1892 return this.attr_("visibility");
1896 * Changes the visiblity of a series.
1898 Dygraph
.prototype.setVisibility
= function(num
, value
) {
1899 var x
= this.visibility();
1900 if (num
< 0 && num
>= x
.length
) {
1901 this.warn("invalid series number in setVisibility: " + num
);
1904 this.drawGraph_(this.rawData_
);
1909 * Create a new canvas element. This is more complex than a simple
1910 * document.createElement("canvas") because of IE and excanvas.
1912 Dygraph
.createCanvas
= function() {
1913 var canvas
= document
.createElement("canvas");
1915 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1917 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1925 * A wrapper around Dygraph that implements the gviz API.
1926 * @param {Object} container The DOM object the visualization should live in.
1928 Dygraph
.GVizChart
= function(container
) {
1929 this.container
= container
;
1932 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1933 this.container
.innerHTML
= '';
1934 this.date_graph
= new Dygraph(this.container
, data
, options
);
1937 // Older pages may still use this name.
1938 DateGraph
= Dygraph
;