1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://dygraphs.com/
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
83 // Default attribute values.
84 Dygraph
.DEFAULT_ATTRS
= {
85 highlightCircleSize
: 3,
91 // TODO(danvk): move defaults from createStatusMessage_ here.
93 labelsSeparateLines
: false,
94 labelsShowZeroValues
: true,
97 showLabelsOnHighlight
: true,
99 yValueFormatter
: function(x
, opt_numDigits
) {
100 return x
.toPrecision(opt_numDigits
|| 2);
106 axisLabelFontSize
: 14,
109 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
113 xValueFormatter
: Dygraph
.dateString_
,
114 xValueParser
: Dygraph
.dateParser
,
115 xTicker
: Dygraph
.dateTicker
,
123 wilsonInterval
: true, // only relevant if fractions is true
127 connectSeparatedPoints
: false,
130 hideOverlayOnMouseOut
: true,
135 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
138 // Various logging levels.
144 // Directions for panning and zooming. Use bit operations when combined
145 // values are possible.
146 Dygraph
.HORIZONTAL
= 1;
147 Dygraph
.VERTICAL
= 2;
149 // Used for initializing annotation CSS rules only once.
150 Dygraph
.addedAnnotationCSS
= false;
152 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
153 // Labels is no longer a constructor parameter, since it's typically set
154 // directly from the data source. It also conains a name for the x-axis,
155 // which the previous constructor form did not.
156 if (labels
!= null) {
157 var new_labels
= ["Date"];
158 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
159 Dygraph
.update(attrs
, { 'labels': new_labels
});
161 this.__init__(div
, file
, attrs
);
165 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
166 * and context <canvas> inside of it. See the constructor for details.
168 * @param {Element} div the Element to render the graph into.
169 * @param {String | Function} file Source data
170 * @param {Object} attrs Miscellaneous other options
173 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
174 // Hack for IE: if we're using excanvas and the document hasn't finished
175 // loading yet (and hence may not have initialized whatever it needs to
176 // initialize), then keep calling this routine periodically until it has.
177 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
178 typeof(G_vmlCanvasManager
) != 'undefined' &&
179 document
.readyState
!= 'complete') {
181 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
184 // Support two-argument constructor
185 if (attrs
== null) { attrs
= {}; }
187 // Copy the important bits into the object
188 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
191 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
192 this.previousVerticalX_
= -1;
193 this.fractions_
= attrs
.fractions
|| false;
194 this.dateWindow_
= attrs
.dateWindow
|| null;
196 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
197 this.is_initial_draw_
= true;
198 this.annotations_
= [];
201 // Clear the div. This ensure that, if multiple dygraphs are passed the same
202 // div, then only one will be drawn.
205 // If the div isn't already sized then inherit from our attrs or
206 // give it a default size.
207 if (div
.style
.width
== '') {
208 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
210 if (div
.style
.height
== '') {
211 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
213 this.width_
= parseInt(div
.style
.width
, 10);
214 this.height_
= parseInt(div
.style
.height
, 10);
215 // The div might have been specified as percent of the current window size,
216 // convert that to an appropriate number of pixels.
217 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
218 this.width_
= div
.offsetWidth
;
220 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
221 this.height_
= div
.offsetHeight
;
224 if (this.width_
== 0) {
225 this.error("dygraph has zero width. Please specify a width in pixels.");
227 if (this.height_
== 0) {
228 this.error("dygraph has zero height. Please specify a height in pixels.");
231 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
232 if (attrs
['stackedGraph']) {
233 attrs
['fillGraph'] = true;
234 // TODO(nikhilk): Add any other stackedGraph checks here.
237 // Dygraphs has many options, some of which interact with one another.
238 // To keep track of everything, we maintain two sets of options:
240 // this.user_attrs_ only options explicitly set by the user.
241 // this.attrs_ defaults, options derived from user_attrs_, data.
243 // Options are then accessed this.attr_('attr'), which first looks at
244 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
245 // defaults without overriding behavior that the user specifically asks for.
246 this.user_attrs_
= {};
247 Dygraph
.update(this.user_attrs_
, attrs
);
250 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
252 this.boundaryIds_
= [];
254 // Make a note of whether labels will be pulled from the CSV file.
255 this.labelsFromCSV_
= (this.attr_("labels") == null);
257 // Create the containing DIV and other interactive elements
258 this.createInterface_();
263 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
265 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
266 this.user_attrs_
[seriesName
] != null &&
267 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
268 return this.user_attrs_
[seriesName
][name
];
269 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
270 return this.user_attrs_
[name
];
271 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
272 return this.attrs_
[name
];
278 // TODO(danvk): any way I can get the line numbers to be this.warn call?
279 Dygraph
.prototype.log
= function(severity
, message
) {
280 if (typeof(console
) != 'undefined') {
283 console
.debug('dygraphs: ' + message
);
286 console
.info('dygraphs: ' + message
);
288 case Dygraph
.WARNING
:
289 console
.warn('dygraphs: ' + message
);
292 console
.error('dygraphs: ' + message
);
297 Dygraph
.prototype.info
= function(message
) {
298 this.log(Dygraph
.INFO
, message
);
300 Dygraph
.prototype.warn
= function(message
) {
301 this.log(Dygraph
.WARNING
, message
);
303 Dygraph
.prototype.error
= function(message
) {
304 this.log(Dygraph
.ERROR
, message
);
308 * Returns the current rolling period, as set by the user or an option.
309 * @return {Number} The number of points in the rolling window
311 Dygraph
.prototype.rollPeriod
= function() {
312 return this.rollPeriod_
;
316 * Returns the currently-visible x-range. This can be affected by zooming,
317 * panning or a call to updateOptions.
318 * Returns a two-element array: [left, right].
319 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
321 Dygraph
.prototype.xAxisRange
= function() {
322 if (this.dateWindow_
) return this.dateWindow_
;
324 // The entire chart is visible.
325 var left
= this.rawData_
[0][0];
326 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
327 return [left
, right
];
331 * Returns the currently-visible y-range for an axis. This can be affected by
332 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
333 * called with no arguments, returns the range of the first axis.
334 * Returns a two-element array: [bottom, top].
336 Dygraph
.prototype.yAxisRange
= function(idx
) {
337 if (typeof(idx
) == "undefined") idx
= 0;
338 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
339 return [ this.axes_
[idx
].computedValueRange
[0],
340 this.axes_
[idx
].computedValueRange
[1] ];
344 * Returns the currently-visible y-ranges for each axis. This can be affected by
345 * zooming, panning, calls to updateOptions, etc.
346 * Returns an array of [bottom, top] pairs, one for each y-axis.
348 Dygraph
.prototype.yAxisRanges
= function() {
350 for (var i
= 0; i
< this.axes_
.length
; i
++) {
351 ret
.push(this.yAxisRange(i
));
356 // TODO(danvk): use these functions throughout dygraphs.
358 * Convert from data coordinates to canvas/div X/Y coordinates.
359 * If specified, do this conversion for the coordinate system of a particular
360 * axis. Uses the first axis by default.
361 * Returns a two-element array: [X, Y]
363 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
364 var ret
= [null, null];
365 var area
= this.plotter_
.area
;
367 var xRange
= this.xAxisRange();
368 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
372 var yRange
= this.yAxisRange(axis
);
373 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
380 * Convert from canvas/div coords to data coordinates.
381 * If specified, do this conversion for the coordinate system of a particular
382 * axis. Uses the first axis by default.
383 * Returns a two-element array: [X, Y]
385 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
386 var ret
= [null, null];
387 var area
= this.plotter_
.area
;
389 var xRange
= this.xAxisRange();
390 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
394 var yRange
= this.yAxisRange(axis
);
395 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
402 * Returns the number of columns (including the independent variable).
404 Dygraph
.prototype.numColumns
= function() {
405 return this.rawData_
[0].length
;
409 * Returns the number of rows (excluding any header/label row).
411 Dygraph
.prototype.numRows
= function() {
412 return this.rawData_
.length
;
416 * Returns the value in the given row and column. If the row and column exceed
417 * the bounds on the data, returns null. Also returns null if the value is
420 Dygraph
.prototype.getValue
= function(row
, col
) {
421 if (row
< 0 || row
> this.rawData_
.length
) return null;
422 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
424 return this.rawData_
[row
][col
];
427 Dygraph
.addEvent
= function(el
, evt
, fn
) {
428 var normed_fn
= function(e
) {
429 if (!e
) var e
= window
.event
;
432 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
433 el
.addEventListener(evt
, normed_fn
, false);
435 el
.attachEvent('on' + evt
, normed_fn
);
440 // Based on the article at
441 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
442 Dygraph
.cancelEvent
= function(e
) {
443 e
= e
? e
: window
.event
;
444 if (e
.stopPropagation
) {
447 if (e
.preventDefault
) {
450 e
.cancelBubble
= true;
452 e
.returnValue
= false;
457 * Generates interface elements for the Dygraph: a containing div, a div to
458 * display the current point, and a textbox to adjust the rolling average
459 * period. Also creates the Renderer/Layout elements.
462 Dygraph
.prototype.createInterface_
= function() {
463 // Create the all-enclosing graph div
464 var enclosing
= this.maindiv_
;
466 this.graphDiv
= document
.createElement("div");
467 this.graphDiv
.style
.width
= this.width_
+ "px";
468 this.graphDiv
.style
.height
= this.height_
+ "px";
469 enclosing
.appendChild(this.graphDiv
);
471 // Create the canvas for interactive parts of the chart.
472 this.canvas_
= Dygraph
.createCanvas();
473 this.canvas_
.style
.position
= "absolute";
474 this.canvas_
.width
= this.width_
;
475 this.canvas_
.height
= this.height_
;
476 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
477 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
479 // ... and for static parts of the chart.
480 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
482 // The interactive parts of the graph are drawn on top of the chart.
483 this.graphDiv
.appendChild(this.hidden_
);
484 this.graphDiv
.appendChild(this.canvas_
);
485 this.mouseEventElement_
= this.canvas_
;
488 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
489 dygraph
.mouseMove_(e
);
491 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
492 dygraph
.mouseOut_(e
);
495 // Create the grapher
496 // TODO(danvk): why does the Layout need its own set of options?
497 this.layoutOptions_
= { 'xOriginIsZero': false };
498 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
499 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
500 Dygraph
.update(this.layoutOptions_
, {
501 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
503 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
505 // TODO(danvk): why does the Renderer need its own set of options?
506 this.renderOptions_
= { colorScheme
: this.colors_
,
508 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
509 Dygraph
.update(this.renderOptions_
, this.attrs_
);
510 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
512 this.createStatusMessage_();
513 this.createDragInterface_();
517 * Detach DOM elements in the dygraph and null out all data references.
518 * Calling this when you're done with a dygraph can dramatically reduce memory
519 * usage. See, e.g., the tests/perf.html example.
521 Dygraph
.prototype.destroy
= function() {
522 var removeRecursive
= function(node
) {
523 while (node
.hasChildNodes()) {
524 removeRecursive(node
.firstChild
);
525 node
.removeChild(node
.firstChild
);
528 removeRecursive(this.maindiv_
);
530 var nullOut
= function(obj
) {
532 if (typeof(obj
[n
]) === 'object') {
538 // These may not all be necessary, but it can't hurt...
539 nullOut(this.layout_
);
540 nullOut(this.plotter_
);
545 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
546 * this particular canvas. All Dygraph work is done on this.canvas_.
547 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
548 * @return {Object} The newly-created canvas
551 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
552 var h
= Dygraph
.createCanvas();
553 h
.style
.position
= "absolute";
554 // TODO(danvk): h should be offset from canvas. canvas needs to include
555 // some extra area to make it easier to zoom in on the far left and far
556 // right. h needs to be precisely the plot area, so that clipping occurs.
557 h
.style
.top
= canvas
.style
.top
;
558 h
.style
.left
= canvas
.style
.left
;
559 h
.width
= this.width_
;
560 h
.height
= this.height_
;
561 h
.style
.width
= this.width_
+ "px"; // for IE
562 h
.style
.height
= this.height_
+ "px"; // for IE
566 // Taken from MochiKit.Color
567 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
571 if (saturation
=== 0) {
576 var i
= Math
.floor(hue
* 6);
577 var f
= (hue
* 6) - i
;
578 var p
= value
* (1 - saturation
);
579 var q
= value
* (1 - (saturation
* f
));
580 var t
= value
* (1 - (saturation
* (1 - f
)));
582 case 1: red
= q
; green
= value
; blue
= p
; break;
583 case 2: red
= p
; green
= value
; blue
= t
; break;
584 case 3: red
= p
; green
= q
; blue
= value
; break;
585 case 4: red
= t
; green
= p
; blue
= value
; break;
586 case 5: red
= value
; green
= p
; blue
= q
; break;
587 case 6: // fall through
588 case 0: red
= value
; green
= t
; blue
= p
; break;
591 red
= Math
.floor(255 * red
+ 0.5);
592 green
= Math
.floor(255 * green
+ 0.5);
593 blue
= Math
.floor(255 * blue
+ 0.5);
594 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
599 * Generate a set of distinct colors for the data series. This is done with a
600 * color wheel. Saturation/Value are customizable, and the hue is
601 * equally-spaced around the color wheel. If a custom set of colors is
602 * specified, that is used instead.
605 Dygraph
.prototype.setColors_
= function() {
606 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
607 // away with this.renderOptions_.
608 var num
= this.attr_("labels").length
- 1;
610 var colors
= this.attr_('colors');
612 var sat
= this.attr_('colorSaturation') || 1.0;
613 var val
= this.attr_('colorValue') || 0.5;
614 var half
= Math
.ceil(num
/ 2);
615 for (var i
= 1; i
<= num
; i
++) {
616 if (!this.visibility()[i
-1]) continue;
617 // alternate colors for high contrast.
618 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
619 var hue
= (1.0 * idx
/ (1 + num
));
620 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
623 for (var i
= 0; i
< num
; i
++) {
624 if (!this.visibility()[i
]) continue;
625 var colorStr
= colors
[i
% colors
.length
];
626 this.colors_
.push(colorStr
);
630 // TODO(danvk): update this w/r
/t/ the
new options system
.
631 this.renderOptions_
.colorScheme
= this.colors_
;
632 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
633 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
634 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
638 * Return the list of colors. This is either the list of colors passed in the
639 * attributes, or the autogenerated list of rgb(r,g,b) strings.
640 * @return {Array<string>} The list of colors.
642 Dygraph
.prototype.getColors
= function() {
646 // The following functions are from quirksmode.org with a modification for Safari from
647 // http://blog.firetree.net/2005/07/04/javascript-find-position/
648 // http://www.quirksmode.org/js
/findpos
.html
649 Dygraph
.findPosX
= function(obj
) {
654 curleft
+= obj
.offsetLeft
;
655 if(!obj
.offsetParent
)
657 obj
= obj
.offsetParent
;
664 Dygraph
.findPosY
= function(obj
) {
669 curtop
+= obj
.offsetTop
;
670 if(!obj
.offsetParent
)
672 obj
= obj
.offsetParent
;
682 * Create the div that contains information on the selected point(s)
683 * This goes in the top right of the canvas, unless an external div has already
687 Dygraph
.prototype.createStatusMessage_
= function() {
688 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
689 if (userLabelsDiv
&& null != userLabelsDiv
690 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
691 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
693 if (!this.attr_("labelsDiv")) {
694 var divWidth
= this.attr_('labelsDivWidth');
696 "position": "absolute",
699 "width": divWidth
+ "px",
701 "left": (this.width_
- divWidth
- 2) + "px",
702 "background": "white",
704 "overflow": "hidden"};
705 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
706 var div
= document
.createElement("div");
707 for (var name
in messagestyle
) {
708 if (messagestyle
.hasOwnProperty(name
)) {
709 div
.style
[name
] = messagestyle
[name
];
712 this.graphDiv
.appendChild(div
);
713 this.attrs_
.labelsDiv
= div
;
718 * Position the labels div so that its right edge is flush with the right edge
719 * of the charting area.
721 Dygraph
.prototype.positionLabelsDiv_
= function() {
722 // Don't touch a user-specified labelsDiv.
723 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
725 var area
= this.plotter_
.area
;
726 var div
= this.attr_("labelsDiv");
727 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
731 * Create the text box to adjust the averaging period
734 Dygraph
.prototype.createRollInterface_
= function() {
735 // Create a roller if one doesn't exist already.
737 this.roller_
= document
.createElement("input");
738 this.roller_
.type
= "text";
739 this.roller_
.style
.display
= "none";
740 this.graphDiv
.appendChild(this.roller_
);
743 var display
= this.attr_('showRoller') ? 'block' : 'none';
745 var textAttr
= { "position": "absolute",
747 "top": (this.plotter_
.area
.h
- 25) + "px",
748 "left": (this.plotter_
.area
.x
+ 1) + "px",
751 this.roller_
.size
= "2";
752 this.roller_
.value
= this.rollPeriod_
;
753 for (var name
in textAttr
) {
754 if (textAttr
.hasOwnProperty(name
)) {
755 this.roller_
.style
[name
] = textAttr
[name
];
760 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
763 // These functions are taken from MochiKit.Signal
764 Dygraph
.pageX
= function(e
) {
766 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
769 var b
= document
.body
;
771 (de
.scrollLeft
|| b
.scrollLeft
) -
772 (de
.clientLeft
|| 0);
776 Dygraph
.pageY
= function(e
) {
778 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
781 var b
= document
.body
;
783 (de
.scrollTop
|| b
.scrollTop
) -
788 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
789 return Dygraph
.pageX(e
) - context
.px
792 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
793 return Dygraph
.pageY(e
) - context
.py
796 // Called in response to an interaction model operation that
797 // should start the default panning behavior.
799 // It's used in the default callback for "mousedown" operations.
800 // Custom interaction model builders can use it to provide the default
803 Dygraph
.startPan
= function(event
, g
, context
) {
804 // have to be zoomed in to pan.
805 // TODO(konigsberg): Let's loosen this zoom-to-pan restriction, also
806 // perhaps create panning boundaries? A more flexible pan would make it,
807 // ahem, 'pan-useful'.
809 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
810 if (g
.axes_
[i
].valueWindow
|| g
.axes_
[i
].valueRange
) {
815 if (!g
.dateWindow_
&& !zoomedY
) return;
817 context
.isPanning
= true;
818 var xRange
= g
.xAxisRange();
819 context
.dateRange
= xRange
[1] - xRange
[0];
821 // Record the range of each y-axis at the start of the drag.
822 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
823 context
.is2DPan
= false;
824 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
825 var axis
= g
.axes_
[i
];
826 var yRange
= g
.yAxisRange(i
);
827 axis
.dragValueRange
= yRange
[1] - yRange
[0];
828 var r
= g
.toDataCoords(null, context
.dragStartY
, i
);
829 axis
.draggingValue
= r
[1];
830 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
833 // TODO(konigsberg): Switch from all this math to toDataCoords?
834 // Seems to work for the dragging value.
835 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
838 // Called in response to an interaction model operation that
839 // responds to an event that pans the view.
841 // It's used in the default callback for "mousemove" operations.
842 // Custom interaction model builders can use it to provide the default
845 Dygraph
.movePan
= function(event
, g
, context
) {
846 context
.dragEndX
= g
.dragGetX_(event
, context
);
847 context
.dragEndY
= g
.dragGetY_(event
, context
);
849 // TODO(danvk): update this comment
850 // Want to have it so that:
851 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
852 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
853 // 3. draggingValue appears at dragEndY.
854 // 4. valueRange is unaltered.
856 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
857 var maxDate
= minDate
+ context
.dateRange
;
858 g
.dateWindow_
= [minDate
, maxDate
];
860 // y-axis scaling is automatic unless this is a full 2D pan.
861 if (context
.is2DPan
) {
862 // Adjust each axis appropriately.
863 var y_frac
= context
.dragEndY
/ g
.height_
;
864 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
865 var axis
= g
.axes_
[i
];
866 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
867 var minValue
= maxValue
- axis
.dragValueRange
;
868 axis
.valueWindow
= [ minValue
, maxValue
];
875 // Called in response to an interaction model operation that
876 // responds to an event that ends panning.
878 // It's used in the default callback for "mouseup" operations.
879 // Custom interaction model builders can use it to provide the default
882 Dygraph
.endPan
= function(event
, g
, context
) {
883 context
.isPanning
= false;
884 context
.is2DPan
= false;
885 context
.draggingDate
= null;
886 context
.dateRange
= null;
887 context
.valueRange
= null;
890 // Called in response to an interaction model operation that
891 // responds to an event that starts zooming.
893 // It's used in the default callback for "mousedown" operations.
894 // Custom interaction model builders can use it to provide the default
897 Dygraph
.startZoom
= function(event
, g
, context
) {
898 context
.isZooming
= true;
901 // Called in response to an interaction model operation that
902 // responds to an event that defines zoom boundaries.
904 // It's used in the default callback for "mousemove" operations.
905 // Custom interaction model builders can use it to provide the default
908 Dygraph
.moveZoom
= function(event
, g
, context
) {
909 context
.dragEndX
= g
.dragGetX_(event
, context
);
910 context
.dragEndY
= g
.dragGetY_(event
, context
);
912 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
913 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
915 // drag direction threshold for y axis is twice as large as x axis
916 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
919 context
.dragDirection
,
924 context
.prevDragDirection
,
928 context
.prevEndX
= context
.dragEndX
;
929 context
.prevEndY
= context
.dragEndY
;
930 context
.prevDragDirection
= context
.dragDirection
;
933 // Called in response to an interaction model operation that
934 // responds to an event that performs a zoom based on previously defined
937 // It's used in the default callback for "mouseup" operations.
938 // Custom interaction model builders can use it to provide the default
941 Dygraph
.endZoom
= function(event
, g
, context
) {
942 context
.isZooming
= false;
943 context
.dragEndX
= g
.dragGetX_(event
, context
);
944 context
.dragEndY
= g
.dragGetY_(event
, context
);
945 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
946 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
948 if (regionWidth
< 2 && regionHeight
< 2 &&
949 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
950 // TODO(danvk): pass along more info about the points, e.g. 'x'
951 if (g
.attr_('clickCallback') != null) {
952 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
954 if (g
.attr_('pointClickCallback')) {
955 // check if the click was on a particular point.
957 var closestDistance
= 0;
958 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
959 var p
= g
.selPoints_
[i
];
960 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
961 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
962 if (closestIdx
== -1 || distance
< closestDistance
) {
963 closestDistance
= distance
;
968 // Allow any click within two pixels of the dot.
969 var radius
= g
.attr_('highlightCircleSize') + 2;
970 if (closestDistance
<= 5 * 5) {
971 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
976 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
977 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
978 Math
.max(context
.dragStartX
, context
.dragEndX
));
979 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
980 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
981 Math
.max(context
.dragStartY
, context
.dragEndY
));
983 g
.canvas_
.getContext("2d").clearRect(0, 0,
987 context
.dragStartX
= null;
988 context
.dragStartY
= null;
991 Dygraph
.defaultInteractionModel
= {
992 // Track the beginning of drag events
993 mousedown
: function(event
, g
, context
) {
994 context
.initializeMouseDown(event
, g
, context
);
996 if (event
.altKey
|| event
.shiftKey
) {
997 Dygraph
.startPan(event
, g
, context
);
999 Dygraph
.startZoom(event
, g
, context
);
1003 // Draw zoom rectangles when the mouse is down and the user moves around
1004 mousemove
: function(event
, g
, context
) {
1005 if (context
.isZooming
) {
1006 Dygraph
.moveZoom(event
, g
, context
);
1007 } else if (context
.isPanning
) {
1008 Dygraph
.movePan(event
, g
, context
);
1012 mouseup
: function(event
, g
, context
) {
1013 if (context
.isZooming
) {
1014 Dygraph
.endZoom(event
, g
, context
);
1015 } else if (context
.isPanning
) {
1016 Dygraph
.endPan(event
, g
, context
);
1020 // Temporarily cancel the dragging event when the mouse leaves the graph
1021 mouseout
: function(event
, g
, context
) {
1022 if (context
.isZooming
) {
1023 context
.dragEndX
= null;
1024 context
.dragEndY
= null;
1028 // Disable zooming out if panning.
1029 dblclick
: function(event
, g
, context
) {
1030 if (event
.altKey
|| event
.shiftKey
) {
1033 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1034 // friendlier to public use.
1039 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1042 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1046 Dygraph
.prototype.createDragInterface_
= function() {
1048 // Tracks whether the mouse is down right now
1050 isPanning
: false, // is this drag part of a pan?
1051 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1056 dragDirection
: null,
1059 prevDragDirection
: null,
1061 // TODO(danvk): update this comment
1062 // draggingDate and draggingValue represent the [date,value] point on the
1063 // graph at which the mouse was pressed. As the mouse moves while panning,
1064 // the viewport must pan so that the mouse position points to
1065 // [draggingDate, draggingValue]
1068 // TODO(danvk): update this comment
1069 // The range in second/value units that the viewport encompasses during a
1070 // panning operation.
1073 // Utility function to convert page-wide coordinates to canvas coords
1077 initializeMouseDown
: function(event
, g
, context
) {
1078 // prevents mouse drags from selecting page text.
1079 if (event
.preventDefault
) {
1080 event
.preventDefault(); // Firefox, Chrome, etc.
1082 event
.returnValue
= false; // IE
1083 event
.cancelBubble
= true;
1086 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1087 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1088 context
.dragStartX
= g
.dragGetX_(event
, context
);
1089 context
.dragStartY
= g
.dragGetY_(event
, context
);
1093 var interactionModel
= this.attr_("interactionModel");
1095 // Self is the graph.
1098 // Function that binds the graph and context to the handler.
1099 var bindHandler
= function(handler
) {
1100 return function(event
) {
1101 handler(event
, self
, context
);
1105 for (var eventName
in interactionModel
) {
1106 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1107 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1108 bindHandler(interactionModel
[eventName
]));
1111 // If the user releases the mouse button during a drag, but not over the
1112 // canvas, then it doesn't count as a zooming action.
1113 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1114 if (context
.isZooming
|| context
.isPanning
) {
1115 context
.isZooming
= false;
1116 context
.dragStartX
= null;
1117 context
.dragStartY
= null;
1120 if (context
.isPanning
) {
1121 context
.isPanning
= false;
1122 context
.draggingDate
= null;
1123 context
.dateRange
= null;
1124 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1125 delete self
.axes_
[i
].draggingValue
;
1126 delete self
.axes_
[i
].dragValueRange
;
1133 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1134 * up any previous zoom rectangles that were drawn. This could be optimized to
1135 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1138 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1139 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1140 * @param {Number} startX The X position where the drag started, in canvas
1142 * @param {Number} endX The current X position of the drag, in canvas coords.
1143 * @param {Number} startY The Y position where the drag started, in canvas
1145 * @param {Number} endY The current Y position of the drag, in canvas coords.
1146 * @param {Number} prevDirection the value of direction on the previous call to
1147 * this function. Used to avoid excess redrawing
1148 * @param {Number} prevEndX The value of endX on the previous call to this
1149 * function. Used to avoid excess redrawing
1150 * @param {Number} prevEndY The value of endY on the previous call to this
1151 * function. Used to avoid excess redrawing
1154 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1155 prevDirection
, prevEndX
, prevEndY
) {
1156 var ctx
= this.canvas_
.getContext("2d");
1158 // Clean up from the previous rect if necessary
1159 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1160 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1161 Math
.abs(startX
- prevEndX
), this.height_
);
1162 } else if (prevDirection
== Dygraph
.VERTICAL
){
1163 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1164 this.width_
, Math
.abs(startY
- prevEndY
));
1167 // Draw a light-grey rectangle to show the new viewing area
1168 if (direction
== Dygraph
.HORIZONTAL
) {
1169 if (endX
&& startX
) {
1170 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1171 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1172 Math
.abs(endX
- startX
), this.height_
);
1175 if (direction
== Dygraph
.VERTICAL
) {
1176 if (endY
&& startY
) {
1177 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1178 ctx
.fillRect(0, Math
.min(startY
, endY
),
1179 this.width_
, Math
.abs(endY
- startY
));
1185 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1186 * the canvas. The exact zoom window may be slightly larger if there are no data
1187 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1188 * which accepts dates that match the raw data. This function redraws the graph.
1190 * @param {Number} lowX The leftmost pixel value that should be visible.
1191 * @param {Number} highX The rightmost pixel value that should be visible.
1194 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1195 // Find the earliest and latest dates contained in this canvasx range.
1196 // Convert the call to date ranges of the raw data.
1197 var r
= this.toDataCoords(lowX
, null);
1199 r
= this.toDataCoords(highX
, null);
1201 this.doZoomXDates_(minDate
, maxDate
);
1205 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1206 * method with doZoomX which accepts pixel coordinates. This function redraws
1209 * @param {Number} minDate The minimum date that should be visible.
1210 * @param {Number} maxDate The maximum date that should be visible.
1213 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1214 this.dateWindow_
= [minDate
, maxDate
];
1216 if (this.attr_("zoomCallback")) {
1217 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1222 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1223 * the canvas. This function redraws the graph.
1225 * @param {Number} lowY The topmost pixel value that should be visible.
1226 * @param {Number} highY The lowest pixel value that should be visible.
1229 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1230 // Find the highest and lowest values in pixel range for each axis.
1231 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1232 // This is because pixels increase as you go down on the screen, whereas data
1233 // coordinates increase as you go up the screen.
1234 var valueRanges
= [];
1235 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1236 var hi
= this.toDataCoords(null, lowY
, i
);
1237 var low
= this.toDataCoords(null, highY
, i
);
1238 this.axes_
[i
].valueWindow
= [low
[1], hi
[1]];
1239 valueRanges
.push([low
[1], hi
[1]]);
1243 if (this.attr_("zoomCallback")) {
1244 var xRange
= this.xAxisRange();
1245 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1250 * Reset the zoom to the original view coordinates. This is the same as
1251 * double-clicking on the graph.
1255 Dygraph
.prototype.doUnzoom_
= function() {
1257 if (this.dateWindow_
!= null) {
1259 this.dateWindow_
= null;
1262 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1263 if (this.axes_
[i
].valueWindow
!= null) {
1265 delete this.axes_
[i
].valueWindow
;
1270 // Putting the drawing operation before the callback because it resets
1273 if (this.attr_("zoomCallback")) {
1274 var minDate
= this.rawData_
[0][0];
1275 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1276 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1282 * When the mouse moves in the canvas, display information about a nearby data
1283 * point and draw dots over those points in the data series. This function
1284 * takes care of cleanup of previously-drawn dots.
1285 * @param {Object} event The mousemove event from the browser.
1288 Dygraph
.prototype.mouseMove_
= function(event
) {
1289 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1290 var points
= this.layout_
.points
;
1295 // Loop through all the points and find the date nearest to our current
1297 var minDist
= 1e+100;
1299 for (var i
= 0; i
< points
.length
; i
++) {
1300 var point
= points
[i
];
1301 if (point
== null) continue;
1302 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1303 if (dist
> minDist
) continue;
1307 if (idx
>= 0) lastx
= points
[idx
].xval
;
1308 // Check that you can really highlight the last day's data
1309 var last
= points
[points
.length
-1];
1310 if (last
!= null && canvasx
> last
.canvasx
)
1311 lastx
= points
[points
.length
-1].xval
;
1313 // Extract the points we've selected
1314 this.selPoints_
= [];
1315 var l
= points
.length
;
1316 if (!this.attr_("stackedGraph")) {
1317 for (var i
= 0; i
< l
; i
++) {
1318 if (points
[i
].xval
== lastx
) {
1319 this.selPoints_
.push(points
[i
]);
1323 // Need to 'unstack' points starting from the bottom
1324 var cumulative_sum
= 0;
1325 for (var i
= l
- 1; i
>= 0; i
--) {
1326 if (points
[i
].xval
== lastx
) {
1327 var p
= {}; // Clone the point since we modify it
1328 for (var k
in points
[i
]) {
1329 p
[k
] = points
[i
][k
];
1331 p
.yval
-= cumulative_sum
;
1332 cumulative_sum
+= p
.yval
;
1333 this.selPoints_
.push(p
);
1336 this.selPoints_
.reverse();
1339 if (this.attr_("highlightCallback")) {
1340 var px
= this.lastx_
;
1341 if (px
!== null && lastx
!= px
) {
1342 // only fire if the selected point has changed.
1343 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1347 // Save last x position for callbacks.
1348 this.lastx_
= lastx
;
1350 this.updateSelection_();
1354 * Transforms layout_.points index into data row number.
1355 * @param int layout_.points index
1356 * @return int row number, or -1 if none could be found.
1359 Dygraph
.prototype.idxToRow_
= function(idx
) {
1360 if (idx
< 0) return -1;
1362 for (var i
in this.layout_
.datasets
) {
1363 if (idx
< this.layout_
.datasets
[i
].length
) {
1364 return this.boundaryIds_
[0][0]+idx
;
1366 idx
-= this.layout_
.datasets
[i
].length
;
1372 * Draw dots over the selectied points in the data series. This function
1373 * takes care of cleanup of previously-drawn dots.
1376 Dygraph
.prototype.updateSelection_
= function() {
1377 // Clear the previously drawn vertical, if there is one
1378 var ctx
= this.canvas_
.getContext("2d");
1379 if (this.previousVerticalX_
>= 0) {
1380 // Determine the maximum highlight circle size.
1381 var maxCircleSize
= 0;
1382 var labels
= this.attr_('labels');
1383 for (var i
= 1; i
< labels
.length
; i
++) {
1384 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1385 if (r
> maxCircleSize
) maxCircleSize
= r
;
1387 var px
= this.previousVerticalX_
;
1388 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1389 2 * maxCircleSize
+ 2, this.height_
);
1392 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1394 if (this.selPoints_
.length
> 0) {
1395 var canvasx
= this.selPoints_
[0].canvasx
;
1397 // Set the status message to indicate the selected point(s)
1398 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1399 var fmtFunc
= this.attr_('yValueFormatter');
1400 var clen
= this.colors_
.length
;
1402 if (this.attr_('showLabelsOnHighlight')) {
1403 // Set the status message to indicate the selected point(s)
1404 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1405 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1406 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1407 if (this.attr_("labelsSeparateLines")) {
1410 var point
= this.selPoints_
[i
];
1411 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1412 var yval
= fmtFunc(point
.yval
, this.numDigits_
+ 1); // In tenths.
1413 replace
+= " <b><font color='" + c
.toHex() + "'>"
1414 + point
.name
+ "</font></b>:"
1418 this.attr_("labelsDiv").innerHTML
= replace
;
1421 // Draw colored circles over the center of each selected point
1423 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1424 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1426 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1428 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1429 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1430 0, 2 * Math
.PI
, false);
1435 this.previousVerticalX_
= canvasx
;
1440 * Set manually set selected dots, and display information about them
1441 * @param int row number that should by highlighted
1442 * false value clears the selection
1445 Dygraph
.prototype.setSelection
= function(row
) {
1446 // Extract the points we've selected
1447 this.selPoints_
= [];
1450 if (row
!== false) {
1451 row
= row
-this.boundaryIds_
[0][0];
1454 if (row
!== false && row
>= 0) {
1455 for (var i
in this.layout_
.datasets
) {
1456 if (row
< this.layout_
.datasets
[i
].length
) {
1457 var point
= this.layout_
.points
[pos
+row
];
1459 if (this.attr_("stackedGraph")) {
1460 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1463 this.selPoints_
.push(point
);
1465 pos
+= this.layout_
.datasets
[i
].length
;
1469 if (this.selPoints_
.length
) {
1470 this.lastx_
= this.selPoints_
[0].xval
;
1471 this.updateSelection_();
1474 this.clearSelection();
1480 * The mouse has left the canvas. Clear out whatever artifacts remain
1481 * @param {Object} event the mouseout event from the browser.
1484 Dygraph
.prototype.mouseOut_
= function(event
) {
1485 if (this.attr_("unhighlightCallback")) {
1486 this.attr_("unhighlightCallback")(event
);
1489 if (this.attr_("hideOverlayOnMouseOut")) {
1490 this.clearSelection();
1495 * Remove all selection from the canvas
1498 Dygraph
.prototype.clearSelection
= function() {
1499 // Get rid of the overlay data
1500 var ctx
= this.canvas_
.getContext("2d");
1501 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1502 this.attr_("labelsDiv").innerHTML
= "";
1503 this.selPoints_
= [];
1508 * Returns the number of the currently selected row
1509 * @return int row number, of -1 if nothing is selected
1512 Dygraph
.prototype.getSelection
= function() {
1513 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1517 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1518 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1519 return row
+ this.boundaryIds_
[0][0];
1525 Dygraph
.zeropad
= function(x
) {
1526 if (x
< 10) return "0" + x
; else return "" + x
;
1530 * Return a string version of the hours, minutes and seconds portion of a date.
1531 * @param {Number} date The JavaScript date (ms since epoch)
1532 * @return {String} A time of the form "HH:MM:SS"
1535 Dygraph
.hmsString_
= function(date
) {
1536 var zeropad
= Dygraph
.zeropad
;
1537 var d
= new Date(date
);
1538 if (d
.getSeconds()) {
1539 return zeropad(d
.getHours()) + ":" +
1540 zeropad(d
.getMinutes()) + ":" +
1541 zeropad(d
.getSeconds());
1543 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1548 * Convert a JS date to a string appropriate to display on an axis that
1549 * is displaying values at the stated granularity.
1550 * @param {Date} date The date to format
1551 * @param {Number} granularity One of the Dygraph granularity constants
1552 * @return {String} The formatted date
1555 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1556 if (granularity
>= Dygraph
.DECADAL
) {
1557 return date
.strftime('%Y');
1558 } else if (granularity
>= Dygraph
.MONTHLY
) {
1559 return date
.strftime('%b %y');
1561 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1562 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1563 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1565 return Dygraph
.hmsString_(date
.getTime());
1571 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1572 * @param {Number} date The JavaScript date (ms since epoch)
1573 * @return {String} A date of the form "YYYY/MM/DD"
1576 Dygraph
.dateString_
= function(date
, self
) {
1577 var zeropad
= Dygraph
.zeropad
;
1578 var d
= new Date(date
);
1581 var year
= "" + d
.getFullYear();
1582 // Get a 0 padded month string
1583 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1584 // Get a 0 padded day string
1585 var day
= zeropad(d
.getDate());
1588 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1589 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1591 return year
+ "/" + month + "/" + day
+ ret
;
1595 * Fires when there's data available to be graphed.
1596 * @param {String} data Raw CSV data to be plotted
1599 Dygraph
.prototype.loadedEvent_
= function(data
) {
1600 this.rawData_
= this.parseCSV_(data
);
1604 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1605 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1606 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1609 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1612 Dygraph
.prototype.addXTicks_
= function() {
1613 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1614 var startDate
, endDate
;
1615 if (this.dateWindow_
) {
1616 startDate
= this.dateWindow_
[0];
1617 endDate
= this.dateWindow_
[1];
1619 startDate
= this.rawData_
[0][0];
1620 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1623 var ret
= this.attr_('xTicker')(startDate
, endDate
, this);
1624 if (ret
.ticks
!== undefined
) { // Used numericTicks()?
1625 this.layout_
.updateOptions({xTicks
: ret
.ticks
});
1626 } else { // Used dateTicker() instead.
1627 this.layout_
.updateOptions({xTicks
: ret
});
1631 // Time granularity enumeration
1632 Dygraph
.SECONDLY
= 0;
1633 Dygraph
.TWO_SECONDLY
= 1;
1634 Dygraph
.FIVE_SECONDLY
= 2;
1635 Dygraph
.TEN_SECONDLY
= 3;
1636 Dygraph
.THIRTY_SECONDLY
= 4;
1637 Dygraph
.MINUTELY
= 5;
1638 Dygraph
.TWO_MINUTELY
= 6;
1639 Dygraph
.FIVE_MINUTELY
= 7;
1640 Dygraph
.TEN_MINUTELY
= 8;
1641 Dygraph
.THIRTY_MINUTELY
= 9;
1642 Dygraph
.HOURLY
= 10;
1643 Dygraph
.TWO_HOURLY
= 11;
1644 Dygraph
.SIX_HOURLY
= 12;
1646 Dygraph
.WEEKLY
= 14;
1647 Dygraph
.MONTHLY
= 15;
1648 Dygraph
.QUARTERLY
= 16;
1649 Dygraph
.BIANNUAL
= 17;
1650 Dygraph
.ANNUAL
= 18;
1651 Dygraph
.DECADAL
= 19;
1652 Dygraph
.CENTENIAL
= 20;
1653 Dygraph
.NUM_GRANULARITIES
= 21;
1655 Dygraph
.SHORT_SPACINGS
= [];
1656 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1657 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1658 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1659 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1660 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1661 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1662 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1663 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1664 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1665 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1666 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1667 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1668 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1669 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1670 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1674 // If we used this time granularity, how many ticks would there be?
1675 // This is only an approximation, but it's generally good enough.
1677 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1678 if (granularity
< Dygraph
.MONTHLY
) {
1679 // Generate one tick mark for every fixed interval of time.
1680 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1681 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1683 var year_mod
= 1; // e.g. to only print one point every 10 years.
1684 var num_months
= 12;
1685 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1686 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1687 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1688 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1689 if (granularity
== Dygraph
.CENTENIAL
) { num_months
= 1; year_mod
= 100; }
1691 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1692 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1693 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1699 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1700 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1702 // Returns an array containing {v: millis, label: label} dictionaries.
1704 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1705 var formatter
= this.attr_("xAxisLabelFormatter");
1707 if (granularity
< Dygraph
.MONTHLY
) {
1708 // Generate one tick mark for every fixed interval of time.
1709 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1710 var format
= '%d%b'; // e.g. "1Jan"
1712 // Find a time less than start_time which occurs on a "nice" time boundary
1713 // for this granularity.
1714 var g
= spacing
/ 1000;
1715 var d
= new Date(start_time
);
1716 if (g
<= 60) { // seconds
1717 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1721 if (g
<= 60) { // minutes
1722 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1727 if (g
<= 24) { // days
1728 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1733 if (g
== 7) { // one week
1734 d
.setDate(d
.getDate() - d
.getDay());
1739 start_time
= d
.getTime();
1741 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1742 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1745 // Display a tick mark on the first of a set of months of each year.
1746 // Years get a tick mark iff y % year_mod == 0. This is useful for
1747 // displaying a tick mark once every 10 years, say, on long time scales.
1749 var year_mod
= 1; // e.g. to only print one point every 10 years.
1751 if (granularity
== Dygraph
.MONTHLY
) {
1752 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1753 } else if (granularity
== Dygraph
.QUARTERLY
) {
1754 months
= [ 0, 3, 6, 9 ];
1755 } else if (granularity
== Dygraph
.BIANNUAL
) {
1757 } else if (granularity
== Dygraph
.ANNUAL
) {
1759 } else if (granularity
== Dygraph
.DECADAL
) {
1762 } else if (granularity
== Dygraph
.CENTENIAL
) {
1766 this.warn("Span of dates is too long");
1769 var start_year
= new Date(start_time
).getFullYear();
1770 var end_year
= new Date(end_time
).getFullYear();
1771 var zeropad
= Dygraph
.zeropad
;
1772 for (var i
= start_year
; i
<= end_year
; i
++) {
1773 if (i
% year_mod
!= 0) continue;
1774 for (var j
= 0; j
< months
.length
; j
++) {
1775 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1776 var t
= Date
.parse(date_str
);
1777 if (t
< start_time
|| t
> end_time
) continue;
1778 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1788 * Add ticks to the x-axis based on a date range.
1789 * @param {Number} startDate Start of the date window (millis since epoch)
1790 * @param {Number} endDate End of the date window (millis since epoch)
1791 * @return {Array.<Object>} Array of {label, value} tuples.
1794 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1796 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1797 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1798 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1805 return self
.GetXAxis(startDate
, endDate
, chosen
);
1807 // TODO(danvk): signal error.
1812 * Determine the number of significant figures in a Number up to the specified
1813 * precision. Note that there is no way to determine if a trailing '0' is
1814 * significant or not, so by convention we return 1 for all of the following
1815 * inputs: 1, 1.0, 1.00, 1.000 etc.
1816 * @param {Number} x The input value.
1817 * @param {Number} opt_maxPrecision Optional maximum precision to consider.
1818 * Default and maximum allowed value is 13.
1819 * @return {Number} The number of significant figures which is >= 1.
1821 Dygraph
.significantFigures
= function(x
, opt_maxPrecision
) {
1822 var precision
= Math
.max(opt_maxPrecision
|| 13, 13);
1824 // Convert the number to it's exponential notation form and work backwards,
1825 // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and
1826 // dividing by 10 leads to roundoff errors. By using toExponential(), we let
1827 // the JavaScript interpreter handle the low level bits of the Number for us.
1828 var s
= x
.toExponential(precision
);
1829 var ePos
= s
.lastIndexOf('e'); // -1 case handled by return below.
1831 for (var i
= ePos
- 1; i
>= 0; i
--) {
1833 // Got to the decimal place. We'll call this 1 digit of precision because
1834 // we can't know for sure how many trailing 0s are significant.
1836 } else if (s
[i
] != '0') {
1837 // Found the first non-zero digit. Return the number of characters
1838 // except for the '.'.
1839 return i
; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index).
1843 // Occurs if toExponential() doesn't return a string containing 'e', which
1844 // should never happen.
1849 * Add ticks when the x axis has numbers on it (instead of dates)
1850 * @param {Number} startDate Start of the date window (millis since epoch)
1851 * @param {Number} endDate End of the date window (millis since epoch)
1853 * @param {function} attribute accessor function.
1854 * @return {Array.<Object>} Array of {label, value} tuples.
1857 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1858 var attr
= function(k
) {
1859 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1860 return self
.attr_(k
);
1865 for (var i
= 0; i
< vals
.length
; i
++) {
1866 ticks
[i
] = {v
: vals
[i
]};
1870 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1871 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1872 // The first spacing greater than pixelsPerYLabel is what we use.
1873 // TODO(danvk): version that works on a log scale.
1874 if (attr("labelsKMG2")) {
1875 var mults
= [1, 2, 4, 8];
1877 var mults
= [1, 2, 5];
1879 var scale
, low_val
, high_val
, nTicks
;
1880 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1881 var pixelsPerTick
= attr('pixelsPerYLabel');
1882 for (var i
= -10; i
< 50; i
++) {
1883 if (attr("labelsKMG2")) {
1884 var base_scale
= Math
.pow(16, i
);
1886 var base_scale
= Math
.pow(10, i
);
1888 for (var j
= 0; j
< mults
.length
; j
++) {
1889 scale
= base_scale
* mults
[j
];
1890 low_val
= Math
.floor(minV
/ scale
) * scale
;
1891 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1892 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1893 var spacing
= self
.height_
/ nTicks
;
1894 // wish I could break out of both loops at once...
1895 if (spacing
> pixelsPerTick
) break;
1897 if (spacing
> pixelsPerTick
) break;
1900 // Construct the set of ticks.
1901 // Allow reverse y-axis if it's explicitly requested.
1902 if (low_val
> high_val
) scale
*= -1;
1903 for (var i
= 0; i
< nTicks
; i
++) {
1904 var tickV
= low_val
+ i
* scale
;
1905 ticks
[i
] = {v
: tickV
};
1909 // Add formatted labels to the ticks.
1912 if (attr("labelsKMB")) {
1914 k_labels
= [ "K", "M", "B", "T" ];
1916 if (attr("labelsKMG2")) {
1917 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1919 k_labels
= [ "k", "M", "G", "T" ];
1921 var formatter
= attr('yAxisLabelFormatter') ?
1922 attr('yAxisLabelFormatter') : attr('yValueFormatter');
1924 // Determine the number of decimal places needed for the labels below by
1925 // taking the maximum number of significant figures for any label. We must
1926 // take the max because we can't tell if trailing 0s are significant.
1928 for (var i
= 0; i
< ticks
.length
; i
++) {
1929 var tickV
= ticks
[i
].v
;
1930 numDigits
= Math
.max(Dygraph
.significantFigures(tickV
), numDigits
);
1933 for (var i
= 0; i
< ticks
.length
; i
++) {
1934 var tickV
= ticks
[i
].v
;
1935 var absTickV
= Math
.abs(tickV
);
1936 var label
= (formatter
!== undefined
) ?
1937 formatter(tickV
, numDigits
) : tickV
.toPrecision(numDigits
);
1938 if (k_labels
.length
> 0) {
1939 // Round up to an appropriate unit.
1941 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1942 if (absTickV
>= n
) {
1943 label
= (tickV
/ n
).toPrecision(numDigits
) + k_labels
[j
];
1948 ticks
[i
].label
= label
;
1950 return {ticks
: ticks
, numDigits
: numDigits
};
1953 // Computes the range of the data series (including confidence intervals).
1954 // series is either [ [x1, y1], [x2, y2], ... ] or
1955 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1956 // Returns [low, high]
1957 Dygraph
.prototype.extremeValues_
= function(series
) {
1958 var minY
= null, maxY
= null;
1960 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1962 // With custom bars, maxY is the max of the high values.
1963 for (var j
= 0; j
< series
.length
; j
++) {
1964 var y
= series
[j
][1][0];
1966 var low
= y
- series
[j
][1][1];
1967 var high
= y
+ series
[j
][1][2];
1968 if (low
> y
) low
= y
; // this can happen with custom bars,
1969 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1970 if (maxY
== null || high
> maxY
) {
1973 if (minY
== null || low
< minY
) {
1978 for (var j
= 0; j
< series
.length
; j
++) {
1979 var y
= series
[j
][1];
1980 if (y
=== null || isNaN(y
)) continue;
1981 if (maxY
== null || y
> maxY
) {
1984 if (minY
== null || y
< minY
) {
1990 return [minY
, maxY
];
1994 * This function is called once when the chart's data is changed or the options
1995 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1996 * idea is that values derived from the chart's data can be computed here,
1997 * rather than every time the chart is drawn. This includes things like the
1998 * number of axes, rolling averages, etc.
2000 Dygraph
.prototype.predraw_
= function() {
2001 // TODO(danvk): move more computations out of drawGraph_ and into here.
2002 this.computeYAxes_();
2004 // Create a new plotter.
2005 if (this.plotter_
) this.plotter_
.clear();
2006 this.plotter_
= new DygraphCanvasRenderer(this,
2007 this.hidden_
, this.layout_
,
2008 this.renderOptions_
);
2010 // The roller sits in the bottom left corner of the chart. We don't know where
2011 // this will be until the options are available, so it's positioned here.
2012 this.createRollInterface_();
2014 // Same thing applies for the labelsDiv. It's right edge should be flush with
2015 // the right edge of the charting area (which may not be the same as the right
2016 // edge of the div, if we have two y-axes.
2017 this.positionLabelsDiv_();
2019 // If the data or options have changed, then we'd better redraw.
2025 * Update the graph with new data. This method is called when the viewing area
2026 * has changed. If the underlying data or options have changed, predraw_ will
2027 * be called before drawGraph_ is called.
2030 Dygraph
.prototype.drawGraph_
= function() {
2031 var data
= this.rawData_
;
2033 // This is used to set the second parameter to drawCallback, below.
2034 var is_initial_draw
= this.is_initial_draw_
;
2035 this.is_initial_draw_
= false;
2037 var minY
= null, maxY
= null;
2038 this.layout_
.removeAllDatasets();
2040 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2042 // Loop over the fields (series). Go from the last to the first,
2043 // because if they're stacked that's how we accumulate the values.
2045 var cumulative_y
= []; // For stacked series.
2048 var extremes
= {}; // series name -> [low, high]
2050 // Loop over all fields and create datasets
2051 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2052 if (!this.visibility()[i
- 1]) continue;
2054 var seriesName
= this.attr_("labels")[i
];
2055 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2058 for (var j
= 0; j
< data
.length
; j
++) {
2059 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
2060 var date
= data
[j
][0];
2061 series
.push([date
, data
[j
][i
]]);
2065 // TODO(danvk): move this into predraw_. It's insane to do it here.
2066 series
= this.rollingAverage(series
, this.rollPeriod_
);
2068 // Prune down to the desired range, if necessary (for zooming)
2069 // Because there can be lines going to points outside of the visible area,
2070 // we actually prune to visible points, plus one on either side.
2071 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2072 if (this.dateWindow_
) {
2073 var low
= this.dateWindow_
[0];
2074 var high
= this.dateWindow_
[1];
2076 // TODO(danvk): do binary search instead of linear search.
2077 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2078 var firstIdx
= null, lastIdx
= null;
2079 for (var k
= 0; k
< series
.length
; k
++) {
2080 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2083 if (series
[k
][0] <= high
) {
2087 if (firstIdx
=== null) firstIdx
= 0;
2088 if (firstIdx
> 0) firstIdx
--;
2089 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2090 if (lastIdx
< series
.length
- 1) lastIdx
++;
2091 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2092 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2093 pruned
.push(series
[k
]);
2097 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2100 var seriesExtremes
= this.extremeValues_(series
);
2103 for (var j
=0; j
<series
.length
; j
++) {
2104 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2107 } else if (this.attr_("stackedGraph")) {
2108 var l
= series
.length
;
2110 for (var j
= 0; j
< l
; j
++) {
2111 // If one data set has a NaN, let all subsequent stacked
2112 // sets inherit the NaN -- only start at 0 for the first set.
2113 var x
= series
[j
][0];
2114 if (cumulative_y
[x
] === undefined
) {
2115 cumulative_y
[x
] = 0;
2118 actual_y
= series
[j
][1];
2119 cumulative_y
[x
] += actual_y
;
2121 series
[j
] = [x
, cumulative_y
[x
]]
2123 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2124 seriesExtremes
[1] = cumulative_y
[x
];
2126 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2127 seriesExtremes
[0] = cumulative_y
[x
];
2131 extremes
[seriesName
] = seriesExtremes
;
2133 datasets
[i
] = series
;
2136 for (var i
= 1; i
< datasets
.length
; i
++) {
2137 if (!this.visibility()[i
- 1]) continue;
2138 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2141 this.computeYAxisRanges_(extremes
);
2142 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2143 seriesToAxisMap
: this.seriesToAxisMap_
2148 // Tell PlotKit to use this new data and render itself
2149 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2150 this.layout_
.evaluateWithError();
2151 this.plotter_
.clear();
2152 this.plotter_
.render();
2153 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2154 this.canvas_
.height
);
2156 if (this.attr_("drawCallback") !== null) {
2157 this.attr_("drawCallback")(this, is_initial_draw
);
2162 * Determine properties of the y-axes which are independent of the data
2163 * currently being displayed. This includes things like the number of axes and
2164 * the style of the axes. It does not include the range of each axis and its
2166 * This fills in this.axes_ and this.seriesToAxisMap_.
2167 * axes_ = [ { options } ]
2168 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2169 * indices are into the axes_ array.
2171 Dygraph
.prototype.computeYAxes_
= function() {
2172 this.axes_
= [{}]; // always have at least one y-axis.
2173 this.seriesToAxisMap_
= {};
2175 // Get a list of series names.
2176 var labels
= this.attr_("labels");
2178 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2180 // all options which could be applied per-axis:
2188 'axisLabelFontSize',
2192 // Copy global axis options over to the first axis.
2193 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2194 var k
= axisOptions
[i
];
2195 var v
= this.attr_(k
);
2196 if (v
) this.axes_
[0][k
] = v
;
2199 // Go through once and add all the axes.
2200 for (var seriesName
in series
) {
2201 if (!series
.hasOwnProperty(seriesName
)) continue;
2202 var axis
= this.attr_("axis", seriesName
);
2204 this.seriesToAxisMap_
[seriesName
] = 0;
2207 if (typeof(axis
) == 'object') {
2208 // Add a new axis, making a copy of its per-axis options.
2210 Dygraph
.update(opts
, this.axes_
[0]);
2211 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2212 Dygraph
.update(opts
, axis
);
2213 this.axes_
.push(opts
);
2214 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2218 // Go through one more time and assign series to an axis defined by another
2219 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2220 for (var seriesName
in series
) {
2221 if (!series
.hasOwnProperty(seriesName
)) continue;
2222 var axis
= this.attr_("axis", seriesName
);
2223 if (typeof(axis
) == 'string') {
2224 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2225 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2226 "series " + axis
+ ", which does not define its own axis.");
2229 var idx
= this.seriesToAxisMap_
[axis
];
2230 this.seriesToAxisMap_
[seriesName
] = idx
;
2234 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2235 // this last so that hiding the first series doesn't destroy the axis
2236 // properties of the primary axis.
2237 var seriesToAxisFiltered
= {};
2238 var vis
= this.visibility();
2239 for (var i
= 1; i
< labels
.length
; i
++) {
2241 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2243 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2247 * Returns the number of y-axes on the chart.
2248 * @return {Number} the number of axes.
2250 Dygraph
.prototype.numAxes
= function() {
2252 for (var series
in this.seriesToAxisMap_
) {
2253 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2254 var idx
= this.seriesToAxisMap_
[series
];
2255 if (idx
> last_axis
) last_axis
= idx
;
2257 return 1 + last_axis
;
2261 * Determine the value range and tick marks for each axis.
2262 * @param {Object} extremes A mapping from seriesName -> [low, high]
2263 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2265 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2266 // Build a map from axis number -> [list of series names]
2267 var seriesForAxis
= [];
2268 for (var series
in this.seriesToAxisMap_
) {
2269 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2270 var idx
= this.seriesToAxisMap_
[series
];
2271 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2272 seriesForAxis
[idx
].push(series
);
2275 // Compute extreme values, a span and tick marks for each axis.
2276 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2277 var axis
= this.axes_
[i
];
2278 if (axis
.valueWindow
) {
2279 // This is only set if the user has zoomed on the y-axis. It is never set
2280 // by a user. It takes precedence over axis.valueRange because, if you set
2281 // valueRange, you'd still expect to be able to pan.
2282 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2283 } else if (axis
.valueRange
) {
2284 // This is a user-set value range for this axis.
2285 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2287 // Calculate the extremes of extremes.
2288 var series
= seriesForAxis
[i
];
2289 var minY
= Infinity
; // extremes[series[0]][0];
2290 var maxY
= -Infinity
; // extremes[series[0]][1];
2291 for (var j
= 0; j
< series
.length
; j
++) {
2292 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2293 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2295 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2297 // Add some padding and round up to an integer to be human-friendly.
2298 var span
= maxY
- minY
;
2299 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2300 if (span
== 0) { span
= maxY
; }
2301 var maxAxisY
= maxY
+ 0.1 * span
;
2302 var minAxisY
= minY
- 0.1 * span
;
2304 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2305 if (!this.attr_("avoidMinZero")) {
2306 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2307 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2310 if (this.attr_("includeZero")) {
2311 if (maxY
< 0) maxAxisY
= 0;
2312 if (minY
> 0) minAxisY
= 0;
2315 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2318 // Add ticks. By default, all axes inherit the tick positions of the
2319 // primary axis. However, if an axis is specifically marked as having
2320 // independent ticks, then that is permissible as well.
2321 if (i
== 0 || axis
.independentTicks
) {
2323 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2324 axis
.computedValueRange
[1],
2327 axis
.ticks
= ret
.ticks
;
2328 this.numDigits_
= ret
.numDigits
;
2330 var p_axis
= this.axes_
[0];
2331 var p_ticks
= p_axis
.ticks
;
2332 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2333 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2334 var tick_values
= [];
2335 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2336 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2337 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2338 tick_values
.push(y_val
);
2342 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2343 axis
.computedValueRange
[1],
2344 this, axis
, tick_values
);
2345 axis
.ticks
= ret
.ticks
;
2346 this.numDigits_
= ret
.numDigits
;
2352 * Calculates the rolling average of a data set.
2353 * If originalData is [label, val], rolls the average of those.
2354 * If originalData is [label, [, it's interpreted as [value, stddev]
2355 * and the roll is returned in the same form, with appropriately reduced
2356 * stddev for each value.
2357 * Note that this is where fractional input (i.e. '5/10') is converted into
2359 * @param {Array} originalData The data in the appropriate format (see above)
2360 * @param {Number} rollPeriod The number of points over which to average the
2363 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2364 if (originalData
.length
< 2)
2365 return originalData
;
2366 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2367 var rollingData
= [];
2368 var sigma
= this.attr_("sigma");
2370 if (this.fractions_
) {
2372 var den
= 0; // numerator/denominator
2374 for (var i
= 0; i
< originalData
.length
; i
++) {
2375 num
+= originalData
[i
][1][0];
2376 den
+= originalData
[i
][1][1];
2377 if (i
- rollPeriod
>= 0) {
2378 num
-= originalData
[i
- rollPeriod
][1][0];
2379 den
-= originalData
[i
- rollPeriod
][1][1];
2382 var date
= originalData
[i
][0];
2383 var value
= den
? num
/ den
: 0.0;
2384 if (this.attr_("errorBars")) {
2385 if (this.wilsonInterval_
) {
2386 // For more details on this confidence interval, see:
2387 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2389 var p
= value
< 0 ? 0 : value
, n
= den
;
2390 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2391 var denom
= 1 + sigma
* sigma
/ den
;
2392 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2393 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2394 rollingData
[i
] = [date
,
2395 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2397 rollingData
[i
] = [date
, [0, 0, 0]];
2400 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2401 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2404 rollingData
[i
] = [date
, mult
* value
];
2407 } else if (this.attr_("customBars")) {
2412 for (var i
= 0; i
< originalData
.length
; i
++) {
2413 var data
= originalData
[i
][1];
2415 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2417 if (y
!= null && !isNaN(y
)) {
2423 if (i
- rollPeriod
>= 0) {
2424 var prev
= originalData
[i
- rollPeriod
];
2425 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2432 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2433 1.0 * (mid
- low
) / count
,
2434 1.0 * (high
- mid
) / count
]];
2437 // Calculate the rolling average for the first rollPeriod - 1 points where
2438 // there is not enough data to roll over the full number of points
2439 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2440 if (!this.attr_("errorBars")){
2441 if (rollPeriod
== 1) {
2442 return originalData
;
2445 for (var i
= 0; i
< originalData
.length
; i
++) {
2448 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2449 var y
= originalData
[j
][1];
2450 if (y
== null || isNaN(y
)) continue;
2452 sum
+= originalData
[j
][1];
2455 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2457 rollingData
[i
] = [originalData
[i
][0], null];
2462 for (var i
= 0; i
< originalData
.length
; i
++) {
2466 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2467 var y
= originalData
[j
][1][0];
2468 if (y
== null || isNaN(y
)) continue;
2470 sum
+= originalData
[j
][1][0];
2471 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2474 var stddev
= Math
.sqrt(variance
) / num_ok
;
2475 rollingData
[i
] = [originalData
[i
][0],
2476 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2478 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2488 * Parses a date, returning the number of milliseconds since epoch. This can be
2489 * passed in as an xValueParser in the Dygraph constructor.
2490 * TODO(danvk): enumerate formats that this understands.
2491 * @param {String} A date in YYYYMMDD format.
2492 * @return {Number} Milliseconds since epoch.
2495 Dygraph
.dateParser
= function(dateStr
, self
) {
2498 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2499 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2500 while (dateStrSlashed
.search("-") != -1) {
2501 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2503 d
= Date
.parse(dateStrSlashed
);
2504 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2505 // TODO(danvk): remove support for this format. It's confusing.
2506 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2507 + "/" + dateStr
.substr(6,2);
2508 d
= Date
.parse(dateStrSlashed
);
2510 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2511 // "2009/07/12 12:34:56"
2512 d
= Date
.parse(dateStr
);
2515 if (!d
|| isNaN(d
)) {
2516 self
.error("Couldn't parse " + dateStr
+ " as a date");
2522 * Detects the type of the str (date or numeric) and sets the various
2523 * formatting attributes in this.attrs_ based on this type.
2524 * @param {String} str An x value.
2527 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2529 if (str
.indexOf('-') >= 0 ||
2530 str
.indexOf('/') >= 0 ||
2531 isNaN(parseFloat(str
))) {
2533 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2534 // TODO(danvk): remove support for this format.
2539 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2540 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2541 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2542 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2544 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2545 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2546 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2547 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2552 * Parses a string in a special csv format. We expect a csv file where each
2553 * line is a date point, and the first field in each line is the date string.
2554 * We also expect that all remaining fields represent series.
2555 * if the errorBars attribute is set, then interpret the fields as:
2556 * date, series1, stddev1, series2, stddev2, ...
2557 * @param {Array.<Object>} data See above.
2560 * @return Array.<Object> An array with one entry for each row. These entries
2561 * are an array of cells in that row. The first entry is the parsed x-value for
2562 * the row. The second, third, etc. are the y-values. These can take on one of
2563 * three forms, depending on the CSV and constructor parameters:
2565 * 2. [ value, stddev ]
2566 * 3. [ low value, center value, high value ]
2568 Dygraph
.prototype.parseCSV_
= function(data
) {
2570 var lines
= data
.split("\n");
2572 // Use the default delimiter or fall back to a tab if that makes sense.
2573 var delim
= this.attr_('delimiter');
2574 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2579 if (this.labelsFromCSV_
) {
2581 this.attrs_
.labels
= lines
[0].split(delim
);
2584 // Parse the x as a float or return null if it's not a number.
2585 var parseFloatOrNull
= function(x
) {
2586 var val
= parseFloat(x
);
2587 // isFinite() returns false for NaN and +/-Infinity
.
2588 return isFinite(val
) ? val
: null;
2592 var defaultParserSet
= false; // attempt to auto-detect x value type
2593 var expectedCols
= this.attr_("labels").length
;
2594 var outOfOrder
= false;
2595 for (var i
= start
; i
< lines
.length
; i
++) {
2596 var line
= lines
[i
];
2597 if (line
.length
== 0) continue; // skip blank lines
2598 if (line
[0] == '#') continue; // skip comment lines
2599 var inFields
= line
.split(delim
);
2600 if (inFields
.length
< 2) continue;
2603 if (!defaultParserSet
) {
2604 this.detectTypeFromString_(inFields
[0]);
2605 xParser
= this.attr_("xValueParser");
2606 defaultParserSet
= true;
2608 fields
[0] = xParser(inFields
[0], this);
2610 // If fractions are expected, parse the numbers as "A/B
"
2611 if (this.fractions_) {
2612 for (var j = 1; j < inFields.length; j++) {
2613 // TODO(danvk): figure out an appropriate way to flag parse errors.
2614 var vals = inFields[j].split("/");
2615 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2617 } else if (this.attr_("errorBars
")) {
2618 // If there are error bars, values are (value, stddev) pairs
2619 for (var j = 1; j < inFields.length; j += 2)
2620 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2621 parseFloatOrNull(inFields[j + 1])];
2622 } else if (this.attr_("customBars
")) {
2623 // Bars are a low;center;high tuple
2624 for (var j = 1; j < inFields.length; j++) {
2625 var vals = inFields[j].split(";");
2626 fields[j] = [ parseFloatOrNull(vals[0]),
2627 parseFloatOrNull(vals[1]),
2628 parseFloatOrNull(vals[2]) ];
2631 // Values are just numbers
2632 for (var j = 1; j < inFields.length; j++) {
2633 fields[j] = parseFloatOrNull(inFields[j]);
2636 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2641 if (fields.length != expectedCols) {
2642 this.error("Number of columns
in line
" + i + " (" + fields.length +
2643 ") does not agree
with number of
labels (" + expectedCols +
2649 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2650 ret.sort(function(a,b) { return a[0] - b[0] });
2657 * The user has provided their data as a pre-packaged JS array. If the x values
2658 * are numeric, this is the same as dygraphs' internal format. If the x values
2659 * are dates, we need to convert them from Date objects to ms since epoch.
2660 * @param {Array.<Object>} data
2661 * @return {Array.<Object>} data with numeric x values.
2663 Dygraph.prototype.parseArray_ = function(data) {
2664 // Peek at the first x value to see if it's numeric.
2665 if (data.length == 0) {
2666 this.error("Can
't plot empty data set");
2669 if (data[0].length == 0) {
2670 this.error("Data set cannot contain an empty row");
2674 if (this.attr_("labels") == null) {
2675 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2676 "in the options parameter");
2677 this.attrs_.labels = [ "X" ];
2678 for (var i = 1; i < data[0].length; i++) {
2679 this.attrs_.labels.push("Y" + i);
2683 if (Dygraph.isDateLike(data[0][0])) {
2684 // Some intelligent defaults for a date x-axis.
2685 this.attrs_.xValueFormatter = Dygraph.dateString_;
2686 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2687 this.attrs_.xTicker = Dygraph.dateTicker;
2689 // Assume they're all dates
.
2690 var parsedData
= Dygraph
.clone(data
);
2691 for (var i
= 0; i
< data
.length
; i
++) {
2692 if (parsedData
[i
].length
== 0) {
2693 this.error("Row " + (1 + i
) + " of data is empty");
2696 if (parsedData
[i
][0] == null
2697 || typeof(parsedData
[i
][0].getTime
) != 'function'
2698 || isNaN(parsedData
[i
][0].getTime())) {
2699 this.error("x value in row " + (1 + i
) + " is not a Date");
2702 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2706 // Some intelligent defaults for a numeric x-axis.
2707 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2708 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2714 * Parses a DataTable object from gviz.
2715 * The data is expected to have a first column that is either a date or a
2716 * number. All subsequent columns must be numbers. If there is a clear mismatch
2717 * between this.xValueParser_ and the type of the first column, it will be
2718 * fixed. Fills out rawData_.
2719 * @param {Array.<Object>} data See above.
2722 Dygraph
.prototype.parseDataTable_
= function(data
) {
2723 var cols
= data
.getNumberOfColumns();
2724 var rows
= data
.getNumberOfRows();
2726 var indepType
= data
.getColumnType(0);
2727 if (indepType
== 'date' || indepType
== 'datetime') {
2728 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2729 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2730 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2731 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2732 } else if (indepType
== 'number') {
2733 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2734 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2735 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2736 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2738 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2739 "column 1 of DataTable input (Got '" + indepType
+ "')");
2743 // Array of the column indices which contain data (and not annotations).
2745 var annotationCols
= {}; // data index -> [annotation cols]
2746 var hasAnnotations
= false;
2747 for (var i
= 1; i
< cols
; i
++) {
2748 var type
= data
.getColumnType(i
);
2749 if (type
== 'number') {
2751 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2752 // This is OK -- it's an annotation column.
2753 var dataIdx
= colIdx
[colIdx
.length
- 1];
2754 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2755 annotationCols
[dataIdx
] = [i
];
2757 annotationCols
[dataIdx
].push(i
);
2759 hasAnnotations
= true;
2761 this.error("Only 'number' is supported as a dependent type with Gviz." +
2762 " 'string' is only supported if displayAnnotations is true");
2766 // Read column labels
2767 // TODO(danvk): add support back for errorBars
2768 var labels
= [data
.getColumnLabel(0)];
2769 for (var i
= 0; i
< colIdx
.length
; i
++) {
2770 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2771 if (this.attr_("errorBars")) i
+= 1;
2773 this.attrs_
.labels
= labels
;
2774 cols
= labels
.length
;
2777 var outOfOrder
= false;
2778 var annotations
= [];
2779 for (var i
= 0; i
< rows
; i
++) {
2781 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2782 data
.getValue(i
, 0) === null) {
2783 this.warn("Ignoring row " + i
+
2784 " of DataTable because of undefined or null first column.");
2788 if (indepType
== 'date' || indepType
== 'datetime') {
2789 row
.push(data
.getValue(i
, 0).getTime());
2791 row
.push(data
.getValue(i
, 0));
2793 if (!this.attr_("errorBars")) {
2794 for (var j
= 0; j
< colIdx
.length
; j
++) {
2795 var col
= colIdx
[j
];
2796 row
.push(data
.getValue(i
, col
));
2797 if (hasAnnotations
&&
2798 annotationCols
.hasOwnProperty(col
) &&
2799 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2801 ann
.series
= data
.getColumnLabel(col
);
2803 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2805 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2806 if (k
) ann
.text
+= "\n";
2807 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2809 annotations
.push(ann
);
2813 for (var j
= 0; j
< cols
- 1; j
++) {
2814 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2817 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2821 // Strip out infinities, which give dygraphs problems later on.
2822 for (var j
= 0; j
< row
.length
; j
++) {
2823 if (!isFinite(row
[j
])) row
[j
] = null;
2829 this.warn("DataTable is out of order; order it correctly to speed loading.");
2830 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2832 this.rawData_
= ret
;
2834 if (annotations
.length
> 0) {
2835 this.setAnnotations(annotations
, true);
2839 // These functions are all based on MochiKit.
2840 Dygraph
.update
= function (self
, o
) {
2841 if (typeof(o
) != 'undefined' && o
!== null) {
2843 if (o
.hasOwnProperty(k
)) {
2851 Dygraph
.isArrayLike
= function (o
) {
2852 var typ
= typeof(o
);
2854 (typ
!= 'object' && !(typ
== 'function' &&
2855 typeof(o
.item
) == 'function')) ||
2857 typeof(o
.length
) != 'number' ||
2865 Dygraph
.isDateLike
= function (o
) {
2866 if (typeof(o
) != "object" || o
=== null ||
2867 typeof(o
.getTime
) != 'function') {
2873 Dygraph
.clone
= function(o
) {
2874 // TODO(danvk): figure out how MochiKit's version works
2876 for (var i
= 0; i
< o
.length
; i
++) {
2877 if (Dygraph
.isArrayLike(o
[i
])) {
2878 r
.push(Dygraph
.clone(o
[i
]));
2888 * Get the CSV data. If it's in a function, call that function. If it's in a
2889 * file, do an XMLHttpRequest to get it.
2892 Dygraph
.prototype.start_
= function() {
2893 if (typeof this.file_
== 'function') {
2894 // CSV string. Pretend we got it via XHR.
2895 this.loadedEvent_(this.file_());
2896 } else if (Dygraph
.isArrayLike(this.file_
)) {
2897 this.rawData_
= this.parseArray_(this.file_
);
2899 } else if (typeof this.file_
== 'object' &&
2900 typeof this.file_
.getColumnRange
== 'function') {
2901 // must be a DataTable from gviz.
2902 this.parseDataTable_(this.file_
);
2904 } else if (typeof this.file_
== 'string') {
2905 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2906 if (this.file_
.indexOf('\n') >= 0) {
2907 this.loadedEvent_(this.file_
);
2909 var req
= new XMLHttpRequest();
2911 req
.onreadystatechange
= function () {
2912 if (req
.readyState
== 4) {
2913 if (req
.status
== 200) {
2914 caller
.loadedEvent_(req
.responseText
);
2919 req
.open("GET", this.file_
, true);
2923 this.error("Unknown data format: " + (typeof this.file_
));
2928 * Changes various properties of the graph. These can include:
2930 * <li>file: changes the source data for the graph</li>
2931 * <li>errorBars: changes whether the data contains stddev</li>
2933 * @param {Object} attrs The new properties and values
2935 Dygraph
.prototype.updateOptions
= function(attrs
) {
2936 // TODO(danvk): this is a mess. Rethink this function.
2937 if ('rollPeriod' in attrs
) {
2938 this.rollPeriod_
= attrs
.rollPeriod
;
2940 if ('dateWindow' in attrs
) {
2941 this.dateWindow_
= attrs
.dateWindow
;
2944 // TODO(danvk): validate per-series options.
2949 // highlightCircleSize
2951 Dygraph
.update(this.user_attrs_
, attrs
);
2952 Dygraph
.update(this.renderOptions_
, attrs
);
2954 this.labelsFromCSV_
= (this.attr_("labels") == null);
2956 // TODO(danvk): this doesn't match the constructor logic
2957 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2958 if (attrs
['file']) {
2959 this.file_
= attrs
['file'];
2967 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2968 * containing div (which has presumably changed size since the dygraph was
2969 * instantiated. If the width/height are specified, the div will be resized.
2971 * This is far more efficient than destroying and re-instantiating a
2972 * Dygraph, since it doesn't have to reparse the underlying data.
2974 * @param {Number} width Width (in pixels)
2975 * @param {Number} height Height (in pixels)
2977 Dygraph
.prototype.resize
= function(width
, height
) {
2978 if (this.resize_lock
) {
2981 this.resize_lock
= true;
2983 if ((width
=== null) != (height
=== null)) {
2984 this.warn("Dygraph.resize() should be called with zero parameters or " +
2985 "two non-NULL parameters. Pretending it was zero.");
2986 width
= height
= null;
2989 // TODO(danvk): there should be a clear() method.
2990 this.maindiv_
.innerHTML
= "";
2991 this.attrs_
.labelsDiv
= null;
2994 this.maindiv_
.style
.width
= width
+ "px";
2995 this.maindiv_
.style
.height
= height
+ "px";
2996 this.width_
= width
;
2997 this.height_
= height
;
2999 this.width_
= this.maindiv_
.offsetWidth
;
3000 this.height_
= this.maindiv_
.offsetHeight
;
3003 this.createInterface_();
3006 this.resize_lock
= false;
3010 * Adjusts the number of points in the rolling average. Updates the graph to
3011 * reflect the new averaging period.
3012 * @param {Number} length Number of points over which to average the data.
3014 Dygraph
.prototype.adjustRoll
= function(length
) {
3015 this.rollPeriod_
= length
;
3020 * Returns a boolean array of visibility statuses.
3022 Dygraph
.prototype.visibility
= function() {
3023 // Do lazy-initialization, so that this happens after we know the number of
3025 if (!this.attr_("visibility")) {
3026 this.attrs_
["visibility"] = [];
3028 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3029 this.attr_("visibility").push(true);
3031 return this.attr_("visibility");
3035 * Changes the visiblity of a series.
3037 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3038 var x
= this.visibility();
3039 if (num
< 0 || num
>= x
.length
) {
3040 this.warn("invalid series number in setVisibility: " + num
);
3048 * Update the list of annotations and redraw the chart.
3050 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3051 // Only add the annotation CSS rule once we know it will be used.
3052 Dygraph
.addAnnotationRule();
3053 this.annotations_
= ann
;
3054 this.layout_
.setAnnotations(this.annotations_
);
3055 if (!suppressDraw
) {
3061 * Return the list of annotations.
3063 Dygraph
.prototype.annotations
= function() {
3064 return this.annotations_
;
3068 * Get the index of a series (column) given its name. The first column is the
3069 * x-axis, so the data series start with index 1.
3071 Dygraph
.prototype.indexFromSetName
= function(name
) {
3072 var labels
= this.attr_("labels");
3073 for (var i
= 0; i
< labels
.length
; i
++) {
3074 if (labels
[i
] == name
) return i
;
3079 Dygraph
.addAnnotationRule
= function() {
3080 if (Dygraph
.addedAnnotationCSS
) return;
3082 var rule
= "border: 1px solid black; " +
3083 "background-color: white; " +
3084 "text-align: center;";
3086 var styleSheetElement
= document
.createElement("style");
3087 styleSheetElement
.type
= "text/css";
3088 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3090 // Find the first style sheet that we can access.
3091 // We may not add a rule to a style sheet from another domain for security
3092 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3093 // adds its own style sheets from google.com.
3094 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3095 if (document
.styleSheets
[i
].disabled
) continue;
3096 var mysheet
= document
.styleSheets
[i
];
3098 if (mysheet
.insertRule
) { // Firefox
3099 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3100 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3101 } else if (mysheet
.addRule
) { // IE
3102 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3104 Dygraph
.addedAnnotationCSS
= true;
3107 // Was likely a security exception.
3111 this.warn("Unable to add default annotation CSS rule; display may be off.");
3115 * Create a new canvas element. This is more complex than a simple
3116 * document.createElement("canvas") because of IE and excanvas.
3118 Dygraph
.createCanvas
= function() {
3119 var canvas
= document
.createElement("canvas");
3121 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3122 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3123 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3131 * A wrapper around Dygraph that implements the gviz API.
3132 * @param {Object} container The DOM object the visualization should live in.
3134 Dygraph
.GVizChart
= function(container
) {
3135 this.container
= container
;
3138 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3139 // Clear out any existing dygraph.
3140 // TODO(danvk): would it make more sense to simply redraw using the current
3141 // date_graph object?
3142 this.container
.innerHTML
= '';
3143 if (typeof(this.date_graph
) != 'undefined') {
3144 this.date_graph
.destroy();
3147 this.date_graph
= new Dygraph(this.container
, data
, options
);
3151 * Google charts compatible setSelection
3152 * Only row selection is supported, all points in the row will be highlighted
3153 * @param {Array} array of the selected cells
3156 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3158 if (selection_array
.length
) {
3159 row
= selection_array
[0].row
;
3161 this.date_graph
.setSelection(row
);
3165 * Google charts compatible getSelection implementation
3166 * @return {Array} array of the selected cells
3169 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3172 var row
= this.date_graph
.getSelection();
3174 if (row
< 0) return selection
;
3177 for (var i
in this.date_graph
.layout_
.datasets
) {
3178 selection
.push({row
: row
, column
: col
});
3185 // Older pages may still use this name.
3186 DateGraph
= Dygraph
;