1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
99 axisLabelFontSize
: 14,
105 xValueFormatter
: Dygraph
.dateString_
,
106 xValueParser
: Dygraph
.dateParser
,
107 xTicker
: Dygraph
.dateTicker
,
115 wilsonInterval
: true, // only relevant if fractions is true
121 hideOverlayOnMouseOut
: true
124 // Various logging levels.
130 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
131 // Labels is no longer a constructor parameter, since it's typically set
132 // directly from the data source. It also conains a name for the x-axis,
133 // which the previous constructor form did not.
134 if (labels
!= null) {
135 var new_labels
= ["Date"];
136 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
137 Dygraph
.update(attrs
, { 'labels': new_labels
});
139 this.__init__(div
, file
, attrs
);
143 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
144 * and interaction <canvas> inside of it. See the constructor for details
146 * @param {String | Function} file Source data
147 * @param {Array.<String>} labels Names of the data series
148 * @param {Object} attrs Miscellaneous other options
151 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
152 // Support two-argument constructor
153 if (attrs
== null) { attrs
= {}; }
155 // Copy the important bits into the object
156 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
159 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
160 this.previousVerticalX_
= -1;
161 this.fractions_
= attrs
.fractions
|| false;
162 this.dateWindow_
= attrs
.dateWindow
|| null;
163 this.valueRange_
= attrs
.valueRange
|| null;
164 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
165 this.is_initial_draw_
= true;
167 // Clear the div. This ensure that, if multiple dygraphs are passed the same
168 // div, then only one will be drawn.
171 // If the div isn't already sized then inherit from our attrs or
172 // give it a default size.
173 if (div
.style
.width
== '') {
174 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
176 if (div
.style
.height
== '') {
177 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
179 this.width_
= parseInt(div
.style
.width
, 10);
180 this.height_
= parseInt(div
.style
.height
, 10);
181 // The div might have been specified as percent of the current window size,
182 // convert that to an appropriate number of pixels.
183 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
184 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
185 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
187 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
188 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
191 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
192 if (attrs
['stackedGraph']) {
193 attrs
['fillGraph'] = true;
194 // TODO(nikhilk): Add any other stackedGraph checks here.
197 // Dygraphs has many options, some of which interact with one another.
198 // To keep track of everything, we maintain two sets of options:
200 // this.user_attrs_ only options explicitly set by the user.
201 // this.attrs_ defaults, options derived from user_attrs_, data.
203 // Options are then accessed this.attr_('attr'), which first looks at
204 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
205 // defaults without overriding behavior that the user specifically asks for.
206 this.user_attrs_
= {};
207 Dygraph
.update(this.user_attrs_
, attrs
);
210 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
212 // Make a note of whether labels will be pulled from the CSV file.
213 this.labelsFromCSV_
= (this.attr_("labels") == null);
215 // Create the containing DIV and other interactive elements
216 this.createInterface_();
221 Dygraph
.prototype.attr_
= function(name
) {
222 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
223 return this.user_attrs_
[name
];
224 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
225 return this.attrs_
[name
];
231 // TODO(danvk): any way I can get the line numbers to be this.warn call?
232 Dygraph
.prototype.log
= function(severity
, message
) {
233 if (typeof(console
) != 'undefined') {
236 console
.debug('dygraphs: ' + message
);
239 console
.info('dygraphs: ' + message
);
241 case Dygraph
.WARNING
:
242 console
.warn('dygraphs: ' + message
);
245 console
.error('dygraphs: ' + message
);
250 Dygraph
.prototype.info
= function(message
) {
251 this.log(Dygraph
.INFO
, message
);
253 Dygraph
.prototype.warn
= function(message
) {
254 this.log(Dygraph
.WARNING
, message
);
256 Dygraph
.prototype.error
= function(message
) {
257 this.log(Dygraph
.ERROR
, message
);
261 * Returns the current rolling period, as set by the user or an option.
262 * @return {Number} The number of days in the rolling window
264 Dygraph
.prototype.rollPeriod
= function() {
265 return this.rollPeriod_
;
269 * Returns the currently-visible x-range. This can be affected by zooming,
270 * panning or a call to updateOptions.
271 * Returns a two-element array: [left, right].
272 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
274 Dygraph
.prototype.xAxisRange
= function() {
275 if (this.dateWindow_
) return this.dateWindow_
;
277 // The entire chart is visible.
278 var left
= this.rawData_
[0][0];
279 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
280 return [left
, right
];
284 * Returns the currently-visible y-range. This can be affected by zooming,
285 * panning or a call to updateOptions.
286 * Returns a two-element array: [bottom, top].
288 Dygraph
.prototype.yAxisRange
= function() {
289 return this.displayedYRange_
;
293 * Convert from data coordinates to canvas/div X/Y coordinates.
294 * Returns a two-element array: [X, Y]
296 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
297 var ret
= [null, null];
298 var area
= this.plotter_
.area
;
300 var xRange
= this.xAxisRange();
301 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
305 var yRange
= this.yAxisRange();
306 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
312 // TODO(danvk): use these functions throughout dygraphs.
314 * Convert from canvas/div coords to data coordinates.
315 * Returns a two-element array: [X, Y]
317 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
318 var ret
= [null, null];
319 var area
= this.plotter_
.area
;
321 var xRange
= this.xAxisRange();
322 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
326 var yRange
= this.yAxisRange();
327 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
333 Dygraph
.addEvent
= function(el
, evt
, fn
) {
334 var normed_fn
= function(e
) {
335 if (!e
) var e
= window
.event
;
338 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
339 el
.addEventListener(evt
, normed_fn
, false);
341 el
.attachEvent('on' + evt
, normed_fn
);
345 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
346 var ctx
= cnv
.getContext("2d");
348 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
353 * Generates interface elements for the Dygraph: a containing div, a div to
354 * display the current point, and a textbox to adjust the rolling average
355 * period. Also creates the Renderer/Layout elements.
358 Dygraph
.prototype.createInterface_
= function() {
359 // Create the all-enclosing graph div
360 var enclosing
= this.maindiv_
;
362 this.graphDiv
= document
.createElement("div");
363 this.graphDiv
.style
.width
= this.width_
+ "px";
364 this.graphDiv
.style
.height
= this.height_
+ "px";
365 enclosing
.appendChild(this.graphDiv
);
369 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
371 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
372 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
373 - 2 * this.attr_("axisTickSize");
374 this.clippingArea_
= clip
;
376 // Create the canvas for interactive parts of the chart.
377 this.canvas_
= Dygraph
.createCanvas();
378 this.canvas_
.style
.position
= "absolute";
379 this.canvas_
.width
= this.width_
;
380 this.canvas_
.height
= this.height_
;
381 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
382 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
383 this.graphDiv
.appendChild(this.canvas_
);
385 // ... and for static parts of the chart.
386 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
388 // Make sure we don't overdraw.
389 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
390 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
393 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
394 dygraph
.mouseMove_(e
);
396 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
397 dygraph
.mouseOut_(e
);
400 // Create the grapher
401 // TODO(danvk): why does the Layout need its own set of options?
402 this.layoutOptions_
= { 'xOriginIsZero': false };
403 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
404 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
405 Dygraph
.update(this.layoutOptions_
, {
406 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
408 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
410 // TODO(danvk): why does the Renderer need its own set of options?
411 this.renderOptions_
= { colorScheme
: this.colors_
,
413 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
414 Dygraph
.update(this.renderOptions_
, this.attrs_
);
415 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
416 this.plotter_
= new DygraphCanvasRenderer(this,
417 this.hidden_
, this.layout_
,
418 this.renderOptions_
);
420 this.createStatusMessage_();
421 this.createRollInterface_();
422 this.createDragInterface_();
426 * Detach DOM elements in the dygraph and null out all data references.
427 * Calling this when you're done with a dygraph can dramatically reduce memory
428 * usage. See, e.g., the tests/perf.html example.
430 Dygraph
.prototype.destroy
= function() {
431 var removeRecursive
= function(node
) {
432 while (node
.hasChildNodes()) {
433 removeRecursive(node
.firstChild
);
434 node
.removeChild(node
.firstChild
);
437 removeRecursive(this.maindiv_
);
439 var nullOut
= function(obj
) {
441 if (typeof(obj
[n
]) === 'object') {
447 // These may not all be necessary, but it can't hurt...
448 nullOut(this.layout_
);
449 nullOut(this.plotter_
);
454 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
455 * this particular canvas. All Dygraph work is done on this.canvas_.
456 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
457 * @return {Object} The newly-created canvas
460 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
461 var h
= Dygraph
.createCanvas();
462 h
.style
.position
= "absolute";
463 // TODO(danvk): h should be offset from canvas. canvas needs to include
464 // some extra area to make it easier to zoom in on the far left and far
465 // right. h needs to be precisely the plot area, so that clipping occurs.
466 h
.style
.top
= canvas
.style
.top
;
467 h
.style
.left
= canvas
.style
.left
;
468 h
.width
= this.width_
;
469 h
.height
= this.height_
;
470 h
.style
.width
= this.width_
+ "px"; // for IE
471 h
.style
.height
= this.height_
+ "px"; // for IE
472 this.graphDiv
.appendChild(h
);
476 // Taken from MochiKit.Color
477 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
481 if (saturation
=== 0) {
486 var i
= Math
.floor(hue
* 6);
487 var f
= (hue
* 6) - i
;
488 var p
= value
* (1 - saturation
);
489 var q
= value
* (1 - (saturation
* f
));
490 var t
= value
* (1 - (saturation
* (1 - f
)));
492 case 1: red
= q
; green
= value
; blue
= p
; break;
493 case 2: red
= p
; green
= value
; blue
= t
; break;
494 case 3: red
= p
; green
= q
; blue
= value
; break;
495 case 4: red
= t
; green
= p
; blue
= value
; break;
496 case 5: red
= value
; green
= p
; blue
= q
; break;
497 case 6: // fall through
498 case 0: red
= value
; green
= t
; blue
= p
; break;
501 red
= Math
.floor(255 * red
+ 0.5);
502 green
= Math
.floor(255 * green
+ 0.5);
503 blue
= Math
.floor(255 * blue
+ 0.5);
504 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
509 * Generate a set of distinct colors for the data series. This is done with a
510 * color wheel. Saturation/Value are customizable, and the hue is
511 * equally-spaced around the color wheel. If a custom set of colors is
512 * specified, that is used instead.
515 Dygraph
.prototype.setColors_
= function() {
516 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
517 // away with this.renderOptions_.
518 var num
= this.attr_("labels").length
- 1;
520 var colors
= this.attr_('colors');
522 var sat
= this.attr_('colorSaturation') || 1.0;
523 var val
= this.attr_('colorValue') || 0.5;
524 for (var i
= 1; i
<= num
; i
++) {
525 if (!this.visibility()[i
-1]) continue;
526 // alternate colors for high contrast.
527 var idx
= i
- parseInt(i
% 2 ? i
/ 2 : (i - num)/2, 10);
528 var hue
= (1.0 * idx
/ (1 + num
));
529 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
532 for (var i
= 0; i
< num
; i
++) {
533 if (!this.visibility()[i
]) continue;
534 var colorStr
= colors
[i
% colors
.length
];
535 this.colors_
.push(colorStr
);
539 // TODO(danvk): update this w/r
/t/ the
new options system
.
540 this.renderOptions_
.colorScheme
= this.colors_
;
541 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
542 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
543 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
547 * Return the list of colors. This is either the list of colors passed in the
548 * attributes, or the autogenerated list of rgb(r,g,b) strings.
549 * @return {Array<string>} The list of colors.
551 Dygraph
.prototype.getColors
= function() {
555 // The following functions are from quirksmode.org with a modification for Safari from
556 // http://blog.firetree.net/2005/07/04/javascript-find-position/
557 // http://www.quirksmode.org/js
/findpos
.html
558 Dygraph
.findPosX
= function(obj
) {
563 curleft
+= obj
.offsetLeft
;
564 if(!obj
.offsetParent
)
566 obj
= obj
.offsetParent
;
573 Dygraph
.findPosY
= function(obj
) {
578 curtop
+= obj
.offsetTop
;
579 if(!obj
.offsetParent
)
581 obj
= obj
.offsetParent
;
591 * Create the div that contains information on the selected point(s)
592 * This goes in the top right of the canvas, unless an external div has already
596 Dygraph
.prototype.createStatusMessage_
= function(){
597 if (!this.attr_("labelsDiv")) {
598 var divWidth
= this.attr_('labelsDivWidth');
600 "position": "absolute",
603 "width": divWidth
+ "px",
605 "left": (this.width_
- divWidth
- 2) + "px",
606 "background": "white",
608 "overflow": "hidden"};
609 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
610 var div
= document
.createElement("div");
611 for (var name
in messagestyle
) {
612 if (messagestyle
.hasOwnProperty(name
)) {
613 div
.style
[name
] = messagestyle
[name
];
616 this.graphDiv
.appendChild(div
);
617 this.attrs_
.labelsDiv
= div
;
622 * Create the text box to adjust the averaging period
623 * @return {Object} The newly-created text box
626 Dygraph
.prototype.createRollInterface_
= function() {
627 var display
= this.attr_('showRoller') ? "block" : "none";
628 var textAttr
= { "position": "absolute",
630 "top": (this.plotter_
.area
.h
- 25) + "px",
631 "left": (this.plotter_
.area
.x
+ 1) + "px",
634 var roller
= document
.createElement("input");
635 roller
.type
= "text";
637 roller
.value
= this.rollPeriod_
;
638 for (var name
in textAttr
) {
639 if (textAttr
.hasOwnProperty(name
)) {
640 roller
.style
[name
] = textAttr
[name
];
644 var pa
= this.graphDiv
;
645 pa
.appendChild(roller
);
647 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
651 // These functions are taken from MochiKit.Signal
652 Dygraph
.pageX
= function(e
) {
654 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
657 var b
= document
.body
;
659 (de
.scrollLeft
|| b
.scrollLeft
) -
660 (de
.clientLeft
|| 0);
664 Dygraph
.pageY
= function(e
) {
666 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
669 var b
= document
.body
;
671 (de
.scrollTop
|| b
.scrollTop
) -
677 * Set up all the mouse handlers needed to capture dragging behavior for zoom
681 Dygraph
.prototype.createDragInterface_
= function() {
684 // Tracks whether the mouse is down right now
685 var isZooming
= false;
686 var isPanning
= false;
687 var dragStartX
= null;
688 var dragStartY
= null;
692 var draggingDate
= null;
693 var dateRange
= null;
695 // Utility function to convert page-wide coordinates to canvas coords
698 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
699 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
701 // Draw zoom rectangles when the mouse is down and the user moves around
702 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
704 dragEndX
= getX(event
);
705 dragEndY
= getY(event
);
707 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
709 } else if (isPanning
) {
710 dragEndX
= getX(event
);
711 dragEndY
= getY(event
);
713 // Want to have it so that:
714 // 1. draggingDate appears at dragEndX
715 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
717 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
718 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
719 self
.drawGraph_(self
.rawData_
);
723 // Track the beginning of drag events
724 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
725 px
= Dygraph
.findPosX(self
.canvas_
);
726 py
= Dygraph
.findPosY(self
.canvas_
);
727 dragStartX
= getX(event
);
728 dragStartY
= getY(event
);
730 if (event
.altKey
|| event
.shiftKey
) {
731 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
733 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
734 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
741 // If the user releases the mouse button during a drag, but not over the
742 // canvas, then it doesn't count as a zooming action.
743 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
744 if (isZooming
|| isPanning
) {
757 // Temporarily cancel the dragging event when the mouse leaves the graph
758 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
765 // If the mouse is released on the canvas during a drag event, then it's a
766 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
767 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
770 dragEndX
= getX(event
);
771 dragEndY
= getY(event
);
772 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
773 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
775 if (regionWidth
< 2 && regionHeight
< 2 &&
776 self
.attr_('clickCallback') != null &&
777 self
.lastx_
!= undefined
) {
778 // TODO(danvk): pass along more info about the points.
779 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
782 if (regionWidth
>= 10) {
783 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
784 Math
.max(dragStartX
, dragEndX
));
786 self
.canvas_
.getContext("2d").clearRect(0, 0,
788 self
.canvas_
.height
);
802 // Double-clicking zooms back out
803 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
804 if (self
.dateWindow_
== null) return;
805 self
.dateWindow_
= null;
806 self
.drawGraph_(self
.rawData_
);
807 var minDate
= self
.rawData_
[0][0];
808 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
809 if (self
.attr_("zoomCallback")) {
810 self
.attr_("zoomCallback")(minDate
, maxDate
);
816 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
817 * up any previous zoom rectangles that were drawn. This could be optimized to
818 * avoid extra redrawing, but it's tricky to avoid interactions with the status
820 * @param {Number} startX The X position where the drag started, in canvas
822 * @param {Number} endX The current X position of the drag, in canvas coords.
823 * @param {Number} prevEndX The value of endX on the previous call to this
824 * function. Used to avoid excess redrawing
827 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
828 var ctx
= this.canvas_
.getContext("2d");
830 // Clean up from the previous rect if necessary
832 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
833 Math
.abs(startX
- prevEndX
), this.height_
);
836 // Draw a light-grey rectangle to show the new viewing area
837 if (endX
&& startX
) {
838 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
839 ctx
.fillRect(Math
.min(startX
, endX
), 0,
840 Math
.abs(endX
- startX
), this.height_
);
845 * Zoom to something containing [lowX, highX]. These are pixel coordinates
846 * in the canvas. The exact zoom window may be slightly larger if there are no
847 * data points near lowX or highX. This function redraws the graph.
848 * @param {Number} lowX The leftmost pixel value that should be visible.
849 * @param {Number} highX The rightmost pixel value that should be visible.
852 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
853 // Find the earliest and latest dates contained in this canvasx range.
854 var r
= this.toDataCoords(lowX
, null);
856 r
= this.toDataCoords(highX
, null);
859 this.dateWindow_
= [minDate
, maxDate
];
860 this.drawGraph_(this.rawData_
);
861 if (this.attr_("zoomCallback")) {
862 this.attr_("zoomCallback")(minDate
, maxDate
);
867 * When the mouse moves in the canvas, display information about a nearby data
868 * point and draw dots over those points in the data series. This function
869 * takes care of cleanup of previously-drawn dots.
870 * @param {Object} event The mousemove event from the browser.
873 Dygraph
.prototype.mouseMove_
= function(event
) {
874 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
875 var points
= this.layout_
.points
;
880 // Loop through all the points and find the date nearest to our current
882 var minDist
= 1e+100;
884 for (var i
= 0; i
< points
.length
; i
++) {
885 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
886 if (dist
> minDist
) break;
890 if (idx
>= 0) lastx
= points
[idx
].xval
;
891 // Check that you can really highlight the last day's data
892 if (canvasx
> points
[points
.length
-1].canvasx
)
893 lastx
= points
[points
.length
-1].xval
;
895 // Extract the points we've selected
896 this.selPoints_
= [];
897 for (var i
= 0; i
< points
.length
; i
++) {
898 if (points
[i
].xval
== lastx
) {
899 this.selPoints_
.push(points
[i
]);
903 if (this.attr_("highlightCallback")) {
904 var px
= this.lastHighlightCallbackX
;
905 if (px
!== null && lastx
!= px
) {
906 // only fire if the selected point has changed.
907 this.lastHighlightCallbackX
= lastx
;
908 if (!this.attr_("stackedGraph")) {
909 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
911 // "unstack" the points.
912 var callbackPoints
= this.selPoints_
.map(
913 function(p
) { return {xval
: p
.xval
, yval
: p
.yval
, name
: p
.name
} });
914 var cumulative_sum
= 0;
915 for (var j
= callbackPoints
.length
- 1; j
>= 0; j
--) {
916 callbackPoints
[j
].yval
-= cumulative_sum
;
917 cumulative_sum
+= callbackPoints
[j
].yval
;
919 this.attr_("highlightCallback")(event
, lastx
, callbackPoints
);
924 // Save last x position for callbacks.
927 this.updateSelection_();
931 * Draw dots over the selectied points in the data series. This function
932 * takes care of cleanup of previously-drawn dots.
935 Dygraph
.prototype.updateSelection_
= function() {
936 // Clear the previously drawn vertical, if there is one
937 var circleSize
= this.attr_('highlightCircleSize');
938 var ctx
= this.canvas_
.getContext("2d");
939 if (this.previousVerticalX_
>= 0) {
940 var px
= this.previousVerticalX_
;
941 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
944 var isOK
= function(x
) { return x
&& !isNaN(x
); };
946 if (this.selPoints_
.length
> 0) {
947 var canvasx
= this.selPoints_
[0].canvasx
;
949 // Set the status message to indicate the selected point(s)
950 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
951 var clen
= this.colors_
.length
;
952 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
953 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
954 if (this.attr_("labelsSeparateLines")) {
957 var point
= this.selPoints_
[i
];
958 var c
= new RGBColor(this.colors_
[i
%clen
]);
959 replace
+= " <b><font color='" + c
.toHex() + "'>"
960 + point
.name
+ "</font></b>:"
961 + this.round_(point
.yval
, 2);
963 this.attr_("labelsDiv").innerHTML
= replace
;
965 // Draw colored circles over the center of each selected point
967 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
968 if (!isOK(this.selPoints_
[i
%clen
].canvasy
)) continue;
970 ctx
.fillStyle
= this.colors_
[i
%clen
];
971 ctx
.arc(canvasx
, this.selPoints_
[i
%clen
].canvasy
, circleSize
,
972 0, 2 * Math
.PI
, false);
977 this.previousVerticalX_
= canvasx
;
982 * Set manually set selected dots, and display information about them
983 * @param int row number that should by highlighted
984 * false value clears the selection
987 Dygraph
.prototype.setSelection
= function(row
) {
988 // Extract the points we've selected
989 this.selPoints_
= [];
993 for (var i
in this.layout_
.datasets
) {
994 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
995 pos
+= this.layout_
.datasets
[i
].length
;
998 this.lastx_
= this.selPoints_
[0].xval
;
999 this.updateSelection_();
1002 this.clearSelection();
1008 * The mouse has left the canvas. Clear out whatever artifacts remain
1009 * @param {Object} event the mouseout event from the browser.
1012 Dygraph
.prototype.mouseOut_
= function(event
) {
1013 if (this.attr_("hideOverlayOnMouseOut")) {
1014 this.clearSelection();
1019 * Remove all selection from the canvas
1022 Dygraph
.prototype.clearSelection
= function() {
1023 // Get rid of the overlay data
1024 var ctx
= this.canvas_
.getContext("2d");
1025 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1026 this.attr_("labelsDiv").innerHTML
= "";
1027 this.selPoints_
= [];
1031 Dygraph
.zeropad
= function(x
) {
1032 if (x
< 10) return "0" + x
; else return "" + x
;
1036 * Return a string version of the hours, minutes and seconds portion of a date.
1037 * @param {Number} date The JavaScript date (ms since epoch)
1038 * @return {String} A time of the form "HH:MM:SS"
1041 Dygraph
.prototype.hmsString_
= function(date
) {
1042 var zeropad
= Dygraph
.zeropad
;
1043 var d
= new Date(date
);
1044 if (d
.getSeconds()) {
1045 return zeropad(d
.getHours()) + ":" +
1046 zeropad(d
.getMinutes()) + ":" +
1047 zeropad(d
.getSeconds());
1049 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1054 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1055 * @param {Number} date The JavaScript date (ms since epoch)
1056 * @return {String} A date of the form "YYYY/MM/DD"
1058 * TODO(danvk): why is this part of the prototype?
1060 Dygraph
.dateString_
= function(date
, self
) {
1061 var zeropad
= Dygraph
.zeropad
;
1062 var d
= new Date(date
);
1065 var year
= "" + d
.getFullYear();
1066 // Get a 0 padded month string
1067 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1068 // Get a 0 padded day string
1069 var day
= zeropad(d
.getDate());
1072 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1073 if (frac
) ret
= " " + self
.hmsString_(date
);
1075 return year
+ "/" + month + "/" + day
+ ret
;
1079 * Round a number to the specified number of digits past the decimal point.
1080 * @param {Number} num The number to round
1081 * @param {Number} places The number of decimals to which to round
1082 * @return {Number} The rounded number
1085 Dygraph
.prototype.round_
= function(num
, places
) {
1086 var shift
= Math
.pow(10, places
);
1087 return Math
.round(num
* shift
)/shift
;
1091 * Fires when there's data available to be graphed.
1092 * @param {String} data Raw CSV data to be plotted
1095 Dygraph
.prototype.loadedEvent_
= function(data
) {
1096 this.rawData_
= this.parseCSV_(data
);
1097 this.drawGraph_(this.rawData_
);
1100 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1101 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1102 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1105 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1108 Dygraph
.prototype.addXTicks_
= function() {
1109 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1110 var startDate
, endDate
;
1111 if (this.dateWindow_
) {
1112 startDate
= this.dateWindow_
[0];
1113 endDate
= this.dateWindow_
[1];
1115 startDate
= this.rawData_
[0][0];
1116 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1119 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1120 this.layout_
.updateOptions({xTicks
: xTicks
});
1123 // Time granularity enumeration
1124 Dygraph
.SECONDLY
= 0;
1125 Dygraph
.TWO_SECONDLY
= 1;
1126 Dygraph
.FIVE_SECONDLY
= 2;
1127 Dygraph
.TEN_SECONDLY
= 3;
1128 Dygraph
.THIRTY_SECONDLY
= 4;
1129 Dygraph
.MINUTELY
= 5;
1130 Dygraph
.TWO_MINUTELY
= 6;
1131 Dygraph
.FIVE_MINUTELY
= 7;
1132 Dygraph
.TEN_MINUTELY
= 8;
1133 Dygraph
.THIRTY_MINUTELY
= 9;
1134 Dygraph
.HOURLY
= 10;
1135 Dygraph
.TWO_HOURLY
= 11;
1136 Dygraph
.SIX_HOURLY
= 12;
1138 Dygraph
.WEEKLY
= 14;
1139 Dygraph
.MONTHLY
= 15;
1140 Dygraph
.QUARTERLY
= 16;
1141 Dygraph
.BIANNUAL
= 17;
1142 Dygraph
.ANNUAL
= 18;
1143 Dygraph
.DECADAL
= 19;
1144 Dygraph
.NUM_GRANULARITIES
= 20;
1146 Dygraph
.SHORT_SPACINGS
= [];
1147 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1148 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1149 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1150 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1151 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1152 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1153 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1154 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1155 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1156 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1157 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1158 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1159 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1160 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1161 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1165 // If we used this time granularity, how many ticks would there be?
1166 // This is only an approximation, but it's generally good enough.
1168 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1169 if (granularity
< Dygraph
.MONTHLY
) {
1170 // Generate one tick mark for every fixed interval of time.
1171 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1172 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1174 var year_mod
= 1; // e.g. to only print one point every 10 years.
1175 var num_months
= 12;
1176 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1177 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1178 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1179 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1181 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1182 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1183 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1189 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1190 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1192 // Returns an array containing {v: millis, label: label} dictionaries.
1194 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1196 if (granularity
< Dygraph
.MONTHLY
) {
1197 // Generate one tick mark for every fixed interval of time.
1198 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1199 var format
= '%d%b'; // e.g. "1Jan"
1201 // Find a time less than start_time which occurs on a "nice" time boundary
1202 // for this granularity.
1203 var g
= spacing
/ 1000;
1204 var d
= new Date(start_time
);
1205 if (g
<= 60) { // seconds
1206 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1210 if (g
<= 60) { // minutes
1211 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1216 if (g
<= 24) { // days
1217 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1222 if (g
== 7) { // one week
1223 d
.setDate(d
.getDate() - d
.getDay());
1228 start_time
= d
.getTime();
1230 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1231 var d
= new Date(t
);
1232 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1233 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1234 // the extra hour covers DST problems.
1235 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1237 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1241 // Display a tick mark on the first of a set of months of each year.
1242 // Years get a tick mark iff y % year_mod == 0. This is useful for
1243 // displaying a tick mark once every 10 years, say, on long time scales.
1245 var year_mod
= 1; // e.g. to only print one point every 10 years.
1247 if (granularity
== Dygraph
.MONTHLY
) {
1248 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1249 } else if (granularity
== Dygraph
.QUARTERLY
) {
1250 months
= [ 0, 3, 6, 9 ];
1251 } else if (granularity
== Dygraph
.BIANNUAL
) {
1253 } else if (granularity
== Dygraph
.ANNUAL
) {
1255 } else if (granularity
== Dygraph
.DECADAL
) {
1260 var start_year
= new Date(start_time
).getFullYear();
1261 var end_year
= new Date(end_time
).getFullYear();
1262 var zeropad
= Dygraph
.zeropad
;
1263 for (var i
= start_year
; i
<= end_year
; i
++) {
1264 if (i
% year_mod
!= 0) continue;
1265 for (var j
= 0; j
< months
.length
; j
++) {
1266 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1267 var t
= Date
.parse(date_str
);
1268 if (t
< start_time
|| t
> end_time
) continue;
1269 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1279 * Add ticks to the x-axis based on a date range.
1280 * @param {Number} startDate Start of the date window (millis since epoch)
1281 * @param {Number} endDate End of the date window (millis since epoch)
1282 * @return {Array.<Object>} Array of {label, value} tuples.
1285 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1287 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1288 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1289 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1296 return self
.GetXAxis(startDate
, endDate
, chosen
);
1298 // TODO(danvk): signal error.
1303 * Add ticks when the x axis has numbers on it (instead of dates)
1304 * @param {Number} startDate Start of the date window (millis since epoch)
1305 * @param {Number} endDate End of the date window (millis since epoch)
1306 * @return {Array.<Object>} Array of {label, value} tuples.
1309 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1311 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1312 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1313 // The first spacing greater than pixelsPerYLabel is what we use.
1314 // TODO(danvk): version that works on a log scale.
1315 if (self
.attr_("labelsKMG2")) {
1316 var mults
= [1, 2, 4, 8];
1318 var mults
= [1, 2, 5];
1320 var scale
, low_val
, high_val
, nTicks
;
1321 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1322 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1323 for (var i
= -10; i
< 50; i
++) {
1324 if (self
.attr_("labelsKMG2")) {
1325 var base_scale
= Math
.pow(16, i
);
1327 var base_scale
= Math
.pow(10, i
);
1329 for (var j
= 0; j
< mults
.length
; j
++) {
1330 scale
= base_scale
* mults
[j
];
1331 low_val
= Math
.floor(minV
/ scale
) * scale
;
1332 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1333 nTicks
= (high_val
- low_val
) / scale
;
1334 var spacing
= self
.height_
/ nTicks
;
1335 // wish I could break out of both loops at once...
1336 if (spacing
> pixelsPerTick
) break;
1338 if (spacing
> pixelsPerTick
) break;
1341 // Construct labels for the ticks
1345 if (self
.attr_("labelsKMB")) {
1347 k_labels
= [ "K", "M", "B", "T" ];
1349 if (self
.attr_("labelsKMG2")) {
1350 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1352 k_labels
= [ "k", "M", "G", "T" ];
1355 for (var i
= 0; i
< nTicks
; i
++) {
1356 var tickV
= low_val
+ i
* scale
;
1357 var absTickV
= Math
.abs(tickV
);
1358 var label
= self
.round_(tickV
, 2);
1359 if (k_labels
.length
) {
1360 // Round up to an appropriate unit.
1362 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1363 if (absTickV
>= n
) {
1364 label
= self
.round_(tickV
/ n
, 1) + k_labels
[j
];
1369 ticks
.push( {label
: label
, v
: tickV
} );
1375 * Adds appropriate ticks on the y-axis
1376 * @param {Number} minY The minimum Y value in the data set
1377 * @param {Number} maxY The maximum Y value in the data set
1380 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1381 // Set the number of ticks so that the labels are human-friendly.
1382 // TODO(danvk): make this an attribute as well.
1383 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1384 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1388 // Computes the range of the data series (including confidence intervals).
1389 // series is either [ [x1, y1], [x2, y2], ... ] or
1390 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1391 // Returns [low, high]
1392 Dygraph
.prototype.extremeValues_
= function(series
) {
1393 var minY
= null, maxY
= null;
1395 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1397 // With custom bars, maxY is the max of the high values.
1398 for (var j
= 0; j
< series
.length
; j
++) {
1399 var y
= series
[j
][1][0];
1401 var low
= y
- series
[j
][1][1];
1402 var high
= y
+ series
[j
][1][2];
1403 if (low
> y
) low
= y
; // this can happen with custom bars,
1404 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1405 if (maxY
== null || high
> maxY
) {
1408 if (minY
== null || low
< minY
) {
1413 for (var j
= 0; j
< series
.length
; j
++) {
1414 var y
= series
[j
][1];
1415 if (y
=== null || isNaN(y
)) continue;
1416 if (maxY
== null || y
> maxY
) {
1419 if (minY
== null || y
< minY
) {
1425 return [minY
, maxY
];
1429 * Update the graph with new data. Data is in the format
1430 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1431 * or, if errorBars=true,
1432 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1433 * @param {Array.<Object>} data The data (see above)
1436 Dygraph
.prototype.drawGraph_
= function(data
) {
1437 // This is used to set the second parameter to drawCallback, below.
1438 var is_initial_draw
= this.is_initial_draw_
;
1439 this.is_initial_draw_
= false;
1441 var minY
= null, maxY
= null;
1442 this.layout_
.removeAllDatasets();
1444 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1446 // For stacked series.
1447 var cumulative_y
= [];
1448 var stacked_datasets
= [];
1450 // Loop over all fields in the dataset
1451 for (var i
= 1; i
< data
[0].length
; i
++) {
1452 if (!this.visibility()[i
- 1]) continue;
1455 for (var j
= 0; j
< data
.length
; j
++) {
1456 var date
= data
[j
][0];
1457 series
[j
] = [date
, data
[j
][i
]];
1459 series
= this.rollingAverage(series
, this.rollPeriod_
);
1461 // Prune down to the desired range, if necessary (for zooming)
1462 // Because there can be lines going to points outside of the visible area,
1463 // we actually prune to visible points, plus one on either side.
1464 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1465 if (this.dateWindow_
) {
1466 var low
= this.dateWindow_
[0];
1467 var high
= this.dateWindow_
[1];
1469 // TODO(danvk): do binary search instead of linear search.
1470 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1471 var firstIdx
= null, lastIdx
= null;
1472 for (var k
= 0; k
< series
.length
; k
++) {
1473 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1476 if (series
[k
][0] <= high
) {
1480 if (firstIdx
=== null) firstIdx
= 0;
1481 if (firstIdx
> 0) firstIdx
--;
1482 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1483 if (lastIdx
< series
.length
- 1) lastIdx
++;
1484 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1485 pruned
.push(series
[k
]);
1490 var extremes
= this.extremeValues_(series
);
1491 var thisMinY
= extremes
[0];
1492 var thisMaxY
= extremes
[1];
1493 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1494 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1498 for (var j
=0; j
<series
.length
; j
++)
1499 vals
[j
] = [series
[j
][0],
1500 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1501 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1502 } else if (this.attr_("stackedGraph")) {
1504 var l
= series
.length
;
1506 for (var j
= 0; j
< l
; j
++) {
1507 if (cumulative_y
[series
[j
][0]] === undefined
)
1508 cumulative_y
[series
[j
][0]] = 0;
1510 actual_y
= series
[j
][1];
1511 cumulative_y
[series
[j
][0]] += actual_y
;
1513 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1515 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1516 maxY
= cumulative_y
[series
[j
][0]];
1518 stacked_datasets
.push([this.attr_("labels")[i
], vals
]);
1519 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1521 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1525 if (stacked_datasets
.length
> 0) {
1526 for (var i
= (stacked_datasets
.length
- 1); i
>= 0; i
--) {
1527 this.layout_
.addDataset(stacked_datasets
[i
][0], stacked_datasets
[i
][1]);
1531 // Use some heuristics to come up with a good maxY value, unless it's been
1532 // set explicitly by the user.
1533 if (this.valueRange_
!= null) {
1534 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1535 this.displayedYRange_
= this.valueRange_
;
1537 // This affects the calculation of span, below.
1538 if (this.attr_("includeZero") && minY
> 0) {
1542 // Add some padding and round up to an integer to be human-friendly.
1543 var span
= maxY
- minY
;
1544 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1545 if (span
== 0) { span
= maxY
; }
1546 var maxAxisY
= maxY
+ 0.1 * span
;
1547 var minAxisY
= minY
- 0.1 * span
;
1549 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1550 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1551 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1553 if (this.attr_("includeZero")) {
1554 if (maxY
< 0) maxAxisY
= 0;
1555 if (minY
> 0) minAxisY
= 0;
1558 this.addYTicks_(minAxisY
, maxAxisY
);
1559 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1564 // Tell PlotKit to use this new data and render itself
1565 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1566 this.layout_
.evaluateWithError();
1567 this.plotter_
.clear();
1568 this.plotter_
.render();
1569 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1570 this.canvas_
.height
);
1572 if (this.attr_("drawCallback") !== null) {
1573 this.attr_("drawCallback")(this, is_initial_draw
);
1578 * Calculates the rolling average of a data set.
1579 * If originalData is [label, val], rolls the average of those.
1580 * If originalData is [label, [, it's interpreted as [value, stddev]
1581 * and the roll is returned in the same form, with appropriately reduced
1582 * stddev for each value.
1583 * Note that this is where fractional input (i.e. '5/10') is converted into
1585 * @param {Array} originalData The data in the appropriate format (see above)
1586 * @param {Number} rollPeriod The number of days over which to average the data
1588 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1589 if (originalData
.length
< 2)
1590 return originalData
;
1591 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1592 var rollingData
= [];
1593 var sigma
= this.attr_("sigma");
1595 if (this.fractions_
) {
1597 var den
= 0; // numerator/denominator
1599 for (var i
= 0; i
< originalData
.length
; i
++) {
1600 num
+= originalData
[i
][1][0];
1601 den
+= originalData
[i
][1][1];
1602 if (i
- rollPeriod
>= 0) {
1603 num
-= originalData
[i
- rollPeriod
][1][0];
1604 den
-= originalData
[i
- rollPeriod
][1][1];
1607 var date
= originalData
[i
][0];
1608 var value
= den
? num
/ den
: 0.0;
1609 if (this.attr_("errorBars")) {
1610 if (this.wilsonInterval_
) {
1611 // For more details on this confidence interval, see:
1612 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1614 var p
= value
< 0 ? 0 : value
, n
= den
;
1615 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1616 var denom
= 1 + sigma
* sigma
/ den
;
1617 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1618 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1619 rollingData
[i
] = [date
,
1620 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1622 rollingData
[i
] = [date
, [0, 0, 0]];
1625 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1626 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1629 rollingData
[i
] = [date
, mult
* value
];
1632 } else if (this.attr_("customBars")) {
1637 for (var i
= 0; i
< originalData
.length
; i
++) {
1638 var data
= originalData
[i
][1];
1640 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1642 if (y
!= null && !isNaN(y
)) {
1648 if (i
- rollPeriod
>= 0) {
1649 var prev
= originalData
[i
- rollPeriod
];
1650 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1657 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1658 1.0 * (mid
- low
) / count
,
1659 1.0 * (high
- mid
) / count
]];
1662 // Calculate the rolling average for the first rollPeriod - 1 points where
1663 // there is not enough data to roll over the full number of days
1664 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1665 if (!this.attr_("errorBars")){
1666 if (rollPeriod
== 1) {
1667 return originalData
;
1670 for (var i
= 0; i
< originalData
.length
; i
++) {
1673 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1674 var y
= originalData
[j
][1];
1675 if (y
== null || isNaN(y
)) continue;
1677 sum
+= originalData
[j
][1];
1680 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1682 rollingData
[i
] = [originalData
[i
][0], null];
1687 for (var i
= 0; i
< originalData
.length
; i
++) {
1691 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1692 var y
= originalData
[j
][1][0];
1693 if (y
== null || isNaN(y
)) continue;
1695 sum
+= originalData
[j
][1][0];
1696 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1699 var stddev
= Math
.sqrt(variance
) / num_ok
;
1700 rollingData
[i
] = [originalData
[i
][0],
1701 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1703 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1713 * Parses a date, returning the number of milliseconds since epoch. This can be
1714 * passed in as an xValueParser in the Dygraph constructor.
1715 * TODO(danvk): enumerate formats that this understands.
1716 * @param {String} A date in YYYYMMDD format.
1717 * @return {Number} Milliseconds since epoch.
1720 Dygraph
.dateParser
= function(dateStr
, self
) {
1723 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1724 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1725 while (dateStrSlashed
.search("-") != -1) {
1726 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1728 d
= Date
.parse(dateStrSlashed
);
1729 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1730 // TODO(danvk): remove support for this format. It's confusing.
1731 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1732 + "/" + dateStr
.substr(6,2);
1733 d
= Date
.parse(dateStrSlashed
);
1735 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1736 // "2009/07/12 12:34:56"
1737 d
= Date
.parse(dateStr
);
1740 if (!d
|| isNaN(d
)) {
1741 self
.error("Couldn't parse " + dateStr
+ " as a date");
1747 * Detects the type of the str (date or numeric) and sets the various
1748 * formatting attributes in this.attrs_ based on this type.
1749 * @param {String} str An x value.
1752 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1754 if (str
.indexOf('-') >= 0 ||
1755 str
.indexOf('/') >= 0 ||
1756 isNaN(parseFloat(str
))) {
1758 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1759 // TODO(danvk): remove support for this format.
1764 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1765 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1766 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1768 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1769 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1770 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1775 * Parses a string in a special csv format. We expect a csv file where each
1776 * line is a date point, and the first field in each line is the date string.
1777 * We also expect that all remaining fields represent series.
1778 * if the errorBars attribute is set, then interpret the fields as:
1779 * date, series1, stddev1, series2, stddev2, ...
1780 * @param {Array.<Object>} data See above.
1783 * @return Array.<Object> An array with one entry for each row. These entries
1784 * are an array of cells in that row. The first entry is the parsed x-value for
1785 * the row. The second, third, etc. are the y-values. These can take on one of
1786 * three forms, depending on the CSV and constructor parameters:
1788 * 2. [ value, stddev ]
1789 * 3. [ low value, center value, high value ]
1791 Dygraph
.prototype.parseCSV_
= function(data
) {
1793 var lines
= data
.split("\n");
1795 // Use the default delimiter or fall back to a tab if that makes sense.
1796 var delim
= this.attr_('delimiter');
1797 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1802 if (this.labelsFromCSV_
) {
1804 this.attrs_
.labels
= lines
[0].split(delim
);
1808 var defaultParserSet
= false; // attempt to auto-detect x value type
1809 var expectedCols
= this.attr_("labels").length
;
1810 var outOfOrder
= false;
1811 for (var i
= start
; i
< lines
.length
; i
++) {
1812 var line
= lines
[i
];
1813 if (line
.length
== 0) continue; // skip blank lines
1814 if (line
[0] == '#') continue; // skip comment lines
1815 var inFields
= line
.split(delim
);
1816 if (inFields
.length
< 2) continue;
1819 if (!defaultParserSet
) {
1820 this.detectTypeFromString_(inFields
[0]);
1821 xParser
= this.attr_("xValueParser");
1822 defaultParserSet
= true;
1824 fields
[0] = xParser(inFields
[0], this);
1826 // If fractions are expected, parse the numbers as "A/B
"
1827 if (this.fractions_) {
1828 for (var j = 1; j < inFields.length; j++) {
1829 // TODO(danvk): figure out an appropriate way to flag parse errors.
1830 var vals = inFields[j].split("/");
1831 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1833 } else if (this.attr_("errorBars
")) {
1834 // If there are error bars, values are (value, stddev) pairs
1835 for (var j = 1; j < inFields.length; j += 2)
1836 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1837 parseFloat(inFields[j + 1])];
1838 } else if (this.attr_("customBars
")) {
1839 // Bars are a low;center;high tuple
1840 for (var j = 1; j < inFields.length; j++) {
1841 var vals = inFields[j].split(";");
1842 fields[j] = [ parseFloat(vals[0]),
1843 parseFloat(vals[1]),
1844 parseFloat(vals[2]) ];
1847 // Values are just numbers
1848 for (var j = 1; j < inFields.length; j++) {
1849 fields[j] = parseFloat(inFields[j]);
1852 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1857 if (fields.length != expectedCols) {
1858 this.error("Number of columns
in line
" + i + " (" + fields.length +
1859 ") does not agree
with number of
labels (" + expectedCols +
1865 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1866 ret.sort(function(a,b) { return a[0] - b[0] });
1873 * The user has provided their data as a pre-packaged JS array. If the x values
1874 * are numeric, this is the same as dygraphs' internal format. If the x values
1875 * are dates, we need to convert them from Date objects to ms since epoch.
1876 * @param {Array.<Object>} data
1877 * @return {Array.<Object>} data with numeric x values.
1879 Dygraph.prototype.parseArray_ = function(data) {
1880 // Peek at the first x value to see if it's numeric.
1881 if (data.length == 0) {
1882 this.error("Can
't plot empty data set");
1885 if (data[0].length == 0) {
1886 this.error("Data set cannot contain an empty row");
1890 if (this.attr_("labels") == null) {
1891 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1892 "in the options parameter");
1893 this.attrs_.labels = [ "X" ];
1894 for (var i = 1; i < data[0].length; i++) {
1895 this.attrs_.labels.push("Y" + i);
1899 if (Dygraph.isDateLike(data[0][0])) {
1900 // Some intelligent defaults for a date x-axis.
1901 this.attrs_.xValueFormatter = Dygraph.dateString_;
1902 this.attrs_.xTicker = Dygraph.dateTicker;
1904 // Assume they're all dates
.
1905 var parsedData
= Dygraph
.clone(data
);
1906 for (var i
= 0; i
< data
.length
; i
++) {
1907 if (parsedData
[i
].length
== 0) {
1908 this.error("Row " << (1 + i
) << " of data is empty");
1911 if (parsedData
[i
][0] == null
1912 || typeof(parsedData
[i
][0].getTime
) != 'function'
1913 || isNaN(parsedData
[i
][0].getTime())) {
1914 this.error("x value in row " + (1 + i
) + " is not a Date");
1917 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1921 // Some intelligent defaults for a numeric x-axis.
1922 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1923 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1929 * Parses a DataTable object from gviz.
1930 * The data is expected to have a first column that is either a date or a
1931 * number. All subsequent columns must be numbers. If there is a clear mismatch
1932 * between this.xValueParser_ and the type of the first column, it will be
1933 * fixed. Returned value is in the same format as return value of parseCSV_.
1934 * @param {Array.<Object>} data See above.
1937 Dygraph
.prototype.parseDataTable_
= function(data
) {
1938 var cols
= data
.getNumberOfColumns();
1939 var rows
= data
.getNumberOfRows();
1941 // Read column labels
1943 for (var i
= 0; i
< cols
; i
++) {
1944 labels
.push(data
.getColumnLabel(i
));
1945 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
1947 this.attrs_
.labels
= labels
;
1948 cols
= labels
.length
;
1950 var indepType
= data
.getColumnType(0);
1951 if (indepType
== 'date' || indepType
== 'datetime') {
1952 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1953 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1954 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1955 } else if (indepType
== 'number') {
1956 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1957 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1958 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1960 this.error("only 'date', 'datetime' and 'number' types are supported for " +
1961 "column 1 of DataTable input (Got '" + indepType
+ "')");
1966 var outOfOrder
= false;
1967 for (var i
= 0; i
< rows
; i
++) {
1969 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
1970 data
.getValue(i
, 0) === null) {
1971 this.warning("Ignoring row " + i
+
1972 " of DataTable because of undefined or null first column.");
1976 if (indepType
== 'date' || indepType
== 'datetime') {
1977 row
.push(data
.getValue(i
, 0).getTime());
1979 row
.push(data
.getValue(i
, 0));
1981 if (!this.attr_("errorBars")) {
1982 for (var j
= 1; j
< cols
; j
++) {
1983 row
.push(data
.getValue(i
, j
));
1986 for (var j
= 0; j
< cols
- 1; j
++) {
1987 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
1990 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
1997 this.warn("DataTable is out of order; order it correctly to speed loading.");
1998 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2003 // These functions are all based on MochiKit.
2004 Dygraph
.update
= function (self
, o
) {
2005 if (typeof(o
) != 'undefined' && o
!== null) {
2007 if (o
.hasOwnProperty(k
)) {
2015 Dygraph
.isArrayLike
= function (o
) {
2016 var typ
= typeof(o
);
2018 (typ
!= 'object' && !(typ
== 'function' &&
2019 typeof(o
.item
) == 'function')) ||
2021 typeof(o
.length
) != 'number' ||
2029 Dygraph
.isDateLike
= function (o
) {
2030 if (typeof(o
) != "object" || o
=== null ||
2031 typeof(o
.getTime
) != 'function') {
2037 Dygraph
.clone
= function(o
) {
2038 // TODO(danvk): figure out how MochiKit's version works
2040 for (var i
= 0; i
< o
.length
; i
++) {
2041 if (Dygraph
.isArrayLike(o
[i
])) {
2042 r
.push(Dygraph
.clone(o
[i
]));
2052 * Get the CSV data. If it's in a function, call that function. If it's in a
2053 * file, do an XMLHttpRequest to get it.
2056 Dygraph
.prototype.start_
= function() {
2057 if (typeof this.file_
== 'function') {
2058 // CSV string. Pretend we got it via XHR.
2059 this.loadedEvent_(this.file_());
2060 } else if (Dygraph
.isArrayLike(this.file_
)) {
2061 this.rawData_
= this.parseArray_(this.file_
);
2062 this.drawGraph_(this.rawData_
);
2063 } else if (typeof this.file_
== 'object' &&
2064 typeof this.file_
.getColumnRange
== 'function') {
2065 // must be a DataTable from gviz.
2066 this.rawData_
= this.parseDataTable_(this.file_
);
2067 this.drawGraph_(this.rawData_
);
2068 } else if (typeof this.file_
== 'string') {
2069 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2070 if (this.file_
.indexOf('\n') >= 0) {
2071 this.loadedEvent_(this.file_
);
2073 var req
= new XMLHttpRequest();
2075 req
.onreadystatechange
= function () {
2076 if (req
.readyState
== 4) {
2077 if (req
.status
== 200) {
2078 caller
.loadedEvent_(req
.responseText
);
2083 req
.open("GET", this.file_
, true);
2087 this.error("Unknown data format: " + (typeof this.file_
));
2092 * Changes various properties of the graph. These can include:
2094 * <li>file: changes the source data for the graph</li>
2095 * <li>errorBars: changes whether the data contains stddev</li>
2097 * @param {Object} attrs The new properties and values
2099 Dygraph
.prototype.updateOptions
= function(attrs
) {
2100 // TODO(danvk): this is a mess. Rethink this function.
2101 if (attrs
.rollPeriod
) {
2102 this.rollPeriod_
= attrs
.rollPeriod
;
2104 if (attrs
.dateWindow
) {
2105 this.dateWindow_
= attrs
.dateWindow
;
2107 if (attrs
.valueRange
) {
2108 this.valueRange_
= attrs
.valueRange
;
2110 Dygraph
.update(this.user_attrs_
, attrs
);
2112 this.labelsFromCSV_
= (this.attr_("labels") == null);
2114 // TODO(danvk): this doesn't match the constructor logic
2115 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2116 if (attrs
['file'] && attrs
['file'] != this.file_
) {
2117 this.file_
= attrs
['file'];
2120 this.drawGraph_(this.rawData_
);
2125 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2126 * containing div (which has presumably changed size since the dygraph was
2127 * instantiated. If the width/height are specified, the div will be resized.
2129 * This is far more efficient than destroying and re-instantiating a
2130 * Dygraph, since it doesn't have to reparse the underlying data.
2132 * @param {Number} width Width (in pixels)
2133 * @param {Number} height Height (in pixels)
2135 Dygraph
.prototype.resize
= function(width
, height
) {
2136 if ((width
=== null) != (height
=== null)) {
2137 this.warn("Dygraph.resize() should be called with zero parameters or " +
2138 "two non-NULL parameters. Pretending it was zero.");
2139 width
= height
= null;
2142 // TODO(danvk): there should be a clear() method.
2143 this.maindiv_
.innerHTML
= "";
2144 this.attrs_
.labelsDiv
= null;
2147 this.maindiv_
.style
.width
= width
+ "px";
2148 this.maindiv_
.style
.height
= height
+ "px";
2149 this.width_
= width
;
2150 this.height_
= height
;
2152 this.width_
= this.maindiv_
.offsetWidth
;
2153 this.height_
= this.maindiv_
.offsetHeight
;
2156 this.createInterface_();
2157 this.drawGraph_(this.rawData_
);
2161 * Adjusts the number of days in the rolling average. Updates the graph to
2162 * reflect the new averaging period.
2163 * @param {Number} length Number of days over which to average the data.
2165 Dygraph
.prototype.adjustRoll
= function(length
) {
2166 this.rollPeriod_
= length
;
2167 this.drawGraph_(this.rawData_
);
2171 * Returns a boolean array of visibility statuses.
2173 Dygraph
.prototype.visibility
= function() {
2174 // Do lazy-initialization, so that this happens after we know the number of
2176 if (!this.attr_("visibility")) {
2177 this.attrs_
["visibility"] = [];
2179 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2180 this.attr_("visibility").push(true);
2182 return this.attr_("visibility");
2186 * Changes the visiblity of a series.
2188 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2189 var x
= this.visibility();
2190 if (num
< 0 && num
>= x
.length
) {
2191 this.warn("invalid series number in setVisibility: " + num
);
2194 this.drawGraph_(this.rawData_
);
2199 * Create a new canvas element. This is more complex than a simple
2200 * document.createElement("canvas") because of IE and excanvas.
2202 Dygraph
.createCanvas
= function() {
2203 var canvas
= document
.createElement("canvas");
2205 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2207 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2215 * A wrapper around Dygraph that implements the gviz API.
2216 * @param {Object} container The DOM object the visualization should live in.
2218 Dygraph
.GVizChart
= function(container
) {
2219 this.container
= container
;
2222 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2223 this.container
.innerHTML
= '';
2224 this.date_graph
= new Dygraph(this.container
, data
, options
);
2228 * Google charts compatible setSelection
2229 * Only row selection is supported, all points in the
2230 * row will be highlighted
2231 * @param {Array} array of the selected cells
2234 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2236 if (selection_array
.length
) {
2237 row
= selection_array
[0].row
;
2239 this.date_graph
.setSelection(row
);
2242 // Older pages may still use this name.
2243 DateGraph
= Dygraph
;