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,
98 axisLabelFontSize
: 14,
104 xValueFormatter
: Dygraph
.dateString_
,
105 xValueParser
: Dygraph
.dateParser
,
106 xTicker
: Dygraph
.dateTicker
,
111 wilsonInterval
: true, // only relevant if fractions is true
115 // Various logging levels.
121 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
122 // Labels is no longer a constructor parameter, since it's typically set
123 // directly from the data source. It also conains a name for the x-axis,
124 // which the previous constructor form did not.
125 if (labels
!= null) {
126 var new_labels
= ["Date"];
127 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
128 MochiKit
.Base
.update(attrs
, { 'labels': new_labels
});
130 this.__init__(div
, file
, attrs
);
134 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
135 * and interaction <canvas> inside of it. See the constructor for details
137 * @param {String | Function} file Source data
138 * @param {Array.<String>} labels Names of the data series
139 * @param {Object} attrs Miscellaneous other options
142 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
143 // Support two-argument constructor
144 if (attrs
== null) { attrs
= {}; }
146 // Copy the important bits into the object
147 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
150 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
151 this.previousVerticalX_
= -1;
152 this.fractions_
= attrs
.fractions
|| false;
153 this.dateWindow_
= attrs
.dateWindow
|| null;
154 this.valueRange_
= attrs
.valueRange
|| null;
155 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
157 // Clear the div. This ensure that, if multiple dygraphs are passed the same
158 // div, then only one will be drawn.
161 // If the div isn't already sized then give it a default size.
162 if (div
.style
.width
== '') {
163 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
165 if (div
.style
.height
== '') {
166 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
168 this.width_
= parseInt(div
.style
.width
, 10);
169 this.height_
= parseInt(div
.style
.height
, 10);
171 // Dygraphs has many options, some of which interact with one another.
172 // To keep track of everything, we maintain two sets of options:
174 // this.user_attrs_ only options explicitly set by the user.
175 // this.attrs_ defaults, options derived from user_attrs_, data.
177 // Options are then accessed this.attr_('attr'), which first looks at
178 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
179 // defaults without overriding behavior that the user specifically asks for.
180 this.user_attrs_
= {};
181 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
184 MochiKit
.Base
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
186 // Make a note of whether labels will be pulled from the CSV file.
187 this.labelsFromCSV_
= (this.attr_("labels") == null);
189 // Create the containing DIV and other interactive elements
190 this.createInterface_();
192 // Create the PlotKit grapher
193 // TODO(danvk): why does the Layout need its own set of options?
194 this.layoutOptions_
= { 'errorBars': (this.attr_("errorBars") ||
195 this.attr_("customBars")),
196 'xOriginIsZero': false };
197 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
198 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
200 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
202 // TODO(danvk): why does the Renderer need its own set of options?
203 this.renderOptions_
= { colorScheme
: this.colors_
,
205 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
206 MochiKit
.Base
.update(this.renderOptions_
, this.attrs_
);
207 MochiKit
.Base
.update(this.renderOptions_
, this.user_attrs_
);
208 this.plotter_
= new DygraphCanvasRenderer(this,
209 this.hidden_
, this.layout_
,
210 this.renderOptions_
);
212 this.createStatusMessage_();
213 this.createRollInterface_();
214 this.createDragInterface_();
219 Dygraph
.prototype.attr_
= function(name
) {
220 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
221 return this.user_attrs_
[name
];
222 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
223 return this.attrs_
[name
];
229 // TODO(danvk): any way I can get the line numbers to be this.warn call?
230 Dygraph
.prototype.log
= function(severity
, message
) {
231 if (typeof(console
) != 'undefined') {
234 console
.debug('dygraphs: ' + message
);
237 console
.info('dygraphs: ' + message
);
239 case Dygraph
.WARNING
:
240 console
.warn('dygraphs: ' + message
);
243 console
.error('dygraphs: ' + message
);
248 Dygraph
.prototype.info
= function(message
) {
249 this.log(Dygraph
.INFO
, message
);
251 Dygraph
.prototype.warn
= function(message
) {
252 this.log(Dygraph
.WARNING
, message
);
254 Dygraph
.prototype.error
= function(message
) {
255 this.log(Dygraph
.ERROR
, message
);
259 * Returns the current rolling period, as set by the user or an option.
260 * @return {Number} The number of days in the rolling window
262 Dygraph
.prototype.rollPeriod
= function() {
263 return this.rollPeriod_
;
266 Dygraph
.addEvent
= function(el
, evt
, fn
) {
267 var normed_fn
= function(e
) {
268 if (!e
) var e
= window
.event
;
271 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
272 el
.addEventListener(evt
, normed_fn
, false);
274 el
.attachEvent('on' + evt
, normed_fn
);
279 * Generates interface elements for the Dygraph: a containing div, a div to
280 * display the current point, and a textbox to adjust the rolling average
284 Dygraph
.prototype.createInterface_
= function() {
285 // Create the all-enclosing graph div
286 var enclosing
= this.maindiv_
;
288 this.graphDiv
= document
.createElement("div");
289 this.graphDiv
.style
.width
= this.width_
+ "px";
290 this.graphDiv
.style
.height
= this.height_
+ "px";
291 enclosing
.appendChild(this.graphDiv
);
293 // Create the canvas for interactive parts of the chart.
294 this.canvas_
= document
.createElement("canvas");
295 this.canvas_
.style
.position
= "absolute";
296 this.canvas_
.width
= this.width_
;
297 this.canvas_
.height
= this.height_
;
298 this.graphDiv
.appendChild(this.canvas_
);
300 // ... and for static parts of the chart.
301 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
304 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
305 dygraph
.mouseMove_(e
);
307 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
308 dygraph
.mouseOut_(e
);
313 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
314 * this particular canvas. All Dygraph work is done on this.canvas_.
315 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
316 * @return {Object} The newly-created canvas
319 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
320 var h
= document
.createElement("canvas");
321 h
.style
.position
= "absolute";
322 h
.style
.top
= canvas
.style
.top
;
323 h
.style
.left
= canvas
.style
.left
;
324 h
.width
= this.width_
;
325 h
.height
= this.height_
;
326 this.graphDiv
.appendChild(h
);
331 * Generate a set of distinct colors for the data series. This is done with a
332 * color wheel. Saturation/Value are customizable, and the hue is
333 * equally-spaced around the color wheel. If a custom set of colors is
334 * specified, that is used instead.
337 Dygraph
.prototype.setColors_
= function() {
338 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
339 // away with this.renderOptions_.
340 var num
= this.attr_("labels").length
- 1;
342 var colors
= this.attr_('colors');
344 var sat
= this.attr_('colorSaturation') || 1.0;
345 var val
= this.attr_('colorValue') || 0.5;
346 for (var i
= 1; i
<= num
; i
++) {
347 var hue
= (1.0*i
/(1+num
));
348 this.colors_
.push( MochiKit
.Color
.Color
.fromHSV(hue
, sat
, val
) );
351 for (var i
= 0; i
< num
; i
++) {
352 var colorStr
= colors
[i
% colors
.length
];
353 this.colors_
.push( MochiKit
.Color
.Color
.fromString(colorStr
) );
357 // TODO(danvk): update this w/r
/t/ the
new options system
.
358 this.renderOptions_
.colorScheme
= this.colors_
;
359 MochiKit
.Base
.update(this.plotter_
.options
, this.renderOptions_
);
360 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
361 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
364 // The following functions are from quirksmode.org
365 // http://www.quirksmode.org/js
/findpos
.html
366 Dygraph
.findPosX
= function(obj
) {
368 if (obj
.offsetParent
) {
369 while (obj
.offsetParent
) {
370 curleft
+= obj
.offsetLeft
;
371 obj
= obj
.offsetParent
;
379 Dygraph
.findPosY
= function(obj
) {
381 if (obj
.offsetParent
) {
382 while (obj
.offsetParent
) {
383 curtop
+= obj
.offsetTop
;
384 obj
= obj
.offsetParent
;
393 * Create the div that contains information on the selected point(s)
394 * This goes in the top right of the canvas, unless an external div has already
398 Dygraph
.prototype.createStatusMessage_
= function(){
399 if (!this.attr_("labelsDiv")) {
400 var divWidth
= this.attr_('labelsDivWidth');
402 "position": "absolute",
405 "width": divWidth
+ "px",
407 "left": (this.width_
- divWidth
- 2) + "px",
408 "background": "white",
410 "overflow": "hidden"};
411 MochiKit
.Base
.update(messagestyle
, this.attr_('labelsDivStyles'));
412 var div
= document
.createElement("div");
413 for (var name
in messagestyle
) {
414 div
.style
[name
] = messagestyle
[name
];
416 this.graphDiv
.appendChild(div
);
417 this.attrs_
.labelsDiv
= div
;
422 * Create the text box to adjust the averaging period
423 * @return {Object} The newly-created text box
426 Dygraph
.prototype.createRollInterface_
= function() {
427 var display
= this.attr_('showRoller') ? "block" : "none";
428 var textAttr
= { "position": "absolute",
430 "top": (this.plotter_
.area
.h
- 25) + "px",
431 "left": (this.plotter_
.area
.x
+ 1) + "px",
434 var roller
= document
.createElement("input");
435 roller
.type
= "text";
437 roller
.value
= this.rollPeriod_
;
438 for (var name
in textAttr
) {
439 roller
.style
[name
] = textAttr
[name
];
442 var pa
= this.graphDiv
;
443 pa
.appendChild(roller
);
445 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
449 // These functions are taken from MochiKit.Signal
450 Dygraph
.pageX
= function(e
) {
452 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
455 var b
= document
.body
;
457 (de
.scrollLeft
|| b
.scrollLeft
) -
458 (de
.clientLeft
|| 0);
462 Dygraph
.pageY
= function(e
) {
464 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
467 var b
= document
.body
;
469 (de
.scrollTop
|| b
.scrollTop
) -
475 * Set up all the mouse handlers needed to capture dragging behavior for zoom
476 * events. Uses MochiKit.Signal to attach all the event handlers.
479 Dygraph
.prototype.createDragInterface_
= function() {
482 // Tracks whether the mouse is down right now
483 var mouseDown
= false;
484 var dragStartX
= null;
485 var dragStartY
= null;
490 // Utility function to convert page-wide coordinates to canvas coords
493 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
494 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
496 // Draw zoom rectangles when the mouse is down and the user moves around
497 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
499 dragEndX
= getX(event
);
500 dragEndY
= getY(event
);
502 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
507 // Track the beginning of drag events
508 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
510 px
= Dygraph
.findPosX(self
.canvas_
);
511 py
= Dygraph
.findPosY(self
.canvas_
);
512 dragStartX
= getX(event
);
513 dragStartY
= getY(event
);
516 // If the user releases the mouse button during a drag, but not over the
517 // canvas, then it doesn't count as a zooming action.
518 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
526 // Temporarily cancel the dragging event when the mouse leaves the graph
527 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
534 // If the mouse is released on the canvas during a drag event, then it's a
535 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
536 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
539 dragEndX
= getX(event
);
540 dragEndY
= getY(event
);
541 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
542 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
544 if (regionWidth
< 2 && regionHeight
< 2 &&
545 self
.attr_('clickCallback') != null &&
546 self
.lastx_
!= undefined
) {
547 // TODO(danvk): pass along more info about the point.
548 self
.attr_('clickCallback')(event
, new Date(self
.lastx_
));
551 if (regionWidth
>= 10) {
552 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
553 Math
.max(dragStartX
, dragEndX
));
555 self
.canvas_
.getContext("2d").clearRect(0, 0,
557 self
.canvas_
.height
);
565 // Double-clicking zooms back out
566 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
567 self
.dateWindow_
= null;
568 self
.drawGraph_(self
.rawData_
);
569 var minDate
= self
.rawData_
[0][0];
570 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
571 if (self
.attr_("zoomCallback")) {
572 self
.attr_("zoomCallback")(minDate
, maxDate
);
578 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
579 * up any previous zoom rectangles that were drawn. This could be optimized to
580 * avoid extra redrawing, but it's tricky to avoid interactions with the status
582 * @param {Number} startX The X position where the drag started, in canvas
584 * @param {Number} endX The current X position of the drag, in canvas coords.
585 * @param {Number} prevEndX The value of endX on the previous call to this
586 * function. Used to avoid excess redrawing
589 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
590 var ctx
= this.canvas_
.getContext("2d");
592 // Clean up from the previous rect if necessary
594 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
595 Math
.abs(startX
- prevEndX
), this.height_
);
598 // Draw a light-grey rectangle to show the new viewing area
599 if (endX
&& startX
) {
600 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
601 ctx
.fillRect(Math
.min(startX
, endX
), 0,
602 Math
.abs(endX
- startX
), this.height_
);
607 * Zoom to something containing [lowX, highX]. These are pixel coordinates
608 * in the canvas. The exact zoom window may be slightly larger if there are no
609 * data points near lowX or highX. This function redraws the graph.
610 * @param {Number} lowX The leftmost pixel value that should be visible.
611 * @param {Number} highX The rightmost pixel value that should be visible.
614 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
615 // Find the earliest and latest dates contained in this canvasx range.
616 var points
= this.layout_
.points
;
619 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
620 for (var i
= 0; i
< points
.length
; i
++) {
621 var cx
= points
[i
].canvasx
;
622 var x
= points
[i
].xval
;
623 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
624 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
626 // Use the extremes if either is missing
627 if (minDate
== null) minDate
= points
[0].xval
;
628 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
630 this.dateWindow_
= [minDate
, maxDate
];
631 this.drawGraph_(this.rawData_
);
632 if (this.attr_("zoomCallback")) {
633 this.attr_("zoomCallback")(minDate
, maxDate
);
638 * When the mouse moves in the canvas, display information about a nearby data
639 * point and draw dots over those points in the data series. This function
640 * takes care of cleanup of previously-drawn dots.
641 * @param {Object} event The mousemove event from the browser.
644 Dygraph
.prototype.mouseMove_
= function(event
) {
645 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
646 var points
= this.layout_
.points
;
651 // Loop through all the points and find the date nearest to our current
653 var minDist
= 1e+100;
655 for (var i
= 0; i
< points
.length
; i
++) {
656 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
657 if (dist
> minDist
) break;
661 if (idx
>= 0) lastx
= points
[idx
].xval
;
662 // Check that you can really highlight the last day's data
663 if (canvasx
> points
[points
.length
-1].canvasx
)
664 lastx
= points
[points
.length
-1].xval
;
666 // Extract the points we've selected
668 for (var i
= 0; i
< points
.length
; i
++) {
669 if (points
[i
].xval
== lastx
) {
670 selPoints
.push(points
[i
]);
674 // Clear the previously drawn vertical, if there is one
675 var circleSize
= this.attr_('highlightCircleSize');
676 var ctx
= this.canvas_
.getContext("2d");
677 if (this.previousVerticalX_
>= 0) {
678 var px
= this.previousVerticalX_
;
679 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
682 var isOK
= function(x
) { return x
&& !isNaN(x
); };
684 if (selPoints
.length
> 0) {
685 var canvasx
= selPoints
[0].canvasx
;
687 // Set the status message to indicate the selected point(s)
688 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
689 var clen
= this.colors_
.length
;
690 for (var i
= 0; i
< selPoints
.length
; i
++) {
691 if (!isOK(selPoints
[i
].canvasy
)) continue;
692 if (this.attr_("labelsSeparateLines")) {
695 var point
= selPoints
[i
];
696 replace
+= " <b><font color='" + this.colors_
[i
%clen
].toHexString() + "'>"
697 + point
.name
+ "</font></b>:"
698 + this.round_(point
.yval
, 2);
700 this.attr_("labelsDiv").innerHTML
= replace
;
702 // Save last x position for callbacks.
705 // Draw colored circles over the center of each selected point
707 for (var i
= 0; i
< selPoints
.length
; i
++) {
708 if (!isOK(selPoints
[i
%clen
].canvasy
)) continue;
710 ctx
.fillStyle
= this.colors_
[i
%clen
].toRGBString();
711 ctx
.arc(canvasx
, selPoints
[i
%clen
].canvasy
, circleSize
, 0, 360, false);
716 this.previousVerticalX_
= canvasx
;
721 * The mouse has left the canvas. Clear out whatever artifacts remain
722 * @param {Object} event the mouseout event from the browser.
725 Dygraph
.prototype.mouseOut_
= function(event
) {
726 // Get rid of the overlay data
727 var ctx
= this.canvas_
.getContext("2d");
728 ctx
.clearRect(0, 0, this.width_
, this.height_
);
729 this.attr_("labelsDiv").innerHTML
= "";
732 Dygraph
.zeropad
= function(x
) {
733 if (x
< 10) return "0" + x
; else return "" + x
;
737 * Return a string version of the hours, minutes and seconds portion of a date.
738 * @param {Number} date The JavaScript date (ms since epoch)
739 * @return {String} A time of the form "HH:MM:SS"
742 Dygraph
.prototype.hmsString_
= function(date
) {
743 var zeropad
= Dygraph
.zeropad
;
744 var d
= new Date(date
);
745 if (d
.getSeconds()) {
746 return zeropad(d
.getHours()) + ":" +
747 zeropad(d
.getMinutes()) + ":" +
748 zeropad(d
.getSeconds());
749 } else if (d
.getMinutes()) {
750 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
752 return zeropad(d
.getHours());
757 * Convert a JS date (millis since epoch) to YYYY/MM/DD
758 * @param {Number} date The JavaScript date (ms since epoch)
759 * @return {String} A date of the form "YYYY/MM/DD"
761 * TODO(danvk): why is this part of the prototype?
763 Dygraph
.dateString_
= function(date
, self
) {
764 var zeropad
= Dygraph
.zeropad
;
765 var d
= new Date(date
);
768 var year
= "" + d
.getFullYear();
769 // Get a 0 padded month string
770 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
771 // Get a 0 padded day string
772 var day
= zeropad(d
.getDate());
775 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
776 if (frac
) ret
= " " + self
.hmsString_(date
);
778 return year
+ "/" + month + "/" + day
+ ret
;
782 * Round a number to the specified number of digits past the decimal point.
783 * @param {Number} num The number to round
784 * @param {Number} places The number of decimals to which to round
785 * @return {Number} The rounded number
788 Dygraph
.prototype.round_
= function(num
, places
) {
789 var shift
= Math
.pow(10, places
);
790 return Math
.round(num
* shift
)/shift
;
794 * Fires when there's data available to be graphed.
795 * @param {String} data Raw CSV data to be plotted
798 Dygraph
.prototype.loadedEvent_
= function(data
) {
799 this.rawData_
= this.parseCSV_(data
);
800 this.drawGraph_(this.rawData_
);
803 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
804 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
805 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
808 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
811 Dygraph
.prototype.addXTicks_
= function() {
812 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
813 var startDate
, endDate
;
814 if (this.dateWindow_
) {
815 startDate
= this.dateWindow_
[0];
816 endDate
= this.dateWindow_
[1];
818 startDate
= this.rawData_
[0][0];
819 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
822 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
823 this.layout_
.updateOptions({xTicks
: xTicks
});
826 // Time granularity enumeration
827 Dygraph
.SECONDLY
= 0;
828 Dygraph
.TEN_SECONDLY
= 1;
829 Dygraph
.THIRTY_SECONDLY
= 2;
830 Dygraph
.MINUTELY
= 3;
831 Dygraph
.TEN_MINUTELY
= 4;
832 Dygraph
.THIRTY_MINUTELY
= 5;
834 Dygraph
.SIX_HOURLY
= 7;
837 Dygraph
.MONTHLY
= 10;
838 Dygraph
.QUARTERLY
= 11;
839 Dygraph
.BIANNUAL
= 12;
841 Dygraph
.DECADAL
= 14;
842 Dygraph
.NUM_GRANULARITIES
= 15;
844 Dygraph
.SHORT_SPACINGS
= [];
845 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
846 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
847 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
848 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
849 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
850 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
851 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
852 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600 * 6;
853 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
854 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
858 // If we used this time granularity, how many ticks would there be?
859 // This is only an approximation, but it's generally good enough.
861 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
862 if (granularity
< Dygraph
.MONTHLY
) {
863 // Generate one tick mark for every fixed interval of time.
864 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
865 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
867 var year_mod
= 1; // e.g. to only print one point every 10 years.
869 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
870 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
871 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
872 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
874 var msInYear
= 365.2524 * 24 * 3600 * 1000;
875 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
876 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
882 // Construct an x-axis of nicely-formatted times on meaningful boundaries
883 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
885 // Returns an array containing {v: millis, label: label} dictionaries.
887 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
889 if (granularity
< Dygraph
.MONTHLY
) {
890 // Generate one tick mark for every fixed interval of time.
891 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
892 var format
= '%d%b'; // e.g. "1 Jan"
893 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
894 if (granularity
< Dygraph
.HOURLY
) {
895 start_time
= spacing
* Math
.floor(0.5 + start_time
/ spacing
);
897 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
899 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
900 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
901 // the extra hour covers DST problems.
902 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
904 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
908 // Display a tick mark on the first of a set of months of each year.
909 // Years get a tick mark iff y % year_mod == 0. This is useful for
910 // displaying a tick mark once every 10 years, say, on long time scales.
912 var year_mod
= 1; // e.g. to only print one point every 10 years.
914 if (granularity
== Dygraph
.MONTHLY
) {
915 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
916 } else if (granularity
== Dygraph
.QUARTERLY
) {
917 months
= [ 0, 3, 6, 9 ];
918 } else if (granularity
== Dygraph
.BIANNUAL
) {
920 } else if (granularity
== Dygraph
.ANNUAL
) {
922 } else if (granularity
== Dygraph
.DECADAL
) {
927 var start_year
= new Date(start_time
).getFullYear();
928 var end_year
= new Date(end_time
).getFullYear();
929 var zeropad
= Dygraph
.zeropad
;
930 for (var i
= start_year
; i
<= end_year
; i
++) {
931 if (i
% year_mod
!= 0) continue;
932 for (var j
= 0; j
< months
.length
; j
++) {
933 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
934 var t
= Date
.parse(date_str
);
935 if (t
< start_time
|| t
> end_time
) continue;
936 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
946 * Add ticks to the x-axis based on a date range.
947 * @param {Number} startDate Start of the date window (millis since epoch)
948 * @param {Number} endDate End of the date window (millis since epoch)
949 * @return {Array.<Object>} Array of {label, value} tuples.
952 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
954 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
955 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
956 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
963 return self
.GetXAxis(startDate
, endDate
, chosen
);
965 // TODO(danvk): signal error.
970 * Add ticks when the x axis has numbers on it (instead of dates)
971 * @param {Number} startDate Start of the date window (millis since epoch)
972 * @param {Number} endDate End of the date window (millis since epoch)
973 * @return {Array.<Object>} Array of {label, value} tuples.
976 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
978 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
979 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
980 // The first spacing greater than pixelsPerYLabel is what we use.
981 var mults
= [1, 2, 5];
982 var scale
, low_val
, high_val
, nTicks
;
983 // TODO(danvk): make it possible to set this for x- and y-axes independently.
984 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
985 for (var i
= -10; i
< 50; i
++) {
986 var base_scale
= Math
.pow(10, i
);
987 for (var j
= 0; j
< mults
.length
; j
++) {
988 scale
= base_scale
* mults
[j
];
989 low_val
= Math
.floor(minV
/ scale
) * scale
;
990 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
991 nTicks
= (high_val
- low_val
) / scale
;
992 var spacing
= self
.height_
/ nTicks
;
993 // wish I could break out of both loops at once...
994 if (spacing
> pixelsPerTick
) break;
996 if (spacing
> pixelsPerTick
) break;
999 // Construct labels for the ticks
1001 for (var i
= 0; i
< nTicks
; i
++) {
1002 var tickV
= low_val
+ i
* scale
;
1003 var label
= self
.round_(tickV
, 2);
1004 if (self
.attr_("labelsKMB")) {
1006 if (tickV
>= k
*k
*k
) {
1007 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "B";
1008 } else if (tickV
>= k
*k
) {
1009 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
1010 } else if (tickV
>= k
) {
1011 label
= self
.round_(tickV
/k
, 1) + "K";
1014 ticks
.push( {label
: label
, v
: tickV
} );
1020 * Adds appropriate ticks on the y-axis
1021 * @param {Number} minY The minimum Y value in the data set
1022 * @param {Number} maxY The maximum Y value in the data set
1025 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1026 // Set the number of ticks so that the labels are human-friendly.
1027 // TODO(danvk): make this an attribute as well.
1028 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1029 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1033 // Computes the range of the data series (including confidence intervals).
1034 // series is either [ [x1, y1], [x2, y2], ... ] or
1035 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1036 // Returns [low, high]
1037 Dygraph
.prototype.extremeValues_
= function(series
) {
1038 var minY
= null, maxY
= null;
1040 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1042 // With custom bars, maxY is the max of the high values.
1043 for (var j
= 0; j
< series
.length
; j
++) {
1044 var y
= series
[j
][1][0];
1046 var low
= y
- series
[j
][1][1];
1047 var high
= y
+ series
[j
][1][2];
1048 if (low
> y
) low
= y
; // this can happen with custom bars,
1049 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1050 if (maxY
== null || high
> maxY
) {
1053 if (minY
== null || low
< minY
) {
1058 for (var j
= 0; j
< series
.length
; j
++) {
1059 var y
= series
[j
][1];
1061 if (maxY
== null || y
> maxY
) {
1064 if (minY
== null || y
< minY
) {
1070 return [minY
, maxY
];
1074 * Update the graph with new data. Data is in the format
1075 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1076 * or, if errorBars=true,
1077 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1078 * @param {Array.<Object>} data The data (see above)
1081 Dygraph
.prototype.drawGraph_
= function(data
) {
1082 var minY
= null, maxY
= null;
1083 this.layout_
.removeAllDatasets();
1085 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1087 // Loop over all fields in the dataset
1088 for (var i
= 1; i
< data
[0].length
; i
++) {
1090 for (var j
= 0; j
< data
.length
; j
++) {
1091 var date
= data
[j
][0];
1092 series
[j
] = [date
, data
[j
][i
]];
1094 series
= this.rollingAverage(series
, this.rollPeriod_
);
1096 // Prune down to the desired range, if necessary (for zooming)
1097 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1098 if (this.dateWindow_
) {
1099 var low
= this.dateWindow_
[0];
1100 var high
= this.dateWindow_
[1];
1102 for (var k
= 0; k
< series
.length
; k
++) {
1103 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1104 pruned
.push(series
[k
]);
1110 var extremes
= this.extremeValues_(series
);
1111 var thisMinY
= extremes
[0];
1112 var thisMaxY
= extremes
[1];
1113 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1114 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1118 for (var j
=0; j
<series
.length
; j
++)
1119 vals
[j
] = [series
[j
][0],
1120 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1121 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1123 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1127 // Use some heuristics to come up with a good maxY value, unless it's been
1128 // set explicitly by the user.
1129 if (this.valueRange_
!= null) {
1130 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1132 // Add some padding and round up to an integer to be human-friendly.
1133 var span
= maxY
- minY
;
1134 var maxAxisY
= maxY
+ 0.1 * span
;
1135 var minAxisY
= minY
- 0.1 * span
;
1137 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1138 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1139 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1141 if (this.attr_("includeZero")) {
1142 if (maxY
< 0) maxAxisY
= 0;
1143 if (minY
> 0) minAxisY
= 0;
1146 this.addYTicks_(minAxisY
, maxAxisY
);
1151 // Tell PlotKit to use this new data and render itself
1152 this.layout_
.evaluateWithError();
1153 this.plotter_
.clear();
1154 this.plotter_
.render();
1155 this.canvas_
.getContext('2d').clearRect(0, 0,
1156 this.canvas_
.width
, this.canvas_
.height
);
1160 * Calculates the rolling average of a data set.
1161 * If originalData is [label, val], rolls the average of those.
1162 * If originalData is [label, [, it's interpreted as [value, stddev]
1163 * and the roll is returned in the same form, with appropriately reduced
1164 * stddev for each value.
1165 * Note that this is where fractional input (i.e. '5/10') is converted into
1167 * @param {Array} originalData The data in the appropriate format (see above)
1168 * @param {Number} rollPeriod The number of days over which to average the data
1170 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1171 if (originalData
.length
< 2)
1172 return originalData
;
1173 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1174 var rollingData
= [];
1175 var sigma
= this.attr_("sigma");
1177 if (this.fractions_
) {
1179 var den
= 0; // numerator/denominator
1181 for (var i
= 0; i
< originalData
.length
; i
++) {
1182 num
+= originalData
[i
][1][0];
1183 den
+= originalData
[i
][1][1];
1184 if (i
- rollPeriod
>= 0) {
1185 num
-= originalData
[i
- rollPeriod
][1][0];
1186 den
-= originalData
[i
- rollPeriod
][1][1];
1189 var date
= originalData
[i
][0];
1190 var value
= den
? num
/ den
: 0.0;
1191 if (this.attr_("errorBars")) {
1192 if (this.wilsonInterval_
) {
1193 // For more details on this confidence interval, see:
1194 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1196 var p
= value
< 0 ? 0 : value
, n
= den
;
1197 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1198 var denom
= 1 + sigma
* sigma
/ den
;
1199 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1200 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1201 rollingData
[i
] = [date
,
1202 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1204 rollingData
[i
] = [date
, [0, 0, 0]];
1207 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1208 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1211 rollingData
[i
] = [date
, mult
* value
];
1214 } else if (this.attr_("customBars")) {
1219 for (var i
= 0; i
< originalData
.length
; i
++) {
1220 var data
= originalData
[i
][1];
1222 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1228 if (i
- rollPeriod
>= 0) {
1229 var prev
= originalData
[i
- rollPeriod
];
1235 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1236 1.0 * (mid
- low
) / count
,
1237 1.0 * (high
- mid
) / count
]];
1240 // Calculate the rolling average for the first rollPeriod - 1 points where
1241 // there is not enough data to roll over the full number of days
1242 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1243 if (!this.attr_("errorBars")){
1244 if (rollPeriod
== 1) {
1245 return originalData
;
1248 for (var i
= 0; i
< originalData
.length
; i
++) {
1251 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1252 var y
= originalData
[j
][1];
1253 if (!y
|| isNaN(y
)) continue;
1255 sum
+= originalData
[j
][1];
1258 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1260 rollingData
[i
] = [originalData
[i
][0], null];
1265 for (var i
= 0; i
< originalData
.length
; i
++) {
1269 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1270 var y
= originalData
[j
][1][0];
1271 if (!y
|| isNaN(y
)) continue;
1273 sum
+= originalData
[j
][1][0];
1274 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1277 var stddev
= Math
.sqrt(variance
) / num_ok
;
1278 rollingData
[i
] = [originalData
[i
][0],
1279 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1281 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1291 * Parses a date, returning the number of milliseconds since epoch. This can be
1292 * passed in as an xValueParser in the Dygraph constructor.
1293 * TODO(danvk): enumerate formats that this understands.
1294 * @param {String} A date in YYYYMMDD format.
1295 * @return {Number} Milliseconds since epoch.
1298 Dygraph
.dateParser
= function(dateStr
, self
) {
1301 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1302 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1303 while (dateStrSlashed
.search("-") != -1) {
1304 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1306 d
= Date
.parse(dateStrSlashed
);
1307 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1308 // TODO(danvk): remove support for this format. It's confusing.
1309 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1310 + "/" + dateStr
.substr(6,2);
1311 d
= Date
.parse(dateStrSlashed
);
1313 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1314 // "2009/07/12 12:34:56"
1315 d
= Date
.parse(dateStr
);
1318 if (!d
|| isNaN(d
)) {
1319 self
.error("Couldn't parse " + dateStr
+ " as a date");
1325 * Detects the type of the str (date or numeric) and sets the various
1326 * formatting attributes in this.attrs_ based on this type.
1327 * @param {String} str An x value.
1330 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1332 if (str
.indexOf('-') >= 0 ||
1333 str
.indexOf('/') >= 0 ||
1334 isNaN(parseFloat(str
))) {
1336 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1337 // TODO(danvk): remove support for this format.
1342 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1343 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1344 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1346 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1347 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1348 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1353 * Parses a string in a special csv format. We expect a csv file where each
1354 * line is a date point, and the first field in each line is the date string.
1355 * We also expect that all remaining fields represent series.
1356 * if the errorBars attribute is set, then interpret the fields as:
1357 * date, series1, stddev1, series2, stddev2, ...
1358 * @param {Array.<Object>} data See above.
1361 * @return Array.<Object> An array with one entry for each row. These entries
1362 * are an array of cells in that row. The first entry is the parsed x-value for
1363 * the row. The second, third, etc. are the y-values. These can take on one of
1364 * three forms, depending on the CSV and constructor parameters:
1366 * 2. [ value, stddev ]
1367 * 3. [ low value, center value, high value ]
1369 Dygraph
.prototype.parseCSV_
= function(data
) {
1371 var lines
= data
.split("\n");
1373 if (this.labelsFromCSV_
) {
1375 this.attrs_
.labels
= lines
[0].split(",");
1379 var defaultParserSet
= false; // attempt to auto-detect x value type
1380 var expectedCols
= this.attr_("labels").length
;
1381 for (var i
= start
; i
< lines
.length
; i
++) {
1382 var line
= lines
[i
];
1383 if (line
.length
== 0) continue; // skip blank lines
1384 var inFields
= line
.split(',');
1385 if (inFields
.length
< 2) continue;
1388 if (!defaultParserSet
) {
1389 this.detectTypeFromString_(inFields
[0]);
1390 xParser
= this.attr_("xValueParser");
1391 defaultParserSet
= true;
1393 fields
[0] = xParser(inFields
[0], this);
1395 // If fractions are expected, parse the numbers as "A/B
"
1396 if (this.fractions_) {
1397 for (var j = 1; j < inFields.length; j++) {
1398 // TODO(danvk): figure out an appropriate way to flag parse errors.
1399 var vals = inFields[j].split("/");
1400 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1402 } else if (this.attr_("errorBars
")) {
1403 // If there are error bars, values are (value, stddev) pairs
1404 for (var j = 1; j < inFields.length; j += 2)
1405 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1406 parseFloat(inFields[j + 1])];
1407 } else if (this.attr_("customBars
")) {
1408 // Bars are a low;center;high tuple
1409 for (var j = 1; j < inFields.length; j++) {
1410 var vals = inFields[j].split(";");
1411 fields[j] = [ parseFloat(vals[0]),
1412 parseFloat(vals[1]),
1413 parseFloat(vals[2]) ];
1416 // Values are just numbers
1417 for (var j = 1; j < inFields.length; j++) {
1418 fields[j] = parseFloat(inFields[j]);
1423 if (fields.length != expectedCols) {
1424 this.error("Number of columns
in line
" + i + " (" + fields.length +
1425 ") does not agree
with number of
labels (" + expectedCols +
1433 * The user has provided their data as a pre-packaged JS array. If the x values
1434 * are numeric, this is the same as dygraphs' internal format. If the x values
1435 * are dates, we need to convert them from Date objects to ms since epoch.
1436 * @param {Array.<Object>} data
1437 * @return {Array.<Object>} data with numeric x values.
1439 Dygraph.prototype.parseArray_ = function(data) {
1440 // Peek at the first x value to see if it's numeric.
1441 if (data.length == 0) {
1442 this.error("Can
't plot empty data set");
1445 if (data[0].length == 0) {
1446 this.error("Data set cannot contain an empty row");
1450 if (this.attr_("labels") == null) {
1451 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1452 "in the options parameter");
1453 this.attrs_.labels = [ "X" ];
1454 for (var i = 1; i < data[0].length; i++) {
1455 this.attrs_.labels.push("Y" + i);
1459 if (MochiKit.Base.isDateLike(data[0][0])) {
1460 // Some intelligent defaults for a date x-axis.
1461 this.attrs_.xValueFormatter = Dygraph.dateString_;
1462 this.attrs_.xTicker = Dygraph.dateTicker;
1464 // Assume they're all dates
.
1465 var parsedData
= MochiKit
.Base
.clone(data
);
1466 for (var i
= 0; i
< data
.length
; i
++) {
1467 if (parsedData
[i
].length
== 0) {
1468 this.error("Row " << (1 + i
) << " of data is empty");
1471 if (parsedData
[i
][0] == null
1472 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1473 this.error("x value in row " << (1 + i
) << " is not a Date");
1476 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1480 // Some intelligent defaults for a numeric x-axis.
1481 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1482 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1488 * Parses a DataTable object from gviz.
1489 * The data is expected to have a first column that is either a date or a
1490 * number. All subsequent columns must be numbers. If there is a clear mismatch
1491 * between this.xValueParser_ and the type of the first column, it will be
1492 * fixed. Returned value is in the same format as return value of parseCSV_.
1493 * @param {Array.<Object>} data See above.
1496 Dygraph
.prototype.parseDataTable_
= function(data
) {
1497 var cols
= data
.getNumberOfColumns();
1498 var rows
= data
.getNumberOfRows();
1500 // Read column labels
1502 for (var i
= 0; i
< cols
; i
++) {
1503 labels
.push(data
.getColumnLabel(i
));
1505 this.attrs_
.labels
= labels
;
1507 var indepType
= data
.getColumnType(0);
1508 if (indepType
== 'date') {
1509 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1510 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1511 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1512 } else if (indepType
== 'number') {
1513 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1514 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1515 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1517 this.error("only 'date' and 'number' types are supported for column 1 " +
1518 "of DataTable input (Got '" + indepType
+ "')");
1523 for (var i
= 0; i
< rows
; i
++) {
1525 if (!data
.getValue(i
, 0)) continue;
1526 if (indepType
== 'date') {
1527 row
.push(data
.getValue(i
, 0).getTime());
1529 row
.push(data
.getValue(i
, 0));
1531 for (var j
= 1; j
< cols
; j
++) {
1532 row
.push(data
.getValue(i
, j
));
1540 * Get the CSV data. If it's in a function, call that function. If it's in a
1541 * file, do an XMLHttpRequest to get it.
1544 Dygraph
.prototype.start_
= function() {
1545 if (typeof this.file_
== 'function') {
1546 // CSV string. Pretend we got it via XHR.
1547 this.loadedEvent_(this.file_());
1548 } else if (MochiKit
.Base
.isArrayLike(this.file_
)) {
1549 this.rawData_
= this.parseArray_(this.file_
);
1550 this.drawGraph_(this.rawData_
);
1551 } else if (typeof this.file_
== 'object' &&
1552 typeof this.file_
.getColumnRange
== 'function') {
1553 // must be a DataTable from gviz.
1554 this.rawData_
= this.parseDataTable_(this.file_
);
1555 this.drawGraph_(this.rawData_
);
1556 } else if (typeof this.file_
== 'string') {
1557 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1558 if (this.file_
.indexOf('\n') >= 0) {
1559 this.loadedEvent_(this.file_
);
1561 var req
= new XMLHttpRequest();
1563 req
.onreadystatechange
= function () {
1564 if (req
.readyState
== 4) {
1565 if (req
.status
== 200) {
1566 caller
.loadedEvent_(req
.responseText
);
1571 req
.open("GET", this.file_
, true);
1575 this.error("Unknown data format: " + (typeof this.file_
));
1580 * Changes various properties of the graph. These can include:
1582 * <li>file: changes the source data for the graph</li>
1583 * <li>errorBars: changes whether the data contains stddev</li>
1585 * @param {Object} attrs The new properties and values
1587 Dygraph
.prototype.updateOptions
= function(attrs
) {
1588 // TODO(danvk): this is a mess. Rethink this function.
1589 if (attrs
.rollPeriod
) {
1590 this.rollPeriod_
= attrs
.rollPeriod
;
1592 if (attrs
.dateWindow
) {
1593 this.dateWindow_
= attrs
.dateWindow
;
1595 if (attrs
.valueRange
) {
1596 this.valueRange_
= attrs
.valueRange
;
1598 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
1600 this.labelsFromCSV_
= (this.attr_("labels") == null);
1602 // TODO(danvk): this doesn't match the constructor logic
1603 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1604 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1605 this.file_
= attrs
['file'];
1608 this.drawGraph_(this.rawData_
);
1613 * Adjusts the number of days in the rolling average. Updates the graph to
1614 * reflect the new averaging period.
1615 * @param {Number} length Number of days over which to average the data.
1617 Dygraph
.prototype.adjustRoll
= function(length
) {
1618 this.rollPeriod_
= length
;
1619 this.drawGraph_(this.rawData_
);
1624 * A wrapper around Dygraph that implements the gviz API.
1625 * @param {Object} container The DOM object the visualization should live in.
1627 Dygraph
.GVizChart
= function(container
) {
1628 this.container
= container
;
1631 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1632 this.container
.innerHTML
= '';
1633 this.date_graph
= new Dygraph(this.container
, data
, options
);
1636 // Older pages may still use this name.
1637 DateGraph
= Dygraph
;