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,
131 // Various logging levels.
137 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
138 // Labels is no longer a constructor parameter, since it's typically set
139 // directly from the data source. It also conains a name for the x-axis,
140 // which the previous constructor form did not.
141 if (labels
!= null) {
142 var new_labels
= ["Date"];
143 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
144 Dygraph
.update(attrs
, { 'labels': new_labels
});
146 this.__init__(div
, file
, attrs
);
150 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
151 * and interaction <canvas> inside of it. See the constructor for details
153 * @param {Element} div the Element to render the graph into.
154 * @param {String | Function} file Source data
155 * @param {Object} attrs Miscellaneous other options
158 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
159 // Support two-argument constructor
160 if (attrs
== null) { attrs
= {}; }
162 // Copy the important bits into the object
163 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
166 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
167 this.previousVerticalX_
= -1;
168 this.fractions_
= attrs
.fractions
|| false;
169 this.dateWindow_
= attrs
.dateWindow
|| null;
170 this.valueRange_
= attrs
.valueRange
|| null;
171 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
172 this.is_initial_draw_
= true;
174 // Clear the div. This ensure that, if multiple dygraphs are passed the same
175 // div, then only one will be drawn.
178 // If the div isn't already sized then inherit from our attrs or
179 // give it a default size.
180 if (div
.style
.width
== '') {
181 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
183 if (div
.style
.height
== '') {
184 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
186 this.width_
= parseInt(div
.style
.width
, 10);
187 this.height_
= parseInt(div
.style
.height
, 10);
188 // The div might have been specified as percent of the current window size,
189 // convert that to an appropriate number of pixels.
190 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
191 this.width_
= div
.offsetWidth
;
193 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
194 this.height_
= div
.offsetHeight
;
197 if (this.width_
== 0) {
198 this.error("dygraph has zero width. Please specify a width in pixels.");
200 if (this.height_
== 0) {
201 this.error("dygraph has zero height. Please specify a height in pixels.");
204 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
205 if (attrs
['stackedGraph']) {
206 attrs
['fillGraph'] = true;
207 // TODO(nikhilk): Add any other stackedGraph checks here.
210 // Dygraphs has many options, some of which interact with one another.
211 // To keep track of everything, we maintain two sets of options:
213 // this.user_attrs_ only options explicitly set by the user.
214 // this.attrs_ defaults, options derived from user_attrs_, data.
216 // Options are then accessed this.attr_('attr'), which first looks at
217 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
218 // defaults without overriding behavior that the user specifically asks for.
219 this.user_attrs_
= {};
220 Dygraph
.update(this.user_attrs_
, attrs
);
223 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
225 this.boundaryIds_
= [];
227 // Make a note of whether labels will be pulled from the CSV file.
228 this.labelsFromCSV_
= (this.attr_("labels") == null);
230 // Create the containing DIV and other interactive elements
231 this.createInterface_();
236 Dygraph
.prototype.attr_
= function(name
) {
237 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
238 return this.user_attrs_
[name
];
239 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
240 return this.attrs_
[name
];
246 // TODO(danvk): any way I can get the line numbers to be this.warn call?
247 Dygraph
.prototype.log
= function(severity
, message
) {
248 if (typeof(console
) != 'undefined') {
251 console
.debug('dygraphs: ' + message
);
254 console
.info('dygraphs: ' + message
);
256 case Dygraph
.WARNING
:
257 console
.warn('dygraphs: ' + message
);
260 console
.error('dygraphs: ' + message
);
265 Dygraph
.prototype.info
= function(message
) {
266 this.log(Dygraph
.INFO
, message
);
268 Dygraph
.prototype.warn
= function(message
) {
269 this.log(Dygraph
.WARNING
, message
);
271 Dygraph
.prototype.error
= function(message
) {
272 this.log(Dygraph
.ERROR
, message
);
276 * Returns the current rolling period, as set by the user or an option.
277 * @return {Number} The number of days in the rolling window
279 Dygraph
.prototype.rollPeriod
= function() {
280 return this.rollPeriod_
;
284 * Returns the currently-visible x-range. This can be affected by zooming,
285 * panning or a call to updateOptions.
286 * Returns a two-element array: [left, right].
287 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
289 Dygraph
.prototype.xAxisRange
= function() {
290 if (this.dateWindow_
) return this.dateWindow_
;
292 // The entire chart is visible.
293 var left
= this.rawData_
[0][0];
294 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
295 return [left
, right
];
299 * Returns the currently-visible y-range. This can be affected by zooming,
300 * panning or a call to updateOptions.
301 * Returns a two-element array: [bottom, top].
303 Dygraph
.prototype.yAxisRange
= function() {
304 return this.displayedYRange_
;
308 * Convert from data coordinates to canvas/div X/Y coordinates.
309 * Returns a two-element array: [X, Y]
311 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
312 var ret
= [null, null];
313 var area
= this.plotter_
.area
;
315 var xRange
= this.xAxisRange();
316 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
320 var yRange
= this.yAxisRange();
321 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
327 // TODO(danvk): use these functions throughout dygraphs.
329 * Convert from canvas/div coords to data coordinates.
330 * Returns a two-element array: [X, Y]
332 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
333 var ret
= [null, null];
334 var area
= this.plotter_
.area
;
336 var xRange
= this.xAxisRange();
337 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
341 var yRange
= this.yAxisRange();
342 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
348 Dygraph
.addEvent
= function(el
, evt
, fn
) {
349 var normed_fn
= function(e
) {
350 if (!e
) var e
= window
.event
;
353 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
354 el
.addEventListener(evt
, normed_fn
, false);
356 el
.attachEvent('on' + evt
, normed_fn
);
360 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
361 var ctx
= cnv
.getContext("2d");
363 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
368 * Generates interface elements for the Dygraph: a containing div, a div to
369 * display the current point, and a textbox to adjust the rolling average
370 * period. Also creates the Renderer/Layout elements.
373 Dygraph
.prototype.createInterface_
= function() {
374 // Create the all-enclosing graph div
375 var enclosing
= this.maindiv_
;
377 this.graphDiv
= document
.createElement("div");
378 this.graphDiv
.style
.width
= this.width_
+ "px";
379 this.graphDiv
.style
.height
= this.height_
+ "px";
380 enclosing
.appendChild(this.graphDiv
);
384 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
386 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
387 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
388 - 2 * this.attr_("axisTickSize");
389 this.clippingArea_
= clip
;
391 // Create the canvas for interactive parts of the chart.
392 this.canvas_
= Dygraph
.createCanvas();
393 this.canvas_
.style
.position
= "absolute";
394 this.canvas_
.width
= this.width_
;
395 this.canvas_
.height
= this.height_
;
396 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
397 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
399 // ... and for static parts of the chart.
400 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
402 // The interactive parts of the graph are drawn on top of the chart.
403 this.graphDiv
.appendChild(this.hidden_
);
404 this.graphDiv
.appendChild(this.canvas_
);
405 this.mouseEventElement_
= this.canvas_
;
407 // Make sure we don't overdraw.
408 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
409 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
412 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
413 dygraph
.mouseMove_(e
);
415 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
416 dygraph
.mouseOut_(e
);
419 // Create the grapher
420 // TODO(danvk): why does the Layout need its own set of options?
421 this.layoutOptions_
= { 'xOriginIsZero': false };
422 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
423 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
424 Dygraph
.update(this.layoutOptions_
, {
425 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
427 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
429 // TODO(danvk): why does the Renderer need its own set of options?
430 this.renderOptions_
= { colorScheme
: this.colors_
,
432 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
433 Dygraph
.update(this.renderOptions_
, this.attrs_
);
434 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
435 this.plotter_
= new DygraphCanvasRenderer(this,
436 this.hidden_
, this.layout_
,
437 this.renderOptions_
);
439 this.createStatusMessage_();
440 this.createRollInterface_();
441 this.createDragInterface_();
445 * Detach DOM elements in the dygraph and null out all data references.
446 * Calling this when you're done with a dygraph can dramatically reduce memory
447 * usage. See, e.g., the tests/perf.html example.
449 Dygraph
.prototype.destroy
= function() {
450 var removeRecursive
= function(node
) {
451 while (node
.hasChildNodes()) {
452 removeRecursive(node
.firstChild
);
453 node
.removeChild(node
.firstChild
);
456 removeRecursive(this.maindiv_
);
458 var nullOut
= function(obj
) {
460 if (typeof(obj
[n
]) === 'object') {
466 // These may not all be necessary, but it can't hurt...
467 nullOut(this.layout_
);
468 nullOut(this.plotter_
);
473 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
474 * this particular canvas. All Dygraph work is done on this.canvas_.
475 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
476 * @return {Object} The newly-created canvas
479 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
480 var h
= Dygraph
.createCanvas();
481 h
.style
.position
= "absolute";
482 // TODO(danvk): h should be offset from canvas. canvas needs to include
483 // some extra area to make it easier to zoom in on the far left and far
484 // right. h needs to be precisely the plot area, so that clipping occurs.
485 h
.style
.top
= canvas
.style
.top
;
486 h
.style
.left
= canvas
.style
.left
;
487 h
.width
= this.width_
;
488 h
.height
= this.height_
;
489 h
.style
.width
= this.width_
+ "px"; // for IE
490 h
.style
.height
= this.height_
+ "px"; // for IE
494 // Taken from MochiKit.Color
495 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
499 if (saturation
=== 0) {
504 var i
= Math
.floor(hue
* 6);
505 var f
= (hue
* 6) - i
;
506 var p
= value
* (1 - saturation
);
507 var q
= value
* (1 - (saturation
* f
));
508 var t
= value
* (1 - (saturation
* (1 - f
)));
510 case 1: red
= q
; green
= value
; blue
= p
; break;
511 case 2: red
= p
; green
= value
; blue
= t
; break;
512 case 3: red
= p
; green
= q
; blue
= value
; break;
513 case 4: red
= t
; green
= p
; blue
= value
; break;
514 case 5: red
= value
; green
= p
; blue
= q
; break;
515 case 6: // fall through
516 case 0: red
= value
; green
= t
; blue
= p
; break;
519 red
= Math
.floor(255 * red
+ 0.5);
520 green
= Math
.floor(255 * green
+ 0.5);
521 blue
= Math
.floor(255 * blue
+ 0.5);
522 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
527 * Generate a set of distinct colors for the data series. This is done with a
528 * color wheel. Saturation/Value are customizable, and the hue is
529 * equally-spaced around the color wheel. If a custom set of colors is
530 * specified, that is used instead.
533 Dygraph
.prototype.setColors_
= function() {
534 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
535 // away with this.renderOptions_.
536 var num
= this.attr_("labels").length
- 1;
538 var colors
= this.attr_('colors');
540 var sat
= this.attr_('colorSaturation') || 1.0;
541 var val
= this.attr_('colorValue') || 0.5;
542 var half
= Math
.ceil(num
/ 2);
543 for (var i
= 1; i
<= num
; i
++) {
544 if (!this.visibility()[i
-1]) continue;
545 // alternate colors for high contrast.
546 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
547 var hue
= (1.0 * idx
/ (1 + num
));
548 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
551 for (var i
= 0; i
< num
; i
++) {
552 if (!this.visibility()[i
]) continue;
553 var colorStr
= colors
[i
% colors
.length
];
554 this.colors_
.push(colorStr
);
558 // TODO(danvk): update this w/r
/t/ the
new options system
.
559 this.renderOptions_
.colorScheme
= this.colors_
;
560 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
561 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
562 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
566 * Return the list of colors. This is either the list of colors passed in the
567 * attributes, or the autogenerated list of rgb(r,g,b) strings.
568 * @return {Array<string>} The list of colors.
570 Dygraph
.prototype.getColors
= function() {
574 // The following functions are from quirksmode.org with a modification for Safari from
575 // http://blog.firetree.net/2005/07/04/javascript-find-position/
576 // http://www.quirksmode.org/js
/findpos
.html
577 Dygraph
.findPosX
= function(obj
) {
582 curleft
+= obj
.offsetLeft
;
583 if(!obj
.offsetParent
)
585 obj
= obj
.offsetParent
;
592 Dygraph
.findPosY
= function(obj
) {
597 curtop
+= obj
.offsetTop
;
598 if(!obj
.offsetParent
)
600 obj
= obj
.offsetParent
;
610 * Create the div that contains information on the selected point(s)
611 * This goes in the top right of the canvas, unless an external div has already
615 Dygraph
.prototype.createStatusMessage_
= function(){
616 if (!this.attr_("labelsDiv")) {
617 var divWidth
= this.attr_('labelsDivWidth');
619 "position": "absolute",
622 "width": divWidth
+ "px",
624 "left": (this.width_
- divWidth
- 2) + "px",
625 "background": "white",
627 "overflow": "hidden"};
628 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
629 var div
= document
.createElement("div");
630 for (var name
in messagestyle
) {
631 if (messagestyle
.hasOwnProperty(name
)) {
632 div
.style
[name
] = messagestyle
[name
];
635 this.graphDiv
.appendChild(div
);
636 this.attrs_
.labelsDiv
= div
;
641 * Create the text box to adjust the averaging period
642 * @return {Object} The newly-created text box
645 Dygraph
.prototype.createRollInterface_
= function() {
646 var display
= this.attr_('showRoller') ? "block" : "none";
647 var textAttr
= { "position": "absolute",
649 "top": (this.plotter_
.area
.h
- 25) + "px",
650 "left": (this.plotter_
.area
.x
+ 1) + "px",
653 var roller
= document
.createElement("input");
654 roller
.type
= "text";
656 roller
.value
= this.rollPeriod_
;
657 for (var name
in textAttr
) {
658 if (textAttr
.hasOwnProperty(name
)) {
659 roller
.style
[name
] = textAttr
[name
];
663 var pa
= this.graphDiv
;
664 pa
.appendChild(roller
);
666 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
670 // These functions are taken from MochiKit.Signal
671 Dygraph
.pageX
= function(e
) {
673 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
676 var b
= document
.body
;
678 (de
.scrollLeft
|| b
.scrollLeft
) -
679 (de
.clientLeft
|| 0);
683 Dygraph
.pageY
= function(e
) {
685 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
688 var b
= document
.body
;
690 (de
.scrollTop
|| b
.scrollTop
) -
696 * Set up all the mouse handlers needed to capture dragging behavior for zoom
700 Dygraph
.prototype.createDragInterface_
= function() {
703 // Tracks whether the mouse is down right now
704 var isZooming
= false;
705 var isPanning
= false;
706 var dragStartX
= null;
707 var dragStartY
= null;
711 var draggingDate
= null;
712 var dateRange
= null;
714 // Utility function to convert page-wide coordinates to canvas coords
717 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
718 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
720 // Draw zoom rectangles when the mouse is down and the user moves around
721 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
723 dragEndX
= getX(event
);
724 dragEndY
= getY(event
);
726 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
728 } else if (isPanning
) {
729 dragEndX
= getX(event
);
730 dragEndY
= getY(event
);
732 // Want to have it so that:
733 // 1. draggingDate appears at dragEndX
734 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
736 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
737 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
738 self
.drawGraph_(self
.rawData_
);
742 // Track the beginning of drag events
743 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
744 px
= Dygraph
.findPosX(self
.canvas_
);
745 py
= Dygraph
.findPosY(self
.canvas_
);
746 dragStartX
= getX(event
);
747 dragStartY
= getY(event
);
749 if (event
.altKey
|| event
.shiftKey
) {
750 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
752 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
753 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
760 // If the user releases the mouse button during a drag, but not over the
761 // canvas, then it doesn't count as a zooming action.
762 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
763 if (isZooming
|| isPanning
) {
776 // Temporarily cancel the dragging event when the mouse leaves the graph
777 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
784 // If the mouse is released on the canvas during a drag event, then it's a
785 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
786 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
789 dragEndX
= getX(event
);
790 dragEndY
= getY(event
);
791 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
792 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
794 if (regionWidth
< 2 && regionHeight
< 2 &&
795 self
.attr_('clickCallback') != null &&
796 self
.lastx_
!= undefined
) {
797 // TODO(danvk): pass along more info about the points.
798 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
801 if (regionWidth
>= 10) {
802 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
803 Math
.max(dragStartX
, dragEndX
));
805 self
.canvas_
.getContext("2d").clearRect(0, 0,
807 self
.canvas_
.height
);
821 // Double-clicking zooms back out
822 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
823 if (self
.dateWindow_
== null) return;
824 self
.dateWindow_
= null;
825 self
.drawGraph_(self
.rawData_
);
826 var minDate
= self
.rawData_
[0][0];
827 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
828 if (self
.attr_("zoomCallback")) {
829 self
.attr_("zoomCallback")(minDate
, maxDate
);
835 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
836 * up any previous zoom rectangles that were drawn. This could be optimized to
837 * avoid extra redrawing, but it's tricky to avoid interactions with the status
839 * @param {Number} startX The X position where the drag started, in canvas
841 * @param {Number} endX The current X position of the drag, in canvas coords.
842 * @param {Number} prevEndX The value of endX on the previous call to this
843 * function. Used to avoid excess redrawing
846 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
847 var ctx
= this.canvas_
.getContext("2d");
849 // Clean up from the previous rect if necessary
851 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
852 Math
.abs(startX
- prevEndX
), this.height_
);
855 // Draw a light-grey rectangle to show the new viewing area
856 if (endX
&& startX
) {
857 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
858 ctx
.fillRect(Math
.min(startX
, endX
), 0,
859 Math
.abs(endX
- startX
), this.height_
);
864 * Zoom to something containing [lowX, highX]. These are pixel coordinates
865 * in the canvas. The exact zoom window may be slightly larger if there are no
866 * data points near lowX or highX. This function redraws the graph.
867 * @param {Number} lowX The leftmost pixel value that should be visible.
868 * @param {Number} highX The rightmost pixel value that should be visible.
871 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
872 // Find the earliest and latest dates contained in this canvasx range.
873 var r
= this.toDataCoords(lowX
, null);
875 r
= this.toDataCoords(highX
, null);
878 this.dateWindow_
= [minDate
, maxDate
];
879 this.drawGraph_(this.rawData_
);
880 if (this.attr_("zoomCallback")) {
881 this.attr_("zoomCallback")(minDate
, maxDate
);
886 * When the mouse moves in the canvas, display information about a nearby data
887 * point and draw dots over those points in the data series. This function
888 * takes care of cleanup of previously-drawn dots.
889 * @param {Object} event The mousemove event from the browser.
892 Dygraph
.prototype.mouseMove_
= function(event
) {
893 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
894 var points
= this.layout_
.points
;
899 // Loop through all the points and find the date nearest to our current
901 var minDist
= 1e+100;
903 for (var i
= 0; i
< points
.length
; i
++) {
904 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
905 if (dist
> minDist
) continue;
909 if (idx
>= 0) lastx
= points
[idx
].xval
;
910 // Check that you can really highlight the last day's data
911 if (canvasx
> points
[points
.length
-1].canvasx
)
912 lastx
= points
[points
.length
-1].xval
;
914 // Extract the points we've selected
915 this.selPoints_
= [];
916 var l
= points
.length
;
917 if (!this.attr_("stackedGraph")) {
918 for (var i
= 0; i
< l
; i
++) {
919 if (points
[i
].xval
== lastx
) {
920 this.selPoints_
.push(points
[i
]);
924 // Need to 'unstack' points starting from the bottom
925 var cumulative_sum
= 0;
926 for (var i
= l
- 1; i
>= 0; i
--) {
927 if (points
[i
].xval
== lastx
) {
928 var p
= {}; // Clone the point since we modify it
929 for (var k
in points
[i
]) {
932 p
.yval
-= cumulative_sum
;
933 cumulative_sum
+= p
.yval
;
934 this.selPoints_
.push(p
);
937 this.selPoints_
.reverse();
940 if (this.attr_("highlightCallback")) {
941 var px
= this.lastx_
;
942 if (px
!== null && lastx
!= px
) {
943 // only fire if the selected point has changed.
944 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
948 // Save last x position for callbacks.
951 this.updateSelection_();
955 * Draw dots over the selectied points in the data series. This function
956 * takes care of cleanup of previously-drawn dots.
959 Dygraph
.prototype.updateSelection_
= function() {
960 // Clear the previously drawn vertical, if there is one
961 var circleSize
= this.attr_('highlightCircleSize');
962 var ctx
= this.canvas_
.getContext("2d");
963 if (this.previousVerticalX_
>= 0) {
964 var px
= this.previousVerticalX_
;
965 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
968 var isOK
= function(x
) { return x
&& !isNaN(x
); };
970 if (this.selPoints_
.length
> 0) {
971 var canvasx
= this.selPoints_
[0].canvasx
;
973 // Set the status message to indicate the selected point(s)
974 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
975 var fmtFunc
= this.attr_('yValueFormatter');
976 var clen
= this.colors_
.length
;
978 if (this.attr_('showLabelsOnHighlight')) {
979 // Set the status message to indicate the selected point(s)
980 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
981 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
982 if (this.attr_("labelsSeparateLines")) {
985 var point
= this.selPoints_
[i
];
986 var c
= new RGBColor(this.colors_
[i
%clen
]);
987 var yval
= fmtFunc(point
.yval
);
988 replace
+= " <b><font color='" + c
.toHex() + "'>"
989 + point
.name
+ "</font></b>:"
993 this.attr_("labelsDiv").innerHTML
= replace
;
996 // Draw colored circles over the center of each selected point
998 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
999 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1001 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1002 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1003 0, 2 * Math
.PI
, false);
1008 this.previousVerticalX_
= canvasx
;
1013 * Set manually set selected dots, and display information about them
1014 * @param int row number that should by highlighted
1015 * false value clears the selection
1018 Dygraph
.prototype.setSelection
= function(row
) {
1019 // Extract the points we've selected
1020 this.selPoints_
= [];
1023 if (row
!== false) {
1024 row
= row
-this.boundaryIds_
[0][0];
1027 if (row
!== false && row
>= 0) {
1028 for (var i
in this.layout_
.datasets
) {
1029 if (row
< this.layout_
.datasets
[i
].length
) {
1030 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1032 pos
+= this.layout_
.datasets
[i
].length
;
1036 if (this.selPoints_
.length
) {
1037 this.lastx_
= this.selPoints_
[0].xval
;
1038 this.updateSelection_();
1041 this.clearSelection();
1047 * The mouse has left the canvas. Clear out whatever artifacts remain
1048 * @param {Object} event the mouseout event from the browser.
1051 Dygraph
.prototype.mouseOut_
= function(event
) {
1052 if (this.attr_("unhighlightCallback")) {
1053 this.attr_("unhighlightCallback")(event
);
1056 if (this.attr_("hideOverlayOnMouseOut")) {
1057 this.clearSelection();
1062 * Remove all selection from the canvas
1065 Dygraph
.prototype.clearSelection
= function() {
1066 // Get rid of the overlay data
1067 var ctx
= this.canvas_
.getContext("2d");
1068 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1069 this.attr_("labelsDiv").innerHTML
= "";
1070 this.selPoints_
= [];
1075 * Returns the number of the currently selected row
1076 * @return int row number, of -1 if nothing is selected
1079 Dygraph
.prototype.getSelection
= function() {
1080 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1084 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1085 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1086 return row
+ this.boundaryIds_
[0][0];
1092 Dygraph
.zeropad
= function(x
) {
1093 if (x
< 10) return "0" + x
; else return "" + x
;
1097 * Return a string version of the hours, minutes and seconds portion of a date.
1098 * @param {Number} date The JavaScript date (ms since epoch)
1099 * @return {String} A time of the form "HH:MM:SS"
1102 Dygraph
.hmsString_
= function(date
) {
1103 var zeropad
= Dygraph
.zeropad
;
1104 var d
= new Date(date
);
1105 if (d
.getSeconds()) {
1106 return zeropad(d
.getHours()) + ":" +
1107 zeropad(d
.getMinutes()) + ":" +
1108 zeropad(d
.getSeconds());
1110 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1115 * Convert a JS date to a string appropriate to display on an axis that
1116 * is displaying values at the stated granularity.
1117 * @param {Date} date The date to format
1118 * @param {Number} granularity One of the Dygraph granularity constants
1119 * @return {String} The formatted date
1122 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1123 if (granularity
>= Dygraph
.MONTHLY
) {
1124 return date
.strftime('%b %y');
1126 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1127 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1128 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1130 return Dygraph
.hmsString_(date
.getTime());
1136 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1137 * @param {Number} date The JavaScript date (ms since epoch)
1138 * @return {String} A date of the form "YYYY/MM/DD"
1141 Dygraph
.dateString_
= function(date
, self
) {
1142 var zeropad
= Dygraph
.zeropad
;
1143 var d
= new Date(date
);
1146 var year
= "" + d
.getFullYear();
1147 // Get a 0 padded month string
1148 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1149 // Get a 0 padded day string
1150 var day
= zeropad(d
.getDate());
1153 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1154 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1156 return year
+ "/" + month + "/" + day
+ ret
;
1160 * Round a number to the specified number of digits past the decimal point.
1161 * @param {Number} num The number to round
1162 * @param {Number} places The number of decimals to which to round
1163 * @return {Number} The rounded number
1166 Dygraph
.round_
= function(num
, places
) {
1167 var shift
= Math
.pow(10, places
);
1168 return Math
.round(num
* shift
)/shift
;
1172 * Fires when there's data available to be graphed.
1173 * @param {String} data Raw CSV data to be plotted
1176 Dygraph
.prototype.loadedEvent_
= function(data
) {
1177 this.rawData_
= this.parseCSV_(data
);
1178 this.drawGraph_(this.rawData_
);
1181 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1182 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1183 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1186 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1189 Dygraph
.prototype.addXTicks_
= function() {
1190 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1191 var startDate
, endDate
;
1192 if (this.dateWindow_
) {
1193 startDate
= this.dateWindow_
[0];
1194 endDate
= this.dateWindow_
[1];
1196 startDate
= this.rawData_
[0][0];
1197 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1200 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1201 this.layout_
.updateOptions({xTicks
: xTicks
});
1204 // Time granularity enumeration
1205 Dygraph
.SECONDLY
= 0;
1206 Dygraph
.TWO_SECONDLY
= 1;
1207 Dygraph
.FIVE_SECONDLY
= 2;
1208 Dygraph
.TEN_SECONDLY
= 3;
1209 Dygraph
.THIRTY_SECONDLY
= 4;
1210 Dygraph
.MINUTELY
= 5;
1211 Dygraph
.TWO_MINUTELY
= 6;
1212 Dygraph
.FIVE_MINUTELY
= 7;
1213 Dygraph
.TEN_MINUTELY
= 8;
1214 Dygraph
.THIRTY_MINUTELY
= 9;
1215 Dygraph
.HOURLY
= 10;
1216 Dygraph
.TWO_HOURLY
= 11;
1217 Dygraph
.SIX_HOURLY
= 12;
1219 Dygraph
.WEEKLY
= 14;
1220 Dygraph
.MONTHLY
= 15;
1221 Dygraph
.QUARTERLY
= 16;
1222 Dygraph
.BIANNUAL
= 17;
1223 Dygraph
.ANNUAL
= 18;
1224 Dygraph
.DECADAL
= 19;
1225 Dygraph
.NUM_GRANULARITIES
= 20;
1227 Dygraph
.SHORT_SPACINGS
= [];
1228 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1229 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1230 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1231 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1232 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1233 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1234 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1235 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1236 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1237 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1238 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1239 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1240 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1241 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1242 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1246 // If we used this time granularity, how many ticks would there be?
1247 // This is only an approximation, but it's generally good enough.
1249 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1250 if (granularity
< Dygraph
.MONTHLY
) {
1251 // Generate one tick mark for every fixed interval of time.
1252 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1253 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1255 var year_mod
= 1; // e.g. to only print one point every 10 years.
1256 var num_months
= 12;
1257 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1258 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1259 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1260 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1262 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1263 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1264 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1270 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1271 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1273 // Returns an array containing {v: millis, label: label} dictionaries.
1275 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1276 var formatter
= this.attr_("xAxisLabelFormatter");
1278 if (granularity
< Dygraph
.MONTHLY
) {
1279 // Generate one tick mark for every fixed interval of time.
1280 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1281 var format
= '%d%b'; // e.g. "1Jan"
1283 // Find a time less than start_time which occurs on a "nice" time boundary
1284 // for this granularity.
1285 var g
= spacing
/ 1000;
1286 var d
= new Date(start_time
);
1287 if (g
<= 60) { // seconds
1288 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1292 if (g
<= 60) { // minutes
1293 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1298 if (g
<= 24) { // days
1299 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1304 if (g
== 7) { // one week
1305 d
.setDate(d
.getDate() - d
.getDay());
1310 start_time
= d
.getTime();
1312 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1313 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1316 // Display a tick mark on the first of a set of months of each year.
1317 // Years get a tick mark iff y % year_mod == 0. This is useful for
1318 // displaying a tick mark once every 10 years, say, on long time scales.
1320 var year_mod
= 1; // e.g. to only print one point every 10 years.
1322 if (granularity
== Dygraph
.MONTHLY
) {
1323 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1324 } else if (granularity
== Dygraph
.QUARTERLY
) {
1325 months
= [ 0, 3, 6, 9 ];
1326 } else if (granularity
== Dygraph
.BIANNUAL
) {
1328 } else if (granularity
== Dygraph
.ANNUAL
) {
1330 } else if (granularity
== Dygraph
.DECADAL
) {
1335 var start_year
= new Date(start_time
).getFullYear();
1336 var end_year
= new Date(end_time
).getFullYear();
1337 var zeropad
= Dygraph
.zeropad
;
1338 for (var i
= start_year
; i
<= end_year
; i
++) {
1339 if (i
% year_mod
!= 0) continue;
1340 for (var j
= 0; j
< months
.length
; j
++) {
1341 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1342 var t
= Date
.parse(date_str
);
1343 if (t
< start_time
|| t
> end_time
) continue;
1344 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1354 * Add ticks to the x-axis based on a date range.
1355 * @param {Number} startDate Start of the date window (millis since epoch)
1356 * @param {Number} endDate End of the date window (millis since epoch)
1357 * @return {Array.<Object>} Array of {label, value} tuples.
1360 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1362 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1363 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1364 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1371 return self
.GetXAxis(startDate
, endDate
, chosen
);
1373 // TODO(danvk): signal error.
1378 * Add ticks when the x axis has numbers on it (instead of dates)
1379 * @param {Number} startDate Start of the date window (millis since epoch)
1380 * @param {Number} endDate End of the date window (millis since epoch)
1381 * @return {Array.<Object>} Array of {label, value} tuples.
1384 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1386 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1387 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1388 // The first spacing greater than pixelsPerYLabel is what we use.
1389 // TODO(danvk): version that works on a log scale.
1390 if (self
.attr_("labelsKMG2")) {
1391 var mults
= [1, 2, 4, 8];
1393 var mults
= [1, 2, 5];
1395 var scale
, low_val
, high_val
, nTicks
;
1396 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1397 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1398 for (var i
= -10; i
< 50; i
++) {
1399 if (self
.attr_("labelsKMG2")) {
1400 var base_scale
= Math
.pow(16, i
);
1402 var base_scale
= Math
.pow(10, i
);
1404 for (var j
= 0; j
< mults
.length
; j
++) {
1405 scale
= base_scale
* mults
[j
];
1406 low_val
= Math
.floor(minV
/ scale
) * scale
;
1407 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1408 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1409 var spacing
= self
.height_
/ nTicks
;
1410 // wish I could break out of both loops at once...
1411 if (spacing
> pixelsPerTick
) break;
1413 if (spacing
> pixelsPerTick
) break;
1416 // Construct labels for the ticks
1420 if (self
.attr_("labelsKMB")) {
1422 k_labels
= [ "K", "M", "B", "T" ];
1424 if (self
.attr_("labelsKMG2")) {
1425 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1427 k_labels
= [ "k", "M", "G", "T" ];
1430 // Allow reverse y-axis if it's explicitly requested.
1431 if (low_val
> high_val
) scale
*= -1;
1433 for (var i
= 0; i
< nTicks
; i
++) {
1434 var tickV
= low_val
+ i
* scale
;
1435 var absTickV
= Math
.abs(tickV
);
1436 var label
= Dygraph
.round_(tickV
, 2);
1437 if (k_labels
.length
) {
1438 // Round up to an appropriate unit.
1440 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1441 if (absTickV
>= n
) {
1442 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1447 ticks
.push( {label
: label
, v
: tickV
} );
1453 * Adds appropriate ticks on the y-axis
1454 * @param {Number} minY The minimum Y value in the data set
1455 * @param {Number} maxY The maximum Y value in the data set
1458 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1459 // Set the number of ticks so that the labels are human-friendly.
1460 // TODO(danvk): make this an attribute as well.
1461 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1462 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1466 // Computes the range of the data series (including confidence intervals).
1467 // series is either [ [x1, y1], [x2, y2], ... ] or
1468 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1469 // Returns [low, high]
1470 Dygraph
.prototype.extremeValues_
= function(series
) {
1471 var minY
= null, maxY
= null;
1473 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1475 // With custom bars, maxY is the max of the high values.
1476 for (var j
= 0; j
< series
.length
; j
++) {
1477 var y
= series
[j
][1][0];
1479 var low
= y
- series
[j
][1][1];
1480 var high
= y
+ series
[j
][1][2];
1481 if (low
> y
) low
= y
; // this can happen with custom bars,
1482 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1483 if (maxY
== null || high
> maxY
) {
1486 if (minY
== null || low
< minY
) {
1491 for (var j
= 0; j
< series
.length
; j
++) {
1492 var y
= series
[j
][1];
1493 if (y
=== null || isNaN(y
)) continue;
1494 if (maxY
== null || y
> maxY
) {
1497 if (minY
== null || y
< minY
) {
1503 return [minY
, maxY
];
1507 * Update the graph with new data. Data is in the format
1508 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1509 * or, if errorBars=true,
1510 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1511 * @param {Array.<Object>} data The data (see above)
1514 Dygraph
.prototype.drawGraph_
= function(data
) {
1515 // This is used to set the second parameter to drawCallback, below.
1516 var is_initial_draw
= this.is_initial_draw_
;
1517 this.is_initial_draw_
= false;
1519 var minY
= null, maxY
= null;
1520 this.layout_
.removeAllDatasets();
1522 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1524 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1526 // Loop over the fields (series). Go from the last to the first,
1527 // because if they're stacked that's how we accumulate the values.
1529 var cumulative_y
= []; // For stacked series.
1532 // Loop over all fields and create datasets
1533 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1534 if (!this.visibility()[i
- 1]) continue;
1537 for (var j
= 0; j
< data
.length
; j
++) {
1538 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1539 var date
= data
[j
][0];
1540 series
.push([date
, data
[j
][i
]]);
1543 series
= this.rollingAverage(series
, this.rollPeriod_
);
1545 // Prune down to the desired range, if necessary (for zooming)
1546 // Because there can be lines going to points outside of the visible area,
1547 // we actually prune to visible points, plus one on either side.
1548 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1549 if (this.dateWindow_
) {
1550 var low
= this.dateWindow_
[0];
1551 var high
= this.dateWindow_
[1];
1553 // TODO(danvk): do binary search instead of linear search.
1554 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1555 var firstIdx
= null, lastIdx
= null;
1556 for (var k
= 0; k
< series
.length
; k
++) {
1557 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1560 if (series
[k
][0] <= high
) {
1564 if (firstIdx
=== null) firstIdx
= 0;
1565 if (firstIdx
> 0) firstIdx
--;
1566 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1567 if (lastIdx
< series
.length
- 1) lastIdx
++;
1568 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1569 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1570 pruned
.push(series
[k
]);
1574 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1577 var extremes
= this.extremeValues_(series
);
1578 var thisMinY
= extremes
[0];
1579 var thisMaxY
= extremes
[1];
1580 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1581 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1584 for (var j
=0; j
<series
.length
; j
++) {
1585 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1588 } else if (this.attr_("stackedGraph")) {
1589 var l
= series
.length
;
1591 for (var j
= 0; j
< l
; j
++) {
1592 // If one data set has a NaN, let all subsequent stacked
1593 // sets inherit the NaN -- only start at 0 for the first set.
1594 var x
= series
[j
][0];
1595 if (cumulative_y
[x
] === undefined
)
1596 cumulative_y
[x
] = 0;
1598 actual_y
= series
[j
][1];
1599 cumulative_y
[x
] += actual_y
;
1601 series
[j
] = [x
, cumulative_y
[x
]]
1603 if (!maxY
|| cumulative_y
[x
] > maxY
)
1604 maxY
= cumulative_y
[x
];
1608 datasets
[i
] = series
;
1611 for (var i
= 1; i
< datasets
.length
; i
++) {
1612 if (!this.visibility()[i
- 1]) continue;
1613 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1616 // Use some heuristics to come up with a good maxY value, unless it's been
1617 // set explicitly by the user.
1618 if (this.valueRange_
!= null) {
1619 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1620 this.displayedYRange_
= this.valueRange_
;
1622 // This affects the calculation of span, below.
1623 if (this.attr_("includeZero") && minY
> 0) {
1627 // Add some padding and round up to an integer to be human-friendly.
1628 var span
= maxY
- minY
;
1629 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1630 if (span
== 0) { span
= maxY
; }
1631 var maxAxisY
= maxY
+ 0.1 * span
;
1632 var minAxisY
= minY
- 0.1 * span
;
1634 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1635 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1636 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1638 if (this.attr_("includeZero")) {
1639 if (maxY
< 0) maxAxisY
= 0;
1640 if (minY
> 0) minAxisY
= 0;
1643 this.addYTicks_(minAxisY
, maxAxisY
);
1644 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1649 // Tell PlotKit to use this new data and render itself
1650 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1651 this.layout_
.evaluateWithError();
1652 this.plotter_
.clear();
1653 this.plotter_
.render();
1654 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1655 this.canvas_
.height
);
1657 if (this.attr_("drawCallback") !== null) {
1658 this.attr_("drawCallback")(this, is_initial_draw
);
1663 * Calculates the rolling average of a data set.
1664 * If originalData is [label, val], rolls the average of those.
1665 * If originalData is [label, [, it's interpreted as [value, stddev]
1666 * and the roll is returned in the same form, with appropriately reduced
1667 * stddev for each value.
1668 * Note that this is where fractional input (i.e. '5/10') is converted into
1670 * @param {Array} originalData The data in the appropriate format (see above)
1671 * @param {Number} rollPeriod The number of days over which to average the data
1673 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1674 if (originalData
.length
< 2)
1675 return originalData
;
1676 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1677 var rollingData
= [];
1678 var sigma
= this.attr_("sigma");
1680 if (this.fractions_
) {
1682 var den
= 0; // numerator/denominator
1684 for (var i
= 0; i
< originalData
.length
; i
++) {
1685 num
+= originalData
[i
][1][0];
1686 den
+= originalData
[i
][1][1];
1687 if (i
- rollPeriod
>= 0) {
1688 num
-= originalData
[i
- rollPeriod
][1][0];
1689 den
-= originalData
[i
- rollPeriod
][1][1];
1692 var date
= originalData
[i
][0];
1693 var value
= den
? num
/ den
: 0.0;
1694 if (this.attr_("errorBars")) {
1695 if (this.wilsonInterval_
) {
1696 // For more details on this confidence interval, see:
1697 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1699 var p
= value
< 0 ? 0 : value
, n
= den
;
1700 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1701 var denom
= 1 + sigma
* sigma
/ den
;
1702 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1703 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1704 rollingData
[i
] = [date
,
1705 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1707 rollingData
[i
] = [date
, [0, 0, 0]];
1710 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1711 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1714 rollingData
[i
] = [date
, mult
* value
];
1717 } else if (this.attr_("customBars")) {
1722 for (var i
= 0; i
< originalData
.length
; i
++) {
1723 var data
= originalData
[i
][1];
1725 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1727 if (y
!= null && !isNaN(y
)) {
1733 if (i
- rollPeriod
>= 0) {
1734 var prev
= originalData
[i
- rollPeriod
];
1735 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1742 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1743 1.0 * (mid
- low
) / count
,
1744 1.0 * (high
- mid
) / count
]];
1747 // Calculate the rolling average for the first rollPeriod - 1 points where
1748 // there is not enough data to roll over the full number of days
1749 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1750 if (!this.attr_("errorBars")){
1751 if (rollPeriod
== 1) {
1752 return originalData
;
1755 for (var i
= 0; i
< originalData
.length
; i
++) {
1758 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1759 var y
= originalData
[j
][1];
1760 if (y
== null || isNaN(y
)) continue;
1762 sum
+= originalData
[j
][1];
1765 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1767 rollingData
[i
] = [originalData
[i
][0], null];
1772 for (var i
= 0; i
< originalData
.length
; i
++) {
1776 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1777 var y
= originalData
[j
][1][0];
1778 if (y
== null || isNaN(y
)) continue;
1780 sum
+= originalData
[j
][1][0];
1781 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1784 var stddev
= Math
.sqrt(variance
) / num_ok
;
1785 rollingData
[i
] = [originalData
[i
][0],
1786 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1788 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1798 * Parses a date, returning the number of milliseconds since epoch. This can be
1799 * passed in as an xValueParser in the Dygraph constructor.
1800 * TODO(danvk): enumerate formats that this understands.
1801 * @param {String} A date in YYYYMMDD format.
1802 * @return {Number} Milliseconds since epoch.
1805 Dygraph
.dateParser
= function(dateStr
, self
) {
1808 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1809 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1810 while (dateStrSlashed
.search("-") != -1) {
1811 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1813 d
= Date
.parse(dateStrSlashed
);
1814 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1815 // TODO(danvk): remove support for this format. It's confusing.
1816 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1817 + "/" + dateStr
.substr(6,2);
1818 d
= Date
.parse(dateStrSlashed
);
1820 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1821 // "2009/07/12 12:34:56"
1822 d
= Date
.parse(dateStr
);
1825 if (!d
|| isNaN(d
)) {
1826 self
.error("Couldn't parse " + dateStr
+ " as a date");
1832 * Detects the type of the str (date or numeric) and sets the various
1833 * formatting attributes in this.attrs_ based on this type.
1834 * @param {String} str An x value.
1837 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1839 if (str
.indexOf('-') >= 0 ||
1840 str
.indexOf('/') >= 0 ||
1841 isNaN(parseFloat(str
))) {
1843 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1844 // TODO(danvk): remove support for this format.
1849 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1850 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1851 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1852 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
1854 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1855 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1856 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1857 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
1862 * Parses a string in a special csv format. We expect a csv file where each
1863 * line is a date point, and the first field in each line is the date string.
1864 * We also expect that all remaining fields represent series.
1865 * if the errorBars attribute is set, then interpret the fields as:
1866 * date, series1, stddev1, series2, stddev2, ...
1867 * @param {Array.<Object>} data See above.
1870 * @return Array.<Object> An array with one entry for each row. These entries
1871 * are an array of cells in that row. The first entry is the parsed x-value for
1872 * the row. The second, third, etc. are the y-values. These can take on one of
1873 * three forms, depending on the CSV and constructor parameters:
1875 * 2. [ value, stddev ]
1876 * 3. [ low value, center value, high value ]
1878 Dygraph
.prototype.parseCSV_
= function(data
) {
1880 var lines
= data
.split("\n");
1882 // Use the default delimiter or fall back to a tab if that makes sense.
1883 var delim
= this.attr_('delimiter');
1884 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1889 if (this.labelsFromCSV_
) {
1891 this.attrs_
.labels
= lines
[0].split(delim
);
1895 var defaultParserSet
= false; // attempt to auto-detect x value type
1896 var expectedCols
= this.attr_("labels").length
;
1897 var outOfOrder
= false;
1898 for (var i
= start
; i
< lines
.length
; i
++) {
1899 var line
= lines
[i
];
1900 if (line
.length
== 0) continue; // skip blank lines
1901 if (line
[0] == '#') continue; // skip comment lines
1902 var inFields
= line
.split(delim
);
1903 if (inFields
.length
< 2) continue;
1906 if (!defaultParserSet
) {
1907 this.detectTypeFromString_(inFields
[0]);
1908 xParser
= this.attr_("xValueParser");
1909 defaultParserSet
= true;
1911 fields
[0] = xParser(inFields
[0], this);
1913 // If fractions are expected, parse the numbers as "A/B
"
1914 if (this.fractions_) {
1915 for (var j = 1; j < inFields.length; j++) {
1916 // TODO(danvk): figure out an appropriate way to flag parse errors.
1917 var vals = inFields[j].split("/");
1918 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1920 } else if (this.attr_("errorBars
")) {
1921 // If there are error bars, values are (value, stddev) pairs
1922 for (var j = 1; j < inFields.length; j += 2)
1923 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1924 parseFloat(inFields[j + 1])];
1925 } else if (this.attr_("customBars
")) {
1926 // Bars are a low;center;high tuple
1927 for (var j = 1; j < inFields.length; j++) {
1928 var vals = inFields[j].split(";");
1929 fields[j] = [ parseFloat(vals[0]),
1930 parseFloat(vals[1]),
1931 parseFloat(vals[2]) ];
1934 // Values are just numbers
1935 for (var j = 1; j < inFields.length; j++) {
1936 fields[j] = parseFloat(inFields[j]);
1939 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1944 if (fields.length != expectedCols) {
1945 this.error("Number of columns
in line
" + i + " (" + fields.length +
1946 ") does not agree
with number of
labels (" + expectedCols +
1952 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1953 ret.sort(function(a,b) { return a[0] - b[0] });
1960 * The user has provided their data as a pre-packaged JS array. If the x values
1961 * are numeric, this is the same as dygraphs' internal format. If the x values
1962 * are dates, we need to convert them from Date objects to ms since epoch.
1963 * @param {Array.<Object>} data
1964 * @return {Array.<Object>} data with numeric x values.
1966 Dygraph.prototype.parseArray_ = function(data) {
1967 // Peek at the first x value to see if it's numeric.
1968 if (data.length == 0) {
1969 this.error("Can
't plot empty data set");
1972 if (data[0].length == 0) {
1973 this.error("Data set cannot contain an empty row");
1977 if (this.attr_("labels") == null) {
1978 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1979 "in the options parameter");
1980 this.attrs_.labels = [ "X" ];
1981 for (var i = 1; i < data[0].length; i++) {
1982 this.attrs_.labels.push("Y" + i);
1986 if (Dygraph.isDateLike(data[0][0])) {
1987 // Some intelligent defaults for a date x-axis.
1988 this.attrs_.xValueFormatter = Dygraph.dateString_;
1989 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
1990 this.attrs_.xTicker = Dygraph.dateTicker;
1992 // Assume they're all dates
.
1993 var parsedData
= Dygraph
.clone(data
);
1994 for (var i
= 0; i
< data
.length
; i
++) {
1995 if (parsedData
[i
].length
== 0) {
1996 this.error("Row " << (1 + i
) << " of data is empty");
1999 if (parsedData
[i
][0] == null
2000 || typeof(parsedData
[i
][0].getTime
) != 'function'
2001 || isNaN(parsedData
[i
][0].getTime())) {
2002 this.error("x value in row " + (1 + i
) + " is not a Date");
2005 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2009 // Some intelligent defaults for a numeric x-axis.
2010 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2011 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2017 * Parses a DataTable object from gviz.
2018 * The data is expected to have a first column that is either a date or a
2019 * number. All subsequent columns must be numbers. If there is a clear mismatch
2020 * between this.xValueParser_ and the type of the first column, it will be
2021 * fixed. Returned value is in the same format as return value of parseCSV_.
2022 * @param {Array.<Object>} data See above.
2025 Dygraph
.prototype.parseDataTable_
= function(data
) {
2026 var cols
= data
.getNumberOfColumns();
2027 var rows
= data
.getNumberOfRows();
2029 // Read column labels
2031 for (var i
= 0; i
< cols
; i
++) {
2032 labels
.push(data
.getColumnLabel(i
));
2033 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
2035 this.attrs_
.labels
= labels
;
2036 cols
= labels
.length
;
2038 var indepType
= data
.getColumnType(0);
2039 if (indepType
== 'date' || indepType
== 'datetime') {
2040 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2041 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2042 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2043 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2044 } else if (indepType
== 'number') {
2045 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2046 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2047 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2048 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2050 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2051 "column 1 of DataTable input (Got '" + indepType
+ "')");
2056 var outOfOrder
= false;
2057 for (var i
= 0; i
< rows
; i
++) {
2059 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2060 data
.getValue(i
, 0) === null) {
2061 this.warning("Ignoring row " + i
+
2062 " of DataTable because of undefined or null first column.");
2066 if (indepType
== 'date' || indepType
== 'datetime') {
2067 row
.push(data
.getValue(i
, 0).getTime());
2069 row
.push(data
.getValue(i
, 0));
2071 if (!this.attr_("errorBars")) {
2072 for (var j
= 1; j
< cols
; j
++) {
2073 row
.push(data
.getValue(i
, j
));
2076 for (var j
= 0; j
< cols
- 1; j
++) {
2077 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2080 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2087 this.warn("DataTable is out of order; order it correctly to speed loading.");
2088 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2093 // These functions are all based on MochiKit.
2094 Dygraph
.update
= function (self
, o
) {
2095 if (typeof(o
) != 'undefined' && o
!== null) {
2097 if (o
.hasOwnProperty(k
)) {
2105 Dygraph
.isArrayLike
= function (o
) {
2106 var typ
= typeof(o
);
2108 (typ
!= 'object' && !(typ
== 'function' &&
2109 typeof(o
.item
) == 'function')) ||
2111 typeof(o
.length
) != 'number' ||
2119 Dygraph
.isDateLike
= function (o
) {
2120 if (typeof(o
) != "object" || o
=== null ||
2121 typeof(o
.getTime
) != 'function') {
2127 Dygraph
.clone
= function(o
) {
2128 // TODO(danvk): figure out how MochiKit's version works
2130 for (var i
= 0; i
< o
.length
; i
++) {
2131 if (Dygraph
.isArrayLike(o
[i
])) {
2132 r
.push(Dygraph
.clone(o
[i
]));
2142 * Get the CSV data. If it's in a function, call that function. If it's in a
2143 * file, do an XMLHttpRequest to get it.
2146 Dygraph
.prototype.start_
= function() {
2147 if (typeof this.file_
== 'function') {
2148 // CSV string. Pretend we got it via XHR.
2149 this.loadedEvent_(this.file_());
2150 } else if (Dygraph
.isArrayLike(this.file_
)) {
2151 this.rawData_
= this.parseArray_(this.file_
);
2152 this.drawGraph_(this.rawData_
);
2153 } else if (typeof this.file_
== 'object' &&
2154 typeof this.file_
.getColumnRange
== 'function') {
2155 // must be a DataTable from gviz.
2156 this.rawData_
= this.parseDataTable_(this.file_
);
2157 this.drawGraph_(this.rawData_
);
2158 } else if (typeof this.file_
== 'string') {
2159 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2160 if (this.file_
.indexOf('\n') >= 0) {
2161 this.loadedEvent_(this.file_
);
2163 var req
= new XMLHttpRequest();
2165 req
.onreadystatechange
= function () {
2166 if (req
.readyState
== 4) {
2167 if (req
.status
== 200) {
2168 caller
.loadedEvent_(req
.responseText
);
2173 req
.open("GET", this.file_
, true);
2177 this.error("Unknown data format: " + (typeof this.file_
));
2182 * Changes various properties of the graph. These can include:
2184 * <li>file: changes the source data for the graph</li>
2185 * <li>errorBars: changes whether the data contains stddev</li>
2187 * @param {Object} attrs The new properties and values
2189 Dygraph
.prototype.updateOptions
= function(attrs
) {
2190 // TODO(danvk): this is a mess. Rethink this function.
2191 if (attrs
.rollPeriod
) {
2192 this.rollPeriod_
= attrs
.rollPeriod
;
2194 if (attrs
.dateWindow
) {
2195 this.dateWindow_
= attrs
.dateWindow
;
2197 if (attrs
.valueRange
) {
2198 this.valueRange_
= attrs
.valueRange
;
2200 Dygraph
.update(this.user_attrs_
, attrs
);
2201 Dygraph
.update(this.renderOptions_
, attrs
);
2203 this.labelsFromCSV_
= (this.attr_("labels") == null);
2205 // TODO(danvk): this doesn't match the constructor logic
2206 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2207 if (attrs
['file']) {
2208 this.file_
= attrs
['file'];
2211 this.drawGraph_(this.rawData_
);
2216 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2217 * containing div (which has presumably changed size since the dygraph was
2218 * instantiated. If the width/height are specified, the div will be resized.
2220 * This is far more efficient than destroying and re-instantiating a
2221 * Dygraph, since it doesn't have to reparse the underlying data.
2223 * @param {Number} width Width (in pixels)
2224 * @param {Number} height Height (in pixels)
2226 Dygraph
.prototype.resize
= function(width
, height
) {
2227 if (this.resize_lock
) {
2230 this.resize_lock
= true;
2232 if ((width
=== null) != (height
=== null)) {
2233 this.warn("Dygraph.resize() should be called with zero parameters or " +
2234 "two non-NULL parameters. Pretending it was zero.");
2235 width
= height
= null;
2238 // TODO(danvk): there should be a clear() method.
2239 this.maindiv_
.innerHTML
= "";
2240 this.attrs_
.labelsDiv
= null;
2243 this.maindiv_
.style
.width
= width
+ "px";
2244 this.maindiv_
.style
.height
= height
+ "px";
2245 this.width_
= width
;
2246 this.height_
= height
;
2248 this.width_
= this.maindiv_
.offsetWidth
;
2249 this.height_
= this.maindiv_
.offsetHeight
;
2252 this.createInterface_();
2253 this.drawGraph_(this.rawData_
);
2255 this.resize_lock
= false;
2259 * Adjusts the number of days in the rolling average. Updates the graph to
2260 * reflect the new averaging period.
2261 * @param {Number} length Number of days over which to average the data.
2263 Dygraph
.prototype.adjustRoll
= function(length
) {
2264 this.rollPeriod_
= length
;
2265 this.drawGraph_(this.rawData_
);
2269 * Returns a boolean array of visibility statuses.
2271 Dygraph
.prototype.visibility
= function() {
2272 // Do lazy-initialization, so that this happens after we know the number of
2274 if (!this.attr_("visibility")) {
2275 this.attrs_
["visibility"] = [];
2277 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2278 this.attr_("visibility").push(true);
2280 return this.attr_("visibility");
2284 * Changes the visiblity of a series.
2286 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2287 var x
= this.visibility();
2288 if (num
< 0 && num
>= x
.length
) {
2289 this.warn("invalid series number in setVisibility: " + num
);
2292 this.drawGraph_(this.rawData_
);
2297 * Create a new canvas element. This is more complex than a simple
2298 * document.createElement("canvas") because of IE and excanvas.
2300 Dygraph
.createCanvas
= function() {
2301 var canvas
= document
.createElement("canvas");
2303 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2305 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2313 * A wrapper around Dygraph that implements the gviz API.
2314 * @param {Object} container The DOM object the visualization should live in.
2316 Dygraph
.GVizChart
= function(container
) {
2317 this.container
= container
;
2320 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2321 this.container
.innerHTML
= '';
2322 this.date_graph
= new Dygraph(this.container
, data
, options
);
2326 * Google charts compatible setSelection
2327 * Only row selection is supported, all points in the row will be highlighted
2328 * @param {Array} array of the selected cells
2331 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2333 if (selection_array
.length
) {
2334 row
= selection_array
[0].row
;
2336 this.date_graph
.setSelection(row
);
2340 * Google charts compatible getSelection implementation
2341 * @return {Array} array of the selected cells
2344 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2347 var row
= this.date_graph
.getSelection();
2349 if (row
< 0) return selection
;
2352 for (var i
in this.date_graph
.layout_
.datasets
) {
2353 selection
.push({row
: row
, column
: col
});
2360 // Older pages may still use this name.
2361 DateGraph
= Dygraph
;