1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
93 labelsShowZeroValues
: true,
96 showLabelsOnHighlight
: true,
98 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
103 axisLabelFontSize
: 14,
106 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
110 xValueFormatter
: Dygraph
.dateString_
,
111 xValueParser
: Dygraph
.dateParser
,
112 xTicker
: Dygraph
.dateTicker
,
120 wilsonInterval
: true, // only relevant if fractions is true
124 connectSeparatedPoints
: false,
127 hideOverlayOnMouseOut
: true,
132 // Various logging levels.
138 // Used for initializing annotation CSS rules only once.
139 Dygraph
.addedAnnotationCSS
= false;
141 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
142 // Labels is no longer a constructor parameter, since it's typically set
143 // directly from the data source. It also conains a name for the x-axis,
144 // which the previous constructor form did not.
145 if (labels
!= null) {
146 var new_labels
= ["Date"];
147 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
148 Dygraph
.update(attrs
, { 'labels': new_labels
});
150 this.__init__(div
, file
, attrs
);
154 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
155 * and interaction <canvas> inside of it. See the constructor for details
157 * @param {Element} div the Element to render the graph into.
158 * @param {String | Function} file Source data
159 * @param {Object} attrs Miscellaneous other options
162 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
163 // Support two-argument constructor
164 if (attrs
== null) { attrs
= {}; }
166 // Copy the important bits into the object
167 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
170 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
171 this.previousVerticalX_
= -1;
172 this.fractions_
= attrs
.fractions
|| false;
173 this.dateWindow_
= attrs
.dateWindow
|| null;
174 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
175 this.is_initial_draw_
= true;
176 this.annotations_
= [];
178 // Clear the div. This ensure that, if multiple dygraphs are passed the same
179 // div, then only one will be drawn.
182 // If the div isn't already sized then inherit from our attrs or
183 // give it a default size.
184 if (div
.style
.width
== '') {
185 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
187 if (div
.style
.height
== '') {
188 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
190 this.width_
= parseInt(div
.style
.width
, 10);
191 this.height_
= parseInt(div
.style
.height
, 10);
192 // The div might have been specified as percent of the current window size,
193 // convert that to an appropriate number of pixels.
194 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
195 this.width_
= div
.offsetWidth
;
197 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
198 this.height_
= div
.offsetHeight
;
201 if (this.width_
== 0) {
202 this.error("dygraph has zero width. Please specify a width in pixels.");
204 if (this.height_
== 0) {
205 this.error("dygraph has zero height. Please specify a height in pixels.");
208 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
209 if (attrs
['stackedGraph']) {
210 attrs
['fillGraph'] = true;
211 // TODO(nikhilk): Add any other stackedGraph checks here.
214 // Dygraphs has many options, some of which interact with one another.
215 // To keep track of everything, we maintain two sets of options:
217 // this.user_attrs_ only options explicitly set by the user.
218 // this.attrs_ defaults, options derived from user_attrs_, data.
220 // Options are then accessed this.attr_('attr'), which first looks at
221 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
222 // defaults without overriding behavior that the user specifically asks for.
223 this.user_attrs_
= {};
224 Dygraph
.update(this.user_attrs_
, attrs
);
227 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
229 this.boundaryIds_
= [];
231 // Make a note of whether labels will be pulled from the CSV file.
232 this.labelsFromCSV_
= (this.attr_("labels") == null);
234 Dygraph
.addAnnotationRule();
236 // Create the containing DIV and other interactive elements
237 this.createInterface_();
242 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
244 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
245 this.user_attrs_
[seriesName
] != null &&
246 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
247 return this.user_attrs_
[seriesName
][name
];
248 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
249 return this.user_attrs_
[name
];
250 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
251 return this.attrs_
[name
];
257 // TODO(danvk): any way I can get the line numbers to be this.warn call?
258 Dygraph
.prototype.log
= function(severity
, message
) {
259 if (typeof(console
) != 'undefined') {
262 console
.debug('dygraphs: ' + message
);
265 console
.info('dygraphs: ' + message
);
267 case Dygraph
.WARNING
:
268 console
.warn('dygraphs: ' + message
);
271 console
.error('dygraphs: ' + message
);
276 Dygraph
.prototype.info
= function(message
) {
277 this.log(Dygraph
.INFO
, message
);
279 Dygraph
.prototype.warn
= function(message
) {
280 this.log(Dygraph
.WARNING
, message
);
282 Dygraph
.prototype.error
= function(message
) {
283 this.log(Dygraph
.ERROR
, message
);
287 * Returns the current rolling period, as set by the user or an option.
288 * @return {Number} The number of days in the rolling window
290 Dygraph
.prototype.rollPeriod
= function() {
291 return this.rollPeriod_
;
295 * Returns the currently-visible x-range. This can be affected by zooming,
296 * panning or a call to updateOptions.
297 * Returns a two-element array: [left, right].
298 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
300 Dygraph
.prototype.xAxisRange
= function() {
301 if (this.dateWindow_
) return this.dateWindow_
;
303 // The entire chart is visible.
304 var left
= this.rawData_
[0][0];
305 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
306 return [left
, right
];
310 * Returns the currently-visible y-range. This can be affected by zooming,
311 * panning or a call to updateOptions.
312 * Returns a two-element array: [bottom, top].
314 Dygraph
.prototype.yAxisRange
= function() {
315 return this.displayedYRange_
;
319 * Convert from data coordinates to canvas/div X/Y coordinates.
320 * Returns a two-element array: [X, Y]
322 Dygraph
.prototype.toDomCoords
= function(x
, y
) {
323 var ret
= [null, null];
324 var area
= this.plotter_
.area
;
326 var xRange
= this.xAxisRange();
327 ret
[0] = area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
331 var yRange
= this.yAxisRange();
332 ret
[1] = area
.y
+ (yRange
[1] - y
) / (yRange
[1] - yRange
[0]) * area
.h
;
338 // TODO(danvk): use these functions throughout dygraphs.
340 * Convert from canvas/div coords to data coordinates.
341 * Returns a two-element array: [X, Y]
343 Dygraph
.prototype.toDataCoords
= function(x
, y
) {
344 var ret
= [null, null];
345 var area
= this.plotter_
.area
;
347 var xRange
= this.xAxisRange();
348 ret
[0] = xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
352 var yRange
= this.yAxisRange();
353 ret
[1] = yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
360 * Returns the number of columns (including the independent variable).
362 Dygraph
.prototype.numColumns
= function() {
363 return this.rawData_
[0].length
;
367 * Returns the number of rows (excluding any header/label row).
369 Dygraph
.prototype.numRows
= function() {
370 return this.rawData_
.length
;
374 * Returns the value in the given row and column. If the row and column exceed
375 * the bounds on the data, returns null. Also returns null if the value is
378 Dygraph
.prototype.getValue
= function(row
, col
) {
379 if (row
< 0 || row
> this.rawData_
.length
) return null;
380 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
382 return this.rawData_
[row
][col
];
385 Dygraph
.addEvent
= function(el
, evt
, fn
) {
386 var normed_fn
= function(e
) {
387 if (!e
) var e
= window
.event
;
390 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
391 el
.addEventListener(evt
, normed_fn
, false);
393 el
.attachEvent('on' + evt
, normed_fn
);
397 Dygraph
.clipCanvas_
= function(cnv
, clip
) {
398 var ctx
= cnv
.getContext("2d");
400 ctx
.rect(clip
.left
, clip
.top
, clip
.width
, clip
.height
);
405 * Generates interface elements for the Dygraph: a containing div, a div to
406 * display the current point, and a textbox to adjust the rolling average
407 * period. Also creates the Renderer/Layout elements.
410 Dygraph
.prototype.createInterface_
= function() {
411 // Create the all-enclosing graph div
412 var enclosing
= this.maindiv_
;
414 this.graphDiv
= document
.createElement("div");
415 this.graphDiv
.style
.width
= this.width_
+ "px";
416 this.graphDiv
.style
.height
= this.height_
+ "px";
417 enclosing
.appendChild(this.graphDiv
);
421 left
: this.attr_("yAxisLabelWidth") + 2 * this.attr_("axisTickSize")
423 clip
.width
= this.width_
- clip
.left
- this.attr_("rightGap");
424 clip
.height
= this.height_
- this.attr_("axisLabelFontSize")
425 - 2 * this.attr_("axisTickSize");
426 this.clippingArea_
= clip
;
428 // Create the canvas for interactive parts of the chart.
429 this.canvas_
= Dygraph
.createCanvas();
430 this.canvas_
.style
.position
= "absolute";
431 this.canvas_
.width
= this.width_
;
432 this.canvas_
.height
= this.height_
;
433 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
434 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
436 // ... and for static parts of the chart.
437 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
439 // The interactive parts of the graph are drawn on top of the chart.
440 this.graphDiv
.appendChild(this.hidden_
);
441 this.graphDiv
.appendChild(this.canvas_
);
442 this.mouseEventElement_
= this.canvas_
;
444 // Make sure we don't overdraw.
445 Dygraph
.clipCanvas_(this.hidden_
, this.clippingArea_
);
446 Dygraph
.clipCanvas_(this.canvas_
, this.clippingArea_
);
449 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
450 dygraph
.mouseMove_(e
);
452 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
453 dygraph
.mouseOut_(e
);
456 // Create the grapher
457 // TODO(danvk): why does the Layout need its own set of options?
458 this.layoutOptions_
= { 'xOriginIsZero': false };
459 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
460 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
461 Dygraph
.update(this.layoutOptions_
, {
462 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
464 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
466 // TODO(danvk): why does the Renderer need its own set of options?
467 this.renderOptions_
= { colorScheme
: this.colors_
,
469 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
470 Dygraph
.update(this.renderOptions_
, this.attrs_
);
471 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
472 this.plotter_
= new DygraphCanvasRenderer(this,
473 this.hidden_
, this.layout_
,
474 this.renderOptions_
);
476 this.createStatusMessage_();
477 this.createRollInterface_();
478 this.createDragInterface_();
482 * Detach DOM elements in the dygraph and null out all data references.
483 * Calling this when you're done with a dygraph can dramatically reduce memory
484 * usage. See, e.g., the tests/perf.html example.
486 Dygraph
.prototype.destroy
= function() {
487 var removeRecursive
= function(node
) {
488 while (node
.hasChildNodes()) {
489 removeRecursive(node
.firstChild
);
490 node
.removeChild(node
.firstChild
);
493 removeRecursive(this.maindiv_
);
495 var nullOut
= function(obj
) {
497 if (typeof(obj
[n
]) === 'object') {
503 // These may not all be necessary, but it can't hurt...
504 nullOut(this.layout_
);
505 nullOut(this.plotter_
);
510 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
511 * this particular canvas. All Dygraph work is done on this.canvas_.
512 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
513 * @return {Object} The newly-created canvas
516 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
517 var h
= Dygraph
.createCanvas();
518 h
.style
.position
= "absolute";
519 // TODO(danvk): h should be offset from canvas. canvas needs to include
520 // some extra area to make it easier to zoom in on the far left and far
521 // right. h needs to be precisely the plot area, so that clipping occurs.
522 h
.style
.top
= canvas
.style
.top
;
523 h
.style
.left
= canvas
.style
.left
;
524 h
.width
= this.width_
;
525 h
.height
= this.height_
;
526 h
.style
.width
= this.width_
+ "px"; // for IE
527 h
.style
.height
= this.height_
+ "px"; // for IE
531 // Taken from MochiKit.Color
532 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
536 if (saturation
=== 0) {
541 var i
= Math
.floor(hue
* 6);
542 var f
= (hue
* 6) - i
;
543 var p
= value
* (1 - saturation
);
544 var q
= value
* (1 - (saturation
* f
));
545 var t
= value
* (1 - (saturation
* (1 - f
)));
547 case 1: red
= q
; green
= value
; blue
= p
; break;
548 case 2: red
= p
; green
= value
; blue
= t
; break;
549 case 3: red
= p
; green
= q
; blue
= value
; break;
550 case 4: red
= t
; green
= p
; blue
= value
; break;
551 case 5: red
= value
; green
= p
; blue
= q
; break;
552 case 6: // fall through
553 case 0: red
= value
; green
= t
; blue
= p
; break;
556 red
= Math
.floor(255 * red
+ 0.5);
557 green
= Math
.floor(255 * green
+ 0.5);
558 blue
= Math
.floor(255 * blue
+ 0.5);
559 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
564 * Generate a set of distinct colors for the data series. This is done with a
565 * color wheel. Saturation/Value are customizable, and the hue is
566 * equally-spaced around the color wheel. If a custom set of colors is
567 * specified, that is used instead.
570 Dygraph
.prototype.setColors_
= function() {
571 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
572 // away with this.renderOptions_.
573 var num
= this.attr_("labels").length
- 1;
575 var colors
= this.attr_('colors');
577 var sat
= this.attr_('colorSaturation') || 1.0;
578 var val
= this.attr_('colorValue') || 0.5;
579 var half
= Math
.ceil(num
/ 2);
580 for (var i
= 1; i
<= num
; i
++) {
581 if (!this.visibility()[i
-1]) continue;
582 // alternate colors for high contrast.
583 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
584 var hue
= (1.0 * idx
/ (1 + num
));
585 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
588 for (var i
= 0; i
< num
; i
++) {
589 if (!this.visibility()[i
]) continue;
590 var colorStr
= colors
[i
% colors
.length
];
591 this.colors_
.push(colorStr
);
595 // TODO(danvk): update this w/r
/t/ the
new options system
.
596 this.renderOptions_
.colorScheme
= this.colors_
;
597 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
598 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
599 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
603 * Return the list of colors. This is either the list of colors passed in the
604 * attributes, or the autogenerated list of rgb(r,g,b) strings.
605 * @return {Array<string>} The list of colors.
607 Dygraph
.prototype.getColors
= function() {
611 // The following functions are from quirksmode.org with a modification for Safari from
612 // http://blog.firetree.net/2005/07/04/javascript-find-position/
613 // http://www.quirksmode.org/js
/findpos
.html
614 Dygraph
.findPosX
= function(obj
) {
619 curleft
+= obj
.offsetLeft
;
620 if(!obj
.offsetParent
)
622 obj
= obj
.offsetParent
;
629 Dygraph
.findPosY
= function(obj
) {
634 curtop
+= obj
.offsetTop
;
635 if(!obj
.offsetParent
)
637 obj
= obj
.offsetParent
;
647 * Create the div that contains information on the selected point(s)
648 * This goes in the top right of the canvas, unless an external div has already
652 Dygraph
.prototype.createStatusMessage_
= function() {
653 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
654 if (userLabelsDiv
&& null != userLabelsDiv
655 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
656 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
658 if (!this.attr_("labelsDiv")) {
659 var divWidth
= this.attr_('labelsDivWidth');
661 "position": "absolute",
664 "width": divWidth
+ "px",
666 "left": (this.width_
- divWidth
- 2) + "px",
667 "background": "white",
669 "overflow": "hidden"};
670 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
671 var div
= document
.createElement("div");
672 for (var name
in messagestyle
) {
673 if (messagestyle
.hasOwnProperty(name
)) {
674 div
.style
[name
] = messagestyle
[name
];
677 this.graphDiv
.appendChild(div
);
678 this.attrs_
.labelsDiv
= div
;
683 * Create the text box to adjust the averaging period
684 * @return {Object} The newly-created text box
687 Dygraph
.prototype.createRollInterface_
= function() {
688 var display
= this.attr_('showRoller') ? "block" : "none";
689 var textAttr
= { "position": "absolute",
691 "top": (this.plotter_
.area
.h
- 25) + "px",
692 "left": (this.plotter_
.area
.x
+ 1) + "px",
695 var roller
= document
.createElement("input");
696 roller
.type
= "text";
698 roller
.value
= this.rollPeriod_
;
699 for (var name
in textAttr
) {
700 if (textAttr
.hasOwnProperty(name
)) {
701 roller
.style
[name
] = textAttr
[name
];
705 var pa
= this.graphDiv
;
706 pa
.appendChild(roller
);
708 roller
.onchange
= function() { dygraph
.adjustRoll(roller
.value
); };
712 // These functions are taken from MochiKit.Signal
713 Dygraph
.pageX
= function(e
) {
715 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
718 var b
= document
.body
;
720 (de
.scrollLeft
|| b
.scrollLeft
) -
721 (de
.clientLeft
|| 0);
725 Dygraph
.pageY
= function(e
) {
727 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
730 var b
= document
.body
;
732 (de
.scrollTop
|| b
.scrollTop
) -
738 * Set up all the mouse handlers needed to capture dragging behavior for zoom
742 Dygraph
.prototype.createDragInterface_
= function() {
745 // Tracks whether the mouse is down right now
746 var isZooming
= false;
747 var isPanning
= false;
748 var dragStartX
= null;
749 var dragStartY
= null;
753 var draggingDate
= null;
754 var dateRange
= null;
756 // Utility function to convert page-wide coordinates to canvas coords
759 var getX
= function(e
) { return Dygraph
.pageX(e
) - px
};
760 var getY
= function(e
) { return Dygraph
.pageY(e
) - py
};
762 // Draw zoom rectangles when the mouse is down and the user moves around
763 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(event
) {
765 dragEndX
= getX(event
);
766 dragEndY
= getY(event
);
768 self
.drawZoomRect_(dragStartX
, dragEndX
, prevEndX
);
770 } else if (isPanning
) {
771 dragEndX
= getX(event
);
772 dragEndY
= getY(event
);
774 // Want to have it so that:
775 // 1. draggingDate appears at dragEndX
776 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
778 self
.dateWindow_
[0] = draggingDate
- (dragEndX
/ self
.width_
) * dateRange
;
779 self
.dateWindow_
[1] = self
.dateWindow_
[0] + dateRange
;
780 self
.drawGraph_(self
.rawData_
);
784 // Track the beginning of drag events
785 Dygraph
.addEvent(this.mouseEventElement_
, 'mousedown', function(event
) {
786 px
= Dygraph
.findPosX(self
.canvas_
);
787 py
= Dygraph
.findPosY(self
.canvas_
);
788 dragStartX
= getX(event
);
789 dragStartY
= getY(event
);
791 if (event
.altKey
|| event
.shiftKey
) {
792 if (!self
.dateWindow_
) return; // have to be zoomed in to pan.
794 dateRange
= self
.dateWindow_
[1] - self
.dateWindow_
[0];
795 draggingDate
= (dragStartX
/ self
.width_
) * dateRange
+
802 // If the user releases the mouse button during a drag, but not over the
803 // canvas, then it doesn't count as a zooming action.
804 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
805 if (isZooming
|| isPanning
) {
818 // Temporarily cancel the dragging event when the mouse leaves the graph
819 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(event
) {
826 // If the mouse is released on the canvas during a drag event, then it's a
827 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
828 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseup', function(event
) {
831 dragEndX
= getX(event
);
832 dragEndY
= getY(event
);
833 var regionWidth
= Math
.abs(dragEndX
- dragStartX
);
834 var regionHeight
= Math
.abs(dragEndY
- dragStartY
);
836 if (regionWidth
< 2 && regionHeight
< 2 &&
837 self
.lastx_
!= undefined
&& self
.lastx_
!= -1) {
838 // TODO(danvk): pass along more info about the points, e.g. 'x'
839 if (self
.attr_('clickCallback') != null) {
840 self
.attr_('clickCallback')(event
, self
.lastx_
, self
.selPoints_
);
842 if (self
.attr_('pointClickCallback')) {
843 // check if the click was on a particular point.
845 var closestDistance
= 0;
846 for (var i
= 0; i
< self
.selPoints_
.length
; i
++) {
847 var p
= self
.selPoints_
[i
];
848 var distance
= Math
.pow(p
.canvasx
- dragEndX
, 2) +
849 Math
.pow(p
.canvasy
- dragEndY
, 2);
850 if (closestIdx
== -1 || distance
< closestDistance
) {
851 closestDistance
= distance
;
856 // Allow any click within two pixels of the dot.
857 var radius
= self
.attr_('highlightCircleSize') + 2;
858 if (closestDistance
<= 5 * 5) {
859 self
.attr_('pointClickCallback')(event
, self
.selPoints_
[closestIdx
]);
864 if (regionWidth
>= 10) {
865 self
.doZoom_(Math
.min(dragStartX
, dragEndX
),
866 Math
.max(dragStartX
, dragEndX
));
868 self
.canvas_
.getContext("2d").clearRect(0, 0,
870 self
.canvas_
.height
);
884 // Double-clicking zooms back out
885 Dygraph
.addEvent(this.mouseEventElement_
, 'dblclick', function(event
) {
886 if (self
.dateWindow_
== null) return;
887 self
.dateWindow_
= null;
888 self
.drawGraph_(self
.rawData_
);
889 var minDate
= self
.rawData_
[0][0];
890 var maxDate
= self
.rawData_
[self
.rawData_
.length
- 1][0];
891 if (self
.attr_("zoomCallback")) {
892 self
.attr_("zoomCallback")(minDate
, maxDate
);
898 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
899 * up any previous zoom rectangles that were drawn. This could be optimized to
900 * avoid extra redrawing, but it's tricky to avoid interactions with the status
902 * @param {Number} startX The X position where the drag started, in canvas
904 * @param {Number} endX The current X position of the drag, in canvas coords.
905 * @param {Number} prevEndX The value of endX on the previous call to this
906 * function. Used to avoid excess redrawing
909 Dygraph
.prototype.drawZoomRect_
= function(startX
, endX
, prevEndX
) {
910 var ctx
= this.canvas_
.getContext("2d");
912 // Clean up from the previous rect if necessary
914 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
915 Math
.abs(startX
- prevEndX
), this.height_
);
918 // Draw a light-grey rectangle to show the new viewing area
919 if (endX
&& startX
) {
920 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
921 ctx
.fillRect(Math
.min(startX
, endX
), 0,
922 Math
.abs(endX
- startX
), this.height_
);
927 * Zoom to something containing [lowX, highX]. These are pixel coordinates
928 * in the canvas. The exact zoom window may be slightly larger if there are no
929 * data points near lowX or highX. This function redraws the graph.
930 * @param {Number} lowX The leftmost pixel value that should be visible.
931 * @param {Number} highX The rightmost pixel value that should be visible.
934 Dygraph
.prototype.doZoom_
= function(lowX
, highX
) {
935 // Find the earliest and latest dates contained in this canvasx range.
936 var r
= this.toDataCoords(lowX
, null);
938 r
= this.toDataCoords(highX
, null);
941 this.dateWindow_
= [minDate
, maxDate
];
942 this.drawGraph_(this.rawData_
);
943 if (this.attr_("zoomCallback")) {
944 this.attr_("zoomCallback")(minDate
, maxDate
);
949 * When the mouse moves in the canvas, display information about a nearby data
950 * point and draw dots over those points in the data series. This function
951 * takes care of cleanup of previously-drawn dots.
952 * @param {Object} event The mousemove event from the browser.
955 Dygraph
.prototype.mouseMove_
= function(event
) {
956 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
957 var points
= this.layout_
.points
;
962 // Loop through all the points and find the date nearest to our current
964 var minDist
= 1e+100;
966 for (var i
= 0; i
< points
.length
; i
++) {
967 var dist
= Math
.abs(points
[i
].canvasx
- canvasx
);
968 if (dist
> minDist
) continue;
972 if (idx
>= 0) lastx
= points
[idx
].xval
;
973 // Check that you can really highlight the last day's data
974 if (canvasx
> points
[points
.length
-1].canvasx
)
975 lastx
= points
[points
.length
-1].xval
;
977 // Extract the points we've selected
978 this.selPoints_
= [];
979 var l
= points
.length
;
980 if (!this.attr_("stackedGraph")) {
981 for (var i
= 0; i
< l
; i
++) {
982 if (points
[i
].xval
== lastx
) {
983 this.selPoints_
.push(points
[i
]);
987 // Need to 'unstack' points starting from the bottom
988 var cumulative_sum
= 0;
989 for (var i
= l
- 1; i
>= 0; i
--) {
990 if (points
[i
].xval
== lastx
) {
991 var p
= {}; // Clone the point since we modify it
992 for (var k
in points
[i
]) {
995 p
.yval
-= cumulative_sum
;
996 cumulative_sum
+= p
.yval
;
997 this.selPoints_
.push(p
);
1000 this.selPoints_
.reverse();
1003 if (this.attr_("highlightCallback")) {
1004 var px
= this.lastx_
;
1005 if (px
!== null && lastx
!= px
) {
1006 // only fire if the selected point has changed.
1007 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
);
1011 // Save last x position for callbacks.
1012 this.lastx_
= lastx
;
1014 this.updateSelection_();
1018 * Draw dots over the selectied points in the data series. This function
1019 * takes care of cleanup of previously-drawn dots.
1022 Dygraph
.prototype.updateSelection_
= function() {
1023 // Clear the previously drawn vertical, if there is one
1024 var ctx
= this.canvas_
.getContext("2d");
1025 if (this.previousVerticalX_
>= 0) {
1026 // Determine the maximum highlight circle size.
1027 var maxCircleSize
= 0;
1028 var labels
= this.attr_('labels');
1029 for (var i
= 1; i
< labels
.length
; i
++) {
1030 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1031 if (r
> maxCircleSize
) maxCircleSize
= r
;
1033 var px
= this.previousVerticalX_
;
1034 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1035 2 * maxCircleSize
+ 2, this.height_
);
1038 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1040 if (this.selPoints_
.length
> 0) {
1041 var canvasx
= this.selPoints_
[0].canvasx
;
1043 // Set the status message to indicate the selected point(s)
1044 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1045 var fmtFunc
= this.attr_('yValueFormatter');
1046 var clen
= this.colors_
.length
;
1048 if (this.attr_('showLabelsOnHighlight')) {
1049 // Set the status message to indicate the selected point(s)
1050 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1051 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1052 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1053 if (this.attr_("labelsSeparateLines")) {
1056 var point
= this.selPoints_
[i
];
1057 var c
= new RGBColor(this.colors_
[i
%clen
]);
1058 var yval
= fmtFunc(point
.yval
);
1059 replace
+= " <b><font color='" + c
.toHex() + "'>"
1060 + point
.name
+ "</font></b>:"
1064 this.attr_("labelsDiv").innerHTML
= replace
;
1067 // Draw colored circles over the center of each selected point
1069 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1070 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1072 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1074 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1075 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1076 0, 2 * Math
.PI
, false);
1081 this.previousVerticalX_
= canvasx
;
1086 * Set manually set selected dots, and display information about them
1087 * @param int row number that should by highlighted
1088 * false value clears the selection
1091 Dygraph
.prototype.setSelection
= function(row
) {
1092 // Extract the points we've selected
1093 this.selPoints_
= [];
1096 if (row
!== false) {
1097 row
= row
-this.boundaryIds_
[0][0];
1100 if (row
!== false && row
>= 0) {
1101 for (var i
in this.layout_
.datasets
) {
1102 if (row
< this.layout_
.datasets
[i
].length
) {
1103 this.selPoints_
.push(this.layout_
.points
[pos
+row
]);
1105 pos
+= this.layout_
.datasets
[i
].length
;
1109 if (this.selPoints_
.length
) {
1110 this.lastx_
= this.selPoints_
[0].xval
;
1111 this.updateSelection_();
1114 this.clearSelection();
1120 * The mouse has left the canvas. Clear out whatever artifacts remain
1121 * @param {Object} event the mouseout event from the browser.
1124 Dygraph
.prototype.mouseOut_
= function(event
) {
1125 if (this.attr_("unhighlightCallback")) {
1126 this.attr_("unhighlightCallback")(event
);
1129 if (this.attr_("hideOverlayOnMouseOut")) {
1130 this.clearSelection();
1135 * Remove all selection from the canvas
1138 Dygraph
.prototype.clearSelection
= function() {
1139 // Get rid of the overlay data
1140 var ctx
= this.canvas_
.getContext("2d");
1141 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1142 this.attr_("labelsDiv").innerHTML
= "";
1143 this.selPoints_
= [];
1148 * Returns the number of the currently selected row
1149 * @return int row number, of -1 if nothing is selected
1152 Dygraph
.prototype.getSelection
= function() {
1153 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1157 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1158 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1159 return row
+ this.boundaryIds_
[0][0];
1165 Dygraph
.zeropad
= function(x
) {
1166 if (x
< 10) return "0" + x
; else return "" + x
;
1170 * Return a string version of the hours, minutes and seconds portion of a date.
1171 * @param {Number} date The JavaScript date (ms since epoch)
1172 * @return {String} A time of the form "HH:MM:SS"
1175 Dygraph
.hmsString_
= function(date
) {
1176 var zeropad
= Dygraph
.zeropad
;
1177 var d
= new Date(date
);
1178 if (d
.getSeconds()) {
1179 return zeropad(d
.getHours()) + ":" +
1180 zeropad(d
.getMinutes()) + ":" +
1181 zeropad(d
.getSeconds());
1183 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1188 * Convert a JS date to a string appropriate to display on an axis that
1189 * is displaying values at the stated granularity.
1190 * @param {Date} date The date to format
1191 * @param {Number} granularity One of the Dygraph granularity constants
1192 * @return {String} The formatted date
1195 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1196 if (granularity
>= Dygraph
.MONTHLY
) {
1197 return date
.strftime('%b %y');
1199 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1200 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1201 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1203 return Dygraph
.hmsString_(date
.getTime());
1209 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1210 * @param {Number} date The JavaScript date (ms since epoch)
1211 * @return {String} A date of the form "YYYY/MM/DD"
1214 Dygraph
.dateString_
= function(date
, self
) {
1215 var zeropad
= Dygraph
.zeropad
;
1216 var d
= new Date(date
);
1219 var year
= "" + d
.getFullYear();
1220 // Get a 0 padded month string
1221 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1222 // Get a 0 padded day string
1223 var day
= zeropad(d
.getDate());
1226 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1227 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1229 return year
+ "/" + month + "/" + day
+ ret
;
1233 * Round a number to the specified number of digits past the decimal point.
1234 * @param {Number} num The number to round
1235 * @param {Number} places The number of decimals to which to round
1236 * @return {Number} The rounded number
1239 Dygraph
.round_
= function(num
, places
) {
1240 var shift
= Math
.pow(10, places
);
1241 return Math
.round(num
* shift
)/shift
;
1245 * Fires when there's data available to be graphed.
1246 * @param {String} data Raw CSV data to be plotted
1249 Dygraph
.prototype.loadedEvent_
= function(data
) {
1250 this.rawData_
= this.parseCSV_(data
);
1251 this.drawGraph_(this.rawData_
);
1254 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1255 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1256 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1259 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1262 Dygraph
.prototype.addXTicks_
= function() {
1263 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1264 var startDate
, endDate
;
1265 if (this.dateWindow_
) {
1266 startDate
= this.dateWindow_
[0];
1267 endDate
= this.dateWindow_
[1];
1269 startDate
= this.rawData_
[0][0];
1270 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1273 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1274 this.layout_
.updateOptions({xTicks
: xTicks
});
1277 // Time granularity enumeration
1278 Dygraph
.SECONDLY
= 0;
1279 Dygraph
.TWO_SECONDLY
= 1;
1280 Dygraph
.FIVE_SECONDLY
= 2;
1281 Dygraph
.TEN_SECONDLY
= 3;
1282 Dygraph
.THIRTY_SECONDLY
= 4;
1283 Dygraph
.MINUTELY
= 5;
1284 Dygraph
.TWO_MINUTELY
= 6;
1285 Dygraph
.FIVE_MINUTELY
= 7;
1286 Dygraph
.TEN_MINUTELY
= 8;
1287 Dygraph
.THIRTY_MINUTELY
= 9;
1288 Dygraph
.HOURLY
= 10;
1289 Dygraph
.TWO_HOURLY
= 11;
1290 Dygraph
.SIX_HOURLY
= 12;
1292 Dygraph
.WEEKLY
= 14;
1293 Dygraph
.MONTHLY
= 15;
1294 Dygraph
.QUARTERLY
= 16;
1295 Dygraph
.BIANNUAL
= 17;
1296 Dygraph
.ANNUAL
= 18;
1297 Dygraph
.DECADAL
= 19;
1298 Dygraph
.NUM_GRANULARITIES
= 20;
1300 Dygraph
.SHORT_SPACINGS
= [];
1301 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1302 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1303 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1304 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1305 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1306 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1307 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1308 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1309 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1310 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1311 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1312 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1313 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1314 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1315 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1319 // If we used this time granularity, how many ticks would there be?
1320 // This is only an approximation, but it's generally good enough.
1322 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1323 if (granularity
< Dygraph
.MONTHLY
) {
1324 // Generate one tick mark for every fixed interval of time.
1325 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1326 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1328 var year_mod
= 1; // e.g. to only print one point every 10 years.
1329 var num_months
= 12;
1330 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1331 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1332 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1333 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1335 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1336 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1337 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1343 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1344 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1346 // Returns an array containing {v: millis, label: label} dictionaries.
1348 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1349 var formatter
= this.attr_("xAxisLabelFormatter");
1351 if (granularity
< Dygraph
.MONTHLY
) {
1352 // Generate one tick mark for every fixed interval of time.
1353 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1354 var format
= '%d%b'; // e.g. "1Jan"
1356 // Find a time less than start_time which occurs on a "nice" time boundary
1357 // for this granularity.
1358 var g
= spacing
/ 1000;
1359 var d
= new Date(start_time
);
1360 if (g
<= 60) { // seconds
1361 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1365 if (g
<= 60) { // minutes
1366 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1371 if (g
<= 24) { // days
1372 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1377 if (g
== 7) { // one week
1378 d
.setDate(d
.getDate() - d
.getDay());
1383 start_time
= d
.getTime();
1385 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1386 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1389 // Display a tick mark on the first of a set of months of each year.
1390 // Years get a tick mark iff y % year_mod == 0. This is useful for
1391 // displaying a tick mark once every 10 years, say, on long time scales.
1393 var year_mod
= 1; // e.g. to only print one point every 10 years.
1395 if (granularity
== Dygraph
.MONTHLY
) {
1396 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1397 } else if (granularity
== Dygraph
.QUARTERLY
) {
1398 months
= [ 0, 3, 6, 9 ];
1399 } else if (granularity
== Dygraph
.BIANNUAL
) {
1401 } else if (granularity
== Dygraph
.ANNUAL
) {
1403 } else if (granularity
== Dygraph
.DECADAL
) {
1408 var start_year
= new Date(start_time
).getFullYear();
1409 var end_year
= new Date(end_time
).getFullYear();
1410 var zeropad
= Dygraph
.zeropad
;
1411 for (var i
= start_year
; i
<= end_year
; i
++) {
1412 if (i
% year_mod
!= 0) continue;
1413 for (var j
= 0; j
< months
.length
; j
++) {
1414 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1415 var t
= Date
.parse(date_str
);
1416 if (t
< start_time
|| t
> end_time
) continue;
1417 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1427 * Add ticks to the x-axis based on a date range.
1428 * @param {Number} startDate Start of the date window (millis since epoch)
1429 * @param {Number} endDate End of the date window (millis since epoch)
1430 * @return {Array.<Object>} Array of {label, value} tuples.
1433 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1435 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1436 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1437 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1444 return self
.GetXAxis(startDate
, endDate
, chosen
);
1446 // TODO(danvk): signal error.
1451 * Add ticks when the x axis has numbers on it (instead of dates)
1452 * @param {Number} startDate Start of the date window (millis since epoch)
1453 * @param {Number} endDate End of the date window (millis since epoch)
1454 * @return {Array.<Object>} Array of {label, value} tuples.
1457 Dygraph
.numericTicks
= function(minV
, maxV
, self
, attr
) {
1458 // This is a bit of a hack to allow per-axis attributes.
1459 if (!attr
) attr
= self
.attr_
;
1462 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1463 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1464 // The first spacing greater than pixelsPerYLabel is what we use.
1465 // TODO(danvk): version that works on a log scale.
1466 if (attr("labelsKMG2")) {
1467 var mults
= [1, 2, 4, 8];
1469 var mults
= [1, 2, 5];
1471 var scale
, low_val
, high_val
, nTicks
;
1472 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1473 var pixelsPerTick
= attr('pixelsPerYLabel');
1474 for (var i
= -10; i
< 50; i
++) {
1475 if (attr("labelsKMG2")) {
1476 var base_scale
= Math
.pow(16, i
);
1478 var base_scale
= Math
.pow(10, i
);
1480 for (var j
= 0; j
< mults
.length
; j
++) {
1481 scale
= base_scale
* mults
[j
];
1482 low_val
= Math
.floor(minV
/ scale
) * scale
;
1483 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1484 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1485 var spacing
= self
.height_
/ nTicks
;
1486 // wish I could break out of both loops at once...
1487 if (spacing
> pixelsPerTick
) break;
1489 if (spacing
> pixelsPerTick
) break;
1492 // Construct labels for the ticks
1496 if (attr("labelsKMB")) {
1498 k_labels
= [ "K", "M", "B", "T" ];
1500 if (attr("labelsKMG2")) {
1501 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1503 k_labels
= [ "k", "M", "G", "T" ];
1506 // Allow reverse y-axis if it's explicitly requested.
1507 if (low_val
> high_val
) scale
*= -1;
1509 for (var i
= 0; i
< nTicks
; i
++) {
1510 var tickV
= low_val
+ i
* scale
;
1511 var absTickV
= Math
.abs(tickV
);
1512 var label
= Dygraph
.round_(tickV
, 2);
1513 if (k_labels
.length
) {
1514 // Round up to an appropriate unit.
1516 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1517 if (absTickV
>= n
) {
1518 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1523 ticks
.push( {label
: label
, v
: tickV
} );
1529 * Adds appropriate ticks on the y-axis
1530 * @param {Number} minY The minimum Y value in the data set
1531 * @param {Number} maxY The maximum Y value in the data set
1534 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1535 // Set the number of ticks so that the labels are human-friendly.
1536 // TODO(danvk): make this an attribute as well.
1537 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this);
1538 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1542 // Computes the range of the data series (including confidence intervals).
1543 // series is either [ [x1, y1], [x2, y2], ... ] or
1544 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1545 // Returns [low, high]
1546 Dygraph
.prototype.extremeValues_
= function(series
) {
1547 var minY
= null, maxY
= null;
1549 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1551 // With custom bars, maxY is the max of the high values.
1552 for (var j
= 0; j
< series
.length
; j
++) {
1553 var y
= series
[j
][1][0];
1555 var low
= y
- series
[j
][1][1];
1556 var high
= y
+ series
[j
][1][2];
1557 if (low
> y
) low
= y
; // this can happen with custom bars,
1558 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1559 if (maxY
== null || high
> maxY
) {
1562 if (minY
== null || low
< minY
) {
1567 for (var j
= 0; j
< series
.length
; j
++) {
1568 var y
= series
[j
][1];
1569 if (y
=== null || isNaN(y
)) continue;
1570 if (maxY
== null || y
> maxY
) {
1573 if (minY
== null || y
< minY
) {
1579 return [minY
, maxY
];
1583 * Update the graph with new data. Data is in the format
1584 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1585 * or, if errorBars=true,
1586 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1587 * @param {Array.<Object>} data The data (see above)
1590 Dygraph
.prototype.drawGraph_
= function(data
) {
1591 // This is used to set the second parameter to drawCallback, below.
1592 var is_initial_draw
= this.is_initial_draw_
;
1593 this.is_initial_draw_
= false;
1595 var minY
= null, maxY
= null;
1596 this.layout_
.removeAllDatasets();
1598 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1600 // Loop over the fields (series). Go from the last to the first,
1601 // because if they're stacked that's how we accumulate the values.
1603 var cumulative_y
= []; // For stacked series.
1606 var extremes
= {}; // series name -> [low, high]
1608 // Loop over all fields and create datasets
1609 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1610 if (!this.visibility()[i
- 1]) continue;
1612 var seriesName
= this.attr_("labels")[i
];
1613 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1616 for (var j
= 0; j
< data
.length
; j
++) {
1617 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1618 var date
= data
[j
][0];
1619 series
.push([date
, data
[j
][i
]]);
1622 series
= this.rollingAverage(series
, this.rollPeriod_
);
1624 // Prune down to the desired range, if necessary (for zooming)
1625 // Because there can be lines going to points outside of the visible area,
1626 // we actually prune to visible points, plus one on either side.
1627 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1628 if (this.dateWindow_
) {
1629 var low
= this.dateWindow_
[0];
1630 var high
= this.dateWindow_
[1];
1632 // TODO(danvk): do binary search instead of linear search.
1633 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1634 var firstIdx
= null, lastIdx
= null;
1635 for (var k
= 0; k
< series
.length
; k
++) {
1636 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1639 if (series
[k
][0] <= high
) {
1643 if (firstIdx
=== null) firstIdx
= 0;
1644 if (firstIdx
> 0) firstIdx
--;
1645 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1646 if (lastIdx
< series
.length
- 1) lastIdx
++;
1647 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1648 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1649 pruned
.push(series
[k
]);
1653 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1656 var seriesExtremes
= this.extremeValues_(series
);
1657 extremes
[seriesName
] = seriesExtremes
;
1658 var thisMinY
= seriesExtremes
[0];
1659 var thisMaxY
= seriesExtremes
[1];
1660 if (minY
=== null || thisMinY
< minY
) minY
= thisMinY
;
1661 if (maxY
=== null || thisMaxY
> maxY
) maxY
= thisMaxY
;
1664 for (var j
=0; j
<series
.length
; j
++) {
1665 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1668 } else if (this.attr_("stackedGraph")) {
1669 var l
= series
.length
;
1671 for (var j
= 0; j
< l
; j
++) {
1672 // If one data set has a NaN, let all subsequent stacked
1673 // sets inherit the NaN -- only start at 0 for the first set.
1674 var x
= series
[j
][0];
1675 if (cumulative_y
[x
] === undefined
)
1676 cumulative_y
[x
] = 0;
1678 actual_y
= series
[j
][1];
1679 cumulative_y
[x
] += actual_y
;
1681 series
[j
] = [x
, cumulative_y
[x
]]
1683 if (!maxY
|| cumulative_y
[x
] > maxY
)
1684 maxY
= cumulative_y
[x
];
1688 datasets
[i
] = series
;
1691 for (var i
= 1; i
< datasets
.length
; i
++) {
1692 if (!this.visibility()[i
- 1]) continue;
1693 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1696 var out
= this.computeYaxes_(extremes
);
1698 var seriesToAxisMap
= out
[1];
1699 this.displayedYRange_
= axes
[0].valueRange
;
1700 this.layout_
.updateOptions( { yAxes
: axes
,
1701 seriesToAxisMap
: seriesToAxisMap
1706 // Tell PlotKit to use this new data and render itself
1707 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1708 this.layout_
.evaluateWithError();
1709 this.plotter_
.clear();
1710 this.plotter_
.render();
1711 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1712 this.canvas_
.height
);
1714 if (this.attr_("drawCallback") !== null) {
1715 this.attr_("drawCallback")(this, is_initial_draw
);
1720 * Determine properties of the y axes. These include the number of axes and
1721 * data series/styles associated with each. This does not compute the range of
1722 * each axis, since that can only be determined when drawing.
1723 * Returns [ axes, seriesToAxisMap ]
1724 * axes = [ { options } ]
1725 * seriesToAxisMap = { seriesName: 0, seriesName2: 1, ... }
1726 * indices are into the axes array.
1728 Dygraph
.prototype.computeYaxes_
= function(extremes
) {
1729 var axes
= [{}]; // always have at least one y-axis.
1730 var seriesToAxisMap
= {};
1731 var seriesForAxis
= [[]];
1733 // all options which could be applied per-axis:
1741 'axisLabelFontSize',
1745 // Copy global axis options over to the first axis.
1746 for (var i
= 0; i
< axisOptions
.length
; i
++) {
1747 var k
= axisOptions
[i
];
1748 var v
= this.attr_(k
);
1749 if (v
) axes
[0][k
] = v
;
1752 // Go through once and add all the axes.
1753 for (var seriesName
in extremes
) {
1754 if (!extremes
.hasOwnProperty(seriesName
)) continue;
1755 var axis
= this.attr_("axis", seriesName
);
1757 seriesToAxisMap
[seriesName
] = 0;
1758 seriesForAxis
[0].push(seriesName
);
1761 if (typeof(axis
) == 'object') {
1762 // Add a new axis, making a copy of its per-axis options.
1764 Dygraph
.update(opts
, axes
[0]);
1765 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
1766 Dygraph
.update(opts
, axis
);
1768 seriesToAxisMap
[seriesName
] = axes
.length
- 1;
1769 seriesForAxis
.push([seriesName
]);
1773 // Go through one more time and assign series to an axis defined by another
1774 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
1775 for (var seriesName
in extremes
) {
1776 if (!extremes
.hasOwnProperty(seriesName
)) continue;
1777 var axis
= this.attr_("axis", seriesName
);
1778 if (typeof(axis
) == 'string') {
1779 if (!seriesToAxisMap
.hasOwnProperty(axis
)) {
1780 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
1781 "series " + axis
+ ", which does not define its own axis.");
1784 var idx
= seriesToAxisMap
[axis
];
1785 seriesToAxisMap
[seriesName
] = idx
;
1786 seriesForAxis
[idx
].push(seriesName
);
1790 // Compute extreme values, a span and tick marks for each axis.
1791 for (var i
= 0; i
< axes
.length
; i
++) {
1793 if (!axis
.valueRange
) {
1794 // Calcuate the extremes of extremes.
1795 var series
= seriesForAxis
[i
];
1796 var minY
= Infinity
; // extremes[series[0]][0];
1797 var maxY
= -Infinity
; // extremes[series[0]][1];
1798 for (var j
= 0; j
< series
.length
; j
++) {
1799 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
1800 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
1802 if (axis
.includeZero
&& minY
> 0) minY
= 0;
1804 // Add some padding and round up to an integer to be human-friendly.
1805 var span
= maxY
- minY
;
1806 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1807 if (span
== 0) { span
= maxY
; }
1808 var maxAxisY
= maxY
+ 0.1 * span
;
1809 var minAxisY
= minY
- 0.1 * span
;
1811 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1812 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1813 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1815 if (this.attr_("includeZero")) {
1816 if (maxY
< 0) maxAxisY
= 0;
1817 if (minY
> 0) minAxisY
= 0;
1820 axis
.valueRange
= [minAxisY
, maxAxisY
];
1825 Dygraph
.numericTicks(axis
.valueRange
[0],
1828 function(self
, axis
) {
1829 return function(a
) {
1830 if (axis
.hasOwnProperty(a
)) return axis
[a
];
1831 return self
.attr_(a
);
1836 return [axes
, seriesToAxisMap
];
1840 * Calculates the rolling average of a data set.
1841 * If originalData is [label, val], rolls the average of those.
1842 * If originalData is [label, [, it's interpreted as [value, stddev]
1843 * and the roll is returned in the same form, with appropriately reduced
1844 * stddev for each value.
1845 * Note that this is where fractional input (i.e. '5/10') is converted into
1847 * @param {Array} originalData The data in the appropriate format (see above)
1848 * @param {Number} rollPeriod The number of days over which to average the data
1850 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1851 if (originalData
.length
< 2)
1852 return originalData
;
1853 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1854 var rollingData
= [];
1855 var sigma
= this.attr_("sigma");
1857 if (this.fractions_
) {
1859 var den
= 0; // numerator/denominator
1861 for (var i
= 0; i
< originalData
.length
; i
++) {
1862 num
+= originalData
[i
][1][0];
1863 den
+= originalData
[i
][1][1];
1864 if (i
- rollPeriod
>= 0) {
1865 num
-= originalData
[i
- rollPeriod
][1][0];
1866 den
-= originalData
[i
- rollPeriod
][1][1];
1869 var date
= originalData
[i
][0];
1870 var value
= den
? num
/ den
: 0.0;
1871 if (this.attr_("errorBars")) {
1872 if (this.wilsonInterval_
) {
1873 // For more details on this confidence interval, see:
1874 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1876 var p
= value
< 0 ? 0 : value
, n
= den
;
1877 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1878 var denom
= 1 + sigma
* sigma
/ den
;
1879 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1880 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1881 rollingData
[i
] = [date
,
1882 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1884 rollingData
[i
] = [date
, [0, 0, 0]];
1887 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1888 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1891 rollingData
[i
] = [date
, mult
* value
];
1894 } else if (this.attr_("customBars")) {
1899 for (var i
= 0; i
< originalData
.length
; i
++) {
1900 var data
= originalData
[i
][1];
1902 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1904 if (y
!= null && !isNaN(y
)) {
1910 if (i
- rollPeriod
>= 0) {
1911 var prev
= originalData
[i
- rollPeriod
];
1912 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1919 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1920 1.0 * (mid
- low
) / count
,
1921 1.0 * (high
- mid
) / count
]];
1924 // Calculate the rolling average for the first rollPeriod - 1 points where
1925 // there is not enough data to roll over the full number of days
1926 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1927 if (!this.attr_("errorBars")){
1928 if (rollPeriod
== 1) {
1929 return originalData
;
1932 for (var i
= 0; i
< originalData
.length
; i
++) {
1935 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1936 var y
= originalData
[j
][1];
1937 if (y
== null || isNaN(y
)) continue;
1939 sum
+= originalData
[j
][1];
1942 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1944 rollingData
[i
] = [originalData
[i
][0], null];
1949 for (var i
= 0; i
< originalData
.length
; i
++) {
1953 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1954 var y
= originalData
[j
][1][0];
1955 if (y
== null || isNaN(y
)) continue;
1957 sum
+= originalData
[j
][1][0];
1958 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1961 var stddev
= Math
.sqrt(variance
) / num_ok
;
1962 rollingData
[i
] = [originalData
[i
][0],
1963 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1965 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1975 * Parses a date, returning the number of milliseconds since epoch. This can be
1976 * passed in as an xValueParser in the Dygraph constructor.
1977 * TODO(danvk): enumerate formats that this understands.
1978 * @param {String} A date in YYYYMMDD format.
1979 * @return {Number} Milliseconds since epoch.
1982 Dygraph
.dateParser
= function(dateStr
, self
) {
1985 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1986 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1987 while (dateStrSlashed
.search("-") != -1) {
1988 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1990 d
= Date
.parse(dateStrSlashed
);
1991 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1992 // TODO(danvk): remove support for this format. It's confusing.
1993 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1994 + "/" + dateStr
.substr(6,2);
1995 d
= Date
.parse(dateStrSlashed
);
1997 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1998 // "2009/07/12 12:34:56"
1999 d
= Date
.parse(dateStr
);
2002 if (!d
|| isNaN(d
)) {
2003 self
.error("Couldn't parse " + dateStr
+ " as a date");
2009 * Detects the type of the str (date or numeric) and sets the various
2010 * formatting attributes in this.attrs_ based on this type.
2011 * @param {String} str An x value.
2014 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2016 if (str
.indexOf('-') >= 0 ||
2017 str
.indexOf('/') >= 0 ||
2018 isNaN(parseFloat(str
))) {
2020 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2021 // TODO(danvk): remove support for this format.
2026 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2027 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2028 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2029 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2031 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2032 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2033 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2034 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2039 * Parses a string in a special csv format. We expect a csv file where each
2040 * line is a date point, and the first field in each line is the date string.
2041 * We also expect that all remaining fields represent series.
2042 * if the errorBars attribute is set, then interpret the fields as:
2043 * date, series1, stddev1, series2, stddev2, ...
2044 * @param {Array.<Object>} data See above.
2047 * @return Array.<Object> An array with one entry for each row. These entries
2048 * are an array of cells in that row. The first entry is the parsed x-value for
2049 * the row. The second, third, etc. are the y-values. These can take on one of
2050 * three forms, depending on the CSV and constructor parameters:
2052 * 2. [ value, stddev ]
2053 * 3. [ low value, center value, high value ]
2055 Dygraph
.prototype.parseCSV_
= function(data
) {
2057 var lines
= data
.split("\n");
2059 // Use the default delimiter or fall back to a tab if that makes sense.
2060 var delim
= this.attr_('delimiter');
2061 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2066 if (this.labelsFromCSV_
) {
2068 this.attrs_
.labels
= lines
[0].split(delim
);
2071 // Parse the x as a float or return null if it's not a number.
2072 var parseFloatOrNull
= function(x
) {
2073 var val
= parseFloat(x
);
2074 return isNaN(val
) ? null : val
;
2078 var defaultParserSet
= false; // attempt to auto-detect x value type
2079 var expectedCols
= this.attr_("labels").length
;
2080 var outOfOrder
= false;
2081 for (var i
= start
; i
< lines
.length
; i
++) {
2082 var line
= lines
[i
];
2083 if (line
.length
== 0) continue; // skip blank lines
2084 if (line
[0] == '#') continue; // skip comment lines
2085 var inFields
= line
.split(delim
);
2086 if (inFields
.length
< 2) continue;
2089 if (!defaultParserSet
) {
2090 this.detectTypeFromString_(inFields
[0]);
2091 xParser
= this.attr_("xValueParser");
2092 defaultParserSet
= true;
2094 fields
[0] = xParser(inFields
[0], this);
2096 // If fractions are expected, parse the numbers as "A/B
"
2097 if (this.fractions_) {
2098 for (var j = 1; j < inFields.length; j++) {
2099 // TODO(danvk): figure out an appropriate way to flag parse errors.
2100 var vals = inFields[j].split("/");
2101 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2103 } else if (this.attr_("errorBars
")) {
2104 // If there are error bars, values are (value, stddev) pairs
2105 for (var j = 1; j < inFields.length; j += 2)
2106 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2107 parseFloatOrNull(inFields[j + 1])];
2108 } else if (this.attr_("customBars
")) {
2109 // Bars are a low;center;high tuple
2110 for (var j = 1; j < inFields.length; j++) {
2111 var vals = inFields[j].split(";");
2112 fields[j] = [ parseFloatOrNull(vals[0]),
2113 parseFloatOrNull(vals[1]),
2114 parseFloatOrNull(vals[2]) ];
2117 // Values are just numbers
2118 for (var j = 1; j < inFields.length; j++) {
2119 fields[j] = parseFloatOrNull(inFields[j]);
2122 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2127 if (fields.length != expectedCols) {
2128 this.error("Number of columns
in line
" + i + " (" + fields.length +
2129 ") does not agree
with number of
labels (" + expectedCols +
2135 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2136 ret.sort(function(a,b) { return a[0] - b[0] });
2143 * The user has provided their data as a pre-packaged JS array. If the x values
2144 * are numeric, this is the same as dygraphs' internal format. If the x values
2145 * are dates, we need to convert them from Date objects to ms since epoch.
2146 * @param {Array.<Object>} data
2147 * @return {Array.<Object>} data with numeric x values.
2149 Dygraph.prototype.parseArray_ = function(data) {
2150 // Peek at the first x value to see if it's numeric.
2151 if (data.length == 0) {
2152 this.error("Can
't plot empty data set");
2155 if (data[0].length == 0) {
2156 this.error("Data set cannot contain an empty row");
2160 if (this.attr_("labels") == null) {
2161 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2162 "in the options parameter");
2163 this.attrs_.labels = [ "X" ];
2164 for (var i = 1; i < data[0].length; i++) {
2165 this.attrs_.labels.push("Y" + i);
2169 if (Dygraph.isDateLike(data[0][0])) {
2170 // Some intelligent defaults for a date x-axis.
2171 this.attrs_.xValueFormatter = Dygraph.dateString_;
2172 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2173 this.attrs_.xTicker = Dygraph.dateTicker;
2175 // Assume they're all dates
.
2176 var parsedData
= Dygraph
.clone(data
);
2177 for (var i
= 0; i
< data
.length
; i
++) {
2178 if (parsedData
[i
].length
== 0) {
2179 this.error("Row " + (1 + i
) + " of data is empty");
2182 if (parsedData
[i
][0] == null
2183 || typeof(parsedData
[i
][0].getTime
) != 'function'
2184 || isNaN(parsedData
[i
][0].getTime())) {
2185 this.error("x value in row " + (1 + i
) + " is not a Date");
2188 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2192 // Some intelligent defaults for a numeric x-axis.
2193 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2194 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2200 * Parses a DataTable object from gviz.
2201 * The data is expected to have a first column that is either a date or a
2202 * number. All subsequent columns must be numbers. If there is a clear mismatch
2203 * between this.xValueParser_ and the type of the first column, it will be
2204 * fixed. Fills out rawData_.
2205 * @param {Array.<Object>} data See above.
2208 Dygraph
.prototype.parseDataTable_
= function(data
) {
2209 var cols
= data
.getNumberOfColumns();
2210 var rows
= data
.getNumberOfRows();
2212 var indepType
= data
.getColumnType(0);
2213 if (indepType
== 'date' || indepType
== 'datetime') {
2214 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2215 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2216 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2217 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2218 } else if (indepType
== 'number') {
2219 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2220 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2221 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2222 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2224 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2225 "column 1 of DataTable input (Got '" + indepType
+ "')");
2229 // Array of the column indices which contain data (and not annotations).
2231 var annotationCols
= {}; // data index -> [annotation cols]
2232 var hasAnnotations
= false;
2233 for (var i
= 1; i
< cols
; i
++) {
2234 var type
= data
.getColumnType(i
);
2235 if (type
== 'number') {
2237 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2238 // This is OK -- it's an annotation column.
2239 var dataIdx
= colIdx
[colIdx
.length
- 1];
2240 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2241 annotationCols
[dataIdx
] = [i
];
2243 annotationCols
[dataIdx
].push(i
);
2245 hasAnnotations
= true;
2247 this.error("Only 'number' is supported as a dependent type with Gviz." +
2248 " 'string' is only supported if displayAnnotations is true");
2252 // Read column labels
2253 // TODO(danvk): add support back for errorBars
2254 var labels
= [data
.getColumnLabel(0)];
2255 for (var i
= 0; i
< colIdx
.length
; i
++) {
2256 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2258 this.attrs_
.labels
= labels
;
2259 cols
= labels
.length
;
2262 var outOfOrder
= false;
2263 var annotations
= [];
2264 for (var i
= 0; i
< rows
; i
++) {
2266 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2267 data
.getValue(i
, 0) === null) {
2268 this.warn("Ignoring row " + i
+
2269 " of DataTable because of undefined or null first column.");
2273 if (indepType
== 'date' || indepType
== 'datetime') {
2274 row
.push(data
.getValue(i
, 0).getTime());
2276 row
.push(data
.getValue(i
, 0));
2278 if (!this.attr_("errorBars")) {
2279 for (var j
= 0; j
< colIdx
.length
; j
++) {
2280 var col
= colIdx
[j
];
2281 row
.push(data
.getValue(i
, col
));
2282 if (hasAnnotations
&&
2283 annotationCols
.hasOwnProperty(col
) &&
2284 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2286 ann
.series
= data
.getColumnLabel(col
);
2288 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2290 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2291 if (k
) ann
.text
+= "\n";
2292 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2294 annotations
.push(ann
);
2298 for (var j
= 0; j
< cols
- 1; j
++) {
2299 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2302 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2309 this.warn("DataTable is out of order; order it correctly to speed loading.");
2310 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2312 this.rawData_
= ret
;
2314 if (annotations
.length
> 0) {
2315 this.setAnnotations(annotations
, true);
2319 // These functions are all based on MochiKit.
2320 Dygraph
.update
= function (self
, o
) {
2321 if (typeof(o
) != 'undefined' && o
!== null) {
2323 if (o
.hasOwnProperty(k
)) {
2331 Dygraph
.isArrayLike
= function (o
) {
2332 var typ
= typeof(o
);
2334 (typ
!= 'object' && !(typ
== 'function' &&
2335 typeof(o
.item
) == 'function')) ||
2337 typeof(o
.length
) != 'number' ||
2345 Dygraph
.isDateLike
= function (o
) {
2346 if (typeof(o
) != "object" || o
=== null ||
2347 typeof(o
.getTime
) != 'function') {
2353 Dygraph
.clone
= function(o
) {
2354 // TODO(danvk): figure out how MochiKit's version works
2356 for (var i
= 0; i
< o
.length
; i
++) {
2357 if (Dygraph
.isArrayLike(o
[i
])) {
2358 r
.push(Dygraph
.clone(o
[i
]));
2368 * Get the CSV data. If it's in a function, call that function. If it's in a
2369 * file, do an XMLHttpRequest to get it.
2372 Dygraph
.prototype.start_
= function() {
2373 if (typeof this.file_
== 'function') {
2374 // CSV string. Pretend we got it via XHR.
2375 this.loadedEvent_(this.file_());
2376 } else if (Dygraph
.isArrayLike(this.file_
)) {
2377 this.rawData_
= this.parseArray_(this.file_
);
2378 this.drawGraph_(this.rawData_
);
2379 } else if (typeof this.file_
== 'object' &&
2380 typeof this.file_
.getColumnRange
== 'function') {
2381 // must be a DataTable from gviz.
2382 this.parseDataTable_(this.file_
);
2383 this.drawGraph_(this.rawData_
);
2384 } else if (typeof this.file_
== 'string') {
2385 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2386 if (this.file_
.indexOf('\n') >= 0) {
2387 this.loadedEvent_(this.file_
);
2389 var req
= new XMLHttpRequest();
2391 req
.onreadystatechange
= function () {
2392 if (req
.readyState
== 4) {
2393 if (req
.status
== 200) {
2394 caller
.loadedEvent_(req
.responseText
);
2399 req
.open("GET", this.file_
, true);
2403 this.error("Unknown data format: " + (typeof this.file_
));
2408 * Changes various properties of the graph. These can include:
2410 * <li>file: changes the source data for the graph</li>
2411 * <li>errorBars: changes whether the data contains stddev</li>
2413 * @param {Object} attrs The new properties and values
2415 Dygraph
.prototype.updateOptions
= function(attrs
) {
2416 // TODO(danvk): this is a mess. Rethink this function.
2417 if (attrs
.rollPeriod
) {
2418 this.rollPeriod_
= attrs
.rollPeriod
;
2420 if (attrs
.dateWindow
) {
2421 this.dateWindow_
= attrs
.dateWindow
;
2424 // TODO(danvk): validate per-series options.
2429 // highlightCircleSize
2431 Dygraph
.update(this.user_attrs_
, attrs
);
2432 Dygraph
.update(this.renderOptions_
, attrs
);
2434 this.labelsFromCSV_
= (this.attr_("labels") == null);
2435 this.computeYaxes_();
2437 // TODO(danvk): this doesn't match the constructor logic
2438 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2439 if (attrs
['file']) {
2440 this.file_
= attrs
['file'];
2443 this.drawGraph_(this.rawData_
);
2448 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2449 * containing div (which has presumably changed size since the dygraph was
2450 * instantiated. If the width/height are specified, the div will be resized.
2452 * This is far more efficient than destroying and re-instantiating a
2453 * Dygraph, since it doesn't have to reparse the underlying data.
2455 * @param {Number} width Width (in pixels)
2456 * @param {Number} height Height (in pixels)
2458 Dygraph
.prototype.resize
= function(width
, height
) {
2459 if (this.resize_lock
) {
2462 this.resize_lock
= true;
2464 if ((width
=== null) != (height
=== null)) {
2465 this.warn("Dygraph.resize() should be called with zero parameters or " +
2466 "two non-NULL parameters. Pretending it was zero.");
2467 width
= height
= null;
2470 // TODO(danvk): there should be a clear() method.
2471 this.maindiv_
.innerHTML
= "";
2472 this.attrs_
.labelsDiv
= null;
2475 this.maindiv_
.style
.width
= width
+ "px";
2476 this.maindiv_
.style
.height
= height
+ "px";
2477 this.width_
= width
;
2478 this.height_
= height
;
2480 this.width_
= this.maindiv_
.offsetWidth
;
2481 this.height_
= this.maindiv_
.offsetHeight
;
2484 this.createInterface_();
2485 this.drawGraph_(this.rawData_
);
2487 this.resize_lock
= false;
2491 * Adjusts the number of days in the rolling average. Updates the graph to
2492 * reflect the new averaging period.
2493 * @param {Number} length Number of days over which to average the data.
2495 Dygraph
.prototype.adjustRoll
= function(length
) {
2496 this.rollPeriod_
= length
;
2497 this.drawGraph_(this.rawData_
);
2501 * Returns a boolean array of visibility statuses.
2503 Dygraph
.prototype.visibility
= function() {
2504 // Do lazy-initialization, so that this happens after we know the number of
2506 if (!this.attr_("visibility")) {
2507 this.attrs_
["visibility"] = [];
2509 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2510 this.attr_("visibility").push(true);
2512 return this.attr_("visibility");
2516 * Changes the visiblity of a series.
2518 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2519 var x
= this.visibility();
2520 if (num
< 0 && num
>= x
.length
) {
2521 this.warn("invalid series number in setVisibility: " + num
);
2524 this.drawGraph_(this.rawData_
);
2529 * Update the list of annotations and redraw the chart.
2531 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2532 this.annotations_
= ann
;
2533 this.layout_
.setAnnotations(this.annotations_
);
2534 if (!suppressDraw
) {
2535 this.drawGraph_(this.rawData_
);
2540 * Return the list of annotations.
2542 Dygraph
.prototype.annotations
= function() {
2543 return this.annotations_
;
2547 * Get the index of a series (column) given its name. The first column is the
2548 * x-axis, so the data series start with index 1.
2550 Dygraph
.prototype.indexFromSetName
= function(name
) {
2551 var labels
= this.attr_("labels");
2552 for (var i
= 0; i
< labels
.length
; i
++) {
2553 if (labels
[i
] == name
) return i
;
2558 Dygraph
.addAnnotationRule
= function() {
2559 if (Dygraph
.addedAnnotationCSS
) return;
2562 if (document
.styleSheets
.length
> 0) {
2563 mysheet
= document
.styleSheets
[0];
2565 var styleSheetElement
= document
.createElement("style");
2566 styleSheetElement
.type
= "text/css";
2567 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2568 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2569 if (document
.styleSheets
[i
].disabled
) continue;
2570 mysheet
= document
.styleSheets
[i
];
2574 var rule
= "border: 1px solid black; " +
2575 "background-color: white; " +
2576 "text-align: center;";
2577 if (mysheet
.insertRule
) { // Firefox
2578 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", 0);
2579 } else if (mysheet
.addRule
) { // IE
2580 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2583 Dygraph
.addedAnnotationCSS
= true;
2587 * Create a new canvas element. This is more complex than a simple
2588 * document.createElement("canvas") because of IE and excanvas.
2590 Dygraph
.createCanvas
= function() {
2591 var canvas
= document
.createElement("canvas");
2593 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2595 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2603 * A wrapper around Dygraph that implements the gviz API.
2604 * @param {Object} container The DOM object the visualization should live in.
2606 Dygraph
.GVizChart
= function(container
) {
2607 this.container
= container
;
2610 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2611 this.container
.innerHTML
= '';
2612 this.date_graph
= new Dygraph(this.container
, data
, options
);
2616 * Google charts compatible setSelection
2617 * Only row selection is supported, all points in the row will be highlighted
2618 * @param {Array} array of the selected cells
2621 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2623 if (selection_array
.length
) {
2624 row
= selection_array
[0].row
;
2626 this.date_graph
.setSelection(row
);
2630 * Google charts compatible getSelection implementation
2631 * @return {Array} array of the selected cells
2634 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2637 var row
= this.date_graph
.getSelection();
2639 if (row
< 0) return selection
;
2642 for (var i
in this.date_graph
.layout_
.datasets
) {
2643 selection
.push({row
: row
, column
: col
});
2650 // Older pages may still use this name.
2651 DateGraph
= Dygraph
;