1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
99 axisLabelFontSize
: 14,
105 xValueFormatter
: Dygraph
.dateString_
,
106 xValueParser
: Dygraph
.dateParser
,
107 xTicker
: Dygraph
.dateTicker
,
115 wilsonInterval
: true, // only relevant if fractions is true
120 // Various logging levels.
126 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
127 // Labels is no longer a constructor parameter, since it's typically set
128 // directly from the data source. It also conains a name for the x-axis,
129 // which the previous constructor form did not.
130 if (labels
!= null) {
131 var new_labels
= ["Date"];
132 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
133 Dygraph
.update(attrs
, { 'labels': new_labels
});
135 this.__init__(div
, file
, attrs
);
139 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
140 * and interaction <canvas> inside of it. See the constructor for details
142 * @param {String | Function} file Source data
143 * @param {Array.<String>} labels Names of the data series
144 * @param {Object} attrs Miscellaneous other options
147 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
148 // Support two-argument constructor
149 if (attrs
== null) { attrs
= {}; }
151 // Copy the important bits into the object
152 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
155 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
156 this.previousVerticalX_
= -1;
157 this.fractions_
= attrs
.fractions
|| false;
158 this.dateWindow_
= attrs
.dateWindow
|| null;
159 this.valueRange_
= attrs
.valueRange
|| null;
160 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
162 // Clear the div. This ensure that, if multiple dygraphs are passed the same
163 // div, then only one will be drawn.
166 // If the div isn't already sized then inherit from our attrs or
167 // give it a default size.
168 if (div
.style
.width
== '') {
169 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
171 if (div
.style
.height
== '') {
172 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
174 this.width_
= parseInt(div
.style
.width
, 10);
175 this.height_
= parseInt(div
.style
.height
, 10);
176 // The div might have been specified as percent of the current window size,
177 // convert that to an appropriate number of pixels.
178 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
179 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
180 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
182 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
183 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
186 // Dygraphs has many options, some of which interact with one another.
187 // To keep track of everything, we maintain two sets of options:
189 // this.user_attrs_ only options explicitly set by the user.
190 // this.attrs_ defaults, options derived from user_attrs_, data.
192 // Options are then accessed this.attr_('attr'), which first looks at
193 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
194 // defaults without overriding behavior that the user specifically asks for.
195 this.user_attrs_
= {};
196 Dygraph
.update(this.user_attrs_
, attrs
);
199 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
201 // Make a note of whether labels will be pulled from the CSV file.
202 this.labelsFromCSV_
= (this.attr_("labels") == null);
204 // Create the containing DIV and other interactive elements
205 this.createInterface_();
210 Dygraph
.prototype.attr_
= function(name
) {
211 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
212 return this.user_attrs_
[name
];
213 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
214 return this.attrs_
[name
];
220 // TODO(danvk): any way I can get the line numbers to be this.warn call?
221 Dygraph
.prototype.log
= function(severity
, message
) {
222 if (typeof(console
) != 'undefined') {
225 console
.debug('dygraphs: ' + message
);
228 console
.info('dygraphs: ' + message
);
230 case Dygraph
.WARNING
:
231 console
.warn('dygraphs: ' + message
);
234 console
.error('dygraphs: ' + message
);
239 Dygraph
.prototype.info
= function(message
) {
240 this.log(Dygraph
.INFO
, message
);
242 Dygraph
.prototype.warn
= function(message
) {
243 this.log(Dygraph
.WARNING
, message
);
245 Dygraph
.prototype.error
= function(message
) {
246 this.log(Dygraph
.ERROR
, message
);
250 * Returns the current rolling period, as set by the user or an option.
251 * @return {Number} The number of days in the rolling window
253 Dygraph
.prototype.rollPeriod
= function() {
254 return this.rollPeriod_
;
257 Dygraph
.addEvent
= function(el
, evt
, fn
) {
258 var normed_fn
= function(e
) {
259 if (!e
) var e
= window
.event
;
262 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
263 el
.addEventListener(evt
, normed_fn
, false);
265 el
.attachEvent('on' + evt
, normed_fn
);
270 * Generates interface elements for the Dygraph: a containing div, a div to
271 * display the current point, and a textbox to adjust the rolling average
272 * period. Also creates the Renderer/Layout elements.
275 Dygraph
.prototype.createInterface_
= function() {
276 // Create the all-enclosing graph div
277 var enclosing
= this.maindiv_
;
279 this.graphDiv
= document
.createElement("div");
280 this.graphDiv
.style
.width
= this.width_
+ "px";
281 this.graphDiv
.style
.height
= this.height_
+ "px";
282 enclosing
.appendChild(this.graphDiv
);
284 // Create the canvas for interactive parts of the chart.
285 // this.canvas_ = document.createElement("canvas");
286 this.canvas_
= Dygraph
.createCanvas();
287 this.canvas_
.style
.position
= "absolute";
288 this.canvas_
.width
= this.width_
;
289 this.canvas_
.height
= this.height_
;
290 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
291 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
292 this.graphDiv
.appendChild(this.canvas_
);
294 // ... and for static parts of the chart.
295 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
298 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
299 dygraph
.mouseMove_(e
);
301 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
302 dygraph
.mouseOut_(e
);
305 // Create the grapher
306 // TODO(danvk): why does the Layout need its own set of options?
307 this.layoutOptions_
= { 'xOriginIsZero': false };
308 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
309 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
310 Dygraph
.update(this.layoutOptions_
, {
311 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
313 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
315 // TODO(danvk): why does the Renderer need its own set of options?
316 this.renderOptions_
= { colorScheme
: this.colors_
,
318 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
319 Dygraph
.update(this.renderOptions_
, this.attrs_
);
320 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
321 this.plotter_
= new DygraphCanvasRenderer(this,
322 this.hidden_
, this.layout_
,
323 this.renderOptions_
);
325 this.createStatusMessage_();
326 this.createRollInterface_();
327 this.createDragInterface_();
331 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
332 * this particular canvas. All Dygraph work is done on this.canvas_.
333 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
334 * @return {Object} The newly-created canvas
337 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
338 // var h = document.createElement("canvas");
339 var h
= Dygraph
.createCanvas();
340 h
.style
.position
= "absolute";
341 h
.style
.top
= canvas
.style
.top
;
342 h
.style
.left
= canvas
.style
.left
;
343 h
.width
= this.width_
;
344 h
.height
= this.height_
;
345 h
.style
.width
= this.width_
+ "px"; // for IE
346 h
.style
.height
= this.height_
+ "px"; // for IE
347 this.graphDiv
.appendChild(h
);
351 // Taken from MochiKit.Color
352 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
356 if (saturation
=== 0) {
361 var i
= Math
.floor(hue
* 6);
362 var f
= (hue
* 6) - i
;
363 var p
= value
* (1 - saturation
);
364 var q
= value
* (1 - (saturation
* f
));
365 var t
= value
* (1 - (saturation
* (1 - f
)));
367 case 1: red
= q
; green
= value
; blue
= p
; break;
368 case 2: red
= p
; green
= value
; blue
= t
; break;
369 case 3: red
= p
; green
= q
; blue
= value
; break;
370 case 4: red
= t
; green
= p
; blue
= value
; break;
371 case 5: red
= value
; green
= p
; blue
= q
; break;
372 case 6: // fall through
373 case 0: red
= value
; green
= t
; blue
= p
; break;
376 red
= Math
.floor(255 * red
+ 0.5);
377 green
= Math
.floor(255 * green
+ 0.5);
378 blue
= Math
.floor(255 * blue
+ 0.5);
379 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
384 * Generate a set of distinct colors for the data series. This is done with a
385 * color wheel. Saturation/Value are customizable, and the hue is
386 * equally-spaced around the color wheel. If a custom set of colors is
387 * specified, that is used instead.
390 Dygraph
.prototype.setColors_
= function() {
391 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
392 // away with this.renderOptions_.
393 var num
= this.attr_("labels").length
- 1;
395 var colors
= this.attr_('colors');
397 var sat
= this.attr_('colorSaturation') || 1.0;
398 var val
= this.attr_('colorValue') || 0.5;
399 for (var i
= 1; i
<= num
; i
++) {
400 var hue
= (1.0*i
/(1+num
));
401 this.colors_
.push( Dygraph
.hsvToRGB(hue
, sat
, val
) );
404 for (var i
= 0; i
< num
; i
++) {
405 var colorStr
= colors
[i
% colors
.length
];
406 this.colors_
.push(colorStr
);
410 // TODO(danvk): update this w/r
/t/ the
new options system
.
411 this.renderOptions_
.colorScheme
= this.colors_
;
412 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
413 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
414 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
417 // The following functions are from quirksmode.org
418 // http://www.quirksmode.org/js
/findpos
.html
419 Dygraph
.findPosX
= function(obj
) {
421 if (obj
.offsetParent
) {
422 while (obj
.offsetParent
) {
423 curleft
+= obj
.offsetLeft
;
424 obj
= obj
.offsetParent
;
432 Dygraph
.findPosY
= function(obj
) {
434 if (obj
.offsetParent
) {
435 while (obj
.offsetParent
) {
436 curtop
+= obj
.offsetTop
;
437 obj
= obj
.offsetParent
;
446 * Create the div that contains information on the selected point(s)
447 * This goes in the top right of the canvas, unless an external div has already
451 Dygraph
.prototype.createStatusMessage_
= function(){
452 if (!this.attr_("labelsDiv")) {
453 var divWidth
= this.attr_('labelsDivWidth');
455 "position": "absolute",
458 "width": divWidth
+ "px",
460 "left": (this.width_
- divWidth
- 2) + "px",
461 "background": "white",
463 "overflow": "hidden"};
464 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
465 var div
= document
.createElement("div");
466 for (var name
in messagestyle
) {
467 if (messagestyle
.hasOwnProperty(name
)) {
468 div
.style
[name
] = messagestyle
[name
];
471 this.graphDiv
.appendChild(div
);
472 this.attrs_
.labelsDiv
= div
;
477 * Create the text box to adjust the averaging period
478 * @return {Object} The newly-created text box
481 Dygraph
.prototype.createRollInterface_
= function() {
482 var display
= this.attr_('showRoller') ? "block" : "none";
483 var textAttr
= { "position": "absolute",
485 "top": (this.plotter_
.area
.h
- 25) + "px",
486 "left": (this.plotter_
.area
.x
+ 1) + "px",
489 var roller
= document
.createElement("input");
490 roller
.type
= "text";
492 roller
.value
= this.rollPeriod_
;
493 for (var name
in textAttr
) {
494 if (textAttr
.hasOwnProperty(name
)) {
495 roller
.style
[name
] = textAttr
[name
];
499 var pa
= this.graphDiv
;
500 pa
.appendChild(roller
);
502 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
506 // These functions are taken from MochiKit.Signal
507 Dygraph
.pageX
= function(e
) {
509 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
512 var b
= document
.body
;
514 (de
.scrollLeft
|| b
.scrollLeft
) -
515 (de
.clientLeft
|| 0);
519 Dygraph
.pageY
= function(e
) {
521 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
524 var b
= document
.body
;
526 (de
.scrollTop
|| b
.scrollTop
) -
532 * Set up all the mouse handlers needed to capture dragging behavior for zoom
536 Dygraph
.prototype.createDragInterface_
= function() {
539 // Tracks whether the mouse is down right now
540 var isZooming
= false;
541 var isPanning
= false;
542 var dragStartX
= null;
543 var dragStartY
= null;
547 var draggingDate
= null;
548 var dateRange
= null;
550 // Utility function to convert page-wide coordinates to canvas coords
553 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
554 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
556 // Draw zoom rectangles when the mouse is down and the user moves around
557 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
559 dragEndX
= getX(event
);
560 dragEndY
= getY(event
);
562 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
564 } else if (isPanning
) {
565 dragEndX
= getX(event
);
566 dragEndY
= getY(event
);
568 // Want to have it so that:
569 // 1. draggingDate appears at dragEndX
570 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
572 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
573 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
574 self
.drawGraph_(self
.rawData_
);
578 // Track the beginning of drag events
579 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
580 px
= Dygraph
.findPosX(self
.canvas_
);
581 py
= Dygraph
.findPosY(self
.canvas_
);
582 dragStartX
= getX(event
);
583 dragStartY
= getY(event
);
585 if (event
.altKey
|| event
.shiftKey
) {
586 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
588 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
589 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
596 // If the user releases the mouse button during a drag, but not over the
597 // canvas, then it doesn't count as a zooming action.
598 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
599 if (isZooming
|| isPanning
) {
612 // Temporarily cancel the dragging event when the mouse leaves the graph
613 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
620 // If the mouse is released on the canvas during a drag event, then it's a
621 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
622 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
625 dragEndX
= getX(event
);
626 dragEndY
= getY(event
);
627 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
628 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
630 if (regionWidth
< 2 && regionHeight
< 2 &&
631 self
.attr_('clickCallback') != null &&
632 self
.lastx_
!= undefined
) {
633 // TODO(danvk): pass along more info about the points.
634 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
637 if (regionWidth
>= 10) {
638 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
639 Math
.max(dragStartX
, dragEndX
));
641 self
.canvas_
.getContext("2d").clearRect(0, 0,
643 self
.canvas_
.height
);
657 // Double-clicking zooms back out
658 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
659 if (self
.dateWindow_
== null) return;
660 self
.dateWindow_
= null;
661 self
.drawGraph_(self
.rawData_
);
662 var minDate
= self
.rawData_
[0][0];
663 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
664 if (self
.attr_("zoomCallback")) {
665 self
.attr_("zoomCallback")(minDate
, maxDate
);
671 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
672 * up any previous zoom rectangles that were drawn. This could be optimized to
673 * avoid extra redrawing, but it's tricky to avoid interactions with the status
675 * @param {Number} startX The X position where the drag started, in canvas
677 * @param {Number} endX The current X position of the drag, in canvas coords.
678 * @param {Number} prevEndX The value of endX on the previous call to this
679 * function. Used to avoid excess redrawing
682 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
683 var ctx
= this.canvas_
.getContext("2d");
685 // Clean up from the previous rect if necessary
687 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
688 Math
.abs(startX
- prevEndX
), this.height_
);
691 // Draw a light-grey rectangle to show the new viewing area
692 if (endX
&& startX
) {
693 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
694 ctx
.fillRect(Math
.min(startX
, endX
), 0,
695 Math
.abs(endX
- startX
), this.height_
);
700 * Zoom to something containing [lowX, highX]. These are pixel coordinates
701 * in the canvas. The exact zoom window may be slightly larger if there are no
702 * data points near lowX or highX. This function redraws the graph.
703 * @param {Number} lowX The leftmost pixel value that should be visible.
704 * @param {Number} highX The rightmost pixel value that should be visible.
707 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
708 // Find the earliest and latest dates contained in this canvasx range.
709 var points
= this.layout_
.points
;
712 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
713 for (var i
= 0; i
< points
.length
; i
++) {
714 var cx
= points
[i
].canvasx
;
715 var x
= points
[i
].xval
;
716 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
717 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
719 // Use the extremes if either is missing
720 if (minDate
== null) minDate
= points
[0].xval
;
721 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
723 this.dateWindow_
= [minDate
, maxDate
];
724 this.drawGraph_(this.rawData_
);
725 if (this.attr_("zoomCallback")) {
726 this.attr_("zoomCallback")(minDate
, maxDate
);
731 * When the mouse moves in the canvas, display information about a nearby data
732 * point and draw dots over those points in the data series. This function
733 * takes care of cleanup of previously-drawn dots.
734 * @param {Object} event The mousemove event from the browser.
737 Dygraph
.prototype.mouseMove_
= function(event
) {
738 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
739 var points
= this.layout_
.points
;
744 // Loop through all the points and find the date nearest to our current
746 var minDist
= 1e+100;
748 for (var i
= 0; i
< points
.length
; i
++) {
749 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
750 if (dist
> minDist
) break;
754 if (idx
>= 0) lastx
= points
[idx
].xval
;
755 // Check that you can really highlight the last day's data
756 if (canvasx
> points
[points
.length
-1].canvasx
)
757 lastx
= points
[points
.length
-1].xval
;
759 // Extract the points we've selected
760 this.selPoints_
= [];
761 for (var i
= 0; i
< points
.length
; i
++) {
762 if (points
[i
].xval
== lastx
) {
763 this.selPoints_
.push(points
[i
]);
767 if (this.attr_("highlightCallback")) {
768 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
771 // Clear the previously drawn vertical, if there is one
772 var circleSize
= this.attr_('highlightCircleSize');
773 var ctx
= this.canvas_
.getContext("2d");
774 if (this.previousVerticalX_
>= 0) {
775 var px
= this.previousVerticalX_
;
776 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
779 var isOK
= function(x
) { return x
&& !isNaN(x
); };
781 if (this.selPoints_
.length
> 0) {
782 var canvasx
= this.selPoints_
[0].canvasx
;
784 // Set the status message to indicate the selected point(s)
785 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
786 var clen
= this.colors_
.length
;
787 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
788 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
789 if (this.attr_("labelsSeparateLines")) {
792 var point
= this.selPoints_
[i
];
793 var c
= new RGBColor(this.colors_
[i
%clen
]);
794 replace
+= " <b><font color='" + c
.toHex() + "'>"
795 + point
.name
+ "</font></b>:"
796 + this.round_(point
.yval
, 2);
798 this.attr_("labelsDiv").innerHTML
= replace
;
800 // Save last x position for callbacks.
803 // Draw colored circles over the center of each selected point
805 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
806 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
808 ctx
.fillStyle
= this.colors_
[i
%clen
];
809 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
810 0, 2 * Math
.PI
, false);
815 this.previousVerticalX_
= canvasx
;
820 * The mouse has left the canvas. Clear out whatever artifacts remain
821 * @param {Object} event the mouseout event from the browser.
824 Dygraph
.prototype.mouseOut_
= function(event
) {
825 // Get rid of the overlay data
826 var ctx
= this.canvas_
.getContext("2d");
827 ctx
.clearRect(0, 0, this.width_
, this.height_
);
828 this.attr_("labelsDiv").innerHTML
= "";
831 Dygraph
.zeropad
= function(x
) {
832 if (x
< 10) return "0" + x
; else return "" + x
;
836 * Return a string version of the hours, minutes and seconds portion of a date.
837 * @param {Number} date The JavaScript date (ms since epoch)
838 * @return {String} A time of the form "HH:MM:SS"
841 Dygraph
.prototype.hmsString_
= function(date
) {
842 var zeropad
= Dygraph
.zeropad
;
843 var d
= new Date(date
);
844 if (d
.getSeconds()) {
845 return zeropad(d
.getHours()) + ":" +
846 zeropad(d
.getMinutes()) + ":" +
847 zeropad(d
.getSeconds());
848 } else if (d
.getMinutes()) {
849 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
851 return zeropad(d
.getHours());
856 * Convert a JS date (millis since epoch) to YYYY/MM/DD
857 * @param {Number} date The JavaScript date (ms since epoch)
858 * @return {String} A date of the form "YYYY/MM/DD"
860 * TODO(danvk): why is this part of the prototype?
862 Dygraph
.dateString_
= function(date
, self
) {
863 var zeropad
= Dygraph
.zeropad
;
864 var d
= new Date(date
);
867 var year
= "" + d
.getFullYear();
868 // Get a 0 padded month string
869 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
870 // Get a 0 padded day string
871 var day
= zeropad(d
.getDate());
874 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
875 if (frac
) ret
= " " + self
.hmsString_(date
);
877 return year
+ "/" + month + "/" + day
+ ret
;
881 * Round a number to the specified number of digits past the decimal point.
882 * @param {Number} num The number to round
883 * @param {Number} places The number of decimals to which to round
884 * @return {Number} The rounded number
887 Dygraph
.prototype.round_
= function(num
, places
) {
888 var shift
= Math
.pow(10, places
);
889 return Math
.round(num
* shift
)/shift
;
893 * Fires when there's data available to be graphed.
894 * @param {String} data Raw CSV data to be plotted
897 Dygraph
.prototype.loadedEvent_
= function(data
) {
898 this.rawData_
= this.parseCSV_(data
);
899 this.drawGraph_(this.rawData_
);
902 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
903 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
904 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
907 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
910 Dygraph
.prototype.addXTicks_
= function() {
911 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
912 var startDate
, endDate
;
913 if (this.dateWindow_
) {
914 startDate
= this.dateWindow_
[0];
915 endDate
= this.dateWindow_
[1];
917 startDate
= this.rawData_
[0][0];
918 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
921 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
922 this.layout_
.updateOptions({xTicks
: xTicks
});
925 // Time granularity enumeration
926 Dygraph
.SECONDLY
= 0;
927 Dygraph
.TWO_SECONDLY
= 1;
928 Dygraph
.FIVE_SECONDLY
= 2;
929 Dygraph
.TEN_SECONDLY
= 3;
930 Dygraph
.THIRTY_SECONDLY
= 4;
931 Dygraph
.MINUTELY
= 5;
932 Dygraph
.TWO_MINUTELY
= 6;
933 Dygraph
.FIVE_MINUTELY
= 7;
934 Dygraph
.TEN_MINUTELY
= 8;
935 Dygraph
.THIRTY_MINUTELY
= 9;
937 Dygraph
.TWO_HOURLY
= 11;
938 Dygraph
.SIX_HOURLY
= 12;
941 Dygraph
.MONTHLY
= 15;
942 Dygraph
.QUARTERLY
= 16;
943 Dygraph
.BIANNUAL
= 17;
945 Dygraph
.DECADAL
= 19;
946 Dygraph
.NUM_GRANULARITIES
= 20;
948 Dygraph
.SHORT_SPACINGS
= [];
949 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
950 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
951 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
952 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
953 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
954 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
955 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
956 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
957 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
958 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
959 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
960 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
961 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
962 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
963 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
967 // If we used this time granularity, how many ticks would there be?
968 // This is only an approximation, but it's generally good enough.
970 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
971 if (granularity
< Dygraph
.MONTHLY
) {
972 // Generate one tick mark for every fixed interval of time.
973 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
974 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
976 var year_mod
= 1; // e.g. to only print one point every 10 years.
978 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
979 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
980 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
981 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
983 var msInYear
= 365.2524 * 24 * 3600 * 1000;
984 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
985 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
991 // Construct an x-axis of nicely-formatted times on meaningful boundaries
992 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
994 // Returns an array containing {v: millis, label: label} dictionaries.
996 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
998 if (granularity
< Dygraph
.MONTHLY
) {
999 // Generate one tick mark for every fixed interval of time.
1000 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1001 var format
= '%d%b'; // e.g. "1Jan"
1003 // Find a time less than start_time which occurs on a "nice" time boundary
1004 // for this granularity.
1005 var g
= spacing
/ 1000;
1006 var d
= new Date(start_time
);
1007 if (g
<= 60) { // seconds
1008 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1012 if (g
<= 60) { // minutes
1013 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1018 if (g
<= 24) { // days
1019 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1024 if (g
== 7) { // one week
1025 d
.setDate(d
.getDate() - d
.getDay());
1030 start_time
= d
.getTime();
1032 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1033 var d
= new Date(t
);
1034 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1035 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1036 // the extra hour covers DST problems.
1037 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1039 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1043 // Display a tick mark on the first of a set of months of each year.
1044 // Years get a tick mark iff y % year_mod == 0. This is useful for
1045 // displaying a tick mark once every 10 years, say, on long time scales.
1047 var year_mod
= 1; // e.g. to only print one point every 10 years.
1049 if (granularity
== Dygraph
.MONTHLY
) {
1050 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1051 } else if (granularity
== Dygraph
.QUARTERLY
) {
1052 months
= [ 0, 3, 6, 9 ];
1053 } else if (granularity
== Dygraph
.BIANNUAL
) {
1055 } else if (granularity
== Dygraph
.ANNUAL
) {
1057 } else if (granularity
== Dygraph
.DECADAL
) {
1062 var start_year
= new Date(start_time
).getFullYear();
1063 var end_year
= new Date(end_time
).getFullYear();
1064 var zeropad
= Dygraph
.zeropad
;
1065 for (var i
= start_year
; i
<= end_year
; i
++) {
1066 if (i
% year_mod
!= 0) continue;
1067 for (var j
= 0; j
< months
.length
; j
++) {
1068 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1069 var t
= Date
.parse(date_str
);
1070 if (t
< start_time
|| t
> end_time
) continue;
1071 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1081 * Add ticks to the x-axis based on a date range.
1082 * @param {Number} startDate Start of the date window (millis since epoch)
1083 * @param {Number} endDate End of the date window (millis since epoch)
1084 * @return {Array.<Object>} Array of {label, value} tuples.
1087 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1089 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1090 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1091 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1098 return self
.GetXAxis(startDate
, endDate
, chosen
);
1100 // TODO(danvk): signal error.
1105 * Add ticks when the x axis has numbers on it (instead of dates)
1106 * @param {Number} startDate Start of the date window (millis since epoch)
1107 * @param {Number} endDate End of the date window (millis since epoch)
1108 * @return {Array.<Object>} Array of {label, value} tuples.
1111 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1113 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1114 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1115 // The first spacing greater than pixelsPerYLabel is what we use.
1116 // TODO(danvk): version that works on a log scale.
1117 if (self
.attr_("labelsKMG2")) {
1118 var mults
= [1, 2, 4, 8];
1120 var mults
= [1, 2, 5];
1122 var scale
, low_val
, high_val
, nTicks
;
1123 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1124 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1125 for (var i
= -10; i
< 50; i
++) {
1126 if (self
.attr_("labelsKMG2")) {
1127 var base_scale
= Math
.pow(16, i
);
1129 var base_scale
= Math
.pow(10, i
);
1131 for (var j
= 0; j
< mults
.length
; j
++) {
1132 scale
= base_scale
* mults
[j
];
1133 low_val
= Math
.floor(minV
/ scale
) * scale
;
1134 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1135 nTicks
= (high_val
- low_val
) / scale
;
1136 var spacing
= self
.height_
/ nTicks
;
1137 // wish I could break out of both loops at once...
1138 if (spacing
> pixelsPerTick
) break;
1140 if (spacing
> pixelsPerTick
) break;
1143 // Construct labels for the ticks
1147 if (self
.attr_("labelsKMB")) {
1149 k_labels
= [ "K", "M", "B", "T" ];
1151 if (self
.attr_("labelsKMG2")) {
1152 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1154 k_labels
= [ "k", "M", "G", "T" ];
1157 for (var i
= 0; i
< nTicks
; i
++) {
1158 var tickV
= low_val
+ i
* scale
;
1159 var absTickV
= Math
.abs(tickV
);
1160 var label
= self
.round_(tickV
, 2);
1161 if (k_labels
.length
) {
1162 // Round up to an appropriate unit.
1164 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1165 if (absTickV
>= n
) {
1166 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1171 ticks
.push( {label
: label
, v
: tickV
} );
1177 * Adds appropriate ticks on the y-axis
1178 * @param {Number} minY The minimum Y value in the data set
1179 * @param {Number} maxY The maximum Y value in the data set
1182 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1183 // Set the number of ticks so that the labels are human-friendly.
1184 // TODO(danvk): make this an attribute as well.
1185 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1186 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1190 // Computes the range of the data series (including confidence intervals).
1191 // series is either [ [x1, y1], [x2, y2], ... ] or
1192 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1193 // Returns [low, high]
1194 Dygraph
.prototype.extremeValues_
= function(series
) {
1195 var minY
= null, maxY
= null;
1197 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1199 // With custom bars, maxY is the max of the high values.
1200 for (var j
= 0; j
< series
.length
; j
++) {
1201 var y
= series
[j
][1][0];
1203 var low
= y
- series
[j
][1][1];
1204 var high
= y
+ series
[j
][1][2];
1205 if (low
> y
) low
= y
; // this can happen with custom bars,
1206 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1207 if (maxY
== null || high
> maxY
) {
1210 if (minY
== null || low
< minY
) {
1215 for (var j
= 0; j
< series
.length
; j
++) {
1216 var y
= series
[j
][1];
1217 if (y
=== null || isNaN(y
)) continue;
1218 if (maxY
== null || y
> maxY
) {
1221 if (minY
== null || y
< minY
) {
1227 return [minY
, maxY
];
1231 * Update the graph with new data. Data is in the format
1232 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1233 * or, if errorBars=true,
1234 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1235 * @param {Array.<Object>} data The data (see above)
1238 Dygraph
.prototype.drawGraph_
= function(data
) {
1239 var minY
= null, maxY
= null;
1240 this.layout_
.removeAllDatasets();
1242 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1244 // Loop over all fields in the dataset
1245 for (var i
= 1; i
< data
[0].length
; i
++) {
1246 if (!this.visibility()[i
- 1]) continue;
1249 for (var j
= 0; j
< data
.length
; j
++) {
1250 var date
= data
[j
][0];
1251 series
[j
] = [date
, data
[j
][i
]];
1253 series
= this.rollingAverage(series
, this.rollPeriod_
);
1255 // Prune down to the desired range, if necessary (for zooming)
1256 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1257 if (this.dateWindow_
) {
1258 var low
= this.dateWindow_
[0];
1259 var high
= this.dateWindow_
[1];
1261 for (var k
= 0; k
< series
.length
; k
++) {
1262 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1263 pruned
.push(series
[k
]);
1269 var extremes
= this.extremeValues_(series
);
1270 var thisMinY
= extremes
[0];
1271 var thisMaxY
= extremes
[1];
1272 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1273 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1277 for (var j
=0; j
<series
.length
; j
++)
1278 vals
[j
] = [series
[j
][0],
1279 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1280 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1282 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1286 // Use some heuristics to come up with a good maxY value, unless it's been
1287 // set explicitly by the user.
1288 if (this.valueRange_
!= null) {
1289 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1291 // Add some padding and round up to an integer to be human-friendly.
1292 var span
= maxY
- minY
;
1293 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1294 if (span
== 0) { span
= maxY
; }
1295 var maxAxisY
= maxY
+ 0.1 * span
;
1296 var minAxisY
= minY
- 0.1 * span
;
1298 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1299 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1300 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1302 if (this.attr_("includeZero")) {
1303 if (maxY
< 0) maxAxisY
= 0;
1304 if (minY
> 0) minAxisY
= 0;
1307 this.addYTicks_(minAxisY
, maxAxisY
);
1312 // Tell PlotKit to use this new data and render itself
1313 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1314 this.layout_
.evaluateWithError();
1315 this.plotter_
.clear();
1316 this.plotter_
.render();
1317 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1318 this.canvas_
.height
);
1322 * Calculates the rolling average of a data set.
1323 * If originalData is [label, val], rolls the average of those.
1324 * If originalData is [label, [, it's interpreted as [value, stddev]
1325 * and the roll is returned in the same form, with appropriately reduced
1326 * stddev for each value.
1327 * Note that this is where fractional input (i.e. '5/10') is converted into
1329 * @param {Array} originalData The data in the appropriate format (see above)
1330 * @param {Number} rollPeriod The number of days over which to average the data
1332 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1333 if (originalData
.length
< 2)
1334 return originalData
;
1335 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1336 var rollingData
= [];
1337 var sigma
= this.attr_("sigma");
1339 if (this.fractions_
) {
1341 var den
= 0; // numerator/denominator
1343 for (var i
= 0; i
< originalData
.length
; i
++) {
1344 num
+= originalData
[i
][1][0];
1345 den
+= originalData
[i
][1][1];
1346 if (i
- rollPeriod
>= 0) {
1347 num
-= originalData
[i
- rollPeriod
][1][0];
1348 den
-= originalData
[i
- rollPeriod
][1][1];
1351 var date
= originalData
[i
][0];
1352 var value
= den
? num
/ den
: 0.0;
1353 if (this.attr_("errorBars")) {
1354 if (this.wilsonInterval_
) {
1355 // For more details on this confidence interval, see:
1356 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1358 var p
= value
< 0 ? 0 : value
, n
= den
;
1359 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1360 var denom
= 1 + sigma
* sigma
/ den
;
1361 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1362 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1363 rollingData
[i
] = [date
,
1364 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1366 rollingData
[i
] = [date
, [0, 0, 0]];
1369 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1370 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1373 rollingData
[i
] = [date
, mult
* value
];
1376 } else if (this.attr_("customBars")) {
1381 for (var i
= 0; i
< originalData
.length
; i
++) {
1382 var data
= originalData
[i
][1];
1384 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1386 if (y
!= null && !isNaN(y
)) {
1392 if (i
- rollPeriod
>= 0) {
1393 var prev
= originalData
[i
- rollPeriod
];
1394 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1401 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1402 1.0 * (mid
- low
) / count
,
1403 1.0 * (high
- mid
) / count
]];
1406 // Calculate the rolling average for the first rollPeriod - 1 points where
1407 // there is not enough data to roll over the full number of days
1408 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1409 if (!this.attr_("errorBars")){
1410 if (rollPeriod
== 1) {
1411 return originalData
;
1414 for (var i
= 0; i
< originalData
.length
; i
++) {
1417 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1418 var y
= originalData
[j
][1];
1419 if (y
== null || isNaN(y
)) continue;
1421 sum
+= originalData
[j
][1];
1424 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1426 rollingData
[i
] = [originalData
[i
][0], null];
1431 for (var i
= 0; i
< originalData
.length
; i
++) {
1435 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1436 var y
= originalData
[j
][1][0];
1437 if (y
== null || isNaN(y
)) continue;
1439 sum
+= originalData
[j
][1][0];
1440 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1443 var stddev
= Math
.sqrt(variance
) / num_ok
;
1444 rollingData
[i
] = [originalData
[i
][0],
1445 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1447 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1457 * Parses a date, returning the number of milliseconds since epoch. This can be
1458 * passed in as an xValueParser in the Dygraph constructor.
1459 * TODO(danvk): enumerate formats that this understands.
1460 * @param {String} A date in YYYYMMDD format.
1461 * @return {Number} Milliseconds since epoch.
1464 Dygraph
.dateParser
= function(dateStr
, self
) {
1467 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1468 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1469 while (dateStrSlashed
.search("-") != -1) {
1470 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1472 d
= Date
.parse(dateStrSlashed
);
1473 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1474 // TODO(danvk): remove support for this format. It's confusing.
1475 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1476 + "/" + dateStr
.substr(6,2);
1477 d
= Date
.parse(dateStrSlashed
);
1479 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1480 // "2009/07/12 12:34:56"
1481 d
= Date
.parse(dateStr
);
1484 if (!d
|| isNaN(d
)) {
1485 self
.error("Couldn't parse " + dateStr
+ " as a date");
1491 * Detects the type of the str (date or numeric) and sets the various
1492 * formatting attributes in this.attrs_ based on this type.
1493 * @param {String} str An x value.
1496 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1498 if (str
.indexOf('-') >= 0 ||
1499 str
.indexOf('/') >= 0 ||
1500 isNaN(parseFloat(str
))) {
1502 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1503 // TODO(danvk): remove support for this format.
1508 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1509 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1510 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1512 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1513 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1514 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1519 * Parses a string in a special csv format. We expect a csv file where each
1520 * line is a date point, and the first field in each line is the date string.
1521 * We also expect that all remaining fields represent series.
1522 * if the errorBars attribute is set, then interpret the fields as:
1523 * date, series1, stddev1, series2, stddev2, ...
1524 * @param {Array.<Object>} data See above.
1527 * @return Array.<Object> An array with one entry for each row. These entries
1528 * are an array of cells in that row. The first entry is the parsed x-value for
1529 * the row. The second, third, etc. are the y-values. These can take on one of
1530 * three forms, depending on the CSV and constructor parameters:
1532 * 2. [ value, stddev ]
1533 * 3. [ low value, center value, high value ]
1535 Dygraph
.prototype.parseCSV_
= function(data
) {
1537 var lines
= data
.split("\n");
1539 // Use the default delimiter or fall back to a tab if that makes sense.
1540 var delim
= this.attr_('delimiter');
1541 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1546 if (this.labelsFromCSV_
) {
1548 this.attrs_
.labels
= lines
[0].split(delim
);
1552 var defaultParserSet
= false; // attempt to auto-detect x value type
1553 var expectedCols
= this.attr_("labels").length
;
1554 var outOfOrder
= false;
1555 for (var i
= start
; i
< lines
.length
; i
++) {
1556 var line
= lines
[i
];
1557 if (line
.length
== 0) continue; // skip blank lines
1558 if (line
[0] == '#') continue; // skip comment lines
1559 var inFields
= line
.split(delim
);
1560 if (inFields
.length
< 2) continue;
1563 if (!defaultParserSet
) {
1564 this.detectTypeFromString_(inFields
[0]);
1565 xParser
= this.attr_("xValueParser");
1566 defaultParserSet
= true;
1568 fields
[0] = xParser(inFields
[0], this);
1570 // If fractions are expected, parse the numbers as "A/B
"
1571 if (this.fractions_) {
1572 for (var j = 1; j < inFields.length; j++) {
1573 // TODO(danvk): figure out an appropriate way to flag parse errors.
1574 var vals = inFields[j].split("/");
1575 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1577 } else if (this.attr_("errorBars
")) {
1578 // If there are error bars, values are (value, stddev) pairs
1579 for (var j = 1; j < inFields.length; j += 2)
1580 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1581 parseFloat(inFields[j + 1])];
1582 } else if (this.attr_("customBars
")) {
1583 // Bars are a low;center;high tuple
1584 for (var j = 1; j < inFields.length; j++) {
1585 var vals = inFields[j].split(";");
1586 fields[j] = [ parseFloat(vals[0]),
1587 parseFloat(vals[1]),
1588 parseFloat(vals[2]) ];
1591 // Values are just numbers
1592 for (var j = 1; j < inFields.length; j++) {
1593 fields[j] = parseFloat(inFields[j]);
1596 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1601 if (fields.length != expectedCols) {
1602 this.error("Number of columns
in line
" + i + " (" + fields.length +
1603 ") does not agree
with number of
labels (" + expectedCols +
1609 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1610 ret.sort(function(a,b) { return a[0] - b[0] });
1617 * The user has provided their data as a pre-packaged JS array. If the x values
1618 * are numeric, this is the same as dygraphs' internal format. If the x values
1619 * are dates, we need to convert them from Date objects to ms since epoch.
1620 * @param {Array.<Object>} data
1621 * @return {Array.<Object>} data with numeric x values.
1623 Dygraph.prototype.parseArray_ = function(data) {
1624 // Peek at the first x value to see if it's numeric.
1625 if (data.length == 0) {
1626 this.error("Can
't plot empty data set");
1629 if (data[0].length == 0) {
1630 this.error("Data set cannot contain an empty row");
1634 if (this.attr_("labels") == null) {
1635 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1636 "in the options parameter");
1637 this.attrs_.labels = [ "X" ];
1638 for (var i = 1; i < data[0].length; i++) {
1639 this.attrs_.labels.push("Y" + i);
1643 if (Dygraph.isDateLike(data[0][0])) {
1644 // Some intelligent defaults for a date x-axis.
1645 this.attrs_.xValueFormatter = Dygraph.dateString_;
1646 this.attrs_.xTicker = Dygraph.dateTicker;
1648 // Assume they're all dates
.
1649 var parsedData
= Dygraph
.clone(data
);
1650 for (var i
= 0; i
< data
.length
; i
++) {
1651 if (parsedData
[i
].length
== 0) {
1652 this.error("Row " << (1 + i
) << " of data is empty");
1655 if (parsedData
[i
][0] == null
1656 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1657 this.error("x value in row " << (1 + i
) << " is not a Date");
1660 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1664 // Some intelligent defaults for a numeric x-axis.
1665 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1666 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1672 * Parses a DataTable object from gviz.
1673 * The data is expected to have a first column that is either a date or a
1674 * number. All subsequent columns must be numbers. If there is a clear mismatch
1675 * between this.xValueParser_ and the type of the first column, it will be
1676 * fixed. Returned value is in the same format as return value of parseCSV_.
1677 * @param {Array.<Object>} data See above.
1680 Dygraph
.prototype.parseDataTable_
= function(data
) {
1681 var cols
= data
.getNumberOfColumns();
1682 var rows
= data
.getNumberOfRows();
1684 // Read column labels
1686 for (var i
= 0; i
< cols
; i
++) {
1687 labels
.push(data
.getColumnLabel(i
));
1688 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1690 this.attrs_
.labels
= labels
;
1691 cols
= labels
.length
;
1693 var indepType
= data
.getColumnType(0);
1694 if (indepType
== 'date' || 'datetime') {
1695 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1696 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1697 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1698 } else if (indepType
== 'number') {
1699 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1700 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1701 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1703 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1704 "column 1 of DataTable input (Got '" + indepType
+ "')");
1709 var outOfOrder
= false;
1710 for (var i
= 0; i
< rows
; i
++) {
1712 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1713 data
.getValue(i
, 0) === null) {
1714 this.warning("Ignoring row " + i
+
1715 " of DataTable because of undefined or null first column.");
1719 if (indepType
== 'date' || indepType
== 'datetime') {
1720 row
.push(data
.getValue(i
, 0).getTime());
1722 row
.push(data
.getValue(i
, 0));
1724 if (!this.attr_("errorBars")) {
1725 for (var j
= 1; j
< cols
; j
++) {
1726 row
.push(data
.getValue(i
, j
));
1729 for (var j
= 0; j
< cols
- 1; j
++) {
1730 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1733 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1740 this.warn("DataTable is out of order; order it correctly to speed loading.");
1741 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1746 // These functions are all based on MochiKit.
1747 Dygraph
.update
= function (self
, o
) {
1748 if (typeof(o
) != 'undefined' && o
!== null) {
1750 if (o
.hasOwnProperty(k
)) {
1758 Dygraph
.isArrayLike
= function (o
) {
1759 var typ
= typeof(o
);
1761 (typ
!= 'object' && !(typ
== 'function' &&
1762 typeof(o
.item
) == 'function')) ||
1764 typeof(o
.length
) != 'number' ||
1772 Dygraph
.isDateLike
= function (o
) {
1773 if (typeof(o
) != "object" || o
=== null ||
1774 typeof(o
.getTime
) != 'function') {
1780 Dygraph
.clone
= function(o
) {
1781 // TODO(danvk): figure out how MochiKit's version works
1783 for (var i
= 0; i
< o
.length
; i
++) {
1784 if (Dygraph
.isArrayLike(o
[i
])) {
1785 r
.push(Dygraph
.clone(o
[i
]));
1795 * Get the CSV data. If it's in a function, call that function. If it's in a
1796 * file, do an XMLHttpRequest to get it.
1799 Dygraph
.prototype.start_
= function() {
1800 if (typeof this.file_
== 'function') {
1801 // CSV string. Pretend we got it via XHR.
1802 this.loadedEvent_(this.file_());
1803 } else if (Dygraph
.isArrayLike(this.file_
)) {
1804 this.rawData_
= this.parseArray_(this.file_
);
1805 this.drawGraph_(this.rawData_
);
1806 } else if (typeof this.file_
== 'object' &&
1807 typeof this.file_
.getColumnRange
== 'function') {
1808 // must be a DataTable from gviz.
1809 this.rawData_
= this.parseDataTable_(this.file_
);
1810 this.drawGraph_(this.rawData_
);
1811 } else if (typeof this.file_
== 'string') {
1812 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1813 if (this.file_
.indexOf('\n') >= 0) {
1814 this.loadedEvent_(this.file_
);
1816 var req
= new XMLHttpRequest();
1818 req
.onreadystatechange
= function () {
1819 if (req
.readyState
== 4) {
1820 if (req
.status
== 200) {
1821 caller
.loadedEvent_(req
.responseText
);
1826 req
.open("GET", this.file_
, true);
1830 this.error("Unknown data format: " + (typeof this.file_
));
1835 * Changes various properties of the graph. These can include:
1837 * <li>file: changes the source data for the graph</li>
1838 * <li>errorBars: changes whether the data contains stddev</li>
1840 * @param {Object} attrs The new properties and values
1842 Dygraph
.prototype.updateOptions
= function(attrs
) {
1843 // TODO(danvk): this is a mess. Rethink this function.
1844 if (attrs
.rollPeriod
) {
1845 this.rollPeriod_
= attrs
.rollPeriod
;
1847 if (attrs
.dateWindow
) {
1848 this.dateWindow_
= attrs
.dateWindow
;
1850 if (attrs
.valueRange
) {
1851 this.valueRange_
= attrs
.valueRange
;
1853 Dygraph
.update(this.user_attrs_
, attrs
);
1855 this.labelsFromCSV_
= (this.attr_("labels") == null);
1857 // TODO(danvk): this doesn't match the constructor logic
1858 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1859 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1860 this.file_
= attrs
['file'];
1863 this.drawGraph_(this.rawData_
);
1868 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1869 * containing div (which has presumably changed size since the dygraph was
1870 * instantiated. If the width/height are specified, the div will be resized.
1872 * This is far more efficient than destroying and re-instantiating a
1873 * Dygraph, since it doesn't have to reparse the underlying data.
1875 * @param {Number} width Width (in pixels)
1876 * @param {Number} height Height (in pixels)
1878 Dygraph
.prototype.resize
= function(width
, height
) {
1879 if ((width
=== null) != (height
=== null)) {
1880 this.warn("Dygraph.resize() should be called with zero parameters or " +
1881 "two non-NULL parameters. Pretending it was zero.");
1882 width
= height
= null;
1885 // TODO(danvk): there should be a clear() method.
1886 this.maindiv_
.innerHTML
= "";
1887 this.attrs_
.labelsDiv
= null;
1890 this.maindiv_
.style
.width
= width
+ "px";
1891 this.maindiv_
.style
.height
= height
+ "px";
1892 this.width_
= width
;
1893 this.height_
= height
;
1895 this.width_
= this.maindiv_
.offsetWidth
;
1896 this.height_
= this.maindiv_
.offsetHeight
;
1899 this.createInterface_();
1900 this.drawGraph_(this.rawData_
);
1904 * Adjusts the number of days in the rolling average. Updates the graph to
1905 * reflect the new averaging period.
1906 * @param {Number} length Number of days over which to average the data.
1908 Dygraph
.prototype.adjustRoll
= function(length
) {
1909 this.rollPeriod_
= length
;
1910 this.drawGraph_(this.rawData_
);
1914 * Returns a boolean array of visibility statuses.
1916 Dygraph
.prototype.visibility
= function() {
1917 // Do lazy-initialization, so that this happens after we know the number of
1919 if (!this.attr_("visibility")) {
1920 this.attrs_
["visibility"] = [];
1922 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
1923 this.attr_("visibility").push(true);
1925 return this.attr_("visibility");
1929 * Changes the visiblity of a series.
1931 Dygraph
.prototype.setVisibility
= function(num
, value
) {
1932 var x
= this.visibility();
1933 if (num
< 0 && num
>= x
.length
) {
1934 this.warn("invalid series number in setVisibility: " + num
);
1937 this.drawGraph_(this.rawData_
);
1942 * Create a new canvas element. This is more complex than a simple
1943 * document.createElement("canvas") because of IE and excanvas.
1945 Dygraph
.createCanvas
= function() {
1946 var canvas
= document
.createElement("canvas");
1948 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1950 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1958 * A wrapper around Dygraph that implements the gviz API.
1959 * @param {Object} container The DOM object the visualization should live in.
1961 Dygraph
.GVizChart
= function(container
) {
1962 this.container
= container
;
1965 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1966 this.container
.innerHTML
= '';
1967 this.date_graph
= new Dygraph(this.container
, data
, options
);
1970 // Older pages may still use this name.
1971 DateGraph
= Dygraph
;