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,
132 // Various logging levels.
138 // Directions for panning and zooming. Use bit operations when combined
139 // values are possible.
140 Dygraph
.HORIZONTAL
= 1;
141 Dygraph
.VERTICAL
= 2;
143 // Used for initializing annotation CSS rules only once.
144 Dygraph
.addedAnnotationCSS
= false;
146 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
147 // Labels is no longer a constructor parameter, since it's typically set
148 // directly from the data source. It also conains a name for the x-axis,
149 // which the previous constructor form did not.
150 if (labels
!= null) {
151 var new_labels
= ["Date"];
152 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
153 Dygraph
.update(attrs
, { 'labels': new_labels
});
155 this.__init__(div
, file
, attrs
);
159 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
160 * and interaction <canvas> inside of it. See the constructor for details
162 * @param {Element} div the Element to render the graph into.
163 * @param {String | Function} file Source data
164 * @param {Object} attrs Miscellaneous other options
167 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
168 // Support two-argument constructor
169 if (attrs
== null) { attrs
= {}; }
171 // Copy the important bits into the object
172 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
175 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
176 this.previousVerticalX_
= -1;
177 this.fractions_
= attrs
.fractions
|| false;
178 this.dateWindow_
= attrs
.dateWindow
|| null;
179 // valueRange and valueWindow are similar, but not the same. valueRange is a
180 // locally-stored copy of the attribute. valueWindow starts off the same as
181 // valueRange but is impacted by zoom or pan effects. valueRange is kept
182 // around to restore the original value back to valueRange.
183 this.valueRange_
= attrs
.valueRange
|| null;
184 this.valueWindow_
= this.valueRange_
;
186 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
187 this.is_initial_draw_
= true;
188 this.annotations_
= [];
190 // Clear the div. This ensure that, if multiple dygraphs are passed the same
191 // div, then only one will be drawn.
194 // If the div isn't already sized then inherit from our attrs or
195 // give it a default size.
196 if (div
.style
.width
== '') {
197 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
199 if (div
.style
.height
== '') {
200 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
202 this.width_
= parseInt(div
.style
.width
, 10);
203 this.height_
= parseInt(div
.style
.height
, 10);
204 // The div might have been specified as percent of the current window size,
205 // convert that to an appropriate number of pixels.
206 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
207 this.width_
= div
.offsetWidth
;
209 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
210 this.height_
= div
.offsetHeight
;
213 if (this.width_
== 0) {
214 this.error("dygraph has zero width. Please specify a width in pixels.");
216 if (this.height_
== 0) {
217 this.error("dygraph has zero height. Please specify a height in pixels.");
220 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
221 if (attrs
['stackedGraph']) {
222 attrs
['fillGraph'] = true;
223 // TODO(nikhilk): Add any other stackedGraph checks here.
226 // Dygraphs has many options, some of which interact with one another.
227 // To keep track of everything, we maintain two sets of options:
229 // this.user_attrs_ only options explicitly set by the user.
230 // this.attrs_ defaults, options derived from user_attrs_, data.
232 // Options are then accessed this.attr_('attr'), which first looks at
233 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
234 // defaults without overriding behavior that the user specifically asks for.
235 this.user_attrs_
= {};
236 Dygraph
.update(this.user_attrs_
, attrs
);
239 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
241 this.boundaryIds_
= [];
243 // Make a note of whether labels will be pulled from the CSV file.
244 this.labelsFromCSV_
= (this.attr_("labels") == null);
246 Dygraph
.addAnnotationRule();
248 // Create the containing DIV and other interactive elements
249 this.createInterface_();
254 Dygraph
.prototype.attr_
= function(name
) {
255 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
256 return this.user_attrs_
[name
];
257 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
258 return this.attrs_
[name
];
264 // TODO(danvk): any way I can get the line numbers to be this.warn call?
265 Dygraph
.prototype.log
= function(severity
, message
) {
266 if (typeof(console
) != 'undefined') {
269 console
.debug('dygraphs: ' + message
);
272 console
.info('dygraphs: ' + message
);
274 case Dygraph
.WARNING
:
275 console
.warn('dygraphs: ' + message
);
278 console
.error('dygraphs: ' + message
);
283 Dygraph
.prototype.info
= function(message
) {
284 this.log(Dygraph
.INFO
, message
);
286 Dygraph
.prototype.warn
= function(message
) {
287 this.log(Dygraph
.WARNING
, message
);
289 Dygraph
.prototype.error
= function(message
) {
290 this.log(Dygraph
.ERROR
, message
);
294 * Returns the current rolling period, as set by the user or an option.
295 * @return {Number} The number of days in the rolling window
297 Dygraph
.prototype.rollPeriod
= function() {
298 return this.rollPeriod_
;
302 * Returns the currently-visible x-range. This can be affected by zooming,
303 * panning or a call to updateOptions.
304 * Returns a two-element array: [left, right].
305 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
307 Dygraph
.prototype.xAxisRange
= function() {
308 if (this.dateWindow_
) return this.dateWindow_
;
310 // The entire chart is visible.
311 var left
= this.rawData_
[0][0];
312 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
313 return [left
, right
];
317 * Returns the currently-visible y-range. This can be affected by zooming,
318 * panning or a call to updateOptions.
319 * Returns a two-element array: [bottom, top].
321 Dygraph
.prototype.yAxisRange
= function() {
322 return this.displayedYRange_
;
326 * Convert from data coordinates to canvas/div X/Y coordinates.
327 * Returns a two-element array: [X, Y]
329 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
330 var ret
= [null, null];
331 var area
= this.plotter_
.area
;
333 var xRange
= this.xAxisRange();
334 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
338 var yRange
= this.yAxisRange();
339 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
345 // TODO(danvk): use these functions throughout dygraphs.
347 * Convert from canvas/div coords to data coordinates.
348 * Returns a two-element array: [X, Y]
350 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
351 var ret
= [null, null];
352 var area
= this.plotter_
.area
;
354 var xRange
= this.xAxisRange();
355 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
359 var yRange
= this.yAxisRange();
360 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
367 * Returns the number of columns (including the independent variable).
369 Dygraph
.prototype.numColumns
= function() {
370 return this.rawData_
[0].length
;
374 * Returns the number of rows (excluding any header/label row).
376 Dygraph
.prototype.numRows
= function() {
377 return this.rawData_
.length
;
381 * Returns the value in the given row and column. If the row and column exceed
382 * the bounds on the data, returns null. Also returns null if the value is
385 Dygraph
.prototype.getValue
= function(row
, col
) {
386 if (row
< 0 || row
> this.rawData_
.length
) return null;
387 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
389 return this.rawData_
[row
][col
];
392 Dygraph
.addEvent
= function(el
, evt
, fn
) {
393 var normed_fn
= function(e
) {
394 if (!e
) var e
= window
.event
;
397 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
398 el
.addEventListener(evt
, normed_fn
, false);
400 el
.attachEvent('on' + evt
, normed_fn
);
404 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
405 var ctx
= cnv
.getContext("2d");
407 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
412 * Generates interface elements for the Dygraph: a containing div, a div to
413 * display the current point, and a textbox to adjust the rolling average
414 * period. Also creates the Renderer/Layout elements.
417 Dygraph
.prototype.createInterface_
= function() {
418 // Create the all-enclosing graph div
419 var enclosing
= this.maindiv_
;
421 this.graphDiv
= document
.createElement("div");
422 this.graphDiv
.style
.width
= this.width_
+ "px";
423 this.graphDiv
.style
.height
= this.height_
+ "px";
424 enclosing
.appendChild(this.graphDiv
);
428 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
430 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
431 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
432 - 2 * this.attr_("axisTickSize");
433 this.clippingArea_
= clip
;
435 // Create the canvas for interactive parts of the chart.
436 this.canvas_
= Dygraph
.createCanvas();
437 this.canvas_
.style
.position
= "absolute";
438 this.canvas_
.width
= this.width_
;
439 this.canvas_
.height
= this.height_
;
440 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
441 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
443 // ... and for static parts of the chart.
444 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
446 // The interactive parts of the graph are drawn on top of the chart.
447 this.graphDiv
.appendChild(this.hidden_
);
448 this.graphDiv
.appendChild(this.canvas_
);
449 this.mouseEventElement_
= this.canvas_
;
451 // Make sure we don't overdraw.
452 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
453 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
456 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
457 dygraph
.mouseMove_(e
);
459 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
460 dygraph
.mouseOut_(e
);
463 // Create the grapher
464 // TODO(danvk): why does the Layout need its own set of options?
465 this.layoutOptions_
= { 'xOriginIsZero': false };
466 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
467 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
468 Dygraph
.update(this.layoutOptions_
, {
469 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
471 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
473 // TODO(danvk): why does the Renderer need its own set of options?
474 this.renderOptions_
= { colorScheme
: this.colors_
,
476 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
477 Dygraph
.update(this.renderOptions_
, this.attrs_
);
478 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
479 this.plotter_
= new DygraphCanvasRenderer(this,
480 this.hidden_
, this.layout_
,
481 this.renderOptions_
);
483 this.createStatusMessage_();
484 this.createRollInterface_();
485 this.createDragInterface_();
489 * Detach DOM elements in the dygraph and null out all data references.
490 * Calling this when you're done with a dygraph can dramatically reduce memory
491 * usage. See, e.g., the tests/perf.html example.
493 Dygraph
.prototype.destroy
= function() {
494 var removeRecursive
= function(node
) {
495 while (node
.hasChildNodes()) {
496 removeRecursive(node
.firstChild
);
497 node
.removeChild(node
.firstChild
);
500 removeRecursive(this.maindiv_
);
502 var nullOut
= function(obj
) {
504 if (typeof(obj
[n
]) === 'object') {
510 // These may not all be necessary, but it can't hurt...
511 nullOut(this.layout_
);
512 nullOut(this.plotter_
);
517 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
518 * this particular canvas. All Dygraph work is done on this.canvas_.
519 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
520 * @return {Object} The newly-created canvas
523 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
524 var h
= Dygraph
.createCanvas();
525 h
.style
.position
= "absolute";
526 // TODO(danvk): h should be offset from canvas. canvas needs to include
527 // some extra area to make it easier to zoom in on the far left and far
528 // right. h needs to be precisely the plot area, so that clipping occurs.
529 h
.style
.top
= canvas
.style
.top
;
530 h
.style
.left
= canvas
.style
.left
;
531 h
.width
= this.width_
;
532 h
.height
= this.height_
;
533 h
.style
.width
= this.width_
+ "px"; // for IE
534 h
.style
.height
= this.height_
+ "px"; // for IE
538 // Taken from MochiKit.Color
539 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
543 if (saturation
=== 0) {
548 var i
= Math
.floor(hue
* 6);
549 var f
= (hue
* 6) - i
;
550 var p
= value
* (1 - saturation
);
551 var q
= value
* (1 - (saturation
* f
));
552 var t
= value
* (1 - (saturation
* (1 - f
)));
554 case 1: red
= q
; green
= value
; blue
= p
; break;
555 case 2: red
= p
; green
= value
; blue
= t
; break;
556 case 3: red
= p
; green
= q
; blue
= value
; break;
557 case 4: red
= t
; green
= p
; blue
= value
; break;
558 case 5: red
= value
; green
= p
; blue
= q
; break;
559 case 6: // fall through
560 case 0: red
= value
; green
= t
; blue
= p
; break;
563 red
= Math
.floor(255 * red
+ 0.5);
564 green
= Math
.floor(255 * green
+ 0.5);
565 blue
= Math
.floor(255 * blue
+ 0.5);
566 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
571 * Generate a set of distinct colors for the data series. This is done with a
572 * color wheel. Saturation/Value are customizable, and the hue is
573 * equally-spaced around the color wheel. If a custom set of colors is
574 * specified, that is used instead.
577 Dygraph
.prototype.setColors_
= function() {
578 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
579 // away with this.renderOptions_.
580 var num
= this.attr_("labels").length
- 1;
582 var colors
= this.attr_('colors');
584 var sat
= this.attr_('colorSaturation') || 1.0;
585 var val
= this.attr_('colorValue') || 0.5;
586 var half
= Math
.ceil(num
/ 2);
587 for (var i
= 1; i
<= num
; i
++) {
588 if (!this.visibility()[i
-1]) continue;
589 // alternate colors for high contrast.
590 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
591 var hue
= (1.0 * idx
/ (1 + num
));
592 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
595 for (var i
= 0; i
< num
; i
++) {
596 if (!this.visibility()[i
]) continue;
597 var colorStr
= colors
[i
% colors
.length
];
598 this.colors_
.push(colorStr
);
602 // TODO(danvk): update this w/r
/t/ the
new options system
.
603 this.renderOptions_
.colorScheme
= this.colors_
;
604 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
605 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
606 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
610 * Return the list of colors. This is either the list of colors passed in the
611 * attributes, or the autogenerated list of rgb(r,g,b) strings.
612 * @return {Array<string>} The list of colors.
614 Dygraph
.prototype.getColors
= function() {
618 // The following functions are from quirksmode.org with a modification for Safari from
619 // http://blog.firetree.net/2005/07/04/javascript-find-position/
620 // http://www.quirksmode.org/js
/findpos
.html
621 Dygraph
.findPosX
= function(obj
) {
626 curleft
+= obj
.offsetLeft
;
627 if(!obj
.offsetParent
)
629 obj
= obj
.offsetParent
;
636 Dygraph
.findPosY
= function(obj
) {
641 curtop
+= obj
.offsetTop
;
642 if(!obj
.offsetParent
)
644 obj
= obj
.offsetParent
;
654 * Create the div that contains information on the selected point(s)
655 * This goes in the top right of the canvas, unless an external div has already
659 Dygraph
.prototype.createStatusMessage_
= function() {
660 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
661 if (userLabelsDiv
&& null != userLabelsDiv
662 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
663 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
665 if (!this.attr_("labelsDiv")) {
666 var divWidth
= this.attr_('labelsDivWidth');
668 "position": "absolute",
671 "width": divWidth
+ "px",
673 "left": (this.width_
- divWidth
- 2) + "px",
674 "background": "white",
676 "overflow": "hidden"};
677 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
678 var div
= document
.createElement("div");
679 for (var name
in messagestyle
) {
680 if (messagestyle
.hasOwnProperty(name
)) {
681 div
.style
[name
] = messagestyle
[name
];
684 this.graphDiv
.appendChild(div
);
685 this.attrs_
.labelsDiv
= div
;
690 * Create the text box to adjust the averaging period
691 * @return {Object} The newly-created text box
694 Dygraph
.prototype.createRollInterface_
= function() {
695 var display
= this.attr_('showRoller') ? "block" : "none";
696 var textAttr
= { "position": "absolute",
698 "top": (this.plotter_
.area
.h
- 25) + "px",
699 "left": (this.plotter_
.area
.x
+ 1) + "px",
702 var roller
= document
.createElement("input");
703 roller
.type
= "text";
705 roller
.value
= this.rollPeriod_
;
706 for (var name
in textAttr
) {
707 if (textAttr
.hasOwnProperty(name
)) {
708 roller
.style
[name
] = textAttr
[name
];
712 var pa
= this.graphDiv
;
713 pa
.appendChild(roller
);
715 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
719 // These functions are taken from MochiKit.Signal
720 Dygraph
.pageX
= function(e
) {
722 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
725 var b
= document
.body
;
727 (de
.scrollLeft
|| b
.scrollLeft
) -
728 (de
.clientLeft
|| 0);
732 Dygraph
.pageY
= function(e
) {
734 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
737 var b
= document
.body
;
739 (de
.scrollTop
|| b
.scrollTop
) -
745 * Set up all the mouse handlers needed to capture dragging behavior for zoom
749 Dygraph
.prototype.createDragInterface_
= function() {
752 // Tracks whether the mouse is down right now
753 var isZooming
= false;
754 var isPanning
= false;
755 var dragStartX
= null;
756 var dragStartY
= null;
761 var prevDragDirection
= null;
762 var draggingDate
= null;
763 var dateRange
= null;
765 // Utility function to convert page-wide coordinates to canvas coords
768 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
769 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
771 // Draw zoom rectangles when the mouse is down and the user moves around
772 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
774 dragEndX
= getX(event
);
775 dragEndY
= getY(event
);
777 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
778 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
779 var dragDirection
= (xDelta
< yDelta
) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
781 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
782 prevDragDirection
, prevEndX
, prevEndY
);
786 prevDragDirection
= dragDirection
;
787 } else if (isPanning
) {
788 dragEndX
= getX(event
);
789 dragEndY
= getY(event
);
791 // Want to have it so that:
792 // 1. draggingDate appears at dragEndX
793 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
795 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
796 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
797 self
.drawGraph_(self
.rawData_
);
801 // Track the beginning of drag events
802 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
803 px
= Dygraph
.findPosX(self
.canvas_
);
804 py
= Dygraph
.findPosY(self
.canvas_
);
805 dragStartX
= getX(event
);
806 dragStartY
= getY(event
);
808 if (event
.altKey
|| event
.shiftKey
) {
809 // TODO(konigsberg): Support vertical panning.
810 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
812 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
813 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
820 // If the user releases the mouse button during a drag, but not over the
821 // canvas, then it doesn't count as a zooming action.
822 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
823 if (isZooming
|| isPanning
) {
836 // Temporarily cancel the dragging event when the mouse leaves the graph
837 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
844 // If the mouse is released on the canvas during a drag event, then it's a
845 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
846 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
849 dragEndX
= getX(event
);
850 dragEndY
= getY(event
);
851 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
852 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
854 if (regionWidth
< 2 && regionHeight
< 2 &&
855 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
856 // TODO(danvk): pass along more info about the points, e.g. 'x'
857 if (self
.attr_('clickCallback') != null) {
858 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
860 if (self
.attr_('pointClickCallback')) {
861 // check if the click was on a particular point.
863 var closestDistance
= 0;
864 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
865 var p
= self
.selPoints_
[i
];
866 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
867 Math
.pow(p
.canvasy
- dragEndY
, 2);
868 if (closestIdx
== -1 || distance
< closestDistance
) {
869 closestDistance
= distance
;
874 // Allow any click within two pixels of the dot.
875 var radius
= self
.attr_('highlightCircleSize') + 2;
876 if (closestDistance
<= 5 * 5) {
877 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
882 if (regionWidth
>= 10 && regionWidth
> regionHeight
) {
883 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
884 Math
.max(dragStartX
, dragEndX
));
885 } else if (regionHeight
>= 10 && regionHeight
> regionWidth
){
886 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
887 Math
.max(dragStartY
, dragEndY
));
889 self
.canvas_
.getContext("2d").clearRect(0, 0,
891 self
.canvas_
.height
);
905 // Double-clicking zooms back out
906 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
907 // Disable zooming out if panning.
908 if (event
.altKey
|| event
.shiftKey
) return;
915 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
916 * up any previous zoom rectangles that were drawn. This could be optimized to
917 * avoid extra redrawing, but it's tricky to avoid interactions with the status
920 * @param {Number} direction the direction of the zoom rectangle. Acceptable
921 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
922 * @param {Number} startX The X position where the drag started, in canvas
924 * @param {Number} endX The current X position of the drag, in canvas coords.
925 * @param {Number} startY The Y position where the drag started, in canvas
927 * @param {Number} endY The current Y position of the drag, in canvas coords.
928 * @param {Number} prevDirection the value of direction on the previous call to
929 * this function. Used to avoid excess redrawing
930 * @param {Number} prevEndX The value of endX on the previous call to this
931 * function. Used to avoid excess redrawing
932 * @param {Number} prevEndY The value of endY on the previous call to this
933 * function. Used to avoid excess redrawing
936 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
937 prevDirection
, prevEndX
, prevEndY
) {
938 var ctx
= this.canvas_
.getContext("2d");
940 // Clean up from the previous rect if necessary
941 if (prevDirection
== Dygraph
.HORIZONTAL
) {
942 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
943 Math
.abs(startX
- prevEndX
), this.height_
);
944 } else if (prevDirection
== Dygraph
.VERTICAL
){
945 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
946 this.width_
, Math
.abs(startY
- prevEndY
));
949 // Draw a light-grey rectangle to show the new viewing area
950 if (direction
== Dygraph
.HORIZONTAL
) {
951 if (endX
&& startX
) {
952 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
953 ctx
.fillRect(Math
.min(startX
, endX
), 0,
954 Math
.abs(endX
- startX
), this.height_
);
957 if (direction
== Dygraph
.VERTICAL
) {
958 if (endY
&& startY
) {
959 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
960 ctx
.fillRect(0, Math
.min(startY
, endY
),
961 this.width_
, Math
.abs(endY
- startY
));
967 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
968 * the canvas. The exact zoom window may be slightly larger if there are no data
969 * points near lowX or highX. Don't confuse this function with doZoomXDates,
970 * which accepts dates that match the raw data. This function redraws the graph.
972 * @param {Number} lowX The leftmost pixel value that should be visible.
973 * @param {Number} highX The rightmost pixel value that should be visible.
976 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
977 // Find the earliest and latest dates contained in this canvasx range.
978 // Convert the call to date ranges of the raw data.
979 var r
= this.toDataCoords(lowX
, null);
981 r
= this.toDataCoords(highX
, null);
983 this.doZoomXDates_(minDate
, maxDate
);
987 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
988 * method with doZoomX which accepts pixel coordinates. This function redraws
991 * @param {Number} minDate The minimum date that should be visible.
992 * @param {Number} maxDate The maximum date that should be visible.
995 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
996 this.dateWindow_
= [minDate
, maxDate
];
997 this.drawGraph_(this.rawData_
);
998 if (this.attr_("zoomCallback")) {
999 var yRange
= this.yAxisRange();
1000 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1005 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1006 * the canvas. The exact zoom window may be slightly larger if there are no
1007 * data points near lowY or highY. Don't confuse this function with
1008 * doZoomYValues, which accepts parameters that match the raw data. This
1009 * function redraws the graph.
1011 * @param {Number} lowY The topmost pixel value that should be visible.
1012 * @param {Number} highY The lowest pixel value that should be visible.
1015 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1016 // Find the highest and lowest values in pixel range.
1017 var r
= this.toDataCoords(null, lowY
);
1018 var maxValue
= r
[1];
1019 r
= this.toDataCoords(null, highY
);
1020 var minValue
= r
[1];
1022 this.doZoomYValues_(minValue
, maxValue
);
1026 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1027 * method with doZoomY which accepts pixel coordinates. This function redraws
1030 * @param {Number} minValue The minimum Value that should be visible.
1031 * @param {Number} maxValue The maximum value that should be visible.
1034 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1035 this.valueWindow_
= [minValue
, maxValue
];
1036 this.drawGraph_(this.rawData_
);
1037 if (this.attr_("zoomCallback")) {
1038 var xRange
= this.xAxisRange();
1039 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1044 * Reset the zoom to the original view coordinates. This is the same as
1045 * double-clicking on the graph.
1049 Dygraph
.prototype.doUnzoom_
= function() {
1051 if (this.dateWindow_
!= null) {
1053 this.dateWindow_
= null;
1055 if (this.valueWindow_
!= null) {
1057 this.valueWindow_
= this.valueRange_
;
1061 // Putting the drawing operation before the callback because it resets
1063 this.drawGraph_(this.rawData_
);
1064 if (this.attr_("zoomCallback")) {
1065 var minDate
= this.rawData_
[0][0];
1066 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1067 var minValue
= this.yAxisRange()[0];
1068 var maxValue
= this.yAxisRange()[1];
1069 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1075 * When the mouse moves in the canvas, display information about a nearby data
1076 * point and draw dots over those points in the data series. This function
1077 * takes care of cleanup of previously-drawn dots.
1078 * @param {Object} event The mousemove event from the browser.
1081 Dygraph
.prototype.mouseMove_
= function(event
) {
1082 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1083 var points
= this.layout_
.points
;
1088 // Loop through all the points and find the date nearest to our current
1090 var minDist
= 1e+100;
1092 for (var i
= 0; i
< points
.length
; i
++) {
1093 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1094 if (dist
> minDist
) continue;
1098 if (idx
>= 0) lastx
= points
[idx
].xval
;
1099 // Check that you can really highlight the last day's data
1100 if (canvasx
> points
[points
.length
-1].canvasx
)
1101 lastx
= points
[points
.length
-1].xval
;
1103 // Extract the points we've selected
1104 this.selPoints_
= [];
1105 var l
= points
.length
;
1106 if (!this.attr_("stackedGraph")) {
1107 for (var i
= 0; i
< l
; i
++) {
1108 if (points
[i
].xval
== lastx
) {
1109 this.selPoints_
.push(points
[i
]);
1113 // Need to 'unstack' points starting from the bottom
1114 var cumulative_sum
= 0;
1115 for (var i
= l
- 1; i
>= 0; i
--) {
1116 if (points
[i
].xval
== lastx
) {
1117 var p
= {}; // Clone the point since we modify it
1118 for (var k
in points
[i
]) {
1119 p
[k
] = points
[i
][k
];
1121 p
.yval
-= cumulative_sum
;
1122 cumulative_sum
+= p
.yval
;
1123 this.selPoints_
.push(p
);
1126 this.selPoints_
.reverse();
1129 if (this.attr_("highlightCallback")) {
1130 var px
= this.lastx_
;
1131 if (px
!== null && lastx
!= px
) {
1132 // only fire if the selected point has changed.
1133 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1137 // Save last x position for callbacks.
1138 this.lastx_
= lastx
;
1140 this.updateSelection_();
1144 * Draw dots over the selectied points in the data series. This function
1145 * takes care of cleanup of previously-drawn dots.
1148 Dygraph
.prototype.updateSelection_
= function() {
1149 // Clear the previously drawn vertical, if there is one
1150 var circleSize
= this.attr_('highlightCircleSize');
1151 var ctx
= this.canvas_
.getContext("2d");
1152 if (this.previousVerticalX_
>= 0) {
1153 var px
= this.previousVerticalX_
;
1154 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
1157 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1159 if (this.selPoints_
.length
> 0) {
1160 var canvasx
= this.selPoints_
[0].canvasx
;
1162 // Set the status message to indicate the selected point(s)
1163 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1164 var fmtFunc
= this.attr_('yValueFormatter');
1165 var clen
= this.colors_
.length
;
1167 if (this.attr_('showLabelsOnHighlight')) {
1168 // Set the status message to indicate the selected point(s)
1169 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1170 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1171 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1172 if (this.attr_("labelsSeparateLines")) {
1175 var point
= this.selPoints_
[i
];
1176 var c
= new RGBColor(this.colors_
[i
%clen
]);
1177 var yval
= fmtFunc(point
.yval
);
1178 replace
+= " <b><font color='" + c
.toHex() + "'>"
1179 + point
.name
+ "</font></b>:"
1183 this.attr_("labelsDiv").innerHTML
= replace
;
1186 // Draw colored circles over the center of each selected point
1188 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1189 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1191 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1192 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1193 0, 2 * Math
.PI
, false);
1198 this.previousVerticalX_
= canvasx
;
1203 * Set manually set selected dots, and display information about them
1204 * @param int row number that should by highlighted
1205 * false value clears the selection
1208 Dygraph
.prototype.setSelection
= function(row
) {
1209 // Extract the points we've selected
1210 this.selPoints_
= [];
1213 if (row
!== false) {
1214 row
= row
-this.boundaryIds_
[0][0];
1217 if (row
!== false && row
>= 0) {
1218 for (var i
in this.layout_
.datasets
) {
1219 if (row
< this.layout_
.datasets
[i
].length
) {
1220 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1222 pos
+= this.layout_
.datasets
[i
].length
;
1226 if (this.selPoints_
.length
) {
1227 this.lastx_
= this.selPoints_
[0].xval
;
1228 this.updateSelection_();
1231 this.clearSelection();
1237 * The mouse has left the canvas. Clear out whatever artifacts remain
1238 * @param {Object} event the mouseout event from the browser.
1241 Dygraph
.prototype.mouseOut_
= function(event
) {
1242 if (this.attr_("unhighlightCallback")) {
1243 this.attr_("unhighlightCallback")(event
);
1246 if (this.attr_("hideOverlayOnMouseOut")) {
1247 this.clearSelection();
1252 * Remove all selection from the canvas
1255 Dygraph
.prototype.clearSelection
= function() {
1256 // Get rid of the overlay data
1257 var ctx
= this.canvas_
.getContext("2d");
1258 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1259 this.attr_("labelsDiv").innerHTML
= "";
1260 this.selPoints_
= [];
1265 * Returns the number of the currently selected row
1266 * @return int row number, of -1 if nothing is selected
1269 Dygraph
.prototype.getSelection
= function() {
1270 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1274 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1275 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1276 return row
+ this.boundaryIds_
[0][0];
1282 Dygraph
.zeropad
= function(x
) {
1283 if (x
< 10) return "0" + x
; else return "" + x
;
1287 * Return a string version of the hours, minutes and seconds portion of a date.
1288 * @param {Number} date The JavaScript date (ms since epoch)
1289 * @return {String} A time of the form "HH:MM:SS"
1292 Dygraph
.hmsString_
= function(date
) {
1293 var zeropad
= Dygraph
.zeropad
;
1294 var d
= new Date(date
);
1295 if (d
.getSeconds()) {
1296 return zeropad(d
.getHours()) + ":" +
1297 zeropad(d
.getMinutes()) + ":" +
1298 zeropad(d
.getSeconds());
1300 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1305 * Convert a JS date to a string appropriate to display on an axis that
1306 * is displaying values at the stated granularity.
1307 * @param {Date} date The date to format
1308 * @param {Number} granularity One of the Dygraph granularity constants
1309 * @return {String} The formatted date
1312 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1313 if (granularity
>= Dygraph
.MONTHLY
) {
1314 return date
.strftime('%b %y');
1316 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1317 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1318 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1320 return Dygraph
.hmsString_(date
.getTime());
1326 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1327 * @param {Number} date The JavaScript date (ms since epoch)
1328 * @return {String} A date of the form "YYYY/MM/DD"
1331 Dygraph
.dateString_
= function(date
, self
) {
1332 var zeropad
= Dygraph
.zeropad
;
1333 var d
= new Date(date
);
1336 var year
= "" + d
.getFullYear();
1337 // Get a 0 padded month string
1338 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1339 // Get a 0 padded day string
1340 var day
= zeropad(d
.getDate());
1343 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1344 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1346 return year
+ "/" + month + "/" + day
+ ret
;
1350 * Round a number to the specified number of digits past the decimal point.
1351 * @param {Number} num The number to round
1352 * @param {Number} places The number of decimals to which to round
1353 * @return {Number} The rounded number
1356 Dygraph
.round_
= function(num
, places
) {
1357 var shift
= Math
.pow(10, places
);
1358 return Math
.round(num
* shift
)/shift
;
1362 * Fires when there's data available to be graphed.
1363 * @param {String} data Raw CSV data to be plotted
1366 Dygraph
.prototype.loadedEvent_
= function(data
) {
1367 this.rawData_
= this.parseCSV_(data
);
1368 this.drawGraph_(this.rawData_
);
1371 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1372 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1373 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1376 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1379 Dygraph
.prototype.addXTicks_
= function() {
1380 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1381 var startDate
, endDate
;
1382 if (this.dateWindow_
) {
1383 startDate
= this.dateWindow_
[0];
1384 endDate
= this.dateWindow_
[1];
1386 startDate
= this.rawData_
[0][0];
1387 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1390 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1391 this.layout_
.updateOptions({xTicks
: xTicks
});
1394 // Time granularity enumeration
1395 Dygraph
.SECONDLY
= 0;
1396 Dygraph
.TWO_SECONDLY
= 1;
1397 Dygraph
.FIVE_SECONDLY
= 2;
1398 Dygraph
.TEN_SECONDLY
= 3;
1399 Dygraph
.THIRTY_SECONDLY
= 4;
1400 Dygraph
.MINUTELY
= 5;
1401 Dygraph
.TWO_MINUTELY
= 6;
1402 Dygraph
.FIVE_MINUTELY
= 7;
1403 Dygraph
.TEN_MINUTELY
= 8;
1404 Dygraph
.THIRTY_MINUTELY
= 9;
1405 Dygraph
.HOURLY
= 10;
1406 Dygraph
.TWO_HOURLY
= 11;
1407 Dygraph
.SIX_HOURLY
= 12;
1409 Dygraph
.WEEKLY
= 14;
1410 Dygraph
.MONTHLY
= 15;
1411 Dygraph
.QUARTERLY
= 16;
1412 Dygraph
.BIANNUAL
= 17;
1413 Dygraph
.ANNUAL
= 18;
1414 Dygraph
.DECADAL
= 19;
1415 Dygraph
.NUM_GRANULARITIES
= 20;
1417 Dygraph
.SHORT_SPACINGS
= [];
1418 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1419 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1420 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1421 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1422 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1423 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1424 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1425 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1426 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1427 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1428 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1429 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1430 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1431 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1432 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1436 // If we used this time granularity, how many ticks would there be?
1437 // This is only an approximation, but it's generally good enough.
1439 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1440 if (granularity
< Dygraph
.MONTHLY
) {
1441 // Generate one tick mark for every fixed interval of time.
1442 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1443 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1445 var year_mod
= 1; // e.g. to only print one point every 10 years.
1446 var num_months
= 12;
1447 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1448 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1449 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1450 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1452 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1453 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1454 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1460 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1461 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1463 // Returns an array containing {v: millis, label: label} dictionaries.
1465 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1466 var formatter
= this.attr_("xAxisLabelFormatter");
1468 if (granularity
< Dygraph
.MONTHLY
) {
1469 // Generate one tick mark for every fixed interval of time.
1470 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1471 var format
= '%d%b'; // e.g. "1Jan"
1473 // Find a time less than start_time which occurs on a "nice" time boundary
1474 // for this granularity.
1475 var g
= spacing
/ 1000;
1476 var d
= new Date(start_time
);
1477 if (g
<= 60) { // seconds
1478 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1482 if (g
<= 60) { // minutes
1483 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1488 if (g
<= 24) { // days
1489 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1494 if (g
== 7) { // one week
1495 d
.setDate(d
.getDate() - d
.getDay());
1500 start_time
= d
.getTime();
1502 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1503 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1506 // Display a tick mark on the first of a set of months of each year.
1507 // Years get a tick mark iff y % year_mod == 0. This is useful for
1508 // displaying a tick mark once every 10 years, say, on long time scales.
1510 var year_mod
= 1; // e.g. to only print one point every 10 years.
1512 if (granularity
== Dygraph
.MONTHLY
) {
1513 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1514 } else if (granularity
== Dygraph
.QUARTERLY
) {
1515 months
= [ 0, 3, 6, 9 ];
1516 } else if (granularity
== Dygraph
.BIANNUAL
) {
1518 } else if (granularity
== Dygraph
.ANNUAL
) {
1520 } else if (granularity
== Dygraph
.DECADAL
) {
1525 var start_year
= new Date(start_time
).getFullYear();
1526 var end_year
= new Date(end_time
).getFullYear();
1527 var zeropad
= Dygraph
.zeropad
;
1528 for (var i
= start_year
; i
<= end_year
; i
++) {
1529 if (i
% year_mod
!= 0) continue;
1530 for (var j
= 0; j
< months
.length
; j
++) {
1531 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1532 var t
= Date
.parse(date_str
);
1533 if (t
< start_time
|| t
> end_time
) continue;
1534 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1544 * Add ticks to the x-axis based on a date range.
1545 * @param {Number} startDate Start of the date window (millis since epoch)
1546 * @param {Number} endDate End of the date window (millis since epoch)
1547 * @return {Array.<Object>} Array of {label, value} tuples.
1550 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1552 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1553 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1554 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1561 return self
.GetXAxis(startDate
, endDate
, chosen
);
1563 // TODO(danvk): signal error.
1568 * Add ticks when the x axis has numbers on it (instead of dates)
1569 * @param {Number} startDate Start of the date window (millis since epoch)
1570 * @param {Number} endDate End of the date window (millis since epoch)
1571 * @return {Array.<Object>} Array of {label, value} tuples.
1574 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1576 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1577 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1578 // The first spacing greater than pixelsPerYLabel is what we use.
1579 // TODO(danvk): version that works on a log scale.
1580 if (self
.attr_("labelsKMG2")) {
1581 var mults
= [1, 2, 4, 8];
1583 var mults
= [1, 2, 5];
1585 var scale
, low_val
, high_val
, nTicks
;
1586 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1587 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1588 for (var i
= -10; i
< 50; i
++) {
1589 if (self
.attr_("labelsKMG2")) {
1590 var base_scale
= Math
.pow(16, i
);
1592 var base_scale
= Math
.pow(10, i
);
1594 for (var j
= 0; j
< mults
.length
; j
++) {
1595 scale
= base_scale
* mults
[j
];
1596 low_val
= Math
.floor(minV
/ scale
) * scale
;
1597 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1598 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1599 var spacing
= self
.height_
/ nTicks
;
1600 // wish I could break out of both loops at once...
1601 if (spacing
> pixelsPerTick
) break;
1603 if (spacing
> pixelsPerTick
) break;
1606 // Construct labels for the ticks
1610 if (self
.attr_("labelsKMB")) {
1612 k_labels
= [ "K", "M", "B", "T" ];
1614 if (self
.attr_("labelsKMG2")) {
1615 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1617 k_labels
= [ "k", "M", "G", "T" ];
1620 // Allow reverse y-axis if it's explicitly requested.
1621 if (low_val
> high_val
) scale
*= -1;
1623 for (var i
= 0; i
< nTicks
; i
++) {
1624 var tickV
= low_val
+ i
* scale
;
1625 var absTickV
= Math
.abs(tickV
);
1626 var label
= Dygraph
.round_(tickV
, 2);
1627 if (k_labels
.length
) {
1628 // Round up to an appropriate unit.
1630 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1631 if (absTickV
>= n
) {
1632 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1637 ticks
.push( {label
: label
, v
: tickV
} );
1643 * Adds appropriate ticks on the y-axis
1644 * @param {Number} minY The minimum Y value in the data set
1645 * @param {Number} maxY The maximum Y value in the data set
1648 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1649 // Set the number of ticks so that the labels are human-friendly.
1650 // TODO(danvk): make this an attribute as well.
1651 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1652 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1656 // Computes the range of the data series (including confidence intervals).
1657 // series is either [ [x1, y1], [x2, y2], ... ] or
1658 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1659 // Returns [low, high]
1660 Dygraph
.prototype.extremeValues_
= function(series
) {
1661 var minY
= null, maxY
= null;
1663 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1665 // With custom bars, maxY is the max of the high values.
1666 for (var j
= 0; j
< series
.length
; j
++) {
1667 var y
= series
[j
][1][0];
1669 var low
= y
- series
[j
][1][1];
1670 var high
= y
+ series
[j
][1][2];
1671 if (low
> y
) low
= y
; // this can happen with custom bars,
1672 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1673 if (maxY
== null || high
> maxY
) {
1676 if (minY
== null || low
< minY
) {
1681 for (var j
= 0; j
< series
.length
; j
++) {
1682 var y
= series
[j
][1];
1683 if (y
=== null || isNaN(y
)) continue;
1684 if (maxY
== null || y
> maxY
) {
1687 if (minY
== null || y
< minY
) {
1693 return [minY
, maxY
];
1697 * Update the graph with new data. Data is in the format
1698 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1699 * or, if errorBars=true,
1700 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1701 * @param {Array.<Object>} data The data (see above)
1704 Dygraph
.prototype.drawGraph_
= function(data
) {
1705 // This is used to set the second parameter to drawCallback, below.
1706 var is_initial_draw
= this.is_initial_draw_
;
1707 this.is_initial_draw_
= false;
1709 var minY
= null, maxY
= null;
1710 this.layout_
.removeAllDatasets();
1712 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1714 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1716 // Loop over the fields (series). Go from the last to the first,
1717 // because if they're stacked that's how we accumulate the values.
1719 var cumulative_y
= []; // For stacked series.
1722 // Loop over all fields and create datasets
1723 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1724 if (!this.visibility()[i
- 1]) continue;
1727 for (var j
= 0; j
< data
.length
; j
++) {
1728 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1729 var date
= data
[j
][0];
1730 series
.push([date
, data
[j
][i
]]);
1733 series
= this.rollingAverage(series
, this.rollPeriod_
);
1735 // Prune down to the desired range, if necessary (for zooming)
1736 // Because there can be lines going to points outside of the visible area,
1737 // we actually prune to visible points, plus one on either side.
1738 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1739 if (this.dateWindow_
) {
1740 var low
= this.dateWindow_
[0];
1741 var high
= this.dateWindow_
[1];
1743 // TODO(danvk): do binary search instead of linear search.
1744 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1745 var firstIdx
= null, lastIdx
= null;
1746 for (var k
= 0; k
< series
.length
; k
++) {
1747 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1750 if (series
[k
][0] <= high
) {
1754 if (firstIdx
=== null) firstIdx
= 0;
1755 if (firstIdx
> 0) firstIdx
--;
1756 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1757 if (lastIdx
< series
.length
- 1) lastIdx
++;
1758 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1759 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1760 pruned
.push(series
[k
]);
1764 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1767 var extremes
= this.extremeValues_(series
);
1768 var thisMinY
= extremes
[0];
1769 var thisMaxY
= extremes
[1];
1770 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1771 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1774 for (var j
=0; j
<series
.length
; j
++) {
1775 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1778 } else if (this.attr_("stackedGraph")) {
1779 var l
= series
.length
;
1781 for (var j
= 0; j
< l
; j
++) {
1782 // If one data set has a NaN, let all subsequent stacked
1783 // sets inherit the NaN -- only start at 0 for the first set.
1784 var x
= series
[j
][0];
1785 if (cumulative_y
[x
] === undefined
)
1786 cumulative_y
[x
] = 0;
1788 actual_y
= series
[j
][1];
1789 cumulative_y
[x
] += actual_y
;
1791 series
[j
] = [x
, cumulative_y
[x
]]
1793 if (!maxY
|| cumulative_y
[x
] > maxY
)
1794 maxY
= cumulative_y
[x
];
1798 datasets
[i
] = series
;
1801 for (var i
= 1; i
< datasets
.length
; i
++) {
1802 if (!this.visibility()[i
- 1]) continue;
1803 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1806 // Use some heuristics to come up with a good maxY value, unless it's been
1807 // set explicitly by the developer or end-user (via drag)
1808 if (this.valueWindow_
!= null) {
1809 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1810 this.displayedYRange_
= this.valueWindow_
;
1812 // This affects the calculation of span, below.
1813 if (this.attr_("includeZero") && minY
> 0) {
1817 // Add some padding and round up to an integer to be human-friendly.
1818 var span
= maxY
- minY
;
1819 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1820 if (span
== 0) { span
= maxY
; }
1821 var maxAxisY
= maxY
+ 0.1 * span
;
1822 var minAxisY
= minY
- 0.1 * span
;
1824 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1825 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1826 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1828 if (this.attr_("includeZero")) {
1829 if (maxY
< 0) maxAxisY
= 0;
1830 if (minY
> 0) minAxisY
= 0;
1833 this.addYTicks_(minAxisY
, maxAxisY
);
1834 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1839 // Tell PlotKit to use this new data and render itself
1840 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1841 this.layout_
.evaluateWithError();
1842 this.plotter_
.clear();
1843 this.plotter_
.render();
1844 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1845 this.canvas_
.height
);
1847 if (this.attr_("drawCallback") !== null) {
1848 this.attr_("drawCallback")(this, is_initial_draw
);
1853 * Calculates the rolling average of a data set.
1854 * If originalData is [label, val], rolls the average of those.
1855 * If originalData is [label, [, it's interpreted as [value, stddev]
1856 * and the roll is returned in the same form, with appropriately reduced
1857 * stddev for each value.
1858 * Note that this is where fractional input (i.e. '5/10') is converted into
1860 * @param {Array} originalData The data in the appropriate format (see above)
1861 * @param {Number} rollPeriod The number of days over which to average the data
1863 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1864 if (originalData
.length
< 2)
1865 return originalData
;
1866 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1867 var rollingData
= [];
1868 var sigma
= this.attr_("sigma");
1870 if (this.fractions_
) {
1872 var den
= 0; // numerator/denominator
1874 for (var i
= 0; i
< originalData
.length
; i
++) {
1875 num
+= originalData
[i
][1][0];
1876 den
+= originalData
[i
][1][1];
1877 if (i
- rollPeriod
>= 0) {
1878 num
-= originalData
[i
- rollPeriod
][1][0];
1879 den
-= originalData
[i
- rollPeriod
][1][1];
1882 var date
= originalData
[i
][0];
1883 var value
= den
? num
/ den
: 0.0;
1884 if (this.attr_("errorBars")) {
1885 if (this.wilsonInterval_
) {
1886 // For more details on this confidence interval, see:
1887 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1889 var p
= value
< 0 ? 0 : value
, n
= den
;
1890 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1891 var denom
= 1 + sigma
* sigma
/ den
;
1892 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1893 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1894 rollingData
[i
] = [date
,
1895 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1897 rollingData
[i
] = [date
, [0, 0, 0]];
1900 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1901 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1904 rollingData
[i
] = [date
, mult
* value
];
1907 } else if (this.attr_("customBars")) {
1912 for (var i
= 0; i
< originalData
.length
; i
++) {
1913 var data
= originalData
[i
][1];
1915 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1917 if (y
!= null && !isNaN(y
)) {
1923 if (i
- rollPeriod
>= 0) {
1924 var prev
= originalData
[i
- rollPeriod
];
1925 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1932 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1933 1.0 * (mid
- low
) / count
,
1934 1.0 * (high
- mid
) / count
]];
1937 // Calculate the rolling average for the first rollPeriod - 1 points where
1938 // there is not enough data to roll over the full number of days
1939 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1940 if (!this.attr_("errorBars")){
1941 if (rollPeriod
== 1) {
1942 return originalData
;
1945 for (var i
= 0; i
< originalData
.length
; i
++) {
1948 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1949 var y
= originalData
[j
][1];
1950 if (y
== null || isNaN(y
)) continue;
1952 sum
+= originalData
[j
][1];
1955 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1957 rollingData
[i
] = [originalData
[i
][0], null];
1962 for (var i
= 0; i
< originalData
.length
; i
++) {
1966 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1967 var y
= originalData
[j
][1][0];
1968 if (y
== null || isNaN(y
)) continue;
1970 sum
+= originalData
[j
][1][0];
1971 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1974 var stddev
= Math
.sqrt(variance
) / num_ok
;
1975 rollingData
[i
] = [originalData
[i
][0],
1976 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1978 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1988 * Parses a date, returning the number of milliseconds since epoch. This can be
1989 * passed in as an xValueParser in the Dygraph constructor.
1990 * TODO(danvk): enumerate formats that this understands.
1991 * @param {String} A date in YYYYMMDD format.
1992 * @return {Number} Milliseconds since epoch.
1995 Dygraph
.dateParser
= function(dateStr
, self
) {
1998 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1999 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2000 while (dateStrSlashed
.search("-") != -1) {
2001 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2003 d
= Date
.parse(dateStrSlashed
);
2004 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2005 // TODO(danvk): remove support for this format. It's confusing.
2006 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2007 + "/" + dateStr
.substr(6,2);
2008 d
= Date
.parse(dateStrSlashed
);
2010 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2011 // "2009/07/12 12:34:56"
2012 d
= Date
.parse(dateStr
);
2015 if (!d
|| isNaN(d
)) {
2016 self
.error("Couldn't parse " + dateStr
+ " as a date");
2022 * Detects the type of the str (date or numeric) and sets the various
2023 * formatting attributes in this.attrs_ based on this type.
2024 * @param {String} str An x value.
2027 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2029 if (str
.indexOf('-') >= 0 ||
2030 str
.indexOf('/') >= 0 ||
2031 isNaN(parseFloat(str
))) {
2033 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2034 // TODO(danvk): remove support for this format.
2039 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2040 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2041 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2042 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2044 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2045 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2046 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2047 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2052 * Parses a string in a special csv format. We expect a csv file where each
2053 * line is a date point, and the first field in each line is the date string.
2054 * We also expect that all remaining fields represent series.
2055 * if the errorBars attribute is set, then interpret the fields as:
2056 * date, series1, stddev1, series2, stddev2, ...
2057 * @param {Array.<Object>} data See above.
2060 * @return Array.<Object> An array with one entry for each row. These entries
2061 * are an array of cells in that row. The first entry is the parsed x-value for
2062 * the row. The second, third, etc. are the y-values. These can take on one of
2063 * three forms, depending on the CSV and constructor parameters:
2065 * 2. [ value, stddev ]
2066 * 3. [ low value, center value, high value ]
2068 Dygraph
.prototype.parseCSV_
= function(data
) {
2070 var lines
= data
.split("\n");
2072 // Use the default delimiter or fall back to a tab if that makes sense.
2073 var delim
= this.attr_('delimiter');
2074 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2079 if (this.labelsFromCSV_
) {
2081 this.attrs_
.labels
= lines
[0].split(delim
);
2084 // Parse the x as a float or return null if it's not a number.
2085 var parseFloatOrNull
= function(x
) {
2086 var val
= parseFloat(x
);
2087 return isNaN(val
) ? null : val
;
2091 var defaultParserSet
= false; // attempt to auto-detect x value type
2092 var expectedCols
= this.attr_("labels").length
;
2093 var outOfOrder
= false;
2094 for (var i
= start
; i
< lines
.length
; i
++) {
2095 var line
= lines
[i
];
2096 if (line
.length
== 0) continue; // skip blank lines
2097 if (line
[0] == '#') continue; // skip comment lines
2098 var inFields
= line
.split(delim
);
2099 if (inFields
.length
< 2) continue;
2102 if (!defaultParserSet
) {
2103 this.detectTypeFromString_(inFields
[0]);
2104 xParser
= this.attr_("xValueParser");
2105 defaultParserSet
= true;
2107 fields
[0] = xParser(inFields
[0], this);
2109 // If fractions are expected, parse the numbers as "A/B
"
2110 if (this.fractions_) {
2111 for (var j = 1; j < inFields.length; j++) {
2112 // TODO(danvk): figure out an appropriate way to flag parse errors.
2113 var vals = inFields[j].split("/");
2114 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2116 } else if (this.attr_("errorBars
")) {
2117 // If there are error bars, values are (value, stddev) pairs
2118 for (var j = 1; j < inFields.length; j += 2)
2119 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2120 parseFloatOrNull(inFields[j + 1])];
2121 } else if (this.attr_("customBars
")) {
2122 // Bars are a low;center;high tuple
2123 for (var j = 1; j < inFields.length; j++) {
2124 var vals = inFields[j].split(";");
2125 fields[j] = [ parseFloatOrNull(vals[0]),
2126 parseFloatOrNull(vals[1]),
2127 parseFloatOrNull(vals[2]) ];
2130 // Values are just numbers
2131 for (var j = 1; j < inFields.length; j++) {
2132 fields[j] = parseFloatOrNull(inFields[j]);
2135 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2140 if (fields.length != expectedCols) {
2141 this.error("Number of columns
in line
" + i + " (" + fields.length +
2142 ") does not agree
with number of
labels (" + expectedCols +
2148 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2149 ret.sort(function(a,b) { return a[0] - b[0] });
2156 * The user has provided their data as a pre-packaged JS array. If the x values
2157 * are numeric, this is the same as dygraphs' internal format. If the x values
2158 * are dates, we need to convert them from Date objects to ms since epoch.
2159 * @param {Array.<Object>} data
2160 * @return {Array.<Object>} data with numeric x values.
2162 Dygraph.prototype.parseArray_ = function(data) {
2163 // Peek at the first x value to see if it's numeric.
2164 if (data.length == 0) {
2165 this.error("Can
't plot empty data set");
2168 if (data[0].length == 0) {
2169 this.error("Data set cannot contain an empty row");
2173 if (this.attr_("labels") == null) {
2174 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2175 "in the options parameter");
2176 this.attrs_.labels = [ "X" ];
2177 for (var i = 1; i < data[0].length; i++) {
2178 this.attrs_.labels.push("Y" + i);
2182 if (Dygraph.isDateLike(data[0][0])) {
2183 // Some intelligent defaults for a date x-axis.
2184 this.attrs_.xValueFormatter = Dygraph.dateString_;
2185 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2186 this.attrs_.xTicker = Dygraph.dateTicker;
2188 // Assume they're all dates
.
2189 var parsedData
= Dygraph
.clone(data
);
2190 for (var i
= 0; i
< data
.length
; i
++) {
2191 if (parsedData
[i
].length
== 0) {
2192 this.error("Row " + (1 + i
) + " of data is empty");
2195 if (parsedData
[i
][0] == null
2196 || typeof(parsedData
[i
][0].getTime
) != 'function'
2197 || isNaN(parsedData
[i
][0].getTime())) {
2198 this.error("x value in row " + (1 + i
) + " is not a Date");
2201 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2205 // Some intelligent defaults for a numeric x-axis.
2206 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2207 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2213 * Parses a DataTable object from gviz.
2214 * The data is expected to have a first column that is either a date or a
2215 * number. All subsequent columns must be numbers. If there is a clear mismatch
2216 * between this.xValueParser_ and the type of the first column, it will be
2217 * fixed. Fills out rawData_.
2218 * @param {Array.<Object>} data See above.
2221 Dygraph
.prototype.parseDataTable_
= function(data
) {
2222 var cols
= data
.getNumberOfColumns();
2223 var rows
= data
.getNumberOfRows();
2225 var indepType
= data
.getColumnType(0);
2226 if (indepType
== 'date' || indepType
== 'datetime') {
2227 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2228 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2229 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2230 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2231 } else if (indepType
== 'number') {
2232 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2233 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2234 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2235 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2237 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2238 "column 1 of DataTable input (Got '" + indepType
+ "')");
2242 // Array of the column indices which contain data (and not annotations).
2244 var annotationCols
= {}; // data index -> [annotation cols]
2245 var hasAnnotations
= false;
2246 for (var i
= 1; i
< cols
; i
++) {
2247 var type
= data
.getColumnType(i
);
2248 if (type
== 'number') {
2250 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2251 // This is OK -- it's an annotation column.
2252 var dataIdx
= colIdx
[colIdx
.length
- 1];
2253 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2254 annotationCols
[dataIdx
] = [i
];
2256 annotationCols
[dataIdx
].push(i
);
2258 hasAnnotations
= true;
2260 this.error("Only 'number' is supported as a dependent type with Gviz." +
2261 " 'string' is only supported if displayAnnotations is true");
2265 // Read column labels
2266 // TODO(danvk): add support back for errorBars
2267 var labels
= [data
.getColumnLabel(0)];
2268 for (var i
= 0; i
< colIdx
.length
; i
++) {
2269 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2271 this.attrs_
.labels
= labels
;
2272 cols
= labels
.length
;
2275 var outOfOrder
= false;
2276 var annotations
= [];
2277 for (var i
= 0; i
< rows
; i
++) {
2279 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2280 data
.getValue(i
, 0) === null) {
2281 this.warning("Ignoring row " + i
+
2282 " of DataTable because of undefined or null first column.");
2286 if (indepType
== 'date' || indepType
== 'datetime') {
2287 row
.push(data
.getValue(i
, 0).getTime());
2289 row
.push(data
.getValue(i
, 0));
2291 if (!this.attr_("errorBars")) {
2292 for (var j
= 0; j
< colIdx
.length
; j
++) {
2293 var col
= colIdx
[j
];
2294 row
.push(data
.getValue(i
, col
));
2295 if (hasAnnotations
&&
2296 annotationCols
.hasOwnProperty(col
) &&
2297 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2299 ann
.series
= data
.getColumnLabel(col
);
2301 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2303 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2304 if (k
) ann
.text
+= "\n";
2305 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2307 annotations
.push(ann
);
2311 for (var j
= 0; j
< cols
- 1; j
++) {
2312 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2315 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2322 this.warn("DataTable is out of order; order it correctly to speed loading.");
2323 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2325 this.rawData_
= ret
;
2327 if (annotations
.length
> 0) {
2328 this.setAnnotations(annotations
, true);
2332 // These functions are all based on MochiKit.
2333 Dygraph
.update
= function (self
, o
) {
2334 if (typeof(o
) != 'undefined' && o
!== null) {
2336 if (o
.hasOwnProperty(k
)) {
2344 Dygraph
.isArrayLike
= function (o
) {
2345 var typ
= typeof(o
);
2347 (typ
!= 'object' && !(typ
== 'function' &&
2348 typeof(o
.item
) == 'function')) ||
2350 typeof(o
.length
) != 'number' ||
2358 Dygraph
.isDateLike
= function (o
) {
2359 if (typeof(o
) != "object" || o
=== null ||
2360 typeof(o
.getTime
) != 'function') {
2366 Dygraph
.clone
= function(o
) {
2367 // TODO(danvk): figure out how MochiKit's version works
2369 for (var i
= 0; i
< o
.length
; i
++) {
2370 if (Dygraph
.isArrayLike(o
[i
])) {
2371 r
.push(Dygraph
.clone(o
[i
]));
2381 * Get the CSV data. If it's in a function, call that function. If it's in a
2382 * file, do an XMLHttpRequest to get it.
2385 Dygraph
.prototype.start_
= function() {
2386 if (typeof this.file_
== 'function') {
2387 // CSV string. Pretend we got it via XHR.
2388 this.loadedEvent_(this.file_());
2389 } else if (Dygraph
.isArrayLike(this.file_
)) {
2390 this.rawData_
= this.parseArray_(this.file_
);
2391 this.drawGraph_(this.rawData_
);
2392 } else if (typeof this.file_
== 'object' &&
2393 typeof this.file_
.getColumnRange
== 'function') {
2394 // must be a DataTable from gviz.
2395 this.parseDataTable_(this.file_
);
2396 this.drawGraph_(this.rawData_
);
2397 } else if (typeof this.file_
== 'string') {
2398 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2399 if (this.file_
.indexOf('\n') >= 0) {
2400 this.loadedEvent_(this.file_
);
2402 var req
= new XMLHttpRequest();
2404 req
.onreadystatechange
= function () {
2405 if (req
.readyState
== 4) {
2406 if (req
.status
== 200) {
2407 caller
.loadedEvent_(req
.responseText
);
2412 req
.open("GET", this.file_
, true);
2416 this.error("Unknown data format: " + (typeof this.file_
));
2421 * Changes various properties of the graph. These can include:
2423 * <li>file: changes the source data for the graph</li>
2424 * <li>errorBars: changes whether the data contains stddev</li>
2426 * @param {Object} attrs The new properties and values
2428 Dygraph
.prototype.updateOptions
= function(attrs
) {
2429 // TODO(danvk): this is a mess. Rethink this function.
2430 if (attrs
.rollPeriod
) {
2431 this.rollPeriod_
= attrs
.rollPeriod
;
2433 if (attrs
.dateWindow
) {
2434 this.dateWindow_
= attrs
.dateWindow
;
2436 if (attrs
.valueRange
) {
2437 this.valueRange_
= attrs
.valueRange
;
2439 Dygraph
.update(this.user_attrs_
, attrs
);
2440 Dygraph
.update(this.renderOptions_
, attrs
);
2442 this.labelsFromCSV_
= (this.attr_("labels") == null);
2444 // TODO(danvk): this doesn't match the constructor logic
2445 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2446 if (attrs
['file']) {
2447 this.file_
= attrs
['file'];
2450 this.drawGraph_(this.rawData_
);
2455 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2456 * containing div (which has presumably changed size since the dygraph was
2457 * instantiated. If the width/height are specified, the div will be resized.
2459 * This is far more efficient than destroying and re-instantiating a
2460 * Dygraph, since it doesn't have to reparse the underlying data.
2462 * @param {Number} width Width (in pixels)
2463 * @param {Number} height Height (in pixels)
2465 Dygraph
.prototype.resize
= function(width
, height
) {
2466 if (this.resize_lock
) {
2469 this.resize_lock
= true;
2471 if ((width
=== null) != (height
=== null)) {
2472 this.warn("Dygraph.resize() should be called with zero parameters or " +
2473 "two non-NULL parameters. Pretending it was zero.");
2474 width
= height
= null;
2477 // TODO(danvk): there should be a clear() method.
2478 this.maindiv_
.innerHTML
= "";
2479 this.attrs_
.labelsDiv
= null;
2482 this.maindiv_
.style
.width
= width
+ "px";
2483 this.maindiv_
.style
.height
= height
+ "px";
2484 this.width_
= width
;
2485 this.height_
= height
;
2487 this.width_
= this.maindiv_
.offsetWidth
;
2488 this.height_
= this.maindiv_
.offsetHeight
;
2491 this.createInterface_();
2492 this.drawGraph_(this.rawData_
);
2494 this.resize_lock
= false;
2498 * Adjusts the number of days in the rolling average. Updates the graph to
2499 * reflect the new averaging period.
2500 * @param {Number} length Number of days over which to average the data.
2502 Dygraph
.prototype.adjustRoll
= function(length
) {
2503 this.rollPeriod_
= length
;
2504 this.drawGraph_(this.rawData_
);
2508 * Returns a boolean array of visibility statuses.
2510 Dygraph
.prototype.visibility
= function() {
2511 // Do lazy-initialization, so that this happens after we know the number of
2513 if (!this.attr_("visibility")) {
2514 this.attrs_
["visibility"] = [];
2516 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2517 this.attr_("visibility").push(true);
2519 return this.attr_("visibility");
2523 * Changes the visiblity of a series.
2525 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2526 var x
= this.visibility();
2527 if (num
< 0 && num
>= x
.length
) {
2528 this.warn("invalid series number in setVisibility: " + num
);
2531 this.drawGraph_(this.rawData_
);
2536 * Update the list of annotations and redraw the chart.
2538 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2539 this.annotations_
= ann
;
2540 this.layout_
.setAnnotations(this.annotations_
);
2541 if (!suppressDraw
) {
2542 this.drawGraph_(this.rawData_
);
2547 * Return the list of annotations.
2549 Dygraph
.prototype.annotations
= function() {
2550 return this.annotations_
;
2553 Dygraph
.addAnnotationRule
= function() {
2554 if (Dygraph
.addedAnnotationCSS
) return;
2557 if (document
.styleSheets
.length
> 0) {
2558 mysheet
= document
.styleSheets
[0];
2560 var styleSheetElement
= document
.createElement("style");
2561 styleSheetElement
.type
= "text/css";
2562 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2563 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2564 if (document
.styleSheets
[i
].disabled
) continue;
2565 mysheet
= document
.styleSheets
[i
];
2569 var rule
= "border: 1px solid black; " +
2570 "background-color: white; " +
2571 "text-align: center;";
2572 if (mysheet
.insertRule
) { // Firefox
2573 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2574 } else if (mysheet
.addRule
) { // IE
2575 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2578 Dygraph
.addedAnnotationCSS
= true;
2582 * Create a new canvas element. This is more complex than a simple
2583 * document.createElement("canvas") because of IE and excanvas.
2585 Dygraph
.createCanvas
= function() {
2586 var canvas
= document
.createElement("canvas");
2588 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2590 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2598 * A wrapper around Dygraph that implements the gviz API.
2599 * @param {Object} container The DOM object the visualization should live in.
2601 Dygraph
.GVizChart
= function(container
) {
2602 this.container
= container
;
2605 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2606 this.container
.innerHTML
= '';
2607 this.date_graph
= new Dygraph(this.container
, data
, options
);
2611 * Google charts compatible setSelection
2612 * Only row selection is supported, all points in the row will be highlighted
2613 * @param {Array} array of the selected cells
2616 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2618 if (selection_array
.length
) {
2619 row
= selection_array
[0].row
;
2621 this.date_graph
.setSelection(row
);
2625 * Google charts compatible getSelection implementation
2626 * @return {Array} array of the selected cells
2629 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2632 var row
= this.date_graph
.getSelection();
2634 if (row
< 0) return selection
;
2637 for (var i
in this.date_graph
.layout_
.datasets
) {
2638 selection
.push({row
: row
, column
: col
});
2645 // Older pages may still use this name.
2646 DateGraph
= Dygraph
;