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,
105 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
109 xValueFormatter
: Dygraph
.dateString_
,
110 xValueParser
: Dygraph
.dateParser
,
111 xTicker
: Dygraph
.dateTicker
,
119 wilsonInterval
: true, // only relevant if fractions is true
123 connectSeparatedPoints
: false,
126 hideOverlayOnMouseOut
: true,
132 // Various logging levels.
138 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
139 // Labels is no longer a constructor parameter, since it's typically set
140 // directly from the data source. It also conains a name for the x-axis,
141 // which the previous constructor form did not.
142 if (labels
!= null) {
143 var new_labels
= ["Date"];
144 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
145 Dygraph
.update(attrs
, { 'labels': new_labels
});
147 this.__init__(div
, file
, attrs
);
151 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
152 * and interaction <canvas> inside of it. See the constructor for details
154 * @param {Element} div the Element to render the graph into.
155 * @param {String | Function} file Source data
156 * @param {Object} attrs Miscellaneous other options
159 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
160 // Support two-argument constructor
161 if (attrs
== null) { attrs
= {}; }
163 // Copy the important bits into the object
164 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
167 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
168 this.previousVerticalX_
= -1;
169 this.fractions_
= attrs
.fractions
|| false;
170 this.dateWindow_
= attrs
.dateWindow
|| null;
171 this.valueRange_
= attrs
.valueRange
|| null;
172 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
173 this.is_initial_draw_
= true;
175 // Clear the div. This ensure that, if multiple dygraphs are passed the same
176 // div, then only one will be drawn.
179 // If the div isn't already sized then inherit from our attrs or
180 // give it a default size.
181 if (div
.style
.width
== '') {
182 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
184 if (div
.style
.height
== '') {
185 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
187 this.width_
= parseInt(div
.style
.width
, 10);
188 this.height_
= parseInt(div
.style
.height
, 10);
189 // The div might have been specified as percent of the current window size,
190 // convert that to an appropriate number of pixels.
191 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
192 this.width_
= div
.offsetWidth
;
194 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
195 this.height_
= div
.offsetHeight
;
198 if (this.width_
== 0) {
199 this.error("dygraph has zero width. Please specify a width in pixels.");
201 if (this.height_
== 0) {
202 this.error("dygraph has zero height. Please specify a height in pixels.");
205 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
206 if (attrs
['stackedGraph']) {
207 attrs
['fillGraph'] = true;
208 // TODO(nikhilk): Add any other stackedGraph checks here.
211 // Dygraphs has many options, some of which interact with one another.
212 // To keep track of everything, we maintain two sets of options:
214 // this.user_attrs_ only options explicitly set by the user.
215 // this.attrs_ defaults, options derived from user_attrs_, data.
217 // Options are then accessed this.attr_('attr'), which first looks at
218 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
219 // defaults without overriding behavior that the user specifically asks for.
220 this.user_attrs_
= {};
221 Dygraph
.update(this.user_attrs_
, attrs
);
224 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
226 this.boundaryIds_
= [];
228 // Make a note of whether labels will be pulled from the CSV file.
229 this.labelsFromCSV_
= (this.attr_("labels") == null);
231 // Create the containing DIV and other interactive elements
232 this.createInterface_();
237 Dygraph
.prototype.attr_
= function(name
) {
238 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
239 return this.user_attrs_
[name
];
240 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
241 return this.attrs_
[name
];
247 // TODO(danvk): any way I can get the line numbers to be this.warn call?
248 Dygraph
.prototype.log
= function(severity
, message
) {
249 if (typeof(console
) != 'undefined') {
252 console
.debug('dygraphs: ' + message
);
255 console
.info('dygraphs: ' + message
);
257 case Dygraph
.WARNING
:
258 console
.warn('dygraphs: ' + message
);
261 console
.error('dygraphs: ' + message
);
266 Dygraph
.prototype.info
= function(message
) {
267 this.log(Dygraph
.INFO
, message
);
269 Dygraph
.prototype.warn
= function(message
) {
270 this.log(Dygraph
.WARNING
, message
);
272 Dygraph
.prototype.error
= function(message
) {
273 this.log(Dygraph
.ERROR
, message
);
277 * Returns the current rolling period, as set by the user or an option.
278 * @return {Number} The number of days in the rolling window
280 Dygraph
.prototype.rollPeriod
= function() {
281 return this.rollPeriod_
;
285 * Returns the currently-visible x-range. This can be affected by zooming,
286 * panning or a call to updateOptions.
287 * Returns a two-element array: [left, right].
288 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
290 Dygraph
.prototype.xAxisRange
= function() {
291 if (this.dateWindow_
) return this.dateWindow_
;
293 // The entire chart is visible.
294 var left
= this.rawData_
[0][0];
295 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
296 return [left
, right
];
300 * Returns the currently-visible y-range. This can be affected by zooming,
301 * panning or a call to updateOptions.
302 * Returns a two-element array: [bottom, top].
304 Dygraph
.prototype.yAxisRange
= function() {
305 return this.displayedYRange_
;
309 * Convert from data coordinates to canvas/div X/Y coordinates.
310 * Returns a two-element array: [X, Y]
312 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
313 var ret
= [null, null];
314 var area
= this.plotter_
.area
;
316 var xRange
= this.xAxisRange();
317 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
321 var yRange
= this.yAxisRange();
322 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
328 // TODO(danvk): use these functions throughout dygraphs.
330 * Convert from canvas/div coords to data coordinates.
331 * Returns a two-element array: [X, Y]
333 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
334 var ret
= [null, null];
335 var area
= this.plotter_
.area
;
337 var xRange
= this.xAxisRange();
338 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
342 var yRange
= this.yAxisRange();
343 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
349 Dygraph
.addEvent
= function(el
, evt
, fn
) {
350 var normed_fn
= function(e
) {
351 if (!e
) var e
= window
.event
;
354 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
355 el
.addEventListener(evt
, normed_fn
, false);
357 el
.attachEvent('on' + evt
, normed_fn
);
361 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
362 var ctx
= cnv
.getContext("2d");
364 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
369 * Generates interface elements for the Dygraph: a containing div, a div to
370 * display the current point, and a textbox to adjust the rolling average
371 * period. Also creates the Renderer/Layout elements.
374 Dygraph
.prototype.createInterface_
= function() {
375 // Create the all-enclosing graph div
376 var enclosing
= this.maindiv_
;
378 this.graphDiv
= document
.createElement("div");
379 this.graphDiv
.style
.width
= this.width_
+ "px";
380 this.graphDiv
.style
.height
= this.height_
+ "px";
381 enclosing
.appendChild(this.graphDiv
);
385 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
387 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
388 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
389 - 2 * this.attr_("axisTickSize");
390 this.clippingArea_
= clip
;
392 // Create the canvas for interactive parts of the chart.
393 this.canvas_
= Dygraph
.createCanvas();
394 this.canvas_
.style
.position
= "absolute";
395 this.canvas_
.width
= this.width_
;
396 this.canvas_
.height
= this.height_
;
397 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
398 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
400 // ... and for static parts of the chart.
401 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
403 // The interactive parts of the graph are drawn on top of the chart.
404 this.graphDiv
.appendChild(this.hidden_
);
405 this.graphDiv
.appendChild(this.canvas_
);
406 this.mouseEventElement_
= this.canvas_
;
408 // Make sure we don't overdraw.
409 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
410 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
413 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
414 dygraph
.mouseMove_(e
);
416 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
417 dygraph
.mouseOut_(e
);
420 // Create the grapher
421 // TODO(danvk): why does the Layout need its own set of options?
422 this.layoutOptions_
= { 'xOriginIsZero': false };
423 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
424 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
425 Dygraph
.update(this.layoutOptions_
, {
426 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
428 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
430 // TODO(danvk): why does the Renderer need its own set of options?
431 this.renderOptions_
= { colorScheme
: this.colors_
,
433 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
434 Dygraph
.update(this.renderOptions_
, this.attrs_
);
435 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
436 this.plotter_
= new DygraphCanvasRenderer(this,
437 this.hidden_
, this.layout_
,
438 this.renderOptions_
);
440 this.createStatusMessage_();
441 this.createRollInterface_();
442 this.createDragInterface_();
446 * Detach DOM elements in the dygraph and null out all data references.
447 * Calling this when you're done with a dygraph can dramatically reduce memory
448 * usage. See, e.g., the tests/perf.html example.
450 Dygraph
.prototype.destroy
= function() {
451 var removeRecursive
= function(node
) {
452 while (node
.hasChildNodes()) {
453 removeRecursive(node
.firstChild
);
454 node
.removeChild(node
.firstChild
);
457 removeRecursive(this.maindiv_
);
459 var nullOut
= function(obj
) {
461 if (typeof(obj
[n
]) === 'object') {
467 // These may not all be necessary, but it can't hurt...
468 nullOut(this.layout_
);
469 nullOut(this.plotter_
);
474 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
475 * this particular canvas. All Dygraph work is done on this.canvas_.
476 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
477 * @return {Object} The newly-created canvas
480 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
481 var h
= Dygraph
.createCanvas();
482 h
.style
.position
= "absolute";
483 // TODO(danvk): h should be offset from canvas. canvas needs to include
484 // some extra area to make it easier to zoom in on the far left and far
485 // right. h needs to be precisely the plot area, so that clipping occurs.
486 h
.style
.top
= canvas
.style
.top
;
487 h
.style
.left
= canvas
.style
.left
;
488 h
.width
= this.width_
;
489 h
.height
= this.height_
;
490 h
.style
.width
= this.width_
+ "px"; // for IE
491 h
.style
.height
= this.height_
+ "px"; // for IE
495 // Taken from MochiKit.Color
496 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
500 if (saturation
=== 0) {
505 var i
= Math
.floor(hue
* 6);
506 var f
= (hue
* 6) - i
;
507 var p
= value
* (1 - saturation
);
508 var q
= value
* (1 - (saturation
* f
));
509 var t
= value
* (1 - (saturation
* (1 - f
)));
511 case 1: red
= q
; green
= value
; blue
= p
; break;
512 case 2: red
= p
; green
= value
; blue
= t
; break;
513 case 3: red
= p
; green
= q
; blue
= value
; break;
514 case 4: red
= t
; green
= p
; blue
= value
; break;
515 case 5: red
= value
; green
= p
; blue
= q
; break;
516 case 6: // fall through
517 case 0: red
= value
; green
= t
; blue
= p
; break;
520 red
= Math
.floor(255 * red
+ 0.5);
521 green
= Math
.floor(255 * green
+ 0.5);
522 blue
= Math
.floor(255 * blue
+ 0.5);
523 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
528 * Generate a set of distinct colors for the data series. This is done with a
529 * color wheel. Saturation/Value are customizable, and the hue is
530 * equally-spaced around the color wheel. If a custom set of colors is
531 * specified, that is used instead.
534 Dygraph
.prototype.setColors_
= function() {
535 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
536 // away with this.renderOptions_.
537 var num
= this.attr_("labels").length
- 1;
539 var colors
= this.attr_('colors');
541 var sat
= this.attr_('colorSaturation') || 1.0;
542 var val
= this.attr_('colorValue') || 0.5;
543 var half
= Math
.ceil(num
/ 2);
544 for (var i
= 1; i
<= num
; i
++) {
545 if (!this.visibility()[i
-1]) continue;
546 // alternate colors for high contrast.
547 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
548 var hue
= (1.0 * idx
/ (1 + num
));
549 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
552 for (var i
= 0; i
< num
; i
++) {
553 if (!this.visibility()[i
]) continue;
554 var colorStr
= colors
[i
% colors
.length
];
555 this.colors_
.push(colorStr
);
559 // TODO(danvk): update this w/r
/t/ the
new options system
.
560 this.renderOptions_
.colorScheme
= this.colors_
;
561 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
562 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
563 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
567 * Return the list of colors. This is either the list of colors passed in the
568 * attributes, or the autogenerated list of rgb(r,g,b) strings.
569 * @return {Array<string>} The list of colors.
571 Dygraph
.prototype.getColors
= function() {
575 // The following functions are from quirksmode.org with a modification for Safari from
576 // http://blog.firetree.net/2005/07/04/javascript-find-position/
577 // http://www.quirksmode.org/js
/findpos
.html
578 Dygraph
.findPosX
= function(obj
) {
583 curleft
+= obj
.offsetLeft
;
584 if(!obj
.offsetParent
)
586 obj
= obj
.offsetParent
;
593 Dygraph
.findPosY
= function(obj
) {
598 curtop
+= obj
.offsetTop
;
599 if(!obj
.offsetParent
)
601 obj
= obj
.offsetParent
;
611 * Create the div that contains information on the selected point(s)
612 * This goes in the top right of the canvas, unless an external div has already
616 Dygraph
.prototype.createStatusMessage_
= function(){
617 if (!this.attr_("labelsDiv")) {
618 var divWidth
= this.attr_('labelsDivWidth');
620 "position": "absolute",
623 "width": divWidth
+ "px",
625 "left": (this.width_
- divWidth
- 2) + "px",
626 "background": "white",
628 "overflow": "hidden"};
629 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
630 var div
= document
.createElement("div");
631 for (var name
in messagestyle
) {
632 if (messagestyle
.hasOwnProperty(name
)) {
633 div
.style
[name
] = messagestyle
[name
];
636 this.graphDiv
.appendChild(div
);
637 this.attrs_
.labelsDiv
= div
;
642 * Create the text box to adjust the averaging period
643 * @return {Object} The newly-created text box
646 Dygraph
.prototype.createRollInterface_
= function() {
647 var display
= this.attr_('showRoller') ? "block" : "none";
648 var textAttr
= { "position": "absolute",
650 "top": (this.plotter_
.area
.h
- 25) + "px",
651 "left": (this.plotter_
.area
.x
+ 1) + "px",
654 var roller
= document
.createElement("input");
655 roller
.type
= "text";
657 roller
.value
= this.rollPeriod_
;
658 for (var name
in textAttr
) {
659 if (textAttr
.hasOwnProperty(name
)) {
660 roller
.style
[name
] = textAttr
[name
];
664 var pa
= this.graphDiv
;
665 pa
.appendChild(roller
);
667 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
671 // These functions are taken from MochiKit.Signal
672 Dygraph
.pageX
= function(e
) {
674 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
677 var b
= document
.body
;
679 (de
.scrollLeft
|| b
.scrollLeft
) -
680 (de
.clientLeft
|| 0);
684 Dygraph
.pageY
= function(e
) {
686 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
689 var b
= document
.body
;
691 (de
.scrollTop
|| b
.scrollTop
) -
697 * Set up all the mouse handlers needed to capture dragging behavior for zoom
701 Dygraph
.prototype.createDragInterface_
= function() {
704 // Tracks whether the mouse is down right now
705 var isZooming
= false;
706 var isPanning
= false;
707 var dragStartX
= null;
708 var dragStartY
= null;
712 var draggingDate
= null;
713 var dateRange
= null;
715 // Utility function to convert page-wide coordinates to canvas coords
718 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
719 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
721 // Draw zoom rectangles when the mouse is down and the user moves around
722 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
724 dragEndX
= getX(event
);
725 dragEndY
= getY(event
);
727 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
729 } else if (isPanning
) {
730 dragEndX
= getX(event
);
731 dragEndY
= getY(event
);
733 // Want to have it so that:
734 // 1. draggingDate appears at dragEndX
735 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
737 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
738 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
739 self
.drawGraph_(self
.rawData_
);
743 // Track the beginning of drag events
744 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
745 px
= Dygraph
.findPosX(self
.canvas_
);
746 py
= Dygraph
.findPosY(self
.canvas_
);
747 dragStartX
= getX(event
);
748 dragStartY
= getY(event
);
750 if (event
.altKey
|| event
.shiftKey
) {
751 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
753 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
754 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
761 // If the user releases the mouse button during a drag, but not over the
762 // canvas, then it doesn't count as a zooming action.
763 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
764 if (isZooming
|| isPanning
) {
777 // Temporarily cancel the dragging event when the mouse leaves the graph
778 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
785 // If the mouse is released on the canvas during a drag event, then it's a
786 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
787 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
790 dragEndX
= getX(event
);
791 dragEndY
= getY(event
);
792 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
793 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
795 if (regionWidth
< 2 && regionHeight
< 2 &&
796 self
.attr_('clickCallback') != null &&
797 self
.lastx_
!= undefined
) {
798 // TODO(danvk): pass along more info about the points.
799 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
802 if (regionWidth
>= 10) {
803 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
804 Math
.max(dragStartX
, dragEndX
));
806 self
.canvas_
.getContext("2d").clearRect(0, 0,
808 self
.canvas_
.height
);
822 // Double-clicking zooms back out
823 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
824 if (self
.dateWindow_
== null) return;
825 self
.dateWindow_
= null;
826 self
.drawGraph_(self
.rawData_
);
827 var minDate
= self
.rawData_
[0][0];
828 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
829 if (self
.attr_("zoomCallback")) {
830 self
.attr_("zoomCallback")(minDate
, maxDate
);
836 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
837 * up any previous zoom rectangles that were drawn. This could be optimized to
838 * avoid extra redrawing, but it's tricky to avoid interactions with the status
840 * @param {Number} startX The X position where the drag started, in canvas
842 * @param {Number} endX The current X position of the drag, in canvas coords.
843 * @param {Number} prevEndX The value of endX on the previous call to this
844 * function. Used to avoid excess redrawing
847 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
848 var ctx
= this.canvas_
.getContext("2d");
850 // Clean up from the previous rect if necessary
852 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
853 Math
.abs(startX
- prevEndX
), this.height_
);
856 // Draw a light-grey rectangle to show the new viewing area
857 if (endX
&& startX
) {
858 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
859 ctx
.fillRect(Math
.min(startX
, endX
), 0,
860 Math
.abs(endX
- startX
), this.height_
);
865 * Zoom to something containing [lowX, highX]. These are pixel coordinates
866 * in the canvas. The exact zoom window may be slightly larger if there are no
867 * data points near lowX or highX. This function redraws the graph.
868 * @param {Number} lowX The leftmost pixel value that should be visible.
869 * @param {Number} highX The rightmost pixel value that should be visible.
872 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
873 // Find the earliest and latest dates contained in this canvasx range.
874 var r
= this.toDataCoords(lowX
, null);
876 r
= this.toDataCoords(highX
, null);
879 this.dateWindow_
= [minDate
, maxDate
];
880 this.drawGraph_(this.rawData_
);
881 if (this.attr_("zoomCallback")) {
882 this.attr_("zoomCallback")(minDate
, maxDate
);
887 * When the mouse moves in the canvas, display information about a nearby data
888 * point and draw dots over those points in the data series. This function
889 * takes care of cleanup of previously-drawn dots.
890 * @param {Object} event The mousemove event from the browser.
893 Dygraph
.prototype.mouseMove_
= function(event
) {
894 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
895 var points
= this.layout_
.points
;
900 // Loop through all the points and find the date nearest to our current
902 var minDist
= 1e+100;
904 for (var i
= 0; i
< points
.length
; i
++) {
905 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
906 if (dist
> minDist
) continue;
910 if (idx
>= 0) lastx
= points
[idx
].xval
;
911 // Check that you can really highlight the last day's data
912 if (canvasx
> points
[points
.length
-1].canvasx
)
913 lastx
= points
[points
.length
-1].xval
;
915 // Extract the points we've selected
916 this.selPoints_
= [];
917 var l
= points
.length
;
918 if (!this.attr_("stackedGraph")) {
919 for (var i
= 0; i
< l
; i
++) {
920 if (points
[i
].xval
== lastx
) {
921 this.selPoints_
.push(points
[i
]);
925 // Need to 'unstack' points starting from the bottom
926 var cumulative_sum
= 0;
927 for (var i
= l
- 1; i
>= 0; i
--) {
928 if (points
[i
].xval
== lastx
) {
929 var p
= {}; // Clone the point since we modify it
930 for (var k
in points
[i
]) {
933 p
.yval
-= cumulative_sum
;
934 cumulative_sum
+= p
.yval
;
935 this.selPoints_
.push(p
);
938 this.selPoints_
.reverse();
941 if (this.attr_("highlightCallback")) {
942 var px
= this.lastx_
;
943 if (px
!== null && lastx
!= px
) {
944 // only fire if the selected point has changed.
945 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
949 // Save last x position for callbacks.
952 this.updateSelection_();
956 * Draw dots over the selectied points in the data series. This function
957 * takes care of cleanup of previously-drawn dots.
960 Dygraph
.prototype.updateSelection_
= function() {
961 // Clear the previously drawn vertical, if there is one
962 var circleSize
= this.attr_('highlightCircleSize');
963 var ctx
= this.canvas_
.getContext("2d");
964 if (this.previousVerticalX_
>= 0) {
965 var px
= this.previousVerticalX_
;
966 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
969 var isOK
= function(x
) { return x
&& !isNaN(x
); };
971 if (this.selPoints_
.length
> 0) {
972 var canvasx
= this.selPoints_
[0].canvasx
;
974 // Set the status message to indicate the selected point(s)
975 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
976 var fmtFunc
= this.attr_('yValueFormatter');
977 var clen
= this.colors_
.length
;
979 if (this.attr_('showLabelsOnHighlight')) {
980 // Set the status message to indicate the selected point(s)
981 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
982 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
983 if (this.attr_("labelsSeparateLines")) {
986 var point
= this.selPoints_
[i
];
987 var c
= new RGBColor(this.colors_
[i
%clen
]);
988 var yval
= fmtFunc(point
.yval
);
989 replace
+= " <b><font color='" + c
.toHex() + "'>"
990 + point
.name
+ "</font></b>:"
994 this.attr_("labelsDiv").innerHTML
= replace
;
997 // Draw colored circles over the center of each selected point
999 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1000 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1002 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1003 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1004 0, 2 * Math
.PI
, false);
1009 this.previousVerticalX_
= canvasx
;
1014 * Set manually set selected dots, and display information about them
1015 * @param int row number that should by highlighted
1016 * false value clears the selection
1019 Dygraph
.prototype.setSelection
= function(row
) {
1020 // Extract the points we've selected
1021 this.selPoints_
= [];
1024 if (row
!== false) {
1025 row
= row
-this.boundaryIds_
[0][0];
1028 if (row
!== false && row
>= 0) {
1029 for (var i
in this.layout_
.datasets
) {
1030 if (row
< this.layout_
.datasets
[i
].length
) {
1031 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1033 pos
+= this.layout_
.datasets
[i
].length
;
1037 if (this.selPoints_
.length
) {
1038 this.lastx_
= this.selPoints_
[0].xval
;
1039 this.updateSelection_();
1042 this.clearSelection();
1048 * The mouse has left the canvas. Clear out whatever artifacts remain
1049 * @param {Object} event the mouseout event from the browser.
1052 Dygraph
.prototype.mouseOut_
= function(event
) {
1053 if (this.attr_("unhighlightCallback")) {
1054 this.attr_("unhighlightCallback")(event
);
1057 if (this.attr_("hideOverlayOnMouseOut")) {
1058 this.clearSelection();
1063 * Remove all selection from the canvas
1066 Dygraph
.prototype.clearSelection
= function() {
1067 // Get rid of the overlay data
1068 var ctx
= this.canvas_
.getContext("2d");
1069 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1070 this.attr_("labelsDiv").innerHTML
= "";
1071 this.selPoints_
= [];
1076 * Returns the number of the currently selected row
1077 * @return int row number, of -1 if nothing is selected
1080 Dygraph
.prototype.getSelection
= function() {
1081 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1085 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1086 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1087 return row
+ this.boundaryIds_
[0][0];
1093 Dygraph
.zeropad
= function(x
) {
1094 if (x
< 10) return "0" + x
; else return "" + x
;
1098 * Return a string version of the hours, minutes and seconds portion of a date.
1099 * @param {Number} date The JavaScript date (ms since epoch)
1100 * @return {String} A time of the form "HH:MM:SS"
1103 Dygraph
.hmsString_
= function(date
) {
1104 var zeropad
= Dygraph
.zeropad
;
1105 var d
= new Date(date
);
1106 if (d
.getSeconds()) {
1107 return zeropad(d
.getHours()) + ":" +
1108 zeropad(d
.getMinutes()) + ":" +
1109 zeropad(d
.getSeconds());
1111 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1116 * Convert a JS date to a string appropriate to display on an axis that
1117 * is displaying values at the stated granularity.
1118 * @param {Date} date The date to format
1119 * @param {Number} granularity One of the Dygraph granularity constants
1120 * @return {String} The formatted date
1123 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1124 if (granularity
>= Dygraph
.MONTHLY
) {
1125 return date
.strftime('%b %y');
1127 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1128 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1129 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1131 return Dygraph
.hmsString_(date
.getTime());
1137 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1138 * @param {Number} date The JavaScript date (ms since epoch)
1139 * @return {String} A date of the form "YYYY/MM/DD"
1142 Dygraph
.dateString_
= function(date
, self
) {
1143 var zeropad
= Dygraph
.zeropad
;
1144 var d
= new Date(date
);
1147 var year
= "" + d
.getFullYear();
1148 // Get a 0 padded month string
1149 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1150 // Get a 0 padded day string
1151 var day
= zeropad(d
.getDate());
1154 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1155 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1157 return year
+ "/" + month + "/" + day
+ ret
;
1161 * Round a number to the specified number of digits past the decimal point.
1162 * @param {Number} num The number to round
1163 * @param {Number} places The number of decimals to which to round
1164 * @return {Number} The rounded number
1167 Dygraph
.round_
= function(num
, places
) {
1168 var shift
= Math
.pow(10, places
);
1169 return Math
.round(num
* shift
)/shift
;
1173 * Fires when there's data available to be graphed.
1174 * @param {String} data Raw CSV data to be plotted
1177 Dygraph
.prototype.loadedEvent_
= function(data
) {
1178 this.rawData_
= this.parseCSV_(data
);
1179 this.drawGraph_(this.rawData_
);
1182 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1183 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1184 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1187 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1190 Dygraph
.prototype.addXTicks_
= function() {
1191 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1192 var startDate
, endDate
;
1193 if (this.dateWindow_
) {
1194 startDate
= this.dateWindow_
[0];
1195 endDate
= this.dateWindow_
[1];
1197 startDate
= this.rawData_
[0][0];
1198 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1201 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1202 this.layout_
.updateOptions({xTicks
: xTicks
});
1205 // Time granularity enumeration
1206 Dygraph
.SECONDLY
= 0;
1207 Dygraph
.TWO_SECONDLY
= 1;
1208 Dygraph
.FIVE_SECONDLY
= 2;
1209 Dygraph
.TEN_SECONDLY
= 3;
1210 Dygraph
.THIRTY_SECONDLY
= 4;
1211 Dygraph
.MINUTELY
= 5;
1212 Dygraph
.TWO_MINUTELY
= 6;
1213 Dygraph
.FIVE_MINUTELY
= 7;
1214 Dygraph
.TEN_MINUTELY
= 8;
1215 Dygraph
.THIRTY_MINUTELY
= 9;
1216 Dygraph
.HOURLY
= 10;
1217 Dygraph
.TWO_HOURLY
= 11;
1218 Dygraph
.SIX_HOURLY
= 12;
1220 Dygraph
.WEEKLY
= 14;
1221 Dygraph
.MONTHLY
= 15;
1222 Dygraph
.QUARTERLY
= 16;
1223 Dygraph
.BIANNUAL
= 17;
1224 Dygraph
.ANNUAL
= 18;
1225 Dygraph
.DECADAL
= 19;
1226 Dygraph
.NUM_GRANULARITIES
= 20;
1228 Dygraph
.SHORT_SPACINGS
= [];
1229 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1230 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1231 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1232 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1233 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1234 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1235 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1236 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1237 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1238 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1239 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1240 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1241 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1242 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1243 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1247 // If we used this time granularity, how many ticks would there be?
1248 // This is only an approximation, but it's generally good enough.
1250 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1251 if (granularity
< Dygraph
.MONTHLY
) {
1252 // Generate one tick mark for every fixed interval of time.
1253 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1254 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1256 var year_mod
= 1; // e.g. to only print one point every 10 years.
1257 var num_months
= 12;
1258 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1259 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1260 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1261 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1263 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1264 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1265 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1271 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1272 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1274 // Returns an array containing {v: millis, label: label} dictionaries.
1276 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1277 var formatter
= this.attr_("xAxisLabelFormatter");
1279 if (granularity
< Dygraph
.MONTHLY
) {
1280 // Generate one tick mark for every fixed interval of time.
1281 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1282 var format
= '%d%b'; // e.g. "1Jan"
1284 // Find a time less than start_time which occurs on a "nice" time boundary
1285 // for this granularity.
1286 var g
= spacing
/ 1000;
1287 var d
= new Date(start_time
);
1288 if (g
<= 60) { // seconds
1289 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1293 if (g
<= 60) { // minutes
1294 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1299 if (g
<= 24) { // days
1300 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1305 if (g
== 7) { // one week
1306 d
.setDate(d
.getDate() - d
.getDay());
1311 start_time
= d
.getTime();
1313 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1314 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1317 // Display a tick mark on the first of a set of months of each year.
1318 // Years get a tick mark iff y % year_mod == 0. This is useful for
1319 // displaying a tick mark once every 10 years, say, on long time scales.
1321 var year_mod
= 1; // e.g. to only print one point every 10 years.
1323 if (granularity
== Dygraph
.MONTHLY
) {
1324 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1325 } else if (granularity
== Dygraph
.QUARTERLY
) {
1326 months
= [ 0, 3, 6, 9 ];
1327 } else if (granularity
== Dygraph
.BIANNUAL
) {
1329 } else if (granularity
== Dygraph
.ANNUAL
) {
1331 } else if (granularity
== Dygraph
.DECADAL
) {
1336 var start_year
= new Date(start_time
).getFullYear();
1337 var end_year
= new Date(end_time
).getFullYear();
1338 var zeropad
= Dygraph
.zeropad
;
1339 for (var i
= start_year
; i
<= end_year
; i
++) {
1340 if (i
% year_mod
!= 0) continue;
1341 for (var j
= 0; j
< months
.length
; j
++) {
1342 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1343 var t
= Date
.parse(date_str
);
1344 if (t
< start_time
|| t
> end_time
) continue;
1345 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1355 * Add ticks to the x-axis based on a date range.
1356 * @param {Number} startDate Start of the date window (millis since epoch)
1357 * @param {Number} endDate End of the date window (millis since epoch)
1358 * @return {Array.<Object>} Array of {label, value} tuples.
1361 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1363 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1364 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1365 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1372 return self
.GetXAxis(startDate
, endDate
, chosen
);
1374 // TODO(danvk): signal error.
1379 * Add ticks when the x axis has numbers on it (instead of dates)
1380 * @param {Number} startDate Start of the date window (millis since epoch)
1381 * @param {Number} endDate End of the date window (millis since epoch)
1383 * @param {function} formatter: Optional formatter to use for each tick value
1384 * @return {Array.<Object>} Array of {label, value} tuples.
1387 Dygraph
.numericTicks
= function(minV
, maxV
, self
, formatter
) {
1389 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1390 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1391 // The first spacing greater than pixelsPerYLabel is what we use.
1392 // TODO(danvk): version that works on a log scale.
1393 if (self
.attr_("labelsKMG2")) {
1394 var mults
= [1, 2, 4, 8];
1396 var mults
= [1, 2, 5];
1398 var scale
, low_val
, high_val
, nTicks
;
1399 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1400 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1401 for (var i
= -10; i
< 50; i
++) {
1402 if (self
.attr_("labelsKMG2")) {
1403 var base_scale
= Math
.pow(16, i
);
1405 var base_scale
= Math
.pow(10, i
);
1407 for (var j
= 0; j
< mults
.length
; j
++) {
1408 scale
= base_scale
* mults
[j
];
1409 low_val
= Math
.floor(minV
/ scale
) * scale
;
1410 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1411 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1412 var spacing
= self
.height_
/ nTicks
;
1413 // wish I could break out of both loops at once...
1414 if (spacing
> pixelsPerTick
) break;
1416 if (spacing
> pixelsPerTick
) break;
1419 // Construct labels for the ticks
1423 if (self
.attr_("labelsKMB")) {
1425 k_labels
= [ "K", "M", "B", "T" ];
1427 if (self
.attr_("labelsKMG2")) {
1428 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1430 k_labels
= [ "k", "M", "G", "T" ];
1433 // Allow reverse y-axis if it's explicitly requested.
1434 if (low_val
> high_val
) scale
*= -1;
1436 for (var i
= 0; i
< nTicks
; i
++) {
1437 var tickV
= low_val
+ i
* scale
;
1438 var absTickV
= Math
.abs(tickV
);
1440 if (formatter
!= undefined
) {
1441 label
= formatter(tickV
);
1443 label
= Dygraph
.round_(tickV
, 2);
1445 if (k_labels
.length
) {
1446 // Round up to an appropriate unit.
1448 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1449 if (absTickV
>= n
) {
1450 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1455 ticks
.push( {label
: label
, v
: tickV
} );
1461 * Adds appropriate ticks on the y-axis
1462 * @param {Number} minY The minimum Y value in the data set
1463 * @param {Number} maxY The maximum Y value in the data set
1466 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1467 // Set the number of ticks so that the labels are human-friendly.
1468 // TODO(danvk): make this an attribute as well.
1469 var formatter
= this.attr_('yAxisLabelFormatter') ? this.attr_('yAxisLabelFormatter') : this.attr_('yValueFormatter');
1470 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this, formatter
);
1471 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1475 // Computes the range of the data series (including confidence intervals).
1476 // series is either [ [x1, y1], [x2, y2], ... ] or
1477 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1478 // Returns [low, high]
1479 Dygraph
.prototype.extremeValues_
= function(series
) {
1480 var minY
= null, maxY
= null;
1482 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1484 // With custom bars, maxY is the max of the high values.
1485 for (var j
= 0; j
< series
.length
; j
++) {
1486 var y
= series
[j
][1][0];
1488 var low
= y
- series
[j
][1][1];
1489 var high
= y
+ series
[j
][1][2];
1490 if (low
> y
) low
= y
; // this can happen with custom bars,
1491 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1492 if (maxY
== null || high
> maxY
) {
1495 if (minY
== null || low
< minY
) {
1500 for (var j
= 0; j
< series
.length
; j
++) {
1501 var y
= series
[j
][1];
1502 if (y
=== null || isNaN(y
)) continue;
1503 if (maxY
== null || y
> maxY
) {
1506 if (minY
== null || y
< minY
) {
1512 return [minY
, maxY
];
1516 * Update the graph with new data. Data is in the format
1517 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1518 * or, if errorBars=true,
1519 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1520 * @param {Array.<Object>} data The data (see above)
1523 Dygraph
.prototype.drawGraph_
= function(data
) {
1524 // This is used to set the second parameter to drawCallback, below.
1525 var is_initial_draw
= this.is_initial_draw_
;
1526 this.is_initial_draw_
= false;
1528 var minY
= null, maxY
= null;
1529 this.layout_
.removeAllDatasets();
1531 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1533 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1535 // Loop over the fields (series). Go from the last to the first,
1536 // because if they're stacked that's how we accumulate the values.
1538 var cumulative_y
= []; // For stacked series.
1541 // Loop over all fields and create datasets
1542 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1543 if (!this.visibility()[i
- 1]) continue;
1546 for (var j
= 0; j
< data
.length
; j
++) {
1547 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1548 var date
= data
[j
][0];
1549 series
.push([date
, data
[j
][i
]]);
1552 series
= this.rollingAverage(series
, this.rollPeriod_
);
1554 // Prune down to the desired range, if necessary (for zooming)
1555 // Because there can be lines going to points outside of the visible area,
1556 // we actually prune to visible points, plus one on either side.
1557 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1558 if (this.dateWindow_
) {
1559 var low
= this.dateWindow_
[0];
1560 var high
= this.dateWindow_
[1];
1562 // TODO(danvk): do binary search instead of linear search.
1563 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1564 var firstIdx
= null, lastIdx
= null;
1565 for (var k
= 0; k
< series
.length
; k
++) {
1566 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1569 if (series
[k
][0] <= high
) {
1573 if (firstIdx
=== null) firstIdx
= 0;
1574 if (firstIdx
> 0) firstIdx
--;
1575 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1576 if (lastIdx
< series
.length
- 1) lastIdx
++;
1577 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1578 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1579 pruned
.push(series
[k
]);
1583 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1586 var extremes
= this.extremeValues_(series
);
1587 var thisMinY
= extremes
[0];
1588 var thisMaxY
= extremes
[1];
1589 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1590 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1593 for (var j
=0; j
<series
.length
; j
++) {
1594 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1597 } else if (this.attr_("stackedGraph")) {
1598 var l
= series
.length
;
1600 for (var j
= 0; j
< l
; j
++) {
1601 // If one data set has a NaN, let all subsequent stacked
1602 // sets inherit the NaN -- only start at 0 for the first set.
1603 var x
= series
[j
][0];
1604 if (cumulative_y
[x
] === undefined
)
1605 cumulative_y
[x
] = 0;
1607 actual_y
= series
[j
][1];
1608 cumulative_y
[x
] += actual_y
;
1610 series
[j
] = [x
, cumulative_y
[x
]]
1612 if (!maxY
|| cumulative_y
[x
] > maxY
)
1613 maxY
= cumulative_y
[x
];
1617 datasets
[i
] = series
;
1620 for (var i
= 1; i
< datasets
.length
; i
++) {
1621 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1624 // Use some heuristics to come up with a good maxY value, unless it's been
1625 // set explicitly by the user.
1626 if (this.valueRange_
!= null) {
1627 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1628 this.displayedYRange_
= this.valueRange_
;
1630 // This affects the calculation of span, below.
1631 if (this.attr_("includeZero") && minY
> 0) {
1635 // Add some padding and round up to an integer to be human-friendly.
1636 var span
= maxY
- minY
;
1637 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1638 if (span
== 0) { span
= maxY
; }
1639 var maxAxisY
= maxY
+ 0.1 * span
;
1640 var minAxisY
= minY
- 0.1 * span
;
1642 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1643 if (!this.attr_("avoidMinZero")) {
1644 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1645 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1648 if (this.attr_("includeZero")) {
1649 if (maxY
< 0) maxAxisY
= 0;
1650 if (minY
> 0) minAxisY
= 0;
1653 this.addYTicks_(minAxisY
, maxAxisY
);
1654 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1659 // Tell PlotKit to use this new data and render itself
1660 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1661 this.layout_
.evaluateWithError();
1662 this.plotter_
.clear();
1663 this.plotter_
.render();
1664 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1665 this.canvas_
.height
);
1667 if (this.attr_("drawCallback") !== null) {
1668 this.attr_("drawCallback")(this, is_initial_draw
);
1673 * Calculates the rolling average of a data set.
1674 * If originalData is [label, val], rolls the average of those.
1675 * If originalData is [label, [, it's interpreted as [value, stddev]
1676 * and the roll is returned in the same form, with appropriately reduced
1677 * stddev for each value.
1678 * Note that this is where fractional input (i.e. '5/10') is converted into
1680 * @param {Array} originalData The data in the appropriate format (see above)
1681 * @param {Number} rollPeriod The number of days over which to average the data
1683 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1684 if (originalData
.length
< 2)
1685 return originalData
;
1686 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1687 var rollingData
= [];
1688 var sigma
= this.attr_("sigma");
1690 if (this.fractions_
) {
1692 var den
= 0; // numerator/denominator
1694 for (var i
= 0; i
< originalData
.length
; i
++) {
1695 num
+= originalData
[i
][1][0];
1696 den
+= originalData
[i
][1][1];
1697 if (i
- rollPeriod
>= 0) {
1698 num
-= originalData
[i
- rollPeriod
][1][0];
1699 den
-= originalData
[i
- rollPeriod
][1][1];
1702 var date
= originalData
[i
][0];
1703 var value
= den
? num
/ den
: 0.0;
1704 if (this.attr_("errorBars")) {
1705 if (this.wilsonInterval_
) {
1706 // For more details on this confidence interval, see:
1707 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1709 var p
= value
< 0 ? 0 : value
, n
= den
;
1710 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1711 var denom
= 1 + sigma
* sigma
/ den
;
1712 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1713 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1714 rollingData
[i
] = [date
,
1715 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1717 rollingData
[i
] = [date
, [0, 0, 0]];
1720 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1721 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1724 rollingData
[i
] = [date
, mult
* value
];
1727 } else if (this.attr_("customBars")) {
1732 for (var i
= 0; i
< originalData
.length
; i
++) {
1733 var data
= originalData
[i
][1];
1735 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1737 if (y
!= null && !isNaN(y
)) {
1743 if (i
- rollPeriod
>= 0) {
1744 var prev
= originalData
[i
- rollPeriod
];
1745 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1752 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1753 1.0 * (mid
- low
) / count
,
1754 1.0 * (high
- mid
) / count
]];
1757 // Calculate the rolling average for the first rollPeriod - 1 points where
1758 // there is not enough data to roll over the full number of days
1759 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1760 if (!this.attr_("errorBars")){
1761 if (rollPeriod
== 1) {
1762 return originalData
;
1765 for (var i
= 0; i
< originalData
.length
; i
++) {
1768 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1769 var y
= originalData
[j
][1];
1770 if (y
== null || isNaN(y
)) continue;
1772 sum
+= originalData
[j
][1];
1775 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1777 rollingData
[i
] = [originalData
[i
][0], null];
1782 for (var i
= 0; i
< originalData
.length
; i
++) {
1786 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1787 var y
= originalData
[j
][1][0];
1788 if (y
== null || isNaN(y
)) continue;
1790 sum
+= originalData
[j
][1][0];
1791 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1794 var stddev
= Math
.sqrt(variance
) / num_ok
;
1795 rollingData
[i
] = [originalData
[i
][0],
1796 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1798 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1808 * Parses a date, returning the number of milliseconds since epoch. This can be
1809 * passed in as an xValueParser in the Dygraph constructor.
1810 * TODO(danvk): enumerate formats that this understands.
1811 * @param {String} A date in YYYYMMDD format.
1812 * @return {Number} Milliseconds since epoch.
1815 Dygraph
.dateParser
= function(dateStr
, self
) {
1818 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1819 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1820 while (dateStrSlashed
.search("-") != -1) {
1821 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1823 d
= Date
.parse(dateStrSlashed
);
1824 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1825 // TODO(danvk): remove support for this format. It's confusing.
1826 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1827 + "/" + dateStr
.substr(6,2);
1828 d
= Date
.parse(dateStrSlashed
);
1830 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1831 // "2009/07/12 12:34:56"
1832 d
= Date
.parse(dateStr
);
1835 if (!d
|| isNaN(d
)) {
1836 self
.error("Couldn't parse " + dateStr
+ " as a date");
1842 * Detects the type of the str (date or numeric) and sets the various
1843 * formatting attributes in this.attrs_ based on this type.
1844 * @param {String} str An x value.
1847 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1849 if (str
.indexOf('-') >= 0 ||
1850 str
.indexOf('/') >= 0 ||
1851 isNaN(parseFloat(str
))) {
1853 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1854 // TODO(danvk): remove support for this format.
1859 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1860 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1861 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1862 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
1864 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1865 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1866 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1867 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
1872 * Parses a string in a special csv format. We expect a csv file where each
1873 * line is a date point, and the first field in each line is the date string.
1874 * We also expect that all remaining fields represent series.
1875 * if the errorBars attribute is set, then interpret the fields as:
1876 * date, series1, stddev1, series2, stddev2, ...
1877 * @param {Array.<Object>} data See above.
1880 * @return Array.<Object> An array with one entry for each row. These entries
1881 * are an array of cells in that row. The first entry is the parsed x-value for
1882 * the row. The second, third, etc. are the y-values. These can take on one of
1883 * three forms, depending on the CSV and constructor parameters:
1885 * 2. [ value, stddev ]
1886 * 3. [ low value, center value, high value ]
1888 Dygraph
.prototype.parseCSV_
= function(data
) {
1890 var lines
= data
.split("\n");
1892 // Use the default delimiter or fall back to a tab if that makes sense.
1893 var delim
= this.attr_('delimiter');
1894 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1899 if (this.labelsFromCSV_
) {
1901 this.attrs_
.labels
= lines
[0].split(delim
);
1905 var defaultParserSet
= false; // attempt to auto-detect x value type
1906 var expectedCols
= this.attr_("labels").length
;
1907 var outOfOrder
= false;
1908 for (var i
= start
; i
< lines
.length
; i
++) {
1909 var line
= lines
[i
];
1910 if (line
.length
== 0) continue; // skip blank lines
1911 if (line
[0] == '#') continue; // skip comment lines
1912 var inFields
= line
.split(delim
);
1913 if (inFields
.length
< 2) continue;
1916 if (!defaultParserSet
) {
1917 this.detectTypeFromString_(inFields
[0]);
1918 xParser
= this.attr_("xValueParser");
1919 defaultParserSet
= true;
1921 fields
[0] = xParser(inFields
[0], this);
1923 // If fractions are expected, parse the numbers as "A/B
"
1924 if (this.fractions_) {
1925 for (var j = 1; j < inFields.length; j++) {
1926 // TODO(danvk): figure out an appropriate way to flag parse errors.
1927 var vals = inFields[j].split("/");
1928 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1930 } else if (this.attr_("errorBars
")) {
1931 // If there are error bars, values are (value, stddev) pairs
1932 for (var j = 1; j < inFields.length; j += 2)
1933 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1934 parseFloat(inFields[j + 1])];
1935 } else if (this.attr_("customBars
")) {
1936 // Bars are a low;center;high tuple
1937 for (var j = 1; j < inFields.length; j++) {
1938 var vals = inFields[j].split(";");
1939 fields[j] = [ parseFloat(vals[0]),
1940 parseFloat(vals[1]),
1941 parseFloat(vals[2]) ];
1944 // Values are just numbers
1945 for (var j = 1; j < inFields.length; j++) {
1946 fields[j] = parseFloat(inFields[j]);
1949 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1954 if (fields.length != expectedCols) {
1955 this.error("Number of columns
in line
" + i + " (" + fields.length +
1956 ") does not agree
with number of
labels (" + expectedCols +
1962 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1963 ret.sort(function(a,b) { return a[0] - b[0] });
1970 * The user has provided their data as a pre-packaged JS array. If the x values
1971 * are numeric, this is the same as dygraphs' internal format. If the x values
1972 * are dates, we need to convert them from Date objects to ms since epoch.
1973 * @param {Array.<Object>} data
1974 * @return {Array.<Object>} data with numeric x values.
1976 Dygraph.prototype.parseArray_ = function(data) {
1977 // Peek at the first x value to see if it's numeric.
1978 if (data.length == 0) {
1979 this.error("Can
't plot empty data set");
1982 if (data[0].length == 0) {
1983 this.error("Data set cannot contain an empty row");
1987 if (this.attr_("labels") == null) {
1988 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1989 "in the options parameter");
1990 this.attrs_.labels = [ "X" ];
1991 for (var i = 1; i < data[0].length; i++) {
1992 this.attrs_.labels.push("Y" + i);
1996 if (Dygraph.isDateLike(data[0][0])) {
1997 // Some intelligent defaults for a date x-axis.
1998 this.attrs_.xValueFormatter = Dygraph.dateString_;
1999 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2000 this.attrs_.xTicker = Dygraph.dateTicker;
2002 // Assume they're all dates
.
2003 var parsedData
= Dygraph
.clone(data
);
2004 for (var i
= 0; i
< data
.length
; i
++) {
2005 if (parsedData
[i
].length
== 0) {
2006 this.error("Row " << (1 + i
) << " of data is empty");
2009 if (parsedData
[i
][0] == null
2010 || typeof(parsedData
[i
][0].getTime
) != 'function'
2011 || isNaN(parsedData
[i
][0].getTime())) {
2012 this.error("x value in row " + (1 + i
) + " is not a Date");
2015 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2019 // Some intelligent defaults for a numeric x-axis.
2020 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2021 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2027 * Parses a DataTable object from gviz.
2028 * The data is expected to have a first column that is either a date or a
2029 * number. All subsequent columns must be numbers. If there is a clear mismatch
2030 * between this.xValueParser_ and the type of the first column, it will be
2031 * fixed. Returned value is in the same format as return value of parseCSV_.
2032 * @param {Array.<Object>} data See above.
2035 Dygraph
.prototype.parseDataTable_
= function(data
) {
2036 var cols
= data
.getNumberOfColumns();
2037 var rows
= data
.getNumberOfRows();
2039 // Read column labels
2041 for (var i
= 0; i
< cols
; i
++) {
2042 labels
.push(data
.getColumnLabel(i
));
2043 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
2045 this.attrs_
.labels
= labels
;
2046 cols
= labels
.length
;
2048 var indepType
= data
.getColumnType(0);
2049 if (indepType
== 'date' || indepType
== 'datetime') {
2050 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2051 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2052 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2053 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2054 } else if (indepType
== 'number') {
2055 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2056 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2057 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2058 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2060 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2061 "column 1 of DataTable input (Got '" + indepType
+ "')");
2066 var outOfOrder
= false;
2067 for (var i
= 0; i
< rows
; i
++) {
2069 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2070 data
.getValue(i
, 0) === null) {
2071 this.warning("Ignoring row " + i
+
2072 " of DataTable because of undefined or null first column.");
2076 if (indepType
== 'date' || indepType
== 'datetime') {
2077 row
.push(data
.getValue(i
, 0).getTime());
2079 row
.push(data
.getValue(i
, 0));
2081 if (!this.attr_("errorBars")) {
2082 for (var j
= 1; j
< cols
; j
++) {
2083 row
.push(data
.getValue(i
, j
));
2086 for (var j
= 0; j
< cols
- 1; j
++) {
2087 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2090 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2097 this.warn("DataTable is out of order; order it correctly to speed loading.");
2098 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2103 // These functions are all based on MochiKit.
2104 Dygraph
.update
= function (self
, o
) {
2105 if (typeof(o
) != 'undefined' && o
!== null) {
2107 if (o
.hasOwnProperty(k
)) {
2115 Dygraph
.isArrayLike
= function (o
) {
2116 var typ
= typeof(o
);
2118 (typ
!= 'object' && !(typ
== 'function' &&
2119 typeof(o
.item
) == 'function')) ||
2121 typeof(o
.length
) != 'number' ||
2129 Dygraph
.isDateLike
= function (o
) {
2130 if (typeof(o
) != "object" || o
=== null ||
2131 typeof(o
.getTime
) != 'function') {
2137 Dygraph
.clone
= function(o
) {
2138 // TODO(danvk): figure out how MochiKit's version works
2140 for (var i
= 0; i
< o
.length
; i
++) {
2141 if (Dygraph
.isArrayLike(o
[i
])) {
2142 r
.push(Dygraph
.clone(o
[i
]));
2152 * Get the CSV data. If it's in a function, call that function. If it's in a
2153 * file, do an XMLHttpRequest to get it.
2156 Dygraph
.prototype.start_
= function() {
2157 if (typeof this.file_
== 'function') {
2158 // CSV string. Pretend we got it via XHR.
2159 this.loadedEvent_(this.file_());
2160 } else if (Dygraph
.isArrayLike(this.file_
)) {
2161 this.rawData_
= this.parseArray_(this.file_
);
2162 this.drawGraph_(this.rawData_
);
2163 } else if (typeof this.file_
== 'object' &&
2164 typeof this.file_
.getColumnRange
== 'function') {
2165 // must be a DataTable from gviz.
2166 this.rawData_
= this.parseDataTable_(this.file_
);
2167 this.drawGraph_(this.rawData_
);
2168 } else if (typeof this.file_
== 'string') {
2169 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2170 if (this.file_
.indexOf('\n') >= 0) {
2171 this.loadedEvent_(this.file_
);
2173 var req
= new XMLHttpRequest();
2175 req
.onreadystatechange
= function () {
2176 if (req
.readyState
== 4) {
2177 if (req
.status
== 200) {
2178 caller
.loadedEvent_(req
.responseText
);
2183 req
.open("GET", this.file_
, true);
2187 this.error("Unknown data format: " + (typeof this.file_
));
2192 * Changes various properties of the graph. These can include:
2194 * <li>file: changes the source data for the graph</li>
2195 * <li>errorBars: changes whether the data contains stddev</li>
2197 * @param {Object} attrs The new properties and values
2199 Dygraph
.prototype.updateOptions
= function(attrs
) {
2200 // TODO(danvk): this is a mess. Rethink this function.
2201 if (attrs
.rollPeriod
) {
2202 this.rollPeriod_
= attrs
.rollPeriod
;
2204 if (attrs
.dateWindow
) {
2205 this.dateWindow_
= attrs
.dateWindow
;
2207 if (attrs
.valueRange
) {
2208 this.valueRange_
= attrs
.valueRange
;
2210 Dygraph
.update(this.user_attrs_
, attrs
);
2212 this.labelsFromCSV_
= (this.attr_("labels") == null);
2214 // TODO(danvk): this doesn't match the constructor logic
2215 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2216 if (attrs
['file']) {
2217 this.file_
= attrs
['file'];
2220 this.drawGraph_(this.rawData_
);
2225 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2226 * containing div (which has presumably changed size since the dygraph was
2227 * instantiated. If the width/height are specified, the div will be resized.
2229 * This is far more efficient than destroying and re-instantiating a
2230 * Dygraph, since it doesn't have to reparse the underlying data.
2232 * @param {Number} width Width (in pixels)
2233 * @param {Number} height Height (in pixels)
2235 Dygraph
.prototype.resize
= function(width
, height
) {
2236 if (this.resize_lock
) {
2239 this.resize_lock
= true;
2241 if ((width
=== null) != (height
=== null)) {
2242 this.warn("Dygraph.resize() should be called with zero parameters or " +
2243 "two non-NULL parameters. Pretending it was zero.");
2244 width
= height
= null;
2247 // TODO(danvk): there should be a clear() method.
2248 this.maindiv_
.innerHTML
= "";
2249 this.attrs_
.labelsDiv
= null;
2252 this.maindiv_
.style
.width
= width
+ "px";
2253 this.maindiv_
.style
.height
= height
+ "px";
2254 this.width_
= width
;
2255 this.height_
= height
;
2257 this.width_
= this.maindiv_
.offsetWidth
;
2258 this.height_
= this.maindiv_
.offsetHeight
;
2261 this.createInterface_();
2262 this.drawGraph_(this.rawData_
);
2264 this.resize_lock
= false;
2268 * Adjusts the number of days in the rolling average. Updates the graph to
2269 * reflect the new averaging period.
2270 * @param {Number} length Number of days over which to average the data.
2272 Dygraph
.prototype.adjustRoll
= function(length
) {
2273 this.rollPeriod_
= length
;
2274 this.drawGraph_(this.rawData_
);
2278 * Returns a boolean array of visibility statuses.
2280 Dygraph
.prototype.visibility
= function() {
2281 // Do lazy-initialization, so that this happens after we know the number of
2283 if (!this.attr_("visibility")) {
2284 this.attrs_
["visibility"] = [];
2286 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2287 this.attr_("visibility").push(true);
2289 return this.attr_("visibility");
2293 * Changes the visiblity of a series.
2295 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2296 var x
= this.visibility();
2297 if (num
< 0 && num
>= x
.length
) {
2298 this.warn("invalid series number in setVisibility: " + num
);
2301 this.drawGraph_(this.rawData_
);
2306 * Create a new canvas element. This is more complex than a simple
2307 * document.createElement("canvas") because of IE and excanvas.
2309 Dygraph
.createCanvas
= function() {
2310 var canvas
= document
.createElement("canvas");
2312 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2314 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2322 * A wrapper around Dygraph that implements the gviz API.
2323 * @param {Object} container The DOM object the visualization should live in.
2325 Dygraph
.GVizChart
= function(container
) {
2326 this.container
= container
;
2329 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2330 this.container
.innerHTML
= '';
2331 this.date_graph
= new Dygraph(this.container
, data
, options
);
2335 * Google charts compatible setSelection
2336 * Only row selection is supported, all points in the row will be highlighted
2337 * @param {Array} array of the selected cells
2340 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2342 if (selection_array
.length
) {
2343 row
= selection_array
[0].row
;
2345 this.date_graph
.setSelection(row
);
2349 * Google charts compatible getSelection implementation
2350 * @return {Array} array of the selected cells
2353 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2356 var row
= this.date_graph
.getSelection();
2358 if (row
< 0) return selection
;
2361 for (var i
in this.date_graph
.layout_
.datasets
) {
2362 selection
.push({row
: row
, column
: col
});
2369 // Older pages may still use this name.
2370 DateGraph
= Dygraph
;