1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
93 labelsShowZeroValues
: true,
96 showLabelsOnHighlight
: true,
98 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
103 axisLabelFontSize
: 14,
106 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
110 xValueFormatter
: Dygraph
.dateString_
,
111 xValueParser
: Dygraph
.dateParser
,
112 xTicker
: Dygraph
.dateTicker
,
120 wilsonInterval
: true, // only relevant if fractions is true
124 connectSeparatedPoints
: false,
127 hideOverlayOnMouseOut
: true,
132 // Various logging levels.
138 // Used for initializing annotation CSS rules only once.
139 Dygraph
.addedAnnotationCSS
= false;
141 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
142 // Labels is no longer a constructor parameter, since it's typically set
143 // directly from the data source. It also conains a name for the x-axis,
144 // which the previous constructor form did not.
145 if (labels
!= null) {
146 var new_labels
= ["Date"];
147 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
148 Dygraph
.update(attrs
, { 'labels': new_labels
});
150 this.__init__(div
, file
, attrs
);
154 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
155 * and interaction <canvas> inside of it. See the constructor for details
157 * @param {Element} div the Element to render the graph into.
158 * @param {String | Function} file Source data
159 * @param {Object} attrs Miscellaneous other options
162 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
163 // Support two-argument constructor
164 if (attrs
== null) { attrs
= {}; }
166 // Copy the important bits into the object
167 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
170 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
171 this.previousVerticalX_
= -1;
172 this.fractions_
= attrs
.fractions
|| false;
173 this.dateWindow_
= attrs
.dateWindow
|| null;
174 this.valueRange_
= attrs
.valueRange
|| 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 Dygraph
.addAnnotationRule();
237 // Create the containing DIV and other interactive elements
238 this.createInterface_();
243 Dygraph
.prototype.attr_
= function(name
) {
244 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
245 return this.user_attrs_
[name
];
246 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
247 return this.attrs_
[name
];
253 // TODO(danvk): any way I can get the line numbers to be this.warn call?
254 Dygraph
.prototype.log
= function(severity
, message
) {
255 if (typeof(console
) != 'undefined') {
258 console
.debug('dygraphs: ' + message
);
261 console
.info('dygraphs: ' + message
);
263 case Dygraph
.WARNING
:
264 console
.warn('dygraphs: ' + message
);
267 console
.error('dygraphs: ' + message
);
272 Dygraph
.prototype.info
= function(message
) {
273 this.log(Dygraph
.INFO
, message
);
275 Dygraph
.prototype.warn
= function(message
) {
276 this.log(Dygraph
.WARNING
, message
);
278 Dygraph
.prototype.error
= function(message
) {
279 this.log(Dygraph
.ERROR
, message
);
283 * Returns the current rolling period, as set by the user or an option.
284 * @return {Number} The number of days in the rolling window
286 Dygraph
.prototype.rollPeriod
= function() {
287 return this.rollPeriod_
;
291 * Returns the currently-visible x-range. This can be affected by zooming,
292 * panning or a call to updateOptions.
293 * Returns a two-element array: [left, right].
294 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
296 Dygraph
.prototype.xAxisRange
= function() {
297 if (this.dateWindow_
) return this.dateWindow_
;
299 // The entire chart is visible.
300 var left
= this.rawData_
[0][0];
301 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
302 return [left
, right
];
306 * Returns the currently-visible y-range. This can be affected by zooming,
307 * panning or a call to updateOptions.
308 * Returns a two-element array: [bottom, top].
310 Dygraph
.prototype.yAxisRange
= function() {
311 return this.displayedYRange_
;
315 * Convert from data coordinates to canvas/div X/Y coordinates.
316 * Returns a two-element array: [X, Y]
318 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
319 var ret
= [null, null];
320 var area
= this.plotter_
.area
;
322 var xRange
= this.xAxisRange();
323 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
327 var yRange
= this.yAxisRange();
328 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
334 // TODO(danvk): use these functions throughout dygraphs.
336 * Convert from canvas/div coords to data coordinates.
337 * Returns a two-element array: [X, Y]
339 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
340 var ret
= [null, null];
341 var area
= this.plotter_
.area
;
343 var xRange
= this.xAxisRange();
344 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
348 var yRange
= this.yAxisRange();
349 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
355 Dygraph
.addEvent
= function(el
, evt
, fn
) {
356 var normed_fn
= function(e
) {
357 if (!e
) var e
= window
.event
;
360 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
361 el
.addEventListener(evt
, normed_fn
, false);
363 el
.attachEvent('on' + evt
, normed_fn
);
367 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
368 var ctx
= cnv
.getContext("2d");
370 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
375 * Generates interface elements for the Dygraph: a containing div, a div to
376 * display the current point, and a textbox to adjust the rolling average
377 * period. Also creates the Renderer/Layout elements.
380 Dygraph
.prototype.createInterface_
= function() {
381 // Create the all-enclosing graph div
382 var enclosing
= this.maindiv_
;
384 this.graphDiv
= document
.createElement("div");
385 this.graphDiv
.style
.width
= this.width_
+ "px";
386 this.graphDiv
.style
.height
= this.height_
+ "px";
387 enclosing
.appendChild(this.graphDiv
);
391 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
393 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
394 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
395 - 2 * this.attr_("axisTickSize");
396 this.clippingArea_
= clip
;
398 // Create the canvas for interactive parts of the chart.
399 this.canvas_
= Dygraph
.createCanvas();
400 this.canvas_
.style
.position
= "absolute";
401 this.canvas_
.width
= this.width_
;
402 this.canvas_
.height
= this.height_
;
403 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
404 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
406 // ... and for static parts of the chart.
407 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
409 // The interactive parts of the graph are drawn on top of the chart.
410 this.graphDiv
.appendChild(this.hidden_
);
411 this.graphDiv
.appendChild(this.canvas_
);
412 this.mouseEventElement_
= this.canvas_
;
414 // Make sure we don't overdraw.
415 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
416 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
419 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
420 dygraph
.mouseMove_(e
);
422 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
423 dygraph
.mouseOut_(e
);
426 // Create the grapher
427 // TODO(danvk): why does the Layout need its own set of options?
428 this.layoutOptions_
= { 'xOriginIsZero': false };
429 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
430 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
431 Dygraph
.update(this.layoutOptions_
, {
432 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
434 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
436 // TODO(danvk): why does the Renderer need its own set of options?
437 this.renderOptions_
= { colorScheme
: this.colors_
,
439 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
440 Dygraph
.update(this.renderOptions_
, this.attrs_
);
441 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
442 this.plotter_
= new DygraphCanvasRenderer(this,
443 this.hidden_
, this.layout_
,
444 this.renderOptions_
);
446 this.createStatusMessage_();
447 this.createRollInterface_();
448 this.createDragInterface_();
452 * Detach DOM elements in the dygraph and null out all data references.
453 * Calling this when you're done with a dygraph can dramatically reduce memory
454 * usage. See, e.g., the tests/perf.html example.
456 Dygraph
.prototype.destroy
= function() {
457 var removeRecursive
= function(node
) {
458 while (node
.hasChildNodes()) {
459 removeRecursive(node
.firstChild
);
460 node
.removeChild(node
.firstChild
);
463 removeRecursive(this.maindiv_
);
465 var nullOut
= function(obj
) {
467 if (typeof(obj
[n
]) === 'object') {
473 // These may not all be necessary, but it can't hurt...
474 nullOut(this.layout_
);
475 nullOut(this.plotter_
);
480 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
481 * this particular canvas. All Dygraph work is done on this.canvas_.
482 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
483 * @return {Object} The newly-created canvas
486 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
487 var h
= Dygraph
.createCanvas();
488 h
.style
.position
= "absolute";
489 // TODO(danvk): h should be offset from canvas. canvas needs to include
490 // some extra area to make it easier to zoom in on the far left and far
491 // right. h needs to be precisely the plot area, so that clipping occurs.
492 h
.style
.top
= canvas
.style
.top
;
493 h
.style
.left
= canvas
.style
.left
;
494 h
.width
= this.width_
;
495 h
.height
= this.height_
;
496 h
.style
.width
= this.width_
+ "px"; // for IE
497 h
.style
.height
= this.height_
+ "px"; // for IE
501 // Taken from MochiKit.Color
502 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
506 if (saturation
=== 0) {
511 var i
= Math
.floor(hue
* 6);
512 var f
= (hue
* 6) - i
;
513 var p
= value
* (1 - saturation
);
514 var q
= value
* (1 - (saturation
* f
));
515 var t
= value
* (1 - (saturation
* (1 - f
)));
517 case 1: red
= q
; green
= value
; blue
= p
; break;
518 case 2: red
= p
; green
= value
; blue
= t
; break;
519 case 3: red
= p
; green
= q
; blue
= value
; break;
520 case 4: red
= t
; green
= p
; blue
= value
; break;
521 case 5: red
= value
; green
= p
; blue
= q
; break;
522 case 6: // fall through
523 case 0: red
= value
; green
= t
; blue
= p
; break;
526 red
= Math
.floor(255 * red
+ 0.5);
527 green
= Math
.floor(255 * green
+ 0.5);
528 blue
= Math
.floor(255 * blue
+ 0.5);
529 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
534 * Generate a set of distinct colors for the data series. This is done with a
535 * color wheel. Saturation/Value are customizable, and the hue is
536 * equally-spaced around the color wheel. If a custom set of colors is
537 * specified, that is used instead.
540 Dygraph
.prototype.setColors_
= function() {
541 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
542 // away with this.renderOptions_.
543 var num
= this.attr_("labels").length
- 1;
545 var colors
= this.attr_('colors');
547 var sat
= this.attr_('colorSaturation') || 1.0;
548 var val
= this.attr_('colorValue') || 0.5;
549 var half
= Math
.ceil(num
/ 2);
550 for (var i
= 1; i
<= num
; i
++) {
551 if (!this.visibility()[i
-1]) continue;
552 // alternate colors for high contrast.
553 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
554 var hue
= (1.0 * idx
/ (1 + num
));
555 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
558 for (var i
= 0; i
< num
; i
++) {
559 if (!this.visibility()[i
]) continue;
560 var colorStr
= colors
[i
% colors
.length
];
561 this.colors_
.push(colorStr
);
565 // TODO(danvk): update this w/r
/t/ the
new options system
.
566 this.renderOptions_
.colorScheme
= this.colors_
;
567 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
568 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
569 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
573 * Return the list of colors. This is either the list of colors passed in the
574 * attributes, or the autogenerated list of rgb(r,g,b) strings.
575 * @return {Array<string>} The list of colors.
577 Dygraph
.prototype.getColors
= function() {
581 // The following functions are from quirksmode.org with a modification for Safari from
582 // http://blog.firetree.net/2005/07/04/javascript-find-position/
583 // http://www.quirksmode.org/js
/findpos
.html
584 Dygraph
.findPosX
= function(obj
) {
589 curleft
+= obj
.offsetLeft
;
590 if(!obj
.offsetParent
)
592 obj
= obj
.offsetParent
;
599 Dygraph
.findPosY
= function(obj
) {
604 curtop
+= obj
.offsetTop
;
605 if(!obj
.offsetParent
)
607 obj
= obj
.offsetParent
;
617 * Create the div that contains information on the selected point(s)
618 * This goes in the top right of the canvas, unless an external div has already
622 Dygraph
.prototype.createStatusMessage_
= function() {
623 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
624 if (userLabelsDiv
&& null != userLabelsDiv
625 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
626 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
628 if (!this.attr_("labelsDiv")) {
629 var divWidth
= this.attr_('labelsDivWidth');
631 "position": "absolute",
634 "width": divWidth
+ "px",
636 "left": (this.width_
- divWidth
- 2) + "px",
637 "background": "white",
639 "overflow": "hidden"};
640 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
641 var div
= document
.createElement("div");
642 for (var name
in messagestyle
) {
643 if (messagestyle
.hasOwnProperty(name
)) {
644 div
.style
[name
] = messagestyle
[name
];
647 this.graphDiv
.appendChild(div
);
648 this.attrs_
.labelsDiv
= div
;
653 * Create the text box to adjust the averaging period
654 * @return {Object} The newly-created text box
657 Dygraph
.prototype.createRollInterface_
= function() {
658 var display
= this.attr_('showRoller') ? "block" : "none";
659 var textAttr
= { "position": "absolute",
661 "top": (this.plotter_
.area
.h
- 25) + "px",
662 "left": (this.plotter_
.area
.x
+ 1) + "px",
665 var roller
= document
.createElement("input");
666 roller
.type
= "text";
668 roller
.value
= this.rollPeriod_
;
669 for (var name
in textAttr
) {
670 if (textAttr
.hasOwnProperty(name
)) {
671 roller
.style
[name
] = textAttr
[name
];
675 var pa
= this.graphDiv
;
676 pa
.appendChild(roller
);
678 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
682 // These functions are taken from MochiKit.Signal
683 Dygraph
.pageX
= function(e
) {
685 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
688 var b
= document
.body
;
690 (de
.scrollLeft
|| b
.scrollLeft
) -
691 (de
.clientLeft
|| 0);
695 Dygraph
.pageY
= function(e
) {
697 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
700 var b
= document
.body
;
702 (de
.scrollTop
|| b
.scrollTop
) -
708 * Set up all the mouse handlers needed to capture dragging behavior for zoom
712 Dygraph
.prototype.createDragInterface_
= function() {
715 // Tracks whether the mouse is down right now
716 var isZooming
= false;
717 var isPanning
= false;
718 var dragStartX
= null;
719 var dragStartY
= null;
723 var draggingDate
= null;
724 var dateRange
= null;
726 // Utility function to convert page-wide coordinates to canvas coords
729 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
730 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
732 // Draw zoom rectangles when the mouse is down and the user moves around
733 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
735 dragEndX
= getX(event
);
736 dragEndY
= getY(event
);
738 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
740 } else if (isPanning
) {
741 dragEndX
= getX(event
);
742 dragEndY
= getY(event
);
744 // Want to have it so that:
745 // 1. draggingDate appears at dragEndX
746 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
748 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
749 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
750 self
.drawGraph_(self
.rawData_
);
754 // Track the beginning of drag events
755 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
756 px
= Dygraph
.findPosX(self
.canvas_
);
757 py
= Dygraph
.findPosY(self
.canvas_
);
758 dragStartX
= getX(event
);
759 dragStartY
= getY(event
);
761 if (event
.altKey
|| event
.shiftKey
) {
762 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
764 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
765 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
772 // If the user releases the mouse button during a drag, but not over the
773 // canvas, then it doesn't count as a zooming action.
774 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
775 if (isZooming
|| isPanning
) {
788 // Temporarily cancel the dragging event when the mouse leaves the graph
789 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
796 // If the mouse is released on the canvas during a drag event, then it's a
797 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
798 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
801 dragEndX
= getX(event
);
802 dragEndY
= getY(event
);
803 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
804 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
806 if (regionWidth
< 2 && regionHeight
< 2 && self
.lastx_
!= undefined
) {
807 // TODO(danvk): pass along more info about the points, e.g. 'x'
808 if (self
.attr_('clickCallback') != null) {
809 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
811 if (self
.attr_('pointClickCallback')) {
812 // check if the click was on a particular point.
814 var closestDistance
= 0;
815 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
816 var p
= self
.selPoints_
[i
];
817 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
818 Math
.pow(p
.canvasy
- dragEndY
, 2);
819 if (closestIdx
== -1 || distance
< closestDistance
) {
820 closestDistance
= distance
;
825 // Allow any click within two pixels of the dot.
826 var radius
= self
.attr_('highlightCircleSize') + 2;
827 if (closestDistance
<= 5 * 5) {
828 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
833 if (regionWidth
>= 10) {
834 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
835 Math
.max(dragStartX
, dragEndX
));
837 self
.canvas_
.getContext("2d").clearRect(0, 0,
839 self
.canvas_
.height
);
853 // Double-clicking zooms back out
854 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
855 if (self
.dateWindow_
== null) return;
856 self
.dateWindow_
= null;
857 self
.drawGraph_(self
.rawData_
);
858 var minDate
= self
.rawData_
[0][0];
859 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
860 if (self
.attr_("zoomCallback")) {
861 self
.attr_("zoomCallback")(minDate
, maxDate
);
867 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
868 * up any previous zoom rectangles that were drawn. This could be optimized to
869 * avoid extra redrawing, but it's tricky to avoid interactions with the status
871 * @param {Number} startX The X position where the drag started, in canvas
873 * @param {Number} endX The current X position of the drag, in canvas coords.
874 * @param {Number} prevEndX The value of endX on the previous call to this
875 * function. Used to avoid excess redrawing
878 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
879 var ctx
= this.canvas_
.getContext("2d");
881 // Clean up from the previous rect if necessary
883 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
884 Math
.abs(startX
- prevEndX
), this.height_
);
887 // Draw a light-grey rectangle to show the new viewing area
888 if (endX
&& startX
) {
889 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
890 ctx
.fillRect(Math
.min(startX
, endX
), 0,
891 Math
.abs(endX
- startX
), this.height_
);
896 * Zoom to something containing [lowX, highX]. These are pixel coordinates
897 * in the canvas. The exact zoom window may be slightly larger if there are no
898 * data points near lowX or highX. This function redraws the graph.
899 * @param {Number} lowX The leftmost pixel value that should be visible.
900 * @param {Number} highX The rightmost pixel value that should be visible.
903 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
904 // Find the earliest and latest dates contained in this canvasx range.
905 var r
= this.toDataCoords(lowX
, null);
907 r
= this.toDataCoords(highX
, null);
910 this.dateWindow_
= [minDate
, maxDate
];
911 this.drawGraph_(this.rawData_
);
912 if (this.attr_("zoomCallback")) {
913 this.attr_("zoomCallback")(minDate
, maxDate
);
918 * When the mouse moves in the canvas, display information about a nearby data
919 * point and draw dots over those points in the data series. This function
920 * takes care of cleanup of previously-drawn dots.
921 * @param {Object} event The mousemove event from the browser.
924 Dygraph
.prototype.mouseMove_
= function(event
) {
925 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
926 var points
= this.layout_
.points
;
931 // Loop through all the points and find the date nearest to our current
933 var minDist
= 1e+100;
935 for (var i
= 0; i
< points
.length
; i
++) {
936 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
937 if (dist
> minDist
) continue;
941 if (idx
>= 0) lastx
= points
[idx
].xval
;
942 // Check that you can really highlight the last day's data
943 if (canvasx
> points
[points
.length
-1].canvasx
)
944 lastx
= points
[points
.length
-1].xval
;
946 // Extract the points we've selected
947 this.selPoints_
= [];
948 var l
= points
.length
;
949 if (!this.attr_("stackedGraph")) {
950 for (var i
= 0; i
< l
; i
++) {
951 if (points
[i
].xval
== lastx
) {
952 this.selPoints_
.push(points
[i
]);
956 // Need to 'unstack' points starting from the bottom
957 var cumulative_sum
= 0;
958 for (var i
= l
- 1; i
>= 0; i
--) {
959 if (points
[i
].xval
== lastx
) {
960 var p
= {}; // Clone the point since we modify it
961 for (var k
in points
[i
]) {
964 p
.yval
-= cumulative_sum
;
965 cumulative_sum
+= p
.yval
;
966 this.selPoints_
.push(p
);
969 this.selPoints_
.reverse();
972 if (this.attr_("highlightCallback")) {
973 var px
= this.lastx_
;
974 if (px
!== null && lastx
!= px
) {
975 // only fire if the selected point has changed.
976 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
980 // Save last x position for callbacks.
983 this.updateSelection_();
987 * Draw dots over the selectied points in the data series. This function
988 * takes care of cleanup of previously-drawn dots.
991 Dygraph
.prototype.updateSelection_
= function() {
992 // Clear the previously drawn vertical, if there is one
993 var circleSize
= this.attr_('highlightCircleSize');
994 var ctx
= this.canvas_
.getContext("2d");
995 if (this.previousVerticalX_
>= 0) {
996 var px
= this.previousVerticalX_
;
997 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
1000 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1002 if (this.selPoints_
.length
> 0) {
1003 var canvasx
= this.selPoints_
[0].canvasx
;
1005 // Set the status message to indicate the selected point(s)
1006 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1007 var fmtFunc
= this.attr_('yValueFormatter');
1008 var clen
= this.colors_
.length
;
1010 if (this.attr_('showLabelsOnHighlight')) {
1011 // Set the status message to indicate the selected point(s)
1012 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1013 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1014 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1015 if (this.attr_("labelsSeparateLines")) {
1018 var point
= this.selPoints_
[i
];
1019 var c
= new RGBColor(this.colors_
[i
%clen
]);
1020 var yval
= fmtFunc(point
.yval
);
1021 replace
+= " <b><font color='" + c
.toHex() + "'>"
1022 + point
.name
+ "</font></b>:"
1026 this.attr_("labelsDiv").innerHTML
= replace
;
1029 // Draw colored circles over the center of each selected point
1031 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1032 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1034 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1035 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1036 0, 2 * Math
.PI
, false);
1041 this.previousVerticalX_
= canvasx
;
1046 * Set manually set selected dots, and display information about them
1047 * @param int row number that should by highlighted
1048 * false value clears the selection
1051 Dygraph
.prototype.setSelection
= function(row
) {
1052 // Extract the points we've selected
1053 this.selPoints_
= [];
1056 if (row
!== false) {
1057 row
= row
-this.boundaryIds_
[0][0];
1060 if (row
!== false && row
>= 0) {
1061 for (var i
in this.layout_
.datasets
) {
1062 if (row
< this.layout_
.datasets
[i
].length
) {
1063 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1065 pos
+= this.layout_
.datasets
[i
].length
;
1069 if (this.selPoints_
.length
) {
1070 this.lastx_
= this.selPoints_
[0].xval
;
1071 this.updateSelection_();
1074 this.clearSelection();
1080 * The mouse has left the canvas. Clear out whatever artifacts remain
1081 * @param {Object} event the mouseout event from the browser.
1084 Dygraph
.prototype.mouseOut_
= function(event
) {
1085 if (this.attr_("unhighlightCallback")) {
1086 this.attr_("unhighlightCallback")(event
);
1089 if (this.attr_("hideOverlayOnMouseOut")) {
1090 this.clearSelection();
1095 * Remove all selection from the canvas
1098 Dygraph
.prototype.clearSelection
= function() {
1099 // Get rid of the overlay data
1100 var ctx
= this.canvas_
.getContext("2d");
1101 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1102 this.attr_("labelsDiv").innerHTML
= "";
1103 this.selPoints_
= [];
1108 * Returns the number of the currently selected row
1109 * @return int row number, of -1 if nothing is selected
1112 Dygraph
.prototype.getSelection
= function() {
1113 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1117 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1118 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1119 return row
+ this.boundaryIds_
[0][0];
1125 Dygraph
.zeropad
= function(x
) {
1126 if (x
< 10) return "0" + x
; else return "" + x
;
1130 * Return a string version of the hours, minutes and seconds portion of a date.
1131 * @param {Number} date The JavaScript date (ms since epoch)
1132 * @return {String} A time of the form "HH:MM:SS"
1135 Dygraph
.hmsString_
= function(date
) {
1136 var zeropad
= Dygraph
.zeropad
;
1137 var d
= new Date(date
);
1138 if (d
.getSeconds()) {
1139 return zeropad(d
.getHours()) + ":" +
1140 zeropad(d
.getMinutes()) + ":" +
1141 zeropad(d
.getSeconds());
1143 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1148 * Convert a JS date to a string appropriate to display on an axis that
1149 * is displaying values at the stated granularity.
1150 * @param {Date} date The date to format
1151 * @param {Number} granularity One of the Dygraph granularity constants
1152 * @return {String} The formatted date
1155 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1156 if (granularity
>= Dygraph
.MONTHLY
) {
1157 return date
.strftime('%b %y');
1159 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1160 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1161 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1163 return Dygraph
.hmsString_(date
.getTime());
1169 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1170 * @param {Number} date The JavaScript date (ms since epoch)
1171 * @return {String} A date of the form "YYYY/MM/DD"
1174 Dygraph
.dateString_
= function(date
, self
) {
1175 var zeropad
= Dygraph
.zeropad
;
1176 var d
= new Date(date
);
1179 var year
= "" + d
.getFullYear();
1180 // Get a 0 padded month string
1181 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1182 // Get a 0 padded day string
1183 var day
= zeropad(d
.getDate());
1186 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1187 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1189 return year
+ "/" + month + "/" + day
+ ret
;
1193 * Round a number to the specified number of digits past the decimal point.
1194 * @param {Number} num The number to round
1195 * @param {Number} places The number of decimals to which to round
1196 * @return {Number} The rounded number
1199 Dygraph
.round_
= function(num
, places
) {
1200 var shift
= Math
.pow(10, places
);
1201 return Math
.round(num
* shift
)/shift
;
1205 * Fires when there's data available to be graphed.
1206 * @param {String} data Raw CSV data to be plotted
1209 Dygraph
.prototype.loadedEvent_
= function(data
) {
1210 this.rawData_
= this.parseCSV_(data
);
1211 this.drawGraph_(this.rawData_
);
1214 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1215 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1216 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1219 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1222 Dygraph
.prototype.addXTicks_
= function() {
1223 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1224 var startDate
, endDate
;
1225 if (this.dateWindow_
) {
1226 startDate
= this.dateWindow_
[0];
1227 endDate
= this.dateWindow_
[1];
1229 startDate
= this.rawData_
[0][0];
1230 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1233 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1234 this.layout_
.updateOptions({xTicks
: xTicks
});
1237 // Time granularity enumeration
1238 Dygraph
.SECONDLY
= 0;
1239 Dygraph
.TWO_SECONDLY
= 1;
1240 Dygraph
.FIVE_SECONDLY
= 2;
1241 Dygraph
.TEN_SECONDLY
= 3;
1242 Dygraph
.THIRTY_SECONDLY
= 4;
1243 Dygraph
.MINUTELY
= 5;
1244 Dygraph
.TWO_MINUTELY
= 6;
1245 Dygraph
.FIVE_MINUTELY
= 7;
1246 Dygraph
.TEN_MINUTELY
= 8;
1247 Dygraph
.THIRTY_MINUTELY
= 9;
1248 Dygraph
.HOURLY
= 10;
1249 Dygraph
.TWO_HOURLY
= 11;
1250 Dygraph
.SIX_HOURLY
= 12;
1252 Dygraph
.WEEKLY
= 14;
1253 Dygraph
.MONTHLY
= 15;
1254 Dygraph
.QUARTERLY
= 16;
1255 Dygraph
.BIANNUAL
= 17;
1256 Dygraph
.ANNUAL
= 18;
1257 Dygraph
.DECADAL
= 19;
1258 Dygraph
.NUM_GRANULARITIES
= 20;
1260 Dygraph
.SHORT_SPACINGS
= [];
1261 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1262 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1263 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1264 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1265 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1266 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1267 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1268 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1269 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1270 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1271 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1272 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1273 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1274 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1275 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1279 // If we used this time granularity, how many ticks would there be?
1280 // This is only an approximation, but it's generally good enough.
1282 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1283 if (granularity
< Dygraph
.MONTHLY
) {
1284 // Generate one tick mark for every fixed interval of time.
1285 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1286 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1288 var year_mod
= 1; // e.g. to only print one point every 10 years.
1289 var num_months
= 12;
1290 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1291 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1292 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1293 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1295 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1296 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1297 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1303 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1304 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1306 // Returns an array containing {v: millis, label: label} dictionaries.
1308 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1309 var formatter
= this.attr_("xAxisLabelFormatter");
1311 if (granularity
< Dygraph
.MONTHLY
) {
1312 // Generate one tick mark for every fixed interval of time.
1313 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1314 var format
= '%d%b'; // e.g. "1Jan"
1316 // Find a time less than start_time which occurs on a "nice" time boundary
1317 // for this granularity.
1318 var g
= spacing
/ 1000;
1319 var d
= new Date(start_time
);
1320 if (g
<= 60) { // seconds
1321 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1325 if (g
<= 60) { // minutes
1326 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1331 if (g
<= 24) { // days
1332 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1337 if (g
== 7) { // one week
1338 d
.setDate(d
.getDate() - d
.getDay());
1343 start_time
= d
.getTime();
1345 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1346 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1349 // Display a tick mark on the first of a set of months of each year.
1350 // Years get a tick mark iff y % year_mod == 0. This is useful for
1351 // displaying a tick mark once every 10 years, say, on long time scales.
1353 var year_mod
= 1; // e.g. to only print one point every 10 years.
1355 if (granularity
== Dygraph
.MONTHLY
) {
1356 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1357 } else if (granularity
== Dygraph
.QUARTERLY
) {
1358 months
= [ 0, 3, 6, 9 ];
1359 } else if (granularity
== Dygraph
.BIANNUAL
) {
1361 } else if (granularity
== Dygraph
.ANNUAL
) {
1363 } else if (granularity
== Dygraph
.DECADAL
) {
1368 var start_year
= new Date(start_time
).getFullYear();
1369 var end_year
= new Date(end_time
).getFullYear();
1370 var zeropad
= Dygraph
.zeropad
;
1371 for (var i
= start_year
; i
<= end_year
; i
++) {
1372 if (i
% year_mod
!= 0) continue;
1373 for (var j
= 0; j
< months
.length
; j
++) {
1374 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1375 var t
= Date
.parse(date_str
);
1376 if (t
< start_time
|| t
> end_time
) continue;
1377 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1387 * Add ticks to the x-axis based on a date range.
1388 * @param {Number} startDate Start of the date window (millis since epoch)
1389 * @param {Number} endDate End of the date window (millis since epoch)
1390 * @return {Array.<Object>} Array of {label, value} tuples.
1393 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1395 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1396 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1397 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1404 return self
.GetXAxis(startDate
, endDate
, chosen
);
1406 // TODO(danvk): signal error.
1411 * Add ticks when the x axis has numbers on it (instead of dates)
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
.numericTicks
= function(minV
, maxV
, self
) {
1419 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1420 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1421 // The first spacing greater than pixelsPerYLabel is what we use.
1422 // TODO(danvk): version that works on a log scale.
1423 if (self
.attr_("labelsKMG2")) {
1424 var mults
= [1, 2, 4, 8];
1426 var mults
= [1, 2, 5];
1428 var scale
, low_val
, high_val
, nTicks
;
1429 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1430 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1431 for (var i
= -10; i
< 50; i
++) {
1432 if (self
.attr_("labelsKMG2")) {
1433 var base_scale
= Math
.pow(16, i
);
1435 var base_scale
= Math
.pow(10, i
);
1437 for (var j
= 0; j
< mults
.length
; j
++) {
1438 scale
= base_scale
* mults
[j
];
1439 low_val
= Math
.floor(minV
/ scale
) * scale
;
1440 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1441 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1442 var spacing
= self
.height_
/ nTicks
;
1443 // wish I could break out of both loops at once...
1444 if (spacing
> pixelsPerTick
) break;
1446 if (spacing
> pixelsPerTick
) break;
1449 // Construct labels for the ticks
1453 if (self
.attr_("labelsKMB")) {
1455 k_labels
= [ "K", "M", "B", "T" ];
1457 if (self
.attr_("labelsKMG2")) {
1458 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1460 k_labels
= [ "k", "M", "G", "T" ];
1463 // Allow reverse y-axis if it's explicitly requested.
1464 if (low_val
> high_val
) scale
*= -1;
1466 for (var i
= 0; i
< nTicks
; i
++) {
1467 var tickV
= low_val
+ i
* scale
;
1468 var absTickV
= Math
.abs(tickV
);
1469 var label
= Dygraph
.round_(tickV
, 2);
1470 if (k_labels
.length
) {
1471 // Round up to an appropriate unit.
1473 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1474 if (absTickV
>= n
) {
1475 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1480 ticks
.push( {label
: label
, v
: tickV
} );
1486 * Adds appropriate ticks on the y-axis
1487 * @param {Number} minY The minimum Y value in the data set
1488 * @param {Number} maxY The maximum Y value in the data set
1491 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1492 // Set the number of ticks so that the labels are human-friendly.
1493 // TODO(danvk): make this an attribute as well.
1494 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1495 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1499 // Computes the range of the data series (including confidence intervals).
1500 // series is either [ [x1, y1], [x2, y2], ... ] or
1501 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1502 // Returns [low, high]
1503 Dygraph
.prototype.extremeValues_
= function(series
) {
1504 var minY
= null, maxY
= null;
1506 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1508 // With custom bars, maxY is the max of the high values.
1509 for (var j
= 0; j
< series
.length
; j
++) {
1510 var y
= series
[j
][1][0];
1512 var low
= y
- series
[j
][1][1];
1513 var high
= y
+ series
[j
][1][2];
1514 if (low
> y
) low
= y
; // this can happen with custom bars,
1515 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1516 if (maxY
== null || high
> maxY
) {
1519 if (minY
== null || low
< minY
) {
1524 for (var j
= 0; j
< series
.length
; j
++) {
1525 var y
= series
[j
][1];
1526 if (y
=== null || isNaN(y
)) continue;
1527 if (maxY
== null || y
> maxY
) {
1530 if (minY
== null || y
< minY
) {
1536 return [minY
, maxY
];
1540 * Update the graph with new data. Data is in the format
1541 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1542 * or, if errorBars=true,
1543 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1544 * @param {Array.<Object>} data The data (see above)
1547 Dygraph
.prototype.drawGraph_
= function(data
) {
1548 // This is used to set the second parameter to drawCallback, below.
1549 var is_initial_draw
= this.is_initial_draw_
;
1550 this.is_initial_draw_
= false;
1552 var minY
= null, maxY
= null;
1553 this.layout_
.removeAllDatasets();
1555 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1557 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1559 // Loop over the fields (series). Go from the last to the first,
1560 // because if they're stacked that's how we accumulate the values.
1562 var cumulative_y
= []; // For stacked series.
1565 // Loop over all fields and create datasets
1566 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1567 if (!this.visibility()[i
- 1]) continue;
1570 for (var j
= 0; j
< data
.length
; j
++) {
1571 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1572 var date
= data
[j
][0];
1573 series
.push([date
, data
[j
][i
]]);
1576 series
= this.rollingAverage(series
, this.rollPeriod_
);
1578 // Prune down to the desired range, if necessary (for zooming)
1579 // Because there can be lines going to points outside of the visible area,
1580 // we actually prune to visible points, plus one on either side.
1581 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1582 if (this.dateWindow_
) {
1583 var low
= this.dateWindow_
[0];
1584 var high
= this.dateWindow_
[1];
1586 // TODO(danvk): do binary search instead of linear search.
1587 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1588 var firstIdx
= null, lastIdx
= null;
1589 for (var k
= 0; k
< series
.length
; k
++) {
1590 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1593 if (series
[k
][0] <= high
) {
1597 if (firstIdx
=== null) firstIdx
= 0;
1598 if (firstIdx
> 0) firstIdx
--;
1599 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1600 if (lastIdx
< series
.length
- 1) lastIdx
++;
1601 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1602 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1603 pruned
.push(series
[k
]);
1607 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1610 var extremes
= this.extremeValues_(series
);
1611 var thisMinY
= extremes
[0];
1612 var thisMaxY
= extremes
[1];
1613 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1614 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1617 for (var j
=0; j
<series
.length
; j
++) {
1618 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1621 } else if (this.attr_("stackedGraph")) {
1622 var l
= series
.length
;
1624 for (var j
= 0; j
< l
; j
++) {
1625 // If one data set has a NaN, let all subsequent stacked
1626 // sets inherit the NaN -- only start at 0 for the first set.
1627 var x
= series
[j
][0];
1628 if (cumulative_y
[x
] === undefined
)
1629 cumulative_y
[x
] = 0;
1631 actual_y
= series
[j
][1];
1632 cumulative_y
[x
] += actual_y
;
1634 series
[j
] = [x
, cumulative_y
[x
]]
1636 if (!maxY
|| cumulative_y
[x
] > maxY
)
1637 maxY
= cumulative_y
[x
];
1641 datasets
[i
] = series
;
1644 for (var i
= 1; i
< datasets
.length
; i
++) {
1645 if (!this.visibility()[i
- 1]) continue;
1646 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1649 // Use some heuristics to come up with a good maxY value, unless it's been
1650 // set explicitly by the user.
1651 if (this.valueRange_
!= null) {
1652 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1653 this.displayedYRange_
= this.valueRange_
;
1655 // This affects the calculation of span, below.
1656 if (this.attr_("includeZero") && minY
> 0) {
1660 // Add some padding and round up to an integer to be human-friendly.
1661 var span
= maxY
- minY
;
1662 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1663 if (span
== 0) { span
= maxY
; }
1664 var maxAxisY
= maxY
+ 0.1 * span
;
1665 var minAxisY
= minY
- 0.1 * span
;
1667 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1668 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1669 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1671 if (this.attr_("includeZero")) {
1672 if (maxY
< 0) maxAxisY
= 0;
1673 if (minY
> 0) minAxisY
= 0;
1676 this.addYTicks_(minAxisY
, maxAxisY
);
1677 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1682 // Tell PlotKit to use this new data and render itself
1683 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1684 this.layout_
.evaluateWithError();
1685 this.plotter_
.clear();
1686 this.plotter_
.render();
1687 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1688 this.canvas_
.height
);
1690 if (this.attr_("drawCallback") !== null) {
1691 this.attr_("drawCallback")(this, is_initial_draw
);
1696 * Calculates the rolling average of a data set.
1697 * If originalData is [label, val], rolls the average of those.
1698 * If originalData is [label, [, it's interpreted as [value, stddev]
1699 * and the roll is returned in the same form, with appropriately reduced
1700 * stddev for each value.
1701 * Note that this is where fractional input (i.e. '5/10') is converted into
1703 * @param {Array} originalData The data in the appropriate format (see above)
1704 * @param {Number} rollPeriod The number of days over which to average the data
1706 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1707 if (originalData
.length
< 2)
1708 return originalData
;
1709 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1710 var rollingData
= [];
1711 var sigma
= this.attr_("sigma");
1713 if (this.fractions_
) {
1715 var den
= 0; // numerator/denominator
1717 for (var i
= 0; i
< originalData
.length
; i
++) {
1718 num
+= originalData
[i
][1][0];
1719 den
+= originalData
[i
][1][1];
1720 if (i
- rollPeriod
>= 0) {
1721 num
-= originalData
[i
- rollPeriod
][1][0];
1722 den
-= originalData
[i
- rollPeriod
][1][1];
1725 var date
= originalData
[i
][0];
1726 var value
= den
? num
/ den
: 0.0;
1727 if (this.attr_("errorBars")) {
1728 if (this.wilsonInterval_
) {
1729 // For more details on this confidence interval, see:
1730 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1732 var p
= value
< 0 ? 0 : value
, n
= den
;
1733 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1734 var denom
= 1 + sigma
* sigma
/ den
;
1735 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1736 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1737 rollingData
[i
] = [date
,
1738 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1740 rollingData
[i
] = [date
, [0, 0, 0]];
1743 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1744 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1747 rollingData
[i
] = [date
, mult
* value
];
1750 } else if (this.attr_("customBars")) {
1755 for (var i
= 0; i
< originalData
.length
; i
++) {
1756 var data
= originalData
[i
][1];
1758 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1760 if (y
!= null && !isNaN(y
)) {
1766 if (i
- rollPeriod
>= 0) {
1767 var prev
= originalData
[i
- rollPeriod
];
1768 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1775 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1776 1.0 * (mid
- low
) / count
,
1777 1.0 * (high
- mid
) / count
]];
1780 // Calculate the rolling average for the first rollPeriod - 1 points where
1781 // there is not enough data to roll over the full number of days
1782 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1783 if (!this.attr_("errorBars")){
1784 if (rollPeriod
== 1) {
1785 return originalData
;
1788 for (var i
= 0; i
< originalData
.length
; i
++) {
1791 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1792 var y
= originalData
[j
][1];
1793 if (y
== null || isNaN(y
)) continue;
1795 sum
+= originalData
[j
][1];
1798 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1800 rollingData
[i
] = [originalData
[i
][0], null];
1805 for (var i
= 0; i
< originalData
.length
; i
++) {
1809 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1810 var y
= originalData
[j
][1][0];
1811 if (y
== null || isNaN(y
)) continue;
1813 sum
+= originalData
[j
][1][0];
1814 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1817 var stddev
= Math
.sqrt(variance
) / num_ok
;
1818 rollingData
[i
] = [originalData
[i
][0],
1819 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1821 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1831 * Parses a date, returning the number of milliseconds since epoch. This can be
1832 * passed in as an xValueParser in the Dygraph constructor.
1833 * TODO(danvk): enumerate formats that this understands.
1834 * @param {String} A date in YYYYMMDD format.
1835 * @return {Number} Milliseconds since epoch.
1838 Dygraph
.dateParser
= function(dateStr
, self
) {
1841 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1842 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1843 while (dateStrSlashed
.search("-") != -1) {
1844 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1846 d
= Date
.parse(dateStrSlashed
);
1847 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1848 // TODO(danvk): remove support for this format. It's confusing.
1849 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1850 + "/" + dateStr
.substr(6,2);
1851 d
= Date
.parse(dateStrSlashed
);
1853 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1854 // "2009/07/12 12:34:56"
1855 d
= Date
.parse(dateStr
);
1858 if (!d
|| isNaN(d
)) {
1859 self
.error("Couldn't parse " + dateStr
+ " as a date");
1865 * Detects the type of the str (date or numeric) and sets the various
1866 * formatting attributes in this.attrs_ based on this type.
1867 * @param {String} str An x value.
1870 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1872 if (str
.indexOf('-') >= 0 ||
1873 str
.indexOf('/') >= 0 ||
1874 isNaN(parseFloat(str
))) {
1876 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1877 // TODO(danvk): remove support for this format.
1882 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1883 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1884 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1885 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
1887 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1888 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1889 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1890 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
1895 * Parses a string in a special csv format. We expect a csv file where each
1896 * line is a date point, and the first field in each line is the date string.
1897 * We also expect that all remaining fields represent series.
1898 * if the errorBars attribute is set, then interpret the fields as:
1899 * date, series1, stddev1, series2, stddev2, ...
1900 * @param {Array.<Object>} data See above.
1903 * @return Array.<Object> An array with one entry for each row. These entries
1904 * are an array of cells in that row. The first entry is the parsed x-value for
1905 * the row. The second, third, etc. are the y-values. These can take on one of
1906 * three forms, depending on the CSV and constructor parameters:
1908 * 2. [ value, stddev ]
1909 * 3. [ low value, center value, high value ]
1911 Dygraph
.prototype.parseCSV_
= function(data
) {
1913 var lines
= data
.split("\n");
1915 // Use the default delimiter or fall back to a tab if that makes sense.
1916 var delim
= this.attr_('delimiter');
1917 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1922 if (this.labelsFromCSV_
) {
1924 this.attrs_
.labels
= lines
[0].split(delim
);
1927 // Parse the x as a float or return null if it's not a number.
1928 var parseFloatOrNull
= function(x
) {
1929 var val
= parseFloat(x
);
1930 return isNaN(val
) ? null : val
;
1934 var defaultParserSet
= false; // attempt to auto-detect x value type
1935 var expectedCols
= this.attr_("labels").length
;
1936 var outOfOrder
= false;
1937 for (var i
= start
; i
< lines
.length
; i
++) {
1938 var line
= lines
[i
];
1939 if (line
.length
== 0) continue; // skip blank lines
1940 if (line
[0] == '#') continue; // skip comment lines
1941 var inFields
= line
.split(delim
);
1942 if (inFields
.length
< 2) continue;
1945 if (!defaultParserSet
) {
1946 this.detectTypeFromString_(inFields
[0]);
1947 xParser
= this.attr_("xValueParser");
1948 defaultParserSet
= true;
1950 fields
[0] = xParser(inFields
[0], this);
1952 // If fractions are expected, parse the numbers as "A/B
"
1953 if (this.fractions_) {
1954 for (var j = 1; j < inFields.length; j++) {
1955 // TODO(danvk): figure out an appropriate way to flag parse errors.
1956 var vals = inFields[j].split("/");
1957 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
1959 } else if (this.attr_("errorBars
")) {
1960 // If there are error bars, values are (value, stddev) pairs
1961 for (var j = 1; j < inFields.length; j += 2)
1962 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
1963 parseFloatOrNull(inFields[j + 1])];
1964 } else if (this.attr_("customBars
")) {
1965 // Bars are a low;center;high tuple
1966 for (var j = 1; j < inFields.length; j++) {
1967 var vals = inFields[j].split(";");
1968 fields[j] = [ parseFloatOrNull(vals[0]),
1969 parseFloatOrNull(vals[1]),
1970 parseFloatOrNull(vals[2]) ];
1973 // Values are just numbers
1974 for (var j = 1; j < inFields.length; j++) {
1975 fields[j] = parseFloatOrNull(inFields[j]);
1978 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1983 if (fields.length != expectedCols) {
1984 this.error("Number of columns
in line
" + i + " (" + fields.length +
1985 ") does not agree
with number of
labels (" + expectedCols +
1991 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1992 ret.sort(function(a,b) { return a[0] - b[0] });
1999 * The user has provided their data as a pre-packaged JS array. If the x values
2000 * are numeric, this is the same as dygraphs' internal format. If the x values
2001 * are dates, we need to convert them from Date objects to ms since epoch.
2002 * @param {Array.<Object>} data
2003 * @return {Array.<Object>} data with numeric x values.
2005 Dygraph.prototype.parseArray_ = function(data) {
2006 // Peek at the first x value to see if it's numeric.
2007 if (data.length == 0) {
2008 this.error("Can
't plot empty data set");
2011 if (data[0].length == 0) {
2012 this.error("Data set cannot contain an empty row");
2016 if (this.attr_("labels") == null) {
2017 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2018 "in the options parameter");
2019 this.attrs_.labels = [ "X" ];
2020 for (var i = 1; i < data[0].length; i++) {
2021 this.attrs_.labels.push("Y" + i);
2025 if (Dygraph.isDateLike(data[0][0])) {
2026 // Some intelligent defaults for a date x-axis.
2027 this.attrs_.xValueFormatter = Dygraph.dateString_;
2028 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2029 this.attrs_.xTicker = Dygraph.dateTicker;
2031 // Assume they're all dates
.
2032 var parsedData
= Dygraph
.clone(data
);
2033 for (var i
= 0; i
< data
.length
; i
++) {
2034 if (parsedData
[i
].length
== 0) {
2035 this.error("Row " + (1 + i
) + " of data is empty");
2038 if (parsedData
[i
][0] == null
2039 || typeof(parsedData
[i
][0].getTime
) != 'function'
2040 || isNaN(parsedData
[i
][0].getTime())) {
2041 this.error("x value in row " + (1 + i
) + " is not a Date");
2044 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2048 // Some intelligent defaults for a numeric x-axis.
2049 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2050 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2056 * Parses a DataTable object from gviz.
2057 * The data is expected to have a first column that is either a date or a
2058 * number. All subsequent columns must be numbers. If there is a clear mismatch
2059 * between this.xValueParser_ and the type of the first column, it will be
2060 * fixed. Fills out rawData_.
2061 * @param {Array.<Object>} data See above.
2064 Dygraph
.prototype.parseDataTable_
= function(data
) {
2065 var cols
= data
.getNumberOfColumns();
2066 var rows
= data
.getNumberOfRows();
2068 var indepType
= data
.getColumnType(0);
2069 if (indepType
== 'date' || indepType
== 'datetime') {
2070 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2071 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2072 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2073 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2074 } else if (indepType
== 'number') {
2075 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2076 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2077 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2078 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2080 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2081 "column 1 of DataTable input (Got '" + indepType
+ "')");
2085 // Array of the column indices which contain data (and not annotations).
2087 var annotationCols
= {}; // data index -> [annotation cols]
2088 var hasAnnotations
= false;
2089 for (var i
= 1; i
< cols
; i
++) {
2090 var type
= data
.getColumnType(i
);
2091 if (type
== 'number') {
2093 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2094 // This is OK -- it's an annotation column.
2095 var dataIdx
= colIdx
[colIdx
.length
- 1];
2096 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2097 annotationCols
[dataIdx
] = [i
];
2099 annotationCols
[dataIdx
].push(i
);
2101 hasAnnotations
= true;
2103 this.error("Only 'number' is supported as a dependent type with Gviz." +
2104 " 'string' is only supported if displayAnnotations is true");
2108 // Read column labels
2109 // TODO(danvk): add support back for errorBars
2110 var labels
= [data
.getColumnLabel(0)];
2111 for (var i
= 0; i
< colIdx
.length
; i
++) {
2112 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2114 this.attrs_
.labels
= labels
;
2115 cols
= labels
.length
;
2118 var outOfOrder
= false;
2119 var annotations
= [];
2120 for (var i
= 0; i
< rows
; i
++) {
2122 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2123 data
.getValue(i
, 0) === null) {
2124 this.warning("Ignoring row " + i
+
2125 " of DataTable because of undefined or null first column.");
2129 if (indepType
== 'date' || indepType
== 'datetime') {
2130 row
.push(data
.getValue(i
, 0).getTime());
2132 row
.push(data
.getValue(i
, 0));
2134 if (!this.attr_("errorBars")) {
2135 for (var j
= 0; j
< colIdx
.length
; j
++) {
2136 var col
= colIdx
[j
];
2137 row
.push(data
.getValue(i
, col
));
2138 if (hasAnnotations
&&
2139 annotationCols
.hasOwnProperty(col
) &&
2140 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2142 ann
.series
= data
.getColumnLabel(col
);
2144 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2146 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2147 if (k
) ann
.text
+= "\n";
2148 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2150 annotations
.push(ann
);
2154 for (var j
= 0; j
< cols
- 1; j
++) {
2155 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2158 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2165 this.warn("DataTable is out of order; order it correctly to speed loading.");
2166 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2168 this.rawData_
= ret
;
2170 if (annotations
.length
> 0) {
2171 this.setAnnotations(annotations
, true);
2175 // These functions are all based on MochiKit.
2176 Dygraph
.update
= function (self
, o
) {
2177 if (typeof(o
) != 'undefined' && o
!== null) {
2179 if (o
.hasOwnProperty(k
)) {
2187 Dygraph
.isArrayLike
= function (o
) {
2188 var typ
= typeof(o
);
2190 (typ
!= 'object' && !(typ
== 'function' &&
2191 typeof(o
.item
) == 'function')) ||
2193 typeof(o
.length
) != 'number' ||
2201 Dygraph
.isDateLike
= function (o
) {
2202 if (typeof(o
) != "object" || o
=== null ||
2203 typeof(o
.getTime
) != 'function') {
2209 Dygraph
.clone
= function(o
) {
2210 // TODO(danvk): figure out how MochiKit's version works
2212 for (var i
= 0; i
< o
.length
; i
++) {
2213 if (Dygraph
.isArrayLike(o
[i
])) {
2214 r
.push(Dygraph
.clone(o
[i
]));
2224 * Get the CSV data. If it's in a function, call that function. If it's in a
2225 * file, do an XMLHttpRequest to get it.
2228 Dygraph
.prototype.start_
= function() {
2229 if (typeof this.file_
== 'function') {
2230 // CSV string. Pretend we got it via XHR.
2231 this.loadedEvent_(this.file_());
2232 } else if (Dygraph
.isArrayLike(this.file_
)) {
2233 this.rawData_
= this.parseArray_(this.file_
);
2234 this.drawGraph_(this.rawData_
);
2235 } else if (typeof this.file_
== 'object' &&
2236 typeof this.file_
.getColumnRange
== 'function') {
2237 // must be a DataTable from gviz.
2238 this.parseDataTable_(this.file_
);
2239 this.drawGraph_(this.rawData_
);
2240 } else if (typeof this.file_
== 'string') {
2241 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2242 if (this.file_
.indexOf('\n') >= 0) {
2243 this.loadedEvent_(this.file_
);
2245 var req
= new XMLHttpRequest();
2247 req
.onreadystatechange
= function () {
2248 if (req
.readyState
== 4) {
2249 if (req
.status
== 200) {
2250 caller
.loadedEvent_(req
.responseText
);
2255 req
.open("GET", this.file_
, true);
2259 this.error("Unknown data format: " + (typeof this.file_
));
2264 * Changes various properties of the graph. These can include:
2266 * <li>file: changes the source data for the graph</li>
2267 * <li>errorBars: changes whether the data contains stddev</li>
2269 * @param {Object} attrs The new properties and values
2271 Dygraph
.prototype.updateOptions
= function(attrs
) {
2272 // TODO(danvk): this is a mess. Rethink this function.
2273 if (attrs
.rollPeriod
) {
2274 this.rollPeriod_
= attrs
.rollPeriod
;
2276 if (attrs
.dateWindow
) {
2277 this.dateWindow_
= attrs
.dateWindow
;
2279 if (attrs
.valueRange
) {
2280 this.valueRange_
= attrs
.valueRange
;
2282 Dygraph
.update(this.user_attrs_
, attrs
);
2283 Dygraph
.update(this.renderOptions_
, attrs
);
2285 this.labelsFromCSV_
= (this.attr_("labels") == null);
2287 // TODO(danvk): this doesn't match the constructor logic
2288 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2289 if (attrs
['file']) {
2290 this.file_
= attrs
['file'];
2293 this.drawGraph_(this.rawData_
);
2298 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2299 * containing div (which has presumably changed size since the dygraph was
2300 * instantiated. If the width/height are specified, the div will be resized.
2302 * This is far more efficient than destroying and re-instantiating a
2303 * Dygraph, since it doesn't have to reparse the underlying data.
2305 * @param {Number} width Width (in pixels)
2306 * @param {Number} height Height (in pixels)
2308 Dygraph
.prototype.resize
= function(width
, height
) {
2309 if (this.resize_lock
) {
2312 this.resize_lock
= true;
2314 if ((width
=== null) != (height
=== null)) {
2315 this.warn("Dygraph.resize() should be called with zero parameters or " +
2316 "two non-NULL parameters. Pretending it was zero.");
2317 width
= height
= null;
2320 // TODO(danvk): there should be a clear() method.
2321 this.maindiv_
.innerHTML
= "";
2322 this.attrs_
.labelsDiv
= null;
2325 this.maindiv_
.style
.width
= width
+ "px";
2326 this.maindiv_
.style
.height
= height
+ "px";
2327 this.width_
= width
;
2328 this.height_
= height
;
2330 this.width_
= this.maindiv_
.offsetWidth
;
2331 this.height_
= this.maindiv_
.offsetHeight
;
2334 this.createInterface_();
2335 this.drawGraph_(this.rawData_
);
2337 this.resize_lock
= false;
2341 * Adjusts the number of days in the rolling average. Updates the graph to
2342 * reflect the new averaging period.
2343 * @param {Number} length Number of days over which to average the data.
2345 Dygraph
.prototype.adjustRoll
= function(length
) {
2346 this.rollPeriod_
= length
;
2347 this.drawGraph_(this.rawData_
);
2351 * Returns a boolean array of visibility statuses.
2353 Dygraph
.prototype.visibility
= function() {
2354 // Do lazy-initialization, so that this happens after we know the number of
2356 if (!this.attr_("visibility")) {
2357 this.attrs_
["visibility"] = [];
2359 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2360 this.attr_("visibility").push(true);
2362 return this.attr_("visibility");
2366 * Changes the visiblity of a series.
2368 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2369 var x
= this.visibility();
2370 if (num
< 0 && num
>= x
.length
) {
2371 this.warn("invalid series number in setVisibility: " + num
);
2374 this.drawGraph_(this.rawData_
);
2379 * Update the list of annotations and redraw the chart.
2381 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2382 this.annotations_
= ann
;
2383 this.layout_
.setAnnotations(this.annotations_
);
2384 if (!suppressDraw
) {
2385 this.drawGraph_(this.rawData_
);
2390 * Return the list of annotations.
2392 Dygraph
.prototype.annotations
= function() {
2393 return this.annotations_
;
2396 Dygraph
.addAnnotationRule
= function() {
2397 if (Dygraph
.addedAnnotationCSS
) return;
2400 if (document
.styleSheets
.length
> 0) {
2401 mysheet
= document
.styleSheets
[0];
2403 var styleSheetElement
= document
.createElement("style");
2404 styleSheetElement
.type
= "text/css";
2405 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2406 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2407 if (document
.styleSheets
[i
].disabled
) continue;
2408 mysheet
= document
.styleSheets
[i
];
2412 var rule
= "border: 1px solid black; " +
2413 "background-color: white; " +
2414 "text-align: center;";
2415 if (mysheet
.insertRule
) { // Firefox
2416 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2417 } else if (mysheet
.addRule
) { // IE
2418 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2421 Dygraph
.addedAnnotationCSS
= true;
2425 * Create a new canvas element. This is more complex than a simple
2426 * document.createElement("canvas") because of IE and excanvas.
2428 Dygraph
.createCanvas
= function() {
2429 var canvas
= document
.createElement("canvas");
2431 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2433 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2441 * A wrapper around Dygraph that implements the gviz API.
2442 * @param {Object} container The DOM object the visualization should live in.
2444 Dygraph
.GVizChart
= function(container
) {
2445 this.container
= container
;
2448 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2449 this.container
.innerHTML
= '';
2450 this.date_graph
= new Dygraph(this.container
, data
, options
);
2454 * Google charts compatible setSelection
2455 * Only row selection is supported, all points in the row will be highlighted
2456 * @param {Array} array of the selected cells
2459 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2461 if (selection_array
.length
) {
2462 row
= selection_array
[0].row
;
2464 this.date_graph
.setSelection(row
);
2468 * Google charts compatible getSelection implementation
2469 * @return {Array} array of the selected cells
2472 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2475 var row
= this.date_graph
.getSelection();
2477 if (row
< 0) return selection
;
2480 for (var i
in this.date_graph
.layout_
.datasets
) {
2481 selection
.push({row
: row
, column
: col
});
2488 // Older pages may still use this name.
2489 DateGraph
= Dygraph
;