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];
805 // Record the range of each y-axis at the start of the drag.
806 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
807 context
.is2DPan
= false;
808 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
809 var axis
= g
.axes_
[i
];
810 var yRange
= g
.yAxisRange(i
);
811 axis
.dragValueRange
= yRange
[1] - yRange
[0];
812 var r
= g
.toDataCoords(null, context
.dragStartY
, i
);
813 axis
.draggingValue
= r
[1];
814 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
817 // TODO(konigsberg): Switch from all this math to toDataCoords?
818 // Seems to work for the dragging value.
819 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
822 // Called in response to an interaction model operation that
823 // responds to an event that pans the view.
825 // It's used in the default callback for "mousemove" operations.
826 // Custom interaction model builders can use it to provide the default
829 Dygraph
.movePan
= function(event
, g
, context
) {
830 context
.dragEndX
= g
.dragGetX_(event
, context
);
831 context
.dragEndY
= g
.dragGetY_(event
, context
);
833 // TODO(danvk): update this comment
834 // Want to have it so that:
835 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
836 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
837 // 3. draggingValue appears at dragEndY.
838 // 4. valueRange is unaltered.
840 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
841 var maxDate
= minDate
+ context
.dateRange
;
842 g
.dateWindow_
= [minDate
, maxDate
];
844 // y-axis scaling is automatic unless this is a full 2D pan.
845 if (context
.is2DPan
) {
846 // Adjust each axis appropriately.
847 var y_frac
= context
.dragEndY
/ g
.height_
;
848 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
849 var axis
= g
.axes_
[i
];
850 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
851 var minValue
= maxValue
- axis
.dragValueRange
;
852 axis
.valueWindow
= [ minValue
, maxValue
];
859 // Called in response to an interaction model operation that
860 // responds to an event that ends panning.
862 // It's used in the default callback for "mouseup" operations.
863 // Custom interaction model builders can use it to provide the default
866 Dygraph
.endPan
= function(event
, g
, context
) {
867 context
.isPanning
= false;
868 context
.is2DPan
= false;
869 context
.draggingDate
= null;
870 context
.dateRange
= null;
871 context
.valueRange
= null;
874 // Called in response to an interaction model operation that
875 // responds to an event that starts zooming.
877 // It's used in the default callback for "mousedown" operations.
878 // Custom interaction model builders can use it to provide the default
881 Dygraph
.startZoom
= function(event
, g
, context
) {
882 context
.isZooming
= true;
885 // Called in response to an interaction model operation that
886 // responds to an event that defines zoom boundaries.
888 // It's used in the default callback for "mousemove" operations.
889 // Custom interaction model builders can use it to provide the default
892 Dygraph
.moveZoom
= function(event
, g
, context
) {
893 context
.dragEndX
= g
.dragGetX_(event
, context
);
894 context
.dragEndY
= g
.dragGetY_(event
, context
);
896 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
897 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
899 // drag direction threshold for y axis is twice as large as x axis
900 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
903 context
.dragDirection
,
908 context
.prevDragDirection
,
912 context
.prevEndX
= context
.dragEndX
;
913 context
.prevEndY
= context
.dragEndY
;
914 context
.prevDragDirection
= context
.dragDirection
;
917 // Called in response to an interaction model operation that
918 // responds to an event that performs a zoom based on previously defined
921 // It's used in the default callback for "mouseup" operations.
922 // Custom interaction model builders can use it to provide the default
925 Dygraph
.endZoom
= function(event
, g
, context
) {
926 context
.isZooming
= false;
927 context
.dragEndX
= g
.dragGetX_(event
, context
);
928 context
.dragEndY
= g
.dragGetY_(event
, context
);
929 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
930 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
932 if (regionWidth
< 2 && regionHeight
< 2 &&
933 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
934 // TODO(danvk): pass along more info about the points, e.g. 'x'
935 if (g
.attr_('clickCallback') != null) {
936 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
938 if (g
.attr_('pointClickCallback')) {
939 // check if the click was on a particular point.
941 var closestDistance
= 0;
942 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
943 var p
= g
.selPoints_
[i
];
944 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
945 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
946 if (closestIdx
== -1 || distance
< closestDistance
) {
947 closestDistance
= distance
;
952 // Allow any click within two pixels of the dot.
953 var radius
= g
.attr_('highlightCircleSize') + 2;
954 if (closestDistance
<= 5 * 5) {
955 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
960 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
961 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
962 Math
.max(context
.dragStartX
, context
.dragEndX
));
963 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
964 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
965 Math
.max(context
.dragStartY
, context
.dragEndY
));
967 g
.canvas_
.getContext("2d").clearRect(0, 0,
971 context
.dragStartX
= null;
972 context
.dragStartY
= null;
975 Dygraph
.defaultInteractionModel
= {
976 // Track the beginning of drag events
977 mousedown
: function(event
, g
, context
) {
978 context
.initializeMouseDown(event
, g
, context
);
980 if (event
.altKey
|| event
.shiftKey
) {
981 Dygraph
.startPan(event
, g
, context
);
983 Dygraph
.startZoom(event
, g
, context
);
987 // Draw zoom rectangles when the mouse is down and the user moves around
988 mousemove
: function(event
, g
, context
) {
989 if (context
.isZooming
) {
990 Dygraph
.moveZoom(event
, g
, context
);
991 } else if (context
.isPanning
) {
992 Dygraph
.movePan(event
, g
, context
);
996 mouseup
: function(event
, g
, context
) {
997 if (context
.isZooming
) {
998 Dygraph
.endZoom(event
, g
, context
);
999 } else if (context
.isPanning
) {
1000 Dygraph
.endPan(event
, g
, context
);
1004 // Temporarily cancel the dragging event when the mouse leaves the graph
1005 mouseout
: function(event
, g
, context
) {
1006 if (context
.isZooming
) {
1007 context
.dragEndX
= null;
1008 context
.dragEndY
= null;
1012 // Disable zooming out if panning.
1013 dblclick
: function(event
, g
, context
) {
1014 if (event
.altKey
|| event
.shiftKey
) {
1017 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1018 // friendlier to public use.
1023 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1026 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1030 Dygraph
.prototype.createDragInterface_
= function() {
1032 // Tracks whether the mouse is down right now
1034 isPanning
: false, // is this drag part of a pan?
1035 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1040 dragDirection
: null,
1043 prevDragDirection
: null,
1045 // TODO(danvk): update this comment
1046 // draggingDate and draggingValue represent the [date,value] point on the
1047 // graph at which the mouse was pressed. As the mouse moves while panning,
1048 // the viewport must pan so that the mouse position points to
1049 // [draggingDate, draggingValue]
1052 // TODO(danvk): update this comment
1053 // The range in second/value units that the viewport encompasses during a
1054 // panning operation.
1057 // Utility function to convert page-wide coordinates to canvas coords
1061 initializeMouseDown
: function(event
, g
, context
) {
1062 // prevents mouse drags from selecting page text.
1063 if (event
.preventDefault
) {
1064 event
.preventDefault(); // Firefox, Chrome, etc.
1066 event
.returnValue
= false; // IE
1067 event
.cancelBubble
= true;
1070 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1071 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1072 context
.dragStartX
= g
.dragGetX_(event
, context
);
1073 context
.dragStartY
= g
.dragGetY_(event
, context
);
1077 var interactionModel
= this.attr_("interactionModel");
1079 // Self is the graph.
1082 // Function that binds the graph and context to the handler.
1083 var bindHandler
= function(handler
) {
1084 return function(event
) {
1085 handler(event
, self
, context
);
1089 for (var eventName
in interactionModel
) {
1090 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1091 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1092 bindHandler(interactionModel
[eventName
]));
1095 // If the user releases the mouse button during a drag, but not over the
1096 // canvas, then it doesn't count as a zooming action.
1097 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1098 if (context
.isZooming
|| context
.isPanning
) {
1099 context
.isZooming
= false;
1100 context
.dragStartX
= null;
1101 context
.dragStartY
= null;
1104 if (context
.isPanning
) {
1105 context
.isPanning
= false;
1106 context
.draggingDate
= null;
1107 context
.dateRange
= null;
1108 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1109 delete self
.axes_
[i
].draggingValue
;
1110 delete self
.axes_
[i
].dragValueRange
;
1117 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1118 * up any previous zoom rectangles that were drawn. This could be optimized to
1119 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1122 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1123 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1124 * @param {Number} startX The X position where the drag started, in canvas
1126 * @param {Number} endX The current X position of the drag, in canvas coords.
1127 * @param {Number} startY The Y position where the drag started, in canvas
1129 * @param {Number} endY The current Y position of the drag, in canvas coords.
1130 * @param {Number} prevDirection the value of direction on the previous call to
1131 * this function. Used to avoid excess redrawing
1132 * @param {Number} prevEndX The value of endX on the previous call to this
1133 * function. Used to avoid excess redrawing
1134 * @param {Number} prevEndY The value of endY on the previous call to this
1135 * function. Used to avoid excess redrawing
1138 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1139 prevDirection
, prevEndX
, prevEndY
) {
1140 var ctx
= this.canvas_
.getContext("2d");
1142 // Clean up from the previous rect if necessary
1143 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1144 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1145 Math
.abs(startX
- prevEndX
), this.height_
);
1146 } else if (prevDirection
== Dygraph
.VERTICAL
){
1147 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1148 this.width_
, Math
.abs(startY
- prevEndY
));
1151 // Draw a light-grey rectangle to show the new viewing area
1152 if (direction
== Dygraph
.HORIZONTAL
) {
1153 if (endX
&& startX
) {
1154 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1155 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1156 Math
.abs(endX
- startX
), this.height_
);
1159 if (direction
== Dygraph
.VERTICAL
) {
1160 if (endY
&& startY
) {
1161 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1162 ctx
.fillRect(0, Math
.min(startY
, endY
),
1163 this.width_
, Math
.abs(endY
- startY
));
1169 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1170 * the canvas. The exact zoom window may be slightly larger if there are no data
1171 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1172 * which accepts dates that match the raw data. This function redraws the graph.
1174 * @param {Number} lowX The leftmost pixel value that should be visible.
1175 * @param {Number} highX The rightmost pixel value that should be visible.
1178 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1179 // Find the earliest and latest dates contained in this canvasx range.
1180 // Convert the call to date ranges of the raw data.
1181 var r
= this.toDataCoords(lowX
, null);
1183 r
= this.toDataCoords(highX
, null);
1185 this.doZoomXDates_(minDate
, maxDate
);
1189 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1190 * method with doZoomX which accepts pixel coordinates. This function redraws
1193 * @param {Number} minDate The minimum date that should be visible.
1194 * @param {Number} maxDate The maximum date that should be visible.
1197 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1198 this.dateWindow_
= [minDate
, maxDate
];
1200 if (this.attr_("zoomCallback")) {
1201 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1206 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1207 * the canvas. This function redraws the graph.
1209 * @param {Number} lowY The topmost pixel value that should be visible.
1210 * @param {Number} highY The lowest pixel value that should be visible.
1213 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1214 // Find the highest and lowest values in pixel range for each axis.
1215 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1216 // This is because pixels increase as you go down on the screen, whereas data
1217 // coordinates increase as you go up the screen.
1218 var valueRanges
= [];
1219 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1220 var hi
= this.toDataCoords(null, lowY
, i
);
1221 var low
= this.toDataCoords(null, highY
, i
);
1222 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1223 valueRanges
.push([low
[1], hi
[1]]);
1227 if (this.attr_("zoomCallback")) {
1228 var xRange
= this.xAxisRange();
1229 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1234 * Reset the zoom to the original view coordinates. This is the same as
1235 * double-clicking on the graph.
1239 Dygraph
.prototype.doUnzoom_
= function() {
1241 if (this.dateWindow_
!= null) {
1243 this.dateWindow_
= null;
1246 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1247 if (this.axes_
[i
].valueWindow
!= null) {
1249 delete this.axes_
[i
].valueWindow
;
1254 // Putting the drawing operation before the callback because it resets
1257 if (this.attr_("zoomCallback")) {
1258 var minDate
= this.rawData_
[0][0];
1259 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1260 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1266 * When the mouse moves in the canvas, display information about a nearby data
1267 * point and draw dots over those points in the data series. This function
1268 * takes care of cleanup of previously-drawn dots.
1269 * @param {Object} event The mousemove event from the browser.
1272 Dygraph
.prototype.mouseMove_
= function(event
) {
1273 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1274 var points
= this.layout_
.points
;
1279 // Loop through all the points and find the date nearest to our current
1281 var minDist
= 1e+100;
1283 for (var i
= 0; i
< points
.length
; i
++) {
1284 var point
= points
[i
];
1285 if (point
== null) continue;
1286 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1287 if (dist
> minDist
) continue;
1291 if (idx
>= 0) lastx
= points
[idx
].xval
;
1292 // Check that you can really highlight the last day's data
1293 var last
= points
[points
.length
-1];
1294 if (last
!= null && canvasx
> last
.canvasx
)
1295 lastx
= points
[points
.length
-1].xval
;
1297 // Extract the points we've selected
1298 this.selPoints_
= [];
1299 var l
= points
.length
;
1300 if (!this.attr_("stackedGraph")) {
1301 for (var i
= 0; i
< l
; i
++) {
1302 if (points
[i
].xval
== lastx
) {
1303 this.selPoints_
.push(points
[i
]);
1307 // Need to 'unstack' points starting from the bottom
1308 var cumulative_sum
= 0;
1309 for (var i
= l
- 1; i
>= 0; i
--) {
1310 if (points
[i
].xval
== lastx
) {
1311 var p
= {}; // Clone the point since we modify it
1312 for (var k
in points
[i
]) {
1313 p
[k
] = points
[i
][k
];
1315 p
.yval
-= cumulative_sum
;
1316 cumulative_sum
+= p
.yval
;
1317 this.selPoints_
.push(p
);
1320 this.selPoints_
.reverse();
1323 if (this.attr_("highlightCallback")) {
1324 var px
= this.lastx_
;
1325 if (px
!== null && lastx
!= px
) {
1326 // only fire if the selected point has changed.
1327 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1331 // Save last x position for callbacks.
1332 this.lastx_
= lastx
;
1334 this.updateSelection_();
1338 * Transforms layout_.points index into data row number.
1339 * @param int layout_.points index
1340 * @return int row number, or -1 if none could be found.
1343 Dygraph
.prototype.idxToRow_
= function(idx
) {
1344 if (idx
< 0) return -1;
1346 for (var i
in this.layout_
.datasets
) {
1347 if (idx
< this.layout_
.datasets
[i
].length
) {
1348 return this.boundaryIds_
[0][0]+idx
;
1350 idx
-= this.layout_
.datasets
[i
].length
;
1356 * Draw dots over the selectied points in the data series. This function
1357 * takes care of cleanup of previously-drawn dots.
1360 Dygraph
.prototype.updateSelection_
= function() {
1361 // Clear the previously drawn vertical, if there is one
1362 var ctx
= this.canvas_
.getContext("2d");
1363 if (this.previousVerticalX_
>= 0) {
1364 // Determine the maximum highlight circle size.
1365 var maxCircleSize
= 0;
1366 var labels
= this.attr_('labels');
1367 for (var i
= 1; i
< labels
.length
; i
++) {
1368 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1369 if (r
> maxCircleSize
) maxCircleSize
= r
;
1371 var px
= this.previousVerticalX_
;
1372 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1373 2 * maxCircleSize
+ 2, this.height_
);
1376 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1378 if (this.selPoints_
.length
> 0) {
1379 var canvasx
= this.selPoints_
[0].canvasx
;
1381 // Set the status message to indicate the selected point(s)
1382 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1383 var fmtFunc
= this.attr_('yValueFormatter');
1384 var clen
= this.colors_
.length
;
1386 if (this.attr_('showLabelsOnHighlight')) {
1387 // Set the status message to indicate the selected point(s)
1388 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1389 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1390 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1391 if (this.attr_("labelsSeparateLines")) {
1394 var point
= this.selPoints_
[i
];
1395 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1396 var yval
= fmtFunc(point
.yval
);
1397 replace
+= " <b><font color='" + c
.toHex() + "'>"
1398 + point
.name
+ "</font></b>:"
1402 this.attr_("labelsDiv").innerHTML
= replace
;
1405 // Draw colored circles over the center of each selected point
1407 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1408 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1410 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1412 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1413 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1414 0, 2 * Math
.PI
, false);
1419 this.previousVerticalX_
= canvasx
;
1424 * Set manually set selected dots, and display information about them
1425 * @param int row number that should by highlighted
1426 * false value clears the selection
1429 Dygraph
.prototype.setSelection
= function(row
) {
1430 // Extract the points we've selected
1431 this.selPoints_
= [];
1434 if (row
!== false) {
1435 row
= row
-this.boundaryIds_
[0][0];
1438 if (row
!== false && row
>= 0) {
1439 for (var i
in this.layout_
.datasets
) {
1440 if (row
< this.layout_
.datasets
[i
].length
) {
1441 var point
= this.layout_
.points
[pos
+row
];
1443 if (this.attr_("stackedGraph")) {
1444 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1447 this.selPoints_
.push(point
);
1449 pos
+= this.layout_
.datasets
[i
].length
;
1453 if (this.selPoints_
.length
) {
1454 this.lastx_
= this.selPoints_
[0].xval
;
1455 this.updateSelection_();
1458 this.clearSelection();
1464 * The mouse has left the canvas. Clear out whatever artifacts remain
1465 * @param {Object} event the mouseout event from the browser.
1468 Dygraph
.prototype.mouseOut_
= function(event
) {
1469 if (this.attr_("unhighlightCallback")) {
1470 this.attr_("unhighlightCallback")(event
);
1473 if (this.attr_("hideOverlayOnMouseOut")) {
1474 this.clearSelection();
1479 * Remove all selection from the canvas
1482 Dygraph
.prototype.clearSelection
= function() {
1483 // Get rid of the overlay data
1484 var ctx
= this.canvas_
.getContext("2d");
1485 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1486 this.attr_("labelsDiv").innerHTML
= "";
1487 this.selPoints_
= [];
1492 * Returns the number of the currently selected row
1493 * @return int row number, of -1 if nothing is selected
1496 Dygraph
.prototype.getSelection
= function() {
1497 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1501 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1502 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1503 return row
+ this.boundaryIds_
[0][0];
1509 Dygraph
.zeropad
= function(x
) {
1510 if (x
< 10) return "0" + x
; else return "" + x
;
1514 * Return a string version of the hours, minutes and seconds portion of a date.
1515 * @param {Number} date The JavaScript date (ms since epoch)
1516 * @return {String} A time of the form "HH:MM:SS"
1519 Dygraph
.hmsString_
= function(date
) {
1520 var zeropad
= Dygraph
.zeropad
;
1521 var d
= new Date(date
);
1522 if (d
.getSeconds()) {
1523 return zeropad(d
.getHours()) + ":" +
1524 zeropad(d
.getMinutes()) + ":" +
1525 zeropad(d
.getSeconds());
1527 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1532 * Convert a JS date to a string appropriate to display on an axis that
1533 * is displaying values at the stated granularity.
1534 * @param {Date} date The date to format
1535 * @param {Number} granularity One of the Dygraph granularity constants
1536 * @return {String} The formatted date
1539 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1540 if (granularity
>= Dygraph
.DECADAL
) {
1541 return date
.strftime('%Y');
1542 } else if (granularity
>= Dygraph
.MONTHLY
) {
1543 return date
.strftime('%b %y');
1545 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1546 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1547 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1549 return Dygraph
.hmsString_(date
.getTime());
1555 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1556 * @param {Number} date The JavaScript date (ms since epoch)
1557 * @return {String} A date of the form "YYYY/MM/DD"
1560 Dygraph
.dateString_
= function(date
, self
) {
1561 var zeropad
= Dygraph
.zeropad
;
1562 var d
= new Date(date
);
1565 var year
= "" + d
.getFullYear();
1566 // Get a 0 padded month string
1567 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1568 // Get a 0 padded day string
1569 var day
= zeropad(d
.getDate());
1572 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1573 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1575 return year
+ "/" + month + "/" + day
+ ret
;
1579 * Round a number to the specified number of digits past the decimal point.
1580 * @param {Number} num The number to round
1581 * @param {Number} places The number of decimals to which to round
1582 * @return {Number} The rounded number
1585 Dygraph
.round_
= function(num
, places
) {
1586 var shift
= Math
.pow(10, places
);
1587 return Math
.round(num
* shift
)/shift
;
1591 * Fires when there's data available to be graphed.
1592 * @param {String} data Raw CSV data to be plotted
1595 Dygraph
.prototype.loadedEvent_
= function(data
) {
1596 this.rawData_
= this.parseCSV_(data
);
1600 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1601 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1602 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1605 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1608 Dygraph
.prototype.addXTicks_
= function() {
1609 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1610 var startDate
, endDate
;
1611 if (this.dateWindow_
) {
1612 startDate
= this.dateWindow_
[0];
1613 endDate
= this.dateWindow_
[1];
1615 startDate
= this.rawData_
[0][0];
1616 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1619 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1620 this.layout_
.updateOptions({xTicks
: xTicks
});
1623 // Time granularity enumeration
1624 Dygraph
.SECONDLY
= 0;
1625 Dygraph
.TWO_SECONDLY
= 1;
1626 Dygraph
.FIVE_SECONDLY
= 2;
1627 Dygraph
.TEN_SECONDLY
= 3;
1628 Dygraph
.THIRTY_SECONDLY
= 4;
1629 Dygraph
.MINUTELY
= 5;
1630 Dygraph
.TWO_MINUTELY
= 6;
1631 Dygraph
.FIVE_MINUTELY
= 7;
1632 Dygraph
.TEN_MINUTELY
= 8;
1633 Dygraph
.THIRTY_MINUTELY
= 9;
1634 Dygraph
.HOURLY
= 10;
1635 Dygraph
.TWO_HOURLY
= 11;
1636 Dygraph
.SIX_HOURLY
= 12;
1638 Dygraph
.WEEKLY
= 14;
1639 Dygraph
.MONTHLY
= 15;
1640 Dygraph
.QUARTERLY
= 16;
1641 Dygraph
.BIANNUAL
= 17;
1642 Dygraph
.ANNUAL
= 18;
1643 Dygraph
.DECADAL
= 19;
1644 Dygraph
.CENTENNIAL
= 20;
1645 Dygraph
.NUM_GRANULARITIES
= 21;
1647 Dygraph
.SHORT_SPACINGS
= [];
1648 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1649 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1650 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1651 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1652 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1653 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1654 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1655 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1656 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1657 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1658 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1659 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1660 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1661 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1662 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1666 // If we used this time granularity, how many ticks would there be?
1667 // This is only an approximation, but it's generally good enough.
1669 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1670 if (granularity
< Dygraph
.MONTHLY
) {
1671 // Generate one tick mark for every fixed interval of time.
1672 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1673 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1675 var year_mod
= 1; // e.g. to only print one point every 10 years.
1676 var num_months
= 12;
1677 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1678 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1679 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1680 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1681 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1683 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1684 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1685 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1691 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1692 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1694 // Returns an array containing {v: millis, label: label} dictionaries.
1696 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1697 var formatter
= this.attr_("xAxisLabelFormatter");
1699 if (granularity
< Dygraph
.MONTHLY
) {
1700 // Generate one tick mark for every fixed interval of time.
1701 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1702 var format
= '%d%b'; // e.g. "1Jan"
1704 // Find a time less than start_time which occurs on a "nice" time boundary
1705 // for this granularity.
1706 var g
= spacing
/ 1000;
1707 var d
= new Date(start_time
);
1708 if (g
<= 60) { // seconds
1709 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1713 if (g
<= 60) { // minutes
1714 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1719 if (g
<= 24) { // days
1720 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1725 if (g
== 7) { // one week
1726 d
.setDate(d
.getDate() - d
.getDay());
1731 start_time
= d
.getTime();
1733 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1734 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1737 // Display a tick mark on the first of a set of months of each year.
1738 // Years get a tick mark iff y % year_mod == 0. This is useful for
1739 // displaying a tick mark once every 10 years, say, on long time scales.
1741 var year_mod
= 1; // e.g. to only print one point every 10 years.
1743 if (granularity
== Dygraph
.MONTHLY
) {
1744 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1745 } else if (granularity
== Dygraph
.QUARTERLY
) {
1746 months
= [ 0, 3, 6, 9 ];
1747 } else if (granularity
== Dygraph
.BIANNUAL
) {
1749 } else if (granularity
== Dygraph
.ANNUAL
) {
1751 } else if (granularity
== Dygraph
.DECADAL
) {
1754 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1758 this.warn("Span of dates is too long");
1761 var start_year
= new Date(start_time
).getFullYear();
1762 var end_year
= new Date(end_time
).getFullYear();
1763 var zeropad
= Dygraph
.zeropad
;
1764 for (var i
= start_year
; i
<= end_year
; i
++) {
1765 if (i
% year_mod
!= 0) continue;
1766 for (var j
= 0; j
< months
.length
; j
++) {
1767 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1768 var t
= Date
.parse(date_str
);
1769 if (t
< start_time
|| t
> end_time
) continue;
1770 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1780 * Add ticks to the x-axis based on a date range.
1781 * @param {Number} startDate Start of the date window (millis since epoch)
1782 * @param {Number} endDate End of the date window (millis since epoch)
1783 * @return {Array.<Object>} Array of {label, value} tuples.
1786 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1788 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1789 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1790 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1797 return self
.GetXAxis(startDate
, endDate
, chosen
);
1799 // TODO(danvk): signal error.
1804 * Add ticks when the x axis has numbers on it (instead of dates)
1805 * @param {Number} startDate Start of the date window (millis since epoch)
1806 * @param {Number} endDate End of the date window (millis since epoch)
1808 * @param {function} attribute accessor function.
1809 * @return {Array.<Object>} Array of {label, value} tuples.
1812 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1813 var attr
= function(k
) {
1814 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1815 return self
.attr_(k
);
1820 for (var i
= 0; i
< vals
.length
; i
++) {
1821 ticks
.push({v
: vals
[i
]});
1825 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1826 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1827 // The first spacing greater than pixelsPerYLabel is what we use.
1828 // TODO(danvk): version that works on a log scale.
1829 if (attr("labelsKMG2")) {
1830 var mults
= [1, 2, 4, 8];
1832 var mults
= [1, 2, 5];
1834 var scale
, low_val
, high_val
, nTicks
;
1835 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1836 var pixelsPerTick
= attr('pixelsPerYLabel');
1837 for (var i
= -10; i
< 50; i
++) {
1838 if (attr("labelsKMG2")) {
1839 var base_scale
= Math
.pow(16, i
);
1841 var base_scale
= Math
.pow(10, i
);
1843 for (var j
= 0; j
< mults
.length
; j
++) {
1844 scale
= base_scale
* mults
[j
];
1845 low_val
= Math
.floor(minV
/ scale
) * scale
;
1846 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1847 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1848 var spacing
= self
.height_
/ nTicks
;
1849 // wish I could break out of both loops at once...
1850 if (spacing
> pixelsPerTick
) break;
1852 if (spacing
> pixelsPerTick
) break;
1855 // Construct the set of ticks.
1856 // Allow reverse y-axis if it's explicitly requested.
1857 if (low_val
> high_val
) scale
*= -1;
1858 for (var i
= 0; i
< nTicks
; i
++) {
1859 var tickV
= low_val
+ i
* scale
;
1860 ticks
.push( {v
: tickV
} );
1864 // Add formatted labels to the ticks.
1867 if (attr("labelsKMB")) {
1869 k_labels
= [ "K", "M", "B", "T" ];
1871 if (attr("labelsKMG2")) {
1872 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1874 k_labels
= [ "k", "M", "G", "T" ];
1876 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1878 for (var i
= 0; i
< ticks
.length
; i
++) {
1879 var tickV
= ticks
[i
].v
;
1880 var absTickV
= Math
.abs(tickV
);
1882 if (formatter
!= undefined
) {
1883 label
= formatter(tickV
);
1885 label
= Dygraph
.round_(tickV
, 2);
1887 if (k_labels
.length
) {
1888 // Round up to an appropriate unit.
1890 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1891 if (absTickV
>= n
) {
1892 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1897 ticks
[i
].label
= label
;
1902 // Computes the range of the data series (including confidence intervals).
1903 // series is either [ [x1, y1], [x2, y2], ... ] or
1904 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1905 // Returns [low, high]
1906 Dygraph
.prototype.extremeValues_
= function(series
) {
1907 var minY
= null, maxY
= null;
1909 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1911 // With custom bars, maxY is the max of the high values.
1912 for (var j
= 0; j
< series
.length
; j
++) {
1913 var y
= series
[j
][1][0];
1915 var low
= y
- series
[j
][1][1];
1916 var high
= y
+ series
[j
][1][2];
1917 if (low
> y
) low
= y
; // this can happen with custom bars,
1918 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1919 if (maxY
== null || high
> maxY
) {
1922 if (minY
== null || low
< minY
) {
1927 for (var j
= 0; j
< series
.length
; j
++) {
1928 var y
= series
[j
][1];
1929 if (y
=== null || isNaN(y
)) continue;
1930 if (maxY
== null || y
> maxY
) {
1933 if (minY
== null || y
< minY
) {
1939 return [minY
, maxY
];
1943 * This function is called once when the chart's data is changed or the options
1944 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1945 * idea is that values derived from the chart's data can be computed here,
1946 * rather than every time the chart is drawn. This includes things like the
1947 * number of axes, rolling averages, etc.
1949 Dygraph
.prototype.predraw_
= function() {
1950 // TODO(danvk): move more computations out of drawGraph_ and into here.
1951 this.computeYAxes_();
1953 // Create a new plotter.
1954 if (this.plotter_
) this.plotter_
.clear();
1955 this.plotter_
= new DygraphCanvasRenderer(this,
1956 this.hidden_
, this.layout_
,
1957 this.renderOptions_
);
1959 // The roller sits in the bottom left corner of the chart. We don't know where
1960 // this will be until the options are available, so it's positioned here.
1961 this.createRollInterface_();
1963 // Same thing applies for the labelsDiv. It's right edge should be flush with
1964 // the right edge of the charting area (which may not be the same as the right
1965 // edge of the div, if we have two y-axes.
1966 this.positionLabelsDiv_();
1968 // If the data or options have changed, then we'd better redraw.
1974 * Update the graph with new data. This method is called when the viewing area
1975 * has changed. If the underlying data or options have changed, predraw_ will
1976 * be called before drawGraph_ is called.
1979 Dygraph
.prototype.drawGraph_
= function() {
1980 var data
= this.rawData_
;
1982 // This is used to set the second parameter to drawCallback, below.
1983 var is_initial_draw
= this.is_initial_draw_
;
1984 this.is_initial_draw_
= false;
1986 var minY
= null, maxY
= null;
1987 this.layout_
.removeAllDatasets();
1989 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1991 // Loop over the fields (series). Go from the last to the first,
1992 // because if they're stacked that's how we accumulate the values.
1994 var cumulative_y
= []; // For stacked series.
1997 var extremes
= {}; // series name -> [low, high]
1999 // Loop over all fields and create datasets
2000 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2001 if (!this.visibility()[i
- 1]) continue;
2003 var seriesName
= this.attr_("labels")[i
];
2004 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2007 for (var j
= 0; j
< data
.length
; j
++) {
2008 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2009 var date
= data
[j
][0];
2010 series
.push([date
, data
[j
][i
]]);
2014 // TODO(danvk): move this into predraw_. It's insane to do it here.
2015 series
= this.rollingAverage(series
, this.rollPeriod_
);
2017 // Prune down to the desired range, if necessary (for zooming)
2018 // Because there can be lines going to points outside of the visible area,
2019 // we actually prune to visible points, plus one on either side.
2020 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2021 if (this.dateWindow_
) {
2022 var low
= this.dateWindow_
[0];
2023 var high
= this.dateWindow_
[1];
2025 // TODO(danvk): do binary search instead of linear search.
2026 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2027 var firstIdx
= null, lastIdx
= null;
2028 for (var k
= 0; k
< series
.length
; k
++) {
2029 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2032 if (series
[k
][0] <= high
) {
2036 if (firstIdx
=== null) firstIdx
= 0;
2037 if (firstIdx
> 0) firstIdx
--;
2038 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2039 if (lastIdx
< series
.length
- 1) lastIdx
++;
2040 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2041 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2042 pruned
.push(series
[k
]);
2046 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2049 var seriesExtremes
= this.extremeValues_(series
);
2052 for (var j
=0; j
<series
.length
; j
++) {
2053 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2056 } else if (this.attr_("stackedGraph")) {
2057 var l
= series
.length
;
2059 for (var j
= 0; j
< l
; j
++) {
2060 // If one data set has a NaN, let all subsequent stacked
2061 // sets inherit the NaN -- only start at 0 for the first set.
2062 var x
= series
[j
][0];
2063 if (cumulative_y
[x
] === undefined
) {
2064 cumulative_y
[x
] = 0;
2067 actual_y
= series
[j
][1];
2068 cumulative_y
[x
] += actual_y
;
2070 series
[j
] = [x
, cumulative_y
[x
]]
2072 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2073 seriesExtremes
[1] = cumulative_y
[x
];
2075 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2076 seriesExtremes
[0] = cumulative_y
[x
];
2080 extremes
[seriesName
] = seriesExtremes
;
2082 datasets
[i
] = series
;
2085 for (var i
= 1; i
< datasets
.length
; i
++) {
2086 if (!this.visibility()[i
- 1]) continue;
2087 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2090 // TODO(danvk): this method doesn't need to return anything.
2091 var out
= this.computeYAxisRanges_(extremes
);
2093 var seriesToAxisMap
= out
[1];
2094 this.layout_
.updateOptions( { yAxes
: axes
,
2095 seriesToAxisMap
: seriesToAxisMap
2100 // Tell PlotKit to use this new data and render itself
2101 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2102 this.layout_
.evaluateWithError();
2103 this.plotter_
.clear();
2104 this.plotter_
.render();
2105 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2106 this.canvas_
.height
);
2108 if (this.attr_("drawCallback") !== null) {
2109 this.attr_("drawCallback")(this, is_initial_draw
);
2114 * Determine properties of the y-axes which are independent of the data
2115 * currently being displayed. This includes things like the number of axes and
2116 * the style of the axes. It does not include the range of each axis and its
2118 * This fills in this.axes_ and this.seriesToAxisMap_.
2119 * axes_ = [ { options } ]
2120 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2121 * indices are into the axes_ array.
2123 Dygraph
.prototype.computeYAxes_
= function() {
2124 this.axes_
= [{}]; // always have at least one y-axis.
2125 this.seriesToAxisMap_
= {};
2127 // Get a list of series names.
2128 var labels
= this.attr_("labels");
2130 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2132 // all options which could be applied per-axis:
2140 'axisLabelFontSize',
2144 // Copy global axis options over to the first axis.
2145 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2146 var k
= axisOptions
[i
];
2147 var v
= this.attr_(k
);
2148 if (v
) this.axes_
[0][k
] = v
;
2151 // Go through once and add all the axes.
2152 for (var seriesName
in series
) {
2153 if (!series
.hasOwnProperty(seriesName
)) continue;
2154 var axis
= this.attr_("axis", seriesName
);
2156 this.seriesToAxisMap_
[seriesName
] = 0;
2159 if (typeof(axis
) == 'object') {
2160 // Add a new axis, making a copy of its per-axis options.
2162 Dygraph
.update(opts
, this.axes_
[0]);
2163 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2164 Dygraph
.update(opts
, axis
);
2165 this.axes_
.push(opts
);
2166 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2170 // Go through one more time and assign series to an axis defined by another
2171 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2172 for (var seriesName
in series
) {
2173 if (!series
.hasOwnProperty(seriesName
)) continue;
2174 var axis
= this.attr_("axis", seriesName
);
2175 if (typeof(axis
) == 'string') {
2176 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2177 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2178 "series " + axis
+ ", which does not define its own axis.");
2181 var idx
= this.seriesToAxisMap_
[axis
];
2182 this.seriesToAxisMap_
[seriesName
] = idx
;
2186 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2187 // this last so that hiding the first series doesn't destroy the axis
2188 // properties of the primary axis.
2189 var seriesToAxisFiltered
= {};
2190 var vis
= this.visibility();
2191 for (var i
= 1; i
< labels
.length
; i
++) {
2193 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2195 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2199 * Returns the number of y-axes on the chart.
2200 * @return {Number} the number of axes.
2202 Dygraph
.prototype.numAxes
= function() {
2204 for (var series
in this.seriesToAxisMap_
) {
2205 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2206 var idx
= this.seriesToAxisMap_
[series
];
2207 if (idx
> last_axis
) last_axis
= idx
;
2209 return 1 + last_axis
;
2213 * Determine the value range and tick marks for each axis.
2214 * @param {Object} extremes A mapping from seriesName -> [low, high]
2215 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2217 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2218 // Build a map from axis number -> [list of series names]
2219 var seriesForAxis
= [];
2220 for (var series
in this.seriesToAxisMap_
) {
2221 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2222 var idx
= this.seriesToAxisMap_
[series
];
2223 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2224 seriesForAxis
[idx
].push(series
);
2227 // Compute extreme values, a span and tick marks for each axis.
2228 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2229 var axis
= this.axes_
[i
];
2230 if (axis
.valueWindow
) {
2231 // This is only set if the user has zoomed on the y-axis. It is never set
2232 // by a user. It takes precedence over axis.valueRange because, if you set
2233 // valueRange, you'd still expect to be able to pan.
2234 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2235 } else if (axis
.valueRange
) {
2236 // This is a user-set value range for this axis.
2237 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2239 // Calculate the extremes of extremes.
2240 var series
= seriesForAxis
[i
];
2241 var minY
= Infinity
; // extremes[series[0]][0];
2242 var maxY
= -Infinity
; // extremes[series[0]][1];
2243 for (var j
= 0; j
< series
.length
; j
++) {
2244 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2245 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2247 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2249 // Add some padding and round up to an integer to be human-friendly.
2250 var span
= maxY
- minY
;
2251 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2252 if (span
== 0) { span
= maxY
; }
2253 var maxAxisY
= maxY
+ 0.1 * span
;
2254 var minAxisY
= minY
- 0.1 * span
;
2256 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2257 if (!this.attr_("avoidMinZero")) {
2258 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2259 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2262 if (this.attr_("includeZero")) {
2263 if (maxY
< 0) maxAxisY
= 0;
2264 if (minY
> 0) minAxisY
= 0;
2267 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2270 // Add ticks. By default, all axes inherit the tick positions of the
2271 // primary axis. However, if an axis is specifically marked as having
2272 // independent ticks, then that is permissible as well.
2273 if (i
== 0 || axis
.independentTicks
) {
2275 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2276 axis
.computedValueRange
[1],
2280 var p_axis
= this.axes_
[0];
2281 var p_ticks
= p_axis
.ticks
;
2282 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2283 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2284 var tick_values
= [];
2285 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2286 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2287 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2288 tick_values
.push(y_val
);
2292 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2293 axis
.computedValueRange
[1],
2294 this, axis
, tick_values
);
2298 return [this.axes_
, this.seriesToAxisMap_
];
2302 * Calculates the rolling average of a data set.
2303 * If originalData is [label, val], rolls the average of those.
2304 * If originalData is [label, [, it's interpreted as [value, stddev]
2305 * and the roll is returned in the same form, with appropriately reduced
2306 * stddev for each value.
2307 * Note that this is where fractional input (i.e. '5/10') is converted into
2309 * @param {Array} originalData The data in the appropriate format (see above)
2310 * @param {Number} rollPeriod The number of days over which to average the data
2312 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2313 if (originalData
.length
< 2)
2314 return originalData
;
2315 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2316 var rollingData
= [];
2317 var sigma
= this.attr_("sigma");
2319 if (this.fractions_
) {
2321 var den
= 0; // numerator/denominator
2323 for (var i
= 0; i
< originalData
.length
; i
++) {
2324 num
+= originalData
[i
][1][0];
2325 den
+= originalData
[i
][1][1];
2326 if (i
- rollPeriod
>= 0) {
2327 num
-= originalData
[i
- rollPeriod
][1][0];
2328 den
-= originalData
[i
- rollPeriod
][1][1];
2331 var date
= originalData
[i
][0];
2332 var value
= den
? num
/ den
: 0.0;
2333 if (this.attr_("errorBars")) {
2334 if (this.wilsonInterval_
) {
2335 // For more details on this confidence interval, see:
2336 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2338 var p
= value
< 0 ? 0 : value
, n
= den
;
2339 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2340 var denom
= 1 + sigma
* sigma
/ den
;
2341 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2342 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2343 rollingData
[i
] = [date
,
2344 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2346 rollingData
[i
] = [date
, [0, 0, 0]];
2349 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2350 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2353 rollingData
[i
] = [date
, mult
* value
];
2356 } else if (this.attr_("customBars")) {
2361 for (var i
= 0; i
< originalData
.length
; i
++) {
2362 var data
= originalData
[i
][1];
2364 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2366 if (y
!= null && !isNaN(y
)) {
2372 if (i
- rollPeriod
>= 0) {
2373 var prev
= originalData
[i
- rollPeriod
];
2374 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2381 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2382 1.0 * (mid
- low
) / count
,
2383 1.0 * (high
- mid
) / count
]];
2386 // Calculate the rolling average for the first rollPeriod - 1 points where
2387 // there is not enough data to roll over the full number of days
2388 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2389 if (!this.attr_("errorBars")){
2390 if (rollPeriod
== 1) {
2391 return originalData
;
2394 for (var i
= 0; i
< originalData
.length
; i
++) {
2397 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2398 var y
= originalData
[j
][1];
2399 if (y
== null || isNaN(y
)) continue;
2401 sum
+= originalData
[j
][1];
2404 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2406 rollingData
[i
] = [originalData
[i
][0], null];
2411 for (var i
= 0; i
< originalData
.length
; i
++) {
2415 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2416 var y
= originalData
[j
][1][0];
2417 if (y
== null || isNaN(y
)) continue;
2419 sum
+= originalData
[j
][1][0];
2420 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2423 var stddev
= Math
.sqrt(variance
) / num_ok
;
2424 rollingData
[i
] = [originalData
[i
][0],
2425 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2427 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2437 * Parses a date, returning the number of milliseconds since epoch. This can be
2438 * passed in as an xValueParser in the Dygraph constructor.
2439 * TODO(danvk): enumerate formats that this understands.
2440 * @param {String} A date in YYYYMMDD format.
2441 * @return {Number} Milliseconds since epoch.
2444 Dygraph
.dateParser
= function(dateStr
, self
) {
2447 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2448 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2449 while (dateStrSlashed
.search("-") != -1) {
2450 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2452 d
= Date
.parse(dateStrSlashed
);
2453 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2454 // TODO(danvk): remove support for this format. It's confusing.
2455 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2456 + "/" + dateStr
.substr(6,2);
2457 d
= Date
.parse(dateStrSlashed
);
2459 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2460 // "2009/07/12 12:34:56"
2461 d
= Date
.parse(dateStr
);
2464 if (!d
|| isNaN(d
)) {
2465 self
.error("Couldn't parse " + dateStr
+ " as a date");
2471 * Detects the type of the str (date or numeric) and sets the various
2472 * formatting attributes in this.attrs_ based on this type.
2473 * @param {String} str An x value.
2476 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2478 if (str
.indexOf('-') >= 0 ||
2479 str
.indexOf('/') >= 0 ||
2480 isNaN(parseFloat(str
))) {
2482 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2483 // TODO(danvk): remove support for this format.
2488 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2489 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2490 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2491 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2493 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2494 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2495 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2496 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2501 * Parses a string in a special csv format. We expect a csv file where each
2502 * line is a date point, and the first field in each line is the date string.
2503 * We also expect that all remaining fields represent series.
2504 * if the errorBars attribute is set, then interpret the fields as:
2505 * date, series1, stddev1, series2, stddev2, ...
2506 * @param {Array.<Object>} data See above.
2509 * @return Array.<Object> An array with one entry for each row. These entries
2510 * are an array of cells in that row. The first entry is the parsed x-value for
2511 * the row. The second, third, etc. are the y-values. These can take on one of
2512 * three forms, depending on the CSV and constructor parameters:
2514 * 2. [ value, stddev ]
2515 * 3. [ low value, center value, high value ]
2517 Dygraph
.prototype.parseCSV_
= function(data
) {
2519 var lines
= data
.split("\n");
2521 // Use the default delimiter or fall back to a tab if that makes sense.
2522 var delim
= this.attr_('delimiter');
2523 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2528 if (this.labelsFromCSV_
) {
2530 this.attrs_
.labels
= lines
[0].split(delim
);
2533 // Parse the x as a float or return null if it's not a number.
2534 var parseFloatOrNull
= function(x
) {
2535 var val
= parseFloat(x
);
2536 // isFinite() returns false for NaN and +/-Infinity
.
2537 return isFinite(val
) ? val
: null;
2541 var defaultParserSet
= false; // attempt to auto-detect x value type
2542 var expectedCols
= this.attr_("labels").length
;
2543 var outOfOrder
= false;
2544 for (var i
= start
; i
< lines
.length
; i
++) {
2545 var line
= lines
[i
];
2546 if (line
.length
== 0) continue; // skip blank lines
2547 if (line
[0] == '#') continue; // skip comment lines
2548 var inFields
= line
.split(delim
);
2549 if (inFields
.length
< 2) continue;
2552 if (!defaultParserSet
) {
2553 this.detectTypeFromString_(inFields
[0]);
2554 xParser
= this.attr_("xValueParser");
2555 defaultParserSet
= true;
2557 fields
[0] = xParser(inFields
[0], this);
2559 // If fractions are expected, parse the numbers as "A/B
"
2560 if (this.fractions_) {
2561 for (var j = 1; j < inFields.length; j++) {
2562 // TODO(danvk): figure out an appropriate way to flag parse errors.
2563 var vals = inFields[j].split("/");
2564 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2566 } else if (this.attr_("errorBars
")) {
2567 // If there are error bars, values are (value, stddev) pairs
2568 for (var j = 1; j < inFields.length; j += 2)
2569 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2570 parseFloatOrNull(inFields[j + 1])];
2571 } else if (this.attr_("customBars
")) {
2572 // Bars are a low;center;high tuple
2573 for (var j = 1; j < inFields.length; j++) {
2574 var vals = inFields[j].split(";");
2575 fields[j] = [ parseFloatOrNull(vals[0]),
2576 parseFloatOrNull(vals[1]),
2577 parseFloatOrNull(vals[2]) ];
2580 // Values are just numbers
2581 for (var j = 1; j < inFields.length; j++) {
2582 fields[j] = parseFloatOrNull(inFields[j]);
2585 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2590 if (fields.length != expectedCols) {
2591 this.error("Number of columns
in line
" + i + " (" + fields.length +
2592 ") does not agree
with number of
labels (" + expectedCols +
2598 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2599 ret.sort(function(a,b) { return a[0] - b[0] });
2606 * The user has provided their data as a pre-packaged JS array. If the x values
2607 * are numeric, this is the same as dygraphs' internal format. If the x values
2608 * are dates, we need to convert them from Date objects to ms since epoch.
2609 * @param {Array.<Object>} data
2610 * @return {Array.<Object>} data with numeric x values.
2612 Dygraph.prototype.parseArray_ = function(data) {
2613 // Peek at the first x value to see if it's numeric.
2614 if (data.length == 0) {
2615 this.error("Can
't plot empty data set");
2618 if (data[0].length == 0) {
2619 this.error("Data set cannot contain an empty row");
2623 if (this.attr_("labels") == null) {
2624 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2625 "in the options parameter");
2626 this.attrs_.labels = [ "X" ];
2627 for (var i = 1; i < data[0].length; i++) {
2628 this.attrs_.labels.push("Y" + i);
2632 if (Dygraph.isDateLike(data[0][0])) {
2633 // Some intelligent defaults for a date x-axis.
2634 this.attrs_.xValueFormatter = Dygraph.dateString_;
2635 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2636 this.attrs_.xTicker = Dygraph.dateTicker;
2638 // Assume they're all dates
.
2639 var parsedData
= Dygraph
.clone(data
);
2640 for (var i
= 0; i
< data
.length
; i
++) {
2641 if (parsedData
[i
].length
== 0) {
2642 this.error("Row " + (1 + i
) + " of data is empty");
2645 if (parsedData
[i
][0] == null
2646 || typeof(parsedData
[i
][0].getTime
) != 'function'
2647 || isNaN(parsedData
[i
][0].getTime())) {
2648 this.error("x value in row " + (1 + i
) + " is not a Date");
2651 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2655 // Some intelligent defaults for a numeric x-axis.
2656 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2657 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2663 * Parses a DataTable object from gviz.
2664 * The data is expected to have a first column that is either a date or a
2665 * number. All subsequent columns must be numbers. If there is a clear mismatch
2666 * between this.xValueParser_ and the type of the first column, it will be
2667 * fixed. Fills out rawData_.
2668 * @param {Array.<Object>} data See above.
2671 Dygraph
.prototype.parseDataTable_
= function(data
) {
2672 var cols
= data
.getNumberOfColumns();
2673 var rows
= data
.getNumberOfRows();
2675 var indepType
= data
.getColumnType(0);
2676 if (indepType
== 'date' || indepType
== 'datetime') {
2677 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2678 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2679 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2680 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2681 } else if (indepType
== 'number') {
2682 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2683 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2684 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2685 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2687 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2688 "column 1 of DataTable input (Got '" + indepType
+ "')");
2692 // Array of the column indices which contain data (and not annotations).
2694 var annotationCols
= {}; // data index -> [annotation cols]
2695 var hasAnnotations
= false;
2696 for (var i
= 1; i
< cols
; i
++) {
2697 var type
= data
.getColumnType(i
);
2698 if (type
== 'number') {
2700 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2701 // This is OK -- it's an annotation column.
2702 var dataIdx
= colIdx
[colIdx
.length
- 1];
2703 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2704 annotationCols
[dataIdx
] = [i
];
2706 annotationCols
[dataIdx
].push(i
);
2708 hasAnnotations
= true;
2710 this.error("Only 'number' is supported as a dependent type with Gviz." +
2711 " 'string' is only supported if displayAnnotations is true");
2715 // Read column labels
2716 // TODO(danvk): add support back for errorBars
2717 var labels
= [data
.getColumnLabel(0)];
2718 for (var i
= 0; i
< colIdx
.length
; i
++) {
2719 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2720 if (this.attr_("errorBars")) i
+= 1;
2722 this.attrs_
.labels
= labels
;
2723 cols
= labels
.length
;
2726 var outOfOrder
= false;
2727 var annotations
= [];
2728 for (var i
= 0; i
< rows
; i
++) {
2730 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2731 data
.getValue(i
, 0) === null) {
2732 this.warn("Ignoring row " + i
+
2733 " of DataTable because of undefined or null first column.");
2737 if (indepType
== 'date' || indepType
== 'datetime') {
2738 row
.push(data
.getValue(i
, 0).getTime());
2740 row
.push(data
.getValue(i
, 0));
2742 if (!this.attr_("errorBars")) {
2743 for (var j
= 0; j
< colIdx
.length
; j
++) {
2744 var col
= colIdx
[j
];
2745 row
.push(data
.getValue(i
, col
));
2746 if (hasAnnotations
&&
2747 annotationCols
.hasOwnProperty(col
) &&
2748 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2750 ann
.series
= data
.getColumnLabel(col
);
2752 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2754 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2755 if (k
) ann
.text
+= "\n";
2756 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2758 annotations
.push(ann
);
2762 for (var j
= 0; j
< cols
- 1; j
++) {
2763 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2766 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2770 // Strip out infinities, which give dygraphs problems later on.
2771 for (var j
= 0; j
< row
.length
; j
++) {
2772 if (!isFinite(row
[j
])) row
[j
] = null;
2778 this.warn("DataTable is out of order; order it correctly to speed loading.");
2779 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2781 this.rawData_
= ret
;
2783 if (annotations
.length
> 0) {
2784 this.setAnnotations(annotations
, true);
2788 // These functions are all based on MochiKit.
2789 Dygraph
.update
= function (self
, o
) {
2790 if (typeof(o
) != 'undefined' && o
!== null) {
2792 if (o
.hasOwnProperty(k
)) {
2800 Dygraph
.isArrayLike
= function (o
) {
2801 var typ
= typeof(o
);
2803 (typ
!= 'object' && !(typ
== 'function' &&
2804 typeof(o
.item
) == 'function')) ||
2806 typeof(o
.length
) != 'number' ||
2814 Dygraph
.isDateLike
= function (o
) {
2815 if (typeof(o
) != "object" || o
=== null ||
2816 typeof(o
.getTime
) != 'function') {
2822 Dygraph
.clone
= function(o
) {
2823 // TODO(danvk): figure out how MochiKit's version works
2825 for (var i
= 0; i
< o
.length
; i
++) {
2826 if (Dygraph
.isArrayLike(o
[i
])) {
2827 r
.push(Dygraph
.clone(o
[i
]));
2837 * Get the CSV data. If it's in a function, call that function. If it's in a
2838 * file, do an XMLHttpRequest to get it.
2841 Dygraph
.prototype.start_
= function() {
2842 if (typeof this.file_
== 'function') {
2843 // CSV string. Pretend we got it via XHR.
2844 this.loadedEvent_(this.file_());
2845 } else if (Dygraph
.isArrayLike(this.file_
)) {
2846 this.rawData_
= this.parseArray_(this.file_
);
2848 } else if (typeof this.file_
== 'object' &&
2849 typeof this.file_
.getColumnRange
== 'function') {
2850 // must be a DataTable from gviz.
2851 this.parseDataTable_(this.file_
);
2853 } else if (typeof this.file_
== 'string') {
2854 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2855 if (this.file_
.indexOf('\n') >= 0) {
2856 this.loadedEvent_(this.file_
);
2858 var req
= new XMLHttpRequest();
2860 req
.onreadystatechange
= function () {
2861 if (req
.readyState
== 4) {
2862 if (req
.status
== 200) {
2863 caller
.loadedEvent_(req
.responseText
);
2868 req
.open("GET", this.file_
, true);
2872 this.error("Unknown data format: " + (typeof this.file_
));
2877 * Changes various properties of the graph. These can include:
2879 * <li>file: changes the source data for the graph</li>
2880 * <li>errorBars: changes whether the data contains stddev</li>
2882 * @param {Object} attrs The new properties and values
2884 Dygraph
.prototype.updateOptions
= function(attrs
) {
2885 // TODO(danvk): this is a mess. Rethink this function.
2886 if ('rollPeriod' in attrs
) {
2887 this.rollPeriod_
= attrs
.rollPeriod
;
2889 if ('dateWindow' in attrs
) {
2890 this.dateWindow_
= attrs
.dateWindow
;
2893 // TODO(danvk): validate per-series options.
2898 // highlightCircleSize
2900 Dygraph
.update(this.user_attrs_
, attrs
);
2901 Dygraph
.update(this.renderOptions_
, attrs
);
2903 this.labelsFromCSV_
= (this.attr_("labels") == null);
2905 // TODO(danvk): this doesn't match the constructor logic
2906 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2907 if (attrs
['file']) {
2908 this.file_
= attrs
['file'];
2916 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2917 * containing div (which has presumably changed size since the dygraph was
2918 * instantiated. If the width/height are specified, the div will be resized.
2920 * This is far more efficient than destroying and re-instantiating a
2921 * Dygraph, since it doesn't have to reparse the underlying data.
2923 * @param {Number} width Width (in pixels)
2924 * @param {Number} height Height (in pixels)
2926 Dygraph
.prototype.resize
= function(width
, height
) {
2927 if (this.resize_lock
) {
2930 this.resize_lock
= true;
2932 if ((width
=== null) != (height
=== null)) {
2933 this.warn("Dygraph.resize() should be called with zero parameters or " +
2934 "two non-NULL parameters. Pretending it was zero.");
2935 width
= height
= null;
2938 // TODO(danvk): there should be a clear() method.
2939 this.maindiv_
.innerHTML
= "";
2940 this.attrs_
.labelsDiv
= null;
2943 this.maindiv_
.style
.width
= width
+ "px";
2944 this.maindiv_
.style
.height
= height
+ "px";
2945 this.width_
= width
;
2946 this.height_
= height
;
2948 this.width_
= this.maindiv_
.offsetWidth
;
2949 this.height_
= this.maindiv_
.offsetHeight
;
2952 this.createInterface_();
2955 this.resize_lock
= false;
2959 * Adjusts the number of days in the rolling average. Updates the graph to
2960 * reflect the new averaging period.
2961 * @param {Number} length Number of days over which to average the data.
2963 Dygraph
.prototype.adjustRoll
= function(length
) {
2964 this.rollPeriod_
= length
;
2969 * Returns a boolean array of visibility statuses.
2971 Dygraph
.prototype.visibility
= function() {
2972 // Do lazy-initialization, so that this happens after we know the number of
2974 if (!this.attr_("visibility")) {
2975 this.attrs_
["visibility"] = [];
2977 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2978 this.attr_("visibility").push(true);
2980 return this.attr_("visibility");
2984 * Changes the visiblity of a series.
2986 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2987 var x
= this.visibility();
2988 if (num
< 0 || num
>= x
.length
) {
2989 this.warn("invalid series number in setVisibility: " + num
);
2997 * Update the list of annotations and redraw the chart.
2999 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3000 // Only add the annotation CSS rule once we know it will be used.
3001 Dygraph
.addAnnotationRule();
3002 this.annotations_
= ann
;
3003 this.layout_
.setAnnotations(this.annotations_
);
3004 if (!suppressDraw
) {
3010 * Return the list of annotations.
3012 Dygraph
.prototype.annotations
= function() {
3013 return this.annotations_
;
3017 * Get the index of a series (column) given its name. The first column is the
3018 * x-axis, so the data series start with index 1.
3020 Dygraph
.prototype.indexFromSetName
= function(name
) {
3021 var labels
= this.attr_("labels");
3022 for (var i
= 0; i
< labels
.length
; i
++) {
3023 if (labels
[i
] == name
) return i
;
3028 Dygraph
.addAnnotationRule
= function() {
3029 if (Dygraph
.addedAnnotationCSS
) return;
3031 var rule
= "border: 1px solid black; " +
3032 "background-color: white; " +
3033 "text-align: center;";
3035 var styleSheetElement
= document
.createElement("style");
3036 styleSheetElement
.type
= "text/css";
3037 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3039 // Find the first style sheet that we can access.
3040 // We may not add a rule to a style sheet from another domain for security
3041 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3042 // adds its own style sheets from google.com.
3043 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3044 if (document
.styleSheets
[i
].disabled
) continue;
3045 var mysheet
= document
.styleSheets
[i
];
3047 if (mysheet
.insertRule
) { // Firefox
3048 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3049 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3050 } else if (mysheet
.addRule
) { // IE
3051 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3053 Dygraph
.addedAnnotationCSS
= true;
3056 // Was likely a security exception.
3060 this.warn("Unable to add default annotation CSS rule; display may be off.");
3064 * Create a new canvas element. This is more complex than a simple
3065 * document.createElement("canvas") because of IE and excanvas.
3067 Dygraph
.createCanvas
= function() {
3068 var canvas
= document
.createElement("canvas");
3070 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3071 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3072 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3080 * A wrapper around Dygraph that implements the gviz API.
3081 * @param {Object} container The DOM object the visualization should live in.
3083 Dygraph
.GVizChart
= function(container
) {
3084 this.container
= container
;
3087 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3088 // Clear out any existing dygraph.
3089 // TODO(danvk): would it make more sense to simply redraw using the current
3090 // date_graph object?
3091 this.container
.innerHTML
= '';
3092 if (typeof(this.date_graph
) != 'undefined') {
3093 this.date_graph
.destroy();
3096 this.date_graph
= new Dygraph(this.container
, data
, options
);
3100 * Google charts compatible setSelection
3101 * Only row selection is supported, all points in the row will be highlighted
3102 * @param {Array} array of the selected cells
3105 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3107 if (selection_array
.length
) {
3108 row
= selection_array
[0].row
;
3110 this.date_graph
.setSelection(row
);
3114 * Google charts compatible getSelection implementation
3115 * @return {Array} array of the selected cells
3118 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3121 var row
= this.date_graph
.getSelection();
3123 if (row
< 0) return selection
;
3126 for (var i
in this.date_graph
.layout_
.datasets
) {
3127 selection
.push({row
: row
, column
: col
});
3134 // Older pages may still use this name.
3135 DateGraph
= Dygraph
;