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 if (!this.visibility()[i
-1]) continue;
401 var hue
= (1.0*i
/(1+num
));
402 this.colors_
.push( Dygraph
.hsvToRGB(hue
, sat
, val
) );
405 for (var i
= 0; i
< num
; i
++) {
406 if (!this.visibility()[i
]) continue;
407 var colorStr
= colors
[i
% colors
.length
];
408 this.colors_
.push(colorStr
);
412 // TODO(danvk): update this w/r
/t/ the
new options system
.
413 this.renderOptions_
.colorScheme
= this.colors_
;
414 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
415 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
416 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
419 // The following functions are from quirksmode.org
420 // http://www.quirksmode.org/js
/findpos
.html
421 Dygraph
.findPosX
= function(obj
) {
423 if (obj
.offsetParent
) {
424 while (obj
.offsetParent
) {
425 curleft
+= obj
.offsetLeft
;
426 obj
= obj
.offsetParent
;
434 Dygraph
.findPosY
= function(obj
) {
436 if (obj
.offsetParent
) {
437 while (obj
.offsetParent
) {
438 curtop
+= obj
.offsetTop
;
439 obj
= obj
.offsetParent
;
448 * Create the div that contains information on the selected point(s)
449 * This goes in the top right of the canvas, unless an external div has already
453 Dygraph
.prototype.createStatusMessage_
= function(){
454 if (!this.attr_("labelsDiv")) {
455 var divWidth
= this.attr_('labelsDivWidth');
457 "position": "absolute",
460 "width": divWidth
+ "px",
462 "left": (this.width_
- divWidth
- 2) + "px",
463 "background": "white",
465 "overflow": "hidden"};
466 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
467 var div
= document
.createElement("div");
468 for (var name
in messagestyle
) {
469 if (messagestyle
.hasOwnProperty(name
)) {
470 div
.style
[name
] = messagestyle
[name
];
473 this.graphDiv
.appendChild(div
);
474 this.attrs_
.labelsDiv
= div
;
479 * Create the text box to adjust the averaging period
480 * @return {Object} The newly-created text box
483 Dygraph
.prototype.createRollInterface_
= function() {
484 var display
= this.attr_('showRoller') ? "block" : "none";
485 var textAttr
= { "position": "absolute",
487 "top": (this.plotter_
.area
.h
- 25) + "px",
488 "left": (this.plotter_
.area
.x
+ 1) + "px",
491 var roller
= document
.createElement("input");
492 roller
.type
= "text";
494 roller
.value
= this.rollPeriod_
;
495 for (var name
in textAttr
) {
496 if (textAttr
.hasOwnProperty(name
)) {
497 roller
.style
[name
] = textAttr
[name
];
501 var pa
= this.graphDiv
;
502 pa
.appendChild(roller
);
504 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
508 // These functions are taken from MochiKit.Signal
509 Dygraph
.pageX
= function(e
) {
511 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
514 var b
= document
.body
;
516 (de
.scrollLeft
|| b
.scrollLeft
) -
517 (de
.clientLeft
|| 0);
521 Dygraph
.pageY
= function(e
) {
523 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
526 var b
= document
.body
;
528 (de
.scrollTop
|| b
.scrollTop
) -
534 * Set up all the mouse handlers needed to capture dragging behavior for zoom
538 Dygraph
.prototype.createDragInterface_
= function() {
541 // Tracks whether the mouse is down right now
542 var isZooming
= false;
543 var isPanning
= false;
544 var dragStartX
= null;
545 var dragStartY
= null;
549 var draggingDate
= null;
550 var dateRange
= null;
552 // Utility function to convert page-wide coordinates to canvas coords
555 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
556 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
558 // Draw zoom rectangles when the mouse is down and the user moves around
559 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
561 dragEndX
= getX(event
);
562 dragEndY
= getY(event
);
564 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
566 } else if (isPanning
) {
567 dragEndX
= getX(event
);
568 dragEndY
= getY(event
);
570 // Want to have it so that:
571 // 1. draggingDate appears at dragEndX
572 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
574 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
575 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
576 self
.drawGraph_(self
.rawData_
);
580 // Track the beginning of drag events
581 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
582 px
= Dygraph
.findPosX(self
.canvas_
);
583 py
= Dygraph
.findPosY(self
.canvas_
);
584 dragStartX
= getX(event
);
585 dragStartY
= getY(event
);
587 if (event
.altKey
|| event
.shiftKey
) {
588 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
590 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
591 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
598 // If the user releases the mouse button during a drag, but not over the
599 // canvas, then it doesn't count as a zooming action.
600 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
601 if (isZooming
|| isPanning
) {
614 // Temporarily cancel the dragging event when the mouse leaves the graph
615 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
622 // If the mouse is released on the canvas during a drag event, then it's a
623 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
624 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
627 dragEndX
= getX(event
);
628 dragEndY
= getY(event
);
629 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
630 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
632 if (regionWidth
< 2 && regionHeight
< 2 &&
633 self
.attr_('clickCallback') != null &&
634 self
.lastx_
!= undefined
) {
635 // TODO(danvk): pass along more info about the points.
636 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
639 if (regionWidth
>= 10) {
640 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
641 Math
.max(dragStartX
, dragEndX
));
643 self
.canvas_
.getContext("2d").clearRect(0, 0,
645 self
.canvas_
.height
);
659 // Double-clicking zooms back out
660 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
661 if (self
.dateWindow_
== null) return;
662 self
.dateWindow_
= null;
663 self
.drawGraph_(self
.rawData_
);
664 var minDate
= self
.rawData_
[0][0];
665 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
666 if (self
.attr_("zoomCallback")) {
667 self
.attr_("zoomCallback")(minDate
, maxDate
);
673 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
674 * up any previous zoom rectangles that were drawn. This could be optimized to
675 * avoid extra redrawing, but it's tricky to avoid interactions with the status
677 * @param {Number} startX The X position where the drag started, in canvas
679 * @param {Number} endX The current X position of the drag, in canvas coords.
680 * @param {Number} prevEndX The value of endX on the previous call to this
681 * function. Used to avoid excess redrawing
684 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
685 var ctx
= this.canvas_
.getContext("2d");
687 // Clean up from the previous rect if necessary
689 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
690 Math
.abs(startX
- prevEndX
), this.height_
);
693 // Draw a light-grey rectangle to show the new viewing area
694 if (endX
&& startX
) {
695 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
696 ctx
.fillRect(Math
.min(startX
, endX
), 0,
697 Math
.abs(endX
- startX
), this.height_
);
702 * Zoom to something containing [lowX, highX]. These are pixel coordinates
703 * in the canvas. The exact zoom window may be slightly larger if there are no
704 * data points near lowX or highX. This function redraws the graph.
705 * @param {Number} lowX The leftmost pixel value that should be visible.
706 * @param {Number} highX The rightmost pixel value that should be visible.
709 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
710 // Find the earliest and latest dates contained in this canvasx range.
711 var points
= this.layout_
.points
;
714 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
715 for (var i
= 0; i
< points
.length
; i
++) {
716 var cx
= points
[i
].canvasx
;
717 var x
= points
[i
].xval
;
718 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
719 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
721 // Use the extremes if either is missing
722 if (minDate
== null) minDate
= points
[0].xval
;
723 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
725 this.dateWindow_
= [minDate
, maxDate
];
726 this.drawGraph_(this.rawData_
);
727 if (this.attr_("zoomCallback")) {
728 this.attr_("zoomCallback")(minDate
, maxDate
);
733 * When the mouse moves in the canvas, display information about a nearby data
734 * point and draw dots over those points in the data series. This function
735 * takes care of cleanup of previously-drawn dots.
736 * @param {Object} event The mousemove event from the browser.
739 Dygraph
.prototype.mouseMove_
= function(event
) {
740 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
741 var points
= this.layout_
.points
;
746 // Loop through all the points and find the date nearest to our current
748 var minDist
= 1e+100;
750 for (var i
= 0; i
< points
.length
; i
++) {
751 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
752 if (dist
> minDist
) break;
756 if (idx
>= 0) lastx
= points
[idx
].xval
;
757 // Check that you can really highlight the last day's data
758 if (canvasx
> points
[points
.length
-1].canvasx
)
759 lastx
= points
[points
.length
-1].xval
;
761 // Extract the points we've selected
762 this.selPoints_
= [];
763 for (var i
= 0; i
< points
.length
; i
++) {
764 if (points
[i
].xval
== lastx
) {
765 this.selPoints_
.push(points
[i
]);
769 if (this.attr_("highlightCallback")) {
770 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
773 // Clear the previously drawn vertical, if there is one
774 var circleSize
= this.attr_('highlightCircleSize');
775 var ctx
= this.canvas_
.getContext("2d");
776 if (this.previousVerticalX_
>= 0) {
777 var px
= this.previousVerticalX_
;
778 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
781 var isOK
= function(x
) { return x
&& !isNaN(x
); };
783 if (this.selPoints_
.length
> 0) {
784 var canvasx
= this.selPoints_
[0].canvasx
;
786 // Set the status message to indicate the selected point(s)
787 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
788 var clen
= this.colors_
.length
;
789 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
790 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
791 if (this.attr_("labelsSeparateLines")) {
794 var point
= this.selPoints_
[i
];
795 var c
= new RGBColor(this.colors_
[i
%clen
]);
796 replace
+= " <b><font color='" + c
.toHex() + "'>"
797 + point
.name
+ "</font></b>:"
798 + this.round_(point
.yval
, 2);
800 this.attr_("labelsDiv").innerHTML
= replace
;
802 // Save last x position for callbacks.
805 // Draw colored circles over the center of each selected point
807 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
808 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
810 ctx
.fillStyle
= this.colors_
[i
%clen
];
811 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
812 0, 2 * Math
.PI
, false);
817 this.previousVerticalX_
= canvasx
;
822 * The mouse has left the canvas. Clear out whatever artifacts remain
823 * @param {Object} event the mouseout event from the browser.
826 Dygraph
.prototype.mouseOut_
= function(event
) {
827 // Get rid of the overlay data
828 var ctx
= this.canvas_
.getContext("2d");
829 ctx
.clearRect(0, 0, this.width_
, this.height_
);
830 this.attr_("labelsDiv").innerHTML
= "";
833 Dygraph
.zeropad
= function(x
) {
834 if (x
< 10) return "0" + x
; else return "" + x
;
838 * Return a string version of the hours, minutes and seconds portion of a date.
839 * @param {Number} date The JavaScript date (ms since epoch)
840 * @return {String} A time of the form "HH:MM:SS"
843 Dygraph
.prototype.hmsString_
= function(date
) {
844 var zeropad
= Dygraph
.zeropad
;
845 var d
= new Date(date
);
846 if (d
.getSeconds()) {
847 return zeropad(d
.getHours()) + ":" +
848 zeropad(d
.getMinutes()) + ":" +
849 zeropad(d
.getSeconds());
850 } else if (d
.getMinutes()) {
851 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
853 return zeropad(d
.getHours());
858 * Convert a JS date (millis since epoch) to YYYY/MM/DD
859 * @param {Number} date The JavaScript date (ms since epoch)
860 * @return {String} A date of the form "YYYY/MM/DD"
862 * TODO(danvk): why is this part of the prototype?
864 Dygraph
.dateString_
= function(date
, self
) {
865 var zeropad
= Dygraph
.zeropad
;
866 var d
= new Date(date
);
869 var year
= "" + d
.getFullYear();
870 // Get a 0 padded month string
871 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
872 // Get a 0 padded day string
873 var day
= zeropad(d
.getDate());
876 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
877 if (frac
) ret
= " " + self
.hmsString_(date
);
879 return year
+ "/" + month + "/" + day
+ ret
;
883 * Round a number to the specified number of digits past the decimal point.
884 * @param {Number} num The number to round
885 * @param {Number} places The number of decimals to which to round
886 * @return {Number} The rounded number
889 Dygraph
.prototype.round_
= function(num
, places
) {
890 var shift
= Math
.pow(10, places
);
891 return Math
.round(num
* shift
)/shift
;
895 * Fires when there's data available to be graphed.
896 * @param {String} data Raw CSV data to be plotted
899 Dygraph
.prototype.loadedEvent_
= function(data
) {
900 this.rawData_
= this.parseCSV_(data
);
901 this.drawGraph_(this.rawData_
);
904 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
905 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
906 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
909 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
912 Dygraph
.prototype.addXTicks_
= function() {
913 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
914 var startDate
, endDate
;
915 if (this.dateWindow_
) {
916 startDate
= this.dateWindow_
[0];
917 endDate
= this.dateWindow_
[1];
919 startDate
= this.rawData_
[0][0];
920 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
923 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
924 this.layout_
.updateOptions({xTicks
: xTicks
});
927 // Time granularity enumeration
928 Dygraph
.SECONDLY
= 0;
929 Dygraph
.TWO_SECONDLY
= 1;
930 Dygraph
.FIVE_SECONDLY
= 2;
931 Dygraph
.TEN_SECONDLY
= 3;
932 Dygraph
.THIRTY_SECONDLY
= 4;
933 Dygraph
.MINUTELY
= 5;
934 Dygraph
.TWO_MINUTELY
= 6;
935 Dygraph
.FIVE_MINUTELY
= 7;
936 Dygraph
.TEN_MINUTELY
= 8;
937 Dygraph
.THIRTY_MINUTELY
= 9;
939 Dygraph
.TWO_HOURLY
= 11;
940 Dygraph
.SIX_HOURLY
= 12;
943 Dygraph
.MONTHLY
= 15;
944 Dygraph
.QUARTERLY
= 16;
945 Dygraph
.BIANNUAL
= 17;
947 Dygraph
.DECADAL
= 19;
948 Dygraph
.NUM_GRANULARITIES
= 20;
950 Dygraph
.SHORT_SPACINGS
= [];
951 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
952 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
953 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
954 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
955 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
956 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
957 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
958 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
959 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
960 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
961 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
962 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
963 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
964 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
965 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
969 // If we used this time granularity, how many ticks would there be?
970 // This is only an approximation, but it's generally good enough.
972 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
973 if (granularity
< Dygraph
.MONTHLY
) {
974 // Generate one tick mark for every fixed interval of time.
975 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
976 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
978 var year_mod
= 1; // e.g. to only print one point every 10 years.
980 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
981 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
982 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
983 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
985 var msInYear
= 365.2524 * 24 * 3600 * 1000;
986 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
987 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
993 // Construct an x-axis of nicely-formatted times on meaningful boundaries
994 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
996 // Returns an array containing {v: millis, label: label} dictionaries.
998 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1000 if (granularity
< Dygraph
.MONTHLY
) {
1001 // Generate one tick mark for every fixed interval of time.
1002 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1003 var format
= '%d%b'; // e.g. "1Jan"
1005 // Find a time less than start_time which occurs on a "nice" time boundary
1006 // for this granularity.
1007 var g
= spacing
/ 1000;
1008 var d
= new Date(start_time
);
1009 if (g
<= 60) { // seconds
1010 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1014 if (g
<= 60) { // minutes
1015 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1020 if (g
<= 24) { // days
1021 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1026 if (g
== 7) { // one week
1027 d
.setDate(d
.getDate() - d
.getDay());
1032 start_time
= d
.getTime();
1034 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1035 var d
= new Date(t
);
1036 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1037 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1038 // the extra hour covers DST problems.
1039 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1041 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1045 // Display a tick mark on the first of a set of months of each year.
1046 // Years get a tick mark iff y % year_mod == 0. This is useful for
1047 // displaying a tick mark once every 10 years, say, on long time scales.
1049 var year_mod
= 1; // e.g. to only print one point every 10 years.
1051 if (granularity
== Dygraph
.MONTHLY
) {
1052 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1053 } else if (granularity
== Dygraph
.QUARTERLY
) {
1054 months
= [ 0, 3, 6, 9 ];
1055 } else if (granularity
== Dygraph
.BIANNUAL
) {
1057 } else if (granularity
== Dygraph
.ANNUAL
) {
1059 } else if (granularity
== Dygraph
.DECADAL
) {
1064 var start_year
= new Date(start_time
).getFullYear();
1065 var end_year
= new Date(end_time
).getFullYear();
1066 var zeropad
= Dygraph
.zeropad
;
1067 for (var i
= start_year
; i
<= end_year
; i
++) {
1068 if (i
% year_mod
!= 0) continue;
1069 for (var j
= 0; j
< months
.length
; j
++) {
1070 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1071 var t
= Date
.parse(date_str
);
1072 if (t
< start_time
|| t
> end_time
) continue;
1073 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1083 * Add ticks to the x-axis based on a date range.
1084 * @param {Number} startDate Start of the date window (millis since epoch)
1085 * @param {Number} endDate End of the date window (millis since epoch)
1086 * @return {Array.<Object>} Array of {label, value} tuples.
1089 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1091 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1092 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1093 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1100 return self
.GetXAxis(startDate
, endDate
, chosen
);
1102 // TODO(danvk): signal error.
1107 * Add ticks when the x axis has numbers on it (instead of dates)
1108 * @param {Number} startDate Start of the date window (millis since epoch)
1109 * @param {Number} endDate End of the date window (millis since epoch)
1110 * @return {Array.<Object>} Array of {label, value} tuples.
1113 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1115 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1116 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1117 // The first spacing greater than pixelsPerYLabel is what we use.
1118 // TODO(danvk): version that works on a log scale.
1119 if (self
.attr_("labelsKMG2")) {
1120 var mults
= [1, 2, 4, 8];
1122 var mults
= [1, 2, 5];
1124 var scale
, low_val
, high_val
, nTicks
;
1125 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1126 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1127 for (var i
= -10; i
< 50; i
++) {
1128 if (self
.attr_("labelsKMG2")) {
1129 var base_scale
= Math
.pow(16, i
);
1131 var base_scale
= Math
.pow(10, i
);
1133 for (var j
= 0; j
< mults
.length
; j
++) {
1134 scale
= base_scale
* mults
[j
];
1135 low_val
= Math
.floor(minV
/ scale
) * scale
;
1136 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1137 nTicks
= (high_val
- low_val
) / scale
;
1138 var spacing
= self
.height_
/ nTicks
;
1139 // wish I could break out of both loops at once...
1140 if (spacing
> pixelsPerTick
) break;
1142 if (spacing
> pixelsPerTick
) break;
1145 // Construct labels for the ticks
1149 if (self
.attr_("labelsKMB")) {
1151 k_labels
= [ "K", "M", "B", "T" ];
1153 if (self
.attr_("labelsKMG2")) {
1154 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1156 k_labels
= [ "k", "M", "G", "T" ];
1159 for (var i
= 0; i
< nTicks
; i
++) {
1160 var tickV
= low_val
+ i
* scale
;
1161 var absTickV
= Math
.abs(tickV
);
1162 var label
= self
.round_(tickV
, 2);
1163 if (k_labels
.length
) {
1164 // Round up to an appropriate unit.
1166 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1167 if (absTickV
>= n
) {
1168 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1173 ticks
.push( {label
: label
, v
: tickV
} );
1179 * Adds appropriate ticks on the y-axis
1180 * @param {Number} minY The minimum Y value in the data set
1181 * @param {Number} maxY The maximum Y value in the data set
1184 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1185 // Set the number of ticks so that the labels are human-friendly.
1186 // TODO(danvk): make this an attribute as well.
1187 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1188 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1192 // Computes the range of the data series (including confidence intervals).
1193 // series is either [ [x1, y1], [x2, y2], ... ] or
1194 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1195 // Returns [low, high]
1196 Dygraph
.prototype.extremeValues_
= function(series
) {
1197 var minY
= null, maxY
= null;
1199 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1201 // With custom bars, maxY is the max of the high values.
1202 for (var j
= 0; j
< series
.length
; j
++) {
1203 var y
= series
[j
][1][0];
1205 var low
= y
- series
[j
][1][1];
1206 var high
= y
+ series
[j
][1][2];
1207 if (low
> y
) low
= y
; // this can happen with custom bars,
1208 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1209 if (maxY
== null || high
> maxY
) {
1212 if (minY
== null || low
< minY
) {
1217 for (var j
= 0; j
< series
.length
; j
++) {
1218 var y
= series
[j
][1];
1219 if (y
=== null || isNaN(y
)) continue;
1220 if (maxY
== null || y
> maxY
) {
1223 if (minY
== null || y
< minY
) {
1229 return [minY
, maxY
];
1233 * Update the graph with new data. Data is in the format
1234 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1235 * or, if errorBars=true,
1236 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1237 * @param {Array.<Object>} data The data (see above)
1240 Dygraph
.prototype.drawGraph_
= function(data
) {
1241 var minY
= null, maxY
= null;
1242 this.layout_
.removeAllDatasets();
1244 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1246 // Loop over all fields in the dataset
1247 for (var i
= 1; i
< data
[0].length
; i
++) {
1248 if (!this.visibility()[i
- 1]) continue;
1251 for (var j
= 0; j
< data
.length
; j
++) {
1252 var date
= data
[j
][0];
1253 series
[j
] = [date
, data
[j
][i
]];
1255 series
= this.rollingAverage(series
, this.rollPeriod_
);
1257 // Prune down to the desired range, if necessary (for zooming)
1258 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1259 if (this.dateWindow_
) {
1260 var low
= this.dateWindow_
[0];
1261 var high
= this.dateWindow_
[1];
1263 for (var k
= 0; k
< series
.length
; k
++) {
1264 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1265 pruned
.push(series
[k
]);
1271 var extremes
= this.extremeValues_(series
);
1272 var thisMinY
= extremes
[0];
1273 var thisMaxY
= extremes
[1];
1274 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1275 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1279 for (var j
=0; j
<series
.length
; j
++)
1280 vals
[j
] = [series
[j
][0],
1281 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1282 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1284 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1288 // Use some heuristics to come up with a good maxY value, unless it's been
1289 // set explicitly by the user.
1290 if (this.valueRange_
!= null) {
1291 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1293 // Add some padding and round up to an integer to be human-friendly.
1294 var span
= maxY
- minY
;
1295 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1296 if (span
== 0) { span
= maxY
; }
1297 var maxAxisY
= maxY
+ 0.1 * span
;
1298 var minAxisY
= minY
- 0.1 * span
;
1300 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1301 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1302 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1304 if (this.attr_("includeZero")) {
1305 if (maxY
< 0) maxAxisY
= 0;
1306 if (minY
> 0) minAxisY
= 0;
1309 this.addYTicks_(minAxisY
, maxAxisY
);
1314 // Tell PlotKit to use this new data and render itself
1315 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1316 this.layout_
.evaluateWithError();
1317 this.plotter_
.clear();
1318 this.plotter_
.render();
1319 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1320 this.canvas_
.height
);
1324 * Calculates the rolling average of a data set.
1325 * If originalData is [label, val], rolls the average of those.
1326 * If originalData is [label, [, it's interpreted as [value, stddev]
1327 * and the roll is returned in the same form, with appropriately reduced
1328 * stddev for each value.
1329 * Note that this is where fractional input (i.e. '5/10') is converted into
1331 * @param {Array} originalData The data in the appropriate format (see above)
1332 * @param {Number} rollPeriod The number of days over which to average the data
1334 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1335 if (originalData
.length
< 2)
1336 return originalData
;
1337 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1338 var rollingData
= [];
1339 var sigma
= this.attr_("sigma");
1341 if (this.fractions_
) {
1343 var den
= 0; // numerator/denominator
1345 for (var i
= 0; i
< originalData
.length
; i
++) {
1346 num
+= originalData
[i
][1][0];
1347 den
+= originalData
[i
][1][1];
1348 if (i
- rollPeriod
>= 0) {
1349 num
-= originalData
[i
- rollPeriod
][1][0];
1350 den
-= originalData
[i
- rollPeriod
][1][1];
1353 var date
= originalData
[i
][0];
1354 var value
= den
? num
/ den
: 0.0;
1355 if (this.attr_("errorBars")) {
1356 if (this.wilsonInterval_
) {
1357 // For more details on this confidence interval, see:
1358 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1360 var p
= value
< 0 ? 0 : value
, n
= den
;
1361 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1362 var denom
= 1 + sigma
* sigma
/ den
;
1363 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1364 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1365 rollingData
[i
] = [date
,
1366 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1368 rollingData
[i
] = [date
, [0, 0, 0]];
1371 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1372 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1375 rollingData
[i
] = [date
, mult
* value
];
1378 } else if (this.attr_("customBars")) {
1383 for (var i
= 0; i
< originalData
.length
; i
++) {
1384 var data
= originalData
[i
][1];
1386 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1388 if (y
!= null && !isNaN(y
)) {
1394 if (i
- rollPeriod
>= 0) {
1395 var prev
= originalData
[i
- rollPeriod
];
1396 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1403 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1404 1.0 * (mid
- low
) / count
,
1405 1.0 * (high
- mid
) / count
]];
1408 // Calculate the rolling average for the first rollPeriod - 1 points where
1409 // there is not enough data to roll over the full number of days
1410 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1411 if (!this.attr_("errorBars")){
1412 if (rollPeriod
== 1) {
1413 return originalData
;
1416 for (var i
= 0; i
< originalData
.length
; i
++) {
1419 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1420 var y
= originalData
[j
][1];
1421 if (y
== null || isNaN(y
)) continue;
1423 sum
+= originalData
[j
][1];
1426 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1428 rollingData
[i
] = [originalData
[i
][0], null];
1433 for (var i
= 0; i
< originalData
.length
; i
++) {
1437 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1438 var y
= originalData
[j
][1][0];
1439 if (y
== null || isNaN(y
)) continue;
1441 sum
+= originalData
[j
][1][0];
1442 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1445 var stddev
= Math
.sqrt(variance
) / num_ok
;
1446 rollingData
[i
] = [originalData
[i
][0],
1447 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1449 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1459 * Parses a date, returning the number of milliseconds since epoch. This can be
1460 * passed in as an xValueParser in the Dygraph constructor.
1461 * TODO(danvk): enumerate formats that this understands.
1462 * @param {String} A date in YYYYMMDD format.
1463 * @return {Number} Milliseconds since epoch.
1466 Dygraph
.dateParser
= function(dateStr
, self
) {
1469 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1470 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1471 while (dateStrSlashed
.search("-") != -1) {
1472 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1474 d
= Date
.parse(dateStrSlashed
);
1475 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1476 // TODO(danvk): remove support for this format. It's confusing.
1477 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1478 + "/" + dateStr
.substr(6,2);
1479 d
= Date
.parse(dateStrSlashed
);
1481 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1482 // "2009/07/12 12:34:56"
1483 d
= Date
.parse(dateStr
);
1486 if (!d
|| isNaN(d
)) {
1487 self
.error("Couldn't parse " + dateStr
+ " as a date");
1493 * Detects the type of the str (date or numeric) and sets the various
1494 * formatting attributes in this.attrs_ based on this type.
1495 * @param {String} str An x value.
1498 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1500 if (str
.indexOf('-') >= 0 ||
1501 str
.indexOf('/') >= 0 ||
1502 isNaN(parseFloat(str
))) {
1504 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1505 // TODO(danvk): remove support for this format.
1510 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1511 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1512 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1514 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1515 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1516 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1521 * Parses a string in a special csv format. We expect a csv file where each
1522 * line is a date point, and the first field in each line is the date string.
1523 * We also expect that all remaining fields represent series.
1524 * if the errorBars attribute is set, then interpret the fields as:
1525 * date, series1, stddev1, series2, stddev2, ...
1526 * @param {Array.<Object>} data See above.
1529 * @return Array.<Object> An array with one entry for each row. These entries
1530 * are an array of cells in that row. The first entry is the parsed x-value for
1531 * the row. The second, third, etc. are the y-values. These can take on one of
1532 * three forms, depending on the CSV and constructor parameters:
1534 * 2. [ value, stddev ]
1535 * 3. [ low value, center value, high value ]
1537 Dygraph
.prototype.parseCSV_
= function(data
) {
1539 var lines
= data
.split("\n");
1541 // Use the default delimiter or fall back to a tab if that makes sense.
1542 var delim
= this.attr_('delimiter');
1543 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1548 if (this.labelsFromCSV_
) {
1550 this.attrs_
.labels
= lines
[0].split(delim
);
1554 var defaultParserSet
= false; // attempt to auto-detect x value type
1555 var expectedCols
= this.attr_("labels").length
;
1556 var outOfOrder
= false;
1557 for (var i
= start
; i
< lines
.length
; i
++) {
1558 var line
= lines
[i
];
1559 if (line
.length
== 0) continue; // skip blank lines
1560 if (line
[0] == '#') continue; // skip comment lines
1561 var inFields
= line
.split(delim
);
1562 if (inFields
.length
< 2) continue;
1565 if (!defaultParserSet
) {
1566 this.detectTypeFromString_(inFields
[0]);
1567 xParser
= this.attr_("xValueParser");
1568 defaultParserSet
= true;
1570 fields
[0] = xParser(inFields
[0], this);
1572 // If fractions are expected, parse the numbers as "A/B
"
1573 if (this.fractions_) {
1574 for (var j = 1; j < inFields.length; j++) {
1575 // TODO(danvk): figure out an appropriate way to flag parse errors.
1576 var vals = inFields[j].split("/");
1577 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1579 } else if (this.attr_("errorBars
")) {
1580 // If there are error bars, values are (value, stddev) pairs
1581 for (var j = 1; j < inFields.length; j += 2)
1582 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1583 parseFloat(inFields[j + 1])];
1584 } else if (this.attr_("customBars
")) {
1585 // Bars are a low;center;high tuple
1586 for (var j = 1; j < inFields.length; j++) {
1587 var vals = inFields[j].split(";");
1588 fields[j] = [ parseFloat(vals[0]),
1589 parseFloat(vals[1]),
1590 parseFloat(vals[2]) ];
1593 // Values are just numbers
1594 for (var j = 1; j < inFields.length; j++) {
1595 fields[j] = parseFloat(inFields[j]);
1598 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1603 if (fields.length != expectedCols) {
1604 this.error("Number of columns
in line
" + i + " (" + fields.length +
1605 ") does not agree
with number of
labels (" + expectedCols +
1611 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1612 ret.sort(function(a,b) { return a[0] - b[0] });
1619 * The user has provided their data as a pre-packaged JS array. If the x values
1620 * are numeric, this is the same as dygraphs' internal format. If the x values
1621 * are dates, we need to convert them from Date objects to ms since epoch.
1622 * @param {Array.<Object>} data
1623 * @return {Array.<Object>} data with numeric x values.
1625 Dygraph.prototype.parseArray_ = function(data) {
1626 // Peek at the first x value to see if it's numeric.
1627 if (data.length == 0) {
1628 this.error("Can
't plot empty data set");
1631 if (data[0].length == 0) {
1632 this.error("Data set cannot contain an empty row");
1636 if (this.attr_("labels") == null) {
1637 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1638 "in the options parameter");
1639 this.attrs_.labels = [ "X" ];
1640 for (var i = 1; i < data[0].length; i++) {
1641 this.attrs_.labels.push("Y" + i);
1645 if (Dygraph.isDateLike(data[0][0])) {
1646 // Some intelligent defaults for a date x-axis.
1647 this.attrs_.xValueFormatter = Dygraph.dateString_;
1648 this.attrs_.xTicker = Dygraph.dateTicker;
1650 // Assume they're all dates
.
1651 var parsedData
= Dygraph
.clone(data
);
1652 for (var i
= 0; i
< data
.length
; i
++) {
1653 if (parsedData
[i
].length
== 0) {
1654 this.error("Row " << (1 + i
) << " of data is empty");
1657 if (parsedData
[i
][0] == null
1658 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1659 this.error("x value in row " << (1 + i
) << " is not a Date");
1662 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1666 // Some intelligent defaults for a numeric x-axis.
1667 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1668 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1674 * Parses a DataTable object from gviz.
1675 * The data is expected to have a first column that is either a date or a
1676 * number. All subsequent columns must be numbers. If there is a clear mismatch
1677 * between this.xValueParser_ and the type of the first column, it will be
1678 * fixed. Returned value is in the same format as return value of parseCSV_.
1679 * @param {Array.<Object>} data See above.
1682 Dygraph
.prototype.parseDataTable_
= function(data
) {
1683 var cols
= data
.getNumberOfColumns();
1684 var rows
= data
.getNumberOfRows();
1686 // Read column labels
1688 for (var i
= 0; i
< cols
; i
++) {
1689 labels
.push(data
.getColumnLabel(i
));
1690 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1692 this.attrs_
.labels
= labels
;
1693 cols
= labels
.length
;
1695 var indepType
= data
.getColumnType(0);
1696 if (indepType
== 'date' || 'datetime') {
1697 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1698 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1699 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1700 } else if (indepType
== 'number') {
1701 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1702 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1703 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1705 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1706 "column 1 of DataTable input (Got '" + indepType
+ "')");
1711 var outOfOrder
= false;
1712 for (var i
= 0; i
< rows
; i
++) {
1714 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1715 data
.getValue(i
, 0) === null) {
1716 this.warning("Ignoring row " + i
+
1717 " of DataTable because of undefined or null first column.");
1721 if (indepType
== 'date' || indepType
== 'datetime') {
1722 row
.push(data
.getValue(i
, 0).getTime());
1724 row
.push(data
.getValue(i
, 0));
1726 if (!this.attr_("errorBars")) {
1727 for (var j
= 1; j
< cols
; j
++) {
1728 row
.push(data
.getValue(i
, j
));
1731 for (var j
= 0; j
< cols
- 1; j
++) {
1732 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1735 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1742 this.warn("DataTable is out of order; order it correctly to speed loading.");
1743 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1748 // These functions are all based on MochiKit.
1749 Dygraph
.update
= function (self
, o
) {
1750 if (typeof(o
) != 'undefined' && o
!== null) {
1752 if (o
.hasOwnProperty(k
)) {
1760 Dygraph
.isArrayLike
= function (o
) {
1761 var typ
= typeof(o
);
1763 (typ
!= 'object' && !(typ
== 'function' &&
1764 typeof(o
.item
) == 'function')) ||
1766 typeof(o
.length
) != 'number' ||
1774 Dygraph
.isDateLike
= function (o
) {
1775 if (typeof(o
) != "object" || o
=== null ||
1776 typeof(o
.getTime
) != 'function') {
1782 Dygraph
.clone
= function(o
) {
1783 // TODO(danvk): figure out how MochiKit's version works
1785 for (var i
= 0; i
< o
.length
; i
++) {
1786 if (Dygraph
.isArrayLike(o
[i
])) {
1787 r
.push(Dygraph
.clone(o
[i
]));
1797 * Get the CSV data. If it's in a function, call that function. If it's in a
1798 * file, do an XMLHttpRequest to get it.
1801 Dygraph
.prototype.start_
= function() {
1802 if (typeof this.file_
== 'function') {
1803 // CSV string. Pretend we got it via XHR.
1804 this.loadedEvent_(this.file_());
1805 } else if (Dygraph
.isArrayLike(this.file_
)) {
1806 this.rawData_
= this.parseArray_(this.file_
);
1807 this.drawGraph_(this.rawData_
);
1808 } else if (typeof this.file_
== 'object' &&
1809 typeof this.file_
.getColumnRange
== 'function') {
1810 // must be a DataTable from gviz.
1811 this.rawData_
= this.parseDataTable_(this.file_
);
1812 this.drawGraph_(this.rawData_
);
1813 } else if (typeof this.file_
== 'string') {
1814 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1815 if (this.file_
.indexOf('\n') >= 0) {
1816 this.loadedEvent_(this.file_
);
1818 var req
= new XMLHttpRequest();
1820 req
.onreadystatechange
= function () {
1821 if (req
.readyState
== 4) {
1822 if (req
.status
== 200) {
1823 caller
.loadedEvent_(req
.responseText
);
1828 req
.open("GET", this.file_
, true);
1832 this.error("Unknown data format: " + (typeof this.file_
));
1837 * Changes various properties of the graph. These can include:
1839 * <li>file: changes the source data for the graph</li>
1840 * <li>errorBars: changes whether the data contains stddev</li>
1842 * @param {Object} attrs The new properties and values
1844 Dygraph
.prototype.updateOptions
= function(attrs
) {
1845 // TODO(danvk): this is a mess. Rethink this function.
1846 if (attrs
.rollPeriod
) {
1847 this.rollPeriod_
= attrs
.rollPeriod
;
1849 if (attrs
.dateWindow
) {
1850 this.dateWindow_
= attrs
.dateWindow
;
1852 if (attrs
.valueRange
) {
1853 this.valueRange_
= attrs
.valueRange
;
1855 Dygraph
.update(this.user_attrs_
, attrs
);
1857 this.labelsFromCSV_
= (this.attr_("labels") == null);
1859 // TODO(danvk): this doesn't match the constructor logic
1860 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1861 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1862 this.file_
= attrs
['file'];
1865 this.drawGraph_(this.rawData_
);
1870 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1871 * containing div (which has presumably changed size since the dygraph was
1872 * instantiated. If the width/height are specified, the div will be resized.
1874 * This is far more efficient than destroying and re-instantiating a
1875 * Dygraph, since it doesn't have to reparse the underlying data.
1877 * @param {Number} width Width (in pixels)
1878 * @param {Number} height Height (in pixels)
1880 Dygraph
.prototype.resize
= function(width
, height
) {
1881 if ((width
=== null) != (height
=== null)) {
1882 this.warn("Dygraph.resize() should be called with zero parameters or " +
1883 "two non-NULL parameters. Pretending it was zero.");
1884 width
= height
= null;
1887 // TODO(danvk): there should be a clear() method.
1888 this.maindiv_
.innerHTML
= "";
1889 this.attrs_
.labelsDiv
= null;
1892 this.maindiv_
.style
.width
= width
+ "px";
1893 this.maindiv_
.style
.height
= height
+ "px";
1894 this.width_
= width
;
1895 this.height_
= height
;
1897 this.width_
= this.maindiv_
.offsetWidth
;
1898 this.height_
= this.maindiv_
.offsetHeight
;
1901 this.createInterface_();
1902 this.drawGraph_(this.rawData_
);
1906 * Adjusts the number of days in the rolling average. Updates the graph to
1907 * reflect the new averaging period.
1908 * @param {Number} length Number of days over which to average the data.
1910 Dygraph
.prototype.adjustRoll
= function(length
) {
1911 this.rollPeriod_
= length
;
1912 this.drawGraph_(this.rawData_
);
1916 * Returns a boolean array of visibility statuses.
1918 Dygraph
.prototype.visibility
= function() {
1919 // Do lazy-initialization, so that this happens after we know the number of
1921 if (!this.attr_("visibility")) {
1922 this.attrs_
["visibility"] = [];
1924 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
1925 this.attr_("visibility").push(true);
1927 return this.attr_("visibility");
1931 * Changes the visiblity of a series.
1933 Dygraph
.prototype.setVisibility
= function(num
, value
) {
1934 var x
= this.visibility();
1935 if (num
< 0 && num
>= x
.length
) {
1936 this.warn("invalid series number in setVisibility: " + num
);
1939 this.drawGraph_(this.rawData_
);
1944 * Create a new canvas element. This is more complex than a simple
1945 * document.createElement("canvas") because of IE and excanvas.
1947 Dygraph
.createCanvas
= function() {
1948 var canvas
= document
.createElement("canvas");
1950 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1952 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1960 * A wrapper around Dygraph that implements the gviz API.
1961 * @param {Object} container The DOM object the visualization should live in.
1963 Dygraph
.GVizChart
= function(container
) {
1964 this.container
= container
;
1967 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1968 this.container
.innerHTML
= '';
1969 this.date_graph
= new Dygraph(this.container
, data
, options
);
1972 // Older pages may still use this name.
1973 DateGraph
= Dygraph
;