1 // Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
2 // All Rights Reserved.
5 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
6 * string. Dygraph can handle multiple series with or without error bars. The
7 * date/value ranges will be automatically set. Dygraph uses the
8 * <canvas> tag, so it only works in FF1.5+.
9 * @author danvdk@gmail.com (Dan Vanderkam)
12 <div id="graphdiv" style="width:800px; height:500px;"></div>
13 <script type="text/javascript">
14 new Dygraph(document.getElementById("graphdiv"),
15 "datafile.csv", // CSV file with headers
19 The CSV file is of the form
21 Date,SeriesA,SeriesB,SeriesC
25 If the 'errorBars' option is set in the constructor, the input should be of
28 Date,SeriesA,SeriesB,...
29 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
30 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
32 If the 'fractions' option is set, the input should be of the form:
34 Date,SeriesA,SeriesB,...
35 YYYYMMDD,A1/B1,A2/B2,...
36 YYYYMMDD,A1/B1,A2/B2,...
38 And error bars will be calculated automatically using a binomial distribution.
40 For further documentation and examples, see http://www.danvk.org/dygraphs
45 * An interactive, zoomable graph
46 * @param {String | Function} file A file containing CSV data or a function that
47 * returns this data. The expected format for each line is
48 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
49 * YYYYMMDD,val1,stddev1,val2,stddev2,...
50 * @param {Object} attrs Various other attributes, e.g. errorBars determines
51 * whether the input data contains error ranges.
53 Dygraph
= function(div
, data
, opts
) {
54 if (arguments
.length
> 0) {
55 if (arguments
.length
== 4) {
56 // Old versions of dygraphs took in the series labels as a constructor
57 // parameter. This doesn't make sense anymore, but it's easy to continue
58 // to support this usage.
59 this.warn("Using deprecated four-argument dygraph constructor");
60 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
62 this.__init__(div
, data
, opts
);
67 Dygraph
.NAME
= "Dygraph";
68 Dygraph
.VERSION
= "1.2";
69 Dygraph
.__repr__
= function() {
70 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
72 Dygraph
.toString
= function() {
73 return this.__repr__();
76 // Various default values
77 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
78 Dygraph
.DEFAULT_WIDTH
= 480;
79 Dygraph
.DEFAULT_HEIGHT
= 320;
80 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
82 // Default attribute values.
83 Dygraph
.DEFAULT_ATTRS
= {
84 highlightCircleSize
: 3,
90 // TODO(danvk): move defaults from createStatusMessage_ here.
92 labelsSeparateLines
: false,
93 labelsShowZeroValues
: true,
96 showLabelsOnHighlight
: true,
98 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
103 axisLabelFontSize
: 14,
106 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
110 xValueFormatter
: Dygraph
.dateString_
,
111 xValueParser
: Dygraph
.dateParser
,
112 xTicker
: Dygraph
.dateTicker
,
120 wilsonInterval
: true, // only relevant if fractions is true
124 connectSeparatedPoints
: false,
127 hideOverlayOnMouseOut
: true,
133 // Various logging levels.
139 // Used for initializing annotation CSS rules only once.
140 Dygraph
.addedAnnotationCSS
= false;
142 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
143 // Labels is no longer a constructor parameter, since it's typically set
144 // directly from the data source. It also conains a name for the x-axis,
145 // which the previous constructor form did not.
146 if (labels
!= null) {
147 var new_labels
= ["Date"];
148 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
149 Dygraph
.update(attrs
, { 'labels': new_labels
});
151 this.__init__(div
, file
, attrs
);
155 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
156 * and interaction <canvas> inside of it. See the constructor for details
158 * @param {Element} div the Element to render the graph into.
159 * @param {String | Function} file Source data
160 * @param {Object} attrs Miscellaneous other options
163 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
164 // Support two-argument constructor
165 if (attrs
== null) { attrs
= {}; }
167 // Copy the important bits into the object
168 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
171 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
172 this.previousVerticalX_
= -1;
173 this.fractions_
= attrs
.fractions
|| false;
174 this.dateWindow_
= attrs
.dateWindow
|| null;
175 this.valueRange_
= attrs
.valueRange
|| null;
176 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
177 this.is_initial_draw_
= true;
178 this.annotations_
= [];
180 // Clear the div. This ensure that, if multiple dygraphs are passed the same
181 // div, then only one will be drawn.
184 // If the div isn't already sized then inherit from our attrs or
185 // give it a default size.
186 if (div
.style
.width
== '') {
187 div
.style
.width
= attrs
.width
|| Dygraph
.DEFAULT_WIDTH
+ "px";
189 if (div
.style
.height
== '') {
190 div
.style
.height
= attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
+ "px";
192 this.width_
= parseInt(div
.style
.width
, 10);
193 this.height_
= parseInt(div
.style
.height
, 10);
194 // The div might have been specified as percent of the current window size,
195 // convert that to an appropriate number of pixels.
196 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
197 this.width_
= div
.offsetWidth
;
199 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
200 this.height_
= div
.offsetHeight
;
203 if (this.width_
== 0) {
204 this.error("dygraph has zero width. Please specify a width in pixels.");
206 if (this.height_
== 0) {
207 this.error("dygraph has zero height. Please specify a height in pixels.");
210 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
211 if (attrs
['stackedGraph']) {
212 attrs
['fillGraph'] = true;
213 // TODO(nikhilk): Add any other stackedGraph checks here.
216 // Dygraphs has many options, some of which interact with one another.
217 // To keep track of everything, we maintain two sets of options:
219 // this.user_attrs_ only options explicitly set by the user.
220 // this.attrs_ defaults, options derived from user_attrs_, data.
222 // Options are then accessed this.attr_('attr'), which first looks at
223 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
224 // defaults without overriding behavior that the user specifically asks for.
225 this.user_attrs_
= {};
226 Dygraph
.update(this.user_attrs_
, attrs
);
229 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
231 this.boundaryIds_
= [];
233 // Make a note of whether labels will be pulled from the CSV file.
234 this.labelsFromCSV_
= (this.attr_("labels") == null);
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.plotter_
.colors
[point
.name
]);
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 var point
= this.layout_
.points
[pos
+row
];
1105 if (this.attr_("stackedGraph")) {
1106 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1109 this.selPoints_
.push(point
);
1111 pos
+= this.layout_
.datasets
[i
].length
;
1115 if (this.selPoints_
.length
) {
1116 this.lastx_
= this.selPoints_
[0].xval
;
1117 this.updateSelection_();
1120 this.clearSelection();
1126 * The mouse has left the canvas. Clear out whatever artifacts remain
1127 * @param {Object} event the mouseout event from the browser.
1130 Dygraph
.prototype.mouseOut_
= function(event
) {
1131 if (this.attr_("unhighlightCallback")) {
1132 this.attr_("unhighlightCallback")(event
);
1135 if (this.attr_("hideOverlayOnMouseOut")) {
1136 this.clearSelection();
1141 * Remove all selection from the canvas
1144 Dygraph
.prototype.clearSelection
= function() {
1145 // Get rid of the overlay data
1146 var ctx
= this.canvas_
.getContext("2d");
1147 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1148 this.attr_("labelsDiv").innerHTML
= "";
1149 this.selPoints_
= [];
1154 * Returns the number of the currently selected row
1155 * @return int row number, of -1 if nothing is selected
1158 Dygraph
.prototype.getSelection
= function() {
1159 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1163 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1164 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1165 return row
+ this.boundaryIds_
[0][0];
1171 Dygraph
.zeropad
= function(x
) {
1172 if (x
< 10) return "0" + x
; else return "" + x
;
1176 * Return a string version of the hours, minutes and seconds portion of a date.
1177 * @param {Number} date The JavaScript date (ms since epoch)
1178 * @return {String} A time of the form "HH:MM:SS"
1181 Dygraph
.hmsString_
= function(date
) {
1182 var zeropad
= Dygraph
.zeropad
;
1183 var d
= new Date(date
);
1184 if (d
.getSeconds()) {
1185 return zeropad(d
.getHours()) + ":" +
1186 zeropad(d
.getMinutes()) + ":" +
1187 zeropad(d
.getSeconds());
1189 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1194 * Convert a JS date to a string appropriate to display on an axis that
1195 * is displaying values at the stated granularity.
1196 * @param {Date} date The date to format
1197 * @param {Number} granularity One of the Dygraph granularity constants
1198 * @return {String} The formatted date
1201 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1202 if (granularity
>= Dygraph
.MONTHLY
) {
1203 return date
.strftime('%b %y');
1205 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1206 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1207 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1209 return Dygraph
.hmsString_(date
.getTime());
1215 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1216 * @param {Number} date The JavaScript date (ms since epoch)
1217 * @return {String} A date of the form "YYYY/MM/DD"
1220 Dygraph
.dateString_
= function(date
, self
) {
1221 var zeropad
= Dygraph
.zeropad
;
1222 var d
= new Date(date
);
1225 var year
= "" + d
.getFullYear();
1226 // Get a 0 padded month string
1227 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1228 // Get a 0 padded day string
1229 var day
= zeropad(d
.getDate());
1232 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1233 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1235 return year
+ "/" + month + "/" + day
+ ret
;
1239 * Round a number to the specified number of digits past the decimal point.
1240 * @param {Number} num The number to round
1241 * @param {Number} places The number of decimals to which to round
1242 * @return {Number} The rounded number
1245 Dygraph
.round_
= function(num
, places
) {
1246 var shift
= Math
.pow(10, places
);
1247 return Math
.round(num
* shift
)/shift
;
1251 * Fires when there's data available to be graphed.
1252 * @param {String} data Raw CSV data to be plotted
1255 Dygraph
.prototype.loadedEvent_
= function(data
) {
1256 this.rawData_
= this.parseCSV_(data
);
1257 this.drawGraph_(this.rawData_
);
1260 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1261 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1262 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1265 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1268 Dygraph
.prototype.addXTicks_
= function() {
1269 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1270 var startDate
, endDate
;
1271 if (this.dateWindow_
) {
1272 startDate
= this.dateWindow_
[0];
1273 endDate
= this.dateWindow_
[1];
1275 startDate
= this.rawData_
[0][0];
1276 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1279 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1280 this.layout_
.updateOptions({xTicks
: xTicks
});
1283 // Time granularity enumeration
1284 Dygraph
.SECONDLY
= 0;
1285 Dygraph
.TWO_SECONDLY
= 1;
1286 Dygraph
.FIVE_SECONDLY
= 2;
1287 Dygraph
.TEN_SECONDLY
= 3;
1288 Dygraph
.THIRTY_SECONDLY
= 4;
1289 Dygraph
.MINUTELY
= 5;
1290 Dygraph
.TWO_MINUTELY
= 6;
1291 Dygraph
.FIVE_MINUTELY
= 7;
1292 Dygraph
.TEN_MINUTELY
= 8;
1293 Dygraph
.THIRTY_MINUTELY
= 9;
1294 Dygraph
.HOURLY
= 10;
1295 Dygraph
.TWO_HOURLY
= 11;
1296 Dygraph
.SIX_HOURLY
= 12;
1298 Dygraph
.WEEKLY
= 14;
1299 Dygraph
.MONTHLY
= 15;
1300 Dygraph
.QUARTERLY
= 16;
1301 Dygraph
.BIANNUAL
= 17;
1302 Dygraph
.ANNUAL
= 18;
1303 Dygraph
.DECADAL
= 19;
1304 Dygraph
.NUM_GRANULARITIES
= 20;
1306 Dygraph
.SHORT_SPACINGS
= [];
1307 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1308 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1309 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1310 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1311 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1312 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1313 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1314 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1315 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1316 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1317 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1318 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1319 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1320 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1321 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1325 // If we used this time granularity, how many ticks would there be?
1326 // This is only an approximation, but it's generally good enough.
1328 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1329 if (granularity
< Dygraph
.MONTHLY
) {
1330 // Generate one tick mark for every fixed interval of time.
1331 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1332 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1334 var year_mod
= 1; // e.g. to only print one point every 10 years.
1335 var num_months
= 12;
1336 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1337 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1338 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1339 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1341 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1342 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1343 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1349 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1350 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1352 // Returns an array containing {v: millis, label: label} dictionaries.
1354 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1355 var formatter
= this.attr_("xAxisLabelFormatter");
1357 if (granularity
< Dygraph
.MONTHLY
) {
1358 // Generate one tick mark for every fixed interval of time.
1359 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1360 var format
= '%d%b'; // e.g. "1Jan"
1362 // Find a time less than start_time which occurs on a "nice" time boundary
1363 // for this granularity.
1364 var g
= spacing
/ 1000;
1365 var d
= new Date(start_time
);
1366 if (g
<= 60) { // seconds
1367 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1371 if (g
<= 60) { // minutes
1372 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1377 if (g
<= 24) { // days
1378 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1383 if (g
== 7) { // one week
1384 d
.setDate(d
.getDate() - d
.getDay());
1389 start_time
= d
.getTime();
1391 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1392 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1395 // Display a tick mark on the first of a set of months of each year.
1396 // Years get a tick mark iff y % year_mod == 0. This is useful for
1397 // displaying a tick mark once every 10 years, say, on long time scales.
1399 var year_mod
= 1; // e.g. to only print one point every 10 years.
1401 if (granularity
== Dygraph
.MONTHLY
) {
1402 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1403 } else if (granularity
== Dygraph
.QUARTERLY
) {
1404 months
= [ 0, 3, 6, 9 ];
1405 } else if (granularity
== Dygraph
.BIANNUAL
) {
1407 } else if (granularity
== Dygraph
.ANNUAL
) {
1409 } else if (granularity
== Dygraph
.DECADAL
) {
1414 var start_year
= new Date(start_time
).getFullYear();
1415 var end_year
= new Date(end_time
).getFullYear();
1416 var zeropad
= Dygraph
.zeropad
;
1417 for (var i
= start_year
; i
<= end_year
; i
++) {
1418 if (i
% year_mod
!= 0) continue;
1419 for (var j
= 0; j
< months
.length
; j
++) {
1420 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1421 var t
= Date
.parse(date_str
);
1422 if (t
< start_time
|| t
> end_time
) continue;
1423 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1433 * Add ticks to the x-axis based on a date range.
1434 * @param {Number} startDate Start of the date window (millis since epoch)
1435 * @param {Number} endDate End of the date window (millis since epoch)
1436 * @return {Array.<Object>} Array of {label, value} tuples.
1439 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1441 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1442 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1443 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1450 return self
.GetXAxis(startDate
, endDate
, chosen
);
1452 // TODO(danvk): signal error.
1457 * Add ticks when the x axis has numbers on it (instead of dates)
1458 * @param {Number} startDate Start of the date window (millis since epoch)
1459 * @param {Number} endDate End of the date window (millis since epoch)
1461 * @param {function} formatter: Optional formatter to use for each tick value
1462 * @return {Array.<Object>} Array of {label, value} tuples.
1465 Dygraph
.numericTicks
= function(minV
, maxV
, self
, formatter
) {
1467 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1468 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1469 // The first spacing greater than pixelsPerYLabel is what we use.
1470 // TODO(danvk): version that works on a log scale.
1471 if (self
.attr_("labelsKMG2")) {
1472 var mults
= [1, 2, 4, 8];
1474 var mults
= [1, 2, 5];
1476 var scale
, low_val
, high_val
, nTicks
;
1477 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1478 var pixelsPerTick
= self
.attr_('pixelsPerYLabel');
1479 for (var i
= -10; i
< 50; i
++) {
1480 if (self
.attr_("labelsKMG2")) {
1481 var base_scale
= Math
.pow(16, i
);
1483 var base_scale
= Math
.pow(10, i
);
1485 for (var j
= 0; j
< mults
.length
; j
++) {
1486 scale
= base_scale
* mults
[j
];
1487 low_val
= Math
.floor(minV
/ scale
) * scale
;
1488 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1489 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1490 var spacing
= self
.height_
/ nTicks
;
1491 // wish I could break out of both loops at once...
1492 if (spacing
> pixelsPerTick
) break;
1494 if (spacing
> pixelsPerTick
) break;
1497 // Construct labels for the ticks
1501 if (self
.attr_("labelsKMB")) {
1503 k_labels
= [ "K", "M", "B", "T" ];
1505 if (self
.attr_("labelsKMG2")) {
1506 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1508 k_labels
= [ "k", "M", "G", "T" ];
1511 // Allow reverse y-axis if it's explicitly requested.
1512 if (low_val
> high_val
) scale
*= -1;
1514 for (var i
= 0; i
< nTicks
; i
++) {
1515 var tickV
= low_val
+ i
* scale
;
1516 var absTickV
= Math
.abs(tickV
);
1518 if (formatter
!= undefined
) {
1519 label
= formatter(tickV
);
1521 label
= Dygraph
.round_(tickV
, 2);
1523 if (k_labels
.length
) {
1524 // Round up to an appropriate unit.
1526 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1527 if (absTickV
>= n
) {
1528 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
1533 ticks
.push( {label
: label
, v
: tickV
} );
1539 * Adds appropriate ticks on the y-axis
1540 * @param {Number} minY The minimum Y value in the data set
1541 * @param {Number} maxY The maximum Y value in the data set
1544 Dygraph
.prototype.addYTicks_
= function(minY
, maxY
) {
1545 // Set the number of ticks so that the labels are human-friendly.
1546 // TODO(danvk): make this an attribute as well.
1547 var formatter
= this.attr_('yAxisLabelFormatter') ? this.attr_('yAxisLabelFormatter') : this.attr_('yValueFormatter');
1548 var ticks
= Dygraph
.numericTicks(minY
, maxY
, this, formatter
);
1549 this.layout_
.updateOptions( { yAxis
: [minY
, maxY
],
1553 // Computes the range of the data series (including confidence intervals).
1554 // series is either [ [x1, y1], [x2, y2], ... ] or
1555 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1556 // Returns [low, high]
1557 Dygraph
.prototype.extremeValues_
= function(series
) {
1558 var minY
= null, maxY
= null;
1560 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1562 // With custom bars, maxY is the max of the high values.
1563 for (var j
= 0; j
< series
.length
; j
++) {
1564 var y
= series
[j
][1][0];
1566 var low
= y
- series
[j
][1][1];
1567 var high
= y
+ series
[j
][1][2];
1568 if (low
> y
) low
= y
; // this can happen with custom bars,
1569 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1570 if (maxY
== null || high
> maxY
) {
1573 if (minY
== null || low
< minY
) {
1578 for (var j
= 0; j
< series
.length
; j
++) {
1579 var y
= series
[j
][1];
1580 if (y
=== null || isNaN(y
)) continue;
1581 if (maxY
== null || y
> maxY
) {
1584 if (minY
== null || y
< minY
) {
1590 return [minY
, maxY
];
1594 * Update the graph with new data. Data is in the format
1595 * [ [date1, val1, val2, ...], [date2, val1, val2, ...] if errorBars=false
1596 * or, if errorBars=true,
1597 * [ [date1, [val1,stddev1], [val2,stddev2], ...], [date2, ...], ...]
1598 * @param {Array.<Object>} data The data (see above)
1601 Dygraph
.prototype.drawGraph_
= function(data
) {
1602 // This is used to set the second parameter to drawCallback, below.
1603 var is_initial_draw
= this.is_initial_draw_
;
1604 this.is_initial_draw_
= false;
1606 var minY
= null, maxY
= null;
1607 this.layout_
.removeAllDatasets();
1609 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1611 // Loop over the fields (series). Go from the last to the first,
1612 // because if they're stacked that's how we accumulate the values.
1614 var cumulative_y
= []; // For stacked series.
1617 // Loop over all fields and create datasets
1618 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1619 if (!this.visibility()[i
- 1]) continue;
1621 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1624 for (var j
= 0; j
< data
.length
; j
++) {
1625 if (data
[j
][i
] != null || !connectSeparatedPoints
) {
1626 var date
= data
[j
][0];
1627 series
.push([date
, data
[j
][i
]]);
1630 series
= this.rollingAverage(series
, this.rollPeriod_
);
1632 // Prune down to the desired range, if necessary (for zooming)
1633 // Because there can be lines going to points outside of the visible area,
1634 // we actually prune to visible points, plus one on either side.
1635 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1636 if (this.dateWindow_
) {
1637 var low
= this.dateWindow_
[0];
1638 var high
= this.dateWindow_
[1];
1640 // TODO(danvk): do binary search instead of linear search.
1641 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1642 var firstIdx
= null, lastIdx
= null;
1643 for (var k
= 0; k
< series
.length
; k
++) {
1644 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1647 if (series
[k
][0] <= high
) {
1651 if (firstIdx
=== null) firstIdx
= 0;
1652 if (firstIdx
> 0) firstIdx
--;
1653 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1654 if (lastIdx
< series
.length
- 1) lastIdx
++;
1655 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
1656 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
1657 pruned
.push(series
[k
]);
1661 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
1664 var extremes
= this.extremeValues_(series
);
1665 var thisMinY
= extremes
[0];
1666 var thisMaxY
= extremes
[1];
1667 if (minY
=== null || (thisMinY
!= null && thisMinY
< minY
)) minY
= thisMinY
;
1668 if (maxY
=== null || (thisMaxY
!= null && thisMaxY
> maxY
)) maxY
= thisMaxY
;
1671 for (var j
=0; j
<series
.length
; j
++) {
1672 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
1675 } else if (this.attr_("stackedGraph")) {
1676 var l
= series
.length
;
1678 for (var j
= 0; j
< l
; j
++) {
1679 // If one data set has a NaN, let all subsequent stacked
1680 // sets inherit the NaN -- only start at 0 for the first set.
1681 var x
= series
[j
][0];
1682 if (cumulative_y
[x
] === undefined
)
1683 cumulative_y
[x
] = 0;
1685 actual_y
= series
[j
][1];
1686 cumulative_y
[x
] += actual_y
;
1688 series
[j
] = [x
, cumulative_y
[x
]]
1690 if (!maxY
|| cumulative_y
[x
] > maxY
)
1691 maxY
= cumulative_y
[x
];
1695 datasets
[i
] = series
;
1698 for (var i
= 1; i
< datasets
.length
; i
++) {
1699 if (!this.visibility()[i
- 1]) continue;
1700 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
1703 // Use some heuristics to come up with a good maxY value, unless it's been
1704 // set explicitly by the user.
1705 if (this.valueRange_
!= null) {
1706 this.addYTicks_(this.valueRange_
[0], this.valueRange_
[1]);
1707 this.displayedYRange_
= this.valueRange_
;
1709 // This affects the calculation of span, below.
1710 if (this.attr_("includeZero") && minY
> 0) {
1714 // Add some padding and round up to an integer to be human-friendly.
1715 var span
= maxY
- minY
;
1716 // special case: if we have no sense of scale, use +/-10% of the sole value
.
1717 if (span
== 0) { span
= maxY
; }
1718 var maxAxisY
= maxY
+ 0.1 * span
;
1719 var minAxisY
= minY
- 0.1 * span
;
1721 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
1722 if (!this.attr_("avoidMinZero")) {
1723 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
1724 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
1727 if (this.attr_("includeZero")) {
1728 if (maxY
< 0) maxAxisY
= 0;
1729 if (minY
> 0) minAxisY
= 0;
1732 this.addYTicks_(minAxisY
, maxAxisY
);
1733 this.displayedYRange_
= [minAxisY
, maxAxisY
];
1738 // Tell PlotKit to use this new data and render itself
1739 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
1740 this.layout_
.evaluateWithError();
1741 this.plotter_
.clear();
1742 this.plotter_
.render();
1743 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
1744 this.canvas_
.height
);
1746 if (this.attr_("drawCallback") !== null) {
1747 this.attr_("drawCallback")(this, is_initial_draw
);
1752 * Calculates the rolling average of a data set.
1753 * If originalData is [label, val], rolls the average of those.
1754 * If originalData is [label, [, it's interpreted as [value, stddev]
1755 * and the roll is returned in the same form, with appropriately reduced
1756 * stddev for each value.
1757 * Note that this is where fractional input (i.e. '5/10') is converted into
1759 * @param {Array} originalData The data in the appropriate format (see above)
1760 * @param {Number} rollPeriod The number of days over which to average the data
1762 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
1763 if (originalData
.length
< 2)
1764 return originalData
;
1765 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
1766 var rollingData
= [];
1767 var sigma
= this.attr_("sigma");
1769 if (this.fractions_
) {
1771 var den
= 0; // numerator/denominator
1773 for (var i
= 0; i
< originalData
.length
; i
++) {
1774 num
+= originalData
[i
][1][0];
1775 den
+= originalData
[i
][1][1];
1776 if (i
- rollPeriod
>= 0) {
1777 num
-= originalData
[i
- rollPeriod
][1][0];
1778 den
-= originalData
[i
- rollPeriod
][1][1];
1781 var date
= originalData
[i
][0];
1782 var value
= den
? num
/ den
: 0.0;
1783 if (this.attr_("errorBars")) {
1784 if (this.wilsonInterval_
) {
1785 // For more details on this confidence interval, see:
1786 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
1788 var p
= value
< 0 ? 0 : value
, n
= den
;
1789 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
1790 var denom
= 1 + sigma
* sigma
/ den
;
1791 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
1792 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
1793 rollingData
[i
] = [date
,
1794 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
1796 rollingData
[i
] = [date
, [0, 0, 0]];
1799 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
1800 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
1803 rollingData
[i
] = [date
, mult
* value
];
1806 } else if (this.attr_("customBars")) {
1811 for (var i
= 0; i
< originalData
.length
; i
++) {
1812 var data
= originalData
[i
][1];
1814 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
1816 if (y
!= null && !isNaN(y
)) {
1822 if (i
- rollPeriod
>= 0) {
1823 var prev
= originalData
[i
- rollPeriod
];
1824 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
1831 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
1832 1.0 * (mid
- low
) / count
,
1833 1.0 * (high
- mid
) / count
]];
1836 // Calculate the rolling average for the first rollPeriod - 1 points where
1837 // there is not enough data to roll over the full number of days
1838 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
1839 if (!this.attr_("errorBars")){
1840 if (rollPeriod
== 1) {
1841 return originalData
;
1844 for (var i
= 0; i
< originalData
.length
; i
++) {
1847 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1848 var y
= originalData
[j
][1];
1849 if (y
== null || isNaN(y
)) continue;
1851 sum
+= originalData
[j
][1];
1854 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
1856 rollingData
[i
] = [originalData
[i
][0], null];
1861 for (var i
= 0; i
< originalData
.length
; i
++) {
1865 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
1866 var y
= originalData
[j
][1][0];
1867 if (y
== null || isNaN(y
)) continue;
1869 sum
+= originalData
[j
][1][0];
1870 variance
+= Math
.pow(originalData
[j
][1][1], 2);
1873 var stddev
= Math
.sqrt(variance
) / num_ok
;
1874 rollingData
[i
] = [originalData
[i
][0],
1875 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
1877 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
1887 * Parses a date, returning the number of milliseconds since epoch. This can be
1888 * passed in as an xValueParser in the Dygraph constructor.
1889 * TODO(danvk): enumerate formats that this understands.
1890 * @param {String} A date in YYYYMMDD format.
1891 * @return {Number} Milliseconds since epoch.
1894 Dygraph
.dateParser
= function(dateStr
, self
) {
1897 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
1898 dateStrSlashed
= dateStr
.replace("-", "/", "g");
1899 while (dateStrSlashed
.search("-") != -1) {
1900 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
1902 d
= Date
.parse(dateStrSlashed
);
1903 } else if (dateStr
.length
== 8) { // e.g. '20090712'
1904 // TODO(danvk): remove support for this format. It's confusing.
1905 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
1906 + "/" + dateStr
.substr(6,2);
1907 d
= Date
.parse(dateStrSlashed
);
1909 // Any format that Date.parse will accept, e.g. "2009/07/12" or
1910 // "2009/07/12 12:34:56"
1911 d
= Date
.parse(dateStr
);
1914 if (!d
|| isNaN(d
)) {
1915 self
.error("Couldn't parse " + dateStr
+ " as a date");
1921 * Detects the type of the str (date or numeric) and sets the various
1922 * formatting attributes in this.attrs_ based on this type.
1923 * @param {String} str An x value.
1926 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
1928 if (str
.indexOf('-') >= 0 ||
1929 str
.indexOf('/') >= 0 ||
1930 isNaN(parseFloat(str
))) {
1932 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
1933 // TODO(danvk): remove support for this format.
1938 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
1939 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
1940 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
1941 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
1943 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
1944 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
1945 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
1946 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
1951 * Parses a string in a special csv format. We expect a csv file where each
1952 * line is a date point, and the first field in each line is the date string.
1953 * We also expect that all remaining fields represent series.
1954 * if the errorBars attribute is set, then interpret the fields as:
1955 * date, series1, stddev1, series2, stddev2, ...
1956 * @param {Array.<Object>} data See above.
1959 * @return Array.<Object> An array with one entry for each row. These entries
1960 * are an array of cells in that row. The first entry is the parsed x-value for
1961 * the row. The second, third, etc. are the y-values. These can take on one of
1962 * three forms, depending on the CSV and constructor parameters:
1964 * 2. [ value, stddev ]
1965 * 3. [ low value, center value, high value ]
1967 Dygraph
.prototype.parseCSV_
= function(data
) {
1969 var lines
= data
.split("\n");
1971 // Use the default delimiter or fall back to a tab if that makes sense.
1972 var delim
= this.attr_('delimiter');
1973 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
1978 if (this.labelsFromCSV_
) {
1980 this.attrs_
.labels
= lines
[0].split(delim
);
1983 // Parse the x as a float or return null if it's not a number.
1984 var parseFloatOrNull
= function(x
) {
1985 var val
= parseFloat(x
);
1986 return isNaN(val
) ? null : val
;
1990 var defaultParserSet
= false; // attempt to auto-detect x value type
1991 var expectedCols
= this.attr_("labels").length
;
1992 var outOfOrder
= false;
1993 for (var i
= start
; i
< lines
.length
; i
++) {
1994 var line
= lines
[i
];
1995 if (line
.length
== 0) continue; // skip blank lines
1996 if (line
[0] == '#') continue; // skip comment lines
1997 var inFields
= line
.split(delim
);
1998 if (inFields
.length
< 2) continue;
2001 if (!defaultParserSet
) {
2002 this.detectTypeFromString_(inFields
[0]);
2003 xParser
= this.attr_("xValueParser");
2004 defaultParserSet
= true;
2006 fields
[0] = xParser(inFields
[0], this);
2008 // If fractions are expected, parse the numbers as "A/B
"
2009 if (this.fractions_) {
2010 for (var j = 1; j < inFields.length; j++) {
2011 // TODO(danvk): figure out an appropriate way to flag parse errors.
2012 var vals = inFields[j].split("/");
2013 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2015 } else if (this.attr_("errorBars
")) {
2016 // If there are error bars, values are (value, stddev) pairs
2017 for (var j = 1; j < inFields.length; j += 2)
2018 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2019 parseFloatOrNull(inFields[j + 1])];
2020 } else if (this.attr_("customBars
")) {
2021 // Bars are a low;center;high tuple
2022 for (var j = 1; j < inFields.length; j++) {
2023 var vals = inFields[j].split(";");
2024 fields[j] = [ parseFloatOrNull(vals[0]),
2025 parseFloatOrNull(vals[1]),
2026 parseFloatOrNull(vals[2]) ];
2029 // Values are just numbers
2030 for (var j = 1; j < inFields.length; j++) {
2031 fields[j] = parseFloatOrNull(inFields[j]);
2034 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2039 if (fields.length != expectedCols) {
2040 this.error("Number of columns
in line
" + i + " (" + fields.length +
2041 ") does not agree
with number of
labels (" + expectedCols +
2047 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2048 ret.sort(function(a,b) { return a[0] - b[0] });
2055 * The user has provided their data as a pre-packaged JS array. If the x values
2056 * are numeric, this is the same as dygraphs' internal format. If the x values
2057 * are dates, we need to convert them from Date objects to ms since epoch.
2058 * @param {Array.<Object>} data
2059 * @return {Array.<Object>} data with numeric x values.
2061 Dygraph.prototype.parseArray_ = function(data) {
2062 // Peek at the first x value to see if it's numeric.
2063 if (data.length == 0) {
2064 this.error("Can
't plot empty data set");
2067 if (data[0].length == 0) {
2068 this.error("Data set cannot contain an empty row");
2072 if (this.attr_("labels") == null) {
2073 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2074 "in the options parameter");
2075 this.attrs_.labels = [ "X" ];
2076 for (var i = 1; i < data[0].length; i++) {
2077 this.attrs_.labels.push("Y" + i);
2081 if (Dygraph.isDateLike(data[0][0])) {
2082 // Some intelligent defaults for a date x-axis.
2083 this.attrs_.xValueFormatter = Dygraph.dateString_;
2084 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2085 this.attrs_.xTicker = Dygraph.dateTicker;
2087 // Assume they're all dates
.
2088 var parsedData
= Dygraph
.clone(data
);
2089 for (var i
= 0; i
< data
.length
; i
++) {
2090 if (parsedData
[i
].length
== 0) {
2091 this.error("Row " + (1 + i
) + " of data is empty");
2094 if (parsedData
[i
][0] == null
2095 || typeof(parsedData
[i
][0].getTime
) != 'function'
2096 || isNaN(parsedData
[i
][0].getTime())) {
2097 this.error("x value in row " + (1 + i
) + " is not a Date");
2100 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2104 // Some intelligent defaults for a numeric x-axis.
2105 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2106 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2112 * Parses a DataTable object from gviz.
2113 * The data is expected to have a first column that is either a date or a
2114 * number. All subsequent columns must be numbers. If there is a clear mismatch
2115 * between this.xValueParser_ and the type of the first column, it will be
2116 * fixed. Fills out rawData_.
2117 * @param {Array.<Object>} data See above.
2120 Dygraph
.prototype.parseDataTable_
= function(data
) {
2121 var cols
= data
.getNumberOfColumns();
2122 var rows
= data
.getNumberOfRows();
2124 var indepType
= data
.getColumnType(0);
2125 if (indepType
== 'date' || indepType
== 'datetime') {
2126 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2127 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2128 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2129 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2130 } else if (indepType
== 'number') {
2131 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2132 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2133 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2134 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2136 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2137 "column 1 of DataTable input (Got '" + indepType
+ "')");
2141 // Array of the column indices which contain data (and not annotations).
2143 var annotationCols
= {}; // data index -> [annotation cols]
2144 var hasAnnotations
= false;
2145 for (var i
= 1; i
< cols
; i
++) {
2146 var type
= data
.getColumnType(i
);
2147 if (type
== 'number') {
2149 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2150 // This is OK -- it's an annotation column.
2151 var dataIdx
= colIdx
[colIdx
.length
- 1];
2152 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2153 annotationCols
[dataIdx
] = [i
];
2155 annotationCols
[dataIdx
].push(i
);
2157 hasAnnotations
= true;
2159 this.error("Only 'number' is supported as a dependent type with Gviz." +
2160 " 'string' is only supported if displayAnnotations is true");
2164 // Read column labels
2165 // TODO(danvk): add support back for errorBars
2166 var labels
= [data
.getColumnLabel(0)];
2167 for (var i
= 0; i
< colIdx
.length
; i
++) {
2168 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2169 if (this.attr_("errorBars")) i
+= 1;
2171 this.attrs_
.labels
= labels
;
2172 cols
= labels
.length
;
2175 var outOfOrder
= false;
2176 var annotations
= [];
2177 for (var i
= 0; i
< rows
; i
++) {
2179 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2180 data
.getValue(i
, 0) === null) {
2181 this.warn("Ignoring row " + i
+
2182 " of DataTable because of undefined or null first column.");
2186 if (indepType
== 'date' || indepType
== 'datetime') {
2187 row
.push(data
.getValue(i
, 0).getTime());
2189 row
.push(data
.getValue(i
, 0));
2191 if (!this.attr_("errorBars")) {
2192 for (var j
= 0; j
< colIdx
.length
; j
++) {
2193 var col
= colIdx
[j
];
2194 row
.push(data
.getValue(i
, col
));
2195 if (hasAnnotations
&&
2196 annotationCols
.hasOwnProperty(col
) &&
2197 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2199 ann
.series
= data
.getColumnLabel(col
);
2201 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2203 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2204 if (k
) ann
.text
+= "\n";
2205 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2207 annotations
.push(ann
);
2211 for (var j
= 0; j
< cols
- 1; j
++) {
2212 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2215 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2222 this.warn("DataTable is out of order; order it correctly to speed loading.");
2223 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2225 this.rawData_
= ret
;
2227 if (annotations
.length
> 0) {
2228 this.setAnnotations(annotations
, true);
2232 // These functions are all based on MochiKit.
2233 Dygraph
.update
= function (self
, o
) {
2234 if (typeof(o
) != 'undefined' && o
!== null) {
2236 if (o
.hasOwnProperty(k
)) {
2244 Dygraph
.isArrayLike
= function (o
) {
2245 var typ
= typeof(o
);
2247 (typ
!= 'object' && !(typ
== 'function' &&
2248 typeof(o
.item
) == 'function')) ||
2250 typeof(o
.length
) != 'number' ||
2258 Dygraph
.isDateLike
= function (o
) {
2259 if (typeof(o
) != "object" || o
=== null ||
2260 typeof(o
.getTime
) != 'function') {
2266 Dygraph
.clone
= function(o
) {
2267 // TODO(danvk): figure out how MochiKit's version works
2269 for (var i
= 0; i
< o
.length
; i
++) {
2270 if (Dygraph
.isArrayLike(o
[i
])) {
2271 r
.push(Dygraph
.clone(o
[i
]));
2281 * Get the CSV data. If it's in a function, call that function. If it's in a
2282 * file, do an XMLHttpRequest to get it.
2285 Dygraph
.prototype.start_
= function() {
2286 if (typeof this.file_
== 'function') {
2287 // CSV string. Pretend we got it via XHR.
2288 this.loadedEvent_(this.file_());
2289 } else if (Dygraph
.isArrayLike(this.file_
)) {
2290 this.rawData_
= this.parseArray_(this.file_
);
2291 this.drawGraph_(this.rawData_
);
2292 } else if (typeof this.file_
== 'object' &&
2293 typeof this.file_
.getColumnRange
== 'function') {
2294 // must be a DataTable from gviz.
2295 this.parseDataTable_(this.file_
);
2296 this.drawGraph_(this.rawData_
);
2297 } else if (typeof this.file_
== 'string') {
2298 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2299 if (this.file_
.indexOf('\n') >= 0) {
2300 this.loadedEvent_(this.file_
);
2302 var req
= new XMLHttpRequest();
2304 req
.onreadystatechange
= function () {
2305 if (req
.readyState
== 4) {
2306 if (req
.status
== 200) {
2307 caller
.loadedEvent_(req
.responseText
);
2312 req
.open("GET", this.file_
, true);
2316 this.error("Unknown data format: " + (typeof this.file_
));
2321 * Changes various properties of the graph. These can include:
2323 * <li>file: changes the source data for the graph</li>
2324 * <li>errorBars: changes whether the data contains stddev</li>
2326 * @param {Object} attrs The new properties and values
2328 Dygraph
.prototype.updateOptions
= function(attrs
) {
2329 // TODO(danvk): this is a mess. Rethink this function.
2330 if (attrs
.rollPeriod
) {
2331 this.rollPeriod_
= attrs
.rollPeriod
;
2333 if (attrs
.dateWindow
) {
2334 this.dateWindow_
= attrs
.dateWindow
;
2336 if (attrs
.valueRange
) {
2337 this.valueRange_
= attrs
.valueRange
;
2340 // TODO(danvk): validate per-series options.
2345 // highlightCircleSize
2347 Dygraph
.update(this.user_attrs_
, attrs
);
2348 Dygraph
.update(this.renderOptions_
, attrs
);
2350 this.labelsFromCSV_
= (this.attr_("labels") == null);
2352 // TODO(danvk): this doesn't match the constructor logic
2353 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
2354 if (attrs
['file']) {
2355 this.file_
= attrs
['file'];
2358 this.drawGraph_(this.rawData_
);
2363 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2364 * containing div (which has presumably changed size since the dygraph was
2365 * instantiated. If the width/height are specified, the div will be resized.
2367 * This is far more efficient than destroying and re-instantiating a
2368 * Dygraph, since it doesn't have to reparse the underlying data.
2370 * @param {Number} width Width (in pixels)
2371 * @param {Number} height Height (in pixels)
2373 Dygraph
.prototype.resize
= function(width
, height
) {
2374 if (this.resize_lock
) {
2377 this.resize_lock
= true;
2379 if ((width
=== null) != (height
=== null)) {
2380 this.warn("Dygraph.resize() should be called with zero parameters or " +
2381 "two non-NULL parameters. Pretending it was zero.");
2382 width
= height
= null;
2385 // TODO(danvk): there should be a clear() method.
2386 this.maindiv_
.innerHTML
= "";
2387 this.attrs_
.labelsDiv
= null;
2390 this.maindiv_
.style
.width
= width
+ "px";
2391 this.maindiv_
.style
.height
= height
+ "px";
2392 this.width_
= width
;
2393 this.height_
= height
;
2395 this.width_
= this.maindiv_
.offsetWidth
;
2396 this.height_
= this.maindiv_
.offsetHeight
;
2399 this.createInterface_();
2400 this.drawGraph_(this.rawData_
);
2402 this.resize_lock
= false;
2406 * Adjusts the number of days in the rolling average. Updates the graph to
2407 * reflect the new averaging period.
2408 * @param {Number} length Number of days over which to average the data.
2410 Dygraph
.prototype.adjustRoll
= function(length
) {
2411 this.rollPeriod_
= length
;
2412 this.drawGraph_(this.rawData_
);
2416 * Returns a boolean array of visibility statuses.
2418 Dygraph
.prototype.visibility
= function() {
2419 // Do lazy-initialization, so that this happens after we know the number of
2421 if (!this.attr_("visibility")) {
2422 this.attrs_
["visibility"] = [];
2424 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
2425 this.attr_("visibility").push(true);
2427 return this.attr_("visibility");
2431 * Changes the visiblity of a series.
2433 Dygraph
.prototype.setVisibility
= function(num
, value
) {
2434 var x
= this.visibility();
2435 if (num
< 0 && num
>= x
.length
) {
2436 this.warn("invalid series number in setVisibility: " + num
);
2439 this.drawGraph_(this.rawData_
);
2444 * Update the list of annotations and redraw the chart.
2446 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
2447 // Only add the annotation CSS rule once we know it will be used.
2448 Dygraph
.addAnnotationRule();
2449 this.annotations_
= ann
;
2450 this.layout_
.setAnnotations(this.annotations_
);
2451 if (!suppressDraw
) {
2452 this.drawGraph_(this.rawData_
);
2457 * Return the list of annotations.
2459 Dygraph
.prototype.annotations
= function() {
2460 return this.annotations_
;
2464 * Get the index of a series (column) given its name. The first column is the
2465 * x-axis, so the data series start with index 1.
2467 Dygraph
.prototype.indexFromSetName
= function(name
) {
2468 var labels
= this.attr_("labels");
2469 for (var i
= 0; i
< labels
.length
; i
++) {
2470 if (labels
[i
] == name
) return i
;
2475 Dygraph
.addAnnotationRule
= function() {
2476 if (Dygraph
.addedAnnotationCSS
) return;
2479 if (document
.styleSheets
.length
> 0) {
2480 mysheet
= document
.styleSheets
[0];
2482 var styleSheetElement
= document
.createElement("style");
2483 styleSheetElement
.type
= "text/css";
2484 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
2485 for(i
= 0; i
< document
.styleSheets
.length
; i
++) {
2486 if (document
.styleSheets
[i
].disabled
) continue;
2487 mysheet
= document
.styleSheets
[i
];
2491 var rule
= "border: 1px solid black; " +
2492 "background-color: white; " +
2493 "text-align: center;";
2494 if (mysheet
.insertRule
) { // Firefox
2495 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
2496 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
2497 } else if (mysheet
.addRule
) { // IE
2498 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
2501 Dygraph
.addedAnnotationCSS
= true;
2505 * Create a new canvas element. This is more complex than a simple
2506 * document.createElement("canvas") because of IE and excanvas.
2508 Dygraph
.createCanvas
= function() {
2509 var canvas
= document
.createElement("canvas");
2511 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
2512 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
2513 canvas
= G_vmlCanvasManager
.initElement(canvas
);
2521 * A wrapper around Dygraph that implements the gviz API.
2522 * @param {Object} container The DOM object the visualization should live in.
2524 Dygraph
.GVizChart
= function(container
) {
2525 this.container
= container
;
2528 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
2529 this.container
.innerHTML
= '';
2530 this.date_graph
= new Dygraph(this.container
, data
, options
);
2534 * Google charts compatible setSelection
2535 * Only row selection is supported, all points in the row will be highlighted
2536 * @param {Array} array of the selected cells
2539 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
2541 if (selection_array
.length
) {
2542 row
= selection_array
[0].row
;
2544 this.date_graph
.setSelection(row
);
2548 * Google charts compatible getSelection implementation
2549 * @return {Array} array of the selected cells
2552 Dygraph
.GVizChart
.prototype.getSelection
= function() {
2555 var row
= this.date_graph
.getSelection();
2557 if (row
< 0) return selection
;
2560 for (var i
in this.date_graph
.layout_
.datasets
) {
2561 selection
.push({row
: row
, column
: col
});
2568 // Older pages may still use this name.
2569 DateGraph
= Dygraph
;