1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
99 axisLabelFontSize
: 14,
105 xValueFormatter
: Dygraph
.dateString_
,
106 xValueParser
: Dygraph
.dateParser
,
107 xTicker
: Dygraph
.dateTicker
,
115 wilsonInterval
: true, // only relevant if fractions is true
120 // Various logging levels.
126 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
127 // Labels is no longer a constructor parameter, since it's typically set
128 // directly from the data source. It also conains a name for the x-axis,
129 // which the previous constructor form did not.
130 if (labels
!= null) {
131 var new_labels
= ["Date"];
132 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
133 Dygraph
.update(attrs
, { 'labels': new_labels
});
135 this.__init__(div
, file
, attrs
);
139 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
140 * and interaction <canvas> inside of it. See the constructor for details
142 * @param {String | Function} file Source data
143 * @param {Array.<String>} labels Names of the data series
144 * @param {Object} attrs Miscellaneous other options
147 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
148 // Support two-argument constructor
149 if (attrs
== null) { attrs
= {}; }
151 // Copy the important bits into the object
152 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
155 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
156 this.previousVerticalX_
= -1;
157 this.fractions_
= attrs
.fractions
|| false;
158 this.dateWindow_
= attrs
.dateWindow
|| null;
159 this.valueRange_
= attrs
.valueRange
|| null;
160 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
162 // Clear the div. This ensure that, if multiple dygraphs are passed the same
163 // div, then only one will be drawn.
166 // If the div isn't already sized then inherit from our attrs or
167 // give it a default size.
168 if (div
.style
.width
== '') {
169 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
171 if (div
.style
.height
== '') {
172 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
174 this.width_
= parseInt(div
.style
.width
, 10);
175 this.height_
= parseInt(div
.style
.height
, 10);
176 // The div might have been specified as percent of the current window size,
177 // convert that to an appropriate number of pixels.
178 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
179 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
180 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
182 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
183 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
186 // Dygraphs has many options, some of which interact with one another.
187 // To keep track of everything, we maintain two sets of options:
189 // this.user_attrs_ only options explicitly set by the user.
190 // this.attrs_ defaults, options derived from user_attrs_, data.
192 // Options are then accessed this.attr_('attr'), which first looks at
193 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
194 // defaults without overriding behavior that the user specifically asks for.
195 this.user_attrs_
= {};
196 Dygraph
.update(this.user_attrs_
, attrs
);
199 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
201 // Make a note of whether labels will be pulled from the CSV file.
202 this.labelsFromCSV_
= (this.attr_("labels") == null);
204 // Create the containing DIV and other interactive elements
205 this.createInterface_();
210 Dygraph
.prototype.attr_
= function(name
) {
211 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
212 return this.user_attrs_
[name
];
213 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
214 return this.attrs_
[name
];
220 // TODO(danvk): any way I can get the line numbers to be this.warn call?
221 Dygraph
.prototype.log
= function(severity
, message
) {
222 if (typeof(console
) != 'undefined') {
225 console
.debug('dygraphs: ' + message
);
228 console
.info('dygraphs: ' + message
);
230 case Dygraph
.WARNING
:
231 console
.warn('dygraphs: ' + message
);
234 console
.error('dygraphs: ' + message
);
239 Dygraph
.prototype.info
= function(message
) {
240 this.log(Dygraph
.INFO
, message
);
242 Dygraph
.prototype.warn
= function(message
) {
243 this.log(Dygraph
.WARNING
, message
);
245 Dygraph
.prototype.error
= function(message
) {
246 this.log(Dygraph
.ERROR
, message
);
250 * Returns the current rolling period, as set by the user or an option.
251 * @return {Number} The number of days in the rolling window
253 Dygraph
.prototype.rollPeriod
= function() {
254 return this.rollPeriod_
;
258 * Returns the currently-visible x-range. This can be affected by zooming,
259 * panning or a call to updateOptions.
260 * Returns a two-element array: [left, right].
261 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
263 Dygraph
.prototype.xAxisRange
= function() {
264 if (this.dateWindow_
) return this.dateWindow_
;
266 // The entire chart is visible.
267 var left
= this.rawData_
[0][0];
268 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
269 return [left
, right
];
272 Dygraph
.addEvent
= function(el
, evt
, fn
) {
273 var normed_fn
= function(e
) {
274 if (!e
) var e
= window
.event
;
277 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
278 el
.addEventListener(evt
, normed_fn
, false);
280 el
.attachEvent('on' + evt
, normed_fn
);
285 * Generates interface elements for the Dygraph: a containing div, a div to
286 * display the current point, and a textbox to adjust the rolling average
287 * period. Also creates the Renderer/Layout elements.
290 Dygraph
.prototype.createInterface_
= function() {
291 // Create the all-enclosing graph div
292 var enclosing
= this.maindiv_
;
294 this.graphDiv
= document
.createElement("div");
295 this.graphDiv
.style
.width
= this.width_
+ "px";
296 this.graphDiv
.style
.height
= this.height_
+ "px";
297 enclosing
.appendChild(this.graphDiv
);
299 // Create the canvas for interactive parts of the chart.
300 // this.canvas_ = document.createElement("canvas");
301 this.canvas_
= Dygraph
.createCanvas();
302 this.canvas_
.style
.position
= "absolute";
303 this.canvas_
.width
= this.width_
;
304 this.canvas_
.height
= this.height_
;
305 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
306 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
307 this.graphDiv
.appendChild(this.canvas_
);
309 // ... and for static parts of the chart.
310 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
313 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
314 dygraph
.mouseMove_(e
);
316 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
317 dygraph
.mouseOut_(e
);
320 // Create the grapher
321 // TODO(danvk): why does the Layout need its own set of options?
322 this.layoutOptions_
= { 'xOriginIsZero': false };
323 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
324 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
325 Dygraph
.update(this.layoutOptions_
, {
326 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
328 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
330 // TODO(danvk): why does the Renderer need its own set of options?
331 this.renderOptions_
= { colorScheme
: this.colors_
,
333 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
334 Dygraph
.update(this.renderOptions_
, this.attrs_
);
335 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
336 this.plotter_
= new DygraphCanvasRenderer(this,
337 this.hidden_
, this.layout_
,
338 this.renderOptions_
);
340 this.createStatusMessage_();
341 this.createRollInterface_();
342 this.createDragInterface_();
346 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
347 * this particular canvas. All Dygraph work is done on this.canvas_.
348 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
349 * @return {Object} The newly-created canvas
352 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
353 // var h = document.createElement("canvas");
354 var h
= Dygraph
.createCanvas();
355 h
.style
.position
= "absolute";
356 h
.style
.top
= canvas
.style
.top
;
357 h
.style
.left
= canvas
.style
.left
;
358 h
.width
= this.width_
;
359 h
.height
= this.height_
;
360 h
.style
.width
= this.width_
+ "px"; // for IE
361 h
.style
.height
= this.height_
+ "px"; // for IE
362 this.graphDiv
.appendChild(h
);
366 // Taken from MochiKit.Color
367 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
371 if (saturation
=== 0) {
376 var i
= Math
.floor(hue
* 6);
377 var f
= (hue
* 6) - i
;
378 var p
= value
* (1 - saturation
);
379 var q
= value
* (1 - (saturation
* f
));
380 var t
= value
* (1 - (saturation
* (1 - f
)));
382 case 1: red
= q
; green
= value
; blue
= p
; break;
383 case 2: red
= p
; green
= value
; blue
= t
; break;
384 case 3: red
= p
; green
= q
; blue
= value
; break;
385 case 4: red
= t
; green
= p
; blue
= value
; break;
386 case 5: red
= value
; green
= p
; blue
= q
; break;
387 case 6: // fall through
388 case 0: red
= value
; green
= t
; blue
= p
; break;
391 red
= Math
.floor(255 * red
+ 0.5);
392 green
= Math
.floor(255 * green
+ 0.5);
393 blue
= Math
.floor(255 * blue
+ 0.5);
394 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
399 * Generate a set of distinct colors for the data series. This is done with a
400 * color wheel. Saturation/Value are customizable, and the hue is
401 * equally-spaced around the color wheel. If a custom set of colors is
402 * specified, that is used instead.
405 Dygraph
.prototype.setColors_
= function() {
406 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
407 // away with this.renderOptions_.
408 var num
= this.attr_("labels").length
- 1;
410 var colors
= this.attr_('colors');
412 var sat
= this.attr_('colorSaturation') || 1.0;
413 var val
= this.attr_('colorValue') || 0.5;
414 for (var i
= 1; i
<= num
; i
++) {
415 if (!this.visibility()[i
-1]) continue;
416 var hue
= (1.0*i
/(1+num
));
417 this.colors_
.push( Dygraph
.hsvToRGB(hue
, sat
, val
) );
420 for (var i
= 0; i
< num
; i
++) {
421 if (!this.visibility()[i
]) continue;
422 var colorStr
= colors
[i
% colors
.length
];
423 this.colors_
.push(colorStr
);
427 // TODO(danvk): update this w/r
/t/ the
new options system
.
428 this.renderOptions_
.colorScheme
= this.colors_
;
429 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
430 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
431 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
434 // The following functions are from quirksmode.org
435 // http://www.quirksmode.org/js
/findpos
.html
436 Dygraph
.findPosX
= function(obj
) {
438 if (obj
.offsetParent
) {
439 while (obj
.offsetParent
) {
440 curleft
+= obj
.offsetLeft
;
441 obj
= obj
.offsetParent
;
449 Dygraph
.findPosY
= function(obj
) {
451 if (obj
.offsetParent
) {
452 while (obj
.offsetParent
) {
453 curtop
+= obj
.offsetTop
;
454 obj
= obj
.offsetParent
;
463 * Create the div that contains information on the selected point(s)
464 * This goes in the top right of the canvas, unless an external div has already
468 Dygraph
.prototype.createStatusMessage_
= function(){
469 if (!this.attr_("labelsDiv")) {
470 var divWidth
= this.attr_('labelsDivWidth');
472 "position": "absolute",
475 "width": divWidth
+ "px",
477 "left": (this.width_
- divWidth
- 2) + "px",
478 "background": "white",
480 "overflow": "hidden"};
481 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
482 var div
= document
.createElement("div");
483 for (var name
in messagestyle
) {
484 if (messagestyle
.hasOwnProperty(name
)) {
485 div
.style
[name
] = messagestyle
[name
];
488 this.graphDiv
.appendChild(div
);
489 this.attrs_
.labelsDiv
= div
;
494 * Create the text box to adjust the averaging period
495 * @return {Object} The newly-created text box
498 Dygraph
.prototype.createRollInterface_
= function() {
499 var display
= this.attr_('showRoller') ? "block" : "none";
500 var textAttr
= { "position": "absolute",
502 "top": (this.plotter_
.area
.h
- 25) + "px",
503 "left": (this.plotter_
.area
.x
+ 1) + "px",
506 var roller
= document
.createElement("input");
507 roller
.type
= "text";
509 roller
.value
= this.rollPeriod_
;
510 for (var name
in textAttr
) {
511 if (textAttr
.hasOwnProperty(name
)) {
512 roller
.style
[name
] = textAttr
[name
];
516 var pa
= this.graphDiv
;
517 pa
.appendChild(roller
);
519 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
523 // These functions are taken from MochiKit.Signal
524 Dygraph
.pageX
= function(e
) {
526 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
529 var b
= document
.body
;
531 (de
.scrollLeft
|| b
.scrollLeft
) -
532 (de
.clientLeft
|| 0);
536 Dygraph
.pageY
= function(e
) {
538 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
541 var b
= document
.body
;
543 (de
.scrollTop
|| b
.scrollTop
) -
549 * Set up all the mouse handlers needed to capture dragging behavior for zoom
553 Dygraph
.prototype.createDragInterface_
= function() {
556 // Tracks whether the mouse is down right now
557 var isZooming
= false;
558 var isPanning
= false;
559 var dragStartX
= null;
560 var dragStartY
= null;
564 var draggingDate
= null;
565 var dateRange
= null;
567 // Utility function to convert page-wide coordinates to canvas coords
570 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
571 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
573 // Draw zoom rectangles when the mouse is down and the user moves around
574 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
576 dragEndX
= getX(event
);
577 dragEndY
= getY(event
);
579 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
581 } else if (isPanning
) {
582 dragEndX
= getX(event
);
583 dragEndY
= getY(event
);
585 // Want to have it so that:
586 // 1. draggingDate appears at dragEndX
587 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
589 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
590 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
591 self
.drawGraph_(self
.rawData_
);
595 // Track the beginning of drag events
596 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
597 px
= Dygraph
.findPosX(self
.canvas_
);
598 py
= Dygraph
.findPosY(self
.canvas_
);
599 dragStartX
= getX(event
);
600 dragStartY
= getY(event
);
602 if (event
.altKey
|| event
.shiftKey
) {
603 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
605 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
606 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
613 // If the user releases the mouse button during a drag, but not over the
614 // canvas, then it doesn't count as a zooming action.
615 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
616 if (isZooming
|| isPanning
) {
629 // Temporarily cancel the dragging event when the mouse leaves the graph
630 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
637 // If the mouse is released on the canvas during a drag event, then it's a
638 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
639 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
642 dragEndX
= getX(event
);
643 dragEndY
= getY(event
);
644 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
645 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
647 if (regionWidth
< 2 && regionHeight
< 2 &&
648 self
.attr_('clickCallback') != null &&
649 self
.lastx_
!= undefined
) {
650 // TODO(danvk): pass along more info about the points.
651 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
654 if (regionWidth
>= 10) {
655 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
656 Math
.max(dragStartX
, dragEndX
));
658 self
.canvas_
.getContext("2d").clearRect(0, 0,
660 self
.canvas_
.height
);
674 // Double-clicking zooms back out
675 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
676 if (self
.dateWindow_
== null) return;
677 self
.dateWindow_
= null;
678 self
.drawGraph_(self
.rawData_
);
679 var minDate
= self
.rawData_
[0][0];
680 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
681 if (self
.attr_("zoomCallback")) {
682 self
.attr_("zoomCallback")(minDate
, maxDate
);
688 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
689 * up any previous zoom rectangles that were drawn. This could be optimized to
690 * avoid extra redrawing, but it's tricky to avoid interactions with the status
692 * @param {Number} startX The X position where the drag started, in canvas
694 * @param {Number} endX The current X position of the drag, in canvas coords.
695 * @param {Number} prevEndX The value of endX on the previous call to this
696 * function. Used to avoid excess redrawing
699 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
700 var ctx
= this.canvas_
.getContext("2d");
702 // Clean up from the previous rect if necessary
704 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
705 Math
.abs(startX
- prevEndX
), this.height_
);
708 // Draw a light-grey rectangle to show the new viewing area
709 if (endX
&& startX
) {
710 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
711 ctx
.fillRect(Math
.min(startX
, endX
), 0,
712 Math
.abs(endX
- startX
), this.height_
);
717 * Zoom to something containing [lowX, highX]. These are pixel coordinates
718 * in the canvas. The exact zoom window may be slightly larger if there are no
719 * data points near lowX or highX. This function redraws the graph.
720 * @param {Number} lowX The leftmost pixel value that should be visible.
721 * @param {Number} highX The rightmost pixel value that should be visible.
724 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
725 // Find the earliest and latest dates contained in this canvasx range.
726 var points
= this.layout_
.points
;
729 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
730 for (var i
= 0; i
< points
.length
; i
++) {
731 var cx
= points
[i
].canvasx
;
732 var x
= points
[i
].xval
;
733 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
734 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
736 // Use the extremes if either is missing
737 if (minDate
== null) minDate
= points
[0].xval
;
738 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
740 this.dateWindow_
= [minDate
, maxDate
];
741 this.drawGraph_(this.rawData_
);
742 if (this.attr_("zoomCallback")) {
743 this.attr_("zoomCallback")(minDate
, maxDate
);
748 * When the mouse moves in the canvas, display information about a nearby data
749 * point and draw dots over those points in the data series. This function
750 * takes care of cleanup of previously-drawn dots.
751 * @param {Object} event The mousemove event from the browser.
754 Dygraph
.prototype.mouseMove_
= function(event
) {
755 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
756 var points
= this.layout_
.points
;
761 // Loop through all the points and find the date nearest to our current
763 var minDist
= 1e+100;
765 for (var i
= 0; i
< points
.length
; i
++) {
766 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
767 if (dist
> minDist
) break;
771 if (idx
>= 0) lastx
= points
[idx
].xval
;
772 // Check that you can really highlight the last day's data
773 if (canvasx
> points
[points
.length
-1].canvasx
)
774 lastx
= points
[points
.length
-1].xval
;
776 // Extract the points we've selected
777 this.selPoints_
= [];
778 for (var i
= 0; i
< points
.length
; i
++) {
779 if (points
[i
].xval
== lastx
) {
780 this.selPoints_
.push(points
[i
]);
784 if (this.attr_("highlightCallback")) {
785 var px
= this.lastHighlightCallbackX
;
786 if (px
!== null && lastx
!= px
) {
787 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
788 this.lastHighlightCallbackX
= lastx
;
792 // Clear the previously drawn vertical, if there is one
793 var circleSize
= this.attr_('highlightCircleSize');
794 var ctx
= this.canvas_
.getContext("2d");
795 if (this.previousVerticalX_
>= 0) {
796 var px
= this.previousVerticalX_
;
797 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
800 var isOK
= function(x
) { return x
&& !isNaN(x
); };
802 if (this.selPoints_
.length
> 0) {
803 var canvasx
= this.selPoints_
[0].canvasx
;
805 // Set the status message to indicate the selected point(s)
806 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
807 var clen
= this.colors_
.length
;
808 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
809 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
810 if (this.attr_("labelsSeparateLines")) {
813 var point
= this.selPoints_
[i
];
814 var c
= new RGBColor(this.colors_
[i
%clen
]);
815 replace
+= " <b><font color='" + c
.toHex() + "'>"
816 + point
.name
+ "</font></b>:"
817 + this.round_(point
.yval
, 2);
819 this.attr_("labelsDiv").innerHTML
= replace
;
821 // Save last x position for callbacks.
824 // Draw colored circles over the center of each selected point
826 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
827 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
829 ctx
.fillStyle
= this.colors_
[i
%clen
];
830 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
831 0, 2 * Math
.PI
, false);
836 this.previousVerticalX_
= canvasx
;
841 * The mouse has left the canvas. Clear out whatever artifacts remain
842 * @param {Object} event the mouseout event from the browser.
845 Dygraph
.prototype.mouseOut_
= function(event
) {
846 // Get rid of the overlay data
847 var ctx
= this.canvas_
.getContext("2d");
848 ctx
.clearRect(0, 0, this.width_
, this.height_
);
849 this.attr_("labelsDiv").innerHTML
= "";
852 Dygraph
.zeropad
= function(x
) {
853 if (x
< 10) return "0" + x
; else return "" + x
;
857 * Return a string version of the hours, minutes and seconds portion of a date.
858 * @param {Number} date The JavaScript date (ms since epoch)
859 * @return {String} A time of the form "HH:MM:SS"
862 Dygraph
.prototype.hmsString_
= function(date
) {
863 var zeropad
= Dygraph
.zeropad
;
864 var d
= new Date(date
);
865 if (d
.getSeconds()) {
866 return zeropad(d
.getHours()) + ":" +
867 zeropad(d
.getMinutes()) + ":" +
868 zeropad(d
.getSeconds());
869 } else if (d
.getMinutes()) {
870 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
872 return zeropad(d
.getHours());
877 * Convert a JS date (millis since epoch) to YYYY/MM/DD
878 * @param {Number} date The JavaScript date (ms since epoch)
879 * @return {String} A date of the form "YYYY/MM/DD"
881 * TODO(danvk): why is this part of the prototype?
883 Dygraph
.dateString_
= function(date
, self
) {
884 var zeropad
= Dygraph
.zeropad
;
885 var d
= new Date(date
);
888 var year
= "" + d
.getFullYear();
889 // Get a 0 padded month string
890 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
891 // Get a 0 padded day string
892 var day
= zeropad(d
.getDate());
895 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
896 if (frac
) ret
= " " + self
.hmsString_(date
);
898 return year
+ "/" + month + "/" + day
+ ret
;
902 * Round a number to the specified number of digits past the decimal point.
903 * @param {Number} num The number to round
904 * @param {Number} places The number of decimals to which to round
905 * @return {Number} The rounded number
908 Dygraph
.prototype.round_
= function(num
, places
) {
909 var shift
= Math
.pow(10, places
);
910 return Math
.round(num
* shift
)/shift
;
914 * Fires when there's data available to be graphed.
915 * @param {String} data Raw CSV data to be plotted
918 Dygraph
.prototype.loadedEvent_
= function(data
) {
919 this.rawData_
= this.parseCSV_(data
);
920 this.drawGraph_(this.rawData_
);
923 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
924 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
925 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
928 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
931 Dygraph
.prototype.addXTicks_
= function() {
932 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
933 var startDate
, endDate
;
934 if (this.dateWindow_
) {
935 startDate
= this.dateWindow_
[0];
936 endDate
= this.dateWindow_
[1];
938 startDate
= this.rawData_
[0][0];
939 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
942 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
943 this.layout_
.updateOptions({xTicks
: xTicks
});
946 // Time granularity enumeration
947 Dygraph
.SECONDLY
= 0;
948 Dygraph
.TWO_SECONDLY
= 1;
949 Dygraph
.FIVE_SECONDLY
= 2;
950 Dygraph
.TEN_SECONDLY
= 3;
951 Dygraph
.THIRTY_SECONDLY
= 4;
952 Dygraph
.MINUTELY
= 5;
953 Dygraph
.TWO_MINUTELY
= 6;
954 Dygraph
.FIVE_MINUTELY
= 7;
955 Dygraph
.TEN_MINUTELY
= 8;
956 Dygraph
.THIRTY_MINUTELY
= 9;
958 Dygraph
.TWO_HOURLY
= 11;
959 Dygraph
.SIX_HOURLY
= 12;
962 Dygraph
.MONTHLY
= 15;
963 Dygraph
.QUARTERLY
= 16;
964 Dygraph
.BIANNUAL
= 17;
966 Dygraph
.DECADAL
= 19;
967 Dygraph
.NUM_GRANULARITIES
= 20;
969 Dygraph
.SHORT_SPACINGS
= [];
970 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
971 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
972 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
973 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
974 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
975 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
976 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
977 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
978 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
979 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
980 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
981 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
982 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
983 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
984 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
988 // If we used this time granularity, how many ticks would there be?
989 // This is only an approximation, but it's generally good enough.
991 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
992 if (granularity
< Dygraph
.MONTHLY
) {
993 // Generate one tick mark for every fixed interval of time.
994 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
995 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
997 var year_mod
= 1; // e.g. to only print one point every 10 years.
999 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1000 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1001 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1002 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1004 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1005 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1006 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1012 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1013 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1015 // Returns an array containing {v: millis, label: label} dictionaries.
1017 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1019 if (granularity
< Dygraph
.MONTHLY
) {
1020 // Generate one tick mark for every fixed interval of time.
1021 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1022 var format
= '%d%b'; // e.g. "1Jan"
1024 // Find a time less than start_time which occurs on a "nice" time boundary
1025 // for this granularity.
1026 var g
= spacing
/ 1000;
1027 var d
= new Date(start_time
);
1028 if (g
<= 60) { // seconds
1029 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1033 if (g
<= 60) { // minutes
1034 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1039 if (g
<= 24) { // days
1040 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1045 if (g
== 7) { // one week
1046 d
.setDate(d
.getDate() - d
.getDay());
1051 start_time
= d
.getTime();
1053 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1054 var d
= new Date(t
);
1055 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1056 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1057 // the extra hour covers DST problems.
1058 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1060 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1064 // Display a tick mark on the first of a set of months of each year.
1065 // Years get a tick mark iff y % year_mod == 0. This is useful for
1066 // displaying a tick mark once every 10 years, say, on long time scales.
1068 var year_mod
= 1; // e.g. to only print one point every 10 years.
1070 if (granularity
== Dygraph
.MONTHLY
) {
1071 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1072 } else if (granularity
== Dygraph
.QUARTERLY
) {
1073 months
= [ 0, 3, 6, 9 ];
1074 } else if (granularity
== Dygraph
.BIANNUAL
) {
1076 } else if (granularity
== Dygraph
.ANNUAL
) {
1078 } else if (granularity
== Dygraph
.DECADAL
) {
1083 var start_year
= new Date(start_time
).getFullYear();
1084 var end_year
= new Date(end_time
).getFullYear();
1085 var zeropad
= Dygraph
.zeropad
;
1086 for (var i
= start_year
; i
<= end_year
; i
++) {
1087 if (i
% year_mod
!= 0) continue;
1088 for (var j
= 0; j
< months
.length
; j
++) {
1089 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1090 var t
= Date
.parse(date_str
);
1091 if (t
< start_time
|| t
> end_time
) continue;
1092 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1102 * Add ticks to the x-axis based on a date range.
1103 * @param {Number} startDate Start of the date window (millis since epoch)
1104 * @param {Number} endDate End of the date window (millis since epoch)
1105 * @return {Array.<Object>} Array of {label, value} tuples.
1108 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1110 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1111 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1112 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1119 return self
.GetXAxis(startDate
, endDate
, chosen
);
1121 // TODO(danvk): signal error.
1126 * Add ticks when the x axis has numbers on it (instead of dates)
1127 * @param {Number} startDate Start of the date window (millis since epoch)
1128 * @param {Number} endDate End of the date window (millis since epoch)
1129 * @return {Array.<Object>} Array of {label, value} tuples.
1132 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1134 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1135 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1136 // The first spacing greater than pixelsPerYLabel is what we use.
1137 // TODO(danvk): version that works on a log scale.
1138 if (self
.attr_("labelsKMG2")) {
1139 var mults
= [1, 2, 4, 8];
1141 var mults
= [1, 2, 5];
1143 var scale
, low_val
, high_val
, nTicks
;
1144 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1145 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1146 for (var i
= -10; i
< 50; i
++) {
1147 if (self
.attr_("labelsKMG2")) {
1148 var base_scale
= Math
.pow(16, i
);
1150 var base_scale
= Math
.pow(10, i
);
1152 for (var j
= 0; j
< mults
.length
; j
++) {
1153 scale
= base_scale
* mults
[j
];
1154 low_val
= Math
.floor(minV
/ scale
) * scale
;
1155 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1156 nTicks
= (high_val
- low_val
) / scale
;
1157 var spacing
= self
.height_
/ nTicks
;
1158 // wish I could break out of both loops at once...
1159 if (spacing
> pixelsPerTick
) break;
1161 if (spacing
> pixelsPerTick
) break;
1164 // Construct labels for the ticks
1168 if (self
.attr_("labelsKMB")) {
1170 k_labels
= [ "K", "M", "B", "T" ];
1172 if (self
.attr_("labelsKMG2")) {
1173 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1175 k_labels
= [ "k", "M", "G", "T" ];
1178 for (var i
= 0; i
< nTicks
; i
++) {
1179 var tickV
= low_val
+ i
* scale
;
1180 var absTickV
= Math
.abs(tickV
);
1181 var label
= self
.round_(tickV
, 2);
1182 if (k_labels
.length
) {
1183 // Round up to an appropriate unit.
1185 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1186 if (absTickV
>= n
) {
1187 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1192 ticks
.push( {label
: label
, v
: tickV
} );
1198 * Adds appropriate ticks on the y-axis
1199 * @param {Number} minY The minimum Y value in the data set
1200 * @param {Number} maxY The maximum Y value in the data set
1203 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1204 // Set the number of ticks so that the labels are human-friendly.
1205 // TODO(danvk): make this an attribute as well.
1206 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1207 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1211 // Computes the range of the data series (including confidence intervals).
1212 // series is either [ [x1, y1], [x2, y2], ... ] or
1213 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1214 // Returns [low, high]
1215 Dygraph
.prototype.extremeValues_
= function(series
) {
1216 var minY
= null, maxY
= null;
1218 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1220 // With custom bars, maxY is the max of the high values.
1221 for (var j
= 0; j
< series
.length
; j
++) {
1222 var y
= series
[j
][1][0];
1224 var low
= y
- series
[j
][1][1];
1225 var high
= y
+ series
[j
][1][2];
1226 if (low
> y
) low
= y
; // this can happen with custom bars,
1227 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1228 if (maxY
== null || high
> maxY
) {
1231 if (minY
== null || low
< minY
) {
1236 for (var j
= 0; j
< series
.length
; j
++) {
1237 var y
= series
[j
][1];
1238 if (y
=== null || isNaN(y
)) continue;
1239 if (maxY
== null || y
> maxY
) {
1242 if (minY
== null || y
< minY
) {
1248 return [minY
, maxY
];
1252 * Update the graph with new data. Data is in the format
1253 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1254 * or, if errorBars=true,
1255 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1256 * @param {Array.<Object>} data The data (see above)
1259 Dygraph
.prototype.drawGraph_
= function(data
) {
1260 var minY
= null, maxY
= null;
1261 this.layout_
.removeAllDatasets();
1263 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1265 // Loop over all fields in the dataset
1266 for (var i
= 1; i
< data
[0].length
; i
++) {
1267 if (!this.visibility()[i
- 1]) continue;
1270 for (var j
= 0; j
< data
.length
; j
++) {
1271 var date
= data
[j
][0];
1272 series
[j
] = [date
, data
[j
][i
]];
1274 series
= this.rollingAverage(series
, this.rollPeriod_
);
1276 // Prune down to the desired range, if necessary (for zooming)
1277 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1278 if (this.dateWindow_
) {
1279 var low
= this.dateWindow_
[0];
1280 var high
= this.dateWindow_
[1];
1282 for (var k
= 0; k
< series
.length
; k
++) {
1283 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1284 pruned
.push(series
[k
]);
1290 var extremes
= this.extremeValues_(series
);
1291 var thisMinY
= extremes
[0];
1292 var thisMaxY
= extremes
[1];
1293 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1294 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1298 for (var j
=0; j
<series
.length
; j
++)
1299 vals
[j
] = [series
[j
][0],
1300 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1301 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1303 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1307 // Use some heuristics to come up with a good maxY value, unless it's been
1308 // set explicitly by the user.
1309 if (this.valueRange_
!= null) {
1310 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1312 // This affects the calculation of span, below.
1313 if (this.attr_("includeZero") && minY
> 0) {
1317 // Add some padding and round up to an integer to be human-friendly.
1318 var span
= maxY
- minY
;
1319 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1320 if (span
== 0) { span
= maxY
; }
1321 var maxAxisY
= maxY
+ 0.1 * span
;
1322 var minAxisY
= minY
- 0.1 * span
;
1324 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1325 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1326 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1328 if (this.attr_("includeZero")) {
1329 if (maxY
< 0) maxAxisY
= 0;
1330 if (minY
> 0) minAxisY
= 0;
1333 this.addYTicks_(minAxisY
, maxAxisY
);
1338 // Tell PlotKit to use this new data and render itself
1339 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1340 this.layout_
.evaluateWithError();
1341 this.plotter_
.clear();
1342 this.plotter_
.render();
1343 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1344 this.canvas_
.height
);
1346 if (this.attr_("drawCallback") !== null) {
1347 this.attr_("drawCallback")(this);
1352 * Calculates the rolling average of a data set.
1353 * If originalData is [label, val], rolls the average of those.
1354 * If originalData is [label, [, it's interpreted as [value, stddev]
1355 * and the roll is returned in the same form, with appropriately reduced
1356 * stddev for each value.
1357 * Note that this is where fractional input (i.e. '5/10') is converted into
1359 * @param {Array} originalData The data in the appropriate format (see above)
1360 * @param {Number} rollPeriod The number of days over which to average the data
1362 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1363 if (originalData
.length
< 2)
1364 return originalData
;
1365 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1366 var rollingData
= [];
1367 var sigma
= this.attr_("sigma");
1369 if (this.fractions_
) {
1371 var den
= 0; // numerator/denominator
1373 for (var i
= 0; i
< originalData
.length
; i
++) {
1374 num
+= originalData
[i
][1][0];
1375 den
+= originalData
[i
][1][1];
1376 if (i
- rollPeriod
>= 0) {
1377 num
-= originalData
[i
- rollPeriod
][1][0];
1378 den
-= originalData
[i
- rollPeriod
][1][1];
1381 var date
= originalData
[i
][0];
1382 var value
= den
? num
/ den
: 0.0;
1383 if (this.attr_("errorBars")) {
1384 if (this.wilsonInterval_
) {
1385 // For more details on this confidence interval, see:
1386 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1388 var p
= value
< 0 ? 0 : value
, n
= den
;
1389 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1390 var denom
= 1 + sigma
* sigma
/ den
;
1391 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1392 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1393 rollingData
[i
] = [date
,
1394 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1396 rollingData
[i
] = [date
, [0, 0, 0]];
1399 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1400 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1403 rollingData
[i
] = [date
, mult
* value
];
1406 } else if (this.attr_("customBars")) {
1411 for (var i
= 0; i
< originalData
.length
; i
++) {
1412 var data
= originalData
[i
][1];
1414 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1416 if (y
!= null && !isNaN(y
)) {
1422 if (i
- rollPeriod
>= 0) {
1423 var prev
= originalData
[i
- rollPeriod
];
1424 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1431 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1432 1.0 * (mid
- low
) / count
,
1433 1.0 * (high
- mid
) / count
]];
1436 // Calculate the rolling average for the first rollPeriod - 1 points where
1437 // there is not enough data to roll over the full number of days
1438 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1439 if (!this.attr_("errorBars")){
1440 if (rollPeriod
== 1) {
1441 return originalData
;
1444 for (var i
= 0; i
< originalData
.length
; i
++) {
1447 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1448 var y
= originalData
[j
][1];
1449 if (y
== null || isNaN(y
)) continue;
1451 sum
+= originalData
[j
][1];
1454 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1456 rollingData
[i
] = [originalData
[i
][0], null];
1461 for (var i
= 0; i
< originalData
.length
; i
++) {
1465 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1466 var y
= originalData
[j
][1][0];
1467 if (y
== null || isNaN(y
)) continue;
1469 sum
+= originalData
[j
][1][0];
1470 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1473 var stddev
= Math
.sqrt(variance
) / num_ok
;
1474 rollingData
[i
] = [originalData
[i
][0],
1475 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1477 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1487 * Parses a date, returning the number of milliseconds since epoch. This can be
1488 * passed in as an xValueParser in the Dygraph constructor.
1489 * TODO(danvk): enumerate formats that this understands.
1490 * @param {String} A date in YYYYMMDD format.
1491 * @return {Number} Milliseconds since epoch.
1494 Dygraph
.dateParser
= function(dateStr
, self
) {
1497 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1498 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1499 while (dateStrSlashed
.search("-") != -1) {
1500 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1502 d
= Date
.parse(dateStrSlashed
);
1503 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1504 // TODO(danvk): remove support for this format. It's confusing.
1505 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1506 + "/" + dateStr
.substr(6,2);
1507 d
= Date
.parse(dateStrSlashed
);
1509 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1510 // "2009/07/12 12:34:56"
1511 d
= Date
.parse(dateStr
);
1514 if (!d
|| isNaN(d
)) {
1515 self
.error("Couldn't parse " + dateStr
+ " as a date");
1521 * Detects the type of the str (date or numeric) and sets the various
1522 * formatting attributes in this.attrs_ based on this type.
1523 * @param {String} str An x value.
1526 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1528 if (str
.indexOf('-') >= 0 ||
1529 str
.indexOf('/') >= 0 ||
1530 isNaN(parseFloat(str
))) {
1532 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1533 // TODO(danvk): remove support for this format.
1538 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1539 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1540 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1542 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1543 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1544 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1549 * Parses a string in a special csv format. We expect a csv file where each
1550 * line is a date point, and the first field in each line is the date string.
1551 * We also expect that all remaining fields represent series.
1552 * if the errorBars attribute is set, then interpret the fields as:
1553 * date, series1, stddev1, series2, stddev2, ...
1554 * @param {Array.<Object>} data See above.
1557 * @return Array.<Object> An array with one entry for each row. These entries
1558 * are an array of cells in that row. The first entry is the parsed x-value for
1559 * the row. The second, third, etc. are the y-values. These can take on one of
1560 * three forms, depending on the CSV and constructor parameters:
1562 * 2. [ value, stddev ]
1563 * 3. [ low value, center value, high value ]
1565 Dygraph
.prototype.parseCSV_
= function(data
) {
1567 var lines
= data
.split("\n");
1569 // Use the default delimiter or fall back to a tab if that makes sense.
1570 var delim
= this.attr_('delimiter');
1571 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1576 if (this.labelsFromCSV_
) {
1578 this.attrs_
.labels
= lines
[0].split(delim
);
1582 var defaultParserSet
= false; // attempt to auto-detect x value type
1583 var expectedCols
= this.attr_("labels").length
;
1584 var outOfOrder
= false;
1585 for (var i
= start
; i
< lines
.length
; i
++) {
1586 var line
= lines
[i
];
1587 if (line
.length
== 0) continue; // skip blank lines
1588 if (line
[0] == '#') continue; // skip comment lines
1589 var inFields
= line
.split(delim
);
1590 if (inFields
.length
< 2) continue;
1593 if (!defaultParserSet
) {
1594 this.detectTypeFromString_(inFields
[0]);
1595 xParser
= this.attr_("xValueParser");
1596 defaultParserSet
= true;
1598 fields
[0] = xParser(inFields
[0], this);
1600 // If fractions are expected, parse the numbers as "A/B
"
1601 if (this.fractions_) {
1602 for (var j = 1; j < inFields.length; j++) {
1603 // TODO(danvk): figure out an appropriate way to flag parse errors.
1604 var vals = inFields[j].split("/");
1605 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1607 } else if (this.attr_("errorBars
")) {
1608 // If there are error bars, values are (value, stddev) pairs
1609 for (var j = 1; j < inFields.length; j += 2)
1610 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1611 parseFloat(inFields[j + 1])];
1612 } else if (this.attr_("customBars
")) {
1613 // Bars are a low;center;high tuple
1614 for (var j = 1; j < inFields.length; j++) {
1615 var vals = inFields[j].split(";");
1616 fields[j] = [ parseFloat(vals[0]),
1617 parseFloat(vals[1]),
1618 parseFloat(vals[2]) ];
1621 // Values are just numbers
1622 for (var j = 1; j < inFields.length; j++) {
1623 fields[j] = parseFloat(inFields[j]);
1626 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1631 if (fields.length != expectedCols) {
1632 this.error("Number of columns
in line
" + i + " (" + fields.length +
1633 ") does not agree
with number of
labels (" + expectedCols +
1639 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1640 ret.sort(function(a,b) { return a[0] - b[0] });
1647 * The user has provided their data as a pre-packaged JS array. If the x values
1648 * are numeric, this is the same as dygraphs' internal format. If the x values
1649 * are dates, we need to convert them from Date objects to ms since epoch.
1650 * @param {Array.<Object>} data
1651 * @return {Array.<Object>} data with numeric x values.
1653 Dygraph.prototype.parseArray_ = function(data) {
1654 // Peek at the first x value to see if it's numeric.
1655 if (data.length == 0) {
1656 this.error("Can
't plot empty data set");
1659 if (data[0].length == 0) {
1660 this.error("Data set cannot contain an empty row");
1664 if (this.attr_("labels") == null) {
1665 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1666 "in the options parameter");
1667 this.attrs_.labels = [ "X" ];
1668 for (var i = 1; i < data[0].length; i++) {
1669 this.attrs_.labels.push("Y" + i);
1673 if (Dygraph.isDateLike(data[0][0])) {
1674 // Some intelligent defaults for a date x-axis.
1675 this.attrs_.xValueFormatter = Dygraph.dateString_;
1676 this.attrs_.xTicker = Dygraph.dateTicker;
1678 // Assume they're all dates
.
1679 var parsedData
= Dygraph
.clone(data
);
1680 for (var i
= 0; i
< data
.length
; i
++) {
1681 if (parsedData
[i
].length
== 0) {
1682 this.error("Row " << (1 + i
) << " of data is empty");
1685 if (parsedData
[i
][0] == null
1686 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1687 this.error("x value in row " << (1 + i
) << " is not a Date");
1690 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1694 // Some intelligent defaults for a numeric x-axis.
1695 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1696 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1702 * Parses a DataTable object from gviz.
1703 * The data is expected to have a first column that is either a date or a
1704 * number. All subsequent columns must be numbers. If there is a clear mismatch
1705 * between this.xValueParser_ and the type of the first column, it will be
1706 * fixed. Returned value is in the same format as return value of parseCSV_.
1707 * @param {Array.<Object>} data See above.
1710 Dygraph
.prototype.parseDataTable_
= function(data
) {
1711 var cols
= data
.getNumberOfColumns();
1712 var rows
= data
.getNumberOfRows();
1714 // Read column labels
1716 for (var i
= 0; i
< cols
; i
++) {
1717 labels
.push(data
.getColumnLabel(i
));
1718 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1720 this.attrs_
.labels
= labels
;
1721 cols
= labels
.length
;
1723 var indepType
= data
.getColumnType(0);
1724 if (indepType
== 'date' || indepType
== 'datetime') {
1725 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1726 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1727 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1728 } else if (indepType
== 'number') {
1729 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1730 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1731 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1733 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1734 "column 1 of DataTable input (Got '" + indepType
+ "')");
1739 var outOfOrder
= false;
1740 for (var i
= 0; i
< rows
; i
++) {
1742 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1743 data
.getValue(i
, 0) === null) {
1744 this.warning("Ignoring row " + i
+
1745 " of DataTable because of undefined or null first column.");
1749 if (indepType
== 'date' || indepType
== 'datetime') {
1750 row
.push(data
.getValue(i
, 0).getTime());
1752 row
.push(data
.getValue(i
, 0));
1754 if (!this.attr_("errorBars")) {
1755 for (var j
= 1; j
< cols
; j
++) {
1756 row
.push(data
.getValue(i
, j
));
1759 for (var j
= 0; j
< cols
- 1; j
++) {
1760 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1763 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1770 this.warn("DataTable is out of order; order it correctly to speed loading.");
1771 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
1776 // These functions are all based on MochiKit.
1777 Dygraph
.update
= function (self
, o
) {
1778 if (typeof(o
) != 'undefined' && o
!== null) {
1780 if (o
.hasOwnProperty(k
)) {
1788 Dygraph
.isArrayLike
= function (o
) {
1789 var typ
= typeof(o
);
1791 (typ
!= 'object' && !(typ
== 'function' &&
1792 typeof(o
.item
) == 'function')) ||
1794 typeof(o
.length
) != 'number' ||
1802 Dygraph
.isDateLike
= function (o
) {
1803 if (typeof(o
) != "object" || o
=== null ||
1804 typeof(o
.getTime
) != 'function') {
1810 Dygraph
.clone
= function(o
) {
1811 // TODO(danvk): figure out how MochiKit's version works
1813 for (var i
= 0; i
< o
.length
; i
++) {
1814 if (Dygraph
.isArrayLike(o
[i
])) {
1815 r
.push(Dygraph
.clone(o
[i
]));
1825 * Get the CSV data. If it's in a function, call that function. If it's in a
1826 * file, do an XMLHttpRequest to get it.
1829 Dygraph
.prototype.start_
= function() {
1830 if (typeof this.file_
== 'function') {
1831 // CSV string. Pretend we got it via XHR.
1832 this.loadedEvent_(this.file_());
1833 } else if (Dygraph
.isArrayLike(this.file_
)) {
1834 this.rawData_
= this.parseArray_(this.file_
);
1835 this.drawGraph_(this.rawData_
);
1836 } else if (typeof this.file_
== 'object' &&
1837 typeof this.file_
.getColumnRange
== 'function') {
1838 // must be a DataTable from gviz.
1839 this.rawData_
= this.parseDataTable_(this.file_
);
1840 this.drawGraph_(this.rawData_
);
1841 } else if (typeof this.file_
== 'string') {
1842 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1843 if (this.file_
.indexOf('\n') >= 0) {
1844 this.loadedEvent_(this.file_
);
1846 var req
= new XMLHttpRequest();
1848 req
.onreadystatechange
= function () {
1849 if (req
.readyState
== 4) {
1850 if (req
.status
== 200) {
1851 caller
.loadedEvent_(req
.responseText
);
1856 req
.open("GET", this.file_
, true);
1860 this.error("Unknown data format: " + (typeof this.file_
));
1865 * Changes various properties of the graph. These can include:
1867 * <li>file: changes the source data for the graph</li>
1868 * <li>errorBars: changes whether the data contains stddev</li>
1870 * @param {Object} attrs The new properties and values
1872 Dygraph
.prototype.updateOptions
= function(attrs
) {
1873 // TODO(danvk): this is a mess. Rethink this function.
1874 if (attrs
.rollPeriod
) {
1875 this.rollPeriod_
= attrs
.rollPeriod
;
1877 if (attrs
.dateWindow
) {
1878 this.dateWindow_
= attrs
.dateWindow
;
1880 if (attrs
.valueRange
) {
1881 this.valueRange_
= attrs
.valueRange
;
1883 Dygraph
.update(this.user_attrs_
, attrs
);
1885 this.labelsFromCSV_
= (this.attr_("labels") == null);
1887 // TODO(danvk): this doesn't match the constructor logic
1888 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1889 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1890 this.file_
= attrs
['file'];
1893 this.drawGraph_(this.rawData_
);
1898 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1899 * containing div (which has presumably changed size since the dygraph was
1900 * instantiated. If the width/height are specified, the div will be resized.
1902 * This is far more efficient than destroying and re-instantiating a
1903 * Dygraph, since it doesn't have to reparse the underlying data.
1905 * @param {Number} width Width (in pixels)
1906 * @param {Number} height Height (in pixels)
1908 Dygraph
.prototype.resize
= function(width
, height
) {
1909 if ((width
=== null) != (height
=== null)) {
1910 this.warn("Dygraph.resize() should be called with zero parameters or " +
1911 "two non-NULL parameters. Pretending it was zero.");
1912 width
= height
= null;
1915 // TODO(danvk): there should be a clear() method.
1916 this.maindiv_
.innerHTML
= "";
1917 this.attrs_
.labelsDiv
= null;
1920 this.maindiv_
.style
.width
= width
+ "px";
1921 this.maindiv_
.style
.height
= height
+ "px";
1922 this.width_
= width
;
1923 this.height_
= height
;
1925 this.width_
= this.maindiv_
.offsetWidth
;
1926 this.height_
= this.maindiv_
.offsetHeight
;
1929 this.createInterface_();
1930 this.drawGraph_(this.rawData_
);
1934 * Adjusts the number of days in the rolling average. Updates the graph to
1935 * reflect the new averaging period.
1936 * @param {Number} length Number of days over which to average the data.
1938 Dygraph
.prototype.adjustRoll
= function(length
) {
1939 this.rollPeriod_
= length
;
1940 this.drawGraph_(this.rawData_
);
1944 * Returns a boolean array of visibility statuses.
1946 Dygraph
.prototype.visibility
= function() {
1947 // Do lazy-initialization, so that this happens after we know the number of
1949 if (!this.attr_("visibility")) {
1950 this.attrs_
["visibility"] = [];
1952 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
1953 this.attr_("visibility").push(true);
1955 return this.attr_("visibility");
1959 * Changes the visiblity of a series.
1961 Dygraph
.prototype.setVisibility
= function(num
, value
) {
1962 var x
= this.visibility();
1963 if (num
< 0 && num
>= x
.length
) {
1964 this.warn("invalid series number in setVisibility: " + num
);
1967 this.drawGraph_(this.rawData_
);
1972 * Create a new canvas element. This is more complex than a simple
1973 * document.createElement("canvas") because of IE and excanvas.
1975 Dygraph
.createCanvas
= function() {
1976 var canvas
= document
.createElement("canvas");
1978 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1980 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1988 * A wrapper around Dygraph that implements the gviz API.
1989 * @param {Object} container The DOM object the visualization should live in.
1991 Dygraph
.GVizChart
= function(container
) {
1992 this.container
= container
;
1995 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1996 this.container
.innerHTML
= '';
1997 this.date_graph
= new Dygraph(this.container
, data
, options
);
2000 // Older pages may still use this name.
2001 DateGraph
= Dygraph
;