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,
95 showLabelsOnHighlight
: true,
97 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
102 axisLabelFontSize
: 14,
108 xValueFormatter
: Dygraph
.dateString_
,
109 xValueParser
: Dygraph
.dateParser
,
110 xTicker
: Dygraph
.dateTicker
,
118 wilsonInterval
: true, // only relevant if fractions is true
122 connectSeparatedPoints
: false,
125 hideOverlayOnMouseOut
: true
128 // Various logging levels.
134 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
135 // Labels is no longer a constructor parameter, since it's typically set
136 // directly from the data source. It also conains a name for the x-axis,
137 // which the previous constructor form did not.
138 if (labels
!= null) {
139 var new_labels
= ["Date"];
140 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
141 Dygraph
.update(attrs
, { 'labels': new_labels
});
143 this.__init__(div
, file
, attrs
);
147 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
148 * and interaction <canvas> inside of it. See the constructor for details
150 * @param {Element} div the Element to render the graph into.
151 * @param {String | Function} file Source data
152 * @param {Object} attrs Miscellaneous other options
155 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
156 // Support two-argument constructor
157 if (attrs
== null) { attrs
= {}; }
159 // Copy the important bits into the object
160 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
163 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
164 this.previousVerticalX_
= -1;
165 this.fractions_
= attrs
.fractions
|| false;
166 this.dateWindow_
= attrs
.dateWindow
|| null;
167 this.valueRange_
= attrs
.valueRange
|| null;
168 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
169 this.is_initial_draw_
= true;
171 // Clear the div. This ensure that, if multiple dygraphs are passed the same
172 // div, then only one will be drawn.
175 // If the div isn't already sized then inherit from our attrs or
176 // give it a default size.
177 if (div
.style
.width
== '') {
178 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
180 if (div
.style
.height
== '') {
181 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
183 this.width_
= parseInt(div
.style
.width
, 10);
184 this.height_
= parseInt(div
.style
.height
, 10);
185 // The div might have been specified as percent of the current window size,
186 // convert that to an appropriate number of pixels.
187 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
188 // Minus ten pixels keeps scrollbars from showing up for a 100% width div.
189 this.width_
= (this.width_
* self
.innerWidth
/ 100) - 10;
191 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
192 this.height_
= (this.height_
* self
.innerHeight
/ 100) - 10;
195 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
196 if (attrs
['stackedGraph']) {
197 attrs
['fillGraph'] = true;
198 // TODO(nikhilk): Add any other stackedGraph checks here.
201 // Dygraphs has many options, some of which interact with one another.
202 // To keep track of everything, we maintain two sets of options:
204 // this.user_attrs_ only options explicitly set by the user.
205 // this.attrs_ defaults, options derived from user_attrs_, data.
207 // Options are then accessed this.attr_('attr'), which first looks at
208 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
209 // defaults without overriding behavior that the user specifically asks for.
210 this.user_attrs_
= {};
211 Dygraph
.update(this.user_attrs_
, attrs
);
214 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
216 this.boundaryIds_
= [];
218 // Make a note of whether labels will be pulled from the CSV file.
219 this.labelsFromCSV_
= (this.attr_("labels") == null);
221 // Create the containing DIV and other interactive elements
222 this.createInterface_();
227 Dygraph
.prototype.attr_
= function(name
) {
228 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
229 return this.user_attrs_
[name
];
230 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
231 return this.attrs_
[name
];
237 // TODO(danvk): any way I can get the line numbers to be this.warn call?
238 Dygraph
.prototype.log
= function(severity
, message
) {
239 if (typeof(console
) != 'undefined') {
242 console
.debug('dygraphs: ' + message
);
245 console
.info('dygraphs: ' + message
);
247 case Dygraph
.WARNING
:
248 console
.warn('dygraphs: ' + message
);
251 console
.error('dygraphs: ' + message
);
256 Dygraph
.prototype.info
= function(message
) {
257 this.log(Dygraph
.INFO
, message
);
259 Dygraph
.prototype.warn
= function(message
) {
260 this.log(Dygraph
.WARNING
, message
);
262 Dygraph
.prototype.error
= function(message
) {
263 this.log(Dygraph
.ERROR
, message
);
267 * Returns the current rolling period, as set by the user or an option.
268 * @return {Number} The number of days in the rolling window
270 Dygraph
.prototype.rollPeriod
= function() {
271 return this.rollPeriod_
;
275 * Returns the currently-visible x-range. This can be affected by zooming,
276 * panning or a call to updateOptions.
277 * Returns a two-element array: [left, right].
278 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
280 Dygraph
.prototype.xAxisRange
= function() {
281 if (this.dateWindow_
) return this.dateWindow_
;
283 // The entire chart is visible.
284 var left
= this.rawData_
[0][0];
285 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
286 return [left
, right
];
290 * Returns the currently-visible y-range. This can be affected by zooming,
291 * panning or a call to updateOptions.
292 * Returns a two-element array: [bottom, top].
294 Dygraph
.prototype.yAxisRange
= function() {
295 return this.displayedYRange_
;
299 * Convert from data coordinates to canvas/div X/Y coordinates.
300 * Returns a two-element array: [X, Y]
302 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
303 var ret
= [null, null];
304 var area
= this.plotter_
.area
;
306 var xRange
= this.xAxisRange();
307 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
311 var yRange
= this.yAxisRange();
312 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
318 // TODO(danvk): use these functions throughout dygraphs.
320 * Convert from canvas/div coords to data coordinates.
321 * Returns a two-element array: [X, Y]
323 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
324 var ret
= [null, null];
325 var area
= this.plotter_
.area
;
327 var xRange
= this.xAxisRange();
328 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
332 var yRange
= this.yAxisRange();
333 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
339 Dygraph
.addEvent
= function(el
, evt
, fn
) {
340 var normed_fn
= function(e
) {
341 if (!e
) var e
= window
.event
;
344 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
345 el
.addEventListener(evt
, normed_fn
, false);
347 el
.attachEvent('on' + evt
, normed_fn
);
351 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
352 var ctx
= cnv
.getContext("2d");
354 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
359 * Generates interface elements for the Dygraph: a containing div, a div to
360 * display the current point, and a textbox to adjust the rolling average
361 * period. Also creates the Renderer/Layout elements.
364 Dygraph
.prototype.createInterface_
= function() {
365 // Create the all-enclosing graph div
366 var enclosing
= this.maindiv_
;
368 this.graphDiv
= document
.createElement("div");
369 this.graphDiv
.style
.width
= this.width_
+ "px";
370 this.graphDiv
.style
.height
= this.height_
+ "px";
371 enclosing
.appendChild(this.graphDiv
);
375 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
377 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
378 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
379 - 2 * this.attr_("axisTickSize");
380 this.clippingArea_
= clip
;
382 // Create the canvas for interactive parts of the chart.
383 this.canvas_
= Dygraph
.createCanvas();
384 this.canvas_
.style
.position
= "absolute";
385 this.canvas_
.width
= this.width_
;
386 this.canvas_
.height
= this.height_
;
387 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
388 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
389 this.graphDiv
.appendChild(this.canvas_
);
391 // ... and for static parts of the chart.
392 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
394 // Make sure we don't overdraw.
395 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
396 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
399 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
400 dygraph
.mouseMove_(e
);
402 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
403 dygraph
.mouseOut_(e
);
406 // Create the grapher
407 // TODO(danvk): why does the Layout need its own set of options?
408 this.layoutOptions_
= { 'xOriginIsZero': false };
409 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
410 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
411 Dygraph
.update(this.layoutOptions_
, {
412 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
414 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
416 // TODO(danvk): why does the Renderer need its own set of options?
417 this.renderOptions_
= { colorScheme
: this.colors_
,
419 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
420 Dygraph
.update(this.renderOptions_
, this.attrs_
);
421 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
422 this.plotter_
= new DygraphCanvasRenderer(this,
423 this.hidden_
, this.layout_
,
424 this.renderOptions_
);
426 this.createStatusMessage_();
427 this.createRollInterface_();
428 this.createDragInterface_();
432 * Detach DOM elements in the dygraph and null out all data references.
433 * Calling this when you're done with a dygraph can dramatically reduce memory
434 * usage. See, e.g., the tests/perf.html example.
436 Dygraph
.prototype.destroy
= function() {
437 var removeRecursive
= function(node
) {
438 while (node
.hasChildNodes()) {
439 removeRecursive(node
.firstChild
);
440 node
.removeChild(node
.firstChild
);
443 removeRecursive(this.maindiv_
);
445 var nullOut
= function(obj
) {
447 if (typeof(obj
[n
]) === 'object') {
453 // These may not all be necessary, but it can't hurt...
454 nullOut(this.layout_
);
455 nullOut(this.plotter_
);
460 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
461 * this particular canvas. All Dygraph work is done on this.canvas_.
462 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
463 * @return {Object} The newly-created canvas
466 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
467 var h
= Dygraph
.createCanvas();
468 h
.style
.position
= "absolute";
469 // TODO(danvk): h should be offset from canvas. canvas needs to include
470 // some extra area to make it easier to zoom in on the far left and far
471 // right. h needs to be precisely the plot area, so that clipping occurs.
472 h
.style
.top
= canvas
.style
.top
;
473 h
.style
.left
= canvas
.style
.left
;
474 h
.width
= this.width_
;
475 h
.height
= this.height_
;
476 h
.style
.width
= this.width_
+ "px"; // for IE
477 h
.style
.height
= this.height_
+ "px"; // for IE
478 this.graphDiv
.appendChild(h
);
482 // Taken from MochiKit.Color
483 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
487 if (saturation
=== 0) {
492 var i
= Math
.floor(hue
* 6);
493 var f
= (hue
* 6) - i
;
494 var p
= value
* (1 - saturation
);
495 var q
= value
* (1 - (saturation
* f
));
496 var t
= value
* (1 - (saturation
* (1 - f
)));
498 case 1: red
= q
; green
= value
; blue
= p
; break;
499 case 2: red
= p
; green
= value
; blue
= t
; break;
500 case 3: red
= p
; green
= q
; blue
= value
; break;
501 case 4: red
= t
; green
= p
; blue
= value
; break;
502 case 5: red
= value
; green
= p
; blue
= q
; break;
503 case 6: // fall through
504 case 0: red
= value
; green
= t
; blue
= p
; break;
507 red
= Math
.floor(255 * red
+ 0.5);
508 green
= Math
.floor(255 * green
+ 0.5);
509 blue
= Math
.floor(255 * blue
+ 0.5);
510 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
515 * Generate a set of distinct colors for the data series. This is done with a
516 * color wheel. Saturation/Value are customizable, and the hue is
517 * equally-spaced around the color wheel. If a custom set of colors is
518 * specified, that is used instead.
521 Dygraph
.prototype.setColors_
= function() {
522 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
523 // away with this.renderOptions_.
524 var num
= this.attr_("labels").length
- 1;
526 var colors
= this.attr_('colors');
528 var sat
= this.attr_('colorSaturation') || 1.0;
529 var val
= this.attr_('colorValue') || 0.5;
530 var half
= Math
.ceil(num
/ 2);
531 for (var i
= 1; i
<= num
; i
++) {
532 if (!this.visibility()[i
-1]) continue;
533 // alternate colors for high contrast.
534 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
535 var hue
= (1.0 * idx
/ (1 + num
));
536 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
539 for (var i
= 0; i
< num
; i
++) {
540 if (!this.visibility()[i
]) continue;
541 var colorStr
= colors
[i
% colors
.length
];
542 this.colors_
.push(colorStr
);
546 // TODO(danvk): update this w/r
/t/ the
new options system
.
547 this.renderOptions_
.colorScheme
= this.colors_
;
548 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
549 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
550 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
554 * Return the list of colors. This is either the list of colors passed in the
555 * attributes, or the autogenerated list of rgb(r,g,b) strings.
556 * @return {Array<string>} The list of colors.
558 Dygraph
.prototype.getColors
= function() {
562 // The following functions are from quirksmode.org with a modification for Safari from
563 // http://blog.firetree.net/2005/07/04/javascript-find-position/
564 // http://www.quirksmode.org/js
/findpos
.html
565 Dygraph
.findPosX
= function(obj
) {
570 curleft
+= obj
.offsetLeft
;
571 if(!obj
.offsetParent
)
573 obj
= obj
.offsetParent
;
580 Dygraph
.findPosY
= function(obj
) {
585 curtop
+= obj
.offsetTop
;
586 if(!obj
.offsetParent
)
588 obj
= obj
.offsetParent
;
598 * Create the div that contains information on the selected point(s)
599 * This goes in the top right of the canvas, unless an external div has already
603 Dygraph
.prototype.createStatusMessage_
= function(){
604 if (!this.attr_("labelsDiv")) {
605 var divWidth
= this.attr_('labelsDivWidth');
607 "position": "absolute",
610 "width": divWidth
+ "px",
612 "left": (this.width_
- divWidth
- 2) + "px",
613 "background": "white",
615 "overflow": "hidden"};
616 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
617 var div
= document
.createElement("div");
618 for (var name
in messagestyle
) {
619 if (messagestyle
.hasOwnProperty(name
)) {
620 div
.style
[name
] = messagestyle
[name
];
623 this.graphDiv
.appendChild(div
);
624 this.attrs_
.labelsDiv
= div
;
629 * Create the text box to adjust the averaging period
630 * @return {Object} The newly-created text box
633 Dygraph
.prototype.createRollInterface_
= function() {
634 var display
= this.attr_('showRoller') ? "block" : "none";
635 var textAttr
= { "position": "absolute",
637 "top": (this.plotter_
.area
.h
- 25) + "px",
638 "left": (this.plotter_
.area
.x
+ 1) + "px",
641 var roller
= document
.createElement("input");
642 roller
.type
= "text";
644 roller
.value
= this.rollPeriod_
;
645 for (var name
in textAttr
) {
646 if (textAttr
.hasOwnProperty(name
)) {
647 roller
.style
[name
] = textAttr
[name
];
651 var pa
= this.graphDiv
;
652 pa
.appendChild(roller
);
654 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
658 // These functions are taken from MochiKit.Signal
659 Dygraph
.pageX
= function(e
) {
661 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
664 var b
= document
.body
;
666 (de
.scrollLeft
|| b
.scrollLeft
) -
667 (de
.clientLeft
|| 0);
671 Dygraph
.pageY
= function(e
) {
673 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
676 var b
= document
.body
;
678 (de
.scrollTop
|| b
.scrollTop
) -
684 * Set up all the mouse handlers needed to capture dragging behavior for zoom
688 Dygraph
.prototype.createDragInterface_
= function() {
691 // Tracks whether the mouse is down right now
692 var isZooming
= false;
693 var isPanning
= false;
694 var dragStartX
= null;
695 var dragStartY
= null;
699 var draggingDate
= null;
700 var dateRange
= null;
702 // Utility function to convert page-wide coordinates to canvas coords
705 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
706 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
708 // Draw zoom rectangles when the mouse is down and the user moves around
709 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
711 dragEndX
= getX(event
);
712 dragEndY
= getY(event
);
714 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
716 } else if (isPanning
) {
717 dragEndX
= getX(event
);
718 dragEndY
= getY(event
);
720 // Want to have it so that:
721 // 1. draggingDate appears at dragEndX
722 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
724 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
725 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
726 self
.drawGraph_(self
.rawData_
);
730 // Track the beginning of drag events
731 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
732 px
= Dygraph
.findPosX(self
.canvas_
);
733 py
= Dygraph
.findPosY(self
.canvas_
);
734 dragStartX
= getX(event
);
735 dragStartY
= getY(event
);
737 if (event
.altKey
|| event
.shiftKey
) {
738 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
740 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
741 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
748 // If the user releases the mouse button during a drag, but not over the
749 // canvas, then it doesn't count as a zooming action.
750 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
751 if (isZooming
|| isPanning
) {
764 // Temporarily cancel the dragging event when the mouse leaves the graph
765 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
772 // If the mouse is released on the canvas during a drag event, then it's a
773 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
774 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
777 dragEndX
= getX(event
);
778 dragEndY
= getY(event
);
779 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
780 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
782 if (regionWidth
< 2 && regionHeight
< 2 &&
783 self
.attr_('clickCallback') != null &&
784 self
.lastx_
!= undefined
) {
785 // TODO(danvk): pass along more info about the points.
786 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
789 if (regionWidth
>= 10) {
790 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
791 Math
.max(dragStartX
, dragEndX
));
793 self
.canvas_
.getContext("2d").clearRect(0, 0,
795 self
.canvas_
.height
);
809 // Double-clicking zooms back out
810 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
811 if (self
.dateWindow_
== null) return;
812 self
.dateWindow_
= null;
813 self
.drawGraph_(self
.rawData_
);
814 var minDate
= self
.rawData_
[0][0];
815 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
816 if (self
.attr_("zoomCallback")) {
817 self
.attr_("zoomCallback")(minDate
, maxDate
);
823 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
824 * up any previous zoom rectangles that were drawn. This could be optimized to
825 * avoid extra redrawing, but it's tricky to avoid interactions with the status
827 * @param {Number} startX The X position where the drag started, in canvas
829 * @param {Number} endX The current X position of the drag, in canvas coords.
830 * @param {Number} prevEndX The value of endX on the previous call to this
831 * function. Used to avoid excess redrawing
834 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
835 var ctx
= this.canvas_
.getContext("2d");
837 // Clean up from the previous rect if necessary
839 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
840 Math
.abs(startX
- prevEndX
), this.height_
);
843 // Draw a light-grey rectangle to show the new viewing area
844 if (endX
&& startX
) {
845 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
846 ctx
.fillRect(Math
.min(startX
, endX
), 0,
847 Math
.abs(endX
- startX
), this.height_
);
852 * Zoom to something containing [lowX, highX]. These are pixel coordinates
853 * in the canvas. The exact zoom window may be slightly larger if there are no
854 * data points near lowX or highX. This function redraws the graph.
855 * @param {Number} lowX The leftmost pixel value that should be visible.
856 * @param {Number} highX The rightmost pixel value that should be visible.
859 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
860 // Find the earliest and latest dates contained in this canvasx range.
861 var r
= this.toDataCoords(lowX
, null);
863 r
= this.toDataCoords(highX
, null);
866 this.dateWindow_
= [minDate
, maxDate
];
867 this.drawGraph_(this.rawData_
);
868 if (this.attr_("zoomCallback")) {
869 this.attr_("zoomCallback")(minDate
, maxDate
);
874 * When the mouse moves in the canvas, display information about a nearby data
875 * point and draw dots over those points in the data series. This function
876 * takes care of cleanup of previously-drawn dots.
877 * @param {Object} event The mousemove event from the browser.
880 Dygraph
.prototype.mouseMove_
= function(event
) {
881 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
882 var points
= this.layout_
.points
;
887 // Loop through all the points and find the date nearest to our current
889 var minDist
= 1e+100;
891 for (var i
= 0; i
< points
.length
; i
++) {
892 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
893 if (dist
> minDist
) continue;
897 if (idx
>= 0) lastx
= points
[idx
].xval
;
898 // Check that you can really highlight the last day's data
899 if (canvasx
> points
[points
.length
-1].canvasx
)
900 lastx
= points
[points
.length
-1].xval
;
902 // Extract the points we've selected
903 this.selPoints_
= [];
904 var cumulative_sum
= 0; // used only if we have a stackedGraph.
905 var l
= points
.length
;
906 var isStacked
= this.attr_("stackedGraph");
907 if (!this.attr_("stackedGraph")) {
908 for (var i
= 0; i
< l
; i
++) {
909 if (points
[i
].xval
== lastx
) {
910 this.selPoints_
.push(points
[i
]);
914 // Stacked points need to be examined in reverse order.
915 for (var i
= l
- 1; i
>= 0; i
--) {
916 if (points
[i
].xval
== lastx
) {
917 // Clone the point, since we need to 'unstack' it below.
919 for (var k
in points
[i
]) {
922 p
.yval
-= cumulative_sum
;
923 cumulative_sum
+= p
.yval
;
924 this.selPoints_
.push(p
);
929 if (this.attr_("highlightCallback")) {
930 var px
= this.lastHighlightCallbackX
;
931 if (px
!== null && lastx
!= px
) {
932 // only fire if the selected point has changed.
933 this.lastHighlightCallbackX
= lastx
;
934 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
938 // Save last x position for callbacks.
941 this.updateSelection_();
945 * Draw dots over the selectied points in the data series. This function
946 * takes care of cleanup of previously-drawn dots.
949 Dygraph
.prototype.updateSelection_
= function() {
950 // Clear the previously drawn vertical, if there is one
951 var circleSize
= this.attr_('highlightCircleSize');
952 var ctx
= this.canvas_
.getContext("2d");
953 if (this.previousVerticalX_
>= 0) {
954 var px
= this.previousVerticalX_
;
955 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
958 var isOK
= function(x
) { return x
&& !isNaN(x
); };
960 if (this.selPoints_
.length
> 0) {
961 var canvasx
= this.selPoints_
[0].canvasx
;
963 // Set the status message to indicate the selected point(s)
964 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
965 var fmtFunc
= this.attr_('yValueFormatter');
966 var clen
= this.colors_
.length
;
968 if (this.attr_('showLabelsOnHighlight')) {
969 // Set the status message to indicate the selected point(s)
970 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
971 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
972 if (this.attr_("labelsSeparateLines")) {
975 var point
= this.selPoints_
[i
];
976 var c
= new RGBColor(this.colors_
[i
%clen
]);
977 var yval
= fmtFunc(point
.yval
);
978 replace
+= " <b><font color='" + c
.toHex() + "'>"
979 + point
.name
+ "</font></b>:"
983 this.attr_("labelsDiv").innerHTML
= replace
;
986 // Draw colored circles over the center of each selected point
988 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
989 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
991 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
992 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
993 0, 2 * Math
.PI
, false);
998 this.previousVerticalX_
= canvasx
;
1003 * Set manually set selected dots, and display information about them
1004 * @param int row number that should by highlighted
1005 * false value clears the selection
1008 Dygraph
.prototype.setSelection
= function(row
) {
1009 // Extract the points we've selected
1010 this.selPoints_
= [];
1013 if (row
!== false) {
1014 row
= row
-this.boundaryIds_
[0][0];
1017 if (row
!== false && row
>= 0) {
1018 for (var i
in this.layout_
.datasets
) {
1019 if (row
< this.layout_
.datasets
[i
].length
) {
1020 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1022 pos
+= this.layout_
.datasets
[i
].length
;
1026 if (this.selPoints_
.length
) {
1027 this.lastx_
= this.selPoints_
[0].xval
;
1028 this.updateSelection_();
1031 this.clearSelection();
1037 * The mouse has left the canvas. Clear out whatever artifacts remain
1038 * @param {Object} event the mouseout event from the browser.
1041 Dygraph
.prototype.mouseOut_
= function(event
) {
1042 if (this.attr_("hideOverlayOnMouseOut")) {
1043 this.clearSelection();
1048 * Remove all selection from the canvas
1051 Dygraph
.prototype.clearSelection
= function() {
1052 // Get rid of the overlay data
1053 var ctx
= this.canvas_
.getContext("2d");
1054 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1055 this.attr_("labelsDiv").innerHTML
= "";
1056 this.selPoints_
= [];
1061 * Returns the number of the currently selected row
1062 * @return int row number, of -1 if nothing is selected
1065 Dygraph
.prototype.getSelection
= function() {
1066 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1070 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1071 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1072 return row
+ this.boundaryIds_
[0][0];
1078 Dygraph
.zeropad
= function(x
) {
1079 if (x
< 10) return "0" + x
; else return "" + x
;
1083 * Return a string version of the hours, minutes and seconds portion of a date.
1084 * @param {Number} date The JavaScript date (ms since epoch)
1085 * @return {String} A time of the form "HH:MM:SS"
1088 Dygraph
.prototype.hmsString_
= function(date
) {
1089 var zeropad
= Dygraph
.zeropad
;
1090 var d
= new Date(date
);
1091 if (d
.getSeconds()) {
1092 return zeropad(d
.getHours()) + ":" +
1093 zeropad(d
.getMinutes()) + ":" +
1094 zeropad(d
.getSeconds());
1096 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1101 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1102 * @param {Number} date The JavaScript date (ms since epoch)
1103 * @return {String} A date of the form "YYYY/MM/DD"
1105 * TODO(danvk): why is this part of the prototype?
1107 Dygraph
.dateString_
= function(date
, self
) {
1108 var zeropad
= Dygraph
.zeropad
;
1109 var d
= new Date(date
);
1112 var year
= "" + d
.getFullYear();
1113 // Get a 0 padded month string
1114 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1115 // Get a 0 padded day string
1116 var day
= zeropad(d
.getDate());
1119 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1120 if (frac
) ret
= " " + self
.hmsString_(date
);
1122 return year
+ "/" + month + "/" + day
+ ret
;
1126 * Round a number to the specified number of digits past the decimal point.
1127 * @param {Number} num The number to round
1128 * @param {Number} places The number of decimals to which to round
1129 * @return {Number} The rounded number
1132 Dygraph
.round_
= function(num
, places
) {
1133 var shift
= Math
.pow(10, places
);
1134 return Math
.round(num
* shift
)/shift
;
1138 * Fires when there's data available to be graphed.
1139 * @param {String} data Raw CSV data to be plotted
1142 Dygraph
.prototype.loadedEvent_
= function(data
) {
1143 this.rawData_
= this.parseCSV_(data
);
1144 this.drawGraph_(this.rawData_
);
1147 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1148 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1149 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1152 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1155 Dygraph
.prototype.addXTicks_
= function() {
1156 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1157 var startDate
, endDate
;
1158 if (this.dateWindow_
) {
1159 startDate
= this.dateWindow_
[0];
1160 endDate
= this.dateWindow_
[1];
1162 startDate
= this.rawData_
[0][0];
1163 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1166 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1167 this.layout_
.updateOptions({xTicks
: xTicks
});
1170 // Time granularity enumeration
1171 Dygraph
.SECONDLY
= 0;
1172 Dygraph
.TWO_SECONDLY
= 1;
1173 Dygraph
.FIVE_SECONDLY
= 2;
1174 Dygraph
.TEN_SECONDLY
= 3;
1175 Dygraph
.THIRTY_SECONDLY
= 4;
1176 Dygraph
.MINUTELY
= 5;
1177 Dygraph
.TWO_MINUTELY
= 6;
1178 Dygraph
.FIVE_MINUTELY
= 7;
1179 Dygraph
.TEN_MINUTELY
= 8;
1180 Dygraph
.THIRTY_MINUTELY
= 9;
1181 Dygraph
.HOURLY
= 10;
1182 Dygraph
.TWO_HOURLY
= 11;
1183 Dygraph
.SIX_HOURLY
= 12;
1185 Dygraph
.WEEKLY
= 14;
1186 Dygraph
.MONTHLY
= 15;
1187 Dygraph
.QUARTERLY
= 16;
1188 Dygraph
.BIANNUAL
= 17;
1189 Dygraph
.ANNUAL
= 18;
1190 Dygraph
.DECADAL
= 19;
1191 Dygraph
.NUM_GRANULARITIES
= 20;
1193 Dygraph
.SHORT_SPACINGS
= [];
1194 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1195 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1196 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1197 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1198 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1199 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1200 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1201 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1202 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1203 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1204 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1205 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1206 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1207 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1208 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1212 // If we used this time granularity, how many ticks would there be?
1213 // This is only an approximation, but it's generally good enough.
1215 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1216 if (granularity
< Dygraph
.MONTHLY
) {
1217 // Generate one tick mark for every fixed interval of time.
1218 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1219 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1221 var year_mod
= 1; // e.g. to only print one point every 10 years.
1222 var num_months
= 12;
1223 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1224 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1225 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1226 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1228 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1229 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1230 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1236 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1237 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1239 // Returns an array containing {v: millis, label: label} dictionaries.
1241 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1243 if (granularity
< Dygraph
.MONTHLY
) {
1244 // Generate one tick mark for every fixed interval of time.
1245 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1246 var format
= '%d%b'; // e.g. "1Jan"
1248 // Find a time less than start_time which occurs on a "nice" time boundary
1249 // for this granularity.
1250 var g
= spacing
/ 1000;
1251 var d
= new Date(start_time
);
1252 if (g
<= 60) { // seconds
1253 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1257 if (g
<= 60) { // minutes
1258 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1263 if (g
<= 24) { // days
1264 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1269 if (g
== 7) { // one week
1270 d
.setDate(d
.getDate() - d
.getDay());
1275 start_time
= d
.getTime();
1277 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1278 var d
= new Date(t
);
1279 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1280 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1281 // the extra hour covers DST problems.
1282 ticks
.push({ v
:t
, label
: new Date(t
+ 3600*1000).strftime(format
) });
1284 ticks
.push({ v
:t
, label
: this.hmsString_(t
) });
1288 // Display a tick mark on the first of a set of months of each year.
1289 // Years get a tick mark iff y % year_mod == 0. This is useful for
1290 // displaying a tick mark once every 10 years, say, on long time scales.
1292 var year_mod
= 1; // e.g. to only print one point every 10 years.
1294 if (granularity
== Dygraph
.MONTHLY
) {
1295 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1296 } else if (granularity
== Dygraph
.QUARTERLY
) {
1297 months
= [ 0, 3, 6, 9 ];
1298 } else if (granularity
== Dygraph
.BIANNUAL
) {
1300 } else if (granularity
== Dygraph
.ANNUAL
) {
1302 } else if (granularity
== Dygraph
.DECADAL
) {
1307 var start_year
= new Date(start_time
).getFullYear();
1308 var end_year
= new Date(end_time
).getFullYear();
1309 var zeropad
= Dygraph
.zeropad
;
1310 for (var i
= start_year
; i
<= end_year
; i
++) {
1311 if (i
% year_mod
!= 0) continue;
1312 for (var j
= 0; j
< months
.length
; j
++) {
1313 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1314 var t
= Date
.parse(date_str
);
1315 if (t
< start_time
|| t
> end_time
) continue;
1316 ticks
.push({ v
:t
, label
: new Date(t
).strftime('%b %y') });
1326 * Add ticks to the x-axis based on a date range.
1327 * @param {Number} startDate Start of the date window (millis since epoch)
1328 * @param {Number} endDate End of the date window (millis since epoch)
1329 * @return {Array.<Object>} Array of {label, value} tuples.
1332 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1334 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1335 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1336 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1343 return self
.GetXAxis(startDate
, endDate
, chosen
);
1345 // TODO(danvk): signal error.
1350 * Add ticks when the x axis has numbers on it (instead of dates)
1351 * @param {Number} startDate Start of the date window (millis since epoch)
1352 * @param {Number} endDate End of the date window (millis since epoch)
1353 * @return {Array.<Object>} Array of {label, value} tuples.
1356 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1358 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1359 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1360 // The first spacing greater than pixelsPerYLabel is what we use.
1361 // TODO(danvk): version that works on a log scale.
1362 if (self
.attr_("labelsKMG2")) {
1363 var mults
= [1, 2, 4, 8];
1365 var mults
= [1, 2, 5];
1367 var scale
, low_val
, high_val
, nTicks
;
1368 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1369 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1370 for (var i
= -10; i
< 50; i
++) {
1371 if (self
.attr_("labelsKMG2")) {
1372 var base_scale
= Math
.pow(16, i
);
1374 var base_scale
= Math
.pow(10, i
);
1376 for (var j
= 0; j
< mults
.length
; j
++) {
1377 scale
= base_scale
* mults
[j
];
1378 low_val
= Math
.floor(minV
/ scale
) * scale
;
1379 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1380 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1381 var spacing
= self
.height_
/ nTicks
;
1382 // wish I could break out of both loops at once...
1383 if (spacing
> pixelsPerTick
) break;
1385 if (spacing
> pixelsPerTick
) break;
1388 // Construct labels for the ticks
1392 if (self
.attr_("labelsKMB")) {
1394 k_labels
= [ "K", "M", "B", "T" ];
1396 if (self
.attr_("labelsKMG2")) {
1397 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1399 k_labels
= [ "k", "M", "G", "T" ];
1402 // Allow reverse y-axis if it's explicitly requested.
1403 if (low_val
> high_val
) scale
*= -1;
1405 for (var i
= 0; i
< nTicks
; i
++) {
1406 var tickV
= low_val
+ i
* scale
;
1407 var absTickV
= Math
.abs(tickV
);
1408 var label
= Dygraph
.round_(tickV
, 2);
1409 if (k_labels
.length
) {
1410 // Round up to an appropriate unit.
1412 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1413 if (absTickV
>= n
) {
1414 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1419 ticks
.push( {label
: label
, v
: tickV
} );
1425 * Adds appropriate ticks on the y-axis
1426 * @param {Number} minY The minimum Y value in the data set
1427 * @param {Number} maxY The maximum Y value in the data set
1430 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1431 // Set the number of ticks so that the labels are human-friendly.
1432 // TODO(danvk): make this an attribute as well.
1433 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1434 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1438 // Computes the range of the data series (including confidence intervals).
1439 // series is either [ [x1, y1], [x2, y2], ... ] or
1440 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1441 // Returns [low, high]
1442 Dygraph
.prototype.extremeValues_
= function(series
) {
1443 var minY
= null, maxY
= null;
1445 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1447 // With custom bars, maxY is the max of the high values.
1448 for (var j
= 0; j
< series
.length
; j
++) {
1449 var y
= series
[j
][1][0];
1451 var low
= y
- series
[j
][1][1];
1452 var high
= y
+ series
[j
][1][2];
1453 if (low
> y
) low
= y
; // this can happen with custom bars,
1454 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1455 if (maxY
== null || high
> maxY
) {
1458 if (minY
== null || low
< minY
) {
1463 for (var j
= 0; j
< series
.length
; j
++) {
1464 var y
= series
[j
][1];
1465 if (y
=== null || isNaN(y
)) continue;
1466 if (maxY
== null || y
> maxY
) {
1469 if (minY
== null || y
< minY
) {
1475 return [minY
, maxY
];
1479 * Update the graph with new data. Data is in the format
1480 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1481 * or, if errorBars=true,
1482 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1483 * @param {Array.<Object>} data The data (see above)
1486 Dygraph
.prototype.drawGraph_
= function(data
) {
1487 // This is used to set the second parameter to drawCallback, below.
1488 var is_initial_draw
= this.is_initial_draw_
;
1489 this.is_initial_draw_
= false;
1491 var minY
= null, maxY
= null;
1492 this.layout_
.removeAllDatasets();
1494 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1496 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1498 // For stacked series.
1499 var cumulative_y
= [];
1500 var stacked_datasets
= [];
1502 // Loop over all fields in the dataset
1503 for (var i
= 1; i
< data
[0].length
; i
++) {
1504 if (!this.visibility()[i
- 1]) continue;
1507 for (var j
= 0; j
< data
.length
; j
++) {
1508 if (data
[j
][i
] || !connectSeparatedPoints
) {
1509 var date
= data
[j
][0];
1510 series
.push([date
, data
[j
][i
]]);
1513 series
= this.rollingAverage(series
, this.rollPeriod_
);
1515 // Prune down to the desired range, if necessary (for zooming)
1516 // Because there can be lines going to points outside of the visible area,
1517 // we actually prune to visible points, plus one on either side.
1518 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1519 if (this.dateWindow_
) {
1520 var low
= this.dateWindow_
[0];
1521 var high
= this.dateWindow_
[1];
1523 // TODO(danvk): do binary search instead of linear search.
1524 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1525 var firstIdx
= null, lastIdx
= null;
1526 for (var k
= 0; k
< series
.length
; k
++) {
1527 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1530 if (series
[k
][0] <= high
) {
1534 if (firstIdx
=== null) firstIdx
= 0;
1535 if (firstIdx
> 0) firstIdx
--;
1536 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1537 if (lastIdx
< series
.length
- 1) lastIdx
++;
1538 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1539 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1540 pruned
.push(series
[k
]);
1544 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1547 var extremes
= this.extremeValues_(series
);
1548 var thisMinY
= extremes
[0];
1549 var thisMaxY
= extremes
[1];
1550 if (!minY
|| thisMinY
< minY
) minY
= thisMinY
;
1551 if (!maxY
|| thisMaxY
> maxY
) maxY
= thisMaxY
;
1555 for (var j
=0; j
<series
.length
; j
++)
1556 vals
[j
] = [series
[j
][0],
1557 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1558 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1559 } else if (this.attr_("stackedGraph")) {
1561 var l
= series
.length
;
1563 for (var j
= 0; j
< l
; j
++) {
1564 if (cumulative_y
[series
[j
][0]] === undefined
)
1565 cumulative_y
[series
[j
][0]] = 0;
1567 actual_y
= series
[j
][1];
1568 cumulative_y
[series
[j
][0]] += actual_y
;
1570 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1572 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1573 maxY
= cumulative_y
[series
[j
][0]];
1575 stacked_datasets
.push([this.attr_("labels")[i
], vals
]);
1576 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1578 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1582 if (stacked_datasets
.length
> 0) {
1583 for (var i
= (stacked_datasets
.length
- 1); i
>= 0; i
--) {
1584 this.layout_
.addDataset(stacked_datasets
[i
][0], stacked_datasets
[i
][1]);
1588 // Use some heuristics to come up with a good maxY value, unless it's been
1589 // set explicitly by the user.
1590 if (this.valueRange_
!= null) {
1591 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1592 this.displayedYRange_
= this.valueRange_
;
1594 // This affects the calculation of span, below.
1595 if (this.attr_("includeZero") && minY
> 0) {
1599 // Add some padding and round up to an integer to be human-friendly.
1600 var span
= maxY
- minY
;
1601 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1602 if (span
== 0) { span
= maxY
; }
1603 var maxAxisY
= maxY
+ 0.1 * span
;
1604 var minAxisY
= minY
- 0.1 * span
;
1606 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1607 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1608 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1610 if (this.attr_("includeZero")) {
1611 if (maxY
< 0) maxAxisY
= 0;
1612 if (minY
> 0) minAxisY
= 0;
1615 this.addYTicks_(minAxisY
, maxAxisY
);
1616 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1621 // Tell PlotKit to use this new data and render itself
1622 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1623 this.layout_
.evaluateWithError();
1624 this.plotter_
.clear();
1625 this.plotter_
.render();
1626 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1627 this.canvas_
.height
);
1629 if (this.attr_("drawCallback") !== null) {
1630 this.attr_("drawCallback")(this, is_initial_draw
);
1635 * Calculates the rolling average of a data set.
1636 * If originalData is [label, val], rolls the average of those.
1637 * If originalData is [label, [, it's interpreted as [value, stddev]
1638 * and the roll is returned in the same form, with appropriately reduced
1639 * stddev for each value.
1640 * Note that this is where fractional input (i.e. '5/10') is converted into
1642 * @param {Array} originalData The data in the appropriate format (see above)
1643 * @param {Number} rollPeriod The number of days over which to average the data
1645 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1646 if (originalData
.length
< 2)
1647 return originalData
;
1648 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1649 var rollingData
= [];
1650 var sigma
= this.attr_("sigma");
1652 if (this.fractions_
) {
1654 var den
= 0; // numerator/denominator
1656 for (var i
= 0; i
< originalData
.length
; i
++) {
1657 num
+= originalData
[i
][1][0];
1658 den
+= originalData
[i
][1][1];
1659 if (i
- rollPeriod
>= 0) {
1660 num
-= originalData
[i
- rollPeriod
][1][0];
1661 den
-= originalData
[i
- rollPeriod
][1][1];
1664 var date
= originalData
[i
][0];
1665 var value
= den
? num
/ den
: 0.0;
1666 if (this.attr_("errorBars")) {
1667 if (this.wilsonInterval_
) {
1668 // For more details on this confidence interval, see:
1669 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1671 var p
= value
< 0 ? 0 : value
, n
= den
;
1672 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1673 var denom
= 1 + sigma
* sigma
/ den
;
1674 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1675 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1676 rollingData
[i
] = [date
,
1677 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1679 rollingData
[i
] = [date
, [0, 0, 0]];
1682 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1683 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1686 rollingData
[i
] = [date
, mult
* value
];
1689 } else if (this.attr_("customBars")) {
1694 for (var i
= 0; i
< originalData
.length
; i
++) {
1695 var data
= originalData
[i
][1];
1697 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1699 if (y
!= null && !isNaN(y
)) {
1705 if (i
- rollPeriod
>= 0) {
1706 var prev
= originalData
[i
- rollPeriod
];
1707 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1714 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1715 1.0 * (mid
- low
) / count
,
1716 1.0 * (high
- mid
) / count
]];
1719 // Calculate the rolling average for the first rollPeriod - 1 points where
1720 // there is not enough data to roll over the full number of days
1721 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1722 if (!this.attr_("errorBars")){
1723 if (rollPeriod
== 1) {
1724 return originalData
;
1727 for (var i
= 0; i
< originalData
.length
; i
++) {
1730 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1731 var y
= originalData
[j
][1];
1732 if (y
== null || isNaN(y
)) continue;
1734 sum
+= originalData
[j
][1];
1737 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1739 rollingData
[i
] = [originalData
[i
][0], null];
1744 for (var i
= 0; i
< originalData
.length
; i
++) {
1748 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1749 var y
= originalData
[j
][1][0];
1750 if (y
== null || isNaN(y
)) continue;
1752 sum
+= originalData
[j
][1][0];
1753 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1756 var stddev
= Math
.sqrt(variance
) / num_ok
;
1757 rollingData
[i
] = [originalData
[i
][0],
1758 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1760 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1770 * Parses a date, returning the number of milliseconds since epoch. This can be
1771 * passed in as an xValueParser in the Dygraph constructor.
1772 * TODO(danvk): enumerate formats that this understands.
1773 * @param {String} A date in YYYYMMDD format.
1774 * @return {Number} Milliseconds since epoch.
1777 Dygraph
.dateParser
= function(dateStr
, self
) {
1780 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1781 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1782 while (dateStrSlashed
.search("-") != -1) {
1783 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1785 d
= Date
.parse(dateStrSlashed
);
1786 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1787 // TODO(danvk): remove support for this format. It's confusing.
1788 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1789 + "/" + dateStr
.substr(6,2);
1790 d
= Date
.parse(dateStrSlashed
);
1792 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1793 // "2009/07/12 12:34:56"
1794 d
= Date
.parse(dateStr
);
1797 if (!d
|| isNaN(d
)) {
1798 self
.error("Couldn't parse " + dateStr
+ " as a date");
1804 * Detects the type of the str (date or numeric) and sets the various
1805 * formatting attributes in this.attrs_ based on this type.
1806 * @param {String} str An x value.
1809 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1811 if (str
.indexOf('-') >= 0 ||
1812 str
.indexOf('/') >= 0 ||
1813 isNaN(parseFloat(str
))) {
1815 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1816 // TODO(danvk): remove support for this format.
1821 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1822 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1823 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1825 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1826 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1827 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1832 * Parses a string in a special csv format. We expect a csv file where each
1833 * line is a date point, and the first field in each line is the date string.
1834 * We also expect that all remaining fields represent series.
1835 * if the errorBars attribute is set, then interpret the fields as:
1836 * date, series1, stddev1, series2, stddev2, ...
1837 * @param {Array.<Object>} data See above.
1840 * @return Array.<Object> An array with one entry for each row. These entries
1841 * are an array of cells in that row. The first entry is the parsed x-value for
1842 * the row. The second, third, etc. are the y-values. These can take on one of
1843 * three forms, depending on the CSV and constructor parameters:
1845 * 2. [ value, stddev ]
1846 * 3. [ low value, center value, high value ]
1848 Dygraph
.prototype.parseCSV_
= function(data
) {
1850 var lines
= data
.split("\n");
1852 // Use the default delimiter or fall back to a tab if that makes sense.
1853 var delim
= this.attr_('delimiter');
1854 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1859 if (this.labelsFromCSV_
) {
1861 this.attrs_
.labels
= lines
[0].split(delim
);
1865 var defaultParserSet
= false; // attempt to auto-detect x value type
1866 var expectedCols
= this.attr_("labels").length
;
1867 var outOfOrder
= false;
1868 for (var i
= start
; i
< lines
.length
; i
++) {
1869 var line
= lines
[i
];
1870 if (line
.length
== 0) continue; // skip blank lines
1871 if (line
[0] == '#') continue; // skip comment lines
1872 var inFields
= line
.split(delim
);
1873 if (inFields
.length
< 2) continue;
1876 if (!defaultParserSet
) {
1877 this.detectTypeFromString_(inFields
[0]);
1878 xParser
= this.attr_("xValueParser");
1879 defaultParserSet
= true;
1881 fields
[0] = xParser(inFields
[0], this);
1883 // If fractions are expected, parse the numbers as "A/B
"
1884 if (this.fractions_) {
1885 for (var j = 1; j < inFields.length; j++) {
1886 // TODO(danvk): figure out an appropriate way to flag parse errors.
1887 var vals = inFields[j].split("/");
1888 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1890 } else if (this.attr_("errorBars
")) {
1891 // If there are error bars, values are (value, stddev) pairs
1892 for (var j = 1; j < inFields.length; j += 2)
1893 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1894 parseFloat(inFields[j + 1])];
1895 } else if (this.attr_("customBars
")) {
1896 // Bars are a low;center;high tuple
1897 for (var j = 1; j < inFields.length; j++) {
1898 var vals = inFields[j].split(";");
1899 fields[j] = [ parseFloat(vals[0]),
1900 parseFloat(vals[1]),
1901 parseFloat(vals[2]) ];
1904 // Values are just numbers
1905 for (var j = 1; j < inFields.length; j++) {
1906 fields[j] = parseFloat(inFields[j]);
1909 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1914 if (fields.length != expectedCols) {
1915 this.error("Number of columns
in line
" + i + " (" + fields.length +
1916 ") does not agree
with number of
labels (" + expectedCols +
1922 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1923 ret.sort(function(a,b) { return a[0] - b[0] });
1930 * The user has provided their data as a pre-packaged JS array. If the x values
1931 * are numeric, this is the same as dygraphs' internal format. If the x values
1932 * are dates, we need to convert them from Date objects to ms since epoch.
1933 * @param {Array.<Object>} data
1934 * @return {Array.<Object>} data with numeric x values.
1936 Dygraph.prototype.parseArray_ = function(data) {
1937 // Peek at the first x value to see if it's numeric.
1938 if (data.length == 0) {
1939 this.error("Can
't plot empty data set");
1942 if (data[0].length == 0) {
1943 this.error("Data set cannot contain an empty row");
1947 if (this.attr_("labels") == null) {
1948 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1949 "in the options parameter");
1950 this.attrs_.labels = [ "X" ];
1951 for (var i = 1; i < data[0].length; i++) {
1952 this.attrs_.labels.push("Y" + i);
1956 if (Dygraph.isDateLike(data[0][0])) {
1957 // Some intelligent defaults for a date x-axis.
1958 this.attrs_.xValueFormatter = Dygraph.dateString_;
1959 this.attrs_.xTicker = Dygraph.dateTicker;
1961 // Assume they're all dates
.
1962 var parsedData
= Dygraph
.clone(data
);
1963 for (var i
= 0; i
< data
.length
; i
++) {
1964 if (parsedData
[i
].length
== 0) {
1965 this.error("Row " << (1 + i
) << " of data is empty");
1968 if (parsedData
[i
][0] == null
1969 || typeof(parsedData
[i
][0].getTime
) != 'function'
1970 || isNaN(parsedData
[i
][0].getTime())) {
1971 this.error("x value in row " + (1 + i
) + " is not a Date");
1974 parsedData
[i
][0] = parsedData
[i
][0].getTime();
1978 // Some intelligent defaults for a numeric x-axis.
1979 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1980 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1986 * Parses a DataTable object from gviz.
1987 * The data is expected to have a first column that is either a date or a
1988 * number. All subsequent columns must be numbers. If there is a clear mismatch
1989 * between this.xValueParser_ and the type of the first column, it will be
1990 * fixed. Returned value is in the same format as return value of parseCSV_.
1991 * @param {Array.<Object>} data See above.
1994 Dygraph
.prototype.parseDataTable_
= function(data
) {
1995 var cols
= data
.getNumberOfColumns();
1996 var rows
= data
.getNumberOfRows();
1998 // Read column labels
2000 for (var i
= 0; i
< cols
; i
++) {
2001 labels
.push(data
.getColumnLabel(i
));
2002 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
2004 this.attrs_
.labels
= labels
;
2005 cols
= labels
.length
;
2007 var indepType
= data
.getColumnType(0);
2008 if (indepType
== 'date' || indepType
== 'datetime') {
2009 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2010 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2011 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2012 } else if (indepType
== 'number') {
2013 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2014 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2015 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2017 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2018 "column 1 of DataTable input (Got '" + indepType
+ "')");
2023 var outOfOrder
= false;
2024 for (var i
= 0; i
< rows
; i
++) {
2026 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2027 data
.getValue(i
, 0) === null) {
2028 this.warning("Ignoring row " + i
+
2029 " of DataTable because of undefined or null first column.");
2033 if (indepType
== 'date' || indepType
== 'datetime') {
2034 row
.push(data
.getValue(i
, 0).getTime());
2036 row
.push(data
.getValue(i
, 0));
2038 if (!this.attr_("errorBars")) {
2039 for (var j
= 1; j
< cols
; j
++) {
2040 row
.push(data
.getValue(i
, j
));
2043 for (var j
= 0; j
< cols
- 1; j
++) {
2044 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2047 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2054 this.warn("DataTable is out of order; order it correctly to speed loading.");
2055 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2060 // These functions are all based on MochiKit.
2061 Dygraph
.update
= function (self
, o
) {
2062 if (typeof(o
) != 'undefined' && o
!== null) {
2064 if (o
.hasOwnProperty(k
)) {
2072 Dygraph
.isArrayLike
= function (o
) {
2073 var typ
= typeof(o
);
2075 (typ
!= 'object' && !(typ
== 'function' &&
2076 typeof(o
.item
) == 'function')) ||
2078 typeof(o
.length
) != 'number' ||
2086 Dygraph
.isDateLike
= function (o
) {
2087 if (typeof(o
) != "object" || o
=== null ||
2088 typeof(o
.getTime
) != 'function') {
2094 Dygraph
.clone
= function(o
) {
2095 // TODO(danvk): figure out how MochiKit's version works
2097 for (var i
= 0; i
< o
.length
; i
++) {
2098 if (Dygraph
.isArrayLike(o
[i
])) {
2099 r
.push(Dygraph
.clone(o
[i
]));
2109 * Get the CSV data. If it's in a function, call that function. If it's in a
2110 * file, do an XMLHttpRequest to get it.
2113 Dygraph
.prototype.start_
= function() {
2114 if (typeof this.file_
== 'function') {
2115 // CSV string. Pretend we got it via XHR.
2116 this.loadedEvent_(this.file_());
2117 } else if (Dygraph
.isArrayLike(this.file_
)) {
2118 this.rawData_
= this.parseArray_(this.file_
);
2119 this.drawGraph_(this.rawData_
);
2120 } else if (typeof this.file_
== 'object' &&
2121 typeof this.file_
.getColumnRange
== 'function') {
2122 // must be a DataTable from gviz.
2123 this.rawData_
= this.parseDataTable_(this.file_
);
2124 this.drawGraph_(this.rawData_
);
2125 } else if (typeof this.file_
== 'string') {
2126 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2127 if (this.file_
.indexOf('\n') >= 0) {
2128 this.loadedEvent_(this.file_
);
2130 var req
= new XMLHttpRequest();
2132 req
.onreadystatechange
= function () {
2133 if (req
.readyState
== 4) {
2134 if (req
.status
== 200) {
2135 caller
.loadedEvent_(req
.responseText
);
2140 req
.open("GET", this.file_
, true);
2144 this.error("Unknown data format: " + (typeof this.file_
));
2149 * Changes various properties of the graph. These can include:
2151 * <li>file: changes the source data for the graph</li>
2152 * <li>errorBars: changes whether the data contains stddev</li>
2154 * @param {Object} attrs The new properties and values
2156 Dygraph
.prototype.updateOptions
= function(attrs
) {
2157 // TODO(danvk): this is a mess. Rethink this function.
2158 if (attrs
.rollPeriod
) {
2159 this.rollPeriod_
= attrs
.rollPeriod
;
2161 if (attrs
.dateWindow
) {
2162 this.dateWindow_
= attrs
.dateWindow
;
2164 if (attrs
.valueRange
) {
2165 this.valueRange_
= attrs
.valueRange
;
2167 Dygraph
.update(this.user_attrs_
, attrs
);
2169 this.labelsFromCSV_
= (this.attr_("labels") == null);
2171 // TODO(danvk): this doesn't match the constructor logic
2172 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2173 if (attrs
['file']) {
2174 this.file_
= attrs
['file'];
2177 this.drawGraph_(this.rawData_
);
2182 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2183 * containing div (which has presumably changed size since the dygraph was
2184 * instantiated. If the width/height are specified, the div will be resized.
2186 * This is far more efficient than destroying and re-instantiating a
2187 * Dygraph, since it doesn't have to reparse the underlying data.
2189 * @param {Number} width Width (in pixels)
2190 * @param {Number} height Height (in pixels)
2192 Dygraph
.prototype.resize
= function(width
, height
) {
2193 if ((width
=== null) != (height
=== null)) {
2194 this.warn("Dygraph.resize() should be called with zero parameters or " +
2195 "two non-NULL parameters. Pretending it was zero.");
2196 width
= height
= null;
2199 // TODO(danvk): there should be a clear() method.
2200 this.maindiv_
.innerHTML
= "";
2201 this.attrs_
.labelsDiv
= null;
2204 this.maindiv_
.style
.width
= width
+ "px";
2205 this.maindiv_
.style
.height
= height
+ "px";
2206 this.width_
= width
;
2207 this.height_
= height
;
2209 this.width_
= this.maindiv_
.offsetWidth
;
2210 this.height_
= this.maindiv_
.offsetHeight
;
2213 this.createInterface_();
2214 this.drawGraph_(this.rawData_
);
2218 * Adjusts the number of days in the rolling average. Updates the graph to
2219 * reflect the new averaging period.
2220 * @param {Number} length Number of days over which to average the data.
2222 Dygraph
.prototype.adjustRoll
= function(length
) {
2223 this.rollPeriod_
= length
;
2224 this.drawGraph_(this.rawData_
);
2228 * Returns a boolean array of visibility statuses.
2230 Dygraph
.prototype.visibility
= function() {
2231 // Do lazy-initialization, so that this happens after we know the number of
2233 if (!this.attr_("visibility")) {
2234 this.attrs_
["visibility"] = [];
2236 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2237 this.attr_("visibility").push(true);
2239 return this.attr_("visibility");
2243 * Changes the visiblity of a series.
2245 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2246 var x
= this.visibility();
2247 if (num
< 0 && num
>= x
.length
) {
2248 this.warn("invalid series number in setVisibility: " + num
);
2251 this.drawGraph_(this.rawData_
);
2256 * Create a new canvas element. This is more complex than a simple
2257 * document.createElement("canvas") because of IE and excanvas.
2259 Dygraph
.createCanvas
= function() {
2260 var canvas
= document
.createElement("canvas");
2262 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2264 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2272 * A wrapper around Dygraph that implements the gviz API.
2273 * @param {Object} container The DOM object the visualization should live in.
2275 Dygraph
.GVizChart
= function(container
) {
2276 this.container
= container
;
2279 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2280 this.container
.innerHTML
= '';
2281 this.date_graph
= new Dygraph(this.container
, data
, options
);
2285 * Google charts compatible setSelection
2286 * Only row selection is supported, all points in the row will be highlighted
2287 * @param {Array} array of the selected cells
2290 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2292 if (selection_array
.length
) {
2293 row
= selection_array
[0].row
;
2295 this.date_graph
.setSelection(row
);
2299 * Google charts compatible getSelection implementation
2300 * @return {Array} array of the selected cells
2303 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2306 var row
= this.date_graph
.getSelection();
2308 if (row
< 0) return selection
;
2311 for (var i
in this.date_graph
.layout_
.datasets
) {
2312 selection
.push({row
: row
, column
: col
});
2319 // Older pages may still use this name.
2320 DateGraph
= Dygraph
;