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 // have to be zoomed in to pan.
802 // TODO(konigsberg): Let's loosen this zoom-to-pan restriction, also
803 // perhaps create panning boundaries? A more flexible pan would make it,
804 // ahem, 'pan-useful'.
806 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
807 if (g
.axes_
[i
].valueWindow
|| g
.axes_
[i
].valueRange
) {
812 if (!g
.dateWindow_
&& !zoomedY
) return;
814 context
.isPanning
= true;
815 var xRange
= g
.xAxisRange();
816 context
.dateRange
= xRange
[1] - xRange
[0];
818 // Record the range of each y-axis at the start of the drag.
819 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
820 context
.is2DPan
= false;
821 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
822 var axis
= g
.axes_
[i
];
823 var yRange
= g
.yAxisRange(i
);
824 axis
.dragValueRange
= yRange
[1] - yRange
[0];
825 var r
= g
.toDataCoords(null, context
.dragStartY
, i
);
826 axis
.draggingValue
= r
[1];
827 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
830 // TODO(konigsberg): Switch from all this math to toDataCoords?
831 // Seems to work for the dragging value.
832 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
835 // Called in response to an interaction model operation that
836 // responds to an event that pans the view.
838 // It's used in the default callback for "mousemove" operations.
839 // Custom interaction model builders can use it to provide the default
842 Dygraph
.movePan
= function(event
, g
, context
) {
843 context
.dragEndX
= g
.dragGetX_(event
, context
);
844 context
.dragEndY
= g
.dragGetY_(event
, context
);
846 // TODO(danvk): update this comment
847 // Want to have it so that:
848 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
849 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
850 // 3. draggingValue appears at dragEndY.
851 // 4. valueRange is unaltered.
853 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
854 var maxDate
= minDate
+ context
.dateRange
;
855 g
.dateWindow_
= [minDate
, maxDate
];
857 // y-axis scaling is automatic unless this is a full 2D pan.
858 if (context
.is2DPan
) {
859 // Adjust each axis appropriately.
860 var y_frac
= context
.dragEndY
/ g
.height_
;
861 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
862 var axis
= g
.axes_
[i
];
863 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
864 var minValue
= maxValue
- axis
.dragValueRange
;
865 axis
.valueWindow
= [ minValue
, maxValue
];
872 // Called in response to an interaction model operation that
873 // responds to an event that ends panning.
875 // It's used in the default callback for "mouseup" operations.
876 // Custom interaction model builders can use it to provide the default
879 Dygraph
.endPan
= function(event
, g
, context
) {
880 context
.isPanning
= false;
881 context
.is2DPan
= false;
882 context
.draggingDate
= null;
883 context
.dateRange
= null;
884 context
.valueRange
= null;
887 // Called in response to an interaction model operation that
888 // responds to an event that starts zooming.
890 // It's used in the default callback for "mousedown" operations.
891 // Custom interaction model builders can use it to provide the default
894 Dygraph
.startZoom
= function(event
, g
, context
) {
895 context
.isZooming
= true;
898 // Called in response to an interaction model operation that
899 // responds to an event that defines zoom boundaries.
901 // It's used in the default callback for "mousemove" operations.
902 // Custom interaction model builders can use it to provide the default
905 Dygraph
.moveZoom
= function(event
, g
, context
) {
906 context
.dragEndX
= g
.dragGetX_(event
, context
);
907 context
.dragEndY
= g
.dragGetY_(event
, context
);
909 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
910 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
912 // drag direction threshold for y axis is twice as large as x axis
913 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
916 context
.dragDirection
,
921 context
.prevDragDirection
,
925 context
.prevEndX
= context
.dragEndX
;
926 context
.prevEndY
= context
.dragEndY
;
927 context
.prevDragDirection
= context
.dragDirection
;
930 // Called in response to an interaction model operation that
931 // responds to an event that performs a zoom based on previously defined
934 // It's used in the default callback for "mouseup" operations.
935 // Custom interaction model builders can use it to provide the default
938 Dygraph
.endZoom
= function(event
, g
, context
) {
939 context
.isZooming
= false;
940 context
.dragEndX
= g
.dragGetX_(event
, context
);
941 context
.dragEndY
= g
.dragGetY_(event
, context
);
942 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
943 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
945 if (regionWidth
< 2 && regionHeight
< 2 &&
946 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
947 // TODO(danvk): pass along more info about the points, e.g. 'x'
948 if (g
.attr_('clickCallback') != null) {
949 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
951 if (g
.attr_('pointClickCallback')) {
952 // check if the click was on a particular point.
954 var closestDistance
= 0;
955 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
956 var p
= g
.selPoints_
[i
];
957 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
958 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
959 if (closestIdx
== -1 || distance
< closestDistance
) {
960 closestDistance
= distance
;
965 // Allow any click within two pixels of the dot.
966 var radius
= g
.attr_('highlightCircleSize') + 2;
967 if (closestDistance
<= 5 * 5) {
968 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
973 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
974 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
975 Math
.max(context
.dragStartX
, context
.dragEndX
));
976 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
977 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
978 Math
.max(context
.dragStartY
, context
.dragEndY
));
980 g
.canvas_
.getContext("2d").clearRect(0, 0,
984 context
.dragStartX
= null;
985 context
.dragStartY
= null;
988 Dygraph
.defaultInteractionModel
= {
989 // Track the beginning of drag events
990 mousedown
: function(event
, g
, context
) {
991 context
.initializeMouseDown(event
, g
, context
);
993 if (event
.altKey
|| event
.shiftKey
) {
994 Dygraph
.startPan(event
, g
, context
);
996 Dygraph
.startZoom(event
, g
, context
);
1000 // Draw zoom rectangles when the mouse is down and the user moves around
1001 mousemove
: function(event
, g
, context
) {
1002 if (context
.isZooming
) {
1003 Dygraph
.moveZoom(event
, g
, context
);
1004 } else if (context
.isPanning
) {
1005 Dygraph
.movePan(event
, g
, context
);
1009 mouseup
: function(event
, g
, context
) {
1010 if (context
.isZooming
) {
1011 Dygraph
.endZoom(event
, g
, context
);
1012 } else if (context
.isPanning
) {
1013 Dygraph
.endPan(event
, g
, context
);
1017 // Temporarily cancel the dragging event when the mouse leaves the graph
1018 mouseout
: function(event
, g
, context
) {
1019 if (context
.isZooming
) {
1020 context
.dragEndX
= null;
1021 context
.dragEndY
= null;
1025 // Disable zooming out if panning.
1026 dblclick
: function(event
, g
, context
) {
1027 if (event
.altKey
|| event
.shiftKey
) {
1030 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1031 // friendlier to public use.
1036 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1039 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1043 Dygraph
.prototype.createDragInterface_
= function() {
1045 // Tracks whether the mouse is down right now
1047 isPanning
: false, // is this drag part of a pan?
1048 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1053 dragDirection
: null,
1056 prevDragDirection
: null,
1058 // TODO(danvk): update this comment
1059 // draggingDate and draggingValue represent the [date,value] point on the
1060 // graph at which the mouse was pressed. As the mouse moves while panning,
1061 // the viewport must pan so that the mouse position points to
1062 // [draggingDate, draggingValue]
1065 // TODO(danvk): update this comment
1066 // The range in second/value units that the viewport encompasses during a
1067 // panning operation.
1070 // Utility function to convert page-wide coordinates to canvas coords
1074 initializeMouseDown
: function(event
, g
, context
) {
1075 // prevents mouse drags from selecting page text.
1076 if (event
.preventDefault
) {
1077 event
.preventDefault(); // Firefox, Chrome, etc.
1079 event
.returnValue
= false; // IE
1080 event
.cancelBubble
= true;
1083 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1084 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1085 context
.dragStartX
= g
.dragGetX_(event
, context
);
1086 context
.dragStartY
= g
.dragGetY_(event
, context
);
1090 var interactionModel
= this.attr_("interactionModel");
1092 // Self is the graph.
1095 // Function that binds the graph and context to the handler.
1096 var bindHandler
= function(handler
) {
1097 return function(event
) {
1098 handler(event
, self
, context
);
1102 for (var eventName
in interactionModel
) {
1103 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1104 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1105 bindHandler(interactionModel
[eventName
]));
1108 // If the user releases the mouse button during a drag, but not over the
1109 // canvas, then it doesn't count as a zooming action.
1110 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1111 if (context
.isZooming
|| context
.isPanning
) {
1112 context
.isZooming
= false;
1113 context
.dragStartX
= null;
1114 context
.dragStartY
= null;
1117 if (context
.isPanning
) {
1118 context
.isPanning
= false;
1119 context
.draggingDate
= null;
1120 context
.dateRange
= null;
1121 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1122 delete self
.axes_
[i
].draggingValue
;
1123 delete self
.axes_
[i
].dragValueRange
;
1130 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1131 * up any previous zoom rectangles that were drawn. This could be optimized to
1132 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1135 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1136 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1137 * @param {Number} startX The X position where the drag started, in canvas
1139 * @param {Number} endX The current X position of the drag, in canvas coords.
1140 * @param {Number} startY The Y position where the drag started, in canvas
1142 * @param {Number} endY The current Y position of the drag, in canvas coords.
1143 * @param {Number} prevDirection the value of direction on the previous call to
1144 * this function. Used to avoid excess redrawing
1145 * @param {Number} prevEndX The value of endX on the previous call to this
1146 * function. Used to avoid excess redrawing
1147 * @param {Number} prevEndY The value of endY on the previous call to this
1148 * function. Used to avoid excess redrawing
1151 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1152 prevDirection
, prevEndX
, prevEndY
) {
1153 var ctx
= this.canvas_
.getContext("2d");
1155 // Clean up from the previous rect if necessary
1156 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1157 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1158 Math
.abs(startX
- prevEndX
), this.height_
);
1159 } else if (prevDirection
== Dygraph
.VERTICAL
){
1160 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1161 this.width_
, Math
.abs(startY
- prevEndY
));
1164 // Draw a light-grey rectangle to show the new viewing area
1165 if (direction
== Dygraph
.HORIZONTAL
) {
1166 if (endX
&& startX
) {
1167 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1168 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1169 Math
.abs(endX
- startX
), this.height_
);
1172 if (direction
== Dygraph
.VERTICAL
) {
1173 if (endY
&& startY
) {
1174 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1175 ctx
.fillRect(0, Math
.min(startY
, endY
),
1176 this.width_
, Math
.abs(endY
- startY
));
1182 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1183 * the canvas. The exact zoom window may be slightly larger if there are no data
1184 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1185 * which accepts dates that match the raw data. This function redraws the graph.
1187 * @param {Number} lowX The leftmost pixel value that should be visible.
1188 * @param {Number} highX The rightmost pixel value that should be visible.
1191 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1192 // Find the earliest and latest dates contained in this canvasx range.
1193 // Convert the call to date ranges of the raw data.
1194 var r
= this.toDataCoords(lowX
, null);
1196 r
= this.toDataCoords(highX
, null);
1198 this.doZoomXDates_(minDate
, maxDate
);
1202 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1203 * method with doZoomX which accepts pixel coordinates. This function redraws
1206 * @param {Number} minDate The minimum date that should be visible.
1207 * @param {Number} maxDate The maximum date that should be visible.
1210 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1211 this.dateWindow_
= [minDate
, maxDate
];
1213 if (this.attr_("zoomCallback")) {
1214 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1219 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1220 * the canvas. This function redraws the graph.
1222 * @param {Number} lowY The topmost pixel value that should be visible.
1223 * @param {Number} highY The lowest pixel value that should be visible.
1226 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1227 // Find the highest and lowest values in pixel range for each axis.
1228 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1229 // This is because pixels increase as you go down on the screen, whereas data
1230 // coordinates increase as you go up the screen.
1231 var valueRanges
= [];
1232 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1233 var hi
= this.toDataCoords(null, lowY
, i
);
1234 var low
= this.toDataCoords(null, highY
, i
);
1235 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1236 valueRanges
.push([low
[1], hi
[1]]);
1240 if (this.attr_("zoomCallback")) {
1241 var xRange
= this.xAxisRange();
1242 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1247 * Reset the zoom to the original view coordinates. This is the same as
1248 * double-clicking on the graph.
1252 Dygraph
.prototype.doUnzoom_
= function() {
1254 if (this.dateWindow_
!= null) {
1256 this.dateWindow_
= null;
1259 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1260 if (this.axes_
[i
].valueWindow
!= null) {
1262 delete this.axes_
[i
].valueWindow
;
1267 // Putting the drawing operation before the callback because it resets
1270 if (this.attr_("zoomCallback")) {
1271 var minDate
= this.rawData_
[0][0];
1272 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1273 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1279 * When the mouse moves in the canvas, display information about a nearby data
1280 * point and draw dots over those points in the data series. This function
1281 * takes care of cleanup of previously-drawn dots.
1282 * @param {Object} event The mousemove event from the browser.
1285 Dygraph
.prototype.mouseMove_
= function(event
) {
1286 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1287 var points
= this.layout_
.points
;
1292 // Loop through all the points and find the date nearest to our current
1294 var minDist
= 1e+100;
1296 for (var i
= 0; i
< points
.length
; i
++) {
1297 var point
= points
[i
];
1298 if (point
== null) continue;
1299 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1300 if (dist
> minDist
) continue;
1304 if (idx
>= 0) lastx
= points
[idx
].xval
;
1305 // Check that you can really highlight the last day's data
1306 var last
= points
[points
.length
-1];
1307 if (last
!= null && canvasx
> last
.canvasx
)
1308 lastx
= points
[points
.length
-1].xval
;
1310 // Extract the points we've selected
1311 this.selPoints_
= [];
1312 var l
= points
.length
;
1313 if (!this.attr_("stackedGraph")) {
1314 for (var i
= 0; i
< l
; i
++) {
1315 if (points
[i
].xval
== lastx
) {
1316 this.selPoints_
.push(points
[i
]);
1320 // Need to 'unstack' points starting from the bottom
1321 var cumulative_sum
= 0;
1322 for (var i
= l
- 1; i
>= 0; i
--) {
1323 if (points
[i
].xval
== lastx
) {
1324 var p
= {}; // Clone the point since we modify it
1325 for (var k
in points
[i
]) {
1326 p
[k
] = points
[i
][k
];
1328 p
.yval
-= cumulative_sum
;
1329 cumulative_sum
+= p
.yval
;
1330 this.selPoints_
.push(p
);
1333 this.selPoints_
.reverse();
1336 if (this.attr_("highlightCallback")) {
1337 var px
= this.lastx_
;
1338 if (px
!== null && lastx
!= px
) {
1339 // only fire if the selected point has changed.
1340 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1344 // Save last x position for callbacks.
1345 this.lastx_
= lastx
;
1347 this.updateSelection_();
1351 * Transforms layout_.points index into data row number.
1352 * @param int layout_.points index
1353 * @return int row number, or -1 if none could be found.
1356 Dygraph
.prototype.idxToRow_
= function(idx
) {
1357 if (idx
< 0) return -1;
1359 for (var i
in this.layout_
.datasets
) {
1360 if (idx
< this.layout_
.datasets
[i
].length
) {
1361 return this.boundaryIds_
[0][0]+idx
;
1363 idx
-= this.layout_
.datasets
[i
].length
;
1369 * Draw dots over the selectied points in the data series. This function
1370 * takes care of cleanup of previously-drawn dots.
1373 Dygraph
.prototype.updateSelection_
= function() {
1374 // Clear the previously drawn vertical, if there is one
1375 var ctx
= this.canvas_
.getContext("2d");
1376 if (this.previousVerticalX_
>= 0) {
1377 // Determine the maximum highlight circle size.
1378 var maxCircleSize
= 0;
1379 var labels
= this.attr_('labels');
1380 for (var i
= 1; i
< labels
.length
; i
++) {
1381 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1382 if (r
> maxCircleSize
) maxCircleSize
= r
;
1384 var px
= this.previousVerticalX_
;
1385 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1386 2 * maxCircleSize
+ 2, this.height_
);
1389 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1391 if (this.selPoints_
.length
> 0) {
1392 var canvasx
= this.selPoints_
[0].canvasx
;
1394 // Set the status message to indicate the selected point(s)
1395 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1396 var fmtFunc
= this.attr_('yValueFormatter');
1397 var clen
= this.colors_
.length
;
1399 if (this.attr_('showLabelsOnHighlight')) {
1400 // Set the status message to indicate the selected point(s)
1401 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1402 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1403 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1404 if (this.attr_("labelsSeparateLines")) {
1407 var point
= this.selPoints_
[i
];
1408 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1409 var yval
= fmtFunc(point
.yval
);
1410 replace
+= " <b><font color='" + c
.toHex() + "'>"
1411 + point
.name
+ "</font></b>:"
1415 this.attr_("labelsDiv").innerHTML
= replace
;
1418 // Draw colored circles over the center of each selected point
1420 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1421 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1423 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1425 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1426 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1427 0, 2 * Math
.PI
, false);
1432 this.previousVerticalX_
= canvasx
;
1437 * Set manually set selected dots, and display information about them
1438 * @param int row number that should by highlighted
1439 * false value clears the selection
1442 Dygraph
.prototype.setSelection
= function(row
) {
1443 // Extract the points we've selected
1444 this.selPoints_
= [];
1447 if (row
!== false) {
1448 row
= row
-this.boundaryIds_
[0][0];
1451 if (row
!== false && row
>= 0) {
1452 for (var i
in this.layout_
.datasets
) {
1453 if (row
< this.layout_
.datasets
[i
].length
) {
1454 var point
= this.layout_
.points
[pos
+row
];
1456 if (this.attr_("stackedGraph")) {
1457 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1460 this.selPoints_
.push(point
);
1462 pos
+= this.layout_
.datasets
[i
].length
;
1466 if (this.selPoints_
.length
) {
1467 this.lastx_
= this.selPoints_
[0].xval
;
1468 this.updateSelection_();
1471 this.clearSelection();
1477 * The mouse has left the canvas. Clear out whatever artifacts remain
1478 * @param {Object} event the mouseout event from the browser.
1481 Dygraph
.prototype.mouseOut_
= function(event
) {
1482 if (this.attr_("unhighlightCallback")) {
1483 this.attr_("unhighlightCallback")(event
);
1486 if (this.attr_("hideOverlayOnMouseOut")) {
1487 this.clearSelection();
1492 * Remove all selection from the canvas
1495 Dygraph
.prototype.clearSelection
= function() {
1496 // Get rid of the overlay data
1497 var ctx
= this.canvas_
.getContext("2d");
1498 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1499 this.attr_("labelsDiv").innerHTML
= "";
1500 this.selPoints_
= [];
1505 * Returns the number of the currently selected row
1506 * @return int row number, of -1 if nothing is selected
1509 Dygraph
.prototype.getSelection
= function() {
1510 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1514 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1515 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1516 return row
+ this.boundaryIds_
[0][0];
1522 Dygraph
.zeropad
= function(x
) {
1523 if (x
< 10) return "0" + x
; else return "" + x
;
1527 * Return a string version of the hours, minutes and seconds portion of a date.
1528 * @param {Number} date The JavaScript date (ms since epoch)
1529 * @return {String} A time of the form "HH:MM:SS"
1532 Dygraph
.hmsString_
= function(date
) {
1533 var zeropad
= Dygraph
.zeropad
;
1534 var d
= new Date(date
);
1535 if (d
.getSeconds()) {
1536 return zeropad(d
.getHours()) + ":" +
1537 zeropad(d
.getMinutes()) + ":" +
1538 zeropad(d
.getSeconds());
1540 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1545 * Convert a JS date to a string appropriate to display on an axis that
1546 * is displaying values at the stated granularity.
1547 * @param {Date} date The date to format
1548 * @param {Number} granularity One of the Dygraph granularity constants
1549 * @return {String} The formatted date
1552 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1553 if (granularity
>= Dygraph
.MONTHLY
) {
1554 return date
.strftime('%b %y');
1556 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1557 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1558 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1560 return Dygraph
.hmsString_(date
.getTime());
1566 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1567 * @param {Number} date The JavaScript date (ms since epoch)
1568 * @return {String} A date of the form "YYYY/MM/DD"
1571 Dygraph
.dateString_
= function(date
, self
) {
1572 var zeropad
= Dygraph
.zeropad
;
1573 var d
= new Date(date
);
1576 var year
= "" + d
.getFullYear();
1577 // Get a 0 padded month string
1578 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1579 // Get a 0 padded day string
1580 var day
= zeropad(d
.getDate());
1583 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1584 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1586 return year
+ "/" + month + "/" + day
+ ret
;
1590 * Round a number to the specified number of digits past the decimal point.
1591 * @param {Number} num The number to round
1592 * @param {Number} places The number of decimals to which to round
1593 * @return {Number} The rounded number
1596 Dygraph
.round_
= function(num
, places
) {
1597 var shift
= Math
.pow(10, places
);
1598 return Math
.round(num
* shift
)/shift
;
1602 * Fires when there's data available to be graphed.
1603 * @param {String} data Raw CSV data to be plotted
1606 Dygraph
.prototype.loadedEvent_
= function(data
) {
1607 this.rawData_
= this.parseCSV_(data
);
1611 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1612 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1613 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1616 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1619 Dygraph
.prototype.addXTicks_
= function() {
1620 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1621 var startDate
, endDate
;
1622 if (this.dateWindow_
) {
1623 startDate
= this.dateWindow_
[0];
1624 endDate
= this.dateWindow_
[1];
1626 startDate
= this.rawData_
[0][0];
1627 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1630 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1631 this.layout_
.updateOptions({xTicks
: xTicks
});
1634 // Time granularity enumeration
1635 Dygraph
.SECONDLY
= 0;
1636 Dygraph
.TWO_SECONDLY
= 1;
1637 Dygraph
.FIVE_SECONDLY
= 2;
1638 Dygraph
.TEN_SECONDLY
= 3;
1639 Dygraph
.THIRTY_SECONDLY
= 4;
1640 Dygraph
.MINUTELY
= 5;
1641 Dygraph
.TWO_MINUTELY
= 6;
1642 Dygraph
.FIVE_MINUTELY
= 7;
1643 Dygraph
.TEN_MINUTELY
= 8;
1644 Dygraph
.THIRTY_MINUTELY
= 9;
1645 Dygraph
.HOURLY
= 10;
1646 Dygraph
.TWO_HOURLY
= 11;
1647 Dygraph
.SIX_HOURLY
= 12;
1649 Dygraph
.WEEKLY
= 14;
1650 Dygraph
.MONTHLY
= 15;
1651 Dygraph
.QUARTERLY
= 16;
1652 Dygraph
.BIANNUAL
= 17;
1653 Dygraph
.ANNUAL
= 18;
1654 Dygraph
.DECADAL
= 19;
1655 Dygraph
.NUM_GRANULARITIES
= 20;
1657 Dygraph
.SHORT_SPACINGS
= [];
1658 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1659 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1660 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1661 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1662 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1663 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1664 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1665 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1666 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1667 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1668 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1669 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1670 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1671 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1672 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1676 // If we used this time granularity, how many ticks would there be?
1677 // This is only an approximation, but it's generally good enough.
1679 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1680 if (granularity
< Dygraph
.MONTHLY
) {
1681 // Generate one tick mark for every fixed interval of time.
1682 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1683 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1685 var year_mod
= 1; // e.g. to only print one point every 10 years.
1686 var num_months
= 12;
1687 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1688 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1689 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1690 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1692 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1693 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1694 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1700 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1701 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1703 // Returns an array containing {v: millis, label: label} dictionaries.
1705 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1706 var formatter
= this.attr_("xAxisLabelFormatter");
1708 if (granularity
< Dygraph
.MONTHLY
) {
1709 // Generate one tick mark for every fixed interval of time.
1710 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1711 var format
= '%d%b'; // e.g. "1Jan"
1713 // Find a time less than start_time which occurs on a "nice" time boundary
1714 // for this granularity.
1715 var g
= spacing
/ 1000;
1716 var d
= new Date(start_time
);
1717 if (g
<= 60) { // seconds
1718 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1722 if (g
<= 60) { // minutes
1723 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1728 if (g
<= 24) { // days
1729 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1734 if (g
== 7) { // one week
1735 d
.setDate(d
.getDate() - d
.getDay());
1740 start_time
= d
.getTime();
1742 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1743 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1746 // Display a tick mark on the first of a set of months of each year.
1747 // Years get a tick mark iff y % year_mod == 0. This is useful for
1748 // displaying a tick mark once every 10 years, say, on long time scales.
1750 var year_mod
= 1; // e.g. to only print one point every 10 years.
1752 if (granularity
== Dygraph
.MONTHLY
) {
1753 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1754 } else if (granularity
== Dygraph
.QUARTERLY
) {
1755 months
= [ 0, 3, 6, 9 ];
1756 } else if (granularity
== Dygraph
.BIANNUAL
) {
1758 } else if (granularity
== Dygraph
.ANNUAL
) {
1760 } else if (granularity
== Dygraph
.DECADAL
) {
1765 var start_year
= new Date(start_time
).getFullYear();
1766 var end_year
= new Date(end_time
).getFullYear();
1767 var zeropad
= Dygraph
.zeropad
;
1768 for (var i
= start_year
; i
<= end_year
; i
++) {
1769 if (i
% year_mod
!= 0) continue;
1770 for (var j
= 0; j
< months
.length
; j
++) {
1771 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1772 var t
= Date
.parse(date_str
);
1773 if (t
< start_time
|| t
> end_time
) continue;
1774 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1784 * Add ticks to the x-axis based on a date range.
1785 * @param {Number} startDate Start of the date window (millis since epoch)
1786 * @param {Number} endDate End of the date window (millis since epoch)
1787 * @return {Array.<Object>} Array of {label, value} tuples.
1790 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1792 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1793 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1794 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1801 return self
.GetXAxis(startDate
, endDate
, chosen
);
1803 // TODO(danvk): signal error.
1808 * Add ticks when the x axis has numbers on it (instead of dates)
1809 * @param {Number} startDate Start of the date window (millis since epoch)
1810 * @param {Number} endDate End of the date window (millis since epoch)
1812 * @param {function} attribute accessor function.
1813 * @return {Array.<Object>} Array of {label, value} tuples.
1816 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1817 var attr
= function(k
) {
1818 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1819 return self
.attr_(k
);
1824 for (var i
= 0; i
< vals
.length
; i
++) {
1825 ticks
.push({v
: vals
[i
]});
1829 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1830 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1831 // The first spacing greater than pixelsPerYLabel is what we use.
1832 // TODO(danvk): version that works on a log scale.
1833 if (attr("labelsKMG2")) {
1834 var mults
= [1, 2, 4, 8];
1836 var mults
= [1, 2, 5];
1838 var scale
, low_val
, high_val
, nTicks
;
1839 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1840 var pixelsPerTick
= attr('pixelsPerYLabel');
1841 for (var i
= -10; i
< 50; i
++) {
1842 if (attr("labelsKMG2")) {
1843 var base_scale
= Math
.pow(16, i
);
1845 var base_scale
= Math
.pow(10, i
);
1847 for (var j
= 0; j
< mults
.length
; j
++) {
1848 scale
= base_scale
* mults
[j
];
1849 low_val
= Math
.floor(minV
/ scale
) * scale
;
1850 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1851 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1852 var spacing
= self
.height_
/ nTicks
;
1853 // wish I could break out of both loops at once...
1854 if (spacing
> pixelsPerTick
) break;
1856 if (spacing
> pixelsPerTick
) break;
1859 // Construct the set of ticks.
1860 // Allow reverse y-axis if it's explicitly requested.
1861 if (low_val
> high_val
) scale
*= -1;
1862 for (var i
= 0; i
< nTicks
; i
++) {
1863 var tickV
= low_val
+ i
* scale
;
1864 ticks
.push( {v
: tickV
} );
1868 // Add formatted labels to the ticks.
1871 if (attr("labelsKMB")) {
1873 k_labels
= [ "K", "M", "B", "T" ];
1875 if (attr("labelsKMG2")) {
1876 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1878 k_labels
= [ "k", "M", "G", "T" ];
1880 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1882 for (var i
= 0; i
< ticks
.length
; i
++) {
1883 var tickV
= ticks
[i
].v
;
1884 var absTickV
= Math
.abs(tickV
);
1886 if (formatter
!= undefined
) {
1887 label
= formatter(tickV
);
1889 label
= Dygraph
.round_(tickV
, 2);
1891 if (k_labels
.length
) {
1892 // Round up to an appropriate unit.
1894 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1895 if (absTickV
>= n
) {
1896 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1901 ticks
[i
].label
= label
;
1906 // Computes the range of the data series (including confidence intervals).
1907 // series is either [ [x1, y1], [x2, y2], ... ] or
1908 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1909 // Returns [low, high]
1910 Dygraph
.prototype.extremeValues_
= function(series
) {
1911 var minY
= null, maxY
= null;
1913 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1915 // With custom bars, maxY is the max of the high values.
1916 for (var j
= 0; j
< series
.length
; j
++) {
1917 var y
= series
[j
][1][0];
1919 var low
= y
- series
[j
][1][1];
1920 var high
= y
+ series
[j
][1][2];
1921 if (low
> y
) low
= y
; // this can happen with custom bars,
1922 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1923 if (maxY
== null || high
> maxY
) {
1926 if (minY
== null || low
< minY
) {
1931 for (var j
= 0; j
< series
.length
; j
++) {
1932 var y
= series
[j
][1];
1933 if (y
=== null || isNaN(y
)) continue;
1934 if (maxY
== null || y
> maxY
) {
1937 if (minY
== null || y
< minY
) {
1943 return [minY
, maxY
];
1947 * This function is called once when the chart's data is changed or the options
1948 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1949 * idea is that values derived from the chart's data can be computed here,
1950 * rather than every time the chart is drawn. This includes things like the
1951 * number of axes, rolling averages, etc.
1953 Dygraph
.prototype.predraw_
= function() {
1954 // TODO(danvk): move more computations out of drawGraph_ and into here.
1955 this.computeYAxes_();
1957 // Create a new plotter.
1958 if (this.plotter_
) this.plotter_
.clear();
1959 this.plotter_
= new DygraphCanvasRenderer(this,
1960 this.hidden_
, this.layout_
,
1961 this.renderOptions_
);
1963 // The roller sits in the bottom left corner of the chart. We don't know where
1964 // this will be until the options are available, so it's positioned here.
1965 this.createRollInterface_();
1967 // Same thing applies for the labelsDiv. It's right edge should be flush with
1968 // the right edge of the charting area (which may not be the same as the right
1969 // edge of the div, if we have two y-axes.
1970 this.positionLabelsDiv_();
1972 // If the data or options have changed, then we'd better redraw.
1978 * Update the graph with new data. This method is called when the viewing area
1979 * has changed. If the underlying data or options have changed, predraw_ will
1980 * be called before drawGraph_ is called.
1983 Dygraph
.prototype.drawGraph_
= function() {
1984 var data
= this.rawData_
;
1986 // This is used to set the second parameter to drawCallback, below.
1987 var is_initial_draw
= this.is_initial_draw_
;
1988 this.is_initial_draw_
= false;
1990 var minY
= null, maxY
= null;
1991 this.layout_
.removeAllDatasets();
1993 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1995 // Loop over the fields (series). Go from the last to the first,
1996 // because if they're stacked that's how we accumulate the values.
1998 var cumulative_y
= []; // For stacked series.
2001 var extremes
= {}; // series name -> [low, high]
2003 // Loop over all fields and create datasets
2004 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2005 if (!this.visibility()[i
- 1]) continue;
2007 var seriesName
= this.attr_("labels")[i
];
2008 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2011 for (var j
= 0; j
< data
.length
; j
++) {
2012 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2013 var date
= data
[j
][0];
2014 series
.push([date
, data
[j
][i
]]);
2018 // TODO(danvk): move this into predraw_. It's insane to do it here.
2019 series
= this.rollingAverage(series
, this.rollPeriod_
);
2021 // Prune down to the desired range, if necessary (for zooming)
2022 // Because there can be lines going to points outside of the visible area,
2023 // we actually prune to visible points, plus one on either side.
2024 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2025 if (this.dateWindow_
) {
2026 var low
= this.dateWindow_
[0];
2027 var high
= this.dateWindow_
[1];
2029 // TODO(danvk): do binary search instead of linear search.
2030 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2031 var firstIdx
= null, lastIdx
= null;
2032 for (var k
= 0; k
< series
.length
; k
++) {
2033 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2036 if (series
[k
][0] <= high
) {
2040 if (firstIdx
=== null) firstIdx
= 0;
2041 if (firstIdx
> 0) firstIdx
--;
2042 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2043 if (lastIdx
< series
.length
- 1) lastIdx
++;
2044 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2045 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2046 pruned
.push(series
[k
]);
2050 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2053 var seriesExtremes
= this.extremeValues_(series
);
2056 for (var j
=0; j
<series
.length
; j
++) {
2057 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2060 } else if (this.attr_("stackedGraph")) {
2061 var l
= series
.length
;
2063 for (var j
= 0; j
< l
; j
++) {
2064 // If one data set has a NaN, let all subsequent stacked
2065 // sets inherit the NaN -- only start at 0 for the first set.
2066 var x
= series
[j
][0];
2067 if (cumulative_y
[x
] === undefined
) {
2068 cumulative_y
[x
] = 0;
2071 actual_y
= series
[j
][1];
2072 cumulative_y
[x
] += actual_y
;
2074 series
[j
] = [x
, cumulative_y
[x
]]
2076 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2077 seriesExtremes
[1] = cumulative_y
[x
];
2079 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2080 seriesExtremes
[0] = cumulative_y
[x
];
2084 extremes
[seriesName
] = seriesExtremes
;
2086 datasets
[i
] = series
;
2089 for (var i
= 1; i
< datasets
.length
; i
++) {
2090 if (!this.visibility()[i
- 1]) continue;
2091 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2094 // TODO(danvk): this method doesn't need to return anything.
2095 var out
= this.computeYAxisRanges_(extremes
);
2097 var seriesToAxisMap
= out
[1];
2098 this.layout_
.updateOptions( { yAxes
: axes
,
2099 seriesToAxisMap
: seriesToAxisMap
2104 // Tell PlotKit to use this new data and render itself
2105 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2106 this.layout_
.evaluateWithError();
2107 this.plotter_
.clear();
2108 this.plotter_
.render();
2109 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2110 this.canvas_
.height
);
2112 if (this.attr_("drawCallback") !== null) {
2113 this.attr_("drawCallback")(this, is_initial_draw
);
2118 * Determine properties of the y-axes which are independent of the data
2119 * currently being displayed. This includes things like the number of axes and
2120 * the style of the axes. It does not include the range of each axis and its
2122 * This fills in this.axes_ and this.seriesToAxisMap_.
2123 * axes_ = [ { options } ]
2124 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2125 * indices are into the axes_ array.
2127 Dygraph
.prototype.computeYAxes_
= function() {
2128 this.axes_
= [{}]; // always have at least one y-axis.
2129 this.seriesToAxisMap_
= {};
2131 // Get a list of series names.
2132 var labels
= this.attr_("labels");
2134 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2136 // all options which could be applied per-axis:
2144 'axisLabelFontSize',
2148 // Copy global axis options over to the first axis.
2149 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2150 var k
= axisOptions
[i
];
2151 var v
= this.attr_(k
);
2152 if (v
) this.axes_
[0][k
] = v
;
2155 // Go through once and add all the axes.
2156 for (var seriesName
in series
) {
2157 if (!series
.hasOwnProperty(seriesName
)) continue;
2158 var axis
= this.attr_("axis", seriesName
);
2160 this.seriesToAxisMap_
[seriesName
] = 0;
2163 if (typeof(axis
) == 'object') {
2164 // Add a new axis, making a copy of its per-axis options.
2166 Dygraph
.update(opts
, this.axes_
[0]);
2167 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2168 Dygraph
.update(opts
, axis
);
2169 this.axes_
.push(opts
);
2170 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2174 // Go through one more time and assign series to an axis defined by another
2175 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2176 for (var seriesName
in series
) {
2177 if (!series
.hasOwnProperty(seriesName
)) continue;
2178 var axis
= this.attr_("axis", seriesName
);
2179 if (typeof(axis
) == 'string') {
2180 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2181 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2182 "series " + axis
+ ", which does not define its own axis.");
2185 var idx
= this.seriesToAxisMap_
[axis
];
2186 this.seriesToAxisMap_
[seriesName
] = idx
;
2190 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2191 // this last so that hiding the first series doesn't destroy the axis
2192 // properties of the primary axis.
2193 var seriesToAxisFiltered
= {};
2194 var vis
= this.visibility();
2195 for (var i
= 1; i
< labels
.length
; i
++) {
2197 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2199 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2203 * Returns the number of y-axes on the chart.
2204 * @return {Number} the number of axes.
2206 Dygraph
.prototype.numAxes
= function() {
2208 for (var series
in this.seriesToAxisMap_
) {
2209 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2210 var idx
= this.seriesToAxisMap_
[series
];
2211 if (idx
> last_axis
) last_axis
= idx
;
2213 return 1 + last_axis
;
2217 * Determine the value range and tick marks for each axis.
2218 * @param {Object} extremes A mapping from seriesName -> [low, high]
2219 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2221 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2222 // Build a map from axis number -> [list of series names]
2223 var seriesForAxis
= [];
2224 for (var series
in this.seriesToAxisMap_
) {
2225 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2226 var idx
= this.seriesToAxisMap_
[series
];
2227 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2228 seriesForAxis
[idx
].push(series
);
2231 // Compute extreme values, a span and tick marks for each axis.
2232 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2233 var axis
= this.axes_
[i
];
2234 if (axis
.valueWindow
) {
2235 // This is only set if the user has zoomed on the y-axis. It is never set
2236 // by a user. It takes precedence over axis.valueRange because, if you set
2237 // valueRange, you'd still expect to be able to pan.
2238 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2239 } else if (axis
.valueRange
) {
2240 // This is a user-set value range for this axis.
2241 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2243 // Calculate the extremes of extremes.
2244 var series
= seriesForAxis
[i
];
2245 var minY
= Infinity
; // extremes[series[0]][0];
2246 var maxY
= -Infinity
; // extremes[series[0]][1];
2247 for (var j
= 0; j
< series
.length
; j
++) {
2248 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2249 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2251 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2253 // Add some padding and round up to an integer to be human-friendly.
2254 var span
= maxY
- minY
;
2255 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2256 if (span
== 0) { span
= maxY
; }
2257 var maxAxisY
= maxY
+ 0.1 * span
;
2258 var minAxisY
= minY
- 0.1 * span
;
2260 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2261 if (!this.attr_("avoidMinZero")) {
2262 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2263 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2266 if (this.attr_("includeZero")) {
2267 if (maxY
< 0) maxAxisY
= 0;
2268 if (minY
> 0) minAxisY
= 0;
2271 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2274 // Add ticks. By default, all axes inherit the tick positions of the
2275 // primary axis. However, if an axis is specifically marked as having
2276 // independent ticks, then that is permissible as well.
2277 if (i
== 0 || axis
.independentTicks
) {
2279 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2280 axis
.computedValueRange
[1],
2284 var p_axis
= this.axes_
[0];
2285 var p_ticks
= p_axis
.ticks
;
2286 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2287 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2288 var tick_values
= [];
2289 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2290 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2291 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2292 tick_values
.push(y_val
);
2296 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2297 axis
.computedValueRange
[1],
2298 this, axis
, tick_values
);
2302 return [this.axes_
, this.seriesToAxisMap_
];
2306 * Calculates the rolling average of a data set.
2307 * If originalData is [label, val], rolls the average of those.
2308 * If originalData is [label, [, it's interpreted as [value, stddev]
2309 * and the roll is returned in the same form, with appropriately reduced
2310 * stddev for each value.
2311 * Note that this is where fractional input (i.e. '5/10') is converted into
2313 * @param {Array} originalData The data in the appropriate format (see above)
2314 * @param {Number} rollPeriod The number of days over which to average the data
2316 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2317 if (originalData
.length
< 2)
2318 return originalData
;
2319 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2320 var rollingData
= [];
2321 var sigma
= this.attr_("sigma");
2323 if (this.fractions_
) {
2325 var den
= 0; // numerator/denominator
2327 for (var i
= 0; i
< originalData
.length
; i
++) {
2328 num
+= originalData
[i
][1][0];
2329 den
+= originalData
[i
][1][1];
2330 if (i
- rollPeriod
>= 0) {
2331 num
-= originalData
[i
- rollPeriod
][1][0];
2332 den
-= originalData
[i
- rollPeriod
][1][1];
2335 var date
= originalData
[i
][0];
2336 var value
= den
? num
/ den
: 0.0;
2337 if (this.attr_("errorBars")) {
2338 if (this.wilsonInterval_
) {
2339 // For more details on this confidence interval, see:
2340 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2342 var p
= value
< 0 ? 0 : value
, n
= den
;
2343 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2344 var denom
= 1 + sigma
* sigma
/ den
;
2345 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2346 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2347 rollingData
[i
] = [date
,
2348 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2350 rollingData
[i
] = [date
, [0, 0, 0]];
2353 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2354 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2357 rollingData
[i
] = [date
, mult
* value
];
2360 } else if (this.attr_("customBars")) {
2365 for (var i
= 0; i
< originalData
.length
; i
++) {
2366 var data
= originalData
[i
][1];
2368 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2370 if (y
!= null && !isNaN(y
)) {
2376 if (i
- rollPeriod
>= 0) {
2377 var prev
= originalData
[i
- rollPeriod
];
2378 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2385 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2386 1.0 * (mid
- low
) / count
,
2387 1.0 * (high
- mid
) / count
]];
2390 // Calculate the rolling average for the first rollPeriod - 1 points where
2391 // there is not enough data to roll over the full number of days
2392 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2393 if (!this.attr_("errorBars")){
2394 if (rollPeriod
== 1) {
2395 return originalData
;
2398 for (var i
= 0; i
< originalData
.length
; i
++) {
2401 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2402 var y
= originalData
[j
][1];
2403 if (y
== null || isNaN(y
)) continue;
2405 sum
+= originalData
[j
][1];
2408 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2410 rollingData
[i
] = [originalData
[i
][0], null];
2415 for (var i
= 0; i
< originalData
.length
; i
++) {
2419 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2420 var y
= originalData
[j
][1][0];
2421 if (y
== null || isNaN(y
)) continue;
2423 sum
+= originalData
[j
][1][0];
2424 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2427 var stddev
= Math
.sqrt(variance
) / num_ok
;
2428 rollingData
[i
] = [originalData
[i
][0],
2429 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2431 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2441 * Parses a date, returning the number of milliseconds since epoch. This can be
2442 * passed in as an xValueParser in the Dygraph constructor.
2443 * TODO(danvk): enumerate formats that this understands.
2444 * @param {String} A date in YYYYMMDD format.
2445 * @return {Number} Milliseconds since epoch.
2448 Dygraph
.dateParser
= function(dateStr
, self
) {
2451 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2452 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2453 while (dateStrSlashed
.search("-") != -1) {
2454 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2456 d
= Date
.parse(dateStrSlashed
);
2457 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2458 // TODO(danvk): remove support for this format. It's confusing.
2459 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2460 + "/" + dateStr
.substr(6,2);
2461 d
= Date
.parse(dateStrSlashed
);
2463 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2464 // "2009/07/12 12:34:56"
2465 d
= Date
.parse(dateStr
);
2468 if (!d
|| isNaN(d
)) {
2469 self
.error("Couldn't parse " + dateStr
+ " as a date");
2475 * Detects the type of the str (date or numeric) and sets the various
2476 * formatting attributes in this.attrs_ based on this type.
2477 * @param {String} str An x value.
2480 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2482 if (str
.indexOf('-') >= 0 ||
2483 str
.indexOf('/') >= 0 ||
2484 isNaN(parseFloat(str
))) {
2486 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2487 // TODO(danvk): remove support for this format.
2492 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2493 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2494 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2495 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2497 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2498 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2499 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2500 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2505 * Parses a string in a special csv format. We expect a csv file where each
2506 * line is a date point, and the first field in each line is the date string.
2507 * We also expect that all remaining fields represent series.
2508 * if the errorBars attribute is set, then interpret the fields as:
2509 * date, series1, stddev1, series2, stddev2, ...
2510 * @param {Array.<Object>} data See above.
2513 * @return Array.<Object> An array with one entry for each row. These entries
2514 * are an array of cells in that row. The first entry is the parsed x-value for
2515 * the row. The second, third, etc. are the y-values. These can take on one of
2516 * three forms, depending on the CSV and constructor parameters:
2518 * 2. [ value, stddev ]
2519 * 3. [ low value, center value, high value ]
2521 Dygraph
.prototype.parseCSV_
= function(data
) {
2523 var lines
= data
.split("\n");
2525 // Use the default delimiter or fall back to a tab if that makes sense.
2526 var delim
= this.attr_('delimiter');
2527 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2532 if (this.labelsFromCSV_
) {
2534 this.attrs_
.labels
= lines
[0].split(delim
);
2537 // Parse the x as a float or return null if it's not a number.
2538 var parseFloatOrNull
= function(x
) {
2539 var val
= parseFloat(x
);
2540 // isFinite() returns false for NaN and +/-Infinity
.
2541 return isFinite(val
) ? val
: null;
2545 var defaultParserSet
= false; // attempt to auto-detect x value type
2546 var expectedCols
= this.attr_("labels").length
;
2547 var outOfOrder
= false;
2548 for (var i
= start
; i
< lines
.length
; i
++) {
2549 var line
= lines
[i
];
2550 if (line
.length
== 0) continue; // skip blank lines
2551 if (line
[0] == '#') continue; // skip comment lines
2552 var inFields
= line
.split(delim
);
2553 if (inFields
.length
< 2) continue;
2556 if (!defaultParserSet
) {
2557 this.detectTypeFromString_(inFields
[0]);
2558 xParser
= this.attr_("xValueParser");
2559 defaultParserSet
= true;
2561 fields
[0] = xParser(inFields
[0], this);
2563 // If fractions are expected, parse the numbers as "A/B
"
2564 if (this.fractions_) {
2565 for (var j = 1; j < inFields.length; j++) {
2566 // TODO(danvk): figure out an appropriate way to flag parse errors.
2567 var vals = inFields[j].split("/");
2568 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2570 } else if (this.attr_("errorBars
")) {
2571 // If there are error bars, values are (value, stddev) pairs
2572 for (var j = 1; j < inFields.length; j += 2)
2573 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2574 parseFloatOrNull(inFields[j + 1])];
2575 } else if (this.attr_("customBars
")) {
2576 // Bars are a low;center;high tuple
2577 for (var j = 1; j < inFields.length; j++) {
2578 var vals = inFields[j].split(";");
2579 fields[j] = [ parseFloatOrNull(vals[0]),
2580 parseFloatOrNull(vals[1]),
2581 parseFloatOrNull(vals[2]) ];
2584 // Values are just numbers
2585 for (var j = 1; j < inFields.length; j++) {
2586 fields[j] = parseFloatOrNull(inFields[j]);
2589 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2594 if (fields.length != expectedCols) {
2595 this.error("Number of columns
in line
" + i + " (" + fields.length +
2596 ") does not agree
with number of
labels (" + expectedCols +
2602 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2603 ret.sort(function(a,b) { return a[0] - b[0] });
2610 * The user has provided their data as a pre-packaged JS array. If the x values
2611 * are numeric, this is the same as dygraphs' internal format. If the x values
2612 * are dates, we need to convert them from Date objects to ms since epoch.
2613 * @param {Array.<Object>} data
2614 * @return {Array.<Object>} data with numeric x values.
2616 Dygraph.prototype.parseArray_ = function(data) {
2617 // Peek at the first x value to see if it's numeric.
2618 if (data.length == 0) {
2619 this.error("Can
't plot empty data set");
2622 if (data[0].length == 0) {
2623 this.error("Data set cannot contain an empty row");
2627 if (this.attr_("labels") == null) {
2628 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2629 "in the options parameter");
2630 this.attrs_.labels = [ "X" ];
2631 for (var i = 1; i < data[0].length; i++) {
2632 this.attrs_.labels.push("Y" + i);
2636 if (Dygraph.isDateLike(data[0][0])) {
2637 // Some intelligent defaults for a date x-axis.
2638 this.attrs_.xValueFormatter = Dygraph.dateString_;
2639 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2640 this.attrs_.xTicker = Dygraph.dateTicker;
2642 // Assume they're all dates
.
2643 var parsedData
= Dygraph
.clone(data
);
2644 for (var i
= 0; i
< data
.length
; i
++) {
2645 if (parsedData
[i
].length
== 0) {
2646 this.error("Row " + (1 + i
) + " of data is empty");
2649 if (parsedData
[i
][0] == null
2650 || typeof(parsedData
[i
][0].getTime
) != 'function'
2651 || isNaN(parsedData
[i
][0].getTime())) {
2652 this.error("x value in row " + (1 + i
) + " is not a Date");
2655 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2659 // Some intelligent defaults for a numeric x-axis.
2660 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2661 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2667 * Parses a DataTable object from gviz.
2668 * The data is expected to have a first column that is either a date or a
2669 * number. All subsequent columns must be numbers. If there is a clear mismatch
2670 * between this.xValueParser_ and the type of the first column, it will be
2671 * fixed. Fills out rawData_.
2672 * @param {Array.<Object>} data See above.
2675 Dygraph
.prototype.parseDataTable_
= function(data
) {
2676 var cols
= data
.getNumberOfColumns();
2677 var rows
= data
.getNumberOfRows();
2679 var indepType
= data
.getColumnType(0);
2680 if (indepType
== 'date' || indepType
== 'datetime') {
2681 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2682 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2683 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2684 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2685 } else if (indepType
== 'number') {
2686 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2687 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2688 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2689 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2691 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2692 "column 1 of DataTable input (Got '" + indepType
+ "')");
2696 // Array of the column indices which contain data (and not annotations).
2698 var annotationCols
= {}; // data index -> [annotation cols]
2699 var hasAnnotations
= false;
2700 for (var i
= 1; i
< cols
; i
++) {
2701 var type
= data
.getColumnType(i
);
2702 if (type
== 'number') {
2704 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2705 // This is OK -- it's an annotation column.
2706 var dataIdx
= colIdx
[colIdx
.length
- 1];
2707 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2708 annotationCols
[dataIdx
] = [i
];
2710 annotationCols
[dataIdx
].push(i
);
2712 hasAnnotations
= true;
2714 this.error("Only 'number' is supported as a dependent type with Gviz." +
2715 " 'string' is only supported if displayAnnotations is true");
2719 // Read column labels
2720 // TODO(danvk): add support back for errorBars
2721 var labels
= [data
.getColumnLabel(0)];
2722 for (var i
= 0; i
< colIdx
.length
; i
++) {
2723 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2724 if (this.attr_("errorBars")) i
+= 1;
2726 this.attrs_
.labels
= labels
;
2727 cols
= labels
.length
;
2730 var outOfOrder
= false;
2731 var annotations
= [];
2732 for (var i
= 0; i
< rows
; i
++) {
2734 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2735 data
.getValue(i
, 0) === null) {
2736 this.warn("Ignoring row " + i
+
2737 " of DataTable because of undefined or null first column.");
2741 if (indepType
== 'date' || indepType
== 'datetime') {
2742 row
.push(data
.getValue(i
, 0).getTime());
2744 row
.push(data
.getValue(i
, 0));
2746 if (!this.attr_("errorBars")) {
2747 for (var j
= 0; j
< colIdx
.length
; j
++) {
2748 var col
= colIdx
[j
];
2749 row
.push(data
.getValue(i
, col
));
2750 if (hasAnnotations
&&
2751 annotationCols
.hasOwnProperty(col
) &&
2752 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2754 ann
.series
= data
.getColumnLabel(col
);
2756 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2758 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2759 if (k
) ann
.text
+= "\n";
2760 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2762 annotations
.push(ann
);
2766 for (var j
= 0; j
< cols
- 1; j
++) {
2767 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2770 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2774 // Strip out infinities, which give dygraphs problems later on.
2775 for (var j
= 0; j
< row
.length
; j
++) {
2776 if (!isFinite(row
[j
])) row
[j
] = null;
2782 this.warn("DataTable is out of order; order it correctly to speed loading.");
2783 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2785 this.rawData_
= ret
;
2787 if (annotations
.length
> 0) {
2788 this.setAnnotations(annotations
, true);
2792 // These functions are all based on MochiKit.
2793 Dygraph
.update
= function (self
, o
) {
2794 if (typeof(o
) != 'undefined' && o
!== null) {
2796 if (o
.hasOwnProperty(k
)) {
2804 Dygraph
.isArrayLike
= function (o
) {
2805 var typ
= typeof(o
);
2807 (typ
!= 'object' && !(typ
== 'function' &&
2808 typeof(o
.item
) == 'function')) ||
2810 typeof(o
.length
) != 'number' ||
2818 Dygraph
.isDateLike
= function (o
) {
2819 if (typeof(o
) != "object" || o
=== null ||
2820 typeof(o
.getTime
) != 'function') {
2826 Dygraph
.clone
= function(o
) {
2827 // TODO(danvk): figure out how MochiKit's version works
2829 for (var i
= 0; i
< o
.length
; i
++) {
2830 if (Dygraph
.isArrayLike(o
[i
])) {
2831 r
.push(Dygraph
.clone(o
[i
]));
2841 * Get the CSV data. If it's in a function, call that function. If it's in a
2842 * file, do an XMLHttpRequest to get it.
2845 Dygraph
.prototype.start_
= function() {
2846 if (typeof this.file_
== 'function') {
2847 // CSV string. Pretend we got it via XHR.
2848 this.loadedEvent_(this.file_());
2849 } else if (Dygraph
.isArrayLike(this.file_
)) {
2850 this.rawData_
= this.parseArray_(this.file_
);
2852 } else if (typeof this.file_
== 'object' &&
2853 typeof this.file_
.getColumnRange
== 'function') {
2854 // must be a DataTable from gviz.
2855 this.parseDataTable_(this.file_
);
2857 } else if (typeof this.file_
== 'string') {
2858 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2859 if (this.file_
.indexOf('\n') >= 0) {
2860 this.loadedEvent_(this.file_
);
2862 var req
= new XMLHttpRequest();
2864 req
.onreadystatechange
= function () {
2865 if (req
.readyState
== 4) {
2866 if (req
.status
== 200) {
2867 caller
.loadedEvent_(req
.responseText
);
2872 req
.open("GET", this.file_
, true);
2876 this.error("Unknown data format: " + (typeof this.file_
));
2881 * Changes various properties of the graph. These can include:
2883 * <li>file: changes the source data for the graph</li>
2884 * <li>errorBars: changes whether the data contains stddev</li>
2886 * @param {Object} attrs The new properties and values
2888 Dygraph
.prototype.updateOptions
= function(attrs
) {
2889 // TODO(danvk): this is a mess. Rethink this function.
2890 if ('rollPeriod' in attrs
) {
2891 this.rollPeriod_
= attrs
.rollPeriod
;
2893 if ('dateWindow' in attrs
) {
2894 this.dateWindow_
= attrs
.dateWindow
;
2897 // TODO(danvk): validate per-series options.
2902 // highlightCircleSize
2904 Dygraph
.update(this.user_attrs_
, attrs
);
2905 Dygraph
.update(this.renderOptions_
, attrs
);
2907 this.labelsFromCSV_
= (this.attr_("labels") == null);
2909 // TODO(danvk): this doesn't match the constructor logic
2910 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2911 if (attrs
['file']) {
2912 this.file_
= attrs
['file'];
2920 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2921 * containing div (which has presumably changed size since the dygraph was
2922 * instantiated. If the width/height are specified, the div will be resized.
2924 * This is far more efficient than destroying and re-instantiating a
2925 * Dygraph, since it doesn't have to reparse the underlying data.
2927 * @param {Number} width Width (in pixels)
2928 * @param {Number} height Height (in pixels)
2930 Dygraph
.prototype.resize
= function(width
, height
) {
2931 if (this.resize_lock
) {
2934 this.resize_lock
= true;
2936 if ((width
=== null) != (height
=== null)) {
2937 this.warn("Dygraph.resize() should be called with zero parameters or " +
2938 "two non-NULL parameters. Pretending it was zero.");
2939 width
= height
= null;
2942 // TODO(danvk): there should be a clear() method.
2943 this.maindiv_
.innerHTML
= "";
2944 this.attrs_
.labelsDiv
= null;
2947 this.maindiv_
.style
.width
= width
+ "px";
2948 this.maindiv_
.style
.height
= height
+ "px";
2949 this.width_
= width
;
2950 this.height_
= height
;
2952 this.width_
= this.maindiv_
.offsetWidth
;
2953 this.height_
= this.maindiv_
.offsetHeight
;
2956 this.createInterface_();
2959 this.resize_lock
= false;
2963 * Adjusts the number of days in the rolling average. Updates the graph to
2964 * reflect the new averaging period.
2965 * @param {Number} length Number of days over which to average the data.
2967 Dygraph
.prototype.adjustRoll
= function(length
) {
2968 this.rollPeriod_
= length
;
2973 * Returns a boolean array of visibility statuses.
2975 Dygraph
.prototype.visibility
= function() {
2976 // Do lazy-initialization, so that this happens after we know the number of
2978 if (!this.attr_("visibility")) {
2979 this.attrs_
["visibility"] = [];
2981 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2982 this.attr_("visibility").push(true);
2984 return this.attr_("visibility");
2988 * Changes the visiblity of a series.
2990 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2991 var x
= this.visibility();
2992 if (num
< 0 || num
>= x
.length
) {
2993 this.warn("invalid series number in setVisibility: " + num
);
3001 * Update the list of annotations and redraw the chart.
3003 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3004 // Only add the annotation CSS rule once we know it will be used.
3005 Dygraph
.addAnnotationRule();
3006 this.annotations_
= ann
;
3007 this.layout_
.setAnnotations(this.annotations_
);
3008 if (!suppressDraw
) {
3014 * Return the list of annotations.
3016 Dygraph
.prototype.annotations
= function() {
3017 return this.annotations_
;
3021 * Get the index of a series (column) given its name. The first column is the
3022 * x-axis, so the data series start with index 1.
3024 Dygraph
.prototype.indexFromSetName
= function(name
) {
3025 var labels
= this.attr_("labels");
3026 for (var i
= 0; i
< labels
.length
; i
++) {
3027 if (labels
[i
] == name
) return i
;
3032 Dygraph
.addAnnotationRule
= function() {
3033 if (Dygraph
.addedAnnotationCSS
) return;
3035 var rule
= "border: 1px solid black; " +
3036 "background-color: white; " +
3037 "text-align: center;";
3039 var styleSheetElement
= document
.createElement("style");
3040 styleSheetElement
.type
= "text/css";
3041 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3043 // Find the first style sheet that we can access.
3044 // We may not add a rule to a style sheet from another domain for security
3045 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3046 // adds its own style sheets from google.com.
3047 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3048 if (document
.styleSheets
[i
].disabled
) continue;
3049 var mysheet
= document
.styleSheets
[i
];
3051 if (mysheet
.insertRule
) { // Firefox
3052 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3053 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3054 } else if (mysheet
.addRule
) { // IE
3055 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3057 Dygraph
.addedAnnotationCSS
= true;
3060 // Was likely a security exception.
3064 this.warn("Unable to add default annotation CSS rule; display may be off.");
3068 * Create a new canvas element. This is more complex than a simple
3069 * document.createElement("canvas") because of IE and excanvas.
3071 Dygraph
.createCanvas
= function() {
3072 var canvas
= document
.createElement("canvas");
3074 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3075 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3076 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3084 * A wrapper around Dygraph that implements the gviz API.
3085 * @param {Object} container The DOM object the visualization should live in.
3087 Dygraph
.GVizChart
= function(container
) {
3088 this.container
= container
;
3091 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3092 // Clear out any existing dygraph.
3093 // TODO(danvk): would it make more sense to simply redraw using the current
3094 // date_graph object?
3095 this.container
.innerHTML
= '';
3096 if (typeof(this.date_graph
) != 'undefined') {
3097 this.date_graph
.destroy();
3100 this.date_graph
= new Dygraph(this.container
, data
, options
);
3104 * Google charts compatible setSelection
3105 * Only row selection is supported, all points in the row will be highlighted
3106 * @param {Array} array of the selected cells
3109 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3111 if (selection_array
.length
) {
3112 row
= selection_array
[0].row
;
3114 this.date_graph
.setSelection(row
);
3118 * Google charts compatible getSelection implementation
3119 * @return {Array} array of the selected cells
3122 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3125 var row
= this.date_graph
.getSelection();
3127 if (row
< 0) return selection
;
3130 for (var i
in this.date_graph
.layout_
.datasets
) {
3131 selection
.push({row
: row
, column
: col
});
3138 // Older pages may still use this name.
3139 DateGraph
= Dygraph
;