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,
133 // Various logging levels.
139 // Used for initializing annotation CSS rules only once.
140 Dygraph
.addedAnnotationCSS
= false;
142 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
143 // Labels is no longer a constructor parameter, since it's typically set
144 // directly from the data source. It also conains a name for the x-axis,
145 // which the previous constructor form did not.
146 if (labels
!= null) {
147 var new_labels
= ["Date"];
148 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
149 Dygraph
.update(attrs
, { 'labels': new_labels
});
151 this.__init__(div
, file
, attrs
);
155 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
156 * and interaction <canvas> inside of it. See the constructor for details
158 * @param {Element} div the Element to render the graph into.
159 * @param {String | Function} file Source data
160 * @param {Object} attrs Miscellaneous other options
163 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
164 // Support two-argument constructor
165 if (attrs
== null) { attrs
= {}; }
167 // Copy the important bits into the object
168 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
171 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
172 this.previousVerticalX_
= -1;
173 this.fractions_
= attrs
.fractions
|| false;
174 this.dateWindow_
= attrs
.dateWindow
|| null;
175 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
176 this.is_initial_draw_
= true;
177 this.annotations_
= [];
179 // Clear the div. This ensure that, if multiple dygraphs are passed the same
180 // div, then only one will be drawn.
183 // If the div isn't already sized then inherit from our attrs or
184 // give it a default size.
185 if (div
.style
.width
== '') {
186 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
188 if (div
.style
.height
== '') {
189 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
191 this.width_
= parseInt(div
.style
.width
, 10);
192 this.height_
= parseInt(div
.style
.height
, 10);
193 // The div might have been specified as percent of the current window size,
194 // convert that to an appropriate number of pixels.
195 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
196 this.width_
= div
.offsetWidth
;
198 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
199 this.height_
= div
.offsetHeight
;
202 if (this.width_
== 0) {
203 this.error("dygraph has zero width. Please specify a width in pixels.");
205 if (this.height_
== 0) {
206 this.error("dygraph has zero height. Please specify a height in pixels.");
209 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
210 if (attrs
['stackedGraph']) {
211 attrs
['fillGraph'] = true;
212 // TODO(nikhilk): Add any other stackedGraph checks here.
215 // Dygraphs has many options, some of which interact with one another.
216 // To keep track of everything, we maintain two sets of options:
218 // this.user_attrs_ only options explicitly set by the user.
219 // this.attrs_ defaults, options derived from user_attrs_, data.
221 // Options are then accessed this.attr_('attr'), which first looks at
222 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
223 // defaults without overriding behavior that the user specifically asks for.
224 this.user_attrs_
= {};
225 Dygraph
.update(this.user_attrs_
, attrs
);
228 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
230 this.boundaryIds_
= [];
232 // Make a note of whether labels will be pulled from the CSV file.
233 this.labelsFromCSV_
= (this.attr_("labels") == null);
235 // Create the containing DIV and other interactive elements
236 this.createInterface_();
241 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
243 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
244 this.user_attrs_
[seriesName
] != null &&
245 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
246 return this.user_attrs_
[seriesName
][name
];
247 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
248 return this.user_attrs_
[name
];
249 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
250 return this.attrs_
[name
];
256 // TODO(danvk): any way I can get the line numbers to be this.warn call?
257 Dygraph
.prototype.log
= function(severity
, message
) {
258 if (typeof(console
) != 'undefined') {
261 console
.debug('dygraphs: ' + message
);
264 console
.info('dygraphs: ' + message
);
266 case Dygraph
.WARNING
:
267 console
.warn('dygraphs: ' + message
);
270 console
.error('dygraphs: ' + message
);
275 Dygraph
.prototype.info
= function(message
) {
276 this.log(Dygraph
.INFO
, message
);
278 Dygraph
.prototype.warn
= function(message
) {
279 this.log(Dygraph
.WARNING
, message
);
281 Dygraph
.prototype.error
= function(message
) {
282 this.log(Dygraph
.ERROR
, message
);
286 * Returns the current rolling period, as set by the user or an option.
287 * @return {Number} The number of days in the rolling window
289 Dygraph
.prototype.rollPeriod
= function() {
290 return this.rollPeriod_
;
294 * Returns the currently-visible x-range. This can be affected by zooming,
295 * panning or a call to updateOptions.
296 * Returns a two-element array: [left, right].
297 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
299 Dygraph
.prototype.xAxisRange
= function() {
300 if (this.dateWindow_
) return this.dateWindow_
;
302 // The entire chart is visible.
303 var left
= this.rawData_
[0][0];
304 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
305 return [left
, right
];
309 * Returns the currently-visible y-range. This can be affected by zooming,
310 * panning or a call to updateOptions.
311 * Returns a two-element array: [bottom, top].
313 Dygraph
.prototype.yAxisRange
= function() {
314 return this.displayedYRange_
;
318 * Convert from data coordinates to canvas/div X/Y coordinates.
319 * Returns a two-element array: [X, Y]
321 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
322 var ret
= [null, null];
323 var area
= this.plotter_
.area
;
325 var xRange
= this.xAxisRange();
326 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
330 var yRange
= this.yAxisRange();
331 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
337 // TODO(danvk): use these functions throughout dygraphs.
339 * Convert from canvas/div coords to data coordinates.
340 * Returns a two-element array: [X, Y]
342 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
343 var ret
= [null, null];
344 var area
= this.plotter_
.area
;
346 var xRange
= this.xAxisRange();
347 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
351 var yRange
= this.yAxisRange();
352 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
359 * Returns the number of columns (including the independent variable).
361 Dygraph
.prototype.numColumns
= function() {
362 return this.rawData_
[0].length
;
366 * Returns the number of rows (excluding any header/label row).
368 Dygraph
.prototype.numRows
= function() {
369 return this.rawData_
.length
;
373 * Returns the value in the given row and column. If the row and column exceed
374 * the bounds on the data, returns null. Also returns null if the value is
377 Dygraph
.prototype.getValue
= function(row
, col
) {
378 if (row
< 0 || row
> this.rawData_
.length
) return null;
379 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
381 return this.rawData_
[row
][col
];
384 Dygraph
.addEvent
= function(el
, evt
, fn
) {
385 var normed_fn
= function(e
) {
386 if (!e
) var e
= window
.event
;
389 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
390 el
.addEventListener(evt
, normed_fn
, false);
392 el
.attachEvent('on' + evt
, normed_fn
);
397 * Generates interface elements for the Dygraph: a containing div, a div to
398 * display the current point, and a textbox to adjust the rolling average
399 * period. Also creates the Renderer/Layout elements.
402 Dygraph
.prototype.createInterface_
= function() {
403 // Create the all-enclosing graph div
404 var enclosing
= this.maindiv_
;
406 this.graphDiv
= document
.createElement("div");
407 this.graphDiv
.style
.width
= this.width_
+ "px";
408 this.graphDiv
.style
.height
= this.height_
+ "px";
409 enclosing
.appendChild(this.graphDiv
);
411 // Create the canvas for interactive parts of the chart.
412 this.canvas_
= Dygraph
.createCanvas();
413 this.canvas_
.style
.position
= "absolute";
414 this.canvas_
.width
= this.width_
;
415 this.canvas_
.height
= this.height_
;
416 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
417 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
419 // ... and for static parts of the chart.
420 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
422 // The interactive parts of the graph are drawn on top of the chart.
423 this.graphDiv
.appendChild(this.hidden_
);
424 this.graphDiv
.appendChild(this.canvas_
);
425 this.mouseEventElement_
= this.canvas_
;
428 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
429 dygraph
.mouseMove_(e
);
431 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
432 dygraph
.mouseOut_(e
);
435 // Create the grapher
436 // TODO(danvk): why does the Layout need its own set of options?
437 this.layoutOptions_
= { 'xOriginIsZero': false };
438 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
439 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
440 Dygraph
.update(this.layoutOptions_
, {
441 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
443 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
445 // TODO(danvk): why does the Renderer need its own set of options?
446 this.renderOptions_
= { colorScheme
: this.colors_
,
448 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
449 Dygraph
.update(this.renderOptions_
, this.attrs_
);
450 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
452 this.createStatusMessage_();
453 this.createDragInterface_();
457 * Detach DOM elements in the dygraph and null out all data references.
458 * Calling this when you're done with a dygraph can dramatically reduce memory
459 * usage. See, e.g., the tests/perf.html example.
461 Dygraph
.prototype.destroy
= function() {
462 var removeRecursive
= function(node
) {
463 while (node
.hasChildNodes()) {
464 removeRecursive(node
.firstChild
);
465 node
.removeChild(node
.firstChild
);
468 removeRecursive(this.maindiv_
);
470 var nullOut
= function(obj
) {
472 if (typeof(obj
[n
]) === 'object') {
478 // These may not all be necessary, but it can't hurt...
479 nullOut(this.layout_
);
480 nullOut(this.plotter_
);
485 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
486 * this particular canvas. All Dygraph work is done on this.canvas_.
487 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
488 * @return {Object} The newly-created canvas
491 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
492 var h
= Dygraph
.createCanvas();
493 h
.style
.position
= "absolute";
494 // TODO(danvk): h should be offset from canvas. canvas needs to include
495 // some extra area to make it easier to zoom in on the far left and far
496 // right. h needs to be precisely the plot area, so that clipping occurs.
497 h
.style
.top
= canvas
.style
.top
;
498 h
.style
.left
= canvas
.style
.left
;
499 h
.width
= this.width_
;
500 h
.height
= this.height_
;
501 h
.style
.width
= this.width_
+ "px"; // for IE
502 h
.style
.height
= this.height_
+ "px"; // for IE
506 // Taken from MochiKit.Color
507 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
511 if (saturation
=== 0) {
516 var i
= Math
.floor(hue
* 6);
517 var f
= (hue
* 6) - i
;
518 var p
= value
* (1 - saturation
);
519 var q
= value
* (1 - (saturation
* f
));
520 var t
= value
* (1 - (saturation
* (1 - f
)));
522 case 1: red
= q
; green
= value
; blue
= p
; break;
523 case 2: red
= p
; green
= value
; blue
= t
; break;
524 case 3: red
= p
; green
= q
; blue
= value
; break;
525 case 4: red
= t
; green
= p
; blue
= value
; break;
526 case 5: red
= value
; green
= p
; blue
= q
; break;
527 case 6: // fall through
528 case 0: red
= value
; green
= t
; blue
= p
; break;
531 red
= Math
.floor(255 * red
+ 0.5);
532 green
= Math
.floor(255 * green
+ 0.5);
533 blue
= Math
.floor(255 * blue
+ 0.5);
534 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
539 * Generate a set of distinct colors for the data series. This is done with a
540 * color wheel. Saturation/Value are customizable, and the hue is
541 * equally-spaced around the color wheel. If a custom set of colors is
542 * specified, that is used instead.
545 Dygraph
.prototype.setColors_
= function() {
546 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
547 // away with this.renderOptions_.
548 var num
= this.attr_("labels").length
- 1;
550 var colors
= this.attr_('colors');
552 var sat
= this.attr_('colorSaturation') || 1.0;
553 var val
= this.attr_('colorValue') || 0.5;
554 var half
= Math
.ceil(num
/ 2);
555 for (var i
= 1; i
<= num
; i
++) {
556 if (!this.visibility()[i
-1]) continue;
557 // alternate colors for high contrast.
558 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
559 var hue
= (1.0 * idx
/ (1 + num
));
560 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
563 for (var i
= 0; i
< num
; i
++) {
564 if (!this.visibility()[i
]) continue;
565 var colorStr
= colors
[i
% colors
.length
];
566 this.colors_
.push(colorStr
);
570 // TODO(danvk): update this w/r
/t/ the
new options system
.
571 this.renderOptions_
.colorScheme
= this.colors_
;
572 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
573 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
574 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
578 * Return the list of colors. This is either the list of colors passed in the
579 * attributes, or the autogenerated list of rgb(r,g,b) strings.
580 * @return {Array<string>} The list of colors.
582 Dygraph
.prototype.getColors
= function() {
586 // The following functions are from quirksmode.org with a modification for Safari from
587 // http://blog.firetree.net/2005/07/04/javascript-find-position/
588 // http://www.quirksmode.org/js
/findpos
.html
589 Dygraph
.findPosX
= function(obj
) {
594 curleft
+= obj
.offsetLeft
;
595 if(!obj
.offsetParent
)
597 obj
= obj
.offsetParent
;
604 Dygraph
.findPosY
= function(obj
) {
609 curtop
+= obj
.offsetTop
;
610 if(!obj
.offsetParent
)
612 obj
= obj
.offsetParent
;
622 * Create the div that contains information on the selected point(s)
623 * This goes in the top right of the canvas, unless an external div has already
627 Dygraph
.prototype.createStatusMessage_
= function() {
628 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
629 if (userLabelsDiv
&& null != userLabelsDiv
630 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
631 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
633 if (!this.attr_("labelsDiv")) {
634 var divWidth
= this.attr_('labelsDivWidth');
636 "position": "absolute",
639 "width": divWidth
+ "px",
641 "left": (this.width_
- divWidth
- 2) + "px",
642 "background": "white",
644 "overflow": "hidden"};
645 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
646 var div
= document
.createElement("div");
647 for (var name
in messagestyle
) {
648 if (messagestyle
.hasOwnProperty(name
)) {
649 div
.style
[name
] = messagestyle
[name
];
652 this.graphDiv
.appendChild(div
);
653 this.attrs_
.labelsDiv
= div
;
658 * Create the text box to adjust the averaging period
659 * @return {Object} The newly-created text box
662 Dygraph
.prototype.createRollInterface_
= function() {
663 // Destroy any existing roller.
664 if (this.roller_
) this.graphDiv
.removeChild(this.roller_
);
666 var display
= this.attr_('showRoller') ? "block" : "none";
667 var textAttr
= { "position": "absolute",
669 "top": (this.plotter_
.area
.h
- 25) + "px",
670 "left": (this.plotter_
.area
.x
+ 1) + "px",
673 var roller
= document
.createElement("input");
674 roller
.type
= "text";
676 roller
.value
= this.rollPeriod_
;
677 for (var name
in textAttr
) {
678 if (textAttr
.hasOwnProperty(name
)) {
679 roller
.style
[name
] = textAttr
[name
];
683 var pa
= this.graphDiv
;
684 pa
.appendChild(roller
);
686 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
690 // These functions are taken from MochiKit.Signal
691 Dygraph
.pageX
= function(e
) {
693 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
696 var b
= document
.body
;
698 (de
.scrollLeft
|| b
.scrollLeft
) -
699 (de
.clientLeft
|| 0);
703 Dygraph
.pageY
= function(e
) {
705 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
708 var b
= document
.body
;
710 (de
.scrollTop
|| b
.scrollTop
) -
716 * Set up all the mouse handlers needed to capture dragging behavior for zoom
720 Dygraph
.prototype.createDragInterface_
= function() {
723 // Tracks whether the mouse is down right now
724 var isZooming
= false;
725 var isPanning
= false;
726 var dragStartX
= null;
727 var dragStartY
= null;
731 var draggingDate
= null;
732 var dateRange
= null;
734 // Utility function to convert page-wide coordinates to canvas coords
737 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
738 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
740 // Draw zoom rectangles when the mouse is down and the user moves around
741 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
743 dragEndX
= getX(event
);
744 dragEndY
= getY(event
);
746 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
748 } else if (isPanning
) {
749 dragEndX
= getX(event
);
750 dragEndY
= getY(event
);
752 // Want to have it so that:
753 // 1. draggingDate appears at dragEndX
754 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
756 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
757 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
762 // Track the beginning of drag events
763 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
764 px
= Dygraph
.findPosX(self
.canvas_
);
765 py
= Dygraph
.findPosY(self
.canvas_
);
766 dragStartX
= getX(event
);
767 dragStartY
= getY(event
);
769 if (event
.altKey
|| event
.shiftKey
) {
770 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
772 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
773 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
780 // If the user releases the mouse button during a drag, but not over the
781 // canvas, then it doesn't count as a zooming action.
782 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
783 if (isZooming
|| isPanning
) {
796 // Temporarily cancel the dragging event when the mouse leaves the graph
797 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
804 // If the mouse is released on the canvas during a drag event, then it's a
805 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
806 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
809 dragEndX
= getX(event
);
810 dragEndY
= getY(event
);
811 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
812 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
814 if (regionWidth
< 2 && regionHeight
< 2 &&
815 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
816 // TODO(danvk): pass along more info about the points, e.g. 'x'
817 if (self
.attr_('clickCallback') != null) {
818 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
820 if (self
.attr_('pointClickCallback')) {
821 // check if the click was on a particular point.
823 var closestDistance
= 0;
824 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
825 var p
= self
.selPoints_
[i
];
826 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
827 Math
.pow(p
.canvasy
- dragEndY
, 2);
828 if (closestIdx
== -1 || distance
< closestDistance
) {
829 closestDistance
= distance
;
834 // Allow any click within two pixels of the dot.
835 var radius
= self
.attr_('highlightCircleSize') + 2;
836 if (closestDistance
<= 5 * 5) {
837 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
842 if (regionWidth
>= 10) {
843 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
844 Math
.max(dragStartX
, dragEndX
));
846 self
.canvas_
.getContext("2d").clearRect(0, 0,
848 self
.canvas_
.height
);
862 // Double-clicking zooms back out
863 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
864 if (self
.dateWindow_
== null) return;
865 self
.dateWindow_
= null;
867 var minDate
= self
.rawData_
[0][0];
868 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
869 if (self
.attr_("zoomCallback")) {
870 self
.attr_("zoomCallback")(minDate
, maxDate
);
876 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
877 * up any previous zoom rectangles that were drawn. This could be optimized to
878 * avoid extra redrawing, but it's tricky to avoid interactions with the status
880 * @param {Number} startX The X position where the drag started, in canvas
882 * @param {Number} endX The current X position of the drag, in canvas coords.
883 * @param {Number} prevEndX The value of endX on the previous call to this
884 * function. Used to avoid excess redrawing
887 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
888 var ctx
= this.canvas_
.getContext("2d");
890 // Clean up from the previous rect if necessary
892 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
893 Math
.abs(startX
- prevEndX
), this.height_
);
896 // Draw a light-grey rectangle to show the new viewing area
897 if (endX
&& startX
) {
898 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
899 ctx
.fillRect(Math
.min(startX
, endX
), 0,
900 Math
.abs(endX
- startX
), this.height_
);
905 * Zoom to something containing [lowX, highX]. These are pixel coordinates
906 * in the canvas. The exact zoom window may be slightly larger if there are no
907 * data points near lowX or highX. This function redraws the graph.
908 * @param {Number} lowX The leftmost pixel value that should be visible.
909 * @param {Number} highX The rightmost pixel value that should be visible.
912 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
913 // Find the earliest and latest dates contained in this canvasx range.
914 var r
= this.toDataCoords(lowX
, null);
916 r
= this.toDataCoords(highX
, null);
919 this.dateWindow_
= [minDate
, maxDate
];
921 if (this.attr_("zoomCallback")) {
922 this.attr_("zoomCallback")(minDate
, maxDate
);
927 * When the mouse moves in the canvas, display information about a nearby data
928 * point and draw dots over those points in the data series. This function
929 * takes care of cleanup of previously-drawn dots.
930 * @param {Object} event The mousemove event from the browser.
933 Dygraph
.prototype.mouseMove_
= function(event
) {
934 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
935 var points
= this.layout_
.points
;
940 // Loop through all the points and find the date nearest to our current
942 var minDist
= 1e+100;
944 for (var i
= 0; i
< points
.length
; i
++) {
945 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
946 if (dist
> minDist
) continue;
950 if (idx
>= 0) lastx
= points
[idx
].xval
;
951 // Check that you can really highlight the last day's data
952 if (canvasx
> points
[points
.length
-1].canvasx
)
953 lastx
= points
[points
.length
-1].xval
;
955 // Extract the points we've selected
956 this.selPoints_
= [];
957 var l
= points
.length
;
958 if (!this.attr_("stackedGraph")) {
959 for (var i
= 0; i
< l
; i
++) {
960 if (points
[i
].xval
== lastx
) {
961 this.selPoints_
.push(points
[i
]);
965 // Need to 'unstack' points starting from the bottom
966 var cumulative_sum
= 0;
967 for (var i
= l
- 1; i
>= 0; i
--) {
968 if (points
[i
].xval
== lastx
) {
969 var p
= {}; // Clone the point since we modify it
970 for (var k
in points
[i
]) {
973 p
.yval
-= cumulative_sum
;
974 cumulative_sum
+= p
.yval
;
975 this.selPoints_
.push(p
);
978 this.selPoints_
.reverse();
981 if (this.attr_("highlightCallback")) {
982 var px
= this.lastx_
;
983 if (px
!== null && lastx
!= px
) {
984 // only fire if the selected point has changed.
985 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
989 // Save last x position for callbacks.
992 this.updateSelection_();
996 * Draw dots over the selectied points in the data series. This function
997 * takes care of cleanup of previously-drawn dots.
1000 Dygraph
.prototype.updateSelection_
= function() {
1001 // Clear the previously drawn vertical, if there is one
1002 var ctx
= this.canvas_
.getContext("2d");
1003 if (this.previousVerticalX_
>= 0) {
1004 // Determine the maximum highlight circle size.
1005 var maxCircleSize
= 0;
1006 var labels
= this.attr_('labels');
1007 for (var i
= 1; i
< labels
.length
; i
++) {
1008 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1009 if (r
> maxCircleSize
) maxCircleSize
= r
;
1011 var px
= this.previousVerticalX_
;
1012 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1013 2 * maxCircleSize
+ 2, this.height_
);
1016 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1018 if (this.selPoints_
.length
> 0) {
1019 var canvasx
= this.selPoints_
[0].canvasx
;
1021 // Set the status message to indicate the selected point(s)
1022 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1023 var fmtFunc
= this.attr_('yValueFormatter');
1024 var clen
= this.colors_
.length
;
1026 if (this.attr_('showLabelsOnHighlight')) {
1027 // Set the status message to indicate the selected point(s)
1028 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1029 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1030 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1031 if (this.attr_("labelsSeparateLines")) {
1034 var point
= this.selPoints_
[i
];
1035 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1036 var yval
= fmtFunc(point
.yval
);
1037 replace
+= " <b><font color='" + c
.toHex() + "'>"
1038 + point
.name
+ "</font></b>:"
1042 this.attr_("labelsDiv").innerHTML
= replace
;
1045 // Draw colored circles over the center of each selected point
1047 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1048 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1050 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1052 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1053 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1054 0, 2 * Math
.PI
, false);
1059 this.previousVerticalX_
= canvasx
;
1064 * Set manually set selected dots, and display information about them
1065 * @param int row number that should by highlighted
1066 * false value clears the selection
1069 Dygraph
.prototype.setSelection
= function(row
) {
1070 // Extract the points we've selected
1071 this.selPoints_
= [];
1074 if (row
!== false) {
1075 row
= row
-this.boundaryIds_
[0][0];
1078 if (row
!== false && row
>= 0) {
1079 for (var i
in this.layout_
.datasets
) {
1080 if (row
< this.layout_
.datasets
[i
].length
) {
1081 var point
= this.layout_
.points
[pos
+row
];
1083 if (this.attr_("stackedGraph")) {
1084 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1087 this.selPoints_
.push(point
);
1089 pos
+= this.layout_
.datasets
[i
].length
;
1093 if (this.selPoints_
.length
) {
1094 this.lastx_
= this.selPoints_
[0].xval
;
1095 this.updateSelection_();
1098 this.clearSelection();
1104 * The mouse has left the canvas. Clear out whatever artifacts remain
1105 * @param {Object} event the mouseout event from the browser.
1108 Dygraph
.prototype.mouseOut_
= function(event
) {
1109 if (this.attr_("unhighlightCallback")) {
1110 this.attr_("unhighlightCallback")(event
);
1113 if (this.attr_("hideOverlayOnMouseOut")) {
1114 this.clearSelection();
1119 * Remove all selection from the canvas
1122 Dygraph
.prototype.clearSelection
= function() {
1123 // Get rid of the overlay data
1124 var ctx
= this.canvas_
.getContext("2d");
1125 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1126 this.attr_("labelsDiv").innerHTML
= "";
1127 this.selPoints_
= [];
1132 * Returns the number of the currently selected row
1133 * @return int row number, of -1 if nothing is selected
1136 Dygraph
.prototype.getSelection
= function() {
1137 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1141 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1142 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1143 return row
+ this.boundaryIds_
[0][0];
1149 Dygraph
.zeropad
= function(x
) {
1150 if (x
< 10) return "0" + x
; else return "" + x
;
1154 * Return a string version of the hours, minutes and seconds portion of a date.
1155 * @param {Number} date The JavaScript date (ms since epoch)
1156 * @return {String} A time of the form "HH:MM:SS"
1159 Dygraph
.hmsString_
= function(date
) {
1160 var zeropad
= Dygraph
.zeropad
;
1161 var d
= new Date(date
);
1162 if (d
.getSeconds()) {
1163 return zeropad(d
.getHours()) + ":" +
1164 zeropad(d
.getMinutes()) + ":" +
1165 zeropad(d
.getSeconds());
1167 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1172 * Convert a JS date to a string appropriate to display on an axis that
1173 * is displaying values at the stated granularity.
1174 * @param {Date} date The date to format
1175 * @param {Number} granularity One of the Dygraph granularity constants
1176 * @return {String} The formatted date
1179 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1180 if (granularity
>= Dygraph
.MONTHLY
) {
1181 return date
.strftime('%b %y');
1183 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1184 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1185 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1187 return Dygraph
.hmsString_(date
.getTime());
1193 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1194 * @param {Number} date The JavaScript date (ms since epoch)
1195 * @return {String} A date of the form "YYYY/MM/DD"
1198 Dygraph
.dateString_
= function(date
, self
) {
1199 var zeropad
= Dygraph
.zeropad
;
1200 var d
= new Date(date
);
1203 var year
= "" + d
.getFullYear();
1204 // Get a 0 padded month string
1205 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1206 // Get a 0 padded day string
1207 var day
= zeropad(d
.getDate());
1210 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1211 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1213 return year
+ "/" + month + "/" + day
+ ret
;
1217 * Round a number to the specified number of digits past the decimal point.
1218 * @param {Number} num The number to round
1219 * @param {Number} places The number of decimals to which to round
1220 * @return {Number} The rounded number
1223 Dygraph
.round_
= function(num
, places
) {
1224 var shift
= Math
.pow(10, places
);
1225 return Math
.round(num
* shift
)/shift
;
1229 * Fires when there's data available to be graphed.
1230 * @param {String} data Raw CSV data to be plotted
1233 Dygraph
.prototype.loadedEvent_
= function(data
) {
1234 this.rawData_
= this.parseCSV_(data
);
1238 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1239 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1240 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1243 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1246 Dygraph
.prototype.addXTicks_
= function() {
1247 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1248 var startDate
, endDate
;
1249 if (this.dateWindow_
) {
1250 startDate
= this.dateWindow_
[0];
1251 endDate
= this.dateWindow_
[1];
1253 startDate
= this.rawData_
[0][0];
1254 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1257 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1258 this.layout_
.updateOptions({xTicks
: xTicks
});
1261 // Time granularity enumeration
1262 Dygraph
.SECONDLY
= 0;
1263 Dygraph
.TWO_SECONDLY
= 1;
1264 Dygraph
.FIVE_SECONDLY
= 2;
1265 Dygraph
.TEN_SECONDLY
= 3;
1266 Dygraph
.THIRTY_SECONDLY
= 4;
1267 Dygraph
.MINUTELY
= 5;
1268 Dygraph
.TWO_MINUTELY
= 6;
1269 Dygraph
.FIVE_MINUTELY
= 7;
1270 Dygraph
.TEN_MINUTELY
= 8;
1271 Dygraph
.THIRTY_MINUTELY
= 9;
1272 Dygraph
.HOURLY
= 10;
1273 Dygraph
.TWO_HOURLY
= 11;
1274 Dygraph
.SIX_HOURLY
= 12;
1276 Dygraph
.WEEKLY
= 14;
1277 Dygraph
.MONTHLY
= 15;
1278 Dygraph
.QUARTERLY
= 16;
1279 Dygraph
.BIANNUAL
= 17;
1280 Dygraph
.ANNUAL
= 18;
1281 Dygraph
.DECADAL
= 19;
1282 Dygraph
.NUM_GRANULARITIES
= 20;
1284 Dygraph
.SHORT_SPACINGS
= [];
1285 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1286 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1287 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1288 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1289 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1290 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1291 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1292 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1293 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1294 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1295 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1296 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1297 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1298 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1299 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1303 // If we used this time granularity, how many ticks would there be?
1304 // This is only an approximation, but it's generally good enough.
1306 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1307 if (granularity
< Dygraph
.MONTHLY
) {
1308 // Generate one tick mark for every fixed interval of time.
1309 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1310 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1312 var year_mod
= 1; // e.g. to only print one point every 10 years.
1313 var num_months
= 12;
1314 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1315 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1316 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1317 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1319 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1320 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1321 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1327 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1328 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1330 // Returns an array containing {v: millis, label: label} dictionaries.
1332 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1333 var formatter
= this.attr_("xAxisLabelFormatter");
1335 if (granularity
< Dygraph
.MONTHLY
) {
1336 // Generate one tick mark for every fixed interval of time.
1337 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1338 var format
= '%d%b'; // e.g. "1Jan"
1340 // Find a time less than start_time which occurs on a "nice" time boundary
1341 // for this granularity.
1342 var g
= spacing
/ 1000;
1343 var d
= new Date(start_time
);
1344 if (g
<= 60) { // seconds
1345 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1349 if (g
<= 60) { // minutes
1350 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1355 if (g
<= 24) { // days
1356 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1361 if (g
== 7) { // one week
1362 d
.setDate(d
.getDate() - d
.getDay());
1367 start_time
= d
.getTime();
1369 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1370 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1373 // Display a tick mark on the first of a set of months of each year.
1374 // Years get a tick mark iff y % year_mod == 0. This is useful for
1375 // displaying a tick mark once every 10 years, say, on long time scales.
1377 var year_mod
= 1; // e.g. to only print one point every 10 years.
1379 if (granularity
== Dygraph
.MONTHLY
) {
1380 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1381 } else if (granularity
== Dygraph
.QUARTERLY
) {
1382 months
= [ 0, 3, 6, 9 ];
1383 } else if (granularity
== Dygraph
.BIANNUAL
) {
1385 } else if (granularity
== Dygraph
.ANNUAL
) {
1387 } else if (granularity
== Dygraph
.DECADAL
) {
1392 var start_year
= new Date(start_time
).getFullYear();
1393 var end_year
= new Date(end_time
).getFullYear();
1394 var zeropad
= Dygraph
.zeropad
;
1395 for (var i
= start_year
; i
<= end_year
; i
++) {
1396 if (i
% year_mod
!= 0) continue;
1397 for (var j
= 0; j
< months
.length
; j
++) {
1398 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1399 var t
= Date
.parse(date_str
);
1400 if (t
< start_time
|| t
> end_time
) continue;
1401 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1411 * Add ticks to the x-axis based on a date range.
1412 * @param {Number} startDate Start of the date window (millis since epoch)
1413 * @param {Number} endDate End of the date window (millis since epoch)
1414 * @return {Array.<Object>} Array of {label, value} tuples.
1417 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1419 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1420 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1421 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1428 return self
.GetXAxis(startDate
, endDate
, chosen
);
1430 // TODO(danvk): signal error.
1435 * Add ticks when the x axis has numbers on it (instead of dates)
1436 * @param {Number} startDate Start of the date window (millis since epoch)
1437 * @param {Number} endDate End of the date window (millis since epoch)
1439 * @param {function} attribute accessor function.
1440 * @return {Array.<Object>} Array of {label, value} tuples.
1443 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1444 var attr
= function(k
) {
1445 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1446 return self
.attr_(k
);
1451 for (var i
= 0; i
< vals
.length
; i
++) {
1452 ticks
.push({v
: vals
[i
]});
1456 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1457 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1458 // The first spacing greater than pixelsPerYLabel is what we use.
1459 // TODO(danvk): version that works on a log scale.
1460 if (attr("labelsKMG2")) {
1461 var mults
= [1, 2, 4, 8];
1463 var mults
= [1, 2, 5];
1465 var scale
, low_val
, high_val
, nTicks
;
1466 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1467 var pixelsPerTick
= attr('pixelsPerYLabel');
1468 for (var i
= -10; i
< 50; i
++) {
1469 if (attr("labelsKMG2")) {
1470 var base_scale
= Math
.pow(16, i
);
1472 var base_scale
= Math
.pow(10, i
);
1474 for (var j
= 0; j
< mults
.length
; j
++) {
1475 scale
= base_scale
* mults
[j
];
1476 low_val
= Math
.floor(minV
/ scale
) * scale
;
1477 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1478 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1479 var spacing
= self
.height_
/ nTicks
;
1480 // wish I could break out of both loops at once...
1481 if (spacing
> pixelsPerTick
) break;
1483 if (spacing
> pixelsPerTick
) break;
1486 // Construct the set of ticks.
1487 // Allow reverse y-axis if it's explicitly requested.
1488 if (low_val
> high_val
) scale
*= -1;
1489 for (var i
= 0; i
< nTicks
; i
++) {
1490 var tickV
= low_val
+ i
* scale
;
1491 ticks
.push( {v
: tickV
} );
1495 // Add formatted labels to the ticks.
1498 if (attr("labelsKMB")) {
1500 k_labels
= [ "K", "M", "B", "T" ];
1502 if (attr("labelsKMG2")) {
1503 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1505 k_labels
= [ "k", "M", "G", "T" ];
1507 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
1509 for (var i
= 0; i
< ticks
.length
; i
++) {
1510 var tickV
= ticks
[i
].v
;
1511 var absTickV
= Math
.abs(tickV
);
1513 if (formatter
!= undefined
) {
1514 label
= formatter(tickV
);
1516 label
= Dygraph
.round_(tickV
, 2);
1518 if (k_labels
.length
) {
1519 // Round up to an appropriate unit.
1521 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1522 if (absTickV
>= n
) {
1523 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1528 ticks
[i
].label
= label
;
1533 // Computes the range of the data series (including confidence intervals).
1534 // series is either [ [x1, y1], [x2, y2], ... ] or
1535 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1536 // Returns [low, high]
1537 Dygraph
.prototype.extremeValues_
= function(series
) {
1538 var minY
= null, maxY
= null;
1540 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1542 // With custom bars, maxY is the max of the high values.
1543 for (var j
= 0; j
< series
.length
; j
++) {
1544 var y
= series
[j
][1][0];
1546 var low
= y
- series
[j
][1][1];
1547 var high
= y
+ series
[j
][1][2];
1548 if (low
> y
) low
= y
; // this can happen with custom bars,
1549 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1550 if (maxY
== null || high
> maxY
) {
1553 if (minY
== null || low
< minY
) {
1558 for (var j
= 0; j
< series
.length
; j
++) {
1559 var y
= series
[j
][1];
1560 if (y
=== null || isNaN(y
)) continue;
1561 if (maxY
== null || y
> maxY
) {
1564 if (minY
== null || y
< minY
) {
1570 return [minY
, maxY
];
1574 * This function is called once when the chart's data is changed or the options
1575 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1576 * idea is that values derived from the chart's data can be computed here,
1577 * rather than every time the chart is drawn. This includes things like the
1578 * number of axes, rolling averages, etc.
1580 Dygraph
.prototype.predraw_
= function() {
1581 // TODO(danvk): move more computations out of drawGraph_ and into here.
1582 this.computeYAxes_();
1584 // Create a new plotter.
1585 if (this.plotter_
) this.plotter_
.clear();
1586 this.plotter_
= new DygraphCanvasRenderer(this,
1587 this.hidden_
, this.layout_
,
1588 this.renderOptions_
);
1590 this.roller_
= this.createRollInterface_();
1592 // If the data or options have changed, then we'd better redraw.
1597 * Update the graph with new data. This method is called when the viewing area
1598 * has changed. If the underlying data or options have changed, predraw_ will
1599 * be called before drawGraph_ is called.
1602 Dygraph
.prototype.drawGraph_
= function() {
1603 var data
= this.rawData_
;
1605 // This is used to set the second parameter to drawCallback, below.
1606 var is_initial_draw
= this.is_initial_draw_
;
1607 this.is_initial_draw_
= false;
1609 var minY
= null, maxY
= null;
1610 this.layout_
.removeAllDatasets();
1612 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1614 // Loop over the fields (series). Go from the last to the first,
1615 // because if they're stacked that's how we accumulate the values.
1617 var cumulative_y
= []; // For stacked series.
1620 var extremes
= {}; // series name -> [low, high]
1622 // Loop over all fields and create datasets
1623 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1624 if (!this.visibility()[i
- 1]) continue;
1626 var seriesName
= this.attr_("labels")[i
];
1627 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1630 for (var j
= 0; j
< data
.length
; j
++) {
1631 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1632 var date
= data
[j
][0];
1633 series
.push([date
, data
[j
][i
]]);
1636 series
= this.rollingAverage(series
, this.rollPeriod_
);
1638 // Prune down to the desired range, if necessary (for zooming)
1639 // Because there can be lines going to points outside of the visible area,
1640 // we actually prune to visible points, plus one on either side.
1641 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1642 if (this.dateWindow_
) {
1643 var low
= this.dateWindow_
[0];
1644 var high
= this.dateWindow_
[1];
1646 // TODO(danvk): do binary search instead of linear search.
1647 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1648 var firstIdx
= null, lastIdx
= null;
1649 for (var k
= 0; k
< series
.length
; k
++) {
1650 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1653 if (series
[k
][0] <= high
) {
1657 if (firstIdx
=== null) firstIdx
= 0;
1658 if (firstIdx
> 0) firstIdx
--;
1659 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1660 if (lastIdx
< series
.length
- 1) lastIdx
++;
1661 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1662 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1663 pruned
.push(series
[k
]);
1667 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1670 var seriesExtremes
= this.extremeValues_(series
);
1671 extremes
[seriesName
] = seriesExtremes
;
1672 var thisMinY
= seriesExtremes
[0];
1673 var thisMaxY
= seriesExtremes
[1];
1674 if (minY
=== null || (thisMinY
!= null && thisMinY
< minY
)) minY
= thisMinY
;
1675 if (maxY
=== null || (thisMaxY
!= null && thisMaxY
> maxY
)) maxY
= thisMaxY
;
1678 for (var j
=0; j
<series
.length
; j
++) {
1679 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1682 } else if (this.attr_("stackedGraph")) {
1683 var l
= series
.length
;
1685 for (var j
= 0; j
< l
; j
++) {
1686 // If one data set has a NaN, let all subsequent stacked
1687 // sets inherit the NaN -- only start at 0 for the first set.
1688 var x
= series
[j
][0];
1689 if (cumulative_y
[x
] === undefined
)
1690 cumulative_y
[x
] = 0;
1692 actual_y
= series
[j
][1];
1693 cumulative_y
[x
] += actual_y
;
1695 series
[j
] = [x
, cumulative_y
[x
]]
1697 if (!maxY
|| cumulative_y
[x
] > maxY
)
1698 maxY
= cumulative_y
[x
];
1702 datasets
[i
] = series
;
1705 for (var i
= 1; i
< datasets
.length
; i
++) {
1706 if (!this.visibility()[i
- 1]) continue;
1707 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1710 // TODO(danvk): this method doesn't need to return anything.
1711 var out
= this.computeYAxisRanges_(extremes
);
1713 var seriesToAxisMap
= out
[1];
1714 this.displayedYRange_
= axes
[0].valueRange
;
1715 this.layout_
.updateOptions( { yAxes
: axes
,
1716 seriesToAxisMap
: seriesToAxisMap
1721 // Tell PlotKit to use this new data and render itself
1722 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1723 this.layout_
.evaluateWithError();
1724 this.plotter_
.clear();
1725 this.plotter_
.render();
1726 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1727 this.canvas_
.height
);
1729 if (this.attr_("drawCallback") !== null) {
1730 this.attr_("drawCallback")(this, is_initial_draw
);
1735 * Determine properties of the y-axes which are independent of the data
1736 * currently being displayed. This includes things like the number of axes and
1737 * the style of the axes. It does not include the range of each axis and its
1739 * This fills in this.axes_ and this.seriesToAxisMap_.
1740 * axes_ = [ { options } ]
1741 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
1742 * indices are into the axes_ array.
1744 Dygraph
.prototype.computeYAxes_
= function() {
1745 this.axes_
= [{}]; // always have at least one y-axis.
1746 this.seriesToAxisMap_
= {};
1748 // Get a list of series names.
1749 var labels
= this.attr_("labels");
1751 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
1753 // all options which could be applied per-axis:
1761 'axisLabelFontSize',
1765 // Copy global axis options over to the first axis.
1766 for (var i
= 0; i
< axisOptions
.length
; i
++) {
1767 var k
= axisOptions
[i
];
1768 var v
= this.attr_(k
);
1769 if (v
) this.axes_
[0][k
] = v
;
1772 // Go through once and add all the axes.
1773 for (var seriesName
in series
) {
1774 if (!series
.hasOwnProperty(seriesName
)) continue;
1775 var axis
= this.attr_("axis", seriesName
);
1777 this.seriesToAxisMap_
[seriesName
] = 0;
1780 if (typeof(axis
) == 'object') {
1781 // Add a new axis, making a copy of its per-axis options.
1783 Dygraph
.update(opts
, this.axes_
[0]);
1784 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
1785 Dygraph
.update(opts
, axis
);
1786 this.axes_
.push(opts
);
1787 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
1791 // Go through one more time and assign series to an axis defined by another
1792 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
1793 for (var seriesName
in series
) {
1794 if (!series
.hasOwnProperty(seriesName
)) continue;
1795 var axis
= this.attr_("axis", seriesName
);
1796 if (typeof(axis
) == 'string') {
1797 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
1798 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
1799 "series " + axis
+ ", which does not define its own axis.");
1802 var idx
= this.seriesToAxisMap_
[axis
];
1803 this.seriesToAxisMap_
[seriesName
] = idx
;
1809 * Returns the number of y-axes on the chart.
1810 * @return {Number} the number of axes.
1812 Dygraph
.prototype.numAxes
= function() {
1814 for (var series
in this.seriesToAxisMap_
) {
1815 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
1816 var idx
= this.seriesToAxisMap_
[series
];
1817 if (idx
> last_axis
) last_axis
= idx
;
1819 return 1 + last_axis
;
1823 * Determine the value range and tick marks for each axis.
1824 * @param {Object} extremes A mapping from seriesName -> [low, high]
1825 * This fills in the valueRange and ticks fields in each entry of this.axes_.
1827 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
1828 // Build a map from axis number -> [list of series names]
1829 var seriesForAxis
= [];
1830 for (var series
in this.seriesToAxisMap_
) {
1831 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
1832 var idx
= this.seriesToAxisMap_
[series
];
1833 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
1834 seriesForAxis
[idx
].push(series
);
1837 // Compute extreme values, a span and tick marks for each axis.
1838 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1839 var axis
= this.axes_
[i
];
1840 if (axis
.valueRange
) {
1841 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
1843 // Calcuate the extremes of extremes.
1844 var series
= seriesForAxis
[i
];
1845 var minY
= Infinity
; // extremes[series[0]][0];
1846 var maxY
= -Infinity
; // extremes[series[0]][1];
1847 for (var j
= 0; j
< series
.length
; j
++) {
1848 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
1849 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
1851 if (axis
.includeZero
&& minY
> 0) minY
= 0;
1853 // Add some padding and round up to an integer to be human-friendly.
1854 var span
= maxY
- minY
;
1855 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1856 if (span
== 0) { span
= maxY
; }
1857 var maxAxisY
= maxY
+ 0.1 * span
;
1858 var minAxisY
= minY
- 0.1 * span
;
1860 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1861 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1862 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1864 if (this.attr_("includeZero")) {
1865 if (maxY
< 0) maxAxisY
= 0;
1866 if (minY
> 0) minAxisY
= 0;
1869 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
1872 // Add ticks. By default, all axes inherit the tick positions of the
1873 // primary axis. However, if an axis is specifically marked as having
1874 // independent ticks, then that is permissible as well.
1875 if (i
== 0 || axis
.independentTicks
) {
1877 Dygraph
.numericTicks(axis
.computedValueRange
[0],
1878 axis
.computedValueRange
[1],
1882 var p_axis
= this.axes_
[0];
1883 var p_ticks
= p_axis
.ticks
;
1884 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
1885 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
1886 var tick_values
= [];
1887 for (var i
= 0; i
< p_ticks
.length
; i
++) {
1888 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
1889 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
1890 tick_values
.push(y_val
);
1894 Dygraph
.numericTicks(axis
.computedValueRange
[0],
1895 axis
.computedValueRange
[1],
1896 this, axis
, tick_values
);
1900 return [this.axes_
, this.seriesToAxisMap_
];
1904 * Calculates the rolling average of a data set.
1905 * If originalData is [label, val], rolls the average of those.
1906 * If originalData is [label, [, it's interpreted as [value, stddev]
1907 * and the roll is returned in the same form, with appropriately reduced
1908 * stddev for each value.
1909 * Note that this is where fractional input (i.e. '5/10') is converted into
1911 * @param {Array} originalData The data in the appropriate format (see above)
1912 * @param {Number} rollPeriod The number of days over which to average the data
1914 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1915 if (originalData
.length
< 2)
1916 return originalData
;
1917 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1918 var rollingData
= [];
1919 var sigma
= this.attr_("sigma");
1921 if (this.fractions_
) {
1923 var den
= 0; // numerator/denominator
1925 for (var i
= 0; i
< originalData
.length
; i
++) {
1926 num
+= originalData
[i
][1][0];
1927 den
+= originalData
[i
][1][1];
1928 if (i
- rollPeriod
>= 0) {
1929 num
-= originalData
[i
- rollPeriod
][1][0];
1930 den
-= originalData
[i
- rollPeriod
][1][1];
1933 var date
= originalData
[i
][0];
1934 var value
= den
? num
/ den
: 0.0;
1935 if (this.attr_("errorBars")) {
1936 if (this.wilsonInterval_
) {
1937 // For more details on this confidence interval, see:
1938 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1940 var p
= value
< 0 ? 0 : value
, n
= den
;
1941 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1942 var denom
= 1 + sigma
* sigma
/ den
;
1943 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1944 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1945 rollingData
[i
] = [date
,
1946 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1948 rollingData
[i
] = [date
, [0, 0, 0]];
1951 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1952 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1955 rollingData
[i
] = [date
, mult
* value
];
1958 } else if (this.attr_("customBars")) {
1963 for (var i
= 0; i
< originalData
.length
; i
++) {
1964 var data
= originalData
[i
][1];
1966 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1968 if (y
!= null && !isNaN(y
)) {
1974 if (i
- rollPeriod
>= 0) {
1975 var prev
= originalData
[i
- rollPeriod
];
1976 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1983 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1984 1.0 * (mid
- low
) / count
,
1985 1.0 * (high
- mid
) / count
]];
1988 // Calculate the rolling average for the first rollPeriod - 1 points where
1989 // there is not enough data to roll over the full number of days
1990 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1991 if (!this.attr_("errorBars")){
1992 if (rollPeriod
== 1) {
1993 return originalData
;
1996 for (var i
= 0; i
< originalData
.length
; i
++) {
1999 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2000 var y
= originalData
[j
][1];
2001 if (y
== null || isNaN(y
)) continue;
2003 sum
+= originalData
[j
][1];
2006 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2008 rollingData
[i
] = [originalData
[i
][0], null];
2013 for (var i
= 0; i
< originalData
.length
; i
++) {
2017 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2018 var y
= originalData
[j
][1][0];
2019 if (y
== null || isNaN(y
)) continue;
2021 sum
+= originalData
[j
][1][0];
2022 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2025 var stddev
= Math
.sqrt(variance
) / num_ok
;
2026 rollingData
[i
] = [originalData
[i
][0],
2027 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2029 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2039 * Parses a date, returning the number of milliseconds since epoch. This can be
2040 * passed in as an xValueParser in the Dygraph constructor.
2041 * TODO(danvk): enumerate formats that this understands.
2042 * @param {String} A date in YYYYMMDD format.
2043 * @return {Number} Milliseconds since epoch.
2046 Dygraph
.dateParser
= function(dateStr
, self
) {
2049 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2050 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2051 while (dateStrSlashed
.search("-") != -1) {
2052 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2054 d
= Date
.parse(dateStrSlashed
);
2055 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2056 // TODO(danvk): remove support for this format. It's confusing.
2057 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2058 + "/" + dateStr
.substr(6,2);
2059 d
= Date
.parse(dateStrSlashed
);
2061 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2062 // "2009/07/12 12:34:56"
2063 d
= Date
.parse(dateStr
);
2066 if (!d
|| isNaN(d
)) {
2067 self
.error("Couldn't parse " + dateStr
+ " as a date");
2073 * Detects the type of the str (date or numeric) and sets the various
2074 * formatting attributes in this.attrs_ based on this type.
2075 * @param {String} str An x value.
2078 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2080 if (str
.indexOf('-') >= 0 ||
2081 str
.indexOf('/') >= 0 ||
2082 isNaN(parseFloat(str
))) {
2084 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2085 // TODO(danvk): remove support for this format.
2090 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2091 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2092 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2093 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2095 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2096 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2097 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2098 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2103 * Parses a string in a special csv format. We expect a csv file where each
2104 * line is a date point, and the first field in each line is the date string.
2105 * We also expect that all remaining fields represent series.
2106 * if the errorBars attribute is set, then interpret the fields as:
2107 * date, series1, stddev1, series2, stddev2, ...
2108 * @param {Array.<Object>} data See above.
2111 * @return Array.<Object> An array with one entry for each row. These entries
2112 * are an array of cells in that row. The first entry is the parsed x-value for
2113 * the row. The second, third, etc. are the y-values. These can take on one of
2114 * three forms, depending on the CSV and constructor parameters:
2116 * 2. [ value, stddev ]
2117 * 3. [ low value, center value, high value ]
2119 Dygraph
.prototype.parseCSV_
= function(data
) {
2121 var lines
= data
.split("\n");
2123 // Use the default delimiter or fall back to a tab if that makes sense.
2124 var delim
= this.attr_('delimiter');
2125 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2130 if (this.labelsFromCSV_
) {
2132 this.attrs_
.labels
= lines
[0].split(delim
);
2135 // Parse the x as a float or return null if it's not a number.
2136 var parseFloatOrNull
= function(x
) {
2137 var val
= parseFloat(x
);
2138 return isNaN(val
) ? null : val
;
2142 var defaultParserSet
= false; // attempt to auto-detect x value type
2143 var expectedCols
= this.attr_("labels").length
;
2144 var outOfOrder
= false;
2145 for (var i
= start
; i
< lines
.length
; i
++) {
2146 var line
= lines
[i
];
2147 if (line
.length
== 0) continue; // skip blank lines
2148 if (line
[0] == '#') continue; // skip comment lines
2149 var inFields
= line
.split(delim
);
2150 if (inFields
.length
< 2) continue;
2153 if (!defaultParserSet
) {
2154 this.detectTypeFromString_(inFields
[0]);
2155 xParser
= this.attr_("xValueParser");
2156 defaultParserSet
= true;
2158 fields
[0] = xParser(inFields
[0], this);
2160 // If fractions are expected, parse the numbers as "A/B
"
2161 if (this.fractions_) {
2162 for (var j = 1; j < inFields.length; j++) {
2163 // TODO(danvk): figure out an appropriate way to flag parse errors.
2164 var vals = inFields[j].split("/");
2165 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2167 } else if (this.attr_("errorBars
")) {
2168 // If there are error bars, values are (value, stddev) pairs
2169 for (var j = 1; j < inFields.length; j += 2)
2170 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2171 parseFloatOrNull(inFields[j + 1])];
2172 } else if (this.attr_("customBars
")) {
2173 // Bars are a low;center;high tuple
2174 for (var j = 1; j < inFields.length; j++) {
2175 var vals = inFields[j].split(";");
2176 fields[j] = [ parseFloatOrNull(vals[0]),
2177 parseFloatOrNull(vals[1]),
2178 parseFloatOrNull(vals[2]) ];
2181 // Values are just numbers
2182 for (var j = 1; j < inFields.length; j++) {
2183 fields[j] = parseFloatOrNull(inFields[j]);
2186 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2191 if (fields.length != expectedCols) {
2192 this.error("Number of columns
in line
" + i + " (" + fields.length +
2193 ") does not agree
with number of
labels (" + expectedCols +
2199 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2200 ret.sort(function(a,b) { return a[0] - b[0] });
2207 * The user has provided their data as a pre-packaged JS array. If the x values
2208 * are numeric, this is the same as dygraphs' internal format. If the x values
2209 * are dates, we need to convert them from Date objects to ms since epoch.
2210 * @param {Array.<Object>} data
2211 * @return {Array.<Object>} data with numeric x values.
2213 Dygraph.prototype.parseArray_ = function(data) {
2214 // Peek at the first x value to see if it's numeric.
2215 if (data.length == 0) {
2216 this.error("Can
't plot empty data set");
2219 if (data[0].length == 0) {
2220 this.error("Data set cannot contain an empty row");
2224 if (this.attr_("labels") == null) {
2225 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2226 "in the options parameter");
2227 this.attrs_.labels = [ "X" ];
2228 for (var i = 1; i < data[0].length; i++) {
2229 this.attrs_.labels.push("Y" + i);
2233 if (Dygraph.isDateLike(data[0][0])) {
2234 // Some intelligent defaults for a date x-axis.
2235 this.attrs_.xValueFormatter = Dygraph.dateString_;
2236 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2237 this.attrs_.xTicker = Dygraph.dateTicker;
2239 // Assume they're all dates
.
2240 var parsedData
= Dygraph
.clone(data
);
2241 for (var i
= 0; i
< data
.length
; i
++) {
2242 if (parsedData
[i
].length
== 0) {
2243 this.error("Row " + (1 + i
) + " of data is empty");
2246 if (parsedData
[i
][0] == null
2247 || typeof(parsedData
[i
][0].getTime
) != 'function'
2248 || isNaN(parsedData
[i
][0].getTime())) {
2249 this.error("x value in row " + (1 + i
) + " is not a Date");
2252 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2256 // Some intelligent defaults for a numeric x-axis.
2257 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2258 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2264 * Parses a DataTable object from gviz.
2265 * The data is expected to have a first column that is either a date or a
2266 * number. All subsequent columns must be numbers. If there is a clear mismatch
2267 * between this.xValueParser_ and the type of the first column, it will be
2268 * fixed. Fills out rawData_.
2269 * @param {Array.<Object>} data See above.
2272 Dygraph
.prototype.parseDataTable_
= function(data
) {
2273 var cols
= data
.getNumberOfColumns();
2274 var rows
= data
.getNumberOfRows();
2276 var indepType
= data
.getColumnType(0);
2277 if (indepType
== 'date' || indepType
== 'datetime') {
2278 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2279 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2280 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2281 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2282 } else if (indepType
== 'number') {
2283 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2284 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2285 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2286 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2288 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2289 "column 1 of DataTable input (Got '" + indepType
+ "')");
2293 // Array of the column indices which contain data (and not annotations).
2295 var annotationCols
= {}; // data index -> [annotation cols]
2296 var hasAnnotations
= false;
2297 for (var i
= 1; i
< cols
; i
++) {
2298 var type
= data
.getColumnType(i
);
2299 if (type
== 'number') {
2301 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2302 // This is OK -- it's an annotation column.
2303 var dataIdx
= colIdx
[colIdx
.length
- 1];
2304 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2305 annotationCols
[dataIdx
] = [i
];
2307 annotationCols
[dataIdx
].push(i
);
2309 hasAnnotations
= true;
2311 this.error("Only 'number' is supported as a dependent type with Gviz." +
2312 " 'string' is only supported if displayAnnotations is true");
2316 // Read column labels
2317 // TODO(danvk): add support back for errorBars
2318 var labels
= [data
.getColumnLabel(0)];
2319 for (var i
= 0; i
< colIdx
.length
; i
++) {
2320 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2321 if (this.attr_("errorBars")) i
+= 1;
2323 this.attrs_
.labels
= labels
;
2324 cols
= labels
.length
;
2327 var outOfOrder
= false;
2328 var annotations
= [];
2329 for (var i
= 0; i
< rows
; i
++) {
2331 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2332 data
.getValue(i
, 0) === null) {
2333 this.warn("Ignoring row " + i
+
2334 " of DataTable because of undefined or null first column.");
2338 if (indepType
== 'date' || indepType
== 'datetime') {
2339 row
.push(data
.getValue(i
, 0).getTime());
2341 row
.push(data
.getValue(i
, 0));
2343 if (!this.attr_("errorBars")) {
2344 for (var j
= 0; j
< colIdx
.length
; j
++) {
2345 var col
= colIdx
[j
];
2346 row
.push(data
.getValue(i
, col
));
2347 if (hasAnnotations
&&
2348 annotationCols
.hasOwnProperty(col
) &&
2349 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2351 ann
.series
= data
.getColumnLabel(col
);
2353 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2355 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2356 if (k
) ann
.text
+= "\n";
2357 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2359 annotations
.push(ann
);
2363 for (var j
= 0; j
< cols
- 1; j
++) {
2364 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2367 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2374 this.warn("DataTable is out of order; order it correctly to speed loading.");
2375 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2377 this.rawData_
= ret
;
2379 if (annotations
.length
> 0) {
2380 this.setAnnotations(annotations
, true);
2384 // These functions are all based on MochiKit.
2385 Dygraph
.update
= function (self
, o
) {
2386 if (typeof(o
) != 'undefined' && o
!== null) {
2388 if (o
.hasOwnProperty(k
)) {
2396 Dygraph
.isArrayLike
= function (o
) {
2397 var typ
= typeof(o
);
2399 (typ
!= 'object' && !(typ
== 'function' &&
2400 typeof(o
.item
) == 'function')) ||
2402 typeof(o
.length
) != 'number' ||
2410 Dygraph
.isDateLike
= function (o
) {
2411 if (typeof(o
) != "object" || o
=== null ||
2412 typeof(o
.getTime
) != 'function') {
2418 Dygraph
.clone
= function(o
) {
2419 // TODO(danvk): figure out how MochiKit's version works
2421 for (var i
= 0; i
< o
.length
; i
++) {
2422 if (Dygraph
.isArrayLike(o
[i
])) {
2423 r
.push(Dygraph
.clone(o
[i
]));
2433 * Get the CSV data. If it's in a function, call that function. If it's in a
2434 * file, do an XMLHttpRequest to get it.
2437 Dygraph
.prototype.start_
= function() {
2438 if (typeof this.file_
== 'function') {
2439 // CSV string. Pretend we got it via XHR.
2440 this.loadedEvent_(this.file_());
2441 } else if (Dygraph
.isArrayLike(this.file_
)) {
2442 this.rawData_
= this.parseArray_(this.file_
);
2444 } else if (typeof this.file_
== 'object' &&
2445 typeof this.file_
.getColumnRange
== 'function') {
2446 // must be a DataTable from gviz.
2447 this.parseDataTable_(this.file_
);
2449 } else if (typeof this.file_
== 'string') {
2450 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2451 if (this.file_
.indexOf('\n') >= 0) {
2452 this.loadedEvent_(this.file_
);
2454 var req
= new XMLHttpRequest();
2456 req
.onreadystatechange
= function () {
2457 if (req
.readyState
== 4) {
2458 if (req
.status
== 200) {
2459 caller
.loadedEvent_(req
.responseText
);
2464 req
.open("GET", this.file_
, true);
2468 this.error("Unknown data format: " + (typeof this.file_
));
2473 * Changes various properties of the graph. These can include:
2475 * <li>file: changes the source data for the graph</li>
2476 * <li>errorBars: changes whether the data contains stddev</li>
2478 * @param {Object} attrs The new properties and values
2480 Dygraph
.prototype.updateOptions
= function(attrs
) {
2481 // TODO(danvk): this is a mess. Rethink this function.
2482 if (attrs
.rollPeriod
) {
2483 this.rollPeriod_
= attrs
.rollPeriod
;
2485 if (attrs
.dateWindow
) {
2486 this.dateWindow_
= attrs
.dateWindow
;
2489 // TODO(danvk): validate per-series options.
2494 // highlightCircleSize
2496 Dygraph
.update(this.user_attrs_
, attrs
);
2497 Dygraph
.update(this.renderOptions_
, attrs
);
2499 this.labelsFromCSV_
= (this.attr_("labels") == null);
2501 // TODO(danvk): this doesn't match the constructor logic
2502 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2503 if (attrs
['file']) {
2504 this.file_
= attrs
['file'];
2512 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2513 * containing div (which has presumably changed size since the dygraph was
2514 * instantiated. If the width/height are specified, the div will be resized.
2516 * This is far more efficient than destroying and re-instantiating a
2517 * Dygraph, since it doesn't have to reparse the underlying data.
2519 * @param {Number} width Width (in pixels)
2520 * @param {Number} height Height (in pixels)
2522 Dygraph
.prototype.resize
= function(width
, height
) {
2523 if (this.resize_lock
) {
2526 this.resize_lock
= true;
2528 if ((width
=== null) != (height
=== null)) {
2529 this.warn("Dygraph.resize() should be called with zero parameters or " +
2530 "two non-NULL parameters. Pretending it was zero.");
2531 width
= height
= null;
2534 // TODO(danvk): there should be a clear() method.
2535 this.maindiv_
.innerHTML
= "";
2536 this.attrs_
.labelsDiv
= null;
2539 this.maindiv_
.style
.width
= width
+ "px";
2540 this.maindiv_
.style
.height
= height
+ "px";
2541 this.width_
= width
;
2542 this.height_
= height
;
2544 this.width_
= this.maindiv_
.offsetWidth
;
2545 this.height_
= this.maindiv_
.offsetHeight
;
2548 this.createInterface_();
2551 this.resize_lock
= false;
2555 * Adjusts the number of days in the rolling average. Updates the graph to
2556 * reflect the new averaging period.
2557 * @param {Number} length Number of days over which to average the data.
2559 Dygraph
.prototype.adjustRoll
= function(length
) {
2560 this.rollPeriod_
= length
;
2565 * Returns a boolean array of visibility statuses.
2567 Dygraph
.prototype.visibility
= function() {
2568 // Do lazy-initialization, so that this happens after we know the number of
2570 if (!this.attr_("visibility")) {
2571 this.attrs_
["visibility"] = [];
2573 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2574 this.attr_("visibility").push(true);
2576 return this.attr_("visibility");
2580 * Changes the visiblity of a series.
2582 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2583 var x
= this.visibility();
2584 if (num
< 0 && num
>= x
.length
) {
2585 this.warn("invalid series number in setVisibility: " + num
);
2593 * Update the list of annotations and redraw the chart.
2595 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2596 // Only add the annotation CSS rule once we know it will be used.
2597 Dygraph
.addAnnotationRule();
2598 this.annotations_
= ann
;
2599 this.layout_
.setAnnotations(this.annotations_
);
2600 if (!suppressDraw
) {
2606 * Return the list of annotations.
2608 Dygraph
.prototype.annotations
= function() {
2609 return this.annotations_
;
2613 * Get the index of a series (column) given its name. The first column is the
2614 * x-axis, so the data series start with index 1.
2616 Dygraph
.prototype.indexFromSetName
= function(name
) {
2617 var labels
= this.attr_("labels");
2618 for (var i
= 0; i
< labels
.length
; i
++) {
2619 if (labels
[i
] == name
) return i
;
2624 Dygraph
.addAnnotationRule
= function() {
2625 if (Dygraph
.addedAnnotationCSS
) return;
2628 if (document
.styleSheets
.length
> 0) {
2629 mysheet
= document
.styleSheets
[0];
2631 var styleSheetElement
= document
.createElement("style");
2632 styleSheetElement
.type
= "text/css";
2633 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2634 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2635 if (document
.styleSheets
[i
].disabled
) continue;
2636 mysheet
= document
.styleSheets
[i
];
2640 var rule
= "border: 1px solid black; " +
2641 "background-color: white; " +
2642 "text-align: center;";
2643 if (mysheet
.insertRule
) { // Firefox
2644 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2645 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2646 } else if (mysheet
.addRule
) { // IE
2647 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2650 Dygraph
.addedAnnotationCSS
= true;
2654 * Create a new canvas element. This is more complex than a simple
2655 * document.createElement("canvas") because of IE and excanvas.
2657 Dygraph
.createCanvas
= function() {
2658 var canvas
= document
.createElement("canvas");
2660 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2661 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2662 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2670 * A wrapper around Dygraph that implements the gviz API.
2671 * @param {Object} container The DOM object the visualization should live in.
2673 Dygraph
.GVizChart
= function(container
) {
2674 this.container
= container
;
2677 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2678 this.container
.innerHTML
= '';
2679 this.date_graph
= new Dygraph(this.container
, data
, options
);
2683 * Google charts compatible setSelection
2684 * Only row selection is supported, all points in the row will be highlighted
2685 * @param {Array} array of the selected cells
2688 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2690 if (selection_array
.length
) {
2691 row
= selection_array
[0].row
;
2693 this.date_graph
.setSelection(row
);
2697 * Google charts compatible getSelection implementation
2698 * @return {Array} array of the selected cells
2701 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2704 var row
= this.date_graph
.getSelection();
2706 if (row
< 0) return selection
;
2709 for (var i
in this.date_graph
.layout_
.datasets
) {
2710 selection
.push({row
: row
, column
: col
});
2717 // Older pages may still use this name.
2718 DateGraph
= Dygraph
;