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;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
93 labelsShowZeroValues
: true,
96 showLabelsOnHighlight
: true,
98 yValueFormatter
: function(x
, opt_numDigits
) {
99 return x
.toPrecision(opt_numDigits
|| 2);
105 axisLabelFontSize
: 14,
108 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
112 xValueFormatter
: Dygraph
.dateString_
,
113 xValueParser
: Dygraph
.dateParser
,
114 xTicker
: Dygraph
.dateTicker
,
122 wilsonInterval
: true, // only relevant if fractions is true
126 connectSeparatedPoints
: false,
129 hideOverlayOnMouseOut
: true,
135 // Various logging levels.
141 // Directions for panning and zooming. Use bit operations when combined
142 // values are possible.
143 Dygraph
.HORIZONTAL
= 1;
144 Dygraph
.VERTICAL
= 2;
146 // Used for initializing annotation CSS rules only once.
147 Dygraph
.addedAnnotationCSS
= false;
149 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
150 // Labels is no longer a constructor parameter, since it's typically set
151 // directly from the data source. It also conains a name for the x-axis,
152 // which the previous constructor form did not.
153 if (labels
!= null) {
154 var new_labels
= ["Date"];
155 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
156 Dygraph
.update(attrs
, { 'labels': new_labels
});
158 this.__init__(div
, file
, attrs
);
162 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
163 * and interaction <canvas> inside of it. See the constructor for details
165 * @param {Element} div the Element to render the graph into.
166 * @param {String | Function} file Source data
167 * @param {Object} attrs Miscellaneous other options
170 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
171 // Hack for IE: if we're using excanvas and the document hasn't finished
172 // loading yet (and hence may not have initialized whatever it needs to
173 // initialize), then keep calling this routine periodically until it has.
174 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
175 typeof(G_vmlCanvasManager
) != 'undefined' &&
176 document
.readyState
!= 'complete') {
178 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
181 // Support two-argument constructor
182 if (attrs
== null) { attrs
= {}; }
184 // Copy the important bits into the object
185 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
188 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
189 this.previousVerticalX_
= -1;
190 this.fractions_
= attrs
.fractions
|| false;
191 this.dateWindow_
= attrs
.dateWindow
|| null;
193 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
194 this.is_initial_draw_
= true;
195 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 points 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 * Generates interface elements for the Dygraph: a containing div, a div to
438 * display the current point, and a textbox to adjust the rolling average
439 * period. Also creates the Renderer/Layout elements.
442 Dygraph
.prototype.createInterface_
= function() {
443 // Create the all-enclosing graph div
444 var enclosing
= this.maindiv_
;
446 this.graphDiv
= document
.createElement("div");
447 this.graphDiv
.style
.width
= this.width_
+ "px";
448 this.graphDiv
.style
.height
= this.height_
+ "px";
449 enclosing
.appendChild(this.graphDiv
);
451 // Create the canvas for interactive parts of the chart.
452 this.canvas_
= Dygraph
.createCanvas();
453 this.canvas_
.style
.position
= "absolute";
454 this.canvas_
.width
= this.width_
;
455 this.canvas_
.height
= this.height_
;
456 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
457 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
459 // ... and for static parts of the chart.
460 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
462 // The interactive parts of the graph are drawn on top of the chart.
463 this.graphDiv
.appendChild(this.hidden_
);
464 this.graphDiv
.appendChild(this.canvas_
);
465 this.mouseEventElement_
= this.canvas_
;
468 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
469 dygraph
.mouseMove_(e
);
471 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
472 dygraph
.mouseOut_(e
);
475 // Create the grapher
476 // TODO(danvk): why does the Layout need its own set of options?
477 this.layoutOptions_
= { 'xOriginIsZero': false };
478 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
479 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
480 Dygraph
.update(this.layoutOptions_
, {
481 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
483 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
485 // TODO(danvk): why does the Renderer need its own set of options?
486 this.renderOptions_
= { colorScheme
: this.colors_
,
488 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
489 Dygraph
.update(this.renderOptions_
, this.attrs_
);
490 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
492 this.createStatusMessage_();
493 this.createDragInterface_();
497 * Detach DOM elements in the dygraph and null out all data references.
498 * Calling this when you're done with a dygraph can dramatically reduce memory
499 * usage. See, e.g., the tests/perf.html example.
501 Dygraph
.prototype.destroy
= function() {
502 var removeRecursive
= function(node
) {
503 while (node
.hasChildNodes()) {
504 removeRecursive(node
.firstChild
);
505 node
.removeChild(node
.firstChild
);
508 removeRecursive(this.maindiv_
);
510 var nullOut
= function(obj
) {
512 if (typeof(obj
[n
]) === 'object') {
518 // These may not all be necessary, but it can't hurt...
519 nullOut(this.layout_
);
520 nullOut(this.plotter_
);
525 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
526 * this particular canvas. All Dygraph work is done on this.canvas_.
527 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
528 * @return {Object} The newly-created canvas
531 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
532 var h
= Dygraph
.createCanvas();
533 h
.style
.position
= "absolute";
534 // TODO(danvk): h should be offset from canvas. canvas needs to include
535 // some extra area to make it easier to zoom in on the far left and far
536 // right. h needs to be precisely the plot area, so that clipping occurs.
537 h
.style
.top
= canvas
.style
.top
;
538 h
.style
.left
= canvas
.style
.left
;
539 h
.width
= this.width_
;
540 h
.height
= this.height_
;
541 h
.style
.width
= this.width_
+ "px"; // for IE
542 h
.style
.height
= this.height_
+ "px"; // for IE
546 // Taken from MochiKit.Color
547 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
551 if (saturation
=== 0) {
556 var i
= Math
.floor(hue
* 6);
557 var f
= (hue
* 6) - i
;
558 var p
= value
* (1 - saturation
);
559 var q
= value
* (1 - (saturation
* f
));
560 var t
= value
* (1 - (saturation
* (1 - f
)));
562 case 1: red
= q
; green
= value
; blue
= p
; break;
563 case 2: red
= p
; green
= value
; blue
= t
; break;
564 case 3: red
= p
; green
= q
; blue
= value
; break;
565 case 4: red
= t
; green
= p
; blue
= value
; break;
566 case 5: red
= value
; green
= p
; blue
= q
; break;
567 case 6: // fall through
568 case 0: red
= value
; green
= t
; blue
= p
; break;
571 red
= Math
.floor(255 * red
+ 0.5);
572 green
= Math
.floor(255 * green
+ 0.5);
573 blue
= Math
.floor(255 * blue
+ 0.5);
574 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
579 * Generate a set of distinct colors for the data series. This is done with a
580 * color wheel. Saturation/Value are customizable, and the hue is
581 * equally-spaced around the color wheel. If a custom set of colors is
582 * specified, that is used instead.
585 Dygraph
.prototype.setColors_
= function() {
586 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
587 // away with this.renderOptions_.
588 var num
= this.attr_("labels").length
- 1;
590 var colors
= this.attr_('colors');
592 var sat
= this.attr_('colorSaturation') || 1.0;
593 var val
= this.attr_('colorValue') || 0.5;
594 var half
= Math
.ceil(num
/ 2);
595 for (var i
= 1; i
<= num
; i
++) {
596 if (!this.visibility()[i
-1]) continue;
597 // alternate colors for high contrast.
598 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
599 var hue
= (1.0 * idx
/ (1 + num
));
600 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
603 for (var i
= 0; i
< num
; i
++) {
604 if (!this.visibility()[i
]) continue;
605 var colorStr
= colors
[i
% colors
.length
];
606 this.colors_
.push(colorStr
);
610 // TODO(danvk): update this w/r
/t/ the
new options system
.
611 this.renderOptions_
.colorScheme
= this.colors_
;
612 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
613 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
614 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
618 * Return the list of colors. This is either the list of colors passed in the
619 * attributes, or the autogenerated list of rgb(r,g,b) strings.
620 * @return {Array<string>} The list of colors.
622 Dygraph
.prototype.getColors
= function() {
626 // The following functions are from quirksmode.org with a modification for Safari from
627 // http://blog.firetree.net/2005/07/04/javascript-find-position/
628 // http://www.quirksmode.org/js
/findpos
.html
629 Dygraph
.findPosX
= function(obj
) {
634 curleft
+= obj
.offsetLeft
;
635 if(!obj
.offsetParent
)
637 obj
= obj
.offsetParent
;
644 Dygraph
.findPosY
= function(obj
) {
649 curtop
+= obj
.offsetTop
;
650 if(!obj
.offsetParent
)
652 obj
= obj
.offsetParent
;
662 * Create the div that contains information on the selected point(s)
663 * This goes in the top right of the canvas, unless an external div has already
667 Dygraph
.prototype.createStatusMessage_
= function() {
668 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
669 if (userLabelsDiv
&& null != userLabelsDiv
670 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
671 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
673 if (!this.attr_("labelsDiv")) {
674 var divWidth
= this.attr_('labelsDivWidth');
676 "position": "absolute",
679 "width": divWidth
+ "px",
681 "left": (this.width_
- divWidth
- 2) + "px",
682 "background": "white",
684 "overflow": "hidden"};
685 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
686 var div
= document
.createElement("div");
687 for (var name
in messagestyle
) {
688 if (messagestyle
.hasOwnProperty(name
)) {
689 div
.style
[name
] = messagestyle
[name
];
692 this.graphDiv
.appendChild(div
);
693 this.attrs_
.labelsDiv
= div
;
698 * Position the labels div so that its right edge is flush with the right edge
699 * of the charting area.
701 Dygraph
.prototype.positionLabelsDiv_
= function() {
702 // Don't touch a user-specified labelsDiv.
703 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
705 var area
= this.plotter_
.area
;
706 var div
= this.attr_("labelsDiv");
707 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
711 * Create the text box to adjust the averaging period
714 Dygraph
.prototype.createRollInterface_
= function() {
715 // Create a roller if one doesn't exist already.
717 this.roller_
= document
.createElement("input");
718 this.roller_
.type
= "text";
719 this.roller_
.style
.display
= "none";
720 this.graphDiv
.appendChild(this.roller_
);
723 var display
= this.attr_('showRoller') ? 'block' : 'none';
725 var textAttr
= { "position": "absolute",
727 "top": (this.plotter_
.area
.h
- 25) + "px",
728 "left": (this.plotter_
.area
.x
+ 1) + "px",
731 this.roller_
.size
= "2";
732 this.roller_
.value
= this.rollPeriod_
;
733 for (var name
in textAttr
) {
734 if (textAttr
.hasOwnProperty(name
)) {
735 this.roller_
.style
[name
] = textAttr
[name
];
740 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
743 // These functions are taken from MochiKit.Signal
744 Dygraph
.pageX
= function(e
) {
746 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
749 var b
= document
.body
;
751 (de
.scrollLeft
|| b
.scrollLeft
) -
752 (de
.clientLeft
|| 0);
756 Dygraph
.pageY
= function(e
) {
758 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
761 var b
= document
.body
;
763 (de
.scrollTop
|| b
.scrollTop
) -
769 * Set up all the mouse handlers needed to capture dragging behavior for zoom
773 Dygraph
.prototype.createDragInterface_
= function() {
776 // Tracks whether the mouse is down right now
777 var isZooming
= false;
778 var isPanning
= false; // is this drag part of a pan?
779 var is2DPan
= false; // if so, is that pan 1- or 2-dimensional?
780 var dragStartX
= null;
781 var dragStartY
= null;
784 var dragDirection
= null;
787 var prevDragDirection
= null;
789 // TODO(danvk): update this comment
790 // draggingDate and draggingValue represent the [date,value] point on the
791 // graph at which the mouse was pressed. As the mouse moves while panning,
792 // the viewport must pan so that the mouse position points to
793 // [draggingDate, draggingValue]
794 var draggingDate
= null;
796 // TODO(danvk): update this comment
797 // The range in second/value units that the viewport encompasses during a
798 // panning operation.
799 var dateRange
= null;
801 // Utility function to convert page-wide coordinates to canvas coords
804 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
805 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
807 // Draw zoom rectangles when the mouse is down and the user moves around
808 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
810 dragEndX
= getX(event
);
811 dragEndY
= getY(event
);
813 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
814 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
816 // drag direction threshold for y axis is twice as large as x axis
817 dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
819 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
820 prevDragDirection
, prevEndX
, prevEndY
);
824 prevDragDirection
= dragDirection
;
825 } else if (isPanning
) {
826 dragEndX
= getX(event
);
827 dragEndY
= getY(event
);
829 // TODO(danvk): update this comment
830 // Want to have it so that:
831 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
832 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
833 // 3. draggingValue appears at dragEndY.
834 // 4. valueRange is unaltered.
836 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
837 var maxDate
= minDate
+ dateRange
;
838 self
.dateWindow_
= [minDate
, maxDate
];
841 // y-axis scaling is automatic unless this is a full 2D pan.
843 // Adjust each axis appropriately.
844 var y_frac
= dragEndY
/ self
.height_
;
845 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
846 var axis
= self
.axes_
[i
];
847 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
848 var minValue
= maxValue
- axis
.dragValueRange
;
849 axis
.valueWindow
= [ minValue
, maxValue
];
857 // Track the beginning of drag events
858 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
859 // prevents mouse drags from selecting page text.
860 if (event
.preventDefault
) {
861 event
.preventDefault(); // Firefox, Chrome, etc.
863 event
.returnValue
= false; // IE
864 event
.cancelBubble
= true;
867 px
= Dygraph
.findPosX(self
.canvas_
);
868 py
= Dygraph
.findPosY(self
.canvas_
);
869 dragStartX
= getX(event
);
870 dragStartY
= getY(event
);
872 if (event
.altKey
|| event
.shiftKey
) {
873 // have to be zoomed in to pan.
875 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
876 if (self
.axes_
[i
].valueWindow
|| self
.axes_
[i
].valueRange
) {
881 if (!self
.dateWindow_
&& !zoomedY
) return;
884 var xRange
= self
.xAxisRange();
885 dateRange
= xRange
[1] - xRange
[0];
887 // Record the range of each y-axis at the start of the drag.
888 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
890 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
891 var axis
= self
.axes_
[i
];
892 var yRange
= self
.yAxisRange(i
);
893 axis
.dragValueRange
= yRange
[1] - yRange
[0];
894 var r
= self
.toDataCoords(null, dragStartY
, i
);
895 axis
.draggingValue
= r
[1];
896 if (axis
.valueWindow
|| axis
.valueRange
) is2DPan
= true;
899 // TODO(konigsberg): Switch from all this math to toDataCoords?
900 // Seems to work for the dragging value.
901 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+ xRange
[0];
907 // If the user releases the mouse button during a drag, but not over the
908 // canvas, then it doesn't count as a zooming action.
909 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
910 if (isZooming
|| isPanning
) {
920 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
921 delete self
.axes_
[i
].draggingValue
;
922 delete self
.axes_
[i
].dragValueRange
;
927 // Temporarily cancel the dragging event when the mouse leaves the graph
928 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
935 // If the mouse is released on the canvas during a drag event, then it's a
936 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
937 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
940 dragEndX
= getX(event
);
941 dragEndY
= getY(event
);
942 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
943 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
945 if (regionWidth
< 2 && regionHeight
< 2 &&
946 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
947 // TODO(danvk): pass along more info about the points, e.g. 'x'
948 if (self
.attr_('clickCallback') != null) {
949 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
951 if (self
.attr_('pointClickCallback')) {
952 // check if the click was on a particular point.
954 var closestDistance
= 0;
955 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
956 var p
= self
.selPoints_
[i
];
957 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
958 Math
.pow(p
.canvasy
- dragEndY
, 2);
959 if (closestIdx
== -1 || distance
< closestDistance
) {
960 closestDistance
= distance
;
965 // Allow any click within two pixels of the dot.
966 var radius
= self
.attr_('highlightCircleSize') + 2;
967 if (closestDistance
<= 5 * 5) {
968 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
973 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
974 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
975 Math
.max(dragStartX
, dragEndX
));
976 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
977 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
978 Math
.max(dragStartY
, dragEndY
));
980 self
.canvas_
.getContext("2d").clearRect(0, 0,
982 self
.canvas_
.height
);
998 // Double-clicking zooms back out
999 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
1000 // Disable zooming out if panning.
1001 if (event
.altKey
|| event
.shiftKey
) return;
1008 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1009 * up any previous zoom rectangles that were drawn. This could be optimized to
1010 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1013 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1014 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1015 * @param {Number} startX The X position where the drag started, in canvas
1017 * @param {Number} endX The current X position of the drag, in canvas coords.
1018 * @param {Number} startY The Y position where the drag started, in canvas
1020 * @param {Number} endY The current Y position of the drag, in canvas coords.
1021 * @param {Number} prevDirection the value of direction on the previous call to
1022 * this function. Used to avoid excess redrawing
1023 * @param {Number} prevEndX The value of endX on the previous call to this
1024 * function. Used to avoid excess redrawing
1025 * @param {Number} prevEndY The value of endY on the previous call to this
1026 * function. Used to avoid excess redrawing
1029 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1030 prevDirection
, prevEndX
, prevEndY
) {
1031 var ctx
= this.canvas_
.getContext("2d");
1033 // Clean up from the previous rect if necessary
1034 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1035 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1036 Math
.abs(startX
- prevEndX
), this.height_
);
1037 } else if (prevDirection
== Dygraph
.VERTICAL
){
1038 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1039 this.width_
, Math
.abs(startY
- prevEndY
));
1042 // Draw a light-grey rectangle to show the new viewing area
1043 if (direction
== Dygraph
.HORIZONTAL
) {
1044 if (endX
&& startX
) {
1045 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1046 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1047 Math
.abs(endX
- startX
), this.height_
);
1050 if (direction
== Dygraph
.VERTICAL
) {
1051 if (endY
&& startY
) {
1052 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1053 ctx
.fillRect(0, Math
.min(startY
, endY
),
1054 this.width_
, Math
.abs(endY
- startY
));
1060 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1061 * the canvas. The exact zoom window may be slightly larger if there are no data
1062 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1063 * which accepts dates that match the raw data. This function redraws the graph.
1065 * @param {Number} lowX The leftmost pixel value that should be visible.
1066 * @param {Number} highX The rightmost pixel value that should be visible.
1069 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1070 // Find the earliest and latest dates contained in this canvasx range.
1071 // Convert the call to date ranges of the raw data.
1072 var r
= this.toDataCoords(lowX
, null);
1074 r
= this.toDataCoords(highX
, null);
1076 this.doZoomXDates_(minDate
, maxDate
);
1080 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1081 * method with doZoomX which accepts pixel coordinates. This function redraws
1084 * @param {Number} minDate The minimum date that should be visible.
1085 * @param {Number} maxDate The maximum date that should be visible.
1088 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1089 this.dateWindow_
= [minDate
, maxDate
];
1091 if (this.attr_("zoomCallback")) {
1092 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1097 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1098 * the canvas. This function redraws the graph.
1100 * @param {Number} lowY The topmost pixel value that should be visible.
1101 * @param {Number} highY The lowest pixel value that should be visible.
1104 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1105 // Find the highest and lowest values in pixel range for each axis.
1106 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1107 // This is because pixels increase as you go down on the screen, whereas data
1108 // coordinates increase as you go up the screen.
1109 var valueRanges
= [];
1110 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1111 var hi
= this.toDataCoords(null, lowY
, i
);
1112 var low
= this.toDataCoords(null, highY
, i
);
1113 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1114 valueRanges
.push([low
[1], hi
[1]]);
1118 if (this.attr_("zoomCallback")) {
1119 var xRange
= this.xAxisRange();
1120 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1125 * Reset the zoom to the original view coordinates. This is the same as
1126 * double-clicking on the graph.
1130 Dygraph
.prototype.doUnzoom_
= function() {
1132 if (this.dateWindow_
!= null) {
1134 this.dateWindow_
= null;
1137 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1138 if (this.axes_
[i
].valueWindow
!= null) {
1140 delete this.axes_
[i
].valueWindow
;
1145 // Putting the drawing operation before the callback because it resets
1148 if (this.attr_("zoomCallback")) {
1149 var minDate
= this.rawData_
[0][0];
1150 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1151 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1157 * When the mouse moves in the canvas, display information about a nearby data
1158 * point and draw dots over those points in the data series. This function
1159 * takes care of cleanup of previously-drawn dots.
1160 * @param {Object} event The mousemove event from the browser.
1163 Dygraph
.prototype.mouseMove_
= function(event
) {
1164 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1165 var points
= this.layout_
.points
;
1170 // Loop through all the points and find the date nearest to our current
1172 var minDist
= 1e+100;
1174 for (var i
= 0; i
< points
.length
; i
++) {
1175 var point
= points
[i
];
1176 if (point
== null) continue;
1177 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1178 if (dist
> minDist
) continue;
1182 if (idx
>= 0) lastx
= points
[idx
].xval
;
1183 // Check that you can really highlight the last day's data
1184 var last
= points
[points
.length
-1];
1185 if (last
!= null && canvasx
> last
.canvasx
)
1186 lastx
= points
[points
.length
-1].xval
;
1188 // Extract the points we've selected
1189 this.selPoints_
= [];
1190 var l
= points
.length
;
1191 if (!this.attr_("stackedGraph")) {
1192 for (var i
= 0; i
< l
; i
++) {
1193 if (points
[i
].xval
== lastx
) {
1194 this.selPoints_
.push(points
[i
]);
1198 // Need to 'unstack' points starting from the bottom
1199 var cumulative_sum
= 0;
1200 for (var i
= l
- 1; i
>= 0; i
--) {
1201 if (points
[i
].xval
== lastx
) {
1202 var p
= {}; // Clone the point since we modify it
1203 for (var k
in points
[i
]) {
1204 p
[k
] = points
[i
][k
];
1206 p
.yval
-= cumulative_sum
;
1207 cumulative_sum
+= p
.yval
;
1208 this.selPoints_
.push(p
);
1211 this.selPoints_
.reverse();
1214 if (this.attr_("highlightCallback")) {
1215 var px
= this.lastx_
;
1216 if (px
!== null && lastx
!= px
) {
1217 // only fire if the selected point has changed.
1218 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1222 // Save last x position for callbacks.
1223 this.lastx_
= lastx
;
1225 this.updateSelection_();
1229 * Transforms layout_.points index into data row number.
1230 * @param int layout_.points index
1231 * @return int row number, or -1 if none could be found.
1234 Dygraph
.prototype.idxToRow_
= function(idx
) {
1235 if (idx
< 0) return -1;
1237 for (var i
in this.layout_
.datasets
) {
1238 if (idx
< this.layout_
.datasets
[i
].length
) {
1239 return this.boundaryIds_
[0][0]+idx
;
1241 idx
-= this.layout_
.datasets
[i
].length
;
1247 * Draw dots over the selectied points in the data series. This function
1248 * takes care of cleanup of previously-drawn dots.
1251 Dygraph
.prototype.updateSelection_
= function() {
1252 // Clear the previously drawn vertical, if there is one
1253 var ctx
= this.canvas_
.getContext("2d");
1254 if (this.previousVerticalX_
>= 0) {
1255 // Determine the maximum highlight circle size.
1256 var maxCircleSize
= 0;
1257 var labels
= this.attr_('labels');
1258 for (var i
= 1; i
< labels
.length
; i
++) {
1259 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1260 if (r
> maxCircleSize
) maxCircleSize
= r
;
1262 var px
= this.previousVerticalX_
;
1263 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1264 2 * maxCircleSize
+ 2, this.height_
);
1267 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1269 if (this.selPoints_
.length
> 0) {
1270 var canvasx
= this.selPoints_
[0].canvasx
;
1272 // Set the status message to indicate the selected point(s)
1273 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1274 var fmtFunc
= this.attr_('yValueFormatter');
1275 var clen
= this.colors_
.length
;
1277 if (this.attr_('showLabelsOnHighlight')) {
1278 // Set the status message to indicate the selected point(s)
1279 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1280 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1281 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1282 if (this.attr_("labelsSeparateLines")) {
1285 var point
= this.selPoints_
[i
];
1286 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1287 var yval
= fmtFunc(point
.yval
, this.numDigits_
+ 1); // In tenths.
1288 replace
+= " <b><font color='" + c
.toHex() + "'>"
1289 + point
.name
+ "</font></b>:"
1293 this.attr_("labelsDiv").innerHTML
= replace
;
1296 // Draw colored circles over the center of each selected point
1298 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1299 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1301 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1303 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1304 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1305 0, 2 * Math
.PI
, false);
1310 this.previousVerticalX_
= canvasx
;
1315 * Set manually set selected dots, and display information about them
1316 * @param int row number that should by highlighted
1317 * false value clears the selection
1320 Dygraph
.prototype.setSelection
= function(row
) {
1321 // Extract the points we've selected
1322 this.selPoints_
= [];
1325 if (row
!== false) {
1326 row
= row
-this.boundaryIds_
[0][0];
1329 if (row
!== false && row
>= 0) {
1330 for (var i
in this.layout_
.datasets
) {
1331 if (row
< this.layout_
.datasets
[i
].length
) {
1332 var point
= this.layout_
.points
[pos
+row
];
1334 if (this.attr_("stackedGraph")) {
1335 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1338 this.selPoints_
.push(point
);
1340 pos
+= this.layout_
.datasets
[i
].length
;
1344 if (this.selPoints_
.length
) {
1345 this.lastx_
= this.selPoints_
[0].xval
;
1346 this.updateSelection_();
1349 this.clearSelection();
1355 * The mouse has left the canvas. Clear out whatever artifacts remain
1356 * @param {Object} event the mouseout event from the browser.
1359 Dygraph
.prototype.mouseOut_
= function(event
) {
1360 if (this.attr_("unhighlightCallback")) {
1361 this.attr_("unhighlightCallback")(event
);
1364 if (this.attr_("hideOverlayOnMouseOut")) {
1365 this.clearSelection();
1370 * Remove all selection from the canvas
1373 Dygraph
.prototype.clearSelection
= function() {
1374 // Get rid of the overlay data
1375 var ctx
= this.canvas_
.getContext("2d");
1376 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1377 this.attr_("labelsDiv").innerHTML
= "";
1378 this.selPoints_
= [];
1383 * Returns the number of the currently selected row
1384 * @return int row number, of -1 if nothing is selected
1387 Dygraph
.prototype.getSelection
= function() {
1388 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1392 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1393 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1394 return row
+ this.boundaryIds_
[0][0];
1400 Dygraph
.zeropad
= function(x
) {
1401 if (x
< 10) return "0" + x
; else return "" + x
;
1405 * Return a string version of the hours, minutes and seconds portion of a date.
1406 * @param {Number} date The JavaScript date (ms since epoch)
1407 * @return {String} A time of the form "HH:MM:SS"
1410 Dygraph
.hmsString_
= function(date
) {
1411 var zeropad
= Dygraph
.zeropad
;
1412 var d
= new Date(date
);
1413 if (d
.getSeconds()) {
1414 return zeropad(d
.getHours()) + ":" +
1415 zeropad(d
.getMinutes()) + ":" +
1416 zeropad(d
.getSeconds());
1418 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1423 * Convert a JS date to a string appropriate to display on an axis that
1424 * is displaying values at the stated granularity.
1425 * @param {Date} date The date to format
1426 * @param {Number} granularity One of the Dygraph granularity constants
1427 * @return {String} The formatted date
1430 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1431 if (granularity
>= Dygraph
.MONTHLY
) {
1432 return date
.strftime('%b %y');
1434 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1435 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1436 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1438 return Dygraph
.hmsString_(date
.getTime());
1444 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1445 * @param {Number} date The JavaScript date (ms since epoch)
1446 * @return {String} A date of the form "YYYY/MM/DD"
1449 Dygraph
.dateString_
= function(date
, self
) {
1450 var zeropad
= Dygraph
.zeropad
;
1451 var d
= new Date(date
);
1454 var year
= "" + d
.getFullYear();
1455 // Get a 0 padded month string
1456 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1457 // Get a 0 padded day string
1458 var day
= zeropad(d
.getDate());
1461 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1462 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1464 return year
+ "/" + month + "/" + day
+ ret
;
1468 * Fires when there's data available to be graphed.
1469 * @param {String} data Raw CSV data to be plotted
1472 Dygraph
.prototype.loadedEvent_
= function(data
) {
1473 this.rawData_
= this.parseCSV_(data
);
1477 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1478 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1479 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1482 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1485 Dygraph
.prototype.addXTicks_
= function() {
1486 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1487 var startDate
, endDate
;
1488 if (this.dateWindow_
) {
1489 startDate
= this.dateWindow_
[0];
1490 endDate
= this.dateWindow_
[1];
1492 startDate
= this.rawData_
[0][0];
1493 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1496 var ret
= this.attr_('xTicker')(startDate
, endDate
, this);
1497 if (ret
.ticks
!== undefined
) { // Used numericTicks()?
1498 this.layout_
.updateOptions({xTicks
: ret
.ticks
});
1499 } else { // Used dateTicker() instead.
1500 this.layout_
.updateOptions({xTicks
: ret
});
1504 // Time granularity enumeration
1505 Dygraph
.SECONDLY
= 0;
1506 Dygraph
.TWO_SECONDLY
= 1;
1507 Dygraph
.FIVE_SECONDLY
= 2;
1508 Dygraph
.TEN_SECONDLY
= 3;
1509 Dygraph
.THIRTY_SECONDLY
= 4;
1510 Dygraph
.MINUTELY
= 5;
1511 Dygraph
.TWO_MINUTELY
= 6;
1512 Dygraph
.FIVE_MINUTELY
= 7;
1513 Dygraph
.TEN_MINUTELY
= 8;
1514 Dygraph
.THIRTY_MINUTELY
= 9;
1515 Dygraph
.HOURLY
= 10;
1516 Dygraph
.TWO_HOURLY
= 11;
1517 Dygraph
.SIX_HOURLY
= 12;
1519 Dygraph
.WEEKLY
= 14;
1520 Dygraph
.MONTHLY
= 15;
1521 Dygraph
.QUARTERLY
= 16;
1522 Dygraph
.BIANNUAL
= 17;
1523 Dygraph
.ANNUAL
= 18;
1524 Dygraph
.DECADAL
= 19;
1525 Dygraph
.NUM_GRANULARITIES
= 20;
1527 Dygraph
.SHORT_SPACINGS
= [];
1528 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1529 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1530 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1531 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1532 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1533 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1534 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1535 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1536 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1537 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1538 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1539 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1540 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1541 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1542 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1546 // If we used this time granularity, how many ticks would there be?
1547 // This is only an approximation, but it's generally good enough.
1549 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1550 if (granularity
< Dygraph
.MONTHLY
) {
1551 // Generate one tick mark for every fixed interval of time.
1552 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1553 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1555 var year_mod
= 1; // e.g. to only print one point every 10 years.
1556 var num_months
= 12;
1557 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1558 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1559 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1560 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1562 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1563 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1564 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1570 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1571 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1573 // Returns an array containing {v: millis, label: label} dictionaries.
1575 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1576 var formatter
= this.attr_("xAxisLabelFormatter");
1578 if (granularity
< Dygraph
.MONTHLY
) {
1579 // Generate one tick mark for every fixed interval of time.
1580 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1581 var format
= '%d%b'; // e.g. "1Jan"
1583 // Find a time less than start_time which occurs on a "nice" time boundary
1584 // for this granularity.
1585 var g
= spacing
/ 1000;
1586 var d
= new Date(start_time
);
1587 if (g
<= 60) { // seconds
1588 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1592 if (g
<= 60) { // minutes
1593 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1598 if (g
<= 24) { // days
1599 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1604 if (g
== 7) { // one week
1605 d
.setDate(d
.getDate() - d
.getDay());
1610 start_time
= d
.getTime();
1612 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1613 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1616 // Display a tick mark on the first of a set of months of each year.
1617 // Years get a tick mark iff y % year_mod == 0. This is useful for
1618 // displaying a tick mark once every 10 years, say, on long time scales.
1620 var year_mod
= 1; // e.g. to only print one point every 10 years.
1622 if (granularity
== Dygraph
.MONTHLY
) {
1623 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1624 } else if (granularity
== Dygraph
.QUARTERLY
) {
1625 months
= [ 0, 3, 6, 9 ];
1626 } else if (granularity
== Dygraph
.BIANNUAL
) {
1628 } else if (granularity
== Dygraph
.ANNUAL
) {
1630 } else if (granularity
== Dygraph
.DECADAL
) {
1635 var start_year
= new Date(start_time
).getFullYear();
1636 var end_year
= new Date(end_time
).getFullYear();
1637 var zeropad
= Dygraph
.zeropad
;
1638 for (var i
= start_year
; i
<= end_year
; i
++) {
1639 if (i
% year_mod
!= 0) continue;
1640 for (var j
= 0; j
< months
.length
; j
++) {
1641 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1642 var t
= Date
.parse(date_str
);
1643 if (t
< start_time
|| t
> end_time
) continue;
1644 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1654 * Add ticks to the x-axis based on a date range.
1655 * @param {Number} startDate Start of the date window (millis since epoch)
1656 * @param {Number} endDate End of the date window (millis since epoch)
1657 * @return {Array.<Object>} Array of {label, value} tuples.
1660 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1662 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1663 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1664 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1671 return self
.GetXAxis(startDate
, endDate
, chosen
);
1673 // TODO(danvk): signal error.
1678 * Determine the number of significant figures in a Number up to the specified
1679 * precision. Note that there is no way to determine if a trailing '0' is
1680 * significant or not, so by convention we return 1 for all of the following
1681 * inputs: 1, 1.0, 1.00, 1.000 etc.
1682 * @param {Number} x The input value.
1683 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
1684 * Default and maximum allowed value is 13.
1685 * @return {Number} The number of significant figures which is >= 1.
1687 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
1688 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
1690 // Convert the number to it's exponential notation form and work backwards,
1691 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
1692 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
1693 // the JavaScript interpreter handle the low level bits of the Number for us.
1694 var s
= x
.toExponential(precision
);
1695 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
1697 for (var i
= ePos
- 1; i
>= 0; i
--) {
1699 // Got to the decimal place. We'll call this 1 digit of precision because
1700 // we can't know for sure how many trailing 0s are significant.
1702 } else if (s
[i
] != '0') {
1703 // Found the first non-zero digit. Return the number of characters
1704 // except for the '.'.
1705 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
1709 // Occurs if toExponential() doesn't return a string containing 'e', which
1710 // should never happen.
1715 * Add ticks when the x axis has numbers on it (instead of dates)
1716 * @param {Number} startDate Start of the date window (millis since epoch)
1717 * @param {Number} endDate End of the date window (millis since epoch)
1719 * @param {function} attribute accessor function.
1720 * @return {Array.<Object>} Array of {label, value} tuples.
1723 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1724 var attr
= function(k
) {
1725 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1726 return self
.attr_(k
);
1731 for (var i
= 0; i
< vals
.length
; i
++) {
1732 ticks
[i
] = {v
: vals
[i
]};
1736 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1737 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1738 // The first spacing greater than pixelsPerYLabel is what we use.
1739 // TODO(danvk): version that works on a log scale.
1740 if (attr("labelsKMG2")) {
1741 var mults
= [1, 2, 4, 8];
1743 var mults
= [1, 2, 5];
1745 var scale
, low_val
, high_val
, nTicks
;
1746 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1747 var pixelsPerTick
= attr('pixelsPerYLabel');
1748 for (var i
= -10; i
< 50; i
++) {
1749 if (attr("labelsKMG2")) {
1750 var base_scale
= Math
.pow(16, i
);
1752 var base_scale
= Math
.pow(10, i
);
1754 for (var j
= 0; j
< mults
.length
; j
++) {
1755 scale
= base_scale
* mults
[j
];
1756 low_val
= Math
.floor(minV
/ scale
) * scale
;
1757 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1758 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1759 var spacing
= self
.height_
/ nTicks
;
1760 // wish I could break out of both loops at once...
1761 if (spacing
> pixelsPerTick
) break;
1763 if (spacing
> pixelsPerTick
) break;
1766 // Construct the set of ticks.
1767 // Allow reverse y-axis if it's explicitly requested.
1768 if (low_val
> high_val
) scale
*= -1;
1769 for (var i
= 0; i
< nTicks
; i
++) {
1770 var tickV
= low_val
+ i
* scale
;
1771 ticks
[i
] = {v
: tickV
};
1775 // Add formatted labels to the ticks.
1778 if (attr("labelsKMB")) {
1780 k_labels
= [ "K", "M", "B", "T" ];
1782 if (attr("labelsKMG2")) {
1783 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1785 k_labels
= [ "k", "M", "G", "T" ];
1787 var formatter
= attr('yAxisLabelFormatter') ?
1788 attr('yAxisLabelFormatter') : attr('yValueFormatter');
1790 // Determine the number of decimal places needed for the labels below by
1791 // taking the maximum number of significant figures for any label. We must
1792 // take the max because we can't tell if trailing 0s are significant.
1794 for (var i
= 0; i
< ticks
.length
; i
++) {
1795 var tickV
= ticks
[i
].v
;
1796 numDigits
= Math
.max(Dygraph
.significantFigures(tickV
), numDigits
);
1799 for (var i
= 0; i
< ticks
.length
; i
++) {
1800 var tickV
= ticks
[i
].v
;
1801 var absTickV
= Math
.abs(tickV
);
1802 var label
= (formatter
!== undefined
) ?
1803 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
1804 if (k_labels
.length
> 0) {
1805 // Round up to an appropriate unit.
1807 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1808 if (absTickV
>= n
) {
1809 label
= (tickV
/ n
).toPrecision(numDigits
) + k_labels
[j
];
1814 ticks
[i
].label
= label
;
1816 return {ticks
: ticks
, numDigits
: numDigits
};
1819 // Computes the range of the data series (including confidence intervals).
1820 // series is either [ [x1, y1], [x2, y2], ... ] or
1821 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1822 // Returns [low, high]
1823 Dygraph
.prototype.extremeValues_
= function(series
) {
1824 var minY
= null, maxY
= null;
1826 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1828 // With custom bars, maxY is the max of the high values.
1829 for (var j
= 0; j
< series
.length
; j
++) {
1830 var y
= series
[j
][1][0];
1832 var low
= y
- series
[j
][1][1];
1833 var high
= y
+ series
[j
][1][2];
1834 if (low
> y
) low
= y
; // this can happen with custom bars,
1835 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1836 if (maxY
== null || high
> maxY
) {
1839 if (minY
== null || low
< minY
) {
1844 for (var j
= 0; j
< series
.length
; j
++) {
1845 var y
= series
[j
][1];
1846 if (y
=== null || isNaN(y
)) continue;
1847 if (maxY
== null || y
> maxY
) {
1850 if (minY
== null || y
< minY
) {
1856 return [minY
, maxY
];
1860 * This function is called once when the chart's data is changed or the options
1861 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1862 * idea is that values derived from the chart's data can be computed here,
1863 * rather than every time the chart is drawn. This includes things like the
1864 * number of axes, rolling averages, etc.
1866 Dygraph
.prototype.predraw_
= function() {
1867 // TODO(danvk): move more computations out of drawGraph_ and into here.
1868 this.computeYAxes_();
1870 // Create a new plotter.
1871 if (this.plotter_
) this.plotter_
.clear();
1872 this.plotter_
= new DygraphCanvasRenderer(this,
1873 this.hidden_
, this.layout_
,
1874 this.renderOptions_
);
1876 // The roller sits in the bottom left corner of the chart. We don't know where
1877 // this will be until the options are available, so it's positioned here.
1878 this.createRollInterface_();
1880 // Same thing applies for the labelsDiv. It's right edge should be flush with
1881 // the right edge of the charting area (which may not be the same as the right
1882 // edge of the div, if we have two y-axes.
1883 this.positionLabelsDiv_();
1885 // If the data or options have changed, then we'd better redraw.
1891 * Update the graph with new data. This method is called when the viewing area
1892 * has changed. If the underlying data or options have changed, predraw_ will
1893 * be called before drawGraph_ is called.
1896 Dygraph
.prototype.drawGraph_
= function() {
1897 var data
= this.rawData_
;
1899 // This is used to set the second parameter to drawCallback, below.
1900 var is_initial_draw
= this.is_initial_draw_
;
1901 this.is_initial_draw_
= false;
1903 var minY
= null, maxY
= null;
1904 this.layout_
.removeAllDatasets();
1906 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1908 // Loop over the fields (series). Go from the last to the first,
1909 // because if they're stacked that's how we accumulate the values.
1911 var cumulative_y
= []; // For stacked series.
1914 var extremes
= {}; // series name -> [low, high]
1916 // Loop over all fields and create datasets
1917 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1918 if (!this.visibility()[i
- 1]) continue;
1920 var seriesName
= this.attr_("labels")[i
];
1921 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1924 for (var j
= 0; j
< data
.length
; j
++) {
1925 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1926 var date
= data
[j
][0];
1927 series
.push([date
, data
[j
][i
]]);
1931 // TODO(danvk): move this into predraw_. It's insane to do it here.
1932 series
= this.rollingAverage(series
, this.rollPeriod_
);
1934 // Prune down to the desired range, if necessary (for zooming)
1935 // Because there can be lines going to points outside of the visible area,
1936 // we actually prune to visible points, plus one on either side.
1937 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1938 if (this.dateWindow_
) {
1939 var low
= this.dateWindow_
[0];
1940 var high
= this.dateWindow_
[1];
1942 // TODO(danvk): do binary search instead of linear search.
1943 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1944 var firstIdx
= null, lastIdx
= null;
1945 for (var k
= 0; k
< series
.length
; k
++) {
1946 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1949 if (series
[k
][0] <= high
) {
1953 if (firstIdx
=== null) firstIdx
= 0;
1954 if (firstIdx
> 0) firstIdx
--;
1955 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1956 if (lastIdx
< series
.length
- 1) lastIdx
++;
1957 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1958 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1959 pruned
.push(series
[k
]);
1963 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1966 var seriesExtremes
= this.extremeValues_(series
);
1969 for (var j
=0; j
<series
.length
; j
++) {
1970 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1973 } else if (this.attr_("stackedGraph")) {
1974 var l
= series
.length
;
1976 for (var j
= 0; j
< l
; j
++) {
1977 // If one data set has a NaN, let all subsequent stacked
1978 // sets inherit the NaN -- only start at 0 for the first set.
1979 var x
= series
[j
][0];
1980 if (cumulative_y
[x
] === undefined
) {
1981 cumulative_y
[x
] = 0;
1984 actual_y
= series
[j
][1];
1985 cumulative_y
[x
] += actual_y
;
1987 series
[j
] = [x
, cumulative_y
[x
]]
1989 if (cumulative_y
[x
] > seriesExtremes
[1]) {
1990 seriesExtremes
[1] = cumulative_y
[x
];
1992 if (cumulative_y
[x
] < seriesExtremes
[0]) {
1993 seriesExtremes
[0] = cumulative_y
[x
];
1997 extremes
[seriesName
] = seriesExtremes
;
1999 datasets
[i
] = series
;
2002 for (var i
= 1; i
< datasets
.length
; i
++) {
2003 if (!this.visibility()[i
- 1]) continue;
2004 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2007 this.computeYAxisRanges_(extremes
);
2008 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2009 seriesToAxisMap
: this.seriesToAxisMap_
2014 // Tell PlotKit to use this new data and render itself
2015 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2016 this.layout_
.evaluateWithError();
2017 this.plotter_
.clear();
2018 this.plotter_
.render();
2019 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2020 this.canvas_
.height
);
2022 if (this.attr_("drawCallback") !== null) {
2023 this.attr_("drawCallback")(this, is_initial_draw
);
2028 * Determine properties of the y-axes which are independent of the data
2029 * currently being displayed. This includes things like the number of axes and
2030 * the style of the axes. It does not include the range of each axis and its
2032 * This fills in this.axes_ and this.seriesToAxisMap_.
2033 * axes_ = [ { options } ]
2034 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2035 * indices are into the axes_ array.
2037 Dygraph
.prototype.computeYAxes_
= function() {
2038 this.axes_
= [{}]; // always have at least one y-axis.
2039 this.seriesToAxisMap_
= {};
2041 // Get a list of series names.
2042 var labels
= this.attr_("labels");
2044 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2046 // all options which could be applied per-axis:
2054 'axisLabelFontSize',
2058 // Copy global axis options over to the first axis.
2059 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2060 var k
= axisOptions
[i
];
2061 var v
= this.attr_(k
);
2062 if (v
) this.axes_
[0][k
] = v
;
2065 // Go through once and add all the axes.
2066 for (var seriesName
in series
) {
2067 if (!series
.hasOwnProperty(seriesName
)) continue;
2068 var axis
= this.attr_("axis", seriesName
);
2070 this.seriesToAxisMap_
[seriesName
] = 0;
2073 if (typeof(axis
) == 'object') {
2074 // Add a new axis, making a copy of its per-axis options.
2076 Dygraph
.update(opts
, this.axes_
[0]);
2077 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2078 Dygraph
.update(opts
, axis
);
2079 this.axes_
.push(opts
);
2080 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2084 // Go through one more time and assign series to an axis defined by another
2085 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2086 for (var seriesName
in series
) {
2087 if (!series
.hasOwnProperty(seriesName
)) continue;
2088 var axis
= this.attr_("axis", seriesName
);
2089 if (typeof(axis
) == 'string') {
2090 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2091 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2092 "series " + axis
+ ", which does not define its own axis.");
2095 var idx
= this.seriesToAxisMap_
[axis
];
2096 this.seriesToAxisMap_
[seriesName
] = idx
;
2100 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2101 // this last so that hiding the first series doesn't destroy the axis
2102 // properties of the primary axis.
2103 var seriesToAxisFiltered
= {};
2104 var vis
= this.visibility();
2105 for (var i
= 1; i
< labels
.length
; i
++) {
2107 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2109 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2113 * Returns the number of y-axes on the chart.
2114 * @return {Number} the number of axes.
2116 Dygraph
.prototype.numAxes
= function() {
2118 for (var series
in this.seriesToAxisMap_
) {
2119 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2120 var idx
= this.seriesToAxisMap_
[series
];
2121 if (idx
> last_axis
) last_axis
= idx
;
2123 return 1 + last_axis
;
2127 * Determine the value range and tick marks for each axis.
2128 * @param {Object} extremes A mapping from seriesName -> [low, high]
2129 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2131 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2132 // Build a map from axis number -> [list of series names]
2133 var seriesForAxis
= [];
2134 for (var series
in this.seriesToAxisMap_
) {
2135 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2136 var idx
= this.seriesToAxisMap_
[series
];
2137 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2138 seriesForAxis
[idx
].push(series
);
2141 // Compute extreme values, a span and tick marks for each axis.
2142 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2143 var axis
= this.axes_
[i
];
2144 if (axis
.valueWindow
) {
2145 // This is only set if the user has zoomed on the y-axis. It is never set
2146 // by a user. It takes precedence over axis.valueRange because, if you set
2147 // valueRange, you'd still expect to be able to pan.
2148 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2149 } else if (axis
.valueRange
) {
2150 // This is a user-set value range for this axis.
2151 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2153 // Calculate the extremes of extremes.
2154 var series
= seriesForAxis
[i
];
2155 var minY
= Infinity
; // extremes[series[0]][0];
2156 var maxY
= -Infinity
; // extremes[series[0]][1];
2157 for (var j
= 0; j
< series
.length
; j
++) {
2158 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2159 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2161 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2163 // Add some padding and round up to an integer to be human-friendly.
2164 var span
= maxY
- minY
;
2165 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2166 if (span
== 0) { span
= maxY
; }
2167 var maxAxisY
= maxY
+ 0.1 * span
;
2168 var minAxisY
= minY
- 0.1 * span
;
2170 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2171 if (!this.attr_("avoidMinZero")) {
2172 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2173 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2176 if (this.attr_("includeZero")) {
2177 if (maxY
< 0) maxAxisY
= 0;
2178 if (minY
> 0) minAxisY
= 0;
2181 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2184 // Add ticks. By default, all axes inherit the tick positions of the
2185 // primary axis. However, if an axis is specifically marked as having
2186 // independent ticks, then that is permissible as well.
2187 if (i
== 0 || axis
.independentTicks
) {
2189 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2190 axis
.computedValueRange
[1],
2193 axis
.ticks
= ret
.ticks
;
2194 this.numDigits_
= ret
.numDigits
;
2196 var p_axis
= this.axes_
[0];
2197 var p_ticks
= p_axis
.ticks
;
2198 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2199 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2200 var tick_values
= [];
2201 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2202 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2203 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2204 tick_values
.push(y_val
);
2208 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2209 axis
.computedValueRange
[1],
2210 this, axis
, tick_values
);
2211 axis
.ticks
= ret
.ticks
;
2212 this.numDigits_
= ret
.numDigits
;
2218 * Calculates the rolling average of a data set.
2219 * If originalData is [label, val], rolls the average of those.
2220 * If originalData is [label, [, it's interpreted as [value, stddev]
2221 * and the roll is returned in the same form, with appropriately reduced
2222 * stddev for each value.
2223 * Note that this is where fractional input (i.e. '5/10') is converted into
2225 * @param {Array} originalData The data in the appropriate format (see above)
2226 * @param {Number} rollPeriod The number of points over which to average the
2229 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2230 if (originalData
.length
< 2)
2231 return originalData
;
2232 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2233 var rollingData
= [];
2234 var sigma
= this.attr_("sigma");
2236 if (this.fractions_
) {
2238 var den
= 0; // numerator/denominator
2240 for (var i
= 0; i
< originalData
.length
; i
++) {
2241 num
+= originalData
[i
][1][0];
2242 den
+= originalData
[i
][1][1];
2243 if (i
- rollPeriod
>= 0) {
2244 num
-= originalData
[i
- rollPeriod
][1][0];
2245 den
-= originalData
[i
- rollPeriod
][1][1];
2248 var date
= originalData
[i
][0];
2249 var value
= den
? num
/ den
: 0.0;
2250 if (this.attr_("errorBars")) {
2251 if (this.wilsonInterval_
) {
2252 // For more details on this confidence interval, see:
2253 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2255 var p
= value
< 0 ? 0 : value
, n
= den
;
2256 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2257 var denom
= 1 + sigma
* sigma
/ den
;
2258 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2259 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2260 rollingData
[i
] = [date
,
2261 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2263 rollingData
[i
] = [date
, [0, 0, 0]];
2266 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2267 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2270 rollingData
[i
] = [date
, mult
* value
];
2273 } else if (this.attr_("customBars")) {
2278 for (var i
= 0; i
< originalData
.length
; i
++) {
2279 var data
= originalData
[i
][1];
2281 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2283 if (y
!= null && !isNaN(y
)) {
2289 if (i
- rollPeriod
>= 0) {
2290 var prev
= originalData
[i
- rollPeriod
];
2291 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2298 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2299 1.0 * (mid
- low
) / count
,
2300 1.0 * (high
- mid
) / count
]];
2303 // Calculate the rolling average for the first rollPeriod - 1 points where
2304 // there is not enough data to roll over the full number of points
2305 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2306 if (!this.attr_("errorBars")){
2307 if (rollPeriod
== 1) {
2308 return originalData
;
2311 for (var i
= 0; i
< originalData
.length
; i
++) {
2314 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2315 var y
= originalData
[j
][1];
2316 if (y
== null || isNaN(y
)) continue;
2318 sum
+= originalData
[j
][1];
2321 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2323 rollingData
[i
] = [originalData
[i
][0], null];
2328 for (var i
= 0; i
< originalData
.length
; i
++) {
2332 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2333 var y
= originalData
[j
][1][0];
2334 if (y
== null || isNaN(y
)) continue;
2336 sum
+= originalData
[j
][1][0];
2337 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2340 var stddev
= Math
.sqrt(variance
) / num_ok
;
2341 rollingData
[i
] = [originalData
[i
][0],
2342 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2344 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2354 * Parses a date, returning the number of milliseconds since epoch. This can be
2355 * passed in as an xValueParser in the Dygraph constructor.
2356 * TODO(danvk): enumerate formats that this understands.
2357 * @param {String} A date in YYYYMMDD format.
2358 * @return {Number} Milliseconds since epoch.
2361 Dygraph
.dateParser
= function(dateStr
, self
) {
2364 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2365 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2366 while (dateStrSlashed
.search("-") != -1) {
2367 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2369 d
= Date
.parse(dateStrSlashed
);
2370 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2371 // TODO(danvk): remove support for this format. It's confusing.
2372 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2373 + "/" + dateStr
.substr(6,2);
2374 d
= Date
.parse(dateStrSlashed
);
2376 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2377 // "2009/07/12 12:34:56"
2378 d
= Date
.parse(dateStr
);
2381 if (!d
|| isNaN(d
)) {
2382 self
.error("Couldn't parse " + dateStr
+ " as a date");
2388 * Detects the type of the str (date or numeric) and sets the various
2389 * formatting attributes in this.attrs_ based on this type.
2390 * @param {String} str An x value.
2393 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2395 if (str
.indexOf('-') >= 0 ||
2396 str
.indexOf('/') >= 0 ||
2397 isNaN(parseFloat(str
))) {
2399 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2400 // TODO(danvk): remove support for this format.
2405 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2406 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2407 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2408 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2410 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2411 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2412 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2413 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2418 * Parses a string in a special csv format. We expect a csv file where each
2419 * line is a date point, and the first field in each line is the date string.
2420 * We also expect that all remaining fields represent series.
2421 * if the errorBars attribute is set, then interpret the fields as:
2422 * date, series1, stddev1, series2, stddev2, ...
2423 * @param {Array.<Object>} data See above.
2426 * @return Array.<Object> An array with one entry for each row. These entries
2427 * are an array of cells in that row. The first entry is the parsed x-value for
2428 * the row. The second, third, etc. are the y-values. These can take on one of
2429 * three forms, depending on the CSV and constructor parameters:
2431 * 2. [ value, stddev ]
2432 * 3. [ low value, center value, high value ]
2434 Dygraph
.prototype.parseCSV_
= function(data
) {
2436 var lines
= data
.split("\n");
2438 // Use the default delimiter or fall back to a tab if that makes sense.
2439 var delim
= this.attr_('delimiter');
2440 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2445 if (this.labelsFromCSV_
) {
2447 this.attrs_
.labels
= lines
[0].split(delim
);
2450 // Parse the x as a float or return null if it's not a number.
2451 var parseFloatOrNull
= function(x
) {
2452 var val
= parseFloat(x
);
2453 // isFinite() returns false for NaN and +/-Infinity
.
2454 return isFinite(val
) ? val
: null;
2458 var defaultParserSet
= false; // attempt to auto-detect x value type
2459 var expectedCols
= this.attr_("labels").length
;
2460 var outOfOrder
= false;
2461 for (var i
= start
; i
< lines
.length
; i
++) {
2462 var line
= lines
[i
];
2463 if (line
.length
== 0) continue; // skip blank lines
2464 if (line
[0] == '#') continue; // skip comment lines
2465 var inFields
= line
.split(delim
);
2466 if (inFields
.length
< 2) continue;
2469 if (!defaultParserSet
) {
2470 this.detectTypeFromString_(inFields
[0]);
2471 xParser
= this.attr_("xValueParser");
2472 defaultParserSet
= true;
2474 fields
[0] = xParser(inFields
[0], this);
2476 // If fractions are expected, parse the numbers as "A/B
"
2477 if (this.fractions_) {
2478 for (var j = 1; j < inFields.length; j++) {
2479 // TODO(danvk): figure out an appropriate way to flag parse errors.
2480 var vals = inFields[j].split("/");
2481 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2483 } else if (this.attr_("errorBars
")) {
2484 // If there are error bars, values are (value, stddev) pairs
2485 for (var j = 1; j < inFields.length; j += 2)
2486 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2487 parseFloatOrNull(inFields[j + 1])];
2488 } else if (this.attr_("customBars
")) {
2489 // Bars are a low;center;high tuple
2490 for (var j = 1; j < inFields.length; j++) {
2491 var vals = inFields[j].split(";");
2492 fields[j] = [ parseFloatOrNull(vals[0]),
2493 parseFloatOrNull(vals[1]),
2494 parseFloatOrNull(vals[2]) ];
2497 // Values are just numbers
2498 for (var j = 1; j < inFields.length; j++) {
2499 fields[j] = parseFloatOrNull(inFields[j]);
2502 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2507 if (fields.length != expectedCols) {
2508 this.error("Number of columns
in line
" + i + " (" + fields.length +
2509 ") does not agree
with number of
labels (" + expectedCols +
2515 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2516 ret.sort(function(a,b) { return a[0] - b[0] });
2523 * The user has provided their data as a pre-packaged JS array. If the x values
2524 * are numeric, this is the same as dygraphs' internal format. If the x values
2525 * are dates, we need to convert them from Date objects to ms since epoch.
2526 * @param {Array.<Object>} data
2527 * @return {Array.<Object>} data with numeric x values.
2529 Dygraph.prototype.parseArray_ = function(data) {
2530 // Peek at the first x value to see if it's numeric.
2531 if (data.length == 0) {
2532 this.error("Can
't plot empty data set");
2535 if (data[0].length == 0) {
2536 this.error("Data set cannot contain an empty row");
2540 if (this.attr_("labels") == null) {
2541 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2542 "in the options parameter");
2543 this.attrs_.labels = [ "X" ];
2544 for (var i = 1; i < data[0].length; i++) {
2545 this.attrs_.labels.push("Y" + i);
2549 if (Dygraph.isDateLike(data[0][0])) {
2550 // Some intelligent defaults for a date x-axis.
2551 this.attrs_.xValueFormatter = Dygraph.dateString_;
2552 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2553 this.attrs_.xTicker = Dygraph.dateTicker;
2555 // Assume they're all dates
.
2556 var parsedData
= Dygraph
.clone(data
);
2557 for (var i
= 0; i
< data
.length
; i
++) {
2558 if (parsedData
[i
].length
== 0) {
2559 this.error("Row " + (1 + i
) + " of data is empty");
2562 if (parsedData
[i
][0] == null
2563 || typeof(parsedData
[i
][0].getTime
) != 'function'
2564 || isNaN(parsedData
[i
][0].getTime())) {
2565 this.error("x value in row " + (1 + i
) + " is not a Date");
2568 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2572 // Some intelligent defaults for a numeric x-axis.
2573 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2574 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2580 * Parses a DataTable object from gviz.
2581 * The data is expected to have a first column that is either a date or a
2582 * number. All subsequent columns must be numbers. If there is a clear mismatch
2583 * between this.xValueParser_ and the type of the first column, it will be
2584 * fixed. Fills out rawData_.
2585 * @param {Array.<Object>} data See above.
2588 Dygraph
.prototype.parseDataTable_
= function(data
) {
2589 var cols
= data
.getNumberOfColumns();
2590 var rows
= data
.getNumberOfRows();
2592 var indepType
= data
.getColumnType(0);
2593 if (indepType
== 'date' || indepType
== 'datetime') {
2594 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2595 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2596 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2597 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2598 } else if (indepType
== 'number') {
2599 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2600 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2601 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2602 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2604 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2605 "column 1 of DataTable input (Got '" + indepType
+ "')");
2609 // Array of the column indices which contain data (and not annotations).
2611 var annotationCols
= {}; // data index -> [annotation cols]
2612 var hasAnnotations
= false;
2613 for (var i
= 1; i
< cols
; i
++) {
2614 var type
= data
.getColumnType(i
);
2615 if (type
== 'number') {
2617 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2618 // This is OK -- it's an annotation column.
2619 var dataIdx
= colIdx
[colIdx
.length
- 1];
2620 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2621 annotationCols
[dataIdx
] = [i
];
2623 annotationCols
[dataIdx
].push(i
);
2625 hasAnnotations
= true;
2627 this.error("Only 'number' is supported as a dependent type with Gviz." +
2628 " 'string' is only supported if displayAnnotations is true");
2632 // Read column labels
2633 // TODO(danvk): add support back for errorBars
2634 var labels
= [data
.getColumnLabel(0)];
2635 for (var i
= 0; i
< colIdx
.length
; i
++) {
2636 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2637 if (this.attr_("errorBars")) i
+= 1;
2639 this.attrs_
.labels
= labels
;
2640 cols
= labels
.length
;
2643 var outOfOrder
= false;
2644 var annotations
= [];
2645 for (var i
= 0; i
< rows
; i
++) {
2647 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2648 data
.getValue(i
, 0) === null) {
2649 this.warn("Ignoring row " + i
+
2650 " of DataTable because of undefined or null first column.");
2654 if (indepType
== 'date' || indepType
== 'datetime') {
2655 row
.push(data
.getValue(i
, 0).getTime());
2657 row
.push(data
.getValue(i
, 0));
2659 if (!this.attr_("errorBars")) {
2660 for (var j
= 0; j
< colIdx
.length
; j
++) {
2661 var col
= colIdx
[j
];
2662 row
.push(data
.getValue(i
, col
));
2663 if (hasAnnotations
&&
2664 annotationCols
.hasOwnProperty(col
) &&
2665 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2667 ann
.series
= data
.getColumnLabel(col
);
2669 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2671 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2672 if (k
) ann
.text
+= "\n";
2673 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2675 annotations
.push(ann
);
2679 for (var j
= 0; j
< cols
- 1; j
++) {
2680 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2683 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2687 // Strip out infinities, which give dygraphs problems later on.
2688 for (var j
= 0; j
< row
.length
; j
++) {
2689 if (!isFinite(row
[j
])) row
[j
] = null;
2695 this.warn("DataTable is out of order; order it correctly to speed loading.");
2696 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2698 this.rawData_
= ret
;
2700 if (annotations
.length
> 0) {
2701 this.setAnnotations(annotations
, true);
2705 // These functions are all based on MochiKit.
2706 Dygraph
.update
= function (self
, o
) {
2707 if (typeof(o
) != 'undefined' && o
!== null) {
2709 if (o
.hasOwnProperty(k
)) {
2717 Dygraph
.isArrayLike
= function (o
) {
2718 var typ
= typeof(o
);
2720 (typ
!= 'object' && !(typ
== 'function' &&
2721 typeof(o
.item
) == 'function')) ||
2723 typeof(o
.length
) != 'number' ||
2731 Dygraph
.isDateLike
= function (o
) {
2732 if (typeof(o
) != "object" || o
=== null ||
2733 typeof(o
.getTime
) != 'function') {
2739 Dygraph
.clone
= function(o
) {
2740 // TODO(danvk): figure out how MochiKit's version works
2742 for (var i
= 0; i
< o
.length
; i
++) {
2743 if (Dygraph
.isArrayLike(o
[i
])) {
2744 r
.push(Dygraph
.clone(o
[i
]));
2754 * Get the CSV data. If it's in a function, call that function. If it's in a
2755 * file, do an XMLHttpRequest to get it.
2758 Dygraph
.prototype.start_
= function() {
2759 if (typeof this.file_
== 'function') {
2760 // CSV string. Pretend we got it via XHR.
2761 this.loadedEvent_(this.file_());
2762 } else if (Dygraph
.isArrayLike(this.file_
)) {
2763 this.rawData_
= this.parseArray_(this.file_
);
2765 } else if (typeof this.file_
== 'object' &&
2766 typeof this.file_
.getColumnRange
== 'function') {
2767 // must be a DataTable from gviz.
2768 this.parseDataTable_(this.file_
);
2770 } else if (typeof this.file_
== 'string') {
2771 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2772 if (this.file_
.indexOf('\n') >= 0) {
2773 this.loadedEvent_(this.file_
);
2775 var req
= new XMLHttpRequest();
2777 req
.onreadystatechange
= function () {
2778 if (req
.readyState
== 4) {
2779 if (req
.status
== 200) {
2780 caller
.loadedEvent_(req
.responseText
);
2785 req
.open("GET", this.file_
, true);
2789 this.error("Unknown data format: " + (typeof this.file_
));
2794 * Changes various properties of the graph. These can include:
2796 * <li>file: changes the source data for the graph</li>
2797 * <li>errorBars: changes whether the data contains stddev</li>
2799 * @param {Object} attrs The new properties and values
2801 Dygraph
.prototype.updateOptions
= function(attrs
) {
2802 // TODO(danvk): this is a mess. Rethink this function.
2803 if ('rollPeriod' in attrs
) {
2804 this.rollPeriod_
= attrs
.rollPeriod
;
2806 if ('dateWindow' in attrs
) {
2807 this.dateWindow_
= attrs
.dateWindow
;
2810 // TODO(danvk): validate per-series options.
2815 // highlightCircleSize
2817 Dygraph
.update(this.user_attrs_
, attrs
);
2818 Dygraph
.update(this.renderOptions_
, attrs
);
2820 this.labelsFromCSV_
= (this.attr_("labels") == null);
2822 // TODO(danvk): this doesn't match the constructor logic
2823 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2824 if (attrs
['file']) {
2825 this.file_
= attrs
['file'];
2833 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2834 * containing div (which has presumably changed size since the dygraph was
2835 * instantiated. If the width/height are specified, the div will be resized.
2837 * This is far more efficient than destroying and re-instantiating a
2838 * Dygraph, since it doesn't have to reparse the underlying data.
2840 * @param {Number} width Width (in pixels)
2841 * @param {Number} height Height (in pixels)
2843 Dygraph
.prototype.resize
= function(width
, height
) {
2844 if (this.resize_lock
) {
2847 this.resize_lock
= true;
2849 if ((width
=== null) != (height
=== null)) {
2850 this.warn("Dygraph.resize() should be called with zero parameters or " +
2851 "two non-NULL parameters. Pretending it was zero.");
2852 width
= height
= null;
2855 // TODO(danvk): there should be a clear() method.
2856 this.maindiv_
.innerHTML
= "";
2857 this.attrs_
.labelsDiv
= null;
2860 this.maindiv_
.style
.width
= width
+ "px";
2861 this.maindiv_
.style
.height
= height
+ "px";
2862 this.width_
= width
;
2863 this.height_
= height
;
2865 this.width_
= this.maindiv_
.offsetWidth
;
2866 this.height_
= this.maindiv_
.offsetHeight
;
2869 this.createInterface_();
2872 this.resize_lock
= false;
2876 * Adjusts the number of points in the rolling average. Updates the graph to
2877 * reflect the new averaging period.
2878 * @param {Number} length Number of points over which to average the data.
2880 Dygraph
.prototype.adjustRoll
= function(length
) {
2881 this.rollPeriod_
= length
;
2886 * Returns a boolean array of visibility statuses.
2888 Dygraph
.prototype.visibility
= function() {
2889 // Do lazy-initialization, so that this happens after we know the number of
2891 if (!this.attr_("visibility")) {
2892 this.attrs_
["visibility"] = [];
2894 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2895 this.attr_("visibility").push(true);
2897 return this.attr_("visibility");
2901 * Changes the visiblity of a series.
2903 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2904 var x
= this.visibility();
2905 if (num
< 0 || num
>= x
.length
) {
2906 this.warn("invalid series number in setVisibility: " + num
);
2914 * Update the list of annotations and redraw the chart.
2916 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2917 // Only add the annotation CSS rule once we know it will be used.
2918 Dygraph
.addAnnotationRule();
2919 this.annotations_
= ann
;
2920 this.layout_
.setAnnotations(this.annotations_
);
2921 if (!suppressDraw
) {
2927 * Return the list of annotations.
2929 Dygraph
.prototype.annotations
= function() {
2930 return this.annotations_
;
2934 * Get the index of a series (column) given its name. The first column is the
2935 * x-axis, so the data series start with index 1.
2937 Dygraph
.prototype.indexFromSetName
= function(name
) {
2938 var labels
= this.attr_("labels");
2939 for (var i
= 0; i
< labels
.length
; i
++) {
2940 if (labels
[i
] == name
) return i
;
2945 Dygraph
.addAnnotationRule
= function() {
2946 if (Dygraph
.addedAnnotationCSS
) return;
2948 var rule
= "border: 1px solid black; " +
2949 "background-color: white; " +
2950 "text-align: center;";
2952 var styleSheetElement
= document
.createElement("style");
2953 styleSheetElement
.type
= "text/css";
2954 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2956 // Find the first style sheet that we can access.
2957 // We may not add a rule to a style sheet from another domain for security
2958 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
2959 // adds its own style sheets from google.com.
2960 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
2961 if (document
.styleSheets
[i
].disabled
) continue;
2962 var mysheet
= document
.styleSheets
[i
];
2964 if (mysheet
.insertRule
) { // Firefox
2965 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2966 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2967 } else if (mysheet
.addRule
) { // IE
2968 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2970 Dygraph
.addedAnnotationCSS
= true;
2973 // Was likely a security exception.
2977 this.warn("Unable to add default annotation CSS rule; display may be off.");
2981 * Create a new canvas element. This is more complex than a simple
2982 * document.createElement("canvas") because of IE and excanvas.
2984 Dygraph
.createCanvas
= function() {
2985 var canvas
= document
.createElement("canvas");
2987 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2988 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2989 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2997 * A wrapper around Dygraph that implements the gviz API.
2998 * @param {Object} container The DOM object the visualization should live in.
3000 Dygraph
.GVizChart
= function(container
) {
3001 this.container
= container
;
3004 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3005 // Clear out any existing dygraph.
3006 // TODO(danvk): would it make more sense to simply redraw using the current
3007 // date_graph object?
3008 this.container
.innerHTML
= '';
3009 if (typeof(this.date_graph
) != 'undefined') {
3010 this.date_graph
.destroy();
3013 this.date_graph
= new Dygraph(this.container
, data
, options
);
3017 * Google charts compatible setSelection
3018 * Only row selection is supported, all points in the row will be highlighted
3019 * @param {Array} array of the selected cells
3022 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3024 if (selection_array
.length
) {
3025 row
= selection_array
[0].row
;
3027 this.date_graph
.setSelection(row
);
3031 * Google charts compatible getSelection implementation
3032 * @return {Array} array of the selected cells
3035 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3038 var row
= this.date_graph
.getSelection();
3040 if (row
< 0) return selection
;
3043 for (var i
in this.date_graph
.layout_
.datasets
) {
3044 selection
.push({row
: row
, column
: col
});
3051 // Older pages may still use this name.
3052 DateGraph
= Dygraph
;