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 // This affects the calculation of span, below.
1294 if (this.attr_("includeZero") && minY
> 0) {
1298 // Add some padding and round up to an integer to be human-friendly.
1299 var span
= maxY
- minY
;
1300 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1301 if (span
== 0) { span
= maxY
; }
1302 var maxAxisY
= maxY
+ 0.1 * span
;
1303 var minAxisY
= minY
- 0.1 * span
;
1305 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1306 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1307 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1309 if (this.attr_("includeZero")) {
1310 if (maxY
< 0) maxAxisY
= 0;
1311 if (minY
> 0) minAxisY
= 0;
1314 this.addYTicks_(minAxisY
, maxAxisY
);
1319 // Tell PlotKit to use this new data and render itself
1320 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1321 this.layout_
.evaluateWithError();
1322 this.plotter_
.clear();
1323 this.plotter_
.render();
1324 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1325 this.canvas_
.height
);
1329 * Calculates the rolling average of a data set.
1330 * If originalData is [label, val], rolls the average of those.
1331 * If originalData is [label, [, it's interpreted as [value, stddev]
1332 * and the roll is returned in the same form, with appropriately reduced
1333 * stddev for each value.
1334 * Note that this is where fractional input (i.e. '5/10') is converted into
1336 * @param {Array} originalData The data in the appropriate format (see above)
1337 * @param {Number} rollPeriod The number of days over which to average the data
1339 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1340 if (originalData
.length
< 2)
1341 return originalData
;
1342 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1343 var rollingData
= [];
1344 var sigma
= this.attr_("sigma");
1346 if (this.fractions_
) {
1348 var den
= 0; // numerator/denominator
1350 for (var i
= 0; i
< originalData
.length
; i
++) {
1351 num
+= originalData
[i
][1][0];
1352 den
+= originalData
[i
][1][1];
1353 if (i
- rollPeriod
>= 0) {
1354 num
-= originalData
[i
- rollPeriod
][1][0];
1355 den
-= originalData
[i
- rollPeriod
][1][1];
1358 var date
= originalData
[i
][0];
1359 var value
= den
? num
/ den
: 0.0;
1360 if (this.attr_("errorBars")) {
1361 if (this.wilsonInterval_
) {
1362 // For more details on this confidence interval, see:
1363 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1365 var p
= value
< 0 ? 0 : value
, n
= den
;
1366 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1367 var denom
= 1 + sigma
* sigma
/ den
;
1368 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1369 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1370 rollingData
[i
] = [date
,
1371 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1373 rollingData
[i
] = [date
, [0, 0, 0]];
1376 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1377 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1380 rollingData
[i
] = [date
, mult
* value
];
1383 } else if (this.attr_("customBars")) {
1388 for (var i
= 0; i
< originalData
.length
; i
++) {
1389 var data
= originalData
[i
][1];
1391 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1393 if (y
!= null && !isNaN(y
)) {
1399 if (i
- rollPeriod
>= 0) {
1400 var prev
= originalData
[i
- rollPeriod
];
1401 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1408 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1409 1.0 * (mid
- low
) / count
,
1410 1.0 * (high
- mid
) / count
]];
1413 // Calculate the rolling average for the first rollPeriod - 1 points where
1414 // there is not enough data to roll over the full number of days
1415 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1416 if (!this.attr_("errorBars")){
1417 if (rollPeriod
== 1) {
1418 return originalData
;
1421 for (var i
= 0; i
< originalData
.length
; i
++) {
1424 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1425 var y
= originalData
[j
][1];
1426 if (y
== null || isNaN(y
)) continue;
1428 sum
+= originalData
[j
][1];
1431 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1433 rollingData
[i
] = [originalData
[i
][0], null];
1438 for (var i
= 0; i
< originalData
.length
; i
++) {
1442 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1443 var y
= originalData
[j
][1][0];
1444 if (y
== null || isNaN(y
)) continue;
1446 sum
+= originalData
[j
][1][0];
1447 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1450 var stddev
= Math
.sqrt(variance
) / num_ok
;
1451 rollingData
[i
] = [originalData
[i
][0],
1452 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1454 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1464 * Parses a date, returning the number of milliseconds since epoch. This can be
1465 * passed in as an xValueParser in the Dygraph constructor.
1466 * TODO(danvk): enumerate formats that this understands.
1467 * @param {String} A date in YYYYMMDD format.
1468 * @return {Number} Milliseconds since epoch.
1471 Dygraph
.dateParser
= function(dateStr
, self
) {
1474 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1475 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1476 while (dateStrSlashed
.search("-") != -1) {
1477 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1479 d
= Date
.parse(dateStrSlashed
);
1480 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1481 // TODO(danvk): remove support for this format. It's confusing.
1482 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1483 + "/" + dateStr
.substr(6,2);
1484 d
= Date
.parse(dateStrSlashed
);
1486 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1487 // "2009/07/12 12:34:56"
1488 d
= Date
.parse(dateStr
);
1491 if (!d
|| isNaN(d
)) {
1492 self
.error("Couldn't parse " + dateStr
+ " as a date");
1498 * Detects the type of the str (date or numeric) and sets the various
1499 * formatting attributes in this.attrs_ based on this type.
1500 * @param {String} str An x value.
1503 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1505 if (str
.indexOf('-') >= 0 ||
1506 str
.indexOf('/') >= 0 ||
1507 isNaN(parseFloat(str
))) {
1509 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1510 // TODO(danvk): remove support for this format.
1515 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1516 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1517 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1519 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1520 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1521 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1526 * Parses a string in a special csv format. We expect a csv file where each
1527 * line is a date point, and the first field in each line is the date string.
1528 * We also expect that all remaining fields represent series.
1529 * if the errorBars attribute is set, then interpret the fields as:
1530 * date, series1, stddev1, series2, stddev2, ...
1531 * @param {Array.<Object>} data See above.
1534 * @return Array.<Object> An array with one entry for each row. These entries
1535 * are an array of cells in that row. The first entry is the parsed x-value for
1536 * the row. The second, third, etc. are the y-values. These can take on one of
1537 * three forms, depending on the CSV and constructor parameters:
1539 * 2. [ value, stddev ]
1540 * 3. [ low value, center value, high value ]
1542 Dygraph
.prototype.parseCSV_
= function(data
) {
1544 var lines
= data
.split("\n");
1546 // Use the default delimiter or fall back to a tab if that makes sense.
1547 var delim
= this.attr_('delimiter');
1548 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1553 if (this.labelsFromCSV_
) {
1555 this.attrs_
.labels
= lines
[0].split(delim
);
1559 var defaultParserSet
= false; // attempt to auto-detect x value type
1560 var expectedCols
= this.attr_("labels").length
;
1561 var outOfOrder
= false;
1562 for (var i
= start
; i
< lines
.length
; i
++) {
1563 var line
= lines
[i
];
1564 if (line
.length
== 0) continue; // skip blank lines
1565 if (line
[0] == '#') continue; // skip comment lines
1566 var inFields
= line
.split(delim
);
1567 if (inFields
.length
< 2) continue;
1570 if (!defaultParserSet
) {
1571 this.detectTypeFromString_(inFields
[0]);
1572 xParser
= this.attr_("xValueParser");
1573 defaultParserSet
= true;
1575 fields
[0] = xParser(inFields
[0], this);
1577 // If fractions are expected, parse the numbers as "A/B
"
1578 if (this.fractions_) {
1579 for (var j = 1; j < inFields.length; j++) {
1580 // TODO(danvk): figure out an appropriate way to flag parse errors.
1581 var vals = inFields[j].split("/");
1582 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1584 } else if (this.attr_("errorBars
")) {
1585 // If there are error bars, values are (value, stddev) pairs
1586 for (var j = 1; j < inFields.length; j += 2)
1587 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1588 parseFloat(inFields[j + 1])];
1589 } else if (this.attr_("customBars
")) {
1590 // Bars are a low;center;high tuple
1591 for (var j = 1; j < inFields.length; j++) {
1592 var vals = inFields[j].split(";");
1593 fields[j] = [ parseFloat(vals[0]),
1594 parseFloat(vals[1]),
1595 parseFloat(vals[2]) ];
1598 // Values are just numbers
1599 for (var j = 1; j < inFields.length; j++) {
1600 fields[j] = parseFloat(inFields[j]);
1603 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1608 if (fields.length != expectedCols) {
1609 this.error("Number of columns
in line
" + i + " (" + fields.length +
1610 ") does not agree
with number of
labels (" + expectedCols +
1616 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1617 ret.sort(function(a,b) { return a[0] - b[0] });
1624 * The user has provided their data as a pre-packaged JS array. If the x values
1625 * are numeric, this is the same as dygraphs' internal format. If the x values
1626 * are dates, we need to convert them from Date objects to ms since epoch.
1627 * @param {Array.<Object>} data
1628 * @return {Array.<Object>} data with numeric x values.
1630 Dygraph.prototype.parseArray_ = function(data) {
1631 // Peek at the first x value to see if it's numeric.
1632 if (data.length == 0) {
1633 this.error("Can
't plot empty data set");
1636 if (data[0].length == 0) {
1637 this.error("Data set cannot contain an empty row");
1641 if (this.attr_("labels") == null) {
1642 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1643 "in the options parameter");
1644 this.attrs_.labels = [ "X" ];
1645 for (var i = 1; i < data[0].length; i++) {
1646 this.attrs_.labels.push("Y" + i);
1650 if (Dygraph.isDateLike(data[0][0])) {
1651 // Some intelligent defaults for a date x-axis.
1652 this.attrs_.xValueFormatter = Dygraph.dateString_;
1653 this.attrs_.xTicker = Dygraph.dateTicker;
1655 // Assume they're all dates
.
1656 var parsedData
= Dygraph
.clone(data
);
1657 for (var i
= 0; i
< data
.length
; i
++) {
1658 if (parsedData
[i
].length
== 0) {
1659 this.error("Row " << (1 + i
) << " of data is empty");
1662 if (parsedData
[i
][0] == null
1663 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1664 this.error("x value in row " << (1 + i
) << " is not a Date");
1667 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1671 // Some intelligent defaults for a numeric x-axis.
1672 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1673 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1679 * Parses a DataTable object from gviz.
1680 * The data is expected to have a first column that is either a date or a
1681 * number. All subsequent columns must be numbers. If there is a clear mismatch
1682 * between this.xValueParser_ and the type of the first column, it will be
1683 * fixed. Returned value is in the same format as return value of parseCSV_.
1684 * @param {Array.<Object>} data See above.
1687 Dygraph
.prototype.parseDataTable_
= function(data
) {
1688 var cols
= data
.getNumberOfColumns();
1689 var rows
= data
.getNumberOfRows();
1691 // Read column labels
1693 for (var i
= 0; i
< cols
; i
++) {
1694 labels
.push(data
.getColumnLabel(i
));
1695 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1697 this.attrs_
.labels
= labels
;
1698 cols
= labels
.length
;
1700 var indepType
= data
.getColumnType(0);
1701 if (indepType
== 'date' || indepType
== 'datetime') {
1702 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1703 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1704 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1705 } else if (indepType
== 'number') {
1706 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1707 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1708 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1710 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1711 "column 1 of DataTable input (Got '" + indepType
+ "')");
1716 var outOfOrder
= false;
1717 for (var i
= 0; i
< rows
; i
++) {
1719 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1720 data
.getValue(i
, 0) === null) {
1721 this.warning("Ignoring row " + i
+
1722 " of DataTable because of undefined or null first column.");
1726 if (indepType
== 'date' || indepType
== 'datetime') {
1727 row
.push(data
.getValue(i
, 0).getTime());
1729 row
.push(data
.getValue(i
, 0));
1731 if (!this.attr_("errorBars")) {
1732 for (var j
= 1; j
< cols
; j
++) {
1733 row
.push(data
.getValue(i
, j
));
1736 for (var j
= 0; j
< cols
- 1; j
++) {
1737 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1740 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1747 this.warn("DataTable is out of order; order it correctly to speed loading.");
1748 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1753 // These functions are all based on MochiKit.
1754 Dygraph
.update
= function (self
, o
) {
1755 if (typeof(o
) != 'undefined' && o
!== null) {
1757 if (o
.hasOwnProperty(k
)) {
1765 Dygraph
.isArrayLike
= function (o
) {
1766 var typ
= typeof(o
);
1768 (typ
!= 'object' && !(typ
== 'function' &&
1769 typeof(o
.item
) == 'function')) ||
1771 typeof(o
.length
) != 'number' ||
1779 Dygraph
.isDateLike
= function (o
) {
1780 if (typeof(o
) != "object" || o
=== null ||
1781 typeof(o
.getTime
) != 'function') {
1787 Dygraph
.clone
= function(o
) {
1788 // TODO(danvk): figure out how MochiKit's version works
1790 for (var i
= 0; i
< o
.length
; i
++) {
1791 if (Dygraph
.isArrayLike(o
[i
])) {
1792 r
.push(Dygraph
.clone(o
[i
]));
1802 * Get the CSV data. If it's in a function, call that function. If it's in a
1803 * file, do an XMLHttpRequest to get it.
1806 Dygraph
.prototype.start_
= function() {
1807 if (typeof this.file_
== 'function') {
1808 // CSV string. Pretend we got it via XHR.
1809 this.loadedEvent_(this.file_());
1810 } else if (Dygraph
.isArrayLike(this.file_
)) {
1811 this.rawData_
= this.parseArray_(this.file_
);
1812 this.drawGraph_(this.rawData_
);
1813 } else if (typeof this.file_
== 'object' &&
1814 typeof this.file_
.getColumnRange
== 'function') {
1815 // must be a DataTable from gviz.
1816 this.rawData_
= this.parseDataTable_(this.file_
);
1817 this.drawGraph_(this.rawData_
);
1818 } else if (typeof this.file_
== 'string') {
1819 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1820 if (this.file_
.indexOf('\n') >= 0) {
1821 this.loadedEvent_(this.file_
);
1823 var req
= new XMLHttpRequest();
1825 req
.onreadystatechange
= function () {
1826 if (req
.readyState
== 4) {
1827 if (req
.status
== 200) {
1828 caller
.loadedEvent_(req
.responseText
);
1833 req
.open("GET", this.file_
, true);
1837 this.error("Unknown data format: " + (typeof this.file_
));
1842 * Changes various properties of the graph. These can include:
1844 * <li>file: changes the source data for the graph</li>
1845 * <li>errorBars: changes whether the data contains stddev</li>
1847 * @param {Object} attrs The new properties and values
1849 Dygraph
.prototype.updateOptions
= function(attrs
) {
1850 // TODO(danvk): this is a mess. Rethink this function.
1851 if (attrs
.rollPeriod
) {
1852 this.rollPeriod_
= attrs
.rollPeriod
;
1854 if (attrs
.dateWindow
) {
1855 this.dateWindow_
= attrs
.dateWindow
;
1857 if (attrs
.valueRange
) {
1858 this.valueRange_
= attrs
.valueRange
;
1860 Dygraph
.update(this.user_attrs_
, attrs
);
1862 this.labelsFromCSV_
= (this.attr_("labels") == null);
1864 // TODO(danvk): this doesn't match the constructor logic
1865 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1866 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1867 this.file_
= attrs
['file'];
1870 this.drawGraph_(this.rawData_
);
1875 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1876 * containing div (which has presumably changed size since the dygraph was
1877 * instantiated. If the width/height are specified, the div will be resized.
1879 * This is far more efficient than destroying and re-instantiating a
1880 * Dygraph, since it doesn't have to reparse the underlying data.
1882 * @param {Number} width Width (in pixels)
1883 * @param {Number} height Height (in pixels)
1885 Dygraph
.prototype.resize
= function(width
, height
) {
1886 if ((width
=== null) != (height
=== null)) {
1887 this.warn("Dygraph.resize() should be called with zero parameters or " +
1888 "two non-NULL parameters. Pretending it was zero.");
1889 width
= height
= null;
1892 // TODO(danvk): there should be a clear() method.
1893 this.maindiv_
.innerHTML
= "";
1894 this.attrs_
.labelsDiv
= null;
1897 this.maindiv_
.style
.width
= width
+ "px";
1898 this.maindiv_
.style
.height
= height
+ "px";
1899 this.width_
= width
;
1900 this.height_
= height
;
1902 this.width_
= this.maindiv_
.offsetWidth
;
1903 this.height_
= this.maindiv_
.offsetHeight
;
1906 this.createInterface_();
1907 this.drawGraph_(this.rawData_
);
1911 * Adjusts the number of days in the rolling average. Updates the graph to
1912 * reflect the new averaging period.
1913 * @param {Number} length Number of days over which to average the data.
1915 Dygraph
.prototype.adjustRoll
= function(length
) {
1916 this.rollPeriod_
= length
;
1917 this.drawGraph_(this.rawData_
);
1921 * Returns a boolean array of visibility statuses.
1923 Dygraph
.prototype.visibility
= function() {
1924 // Do lazy-initialization, so that this happens after we know the number of
1926 if (!this.attr_("visibility")) {
1927 this.attrs_
["visibility"] = [];
1929 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
1930 this.attr_("visibility").push(true);
1932 return this.attr_("visibility");
1936 * Changes the visiblity of a series.
1938 Dygraph
.prototype.setVisibility
= function(num
, value
) {
1939 var x
= this.visibility();
1940 if (num
< 0 && num
>= x
.length
) {
1941 this.warn("invalid series number in setVisibility: " + num
);
1944 this.drawGraph_(this.rawData_
);
1949 * Create a new canvas element. This is more complex than a simple
1950 * document.createElement("canvas") because of IE and excanvas.
1952 Dygraph
.createCanvas
= function() {
1953 var canvas
= document
.createElement("canvas");
1955 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1957 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1965 * A wrapper around Dygraph that implements the gviz API.
1966 * @param {Object} container The DOM object the visualization should live in.
1968 Dygraph
.GVizChart
= function(container
) {
1969 this.container
= container
;
1972 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1973 this.container
.innerHTML
= '';
1974 this.date_graph
= new Dygraph(this.container
, data
, options
);
1977 // Older pages may still use this name.
1978 DateGraph
= Dygraph
;