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 // if a y-axis as been defined then the y-axis scale is maintained.
814 // otherwise don't set a value window, thereby forcing automatic y-axis
816 if (self
.valueWindow_
) {
817 var maxValue
= draggingValue
+ (dragEndY
/ self
.height_
) * valueRange
;
818 var minValue
= maxValue
- valueRange
;
819 self
.valueWindow_
= [ minValue
, maxValue
];
821 self
.drawGraph_(self
.rawData_
);
825 // Track the beginning of drag events
826 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
827 px
= Dygraph
.findPosX(self
.canvas_
);
828 py
= Dygraph
.findPosY(self
.canvas_
);
829 dragStartX
= getX(event
);
830 dragStartY
= getY(event
);
832 if (event
.altKey
|| event
.shiftKey
) {
833 // have to be zoomed in to pan.
834 if (!self
.dateWindow_
&& !self
.valueRange_
) return;
837 var xRange
= self
.xAxisRange();
838 dateRange
= xRange
[1] - xRange
[0];
839 var yRange
= self
.yAxisRange();
840 valueRange
= yRange
[1] - yRange
[0];
842 // TODO(konigsberg): Switch from all this math to toDataCoords?
843 // Seems to work for the dragging value.
844 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
846 var r
= self
.toDataCoords(null, dragStartY
);
847 draggingValue
= r
[1];
853 // If the user releases the mouse button during a drag, but not over the
854 // canvas, then it doesn't count as a zooming action.
855 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
856 if (isZooming
|| isPanning
) {
865 draggingValue
= null;
871 // Temporarily cancel the dragging event when the mouse leaves the graph
872 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
879 // If the mouse is released on the canvas during a drag event, then it's a
880 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
881 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
884 dragEndX
= getX(event
);
885 dragEndY
= getY(event
);
886 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
887 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
889 if (regionWidth
< 2 && regionHeight
< 2 &&
890 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
891 // TODO(danvk): pass along more info about the points, e.g. 'x'
892 if (self
.attr_('clickCallback') != null) {
893 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
895 if (self
.attr_('pointClickCallback')) {
896 // check if the click was on a particular point.
898 var closestDistance
= 0;
899 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
900 var p
= self
.selPoints_
[i
];
901 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
902 Math
.pow(p
.canvasy
- dragEndY
, 2);
903 if (closestIdx
== -1 || distance
< closestDistance
) {
904 closestDistance
= distance
;
909 // Allow any click within two pixels of the dot.
910 var radius
= self
.attr_('highlightCircleSize') + 2;
911 if (closestDistance
<= 5 * 5) {
912 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
917 if (regionWidth
>= 10 && regionWidth
> regionHeight
) {
918 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
919 Math
.max(dragStartX
, dragEndX
));
920 } else if (regionHeight
>= 10 && regionHeight
> regionWidth
){
921 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
922 Math
.max(dragStartY
, dragEndY
));
924 self
.canvas_
.getContext("2d").clearRect(0, 0,
926 self
.canvas_
.height
);
936 draggingValue
= null;
942 // Double-clicking zooms back out
943 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
944 // Disable zooming out if panning.
945 if (event
.altKey
|| event
.shiftKey
) return;
952 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
953 * up any previous zoom rectangles that were drawn. This could be optimized to
954 * avoid extra redrawing, but it's tricky to avoid interactions with the status
957 * @param {Number} direction the direction of the zoom rectangle. Acceptable
958 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
959 * @param {Number} startX The X position where the drag started, in canvas
961 * @param {Number} endX The current X position of the drag, in canvas coords.
962 * @param {Number} startY The Y position where the drag started, in canvas
964 * @param {Number} endY The current Y position of the drag, in canvas coords.
965 * @param {Number} prevDirection the value of direction on the previous call to
966 * this function. Used to avoid excess redrawing
967 * @param {Number} prevEndX The value of endX on the previous call to this
968 * function. Used to avoid excess redrawing
969 * @param {Number} prevEndY The value of endY on the previous call to this
970 * function. Used to avoid excess redrawing
973 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
974 prevDirection
, prevEndX
, prevEndY
) {
975 var ctx
= this.canvas_
.getContext("2d");
977 // Clean up from the previous rect if necessary
978 if (prevDirection
== Dygraph
.HORIZONTAL
) {
979 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
980 Math
.abs(startX
- prevEndX
), this.height_
);
981 } else if (prevDirection
== Dygraph
.VERTICAL
){
982 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
983 this.width_
, Math
.abs(startY
- prevEndY
));
986 // Draw a light-grey rectangle to show the new viewing area
987 if (direction
== Dygraph
.HORIZONTAL
) {
988 if (endX
&& startX
) {
989 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
990 ctx
.fillRect(Math
.min(startX
, endX
), 0,
991 Math
.abs(endX
- startX
), this.height_
);
994 if (direction
== Dygraph
.VERTICAL
) {
995 if (endY
&& startY
) {
996 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
997 ctx
.fillRect(0, Math
.min(startY
, endY
),
998 this.width_
, Math
.abs(endY
- startY
));
1004 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1005 * the canvas. The exact zoom window may be slightly larger if there are no data
1006 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1007 * which accepts dates that match the raw data. This function redraws the graph.
1009 * @param {Number} lowX The leftmost pixel value that should be visible.
1010 * @param {Number} highX The rightmost pixel value that should be visible.
1013 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1014 // Find the earliest and latest dates contained in this canvasx range.
1015 // Convert the call to date ranges of the raw data.
1016 var r
= this.toDataCoords(lowX
, null);
1018 r
= this.toDataCoords(highX
, null);
1020 this.doZoomXDates_(minDate
, maxDate
);
1024 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1025 * method with doZoomX which accepts pixel coordinates. This function redraws
1028 * @param {Number} minDate The minimum date that should be visible.
1029 * @param {Number} maxDate The maximum date that should be visible.
1032 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1033 this.dateWindow_
= [minDate
, maxDate
];
1034 this.drawGraph_(this.rawData_
);
1035 if (this.attr_("zoomCallback")) {
1036 var yRange
= this.yAxisRange();
1037 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1042 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1043 * the canvas. The exact zoom window may be slightly larger if there are no
1044 * data points near lowY or highY. Don't confuse this function with
1045 * doZoomYValues, which accepts parameters that match the raw data. This
1046 * function redraws the graph.
1048 * @param {Number} lowY The topmost pixel value that should be visible.
1049 * @param {Number} highY The lowest pixel value that should be visible.
1052 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1053 // Find the highest and lowest values in pixel range.
1054 var r
= this.toDataCoords(null, lowY
);
1055 var maxValue
= r
[1];
1056 r
= this.toDataCoords(null, highY
);
1057 var minValue
= r
[1];
1059 this.doZoomYValues_(minValue
, maxValue
);
1063 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1064 * method with doZoomY which accepts pixel coordinates. This function redraws
1067 * @param {Number} minValue The minimum Value that should be visible.
1068 * @param {Number} maxValue The maximum value that should be visible.
1071 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1072 this.valueWindow_
= [minValue
, maxValue
];
1073 this.drawGraph_(this.rawData_
);
1074 if (this.attr_("zoomCallback")) {
1075 var xRange
= this.xAxisRange();
1076 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1081 * Reset the zoom to the original view coordinates. This is the same as
1082 * double-clicking on the graph.
1086 Dygraph
.prototype.doUnzoom_
= function() {
1088 if (this.dateWindow_
!= null) {
1090 this.dateWindow_
= null;
1092 if (this.valueWindow_
!= null) {
1094 this.valueWindow_
= this.valueRange_
;
1098 // Putting the drawing operation before the callback because it resets
1100 this.drawGraph_(this.rawData_
);
1101 if (this.attr_("zoomCallback")) {
1102 var minDate
= this.rawData_
[0][0];
1103 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1104 var minValue
= this.yAxisRange()[0];
1105 var maxValue
= this.yAxisRange()[1];
1106 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1112 * When the mouse moves in the canvas, display information about a nearby data
1113 * point and draw dots over those points in the data series. This function
1114 * takes care of cleanup of previously-drawn dots.
1115 * @param {Object} event The mousemove event from the browser.
1118 Dygraph
.prototype.mouseMove_
= function(event
) {
1119 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1120 var points
= this.layout_
.points
;
1125 // Loop through all the points and find the date nearest to our current
1127 var minDist
= 1e+100;
1129 for (var i
= 0; i
< points
.length
; i
++) {
1130 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1131 if (dist
> minDist
) continue;
1135 if (idx
>= 0) lastx
= points
[idx
].xval
;
1136 // Check that you can really highlight the last day's data
1137 if (canvasx
> points
[points
.length
-1].canvasx
)
1138 lastx
= points
[points
.length
-1].xval
;
1140 // Extract the points we've selected
1141 this.selPoints_
= [];
1142 var l
= points
.length
;
1143 if (!this.attr_("stackedGraph")) {
1144 for (var i
= 0; i
< l
; i
++) {
1145 if (points
[i
].xval
== lastx
) {
1146 this.selPoints_
.push(points
[i
]);
1150 // Need to 'unstack' points starting from the bottom
1151 var cumulative_sum
= 0;
1152 for (var i
= l
- 1; i
>= 0; i
--) {
1153 if (points
[i
].xval
== lastx
) {
1154 var p
= {}; // Clone the point since we modify it
1155 for (var k
in points
[i
]) {
1156 p
[k
] = points
[i
][k
];
1158 p
.yval
-= cumulative_sum
;
1159 cumulative_sum
+= p
.yval
;
1160 this.selPoints_
.push(p
);
1163 this.selPoints_
.reverse();
1166 if (this.attr_("highlightCallback")) {
1167 var px
= this.lastx_
;
1168 if (px
!== null && lastx
!= px
) {
1169 // only fire if the selected point has changed.
1170 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1174 // Save last x position for callbacks.
1175 this.lastx_
= lastx
;
1177 this.updateSelection_();
1181 * Draw dots over the selectied points in the data series. This function
1182 * takes care of cleanup of previously-drawn dots.
1185 Dygraph
.prototype.updateSelection_
= function() {
1186 // Clear the previously drawn vertical, if there is one
1187 var circleSize
= this.attr_('highlightCircleSize');
1188 var ctx
= this.canvas_
.getContext("2d");
1189 if (this.previousVerticalX_
>= 0) {
1190 var px
= this.previousVerticalX_
;
1191 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
1194 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1196 if (this.selPoints_
.length
> 0) {
1197 var canvasx
= this.selPoints_
[0].canvasx
;
1199 // Set the status message to indicate the selected point(s)
1200 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1201 var fmtFunc
= this.attr_('yValueFormatter');
1202 var clen
= this.colors_
.length
;
1204 if (this.attr_('showLabelsOnHighlight')) {
1205 // Set the status message to indicate the selected point(s)
1206 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1207 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1208 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1209 if (this.attr_("labelsSeparateLines")) {
1212 var point
= this.selPoints_
[i
];
1213 var c
= new RGBColor(this.colors_
[i
%clen
]);
1214 var yval
= fmtFunc(point
.yval
);
1215 replace
+= " <b><font color='" + c
.toHex() + "'>"
1216 + point
.name
+ "</font></b>:"
1220 this.attr_("labelsDiv").innerHTML
= replace
;
1223 // Draw colored circles over the center of each selected point
1225 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1226 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1228 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1229 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1230 0, 2 * Math
.PI
, false);
1235 this.previousVerticalX_
= canvasx
;
1240 * Set manually set selected dots, and display information about them
1241 * @param int row number that should by highlighted
1242 * false value clears the selection
1245 Dygraph
.prototype.setSelection
= function(row
) {
1246 // Extract the points we've selected
1247 this.selPoints_
= [];
1250 if (row
!== false) {
1251 row
= row
-this.boundaryIds_
[0][0];
1254 if (row
!== false && row
>= 0) {
1255 for (var i
in this.layout_
.datasets
) {
1256 if (row
< this.layout_
.datasets
[i
].length
) {
1257 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1259 pos
+= this.layout_
.datasets
[i
].length
;
1263 if (this.selPoints_
.length
) {
1264 this.lastx_
= this.selPoints_
[0].xval
;
1265 this.updateSelection_();
1268 this.clearSelection();
1274 * The mouse has left the canvas. Clear out whatever artifacts remain
1275 * @param {Object} event the mouseout event from the browser.
1278 Dygraph
.prototype.mouseOut_
= function(event
) {
1279 if (this.attr_("unhighlightCallback")) {
1280 this.attr_("unhighlightCallback")(event
);
1283 if (this.attr_("hideOverlayOnMouseOut")) {
1284 this.clearSelection();
1289 * Remove all selection from the canvas
1292 Dygraph
.prototype.clearSelection
= function() {
1293 // Get rid of the overlay data
1294 var ctx
= this.canvas_
.getContext("2d");
1295 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1296 this.attr_("labelsDiv").innerHTML
= "";
1297 this.selPoints_
= [];
1302 * Returns the number of the currently selected row
1303 * @return int row number, of -1 if nothing is selected
1306 Dygraph
.prototype.getSelection
= function() {
1307 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1311 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1312 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1313 return row
+ this.boundaryIds_
[0][0];
1319 Dygraph
.zeropad
= function(x
) {
1320 if (x
< 10) return "0" + x
; else return "" + x
;
1324 * Return a string version of the hours, minutes and seconds portion of a date.
1325 * @param {Number} date The JavaScript date (ms since epoch)
1326 * @return {String} A time of the form "HH:MM:SS"
1329 Dygraph
.hmsString_
= function(date
) {
1330 var zeropad
= Dygraph
.zeropad
;
1331 var d
= new Date(date
);
1332 if (d
.getSeconds()) {
1333 return zeropad(d
.getHours()) + ":" +
1334 zeropad(d
.getMinutes()) + ":" +
1335 zeropad(d
.getSeconds());
1337 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1342 * Convert a JS date to a string appropriate to display on an axis that
1343 * is displaying values at the stated granularity.
1344 * @param {Date} date The date to format
1345 * @param {Number} granularity One of the Dygraph granularity constants
1346 * @return {String} The formatted date
1349 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1350 if (granularity
>= Dygraph
.MONTHLY
) {
1351 return date
.strftime('%b %y');
1353 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1354 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1355 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1357 return Dygraph
.hmsString_(date
.getTime());
1363 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1364 * @param {Number} date The JavaScript date (ms since epoch)
1365 * @return {String} A date of the form "YYYY/MM/DD"
1368 Dygraph
.dateString_
= function(date
, self
) {
1369 var zeropad
= Dygraph
.zeropad
;
1370 var d
= new Date(date
);
1373 var year
= "" + d
.getFullYear();
1374 // Get a 0 padded month string
1375 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1376 // Get a 0 padded day string
1377 var day
= zeropad(d
.getDate());
1380 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1381 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1383 return year
+ "/" + month + "/" + day
+ ret
;
1387 * Round a number to the specified number of digits past the decimal point.
1388 * @param {Number} num The number to round
1389 * @param {Number} places The number of decimals to which to round
1390 * @return {Number} The rounded number
1393 Dygraph
.round_
= function(num
, places
) {
1394 var shift
= Math
.pow(10, places
);
1395 return Math
.round(num
* shift
)/shift
;
1399 * Fires when there's data available to be graphed.
1400 * @param {String} data Raw CSV data to be plotted
1403 Dygraph
.prototype.loadedEvent_
= function(data
) {
1404 this.rawData_
= this.parseCSV_(data
);
1405 this.drawGraph_(this.rawData_
);
1408 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1409 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1410 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1413 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1416 Dygraph
.prototype.addXTicks_
= function() {
1417 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1418 var startDate
, endDate
;
1419 if (this.dateWindow_
) {
1420 startDate
= this.dateWindow_
[0];
1421 endDate
= this.dateWindow_
[1];
1423 startDate
= this.rawData_
[0][0];
1424 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1427 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1428 this.layout_
.updateOptions({xTicks
: xTicks
});
1431 // Time granularity enumeration
1432 Dygraph
.SECONDLY
= 0;
1433 Dygraph
.TWO_SECONDLY
= 1;
1434 Dygraph
.FIVE_SECONDLY
= 2;
1435 Dygraph
.TEN_SECONDLY
= 3;
1436 Dygraph
.THIRTY_SECONDLY
= 4;
1437 Dygraph
.MINUTELY
= 5;
1438 Dygraph
.TWO_MINUTELY
= 6;
1439 Dygraph
.FIVE_MINUTELY
= 7;
1440 Dygraph
.TEN_MINUTELY
= 8;
1441 Dygraph
.THIRTY_MINUTELY
= 9;
1442 Dygraph
.HOURLY
= 10;
1443 Dygraph
.TWO_HOURLY
= 11;
1444 Dygraph
.SIX_HOURLY
= 12;
1446 Dygraph
.WEEKLY
= 14;
1447 Dygraph
.MONTHLY
= 15;
1448 Dygraph
.QUARTERLY
= 16;
1449 Dygraph
.BIANNUAL
= 17;
1450 Dygraph
.ANNUAL
= 18;
1451 Dygraph
.DECADAL
= 19;
1452 Dygraph
.NUM_GRANULARITIES
= 20;
1454 Dygraph
.SHORT_SPACINGS
= [];
1455 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1456 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1457 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1458 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1459 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1460 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1461 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1462 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1463 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1464 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1465 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1466 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1467 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1468 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1469 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1473 // If we used this time granularity, how many ticks would there be?
1474 // This is only an approximation, but it's generally good enough.
1476 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1477 if (granularity
< Dygraph
.MONTHLY
) {
1478 // Generate one tick mark for every fixed interval of time.
1479 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1480 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1482 var year_mod
= 1; // e.g. to only print one point every 10 years.
1483 var num_months
= 12;
1484 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1485 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1486 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1487 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1489 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1490 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1491 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1497 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1498 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1500 // Returns an array containing {v: millis, label: label} dictionaries.
1502 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1503 var formatter
= this.attr_("xAxisLabelFormatter");
1505 if (granularity
< Dygraph
.MONTHLY
) {
1506 // Generate one tick mark for every fixed interval of time.
1507 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1508 var format
= '%d%b'; // e.g. "1Jan"
1510 // Find a time less than start_time which occurs on a "nice" time boundary
1511 // for this granularity.
1512 var g
= spacing
/ 1000;
1513 var d
= new Date(start_time
);
1514 if (g
<= 60) { // seconds
1515 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1519 if (g
<= 60) { // minutes
1520 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1525 if (g
<= 24) { // days
1526 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1531 if (g
== 7) { // one week
1532 d
.setDate(d
.getDate() - d
.getDay());
1537 start_time
= d
.getTime();
1539 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1540 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1543 // Display a tick mark on the first of a set of months of each year.
1544 // Years get a tick mark iff y % year_mod == 0. This is useful for
1545 // displaying a tick mark once every 10 years, say, on long time scales.
1547 var year_mod
= 1; // e.g. to only print one point every 10 years.
1549 if (granularity
== Dygraph
.MONTHLY
) {
1550 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1551 } else if (granularity
== Dygraph
.QUARTERLY
) {
1552 months
= [ 0, 3, 6, 9 ];
1553 } else if (granularity
== Dygraph
.BIANNUAL
) {
1555 } else if (granularity
== Dygraph
.ANNUAL
) {
1557 } else if (granularity
== Dygraph
.DECADAL
) {
1562 var start_year
= new Date(start_time
).getFullYear();
1563 var end_year
= new Date(end_time
).getFullYear();
1564 var zeropad
= Dygraph
.zeropad
;
1565 for (var i
= start_year
; i
<= end_year
; i
++) {
1566 if (i
% year_mod
!= 0) continue;
1567 for (var j
= 0; j
< months
.length
; j
++) {
1568 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1569 var t
= Date
.parse(date_str
);
1570 if (t
< start_time
|| t
> end_time
) continue;
1571 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1581 * Add ticks to the x-axis based on a date range.
1582 * @param {Number} startDate Start of the date window (millis since epoch)
1583 * @param {Number} endDate End of the date window (millis since epoch)
1584 * @return {Array.<Object>} Array of {label, value} tuples.
1587 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1589 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1590 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1591 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1598 return self
.GetXAxis(startDate
, endDate
, chosen
);
1600 // TODO(danvk): signal error.
1605 * Add ticks when the x axis has numbers on it (instead of dates)
1606 * @param {Number} startDate Start of the date window (millis since epoch)
1607 * @param {Number} endDate End of the date window (millis since epoch)
1608 * @return {Array.<Object>} Array of {label, value} tuples.
1611 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1613 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1614 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1615 // The first spacing greater than pixelsPerYLabel is what we use.
1616 // TODO(danvk): version that works on a log scale.
1617 if (self
.attr_("labelsKMG2")) {
1618 var mults
= [1, 2, 4, 8];
1620 var mults
= [1, 2, 5];
1622 var scale
, low_val
, high_val
, nTicks
;
1623 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1624 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1625 for (var i
= -10; i
< 50; i
++) {
1626 if (self
.attr_("labelsKMG2")) {
1627 var base_scale
= Math
.pow(16, i
);
1629 var base_scale
= Math
.pow(10, i
);
1631 for (var j
= 0; j
< mults
.length
; j
++) {
1632 scale
= base_scale
* mults
[j
];
1633 low_val
= Math
.floor(minV
/ scale
) * scale
;
1634 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1635 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1636 var spacing
= self
.height_
/ nTicks
;
1637 // wish I could break out of both loops at once...
1638 if (spacing
> pixelsPerTick
) break;
1640 if (spacing
> pixelsPerTick
) break;
1643 // Construct labels for the ticks
1647 if (self
.attr_("labelsKMB")) {
1649 k_labels
= [ "K", "M", "B", "T" ];
1651 if (self
.attr_("labelsKMG2")) {
1652 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1654 k_labels
= [ "k", "M", "G", "T" ];
1657 // Allow reverse y-axis if it's explicitly requested.
1658 if (low_val
> high_val
) scale
*= -1;
1660 for (var i
= 0; i
< nTicks
; i
++) {
1661 var tickV
= low_val
+ i
* scale
;
1662 var absTickV
= Math
.abs(tickV
);
1663 var label
= Dygraph
.round_(tickV
, 2);
1664 if (k_labels
.length
) {
1665 // Round up to an appropriate unit.
1667 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1668 if (absTickV
>= n
) {
1669 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1674 ticks
.push( {label
: label
, v
: tickV
} );
1680 * Adds appropriate ticks on the y-axis
1681 * @param {Number} minY The minimum Y value in the data set
1682 * @param {Number} maxY The maximum Y value in the data set
1685 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1686 // Set the number of ticks so that the labels are human-friendly.
1687 // TODO(danvk): make this an attribute as well.
1688 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1689 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1693 // Computes the range of the data series (including confidence intervals).
1694 // series is either [ [x1, y1], [x2, y2], ... ] or
1695 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1696 // Returns [low, high]
1697 Dygraph
.prototype.extremeValues_
= function(series
) {
1698 var minY
= null, maxY
= null;
1700 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1702 // With custom bars, maxY is the max of the high values.
1703 for (var j
= 0; j
< series
.length
; j
++) {
1704 var y
= series
[j
][1][0];
1706 var low
= y
- series
[j
][1][1];
1707 var high
= y
+ series
[j
][1][2];
1708 if (low
> y
) low
= y
; // this can happen with custom bars,
1709 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1710 if (maxY
== null || high
> maxY
) {
1713 if (minY
== null || low
< minY
) {
1718 for (var j
= 0; j
< series
.length
; j
++) {
1719 var y
= series
[j
][1];
1720 if (y
=== null || isNaN(y
)) continue;
1721 if (maxY
== null || y
> maxY
) {
1724 if (minY
== null || y
< minY
) {
1730 return [minY
, maxY
];
1734 * Update the graph with new data. Data is in the format
1735 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1736 * or, if errorBars=true,
1737 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1738 * @param {Array.<Object>} data The data (see above)
1741 Dygraph
.prototype.drawGraph_
= function(data
) {
1742 // This is used to set the second parameter to drawCallback, below.
1743 var is_initial_draw
= this.is_initial_draw_
;
1744 this.is_initial_draw_
= false;
1746 var minY
= null, maxY
= null;
1747 this.layout_
.removeAllDatasets();
1749 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1751 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1753 // Loop over the fields (series). Go from the last to the first,
1754 // because if they're stacked that's how we accumulate the values.
1756 var cumulative_y
= []; // For stacked series.
1759 // Loop over all fields and create datasets
1760 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1761 if (!this.visibility()[i
- 1]) continue;
1764 for (var j
= 0; j
< data
.length
; j
++) {
1765 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1766 var date
= data
[j
][0];
1767 series
.push([date
, data
[j
][i
]]);
1770 series
= this.rollingAverage(series
, this.rollPeriod_
);
1772 // Prune down to the desired range, if necessary (for zooming)
1773 // Because there can be lines going to points outside of the visible area,
1774 // we actually prune to visible points, plus one on either side.
1775 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1776 if (this.dateWindow_
) {
1777 var low
= this.dateWindow_
[0];
1778 var high
= this.dateWindow_
[1];
1780 // TODO(danvk): do binary search instead of linear search.
1781 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1782 var firstIdx
= null, lastIdx
= null;
1783 for (var k
= 0; k
< series
.length
; k
++) {
1784 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1787 if (series
[k
][0] <= high
) {
1791 if (firstIdx
=== null) firstIdx
= 0;
1792 if (firstIdx
> 0) firstIdx
--;
1793 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1794 if (lastIdx
< series
.length
- 1) lastIdx
++;
1795 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1796 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1797 pruned
.push(series
[k
]);
1801 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1804 var extremes
= this.extremeValues_(series
);
1805 var thisMinY
= extremes
[0];
1806 var thisMaxY
= extremes
[1];
1807 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1808 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1811 for (var j
=0; j
<series
.length
; j
++) {
1812 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1815 } else if (this.attr_("stackedGraph")) {
1816 var l
= series
.length
;
1818 for (var j
= 0; j
< l
; j
++) {
1819 // If one data set has a NaN, let all subsequent stacked
1820 // sets inherit the NaN -- only start at 0 for the first set.
1821 var x
= series
[j
][0];
1822 if (cumulative_y
[x
] === undefined
)
1823 cumulative_y
[x
] = 0;
1825 actual_y
= series
[j
][1];
1826 cumulative_y
[x
] += actual_y
;
1828 series
[j
] = [x
, cumulative_y
[x
]]
1830 if (!maxY
|| cumulative_y
[x
] > maxY
)
1831 maxY
= cumulative_y
[x
];
1835 datasets
[i
] = series
;
1838 for (var i
= 1; i
< datasets
.length
; i
++) {
1839 if (!this.visibility()[i
- 1]) continue;
1840 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1843 // Use some heuristics to come up with a good maxY value, unless it's been
1844 // set explicitly by the developer or end-user (via drag)
1845 if (this.valueWindow_
!= null) {
1846 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1847 this.displayedYRange_
= this.valueWindow_
;
1849 // This affects the calculation of span, below.
1850 if (this.attr_("includeZero") && minY
> 0) {
1854 // Add some padding and round up to an integer to be human-friendly.
1855 var span
= maxY
- minY
;
1856 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1857 if (span
== 0) { span
= maxY
; }
1858 var maxAxisY
= maxY
+ 0.1 * span
;
1859 var minAxisY
= minY
- 0.1 * span
;
1861 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1862 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1863 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1865 if (this.attr_("includeZero")) {
1866 if (maxY
< 0) maxAxisY
= 0;
1867 if (minY
> 0) minAxisY
= 0;
1870 this.addYTicks_(minAxisY
, maxAxisY
);
1871 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1876 // Tell PlotKit to use this new data and render itself
1877 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1878 this.layout_
.evaluateWithError();
1879 this.plotter_
.clear();
1880 this.plotter_
.render();
1881 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1882 this.canvas_
.height
);
1884 if (this.attr_("drawCallback") !== null) {
1885 this.attr_("drawCallback")(this, is_initial_draw
);
1890 * Calculates the rolling average of a data set.
1891 * If originalData is [label, val], rolls the average of those.
1892 * If originalData is [label, [, it's interpreted as [value, stddev]
1893 * and the roll is returned in the same form, with appropriately reduced
1894 * stddev for each value.
1895 * Note that this is where fractional input (i.e. '5/10') is converted into
1897 * @param {Array} originalData The data in the appropriate format (see above)
1898 * @param {Number} rollPeriod The number of days over which to average the data
1900 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1901 if (originalData
.length
< 2)
1902 return originalData
;
1903 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1904 var rollingData
= [];
1905 var sigma
= this.attr_("sigma");
1907 if (this.fractions_
) {
1909 var den
= 0; // numerator/denominator
1911 for (var i
= 0; i
< originalData
.length
; i
++) {
1912 num
+= originalData
[i
][1][0];
1913 den
+= originalData
[i
][1][1];
1914 if (i
- rollPeriod
>= 0) {
1915 num
-= originalData
[i
- rollPeriod
][1][0];
1916 den
-= originalData
[i
- rollPeriod
][1][1];
1919 var date
= originalData
[i
][0];
1920 var value
= den
? num
/ den
: 0.0;
1921 if (this.attr_("errorBars")) {
1922 if (this.wilsonInterval_
) {
1923 // For more details on this confidence interval, see:
1924 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1926 var p
= value
< 0 ? 0 : value
, n
= den
;
1927 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1928 var denom
= 1 + sigma
* sigma
/ den
;
1929 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1930 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1931 rollingData
[i
] = [date
,
1932 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1934 rollingData
[i
] = [date
, [0, 0, 0]];
1937 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1938 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1941 rollingData
[i
] = [date
, mult
* value
];
1944 } else if (this.attr_("customBars")) {
1949 for (var i
= 0; i
< originalData
.length
; i
++) {
1950 var data
= originalData
[i
][1];
1952 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1954 if (y
!= null && !isNaN(y
)) {
1960 if (i
- rollPeriod
>= 0) {
1961 var prev
= originalData
[i
- rollPeriod
];
1962 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1969 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1970 1.0 * (mid
- low
) / count
,
1971 1.0 * (high
- mid
) / count
]];
1974 // Calculate the rolling average for the first rollPeriod - 1 points where
1975 // there is not enough data to roll over the full number of days
1976 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1977 if (!this.attr_("errorBars")){
1978 if (rollPeriod
== 1) {
1979 return originalData
;
1982 for (var i
= 0; i
< originalData
.length
; i
++) {
1985 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1986 var y
= originalData
[j
][1];
1987 if (y
== null || isNaN(y
)) continue;
1989 sum
+= originalData
[j
][1];
1992 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1994 rollingData
[i
] = [originalData
[i
][0], null];
1999 for (var i
= 0; i
< originalData
.length
; i
++) {
2003 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2004 var y
= originalData
[j
][1][0];
2005 if (y
== null || isNaN(y
)) continue;
2007 sum
+= originalData
[j
][1][0];
2008 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2011 var stddev
= Math
.sqrt(variance
) / num_ok
;
2012 rollingData
[i
] = [originalData
[i
][0],
2013 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2015 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2025 * Parses a date, returning the number of milliseconds since epoch. This can be
2026 * passed in as an xValueParser in the Dygraph constructor.
2027 * TODO(danvk): enumerate formats that this understands.
2028 * @param {String} A date in YYYYMMDD format.
2029 * @return {Number} Milliseconds since epoch.
2032 Dygraph
.dateParser
= function(dateStr
, self
) {
2035 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2036 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2037 while (dateStrSlashed
.search("-") != -1) {
2038 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2040 d
= Date
.parse(dateStrSlashed
);
2041 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2042 // TODO(danvk): remove support for this format. It's confusing.
2043 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2044 + "/" + dateStr
.substr(6,2);
2045 d
= Date
.parse(dateStrSlashed
);
2047 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2048 // "2009/07/12 12:34:56"
2049 d
= Date
.parse(dateStr
);
2052 if (!d
|| isNaN(d
)) {
2053 self
.error("Couldn't parse " + dateStr
+ " as a date");
2059 * Detects the type of the str (date or numeric) and sets the various
2060 * formatting attributes in this.attrs_ based on this type.
2061 * @param {String} str An x value.
2064 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2066 if (str
.indexOf('-') >= 0 ||
2067 str
.indexOf('/') >= 0 ||
2068 isNaN(parseFloat(str
))) {
2070 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2071 // TODO(danvk): remove support for this format.
2076 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2077 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2078 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2079 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2081 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2082 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2083 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2084 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2089 * Parses a string in a special csv format. We expect a csv file where each
2090 * line is a date point, and the first field in each line is the date string.
2091 * We also expect that all remaining fields represent series.
2092 * if the errorBars attribute is set, then interpret the fields as:
2093 * date, series1, stddev1, series2, stddev2, ...
2094 * @param {Array.<Object>} data See above.
2097 * @return Array.<Object> An array with one entry for each row. These entries
2098 * are an array of cells in that row. The first entry is the parsed x-value for
2099 * the row. The second, third, etc. are the y-values. These can take on one of
2100 * three forms, depending on the CSV and constructor parameters:
2102 * 2. [ value, stddev ]
2103 * 3. [ low value, center value, high value ]
2105 Dygraph
.prototype.parseCSV_
= function(data
) {
2107 var lines
= data
.split("\n");
2109 // Use the default delimiter or fall back to a tab if that makes sense.
2110 var delim
= this.attr_('delimiter');
2111 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2116 if (this.labelsFromCSV_
) {
2118 this.attrs_
.labels
= lines
[0].split(delim
);
2121 // Parse the x as a float or return null if it's not a number.
2122 var parseFloatOrNull
= function(x
) {
2123 var val
= parseFloat(x
);
2124 return isNaN(val
) ? null : val
;
2128 var defaultParserSet
= false; // attempt to auto-detect x value type
2129 var expectedCols
= this.attr_("labels").length
;
2130 var outOfOrder
= false;
2131 for (var i
= start
; i
< lines
.length
; i
++) {
2132 var line
= lines
[i
];
2133 if (line
.length
== 0) continue; // skip blank lines
2134 if (line
[0] == '#') continue; // skip comment lines
2135 var inFields
= line
.split(delim
);
2136 if (inFields
.length
< 2) continue;
2139 if (!defaultParserSet
) {
2140 this.detectTypeFromString_(inFields
[0]);
2141 xParser
= this.attr_("xValueParser");
2142 defaultParserSet
= true;
2144 fields
[0] = xParser(inFields
[0], this);
2146 // If fractions are expected, parse the numbers as "A/B
"
2147 if (this.fractions_) {
2148 for (var j = 1; j < inFields.length; j++) {
2149 // TODO(danvk): figure out an appropriate way to flag parse errors.
2150 var vals = inFields[j].split("/");
2151 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2153 } else if (this.attr_("errorBars
")) {
2154 // If there are error bars, values are (value, stddev) pairs
2155 for (var j = 1; j < inFields.length; j += 2)
2156 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2157 parseFloatOrNull(inFields[j + 1])];
2158 } else if (this.attr_("customBars
")) {
2159 // Bars are a low;center;high tuple
2160 for (var j = 1; j < inFields.length; j++) {
2161 var vals = inFields[j].split(";");
2162 fields[j] = [ parseFloatOrNull(vals[0]),
2163 parseFloatOrNull(vals[1]),
2164 parseFloatOrNull(vals[2]) ];
2167 // Values are just numbers
2168 for (var j = 1; j < inFields.length; j++) {
2169 fields[j] = parseFloatOrNull(inFields[j]);
2172 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2177 if (fields.length != expectedCols) {
2178 this.error("Number of columns
in line
" + i + " (" + fields.length +
2179 ") does not agree
with number of
labels (" + expectedCols +
2185 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2186 ret.sort(function(a,b) { return a[0] - b[0] });
2193 * The user has provided their data as a pre-packaged JS array. If the x values
2194 * are numeric, this is the same as dygraphs' internal format. If the x values
2195 * are dates, we need to convert them from Date objects to ms since epoch.
2196 * @param {Array.<Object>} data
2197 * @return {Array.<Object>} data with numeric x values.
2199 Dygraph.prototype.parseArray_ = function(data) {
2200 // Peek at the first x value to see if it's numeric.
2201 if (data.length == 0) {
2202 this.error("Can
't plot empty data set");
2205 if (data[0].length == 0) {
2206 this.error("Data set cannot contain an empty row");
2210 if (this.attr_("labels") == null) {
2211 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2212 "in the options parameter");
2213 this.attrs_.labels = [ "X" ];
2214 for (var i = 1; i < data[0].length; i++) {
2215 this.attrs_.labels.push("Y" + i);
2219 if (Dygraph.isDateLike(data[0][0])) {
2220 // Some intelligent defaults for a date x-axis.
2221 this.attrs_.xValueFormatter = Dygraph.dateString_;
2222 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2223 this.attrs_.xTicker = Dygraph.dateTicker;
2225 // Assume they're all dates
.
2226 var parsedData
= Dygraph
.clone(data
);
2227 for (var i
= 0; i
< data
.length
; i
++) {
2228 if (parsedData
[i
].length
== 0) {
2229 this.error("Row " + (1 + i
) + " of data is empty");
2232 if (parsedData
[i
][0] == null
2233 || typeof(parsedData
[i
][0].getTime
) != 'function'
2234 || isNaN(parsedData
[i
][0].getTime())) {
2235 this.error("x value in row " + (1 + i
) + " is not a Date");
2238 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2242 // Some intelligent defaults for a numeric x-axis.
2243 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2244 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2250 * Parses a DataTable object from gviz.
2251 * The data is expected to have a first column that is either a date or a
2252 * number. All subsequent columns must be numbers. If there is a clear mismatch
2253 * between this.xValueParser_ and the type of the first column, it will be
2254 * fixed. Fills out rawData_.
2255 * @param {Array.<Object>} data See above.
2258 Dygraph
.prototype.parseDataTable_
= function(data
) {
2259 var cols
= data
.getNumberOfColumns();
2260 var rows
= data
.getNumberOfRows();
2262 var indepType
= data
.getColumnType(0);
2263 if (indepType
== 'date' || indepType
== 'datetime') {
2264 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2265 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2266 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2267 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2268 } else if (indepType
== 'number') {
2269 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2270 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2271 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2272 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2274 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2275 "column 1 of DataTable input (Got '" + indepType
+ "')");
2279 // Array of the column indices which contain data (and not annotations).
2281 var annotationCols
= {}; // data index -> [annotation cols]
2282 var hasAnnotations
= false;
2283 for (var i
= 1; i
< cols
; i
++) {
2284 var type
= data
.getColumnType(i
);
2285 if (type
== 'number') {
2287 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2288 // This is OK -- it's an annotation column.
2289 var dataIdx
= colIdx
[colIdx
.length
- 1];
2290 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2291 annotationCols
[dataIdx
] = [i
];
2293 annotationCols
[dataIdx
].push(i
);
2295 hasAnnotations
= true;
2297 this.error("Only 'number' is supported as a dependent type with Gviz." +
2298 " 'string' is only supported if displayAnnotations is true");
2302 // Read column labels
2303 // TODO(danvk): add support back for errorBars
2304 var labels
= [data
.getColumnLabel(0)];
2305 for (var i
= 0; i
< colIdx
.length
; i
++) {
2306 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2308 this.attrs_
.labels
= labels
;
2309 cols
= labels
.length
;
2312 var outOfOrder
= false;
2313 var annotations
= [];
2314 for (var i
= 0; i
< rows
; i
++) {
2316 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2317 data
.getValue(i
, 0) === null) {
2318 this.warning("Ignoring row " + i
+
2319 " of DataTable because of undefined or null first column.");
2323 if (indepType
== 'date' || indepType
== 'datetime') {
2324 row
.push(data
.getValue(i
, 0).getTime());
2326 row
.push(data
.getValue(i
, 0));
2328 if (!this.attr_("errorBars")) {
2329 for (var j
= 0; j
< colIdx
.length
; j
++) {
2330 var col
= colIdx
[j
];
2331 row
.push(data
.getValue(i
, col
));
2332 if (hasAnnotations
&&
2333 annotationCols
.hasOwnProperty(col
) &&
2334 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2336 ann
.series
= data
.getColumnLabel(col
);
2338 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2340 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2341 if (k
) ann
.text
+= "\n";
2342 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2344 annotations
.push(ann
);
2348 for (var j
= 0; j
< cols
- 1; j
++) {
2349 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2352 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2359 this.warn("DataTable is out of order; order it correctly to speed loading.");
2360 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2362 this.rawData_
= ret
;
2364 if (annotations
.length
> 0) {
2365 this.setAnnotations(annotations
, true);
2369 // These functions are all based on MochiKit.
2370 Dygraph
.update
= function (self
, o
) {
2371 if (typeof(o
) != 'undefined' && o
!== null) {
2373 if (o
.hasOwnProperty(k
)) {
2381 Dygraph
.isArrayLike
= function (o
) {
2382 var typ
= typeof(o
);
2384 (typ
!= 'object' && !(typ
== 'function' &&
2385 typeof(o
.item
) == 'function')) ||
2387 typeof(o
.length
) != 'number' ||
2395 Dygraph
.isDateLike
= function (o
) {
2396 if (typeof(o
) != "object" || o
=== null ||
2397 typeof(o
.getTime
) != 'function') {
2403 Dygraph
.clone
= function(o
) {
2404 // TODO(danvk): figure out how MochiKit's version works
2406 for (var i
= 0; i
< o
.length
; i
++) {
2407 if (Dygraph
.isArrayLike(o
[i
])) {
2408 r
.push(Dygraph
.clone(o
[i
]));
2418 * Get the CSV data. If it's in a function, call that function. If it's in a
2419 * file, do an XMLHttpRequest to get it.
2422 Dygraph
.prototype.start_
= function() {
2423 if (typeof this.file_
== 'function') {
2424 // CSV string. Pretend we got it via XHR.
2425 this.loadedEvent_(this.file_());
2426 } else if (Dygraph
.isArrayLike(this.file_
)) {
2427 this.rawData_
= this.parseArray_(this.file_
);
2428 this.drawGraph_(this.rawData_
);
2429 } else if (typeof this.file_
== 'object' &&
2430 typeof this.file_
.getColumnRange
== 'function') {
2431 // must be a DataTable from gviz.
2432 this.parseDataTable_(this.file_
);
2433 this.drawGraph_(this.rawData_
);
2434 } else if (typeof this.file_
== 'string') {
2435 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2436 if (this.file_
.indexOf('\n') >= 0) {
2437 this.loadedEvent_(this.file_
);
2439 var req
= new XMLHttpRequest();
2441 req
.onreadystatechange
= function () {
2442 if (req
.readyState
== 4) {
2443 if (req
.status
== 200) {
2444 caller
.loadedEvent_(req
.responseText
);
2449 req
.open("GET", this.file_
, true);
2453 this.error("Unknown data format: " + (typeof this.file_
));
2458 * Changes various properties of the graph. These can include:
2460 * <li>file: changes the source data for the graph</li>
2461 * <li>errorBars: changes whether the data contains stddev</li>
2463 * @param {Object} attrs The new properties and values
2465 Dygraph
.prototype.updateOptions
= function(attrs
) {
2466 // TODO(danvk): this is a mess. Rethink this function.
2467 if (attrs
.rollPeriod
) {
2468 this.rollPeriod_
= attrs
.rollPeriod
;
2470 if (attrs
.dateWindow
) {
2471 this.dateWindow_
= attrs
.dateWindow
;
2473 if (attrs
.valueRange
) {
2474 this.valueRange_
= attrs
.valueRange
;
2476 Dygraph
.update(this.user_attrs_
, attrs
);
2477 Dygraph
.update(this.renderOptions_
, attrs
);
2479 this.labelsFromCSV_
= (this.attr_("labels") == null);
2481 // TODO(danvk): this doesn't match the constructor logic
2482 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2483 if (attrs
['file']) {
2484 this.file_
= attrs
['file'];
2487 this.drawGraph_(this.rawData_
);
2492 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2493 * containing div (which has presumably changed size since the dygraph was
2494 * instantiated. If the width/height are specified, the div will be resized.
2496 * This is far more efficient than destroying and re-instantiating a
2497 * Dygraph, since it doesn't have to reparse the underlying data.
2499 * @param {Number} width Width (in pixels)
2500 * @param {Number} height Height (in pixels)
2502 Dygraph
.prototype.resize
= function(width
, height
) {
2503 if (this.resize_lock
) {
2506 this.resize_lock
= true;
2508 if ((width
=== null) != (height
=== null)) {
2509 this.warn("Dygraph.resize() should be called with zero parameters or " +
2510 "two non-NULL parameters. Pretending it was zero.");
2511 width
= height
= null;
2514 // TODO(danvk): there should be a clear() method.
2515 this.maindiv_
.innerHTML
= "";
2516 this.attrs_
.labelsDiv
= null;
2519 this.maindiv_
.style
.width
= width
+ "px";
2520 this.maindiv_
.style
.height
= height
+ "px";
2521 this.width_
= width
;
2522 this.height_
= height
;
2524 this.width_
= this.maindiv_
.offsetWidth
;
2525 this.height_
= this.maindiv_
.offsetHeight
;
2528 this.createInterface_();
2529 this.drawGraph_(this.rawData_
);
2531 this.resize_lock
= false;
2535 * Adjusts the number of days in the rolling average. Updates the graph to
2536 * reflect the new averaging period.
2537 * @param {Number} length Number of days over which to average the data.
2539 Dygraph
.prototype.adjustRoll
= function(length
) {
2540 this.rollPeriod_
= length
;
2541 this.drawGraph_(this.rawData_
);
2545 * Returns a boolean array of visibility statuses.
2547 Dygraph
.prototype.visibility
= function() {
2548 // Do lazy-initialization, so that this happens after we know the number of
2550 if (!this.attr_("visibility")) {
2551 this.attrs_
["visibility"] = [];
2553 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2554 this.attr_("visibility").push(true);
2556 return this.attr_("visibility");
2560 * Changes the visiblity of a series.
2562 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2563 var x
= this.visibility();
2564 if (num
< 0 && num
>= x
.length
) {
2565 this.warn("invalid series number in setVisibility: " + num
);
2568 this.drawGraph_(this.rawData_
);
2573 * Update the list of annotations and redraw the chart.
2575 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2576 this.annotations_
= ann
;
2577 this.layout_
.setAnnotations(this.annotations_
);
2578 if (!suppressDraw
) {
2579 this.drawGraph_(this.rawData_
);
2584 * Return the list of annotations.
2586 Dygraph
.prototype.annotations
= function() {
2587 return this.annotations_
;
2590 Dygraph
.addAnnotationRule
= function() {
2591 if (Dygraph
.addedAnnotationCSS
) return;
2594 if (document
.styleSheets
.length
> 0) {
2595 mysheet
= document
.styleSheets
[0];
2597 var styleSheetElement
= document
.createElement("style");
2598 styleSheetElement
.type
= "text/css";
2599 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2600 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2601 if (document
.styleSheets
[i
].disabled
) continue;
2602 mysheet
= document
.styleSheets
[i
];
2606 var rule
= "border: 1px solid black; " +
2607 "background-color: white; " +
2608 "text-align: center;";
2609 if (mysheet
.insertRule
) { // Firefox
2610 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2611 } else if (mysheet
.addRule
) { // IE
2612 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2615 Dygraph
.addedAnnotationCSS
= true;
2619 * Create a new canvas element. This is more complex than a simple
2620 * document.createElement("canvas") because of IE and excanvas.
2622 Dygraph
.createCanvas
= function() {
2623 var canvas
= document
.createElement("canvas");
2625 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2627 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2635 * A wrapper around Dygraph that implements the gviz API.
2636 * @param {Object} container The DOM object the visualization should live in.
2638 Dygraph
.GVizChart
= function(container
) {
2639 this.container
= container
;
2642 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2643 this.container
.innerHTML
= '';
2644 this.date_graph
= new Dygraph(this.container
, data
, options
);
2648 * Google charts compatible setSelection
2649 * Only row selection is supported, all points in the row will be highlighted
2650 * @param {Array} array of the selected cells
2653 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2655 if (selection_array
.length
) {
2656 row
= selection_array
[0].row
;
2658 this.date_graph
.setSelection(row
);
2662 * Google charts compatible getSelection implementation
2663 * @return {Array} array of the selected cells
2666 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2669 var row
= this.date_graph
.getSelection();
2671 if (row
< 0) return selection
;
2674 for (var i
in this.date_graph
.layout_
.datasets
) {
2675 selection
.push({row
: row
, column
: col
});
2682 // Older pages may still use this name.
2683 DateGraph
= Dygraph
;