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,
95 showLabelsOnHighlight
: true,
97 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
102 axisLabelFontSize
: 14,
105 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
109 xValueFormatter
: Dygraph
.dateString_
,
110 xValueParser
: Dygraph
.dateParser
,
111 xTicker
: Dygraph
.dateTicker
,
119 wilsonInterval
: true, // only relevant if fractions is true
123 connectSeparatedPoints
: false,
126 hideOverlayOnMouseOut
: true
129 // Various logging levels.
135 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
136 // Labels is no longer a constructor parameter, since it's typically set
137 // directly from the data source. It also conains a name for the x-axis,
138 // which the previous constructor form did not.
139 if (labels
!= null) {
140 var new_labels
= ["Date"];
141 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
142 Dygraph
.update(attrs
, { 'labels': new_labels
});
144 this.__init__(div
, file
, attrs
);
148 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
149 * and interaction <canvas> inside of it. See the constructor for details
151 * @param {Element} div the Element to render the graph into.
152 * @param {String | Function} file Source data
153 * @param {Object} attrs Miscellaneous other options
156 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
157 // Support two-argument constructor
158 if (attrs
== null) { attrs
= {}; }
160 // Copy the important bits into the object
161 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
164 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
165 this.previousVerticalX_
= -1;
166 this.fractions_
= attrs
.fractions
|| false;
167 this.dateWindow_
= attrs
.dateWindow
|| null;
168 this.valueRange_
= attrs
.valueRange
|| null;
169 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
170 this.is_initial_draw_
= true;
172 // Clear the div. This ensure that, if multiple dygraphs are passed the same
173 // div, then only one will be drawn.
176 // If the div isn't already sized then inherit from our attrs or
177 // give it a default size.
178 if (div
.style
.width
== '') {
179 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
181 if (div
.style
.height
== '') {
182 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
184 this.width_
= parseInt(div
.style
.width
, 10);
185 this.height_
= parseInt(div
.style
.height
, 10);
186 // The div might have been specified as percent of the current window size,
187 // convert that to an appropriate number of pixels.
188 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
189 this.width_
= div
.offsetWidth
;
191 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
192 this.height_
= div
.offsetHeight
;
195 if (this.width_
== 0) {
196 this.error("dygraph has zero width. Please specify a width in pixels.");
198 if (this.height_
== 0) {
199 this.error("dygraph has zero height. Please specify a height in pixels.");
202 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
203 if (attrs
['stackedGraph']) {
204 attrs
['fillGraph'] = true;
205 // TODO(nikhilk): Add any other stackedGraph checks here.
208 // Dygraphs has many options, some of which interact with one another.
209 // To keep track of everything, we maintain two sets of options:
211 // this.user_attrs_ only options explicitly set by the user.
212 // this.attrs_ defaults, options derived from user_attrs_, data.
214 // Options are then accessed this.attr_('attr'), which first looks at
215 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
216 // defaults without overriding behavior that the user specifically asks for.
217 this.user_attrs_
= {};
218 Dygraph
.update(this.user_attrs_
, attrs
);
221 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
223 this.boundaryIds_
= [];
225 // Make a note of whether labels will be pulled from the CSV file.
226 this.labelsFromCSV_
= (this.attr_("labels") == null);
228 // Create the containing DIV and other interactive elements
229 this.createInterface_();
234 Dygraph
.prototype.attr_
= function(name
) {
235 if (typeof(this.user_attrs_
[name
]) != 'undefined') {
236 return this.user_attrs_
[name
];
237 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
238 return this.attrs_
[name
];
244 // TODO(danvk): any way I can get the line numbers to be this.warn call?
245 Dygraph
.prototype.log
= function(severity
, message
) {
246 if (typeof(console
) != 'undefined') {
249 console
.debug('dygraphs: ' + message
);
252 console
.info('dygraphs: ' + message
);
254 case Dygraph
.WARNING
:
255 console
.warn('dygraphs: ' + message
);
258 console
.error('dygraphs: ' + message
);
263 Dygraph
.prototype.info
= function(message
) {
264 this.log(Dygraph
.INFO
, message
);
266 Dygraph
.prototype.warn
= function(message
) {
267 this.log(Dygraph
.WARNING
, message
);
269 Dygraph
.prototype.error
= function(message
) {
270 this.log(Dygraph
.ERROR
, message
);
274 * Returns the current rolling period, as set by the user or an option.
275 * @return {Number} The number of days in the rolling window
277 Dygraph
.prototype.rollPeriod
= function() {
278 return this.rollPeriod_
;
282 * Returns the currently-visible x-range. This can be affected by zooming,
283 * panning or a call to updateOptions.
284 * Returns a two-element array: [left, right].
285 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
287 Dygraph
.prototype.xAxisRange
= function() {
288 if (this.dateWindow_
) return this.dateWindow_
;
290 // The entire chart is visible.
291 var left
= this.rawData_
[0][0];
292 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
293 return [left
, right
];
297 * Returns the currently-visible y-range. This can be affected by zooming,
298 * panning or a call to updateOptions.
299 * Returns a two-element array: [bottom, top].
301 Dygraph
.prototype.yAxisRange
= function() {
302 return this.displayedYRange_
;
306 * Convert from data coordinates to canvas/div X/Y coordinates.
307 * Returns a two-element array: [X, Y]
309 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
310 var ret
= [null, null];
311 var area
= this.plotter_
.area
;
313 var xRange
= this.xAxisRange();
314 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
318 var yRange
= this.yAxisRange();
319 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
325 // TODO(danvk): use these functions throughout dygraphs.
327 * Convert from canvas/div coords to data coordinates.
328 * Returns a two-element array: [X, Y]
330 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
331 var ret
= [null, null];
332 var area
= this.plotter_
.area
;
334 var xRange
= this.xAxisRange();
335 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
339 var yRange
= this.yAxisRange();
340 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
346 Dygraph
.addEvent
= function(el
, evt
, fn
) {
347 var normed_fn
= function(e
) {
348 if (!e
) var e
= window
.event
;
351 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
352 el
.addEventListener(evt
, normed_fn
, false);
354 el
.attachEvent('on' + evt
, normed_fn
);
358 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
359 var ctx
= cnv
.getContext("2d");
361 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
366 * Generates interface elements for the Dygraph: a containing div, a div to
367 * display the current point, and a textbox to adjust the rolling average
368 * period. Also creates the Renderer/Layout elements.
371 Dygraph
.prototype.createInterface_
= function() {
372 // Create the all-enclosing graph div
373 var enclosing
= this.maindiv_
;
375 this.graphDiv
= document
.createElement("div");
376 this.graphDiv
.style
.width
= this.width_
+ "px";
377 this.graphDiv
.style
.height
= this.height_
+ "px";
378 enclosing
.appendChild(this.graphDiv
);
382 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
384 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
385 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
386 - 2 * this.attr_("axisTickSize");
387 this.clippingArea_
= clip
;
389 // Create the canvas for interactive parts of the chart.
390 this.canvas_
= Dygraph
.createCanvas();
391 this.canvas_
.style
.position
= "absolute";
392 this.canvas_
.width
= this.width_
;
393 this.canvas_
.height
= this.height_
;
394 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
395 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
396 this.graphDiv
.appendChild(this.canvas_
);
398 // ... and for static parts of the chart.
399 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
401 // Make sure we don't overdraw.
402 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
403 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
406 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(e
) {
407 dygraph
.mouseMove_(e
);
409 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(e
) {
410 dygraph
.mouseOut_(e
);
413 // Create the grapher
414 // TODO(danvk): why does the Layout need its own set of options?
415 this.layoutOptions_
= { 'xOriginIsZero': false };
416 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
417 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
418 Dygraph
.update(this.layoutOptions_
, {
419 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
421 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
423 // TODO(danvk): why does the Renderer need its own set of options?
424 this.renderOptions_
= { colorScheme
: this.colors_
,
426 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
427 Dygraph
.update(this.renderOptions_
, this.attrs_
);
428 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
429 this.plotter_
= new DygraphCanvasRenderer(this,
430 this.hidden_
, this.layout_
,
431 this.renderOptions_
);
433 this.createStatusMessage_();
434 this.createRollInterface_();
435 this.createDragInterface_();
439 * Detach DOM elements in the dygraph and null out all data references.
440 * Calling this when you're done with a dygraph can dramatically reduce memory
441 * usage. See, e.g., the tests/perf.html example.
443 Dygraph
.prototype.destroy
= function() {
444 var removeRecursive
= function(node
) {
445 while (node
.hasChildNodes()) {
446 removeRecursive(node
.firstChild
);
447 node
.removeChild(node
.firstChild
);
450 removeRecursive(this.maindiv_
);
452 var nullOut
= function(obj
) {
454 if (typeof(obj
[n
]) === 'object') {
460 // These may not all be necessary, but it can't hurt...
461 nullOut(this.layout_
);
462 nullOut(this.plotter_
);
467 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
468 * this particular canvas. All Dygraph work is done on this.canvas_.
469 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
470 * @return {Object} The newly-created canvas
473 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
474 var h
= Dygraph
.createCanvas();
475 h
.style
.position
= "absolute";
476 // TODO(danvk): h should be offset from canvas. canvas needs to include
477 // some extra area to make it easier to zoom in on the far left and far
478 // right. h needs to be precisely the plot area, so that clipping occurs.
479 h
.style
.top
= canvas
.style
.top
;
480 h
.style
.left
= canvas
.style
.left
;
481 h
.width
= this.width_
;
482 h
.height
= this.height_
;
483 h
.style
.width
= this.width_
+ "px"; // for IE
484 h
.style
.height
= this.height_
+ "px"; // for IE
485 this.graphDiv
.appendChild(h
);
489 // Taken from MochiKit.Color
490 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
494 if (saturation
=== 0) {
499 var i
= Math
.floor(hue
* 6);
500 var f
= (hue
* 6) - i
;
501 var p
= value
* (1 - saturation
);
502 var q
= value
* (1 - (saturation
* f
));
503 var t
= value
* (1 - (saturation
* (1 - f
)));
505 case 1: red
= q
; green
= value
; blue
= p
; break;
506 case 2: red
= p
; green
= value
; blue
= t
; break;
507 case 3: red
= p
; green
= q
; blue
= value
; break;
508 case 4: red
= t
; green
= p
; blue
= value
; break;
509 case 5: red
= value
; green
= p
; blue
= q
; break;
510 case 6: // fall through
511 case 0: red
= value
; green
= t
; blue
= p
; break;
514 red
= Math
.floor(255 * red
+ 0.5);
515 green
= Math
.floor(255 * green
+ 0.5);
516 blue
= Math
.floor(255 * blue
+ 0.5);
517 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
522 * Generate a set of distinct colors for the data series. This is done with a
523 * color wheel. Saturation/Value are customizable, and the hue is
524 * equally-spaced around the color wheel. If a custom set of colors is
525 * specified, that is used instead.
528 Dygraph
.prototype.setColors_
= function() {
529 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
530 // away with this.renderOptions_.
531 var num
= this.attr_("labels").length
- 1;
533 var colors
= this.attr_('colors');
535 var sat
= this.attr_('colorSaturation') || 1.0;
536 var val
= this.attr_('colorValue') || 0.5;
537 var half
= Math
.ceil(num
/ 2);
538 for (var i
= 1; i
<= num
; i
++) {
539 if (!this.visibility()[i
-1]) continue;
540 // alternate colors for high contrast.
541 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
542 var hue
= (1.0 * idx
/ (1 + num
));
543 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
546 for (var i
= 0; i
< num
; i
++) {
547 if (!this.visibility()[i
]) continue;
548 var colorStr
= colors
[i
% colors
.length
];
549 this.colors_
.push(colorStr
);
553 // TODO(danvk): update this w/r
/t/ the
new options system
.
554 this.renderOptions_
.colorScheme
= this.colors_
;
555 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
556 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
557 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
561 * Return the list of colors. This is either the list of colors passed in the
562 * attributes, or the autogenerated list of rgb(r,g,b) strings.
563 * @return {Array<string>} The list of colors.
565 Dygraph
.prototype.getColors
= function() {
569 // The following functions are from quirksmode.org with a modification for Safari from
570 // http://blog.firetree.net/2005/07/04/javascript-find-position/
571 // http://www.quirksmode.org/js
/findpos
.html
572 Dygraph
.findPosX
= function(obj
) {
577 curleft
+= obj
.offsetLeft
;
578 if(!obj
.offsetParent
)
580 obj
= obj
.offsetParent
;
587 Dygraph
.findPosY
= function(obj
) {
592 curtop
+= obj
.offsetTop
;
593 if(!obj
.offsetParent
)
595 obj
= obj
.offsetParent
;
605 * Create the div that contains information on the selected point(s)
606 * This goes in the top right of the canvas, unless an external div has already
610 Dygraph
.prototype.createStatusMessage_
= function(){
611 if (!this.attr_("labelsDiv")) {
612 var divWidth
= this.attr_('labelsDivWidth');
614 "position": "absolute",
617 "width": divWidth
+ "px",
619 "left": (this.width_
- divWidth
- 2) + "px",
620 "background": "white",
622 "overflow": "hidden"};
623 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
624 var div
= document
.createElement("div");
625 for (var name
in messagestyle
) {
626 if (messagestyle
.hasOwnProperty(name
)) {
627 div
.style
[name
] = messagestyle
[name
];
630 this.graphDiv
.appendChild(div
);
631 this.attrs_
.labelsDiv
= div
;
636 * Create the text box to adjust the averaging period
637 * @return {Object} The newly-created text box
640 Dygraph
.prototype.createRollInterface_
= function() {
641 var display
= this.attr_('showRoller') ? "block" : "none";
642 var textAttr
= { "position": "absolute",
644 "top": (this.plotter_
.area
.h
- 25) + "px",
645 "left": (this.plotter_
.area
.x
+ 1) + "px",
648 var roller
= document
.createElement("input");
649 roller
.type
= "text";
651 roller
.value
= this.rollPeriod_
;
652 for (var name
in textAttr
) {
653 if (textAttr
.hasOwnProperty(name
)) {
654 roller
.style
[name
] = textAttr
[name
];
658 var pa
= this.graphDiv
;
659 pa
.appendChild(roller
);
661 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
665 // These functions are taken from MochiKit.Signal
666 Dygraph
.pageX
= function(e
) {
668 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
671 var b
= document
.body
;
673 (de
.scrollLeft
|| b
.scrollLeft
) -
674 (de
.clientLeft
|| 0);
678 Dygraph
.pageY
= function(e
) {
680 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
683 var b
= document
.body
;
685 (de
.scrollTop
|| b
.scrollTop
) -
691 * Set up all the mouse handlers needed to capture dragging behavior for zoom
695 Dygraph
.prototype.createDragInterface_
= function() {
698 // Tracks whether the mouse is down right now
699 var isZooming
= false;
700 var isPanning
= false;
701 var dragStartX
= null;
702 var dragStartY
= null;
706 var draggingDate
= null;
707 var dateRange
= null;
709 // Utility function to convert page-wide coordinates to canvas coords
712 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
713 var getY
= function(e
) { return Dygraph
.pageX(e
) - py
};
715 // Draw zoom rectangles when the mouse is down and the user moves around
716 Dygraph
.addEvent(this.hidden_
, 'mousemove', function(event
) {
718 dragEndX
= getX(event
);
719 dragEndY
= getY(event
);
721 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
723 } else if (isPanning
) {
724 dragEndX
= getX(event
);
725 dragEndY
= getY(event
);
727 // Want to have it so that:
728 // 1. draggingDate appears at dragEndX
729 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
731 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
732 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
733 self
.drawGraph_(self
.rawData_
);
737 // Track the beginning of drag events
738 Dygraph
.addEvent(this.hidden_
, 'mousedown', function(event
) {
739 px
= Dygraph
.findPosX(self
.canvas_
);
740 py
= Dygraph
.findPosY(self
.canvas_
);
741 dragStartX
= getX(event
);
742 dragStartY
= getY(event
);
744 if (event
.altKey
|| event
.shiftKey
) {
745 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
747 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
748 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
755 // If the user releases the mouse button during a drag, but not over the
756 // canvas, then it doesn't count as a zooming action.
757 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
758 if (isZooming
|| isPanning
) {
771 // Temporarily cancel the dragging event when the mouse leaves the graph
772 Dygraph
.addEvent(this.hidden_
, 'mouseout', function(event
) {
779 // If the mouse is released on the canvas during a drag event, then it's a
780 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
781 Dygraph
.addEvent(this.hidden_
, 'mouseup', function(event
) {
784 dragEndX
= getX(event
);
785 dragEndY
= getY(event
);
786 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
787 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
789 if (regionWidth
< 2 && regionHeight
< 2 &&
790 self
.attr_('clickCallback') != null &&
791 self
.lastx_
!= undefined
) {
792 // TODO(danvk): pass along more info about the points.
793 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
796 if (regionWidth
>= 10) {
797 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
798 Math
.max(dragStartX
, dragEndX
));
800 self
.canvas_
.getContext("2d").clearRect(0, 0,
802 self
.canvas_
.height
);
816 // Double-clicking zooms back out
817 Dygraph
.addEvent(this.hidden_
, 'dblclick', function(event
) {
818 if (self
.dateWindow_
== null) return;
819 self
.dateWindow_
= null;
820 self
.drawGraph_(self
.rawData_
);
821 var minDate
= self
.rawData_
[0][0];
822 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
823 if (self
.attr_("zoomCallback")) {
824 self
.attr_("zoomCallback")(minDate
, maxDate
);
830 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
831 * up any previous zoom rectangles that were drawn. This could be optimized to
832 * avoid extra redrawing, but it's tricky to avoid interactions with the status
834 * @param {Number} startX The X position where the drag started, in canvas
836 * @param {Number} endX The current X position of the drag, in canvas coords.
837 * @param {Number} prevEndX The value of endX on the previous call to this
838 * function. Used to avoid excess redrawing
841 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
842 var ctx
= this.canvas_
.getContext("2d");
844 // Clean up from the previous rect if necessary
846 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
847 Math
.abs(startX
- prevEndX
), this.height_
);
850 // Draw a light-grey rectangle to show the new viewing area
851 if (endX
&& startX
) {
852 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
853 ctx
.fillRect(Math
.min(startX
, endX
), 0,
854 Math
.abs(endX
- startX
), this.height_
);
859 * Zoom to something containing [lowX, highX]. These are pixel coordinates
860 * in the canvas. The exact zoom window may be slightly larger if there are no
861 * data points near lowX or highX. This function redraws the graph.
862 * @param {Number} lowX The leftmost pixel value that should be visible.
863 * @param {Number} highX The rightmost pixel value that should be visible.
866 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
867 // Find the earliest and latest dates contained in this canvasx range.
868 var r
= this.toDataCoords(lowX
, null);
870 r
= this.toDataCoords(highX
, null);
873 this.dateWindow_
= [minDate
, maxDate
];
874 this.drawGraph_(this.rawData_
);
875 if (this.attr_("zoomCallback")) {
876 this.attr_("zoomCallback")(minDate
, maxDate
);
881 * When the mouse moves in the canvas, display information about a nearby data
882 * point and draw dots over those points in the data series. This function
883 * takes care of cleanup of previously-drawn dots.
884 * @param {Object} event The mousemove event from the browser.
887 Dygraph
.prototype.mouseMove_
= function(event
) {
888 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.hidden_
);
889 var points
= this.layout_
.points
;
894 // Loop through all the points and find the date nearest to our current
896 var minDist
= 1e+100;
898 for (var i
= 0; i
< points
.length
; i
++) {
899 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
900 if (dist
> minDist
) continue;
904 if (idx
>= 0) lastx
= points
[idx
].xval
;
905 // Check that you can really highlight the last day's data
906 if (canvasx
> points
[points
.length
-1].canvasx
)
907 lastx
= points
[points
.length
-1].xval
;
909 // Extract the points we've selected
910 this.selPoints_
= [];
911 var cumulative_sum
= 0; // used only if we have a stackedGraph.
912 var l
= points
.length
;
913 var isStacked
= this.attr_("stackedGraph");
914 if (!this.attr_("stackedGraph")) {
915 for (var i
= 0; i
< l
; i
++) {
916 if (points
[i
].xval
== lastx
) {
917 this.selPoints_
.push(points
[i
]);
921 // Stacked points need to be examined in reverse order.
922 for (var i
= l
- 1; i
>= 0; i
--) {
923 if (points
[i
].xval
== lastx
) {
924 // Clone the point, since we need to 'unstack' it below.
926 for (var k
in points
[i
]) {
929 p
.yval
-= cumulative_sum
;
930 cumulative_sum
+= p
.yval
;
931 this.selPoints_
.push(p
);
936 if (this.attr_("highlightCallback")) {
937 var px
= this.lastx_
;
938 if (px
!== null && lastx
!= px
) {
939 // only fire if the selected point has changed.
940 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
944 // Save last x position for callbacks.
947 this.updateSelection_();
951 * Draw dots over the selectied points in the data series. This function
952 * takes care of cleanup of previously-drawn dots.
955 Dygraph
.prototype.updateSelection_
= function() {
956 // Clear the previously drawn vertical, if there is one
957 var circleSize
= this.attr_('highlightCircleSize');
958 var ctx
= this.canvas_
.getContext("2d");
959 if (this.previousVerticalX_
>= 0) {
960 var px
= this.previousVerticalX_
;
961 ctx
.clearRect(px
- circleSize
- 1, 0, 2 * circleSize
+ 2, this.height_
);
964 var isOK
= function(x
) { return x
&& !isNaN(x
); };
966 if (this.selPoints_
.length
> 0) {
967 var canvasx
= this.selPoints_
[0].canvasx
;
969 // Set the status message to indicate the selected point(s)
970 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
971 var fmtFunc
= this.attr_('yValueFormatter');
972 var clen
= this.colors_
.length
;
974 if (this.attr_('showLabelsOnHighlight')) {
975 // Set the status message to indicate the selected point(s)
976 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
977 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
978 if (this.attr_("labelsSeparateLines")) {
981 var point
= this.selPoints_
[i
];
982 var c
= new RGBColor(this.colors_
[i
%clen
]);
983 var yval
= fmtFunc(point
.yval
);
984 replace
+= " <b><font color='" + c
.toHex() + "'>"
985 + point
.name
+ "</font></b>:"
989 this.attr_("labelsDiv").innerHTML
= replace
;
992 // Draw colored circles over the center of each selected point
994 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
995 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
997 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
998 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
999 0, 2 * Math
.PI
, false);
1004 this.previousVerticalX_
= canvasx
;
1009 * Set manually set selected dots, and display information about them
1010 * @param int row number that should by highlighted
1011 * false value clears the selection
1014 Dygraph
.prototype.setSelection
= function(row
) {
1015 // Extract the points we've selected
1016 this.selPoints_
= [];
1019 if (row
!== false) {
1020 row
= row
-this.boundaryIds_
[0][0];
1023 if (row
!== false && row
>= 0) {
1024 for (var i
in this.layout_
.datasets
) {
1025 if (row
< this.layout_
.datasets
[i
].length
) {
1026 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1028 pos
+= this.layout_
.datasets
[i
].length
;
1032 if (this.selPoints_
.length
) {
1033 this.lastx_
= this.selPoints_
[0].xval
;
1034 this.updateSelection_();
1037 this.clearSelection();
1043 * The mouse has left the canvas. Clear out whatever artifacts remain
1044 * @param {Object} event the mouseout event from the browser.
1047 Dygraph
.prototype.mouseOut_
= function(event
) {
1048 if (this.attr_("unhighlightCallback")) {
1049 this.attr_("unhighlightCallback")(event
);
1052 if (this.attr_("hideOverlayOnMouseOut")) {
1053 this.clearSelection();
1058 * Remove all selection from the canvas
1061 Dygraph
.prototype.clearSelection
= function() {
1062 // Get rid of the overlay data
1063 var ctx
= this.canvas_
.getContext("2d");
1064 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1065 this.attr_("labelsDiv").innerHTML
= "";
1066 this.selPoints_
= [];
1071 * Returns the number of the currently selected row
1072 * @return int row number, of -1 if nothing is selected
1075 Dygraph
.prototype.getSelection
= function() {
1076 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1080 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1081 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1082 return row
+ this.boundaryIds_
[0][0];
1088 Dygraph
.zeropad
= function(x
) {
1089 if (x
< 10) return "0" + x
; else return "" + x
;
1093 * Return a string version of the hours, minutes and seconds portion of a date.
1094 * @param {Number} date The JavaScript date (ms since epoch)
1095 * @return {String} A time of the form "HH:MM:SS"
1098 Dygraph
.hmsString_
= function(date
) {
1099 var zeropad
= Dygraph
.zeropad
;
1100 var d
= new Date(date
);
1101 if (d
.getSeconds()) {
1102 return zeropad(d
.getHours()) + ":" +
1103 zeropad(d
.getMinutes()) + ":" +
1104 zeropad(d
.getSeconds());
1106 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1111 * Convert a JS date to a string appropriate to display on an axis that
1112 * is displaying values at the stated granularity.
1113 * @param {Date} date The date to format
1114 * @param {Number} granularity One of the Dygraph granularity constants
1115 * @return {String} The formatted date
1118 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1119 if (granularity
>= Dygraph
.MONTHLY
) {
1120 return date
.strftime('%b %y');
1122 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1123 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1124 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1126 return Dygraph
.hmsString_(date
.getTime());
1132 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1133 * @param {Number} date The JavaScript date (ms since epoch)
1134 * @return {String} A date of the form "YYYY/MM/DD"
1137 Dygraph
.dateString_
= function(date
, self
) {
1138 var zeropad
= Dygraph
.zeropad
;
1139 var d
= new Date(date
);
1142 var year
= "" + d
.getFullYear();
1143 // Get a 0 padded month string
1144 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1145 // Get a 0 padded day string
1146 var day
= zeropad(d
.getDate());
1149 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1150 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1152 return year
+ "/" + month + "/" + day
+ ret
;
1156 * Round a number to the specified number of digits past the decimal point.
1157 * @param {Number} num The number to round
1158 * @param {Number} places The number of decimals to which to round
1159 * @return {Number} The rounded number
1162 Dygraph
.round_
= function(num
, places
) {
1163 var shift
= Math
.pow(10, places
);
1164 return Math
.round(num
* shift
)/shift
;
1168 * Fires when there's data available to be graphed.
1169 * @param {String} data Raw CSV data to be plotted
1172 Dygraph
.prototype.loadedEvent_
= function(data
) {
1173 this.rawData_
= this.parseCSV_(data
);
1174 this.drawGraph_(this.rawData_
);
1177 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1178 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1179 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1182 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1185 Dygraph
.prototype.addXTicks_
= function() {
1186 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1187 var startDate
, endDate
;
1188 if (this.dateWindow_
) {
1189 startDate
= this.dateWindow_
[0];
1190 endDate
= this.dateWindow_
[1];
1192 startDate
= this.rawData_
[0][0];
1193 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1196 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1197 this.layout_
.updateOptions({xTicks
: xTicks
});
1200 // Time granularity enumeration
1201 Dygraph
.SECONDLY
= 0;
1202 Dygraph
.TWO_SECONDLY
= 1;
1203 Dygraph
.FIVE_SECONDLY
= 2;
1204 Dygraph
.TEN_SECONDLY
= 3;
1205 Dygraph
.THIRTY_SECONDLY
= 4;
1206 Dygraph
.MINUTELY
= 5;
1207 Dygraph
.TWO_MINUTELY
= 6;
1208 Dygraph
.FIVE_MINUTELY
= 7;
1209 Dygraph
.TEN_MINUTELY
= 8;
1210 Dygraph
.THIRTY_MINUTELY
= 9;
1211 Dygraph
.HOURLY
= 10;
1212 Dygraph
.TWO_HOURLY
= 11;
1213 Dygraph
.SIX_HOURLY
= 12;
1215 Dygraph
.WEEKLY
= 14;
1216 Dygraph
.MONTHLY
= 15;
1217 Dygraph
.QUARTERLY
= 16;
1218 Dygraph
.BIANNUAL
= 17;
1219 Dygraph
.ANNUAL
= 18;
1220 Dygraph
.DECADAL
= 19;
1221 Dygraph
.NUM_GRANULARITIES
= 20;
1223 Dygraph
.SHORT_SPACINGS
= [];
1224 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1225 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1226 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1227 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1228 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1229 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1230 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1231 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1232 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1233 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1234 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1235 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1236 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1237 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1238 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1242 // If we used this time granularity, how many ticks would there be?
1243 // This is only an approximation, but it's generally good enough.
1245 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1246 if (granularity
< Dygraph
.MONTHLY
) {
1247 // Generate one tick mark for every fixed interval of time.
1248 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1249 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1251 var year_mod
= 1; // e.g. to only print one point every 10 years.
1252 var num_months
= 12;
1253 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1254 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1255 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1256 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1258 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1259 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1260 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1266 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1267 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1269 // Returns an array containing {v: millis, label: label} dictionaries.
1271 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1272 var formatter
= this.attr_("xAxisLabelFormatter");
1274 if (granularity
< Dygraph
.MONTHLY
) {
1275 // Generate one tick mark for every fixed interval of time.
1276 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1277 var format
= '%d%b'; // e.g. "1Jan"
1279 // Find a time less than start_time which occurs on a "nice" time boundary
1280 // for this granularity.
1281 var g
= spacing
/ 1000;
1282 var d
= new Date(start_time
);
1283 if (g
<= 60) { // seconds
1284 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1288 if (g
<= 60) { // minutes
1289 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1294 if (g
<= 24) { // days
1295 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1300 if (g
== 7) { // one week
1301 d
.setDate(d
.getDate() - d
.getDay());
1306 start_time
= d
.getTime();
1308 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1309 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1312 // Display a tick mark on the first of a set of months of each year.
1313 // Years get a tick mark iff y % year_mod == 0. This is useful for
1314 // displaying a tick mark once every 10 years, say, on long time scales.
1316 var year_mod
= 1; // e.g. to only print one point every 10 years.
1318 if (granularity
== Dygraph
.MONTHLY
) {
1319 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1320 } else if (granularity
== Dygraph
.QUARTERLY
) {
1321 months
= [ 0, 3, 6, 9 ];
1322 } else if (granularity
== Dygraph
.BIANNUAL
) {
1324 } else if (granularity
== Dygraph
.ANNUAL
) {
1326 } else if (granularity
== Dygraph
.DECADAL
) {
1331 var start_year
= new Date(start_time
).getFullYear();
1332 var end_year
= new Date(end_time
).getFullYear();
1333 var zeropad
= Dygraph
.zeropad
;
1334 for (var i
= start_year
; i
<= end_year
; i
++) {
1335 if (i
% year_mod
!= 0) continue;
1336 for (var j
= 0; j
< months
.length
; j
++) {
1337 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1338 var t
= Date
.parse(date_str
);
1339 if (t
< start_time
|| t
> end_time
) continue;
1340 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1350 * Add ticks to the x-axis based on a date range.
1351 * @param {Number} startDate Start of the date window (millis since epoch)
1352 * @param {Number} endDate End of the date window (millis since epoch)
1353 * @return {Array.<Object>} Array of {label, value} tuples.
1356 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1358 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1359 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1360 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1367 return self
.GetXAxis(startDate
, endDate
, chosen
);
1369 // TODO(danvk): signal error.
1374 * Add ticks when the x axis has numbers on it (instead of dates)
1375 * @param {Number} startDate Start of the date window (millis since epoch)
1376 * @param {Number} endDate End of the date window (millis since epoch)
1377 * @return {Array.<Object>} Array of {label, value} tuples.
1380 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1382 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1383 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1384 // The first spacing greater than pixelsPerYLabel is what we use.
1385 // TODO(danvk): version that works on a log scale.
1386 if (self
.attr_("labelsKMG2")) {
1387 var mults
= [1, 2, 4, 8];
1389 var mults
= [1, 2, 5];
1391 var scale
, low_val
, high_val
, nTicks
;
1392 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1393 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1394 for (var i
= -10; i
< 50; i
++) {
1395 if (self
.attr_("labelsKMG2")) {
1396 var base_scale
= Math
.pow(16, i
);
1398 var base_scale
= Math
.pow(10, i
);
1400 for (var j
= 0; j
< mults
.length
; j
++) {
1401 scale
= base_scale
* mults
[j
];
1402 low_val
= Math
.floor(minV
/ scale
) * scale
;
1403 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1404 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1405 var spacing
= self
.height_
/ nTicks
;
1406 // wish I could break out of both loops at once...
1407 if (spacing
> pixelsPerTick
) break;
1409 if (spacing
> pixelsPerTick
) break;
1412 // Construct labels for the ticks
1416 if (self
.attr_("labelsKMB")) {
1418 k_labels
= [ "K", "M", "B", "T" ];
1420 if (self
.attr_("labelsKMG2")) {
1421 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1423 k_labels
= [ "k", "M", "G", "T" ];
1426 // Allow reverse y-axis if it's explicitly requested.
1427 if (low_val
> high_val
) scale
*= -1;
1429 for (var i
= 0; i
< nTicks
; i
++) {
1430 var tickV
= low_val
+ i
* scale
;
1431 var absTickV
= Math
.abs(tickV
);
1432 var label
= Dygraph
.round_(tickV
, 2);
1433 if (k_labels
.length
) {
1434 // Round up to an appropriate unit.
1436 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1437 if (absTickV
>= n
) {
1438 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1443 ticks
.push( {label
: label
, v
: tickV
} );
1449 * Adds appropriate ticks on the y-axis
1450 * @param {Number} minY The minimum Y value in the data set
1451 * @param {Number} maxY The maximum Y value in the data set
1454 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1455 // Set the number of ticks so that the labels are human-friendly.
1456 // TODO(danvk): make this an attribute as well.
1457 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1458 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1462 // Computes the range of the data series (including confidence intervals).
1463 // series is either [ [x1, y1], [x2, y2], ... ] or
1464 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1465 // Returns [low, high]
1466 Dygraph
.prototype.extremeValues_
= function(series
) {
1467 var minY
= null, maxY
= null;
1469 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1471 // With custom bars, maxY is the max of the high values.
1472 for (var j
= 0; j
< series
.length
; j
++) {
1473 var y
= series
[j
][1][0];
1475 var low
= y
- series
[j
][1][1];
1476 var high
= y
+ series
[j
][1][2];
1477 if (low
> y
) low
= y
; // this can happen with custom bars,
1478 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1479 if (maxY
== null || high
> maxY
) {
1482 if (minY
== null || low
< minY
) {
1487 for (var j
= 0; j
< series
.length
; j
++) {
1488 var y
= series
[j
][1];
1489 if (y
=== null || isNaN(y
)) continue;
1490 if (maxY
== null || y
> maxY
) {
1493 if (minY
== null || y
< minY
) {
1499 return [minY
, maxY
];
1503 * Update the graph with new data. Data is in the format
1504 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1505 * or, if errorBars=true,
1506 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1507 * @param {Array.<Object>} data The data (see above)
1510 Dygraph
.prototype.drawGraph_
= function(data
) {
1511 // This is used to set the second parameter to drawCallback, below.
1512 var is_initial_draw
= this.is_initial_draw_
;
1513 this.is_initial_draw_
= false;
1515 var minY
= null, maxY
= null;
1516 this.layout_
.removeAllDatasets();
1518 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1520 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints');
1522 // For stacked series.
1523 var cumulative_y
= [];
1524 var stacked_datasets
= [];
1526 // Loop over all fields in the dataset
1527 for (var i
= 1; i
< data
[0].length
; i
++) {
1528 if (!this.visibility()[i
- 1]) continue;
1531 for (var j
= 0; j
< data
.length
; j
++) {
1532 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1533 var date
= data
[j
][0];
1534 series
.push([date
, data
[j
][i
]]);
1537 series
= this.rollingAverage(series
, this.rollPeriod_
);
1539 // Prune down to the desired range, if necessary (for zooming)
1540 // Because there can be lines going to points outside of the visible area,
1541 // we actually prune to visible points, plus one on either side.
1542 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1543 if (this.dateWindow_
) {
1544 var low
= this.dateWindow_
[0];
1545 var high
= this.dateWindow_
[1];
1547 // TODO(danvk): do binary search instead of linear search.
1548 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1549 var firstIdx
= null, lastIdx
= null;
1550 for (var k
= 0; k
< series
.length
; k
++) {
1551 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1554 if (series
[k
][0] <= high
) {
1558 if (firstIdx
=== null) firstIdx
= 0;
1559 if (firstIdx
> 0) firstIdx
--;
1560 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1561 if (lastIdx
< series
.length
- 1) lastIdx
++;
1562 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1563 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1564 pruned
.push(series
[k
]);
1568 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1571 var extremes
= this.extremeValues_(series
);
1572 var thisMinY
= extremes
[0];
1573 var thisMaxY
= extremes
[1];
1574 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1575 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1579 for (var j
=0; j
<series
.length
; j
++)
1580 vals
[j
] = [series
[j
][0],
1581 series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1582 this.layout_
.addDataset(this.attr_("labels")[i
], vals
);
1583 } else if (this.attr_("stackedGraph")) {
1585 var l
= series
.length
;
1587 for (var j
= 0; j
< l
; j
++) {
1588 if (cumulative_y
[series
[j
][0]] === undefined
)
1589 cumulative_y
[series
[j
][0]] = 0;
1591 actual_y
= series
[j
][1];
1592 cumulative_y
[series
[j
][0]] += actual_y
;
1594 vals
[j
] = [series
[j
][0], cumulative_y
[series
[j
][0]]]
1596 if (!maxY
|| cumulative_y
[series
[j
][0]] > maxY
)
1597 maxY
= cumulative_y
[series
[j
][0]];
1599 stacked_datasets
.push([this.attr_("labels")[i
], vals
]);
1600 //this.layout_.addDataset(this.attr_("labels")[i], vals);
1602 this.layout_
.addDataset(this.attr_("labels")[i
], series
);
1606 if (stacked_datasets
.length
> 0) {
1607 for (var i
= (stacked_datasets
.length
- 1); i
>= 0; i
--) {
1608 this.layout_
.addDataset(stacked_datasets
[i
][0], stacked_datasets
[i
][1]);
1612 // Use some heuristics to come up with a good maxY value, unless it's been
1613 // set explicitly by the user.
1614 if (this.valueRange_
!= null) {
1615 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1616 this.displayedYRange_
= this.valueRange_
;
1618 // This affects the calculation of span, below.
1619 if (this.attr_("includeZero") && minY
> 0) {
1623 // Add some padding and round up to an integer to be human-friendly.
1624 var span
= maxY
- minY
;
1625 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1626 if (span
== 0) { span
= maxY
; }
1627 var maxAxisY
= maxY
+ 0.1 * span
;
1628 var minAxisY
= minY
- 0.1 * span
;
1630 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1631 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1632 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1634 if (this.attr_("includeZero")) {
1635 if (maxY
< 0) maxAxisY
= 0;
1636 if (minY
> 0) minAxisY
= 0;
1639 this.addYTicks_(minAxisY
, maxAxisY
);
1640 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1645 // Tell PlotKit to use this new data and render itself
1646 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1647 this.layout_
.evaluateWithError();
1648 this.plotter_
.clear();
1649 this.plotter_
.render();
1650 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1651 this.canvas_
.height
);
1653 if (this.attr_("drawCallback") !== null) {
1654 this.attr_("drawCallback")(this, is_initial_draw
);
1659 * Calculates the rolling average of a data set.
1660 * If originalData is [label, val], rolls the average of those.
1661 * If originalData is [label, [, it's interpreted as [value, stddev]
1662 * and the roll is returned in the same form, with appropriately reduced
1663 * stddev for each value.
1664 * Note that this is where fractional input (i.e. '5/10') is converted into
1666 * @param {Array} originalData The data in the appropriate format (see above)
1667 * @param {Number} rollPeriod The number of days over which to average the data
1669 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1670 if (originalData
.length
< 2)
1671 return originalData
;
1672 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1673 var rollingData
= [];
1674 var sigma
= this.attr_("sigma");
1676 if (this.fractions_
) {
1678 var den
= 0; // numerator/denominator
1680 for (var i
= 0; i
< originalData
.length
; i
++) {
1681 num
+= originalData
[i
][1][0];
1682 den
+= originalData
[i
][1][1];
1683 if (i
- rollPeriod
>= 0) {
1684 num
-= originalData
[i
- rollPeriod
][1][0];
1685 den
-= originalData
[i
- rollPeriod
][1][1];
1688 var date
= originalData
[i
][0];
1689 var value
= den
? num
/ den
: 0.0;
1690 if (this.attr_("errorBars")) {
1691 if (this.wilsonInterval_
) {
1692 // For more details on this confidence interval, see:
1693 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1695 var p
= value
< 0 ? 0 : value
, n
= den
;
1696 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1697 var denom
= 1 + sigma
* sigma
/ den
;
1698 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1699 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1700 rollingData
[i
] = [date
,
1701 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1703 rollingData
[i
] = [date
, [0, 0, 0]];
1706 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1707 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1710 rollingData
[i
] = [date
, mult
* value
];
1713 } else if (this.attr_("customBars")) {
1718 for (var i
= 0; i
< originalData
.length
; i
++) {
1719 var data
= originalData
[i
][1];
1721 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1723 if (y
!= null && !isNaN(y
)) {
1729 if (i
- rollPeriod
>= 0) {
1730 var prev
= originalData
[i
- rollPeriod
];
1731 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1738 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1739 1.0 * (mid
- low
) / count
,
1740 1.0 * (high
- mid
) / count
]];
1743 // Calculate the rolling average for the first rollPeriod - 1 points where
1744 // there is not enough data to roll over the full number of days
1745 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1746 if (!this.attr_("errorBars")){
1747 if (rollPeriod
== 1) {
1748 return originalData
;
1751 for (var i
= 0; i
< originalData
.length
; i
++) {
1754 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1755 var y
= originalData
[j
][1];
1756 if (y
== null || isNaN(y
)) continue;
1758 sum
+= originalData
[j
][1];
1761 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1763 rollingData
[i
] = [originalData
[i
][0], null];
1768 for (var i
= 0; i
< originalData
.length
; i
++) {
1772 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1773 var y
= originalData
[j
][1][0];
1774 if (y
== null || isNaN(y
)) continue;
1776 sum
+= originalData
[j
][1][0];
1777 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1780 var stddev
= Math
.sqrt(variance
) / num_ok
;
1781 rollingData
[i
] = [originalData
[i
][0],
1782 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1784 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1794 * Parses a date, returning the number of milliseconds since epoch. This can be
1795 * passed in as an xValueParser in the Dygraph constructor.
1796 * TODO(danvk): enumerate formats that this understands.
1797 * @param {String} A date in YYYYMMDD format.
1798 * @return {Number} Milliseconds since epoch.
1801 Dygraph
.dateParser
= function(dateStr
, self
) {
1804 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1805 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1806 while (dateStrSlashed
.search("-") != -1) {
1807 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1809 d
= Date
.parse(dateStrSlashed
);
1810 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1811 // TODO(danvk): remove support for this format. It's confusing.
1812 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1813 + "/" + dateStr
.substr(6,2);
1814 d
= Date
.parse(dateStrSlashed
);
1816 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1817 // "2009/07/12 12:34:56"
1818 d
= Date
.parse(dateStr
);
1821 if (!d
|| isNaN(d
)) {
1822 self
.error("Couldn't parse " + dateStr
+ " as a date");
1828 * Detects the type of the str (date or numeric) and sets the various
1829 * formatting attributes in this.attrs_ based on this type.
1830 * @param {String} str An x value.
1833 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1835 if (str
.indexOf('-') >= 0 ||
1836 str
.indexOf('/') >= 0 ||
1837 isNaN(parseFloat(str
))) {
1839 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1840 // TODO(danvk): remove support for this format.
1845 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1846 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1847 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1848 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
1850 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1851 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1852 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1853 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
1858 * Parses a string in a special csv format. We expect a csv file where each
1859 * line is a date point, and the first field in each line is the date string.
1860 * We also expect that all remaining fields represent series.
1861 * if the errorBars attribute is set, then interpret the fields as:
1862 * date, series1, stddev1, series2, stddev2, ...
1863 * @param {Array.<Object>} data See above.
1866 * @return Array.<Object> An array with one entry for each row. These entries
1867 * are an array of cells in that row. The first entry is the parsed x-value for
1868 * the row. The second, third, etc. are the y-values. These can take on one of
1869 * three forms, depending on the CSV and constructor parameters:
1871 * 2. [ value, stddev ]
1872 * 3. [ low value, center value, high value ]
1874 Dygraph
.prototype.parseCSV_
= function(data
) {
1876 var lines
= data
.split("\n");
1878 // Use the default delimiter or fall back to a tab if that makes sense.
1879 var delim
= this.attr_('delimiter');
1880 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1885 if (this.labelsFromCSV_
) {
1887 this.attrs_
.labels
= lines
[0].split(delim
);
1891 var defaultParserSet
= false; // attempt to auto-detect x value type
1892 var expectedCols
= this.attr_("labels").length
;
1893 var outOfOrder
= false;
1894 for (var i
= start
; i
< lines
.length
; i
++) {
1895 var line
= lines
[i
];
1896 if (line
.length
== 0) continue; // skip blank lines
1897 if (line
[0] == '#') continue; // skip comment lines
1898 var inFields
= line
.split(delim
);
1899 if (inFields
.length
< 2) continue;
1902 if (!defaultParserSet
) {
1903 this.detectTypeFromString_(inFields
[0]);
1904 xParser
= this.attr_("xValueParser");
1905 defaultParserSet
= true;
1907 fields
[0] = xParser(inFields
[0], this);
1909 // If fractions are expected, parse the numbers as "A/B
"
1910 if (this.fractions_) {
1911 for (var j = 1; j < inFields.length; j++) {
1912 // TODO(danvk): figure out an appropriate way to flag parse errors.
1913 var vals = inFields[j].split("/");
1914 fields[j] = [parseFloat(vals[0]), parseFloat(vals[1])];
1916 } else if (this.attr_("errorBars
")) {
1917 // If there are error bars, values are (value, stddev) pairs
1918 for (var j = 1; j < inFields.length; j += 2)
1919 fields[(j + 1) / 2] = [parseFloat(inFields[j]),
1920 parseFloat(inFields[j + 1])];
1921 } else if (this.attr_("customBars
")) {
1922 // Bars are a low;center;high tuple
1923 for (var j = 1; j < inFields.length; j++) {
1924 var vals = inFields[j].split(";");
1925 fields[j] = [ parseFloat(vals[0]),
1926 parseFloat(vals[1]),
1927 parseFloat(vals[2]) ];
1930 // Values are just numbers
1931 for (var j = 1; j < inFields.length; j++) {
1932 fields[j] = parseFloat(inFields[j]);
1935 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
1940 if (fields.length != expectedCols) {
1941 this.error("Number of columns
in line
" + i + " (" + fields.length +
1942 ") does not agree
with number of
labels (" + expectedCols +
1948 this.warn("CSV is out of order
; order it correctly to speed loading
.");
1949 ret.sort(function(a,b) { return a[0] - b[0] });
1956 * The user has provided their data as a pre-packaged JS array. If the x values
1957 * are numeric, this is the same as dygraphs' internal format. If the x values
1958 * are dates, we need to convert them from Date objects to ms since epoch.
1959 * @param {Array.<Object>} data
1960 * @return {Array.<Object>} data with numeric x values.
1962 Dygraph.prototype.parseArray_ = function(data) {
1963 // Peek at the first x value to see if it's numeric.
1964 if (data.length == 0) {
1965 this.error("Can
't plot empty data set");
1968 if (data[0].length == 0) {
1969 this.error("Data set cannot contain an empty row");
1973 if (this.attr_("labels") == null) {
1974 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
1975 "in the options parameter");
1976 this.attrs_.labels = [ "X" ];
1977 for (var i = 1; i < data[0].length; i++) {
1978 this.attrs_.labels.push("Y" + i);
1982 if (Dygraph.isDateLike(data[0][0])) {
1983 // Some intelligent defaults for a date x-axis.
1984 this.attrs_.xValueFormatter = Dygraph.dateString_;
1985 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
1986 this.attrs_.xTicker = Dygraph.dateTicker;
1988 // Assume they're all dates
.
1989 var parsedData
= Dygraph
.clone(data
);
1990 for (var i
= 0; i
< data
.length
; i
++) {
1991 if (parsedData
[i
].length
== 0) {
1992 this.error("Row " << (1 + i
) << " of data is empty");
1995 if (parsedData
[i
][0] == null
1996 || typeof(parsedData
[i
][0].getTime
) != 'function'
1997 || isNaN(parsedData
[i
][0].getTime())) {
1998 this.error("x value in row " + (1 + i
) + " is not a Date");
2001 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2005 // Some intelligent defaults for a numeric x-axis.
2006 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2007 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2013 * Parses a DataTable object from gviz.
2014 * The data is expected to have a first column that is either a date or a
2015 * number. All subsequent columns must be numbers. If there is a clear mismatch
2016 * between this.xValueParser_ and the type of the first column, it will be
2017 * fixed. Returned value is in the same format as return value of parseCSV_.
2018 * @param {Array.<Object>} data See above.
2021 Dygraph
.prototype.parseDataTable_
= function(data
) {
2022 var cols
= data
.getNumberOfColumns();
2023 var rows
= data
.getNumberOfRows();
2025 // Read column labels
2027 for (var i
= 0; i
< cols
; i
++) {
2028 labels
.push(data
.getColumnLabel(i
));
2029 if (i
!= 0 && this.attr_("errorBars")) i
+= 1;
2031 this.attrs_
.labels
= labels
;
2032 cols
= labels
.length
;
2034 var indepType
= data
.getColumnType(0);
2035 if (indepType
== 'date' || indepType
== 'datetime') {
2036 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2037 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2038 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2039 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2040 } else if (indepType
== 'number') {
2041 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2042 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2043 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2044 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2046 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2047 "column 1 of DataTable input (Got '" + indepType
+ "')");
2052 var outOfOrder
= false;
2053 for (var i
= 0; i
< rows
; i
++) {
2055 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2056 data
.getValue(i
, 0) === null) {
2057 this.warning("Ignoring row " + i
+
2058 " of DataTable because of undefined or null first column.");
2062 if (indepType
== 'date' || indepType
== 'datetime') {
2063 row
.push(data
.getValue(i
, 0).getTime());
2065 row
.push(data
.getValue(i
, 0));
2067 if (!this.attr_("errorBars")) {
2068 for (var j
= 1; j
< cols
; j
++) {
2069 row
.push(data
.getValue(i
, j
));
2072 for (var j
= 0; j
< cols
- 1; j
++) {
2073 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2076 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2083 this.warn("DataTable is out of order; order it correctly to speed loading.");
2084 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2089 // These functions are all based on MochiKit.
2090 Dygraph
.update
= function (self
, o
) {
2091 if (typeof(o
) != 'undefined' && o
!== null) {
2093 if (o
.hasOwnProperty(k
)) {
2101 Dygraph
.isArrayLike
= function (o
) {
2102 var typ
= typeof(o
);
2104 (typ
!= 'object' && !(typ
== 'function' &&
2105 typeof(o
.item
) == 'function')) ||
2107 typeof(o
.length
) != 'number' ||
2115 Dygraph
.isDateLike
= function (o
) {
2116 if (typeof(o
) != "object" || o
=== null ||
2117 typeof(o
.getTime
) != 'function') {
2123 Dygraph
.clone
= function(o
) {
2124 // TODO(danvk): figure out how MochiKit's version works
2126 for (var i
= 0; i
< o
.length
; i
++) {
2127 if (Dygraph
.isArrayLike(o
[i
])) {
2128 r
.push(Dygraph
.clone(o
[i
]));
2138 * Get the CSV data. If it's in a function, call that function. If it's in a
2139 * file, do an XMLHttpRequest to get it.
2142 Dygraph
.prototype.start_
= function() {
2143 if (typeof this.file_
== 'function') {
2144 // CSV string. Pretend we got it via XHR.
2145 this.loadedEvent_(this.file_());
2146 } else if (Dygraph
.isArrayLike(this.file_
)) {
2147 this.rawData_
= this.parseArray_(this.file_
);
2148 this.drawGraph_(this.rawData_
);
2149 } else if (typeof this.file_
== 'object' &&
2150 typeof this.file_
.getColumnRange
== 'function') {
2151 // must be a DataTable from gviz.
2152 this.rawData_
= this.parseDataTable_(this.file_
);
2153 this.drawGraph_(this.rawData_
);
2154 } else if (typeof this.file_
== 'string') {
2155 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2156 if (this.file_
.indexOf('\n') >= 0) {
2157 this.loadedEvent_(this.file_
);
2159 var req
= new XMLHttpRequest();
2161 req
.onreadystatechange
= function () {
2162 if (req
.readyState
== 4) {
2163 if (req
.status
== 200) {
2164 caller
.loadedEvent_(req
.responseText
);
2169 req
.open("GET", this.file_
, true);
2173 this.error("Unknown data format: " + (typeof this.file_
));
2178 * Changes various properties of the graph. These can include:
2180 * <li>file: changes the source data for the graph</li>
2181 * <li>errorBars: changes whether the data contains stddev</li>
2183 * @param {Object} attrs The new properties and values
2185 Dygraph
.prototype.updateOptions
= function(attrs
) {
2186 // TODO(danvk): this is a mess. Rethink this function.
2187 if (attrs
.rollPeriod
) {
2188 this.rollPeriod_
= attrs
.rollPeriod
;
2190 if (attrs
.dateWindow
) {
2191 this.dateWindow_
= attrs
.dateWindow
;
2193 if (attrs
.valueRange
) {
2194 this.valueRange_
= attrs
.valueRange
;
2196 Dygraph
.update(this.user_attrs_
, attrs
);
2198 this.labelsFromCSV_
= (this.attr_("labels") == null);
2200 // TODO(danvk): this doesn't match the constructor logic
2201 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2202 if (attrs
['file']) {
2203 this.file_
= attrs
['file'];
2206 this.drawGraph_(this.rawData_
);
2211 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2212 * containing div (which has presumably changed size since the dygraph was
2213 * instantiated. If the width/height are specified, the div will be resized.
2215 * This is far more efficient than destroying and re-instantiating a
2216 * Dygraph, since it doesn't have to reparse the underlying data.
2218 * @param {Number} width Width (in pixels)
2219 * @param {Number} height Height (in pixels)
2221 Dygraph
.prototype.resize
= function(width
, height
) {
2222 if (this.resize_lock
) {
2225 this.resize_lock
= true;
2227 if ((width
=== null) != (height
=== null)) {
2228 this.warn("Dygraph.resize() should be called with zero parameters or " +
2229 "two non-NULL parameters. Pretending it was zero.");
2230 width
= height
= null;
2233 // TODO(danvk): there should be a clear() method.
2234 this.maindiv_
.innerHTML
= "";
2235 this.attrs_
.labelsDiv
= null;
2238 this.maindiv_
.style
.width
= width
+ "px";
2239 this.maindiv_
.style
.height
= height
+ "px";
2240 this.width_
= width
;
2241 this.height_
= height
;
2243 this.width_
= this.maindiv_
.offsetWidth
;
2244 this.height_
= this.maindiv_
.offsetHeight
;
2247 this.createInterface_();
2248 this.drawGraph_(this.rawData_
);
2250 this.resize_lock
= false;
2254 * Adjusts the number of days in the rolling average. Updates the graph to
2255 * reflect the new averaging period.
2256 * @param {Number} length Number of days over which to average the data.
2258 Dygraph
.prototype.adjustRoll
= function(length
) {
2259 this.rollPeriod_
= length
;
2260 this.drawGraph_(this.rawData_
);
2264 * Returns a boolean array of visibility statuses.
2266 Dygraph
.prototype.visibility
= function() {
2267 // Do lazy-initialization, so that this happens after we know the number of
2269 if (!this.attr_("visibility")) {
2270 this.attrs_
["visibility"] = [];
2272 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2273 this.attr_("visibility").push(true);
2275 return this.attr_("visibility");
2279 * Changes the visiblity of a series.
2281 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2282 var x
= this.visibility();
2283 if (num
< 0 && num
>= x
.length
) {
2284 this.warn("invalid series number in setVisibility: " + num
);
2287 this.drawGraph_(this.rawData_
);
2292 * Create a new canvas element. This is more complex than a simple
2293 * document.createElement("canvas") because of IE and excanvas.
2295 Dygraph
.createCanvas
= function() {
2296 var canvas
= document
.createElement("canvas");
2298 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2300 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2308 * A wrapper around Dygraph that implements the gviz API.
2309 * @param {Object} container The DOM object the visualization should live in.
2311 Dygraph
.GVizChart
= function(container
) {
2312 this.container
= container
;
2315 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2316 this.container
.innerHTML
= '';
2317 this.date_graph
= new Dygraph(this.container
, data
, options
);
2321 * Google charts compatible setSelection
2322 * Only row selection is supported, all points in the row will be highlighted
2323 * @param {Array} array of the selected cells
2326 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2328 if (selection_array
.length
) {
2329 row
= selection_array
[0].row
;
2331 this.date_graph
.setSelection(row
);
2335 * Google charts compatible getSelection implementation
2336 * @return {Array} array of the selected cells
2339 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2342 var row
= this.date_graph
.getSelection();
2344 if (row
< 0) return selection
;
2347 for (var i
in this.date_graph
.layout_
.datasets
) {
2348 selection
.push({row
: row
, column
: col
});
2355 // Older pages may still use this name.
2356 DateGraph
= Dygraph
;