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_();
195 // Create the PlotKit grapher
196 // TODO(danvk): why does the Layout need its own set of options?
197 this.layoutOptions_
= { 'xOriginIsZero': false };
198 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
199 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
200 Dygraph
.update(this.layoutOptions_
, {
201 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
203 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
205 // TODO(danvk): why does the Renderer need its own set of options?
206 this.renderOptions_
= { colorScheme
: this.colors_
,
208 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
209 Dygraph
.update(this.renderOptions_
, this.attrs_
);
210 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
211 this.plotter_
= new DygraphCanvasRenderer(this,
212 this.hidden_
, this.layout_
,
213 this.renderOptions_
);
215 this.createStatusMessage_();
216 this.createRollInterface_();
217 this.createDragInterface_();
222 Dygraph
.prototype.attr_
= function(name
) {
223 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
224 return this.user_attrs_
[name
];
225 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
226 return this.attrs_
[name
];
232 // TODO(danvk): any way I can get the line numbers to be this.warn call?
233 Dygraph
.prototype.log
= function(severity
, message
) {
234 if (typeof(console
) != 'undefined') {
237 console
.debug('dygraphs: ' + message
);
240 console
.info('dygraphs: ' + message
);
242 case Dygraph
.WARNING
:
243 console
.warn('dygraphs: ' + message
);
246 console
.error('dygraphs: ' + message
);
251 Dygraph
.prototype.info
= function(message
) {
252 this.log(Dygraph
.INFO
, message
);
254 Dygraph
.prototype.warn
= function(message
) {
255 this.log(Dygraph
.WARNING
, message
);
257 Dygraph
.prototype.error
= function(message
) {
258 this.log(Dygraph
.ERROR
, message
);
262 * Returns the current rolling period, as set by the user or an option.
263 * @return {Number} The number of days in the rolling window
265 Dygraph
.prototype.rollPeriod
= function() {
266 return this.rollPeriod_
;
269 Dygraph
.addEvent
= function(el
, evt
, fn
) {
270 var normed_fn
= function(e
) {
271 if (!e
) var e
= window
.event
;
274 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
275 el
.addEventListener(evt
, normed_fn
, false);
277 el
.attachEvent('on' + evt
, normed_fn
);
282 * Generates interface elements for the Dygraph: a containing div, a div to
283 * display the current point, and a textbox to adjust the rolling average
287 Dygraph
.prototype.createInterface_
= function() {
288 // Create the all-enclosing graph div
289 var enclosing
= this.maindiv_
;
291 this.graphDiv
= document
.createElement("div");
292 this.graphDiv
.style
.width
= this.width_
+ "px";
293 this.graphDiv
.style
.height
= this.height_
+ "px";
294 enclosing
.appendChild(this.graphDiv
);
296 // Create the canvas for interactive parts of the chart.
297 // this.canvas_ = document.createElement("canvas");
298 this.canvas_
= Dygraph
.createCanvas();
299 this.canvas_
.style
.position
= "absolute";
300 this.canvas_
.width
= this.width_
;
301 this.canvas_
.height
= this.height_
;
302 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
303 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
304 this.graphDiv
.appendChild(this.canvas_
);
306 // ... and for static parts of the chart.
307 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
310 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
311 dygraph
.mouseMove_(e
);
313 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
314 dygraph
.mouseOut_(e
);
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 mouseDown
= false;
529 var dragStartX
= null;
530 var dragStartY
= null;
535 // Utility function to convert page-wide coordinates to canvas coords
538 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
539 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
541 // Draw zoom rectangles when the mouse is down and the user moves around
542 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
544 dragEndX
= getX(event
);
545 dragEndY
= getY(event
);
547 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
552 // Track the beginning of drag events
553 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
555 px
= Dygraph
.findPosX(self
.canvas_
);
556 py
= Dygraph
.findPosY(self
.canvas_
);
557 dragStartX
= getX(event
);
558 dragStartY
= getY(event
);
561 // If the user releases the mouse button during a drag, but not over the
562 // canvas, then it doesn't count as a zooming action.
563 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
571 // Temporarily cancel the dragging event when the mouse leaves the graph
572 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
579 // If the mouse is released on the canvas during a drag event, then it's a
580 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
581 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
584 dragEndX
= getX(event
);
585 dragEndY
= getY(event
);
586 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
587 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
589 if (regionWidth
< 2 && regionHeight
< 2 &&
590 self
.attr_('clickCallback') != null &&
591 self
.lastx_
!= undefined
) {
592 // TODO(danvk): pass along more info about the points.
593 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
596 if (regionWidth
>= 10) {
597 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
598 Math
.max(dragStartX
, dragEndX
));
600 self
.canvas_
.getContext("2d").clearRect(0, 0,
602 self
.canvas_
.height
);
610 // Double-clicking zooms back out
611 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
612 if (self
.dateWindow_
== null) return;
613 self
.dateWindow_
= null;
614 self
.drawGraph_(self
.rawData_
);
615 var minDate
= self
.rawData_
[0][0];
616 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
617 if (self
.attr_("zoomCallback")) {
618 self
.attr_("zoomCallback")(minDate
, maxDate
);
624 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
625 * up any previous zoom rectangles that were drawn. This could be optimized to
626 * avoid extra redrawing, but it's tricky to avoid interactions with the status
628 * @param {Number} startX The X position where the drag started, in canvas
630 * @param {Number} endX The current X position of the drag, in canvas coords.
631 * @param {Number} prevEndX The value of endX on the previous call to this
632 * function. Used to avoid excess redrawing
635 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
636 var ctx
= this.canvas_
.getContext("2d");
638 // Clean up from the previous rect if necessary
640 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
641 Math
.abs(startX
- prevEndX
), this.height_
);
644 // Draw a light-grey rectangle to show the new viewing area
645 if (endX
&& startX
) {
646 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
647 ctx
.fillRect(Math
.min(startX
, endX
), 0,
648 Math
.abs(endX
- startX
), this.height_
);
653 * Zoom to something containing [lowX, highX]. These are pixel coordinates
654 * in the canvas. The exact zoom window may be slightly larger if there are no
655 * data points near lowX or highX. This function redraws the graph.
656 * @param {Number} lowX The leftmost pixel value that should be visible.
657 * @param {Number} highX The rightmost pixel value that should be visible.
660 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
661 // Find the earliest and latest dates contained in this canvasx range.
662 var points
= this.layout_
.points
;
665 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
666 for (var i
= 0; i
< points
.length
; i
++) {
667 var cx
= points
[i
].canvasx
;
668 var x
= points
[i
].xval
;
669 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
670 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
672 // Use the extremes if either is missing
673 if (minDate
== null) minDate
= points
[0].xval
;
674 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
676 this.dateWindow_
= [minDate
, maxDate
];
677 this.drawGraph_(this.rawData_
);
678 if (this.attr_("zoomCallback")) {
679 this.attr_("zoomCallback")(minDate
, maxDate
);
684 * When the mouse moves in the canvas, display information about a nearby data
685 * point and draw dots over those points in the data series. This function
686 * takes care of cleanup of previously-drawn dots.
687 * @param {Object} event The mousemove event from the browser.
690 Dygraph
.prototype.mouseMove_
= function(event
) {
691 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
692 var points
= this.layout_
.points
;
697 // Loop through all the points and find the date nearest to our current
699 var minDist
= 1e+100;
701 for (var i
= 0; i
< points
.length
; i
++) {
702 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
703 if (dist
> minDist
) break;
707 if (idx
>= 0) lastx
= points
[idx
].xval
;
708 // Check that you can really highlight the last day's data
709 if (canvasx
> points
[points
.length
-1].canvasx
)
710 lastx
= points
[points
.length
-1].xval
;
712 // Extract the points we've selected
713 this.selPoints_
= [];
714 for (var i
= 0; i
< points
.length
; i
++) {
715 if (points
[i
].xval
== lastx
) {
716 this.selPoints_
.push(points
[i
]);
720 if (this.attr_("highlightCallback")) {
721 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
724 // Clear the previously drawn vertical, if there is one
725 var circleSize
= this.attr_('highlightCircleSize');
726 var ctx
= this.canvas_
.getContext("2d");
727 if (this.previousVerticalX_
>= 0) {
728 var px
= this.previousVerticalX_
;
729 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
732 var isOK
= function(x
) { return x
&& !isNaN(x
); };
734 if (this.selPoints_
.length
> 0) {
735 var canvasx
= this.selPoints_
[0].canvasx
;
737 // Set the status message to indicate the selected point(s)
738 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
739 var clen
= this.colors_
.length
;
740 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
741 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
742 if (this.attr_("labelsSeparateLines")) {
745 var point
= this.selPoints_
[i
];
746 var c
= new RGBColor(this.colors_
[i
%clen
]);
747 replace
+= " <b><font color='" + c
.toHex() + "'>"
748 + point
.name
+ "</font></b>:"
749 + this.round_(point
.yval
, 2);
751 this.attr_("labelsDiv").innerHTML
= replace
;
753 // Save last x position for callbacks.
756 // Draw colored circles over the center of each selected point
758 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
759 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
761 ctx
.fillStyle
= this.colors_
[i
%clen
];
762 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
763 0, 2 * Math
.PI
, false);
768 this.previousVerticalX_
= canvasx
;
773 * The mouse has left the canvas. Clear out whatever artifacts remain
774 * @param {Object} event the mouseout event from the browser.
777 Dygraph
.prototype.mouseOut_
= function(event
) {
778 // Get rid of the overlay data
779 var ctx
= this.canvas_
.getContext("2d");
780 ctx
.clearRect(0, 0, this.width_
, this.height_
);
781 this.attr_("labelsDiv").innerHTML
= "";
784 Dygraph
.zeropad
= function(x
) {
785 if (x
< 10) return "0" + x
; else return "" + x
;
789 * Return a string version of the hours, minutes and seconds portion of a date.
790 * @param {Number} date The JavaScript date (ms since epoch)
791 * @return {String} A time of the form "HH:MM:SS"
794 Dygraph
.prototype.hmsString_
= function(date
) {
795 var zeropad
= Dygraph
.zeropad
;
796 var d
= new Date(date
);
797 if (d
.getSeconds()) {
798 return zeropad(d
.getHours()) + ":" +
799 zeropad(d
.getMinutes()) + ":" +
800 zeropad(d
.getSeconds());
801 } else if (d
.getMinutes()) {
802 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
804 return zeropad(d
.getHours());
809 * Convert a JS date (millis since epoch) to YYYY/MM/DD
810 * @param {Number} date The JavaScript date (ms since epoch)
811 * @return {String} A date of the form "YYYY/MM/DD"
813 * TODO(danvk): why is this part of the prototype?
815 Dygraph
.dateString_
= function(date
, self
) {
816 var zeropad
= Dygraph
.zeropad
;
817 var d
= new Date(date
);
820 var year
= "" + d
.getFullYear();
821 // Get a 0 padded month string
822 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
823 // Get a 0 padded day string
824 var day
= zeropad(d
.getDate());
827 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
828 if (frac
) ret
= " " + self
.hmsString_(date
);
830 return year
+ "/" + month + "/" + day
+ ret
;
834 * Round a number to the specified number of digits past the decimal point.
835 * @param {Number} num The number to round
836 * @param {Number} places The number of decimals to which to round
837 * @return {Number} The rounded number
840 Dygraph
.prototype.round_
= function(num
, places
) {
841 var shift
= Math
.pow(10, places
);
842 return Math
.round(num
* shift
)/shift
;
846 * Fires when there's data available to be graphed.
847 * @param {String} data Raw CSV data to be plotted
850 Dygraph
.prototype.loadedEvent_
= function(data
) {
851 this.rawData_
= this.parseCSV_(data
);
852 this.drawGraph_(this.rawData_
);
855 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
856 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
857 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
860 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
863 Dygraph
.prototype.addXTicks_
= function() {
864 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
865 var startDate
, endDate
;
866 if (this.dateWindow_
) {
867 startDate
= this.dateWindow_
[0];
868 endDate
= this.dateWindow_
[1];
870 startDate
= this.rawData_
[0][0];
871 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
874 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
875 this.layout_
.updateOptions({xTicks
: xTicks
});
878 // Time granularity enumeration
879 Dygraph
.SECONDLY
= 0;
880 Dygraph
.TEN_SECONDLY
= 1;
881 Dygraph
.THIRTY_SECONDLY
= 2;
882 Dygraph
.MINUTELY
= 3;
883 Dygraph
.TEN_MINUTELY
= 4;
884 Dygraph
.THIRTY_MINUTELY
= 5;
886 Dygraph
.SIX_HOURLY
= 7;
889 Dygraph
.MONTHLY
= 10;
890 Dygraph
.QUARTERLY
= 11;
891 Dygraph
.BIANNUAL
= 12;
893 Dygraph
.DECADAL
= 14;
894 Dygraph
.NUM_GRANULARITIES
= 15;
896 Dygraph
.SHORT_SPACINGS
= [];
897 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
898 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
899 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
900 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
901 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
902 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
903 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
904 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600 * 6;
905 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
906 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
910 // If we used this time granularity, how many ticks would there be?
911 // This is only an approximation, but it's generally good enough.
913 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
914 if (granularity
< Dygraph
.MONTHLY
) {
915 // Generate one tick mark for every fixed interval of time.
916 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
917 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
919 var year_mod
= 1; // e.g. to only print one point every 10 years.
921 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
922 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
923 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
924 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
926 var msInYear
= 365.2524 * 24 * 3600 * 1000;
927 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
928 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
934 // Construct an x-axis of nicely-formatted times on meaningful boundaries
935 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
937 // Returns an array containing {v: millis, label: label} dictionaries.
939 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
941 if (granularity
< Dygraph
.MONTHLY
) {
942 // Generate one tick mark for every fixed interval of time.
943 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
944 var format
= '%d%b'; // e.g. "1 Jan"
945 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
946 if (granularity
< Dygraph
.HOURLY
) {
947 start_time
= spacing
* Math
.floor(0.5 + start_time
/ spacing
);
949 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
951 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
952 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
953 // the extra hour covers DST problems.
954 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
956 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
960 // Display a tick mark on the first of a set of months of each year.
961 // Years get a tick mark iff y % year_mod == 0. This is useful for
962 // displaying a tick mark once every 10 years, say, on long time scales.
964 var year_mod
= 1; // e.g. to only print one point every 10 years.
966 if (granularity
== Dygraph
.MONTHLY
) {
967 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
968 } else if (granularity
== Dygraph
.QUARTERLY
) {
969 months
= [ 0, 3, 6, 9 ];
970 } else if (granularity
== Dygraph
.BIANNUAL
) {
972 } else if (granularity
== Dygraph
.ANNUAL
) {
974 } else if (granularity
== Dygraph
.DECADAL
) {
979 var start_year
= new Date(start_time
).getFullYear();
980 var end_year
= new Date(end_time
).getFullYear();
981 var zeropad
= Dygraph
.zeropad
;
982 for (var i
= start_year
; i
<= end_year
; i
++) {
983 if (i
% year_mod
!= 0) continue;
984 for (var j
= 0; j
< months
.length
; j
++) {
985 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
986 var t
= Date
.parse(date_str
);
987 if (t
< start_time
|| t
> end_time
) continue;
988 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
998 * Add ticks to the x-axis based on a date range.
999 * @param {Number} startDate Start of the date window (millis since epoch)
1000 * @param {Number} endDate End of the date window (millis since epoch)
1001 * @return {Array.<Object>} Array of {label, value} tuples.
1004 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1006 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1007 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1008 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1015 return self
.GetXAxis(startDate
, endDate
, chosen
);
1017 // TODO(danvk): signal error.
1022 * Add ticks when the x axis has numbers on it (instead of dates)
1023 * @param {Number} startDate Start of the date window (millis since epoch)
1024 * @param {Number} endDate End of the date window (millis since epoch)
1025 * @return {Array.<Object>} Array of {label, value} tuples.
1028 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1030 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1031 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1032 // The first spacing greater than pixelsPerYLabel is what we use.
1033 var mults
= [1, 2, 5];
1034 var scale
, low_val
, high_val
, nTicks
;
1035 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1036 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1037 for (var i
= -10; i
< 50; i
++) {
1038 var base_scale
= Math
.pow(10, i
);
1039 for (var j
= 0; j
< mults
.length
; j
++) {
1040 scale
= base_scale
* mults
[j
];
1041 low_val
= Math
.floor(minV
/ scale
) * scale
;
1042 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1043 nTicks
= (high_val
- low_val
) / scale
;
1044 var spacing
= self
.height_
/ nTicks
;
1045 // wish I could break out of both loops at once...
1046 if (spacing
> pixelsPerTick
) break;
1048 if (spacing
> pixelsPerTick
) break;
1051 // Construct labels for the ticks
1053 for (var i
= 0; i
< nTicks
; i
++) {
1054 var tickV
= low_val
+ i
* scale
;
1055 var label
= self
.round_(tickV
, 2);
1056 if (self
.attr_("labelsKMB")) {
1058 if (tickV
>= k
*k
*k
) {
1059 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "B";
1060 } else if (tickV
>= k
*k
) {
1061 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
1062 } else if (tickV
>= k
) {
1063 label
= self
.round_(tickV
/k
, 1) + "K";
1065 } else if (self
.attr_("labelsKMG2")) {
1067 if (tickV
>= k
*k
*k
) {
1068 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "G";
1069 } else if (tickV
>= k
*k
) {
1070 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
1071 } else if (tickV
>= k
) {
1072 label
= self
.round_(tickV
/k
, 1) + "k";
1075 ticks
.push( {label
: label
, v
: tickV
} );
1081 * Adds appropriate ticks on the y-axis
1082 * @param {Number} minY The minimum Y value in the data set
1083 * @param {Number} maxY The maximum Y value in the data set
1086 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1087 // Set the number of ticks so that the labels are human-friendly.
1088 // TODO(danvk): make this an attribute as well.
1089 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1090 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1094 // Computes the range of the data series (including confidence intervals).
1095 // series is either [ [x1, y1], [x2, y2], ... ] or
1096 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1097 // Returns [low, high]
1098 Dygraph
.prototype.extremeValues_
= function(series
) {
1099 var minY
= null, maxY
= null;
1101 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1103 // With custom bars, maxY is the max of the high values.
1104 for (var j
= 0; j
< series
.length
; j
++) {
1105 var y
= series
[j
][1][0];
1107 var low
= y
- series
[j
][1][1];
1108 var high
= y
+ series
[j
][1][2];
1109 if (low
> y
) low
= y
; // this can happen with custom bars,
1110 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1111 if (maxY
== null || high
> maxY
) {
1114 if (minY
== null || low
< minY
) {
1119 for (var j
= 0; j
< series
.length
; j
++) {
1120 var y
= series
[j
][1];
1122 if (maxY
== null || y
> maxY
) {
1125 if (minY
== null || y
< minY
) {
1131 return [minY
, maxY
];
1135 * Update the graph with new data. Data is in the format
1136 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1137 * or, if errorBars=true,
1138 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1139 * @param {Array.<Object>} data The data (see above)
1142 Dygraph
.prototype.drawGraph_
= function(data
) {
1143 var minY
= null, maxY
= null;
1144 this.layout_
.removeAllDatasets();
1146 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1148 // Loop over all fields in the dataset
1149 for (var i
= 1; i
< data
[0].length
; i
++) {
1151 for (var j
= 0; j
< data
.length
; j
++) {
1152 var date
= data
[j
][0];
1153 series
[j
] = [date
, data
[j
][i
]];
1155 series
= this.rollingAverage(series
, this.rollPeriod_
);
1157 // Prune down to the desired range, if necessary (for zooming)
1158 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1159 if (this.dateWindow_
) {
1160 var low
= this.dateWindow_
[0];
1161 var high
= this.dateWindow_
[1];
1163 for (var k
= 0; k
< series
.length
; k
++) {
1164 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1165 pruned
.push(series
[k
]);
1171 var extremes
= this.extremeValues_(series
);
1172 var thisMinY
= extremes
[0];
1173 var thisMaxY
= extremes
[1];
1174 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1175 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1179 for (var j
=0; j
<series
.length
; j
++)
1180 vals
[j
] = [series
[j
][0],
1181 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1182 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1184 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1188 // Use some heuristics to come up with a good maxY value, unless it's been
1189 // set explicitly by the user.
1190 if (this.valueRange_
!= null) {
1191 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1193 // Add some padding and round up to an integer to be human-friendly.
1194 var span
= maxY
- minY
;
1195 var maxAxisY
= maxY
+ 0.1 * span
;
1196 var minAxisY
= minY
- 0.1 * span
;
1198 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1199 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1200 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1202 if (this.attr_("includeZero")) {
1203 if (maxY
< 0) maxAxisY
= 0;
1204 if (minY
> 0) minAxisY
= 0;
1207 this.addYTicks_(minAxisY
, maxAxisY
);
1212 // Tell PlotKit to use this new data and render itself
1213 this.layout_
.evaluateWithError();
1214 this.plotter_
.clear();
1215 this.plotter_
.render();
1216 this.canvas_
.getContext('2d').clearRect(0, 0,
1217 this.canvas_
.width
, this.canvas_
.height
);
1221 * Calculates the rolling average of a data set.
1222 * If originalData is [label, val], rolls the average of those.
1223 * If originalData is [label, [, it's interpreted as [value, stddev]
1224 * and the roll is returned in the same form, with appropriately reduced
1225 * stddev for each value.
1226 * Note that this is where fractional input (i.e. '5/10') is converted into
1228 * @param {Array} originalData The data in the appropriate format (see above)
1229 * @param {Number} rollPeriod The number of days over which to average the data
1231 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1232 if (originalData
.length
< 2)
1233 return originalData
;
1234 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1235 var rollingData
= [];
1236 var sigma
= this.attr_("sigma");
1238 if (this.fractions_
) {
1240 var den
= 0; // numerator/denominator
1242 for (var i
= 0; i
< originalData
.length
; i
++) {
1243 num
+= originalData
[i
][1][0];
1244 den
+= originalData
[i
][1][1];
1245 if (i
- rollPeriod
>= 0) {
1246 num
-= originalData
[i
- rollPeriod
][1][0];
1247 den
-= originalData
[i
- rollPeriod
][1][1];
1250 var date
= originalData
[i
][0];
1251 var value
= den
? num
/ den
: 0.0;
1252 if (this.attr_("errorBars")) {
1253 if (this.wilsonInterval_
) {
1254 // For more details on this confidence interval, see:
1255 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1257 var p
= value
< 0 ? 0 : value
, n
= den
;
1258 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1259 var denom
= 1 + sigma
* sigma
/ den
;
1260 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1261 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1262 rollingData
[i
] = [date
,
1263 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1265 rollingData
[i
] = [date
, [0, 0, 0]];
1268 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1269 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1272 rollingData
[i
] = [date
, mult
* value
];
1275 } else if (this.attr_("customBars")) {
1280 for (var i
= 0; i
< originalData
.length
; i
++) {
1281 var data
= originalData
[i
][1];
1283 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1285 if (y
!= null && !isNaN(y
)) {
1291 if (i
- rollPeriod
>= 0) {
1292 var prev
= originalData
[i
- rollPeriod
];
1293 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1300 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1301 1.0 * (mid
- low
) / count
,
1302 1.0 * (high
- mid
) / count
]];
1305 // Calculate the rolling average for the first rollPeriod - 1 points where
1306 // there is not enough data to roll over the full number of days
1307 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1308 if (!this.attr_("errorBars")){
1309 if (rollPeriod
== 1) {
1310 return originalData
;
1313 for (var i
= 0; i
< originalData
.length
; i
++) {
1316 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1317 var y
= originalData
[j
][1];
1318 if (y
== null || isNaN(y
)) continue;
1320 sum
+= originalData
[j
][1];
1323 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1325 rollingData
[i
] = [originalData
[i
][0], null];
1330 for (var i
= 0; i
< originalData
.length
; i
++) {
1334 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1335 var y
= originalData
[j
][1][0];
1336 if (y
== null || isNaN(y
)) continue;
1338 sum
+= originalData
[j
][1][0];
1339 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1342 var stddev
= Math
.sqrt(variance
) / num_ok
;
1343 rollingData
[i
] = [originalData
[i
][0],
1344 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1346 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1356 * Parses a date, returning the number of milliseconds since epoch. This can be
1357 * passed in as an xValueParser in the Dygraph constructor.
1358 * TODO(danvk): enumerate formats that this understands.
1359 * @param {String} A date in YYYYMMDD format.
1360 * @return {Number} Milliseconds since epoch.
1363 Dygraph
.dateParser
= function(dateStr
, self
) {
1366 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1367 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1368 while (dateStrSlashed
.search("-") != -1) {
1369 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1371 d
= Date
.parse(dateStrSlashed
);
1372 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1373 // TODO(danvk): remove support for this format. It's confusing.
1374 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1375 + "/" + dateStr
.substr(6,2);
1376 d
= Date
.parse(dateStrSlashed
);
1378 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1379 // "2009/07/12 12:34:56"
1380 d
= Date
.parse(dateStr
);
1383 if (!d
|| isNaN(d
)) {
1384 self
.error("Couldn't parse " + dateStr
+ " as a date");
1390 * Detects the type of the str (date or numeric) and sets the various
1391 * formatting attributes in this.attrs_ based on this type.
1392 * @param {String} str An x value.
1395 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1397 if (str
.indexOf('-') >= 0 ||
1398 str
.indexOf('/') >= 0 ||
1399 isNaN(parseFloat(str
))) {
1401 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1402 // TODO(danvk): remove support for this format.
1407 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1408 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1409 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1411 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1412 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1413 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1418 * Parses a string in a special csv format. We expect a csv file where each
1419 * line is a date point, and the first field in each line is the date string.
1420 * We also expect that all remaining fields represent series.
1421 * if the errorBars attribute is set, then interpret the fields as:
1422 * date, series1, stddev1, series2, stddev2, ...
1423 * @param {Array.<Object>} data See above.
1426 * @return Array.<Object> An array with one entry for each row. These entries
1427 * are an array of cells in that row. The first entry is the parsed x-value for
1428 * the row. The second, third, etc. are the y-values. These can take on one of
1429 * three forms, depending on the CSV and constructor parameters:
1431 * 2. [ value, stddev ]
1432 * 3. [ low value, center value, high value ]
1434 Dygraph
.prototype.parseCSV_
= function(data
) {
1436 var lines
= data
.split("\n");
1438 // Use the default delimiter or fall back to a tab if that makes sense.
1439 var delim
= this.attr_('delimiter');
1440 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1445 if (this.labelsFromCSV_
) {
1447 this.attrs_
.labels
= lines
[0].split(delim
);
1451 var defaultParserSet
= false; // attempt to auto-detect x value type
1452 var expectedCols
= this.attr_("labels").length
;
1453 for (var i
= start
; i
< lines
.length
; i
++) {
1454 var line
= lines
[i
];
1455 if (line
.length
== 0) continue; // skip blank lines
1456 if (line
[0] == '#') continue; // skip comment lines
1457 var inFields
= line
.split(delim
);
1458 if (inFields
.length
< 2) continue;
1461 if (!defaultParserSet
) {
1462 this.detectTypeFromString_(inFields
[0]);
1463 xParser
= this.attr_("xValueParser");
1464 defaultParserSet
= true;
1466 fields
[0] = xParser(inFields
[0], this);
1468 // If fractions are expected, parse the numbers as "A/B
"
1469 if (this.fractions_) {
1470 for (var j = 1; j < inFields.length; j++) {
1471 // TODO(danvk): figure out an appropriate way to flag parse errors.
1472 var vals = inFields[j].split("/");
1473 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1475 } else if (this.attr_("errorBars
")) {
1476 // If there are error bars, values are (value, stddev) pairs
1477 for (var j = 1; j < inFields.length; j += 2)
1478 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1479 parseFloat(inFields[j + 1])];
1480 } else if (this.attr_("customBars
")) {
1481 // Bars are a low;center;high tuple
1482 for (var j = 1; j < inFields.length; j++) {
1483 var vals = inFields[j].split(";");
1484 fields[j] = [ parseFloat(vals[0]),
1485 parseFloat(vals[1]),
1486 parseFloat(vals[2]) ];
1489 // Values are just numbers
1490 for (var j = 1; j < inFields.length; j++) {
1491 fields[j] = parseFloat(inFields[j]);
1496 if (fields.length != expectedCols) {
1497 this.error("Number of columns
in line
" + i + " (" + fields.length +
1498 ") does not agree
with number of
labels (" + expectedCols +
1506 * The user has provided their data as a pre-packaged JS array. If the x values
1507 * are numeric, this is the same as dygraphs' internal format. If the x values
1508 * are dates, we need to convert them from Date objects to ms since epoch.
1509 * @param {Array.<Object>} data
1510 * @return {Array.<Object>} data with numeric x values.
1512 Dygraph.prototype.parseArray_ = function(data) {
1513 // Peek at the first x value to see if it's numeric.
1514 if (data.length == 0) {
1515 this.error("Can
't plot empty data set");
1518 if (data[0].length == 0) {
1519 this.error("Data set cannot contain an empty row");
1523 if (this.attr_("labels") == null) {
1524 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1525 "in the options parameter");
1526 this.attrs_.labels = [ "X" ];
1527 for (var i = 1; i < data[0].length; i++) {
1528 this.attrs_.labels.push("Y" + i);
1532 if (Dygraph.isDateLike(data[0][0])) {
1533 // Some intelligent defaults for a date x-axis.
1534 this.attrs_.xValueFormatter = Dygraph.dateString_;
1535 this.attrs_.xTicker = Dygraph.dateTicker;
1537 // Assume they're all dates
.
1538 var parsedData
= Dygraph
.clone(data
);
1539 for (var i
= 0; i
< data
.length
; i
++) {
1540 if (parsedData
[i
].length
== 0) {
1541 this.error("Row " << (1 + i
) << " of data is empty");
1544 if (parsedData
[i
][0] == null
1545 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1546 this.error("x value in row " << (1 + i
) << " is not a Date");
1549 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1553 // Some intelligent defaults for a numeric x-axis.
1554 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1555 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1561 * Parses a DataTable object from gviz.
1562 * The data is expected to have a first column that is either a date or a
1563 * number. All subsequent columns must be numbers. If there is a clear mismatch
1564 * between this.xValueParser_ and the type of the first column, it will be
1565 * fixed. Returned value is in the same format as return value of parseCSV_.
1566 * @param {Array.<Object>} data See above.
1569 Dygraph
.prototype.parseDataTable_
= function(data
) {
1570 var cols
= data
.getNumberOfColumns();
1571 var rows
= data
.getNumberOfRows();
1573 // Read column labels
1575 for (var i
= 0; i
< cols
; i
++) {
1576 labels
.push(data
.getColumnLabel(i
));
1577 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1579 this.attrs_
.labels
= labels
;
1580 cols
= labels
.length
;
1582 var indepType
= data
.getColumnType(0);
1583 if (indepType
== 'date') {
1584 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1585 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1586 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1587 } else if (indepType
== 'number') {
1588 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1589 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1590 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1592 this.error("only 'date' and 'number' types are supported for column 1 " +
1593 "of DataTable input (Got '" + indepType
+ "')");
1598 for (var i
= 0; i
< rows
; i
++) {
1600 if (!data
.getValue(i
, 0)) continue;
1601 if (indepType
== 'date') {
1602 row
.push(data
.getValue(i
, 0).getTime());
1604 row
.push(data
.getValue(i
, 0));
1606 if (!this.attr_("errorBars")) {
1607 for (var j
= 1; j
< cols
; j
++) {
1608 row
.push(data
.getValue(i
, j
));
1611 for (var j
= 0; j
< cols
- 1; j
++) {
1612 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1620 // These functions are all based on MochiKit.
1621 Dygraph
.update
= function (self
, o
) {
1622 if (typeof(o
) != 'undefined' && o
!== null) {
1624 if (o
.hasOwnProperty(k
)) {
1632 Dygraph
.isArrayLike
= function (o
) {
1633 var typ
= typeof(o
);
1635 (typ
!= 'object' && !(typ
== 'function' &&
1636 typeof(o
.item
) == 'function')) ||
1638 typeof(o
.length
) != 'number' ||
1646 Dygraph
.isDateLike
= function (o
) {
1647 if (typeof(o
) != "object" || o
=== null ||
1648 typeof(o
.getTime
) != 'function') {
1654 Dygraph
.clone
= function(o
) {
1655 // TODO(danvk): figure out how MochiKit's version works
1657 for (var i
= 0; i
< o
.length
; i
++) {
1658 if (Dygraph
.isArrayLike(o
[i
])) {
1659 r
.push(Dygraph
.clone(o
[i
]));
1669 * Get the CSV data. If it's in a function, call that function. If it's in a
1670 * file, do an XMLHttpRequest to get it.
1673 Dygraph
.prototype.start_
= function() {
1674 if (typeof this.file_
== 'function') {
1675 // CSV string. Pretend we got it via XHR.
1676 this.loadedEvent_(this.file_());
1677 } else if (Dygraph
.isArrayLike(this.file_
)) {
1678 this.rawData_
= this.parseArray_(this.file_
);
1679 this.drawGraph_(this.rawData_
);
1680 } else if (typeof this.file_
== 'object' &&
1681 typeof this.file_
.getColumnRange
== 'function') {
1682 // must be a DataTable from gviz.
1683 this.rawData_
= this.parseDataTable_(this.file_
);
1684 this.drawGraph_(this.rawData_
);
1685 } else if (typeof this.file_
== 'string') {
1686 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1687 if (this.file_
.indexOf('\n') >= 0) {
1688 this.loadedEvent_(this.file_
);
1690 var req
= new XMLHttpRequest();
1692 req
.onreadystatechange
= function () {
1693 if (req
.readyState
== 4) {
1694 if (req
.status
== 200) {
1695 caller
.loadedEvent_(req
.responseText
);
1700 req
.open("GET", this.file_
, true);
1704 this.error("Unknown data format: " + (typeof this.file_
));
1709 * Changes various properties of the graph. These can include:
1711 * <li>file: changes the source data for the graph</li>
1712 * <li>errorBars: changes whether the data contains stddev</li>
1714 * @param {Object} attrs The new properties and values
1716 Dygraph
.prototype.updateOptions
= function(attrs
) {
1717 // TODO(danvk): this is a mess. Rethink this function.
1718 if (attrs
.rollPeriod
) {
1719 this.rollPeriod_
= attrs
.rollPeriod
;
1721 if (attrs
.dateWindow
) {
1722 this.dateWindow_
= attrs
.dateWindow
;
1724 if (attrs
.valueRange
) {
1725 this.valueRange_
= attrs
.valueRange
;
1727 Dygraph
.update(this.user_attrs_
, attrs
);
1729 this.labelsFromCSV_
= (this.attr_("labels") == null);
1731 // TODO(danvk): this doesn't match the constructor logic
1732 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1733 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1734 this.file_
= attrs
['file'];
1737 this.drawGraph_(this.rawData_
);
1742 * Adjusts the number of days in the rolling average. Updates the graph to
1743 * reflect the new averaging period.
1744 * @param {Number} length Number of days over which to average the data.
1746 Dygraph
.prototype.adjustRoll
= function(length
) {
1747 this.rollPeriod_
= length
;
1748 this.drawGraph_(this.rawData_
);
1752 * Create a new canvas element. This is more complex than a simple
1753 * document.createElement("canvas") because of IE and excanvas.
1755 Dygraph
.createCanvas
= function() {
1756 var canvas
= document
.createElement("canvas");
1758 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1760 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1768 * A wrapper around Dygraph that implements the gviz API.
1769 * @param {Object} container The DOM object the visualization should live in.
1771 Dygraph
.GVizChart
= function(container
) {
1772 this.container
= container
;
1775 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1776 this.container
.innerHTML
= '';
1777 this.date_graph
= new Dygraph(this.container
, data
, options
);
1780 // Older pages may still use this name.
1781 DateGraph
= Dygraph
;