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
,
114 wilsonInterval
: true, // only relevant if fractions is true
118 // Various logging levels.
124 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
125 // Labels is no longer a constructor parameter, since it's typically set
126 // directly from the data source. It also conains a name for the x-axis,
127 // which the previous constructor form did not.
128 if (labels
!= null) {
129 var new_labels
= ["Date"];
130 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
131 Dygraph
.update(attrs
, { 'labels': new_labels
});
133 this.__init__(div
, file
, attrs
);
137 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
138 * and interaction <canvas> inside of it. See the constructor for details
140 * @param {String | Function} file Source data
141 * @param {Array.<String>} labels Names of the data series
142 * @param {Object} attrs Miscellaneous other options
145 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
146 // Support two-argument constructor
147 if (attrs
== null) { attrs
= {}; }
149 // Copy the important bits into the object
150 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
153 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
154 this.previousVerticalX_
= -1;
155 this.fractions_
= attrs
.fractions
|| false;
156 this.dateWindow_
= attrs
.dateWindow
|| null;
157 this.valueRange_
= attrs
.valueRange
|| null;
158 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
160 // Clear the div. This ensure that, if multiple dygraphs are passed the same
161 // div, then only one will be drawn.
164 // If the div isn't already sized then give it a default size.
165 if (div
.style
.width
== '') {
166 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
168 if (div
.style
.height
== '') {
169 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
171 this.width_
= parseInt(div
.style
.width
, 10);
172 this.height_
= parseInt(div
.style
.height
, 10);
174 // Dygraphs has many options, some of which interact with one another.
175 // To keep track of everything, we maintain two sets of options:
177 // this.user_attrs_ only options explicitly set by the user.
178 // this.attrs_ defaults, options derived from user_attrs_, data.
180 // Options are then accessed this.attr_('attr'), which first looks at
181 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
182 // defaults without overriding behavior that the user specifically asks for.
183 this.user_attrs_
= {};
184 Dygraph
.update(this.user_attrs_
, attrs
);
187 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
189 // Make a note of whether labels will be pulled from the CSV file.
190 this.labelsFromCSV_
= (this.attr_("labels") == null);
192 // Create the containing DIV and other interactive elements
193 this.createInterface_();
198 Dygraph
.prototype.attr_
= function(name
) {
199 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
200 return this.user_attrs_
[name
];
201 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
202 return this.attrs_
[name
];
208 // TODO(danvk): any way I can get the line numbers to be this.warn call?
209 Dygraph
.prototype.log
= function(severity
, message
) {
210 if (typeof(console
) != 'undefined') {
213 console
.debug('dygraphs: ' + message
);
216 console
.info('dygraphs: ' + message
);
218 case Dygraph
.WARNING
:
219 console
.warn('dygraphs: ' + message
);
222 console
.error('dygraphs: ' + message
);
227 Dygraph
.prototype.info
= function(message
) {
228 this.log(Dygraph
.INFO
, message
);
230 Dygraph
.prototype.warn
= function(message
) {
231 this.log(Dygraph
.WARNING
, message
);
233 Dygraph
.prototype.error
= function(message
) {
234 this.log(Dygraph
.ERROR
, message
);
238 * Returns the current rolling period, as set by the user or an option.
239 * @return {Number} The number of days in the rolling window
241 Dygraph
.prototype.rollPeriod
= function() {
242 return this.rollPeriod_
;
245 Dygraph
.addEvent
= function(el
, evt
, fn
) {
246 var normed_fn
= function(e
) {
247 if (!e
) var e
= window
.event
;
250 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
251 el
.addEventListener(evt
, normed_fn
, false);
253 el
.attachEvent('on' + evt
, normed_fn
);
258 * Generates interface elements for the Dygraph: a containing div, a div to
259 * display the current point, and a textbox to adjust the rolling average
260 * period. Also creates the Renderer/Layout elements.
263 Dygraph
.prototype.createInterface_
= function() {
264 // Create the all-enclosing graph div
265 var enclosing
= this.maindiv_
;
267 this.graphDiv
= document
.createElement("div");
268 this.graphDiv
.style
.width
= this.width_
+ "px";
269 this.graphDiv
.style
.height
= this.height_
+ "px";
270 enclosing
.appendChild(this.graphDiv
);
272 // Create the canvas for interactive parts of the chart.
273 // this.canvas_ = document.createElement("canvas");
274 this.canvas_
= Dygraph
.createCanvas();
275 this.canvas_
.style
.position
= "absolute";
276 this.canvas_
.width
= this.width_
;
277 this.canvas_
.height
= this.height_
;
278 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
279 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
280 this.graphDiv
.appendChild(this.canvas_
);
282 // ... and for static parts of the chart.
283 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
286 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
287 dygraph
.mouseMove_(e
);
289 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
290 dygraph
.mouseOut_(e
);
293 // Create the grapher
294 // TODO(danvk): why does the Layout need its own set of options?
295 this.layoutOptions_
= { 'xOriginIsZero': false };
296 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
297 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
298 Dygraph
.update(this.layoutOptions_
, {
299 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
301 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
303 // TODO(danvk): why does the Renderer need its own set of options?
304 this.renderOptions_
= { colorScheme
: this.colors_
,
306 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
307 Dygraph
.update(this.renderOptions_
, this.attrs_
);
308 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
309 this.plotter_
= new DygraphCanvasRenderer(this,
310 this.hidden_
, this.layout_
,
311 this.renderOptions_
);
313 this.createStatusMessage_();
314 this.createRollInterface_();
315 this.createDragInterface_();
319 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
320 * this particular canvas. All Dygraph work is done on this.canvas_.
321 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
322 * @return {Object} The newly-created canvas
325 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
326 // var h = document.createElement("canvas");
327 var h
= Dygraph
.createCanvas();
328 h
.style
.position
= "absolute";
329 h
.style
.top
= canvas
.style
.top
;
330 h
.style
.left
= canvas
.style
.left
;
331 h
.width
= this.width_
;
332 h
.height
= this.height_
;
333 h
.style
.width
= this.width_
+ "px"; // for IE
334 h
.style
.height
= this.height_
+ "px"; // for IE
335 this.graphDiv
.appendChild(h
);
339 // Taken from MochiKit.Color
340 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
344 if (saturation
=== 0) {
349 var i
= Math
.floor(hue
* 6);
350 var f
= (hue
* 6) - i
;
351 var p
= value
* (1 - saturation
);
352 var q
= value
* (1 - (saturation
* f
));
353 var t
= value
* (1 - (saturation
* (1 - f
)));
355 case 1: red
= q
; green
= value
; blue
= p
; break;
356 case 2: red
= p
; green
= value
; blue
= t
; break;
357 case 3: red
= p
; green
= q
; blue
= value
; break;
358 case 4: red
= t
; green
= p
; blue
= value
; break;
359 case 5: red
= value
; green
= p
; blue
= q
; break;
360 case 6: // fall through
361 case 0: red
= value
; green
= t
; blue
= p
; break;
364 red
= Math
.floor(255 * red
+ 0.5);
365 green
= Math
.floor(255 * green
+ 0.5);
366 blue
= Math
.floor(255 * blue
+ 0.5);
367 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
372 * Generate a set of distinct colors for the data series. This is done with a
373 * color wheel. Saturation/Value are customizable, and the hue is
374 * equally-spaced around the color wheel. If a custom set of colors is
375 * specified, that is used instead.
378 Dygraph
.prototype.setColors_
= function() {
379 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
380 // away with this.renderOptions_.
381 var num
= this.attr_("labels").length
- 1;
383 var colors
= this.attr_('colors');
385 var sat
= this.attr_('colorSaturation') || 1.0;
386 var val
= this.attr_('colorValue') || 0.5;
387 for (var i
= 1; i
<= num
; i
++) {
388 var hue
= (1.0*i
/(1+num
));
389 this.colors_
.push( Dygraph
.hsvToRGB(hue
, sat
, val
) );
392 for (var i
= 0; i
< num
; i
++) {
393 var colorStr
= colors
[i
% colors
.length
];
394 this.colors_
.push(colorStr
);
398 // TODO(danvk): update this w/r
/t/ the
new options system
.
399 this.renderOptions_
.colorScheme
= this.colors_
;
400 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
401 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
402 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
405 // The following functions are from quirksmode.org
406 // http://www.quirksmode.org/js
/findpos
.html
407 Dygraph
.findPosX
= function(obj
) {
409 if (obj
.offsetParent
) {
410 while (obj
.offsetParent
) {
411 curleft
+= obj
.offsetLeft
;
412 obj
= obj
.offsetParent
;
420 Dygraph
.findPosY
= function(obj
) {
422 if (obj
.offsetParent
) {
423 while (obj
.offsetParent
) {
424 curtop
+= obj
.offsetTop
;
425 obj
= obj
.offsetParent
;
434 * Create the div that contains information on the selected point(s)
435 * This goes in the top right of the canvas, unless an external div has already
439 Dygraph
.prototype.createStatusMessage_
= function(){
440 if (!this.attr_("labelsDiv")) {
441 var divWidth
= this.attr_('labelsDivWidth');
443 "position": "absolute",
446 "width": divWidth
+ "px",
448 "left": (this.width_
- divWidth
- 2) + "px",
449 "background": "white",
451 "overflow": "hidden"};
452 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
453 var div
= document
.createElement("div");
454 for (var name
in messagestyle
) {
455 if (messagestyle
.hasOwnProperty(name
)) {
456 div
.style
[name
] = messagestyle
[name
];
459 this.graphDiv
.appendChild(div
);
460 this.attrs_
.labelsDiv
= div
;
465 * Create the text box to adjust the averaging period
466 * @return {Object} The newly-created text box
469 Dygraph
.prototype.createRollInterface_
= function() {
470 var display
= this.attr_('showRoller') ? "block" : "none";
471 var textAttr
= { "position": "absolute",
473 "top": (this.plotter_
.area
.h
- 25) + "px",
474 "left": (this.plotter_
.area
.x
+ 1) + "px",
477 var roller
= document
.createElement("input");
478 roller
.type
= "text";
480 roller
.value
= this.rollPeriod_
;
481 for (var name
in textAttr
) {
482 if (textAttr
.hasOwnProperty(name
)) {
483 roller
.style
[name
] = textAttr
[name
];
487 var pa
= this.graphDiv
;
488 pa
.appendChild(roller
);
490 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
494 // These functions are taken from MochiKit.Signal
495 Dygraph
.pageX
= function(e
) {
497 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
500 var b
= document
.body
;
502 (de
.scrollLeft
|| b
.scrollLeft
) -
503 (de
.clientLeft
|| 0);
507 Dygraph
.pageY
= function(e
) {
509 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
512 var b
= document
.body
;
514 (de
.scrollTop
|| b
.scrollTop
) -
520 * Set up all the mouse handlers needed to capture dragging behavior for zoom
524 Dygraph
.prototype.createDragInterface_
= function() {
527 // Tracks whether the mouse is down right now
528 var isZooming
= false;
529 var dragStartX
= null;
530 var dragStartY
= null;
534 var draggingDate
= null;
535 var dateRange
= null;
537 // Utility function to convert page-wide coordinates to canvas coords
540 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
541 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
543 // Draw zoom rectangles when the mouse is down and the user moves around
544 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
546 dragEndX
= getX(event
);
547 dragEndY
= getY(event
);
549 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
551 } else if (isPanning
) {
552 dragEndX
= getX(event
);
553 dragEndY
= getY(event
);
555 // Want to have it so that:
556 // 1. draggingDate appears at dragEndX
557 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
559 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
560 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
561 self
.drawGraph_(self
.rawData_
);
565 // Track the beginning of drag events
566 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
567 px
= Dygraph
.findPosX(self
.canvas_
);
568 py
= Dygraph
.findPosY(self
.canvas_
);
569 dragStartX
= getX(event
);
570 dragStartY
= getY(event
);
573 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
575 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
576 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
583 // If the user releases the mouse button during a drag, but not over the
584 // canvas, then it doesn't count as a zooming action.
585 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
586 if (isZooming
|| isPanning
) {
599 // Temporarily cancel the dragging event when the mouse leaves the graph
600 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
607 // If the mouse is released on the canvas during a drag event, then it's a
608 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
609 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
612 dragEndX
= getX(event
);
613 dragEndY
= getY(event
);
614 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
615 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
617 if (regionWidth
< 2 && regionHeight
< 2 &&
618 self
.attr_('clickCallback') != null &&
619 self
.lastx_
!= undefined
) {
620 // TODO(danvk): pass along more info about the points.
621 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
624 if (regionWidth
>= 10) {
625 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
626 Math
.max(dragStartX
, dragEndX
));
628 self
.canvas_
.getContext("2d").clearRect(0, 0,
630 self
.canvas_
.height
);
644 // Double-clicking zooms back out
645 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
646 if (self
.dateWindow_
== null) return;
647 self
.dateWindow_
= null;
648 self
.drawGraph_(self
.rawData_
);
649 var minDate
= self
.rawData_
[0][0];
650 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
651 if (self
.attr_("zoomCallback")) {
652 self
.attr_("zoomCallback")(minDate
, maxDate
);
658 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
659 * up any previous zoom rectangles that were drawn. This could be optimized to
660 * avoid extra redrawing, but it's tricky to avoid interactions with the status
662 * @param {Number} startX The X position where the drag started, in canvas
664 * @param {Number} endX The current X position of the drag, in canvas coords.
665 * @param {Number} prevEndX The value of endX on the previous call to this
666 * function. Used to avoid excess redrawing
669 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
670 var ctx
= this.canvas_
.getContext("2d");
672 // Clean up from the previous rect if necessary
674 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
675 Math
.abs(startX
- prevEndX
), this.height_
);
678 // Draw a light-grey rectangle to show the new viewing area
679 if (endX
&& startX
) {
680 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
681 ctx
.fillRect(Math
.min(startX
, endX
), 0,
682 Math
.abs(endX
- startX
), this.height_
);
687 * Zoom to something containing [lowX, highX]. These are pixel coordinates
688 * in the canvas. The exact zoom window may be slightly larger if there are no
689 * data points near lowX or highX. This function redraws the graph.
690 * @param {Number} lowX The leftmost pixel value that should be visible.
691 * @param {Number} highX The rightmost pixel value that should be visible.
694 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
695 // Find the earliest and latest dates contained in this canvasx range.
696 var points
= this.layout_
.points
;
699 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
700 for (var i
= 0; i
< points
.length
; i
++) {
701 var cx
= points
[i
].canvasx
;
702 var x
= points
[i
].xval
;
703 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
704 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
706 // Use the extremes if either is missing
707 if (minDate
== null) minDate
= points
[0].xval
;
708 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
710 this.dateWindow_
= [minDate
, maxDate
];
711 this.drawGraph_(this.rawData_
);
712 if (this.attr_("zoomCallback")) {
713 this.attr_("zoomCallback")(minDate
, maxDate
);
718 * When the mouse moves in the canvas, display information about a nearby data
719 * point and draw dots over those points in the data series. This function
720 * takes care of cleanup of previously-drawn dots.
721 * @param {Object} event The mousemove event from the browser.
724 Dygraph
.prototype.mouseMove_
= function(event
) {
725 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
726 var points
= this.layout_
.points
;
731 // Loop through all the points and find the date nearest to our current
733 var minDist
= 1e+100;
735 for (var i
= 0; i
< points
.length
; i
++) {
736 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
737 if (dist
> minDist
) break;
741 if (idx
>= 0) lastx
= points
[idx
].xval
;
742 // Check that you can really highlight the last day's data
743 if (canvasx
> points
[points
.length
-1].canvasx
)
744 lastx
= points
[points
.length
-1].xval
;
746 // Extract the points we've selected
747 this.selPoints_
= [];
748 for (var i
= 0; i
< points
.length
; i
++) {
749 if (points
[i
].xval
== lastx
) {
750 this.selPoints_
.push(points
[i
]);
754 if (this.attr_("highlightCallback")) {
755 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
758 // Clear the previously drawn vertical, if there is one
759 var circleSize
= this.attr_('highlightCircleSize');
760 var ctx
= this.canvas_
.getContext("2d");
761 if (this.previousVerticalX_
>= 0) {
762 var px
= this.previousVerticalX_
;
763 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
766 var isOK
= function(x
) { return x
&& !isNaN(x
); };
768 if (this.selPoints_
.length
> 0) {
769 var canvasx
= this.selPoints_
[0].canvasx
;
771 // Set the status message to indicate the selected point(s)
772 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
773 var clen
= this.colors_
.length
;
774 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
775 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
776 if (this.attr_("labelsSeparateLines")) {
779 var point
= this.selPoints_
[i
];
780 var c
= new RGBColor(this.colors_
[i
%clen
]);
781 replace
+= " <b><font color='" + c
.toHex() + "'>"
782 + point
.name
+ "</font></b>:"
783 + this.round_(point
.yval
, 2);
785 this.attr_("labelsDiv").innerHTML
= replace
;
787 // Save last x position for callbacks.
790 // Draw colored circles over the center of each selected point
792 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
793 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
795 ctx
.fillStyle
= this.colors_
[i
%clen
];
796 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
797 0, 2 * Math
.PI
, false);
802 this.previousVerticalX_
= canvasx
;
807 * The mouse has left the canvas. Clear out whatever artifacts remain
808 * @param {Object} event the mouseout event from the browser.
811 Dygraph
.prototype.mouseOut_
= function(event
) {
812 // Get rid of the overlay data
813 var ctx
= this.canvas_
.getContext("2d");
814 ctx
.clearRect(0, 0, this.width_
, this.height_
);
815 this.attr_("labelsDiv").innerHTML
= "";
818 Dygraph
.zeropad
= function(x
) {
819 if (x
< 10) return "0" + x
; else return "" + x
;
823 * Return a string version of the hours, minutes and seconds portion of a date.
824 * @param {Number} date The JavaScript date (ms since epoch)
825 * @return {String} A time of the form "HH:MM:SS"
828 Dygraph
.prototype.hmsString_
= function(date
) {
829 var zeropad
= Dygraph
.zeropad
;
830 var d
= new Date(date
);
831 if (d
.getSeconds()) {
832 return zeropad(d
.getHours()) + ":" +
833 zeropad(d
.getMinutes()) + ":" +
834 zeropad(d
.getSeconds());
835 } else if (d
.getMinutes()) {
836 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
838 return zeropad(d
.getHours());
843 * Convert a JS date (millis since epoch) to YYYY/MM/DD
844 * @param {Number} date The JavaScript date (ms since epoch)
845 * @return {String} A date of the form "YYYY/MM/DD"
847 * TODO(danvk): why is this part of the prototype?
849 Dygraph
.dateString_
= function(date
, self
) {
850 var zeropad
= Dygraph
.zeropad
;
851 var d
= new Date(date
);
854 var year
= "" + d
.getFullYear();
855 // Get a 0 padded month string
856 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
857 // Get a 0 padded day string
858 var day
= zeropad(d
.getDate());
861 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
862 if (frac
) ret
= " " + self
.hmsString_(date
);
864 return year
+ "/" + month + "/" + day
+ ret
;
868 * Round a number to the specified number of digits past the decimal point.
869 * @param {Number} num The number to round
870 * @param {Number} places The number of decimals to which to round
871 * @return {Number} The rounded number
874 Dygraph
.prototype.round_
= function(num
, places
) {
875 var shift
= Math
.pow(10, places
);
876 return Math
.round(num
* shift
)/shift
;
880 * Fires when there's data available to be graphed.
881 * @param {String} data Raw CSV data to be plotted
884 Dygraph
.prototype.loadedEvent_
= function(data
) {
885 this.rawData_
= this.parseCSV_(data
);
886 this.drawGraph_(this.rawData_
);
889 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
890 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
891 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
894 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
897 Dygraph
.prototype.addXTicks_
= function() {
898 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
899 var startDate
, endDate
;
900 if (this.dateWindow_
) {
901 startDate
= this.dateWindow_
[0];
902 endDate
= this.dateWindow_
[1];
904 startDate
= this.rawData_
[0][0];
905 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
908 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
909 this.layout_
.updateOptions({xTicks
: xTicks
});
912 // Time granularity enumeration
913 Dygraph
.SECONDLY
= 0;
914 Dygraph
.TEN_SECONDLY
= 1;
915 Dygraph
.THIRTY_SECONDLY
= 2;
916 Dygraph
.MINUTELY
= 3;
917 Dygraph
.TEN_MINUTELY
= 4;
918 Dygraph
.THIRTY_MINUTELY
= 5;
920 Dygraph
.SIX_HOURLY
= 7;
923 Dygraph
.MONTHLY
= 10;
924 Dygraph
.QUARTERLY
= 11;
925 Dygraph
.BIANNUAL
= 12;
927 Dygraph
.DECADAL
= 14;
928 Dygraph
.NUM_GRANULARITIES
= 15;
930 Dygraph
.SHORT_SPACINGS
= [];
931 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
932 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
933 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
934 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
935 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
936 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
937 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
938 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
939 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
940 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
944 // If we used this time granularity, how many ticks would there be?
945 // This is only an approximation, but it's generally good enough.
947 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
948 if (granularity
< Dygraph
.MONTHLY
) {
949 // Generate one tick mark for every fixed interval of time.
950 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
951 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
953 var year_mod
= 1; // e.g. to only print one point every 10 years.
955 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
956 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
957 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
958 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
960 var msInYear
= 365.2524 * 24 * 3600 * 1000;
961 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
962 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
968 // Construct an x-axis of nicely-formatted times on meaningful boundaries
969 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
971 // Returns an array containing {v: millis, label: label} dictionaries.
973 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
975 if (granularity
< Dygraph
.MONTHLY
) {
976 // Generate one tick mark for every fixed interval of time.
977 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
978 var format
= '%d%b'; // e.g. "1Jan"
979 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
980 if (granularity
< Dygraph
.HOURLY
) {
981 start_time
= spacing
* Math
.floor(0.5 + start_time
/ spacing
);
983 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
985 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
986 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
987 // the extra hour covers DST problems.
988 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
990 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
994 // Display a tick mark on the first of a set of months of each year.
995 // Years get a tick mark iff y % year_mod == 0. This is useful for
996 // displaying a tick mark once every 10 years, say, on long time scales.
998 var year_mod
= 1; // e.g. to only print one point every 10 years.
1000 if (granularity
== Dygraph
.MONTHLY
) {
1001 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1002 } else if (granularity
== Dygraph
.QUARTERLY
) {
1003 months
= [ 0, 3, 6, 9 ];
1004 } else if (granularity
== Dygraph
.BIANNUAL
) {
1006 } else if (granularity
== Dygraph
.ANNUAL
) {
1008 } else if (granularity
== Dygraph
.DECADAL
) {
1013 var start_year
= new Date(start_time
).getFullYear();
1014 var end_year
= new Date(end_time
).getFullYear();
1015 var zeropad
= Dygraph
.zeropad
;
1016 for (var i
= start_year
; i
<= end_year
; i
++) {
1017 if (i
% year_mod
!= 0) continue;
1018 for (var j
= 0; j
< months
.length
; j
++) {
1019 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1020 var t
= Date
.parse(date_str
);
1021 if (t
< start_time
|| t
> end_time
) continue;
1022 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1032 * Add ticks to the x-axis based on a date range.
1033 * @param {Number} startDate Start of the date window (millis since epoch)
1034 * @param {Number} endDate End of the date window (millis since epoch)
1035 * @return {Array.<Object>} Array of {label, value} tuples.
1038 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1040 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1041 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1042 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1049 return self
.GetXAxis(startDate
, endDate
, chosen
);
1051 // TODO(danvk): signal error.
1056 * Add ticks when the x axis has numbers on it (instead of dates)
1057 * @param {Number} startDate Start of the date window (millis since epoch)
1058 * @param {Number} endDate End of the date window (millis since epoch)
1059 * @return {Array.<Object>} Array of {label, value} tuples.
1062 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1064 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1065 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1066 // The first spacing greater than pixelsPerYLabel is what we use.
1067 var mults
= [1, 2, 5];
1068 var scale
, low_val
, high_val
, nTicks
;
1069 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1070 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1071 for (var i
= -10; i
< 50; i
++) {
1072 var base_scale
= Math
.pow(10, i
);
1073 for (var j
= 0; j
< mults
.length
; j
++) {
1074 scale
= base_scale
* mults
[j
];
1075 low_val
= Math
.floor(minV
/ scale
) * scale
;
1076 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1077 nTicks
= (high_val
- low_val
) / scale
;
1078 var spacing
= self
.height_
/ nTicks
;
1079 // wish I could break out of both loops at once...
1080 if (spacing
> pixelsPerTick
) break;
1082 if (spacing
> pixelsPerTick
) break;
1085 // Construct labels for the ticks
1089 if (self
.attr_("labelsKMB")) {
1091 k_labels
= [ "K", "M", "B", "T" ];
1093 if (self
.attr_("labelsKMG2")) {
1094 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1096 k_labels
= [ "k", "M", "G", "T" ];
1099 for (var i
= 0; i
< nTicks
; i
++) {
1100 var tickV
= low_val
+ i
* scale
;
1101 var absTickV
= Math
.abs(tickV
);
1102 var label
= self
.round_(tickV
, 2);
1103 if (k_labels
.length
) {
1104 // Round up to an appropriate unit.
1106 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1107 if (absTickV
>= n
) {
1108 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1113 ticks
.push( {label
: label
, v
: tickV
} );
1119 * Adds appropriate ticks on the y-axis
1120 * @param {Number} minY The minimum Y value in the data set
1121 * @param {Number} maxY The maximum Y value in the data set
1124 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1125 // Set the number of ticks so that the labels are human-friendly.
1126 // TODO(danvk): make this an attribute as well.
1127 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1128 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1132 // Computes the range of the data series (including confidence intervals).
1133 // series is either [ [x1, y1], [x2, y2], ... ] or
1134 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1135 // Returns [low, high]
1136 Dygraph
.prototype.extremeValues_
= function(series
) {
1137 var minY
= null, maxY
= null;
1139 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1141 // With custom bars, maxY is the max of the high values.
1142 for (var j
= 0; j
< series
.length
; j
++) {
1143 var y
= series
[j
][1][0];
1145 var low
= y
- series
[j
][1][1];
1146 var high
= y
+ series
[j
][1][2];
1147 if (low
> y
) low
= y
; // this can happen with custom bars,
1148 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1149 if (maxY
== null || high
> maxY
) {
1152 if (minY
== null || low
< minY
) {
1157 for (var j
= 0; j
< series
.length
; j
++) {
1158 var y
= series
[j
][1];
1159 if (y
=== null || isNaN(y
)) continue;
1160 if (maxY
== null || y
> maxY
) {
1163 if (minY
== null || y
< minY
) {
1169 return [minY
, maxY
];
1173 * Update the graph with new data. Data is in the format
1174 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1175 * or, if errorBars=true,
1176 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1177 * @param {Array.<Object>} data The data (see above)
1180 Dygraph
.prototype.drawGraph_
= function(data
) {
1181 var minY
= null, maxY
= null;
1182 this.layout_
.removeAllDatasets();
1184 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1186 // Loop over all fields in the dataset
1187 for (var i
= 1; i
< data
[0].length
; i
++) {
1189 for (var j
= 0; j
< data
.length
; j
++) {
1190 var date
= data
[j
][0];
1191 series
[j
] = [date
, data
[j
][i
]];
1193 series
= this.rollingAverage(series
, this.rollPeriod_
);
1195 // Prune down to the desired range, if necessary (for zooming)
1196 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1197 if (this.dateWindow_
) {
1198 var low
= this.dateWindow_
[0];
1199 var high
= this.dateWindow_
[1];
1201 for (var k
= 0; k
< series
.length
; k
++) {
1202 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1203 pruned
.push(series
[k
]);
1209 var extremes
= this.extremeValues_(series
);
1210 var thisMinY
= extremes
[0];
1211 var thisMaxY
= extremes
[1];
1212 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1213 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1217 for (var j
=0; j
<series
.length
; j
++)
1218 vals
[j
] = [series
[j
][0],
1219 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1220 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1222 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1226 // Use some heuristics to come up with a good maxY value, unless it's been
1227 // set explicitly by the user.
1228 if (this.valueRange_
!= null) {
1229 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1231 // Add some padding and round up to an integer to be human-friendly.
1232 var span
= maxY
- minY
;
1233 var maxAxisY
= maxY
+ 0.1 * span
;
1234 var minAxisY
= minY
- 0.1 * span
;
1236 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1237 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1238 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1240 if (this.attr_("includeZero")) {
1241 if (maxY
< 0) maxAxisY
= 0;
1242 if (minY
> 0) minAxisY
= 0;
1245 this.addYTicks_(minAxisY
, maxAxisY
);
1250 // Tell PlotKit to use this new data and render itself
1251 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1252 this.layout_
.evaluateWithError();
1253 this.plotter_
.clear();
1254 this.plotter_
.render();
1255 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1256 this.canvas_
.height
);
1260 * Calculates the rolling average of a data set.
1261 * If originalData is [label, val], rolls the average of those.
1262 * If originalData is [label, [, it's interpreted as [value, stddev]
1263 * and the roll is returned in the same form, with appropriately reduced
1264 * stddev for each value.
1265 * Note that this is where fractional input (i.e. '5/10') is converted into
1267 * @param {Array} originalData The data in the appropriate format (see above)
1268 * @param {Number} rollPeriod The number of days over which to average the data
1270 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1271 if (originalData
.length
< 2)
1272 return originalData
;
1273 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1274 var rollingData
= [];
1275 var sigma
= this.attr_("sigma");
1277 if (this.fractions_
) {
1279 var den
= 0; // numerator/denominator
1281 for (var i
= 0; i
< originalData
.length
; i
++) {
1282 num
+= originalData
[i
][1][0];
1283 den
+= originalData
[i
][1][1];
1284 if (i
- rollPeriod
>= 0) {
1285 num
-= originalData
[i
- rollPeriod
][1][0];
1286 den
-= originalData
[i
- rollPeriod
][1][1];
1289 var date
= originalData
[i
][0];
1290 var value
= den
? num
/ den
: 0.0;
1291 if (this.attr_("errorBars")) {
1292 if (this.wilsonInterval_
) {
1293 // For more details on this confidence interval, see:
1294 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1296 var p
= value
< 0 ? 0 : value
, n
= den
;
1297 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1298 var denom
= 1 + sigma
* sigma
/ den
;
1299 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1300 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1301 rollingData
[i
] = [date
,
1302 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1304 rollingData
[i
] = [date
, [0, 0, 0]];
1307 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1308 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1311 rollingData
[i
] = [date
, mult
* value
];
1314 } else if (this.attr_("customBars")) {
1319 for (var i
= 0; i
< originalData
.length
; i
++) {
1320 var data
= originalData
[i
][1];
1322 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1324 if (y
!= null && !isNaN(y
)) {
1330 if (i
- rollPeriod
>= 0) {
1331 var prev
= originalData
[i
- rollPeriod
];
1332 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1339 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1340 1.0 * (mid
- low
) / count
,
1341 1.0 * (high
- mid
) / count
]];
1344 // Calculate the rolling average for the first rollPeriod - 1 points where
1345 // there is not enough data to roll over the full number of days
1346 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1347 if (!this.attr_("errorBars")){
1348 if (rollPeriod
== 1) {
1349 return originalData
;
1352 for (var i
= 0; i
< originalData
.length
; i
++) {
1355 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1356 var y
= originalData
[j
][1];
1357 if (y
== null || isNaN(y
)) continue;
1359 sum
+= originalData
[j
][1];
1362 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1364 rollingData
[i
] = [originalData
[i
][0], null];
1369 for (var i
= 0; i
< originalData
.length
; i
++) {
1373 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1374 var y
= originalData
[j
][1][0];
1375 if (y
== null || isNaN(y
)) continue;
1377 sum
+= originalData
[j
][1][0];
1378 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1381 var stddev
= Math
.sqrt(variance
) / num_ok
;
1382 rollingData
[i
] = [originalData
[i
][0],
1383 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1385 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1395 * Parses a date, returning the number of milliseconds since epoch. This can be
1396 * passed in as an xValueParser in the Dygraph constructor.
1397 * TODO(danvk): enumerate formats that this understands.
1398 * @param {String} A date in YYYYMMDD format.
1399 * @return {Number} Milliseconds since epoch.
1402 Dygraph
.dateParser
= function(dateStr
, self
) {
1405 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1406 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1407 while (dateStrSlashed
.search("-") != -1) {
1408 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1410 d
= Date
.parse(dateStrSlashed
);
1411 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1412 // TODO(danvk): remove support for this format. It's confusing.
1413 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1414 + "/" + dateStr
.substr(6,2);
1415 d
= Date
.parse(dateStrSlashed
);
1417 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1418 // "2009/07/12 12:34:56"
1419 d
= Date
.parse(dateStr
);
1422 if (!d
|| isNaN(d
)) {
1423 self
.error("Couldn't parse " + dateStr
+ " as a date");
1429 * Detects the type of the str (date or numeric) and sets the various
1430 * formatting attributes in this.attrs_ based on this type.
1431 * @param {String} str An x value.
1434 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1436 if (str
.indexOf('-') >= 0 ||
1437 str
.indexOf('/') >= 0 ||
1438 isNaN(parseFloat(str
))) {
1440 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1441 // TODO(danvk): remove support for this format.
1446 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1447 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1448 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1450 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1451 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1452 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1457 * Parses a string in a special csv format. We expect a csv file where each
1458 * line is a date point, and the first field in each line is the date string.
1459 * We also expect that all remaining fields represent series.
1460 * if the errorBars attribute is set, then interpret the fields as:
1461 * date, series1, stddev1, series2, stddev2, ...
1462 * @param {Array.<Object>} data See above.
1465 * @return Array.<Object> An array with one entry for each row. These entries
1466 * are an array of cells in that row. The first entry is the parsed x-value for
1467 * the row. The second, third, etc. are the y-values. These can take on one of
1468 * three forms, depending on the CSV and constructor parameters:
1470 * 2. [ value, stddev ]
1471 * 3. [ low value, center value, high value ]
1473 Dygraph
.prototype.parseCSV_
= function(data
) {
1475 var lines
= data
.split("\n");
1477 // Use the default delimiter or fall back to a tab if that makes sense.
1478 var delim
= this.attr_('delimiter');
1479 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1484 if (this.labelsFromCSV_
) {
1486 this.attrs_
.labels
= lines
[0].split(delim
);
1490 var defaultParserSet
= false; // attempt to auto-detect x value type
1491 var expectedCols
= this.attr_("labels").length
;
1492 for (var i
= start
; i
< lines
.length
; i
++) {
1493 var line
= lines
[i
];
1494 if (line
.length
== 0) continue; // skip blank lines
1495 if (line
[0] == '#') continue; // skip comment lines
1496 var inFields
= line
.split(delim
);
1497 if (inFields
.length
< 2) continue;
1500 if (!defaultParserSet
) {
1501 this.detectTypeFromString_(inFields
[0]);
1502 xParser
= this.attr_("xValueParser");
1503 defaultParserSet
= true;
1505 fields
[0] = xParser(inFields
[0], this);
1507 // If fractions are expected, parse the numbers as "A/B
"
1508 if (this.fractions_) {
1509 for (var j = 1; j < inFields.length; j++) {
1510 // TODO(danvk): figure out an appropriate way to flag parse errors.
1511 var vals = inFields[j].split("/");
1512 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1514 } else if (this.attr_("errorBars
")) {
1515 // If there are error bars, values are (value, stddev) pairs
1516 for (var j = 1; j < inFields.length; j += 2)
1517 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1518 parseFloat(inFields[j + 1])];
1519 } else if (this.attr_("customBars
")) {
1520 // Bars are a low;center;high tuple
1521 for (var j = 1; j < inFields.length; j++) {
1522 var vals = inFields[j].split(";");
1523 fields[j] = [ parseFloat(vals[0]),
1524 parseFloat(vals[1]),
1525 parseFloat(vals[2]) ];
1528 // Values are just numbers
1529 for (var j = 1; j < inFields.length; j++) {
1530 fields[j] = parseFloat(inFields[j]);
1535 if (fields.length != expectedCols) {
1536 this.error("Number of columns
in line
" + i + " (" + fields.length +
1537 ") does not agree
with number of
labels (" + expectedCols +
1545 * The user has provided their data as a pre-packaged JS array. If the x values
1546 * are numeric, this is the same as dygraphs' internal format. If the x values
1547 * are dates, we need to convert them from Date objects to ms since epoch.
1548 * @param {Array.<Object>} data
1549 * @return {Array.<Object>} data with numeric x values.
1551 Dygraph.prototype.parseArray_ = function(data) {
1552 // Peek at the first x value to see if it's numeric.
1553 if (data.length == 0) {
1554 this.error("Can
't plot empty data set");
1557 if (data[0].length == 0) {
1558 this.error("Data set cannot contain an empty row");
1562 if (this.attr_("labels") == null) {
1563 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1564 "in the options parameter");
1565 this.attrs_.labels = [ "X" ];
1566 for (var i = 1; i < data[0].length; i++) {
1567 this.attrs_.labels.push("Y" + i);
1571 if (Dygraph.isDateLike(data[0][0])) {
1572 // Some intelligent defaults for a date x-axis.
1573 this.attrs_.xValueFormatter = Dygraph.dateString_;
1574 this.attrs_.xTicker = Dygraph.dateTicker;
1576 // Assume they're all dates
.
1577 var parsedData
= Dygraph
.clone(data
);
1578 for (var i
= 0; i
< data
.length
; i
++) {
1579 if (parsedData
[i
].length
== 0) {
1580 this.error("Row " << (1 + i
) << " of data is empty");
1583 if (parsedData
[i
][0] == null
1584 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1585 this.error("x value in row " << (1 + i
) << " is not a Date");
1588 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1592 // Some intelligent defaults for a numeric x-axis.
1593 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1594 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1600 * Parses a DataTable object from gviz.
1601 * The data is expected to have a first column that is either a date or a
1602 * number. All subsequent columns must be numbers. If there is a clear mismatch
1603 * between this.xValueParser_ and the type of the first column, it will be
1604 * fixed. Returned value is in the same format as return value of parseCSV_.
1605 * @param {Array.<Object>} data See above.
1608 Dygraph
.prototype.parseDataTable_
= function(data
) {
1609 var cols
= data
.getNumberOfColumns();
1610 var rows
= data
.getNumberOfRows();
1612 // Read column labels
1614 for (var i
= 0; i
< cols
; i
++) {
1615 labels
.push(data
.getColumnLabel(i
));
1616 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1618 this.attrs_
.labels
= labels
;
1619 cols
= labels
.length
;
1621 var indepType
= data
.getColumnType(0);
1622 if (indepType
== 'date') {
1623 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1624 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1625 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1626 } else if (indepType
== 'number') {
1627 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1628 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1629 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1631 this.error("only 'date' and 'number' types are supported for column 1 " +
1632 "of DataTable input (Got '" + indepType
+ "')");
1637 for (var i
= 0; i
< rows
; i
++) {
1639 if (!data
.getValue(i
, 0)) continue;
1640 if (indepType
== 'date') {
1641 row
.push(data
.getValue(i
, 0).getTime());
1643 row
.push(data
.getValue(i
, 0));
1645 if (!this.attr_("errorBars")) {
1646 for (var j
= 1; j
< cols
; j
++) {
1647 row
.push(data
.getValue(i
, j
));
1650 for (var j
= 0; j
< cols
- 1; j
++) {
1651 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1659 // These functions are all based on MochiKit.
1660 Dygraph
.update
= function (self
, o
) {
1661 if (typeof(o
) != 'undefined' && o
!== null) {
1663 if (o
.hasOwnProperty(k
)) {
1671 Dygraph
.isArrayLike
= function (o
) {
1672 var typ
= typeof(o
);
1674 (typ
!= 'object' && !(typ
== 'function' &&
1675 typeof(o
.item
) == 'function')) ||
1677 typeof(o
.length
) != 'number' ||
1685 Dygraph
.isDateLike
= function (o
) {
1686 if (typeof(o
) != "object" || o
=== null ||
1687 typeof(o
.getTime
) != 'function') {
1693 Dygraph
.clone
= function(o
) {
1694 // TODO(danvk): figure out how MochiKit's version works
1696 for (var i
= 0; i
< o
.length
; i
++) {
1697 if (Dygraph
.isArrayLike(o
[i
])) {
1698 r
.push(Dygraph
.clone(o
[i
]));
1708 * Get the CSV data. If it's in a function, call that function. If it's in a
1709 * file, do an XMLHttpRequest to get it.
1712 Dygraph
.prototype.start_
= function() {
1713 if (typeof this.file_
== 'function') {
1714 // CSV string. Pretend we got it via XHR.
1715 this.loadedEvent_(this.file_());
1716 } else if (Dygraph
.isArrayLike(this.file_
)) {
1717 this.rawData_
= this.parseArray_(this.file_
);
1718 this.drawGraph_(this.rawData_
);
1719 } else if (typeof this.file_
== 'object' &&
1720 typeof this.file_
.getColumnRange
== 'function') {
1721 // must be a DataTable from gviz.
1722 this.rawData_
= this.parseDataTable_(this.file_
);
1723 this.drawGraph_(this.rawData_
);
1724 } else if (typeof this.file_
== 'string') {
1725 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1726 if (this.file_
.indexOf('\n') >= 0) {
1727 this.loadedEvent_(this.file_
);
1729 var req
= new XMLHttpRequest();
1731 req
.onreadystatechange
= function () {
1732 if (req
.readyState
== 4) {
1733 if (req
.status
== 200) {
1734 caller
.loadedEvent_(req
.responseText
);
1739 req
.open("GET", this.file_
, true);
1743 this.error("Unknown data format: " + (typeof this.file_
));
1748 * Changes various properties of the graph. These can include:
1750 * <li>file: changes the source data for the graph</li>
1751 * <li>errorBars: changes whether the data contains stddev</li>
1753 * @param {Object} attrs The new properties and values
1755 Dygraph
.prototype.updateOptions
= function(attrs
) {
1756 // TODO(danvk): this is a mess. Rethink this function.
1757 if (attrs
.rollPeriod
) {
1758 this.rollPeriod_
= attrs
.rollPeriod
;
1760 if (attrs
.dateWindow
) {
1761 this.dateWindow_
= attrs
.dateWindow
;
1763 if (attrs
.valueRange
) {
1764 this.valueRange_
= attrs
.valueRange
;
1766 Dygraph
.update(this.user_attrs_
, attrs
);
1768 this.labelsFromCSV_
= (this.attr_("labels") == null);
1770 // TODO(danvk): this doesn't match the constructor logic
1771 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1772 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1773 this.file_
= attrs
['file'];
1776 this.drawGraph_(this.rawData_
);
1781 * Resizes the dygraph. If no parameters are specified, resizes to fill the
1782 * containing div (which has presumably changed size since the dygraph was
1783 * instantiated. If the width/height are specified, the div will be resized.
1785 * This is far more efficient than destroying and re-instantiating a
1786 * Dygraph, since it doesn't have to reparse the underlying data.
1788 * @param {Number} width Width (in pixels)
1789 * @param {Number} height Height (in pixels)
1791 Dygraph
.prototype.resize
= function(width
, height
) {
1792 if ((width
=== null) != (height
=== null)) {
1793 this.warn("Dygraph.resize() should be called with zero parameters or " +
1794 "two non-NULL parameters. Pretending it was zero.");
1795 width
= height
= null;
1798 // TODO(danvk): there should be a clear() method.
1799 this.maindiv_
.innerHTML
= "";
1800 this.attrs_
.labelsDiv
= null;
1803 this.maindiv_
.style
.width
= width
+ "px";
1804 this.maindiv_
.style
.height
= height
+ "px";
1805 this.width_
= width
;
1806 this.height_
= height
;
1808 this.width_
= this.maindiv_
.offsetWidth
;
1809 this.height_
= this.maindiv_
.offsetHeight
;
1812 this.createInterface_();
1813 this.drawGraph_(this.rawData_
);
1817 * Adjusts the number of days in the rolling average. Updates the graph to
1818 * reflect the new averaging period.
1819 * @param {Number} length Number of days over which to average the data.
1821 Dygraph
.prototype.adjustRoll
= function(length
) {
1822 this.rollPeriod_
= length
;
1823 this.drawGraph_(this.rawData_
);
1827 * Create a new canvas element. This is more complex than a simple
1828 * document.createElement("canvas") because of IE and excanvas.
1830 Dygraph
.createCanvas
= function() {
1831 var canvas
= document
.createElement("canvas");
1833 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1835 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1843 * A wrapper around Dygraph that implements the gviz API.
1844 * @param {Object} container The DOM object the visualization should live in.
1846 Dygraph
.GVizChart
= function(container
) {
1847 this.container
= container
;
1850 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1851 this.container
.innerHTML
= '';
1852 this.date_graph
= new Dygraph(this.container
, data
, options
);
1855 // Older pages may still use this name.
1856 DateGraph
= Dygraph
;