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
121 hideOverlayOnMouseOut
: true
124 // Various logging levels.
130 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
131 // Labels is no longer a constructor parameter, since it's typically set
132 // directly from the data source. It also conains a name for the x-axis,
133 // which the previous constructor form did not.
134 if (labels
!= null) {
135 var new_labels
= ["Date"];
136 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
137 Dygraph
.update(attrs
, { 'labels': new_labels
});
139 this.__init__(div
, file
, attrs
);
143 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
144 * and interaction <canvas> inside of it. See the constructor for details
146 * @param {String | Function} file Source data
147 * @param {Array.<String>} labels Names of the data series
148 * @param {Object} attrs Miscellaneous other options
151 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
152 // Support two-argument constructor
153 if (attrs
== null) { attrs
= {}; }
155 // Copy the important bits into the object
156 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
159 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
160 this.previousVerticalX_
= -1;
161 this.fractions_
= attrs
.fractions
|| false;
162 this.dateWindow_
= attrs
.dateWindow
|| null;
163 this.valueRange_
= attrs
.valueRange
|| null;
164 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
165 this.is_initial_draw_
= true;
167 // Clear the div. This ensure that, if multiple dygraphs are passed the same
168 // div, then only one will be drawn.
171 // If the div isn't already sized then inherit from our attrs or
172 // give it a default size.
173 if (div
.style
.width
== '') {
174 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
176 if (div
.style
.height
== '') {
177 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
179 this.width_
= parseInt(div
.style
.width
, 10);
180 this.height_
= parseInt(div
.style
.height
, 10);
181 // The div might have been specified as percent of the current window size,
182 // convert that to an appropriate number of pixels.
183 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
184 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
185 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
187 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
188 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
191 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
192 if (attrs
['stackedGraph']) {
193 attrs
['fillGraph'] = true;
194 // TODO(nikhilk): Add any other stackedGraph checks here.
197 // Dygraphs has many options, some of which interact with one another.
198 // To keep track of everything, we maintain two sets of options:
200 // this.user_attrs_ only options explicitly set by the user.
201 // this.attrs_ defaults, options derived from user_attrs_, data.
203 // Options are then accessed this.attr_('attr'), which first looks at
204 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
205 // defaults without overriding behavior that the user specifically asks for.
206 this.user_attrs_
= {};
207 Dygraph
.update(this.user_attrs_
, attrs
);
210 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
212 // Make a note of whether labels will be pulled from the CSV file.
213 this.labelsFromCSV_
= (this.attr_("labels") == null);
215 // Create the containing DIV and other interactive elements
216 this.createInterface_();
221 Dygraph
.prototype.attr_
= function(name
) {
222 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
223 return this.user_attrs_
[name
];
224 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
225 return this.attrs_
[name
];
231 // TODO(danvk): any way I can get the line numbers to be this.warn call?
232 Dygraph
.prototype.log
= function(severity
, message
) {
233 if (typeof(console
) != 'undefined') {
236 console
.debug('dygraphs: ' + message
);
239 console
.info('dygraphs: ' + message
);
241 case Dygraph
.WARNING
:
242 console
.warn('dygraphs: ' + message
);
245 console
.error('dygraphs: ' + message
);
250 Dygraph
.prototype.info
= function(message
) {
251 this.log(Dygraph
.INFO
, message
);
253 Dygraph
.prototype.warn
= function(message
) {
254 this.log(Dygraph
.WARNING
, message
);
256 Dygraph
.prototype.error
= function(message
) {
257 this.log(Dygraph
.ERROR
, message
);
261 * Returns the current rolling period, as set by the user or an option.
262 * @return {Number} The number of days in the rolling window
264 Dygraph
.prototype.rollPeriod
= function() {
265 return this.rollPeriod_
;
269 * Returns the currently-visible x-range. This can be affected by zooming,
270 * panning or a call to updateOptions.
271 * Returns a two-element array: [left, right].
272 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
274 Dygraph
.prototype.xAxisRange
= function() {
275 if (this.dateWindow_
) return this.dateWindow_
;
277 // The entire chart is visible.
278 var left
= this.rawData_
[0][0];
279 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
280 return [left
, right
];
283 Dygraph
.addEvent
= function(el
, evt
, fn
) {
284 var normed_fn
= function(e
) {
285 if (!e
) var e
= window
.event
;
288 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
289 el
.addEventListener(evt
, normed_fn
, false);
291 el
.attachEvent('on' + evt
, normed_fn
);
296 * Generates interface elements for the Dygraph: a containing div, a div to
297 * display the current point, and a textbox to adjust the rolling average
298 * period. Also creates the Renderer/Layout elements.
301 Dygraph
.prototype.createInterface_
= function() {
302 // Create the all-enclosing graph div
303 var enclosing
= this.maindiv_
;
305 this.graphDiv
= document
.createElement("div");
306 this.graphDiv
.style
.width
= this.width_
+ "px";
307 this.graphDiv
.style
.height
= this.height_
+ "px";
308 enclosing
.appendChild(this.graphDiv
);
310 // Create the canvas for interactive parts of the chart.
311 // this.canvas_ = document.createElement("canvas");
312 this.canvas_
= Dygraph
.createCanvas();
313 this.canvas_
.style
.position
= "absolute";
314 this.canvas_
.width
= this.width_
;
315 this.canvas_
.height
= this.height_
;
316 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
317 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
318 this.graphDiv
.appendChild(this.canvas_
);
320 // ... and for static parts of the chart.
321 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
324 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
325 dygraph
.mouseMove_(e
);
327 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
328 dygraph
.mouseOut_(e
);
331 // Create the grapher
332 // TODO(danvk): why does the Layout need its own set of options?
333 this.layoutOptions_
= { 'xOriginIsZero': false };
334 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
335 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
336 Dygraph
.update(this.layoutOptions_
, {
337 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
339 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
341 // TODO(danvk): why does the Renderer need its own set of options?
342 this.renderOptions_
= { colorScheme
: this.colors_
,
344 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
345 Dygraph
.update(this.renderOptions_
, this.attrs_
);
346 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
347 this.plotter_
= new DygraphCanvasRenderer(this,
348 this.hidden_
, this.layout_
,
349 this.renderOptions_
);
351 this.createStatusMessage_();
352 this.createRollInterface_();
353 this.createDragInterface_();
357 * Detach DOM elements in the dygraph and null out all data references.
358 * Calling this when you're done with a dygraph can dramatically reduce memory
359 * usage. See, e.g., the tests/perf.html example.
361 Dygraph
.prototype.destroy
= function() {
362 var removeRecursive
= function(node
) {
363 while (node
.hasChildNodes()) {
364 removeRecursive(node
.firstChild
);
365 node
.removeChild(node
.firstChild
);
368 removeRecursive(this.maindiv_
);
370 var nullOut
= function(obj
) {
372 if (typeof(obj
[n
]) === 'object') {
378 // These may not all be necessary, but it can't hurt...
379 nullOut(this.layout_
);
380 nullOut(this.plotter_
);
385 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
386 * this particular canvas. All Dygraph work is done on this.canvas_.
387 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
388 * @return {Object} The newly-created canvas
391 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
392 // var h = document.createElement("canvas");
393 var h
= Dygraph
.createCanvas();
394 h
.style
.position
= "absolute";
395 h
.style
.top
= canvas
.style
.top
;
396 h
.style
.left
= canvas
.style
.left
;
397 h
.width
= this.width_
;
398 h
.height
= this.height_
;
399 h
.style
.width
= this.width_
+ "px"; // for IE
400 h
.style
.height
= this.height_
+ "px"; // for IE
401 this.graphDiv
.appendChild(h
);
405 // Taken from MochiKit.Color
406 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
410 if (saturation
=== 0) {
415 var i
= Math
.floor(hue
* 6);
416 var f
= (hue
* 6) - i
;
417 var p
= value
* (1 - saturation
);
418 var q
= value
* (1 - (saturation
* f
));
419 var t
= value
* (1 - (saturation
* (1 - f
)));
421 case 1: red
= q
; green
= value
; blue
= p
; break;
422 case 2: red
= p
; green
= value
; blue
= t
; break;
423 case 3: red
= p
; green
= q
; blue
= value
; break;
424 case 4: red
= t
; green
= p
; blue
= value
; break;
425 case 5: red
= value
; green
= p
; blue
= q
; break;
426 case 6: // fall through
427 case 0: red
= value
; green
= t
; blue
= p
; break;
430 red
= Math
.floor(255 * red
+ 0.5);
431 green
= Math
.floor(255 * green
+ 0.5);
432 blue
= Math
.floor(255 * blue
+ 0.5);
433 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
438 * Generate a set of distinct colors for the data series. This is done with a
439 * color wheel. Saturation/Value are customizable, and the hue is
440 * equally-spaced around the color wheel. If a custom set of colors is
441 * specified, that is used instead.
444 Dygraph
.prototype.setColors_
= function() {
445 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
446 // away with this.renderOptions_.
447 var num
= this.attr_("labels").length
- 1;
449 var colors
= this.attr_('colors');
451 var sat
= this.attr_('colorSaturation') || 1.0;
452 var val
= this.attr_('colorValue') || 0.5;
453 for (var i
= 1; i
<= num
; i
++) {
454 if (!this.visibility()[i
-1]) continue;
455 // alternate colors for high contrast.
456 var idx
= i
- parseInt(i
% 2 ? i
/ 2 : (i - num)/2, 10);
457 var hue
= (1.0 * idx
/ (1 + num
));
458 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
461 for (var i
= 0; i
< num
; i
++) {
462 if (!this.visibility()[i
]) continue;
463 var colorStr
= colors
[i
% colors
.length
];
464 this.colors_
.push(colorStr
);
468 // TODO(danvk): update this w/r
/t/ the
new options system
.
469 this.renderOptions_
.colorScheme
= this.colors_
;
470 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
471 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
472 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
476 * Return the list of colors. This is either the list of colors passed in the
477 * attributes, or the autogenerated list of rgb(r,g,b) strings.
478 * @return {Array<string>} The list of colors.
480 Dygraph
.prototype.getColors
= function() {
484 // The following functions are from quirksmode.org with a modification for Safari from
485 // http://blog.firetree.net/2005/07/04/javascript-find-position/
486 // http://www.quirksmode.org/js
/findpos
.html
487 Dygraph
.findPosX
= function(obj
) {
492 curleft
+= obj
.offsetLeft
;
493 if(!obj
.offsetParent
)
495 obj
= obj
.offsetParent
;
502 Dygraph
.findPosY
= function(obj
) {
507 curtop
+= obj
.offsetTop
;
508 if(!obj
.offsetParent
)
510 obj
= obj
.offsetParent
;
520 * Create the div that contains information on the selected point(s)
521 * This goes in the top right of the canvas, unless an external div has already
525 Dygraph
.prototype.createStatusMessage_
= function(){
526 if (!this.attr_("labelsDiv")) {
527 var divWidth
= this.attr_('labelsDivWidth');
529 "position": "absolute",
532 "width": divWidth
+ "px",
534 "left": (this.width_
- divWidth
- 2) + "px",
535 "background": "white",
537 "overflow": "hidden"};
538 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
539 var div
= document
.createElement("div");
540 for (var name
in messagestyle
) {
541 if (messagestyle
.hasOwnProperty(name
)) {
542 div
.style
[name
] = messagestyle
[name
];
545 this.graphDiv
.appendChild(div
);
546 this.attrs_
.labelsDiv
= div
;
551 * Create the text box to adjust the averaging period
552 * @return {Object} The newly-created text box
555 Dygraph
.prototype.createRollInterface_
= function() {
556 var display
= this.attr_('showRoller') ? "block" : "none";
557 var textAttr
= { "position": "absolute",
559 "top": (this.plotter_
.area
.h
- 25) + "px",
560 "left": (this.plotter_
.area
.x
+ 1) + "px",
563 var roller
= document
.createElement("input");
564 roller
.type
= "text";
566 roller
.value
= this.rollPeriod_
;
567 for (var name
in textAttr
) {
568 if (textAttr
.hasOwnProperty(name
)) {
569 roller
.style
[name
] = textAttr
[name
];
573 var pa
= this.graphDiv
;
574 pa
.appendChild(roller
);
576 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
580 // These functions are taken from MochiKit.Signal
581 Dygraph
.pageX
= function(e
) {
583 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
586 var b
= document
.body
;
588 (de
.scrollLeft
|| b
.scrollLeft
) -
589 (de
.clientLeft
|| 0);
593 Dygraph
.pageY
= function(e
) {
595 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
598 var b
= document
.body
;
600 (de
.scrollTop
|| b
.scrollTop
) -
606 * Set up all the mouse handlers needed to capture dragging behavior for zoom
610 Dygraph
.prototype.createDragInterface_
= function() {
613 // Tracks whether the mouse is down right now
614 var isZooming
= false;
615 var isPanning
= false;
616 var dragStartX
= null;
617 var dragStartY
= null;
621 var draggingDate
= null;
622 var dateRange
= null;
624 // Utility function to convert page-wide coordinates to canvas coords
627 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
628 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
630 // Draw zoom rectangles when the mouse is down and the user moves around
631 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
633 dragEndX
= getX(event
);
634 dragEndY
= getY(event
);
636 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
638 } else if (isPanning
) {
639 dragEndX
= getX(event
);
640 dragEndY
= getY(event
);
642 // Want to have it so that:
643 // 1. draggingDate appears at dragEndX
644 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
646 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
647 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
648 self
.drawGraph_(self
.rawData_
);
652 // Track the beginning of drag events
653 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
654 px
= Dygraph
.findPosX(self
.canvas_
);
655 py
= Dygraph
.findPosY(self
.canvas_
);
656 dragStartX
= getX(event
);
657 dragStartY
= getY(event
);
659 if (event
.altKey
|| event
.shiftKey
) {
660 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
662 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
663 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
670 // If the user releases the mouse button during a drag, but not over the
671 // canvas, then it doesn't count as a zooming action.
672 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
673 if (isZooming
|| isPanning
) {
686 // Temporarily cancel the dragging event when the mouse leaves the graph
687 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
694 // If the mouse is released on the canvas during a drag event, then it's a
695 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
696 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
699 dragEndX
= getX(event
);
700 dragEndY
= getY(event
);
701 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
702 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
704 if (regionWidth
< 2 && regionHeight
< 2 &&
705 self
.attr_('clickCallback') != null &&
706 self
.lastx_
!= undefined
) {
707 // TODO(danvk): pass along more info about the points.
708 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
711 if (regionWidth
>= 10) {
712 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
713 Math
.max(dragStartX
, dragEndX
));
715 self
.canvas_
.getContext("2d").clearRect(0, 0,
717 self
.canvas_
.height
);
731 // Double-clicking zooms back out
732 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
733 if (self
.dateWindow_
== null) return;
734 self
.dateWindow_
= null;
735 self
.drawGraph_(self
.rawData_
);
736 var minDate
= self
.rawData_
[0][0];
737 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
738 if (self
.attr_("zoomCallback")) {
739 self
.attr_("zoomCallback")(minDate
, maxDate
);
745 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
746 * up any previous zoom rectangles that were drawn. This could be optimized to
747 * avoid extra redrawing, but it's tricky to avoid interactions with the status
749 * @param {Number} startX The X position where the drag started, in canvas
751 * @param {Number} endX The current X position of the drag, in canvas coords.
752 * @param {Number} prevEndX The value of endX on the previous call to this
753 * function. Used to avoid excess redrawing
756 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
757 var ctx
= this.canvas_
.getContext("2d");
759 // Clean up from the previous rect if necessary
761 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
762 Math
.abs(startX
- prevEndX
), this.height_
);
765 // Draw a light-grey rectangle to show the new viewing area
766 if (endX
&& startX
) {
767 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
768 ctx
.fillRect(Math
.min(startX
, endX
), 0,
769 Math
.abs(endX
- startX
), this.height_
);
774 * Zoom to something containing [lowX, highX]. These are pixel coordinates
775 * in the canvas. The exact zoom window may be slightly larger if there are no
776 * data points near lowX or highX. This function redraws the graph.
777 * @param {Number} lowX The leftmost pixel value that should be visible.
778 * @param {Number} highX The rightmost pixel value that should be visible.
781 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
782 // Find the earliest and latest dates contained in this canvasx range.
783 var points
= this.layout_
.points
;
786 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
787 for (var i
= 0; i
< points
.length
; i
++) {
788 var cx
= points
[i
].canvasx
;
789 var x
= points
[i
].xval
;
790 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
791 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
793 // Use the extremes if either is missing
794 if (minDate
== null) minDate
= points
[0].xval
;
795 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
797 this.dateWindow_
= [minDate
, maxDate
];
798 this.drawGraph_(this.rawData_
);
799 if (this.attr_("zoomCallback")) {
800 this.attr_("zoomCallback")(minDate
, maxDate
);
805 * When the mouse moves in the canvas, display information about a nearby data
806 * point and draw dots over those points in the data series. This function
807 * takes care of cleanup of previously-drawn dots.
808 * @param {Object} event The mousemove event from the browser.
811 Dygraph
.prototype.mouseMove_
= function(event
) {
812 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
813 var points
= this.layout_
.points
;
818 // Loop through all the points and find the date nearest to our current
820 var minDist
= 1e+100;
822 for (var i
= 0; i
< points
.length
; i
++) {
823 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
824 if (dist
> minDist
) break;
828 if (idx
>= 0) lastx
= points
[idx
].xval
;
829 // Check that you can really highlight the last day's data
830 if (canvasx
> points
[points
.length
-1].canvasx
)
831 lastx
= points
[points
.length
-1].xval
;
833 // Extract the points we've selected
834 this.selPoints_
= [];
835 for (var i
= 0; i
< points
.length
; i
++) {
836 if (points
[i
].xval
== lastx
) {
837 this.selPoints_
.push(points
[i
]);
841 if (this.attr_("highlightCallback")) {
842 var px
= this.lastHighlightCallbackX
;
843 if (px
!== null && lastx
!= px
) {
844 // only fire if the selected point has changed.
845 this.lastHighlightCallbackX
= lastx
;
846 if (!this.attr_("stackedGraph")) {
847 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
849 // "unstack" the points.
850 var callbackPoints
= this.selPoints_
.map(
851 function(p
) { return {xval
: p
.xval
, yval
: p
.yval
, name
: p
.name
} });
852 var cumulative_sum
= 0;
853 for (var j
= callbackPoints
.length
- 1; j
>= 0; j
--) {
854 callbackPoints
[j
].yval
-= cumulative_sum
;
855 cumulative_sum
+= callbackPoints
[j
].yval
;
857 this.attr_("highlightCallback")(event
, lastx
, callbackPoints
);
862 // Clear the previously drawn vertical, if there is one
863 var circleSize
= this.attr_('highlightCircleSize');
864 var ctx
= this.canvas_
.getContext("2d");
865 if (this.previousVerticalX_
>= 0) {
866 var px
= this.previousVerticalX_
;
867 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
870 var isOK
= function(x
) { return x
&& !isNaN(x
); };
872 if (this.selPoints_
.length
> 0) {
873 var canvasx
= this.selPoints_
[0].canvasx
;
875 // Set the status message to indicate the selected point(s)
876 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
877 var clen
= this.colors_
.length
;
878 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
879 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
880 if (this.attr_("labelsSeparateLines")) {
883 var point
= this.selPoints_
[i
];
884 var c
= new RGBColor(this.colors_
[i
%clen
]);
885 replace
+= " <b><font color='" + c
.toHex() + "'>"
886 + point
.name
+ "</font></b>:"
887 + this.round_(point
.yval
, 2);
889 this.attr_("labelsDiv").innerHTML
= replace
;
891 // Save last x position for callbacks.
894 // Draw colored circles over the center of each selected point
896 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
897 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
899 ctx
.fillStyle
= this.colors_
[i
%clen
];
900 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
901 0, 2 * Math
.PI
, false);
906 this.previousVerticalX_
= canvasx
;
911 * The mouse has left the canvas. Clear out whatever artifacts remain
912 * @param {Object} event the mouseout event from the browser.
915 Dygraph
.prototype.mouseOut_
= function(event
) {
916 if (this.attr_("hideOverlayOnMouseOut")) {
917 // Get rid of the overlay data
918 var ctx
= this.canvas_
.getContext("2d");
919 ctx
.clearRect(0, 0, this.width_
, this.height_
);
920 this.attr_("labelsDiv").innerHTML
= "";
924 Dygraph
.zeropad
= function(x
) {
925 if (x
< 10) return "0" + x
; else return "" + x
;
929 * Return a string version of the hours, minutes and seconds portion of a date.
930 * @param {Number} date The JavaScript date (ms since epoch)
931 * @return {String} A time of the form "HH:MM:SS"
934 Dygraph
.prototype.hmsString_
= function(date
) {
935 var zeropad
= Dygraph
.zeropad
;
936 var d
= new Date(date
);
937 if (d
.getSeconds()) {
938 return zeropad(d
.getHours()) + ":" +
939 zeropad(d
.getMinutes()) + ":" +
940 zeropad(d
.getSeconds());
942 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
947 * Convert a JS date (millis since epoch) to YYYY/MM/DD
948 * @param {Number} date The JavaScript date (ms since epoch)
949 * @return {String} A date of the form "YYYY/MM/DD"
951 * TODO(danvk): why is this part of the prototype?
953 Dygraph
.dateString_
= function(date
, self
) {
954 var zeropad
= Dygraph
.zeropad
;
955 var d
= new Date(date
);
958 var year
= "" + d
.getFullYear();
959 // Get a 0 padded month string
960 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
961 // Get a 0 padded day string
962 var day
= zeropad(d
.getDate());
965 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
966 if (frac
) ret
= " " + self
.hmsString_(date
);
968 return year
+ "/" + month + "/" + day
+ ret
;
972 * Round a number to the specified number of digits past the decimal point.
973 * @param {Number} num The number to round
974 * @param {Number} places The number of decimals to which to round
975 * @return {Number} The rounded number
978 Dygraph
.prototype.round_
= function(num
, places
) {
979 var shift
= Math
.pow(10, places
);
980 return Math
.round(num
* shift
)/shift
;
984 * Fires when there's data available to be graphed.
985 * @param {String} data Raw CSV data to be plotted
988 Dygraph
.prototype.loadedEvent_
= function(data
) {
989 this.rawData_
= this.parseCSV_(data
);
990 this.drawGraph_(this.rawData_
);
993 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
994 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
995 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
998 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1001 Dygraph
.prototype.addXTicks_
= function() {
1002 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1003 var startDate
, endDate
;
1004 if (this.dateWindow_
) {
1005 startDate
= this.dateWindow_
[0];
1006 endDate
= this.dateWindow_
[1];
1008 startDate
= this.rawData_
[0][0];
1009 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1012 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1013 this.layout_
.updateOptions({xTicks
: xTicks
});
1016 // Time granularity enumeration
1017 Dygraph
.SECONDLY
= 0;
1018 Dygraph
.TWO_SECONDLY
= 1;
1019 Dygraph
.FIVE_SECONDLY
= 2;
1020 Dygraph
.TEN_SECONDLY
= 3;
1021 Dygraph
.THIRTY_SECONDLY
= 4;
1022 Dygraph
.MINUTELY
= 5;
1023 Dygraph
.TWO_MINUTELY
= 6;
1024 Dygraph
.FIVE_MINUTELY
= 7;
1025 Dygraph
.TEN_MINUTELY
= 8;
1026 Dygraph
.THIRTY_MINUTELY
= 9;
1027 Dygraph
.HOURLY
= 10;
1028 Dygraph
.TWO_HOURLY
= 11;
1029 Dygraph
.SIX_HOURLY
= 12;
1031 Dygraph
.WEEKLY
= 14;
1032 Dygraph
.MONTHLY
= 15;
1033 Dygraph
.QUARTERLY
= 16;
1034 Dygraph
.BIANNUAL
= 17;
1035 Dygraph
.ANNUAL
= 18;
1036 Dygraph
.DECADAL
= 19;
1037 Dygraph
.NUM_GRANULARITIES
= 20;
1039 Dygraph
.SHORT_SPACINGS
= [];
1040 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1041 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1042 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1043 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1044 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1045 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1046 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1047 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1048 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1049 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1050 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1051 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1052 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1053 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1054 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1058 // If we used this time granularity, how many ticks would there be?
1059 // This is only an approximation, but it's generally good enough.
1061 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1062 if (granularity
< Dygraph
.MONTHLY
) {
1063 // Generate one tick mark for every fixed interval of time.
1064 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1065 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1067 var year_mod
= 1; // e.g. to only print one point every 10 years.
1068 var num_months
= 12;
1069 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1070 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1071 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1072 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1074 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1075 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1076 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1082 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1083 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1085 // Returns an array containing {v: millis, label: label} dictionaries.
1087 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1089 if (granularity
< Dygraph
.MONTHLY
) {
1090 // Generate one tick mark for every fixed interval of time.
1091 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1092 var format
= '%d%b'; // e.g. "1Jan"
1094 // Find a time less than start_time which occurs on a "nice" time boundary
1095 // for this granularity.
1096 var g
= spacing
/ 1000;
1097 var d
= new Date(start_time
);
1098 if (g
<= 60) { // seconds
1099 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1103 if (g
<= 60) { // minutes
1104 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1109 if (g
<= 24) { // days
1110 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1115 if (g
== 7) { // one week
1116 d
.setDate(d
.getDate() - d
.getDay());
1121 start_time
= d
.getTime();
1123 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1124 var d
= new Date(t
);
1125 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1126 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1127 // the extra hour covers DST problems.
1128 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1130 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1134 // Display a tick mark on the first of a set of months of each year.
1135 // Years get a tick mark iff y % year_mod == 0. This is useful for
1136 // displaying a tick mark once every 10 years, say, on long time scales.
1138 var year_mod
= 1; // e.g. to only print one point every 10 years.
1140 if (granularity
== Dygraph
.MONTHLY
) {
1141 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1142 } else if (granularity
== Dygraph
.QUARTERLY
) {
1143 months
= [ 0, 3, 6, 9 ];
1144 } else if (granularity
== Dygraph
.BIANNUAL
) {
1146 } else if (granularity
== Dygraph
.ANNUAL
) {
1148 } else if (granularity
== Dygraph
.DECADAL
) {
1153 var start_year
= new Date(start_time
).getFullYear();
1154 var end_year
= new Date(end_time
).getFullYear();
1155 var zeropad
= Dygraph
.zeropad
;
1156 for (var i
= start_year
; i
<= end_year
; i
++) {
1157 if (i
% year_mod
!= 0) continue;
1158 for (var j
= 0; j
< months
.length
; j
++) {
1159 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1160 var t
= Date
.parse(date_str
);
1161 if (t
< start_time
|| t
> end_time
) continue;
1162 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1172 * Add ticks to the x-axis based on a date range.
1173 * @param {Number} startDate Start of the date window (millis since epoch)
1174 * @param {Number} endDate End of the date window (millis since epoch)
1175 * @return {Array.<Object>} Array of {label, value} tuples.
1178 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1180 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1181 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1182 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1189 return self
.GetXAxis(startDate
, endDate
, chosen
);
1191 // TODO(danvk): signal error.
1196 * Add ticks when the x axis has numbers on it (instead of dates)
1197 * @param {Number} startDate Start of the date window (millis since epoch)
1198 * @param {Number} endDate End of the date window (millis since epoch)
1199 * @return {Array.<Object>} Array of {label, value} tuples.
1202 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1204 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1205 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1206 // The first spacing greater than pixelsPerYLabel is what we use.
1207 // TODO(danvk): version that works on a log scale.
1208 if (self
.attr_("labelsKMG2")) {
1209 var mults
= [1, 2, 4, 8];
1211 var mults
= [1, 2, 5];
1213 var scale
, low_val
, high_val
, nTicks
;
1214 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1215 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1216 for (var i
= -10; i
< 50; i
++) {
1217 if (self
.attr_("labelsKMG2")) {
1218 var base_scale
= Math
.pow(16, i
);
1220 var base_scale
= Math
.pow(10, i
);
1222 for (var j
= 0; j
< mults
.length
; j
++) {
1223 scale
= base_scale
* mults
[j
];
1224 low_val
= Math
.floor(minV
/ scale
) * scale
;
1225 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1226 nTicks
= (high_val
- low_val
) / scale
;
1227 var spacing
= self
.height_
/ nTicks
;
1228 // wish I could break out of both loops at once...
1229 if (spacing
> pixelsPerTick
) break;
1231 if (spacing
> pixelsPerTick
) break;
1234 // Construct labels for the ticks
1238 if (self
.attr_("labelsKMB")) {
1240 k_labels
= [ "K", "M", "B", "T" ];
1242 if (self
.attr_("labelsKMG2")) {
1243 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1245 k_labels
= [ "k", "M", "G", "T" ];
1248 for (var i
= 0; i
< nTicks
; i
++) {
1249 var tickV
= low_val
+ i
* scale
;
1250 var absTickV
= Math
.abs(tickV
);
1251 var label
= self
.round_(tickV
, 2);
1252 if (k_labels
.length
) {
1253 // Round up to an appropriate unit.
1255 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1256 if (absTickV
>= n
) {
1257 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1262 ticks
.push( {label
: label
, v
: tickV
} );
1268 * Adds appropriate ticks on the y-axis
1269 * @param {Number} minY The minimum Y value in the data set
1270 * @param {Number} maxY The maximum Y value in the data set
1273 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1274 // Set the number of ticks so that the labels are human-friendly.
1275 // TODO(danvk): make this an attribute as well.
1276 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1277 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1281 // Computes the range of the data series (including confidence intervals).
1282 // series is either [ [x1, y1], [x2, y2], ... ] or
1283 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1284 // Returns [low, high]
1285 Dygraph
.prototype.extremeValues_
= function(series
) {
1286 var minY
= null, maxY
= null;
1288 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1290 // With custom bars, maxY is the max of the high values.
1291 for (var j
= 0; j
< series
.length
; j
++) {
1292 var y
= series
[j
][1][0];
1294 var low
= y
- series
[j
][1][1];
1295 var high
= y
+ series
[j
][1][2];
1296 if (low
> y
) low
= y
; // this can happen with custom bars,
1297 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1298 if (maxY
== null || high
> maxY
) {
1301 if (minY
== null || low
< minY
) {
1306 for (var j
= 0; j
< series
.length
; j
++) {
1307 var y
= series
[j
][1];
1308 if (y
=== null || isNaN(y
)) continue;
1309 if (maxY
== null || y
> maxY
) {
1312 if (minY
== null || y
< minY
) {
1318 return [minY
, maxY
];
1322 * Update the graph with new data. Data is in the format
1323 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1324 * or, if errorBars=true,
1325 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1326 * @param {Array.<Object>} data The data (see above)
1329 Dygraph
.prototype.drawGraph_
= function(data
) {
1330 // This is used to set the second parameter to drawCallback, below.
1331 var is_initial_draw
= this.is_initial_draw_
;
1332 this.is_initial_draw_
= false;
1334 var minY
= null, maxY
= null;
1335 this.layout_
.removeAllDatasets();
1337 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1339 // For stacked series.
1340 var cumulative_y
= [];
1341 var stacked_datasets
= [];
1343 // Loop over all fields in the dataset
1345 for (var i
= 1; i
< data
[0].length
; i
++) {
1346 if (!this.visibility()[i
- 1]) continue;
1349 for (var j
= 0; j
< data
.length
; j
++) {
1350 var date
= data
[j
][0];
1351 series
[j
] = [date
, data
[j
][i
]];
1353 series
= this.rollingAverage(series
, this.rollPeriod_
);
1355 // Prune down to the desired range, if necessary (for zooming)
1356 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1357 if (this.dateWindow_
) {
1358 var low
= this.dateWindow_
[0];
1359 var high
= this.dateWindow_
[1];
1361 for (var k
= 0; k
< series
.length
; k
++) {
1362 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1363 pruned
.push(series
[k
]);
1369 var extremes
= this.extremeValues_(series
);
1370 var thisMinY
= extremes
[0];
1371 var thisMaxY
= extremes
[1];
1372 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1373 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1377 for (var j
=0; j
<series
.length
; j
++)
1378 vals
[j
] = [series
[j
][0],
1379 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1380 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1381 } else if (this.attr_("stackedGraph")) {
1383 var l
= series
.length
;
1385 for (var j
= 0; j
< l
; j
++) {
1386 if (cumulative_y
[series
[j
][0]] === undefined
)
1387 cumulative_y
[series
[j
][0]] = 0;
1389 actual_y
= series
[j
][1];
1390 cumulative_y
[series
[j
][0]] += actual_y
;
1392 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1394 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1395 maxY
= cumulative_y
[series
[j
][0]];
1397 stacked_datasets
.push([this.attr_("labels")[i
], vals
]);
1398 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1400 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1404 if (stacked_datasets
.length
> 0) {
1405 for (var i
= (stacked_datasets
.length
- 1); i
>= 0; i
--) {
1406 this.layout_
.addDataset(stacked_datasets
[i
][0], stacked_datasets
[i
][1]);
1410 // Use some heuristics to come up with a good maxY value, unless it's been
1411 // set explicitly by the user.
1412 if (this.valueRange_
!= null) {
1413 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1415 // This affects the calculation of span, below.
1416 if (this.attr_("includeZero") && minY
> 0) {
1420 // Add some padding and round up to an integer to be human-friendly.
1421 var span
= maxY
- minY
;
1422 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1423 if (span
== 0) { span
= maxY
; }
1424 var maxAxisY
= maxY
+ 0.1 * span
;
1425 var minAxisY
= minY
- 0.1 * span
;
1427 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1428 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1429 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1431 if (this.attr_("includeZero")) {
1432 if (maxY
< 0) maxAxisY
= 0;
1433 if (minY
> 0) minAxisY
= 0;
1436 this.addYTicks_(minAxisY
, maxAxisY
);
1441 // Tell PlotKit to use this new data and render itself
1442 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1443 this.layout_
.evaluateWithError();
1444 this.plotter_
.clear();
1445 this.plotter_
.render();
1446 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1447 this.canvas_
.height
);
1449 if (this.attr_("drawCallback") !== null) {
1450 this.attr_("drawCallback")(this, is_initial_draw
);
1455 * Calculates the rolling average of a data set.
1456 * If originalData is [label, val], rolls the average of those.
1457 * If originalData is [label, [, it's interpreted as [value, stddev]
1458 * and the roll is returned in the same form, with appropriately reduced
1459 * stddev for each value.
1460 * Note that this is where fractional input (i.e. '5/10') is converted into
1462 * @param {Array} originalData The data in the appropriate format (see above)
1463 * @param {Number} rollPeriod The number of days over which to average the data
1465 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1466 if (originalData
.length
< 2)
1467 return originalData
;
1468 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1469 var rollingData
= [];
1470 var sigma
= this.attr_("sigma");
1472 if (this.fractions_
) {
1474 var den
= 0; // numerator/denominator
1476 for (var i
= 0; i
< originalData
.length
; i
++) {
1477 num
+= originalData
[i
][1][0];
1478 den
+= originalData
[i
][1][1];
1479 if (i
- rollPeriod
>= 0) {
1480 num
-= originalData
[i
- rollPeriod
][1][0];
1481 den
-= originalData
[i
- rollPeriod
][1][1];
1484 var date
= originalData
[i
][0];
1485 var value
= den
? num
/ den
: 0.0;
1486 if (this.attr_("errorBars")) {
1487 if (this.wilsonInterval_
) {
1488 // For more details on this confidence interval, see:
1489 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1491 var p
= value
< 0 ? 0 : value
, n
= den
;
1492 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1493 var denom
= 1 + sigma
* sigma
/ den
;
1494 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1495 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1496 rollingData
[i
] = [date
,
1497 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1499 rollingData
[i
] = [date
, [0, 0, 0]];
1502 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1503 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1506 rollingData
[i
] = [date
, mult
* value
];
1509 } else if (this.attr_("customBars")) {
1514 for (var i
= 0; i
< originalData
.length
; i
++) {
1515 var data
= originalData
[i
][1];
1517 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1519 if (y
!= null && !isNaN(y
)) {
1525 if (i
- rollPeriod
>= 0) {
1526 var prev
= originalData
[i
- rollPeriod
];
1527 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1534 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1535 1.0 * (mid
- low
) / count
,
1536 1.0 * (high
- mid
) / count
]];
1539 // Calculate the rolling average for the first rollPeriod - 1 points where
1540 // there is not enough data to roll over the full number of days
1541 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1542 if (!this.attr_("errorBars")){
1543 if (rollPeriod
== 1) {
1544 return originalData
;
1547 for (var i
= 0; i
< originalData
.length
; i
++) {
1550 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1551 var y
= originalData
[j
][1];
1552 if (y
== null || isNaN(y
)) continue;
1554 sum
+= originalData
[j
][1];
1557 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1559 rollingData
[i
] = [originalData
[i
][0], null];
1564 for (var i
= 0; i
< originalData
.length
; i
++) {
1568 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1569 var y
= originalData
[j
][1][0];
1570 if (y
== null || isNaN(y
)) continue;
1572 sum
+= originalData
[j
][1][0];
1573 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1576 var stddev
= Math
.sqrt(variance
) / num_ok
;
1577 rollingData
[i
] = [originalData
[i
][0],
1578 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1580 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1590 * Parses a date, returning the number of milliseconds since epoch. This can be
1591 * passed in as an xValueParser in the Dygraph constructor.
1592 * TODO(danvk): enumerate formats that this understands.
1593 * @param {String} A date in YYYYMMDD format.
1594 * @return {Number} Milliseconds since epoch.
1597 Dygraph
.dateParser
= function(dateStr
, self
) {
1600 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1601 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1602 while (dateStrSlashed
.search("-") != -1) {
1603 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1605 d
= Date
.parse(dateStrSlashed
);
1606 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1607 // TODO(danvk): remove support for this format. It's confusing.
1608 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1609 + "/" + dateStr
.substr(6,2);
1610 d
= Date
.parse(dateStrSlashed
);
1612 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1613 // "2009/07/12 12:34:56"
1614 d
= Date
.parse(dateStr
);
1617 if (!d
|| isNaN(d
)) {
1618 self
.error("Couldn't parse " + dateStr
+ " as a date");
1624 * Detects the type of the str (date or numeric) and sets the various
1625 * formatting attributes in this.attrs_ based on this type.
1626 * @param {String} str An x value.
1629 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1631 if (str
.indexOf('-') >= 0 ||
1632 str
.indexOf('/') >= 0 ||
1633 isNaN(parseFloat(str
))) {
1635 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1636 // TODO(danvk): remove support for this format.
1641 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1642 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1643 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1645 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1646 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1647 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1652 * Parses a string in a special csv format. We expect a csv file where each
1653 * line is a date point, and the first field in each line is the date string.
1654 * We also expect that all remaining fields represent series.
1655 * if the errorBars attribute is set, then interpret the fields as:
1656 * date, series1, stddev1, series2, stddev2, ...
1657 * @param {Array.<Object>} data See above.
1660 * @return Array.<Object> An array with one entry for each row. These entries
1661 * are an array of cells in that row. The first entry is the parsed x-value for
1662 * the row. The second, third, etc. are the y-values. These can take on one of
1663 * three forms, depending on the CSV and constructor parameters:
1665 * 2. [ value, stddev ]
1666 * 3. [ low value, center value, high value ]
1668 Dygraph
.prototype.parseCSV_
= function(data
) {
1670 var lines
= data
.split("\n");
1672 // Use the default delimiter or fall back to a tab if that makes sense.
1673 var delim
= this.attr_('delimiter');
1674 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1679 if (this.labelsFromCSV_
) {
1681 this.attrs_
.labels
= lines
[0].split(delim
);
1685 var defaultParserSet
= false; // attempt to auto-detect x value type
1686 var expectedCols
= this.attr_("labels").length
;
1687 var outOfOrder
= false;
1688 for (var i
= start
; i
< lines
.length
; i
++) {
1689 var line
= lines
[i
];
1690 if (line
.length
== 0) continue; // skip blank lines
1691 if (line
[0] == '#') continue; // skip comment lines
1692 var inFields
= line
.split(delim
);
1693 if (inFields
.length
< 2) continue;
1696 if (!defaultParserSet
) {
1697 this.detectTypeFromString_(inFields
[0]);
1698 xParser
= this.attr_("xValueParser");
1699 defaultParserSet
= true;
1701 fields
[0] = xParser(inFields
[0], this);
1703 // If fractions are expected, parse the numbers as "A/B
"
1704 if (this.fractions_) {
1705 for (var j = 1; j < inFields.length; j++) {
1706 // TODO(danvk): figure out an appropriate way to flag parse errors.
1707 var vals = inFields[j].split("/");
1708 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1710 } else if (this.attr_("errorBars
")) {
1711 // If there are error bars, values are (value, stddev) pairs
1712 for (var j = 1; j < inFields.length; j += 2)
1713 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1714 parseFloat(inFields[j + 1])];
1715 } else if (this.attr_("customBars
")) {
1716 // Bars are a low;center;high tuple
1717 for (var j = 1; j < inFields.length; j++) {
1718 var vals = inFields[j].split(";");
1719 fields[j] = [ parseFloat(vals[0]),
1720 parseFloat(vals[1]),
1721 parseFloat(vals[2]) ];
1724 // Values are just numbers
1725 for (var j = 1; j < inFields.length; j++) {
1726 fields[j] = parseFloat(inFields[j]);
1729 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1734 if (fields.length != expectedCols) {
1735 this.error("Number of columns
in line
" + i + " (" + fields.length +
1736 ") does not agree
with number of
labels (" + expectedCols +
1742 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1743 ret.sort(function(a,b) { return a[0] - b[0] });
1750 * The user has provided their data as a pre-packaged JS array. If the x values
1751 * are numeric, this is the same as dygraphs' internal format. If the x values
1752 * are dates, we need to convert them from Date objects to ms since epoch.
1753 * @param {Array.<Object>} data
1754 * @return {Array.<Object>} data with numeric x values.
1756 Dygraph.prototype.parseArray_ = function(data) {
1757 // Peek at the first x value to see if it's numeric.
1758 if (data.length == 0) {
1759 this.error("Can
't plot empty data set");
1762 if (data[0].length == 0) {
1763 this.error("Data set cannot contain an empty row");
1767 if (this.attr_("labels") == null) {
1768 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1769 "in the options parameter");
1770 this.attrs_.labels = [ "X" ];
1771 for (var i = 1; i < data[0].length; i++) {
1772 this.attrs_.labels.push("Y" + i);
1776 if (Dygraph.isDateLike(data[0][0])) {
1777 // Some intelligent defaults for a date x-axis.
1778 this.attrs_.xValueFormatter = Dygraph.dateString_;
1779 this.attrs_.xTicker = Dygraph.dateTicker;
1781 // Assume they're all dates
.
1782 var parsedData
= Dygraph
.clone(data
);
1783 for (var i
= 0; i
< data
.length
; i
++) {
1784 if (parsedData
[i
].length
== 0) {
1785 this.error("Row " << (1 + i
) << " of data is empty");
1788 if (parsedData
[i
][0] == null
1789 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1790 this.error("x value in row " << (1 + i
) << " is not a Date");
1793 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1797 // Some intelligent defaults for a numeric x-axis.
1798 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1799 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1805 * Parses a DataTable object from gviz.
1806 * The data is expected to have a first column that is either a date or a
1807 * number. All subsequent columns must be numbers. If there is a clear mismatch
1808 * between this.xValueParser_ and the type of the first column, it will be
1809 * fixed. Returned value is in the same format as return value of parseCSV_.
1810 * @param {Array.<Object>} data See above.
1813 Dygraph
.prototype.parseDataTable_
= function(data
) {
1814 var cols
= data
.getNumberOfColumns();
1815 var rows
= data
.getNumberOfRows();
1817 // Read column labels
1819 for (var i
= 0; i
< cols
; i
++) {
1820 labels
.push(data
.getColumnLabel(i
));
1821 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1823 this.attrs_
.labels
= labels
;
1824 cols
= labels
.length
;
1826 var indepType
= data
.getColumnType(0);
1827 if (indepType
== 'date' || indepType
== 'datetime') {
1828 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1829 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1830 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1831 } else if (indepType
== 'number') {
1832 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1833 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1834 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1836 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1837 "column 1 of DataTable input (Got '" + indepType
+ "')");
1842 var outOfOrder
= false;
1843 for (var i
= 0; i
< rows
; i
++) {
1845 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1846 data
.getValue(i
, 0) === null) {
1847 this.warning("Ignoring row " + i
+
1848 " of DataTable because of undefined or null first column.");
1852 if (indepType
== 'date' || indepType
== 'datetime') {
1853 row
.push(data
.getValue(i
, 0).getTime());
1855 row
.push(data
.getValue(i
, 0));
1857 if (!this.attr_("errorBars")) {
1858 for (var j
= 1; j
< cols
; j
++) {
1859 row
.push(data
.getValue(i
, j
));
1862 for (var j
= 0; j
< cols
- 1; j
++) {
1863 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1866 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1873 this.warn("DataTable is out of order; order it correctly to speed loading.");
1874 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1879 // These functions are all based on MochiKit.
1880 Dygraph
.update
= function (self
, o
) {
1881 if (typeof(o
) != 'undefined' && o
!== null) {
1883 if (o
.hasOwnProperty(k
)) {
1891 Dygraph
.isArrayLike
= function (o
) {
1892 var typ
= typeof(o
);
1894 (typ
!= 'object' && !(typ
== 'function' &&
1895 typeof(o
.item
) == 'function')) ||
1897 typeof(o
.length
) != 'number' ||
1905 Dygraph
.isDateLike
= function (o
) {
1906 if (typeof(o
) != "object" || o
=== null ||
1907 typeof(o
.getTime
) != 'function') {
1913 Dygraph
.clone
= function(o
) {
1914 // TODO(danvk): figure out how MochiKit's version works
1916 for (var i
= 0; i
< o
.length
; i
++) {
1917 if (Dygraph
.isArrayLike(o
[i
])) {
1918 r
.push(Dygraph
.clone(o
[i
]));
1928 * Get the CSV data. If it's in a function, call that function. If it's in a
1929 * file, do an XMLHttpRequest to get it.
1932 Dygraph
.prototype.start_
= function() {
1933 if (typeof this.file_
== 'function') {
1934 // CSV string. Pretend we got it via XHR.
1935 this.loadedEvent_(this.file_());
1936 } else if (Dygraph
.isArrayLike(this.file_
)) {
1937 this.rawData_
= this.parseArray_(this.file_
);
1938 this.drawGraph_(this.rawData_
);
1939 } else if (typeof this.file_
== 'object' &&
1940 typeof this.file_
.getColumnRange
== 'function') {
1941 // must be a DataTable from gviz.
1942 this.rawData_
= this.parseDataTable_(this.file_
);
1943 this.drawGraph_(this.rawData_
);
1944 } else if (typeof this.file_
== 'string') {
1945 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1946 if (this.file_
.indexOf('\n') >= 0) {
1947 this.loadedEvent_(this.file_
);
1949 var req
= new XMLHttpRequest();
1951 req
.onreadystatechange
= function () {
1952 if (req
.readyState
== 4) {
1953 if (req
.status
== 200) {
1954 caller
.loadedEvent_(req
.responseText
);
1959 req
.open("GET", this.file_
, true);
1963 this.error("Unknown data format: " + (typeof this.file_
));
1968 * Changes various properties of the graph. These can include:
1970 * <li>file: changes the source data for the graph</li>
1971 * <li>errorBars: changes whether the data contains stddev</li>
1973 * @param {Object} attrs The new properties and values
1975 Dygraph
.prototype.updateOptions
= function(attrs
) {
1976 // TODO(danvk): this is a mess. Rethink this function.
1977 if (attrs
.rollPeriod
) {
1978 this.rollPeriod_
= attrs
.rollPeriod
;
1980 if (attrs
.dateWindow
) {
1981 this.dateWindow_
= attrs
.dateWindow
;
1983 if (attrs
.valueRange
) {
1984 this.valueRange_
= attrs
.valueRange
;
1986 Dygraph
.update(this.user_attrs_
, attrs
);
1988 this.labelsFromCSV_
= (this.attr_("labels") == null);
1990 // TODO(danvk): this doesn't match the constructor logic
1991 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1992 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1993 this.file_
= attrs
['file'];
1996 this.drawGraph_(this.rawData_
);
2001 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2002 * containing div (which has presumably changed size since the dygraph was
2003 * instantiated. If the width/height are specified, the div will be resized.
2005 * This is far more efficient than destroying and re-instantiating a
2006 * Dygraph, since it doesn't have to reparse the underlying data.
2008 * @param {Number} width Width (in pixels)
2009 * @param {Number} height Height (in pixels)
2011 Dygraph
.prototype.resize
= function(width
, height
) {
2012 if ((width
=== null) != (height
=== null)) {
2013 this.warn("Dygraph.resize() should be called with zero parameters or " +
2014 "two non-NULL parameters. Pretending it was zero.");
2015 width
= height
= null;
2018 // TODO(danvk): there should be a clear() method.
2019 this.maindiv_
.innerHTML
= "";
2020 this.attrs_
.labelsDiv
= null;
2023 this.maindiv_
.style
.width
= width
+ "px";
2024 this.maindiv_
.style
.height
= height
+ "px";
2025 this.width_
= width
;
2026 this.height_
= height
;
2028 this.width_
= this.maindiv_
.offsetWidth
;
2029 this.height_
= this.maindiv_
.offsetHeight
;
2032 this.createInterface_();
2033 this.drawGraph_(this.rawData_
);
2037 * Adjusts the number of days in the rolling average. Updates the graph to
2038 * reflect the new averaging period.
2039 * @param {Number} length Number of days over which to average the data.
2041 Dygraph
.prototype.adjustRoll
= function(length
) {
2042 this.rollPeriod_
= length
;
2043 this.drawGraph_(this.rawData_
);
2047 * Returns a boolean array of visibility statuses.
2049 Dygraph
.prototype.visibility
= function() {
2050 // Do lazy-initialization, so that this happens after we know the number of
2052 if (!this.attr_("visibility")) {
2053 this.attrs_
["visibility"] = [];
2055 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2056 this.attr_("visibility").push(true);
2058 return this.attr_("visibility");
2062 * Changes the visiblity of a series.
2064 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2065 var x
= this.visibility();
2066 if (num
< 0 && num
>= x
.length
) {
2067 this.warn("invalid series number in setVisibility: " + num
);
2070 this.drawGraph_(this.rawData_
);
2075 * Create a new canvas element. This is more complex than a simple
2076 * document.createElement("canvas") because of IE and excanvas.
2078 Dygraph
.createCanvas
= function() {
2079 var canvas
= document
.createElement("canvas");
2081 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2083 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2091 * A wrapper around Dygraph that implements the gviz API.
2092 * @param {Object} container The DOM object the visualization should live in.
2094 Dygraph
.GVizChart
= function(container
) {
2095 this.container
= container
;
2098 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2099 this.container
.innerHTML
= '';
2100 this.date_graph
= new Dygraph(this.container
, data
, options
);
2103 // Older pages may still use this name.
2104 DateGraph
= Dygraph
;