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;
156 this.customBars_
= attrs
.customBars
|| false;
158 // Clear the div. This ensure that, if multiple dygraphs are passed the same
159 // div, then only one will be drawn.
162 // If the div isn't already sized then give it a default size.
163 if (div
.style
.width
== '') {
164 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
166 if (div
.style
.height
== '') {
167 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
169 this.width_
= parseInt(div
.style
.width
, 10);
170 this.height_
= parseInt(div
.style
.height
, 10);
172 // Dygraphs has many options, some of which interact with one another.
173 // To keep track of everything, we maintain two sets of options:
175 // this.user_attrs_ only options explicitly set by the user.
176 // this.attrs_ defaults, options derived from user_attrs_, data.
178 // Options are then accessed this.attr_('attr'), which first looks at
179 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
180 // defaults without overriding behavior that the user specifically asks for.
181 this.user_attrs_
= {};
182 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
185 MochiKit
.Base
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
187 // Make a note of whether labels will be pulled from the CSV file.
188 this.labelsFromCSV_
= (this.attr_("labels") == null);
190 // Create the containing DIV and other interactive elements
191 this.createInterface_();
193 // Create the PlotKit grapher
194 // TODO(danvk): why does the Layout need its own set of options?
195 this.layoutOptions_
= { 'errorBars': (this.attr_("errorBars") ||
197 'xOriginIsZero': false };
198 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
199 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
201 this.layout_
= new DygraphLayout(this.layoutOptions_
);
203 // TODO(danvk): why does the Renderer need its own set of options?
204 this.renderOptions_
= { colorScheme
: this.colors_
,
206 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
207 MochiKit
.Base
.update(this.renderOptions_
, this.attrs_
);
208 MochiKit
.Base
.update(this.renderOptions_
, this.user_attrs_
);
209 this.plotter_
= new DygraphCanvasRenderer(this.hidden_
, this.layout_
,
210 this.renderOptions_
);
212 this.createStatusMessage_();
213 this.createRollInterface_();
214 this.createDragInterface_();
216 // connect(window, 'onload', this, function(e) { this.start_(); });
220 Dygraph
.prototype.attr_
= function(name
) {
221 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
222 return this.user_attrs_
[name
];
223 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
224 return this.attrs_
[name
];
230 // TODO(danvk): any way I can get the line numbers to be this.warn call?
231 Dygraph
.prototype.log
= function(severity
, message
) {
232 if (typeof(console
) != 'undefined') {
235 console
.debug('dygraphs: ' + message
);
238 console
.info('dygraphs: ' + message
);
240 case Dygraph
.WARNING
:
241 console
.warn('dygraphs: ' + message
);
244 console
.error('dygraphs: ' + message
);
249 Dygraph
.prototype.info
= function(message
) {
250 this.log(Dygraph
.INFO
, message
);
252 Dygraph
.prototype.warn
= function(message
) {
253 this.log(Dygraph
.WARNING
, message
);
255 Dygraph
.prototype.error
= function(message
) {
256 this.log(Dygraph
.ERROR
, message
);
260 * Returns the current rolling period, as set by the user or an option.
261 * @return {Number} The number of days in the rolling window
263 Dygraph
.prototype.rollPeriod
= function() {
264 return this.rollPeriod_
;
268 * Generates interface elements for the Dygraph: a containing div, a div to
269 * display the current point, and a textbox to adjust the rolling average
273 Dygraph
.prototype.createInterface_
= function() {
274 // Create the all-enclosing graph div
275 var enclosing
= this.maindiv_
;
277 this.graphDiv
= MochiKit
.DOM
.DIV( { style
: { 'width': this.width_
+ "px",
278 'height': this.height_
+ "px"
280 appendChildNodes(enclosing
, this.graphDiv
);
282 // Create the canvas to store
283 // We need to subtract out some space for the x- and y-axis labels.
285 // - remove from height: (axisTickSize + height of tick label)
286 // height of tick label == axisLabelFontSize?
287 // - remove from width: axisLabelWidth / 2 (maybe on both ends
)
289 // - remove axisLabelFontSize from the top
290 // - remove axisTickSize from the left
292 var canvas
= MochiKit
.DOM
.CANVAS
;
293 this.canvas_
= canvas( { style
: { 'position': 'absolute' },
297 appendChildNodes(this.graphDiv
, this.canvas_
);
299 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
300 connect(this.hidden_
, 'onmousemove', this, function(e
) { this.mouseMove_(e
) });
301 connect(this.hidden_
, 'onmouseout', this, function(e
) { this.mouseOut_(e
) });
305 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
306 * this particular canvas. All Dygraph work is done on this.canvas_.
307 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
308 * @return {Object} The newly-created canvas
311 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
312 var h
= document
.createElement("canvas");
313 h
.style
.position
= "absolute";
314 h
.style
.top
= canvas
.style
.top
;
315 h
.style
.left
= canvas
.style
.left
;
316 h
.width
= this.width_
;
317 h
.height
= this.height_
;
318 MochiKit
.DOM
.appendChildNodes(this.graphDiv
, h
);
323 * Generate a set of distinct colors for the data series. This is done with a
324 * color wheel. Saturation/Value are customizable, and the hue is
325 * equally-spaced around the color wheel. If a custom set of colors is
326 * specified, that is used instead.
329 Dygraph
.prototype.setColors_
= function() {
330 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
331 // away with this.renderOptions_.
332 var num
= this.attr_("labels").length
- 1;
334 var colors
= this.attr_('colors');
336 var sat
= this.attr_('colorSaturation') || 1.0;
337 var val
= this.attr_('colorValue') || 0.5;
338 for (var i
= 1; i
<= num
; i
++) {
339 var hue
= (1.0*i
/(1+num
));
340 this.colors_
.push( MochiKit
.Color
.Color
.fromHSV(hue
, sat
, val
) );
343 for (var i
= 0; i
< num
; i
++) {
344 var colorStr
= colors
[i
% colors
.length
];
345 this.colors_
.push( MochiKit
.Color
.Color
.fromString(colorStr
) );
349 // TODO(danvk): update this w/r
/t/ the
new options system
.
350 this.renderOptions_
.colorScheme
= this.colors_
;
351 MochiKit
.Base
.update(this.plotter_
.options
, this.renderOptions_
);
352 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
353 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
357 * Create the div that contains information on the selected point(s)
358 * This goes in the top right of the canvas, unless an external div has already
362 Dygraph
.prototype.createStatusMessage_
= function(){
363 if (!this.attr_("labelsDiv")) {
364 var divWidth
= this.attr_('labelsDivWidth');
365 var messagestyle
= { "style": {
366 "position": "absolute",
369 "width": divWidth
+ "px",
371 "left": (this.width_
- divWidth
- 2) + "px",
372 "background": "white",
374 "overflow": "hidden"}};
375 MochiKit
.Base
.update(messagestyle
["style"], this.attr_('labelsDivStyles'));
376 var div
= MochiKit
.DOM
.DIV(messagestyle
);
377 MochiKit
.DOM
.appendChildNodes(this.graphDiv
, div
);
378 this.attrs_
.labelsDiv
= div
;
383 * Create the text box to adjust the averaging period
384 * @return {Object} The newly-created text box
387 Dygraph
.prototype.createRollInterface_
= function() {
388 var display
= this.attr_('showRoller') ? "block" : "none";
389 var textAttr
= { "type": "text",
391 "value": this.rollPeriod_
,
392 "style": { "position": "absolute",
394 "top": (this.plotter_
.area
.h
- 25) + "px",
395 "left": (this.plotter_
.area
.x
+ 1) + "px",
398 var roller
= MochiKit
.DOM
.INPUT(textAttr
);
399 var pa
= this.graphDiv
;
400 MochiKit
.DOM
.appendChildNodes(pa
, roller
);
401 connect(roller
, 'onchange', this,
402 function() { this.adjustRoll(roller
.value
); });
407 * Set up all the mouse handlers needed to capture dragging behavior for zoom
408 * events. Uses MochiKit.Signal to attach all the event handlers.
411 Dygraph
.prototype.createDragInterface_
= function() {
414 // Tracks whether the mouse is down right now
415 var mouseDown
= false;
416 var dragStartX
= null;
417 var dragStartY
= null;
422 // Utility function to convert page-wide coordinates to canvas coords
425 var getX
= function(e
) { return e
.mouse().page
.x
- px
};
426 var getY
= function(e
) { return e
.mouse().page
.y
- py
};
428 // Draw zoom rectangles when the mouse is down and the user moves around
429 connect(this.hidden_
, 'onmousemove', function(event
) {
431 dragEndX
= getX(event
);
432 dragEndY
= getY(event
);
434 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
439 // Track the beginning of drag events
440 connect(this.hidden_
, 'onmousedown', function(event
) {
442 px
= PlotKit
.Base
.findPosX(self
.canvas_
);
443 py
= PlotKit
.Base
.findPosY(self
.canvas_
);
444 dragStartX
= getX(event
);
445 dragStartY
= getY(event
);
448 // If the user releases the mouse button during a drag, but not over the
449 // canvas, then it doesn't count as a zooming action.
450 connect(document
, 'onmouseup', this, function(event
) {
458 // Temporarily cancel the dragging event when the mouse leaves the graph
459 connect(this.hidden_
, 'onmouseout', this, function(event
) {
466 // If the mouse is released on the canvas during a drag event, then it's a
467 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
468 connect(this.hidden_
, 'onmouseup', this, function(event
) {
471 dragEndX
= getX(event
);
472 dragEndY
= getY(event
);
473 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
474 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
476 if (regionWidth
< 2 && regionHeight
< 2 &&
477 self
.attr_('clickCallback') != null &&
478 self
.lastx_
!= undefined
) {
479 // TODO(danvk): pass along more info about the point.
480 self
.attr_('clickCallback')(event
, new Date(self
.lastx_
));
483 if (regionWidth
>= 10) {
484 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
485 Math
.max(dragStartX
, dragEndX
));
487 self
.canvas_
.getContext("2d").clearRect(0, 0,
489 self
.canvas_
.height
);
497 // Double-clicking zooms back out
498 connect(this.hidden_
, 'ondblclick', this, function(event
) {
499 self
.dateWindow_
= null;
500 self
.drawGraph_(self
.rawData_
);
501 var minDate
= self
.rawData_
[0][0];
502 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
503 if (self
.attr_("zoomCallback")) {
504 self
.attr_("zoomCallback")(minDate
, maxDate
);
510 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
511 * up any previous zoom rectangles that were drawn. This could be optimized to
512 * avoid extra redrawing, but it's tricky to avoid interactions with the status
514 * @param {Number} startX The X position where the drag started, in canvas
516 * @param {Number} endX The current X position of the drag, in canvas coords.
517 * @param {Number} prevEndX The value of endX on the previous call to this
518 * function. Used to avoid excess redrawing
521 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
522 var ctx
= this.canvas_
.getContext("2d");
524 // Clean up from the previous rect if necessary
526 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
527 Math
.abs(startX
- prevEndX
), this.height_
);
530 // Draw a light-grey rectangle to show the new viewing area
531 if (endX
&& startX
) {
532 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
533 ctx
.fillRect(Math
.min(startX
, endX
), 0,
534 Math
.abs(endX
- startX
), this.height_
);
539 * Zoom to something containing [lowX, highX]. These are pixel coordinates
540 * in the canvas. The exact zoom window may be slightly larger if there are no
541 * data points near lowX or highX. This function redraws the graph.
542 * @param {Number} lowX The leftmost pixel value that should be visible.
543 * @param {Number} highX The rightmost pixel value that should be visible.
546 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
547 // Find the earliest and latest dates contained in this canvasx range.
548 var points
= this.layout_
.points
;
551 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
552 for (var i
= 0; i
< points
.length
; i
++) {
553 var cx
= points
[i
].canvasx
;
554 var x
= points
[i
].xval
;
555 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
556 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
558 // Use the extremes if either is missing
559 if (minDate
== null) minDate
= points
[0].xval
;
560 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
562 this.dateWindow_
= [minDate
, maxDate
];
563 this.drawGraph_(this.rawData_
);
564 if (this.attr_("zoomCallback")) {
565 this.attr_("zoomCallback")(minDate
, maxDate
);
570 * When the mouse moves in the canvas, display information about a nearby data
571 * point and draw dots over those points in the data series. This function
572 * takes care of cleanup of previously-drawn dots.
573 * @param {Object} event The mousemove event from the browser.
576 Dygraph
.prototype.mouseMove_
= function(event
) {
577 var canvasx
= event
.mouse().page
.x
- PlotKit
.Base
.findPosX(this.hidden_
);
578 var points
= this.layout_
.points
;
583 // Loop through all the points and find the date nearest to our current
585 var minDist
= 1e+100;
587 for (var i
= 0; i
< points
.length
; i
++) {
588 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
589 if (dist
> minDist
) break;
593 if (idx
>= 0) lastx
= points
[idx
].xval
;
594 // Check that you can really highlight the last day's data
595 if (canvasx
> points
[points
.length
-1].canvasx
)
596 lastx
= points
[points
.length
-1].xval
;
598 // Extract the points we've selected
600 for (var i
= 0; i
< points
.length
; i
++) {
601 if (points
[i
].xval
== lastx
) {
602 selPoints
.push(points
[i
]);
606 // Clear the previously drawn vertical, if there is one
607 var circleSize
= this.attr_('highlightCircleSize');
608 var ctx
= this.canvas_
.getContext("2d");
609 if (this.previousVerticalX_
>= 0) {
610 var px
= this.previousVerticalX_
;
611 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
614 if (selPoints
.length
> 0) {
615 var canvasx
= selPoints
[0].canvasx
;
617 // Set the status message to indicate the selected point(s)
618 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
619 var clen
= this.colors_
.length
;
620 for (var i
= 0; i
< selPoints
.length
; i
++) {
621 if (isNaN(selPoints
[i
].canvasy
)) continue;
622 if (this.attr_("labelsSeparateLines")) {
625 var point
= selPoints
[i
];
626 replace
+= " <b><font color='" + this.colors_
[i
%clen
].toHexString() + "'>"
627 + point
.name
+ "</font></b>:"
628 + this.round_(point
.yval
, 2);
630 this.attr_("labelsDiv").innerHTML
= replace
;
632 // Save last x position for callbacks.
635 // Draw colored circles over the center of each selected point
637 for (var i
= 0; i
< selPoints
.length
; i
++) {
638 if (isNaN(selPoints
[i
%clen
].canvasy
)) continue;
640 ctx
.fillStyle
= this.colors_
[i
%clen
].toRGBString();
641 ctx
.arc(canvasx
, selPoints
[i
%clen
].canvasy
, circleSize
, 0, 360, false);
646 this.previousVerticalX_
= canvasx
;
651 * The mouse has left the canvas. Clear out whatever artifacts remain
652 * @param {Object} event the mouseout event from the browser.
655 Dygraph
.prototype.mouseOut_
= function(event
) {
656 // Get rid of the overlay data
657 var ctx
= this.canvas_
.getContext("2d");
658 ctx
.clearRect(0, 0, this.width_
, this.height_
);
659 this.attr_("labelsDiv").innerHTML
= "";
662 Dygraph
.zeropad
= function(x
) {
663 if (x
< 10) return "0" + x
; else return "" + x
;
667 * Return a string version of the hours, minutes and seconds portion of a date.
668 * @param {Number} date The JavaScript date (ms since epoch)
669 * @return {String} A time of the form "HH:MM:SS"
672 Dygraph
.prototype.hmsString_
= function(date
) {
673 var zeropad
= Dygraph
.zeropad
;
674 var d
= new Date(date
);
675 if (d
.getSeconds()) {
676 return zeropad(d
.getHours()) + ":" +
677 zeropad(d
.getMinutes()) + ":" +
678 zeropad(d
.getSeconds());
679 } else if (d
.getMinutes()) {
680 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
682 return zeropad(d
.getHours());
687 * Convert a JS date (millis since epoch) to YYYY/MM/DD
688 * @param {Number} date The JavaScript date (ms since epoch)
689 * @return {String} A date of the form "YYYY/MM/DD"
691 * TODO(danvk): why is this part of the prototype?
693 Dygraph
.dateString_
= function(date
, self
) {
694 var zeropad
= Dygraph
.zeropad
;
695 var d
= new Date(date
);
698 var year
= "" + d
.getFullYear();
699 // Get a 0 padded month string
700 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
701 // Get a 0 padded day string
702 var day
= zeropad(d
.getDate());
705 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
706 if (frac
) ret
= " " + self
.hmsString_(date
);
708 return year
+ "/" + month + "/" + day
+ ret
;
712 * Round a number to the specified number of digits past the decimal point.
713 * @param {Number} num The number to round
714 * @param {Number} places The number of decimals to which to round
715 * @return {Number} The rounded number
718 Dygraph
.prototype.round_
= function(num
, places
) {
719 var shift
= Math
.pow(10, places
);
720 return Math
.round(num
* shift
)/shift
;
724 * Fires when there's data available to be graphed.
725 * @param {String} data Raw CSV data to be plotted
728 Dygraph
.prototype.loadedEvent_
= function(data
) {
729 this.rawData_
= this.parseCSV_(data
);
730 this.drawGraph_(this.rawData_
);
733 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
734 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
735 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
738 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
741 Dygraph
.prototype.addXTicks_
= function() {
742 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
743 var startDate
, endDate
;
744 if (this.dateWindow_
) {
745 startDate
= this.dateWindow_
[0];
746 endDate
= this.dateWindow_
[1];
748 startDate
= this.rawData_
[0][0];
749 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
752 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
753 this.layout_
.updateOptions({xTicks
: xTicks
});
756 // Time granularity enumeration
757 Dygraph
.SECONDLY
= 0;
758 Dygraph
.TEN_SECONDLY
= 1;
759 Dygraph
.THIRTY_SECONDLY
= 2;
760 Dygraph
.MINUTELY
= 3;
761 Dygraph
.TEN_MINUTELY
= 4;
762 Dygraph
.THIRTY_MINUTELY
= 5;
764 Dygraph
.SIX_HOURLY
= 7;
767 Dygraph
.MONTHLY
= 10;
768 Dygraph
.QUARTERLY
= 11;
769 Dygraph
.BIANNUAL
= 12;
771 Dygraph
.DECADAL
= 14;
772 Dygraph
.NUM_GRANULARITIES
= 15;
774 Dygraph
.SHORT_SPACINGS
= [];
775 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
776 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
777 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
778 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
779 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
780 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
781 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
782 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600 * 6;
783 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
784 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
788 // If we used this time granularity, how many ticks would there be?
789 // This is only an approximation, but it's generally good enough.
791 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
792 if (granularity
< Dygraph
.MONTHLY
) {
793 // Generate one tick mark for every fixed interval of time.
794 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
795 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
797 var year_mod
= 1; // e.g. to only print one point every 10 years.
799 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
800 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
801 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
802 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
804 var msInYear
= 365.2524 * 24 * 3600 * 1000;
805 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
806 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
812 // Construct an x-axis of nicely-formatted times on meaningful boundaries
813 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
815 // Returns an array containing {v: millis, label: label} dictionaries.
817 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
819 if (granularity
< Dygraph
.MONTHLY
) {
820 // Generate one tick mark for every fixed interval of time.
821 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
822 var format
= '%d%b'; // e.g. "1 Jan"
823 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
824 if (granularity
< Dygraph
.HOURLY
) {
825 start_time
= spacing
* Math
.floor(0.5 + start_time
/ spacing
);
827 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
829 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
830 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
831 // the extra hour covers DST problems.
832 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
834 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
838 // Display a tick mark on the first of a set of months of each year.
839 // Years get a tick mark iff y % year_mod == 0. This is useful for
840 // displaying a tick mark once every 10 years, say, on long time scales.
842 var year_mod
= 1; // e.g. to only print one point every 10 years.
844 if (granularity
== Dygraph
.MONTHLY
) {
845 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
846 } else if (granularity
== Dygraph
.QUARTERLY
) {
847 months
= [ 0, 3, 6, 9 ];
848 } else if (granularity
== Dygraph
.BIANNUAL
) {
850 } else if (granularity
== Dygraph
.ANNUAL
) {
852 } else if (granularity
== Dygraph
.DECADAL
) {
857 var start_year
= new Date(start_time
).getFullYear();
858 var end_year
= new Date(end_time
).getFullYear();
859 var zeropad
= Dygraph
.zeropad
;
860 for (var i
= start_year
; i
<= end_year
; i
++) {
861 if (i
% year_mod
!= 0) continue;
862 for (var j
= 0; j
< months
.length
; j
++) {
863 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
864 var t
= Date
.parse(date_str
);
865 if (t
< start_time
|| t
> end_time
) continue;
866 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
876 * Add ticks to the x-axis based on a date range.
877 * @param {Number} startDate Start of the date window (millis since epoch)
878 * @param {Number} endDate End of the date window (millis since epoch)
879 * @return {Array.<Object>} Array of {label, value} tuples.
882 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
884 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
885 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
886 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
893 return self
.GetXAxis(startDate
, endDate
, chosen
);
895 // TODO(danvk): signal error.
900 * Add ticks when the x axis has numbers on it (instead of dates)
901 * @param {Number} startDate Start of the date window (millis since epoch)
902 * @param {Number} endDate End of the date window (millis since epoch)
903 * @return {Array.<Object>} Array of {label, value} tuples.
906 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
908 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
909 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
910 // The first spacing greater than pixelsPerYLabel is what we use.
911 var mults
= [1, 2, 5];
912 var scale
, low_val
, high_val
, nTicks
;
913 // TODO(danvk): make it possible to set this for x- and y-axes independently.
914 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
915 for (var i
= -10; i
< 50; i
++) {
916 var base_scale
= Math
.pow(10, i
);
917 for (var j
= 0; j
< mults
.length
; j
++) {
918 scale
= base_scale
* mults
[j
];
919 low_val
= Math
.floor(minV
/ scale
) * scale
;
920 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
921 nTicks
= (high_val
- low_val
) / scale
;
922 var spacing
= self
.height_
/ nTicks
;
923 // wish I could break out of both loops at once...
924 if (spacing
> pixelsPerTick
) break;
926 if (spacing
> pixelsPerTick
) break;
929 // Construct labels for the ticks
931 for (var i
= 0; i
< nTicks
; i
++) {
932 var tickV
= low_val
+ i
* scale
;
933 var label
= self
.round_(tickV
, 2);
934 if (self
.attr_("labelsKMB")) {
936 if (tickV
>= k
*k
*k
) {
937 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "B";
938 } else if (tickV
>= k
*k
) {
939 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
940 } else if (tickV
>= k
) {
941 label
= self
.round_(tickV
/k
, 1) + "K";
944 ticks
.push( {label
: label
, v
: tickV
} );
950 * Adds appropriate ticks on the y-axis
951 * @param {Number} minY The minimum Y value in the data set
952 * @param {Number} maxY The maximum Y value in the data set
955 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
956 // Set the number of ticks so that the labels are human-friendly.
957 // TODO(danvk): make this an attribute as well.
958 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
959 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
964 * Update the graph with new data. Data is in the format
965 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
966 * or, if errorBars=true,
967 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
968 * @param {Array.<Object>} data The data (see above)
971 Dygraph
.prototype.drawGraph_
= function(data
) {
972 var minY
= null, maxY
= null;
973 this.layout_
.removeAllDatasets();
976 // Loop over all fields in the dataset
977 for (var i
= 1; i
< data
[0].length
; i
++) {
979 for (var j
= 0; j
< data
.length
; j
++) {
980 var date
= data
[j
][0];
981 series
[j
] = [date
, data
[j
][i
]];
983 series
= this.rollingAverage(series
, this.rollPeriod_
);
985 // Prune down to the desired range, if necessary (for zooming)
986 var bars
= this.attr_("errorBars") || this.customBars_
;
987 if (this.dateWindow_
) {
988 var low
= this.dateWindow_
[0];
989 var high
= this.dateWindow_
[1];
991 for (var k
= 0; k
< series
.length
; k
++) {
992 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
993 pruned
.push(series
[k
]);
994 var y
= bars
? series
[k
][1][0] : series
[k
][1];
995 if (maxY
== null || y
> maxY
) maxY
= y
;
996 if (minY
== null || y
< minY
) minY
= y
;
1001 if (!this.customBars_
) {
1002 for (var j
= 0; j
< series
.length
; j
++) {
1003 var y
= bars
? series
[j
][1][0] : series
[j
][1];
1004 if (maxY
== null || y
> maxY
) {
1005 maxY
= bars
? y
+ series
[j
][1][1] : y
;
1007 if (minY
== null || y
< minY
) {
1008 minY
= bars
? y
+ series
[j
][1][1] : y
;
1012 // With custom bars, maxY is the max of the high values.
1013 for (var j
= 0; j
< series
.length
; j
++) {
1014 var y
= series
[j
][1][0];
1015 var high
= series
[j
][1][2];
1016 if (high
> y
) y
= high
;
1017 if (maxY
== null || y
> maxY
) {
1020 if (minY
== null || y
< minY
) {
1029 for (var j
=0; j
<series
.length
; j
++)
1030 vals
[j
] = [series
[j
][0],
1031 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1032 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1034 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1038 // Use some heuristics to come up with a good maxY value, unless it's been
1039 // set explicitly by the user.
1040 if (this.valueRange_
!= null) {
1041 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1043 // Add some padding and round up to an integer to be human-friendly.
1044 var span
= maxY
- minY
;
1045 var maxAxisY
= maxY
+ 0.1 * span
;
1046 var minAxisY
= minY
- 0.1 * span
;
1048 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1049 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1050 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1052 if (this.attr_("includeZero")) {
1053 if (maxY
< 0) maxAxisY
= 0;
1054 if (minY
> 0) minAxisY
= 0;
1057 this.addYTicks_(minAxisY
, maxAxisY
);
1062 // Tell PlotKit to use this new data and render itself
1063 this.layout_
.evaluateWithError();
1064 this.plotter_
.clear();
1065 this.plotter_
.render();
1066 this.canvas_
.getContext('2d').clearRect(0, 0,
1067 this.canvas_
.width
, this.canvas_
.height
);
1071 * Calculates the rolling average of a data set.
1072 * If originalData is [label, val], rolls the average of those.
1073 * If originalData is [label, [, it's interpreted as [value, stddev]
1074 * and the roll is returned in the same form, with appropriately reduced
1075 * stddev for each value.
1076 * Note that this is where fractional input (i.e. '5/10') is converted into
1078 * @param {Array} originalData The data in the appropriate format (see above)
1079 * @param {Number} rollPeriod The number of days over which to average the data
1081 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1082 if (originalData
.length
< 2)
1083 return originalData
;
1084 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1085 var rollingData
= [];
1086 var sigma
= this.attr_("sigma");
1088 if (this.fractions_
) {
1090 var den
= 0; // numerator/denominator
1092 for (var i
= 0; i
< originalData
.length
; i
++) {
1093 num
+= originalData
[i
][1][0];
1094 den
+= originalData
[i
][1][1];
1095 if (i
- rollPeriod
>= 0) {
1096 num
-= originalData
[i
- rollPeriod
][1][0];
1097 den
-= originalData
[i
- rollPeriod
][1][1];
1100 var date
= originalData
[i
][0];
1101 var value
= den
? num
/ den
: 0.0;
1102 if (this.attr_("errorBars")) {
1103 if (this.wilsonInterval_
) {
1104 // For more details on this confidence interval, see:
1105 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1107 var p
= value
< 0 ? 0 : value
, n
= den
;
1108 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1109 var denom
= 1 + sigma
* sigma
/ den
;
1110 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1111 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1112 rollingData
[i
] = [date
,
1113 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1115 rollingData
[i
] = [date
, [0, 0, 0]];
1118 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1119 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1122 rollingData
[i
] = [date
, mult
* value
];
1125 } else if (this.customBars_
) {
1130 for (var i
= 0; i
< originalData
.length
; i
++) {
1131 var data
= originalData
[i
][1];
1133 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1139 if (i
- rollPeriod
>= 0) {
1140 var prev
= originalData
[i
- rollPeriod
];
1146 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1147 1.0 * (mid
- low
) / count
,
1148 1.0 * (high
- mid
) / count
]];
1151 // Calculate the rolling average for the first rollPeriod - 1 points where
1152 // there is not enough data to roll over the full number of days
1153 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1154 if (!this.attr_("errorBars")){
1155 for (var i
= 0; i
< num_init_points
; i
++) {
1157 for (var j
= 0; j
< i
+ 1; j
++)
1158 sum
+= originalData
[j
][1];
1159 rollingData
[i
] = [originalData
[i
][0], sum
/ (i
+ 1)];
1161 // Calculate the rolling average for the remaining points
1162 for (var i
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1163 i
< originalData
.length
;
1166 for (var j
= i
- rollPeriod
+ 1; j
< i
+ 1; j
++)
1167 sum
+= originalData
[j
][1];
1168 rollingData
[i
] = [originalData
[i
][0], sum
/ rollPeriod
];
1171 for (var i
= 0; i
< num_init_points
; i
++) {
1174 for (var j
= 0; j
< i
+ 1; j
++) {
1175 sum
+= originalData
[j
][1][0];
1176 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1178 var stddev
= Math
.sqrt(variance
)/(i
+1);
1179 rollingData
[i
] = [originalData
[i
][0],
1180 [sum
/(i
+1), sigma
* stddev
, sigma
* stddev
]];
1182 // Calculate the rolling average for the remaining points
1183 for (var i
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1184 i
< originalData
.length
;
1188 for (var j
= i
- rollPeriod
+ 1; j
< i
+ 1; j
++) {
1189 sum
+= originalData
[j
][1][0];
1190 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1192 var stddev
= Math
.sqrt(variance
) / rollPeriod
;
1193 rollingData
[i
] = [originalData
[i
][0],
1194 [sum
/ rollPeriod
, sigma
* stddev
, sigma
* stddev
]];
1203 * Parses a date, returning the number of milliseconds since epoch. This can be
1204 * passed in as an xValueParser in the Dygraph constructor.
1205 * TODO(danvk): enumerate formats that this understands.
1206 * @param {String} A date in YYYYMMDD format.
1207 * @return {Number} Milliseconds since epoch.
1210 Dygraph
.dateParser
= function(dateStr
, self
) {
1213 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1214 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1215 while (dateStrSlashed
.search("-") != -1) {
1216 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1218 d
= Date
.parse(dateStrSlashed
);
1219 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1220 // TODO(danvk): remove support for this format. It's confusing.
1221 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1222 + "/" + dateStr
.substr(6,2);
1223 d
= Date
.parse(dateStrSlashed
);
1225 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1226 // "2009/07/12 12:34:56"
1227 d
= Date
.parse(dateStr
);
1230 if (!d
|| isNaN(d
)) {
1231 self
.error("Couldn't parse " + dateStr
+ " as a date");
1237 * Detects the type of the str (date or numeric) and sets the various
1238 * formatting attributes in this.attrs_ based on this type.
1239 * @param {String} str An x value.
1242 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1244 if (str
.indexOf('-') >= 0 ||
1245 str
.indexOf('/') >= 0 ||
1246 isNaN(parseFloat(str
))) {
1248 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1249 // TODO(danvk): remove support for this format.
1254 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1255 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1256 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1258 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1259 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1260 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1265 * Parses a string in a special csv format. We expect a csv file where each
1266 * line is a date point, and the first field in each line is the date string.
1267 * We also expect that all remaining fields represent series.
1268 * if the errorBars attribute is set, then interpret the fields as:
1269 * date, series1, stddev1, series2, stddev2, ...
1270 * @param {Array.<Object>} data See above.
1273 * @return Array.<Object> An array with one entry for each row. These entries
1274 * are an array of cells in that row. The first entry is the parsed x-value for
1275 * the row. The second, third, etc. are the y-values. These can take on one of
1276 * three forms, depending on the CSV and constructor parameters:
1278 * 2. [ value, stddev ]
1279 * 3. [ low value, center value, high value ]
1281 Dygraph
.prototype.parseCSV_
= function(data
) {
1283 var lines
= data
.split("\n");
1285 if (this.labelsFromCSV_
) {
1287 this.attrs_
.labels
= lines
[0].split(",");
1291 var defaultParserSet
= false; // attempt to auto-detect x value type
1292 var expectedCols
= this.attr_("labels").length
;
1293 for (var i
= start
; i
< lines
.length
; i
++) {
1294 var line
= lines
[i
];
1295 if (line
.length
== 0) continue; // skip blank lines
1296 var inFields
= line
.split(',');
1297 if (inFields
.length
< 2) continue;
1300 if (!defaultParserSet
) {
1301 this.detectTypeFromString_(inFields
[0]);
1302 xParser
= this.attr_("xValueParser");
1303 defaultParserSet
= true;
1305 fields
[0] = xParser(inFields
[0], this);
1307 // If fractions are expected, parse the numbers as "A/B
"
1308 if (this.fractions_) {
1309 for (var j = 1; j < inFields.length; j++) {
1310 // TODO(danvk): figure out an appropriate way to flag parse errors.
1311 var vals = inFields[j].split("/");
1312 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1314 } else if (this.attr_("errorBars
")) {
1315 // If there are error bars, values are (value, stddev) pairs
1316 for (var j = 1; j < inFields.length; j += 2)
1317 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1318 parseFloat(inFields[j + 1])];
1319 } else if (this.customBars_) {
1320 // Bars are a low;center;high tuple
1321 for (var j = 1; j < inFields.length; j++) {
1322 var vals = inFields[j].split(";");
1323 fields[j] = [ parseFloat(vals[0]),
1324 parseFloat(vals[1]),
1325 parseFloat(vals[2]) ];
1328 // Values are just numbers
1329 for (var j = 1; j < inFields.length; j++) {
1330 fields[j] = parseFloat(inFields[j]);
1335 if (fields.length != expectedCols) {
1336 this.error("Number of columns
in line
" + i + " (" + fields.length +
1337 ") does not agree
with number of
labels (" + expectedCols +
1345 * The user has provided their data as a pre-packaged JS array. If the x values
1346 * are numeric, this is the same as dygraphs' internal format. If the x values
1347 * are dates, we need to convert them from Date objects to ms since epoch.
1348 * @param {Array.<Object>} data
1349 * @return {Array.<Object>} data with numeric x values.
1351 Dygraph.prototype.parseArray_ = function(data) {
1352 // Peek at the first x value to see if it's numeric.
1353 if (data.length == 0) {
1354 this.error("Can
't plot empty data set");
1357 if (data[0].length == 0) {
1358 this.error("Data set cannot contain an empty row");
1362 if (this.attr_("labels") == null) {
1363 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1364 "in the options parameter");
1365 this.attrs_.labels = [ "X" ];
1366 for (var i = 1; i < data[0].length; i++) {
1367 this.attrs_.labels.push("Y" + i);
1371 if (MochiKit.Base.isDateLike(data[0][0])) {
1372 // Some intelligent defaults for a date x-axis.
1373 this.attrs_.xValueFormatter = Dygraph.dateString_;
1374 this.attrs_.xTicker = Dygraph.dateTicker;
1376 // Assume they're all dates
.
1377 var parsedData
= MochiKit
.Base
.clone(data
);
1378 for (var i
= 0; i
< data
.length
; i
++) {
1379 if (parsedData
[i
].length
== 0) {
1380 this.error("Row " << (1 + i
) << " of data is empty");
1383 if (parsedData
[i
][0] == null
1384 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1385 this.error("x value in row " << (1 + i
) << " is not a Date");
1388 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1392 // Some intelligent defaults for a numeric x-axis.
1393 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1394 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1400 * Parses a DataTable object from gviz.
1401 * The data is expected to have a first column that is either a date or a
1402 * number. All subsequent columns must be numbers. If there is a clear mismatch
1403 * between this.xValueParser_ and the type of the first column, it will be
1404 * fixed. Returned value is in the same format as return value of parseCSV_.
1405 * @param {Array.<Object>} data See above.
1408 Dygraph
.prototype.parseDataTable_
= function(data
) {
1409 var cols
= data
.getNumberOfColumns();
1410 var rows
= data
.getNumberOfRows();
1412 // Read column labels
1414 for (var i
= 0; i
< cols
; i
++) {
1415 labels
.push(data
.getColumnLabel(i
));
1417 this.attrs_
.labels
= labels
;
1419 var indepType
= data
.getColumnType(0);
1420 if (indepType
== 'date') {
1421 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1422 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1423 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1424 } else if (indepType
== 'number') {
1425 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1426 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1427 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1429 this.error("only 'date' and 'number' types are supported for column 1 " +
1430 "of DataTable input (Got '" + indepType
+ "')");
1435 for (var i
= 0; i
< rows
; i
++) {
1437 if (!data
.getValue(i
, 0)) continue;
1438 if (indepType
== 'date') {
1439 row
.push(data
.getValue(i
, 0).getTime());
1441 row
.push(data
.getValue(i
, 0));
1443 var any_data
= false;
1444 for (var j
= 1; j
< cols
; j
++) {
1445 row
.push(data
.getValue(i
, j
));
1446 if (data
.getValue(i
, j
)) any_data
= true;
1448 if (any_data
) ret
.push(row
);
1454 * Get the CSV data. If it's in a function, call that function. If it's in a
1455 * file, do an XMLHttpRequest to get it.
1458 Dygraph
.prototype.start_
= function() {
1459 if (typeof this.file_
== 'function') {
1460 // CSV string. Pretend we got it via XHR.
1461 this.loadedEvent_(this.file_());
1462 } else if (MochiKit
.Base
.isArrayLike(this.file_
)) {
1463 this.rawData_
= this.parseArray_(this.file_
);
1464 this.drawGraph_(this.rawData_
);
1465 } else if (typeof this.file_
== 'object' &&
1466 typeof this.file_
.getColumnRange
== 'function') {
1467 // must be a DataTable from gviz.
1468 this.rawData_
= this.parseDataTable_(this.file_
);
1469 this.drawGraph_(this.rawData_
);
1470 } else if (typeof this.file_
== 'string') {
1471 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1472 if (this.file_
.indexOf('\n') >= 0) {
1473 this.loadedEvent_(this.file_
);
1475 var req
= new XMLHttpRequest();
1477 req
.onreadystatechange
= function () {
1478 if (req
.readyState
== 4) {
1479 if (req
.status
== 200) {
1480 caller
.loadedEvent_(req
.responseText
);
1485 req
.open("GET", this.file_
, true);
1489 this.error("Unknown data format: " + (typeof this.file_
));
1494 * Changes various properties of the graph. These can include:
1496 * <li>file: changes the source data for the graph</li>
1497 * <li>errorBars: changes whether the data contains stddev</li>
1499 * @param {Object} attrs The new properties and values
1501 Dygraph
.prototype.updateOptions
= function(attrs
) {
1502 // TODO(danvk): this is a mess. Rethink this function.
1503 if (attrs
.customBars
) {
1504 this.customBars_
= attrs
.customBars
;
1506 if (attrs
.rollPeriod
) {
1507 this.rollPeriod_
= attrs
.rollPeriod
;
1509 if (attrs
.dateWindow
) {
1510 this.dateWindow_
= attrs
.dateWindow
;
1512 if (attrs
.valueRange
) {
1513 this.valueRange_
= attrs
.valueRange
;
1515 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
1517 this.labelsFromCSV_
= (this.attr_("labels") == null);
1519 // TODO(danvk): this doesn't match the constructor logic
1520 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1521 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1522 this.file_
= attrs
['file'];
1525 this.drawGraph_(this.rawData_
);
1530 * Adjusts the number of days in the rolling average. Updates the graph to
1531 * reflect the new averaging period.
1532 * @param {Number} length Number of days over which to average the data.
1534 Dygraph
.prototype.adjustRoll
= function(length
) {
1535 this.rollPeriod_
= length
;
1536 this.drawGraph_(this.rawData_
);
1541 * A wrapper around Dygraph that implements the gviz API.
1542 * @param {Object} container The DOM object the visualization should live in.
1544 Dygraph
.GVizChart
= function(container
) {
1545 this.container
= container
;
1548 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1549 this.container
.innerHTML
= '';
1550 this.date_graph
= new Dygraph(this.container
, data
, options
);
1553 // Older pages may still use this name.
1554 DateGraph
= Dygraph
;