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 absTickV
= Math
.abs(tickV
);
1056 var label
= self
.round_(tickV
, 2);
1057 if (self
.attr_("labelsKMB")) {
1059 if (absTickV
>= k
*k
*k
) {
1060 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "B";
1061 } else if (absTickV
>= k
*k
) {
1062 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
1063 } else if (absTickV
>= k
) {
1064 label
= self
.round_(tickV
/k
, 1) + "K";
1066 } else if (self
.attr_("labelsKMG2")) {
1068 if (absTickV
>= k
*k
*k
) {
1069 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "G";
1070 } else if (absTickV
>= k
*k
) {
1071 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
1072 } else if (absTickV
>= k
) {
1073 label
= self
.round_(tickV
/k
, 1) + "k";
1076 ticks
.push( {label
: label
, v
: tickV
} );
1082 * Adds appropriate ticks on the y-axis
1083 * @param {Number} minY The minimum Y value in the data set
1084 * @param {Number} maxY The maximum Y value in the data set
1087 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1088 // Set the number of ticks so that the labels are human-friendly.
1089 // TODO(danvk): make this an attribute as well.
1090 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1091 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1095 // Computes the range of the data series (including confidence intervals).
1096 // series is either [ [x1, y1], [x2, y2], ... ] or
1097 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1098 // Returns [low, high]
1099 Dygraph
.prototype.extremeValues_
= function(series
) {
1100 var minY
= null, maxY
= null;
1102 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1104 // With custom bars, maxY is the max of the high values.
1105 for (var j
= 0; j
< series
.length
; j
++) {
1106 var y
= series
[j
][1][0];
1108 var low
= y
- series
[j
][1][1];
1109 var high
= y
+ series
[j
][1][2];
1110 if (low
> y
) low
= y
; // this can happen with custom bars,
1111 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1112 if (maxY
== null || high
> maxY
) {
1115 if (minY
== null || low
< minY
) {
1120 for (var j
= 0; j
< series
.length
; j
++) {
1121 var y
= series
[j
][1];
1123 if (maxY
== null || y
> maxY
) {
1126 if (minY
== null || y
< minY
) {
1132 return [minY
, maxY
];
1136 * Update the graph with new data. Data is in the format
1137 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1138 * or, if errorBars=true,
1139 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1140 * @param {Array.<Object>} data The data (see above)
1143 Dygraph
.prototype.drawGraph_
= function(data
) {
1144 var minY
= null, maxY
= null;
1145 this.layout_
.removeAllDatasets();
1147 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1149 // Loop over all fields in the dataset
1150 for (var i
= 1; i
< data
[0].length
; i
++) {
1152 for (var j
= 0; j
< data
.length
; j
++) {
1153 var date
= data
[j
][0];
1154 series
[j
] = [date
, data
[j
][i
]];
1156 series
= this.rollingAverage(series
, this.rollPeriod_
);
1158 // Prune down to the desired range, if necessary (for zooming)
1159 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1160 if (this.dateWindow_
) {
1161 var low
= this.dateWindow_
[0];
1162 var high
= this.dateWindow_
[1];
1164 for (var k
= 0; k
< series
.length
; k
++) {
1165 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1166 pruned
.push(series
[k
]);
1172 var extremes
= this.extremeValues_(series
);
1173 var thisMinY
= extremes
[0];
1174 var thisMaxY
= extremes
[1];
1175 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1176 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1180 for (var j
=0; j
<series
.length
; j
++)
1181 vals
[j
] = [series
[j
][0],
1182 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1183 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1185 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1189 // Use some heuristics to come up with a good maxY value, unless it's been
1190 // set explicitly by the user.
1191 if (this.valueRange_
!= null) {
1192 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1194 // Add some padding and round up to an integer to be human-friendly.
1195 var span
= maxY
- minY
;
1196 var maxAxisY
= maxY
+ 0.1 * span
;
1197 var minAxisY
= minY
- 0.1 * span
;
1199 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1200 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1201 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1203 if (this.attr_("includeZero")) {
1204 if (maxY
< 0) maxAxisY
= 0;
1205 if (minY
> 0) minAxisY
= 0;
1208 this.addYTicks_(minAxisY
, maxAxisY
);
1213 // Tell PlotKit to use this new data and render itself
1214 this.layout_
.evaluateWithError();
1215 this.plotter_
.clear();
1216 this.plotter_
.render();
1217 this.canvas_
.getContext('2d').clearRect(0, 0,
1218 this.canvas_
.width
, this.canvas_
.height
);
1222 * Calculates the rolling average of a data set.
1223 * If originalData is [label, val], rolls the average of those.
1224 * If originalData is [label, [, it's interpreted as [value, stddev]
1225 * and the roll is returned in the same form, with appropriately reduced
1226 * stddev for each value.
1227 * Note that this is where fractional input (i.e. '5/10') is converted into
1229 * @param {Array} originalData The data in the appropriate format (see above)
1230 * @param {Number} rollPeriod The number of days over which to average the data
1232 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1233 if (originalData
.length
< 2)
1234 return originalData
;
1235 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1236 var rollingData
= [];
1237 var sigma
= this.attr_("sigma");
1239 if (this.fractions_
) {
1241 var den
= 0; // numerator/denominator
1243 for (var i
= 0; i
< originalData
.length
; i
++) {
1244 num
+= originalData
[i
][1][0];
1245 den
+= originalData
[i
][1][1];
1246 if (i
- rollPeriod
>= 0) {
1247 num
-= originalData
[i
- rollPeriod
][1][0];
1248 den
-= originalData
[i
- rollPeriod
][1][1];
1251 var date
= originalData
[i
][0];
1252 var value
= den
? num
/ den
: 0.0;
1253 if (this.attr_("errorBars")) {
1254 if (this.wilsonInterval_
) {
1255 // For more details on this confidence interval, see:
1256 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1258 var p
= value
< 0 ? 0 : value
, n
= den
;
1259 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1260 var denom
= 1 + sigma
* sigma
/ den
;
1261 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1262 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1263 rollingData
[i
] = [date
,
1264 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1266 rollingData
[i
] = [date
, [0, 0, 0]];
1269 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1270 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1273 rollingData
[i
] = [date
, mult
* value
];
1276 } else if (this.attr_("customBars")) {
1281 for (var i
= 0; i
< originalData
.length
; i
++) {
1282 var data
= originalData
[i
][1];
1284 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1286 if (y
!= null && !isNaN(y
)) {
1292 if (i
- rollPeriod
>= 0) {
1293 var prev
= originalData
[i
- rollPeriod
];
1294 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1301 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1302 1.0 * (mid
- low
) / count
,
1303 1.0 * (high
- mid
) / count
]];
1306 // Calculate the rolling average for the first rollPeriod - 1 points where
1307 // there is not enough data to roll over the full number of days
1308 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1309 if (!this.attr_("errorBars")){
1310 if (rollPeriod
== 1) {
1311 return originalData
;
1314 for (var i
= 0; i
< originalData
.length
; i
++) {
1317 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1318 var y
= originalData
[j
][1];
1319 if (y
== null || isNaN(y
)) continue;
1321 sum
+= originalData
[j
][1];
1324 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1326 rollingData
[i
] = [originalData
[i
][0], null];
1331 for (var i
= 0; i
< originalData
.length
; i
++) {
1335 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1336 var y
= originalData
[j
][1][0];
1337 if (y
== null || isNaN(y
)) continue;
1339 sum
+= originalData
[j
][1][0];
1340 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1343 var stddev
= Math
.sqrt(variance
) / num_ok
;
1344 rollingData
[i
] = [originalData
[i
][0],
1345 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1347 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1357 * Parses a date, returning the number of milliseconds since epoch. This can be
1358 * passed in as an xValueParser in the Dygraph constructor.
1359 * TODO(danvk): enumerate formats that this understands.
1360 * @param {String} A date in YYYYMMDD format.
1361 * @return {Number} Milliseconds since epoch.
1364 Dygraph
.dateParser
= function(dateStr
, self
) {
1367 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1368 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1369 while (dateStrSlashed
.search("-") != -1) {
1370 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1372 d
= Date
.parse(dateStrSlashed
);
1373 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1374 // TODO(danvk): remove support for this format. It's confusing.
1375 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1376 + "/" + dateStr
.substr(6,2);
1377 d
= Date
.parse(dateStrSlashed
);
1379 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1380 // "2009/07/12 12:34:56"
1381 d
= Date
.parse(dateStr
);
1384 if (!d
|| isNaN(d
)) {
1385 self
.error("Couldn't parse " + dateStr
+ " as a date");
1391 * Detects the type of the str (date or numeric) and sets the various
1392 * formatting attributes in this.attrs_ based on this type.
1393 * @param {String} str An x value.
1396 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1398 if (str
.indexOf('-') >= 0 ||
1399 str
.indexOf('/') >= 0 ||
1400 isNaN(parseFloat(str
))) {
1402 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1403 // TODO(danvk): remove support for this format.
1408 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1409 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1410 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1412 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1413 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1414 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1419 * Parses a string in a special csv format. We expect a csv file where each
1420 * line is a date point, and the first field in each line is the date string.
1421 * We also expect that all remaining fields represent series.
1422 * if the errorBars attribute is set, then interpret the fields as:
1423 * date, series1, stddev1, series2, stddev2, ...
1424 * @param {Array.<Object>} data See above.
1427 * @return Array.<Object> An array with one entry for each row. These entries
1428 * are an array of cells in that row. The first entry is the parsed x-value for
1429 * the row. The second, third, etc. are the y-values. These can take on one of
1430 * three forms, depending on the CSV and constructor parameters:
1432 * 2. [ value, stddev ]
1433 * 3. [ low value, center value, high value ]
1435 Dygraph
.prototype.parseCSV_
= function(data
) {
1437 var lines
= data
.split("\n");
1439 // Use the default delimiter or fall back to a tab if that makes sense.
1440 var delim
= this.attr_('delimiter');
1441 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1446 if (this.labelsFromCSV_
) {
1448 this.attrs_
.labels
= lines
[0].split(delim
);
1452 var defaultParserSet
= false; // attempt to auto-detect x value type
1453 var expectedCols
= this.attr_("labels").length
;
1454 for (var i
= start
; i
< lines
.length
; i
++) {
1455 var line
= lines
[i
];
1456 if (line
.length
== 0) continue; // skip blank lines
1457 if (line
[0] == '#') continue; // skip comment lines
1458 var inFields
= line
.split(delim
);
1459 if (inFields
.length
< 2) continue;
1462 if (!defaultParserSet
) {
1463 this.detectTypeFromString_(inFields
[0]);
1464 xParser
= this.attr_("xValueParser");
1465 defaultParserSet
= true;
1467 fields
[0] = xParser(inFields
[0], this);
1469 // If fractions are expected, parse the numbers as "A/B
"
1470 if (this.fractions_) {
1471 for (var j = 1; j < inFields.length; j++) {
1472 // TODO(danvk): figure out an appropriate way to flag parse errors.
1473 var vals = inFields[j].split("/");
1474 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1476 } else if (this.attr_("errorBars
")) {
1477 // If there are error bars, values are (value, stddev) pairs
1478 for (var j = 1; j < inFields.length; j += 2)
1479 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1480 parseFloat(inFields[j + 1])];
1481 } else if (this.attr_("customBars
")) {
1482 // Bars are a low;center;high tuple
1483 for (var j = 1; j < inFields.length; j++) {
1484 var vals = inFields[j].split(";");
1485 fields[j] = [ parseFloat(vals[0]),
1486 parseFloat(vals[1]),
1487 parseFloat(vals[2]) ];
1490 // Values are just numbers
1491 for (var j = 1; j < inFields.length; j++) {
1492 fields[j] = parseFloat(inFields[j]);
1497 if (fields.length != expectedCols) {
1498 this.error("Number of columns
in line
" + i + " (" + fields.length +
1499 ") does not agree
with number of
labels (" + expectedCols +
1507 * The user has provided their data as a pre-packaged JS array. If the x values
1508 * are numeric, this is the same as dygraphs' internal format. If the x values
1509 * are dates, we need to convert them from Date objects to ms since epoch.
1510 * @param {Array.<Object>} data
1511 * @return {Array.<Object>} data with numeric x values.
1513 Dygraph.prototype.parseArray_ = function(data) {
1514 // Peek at the first x value to see if it's numeric.
1515 if (data.length == 0) {
1516 this.error("Can
't plot empty data set");
1519 if (data[0].length == 0) {
1520 this.error("Data set cannot contain an empty row");
1524 if (this.attr_("labels") == null) {
1525 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1526 "in the options parameter");
1527 this.attrs_.labels = [ "X" ];
1528 for (var i = 1; i < data[0].length; i++) {
1529 this.attrs_.labels.push("Y" + i);
1533 if (Dygraph.isDateLike(data[0][0])) {
1534 // Some intelligent defaults for a date x-axis.
1535 this.attrs_.xValueFormatter = Dygraph.dateString_;
1536 this.attrs_.xTicker = Dygraph.dateTicker;
1538 // Assume they're all dates
.
1539 var parsedData
= Dygraph
.clone(data
);
1540 for (var i
= 0; i
< data
.length
; i
++) {
1541 if (parsedData
[i
].length
== 0) {
1542 this.error("Row " << (1 + i
) << " of data is empty");
1545 if (parsedData
[i
][0] == null
1546 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1547 this.error("x value in row " << (1 + i
) << " is not a Date");
1550 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1554 // Some intelligent defaults for a numeric x-axis.
1555 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1556 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1562 * Parses a DataTable object from gviz.
1563 * The data is expected to have a first column that is either a date or a
1564 * number. All subsequent columns must be numbers. If there is a clear mismatch
1565 * between this.xValueParser_ and the type of the first column, it will be
1566 * fixed. Returned value is in the same format as return value of parseCSV_.
1567 * @param {Array.<Object>} data See above.
1570 Dygraph
.prototype.parseDataTable_
= function(data
) {
1571 var cols
= data
.getNumberOfColumns();
1572 var rows
= data
.getNumberOfRows();
1574 // Read column labels
1576 for (var i
= 0; i
< cols
; i
++) {
1577 labels
.push(data
.getColumnLabel(i
));
1578 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1580 this.attrs_
.labels
= labels
;
1581 cols
= labels
.length
;
1583 var indepType
= data
.getColumnType(0);
1584 if (indepType
== 'date') {
1585 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1586 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1587 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1588 } else if (indepType
== 'number') {
1589 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1590 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1591 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1593 this.error("only 'date' and 'number' types are supported for column 1 " +
1594 "of DataTable input (Got '" + indepType
+ "')");
1599 for (var i
= 0; i
< rows
; i
++) {
1601 if (!data
.getValue(i
, 0)) continue;
1602 if (indepType
== 'date') {
1603 row
.push(data
.getValue(i
, 0).getTime());
1605 row
.push(data
.getValue(i
, 0));
1607 if (!this.attr_("errorBars")) {
1608 for (var j
= 1; j
< cols
; j
++) {
1609 row
.push(data
.getValue(i
, j
));
1612 for (var j
= 0; j
< cols
- 1; j
++) {
1613 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1621 // These functions are all based on MochiKit.
1622 Dygraph
.update
= function (self
, o
) {
1623 if (typeof(o
) != 'undefined' && o
!== null) {
1625 if (o
.hasOwnProperty(k
)) {
1633 Dygraph
.isArrayLike
= function (o
) {
1634 var typ
= typeof(o
);
1636 (typ
!= 'object' && !(typ
== 'function' &&
1637 typeof(o
.item
) == 'function')) ||
1639 typeof(o
.length
) != 'number' ||
1647 Dygraph
.isDateLike
= function (o
) {
1648 if (typeof(o
) != "object" || o
=== null ||
1649 typeof(o
.getTime
) != 'function') {
1655 Dygraph
.clone
= function(o
) {
1656 // TODO(danvk): figure out how MochiKit's version works
1658 for (var i
= 0; i
< o
.length
; i
++) {
1659 if (Dygraph
.isArrayLike(o
[i
])) {
1660 r
.push(Dygraph
.clone(o
[i
]));
1670 * Get the CSV data. If it's in a function, call that function. If it's in a
1671 * file, do an XMLHttpRequest to get it.
1674 Dygraph
.prototype.start_
= function() {
1675 if (typeof this.file_
== 'function') {
1676 // CSV string. Pretend we got it via XHR.
1677 this.loadedEvent_(this.file_());
1678 } else if (Dygraph
.isArrayLike(this.file_
)) {
1679 this.rawData_
= this.parseArray_(this.file_
);
1680 this.drawGraph_(this.rawData_
);
1681 } else if (typeof this.file_
== 'object' &&
1682 typeof this.file_
.getColumnRange
== 'function') {
1683 // must be a DataTable from gviz.
1684 this.rawData_
= this.parseDataTable_(this.file_
);
1685 this.drawGraph_(this.rawData_
);
1686 } else if (typeof this.file_
== 'string') {
1687 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1688 if (this.file_
.indexOf('\n') >= 0) {
1689 this.loadedEvent_(this.file_
);
1691 var req
= new XMLHttpRequest();
1693 req
.onreadystatechange
= function () {
1694 if (req
.readyState
== 4) {
1695 if (req
.status
== 200) {
1696 caller
.loadedEvent_(req
.responseText
);
1701 req
.open("GET", this.file_
, true);
1705 this.error("Unknown data format: " + (typeof this.file_
));
1710 * Changes various properties of the graph. These can include:
1712 * <li>file: changes the source data for the graph</li>
1713 * <li>errorBars: changes whether the data contains stddev</li>
1715 * @param {Object} attrs The new properties and values
1717 Dygraph
.prototype.updateOptions
= function(attrs
) {
1718 // TODO(danvk): this is a mess. Rethink this function.
1719 if (attrs
.rollPeriod
) {
1720 this.rollPeriod_
= attrs
.rollPeriod
;
1722 if (attrs
.dateWindow
) {
1723 this.dateWindow_
= attrs
.dateWindow
;
1725 if (attrs
.valueRange
) {
1726 this.valueRange_
= attrs
.valueRange
;
1728 Dygraph
.update(this.user_attrs_
, attrs
);
1730 this.labelsFromCSV_
= (this.attr_("labels") == null);
1732 // TODO(danvk): this doesn't match the constructor logic
1733 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1734 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1735 this.file_
= attrs
['file'];
1738 this.drawGraph_(this.rawData_
);
1743 * Adjusts the number of days in the rolling average. Updates the graph to
1744 * reflect the new averaging period.
1745 * @param {Number} length Number of days over which to average the data.
1747 Dygraph
.prototype.adjustRoll
= function(length
) {
1748 this.rollPeriod_
= length
;
1749 this.drawGraph_(this.rawData_
);
1753 * Create a new canvas element. This is more complex than a simple
1754 * document.createElement("canvas") because of IE and excanvas.
1756 Dygraph
.createCanvas
= function() {
1757 var canvas
= document
.createElement("canvas");
1759 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
1761 canvas
= G_vmlCanvasManager
.initElement(canvas
);
1769 * A wrapper around Dygraph that implements the gviz API.
1770 * @param {Object} container The DOM object the visualization should live in.
1772 Dygraph
.GVizChart
= function(container
) {
1773 this.container
= container
;
1776 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1777 this.container
.innerHTML
= '';
1778 this.date_graph
= new Dygraph(this.container
, data
, options
);
1781 // Older pages may still use this name.
1782 DateGraph
= Dygraph
;