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
129 // Various logging levels.
135 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
136 // Labels is no longer a constructor parameter, since it's typically set
137 // directly from the data source. It also conains a name for the x-axis,
138 // which the previous constructor form did not.
139 if (labels
!= null) {
140 var new_labels
= ["Date"];
141 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
142 Dygraph
.update(attrs
, { 'labels': new_labels
});
144 this.__init__(div
, file
, attrs
);
148 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
149 * and interaction <canvas> inside of it. See the constructor for details
151 * @param {Element} div the Element to render the graph into.
152 * @param {String | Function} file Source data
153 * @param {Object} attrs Miscellaneous other options
156 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
157 // Support two-argument constructor
158 if (attrs
== null) { attrs
= {}; }
160 // Copy the important bits into the object
161 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
164 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
165 this.previousVerticalX_
= -1;
166 this.fractions_
= attrs
.fractions
|| false;
167 this.dateWindow_
= attrs
.dateWindow
|| null;
168 this.valueRange_
= attrs
.valueRange
|| null;
169 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
170 this.is_initial_draw_
= true;
172 // Clear the div. This ensure that, if multiple dygraphs are passed the same
173 // div, then only one will be drawn.
176 // If the div isn't already sized then inherit from our attrs or
177 // give it a default size.
178 if (div
.style
.width
== '') {
179 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
181 if (div
.style
.height
== '') {
182 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
184 this.width_
= parseInt(div
.style
.width
, 10);
185 this.height_
= parseInt(div
.style
.height
, 10);
186 // The div might have been specified as percent of the current window size,
187 // convert that to an appropriate number of pixels.
188 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
189 this.width_
= div
.offsetWidth
;
191 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
192 this.height_
= div
.offsetHeight
;
195 if (this.width_
== 0) {
196 this.error("dygraph has zero width. Please specify a width in pixels.");
198 if (this.height_
== 0) {
199 this.error("dygraph has zero height. Please specify a height in pixels.");
202 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
203 if (attrs
['stackedGraph']) {
204 attrs
['fillGraph'] = true;
205 // TODO(nikhilk): Add any other stackedGraph checks here.
208 // Dygraphs has many options, some of which interact with one another.
209 // To keep track of everything, we maintain two sets of options:
211 // this.user_attrs_ only options explicitly set by the user.
212 // this.attrs_ defaults, options derived from user_attrs_, data.
214 // Options are then accessed this.attr_('attr'), which first looks at
215 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
216 // defaults without overriding behavior that the user specifically asks for.
217 this.user_attrs_
= {};
218 Dygraph
.update(this.user_attrs_
, attrs
);
221 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
223 this.boundaryIds_
= [];
225 // Make a note of whether labels will be pulled from the CSV file.
226 this.labelsFromCSV_
= (this.attr_("labels") == null);
228 // Create the containing DIV and other interactive elements
229 this.createInterface_();
234 Dygraph
.prototype.attr_
= function(name
) {
235 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
236 return this.user_attrs_
[name
];
237 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
238 return this.attrs_
[name
];
244 // TODO(danvk): any way I can get the line numbers to be this.warn call?
245 Dygraph
.prototype.log
= function(severity
, message
) {
246 if (typeof(console
) != 'undefined') {
249 console
.debug('dygraphs: ' + message
);
252 console
.info('dygraphs: ' + message
);
254 case Dygraph
.WARNING
:
255 console
.warn('dygraphs: ' + message
);
258 console
.error('dygraphs: ' + message
);
263 Dygraph
.prototype.info
= function(message
) {
264 this.log(Dygraph
.INFO
, message
);
266 Dygraph
.prototype.warn
= function(message
) {
267 this.log(Dygraph
.WARNING
, message
);
269 Dygraph
.prototype.error
= function(message
) {
270 this.log(Dygraph
.ERROR
, message
);
274 * Returns the current rolling period, as set by the user or an option.
275 * @return {Number} The number of days in the rolling window
277 Dygraph
.prototype.rollPeriod
= function() {
278 return this.rollPeriod_
;
282 * Returns the currently-visible x-range. This can be affected by zooming,
283 * panning or a call to updateOptions.
284 * Returns a two-element array: [left, right].
285 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
287 Dygraph
.prototype.xAxisRange
= function() {
288 if (this.dateWindow_
) return this.dateWindow_
;
290 // The entire chart is visible.
291 var left
= this.rawData_
[0][0];
292 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
293 return [left
, right
];
297 * Returns the currently-visible y-range. This can be affected by zooming,
298 * panning or a call to updateOptions.
299 * Returns a two-element array: [bottom, top].
301 Dygraph
.prototype.yAxisRange
= function() {
302 return this.displayedYRange_
;
306 * Convert from data coordinates to canvas/div X/Y coordinates.
307 * Returns a two-element array: [X, Y]
309 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
310 var ret
= [null, null];
311 var area
= this.plotter_
.area
;
313 var xRange
= this.xAxisRange();
314 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
318 var yRange
= this.yAxisRange();
319 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
325 // TODO(danvk): use these functions throughout dygraphs.
327 * Convert from canvas/div coords to data coordinates.
328 * Returns a two-element array: [X, Y]
330 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
331 var ret
= [null, null];
332 var area
= this.plotter_
.area
;
334 var xRange
= this.xAxisRange();
335 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
339 var yRange
= this.yAxisRange();
340 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
346 Dygraph
.addEvent
= function(el
, evt
, fn
) {
347 var normed_fn
= function(e
) {
348 if (!e
) var e
= window
.event
;
351 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
352 el
.addEventListener(evt
, normed_fn
, false);
354 el
.attachEvent('on' + evt
, normed_fn
);
358 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
359 var ctx
= cnv
.getContext("2d");
361 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
366 * Generates interface elements for the Dygraph: a containing div, a div to
367 * display the current point, and a textbox to adjust the rolling average
368 * period. Also creates the Renderer/Layout elements.
371 Dygraph
.prototype.createInterface_
= function() {
372 // Create the all-enclosing graph div
373 var enclosing
= this.maindiv_
;
375 this.graphDiv
= document
.createElement("div");
376 this.graphDiv
.style
.width
= this.width_
+ "px";
377 this.graphDiv
.style
.height
= this.height_
+ "px";
378 enclosing
.appendChild(this.graphDiv
);
382 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
384 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
385 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
386 - 2 * this.attr_("axisTickSize");
387 this.clippingArea_
= clip
;
389 // Create the canvas for interactive parts of the chart.
390 this.canvas_
= Dygraph
.createCanvas();
391 this.canvas_
.style
.position
= "absolute";
392 this.canvas_
.width
= this.width_
;
393 this.canvas_
.height
= this.height_
;
394 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
395 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
397 // ... and for static parts of the chart.
398 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
400 // The interactive parts of the graph are drawn on top of the chart.
401 this.graphDiv
.appendChild(this.hidden_
);
402 this.graphDiv
.appendChild(this.canvas_
);
403 this.mouseEventElement_
= this.canvas_
;
405 // Make sure we don't overdraw.
406 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
407 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
410 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
411 dygraph
.mouseMove_(e
);
413 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
414 dygraph
.mouseOut_(e
);
417 // Create the grapher
418 // TODO(danvk): why does the Layout need its own set of options?
419 this.layoutOptions_
= { 'xOriginIsZero': false };
420 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
421 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
422 Dygraph
.update(this.layoutOptions_
, {
423 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
425 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
427 // TODO(danvk): why does the Renderer need its own set of options?
428 this.renderOptions_
= { colorScheme
: this.colors_
,
430 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
431 Dygraph
.update(this.renderOptions_
, this.attrs_
);
432 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
433 this.plotter_
= new DygraphCanvasRenderer(this,
434 this.hidden_
, this.layout_
,
435 this.renderOptions_
);
437 this.createStatusMessage_();
438 this.createRollInterface_();
439 this.createDragInterface_();
443 * Detach DOM elements in the dygraph and null out all data references.
444 * Calling this when you're done with a dygraph can dramatically reduce memory
445 * usage. See, e.g., the tests/perf.html example.
447 Dygraph
.prototype.destroy
= function() {
448 var removeRecursive
= function(node
) {
449 while (node
.hasChildNodes()) {
450 removeRecursive(node
.firstChild
);
451 node
.removeChild(node
.firstChild
);
454 removeRecursive(this.maindiv_
);
456 var nullOut
= function(obj
) {
458 if (typeof(obj
[n
]) === 'object') {
464 // These may not all be necessary, but it can't hurt...
465 nullOut(this.layout_
);
466 nullOut(this.plotter_
);
471 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
472 * this particular canvas. All Dygraph work is done on this.canvas_.
473 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
474 * @return {Object} The newly-created canvas
477 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
478 var h
= Dygraph
.createCanvas();
479 h
.style
.position
= "absolute";
480 // TODO(danvk): h should be offset from canvas. canvas needs to include
481 // some extra area to make it easier to zoom in on the far left and far
482 // right. h needs to be precisely the plot area, so that clipping occurs.
483 h
.style
.top
= canvas
.style
.top
;
484 h
.style
.left
= canvas
.style
.left
;
485 h
.width
= this.width_
;
486 h
.height
= this.height_
;
487 h
.style
.width
= this.width_
+ "px"; // for IE
488 h
.style
.height
= this.height_
+ "px"; // for IE
492 // Taken from MochiKit.Color
493 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
497 if (saturation
=== 0) {
502 var i
= Math
.floor(hue
* 6);
503 var f
= (hue
* 6) - i
;
504 var p
= value
* (1 - saturation
);
505 var q
= value
* (1 - (saturation
* f
));
506 var t
= value
* (1 - (saturation
* (1 - f
)));
508 case 1: red
= q
; green
= value
; blue
= p
; break;
509 case 2: red
= p
; green
= value
; blue
= t
; break;
510 case 3: red
= p
; green
= q
; blue
= value
; break;
511 case 4: red
= t
; green
= p
; blue
= value
; break;
512 case 5: red
= value
; green
= p
; blue
= q
; break;
513 case 6: // fall through
514 case 0: red
= value
; green
= t
; blue
= p
; break;
517 red
= Math
.floor(255 * red
+ 0.5);
518 green
= Math
.floor(255 * green
+ 0.5);
519 blue
= Math
.floor(255 * blue
+ 0.5);
520 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
525 * Generate a set of distinct colors for the data series. This is done with a
526 * color wheel. Saturation/Value are customizable, and the hue is
527 * equally-spaced around the color wheel. If a custom set of colors is
528 * specified, that is used instead.
531 Dygraph
.prototype.setColors_
= function() {
532 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
533 // away with this.renderOptions_.
534 var num
= this.attr_("labels").length
- 1;
536 var colors
= this.attr_('colors');
538 var sat
= this.attr_('colorSaturation') || 1.0;
539 var val
= this.attr_('colorValue') || 0.5;
540 var half
= Math
.ceil(num
/ 2);
541 for (var i
= 1; i
<= num
; i
++) {
542 if (!this.visibility()[i
-1]) continue;
543 // alternate colors for high contrast.
544 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
545 var hue
= (1.0 * idx
/ (1 + num
));
546 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
549 for (var i
= 0; i
< num
; i
++) {
550 if (!this.visibility()[i
]) continue;
551 var colorStr
= colors
[i
% colors
.length
];
552 this.colors_
.push(colorStr
);
556 // TODO(danvk): update this w/r
/t/ the
new options system
.
557 this.renderOptions_
.colorScheme
= this.colors_
;
558 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
559 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
560 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
564 * Return the list of colors. This is either the list of colors passed in the
565 * attributes, or the autogenerated list of rgb(r,g,b) strings.
566 * @return {Array<string>} The list of colors.
568 Dygraph
.prototype.getColors
= function() {
572 // The following functions are from quirksmode.org with a modification for Safari from
573 // http://blog.firetree.net/2005/07/04/javascript-find-position/
574 // http://www.quirksmode.org/js
/findpos
.html
575 Dygraph
.findPosX
= function(obj
) {
580 curleft
+= obj
.offsetLeft
;
581 if(!obj
.offsetParent
)
583 obj
= obj
.offsetParent
;
590 Dygraph
.findPosY
= function(obj
) {
595 curtop
+= obj
.offsetTop
;
596 if(!obj
.offsetParent
)
598 obj
= obj
.offsetParent
;
608 * Create the div that contains information on the selected point(s)
609 * This goes in the top right of the canvas, unless an external div has already
613 Dygraph
.prototype.createStatusMessage_
= function(){
614 if (!this.attr_("labelsDiv")) {
615 var divWidth
= this.attr_('labelsDivWidth');
617 "position": "absolute",
620 "width": divWidth
+ "px",
622 "left": (this.width_
- divWidth
- 2) + "px",
623 "background": "white",
625 "overflow": "hidden"};
626 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
627 var div
= document
.createElement("div");
628 for (var name
in messagestyle
) {
629 if (messagestyle
.hasOwnProperty(name
)) {
630 div
.style
[name
] = messagestyle
[name
];
633 this.graphDiv
.appendChild(div
);
634 this.attrs_
.labelsDiv
= div
;
639 * Create the text box to adjust the averaging period
640 * @return {Object} The newly-created text box
643 Dygraph
.prototype.createRollInterface_
= function() {
644 var display
= this.attr_('showRoller') ? "block" : "none";
645 var textAttr
= { "position": "absolute",
647 "top": (this.plotter_
.area
.h
- 25) + "px",
648 "left": (this.plotter_
.area
.x
+ 1) + "px",
651 var roller
= document
.createElement("input");
652 roller
.type
= "text";
654 roller
.value
= this.rollPeriod_
;
655 for (var name
in textAttr
) {
656 if (textAttr
.hasOwnProperty(name
)) {
657 roller
.style
[name
] = textAttr
[name
];
661 var pa
= this.graphDiv
;
662 pa
.appendChild(roller
);
664 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
668 // These functions are taken from MochiKit.Signal
669 Dygraph
.pageX
= function(e
) {
671 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
674 var b
= document
.body
;
676 (de
.scrollLeft
|| b
.scrollLeft
) -
677 (de
.clientLeft
|| 0);
681 Dygraph
.pageY
= function(e
) {
683 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
686 var b
= document
.body
;
688 (de
.scrollTop
|| b
.scrollTop
) -
694 * Set up all the mouse handlers needed to capture dragging behavior for zoom
698 Dygraph
.prototype.createDragInterface_
= function() {
701 // Tracks whether the mouse is down right now
702 var isZooming
= false;
703 var isPanning
= false;
704 var dragStartX
= null;
705 var dragStartY
= null;
709 var draggingDate
= null;
710 var dateRange
= null;
712 // Utility function to convert page-wide coordinates to canvas coords
715 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
716 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
718 // Draw zoom rectangles when the mouse is down and the user moves around
719 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
721 dragEndX
= getX(event
);
722 dragEndY
= getY(event
);
724 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
726 } else if (isPanning
) {
727 dragEndX
= getX(event
);
728 dragEndY
= getY(event
);
730 // Want to have it so that:
731 // 1. draggingDate appears at dragEndX
732 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
734 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
735 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
736 self
.drawGraph_(self
.rawData_
);
740 // Track the beginning of drag events
741 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
742 px
= Dygraph
.findPosX(self
.canvas_
);
743 py
= Dygraph
.findPosY(self
.canvas_
);
744 dragStartX
= getX(event
);
745 dragStartY
= getY(event
);
747 if (event
.altKey
|| event
.shiftKey
) {
748 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
750 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
751 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
758 // If the user releases the mouse button during a drag, but not over the
759 // canvas, then it doesn't count as a zooming action.
760 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
761 if (isZooming
|| isPanning
) {
774 // Temporarily cancel the dragging event when the mouse leaves the graph
775 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
782 // If the mouse is released on the canvas during a drag event, then it's a
783 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
784 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
787 dragEndX
= getX(event
);
788 dragEndY
= getY(event
);
789 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
790 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
792 if (regionWidth
< 2 && regionHeight
< 2 &&
793 self
.attr_('clickCallback') != null &&
794 self
.lastx_
!= undefined
) {
795 // TODO(danvk): pass along more info about the points.
796 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
799 if (regionWidth
>= 10) {
800 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
801 Math
.max(dragStartX
, dragEndX
));
803 self
.canvas_
.getContext("2d").clearRect(0, 0,
805 self
.canvas_
.height
);
819 // Double-clicking zooms back out
820 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
821 if (self
.dateWindow_
== null) return;
822 self
.dateWindow_
= null;
823 self
.drawGraph_(self
.rawData_
);
824 var minDate
= self
.rawData_
[0][0];
825 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
826 if (self
.attr_("zoomCallback")) {
827 self
.attr_("zoomCallback")(minDate
, maxDate
);
833 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
834 * up any previous zoom rectangles that were drawn. This could be optimized to
835 * avoid extra redrawing, but it's tricky to avoid interactions with the status
837 * @param {Number} startX The X position where the drag started, in canvas
839 * @param {Number} endX The current X position of the drag, in canvas coords.
840 * @param {Number} prevEndX The value of endX on the previous call to this
841 * function. Used to avoid excess redrawing
844 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
845 var ctx
= this.canvas_
.getContext("2d");
847 // Clean up from the previous rect if necessary
849 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
850 Math
.abs(startX
- prevEndX
), this.height_
);
853 // Draw a light-grey rectangle to show the new viewing area
854 if (endX
&& startX
) {
855 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
856 ctx
.fillRect(Math
.min(startX
, endX
), 0,
857 Math
.abs(endX
- startX
), this.height_
);
862 * Zoom to something containing [lowX, highX]. These are pixel coordinates
863 * in the canvas. The exact zoom window may be slightly larger if there are no
864 * data points near lowX or highX. This function redraws the graph.
865 * @param {Number} lowX The leftmost pixel value that should be visible.
866 * @param {Number} highX The rightmost pixel value that should be visible.
869 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
870 // Find the earliest and latest dates contained in this canvasx range.
871 var r
= this.toDataCoords(lowX
, null);
873 r
= this.toDataCoords(highX
, null);
876 this.dateWindow_
= [minDate
, maxDate
];
877 this.drawGraph_(this.rawData_
);
878 if (this.attr_("zoomCallback")) {
879 this.attr_("zoomCallback")(minDate
, maxDate
);
884 * When the mouse moves in the canvas, display information about a nearby data
885 * point and draw dots over those points in the data series. This function
886 * takes care of cleanup of previously-drawn dots.
887 * @param {Object} event The mousemove event from the browser.
890 Dygraph
.prototype.mouseMove_
= function(event
) {
891 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
892 var points
= this.layout_
.points
;
897 // Loop through all the points and find the date nearest to our current
899 var minDist
= 1e+100;
901 for (var i
= 0; i
< points
.length
; i
++) {
902 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
903 if (dist
> minDist
) continue;
907 if (idx
>= 0) lastx
= points
[idx
].xval
;
908 // Check that you can really highlight the last day's data
909 if (canvasx
> points
[points
.length
-1].canvasx
)
910 lastx
= points
[points
.length
-1].xval
;
912 // Extract the points we've selected
913 this.selPoints_
= [];
914 var l
= points
.length
;
915 if (!this.attr_("stackedGraph")) {
916 for (var i
= 0; i
< l
; i
++) {
917 if (points
[i
].xval
== lastx
) {
918 this.selPoints_
.push(points
[i
]);
922 // Need to 'unstack' points starting from the bottom
923 var cumulative_sum
= 0;
924 for (var i
= l
- 1; i
>= 0; i
--) {
925 if (points
[i
].xval
== lastx
) {
926 var p
= {}; // Clone the point since we modify it
927 for (var k
in points
[i
]) {
930 p
.yval
-= cumulative_sum
;
931 cumulative_sum
+= p
.yval
;
932 this.selPoints_
.push(p
);
935 this.selPoints_
.reverse();
938 if (this.attr_("highlightCallback")) {
939 var px
= this.lastx_
;
940 if (px
!== null && lastx
!= px
) {
941 // only fire if the selected point has changed.
942 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
946 // Save last x position for callbacks.
949 this.updateSelection_();
953 * Draw dots over the selectied points in the data series. This function
954 * takes care of cleanup of previously-drawn dots.
957 Dygraph
.prototype.updateSelection_
= function() {
958 // Clear the previously drawn vertical, if there is one
959 var circleSize
= this.attr_('highlightCircleSize');
960 var ctx
= this.canvas_
.getContext("2d");
961 if (this.previousVerticalX_
>= 0) {
962 var px
= this.previousVerticalX_
;
963 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
966 var isOK
= function(x
) { return x
&& !isNaN(x
); };
968 if (this.selPoints_
.length
> 0) {
969 var canvasx
= this.selPoints_
[0].canvasx
;
971 // Set the status message to indicate the selected point(s)
972 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
973 var fmtFunc
= this.attr_('yValueFormatter');
974 var clen
= this.colors_
.length
;
976 if (this.attr_('showLabelsOnHighlight')) {
977 // Set the status message to indicate the selected point(s)
978 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
979 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
980 if (this.attr_("labelsSeparateLines")) {
983 var point
= this.selPoints_
[i
];
984 var c
= new RGBColor(this.colors_
[i
%clen
]);
985 var yval
= fmtFunc(point
.yval
);
986 replace
+= " <b><font color='" + c
.toHex() + "'>"
987 + point
.name
+ "</font></b>:"
991 this.attr_("labelsDiv").innerHTML
= replace
;
994 // Draw colored circles over the center of each selected point
996 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
997 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
999 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1000 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1001 0, 2 * Math
.PI
, false);
1006 this.previousVerticalX_
= canvasx
;
1011 * Set manually set selected dots, and display information about them
1012 * @param int row number that should by highlighted
1013 * false value clears the selection
1016 Dygraph
.prototype.setSelection
= function(row
) {
1017 // Extract the points we've selected
1018 this.selPoints_
= [];
1021 if (row
!== false) {
1022 row
= row
-this.boundaryIds_
[0][0];
1025 if (row
!== false && row
>= 0) {
1026 for (var i
in this.layout_
.datasets
) {
1027 if (row
< this.layout_
.datasets
[i
].length
) {
1028 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1030 pos
+= this.layout_
.datasets
[i
].length
;
1034 if (this.selPoints_
.length
) {
1035 this.lastx_
= this.selPoints_
[0].xval
;
1036 this.updateSelection_();
1039 this.clearSelection();
1045 * The mouse has left the canvas. Clear out whatever artifacts remain
1046 * @param {Object} event the mouseout event from the browser.
1049 Dygraph
.prototype.mouseOut_
= function(event
) {
1050 if (this.attr_("unhighlightCallback")) {
1051 this.attr_("unhighlightCallback")(event
);
1054 if (this.attr_("hideOverlayOnMouseOut")) {
1055 this.clearSelection();
1060 * Remove all selection from the canvas
1063 Dygraph
.prototype.clearSelection
= function() {
1064 // Get rid of the overlay data
1065 var ctx
= this.canvas_
.getContext("2d");
1066 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1067 this.attr_("labelsDiv").innerHTML
= "";
1068 this.selPoints_
= [];
1073 * Returns the number of the currently selected row
1074 * @return int row number, of -1 if nothing is selected
1077 Dygraph
.prototype.getSelection
= function() {
1078 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1082 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1083 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1084 return row
+ this.boundaryIds_
[0][0];
1090 Dygraph
.zeropad
= function(x
) {
1091 if (x
< 10) return "0" + x
; else return "" + x
;
1095 * Return a string version of the hours, minutes and seconds portion of a date.
1096 * @param {Number} date The JavaScript date (ms since epoch)
1097 * @return {String} A time of the form "HH:MM:SS"
1100 Dygraph
.hmsString_
= function(date
) {
1101 var zeropad
= Dygraph
.zeropad
;
1102 var d
= new Date(date
);
1103 if (d
.getSeconds()) {
1104 return zeropad(d
.getHours()) + ":" +
1105 zeropad(d
.getMinutes()) + ":" +
1106 zeropad(d
.getSeconds());
1108 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1113 * Convert a JS date to a string appropriate to display on an axis that
1114 * is displaying values at the stated granularity.
1115 * @param {Date} date The date to format
1116 * @param {Number} granularity One of the Dygraph granularity constants
1117 * @return {String} The formatted date
1120 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1121 if (granularity
>= Dygraph
.MONTHLY
) {
1122 return date
.strftime('%b %y');
1124 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1125 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1126 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1128 return Dygraph
.hmsString_(date
.getTime());
1134 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1135 * @param {Number} date The JavaScript date (ms since epoch)
1136 * @return {String} A date of the form "YYYY/MM/DD"
1139 Dygraph
.dateString_
= function(date
, self
) {
1140 var zeropad
= Dygraph
.zeropad
;
1141 var d
= new Date(date
);
1144 var year
= "" + d
.getFullYear();
1145 // Get a 0 padded month string
1146 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1147 // Get a 0 padded day string
1148 var day
= zeropad(d
.getDate());
1151 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1152 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1154 return year
+ "/" + month + "/" + day
+ ret
;
1158 * Round a number to the specified number of digits past the decimal point.
1159 * @param {Number} num The number to round
1160 * @param {Number} places The number of decimals to which to round
1161 * @return {Number} The rounded number
1164 Dygraph
.round_
= function(num
, places
) {
1165 var shift
= Math
.pow(10, places
);
1166 return Math
.round(num
* shift
)/shift
;
1170 * Fires when there's data available to be graphed.
1171 * @param {String} data Raw CSV data to be plotted
1174 Dygraph
.prototype.loadedEvent_
= function(data
) {
1175 this.rawData_
= this.parseCSV_(data
);
1176 this.drawGraph_(this.rawData_
);
1179 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1180 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1181 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1184 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1187 Dygraph
.prototype.addXTicks_
= function() {
1188 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1189 var startDate
, endDate
;
1190 if (this.dateWindow_
) {
1191 startDate
= this.dateWindow_
[0];
1192 endDate
= this.dateWindow_
[1];
1194 startDate
= this.rawData_
[0][0];
1195 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1198 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1199 this.layout_
.updateOptions({xTicks
: xTicks
});
1202 // Time granularity enumeration
1203 Dygraph
.SECONDLY
= 0;
1204 Dygraph
.TWO_SECONDLY
= 1;
1205 Dygraph
.FIVE_SECONDLY
= 2;
1206 Dygraph
.TEN_SECONDLY
= 3;
1207 Dygraph
.THIRTY_SECONDLY
= 4;
1208 Dygraph
.MINUTELY
= 5;
1209 Dygraph
.TWO_MINUTELY
= 6;
1210 Dygraph
.FIVE_MINUTELY
= 7;
1211 Dygraph
.TEN_MINUTELY
= 8;
1212 Dygraph
.THIRTY_MINUTELY
= 9;
1213 Dygraph
.HOURLY
= 10;
1214 Dygraph
.TWO_HOURLY
= 11;
1215 Dygraph
.SIX_HOURLY
= 12;
1217 Dygraph
.WEEKLY
= 14;
1218 Dygraph
.MONTHLY
= 15;
1219 Dygraph
.QUARTERLY
= 16;
1220 Dygraph
.BIANNUAL
= 17;
1221 Dygraph
.ANNUAL
= 18;
1222 Dygraph
.DECADAL
= 19;
1223 Dygraph
.NUM_GRANULARITIES
= 20;
1225 Dygraph
.SHORT_SPACINGS
= [];
1226 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1227 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1228 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1229 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1230 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1231 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1232 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1233 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1234 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1235 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1236 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1237 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1238 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1239 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1240 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1244 // If we used this time granularity, how many ticks would there be?
1245 // This is only an approximation, but it's generally good enough.
1247 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1248 if (granularity
< Dygraph
.MONTHLY
) {
1249 // Generate one tick mark for every fixed interval of time.
1250 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1251 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1253 var year_mod
= 1; // e.g. to only print one point every 10 years.
1254 var num_months
= 12;
1255 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1256 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1257 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1258 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1260 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1261 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1262 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1268 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1269 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1271 // Returns an array containing {v: millis, label: label} dictionaries.
1273 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1274 var formatter
= this.attr_("xAxisLabelFormatter");
1276 if (granularity
< Dygraph
.MONTHLY
) {
1277 // Generate one tick mark for every fixed interval of time.
1278 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1279 var format
= '%d%b'; // e.g. "1Jan"
1281 // Find a time less than start_time which occurs on a "nice" time boundary
1282 // for this granularity.
1283 var g
= spacing
/ 1000;
1284 var d
= new Date(start_time
);
1285 if (g
<= 60) { // seconds
1286 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1290 if (g
<= 60) { // minutes
1291 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1296 if (g
<= 24) { // days
1297 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1302 if (g
== 7) { // one week
1303 d
.setDate(d
.getDate() - d
.getDay());
1308 start_time
= d
.getTime();
1310 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1311 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1314 // Display a tick mark on the first of a set of months of each year.
1315 // Years get a tick mark iff y % year_mod == 0. This is useful for
1316 // displaying a tick mark once every 10 years, say, on long time scales.
1318 var year_mod
= 1; // e.g. to only print one point every 10 years.
1320 if (granularity
== Dygraph
.MONTHLY
) {
1321 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1322 } else if (granularity
== Dygraph
.QUARTERLY
) {
1323 months
= [ 0, 3, 6, 9 ];
1324 } else if (granularity
== Dygraph
.BIANNUAL
) {
1326 } else if (granularity
== Dygraph
.ANNUAL
) {
1328 } else if (granularity
== Dygraph
.DECADAL
) {
1333 var start_year
= new Date(start_time
).getFullYear();
1334 var end_year
= new Date(end_time
).getFullYear();
1335 var zeropad
= Dygraph
.zeropad
;
1336 for (var i
= start_year
; i
<= end_year
; i
++) {
1337 if (i
% year_mod
!= 0) continue;
1338 for (var j
= 0; j
< months
.length
; j
++) {
1339 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1340 var t
= Date
.parse(date_str
);
1341 if (t
< start_time
|| t
> end_time
) continue;
1342 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1352 * Add ticks to the x-axis based on a date range.
1353 * @param {Number} startDate Start of the date window (millis since epoch)
1354 * @param {Number} endDate End of the date window (millis since epoch)
1355 * @return {Array.<Object>} Array of {label, value} tuples.
1358 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1360 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1361 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1362 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1369 return self
.GetXAxis(startDate
, endDate
, chosen
);
1371 // TODO(danvk): signal error.
1376 * Add ticks when the x axis has numbers on it (instead of dates)
1377 * @param {Number} startDate Start of the date window (millis since epoch)
1378 * @param {Number} endDate End of the date window (millis since epoch)
1379 * @return {Array.<Object>} Array of {label, value} tuples.
1382 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1384 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1385 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1386 // The first spacing greater than pixelsPerYLabel is what we use.
1387 // TODO(danvk): version that works on a log scale.
1388 if (self
.attr_("labelsKMG2")) {
1389 var mults
= [1, 2, 4, 8];
1391 var mults
= [1, 2, 5];
1393 var scale
, low_val
, high_val
, nTicks
;
1394 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1395 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1396 for (var i
= -10; i
< 50; i
++) {
1397 if (self
.attr_("labelsKMG2")) {
1398 var base_scale
= Math
.pow(16, i
);
1400 var base_scale
= Math
.pow(10, i
);
1402 for (var j
= 0; j
< mults
.length
; j
++) {
1403 scale
= base_scale
* mults
[j
];
1404 low_val
= Math
.floor(minV
/ scale
) * scale
;
1405 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1406 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1407 var spacing
= self
.height_
/ nTicks
;
1408 // wish I could break out of both loops at once...
1409 if (spacing
> pixelsPerTick
) break;
1411 if (spacing
> pixelsPerTick
) break;
1414 // Construct labels for the ticks
1418 if (self
.attr_("labelsKMB")) {
1420 k_labels
= [ "K", "M", "B", "T" ];
1422 if (self
.attr_("labelsKMG2")) {
1423 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1425 k_labels
= [ "k", "M", "G", "T" ];
1428 // Allow reverse y-axis if it's explicitly requested.
1429 if (low_val
> high_val
) scale
*= -1;
1431 for (var i
= 0; i
< nTicks
; i
++) {
1432 var tickV
= low_val
+ i
* scale
;
1433 var absTickV
= Math
.abs(tickV
);
1434 var label
= Dygraph
.round_(tickV
, 2);
1435 if (k_labels
.length
) {
1436 // Round up to an appropriate unit.
1438 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1439 if (absTickV
>= n
) {
1440 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1445 ticks
.push( {label
: label
, v
: tickV
} );
1451 * Adds appropriate ticks on the y-axis
1452 * @param {Number} minY The minimum Y value in the data set
1453 * @param {Number} maxY The maximum Y value in the data set
1456 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1457 // Set the number of ticks so that the labels are human-friendly.
1458 // TODO(danvk): make this an attribute as well.
1459 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1460 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1464 // Computes the range of the data series (including confidence intervals).
1465 // series is either [ [x1, y1], [x2, y2], ... ] or
1466 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1467 // Returns [low, high]
1468 Dygraph
.prototype.extremeValues_
= function(series
) {
1469 var minY
= null, maxY
= null;
1471 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1473 // With custom bars, maxY is the max of the high values.
1474 for (var j
= 0; j
< series
.length
; j
++) {
1475 var y
= series
[j
][1][0];
1477 var low
= y
- series
[j
][1][1];
1478 var high
= y
+ series
[j
][1][2];
1479 if (low
> y
) low
= y
; // this can happen with custom bars,
1480 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1481 if (maxY
== null || high
> maxY
) {
1484 if (minY
== null || low
< minY
) {
1489 for (var j
= 0; j
< series
.length
; j
++) {
1490 var y
= series
[j
][1];
1491 if (y
=== null || isNaN(y
)) continue;
1492 if (maxY
== null || y
> maxY
) {
1495 if (minY
== null || y
< minY
) {
1501 return [minY
, maxY
];
1505 * Update the graph with new data. Data is in the format
1506 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1507 * or, if errorBars=true,
1508 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1509 * @param {Array.<Object>} data The data (see above)
1512 Dygraph
.prototype.drawGraph_
= function(data
) {
1513 // This is used to set the second parameter to drawCallback, below.
1514 var is_initial_draw
= this.is_initial_draw_
;
1515 this.is_initial_draw_
= false;
1517 var minY
= null, maxY
= null;
1518 this.layout_
.removeAllDatasets();
1520 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1522 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1524 // Loop over the fields (series). Go from the last to the first,
1525 // because if they're stacked that's how we accumulate the values.
1527 var cumulative_y
= []; // For stacked series.
1530 // Loop over all fields and create datasets
1531 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1532 if (!this.visibility()[i
- 1]) continue;
1535 for (var j
= 0; j
< data
.length
; j
++) {
1536 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1537 var date
= data
[j
][0];
1538 series
.push([date
, data
[j
][i
]]);
1541 series
= this.rollingAverage(series
, this.rollPeriod_
);
1543 // Prune down to the desired range, if necessary (for zooming)
1544 // Because there can be lines going to points outside of the visible area,
1545 // we actually prune to visible points, plus one on either side.
1546 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1547 if (this.dateWindow_
) {
1548 var low
= this.dateWindow_
[0];
1549 var high
= this.dateWindow_
[1];
1551 // TODO(danvk): do binary search instead of linear search.
1552 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1553 var firstIdx
= null, lastIdx
= null;
1554 for (var k
= 0; k
< series
.length
; k
++) {
1555 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1558 if (series
[k
][0] <= high
) {
1562 if (firstIdx
=== null) firstIdx
= 0;
1563 if (firstIdx
> 0) firstIdx
--;
1564 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1565 if (lastIdx
< series
.length
- 1) lastIdx
++;
1566 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1567 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1568 pruned
.push(series
[k
]);
1572 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1575 var extremes
= this.extremeValues_(series
);
1576 var thisMinY
= extremes
[0];
1577 var thisMaxY
= extremes
[1];
1578 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1579 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1582 for (var j
=0; j
<series
.length
; j
++) {
1583 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1586 } else if (this.attr_("stackedGraph")) {
1587 var l
= series
.length
;
1589 for (var j
= 0; j
< l
; j
++) {
1590 // If one data set has a NaN, let all subsequent stacked
1591 // sets inherit the NaN -- only start at 0 for the first set.
1592 var x
= series
[j
][0];
1593 if (cumulative_y
[x
] === undefined
)
1594 cumulative_y
[x
] = 0;
1596 actual_y
= series
[j
][1];
1597 cumulative_y
[x
] += actual_y
;
1599 series
[j
] = [x
, cumulative_y
[x
]]
1601 if (!maxY
|| cumulative_y
[x
] > maxY
)
1602 maxY
= cumulative_y
[x
];
1606 datasets
[i
] = series
;
1609 for (var i
= 1; i
< datasets
.length
; i
++) {
1610 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1613 // Use some heuristics to come up with a good maxY value, unless it's been
1614 // set explicitly by the user.
1615 if (this.valueRange_
!= null) {
1616 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1617 this.displayedYRange_
= this.valueRange_
;
1619 // This affects the calculation of span, below.
1620 if (this.attr_("includeZero") && minY
> 0) {
1624 // Add some padding and round up to an integer to be human-friendly.
1625 var span
= maxY
- minY
;
1626 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1627 if (span
== 0) { span
= maxY
; }
1628 var maxAxisY
= maxY
+ 0.1 * span
;
1629 var minAxisY
= minY
- 0.1 * span
;
1631 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1632 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1633 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1635 if (this.attr_("includeZero")) {
1636 if (maxY
< 0) maxAxisY
= 0;
1637 if (minY
> 0) minAxisY
= 0;
1640 this.addYTicks_(minAxisY
, maxAxisY
);
1641 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1646 // Tell PlotKit to use this new data and render itself
1647 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1648 this.layout_
.evaluateWithError();
1649 this.plotter_
.clear();
1650 this.plotter_
.render();
1651 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1652 this.canvas_
.height
);
1654 if (this.attr_("drawCallback") !== null) {
1655 this.attr_("drawCallback")(this, is_initial_draw
);
1660 * Calculates the rolling average of a data set.
1661 * If originalData is [label, val], rolls the average of those.
1662 * If originalData is [label, [, it's interpreted as [value, stddev]
1663 * and the roll is returned in the same form, with appropriately reduced
1664 * stddev for each value.
1665 * Note that this is where fractional input (i.e. '5/10') is converted into
1667 * @param {Array} originalData The data in the appropriate format (see above)
1668 * @param {Number} rollPeriod The number of days over which to average the data
1670 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1671 if (originalData
.length
< 2)
1672 return originalData
;
1673 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1674 var rollingData
= [];
1675 var sigma
= this.attr_("sigma");
1677 if (this.fractions_
) {
1679 var den
= 0; // numerator/denominator
1681 for (var i
= 0; i
< originalData
.length
; i
++) {
1682 num
+= originalData
[i
][1][0];
1683 den
+= originalData
[i
][1][1];
1684 if (i
- rollPeriod
>= 0) {
1685 num
-= originalData
[i
- rollPeriod
][1][0];
1686 den
-= originalData
[i
- rollPeriod
][1][1];
1689 var date
= originalData
[i
][0];
1690 var value
= den
? num
/ den
: 0.0;
1691 if (this.attr_("errorBars")) {
1692 if (this.wilsonInterval_
) {
1693 // For more details on this confidence interval, see:
1694 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1696 var p
= value
< 0 ? 0 : value
, n
= den
;
1697 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1698 var denom
= 1 + sigma
* sigma
/ den
;
1699 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1700 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1701 rollingData
[i
] = [date
,
1702 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1704 rollingData
[i
] = [date
, [0, 0, 0]];
1707 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1708 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1711 rollingData
[i
] = [date
, mult
* value
];
1714 } else if (this.attr_("customBars")) {
1719 for (var i
= 0; i
< originalData
.length
; i
++) {
1720 var data
= originalData
[i
][1];
1722 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1724 if (y
!= null && !isNaN(y
)) {
1730 if (i
- rollPeriod
>= 0) {
1731 var prev
= originalData
[i
- rollPeriod
];
1732 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1739 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1740 1.0 * (mid
- low
) / count
,
1741 1.0 * (high
- mid
) / count
]];
1744 // Calculate the rolling average for the first rollPeriod - 1 points where
1745 // there is not enough data to roll over the full number of days
1746 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1747 if (!this.attr_("errorBars")){
1748 if (rollPeriod
== 1) {
1749 return originalData
;
1752 for (var i
= 0; i
< originalData
.length
; i
++) {
1755 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1756 var y
= originalData
[j
][1];
1757 if (y
== null || isNaN(y
)) continue;
1759 sum
+= originalData
[j
][1];
1762 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1764 rollingData
[i
] = [originalData
[i
][0], null];
1769 for (var i
= 0; i
< originalData
.length
; i
++) {
1773 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1774 var y
= originalData
[j
][1][0];
1775 if (y
== null || isNaN(y
)) continue;
1777 sum
+= originalData
[j
][1][0];
1778 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1781 var stddev
= Math
.sqrt(variance
) / num_ok
;
1782 rollingData
[i
] = [originalData
[i
][0],
1783 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1785 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1795 * Parses a date, returning the number of milliseconds since epoch. This can be
1796 * passed in as an xValueParser in the Dygraph constructor.
1797 * TODO(danvk): enumerate formats that this understands.
1798 * @param {String} A date in YYYYMMDD format.
1799 * @return {Number} Milliseconds since epoch.
1802 Dygraph
.dateParser
= function(dateStr
, self
) {
1805 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1806 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1807 while (dateStrSlashed
.search("-") != -1) {
1808 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1810 d
= Date
.parse(dateStrSlashed
);
1811 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1812 // TODO(danvk): remove support for this format. It's confusing.
1813 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1814 + "/" + dateStr
.substr(6,2);
1815 d
= Date
.parse(dateStrSlashed
);
1817 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1818 // "2009/07/12 12:34:56"
1819 d
= Date
.parse(dateStr
);
1822 if (!d
|| isNaN(d
)) {
1823 self
.error("Couldn't parse " + dateStr
+ " as a date");
1829 * Detects the type of the str (date or numeric) and sets the various
1830 * formatting attributes in this.attrs_ based on this type.
1831 * @param {String} str An x value.
1834 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1836 if (str
.indexOf('-') >= 0 ||
1837 str
.indexOf('/') >= 0 ||
1838 isNaN(parseFloat(str
))) {
1840 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1841 // TODO(danvk): remove support for this format.
1846 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1847 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1848 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1849 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
1851 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1852 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1853 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1854 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
1859 * Parses a string in a special csv format. We expect a csv file where each
1860 * line is a date point, and the first field in each line is the date string.
1861 * We also expect that all remaining fields represent series.
1862 * if the errorBars attribute is set, then interpret the fields as:
1863 * date, series1, stddev1, series2, stddev2, ...
1864 * @param {Array.<Object>} data See above.
1867 * @return Array.<Object> An array with one entry for each row. These entries
1868 * are an array of cells in that row. The first entry is the parsed x-value for
1869 * the row. The second, third, etc. are the y-values. These can take on one of
1870 * three forms, depending on the CSV and constructor parameters:
1872 * 2. [ value, stddev ]
1873 * 3. [ low value, center value, high value ]
1875 Dygraph
.prototype.parseCSV_
= function(data
) {
1877 var lines
= data
.split("\n");
1879 // Use the default delimiter or fall back to a tab if that makes sense.
1880 var delim
= this.attr_('delimiter');
1881 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1886 if (this.labelsFromCSV_
) {
1888 this.attrs_
.labels
= lines
[0].split(delim
);
1892 var defaultParserSet
= false; // attempt to auto-detect x value type
1893 var expectedCols
= this.attr_("labels").length
;
1894 var outOfOrder
= false;
1895 for (var i
= start
; i
< lines
.length
; i
++) {
1896 var line
= lines
[i
];
1897 if (line
.length
== 0) continue; // skip blank lines
1898 if (line
[0] == '#') continue; // skip comment lines
1899 var inFields
= line
.split(delim
);
1900 if (inFields
.length
< 2) continue;
1903 if (!defaultParserSet
) {
1904 this.detectTypeFromString_(inFields
[0]);
1905 xParser
= this.attr_("xValueParser");
1906 defaultParserSet
= true;
1908 fields
[0] = xParser(inFields
[0], this);
1910 // If fractions are expected, parse the numbers as "A/B
"
1911 if (this.fractions_) {
1912 for (var j = 1; j < inFields.length; j++) {
1913 // TODO(danvk): figure out an appropriate way to flag parse errors.
1914 var vals = inFields[j].split("/");
1915 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1917 } else if (this.attr_("errorBars
")) {
1918 // If there are error bars, values are (value, stddev) pairs
1919 for (var j = 1; j < inFields.length; j += 2)
1920 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1921 parseFloat(inFields[j + 1])];
1922 } else if (this.attr_("customBars
")) {
1923 // Bars are a low;center;high tuple
1924 for (var j = 1; j < inFields.length; j++) {
1925 var vals = inFields[j].split(";");
1926 fields[j] = [ parseFloat(vals[0]),
1927 parseFloat(vals[1]),
1928 parseFloat(vals[2]) ];
1931 // Values are just numbers
1932 for (var j = 1; j < inFields.length; j++) {
1933 fields[j] = parseFloat(inFields[j]);
1936 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1941 if (fields.length != expectedCols) {
1942 this.error("Number of columns
in line
" + i + " (" + fields.length +
1943 ") does not agree
with number of
labels (" + expectedCols +
1949 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1950 ret.sort(function(a,b) { return a[0] - b[0] });
1957 * The user has provided their data as a pre-packaged JS array. If the x values
1958 * are numeric, this is the same as dygraphs' internal format. If the x values
1959 * are dates, we need to convert them from Date objects to ms since epoch.
1960 * @param {Array.<Object>} data
1961 * @return {Array.<Object>} data with numeric x values.
1963 Dygraph.prototype.parseArray_ = function(data) {
1964 // Peek at the first x value to see if it's numeric.
1965 if (data.length == 0) {
1966 this.error("Can
't plot empty data set");
1969 if (data[0].length == 0) {
1970 this.error("Data set cannot contain an empty row");
1974 if (this.attr_("labels") == null) {
1975 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1976 "in the options parameter");
1977 this.attrs_.labels = [ "X" ];
1978 for (var i = 1; i < data[0].length; i++) {
1979 this.attrs_.labels.push("Y" + i);
1983 if (Dygraph.isDateLike(data[0][0])) {
1984 // Some intelligent defaults for a date x-axis.
1985 this.attrs_.xValueFormatter = Dygraph.dateString_;
1986 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
1987 this.attrs_.xTicker = Dygraph.dateTicker;
1989 // Assume they're all dates
.
1990 var parsedData
= Dygraph
.clone(data
);
1991 for (var i
= 0; i
< data
.length
; i
++) {
1992 if (parsedData
[i
].length
== 0) {
1993 this.error("Row " << (1 + i
) << " of data is empty");
1996 if (parsedData
[i
][0] == null
1997 || typeof(parsedData
[i
][0].getTime
) != 'function'
1998 || isNaN(parsedData
[i
][0].getTime())) {
1999 this.error("x value in row " + (1 + i
) + " is not a Date");
2002 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2006 // Some intelligent defaults for a numeric x-axis.
2007 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2008 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2014 * Parses a DataTable object from gviz.
2015 * The data is expected to have a first column that is either a date or a
2016 * number. All subsequent columns must be numbers. If there is a clear mismatch
2017 * between this.xValueParser_ and the type of the first column, it will be
2018 * fixed. Returned value is in the same format as return value of parseCSV_.
2019 * @param {Array.<Object>} data See above.
2022 Dygraph
.prototype.parseDataTable_
= function(data
) {
2023 var cols
= data
.getNumberOfColumns();
2024 var rows
= data
.getNumberOfRows();
2026 // Read column labels
2028 for (var i
= 0; i
< cols
; i
++) {
2029 labels
.push(data
.getColumnLabel(i
));
2030 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
2032 this.attrs_
.labels
= labels
;
2033 cols
= labels
.length
;
2035 var indepType
= data
.getColumnType(0);
2036 if (indepType
== 'date' || indepType
== 'datetime') {
2037 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2038 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2039 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2040 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2041 } else if (indepType
== 'number') {
2042 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2043 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2044 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2045 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2047 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2048 "column 1 of DataTable input (Got '" + indepType
+ "')");
2053 var outOfOrder
= false;
2054 for (var i
= 0; i
< rows
; i
++) {
2056 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2057 data
.getValue(i
, 0) === null) {
2058 this.warning("Ignoring row " + i
+
2059 " of DataTable because of undefined or null first column.");
2063 if (indepType
== 'date' || indepType
== 'datetime') {
2064 row
.push(data
.getValue(i
, 0).getTime());
2066 row
.push(data
.getValue(i
, 0));
2068 if (!this.attr_("errorBars")) {
2069 for (var j
= 1; j
< cols
; j
++) {
2070 row
.push(data
.getValue(i
, j
));
2073 for (var j
= 0; j
< cols
- 1; j
++) {
2074 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2077 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2084 this.warn("DataTable is out of order; order it correctly to speed loading.");
2085 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2090 // These functions are all based on MochiKit.
2091 Dygraph
.update
= function (self
, o
) {
2092 if (typeof(o
) != 'undefined' && o
!== null) {
2094 if (o
.hasOwnProperty(k
)) {
2102 Dygraph
.isArrayLike
= function (o
) {
2103 var typ
= typeof(o
);
2105 (typ
!= 'object' && !(typ
== 'function' &&
2106 typeof(o
.item
) == 'function')) ||
2108 typeof(o
.length
) != 'number' ||
2116 Dygraph
.isDateLike
= function (o
) {
2117 if (typeof(o
) != "object" || o
=== null ||
2118 typeof(o
.getTime
) != 'function') {
2124 Dygraph
.clone
= function(o
) {
2125 // TODO(danvk): figure out how MochiKit's version works
2127 for (var i
= 0; i
< o
.length
; i
++) {
2128 if (Dygraph
.isArrayLike(o
[i
])) {
2129 r
.push(Dygraph
.clone(o
[i
]));
2139 * Get the CSV data. If it's in a function, call that function. If it's in a
2140 * file, do an XMLHttpRequest to get it.
2143 Dygraph
.prototype.start_
= function() {
2144 if (typeof this.file_
== 'function') {
2145 // CSV string. Pretend we got it via XHR.
2146 this.loadedEvent_(this.file_());
2147 } else if (Dygraph
.isArrayLike(this.file_
)) {
2148 this.rawData_
= this.parseArray_(this.file_
);
2149 this.drawGraph_(this.rawData_
);
2150 } else if (typeof this.file_
== 'object' &&
2151 typeof this.file_
.getColumnRange
== 'function') {
2152 // must be a DataTable from gviz.
2153 this.rawData_
= this.parseDataTable_(this.file_
);
2154 this.drawGraph_(this.rawData_
);
2155 } else if (typeof this.file_
== 'string') {
2156 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2157 if (this.file_
.indexOf('\n') >= 0) {
2158 this.loadedEvent_(this.file_
);
2160 var req
= new XMLHttpRequest();
2162 req
.onreadystatechange
= function () {
2163 if (req
.readyState
== 4) {
2164 if (req
.status
== 200) {
2165 caller
.loadedEvent_(req
.responseText
);
2170 req
.open("GET", this.file_
, true);
2174 this.error("Unknown data format: " + (typeof this.file_
));
2179 * Changes various properties of the graph. These can include:
2181 * <li>file: changes the source data for the graph</li>
2182 * <li>errorBars: changes whether the data contains stddev</li>
2184 * @param {Object} attrs The new properties and values
2186 Dygraph
.prototype.updateOptions
= function(attrs
) {
2187 // TODO(danvk): this is a mess. Rethink this function.
2188 if (attrs
.rollPeriod
) {
2189 this.rollPeriod_
= attrs
.rollPeriod
;
2191 if (attrs
.dateWindow
) {
2192 this.dateWindow_
= attrs
.dateWindow
;
2194 if (attrs
.valueRange
) {
2195 this.valueRange_
= attrs
.valueRange
;
2197 Dygraph
.update(this.user_attrs_
, attrs
);
2199 this.labelsFromCSV_
= (this.attr_("labels") == null);
2201 // TODO(danvk): this doesn't match the constructor logic
2202 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2203 if (attrs
['file']) {
2204 this.file_
= attrs
['file'];
2207 this.drawGraph_(this.rawData_
);
2212 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2213 * containing div (which has presumably changed size since the dygraph was
2214 * instantiated. If the width/height are specified, the div will be resized.
2216 * This is far more efficient than destroying and re-instantiating a
2217 * Dygraph, since it doesn't have to reparse the underlying data.
2219 * @param {Number} width Width (in pixels)
2220 * @param {Number} height Height (in pixels)
2222 Dygraph
.prototype.resize
= function(width
, height
) {
2223 if (this.resize_lock
) {
2226 this.resize_lock
= true;
2228 if ((width
=== null) != (height
=== null)) {
2229 this.warn("Dygraph.resize() should be called with zero parameters or " +
2230 "two non-NULL parameters. Pretending it was zero.");
2231 width
= height
= null;
2234 // TODO(danvk): there should be a clear() method.
2235 this.maindiv_
.innerHTML
= "";
2236 this.attrs_
.labelsDiv
= null;
2239 this.maindiv_
.style
.width
= width
+ "px";
2240 this.maindiv_
.style
.height
= height
+ "px";
2241 this.width_
= width
;
2242 this.height_
= height
;
2244 this.width_
= this.maindiv_
.offsetWidth
;
2245 this.height_
= this.maindiv_
.offsetHeight
;
2248 this.createInterface_();
2249 this.drawGraph_(this.rawData_
);
2251 this.resize_lock
= false;
2255 * Adjusts the number of days in the rolling average. Updates the graph to
2256 * reflect the new averaging period.
2257 * @param {Number} length Number of days over which to average the data.
2259 Dygraph
.prototype.adjustRoll
= function(length
) {
2260 this.rollPeriod_
= length
;
2261 this.drawGraph_(this.rawData_
);
2265 * Returns a boolean array of visibility statuses.
2267 Dygraph
.prototype.visibility
= function() {
2268 // Do lazy-initialization, so that this happens after we know the number of
2270 if (!this.attr_("visibility")) {
2271 this.attrs_
["visibility"] = [];
2273 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2274 this.attr_("visibility").push(true);
2276 return this.attr_("visibility");
2280 * Changes the visiblity of a series.
2282 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2283 var x
= this.visibility();
2284 if (num
< 0 && num
>= x
.length
) {
2285 this.warn("invalid series number in setVisibility: " + num
);
2288 this.drawGraph_(this.rawData_
);
2293 * Create a new canvas element. This is more complex than a simple
2294 * document.createElement("canvas") because of IE and excanvas.
2296 Dygraph
.createCanvas
= function() {
2297 var canvas
= document
.createElement("canvas");
2299 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2301 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2309 * A wrapper around Dygraph that implements the gviz API.
2310 * @param {Object} container The DOM object the visualization should live in.
2312 Dygraph
.GVizChart
= function(container
) {
2313 this.container
= container
;
2316 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2317 this.container
.innerHTML
= '';
2318 this.date_graph
= new Dygraph(this.container
, data
, options
);
2322 * Google charts compatible setSelection
2323 * Only row selection is supported, all points in the row will be highlighted
2324 * @param {Array} array of the selected cells
2327 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2329 if (selection_array
.length
) {
2330 row
= selection_array
[0].row
;
2332 this.date_graph
.setSelection(row
);
2336 * Google charts compatible getSelection implementation
2337 * @return {Array} array of the selected cells
2340 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2343 var row
= this.date_graph
.getSelection();
2345 if (row
< 0) return selection
;
2348 for (var i
in this.date_graph
.layout_
.datasets
) {
2349 selection
.push({row
: row
, column
: col
});
2356 // Older pages may still use this name.
2357 DateGraph
= Dygraph
;