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;
763 // draggingDate and draggingValue represent the [date,value] point on the
764 // graph at which the mouse was pressed. As the mouse moves while panning,
765 // the viewport must pan so that the mouse position points to
766 // [draggingDate, draggingValue]
767 var draggingDate
= null;
768 var draggingValue
= null;
770 // The range in second/value units that the viewport encompasses during a
771 // panning operation.
772 var dateRange
= null;
773 var valueRange
= null;
775 // Utility function to convert page-wide coordinates to canvas coords
778 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
779 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
781 // Draw zoom rectangles when the mouse is down and the user moves around
782 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
784 dragEndX
= getX(event
);
785 dragEndY
= getY(event
);
787 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
788 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
790 // drag direction threshold for y axis is twice as large as x axis
791 var dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
793 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
794 prevDragDirection
, prevEndX
, prevEndY
);
798 prevDragDirection
= dragDirection
;
799 } else if (isPanning
) {
800 dragEndX
= getX(event
);
801 dragEndY
= getY(event
);
803 // Want to have it so that:
804 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
805 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
806 // 3. draggingValue appears at dragEndY.
807 // 4. valueRange is unaltered.
809 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
810 var maxDate
= minDate
+ dateRange
;
811 self
.dateWindow_
= [minDate
, maxDate
];
814 // y-axis scaling is automatic unless a valueRange is defiend or
815 // if the user zooms in on the y-axis. If neither is true, valueWindow
817 if (self
.valueWindow_
) {
818 var maxValue
= draggingValue
+ (dragEndY
/ self
.height_
) * valueRange
;
819 var minValue
= maxValue
- valueRange
;
820 self
.valueWindow_
= [ minValue
, maxValue
];
822 self
.drawGraph_(self
.rawData_
);
826 // Track the beginning of drag events
827 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
828 px
= Dygraph
.findPosX(self
.canvas_
);
829 py
= Dygraph
.findPosY(self
.canvas_
);
830 dragStartX
= getX(event
);
831 dragStartY
= getY(event
);
833 if (event
.altKey
|| event
.shiftKey
) {
834 // have to be zoomed in to pan.
835 if (!self
.dateWindow_
&& !self
.valueWindow_
) return;
838 var xRange
= self
.xAxisRange();
839 dateRange
= xRange
[1] - xRange
[0];
840 var yRange
= self
.yAxisRange();
841 valueRange
= yRange
[1] - yRange
[0];
843 // TODO(konigsberg): Switch from all this math to toDataCoords?
844 // Seems to work for the dragging value.
845 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
847 var r
= self
.toDataCoords(null, dragStartY
);
848 draggingValue
= r
[1];
854 // If the user releases the mouse button during a drag, but not over the
855 // canvas, then it doesn't count as a zooming action.
856 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
857 if (isZooming
|| isPanning
) {
866 draggingValue
= null;
872 // Temporarily cancel the dragging event when the mouse leaves the graph
873 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
880 // If the mouse is released on the canvas during a drag event, then it's a
881 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
882 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
885 dragEndX
= getX(event
);
886 dragEndY
= getY(event
);
887 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
888 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
890 if (regionWidth
< 2 && regionHeight
< 2 &&
891 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
892 // TODO(danvk): pass along more info about the points, e.g. 'x'
893 if (self
.attr_('clickCallback') != null) {
894 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
896 if (self
.attr_('pointClickCallback')) {
897 // check if the click was on a particular point.
899 var closestDistance
= 0;
900 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
901 var p
= self
.selPoints_
[i
];
902 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
903 Math
.pow(p
.canvasy
- dragEndY
, 2);
904 if (closestIdx
== -1 || distance
< closestDistance
) {
905 closestDistance
= distance
;
910 // Allow any click within two pixels of the dot.
911 var radius
= self
.attr_('highlightCircleSize') + 2;
912 if (closestDistance
<= 5 * 5) {
913 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
918 if (regionWidth
>= 10 && regionWidth
> regionHeight
) {
919 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
920 Math
.max(dragStartX
, dragEndX
));
921 } else if (regionHeight
>= 10 && regionHeight
> regionWidth
){
922 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
923 Math
.max(dragStartY
, dragEndY
));
925 self
.canvas_
.getContext("2d").clearRect(0, 0,
927 self
.canvas_
.height
);
937 draggingValue
= null;
943 // Double-clicking zooms back out
944 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
945 // Disable zooming out if panning.
946 if (event
.altKey
|| event
.shiftKey
) return;
953 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
954 * up any previous zoom rectangles that were drawn. This could be optimized to
955 * avoid extra redrawing, but it's tricky to avoid interactions with the status
958 * @param {Number} direction the direction of the zoom rectangle. Acceptable
959 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
960 * @param {Number} startX The X position where the drag started, in canvas
962 * @param {Number} endX The current X position of the drag, in canvas coords.
963 * @param {Number} startY The Y position where the drag started, in canvas
965 * @param {Number} endY The current Y position of the drag, in canvas coords.
966 * @param {Number} prevDirection the value of direction on the previous call to
967 * this function. Used to avoid excess redrawing
968 * @param {Number} prevEndX The value of endX on the previous call to this
969 * function. Used to avoid excess redrawing
970 * @param {Number} prevEndY The value of endY on the previous call to this
971 * function. Used to avoid excess redrawing
974 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
975 prevDirection
, prevEndX
, prevEndY
) {
976 var ctx
= this.canvas_
.getContext("2d");
978 // Clean up from the previous rect if necessary
979 if (prevDirection
== Dygraph
.HORIZONTAL
) {
980 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
981 Math
.abs(startX
- prevEndX
), this.height_
);
982 } else if (prevDirection
== Dygraph
.VERTICAL
){
983 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
984 this.width_
, Math
.abs(startY
- prevEndY
));
987 // Draw a light-grey rectangle to show the new viewing area
988 if (direction
== Dygraph
.HORIZONTAL
) {
989 if (endX
&& startX
) {
990 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
991 ctx
.fillRect(Math
.min(startX
, endX
), 0,
992 Math
.abs(endX
- startX
), this.height_
);
995 if (direction
== Dygraph
.VERTICAL
) {
996 if (endY
&& startY
) {
997 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
998 ctx
.fillRect(0, Math
.min(startY
, endY
),
999 this.width_
, Math
.abs(endY
- startY
));
1005 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1006 * the canvas. The exact zoom window may be slightly larger if there are no data
1007 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1008 * which accepts dates that match the raw data. This function redraws the graph.
1010 * @param {Number} lowX The leftmost pixel value that should be visible.
1011 * @param {Number} highX The rightmost pixel value that should be visible.
1014 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1015 // Find the earliest and latest dates contained in this canvasx range.
1016 // Convert the call to date ranges of the raw data.
1017 var r
= this.toDataCoords(lowX
, null);
1019 r
= this.toDataCoords(highX
, null);
1021 this.doZoomXDates_(minDate
, maxDate
);
1025 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1026 * method with doZoomX which accepts pixel coordinates. This function redraws
1029 * @param {Number} minDate The minimum date that should be visible.
1030 * @param {Number} maxDate The maximum date that should be visible.
1033 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1034 this.dateWindow_
= [minDate
, maxDate
];
1035 this.drawGraph_(this.rawData_
);
1036 if (this.attr_("zoomCallback")) {
1037 var yRange
= this.yAxisRange();
1038 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1043 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1044 * the canvas. The exact zoom window may be slightly larger if there are no
1045 * data points near lowY or highY. Don't confuse this function with
1046 * doZoomYValues, which accepts parameters that match the raw data. This
1047 * function redraws the graph.
1049 * @param {Number} lowY The topmost pixel value that should be visible.
1050 * @param {Number} highY The lowest pixel value that should be visible.
1053 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1054 // Find the highest and lowest values in pixel range.
1055 var r
= this.toDataCoords(null, lowY
);
1056 var maxValue
= r
[1];
1057 r
= this.toDataCoords(null, highY
);
1058 var minValue
= r
[1];
1060 this.doZoomYValues_(minValue
, maxValue
);
1064 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1065 * method with doZoomY which accepts pixel coordinates. This function redraws
1068 * @param {Number} minValue The minimum Value that should be visible.
1069 * @param {Number} maxValue The maximum value that should be visible.
1072 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1073 this.valueWindow_
= [minValue
, maxValue
];
1074 this.drawGraph_(this.rawData_
);
1075 if (this.attr_("zoomCallback")) {
1076 var xRange
= this.xAxisRange();
1077 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1082 * Reset the zoom to the original view coordinates. This is the same as
1083 * double-clicking on the graph.
1087 Dygraph
.prototype.doUnzoom_
= function() {
1089 if (this.dateWindow_
!= null) {
1091 this.dateWindow_
= null;
1093 if (this.valueWindow_
!= null) {
1095 this.valueWindow_
= this.valueRange_
;
1099 // Putting the drawing operation before the callback because it resets
1101 this.drawGraph_(this.rawData_
);
1102 if (this.attr_("zoomCallback")) {
1103 var minDate
= this.rawData_
[0][0];
1104 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1105 var minValue
= this.yAxisRange()[0];
1106 var maxValue
= this.yAxisRange()[1];
1107 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1113 * When the mouse moves in the canvas, display information about a nearby data
1114 * point and draw dots over those points in the data series. This function
1115 * takes care of cleanup of previously-drawn dots.
1116 * @param {Object} event The mousemove event from the browser.
1119 Dygraph
.prototype.mouseMove_
= function(event
) {
1120 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1121 var points
= this.layout_
.points
;
1126 // Loop through all the points and find the date nearest to our current
1128 var minDist
= 1e+100;
1130 for (var i
= 0; i
< points
.length
; i
++) {
1131 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1132 if (dist
> minDist
) continue;
1136 if (idx
>= 0) lastx
= points
[idx
].xval
;
1137 // Check that you can really highlight the last day's data
1138 if (canvasx
> points
[points
.length
-1].canvasx
)
1139 lastx
= points
[points
.length
-1].xval
;
1141 // Extract the points we've selected
1142 this.selPoints_
= [];
1143 var l
= points
.length
;
1144 if (!this.attr_("stackedGraph")) {
1145 for (var i
= 0; i
< l
; i
++) {
1146 if (points
[i
].xval
== lastx
) {
1147 this.selPoints_
.push(points
[i
]);
1151 // Need to 'unstack' points starting from the bottom
1152 var cumulative_sum
= 0;
1153 for (var i
= l
- 1; i
>= 0; i
--) {
1154 if (points
[i
].xval
== lastx
) {
1155 var p
= {}; // Clone the point since we modify it
1156 for (var k
in points
[i
]) {
1157 p
[k
] = points
[i
][k
];
1159 p
.yval
-= cumulative_sum
;
1160 cumulative_sum
+= p
.yval
;
1161 this.selPoints_
.push(p
);
1164 this.selPoints_
.reverse();
1167 if (this.attr_("highlightCallback")) {
1168 var px
= this.lastx_
;
1169 if (px
!== null && lastx
!= px
) {
1170 // only fire if the selected point has changed.
1171 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1175 // Save last x position for callbacks.
1176 this.lastx_
= lastx
;
1178 this.updateSelection_();
1182 * Draw dots over the selectied points in the data series. This function
1183 * takes care of cleanup of previously-drawn dots.
1186 Dygraph
.prototype.updateSelection_
= function() {
1187 // Clear the previously drawn vertical, if there is one
1188 var circleSize
= this.attr_('highlightCircleSize');
1189 var ctx
= this.canvas_
.getContext("2d");
1190 if (this.previousVerticalX_
>= 0) {
1191 var px
= this.previousVerticalX_
;
1192 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
1195 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1197 if (this.selPoints_
.length
> 0) {
1198 var canvasx
= this.selPoints_
[0].canvasx
;
1200 // Set the status message to indicate the selected point(s)
1201 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1202 var fmtFunc
= this.attr_('yValueFormatter');
1203 var clen
= this.colors_
.length
;
1205 if (this.attr_('showLabelsOnHighlight')) {
1206 // Set the status message to indicate the selected point(s)
1207 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1208 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1209 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1210 if (this.attr_("labelsSeparateLines")) {
1213 var point
= this.selPoints_
[i
];
1214 var c
= new RGBColor(this.colors_
[i
%clen
]);
1215 var yval
= fmtFunc(point
.yval
);
1216 replace
+= " <b><font color='" + c
.toHex() + "'>"
1217 + point
.name
+ "</font></b>:"
1221 this.attr_("labelsDiv").innerHTML
= replace
;
1224 // Draw colored circles over the center of each selected point
1226 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1227 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1229 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1230 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1231 0, 2 * Math
.PI
, false);
1236 this.previousVerticalX_
= canvasx
;
1241 * Set manually set selected dots, and display information about them
1242 * @param int row number that should by highlighted
1243 * false value clears the selection
1246 Dygraph
.prototype.setSelection
= function(row
) {
1247 // Extract the points we've selected
1248 this.selPoints_
= [];
1251 if (row
!== false) {
1252 row
= row
-this.boundaryIds_
[0][0];
1255 if (row
!== false && row
>= 0) {
1256 for (var i
in this.layout_
.datasets
) {
1257 if (row
< this.layout_
.datasets
[i
].length
) {
1258 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1260 pos
+= this.layout_
.datasets
[i
].length
;
1264 if (this.selPoints_
.length
) {
1265 this.lastx_
= this.selPoints_
[0].xval
;
1266 this.updateSelection_();
1269 this.clearSelection();
1275 * The mouse has left the canvas. Clear out whatever artifacts remain
1276 * @param {Object} event the mouseout event from the browser.
1279 Dygraph
.prototype.mouseOut_
= function(event
) {
1280 if (this.attr_("unhighlightCallback")) {
1281 this.attr_("unhighlightCallback")(event
);
1284 if (this.attr_("hideOverlayOnMouseOut")) {
1285 this.clearSelection();
1290 * Remove all selection from the canvas
1293 Dygraph
.prototype.clearSelection
= function() {
1294 // Get rid of the overlay data
1295 var ctx
= this.canvas_
.getContext("2d");
1296 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1297 this.attr_("labelsDiv").innerHTML
= "";
1298 this.selPoints_
= [];
1303 * Returns the number of the currently selected row
1304 * @return int row number, of -1 if nothing is selected
1307 Dygraph
.prototype.getSelection
= function() {
1308 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1312 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1313 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1314 return row
+ this.boundaryIds_
[0][0];
1320 Dygraph
.zeropad
= function(x
) {
1321 if (x
< 10) return "0" + x
; else return "" + x
;
1325 * Return a string version of the hours, minutes and seconds portion of a date.
1326 * @param {Number} date The JavaScript date (ms since epoch)
1327 * @return {String} A time of the form "HH:MM:SS"
1330 Dygraph
.hmsString_
= function(date
) {
1331 var zeropad
= Dygraph
.zeropad
;
1332 var d
= new Date(date
);
1333 if (d
.getSeconds()) {
1334 return zeropad(d
.getHours()) + ":" +
1335 zeropad(d
.getMinutes()) + ":" +
1336 zeropad(d
.getSeconds());
1338 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1343 * Convert a JS date to a string appropriate to display on an axis that
1344 * is displaying values at the stated granularity.
1345 * @param {Date} date The date to format
1346 * @param {Number} granularity One of the Dygraph granularity constants
1347 * @return {String} The formatted date
1350 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1351 if (granularity
>= Dygraph
.MONTHLY
) {
1352 return date
.strftime('%b %y');
1354 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1355 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1356 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1358 return Dygraph
.hmsString_(date
.getTime());
1364 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1365 * @param {Number} date The JavaScript date (ms since epoch)
1366 * @return {String} A date of the form "YYYY/MM/DD"
1369 Dygraph
.dateString_
= function(date
, self
) {
1370 var zeropad
= Dygraph
.zeropad
;
1371 var d
= new Date(date
);
1374 var year
= "" + d
.getFullYear();
1375 // Get a 0 padded month string
1376 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1377 // Get a 0 padded day string
1378 var day
= zeropad(d
.getDate());
1381 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1382 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1384 return year
+ "/" + month + "/" + day
+ ret
;
1388 * Round a number to the specified number of digits past the decimal point.
1389 * @param {Number} num The number to round
1390 * @param {Number} places The number of decimals to which to round
1391 * @return {Number} The rounded number
1394 Dygraph
.round_
= function(num
, places
) {
1395 var shift
= Math
.pow(10, places
);
1396 return Math
.round(num
* shift
)/shift
;
1400 * Fires when there's data available to be graphed.
1401 * @param {String} data Raw CSV data to be plotted
1404 Dygraph
.prototype.loadedEvent_
= function(data
) {
1405 this.rawData_
= this.parseCSV_(data
);
1406 this.drawGraph_(this.rawData_
);
1409 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1410 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1411 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1414 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1417 Dygraph
.prototype.addXTicks_
= function() {
1418 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1419 var startDate
, endDate
;
1420 if (this.dateWindow_
) {
1421 startDate
= this.dateWindow_
[0];
1422 endDate
= this.dateWindow_
[1];
1424 startDate
= this.rawData_
[0][0];
1425 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1428 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1429 this.layout_
.updateOptions({xTicks
: xTicks
});
1432 // Time granularity enumeration
1433 Dygraph
.SECONDLY
= 0;
1434 Dygraph
.TWO_SECONDLY
= 1;
1435 Dygraph
.FIVE_SECONDLY
= 2;
1436 Dygraph
.TEN_SECONDLY
= 3;
1437 Dygraph
.THIRTY_SECONDLY
= 4;
1438 Dygraph
.MINUTELY
= 5;
1439 Dygraph
.TWO_MINUTELY
= 6;
1440 Dygraph
.FIVE_MINUTELY
= 7;
1441 Dygraph
.TEN_MINUTELY
= 8;
1442 Dygraph
.THIRTY_MINUTELY
= 9;
1443 Dygraph
.HOURLY
= 10;
1444 Dygraph
.TWO_HOURLY
= 11;
1445 Dygraph
.SIX_HOURLY
= 12;
1447 Dygraph
.WEEKLY
= 14;
1448 Dygraph
.MONTHLY
= 15;
1449 Dygraph
.QUARTERLY
= 16;
1450 Dygraph
.BIANNUAL
= 17;
1451 Dygraph
.ANNUAL
= 18;
1452 Dygraph
.DECADAL
= 19;
1453 Dygraph
.NUM_GRANULARITIES
= 20;
1455 Dygraph
.SHORT_SPACINGS
= [];
1456 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1457 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1458 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1459 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1460 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1461 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1462 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1463 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1464 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1465 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1466 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1467 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1468 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1469 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1470 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1474 // If we used this time granularity, how many ticks would there be?
1475 // This is only an approximation, but it's generally good enough.
1477 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1478 if (granularity
< Dygraph
.MONTHLY
) {
1479 // Generate one tick mark for every fixed interval of time.
1480 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1481 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1483 var year_mod
= 1; // e.g. to only print one point every 10 years.
1484 var num_months
= 12;
1485 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1486 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1487 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1488 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1490 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1491 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1492 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1498 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1499 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1501 // Returns an array containing {v: millis, label: label} dictionaries.
1503 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1504 var formatter
= this.attr_("xAxisLabelFormatter");
1506 if (granularity
< Dygraph
.MONTHLY
) {
1507 // Generate one tick mark for every fixed interval of time.
1508 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1509 var format
= '%d%b'; // e.g. "1Jan"
1511 // Find a time less than start_time which occurs on a "nice" time boundary
1512 // for this granularity.
1513 var g
= spacing
/ 1000;
1514 var d
= new Date(start_time
);
1515 if (g
<= 60) { // seconds
1516 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1520 if (g
<= 60) { // minutes
1521 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1526 if (g
<= 24) { // days
1527 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1532 if (g
== 7) { // one week
1533 d
.setDate(d
.getDate() - d
.getDay());
1538 start_time
= d
.getTime();
1540 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1541 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1544 // Display a tick mark on the first of a set of months of each year.
1545 // Years get a tick mark iff y % year_mod == 0. This is useful for
1546 // displaying a tick mark once every 10 years, say, on long time scales.
1548 var year_mod
= 1; // e.g. to only print one point every 10 years.
1550 if (granularity
== Dygraph
.MONTHLY
) {
1551 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1552 } else if (granularity
== Dygraph
.QUARTERLY
) {
1553 months
= [ 0, 3, 6, 9 ];
1554 } else if (granularity
== Dygraph
.BIANNUAL
) {
1556 } else if (granularity
== Dygraph
.ANNUAL
) {
1558 } else if (granularity
== Dygraph
.DECADAL
) {
1563 var start_year
= new Date(start_time
).getFullYear();
1564 var end_year
= new Date(end_time
).getFullYear();
1565 var zeropad
= Dygraph
.zeropad
;
1566 for (var i
= start_year
; i
<= end_year
; i
++) {
1567 if (i
% year_mod
!= 0) continue;
1568 for (var j
= 0; j
< months
.length
; j
++) {
1569 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1570 var t
= Date
.parse(date_str
);
1571 if (t
< start_time
|| t
> end_time
) continue;
1572 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1582 * Add ticks to the x-axis based on a date range.
1583 * @param {Number} startDate Start of the date window (millis since epoch)
1584 * @param {Number} endDate End of the date window (millis since epoch)
1585 * @return {Array.<Object>} Array of {label, value} tuples.
1588 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1590 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1591 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1592 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1599 return self
.GetXAxis(startDate
, endDate
, chosen
);
1601 // TODO(danvk): signal error.
1606 * Add ticks when the x axis has numbers on it (instead of dates)
1607 * @param {Number} startDate Start of the date window (millis since epoch)
1608 * @param {Number} endDate End of the date window (millis since epoch)
1609 * @return {Array.<Object>} Array of {label, value} tuples.
1612 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1614 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1615 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1616 // The first spacing greater than pixelsPerYLabel is what we use.
1617 // TODO(danvk): version that works on a log scale.
1618 if (self
.attr_("labelsKMG2")) {
1619 var mults
= [1, 2, 4, 8];
1621 var mults
= [1, 2, 5];
1623 var scale
, low_val
, high_val
, nTicks
;
1624 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1625 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1626 for (var i
= -10; i
< 50; i
++) {
1627 if (self
.attr_("labelsKMG2")) {
1628 var base_scale
= Math
.pow(16, i
);
1630 var base_scale
= Math
.pow(10, i
);
1632 for (var j
= 0; j
< mults
.length
; j
++) {
1633 scale
= base_scale
* mults
[j
];
1634 low_val
= Math
.floor(minV
/ scale
) * scale
;
1635 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1636 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1637 var spacing
= self
.height_
/ nTicks
;
1638 // wish I could break out of both loops at once...
1639 if (spacing
> pixelsPerTick
) break;
1641 if (spacing
> pixelsPerTick
) break;
1644 // Construct labels for the ticks
1648 if (self
.attr_("labelsKMB")) {
1650 k_labels
= [ "K", "M", "B", "T" ];
1652 if (self
.attr_("labelsKMG2")) {
1653 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1655 k_labels
= [ "k", "M", "G", "T" ];
1658 // Allow reverse y-axis if it's explicitly requested.
1659 if (low_val
> high_val
) scale
*= -1;
1661 for (var i
= 0; i
< nTicks
; i
++) {
1662 var tickV
= low_val
+ i
* scale
;
1663 var absTickV
= Math
.abs(tickV
);
1664 var label
= Dygraph
.round_(tickV
, 2);
1665 if (k_labels
.length
) {
1666 // Round up to an appropriate unit.
1668 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1669 if (absTickV
>= n
) {
1670 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1675 ticks
.push( {label
: label
, v
: tickV
} );
1681 * Adds appropriate ticks on the y-axis
1682 * @param {Number} minY The minimum Y value in the data set
1683 * @param {Number} maxY The maximum Y value in the data set
1686 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1687 // Set the number of ticks so that the labels are human-friendly.
1688 // TODO(danvk): make this an attribute as well.
1689 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1690 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1694 // Computes the range of the data series (including confidence intervals).
1695 // series is either [ [x1, y1], [x2, y2], ... ] or
1696 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1697 // Returns [low, high]
1698 Dygraph
.prototype.extremeValues_
= function(series
) {
1699 var minY
= null, maxY
= null;
1701 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1703 // With custom bars, maxY is the max of the high values.
1704 for (var j
= 0; j
< series
.length
; j
++) {
1705 var y
= series
[j
][1][0];
1707 var low
= y
- series
[j
][1][1];
1708 var high
= y
+ series
[j
][1][2];
1709 if (low
> y
) low
= y
; // this can happen with custom bars,
1710 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1711 if (maxY
== null || high
> maxY
) {
1714 if (minY
== null || low
< minY
) {
1719 for (var j
= 0; j
< series
.length
; j
++) {
1720 var y
= series
[j
][1];
1721 if (y
=== null || isNaN(y
)) continue;
1722 if (maxY
== null || y
> maxY
) {
1725 if (minY
== null || y
< minY
) {
1731 return [minY
, maxY
];
1735 * Update the graph with new data. Data is in the format
1736 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1737 * or, if errorBars=true,
1738 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1739 * @param {Array.<Object>} data The data (see above)
1742 Dygraph
.prototype.drawGraph_
= function(data
) {
1743 // This is used to set the second parameter to drawCallback, below.
1744 var is_initial_draw
= this.is_initial_draw_
;
1745 this.is_initial_draw_
= false;
1747 var minY
= null, maxY
= null;
1748 this.layout_
.removeAllDatasets();
1750 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1752 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1754 // Loop over the fields (series). Go from the last to the first,
1755 // because if they're stacked that's how we accumulate the values.
1757 var cumulative_y
= []; // For stacked series.
1760 // Loop over all fields and create datasets
1761 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1762 if (!this.visibility()[i
- 1]) continue;
1765 for (var j
= 0; j
< data
.length
; j
++) {
1766 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1767 var date
= data
[j
][0];
1768 series
.push([date
, data
[j
][i
]]);
1771 series
= this.rollingAverage(series
, this.rollPeriod_
);
1773 // Prune down to the desired range, if necessary (for zooming)
1774 // Because there can be lines going to points outside of the visible area,
1775 // we actually prune to visible points, plus one on either side.
1776 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1777 if (this.dateWindow_
) {
1778 var low
= this.dateWindow_
[0];
1779 var high
= this.dateWindow_
[1];
1781 // TODO(danvk): do binary search instead of linear search.
1782 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1783 var firstIdx
= null, lastIdx
= null;
1784 for (var k
= 0; k
< series
.length
; k
++) {
1785 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1788 if (series
[k
][0] <= high
) {
1792 if (firstIdx
=== null) firstIdx
= 0;
1793 if (firstIdx
> 0) firstIdx
--;
1794 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1795 if (lastIdx
< series
.length
- 1) lastIdx
++;
1796 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1797 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1798 pruned
.push(series
[k
]);
1802 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1805 var extremes
= this.extremeValues_(series
);
1806 var thisMinY
= extremes
[0];
1807 var thisMaxY
= extremes
[1];
1808 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1809 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1812 for (var j
=0; j
<series
.length
; j
++) {
1813 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1816 } else if (this.attr_("stackedGraph")) {
1817 var l
= series
.length
;
1819 for (var j
= 0; j
< l
; j
++) {
1820 // If one data set has a NaN, let all subsequent stacked
1821 // sets inherit the NaN -- only start at 0 for the first set.
1822 var x
= series
[j
][0];
1823 if (cumulative_y
[x
] === undefined
)
1824 cumulative_y
[x
] = 0;
1826 actual_y
= series
[j
][1];
1827 cumulative_y
[x
] += actual_y
;
1829 series
[j
] = [x
, cumulative_y
[x
]]
1831 if (!maxY
|| cumulative_y
[x
] > maxY
)
1832 maxY
= cumulative_y
[x
];
1836 datasets
[i
] = series
;
1839 for (var i
= 1; i
< datasets
.length
; i
++) {
1840 if (!this.visibility()[i
- 1]) continue;
1841 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1844 // Use some heuristics to come up with a good maxY value, unless it's been
1845 // set explicitly by the developer or end-user (via drag)
1846 if (this.valueWindow_
!= null) {
1847 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1848 this.displayedYRange_
= this.valueWindow_
;
1850 // This affects the calculation of span, below.
1851 if (this.attr_("includeZero") && minY
> 0) {
1855 // Add some padding and round up to an integer to be human-friendly.
1856 var span
= maxY
- minY
;
1857 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1858 if (span
== 0) { span
= maxY
; }
1859 var maxAxisY
= maxY
+ 0.1 * span
;
1860 var minAxisY
= minY
- 0.1 * span
;
1862 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1863 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1864 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1866 if (this.attr_("includeZero")) {
1867 if (maxY
< 0) maxAxisY
= 0;
1868 if (minY
> 0) minAxisY
= 0;
1871 this.addYTicks_(minAxisY
, maxAxisY
);
1872 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1877 // Tell PlotKit to use this new data and render itself
1878 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1879 this.layout_
.evaluateWithError();
1880 this.plotter_
.clear();
1881 this.plotter_
.render();
1882 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1883 this.canvas_
.height
);
1885 if (this.attr_("drawCallback") !== null) {
1886 this.attr_("drawCallback")(this, is_initial_draw
);
1891 * Calculates the rolling average of a data set.
1892 * If originalData is [label, val], rolls the average of those.
1893 * If originalData is [label, [, it's interpreted as [value, stddev]
1894 * and the roll is returned in the same form, with appropriately reduced
1895 * stddev for each value.
1896 * Note that this is where fractional input (i.e. '5/10') is converted into
1898 * @param {Array} originalData The data in the appropriate format (see above)
1899 * @param {Number} rollPeriod The number of days over which to average the data
1901 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1902 if (originalData
.length
< 2)
1903 return originalData
;
1904 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1905 var rollingData
= [];
1906 var sigma
= this.attr_("sigma");
1908 if (this.fractions_
) {
1910 var den
= 0; // numerator/denominator
1912 for (var i
= 0; i
< originalData
.length
; i
++) {
1913 num
+= originalData
[i
][1][0];
1914 den
+= originalData
[i
][1][1];
1915 if (i
- rollPeriod
>= 0) {
1916 num
-= originalData
[i
- rollPeriod
][1][0];
1917 den
-= originalData
[i
- rollPeriod
][1][1];
1920 var date
= originalData
[i
][0];
1921 var value
= den
? num
/ den
: 0.0;
1922 if (this.attr_("errorBars")) {
1923 if (this.wilsonInterval_
) {
1924 // For more details on this confidence interval, see:
1925 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1927 var p
= value
< 0 ? 0 : value
, n
= den
;
1928 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1929 var denom
= 1 + sigma
* sigma
/ den
;
1930 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1931 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1932 rollingData
[i
] = [date
,
1933 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1935 rollingData
[i
] = [date
, [0, 0, 0]];
1938 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1939 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1942 rollingData
[i
] = [date
, mult
* value
];
1945 } else if (this.attr_("customBars")) {
1950 for (var i
= 0; i
< originalData
.length
; i
++) {
1951 var data
= originalData
[i
][1];
1953 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1955 if (y
!= null && !isNaN(y
)) {
1961 if (i
- rollPeriod
>= 0) {
1962 var prev
= originalData
[i
- rollPeriod
];
1963 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1970 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1971 1.0 * (mid
- low
) / count
,
1972 1.0 * (high
- mid
) / count
]];
1975 // Calculate the rolling average for the first rollPeriod - 1 points where
1976 // there is not enough data to roll over the full number of days
1977 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1978 if (!this.attr_("errorBars")){
1979 if (rollPeriod
== 1) {
1980 return originalData
;
1983 for (var i
= 0; i
< originalData
.length
; i
++) {
1986 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1987 var y
= originalData
[j
][1];
1988 if (y
== null || isNaN(y
)) continue;
1990 sum
+= originalData
[j
][1];
1993 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1995 rollingData
[i
] = [originalData
[i
][0], null];
2000 for (var i
= 0; i
< originalData
.length
; i
++) {
2004 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2005 var y
= originalData
[j
][1][0];
2006 if (y
== null || isNaN(y
)) continue;
2008 sum
+= originalData
[j
][1][0];
2009 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2012 var stddev
= Math
.sqrt(variance
) / num_ok
;
2013 rollingData
[i
] = [originalData
[i
][0],
2014 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2016 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2026 * Parses a date, returning the number of milliseconds since epoch. This can be
2027 * passed in as an xValueParser in the Dygraph constructor.
2028 * TODO(danvk): enumerate formats that this understands.
2029 * @param {String} A date in YYYYMMDD format.
2030 * @return {Number} Milliseconds since epoch.
2033 Dygraph
.dateParser
= function(dateStr
, self
) {
2036 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2037 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2038 while (dateStrSlashed
.search("-") != -1) {
2039 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2041 d
= Date
.parse(dateStrSlashed
);
2042 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2043 // TODO(danvk): remove support for this format. It's confusing.
2044 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2045 + "/" + dateStr
.substr(6,2);
2046 d
= Date
.parse(dateStrSlashed
);
2048 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2049 // "2009/07/12 12:34:56"
2050 d
= Date
.parse(dateStr
);
2053 if (!d
|| isNaN(d
)) {
2054 self
.error("Couldn't parse " + dateStr
+ " as a date");
2060 * Detects the type of the str (date or numeric) and sets the various
2061 * formatting attributes in this.attrs_ based on this type.
2062 * @param {String} str An x value.
2065 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2067 if (str
.indexOf('-') >= 0 ||
2068 str
.indexOf('/') >= 0 ||
2069 isNaN(parseFloat(str
))) {
2071 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2072 // TODO(danvk): remove support for this format.
2077 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2078 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2079 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2080 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2082 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2083 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2084 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2085 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2090 * Parses a string in a special csv format. We expect a csv file where each
2091 * line is a date point, and the first field in each line is the date string.
2092 * We also expect that all remaining fields represent series.
2093 * if the errorBars attribute is set, then interpret the fields as:
2094 * date, series1, stddev1, series2, stddev2, ...
2095 * @param {Array.<Object>} data See above.
2098 * @return Array.<Object> An array with one entry for each row. These entries
2099 * are an array of cells in that row. The first entry is the parsed x-value for
2100 * the row. The second, third, etc. are the y-values. These can take on one of
2101 * three forms, depending on the CSV and constructor parameters:
2103 * 2. [ value, stddev ]
2104 * 3. [ low value, center value, high value ]
2106 Dygraph
.prototype.parseCSV_
= function(data
) {
2108 var lines
= data
.split("\n");
2110 // Use the default delimiter or fall back to a tab if that makes sense.
2111 var delim
= this.attr_('delimiter');
2112 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2117 if (this.labelsFromCSV_
) {
2119 this.attrs_
.labels
= lines
[0].split(delim
);
2122 // Parse the x as a float or return null if it's not a number.
2123 var parseFloatOrNull
= function(x
) {
2124 var val
= parseFloat(x
);
2125 return isNaN(val
) ? null : val
;
2129 var defaultParserSet
= false; // attempt to auto-detect x value type
2130 var expectedCols
= this.attr_("labels").length
;
2131 var outOfOrder
= false;
2132 for (var i
= start
; i
< lines
.length
; i
++) {
2133 var line
= lines
[i
];
2134 if (line
.length
== 0) continue; // skip blank lines
2135 if (line
[0] == '#') continue; // skip comment lines
2136 var inFields
= line
.split(delim
);
2137 if (inFields
.length
< 2) continue;
2140 if (!defaultParserSet
) {
2141 this.detectTypeFromString_(inFields
[0]);
2142 xParser
= this.attr_("xValueParser");
2143 defaultParserSet
= true;
2145 fields
[0] = xParser(inFields
[0], this);
2147 // If fractions are expected, parse the numbers as "A/B
"
2148 if (this.fractions_) {
2149 for (var j = 1; j < inFields.length; j++) {
2150 // TODO(danvk): figure out an appropriate way to flag parse errors.
2151 var vals = inFields[j].split("/");
2152 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2154 } else if (this.attr_("errorBars
")) {
2155 // If there are error bars, values are (value, stddev) pairs
2156 for (var j = 1; j < inFields.length; j += 2)
2157 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2158 parseFloatOrNull(inFields[j + 1])];
2159 } else if (this.attr_("customBars
")) {
2160 // Bars are a low;center;high tuple
2161 for (var j = 1; j < inFields.length; j++) {
2162 var vals = inFields[j].split(";");
2163 fields[j] = [ parseFloatOrNull(vals[0]),
2164 parseFloatOrNull(vals[1]),
2165 parseFloatOrNull(vals[2]) ];
2168 // Values are just numbers
2169 for (var j = 1; j < inFields.length; j++) {
2170 fields[j] = parseFloatOrNull(inFields[j]);
2173 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2178 if (fields.length != expectedCols) {
2179 this.error("Number of columns
in line
" + i + " (" + fields.length +
2180 ") does not agree
with number of
labels (" + expectedCols +
2186 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2187 ret.sort(function(a,b) { return a[0] - b[0] });
2194 * The user has provided their data as a pre-packaged JS array. If the x values
2195 * are numeric, this is the same as dygraphs' internal format. If the x values
2196 * are dates, we need to convert them from Date objects to ms since epoch.
2197 * @param {Array.<Object>} data
2198 * @return {Array.<Object>} data with numeric x values.
2200 Dygraph.prototype.parseArray_ = function(data) {
2201 // Peek at the first x value to see if it's numeric.
2202 if (data.length == 0) {
2203 this.error("Can
't plot empty data set");
2206 if (data[0].length == 0) {
2207 this.error("Data set cannot contain an empty row");
2211 if (this.attr_("labels") == null) {
2212 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2213 "in the options parameter");
2214 this.attrs_.labels = [ "X" ];
2215 for (var i = 1; i < data[0].length; i++) {
2216 this.attrs_.labels.push("Y" + i);
2220 if (Dygraph.isDateLike(data[0][0])) {
2221 // Some intelligent defaults for a date x-axis.
2222 this.attrs_.xValueFormatter = Dygraph.dateString_;
2223 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2224 this.attrs_.xTicker = Dygraph.dateTicker;
2226 // Assume they're all dates
.
2227 var parsedData
= Dygraph
.clone(data
);
2228 for (var i
= 0; i
< data
.length
; i
++) {
2229 if (parsedData
[i
].length
== 0) {
2230 this.error("Row " + (1 + i
) + " of data is empty");
2233 if (parsedData
[i
][0] == null
2234 || typeof(parsedData
[i
][0].getTime
) != 'function'
2235 || isNaN(parsedData
[i
][0].getTime())) {
2236 this.error("x value in row " + (1 + i
) + " is not a Date");
2239 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2243 // Some intelligent defaults for a numeric x-axis.
2244 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2245 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2251 * Parses a DataTable object from gviz.
2252 * The data is expected to have a first column that is either a date or a
2253 * number. All subsequent columns must be numbers. If there is a clear mismatch
2254 * between this.xValueParser_ and the type of the first column, it will be
2255 * fixed. Fills out rawData_.
2256 * @param {Array.<Object>} data See above.
2259 Dygraph
.prototype.parseDataTable_
= function(data
) {
2260 var cols
= data
.getNumberOfColumns();
2261 var rows
= data
.getNumberOfRows();
2263 var indepType
= data
.getColumnType(0);
2264 if (indepType
== 'date' || indepType
== 'datetime') {
2265 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2266 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2267 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2268 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2269 } else if (indepType
== 'number') {
2270 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2271 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2272 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2273 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2275 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2276 "column 1 of DataTable input (Got '" + indepType
+ "')");
2280 // Array of the column indices which contain data (and not annotations).
2282 var annotationCols
= {}; // data index -> [annotation cols]
2283 var hasAnnotations
= false;
2284 for (var i
= 1; i
< cols
; i
++) {
2285 var type
= data
.getColumnType(i
);
2286 if (type
== 'number') {
2288 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2289 // This is OK -- it's an annotation column.
2290 var dataIdx
= colIdx
[colIdx
.length
- 1];
2291 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2292 annotationCols
[dataIdx
] = [i
];
2294 annotationCols
[dataIdx
].push(i
);
2296 hasAnnotations
= true;
2298 this.error("Only 'number' is supported as a dependent type with Gviz." +
2299 " 'string' is only supported if displayAnnotations is true");
2303 // Read column labels
2304 // TODO(danvk): add support back for errorBars
2305 var labels
= [data
.getColumnLabel(0)];
2306 for (var i
= 0; i
< colIdx
.length
; i
++) {
2307 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2309 this.attrs_
.labels
= labels
;
2310 cols
= labels
.length
;
2313 var outOfOrder
= false;
2314 var annotations
= [];
2315 for (var i
= 0; i
< rows
; i
++) {
2317 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2318 data
.getValue(i
, 0) === null) {
2319 this.warning("Ignoring row " + i
+
2320 " of DataTable because of undefined or null first column.");
2324 if (indepType
== 'date' || indepType
== 'datetime') {
2325 row
.push(data
.getValue(i
, 0).getTime());
2327 row
.push(data
.getValue(i
, 0));
2329 if (!this.attr_("errorBars")) {
2330 for (var j
= 0; j
< colIdx
.length
; j
++) {
2331 var col
= colIdx
[j
];
2332 row
.push(data
.getValue(i
, col
));
2333 if (hasAnnotations
&&
2334 annotationCols
.hasOwnProperty(col
) &&
2335 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2337 ann
.series
= data
.getColumnLabel(col
);
2339 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2341 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2342 if (k
) ann
.text
+= "\n";
2343 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2345 annotations
.push(ann
);
2349 for (var j
= 0; j
< cols
- 1; j
++) {
2350 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2353 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2360 this.warn("DataTable is out of order; order it correctly to speed loading.");
2361 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2363 this.rawData_
= ret
;
2365 if (annotations
.length
> 0) {
2366 this.setAnnotations(annotations
, true);
2370 // These functions are all based on MochiKit.
2371 Dygraph
.update
= function (self
, o
) {
2372 if (typeof(o
) != 'undefined' && o
!== null) {
2374 if (o
.hasOwnProperty(k
)) {
2382 Dygraph
.isArrayLike
= function (o
) {
2383 var typ
= typeof(o
);
2385 (typ
!= 'object' && !(typ
== 'function' &&
2386 typeof(o
.item
) == 'function')) ||
2388 typeof(o
.length
) != 'number' ||
2396 Dygraph
.isDateLike
= function (o
) {
2397 if (typeof(o
) != "object" || o
=== null ||
2398 typeof(o
.getTime
) != 'function') {
2404 Dygraph
.clone
= function(o
) {
2405 // TODO(danvk): figure out how MochiKit's version works
2407 for (var i
= 0; i
< o
.length
; i
++) {
2408 if (Dygraph
.isArrayLike(o
[i
])) {
2409 r
.push(Dygraph
.clone(o
[i
]));
2419 * Get the CSV data. If it's in a function, call that function. If it's in a
2420 * file, do an XMLHttpRequest to get it.
2423 Dygraph
.prototype.start_
= function() {
2424 if (typeof this.file_
== 'function') {
2425 // CSV string. Pretend we got it via XHR.
2426 this.loadedEvent_(this.file_());
2427 } else if (Dygraph
.isArrayLike(this.file_
)) {
2428 this.rawData_
= this.parseArray_(this.file_
);
2429 this.drawGraph_(this.rawData_
);
2430 } else if (typeof this.file_
== 'object' &&
2431 typeof this.file_
.getColumnRange
== 'function') {
2432 // must be a DataTable from gviz.
2433 this.parseDataTable_(this.file_
);
2434 this.drawGraph_(this.rawData_
);
2435 } else if (typeof this.file_
== 'string') {
2436 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2437 if (this.file_
.indexOf('\n') >= 0) {
2438 this.loadedEvent_(this.file_
);
2440 var req
= new XMLHttpRequest();
2442 req
.onreadystatechange
= function () {
2443 if (req
.readyState
== 4) {
2444 if (req
.status
== 200) {
2445 caller
.loadedEvent_(req
.responseText
);
2450 req
.open("GET", this.file_
, true);
2454 this.error("Unknown data format: " + (typeof this.file_
));
2459 * Changes various properties of the graph. These can include:
2461 * <li>file: changes the source data for the graph</li>
2462 * <li>errorBars: changes whether the data contains stddev</li>
2464 * @param {Object} attrs The new properties and values
2466 Dygraph
.prototype.updateOptions
= function(attrs
) {
2467 // TODO(danvk): this is a mess. Rethink this function.
2468 if (attrs
.rollPeriod
) {
2469 this.rollPeriod_
= attrs
.rollPeriod
;
2471 if (attrs
.dateWindow
) {
2472 this.dateWindow_
= attrs
.dateWindow
;
2474 if (attrs
.valueRange
) {
2475 this.valueRange_
= attrs
.valueRange
;
2477 Dygraph
.update(this.user_attrs_
, attrs
);
2478 Dygraph
.update(this.renderOptions_
, attrs
);
2480 this.labelsFromCSV_
= (this.attr_("labels") == null);
2482 // TODO(danvk): this doesn't match the constructor logic
2483 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2484 if (attrs
['file']) {
2485 this.file_
= attrs
['file'];
2488 this.drawGraph_(this.rawData_
);
2493 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2494 * containing div (which has presumably changed size since the dygraph was
2495 * instantiated. If the width/height are specified, the div will be resized.
2497 * This is far more efficient than destroying and re-instantiating a
2498 * Dygraph, since it doesn't have to reparse the underlying data.
2500 * @param {Number} width Width (in pixels)
2501 * @param {Number} height Height (in pixels)
2503 Dygraph
.prototype.resize
= function(width
, height
) {
2504 if (this.resize_lock
) {
2507 this.resize_lock
= true;
2509 if ((width
=== null) != (height
=== null)) {
2510 this.warn("Dygraph.resize() should be called with zero parameters or " +
2511 "two non-NULL parameters. Pretending it was zero.");
2512 width
= height
= null;
2515 // TODO(danvk): there should be a clear() method.
2516 this.maindiv_
.innerHTML
= "";
2517 this.attrs_
.labelsDiv
= null;
2520 this.maindiv_
.style
.width
= width
+ "px";
2521 this.maindiv_
.style
.height
= height
+ "px";
2522 this.width_
= width
;
2523 this.height_
= height
;
2525 this.width_
= this.maindiv_
.offsetWidth
;
2526 this.height_
= this.maindiv_
.offsetHeight
;
2529 this.createInterface_();
2530 this.drawGraph_(this.rawData_
);
2532 this.resize_lock
= false;
2536 * Adjusts the number of days in the rolling average. Updates the graph to
2537 * reflect the new averaging period.
2538 * @param {Number} length Number of days over which to average the data.
2540 Dygraph
.prototype.adjustRoll
= function(length
) {
2541 this.rollPeriod_
= length
;
2542 this.drawGraph_(this.rawData_
);
2546 * Returns a boolean array of visibility statuses.
2548 Dygraph
.prototype.visibility
= function() {
2549 // Do lazy-initialization, so that this happens after we know the number of
2551 if (!this.attr_("visibility")) {
2552 this.attrs_
["visibility"] = [];
2554 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2555 this.attr_("visibility").push(true);
2557 return this.attr_("visibility");
2561 * Changes the visiblity of a series.
2563 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2564 var x
= this.visibility();
2565 if (num
< 0 && num
>= x
.length
) {
2566 this.warn("invalid series number in setVisibility: " + num
);
2569 this.drawGraph_(this.rawData_
);
2574 * Update the list of annotations and redraw the chart.
2576 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2577 this.annotations_
= ann
;
2578 this.layout_
.setAnnotations(this.annotations_
);
2579 if (!suppressDraw
) {
2580 this.drawGraph_(this.rawData_
);
2585 * Return the list of annotations.
2587 Dygraph
.prototype.annotations
= function() {
2588 return this.annotations_
;
2591 Dygraph
.addAnnotationRule
= function() {
2592 if (Dygraph
.addedAnnotationCSS
) return;
2595 if (document
.styleSheets
.length
> 0) {
2596 mysheet
= document
.styleSheets
[0];
2598 var styleSheetElement
= document
.createElement("style");
2599 styleSheetElement
.type
= "text/css";
2600 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2601 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2602 if (document
.styleSheets
[i
].disabled
) continue;
2603 mysheet
= document
.styleSheets
[i
];
2607 var rule
= "border: 1px solid black; " +
2608 "background-color: white; " +
2609 "text-align: center;";
2610 if (mysheet
.insertRule
) { // Firefox
2611 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2612 } else if (mysheet
.addRule
) { // IE
2613 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2616 Dygraph
.addedAnnotationCSS
= true;
2620 * Create a new canvas element. This is more complex than a simple
2621 * document.createElement("canvas") because of IE and excanvas.
2623 Dygraph
.createCanvas
= function() {
2624 var canvas
= document
.createElement("canvas");
2626 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2628 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2636 * A wrapper around Dygraph that implements the gviz API.
2637 * @param {Object} container The DOM object the visualization should live in.
2639 Dygraph
.GVizChart
= function(container
) {
2640 this.container
= container
;
2643 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2644 this.container
.innerHTML
= '';
2645 this.date_graph
= new Dygraph(this.container
, data
, options
);
2649 * Google charts compatible setSelection
2650 * Only row selection is supported, all points in the row will be highlighted
2651 * @param {Array} array of the selected cells
2654 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2656 if (selection_array
.length
) {
2657 row
= selection_array
[0].row
;
2659 this.date_graph
.setSelection(row
);
2663 * Google charts compatible getSelection implementation
2664 * @return {Array} array of the selected cells
2667 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2670 var row
= this.date_graph
.getSelection();
2672 if (row
< 0) return selection
;
2675 for (var i
in this.date_graph
.layout_
.datasets
) {
2676 selection
.push({row
: row
, column
: col
});
2683 // Older pages may still use this name.
2684 DateGraph
= Dygraph
;