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 // Directions for panning and zooming. Use bit operations when combined
139 // values are possible.
140 Dygraph
.HORIZONTAL
= 1;
141 Dygraph
.VERTICAL
= 2;
143 // Used for initializing annotation CSS rules only once.
144 Dygraph
.addedAnnotationCSS
= false;
146 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
147 // Labels is no longer a constructor parameter, since it's typically set
148 // directly from the data source. It also conains a name for the x-axis,
149 // which the previous constructor form did not.
150 if (labels
!= null) {
151 var new_labels
= ["Date"];
152 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
153 Dygraph
.update(attrs
, { 'labels': new_labels
});
155 this.__init__(div
, file
, attrs
);
159 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
160 * and interaction <canvas> inside of it. See the constructor for details
162 * @param {Element} div the Element to render the graph into.
163 * @param {String | Function} file Source data
164 * @param {Object} attrs Miscellaneous other options
167 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
168 // Support two-argument constructor
169 if (attrs
== null) { attrs
= {}; }
171 // Copy the important bits into the object
172 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
175 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
176 this.previousVerticalX_
= -1;
177 this.fractions_
= attrs
.fractions
|| false;
178 this.dateWindow_
= attrs
.dateWindow
|| null;
179 // valueRange and valueWindow are similar, but not the same. valueRange is a
180 // locally-stored copy of the attribute. valueWindow starts off the same as
181 // valueRange but is impacted by zoom or pan effects. valueRange is kept
182 // around to restore the original value back to valueRange.
183 this.valueRange_
= attrs
.valueRange
|| null;
184 this.valueWindow_
= this.valueRange_
;
186 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
187 this.is_initial_draw_
= true;
188 this.annotations_
= [];
190 // Clear the div. This ensure that, if multiple dygraphs are passed the same
191 // div, then only one will be drawn.
194 // If the div isn't already sized then inherit from our attrs or
195 // give it a default size.
196 if (div
.style
.width
== '') {
197 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
199 if (div
.style
.height
== '') {
200 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
202 this.width_
= parseInt(div
.style
.width
, 10);
203 this.height_
= parseInt(div
.style
.height
, 10);
204 // The div might have been specified as percent of the current window size,
205 // convert that to an appropriate number of pixels.
206 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
207 this.width_
= div
.offsetWidth
;
209 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
210 this.height_
= div
.offsetHeight
;
213 if (this.width_
== 0) {
214 this.error("dygraph has zero width. Please specify a width in pixels.");
216 if (this.height_
== 0) {
217 this.error("dygraph has zero height. Please specify a height in pixels.");
220 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
221 if (attrs
['stackedGraph']) {
222 attrs
['fillGraph'] = true;
223 // TODO(nikhilk): Add any other stackedGraph checks here.
226 // Dygraphs has many options, some of which interact with one another.
227 // To keep track of everything, we maintain two sets of options:
229 // this.user_attrs_ only options explicitly set by the user.
230 // this.attrs_ defaults, options derived from user_attrs_, data.
232 // Options are then accessed this.attr_('attr'), which first looks at
233 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
234 // defaults without overriding behavior that the user specifically asks for.
235 this.user_attrs_
= {};
236 Dygraph
.update(this.user_attrs_
, attrs
);
239 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
241 this.boundaryIds_
= [];
243 // Make a note of whether labels will be pulled from the CSV file.
244 this.labelsFromCSV_
= (this.attr_("labels") == null);
246 Dygraph
.addAnnotationRule();
248 // Create the containing DIV and other interactive elements
249 this.createInterface_();
254 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
256 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
257 this.user_attrs_
[seriesName
] != null &&
258 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
259 return this.user_attrs_
[seriesName
][name
];
260 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
261 return this.user_attrs_
[name
];
262 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
263 return this.attrs_
[name
];
269 // TODO(danvk): any way I can get the line numbers to be this.warn call?
270 Dygraph
.prototype.log
= function(severity
, message
) {
271 if (typeof(console
) != 'undefined') {
274 console
.debug('dygraphs: ' + message
);
277 console
.info('dygraphs: ' + message
);
279 case Dygraph
.WARNING
:
280 console
.warn('dygraphs: ' + message
);
283 console
.error('dygraphs: ' + message
);
288 Dygraph
.prototype.info
= function(message
) {
289 this.log(Dygraph
.INFO
, message
);
291 Dygraph
.prototype.warn
= function(message
) {
292 this.log(Dygraph
.WARNING
, message
);
294 Dygraph
.prototype.error
= function(message
) {
295 this.log(Dygraph
.ERROR
, message
);
299 * Returns the current rolling period, as set by the user or an option.
300 * @return {Number} The number of days in the rolling window
302 Dygraph
.prototype.rollPeriod
= function() {
303 return this.rollPeriod_
;
307 * Returns the currently-visible x-range. This can be affected by zooming,
308 * panning or a call to updateOptions.
309 * Returns a two-element array: [left, right].
310 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
312 Dygraph
.prototype.xAxisRange
= function() {
313 if (this.dateWindow_
) return this.dateWindow_
;
315 // The entire chart is visible.
316 var left
= this.rawData_
[0][0];
317 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
318 return [left
, right
];
322 * Returns the currently-visible y-range. This can be affected by zooming,
323 * panning or a call to updateOptions.
324 * Returns a two-element array: [bottom, top].
326 Dygraph
.prototype.yAxisRange
= function() {
327 return this.displayedYRange_
;
331 * Convert from data coordinates to canvas/div X/Y coordinates.
332 * Returns a two-element array: [X, Y]
334 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
335 var ret
= [null, null];
336 var area
= this.plotter_
.area
;
338 var xRange
= this.xAxisRange();
339 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
343 var yRange
= this.yAxisRange();
344 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
350 // TODO(danvk): use these functions throughout dygraphs.
352 * Convert from canvas/div coords to data coordinates.
353 * Returns a two-element array: [X, Y]
355 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
356 var ret
= [null, null];
357 var area
= this.plotter_
.area
;
359 var xRange
= this.xAxisRange();
360 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
364 var yRange
= this.yAxisRange();
365 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
372 * Returns the number of columns (including the independent variable).
374 Dygraph
.prototype.numColumns
= function() {
375 return this.rawData_
[0].length
;
379 * Returns the number of rows (excluding any header/label row).
381 Dygraph
.prototype.numRows
= function() {
382 return this.rawData_
.length
;
386 * Returns the value in the given row and column. If the row and column exceed
387 * the bounds on the data, returns null. Also returns null if the value is
390 Dygraph
.prototype.getValue
= function(row
, col
) {
391 if (row
< 0 || row
> this.rawData_
.length
) return null;
392 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
394 return this.rawData_
[row
][col
];
397 Dygraph
.addEvent
= function(el
, evt
, fn
) {
398 var normed_fn
= function(e
) {
399 if (!e
) var e
= window
.event
;
402 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
403 el
.addEventListener(evt
, normed_fn
, false);
405 el
.attachEvent('on' + evt
, normed_fn
);
409 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
410 var ctx
= cnv
.getContext("2d");
412 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
417 * Generates interface elements for the Dygraph: a containing div, a div to
418 * display the current point, and a textbox to adjust the rolling average
419 * period. Also creates the Renderer/Layout elements.
422 Dygraph
.prototype.createInterface_
= function() {
423 // Create the all-enclosing graph div
424 var enclosing
= this.maindiv_
;
426 this.graphDiv
= document
.createElement("div");
427 this.graphDiv
.style
.width
= this.width_
+ "px";
428 this.graphDiv
.style
.height
= this.height_
+ "px";
429 enclosing
.appendChild(this.graphDiv
);
433 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
435 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
436 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
437 - 2 * this.attr_("axisTickSize");
438 this.clippingArea_
= clip
;
440 // Create the canvas for interactive parts of the chart.
441 this.canvas_
= Dygraph
.createCanvas();
442 this.canvas_
.style
.position
= "absolute";
443 this.canvas_
.width
= this.width_
;
444 this.canvas_
.height
= this.height_
;
445 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
446 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
448 // ... and for static parts of the chart.
449 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
451 // The interactive parts of the graph are drawn on top of the chart.
452 this.graphDiv
.appendChild(this.hidden_
);
453 this.graphDiv
.appendChild(this.canvas_
);
454 this.mouseEventElement_
= this.canvas_
;
456 // Make sure we don't overdraw.
457 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
458 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
461 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
462 dygraph
.mouseMove_(e
);
464 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
465 dygraph
.mouseOut_(e
);
468 // Create the grapher
469 // TODO(danvk): why does the Layout need its own set of options?
470 this.layoutOptions_
= { 'xOriginIsZero': false };
471 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
472 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
473 Dygraph
.update(this.layoutOptions_
, {
474 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
476 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
478 // TODO(danvk): why does the Renderer need its own set of options?
479 this.renderOptions_
= { colorScheme
: this.colors_
,
481 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
482 Dygraph
.update(this.renderOptions_
, this.attrs_
);
483 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
484 this.plotter_
= new DygraphCanvasRenderer(this,
485 this.hidden_
, this.layout_
,
486 this.renderOptions_
);
488 this.createStatusMessage_();
489 this.createRollInterface_();
490 this.createDragInterface_();
494 * Detach DOM elements in the dygraph and null out all data references.
495 * Calling this when you're done with a dygraph can dramatically reduce memory
496 * usage. See, e.g., the tests/perf.html example.
498 Dygraph
.prototype.destroy
= function() {
499 var removeRecursive
= function(node
) {
500 while (node
.hasChildNodes()) {
501 removeRecursive(node
.firstChild
);
502 node
.removeChild(node
.firstChild
);
505 removeRecursive(this.maindiv_
);
507 var nullOut
= function(obj
) {
509 if (typeof(obj
[n
]) === 'object') {
515 // These may not all be necessary, but it can't hurt...
516 nullOut(this.layout_
);
517 nullOut(this.plotter_
);
522 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
523 * this particular canvas. All Dygraph work is done on this.canvas_.
524 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
525 * @return {Object} The newly-created canvas
528 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
529 var h
= Dygraph
.createCanvas();
530 h
.style
.position
= "absolute";
531 // TODO(danvk): h should be offset from canvas. canvas needs to include
532 // some extra area to make it easier to zoom in on the far left and far
533 // right. h needs to be precisely the plot area, so that clipping occurs.
534 h
.style
.top
= canvas
.style
.top
;
535 h
.style
.left
= canvas
.style
.left
;
536 h
.width
= this.width_
;
537 h
.height
= this.height_
;
538 h
.style
.width
= this.width_
+ "px"; // for IE
539 h
.style
.height
= this.height_
+ "px"; // for IE
543 // Taken from MochiKit.Color
544 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
548 if (saturation
=== 0) {
553 var i
= Math
.floor(hue
* 6);
554 var f
= (hue
* 6) - i
;
555 var p
= value
* (1 - saturation
);
556 var q
= value
* (1 - (saturation
* f
));
557 var t
= value
* (1 - (saturation
* (1 - f
)));
559 case 1: red
= q
; green
= value
; blue
= p
; break;
560 case 2: red
= p
; green
= value
; blue
= t
; break;
561 case 3: red
= p
; green
= q
; blue
= value
; break;
562 case 4: red
= t
; green
= p
; blue
= value
; break;
563 case 5: red
= value
; green
= p
; blue
= q
; break;
564 case 6: // fall through
565 case 0: red
= value
; green
= t
; blue
= p
; break;
568 red
= Math
.floor(255 * red
+ 0.5);
569 green
= Math
.floor(255 * green
+ 0.5);
570 blue
= Math
.floor(255 * blue
+ 0.5);
571 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
576 * Generate a set of distinct colors for the data series. This is done with a
577 * color wheel. Saturation/Value are customizable, and the hue is
578 * equally-spaced around the color wheel. If a custom set of colors is
579 * specified, that is used instead.
582 Dygraph
.prototype.setColors_
= function() {
583 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
584 // away with this.renderOptions_.
585 var num
= this.attr_("labels").length
- 1;
587 var colors
= this.attr_('colors');
589 var sat
= this.attr_('colorSaturation') || 1.0;
590 var val
= this.attr_('colorValue') || 0.5;
591 var half
= Math
.ceil(num
/ 2);
592 for (var i
= 1; i
<= num
; i
++) {
593 if (!this.visibility()[i
-1]) continue;
594 // alternate colors for high contrast.
595 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
596 var hue
= (1.0 * idx
/ (1 + num
));
597 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
600 for (var i
= 0; i
< num
; i
++) {
601 if (!this.visibility()[i
]) continue;
602 var colorStr
= colors
[i
% colors
.length
];
603 this.colors_
.push(colorStr
);
607 // TODO(danvk): update this w/r
/t/ the
new options system
.
608 this.renderOptions_
.colorScheme
= this.colors_
;
609 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
610 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
611 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
615 * Return the list of colors. This is either the list of colors passed in the
616 * attributes, or the autogenerated list of rgb(r,g,b) strings.
617 * @return {Array<string>} The list of colors.
619 Dygraph
.prototype.getColors
= function() {
623 // The following functions are from quirksmode.org with a modification for Safari from
624 // http://blog.firetree.net/2005/07/04/javascript-find-position/
625 // http://www.quirksmode.org/js
/findpos
.html
626 Dygraph
.findPosX
= function(obj
) {
631 curleft
+= obj
.offsetLeft
;
632 if(!obj
.offsetParent
)
634 obj
= obj
.offsetParent
;
641 Dygraph
.findPosY
= function(obj
) {
646 curtop
+= obj
.offsetTop
;
647 if(!obj
.offsetParent
)
649 obj
= obj
.offsetParent
;
659 * Create the div that contains information on the selected point(s)
660 * This goes in the top right of the canvas, unless an external div has already
664 Dygraph
.prototype.createStatusMessage_
= function() {
665 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
666 if (userLabelsDiv
&& null != userLabelsDiv
667 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
668 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
670 if (!this.attr_("labelsDiv")) {
671 var divWidth
= this.attr_('labelsDivWidth');
673 "position": "absolute",
676 "width": divWidth
+ "px",
678 "left": (this.width_
- divWidth
- 2) + "px",
679 "background": "white",
681 "overflow": "hidden"};
682 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
683 var div
= document
.createElement("div");
684 for (var name
in messagestyle
) {
685 if (messagestyle
.hasOwnProperty(name
)) {
686 div
.style
[name
] = messagestyle
[name
];
689 this.graphDiv
.appendChild(div
);
690 this.attrs_
.labelsDiv
= div
;
695 * Create the text box to adjust the averaging period
696 * @return {Object} The newly-created text box
699 Dygraph
.prototype.createRollInterface_
= function() {
700 var display
= this.attr_('showRoller') ? "block" : "none";
701 var textAttr
= { "position": "absolute",
703 "top": (this.plotter_
.area
.h
- 25) + "px",
704 "left": (this.plotter_
.area
.x
+ 1) + "px",
707 var roller
= document
.createElement("input");
708 roller
.type
= "text";
710 roller
.value
= this.rollPeriod_
;
711 for (var name
in textAttr
) {
712 if (textAttr
.hasOwnProperty(name
)) {
713 roller
.style
[name
] = textAttr
[name
];
717 var pa
= this.graphDiv
;
718 pa
.appendChild(roller
);
720 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
724 // These functions are taken from MochiKit.Signal
725 Dygraph
.pageX
= function(e
) {
727 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
730 var b
= document
.body
;
732 (de
.scrollLeft
|| b
.scrollLeft
) -
733 (de
.clientLeft
|| 0);
737 Dygraph
.pageY
= function(e
) {
739 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
742 var b
= document
.body
;
744 (de
.scrollTop
|| b
.scrollTop
) -
750 * Set up all the mouse handlers needed to capture dragging behavior for zoom
754 Dygraph
.prototype.createDragInterface_
= function() {
757 // Tracks whether the mouse is down right now
758 var isZooming
= false;
759 var isPanning
= false;
760 var dragStartX
= null;
761 var dragStartY
= null;
764 var dragDirection
= null;
767 var prevDragDirection
= null;
769 // draggingDate and draggingValue represent the [date,value] point on the
770 // graph at which the mouse was pressed. As the mouse moves while panning,
771 // the viewport must pan so that the mouse position points to
772 // [draggingDate, draggingValue]
773 var draggingDate
= null;
774 var draggingValue
= null;
776 // The range in second/value units that the viewport encompasses during a
777 // panning operation.
778 var dateRange
= null;
779 var valueRange
= null;
781 // Utility function to convert page-wide coordinates to canvas coords
784 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
785 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
787 // Draw zoom rectangles when the mouse is down and the user moves around
788 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
790 dragEndX
= getX(event
);
791 dragEndY
= getY(event
);
793 var xDelta
= Math
.abs(dragStartX
- dragEndX
);
794 var yDelta
= Math
.abs(dragStartY
- dragEndY
);
796 // drag direction threshold for y axis is twice as large as x axis
797 dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
799 self
.drawZoomRect_(dragDirection
, dragStartX
, dragEndX
, dragStartY
, dragEndY
,
800 prevDragDirection
, prevEndX
, prevEndY
);
804 prevDragDirection
= dragDirection
;
805 } else if (isPanning
) {
806 dragEndX
= getX(event
);
807 dragEndY
= getY(event
);
809 // Want to have it so that:
810 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
811 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
812 // 3. draggingValue appears at dragEndY.
813 // 4. valueRange is unaltered.
815 var minDate
= draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
816 var maxDate
= minDate
+ dateRange
;
817 self
.dateWindow_
= [minDate
, maxDate
];
820 // y-axis scaling is automatic unless a valueRange is defined or
821 // if the user zooms in on the y-axis. If neither is true, valueWindow_
823 if (self
.valueWindow_
) {
824 var maxValue
= draggingValue
+ (dragEndY
/ self
.height_
) * valueRange
;
825 var minValue
= maxValue
- valueRange
;
826 self
.valueWindow_
= [ minValue
, maxValue
];
828 self
.drawGraph_(self
.rawData_
);
832 // Track the beginning of drag events
833 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
834 px
= Dygraph
.findPosX(self
.canvas_
);
835 py
= Dygraph
.findPosY(self
.canvas_
);
836 dragStartX
= getX(event
);
837 dragStartY
= getY(event
);
839 if (event
.altKey
|| event
.shiftKey
) {
840 // have to be zoomed in to pan.
841 if (!self
.dateWindow_
&& !self
.valueWindow_
) return;
844 var xRange
= self
.xAxisRange();
845 dateRange
= xRange
[1] - xRange
[0];
846 var yRange
= self
.yAxisRange();
847 valueRange
= yRange
[1] - yRange
[0];
849 // TODO(konigsberg): Switch from all this math to toDataCoords?
850 // Seems to work for the dragging value.
851 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
853 var r
= self
.toDataCoords(null, dragStartY
);
854 draggingValue
= r
[1];
860 // If the user releases the mouse button during a drag, but not over the
861 // canvas, then it doesn't count as a zooming action.
862 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
863 if (isZooming
|| isPanning
) {
872 draggingValue
= null;
878 // Temporarily cancel the dragging event when the mouse leaves the graph
879 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
886 // If the mouse is released on the canvas during a drag event, then it's a
887 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
888 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
891 dragEndX
= getX(event
);
892 dragEndY
= getY(event
);
893 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
894 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
896 if (regionWidth
< 2 && regionHeight
< 2 &&
897 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
898 // TODO(danvk): pass along more info about the points, e.g. 'x'
899 if (self
.attr_('clickCallback') != null) {
900 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
902 if (self
.attr_('pointClickCallback')) {
903 // check if the click was on a particular point.
905 var closestDistance
= 0;
906 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
907 var p
= self
.selPoints_
[i
];
908 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
909 Math
.pow(p
.canvasy
- dragEndY
, 2);
910 if (closestIdx
== -1 || distance
< closestDistance
) {
911 closestDistance
= distance
;
916 // Allow any click within two pixels of the dot.
917 var radius
= self
.attr_('highlightCircleSize') + 2;
918 if (closestDistance
<= 5 * 5) {
919 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
924 if (regionWidth
>= 10 && dragDirection
== Dygraph
.HORIZONTAL
) {
925 self
.doZoomX_(Math
.min(dragStartX
, dragEndX
),
926 Math
.max(dragStartX
, dragEndX
));
927 } else if (regionHeight
>= 10 && dragDirection
== Dygraph
.VERTICAL
){
928 self
.doZoomY_(Math
.min(dragStartY
, dragEndY
),
929 Math
.max(dragStartY
, dragEndY
));
931 self
.canvas_
.getContext("2d").clearRect(0, 0,
933 self
.canvas_
.height
);
943 draggingValue
= null;
949 // Double-clicking zooms back out
950 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
951 // Disable zooming out if panning.
952 if (event
.altKey
|| event
.shiftKey
) return;
959 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
960 * up any previous zoom rectangles that were drawn. This could be optimized to
961 * avoid extra redrawing, but it's tricky to avoid interactions with the status
964 * @param {Number} direction the direction of the zoom rectangle. Acceptable
965 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
966 * @param {Number} startX The X position where the drag started, in canvas
968 * @param {Number} endX The current X position of the drag, in canvas coords.
969 * @param {Number} startY The Y position where the drag started, in canvas
971 * @param {Number} endY The current Y position of the drag, in canvas coords.
972 * @param {Number} prevDirection the value of direction on the previous call to
973 * this function. Used to avoid excess redrawing
974 * @param {Number} prevEndX The value of endX on the previous call to this
975 * function. Used to avoid excess redrawing
976 * @param {Number} prevEndY The value of endY on the previous call to this
977 * function. Used to avoid excess redrawing
980 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
981 prevDirection
, prevEndX
, prevEndY
) {
982 var ctx
= this.canvas_
.getContext("2d");
984 // Clean up from the previous rect if necessary
985 if (prevDirection
== Dygraph
.HORIZONTAL
) {
986 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
987 Math
.abs(startX
- prevEndX
), this.height_
);
988 } else if (prevDirection
== Dygraph
.VERTICAL
){
989 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
990 this.width_
, Math
.abs(startY
- prevEndY
));
993 // Draw a light-grey rectangle to show the new viewing area
994 if (direction
== Dygraph
.HORIZONTAL
) {
995 if (endX
&& startX
) {
996 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
997 ctx
.fillRect(Math
.min(startX
, endX
), 0,
998 Math
.abs(endX
- startX
), this.height_
);
1001 if (direction
== Dygraph
.VERTICAL
) {
1002 if (endY
&& startY
) {
1003 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1004 ctx
.fillRect(0, Math
.min(startY
, endY
),
1005 this.width_
, Math
.abs(endY
- startY
));
1011 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1012 * the canvas. The exact zoom window may be slightly larger if there are no data
1013 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1014 * which accepts dates that match the raw data. This function redraws the graph.
1016 * @param {Number} lowX The leftmost pixel value that should be visible.
1017 * @param {Number} highX The rightmost pixel value that should be visible.
1020 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1021 // Find the earliest and latest dates contained in this canvasx range.
1022 // Convert the call to date ranges of the raw data.
1023 var r
= this.toDataCoords(lowX
, null);
1025 r
= this.toDataCoords(highX
, null);
1027 this.doZoomXDates_(minDate
, maxDate
);
1031 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1032 * method with doZoomX which accepts pixel coordinates. This function redraws
1035 * @param {Number} minDate The minimum date that should be visible.
1036 * @param {Number} maxDate The maximum date that should be visible.
1039 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1040 this.dateWindow_
= [minDate
, maxDate
];
1041 this.drawGraph_(this.rawData_
);
1042 if (this.attr_("zoomCallback")) {
1043 var yRange
= this.yAxisRange();
1044 this.attr_("zoomCallback")(minDate
, maxDate
, yRange
[0], yRange
[1]);
1049 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1050 * the canvas. The exact zoom window may be slightly larger if there are no
1051 * data points near lowY or highY. Don't confuse this function with
1052 * doZoomYValues, which accepts parameters that match the raw data. This
1053 * function redraws the graph.
1055 * @param {Number} lowY The topmost pixel value that should be visible.
1056 * @param {Number} highY The lowest pixel value that should be visible.
1059 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1060 // Find the highest and lowest values in pixel range.
1061 var r
= this.toDataCoords(null, lowY
);
1062 var maxValue
= r
[1];
1063 r
= this.toDataCoords(null, highY
);
1064 var minValue
= r
[1];
1066 this.doZoomYValues_(minValue
, maxValue
);
1070 * Zoom to something containing [minValue, maxValue] values. Don't confuse this
1071 * method with doZoomY which accepts pixel coordinates. This function redraws
1074 * @param {Number} minValue The minimum Value that should be visible.
1075 * @param {Number} maxValue The maximum value that should be visible.
1078 Dygraph
.prototype.doZoomYValues_
= function(minValue
, maxValue
) {
1079 this.valueWindow_
= [minValue
, maxValue
];
1080 this.drawGraph_(this.rawData_
);
1081 if (this.attr_("zoomCallback")) {
1082 var xRange
= this.xAxisRange();
1083 this.attr_("zoomCallback")(xRange
[0], xRange
[1], minValue
, maxValue
);
1088 * Reset the zoom to the original view coordinates. This is the same as
1089 * double-clicking on the graph.
1093 Dygraph
.prototype.doUnzoom_
= function() {
1095 if (this.dateWindow_
!= null) {
1097 this.dateWindow_
= null;
1099 if (this.valueWindow_
!= null) {
1101 this.valueWindow_
= this.valueRange_
;
1105 // Putting the drawing operation before the callback because it resets
1107 this.drawGraph_(this.rawData_
);
1108 if (this.attr_("zoomCallback")) {
1109 var minDate
= this.rawData_
[0][0];
1110 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1111 var minValue
= this.yAxisRange()[0];
1112 var maxValue
= this.yAxisRange()[1];
1113 this.attr_("zoomCallback")(minDate
, maxDate
, minValue
, maxValue
);
1119 * When the mouse moves in the canvas, display information about a nearby data
1120 * point and draw dots over those points in the data series. This function
1121 * takes care of cleanup of previously-drawn dots.
1122 * @param {Object} event The mousemove event from the browser.
1125 Dygraph
.prototype.mouseMove_
= function(event
) {
1126 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1127 var points
= this.layout_
.points
;
1132 // Loop through all the points and find the date nearest to our current
1134 var minDist
= 1e+100;
1136 for (var i
= 0; i
< points
.length
; i
++) {
1137 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
1138 if (dist
> minDist
) continue;
1142 if (idx
>= 0) lastx
= points
[idx
].xval
;
1143 // Check that you can really highlight the last day's data
1144 if (canvasx
> points
[points
.length
-1].canvasx
)
1145 lastx
= points
[points
.length
-1].xval
;
1147 // Extract the points we've selected
1148 this.selPoints_
= [];
1149 var l
= points
.length
;
1150 if (!this.attr_("stackedGraph")) {
1151 for (var i
= 0; i
< l
; i
++) {
1152 if (points
[i
].xval
== lastx
) {
1153 this.selPoints_
.push(points
[i
]);
1157 // Need to 'unstack' points starting from the bottom
1158 var cumulative_sum
= 0;
1159 for (var i
= l
- 1; i
>= 0; i
--) {
1160 if (points
[i
].xval
== lastx
) {
1161 var p
= {}; // Clone the point since we modify it
1162 for (var k
in points
[i
]) {
1163 p
[k
] = points
[i
][k
];
1165 p
.yval
-= cumulative_sum
;
1166 cumulative_sum
+= p
.yval
;
1167 this.selPoints_
.push(p
);
1170 this.selPoints_
.reverse();
1173 if (this.attr_("highlightCallback")) {
1174 var px
= this.lastx_
;
1175 if (px
!== null && lastx
!= px
) {
1176 // only fire if the selected point has changed.
1177 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1181 // Save last x position for callbacks.
1182 this.lastx_
= lastx
;
1184 this.updateSelection_();
1188 * Draw dots over the selectied points in the data series. This function
1189 * takes care of cleanup of previously-drawn dots.
1192 Dygraph
.prototype.updateSelection_
= function() {
1193 // Clear the previously drawn vertical, if there is one
1194 var ctx
= this.canvas_
.getContext("2d");
1195 if (this.previousVerticalX_
>= 0) {
1196 // Determine the maximum highlight circle size.
1197 var maxCircleSize
= 0;
1198 var labels
= this.attr_('labels');
1199 for (var i
= 1; i
< labels
.length
; i
++) {
1200 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1201 if (r
> maxCircleSize
) maxCircleSize
= r
;
1203 var px
= this.previousVerticalX_
;
1204 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1205 2 * maxCircleSize
+ 2, this.height_
);
1208 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1210 if (this.selPoints_
.length
> 0) {
1211 var canvasx
= this.selPoints_
[0].canvasx
;
1213 // Set the status message to indicate the selected point(s)
1214 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1215 var fmtFunc
= this.attr_('yValueFormatter');
1216 var clen
= this.colors_
.length
;
1218 if (this.attr_('showLabelsOnHighlight')) {
1219 // Set the status message to indicate the selected point(s)
1220 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1221 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1222 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1223 if (this.attr_("labelsSeparateLines")) {
1226 var point
= this.selPoints_
[i
];
1227 var c
= new RGBColor(this.colors_
[i
%clen
]);
1228 var yval
= fmtFunc(point
.yval
);
1229 replace
+= " <b><font color='" + c
.toHex() + "'>"
1230 + point
.name
+ "</font></b>:"
1234 this.attr_("labelsDiv").innerHTML
= replace
;
1237 // Draw colored circles over the center of each selected point
1239 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1240 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1242 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1244 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1245 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1246 0, 2 * Math
.PI
, false);
1251 this.previousVerticalX_
= canvasx
;
1256 * Set manually set selected dots, and display information about them
1257 * @param int row number that should by highlighted
1258 * false value clears the selection
1261 Dygraph
.prototype.setSelection
= function(row
) {
1262 // Extract the points we've selected
1263 this.selPoints_
= [];
1266 if (row
!== false) {
1267 row
= row
-this.boundaryIds_
[0][0];
1270 if (row
!== false && row
>= 0) {
1271 for (var i
in this.layout_
.datasets
) {
1272 if (row
< this.layout_
.datasets
[i
].length
) {
1273 var point
= this.layout_
.points
[pos
+row
];
1275 if (this.attr_("stackedGraph")) {
1276 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1279 this.selPoints_
.push(point
);
1281 pos
+= this.layout_
.datasets
[i
].length
;
1285 if (this.selPoints_
.length
) {
1286 this.lastx_
= this.selPoints_
[0].xval
;
1287 this.updateSelection_();
1290 this.clearSelection();
1296 * The mouse has left the canvas. Clear out whatever artifacts remain
1297 * @param {Object} event the mouseout event from the browser.
1300 Dygraph
.prototype.mouseOut_
= function(event
) {
1301 if (this.attr_("unhighlightCallback")) {
1302 this.attr_("unhighlightCallback")(event
);
1305 if (this.attr_("hideOverlayOnMouseOut")) {
1306 this.clearSelection();
1311 * Remove all selection from the canvas
1314 Dygraph
.prototype.clearSelection
= function() {
1315 // Get rid of the overlay data
1316 var ctx
= this.canvas_
.getContext("2d");
1317 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1318 this.attr_("labelsDiv").innerHTML
= "";
1319 this.selPoints_
= [];
1324 * Returns the number of the currently selected row
1325 * @return int row number, of -1 if nothing is selected
1328 Dygraph
.prototype.getSelection
= function() {
1329 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1333 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1334 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1335 return row
+ this.boundaryIds_
[0][0];
1341 Dygraph
.zeropad
= function(x
) {
1342 if (x
< 10) return "0" + x
; else return "" + x
;
1346 * Return a string version of the hours, minutes and seconds portion of a date.
1347 * @param {Number} date The JavaScript date (ms since epoch)
1348 * @return {String} A time of the form "HH:MM:SS"
1351 Dygraph
.hmsString_
= function(date
) {
1352 var zeropad
= Dygraph
.zeropad
;
1353 var d
= new Date(date
);
1354 if (d
.getSeconds()) {
1355 return zeropad(d
.getHours()) + ":" +
1356 zeropad(d
.getMinutes()) + ":" +
1357 zeropad(d
.getSeconds());
1359 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1364 * Convert a JS date to a string appropriate to display on an axis that
1365 * is displaying values at the stated granularity.
1366 * @param {Date} date The date to format
1367 * @param {Number} granularity One of the Dygraph granularity constants
1368 * @return {String} The formatted date
1371 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1372 if (granularity
>= Dygraph
.MONTHLY
) {
1373 return date
.strftime('%b %y');
1375 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1376 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1377 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1379 return Dygraph
.hmsString_(date
.getTime());
1385 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1386 * @param {Number} date The JavaScript date (ms since epoch)
1387 * @return {String} A date of the form "YYYY/MM/DD"
1390 Dygraph
.dateString_
= function(date
, self
) {
1391 var zeropad
= Dygraph
.zeropad
;
1392 var d
= new Date(date
);
1395 var year
= "" + d
.getFullYear();
1396 // Get a 0 padded month string
1397 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1398 // Get a 0 padded day string
1399 var day
= zeropad(d
.getDate());
1402 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1403 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1405 return year
+ "/" + month + "/" + day
+ ret
;
1409 * Round a number to the specified number of digits past the decimal point.
1410 * @param {Number} num The number to round
1411 * @param {Number} places The number of decimals to which to round
1412 * @return {Number} The rounded number
1415 Dygraph
.round_
= function(num
, places
) {
1416 var shift
= Math
.pow(10, places
);
1417 return Math
.round(num
* shift
)/shift
;
1421 * Fires when there's data available to be graphed.
1422 * @param {String} data Raw CSV data to be plotted
1425 Dygraph
.prototype.loadedEvent_
= function(data
) {
1426 this.rawData_
= this.parseCSV_(data
);
1427 this.drawGraph_(this.rawData_
);
1430 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1431 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1432 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1435 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1438 Dygraph
.prototype.addXTicks_
= function() {
1439 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1440 var startDate
, endDate
;
1441 if (this.dateWindow_
) {
1442 startDate
= this.dateWindow_
[0];
1443 endDate
= this.dateWindow_
[1];
1445 startDate
= this.rawData_
[0][0];
1446 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1449 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1450 this.layout_
.updateOptions({xTicks
: xTicks
});
1453 // Time granularity enumeration
1454 Dygraph
.SECONDLY
= 0;
1455 Dygraph
.TWO_SECONDLY
= 1;
1456 Dygraph
.FIVE_SECONDLY
= 2;
1457 Dygraph
.TEN_SECONDLY
= 3;
1458 Dygraph
.THIRTY_SECONDLY
= 4;
1459 Dygraph
.MINUTELY
= 5;
1460 Dygraph
.TWO_MINUTELY
= 6;
1461 Dygraph
.FIVE_MINUTELY
= 7;
1462 Dygraph
.TEN_MINUTELY
= 8;
1463 Dygraph
.THIRTY_MINUTELY
= 9;
1464 Dygraph
.HOURLY
= 10;
1465 Dygraph
.TWO_HOURLY
= 11;
1466 Dygraph
.SIX_HOURLY
= 12;
1468 Dygraph
.WEEKLY
= 14;
1469 Dygraph
.MONTHLY
= 15;
1470 Dygraph
.QUARTERLY
= 16;
1471 Dygraph
.BIANNUAL
= 17;
1472 Dygraph
.ANNUAL
= 18;
1473 Dygraph
.DECADAL
= 19;
1474 Dygraph
.NUM_GRANULARITIES
= 20;
1476 Dygraph
.SHORT_SPACINGS
= [];
1477 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1478 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1479 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1480 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1481 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1482 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1483 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1484 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1485 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1486 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1487 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1488 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1489 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1490 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1491 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1495 // If we used this time granularity, how many ticks would there be?
1496 // This is only an approximation, but it's generally good enough.
1498 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1499 if (granularity
< Dygraph
.MONTHLY
) {
1500 // Generate one tick mark for every fixed interval of time.
1501 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1502 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1504 var year_mod
= 1; // e.g. to only print one point every 10 years.
1505 var num_months
= 12;
1506 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1507 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1508 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1509 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1511 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1512 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1513 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1519 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1520 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1522 // Returns an array containing {v: millis, label: label} dictionaries.
1524 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1525 var formatter
= this.attr_("xAxisLabelFormatter");
1527 if (granularity
< Dygraph
.MONTHLY
) {
1528 // Generate one tick mark for every fixed interval of time.
1529 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1530 var format
= '%d%b'; // e.g. "1Jan"
1532 // Find a time less than start_time which occurs on a "nice" time boundary
1533 // for this granularity.
1534 var g
= spacing
/ 1000;
1535 var d
= new Date(start_time
);
1536 if (g
<= 60) { // seconds
1537 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1541 if (g
<= 60) { // minutes
1542 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1547 if (g
<= 24) { // days
1548 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1553 if (g
== 7) { // one week
1554 d
.setDate(d
.getDate() - d
.getDay());
1559 start_time
= d
.getTime();
1561 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1562 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1565 // Display a tick mark on the first of a set of months of each year.
1566 // Years get a tick mark iff y % year_mod == 0. This is useful for
1567 // displaying a tick mark once every 10 years, say, on long time scales.
1569 var year_mod
= 1; // e.g. to only print one point every 10 years.
1571 if (granularity
== Dygraph
.MONTHLY
) {
1572 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1573 } else if (granularity
== Dygraph
.QUARTERLY
) {
1574 months
= [ 0, 3, 6, 9 ];
1575 } else if (granularity
== Dygraph
.BIANNUAL
) {
1577 } else if (granularity
== Dygraph
.ANNUAL
) {
1579 } else if (granularity
== Dygraph
.DECADAL
) {
1584 var start_year
= new Date(start_time
).getFullYear();
1585 var end_year
= new Date(end_time
).getFullYear();
1586 var zeropad
= Dygraph
.zeropad
;
1587 for (var i
= start_year
; i
<= end_year
; i
++) {
1588 if (i
% year_mod
!= 0) continue;
1589 for (var j
= 0; j
< months
.length
; j
++) {
1590 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1591 var t
= Date
.parse(date_str
);
1592 if (t
< start_time
|| t
> end_time
) continue;
1593 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1603 * Add ticks to the x-axis based on a date range.
1604 * @param {Number} startDate Start of the date window (millis since epoch)
1605 * @param {Number} endDate End of the date window (millis since epoch)
1606 * @return {Array.<Object>} Array of {label, value} tuples.
1609 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1611 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1612 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1613 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1620 return self
.GetXAxis(startDate
, endDate
, chosen
);
1622 // TODO(danvk): signal error.
1627 * Add ticks when the x axis has numbers on it (instead of dates)
1628 * @param {Number} startDate Start of the date window (millis since epoch)
1629 * @param {Number} endDate End of the date window (millis since epoch)
1630 * @return {Array.<Object>} Array of {label, value} tuples.
1633 Dygraph
.numericTicks
= function(minV
, maxV
, self
) {
1635 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1636 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1637 // The first spacing greater than pixelsPerYLabel is what we use.
1638 // TODO(danvk): version that works on a log scale.
1639 if (self
.attr_("labelsKMG2")) {
1640 var mults
= [1, 2, 4, 8];
1642 var mults
= [1, 2, 5];
1644 var scale
, low_val
, high_val
, nTicks
;
1645 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1646 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1647 for (var i
= -10; i
< 50; i
++) {
1648 if (self
.attr_("labelsKMG2")) {
1649 var base_scale
= Math
.pow(16, i
);
1651 var base_scale
= Math
.pow(10, i
);
1653 for (var j
= 0; j
< mults
.length
; j
++) {
1654 scale
= base_scale
* mults
[j
];
1655 low_val
= Math
.floor(minV
/ scale
) * scale
;
1656 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1657 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1658 var spacing
= self
.height_
/ nTicks
;
1659 // wish I could break out of both loops at once...
1660 if (spacing
> pixelsPerTick
) break;
1662 if (spacing
> pixelsPerTick
) break;
1665 // Construct labels for the ticks
1669 if (self
.attr_("labelsKMB")) {
1671 k_labels
= [ "K", "M", "B", "T" ];
1673 if (self
.attr_("labelsKMG2")) {
1674 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1676 k_labels
= [ "k", "M", "G", "T" ];
1679 // Allow reverse y-axis if it's explicitly requested.
1680 if (low_val
> high_val
) scale
*= -1;
1682 for (var i
= 0; i
< nTicks
; i
++) {
1683 var tickV
= low_val
+ i
* scale
;
1684 var absTickV
= Math
.abs(tickV
);
1685 var label
= Dygraph
.round_(tickV
, 2);
1686 if (k_labels
.length
) {
1687 // Round up to an appropriate unit.
1689 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1690 if (absTickV
>= n
) {
1691 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1696 ticks
.push( {label
: label
, v
: tickV
} );
1702 * Adds appropriate ticks on the y-axis
1703 * @param {Number} minY The minimum Y value in the data set
1704 * @param {Number} maxY The maximum Y value in the data set
1707 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1708 // Set the number of ticks so that the labels are human-friendly.
1709 // TODO(danvk): make this an attribute as well.
1710 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1711 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1715 // Computes the range of the data series (including confidence intervals).
1716 // series is either [ [x1, y1], [x2, y2], ... ] or
1717 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1718 // Returns [low, high]
1719 Dygraph
.prototype.extremeValues_
= function(series
) {
1720 var minY
= null, maxY
= null;
1722 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1724 // With custom bars, maxY is the max of the high values.
1725 for (var j
= 0; j
< series
.length
; j
++) {
1726 var y
= series
[j
][1][0];
1728 var low
= y
- series
[j
][1][1];
1729 var high
= y
+ series
[j
][1][2];
1730 if (low
> y
) low
= y
; // this can happen with custom bars,
1731 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1732 if (maxY
== null || high
> maxY
) {
1735 if (minY
== null || low
< minY
) {
1740 for (var j
= 0; j
< series
.length
; j
++) {
1741 var y
= series
[j
][1];
1742 if (y
=== null || isNaN(y
)) continue;
1743 if (maxY
== null || y
> maxY
) {
1746 if (minY
== null || y
< minY
) {
1752 return [minY
, maxY
];
1756 * Update the graph with new data. Data is in the format
1757 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1758 * or, if errorBars=true,
1759 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1760 * @param {Array.<Object>} data The data (see above)
1763 Dygraph
.prototype.drawGraph_
= function(data
) {
1764 // This is used to set the second parameter to drawCallback, below.
1765 var is_initial_draw
= this.is_initial_draw_
;
1766 this.is_initial_draw_
= false;
1768 var minY
= null, maxY
= null;
1769 this.layout_
.removeAllDatasets();
1771 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1773 // Loop over the fields (series). Go from the last to the first,
1774 // because if they're stacked that's how we accumulate the values.
1776 var cumulative_y
= []; // For stacked series.
1779 // Loop over all fields and create datasets
1780 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1781 if (!this.visibility()[i
- 1]) continue;
1783 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1786 for (var j
= 0; j
< data
.length
; j
++) {
1787 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1788 var date
= data
[j
][0];
1789 series
.push([date
, data
[j
][i
]]);
1792 series
= this.rollingAverage(series
, this.rollPeriod_
);
1794 // Prune down to the desired range, if necessary (for zooming)
1795 // Because there can be lines going to points outside of the visible area,
1796 // we actually prune to visible points, plus one on either side.
1797 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1798 if (this.dateWindow_
) {
1799 var low
= this.dateWindow_
[0];
1800 var high
= this.dateWindow_
[1];
1802 // TODO(danvk): do binary search instead of linear search.
1803 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1804 var firstIdx
= null, lastIdx
= null;
1805 for (var k
= 0; k
< series
.length
; k
++) {
1806 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1809 if (series
[k
][0] <= high
) {
1813 if (firstIdx
=== null) firstIdx
= 0;
1814 if (firstIdx
> 0) firstIdx
--;
1815 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1816 if (lastIdx
< series
.length
- 1) lastIdx
++;
1817 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1818 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1819 pruned
.push(series
[k
]);
1823 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1826 var extremes
= this.extremeValues_(series
);
1827 var thisMinY
= extremes
[0];
1828 var thisMaxY
= extremes
[1];
1829 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1830 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1833 for (var j
=0; j
<series
.length
; j
++) {
1834 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1837 } else if (this.attr_("stackedGraph")) {
1838 var l
= series
.length
;
1840 for (var j
= 0; j
< l
; j
++) {
1841 // If one data set has a NaN, let all subsequent stacked
1842 // sets inherit the NaN -- only start at 0 for the first set.
1843 var x
= series
[j
][0];
1844 if (cumulative_y
[x
] === undefined
)
1845 cumulative_y
[x
] = 0;
1847 actual_y
= series
[j
][1];
1848 cumulative_y
[x
] += actual_y
;
1850 series
[j
] = [x
, cumulative_y
[x
]]
1852 if (!maxY
|| cumulative_y
[x
] > maxY
)
1853 maxY
= cumulative_y
[x
];
1857 datasets
[i
] = series
;
1860 for (var i
= 1; i
< datasets
.length
; i
++) {
1861 if (!this.visibility()[i
- 1]) continue;
1862 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1865 // Use some heuristics to come up with a good maxY value, unless it's been
1866 // set explicitly by the developer or end-user (via drag)
1867 if (this.valueWindow_
!= null) {
1868 this.addYTicks_(this.valueWindow_
[0], this.valueWindow_
[1]);
1869 this.displayedYRange_
= this.valueWindow_
;
1871 // This affects the calculation of span, below.
1872 if (this.attr_("includeZero") && minY
> 0) {
1876 // Add some padding and round up to an integer to be human-friendly.
1877 var span
= maxY
- minY
;
1878 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1879 if (span
== 0) { span
= maxY
; }
1880 var maxAxisY
= maxY
+ 0.1 * span
;
1881 var minAxisY
= minY
- 0.1 * span
;
1883 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1884 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1885 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1887 if (this.attr_("includeZero")) {
1888 if (maxY
< 0) maxAxisY
= 0;
1889 if (minY
> 0) minAxisY
= 0;
1892 this.addYTicks_(minAxisY
, maxAxisY
);
1893 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1898 // Tell PlotKit to use this new data and render itself
1899 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1900 this.layout_
.evaluateWithError();
1901 this.plotter_
.clear();
1902 this.plotter_
.render();
1903 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1904 this.canvas_
.height
);
1906 if (this.attr_("drawCallback") !== null) {
1907 this.attr_("drawCallback")(this, is_initial_draw
);
1912 * Calculates the rolling average of a data set.
1913 * If originalData is [label, val], rolls the average of those.
1914 * If originalData is [label, [, it's interpreted as [value, stddev]
1915 * and the roll is returned in the same form, with appropriately reduced
1916 * stddev for each value.
1917 * Note that this is where fractional input (i.e. '5/10') is converted into
1919 * @param {Array} originalData The data in the appropriate format (see above)
1920 * @param {Number} rollPeriod The number of days over which to average the data
1922 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1923 if (originalData
.length
< 2)
1924 return originalData
;
1925 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1926 var rollingData
= [];
1927 var sigma
= this.attr_("sigma");
1929 if (this.fractions_
) {
1931 var den
= 0; // numerator/denominator
1933 for (var i
= 0; i
< originalData
.length
; i
++) {
1934 num
+= originalData
[i
][1][0];
1935 den
+= originalData
[i
][1][1];
1936 if (i
- rollPeriod
>= 0) {
1937 num
-= originalData
[i
- rollPeriod
][1][0];
1938 den
-= originalData
[i
- rollPeriod
][1][1];
1941 var date
= originalData
[i
][0];
1942 var value
= den
? num
/ den
: 0.0;
1943 if (this.attr_("errorBars")) {
1944 if (this.wilsonInterval_
) {
1945 // For more details on this confidence interval, see:
1946 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1948 var p
= value
< 0 ? 0 : value
, n
= den
;
1949 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1950 var denom
= 1 + sigma
* sigma
/ den
;
1951 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1952 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1953 rollingData
[i
] = [date
,
1954 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1956 rollingData
[i
] = [date
, [0, 0, 0]];
1959 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1960 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1963 rollingData
[i
] = [date
, mult
* value
];
1966 } else if (this.attr_("customBars")) {
1971 for (var i
= 0; i
< originalData
.length
; i
++) {
1972 var data
= originalData
[i
][1];
1974 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1976 if (y
!= null && !isNaN(y
)) {
1982 if (i
- rollPeriod
>= 0) {
1983 var prev
= originalData
[i
- rollPeriod
];
1984 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1991 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1992 1.0 * (mid
- low
) / count
,
1993 1.0 * (high
- mid
) / count
]];
1996 // Calculate the rolling average for the first rollPeriod - 1 points where
1997 // there is not enough data to roll over the full number of days
1998 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1999 if (!this.attr_("errorBars")){
2000 if (rollPeriod
== 1) {
2001 return originalData
;
2004 for (var i
= 0; i
< originalData
.length
; i
++) {
2007 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2008 var y
= originalData
[j
][1];
2009 if (y
== null || isNaN(y
)) continue;
2011 sum
+= originalData
[j
][1];
2014 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2016 rollingData
[i
] = [originalData
[i
][0], null];
2021 for (var i
= 0; i
< originalData
.length
; i
++) {
2025 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2026 var y
= originalData
[j
][1][0];
2027 if (y
== null || isNaN(y
)) continue;
2029 sum
+= originalData
[j
][1][0];
2030 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2033 var stddev
= Math
.sqrt(variance
) / num_ok
;
2034 rollingData
[i
] = [originalData
[i
][0],
2035 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2037 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2047 * Parses a date, returning the number of milliseconds since epoch. This can be
2048 * passed in as an xValueParser in the Dygraph constructor.
2049 * TODO(danvk): enumerate formats that this understands.
2050 * @param {String} A date in YYYYMMDD format.
2051 * @return {Number} Milliseconds since epoch.
2054 Dygraph
.dateParser
= function(dateStr
, self
) {
2057 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2058 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2059 while (dateStrSlashed
.search("-") != -1) {
2060 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2062 d
= Date
.parse(dateStrSlashed
);
2063 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2064 // TODO(danvk): remove support for this format. It's confusing.
2065 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2066 + "/" + dateStr
.substr(6,2);
2067 d
= Date
.parse(dateStrSlashed
);
2069 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2070 // "2009/07/12 12:34:56"
2071 d
= Date
.parse(dateStr
);
2074 if (!d
|| isNaN(d
)) {
2075 self
.error("Couldn't parse " + dateStr
+ " as a date");
2081 * Detects the type of the str (date or numeric) and sets the various
2082 * formatting attributes in this.attrs_ based on this type.
2083 * @param {String} str An x value.
2086 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2088 if (str
.indexOf('-') >= 0 ||
2089 str
.indexOf('/') >= 0 ||
2090 isNaN(parseFloat(str
))) {
2092 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2093 // TODO(danvk): remove support for this format.
2098 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2099 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2100 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2101 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2103 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2104 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2105 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2106 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2111 * Parses a string in a special csv format. We expect a csv file where each
2112 * line is a date point, and the first field in each line is the date string.
2113 * We also expect that all remaining fields represent series.
2114 * if the errorBars attribute is set, then interpret the fields as:
2115 * date, series1, stddev1, series2, stddev2, ...
2116 * @param {Array.<Object>} data See above.
2119 * @return Array.<Object> An array with one entry for each row. These entries
2120 * are an array of cells in that row. The first entry is the parsed x-value for
2121 * the row. The second, third, etc. are the y-values. These can take on one of
2122 * three forms, depending on the CSV and constructor parameters:
2124 * 2. [ value, stddev ]
2125 * 3. [ low value, center value, high value ]
2127 Dygraph
.prototype.parseCSV_
= function(data
) {
2129 var lines
= data
.split("\n");
2131 // Use the default delimiter or fall back to a tab if that makes sense.
2132 var delim
= this.attr_('delimiter');
2133 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2138 if (this.labelsFromCSV_
) {
2140 this.attrs_
.labels
= lines
[0].split(delim
);
2143 // Parse the x as a float or return null if it's not a number.
2144 var parseFloatOrNull
= function(x
) {
2145 var val
= parseFloat(x
);
2146 return isNaN(val
) ? null : val
;
2150 var defaultParserSet
= false; // attempt to auto-detect x value type
2151 var expectedCols
= this.attr_("labels").length
;
2152 var outOfOrder
= false;
2153 for (var i
= start
; i
< lines
.length
; i
++) {
2154 var line
= lines
[i
];
2155 if (line
.length
== 0) continue; // skip blank lines
2156 if (line
[0] == '#') continue; // skip comment lines
2157 var inFields
= line
.split(delim
);
2158 if (inFields
.length
< 2) continue;
2161 if (!defaultParserSet
) {
2162 this.detectTypeFromString_(inFields
[0]);
2163 xParser
= this.attr_("xValueParser");
2164 defaultParserSet
= true;
2166 fields
[0] = xParser(inFields
[0], this);
2168 // If fractions are expected, parse the numbers as "A/B
"
2169 if (this.fractions_) {
2170 for (var j = 1; j < inFields.length; j++) {
2171 // TODO(danvk): figure out an appropriate way to flag parse errors.
2172 var vals = inFields[j].split("/");
2173 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2175 } else if (this.attr_("errorBars
")) {
2176 // If there are error bars, values are (value, stddev) pairs
2177 for (var j = 1; j < inFields.length; j += 2)
2178 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2179 parseFloatOrNull(inFields[j + 1])];
2180 } else if (this.attr_("customBars
")) {
2181 // Bars are a low;center;high tuple
2182 for (var j = 1; j < inFields.length; j++) {
2183 var vals = inFields[j].split(";");
2184 fields[j] = [ parseFloatOrNull(vals[0]),
2185 parseFloatOrNull(vals[1]),
2186 parseFloatOrNull(vals[2]) ];
2189 // Values are just numbers
2190 for (var j = 1; j < inFields.length; j++) {
2191 fields[j] = parseFloatOrNull(inFields[j]);
2194 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2199 if (fields.length != expectedCols) {
2200 this.error("Number of columns
in line
" + i + " (" + fields.length +
2201 ") does not agree
with number of
labels (" + expectedCols +
2207 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2208 ret.sort(function(a,b) { return a[0] - b[0] });
2215 * The user has provided their data as a pre-packaged JS array. If the x values
2216 * are numeric, this is the same as dygraphs' internal format. If the x values
2217 * are dates, we need to convert them from Date objects to ms since epoch.
2218 * @param {Array.<Object>} data
2219 * @return {Array.<Object>} data with numeric x values.
2221 Dygraph.prototype.parseArray_ = function(data) {
2222 // Peek at the first x value to see if it's numeric.
2223 if (data.length == 0) {
2224 this.error("Can
't plot empty data set");
2227 if (data[0].length == 0) {
2228 this.error("Data set cannot contain an empty row");
2232 if (this.attr_("labels") == null) {
2233 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2234 "in the options parameter");
2235 this.attrs_.labels = [ "X" ];
2236 for (var i = 1; i < data[0].length; i++) {
2237 this.attrs_.labels.push("Y" + i);
2241 if (Dygraph.isDateLike(data[0][0])) {
2242 // Some intelligent defaults for a date x-axis.
2243 this.attrs_.xValueFormatter = Dygraph.dateString_;
2244 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2245 this.attrs_.xTicker = Dygraph.dateTicker;
2247 // Assume they're all dates
.
2248 var parsedData
= Dygraph
.clone(data
);
2249 for (var i
= 0; i
< data
.length
; i
++) {
2250 if (parsedData
[i
].length
== 0) {
2251 this.error("Row " + (1 + i
) + " of data is empty");
2254 if (parsedData
[i
][0] == null
2255 || typeof(parsedData
[i
][0].getTime
) != 'function'
2256 || isNaN(parsedData
[i
][0].getTime())) {
2257 this.error("x value in row " + (1 + i
) + " is not a Date");
2260 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2264 // Some intelligent defaults for a numeric x-axis.
2265 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2266 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2272 * Parses a DataTable object from gviz.
2273 * The data is expected to have a first column that is either a date or a
2274 * number. All subsequent columns must be numbers. If there is a clear mismatch
2275 * between this.xValueParser_ and the type of the first column, it will be
2276 * fixed. Fills out rawData_.
2277 * @param {Array.<Object>} data See above.
2280 Dygraph
.prototype.parseDataTable_
= function(data
) {
2281 var cols
= data
.getNumberOfColumns();
2282 var rows
= data
.getNumberOfRows();
2284 var indepType
= data
.getColumnType(0);
2285 if (indepType
== 'date' || indepType
== 'datetime') {
2286 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2287 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2288 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2289 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2290 } else if (indepType
== 'number') {
2291 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2292 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2293 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2294 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2296 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2297 "column 1 of DataTable input (Got '" + indepType
+ "')");
2301 // Array of the column indices which contain data (and not annotations).
2303 var annotationCols
= {}; // data index -> [annotation cols]
2304 var hasAnnotations
= false;
2305 for (var i
= 1; i
< cols
; i
++) {
2306 var type
= data
.getColumnType(i
);
2307 if (type
== 'number') {
2309 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2310 // This is OK -- it's an annotation column.
2311 var dataIdx
= colIdx
[colIdx
.length
- 1];
2312 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2313 annotationCols
[dataIdx
] = [i
];
2315 annotationCols
[dataIdx
].push(i
);
2317 hasAnnotations
= true;
2319 this.error("Only 'number' is supported as a dependent type with Gviz." +
2320 " 'string' is only supported if displayAnnotations is true");
2324 // Read column labels
2325 // TODO(danvk): add support back for errorBars
2326 var labels
= [data
.getColumnLabel(0)];
2327 for (var i
= 0; i
< colIdx
.length
; i
++) {
2328 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2329 if (this.attr_("errorBars")) i
+= 1;
2331 this.attrs_
.labels
= labels
;
2332 cols
= labels
.length
;
2335 var outOfOrder
= false;
2336 var annotations
= [];
2337 for (var i
= 0; i
< rows
; i
++) {
2339 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2340 data
.getValue(i
, 0) === null) {
2341 this.warn("Ignoring row " + i
+
2342 " of DataTable because of undefined or null first column.");
2346 if (indepType
== 'date' || indepType
== 'datetime') {
2347 row
.push(data
.getValue(i
, 0).getTime());
2349 row
.push(data
.getValue(i
, 0));
2351 if (!this.attr_("errorBars")) {
2352 for (var j
= 0; j
< colIdx
.length
; j
++) {
2353 var col
= colIdx
[j
];
2354 row
.push(data
.getValue(i
, col
));
2355 if (hasAnnotations
&&
2356 annotationCols
.hasOwnProperty(col
) &&
2357 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2359 ann
.series
= data
.getColumnLabel(col
);
2361 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2363 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2364 if (k
) ann
.text
+= "\n";
2365 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2367 annotations
.push(ann
);
2371 for (var j
= 0; j
< cols
- 1; j
++) {
2372 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2375 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2382 this.warn("DataTable is out of order; order it correctly to speed loading.");
2383 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2385 this.rawData_
= ret
;
2387 if (annotations
.length
> 0) {
2388 this.setAnnotations(annotations
, true);
2392 // These functions are all based on MochiKit.
2393 Dygraph
.update
= function (self
, o
) {
2394 if (typeof(o
) != 'undefined' && o
!== null) {
2396 if (o
.hasOwnProperty(k
)) {
2404 Dygraph
.isArrayLike
= function (o
) {
2405 var typ
= typeof(o
);
2407 (typ
!= 'object' && !(typ
== 'function' &&
2408 typeof(o
.item
) == 'function')) ||
2410 typeof(o
.length
) != 'number' ||
2418 Dygraph
.isDateLike
= function (o
) {
2419 if (typeof(o
) != "object" || o
=== null ||
2420 typeof(o
.getTime
) != 'function') {
2426 Dygraph
.clone
= function(o
) {
2427 // TODO(danvk): figure out how MochiKit's version works
2429 for (var i
= 0; i
< o
.length
; i
++) {
2430 if (Dygraph
.isArrayLike(o
[i
])) {
2431 r
.push(Dygraph
.clone(o
[i
]));
2441 * Get the CSV data. If it's in a function, call that function. If it's in a
2442 * file, do an XMLHttpRequest to get it.
2445 Dygraph
.prototype.start_
= function() {
2446 if (typeof this.file_
== 'function') {
2447 // CSV string. Pretend we got it via XHR.
2448 this.loadedEvent_(this.file_());
2449 } else if (Dygraph
.isArrayLike(this.file_
)) {
2450 this.rawData_
= this.parseArray_(this.file_
);
2451 this.drawGraph_(this.rawData_
);
2452 } else if (typeof this.file_
== 'object' &&
2453 typeof this.file_
.getColumnRange
== 'function') {
2454 // must be a DataTable from gviz.
2455 this.parseDataTable_(this.file_
);
2456 this.drawGraph_(this.rawData_
);
2457 } else if (typeof this.file_
== 'string') {
2458 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2459 if (this.file_
.indexOf('\n') >= 0) {
2460 this.loadedEvent_(this.file_
);
2462 var req
= new XMLHttpRequest();
2464 req
.onreadystatechange
= function () {
2465 if (req
.readyState
== 4) {
2466 if (req
.status
== 200) {
2467 caller
.loadedEvent_(req
.responseText
);
2472 req
.open("GET", this.file_
, true);
2476 this.error("Unknown data format: " + (typeof this.file_
));
2481 * Changes various properties of the graph. These can include:
2483 * <li>file: changes the source data for the graph</li>
2484 * <li>errorBars: changes whether the data contains stddev</li>
2486 * @param {Object} attrs The new properties and values
2488 Dygraph
.prototype.updateOptions
= function(attrs
) {
2489 // TODO(danvk): this is a mess. Rethink this function.
2490 if ('rollPeriod' in attrs
) {
2491 this.rollPeriod_
= attrs
.rollPeriod
;
2493 if ('dateWindow' in attrs
) {
2494 this.dateWindow_
= attrs
.dateWindow
;
2496 if ('valueRange' in attrs
) {
2497 this.valueRange_
= attrs
.valueRange
;
2498 this.valueWindow_
= attrs
.valueRange
;
2501 // TODO(danvk): validate per-series options.
2506 // highlightCircleSize
2508 Dygraph
.update(this.user_attrs_
, attrs
);
2509 Dygraph
.update(this.renderOptions_
, attrs
);
2511 this.labelsFromCSV_
= (this.attr_("labels") == null);
2513 // TODO(danvk): this doesn't match the constructor logic
2514 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2515 if (attrs
['file']) {
2516 this.file_
= attrs
['file'];
2519 this.drawGraph_(this.rawData_
);
2524 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2525 * containing div (which has presumably changed size since the dygraph was
2526 * instantiated. If the width/height are specified, the div will be resized.
2528 * This is far more efficient than destroying and re-instantiating a
2529 * Dygraph, since it doesn't have to reparse the underlying data.
2531 * @param {Number} width Width (in pixels)
2532 * @param {Number} height Height (in pixels)
2534 Dygraph
.prototype.resize
= function(width
, height
) {
2535 if (this.resize_lock
) {
2538 this.resize_lock
= true;
2540 if ((width
=== null) != (height
=== null)) {
2541 this.warn("Dygraph.resize() should be called with zero parameters or " +
2542 "two non-NULL parameters. Pretending it was zero.");
2543 width
= height
= null;
2546 // TODO(danvk): there should be a clear() method.
2547 this.maindiv_
.innerHTML
= "";
2548 this.attrs_
.labelsDiv
= null;
2551 this.maindiv_
.style
.width
= width
+ "px";
2552 this.maindiv_
.style
.height
= height
+ "px";
2553 this.width_
= width
;
2554 this.height_
= height
;
2556 this.width_
= this.maindiv_
.offsetWidth
;
2557 this.height_
= this.maindiv_
.offsetHeight
;
2560 this.createInterface_();
2561 this.drawGraph_(this.rawData_
);
2563 this.resize_lock
= false;
2567 * Adjusts the number of days in the rolling average. Updates the graph to
2568 * reflect the new averaging period.
2569 * @param {Number} length Number of days over which to average the data.
2571 Dygraph
.prototype.adjustRoll
= function(length
) {
2572 this.rollPeriod_
= length
;
2573 this.drawGraph_(this.rawData_
);
2577 * Returns a boolean array of visibility statuses.
2579 Dygraph
.prototype.visibility
= function() {
2580 // Do lazy-initialization, so that this happens after we know the number of
2582 if (!this.attr_("visibility")) {
2583 this.attrs_
["visibility"] = [];
2585 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2586 this.attr_("visibility").push(true);
2588 return this.attr_("visibility");
2592 * Changes the visiblity of a series.
2594 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2595 var x
= this.visibility();
2596 if (num
< 0 && num
>= x
.length
) {
2597 this.warn("invalid series number in setVisibility: " + num
);
2600 this.drawGraph_(this.rawData_
);
2605 * Update the list of annotations and redraw the chart.
2607 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2608 this.annotations_
= ann
;
2609 this.layout_
.setAnnotations(this.annotations_
);
2610 if (!suppressDraw
) {
2611 this.drawGraph_(this.rawData_
);
2616 * Return the list of annotations.
2618 Dygraph
.prototype.annotations
= function() {
2619 return this.annotations_
;
2623 * Get the index of a series (column) given its name. The first column is the
2624 * x-axis, so the data series start with index 1.
2626 Dygraph
.prototype.indexFromSetName
= function(name
) {
2627 var labels
= this.attr_("labels");
2628 for (var i
= 0; i
< labels
.length
; i
++) {
2629 if (labels
[i
] == name
) return i
;
2634 Dygraph
.addAnnotationRule
= function() {
2635 if (Dygraph
.addedAnnotationCSS
) return;
2638 if (document
.styleSheets
.length
> 0) {
2639 mysheet
= document
.styleSheets
[0];
2641 var styleSheetElement
= document
.createElement("style");
2642 styleSheetElement
.type
= "text/css";
2643 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2644 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2645 if (document
.styleSheets
[i
].disabled
) continue;
2646 mysheet
= document
.styleSheets
[i
];
2650 var rule
= "border: 1px solid black; " +
2651 "background-color: white; " +
2652 "text-align: center;";
2653 if (mysheet
.insertRule
) { // Firefox
2654 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2655 } else if (mysheet
.addRule
) { // IE
2656 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2659 Dygraph
.addedAnnotationCSS
= true;
2663 * Create a new canvas element. This is more complex than a simple
2664 * document.createElement("canvas") because of IE and excanvas.
2666 Dygraph
.createCanvas
= function() {
2667 var canvas
= document
.createElement("canvas");
2669 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2671 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2679 * A wrapper around Dygraph that implements the gviz API.
2680 * @param {Object} container The DOM object the visualization should live in.
2682 Dygraph
.GVizChart
= function(container
) {
2683 this.container
= container
;
2686 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2687 this.container
.innerHTML
= '';
2688 this.date_graph
= new Dygraph(this.container
, data
, options
);
2692 * Google charts compatible setSelection
2693 * Only row selection is supported, all points in the row will be highlighted
2694 * @param {Array} array of the selected cells
2697 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2699 if (selection_array
.length
) {
2700 row
= selection_array
[0].row
;
2702 this.date_graph
.setSelection(row
);
2706 * Google charts compatible getSelection implementation
2707 * @return {Array} array of the selected cells
2710 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2713 var row
= this.date_graph
.getSelection();
2715 if (row
< 0) return selection
;
2718 for (var i
in this.date_graph
.layout_
.datasets
) {
2719 selection
.push({row
: row
, column
: col
});
2726 // Older pages may still use this name.
2727 DateGraph
= Dygraph
;