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_();
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
= document
.createElement("div");
278 this.graphDiv
.style
.width
= this.width_
+ "px";
279 this.graphDiv
.style
.height
= this.height_
+ "px";
280 enclosing
.appendChild(this.graphDiv
);
282 // Create the canvas for interactive parts of the chart.
283 this.canvas_
= document
.createElement("canvas");
284 this.canvas_
.style
.position
= "absolute";
285 this.canvas_
.width
= this.width_
;
286 this.canvas_
.height
= this.height_
;
287 this.graphDiv
.appendChild(this.canvas_
);
289 // ... and for static parts of the chart.
290 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
291 connect(this.hidden_
, 'onmousemove', this, function(e
) { this.mouseMove_(e
) });
292 connect(this.hidden_
, 'onmouseout', this, function(e
) { this.mouseOut_(e
) });
296 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
297 * this particular canvas. All Dygraph work is done on this.canvas_.
298 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
299 * @return {Object} The newly-created canvas
302 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
303 var h
= document
.createElement("canvas");
304 h
.style
.position
= "absolute";
305 h
.style
.top
= canvas
.style
.top
;
306 h
.style
.left
= canvas
.style
.left
;
307 h
.width
= this.width_
;
308 h
.height
= this.height_
;
309 this.graphDiv
.appendChild(h
);
314 * Generate a set of distinct colors for the data series. This is done with a
315 * color wheel. Saturation/Value are customizable, and the hue is
316 * equally-spaced around the color wheel. If a custom set of colors is
317 * specified, that is used instead.
320 Dygraph
.prototype.setColors_
= function() {
321 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
322 // away with this.renderOptions_.
323 var num
= this.attr_("labels").length
- 1;
325 var colors
= this.attr_('colors');
327 var sat
= this.attr_('colorSaturation') || 1.0;
328 var val
= this.attr_('colorValue') || 0.5;
329 for (var i
= 1; i
<= num
; i
++) {
330 var hue
= (1.0*i
/(1+num
));
331 this.colors_
.push( MochiKit
.Color
.Color
.fromHSV(hue
, sat
, val
) );
334 for (var i
= 0; i
< num
; i
++) {
335 var colorStr
= colors
[i
% colors
.length
];
336 this.colors_
.push( MochiKit
.Color
.Color
.fromString(colorStr
) );
340 // TODO(danvk): update this w/r
/t/ the
new options system
.
341 this.renderOptions_
.colorScheme
= this.colors_
;
342 MochiKit
.Base
.update(this.plotter_
.options
, this.renderOptions_
);
343 MochiKit
.Base
.update(this.layoutOptions_
, this.user_attrs_
);
344 MochiKit
.Base
.update(this.layoutOptions_
, this.attrs_
);
347 // The following functions are from quirksmode.org
348 // http://www.quirksmode.org/js
/findpos
.html
349 Dygraph
.findPosX
= function(obj
) {
351 if (obj
.offsetParent
) {
352 while (obj
.offsetParent
) {
353 curleft
+= obj
.offsetLeft
;
354 obj
= obj
.offsetParent
;
362 Dygraph
.findPosY
= function(obj
) {
364 if (obj
.offsetParent
) {
365 while (obj
.offsetParent
) {
366 curtop
+= obj
.offsetTop
;
367 obj
= obj
.offsetParent
;
376 * Create the div that contains information on the selected point(s)
377 * This goes in the top right of the canvas, unless an external div has already
381 Dygraph
.prototype.createStatusMessage_
= function(){
382 if (!this.attr_("labelsDiv")) {
383 var divWidth
= this.attr_('labelsDivWidth');
385 "position": "absolute",
388 "width": divWidth
+ "px",
390 "left": (this.width_
- divWidth
- 2) + "px",
391 "background": "white",
393 "overflow": "hidden"};
394 MochiKit
.Base
.update(messagestyle
, this.attr_('labelsDivStyles'));
395 var div
= document
.createElement("div");
396 for (var name
in messagestyle
) {
397 div
.style
[name
] = messagestyle
[name
];
399 this.graphDiv
.appendChild(div
);
400 this.attrs_
.labelsDiv
= div
;
405 * Create the text box to adjust the averaging period
406 * @return {Object} The newly-created text box
409 Dygraph
.prototype.createRollInterface_
= function() {
410 var display
= this.attr_('showRoller') ? "block" : "none";
411 var textAttr
= { "position": "absolute",
413 "top": (this.plotter_
.area
.h
- 25) + "px",
414 "left": (this.plotter_
.area
.x
+ 1) + "px",
417 var roller
= document
.createElement("input");
418 roller
.type
= "text";
420 roller
.value
= this.rollPeriod_
;
421 for (var name
in textAttr
) {
422 roller
.style
[name
] = textAttr
[name
];
425 var pa
= this.graphDiv
;
426 pa
.appendChild(roller
);
427 connect(roller
, 'onchange', this,
428 function() { this.adjustRoll(roller
.value
); });
433 * Set up all the mouse handlers needed to capture dragging behavior for zoom
434 * events. Uses MochiKit.Signal to attach all the event handlers.
437 Dygraph
.prototype.createDragInterface_
= function() {
440 // Tracks whether the mouse is down right now
441 var mouseDown
= false;
442 var dragStartX
= null;
443 var dragStartY
= null;
448 // Utility function to convert page-wide coordinates to canvas coords
451 var getX
= function(e
) { return e
.mouse().page
.x
- px
};
452 var getY
= function(e
) { return e
.mouse().page
.y
- py
};
454 // Draw zoom rectangles when the mouse is down and the user moves around
455 connect(this.hidden_
, 'onmousemove', function(event
) {
457 dragEndX
= getX(event
);
458 dragEndY
= getY(event
);
460 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
465 // Track the beginning of drag events
466 connect(this.hidden_
, 'onmousedown', function(event
) {
468 px
= Dygraph
.findPosX(self
.canvas_
);
469 py
= Dygraph
.findPosY(self
.canvas_
);
470 dragStartX
= getX(event
);
471 dragStartY
= getY(event
);
474 // If the user releases the mouse button during a drag, but not over the
475 // canvas, then it doesn't count as a zooming action.
476 connect(document
, 'onmouseup', this, function(event
) {
484 // Temporarily cancel the dragging event when the mouse leaves the graph
485 connect(this.hidden_
, 'onmouseout', this, function(event
) {
492 // If the mouse is released on the canvas during a drag event, then it's a
493 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
494 connect(this.hidden_
, 'onmouseup', this, function(event
) {
497 dragEndX
= getX(event
);
498 dragEndY
= getY(event
);
499 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
500 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
502 if (regionWidth
< 2 && regionHeight
< 2 &&
503 self
.attr_('clickCallback') != null &&
504 self
.lastx_
!= undefined
) {
505 // TODO(danvk): pass along more info about the point.
506 self
.attr_('clickCallback')(event
, new Date(self
.lastx_
));
509 if (regionWidth
>= 10) {
510 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
511 Math
.max(dragStartX
, dragEndX
));
513 self
.canvas_
.getContext("2d").clearRect(0, 0,
515 self
.canvas_
.height
);
523 // Double-clicking zooms back out
524 connect(this.hidden_
, 'ondblclick', this, function(event
) {
525 self
.dateWindow_
= null;
526 self
.drawGraph_(self
.rawData_
);
527 var minDate
= self
.rawData_
[0][0];
528 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
529 if (self
.attr_("zoomCallback")) {
530 self
.attr_("zoomCallback")(minDate
, maxDate
);
536 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
537 * up any previous zoom rectangles that were drawn. This could be optimized to
538 * avoid extra redrawing, but it's tricky to avoid interactions with the status
540 * @param {Number} startX The X position where the drag started, in canvas
542 * @param {Number} endX The current X position of the drag, in canvas coords.
543 * @param {Number} prevEndX The value of endX on the previous call to this
544 * function. Used to avoid excess redrawing
547 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
548 var ctx
= this.canvas_
.getContext("2d");
550 // Clean up from the previous rect if necessary
552 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
553 Math
.abs(startX
- prevEndX
), this.height_
);
556 // Draw a light-grey rectangle to show the new viewing area
557 if (endX
&& startX
) {
558 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
559 ctx
.fillRect(Math
.min(startX
, endX
), 0,
560 Math
.abs(endX
- startX
), this.height_
);
565 * Zoom to something containing [lowX, highX]. These are pixel coordinates
566 * in the canvas. The exact zoom window may be slightly larger if there are no
567 * data points near lowX or highX. This function redraws the graph.
568 * @param {Number} lowX The leftmost pixel value that should be visible.
569 * @param {Number} highX The rightmost pixel value that should be visible.
572 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
573 // Find the earliest and latest dates contained in this canvasx range.
574 var points
= this.layout_
.points
;
577 // Find the nearest [minDate, maxDate] that contains [lowX, highX]
578 for (var i
= 0; i
< points
.length
; i
++) {
579 var cx
= points
[i
].canvasx
;
580 var x
= points
[i
].xval
;
581 if (cx
< lowX
&& (minDate
== null || x
> minDate
)) minDate
= x
;
582 if (cx
> highX
&& (maxDate
== null || x
< maxDate
)) maxDate
= x
;
584 // Use the extremes if either is missing
585 if (minDate
== null) minDate
= points
[0].xval
;
586 if (maxDate
== null) maxDate
= points
[points
.length
-1].xval
;
588 this.dateWindow_
= [minDate
, maxDate
];
589 this.drawGraph_(this.rawData_
);
590 if (this.attr_("zoomCallback")) {
591 this.attr_("zoomCallback")(minDate
, maxDate
);
596 * When the mouse moves in the canvas, display information about a nearby data
597 * point and draw dots over those points in the data series. This function
598 * takes care of cleanup of previously-drawn dots.
599 * @param {Object} event The mousemove event from the browser.
602 Dygraph
.prototype.mouseMove_
= function(event
) {
603 var canvasx
= event
.mouse().page
.x
- Dygraph
.findPosX(this.hidden_
);
604 var points
= this.layout_
.points
;
609 // Loop through all the points and find the date nearest to our current
611 var minDist
= 1e+100;
613 for (var i
= 0; i
< points
.length
; i
++) {
614 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
615 if (dist
> minDist
) break;
619 if (idx
>= 0) lastx
= points
[idx
].xval
;
620 // Check that you can really highlight the last day's data
621 if (canvasx
> points
[points
.length
-1].canvasx
)
622 lastx
= points
[points
.length
-1].xval
;
624 // Extract the points we've selected
626 for (var i
= 0; i
< points
.length
; i
++) {
627 if (points
[i
].xval
== lastx
) {
628 selPoints
.push(points
[i
]);
632 // Clear the previously drawn vertical, if there is one
633 var circleSize
= this.attr_('highlightCircleSize');
634 var ctx
= this.canvas_
.getContext("2d");
635 if (this.previousVerticalX_
>= 0) {
636 var px
= this.previousVerticalX_
;
637 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
640 var isOK
= function(x
) { return x
&& !isNaN(x
); };
642 if (selPoints
.length
> 0) {
643 var canvasx
= selPoints
[0].canvasx
;
645 // Set the status message to indicate the selected point(s)
646 var replace
= this.attr_('xValueFormatter')(lastx
, this) + ":";
647 var clen
= this.colors_
.length
;
648 for (var i
= 0; i
< selPoints
.length
; i
++) {
649 if (!isOK(selPoints
[i
].canvasy
)) continue;
650 if (this.attr_("labelsSeparateLines")) {
653 var point
= selPoints
[i
];
654 replace
+= " <b><font color='" + this.colors_
[i
%clen
].toHexString() + "'>"
655 + point
.name
+ "</font></b>:"
656 + this.round_(point
.yval
, 2);
658 this.attr_("labelsDiv").innerHTML
= replace
;
660 // Save last x position for callbacks.
663 // Draw colored circles over the center of each selected point
665 for (var i
= 0; i
< selPoints
.length
; i
++) {
666 if (!isOK(selPoints
[i
%clen
].canvasy
)) continue;
668 ctx
.fillStyle
= this.colors_
[i
%clen
].toRGBString();
669 ctx
.arc(canvasx
, selPoints
[i
%clen
].canvasy
, circleSize
, 0, 360, false);
674 this.previousVerticalX_
= canvasx
;
679 * The mouse has left the canvas. Clear out whatever artifacts remain
680 * @param {Object} event the mouseout event from the browser.
683 Dygraph
.prototype.mouseOut_
= function(event
) {
684 // Get rid of the overlay data
685 var ctx
= this.canvas_
.getContext("2d");
686 ctx
.clearRect(0, 0, this.width_
, this.height_
);
687 this.attr_("labelsDiv").innerHTML
= "";
690 Dygraph
.zeropad
= function(x
) {
691 if (x
< 10) return "0" + x
; else return "" + x
;
695 * Return a string version of the hours, minutes and seconds portion of a date.
696 * @param {Number} date The JavaScript date (ms since epoch)
697 * @return {String} A time of the form "HH:MM:SS"
700 Dygraph
.prototype.hmsString_
= function(date
) {
701 var zeropad
= Dygraph
.zeropad
;
702 var d
= new Date(date
);
703 if (d
.getSeconds()) {
704 return zeropad(d
.getHours()) + ":" +
705 zeropad(d
.getMinutes()) + ":" +
706 zeropad(d
.getSeconds());
707 } else if (d
.getMinutes()) {
708 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
710 return zeropad(d
.getHours());
715 * Convert a JS date (millis since epoch) to YYYY/MM/DD
716 * @param {Number} date The JavaScript date (ms since epoch)
717 * @return {String} A date of the form "YYYY/MM/DD"
719 * TODO(danvk): why is this part of the prototype?
721 Dygraph
.dateString_
= function(date
, self
) {
722 var zeropad
= Dygraph
.zeropad
;
723 var d
= new Date(date
);
726 var year
= "" + d
.getFullYear();
727 // Get a 0 padded month string
728 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
729 // Get a 0 padded day string
730 var day
= zeropad(d
.getDate());
733 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
734 if (frac
) ret
= " " + self
.hmsString_(date
);
736 return year
+ "/" + month + "/" + day
+ ret
;
740 * Round a number to the specified number of digits past the decimal point.
741 * @param {Number} num The number to round
742 * @param {Number} places The number of decimals to which to round
743 * @return {Number} The rounded number
746 Dygraph
.prototype.round_
= function(num
, places
) {
747 var shift
= Math
.pow(10, places
);
748 return Math
.round(num
* shift
)/shift
;
752 * Fires when there's data available to be graphed.
753 * @param {String} data Raw CSV data to be plotted
756 Dygraph
.prototype.loadedEvent_
= function(data
) {
757 this.rawData_
= this.parseCSV_(data
);
758 this.drawGraph_(this.rawData_
);
761 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
762 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
763 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
766 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
769 Dygraph
.prototype.addXTicks_
= function() {
770 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
771 var startDate
, endDate
;
772 if (this.dateWindow_
) {
773 startDate
= this.dateWindow_
[0];
774 endDate
= this.dateWindow_
[1];
776 startDate
= this.rawData_
[0][0];
777 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
780 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
781 this.layout_
.updateOptions({xTicks
: xTicks
});
784 // Time granularity enumeration
785 Dygraph
.SECONDLY
= 0;
786 Dygraph
.TEN_SECONDLY
= 1;
787 Dygraph
.THIRTY_SECONDLY
= 2;
788 Dygraph
.MINUTELY
= 3;
789 Dygraph
.TEN_MINUTELY
= 4;
790 Dygraph
.THIRTY_MINUTELY
= 5;
792 Dygraph
.SIX_HOURLY
= 7;
795 Dygraph
.MONTHLY
= 10;
796 Dygraph
.QUARTERLY
= 11;
797 Dygraph
.BIANNUAL
= 12;
799 Dygraph
.DECADAL
= 14;
800 Dygraph
.NUM_GRANULARITIES
= 15;
802 Dygraph
.SHORT_SPACINGS
= [];
803 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
804 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
805 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
806 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
807 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
808 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
809 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
810 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600 * 6;
811 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
812 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
816 // If we used this time granularity, how many ticks would there be?
817 // This is only an approximation, but it's generally good enough.
819 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
820 if (granularity
< Dygraph
.MONTHLY
) {
821 // Generate one tick mark for every fixed interval of time.
822 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
823 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
825 var year_mod
= 1; // e.g. to only print one point every 10 years.
827 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
828 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
829 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
830 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
832 var msInYear
= 365.2524 * 24 * 3600 * 1000;
833 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
834 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
840 // Construct an x-axis of nicely-formatted times on meaningful boundaries
841 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
843 // Returns an array containing {v: millis, label: label} dictionaries.
845 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
847 if (granularity
< Dygraph
.MONTHLY
) {
848 // Generate one tick mark for every fixed interval of time.
849 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
850 var format
= '%d%b'; // e.g. "1 Jan"
851 // TODO(danvk): be smarter about making sure this really hits a "nice" time.
852 if (granularity
< Dygraph
.HOURLY
) {
853 start_time
= spacing
* Math
.floor(0.5 + start_time
/ spacing
);
855 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
857 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
858 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
859 // the extra hour covers DST problems.
860 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
862 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
866 // Display a tick mark on the first of a set of months of each year.
867 // Years get a tick mark iff y % year_mod == 0. This is useful for
868 // displaying a tick mark once every 10 years, say, on long time scales.
870 var year_mod
= 1; // e.g. to only print one point every 10 years.
872 if (granularity
== Dygraph
.MONTHLY
) {
873 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
874 } else if (granularity
== Dygraph
.QUARTERLY
) {
875 months
= [ 0, 3, 6, 9 ];
876 } else if (granularity
== Dygraph
.BIANNUAL
) {
878 } else if (granularity
== Dygraph
.ANNUAL
) {
880 } else if (granularity
== Dygraph
.DECADAL
) {
885 var start_year
= new Date(start_time
).getFullYear();
886 var end_year
= new Date(end_time
).getFullYear();
887 var zeropad
= Dygraph
.zeropad
;
888 for (var i
= start_year
; i
<= end_year
; i
++) {
889 if (i
% year_mod
!= 0) continue;
890 for (var j
= 0; j
< months
.length
; j
++) {
891 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
892 var t
= Date
.parse(date_str
);
893 if (t
< start_time
|| t
> end_time
) continue;
894 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
904 * Add ticks to the x-axis based on a date range.
905 * @param {Number} startDate Start of the date window (millis since epoch)
906 * @param {Number} endDate End of the date window (millis since epoch)
907 * @return {Array.<Object>} Array of {label, value} tuples.
910 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
912 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
913 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
914 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
921 return self
.GetXAxis(startDate
, endDate
, chosen
);
923 // TODO(danvk): signal error.
928 * Add ticks when the x axis has numbers on it (instead of dates)
929 * @param {Number} startDate Start of the date window (millis since epoch)
930 * @param {Number} endDate End of the date window (millis since epoch)
931 * @return {Array.<Object>} Array of {label, value} tuples.
934 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
936 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
937 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
938 // The first spacing greater than pixelsPerYLabel is what we use.
939 var mults
= [1, 2, 5];
940 var scale
, low_val
, high_val
, nTicks
;
941 // TODO(danvk): make it possible to set this for x- and y-axes independently.
942 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
943 for (var i
= -10; i
< 50; i
++) {
944 var base_scale
= Math
.pow(10, i
);
945 for (var j
= 0; j
< mults
.length
; j
++) {
946 scale
= base_scale
* mults
[j
];
947 low_val
= Math
.floor(minV
/ scale
) * scale
;
948 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
949 nTicks
= (high_val
- low_val
) / scale
;
950 var spacing
= self
.height_
/ nTicks
;
951 // wish I could break out of both loops at once...
952 if (spacing
> pixelsPerTick
) break;
954 if (spacing
> pixelsPerTick
) break;
957 // Construct labels for the ticks
959 for (var i
= 0; i
< nTicks
; i
++) {
960 var tickV
= low_val
+ i
* scale
;
961 var label
= self
.round_(tickV
, 2);
962 if (self
.attr_("labelsKMB")) {
964 if (tickV
>= k
*k
*k
) {
965 label
= self
.round_(tickV
/(k
*k
*k
), 1) + "B";
966 } else if (tickV
>= k
*k
) {
967 label
= self
.round_(tickV
/(k
*k
), 1) + "M";
968 } else if (tickV
>= k
) {
969 label
= self
.round_(tickV
/k
, 1) + "K";
972 ticks
.push( {label
: label
, v
: tickV
} );
978 * Adds appropriate ticks on the y-axis
979 * @param {Number} minY The minimum Y value in the data set
980 * @param {Number} maxY The maximum Y value in the data set
983 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
984 // Set the number of ticks so that the labels are human-friendly.
985 // TODO(danvk): make this an attribute as well.
986 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
987 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
991 // Computes the range of the data series (including confidence intervals).
992 // series is either [ [x1, y1], [x2, y2], ... ] or
993 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
994 // Returns [low, high]
995 Dygraph
.prototype.extremeValues_
= function(series
) {
996 var minY
= null, maxY
= null;
998 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1000 // With custom bars, maxY is the max of the high values.
1001 for (var j
= 0; j
< series
.length
; j
++) {
1002 var y
= series
[j
][1][0];
1004 var low
= y
- series
[j
][1][1];
1005 var high
= y
+ series
[j
][1][2];
1006 if (low
> y
) low
= y
; // this can happen with custom bars,
1007 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1008 if (maxY
== null || high
> maxY
) {
1011 if (minY
== null || low
< minY
) {
1016 for (var j
= 0; j
< series
.length
; j
++) {
1017 var y
= series
[j
][1];
1019 if (maxY
== null || y
> maxY
) {
1022 if (minY
== null || y
< minY
) {
1028 return [minY
, maxY
];
1032 * Update the graph with new data. Data is in the format
1033 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1034 * or, if errorBars=true,
1035 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1036 * @param {Array.<Object>} data The data (see above)
1039 Dygraph
.prototype.drawGraph_
= function(data
) {
1040 var minY
= null, maxY
= null;
1041 this.layout_
.removeAllDatasets();
1043 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1045 // Loop over all fields in the dataset
1046 for (var i
= 1; i
< data
[0].length
; i
++) {
1048 for (var j
= 0; j
< data
.length
; j
++) {
1049 var date
= data
[j
][0];
1050 series
[j
] = [date
, data
[j
][i
]];
1052 series
= this.rollingAverage(series
, this.rollPeriod_
);
1054 // Prune down to the desired range, if necessary (for zooming)
1055 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1056 if (this.dateWindow_
) {
1057 var low
= this.dateWindow_
[0];
1058 var high
= this.dateWindow_
[1];
1060 for (var k
= 0; k
< series
.length
; k
++) {
1061 if (series
[k
][0] >= low
&& series
[k
][0] <= high
) {
1062 pruned
.push(series
[k
]);
1068 var extremes
= this.extremeValues_(series
);
1069 var thisMinY
= extremes
[0];
1070 var thisMaxY
= extremes
[1];
1071 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1072 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1076 for (var j
=0; j
<series
.length
; j
++)
1077 vals
[j
] = [series
[j
][0],
1078 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1079 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1081 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1085 // Use some heuristics to come up with a good maxY value, unless it's been
1086 // set explicitly by the user.
1087 if (this.valueRange_
!= null) {
1088 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1090 // Add some padding and round up to an integer to be human-friendly.
1091 var span
= maxY
- minY
;
1092 var maxAxisY
= maxY
+ 0.1 * span
;
1093 var minAxisY
= minY
- 0.1 * span
;
1095 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1096 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1097 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1099 if (this.attr_("includeZero")) {
1100 if (maxY
< 0) maxAxisY
= 0;
1101 if (minY
> 0) minAxisY
= 0;
1104 this.addYTicks_(minAxisY
, maxAxisY
);
1109 // Tell PlotKit to use this new data and render itself
1110 this.layout_
.evaluateWithError();
1111 this.plotter_
.clear();
1112 this.plotter_
.render();
1113 this.canvas_
.getContext('2d').clearRect(0, 0,
1114 this.canvas_
.width
, this.canvas_
.height
);
1118 * Calculates the rolling average of a data set.
1119 * If originalData is [label, val], rolls the average of those.
1120 * If originalData is [label, [, it's interpreted as [value, stddev]
1121 * and the roll is returned in the same form, with appropriately reduced
1122 * stddev for each value.
1123 * Note that this is where fractional input (i.e. '5/10') is converted into
1125 * @param {Array} originalData The data in the appropriate format (see above)
1126 * @param {Number} rollPeriod The number of days over which to average the data
1128 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1129 if (originalData
.length
< 2)
1130 return originalData
;
1131 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1132 var rollingData
= [];
1133 var sigma
= this.attr_("sigma");
1135 if (this.fractions_
) {
1137 var den
= 0; // numerator/denominator
1139 for (var i
= 0; i
< originalData
.length
; i
++) {
1140 num
+= originalData
[i
][1][0];
1141 den
+= originalData
[i
][1][1];
1142 if (i
- rollPeriod
>= 0) {
1143 num
-= originalData
[i
- rollPeriod
][1][0];
1144 den
-= originalData
[i
- rollPeriod
][1][1];
1147 var date
= originalData
[i
][0];
1148 var value
= den
? num
/ den
: 0.0;
1149 if (this.attr_("errorBars")) {
1150 if (this.wilsonInterval_
) {
1151 // For more details on this confidence interval, see:
1152 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1154 var p
= value
< 0 ? 0 : value
, n
= den
;
1155 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1156 var denom
= 1 + sigma
* sigma
/ den
;
1157 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1158 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1159 rollingData
[i
] = [date
,
1160 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1162 rollingData
[i
] = [date
, [0, 0, 0]];
1165 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1166 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1169 rollingData
[i
] = [date
, mult
* value
];
1172 } else if (this.attr_("customBars")) {
1177 for (var i
= 0; i
< originalData
.length
; i
++) {
1178 var data
= originalData
[i
][1];
1180 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1186 if (i
- rollPeriod
>= 0) {
1187 var prev
= originalData
[i
- rollPeriod
];
1193 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1194 1.0 * (mid
- low
) / count
,
1195 1.0 * (high
- mid
) / count
]];
1198 // Calculate the rolling average for the first rollPeriod - 1 points where
1199 // there is not enough data to roll over the full number of days
1200 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1201 if (!this.attr_("errorBars")){
1202 if (rollPeriod
== 1) {
1203 return originalData
;
1206 for (var i
= 0; i
< originalData
.length
; i
++) {
1209 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1210 var y
= originalData
[j
][1];
1211 if (!y
|| isNaN(y
)) continue;
1213 sum
+= originalData
[j
][1];
1216 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1218 rollingData
[i
] = [originalData
[i
][0], null];
1223 for (var i
= 0; i
< originalData
.length
; i
++) {
1227 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1228 var y
= originalData
[j
][1][0];
1229 if (!y
|| isNaN(y
)) continue;
1231 sum
+= originalData
[j
][1][0];
1232 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1235 var stddev
= Math
.sqrt(variance
) / num_ok
;
1236 rollingData
[i
] = [originalData
[i
][0],
1237 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1239 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1249 * Parses a date, returning the number of milliseconds since epoch. This can be
1250 * passed in as an xValueParser in the Dygraph constructor.
1251 * TODO(danvk): enumerate formats that this understands.
1252 * @param {String} A date in YYYYMMDD format.
1253 * @return {Number} Milliseconds since epoch.
1256 Dygraph
.dateParser
= function(dateStr
, self
) {
1259 if (dateStr
.length
== 10 && dateStr
.search("-") != -1) { // e.g. '2009-07-12'
1260 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1261 while (dateStrSlashed
.search("-") != -1) {
1262 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1264 d
= Date
.parse(dateStrSlashed
);
1265 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1266 // TODO(danvk): remove support for this format. It's confusing.
1267 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1268 + "/" + dateStr
.substr(6,2);
1269 d
= Date
.parse(dateStrSlashed
);
1271 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1272 // "2009/07/12 12:34:56"
1273 d
= Date
.parse(dateStr
);
1276 if (!d
|| isNaN(d
)) {
1277 self
.error("Couldn't parse " + dateStr
+ " as a date");
1283 * Detects the type of the str (date or numeric) and sets the various
1284 * formatting attributes in this.attrs_ based on this type.
1285 * @param {String} str An x value.
1288 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1290 if (str
.indexOf('-') >= 0 ||
1291 str
.indexOf('/') >= 0 ||
1292 isNaN(parseFloat(str
))) {
1294 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1295 // TODO(danvk): remove support for this format.
1300 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1301 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1302 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1304 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1305 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1306 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1311 * Parses a string in a special csv format. We expect a csv file where each
1312 * line is a date point, and the first field in each line is the date string.
1313 * We also expect that all remaining fields represent series.
1314 * if the errorBars attribute is set, then interpret the fields as:
1315 * date, series1, stddev1, series2, stddev2, ...
1316 * @param {Array.<Object>} data See above.
1319 * @return Array.<Object> An array with one entry for each row. These entries
1320 * are an array of cells in that row. The first entry is the parsed x-value for
1321 * the row. The second, third, etc. are the y-values. These can take on one of
1322 * three forms, depending on the CSV and constructor parameters:
1324 * 2. [ value, stddev ]
1325 * 3. [ low value, center value, high value ]
1327 Dygraph
.prototype.parseCSV_
= function(data
) {
1329 var lines
= data
.split("\n");
1331 if (this.labelsFromCSV_
) {
1333 this.attrs_
.labels
= lines
[0].split(",");
1337 var defaultParserSet
= false; // attempt to auto-detect x value type
1338 var expectedCols
= this.attr_("labels").length
;
1339 for (var i
= start
; i
< lines
.length
; i
++) {
1340 var line
= lines
[i
];
1341 if (line
.length
== 0) continue; // skip blank lines
1342 var inFields
= line
.split(',');
1343 if (inFields
.length
< 2) continue;
1346 if (!defaultParserSet
) {
1347 this.detectTypeFromString_(inFields
[0]);
1348 xParser
= this.attr_("xValueParser");
1349 defaultParserSet
= true;
1351 fields
[0] = xParser(inFields
[0], this);
1353 // If fractions are expected, parse the numbers as "A/B
"
1354 if (this.fractions_) {
1355 for (var j = 1; j < inFields.length; j++) {
1356 // TODO(danvk): figure out an appropriate way to flag parse errors.
1357 var vals = inFields[j].split("/");
1358 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1360 } else if (this.attr_("errorBars
")) {
1361 // If there are error bars, values are (value, stddev) pairs
1362 for (var j = 1; j < inFields.length; j += 2)
1363 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1364 parseFloat(inFields[j + 1])];
1365 } else if (this.attr_("customBars
")) {
1366 // Bars are a low;center;high tuple
1367 for (var j = 1; j < inFields.length; j++) {
1368 var vals = inFields[j].split(";");
1369 fields[j] = [ parseFloat(vals[0]),
1370 parseFloat(vals[1]),
1371 parseFloat(vals[2]) ];
1374 // Values are just numbers
1375 for (var j = 1; j < inFields.length; j++) {
1376 fields[j] = parseFloat(inFields[j]);
1381 if (fields.length != expectedCols) {
1382 this.error("Number of columns
in line
" + i + " (" + fields.length +
1383 ") does not agree
with number of
labels (" + expectedCols +
1391 * The user has provided their data as a pre-packaged JS array. If the x values
1392 * are numeric, this is the same as dygraphs' internal format. If the x values
1393 * are dates, we need to convert them from Date objects to ms since epoch.
1394 * @param {Array.<Object>} data
1395 * @return {Array.<Object>} data with numeric x values.
1397 Dygraph.prototype.parseArray_ = function(data) {
1398 // Peek at the first x value to see if it's numeric.
1399 if (data.length == 0) {
1400 this.error("Can
't plot empty data set");
1403 if (data[0].length == 0) {
1404 this.error("Data set cannot contain an empty row");
1408 if (this.attr_("labels") == null) {
1409 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1410 "in the options parameter");
1411 this.attrs_.labels = [ "X" ];
1412 for (var i = 1; i < data[0].length; i++) {
1413 this.attrs_.labels.push("Y" + i);
1417 if (MochiKit.Base.isDateLike(data[0][0])) {
1418 // Some intelligent defaults for a date x-axis.
1419 this.attrs_.xValueFormatter = Dygraph.dateString_;
1420 this.attrs_.xTicker = Dygraph.dateTicker;
1422 // Assume they're all dates
.
1423 var parsedData
= MochiKit
.Base
.clone(data
);
1424 for (var i
= 0; i
< data
.length
; i
++) {
1425 if (parsedData
[i
].length
== 0) {
1426 this.error("Row " << (1 + i
) << " of data is empty");
1429 if (parsedData
[i
][0] == null
1430 || typeof(parsedData
[i
][0].getTime
) != 'function') {
1431 this.error("x value in row " << (1 + i
) << " is not a Date");
1434 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1438 // Some intelligent defaults for a numeric x-axis.
1439 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1440 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1446 * Parses a DataTable object from gviz.
1447 * The data is expected to have a first column that is either a date or a
1448 * number. All subsequent columns must be numbers. If there is a clear mismatch
1449 * between this.xValueParser_ and the type of the first column, it will be
1450 * fixed. Returned value is in the same format as return value of parseCSV_.
1451 * @param {Array.<Object>} data See above.
1454 Dygraph
.prototype.parseDataTable_
= function(data
) {
1455 var cols
= data
.getNumberOfColumns();
1456 var rows
= data
.getNumberOfRows();
1458 // Read column labels
1460 for (var i
= 0; i
< cols
; i
++) {
1461 labels
.push(data
.getColumnLabel(i
));
1463 this.attrs_
.labels
= labels
;
1465 var indepType
= data
.getColumnType(0);
1466 if (indepType
== 'date') {
1467 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1468 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1469 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1470 } else if (indepType
== 'number') {
1471 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1472 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1473 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1475 this.error("only 'date' and 'number' types are supported for column 1 " +
1476 "of DataTable input (Got '" + indepType
+ "')");
1481 for (var i
= 0; i
< rows
; i
++) {
1483 if (!data
.getValue(i
, 0)) continue;
1484 if (indepType
== 'date') {
1485 row
.push(data
.getValue(i
, 0).getTime());
1487 row
.push(data
.getValue(i
, 0));
1489 for (var j
= 1; j
< cols
; j
++) {
1490 row
.push(data
.getValue(i
, j
));
1498 * Get the CSV data. If it's in a function, call that function. If it's in a
1499 * file, do an XMLHttpRequest to get it.
1502 Dygraph
.prototype.start_
= function() {
1503 if (typeof this.file_
== 'function') {
1504 // CSV string. Pretend we got it via XHR.
1505 this.loadedEvent_(this.file_());
1506 } else if (MochiKit
.Base
.isArrayLike(this.file_
)) {
1507 this.rawData_
= this.parseArray_(this.file_
);
1508 this.drawGraph_(this.rawData_
);
1509 } else if (typeof this.file_
== 'object' &&
1510 typeof this.file_
.getColumnRange
== 'function') {
1511 // must be a DataTable from gviz.
1512 this.rawData_
= this.parseDataTable_(this.file_
);
1513 this.drawGraph_(this.rawData_
);
1514 } else if (typeof this.file_
== 'string') {
1515 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
1516 if (this.file_
.indexOf('\n') >= 0) {
1517 this.loadedEvent_(this.file_
);
1519 var req
= new XMLHttpRequest();
1521 req
.onreadystatechange
= function () {
1522 if (req
.readyState
== 4) {
1523 if (req
.status
== 200) {
1524 caller
.loadedEvent_(req
.responseText
);
1529 req
.open("GET", this.file_
, true);
1533 this.error("Unknown data format: " + (typeof this.file_
));
1538 * Changes various properties of the graph. These can include:
1540 * <li>file: changes the source data for the graph</li>
1541 * <li>errorBars: changes whether the data contains stddev</li>
1543 * @param {Object} attrs The new properties and values
1545 Dygraph
.prototype.updateOptions
= function(attrs
) {
1546 // TODO(danvk): this is a mess. Rethink this function.
1547 if (attrs
.rollPeriod
) {
1548 this.rollPeriod_
= attrs
.rollPeriod
;
1550 if (attrs
.dateWindow
) {
1551 this.dateWindow_
= attrs
.dateWindow
;
1553 if (attrs
.valueRange
) {
1554 this.valueRange_
= attrs
.valueRange
;
1556 MochiKit
.Base
.update(this.user_attrs_
, attrs
);
1558 this.labelsFromCSV_
= (this.attr_("labels") == null);
1560 // TODO(danvk): this doesn't match the constructor logic
1561 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
1562 if (attrs
['file'] && attrs
['file'] != this.file_
) {
1563 this.file_
= attrs
['file'];
1566 this.drawGraph_(this.rawData_
);
1571 * Adjusts the number of days in the rolling average. Updates the graph to
1572 * reflect the new averaging period.
1573 * @param {Number} length Number of days over which to average the data.
1575 Dygraph
.prototype.adjustRoll
= function(length
) {
1576 this.rollPeriod_
= length
;
1577 this.drawGraph_(this.rawData_
);
1582 * A wrapper around Dygraph that implements the gviz API.
1583 * @param {Object} container The DOM object the visualization should live in.
1585 Dygraph
.GVizChart
= function(container
) {
1586 this.container
= container
;
1589 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
1590 this.container
.innerHTML
= '';
1591 this.date_graph
= new Dygraph(this.container
, data
, options
);
1594 // Older pages may still use this name.
1595 DateGraph
= Dygraph
;