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__();
77 * Number formatting function which mimicks the behavior of %g in printf, i.e.
78 * either exponential or fixed format (without trailing 0s) is used depending on
79 * the length of the generated string. The advantage of this format is that
80 * there is a predictable upper bound on the resulting string length,
81 * significant figures are not dropped, and normal numbers are not displayed in
82 * exponential notation.
84 * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g.
85 * It creates strings which are too long for absolute values between 10^-4 and
86 * 10^-6. See tests/number-format.html for output examples.
88 * @param {Number} x The number to format
89 * @param {Number} opt_precision The precision to use, default 2.
90 * @return {String} A string formatted like %g in printf. The max generated
91 * string length should be precision + 6 (e.g 1.123e+300).
93 Dygraph
.defaultFormat
= function(x
, opt_precision
) {
94 // Avoid invalid precision values; [1, 21] is the valid range.
95 var p
= Math
.min(Math
.max(1, opt_precision
|| 2), 21);
97 // This is deceptively simple. The actual algorithm comes from:
99 // Max allowed length = p + 4
100 // where 4 comes from 'e+n' and '.'.
102 // Length of fixed format = 2 + y + p
103 // where 2 comes from '0.' and y = # of leading zeroes.
105 // Equating the two and solving for y yields y = 2, or 0.00xxxx which is
108 // Since the behavior of toPrecision() is identical for larger numbers, we
109 // don't have to worry about the other bound.
111 // Finally, the argument for toExponential() is the number of trailing digits,
112 // so we take off 1 for the value before the '.'.
113 return (Math
.abs(x
) < 1.0e-3 && x
!= 0.0) ?
114 x
.toExponential(p
- 1) : x
.toPrecision(p
);
117 // Various default values
118 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
119 Dygraph
.DEFAULT_WIDTH
= 480;
120 Dygraph
.DEFAULT_HEIGHT
= 320;
121 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
124 // Default attribute values.
125 Dygraph
.DEFAULT_ATTRS
= {
126 highlightCircleSize
: 3,
132 // TODO(danvk): move defaults from createStatusMessage_ here.
134 labelsSeparateLines
: false,
135 labelsShowZeroValues
: true,
138 showLabelsOnHighlight
: true,
140 yValueFormatter
: Dygraph
.defaultFormat
,
145 axisLabelFontSize
: 14,
148 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
152 xValueFormatter
: Dygraph
.dateString_
,
153 xValueParser
: Dygraph
.dateParser
,
154 xTicker
: Dygraph
.dateTicker
,
162 wilsonInterval
: true, // only relevant if fractions is true
166 connectSeparatedPoints
: false,
169 hideOverlayOnMouseOut
: true,
174 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
177 // Various logging levels.
183 // Directions for panning and zooming. Use bit operations when combined
184 // values are possible.
185 Dygraph
.HORIZONTAL
= 1;
186 Dygraph
.VERTICAL
= 2;
188 // Used for initializing annotation CSS rules only once.
189 Dygraph
.addedAnnotationCSS
= false;
191 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
192 // Labels is no longer a constructor parameter, since it's typically set
193 // directly from the data source. It also conains a name for the x-axis,
194 // which the previous constructor form did not.
195 if (labels
!= null) {
196 var new_labels
= ["Date"];
197 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
198 Dygraph
.update(attrs
, { 'labels': new_labels
});
200 this.__init__(div
, file
, attrs
);
204 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
205 * and context <canvas> inside of it. See the constructor for details
207 * @param {Element} div the Element to render the graph into.
208 * @param {String | Function} file Source data
209 * @param {Object} attrs Miscellaneous other options
212 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
213 // Hack for IE: if we're using excanvas and the document hasn't finished
214 // loading yet (and hence may not have initialized whatever it needs to
215 // initialize), then keep calling this routine periodically until it has.
216 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
217 typeof(G_vmlCanvasManager
) != 'undefined' &&
218 document
.readyState
!= 'complete') {
220 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
223 // Support two-argument constructor
224 if (attrs
== null) { attrs
= {}; }
226 // Copy the important bits into the object
227 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
230 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
231 this.previousVerticalX_
= -1;
232 this.fractions_
= attrs
.fractions
|| false;
233 this.dateWindow_
= attrs
.dateWindow
|| null;
235 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
236 this.is_initial_draw_
= true;
237 this.annotations_
= [];
239 // Number of digits to use when labeling the x (if numeric) and y axis
241 this.numXDigits_
= 2;
242 this.numYDigits_
= 2;
244 // When labeling x (if numeric) or y values in the legend, there are
245 // numDigits + numExtraDigits of precision used. For axes labels with N
246 // digits of precision, the data should be displayed with at least N+1 digits
247 // of precision. The reason for this is to divide each interval between
248 // successive ticks into tenths (for 1) or hundredths (for 2), etc. For
249 // example, if the labels are [0, 1, 2], we want data to be displayed as
251 this.numExtraDigits_
= 1;
253 // Clear the div. This ensure that, if multiple dygraphs are passed the same
254 // div, then only one will be drawn.
257 // If the div isn't already sized then inherit from our attrs or
258 // give it a default size.
259 if (div
.style
.width
== '') {
260 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
262 if (div
.style
.height
== '') {
263 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
265 this.width_
= parseInt(div
.style
.width
, 10);
266 this.height_
= parseInt(div
.style
.height
, 10);
267 // The div might have been specified as percent of the current window size,
268 // convert that to an appropriate number of pixels.
269 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
270 this.width_
= div
.offsetWidth
;
272 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
273 this.height_
= div
.offsetHeight
;
276 if (this.width_
== 0) {
277 this.error("dygraph has zero width. Please specify a width in pixels.");
279 if (this.height_
== 0) {
280 this.error("dygraph has zero height. Please specify a height in pixels.");
283 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
284 if (attrs
['stackedGraph']) {
285 attrs
['fillGraph'] = true;
286 // TODO(nikhilk): Add any other stackedGraph checks here.
289 // Dygraphs has many options, some of which interact with one another.
290 // To keep track of everything, we maintain two sets of options:
292 // this.user_attrs_ only options explicitly set by the user.
293 // this.attrs_ defaults, options derived from user_attrs_, data.
295 // Options are then accessed this.attr_('attr'), which first looks at
296 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
297 // defaults without overriding behavior that the user specifically asks for.
298 this.user_attrs_
= {};
299 Dygraph
.update(this.user_attrs_
, attrs
);
302 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
304 this.boundaryIds_
= [];
306 // Make a note of whether labels will be pulled from the CSV file.
307 this.labelsFromCSV_
= (this.attr_("labels") == null);
309 // Create the containing DIV and other interactive elements
310 this.createInterface_();
315 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
317 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
318 this.user_attrs_
[seriesName
] != null &&
319 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
320 return this.user_attrs_
[seriesName
][name
];
321 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
322 return this.user_attrs_
[name
];
323 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
324 return this.attrs_
[name
];
330 // TODO(danvk): any way I can get the line numbers to be this.warn call?
331 Dygraph
.prototype.log
= function(severity
, message
) {
332 if (typeof(console
) != 'undefined') {
335 console
.debug('dygraphs: ' + message
);
338 console
.info('dygraphs: ' + message
);
340 case Dygraph
.WARNING
:
341 console
.warn('dygraphs: ' + message
);
344 console
.error('dygraphs: ' + message
);
349 Dygraph
.prototype.info
= function(message
) {
350 this.log(Dygraph
.INFO
, message
);
352 Dygraph
.prototype.warn
= function(message
) {
353 this.log(Dygraph
.WARNING
, message
);
355 Dygraph
.prototype.error
= function(message
) {
356 this.log(Dygraph
.ERROR
, message
);
360 * Returns the current rolling period, as set by the user or an option.
361 * @return {Number} The number of points in the rolling window
363 Dygraph
.prototype.rollPeriod
= function() {
364 return this.rollPeriod_
;
368 * Returns the currently-visible x-range. This can be affected by zooming,
369 * panning or a call to updateOptions.
370 * Returns a two-element array: [left, right].
371 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
373 Dygraph
.prototype.xAxisRange
= function() {
374 if (this.dateWindow_
) return this.dateWindow_
;
376 // The entire chart is visible.
377 var left
= this.rawData_
[0][0];
378 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
379 return [left
, right
];
383 * Returns the currently-visible y-range for an axis. This can be affected by
384 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
385 * called with no arguments, returns the range of the first axis.
386 * Returns a two-element array: [bottom, top].
388 Dygraph
.prototype.yAxisRange
= function(idx
) {
389 if (typeof(idx
) == "undefined") idx
= 0;
390 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
391 return [ this.axes_
[idx
].computedValueRange
[0],
392 this.axes_
[idx
].computedValueRange
[1] ];
396 * Returns the currently-visible y-ranges for each axis. This can be affected by
397 * zooming, panning, calls to updateOptions, etc.
398 * Returns an array of [bottom, top] pairs, one for each y-axis.
400 Dygraph
.prototype.yAxisRanges
= function() {
402 for (var i
= 0; i
< this.axes_
.length
; i
++) {
403 ret
.push(this.yAxisRange(i
));
408 // TODO(danvk): use these functions throughout dygraphs.
410 * Convert from data coordinates to canvas/div X/Y coordinates.
411 * If specified, do this conversion for the coordinate system of a particular
412 * axis. Uses the first axis by default.
413 * Returns a two-element array: [X, Y]
415 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
416 var ret
= [null, null];
417 var area
= this.plotter_
.area
;
419 var xRange
= this.xAxisRange();
420 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
424 var yRange
= this.yAxisRange(axis
);
425 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
432 * Convert from canvas/div coords to data coordinates.
433 * If specified, do this conversion for the coordinate system of a particular
434 * axis. Uses the first axis by default.
435 * Returns a two-element array: [X, Y]
437 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
438 var ret
= [null, null];
439 var area
= this.plotter_
.area
;
441 var xRange
= this.xAxisRange();
442 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
446 var yRange
= this.yAxisRange(axis
);
447 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
454 * Returns the number of columns (including the independent variable).
456 Dygraph
.prototype.numColumns
= function() {
457 return this.rawData_
[0].length
;
461 * Returns the number of rows (excluding any header/label row).
463 Dygraph
.prototype.numRows
= function() {
464 return this.rawData_
.length
;
468 * Returns the value in the given row and column. If the row and column exceed
469 * the bounds on the data, returns null. Also returns null if the value is
472 Dygraph
.prototype.getValue
= function(row
, col
) {
473 if (row
< 0 || row
> this.rawData_
.length
) return null;
474 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
476 return this.rawData_
[row
][col
];
479 Dygraph
.addEvent
= function(el
, evt
, fn
) {
480 var normed_fn
= function(e
) {
481 if (!e
) var e
= window
.event
;
484 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
485 el
.addEventListener(evt
, normed_fn
, false);
487 el
.attachEvent('on' + evt
, normed_fn
);
492 // Based on the article at
493 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
494 Dygraph
.cancelEvent
= function(e
) {
495 e
= e
? e
: window
.event
;
496 if (e
.stopPropagation
) {
499 if (e
.preventDefault
) {
502 e
.cancelBubble
= true;
504 e
.returnValue
= false;
510 * Generates interface elements for the Dygraph: a containing div, a div to
511 * display the current point, and a textbox to adjust the rolling average
512 * period. Also creates the Renderer/Layout elements.
515 Dygraph
.prototype.createInterface_
= function() {
516 // Create the all-enclosing graph div
517 var enclosing
= this.maindiv_
;
519 this.graphDiv
= document
.createElement("div");
520 this.graphDiv
.style
.width
= this.width_
+ "px";
521 this.graphDiv
.style
.height
= this.height_
+ "px";
522 enclosing
.appendChild(this.graphDiv
);
524 // Create the canvas for interactive parts of the chart.
525 this.canvas_
= Dygraph
.createCanvas();
526 this.canvas_
.style
.position
= "absolute";
527 this.canvas_
.width
= this.width_
;
528 this.canvas_
.height
= this.height_
;
529 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
530 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
532 // ... and for static parts of the chart.
533 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
535 // The interactive parts of the graph are drawn on top of the chart.
536 this.graphDiv
.appendChild(this.hidden_
);
537 this.graphDiv
.appendChild(this.canvas_
);
538 this.mouseEventElement_
= this.canvas_
;
541 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
542 dygraph
.mouseMove_(e
);
544 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
545 dygraph
.mouseOut_(e
);
548 // Create the grapher
549 // TODO(danvk): why does the Layout need its own set of options?
550 this.layoutOptions_
= { 'xOriginIsZero': false };
551 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
552 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
553 Dygraph
.update(this.layoutOptions_
, {
554 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
556 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
558 // TODO(danvk): why does the Renderer need its own set of options?
559 this.renderOptions_
= { colorScheme
: this.colors_
,
561 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
562 Dygraph
.update(this.renderOptions_
, this.attrs_
);
563 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
565 this.createStatusMessage_();
566 this.createDragInterface_();
570 * Detach DOM elements in the dygraph and null out all data references.
571 * Calling this when you're done with a dygraph can dramatically reduce memory
572 * usage. See, e.g., the tests/perf.html example.
574 Dygraph
.prototype.destroy
= function() {
575 var removeRecursive
= function(node
) {
576 while (node
.hasChildNodes()) {
577 removeRecursive(node
.firstChild
);
578 node
.removeChild(node
.firstChild
);
581 removeRecursive(this.maindiv_
);
583 var nullOut
= function(obj
) {
585 if (typeof(obj
[n
]) === 'object') {
591 // These may not all be necessary, but it can't hurt...
592 nullOut(this.layout_
);
593 nullOut(this.plotter_
);
598 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
599 * this particular canvas. All Dygraph work is done on this.canvas_.
600 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
601 * @return {Object} The newly-created canvas
604 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
605 var h
= Dygraph
.createCanvas();
606 h
.style
.position
= "absolute";
607 // TODO(danvk): h should be offset from canvas. canvas needs to include
608 // some extra area to make it easier to zoom in on the far left and far
609 // right. h needs to be precisely the plot area, so that clipping occurs.
610 h
.style
.top
= canvas
.style
.top
;
611 h
.style
.left
= canvas
.style
.left
;
612 h
.width
= this.width_
;
613 h
.height
= this.height_
;
614 h
.style
.width
= this.width_
+ "px"; // for IE
615 h
.style
.height
= this.height_
+ "px"; // for IE
619 // Taken from MochiKit.Color
620 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
624 if (saturation
=== 0) {
629 var i
= Math
.floor(hue
* 6);
630 var f
= (hue
* 6) - i
;
631 var p
= value
* (1 - saturation
);
632 var q
= value
* (1 - (saturation
* f
));
633 var t
= value
* (1 - (saturation
* (1 - f
)));
635 case 1: red
= q
; green
= value
; blue
= p
; break;
636 case 2: red
= p
; green
= value
; blue
= t
; break;
637 case 3: red
= p
; green
= q
; blue
= value
; break;
638 case 4: red
= t
; green
= p
; blue
= value
; break;
639 case 5: red
= value
; green
= p
; blue
= q
; break;
640 case 6: // fall through
641 case 0: red
= value
; green
= t
; blue
= p
; break;
644 red
= Math
.floor(255 * red
+ 0.5);
645 green
= Math
.floor(255 * green
+ 0.5);
646 blue
= Math
.floor(255 * blue
+ 0.5);
647 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
652 * Generate a set of distinct colors for the data series. This is done with a
653 * color wheel. Saturation/Value are customizable, and the hue is
654 * equally-spaced around the color wheel. If a custom set of colors is
655 * specified, that is used instead.
658 Dygraph
.prototype.setColors_
= function() {
659 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
660 // away with this.renderOptions_.
661 var num
= this.attr_("labels").length
- 1;
663 var colors
= this.attr_('colors');
665 var sat
= this.attr_('colorSaturation') || 1.0;
666 var val
= this.attr_('colorValue') || 0.5;
667 var half
= Math
.ceil(num
/ 2);
668 for (var i
= 1; i
<= num
; i
++) {
669 if (!this.visibility()[i
-1]) continue;
670 // alternate colors for high contrast.
671 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
672 var hue
= (1.0 * idx
/ (1 + num
));
673 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
676 for (var i
= 0; i
< num
; i
++) {
677 if (!this.visibility()[i
]) continue;
678 var colorStr
= colors
[i
% colors
.length
];
679 this.colors_
.push(colorStr
);
683 // TODO(danvk): update this w/r
/t/ the
new options system
.
684 this.renderOptions_
.colorScheme
= this.colors_
;
685 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
686 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
687 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
691 * Return the list of colors. This is either the list of colors passed in the
692 * attributes, or the autogenerated list of rgb(r,g,b) strings.
693 * @return {Array<string>} The list of colors.
695 Dygraph
.prototype.getColors
= function() {
699 // The following functions are from quirksmode.org with a modification for Safari from
700 // http://blog.firetree.net/2005/07/04/javascript-find-position/
701 // http://www.quirksmode.org/js
/findpos
.html
702 Dygraph
.findPosX
= function(obj
) {
707 curleft
+= obj
.offsetLeft
;
708 if(!obj
.offsetParent
)
710 obj
= obj
.offsetParent
;
717 Dygraph
.findPosY
= function(obj
) {
722 curtop
+= obj
.offsetTop
;
723 if(!obj
.offsetParent
)
725 obj
= obj
.offsetParent
;
735 * Create the div that contains information on the selected point(s)
736 * This goes in the top right of the canvas, unless an external div has already
740 Dygraph
.prototype.createStatusMessage_
= function() {
741 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
742 if (userLabelsDiv
&& null != userLabelsDiv
743 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
744 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
746 if (!this.attr_("labelsDiv")) {
747 var divWidth
= this.attr_('labelsDivWidth');
749 "position": "absolute",
752 "width": divWidth
+ "px",
754 "left": (this.width_
- divWidth
- 2) + "px",
755 "background": "white",
757 "overflow": "hidden"};
758 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
759 var div
= document
.createElement("div");
760 for (var name
in messagestyle
) {
761 if (messagestyle
.hasOwnProperty(name
)) {
762 div
.style
[name
] = messagestyle
[name
];
765 this.graphDiv
.appendChild(div
);
766 this.attrs_
.labelsDiv
= div
;
771 * Position the labels div so that its right edge is flush with the right edge
772 * of the charting area.
774 Dygraph
.prototype.positionLabelsDiv_
= function() {
775 // Don't touch a user-specified labelsDiv.
776 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
778 var area
= this.plotter_
.area
;
779 var div
= this.attr_("labelsDiv");
780 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
784 * Create the text box to adjust the averaging period
787 Dygraph
.prototype.createRollInterface_
= function() {
788 // Create a roller if one doesn't exist already.
790 this.roller_
= document
.createElement("input");
791 this.roller_
.type
= "text";
792 this.roller_
.style
.display
= "none";
793 this.graphDiv
.appendChild(this.roller_
);
796 var display
= this.attr_('showRoller') ? 'block' : 'none';
798 var textAttr
= { "position": "absolute",
800 "top": (this.plotter_
.area
.h
- 25) + "px",
801 "left": (this.plotter_
.area
.x
+ 1) + "px",
804 this.roller_
.size
= "2";
805 this.roller_
.value
= this.rollPeriod_
;
806 for (var name
in textAttr
) {
807 if (textAttr
.hasOwnProperty(name
)) {
808 this.roller_
.style
[name
] = textAttr
[name
];
813 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
816 // These functions are taken from MochiKit.Signal
817 Dygraph
.pageX
= function(e
) {
819 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
822 var b
= document
.body
;
824 (de
.scrollLeft
|| b
.scrollLeft
) -
825 (de
.clientLeft
|| 0);
829 Dygraph
.pageY
= function(e
) {
831 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
834 var b
= document
.body
;
836 (de
.scrollTop
|| b
.scrollTop
) -
841 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
842 return Dygraph
.pageX(e
) - context
.px
845 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
846 return Dygraph
.pageY(e
) - context
.py
849 // Called in response to an interaction model operation that
850 // should start the default panning behavior.
852 // It's used in the default callback for "mousedown" operations.
853 // Custom interaction model builders can use it to provide the default
856 Dygraph
.startPan
= function(event
, g
, context
) {
857 // have to be zoomed in to pan.
858 // TODO(konigsberg): Let's loosen this zoom-to-pan restriction, also
859 // perhaps create panning boundaries? A more flexible pan would make it,
860 // ahem, 'pan-useful'.
862 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
863 if (g
.axes_
[i
].valueWindow
|| g
.axes_
[i
].valueRange
) {
868 if (!g
.dateWindow_
&& !zoomedY
) return;
870 context
.isPanning
= true;
871 var xRange
= g
.xAxisRange();
872 context
.dateRange
= xRange
[1] - xRange
[0];
874 // Record the range of each y-axis at the start of the drag.
875 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
876 context
.is2DPan
= false;
877 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
878 var axis
= g
.axes_
[i
];
879 var yRange
= g
.yAxisRange(i
);
880 axis
.dragValueRange
= yRange
[1] - yRange
[0];
881 var r
= g
.toDataCoords(null, context
.dragStartY
, i
);
882 axis
.draggingValue
= r
[1];
883 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
886 // TODO(konigsberg): Switch from all this math to toDataCoords?
887 // Seems to work for the dragging value.
888 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
891 // Called in response to an interaction model operation that
892 // responds to an event that pans the view.
894 // It's used in the default callback for "mousemove" operations.
895 // Custom interaction model builders can use it to provide the default
898 Dygraph
.movePan
= function(event
, g
, context
) {
899 context
.dragEndX
= g
.dragGetX_(event
, context
);
900 context
.dragEndY
= g
.dragGetY_(event
, context
);
902 // TODO(danvk): update this comment
903 // Want to have it so that:
904 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
905 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
906 // 3. draggingValue appears at dragEndY.
907 // 4. valueRange is unaltered.
909 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
910 var maxDate
= minDate
+ context
.dateRange
;
911 g
.dateWindow_
= [minDate
, maxDate
];
913 // y-axis scaling is automatic unless this is a full 2D pan.
914 if (context
.is2DPan
) {
915 // Adjust each axis appropriately.
916 var y_frac
= context
.dragEndY
/ g
.height_
;
917 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
918 var axis
= g
.axes_
[i
];
919 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
920 var minValue
= maxValue
- axis
.dragValueRange
;
921 axis
.valueWindow
= [ minValue
, maxValue
];
928 // Called in response to an interaction model operation that
929 // responds to an event that ends panning.
931 // It's used in the default callback for "mouseup" operations.
932 // Custom interaction model builders can use it to provide the default
935 Dygraph
.endPan
= function(event
, g
, context
) {
936 context
.isPanning
= false;
937 context
.is2DPan
= false;
938 context
.draggingDate
= null;
939 context
.dateRange
= null;
940 context
.valueRange
= null;
943 // Called in response to an interaction model operation that
944 // responds to an event that starts zooming.
946 // It's used in the default callback for "mousedown" operations.
947 // Custom interaction model builders can use it to provide the default
950 Dygraph
.startZoom
= function(event
, g
, context
) {
951 context
.isZooming
= true;
954 // Called in response to an interaction model operation that
955 // responds to an event that defines zoom boundaries.
957 // It's used in the default callback for "mousemove" operations.
958 // Custom interaction model builders can use it to provide the default
961 Dygraph
.moveZoom
= function(event
, g
, context
) {
962 context
.dragEndX
= g
.dragGetX_(event
, context
);
963 context
.dragEndY
= g
.dragGetY_(event
, context
);
965 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
966 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
968 // drag direction threshold for y axis is twice as large as x axis
969 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
972 context
.dragDirection
,
977 context
.prevDragDirection
,
981 context
.prevEndX
= context
.dragEndX
;
982 context
.prevEndY
= context
.dragEndY
;
983 context
.prevDragDirection
= context
.dragDirection
;
986 // Called in response to an interaction model operation that
987 // responds to an event that performs a zoom based on previously defined
990 // It's used in the default callback for "mouseup" operations.
991 // Custom interaction model builders can use it to provide the default
994 Dygraph
.endZoom
= function(event
, g
, context
) {
995 context
.isZooming
= false;
996 context
.dragEndX
= g
.dragGetX_(event
, context
);
997 context
.dragEndY
= g
.dragGetY_(event
, context
);
998 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
999 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1001 if (regionWidth
< 2 && regionHeight
< 2 &&
1002 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1003 // TODO(danvk): pass along more info about the points, e.g. 'x'
1004 if (g
.attr_('clickCallback') != null) {
1005 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1007 if (g
.attr_('pointClickCallback')) {
1008 // check if the click was on a particular point.
1009 var closestIdx
= -1;
1010 var closestDistance
= 0;
1011 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1012 var p
= g
.selPoints_
[i
];
1013 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1014 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1015 if (closestIdx
== -1 || distance
< closestDistance
) {
1016 closestDistance
= distance
;
1021 // Allow any click within two pixels of the dot.
1022 var radius
= g
.attr_('highlightCircleSize') + 2;
1023 if (closestDistance
<= 5 * 5) {
1024 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1029 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1030 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1031 Math
.max(context
.dragStartX
, context
.dragEndX
));
1032 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1033 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1034 Math
.max(context
.dragStartY
, context
.dragEndY
));
1036 g
.canvas_
.getContext("2d").clearRect(0, 0,
1040 context
.dragStartX
= null;
1041 context
.dragStartY
= null;
1044 Dygraph
.defaultInteractionModel
= {
1045 // Track the beginning of drag events
1046 mousedown
: function(event
, g
, context
) {
1047 context
.initializeMouseDown(event
, g
, context
);
1049 if (event
.altKey
|| event
.shiftKey
) {
1050 Dygraph
.startPan(event
, g
, context
);
1052 Dygraph
.startZoom(event
, g
, context
);
1056 // Draw zoom rectangles when the mouse is down and the user moves around
1057 mousemove
: function(event
, g
, context
) {
1058 if (context
.isZooming
) {
1059 Dygraph
.moveZoom(event
, g
, context
);
1060 } else if (context
.isPanning
) {
1061 Dygraph
.movePan(event
, g
, context
);
1065 mouseup
: function(event
, g
, context
) {
1066 if (context
.isZooming
) {
1067 Dygraph
.endZoom(event
, g
, context
);
1068 } else if (context
.isPanning
) {
1069 Dygraph
.endPan(event
, g
, context
);
1073 // Temporarily cancel the dragging event when the mouse leaves the graph
1074 mouseout
: function(event
, g
, context
) {
1075 if (context
.isZooming
) {
1076 context
.dragEndX
= null;
1077 context
.dragEndY
= null;
1081 // Disable zooming out if panning.
1082 dblclick
: function(event
, g
, context
) {
1083 if (event
.altKey
|| event
.shiftKey
) {
1086 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1087 // friendlier to public use.
1092 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1095 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1099 Dygraph
.prototype.createDragInterface_
= function() {
1101 // Tracks whether the mouse is down right now
1103 isPanning
: false, // is this drag part of a pan?
1104 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1109 dragDirection
: null,
1112 prevDragDirection
: null,
1114 // TODO(danvk): update this comment
1115 // draggingDate and draggingValue represent the [date,value] point on the
1116 // graph at which the mouse was pressed. As the mouse moves while panning,
1117 // the viewport must pan so that the mouse position points to
1118 // [draggingDate, draggingValue]
1121 // TODO(danvk): update this comment
1122 // The range in second/value units that the viewport encompasses during a
1123 // panning operation.
1126 // Utility function to convert page-wide coordinates to canvas coords
1130 initializeMouseDown
: function(event
, g
, context
) {
1131 // prevents mouse drags from selecting page text.
1132 if (event
.preventDefault
) {
1133 event
.preventDefault(); // Firefox, Chrome, etc.
1135 event
.returnValue
= false; // IE
1136 event
.cancelBubble
= true;
1139 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1140 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1141 context
.dragStartX
= g
.dragGetX_(event
, context
);
1142 context
.dragStartY
= g
.dragGetY_(event
, context
);
1146 var interactionModel
= this.attr_("interactionModel");
1148 // Self is the graph.
1151 // Function that binds the graph and context to the handler.
1152 var bindHandler
= function(handler
) {
1153 return function(event
) {
1154 handler(event
, self
, context
);
1158 for (var eventName
in interactionModel
) {
1159 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1160 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1161 bindHandler(interactionModel
[eventName
]));
1164 // If the user releases the mouse button during a drag, but not over the
1165 // canvas, then it doesn't count as a zooming action.
1166 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1167 if (context
.isZooming
|| context
.isPanning
) {
1168 context
.isZooming
= false;
1169 context
.dragStartX
= null;
1170 context
.dragStartY
= null;
1173 if (context
.isPanning
) {
1174 context
.isPanning
= false;
1175 context
.draggingDate
= null;
1176 context
.dateRange
= null;
1177 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1178 delete self
.axes_
[i
].draggingValue
;
1179 delete self
.axes_
[i
].dragValueRange
;
1187 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1188 * up any previous zoom rectangles that were drawn. This could be optimized to
1189 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1192 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1193 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1194 * @param {Number} startX The X position where the drag started, in canvas
1196 * @param {Number} endX The current X position of the drag, in canvas coords.
1197 * @param {Number} startY The Y position where the drag started, in canvas
1199 * @param {Number} endY The current Y position of the drag, in canvas coords.
1200 * @param {Number} prevDirection the value of direction on the previous call to
1201 * this function. Used to avoid excess redrawing
1202 * @param {Number} prevEndX The value of endX on the previous call to this
1203 * function. Used to avoid excess redrawing
1204 * @param {Number} prevEndY The value of endY on the previous call to this
1205 * function. Used to avoid excess redrawing
1208 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1209 prevDirection
, prevEndX
, prevEndY
) {
1210 var ctx
= this.canvas_
.getContext("2d");
1212 // Clean up from the previous rect if necessary
1213 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1214 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1215 Math
.abs(startX
- prevEndX
), this.height_
);
1216 } else if (prevDirection
== Dygraph
.VERTICAL
){
1217 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1218 this.width_
, Math
.abs(startY
- prevEndY
));
1221 // Draw a light-grey rectangle to show the new viewing area
1222 if (direction
== Dygraph
.HORIZONTAL
) {
1223 if (endX
&& startX
) {
1224 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1225 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1226 Math
.abs(endX
- startX
), this.height_
);
1229 if (direction
== Dygraph
.VERTICAL
) {
1230 if (endY
&& startY
) {
1231 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1232 ctx
.fillRect(0, Math
.min(startY
, endY
),
1233 this.width_
, Math
.abs(endY
- startY
));
1239 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1240 * the canvas. The exact zoom window may be slightly larger if there are no data
1241 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1242 * which accepts dates that match the raw data. This function redraws the graph.
1244 * @param {Number} lowX The leftmost pixel value that should be visible.
1245 * @param {Number} highX The rightmost pixel value that should be visible.
1248 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1249 // Find the earliest and latest dates contained in this canvasx range.
1250 // Convert the call to date ranges of the raw data.
1251 var r
= this.toDataCoords(lowX
, null);
1253 r
= this.toDataCoords(highX
, null);
1255 this.doZoomXDates_(minDate
, maxDate
);
1259 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1260 * method with doZoomX which accepts pixel coordinates. This function redraws
1263 * @param {Number} minDate The minimum date that should be visible.
1264 * @param {Number} maxDate The maximum date that should be visible.
1267 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1268 this.dateWindow_
= [minDate
, maxDate
];
1270 if (this.attr_("zoomCallback")) {
1271 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1276 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1277 * the canvas. This function redraws the graph.
1279 * @param {Number} lowY The topmost pixel value that should be visible.
1280 * @param {Number} highY The lowest pixel value that should be visible.
1283 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1284 // Find the highest and lowest values in pixel range for each axis.
1285 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1286 // This is because pixels increase as you go down on the screen, whereas data
1287 // coordinates increase as you go up the screen.
1288 var valueRanges
= [];
1289 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1290 var hi
= this.toDataCoords(null, lowY
, i
);
1291 var low
= this.toDataCoords(null, highY
, i
);
1292 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1293 valueRanges
.push([low
[1], hi
[1]]);
1297 if (this.attr_("zoomCallback")) {
1298 var xRange
= this.xAxisRange();
1299 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1304 * Reset the zoom to the original view coordinates. This is the same as
1305 * double-clicking on the graph.
1309 Dygraph
.prototype.doUnzoom_
= function() {
1311 if (this.dateWindow_
!= null) {
1313 this.dateWindow_
= null;
1316 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1317 if (this.axes_
[i
].valueWindow
!= null) {
1319 delete this.axes_
[i
].valueWindow
;
1324 // Putting the drawing operation before the callback because it resets
1327 if (this.attr_("zoomCallback")) {
1328 var minDate
= this.rawData_
[0][0];
1329 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1330 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1336 * When the mouse moves in the canvas, display information about a nearby data
1337 * point and draw dots over those points in the data series. This function
1338 * takes care of cleanup of previously-drawn dots.
1339 * @param {Object} event The mousemove event from the browser.
1342 Dygraph
.prototype.mouseMove_
= function(event
) {
1343 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1344 var points
= this.layout_
.points
;
1349 // Loop through all the points and find the date nearest to our current
1351 var minDist
= 1e+100;
1353 for (var i
= 0; i
< points
.length
; i
++) {
1354 var point
= points
[i
];
1355 if (point
== null) continue;
1356 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1357 if (dist
> minDist
) continue;
1361 if (idx
>= 0) lastx
= points
[idx
].xval
;
1362 // Check that you can really highlight the last day's data
1363 var last
= points
[points
.length
-1];
1364 if (last
!= null && canvasx
> last
.canvasx
)
1365 lastx
= points
[points
.length
-1].xval
;
1367 // Extract the points we've selected
1368 this.selPoints_
= [];
1369 var l
= points
.length
;
1370 if (!this.attr_("stackedGraph")) {
1371 for (var i
= 0; i
< l
; i
++) {
1372 if (points
[i
].xval
== lastx
) {
1373 this.selPoints_
.push(points
[i
]);
1377 // Need to 'unstack' points starting from the bottom
1378 var cumulative_sum
= 0;
1379 for (var i
= l
- 1; i
>= 0; i
--) {
1380 if (points
[i
].xval
== lastx
) {
1381 var p
= {}; // Clone the point since we modify it
1382 for (var k
in points
[i
]) {
1383 p
[k
] = points
[i
][k
];
1385 p
.yval
-= cumulative_sum
;
1386 cumulative_sum
+= p
.yval
;
1387 this.selPoints_
.push(p
);
1390 this.selPoints_
.reverse();
1393 if (this.attr_("highlightCallback")) {
1394 var px
= this.lastx_
;
1395 if (px
!== null && lastx
!= px
) {
1396 // only fire if the selected point has changed.
1397 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1401 // Save last x position for callbacks.
1402 this.lastx_
= lastx
;
1404 this.updateSelection_();
1408 * Transforms layout_.points index into data row number.
1409 * @param int layout_.points index
1410 * @return int row number, or -1 if none could be found.
1413 Dygraph
.prototype.idxToRow_
= function(idx
) {
1414 if (idx
< 0) return -1;
1416 for (var i
in this.layout_
.datasets
) {
1417 if (idx
< this.layout_
.datasets
[i
].length
) {
1418 return this.boundaryIds_
[0][0]+idx
;
1420 idx
-= this.layout_
.datasets
[i
].length
;
1426 * Draw dots over the selectied points in the data series. This function
1427 * takes care of cleanup of previously-drawn dots.
1430 Dygraph
.prototype.updateSelection_
= function() {
1431 // Clear the previously drawn vertical, if there is one
1432 var ctx
= this.canvas_
.getContext("2d");
1433 if (this.previousVerticalX_
>= 0) {
1434 // Determine the maximum highlight circle size.
1435 var maxCircleSize
= 0;
1436 var labels
= this.attr_('labels');
1437 for (var i
= 1; i
< labels
.length
; i
++) {
1438 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1439 if (r
> maxCircleSize
) maxCircleSize
= r
;
1441 var px
= this.previousVerticalX_
;
1442 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1443 2 * maxCircleSize
+ 2, this.height_
);
1446 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1448 if (this.selPoints_
.length
> 0) {
1449 var canvasx
= this.selPoints_
[0].canvasx
;
1451 // Set the status message to indicate the selected point(s)
1452 var replace
= this.attr_('xValueFormatter')(
1453 this.lastx_
, this.numXDigits_
+ this.numExtraDigits_
) + ":";
1454 var fmtFunc
= this.attr_('yValueFormatter');
1455 var clen
= this.colors_
.length
;
1457 if (this.attr_('showLabelsOnHighlight')) {
1458 // Set the status message to indicate the selected point(s)
1459 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1460 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1461 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1462 if (this.attr_("labelsSeparateLines")) {
1465 var point
= this.selPoints_
[i
];
1466 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1467 var yval
= fmtFunc(point
.yval
, this.numYDigits_
+ this.numExtraDigits_
);
1468 replace
+= " <b><font color='" + c
.toHex() + "'>"
1469 + point
.name
+ "</font></b>:"
1473 this.attr_("labelsDiv").innerHTML
= replace
;
1476 // Draw colored circles over the center of each selected point
1478 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1479 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1481 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1483 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1484 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1485 0, 2 * Math
.PI
, false);
1490 this.previousVerticalX_
= canvasx
;
1495 * Set manually set selected dots, and display information about them
1496 * @param int row number that should by highlighted
1497 * false value clears the selection
1500 Dygraph
.prototype.setSelection
= function(row
) {
1501 // Extract the points we've selected
1502 this.selPoints_
= [];
1505 if (row
!== false) {
1506 row
= row
-this.boundaryIds_
[0][0];
1509 if (row
!== false && row
>= 0) {
1510 for (var i
in this.layout_
.datasets
) {
1511 if (row
< this.layout_
.datasets
[i
].length
) {
1512 var point
= this.layout_
.points
[pos
+row
];
1514 if (this.attr_("stackedGraph")) {
1515 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1518 this.selPoints_
.push(point
);
1520 pos
+= this.layout_
.datasets
[i
].length
;
1524 if (this.selPoints_
.length
) {
1525 this.lastx_
= this.selPoints_
[0].xval
;
1526 this.updateSelection_();
1529 this.clearSelection();
1535 * The mouse has left the canvas. Clear out whatever artifacts remain
1536 * @param {Object} event the mouseout event from the browser.
1539 Dygraph
.prototype.mouseOut_
= function(event
) {
1540 if (this.attr_("unhighlightCallback")) {
1541 this.attr_("unhighlightCallback")(event
);
1544 if (this.attr_("hideOverlayOnMouseOut")) {
1545 this.clearSelection();
1550 * Remove all selection from the canvas
1553 Dygraph
.prototype.clearSelection
= function() {
1554 // Get rid of the overlay data
1555 var ctx
= this.canvas_
.getContext("2d");
1556 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1557 this.attr_("labelsDiv").innerHTML
= "";
1558 this.selPoints_
= [];
1563 * Returns the number of the currently selected row
1564 * @return int row number, of -1 if nothing is selected
1567 Dygraph
.prototype.getSelection
= function() {
1568 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1572 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1573 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1574 return row
+ this.boundaryIds_
[0][0];
1580 Dygraph
.zeropad
= function(x
) {
1581 if (x
< 10) return "0" + x
; else return "" + x
;
1585 * Return a string version of the hours, minutes and seconds portion of a date.
1586 * @param {Number} date The JavaScript date (ms since epoch)
1587 * @return {String} A time of the form "HH:MM:SS"
1590 Dygraph
.hmsString_
= function(date
) {
1591 var zeropad
= Dygraph
.zeropad
;
1592 var d
= new Date(date
);
1593 if (d
.getSeconds()) {
1594 return zeropad(d
.getHours()) + ":" +
1595 zeropad(d
.getMinutes()) + ":" +
1596 zeropad(d
.getSeconds());
1598 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1603 * Convert a JS date to a string appropriate to display on an axis that
1604 * is displaying values at the stated granularity.
1605 * @param {Date} date The date to format
1606 * @param {Number} granularity One of the Dygraph granularity constants
1607 * @return {String} The formatted date
1610 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1611 if (granularity
>= Dygraph
.DECADAL
) {
1612 return date
.strftime('%Y');
1613 } else if (granularity
>= Dygraph
.MONTHLY
) {
1614 return date
.strftime('%b %y');
1616 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1617 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1618 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1620 return Dygraph
.hmsString_(date
.getTime());
1626 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1627 * @param {Number} date The JavaScript date (ms since epoch)
1628 * @return {String} A date of the form "YYYY/MM/DD"
1631 Dygraph
.dateString_
= function(date
) {
1632 var zeropad
= Dygraph
.zeropad
;
1633 var d
= new Date(date
);
1636 var year
= "" + d
.getFullYear();
1637 // Get a 0 padded month string
1638 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1639 // Get a 0 padded day string
1640 var day
= zeropad(d
.getDate());
1643 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1644 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1646 return year
+ "/" + month + "/" + day
+ ret
;
1650 * Fires when there's data available to be graphed.
1651 * @param {String} data Raw CSV data to be plotted
1654 Dygraph
.prototype.loadedEvent_
= function(data
) {
1655 this.rawData_
= this.parseCSV_(data
);
1659 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1660 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1661 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1664 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1667 Dygraph
.prototype.addXTicks_
= function() {
1668 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1669 var opts
= {xTicks
: []};
1670 var formatter
= this.attr_('xTicker');
1671 if (this.dateWindow_
) {
1672 opts
.xTicks
= formatter(this.dateWindow_
[0], this.dateWindow_
[1], this);
1674 // numericTicks() returns multiple values.
1675 var ret
= formatter(this.rawData_
[0][0],
1676 this.rawData_
[this.rawData_
.length
- 1][0], this);
1677 opts
.xTicks
= ret
.ticks
;
1678 this.numXDigits_
= ret
.numDigits
;
1680 this.layout_
.updateOptions(opts
);
1683 // Time granularity enumeration
1684 Dygraph
.SECONDLY
= 0;
1685 Dygraph
.TWO_SECONDLY
= 1;
1686 Dygraph
.FIVE_SECONDLY
= 2;
1687 Dygraph
.TEN_SECONDLY
= 3;
1688 Dygraph
.THIRTY_SECONDLY
= 4;
1689 Dygraph
.MINUTELY
= 5;
1690 Dygraph
.TWO_MINUTELY
= 6;
1691 Dygraph
.FIVE_MINUTELY
= 7;
1692 Dygraph
.TEN_MINUTELY
= 8;
1693 Dygraph
.THIRTY_MINUTELY
= 9;
1694 Dygraph
.HOURLY
= 10;
1695 Dygraph
.TWO_HOURLY
= 11;
1696 Dygraph
.SIX_HOURLY
= 12;
1698 Dygraph
.WEEKLY
= 14;
1699 Dygraph
.MONTHLY
= 15;
1700 Dygraph
.QUARTERLY
= 16;
1701 Dygraph
.BIANNUAL
= 17;
1702 Dygraph
.ANNUAL
= 18;
1703 Dygraph
.DECADAL
= 19;
1704 Dygraph
.CENTENNIAL
= 20;
1705 Dygraph
.NUM_GRANULARITIES
= 21;
1707 Dygraph
.SHORT_SPACINGS
= [];
1708 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1709 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1710 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1711 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1712 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1713 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1714 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1715 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1716 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1717 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1718 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1719 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1720 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1721 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1722 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1726 // If we used this time granularity, how many ticks would there be?
1727 // This is only an approximation, but it's generally good enough.
1729 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1730 if (granularity
< Dygraph
.MONTHLY
) {
1731 // Generate one tick mark for every fixed interval of time.
1732 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1733 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1735 var year_mod
= 1; // e.g. to only print one point every 10 years.
1736 var num_months
= 12;
1737 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1738 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1739 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1740 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1741 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1743 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1744 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1745 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1751 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1752 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1754 // Returns an array containing {v: millis, label: label} dictionaries.
1756 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1757 var formatter
= this.attr_("xAxisLabelFormatter");
1759 if (granularity
< Dygraph
.MONTHLY
) {
1760 // Generate one tick mark for every fixed interval of time.
1761 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1762 var format
= '%d%b'; // e.g. "1Jan"
1764 // Find a time less than start_time which occurs on a "nice" time boundary
1765 // for this granularity.
1766 var g
= spacing
/ 1000;
1767 var d
= new Date(start_time
);
1768 if (g
<= 60) { // seconds
1769 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1773 if (g
<= 60) { // minutes
1774 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1779 if (g
<= 24) { // days
1780 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1785 if (g
== 7) { // one week
1786 d
.setDate(d
.getDate() - d
.getDay());
1791 start_time
= d
.getTime();
1793 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1794 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1797 // Display a tick mark on the first of a set of months of each year.
1798 // Years get a tick mark iff y % year_mod == 0. This is useful for
1799 // displaying a tick mark once every 10 years, say, on long time scales.
1801 var year_mod
= 1; // e.g. to only print one point every 10 years.
1803 if (granularity
== Dygraph
.MONTHLY
) {
1804 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1805 } else if (granularity
== Dygraph
.QUARTERLY
) {
1806 months
= [ 0, 3, 6, 9 ];
1807 } else if (granularity
== Dygraph
.BIANNUAL
) {
1809 } else if (granularity
== Dygraph
.ANNUAL
) {
1811 } else if (granularity
== Dygraph
.DECADAL
) {
1814 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1818 this.warn("Span of dates is too long");
1821 var start_year
= new Date(start_time
).getFullYear();
1822 var end_year
= new Date(end_time
).getFullYear();
1823 var zeropad
= Dygraph
.zeropad
;
1824 for (var i
= start_year
; i
<= end_year
; i
++) {
1825 if (i
% year_mod
!= 0) continue;
1826 for (var j
= 0; j
< months
.length
; j
++) {
1827 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1828 var t
= Date
.parse(date_str
);
1829 if (t
< start_time
|| t
> end_time
) continue;
1830 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1840 * Add ticks to the x-axis based on a date range.
1841 * @param {Number} startDate Start of the date window (millis since epoch)
1842 * @param {Number} endDate End of the date window (millis since epoch)
1843 * @return {Array.<Object>} Array of {label, value} tuples.
1846 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1848 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1849 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1850 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1857 return self
.GetXAxis(startDate
, endDate
, chosen
);
1859 // TODO(danvk): signal error.
1864 * Determine the number of significant figures in a Number up to the specified
1865 * precision. Note that there is no way to determine if a trailing '0' is
1866 * significant or not, so by convention we return 1 for all of the following
1867 * inputs: 1, 1.0, 1.00, 1.000 etc.
1868 * @param {Number} x The input value.
1869 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
1870 * Default and maximum allowed value is 13.
1871 * @return {Number} The number of significant figures which is >= 1.
1873 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
1874 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
1876 // Convert the number to its exponential notation form and work backwards,
1877 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
1878 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
1879 // the JavaScript interpreter handle the low level bits of the Number for us.
1880 var s
= x
.toExponential(precision
);
1881 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
1883 for (var i
= ePos
- 1; i
>= 0; i
--) {
1885 // Got to the decimal place. We'll call this 1 digit of precision because
1886 // we can't know for sure how many trailing 0s are significant.
1888 } else if (s
[i
] != '0') {
1889 // Found the first non-zero digit. Return the number of characters
1890 // except for the '.'.
1891 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
1895 // Occurs if toExponential() doesn't return a string containing 'e', which
1896 // should never happen.
1901 * Add ticks when the x axis has numbers on it (instead of dates)
1902 * @param {Number} startDate Start of the date window (millis since epoch)
1903 * @param {Number} endDate End of the date window (millis since epoch)
1905 * @param {function} attribute accessor function.
1906 * @return {Array.<Object>} Array of {label, value} tuples.
1909 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1910 var attr
= function(k
) {
1911 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1912 return self
.attr_(k
);
1917 for (var i
= 0; i
< vals
.length
; i
++) {
1918 ticks
[i
].push({v
: vals
[i
]});
1922 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1923 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1924 // The first spacing greater than pixelsPerYLabel is what we use.
1925 // TODO(danvk): version that works on a log scale.
1926 if (attr("labelsKMG2")) {
1927 var mults
= [1, 2, 4, 8];
1929 var mults
= [1, 2, 5];
1931 var scale
, low_val
, high_val
, nTicks
;
1932 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1933 var pixelsPerTick
= attr('pixelsPerYLabel');
1934 for (var i
= -10; i
< 50; i
++) {
1935 if (attr("labelsKMG2")) {
1936 var base_scale
= Math
.pow(16, i
);
1938 var base_scale
= Math
.pow(10, i
);
1940 for (var j
= 0; j
< mults
.length
; j
++) {
1941 scale
= base_scale
* mults
[j
];
1942 low_val
= Math
.floor(minV
/ scale
) * scale
;
1943 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1944 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1945 var spacing
= self
.height_
/ nTicks
;
1946 // wish I could break out of both loops at once...
1947 if (spacing
> pixelsPerTick
) break;
1949 if (spacing
> pixelsPerTick
) break;
1952 // Construct the set of ticks.
1953 // Allow reverse y-axis if it's explicitly requested.
1954 if (low_val
> high_val
) scale
*= -1;
1955 for (var i
= 0; i
< nTicks
; i
++) {
1956 var tickV
= low_val
+ i
* scale
;
1957 ticks
.push( {v
: tickV
} );
1961 // Add formatted labels to the ticks.
1964 if (attr("labelsKMB")) {
1966 k_labels
= [ "K", "M", "B", "T" ];
1968 if (attr("labelsKMG2")) {
1969 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1971 k_labels
= [ "k", "M", "G", "T" ];
1973 var formatter
= attr('yAxisLabelFormatter') ?
1974 attr('yAxisLabelFormatter') : attr('yValueFormatter');
1976 // Determine the number of decimal places needed for the labels below by
1977 // taking the maximum number of significant figures for any label. We must
1978 // take the max because we can't tell if trailing 0s are significant.
1980 for (var i
= 0; i
< ticks
.length
; i
++) {
1981 numDigits
= Math
.max(Dygraph
.significantFigures(ticks
[i
].v
), numDigits
);
1984 for (var i
= 0; i
< ticks
.length
; i
++) {
1985 var tickV
= ticks
[i
].v
;
1986 var absTickV
= Math
.abs(tickV
);
1987 var label
= (formatter
!== undefined
) ?
1988 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
1989 if (k_labels
.length
> 0) {
1990 // Round up to an appropriate unit.
1992 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1993 if (absTickV
>= n
) {
1994 label
= (tickV
/ n
).toPrecision(numDigits
) + k_labels
[j
];
1999 ticks
[i
].label
= label
;
2001 return {ticks
: ticks
, numDigits
: numDigits
};
2004 // Computes the range of the data series (including confidence intervals).
2005 // series is either [ [x1, y1], [x2, y2], ... ] or
2006 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2007 // Returns [low, high]
2008 Dygraph
.prototype.extremeValues_
= function(series
) {
2009 var minY
= null, maxY
= null;
2011 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2013 // With custom bars, maxY is the max of the high values.
2014 for (var j
= 0; j
< series
.length
; j
++) {
2015 var y
= series
[j
][1][0];
2017 var low
= y
- series
[j
][1][1];
2018 var high
= y
+ series
[j
][1][2];
2019 if (low
> y
) low
= y
; // this can happen with custom bars,
2020 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2021 if (maxY
== null || high
> maxY
) {
2024 if (minY
== null || low
< minY
) {
2029 for (var j
= 0; j
< series
.length
; j
++) {
2030 var y
= series
[j
][1];
2031 if (y
=== null || isNaN(y
)) continue;
2032 if (maxY
== null || y
> maxY
) {
2035 if (minY
== null || y
< minY
) {
2041 return [minY
, maxY
];
2045 * This function is called once when the chart's data is changed or the options
2046 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2047 * idea is that values derived from the chart's data can be computed here,
2048 * rather than every time the chart is drawn. This includes things like the
2049 * number of axes, rolling averages, etc.
2051 Dygraph
.prototype.predraw_
= function() {
2052 // TODO(danvk): move more computations out of drawGraph_ and into here.
2053 this.computeYAxes_();
2055 // Create a new plotter.
2056 if (this.plotter_
) this.plotter_
.clear();
2057 this.plotter_
= new DygraphCanvasRenderer(this,
2058 this.hidden_
, this.layout_
,
2059 this.renderOptions_
);
2061 // The roller sits in the bottom left corner of the chart. We don't know where
2062 // this will be until the options are available, so it's positioned here.
2063 this.createRollInterface_();
2065 // Same thing applies for the labelsDiv. It's right edge should be flush with
2066 // the right edge of the charting area (which may not be the same as the right
2067 // edge of the div, if we have two y-axes.
2068 this.positionLabelsDiv_();
2070 // If the data or options have changed, then we'd better redraw.
2076 * Update the graph with new data. This method is called when the viewing area
2077 * has changed. If the underlying data or options have changed, predraw_ will
2078 * be called before drawGraph_ is called.
2081 Dygraph
.prototype.drawGraph_
= function() {
2082 var data
= this.rawData_
;
2084 // This is used to set the second parameter to drawCallback, below.
2085 var is_initial_draw
= this.is_initial_draw_
;
2086 this.is_initial_draw_
= false;
2088 var minY
= null, maxY
= null;
2089 this.layout_
.removeAllDatasets();
2091 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2093 // Loop over the fields (series). Go from the last to the first,
2094 // because if they're stacked that's how we accumulate the values.
2096 var cumulative_y
= []; // For stacked series.
2099 var extremes
= {}; // series name -> [low, high]
2101 // Loop over all fields and create datasets
2102 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2103 if (!this.visibility()[i
- 1]) continue;
2105 var seriesName
= this.attr_("labels")[i
];
2106 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2109 for (var j
= 0; j
< data
.length
; j
++) {
2110 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2111 var date
= data
[j
][0];
2112 series
.push([date
, data
[j
][i
]]);
2116 // TODO(danvk): move this into predraw_. It's insane to do it here.
2117 series
= this.rollingAverage(series
, this.rollPeriod_
);
2119 // Prune down to the desired range, if necessary (for zooming)
2120 // Because there can be lines going to points outside of the visible area,
2121 // we actually prune to visible points, plus one on either side.
2122 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2123 if (this.dateWindow_
) {
2124 var low
= this.dateWindow_
[0];
2125 var high
= this.dateWindow_
[1];
2127 // TODO(danvk): do binary search instead of linear search.
2128 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2129 var firstIdx
= null, lastIdx
= null;
2130 for (var k
= 0; k
< series
.length
; k
++) {
2131 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2134 if (series
[k
][0] <= high
) {
2138 if (firstIdx
=== null) firstIdx
= 0;
2139 if (firstIdx
> 0) firstIdx
--;
2140 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2141 if (lastIdx
< series
.length
- 1) lastIdx
++;
2142 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2143 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2144 pruned
.push(series
[k
]);
2148 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2151 var seriesExtremes
= this.extremeValues_(series
);
2154 for (var j
=0; j
<series
.length
; j
++) {
2155 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2158 } else if (this.attr_("stackedGraph")) {
2159 var l
= series
.length
;
2161 for (var j
= 0; j
< l
; j
++) {
2162 // If one data set has a NaN, let all subsequent stacked
2163 // sets inherit the NaN -- only start at 0 for the first set.
2164 var x
= series
[j
][0];
2165 if (cumulative_y
[x
] === undefined
) {
2166 cumulative_y
[x
] = 0;
2169 actual_y
= series
[j
][1];
2170 cumulative_y
[x
] += actual_y
;
2172 series
[j
] = [x
, cumulative_y
[x
]]
2174 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2175 seriesExtremes
[1] = cumulative_y
[x
];
2177 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2178 seriesExtremes
[0] = cumulative_y
[x
];
2182 extremes
[seriesName
] = seriesExtremes
;
2184 datasets
[i
] = series
;
2187 for (var i
= 1; i
< datasets
.length
; i
++) {
2188 if (!this.visibility()[i
- 1]) continue;
2189 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2192 this.computeYAxisRanges_(extremes
);
2193 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2194 seriesToAxisMap
: this.seriesToAxisMap_
2199 // Tell PlotKit to use this new data and render itself
2200 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2201 this.layout_
.evaluateWithError();
2202 this.plotter_
.clear();
2203 this.plotter_
.render();
2204 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2205 this.canvas_
.height
);
2207 if (this.attr_("drawCallback") !== null) {
2208 this.attr_("drawCallback")(this, is_initial_draw
);
2213 * Determine properties of the y-axes which are independent of the data
2214 * currently being displayed. This includes things like the number of axes and
2215 * the style of the axes. It does not include the range of each axis and its
2217 * This fills in this.axes_ and this.seriesToAxisMap_.
2218 * axes_ = [ { options } ]
2219 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2220 * indices are into the axes_ array.
2222 Dygraph
.prototype.computeYAxes_
= function() {
2223 this.axes_
= [{}]; // always have at least one y-axis.
2224 this.seriesToAxisMap_
= {};
2226 // Get a list of series names.
2227 var labels
= this.attr_("labels");
2229 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2231 // all options which could be applied per-axis:
2239 'axisLabelFontSize',
2243 // Copy global axis options over to the first axis.
2244 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2245 var k
= axisOptions
[i
];
2246 var v
= this.attr_(k
);
2247 if (v
) this.axes_
[0][k
] = v
;
2250 // Go through once and add all the axes.
2251 for (var seriesName
in series
) {
2252 if (!series
.hasOwnProperty(seriesName
)) continue;
2253 var axis
= this.attr_("axis", seriesName
);
2255 this.seriesToAxisMap_
[seriesName
] = 0;
2258 if (typeof(axis
) == 'object') {
2259 // Add a new axis, making a copy of its per-axis options.
2261 Dygraph
.update(opts
, this.axes_
[0]);
2262 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2263 Dygraph
.update(opts
, axis
);
2264 this.axes_
.push(opts
);
2265 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2269 // Go through one more time and assign series to an axis defined by another
2270 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2271 for (var seriesName
in series
) {
2272 if (!series
.hasOwnProperty(seriesName
)) continue;
2273 var axis
= this.attr_("axis", seriesName
);
2274 if (typeof(axis
) == 'string') {
2275 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2276 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2277 "series " + axis
+ ", which does not define its own axis.");
2280 var idx
= this.seriesToAxisMap_
[axis
];
2281 this.seriesToAxisMap_
[seriesName
] = idx
;
2285 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2286 // this last so that hiding the first series doesn't destroy the axis
2287 // properties of the primary axis.
2288 var seriesToAxisFiltered
= {};
2289 var vis
= this.visibility();
2290 for (var i
= 1; i
< labels
.length
; i
++) {
2292 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2294 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2298 * Returns the number of y-axes on the chart.
2299 * @return {Number} the number of axes.
2301 Dygraph
.prototype.numAxes
= function() {
2303 for (var series
in this.seriesToAxisMap_
) {
2304 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2305 var idx
= this.seriesToAxisMap_
[series
];
2306 if (idx
> last_axis
) last_axis
= idx
;
2308 return 1 + last_axis
;
2312 * Determine the value range and tick marks for each axis.
2313 * @param {Object} extremes A mapping from seriesName -> [low, high]
2314 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2316 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2317 // Build a map from axis number -> [list of series names]
2318 var seriesForAxis
= [];
2319 for (var series
in this.seriesToAxisMap_
) {
2320 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2321 var idx
= this.seriesToAxisMap_
[series
];
2322 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2323 seriesForAxis
[idx
].push(series
);
2326 // Compute extreme values, a span and tick marks for each axis.
2327 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2328 var axis
= this.axes_
[i
];
2329 if (axis
.valueWindow
) {
2330 // This is only set if the user has zoomed on the y-axis. It is never set
2331 // by a user. It takes precedence over axis.valueRange because, if you set
2332 // valueRange, you'd still expect to be able to pan.
2333 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2334 } else if (axis
.valueRange
) {
2335 // This is a user-set value range for this axis.
2336 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2338 // Calculate the extremes of extremes.
2339 var series
= seriesForAxis
[i
];
2340 var minY
= Infinity
; // extremes[series[0]][0];
2341 var maxY
= -Infinity
; // extremes[series[0]][1];
2342 for (var j
= 0; j
< series
.length
; j
++) {
2343 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2344 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2346 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2348 // Add some padding and round up to an integer to be human-friendly.
2349 var span
= maxY
- minY
;
2350 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2351 if (span
== 0) { span
= maxY
; }
2352 var maxAxisY
= maxY
+ 0.1 * span
;
2353 var minAxisY
= minY
- 0.1 * span
;
2355 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2356 if (!this.attr_("avoidMinZero")) {
2357 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2358 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2361 if (this.attr_("includeZero")) {
2362 if (maxY
< 0) maxAxisY
= 0;
2363 if (minY
> 0) minAxisY
= 0;
2366 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2369 // Add ticks. By default, all axes inherit the tick positions of the
2370 // primary axis. However, if an axis is specifically marked as having
2371 // independent ticks, then that is permissible as well.
2372 if (i
== 0 || axis
.independentTicks
) {
2374 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2375 axis
.computedValueRange
[1],
2378 axis
.ticks
= ret
.ticks
;
2379 this.numYDigits_
= ret
.numDigits
;
2381 var p_axis
= this.axes_
[0];
2382 var p_ticks
= p_axis
.ticks
;
2383 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2384 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2385 var tick_values
= [];
2386 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2387 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2388 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2389 tick_values
.push(y_val
);
2393 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2394 axis
.computedValueRange
[1],
2395 this, axis
, tick_values
);
2396 axis
.ticks
= ret
.ticks
;
2397 this.numYDigits_
= ret
.numDigits
;
2403 * Calculates the rolling average of a data set.
2404 * If originalData is [label, val], rolls the average of those.
2405 * If originalData is [label, [, it's interpreted as [value, stddev]
2406 * and the roll is returned in the same form, with appropriately reduced
2407 * stddev for each value.
2408 * Note that this is where fractional input (i.e. '5/10') is converted into
2410 * @param {Array} originalData The data in the appropriate format (see above)
2411 * @param {Number} rollPeriod The number of points over which to average the
2414 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2415 if (originalData
.length
< 2)
2416 return originalData
;
2417 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2418 var rollingData
= [];
2419 var sigma
= this.attr_("sigma");
2421 if (this.fractions_
) {
2423 var den
= 0; // numerator/denominator
2425 for (var i
= 0; i
< originalData
.length
; i
++) {
2426 num
+= originalData
[i
][1][0];
2427 den
+= originalData
[i
][1][1];
2428 if (i
- rollPeriod
>= 0) {
2429 num
-= originalData
[i
- rollPeriod
][1][0];
2430 den
-= originalData
[i
- rollPeriod
][1][1];
2433 var date
= originalData
[i
][0];
2434 var value
= den
? num
/ den
: 0.0;
2435 if (this.attr_("errorBars")) {
2436 if (this.wilsonInterval_
) {
2437 // For more details on this confidence interval, see:
2438 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2440 var p
= value
< 0 ? 0 : value
, n
= den
;
2441 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2442 var denom
= 1 + sigma
* sigma
/ den
;
2443 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2444 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2445 rollingData
[i
] = [date
,
2446 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2448 rollingData
[i
] = [date
, [0, 0, 0]];
2451 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2452 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2455 rollingData
[i
] = [date
, mult
* value
];
2458 } else if (this.attr_("customBars")) {
2463 for (var i
= 0; i
< originalData
.length
; i
++) {
2464 var data
= originalData
[i
][1];
2466 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2468 if (y
!= null && !isNaN(y
)) {
2474 if (i
- rollPeriod
>= 0) {
2475 var prev
= originalData
[i
- rollPeriod
];
2476 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2483 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2484 1.0 * (mid
- low
) / count
,
2485 1.0 * (high
- mid
) / count
]];
2488 // Calculate the rolling average for the first rollPeriod - 1 points where
2489 // there is not enough data to roll over the full number of points
2490 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2491 if (!this.attr_("errorBars")){
2492 if (rollPeriod
== 1) {
2493 return originalData
;
2496 for (var i
= 0; i
< originalData
.length
; i
++) {
2499 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2500 var y
= originalData
[j
][1];
2501 if (y
== null || isNaN(y
)) continue;
2503 sum
+= originalData
[j
][1];
2506 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2508 rollingData
[i
] = [originalData
[i
][0], null];
2513 for (var i
= 0; i
< originalData
.length
; i
++) {
2517 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2518 var y
= originalData
[j
][1][0];
2519 if (y
== null || isNaN(y
)) continue;
2521 sum
+= originalData
[j
][1][0];
2522 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2525 var stddev
= Math
.sqrt(variance
) / num_ok
;
2526 rollingData
[i
] = [originalData
[i
][0],
2527 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2529 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2539 * Parses a date, returning the number of milliseconds since epoch. This can be
2540 * passed in as an xValueParser in the Dygraph constructor.
2541 * TODO(danvk): enumerate formats that this understands.
2542 * @param {String} A date in YYYYMMDD format.
2543 * @return {Number} Milliseconds since epoch.
2546 Dygraph
.dateParser
= function(dateStr
, self
) {
2549 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2550 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2551 while (dateStrSlashed
.search("-") != -1) {
2552 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2554 d
= Date
.parse(dateStrSlashed
);
2555 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2556 // TODO(danvk): remove support for this format. It's confusing.
2557 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2558 + "/" + dateStr
.substr(6,2);
2559 d
= Date
.parse(dateStrSlashed
);
2561 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2562 // "2009/07/12 12:34:56"
2563 d
= Date
.parse(dateStr
);
2566 if (!d
|| isNaN(d
)) {
2567 self
.error("Couldn't parse " + dateStr
+ " as a date");
2573 * Detects the type of the str (date or numeric) and sets the various
2574 * formatting attributes in this.attrs_ based on this type.
2575 * @param {String} str An x value.
2578 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2580 if (str
.indexOf('-') >= 0 ||
2581 str
.indexOf('/') >= 0 ||
2582 isNaN(parseFloat(str
))) {
2584 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2585 // TODO(danvk): remove support for this format.
2590 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2591 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2592 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2593 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2595 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
2596 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2597 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2598 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2603 * Parses a string in a special csv format. We expect a csv file where each
2604 * line is a date point, and the first field in each line is the date string.
2605 * We also expect that all remaining fields represent series.
2606 * if the errorBars attribute is set, then interpret the fields as:
2607 * date, series1, stddev1, series2, stddev2, ...
2608 * @param {Array.<Object>} data See above.
2611 * @return Array.<Object> An array with one entry for each row. These entries
2612 * are an array of cells in that row. The first entry is the parsed x-value for
2613 * the row. The second, third, etc. are the y-values. These can take on one of
2614 * three forms, depending on the CSV and constructor parameters:
2616 * 2. [ value, stddev ]
2617 * 3. [ low value, center value, high value ]
2619 Dygraph
.prototype.parseCSV_
= function(data
) {
2621 var lines
= data
.split("\n");
2623 // Use the default delimiter or fall back to a tab if that makes sense.
2624 var delim
= this.attr_('delimiter');
2625 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2630 if (this.labelsFromCSV_
) {
2632 this.attrs_
.labels
= lines
[0].split(delim
);
2635 // Parse the x as a float or return null if it's not a number.
2636 var parseFloatOrNull
= function(x
) {
2637 var val
= parseFloat(x
);
2638 // isFinite() returns false for NaN and +/-Infinity
.
2639 return isFinite(val
) ? val
: null;
2643 var defaultParserSet
= false; // attempt to auto-detect x value type
2644 var expectedCols
= this.attr_("labels").length
;
2645 var outOfOrder
= false;
2646 for (var i
= start
; i
< lines
.length
; i
++) {
2647 var line
= lines
[i
];
2648 if (line
.length
== 0) continue; // skip blank lines
2649 if (line
[0] == '#') continue; // skip comment lines
2650 var inFields
= line
.split(delim
);
2651 if (inFields
.length
< 2) continue;
2654 if (!defaultParserSet
) {
2655 this.detectTypeFromString_(inFields
[0]);
2656 xParser
= this.attr_("xValueParser");
2657 defaultParserSet
= true;
2659 fields
[0] = xParser(inFields
[0], this);
2661 // If fractions are expected, parse the numbers as "A/B
"
2662 if (this.fractions_) {
2663 for (var j = 1; j < inFields.length; j++) {
2664 // TODO(danvk): figure out an appropriate way to flag parse errors.
2665 var vals = inFields[j].split("/");
2666 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2668 } else if (this.attr_("errorBars
")) {
2669 // If there are error bars, values are (value, stddev) pairs
2670 for (var j = 1; j < inFields.length; j += 2)
2671 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2672 parseFloatOrNull(inFields[j + 1])];
2673 } else if (this.attr_("customBars
")) {
2674 // Bars are a low;center;high tuple
2675 for (var j = 1; j < inFields.length; j++) {
2676 var vals = inFields[j].split(";");
2677 fields[j] = [ parseFloatOrNull(vals[0]),
2678 parseFloatOrNull(vals[1]),
2679 parseFloatOrNull(vals[2]) ];
2682 // Values are just numbers
2683 for (var j = 1; j < inFields.length; j++) {
2684 fields[j] = parseFloatOrNull(inFields[j]);
2687 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2692 if (fields.length != expectedCols) {
2693 this.error("Number of columns
in line
" + i + " (" + fields.length +
2694 ") does not agree
with number of
labels (" + expectedCols +
2700 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2701 ret.sort(function(a,b) { return a[0] - b[0] });
2708 * The user has provided their data as a pre-packaged JS array. If the x values
2709 * are numeric, this is the same as dygraphs' internal format. If the x values
2710 * are dates, we need to convert them from Date objects to ms since epoch.
2711 * @param {Array.<Object>} data
2712 * @return {Array.<Object>} data with numeric x values.
2714 Dygraph.prototype.parseArray_ = function(data) {
2715 // Peek at the first x value to see if it's numeric.
2716 if (data.length == 0) {
2717 this.error("Can
't plot empty data set");
2720 if (data[0].length == 0) {
2721 this.error("Data set cannot contain an empty row");
2725 if (this.attr_("labels") == null) {
2726 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2727 "in the options parameter");
2728 this.attrs_.labels = [ "X" ];
2729 for (var i = 1; i < data[0].length; i++) {
2730 this.attrs_.labels.push("Y" + i);
2734 if (Dygraph.isDateLike(data[0][0])) {
2735 // Some intelligent defaults for a date x-axis.
2736 this.attrs_.xValueFormatter = Dygraph.dateString_;
2737 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2738 this.attrs_.xTicker = Dygraph.dateTicker;
2740 // Assume they're all dates
.
2741 var parsedData
= Dygraph
.clone(data
);
2742 for (var i
= 0; i
< data
.length
; i
++) {
2743 if (parsedData
[i
].length
== 0) {
2744 this.error("Row " + (1 + i
) + " of data is empty");
2747 if (parsedData
[i
][0] == null
2748 || typeof(parsedData
[i
][0].getTime
) != 'function'
2749 || isNaN(parsedData
[i
][0].getTime())) {
2750 this.error("x value in row " + (1 + i
) + " is not a Date");
2753 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2757 // Some intelligent defaults for a numeric x-axis.
2758 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
2759 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2765 * Parses a DataTable object from gviz.
2766 * The data is expected to have a first column that is either a date or a
2767 * number. All subsequent columns must be numbers. If there is a clear mismatch
2768 * between this.xValueParser_ and the type of the first column, it will be
2769 * fixed. Fills out rawData_.
2770 * @param {Array.<Object>} data See above.
2773 Dygraph
.prototype.parseDataTable_
= function(data
) {
2774 var cols
= data
.getNumberOfColumns();
2775 var rows
= data
.getNumberOfRows();
2777 var indepType
= data
.getColumnType(0);
2778 if (indepType
== 'date' || indepType
== 'datetime') {
2779 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2780 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2781 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2782 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2783 } else if (indepType
== 'number') {
2784 this.attrs_
.xValueFormatter
= this.attrs_
.yValueFormatter
;
2785 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2786 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2787 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2789 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2790 "column 1 of DataTable input (Got '" + indepType
+ "')");
2794 // Array of the column indices which contain data (and not annotations).
2796 var annotationCols
= {}; // data index -> [annotation cols]
2797 var hasAnnotations
= false;
2798 for (var i
= 1; i
< cols
; i
++) {
2799 var type
= data
.getColumnType(i
);
2800 if (type
== 'number') {
2802 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2803 // This is OK -- it's an annotation column.
2804 var dataIdx
= colIdx
[colIdx
.length
- 1];
2805 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2806 annotationCols
[dataIdx
] = [i
];
2808 annotationCols
[dataIdx
].push(i
);
2810 hasAnnotations
= true;
2812 this.error("Only 'number' is supported as a dependent type with Gviz." +
2813 " 'string' is only supported if displayAnnotations is true");
2817 // Read column labels
2818 // TODO(danvk): add support back for errorBars
2819 var labels
= [data
.getColumnLabel(0)];
2820 for (var i
= 0; i
< colIdx
.length
; i
++) {
2821 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2822 if (this.attr_("errorBars")) i
+= 1;
2824 this.attrs_
.labels
= labels
;
2825 cols
= labels
.length
;
2828 var outOfOrder
= false;
2829 var annotations
= [];
2830 for (var i
= 0; i
< rows
; i
++) {
2832 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2833 data
.getValue(i
, 0) === null) {
2834 this.warn("Ignoring row " + i
+
2835 " of DataTable because of undefined or null first column.");
2839 if (indepType
== 'date' || indepType
== 'datetime') {
2840 row
.push(data
.getValue(i
, 0).getTime());
2842 row
.push(data
.getValue(i
, 0));
2844 if (!this.attr_("errorBars")) {
2845 for (var j
= 0; j
< colIdx
.length
; j
++) {
2846 var col
= colIdx
[j
];
2847 row
.push(data
.getValue(i
, col
));
2848 if (hasAnnotations
&&
2849 annotationCols
.hasOwnProperty(col
) &&
2850 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2852 ann
.series
= data
.getColumnLabel(col
);
2854 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2856 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2857 if (k
) ann
.text
+= "\n";
2858 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2860 annotations
.push(ann
);
2864 for (var j
= 0; j
< cols
- 1; j
++) {
2865 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2868 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2872 // Strip out infinities, which give dygraphs problems later on.
2873 for (var j
= 0; j
< row
.length
; j
++) {
2874 if (!isFinite(row
[j
])) row
[j
] = null;
2880 this.warn("DataTable is out of order; order it correctly to speed loading.");
2881 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2883 this.rawData_
= ret
;
2885 if (annotations
.length
> 0) {
2886 this.setAnnotations(annotations
, true);
2890 // These functions are all based on MochiKit.
2891 Dygraph
.update
= function (self
, o
) {
2892 if (typeof(o
) != 'undefined' && o
!== null) {
2894 if (o
.hasOwnProperty(k
)) {
2902 Dygraph
.isArrayLike
= function (o
) {
2903 var typ
= typeof(o
);
2905 (typ
!= 'object' && !(typ
== 'function' &&
2906 typeof(o
.item
) == 'function')) ||
2908 typeof(o
.length
) != 'number' ||
2916 Dygraph
.isDateLike
= function (o
) {
2917 if (typeof(o
) != "object" || o
=== null ||
2918 typeof(o
.getTime
) != 'function') {
2924 Dygraph
.clone
= function(o
) {
2925 // TODO(danvk): figure out how MochiKit's version works
2927 for (var i
= 0; i
< o
.length
; i
++) {
2928 if (Dygraph
.isArrayLike(o
[i
])) {
2929 r
.push(Dygraph
.clone(o
[i
]));
2939 * Get the CSV data. If it's in a function, call that function. If it's in a
2940 * file, do an XMLHttpRequest to get it.
2943 Dygraph
.prototype.start_
= function() {
2944 if (typeof this.file_
== 'function') {
2945 // CSV string. Pretend we got it via XHR.
2946 this.loadedEvent_(this.file_());
2947 } else if (Dygraph
.isArrayLike(this.file_
)) {
2948 this.rawData_
= this.parseArray_(this.file_
);
2950 } else if (typeof this.file_
== 'object' &&
2951 typeof this.file_
.getColumnRange
== 'function') {
2952 // must be a DataTable from gviz.
2953 this.parseDataTable_(this.file_
);
2955 } else if (typeof this.file_
== 'string') {
2956 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2957 if (this.file_
.indexOf('\n') >= 0) {
2958 this.loadedEvent_(this.file_
);
2960 var req
= new XMLHttpRequest();
2962 req
.onreadystatechange
= function () {
2963 if (req
.readyState
== 4) {
2964 if (req
.status
== 200) {
2965 caller
.loadedEvent_(req
.responseText
);
2970 req
.open("GET", this.file_
, true);
2974 this.error("Unknown data format: " + (typeof this.file_
));
2979 * Changes various properties of the graph. These can include:
2981 * <li>file: changes the source data for the graph</li>
2982 * <li>errorBars: changes whether the data contains stddev</li>
2984 * @param {Object} attrs The new properties and values
2986 Dygraph
.prototype.updateOptions
= function(attrs
) {
2987 // TODO(danvk): this is a mess. Rethink this function.
2988 if ('rollPeriod' in attrs
) {
2989 this.rollPeriod_
= attrs
.rollPeriod
;
2991 if ('dateWindow' in attrs
) {
2992 this.dateWindow_
= attrs
.dateWindow
;
2995 // TODO(danvk): validate per-series options.
3000 // highlightCircleSize
3002 Dygraph
.update(this.user_attrs_
, attrs
);
3003 Dygraph
.update(this.renderOptions_
, attrs
);
3005 this.labelsFromCSV_
= (this.attr_("labels") == null);
3007 // TODO(danvk): this doesn't match the constructor logic
3008 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3009 if (attrs
['file']) {
3010 this.file_
= attrs
['file'];
3018 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3019 * containing div (which has presumably changed size since the dygraph was
3020 * instantiated. If the width/height are specified, the div will be resized.
3022 * This is far more efficient than destroying and re-instantiating a
3023 * Dygraph, since it doesn't have to reparse the underlying data.
3025 * @param {Number} width Width (in pixels)
3026 * @param {Number} height Height (in pixels)
3028 Dygraph
.prototype.resize
= function(width
, height
) {
3029 if (this.resize_lock
) {
3032 this.resize_lock
= true;
3034 if ((width
=== null) != (height
=== null)) {
3035 this.warn("Dygraph.resize() should be called with zero parameters or " +
3036 "two non-NULL parameters. Pretending it was zero.");
3037 width
= height
= null;
3040 // TODO(danvk): there should be a clear() method.
3041 this.maindiv_
.innerHTML
= "";
3042 this.attrs_
.labelsDiv
= null;
3045 this.maindiv_
.style
.width
= width
+ "px";
3046 this.maindiv_
.style
.height
= height
+ "px";
3047 this.width_
= width
;
3048 this.height_
= height
;
3050 this.width_
= this.maindiv_
.offsetWidth
;
3051 this.height_
= this.maindiv_
.offsetHeight
;
3054 this.createInterface_();
3057 this.resize_lock
= false;
3061 * Adjusts the number of points in the rolling average. Updates the graph to
3062 * reflect the new averaging period.
3063 * @param {Number} length Number of points over which to average the data.
3065 Dygraph
.prototype.adjustRoll
= function(length
) {
3066 this.rollPeriod_
= length
;
3071 * Returns a boolean array of visibility statuses.
3073 Dygraph
.prototype.visibility
= function() {
3074 // Do lazy-initialization, so that this happens after we know the number of
3076 if (!this.attr_("visibility")) {
3077 this.attrs_
["visibility"] = [];
3079 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3080 this.attr_("visibility").push(true);
3082 return this.attr_("visibility");
3086 * Changes the visiblity of a series.
3088 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3089 var x
= this.visibility();
3090 if (num
< 0 || num
>= x
.length
) {
3091 this.warn("invalid series number in setVisibility: " + num
);
3099 * Update the list of annotations and redraw the chart.
3101 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3102 // Only add the annotation CSS rule once we know it will be used.
3103 Dygraph
.addAnnotationRule();
3104 this.annotations_
= ann
;
3105 this.layout_
.setAnnotations(this.annotations_
);
3106 if (!suppressDraw
) {
3112 * Return the list of annotations.
3114 Dygraph
.prototype.annotations
= function() {
3115 return this.annotations_
;
3119 * Get the index of a series (column) given its name. The first column is the
3120 * x-axis, so the data series start with index 1.
3122 Dygraph
.prototype.indexFromSetName
= function(name
) {
3123 var labels
= this.attr_("labels");
3124 for (var i
= 0; i
< labels
.length
; i
++) {
3125 if (labels
[i
] == name
) return i
;
3130 Dygraph
.addAnnotationRule
= function() {
3131 if (Dygraph
.addedAnnotationCSS
) return;
3133 var rule
= "border: 1px solid black; " +
3134 "background-color: white; " +
3135 "text-align: center;";
3137 var styleSheetElement
= document
.createElement("style");
3138 styleSheetElement
.type
= "text/css";
3139 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3141 // Find the first style sheet that we can access.
3142 // We may not add a rule to a style sheet from another domain for security
3143 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3144 // adds its own style sheets from google.com.
3145 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3146 if (document
.styleSheets
[i
].disabled
) continue;
3147 var mysheet
= document
.styleSheets
[i
];
3149 if (mysheet
.insertRule
) { // Firefox
3150 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3151 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3152 } else if (mysheet
.addRule
) { // IE
3153 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3155 Dygraph
.addedAnnotationCSS
= true;
3158 // Was likely a security exception.
3162 this.warn("Unable to add default annotation CSS rule; display may be off.");
3166 * Create a new canvas element. This is more complex than a simple
3167 * document.createElement("canvas") because of IE and excanvas.
3169 Dygraph
.createCanvas
= function() {
3170 var canvas
= document
.createElement("canvas");
3172 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3173 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3174 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3182 * A wrapper around Dygraph that implements the gviz API.
3183 * @param {Object} container The DOM object the visualization should live in.
3185 Dygraph
.GVizChart
= function(container
) {
3186 this.container
= container
;
3189 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3190 // Clear out any existing dygraph.
3191 // TODO(danvk): would it make more sense to simply redraw using the current
3192 // date_graph object?
3193 this.container
.innerHTML
= '';
3194 if (typeof(this.date_graph
) != 'undefined') {
3195 this.date_graph
.destroy();
3198 this.date_graph
= new Dygraph(this.container
, data
, options
);
3202 * Google charts compatible setSelection
3203 * Only row selection is supported, all points in the row will be highlighted
3204 * @param {Array} array of the selected cells
3207 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3209 if (selection_array
.length
) {
3210 row
= selection_array
[0].row
;
3212 this.date_graph
.setSelection(row
);
3216 * Google charts compatible getSelection implementation
3217 * @return {Array} array of the selected cells
3220 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3223 var row
= this.date_graph
.getSelection();
3225 if (row
< 0) return selection
;
3228 for (var i
in this.date_graph
.layout_
.datasets
) {
3229 selection
.push({row
: row
, column
: col
});
3236 // Older pages may still use this name.
3237 DateGraph
= Dygraph
;