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 // Used for initializing annotation CSS rules only once.
139 Dygraph
.addedAnnotationCSS
= false;
141 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
142 // Labels is no longer a constructor parameter, since it's typically set
143 // directly from the data source. It also conains a name for the x-axis,
144 // which the previous constructor form did not.
145 if (labels
!= null) {
146 var new_labels
= ["Date"];
147 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
148 Dygraph
.update(attrs
, { 'labels': new_labels
});
150 this.__init__(div
, file
, attrs
);
154 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
155 * and interaction <canvas> inside of it. See the constructor for details
157 * @param {Element} div the Element to render the graph into.
158 * @param {String | Function} file Source data
159 * @param {Object} attrs Miscellaneous other options
162 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
163 // Support two-argument constructor
164 if (attrs
== null) { attrs
= {}; }
166 // Copy the important bits into the object
167 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
170 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
171 this.previousVerticalX_
= -1;
172 this.fractions_
= attrs
.fractions
|| false;
173 this.dateWindow_
= attrs
.dateWindow
|| null;
174 // valueRange and valueWindow are similar, but not the same. valueRange is a
175 // locally-stored copy of the attribute. valueWindow starts off the same as
176 // valueRange but is impacted by zoom or pan effects. valueRange is kept
177 // around to restore the original value back to valueRange.
178 // TODO(konigsberg): There are no vertical pan effects yet, but valueWindow
179 // would change accordingly.
180 this.valueRange_
= attrs
.valueRange
|| null;
181 this.valueWindow_
= this.valueRange_
;
183 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
184 this.is_initial_draw_
= true;
185 this.annotations_
= [];
187 // Clear the div. This ensure that, if multiple dygraphs are passed the same
188 // div, then only one will be drawn.
191 // If the div isn't already sized then inherit from our attrs or
192 // give it a default size.
193 if (div
.style
.width
== '') {
194 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
196 if (div
.style
.height
== '') {
197 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
199 this.width_
= parseInt(div
.style
.width
, 10);
200 this.height_
= parseInt(div
.style
.height
, 10);
201 // The div might have been specified as percent of the current window size,
202 // convert that to an appropriate number of pixels.
203 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
204 this.width_
= div
.offsetWidth
;
206 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
207 this.height_
= div
.offsetHeight
;
210 if (this.width_
== 0) {
211 this.error("dygraph has zero width. Please specify a width in pixels.");
213 if (this.height_
== 0) {
214 this.error("dygraph has zero height. Please specify a height in pixels.");
217 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
218 if (attrs
['stackedGraph']) {
219 attrs
['fillGraph'] = true;
220 // TODO(nikhilk): Add any other stackedGraph checks here.
223 // Dygraphs has many options, some of which interact with one another.
224 // To keep track of everything, we maintain two sets of options:
226 // this.user_attrs_ only options explicitly set by the user.
227 // this.attrs_ defaults, options derived from user_attrs_, data.
229 // Options are then accessed this.attr_('attr'), which first looks at
230 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
231 // defaults without overriding behavior that the user specifically asks for.
232 this.user_attrs_
= {};
233 Dygraph
.update(this.user_attrs_
, attrs
);
236 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
238 this.boundaryIds_
= [];
240 // Make a note of whether labels will be pulled from the CSV file.
241 this.labelsFromCSV_
= (this.attr_("labels") == null);
243 Dygraph
.addAnnotationRule();
245 // Create the containing DIV and other interactive elements
246 this.createInterface_();
251 Dygraph
.prototype.attr_
= function(name
) {
252 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
253 return this.user_attrs_
[name
];
254 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
255 return this.attrs_
[name
];
261 // TODO(danvk): any way I can get the line numbers to be this.warn call?
262 Dygraph
.prototype.log
= function(severity
, message
) {
263 if (typeof(console
) != 'undefined') {
266 console
.debug('dygraphs: ' + message
);
269 console
.info('dygraphs: ' + message
);
271 case Dygraph
.WARNING
:
272 console
.warn('dygraphs: ' + message
);
275 console
.error('dygraphs: ' + message
);
280 Dygraph
.prototype.info
= function(message
) {
281 this.log(Dygraph
.INFO
, message
);
283 Dygraph
.prototype.warn
= function(message
) {
284 this.log(Dygraph
.WARNING
, message
);
286 Dygraph
.prototype.error
= function(message
) {
287 this.log(Dygraph
.ERROR
, message
);
291 * Returns the current rolling period, as set by the user or an option.
292 * @return {Number} The number of days in the rolling window
294 Dygraph
.prototype.rollPeriod
= function() {
295 return this.rollPeriod_
;
299 * Returns the currently-visible x-range. This can be affected by zooming,
300 * panning or a call to updateOptions.
301 * Returns a two-element array: [left, right].
302 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
304 Dygraph
.prototype.xAxisRange
= function() {
305 if (this.dateWindow_
) return this.dateWindow_
;
307 // The entire chart is visible.
308 var left
= this.rawData_
[0][0];
309 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
310 return [left
, right
];
314 * Returns the currently-visible y-range. This can be affected by zooming,
315 * panning or a call to updateOptions.
316 * Returns a two-element array: [bottom, top].
318 Dygraph
.prototype.yAxisRange
= function() {
319 return this.displayedYRange_
;
323 * Convert from data coordinates to canvas/div X/Y coordinates.
324 * Returns a two-element array: [X, Y]
326 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
327 var ret
= [null, null];
328 var area
= this.plotter_
.area
;
330 var xRange
= this.xAxisRange();
331 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
335 var yRange
= this.yAxisRange();
336 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
342 // TODO(danvk): use these functions throughout dygraphs.
344 * Convert from canvas/div coords to data coordinates.
345 * Returns a two-element array: [X, Y]
347 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
348 var ret
= [null, null];
349 var area
= this.plotter_
.area
;
351 var xRange
= this.xAxisRange();
352 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
356 var yRange
= this.yAxisRange();
357 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
364 * Returns the number of columns (including the independent variable).
366 Dygraph
.prototype.numColumns
= function() {
367 return this.rawData_
[0].length
;
371 * Returns the number of rows (excluding any header/label row).
373 Dygraph
.prototype.numRows
= function() {
374 return this.rawData_
.length
;
378 * Returns the value in the given row and column. If the row and column exceed
379 * the bounds on the data, returns null. Also returns null if the value is
382 Dygraph
.prototype.getValue
= function(row
, col
) {
383 if (row
< 0 || row
> this.rawData_
.length
) return null;
384 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
386 return this.rawData_
[row
][col
];
389 Dygraph
.addEvent
= function(el
, evt
, fn
) {
390 var normed_fn
= function(e
) {
391 if (!e
) var e
= window
.event
;
394 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
395 el
.addEventListener(evt
, normed_fn
, false);
397 el
.attachEvent('on' + evt
, normed_fn
);
401 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
402 var ctx
= cnv
.getContext("2d");
404 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
409 * Generates interface elements for the Dygraph: a containing div, a div to
410 * display the current point, and a textbox to adjust the rolling average
411 * period. Also creates the Renderer/Layout elements.
414 Dygraph
.prototype.createInterface_
= function() {
415 // Create the all-enclosing graph div
416 var enclosing
= this.maindiv_
;
418 this.graphDiv
= document
.createElement("div");
419 this.graphDiv
.style
.width
= this.width_
+ "px";
420 this.graphDiv
.style
.height
= this.height_
+ "px";
421 enclosing
.appendChild(this.graphDiv
);
425 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
427 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
428 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
429 - 2 * this.attr_("axisTickSize");
430 this.clippingArea_
= clip
;
432 // Create the canvas for interactive parts of the chart.
433 this.canvas_
= Dygraph
.createCanvas();
434 this.canvas_
.style
.position
= "absolute";
435 this.canvas_
.width
= this.width_
;
436 this.canvas_
.height
= this.height_
;
437 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
438 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
440 // ... and for static parts of the chart.
441 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
443 // The interactive parts of the graph are drawn on top of the chart.
444 this.graphDiv
.appendChild(this.hidden_
);
445 this.graphDiv
.appendChild(this.canvas_
);
446 this.mouseEventElement_
= this.canvas_
;
448 // Make sure we don't overdraw.
449 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
450 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
453 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
454 dygraph
.mouseMove_(e
);
456 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
457 dygraph
.mouseOut_(e
);
460 // Create the grapher
461 // TODO(danvk): why does the Layout need its own set of options?
462 this.layoutOptions_
= { 'xOriginIsZero': false };
463 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
464 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
465 Dygraph
.update(this.layoutOptions_
, {
466 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
468 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
470 // TODO(danvk): why does the Renderer need its own set of options?
471 this.renderOptions_
= { colorScheme
: this.colors_
,
473 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
474 Dygraph
.update(this.renderOptions_
, this.attrs_
);
475 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
476 this.plotter_
= new DygraphCanvasRenderer(this,
477 this.hidden_
, this.layout_
,
478 this.renderOptions_
);
480 this.createStatusMessage_();
481 this.createRollInterface_();
482 this.createDragInterface_();
486 * Detach DOM elements in the dygraph and null out all data references.
487 * Calling this when you're done with a dygraph can dramatically reduce memory
488 * usage. See, e.g., the tests/perf.html example.
490 Dygraph
.prototype.destroy
= function() {
491 var removeRecursive
= function(node
) {
492 while (node
.hasChildNodes()) {
493 removeRecursive(node
.firstChild
);
494 node
.removeChild(node
.firstChild
);
497 removeRecursive(this.maindiv_
);
499 var nullOut
= function(obj
) {
501 if (typeof(obj
[n
]) === 'object') {
507 // These may not all be necessary, but it can't hurt...
508 nullOut(this.layout_
);
509 nullOut(this.plotter_
);
514 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
515 * this particular canvas. All Dygraph work is done on this.canvas_.
516 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
517 * @return {Object} The newly-created canvas
520 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
521 var h
= Dygraph
.createCanvas();
522 h
.style
.position
= "absolute";
523 // TODO(danvk): h should be offset from canvas. canvas needs to include
524 // some extra area to make it easier to zoom in on the far left and far
525 // right. h needs to be precisely the plot area, so that clipping occurs.
526 h
.style
.top
= canvas
.style
.top
;
527 h
.style
.left
= canvas
.style
.left
;
528 h
.width
= this.width_
;
529 h
.height
= this.height_
;
530 h
.style
.width
= this.width_
+ "px"; // for IE
531 h
.style
.height
= this.height_
+ "px"; // for IE
535 // Taken from MochiKit.Color
536 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
540 if (saturation
=== 0) {
545 var i
= Math
.floor(hue
* 6);
546 var f
= (hue
* 6) - i
;
547 var p
= value
* (1 - saturation
);
548 var q
= value
* (1 - (saturation
* f
));
549 var t
= value
* (1 - (saturation
* (1 - f
)));
551 case 1: red
= q
; green
= value
; blue
= p
; break;
552 case 2: red
= p
; green
= value
; blue
= t
; break;
553 case 3: red
= p
; green
= q
; blue
= value
; break;
554 case 4: red
= t
; green
= p
; blue
= value
; break;
555 case 5: red
= value
; green
= p
; blue
= q
; break;
556 case 6: // fall through
557 case 0: red
= value
; green
= t
; blue
= p
; break;
560 red
= Math
.floor(255 * red
+ 0.5);
561 green
= Math
.floor(255 * green
+ 0.5);
562 blue
= Math
.floor(255 * blue
+ 0.5);
563 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
568 * Generate a set of distinct colors for the data series. This is done with a
569 * color wheel. Saturation/Value are customizable, and the hue is
570 * equally-spaced around the color wheel. If a custom set of colors is
571 * specified, that is used instead.
574 Dygraph
.prototype.setColors_
= function() {
575 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
576 // away with this.renderOptions_.
577 var num
= this.attr_("labels").length
- 1;
579 var colors
= this.attr_('colors');
581 var sat
= this.attr_('colorSaturation') || 1.0;
582 var val
= this.attr_('colorValue') || 0.5;
583 var half
= Math
.ceil(num
/ 2);
584 for (var i
= 1; i
<= num
; i
++) {
585 if (!this.visibility()[i
-1]) continue;
586 // alternate colors for high contrast.
587 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
588 var hue
= (1.0 * idx
/ (1 + num
));
589 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
592 for (var i
= 0; i
< num
; i
++) {
593 if (!this.visibility()[i
]) continue;
594 var colorStr
= colors
[i
% colors
.length
];
595 this.colors_
.push(colorStr
);
599 // TODO(danvk): update this w/r
/t/ the
new options system
.
600 this.renderOptions_
.colorScheme
= this.colors_
;
601 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
602 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
603 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
607 * Return the list of colors. This is either the list of colors passed in the
608 * attributes, or the autogenerated list of rgb(r,g,b) strings.
609 * @return {Array<string>} The list of colors.
611 Dygraph
.prototype.getColors
= function() {
615 // The following functions are from quirksmode.org with a modification for Safari from
616 // http://blog.firetree.net/2005/07/04/javascript-find-position/
617 // http://www.quirksmode.org/js
/findpos
.html
618 Dygraph
.findPosX
= function(obj
) {
623 curleft
+= obj
.offsetLeft
;
624 if(!obj
.offsetParent
)
626 obj
= obj
.offsetParent
;
633 Dygraph
.findPosY
= function(obj
) {
638 curtop
+= obj
.offsetTop
;
639 if(!obj
.offsetParent
)
641 obj
= obj
.offsetParent
;
651 * Create the div that contains information on the selected point(s)
652 * This goes in the top right of the canvas, unless an external div has already
656 Dygraph
.prototype.createStatusMessage_
= function() {
657 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
658 if (userLabelsDiv
&& null != userLabelsDiv
659 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
660 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
662 if (!this.attr_("labelsDiv")) {
663 var divWidth
= this.attr_('labelsDivWidth');
665 "position": "absolute",
668 "width": divWidth
+ "px",
670 "left": (this.width_
- divWidth
- 2) + "px",
671 "background": "white",
673 "overflow": "hidden"};
674 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
675 var div
= document
.createElement("div");
676 for (var name
in messagestyle
) {
677 if (messagestyle
.hasOwnProperty(name
)) {
678 div
.style
[name
] = messagestyle
[name
];
681 this.graphDiv
.appendChild(div
);
682 this.attrs_
.labelsDiv
= div
;
687 * Create the text box to adjust the averaging period
688 * @return {Object} The newly-created text box
691 Dygraph
.prototype.createRollInterface_
= function() {
692 var display
= this.attr_('showRoller') ? "block" : "none";
693 var textAttr
= { "position": "absolute",
695 "top": (this.plotter_
.area
.h
- 25) + "px",
696 "left": (this.plotter_
.area
.x
+ 1) + "px",
699 var roller
= document
.createElement("input");
700 roller
.type
= "text";
702 roller
.value
= this.rollPeriod_
;
703 for (var name
in textAttr
) {
704 if (textAttr
.hasOwnProperty(name
)) {
705 roller
.style
[name
] = textAttr
[name
];
709 var pa
= this.graphDiv
;
710 pa
.appendChild(roller
);
712 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
716 // These functions are taken from MochiKit.Signal
717 Dygraph
.pageX
= function(e
) {
719 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
722 var b
= document
.body
;
724 (de
.scrollLeft
|| b
.scrollLeft
) -
725 (de
.clientLeft
|| 0);
729 Dygraph
.pageY
= function(e
) {
731 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
734 var b
= document
.body
;
736 (de
.scrollTop
|| b
.scrollTop
) -
742 * Set up all the mouse handlers needed to capture dragging behavior for zoom
746 Dygraph
.prototype.createDragInterface_
= function() {
749 // Tracks whether the mouse is down right now
750 var isZooming
= false;
751 var isPanning
= false;
752 var dragStartX
= null;
753 var dragStartY
= null;
758 var prevDragDirection
= null;
759 var draggingDate
= null;
760 var dateRange
= null;
762 // Utility function to convert page-wide coordinates to canvas coords
765 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
766 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
768 // Draw zoom rectangles when the mouse is down and the user moves around
769 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
771 dragEndX
= getX(event
);
772 dragEndY
= getY(event
);
774 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
775 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
776 var dragDirection
= (xDelta
< yDelta
) ? "V" : "H";
778 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
779 prevDragDirection
, prevEndX
, prevEndY
);
783 prevDragDirection
= dragDirection
;
784 } else if (isPanning
) {
785 dragEndX
= getX(event
);
786 dragEndY
= getY(event
);
788 // Want to have it so that:
789 // 1. draggingDate appears at dragEndX
790 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
792 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
793 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
794 self
.drawGraph_(self
.rawData_
);
798 // Track the beginning of drag events
799 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
800 px
= Dygraph
.findPosX(self
.canvas_
);
801 py
= Dygraph
.findPosY(self
.canvas_
);
802 dragStartX
= getX(event
);
803 dragStartY
= getY(event
);
805 if (event
.altKey
|| event
.shiftKey
) {
806 // TODO(konigsberg): Support vertical panning.
807 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
809 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
810 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
817 // If the user releases the mouse button during a drag, but not over the
818 // canvas, then it doesn't count as a zooming action.
819 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
820 if (isZooming
|| isPanning
) {
833 // Temporarily cancel the dragging event when the mouse leaves the graph
834 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
841 // If the mouse is released on the canvas during a drag event, then it's a
842 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
843 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
846 dragEndX
= getX(event
);
847 dragEndY
= getY(event
);
848 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
849 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
851 if (regionWidth
< 2 && regionHeight
< 2 &&
852 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
853 // TODO(danvk): pass along more info about the points, e.g. 'x'
854 if (self
.attr_('clickCallback') != null) {
855 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
857 if (self
.attr_('pointClickCallback')) {
858 // check if the click was on a particular point.
860 var closestDistance
= 0;
861 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
862 var p
= self
.selPoints_
[i
];
863 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
864 Math
.pow(p
.canvasy
- dragEndY
, 2);
865 if (closestIdx
== -1 || distance
< closestDistance
) {
866 closestDistance
= distance
;
871 // Allow any click within two pixels of the dot.
872 var radius
= self
.attr_('highlightCircleSize') + 2;
873 if (closestDistance
<= 5 * 5) {
874 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
879 if (regionWidth
>= 10 && regionWidth
> regionHeight
) {
880 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
881 Math
.max(dragStartX
, dragEndX
));
882 } else if (regionHeight
>= 10 && regionHeight
> regionWidth
){
883 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
884 Math
.max(dragStartY
, dragEndY
));
886 self
.canvas_
.getContext("2d").clearRect(0, 0,
888 self
.canvas_
.height
);
902 // Double-clicking zooms back out
903 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
904 // Disable zooming out if panning.
905 if (event
.altKey
|| event
.shiftKey
) return;
912 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
913 * up any previous zoom rectangles that were drawn. This could be optimized to
914 * avoid extra redrawing, but it's tricky to avoid interactions with the status
917 * @param {String} direction the direction of the zoom rectangle. "H" and "V"
918 * for Horizontal and Vertical.
919 * @param {Number} startX The X position where the drag started, in canvas
921 * @param {Number} endX The current X position of the drag, in canvas coords.
922 * @param {Number} startY The Y position where the drag started, in canvas
924 * @param {Number} endY The current Y position of the drag, in canvas coords.
925 * @param {String} prevDirection the value of direction on the previous call to
926 * this function. Used to avoid excess redrawing
927 * @param {Number} prevEndX The value of endX on the previous call to this
928 * function. Used to avoid excess redrawing
929 * @param {Number} prevEndY The value of endY on the previous call to this
930 * function. Used to avoid excess redrawing
933 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
934 prevDirection
, prevEndX
, prevEndY
) {
935 var ctx
= this.canvas_
.getContext("2d");
937 // Clean up from the previous rect if necessary
938 if (prevDirection
== "H") {
939 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
940 Math
.abs(startX
- prevEndX
), this.height_
);
941 } else if (prevDirection
== "V"){
942 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
943 this.width_
, Math
.abs(startY
- prevEndY
));
946 // Draw a light-grey rectangle to show the new viewing area
947 if (direction
== "H") {
948 if (endX
&& startX
) {
949 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
950 ctx
.fillRect(Math
.min(startX
, endX
), 0,
951 Math
.abs(endX
- startX
), this.height_
);
954 if (direction
== "V") {
955 if (endY
&& startY
) {
956 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
957 ctx
.fillRect(0, Math
.min(startY
, endY
),
958 this.width_
, Math
.abs(endY
- startY
));
964 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
965 * the canvas. The exact zoom window may be slightly larger if there are no data
966 * points near lowX or highX. Don't confuse this function with doZoomXDates,
967 * which accepts dates that match the raw data. This function redraws the graph.
969 * @param {Number} lowX The leftmost pixel value that should be visible.
970 * @param {Number} highX The rightmost pixel value that should be visible.
973 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
974 // Find the earliest and latest dates contained in this canvasx range.
975 // Convert the call to date ranges of the raw data.
976 var r
= this.toDataCoords(lowX
, null);
978 r
= this.toDataCoords(highX
, null);
980 this.doZoomXDates_(minDate
, maxDate
);
984 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
985 * method with doZoomX which accepts pixel coordinates. This function redraws
988 * @param {Number} minDate The minimum date that should be visible.
989 * @param {Number} maxDate The maximum date that should be visible.
992 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
993 this.dateWindow_
= [minDate
, maxDate
];
994 this.drawGraph_(this.rawData_
);
995 if (this.attr_("zoomCallback")) {
996 var yRange
= this.yAxisRange();
997 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1002 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1003 * the canvas. The exact zoom window may be slightly larger if there are no
1004 * data points near lowY or highY. Don't confuse this function with
1005 * doZoomYValues, which accepts parameters that match the raw data. This
1006 * function redraws the graph.
1008 * @param {Number} lowY The topmost pixel value that should be visible.
1009 * @param {Number} highY The lowest pixel value that should be visible.
1012 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1013 // Find the highest and lowest values in pixel range.
1014 var r
= this.toDataCoords(null, lowY
);
1015 var minValue
= r
[1];
1016 r
= this.toDataCoords(null, highY
);
1017 var maxValue
= r
[1];
1019 this.doZoomYValues_(minValue
, maxValue
);
1023 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1024 * method with doZoomY which accepts pixel coordinates. This function redraws
1027 * @param {Number} minValue The minimum Value that should be visible.
1028 * @param {Number} maxValue The maximum value that should be visible.
1031 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1032 this.valueWindow_
= [maxValue
, minValue
];
1033 this.drawGraph_(this.rawData_
);
1034 if (this.attr_("zoomCallback")) {
1035 var xRange
= this.xAxisRange();
1036 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1041 * Reset the zoom to the original view coordinates. This is the same as
1042 * double-clicking on the graph.
1046 Dygraph
.prototype.doUnzoom_
= function() {
1048 if (this.dateWindow_
!= null) {
1050 this.dateWindow_
= null;
1052 if (this.valueWindow_
!= null) {
1054 this.valueWindow_
= this.valueRange_
;
1058 if (this.attr_("zoomCallback")) {
1059 var minDate
= this.rawData_
[0][0];
1060 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1061 var minValue
= this.xAxisRange()[0];
1062 var maxValue
= this.xAxisRange()[1];
1063 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1065 this.drawGraph_(this.rawData_
);
1070 * When the mouse moves in the canvas, display information about a nearby data
1071 * point and draw dots over those points in the data series. This function
1072 * takes care of cleanup of previously-drawn dots.
1073 * @param {Object} event The mousemove event from the browser.
1076 Dygraph
.prototype.mouseMove_
= function(event
) {
1077 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1078 var points
= this.layout_
.points
;
1083 // Loop through all the points and find the date nearest to our current
1085 var minDist
= 1e+100;
1087 for (var i
= 0; i
< points
.length
; i
++) {
1088 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1089 if (dist
> minDist
) continue;
1093 if (idx
>= 0) lastx
= points
[idx
].xval
;
1094 // Check that you can really highlight the last day's data
1095 if (canvasx
> points
[points
.length
-1].canvasx
)
1096 lastx
= points
[points
.length
-1].xval
;
1098 // Extract the points we've selected
1099 this.selPoints_
= [];
1100 var l
= points
.length
;
1101 if (!this.attr_("stackedGraph")) {
1102 for (var i
= 0; i
< l
; i
++) {
1103 if (points
[i
].xval
== lastx
) {
1104 this.selPoints_
.push(points
[i
]);
1108 // Need to 'unstack' points starting from the bottom
1109 var cumulative_sum
= 0;
1110 for (var i
= l
- 1; i
>= 0; i
--) {
1111 if (points
[i
].xval
== lastx
) {
1112 var p
= {}; // Clone the point since we modify it
1113 for (var k
in points
[i
]) {
1114 p
[k
] = points
[i
][k
];
1116 p
.yval
-= cumulative_sum
;
1117 cumulative_sum
+= p
.yval
;
1118 this.selPoints_
.push(p
);
1121 this.selPoints_
.reverse();
1124 if (this.attr_("highlightCallback")) {
1125 var px
= this.lastx_
;
1126 if (px
!== null && lastx
!= px
) {
1127 // only fire if the selected point has changed.
1128 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1132 // Save last x position for callbacks.
1133 this.lastx_
= lastx
;
1135 this.updateSelection_();
1139 * Draw dots over the selectied points in the data series. This function
1140 * takes care of cleanup of previously-drawn dots.
1143 Dygraph
.prototype.updateSelection_
= function() {
1144 // Clear the previously drawn vertical, if there is one
1145 var circleSize
= this.attr_('highlightCircleSize');
1146 var ctx
= this.canvas_
.getContext("2d");
1147 if (this.previousVerticalX_
>= 0) {
1148 var px
= this.previousVerticalX_
;
1149 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
1152 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1154 if (this.selPoints_
.length
> 0) {
1155 var canvasx
= this.selPoints_
[0].canvasx
;
1157 // Set the status message to indicate the selected point(s)
1158 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1159 var fmtFunc
= this.attr_('yValueFormatter');
1160 var clen
= this.colors_
.length
;
1162 if (this.attr_('showLabelsOnHighlight')) {
1163 // Set the status message to indicate the selected point(s)
1164 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1165 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1166 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1167 if (this.attr_("labelsSeparateLines")) {
1170 var point
= this.selPoints_
[i
];
1171 var c
= new RGBColor(this.colors_
[i
%clen
]);
1172 var yval
= fmtFunc(point
.yval
);
1173 replace
+= " <b><font color='" + c
.toHex() + "'>"
1174 + point
.name
+ "</font></b>:"
1178 this.attr_("labelsDiv").innerHTML
= replace
;
1181 // Draw colored circles over the center of each selected point
1183 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1184 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1186 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1187 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1188 0, 2 * Math
.PI
, false);
1193 this.previousVerticalX_
= canvasx
;
1198 * Set manually set selected dots, and display information about them
1199 * @param int row number that should by highlighted
1200 * false value clears the selection
1203 Dygraph
.prototype.setSelection
= function(row
) {
1204 // Extract the points we've selected
1205 this.selPoints_
= [];
1208 if (row
!== false) {
1209 row
= row
-this.boundaryIds_
[0][0];
1212 if (row
!== false && row
>= 0) {
1213 for (var i
in this.layout_
.datasets
) {
1214 if (row
< this.layout_
.datasets
[i
].length
) {
1215 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1217 pos
+= this.layout_
.datasets
[i
].length
;
1221 if (this.selPoints_
.length
) {
1222 this.lastx_
= this.selPoints_
[0].xval
;
1223 this.updateSelection_();
1226 this.clearSelection();
1232 * The mouse has left the canvas. Clear out whatever artifacts remain
1233 * @param {Object} event the mouseout event from the browser.
1236 Dygraph
.prototype.mouseOut_
= function(event
) {
1237 if (this.attr_("unhighlightCallback")) {
1238 this.attr_("unhighlightCallback")(event
);
1241 if (this.attr_("hideOverlayOnMouseOut")) {
1242 this.clearSelection();
1247 * Remove all selection from the canvas
1250 Dygraph
.prototype.clearSelection
= function() {
1251 // Get rid of the overlay data
1252 var ctx
= this.canvas_
.getContext("2d");
1253 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1254 this.attr_("labelsDiv").innerHTML
= "";
1255 this.selPoints_
= [];
1260 * Returns the number of the currently selected row
1261 * @return int row number, of -1 if nothing is selected
1264 Dygraph
.prototype.getSelection
= function() {
1265 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1269 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1270 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1271 return row
+ this.boundaryIds_
[0][0];
1277 Dygraph
.zeropad
= function(x
) {
1278 if (x
< 10) return "0" + x
; else return "" + x
;
1282 * Return a string version of the hours, minutes and seconds portion of a date.
1283 * @param {Number} date The JavaScript date (ms since epoch)
1284 * @return {String} A time of the form "HH:MM:SS"
1287 Dygraph
.hmsString_
= function(date
) {
1288 var zeropad
= Dygraph
.zeropad
;
1289 var d
= new Date(date
);
1290 if (d
.getSeconds()) {
1291 return zeropad(d
.getHours()) + ":" +
1292 zeropad(d
.getMinutes()) + ":" +
1293 zeropad(d
.getSeconds());
1295 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1300 * Convert a JS date to a string appropriate to display on an axis that
1301 * is displaying values at the stated granularity.
1302 * @param {Date} date The date to format
1303 * @param {Number} granularity One of the Dygraph granularity constants
1304 * @return {String} The formatted date
1307 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1308 if (granularity
>= Dygraph
.MONTHLY
) {
1309 return date
.strftime('%b %y');
1311 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1312 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1313 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1315 return Dygraph
.hmsString_(date
.getTime());
1321 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1322 * @param {Number} date The JavaScript date (ms since epoch)
1323 * @return {String} A date of the form "YYYY/MM/DD"
1326 Dygraph
.dateString_
= function(date
, self
) {
1327 var zeropad
= Dygraph
.zeropad
;
1328 var d
= new Date(date
);
1331 var year
= "" + d
.getFullYear();
1332 // Get a 0 padded month string
1333 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1334 // Get a 0 padded day string
1335 var day
= zeropad(d
.getDate());
1338 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1339 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1341 return year
+ "/" + month + "/" + day
+ ret
;
1345 * Round a number to the specified number of digits past the decimal point.
1346 * @param {Number} num The number to round
1347 * @param {Number} places The number of decimals to which to round
1348 * @return {Number} The rounded number
1351 Dygraph
.round_
= function(num
, places
) {
1352 var shift
= Math
.pow(10, places
);
1353 return Math
.round(num
* shift
)/shift
;
1357 * Fires when there's data available to be graphed.
1358 * @param {String} data Raw CSV data to be plotted
1361 Dygraph
.prototype.loadedEvent_
= function(data
) {
1362 this.rawData_
= this.parseCSV_(data
);
1363 this.drawGraph_(this.rawData_
);
1366 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1367 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1368 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1371 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1374 Dygraph
.prototype.addXTicks_
= function() {
1375 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1376 var startDate
, endDate
;
1377 if (this.dateWindow_
) {
1378 startDate
= this.dateWindow_
[0];
1379 endDate
= this.dateWindow_
[1];
1381 startDate
= this.rawData_
[0][0];
1382 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1385 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1386 this.layout_
.updateOptions({xTicks
: xTicks
});
1389 // Time granularity enumeration
1390 Dygraph
.SECONDLY
= 0;
1391 Dygraph
.TWO_SECONDLY
= 1;
1392 Dygraph
.FIVE_SECONDLY
= 2;
1393 Dygraph
.TEN_SECONDLY
= 3;
1394 Dygraph
.THIRTY_SECONDLY
= 4;
1395 Dygraph
.MINUTELY
= 5;
1396 Dygraph
.TWO_MINUTELY
= 6;
1397 Dygraph
.FIVE_MINUTELY
= 7;
1398 Dygraph
.TEN_MINUTELY
= 8;
1399 Dygraph
.THIRTY_MINUTELY
= 9;
1400 Dygraph
.HOURLY
= 10;
1401 Dygraph
.TWO_HOURLY
= 11;
1402 Dygraph
.SIX_HOURLY
= 12;
1404 Dygraph
.WEEKLY
= 14;
1405 Dygraph
.MONTHLY
= 15;
1406 Dygraph
.QUARTERLY
= 16;
1407 Dygraph
.BIANNUAL
= 17;
1408 Dygraph
.ANNUAL
= 18;
1409 Dygraph
.DECADAL
= 19;
1410 Dygraph
.NUM_GRANULARITIES
= 20;
1412 Dygraph
.SHORT_SPACINGS
= [];
1413 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1414 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1415 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1416 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1417 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1418 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1419 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1420 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1421 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1422 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1423 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1424 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1425 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1426 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1427 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1431 // If we used this time granularity, how many ticks would there be?
1432 // This is only an approximation, but it's generally good enough.
1434 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1435 if (granularity
< Dygraph
.MONTHLY
) {
1436 // Generate one tick mark for every fixed interval of time.
1437 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1438 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1440 var year_mod
= 1; // e.g. to only print one point every 10 years.
1441 var num_months
= 12;
1442 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1443 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1444 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1445 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1447 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1448 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1449 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1455 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1456 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1458 // Returns an array containing {v: millis, label: label} dictionaries.
1460 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1461 var formatter
= this.attr_("xAxisLabelFormatter");
1463 if (granularity
< Dygraph
.MONTHLY
) {
1464 // Generate one tick mark for every fixed interval of time.
1465 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1466 var format
= '%d%b'; // e.g. "1Jan"
1468 // Find a time less than start_time which occurs on a "nice" time boundary
1469 // for this granularity.
1470 var g
= spacing
/ 1000;
1471 var d
= new Date(start_time
);
1472 if (g
<= 60) { // seconds
1473 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1477 if (g
<= 60) { // minutes
1478 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1483 if (g
<= 24) { // days
1484 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1489 if (g
== 7) { // one week
1490 d
.setDate(d
.getDate() - d
.getDay());
1495 start_time
= d
.getTime();
1497 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1498 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1501 // Display a tick mark on the first of a set of months of each year.
1502 // Years get a tick mark iff y % year_mod == 0. This is useful for
1503 // displaying a tick mark once every 10 years, say, on long time scales.
1505 var year_mod
= 1; // e.g. to only print one point every 10 years.
1507 if (granularity
== Dygraph
.MONTHLY
) {
1508 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1509 } else if (granularity
== Dygraph
.QUARTERLY
) {
1510 months
= [ 0, 3, 6, 9 ];
1511 } else if (granularity
== Dygraph
.BIANNUAL
) {
1513 } else if (granularity
== Dygraph
.ANNUAL
) {
1515 } else if (granularity
== Dygraph
.DECADAL
) {
1520 var start_year
= new Date(start_time
).getFullYear();
1521 var end_year
= new Date(end_time
).getFullYear();
1522 var zeropad
= Dygraph
.zeropad
;
1523 for (var i
= start_year
; i
<= end_year
; i
++) {
1524 if (i
% year_mod
!= 0) continue;
1525 for (var j
= 0; j
< months
.length
; j
++) {
1526 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1527 var t
= Date
.parse(date_str
);
1528 if (t
< start_time
|| t
> end_time
) continue;
1529 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1539 * Add ticks to the x-axis based on a date range.
1540 * @param {Number} startDate Start of the date window (millis since epoch)
1541 * @param {Number} endDate End of the date window (millis since epoch)
1542 * @return {Array.<Object>} Array of {label, value} tuples.
1545 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1547 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1548 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1549 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1556 return self
.GetXAxis(startDate
, endDate
, chosen
);
1558 // TODO(danvk): signal error.
1563 * Add ticks when the x axis has numbers on it (instead of dates)
1564 * @param {Number} startDate Start of the date window (millis since epoch)
1565 * @param {Number} endDate End of the date window (millis since epoch)
1566 * @return {Array.<Object>} Array of {label, value} tuples.
1569 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1571 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1572 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1573 // The first spacing greater than pixelsPerYLabel is what we use.
1574 // TODO(danvk): version that works on a log scale.
1575 if (self
.attr_("labelsKMG2")) {
1576 var mults
= [1, 2, 4, 8];
1578 var mults
= [1, 2, 5];
1580 var scale
, low_val
, high_val
, nTicks
;
1581 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1582 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1583 for (var i
= -10; i
< 50; i
++) {
1584 if (self
.attr_("labelsKMG2")) {
1585 var base_scale
= Math
.pow(16, i
);
1587 var base_scale
= Math
.pow(10, i
);
1589 for (var j
= 0; j
< mults
.length
; j
++) {
1590 scale
= base_scale
* mults
[j
];
1591 low_val
= Math
.floor(minV
/ scale
) * scale
;
1592 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1593 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1594 var spacing
= self
.height_
/ nTicks
;
1595 // wish I could break out of both loops at once...
1596 if (spacing
> pixelsPerTick
) break;
1598 if (spacing
> pixelsPerTick
) break;
1601 // Construct labels for the ticks
1605 if (self
.attr_("labelsKMB")) {
1607 k_labels
= [ "K", "M", "B", "T" ];
1609 if (self
.attr_("labelsKMG2")) {
1610 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1612 k_labels
= [ "k", "M", "G", "T" ];
1615 // Allow reverse y-axis if it's explicitly requested.
1616 if (low_val
> high_val
) scale
*= -1;
1618 for (var i
= 0; i
< nTicks
; i
++) {
1619 var tickV
= low_val
+ i
* scale
;
1620 var absTickV
= Math
.abs(tickV
);
1621 var label
= Dygraph
.round_(tickV
, 2);
1622 if (k_labels
.length
) {
1623 // Round up to an appropriate unit.
1625 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1626 if (absTickV
>= n
) {
1627 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1632 ticks
.push( {label
: label
, v
: tickV
} );
1638 * Adds appropriate ticks on the y-axis
1639 * @param {Number} minY The minimum Y value in the data set
1640 * @param {Number} maxY The maximum Y value in the data set
1643 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1644 // Set the number of ticks so that the labels are human-friendly.
1645 // TODO(danvk): make this an attribute as well.
1646 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1647 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1651 // Computes the range of the data series (including confidence intervals).
1652 // series is either [ [x1, y1], [x2, y2], ... ] or
1653 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1654 // Returns [low, high]
1655 Dygraph
.prototype.extremeValues_
= function(series
) {
1656 var minY
= null, maxY
= null;
1658 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1660 // With custom bars, maxY is the max of the high values.
1661 for (var j
= 0; j
< series
.length
; j
++) {
1662 var y
= series
[j
][1][0];
1664 var low
= y
- series
[j
][1][1];
1665 var high
= y
+ series
[j
][1][2];
1666 if (low
> y
) low
= y
; // this can happen with custom bars,
1667 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1668 if (maxY
== null || high
> maxY
) {
1671 if (minY
== null || low
< minY
) {
1676 for (var j
= 0; j
< series
.length
; j
++) {
1677 var y
= series
[j
][1];
1678 if (y
=== null || isNaN(y
)) continue;
1679 if (maxY
== null || y
> maxY
) {
1682 if (minY
== null || y
< minY
) {
1688 return [minY
, maxY
];
1692 * Update the graph with new data. Data is in the format
1693 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1694 * or, if errorBars=true,
1695 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1696 * @param {Array.<Object>} data The data (see above)
1699 Dygraph
.prototype.drawGraph_
= function(data
) {
1700 // This is used to set the second parameter to drawCallback, below.
1701 var is_initial_draw
= this.is_initial_draw_
;
1702 this.is_initial_draw_
= false;
1704 var minY
= null, maxY
= null;
1705 this.layout_
.removeAllDatasets();
1707 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1709 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1711 // Loop over the fields (series). Go from the last to the first,
1712 // because if they're stacked that's how we accumulate the values.
1714 var cumulative_y
= []; // For stacked series.
1717 // Loop over all fields and create datasets
1718 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1719 if (!this.visibility()[i
- 1]) continue;
1722 for (var j
= 0; j
< data
.length
; j
++) {
1723 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1724 var date
= data
[j
][0];
1725 series
.push([date
, data
[j
][i
]]);
1728 series
= this.rollingAverage(series
, this.rollPeriod_
);
1730 // Prune down to the desired range, if necessary (for zooming)
1731 // Because there can be lines going to points outside of the visible area,
1732 // we actually prune to visible points, plus one on either side.
1733 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1734 if (this.dateWindow_
) {
1735 var low
= this.dateWindow_
[0];
1736 var high
= this.dateWindow_
[1];
1738 // TODO(danvk): do binary search instead of linear search.
1739 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1740 var firstIdx
= null, lastIdx
= null;
1741 for (var k
= 0; k
< series
.length
; k
++) {
1742 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1745 if (series
[k
][0] <= high
) {
1749 if (firstIdx
=== null) firstIdx
= 0;
1750 if (firstIdx
> 0) firstIdx
--;
1751 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1752 if (lastIdx
< series
.length
- 1) lastIdx
++;
1753 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1754 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1755 pruned
.push(series
[k
]);
1759 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1762 var extremes
= this.extremeValues_(series
);
1763 var thisMinY
= extremes
[0];
1764 var thisMaxY
= extremes
[1];
1765 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1766 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1769 for (var j
=0; j
<series
.length
; j
++) {
1770 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1773 } else if (this.attr_("stackedGraph")) {
1774 var l
= series
.length
;
1776 for (var j
= 0; j
< l
; j
++) {
1777 // If one data set has a NaN, let all subsequent stacked
1778 // sets inherit the NaN -- only start at 0 for the first set.
1779 var x
= series
[j
][0];
1780 if (cumulative_y
[x
] === undefined
)
1781 cumulative_y
[x
] = 0;
1783 actual_y
= series
[j
][1];
1784 cumulative_y
[x
] += actual_y
;
1786 series
[j
] = [x
, cumulative_y
[x
]]
1788 if (!maxY
|| cumulative_y
[x
] > maxY
)
1789 maxY
= cumulative_y
[x
];
1793 datasets
[i
] = series
;
1796 for (var i
= 1; i
< datasets
.length
; i
++) {
1797 if (!this.visibility()[i
- 1]) continue;
1798 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1801 // Use some heuristics to come up with a good maxY value, unless it's been
1802 // set explicitly by the developer or end-user (via drag)
1803 if (this.valueWindow_
!= null) {
1804 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1805 this.displayedYRange_
= this.valueWindow_
;
1807 // This affects the calculation of span, below.
1808 if (this.attr_("includeZero") && minY
> 0) {
1812 // Add some padding and round up to an integer to be human-friendly.
1813 var span
= maxY
- minY
;
1814 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1815 if (span
== 0) { span
= maxY
; }
1816 var maxAxisY
= maxY
+ 0.1 * span
;
1817 var minAxisY
= minY
- 0.1 * span
;
1819 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1820 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1821 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1823 if (this.attr_("includeZero")) {
1824 if (maxY
< 0) maxAxisY
= 0;
1825 if (minY
> 0) minAxisY
= 0;
1828 this.addYTicks_(minAxisY
, maxAxisY
);
1829 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1834 // Tell PlotKit to use this new data and render itself
1835 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1836 this.layout_
.evaluateWithError();
1837 this.plotter_
.clear();
1838 this.plotter_
.render();
1839 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1840 this.canvas_
.height
);
1842 if (this.attr_("drawCallback") !== null) {
1843 this.attr_("drawCallback")(this, is_initial_draw
);
1848 * Calculates the rolling average of a data set.
1849 * If originalData is [label, val], rolls the average of those.
1850 * If originalData is [label, [, it's interpreted as [value, stddev]
1851 * and the roll is returned in the same form, with appropriately reduced
1852 * stddev for each value.
1853 * Note that this is where fractional input (i.e. '5/10') is converted into
1855 * @param {Array} originalData The data in the appropriate format (see above)
1856 * @param {Number} rollPeriod The number of days over which to average the data
1858 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1859 if (originalData
.length
< 2)
1860 return originalData
;
1861 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1862 var rollingData
= [];
1863 var sigma
= this.attr_("sigma");
1865 if (this.fractions_
) {
1867 var den
= 0; // numerator/denominator
1869 for (var i
= 0; i
< originalData
.length
; i
++) {
1870 num
+= originalData
[i
][1][0];
1871 den
+= originalData
[i
][1][1];
1872 if (i
- rollPeriod
>= 0) {
1873 num
-= originalData
[i
- rollPeriod
][1][0];
1874 den
-= originalData
[i
- rollPeriod
][1][1];
1877 var date
= originalData
[i
][0];
1878 var value
= den
? num
/ den
: 0.0;
1879 if (this.attr_("errorBars")) {
1880 if (this.wilsonInterval_
) {
1881 // For more details on this confidence interval, see:
1882 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1884 var p
= value
< 0 ? 0 : value
, n
= den
;
1885 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1886 var denom
= 1 + sigma
* sigma
/ den
;
1887 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1888 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1889 rollingData
[i
] = [date
,
1890 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1892 rollingData
[i
] = [date
, [0, 0, 0]];
1895 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1896 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1899 rollingData
[i
] = [date
, mult
* value
];
1902 } else if (this.attr_("customBars")) {
1907 for (var i
= 0; i
< originalData
.length
; i
++) {
1908 var data
= originalData
[i
][1];
1910 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1912 if (y
!= null && !isNaN(y
)) {
1918 if (i
- rollPeriod
>= 0) {
1919 var prev
= originalData
[i
- rollPeriod
];
1920 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1927 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1928 1.0 * (mid
- low
) / count
,
1929 1.0 * (high
- mid
) / count
]];
1932 // Calculate the rolling average for the first rollPeriod - 1 points where
1933 // there is not enough data to roll over the full number of days
1934 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1935 if (!this.attr_("errorBars")){
1936 if (rollPeriod
== 1) {
1937 return originalData
;
1940 for (var i
= 0; i
< originalData
.length
; i
++) {
1943 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1944 var y
= originalData
[j
][1];
1945 if (y
== null || isNaN(y
)) continue;
1947 sum
+= originalData
[j
][1];
1950 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1952 rollingData
[i
] = [originalData
[i
][0], null];
1957 for (var i
= 0; i
< originalData
.length
; i
++) {
1961 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1962 var y
= originalData
[j
][1][0];
1963 if (y
== null || isNaN(y
)) continue;
1965 sum
+= originalData
[j
][1][0];
1966 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1969 var stddev
= Math
.sqrt(variance
) / num_ok
;
1970 rollingData
[i
] = [originalData
[i
][0],
1971 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1973 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1983 * Parses a date, returning the number of milliseconds since epoch. This can be
1984 * passed in as an xValueParser in the Dygraph constructor.
1985 * TODO(danvk): enumerate formats that this understands.
1986 * @param {String} A date in YYYYMMDD format.
1987 * @return {Number} Milliseconds since epoch.
1990 Dygraph
.dateParser
= function(dateStr
, self
) {
1993 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1994 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1995 while (dateStrSlashed
.search("-") != -1) {
1996 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1998 d
= Date
.parse(dateStrSlashed
);
1999 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2000 // TODO(danvk): remove support for this format. It's confusing.
2001 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2002 + "/" + dateStr
.substr(6,2);
2003 d
= Date
.parse(dateStrSlashed
);
2005 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2006 // "2009/07/12 12:34:56"
2007 d
= Date
.parse(dateStr
);
2010 if (!d
|| isNaN(d
)) {
2011 self
.error("Couldn't parse " + dateStr
+ " as a date");
2017 * Detects the type of the str (date or numeric) and sets the various
2018 * formatting attributes in this.attrs_ based on this type.
2019 * @param {String} str An x value.
2022 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2024 if (str
.indexOf('-') >= 0 ||
2025 str
.indexOf('/') >= 0 ||
2026 isNaN(parseFloat(str
))) {
2028 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2029 // TODO(danvk): remove support for this format.
2034 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2035 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2036 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2037 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2039 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2040 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2041 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2042 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2047 * Parses a string in a special csv format. We expect a csv file where each
2048 * line is a date point, and the first field in each line is the date string.
2049 * We also expect that all remaining fields represent series.
2050 * if the errorBars attribute is set, then interpret the fields as:
2051 * date, series1, stddev1, series2, stddev2, ...
2052 * @param {Array.<Object>} data See above.
2055 * @return Array.<Object> An array with one entry for each row. These entries
2056 * are an array of cells in that row. The first entry is the parsed x-value for
2057 * the row. The second, third, etc. are the y-values. These can take on one of
2058 * three forms, depending on the CSV and constructor parameters:
2060 * 2. [ value, stddev ]
2061 * 3. [ low value, center value, high value ]
2063 Dygraph
.prototype.parseCSV_
= function(data
) {
2065 var lines
= data
.split("\n");
2067 // Use the default delimiter or fall back to a tab if that makes sense.
2068 var delim
= this.attr_('delimiter');
2069 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2074 if (this.labelsFromCSV_
) {
2076 this.attrs_
.labels
= lines
[0].split(delim
);
2079 // Parse the x as a float or return null if it's not a number.
2080 var parseFloatOrNull
= function(x
) {
2081 var val
= parseFloat(x
);
2082 return isNaN(val
) ? null : val
;
2086 var defaultParserSet
= false; // attempt to auto-detect x value type
2087 var expectedCols
= this.attr_("labels").length
;
2088 var outOfOrder
= false;
2089 for (var i
= start
; i
< lines
.length
; i
++) {
2090 var line
= lines
[i
];
2091 if (line
.length
== 0) continue; // skip blank lines
2092 if (line
[0] == '#') continue; // skip comment lines
2093 var inFields
= line
.split(delim
);
2094 if (inFields
.length
< 2) continue;
2097 if (!defaultParserSet
) {
2098 this.detectTypeFromString_(inFields
[0]);
2099 xParser
= this.attr_("xValueParser");
2100 defaultParserSet
= true;
2102 fields
[0] = xParser(inFields
[0], this);
2104 // If fractions are expected, parse the numbers as "A/B
"
2105 if (this.fractions_) {
2106 for (var j = 1; j < inFields.length; j++) {
2107 // TODO(danvk): figure out an appropriate way to flag parse errors.
2108 var vals = inFields[j].split("/");
2109 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2111 } else if (this.attr_("errorBars
")) {
2112 // If there are error bars, values are (value, stddev) pairs
2113 for (var j = 1; j < inFields.length; j += 2)
2114 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2115 parseFloatOrNull(inFields[j + 1])];
2116 } else if (this.attr_("customBars
")) {
2117 // Bars are a low;center;high tuple
2118 for (var j = 1; j < inFields.length; j++) {
2119 var vals = inFields[j].split(";");
2120 fields[j] = [ parseFloatOrNull(vals[0]),
2121 parseFloatOrNull(vals[1]),
2122 parseFloatOrNull(vals[2]) ];
2125 // Values are just numbers
2126 for (var j = 1; j < inFields.length; j++) {
2127 fields[j] = parseFloatOrNull(inFields[j]);
2130 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2135 if (fields.length != expectedCols) {
2136 this.error("Number of columns
in line
" + i + " (" + fields.length +
2137 ") does not agree
with number of
labels (" + expectedCols +
2143 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2144 ret.sort(function(a,b) { return a[0] - b[0] });
2151 * The user has provided their data as a pre-packaged JS array. If the x values
2152 * are numeric, this is the same as dygraphs' internal format. If the x values
2153 * are dates, we need to convert them from Date objects to ms since epoch.
2154 * @param {Array.<Object>} data
2155 * @return {Array.<Object>} data with numeric x values.
2157 Dygraph.prototype.parseArray_ = function(data) {
2158 // Peek at the first x value to see if it's numeric.
2159 if (data.length == 0) {
2160 this.error("Can
't plot empty data set");
2163 if (data[0].length == 0) {
2164 this.error("Data set cannot contain an empty row");
2168 if (this.attr_("labels") == null) {
2169 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2170 "in the options parameter");
2171 this.attrs_.labels = [ "X" ];
2172 for (var i = 1; i < data[0].length; i++) {
2173 this.attrs_.labels.push("Y" + i);
2177 if (Dygraph.isDateLike(data[0][0])) {
2178 // Some intelligent defaults for a date x-axis.
2179 this.attrs_.xValueFormatter = Dygraph.dateString_;
2180 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2181 this.attrs_.xTicker = Dygraph.dateTicker;
2183 // Assume they're all dates
.
2184 var parsedData
= Dygraph
.clone(data
);
2185 for (var i
= 0; i
< data
.length
; i
++) {
2186 if (parsedData
[i
].length
== 0) {
2187 this.error("Row " + (1 + i
) + " of data is empty");
2190 if (parsedData
[i
][0] == null
2191 || typeof(parsedData
[i
][0].getTime
) != 'function'
2192 || isNaN(parsedData
[i
][0].getTime())) {
2193 this.error("x value in row " + (1 + i
) + " is not a Date");
2196 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2200 // Some intelligent defaults for a numeric x-axis.
2201 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2202 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2208 * Parses a DataTable object from gviz.
2209 * The data is expected to have a first column that is either a date or a
2210 * number. All subsequent columns must be numbers. If there is a clear mismatch
2211 * between this.xValueParser_ and the type of the first column, it will be
2212 * fixed. Fills out rawData_.
2213 * @param {Array.<Object>} data See above.
2216 Dygraph
.prototype.parseDataTable_
= function(data
) {
2217 var cols
= data
.getNumberOfColumns();
2218 var rows
= data
.getNumberOfRows();
2220 var indepType
= data
.getColumnType(0);
2221 if (indepType
== 'date' || indepType
== 'datetime') {
2222 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2223 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2224 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2225 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2226 } else if (indepType
== 'number') {
2227 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2228 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2229 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2230 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2232 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2233 "column 1 of DataTable input (Got '" + indepType
+ "')");
2237 // Array of the column indices which contain data (and not annotations).
2239 var annotationCols
= {}; // data index -> [annotation cols]
2240 var hasAnnotations
= false;
2241 for (var i
= 1; i
< cols
; i
++) {
2242 var type
= data
.getColumnType(i
);
2243 if (type
== 'number') {
2245 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2246 // This is OK -- it's an annotation column.
2247 var dataIdx
= colIdx
[colIdx
.length
- 1];
2248 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2249 annotationCols
[dataIdx
] = [i
];
2251 annotationCols
[dataIdx
].push(i
);
2253 hasAnnotations
= true;
2255 this.error("Only 'number' is supported as a dependent type with Gviz." +
2256 " 'string' is only supported if displayAnnotations is true");
2260 // Read column labels
2261 // TODO(danvk): add support back for errorBars
2262 var labels
= [data
.getColumnLabel(0)];
2263 for (var i
= 0; i
< colIdx
.length
; i
++) {
2264 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2266 this.attrs_
.labels
= labels
;
2267 cols
= labels
.length
;
2270 var outOfOrder
= false;
2271 var annotations
= [];
2272 for (var i
= 0; i
< rows
; i
++) {
2274 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2275 data
.getValue(i
, 0) === null) {
2276 this.warning("Ignoring row " + i
+
2277 " of DataTable because of undefined or null first column.");
2281 if (indepType
== 'date' || indepType
== 'datetime') {
2282 row
.push(data
.getValue(i
, 0).getTime());
2284 row
.push(data
.getValue(i
, 0));
2286 if (!this.attr_("errorBars")) {
2287 for (var j
= 0; j
< colIdx
.length
; j
++) {
2288 var col
= colIdx
[j
];
2289 row
.push(data
.getValue(i
, col
));
2290 if (hasAnnotations
&&
2291 annotationCols
.hasOwnProperty(col
) &&
2292 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2294 ann
.series
= data
.getColumnLabel(col
);
2296 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2298 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2299 if (k
) ann
.text
+= "\n";
2300 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2302 annotations
.push(ann
);
2306 for (var j
= 0; j
< cols
- 1; j
++) {
2307 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2310 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2317 this.warn("DataTable is out of order; order it correctly to speed loading.");
2318 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2320 this.rawData_
= ret
;
2322 if (annotations
.length
> 0) {
2323 this.setAnnotations(annotations
, true);
2327 // These functions are all based on MochiKit.
2328 Dygraph
.update
= function (self
, o
) {
2329 if (typeof(o
) != 'undefined' && o
!== null) {
2331 if (o
.hasOwnProperty(k
)) {
2339 Dygraph
.isArrayLike
= function (o
) {
2340 var typ
= typeof(o
);
2342 (typ
!= 'object' && !(typ
== 'function' &&
2343 typeof(o
.item
) == 'function')) ||
2345 typeof(o
.length
) != 'number' ||
2353 Dygraph
.isDateLike
= function (o
) {
2354 if (typeof(o
) != "object" || o
=== null ||
2355 typeof(o
.getTime
) != 'function') {
2361 Dygraph
.clone
= function(o
) {
2362 // TODO(danvk): figure out how MochiKit's version works
2364 for (var i
= 0; i
< o
.length
; i
++) {
2365 if (Dygraph
.isArrayLike(o
[i
])) {
2366 r
.push(Dygraph
.clone(o
[i
]));
2376 * Get the CSV data. If it's in a function, call that function. If it's in a
2377 * file, do an XMLHttpRequest to get it.
2380 Dygraph
.prototype.start_
= function() {
2381 if (typeof this.file_
== 'function') {
2382 // CSV string. Pretend we got it via XHR.
2383 this.loadedEvent_(this.file_());
2384 } else if (Dygraph
.isArrayLike(this.file_
)) {
2385 this.rawData_
= this.parseArray_(this.file_
);
2386 this.drawGraph_(this.rawData_
);
2387 } else if (typeof this.file_
== 'object' &&
2388 typeof this.file_
.getColumnRange
== 'function') {
2389 // must be a DataTable from gviz.
2390 this.parseDataTable_(this.file_
);
2391 this.drawGraph_(this.rawData_
);
2392 } else if (typeof this.file_
== 'string') {
2393 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2394 if (this.file_
.indexOf('\n') >= 0) {
2395 this.loadedEvent_(this.file_
);
2397 var req
= new XMLHttpRequest();
2399 req
.onreadystatechange
= function () {
2400 if (req
.readyState
== 4) {
2401 if (req
.status
== 200) {
2402 caller
.loadedEvent_(req
.responseText
);
2407 req
.open("GET", this.file_
, true);
2411 this.error("Unknown data format: " + (typeof this.file_
));
2416 * Changes various properties of the graph. These can include:
2418 * <li>file: changes the source data for the graph</li>
2419 * <li>errorBars: changes whether the data contains stddev</li>
2421 * @param {Object} attrs The new properties and values
2423 Dygraph
.prototype.updateOptions
= function(attrs
) {
2424 // TODO(danvk): this is a mess. Rethink this function.
2425 if (attrs
.rollPeriod
) {
2426 this.rollPeriod_
= attrs
.rollPeriod
;
2428 if (attrs
.dateWindow
) {
2429 this.dateWindow_
= attrs
.dateWindow
;
2431 if (attrs
.valueRange
) {
2432 this.valueRange_
= attrs
.valueRange
;
2434 Dygraph
.update(this.user_attrs_
, attrs
);
2435 Dygraph
.update(this.renderOptions_
, attrs
);
2437 this.labelsFromCSV_
= (this.attr_("labels") == null);
2439 // TODO(danvk): this doesn't match the constructor logic
2440 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2441 if (attrs
['file']) {
2442 this.file_
= attrs
['file'];
2445 this.drawGraph_(this.rawData_
);
2450 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2451 * containing div (which has presumably changed size since the dygraph was
2452 * instantiated. If the width/height are specified, the div will be resized.
2454 * This is far more efficient than destroying and re-instantiating a
2455 * Dygraph, since it doesn't have to reparse the underlying data.
2457 * @param {Number} width Width (in pixels)
2458 * @param {Number} height Height (in pixels)
2460 Dygraph
.prototype.resize
= function(width
, height
) {
2461 if (this.resize_lock
) {
2464 this.resize_lock
= true;
2466 if ((width
=== null) != (height
=== null)) {
2467 this.warn("Dygraph.resize() should be called with zero parameters or " +
2468 "two non-NULL parameters. Pretending it was zero.");
2469 width
= height
= null;
2472 // TODO(danvk): there should be a clear() method.
2473 this.maindiv_
.innerHTML
= "";
2474 this.attrs_
.labelsDiv
= null;
2477 this.maindiv_
.style
.width
= width
+ "px";
2478 this.maindiv_
.style
.height
= height
+ "px";
2479 this.width_
= width
;
2480 this.height_
= height
;
2482 this.width_
= this.maindiv_
.offsetWidth
;
2483 this.height_
= this.maindiv_
.offsetHeight
;
2486 this.createInterface_();
2487 this.drawGraph_(this.rawData_
);
2489 this.resize_lock
= false;
2493 * Adjusts the number of days in the rolling average. Updates the graph to
2494 * reflect the new averaging period.
2495 * @param {Number} length Number of days over which to average the data.
2497 Dygraph
.prototype.adjustRoll
= function(length
) {
2498 this.rollPeriod_
= length
;
2499 this.drawGraph_(this.rawData_
);
2503 * Returns a boolean array of visibility statuses.
2505 Dygraph
.prototype.visibility
= function() {
2506 // Do lazy-initialization, so that this happens after we know the number of
2508 if (!this.attr_("visibility")) {
2509 this.attrs_
["visibility"] = [];
2511 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2512 this.attr_("visibility").push(true);
2514 return this.attr_("visibility");
2518 * Changes the visiblity of a series.
2520 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2521 var x
= this.visibility();
2522 if (num
< 0 && num
>= x
.length
) {
2523 this.warn("invalid series number in setVisibility: " + num
);
2526 this.drawGraph_(this.rawData_
);
2531 * Update the list of annotations and redraw the chart.
2533 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2534 this.annotations_
= ann
;
2535 this.layout_
.setAnnotations(this.annotations_
);
2536 if (!suppressDraw
) {
2537 this.drawGraph_(this.rawData_
);
2542 * Return the list of annotations.
2544 Dygraph
.prototype.annotations
= function() {
2545 return this.annotations_
;
2548 Dygraph
.addAnnotationRule
= function() {
2549 if (Dygraph
.addedAnnotationCSS
) return;
2552 if (document
.styleSheets
.length
> 0) {
2553 mysheet
= document
.styleSheets
[0];
2555 var styleSheetElement
= document
.createElement("style");
2556 styleSheetElement
.type
= "text/css";
2557 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2558 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2559 if (document
.styleSheets
[i
].disabled
) continue;
2560 mysheet
= document
.styleSheets
[i
];
2564 var rule
= "border: 1px solid black; " +
2565 "background-color: white; " +
2566 "text-align: center;";
2567 if (mysheet
.insertRule
) { // Firefox
2568 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2569 } else if (mysheet
.addRule
) { // IE
2570 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2573 Dygraph
.addedAnnotationCSS
= true;
2577 * Create a new canvas element. This is more complex than a simple
2578 * document.createElement("canvas") because of IE and excanvas.
2580 Dygraph
.createCanvas
= function() {
2581 var canvas
= document
.createElement("canvas");
2583 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2585 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2593 * A wrapper around Dygraph that implements the gviz API.
2594 * @param {Object} container The DOM object the visualization should live in.
2596 Dygraph
.GVizChart
= function(container
) {
2597 this.container
= container
;
2600 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2601 this.container
.innerHTML
= '';
2602 this.date_graph
= new Dygraph(this.container
, data
, options
);
2606 * Google charts compatible setSelection
2607 * Only row selection is supported, all points in the row will be highlighted
2608 * @param {Array} array of the selected cells
2611 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2613 if (selection_array
.length
) {
2614 row
= selection_array
[0].row
;
2616 this.date_graph
.setSelection(row
);
2620 * Google charts compatible getSelection implementation
2621 * @return {Array} array of the selected cells
2624 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2627 var row
= this.date_graph
.getSelection();
2629 if (row
< 0) return selection
;
2632 for (var i
in this.date_graph
.layout_
.datasets
) {
2633 selection
.push({row
: row
, column
: col
});
2640 // Older pages may still use this name.
2641 DateGraph
= Dygraph
;