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://dygraphs.com/
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;
83 // Default attribute values.
84 Dygraph
.DEFAULT_ATTRS
= {
85 highlightCircleSize
: 3,
91 // TODO(danvk): move defaults from createStatusMessage_ here.
93 labelsSeparateLines
: false,
94 labelsShowZeroValues
: true,
97 showLabelsOnHighlight
: true,
99 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
104 axisLabelFontSize
: 14,
107 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
111 xValueFormatter
: Dygraph
.dateString_
,
112 xValueParser
: Dygraph
.dateParser
,
113 xTicker
: Dygraph
.dateTicker
,
121 wilsonInterval
: true, // only relevant if fractions is true
125 connectSeparatedPoints
: false,
128 hideOverlayOnMouseOut
: true,
133 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
136 // Various logging levels.
142 // Directions for panning and zooming. Use bit operations when combined
143 // values are possible.
144 Dygraph
.HORIZONTAL
= 1;
145 Dygraph
.VERTICAL
= 2;
147 // Used for initializing annotation CSS rules only once.
148 Dygraph
.addedAnnotationCSS
= false;
150 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
151 // Labels is no longer a constructor parameter, since it's typically set
152 // directly from the data source. It also conains a name for the x-axis,
153 // which the previous constructor form did not.
154 if (labels
!= null) {
155 var new_labels
= ["Date"];
156 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
157 Dygraph
.update(attrs
, { 'labels': new_labels
});
159 this.__init__(div
, file
, attrs
);
163 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
164 * and context <canvas> inside of it. See the constructor for details.
166 * @param {Element} div the Element to render the graph into.
167 * @param {String | Function} file Source data
168 * @param {Object} attrs Miscellaneous other options
171 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
172 // Hack for IE: if we're using excanvas and the document hasn't finished
173 // loading yet (and hence may not have initialized whatever it needs to
174 // initialize), then keep calling this routine periodically until it has.
175 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
176 typeof(G_vmlCanvasManager
) != 'undefined' &&
177 document
.readyState
!= 'complete') {
179 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
182 // Support two-argument constructor
183 if (attrs
== null) { attrs
= {}; }
185 // Copy the important bits into the object
186 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
189 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
190 this.previousVerticalX_
= -1;
191 this.fractions_
= attrs
.fractions
|| false;
192 this.dateWindow_
= attrs
.dateWindow
|| null;
194 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
195 this.is_initial_draw_
= true;
196 this.annotations_
= [];
198 // Clear the div. This ensure that, if multiple dygraphs are passed the same
199 // div, then only one will be drawn.
202 // If the div isn't already sized then inherit from our attrs or
203 // give it a default size.
204 if (div
.style
.width
== '') {
205 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
207 if (div
.style
.height
== '') {
208 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
210 this.width_
= parseInt(div
.style
.width
, 10);
211 this.height_
= parseInt(div
.style
.height
, 10);
212 // The div might have been specified as percent of the current window size,
213 // convert that to an appropriate number of pixels.
214 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
215 this.width_
= div
.offsetWidth
;
217 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
218 this.height_
= div
.offsetHeight
;
221 if (this.width_
== 0) {
222 this.error("dygraph has zero width. Please specify a width in pixels.");
224 if (this.height_
== 0) {
225 this.error("dygraph has zero height. Please specify a height in pixels.");
228 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
229 if (attrs
['stackedGraph']) {
230 attrs
['fillGraph'] = true;
231 // TODO(nikhilk): Add any other stackedGraph checks here.
234 // Dygraphs has many options, some of which interact with one another.
235 // To keep track of everything, we maintain two sets of options:
237 // this.user_attrs_ only options explicitly set by the user.
238 // this.attrs_ defaults, options derived from user_attrs_, data.
240 // Options are then accessed this.attr_('attr'), which first looks at
241 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
242 // defaults without overriding behavior that the user specifically asks for.
243 this.user_attrs_
= {};
244 Dygraph
.update(this.user_attrs_
, attrs
);
247 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
249 this.boundaryIds_
= [];
251 // Make a note of whether labels will be pulled from the CSV file.
252 this.labelsFromCSV_
= (this.attr_("labels") == null);
254 // Create the containing DIV and other interactive elements
255 this.createInterface_();
260 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
262 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
263 this.user_attrs_
[seriesName
] != null &&
264 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
265 return this.user_attrs_
[seriesName
][name
];
266 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
267 return this.user_attrs_
[name
];
268 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
269 return this.attrs_
[name
];
275 // TODO(danvk): any way I can get the line numbers to be this.warn call?
276 Dygraph
.prototype.log
= function(severity
, message
) {
277 if (typeof(console
) != 'undefined') {
280 console
.debug('dygraphs: ' + message
);
283 console
.info('dygraphs: ' + message
);
285 case Dygraph
.WARNING
:
286 console
.warn('dygraphs: ' + message
);
289 console
.error('dygraphs: ' + message
);
294 Dygraph
.prototype.info
= function(message
) {
295 this.log(Dygraph
.INFO
, message
);
297 Dygraph
.prototype.warn
= function(message
) {
298 this.log(Dygraph
.WARNING
, message
);
300 Dygraph
.prototype.error
= function(message
) {
301 this.log(Dygraph
.ERROR
, message
);
305 * Returns the current rolling period, as set by the user or an option.
306 * @return {Number} The number of days in the rolling window
308 Dygraph
.prototype.rollPeriod
= function() {
309 return this.rollPeriod_
;
313 * Returns the currently-visible x-range. This can be affected by zooming,
314 * panning or a call to updateOptions.
315 * Returns a two-element array: [left, right].
316 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
318 Dygraph
.prototype.xAxisRange
= function() {
319 if (this.dateWindow_
) return this.dateWindow_
;
321 // The entire chart is visible.
322 var left
= this.rawData_
[0][0];
323 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
324 return [left
, right
];
328 * Returns the currently-visible y-range for an axis. This can be affected by
329 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
330 * called with no arguments, returns the range of the first axis.
331 * Returns a two-element array: [bottom, top].
333 Dygraph
.prototype.yAxisRange
= function(idx
) {
334 if (typeof(idx
) == "undefined") idx
= 0;
335 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
336 return [ this.axes_
[idx
].computedValueRange
[0],
337 this.axes_
[idx
].computedValueRange
[1] ];
341 * Returns the currently-visible y-ranges for each axis. This can be affected by
342 * zooming, panning, calls to updateOptions, etc.
343 * Returns an array of [bottom, top] pairs, one for each y-axis.
345 Dygraph
.prototype.yAxisRanges
= function() {
347 for (var i
= 0; i
< this.axes_
.length
; i
++) {
348 ret
.push(this.yAxisRange(i
));
353 // TODO(danvk): use these functions throughout dygraphs.
355 * Convert from data coordinates to canvas/div X/Y coordinates.
356 * If specified, do this conversion for the coordinate system of a particular
357 * axis. Uses the first axis by default.
358 * Returns a two-element array: [X, Y]
360 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
361 var ret
= [null, null];
362 var area
= this.plotter_
.area
;
364 var xRange
= this.xAxisRange();
365 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
369 var yRange
= this.yAxisRange(axis
);
370 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
377 * Convert from canvas/div coords to data coordinates.
378 * If specified, do this conversion for the coordinate system of a particular
379 * axis. Uses the first axis by default.
380 * Returns a two-element array: [X, Y]
382 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
383 var ret
= [null, null];
384 var area
= this.plotter_
.area
;
386 var xRange
= this.xAxisRange();
387 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
391 var yRange
= this.yAxisRange(axis
);
392 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
399 * Returns the number of columns (including the independent variable).
401 Dygraph
.prototype.numColumns
= function() {
402 return this.rawData_
[0].length
;
406 * Returns the number of rows (excluding any header/label row).
408 Dygraph
.prototype.numRows
= function() {
409 return this.rawData_
.length
;
413 * Returns the value in the given row and column. If the row and column exceed
414 * the bounds on the data, returns null. Also returns null if the value is
417 Dygraph
.prototype.getValue
= function(row
, col
) {
418 if (row
< 0 || row
> this.rawData_
.length
) return null;
419 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
421 return this.rawData_
[row
][col
];
424 Dygraph
.addEvent
= function(el
, evt
, fn
) {
425 var normed_fn
= function(e
) {
426 if (!e
) var e
= window
.event
;
429 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
430 el
.addEventListener(evt
, normed_fn
, false);
432 el
.attachEvent('on' + evt
, normed_fn
);
437 // Based on the article at
438 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
439 Dygraph
.cancelEvent
= function(e
) {
440 e
= e
? e
: window
.event
;
441 if (e
.stopPropagation
) {
444 if (e
.preventDefault
) {
447 e
.cancelBubble
= true;
449 e
.returnValue
= false;
454 * Generates interface elements for the Dygraph: a containing div, a div to
455 * display the current point, and a textbox to adjust the rolling average
456 * period. Also creates the Renderer/Layout elements.
459 Dygraph
.prototype.createInterface_
= function() {
460 // Create the all-enclosing graph div
461 var enclosing
= this.maindiv_
;
463 this.graphDiv
= document
.createElement("div");
464 this.graphDiv
.style
.width
= this.width_
+ "px";
465 this.graphDiv
.style
.height
= this.height_
+ "px";
466 enclosing
.appendChild(this.graphDiv
);
468 // Create the canvas for interactive parts of the chart.
469 this.canvas_
= Dygraph
.createCanvas();
470 this.canvas_
.style
.position
= "absolute";
471 this.canvas_
.width
= this.width_
;
472 this.canvas_
.height
= this.height_
;
473 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
474 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
476 // ... and for static parts of the chart.
477 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
479 // The interactive parts of the graph are drawn on top of the chart.
480 this.graphDiv
.appendChild(this.hidden_
);
481 this.graphDiv
.appendChild(this.canvas_
);
482 this.mouseEventElement_
= this.canvas_
;
485 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
486 dygraph
.mouseMove_(e
);
488 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
489 dygraph
.mouseOut_(e
);
492 // Create the grapher
493 // TODO(danvk): why does the Layout need its own set of options?
494 this.layoutOptions_
= { 'xOriginIsZero': false };
495 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
496 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
497 Dygraph
.update(this.layoutOptions_
, {
498 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
500 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
502 // TODO(danvk): why does the Renderer need its own set of options?
503 this.renderOptions_
= { colorScheme
: this.colors_
,
505 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
506 Dygraph
.update(this.renderOptions_
, this.attrs_
);
507 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
509 this.createStatusMessage_();
510 this.createDragInterface_();
514 * Detach DOM elements in the dygraph and null out all data references.
515 * Calling this when you're done with a dygraph can dramatically reduce memory
516 * usage. See, e.g., the tests/perf.html example.
518 Dygraph
.prototype.destroy
= function() {
519 var removeRecursive
= function(node
) {
520 while (node
.hasChildNodes()) {
521 removeRecursive(node
.firstChild
);
522 node
.removeChild(node
.firstChild
);
525 removeRecursive(this.maindiv_
);
527 var nullOut
= function(obj
) {
529 if (typeof(obj
[n
]) === 'object') {
535 // These may not all be necessary, but it can't hurt...
536 nullOut(this.layout_
);
537 nullOut(this.plotter_
);
542 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
543 * this particular canvas. All Dygraph work is done on this.canvas_.
544 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
545 * @return {Object} The newly-created canvas
548 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
549 var h
= Dygraph
.createCanvas();
550 h
.style
.position
= "absolute";
551 // TODO(danvk): h should be offset from canvas. canvas needs to include
552 // some extra area to make it easier to zoom in on the far left and far
553 // right. h needs to be precisely the plot area, so that clipping occurs.
554 h
.style
.top
= canvas
.style
.top
;
555 h
.style
.left
= canvas
.style
.left
;
556 h
.width
= this.width_
;
557 h
.height
= this.height_
;
558 h
.style
.width
= this.width_
+ "px"; // for IE
559 h
.style
.height
= this.height_
+ "px"; // for IE
563 // Taken from MochiKit.Color
564 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
568 if (saturation
=== 0) {
573 var i
= Math
.floor(hue
* 6);
574 var f
= (hue
* 6) - i
;
575 var p
= value
* (1 - saturation
);
576 var q
= value
* (1 - (saturation
* f
));
577 var t
= value
* (1 - (saturation
* (1 - f
)));
579 case 1: red
= q
; green
= value
; blue
= p
; break;
580 case 2: red
= p
; green
= value
; blue
= t
; break;
581 case 3: red
= p
; green
= q
; blue
= value
; break;
582 case 4: red
= t
; green
= p
; blue
= value
; break;
583 case 5: red
= value
; green
= p
; blue
= q
; break;
584 case 6: // fall through
585 case 0: red
= value
; green
= t
; blue
= p
; break;
588 red
= Math
.floor(255 * red
+ 0.5);
589 green
= Math
.floor(255 * green
+ 0.5);
590 blue
= Math
.floor(255 * blue
+ 0.5);
591 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
596 * Generate a set of distinct colors for the data series. This is done with a
597 * color wheel. Saturation/Value are customizable, and the hue is
598 * equally-spaced around the color wheel. If a custom set of colors is
599 * specified, that is used instead.
602 Dygraph
.prototype.setColors_
= function() {
603 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
604 // away with this.renderOptions_.
605 var num
= this.attr_("labels").length
- 1;
607 var colors
= this.attr_('colors');
609 var sat
= this.attr_('colorSaturation') || 1.0;
610 var val
= this.attr_('colorValue') || 0.5;
611 var half
= Math
.ceil(num
/ 2);
612 for (var i
= 1; i
<= num
; i
++) {
613 if (!this.visibility()[i
-1]) continue;
614 // alternate colors for high contrast.
615 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
616 var hue
= (1.0 * idx
/ (1 + num
));
617 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
620 for (var i
= 0; i
< num
; i
++) {
621 if (!this.visibility()[i
]) continue;
622 var colorStr
= colors
[i
% colors
.length
];
623 this.colors_
.push(colorStr
);
627 // TODO(danvk): update this w/r
/t/ the
new options system
.
628 this.renderOptions_
.colorScheme
= this.colors_
;
629 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
630 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
631 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
635 * Return the list of colors. This is either the list of colors passed in the
636 * attributes, or the autogenerated list of rgb(r,g,b) strings.
637 * @return {Array<string>} The list of colors.
639 Dygraph
.prototype.getColors
= function() {
643 // The following functions are from quirksmode.org with a modification for Safari from
644 // http://blog.firetree.net/2005/07/04/javascript-find-position/
645 // http://www.quirksmode.org/js
/findpos
.html
646 Dygraph
.findPosX
= function(obj
) {
651 curleft
+= obj
.offsetLeft
;
652 if(!obj
.offsetParent
)
654 obj
= obj
.offsetParent
;
661 Dygraph
.findPosY
= function(obj
) {
666 curtop
+= obj
.offsetTop
;
667 if(!obj
.offsetParent
)
669 obj
= obj
.offsetParent
;
679 * Create the div that contains information on the selected point(s)
680 * This goes in the top right of the canvas, unless an external div has already
684 Dygraph
.prototype.createStatusMessage_
= function() {
685 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
686 if (userLabelsDiv
&& null != userLabelsDiv
687 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
688 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
690 if (!this.attr_("labelsDiv")) {
691 var divWidth
= this.attr_('labelsDivWidth');
693 "position": "absolute",
696 "width": divWidth
+ "px",
698 "left": (this.width_
- divWidth
- 2) + "px",
699 "background": "white",
701 "overflow": "hidden"};
702 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
703 var div
= document
.createElement("div");
704 for (var name
in messagestyle
) {
705 if (messagestyle
.hasOwnProperty(name
)) {
706 div
.style
[name
] = messagestyle
[name
];
709 this.graphDiv
.appendChild(div
);
710 this.attrs_
.labelsDiv
= div
;
715 * Position the labels div so that its right edge is flush with the right edge
716 * of the charting area.
718 Dygraph
.prototype.positionLabelsDiv_
= function() {
719 // Don't touch a user-specified labelsDiv.
720 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
722 var area
= this.plotter_
.area
;
723 var div
= this.attr_("labelsDiv");
724 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
728 * Create the text box to adjust the averaging period
731 Dygraph
.prototype.createRollInterface_
= function() {
732 // Create a roller if one doesn't exist already.
734 this.roller_
= document
.createElement("input");
735 this.roller_
.type
= "text";
736 this.roller_
.style
.display
= "none";
737 this.graphDiv
.appendChild(this.roller_
);
740 var display
= this.attr_('showRoller') ? 'block' : 'none';
742 var textAttr
= { "position": "absolute",
744 "top": (this.plotter_
.area
.h
- 25) + "px",
745 "left": (this.plotter_
.area
.x
+ 1) + "px",
748 this.roller_
.size
= "2";
749 this.roller_
.value
= this.rollPeriod_
;
750 for (var name
in textAttr
) {
751 if (textAttr
.hasOwnProperty(name
)) {
752 this.roller_
.style
[name
] = textAttr
[name
];
757 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
760 // These functions are taken from MochiKit.Signal
761 Dygraph
.pageX
= function(e
) {
763 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
766 var b
= document
.body
;
768 (de
.scrollLeft
|| b
.scrollLeft
) -
769 (de
.clientLeft
|| 0);
773 Dygraph
.pageY
= function(e
) {
775 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
778 var b
= document
.body
;
780 (de
.scrollTop
|| b
.scrollTop
) -
785 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
786 return Dygraph
.pageX(e
) - context
.px
789 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
790 return Dygraph
.pageY(e
) - context
.py
793 // Called in response to an interaction model operation that
794 // should start the default panning behavior.
796 // It's used in the default callback for "mousedown" operations.
797 // Custom interaction model builders can use it to provide the default
800 Dygraph
.startPan
= function(event
, g
, context
) {
801 context
.isPanning
= true;
802 var xRange
= g
.xAxisRange();
803 context
.dateRange
= xRange
[1] - xRange
[0];
804 context
.initialLeftmostDate
= xRange
[0];
805 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
807 // Record the range of each y-axis at the start of the drag.
808 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
809 context
.is2DPan
= false;
810 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
811 var axis
= g
.axes_
[i
];
812 var yRange
= g
.yAxisRange(i
);
813 // TODO(konigsberg): These values should be in |context|.
814 axis
.dragValueRange
= yRange
[1] - yRange
[0];
815 axis
.initialTopValue
= yRange
[1];
816 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
817 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
821 // Called in response to an interaction model operation that
822 // responds to an event that pans the view.
824 // It's used in the default callback for "mousemove" operations.
825 // Custom interaction model builders can use it to provide the default
828 Dygraph
.movePan
= function(event
, g
, context
) {
829 context
.dragEndX
= g
.dragGetX_(event
, context
);
830 context
.dragEndY
= g
.dragGetY_(event
, context
);
832 var minDate
= context
.initialLeftmostDate
-
833 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
834 var maxDate
= minDate
+ context
.dateRange
;
835 g
.dateWindow_
= [minDate
, maxDate
];
837 // y-axis scaling is automatic unless this is a full 2D pan.
838 if (context
.is2DPan
) {
839 // Adjust each axis appropriately.
840 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
841 var axis
= g
.axes_
[i
];
842 var maxValue
= axis
.initialTopValue
+
843 (context
.dragEndY
- context
.dragStartY
) * axis
.unitsPerPixel
;
844 var minValue
= maxValue
- axis
.dragValueRange
;
845 axis
.valueWindow
= [ minValue
, maxValue
];
852 // Called in response to an interaction model operation that
853 // responds to an event that ends panning.
855 // It's used in the default callback for "mouseup" operations.
856 // Custom interaction model builders can use it to provide the default
859 Dygraph
.endPan
= function(event
, g
, context
) {
860 // TODO(konigsberg): Clear the context data from the axis.
861 // TODO(konigsberg): mouseup should just delete the
862 // context object, and mousedown should create a new one.
863 context
.isPanning
= false;
864 context
.is2DPan
= false;
865 context
.initialLeftmostDate
= null;
866 context
.dateRange
= null;
867 context
.valueRange
= null;
870 // Called in response to an interaction model operation that
871 // responds to an event that starts zooming.
873 // It's used in the default callback for "mousedown" operations.
874 // Custom interaction model builders can use it to provide the default
877 Dygraph
.startZoom
= function(event
, g
, context
) {
878 context
.isZooming
= true;
881 // Called in response to an interaction model operation that
882 // responds to an event that defines zoom boundaries.
884 // It's used in the default callback for "mousemove" operations.
885 // Custom interaction model builders can use it to provide the default
888 Dygraph
.moveZoom
= function(event
, g
, context
) {
889 context
.dragEndX
= g
.dragGetX_(event
, context
);
890 context
.dragEndY
= g
.dragGetY_(event
, context
);
892 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
893 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
895 // drag direction threshold for y axis is twice as large as x axis
896 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
899 context
.dragDirection
,
904 context
.prevDragDirection
,
908 context
.prevEndX
= context
.dragEndX
;
909 context
.prevEndY
= context
.dragEndY
;
910 context
.prevDragDirection
= context
.dragDirection
;
913 // Called in response to an interaction model operation that
914 // responds to an event that performs a zoom based on previously defined
917 // It's used in the default callback for "mouseup" operations.
918 // Custom interaction model builders can use it to provide the default
921 Dygraph
.endZoom
= function(event
, g
, context
) {
922 context
.isZooming
= false;
923 context
.dragEndX
= g
.dragGetX_(event
, context
);
924 context
.dragEndY
= g
.dragGetY_(event
, context
);
925 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
926 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
928 if (regionWidth
< 2 && regionHeight
< 2 &&
929 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
930 // TODO(danvk): pass along more info about the points, e.g. 'x'
931 if (g
.attr_('clickCallback') != null) {
932 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
934 if (g
.attr_('pointClickCallback')) {
935 // check if the click was on a particular point.
937 var closestDistance
= 0;
938 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
939 var p
= g
.selPoints_
[i
];
940 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
941 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
942 if (closestIdx
== -1 || distance
< closestDistance
) {
943 closestDistance
= distance
;
948 // Allow any click within two pixels of the dot.
949 var radius
= g
.attr_('highlightCircleSize') + 2;
950 if (closestDistance
<= 5 * 5) {
951 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
956 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
957 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
958 Math
.max(context
.dragStartX
, context
.dragEndX
));
959 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
960 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
961 Math
.max(context
.dragStartY
, context
.dragEndY
));
963 g
.canvas_
.getContext("2d").clearRect(0, 0,
967 context
.dragStartX
= null;
968 context
.dragStartY
= null;
971 Dygraph
.defaultInteractionModel
= {
972 // Track the beginning of drag events
973 mousedown
: function(event
, g
, context
) {
974 context
.initializeMouseDown(event
, g
, context
);
976 if (event
.altKey
|| event
.shiftKey
) {
977 Dygraph
.startPan(event
, g
, context
);
979 Dygraph
.startZoom(event
, g
, context
);
983 // Draw zoom rectangles when the mouse is down and the user moves around
984 mousemove
: function(event
, g
, context
) {
985 if (context
.isZooming
) {
986 Dygraph
.moveZoom(event
, g
, context
);
987 } else if (context
.isPanning
) {
988 Dygraph
.movePan(event
, g
, context
);
992 mouseup
: function(event
, g
, context
) {
993 if (context
.isZooming
) {
994 Dygraph
.endZoom(event
, g
, context
);
995 } else if (context
.isPanning
) {
996 Dygraph
.endPan(event
, g
, context
);
1000 // Temporarily cancel the dragging event when the mouse leaves the graph
1001 mouseout
: function(event
, g
, context
) {
1002 if (context
.isZooming
) {
1003 context
.dragEndX
= null;
1004 context
.dragEndY
= null;
1008 // Disable zooming out if panning.
1009 dblclick
: function(event
, g
, context
) {
1010 if (event
.altKey
|| event
.shiftKey
) {
1013 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1014 // friendlier to public use.
1019 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1022 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1026 Dygraph
.prototype.createDragInterface_
= function() {
1028 // Tracks whether the mouse is down right now
1030 isPanning
: false, // is this drag part of a pan?
1031 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1036 dragDirection
: null,
1039 prevDragDirection
: null,
1041 // The value on the left side of the graph when a pan operation starts.
1042 initialLeftmostDate
: null,
1044 // The number of units each pixel spans. (This won't be valid for log
1046 xUnitsPerPixel
: null,
1048 // TODO(danvk): update this comment
1049 // The range in second/value units that the viewport encompasses during a
1050 // panning operation.
1053 // Utility function to convert page-wide coordinates to canvas coords
1057 initializeMouseDown
: function(event
, g
, context
) {
1058 // prevents mouse drags from selecting page text.
1059 if (event
.preventDefault
) {
1060 event
.preventDefault(); // Firefox, Chrome, etc.
1062 event
.returnValue
= false; // IE
1063 event
.cancelBubble
= true;
1066 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1067 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1068 context
.dragStartX
= g
.dragGetX_(event
, context
);
1069 context
.dragStartY
= g
.dragGetY_(event
, context
);
1073 var interactionModel
= this.attr_("interactionModel");
1075 // Self is the graph.
1078 // Function that binds the graph and context to the handler.
1079 var bindHandler
= function(handler
) {
1080 return function(event
) {
1081 handler(event
, self
, context
);
1085 for (var eventName
in interactionModel
) {
1086 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1087 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1088 bindHandler(interactionModel
[eventName
]));
1091 // If the user releases the mouse button during a drag, but not over the
1092 // canvas, then it doesn't count as a zooming action.
1093 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1094 if (context
.isZooming
|| context
.isPanning
) {
1095 context
.isZooming
= false;
1096 context
.dragStartX
= null;
1097 context
.dragStartY
= null;
1100 if (context
.isPanning
) {
1101 context
.isPanning
= false;
1102 context
.draggingDate
= null;
1103 context
.dateRange
= null;
1104 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1105 delete self
.axes_
[i
].draggingValue
;
1106 delete self
.axes_
[i
].dragValueRange
;
1113 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1114 * up any previous zoom rectangles that were drawn. This could be optimized to
1115 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1118 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1119 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1120 * @param {Number} startX The X position where the drag started, in canvas
1122 * @param {Number} endX The current X position of the drag, in canvas coords.
1123 * @param {Number} startY The Y position where the drag started, in canvas
1125 * @param {Number} endY The current Y position of the drag, in canvas coords.
1126 * @param {Number} prevDirection the value of direction on the previous call to
1127 * this function. Used to avoid excess redrawing
1128 * @param {Number} prevEndX The value of endX on the previous call to this
1129 * function. Used to avoid excess redrawing
1130 * @param {Number} prevEndY The value of endY on the previous call to this
1131 * function. Used to avoid excess redrawing
1134 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1135 prevDirection
, prevEndX
, prevEndY
) {
1136 var ctx
= this.canvas_
.getContext("2d");
1138 // Clean up from the previous rect if necessary
1139 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1140 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1141 Math
.abs(startX
- prevEndX
), this.height_
);
1142 } else if (prevDirection
== Dygraph
.VERTICAL
){
1143 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1144 this.width_
, Math
.abs(startY
- prevEndY
));
1147 // Draw a light-grey rectangle to show the new viewing area
1148 if (direction
== Dygraph
.HORIZONTAL
) {
1149 if (endX
&& startX
) {
1150 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1151 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1152 Math
.abs(endX
- startX
), this.height_
);
1155 if (direction
== Dygraph
.VERTICAL
) {
1156 if (endY
&& startY
) {
1157 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1158 ctx
.fillRect(0, Math
.min(startY
, endY
),
1159 this.width_
, Math
.abs(endY
- startY
));
1165 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1166 * the canvas. The exact zoom window may be slightly larger if there are no data
1167 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1168 * which accepts dates that match the raw data. This function redraws the graph.
1170 * @param {Number} lowX The leftmost pixel value that should be visible.
1171 * @param {Number} highX The rightmost pixel value that should be visible.
1174 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1175 // Find the earliest and latest dates contained in this canvasx range.
1176 // Convert the call to date ranges of the raw data.
1177 var r
= this.toDataCoords(lowX
, null);
1179 r
= this.toDataCoords(highX
, null);
1181 this.doZoomXDates_(minDate
, maxDate
);
1185 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1186 * method with doZoomX which accepts pixel coordinates. This function redraws
1189 * @param {Number} minDate The minimum date that should be visible.
1190 * @param {Number} maxDate The maximum date that should be visible.
1193 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1194 this.dateWindow_
= [minDate
, maxDate
];
1196 if (this.attr_("zoomCallback")) {
1197 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1202 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1203 * the canvas. This function redraws the graph.
1205 * @param {Number} lowY The topmost pixel value that should be visible.
1206 * @param {Number} highY The lowest pixel value that should be visible.
1209 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1210 // Find the highest and lowest values in pixel range for each axis.
1211 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1212 // This is because pixels increase as you go down on the screen, whereas data
1213 // coordinates increase as you go up the screen.
1214 var valueRanges
= [];
1215 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1216 var hi
= this.toDataCoords(null, lowY
, i
);
1217 var low
= this.toDataCoords(null, highY
, i
);
1218 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1219 valueRanges
.push([low
[1], hi
[1]]);
1223 if (this.attr_("zoomCallback")) {
1224 var xRange
= this.xAxisRange();
1225 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1230 * Reset the zoom to the original view coordinates. This is the same as
1231 * double-clicking on the graph.
1235 Dygraph
.prototype.doUnzoom_
= function() {
1237 if (this.dateWindow_
!= null) {
1239 this.dateWindow_
= null;
1242 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1243 if (this.axes_
[i
].valueWindow
!= null) {
1245 delete this.axes_
[i
].valueWindow
;
1250 // Putting the drawing operation before the callback because it resets
1253 if (this.attr_("zoomCallback")) {
1254 var minDate
= this.rawData_
[0][0];
1255 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1256 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1262 * When the mouse moves in the canvas, display information about a nearby data
1263 * point and draw dots over those points in the data series. This function
1264 * takes care of cleanup of previously-drawn dots.
1265 * @param {Object} event The mousemove event from the browser.
1268 Dygraph
.prototype.mouseMove_
= function(event
) {
1269 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1270 var points
= this.layout_
.points
;
1275 // Loop through all the points and find the date nearest to our current
1277 var minDist
= 1e+100;
1279 for (var i
= 0; i
< points
.length
; i
++) {
1280 var point
= points
[i
];
1281 if (point
== null) continue;
1282 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1283 if (dist
> minDist
) continue;
1287 if (idx
>= 0) lastx
= points
[idx
].xval
;
1288 // Check that you can really highlight the last day's data
1289 var last
= points
[points
.length
-1];
1290 if (last
!= null && canvasx
> last
.canvasx
)
1291 lastx
= points
[points
.length
-1].xval
;
1293 // Extract the points we've selected
1294 this.selPoints_
= [];
1295 var l
= points
.length
;
1296 if (!this.attr_("stackedGraph")) {
1297 for (var i
= 0; i
< l
; i
++) {
1298 if (points
[i
].xval
== lastx
) {
1299 this.selPoints_
.push(points
[i
]);
1303 // Need to 'unstack' points starting from the bottom
1304 var cumulative_sum
= 0;
1305 for (var i
= l
- 1; i
>= 0; i
--) {
1306 if (points
[i
].xval
== lastx
) {
1307 var p
= {}; // Clone the point since we modify it
1308 for (var k
in points
[i
]) {
1309 p
[k
] = points
[i
][k
];
1311 p
.yval
-= cumulative_sum
;
1312 cumulative_sum
+= p
.yval
;
1313 this.selPoints_
.push(p
);
1316 this.selPoints_
.reverse();
1319 if (this.attr_("highlightCallback")) {
1320 var px
= this.lastx_
;
1321 if (px
!== null && lastx
!= px
) {
1322 // only fire if the selected point has changed.
1323 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1327 // Save last x position for callbacks.
1328 this.lastx_
= lastx
;
1330 this.updateSelection_();
1334 * Transforms layout_.points index into data row number.
1335 * @param int layout_.points index
1336 * @return int row number, or -1 if none could be found.
1339 Dygraph
.prototype.idxToRow_
= function(idx
) {
1340 if (idx
< 0) return -1;
1342 for (var i
in this.layout_
.datasets
) {
1343 if (idx
< this.layout_
.datasets
[i
].length
) {
1344 return this.boundaryIds_
[0][0]+idx
;
1346 idx
-= this.layout_
.datasets
[i
].length
;
1352 * Draw dots over the selectied points in the data series. This function
1353 * takes care of cleanup of previously-drawn dots.
1356 Dygraph
.prototype.updateSelection_
= function() {
1357 // Clear the previously drawn vertical, if there is one
1358 var ctx
= this.canvas_
.getContext("2d");
1359 if (this.previousVerticalX_
>= 0) {
1360 // Determine the maximum highlight circle size.
1361 var maxCircleSize
= 0;
1362 var labels
= this.attr_('labels');
1363 for (var i
= 1; i
< labels
.length
; i
++) {
1364 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1365 if (r
> maxCircleSize
) maxCircleSize
= r
;
1367 var px
= this.previousVerticalX_
;
1368 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1369 2 * maxCircleSize
+ 2, this.height_
);
1372 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1374 if (this.selPoints_
.length
> 0) {
1375 var canvasx
= this.selPoints_
[0].canvasx
;
1377 // Set the status message to indicate the selected point(s)
1378 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1379 var fmtFunc
= this.attr_('yValueFormatter');
1380 var clen
= this.colors_
.length
;
1382 if (this.attr_('showLabelsOnHighlight')) {
1383 // Set the status message to indicate the selected point(s)
1384 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1385 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1386 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1387 if (this.attr_("labelsSeparateLines")) {
1390 var point
= this.selPoints_
[i
];
1391 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1392 var yval
= fmtFunc(point
.yval
);
1393 replace
+= " <b><font color='" + c
.toHex() + "'>"
1394 + point
.name
+ "</font></b>:"
1398 this.attr_("labelsDiv").innerHTML
= replace
;
1401 // Draw colored circles over the center of each selected point
1403 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1404 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1406 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1408 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1409 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1410 0, 2 * Math
.PI
, false);
1415 this.previousVerticalX_
= canvasx
;
1420 * Set manually set selected dots, and display information about them
1421 * @param int row number that should by highlighted
1422 * false value clears the selection
1425 Dygraph
.prototype.setSelection
= function(row
) {
1426 // Extract the points we've selected
1427 this.selPoints_
= [];
1430 if (row
!== false) {
1431 row
= row
-this.boundaryIds_
[0][0];
1434 if (row
!== false && row
>= 0) {
1435 for (var i
in this.layout_
.datasets
) {
1436 if (row
< this.layout_
.datasets
[i
].length
) {
1437 var point
= this.layout_
.points
[pos
+row
];
1439 if (this.attr_("stackedGraph")) {
1440 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1443 this.selPoints_
.push(point
);
1445 pos
+= this.layout_
.datasets
[i
].length
;
1449 if (this.selPoints_
.length
) {
1450 this.lastx_
= this.selPoints_
[0].xval
;
1451 this.updateSelection_();
1454 this.clearSelection();
1460 * The mouse has left the canvas. Clear out whatever artifacts remain
1461 * @param {Object} event the mouseout event from the browser.
1464 Dygraph
.prototype.mouseOut_
= function(event
) {
1465 if (this.attr_("unhighlightCallback")) {
1466 this.attr_("unhighlightCallback")(event
);
1469 if (this.attr_("hideOverlayOnMouseOut")) {
1470 this.clearSelection();
1475 * Remove all selection from the canvas
1478 Dygraph
.prototype.clearSelection
= function() {
1479 // Get rid of the overlay data
1480 var ctx
= this.canvas_
.getContext("2d");
1481 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1482 this.attr_("labelsDiv").innerHTML
= "";
1483 this.selPoints_
= [];
1488 * Returns the number of the currently selected row
1489 * @return int row number, of -1 if nothing is selected
1492 Dygraph
.prototype.getSelection
= function() {
1493 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1497 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1498 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1499 return row
+ this.boundaryIds_
[0][0];
1505 Dygraph
.zeropad
= function(x
) {
1506 if (x
< 10) return "0" + x
; else return "" + x
;
1510 * Return a string version of the hours, minutes and seconds portion of a date.
1511 * @param {Number} date The JavaScript date (ms since epoch)
1512 * @return {String} A time of the form "HH:MM:SS"
1515 Dygraph
.hmsString_
= function(date
) {
1516 var zeropad
= Dygraph
.zeropad
;
1517 var d
= new Date(date
);
1518 if (d
.getSeconds()) {
1519 return zeropad(d
.getHours()) + ":" +
1520 zeropad(d
.getMinutes()) + ":" +
1521 zeropad(d
.getSeconds());
1523 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1528 * Convert a JS date to a string appropriate to display on an axis that
1529 * is displaying values at the stated granularity.
1530 * @param {Date} date The date to format
1531 * @param {Number} granularity One of the Dygraph granularity constants
1532 * @return {String} The formatted date
1535 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1536 if (granularity
>= Dygraph
.DECADAL
) {
1537 return date
.strftime('%Y');
1538 } else if (granularity
>= Dygraph
.MONTHLY
) {
1539 return date
.strftime('%b %y');
1541 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1542 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1543 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1545 return Dygraph
.hmsString_(date
.getTime());
1551 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1552 * @param {Number} date The JavaScript date (ms since epoch)
1553 * @return {String} A date of the form "YYYY/MM/DD"
1556 Dygraph
.dateString_
= function(date
, self
) {
1557 var zeropad
= Dygraph
.zeropad
;
1558 var d
= new Date(date
);
1561 var year
= "" + d
.getFullYear();
1562 // Get a 0 padded month string
1563 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1564 // Get a 0 padded day string
1565 var day
= zeropad(d
.getDate());
1568 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1569 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1571 return year
+ "/" + month + "/" + day
+ ret
;
1575 * Round a number to the specified number of digits past the decimal point.
1576 * @param {Number} num The number to round
1577 * @param {Number} places The number of decimals to which to round
1578 * @return {Number} The rounded number
1581 Dygraph
.round_
= function(num
, places
) {
1582 var shift
= Math
.pow(10, places
);
1583 return Math
.round(num
* shift
)/shift
;
1587 * Fires when there's data available to be graphed.
1588 * @param {String} data Raw CSV data to be plotted
1591 Dygraph
.prototype.loadedEvent_
= function(data
) {
1592 this.rawData_
= this.parseCSV_(data
);
1596 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1597 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1598 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1601 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1604 Dygraph
.prototype.addXTicks_
= function() {
1605 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1606 var startDate
, endDate
;
1607 if (this.dateWindow_
) {
1608 startDate
= this.dateWindow_
[0];
1609 endDate
= this.dateWindow_
[1];
1611 startDate
= this.rawData_
[0][0];
1612 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1615 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1616 this.layout_
.updateOptions({xTicks
: xTicks
});
1619 // Time granularity enumeration
1620 Dygraph
.SECONDLY
= 0;
1621 Dygraph
.TWO_SECONDLY
= 1;
1622 Dygraph
.FIVE_SECONDLY
= 2;
1623 Dygraph
.TEN_SECONDLY
= 3;
1624 Dygraph
.THIRTY_SECONDLY
= 4;
1625 Dygraph
.MINUTELY
= 5;
1626 Dygraph
.TWO_MINUTELY
= 6;
1627 Dygraph
.FIVE_MINUTELY
= 7;
1628 Dygraph
.TEN_MINUTELY
= 8;
1629 Dygraph
.THIRTY_MINUTELY
= 9;
1630 Dygraph
.HOURLY
= 10;
1631 Dygraph
.TWO_HOURLY
= 11;
1632 Dygraph
.SIX_HOURLY
= 12;
1634 Dygraph
.WEEKLY
= 14;
1635 Dygraph
.MONTHLY
= 15;
1636 Dygraph
.QUARTERLY
= 16;
1637 Dygraph
.BIANNUAL
= 17;
1638 Dygraph
.ANNUAL
= 18;
1639 Dygraph
.DECADAL
= 19;
1640 Dygraph
.CENTENNIAL
= 20;
1641 Dygraph
.NUM_GRANULARITIES
= 21;
1643 Dygraph
.SHORT_SPACINGS
= [];
1644 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1645 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1646 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1647 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1648 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1649 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1650 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1651 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1652 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1653 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1654 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1655 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1656 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1657 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1658 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1662 // If we used this time granularity, how many ticks would there be?
1663 // This is only an approximation, but it's generally good enough.
1665 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1666 if (granularity
< Dygraph
.MONTHLY
) {
1667 // Generate one tick mark for every fixed interval of time.
1668 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1669 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1671 var year_mod
= 1; // e.g. to only print one point every 10 years.
1672 var num_months
= 12;
1673 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1674 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1675 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1676 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1677 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1679 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1680 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1681 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1687 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1688 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1690 // Returns an array containing {v: millis, label: label} dictionaries.
1692 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1693 var formatter
= this.attr_("xAxisLabelFormatter");
1695 if (granularity
< Dygraph
.MONTHLY
) {
1696 // Generate one tick mark for every fixed interval of time.
1697 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1698 var format
= '%d%b'; // e.g. "1Jan"
1700 // Find a time less than start_time which occurs on a "nice" time boundary
1701 // for this granularity.
1702 var g
= spacing
/ 1000;
1703 var d
= new Date(start_time
);
1704 if (g
<= 60) { // seconds
1705 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1709 if (g
<= 60) { // minutes
1710 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1715 if (g
<= 24) { // days
1716 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1721 if (g
== 7) { // one week
1722 d
.setDate(d
.getDate() - d
.getDay());
1727 start_time
= d
.getTime();
1729 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1730 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1733 // Display a tick mark on the first of a set of months of each year.
1734 // Years get a tick mark iff y % year_mod == 0. This is useful for
1735 // displaying a tick mark once every 10 years, say, on long time scales.
1737 var year_mod
= 1; // e.g. to only print one point every 10 years.
1739 if (granularity
== Dygraph
.MONTHLY
) {
1740 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1741 } else if (granularity
== Dygraph
.QUARTERLY
) {
1742 months
= [ 0, 3, 6, 9 ];
1743 } else if (granularity
== Dygraph
.BIANNUAL
) {
1745 } else if (granularity
== Dygraph
.ANNUAL
) {
1747 } else if (granularity
== Dygraph
.DECADAL
) {
1750 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1754 this.warn("Span of dates is too long");
1757 var start_year
= new Date(start_time
).getFullYear();
1758 var end_year
= new Date(end_time
).getFullYear();
1759 var zeropad
= Dygraph
.zeropad
;
1760 for (var i
= start_year
; i
<= end_year
; i
++) {
1761 if (i
% year_mod
!= 0) continue;
1762 for (var j
= 0; j
< months
.length
; j
++) {
1763 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1764 var t
= Date
.parse(date_str
);
1765 if (t
< start_time
|| t
> end_time
) continue;
1766 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1776 * Add ticks to the x-axis based on a date range.
1777 * @param {Number} startDate Start of the date window (millis since epoch)
1778 * @param {Number} endDate End of the date window (millis since epoch)
1779 * @return {Array.<Object>} Array of {label, value} tuples.
1782 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1784 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1785 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1786 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1793 return self
.GetXAxis(startDate
, endDate
, chosen
);
1795 // TODO(danvk): signal error.
1800 * Add ticks when the x axis has numbers on it (instead of dates)
1801 * @param {Number} startDate Start of the date window (millis since epoch)
1802 * @param {Number} endDate End of the date window (millis since epoch)
1804 * @param {function} attribute accessor function.
1805 * @return {Array.<Object>} Array of {label, value} tuples.
1808 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1809 var attr
= function(k
) {
1810 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1811 return self
.attr_(k
);
1816 for (var i
= 0; i
< vals
.length
; i
++) {
1817 ticks
.push({v
: vals
[i
]});
1821 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1822 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1823 // The first spacing greater than pixelsPerYLabel is what we use.
1824 // TODO(danvk): version that works on a log scale.
1825 if (attr("labelsKMG2")) {
1826 var mults
= [1, 2, 4, 8];
1828 var mults
= [1, 2, 5];
1830 var scale
, low_val
, high_val
, nTicks
;
1831 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1832 var pixelsPerTick
= attr('pixelsPerYLabel');
1833 for (var i
= -10; i
< 50; i
++) {
1834 if (attr("labelsKMG2")) {
1835 var base_scale
= Math
.pow(16, i
);
1837 var base_scale
= Math
.pow(10, i
);
1839 for (var j
= 0; j
< mults
.length
; j
++) {
1840 scale
= base_scale
* mults
[j
];
1841 low_val
= Math
.floor(minV
/ scale
) * scale
;
1842 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1843 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1844 var spacing
= self
.height_
/ nTicks
;
1845 // wish I could break out of both loops at once...
1846 if (spacing
> pixelsPerTick
) break;
1848 if (spacing
> pixelsPerTick
) break;
1851 // Construct the set of ticks.
1852 // Allow reverse y-axis if it's explicitly requested.
1853 if (low_val
> high_val
) scale
*= -1;
1854 for (var i
= 0; i
< nTicks
; i
++) {
1855 var tickV
= low_val
+ i
* scale
;
1856 ticks
.push( {v
: tickV
} );
1860 // Add formatted labels to the ticks.
1863 if (attr("labelsKMB")) {
1865 k_labels
= [ "K", "M", "B", "T" ];
1867 if (attr("labelsKMG2")) {
1868 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1870 k_labels
= [ "k", "M", "G", "T" ];
1872 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1874 for (var i
= 0; i
< ticks
.length
; i
++) {
1875 var tickV
= ticks
[i
].v
;
1876 var absTickV
= Math
.abs(tickV
);
1878 if (formatter
!= undefined
) {
1879 label
= formatter(tickV
);
1881 label
= Dygraph
.round_(tickV
, 2);
1883 if (k_labels
.length
) {
1884 // Round up to an appropriate unit.
1886 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1887 if (absTickV
>= n
) {
1888 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1893 ticks
[i
].label
= label
;
1898 // Computes the range of the data series (including confidence intervals).
1899 // series is either [ [x1, y1], [x2, y2], ... ] or
1900 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1901 // Returns [low, high]
1902 Dygraph
.prototype.extremeValues_
= function(series
) {
1903 var minY
= null, maxY
= null;
1905 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1907 // With custom bars, maxY is the max of the high values.
1908 for (var j
= 0; j
< series
.length
; j
++) {
1909 var y
= series
[j
][1][0];
1911 var low
= y
- series
[j
][1][1];
1912 var high
= y
+ series
[j
][1][2];
1913 if (low
> y
) low
= y
; // this can happen with custom bars,
1914 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1915 if (maxY
== null || high
> maxY
) {
1918 if (minY
== null || low
< minY
) {
1923 for (var j
= 0; j
< series
.length
; j
++) {
1924 var y
= series
[j
][1];
1925 if (y
=== null || isNaN(y
)) continue;
1926 if (maxY
== null || y
> maxY
) {
1929 if (minY
== null || y
< minY
) {
1935 return [minY
, maxY
];
1939 * This function is called once when the chart's data is changed or the options
1940 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1941 * idea is that values derived from the chart's data can be computed here,
1942 * rather than every time the chart is drawn. This includes things like the
1943 * number of axes, rolling averages, etc.
1945 Dygraph
.prototype.predraw_
= function() {
1946 // TODO(danvk): move more computations out of drawGraph_ and into here.
1947 this.computeYAxes_();
1949 // Create a new plotter.
1950 if (this.plotter_
) this.plotter_
.clear();
1951 this.plotter_
= new DygraphCanvasRenderer(this,
1952 this.hidden_
, this.layout_
,
1953 this.renderOptions_
);
1955 // The roller sits in the bottom left corner of the chart. We don't know where
1956 // this will be until the options are available, so it's positioned here.
1957 this.createRollInterface_();
1959 // Same thing applies for the labelsDiv. It's right edge should be flush with
1960 // the right edge of the charting area (which may not be the same as the right
1961 // edge of the div, if we have two y-axes.
1962 this.positionLabelsDiv_();
1964 // If the data or options have changed, then we'd better redraw.
1970 * Update the graph with new data. This method is called when the viewing area
1971 * has changed. If the underlying data or options have changed, predraw_ will
1972 * be called before drawGraph_ is called.
1975 Dygraph
.prototype.drawGraph_
= function() {
1976 var data
= this.rawData_
;
1978 // This is used to set the second parameter to drawCallback, below.
1979 var is_initial_draw
= this.is_initial_draw_
;
1980 this.is_initial_draw_
= false;
1982 var minY
= null, maxY
= null;
1983 this.layout_
.removeAllDatasets();
1985 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1987 // Loop over the fields (series). Go from the last to the first,
1988 // because if they're stacked that's how we accumulate the values.
1990 var cumulative_y
= []; // For stacked series.
1993 var extremes
= {}; // series name -> [low, high]
1995 // Loop over all fields and create datasets
1996 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1997 if (!this.visibility()[i
- 1]) continue;
1999 var seriesName
= this.attr_("labels")[i
];
2000 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2003 for (var j
= 0; j
< data
.length
; j
++) {
2004 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2005 var date
= data
[j
][0];
2006 series
.push([date
, data
[j
][i
]]);
2010 // TODO(danvk): move this into predraw_. It's insane to do it here.
2011 series
= this.rollingAverage(series
, this.rollPeriod_
);
2013 // Prune down to the desired range, if necessary (for zooming)
2014 // Because there can be lines going to points outside of the visible area,
2015 // we actually prune to visible points, plus one on either side.
2016 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2017 if (this.dateWindow_
) {
2018 var low
= this.dateWindow_
[0];
2019 var high
= this.dateWindow_
[1];
2021 // TODO(danvk): do binary search instead of linear search.
2022 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2023 var firstIdx
= null, lastIdx
= null;
2024 for (var k
= 0; k
< series
.length
; k
++) {
2025 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2028 if (series
[k
][0] <= high
) {
2032 if (firstIdx
=== null) firstIdx
= 0;
2033 if (firstIdx
> 0) firstIdx
--;
2034 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2035 if (lastIdx
< series
.length
- 1) lastIdx
++;
2036 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2037 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2038 pruned
.push(series
[k
]);
2042 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2045 var seriesExtremes
= this.extremeValues_(series
);
2048 for (var j
=0; j
<series
.length
; j
++) {
2049 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2052 } else if (this.attr_("stackedGraph")) {
2053 var l
= series
.length
;
2055 for (var j
= 0; j
< l
; j
++) {
2056 // If one data set has a NaN, let all subsequent stacked
2057 // sets inherit the NaN -- only start at 0 for the first set.
2058 var x
= series
[j
][0];
2059 if (cumulative_y
[x
] === undefined
) {
2060 cumulative_y
[x
] = 0;
2063 actual_y
= series
[j
][1];
2064 cumulative_y
[x
] += actual_y
;
2066 series
[j
] = [x
, cumulative_y
[x
]]
2068 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2069 seriesExtremes
[1] = cumulative_y
[x
];
2071 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2072 seriesExtremes
[0] = cumulative_y
[x
];
2076 extremes
[seriesName
] = seriesExtremes
;
2078 datasets
[i
] = series
;
2081 for (var i
= 1; i
< datasets
.length
; i
++) {
2082 if (!this.visibility()[i
- 1]) continue;
2083 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2086 // TODO(danvk): this method doesn't need to return anything.
2087 var out
= this.computeYAxisRanges_(extremes
);
2089 var seriesToAxisMap
= out
[1];
2090 this.layout_
.updateOptions( { yAxes
: axes
,
2091 seriesToAxisMap
: seriesToAxisMap
2096 // Tell PlotKit to use this new data and render itself
2097 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2098 this.layout_
.evaluateWithError();
2099 this.plotter_
.clear();
2100 this.plotter_
.render();
2101 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2102 this.canvas_
.height
);
2104 if (this.attr_("drawCallback") !== null) {
2105 this.attr_("drawCallback")(this, is_initial_draw
);
2110 * Determine properties of the y-axes which are independent of the data
2111 * currently being displayed. This includes things like the number of axes and
2112 * the style of the axes. It does not include the range of each axis and its
2114 * This fills in this.axes_ and this.seriesToAxisMap_.
2115 * axes_ = [ { options } ]
2116 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2117 * indices are into the axes_ array.
2119 Dygraph
.prototype.computeYAxes_
= function() {
2120 this.axes_
= [{ yAxisId
: 0 }]; // always have at least one y-axis.
2121 this.seriesToAxisMap_
= {};
2123 // Get a list of series names.
2124 var labels
= this.attr_("labels");
2126 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2128 // all options which could be applied per-axis:
2136 'axisLabelFontSize',
2140 // Copy global axis options over to the first axis.
2141 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2142 var k
= axisOptions
[i
];
2143 var v
= this.attr_(k
);
2144 if (v
) this.axes_
[0][k
] = v
;
2147 // Go through once and add all the axes.
2148 for (var seriesName
in series
) {
2149 if (!series
.hasOwnProperty(seriesName
)) continue;
2150 var axis
= this.attr_("axis", seriesName
);
2152 this.seriesToAxisMap_
[seriesName
] = 0;
2155 if (typeof(axis
) == 'object') {
2156 // Add a new axis, making a copy of its per-axis options.
2158 Dygraph
.update(opts
, this.axes_
[0]);
2159 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2160 var yAxisId
= this.axes_
.length
;
2161 opts
.yAxisId
= yAxisId
;
2162 Dygraph
.update(opts
, axis
);
2163 this.axes_
.push(opts
);
2164 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2168 // Go through one more time and assign series to an axis defined by another
2169 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2170 for (var seriesName
in series
) {
2171 if (!series
.hasOwnProperty(seriesName
)) continue;
2172 var axis
= this.attr_("axis", seriesName
);
2173 if (typeof(axis
) == 'string') {
2174 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2175 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2176 "series " + axis
+ ", which does not define its own axis.");
2179 var idx
= this.seriesToAxisMap_
[axis
];
2180 this.seriesToAxisMap_
[seriesName
] = idx
;
2184 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2185 // this last so that hiding the first series doesn't destroy the axis
2186 // properties of the primary axis.
2187 var seriesToAxisFiltered
= {};
2188 var vis
= this.visibility();
2189 for (var i
= 1; i
< labels
.length
; i
++) {
2191 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2193 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2197 * Returns the number of y-axes on the chart.
2198 * @return {Number} the number of axes.
2200 Dygraph
.prototype.numAxes
= function() {
2202 for (var series
in this.seriesToAxisMap_
) {
2203 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2204 var idx
= this.seriesToAxisMap_
[series
];
2205 if (idx
> last_axis
) last_axis
= idx
;
2207 return 1 + last_axis
;
2211 * Determine the value range and tick marks for each axis.
2212 * @param {Object} extremes A mapping from seriesName -> [low, high]
2213 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2215 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2216 // Build a map from axis number -> [list of series names]
2217 var seriesForAxis
= [];
2218 for (var series
in this.seriesToAxisMap_
) {
2219 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2220 var idx
= this.seriesToAxisMap_
[series
];
2221 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2222 seriesForAxis
[idx
].push(series
);
2225 // Compute extreme values, a span and tick marks for each axis.
2226 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2227 var axis
= this.axes_
[i
];
2228 if (axis
.valueWindow
) {
2229 // This is only set if the user has zoomed on the y-axis. It is never set
2230 // by a user. It takes precedence over axis.valueRange because, if you set
2231 // valueRange, you'd still expect to be able to pan.
2232 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2233 } else if (axis
.valueRange
) {
2234 // This is a user-set value range for this axis.
2235 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2237 // Calculate the extremes of extremes.
2238 var series
= seriesForAxis
[i
];
2239 var minY
= Infinity
; // extremes[series[0]][0];
2240 var maxY
= -Infinity
; // extremes[series[0]][1];
2241 for (var j
= 0; j
< series
.length
; j
++) {
2242 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2243 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2245 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2247 // Add some padding and round up to an integer to be human-friendly.
2248 var span
= maxY
- minY
;
2249 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2250 if (span
== 0) { span
= maxY
; }
2251 var maxAxisY
= maxY
+ 0.1 * span
;
2252 var minAxisY
= minY
- 0.1 * span
;
2254 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2255 if (!this.attr_("avoidMinZero")) {
2256 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2257 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2260 if (this.attr_("includeZero")) {
2261 if (maxY
< 0) maxAxisY
= 0;
2262 if (minY
> 0) minAxisY
= 0;
2265 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2268 // Add ticks. By default, all axes inherit the tick positions of the
2269 // primary axis. However, if an axis is specifically marked as having
2270 // independent ticks, then that is permissible as well.
2271 if (i
== 0 || axis
.independentTicks
) {
2273 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2274 axis
.computedValueRange
[1],
2278 var p_axis
= this.axes_
[0];
2279 var p_ticks
= p_axis
.ticks
;
2280 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2281 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2282 var tick_values
= [];
2283 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2284 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2285 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2286 tick_values
.push(y_val
);
2290 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2291 axis
.computedValueRange
[1],
2292 this, axis
, tick_values
);
2296 return [this.axes_
, this.seriesToAxisMap_
];
2300 * Calculates the rolling average of a data set.
2301 * If originalData is [label, val], rolls the average of those.
2302 * If originalData is [label, [, it's interpreted as [value, stddev]
2303 * and the roll is returned in the same form, with appropriately reduced
2304 * stddev for each value.
2305 * Note that this is where fractional input (i.e. '5/10') is converted into
2307 * @param {Array} originalData The data in the appropriate format (see above)
2308 * @param {Number} rollPeriod The number of days over which to average the data
2310 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2311 if (originalData
.length
< 2)
2312 return originalData
;
2313 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2314 var rollingData
= [];
2315 var sigma
= this.attr_("sigma");
2317 if (this.fractions_
) {
2319 var den
= 0; // numerator/denominator
2321 for (var i
= 0; i
< originalData
.length
; i
++) {
2322 num
+= originalData
[i
][1][0];
2323 den
+= originalData
[i
][1][1];
2324 if (i
- rollPeriod
>= 0) {
2325 num
-= originalData
[i
- rollPeriod
][1][0];
2326 den
-= originalData
[i
- rollPeriod
][1][1];
2329 var date
= originalData
[i
][0];
2330 var value
= den
? num
/ den
: 0.0;
2331 if (this.attr_("errorBars")) {
2332 if (this.wilsonInterval_
) {
2333 // For more details on this confidence interval, see:
2334 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2336 var p
= value
< 0 ? 0 : value
, n
= den
;
2337 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2338 var denom
= 1 + sigma
* sigma
/ den
;
2339 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2340 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2341 rollingData
[i
] = [date
,
2342 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2344 rollingData
[i
] = [date
, [0, 0, 0]];
2347 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2348 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2351 rollingData
[i
] = [date
, mult
* value
];
2354 } else if (this.attr_("customBars")) {
2359 for (var i
= 0; i
< originalData
.length
; i
++) {
2360 var data
= originalData
[i
][1];
2362 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2364 if (y
!= null && !isNaN(y
)) {
2370 if (i
- rollPeriod
>= 0) {
2371 var prev
= originalData
[i
- rollPeriod
];
2372 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2379 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2380 1.0 * (mid
- low
) / count
,
2381 1.0 * (high
- mid
) / count
]];
2384 // Calculate the rolling average for the first rollPeriod - 1 points where
2385 // there is not enough data to roll over the full number of days
2386 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2387 if (!this.attr_("errorBars")){
2388 if (rollPeriod
== 1) {
2389 return originalData
;
2392 for (var i
= 0; i
< originalData
.length
; i
++) {
2395 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2396 var y
= originalData
[j
][1];
2397 if (y
== null || isNaN(y
)) continue;
2399 sum
+= originalData
[j
][1];
2402 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2404 rollingData
[i
] = [originalData
[i
][0], null];
2409 for (var i
= 0; i
< originalData
.length
; i
++) {
2413 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2414 var y
= originalData
[j
][1][0];
2415 if (y
== null || isNaN(y
)) continue;
2417 sum
+= originalData
[j
][1][0];
2418 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2421 var stddev
= Math
.sqrt(variance
) / num_ok
;
2422 rollingData
[i
] = [originalData
[i
][0],
2423 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2425 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2435 * Parses a date, returning the number of milliseconds since epoch. This can be
2436 * passed in as an xValueParser in the Dygraph constructor.
2437 * TODO(danvk): enumerate formats that this understands.
2438 * @param {String} A date in YYYYMMDD format.
2439 * @return {Number} Milliseconds since epoch.
2442 Dygraph
.dateParser
= function(dateStr
, self
) {
2445 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2446 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2447 while (dateStrSlashed
.search("-") != -1) {
2448 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2450 d
= Date
.parse(dateStrSlashed
);
2451 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2452 // TODO(danvk): remove support for this format. It's confusing.
2453 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2454 + "/" + dateStr
.substr(6,2);
2455 d
= Date
.parse(dateStrSlashed
);
2457 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2458 // "2009/07/12 12:34:56"
2459 d
= Date
.parse(dateStr
);
2462 if (!d
|| isNaN(d
)) {
2463 self
.error("Couldn't parse " + dateStr
+ " as a date");
2469 * Detects the type of the str (date or numeric) and sets the various
2470 * formatting attributes in this.attrs_ based on this type.
2471 * @param {String} str An x value.
2474 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2476 if (str
.indexOf('-') >= 0 ||
2477 str
.indexOf('/') >= 0 ||
2478 isNaN(parseFloat(str
))) {
2480 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2481 // TODO(danvk): remove support for this format.
2486 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2487 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2488 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2489 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2491 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2492 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2493 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2494 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2499 * Parses a string in a special csv format. We expect a csv file where each
2500 * line is a date point, and the first field in each line is the date string.
2501 * We also expect that all remaining fields represent series.
2502 * if the errorBars attribute is set, then interpret the fields as:
2503 * date, series1, stddev1, series2, stddev2, ...
2504 * @param {Array.<Object>} data See above.
2507 * @return Array.<Object> An array with one entry for each row. These entries
2508 * are an array of cells in that row. The first entry is the parsed x-value for
2509 * the row. The second, third, etc. are the y-values. These can take on one of
2510 * three forms, depending on the CSV and constructor parameters:
2512 * 2. [ value, stddev ]
2513 * 3. [ low value, center value, high value ]
2515 Dygraph
.prototype.parseCSV_
= function(data
) {
2517 var lines
= data
.split("\n");
2519 // Use the default delimiter or fall back to a tab if that makes sense.
2520 var delim
= this.attr_('delimiter');
2521 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2526 if (this.labelsFromCSV_
) {
2528 this.attrs_
.labels
= lines
[0].split(delim
);
2531 // Parse the x as a float or return null if it's not a number.
2532 var parseFloatOrNull
= function(x
) {
2533 var val
= parseFloat(x
);
2534 // isFinite() returns false for NaN and +/-Infinity
.
2535 return isFinite(val
) ? val
: null;
2539 var defaultParserSet
= false; // attempt to auto-detect x value type
2540 var expectedCols
= this.attr_("labels").length
;
2541 var outOfOrder
= false;
2542 for (var i
= start
; i
< lines
.length
; i
++) {
2543 var line
= lines
[i
];
2544 if (line
.length
== 0) continue; // skip blank lines
2545 if (line
[0] == '#') continue; // skip comment lines
2546 var inFields
= line
.split(delim
);
2547 if (inFields
.length
< 2) continue;
2550 if (!defaultParserSet
) {
2551 this.detectTypeFromString_(inFields
[0]);
2552 xParser
= this.attr_("xValueParser");
2553 defaultParserSet
= true;
2555 fields
[0] = xParser(inFields
[0], this);
2557 // If fractions are expected, parse the numbers as "A/B
"
2558 if (this.fractions_) {
2559 for (var j = 1; j < inFields.length; j++) {
2560 // TODO(danvk): figure out an appropriate way to flag parse errors.
2561 var vals = inFields[j].split("/");
2562 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2564 } else if (this.attr_("errorBars
")) {
2565 // If there are error bars, values are (value, stddev) pairs
2566 for (var j = 1; j < inFields.length; j += 2)
2567 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2568 parseFloatOrNull(inFields[j + 1])];
2569 } else if (this.attr_("customBars
")) {
2570 // Bars are a low;center;high tuple
2571 for (var j = 1; j < inFields.length; j++) {
2572 var vals = inFields[j].split(";");
2573 fields[j] = [ parseFloatOrNull(vals[0]),
2574 parseFloatOrNull(vals[1]),
2575 parseFloatOrNull(vals[2]) ];
2578 // Values are just numbers
2579 for (var j = 1; j < inFields.length; j++) {
2580 fields[j] = parseFloatOrNull(inFields[j]);
2583 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2588 if (fields.length != expectedCols) {
2589 this.error("Number of columns
in line
" + i + " (" + fields.length +
2590 ") does not agree
with number of
labels (" + expectedCols +
2596 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2597 ret.sort(function(a,b) { return a[0] - b[0] });
2604 * The user has provided their data as a pre-packaged JS array. If the x values
2605 * are numeric, this is the same as dygraphs' internal format. If the x values
2606 * are dates, we need to convert them from Date objects to ms since epoch.
2607 * @param {Array.<Object>} data
2608 * @return {Array.<Object>} data with numeric x values.
2610 Dygraph.prototype.parseArray_ = function(data) {
2611 // Peek at the first x value to see if it's numeric.
2612 if (data.length == 0) {
2613 this.error("Can
't plot empty data set");
2616 if (data[0].length == 0) {
2617 this.error("Data set cannot contain an empty row");
2621 if (this.attr_("labels") == null) {
2622 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2623 "in the options parameter");
2624 this.attrs_.labels = [ "X" ];
2625 for (var i = 1; i < data[0].length; i++) {
2626 this.attrs_.labels.push("Y" + i);
2630 if (Dygraph.isDateLike(data[0][0])) {
2631 // Some intelligent defaults for a date x-axis.
2632 this.attrs_.xValueFormatter = Dygraph.dateString_;
2633 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2634 this.attrs_.xTicker = Dygraph.dateTicker;
2636 // Assume they're all dates
.
2637 var parsedData
= Dygraph
.clone(data
);
2638 for (var i
= 0; i
< data
.length
; i
++) {
2639 if (parsedData
[i
].length
== 0) {
2640 this.error("Row " + (1 + i
) + " of data is empty");
2643 if (parsedData
[i
][0] == null
2644 || typeof(parsedData
[i
][0].getTime
) != 'function'
2645 || isNaN(parsedData
[i
][0].getTime())) {
2646 this.error("x value in row " + (1 + i
) + " is not a Date");
2649 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2653 // Some intelligent defaults for a numeric x-axis.
2654 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2655 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2661 * Parses a DataTable object from gviz.
2662 * The data is expected to have a first column that is either a date or a
2663 * number. All subsequent columns must be numbers. If there is a clear mismatch
2664 * between this.xValueParser_ and the type of the first column, it will be
2665 * fixed. Fills out rawData_.
2666 * @param {Array.<Object>} data See above.
2669 Dygraph
.prototype.parseDataTable_
= function(data
) {
2670 var cols
= data
.getNumberOfColumns();
2671 var rows
= data
.getNumberOfRows();
2673 var indepType
= data
.getColumnType(0);
2674 if (indepType
== 'date' || indepType
== 'datetime') {
2675 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2676 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2677 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2678 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2679 } else if (indepType
== 'number') {
2680 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2681 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2682 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2683 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2685 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2686 "column 1 of DataTable input (Got '" + indepType
+ "')");
2690 // Array of the column indices which contain data (and not annotations).
2692 var annotationCols
= {}; // data index -> [annotation cols]
2693 var hasAnnotations
= false;
2694 for (var i
= 1; i
< cols
; i
++) {
2695 var type
= data
.getColumnType(i
);
2696 if (type
== 'number') {
2698 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2699 // This is OK -- it's an annotation column.
2700 var dataIdx
= colIdx
[colIdx
.length
- 1];
2701 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2702 annotationCols
[dataIdx
] = [i
];
2704 annotationCols
[dataIdx
].push(i
);
2706 hasAnnotations
= true;
2708 this.error("Only 'number' is supported as a dependent type with Gviz." +
2709 " 'string' is only supported if displayAnnotations is true");
2713 // Read column labels
2714 // TODO(danvk): add support back for errorBars
2715 var labels
= [data
.getColumnLabel(0)];
2716 for (var i
= 0; i
< colIdx
.length
; i
++) {
2717 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2718 if (this.attr_("errorBars")) i
+= 1;
2720 this.attrs_
.labels
= labels
;
2721 cols
= labels
.length
;
2724 var outOfOrder
= false;
2725 var annotations
= [];
2726 for (var i
= 0; i
< rows
; i
++) {
2728 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2729 data
.getValue(i
, 0) === null) {
2730 this.warn("Ignoring row " + i
+
2731 " of DataTable because of undefined or null first column.");
2735 if (indepType
== 'date' || indepType
== 'datetime') {
2736 row
.push(data
.getValue(i
, 0).getTime());
2738 row
.push(data
.getValue(i
, 0));
2740 if (!this.attr_("errorBars")) {
2741 for (var j
= 0; j
< colIdx
.length
; j
++) {
2742 var col
= colIdx
[j
];
2743 row
.push(data
.getValue(i
, col
));
2744 if (hasAnnotations
&&
2745 annotationCols
.hasOwnProperty(col
) &&
2746 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2748 ann
.series
= data
.getColumnLabel(col
);
2750 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2752 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2753 if (k
) ann
.text
+= "\n";
2754 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2756 annotations
.push(ann
);
2760 for (var j
= 0; j
< cols
- 1; j
++) {
2761 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2764 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2768 // Strip out infinities, which give dygraphs problems later on.
2769 for (var j
= 0; j
< row
.length
; j
++) {
2770 if (!isFinite(row
[j
])) row
[j
] = null;
2776 this.warn("DataTable is out of order; order it correctly to speed loading.");
2777 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2779 this.rawData_
= ret
;
2781 if (annotations
.length
> 0) {
2782 this.setAnnotations(annotations
, true);
2786 // These functions are all based on MochiKit.
2787 Dygraph
.update
= function (self
, o
) {
2788 if (typeof(o
) != 'undefined' && o
!== null) {
2790 if (o
.hasOwnProperty(k
)) {
2798 Dygraph
.isArrayLike
= function (o
) {
2799 var typ
= typeof(o
);
2801 (typ
!= 'object' && !(typ
== 'function' &&
2802 typeof(o
.item
) == 'function')) ||
2804 typeof(o
.length
) != 'number' ||
2812 Dygraph
.isDateLike
= function (o
) {
2813 if (typeof(o
) != "object" || o
=== null ||
2814 typeof(o
.getTime
) != 'function') {
2820 Dygraph
.clone
= function(o
) {
2821 // TODO(danvk): figure out how MochiKit's version works
2823 for (var i
= 0; i
< o
.length
; i
++) {
2824 if (Dygraph
.isArrayLike(o
[i
])) {
2825 r
.push(Dygraph
.clone(o
[i
]));
2835 * Get the CSV data. If it's in a function, call that function. If it's in a
2836 * file, do an XMLHttpRequest to get it.
2839 Dygraph
.prototype.start_
= function() {
2840 if (typeof this.file_
== 'function') {
2841 // CSV string. Pretend we got it via XHR.
2842 this.loadedEvent_(this.file_());
2843 } else if (Dygraph
.isArrayLike(this.file_
)) {
2844 this.rawData_
= this.parseArray_(this.file_
);
2846 } else if (typeof this.file_
== 'object' &&
2847 typeof this.file_
.getColumnRange
== 'function') {
2848 // must be a DataTable from gviz.
2849 this.parseDataTable_(this.file_
);
2851 } else if (typeof this.file_
== 'string') {
2852 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2853 if (this.file_
.indexOf('\n') >= 0) {
2854 this.loadedEvent_(this.file_
);
2856 var req
= new XMLHttpRequest();
2858 req
.onreadystatechange
= function () {
2859 if (req
.readyState
== 4) {
2860 if (req
.status
== 200) {
2861 caller
.loadedEvent_(req
.responseText
);
2866 req
.open("GET", this.file_
, true);
2870 this.error("Unknown data format: " + (typeof this.file_
));
2875 * Changes various properties of the graph. These can include:
2877 * <li>file: changes the source data for the graph</li>
2878 * <li>errorBars: changes whether the data contains stddev</li>
2880 * @param {Object} attrs The new properties and values
2882 Dygraph
.prototype.updateOptions
= function(attrs
) {
2883 // TODO(danvk): this is a mess. Rethink this function.
2884 if ('rollPeriod' in attrs
) {
2885 this.rollPeriod_
= attrs
.rollPeriod
;
2887 if ('dateWindow' in attrs
) {
2888 this.dateWindow_
= attrs
.dateWindow
;
2891 // TODO(danvk): validate per-series options.
2896 // highlightCircleSize
2898 Dygraph
.update(this.user_attrs_
, attrs
);
2899 Dygraph
.update(this.renderOptions_
, attrs
);
2901 this.labelsFromCSV_
= (this.attr_("labels") == null);
2903 // TODO(danvk): this doesn't match the constructor logic
2904 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2905 if (attrs
['file']) {
2906 this.file_
= attrs
['file'];
2914 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2915 * containing div (which has presumably changed size since the dygraph was
2916 * instantiated. If the width/height are specified, the div will be resized.
2918 * This is far more efficient than destroying and re-instantiating a
2919 * Dygraph, since it doesn't have to reparse the underlying data.
2921 * @param {Number} width Width (in pixels)
2922 * @param {Number} height Height (in pixels)
2924 Dygraph
.prototype.resize
= function(width
, height
) {
2925 if (this.resize_lock
) {
2928 this.resize_lock
= true;
2930 if ((width
=== null) != (height
=== null)) {
2931 this.warn("Dygraph.resize() should be called with zero parameters or " +
2932 "two non-NULL parameters. Pretending it was zero.");
2933 width
= height
= null;
2936 // TODO(danvk): there should be a clear() method.
2937 this.maindiv_
.innerHTML
= "";
2938 this.attrs_
.labelsDiv
= null;
2941 this.maindiv_
.style
.width
= width
+ "px";
2942 this.maindiv_
.style
.height
= height
+ "px";
2943 this.width_
= width
;
2944 this.height_
= height
;
2946 this.width_
= this.maindiv_
.offsetWidth
;
2947 this.height_
= this.maindiv_
.offsetHeight
;
2950 this.createInterface_();
2953 this.resize_lock
= false;
2957 * Adjusts the number of days in the rolling average. Updates the graph to
2958 * reflect the new averaging period.
2959 * @param {Number} length Number of days over which to average the data.
2961 Dygraph
.prototype.adjustRoll
= function(length
) {
2962 this.rollPeriod_
= length
;
2967 * Returns a boolean array of visibility statuses.
2969 Dygraph
.prototype.visibility
= function() {
2970 // Do lazy-initialization, so that this happens after we know the number of
2972 if (!this.attr_("visibility")) {
2973 this.attrs_
["visibility"] = [];
2975 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2976 this.attr_("visibility").push(true);
2978 return this.attr_("visibility");
2982 * Changes the visiblity of a series.
2984 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2985 var x
= this.visibility();
2986 if (num
< 0 || num
>= x
.length
) {
2987 this.warn("invalid series number in setVisibility: " + num
);
2995 * Update the list of annotations and redraw the chart.
2997 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2998 // Only add the annotation CSS rule once we know it will be used.
2999 Dygraph
.addAnnotationRule();
3000 this.annotations_
= ann
;
3001 this.layout_
.setAnnotations(this.annotations_
);
3002 if (!suppressDraw
) {
3008 * Return the list of annotations.
3010 Dygraph
.prototype.annotations
= function() {
3011 return this.annotations_
;
3015 * Get the index of a series (column) given its name. The first column is the
3016 * x-axis, so the data series start with index 1.
3018 Dygraph
.prototype.indexFromSetName
= function(name
) {
3019 var labels
= this.attr_("labels");
3020 for (var i
= 0; i
< labels
.length
; i
++) {
3021 if (labels
[i
] == name
) return i
;
3026 Dygraph
.addAnnotationRule
= function() {
3027 if (Dygraph
.addedAnnotationCSS
) return;
3029 var rule
= "border: 1px solid black; " +
3030 "background-color: white; " +
3031 "text-align: center;";
3033 var styleSheetElement
= document
.createElement("style");
3034 styleSheetElement
.type
= "text/css";
3035 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3037 // Find the first style sheet that we can access.
3038 // We may not add a rule to a style sheet from another domain for security
3039 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3040 // adds its own style sheets from google.com.
3041 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3042 if (document
.styleSheets
[i
].disabled
) continue;
3043 var mysheet
= document
.styleSheets
[i
];
3045 if (mysheet
.insertRule
) { // Firefox
3046 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3047 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3048 } else if (mysheet
.addRule
) { // IE
3049 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3051 Dygraph
.addedAnnotationCSS
= true;
3054 // Was likely a security exception.
3058 this.warn("Unable to add default annotation CSS rule; display may be off.");
3062 * Create a new canvas element. This is more complex than a simple
3063 * document.createElement("canvas") because of IE and excanvas.
3065 Dygraph
.createCanvas
= function() {
3066 var canvas
= document
.createElement("canvas");
3068 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3069 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3070 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3078 * A wrapper around Dygraph that implements the gviz API.
3079 * @param {Object} container The DOM object the visualization should live in.
3081 Dygraph
.GVizChart
= function(container
) {
3082 this.container
= container
;
3085 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3086 // Clear out any existing dygraph.
3087 // TODO(danvk): would it make more sense to simply redraw using the current
3088 // date_graph object?
3089 this.container
.innerHTML
= '';
3090 if (typeof(this.date_graph
) != 'undefined') {
3091 this.date_graph
.destroy();
3094 this.date_graph
= new Dygraph(this.container
, data
, options
);
3098 * Google charts compatible setSelection
3099 * Only row selection is supported, all points in the row will be highlighted
3100 * @param {Array} array of the selected cells
3103 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3105 if (selection_array
.length
) {
3106 row
= selection_array
[0].row
;
3108 this.date_graph
.setSelection(row
);
3112 * Google charts compatible getSelection implementation
3113 * @return {Array} array of the selected cells
3116 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3119 var row
= this.date_graph
.getSelection();
3121 if (row
< 0) return selection
;
3124 for (var i
in this.date_graph
.layout_
.datasets
) {
3125 selection
.push({row
: row
, column
: col
});
3132 // Older pages may still use this name.
3133 DateGraph
= Dygraph
;