1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://dygraphs.com/
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
83 // Default attribute values.
84 Dygraph
.DEFAULT_ATTRS
= {
85 highlightCircleSize
: 3,
91 // TODO(danvk): move defaults from createStatusMessage_ here.
93 labelsSeparateLines
: false,
94 labelsShowZeroValues
: true,
97 showLabelsOnHighlight
: true,
99 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
104 axisLabelFontSize
: 14,
107 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
111 xValueFormatter
: Dygraph
.dateString_
,
112 xValueParser
: Dygraph
.dateParser
,
113 xTicker
: Dygraph
.dateTicker
,
121 wilsonInterval
: true, // only relevant if fractions is true
125 connectSeparatedPoints
: false,
128 hideOverlayOnMouseOut
: true,
133 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
136 // Various logging levels.
142 // Directions for panning and zooming. Use bit operations when combined
143 // values are possible.
144 Dygraph
.HORIZONTAL
= 1;
145 Dygraph
.VERTICAL
= 2;
147 // Used for initializing annotation CSS rules only once.
148 Dygraph
.addedAnnotationCSS
= false;
150 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
151 // Labels is no longer a constructor parameter, since it's typically set
152 // directly from the data source. It also conains a name for the x-axis,
153 // which the previous constructor form did not.
154 if (labels
!= null) {
155 var new_labels
= ["Date"];
156 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
157 Dygraph
.update(attrs
, { 'labels': new_labels
});
159 this.__init__(div
, file
, attrs
);
163 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
164 * and context <canvas> inside of it. See the constructor for details.
166 * @param {Element} div the Element to render the graph into.
167 * @param {String | Function} file Source data
168 * @param {Object} attrs Miscellaneous other options
171 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
172 // Hack for IE: if we're using excanvas and the document hasn't finished
173 // loading yet (and hence may not have initialized whatever it needs to
174 // initialize), then keep calling this routine periodically until it has.
175 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
176 typeof(G_vmlCanvasManager
) != 'undefined' &&
177 document
.readyState
!= 'complete') {
179 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
182 // Support two-argument constructor
183 if (attrs
== null) { attrs
= {}; }
185 // Copy the important bits into the object
186 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
189 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
190 this.previousVerticalX_
= -1;
191 this.fractions_
= attrs
.fractions
|| false;
192 this.dateWindow_
= attrs
.dateWindow
|| null;
194 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
195 this.is_initial_draw_
= true;
196 this.annotations_
= [];
198 // Clear the div. This ensure that, if multiple dygraphs are passed the same
199 // div, then only one will be drawn.
202 // If the div isn't already sized then inherit from our attrs or
203 // give it a default size.
204 if (div
.style
.width
== '') {
205 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
207 if (div
.style
.height
== '') {
208 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
210 this.width_
= parseInt(div
.style
.width
, 10);
211 this.height_
= parseInt(div
.style
.height
, 10);
212 // The div might have been specified as percent of the current window size,
213 // convert that to an appropriate number of pixels.
214 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
215 this.width_
= div
.offsetWidth
;
217 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
218 this.height_
= div
.offsetHeight
;
221 if (this.width_
== 0) {
222 this.error("dygraph has zero width. Please specify a width in pixels.");
224 if (this.height_
== 0) {
225 this.error("dygraph has zero height. Please specify a height in pixels.");
228 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
229 if (attrs
['stackedGraph']) {
230 attrs
['fillGraph'] = true;
231 // TODO(nikhilk): Add any other stackedGraph checks here.
234 // Dygraphs has many options, some of which interact with one another.
235 // To keep track of everything, we maintain two sets of options:
237 // this.user_attrs_ only options explicitly set by the user.
238 // this.attrs_ defaults, options derived from user_attrs_, data.
240 // Options are then accessed this.attr_('attr'), which first looks at
241 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
242 // defaults without overriding behavior that the user specifically asks for.
243 this.user_attrs_
= {};
244 Dygraph
.update(this.user_attrs_
, attrs
);
247 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
249 this.boundaryIds_
= [];
251 // Make a note of whether labels will be pulled from the CSV file.
252 this.labelsFromCSV_
= (this.attr_("labels") == null);
254 // Create the containing DIV and other interactive elements
255 this.createInterface_();
260 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
262 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
263 this.user_attrs_
[seriesName
] != null &&
264 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
265 return this.user_attrs_
[seriesName
][name
];
266 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
267 return this.user_attrs_
[name
];
268 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
269 return this.attrs_
[name
];
275 // TODO(danvk): any way I can get the line numbers to be this.warn call?
276 Dygraph
.prototype.log
= function(severity
, message
) {
277 if (typeof(console
) != 'undefined') {
280 console
.debug('dygraphs: ' + message
);
283 console
.info('dygraphs: ' + message
);
285 case Dygraph
.WARNING
:
286 console
.warn('dygraphs: ' + message
);
289 console
.error('dygraphs: ' + message
);
294 Dygraph
.prototype.info
= function(message
) {
295 this.log(Dygraph
.INFO
, message
);
297 Dygraph
.prototype.warn
= function(message
) {
298 this.log(Dygraph
.WARNING
, message
);
300 Dygraph
.prototype.error
= function(message
) {
301 this.log(Dygraph
.ERROR
, message
);
305 * Returns the current rolling period, as set by the user or an option.
306 * @return {Number} The number of days in the rolling window
308 Dygraph
.prototype.rollPeriod
= function() {
309 return this.rollPeriod_
;
313 * Returns the currently-visible x-range. This can be affected by zooming,
314 * panning or a call to updateOptions.
315 * Returns a two-element array: [left, right].
316 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
318 Dygraph
.prototype.xAxisRange
= function() {
319 if (this.dateWindow_
) return this.dateWindow_
;
321 // The entire chart is visible.
322 var left
= this.rawData_
[0][0];
323 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
324 return [left
, right
];
328 * Returns the currently-visible y-range for an axis. This can be affected by
329 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
330 * called with no arguments, returns the range of the first axis.
331 * Returns a two-element array: [bottom, top].
333 Dygraph
.prototype.yAxisRange
= function(idx
) {
334 if (typeof(idx
) == "undefined") idx
= 0;
335 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
336 return [ this.axes_
[idx
].computedValueRange
[0],
337 this.axes_
[idx
].computedValueRange
[1] ];
341 * Returns the currently-visible y-ranges for each axis. This can be affected by
342 * zooming, panning, calls to updateOptions, etc.
343 * Returns an array of [bottom, top] pairs, one for each y-axis.
345 Dygraph
.prototype.yAxisRanges
= function() {
347 for (var i
= 0; i
< this.axes_
.length
; i
++) {
348 ret
.push(this.yAxisRange(i
));
353 // TODO(danvk): use these functions throughout dygraphs.
355 * Convert from data coordinates to canvas/div X/Y coordinates.
356 * If specified, do this conversion for the coordinate system of a particular
357 * axis. Uses the first axis by default.
358 * Returns a two-element array: [X, Y]
360 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
361 var ret
= [null, null];
362 var area
= this.plotter_
.area
;
364 var xRange
= this.xAxisRange();
365 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
369 var yRange
= this.yAxisRange(axis
);
370 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
377 * Convert from canvas/div coords to data coordinates.
378 * If specified, do this conversion for the coordinate system of a particular
379 * axis. Uses the first axis by default.
380 * Returns a two-element array: [X, Y]
382 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
383 var ret
= [null, null];
384 var area
= this.plotter_
.area
;
386 var xRange
= this.xAxisRange();
387 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
391 var yRange
= this.yAxisRange(axis
);
392 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
399 * Returns the number of columns (including the independent variable).
401 Dygraph
.prototype.numColumns
= function() {
402 return this.rawData_
[0].length
;
406 * Returns the number of rows (excluding any header/label row).
408 Dygraph
.prototype.numRows
= function() {
409 return this.rawData_
.length
;
413 * Returns the value in the given row and column. If the row and column exceed
414 * the bounds on the data, returns null. Also returns null if the value is
417 Dygraph
.prototype.getValue
= function(row
, col
) {
418 if (row
< 0 || row
> this.rawData_
.length
) return null;
419 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
421 return this.rawData_
[row
][col
];
424 Dygraph
.addEvent
= function(el
, evt
, fn
) {
425 var normed_fn
= function(e
) {
426 if (!e
) var e
= window
.event
;
429 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
430 el
.addEventListener(evt
, normed_fn
, false);
432 el
.attachEvent('on' + evt
, normed_fn
);
437 // Based on the article at
438 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
439 Dygraph
.cancelEvent
= function(e
) {
440 e
= e
? e
: window
.event
;
441 if (e
.stopPropagation
) {
444 if (e
.preventDefault
) {
447 e
.cancelBubble
= true;
449 e
.returnValue
= false;
454 * Generates interface elements for the Dygraph: a containing div, a div to
455 * display the current point, and a textbox to adjust the rolling average
456 * period. Also creates the Renderer/Layout elements.
459 Dygraph
.prototype.createInterface_
= function() {
460 // Create the all-enclosing graph div
461 var enclosing
= this.maindiv_
;
463 this.graphDiv
= document
.createElement("div");
464 this.graphDiv
.style
.width
= this.width_
+ "px";
465 this.graphDiv
.style
.height
= this.height_
+ "px";
466 enclosing
.appendChild(this.graphDiv
);
468 // Create the canvas for interactive parts of the chart.
469 this.canvas_
= Dygraph
.createCanvas();
470 this.canvas_
.style
.position
= "absolute";
471 this.canvas_
.width
= this.width_
;
472 this.canvas_
.height
= this.height_
;
473 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
474 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
476 // ... and for static parts of the chart.
477 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
479 // The interactive parts of the graph are drawn on top of the chart.
480 this.graphDiv
.appendChild(this.hidden_
);
481 this.graphDiv
.appendChild(this.canvas_
);
482 this.mouseEventElement_
= this.canvas_
;
485 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
486 dygraph
.mouseMove_(e
);
488 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
489 dygraph
.mouseOut_(e
);
492 // Create the grapher
493 // TODO(danvk): why does the Layout need its own set of options?
494 this.layoutOptions_
= { 'xOriginIsZero': false };
495 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
496 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
497 Dygraph
.update(this.layoutOptions_
, {
498 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
500 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
502 // TODO(danvk): why does the Renderer need its own set of options?
503 this.renderOptions_
= { colorScheme
: this.colors_
,
505 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
506 Dygraph
.update(this.renderOptions_
, this.attrs_
);
507 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
509 this.createStatusMessage_();
510 this.createDragInterface_();
514 * Detach DOM elements in the dygraph and null out all data references.
515 * Calling this when you're done with a dygraph can dramatically reduce memory
516 * usage. See, e.g., the tests/perf.html example.
518 Dygraph
.prototype.destroy
= function() {
519 var removeRecursive
= function(node
) {
520 while (node
.hasChildNodes()) {
521 removeRecursive(node
.firstChild
);
522 node
.removeChild(node
.firstChild
);
525 removeRecursive(this.maindiv_
);
527 var nullOut
= function(obj
) {
529 if (typeof(obj
[n
]) === 'object') {
535 // These may not all be necessary, but it can't hurt...
536 nullOut(this.layout_
);
537 nullOut(this.plotter_
);
542 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
543 * this particular canvas. All Dygraph work is done on this.canvas_.
544 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
545 * @return {Object} The newly-created canvas
548 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
549 var h
= Dygraph
.createCanvas();
550 h
.style
.position
= "absolute";
551 // TODO(danvk): h should be offset from canvas. canvas needs to include
552 // some extra area to make it easier to zoom in on the far left and far
553 // right. h needs to be precisely the plot area, so that clipping occurs.
554 h
.style
.top
= canvas
.style
.top
;
555 h
.style
.left
= canvas
.style
.left
;
556 h
.width
= this.width_
;
557 h
.height
= this.height_
;
558 h
.style
.width
= this.width_
+ "px"; // for IE
559 h
.style
.height
= this.height_
+ "px"; // for IE
563 // Taken from MochiKit.Color
564 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
568 if (saturation
=== 0) {
573 var i
= Math
.floor(hue
* 6);
574 var f
= (hue
* 6) - i
;
575 var p
= value
* (1 - saturation
);
576 var q
= value
* (1 - (saturation
* f
));
577 var t
= value
* (1 - (saturation
* (1 - f
)));
579 case 1: red
= q
; green
= value
; blue
= p
; break;
580 case 2: red
= p
; green
= value
; blue
= t
; break;
581 case 3: red
= p
; green
= q
; blue
= value
; break;
582 case 4: red
= t
; green
= p
; blue
= value
; break;
583 case 5: red
= value
; green
= p
; blue
= q
; break;
584 case 6: // fall through
585 case 0: red
= value
; green
= t
; blue
= p
; break;
588 red
= Math
.floor(255 * red
+ 0.5);
589 green
= Math
.floor(255 * green
+ 0.5);
590 blue
= Math
.floor(255 * blue
+ 0.5);
591 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
596 * Generate a set of distinct colors for the data series. This is done with a
597 * color wheel. Saturation/Value are customizable, and the hue is
598 * equally-spaced around the color wheel. If a custom set of colors is
599 * specified, that is used instead.
602 Dygraph
.prototype.setColors_
= function() {
603 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
604 // away with this.renderOptions_.
605 var num
= this.attr_("labels").length
- 1;
607 var colors
= this.attr_('colors');
609 var sat
= this.attr_('colorSaturation') || 1.0;
610 var val
= this.attr_('colorValue') || 0.5;
611 var half
= Math
.ceil(num
/ 2);
612 for (var i
= 1; i
<= num
; i
++) {
613 if (!this.visibility()[i
-1]) continue;
614 // alternate colors for high contrast.
615 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
616 var hue
= (1.0 * idx
/ (1 + num
));
617 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
620 for (var i
= 0; i
< num
; i
++) {
621 if (!this.visibility()[i
]) continue;
622 var colorStr
= colors
[i
% colors
.length
];
623 this.colors_
.push(colorStr
);
627 // TODO(danvk): update this w/r
/t/ the
new options system
.
628 this.renderOptions_
.colorScheme
= this.colors_
;
629 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
630 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
631 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
635 * Return the list of colors. This is either the list of colors passed in the
636 * attributes, or the autogenerated list of rgb(r,g,b) strings.
637 * @return {Array<string>} The list of colors.
639 Dygraph
.prototype.getColors
= function() {
643 // The following functions are from quirksmode.org with a modification for Safari from
644 // http://blog.firetree.net/2005/07/04/javascript-find-position/
645 // http://www.quirksmode.org/js
/findpos
.html
646 Dygraph
.findPosX
= function(obj
) {
651 curleft
+= obj
.offsetLeft
;
652 if(!obj
.offsetParent
)
654 obj
= obj
.offsetParent
;
661 Dygraph
.findPosY
= function(obj
) {
666 curtop
+= obj
.offsetTop
;
667 if(!obj
.offsetParent
)
669 obj
= obj
.offsetParent
;
679 * Create the div that contains information on the selected point(s)
680 * This goes in the top right of the canvas, unless an external div has already
684 Dygraph
.prototype.createStatusMessage_
= function() {
685 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
686 if (userLabelsDiv
&& null != userLabelsDiv
687 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
688 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
690 if (!this.attr_("labelsDiv")) {
691 var divWidth
= this.attr_('labelsDivWidth');
693 "position": "absolute",
696 "width": divWidth
+ "px",
698 "left": (this.width_
- divWidth
- 2) + "px",
699 "background": "white",
701 "overflow": "hidden"};
702 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
703 var div
= document
.createElement("div");
704 for (var name
in messagestyle
) {
705 if (messagestyle
.hasOwnProperty(name
)) {
706 div
.style
[name
] = messagestyle
[name
];
709 this.graphDiv
.appendChild(div
);
710 this.attrs_
.labelsDiv
= div
;
715 * Position the labels div so that its right edge is flush with the right edge
716 * of the charting area.
718 Dygraph
.prototype.positionLabelsDiv_
= function() {
719 // Don't touch a user-specified labelsDiv.
720 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
722 var area
= this.plotter_
.area
;
723 var div
= this.attr_("labelsDiv");
724 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
728 * Create the text box to adjust the averaging period
731 Dygraph
.prototype.createRollInterface_
= function() {
732 // Create a roller if one doesn't exist already.
734 this.roller_
= document
.createElement("input");
735 this.roller_
.type
= "text";
736 this.roller_
.style
.display
= "none";
737 this.graphDiv
.appendChild(this.roller_
);
740 var display
= this.attr_('showRoller') ? 'block' : 'none';
742 var textAttr
= { "position": "absolute",
744 "top": (this.plotter_
.area
.h
- 25) + "px",
745 "left": (this.plotter_
.area
.x
+ 1) + "px",
748 this.roller_
.size
= "2";
749 this.roller_
.value
= this.rollPeriod_
;
750 for (var name
in textAttr
) {
751 if (textAttr
.hasOwnProperty(name
)) {
752 this.roller_
.style
[name
] = textAttr
[name
];
757 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
760 // These functions are taken from MochiKit.Signal
761 Dygraph
.pageX
= function(e
) {
763 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
766 var b
= document
.body
;
768 (de
.scrollLeft
|| b
.scrollLeft
) -
769 (de
.clientLeft
|| 0);
773 Dygraph
.pageY
= function(e
) {
775 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
778 var b
= document
.body
;
780 (de
.scrollTop
|| b
.scrollTop
) -
785 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
786 return Dygraph
.pageX(e
) - context
.px
789 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
790 return Dygraph
.pageY(e
) - context
.py
793 // Called in response to an interaction model operation that
794 // should start the default panning behavior.
796 // It's used in the default callback for "mousedown" operations.
797 // Custom interaction model builders can use it to provide the default
800 Dygraph
.startPan
= function(event
, g
, context
) {
801 context
.isPanning
= true;
802 var xRange
= g
.xAxisRange();
803 context
.dateRange
= xRange
[1] - xRange
[0];
804 context
.initialLeftmostDate
= xRange
[0];
805 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
807 // Record the range of each y-axis at the start of the drag.
808 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
809 context
.is2DPan
= false;
810 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
811 var axis
= g
.axes_
[i
];
812 var yRange
= g
.yAxisRange(i
);
813 // TODO(konigsberg): These values should be in |context|.
814 axis
.dragValueRange
= yRange
[1] - yRange
[0];
815 axis
.initialTopValue
= yRange
[1];
816 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
817 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
821 // Called in response to an interaction model operation that
822 // responds to an event that pans the view.
824 // It's used in the default callback for "mousemove" operations.
825 // Custom interaction model builders can use it to provide the default
828 Dygraph
.movePan
= function(event
, g
, context
) {
829 context
.dragEndX
= g
.dragGetX_(event
, context
);
830 context
.dragEndY
= g
.dragGetY_(event
, context
);
832 var minDate
= context
.initialLeftmostDate
-
833 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
834 var maxDate
= minDate
+ context
.dateRange
;
835 g
.dateWindow_
= [minDate
, maxDate
];
837 // y-axis scaling is automatic unless this is a full 2D pan.
838 if (context
.is2DPan
) {
839 // Adjust each axis appropriately.
840 var y_frac
= context
.dragEndY
/ g
.height_
;
841 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
842 var axis
= g
.axes_
[i
];
843 var maxValue
= axis
.initialTopValue
+
844 (context
.dragEndY
- context
.dragStartY
) * axis
.unitsPerPixel
;
845 var minValue
= maxValue
- axis
.dragValueRange
;
846 axis
.valueWindow
= [ minValue
, maxValue
];
853 // Called in response to an interaction model operation that
854 // responds to an event that ends panning.
856 // It's used in the default callback for "mouseup" operations.
857 // Custom interaction model builders can use it to provide the default
860 Dygraph
.endPan
= function(event
, g
, context
) {
861 // TODO(konigsberg): Clear the context data from the axis.
862 // TODO(konigsberg): mouseup should just delete the
863 // context object, and mousedown should create a new one.
864 context
.isPanning
= false;
865 context
.is2DPan
= false;
866 context
.initialLeftmostDate
= null;
867 context
.dateRange
= null;
868 context
.valueRange
= null;
871 // Called in response to an interaction model operation that
872 // responds to an event that starts zooming.
874 // It's used in the default callback for "mousedown" operations.
875 // Custom interaction model builders can use it to provide the default
878 Dygraph
.startZoom
= function(event
, g
, context
) {
879 context
.isZooming
= true;
882 // Called in response to an interaction model operation that
883 // responds to an event that defines zoom boundaries.
885 // It's used in the default callback for "mousemove" operations.
886 // Custom interaction model builders can use it to provide the default
889 Dygraph
.moveZoom
= function(event
, g
, context
) {
890 context
.dragEndX
= g
.dragGetX_(event
, context
);
891 context
.dragEndY
= g
.dragGetY_(event
, context
);
893 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
894 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
896 // drag direction threshold for y axis is twice as large as x axis
897 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
900 context
.dragDirection
,
905 context
.prevDragDirection
,
909 context
.prevEndX
= context
.dragEndX
;
910 context
.prevEndY
= context
.dragEndY
;
911 context
.prevDragDirection
= context
.dragDirection
;
914 // Called in response to an interaction model operation that
915 // responds to an event that performs a zoom based on previously defined
918 // It's used in the default callback for "mouseup" operations.
919 // Custom interaction model builders can use it to provide the default
922 Dygraph
.endZoom
= function(event
, g
, context
) {
923 context
.isZooming
= false;
924 context
.dragEndX
= g
.dragGetX_(event
, context
);
925 context
.dragEndY
= g
.dragGetY_(event
, context
);
926 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
927 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
929 if (regionWidth
< 2 && regionHeight
< 2 &&
930 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
931 // TODO(danvk): pass along more info about the points, e.g. 'x'
932 if (g
.attr_('clickCallback') != null) {
933 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
935 if (g
.attr_('pointClickCallback')) {
936 // check if the click was on a particular point.
938 var closestDistance
= 0;
939 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
940 var p
= g
.selPoints_
[i
];
941 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
942 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
943 if (closestIdx
== -1 || distance
< closestDistance
) {
944 closestDistance
= distance
;
949 // Allow any click within two pixels of the dot.
950 var radius
= g
.attr_('highlightCircleSize') + 2;
951 if (closestDistance
<= 5 * 5) {
952 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
957 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
958 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
959 Math
.max(context
.dragStartX
, context
.dragEndX
));
960 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
961 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
962 Math
.max(context
.dragStartY
, context
.dragEndY
));
964 g
.canvas_
.getContext("2d").clearRect(0, 0,
968 context
.dragStartX
= null;
969 context
.dragStartY
= null;
972 Dygraph
.defaultInteractionModel
= {
973 // Track the beginning of drag events
974 mousedown
: function(event
, g
, context
) {
975 context
.initializeMouseDown(event
, g
, context
);
977 if (event
.altKey
|| event
.shiftKey
) {
978 Dygraph
.startPan(event
, g
, context
);
980 Dygraph
.startZoom(event
, g
, context
);
984 // Draw zoom rectangles when the mouse is down and the user moves around
985 mousemove
: function(event
, g
, context
) {
986 if (context
.isZooming
) {
987 Dygraph
.moveZoom(event
, g
, context
);
988 } else if (context
.isPanning
) {
989 Dygraph
.movePan(event
, g
, context
);
993 mouseup
: function(event
, g
, context
) {
994 if (context
.isZooming
) {
995 Dygraph
.endZoom(event
, g
, context
);
996 } else if (context
.isPanning
) {
997 Dygraph
.endPan(event
, g
, context
);
1001 // Temporarily cancel the dragging event when the mouse leaves the graph
1002 mouseout
: function(event
, g
, context
) {
1003 if (context
.isZooming
) {
1004 context
.dragEndX
= null;
1005 context
.dragEndY
= null;
1009 // Disable zooming out if panning.
1010 dblclick
: function(event
, g
, context
) {
1011 if (event
.altKey
|| event
.shiftKey
) {
1014 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1015 // friendlier to public use.
1020 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1023 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1027 Dygraph
.prototype.createDragInterface_
= function() {
1029 // Tracks whether the mouse is down right now
1031 isPanning
: false, // is this drag part of a pan?
1032 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1037 dragDirection
: null,
1040 prevDragDirection
: null,
1042 // The value on the left side of the graph when a pan operation starts.
1043 initialLeftmostDate
: null,
1045 // The number of units each pixel spans. (This won't be valid for log
1047 xUnitsPerPixel
: null,
1049 // TODO(danvk): update this comment
1050 // The range in second/value units that the viewport encompasses during a
1051 // panning operation.
1054 // Utility function to convert page-wide coordinates to canvas coords
1058 initializeMouseDown
: function(event
, g
, context
) {
1059 // prevents mouse drags from selecting page text.
1060 if (event
.preventDefault
) {
1061 event
.preventDefault(); // Firefox, Chrome, etc.
1063 event
.returnValue
= false; // IE
1064 event
.cancelBubble
= true;
1067 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1068 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1069 context
.dragStartX
= g
.dragGetX_(event
, context
);
1070 context
.dragStartY
= g
.dragGetY_(event
, context
);
1074 var interactionModel
= this.attr_("interactionModel");
1076 // Self is the graph.
1079 // Function that binds the graph and context to the handler.
1080 var bindHandler
= function(handler
) {
1081 return function(event
) {
1082 handler(event
, self
, context
);
1086 for (var eventName
in interactionModel
) {
1087 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1088 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1089 bindHandler(interactionModel
[eventName
]));
1092 // If the user releases the mouse button during a drag, but not over the
1093 // canvas, then it doesn't count as a zooming action.
1094 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1095 if (context
.isZooming
|| context
.isPanning
) {
1096 context
.isZooming
= false;
1097 context
.dragStartX
= null;
1098 context
.dragStartY
= null;
1101 if (context
.isPanning
) {
1102 context
.isPanning
= false;
1103 context
.draggingDate
= null;
1104 context
.dateRange
= null;
1105 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1106 delete self
.axes_
[i
].draggingValue
;
1107 delete self
.axes_
[i
].dragValueRange
;
1114 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1115 * up any previous zoom rectangles that were drawn. This could be optimized to
1116 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1119 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1120 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1121 * @param {Number} startX The X position where the drag started, in canvas
1123 * @param {Number} endX The current X position of the drag, in canvas coords.
1124 * @param {Number} startY The Y position where the drag started, in canvas
1126 * @param {Number} endY The current Y position of the drag, in canvas coords.
1127 * @param {Number} prevDirection the value of direction on the previous call to
1128 * this function. Used to avoid excess redrawing
1129 * @param {Number} prevEndX The value of endX on the previous call to this
1130 * function. Used to avoid excess redrawing
1131 * @param {Number} prevEndY The value of endY on the previous call to this
1132 * function. Used to avoid excess redrawing
1135 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1136 prevDirection
, prevEndX
, prevEndY
) {
1137 var ctx
= this.canvas_
.getContext("2d");
1139 // Clean up from the previous rect if necessary
1140 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1141 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1142 Math
.abs(startX
- prevEndX
), this.height_
);
1143 } else if (prevDirection
== Dygraph
.VERTICAL
){
1144 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1145 this.width_
, Math
.abs(startY
- prevEndY
));
1148 // Draw a light-grey rectangle to show the new viewing area
1149 if (direction
== Dygraph
.HORIZONTAL
) {
1150 if (endX
&& startX
) {
1151 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1152 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1153 Math
.abs(endX
- startX
), this.height_
);
1156 if (direction
== Dygraph
.VERTICAL
) {
1157 if (endY
&& startY
) {
1158 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1159 ctx
.fillRect(0, Math
.min(startY
, endY
),
1160 this.width_
, Math
.abs(endY
- startY
));
1166 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1167 * the canvas. The exact zoom window may be slightly larger if there are no data
1168 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1169 * which accepts dates that match the raw data. This function redraws the graph.
1171 * @param {Number} lowX The leftmost pixel value that should be visible.
1172 * @param {Number} highX The rightmost pixel value that should be visible.
1175 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1176 // Find the earliest and latest dates contained in this canvasx range.
1177 // Convert the call to date ranges of the raw data.
1178 var r
= this.toDataCoords(lowX
, null);
1180 r
= this.toDataCoords(highX
, null);
1182 this.doZoomXDates_(minDate
, maxDate
);
1186 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1187 * method with doZoomX which accepts pixel coordinates. This function redraws
1190 * @param {Number} minDate The minimum date that should be visible.
1191 * @param {Number} maxDate The maximum date that should be visible.
1194 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1195 this.dateWindow_
= [minDate
, maxDate
];
1197 if (this.attr_("zoomCallback")) {
1198 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1203 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1204 * the canvas. This function redraws the graph.
1206 * @param {Number} lowY The topmost pixel value that should be visible.
1207 * @param {Number} highY The lowest pixel value that should be visible.
1210 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1211 // Find the highest and lowest values in pixel range for each axis.
1212 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1213 // This is because pixels increase as you go down on the screen, whereas data
1214 // coordinates increase as you go up the screen.
1215 var valueRanges
= [];
1216 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1217 var hi
= this.toDataCoords(null, lowY
, i
);
1218 var low
= this.toDataCoords(null, highY
, i
);
1219 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1220 valueRanges
.push([low
[1], hi
[1]]);
1224 if (this.attr_("zoomCallback")) {
1225 var xRange
= this.xAxisRange();
1226 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1231 * Reset the zoom to the original view coordinates. This is the same as
1232 * double-clicking on the graph.
1236 Dygraph
.prototype.doUnzoom_
= function() {
1238 if (this.dateWindow_
!= null) {
1240 this.dateWindow_
= null;
1243 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1244 if (this.axes_
[i
].valueWindow
!= null) {
1246 delete this.axes_
[i
].valueWindow
;
1251 // Putting the drawing operation before the callback because it resets
1254 if (this.attr_("zoomCallback")) {
1255 var minDate
= this.rawData_
[0][0];
1256 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1257 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1263 * When the mouse moves in the canvas, display information about a nearby data
1264 * point and draw dots over those points in the data series. This function
1265 * takes care of cleanup of previously-drawn dots.
1266 * @param {Object} event The mousemove event from the browser.
1269 Dygraph
.prototype.mouseMove_
= function(event
) {
1270 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1271 var points
= this.layout_
.points
;
1276 // Loop through all the points and find the date nearest to our current
1278 var minDist
= 1e+100;
1280 for (var i
= 0; i
< points
.length
; i
++) {
1281 var point
= points
[i
];
1282 if (point
== null) continue;
1283 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1284 if (dist
> minDist
) continue;
1288 if (idx
>= 0) lastx
= points
[idx
].xval
;
1289 // Check that you can really highlight the last day's data
1290 var last
= points
[points
.length
-1];
1291 if (last
!= null && canvasx
> last
.canvasx
)
1292 lastx
= points
[points
.length
-1].xval
;
1294 // Extract the points we've selected
1295 this.selPoints_
= [];
1296 var l
= points
.length
;
1297 if (!this.attr_("stackedGraph")) {
1298 for (var i
= 0; i
< l
; i
++) {
1299 if (points
[i
].xval
== lastx
) {
1300 this.selPoints_
.push(points
[i
]);
1304 // Need to 'unstack' points starting from the bottom
1305 var cumulative_sum
= 0;
1306 for (var i
= l
- 1; i
>= 0; i
--) {
1307 if (points
[i
].xval
== lastx
) {
1308 var p
= {}; // Clone the point since we modify it
1309 for (var k
in points
[i
]) {
1310 p
[k
] = points
[i
][k
];
1312 p
.yval
-= cumulative_sum
;
1313 cumulative_sum
+= p
.yval
;
1314 this.selPoints_
.push(p
);
1317 this.selPoints_
.reverse();
1320 if (this.attr_("highlightCallback")) {
1321 var px
= this.lastx_
;
1322 if (px
!== null && lastx
!= px
) {
1323 // only fire if the selected point has changed.
1324 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1328 // Save last x position for callbacks.
1329 this.lastx_
= lastx
;
1331 this.updateSelection_();
1335 * Transforms layout_.points index into data row number.
1336 * @param int layout_.points index
1337 * @return int row number, or -1 if none could be found.
1340 Dygraph
.prototype.idxToRow_
= function(idx
) {
1341 if (idx
< 0) return -1;
1343 for (var i
in this.layout_
.datasets
) {
1344 if (idx
< this.layout_
.datasets
[i
].length
) {
1345 return this.boundaryIds_
[0][0]+idx
;
1347 idx
-= this.layout_
.datasets
[i
].length
;
1353 * Draw dots over the selectied points in the data series. This function
1354 * takes care of cleanup of previously-drawn dots.
1357 Dygraph
.prototype.updateSelection_
= function() {
1358 // Clear the previously drawn vertical, if there is one
1359 var ctx
= this.canvas_
.getContext("2d");
1360 if (this.previousVerticalX_
>= 0) {
1361 // Determine the maximum highlight circle size.
1362 var maxCircleSize
= 0;
1363 var labels
= this.attr_('labels');
1364 for (var i
= 1; i
< labels
.length
; i
++) {
1365 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1366 if (r
> maxCircleSize
) maxCircleSize
= r
;
1368 var px
= this.previousVerticalX_
;
1369 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1370 2 * maxCircleSize
+ 2, this.height_
);
1373 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1375 if (this.selPoints_
.length
> 0) {
1376 var canvasx
= this.selPoints_
[0].canvasx
;
1378 // Set the status message to indicate the selected point(s)
1379 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1380 var fmtFunc
= this.attr_('yValueFormatter');
1381 var clen
= this.colors_
.length
;
1383 if (this.attr_('showLabelsOnHighlight')) {
1384 // Set the status message to indicate the selected point(s)
1385 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1386 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1387 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1388 if (this.attr_("labelsSeparateLines")) {
1391 var point
= this.selPoints_
[i
];
1392 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1393 var yval
= fmtFunc(point
.yval
);
1394 replace
+= " <b><font color='" + c
.toHex() + "'>"
1395 + point
.name
+ "</font></b>:"
1399 this.attr_("labelsDiv").innerHTML
= replace
;
1402 // Draw colored circles over the center of each selected point
1404 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1405 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1407 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1409 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1410 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1411 0, 2 * Math
.PI
, false);
1416 this.previousVerticalX_
= canvasx
;
1421 * Set manually set selected dots, and display information about them
1422 * @param int row number that should by highlighted
1423 * false value clears the selection
1426 Dygraph
.prototype.setSelection
= function(row
) {
1427 // Extract the points we've selected
1428 this.selPoints_
= [];
1431 if (row
!== false) {
1432 row
= row
-this.boundaryIds_
[0][0];
1435 if (row
!== false && row
>= 0) {
1436 for (var i
in this.layout_
.datasets
) {
1437 if (row
< this.layout_
.datasets
[i
].length
) {
1438 var point
= this.layout_
.points
[pos
+row
];
1440 if (this.attr_("stackedGraph")) {
1441 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1444 this.selPoints_
.push(point
);
1446 pos
+= this.layout_
.datasets
[i
].length
;
1450 if (this.selPoints_
.length
) {
1451 this.lastx_
= this.selPoints_
[0].xval
;
1452 this.updateSelection_();
1455 this.clearSelection();
1461 * The mouse has left the canvas. Clear out whatever artifacts remain
1462 * @param {Object} event the mouseout event from the browser.
1465 Dygraph
.prototype.mouseOut_
= function(event
) {
1466 if (this.attr_("unhighlightCallback")) {
1467 this.attr_("unhighlightCallback")(event
);
1470 if (this.attr_("hideOverlayOnMouseOut")) {
1471 this.clearSelection();
1476 * Remove all selection from the canvas
1479 Dygraph
.prototype.clearSelection
= function() {
1480 // Get rid of the overlay data
1481 var ctx
= this.canvas_
.getContext("2d");
1482 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1483 this.attr_("labelsDiv").innerHTML
= "";
1484 this.selPoints_
= [];
1489 * Returns the number of the currently selected row
1490 * @return int row number, of -1 if nothing is selected
1493 Dygraph
.prototype.getSelection
= function() {
1494 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1498 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1499 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1500 return row
+ this.boundaryIds_
[0][0];
1506 Dygraph
.zeropad
= function(x
) {
1507 if (x
< 10) return "0" + x
; else return "" + x
;
1511 * Return a string version of the hours, minutes and seconds portion of a date.
1512 * @param {Number} date The JavaScript date (ms since epoch)
1513 * @return {String} A time of the form "HH:MM:SS"
1516 Dygraph
.hmsString_
= function(date
) {
1517 var zeropad
= Dygraph
.zeropad
;
1518 var d
= new Date(date
);
1519 if (d
.getSeconds()) {
1520 return zeropad(d
.getHours()) + ":" +
1521 zeropad(d
.getMinutes()) + ":" +
1522 zeropad(d
.getSeconds());
1524 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1529 * Convert a JS date to a string appropriate to display on an axis that
1530 * is displaying values at the stated granularity.
1531 * @param {Date} date The date to format
1532 * @param {Number} granularity One of the Dygraph granularity constants
1533 * @return {String} The formatted date
1536 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1537 if (granularity
>= Dygraph
.DECADAL
) {
1538 return date
.strftime('%Y');
1539 } else if (granularity
>= Dygraph
.MONTHLY
) {
1540 return date
.strftime('%b %y');
1542 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1543 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1544 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1546 return Dygraph
.hmsString_(date
.getTime());
1552 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1553 * @param {Number} date The JavaScript date (ms since epoch)
1554 * @return {String} A date of the form "YYYY/MM/DD"
1557 Dygraph
.dateString_
= function(date
, self
) {
1558 var zeropad
= Dygraph
.zeropad
;
1559 var d
= new Date(date
);
1562 var year
= "" + d
.getFullYear();
1563 // Get a 0 padded month string
1564 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1565 // Get a 0 padded day string
1566 var day
= zeropad(d
.getDate());
1569 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1570 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1572 return year
+ "/" + month + "/" + day
+ ret
;
1576 * Round a number to the specified number of digits past the decimal point.
1577 * @param {Number} num The number to round
1578 * @param {Number} places The number of decimals to which to round
1579 * @return {Number} The rounded number
1582 Dygraph
.round_
= function(num
, places
) {
1583 var shift
= Math
.pow(10, places
);
1584 return Math
.round(num
* shift
)/shift
;
1588 * Fires when there's data available to be graphed.
1589 * @param {String} data Raw CSV data to be plotted
1592 Dygraph
.prototype.loadedEvent_
= function(data
) {
1593 this.rawData_
= this.parseCSV_(data
);
1597 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1598 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1599 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1602 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1605 Dygraph
.prototype.addXTicks_
= function() {
1606 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1607 var startDate
, endDate
;
1608 if (this.dateWindow_
) {
1609 startDate
= this.dateWindow_
[0];
1610 endDate
= this.dateWindow_
[1];
1612 startDate
= this.rawData_
[0][0];
1613 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1616 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1617 this.layout_
.updateOptions({xTicks
: xTicks
});
1620 // Time granularity enumeration
1621 Dygraph
.SECONDLY
= 0;
1622 Dygraph
.TWO_SECONDLY
= 1;
1623 Dygraph
.FIVE_SECONDLY
= 2;
1624 Dygraph
.TEN_SECONDLY
= 3;
1625 Dygraph
.THIRTY_SECONDLY
= 4;
1626 Dygraph
.MINUTELY
= 5;
1627 Dygraph
.TWO_MINUTELY
= 6;
1628 Dygraph
.FIVE_MINUTELY
= 7;
1629 Dygraph
.TEN_MINUTELY
= 8;
1630 Dygraph
.THIRTY_MINUTELY
= 9;
1631 Dygraph
.HOURLY
= 10;
1632 Dygraph
.TWO_HOURLY
= 11;
1633 Dygraph
.SIX_HOURLY
= 12;
1635 Dygraph
.WEEKLY
= 14;
1636 Dygraph
.MONTHLY
= 15;
1637 Dygraph
.QUARTERLY
= 16;
1638 Dygraph
.BIANNUAL
= 17;
1639 Dygraph
.ANNUAL
= 18;
1640 Dygraph
.DECADAL
= 19;
1641 Dygraph
.CENTENNIAL
= 20;
1642 Dygraph
.NUM_GRANULARITIES
= 21;
1644 Dygraph
.SHORT_SPACINGS
= [];
1645 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1646 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1647 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1648 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1649 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1650 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1651 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1652 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1653 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1654 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1655 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1656 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1657 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1658 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1659 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1663 // If we used this time granularity, how many ticks would there be?
1664 // This is only an approximation, but it's generally good enough.
1666 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1667 if (granularity
< Dygraph
.MONTHLY
) {
1668 // Generate one tick mark for every fixed interval of time.
1669 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1670 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1672 var year_mod
= 1; // e.g. to only print one point every 10 years.
1673 var num_months
= 12;
1674 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1675 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1676 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1677 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1678 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1680 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1681 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1682 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1688 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1689 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1691 // Returns an array containing {v: millis, label: label} dictionaries.
1693 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1694 var formatter
= this.attr_("xAxisLabelFormatter");
1696 if (granularity
< Dygraph
.MONTHLY
) {
1697 // Generate one tick mark for every fixed interval of time.
1698 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1699 var format
= '%d%b'; // e.g. "1Jan"
1701 // Find a time less than start_time which occurs on a "nice" time boundary
1702 // for this granularity.
1703 var g
= spacing
/ 1000;
1704 var d
= new Date(start_time
);
1705 if (g
<= 60) { // seconds
1706 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1710 if (g
<= 60) { // minutes
1711 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1716 if (g
<= 24) { // days
1717 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1722 if (g
== 7) { // one week
1723 d
.setDate(d
.getDate() - d
.getDay());
1728 start_time
= d
.getTime();
1730 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1731 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1734 // Display a tick mark on the first of a set of months of each year.
1735 // Years get a tick mark iff y % year_mod == 0. This is useful for
1736 // displaying a tick mark once every 10 years, say, on long time scales.
1738 var year_mod
= 1; // e.g. to only print one point every 10 years.
1740 if (granularity
== Dygraph
.MONTHLY
) {
1741 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1742 } else if (granularity
== Dygraph
.QUARTERLY
) {
1743 months
= [ 0, 3, 6, 9 ];
1744 } else if (granularity
== Dygraph
.BIANNUAL
) {
1746 } else if (granularity
== Dygraph
.ANNUAL
) {
1748 } else if (granularity
== Dygraph
.DECADAL
) {
1751 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1755 this.warn("Span of dates is too long");
1758 var start_year
= new Date(start_time
).getFullYear();
1759 var end_year
= new Date(end_time
).getFullYear();
1760 var zeropad
= Dygraph
.zeropad
;
1761 for (var i
= start_year
; i
<= end_year
; i
++) {
1762 if (i
% year_mod
!= 0) continue;
1763 for (var j
= 0; j
< months
.length
; j
++) {
1764 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1765 var t
= Date
.parse(date_str
);
1766 if (t
< start_time
|| t
> end_time
) continue;
1767 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1777 * Add ticks to the x-axis based on a date range.
1778 * @param {Number} startDate Start of the date window (millis since epoch)
1779 * @param {Number} endDate End of the date window (millis since epoch)
1780 * @return {Array.<Object>} Array of {label, value} tuples.
1783 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1785 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1786 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1787 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1794 return self
.GetXAxis(startDate
, endDate
, chosen
);
1796 // TODO(danvk): signal error.
1801 * Add ticks when the x axis has numbers on it (instead of dates)
1802 * @param {Number} startDate Start of the date window (millis since epoch)
1803 * @param {Number} endDate End of the date window (millis since epoch)
1805 * @param {function} attribute accessor function.
1806 * @return {Array.<Object>} Array of {label, value} tuples.
1809 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1810 var attr
= function(k
) {
1811 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1812 return self
.attr_(k
);
1817 for (var i
= 0; i
< vals
.length
; i
++) {
1818 ticks
.push({v
: vals
[i
]});
1822 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1823 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1824 // The first spacing greater than pixelsPerYLabel is what we use.
1825 // TODO(danvk): version that works on a log scale.
1826 if (attr("labelsKMG2")) {
1827 var mults
= [1, 2, 4, 8];
1829 var mults
= [1, 2, 5];
1831 var scale
, low_val
, high_val
, nTicks
;
1832 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1833 var pixelsPerTick
= attr('pixelsPerYLabel');
1834 for (var i
= -10; i
< 50; i
++) {
1835 if (attr("labelsKMG2")) {
1836 var base_scale
= Math
.pow(16, i
);
1838 var base_scale
= Math
.pow(10, i
);
1840 for (var j
= 0; j
< mults
.length
; j
++) {
1841 scale
= base_scale
* mults
[j
];
1842 low_val
= Math
.floor(minV
/ scale
) * scale
;
1843 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1844 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1845 var spacing
= self
.height_
/ nTicks
;
1846 // wish I could break out of both loops at once...
1847 if (spacing
> pixelsPerTick
) break;
1849 if (spacing
> pixelsPerTick
) break;
1852 // Construct the set of ticks.
1853 // Allow reverse y-axis if it's explicitly requested.
1854 if (low_val
> high_val
) scale
*= -1;
1855 for (var i
= 0; i
< nTicks
; i
++) {
1856 var tickV
= low_val
+ i
* scale
;
1857 ticks
.push( {v
: tickV
} );
1861 // Add formatted labels to the ticks.
1864 if (attr("labelsKMB")) {
1866 k_labels
= [ "K", "M", "B", "T" ];
1868 if (attr("labelsKMG2")) {
1869 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1871 k_labels
= [ "k", "M", "G", "T" ];
1873 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1875 for (var i
= 0; i
< ticks
.length
; i
++) {
1876 var tickV
= ticks
[i
].v
;
1877 var absTickV
= Math
.abs(tickV
);
1879 if (formatter
!= undefined
) {
1880 label
= formatter(tickV
);
1882 label
= Dygraph
.round_(tickV
, 2);
1884 if (k_labels
.length
) {
1885 // Round up to an appropriate unit.
1887 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1888 if (absTickV
>= n
) {
1889 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1894 ticks
[i
].label
= label
;
1899 // Computes the range of the data series (including confidence intervals).
1900 // series is either [ [x1, y1], [x2, y2], ... ] or
1901 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1902 // Returns [low, high]
1903 Dygraph
.prototype.extremeValues_
= function(series
) {
1904 var minY
= null, maxY
= null;
1906 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1908 // With custom bars, maxY is the max of the high values.
1909 for (var j
= 0; j
< series
.length
; j
++) {
1910 var y
= series
[j
][1][0];
1912 var low
= y
- series
[j
][1][1];
1913 var high
= y
+ series
[j
][1][2];
1914 if (low
> y
) low
= y
; // this can happen with custom bars,
1915 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1916 if (maxY
== null || high
> maxY
) {
1919 if (minY
== null || low
< minY
) {
1924 for (var j
= 0; j
< series
.length
; j
++) {
1925 var y
= series
[j
][1];
1926 if (y
=== null || isNaN(y
)) continue;
1927 if (maxY
== null || y
> maxY
) {
1930 if (minY
== null || y
< minY
) {
1936 return [minY
, maxY
];
1940 * This function is called once when the chart's data is changed or the options
1941 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1942 * idea is that values derived from the chart's data can be computed here,
1943 * rather than every time the chart is drawn. This includes things like the
1944 * number of axes, rolling averages, etc.
1946 Dygraph
.prototype.predraw_
= function() {
1947 // TODO(danvk): move more computations out of drawGraph_ and into here.
1948 this.computeYAxes_();
1950 // Create a new plotter.
1951 if (this.plotter_
) this.plotter_
.clear();
1952 this.plotter_
= new DygraphCanvasRenderer(this,
1953 this.hidden_
, this.layout_
,
1954 this.renderOptions_
);
1956 // The roller sits in the bottom left corner of the chart. We don't know where
1957 // this will be until the options are available, so it's positioned here.
1958 this.createRollInterface_();
1960 // Same thing applies for the labelsDiv. It's right edge should be flush with
1961 // the right edge of the charting area (which may not be the same as the right
1962 // edge of the div, if we have two y-axes.
1963 this.positionLabelsDiv_();
1965 // If the data or options have changed, then we'd better redraw.
1971 * Update the graph with new data. This method is called when the viewing area
1972 * has changed. If the underlying data or options have changed, predraw_ will
1973 * be called before drawGraph_ is called.
1976 Dygraph
.prototype.drawGraph_
= function() {
1977 var data
= this.rawData_
;
1979 // This is used to set the second parameter to drawCallback, below.
1980 var is_initial_draw
= this.is_initial_draw_
;
1981 this.is_initial_draw_
= false;
1983 var minY
= null, maxY
= null;
1984 this.layout_
.removeAllDatasets();
1986 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1988 // Loop over the fields (series). Go from the last to the first,
1989 // because if they're stacked that's how we accumulate the values.
1991 var cumulative_y
= []; // For stacked series.
1994 var extremes
= {}; // series name -> [low, high]
1996 // Loop over all fields and create datasets
1997 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1998 if (!this.visibility()[i
- 1]) continue;
2000 var seriesName
= this.attr_("labels")[i
];
2001 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2004 for (var j
= 0; j
< data
.length
; j
++) {
2005 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2006 var date
= data
[j
][0];
2007 series
.push([date
, data
[j
][i
]]);
2011 // TODO(danvk): move this into predraw_. It's insane to do it here.
2012 series
= this.rollingAverage(series
, this.rollPeriod_
);
2014 // Prune down to the desired range, if necessary (for zooming)
2015 // Because there can be lines going to points outside of the visible area,
2016 // we actually prune to visible points, plus one on either side.
2017 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2018 if (this.dateWindow_
) {
2019 var low
= this.dateWindow_
[0];
2020 var high
= this.dateWindow_
[1];
2022 // TODO(danvk): do binary search instead of linear search.
2023 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2024 var firstIdx
= null, lastIdx
= null;
2025 for (var k
= 0; k
< series
.length
; k
++) {
2026 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2029 if (series
[k
][0] <= high
) {
2033 if (firstIdx
=== null) firstIdx
= 0;
2034 if (firstIdx
> 0) firstIdx
--;
2035 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2036 if (lastIdx
< series
.length
- 1) lastIdx
++;
2037 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2038 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2039 pruned
.push(series
[k
]);
2043 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2046 var seriesExtremes
= this.extremeValues_(series
);
2049 for (var j
=0; j
<series
.length
; j
++) {
2050 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2053 } else if (this.attr_("stackedGraph")) {
2054 var l
= series
.length
;
2056 for (var j
= 0; j
< l
; j
++) {
2057 // If one data set has a NaN, let all subsequent stacked
2058 // sets inherit the NaN -- only start at 0 for the first set.
2059 var x
= series
[j
][0];
2060 if (cumulative_y
[x
] === undefined
) {
2061 cumulative_y
[x
] = 0;
2064 actual_y
= series
[j
][1];
2065 cumulative_y
[x
] += actual_y
;
2067 series
[j
] = [x
, cumulative_y
[x
]]
2069 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2070 seriesExtremes
[1] = cumulative_y
[x
];
2072 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2073 seriesExtremes
[0] = cumulative_y
[x
];
2077 extremes
[seriesName
] = seriesExtremes
;
2079 datasets
[i
] = series
;
2082 for (var i
= 1; i
< datasets
.length
; i
++) {
2083 if (!this.visibility()[i
- 1]) continue;
2084 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2087 // TODO(danvk): this method doesn't need to return anything.
2088 var out
= this.computeYAxisRanges_(extremes
);
2090 var seriesToAxisMap
= out
[1];
2091 this.layout_
.updateOptions( { yAxes
: axes
,
2092 seriesToAxisMap
: seriesToAxisMap
2097 // Tell PlotKit to use this new data and render itself
2098 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2099 this.layout_
.evaluateWithError();
2100 this.plotter_
.clear();
2101 this.plotter_
.render();
2102 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2103 this.canvas_
.height
);
2105 if (this.attr_("drawCallback") !== null) {
2106 this.attr_("drawCallback")(this, is_initial_draw
);
2111 * Determine properties of the y-axes which are independent of the data
2112 * currently being displayed. This includes things like the number of axes and
2113 * the style of the axes. It does not include the range of each axis and its
2115 * This fills in this.axes_ and this.seriesToAxisMap_.
2116 * axes_ = [ { options } ]
2117 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2118 * indices are into the axes_ array.
2120 Dygraph
.prototype.computeYAxes_
= function() {
2121 this.axes_
= [{}]; // always have at least one y-axis.
2122 this.seriesToAxisMap_
= {};
2124 // Get a list of series names.
2125 var labels
= this.attr_("labels");
2127 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2129 // all options which could be applied per-axis:
2137 'axisLabelFontSize',
2141 // Copy global axis options over to the first axis.
2142 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2143 var k
= axisOptions
[i
];
2144 var v
= this.attr_(k
);
2145 if (v
) this.axes_
[0][k
] = v
;
2148 // Go through once and add all the axes.
2149 for (var seriesName
in series
) {
2150 if (!series
.hasOwnProperty(seriesName
)) continue;
2151 var axis
= this.attr_("axis", seriesName
);
2153 this.seriesToAxisMap_
[seriesName
] = 0;
2156 if (typeof(axis
) == 'object') {
2157 // Add a new axis, making a copy of its per-axis options.
2159 Dygraph
.update(opts
, this.axes_
[0]);
2160 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2161 Dygraph
.update(opts
, axis
);
2162 this.axes_
.push(opts
);
2163 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2167 // Go through one more time and assign series to an axis defined by another
2168 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2169 for (var seriesName
in series
) {
2170 if (!series
.hasOwnProperty(seriesName
)) continue;
2171 var axis
= this.attr_("axis", seriesName
);
2172 if (typeof(axis
) == 'string') {
2173 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2174 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2175 "series " + axis
+ ", which does not define its own axis.");
2178 var idx
= this.seriesToAxisMap_
[axis
];
2179 this.seriesToAxisMap_
[seriesName
] = idx
;
2183 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2184 // this last so that hiding the first series doesn't destroy the axis
2185 // properties of the primary axis.
2186 var seriesToAxisFiltered
= {};
2187 var vis
= this.visibility();
2188 for (var i
= 1; i
< labels
.length
; i
++) {
2190 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2192 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2196 * Returns the number of y-axes on the chart.
2197 * @return {Number} the number of axes.
2199 Dygraph
.prototype.numAxes
= function() {
2201 for (var series
in this.seriesToAxisMap_
) {
2202 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2203 var idx
= this.seriesToAxisMap_
[series
];
2204 if (idx
> last_axis
) last_axis
= idx
;
2206 return 1 + last_axis
;
2210 * Determine the value range and tick marks for each axis.
2211 * @param {Object} extremes A mapping from seriesName -> [low, high]
2212 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2214 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2215 // Build a map from axis number -> [list of series names]
2216 var seriesForAxis
= [];
2217 for (var series
in this.seriesToAxisMap_
) {
2218 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2219 var idx
= this.seriesToAxisMap_
[series
];
2220 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2221 seriesForAxis
[idx
].push(series
);
2224 // Compute extreme values, a span and tick marks for each axis.
2225 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2226 var axis
= this.axes_
[i
];
2227 if (axis
.valueWindow
) {
2228 // This is only set if the user has zoomed on the y-axis. It is never set
2229 // by a user. It takes precedence over axis.valueRange because, if you set
2230 // valueRange, you'd still expect to be able to pan.
2231 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2232 } else if (axis
.valueRange
) {
2233 // This is a user-set value range for this axis.
2234 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2236 // Calculate the extremes of extremes.
2237 var series
= seriesForAxis
[i
];
2238 var minY
= Infinity
; // extremes[series[0]][0];
2239 var maxY
= -Infinity
; // extremes[series[0]][1];
2240 for (var j
= 0; j
< series
.length
; j
++) {
2241 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2242 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2244 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2246 // Add some padding and round up to an integer to be human-friendly.
2247 var span
= maxY
- minY
;
2248 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2249 if (span
== 0) { span
= maxY
; }
2250 var maxAxisY
= maxY
+ 0.1 * span
;
2251 var minAxisY
= minY
- 0.1 * span
;
2253 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2254 if (!this.attr_("avoidMinZero")) {
2255 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2256 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2259 if (this.attr_("includeZero")) {
2260 if (maxY
< 0) maxAxisY
= 0;
2261 if (minY
> 0) minAxisY
= 0;
2264 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2267 // Add ticks. By default, all axes inherit the tick positions of the
2268 // primary axis. However, if an axis is specifically marked as having
2269 // independent ticks, then that is permissible as well.
2270 if (i
== 0 || axis
.independentTicks
) {
2272 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2273 axis
.computedValueRange
[1],
2277 var p_axis
= this.axes_
[0];
2278 var p_ticks
= p_axis
.ticks
;
2279 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2280 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2281 var tick_values
= [];
2282 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2283 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2284 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2285 tick_values
.push(y_val
);
2289 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2290 axis
.computedValueRange
[1],
2291 this, axis
, tick_values
);
2295 return [this.axes_
, this.seriesToAxisMap_
];
2299 * Calculates the rolling average of a data set.
2300 * If originalData is [label, val], rolls the average of those.
2301 * If originalData is [label, [, it's interpreted as [value, stddev]
2302 * and the roll is returned in the same form, with appropriately reduced
2303 * stddev for each value.
2304 * Note that this is where fractional input (i.e. '5/10') is converted into
2306 * @param {Array} originalData The data in the appropriate format (see above)
2307 * @param {Number} rollPeriod The number of days over which to average the data
2309 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2310 if (originalData
.length
< 2)
2311 return originalData
;
2312 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2313 var rollingData
= [];
2314 var sigma
= this.attr_("sigma");
2316 if (this.fractions_
) {
2318 var den
= 0; // numerator/denominator
2320 for (var i
= 0; i
< originalData
.length
; i
++) {
2321 num
+= originalData
[i
][1][0];
2322 den
+= originalData
[i
][1][1];
2323 if (i
- rollPeriod
>= 0) {
2324 num
-= originalData
[i
- rollPeriod
][1][0];
2325 den
-= originalData
[i
- rollPeriod
][1][1];
2328 var date
= originalData
[i
][0];
2329 var value
= den
? num
/ den
: 0.0;
2330 if (this.attr_("errorBars")) {
2331 if (this.wilsonInterval_
) {
2332 // For more details on this confidence interval, see:
2333 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2335 var p
= value
< 0 ? 0 : value
, n
= den
;
2336 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2337 var denom
= 1 + sigma
* sigma
/ den
;
2338 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2339 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2340 rollingData
[i
] = [date
,
2341 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2343 rollingData
[i
] = [date
, [0, 0, 0]];
2346 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2347 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2350 rollingData
[i
] = [date
, mult
* value
];
2353 } else if (this.attr_("customBars")) {
2358 for (var i
= 0; i
< originalData
.length
; i
++) {
2359 var data
= originalData
[i
][1];
2361 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2363 if (y
!= null && !isNaN(y
)) {
2369 if (i
- rollPeriod
>= 0) {
2370 var prev
= originalData
[i
- rollPeriod
];
2371 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2378 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2379 1.0 * (mid
- low
) / count
,
2380 1.0 * (high
- mid
) / count
]];
2383 // Calculate the rolling average for the first rollPeriod - 1 points where
2384 // there is not enough data to roll over the full number of days
2385 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2386 if (!this.attr_("errorBars")){
2387 if (rollPeriod
== 1) {
2388 return originalData
;
2391 for (var i
= 0; i
< originalData
.length
; i
++) {
2394 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2395 var y
= originalData
[j
][1];
2396 if (y
== null || isNaN(y
)) continue;
2398 sum
+= originalData
[j
][1];
2401 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2403 rollingData
[i
] = [originalData
[i
][0], null];
2408 for (var i
= 0; i
< originalData
.length
; i
++) {
2412 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2413 var y
= originalData
[j
][1][0];
2414 if (y
== null || isNaN(y
)) continue;
2416 sum
+= originalData
[j
][1][0];
2417 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2420 var stddev
= Math
.sqrt(variance
) / num_ok
;
2421 rollingData
[i
] = [originalData
[i
][0],
2422 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2424 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2434 * Parses a date, returning the number of milliseconds since epoch. This can be
2435 * passed in as an xValueParser in the Dygraph constructor.
2436 * TODO(danvk): enumerate formats that this understands.
2437 * @param {String} A date in YYYYMMDD format.
2438 * @return {Number} Milliseconds since epoch.
2441 Dygraph
.dateParser
= function(dateStr
, self
) {
2444 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2445 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2446 while (dateStrSlashed
.search("-") != -1) {
2447 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2449 d
= Date
.parse(dateStrSlashed
);
2450 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2451 // TODO(danvk): remove support for this format. It's confusing.
2452 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2453 + "/" + dateStr
.substr(6,2);
2454 d
= Date
.parse(dateStrSlashed
);
2456 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2457 // "2009/07/12 12:34:56"
2458 d
= Date
.parse(dateStr
);
2461 if (!d
|| isNaN(d
)) {
2462 self
.error("Couldn't parse " + dateStr
+ " as a date");
2468 * Detects the type of the str (date or numeric) and sets the various
2469 * formatting attributes in this.attrs_ based on this type.
2470 * @param {String} str An x value.
2473 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2475 if (str
.indexOf('-') >= 0 ||
2476 str
.indexOf('/') >= 0 ||
2477 isNaN(parseFloat(str
))) {
2479 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2480 // TODO(danvk): remove support for this format.
2485 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2486 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2487 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2488 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2490 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2491 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2492 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2493 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2498 * Parses a string in a special csv format. We expect a csv file where each
2499 * line is a date point, and the first field in each line is the date string.
2500 * We also expect that all remaining fields represent series.
2501 * if the errorBars attribute is set, then interpret the fields as:
2502 * date, series1, stddev1, series2, stddev2, ...
2503 * @param {Array.<Object>} data See above.
2506 * @return Array.<Object> An array with one entry for each row. These entries
2507 * are an array of cells in that row. The first entry is the parsed x-value for
2508 * the row. The second, third, etc. are the y-values. These can take on one of
2509 * three forms, depending on the CSV and constructor parameters:
2511 * 2. [ value, stddev ]
2512 * 3. [ low value, center value, high value ]
2514 Dygraph
.prototype.parseCSV_
= function(data
) {
2516 var lines
= data
.split("\n");
2518 // Use the default delimiter or fall back to a tab if that makes sense.
2519 var delim
= this.attr_('delimiter');
2520 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2525 if (this.labelsFromCSV_
) {
2527 this.attrs_
.labels
= lines
[0].split(delim
);
2530 // Parse the x as a float or return null if it's not a number.
2531 var parseFloatOrNull
= function(x
) {
2532 var val
= parseFloat(x
);
2533 // isFinite() returns false for NaN and +/-Infinity
.
2534 return isFinite(val
) ? val
: null;
2538 var defaultParserSet
= false; // attempt to auto-detect x value type
2539 var expectedCols
= this.attr_("labels").length
;
2540 var outOfOrder
= false;
2541 for (var i
= start
; i
< lines
.length
; i
++) {
2542 var line
= lines
[i
];
2543 if (line
.length
== 0) continue; // skip blank lines
2544 if (line
[0] == '#') continue; // skip comment lines
2545 var inFields
= line
.split(delim
);
2546 if (inFields
.length
< 2) continue;
2549 if (!defaultParserSet
) {
2550 this.detectTypeFromString_(inFields
[0]);
2551 xParser
= this.attr_("xValueParser");
2552 defaultParserSet
= true;
2554 fields
[0] = xParser(inFields
[0], this);
2556 // If fractions are expected, parse the numbers as "A/B
"
2557 if (this.fractions_) {
2558 for (var j = 1; j < inFields.length; j++) {
2559 // TODO(danvk): figure out an appropriate way to flag parse errors.
2560 var vals = inFields[j].split("/");
2561 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2563 } else if (this.attr_("errorBars
")) {
2564 // If there are error bars, values are (value, stddev) pairs
2565 for (var j = 1; j < inFields.length; j += 2)
2566 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2567 parseFloatOrNull(inFields[j + 1])];
2568 } else if (this.attr_("customBars
")) {
2569 // Bars are a low;center;high tuple
2570 for (var j = 1; j < inFields.length; j++) {
2571 var vals = inFields[j].split(";");
2572 fields[j] = [ parseFloatOrNull(vals[0]),
2573 parseFloatOrNull(vals[1]),
2574 parseFloatOrNull(vals[2]) ];
2577 // Values are just numbers
2578 for (var j = 1; j < inFields.length; j++) {
2579 fields[j] = parseFloatOrNull(inFields[j]);
2582 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2587 if (fields.length != expectedCols) {
2588 this.error("Number of columns
in line
" + i + " (" + fields.length +
2589 ") does not agree
with number of
labels (" + expectedCols +
2595 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2596 ret.sort(function(a,b) { return a[0] - b[0] });
2603 * The user has provided their data as a pre-packaged JS array. If the x values
2604 * are numeric, this is the same as dygraphs' internal format. If the x values
2605 * are dates, we need to convert them from Date objects to ms since epoch.
2606 * @param {Array.<Object>} data
2607 * @return {Array.<Object>} data with numeric x values.
2609 Dygraph.prototype.parseArray_ = function(data) {
2610 // Peek at the first x value to see if it's numeric.
2611 if (data.length == 0) {
2612 this.error("Can
't plot empty data set");
2615 if (data[0].length == 0) {
2616 this.error("Data set cannot contain an empty row");
2620 if (this.attr_("labels") == null) {
2621 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2622 "in the options parameter");
2623 this.attrs_.labels = [ "X" ];
2624 for (var i = 1; i < data[0].length; i++) {
2625 this.attrs_.labels.push("Y" + i);
2629 if (Dygraph.isDateLike(data[0][0])) {
2630 // Some intelligent defaults for a date x-axis.
2631 this.attrs_.xValueFormatter = Dygraph.dateString_;
2632 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2633 this.attrs_.xTicker = Dygraph.dateTicker;
2635 // Assume they're all dates
.
2636 var parsedData
= Dygraph
.clone(data
);
2637 for (var i
= 0; i
< data
.length
; i
++) {
2638 if (parsedData
[i
].length
== 0) {
2639 this.error("Row " + (1 + i
) + " of data is empty");
2642 if (parsedData
[i
][0] == null
2643 || typeof(parsedData
[i
][0].getTime
) != 'function'
2644 || isNaN(parsedData
[i
][0].getTime())) {
2645 this.error("x value in row " + (1 + i
) + " is not a Date");
2648 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2652 // Some intelligent defaults for a numeric x-axis.
2653 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2654 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2660 * Parses a DataTable object from gviz.
2661 * The data is expected to have a first column that is either a date or a
2662 * number. All subsequent columns must be numbers. If there is a clear mismatch
2663 * between this.xValueParser_ and the type of the first column, it will be
2664 * fixed. Fills out rawData_.
2665 * @param {Array.<Object>} data See above.
2668 Dygraph
.prototype.parseDataTable_
= function(data
) {
2669 var cols
= data
.getNumberOfColumns();
2670 var rows
= data
.getNumberOfRows();
2672 var indepType
= data
.getColumnType(0);
2673 if (indepType
== 'date' || indepType
== 'datetime') {
2674 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2675 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2676 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2677 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2678 } else if (indepType
== 'number') {
2679 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2680 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2681 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2682 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2684 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2685 "column 1 of DataTable input (Got '" + indepType
+ "')");
2689 // Array of the column indices which contain data (and not annotations).
2691 var annotationCols
= {}; // data index -> [annotation cols]
2692 var hasAnnotations
= false;
2693 for (var i
= 1; i
< cols
; i
++) {
2694 var type
= data
.getColumnType(i
);
2695 if (type
== 'number') {
2697 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2698 // This is OK -- it's an annotation column.
2699 var dataIdx
= colIdx
[colIdx
.length
- 1];
2700 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2701 annotationCols
[dataIdx
] = [i
];
2703 annotationCols
[dataIdx
].push(i
);
2705 hasAnnotations
= true;
2707 this.error("Only 'number' is supported as a dependent type with Gviz." +
2708 " 'string' is only supported if displayAnnotations is true");
2712 // Read column labels
2713 // TODO(danvk): add support back for errorBars
2714 var labels
= [data
.getColumnLabel(0)];
2715 for (var i
= 0; i
< colIdx
.length
; i
++) {
2716 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2717 if (this.attr_("errorBars")) i
+= 1;
2719 this.attrs_
.labels
= labels
;
2720 cols
= labels
.length
;
2723 var outOfOrder
= false;
2724 var annotations
= [];
2725 for (var i
= 0; i
< rows
; i
++) {
2727 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2728 data
.getValue(i
, 0) === null) {
2729 this.warn("Ignoring row " + i
+
2730 " of DataTable because of undefined or null first column.");
2734 if (indepType
== 'date' || indepType
== 'datetime') {
2735 row
.push(data
.getValue(i
, 0).getTime());
2737 row
.push(data
.getValue(i
, 0));
2739 if (!this.attr_("errorBars")) {
2740 for (var j
= 0; j
< colIdx
.length
; j
++) {
2741 var col
= colIdx
[j
];
2742 row
.push(data
.getValue(i
, col
));
2743 if (hasAnnotations
&&
2744 annotationCols
.hasOwnProperty(col
) &&
2745 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2747 ann
.series
= data
.getColumnLabel(col
);
2749 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2751 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2752 if (k
) ann
.text
+= "\n";
2753 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2755 annotations
.push(ann
);
2759 for (var j
= 0; j
< cols
- 1; j
++) {
2760 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2763 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2767 // Strip out infinities, which give dygraphs problems later on.
2768 for (var j
= 0; j
< row
.length
; j
++) {
2769 if (!isFinite(row
[j
])) row
[j
] = null;
2775 this.warn("DataTable is out of order; order it correctly to speed loading.");
2776 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2778 this.rawData_
= ret
;
2780 if (annotations
.length
> 0) {
2781 this.setAnnotations(annotations
, true);
2785 // These functions are all based on MochiKit.
2786 Dygraph
.update
= function (self
, o
) {
2787 if (typeof(o
) != 'undefined' && o
!== null) {
2789 if (o
.hasOwnProperty(k
)) {
2797 Dygraph
.isArrayLike
= function (o
) {
2798 var typ
= typeof(o
);
2800 (typ
!= 'object' && !(typ
== 'function' &&
2801 typeof(o
.item
) == 'function')) ||
2803 typeof(o
.length
) != 'number' ||
2811 Dygraph
.isDateLike
= function (o
) {
2812 if (typeof(o
) != "object" || o
=== null ||
2813 typeof(o
.getTime
) != 'function') {
2819 Dygraph
.clone
= function(o
) {
2820 // TODO(danvk): figure out how MochiKit's version works
2822 for (var i
= 0; i
< o
.length
; i
++) {
2823 if (Dygraph
.isArrayLike(o
[i
])) {
2824 r
.push(Dygraph
.clone(o
[i
]));
2834 * Get the CSV data. If it's in a function, call that function. If it's in a
2835 * file, do an XMLHttpRequest to get it.
2838 Dygraph
.prototype.start_
= function() {
2839 if (typeof this.file_
== 'function') {
2840 // CSV string. Pretend we got it via XHR.
2841 this.loadedEvent_(this.file_());
2842 } else if (Dygraph
.isArrayLike(this.file_
)) {
2843 this.rawData_
= this.parseArray_(this.file_
);
2845 } else if (typeof this.file_
== 'object' &&
2846 typeof this.file_
.getColumnRange
== 'function') {
2847 // must be a DataTable from gviz.
2848 this.parseDataTable_(this.file_
);
2850 } else if (typeof this.file_
== 'string') {
2851 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2852 if (this.file_
.indexOf('\n') >= 0) {
2853 this.loadedEvent_(this.file_
);
2855 var req
= new XMLHttpRequest();
2857 req
.onreadystatechange
= function () {
2858 if (req
.readyState
== 4) {
2859 if (req
.status
== 200) {
2860 caller
.loadedEvent_(req
.responseText
);
2865 req
.open("GET", this.file_
, true);
2869 this.error("Unknown data format: " + (typeof this.file_
));
2874 * Changes various properties of the graph. These can include:
2876 * <li>file: changes the source data for the graph</li>
2877 * <li>errorBars: changes whether the data contains stddev</li>
2879 * @param {Object} attrs The new properties and values
2881 Dygraph
.prototype.updateOptions
= function(attrs
) {
2882 // TODO(danvk): this is a mess. Rethink this function.
2883 if ('rollPeriod' in attrs
) {
2884 this.rollPeriod_
= attrs
.rollPeriod
;
2886 if ('dateWindow' in attrs
) {
2887 this.dateWindow_
= attrs
.dateWindow
;
2890 // TODO(danvk): validate per-series options.
2895 // highlightCircleSize
2897 Dygraph
.update(this.user_attrs_
, attrs
);
2898 Dygraph
.update(this.renderOptions_
, attrs
);
2900 this.labelsFromCSV_
= (this.attr_("labels") == null);
2902 // TODO(danvk): this doesn't match the constructor logic
2903 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2904 if (attrs
['file']) {
2905 this.file_
= attrs
['file'];
2913 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2914 * containing div (which has presumably changed size since the dygraph was
2915 * instantiated. If the width/height are specified, the div will be resized.
2917 * This is far more efficient than destroying and re-instantiating a
2918 * Dygraph, since it doesn't have to reparse the underlying data.
2920 * @param {Number} width Width (in pixels)
2921 * @param {Number} height Height (in pixels)
2923 Dygraph
.prototype.resize
= function(width
, height
) {
2924 if (this.resize_lock
) {
2927 this.resize_lock
= true;
2929 if ((width
=== null) != (height
=== null)) {
2930 this.warn("Dygraph.resize() should be called with zero parameters or " +
2931 "two non-NULL parameters. Pretending it was zero.");
2932 width
= height
= null;
2935 // TODO(danvk): there should be a clear() method.
2936 this.maindiv_
.innerHTML
= "";
2937 this.attrs_
.labelsDiv
= null;
2940 this.maindiv_
.style
.width
= width
+ "px";
2941 this.maindiv_
.style
.height
= height
+ "px";
2942 this.width_
= width
;
2943 this.height_
= height
;
2945 this.width_
= this.maindiv_
.offsetWidth
;
2946 this.height_
= this.maindiv_
.offsetHeight
;
2949 this.createInterface_();
2952 this.resize_lock
= false;
2956 * Adjusts the number of days in the rolling average. Updates the graph to
2957 * reflect the new averaging period.
2958 * @param {Number} length Number of days over which to average the data.
2960 Dygraph
.prototype.adjustRoll
= function(length
) {
2961 this.rollPeriod_
= length
;
2966 * Returns a boolean array of visibility statuses.
2968 Dygraph
.prototype.visibility
= function() {
2969 // Do lazy-initialization, so that this happens after we know the number of
2971 if (!this.attr_("visibility")) {
2972 this.attrs_
["visibility"] = [];
2974 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2975 this.attr_("visibility").push(true);
2977 return this.attr_("visibility");
2981 * Changes the visiblity of a series.
2983 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2984 var x
= this.visibility();
2985 if (num
< 0 || num
>= x
.length
) {
2986 this.warn("invalid series number in setVisibility: " + num
);
2994 * Update the list of annotations and redraw the chart.
2996 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2997 // Only add the annotation CSS rule once we know it will be used.
2998 Dygraph
.addAnnotationRule();
2999 this.annotations_
= ann
;
3000 this.layout_
.setAnnotations(this.annotations_
);
3001 if (!suppressDraw
) {
3007 * Return the list of annotations.
3009 Dygraph
.prototype.annotations
= function() {
3010 return this.annotations_
;
3014 * Get the index of a series (column) given its name. The first column is the
3015 * x-axis, so the data series start with index 1.
3017 Dygraph
.prototype.indexFromSetName
= function(name
) {
3018 var labels
= this.attr_("labels");
3019 for (var i
= 0; i
< labels
.length
; i
++) {
3020 if (labels
[i
] == name
) return i
;
3025 Dygraph
.addAnnotationRule
= function() {
3026 if (Dygraph
.addedAnnotationCSS
) return;
3028 var rule
= "border: 1px solid black; " +
3029 "background-color: white; " +
3030 "text-align: center;";
3032 var styleSheetElement
= document
.createElement("style");
3033 styleSheetElement
.type
= "text/css";
3034 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3036 // Find the first style sheet that we can access.
3037 // We may not add a rule to a style sheet from another domain for security
3038 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3039 // adds its own style sheets from google.com.
3040 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3041 if (document
.styleSheets
[i
].disabled
) continue;
3042 var mysheet
= document
.styleSheets
[i
];
3044 if (mysheet
.insertRule
) { // Firefox
3045 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3046 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3047 } else if (mysheet
.addRule
) { // IE
3048 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3050 Dygraph
.addedAnnotationCSS
= true;
3053 // Was likely a security exception.
3057 this.warn("Unable to add default annotation CSS rule; display may be off.");
3061 * Create a new canvas element. This is more complex than a simple
3062 * document.createElement("canvas") because of IE and excanvas.
3064 Dygraph
.createCanvas
= function() {
3065 var canvas
= document
.createElement("canvas");
3067 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3068 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3069 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3077 * A wrapper around Dygraph that implements the gviz API.
3078 * @param {Object} container The DOM object the visualization should live in.
3080 Dygraph
.GVizChart
= function(container
) {
3081 this.container
= container
;
3084 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3085 // Clear out any existing dygraph.
3086 // TODO(danvk): would it make more sense to simply redraw using the current
3087 // date_graph object?
3088 this.container
.innerHTML
= '';
3089 if (typeof(this.date_graph
) != 'undefined') {
3090 this.date_graph
.destroy();
3093 this.date_graph
= new Dygraph(this.container
, data
, options
);
3097 * Google charts compatible setSelection
3098 * Only row selection is supported, all points in the row will be highlighted
3099 * @param {Array} array of the selected cells
3102 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3104 if (selection_array
.length
) {
3105 row
= selection_array
[0].row
;
3107 this.date_graph
.setSelection(row
);
3111 * Google charts compatible getSelection implementation
3112 * @return {Array} array of the selected cells
3115 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3118 var row
= this.date_graph
.getSelection();
3120 if (row
< 0) return selection
;
3123 for (var i
in this.date_graph
.layout_
.datasets
) {
3124 selection
.push({row
: row
, column
: col
});
3131 // Older pages may still use this name.
3132 DateGraph
= Dygraph
;