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
);
396 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
397 var ctx
= cnv
.getContext("2d");
399 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
404 * Generates interface elements for the Dygraph: a containing div, a div to
405 * display the current point, and a textbox to adjust the rolling average
406 * period. Also creates the Renderer/Layout elements.
409 Dygraph
.prototype.createInterface_
= function() {
410 // Create the all-enclosing graph div
411 var enclosing
= this.maindiv_
;
413 this.graphDiv
= document
.createElement("div");
414 this.graphDiv
.style
.width
= this.width_
+ "px";
415 this.graphDiv
.style
.height
= this.height_
+ "px";
416 enclosing
.appendChild(this.graphDiv
);
420 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
422 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
423 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
424 - 2 * this.attr_("axisTickSize");
425 this.clippingArea_
= clip
;
427 // Create the canvas for interactive parts of the chart.
428 this.canvas_
= Dygraph
.createCanvas();
429 this.canvas_
.style
.position
= "absolute";
430 this.canvas_
.width
= this.width_
;
431 this.canvas_
.height
= this.height_
;
432 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
433 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
435 // ... and for static parts of the chart.
436 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
438 // The interactive parts of the graph are drawn on top of the chart.
439 this.graphDiv
.appendChild(this.hidden_
);
440 this.graphDiv
.appendChild(this.canvas_
);
441 this.mouseEventElement_
= this.canvas_
;
443 // Make sure we don't overdraw.
444 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
445 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
448 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
449 dygraph
.mouseMove_(e
);
451 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
452 dygraph
.mouseOut_(e
);
455 // Create the grapher
456 // TODO(danvk): why does the Layout need its own set of options?
457 this.layoutOptions_
= { 'xOriginIsZero': false };
458 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
459 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
460 Dygraph
.update(this.layoutOptions_
, {
461 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
463 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
465 // TODO(danvk): why does the Renderer need its own set of options?
466 this.renderOptions_
= { colorScheme
: this.colors_
,
468 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
469 Dygraph
.update(this.renderOptions_
, this.attrs_
);
470 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
471 this.plotter_
= new DygraphCanvasRenderer(this,
472 this.hidden_
, this.layout_
,
473 this.renderOptions_
);
475 this.createStatusMessage_();
476 this.createRollInterface_();
477 this.createDragInterface_();
481 * Detach DOM elements in the dygraph and null out all data references.
482 * Calling this when you're done with a dygraph can dramatically reduce memory
483 * usage. See, e.g., the tests/perf.html example.
485 Dygraph
.prototype.destroy
= function() {
486 var removeRecursive
= function(node
) {
487 while (node
.hasChildNodes()) {
488 removeRecursive(node
.firstChild
);
489 node
.removeChild(node
.firstChild
);
492 removeRecursive(this.maindiv_
);
494 var nullOut
= function(obj
) {
496 if (typeof(obj
[n
]) === 'object') {
502 // These may not all be necessary, but it can't hurt...
503 nullOut(this.layout_
);
504 nullOut(this.plotter_
);
509 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
510 * this particular canvas. All Dygraph work is done on this.canvas_.
511 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
512 * @return {Object} The newly-created canvas
515 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
516 var h
= Dygraph
.createCanvas();
517 h
.style
.position
= "absolute";
518 // TODO(danvk): h should be offset from canvas. canvas needs to include
519 // some extra area to make it easier to zoom in on the far left and far
520 // right. h needs to be precisely the plot area, so that clipping occurs.
521 h
.style
.top
= canvas
.style
.top
;
522 h
.style
.left
= canvas
.style
.left
;
523 h
.width
= this.width_
;
524 h
.height
= this.height_
;
525 h
.style
.width
= this.width_
+ "px"; // for IE
526 h
.style
.height
= this.height_
+ "px"; // for IE
530 // Taken from MochiKit.Color
531 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
535 if (saturation
=== 0) {
540 var i
= Math
.floor(hue
* 6);
541 var f
= (hue
* 6) - i
;
542 var p
= value
* (1 - saturation
);
543 var q
= value
* (1 - (saturation
* f
));
544 var t
= value
* (1 - (saturation
* (1 - f
)));
546 case 1: red
= q
; green
= value
; blue
= p
; break;
547 case 2: red
= p
; green
= value
; blue
= t
; break;
548 case 3: red
= p
; green
= q
; blue
= value
; break;
549 case 4: red
= t
; green
= p
; blue
= value
; break;
550 case 5: red
= value
; green
= p
; blue
= q
; break;
551 case 6: // fall through
552 case 0: red
= value
; green
= t
; blue
= p
; break;
555 red
= Math
.floor(255 * red
+ 0.5);
556 green
= Math
.floor(255 * green
+ 0.5);
557 blue
= Math
.floor(255 * blue
+ 0.5);
558 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
563 * Generate a set of distinct colors for the data series. This is done with a
564 * color wheel. Saturation/Value are customizable, and the hue is
565 * equally-spaced around the color wheel. If a custom set of colors is
566 * specified, that is used instead.
569 Dygraph
.prototype.setColors_
= function() {
570 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
571 // away with this.renderOptions_.
572 var num
= this.attr_("labels").length
- 1;
574 var colors
= this.attr_('colors');
576 var sat
= this.attr_('colorSaturation') || 1.0;
577 var val
= this.attr_('colorValue') || 0.5;
578 var half
= Math
.ceil(num
/ 2);
579 for (var i
= 1; i
<= num
; i
++) {
580 if (!this.visibility()[i
-1]) continue;
581 // alternate colors for high contrast.
582 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
583 var hue
= (1.0 * idx
/ (1 + num
));
584 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
587 for (var i
= 0; i
< num
; i
++) {
588 if (!this.visibility()[i
]) continue;
589 var colorStr
= colors
[i
% colors
.length
];
590 this.colors_
.push(colorStr
);
594 // TODO(danvk): update this w/r
/t/ the
new options system
.
595 this.renderOptions_
.colorScheme
= this.colors_
;
596 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
597 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
598 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
602 * Return the list of colors. This is either the list of colors passed in the
603 * attributes, or the autogenerated list of rgb(r,g,b) strings.
604 * @return {Array<string>} The list of colors.
606 Dygraph
.prototype.getColors
= function() {
610 // The following functions are from quirksmode.org with a modification for Safari from
611 // http://blog.firetree.net/2005/07/04/javascript-find-position/
612 // http://www.quirksmode.org/js
/findpos
.html
613 Dygraph
.findPosX
= function(obj
) {
618 curleft
+= obj
.offsetLeft
;
619 if(!obj
.offsetParent
)
621 obj
= obj
.offsetParent
;
628 Dygraph
.findPosY
= function(obj
) {
633 curtop
+= obj
.offsetTop
;
634 if(!obj
.offsetParent
)
636 obj
= obj
.offsetParent
;
646 * Create the div that contains information on the selected point(s)
647 * This goes in the top right of the canvas, unless an external div has already
651 Dygraph
.prototype.createStatusMessage_
= function() {
652 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
653 if (userLabelsDiv
&& null != userLabelsDiv
654 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
655 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
657 if (!this.attr_("labelsDiv")) {
658 var divWidth
= this.attr_('labelsDivWidth');
660 "position": "absolute",
663 "width": divWidth
+ "px",
665 "left": (this.width_
- divWidth
- 2) + "px",
666 "background": "white",
668 "overflow": "hidden"};
669 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
670 var div
= document
.createElement("div");
671 for (var name
in messagestyle
) {
672 if (messagestyle
.hasOwnProperty(name
)) {
673 div
.style
[name
] = messagestyle
[name
];
676 this.graphDiv
.appendChild(div
);
677 this.attrs_
.labelsDiv
= div
;
682 * Create the text box to adjust the averaging period
683 * @return {Object} The newly-created text box
686 Dygraph
.prototype.createRollInterface_
= function() {
687 var display
= this.attr_('showRoller') ? "block" : "none";
688 var textAttr
= { "position": "absolute",
690 "top": (this.plotter_
.area
.h
- 25) + "px",
691 "left": (this.plotter_
.area
.x
+ 1) + "px",
694 var roller
= document
.createElement("input");
695 roller
.type
= "text";
697 roller
.value
= this.rollPeriod_
;
698 for (var name
in textAttr
) {
699 if (textAttr
.hasOwnProperty(name
)) {
700 roller
.style
[name
] = textAttr
[name
];
704 var pa
= this.graphDiv
;
705 pa
.appendChild(roller
);
707 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
711 // These functions are taken from MochiKit.Signal
712 Dygraph
.pageX
= function(e
) {
714 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
717 var b
= document
.body
;
719 (de
.scrollLeft
|| b
.scrollLeft
) -
720 (de
.clientLeft
|| 0);
724 Dygraph
.pageY
= function(e
) {
726 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
729 var b
= document
.body
;
731 (de
.scrollTop
|| b
.scrollTop
) -
737 * Set up all the mouse handlers needed to capture dragging behavior for zoom
741 Dygraph
.prototype.createDragInterface_
= function() {
744 // Tracks whether the mouse is down right now
745 var isZooming
= false;
746 var isPanning
= false;
747 var dragStartX
= null;
748 var dragStartY
= null;
752 var draggingDate
= null;
753 var dateRange
= null;
755 // Utility function to convert page-wide coordinates to canvas coords
758 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
759 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
761 // Draw zoom rectangles when the mouse is down and the user moves around
762 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
764 dragEndX
= getX(event
);
765 dragEndY
= getY(event
);
767 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
769 } else if (isPanning
) {
770 dragEndX
= getX(event
);
771 dragEndY
= getY(event
);
773 // Want to have it so that:
774 // 1. draggingDate appears at dragEndX
775 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
777 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
778 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
779 self
.drawGraph_(self
.rawData_
);
783 // Track the beginning of drag events
784 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
785 px
= Dygraph
.findPosX(self
.canvas_
);
786 py
= Dygraph
.findPosY(self
.canvas_
);
787 dragStartX
= getX(event
);
788 dragStartY
= getY(event
);
790 if (event
.altKey
|| event
.shiftKey
) {
791 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
793 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
794 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
801 // If the user releases the mouse button during a drag, but not over the
802 // canvas, then it doesn't count as a zooming action.
803 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
804 if (isZooming
|| isPanning
) {
817 // Temporarily cancel the dragging event when the mouse leaves the graph
818 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
825 // If the mouse is released on the canvas during a drag event, then it's a
826 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
827 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
830 dragEndX
= getX(event
);
831 dragEndY
= getY(event
);
832 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
833 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
835 if (regionWidth
< 2 && regionHeight
< 2 &&
836 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
837 // TODO(danvk): pass along more info about the points, e.g. 'x'
838 if (self
.attr_('clickCallback') != null) {
839 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
841 if (self
.attr_('pointClickCallback')) {
842 // check if the click was on a particular point.
844 var closestDistance
= 0;
845 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
846 var p
= self
.selPoints_
[i
];
847 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
848 Math
.pow(p
.canvasy
- dragEndY
, 2);
849 if (closestIdx
== -1 || distance
< closestDistance
) {
850 closestDistance
= distance
;
855 // Allow any click within two pixels of the dot.
856 var radius
= self
.attr_('highlightCircleSize') + 2;
857 if (closestDistance
<= 5 * 5) {
858 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
863 if (regionWidth
>= 10) {
864 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
865 Math
.max(dragStartX
, dragEndX
));
867 self
.canvas_
.getContext("2d").clearRect(0, 0,
869 self
.canvas_
.height
);
883 // Double-clicking zooms back out
884 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
885 if (self
.dateWindow_
== null) return;
886 self
.dateWindow_
= null;
887 self
.drawGraph_(self
.rawData_
);
888 var minDate
= self
.rawData_
[0][0];
889 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
890 if (self
.attr_("zoomCallback")) {
891 self
.attr_("zoomCallback")(minDate
, maxDate
);
897 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
898 * up any previous zoom rectangles that were drawn. This could be optimized to
899 * avoid extra redrawing, but it's tricky to avoid interactions with the status
901 * @param {Number} startX The X position where the drag started, in canvas
903 * @param {Number} endX The current X position of the drag, in canvas coords.
904 * @param {Number} prevEndX The value of endX on the previous call to this
905 * function. Used to avoid excess redrawing
908 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
909 var ctx
= this.canvas_
.getContext("2d");
911 // Clean up from the previous rect if necessary
913 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
914 Math
.abs(startX
- prevEndX
), this.height_
);
917 // Draw a light-grey rectangle to show the new viewing area
918 if (endX
&& startX
) {
919 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
920 ctx
.fillRect(Math
.min(startX
, endX
), 0,
921 Math
.abs(endX
- startX
), this.height_
);
926 * Zoom to something containing [lowX, highX]. These are pixel coordinates
927 * in the canvas. The exact zoom window may be slightly larger if there are no
928 * data points near lowX or highX. This function redraws the graph.
929 * @param {Number} lowX The leftmost pixel value that should be visible.
930 * @param {Number} highX The rightmost pixel value that should be visible.
933 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
934 // Find the earliest and latest dates contained in this canvasx range.
935 var r
= this.toDataCoords(lowX
, null);
937 r
= this.toDataCoords(highX
, null);
940 this.dateWindow_
= [minDate
, maxDate
];
941 this.drawGraph_(this.rawData_
);
942 if (this.attr_("zoomCallback")) {
943 this.attr_("zoomCallback")(minDate
, maxDate
);
948 * When the mouse moves in the canvas, display information about a nearby data
949 * point and draw dots over those points in the data series. This function
950 * takes care of cleanup of previously-drawn dots.
951 * @param {Object} event The mousemove event from the browser.
954 Dygraph
.prototype.mouseMove_
= function(event
) {
955 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
956 var points
= this.layout_
.points
;
961 // Loop through all the points and find the date nearest to our current
963 var minDist
= 1e+100;
965 for (var i
= 0; i
< points
.length
; i
++) {
966 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
967 if (dist
> minDist
) continue;
971 if (idx
>= 0) lastx
= points
[idx
].xval
;
972 // Check that you can really highlight the last day's data
973 if (canvasx
> points
[points
.length
-1].canvasx
)
974 lastx
= points
[points
.length
-1].xval
;
976 // Extract the points we've selected
977 this.selPoints_
= [];
978 var l
= points
.length
;
979 if (!this.attr_("stackedGraph")) {
980 for (var i
= 0; i
< l
; i
++) {
981 if (points
[i
].xval
== lastx
) {
982 this.selPoints_
.push(points
[i
]);
986 // Need to 'unstack' points starting from the bottom
987 var cumulative_sum
= 0;
988 for (var i
= l
- 1; i
>= 0; i
--) {
989 if (points
[i
].xval
== lastx
) {
990 var p
= {}; // Clone the point since we modify it
991 for (var k
in points
[i
]) {
994 p
.yval
-= cumulative_sum
;
995 cumulative_sum
+= p
.yval
;
996 this.selPoints_
.push(p
);
999 this.selPoints_
.reverse();
1002 if (this.attr_("highlightCallback")) {
1003 var px
= this.lastx_
;
1004 if (px
!== null && lastx
!= px
) {
1005 // only fire if the selected point has changed.
1006 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1010 // Save last x position for callbacks.
1011 this.lastx_
= lastx
;
1013 this.updateSelection_();
1017 * Draw dots over the selectied points in the data series. This function
1018 * takes care of cleanup of previously-drawn dots.
1021 Dygraph
.prototype.updateSelection_
= function() {
1022 // Clear the previously drawn vertical, if there is one
1023 var ctx
= this.canvas_
.getContext("2d");
1024 if (this.previousVerticalX_
>= 0) {
1025 // Determine the maximum highlight circle size.
1026 var maxCircleSize
= 0;
1027 var labels
= this.attr_('labels');
1028 for (var i
= 1; i
< labels
.length
; i
++) {
1029 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1030 if (r
> maxCircleSize
) maxCircleSize
= r
;
1032 var px
= this.previousVerticalX_
;
1033 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1034 2 * maxCircleSize
+ 2, this.height_
);
1037 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1039 if (this.selPoints_
.length
> 0) {
1040 var canvasx
= this.selPoints_
[0].canvasx
;
1042 // Set the status message to indicate the selected point(s)
1043 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1044 var fmtFunc
= this.attr_('yValueFormatter');
1045 var clen
= this.colors_
.length
;
1047 if (this.attr_('showLabelsOnHighlight')) {
1048 // Set the status message to indicate the selected point(s)
1049 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1050 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1051 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1052 if (this.attr_("labelsSeparateLines")) {
1055 var point
= this.selPoints_
[i
];
1056 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1057 var yval
= fmtFunc(point
.yval
);
1058 replace
+= " <b><font color='" + c
.toHex() + "'>"
1059 + point
.name
+ "</font></b>:"
1063 this.attr_("labelsDiv").innerHTML
= replace
;
1066 // Draw colored circles over the center of each selected point
1068 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1069 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1071 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1073 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1074 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1075 0, 2 * Math
.PI
, false);
1080 this.previousVerticalX_
= canvasx
;
1085 * Set manually set selected dots, and display information about them
1086 * @param int row number that should by highlighted
1087 * false value clears the selection
1090 Dygraph
.prototype.setSelection
= function(row
) {
1091 // Extract the points we've selected
1092 this.selPoints_
= [];
1095 if (row
!== false) {
1096 row
= row
-this.boundaryIds_
[0][0];
1099 if (row
!== false && row
>= 0) {
1100 for (var i
in this.layout_
.datasets
) {
1101 if (row
< this.layout_
.datasets
[i
].length
) {
1102 var point
= this.layout_
.points
[pos
+row
];
1104 if (this.attr_("stackedGraph")) {
1105 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1108 this.selPoints_
.push(point
);
1110 pos
+= this.layout_
.datasets
[i
].length
;
1114 if (this.selPoints_
.length
) {
1115 this.lastx_
= this.selPoints_
[0].xval
;
1116 this.updateSelection_();
1119 this.clearSelection();
1125 * The mouse has left the canvas. Clear out whatever artifacts remain
1126 * @param {Object} event the mouseout event from the browser.
1129 Dygraph
.prototype.mouseOut_
= function(event
) {
1130 if (this.attr_("unhighlightCallback")) {
1131 this.attr_("unhighlightCallback")(event
);
1134 if (this.attr_("hideOverlayOnMouseOut")) {
1135 this.clearSelection();
1140 * Remove all selection from the canvas
1143 Dygraph
.prototype.clearSelection
= function() {
1144 // Get rid of the overlay data
1145 var ctx
= this.canvas_
.getContext("2d");
1146 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1147 this.attr_("labelsDiv").innerHTML
= "";
1148 this.selPoints_
= [];
1153 * Returns the number of the currently selected row
1154 * @return int row number, of -1 if nothing is selected
1157 Dygraph
.prototype.getSelection
= function() {
1158 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1162 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1163 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1164 return row
+ this.boundaryIds_
[0][0];
1170 Dygraph
.zeropad
= function(x
) {
1171 if (x
< 10) return "0" + x
; else return "" + x
;
1175 * Return a string version of the hours, minutes and seconds portion of a date.
1176 * @param {Number} date The JavaScript date (ms since epoch)
1177 * @return {String} A time of the form "HH:MM:SS"
1180 Dygraph
.hmsString_
= function(date
) {
1181 var zeropad
= Dygraph
.zeropad
;
1182 var d
= new Date(date
);
1183 if (d
.getSeconds()) {
1184 return zeropad(d
.getHours()) + ":" +
1185 zeropad(d
.getMinutes()) + ":" +
1186 zeropad(d
.getSeconds());
1188 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1193 * Convert a JS date to a string appropriate to display on an axis that
1194 * is displaying values at the stated granularity.
1195 * @param {Date} date The date to format
1196 * @param {Number} granularity One of the Dygraph granularity constants
1197 * @return {String} The formatted date
1200 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1201 if (granularity
>= Dygraph
.MONTHLY
) {
1202 return date
.strftime('%b %y');
1204 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1205 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1206 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1208 return Dygraph
.hmsString_(date
.getTime());
1214 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1215 * @param {Number} date The JavaScript date (ms since epoch)
1216 * @return {String} A date of the form "YYYY/MM/DD"
1219 Dygraph
.dateString_
= function(date
, self
) {
1220 var zeropad
= Dygraph
.zeropad
;
1221 var d
= new Date(date
);
1224 var year
= "" + d
.getFullYear();
1225 // Get a 0 padded month string
1226 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1227 // Get a 0 padded day string
1228 var day
= zeropad(d
.getDate());
1231 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1232 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1234 return year
+ "/" + month + "/" + day
+ ret
;
1238 * Round a number to the specified number of digits past the decimal point.
1239 * @param {Number} num The number to round
1240 * @param {Number} places The number of decimals to which to round
1241 * @return {Number} The rounded number
1244 Dygraph
.round_
= function(num
, places
) {
1245 var shift
= Math
.pow(10, places
);
1246 return Math
.round(num
* shift
)/shift
;
1250 * Fires when there's data available to be graphed.
1251 * @param {String} data Raw CSV data to be plotted
1254 Dygraph
.prototype.loadedEvent_
= function(data
) {
1255 this.rawData_
= this.parseCSV_(data
);
1256 this.drawGraph_(this.rawData_
);
1259 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1260 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1261 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1264 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1267 Dygraph
.prototype.addXTicks_
= function() {
1268 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1269 var startDate
, endDate
;
1270 if (this.dateWindow_
) {
1271 startDate
= this.dateWindow_
[0];
1272 endDate
= this.dateWindow_
[1];
1274 startDate
= this.rawData_
[0][0];
1275 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1278 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1279 this.layout_
.updateOptions({xTicks
: xTicks
});
1282 // Time granularity enumeration
1283 Dygraph
.SECONDLY
= 0;
1284 Dygraph
.TWO_SECONDLY
= 1;
1285 Dygraph
.FIVE_SECONDLY
= 2;
1286 Dygraph
.TEN_SECONDLY
= 3;
1287 Dygraph
.THIRTY_SECONDLY
= 4;
1288 Dygraph
.MINUTELY
= 5;
1289 Dygraph
.TWO_MINUTELY
= 6;
1290 Dygraph
.FIVE_MINUTELY
= 7;
1291 Dygraph
.TEN_MINUTELY
= 8;
1292 Dygraph
.THIRTY_MINUTELY
= 9;
1293 Dygraph
.HOURLY
= 10;
1294 Dygraph
.TWO_HOURLY
= 11;
1295 Dygraph
.SIX_HOURLY
= 12;
1297 Dygraph
.WEEKLY
= 14;
1298 Dygraph
.MONTHLY
= 15;
1299 Dygraph
.QUARTERLY
= 16;
1300 Dygraph
.BIANNUAL
= 17;
1301 Dygraph
.ANNUAL
= 18;
1302 Dygraph
.DECADAL
= 19;
1303 Dygraph
.NUM_GRANULARITIES
= 20;
1305 Dygraph
.SHORT_SPACINGS
= [];
1306 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1307 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1308 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1309 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1310 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1311 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1312 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1313 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1314 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1315 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1316 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1317 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1318 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1319 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1320 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1324 // If we used this time granularity, how many ticks would there be?
1325 // This is only an approximation, but it's generally good enough.
1327 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1328 if (granularity
< Dygraph
.MONTHLY
) {
1329 // Generate one tick mark for every fixed interval of time.
1330 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1331 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1333 var year_mod
= 1; // e.g. to only print one point every 10 years.
1334 var num_months
= 12;
1335 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1336 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1337 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1338 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1340 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1341 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1342 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1348 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1349 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1351 // Returns an array containing {v: millis, label: label} dictionaries.
1353 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1354 var formatter
= this.attr_("xAxisLabelFormatter");
1356 if (granularity
< Dygraph
.MONTHLY
) {
1357 // Generate one tick mark for every fixed interval of time.
1358 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1359 var format
= '%d%b'; // e.g. "1Jan"
1361 // Find a time less than start_time which occurs on a "nice" time boundary
1362 // for this granularity.
1363 var g
= spacing
/ 1000;
1364 var d
= new Date(start_time
);
1365 if (g
<= 60) { // seconds
1366 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1370 if (g
<= 60) { // minutes
1371 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1376 if (g
<= 24) { // days
1377 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1382 if (g
== 7) { // one week
1383 d
.setDate(d
.getDate() - d
.getDay());
1388 start_time
= d
.getTime();
1390 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1391 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1394 // Display a tick mark on the first of a set of months of each year.
1395 // Years get a tick mark iff y % year_mod == 0. This is useful for
1396 // displaying a tick mark once every 10 years, say, on long time scales.
1398 var year_mod
= 1; // e.g. to only print one point every 10 years.
1400 if (granularity
== Dygraph
.MONTHLY
) {
1401 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1402 } else if (granularity
== Dygraph
.QUARTERLY
) {
1403 months
= [ 0, 3, 6, 9 ];
1404 } else if (granularity
== Dygraph
.BIANNUAL
) {
1406 } else if (granularity
== Dygraph
.ANNUAL
) {
1408 } else if (granularity
== Dygraph
.DECADAL
) {
1413 var start_year
= new Date(start_time
).getFullYear();
1414 var end_year
= new Date(end_time
).getFullYear();
1415 var zeropad
= Dygraph
.zeropad
;
1416 for (var i
= start_year
; i
<= end_year
; i
++) {
1417 if (i
% year_mod
!= 0) continue;
1418 for (var j
= 0; j
< months
.length
; j
++) {
1419 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1420 var t
= Date
.parse(date_str
);
1421 if (t
< start_time
|| t
> end_time
) continue;
1422 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1432 * Add ticks to the x-axis based on a date range.
1433 * @param {Number} startDate Start of the date window (millis since epoch)
1434 * @param {Number} endDate End of the date window (millis since epoch)
1435 * @return {Array.<Object>} Array of {label, value} tuples.
1438 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1440 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1441 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1442 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1449 return self
.GetXAxis(startDate
, endDate
, chosen
);
1451 // TODO(danvk): signal error.
1456 * Add ticks when the x axis has numbers on it (instead of dates)
1457 * @param {Number} startDate Start of the date window (millis since epoch)
1458 * @param {Number} endDate End of the date window (millis since epoch)
1460 * @param {function} attribute accessor function.
1461 * @return {Array.<Object>} Array of {label, value} tuples.
1464 Dygraph
.numericTicks
= function(minV
, maxV
, self
, attr
) {
1465 // This is a bit of a hack to allow per-axis attributes.
1466 if (!attr
) attr
= self
.attr_
;
1469 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1470 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1471 // The first spacing greater than pixelsPerYLabel is what we use.
1472 // TODO(danvk): version that works on a log scale.
1473 if (attr("labelsKMG2")) {
1474 var mults
= [1, 2, 4, 8];
1476 var mults
= [1, 2, 5];
1478 var scale
, low_val
, high_val
, nTicks
;
1479 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1480 var pixelsPerTick
= attr('pixelsPerYLabel');
1481 for (var i
= -10; i
< 50; i
++) {
1482 if (attr("labelsKMG2")) {
1483 var base_scale
= Math
.pow(16, i
);
1485 var base_scale
= Math
.pow(10, i
);
1487 for (var j
= 0; j
< mults
.length
; j
++) {
1488 scale
= base_scale
* mults
[j
];
1489 low_val
= Math
.floor(minV
/ scale
) * scale
;
1490 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1491 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1492 var spacing
= self
.height_
/ nTicks
;
1493 // wish I could break out of both loops at once...
1494 if (spacing
> pixelsPerTick
) break;
1496 if (spacing
> pixelsPerTick
) break;
1499 // Construct labels for the ticks
1503 if (attr("labelsKMB")) {
1505 k_labels
= [ "K", "M", "B", "T" ];
1507 if (attr("labelsKMG2")) {
1508 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1510 k_labels
= [ "k", "M", "G", "T" ];
1513 // Allow reverse y-axis if it's explicitly requested.
1514 if (low_val
> high_val
) scale
*= -1;
1516 for (var i
= 0; i
< nTicks
; i
++) {
1517 var tickV
= low_val
+ i
* scale
;
1518 var absTickV
= Math
.abs(tickV
);
1520 if (formatter
!= undefined
) {
1521 label
= formatter(tickV
);
1523 label
= Dygraph
.round_(tickV
, 2);
1525 if (k_labels
.length
) {
1526 // Round up to an appropriate unit.
1528 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1529 if (absTickV
>= n
) {
1530 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1535 ticks
.push( {label
: label
, v
: tickV
} );
1541 * Adds appropriate ticks on the y-axis
1542 * @param {Number} minY The minimum Y value in the data set
1543 * @param {Number} maxY The maximum Y value in the data set
1546 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1547 // Set the number of ticks so that the labels are human-friendly.
1548 // TODO(danvk): make this an attribute as well.
1549 var formatter
= this.attr_('yAxisLabelFormatter') ? this.attr_('yAxisLabelFormatter') : this.attr_('yValueFormatter');
1550 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this, formatter
);
1551 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1555 // Computes the range of the data series (including confidence intervals).
1556 // series is either [ [x1, y1], [x2, y2], ... ] or
1557 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1558 // Returns [low, high]
1559 Dygraph
.prototype.extremeValues_
= function(series
) {
1560 var minY
= null, maxY
= null;
1562 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1564 // With custom bars, maxY is the max of the high values.
1565 for (var j
= 0; j
< series
.length
; j
++) {
1566 var y
= series
[j
][1][0];
1568 var low
= y
- series
[j
][1][1];
1569 var high
= y
+ series
[j
][1][2];
1570 if (low
> y
) low
= y
; // this can happen with custom bars,
1571 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1572 if (maxY
== null || high
> maxY
) {
1575 if (minY
== null || low
< minY
) {
1580 for (var j
= 0; j
< series
.length
; j
++) {
1581 var y
= series
[j
][1];
1582 if (y
=== null || isNaN(y
)) continue;
1583 if (maxY
== null || y
> maxY
) {
1586 if (minY
== null || y
< minY
) {
1592 return [minY
, maxY
];
1596 * Update the graph with new data. Data is in the format
1597 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1598 * or, if errorBars=true,
1599 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1600 * @param {Array.<Object>} data The data (see above)
1603 Dygraph
.prototype.drawGraph_
= function(data
) {
1604 // This is used to set the second parameter to drawCallback, below.
1605 var is_initial_draw
= this.is_initial_draw_
;
1606 this.is_initial_draw_
= false;
1608 var minY
= null, maxY
= null;
1609 this.layout_
.removeAllDatasets();
1611 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1613 // Loop over the fields (series). Go from the last to the first,
1614 // because if they're stacked that's how we accumulate the values.
1616 var cumulative_y
= []; // For stacked series.
1619 var extremes
= {}; // series name -> [low, high]
1621 // Loop over all fields and create datasets
1622 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1623 if (!this.visibility()[i
- 1]) continue;
1625 var seriesName
= this.attr_("labels")[i
];
1626 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1629 for (var j
= 0; j
< data
.length
; j
++) {
1630 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1631 var date
= data
[j
][0];
1632 series
.push([date
, data
[j
][i
]]);
1635 series
= this.rollingAverage(series
, this.rollPeriod_
);
1637 // Prune down to the desired range, if necessary (for zooming)
1638 // Because there can be lines going to points outside of the visible area,
1639 // we actually prune to visible points, plus one on either side.
1640 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1641 if (this.dateWindow_
) {
1642 var low
= this.dateWindow_
[0];
1643 var high
= this.dateWindow_
[1];
1645 // TODO(danvk): do binary search instead of linear search.
1646 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1647 var firstIdx
= null, lastIdx
= null;
1648 for (var k
= 0; k
< series
.length
; k
++) {
1649 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1652 if (series
[k
][0] <= high
) {
1656 if (firstIdx
=== null) firstIdx
= 0;
1657 if (firstIdx
> 0) firstIdx
--;
1658 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1659 if (lastIdx
< series
.length
- 1) lastIdx
++;
1660 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1661 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1662 pruned
.push(series
[k
]);
1666 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1669 var seriesExtremes
= this.extremeValues_(series
);
1670 extremes
[seriesName
] = seriesExtremes
;
1671 var thisMinY
= seriesExtremes
[0];
1672 var thisMaxY
= seriesExtremes
[1];
1673 if (minY
=== null || (thisMinY
!= null && thisMinY
< minY
)) minY
= thisMinY
;
1674 if (maxY
=== null || (thisMaxY
!= null && thisMaxY
> maxY
)) maxY
= thisMaxY
;
1677 for (var j
=0; j
<series
.length
; j
++) {
1678 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1681 } else if (this.attr_("stackedGraph")) {
1682 var l
= series
.length
;
1684 for (var j
= 0; j
< l
; j
++) {
1685 // If one data set has a NaN, let all subsequent stacked
1686 // sets inherit the NaN -- only start at 0 for the first set.
1687 var x
= series
[j
][0];
1688 if (cumulative_y
[x
] === undefined
)
1689 cumulative_y
[x
] = 0;
1691 actual_y
= series
[j
][1];
1692 cumulative_y
[x
] += actual_y
;
1694 series
[j
] = [x
, cumulative_y
[x
]]
1696 if (!maxY
|| cumulative_y
[x
] > maxY
)
1697 maxY
= cumulative_y
[x
];
1701 datasets
[i
] = series
;
1704 for (var i
= 1; i
< datasets
.length
; i
++) {
1705 if (!this.visibility()[i
- 1]) continue;
1706 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1709 var out
= this.computeYaxes_(extremes
);
1711 var seriesToAxisMap
= out
[1];
1712 this.displayedYRange_
= axes
[0].valueRange
;
1713 this.layout_
.updateOptions( { yAxes
: axes
,
1714 seriesToAxisMap
: seriesToAxisMap
1719 // Tell PlotKit to use this new data and render itself
1720 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1721 this.layout_
.evaluateWithError();
1722 this.plotter_
.clear();
1723 this.plotter_
.render();
1724 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1725 this.canvas_
.height
);
1727 if (this.attr_("drawCallback") !== null) {
1728 this.attr_("drawCallback")(this, is_initial_draw
);
1733 * Determine properties of the y axes. These include the number of axes and
1734 * data series/styles associated with each. This does not compute the range of
1735 * each axis, since that can only be determined when drawing.
1736 * Returns [ axes, seriesToAxisMap ]
1737 * axes = [ { options } ]
1738 * seriesToAxisMap = { seriesName: 0, seriesName2: 1, ... }
1739 * indices are into the axes array.
1741 Dygraph
.prototype.computeYaxes_
= function(extremes
) {
1742 var axes
= [{}]; // always have at least one y-axis.
1743 var seriesToAxisMap
= {};
1744 var seriesForAxis
= [[]];
1746 // all options which could be applied per-axis:
1754 'axisLabelFontSize',
1758 // Copy global axis options over to the first axis.
1759 for (var i
= 0; i
< axisOptions
.length
; i
++) {
1760 var k
= axisOptions
[i
];
1761 var v
= this.attr_(k
);
1762 if (v
) axes
[0][k
] = v
;
1765 // Go through once and add all the axes.
1766 for (var seriesName
in extremes
) {
1767 if (!extremes
.hasOwnProperty(seriesName
)) continue;
1768 var axis
= this.attr_("axis", seriesName
);
1770 seriesToAxisMap
[seriesName
] = 0;
1771 seriesForAxis
[0].push(seriesName
);
1774 if (typeof(axis
) == 'object') {
1775 // Add a new axis, making a copy of its per-axis options.
1777 Dygraph
.update(opts
, axes
[0]);
1778 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
1779 Dygraph
.update(opts
, axis
);
1781 seriesToAxisMap
[seriesName
] = axes
.length
- 1;
1782 seriesForAxis
.push([seriesName
]);
1786 // Go through one more time and assign series to an axis defined by another
1787 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
1788 for (var seriesName
in extremes
) {
1789 if (!extremes
.hasOwnProperty(seriesName
)) continue;
1790 var axis
= this.attr_("axis", seriesName
);
1791 if (typeof(axis
) == 'string') {
1792 if (!seriesToAxisMap
.hasOwnProperty(axis
)) {
1793 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
1794 "series " + axis
+ ", which does not define its own axis.");
1797 var idx
= seriesToAxisMap
[axis
];
1798 seriesToAxisMap
[seriesName
] = idx
;
1799 seriesForAxis
[idx
].push(seriesName
);
1803 // Compute extreme values, a span and tick marks for each axis.
1804 for (var i
= 0; i
< axes
.length
; i
++) {
1806 if (!axis
.valueRange
) {
1807 // Calcuate the extremes of extremes.
1808 var series
= seriesForAxis
[i
];
1809 var minY
= Infinity
; // extremes[series[0]][0];
1810 var maxY
= -Infinity
; // extremes[series[0]][1];
1811 for (var j
= 0; j
< series
.length
; j
++) {
1812 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
1813 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
1815 if (axis
.includeZero
&& minY
> 0) minY
= 0;
1817 // Add some padding and round up to an integer to be human-friendly.
1818 var span
= maxY
- minY
;
1819 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1820 if (span
== 0) { span
= maxY
; }
1821 var maxAxisY
= maxY
+ 0.1 * span
;
1822 var minAxisY
= minY
- 0.1 * span
;
1824 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1825 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1826 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1828 if (this.attr_("includeZero")) {
1829 if (maxY
< 0) maxAxisY
= 0;
1830 if (minY
> 0) minAxisY
= 0;
1833 axis
.valueRange
= [minAxisY
, maxAxisY
];
1838 Dygraph
.numericTicks(axis
.valueRange
[0],
1841 function(self
, axis
) {
1842 return function(a
) {
1843 if (axis
.hasOwnProperty(a
)) return axis
[a
];
1844 return self
.attr_(a
);
1849 return [axes
, seriesToAxisMap
];
1853 * Calculates the rolling average of a data set.
1854 * If originalData is [label, val], rolls the average of those.
1855 * If originalData is [label, [, it's interpreted as [value, stddev]
1856 * and the roll is returned in the same form, with appropriately reduced
1857 * stddev for each value.
1858 * Note that this is where fractional input (i.e. '5/10') is converted into
1860 * @param {Array} originalData The data in the appropriate format (see above)
1861 * @param {Number} rollPeriod The number of days over which to average the data
1863 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1864 if (originalData
.length
< 2)
1865 return originalData
;
1866 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1867 var rollingData
= [];
1868 var sigma
= this.attr_("sigma");
1870 if (this.fractions_
) {
1872 var den
= 0; // numerator/denominator
1874 for (var i
= 0; i
< originalData
.length
; i
++) {
1875 num
+= originalData
[i
][1][0];
1876 den
+= originalData
[i
][1][1];
1877 if (i
- rollPeriod
>= 0) {
1878 num
-= originalData
[i
- rollPeriod
][1][0];
1879 den
-= originalData
[i
- rollPeriod
][1][1];
1882 var date
= originalData
[i
][0];
1883 var value
= den
? num
/ den
: 0.0;
1884 if (this.attr_("errorBars")) {
1885 if (this.wilsonInterval_
) {
1886 // For more details on this confidence interval, see:
1887 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1889 var p
= value
< 0 ? 0 : value
, n
= den
;
1890 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1891 var denom
= 1 + sigma
* sigma
/ den
;
1892 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1893 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1894 rollingData
[i
] = [date
,
1895 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1897 rollingData
[i
] = [date
, [0, 0, 0]];
1900 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1901 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1904 rollingData
[i
] = [date
, mult
* value
];
1907 } else if (this.attr_("customBars")) {
1912 for (var i
= 0; i
< originalData
.length
; i
++) {
1913 var data
= originalData
[i
][1];
1915 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1917 if (y
!= null && !isNaN(y
)) {
1923 if (i
- rollPeriod
>= 0) {
1924 var prev
= originalData
[i
- rollPeriod
];
1925 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1932 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1933 1.0 * (mid
- low
) / count
,
1934 1.0 * (high
- mid
) / count
]];
1937 // Calculate the rolling average for the first rollPeriod - 1 points where
1938 // there is not enough data to roll over the full number of days
1939 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1940 if (!this.attr_("errorBars")){
1941 if (rollPeriod
== 1) {
1942 return originalData
;
1945 for (var i
= 0; i
< originalData
.length
; i
++) {
1948 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1949 var y
= originalData
[j
][1];
1950 if (y
== null || isNaN(y
)) continue;
1952 sum
+= originalData
[j
][1];
1955 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1957 rollingData
[i
] = [originalData
[i
][0], null];
1962 for (var i
= 0; i
< originalData
.length
; i
++) {
1966 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1967 var y
= originalData
[j
][1][0];
1968 if (y
== null || isNaN(y
)) continue;
1970 sum
+= originalData
[j
][1][0];
1971 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1974 var stddev
= Math
.sqrt(variance
) / num_ok
;
1975 rollingData
[i
] = [originalData
[i
][0],
1976 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1978 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1988 * Parses a date, returning the number of milliseconds since epoch. This can be
1989 * passed in as an xValueParser in the Dygraph constructor.
1990 * TODO(danvk): enumerate formats that this understands.
1991 * @param {String} A date in YYYYMMDD format.
1992 * @return {Number} Milliseconds since epoch.
1995 Dygraph
.dateParser
= function(dateStr
, self
) {
1998 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1999 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2000 while (dateStrSlashed
.search("-") != -1) {
2001 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2003 d
= Date
.parse(dateStrSlashed
);
2004 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2005 // TODO(danvk): remove support for this format. It's confusing.
2006 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2007 + "/" + dateStr
.substr(6,2);
2008 d
= Date
.parse(dateStrSlashed
);
2010 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2011 // "2009/07/12 12:34:56"
2012 d
= Date
.parse(dateStr
);
2015 if (!d
|| isNaN(d
)) {
2016 self
.error("Couldn't parse " + dateStr
+ " as a date");
2022 * Detects the type of the str (date or numeric) and sets the various
2023 * formatting attributes in this.attrs_ based on this type.
2024 * @param {String} str An x value.
2027 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2029 if (str
.indexOf('-') >= 0 ||
2030 str
.indexOf('/') >= 0 ||
2031 isNaN(parseFloat(str
))) {
2033 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2034 // TODO(danvk): remove support for this format.
2039 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2040 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2041 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2042 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2044 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2045 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2046 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2047 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2052 * Parses a string in a special csv format. We expect a csv file where each
2053 * line is a date point, and the first field in each line is the date string.
2054 * We also expect that all remaining fields represent series.
2055 * if the errorBars attribute is set, then interpret the fields as:
2056 * date, series1, stddev1, series2, stddev2, ...
2057 * @param {Array.<Object>} data See above.
2060 * @return Array.<Object> An array with one entry for each row. These entries
2061 * are an array of cells in that row. The first entry is the parsed x-value for
2062 * the row. The second, third, etc. are the y-values. These can take on one of
2063 * three forms, depending on the CSV and constructor parameters:
2065 * 2. [ value, stddev ]
2066 * 3. [ low value, center value, high value ]
2068 Dygraph
.prototype.parseCSV_
= function(data
) {
2070 var lines
= data
.split("\n");
2072 // Use the default delimiter or fall back to a tab if that makes sense.
2073 var delim
= this.attr_('delimiter');
2074 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2079 if (this.labelsFromCSV_
) {
2081 this.attrs_
.labels
= lines
[0].split(delim
);
2084 // Parse the x as a float or return null if it's not a number.
2085 var parseFloatOrNull
= function(x
) {
2086 var val
= parseFloat(x
);
2087 return isNaN(val
) ? null : val
;
2091 var defaultParserSet
= false; // attempt to auto-detect x value type
2092 var expectedCols
= this.attr_("labels").length
;
2093 var outOfOrder
= false;
2094 for (var i
= start
; i
< lines
.length
; i
++) {
2095 var line
= lines
[i
];
2096 if (line
.length
== 0) continue; // skip blank lines
2097 if (line
[0] == '#') continue; // skip comment lines
2098 var inFields
= line
.split(delim
);
2099 if (inFields
.length
< 2) continue;
2102 if (!defaultParserSet
) {
2103 this.detectTypeFromString_(inFields
[0]);
2104 xParser
= this.attr_("xValueParser");
2105 defaultParserSet
= true;
2107 fields
[0] = xParser(inFields
[0], this);
2109 // If fractions are expected, parse the numbers as "A/B
"
2110 if (this.fractions_) {
2111 for (var j = 1; j < inFields.length; j++) {
2112 // TODO(danvk): figure out an appropriate way to flag parse errors.
2113 var vals = inFields[j].split("/");
2114 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2116 } else if (this.attr_("errorBars
")) {
2117 // If there are error bars, values are (value, stddev) pairs
2118 for (var j = 1; j < inFields.length; j += 2)
2119 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2120 parseFloatOrNull(inFields[j + 1])];
2121 } else if (this.attr_("customBars
")) {
2122 // Bars are a low;center;high tuple
2123 for (var j = 1; j < inFields.length; j++) {
2124 var vals = inFields[j].split(";");
2125 fields[j] = [ parseFloatOrNull(vals[0]),
2126 parseFloatOrNull(vals[1]),
2127 parseFloatOrNull(vals[2]) ];
2130 // Values are just numbers
2131 for (var j = 1; j < inFields.length; j++) {
2132 fields[j] = parseFloatOrNull(inFields[j]);
2135 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2140 if (fields.length != expectedCols) {
2141 this.error("Number of columns
in line
" + i + " (" + fields.length +
2142 ") does not agree
with number of
labels (" + expectedCols +
2148 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2149 ret.sort(function(a,b) { return a[0] - b[0] });
2156 * The user has provided their data as a pre-packaged JS array. If the x values
2157 * are numeric, this is the same as dygraphs' internal format. If the x values
2158 * are dates, we need to convert them from Date objects to ms since epoch.
2159 * @param {Array.<Object>} data
2160 * @return {Array.<Object>} data with numeric x values.
2162 Dygraph.prototype.parseArray_ = function(data) {
2163 // Peek at the first x value to see if it's numeric.
2164 if (data.length == 0) {
2165 this.error("Can
't plot empty data set");
2168 if (data[0].length == 0) {
2169 this.error("Data set cannot contain an empty row");
2173 if (this.attr_("labels") == null) {
2174 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2175 "in the options parameter");
2176 this.attrs_.labels = [ "X" ];
2177 for (var i = 1; i < data[0].length; i++) {
2178 this.attrs_.labels.push("Y" + i);
2182 if (Dygraph.isDateLike(data[0][0])) {
2183 // Some intelligent defaults for a date x-axis.
2184 this.attrs_.xValueFormatter = Dygraph.dateString_;
2185 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2186 this.attrs_.xTicker = Dygraph.dateTicker;
2188 // Assume they're all dates
.
2189 var parsedData
= Dygraph
.clone(data
);
2190 for (var i
= 0; i
< data
.length
; i
++) {
2191 if (parsedData
[i
].length
== 0) {
2192 this.error("Row " + (1 + i
) + " of data is empty");
2195 if (parsedData
[i
][0] == null
2196 || typeof(parsedData
[i
][0].getTime
) != 'function'
2197 || isNaN(parsedData
[i
][0].getTime())) {
2198 this.error("x value in row " + (1 + i
) + " is not a Date");
2201 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2205 // Some intelligent defaults for a numeric x-axis.
2206 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2207 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2213 * Parses a DataTable object from gviz.
2214 * The data is expected to have a first column that is either a date or a
2215 * number. All subsequent columns must be numbers. If there is a clear mismatch
2216 * between this.xValueParser_ and the type of the first column, it will be
2217 * fixed. Fills out rawData_.
2218 * @param {Array.<Object>} data See above.
2221 Dygraph
.prototype.parseDataTable_
= function(data
) {
2222 var cols
= data
.getNumberOfColumns();
2223 var rows
= data
.getNumberOfRows();
2225 var indepType
= data
.getColumnType(0);
2226 if (indepType
== 'date' || indepType
== 'datetime') {
2227 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2228 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2229 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2230 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2231 } else if (indepType
== 'number') {
2232 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2233 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2234 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2235 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2237 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2238 "column 1 of DataTable input (Got '" + indepType
+ "')");
2242 // Array of the column indices which contain data (and not annotations).
2244 var annotationCols
= {}; // data index -> [annotation cols]
2245 var hasAnnotations
= false;
2246 for (var i
= 1; i
< cols
; i
++) {
2247 var type
= data
.getColumnType(i
);
2248 if (type
== 'number') {
2250 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2251 // This is OK -- it's an annotation column.
2252 var dataIdx
= colIdx
[colIdx
.length
- 1];
2253 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2254 annotationCols
[dataIdx
] = [i
];
2256 annotationCols
[dataIdx
].push(i
);
2258 hasAnnotations
= true;
2260 this.error("Only 'number' is supported as a dependent type with Gviz." +
2261 " 'string' is only supported if displayAnnotations is true");
2265 // Read column labels
2266 // TODO(danvk): add support back for errorBars
2267 var labels
= [data
.getColumnLabel(0)];
2268 for (var i
= 0; i
< colIdx
.length
; i
++) {
2269 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2270 if (this.attr_("errorBars")) i
+= 1;
2272 this.attrs_
.labels
= labels
;
2273 cols
= labels
.length
;
2276 var outOfOrder
= false;
2277 var annotations
= [];
2278 for (var i
= 0; i
< rows
; i
++) {
2280 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2281 data
.getValue(i
, 0) === null) {
2282 this.warn("Ignoring row " + i
+
2283 " of DataTable because of undefined or null first column.");
2287 if (indepType
== 'date' || indepType
== 'datetime') {
2288 row
.push(data
.getValue(i
, 0).getTime());
2290 row
.push(data
.getValue(i
, 0));
2292 if (!this.attr_("errorBars")) {
2293 for (var j
= 0; j
< colIdx
.length
; j
++) {
2294 var col
= colIdx
[j
];
2295 row
.push(data
.getValue(i
, col
));
2296 if (hasAnnotations
&&
2297 annotationCols
.hasOwnProperty(col
) &&
2298 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2300 ann
.series
= data
.getColumnLabel(col
);
2302 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2304 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2305 if (k
) ann
.text
+= "\n";
2306 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2308 annotations
.push(ann
);
2312 for (var j
= 0; j
< cols
- 1; j
++) {
2313 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2316 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2323 this.warn("DataTable is out of order; order it correctly to speed loading.");
2324 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2326 this.rawData_
= ret
;
2328 if (annotations
.length
> 0) {
2329 this.setAnnotations(annotations
, true);
2333 // These functions are all based on MochiKit.
2334 Dygraph
.update
= function (self
, o
) {
2335 if (typeof(o
) != 'undefined' && o
!== null) {
2337 if (o
.hasOwnProperty(k
)) {
2345 Dygraph
.isArrayLike
= function (o
) {
2346 var typ
= typeof(o
);
2348 (typ
!= 'object' && !(typ
== 'function' &&
2349 typeof(o
.item
) == 'function')) ||
2351 typeof(o
.length
) != 'number' ||
2359 Dygraph
.isDateLike
= function (o
) {
2360 if (typeof(o
) != "object" || o
=== null ||
2361 typeof(o
.getTime
) != 'function') {
2367 Dygraph
.clone
= function(o
) {
2368 // TODO(danvk): figure out how MochiKit's version works
2370 for (var i
= 0; i
< o
.length
; i
++) {
2371 if (Dygraph
.isArrayLike(o
[i
])) {
2372 r
.push(Dygraph
.clone(o
[i
]));
2382 * Get the CSV data. If it's in a function, call that function. If it's in a
2383 * file, do an XMLHttpRequest to get it.
2386 Dygraph
.prototype.start_
= function() {
2387 if (typeof this.file_
== 'function') {
2388 // CSV string. Pretend we got it via XHR.
2389 this.loadedEvent_(this.file_());
2390 } else if (Dygraph
.isArrayLike(this.file_
)) {
2391 this.rawData_
= this.parseArray_(this.file_
);
2392 this.drawGraph_(this.rawData_
);
2393 } else if (typeof this.file_
== 'object' &&
2394 typeof this.file_
.getColumnRange
== 'function') {
2395 // must be a DataTable from gviz.
2396 this.parseDataTable_(this.file_
);
2397 this.drawGraph_(this.rawData_
);
2398 } else if (typeof this.file_
== 'string') {
2399 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2400 if (this.file_
.indexOf('\n') >= 0) {
2401 this.loadedEvent_(this.file_
);
2403 var req
= new XMLHttpRequest();
2405 req
.onreadystatechange
= function () {
2406 if (req
.readyState
== 4) {
2407 if (req
.status
== 200) {
2408 caller
.loadedEvent_(req
.responseText
);
2413 req
.open("GET", this.file_
, true);
2417 this.error("Unknown data format: " + (typeof this.file_
));
2422 * Changes various properties of the graph. These can include:
2424 * <li>file: changes the source data for the graph</li>
2425 * <li>errorBars: changes whether the data contains stddev</li>
2427 * @param {Object} attrs The new properties and values
2429 Dygraph
.prototype.updateOptions
= function(attrs
) {
2430 // TODO(danvk): this is a mess. Rethink this function.
2431 if (attrs
.rollPeriod
) {
2432 this.rollPeriod_
= attrs
.rollPeriod
;
2434 if (attrs
.dateWindow
) {
2435 this.dateWindow_
= attrs
.dateWindow
;
2438 // TODO(danvk): validate per-series options.
2443 // highlightCircleSize
2445 Dygraph
.update(this.user_attrs_
, attrs
);
2446 Dygraph
.update(this.renderOptions_
, attrs
);
2448 this.labelsFromCSV_
= (this.attr_("labels") == null);
2449 this.computeYaxes_();
2451 // TODO(danvk): this doesn't match the constructor logic
2452 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2453 if (attrs
['file']) {
2454 this.file_
= attrs
['file'];
2457 this.drawGraph_(this.rawData_
);
2462 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2463 * containing div (which has presumably changed size since the dygraph was
2464 * instantiated. If the width/height are specified, the div will be resized.
2466 * This is far more efficient than destroying and re-instantiating a
2467 * Dygraph, since it doesn't have to reparse the underlying data.
2469 * @param {Number} width Width (in pixels)
2470 * @param {Number} height Height (in pixels)
2472 Dygraph
.prototype.resize
= function(width
, height
) {
2473 if (this.resize_lock
) {
2476 this.resize_lock
= true;
2478 if ((width
=== null) != (height
=== null)) {
2479 this.warn("Dygraph.resize() should be called with zero parameters or " +
2480 "two non-NULL parameters. Pretending it was zero.");
2481 width
= height
= null;
2484 // TODO(danvk): there should be a clear() method.
2485 this.maindiv_
.innerHTML
= "";
2486 this.attrs_
.labelsDiv
= null;
2489 this.maindiv_
.style
.width
= width
+ "px";
2490 this.maindiv_
.style
.height
= height
+ "px";
2491 this.width_
= width
;
2492 this.height_
= height
;
2494 this.width_
= this.maindiv_
.offsetWidth
;
2495 this.height_
= this.maindiv_
.offsetHeight
;
2498 this.createInterface_();
2499 this.drawGraph_(this.rawData_
);
2501 this.resize_lock
= false;
2505 * Adjusts the number of days in the rolling average. Updates the graph to
2506 * reflect the new averaging period.
2507 * @param {Number} length Number of days over which to average the data.
2509 Dygraph
.prototype.adjustRoll
= function(length
) {
2510 this.rollPeriod_
= length
;
2511 this.drawGraph_(this.rawData_
);
2515 * Returns a boolean array of visibility statuses.
2517 Dygraph
.prototype.visibility
= function() {
2518 // Do lazy-initialization, so that this happens after we know the number of
2520 if (!this.attr_("visibility")) {
2521 this.attrs_
["visibility"] = [];
2523 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2524 this.attr_("visibility").push(true);
2526 return this.attr_("visibility");
2530 * Changes the visiblity of a series.
2532 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2533 var x
= this.visibility();
2534 if (num
< 0 && num
>= x
.length
) {
2535 this.warn("invalid series number in setVisibility: " + num
);
2538 this.drawGraph_(this.rawData_
);
2543 * Update the list of annotations and redraw the chart.
2545 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2546 // Only add the annotation CSS rule once we know it will be used.
2547 Dygraph
.addAnnotationRule();
2548 this.annotations_
= ann
;
2549 this.layout_
.setAnnotations(this.annotations_
);
2550 if (!suppressDraw
) {
2551 this.drawGraph_(this.rawData_
);
2556 * Return the list of annotations.
2558 Dygraph
.prototype.annotations
= function() {
2559 return this.annotations_
;
2563 * Get the index of a series (column) given its name. The first column is the
2564 * x-axis, so the data series start with index 1.
2566 Dygraph
.prototype.indexFromSetName
= function(name
) {
2567 var labels
= this.attr_("labels");
2568 for (var i
= 0; i
< labels
.length
; i
++) {
2569 if (labels
[i
] == name
) return i
;
2574 Dygraph
.addAnnotationRule
= function() {
2575 if (Dygraph
.addedAnnotationCSS
) return;
2578 if (document
.styleSheets
.length
> 0) {
2579 mysheet
= document
.styleSheets
[0];
2581 var styleSheetElement
= document
.createElement("style");
2582 styleSheetElement
.type
= "text/css";
2583 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2584 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2585 if (document
.styleSheets
[i
].disabled
) continue;
2586 mysheet
= document
.styleSheets
[i
];
2590 var rule
= "border: 1px solid black; " +
2591 "background-color: white; " +
2592 "text-align: center;";
2593 if (mysheet
.insertRule
) { // Firefox
2594 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2595 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2596 } else if (mysheet
.addRule
) { // IE
2597 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2600 Dygraph
.addedAnnotationCSS
= true;
2604 * Create a new canvas element. This is more complex than a simple
2605 * document.createElement("canvas") because of IE and excanvas.
2607 Dygraph
.createCanvas
= function() {
2608 var canvas
= document
.createElement("canvas");
2610 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2611 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2612 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2620 * A wrapper around Dygraph that implements the gviz API.
2621 * @param {Object} container The DOM object the visualization should live in.
2623 Dygraph
.GVizChart
= function(container
) {
2624 this.container
= container
;
2627 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2628 this.container
.innerHTML
= '';
2629 this.date_graph
= new Dygraph(this.container
, data
, options
);
2633 * Google charts compatible setSelection
2634 * Only row selection is supported, all points in the row will be highlighted
2635 * @param {Array} array of the selected cells
2638 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2640 if (selection_array
.length
) {
2641 row
= selection_array
[0].row
;
2643 this.date_graph
.setSelection(row
);
2647 * Google charts compatible getSelection implementation
2648 * @return {Array} array of the selected cells
2651 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2654 var row
= this.date_graph
.getSelection();
2656 if (row
< 0) return selection
;
2659 for (var i
in this.date_graph
.layout_
.datasets
) {
2660 selection
.push({row
: row
, column
: col
});
2667 // Older pages may still use this name.
2668 DateGraph
= Dygraph
;