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
];
813 var maxValue
= draggingValue
+ (dragEndY
/ self
.height_
) * valueRange
;
814 var minValue
= maxValue
- valueRange
;
815 self
.valueWindow_
= [ minValue
, maxValue
];
816 self
.drawGraph_(self
.rawData_
);
820 // Track the beginning of drag events
821 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
822 px
= Dygraph
.findPosX(self
.canvas_
);
823 py
= Dygraph
.findPosY(self
.canvas_
);
824 dragStartX
= getX(event
);
825 dragStartY
= getY(event
);
827 if (event
.altKey
|| event
.shiftKey
) {
828 // have to be zoomed in to pan.
829 if (!self
.dateWindow_
&& !self
.valueRange_
) return;
832 var xRange
= self
.xAxisRange();
833 dateRange
= xRange
[1] - xRange
[0];
834 var yRange
= self
.yAxisRange();
835 valueRange
= yRange
[1] - yRange
[0];
837 // TODO(konigsberg): Switch from all this math to toDataCoords?
838 // Seems to work for the dragging value.
839 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
841 var r
= self
.toDataCoords(null, dragStartY
);
842 draggingValue
= r
[1];
848 // If the user releases the mouse button during a drag, but not over the
849 // canvas, then it doesn't count as a zooming action.
850 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
851 if (isZooming
|| isPanning
) {
860 draggingValue
= null;
866 // Temporarily cancel the dragging event when the mouse leaves the graph
867 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
874 // If the mouse is released on the canvas during a drag event, then it's a
875 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
876 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
879 dragEndX
= getX(event
);
880 dragEndY
= getY(event
);
881 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
882 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
884 if (regionWidth
< 2 && regionHeight
< 2 &&
885 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
886 // TODO(danvk): pass along more info about the points, e.g. 'x'
887 if (self
.attr_('clickCallback') != null) {
888 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
890 if (self
.attr_('pointClickCallback')) {
891 // check if the click was on a particular point.
893 var closestDistance
= 0;
894 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
895 var p
= self
.selPoints_
[i
];
896 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
897 Math
.pow(p
.canvasy
- dragEndY
, 2);
898 if (closestIdx
== -1 || distance
< closestDistance
) {
899 closestDistance
= distance
;
904 // Allow any click within two pixels of the dot.
905 var radius
= self
.attr_('highlightCircleSize') + 2;
906 if (closestDistance
<= 5 * 5) {
907 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
912 if (regionWidth
>= 10 && regionWidth
> regionHeight
) {
913 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
914 Math
.max(dragStartX
, dragEndX
));
915 } else if (regionHeight
>= 10 && regionHeight
> regionWidth
){
916 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
917 Math
.max(dragStartY
, dragEndY
));
919 self
.canvas_
.getContext("2d").clearRect(0, 0,
921 self
.canvas_
.height
);
931 draggingValue
= null;
937 // Double-clicking zooms back out
938 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
939 // Disable zooming out if panning.
940 if (event
.altKey
|| event
.shiftKey
) return;
947 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
948 * up any previous zoom rectangles that were drawn. This could be optimized to
949 * avoid extra redrawing, but it's tricky to avoid interactions with the status
952 * @param {Number} direction the direction of the zoom rectangle. Acceptable
953 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
954 * @param {Number} startX The X position where the drag started, in canvas
956 * @param {Number} endX The current X position of the drag, in canvas coords.
957 * @param {Number} startY The Y position where the drag started, in canvas
959 * @param {Number} endY The current Y position of the drag, in canvas coords.
960 * @param {Number} prevDirection the value of direction on the previous call to
961 * this function. Used to avoid excess redrawing
962 * @param {Number} prevEndX The value of endX on the previous call to this
963 * function. Used to avoid excess redrawing
964 * @param {Number} prevEndY The value of endY on the previous call to this
965 * function. Used to avoid excess redrawing
968 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
969 prevDirection
, prevEndX
, prevEndY
) {
970 var ctx
= this.canvas_
.getContext("2d");
972 // Clean up from the previous rect if necessary
973 if (prevDirection
== Dygraph
.HORIZONTAL
) {
974 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
975 Math
.abs(startX
- prevEndX
), this.height_
);
976 } else if (prevDirection
== Dygraph
.VERTICAL
){
977 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
978 this.width_
, Math
.abs(startY
- prevEndY
));
981 // Draw a light-grey rectangle to show the new viewing area
982 if (direction
== Dygraph
.HORIZONTAL
) {
983 if (endX
&& startX
) {
984 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
985 ctx
.fillRect(Math
.min(startX
, endX
), 0,
986 Math
.abs(endX
- startX
), this.height_
);
989 if (direction
== Dygraph
.VERTICAL
) {
990 if (endY
&& startY
) {
991 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
992 ctx
.fillRect(0, Math
.min(startY
, endY
),
993 this.width_
, Math
.abs(endY
- startY
));
999 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1000 * the canvas. The exact zoom window may be slightly larger if there are no data
1001 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1002 * which accepts dates that match the raw data. This function redraws the graph.
1004 * @param {Number} lowX The leftmost pixel value that should be visible.
1005 * @param {Number} highX The rightmost pixel value that should be visible.
1008 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1009 // Find the earliest and latest dates contained in this canvasx range.
1010 // Convert the call to date ranges of the raw data.
1011 var r
= this.toDataCoords(lowX
, null);
1013 r
= this.toDataCoords(highX
, null);
1015 this.doZoomXDates_(minDate
, maxDate
);
1019 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1020 * method with doZoomX which accepts pixel coordinates. This function redraws
1023 * @param {Number} minDate The minimum date that should be visible.
1024 * @param {Number} maxDate The maximum date that should be visible.
1027 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1028 this.dateWindow_
= [minDate
, maxDate
];
1029 this.drawGraph_(this.rawData_
);
1030 if (this.attr_("zoomCallback")) {
1031 var yRange
= this.yAxisRange();
1032 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1037 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1038 * the canvas. The exact zoom window may be slightly larger if there are no
1039 * data points near lowY or highY. Don't confuse this function with
1040 * doZoomYValues, which accepts parameters that match the raw data. This
1041 * function redraws the graph.
1043 * @param {Number} lowY The topmost pixel value that should be visible.
1044 * @param {Number} highY The lowest pixel value that should be visible.
1047 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1048 // Find the highest and lowest values in pixel range.
1049 var r
= this.toDataCoords(null, lowY
);
1050 var maxValue
= r
[1];
1051 r
= this.toDataCoords(null, highY
);
1052 var minValue
= r
[1];
1054 this.doZoomYValues_(minValue
, maxValue
);
1058 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1059 * method with doZoomY which accepts pixel coordinates. This function redraws
1062 * @param {Number} minValue The minimum Value that should be visible.
1063 * @param {Number} maxValue The maximum value that should be visible.
1066 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1067 this.valueWindow_
= [minValue
, maxValue
];
1068 this.drawGraph_(this.rawData_
);
1069 if (this.attr_("zoomCallback")) {
1070 var xRange
= this.xAxisRange();
1071 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1076 * Reset the zoom to the original view coordinates. This is the same as
1077 * double-clicking on the graph.
1081 Dygraph
.prototype.doUnzoom_
= function() {
1083 if (this.dateWindow_
!= null) {
1085 this.dateWindow_
= null;
1087 if (this.valueWindow_
!= null) {
1089 this.valueWindow_
= this.valueRange_
;
1093 // Putting the drawing operation before the callback because it resets
1095 this.drawGraph_(this.rawData_
);
1096 if (this.attr_("zoomCallback")) {
1097 var minDate
= this.rawData_
[0][0];
1098 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1099 var minValue
= this.yAxisRange()[0];
1100 var maxValue
= this.yAxisRange()[1];
1101 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1107 * When the mouse moves in the canvas, display information about a nearby data
1108 * point and draw dots over those points in the data series. This function
1109 * takes care of cleanup of previously-drawn dots.
1110 * @param {Object} event The mousemove event from the browser.
1113 Dygraph
.prototype.mouseMove_
= function(event
) {
1114 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1115 var points
= this.layout_
.points
;
1120 // Loop through all the points and find the date nearest to our current
1122 var minDist
= 1e+100;
1124 for (var i
= 0; i
< points
.length
; i
++) {
1125 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1126 if (dist
> minDist
) continue;
1130 if (idx
>= 0) lastx
= points
[idx
].xval
;
1131 // Check that you can really highlight the last day's data
1132 if (canvasx
> points
[points
.length
-1].canvasx
)
1133 lastx
= points
[points
.length
-1].xval
;
1135 // Extract the points we've selected
1136 this.selPoints_
= [];
1137 var l
= points
.length
;
1138 if (!this.attr_("stackedGraph")) {
1139 for (var i
= 0; i
< l
; i
++) {
1140 if (points
[i
].xval
== lastx
) {
1141 this.selPoints_
.push(points
[i
]);
1145 // Need to 'unstack' points starting from the bottom
1146 var cumulative_sum
= 0;
1147 for (var i
= l
- 1; i
>= 0; i
--) {
1148 if (points
[i
].xval
== lastx
) {
1149 var p
= {}; // Clone the point since we modify it
1150 for (var k
in points
[i
]) {
1151 p
[k
] = points
[i
][k
];
1153 p
.yval
-= cumulative_sum
;
1154 cumulative_sum
+= p
.yval
;
1155 this.selPoints_
.push(p
);
1158 this.selPoints_
.reverse();
1161 if (this.attr_("highlightCallback")) {
1162 var px
= this.lastx_
;
1163 if (px
!== null && lastx
!= px
) {
1164 // only fire if the selected point has changed.
1165 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1169 // Save last x position for callbacks.
1170 this.lastx_
= lastx
;
1172 this.updateSelection_();
1176 * Draw dots over the selectied points in the data series. This function
1177 * takes care of cleanup of previously-drawn dots.
1180 Dygraph
.prototype.updateSelection_
= function() {
1181 // Clear the previously drawn vertical, if there is one
1182 var circleSize
= this.attr_('highlightCircleSize');
1183 var ctx
= this.canvas_
.getContext("2d");
1184 if (this.previousVerticalX_
>= 0) {
1185 var px
= this.previousVerticalX_
;
1186 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
1189 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1191 if (this.selPoints_
.length
> 0) {
1192 var canvasx
= this.selPoints_
[0].canvasx
;
1194 // Set the status message to indicate the selected point(s)
1195 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1196 var fmtFunc
= this.attr_('yValueFormatter');
1197 var clen
= this.colors_
.length
;
1199 if (this.attr_('showLabelsOnHighlight')) {
1200 // Set the status message to indicate the selected point(s)
1201 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1202 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1203 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1204 if (this.attr_("labelsSeparateLines")) {
1207 var point
= this.selPoints_
[i
];
1208 var c
= new RGBColor(this.colors_
[i
%clen
]);
1209 var yval
= fmtFunc(point
.yval
);
1210 replace
+= " <b><font color='" + c
.toHex() + "'>"
1211 + point
.name
+ "</font></b>:"
1215 this.attr_("labelsDiv").innerHTML
= replace
;
1218 // Draw colored circles over the center of each selected point
1220 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1221 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1223 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1224 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1225 0, 2 * Math
.PI
, false);
1230 this.previousVerticalX_
= canvasx
;
1235 * Set manually set selected dots, and display information about them
1236 * @param int row number that should by highlighted
1237 * false value clears the selection
1240 Dygraph
.prototype.setSelection
= function(row
) {
1241 // Extract the points we've selected
1242 this.selPoints_
= [];
1245 if (row
!== false) {
1246 row
= row
-this.boundaryIds_
[0][0];
1249 if (row
!== false && row
>= 0) {
1250 for (var i
in this.layout_
.datasets
) {
1251 if (row
< this.layout_
.datasets
[i
].length
) {
1252 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1254 pos
+= this.layout_
.datasets
[i
].length
;
1258 if (this.selPoints_
.length
) {
1259 this.lastx_
= this.selPoints_
[0].xval
;
1260 this.updateSelection_();
1263 this.clearSelection();
1269 * The mouse has left the canvas. Clear out whatever artifacts remain
1270 * @param {Object} event the mouseout event from the browser.
1273 Dygraph
.prototype.mouseOut_
= function(event
) {
1274 if (this.attr_("unhighlightCallback")) {
1275 this.attr_("unhighlightCallback")(event
);
1278 if (this.attr_("hideOverlayOnMouseOut")) {
1279 this.clearSelection();
1284 * Remove all selection from the canvas
1287 Dygraph
.prototype.clearSelection
= function() {
1288 // Get rid of the overlay data
1289 var ctx
= this.canvas_
.getContext("2d");
1290 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1291 this.attr_("labelsDiv").innerHTML
= "";
1292 this.selPoints_
= [];
1297 * Returns the number of the currently selected row
1298 * @return int row number, of -1 if nothing is selected
1301 Dygraph
.prototype.getSelection
= function() {
1302 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1306 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1307 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1308 return row
+ this.boundaryIds_
[0][0];
1314 Dygraph
.zeropad
= function(x
) {
1315 if (x
< 10) return "0" + x
; else return "" + x
;
1319 * Return a string version of the hours, minutes and seconds portion of a date.
1320 * @param {Number} date The JavaScript date (ms since epoch)
1321 * @return {String} A time of the form "HH:MM:SS"
1324 Dygraph
.hmsString_
= function(date
) {
1325 var zeropad
= Dygraph
.zeropad
;
1326 var d
= new Date(date
);
1327 if (d
.getSeconds()) {
1328 return zeropad(d
.getHours()) + ":" +
1329 zeropad(d
.getMinutes()) + ":" +
1330 zeropad(d
.getSeconds());
1332 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1337 * Convert a JS date to a string appropriate to display on an axis that
1338 * is displaying values at the stated granularity.
1339 * @param {Date} date The date to format
1340 * @param {Number} granularity One of the Dygraph granularity constants
1341 * @return {String} The formatted date
1344 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1345 if (granularity
>= Dygraph
.MONTHLY
) {
1346 return date
.strftime('%b %y');
1348 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1349 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1350 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1352 return Dygraph
.hmsString_(date
.getTime());
1358 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1359 * @param {Number} date The JavaScript date (ms since epoch)
1360 * @return {String} A date of the form "YYYY/MM/DD"
1363 Dygraph
.dateString_
= function(date
, self
) {
1364 var zeropad
= Dygraph
.zeropad
;
1365 var d
= new Date(date
);
1368 var year
= "" + d
.getFullYear();
1369 // Get a 0 padded month string
1370 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1371 // Get a 0 padded day string
1372 var day
= zeropad(d
.getDate());
1375 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1376 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1378 return year
+ "/" + month + "/" + day
+ ret
;
1382 * Round a number to the specified number of digits past the decimal point.
1383 * @param {Number} num The number to round
1384 * @param {Number} places The number of decimals to which to round
1385 * @return {Number} The rounded number
1388 Dygraph
.round_
= function(num
, places
) {
1389 var shift
= Math
.pow(10, places
);
1390 return Math
.round(num
* shift
)/shift
;
1394 * Fires when there's data available to be graphed.
1395 * @param {String} data Raw CSV data to be plotted
1398 Dygraph
.prototype.loadedEvent_
= function(data
) {
1399 this.rawData_
= this.parseCSV_(data
);
1400 this.drawGraph_(this.rawData_
);
1403 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1404 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1405 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1408 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1411 Dygraph
.prototype.addXTicks_
= function() {
1412 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1413 var startDate
, endDate
;
1414 if (this.dateWindow_
) {
1415 startDate
= this.dateWindow_
[0];
1416 endDate
= this.dateWindow_
[1];
1418 startDate
= this.rawData_
[0][0];
1419 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1422 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1423 this.layout_
.updateOptions({xTicks
: xTicks
});
1426 // Time granularity enumeration
1427 Dygraph
.SECONDLY
= 0;
1428 Dygraph
.TWO_SECONDLY
= 1;
1429 Dygraph
.FIVE_SECONDLY
= 2;
1430 Dygraph
.TEN_SECONDLY
= 3;
1431 Dygraph
.THIRTY_SECONDLY
= 4;
1432 Dygraph
.MINUTELY
= 5;
1433 Dygraph
.TWO_MINUTELY
= 6;
1434 Dygraph
.FIVE_MINUTELY
= 7;
1435 Dygraph
.TEN_MINUTELY
= 8;
1436 Dygraph
.THIRTY_MINUTELY
= 9;
1437 Dygraph
.HOURLY
= 10;
1438 Dygraph
.TWO_HOURLY
= 11;
1439 Dygraph
.SIX_HOURLY
= 12;
1441 Dygraph
.WEEKLY
= 14;
1442 Dygraph
.MONTHLY
= 15;
1443 Dygraph
.QUARTERLY
= 16;
1444 Dygraph
.BIANNUAL
= 17;
1445 Dygraph
.ANNUAL
= 18;
1446 Dygraph
.DECADAL
= 19;
1447 Dygraph
.NUM_GRANULARITIES
= 20;
1449 Dygraph
.SHORT_SPACINGS
= [];
1450 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1451 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1452 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1453 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1454 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1455 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1456 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1457 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1458 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1459 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1460 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1461 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1462 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1463 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1464 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1468 // If we used this time granularity, how many ticks would there be?
1469 // This is only an approximation, but it's generally good enough.
1471 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1472 if (granularity
< Dygraph
.MONTHLY
) {
1473 // Generate one tick mark for every fixed interval of time.
1474 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1475 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1477 var year_mod
= 1; // e.g. to only print one point every 10 years.
1478 var num_months
= 12;
1479 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1480 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1481 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1482 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1484 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1485 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1486 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1492 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1493 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1495 // Returns an array containing {v: millis, label: label} dictionaries.
1497 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1498 var formatter
= this.attr_("xAxisLabelFormatter");
1500 if (granularity
< Dygraph
.MONTHLY
) {
1501 // Generate one tick mark for every fixed interval of time.
1502 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1503 var format
= '%d%b'; // e.g. "1Jan"
1505 // Find a time less than start_time which occurs on a "nice" time boundary
1506 // for this granularity.
1507 var g
= spacing
/ 1000;
1508 var d
= new Date(start_time
);
1509 if (g
<= 60) { // seconds
1510 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1514 if (g
<= 60) { // minutes
1515 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1520 if (g
<= 24) { // days
1521 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1526 if (g
== 7) { // one week
1527 d
.setDate(d
.getDate() - d
.getDay());
1532 start_time
= d
.getTime();
1534 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1535 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1538 // Display a tick mark on the first of a set of months of each year.
1539 // Years get a tick mark iff y % year_mod == 0. This is useful for
1540 // displaying a tick mark once every 10 years, say, on long time scales.
1542 var year_mod
= 1; // e.g. to only print one point every 10 years.
1544 if (granularity
== Dygraph
.MONTHLY
) {
1545 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1546 } else if (granularity
== Dygraph
.QUARTERLY
) {
1547 months
= [ 0, 3, 6, 9 ];
1548 } else if (granularity
== Dygraph
.BIANNUAL
) {
1550 } else if (granularity
== Dygraph
.ANNUAL
) {
1552 } else if (granularity
== Dygraph
.DECADAL
) {
1557 var start_year
= new Date(start_time
).getFullYear();
1558 var end_year
= new Date(end_time
).getFullYear();
1559 var zeropad
= Dygraph
.zeropad
;
1560 for (var i
= start_year
; i
<= end_year
; i
++) {
1561 if (i
% year_mod
!= 0) continue;
1562 for (var j
= 0; j
< months
.length
; j
++) {
1563 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1564 var t
= Date
.parse(date_str
);
1565 if (t
< start_time
|| t
> end_time
) continue;
1566 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1576 * Add ticks to the x-axis based on a date range.
1577 * @param {Number} startDate Start of the date window (millis since epoch)
1578 * @param {Number} endDate End of the date window (millis since epoch)
1579 * @return {Array.<Object>} Array of {label, value} tuples.
1582 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1584 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1585 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1586 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1593 return self
.GetXAxis(startDate
, endDate
, chosen
);
1595 // TODO(danvk): signal error.
1600 * Add ticks when the x axis has numbers on it (instead of dates)
1601 * @param {Number} startDate Start of the date window (millis since epoch)
1602 * @param {Number} endDate End of the date window (millis since epoch)
1603 * @return {Array.<Object>} Array of {label, value} tuples.
1606 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1608 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1609 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1610 // The first spacing greater than pixelsPerYLabel is what we use.
1611 // TODO(danvk): version that works on a log scale.
1612 if (self
.attr_("labelsKMG2")) {
1613 var mults
= [1, 2, 4, 8];
1615 var mults
= [1, 2, 5];
1617 var scale
, low_val
, high_val
, nTicks
;
1618 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1619 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1620 for (var i
= -10; i
< 50; i
++) {
1621 if (self
.attr_("labelsKMG2")) {
1622 var base_scale
= Math
.pow(16, i
);
1624 var base_scale
= Math
.pow(10, i
);
1626 for (var j
= 0; j
< mults
.length
; j
++) {
1627 scale
= base_scale
* mults
[j
];
1628 low_val
= Math
.floor(minV
/ scale
) * scale
;
1629 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1630 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1631 var spacing
= self
.height_
/ nTicks
;
1632 // wish I could break out of both loops at once...
1633 if (spacing
> pixelsPerTick
) break;
1635 if (spacing
> pixelsPerTick
) break;
1638 // Construct labels for the ticks
1642 if (self
.attr_("labelsKMB")) {
1644 k_labels
= [ "K", "M", "B", "T" ];
1646 if (self
.attr_("labelsKMG2")) {
1647 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1649 k_labels
= [ "k", "M", "G", "T" ];
1652 // Allow reverse y-axis if it's explicitly requested.
1653 if (low_val
> high_val
) scale
*= -1;
1655 for (var i
= 0; i
< nTicks
; i
++) {
1656 var tickV
= low_val
+ i
* scale
;
1657 var absTickV
= Math
.abs(tickV
);
1658 var label
= Dygraph
.round_(tickV
, 2);
1659 if (k_labels
.length
) {
1660 // Round up to an appropriate unit.
1662 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1663 if (absTickV
>= n
) {
1664 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1669 ticks
.push( {label
: label
, v
: tickV
} );
1675 * Adds appropriate ticks on the y-axis
1676 * @param {Number} minY The minimum Y value in the data set
1677 * @param {Number} maxY The maximum Y value in the data set
1680 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1681 // Set the number of ticks so that the labels are human-friendly.
1682 // TODO(danvk): make this an attribute as well.
1683 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1684 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1688 // Computes the range of the data series (including confidence intervals).
1689 // series is either [ [x1, y1], [x2, y2], ... ] or
1690 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1691 // Returns [low, high]
1692 Dygraph
.prototype.extremeValues_
= function(series
) {
1693 var minY
= null, maxY
= null;
1695 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1697 // With custom bars, maxY is the max of the high values.
1698 for (var j
= 0; j
< series
.length
; j
++) {
1699 var y
= series
[j
][1][0];
1701 var low
= y
- series
[j
][1][1];
1702 var high
= y
+ series
[j
][1][2];
1703 if (low
> y
) low
= y
; // this can happen with custom bars,
1704 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1705 if (maxY
== null || high
> maxY
) {
1708 if (minY
== null || low
< minY
) {
1713 for (var j
= 0; j
< series
.length
; j
++) {
1714 var y
= series
[j
][1];
1715 if (y
=== null || isNaN(y
)) continue;
1716 if (maxY
== null || y
> maxY
) {
1719 if (minY
== null || y
< minY
) {
1725 return [minY
, maxY
];
1729 * Update the graph with new data. Data is in the format
1730 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1731 * or, if errorBars=true,
1732 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1733 * @param {Array.<Object>} data The data (see above)
1736 Dygraph
.prototype.drawGraph_
= function(data
) {
1737 // This is used to set the second parameter to drawCallback, below.
1738 var is_initial_draw
= this.is_initial_draw_
;
1739 this.is_initial_draw_
= false;
1741 var minY
= null, maxY
= null;
1742 this.layout_
.removeAllDatasets();
1744 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1746 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1748 // Loop over the fields (series). Go from the last to the first,
1749 // because if they're stacked that's how we accumulate the values.
1751 var cumulative_y
= []; // For stacked series.
1754 // Loop over all fields and create datasets
1755 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1756 if (!this.visibility()[i
- 1]) continue;
1759 for (var j
= 0; j
< data
.length
; j
++) {
1760 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1761 var date
= data
[j
][0];
1762 series
.push([date
, data
[j
][i
]]);
1765 series
= this.rollingAverage(series
, this.rollPeriod_
);
1767 // Prune down to the desired range, if necessary (for zooming)
1768 // Because there can be lines going to points outside of the visible area,
1769 // we actually prune to visible points, plus one on either side.
1770 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1771 if (this.dateWindow_
) {
1772 var low
= this.dateWindow_
[0];
1773 var high
= this.dateWindow_
[1];
1775 // TODO(danvk): do binary search instead of linear search.
1776 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1777 var firstIdx
= null, lastIdx
= null;
1778 for (var k
= 0; k
< series
.length
; k
++) {
1779 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1782 if (series
[k
][0] <= high
) {
1786 if (firstIdx
=== null) firstIdx
= 0;
1787 if (firstIdx
> 0) firstIdx
--;
1788 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1789 if (lastIdx
< series
.length
- 1) lastIdx
++;
1790 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1791 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1792 pruned
.push(series
[k
]);
1796 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1799 var extremes
= this.extremeValues_(series
);
1800 var thisMinY
= extremes
[0];
1801 var thisMaxY
= extremes
[1];
1802 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1803 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1806 for (var j
=0; j
<series
.length
; j
++) {
1807 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1810 } else if (this.attr_("stackedGraph")) {
1811 var l
= series
.length
;
1813 for (var j
= 0; j
< l
; j
++) {
1814 // If one data set has a NaN, let all subsequent stacked
1815 // sets inherit the NaN -- only start at 0 for the first set.
1816 var x
= series
[j
][0];
1817 if (cumulative_y
[x
] === undefined
)
1818 cumulative_y
[x
] = 0;
1820 actual_y
= series
[j
][1];
1821 cumulative_y
[x
] += actual_y
;
1823 series
[j
] = [x
, cumulative_y
[x
]]
1825 if (!maxY
|| cumulative_y
[x
] > maxY
)
1826 maxY
= cumulative_y
[x
];
1830 datasets
[i
] = series
;
1833 for (var i
= 1; i
< datasets
.length
; i
++) {
1834 if (!this.visibility()[i
- 1]) continue;
1835 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1838 // Use some heuristics to come up with a good maxY value, unless it's been
1839 // set explicitly by the developer or end-user (via drag)
1840 if (this.valueWindow_
!= null) {
1841 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1842 this.displayedYRange_
= this.valueWindow_
;
1844 // This affects the calculation of span, below.
1845 if (this.attr_("includeZero") && minY
> 0) {
1849 // Add some padding and round up to an integer to be human-friendly.
1850 var span
= maxY
- minY
;
1851 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1852 if (span
== 0) { span
= maxY
; }
1853 var maxAxisY
= maxY
+ 0.1 * span
;
1854 var minAxisY
= minY
- 0.1 * span
;
1856 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1857 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1858 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1860 if (this.attr_("includeZero")) {
1861 if (maxY
< 0) maxAxisY
= 0;
1862 if (minY
> 0) minAxisY
= 0;
1865 this.addYTicks_(minAxisY
, maxAxisY
);
1866 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1871 // Tell PlotKit to use this new data and render itself
1872 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1873 this.layout_
.evaluateWithError();
1874 this.plotter_
.clear();
1875 this.plotter_
.render();
1876 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1877 this.canvas_
.height
);
1879 if (this.attr_("drawCallback") !== null) {
1880 this.attr_("drawCallback")(this, is_initial_draw
);
1885 * Calculates the rolling average of a data set.
1886 * If originalData is [label, val], rolls the average of those.
1887 * If originalData is [label, [, it's interpreted as [value, stddev]
1888 * and the roll is returned in the same form, with appropriately reduced
1889 * stddev for each value.
1890 * Note that this is where fractional input (i.e. '5/10') is converted into
1892 * @param {Array} originalData The data in the appropriate format (see above)
1893 * @param {Number} rollPeriod The number of days over which to average the data
1895 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1896 if (originalData
.length
< 2)
1897 return originalData
;
1898 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1899 var rollingData
= [];
1900 var sigma
= this.attr_("sigma");
1902 if (this.fractions_
) {
1904 var den
= 0; // numerator/denominator
1906 for (var i
= 0; i
< originalData
.length
; i
++) {
1907 num
+= originalData
[i
][1][0];
1908 den
+= originalData
[i
][1][1];
1909 if (i
- rollPeriod
>= 0) {
1910 num
-= originalData
[i
- rollPeriod
][1][0];
1911 den
-= originalData
[i
- rollPeriod
][1][1];
1914 var date
= originalData
[i
][0];
1915 var value
= den
? num
/ den
: 0.0;
1916 if (this.attr_("errorBars")) {
1917 if (this.wilsonInterval_
) {
1918 // For more details on this confidence interval, see:
1919 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1921 var p
= value
< 0 ? 0 : value
, n
= den
;
1922 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1923 var denom
= 1 + sigma
* sigma
/ den
;
1924 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1925 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1926 rollingData
[i
] = [date
,
1927 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1929 rollingData
[i
] = [date
, [0, 0, 0]];
1932 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1933 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1936 rollingData
[i
] = [date
, mult
* value
];
1939 } else if (this.attr_("customBars")) {
1944 for (var i
= 0; i
< originalData
.length
; i
++) {
1945 var data
= originalData
[i
][1];
1947 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1949 if (y
!= null && !isNaN(y
)) {
1955 if (i
- rollPeriod
>= 0) {
1956 var prev
= originalData
[i
- rollPeriod
];
1957 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1964 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1965 1.0 * (mid
- low
) / count
,
1966 1.0 * (high
- mid
) / count
]];
1969 // Calculate the rolling average for the first rollPeriod - 1 points where
1970 // there is not enough data to roll over the full number of days
1971 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1972 if (!this.attr_("errorBars")){
1973 if (rollPeriod
== 1) {
1974 return originalData
;
1977 for (var i
= 0; i
< originalData
.length
; i
++) {
1980 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1981 var y
= originalData
[j
][1];
1982 if (y
== null || isNaN(y
)) continue;
1984 sum
+= originalData
[j
][1];
1987 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1989 rollingData
[i
] = [originalData
[i
][0], null];
1994 for (var i
= 0; i
< originalData
.length
; i
++) {
1998 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1999 var y
= originalData
[j
][1][0];
2000 if (y
== null || isNaN(y
)) continue;
2002 sum
+= originalData
[j
][1][0];
2003 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2006 var stddev
= Math
.sqrt(variance
) / num_ok
;
2007 rollingData
[i
] = [originalData
[i
][0],
2008 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2010 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2020 * Parses a date, returning the number of milliseconds since epoch. This can be
2021 * passed in as an xValueParser in the Dygraph constructor.
2022 * TODO(danvk): enumerate formats that this understands.
2023 * @param {String} A date in YYYYMMDD format.
2024 * @return {Number} Milliseconds since epoch.
2027 Dygraph
.dateParser
= function(dateStr
, self
) {
2030 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2031 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2032 while (dateStrSlashed
.search("-") != -1) {
2033 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2035 d
= Date
.parse(dateStrSlashed
);
2036 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2037 // TODO(danvk): remove support for this format. It's confusing.
2038 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2039 + "/" + dateStr
.substr(6,2);
2040 d
= Date
.parse(dateStrSlashed
);
2042 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2043 // "2009/07/12 12:34:56"
2044 d
= Date
.parse(dateStr
);
2047 if (!d
|| isNaN(d
)) {
2048 self
.error("Couldn't parse " + dateStr
+ " as a date");
2054 * Detects the type of the str (date or numeric) and sets the various
2055 * formatting attributes in this.attrs_ based on this type.
2056 * @param {String} str An x value.
2059 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2061 if (str
.indexOf('-') >= 0 ||
2062 str
.indexOf('/') >= 0 ||
2063 isNaN(parseFloat(str
))) {
2065 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2066 // TODO(danvk): remove support for this format.
2071 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2072 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2073 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2074 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2076 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2077 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2078 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2079 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2084 * Parses a string in a special csv format. We expect a csv file where each
2085 * line is a date point, and the first field in each line is the date string.
2086 * We also expect that all remaining fields represent series.
2087 * if the errorBars attribute is set, then interpret the fields as:
2088 * date, series1, stddev1, series2, stddev2, ...
2089 * @param {Array.<Object>} data See above.
2092 * @return Array.<Object> An array with one entry for each row. These entries
2093 * are an array of cells in that row. The first entry is the parsed x-value for
2094 * the row. The second, third, etc. are the y-values. These can take on one of
2095 * three forms, depending on the CSV and constructor parameters:
2097 * 2. [ value, stddev ]
2098 * 3. [ low value, center value, high value ]
2100 Dygraph
.prototype.parseCSV_
= function(data
) {
2102 var lines
= data
.split("\n");
2104 // Use the default delimiter or fall back to a tab if that makes sense.
2105 var delim
= this.attr_('delimiter');
2106 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2111 if (this.labelsFromCSV_
) {
2113 this.attrs_
.labels
= lines
[0].split(delim
);
2116 // Parse the x as a float or return null if it's not a number.
2117 var parseFloatOrNull
= function(x
) {
2118 var val
= parseFloat(x
);
2119 return isNaN(val
) ? null : val
;
2123 var defaultParserSet
= false; // attempt to auto-detect x value type
2124 var expectedCols
= this.attr_("labels").length
;
2125 var outOfOrder
= false;
2126 for (var i
= start
; i
< lines
.length
; i
++) {
2127 var line
= lines
[i
];
2128 if (line
.length
== 0) continue; // skip blank lines
2129 if (line
[0] == '#') continue; // skip comment lines
2130 var inFields
= line
.split(delim
);
2131 if (inFields
.length
< 2) continue;
2134 if (!defaultParserSet
) {
2135 this.detectTypeFromString_(inFields
[0]);
2136 xParser
= this.attr_("xValueParser");
2137 defaultParserSet
= true;
2139 fields
[0] = xParser(inFields
[0], this);
2141 // If fractions are expected, parse the numbers as "A/B
"
2142 if (this.fractions_) {
2143 for (var j = 1; j < inFields.length; j++) {
2144 // TODO(danvk): figure out an appropriate way to flag parse errors.
2145 var vals = inFields[j].split("/");
2146 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2148 } else if (this.attr_("errorBars
")) {
2149 // If there are error bars, values are (value, stddev) pairs
2150 for (var j = 1; j < inFields.length; j += 2)
2151 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2152 parseFloatOrNull(inFields[j + 1])];
2153 } else if (this.attr_("customBars
")) {
2154 // Bars are a low;center;high tuple
2155 for (var j = 1; j < inFields.length; j++) {
2156 var vals = inFields[j].split(";");
2157 fields[j] = [ parseFloatOrNull(vals[0]),
2158 parseFloatOrNull(vals[1]),
2159 parseFloatOrNull(vals[2]) ];
2162 // Values are just numbers
2163 for (var j = 1; j < inFields.length; j++) {
2164 fields[j] = parseFloatOrNull(inFields[j]);
2167 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2172 if (fields.length != expectedCols) {
2173 this.error("Number of columns
in line
" + i + " (" + fields.length +
2174 ") does not agree
with number of
labels (" + expectedCols +
2180 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2181 ret.sort(function(a,b) { return a[0] - b[0] });
2188 * The user has provided their data as a pre-packaged JS array. If the x values
2189 * are numeric, this is the same as dygraphs' internal format. If the x values
2190 * are dates, we need to convert them from Date objects to ms since epoch.
2191 * @param {Array.<Object>} data
2192 * @return {Array.<Object>} data with numeric x values.
2194 Dygraph.prototype.parseArray_ = function(data) {
2195 // Peek at the first x value to see if it's numeric.
2196 if (data.length == 0) {
2197 this.error("Can
't plot empty data set");
2200 if (data[0].length == 0) {
2201 this.error("Data set cannot contain an empty row");
2205 if (this.attr_("labels") == null) {
2206 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2207 "in the options parameter");
2208 this.attrs_.labels = [ "X" ];
2209 for (var i = 1; i < data[0].length; i++) {
2210 this.attrs_.labels.push("Y" + i);
2214 if (Dygraph.isDateLike(data[0][0])) {
2215 // Some intelligent defaults for a date x-axis.
2216 this.attrs_.xValueFormatter = Dygraph.dateString_;
2217 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2218 this.attrs_.xTicker = Dygraph.dateTicker;
2220 // Assume they're all dates
.
2221 var parsedData
= Dygraph
.clone(data
);
2222 for (var i
= 0; i
< data
.length
; i
++) {
2223 if (parsedData
[i
].length
== 0) {
2224 this.error("Row " + (1 + i
) + " of data is empty");
2227 if (parsedData
[i
][0] == null
2228 || typeof(parsedData
[i
][0].getTime
) != 'function'
2229 || isNaN(parsedData
[i
][0].getTime())) {
2230 this.error("x value in row " + (1 + i
) + " is not a Date");
2233 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2237 // Some intelligent defaults for a numeric x-axis.
2238 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2239 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2245 * Parses a DataTable object from gviz.
2246 * The data is expected to have a first column that is either a date or a
2247 * number. All subsequent columns must be numbers. If there is a clear mismatch
2248 * between this.xValueParser_ and the type of the first column, it will be
2249 * fixed. Fills out rawData_.
2250 * @param {Array.<Object>} data See above.
2253 Dygraph
.prototype.parseDataTable_
= function(data
) {
2254 var cols
= data
.getNumberOfColumns();
2255 var rows
= data
.getNumberOfRows();
2257 var indepType
= data
.getColumnType(0);
2258 if (indepType
== 'date' || indepType
== 'datetime') {
2259 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2260 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2261 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2262 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2263 } else if (indepType
== 'number') {
2264 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2265 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2266 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2267 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2269 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2270 "column 1 of DataTable input (Got '" + indepType
+ "')");
2274 // Array of the column indices which contain data (and not annotations).
2276 var annotationCols
= {}; // data index -> [annotation cols]
2277 var hasAnnotations
= false;
2278 for (var i
= 1; i
< cols
; i
++) {
2279 var type
= data
.getColumnType(i
);
2280 if (type
== 'number') {
2282 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2283 // This is OK -- it's an annotation column.
2284 var dataIdx
= colIdx
[colIdx
.length
- 1];
2285 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2286 annotationCols
[dataIdx
] = [i
];
2288 annotationCols
[dataIdx
].push(i
);
2290 hasAnnotations
= true;
2292 this.error("Only 'number' is supported as a dependent type with Gviz." +
2293 " 'string' is only supported if displayAnnotations is true");
2297 // Read column labels
2298 // TODO(danvk): add support back for errorBars
2299 var labels
= [data
.getColumnLabel(0)];
2300 for (var i
= 0; i
< colIdx
.length
; i
++) {
2301 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2303 this.attrs_
.labels
= labels
;
2304 cols
= labels
.length
;
2307 var outOfOrder
= false;
2308 var annotations
= [];
2309 for (var i
= 0; i
< rows
; i
++) {
2311 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2312 data
.getValue(i
, 0) === null) {
2313 this.warning("Ignoring row " + i
+
2314 " of DataTable because of undefined or null first column.");
2318 if (indepType
== 'date' || indepType
== 'datetime') {
2319 row
.push(data
.getValue(i
, 0).getTime());
2321 row
.push(data
.getValue(i
, 0));
2323 if (!this.attr_("errorBars")) {
2324 for (var j
= 0; j
< colIdx
.length
; j
++) {
2325 var col
= colIdx
[j
];
2326 row
.push(data
.getValue(i
, col
));
2327 if (hasAnnotations
&&
2328 annotationCols
.hasOwnProperty(col
) &&
2329 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2331 ann
.series
= data
.getColumnLabel(col
);
2333 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2335 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2336 if (k
) ann
.text
+= "\n";
2337 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2339 annotations
.push(ann
);
2343 for (var j
= 0; j
< cols
- 1; j
++) {
2344 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2347 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2354 this.warn("DataTable is out of order; order it correctly to speed loading.");
2355 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2357 this.rawData_
= ret
;
2359 if (annotations
.length
> 0) {
2360 this.setAnnotations(annotations
, true);
2364 // These functions are all based on MochiKit.
2365 Dygraph
.update
= function (self
, o
) {
2366 if (typeof(o
) != 'undefined' && o
!== null) {
2368 if (o
.hasOwnProperty(k
)) {
2376 Dygraph
.isArrayLike
= function (o
) {
2377 var typ
= typeof(o
);
2379 (typ
!= 'object' && !(typ
== 'function' &&
2380 typeof(o
.item
) == 'function')) ||
2382 typeof(o
.length
) != 'number' ||
2390 Dygraph
.isDateLike
= function (o
) {
2391 if (typeof(o
) != "object" || o
=== null ||
2392 typeof(o
.getTime
) != 'function') {
2398 Dygraph
.clone
= function(o
) {
2399 // TODO(danvk): figure out how MochiKit's version works
2401 for (var i
= 0; i
< o
.length
; i
++) {
2402 if (Dygraph
.isArrayLike(o
[i
])) {
2403 r
.push(Dygraph
.clone(o
[i
]));
2413 * Get the CSV data. If it's in a function, call that function. If it's in a
2414 * file, do an XMLHttpRequest to get it.
2417 Dygraph
.prototype.start_
= function() {
2418 if (typeof this.file_
== 'function') {
2419 // CSV string. Pretend we got it via XHR.
2420 this.loadedEvent_(this.file_());
2421 } else if (Dygraph
.isArrayLike(this.file_
)) {
2422 this.rawData_
= this.parseArray_(this.file_
);
2423 this.drawGraph_(this.rawData_
);
2424 } else if (typeof this.file_
== 'object' &&
2425 typeof this.file_
.getColumnRange
== 'function') {
2426 // must be a DataTable from gviz.
2427 this.parseDataTable_(this.file_
);
2428 this.drawGraph_(this.rawData_
);
2429 } else if (typeof this.file_
== 'string') {
2430 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2431 if (this.file_
.indexOf('\n') >= 0) {
2432 this.loadedEvent_(this.file_
);
2434 var req
= new XMLHttpRequest();
2436 req
.onreadystatechange
= function () {
2437 if (req
.readyState
== 4) {
2438 if (req
.status
== 200) {
2439 caller
.loadedEvent_(req
.responseText
);
2444 req
.open("GET", this.file_
, true);
2448 this.error("Unknown data format: " + (typeof this.file_
));
2453 * Changes various properties of the graph. These can include:
2455 * <li>file: changes the source data for the graph</li>
2456 * <li>errorBars: changes whether the data contains stddev</li>
2458 * @param {Object} attrs The new properties and values
2460 Dygraph
.prototype.updateOptions
= function(attrs
) {
2461 // TODO(danvk): this is a mess. Rethink this function.
2462 if (attrs
.rollPeriod
) {
2463 this.rollPeriod_
= attrs
.rollPeriod
;
2465 if (attrs
.dateWindow
) {
2466 this.dateWindow_
= attrs
.dateWindow
;
2468 if (attrs
.valueRange
) {
2469 this.valueRange_
= attrs
.valueRange
;
2471 Dygraph
.update(this.user_attrs_
, attrs
);
2472 Dygraph
.update(this.renderOptions_
, attrs
);
2474 this.labelsFromCSV_
= (this.attr_("labels") == null);
2476 // TODO(danvk): this doesn't match the constructor logic
2477 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2478 if (attrs
['file']) {
2479 this.file_
= attrs
['file'];
2482 this.drawGraph_(this.rawData_
);
2487 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2488 * containing div (which has presumably changed size since the dygraph was
2489 * instantiated. If the width/height are specified, the div will be resized.
2491 * This is far more efficient than destroying and re-instantiating a
2492 * Dygraph, since it doesn't have to reparse the underlying data.
2494 * @param {Number} width Width (in pixels)
2495 * @param {Number} height Height (in pixels)
2497 Dygraph
.prototype.resize
= function(width
, height
) {
2498 if (this.resize_lock
) {
2501 this.resize_lock
= true;
2503 if ((width
=== null) != (height
=== null)) {
2504 this.warn("Dygraph.resize() should be called with zero parameters or " +
2505 "two non-NULL parameters. Pretending it was zero.");
2506 width
= height
= null;
2509 // TODO(danvk): there should be a clear() method.
2510 this.maindiv_
.innerHTML
= "";
2511 this.attrs_
.labelsDiv
= null;
2514 this.maindiv_
.style
.width
= width
+ "px";
2515 this.maindiv_
.style
.height
= height
+ "px";
2516 this.width_
= width
;
2517 this.height_
= height
;
2519 this.width_
= this.maindiv_
.offsetWidth
;
2520 this.height_
= this.maindiv_
.offsetHeight
;
2523 this.createInterface_();
2524 this.drawGraph_(this.rawData_
);
2526 this.resize_lock
= false;
2530 * Adjusts the number of days in the rolling average. Updates the graph to
2531 * reflect the new averaging period.
2532 * @param {Number} length Number of days over which to average the data.
2534 Dygraph
.prototype.adjustRoll
= function(length
) {
2535 this.rollPeriod_
= length
;
2536 this.drawGraph_(this.rawData_
);
2540 * Returns a boolean array of visibility statuses.
2542 Dygraph
.prototype.visibility
= function() {
2543 // Do lazy-initialization, so that this happens after we know the number of
2545 if (!this.attr_("visibility")) {
2546 this.attrs_
["visibility"] = [];
2548 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2549 this.attr_("visibility").push(true);
2551 return this.attr_("visibility");
2555 * Changes the visiblity of a series.
2557 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2558 var x
= this.visibility();
2559 if (num
< 0 && num
>= x
.length
) {
2560 this.warn("invalid series number in setVisibility: " + num
);
2563 this.drawGraph_(this.rawData_
);
2568 * Update the list of annotations and redraw the chart.
2570 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2571 this.annotations_
= ann
;
2572 this.layout_
.setAnnotations(this.annotations_
);
2573 if (!suppressDraw
) {
2574 this.drawGraph_(this.rawData_
);
2579 * Return the list of annotations.
2581 Dygraph
.prototype.annotations
= function() {
2582 return this.annotations_
;
2585 Dygraph
.addAnnotationRule
= function() {
2586 if (Dygraph
.addedAnnotationCSS
) return;
2589 if (document
.styleSheets
.length
> 0) {
2590 mysheet
= document
.styleSheets
[0];
2592 var styleSheetElement
= document
.createElement("style");
2593 styleSheetElement
.type
= "text/css";
2594 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2595 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2596 if (document
.styleSheets
[i
].disabled
) continue;
2597 mysheet
= document
.styleSheets
[i
];
2601 var rule
= "border: 1px solid black; " +
2602 "background-color: white; " +
2603 "text-align: center;";
2604 if (mysheet
.insertRule
) { // Firefox
2605 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2606 } else if (mysheet
.addRule
) { // IE
2607 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2610 Dygraph
.addedAnnotationCSS
= true;
2614 * Create a new canvas element. This is more complex than a simple
2615 * document.createElement("canvas") because of IE and excanvas.
2617 Dygraph
.createCanvas
= function() {
2618 var canvas
= document
.createElement("canvas");
2620 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2622 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2630 * A wrapper around Dygraph that implements the gviz API.
2631 * @param {Object} container The DOM object the visualization should live in.
2633 Dygraph
.GVizChart
= function(container
) {
2634 this.container
= container
;
2637 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2638 this.container
.innerHTML
= '';
2639 this.date_graph
= new Dygraph(this.container
, data
, options
);
2643 * Google charts compatible setSelection
2644 * Only row selection is supported, all points in the row will be highlighted
2645 * @param {Array} array of the selected cells
2648 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2650 if (selection_array
.length
) {
2651 row
= selection_array
[0].row
;
2653 this.date_graph
.setSelection(row
);
2657 * Google charts compatible getSelection implementation
2658 * @return {Array} array of the selected cells
2661 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2664 var row
= this.date_graph
.getSelection();
2666 if (row
< 0) return selection
;
2669 for (var i
in this.date_graph
.layout_
.datasets
) {
2670 selection
.push({row
: row
, column
: col
});
2677 // Older pages may still use this name.
2678 DateGraph
= Dygraph
;