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://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
93 labelsShowZeroValues
: true,
96 showLabelsOnHighlight
: true,
98 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
103 axisLabelFontSize
: 14,
106 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
110 xValueFormatter
: Dygraph
.dateString_
,
111 xValueParser
: Dygraph
.dateParser
,
112 xTicker
: Dygraph
.dateTicker
,
120 wilsonInterval
: true, // only relevant if fractions is true
124 connectSeparatedPoints
: false,
127 hideOverlayOnMouseOut
: true,
133 // Various logging levels.
139 // Directions for panning and zooming. Use bit operations when combined
140 // values are possible.
141 Dygraph
.HORIZONTAL
= 1;
142 Dygraph
.VERTICAL
= 2;
144 // Used for initializing annotation CSS rules only once.
145 Dygraph
.addedAnnotationCSS
= false;
147 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
148 // Labels is no longer a constructor parameter, since it's typically set
149 // directly from the data source. It also conains a name for the x-axis,
150 // which the previous constructor form did not.
151 if (labels
!= null) {
152 var new_labels
= ["Date"];
153 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
154 Dygraph
.update(attrs
, { 'labels': new_labels
});
156 this.__init__(div
, file
, attrs
);
160 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
161 * and interaction <canvas> inside of it. See the constructor for details
163 * @param {Element} div the Element to render the graph into.
164 * @param {String | Function} file Source data
165 * @param {Object} attrs Miscellaneous other options
168 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
169 // Support two-argument constructor
170 if (attrs
== null) { attrs
= {}; }
172 // Copy the important bits into the object
173 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
176 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
177 this.previousVerticalX_
= -1;
178 this.fractions_
= attrs
.fractions
|| false;
179 this.dateWindow_
= attrs
.dateWindow
|| null;
180 // valueRange and valueWindow are similar, but not the same. valueRange is a
181 // locally-stored copy of the attribute. valueWindow starts off the same as
182 // valueRange but is impacted by zoom or pan effects. valueRange is kept
183 // around to restore the original value back to valueRange.
184 this.valueRange_
= attrs
.valueRange
|| null;
185 this.valueWindow_
= this.valueRange_
;
187 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
188 this.is_initial_draw_
= true;
189 this.annotations_
= [];
191 // Clear the div. This ensure that, if multiple dygraphs are passed the same
192 // div, then only one will be drawn.
195 // If the div isn't already sized then inherit from our attrs or
196 // give it a default size.
197 if (div
.style
.width
== '') {
198 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
200 if (div
.style
.height
== '') {
201 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
203 this.width_
= parseInt(div
.style
.width
, 10);
204 this.height_
= parseInt(div
.style
.height
, 10);
205 // The div might have been specified as percent of the current window size,
206 // convert that to an appropriate number of pixels.
207 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
208 this.width_
= div
.offsetWidth
;
210 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
211 this.height_
= div
.offsetHeight
;
214 if (this.width_
== 0) {
215 this.error("dygraph has zero width. Please specify a width in pixels.");
217 if (this.height_
== 0) {
218 this.error("dygraph has zero height. Please specify a height in pixels.");
221 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
222 if (attrs
['stackedGraph']) {
223 attrs
['fillGraph'] = true;
224 // TODO(nikhilk): Add any other stackedGraph checks here.
227 // Dygraphs has many options, some of which interact with one another.
228 // To keep track of everything, we maintain two sets of options:
230 // this.user_attrs_ only options explicitly set by the user.
231 // this.attrs_ defaults, options derived from user_attrs_, data.
233 // Options are then accessed this.attr_('attr'), which first looks at
234 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
235 // defaults without overriding behavior that the user specifically asks for.
236 this.user_attrs_
= {};
237 Dygraph
.update(this.user_attrs_
, attrs
);
240 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
242 this.boundaryIds_
= [];
244 // Make a note of whether labels will be pulled from the CSV file.
245 this.labelsFromCSV_
= (this.attr_("labels") == null);
247 // Create the containing DIV and other interactive elements
248 this.createInterface_();
253 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
255 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
256 this.user_attrs_
[seriesName
] != null &&
257 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
258 return this.user_attrs_
[seriesName
][name
];
259 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
260 return this.user_attrs_
[name
];
261 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
262 return this.attrs_
[name
];
268 // TODO(danvk): any way I can get the line numbers to be this.warn call?
269 Dygraph
.prototype.log
= function(severity
, message
) {
270 if (typeof(console
) != 'undefined') {
273 console
.debug('dygraphs: ' + message
);
276 console
.info('dygraphs: ' + message
);
278 case Dygraph
.WARNING
:
279 console
.warn('dygraphs: ' + message
);
282 console
.error('dygraphs: ' + message
);
287 Dygraph
.prototype.info
= function(message
) {
288 this.log(Dygraph
.INFO
, message
);
290 Dygraph
.prototype.warn
= function(message
) {
291 this.log(Dygraph
.WARNING
, message
);
293 Dygraph
.prototype.error
= function(message
) {
294 this.log(Dygraph
.ERROR
, message
);
298 * Returns the current rolling period, as set by the user or an option.
299 * @return {Number} The number of days in the rolling window
301 Dygraph
.prototype.rollPeriod
= function() {
302 return this.rollPeriod_
;
306 * Returns the currently-visible x-range. This can be affected by zooming,
307 * panning or a call to updateOptions.
308 * Returns a two-element array: [left, right].
309 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
311 Dygraph
.prototype.xAxisRange
= function() {
312 if (this.dateWindow_
) return this.dateWindow_
;
314 // The entire chart is visible.
315 var left
= this.rawData_
[0][0];
316 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
317 return [left
, right
];
321 * Returns the currently-visible y-range. This can be affected by zooming,
322 * panning or a call to updateOptions.
323 * Returns a two-element array: [bottom, top].
325 Dygraph
.prototype.yAxisRange
= function() {
326 return this.displayedYRange_
;
330 * Convert from data coordinates to canvas/div X/Y coordinates.
331 * Returns a two-element array: [X, Y]
333 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
334 var ret
= [null, null];
335 var area
= this.plotter_
.area
;
337 var xRange
= this.xAxisRange();
338 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
342 var yRange
= this.yAxisRange();
343 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
349 // TODO(danvk): use these functions throughout dygraphs.
351 * Convert from canvas/div coords to data coordinates.
352 * Returns a two-element array: [X, Y]
354 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
355 var ret
= [null, null];
356 var area
= this.plotter_
.area
;
358 var xRange
= this.xAxisRange();
359 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
363 var yRange
= this.yAxisRange();
364 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
371 * Returns the number of columns (including the independent variable).
373 Dygraph
.prototype.numColumns
= function() {
374 return this.rawData_
[0].length
;
378 * Returns the number of rows (excluding any header/label row).
380 Dygraph
.prototype.numRows
= function() {
381 return this.rawData_
.length
;
385 * Returns the value in the given row and column. If the row and column exceed
386 * the bounds on the data, returns null. Also returns null if the value is
389 Dygraph
.prototype.getValue
= function(row
, col
) {
390 if (row
< 0 || row
> this.rawData_
.length
) return null;
391 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
393 return this.rawData_
[row
][col
];
396 Dygraph
.addEvent
= function(el
, evt
, fn
) {
397 var normed_fn
= function(e
) {
398 if (!e
) var e
= window
.event
;
401 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
402 el
.addEventListener(evt
, normed_fn
, false);
404 el
.attachEvent('on' + evt
, normed_fn
);
408 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
409 var ctx
= cnv
.getContext("2d");
411 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
416 * Generates interface elements for the Dygraph: a containing div, a div to
417 * display the current point, and a textbox to adjust the rolling average
418 * period. Also creates the Renderer/Layout elements.
421 Dygraph
.prototype.createInterface_
= function() {
422 // Create the all-enclosing graph div
423 var enclosing
= this.maindiv_
;
425 this.graphDiv
= document
.createElement("div");
426 this.graphDiv
.style
.width
= this.width_
+ "px";
427 this.graphDiv
.style
.height
= this.height_
+ "px";
428 enclosing
.appendChild(this.graphDiv
);
432 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
434 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
435 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
436 - 2 * this.attr_("axisTickSize");
437 this.clippingArea_
= clip
;
439 // Create the canvas for interactive parts of the chart.
440 this.canvas_
= Dygraph
.createCanvas();
441 this.canvas_
.style
.position
= "absolute";
442 this.canvas_
.width
= this.width_
;
443 this.canvas_
.height
= this.height_
;
444 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
445 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
447 // ... and for static parts of the chart.
448 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
450 // The interactive parts of the graph are drawn on top of the chart.
451 this.graphDiv
.appendChild(this.hidden_
);
452 this.graphDiv
.appendChild(this.canvas_
);
453 this.mouseEventElement_
= this.canvas_
;
455 // Make sure we don't overdraw.
456 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
457 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
460 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
461 dygraph
.mouseMove_(e
);
463 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
464 dygraph
.mouseOut_(e
);
467 // Create the grapher
468 // TODO(danvk): why does the Layout need its own set of options?
469 this.layoutOptions_
= { 'xOriginIsZero': false };
470 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
471 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
472 Dygraph
.update(this.layoutOptions_
, {
473 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
475 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
477 // TODO(danvk): why does the Renderer need its own set of options?
478 this.renderOptions_
= { colorScheme
: this.colors_
,
480 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
481 Dygraph
.update(this.renderOptions_
, this.attrs_
);
482 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
483 this.plotter_
= new DygraphCanvasRenderer(this,
484 this.hidden_
, this.layout_
,
485 this.renderOptions_
);
487 this.createStatusMessage_();
488 this.createRollInterface_();
489 this.createDragInterface_();
493 * Detach DOM elements in the dygraph and null out all data references.
494 * Calling this when you're done with a dygraph can dramatically reduce memory
495 * usage. See, e.g., the tests/perf.html example.
497 Dygraph
.prototype.destroy
= function() {
498 var removeRecursive
= function(node
) {
499 while (node
.hasChildNodes()) {
500 removeRecursive(node
.firstChild
);
501 node
.removeChild(node
.firstChild
);
504 removeRecursive(this.maindiv_
);
506 var nullOut
= function(obj
) {
508 if (typeof(obj
[n
]) === 'object') {
514 // These may not all be necessary, but it can't hurt...
515 nullOut(this.layout_
);
516 nullOut(this.plotter_
);
521 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
522 * this particular canvas. All Dygraph work is done on this.canvas_.
523 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
524 * @return {Object} The newly-created canvas
527 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
528 var h
= Dygraph
.createCanvas();
529 h
.style
.position
= "absolute";
530 // TODO(danvk): h should be offset from canvas. canvas needs to include
531 // some extra area to make it easier to zoom in on the far left and far
532 // right. h needs to be precisely the plot area, so that clipping occurs.
533 h
.style
.top
= canvas
.style
.top
;
534 h
.style
.left
= canvas
.style
.left
;
535 h
.width
= this.width_
;
536 h
.height
= this.height_
;
537 h
.style
.width
= this.width_
+ "px"; // for IE
538 h
.style
.height
= this.height_
+ "px"; // for IE
542 // Taken from MochiKit.Color
543 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
547 if (saturation
=== 0) {
552 var i
= Math
.floor(hue
* 6);
553 var f
= (hue
* 6) - i
;
554 var p
= value
* (1 - saturation
);
555 var q
= value
* (1 - (saturation
* f
));
556 var t
= value
* (1 - (saturation
* (1 - f
)));
558 case 1: red
= q
; green
= value
; blue
= p
; break;
559 case 2: red
= p
; green
= value
; blue
= t
; break;
560 case 3: red
= p
; green
= q
; blue
= value
; break;
561 case 4: red
= t
; green
= p
; blue
= value
; break;
562 case 5: red
= value
; green
= p
; blue
= q
; break;
563 case 6: // fall through
564 case 0: red
= value
; green
= t
; blue
= p
; break;
567 red
= Math
.floor(255 * red
+ 0.5);
568 green
= Math
.floor(255 * green
+ 0.5);
569 blue
= Math
.floor(255 * blue
+ 0.5);
570 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
575 * Generate a set of distinct colors for the data series. This is done with a
576 * color wheel. Saturation/Value are customizable, and the hue is
577 * equally-spaced around the color wheel. If a custom set of colors is
578 * specified, that is used instead.
581 Dygraph
.prototype.setColors_
= function() {
582 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
583 // away with this.renderOptions_.
584 var num
= this.attr_("labels").length
- 1;
586 var colors
= this.attr_('colors');
588 var sat
= this.attr_('colorSaturation') || 1.0;
589 var val
= this.attr_('colorValue') || 0.5;
590 var half
= Math
.ceil(num
/ 2);
591 for (var i
= 1; i
<= num
; i
++) {
592 if (!this.visibility()[i
-1]) continue;
593 // alternate colors for high contrast.
594 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
595 var hue
= (1.0 * idx
/ (1 + num
));
596 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
599 for (var i
= 0; i
< num
; i
++) {
600 if (!this.visibility()[i
]) continue;
601 var colorStr
= colors
[i
% colors
.length
];
602 this.colors_
.push(colorStr
);
606 // TODO(danvk): update this w/r
/t/ the
new options system
.
607 this.renderOptions_
.colorScheme
= this.colors_
;
608 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
609 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
610 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
614 * Return the list of colors. This is either the list of colors passed in the
615 * attributes, or the autogenerated list of rgb(r,g,b) strings.
616 * @return {Array<string>} The list of colors.
618 Dygraph
.prototype.getColors
= function() {
622 // The following functions are from quirksmode.org with a modification for Safari from
623 // http://blog.firetree.net/2005/07/04/javascript-find-position/
624 // http://www.quirksmode.org/js
/findpos
.html
625 Dygraph
.findPosX
= function(obj
) {
630 curleft
+= obj
.offsetLeft
;
631 if(!obj
.offsetParent
)
633 obj
= obj
.offsetParent
;
640 Dygraph
.findPosY
= function(obj
) {
645 curtop
+= obj
.offsetTop
;
646 if(!obj
.offsetParent
)
648 obj
= obj
.offsetParent
;
658 * Create the div that contains information on the selected point(s)
659 * This goes in the top right of the canvas, unless an external div has already
663 Dygraph
.prototype.createStatusMessage_
= function() {
664 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
665 if (userLabelsDiv
&& null != userLabelsDiv
666 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
667 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
669 if (!this.attr_("labelsDiv")) {
670 var divWidth
= this.attr_('labelsDivWidth');
672 "position": "absolute",
675 "width": divWidth
+ "px",
677 "left": (this.width_
- divWidth
- 2) + "px",
678 "background": "white",
680 "overflow": "hidden"};
681 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
682 var div
= document
.createElement("div");
683 for (var name
in messagestyle
) {
684 if (messagestyle
.hasOwnProperty(name
)) {
685 div
.style
[name
] = messagestyle
[name
];
688 this.graphDiv
.appendChild(div
);
689 this.attrs_
.labelsDiv
= div
;
694 * Create the text box to adjust the averaging period
695 * @return {Object} The newly-created text box
698 Dygraph
.prototype.createRollInterface_
= function() {
699 var display
= this.attr_('showRoller') ? "block" : "none";
700 var textAttr
= { "position": "absolute",
702 "top": (this.plotter_
.area
.h
- 25) + "px",
703 "left": (this.plotter_
.area
.x
+ 1) + "px",
706 var roller
= document
.createElement("input");
707 roller
.type
= "text";
709 roller
.value
= this.rollPeriod_
;
710 for (var name
in textAttr
) {
711 if (textAttr
.hasOwnProperty(name
)) {
712 roller
.style
[name
] = textAttr
[name
];
716 var pa
= this.graphDiv
;
717 pa
.appendChild(roller
);
719 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
723 // These functions are taken from MochiKit.Signal
724 Dygraph
.pageX
= function(e
) {
726 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
729 var b
= document
.body
;
731 (de
.scrollLeft
|| b
.scrollLeft
) -
732 (de
.clientLeft
|| 0);
736 Dygraph
.pageY
= function(e
) {
738 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
741 var b
= document
.body
;
743 (de
.scrollTop
|| b
.scrollTop
) -
749 * Set up all the mouse handlers needed to capture dragging behavior for zoom
753 Dygraph
.prototype.createDragInterface_
= function() {
756 // Tracks whether the mouse is down right now
757 var isZooming
= false;
758 var isPanning
= false;
759 var dragStartX
= null;
760 var dragStartY
= null;
763 var dragDirection
= null;
766 var prevDragDirection
= null;
768 // draggingDate and draggingValue represent the [date,value] point on the
769 // graph at which the mouse was pressed. As the mouse moves while panning,
770 // the viewport must pan so that the mouse position points to
771 // [draggingDate, draggingValue]
772 var draggingDate
= null;
773 var draggingValue
= null;
775 // The range in second/value units that the viewport encompasses during a
776 // panning operation.
777 var dateRange
= null;
778 var valueRange
= null;
780 // Utility function to convert page-wide coordinates to canvas coords
783 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
784 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
786 // Draw zoom rectangles when the mouse is down and the user moves around
787 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
789 dragEndX
= getX(event
);
790 dragEndY
= getY(event
);
792 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
793 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
795 // drag direction threshold for y axis is twice as large as x axis
796 dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
798 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
799 prevDragDirection
, prevEndX
, prevEndY
);
803 prevDragDirection
= dragDirection
;
804 } else if (isPanning
) {
805 dragEndX
= getX(event
);
806 dragEndY
= getY(event
);
808 // Want to have it so that:
809 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
810 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
811 // 3. draggingValue appears at dragEndY.
812 // 4. valueRange is unaltered.
814 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
815 var maxDate
= minDate
+ dateRange
;
816 self
.dateWindow_
= [minDate
, maxDate
];
819 // y-axis scaling is automatic unless a valueRange is defined or
820 // if the user zooms in on the y-axis. If neither is true, valueWindow_
822 if (self
.valueWindow_
) {
823 var maxValue
= draggingValue
+ (dragEndY
/ self
.height_
) * valueRange
;
824 var minValue
= maxValue
- valueRange
;
825 self
.valueWindow_
= [ minValue
, maxValue
];
827 self
.drawGraph_(self
.rawData_
);
831 // Track the beginning of drag events
832 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
833 px
= Dygraph
.findPosX(self
.canvas_
);
834 py
= Dygraph
.findPosY(self
.canvas_
);
835 dragStartX
= getX(event
);
836 dragStartY
= getY(event
);
838 if (event
.altKey
|| event
.shiftKey
) {
839 // have to be zoomed in to pan.
840 if (!self
.dateWindow_
&& !self
.valueWindow_
) return;
843 var xRange
= self
.xAxisRange();
844 dateRange
= xRange
[1] - xRange
[0];
845 var yRange
= self
.yAxisRange();
846 valueRange
= yRange
[1] - yRange
[0];
848 // TODO(konigsberg): Switch from all this math to toDataCoords?
849 // Seems to work for the dragging value.
850 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
852 var r
= self
.toDataCoords(null, dragStartY
);
853 draggingValue
= r
[1];
859 // If the user releases the mouse button during a drag, but not over the
860 // canvas, then it doesn't count as a zooming action.
861 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
862 if (isZooming
|| isPanning
) {
871 draggingValue
= null;
877 // Temporarily cancel the dragging event when the mouse leaves the graph
878 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
885 // If the mouse is released on the canvas during a drag event, then it's a
886 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
887 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
890 dragEndX
= getX(event
);
891 dragEndY
= getY(event
);
892 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
893 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
895 if (regionWidth
< 2 && regionHeight
< 2 &&
896 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
897 // TODO(danvk): pass along more info about the points, e.g. 'x'
898 if (self
.attr_('clickCallback') != null) {
899 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
901 if (self
.attr_('pointClickCallback')) {
902 // check if the click was on a particular point.
904 var closestDistance
= 0;
905 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
906 var p
= self
.selPoints_
[i
];
907 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
908 Math
.pow(p
.canvasy
- dragEndY
, 2);
909 if (closestIdx
== -1 || distance
< closestDistance
) {
910 closestDistance
= distance
;
915 // Allow any click within two pixels of the dot.
916 var radius
= self
.attr_('highlightCircleSize') + 2;
917 if (closestDistance
<= 5 * 5) {
918 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
923 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
924 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
925 Math
.max(dragStartX
, dragEndX
));
926 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
927 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
928 Math
.max(dragStartY
, dragEndY
));
930 self
.canvas_
.getContext("2d").clearRect(0, 0,
932 self
.canvas_
.height
);
942 draggingValue
= null;
948 // Double-clicking zooms back out
949 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
950 // Disable zooming out if panning.
951 if (event
.altKey
|| event
.shiftKey
) return;
958 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
959 * up any previous zoom rectangles that were drawn. This could be optimized to
960 * avoid extra redrawing, but it's tricky to avoid interactions with the status
963 * @param {Number} direction the direction of the zoom rectangle. Acceptable
964 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
965 * @param {Number} startX The X position where the drag started, in canvas
967 * @param {Number} endX The current X position of the drag, in canvas coords.
968 * @param {Number} startY The Y position where the drag started, in canvas
970 * @param {Number} endY The current Y position of the drag, in canvas coords.
971 * @param {Number} prevDirection the value of direction on the previous call to
972 * this function. Used to avoid excess redrawing
973 * @param {Number} prevEndX The value of endX on the previous call to this
974 * function. Used to avoid excess redrawing
975 * @param {Number} prevEndY The value of endY on the previous call to this
976 * function. Used to avoid excess redrawing
979 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
980 prevDirection
, prevEndX
, prevEndY
) {
981 var ctx
= this.canvas_
.getContext("2d");
983 // Clean up from the previous rect if necessary
984 if (prevDirection
== Dygraph
.HORIZONTAL
) {
985 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
986 Math
.abs(startX
- prevEndX
), this.height_
);
987 } else if (prevDirection
== Dygraph
.VERTICAL
){
988 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
989 this.width_
, Math
.abs(startY
- prevEndY
));
992 // Draw a light-grey rectangle to show the new viewing area
993 if (direction
== Dygraph
.HORIZONTAL
) {
994 if (endX
&& startX
) {
995 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
996 ctx
.fillRect(Math
.min(startX
, endX
), 0,
997 Math
.abs(endX
- startX
), this.height_
);
1000 if (direction
== Dygraph
.VERTICAL
) {
1001 if (endY
&& startY
) {
1002 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1003 ctx
.fillRect(0, Math
.min(startY
, endY
),
1004 this.width_
, Math
.abs(endY
- startY
));
1010 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1011 * the canvas. The exact zoom window may be slightly larger if there are no data
1012 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1013 * which accepts dates that match the raw data. This function redraws the graph.
1015 * @param {Number} lowX The leftmost pixel value that should be visible.
1016 * @param {Number} highX The rightmost pixel value that should be visible.
1019 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1020 // Find the earliest and latest dates contained in this canvasx range.
1021 // Convert the call to date ranges of the raw data.
1022 var r
= this.toDataCoords(lowX
, null);
1024 r
= this.toDataCoords(highX
, null);
1026 this.doZoomXDates_(minDate
, maxDate
);
1030 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1031 * method with doZoomX which accepts pixel coordinates. This function redraws
1034 * @param {Number} minDate The minimum date that should be visible.
1035 * @param {Number} maxDate The maximum date that should be visible.
1038 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1039 this.dateWindow_
= [minDate
, maxDate
];
1040 this.drawGraph_(this.rawData_
);
1041 if (this.attr_("zoomCallback")) {
1042 var yRange
= this.yAxisRange();
1043 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1048 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1049 * the canvas. The exact zoom window may be slightly larger if there are no
1050 * data points near lowY or highY. Don't confuse this function with
1051 * doZoomYValues, which accepts parameters that match the raw data. This
1052 * function redraws the graph.
1054 * @param {Number} lowY The topmost pixel value that should be visible.
1055 * @param {Number} highY The lowest pixel value that should be visible.
1058 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1059 // Find the highest and lowest values in pixel range.
1060 var r
= this.toDataCoords(null, lowY
);
1061 var maxValue
= r
[1];
1062 r
= this.toDataCoords(null, highY
);
1063 var minValue
= r
[1];
1065 this.doZoomYValues_(minValue
, maxValue
);
1069 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1070 * method with doZoomY which accepts pixel coordinates. This function redraws
1073 * @param {Number} minValue The minimum Value that should be visible.
1074 * @param {Number} maxValue The maximum value that should be visible.
1077 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1078 this.valueWindow_
= [minValue
, maxValue
];
1079 this.drawGraph_(this.rawData_
);
1080 if (this.attr_("zoomCallback")) {
1081 var xRange
= this.xAxisRange();
1082 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1087 * Reset the zoom to the original view coordinates. This is the same as
1088 * double-clicking on the graph.
1092 Dygraph
.prototype.doUnzoom_
= function() {
1094 if (this.dateWindow_
!= null) {
1096 this.dateWindow_
= null;
1098 if (this.valueWindow_
!= null) {
1100 this.valueWindow_
= this.valueRange_
;
1104 // Putting the drawing operation before the callback because it resets
1106 this.drawGraph_(this.rawData_
);
1107 if (this.attr_("zoomCallback")) {
1108 var minDate
= this.rawData_
[0][0];
1109 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1110 var minValue
= this.yAxisRange()[0];
1111 var maxValue
= this.yAxisRange()[1];
1112 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1118 * When the mouse moves in the canvas, display information about a nearby data
1119 * point and draw dots over those points in the data series. This function
1120 * takes care of cleanup of previously-drawn dots.
1121 * @param {Object} event The mousemove event from the browser.
1124 Dygraph
.prototype.mouseMove_
= function(event
) {
1125 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1126 var points
= this.layout_
.points
;
1131 // Loop through all the points and find the date nearest to our current
1133 var minDist
= 1e+100;
1135 for (var i
= 0; i
< points
.length
; i
++) {
1136 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1137 if (dist
> minDist
) continue;
1141 if (idx
>= 0) lastx
= points
[idx
].xval
;
1142 // Check that you can really highlight the last day's data
1143 if (canvasx
> points
[points
.length
-1].canvasx
)
1144 lastx
= points
[points
.length
-1].xval
;
1146 // Extract the points we've selected
1147 this.selPoints_
= [];
1148 var l
= points
.length
;
1149 if (!this.attr_("stackedGraph")) {
1150 for (var i
= 0; i
< l
; i
++) {
1151 if (points
[i
].xval
== lastx
) {
1152 this.selPoints_
.push(points
[i
]);
1156 // Need to 'unstack' points starting from the bottom
1157 var cumulative_sum
= 0;
1158 for (var i
= l
- 1; i
>= 0; i
--) {
1159 if (points
[i
].xval
== lastx
) {
1160 var p
= {}; // Clone the point since we modify it
1161 for (var k
in points
[i
]) {
1162 p
[k
] = points
[i
][k
];
1164 p
.yval
-= cumulative_sum
;
1165 cumulative_sum
+= p
.yval
;
1166 this.selPoints_
.push(p
);
1169 this.selPoints_
.reverse();
1172 if (this.attr_("highlightCallback")) {
1173 var px
= this.lastx_
;
1174 if (px
!== null && lastx
!= px
) {
1175 // only fire if the selected point has changed.
1176 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1180 // Save last x position for callbacks.
1181 this.lastx_
= lastx
;
1183 this.updateSelection_();
1187 * Draw dots over the selectied points in the data series. This function
1188 * takes care of cleanup of previously-drawn dots.
1191 Dygraph
.prototype.updateSelection_
= function() {
1192 // Clear the previously drawn vertical, if there is one
1193 var ctx
= this.canvas_
.getContext("2d");
1194 if (this.previousVerticalX_
>= 0) {
1195 // Determine the maximum highlight circle size.
1196 var maxCircleSize
= 0;
1197 var labels
= this.attr_('labels');
1198 for (var i
= 1; i
< labels
.length
; i
++) {
1199 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1200 if (r
> maxCircleSize
) maxCircleSize
= r
;
1202 var px
= this.previousVerticalX_
;
1203 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1204 2 * maxCircleSize
+ 2, this.height_
);
1207 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1209 if (this.selPoints_
.length
> 0) {
1210 var canvasx
= this.selPoints_
[0].canvasx
;
1212 // Set the status message to indicate the selected point(s)
1213 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1214 var fmtFunc
= this.attr_('yValueFormatter');
1215 var clen
= this.colors_
.length
;
1217 if (this.attr_('showLabelsOnHighlight')) {
1218 // Set the status message to indicate the selected point(s)
1219 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1220 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1221 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1222 if (this.attr_("labelsSeparateLines")) {
1225 var point
= this.selPoints_
[i
];
1226 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1227 var yval
= fmtFunc(point
.yval
);
1228 replace
+= " <b><font color='" + c
.toHex() + "'>"
1229 + point
.name
+ "</font></b>:"
1233 this.attr_("labelsDiv").innerHTML
= replace
;
1236 // Draw colored circles over the center of each selected point
1238 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1239 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1241 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1243 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1244 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1245 0, 2 * Math
.PI
, false);
1250 this.previousVerticalX_
= canvasx
;
1255 * Set manually set selected dots, and display information about them
1256 * @param int row number that should by highlighted
1257 * false value clears the selection
1260 Dygraph
.prototype.setSelection
= function(row
) {
1261 // Extract the points we've selected
1262 this.selPoints_
= [];
1265 if (row
!== false) {
1266 row
= row
-this.boundaryIds_
[0][0];
1269 if (row
!== false && row
>= 0) {
1270 for (var i
in this.layout_
.datasets
) {
1271 if (row
< this.layout_
.datasets
[i
].length
) {
1272 var point
= this.layout_
.points
[pos
+row
];
1274 if (this.attr_("stackedGraph")) {
1275 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1278 this.selPoints_
.push(point
);
1280 pos
+= this.layout_
.datasets
[i
].length
;
1284 if (this.selPoints_
.length
) {
1285 this.lastx_
= this.selPoints_
[0].xval
;
1286 this.updateSelection_();
1289 this.clearSelection();
1295 * The mouse has left the canvas. Clear out whatever artifacts remain
1296 * @param {Object} event the mouseout event from the browser.
1299 Dygraph
.prototype.mouseOut_
= function(event
) {
1300 if (this.attr_("unhighlightCallback")) {
1301 this.attr_("unhighlightCallback")(event
);
1304 if (this.attr_("hideOverlayOnMouseOut")) {
1305 this.clearSelection();
1310 * Remove all selection from the canvas
1313 Dygraph
.prototype.clearSelection
= function() {
1314 // Get rid of the overlay data
1315 var ctx
= this.canvas_
.getContext("2d");
1316 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1317 this.attr_("labelsDiv").innerHTML
= "";
1318 this.selPoints_
= [];
1323 * Returns the number of the currently selected row
1324 * @return int row number, of -1 if nothing is selected
1327 Dygraph
.prototype.getSelection
= function() {
1328 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1332 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1333 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1334 return row
+ this.boundaryIds_
[0][0];
1340 Dygraph
.zeropad
= function(x
) {
1341 if (x
< 10) return "0" + x
; else return "" + x
;
1345 * Return a string version of the hours, minutes and seconds portion of a date.
1346 * @param {Number} date The JavaScript date (ms since epoch)
1347 * @return {String} A time of the form "HH:MM:SS"
1350 Dygraph
.hmsString_
= function(date
) {
1351 var zeropad
= Dygraph
.zeropad
;
1352 var d
= new Date(date
);
1353 if (d
.getSeconds()) {
1354 return zeropad(d
.getHours()) + ":" +
1355 zeropad(d
.getMinutes()) + ":" +
1356 zeropad(d
.getSeconds());
1358 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1363 * Convert a JS date to a string appropriate to display on an axis that
1364 * is displaying values at the stated granularity.
1365 * @param {Date} date The date to format
1366 * @param {Number} granularity One of the Dygraph granularity constants
1367 * @return {String} The formatted date
1370 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1371 if (granularity
>= Dygraph
.MONTHLY
) {
1372 return date
.strftime('%b %y');
1374 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1375 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1376 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1378 return Dygraph
.hmsString_(date
.getTime());
1384 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1385 * @param {Number} date The JavaScript date (ms since epoch)
1386 * @return {String} A date of the form "YYYY/MM/DD"
1389 Dygraph
.dateString_
= function(date
, self
) {
1390 var zeropad
= Dygraph
.zeropad
;
1391 var d
= new Date(date
);
1394 var year
= "" + d
.getFullYear();
1395 // Get a 0 padded month string
1396 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1397 // Get a 0 padded day string
1398 var day
= zeropad(d
.getDate());
1401 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1402 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1404 return year
+ "/" + month + "/" + day
+ ret
;
1408 * Round a number to the specified number of digits past the decimal point.
1409 * @param {Number} num The number to round
1410 * @param {Number} places The number of decimals to which to round
1411 * @return {Number} The rounded number
1414 Dygraph
.round_
= function(num
, places
) {
1415 var shift
= Math
.pow(10, places
);
1416 return Math
.round(num
* shift
)/shift
;
1420 * Fires when there's data available to be graphed.
1421 * @param {String} data Raw CSV data to be plotted
1424 Dygraph
.prototype.loadedEvent_
= function(data
) {
1425 this.rawData_
= this.parseCSV_(data
);
1426 this.drawGraph_(this.rawData_
);
1429 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1430 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1431 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1434 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1437 Dygraph
.prototype.addXTicks_
= function() {
1438 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1439 var startDate
, endDate
;
1440 if (this.dateWindow_
) {
1441 startDate
= this.dateWindow_
[0];
1442 endDate
= this.dateWindow_
[1];
1444 startDate
= this.rawData_
[0][0];
1445 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1448 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1449 this.layout_
.updateOptions({xTicks
: xTicks
});
1452 // Time granularity enumeration
1453 Dygraph
.SECONDLY
= 0;
1454 Dygraph
.TWO_SECONDLY
= 1;
1455 Dygraph
.FIVE_SECONDLY
= 2;
1456 Dygraph
.TEN_SECONDLY
= 3;
1457 Dygraph
.THIRTY_SECONDLY
= 4;
1458 Dygraph
.MINUTELY
= 5;
1459 Dygraph
.TWO_MINUTELY
= 6;
1460 Dygraph
.FIVE_MINUTELY
= 7;
1461 Dygraph
.TEN_MINUTELY
= 8;
1462 Dygraph
.THIRTY_MINUTELY
= 9;
1463 Dygraph
.HOURLY
= 10;
1464 Dygraph
.TWO_HOURLY
= 11;
1465 Dygraph
.SIX_HOURLY
= 12;
1467 Dygraph
.WEEKLY
= 14;
1468 Dygraph
.MONTHLY
= 15;
1469 Dygraph
.QUARTERLY
= 16;
1470 Dygraph
.BIANNUAL
= 17;
1471 Dygraph
.ANNUAL
= 18;
1472 Dygraph
.DECADAL
= 19;
1473 Dygraph
.NUM_GRANULARITIES
= 20;
1475 Dygraph
.SHORT_SPACINGS
= [];
1476 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1477 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1478 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1479 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1480 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1481 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1482 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1483 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1484 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1485 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1486 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1487 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1488 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1489 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1490 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1494 // If we used this time granularity, how many ticks would there be?
1495 // This is only an approximation, but it's generally good enough.
1497 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1498 if (granularity
< Dygraph
.MONTHLY
) {
1499 // Generate one tick mark for every fixed interval of time.
1500 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1501 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1503 var year_mod
= 1; // e.g. to only print one point every 10 years.
1504 var num_months
= 12;
1505 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1506 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1507 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1508 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1510 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1511 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1512 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1518 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1519 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1521 // Returns an array containing {v: millis, label: label} dictionaries.
1523 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1524 var formatter
= this.attr_("xAxisLabelFormatter");
1526 if (granularity
< Dygraph
.MONTHLY
) {
1527 // Generate one tick mark for every fixed interval of time.
1528 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1529 var format
= '%d%b'; // e.g. "1Jan"
1531 // Find a time less than start_time which occurs on a "nice" time boundary
1532 // for this granularity.
1533 var g
= spacing
/ 1000;
1534 var d
= new Date(start_time
);
1535 if (g
<= 60) { // seconds
1536 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1540 if (g
<= 60) { // minutes
1541 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1546 if (g
<= 24) { // days
1547 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1552 if (g
== 7) { // one week
1553 d
.setDate(d
.getDate() - d
.getDay());
1558 start_time
= d
.getTime();
1560 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1561 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1564 // Display a tick mark on the first of a set of months of each year.
1565 // Years get a tick mark iff y % year_mod == 0. This is useful for
1566 // displaying a tick mark once every 10 years, say, on long time scales.
1568 var year_mod
= 1; // e.g. to only print one point every 10 years.
1570 if (granularity
== Dygraph
.MONTHLY
) {
1571 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1572 } else if (granularity
== Dygraph
.QUARTERLY
) {
1573 months
= [ 0, 3, 6, 9 ];
1574 } else if (granularity
== Dygraph
.BIANNUAL
) {
1576 } else if (granularity
== Dygraph
.ANNUAL
) {
1578 } else if (granularity
== Dygraph
.DECADAL
) {
1583 var start_year
= new Date(start_time
).getFullYear();
1584 var end_year
= new Date(end_time
).getFullYear();
1585 var zeropad
= Dygraph
.zeropad
;
1586 for (var i
= start_year
; i
<= end_year
; i
++) {
1587 if (i
% year_mod
!= 0) continue;
1588 for (var j
= 0; j
< months
.length
; j
++) {
1589 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1590 var t
= Date
.parse(date_str
);
1591 if (t
< start_time
|| t
> end_time
) continue;
1592 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1602 * Add ticks to the x-axis based on a date range.
1603 * @param {Number} startDate Start of the date window (millis since epoch)
1604 * @param {Number} endDate End of the date window (millis since epoch)
1605 * @return {Array.<Object>} Array of {label, value} tuples.
1608 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1610 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1611 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1612 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1619 return self
.GetXAxis(startDate
, endDate
, chosen
);
1621 // TODO(danvk): signal error.
1626 * Add ticks when the x axis has numbers on it (instead of dates)
1627 * @param {Number} startDate Start of the date window (millis since epoch)
1628 * @param {Number} endDate End of the date window (millis since epoch)
1630 * @param {function} formatter: Optional formatter to use for each tick value
1631 * @return {Array.<Object>} Array of {label, value} tuples.
1634 Dygraph
.numericTicks
= function(minV
, maxV
, self
, formatter
) {
1636 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1637 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1638 // The first spacing greater than pixelsPerYLabel is what we use.
1639 // TODO(danvk): version that works on a log scale.
1640 if (self
.attr_("labelsKMG2")) {
1641 var mults
= [1, 2, 4, 8];
1643 var mults
= [1, 2, 5];
1645 var scale
, low_val
, high_val
, nTicks
;
1646 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1647 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1648 for (var i
= -10; i
< 50; i
++) {
1649 if (self
.attr_("labelsKMG2")) {
1650 var base_scale
= Math
.pow(16, i
);
1652 var base_scale
= Math
.pow(10, i
);
1654 for (var j
= 0; j
< mults
.length
; j
++) {
1655 scale
= base_scale
* mults
[j
];
1656 low_val
= Math
.floor(minV
/ scale
) * scale
;
1657 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1658 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1659 var spacing
= self
.height_
/ nTicks
;
1660 // wish I could break out of both loops at once...
1661 if (spacing
> pixelsPerTick
) break;
1663 if (spacing
> pixelsPerTick
) break;
1666 // Construct labels for the ticks
1670 if (self
.attr_("labelsKMB")) {
1672 k_labels
= [ "K", "M", "B", "T" ];
1674 if (self
.attr_("labelsKMG2")) {
1675 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1677 k_labels
= [ "k", "M", "G", "T" ];
1680 // Allow reverse y-axis if it's explicitly requested.
1681 if (low_val
> high_val
) scale
*= -1;
1683 for (var i
= 0; i
< nTicks
; i
++) {
1684 var tickV
= low_val
+ i
* scale
;
1685 var absTickV
= Math
.abs(tickV
);
1687 if (formatter
!= undefined
) {
1688 label
= formatter(tickV
);
1690 label
= Dygraph
.round_(tickV
, 2);
1692 if (k_labels
.length
) {
1693 // Round up to an appropriate unit.
1695 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1696 if (absTickV
>= n
) {
1697 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1702 ticks
.push( {label
: label
, v
: tickV
} );
1708 * Adds appropriate ticks on the y-axis
1709 * @param {Number} minY The minimum Y value in the data set
1710 * @param {Number} maxY The maximum Y value in the data set
1713 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1714 // Set the number of ticks so that the labels are human-friendly.
1715 // TODO(danvk): make this an attribute as well.
1716 var formatter
= this.attr_('yAxisLabelFormatter') ? this.attr_('yAxisLabelFormatter') : this.attr_('yValueFormatter');
1717 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this, formatter
);
1718 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1722 // Computes the range of the data series (including confidence intervals).
1723 // series is either [ [x1, y1], [x2, y2], ... ] or
1724 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1725 // Returns [low, high]
1726 Dygraph
.prototype.extremeValues_
= function(series
) {
1727 var minY
= null, maxY
= null;
1729 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1731 // With custom bars, maxY is the max of the high values.
1732 for (var j
= 0; j
< series
.length
; j
++) {
1733 var y
= series
[j
][1][0];
1735 var low
= y
- series
[j
][1][1];
1736 var high
= y
+ series
[j
][1][2];
1737 if (low
> y
) low
= y
; // this can happen with custom bars,
1738 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1739 if (maxY
== null || high
> maxY
) {
1742 if (minY
== null || low
< minY
) {
1747 for (var j
= 0; j
< series
.length
; j
++) {
1748 var y
= series
[j
][1];
1749 if (y
=== null || isNaN(y
)) continue;
1750 if (maxY
== null || y
> maxY
) {
1753 if (minY
== null || y
< minY
) {
1759 return [minY
, maxY
];
1763 * Update the graph with new data. Data is in the format
1764 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1765 * or, if errorBars=true,
1766 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1767 * @param {Array.<Object>} data The data (see above)
1770 Dygraph
.prototype.drawGraph_
= function(data
) {
1771 // This is used to set the second parameter to drawCallback, below.
1772 var is_initial_draw
= this.is_initial_draw_
;
1773 this.is_initial_draw_
= false;
1775 var minY
= null, maxY
= null;
1776 this.layout_
.removeAllDatasets();
1778 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1780 // Loop over the fields (series). Go from the last to the first,
1781 // because if they're stacked that's how we accumulate the values.
1783 var cumulative_y
= []; // For stacked series.
1786 // Loop over all fields and create datasets
1787 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1788 if (!this.visibility()[i
- 1]) continue;
1790 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1793 for (var j
= 0; j
< data
.length
; j
++) {
1794 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1795 var date
= data
[j
][0];
1796 series
.push([date
, data
[j
][i
]]);
1799 series
= this.rollingAverage(series
, this.rollPeriod_
);
1801 // Prune down to the desired range, if necessary (for zooming)
1802 // Because there can be lines going to points outside of the visible area,
1803 // we actually prune to visible points, plus one on either side.
1804 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1805 if (this.dateWindow_
) {
1806 var low
= this.dateWindow_
[0];
1807 var high
= this.dateWindow_
[1];
1809 // TODO(danvk): do binary search instead of linear search.
1810 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1811 var firstIdx
= null, lastIdx
= null;
1812 for (var k
= 0; k
< series
.length
; k
++) {
1813 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1816 if (series
[k
][0] <= high
) {
1820 if (firstIdx
=== null) firstIdx
= 0;
1821 if (firstIdx
> 0) firstIdx
--;
1822 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1823 if (lastIdx
< series
.length
- 1) lastIdx
++;
1824 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1825 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1826 pruned
.push(series
[k
]);
1830 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1833 var extremes
= this.extremeValues_(series
);
1834 var thisMinY
= extremes
[0];
1835 var thisMaxY
= extremes
[1];
1836 if (minY
=== null || (thisMinY
!= null && thisMinY
< minY
)) minY
= thisMinY
;
1837 if (maxY
=== null || (thisMaxY
!= null && thisMaxY
> maxY
)) maxY
= thisMaxY
;
1840 for (var j
=0; j
<series
.length
; j
++) {
1841 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1844 } else if (this.attr_("stackedGraph")) {
1845 var l
= series
.length
;
1847 for (var j
= 0; j
< l
; j
++) {
1848 // If one data set has a NaN, let all subsequent stacked
1849 // sets inherit the NaN -- only start at 0 for the first set.
1850 var x
= series
[j
][0];
1851 if (cumulative_y
[x
] === undefined
)
1852 cumulative_y
[x
] = 0;
1854 actual_y
= series
[j
][1];
1855 cumulative_y
[x
] += actual_y
;
1857 series
[j
] = [x
, cumulative_y
[x
]]
1859 if (!maxY
|| cumulative_y
[x
] > maxY
)
1860 maxY
= cumulative_y
[x
];
1864 datasets
[i
] = series
;
1867 for (var i
= 1; i
< datasets
.length
; i
++) {
1868 if (!this.visibility()[i
- 1]) continue;
1869 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1872 // Use some heuristics to come up with a good maxY value, unless it's been
1873 // set explicitly by the developer or end-user (via drag)
1874 if (this.valueWindow_
!= null) {
1875 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1876 this.displayedYRange_
= this.valueWindow_
;
1878 // This affects the calculation of span, below.
1879 if (this.attr_("includeZero") && minY
> 0) {
1883 // Add some padding and round up to an integer to be human-friendly.
1884 var span
= maxY
- minY
;
1885 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1886 if (span
== 0) { span
= maxY
; }
1887 var maxAxisY
= maxY
+ 0.1 * span
;
1888 var minAxisY
= minY
- 0.1 * span
;
1890 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1891 if (!this.attr_("avoidMinZero")) {
1892 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1893 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1896 if (this.attr_("includeZero")) {
1897 if (maxY
< 0) maxAxisY
= 0;
1898 if (minY
> 0) minAxisY
= 0;
1901 this.addYTicks_(minAxisY
, maxAxisY
);
1902 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1907 // Tell PlotKit to use this new data and render itself
1908 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1909 this.layout_
.evaluateWithError();
1910 this.plotter_
.clear();
1911 this.plotter_
.render();
1912 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1913 this.canvas_
.height
);
1915 if (this.attr_("drawCallback") !== null) {
1916 this.attr_("drawCallback")(this, is_initial_draw
);
1921 * Calculates the rolling average of a data set.
1922 * If originalData is [label, val], rolls the average of those.
1923 * If originalData is [label, [, it's interpreted as [value, stddev]
1924 * and the roll is returned in the same form, with appropriately reduced
1925 * stddev for each value.
1926 * Note that this is where fractional input (i.e. '5/10') is converted into
1928 * @param {Array} originalData The data in the appropriate format (see above)
1929 * @param {Number} rollPeriod The number of days over which to average the data
1931 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1932 if (originalData
.length
< 2)
1933 return originalData
;
1934 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1935 var rollingData
= [];
1936 var sigma
= this.attr_("sigma");
1938 if (this.fractions_
) {
1940 var den
= 0; // numerator/denominator
1942 for (var i
= 0; i
< originalData
.length
; i
++) {
1943 num
+= originalData
[i
][1][0];
1944 den
+= originalData
[i
][1][1];
1945 if (i
- rollPeriod
>= 0) {
1946 num
-= originalData
[i
- rollPeriod
][1][0];
1947 den
-= originalData
[i
- rollPeriod
][1][1];
1950 var date
= originalData
[i
][0];
1951 var value
= den
? num
/ den
: 0.0;
1952 if (this.attr_("errorBars")) {
1953 if (this.wilsonInterval_
) {
1954 // For more details on this confidence interval, see:
1955 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1957 var p
= value
< 0 ? 0 : value
, n
= den
;
1958 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1959 var denom
= 1 + sigma
* sigma
/ den
;
1960 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1961 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1962 rollingData
[i
] = [date
,
1963 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1965 rollingData
[i
] = [date
, [0, 0, 0]];
1968 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1969 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1972 rollingData
[i
] = [date
, mult
* value
];
1975 } else if (this.attr_("customBars")) {
1980 for (var i
= 0; i
< originalData
.length
; i
++) {
1981 var data
= originalData
[i
][1];
1983 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1985 if (y
!= null && !isNaN(y
)) {
1991 if (i
- rollPeriod
>= 0) {
1992 var prev
= originalData
[i
- rollPeriod
];
1993 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2000 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2001 1.0 * (mid
- low
) / count
,
2002 1.0 * (high
- mid
) / count
]];
2005 // Calculate the rolling average for the first rollPeriod - 1 points where
2006 // there is not enough data to roll over the full number of days
2007 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2008 if (!this.attr_("errorBars")){
2009 if (rollPeriod
== 1) {
2010 return originalData
;
2013 for (var i
= 0; i
< originalData
.length
; i
++) {
2016 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2017 var y
= originalData
[j
][1];
2018 if (y
== null || isNaN(y
)) continue;
2020 sum
+= originalData
[j
][1];
2023 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2025 rollingData
[i
] = [originalData
[i
][0], null];
2030 for (var i
= 0; i
< originalData
.length
; i
++) {
2034 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2035 var y
= originalData
[j
][1][0];
2036 if (y
== null || isNaN(y
)) continue;
2038 sum
+= originalData
[j
][1][0];
2039 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2042 var stddev
= Math
.sqrt(variance
) / num_ok
;
2043 rollingData
[i
] = [originalData
[i
][0],
2044 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2046 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2056 * Parses a date, returning the number of milliseconds since epoch. This can be
2057 * passed in as an xValueParser in the Dygraph constructor.
2058 * TODO(danvk): enumerate formats that this understands.
2059 * @param {String} A date in YYYYMMDD format.
2060 * @return {Number} Milliseconds since epoch.
2063 Dygraph
.dateParser
= function(dateStr
, self
) {
2066 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2067 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2068 while (dateStrSlashed
.search("-") != -1) {
2069 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2071 d
= Date
.parse(dateStrSlashed
);
2072 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2073 // TODO(danvk): remove support for this format. It's confusing.
2074 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2075 + "/" + dateStr
.substr(6,2);
2076 d
= Date
.parse(dateStrSlashed
);
2078 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2079 // "2009/07/12 12:34:56"
2080 d
= Date
.parse(dateStr
);
2083 if (!d
|| isNaN(d
)) {
2084 self
.error("Couldn't parse " + dateStr
+ " as a date");
2090 * Detects the type of the str (date or numeric) and sets the various
2091 * formatting attributes in this.attrs_ based on this type.
2092 * @param {String} str An x value.
2095 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2097 if (str
.indexOf('-') >= 0 ||
2098 str
.indexOf('/') >= 0 ||
2099 isNaN(parseFloat(str
))) {
2101 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2102 // TODO(danvk): remove support for this format.
2107 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2108 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2109 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2110 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2112 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2113 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2114 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2115 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2120 * Parses a string in a special csv format. We expect a csv file where each
2121 * line is a date point, and the first field in each line is the date string.
2122 * We also expect that all remaining fields represent series.
2123 * if the errorBars attribute is set, then interpret the fields as:
2124 * date, series1, stddev1, series2, stddev2, ...
2125 * @param {Array.<Object>} data See above.
2128 * @return Array.<Object> An array with one entry for each row. These entries
2129 * are an array of cells in that row. The first entry is the parsed x-value for
2130 * the row. The second, third, etc. are the y-values. These can take on one of
2131 * three forms, depending on the CSV and constructor parameters:
2133 * 2. [ value, stddev ]
2134 * 3. [ low value, center value, high value ]
2136 Dygraph
.prototype.parseCSV_
= function(data
) {
2138 var lines
= data
.split("\n");
2140 // Use the default delimiter or fall back to a tab if that makes sense.
2141 var delim
= this.attr_('delimiter');
2142 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2147 if (this.labelsFromCSV_
) {
2149 this.attrs_
.labels
= lines
[0].split(delim
);
2152 // Parse the x as a float or return null if it's not a number.
2153 var parseFloatOrNull
= function(x
) {
2154 var val
= parseFloat(x
);
2155 return isNaN(val
) ? null : val
;
2159 var defaultParserSet
= false; // attempt to auto-detect x value type
2160 var expectedCols
= this.attr_("labels").length
;
2161 var outOfOrder
= false;
2162 for (var i
= start
; i
< lines
.length
; i
++) {
2163 var line
= lines
[i
];
2164 if (line
.length
== 0) continue; // skip blank lines
2165 if (line
[0] == '#') continue; // skip comment lines
2166 var inFields
= line
.split(delim
);
2167 if (inFields
.length
< 2) continue;
2170 if (!defaultParserSet
) {
2171 this.detectTypeFromString_(inFields
[0]);
2172 xParser
= this.attr_("xValueParser");
2173 defaultParserSet
= true;
2175 fields
[0] = xParser(inFields
[0], this);
2177 // If fractions are expected, parse the numbers as "A/B
"
2178 if (this.fractions_) {
2179 for (var j = 1; j < inFields.length; j++) {
2180 // TODO(danvk): figure out an appropriate way to flag parse errors.
2181 var vals = inFields[j].split("/");
2182 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2184 } else if (this.attr_("errorBars
")) {
2185 // If there are error bars, values are (value, stddev) pairs
2186 for (var j = 1; j < inFields.length; j += 2)
2187 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2188 parseFloatOrNull(inFields[j + 1])];
2189 } else if (this.attr_("customBars
")) {
2190 // Bars are a low;center;high tuple
2191 for (var j = 1; j < inFields.length; j++) {
2192 var vals = inFields[j].split(";");
2193 fields[j] = [ parseFloatOrNull(vals[0]),
2194 parseFloatOrNull(vals[1]),
2195 parseFloatOrNull(vals[2]) ];
2198 // Values are just numbers
2199 for (var j = 1; j < inFields.length; j++) {
2200 fields[j] = parseFloatOrNull(inFields[j]);
2203 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2208 if (fields.length != expectedCols) {
2209 this.error("Number of columns
in line
" + i + " (" + fields.length +
2210 ") does not agree
with number of
labels (" + expectedCols +
2216 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2217 ret.sort(function(a,b) { return a[0] - b[0] });
2224 * The user has provided their data as a pre-packaged JS array. If the x values
2225 * are numeric, this is the same as dygraphs' internal format. If the x values
2226 * are dates, we need to convert them from Date objects to ms since epoch.
2227 * @param {Array.<Object>} data
2228 * @return {Array.<Object>} data with numeric x values.
2230 Dygraph.prototype.parseArray_ = function(data) {
2231 // Peek at the first x value to see if it's numeric.
2232 if (data.length == 0) {
2233 this.error("Can
't plot empty data set");
2236 if (data[0].length == 0) {
2237 this.error("Data set cannot contain an empty row");
2241 if (this.attr_("labels") == null) {
2242 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2243 "in the options parameter");
2244 this.attrs_.labels = [ "X" ];
2245 for (var i = 1; i < data[0].length; i++) {
2246 this.attrs_.labels.push("Y" + i);
2250 if (Dygraph.isDateLike(data[0][0])) {
2251 // Some intelligent defaults for a date x-axis.
2252 this.attrs_.xValueFormatter = Dygraph.dateString_;
2253 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2254 this.attrs_.xTicker = Dygraph.dateTicker;
2256 // Assume they're all dates
.
2257 var parsedData
= Dygraph
.clone(data
);
2258 for (var i
= 0; i
< data
.length
; i
++) {
2259 if (parsedData
[i
].length
== 0) {
2260 this.error("Row " + (1 + i
) + " of data is empty");
2263 if (parsedData
[i
][0] == null
2264 || typeof(parsedData
[i
][0].getTime
) != 'function'
2265 || isNaN(parsedData
[i
][0].getTime())) {
2266 this.error("x value in row " + (1 + i
) + " is not a Date");
2269 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2273 // Some intelligent defaults for a numeric x-axis.
2274 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2275 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2281 * Parses a DataTable object from gviz.
2282 * The data is expected to have a first column that is either a date or a
2283 * number. All subsequent columns must be numbers. If there is a clear mismatch
2284 * between this.xValueParser_ and the type of the first column, it will be
2285 * fixed. Fills out rawData_.
2286 * @param {Array.<Object>} data See above.
2289 Dygraph
.prototype.parseDataTable_
= function(data
) {
2290 var cols
= data
.getNumberOfColumns();
2291 var rows
= data
.getNumberOfRows();
2293 var indepType
= data
.getColumnType(0);
2294 if (indepType
== 'date' || indepType
== 'datetime') {
2295 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2296 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2297 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2298 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2299 } else if (indepType
== 'number') {
2300 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2301 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2302 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2303 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2305 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2306 "column 1 of DataTable input (Got '" + indepType
+ "')");
2310 // Array of the column indices which contain data (and not annotations).
2312 var annotationCols
= {}; // data index -> [annotation cols]
2313 var hasAnnotations
= false;
2314 for (var i
= 1; i
< cols
; i
++) {
2315 var type
= data
.getColumnType(i
);
2316 if (type
== 'number') {
2318 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2319 // This is OK -- it's an annotation column.
2320 var dataIdx
= colIdx
[colIdx
.length
- 1];
2321 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2322 annotationCols
[dataIdx
] = [i
];
2324 annotationCols
[dataIdx
].push(i
);
2326 hasAnnotations
= true;
2328 this.error("Only 'number' is supported as a dependent type with Gviz." +
2329 " 'string' is only supported if displayAnnotations is true");
2333 // Read column labels
2334 // TODO(danvk): add support back for errorBars
2335 var labels
= [data
.getColumnLabel(0)];
2336 for (var i
= 0; i
< colIdx
.length
; i
++) {
2337 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2338 if (this.attr_("errorBars")) i
+= 1;
2340 this.attrs_
.labels
= labels
;
2341 cols
= labels
.length
;
2344 var outOfOrder
= false;
2345 var annotations
= [];
2346 for (var i
= 0; i
< rows
; i
++) {
2348 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2349 data
.getValue(i
, 0) === null) {
2350 this.warn("Ignoring row " + i
+
2351 " of DataTable because of undefined or null first column.");
2355 if (indepType
== 'date' || indepType
== 'datetime') {
2356 row
.push(data
.getValue(i
, 0).getTime());
2358 row
.push(data
.getValue(i
, 0));
2360 if (!this.attr_("errorBars")) {
2361 for (var j
= 0; j
< colIdx
.length
; j
++) {
2362 var col
= colIdx
[j
];
2363 row
.push(data
.getValue(i
, col
));
2364 if (hasAnnotations
&&
2365 annotationCols
.hasOwnProperty(col
) &&
2366 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2368 ann
.series
= data
.getColumnLabel(col
);
2370 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2372 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2373 if (k
) ann
.text
+= "\n";
2374 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2376 annotations
.push(ann
);
2380 for (var j
= 0; j
< cols
- 1; j
++) {
2381 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2384 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2391 this.warn("DataTable is out of order; order it correctly to speed loading.");
2392 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2394 this.rawData_
= ret
;
2396 if (annotations
.length
> 0) {
2397 this.setAnnotations(annotations
, true);
2401 // These functions are all based on MochiKit.
2402 Dygraph
.update
= function (self
, o
) {
2403 if (typeof(o
) != 'undefined' && o
!== null) {
2405 if (o
.hasOwnProperty(k
)) {
2413 Dygraph
.isArrayLike
= function (o
) {
2414 var typ
= typeof(o
);
2416 (typ
!= 'object' && !(typ
== 'function' &&
2417 typeof(o
.item
) == 'function')) ||
2419 typeof(o
.length
) != 'number' ||
2427 Dygraph
.isDateLike
= function (o
) {
2428 if (typeof(o
) != "object" || o
=== null ||
2429 typeof(o
.getTime
) != 'function') {
2435 Dygraph
.clone
= function(o
) {
2436 // TODO(danvk): figure out how MochiKit's version works
2438 for (var i
= 0; i
< o
.length
; i
++) {
2439 if (Dygraph
.isArrayLike(o
[i
])) {
2440 r
.push(Dygraph
.clone(o
[i
]));
2450 * Get the CSV data. If it's in a function, call that function. If it's in a
2451 * file, do an XMLHttpRequest to get it.
2454 Dygraph
.prototype.start_
= function() {
2455 if (typeof this.file_
== 'function') {
2456 // CSV string. Pretend we got it via XHR.
2457 this.loadedEvent_(this.file_());
2458 } else if (Dygraph
.isArrayLike(this.file_
)) {
2459 this.rawData_
= this.parseArray_(this.file_
);
2460 this.drawGraph_(this.rawData_
);
2461 } else if (typeof this.file_
== 'object' &&
2462 typeof this.file_
.getColumnRange
== 'function') {
2463 // must be a DataTable from gviz.
2464 this.parseDataTable_(this.file_
);
2465 this.drawGraph_(this.rawData_
);
2466 } else if (typeof this.file_
== 'string') {
2467 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2468 if (this.file_
.indexOf('\n') >= 0) {
2469 this.loadedEvent_(this.file_
);
2471 var req
= new XMLHttpRequest();
2473 req
.onreadystatechange
= function () {
2474 if (req
.readyState
== 4) {
2475 if (req
.status
== 200) {
2476 caller
.loadedEvent_(req
.responseText
);
2481 req
.open("GET", this.file_
, true);
2485 this.error("Unknown data format: " + (typeof this.file_
));
2490 * Changes various properties of the graph. These can include:
2492 * <li>file: changes the source data for the graph</li>
2493 * <li>errorBars: changes whether the data contains stddev</li>
2495 * @param {Object} attrs The new properties and values
2497 Dygraph
.prototype.updateOptions
= function(attrs
) {
2498 // TODO(danvk): this is a mess. Rethink this function.
2499 if ('rollPeriod' in attrs
) {
2500 this.rollPeriod_
= attrs
.rollPeriod
;
2502 if ('dateWindow' in attrs
) {
2503 this.dateWindow_
= attrs
.dateWindow
;
2505 if ('valueRange' in attrs
) {
2506 this.valueRange_
= attrs
.valueRange
;
2507 this.valueWindow_
= attrs
.valueRange
;
2510 // TODO(danvk): validate per-series options.
2515 // highlightCircleSize
2517 Dygraph
.update(this.user_attrs_
, attrs
);
2518 Dygraph
.update(this.renderOptions_
, attrs
);
2520 this.labelsFromCSV_
= (this.attr_("labels") == null);
2522 // TODO(danvk): this doesn't match the constructor logic
2523 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2524 if (attrs
['file']) {
2525 this.file_
= attrs
['file'];
2528 this.drawGraph_(this.rawData_
);
2533 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2534 * containing div (which has presumably changed size since the dygraph was
2535 * instantiated. If the width/height are specified, the div will be resized.
2537 * This is far more efficient than destroying and re-instantiating a
2538 * Dygraph, since it doesn't have to reparse the underlying data.
2540 * @param {Number} width Width (in pixels)
2541 * @param {Number} height Height (in pixels)
2543 Dygraph
.prototype.resize
= function(width
, height
) {
2544 if (this.resize_lock
) {
2547 this.resize_lock
= true;
2549 if ((width
=== null) != (height
=== null)) {
2550 this.warn("Dygraph.resize() should be called with zero parameters or " +
2551 "two non-NULL parameters. Pretending it was zero.");
2552 width
= height
= null;
2555 // TODO(danvk): there should be a clear() method.
2556 this.maindiv_
.innerHTML
= "";
2557 this.attrs_
.labelsDiv
= null;
2560 this.maindiv_
.style
.width
= width
+ "px";
2561 this.maindiv_
.style
.height
= height
+ "px";
2562 this.width_
= width
;
2563 this.height_
= height
;
2565 this.width_
= this.maindiv_
.offsetWidth
;
2566 this.height_
= this.maindiv_
.offsetHeight
;
2569 this.createInterface_();
2570 this.drawGraph_(this.rawData_
);
2572 this.resize_lock
= false;
2576 * Adjusts the number of days in the rolling average. Updates the graph to
2577 * reflect the new averaging period.
2578 * @param {Number} length Number of days over which to average the data.
2580 Dygraph
.prototype.adjustRoll
= function(length
) {
2581 this.rollPeriod_
= length
;
2582 this.drawGraph_(this.rawData_
);
2586 * Returns a boolean array of visibility statuses.
2588 Dygraph
.prototype.visibility
= function() {
2589 // Do lazy-initialization, so that this happens after we know the number of
2591 if (!this.attr_("visibility")) {
2592 this.attrs_
["visibility"] = [];
2594 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2595 this.attr_("visibility").push(true);
2597 return this.attr_("visibility");
2601 * Changes the visiblity of a series.
2603 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2604 var x
= this.visibility();
2605 if (num
< 0 && num
>= x
.length
) {
2606 this.warn("invalid series number in setVisibility: " + num
);
2609 this.drawGraph_(this.rawData_
);
2614 * Update the list of annotations and redraw the chart.
2616 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2617 // Only add the annotation CSS rule once we know it will be used.
2618 Dygraph
.addAnnotationRule();
2619 this.annotations_
= ann
;
2620 this.layout_
.setAnnotations(this.annotations_
);
2621 if (!suppressDraw
) {
2622 this.drawGraph_(this.rawData_
);
2627 * Return the list of annotations.
2629 Dygraph
.prototype.annotations
= function() {
2630 return this.annotations_
;
2634 * Get the index of a series (column) given its name. The first column is the
2635 * x-axis, so the data series start with index 1.
2637 Dygraph
.prototype.indexFromSetName
= function(name
) {
2638 var labels
= this.attr_("labels");
2639 for (var i
= 0; i
< labels
.length
; i
++) {
2640 if (labels
[i
] == name
) return i
;
2645 Dygraph
.addAnnotationRule
= function() {
2646 if (Dygraph
.addedAnnotationCSS
) return;
2649 if (document
.styleSheets
.length
> 0) {
2650 mysheet
= document
.styleSheets
[0];
2652 var styleSheetElement
= document
.createElement("style");
2653 styleSheetElement
.type
= "text/css";
2654 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2655 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2656 if (document
.styleSheets
[i
].disabled
) continue;
2657 mysheet
= document
.styleSheets
[i
];
2661 var rule
= "border: 1px solid black; " +
2662 "background-color: white; " +
2663 "text-align: center;";
2664 if (mysheet
.insertRule
) { // Firefox
2665 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2666 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2667 } else if (mysheet
.addRule
) { // IE
2668 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2671 Dygraph
.addedAnnotationCSS
= true;
2675 * Create a new canvas element. This is more complex than a simple
2676 * document.createElement("canvas") because of IE and excanvas.
2678 Dygraph
.createCanvas
= function() {
2679 var canvas
= document
.createElement("canvas");
2681 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2682 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2683 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2691 * A wrapper around Dygraph that implements the gviz API.
2692 * @param {Object} container The DOM object the visualization should live in.
2694 Dygraph
.GVizChart
= function(container
) {
2695 this.container
= container
;
2698 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2699 this.container
.innerHTML
= '';
2700 this.date_graph
= new Dygraph(this.container
, data
, options
);
2704 * Google charts compatible setSelection
2705 * Only row selection is supported, all points in the row will be highlighted
2706 * @param {Array} array of the selected cells
2709 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2711 if (selection_array
.length
) {
2712 row
= selection_array
[0].row
;
2714 this.date_graph
.setSelection(row
);
2718 * Google charts compatible getSelection implementation
2719 * @return {Array} array of the selected cells
2722 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2725 var row
= this.date_graph
.getSelection();
2727 if (row
< 0) return selection
;
2730 for (var i
in this.date_graph
.layout_
.datasets
) {
2731 selection
.push({row
: row
, column
: col
});
2738 // Older pages may still use this name.
2739 DateGraph
= Dygraph
;