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
);
295 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
296 var ctx
= cnv
.getContext("2d");
298 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
303 * Generates interface elements for the Dygraph: a containing div, a div to
304 * display the current point, and a textbox to adjust the rolling average
305 * period. Also creates the Renderer/Layout elements.
308 Dygraph
.prototype.createInterface_
= function() {
309 // Create the all-enclosing graph div
310 var enclosing
= this.maindiv_
;
312 this.graphDiv
= document
.createElement("div");
313 this.graphDiv
.style
.width
= this.width_
+ "px";
314 this.graphDiv
.style
.height
= this.height_
+ "px";
315 enclosing
.appendChild(this.graphDiv
);
319 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
321 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
322 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
323 - 2 * this.attr_("axisTickSize");
324 this.clippingArea_
= clip
;
326 // Create the canvas for interactive parts of the chart.
327 this.canvas_
= Dygraph
.createCanvas();
328 this.canvas_
.style
.position
= "absolute";
329 this.canvas_
.width
= this.width_
;
330 this.canvas_
.height
= this.height_
;
331 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
332 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
333 this.graphDiv
.appendChild(this.canvas_
);
335 // ... and for static parts of the chart.
336 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
338 // Make sure we don't overdraw.
339 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
340 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
343 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
344 dygraph
.mouseMove_(e
);
346 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
347 dygraph
.mouseOut_(e
);
350 // Create the grapher
351 // TODO(danvk): why does the Layout need its own set of options?
352 this.layoutOptions_
= { 'xOriginIsZero': false };
353 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
354 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
355 Dygraph
.update(this.layoutOptions_
, {
356 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
358 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
360 // TODO(danvk): why does the Renderer need its own set of options?
361 this.renderOptions_
= { colorScheme
: this.colors_
,
363 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
364 Dygraph
.update(this.renderOptions_
, this.attrs_
);
365 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
366 this.plotter_
= new DygraphCanvasRenderer(this,
367 this.hidden_
, this.layout_
,
368 this.renderOptions_
);
370 this.createStatusMessage_();
371 this.createRollInterface_();
372 this.createDragInterface_();
376 * Detach DOM elements in the dygraph and null out all data references.
377 * Calling this when you're done with a dygraph can dramatically reduce memory
378 * usage. See, e.g., the tests/perf.html example.
380 Dygraph
.prototype.destroy
= function() {
381 var removeRecursive
= function(node
) {
382 while (node
.hasChildNodes()) {
383 removeRecursive(node
.firstChild
);
384 node
.removeChild(node
.firstChild
);
387 removeRecursive(this.maindiv_
);
389 var nullOut
= function(obj
) {
391 if (typeof(obj
[n
]) === 'object') {
397 // These may not all be necessary, but it can't hurt...
398 nullOut(this.layout_
);
399 nullOut(this.plotter_
);
404 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
405 * this particular canvas. All Dygraph work is done on this.canvas_.
406 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
407 * @return {Object} The newly-created canvas
410 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
411 // var h = document.createElement("canvas");
412 var h
= Dygraph
.createCanvas();
413 h
.style
.position
= "absolute";
414 h
.style
.top
= canvas
.style
.top
;
415 h
.style
.left
= canvas
.style
.left
;
416 h
.width
= this.width_
;
417 h
.height
= this.height_
;
418 h
.style
.width
= this.width_
+ "px"; // for IE
419 h
.style
.height
= this.height_
+ "px"; // for IE
420 this.graphDiv
.appendChild(h
);
424 // Taken from MochiKit.Color
425 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
429 if (saturation
=== 0) {
434 var i
= Math
.floor(hue
* 6);
435 var f
= (hue
* 6) - i
;
436 var p
= value
* (1 - saturation
);
437 var q
= value
* (1 - (saturation
* f
));
438 var t
= value
* (1 - (saturation
* (1 - f
)));
440 case 1: red
= q
; green
= value
; blue
= p
; break;
441 case 2: red
= p
; green
= value
; blue
= t
; break;
442 case 3: red
= p
; green
= q
; blue
= value
; break;
443 case 4: red
= t
; green
= p
; blue
= value
; break;
444 case 5: red
= value
; green
= p
; blue
= q
; break;
445 case 6: // fall through
446 case 0: red
= value
; green
= t
; blue
= p
; break;
449 red
= Math
.floor(255 * red
+ 0.5);
450 green
= Math
.floor(255 * green
+ 0.5);
451 blue
= Math
.floor(255 * blue
+ 0.5);
452 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
457 * Generate a set of distinct colors for the data series. This is done with a
458 * color wheel. Saturation/Value are customizable, and the hue is
459 * equally-spaced around the color wheel. If a custom set of colors is
460 * specified, that is used instead.
463 Dygraph
.prototype.setColors_
= function() {
464 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
465 // away with this.renderOptions_.
466 var num
= this.attr_("labels").length
- 1;
468 var colors
= this.attr_('colors');
470 var sat
= this.attr_('colorSaturation') || 1.0;
471 var val
= this.attr_('colorValue') || 0.5;
472 for (var i
= 1; i
<= num
; i
++) {
473 if (!this.visibility()[i
-1]) continue;
474 // alternate colors for high contrast.
475 var idx
= i
- parseInt(i
% 2 ? i
/ 2 : (i - num)/2, 10);
476 var hue
= (1.0 * idx
/ (1 + num
));
477 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
480 for (var i
= 0; i
< num
; i
++) {
481 if (!this.visibility()[i
]) continue;
482 var colorStr
= colors
[i
% colors
.length
];
483 this.colors_
.push(colorStr
);
487 // TODO(danvk): update this w/r
/t/ the
new options system
.
488 this.renderOptions_
.colorScheme
= this.colors_
;
489 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
490 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
491 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
495 * Return the list of colors. This is either the list of colors passed in the
496 * attributes, or the autogenerated list of rgb(r,g,b) strings.
497 * @return {Array<string>} The list of colors.
499 Dygraph
.prototype.getColors
= function() {
503 // The following functions are from quirksmode.org with a modification for Safari from
504 // http://blog.firetree.net/2005/07/04/javascript-find-position/
505 // http://www.quirksmode.org/js
/findpos
.html
506 Dygraph
.findPosX
= function(obj
) {
511 curleft
+= obj
.offsetLeft
;
512 if(!obj
.offsetParent
)
514 obj
= obj
.offsetParent
;
521 Dygraph
.findPosY
= function(obj
) {
526 curtop
+= obj
.offsetTop
;
527 if(!obj
.offsetParent
)
529 obj
= obj
.offsetParent
;
539 * Create the div that contains information on the selected point(s)
540 * This goes in the top right of the canvas, unless an external div has already
544 Dygraph
.prototype.createStatusMessage_
= function(){
545 if (!this.attr_("labelsDiv")) {
546 var divWidth
= this.attr_('labelsDivWidth');
548 "position": "absolute",
551 "width": divWidth
+ "px",
553 "left": (this.width_
- divWidth
- 2) + "px",
554 "background": "white",
556 "overflow": "hidden"};
557 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
558 var div
= document
.createElement("div");
559 for (var name
in messagestyle
) {
560 if (messagestyle
.hasOwnProperty(name
)) {
561 div
.style
[name
] = messagestyle
[name
];
564 this.graphDiv
.appendChild(div
);
565 this.attrs_
.labelsDiv
= div
;
570 * Create the text box to adjust the averaging period
571 * @return {Object} The newly-created text box
574 Dygraph
.prototype.createRollInterface_
= function() {
575 var display
= this.attr_('showRoller') ? "block" : "none";
576 var textAttr
= { "position": "absolute",
578 "top": (this.plotter_
.area
.h
- 25) + "px",
579 "left": (this.plotter_
.area
.x
+ 1) + "px",
582 var roller
= document
.createElement("input");
583 roller
.type
= "text";
585 roller
.value
= this.rollPeriod_
;
586 for (var name
in textAttr
) {
587 if (textAttr
.hasOwnProperty(name
)) {
588 roller
.style
[name
] = textAttr
[name
];
592 var pa
= this.graphDiv
;
593 pa
.appendChild(roller
);
595 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
599 // These functions are taken from MochiKit.Signal
600 Dygraph
.pageX
= function(e
) {
602 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
605 var b
= document
.body
;
607 (de
.scrollLeft
|| b
.scrollLeft
) -
608 (de
.clientLeft
|| 0);
612 Dygraph
.pageY
= function(e
) {
614 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
617 var b
= document
.body
;
619 (de
.scrollTop
|| b
.scrollTop
) -
625 * Set up all the mouse handlers needed to capture dragging behavior for zoom
629 Dygraph
.prototype.createDragInterface_
= function() {
632 // Tracks whether the mouse is down right now
633 var isZooming
= false;
634 var isPanning
= false;
635 var dragStartX
= null;
636 var dragStartY
= null;
640 var draggingDate
= null;
641 var dateRange
= null;
643 // Utility function to convert page-wide coordinates to canvas coords
646 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
647 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
649 // Draw zoom rectangles when the mouse is down and the user moves around
650 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
652 dragEndX
= getX(event
);
653 dragEndY
= getY(event
);
655 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
657 } else if (isPanning
) {
658 dragEndX
= getX(event
);
659 dragEndY
= getY(event
);
661 // Want to have it so that:
662 // 1. draggingDate appears at dragEndX
663 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
665 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
666 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
667 self
.drawGraph_(self
.rawData_
);
671 // Track the beginning of drag events
672 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
673 px
= Dygraph
.findPosX(self
.canvas_
);
674 py
= Dygraph
.findPosY(self
.canvas_
);
675 dragStartX
= getX(event
);
676 dragStartY
= getY(event
);
678 if (event
.altKey
|| event
.shiftKey
) {
679 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
681 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
682 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
689 // If the user releases the mouse button during a drag, but not over the
690 // canvas, then it doesn't count as a zooming action.
691 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
692 if (isZooming
|| isPanning
) {
705 // Temporarily cancel the dragging event when the mouse leaves the graph
706 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
713 // If the mouse is released on the canvas during a drag event, then it's a
714 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
715 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
718 dragEndX
= getX(event
);
719 dragEndY
= getY(event
);
720 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
721 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
723 if (regionWidth
< 2 && regionHeight
< 2 &&
724 self
.attr_('clickCallback') != null &&
725 self
.lastx_
!= undefined
) {
726 // TODO(danvk): pass along more info about the points.
727 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
730 if (regionWidth
>= 10) {
731 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
732 Math
.max(dragStartX
, dragEndX
));
734 self
.canvas_
.getContext("2d").clearRect(0, 0,
736 self
.canvas_
.height
);
750 // Double-clicking zooms back out
751 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
752 if (self
.dateWindow_
== null) return;
753 self
.dateWindow_
= null;
754 self
.drawGraph_(self
.rawData_
);
755 var minDate
= self
.rawData_
[0][0];
756 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
757 if (self
.attr_("zoomCallback")) {
758 self
.attr_("zoomCallback")(minDate
, maxDate
);
764 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
765 * up any previous zoom rectangles that were drawn. This could be optimized to
766 * avoid extra redrawing, but it's tricky to avoid interactions with the status
768 * @param {Number} startX The X position where the drag started, in canvas
770 * @param {Number} endX The current X position of the drag, in canvas coords.
771 * @param {Number} prevEndX The value of endX on the previous call to this
772 * function. Used to avoid excess redrawing
775 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
776 var ctx
= this.canvas_
.getContext("2d");
778 // Clean up from the previous rect if necessary
780 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
781 Math
.abs(startX
- prevEndX
), this.height_
);
784 // Draw a light-grey rectangle to show the new viewing area
785 if (endX
&& startX
) {
786 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
787 ctx
.fillRect(Math
.min(startX
, endX
), 0,
788 Math
.abs(endX
- startX
), this.height_
);
793 * Zoom to something containing [lowX, highX]. These are pixel coordinates
794 * in the canvas. The exact zoom window may be slightly larger if there are no
795 * data points near lowX or highX. This function redraws the graph.
796 * @param {Number} lowX The leftmost pixel value that should be visible.
797 * @param {Number} highX The rightmost pixel value that should be visible.
800 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
801 // Find the earliest and latest dates contained in this canvasx range.
802 var points
= this.layout_
.points
;
805 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
806 for (var i
= 0; i
< points
.length
; i
++) {
807 var cx
= points
[i
].canvasx
;
808 var x
= points
[i
].xval
;
809 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
810 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
812 // Use the extremes if either is missing
813 if (minDate
== null) minDate
= points
[0].xval
;
814 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
816 this.dateWindow_
= [minDate
, maxDate
];
817 this.drawGraph_(this.rawData_
);
818 if (this.attr_("zoomCallback")) {
819 this.attr_("zoomCallback")(minDate
, maxDate
);
824 * When the mouse moves in the canvas, display information about a nearby data
825 * point and draw dots over those points in the data series. This function
826 * takes care of cleanup of previously-drawn dots.
827 * @param {Object} event The mousemove event from the browser.
830 Dygraph
.prototype.mouseMove_
= function(event
) {
831 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
832 var points
= this.layout_
.points
;
837 // Loop through all the points and find the date nearest to our current
839 var minDist
= 1e+100;
841 for (var i
= 0; i
< points
.length
; i
++) {
842 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
843 if (dist
> minDist
) break;
847 if (idx
>= 0) lastx
= points
[idx
].xval
;
848 // Check that you can really highlight the last day's data
849 if (canvasx
> points
[points
.length
-1].canvasx
)
850 lastx
= points
[points
.length
-1].xval
;
852 // Extract the points we've selected
853 this.selPoints_
= [];
854 for (var i
= 0; i
< points
.length
; i
++) {
855 if (points
[i
].xval
== lastx
) {
856 this.selPoints_
.push(points
[i
]);
860 if (this.attr_("highlightCallback")) {
861 var px
= this.lastHighlightCallbackX
;
862 if (px
!== null && lastx
!= px
) {
863 // only fire if the selected point has changed.
864 this.lastHighlightCallbackX
= lastx
;
865 if (!this.attr_("stackedGraph")) {
866 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
868 // "unstack" the points.
869 var callbackPoints
= this.selPoints_
.map(
870 function(p
) { return {xval
: p
.xval
, yval
: p
.yval
, name
: p
.name
} });
871 var cumulative_sum
= 0;
872 for (var j
= callbackPoints
.length
- 1; j
>= 0; j
--) {
873 callbackPoints
[j
].yval
-= cumulative_sum
;
874 cumulative_sum
+= callbackPoints
[j
].yval
;
876 this.attr_("highlightCallback")(event
, lastx
, callbackPoints
);
881 // Clear the previously drawn vertical, if there is one
882 var circleSize
= this.attr_('highlightCircleSize');
883 var ctx
= this.canvas_
.getContext("2d");
884 if (this.previousVerticalX_
>= 0) {
885 var px
= this.previousVerticalX_
;
886 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
889 var isOK
= function(x
) { return x
&& !isNaN(x
); };
891 if (this.selPoints_
.length
> 0) {
892 var canvasx
= this.selPoints_
[0].canvasx
;
894 // Set the status message to indicate the selected point(s)
895 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
896 var clen
= this.colors_
.length
;
897 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
898 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
899 if (this.attr_("labelsSeparateLines")) {
902 var point
= this.selPoints_
[i
];
903 var c
= new RGBColor(this.colors_
[i
%clen
]);
904 replace
+= " <b><font color='" + c
.toHex() + "'>"
905 + point
.name
+ "</font></b>:"
906 + this.round_(point
.yval
, 2);
908 this.attr_("labelsDiv").innerHTML
= replace
;
910 // Save last x position for callbacks.
913 // Draw colored circles over the center of each selected point
915 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
916 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
918 ctx
.fillStyle
= this.colors_
[i
%clen
];
919 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
920 0, 2 * Math
.PI
, false);
925 this.previousVerticalX_
= canvasx
;
930 * The mouse has left the canvas. Clear out whatever artifacts remain
931 * @param {Object} event the mouseout event from the browser.
934 Dygraph
.prototype.mouseOut_
= function(event
) {
935 if (this.attr_("hideOverlayOnMouseOut")) {
936 // Get rid of the overlay data
937 var ctx
= this.canvas_
.getContext("2d");
938 ctx
.clearRect(0, 0, this.width_
, this.height_
);
939 this.attr_("labelsDiv").innerHTML
= "";
943 Dygraph
.zeropad
= function(x
) {
944 if (x
< 10) return "0" + x
; else return "" + x
;
948 * Return a string version of the hours, minutes and seconds portion of a date.
949 * @param {Number} date The JavaScript date (ms since epoch)
950 * @return {String} A time of the form "HH:MM:SS"
953 Dygraph
.prototype.hmsString_
= function(date
) {
954 var zeropad
= Dygraph
.zeropad
;
955 var d
= new Date(date
);
956 if (d
.getSeconds()) {
957 return zeropad(d
.getHours()) + ":" +
958 zeropad(d
.getMinutes()) + ":" +
959 zeropad(d
.getSeconds());
961 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
966 * Convert a JS date (millis since epoch) to YYYY/MM/DD
967 * @param {Number} date The JavaScript date (ms since epoch)
968 * @return {String} A date of the form "YYYY/MM/DD"
970 * TODO(danvk): why is this part of the prototype?
972 Dygraph
.dateString_
= function(date
, self
) {
973 var zeropad
= Dygraph
.zeropad
;
974 var d
= new Date(date
);
977 var year
= "" + d
.getFullYear();
978 // Get a 0 padded month string
979 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
980 // Get a 0 padded day string
981 var day
= zeropad(d
.getDate());
984 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
985 if (frac
) ret
= " " + self
.hmsString_(date
);
987 return year
+ "/" + month + "/" + day
+ ret
;
991 * Round a number to the specified number of digits past the decimal point.
992 * @param {Number} num The number to round
993 * @param {Number} places The number of decimals to which to round
994 * @return {Number} The rounded number
997 Dygraph
.prototype.round_
= function(num
, places
) {
998 var shift
= Math
.pow(10, places
);
999 return Math
.round(num
* shift
)/shift
;
1003 * Fires when there's data available to be graphed.
1004 * @param {String} data Raw CSV data to be plotted
1007 Dygraph
.prototype.loadedEvent_
= function(data
) {
1008 this.rawData_
= this.parseCSV_(data
);
1009 this.drawGraph_(this.rawData_
);
1012 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1013 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1014 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1017 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1020 Dygraph
.prototype.addXTicks_
= function() {
1021 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1022 var startDate
, endDate
;
1023 if (this.dateWindow_
) {
1024 startDate
= this.dateWindow_
[0];
1025 endDate
= this.dateWindow_
[1];
1027 startDate
= this.rawData_
[0][0];
1028 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1031 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1032 this.layout_
.updateOptions({xTicks
: xTicks
});
1035 // Time granularity enumeration
1036 Dygraph
.SECONDLY
= 0;
1037 Dygraph
.TWO_SECONDLY
= 1;
1038 Dygraph
.FIVE_SECONDLY
= 2;
1039 Dygraph
.TEN_SECONDLY
= 3;
1040 Dygraph
.THIRTY_SECONDLY
= 4;
1041 Dygraph
.MINUTELY
= 5;
1042 Dygraph
.TWO_MINUTELY
= 6;
1043 Dygraph
.FIVE_MINUTELY
= 7;
1044 Dygraph
.TEN_MINUTELY
= 8;
1045 Dygraph
.THIRTY_MINUTELY
= 9;
1046 Dygraph
.HOURLY
= 10;
1047 Dygraph
.TWO_HOURLY
= 11;
1048 Dygraph
.SIX_HOURLY
= 12;
1050 Dygraph
.WEEKLY
= 14;
1051 Dygraph
.MONTHLY
= 15;
1052 Dygraph
.QUARTERLY
= 16;
1053 Dygraph
.BIANNUAL
= 17;
1054 Dygraph
.ANNUAL
= 18;
1055 Dygraph
.DECADAL
= 19;
1056 Dygraph
.NUM_GRANULARITIES
= 20;
1058 Dygraph
.SHORT_SPACINGS
= [];
1059 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1060 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1061 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1062 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1063 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1064 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1065 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1066 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1067 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1068 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1069 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1070 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1071 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1072 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1073 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1077 // If we used this time granularity, how many ticks would there be?
1078 // This is only an approximation, but it's generally good enough.
1080 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1081 if (granularity
< Dygraph
.MONTHLY
) {
1082 // Generate one tick mark for every fixed interval of time.
1083 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1084 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1086 var year_mod
= 1; // e.g. to only print one point every 10 years.
1087 var num_months
= 12;
1088 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1089 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1090 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1091 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1093 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1094 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1095 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1101 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1102 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1104 // Returns an array containing {v: millis, label: label} dictionaries.
1106 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1108 if (granularity
< Dygraph
.MONTHLY
) {
1109 // Generate one tick mark for every fixed interval of time.
1110 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1111 var format
= '%d%b'; // e.g. "1Jan"
1113 // Find a time less than start_time which occurs on a "nice" time boundary
1114 // for this granularity.
1115 var g
= spacing
/ 1000;
1116 var d
= new Date(start_time
);
1117 if (g
<= 60) { // seconds
1118 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1122 if (g
<= 60) { // minutes
1123 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1128 if (g
<= 24) { // days
1129 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1134 if (g
== 7) { // one week
1135 d
.setDate(d
.getDate() - d
.getDay());
1140 start_time
= d
.getTime();
1142 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1143 var d
= new Date(t
);
1144 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1145 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1146 // the extra hour covers DST problems.
1147 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1149 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1153 // Display a tick mark on the first of a set of months of each year.
1154 // Years get a tick mark iff y % year_mod == 0. This is useful for
1155 // displaying a tick mark once every 10 years, say, on long time scales.
1157 var year_mod
= 1; // e.g. to only print one point every 10 years.
1159 if (granularity
== Dygraph
.MONTHLY
) {
1160 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1161 } else if (granularity
== Dygraph
.QUARTERLY
) {
1162 months
= [ 0, 3, 6, 9 ];
1163 } else if (granularity
== Dygraph
.BIANNUAL
) {
1165 } else if (granularity
== Dygraph
.ANNUAL
) {
1167 } else if (granularity
== Dygraph
.DECADAL
) {
1172 var start_year
= new Date(start_time
).getFullYear();
1173 var end_year
= new Date(end_time
).getFullYear();
1174 var zeropad
= Dygraph
.zeropad
;
1175 for (var i
= start_year
; i
<= end_year
; i
++) {
1176 if (i
% year_mod
!= 0) continue;
1177 for (var j
= 0; j
< months
.length
; j
++) {
1178 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1179 var t
= Date
.parse(date_str
);
1180 if (t
< start_time
|| t
> end_time
) continue;
1181 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1191 * Add ticks to the x-axis based on a date range.
1192 * @param {Number} startDate Start of the date window (millis since epoch)
1193 * @param {Number} endDate End of the date window (millis since epoch)
1194 * @return {Array.<Object>} Array of {label, value} tuples.
1197 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1199 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1200 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1201 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1208 return self
.GetXAxis(startDate
, endDate
, chosen
);
1210 // TODO(danvk): signal error.
1215 * Add ticks when the x axis has numbers on it (instead of dates)
1216 * @param {Number} startDate Start of the date window (millis since epoch)
1217 * @param {Number} endDate End of the date window (millis since epoch)
1218 * @return {Array.<Object>} Array of {label, value} tuples.
1221 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1223 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1224 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1225 // The first spacing greater than pixelsPerYLabel is what we use.
1226 // TODO(danvk): version that works on a log scale.
1227 if (self
.attr_("labelsKMG2")) {
1228 var mults
= [1, 2, 4, 8];
1230 var mults
= [1, 2, 5];
1232 var scale
, low_val
, high_val
, nTicks
;
1233 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1234 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1235 for (var i
= -10; i
< 50; i
++) {
1236 if (self
.attr_("labelsKMG2")) {
1237 var base_scale
= Math
.pow(16, i
);
1239 var base_scale
= Math
.pow(10, i
);
1241 for (var j
= 0; j
< mults
.length
; j
++) {
1242 scale
= base_scale
* mults
[j
];
1243 low_val
= Math
.floor(minV
/ scale
) * scale
;
1244 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1245 nTicks
= (high_val
- low_val
) / scale
;
1246 var spacing
= self
.height_
/ nTicks
;
1247 // wish I could break out of both loops at once...
1248 if (spacing
> pixelsPerTick
) break;
1250 if (spacing
> pixelsPerTick
) break;
1253 // Construct labels for the ticks
1257 if (self
.attr_("labelsKMB")) {
1259 k_labels
= [ "K", "M", "B", "T" ];
1261 if (self
.attr_("labelsKMG2")) {
1262 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1264 k_labels
= [ "k", "M", "G", "T" ];
1267 for (var i
= 0; i
< nTicks
; i
++) {
1268 var tickV
= low_val
+ i
* scale
;
1269 var absTickV
= Math
.abs(tickV
);
1270 var label
= self
.round_(tickV
, 2);
1271 if (k_labels
.length
) {
1272 // Round up to an appropriate unit.
1274 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1275 if (absTickV
>= n
) {
1276 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1281 ticks
.push( {label
: label
, v
: tickV
} );
1287 * Adds appropriate ticks on the y-axis
1288 * @param {Number} minY The minimum Y value in the data set
1289 * @param {Number} maxY The maximum Y value in the data set
1292 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1293 // Set the number of ticks so that the labels are human-friendly.
1294 // TODO(danvk): make this an attribute as well.
1295 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1296 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1300 // Computes the range of the data series (including confidence intervals).
1301 // series is either [ [x1, y1], [x2, y2], ... ] or
1302 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1303 // Returns [low, high]
1304 Dygraph
.prototype.extremeValues_
= function(series
) {
1305 var minY
= null, maxY
= null;
1307 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1309 // With custom bars, maxY is the max of the high values.
1310 for (var j
= 0; j
< series
.length
; j
++) {
1311 var y
= series
[j
][1][0];
1313 var low
= y
- series
[j
][1][1];
1314 var high
= y
+ series
[j
][1][2];
1315 if (low
> y
) low
= y
; // this can happen with custom bars,
1316 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1317 if (maxY
== null || high
> maxY
) {
1320 if (minY
== null || low
< minY
) {
1325 for (var j
= 0; j
< series
.length
; j
++) {
1326 var y
= series
[j
][1];
1327 if (y
=== null || isNaN(y
)) continue;
1328 if (maxY
== null || y
> maxY
) {
1331 if (minY
== null || y
< minY
) {
1337 return [minY
, maxY
];
1341 * Update the graph with new data. Data is in the format
1342 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1343 * or, if errorBars=true,
1344 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1345 * @param {Array.<Object>} data The data (see above)
1348 Dygraph
.prototype.drawGraph_
= function(data
) {
1349 // This is used to set the second parameter to drawCallback, below.
1350 var is_initial_draw
= this.is_initial_draw_
;
1351 this.is_initial_draw_
= false;
1353 var minY
= null, maxY
= null;
1354 this.layout_
.removeAllDatasets();
1356 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1358 // For stacked series.
1359 var cumulative_y
= [];
1360 var stacked_datasets
= [];
1362 // Loop over all fields in the dataset
1364 for (var i
= 1; i
< data
[0].length
; i
++) {
1365 if (!this.visibility()[i
- 1]) continue;
1368 for (var j
= 0; j
< data
.length
; j
++) {
1369 var date
= data
[j
][0];
1370 series
[j
] = [date
, data
[j
][i
]];
1372 series
= this.rollingAverage(series
, this.rollPeriod_
);
1374 // Prune down to the desired range, if necessary (for zooming)
1375 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1376 if (this.dateWindow_
) {
1377 var low
= this.dateWindow_
[0];
1378 var high
= this.dateWindow_
[1];
1380 for (var k
= 0; k
< series
.length
; k
++) {
1381 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1382 pruned
.push(series
[k
]);
1388 var extremes
= this.extremeValues_(series
);
1389 var thisMinY
= extremes
[0];
1390 var thisMaxY
= extremes
[1];
1391 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1392 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1396 for (var j
=0; j
<series
.length
; j
++)
1397 vals
[j
] = [series
[j
][0],
1398 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1399 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1400 } else if (this.attr_("stackedGraph")) {
1402 var l
= series
.length
;
1404 for (var j
= 0; j
< l
; j
++) {
1405 if (cumulative_y
[series
[j
][0]] === undefined
)
1406 cumulative_y
[series
[j
][0]] = 0;
1408 actual_y
= series
[j
][1];
1409 cumulative_y
[series
[j
][0]] += actual_y
;
1411 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1413 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1414 maxY
= cumulative_y
[series
[j
][0]];
1416 stacked_datasets
.push([this.attr_("labels")[i
], vals
]);
1417 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1419 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1423 if (stacked_datasets
.length
> 0) {
1424 for (var i
= (stacked_datasets
.length
- 1); i
>= 0; i
--) {
1425 this.layout_
.addDataset(stacked_datasets
[i
][0], stacked_datasets
[i
][1]);
1429 // Use some heuristics to come up with a good maxY value, unless it's been
1430 // set explicitly by the user.
1431 if (this.valueRange_
!= null) {
1432 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1434 // This affects the calculation of span, below.
1435 if (this.attr_("includeZero") && minY
> 0) {
1439 // Add some padding and round up to an integer to be human-friendly.
1440 var span
= maxY
- minY
;
1441 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1442 if (span
== 0) { span
= maxY
; }
1443 var maxAxisY
= maxY
+ 0.1 * span
;
1444 var minAxisY
= minY
- 0.1 * span
;
1446 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1447 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1448 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1450 if (this.attr_("includeZero")) {
1451 if (maxY
< 0) maxAxisY
= 0;
1452 if (minY
> 0) minAxisY
= 0;
1455 this.addYTicks_(minAxisY
, maxAxisY
);
1460 // Tell PlotKit to use this new data and render itself
1461 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1462 this.layout_
.evaluateWithError();
1463 this.plotter_
.clear();
1464 this.plotter_
.render();
1465 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1466 this.canvas_
.height
);
1468 if (this.attr_("drawCallback") !== null) {
1469 this.attr_("drawCallback")(this, is_initial_draw
);
1474 * Calculates the rolling average of a data set.
1475 * If originalData is [label, val], rolls the average of those.
1476 * If originalData is [label, [, it's interpreted as [value, stddev]
1477 * and the roll is returned in the same form, with appropriately reduced
1478 * stddev for each value.
1479 * Note that this is where fractional input (i.e. '5/10') is converted into
1481 * @param {Array} originalData The data in the appropriate format (see above)
1482 * @param {Number} rollPeriod The number of days over which to average the data
1484 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1485 if (originalData
.length
< 2)
1486 return originalData
;
1487 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1488 var rollingData
= [];
1489 var sigma
= this.attr_("sigma");
1491 if (this.fractions_
) {
1493 var den
= 0; // numerator/denominator
1495 for (var i
= 0; i
< originalData
.length
; i
++) {
1496 num
+= originalData
[i
][1][0];
1497 den
+= originalData
[i
][1][1];
1498 if (i
- rollPeriod
>= 0) {
1499 num
-= originalData
[i
- rollPeriod
][1][0];
1500 den
-= originalData
[i
- rollPeriod
][1][1];
1503 var date
= originalData
[i
][0];
1504 var value
= den
? num
/ den
: 0.0;
1505 if (this.attr_("errorBars")) {
1506 if (this.wilsonInterval_
) {
1507 // For more details on this confidence interval, see:
1508 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1510 var p
= value
< 0 ? 0 : value
, n
= den
;
1511 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1512 var denom
= 1 + sigma
* sigma
/ den
;
1513 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1514 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1515 rollingData
[i
] = [date
,
1516 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1518 rollingData
[i
] = [date
, [0, 0, 0]];
1521 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1522 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1525 rollingData
[i
] = [date
, mult
* value
];
1528 } else if (this.attr_("customBars")) {
1533 for (var i
= 0; i
< originalData
.length
; i
++) {
1534 var data
= originalData
[i
][1];
1536 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1538 if (y
!= null && !isNaN(y
)) {
1544 if (i
- rollPeriod
>= 0) {
1545 var prev
= originalData
[i
- rollPeriod
];
1546 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1553 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1554 1.0 * (mid
- low
) / count
,
1555 1.0 * (high
- mid
) / count
]];
1558 // Calculate the rolling average for the first rollPeriod - 1 points where
1559 // there is not enough data to roll over the full number of days
1560 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1561 if (!this.attr_("errorBars")){
1562 if (rollPeriod
== 1) {
1563 return originalData
;
1566 for (var i
= 0; i
< originalData
.length
; i
++) {
1569 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1570 var y
= originalData
[j
][1];
1571 if (y
== null || isNaN(y
)) continue;
1573 sum
+= originalData
[j
][1];
1576 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1578 rollingData
[i
] = [originalData
[i
][0], null];
1583 for (var i
= 0; i
< originalData
.length
; i
++) {
1587 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1588 var y
= originalData
[j
][1][0];
1589 if (y
== null || isNaN(y
)) continue;
1591 sum
+= originalData
[j
][1][0];
1592 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1595 var stddev
= Math
.sqrt(variance
) / num_ok
;
1596 rollingData
[i
] = [originalData
[i
][0],
1597 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1599 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1609 * Parses a date, returning the number of milliseconds since epoch. This can be
1610 * passed in as an xValueParser in the Dygraph constructor.
1611 * TODO(danvk): enumerate formats that this understands.
1612 * @param {String} A date in YYYYMMDD format.
1613 * @return {Number} Milliseconds since epoch.
1616 Dygraph
.dateParser
= function(dateStr
, self
) {
1619 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1620 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1621 while (dateStrSlashed
.search("-") != -1) {
1622 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1624 d
= Date
.parse(dateStrSlashed
);
1625 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1626 // TODO(danvk): remove support for this format. It's confusing.
1627 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1628 + "/" + dateStr
.substr(6,2);
1629 d
= Date
.parse(dateStrSlashed
);
1631 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1632 // "2009/07/12 12:34:56"
1633 d
= Date
.parse(dateStr
);
1636 if (!d
|| isNaN(d
)) {
1637 self
.error("Couldn't parse " + dateStr
+ " as a date");
1643 * Detects the type of the str (date or numeric) and sets the various
1644 * formatting attributes in this.attrs_ based on this type.
1645 * @param {String} str An x value.
1648 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1650 if (str
.indexOf('-') >= 0 ||
1651 str
.indexOf('/') >= 0 ||
1652 isNaN(parseFloat(str
))) {
1654 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1655 // TODO(danvk): remove support for this format.
1660 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1661 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1662 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1664 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1665 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1666 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1671 * Parses a string in a special csv format. We expect a csv file where each
1672 * line is a date point, and the first field in each line is the date string.
1673 * We also expect that all remaining fields represent series.
1674 * if the errorBars attribute is set, then interpret the fields as:
1675 * date, series1, stddev1, series2, stddev2, ...
1676 * @param {Array.<Object>} data See above.
1679 * @return Array.<Object> An array with one entry for each row. These entries
1680 * are an array of cells in that row. The first entry is the parsed x-value for
1681 * the row. The second, third, etc. are the y-values. These can take on one of
1682 * three forms, depending on the CSV and constructor parameters:
1684 * 2. [ value, stddev ]
1685 * 3. [ low value, center value, high value ]
1687 Dygraph
.prototype.parseCSV_
= function(data
) {
1689 var lines
= data
.split("\n");
1691 // Use the default delimiter or fall back to a tab if that makes sense.
1692 var delim
= this.attr_('delimiter');
1693 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1698 if (this.labelsFromCSV_
) {
1700 this.attrs_
.labels
= lines
[0].split(delim
);
1704 var defaultParserSet
= false; // attempt to auto-detect x value type
1705 var expectedCols
= this.attr_("labels").length
;
1706 var outOfOrder
= false;
1707 for (var i
= start
; i
< lines
.length
; i
++) {
1708 var line
= lines
[i
];
1709 if (line
.length
== 0) continue; // skip blank lines
1710 if (line
[0] == '#') continue; // skip comment lines
1711 var inFields
= line
.split(delim
);
1712 if (inFields
.length
< 2) continue;
1715 if (!defaultParserSet
) {
1716 this.detectTypeFromString_(inFields
[0]);
1717 xParser
= this.attr_("xValueParser");
1718 defaultParserSet
= true;
1720 fields
[0] = xParser(inFields
[0], this);
1722 // If fractions are expected, parse the numbers as "A/B
"
1723 if (this.fractions_) {
1724 for (var j = 1; j < inFields.length; j++) {
1725 // TODO(danvk): figure out an appropriate way to flag parse errors.
1726 var vals = inFields[j].split("/");
1727 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1729 } else if (this.attr_("errorBars
")) {
1730 // If there are error bars, values are (value, stddev) pairs
1731 for (var j = 1; j < inFields.length; j += 2)
1732 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1733 parseFloat(inFields[j + 1])];
1734 } else if (this.attr_("customBars
")) {
1735 // Bars are a low;center;high tuple
1736 for (var j = 1; j < inFields.length; j++) {
1737 var vals = inFields[j].split(";");
1738 fields[j] = [ parseFloat(vals[0]),
1739 parseFloat(vals[1]),
1740 parseFloat(vals[2]) ];
1743 // Values are just numbers
1744 for (var j = 1; j < inFields.length; j++) {
1745 fields[j] = parseFloat(inFields[j]);
1748 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1753 if (fields.length != expectedCols) {
1754 this.error("Number of columns
in line
" + i + " (" + fields.length +
1755 ") does not agree
with number of
labels (" + expectedCols +
1761 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1762 ret.sort(function(a,b) { return a[0] - b[0] });
1769 * The user has provided their data as a pre-packaged JS array. If the x values
1770 * are numeric, this is the same as dygraphs' internal format. If the x values
1771 * are dates, we need to convert them from Date objects to ms since epoch.
1772 * @param {Array.<Object>} data
1773 * @return {Array.<Object>} data with numeric x values.
1775 Dygraph.prototype.parseArray_ = function(data) {
1776 // Peek at the first x value to see if it's numeric.
1777 if (data.length == 0) {
1778 this.error("Can
't plot empty data set");
1781 if (data[0].length == 0) {
1782 this.error("Data set cannot contain an empty row");
1786 if (this.attr_("labels") == null) {
1787 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1788 "in the options parameter");
1789 this.attrs_.labels = [ "X" ];
1790 for (var i = 1; i < data[0].length; i++) {
1791 this.attrs_.labels.push("Y" + i);
1795 if (Dygraph.isDateLike(data[0][0])) {
1796 // Some intelligent defaults for a date x-axis.
1797 this.attrs_.xValueFormatter = Dygraph.dateString_;
1798 this.attrs_.xTicker = Dygraph.dateTicker;
1800 // Assume they're all dates
.
1801 var parsedData
= Dygraph
.clone(data
);
1802 for (var i
= 0; i
< data
.length
; i
++) {
1803 if (parsedData
[i
].length
== 0) {
1804 this.error("Row " << (1 + i
) << " of data is empty");
1807 if (parsedData
[i
][0] == null
1808 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1809 this.error("x value in row " << (1 + i
) << " is not a Date");
1812 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1816 // Some intelligent defaults for a numeric x-axis.
1817 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1818 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1824 * Parses a DataTable object from gviz.
1825 * The data is expected to have a first column that is either a date or a
1826 * number. All subsequent columns must be numbers. If there is a clear mismatch
1827 * between this.xValueParser_ and the type of the first column, it will be
1828 * fixed. Returned value is in the same format as return value of parseCSV_.
1829 * @param {Array.<Object>} data See above.
1832 Dygraph
.prototype.parseDataTable_
= function(data
) {
1833 var cols
= data
.getNumberOfColumns();
1834 var rows
= data
.getNumberOfRows();
1836 // Read column labels
1838 for (var i
= 0; i
< cols
; i
++) {
1839 labels
.push(data
.getColumnLabel(i
));
1840 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1842 this.attrs_
.labels
= labels
;
1843 cols
= labels
.length
;
1845 var indepType
= data
.getColumnType(0);
1846 if (indepType
== 'date' || indepType
== 'datetime') {
1847 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1848 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1849 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1850 } else if (indepType
== 'number') {
1851 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1852 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1853 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1855 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1856 "column 1 of DataTable input (Got '" + indepType
+ "')");
1861 var outOfOrder
= false;
1862 for (var i
= 0; i
< rows
; i
++) {
1864 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1865 data
.getValue(i
, 0) === null) {
1866 this.warning("Ignoring row " + i
+
1867 " of DataTable because of undefined or null first column.");
1871 if (indepType
== 'date' || indepType
== 'datetime') {
1872 row
.push(data
.getValue(i
, 0).getTime());
1874 row
.push(data
.getValue(i
, 0));
1876 if (!this.attr_("errorBars")) {
1877 for (var j
= 1; j
< cols
; j
++) {
1878 row
.push(data
.getValue(i
, j
));
1881 for (var j
= 0; j
< cols
- 1; j
++) {
1882 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1885 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1892 this.warn("DataTable is out of order; order it correctly to speed loading.");
1893 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1898 // These functions are all based on MochiKit.
1899 Dygraph
.update
= function (self
, o
) {
1900 if (typeof(o
) != 'undefined' && o
!== null) {
1902 if (o
.hasOwnProperty(k
)) {
1910 Dygraph
.isArrayLike
= function (o
) {
1911 var typ
= typeof(o
);
1913 (typ
!= 'object' && !(typ
== 'function' &&
1914 typeof(o
.item
) == 'function')) ||
1916 typeof(o
.length
) != 'number' ||
1924 Dygraph
.isDateLike
= function (o
) {
1925 if (typeof(o
) != "object" || o
=== null ||
1926 typeof(o
.getTime
) != 'function') {
1932 Dygraph
.clone
= function(o
) {
1933 // TODO(danvk): figure out how MochiKit's version works
1935 for (var i
= 0; i
< o
.length
; i
++) {
1936 if (Dygraph
.isArrayLike(o
[i
])) {
1937 r
.push(Dygraph
.clone(o
[i
]));
1947 * Get the CSV data. If it's in a function, call that function. If it's in a
1948 * file, do an XMLHttpRequest to get it.
1951 Dygraph
.prototype.start_
= function() {
1952 if (typeof this.file_
== 'function') {
1953 // CSV string. Pretend we got it via XHR.
1954 this.loadedEvent_(this.file_());
1955 } else if (Dygraph
.isArrayLike(this.file_
)) {
1956 this.rawData_
= this.parseArray_(this.file_
);
1957 this.drawGraph_(this.rawData_
);
1958 } else if (typeof this.file_
== 'object' &&
1959 typeof this.file_
.getColumnRange
== 'function') {
1960 // must be a DataTable from gviz.
1961 this.rawData_
= this.parseDataTable_(this.file_
);
1962 this.drawGraph_(this.rawData_
);
1963 } else if (typeof this.file_
== 'string') {
1964 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1965 if (this.file_
.indexOf('\n') >= 0) {
1966 this.loadedEvent_(this.file_
);
1968 var req
= new XMLHttpRequest();
1970 req
.onreadystatechange
= function () {
1971 if (req
.readyState
== 4) {
1972 if (req
.status
== 200) {
1973 caller
.loadedEvent_(req
.responseText
);
1978 req
.open("GET", this.file_
, true);
1982 this.error("Unknown data format: " + (typeof this.file_
));
1987 * Changes various properties of the graph. These can include:
1989 * <li>file: changes the source data for the graph</li>
1990 * <li>errorBars: changes whether the data contains stddev</li>
1992 * @param {Object} attrs The new properties and values
1994 Dygraph
.prototype.updateOptions
= function(attrs
) {
1995 // TODO(danvk): this is a mess. Rethink this function.
1996 if (attrs
.rollPeriod
) {
1997 this.rollPeriod_
= attrs
.rollPeriod
;
1999 if (attrs
.dateWindow
) {
2000 this.dateWindow_
= attrs
.dateWindow
;
2002 if (attrs
.valueRange
) {
2003 this.valueRange_
= attrs
.valueRange
;
2005 Dygraph
.update(this.user_attrs_
, attrs
);
2007 this.labelsFromCSV_
= (this.attr_("labels") == null);
2009 // TODO(danvk): this doesn't match the constructor logic
2010 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2011 if (attrs
['file'] && attrs
['file'] != this.file_
) {
2012 this.file_
= attrs
['file'];
2015 this.drawGraph_(this.rawData_
);
2020 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2021 * containing div (which has presumably changed size since the dygraph was
2022 * instantiated. If the width/height are specified, the div will be resized.
2024 * This is far more efficient than destroying and re-instantiating a
2025 * Dygraph, since it doesn't have to reparse the underlying data.
2027 * @param {Number} width Width (in pixels)
2028 * @param {Number} height Height (in pixels)
2030 Dygraph
.prototype.resize
= function(width
, height
) {
2031 if ((width
=== null) != (height
=== null)) {
2032 this.warn("Dygraph.resize() should be called with zero parameters or " +
2033 "two non-NULL parameters. Pretending it was zero.");
2034 width
= height
= null;
2037 // TODO(danvk): there should be a clear() method.
2038 this.maindiv_
.innerHTML
= "";
2039 this.attrs_
.labelsDiv
= null;
2042 this.maindiv_
.style
.width
= width
+ "px";
2043 this.maindiv_
.style
.height
= height
+ "px";
2044 this.width_
= width
;
2045 this.height_
= height
;
2047 this.width_
= this.maindiv_
.offsetWidth
;
2048 this.height_
= this.maindiv_
.offsetHeight
;
2051 this.createInterface_();
2052 this.drawGraph_(this.rawData_
);
2056 * Adjusts the number of days in the rolling average. Updates the graph to
2057 * reflect the new averaging period.
2058 * @param {Number} length Number of days over which to average the data.
2060 Dygraph
.prototype.adjustRoll
= function(length
) {
2061 this.rollPeriod_
= length
;
2062 this.drawGraph_(this.rawData_
);
2066 * Returns a boolean array of visibility statuses.
2068 Dygraph
.prototype.visibility
= function() {
2069 // Do lazy-initialization, so that this happens after we know the number of
2071 if (!this.attr_("visibility")) {
2072 this.attrs_
["visibility"] = [];
2074 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2075 this.attr_("visibility").push(true);
2077 return this.attr_("visibility");
2081 * Changes the visiblity of a series.
2083 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2084 var x
= this.visibility();
2085 if (num
< 0 && num
>= x
.length
) {
2086 this.warn("invalid series number in setVisibility: " + num
);
2089 this.drawGraph_(this.rawData_
);
2094 * Create a new canvas element. This is more complex than a simple
2095 * document.createElement("canvas") because of IE and excanvas.
2097 Dygraph
.createCanvas
= function() {
2098 var canvas
= document
.createElement("canvas");
2100 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2102 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2110 * A wrapper around Dygraph that implements the gviz API.
2111 * @param {Object} container The DOM object the visualization should live in.
2113 Dygraph
.GVizChart
= function(container
) {
2114 this.container
= container
;
2117 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2118 this.container
.innerHTML
= '';
2119 this.date_graph
= new Dygraph(this.container
, data
, options
);
2122 // Older pages may still use this name.
2123 DateGraph
= Dygraph
;