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
27 Date,SeriesA,SeriesB,...
28 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
29 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
31 If the 'fractions' option is set, the input should be of the form:
33 Date,SeriesA,SeriesB,...
34 YYYYMMDD,A1/B1,A2/B2,...
35 YYYYMMDD,A1/B1,A2/B2,...
37 And error bars will be calculated automatically using a binomial distribution.
39 For further documentation and examples, see http://dygraphs.com/
44 * An interactive, zoomable graph
45 * @param {String | Function} file A file containing CSV data or a function that
46 * returns this data. The expected format for each line is
47 * YYYYMMDD,val1,val2,... or, if attrs.errorBars is set,
48 * YYYYMMDD,val1,stddev1,val2,stddev2,...
49 * @param {Object} attrs Various other attributes, e.g. errorBars determines
50 * whether the input data contains error ranges.
52 Dygraph
= function(div
, data
, opts
) {
53 if (arguments
.length
> 0) {
54 if (arguments
.length
== 4) {
55 // Old versions of dygraphs took in the series labels as a constructor
56 // parameter. This doesn't make sense anymore, but it's easy to continue
57 // to support this usage.
58 this.warn("Using deprecated four-argument dygraph constructor");
59 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
61 this.__init__(div
, data
, opts
);
66 Dygraph
.NAME
= "Dygraph";
67 Dygraph
.VERSION
= "1.2";
68 Dygraph
.__repr__
= function() {
69 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
71 Dygraph
.toString
= function() {
72 return this.__repr__();
75 // Various default values
76 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
77 Dygraph
.DEFAULT_WIDTH
= 480;
78 Dygraph
.DEFAULT_HEIGHT
= 320;
79 Dygraph
.AXIS_LINE_WIDTH
= 0.3;
81 Dygraph
.LOG_SCALE
= 10;
82 Dygraph
.LN_TEN
= Math
.log(Dygraph
.LOG_SCALE
);
83 Dygraph
.log10
= function(x
) {
84 return Math
.log(x
) / Dygraph
.LN_TEN
;
87 // Default attribute values.
88 Dygraph
.DEFAULT_ATTRS
= {
89 highlightCircleSize
: 3,
95 // TODO(danvk): move defaults from createStatusMessage_ here.
97 labelsSeparateLines
: false,
98 labelsShowZeroValues
: true,
101 showLabelsOnHighlight
: true,
103 yValueFormatter
: function(x
) { return Dygraph
.round_(x
, 2); },
108 axisLabelFontSize
: 14,
111 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
115 xValueFormatter
: Dygraph
.dateString_
,
116 xValueParser
: Dygraph
.dateParser
,
117 xTicker
: Dygraph
.dateTicker
,
124 wilsonInterval
: true, // only relevant if fractions is true
128 connectSeparatedPoints
: false,
131 hideOverlayOnMouseOut
: true,
136 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
139 // Various logging levels.
145 // Directions for panning and zooming. Use bit operations when combined
146 // values are possible.
147 Dygraph
.HORIZONTAL
= 1;
148 Dygraph
.VERTICAL
= 2;
150 // Used for initializing annotation CSS rules only once.
151 Dygraph
.addedAnnotationCSS
= false;
153 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
154 // Labels is no longer a constructor parameter, since it's typically set
155 // directly from the data source. It also conains a name for the x-axis,
156 // which the previous constructor form did not.
157 if (labels
!= null) {
158 var new_labels
= ["Date"];
159 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
160 Dygraph
.update(attrs
, { 'labels': new_labels
});
162 this.__init__(div
, file
, attrs
);
166 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
167 * and context <canvas> inside of it. See the constructor for details.
169 * @param {Element} div the Element to render the graph into.
170 * @param {String | Function} file Source data
171 * @param {Object} attrs Miscellaneous other options
174 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
175 // Hack for IE: if we're using excanvas and the document hasn't finished
176 // loading yet (and hence may not have initialized whatever it needs to
177 // initialize), then keep calling this routine periodically until it has.
178 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
179 typeof(G_vmlCanvasManager
) != 'undefined' &&
180 document
.readyState
!= 'complete') {
182 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
185 // Support two-argument constructor
186 if (attrs
== null) { attrs
= {}; }
188 // Copy the important bits into the object
189 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
192 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
193 this.previousVerticalX_
= -1;
194 this.fractions_
= attrs
.fractions
|| false;
195 this.dateWindow_
= attrs
.dateWindow
|| null;
197 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
198 this.is_initial_draw_
= true;
199 this.annotations_
= [];
201 // Clear the div. This ensure that, if multiple dygraphs are passed the same
202 // div, then only one will be drawn.
205 // If the div isn't already sized then inherit from our attrs or
206 // give it a default size.
207 if (div
.style
.width
== '') {
208 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
210 if (div
.style
.height
== '') {
211 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
213 this.width_
= parseInt(div
.style
.width
, 10);
214 this.height_
= parseInt(div
.style
.height
, 10);
215 // The div might have been specified as percent of the current window size,
216 // convert that to an appropriate number of pixels.
217 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
218 this.width_
= div
.offsetWidth
;
220 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
221 this.height_
= div
.offsetHeight
;
224 if (this.width_
== 0) {
225 this.error("dygraph has zero width. Please specify a width in pixels.");
227 if (this.height_
== 0) {
228 this.error("dygraph has zero height. Please specify a height in pixels.");
231 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
232 if (attrs
['stackedGraph']) {
233 attrs
['fillGraph'] = true;
234 // TODO(nikhilk): Add any other stackedGraph checks here.
237 // Dygraphs has many options, some of which interact with one another.
238 // To keep track of everything, we maintain two sets of options:
240 // this.user_attrs_ only options explicitly set by the user.
241 // this.attrs_ defaults, options derived from user_attrs_, data.
243 // Options are then accessed this.attr_('attr'), which first looks at
244 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
245 // defaults without overriding behavior that the user specifically asks for.
246 this.user_attrs_
= {};
247 Dygraph
.update(this.user_attrs_
, attrs
);
250 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
252 this.boundaryIds_
= [];
254 // Make a note of whether labels will be pulled from the CSV file.
255 this.labelsFromCSV_
= (this.attr_("labels") == null);
257 // Create the containing DIV and other interactive elements
258 this.createInterface_();
263 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
265 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
266 this.user_attrs_
[seriesName
] != null &&
267 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
268 return this.user_attrs_
[seriesName
][name
];
269 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
270 return this.user_attrs_
[name
];
271 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
272 return this.attrs_
[name
];
278 // TODO(danvk): any way I can get the line numbers to be this.warn call?
279 Dygraph
.prototype.log
= function(severity
, message
) {
280 if (typeof(console
) != 'undefined') {
283 console
.debug('dygraphs: ' + message
);
286 console
.info('dygraphs: ' + message
);
288 case Dygraph
.WARNING
:
289 console
.warn('dygraphs: ' + message
);
292 console
.error('dygraphs: ' + message
);
297 Dygraph
.prototype.info
= function(message
) {
298 this.log(Dygraph
.INFO
, message
);
300 Dygraph
.prototype.warn
= function(message
) {
301 this.log(Dygraph
.WARNING
, message
);
303 Dygraph
.prototype.error
= function(message
) {
304 this.log(Dygraph
.ERROR
, message
);
308 * Returns the current rolling period, as set by the user or an option.
309 * @return {Number} The number of days in the rolling window
311 Dygraph
.prototype.rollPeriod
= function() {
312 return this.rollPeriod_
;
316 * Returns the currently-visible x-range. This can be affected by zooming,
317 * panning or a call to updateOptions.
318 * Returns a two-element array: [left, right].
319 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
321 Dygraph
.prototype.xAxisRange
= function() {
322 if (this.dateWindow_
) return this.dateWindow_
;
324 // The entire chart is visible.
325 var left
= this.rawData_
[0][0];
326 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
327 return [left
, right
];
331 * Returns the currently-visible y-range for an axis. This can be affected by
332 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
333 * called with no arguments, returns the range of the first axis.
334 * Returns a two-element array: [bottom, top].
336 Dygraph
.prototype.yAxisRange
= function(idx
) {
337 if (typeof(idx
) == "undefined") idx
= 0;
338 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
339 return [ this.axes_
[idx
].computedValueRange
[0],
340 this.axes_
[idx
].computedValueRange
[1] ];
344 * Returns the currently-visible y-ranges for each axis. This can be affected by
345 * zooming, panning, calls to updateOptions, etc.
346 * Returns an array of [bottom, top] pairs, one for each y-axis.
348 Dygraph
.prototype.yAxisRanges
= function() {
350 for (var i
= 0; i
< this.axes_
.length
; i
++) {
351 ret
.push(this.yAxisRange(i
));
356 // TODO(danvk): use these functions throughout dygraphs.
358 * Convert from data coordinates to canvas/div X/Y coordinates.
359 * If specified, do this conversion for the coordinate system of a particular
360 * axis. Uses the first axis by default.
361 * Returns a two-element array: [X, Y]
363 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
364 * instead of toDomCoords(null, y, axis).
366 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
367 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
371 * Convert from data x coordinates to canvas/div X coordinate.
372 * If specified, do this conversion for the coordinate system of a particular
374 * Returns a single value or null if x is null.
376 Dygraph
.prototype.toDomXCoord
= function(x
) {
381 var area
= this.plotter_
.area
;
382 var xRange
= this.xAxisRange();
383 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
387 * Convert from data x coordinates to canvas/div Y coordinate and optional
388 * axis. Uses the first axis by default.
390 * returns a single value or null if y is null.
392 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
393 var pct
= this.toPercentYCoord(y
, axis
);
398 var area
= this.plotter_
.area
;
399 return area
.y
+ pct
* area
.h
;
403 * Convert from canvas/div coords to data coordinates.
404 * If specified, do this conversion for the coordinate system of a particular
405 * axis. Uses the first axis by default.
406 * Returns a two-element array: [X, Y].
408 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
409 * instead of toDataCoords(null, y, axis).
411 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
412 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
416 * Convert from canvas/div x coordinate to data coordinate.
418 * If x is null, this returns null.
420 Dygraph
.prototype.toDataXCoord
= function(x
) {
425 var area
= this.plotter_
.area
;
426 var xRange
= this.xAxisRange();
427 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
431 * Convert from canvas/div y coord to value.
433 * If y is null, this returns null.
434 * if axis is null, this uses the first axis.
436 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
441 var area
= this.plotter_
.area
;
442 var yRange
= this.yAxisRange(axis
);
444 if (!axis
.logscale
) {
445 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
447 // Computing the inverse of toDomCoord.
448 var pct
= (y
- area
.y
) / area
.h
450 // Computing the inverse of toPercentYCoord. The function was arrived at with
451 // the following steps:
453 // Original calcuation:
454 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
456 // Move denominator to both sides:
457 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
459 // subtract logr1, and take the negative value.
460 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
462 // Swap both sides of the equation, and we can compute the log of the
463 // return value. Which means we just need to use that as the exponent in
465 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
467 var logr1
= Dygraph
.log10(yRange
[1]);
468 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
469 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
475 * Converts a y for an axis to a percentage from the top to the
478 * If the coordinate represents a value visible on the canvas, then
479 * the value will be between 0 and 1, where 0 is the top of the canvas.
480 * However, this method will return values outside the range, as
481 * values can fall outside the canvas.
483 * If y is null, this returns null.
484 * if axis is null, this uses the first axis.
486 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
490 if (typeof(axis
) == "undefined") axis
= 0;
492 var area
= this.plotter_
.area
;
493 var yRange
= this.yAxisRange(axis
);
496 if (!this.axes_
[axis
].logscale
) {
497 // yrange[1] - y is unit distance from the bottom.
498 // yrange[1] - yrange[0] is the scale of the range.
499 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
500 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
502 var logr1
= Dygraph
.log10(yRange
[1]);
503 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
509 * Returns the number of columns (including the independent variable).
511 Dygraph
.prototype.numColumns
= function() {
512 return this.rawData_
[0].length
;
516 * Returns the number of rows (excluding any header/label row).
518 Dygraph
.prototype.numRows
= function() {
519 return this.rawData_
.length
;
523 * Returns the value in the given row and column. If the row and column exceed
524 * the bounds on the data, returns null. Also returns null if the value is
527 Dygraph
.prototype.getValue
= function(row
, col
) {
528 if (row
< 0 || row
> this.rawData_
.length
) return null;
529 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
531 return this.rawData_
[row
][col
];
534 Dygraph
.addEvent
= function(el
, evt
, fn
) {
535 var normed_fn
= function(e
) {
536 if (!e
) var e
= window
.event
;
539 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
540 el
.addEventListener(evt
, normed_fn
, false);
542 el
.attachEvent('on' + evt
, normed_fn
);
547 // Based on the article at
548 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
549 Dygraph
.cancelEvent
= function(e
) {
550 e
= e
? e
: window
.event
;
551 if (e
.stopPropagation
) {
554 if (e
.preventDefault
) {
557 e
.cancelBubble
= true;
559 e
.returnValue
= false;
564 * Generates interface elements for the Dygraph: a containing div, a div to
565 * display the current point, and a textbox to adjust the rolling average
566 * period. Also creates the Renderer/Layout elements.
569 Dygraph
.prototype.createInterface_
= function() {
570 // Create the all-enclosing graph div
571 var enclosing
= this.maindiv_
;
573 this.graphDiv
= document
.createElement("div");
574 this.graphDiv
.style
.width
= this.width_
+ "px";
575 this.graphDiv
.style
.height
= this.height_
+ "px";
576 enclosing
.appendChild(this.graphDiv
);
578 // Create the canvas for interactive parts of the chart.
579 this.canvas_
= Dygraph
.createCanvas();
580 this.canvas_
.style
.position
= "absolute";
581 this.canvas_
.width
= this.width_
;
582 this.canvas_
.height
= this.height_
;
583 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
584 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
586 // ... and for static parts of the chart.
587 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
589 // The interactive parts of the graph are drawn on top of the chart.
590 this.graphDiv
.appendChild(this.hidden_
);
591 this.graphDiv
.appendChild(this.canvas_
);
592 this.mouseEventElement_
= this.canvas_
;
595 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
596 dygraph
.mouseMove_(e
);
598 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
599 dygraph
.mouseOut_(e
);
602 // Create the grapher
603 // TODO(danvk): why does the Layout need its own set of options?
604 this.layoutOptions_
= { 'xOriginIsZero': false };
605 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
606 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
607 Dygraph
.update(this.layoutOptions_
, {
608 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
610 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
612 // TODO(danvk): why does the Renderer need its own set of options?
613 this.renderOptions_
= { colorScheme
: this.colors_
,
615 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
616 Dygraph
.update(this.renderOptions_
, this.attrs_
);
617 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
619 this.createStatusMessage_();
620 this.createDragInterface_();
624 * Detach DOM elements in the dygraph and null out all data references.
625 * Calling this when you're done with a dygraph can dramatically reduce memory
626 * usage. See, e.g., the tests/perf.html example.
628 Dygraph
.prototype.destroy
= function() {
629 var removeRecursive
= function(node
) {
630 while (node
.hasChildNodes()) {
631 removeRecursive(node
.firstChild
);
632 node
.removeChild(node
.firstChild
);
635 removeRecursive(this.maindiv_
);
637 var nullOut
= function(obj
) {
639 if (typeof(obj
[n
]) === 'object') {
645 // These may not all be necessary, but it can't hurt...
646 nullOut(this.layout_
);
647 nullOut(this.plotter_
);
652 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
653 * this particular canvas. All Dygraph work is done on this.canvas_.
654 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
655 * @return {Object} The newly-created canvas
658 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
659 var h
= Dygraph
.createCanvas();
660 h
.style
.position
= "absolute";
661 // TODO(danvk): h should be offset from canvas. canvas needs to include
662 // some extra area to make it easier to zoom in on the far left and far
663 // right. h needs to be precisely the plot area, so that clipping occurs.
664 h
.style
.top
= canvas
.style
.top
;
665 h
.style
.left
= canvas
.style
.left
;
666 h
.width
= this.width_
;
667 h
.height
= this.height_
;
668 h
.style
.width
= this.width_
+ "px"; // for IE
669 h
.style
.height
= this.height_
+ "px"; // for IE
673 // Taken from MochiKit.Color
674 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
678 if (saturation
=== 0) {
683 var i
= Math
.floor(hue
* 6);
684 var f
= (hue
* 6) - i
;
685 var p
= value
* (1 - saturation
);
686 var q
= value
* (1 - (saturation
* f
));
687 var t
= value
* (1 - (saturation
* (1 - f
)));
689 case 1: red
= q
; green
= value
; blue
= p
; break;
690 case 2: red
= p
; green
= value
; blue
= t
; break;
691 case 3: red
= p
; green
= q
; blue
= value
; break;
692 case 4: red
= t
; green
= p
; blue
= value
; break;
693 case 5: red
= value
; green
= p
; blue
= q
; break;
694 case 6: // fall through
695 case 0: red
= value
; green
= t
; blue
= p
; break;
698 red
= Math
.floor(255 * red
+ 0.5);
699 green
= Math
.floor(255 * green
+ 0.5);
700 blue
= Math
.floor(255 * blue
+ 0.5);
701 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
706 * Generate a set of distinct colors for the data series. This is done with a
707 * color wheel. Saturation/Value are customizable, and the hue is
708 * equally-spaced around the color wheel. If a custom set of colors is
709 * specified, that is used instead.
712 Dygraph
.prototype.setColors_
= function() {
713 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
714 // away with this.renderOptions_.
715 var num
= this.attr_("labels").length
- 1;
717 var colors
= this.attr_('colors');
719 var sat
= this.attr_('colorSaturation') || 1.0;
720 var val
= this.attr_('colorValue') || 0.5;
721 var half
= Math
.ceil(num
/ 2);
722 for (var i
= 1; i
<= num
; i
++) {
723 if (!this.visibility()[i
-1]) continue;
724 // alternate colors for high contrast.
725 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
726 var hue
= (1.0 * idx
/ (1 + num
));
727 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
730 for (var i
= 0; i
< num
; i
++) {
731 if (!this.visibility()[i
]) continue;
732 var colorStr
= colors
[i
% colors
.length
];
733 this.colors_
.push(colorStr
);
737 // TODO(danvk): update this w/r
/t/ the
new options system
.
738 this.renderOptions_
.colorScheme
= this.colors_
;
739 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
740 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
741 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
745 * Return the list of colors. This is either the list of colors passed in the
746 * attributes, or the autogenerated list of rgb(r,g,b) strings.
747 * @return {Array<string>} The list of colors.
749 Dygraph
.prototype.getColors
= function() {
753 // The following functions are from quirksmode.org with a modification for Safari from
754 // http://blog.firetree.net/2005/07/04/javascript-find-position/
755 // http://www.quirksmode.org/js
/findpos
.html
756 Dygraph
.findPosX
= function(obj
) {
761 curleft
+= obj
.offsetLeft
;
762 if(!obj
.offsetParent
)
764 obj
= obj
.offsetParent
;
771 Dygraph
.findPosY
= function(obj
) {
776 curtop
+= obj
.offsetTop
;
777 if(!obj
.offsetParent
)
779 obj
= obj
.offsetParent
;
789 * Create the div that contains information on the selected point(s)
790 * This goes in the top right of the canvas, unless an external div has already
794 Dygraph
.prototype.createStatusMessage_
= function() {
795 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
796 if (userLabelsDiv
&& null != userLabelsDiv
797 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
798 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
800 if (!this.attr_("labelsDiv")) {
801 var divWidth
= this.attr_('labelsDivWidth');
803 "position": "absolute",
806 "width": divWidth
+ "px",
808 "left": (this.width_
- divWidth
- 2) + "px",
809 "background": "white",
811 "overflow": "hidden"};
812 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
813 var div
= document
.createElement("div");
814 for (var name
in messagestyle
) {
815 if (messagestyle
.hasOwnProperty(name
)) {
816 div
.style
[name
] = messagestyle
[name
];
819 this.graphDiv
.appendChild(div
);
820 this.attrs_
.labelsDiv
= div
;
825 * Position the labels div so that its right edge is flush with the right edge
826 * of the charting area.
828 Dygraph
.prototype.positionLabelsDiv_
= function() {
829 // Don't touch a user-specified labelsDiv.
830 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
832 var area
= this.plotter_
.area
;
833 var div
= this.attr_("labelsDiv");
834 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
838 * Create the text box to adjust the averaging period
841 Dygraph
.prototype.createRollInterface_
= function() {
842 // Create a roller if one doesn't exist already.
844 this.roller_
= document
.createElement("input");
845 this.roller_
.type
= "text";
846 this.roller_
.style
.display
= "none";
847 this.graphDiv
.appendChild(this.roller_
);
850 var display
= this.attr_('showRoller') ? 'block' : 'none';
852 var textAttr
= { "position": "absolute",
854 "top": (this.plotter_
.area
.h
- 25) + "px",
855 "left": (this.plotter_
.area
.x
+ 1) + "px",
858 this.roller_
.size
= "2";
859 this.roller_
.value
= this.rollPeriod_
;
860 for (var name
in textAttr
) {
861 if (textAttr
.hasOwnProperty(name
)) {
862 this.roller_
.style
[name
] = textAttr
[name
];
867 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
870 // These functions are taken from MochiKit.Signal
871 Dygraph
.pageX
= function(e
) {
873 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
876 var b
= document
.body
;
878 (de
.scrollLeft
|| b
.scrollLeft
) -
879 (de
.clientLeft
|| 0);
883 Dygraph
.pageY
= function(e
) {
885 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
888 var b
= document
.body
;
890 (de
.scrollTop
|| b
.scrollTop
) -
895 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
896 return Dygraph
.pageX(e
) - context
.px
899 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
900 return Dygraph
.pageY(e
) - context
.py
903 // Called in response to an interaction model operation that
904 // should start the default panning behavior.
906 // It's used in the default callback for "mousedown" operations.
907 // Custom interaction model builders can use it to provide the default
910 Dygraph
.startPan
= function(event
, g
, context
) {
911 context
.isPanning
= true;
912 var xRange
= g
.xAxisRange();
913 context
.dateRange
= xRange
[1] - xRange
[0];
915 // Record the range of each y-axis at the start of the drag.
916 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
917 context
.is2DPan
= false;
918 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
919 var axis
= g
.axes_
[i
];
920 var yRange
= g
.yAxisRange(i
);
921 axis
.dragValueRange
= yRange
[1] - yRange
[0];
922 axis
.draggingValue
= g
.toDataYCoord(context
.dragStartY
, i
);
923 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
926 // TODO(konigsberg): Switch from all this math to toDataCoords?
927 // Seems to work for the dragging value.
928 context
.draggingDate
= (context
.dragStartX
/ g
.width_
) * context
.dateRange
+ xRange
[0];
931 // Called in response to an interaction model operation that
932 // responds to an event that pans the view.
934 // It's used in the default callback for "mousemove" operations.
935 // Custom interaction model builders can use it to provide the default
938 Dygraph
.movePan
= function(event
, g
, context
) {
939 context
.dragEndX
= g
.dragGetX_(event
, context
);
940 context
.dragEndY
= g
.dragGetY_(event
, context
);
942 // TODO(danvk): update this comment
943 // Want to have it so that:
944 // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY.
945 // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered.
946 // 3. draggingValue appears at dragEndY.
947 // 4. valueRange is unaltered.
949 var minDate
= context
.draggingDate
- (context
.dragEndX
/ g
.width_
) * context
.dateRange
;
950 var maxDate
= minDate
+ context
.dateRange
;
951 g
.dateWindow_
= [minDate
, maxDate
];
953 // y-axis scaling is automatic unless this is a full 2D pan.
954 if (context
.is2DPan
) {
955 // Adjust each axis appropriately.
956 // NOTE(konigsberg): I don't think this computation for y_frac is correct.
957 // I think it doesn't take into account the display of the x axis.
958 // See, when I tested this with console.log(y_frac), and move the mouse
959 // cursor to the botom, the largest y_frac was 0.94, and not 1.0. That
960 // could also explain why panning tends to start with a small jumpy shift.
961 var y_frac
= context
.dragEndY
/ g
.height_
;
963 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
964 var axis
= g
.axes_
[i
];
965 var maxValue
= axis
.draggingValue
+ y_frac
* axis
.dragValueRange
;
966 var minValue
= maxValue
- axis
.dragValueRange
;
967 axis
.valueWindow
= [ minValue
, maxValue
];
974 // Called in response to an interaction model operation that
975 // responds to an event that ends panning.
977 // It's used in the default callback for "mouseup" operations.
978 // Custom interaction model builders can use it to provide the default
981 Dygraph
.endPan
= function(event
, g
, context
) {
982 context
.isPanning
= false;
983 context
.is2DPan
= false;
984 context
.draggingDate
= null;
985 context
.dateRange
= null;
986 context
.valueRange
= null;
989 // Called in response to an interaction model operation that
990 // responds to an event that starts zooming.
992 // It's used in the default callback for "mousedown" operations.
993 // Custom interaction model builders can use it to provide the default
996 Dygraph
.startZoom
= function(event
, g
, context
) {
997 context
.isZooming
= true;
1000 // Called in response to an interaction model operation that
1001 // responds to an event that defines zoom boundaries.
1003 // It's used in the default callback for "mousemove" operations.
1004 // Custom interaction model builders can use it to provide the default
1005 // zooming behavior.
1007 Dygraph
.moveZoom
= function(event
, g
, context
) {
1008 context
.dragEndX
= g
.dragGetX_(event
, context
);
1009 context
.dragEndY
= g
.dragGetY_(event
, context
);
1011 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1012 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1014 // drag direction threshold for y axis is twice as large as x axis
1015 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1018 context
.dragDirection
,
1023 context
.prevDragDirection
,
1027 context
.prevEndX
= context
.dragEndX
;
1028 context
.prevEndY
= context
.dragEndY
;
1029 context
.prevDragDirection
= context
.dragDirection
;
1032 // Called in response to an interaction model operation that
1033 // responds to an event that performs a zoom based on previously defined
1036 // It's used in the default callback for "mouseup" operations.
1037 // Custom interaction model builders can use it to provide the default
1038 // zooming behavior.
1040 Dygraph
.endZoom
= function(event
, g
, context
) {
1041 context
.isZooming
= false;
1042 context
.dragEndX
= g
.dragGetX_(event
, context
);
1043 context
.dragEndY
= g
.dragGetY_(event
, context
);
1044 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1045 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1047 if (regionWidth
< 2 && regionHeight
< 2 &&
1048 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1049 // TODO(danvk): pass along more info about the points, e.g. 'x'
1050 if (g
.attr_('clickCallback') != null) {
1051 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1053 if (g
.attr_('pointClickCallback')) {
1054 // check if the click was on a particular point.
1055 var closestIdx
= -1;
1056 var closestDistance
= 0;
1057 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1058 var p
= g
.selPoints_
[i
];
1059 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1060 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1061 if (closestIdx
== -1 || distance
< closestDistance
) {
1062 closestDistance
= distance
;
1067 // Allow any click within two pixels of the dot.
1068 var radius
= g
.attr_('highlightCircleSize') + 2;
1069 if (closestDistance
<= 5 * 5) {
1070 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1075 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1076 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1077 Math
.max(context
.dragStartX
, context
.dragEndX
));
1078 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1079 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1080 Math
.max(context
.dragStartY
, context
.dragEndY
));
1082 g
.canvas_
.getContext("2d").clearRect(0, 0,
1086 context
.dragStartX
= null;
1087 context
.dragStartY
= null;
1090 Dygraph
.defaultInteractionModel
= {
1091 // Track the beginning of drag events
1092 mousedown
: function(event
, g
, context
) {
1093 context
.initializeMouseDown(event
, g
, context
);
1095 if (event
.altKey
|| event
.shiftKey
) {
1096 Dygraph
.startPan(event
, g
, context
);
1098 Dygraph
.startZoom(event
, g
, context
);
1102 // Draw zoom rectangles when the mouse is down and the user moves around
1103 mousemove
: function(event
, g
, context
) {
1104 if (context
.isZooming
) {
1105 Dygraph
.moveZoom(event
, g
, context
);
1106 } else if (context
.isPanning
) {
1107 Dygraph
.movePan(event
, g
, context
);
1111 mouseup
: function(event
, g
, context
) {
1112 if (context
.isZooming
) {
1113 Dygraph
.endZoom(event
, g
, context
);
1114 } else if (context
.isPanning
) {
1115 Dygraph
.endPan(event
, g
, context
);
1119 // Temporarily cancel the dragging event when the mouse leaves the graph
1120 mouseout
: function(event
, g
, context
) {
1121 if (context
.isZooming
) {
1122 context
.dragEndX
= null;
1123 context
.dragEndY
= null;
1127 // Disable zooming out if panning.
1128 dblclick
: function(event
, g
, context
) {
1129 if (event
.altKey
|| event
.shiftKey
) {
1132 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1133 // friendlier to public use.
1138 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1141 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1145 Dygraph
.prototype.createDragInterface_
= function() {
1147 // Tracks whether the mouse is down right now
1149 isPanning
: false, // is this drag part of a pan?
1150 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1155 dragDirection
: null,
1158 prevDragDirection
: null,
1160 // TODO(danvk): update this comment
1161 // draggingDate and draggingValue represent the [date,value] point on the
1162 // graph at which the mouse was pressed. As the mouse moves while panning,
1163 // the viewport must pan so that the mouse position points to
1164 // [draggingDate, draggingValue]
1167 // TODO(danvk): update this comment
1168 // The range in second/value units that the viewport encompasses during a
1169 // panning operation.
1172 // Utility function to convert page-wide coordinates to canvas coords
1176 initializeMouseDown
: function(event
, g
, context
) {
1177 // prevents mouse drags from selecting page text.
1178 if (event
.preventDefault
) {
1179 event
.preventDefault(); // Firefox, Chrome, etc.
1181 event
.returnValue
= false; // IE
1182 event
.cancelBubble
= true;
1185 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1186 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1187 context
.dragStartX
= g
.dragGetX_(event
, context
);
1188 context
.dragStartY
= g
.dragGetY_(event
, context
);
1192 var interactionModel
= this.attr_("interactionModel");
1194 // Self is the graph.
1197 // Function that binds the graph and context to the handler.
1198 var bindHandler
= function(handler
) {
1199 return function(event
) {
1200 handler(event
, self
, context
);
1204 for (var eventName
in interactionModel
) {
1205 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1206 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1207 bindHandler(interactionModel
[eventName
]));
1210 // If the user releases the mouse button during a drag, but not over the
1211 // canvas, then it doesn't count as a zooming action.
1212 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1213 if (context
.isZooming
|| context
.isPanning
) {
1214 context
.isZooming
= false;
1215 context
.dragStartX
= null;
1216 context
.dragStartY
= null;
1219 if (context
.isPanning
) {
1220 context
.isPanning
= false;
1221 context
.draggingDate
= null;
1222 context
.dateRange
= null;
1223 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1224 delete self
.axes_
[i
].draggingValue
;
1225 delete self
.axes_
[i
].dragValueRange
;
1232 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1233 * up any previous zoom rectangles that were drawn. This could be optimized to
1234 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1237 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1238 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1239 * @param {Number} startX The X position where the drag started, in canvas
1241 * @param {Number} endX The current X position of the drag, in canvas coords.
1242 * @param {Number} startY The Y position where the drag started, in canvas
1244 * @param {Number} endY The current Y position of the drag, in canvas coords.
1245 * @param {Number} prevDirection the value of direction on the previous call to
1246 * this function. Used to avoid excess redrawing
1247 * @param {Number} prevEndX The value of endX on the previous call to this
1248 * function. Used to avoid excess redrawing
1249 * @param {Number} prevEndY The value of endY on the previous call to this
1250 * function. Used to avoid excess redrawing
1253 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
, endY
,
1254 prevDirection
, prevEndX
, prevEndY
) {
1255 var ctx
= this.canvas_
.getContext("2d");
1257 // Clean up from the previous rect if necessary
1258 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1259 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1260 Math
.abs(startX
- prevEndX
), this.height_
);
1261 } else if (prevDirection
== Dygraph
.VERTICAL
){
1262 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1263 this.width_
, Math
.abs(startY
- prevEndY
));
1266 // Draw a light-grey rectangle to show the new viewing area
1267 if (direction
== Dygraph
.HORIZONTAL
) {
1268 if (endX
&& startX
) {
1269 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1270 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1271 Math
.abs(endX
- startX
), this.height_
);
1274 if (direction
== Dygraph
.VERTICAL
) {
1275 if (endY
&& startY
) {
1276 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1277 ctx
.fillRect(0, Math
.min(startY
, endY
),
1278 this.width_
, Math
.abs(endY
- startY
));
1284 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1285 * the canvas. The exact zoom window may be slightly larger if there are no data
1286 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1287 * which accepts dates that match the raw data. This function redraws the graph.
1289 * @param {Number} lowX The leftmost pixel value that should be visible.
1290 * @param {Number} highX The rightmost pixel value that should be visible.
1293 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1294 // Find the earliest and latest dates contained in this canvasx range.
1295 // Convert the call to date ranges of the raw data.
1296 var minDate
= this.toDataXCoord(lowX
);
1297 var maxDate
= this.toDataXCoord(highX
);
1298 this.doZoomXDates_(minDate
, maxDate
);
1302 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1303 * method with doZoomX which accepts pixel coordinates. This function redraws
1306 * @param {Number} minDate The minimum date that should be visible.
1307 * @param {Number} maxDate The maximum date that should be visible.
1310 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1311 this.dateWindow_
= [minDate
, maxDate
];
1313 if (this.attr_("zoomCallback")) {
1314 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1319 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1320 * the canvas. This function redraws the graph.
1322 * @param {Number} lowY The topmost pixel value that should be visible.
1323 * @param {Number} highY The lowest pixel value that should be visible.
1326 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1327 // Find the highest and lowest values in pixel range for each axis.
1328 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1329 // This is because pixels increase as you go down on the screen, whereas data
1330 // coordinates increase as you go up the screen.
1331 var valueRanges
= [];
1332 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1333 var hi
= this.toDataYCoord(lowY
, i
);
1334 var low
= this.toDataYCoord(highY
, i
);
1335 this.axes_
[i
].valueWindow
= [low
, hi
];
1336 valueRanges
.push([low
, hi
]);
1340 if (this.attr_("zoomCallback")) {
1341 var xRange
= this.xAxisRange();
1342 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1347 * Reset the zoom to the original view coordinates. This is the same as
1348 * double-clicking on the graph.
1352 Dygraph
.prototype.doUnzoom_
= function() {
1354 if (this.dateWindow_
!= null) {
1356 this.dateWindow_
= null;
1359 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1360 if (this.axes_
[i
].valueWindow
!= null) {
1362 delete this.axes_
[i
].valueWindow
;
1367 // Putting the drawing operation before the callback because it resets
1370 if (this.attr_("zoomCallback")) {
1371 var minDate
= this.rawData_
[0][0];
1372 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1373 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1379 * When the mouse moves in the canvas, display information about a nearby data
1380 * point and draw dots over those points in the data series. This function
1381 * takes care of cleanup of previously-drawn dots.
1382 * @param {Object} event The mousemove event from the browser.
1385 Dygraph
.prototype.mouseMove_
= function(event
) {
1386 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1387 var points
= this.layout_
.points
;
1392 // Loop through all the points and find the date nearest to our current
1394 var minDist
= 1e+100;
1396 for (var i
= 0; i
< points
.length
; i
++) {
1397 var point
= points
[i
];
1398 if (point
== null) continue;
1399 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1400 if (dist
> minDist
) continue;
1404 if (idx
>= 0) lastx
= points
[idx
].xval
;
1405 // Check that you can really highlight the last day's data
1406 var last
= points
[points
.length
-1];
1407 if (last
!= null && canvasx
> last
.canvasx
)
1408 lastx
= points
[points
.length
-1].xval
;
1410 // Extract the points we've selected
1411 this.selPoints_
= [];
1412 var l
= points
.length
;
1413 if (!this.attr_("stackedGraph")) {
1414 for (var i
= 0; i
< l
; i
++) {
1415 if (points
[i
].xval
== lastx
) {
1416 this.selPoints_
.push(points
[i
]);
1420 // Need to 'unstack' points starting from the bottom
1421 var cumulative_sum
= 0;
1422 for (var i
= l
- 1; i
>= 0; i
--) {
1423 if (points
[i
].xval
== lastx
) {
1424 var p
= {}; // Clone the point since we modify it
1425 for (var k
in points
[i
]) {
1426 p
[k
] = points
[i
][k
];
1428 p
.yval
-= cumulative_sum
;
1429 cumulative_sum
+= p
.yval
;
1430 this.selPoints_
.push(p
);
1433 this.selPoints_
.reverse();
1436 if (this.attr_("highlightCallback")) {
1437 var px
= this.lastx_
;
1438 if (px
!== null && lastx
!= px
) {
1439 // only fire if the selected point has changed.
1440 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1444 // Save last x position for callbacks.
1445 this.lastx_
= lastx
;
1447 this.updateSelection_();
1451 * Transforms layout_.points index into data row number.
1452 * @param int layout_.points index
1453 * @return int row number, or -1 if none could be found.
1456 Dygraph
.prototype.idxToRow_
= function(idx
) {
1457 if (idx
< 0) return -1;
1459 for (var i
in this.layout_
.datasets
) {
1460 if (idx
< this.layout_
.datasets
[i
].length
) {
1461 return this.boundaryIds_
[0][0]+idx
;
1463 idx
-= this.layout_
.datasets
[i
].length
;
1469 * Draw dots over the selectied points in the data series. This function
1470 * takes care of cleanup of previously-drawn dots.
1473 Dygraph
.prototype.updateSelection_
= function() {
1474 // Clear the previously drawn vertical, if there is one
1475 var ctx
= this.canvas_
.getContext("2d");
1476 if (this.previousVerticalX_
>= 0) {
1477 // Determine the maximum highlight circle size.
1478 var maxCircleSize
= 0;
1479 var labels
= this.attr_('labels');
1480 for (var i
= 1; i
< labels
.length
; i
++) {
1481 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1482 if (r
> maxCircleSize
) maxCircleSize
= r
;
1484 var px
= this.previousVerticalX_
;
1485 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1486 2 * maxCircleSize
+ 2, this.height_
);
1489 var isOK
= function(x
) { return x
&& !isNaN(x
); };
1491 if (this.selPoints_
.length
> 0) {
1492 var canvasx
= this.selPoints_
[0].canvasx
;
1494 // Set the status message to indicate the selected point(s)
1495 var replace
= this.attr_('xValueFormatter')(this.lastx_
, this) + ":";
1496 var fmtFunc
= this.attr_('yValueFormatter');
1497 var clen
= this.colors_
.length
;
1499 if (this.attr_('showLabelsOnHighlight')) {
1500 // Set the status message to indicate the selected point(s)
1501 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1502 if (!this.attr_("labelsShowZeroValues") && this.selPoints_
[i
].yval
== 0) continue;
1503 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1504 if (this.attr_("labelsSeparateLines")) {
1507 var point
= this.selPoints_
[i
];
1508 var c
= new RGBColor(this.plotter_
.colors
[point
.name
]);
1509 var yval
= fmtFunc(point
.yval
);
1510 replace
+= " <b><font color='" + c
.toHex() + "'>"
1511 + point
.name
+ "</font></b>:"
1515 this.attr_("labelsDiv").innerHTML
= replace
;
1518 // Draw colored circles over the center of each selected point
1520 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1521 if (!isOK(this.selPoints_
[i
].canvasy
)) continue;
1523 this.attr_('highlightCircleSize', this.selPoints_
[i
].name
);
1525 ctx
.fillStyle
= this.plotter_
.colors
[this.selPoints_
[i
].name
];
1526 ctx
.arc(canvasx
, this.selPoints_
[i
].canvasy
, circleSize
,
1527 0, 2 * Math
.PI
, false);
1532 this.previousVerticalX_
= canvasx
;
1537 * Set manually set selected dots, and display information about them
1538 * @param int row number that should by highlighted
1539 * false value clears the selection
1542 Dygraph
.prototype.setSelection
= function(row
) {
1543 // Extract the points we've selected
1544 this.selPoints_
= [];
1547 if (row
!== false) {
1548 row
= row
-this.boundaryIds_
[0][0];
1551 if (row
!== false && row
>= 0) {
1552 for (var i
in this.layout_
.datasets
) {
1553 if (row
< this.layout_
.datasets
[i
].length
) {
1554 var point
= this.layout_
.points
[pos
+row
];
1556 if (this.attr_("stackedGraph")) {
1557 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1560 this.selPoints_
.push(point
);
1562 pos
+= this.layout_
.datasets
[i
].length
;
1566 if (this.selPoints_
.length
) {
1567 this.lastx_
= this.selPoints_
[0].xval
;
1568 this.updateSelection_();
1571 this.clearSelection();
1577 * The mouse has left the canvas. Clear out whatever artifacts remain
1578 * @param {Object} event the mouseout event from the browser.
1581 Dygraph
.prototype.mouseOut_
= function(event
) {
1582 if (this.attr_("unhighlightCallback")) {
1583 this.attr_("unhighlightCallback")(event
);
1586 if (this.attr_("hideOverlayOnMouseOut")) {
1587 this.clearSelection();
1592 * Remove all selection from the canvas
1595 Dygraph
.prototype.clearSelection
= function() {
1596 // Get rid of the overlay data
1597 var ctx
= this.canvas_
.getContext("2d");
1598 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1599 this.attr_("labelsDiv").innerHTML
= "";
1600 this.selPoints_
= [];
1605 * Returns the number of the currently selected row
1606 * @return int row number, of -1 if nothing is selected
1609 Dygraph
.prototype.getSelection
= function() {
1610 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1614 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1615 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1616 return row
+ this.boundaryIds_
[0][0];
1622 Dygraph
.zeropad
= function(x
) {
1623 if (x
< 10) return "0" + x
; else return "" + x
;
1627 * Return a string version of the hours, minutes and seconds portion of a date.
1628 * @param {Number} date The JavaScript date (ms since epoch)
1629 * @return {String} A time of the form "HH:MM:SS"
1632 Dygraph
.hmsString_
= function(date
) {
1633 var zeropad
= Dygraph
.zeropad
;
1634 var d
= new Date(date
);
1635 if (d
.getSeconds()) {
1636 return zeropad(d
.getHours()) + ":" +
1637 zeropad(d
.getMinutes()) + ":" +
1638 zeropad(d
.getSeconds());
1640 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1645 * Convert a JS date to a string appropriate to display on an axis that
1646 * is displaying values at the stated granularity.
1647 * @param {Date} date The date to format
1648 * @param {Number} granularity One of the Dygraph granularity constants
1649 * @return {String} The formatted date
1652 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1653 if (granularity
>= Dygraph
.DECADAL
) {
1654 return date
.strftime('%Y');
1655 } else if (granularity
>= Dygraph
.MONTHLY
) {
1656 return date
.strftime('%b %y');
1658 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1659 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1660 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1662 return Dygraph
.hmsString_(date
.getTime());
1668 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1669 * @param {Number} date The JavaScript date (ms since epoch)
1670 * @return {String} A date of the form "YYYY/MM/DD"
1673 Dygraph
.dateString_
= function(date
, self
) {
1674 var zeropad
= Dygraph
.zeropad
;
1675 var d
= new Date(date
);
1678 var year
= "" + d
.getFullYear();
1679 // Get a 0 padded month string
1680 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1681 // Get a 0 padded day string
1682 var day
= zeropad(d
.getDate());
1685 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1686 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1688 return year
+ "/" + month + "/" + day
+ ret
;
1692 * Round a number to the specified number of digits past the decimal point.
1693 * @param {Number} num The number to round
1694 * @param {Number} places The number of decimals to which to round
1695 * @return {Number} The rounded number
1698 Dygraph
.round_
= function(num
, places
) {
1699 var shift
= Math
.pow(10, places
);
1700 return Math
.round(num
* shift
)/shift
;
1704 * Fires when there's data available to be graphed.
1705 * @param {String} data Raw CSV data to be plotted
1708 Dygraph
.prototype.loadedEvent_
= function(data
) {
1709 this.rawData_
= this.parseCSV_(data
);
1713 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1714 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1715 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1718 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1721 Dygraph
.prototype.addXTicks_
= function() {
1722 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1723 var startDate
, endDate
;
1724 if (this.dateWindow_
) {
1725 startDate
= this.dateWindow_
[0];
1726 endDate
= this.dateWindow_
[1];
1728 startDate
= this.rawData_
[0][0];
1729 endDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1732 var xTicks
= this.attr_('xTicker')(startDate
, endDate
, this);
1733 this.layout_
.updateOptions({xTicks
: xTicks
});
1736 // Time granularity enumeration
1737 Dygraph
.SECONDLY
= 0;
1738 Dygraph
.TWO_SECONDLY
= 1;
1739 Dygraph
.FIVE_SECONDLY
= 2;
1740 Dygraph
.TEN_SECONDLY
= 3;
1741 Dygraph
.THIRTY_SECONDLY
= 4;
1742 Dygraph
.MINUTELY
= 5;
1743 Dygraph
.TWO_MINUTELY
= 6;
1744 Dygraph
.FIVE_MINUTELY
= 7;
1745 Dygraph
.TEN_MINUTELY
= 8;
1746 Dygraph
.THIRTY_MINUTELY
= 9;
1747 Dygraph
.HOURLY
= 10;
1748 Dygraph
.TWO_HOURLY
= 11;
1749 Dygraph
.SIX_HOURLY
= 12;
1751 Dygraph
.WEEKLY
= 14;
1752 Dygraph
.MONTHLY
= 15;
1753 Dygraph
.QUARTERLY
= 16;
1754 Dygraph
.BIANNUAL
= 17;
1755 Dygraph
.ANNUAL
= 18;
1756 Dygraph
.DECADAL
= 19;
1757 Dygraph
.CENTENNIAL
= 20;
1758 Dygraph
.NUM_GRANULARITIES
= 21;
1760 Dygraph
.SHORT_SPACINGS
= [];
1761 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1762 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1763 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1764 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1765 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1766 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1767 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1768 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1769 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1770 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1771 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1772 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1773 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1774 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1775 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1779 // If we used this time granularity, how many ticks would there be?
1780 // This is only an approximation, but it's generally good enough.
1782 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1783 if (granularity
< Dygraph
.MONTHLY
) {
1784 // Generate one tick mark for every fixed interval of time.
1785 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1786 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1788 var year_mod
= 1; // e.g. to only print one point every 10 years.
1789 var num_months
= 12;
1790 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1791 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1792 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1793 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1794 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1796 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1797 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1798 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1804 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1805 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1807 // Returns an array containing {v: millis, label: label} dictionaries.
1809 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1810 var formatter
= this.attr_("xAxisLabelFormatter");
1812 if (granularity
< Dygraph
.MONTHLY
) {
1813 // Generate one tick mark for every fixed interval of time.
1814 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1815 var format
= '%d%b'; // e.g. "1Jan"
1817 // Find a time less than start_time which occurs on a "nice" time boundary
1818 // for this granularity.
1819 var g
= spacing
/ 1000;
1820 var d
= new Date(start_time
);
1821 if (g
<= 60) { // seconds
1822 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1826 if (g
<= 60) { // minutes
1827 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1832 if (g
<= 24) { // days
1833 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1838 if (g
== 7) { // one week
1839 d
.setDate(d
.getDate() - d
.getDay());
1844 start_time
= d
.getTime();
1846 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1847 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1850 // Display a tick mark on the first of a set of months of each year.
1851 // Years get a tick mark iff y % year_mod == 0. This is useful for
1852 // displaying a tick mark once every 10 years, say, on long time scales.
1854 var year_mod
= 1; // e.g. to only print one point every 10 years.
1856 if (granularity
== Dygraph
.MONTHLY
) {
1857 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1858 } else if (granularity
== Dygraph
.QUARTERLY
) {
1859 months
= [ 0, 3, 6, 9 ];
1860 } else if (granularity
== Dygraph
.BIANNUAL
) {
1862 } else if (granularity
== Dygraph
.ANNUAL
) {
1864 } else if (granularity
== Dygraph
.DECADAL
) {
1867 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1871 this.warn("Span of dates is too long");
1874 var start_year
= new Date(start_time
).getFullYear();
1875 var end_year
= new Date(end_time
).getFullYear();
1876 var zeropad
= Dygraph
.zeropad
;
1877 for (var i
= start_year
; i
<= end_year
; i
++) {
1878 if (i
% year_mod
!= 0) continue;
1879 for (var j
= 0; j
< months
.length
; j
++) {
1880 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1881 var t
= Date
.parse(date_str
);
1882 if (t
< start_time
|| t
> end_time
) continue;
1883 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1893 * Add ticks to the x-axis based on a date range.
1894 * @param {Number} startDate Start of the date window (millis since epoch)
1895 * @param {Number} endDate End of the date window (millis since epoch)
1896 * @return {Array.<Object>} Array of {label, value} tuples.
1899 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1901 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1902 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1903 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1910 return self
.GetXAxis(startDate
, endDate
, chosen
);
1912 // TODO(danvk): signal error.
1916 Dygraph
.DEFAULT_PREFERRED_LOG_TICK_VALUES
= function() {
1918 for (var power
= -39; power
<= 39; power
++) {
1919 var range
= Math
.pow(10, power
);
1920 var mults
= [1, 1.5, 2.5, 5, 7]; // [1,2,3,4,5,6,7,8,9];
1921 for (var multIdx
= 0; multIdx
< mults
.length
; multIdx
++) {
1922 var val
= range
* mults
[multIdx
];
1930 * Add ticks when the x axis has numbers on it (instead of dates)
1931 * TODO(konigsberg): Update comment.
1933 * @param {Number} minV minimum value
1934 * @param {Number} maxV maximum value
1936 * @param {function} attribute accessor function.
1937 * @return {Array.<Object>} Array of {label, value} tuples.
1940 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1941 var attr
= function(k
) {
1942 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1943 return self
.attr_(k
);
1948 for (var i
= 0; i
< vals
.length
; i
++) {
1949 ticks
.push({v
: vals
[i
]});
1952 if (axis_props
&& attr("logscale")) {
1953 var pixelsPerTick
= attr('pixelsPerYLabel');
1954 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
1955 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
1958 // Count the number of tick values would appear, if we can get at least
1959 // nTicks / 3 accept them
.
1960 for (var idx
= 0; idx
< Dygraph
.DEFAULT_PREFERRED_LOG_TICK_VALUES
.length
; idx
++) {
1961 var v
= Dygraph
.DEFAULT_PREFERRED_LOG_TICK_VALUES
[idx
];
1962 if (v
== minV
&& minIdx
== null) {
1965 if (v
> minV
&& minIdx
== null && idx
> 0) {
1968 if (maxIdx
== null && v
>= maxV
) {
1970 break; // At this point we're done.
1973 if (minIdx
== null) {
1976 if (maxIdx
== null) {
1977 maxIdx
= Dygraph
.DEFAULT_PREFERRED_LOG_TICK_VALUES
.length
- 1;
1979 if ((maxIdx
- minIdx
) * 4 >= nTicks
) {
1980 for (var idx
= minIdx
; idx
<= maxIdx
; idx
++) {
1981 ticks
.push({ v
: Dygraph
.DEFAULT_PREFERRED_LOG_TICK_VALUES
[idx
] });
1985 // ticks.length won't be 0 if the log scale function finds values to insert.
1986 if (ticks
.length
== 0) {
1988 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1989 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1990 // The first spacing greater than pixelsPerYLabel is what we use.
1991 // TODO(danvk): version that works on a log scale.
1992 if (attr("labelsKMG2")) {
1993 var mults
= [1, 2, 4, 8];
1995 var mults
= [1, 2, 5];
1997 var scale
, low_val
, high_val
, nTicks
;
1998 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1999 var pixelsPerTick
= attr('pixelsPerYLabel');
2000 for (var i
= -10; i
< 50; i
++) {
2001 if (attr("labelsKMG2")) {
2002 var base_scale
= Math
.pow(16, i
);
2004 var base_scale
= Math
.pow(10, i
);
2006 for (var j
= 0; j
< mults
.length
; j
++) {
2007 scale
= base_scale
* mults
[j
];
2008 low_val
= Math
.floor(minV
/ scale
) * scale
;
2009 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2010 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2011 var spacing
= self
.height_
/ nTicks
;
2012 // wish I could break out of both loops at once...
2013 if (spacing
> pixelsPerTick
) break;
2015 if (spacing
> pixelsPerTick
) break;
2018 // Construct the set of ticks.
2019 // Allow reverse y-axis if it's explicitly requested.
2020 if (low_val
> high_val
) scale
*= -1;
2021 for (var i
= 0; i
< nTicks
; i
++) {
2022 var tickV
= low_val
+ i
* scale
;
2023 ticks
.push( {v
: tickV
} );
2028 // Add formatted labels to the ticks.
2031 if (attr("labelsKMB")) {
2033 k_labels
= [ "K", "M", "B", "T" ];
2035 if (attr("labelsKMG2")) {
2036 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2038 k_labels
= [ "k", "M", "G", "T" ];
2040 var formatter
= attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
2042 for (var i
= 0; i
< ticks
.length
; i
++) {
2043 var tickV
= ticks
[i
].v
;
2044 var absTickV
= Math
.abs(tickV
);
2046 if (formatter
!= undefined
) {
2047 label
= formatter(tickV
);
2049 label
= Dygraph
.round_(tickV
, 2);
2051 if (k_labels
.length
) {
2052 // Round up to an appropriate unit.
2054 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2055 if (absTickV
>= n
) {
2056 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
2061 ticks
[i
].label
= label
;
2066 // Computes the range of the data series (including confidence intervals).
2067 // series is either [ [x1, y1], [x2, y2], ... ] or
2068 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2069 // Returns [low, high]
2070 Dygraph
.prototype.extremeValues_
= function(series
) {
2071 var minY
= null, maxY
= null;
2073 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2075 // With custom bars, maxY is the max of the high values.
2076 for (var j
= 0; j
< series
.length
; j
++) {
2077 var y
= series
[j
][1][0];
2079 var low
= y
- series
[j
][1][1];
2080 var high
= y
+ series
[j
][1][2];
2081 if (low
> y
) low
= y
; // this can happen with custom bars,
2082 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2083 if (maxY
== null || high
> maxY
) {
2086 if (minY
== null || low
< minY
) {
2091 for (var j
= 0; j
< series
.length
; j
++) {
2092 var y
= series
[j
][1];
2093 if (y
=== null || isNaN(y
)) continue;
2094 if (maxY
== null || y
> maxY
) {
2097 if (minY
== null || y
< minY
) {
2103 return [minY
, maxY
];
2107 * This function is called once when the chart's data is changed or the options
2108 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2109 * idea is that values derived from the chart's data can be computed here,
2110 * rather than every time the chart is drawn. This includes things like the
2111 * number of axes, rolling averages, etc.
2113 Dygraph
.prototype.predraw_
= function() {
2114 // TODO(danvk): movabilitye more computations out of drawGraph_ and into here.
2115 this.computeYAxes_();
2117 // Create a new plotter.
2118 if (this.plotter_
) this.plotter_
.clear();
2119 this.plotter_
= new DygraphCanvasRenderer(this,
2120 this.hidden_
, this.layout_
,
2121 this.renderOptions_
);
2123 // The roller sits in the bottom left corner of the chart. We don't know where
2124 // this will be until the options are available, so it's positioned here.
2125 this.createRollInterface_();
2127 // Same thing applies for the labelsDiv. It's right edge should be flush with
2128 // the right edge of the charting area (which may not be the same as the right
2129 // edge of the div, if we have two y-axes.
2130 this.positionLabelsDiv_();
2132 // If the data or options have changed, then we'd better redraw.
2137 * Update the graph with new data. This method is called when the viewing area
2138 * has changed. If the underlying data or options have changed, predraw_ will
2139 * be called before drawGraph_ is called.
2142 Dygraph
.prototype.drawGraph_
= function() {
2143 var data
= this.rawData_
;
2145 // This is used to set the second parameter to drawCallback, below.
2146 var is_initial_draw
= this.is_initial_draw_
;
2147 this.is_initial_draw_
= false;
2149 var minY
= null, maxY
= null;
2150 this.layout_
.removeAllDatasets();
2152 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2154 // Loop over the fields (series). Go from the last to the first,
2155 // because if they're stacked that's how we accumulate the values.
2157 var cumulative_y
= []; // For stacked series.
2160 var extremes
= {}; // series name -> [low, high]
2162 // Loop over all fields and create datasets
2163 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2164 if (!this.visibility()[i
- 1]) continue;
2166 var seriesName
= this.attr_("labels")[i
];
2167 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2168 var logScale
= this.attr_('logscale', i
);
2171 for (var j
= 0; j
< data
.length
; j
++) {
2172 var date
= data
[j
][0];
2173 var point
= data
[j
][i
];
2175 // On the log scale, points less than zero do not exist.
2176 // This will create a gap in the chart. Note that this ignores
2177 // connectSeparatedPoints.
2181 series
.push([date
, point
]);
2183 if (point
!= null || !connectSeparatedPoints
) {
2184 series
.push([date
, point
]);
2189 // TODO(danvk): move this into predraw_. It's insane to do it here.
2190 series
= this.rollingAverage(series
, this.rollPeriod_
);
2192 // Prune down to the desired range, if necessary (for zooming)
2193 // Because there can be lines going to points outside of the visible area,
2194 // we actually prune to visible points, plus one on either side.
2195 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2196 if (this.dateWindow_
) {
2197 var low
= this.dateWindow_
[0];
2198 var high
= this.dateWindow_
[1];
2200 // TODO(danvk): do binary search instead of linear search.
2201 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2202 var firstIdx
= null, lastIdx
= null;
2203 for (var k
= 0; k
< series
.length
; k
++) {
2204 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2207 if (series
[k
][0] <= high
) {
2211 if (firstIdx
=== null) firstIdx
= 0;
2212 if (firstIdx
> 0) firstIdx
--;
2213 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2214 if (lastIdx
< series
.length
- 1) lastIdx
++;
2215 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2216 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2217 pruned
.push(series
[k
]);
2221 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2224 var seriesExtremes
= this.extremeValues_(series
);
2227 for (var j
=0; j
<series
.length
; j
++) {
2228 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2231 } else if (this.attr_("stackedGraph")) {
2232 var l
= series
.length
;
2234 for (var j
= 0; j
< l
; j
++) {
2235 // If one data set has a NaN, let all subsequent stacked
2236 // sets inherit the NaN -- only start at 0 for the first set.
2237 var x
= series
[j
][0];
2238 if (cumulative_y
[x
] === undefined
) {
2239 cumulative_y
[x
] = 0;
2242 actual_y
= series
[j
][1];
2243 cumulative_y
[x
] += actual_y
;
2245 series
[j
] = [x
, cumulative_y
[x
]]
2247 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2248 seriesExtremes
[1] = cumulative_y
[x
];
2250 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2251 seriesExtremes
[0] = cumulative_y
[x
];
2255 extremes
[seriesName
] = seriesExtremes
;
2257 datasets
[i
] = series
;
2260 for (var i
= 1; i
< datasets
.length
; i
++) {
2261 if (!this.visibility()[i
- 1]) continue;
2262 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2265 // TODO(danvk): this method doesn't need to return anything.
2266 var out
= this.computeYAxisRanges_(extremes
);
2268 var seriesToAxisMap
= out
[1];
2269 this.layout_
.updateOptions( { yAxes
: axes
,
2270 seriesToAxisMap
: seriesToAxisMap
2275 // Tell PlotKit to use this new data and render itself
2276 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2277 this.layout_
.evaluateWithError();
2278 this.plotter_
.clear();
2279 this.plotter_
.render();
2280 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2281 this.canvas_
.height
);
2283 if (this.attr_("drawCallback") !== null) {
2284 this.attr_("drawCallback")(this, is_initial_draw
);
2289 * Determine properties of the y-axes which are independent of the data
2290 * currently being displayed. This includes things like the number of axes and
2291 * the style of the axes. It does not include the range of each axis and its
2293 * This fills in this.axes_ and this.seriesToAxisMap_.
2294 * axes_ = [ { options } ]
2295 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2296 * indices are into the axes_ array.
2298 Dygraph
.prototype.computeYAxes_
= function() {
2299 this.axes_
= [{}]; // always have at least one y-axis.
2300 this.seriesToAxisMap_
= {};
2302 // Get a list of series names.
2303 var labels
= this.attr_("labels");
2305 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2307 // all options which could be applied per-axis:
2315 'axisLabelFontSize',
2320 // Copy global axis options over to the first axis.
2321 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2322 var k
= axisOptions
[i
];
2323 var v
= this.attr_(k
);
2324 if (v
) this.axes_
[0][k
] = v
;
2327 // Go through once and add all the axes.
2328 for (var seriesName
in series
) {
2329 if (!series
.hasOwnProperty(seriesName
)) continue;
2330 var axis
= this.attr_("axis", seriesName
);
2332 this.seriesToAxisMap_
[seriesName
] = 0;
2335 if (typeof(axis
) == 'object') {
2336 // Add a new axis, making a copy of its per-axis options.
2338 Dygraph
.update(opts
, this.axes_
[0]);
2339 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2340 Dygraph
.update(opts
, axis
);
2341 this.axes_
.push(opts
);
2342 this.seriesToAxisMap_
[seriesName
] = this.axes_
.length
- 1;
2346 // Go through one more time and assign series to an axis defined by another
2347 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2348 for (var seriesName
in series
) {
2349 if (!series
.hasOwnProperty(seriesName
)) continue;
2350 var axis
= this.attr_("axis", seriesName
);
2351 if (typeof(axis
) == 'string') {
2352 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2353 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2354 "series " + axis
+ ", which does not define its own axis.");
2357 var idx
= this.seriesToAxisMap_
[axis
];
2358 this.seriesToAxisMap_
[seriesName
] = idx
;
2362 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2363 // this last so that hiding the first series doesn't destroy the axis
2364 // properties of the primary axis.
2365 var seriesToAxisFiltered
= {};
2366 var vis
= this.visibility();
2367 for (var i
= 1; i
< labels
.length
; i
++) {
2369 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2371 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2375 * Returns the number of y-axes on the chart.
2376 * @return {Number} the number of axes.
2378 Dygraph
.prototype.numAxes
= function() {
2380 for (var series
in this.seriesToAxisMap_
) {
2381 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2382 var idx
= this.seriesToAxisMap_
[series
];
2383 if (idx
> last_axis
) last_axis
= idx
;
2385 return 1 + last_axis
;
2389 * Determine the value range and tick marks for each axis.
2390 * @param {Object} extremes A mapping from seriesName -> [low, high]
2391 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2393 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2394 // Build a map from axis number -> [list of series names]
2395 var seriesForAxis
= [];
2396 for (var series
in this.seriesToAxisMap_
) {
2397 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2398 var idx
= this.seriesToAxisMap_
[series
];
2399 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2400 seriesForAxis
[idx
].push(series
);
2403 // Compute extreme values, a span and tick marks for each axis.
2404 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2405 var axis
= this.axes_
[i
];
2406 if (axis
.valueWindow
) {
2407 // This is only set if the user has zoomed on the y-axis. It is never set
2408 // by a user. It takes precedence over axis.valueRange because, if you set
2409 // valueRange, you'd still expect to be able to pan.
2410 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2411 } else if (axis
.valueRange
) {
2412 // This is a user-set value range for this axis.
2413 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2415 // Calculate the extremes of extremes.
2416 var series
= seriesForAxis
[i
];
2417 var minY
= Infinity
; // extremes[series[0]][0];
2418 var maxY
= -Infinity
; // extremes[series[0]][1];
2419 for (var j
= 0; j
< series
.length
; j
++) {
2420 minY
= Math
.min(extremes
[series
[j
]][0], minY
);
2421 maxY
= Math
.max(extremes
[series
[j
]][1], maxY
);
2423 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2425 // Add some padding and round up to an integer to be human-friendly.
2426 var span
= maxY
- minY
;
2427 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2428 if (span
== 0) { span
= maxY
; }
2432 if (axis
.logscale
) {
2433 var maxAxisY
= maxY
+ 0.1 * span
;
2434 var minAxisY
= minY
;
2436 var maxAxisY
= maxY
+ 0.1 * span
;
2437 var minAxisY
= minY
- 0.1 * span
;
2439 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2440 if (!this.attr_("avoidMinZero")) {
2441 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2442 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2445 if (this.attr_("includeZero")) {
2446 if (maxY
< 0) maxAxisY
= 0;
2447 if (minY
> 0) minAxisY
= 0;
2451 axis
.computedValueRange
= [minAxisY
, maxAxisY
];
2454 // Add ticks. By default, all axes inherit the tick positions of the
2455 // primary axis. However, if an axis is specifically marked as having
2456 // independent ticks, then that is permissible as well.
2457 if (i
== 0 || axis
.independentTicks
) {
2459 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2460 axis
.computedValueRange
[1],
2464 var p_axis
= this.axes_
[0];
2465 var p_ticks
= p_axis
.ticks
;
2466 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2467 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2468 var tick_values
= [];
2469 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2470 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2471 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2472 tick_values
.push(y_val
);
2476 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2477 axis
.computedValueRange
[1],
2478 this, axis
, tick_values
);
2482 return [this.axes_
, this.seriesToAxisMap_
];
2486 * Calculates the rolling average of a data set.
2487 * If originalData is [label, val], rolls the average of those.
2488 * If originalData is [label, [, it's interpreted as [value, stddev]
2489 * and the roll is returned in the same form, with appropriately reduced
2490 * stddev for each value.
2491 * Note that this is where fractional input (i.e. '5/10') is converted into
2493 * @param {Array} originalData The data in the appropriate format (see above)
2494 * @param {Number} rollPeriod The number of days over which to average the data
2496 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2497 if (originalData
.length
< 2)
2498 return originalData
;
2499 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2500 var rollingData
= [];
2501 var sigma
= this.attr_("sigma");
2503 if (this.fractions_
) {
2505 var den
= 0; // numerator/denominator
2507 for (var i
= 0; i
< originalData
.length
; i
++) {
2508 num
+= originalData
[i
][1][0];
2509 den
+= originalData
[i
][1][1];
2510 if (i
- rollPeriod
>= 0) {
2511 num
-= originalData
[i
- rollPeriod
][1][0];
2512 den
-= originalData
[i
- rollPeriod
][1][1];
2515 var date
= originalData
[i
][0];
2516 var value
= den
? num
/ den
: 0.0;
2517 if (this.attr_("errorBars")) {
2518 if (this.wilsonInterval_
) {
2519 // For more details on this confidence interval, see:
2520 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2522 var p
= value
< 0 ? 0 : value
, n
= den
;
2523 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2524 var denom
= 1 + sigma
* sigma
/ den
;
2525 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2526 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2527 rollingData
[i
] = [date
,
2528 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2530 rollingData
[i
] = [date
, [0, 0, 0]];
2533 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2534 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2537 rollingData
[i
] = [date
, mult
* value
];
2540 } else if (this.attr_("customBars")) {
2545 for (var i
= 0; i
< originalData
.length
; i
++) {
2546 var data
= originalData
[i
][1];
2548 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2550 if (y
!= null && !isNaN(y
)) {
2556 if (i
- rollPeriod
>= 0) {
2557 var prev
= originalData
[i
- rollPeriod
];
2558 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2565 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2566 1.0 * (mid
- low
) / count
,
2567 1.0 * (high
- mid
) / count
]];
2570 // Calculate the rolling average for the first rollPeriod - 1 points where
2571 // there is not enough data to roll over the full number of days
2572 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2573 if (!this.attr_("errorBars")){
2574 if (rollPeriod
== 1) {
2575 return originalData
;
2578 for (var i
= 0; i
< originalData
.length
; i
++) {
2581 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2582 var y
= originalData
[j
][1];
2583 if (y
== null || isNaN(y
)) continue;
2585 sum
+= originalData
[j
][1];
2588 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2590 rollingData
[i
] = [originalData
[i
][0], null];
2595 for (var i
= 0; i
< originalData
.length
; i
++) {
2599 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2600 var y
= originalData
[j
][1][0];
2601 if (y
== null || isNaN(y
)) continue;
2603 sum
+= originalData
[j
][1][0];
2604 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2607 var stddev
= Math
.sqrt(variance
) / num_ok
;
2608 rollingData
[i
] = [originalData
[i
][0],
2609 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2611 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2621 * Parses a date, returning the number of milliseconds since epoch. This can be
2622 * passed in as an xValueParser in the Dygraph constructor.
2623 * TODO(danvk): enumerate formats that this understands.
2624 * @param {String} A date in YYYYMMDD format.
2625 * @return {Number} Milliseconds since epoch.
2628 Dygraph
.dateParser
= function(dateStr
, self
) {
2631 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2632 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2633 while (dateStrSlashed
.search("-") != -1) {
2634 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2636 d
= Date
.parse(dateStrSlashed
);
2637 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2638 // TODO(danvk): remove support for this format. It's confusing.
2639 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2640 + "/" + dateStr
.substr(6,2);
2641 d
= Date
.parse(dateStrSlashed
);
2643 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2644 // "2009/07/12 12:34:56"
2645 d
= Date
.parse(dateStr
);
2648 if (!d
|| isNaN(d
)) {
2649 self
.error("Couldn't parse " + dateStr
+ " as a date");
2655 * Detects the type of the str (date or numeric) and sets the various
2656 * formatting attributes in this.attrs_ based on this type.
2657 * @param {String} str An x value.
2660 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2662 if (str
.indexOf('-') >= 0 ||
2663 str
.indexOf('/') >= 0 ||
2664 isNaN(parseFloat(str
))) {
2666 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2667 // TODO(danvk): remove support for this format.
2672 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2673 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2674 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2675 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2677 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2678 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2679 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2680 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2685 * Parses a string in a special csv format. We expect a csv file where each
2686 * line is a date point, and the first field in each line is the date string.
2687 * We also expect that all remaining fields represent series.
2688 * if the errorBars attribute is set, then interpret the fields as:
2689 * date, series1, stddev1, series2, stddev2, ...
2690 * @param {Array.<Object>} data See above.
2693 * @return Array.<Object> An array with one entry for each row. These entries
2694 * are an array of cells in that row. The first entry is the parsed x-value for
2695 * the row. The second, third, etc. are the y-values. These can take on one of
2696 * three forms, depending on the CSV and constructor parameters:
2698 * 2. [ value, stddev ]
2699 * 3. [ low value, center value, high value ]
2701 Dygraph
.prototype.parseCSV_
= function(data
) {
2703 var lines
= data
.split("\n");
2705 // Use the default delimiter or fall back to a tab if that makes sense.
2706 var delim
= this.attr_('delimiter');
2707 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2712 if (this.labelsFromCSV_
) {
2714 this.attrs_
.labels
= lines
[0].split(delim
);
2717 // Parse the x as a float or return null if it's not a number.
2718 var parseFloatOrNull
= function(x
) {
2719 var val
= parseFloat(x
);
2720 // isFinite() returns false for NaN and +/-Infinity
.
2721 return isFinite(val
) ? val
: null;
2725 var defaultParserSet
= false; // attempt to auto-detect x value type
2726 var expectedCols
= this.attr_("labels").length
;
2727 var outOfOrder
= false;
2728 for (var i
= start
; i
< lines
.length
; i
++) {
2729 var line
= lines
[i
];
2730 if (line
.length
== 0) continue; // skip blank lines
2731 if (line
[0] == '#') continue; // skip comment lines
2732 var inFields
= line
.split(delim
);
2733 if (inFields
.length
< 2) continue;
2736 if (!defaultParserSet
) {
2737 this.detectTypeFromString_(inFields
[0]);
2738 xParser
= this.attr_("xValueParser");
2739 defaultParserSet
= true;
2741 fields
[0] = xParser(inFields
[0], this);
2743 // If fractions are expected, parse the numbers as "A/B
"
2744 if (this.fractions_) {
2745 for (var j = 1; j < inFields.length; j++) {
2746 // TODO(danvk): figure out an appropriate way to flag parse errors.
2747 var vals = inFields[j].split("/");
2748 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
2750 } else if (this.attr_("errorBars
")) {
2751 // If there are error bars, values are (value, stddev) pairs
2752 for (var j = 1; j < inFields.length; j += 2)
2753 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2754 parseFloatOrNull(inFields[j + 1])];
2755 } else if (this.attr_("customBars
")) {
2756 // Bars are a low;center;high tuple
2757 for (var j = 1; j < inFields.length; j++) {
2758 var vals = inFields[j].split(";");
2759 fields[j] = [ parseFloatOrNull(vals[0]),
2760 parseFloatOrNull(vals[1]),
2761 parseFloatOrNull(vals[2]) ];
2764 // Values are just numbers
2765 for (var j = 1; j < inFields.length; j++) {
2766 fields[j] = parseFloatOrNull(inFields[j]);
2769 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2774 if (fields.length != expectedCols) {
2775 this.error("Number of columns
in line
" + i + " (" + fields.length +
2776 ") does not agree
with number of
labels (" + expectedCols +
2782 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2783 ret.sort(function(a,b) { return a[0] - b[0] });
2790 * The user has provided their data as a pre-packaged JS array. If the x values
2791 * are numeric, this is the same as dygraphs' internal format. If the x values
2792 * are dates, we need to convert them from Date objects to ms since epoch.
2793 * @param {Array.<Object>} data
2794 * @return {Array.<Object>} data with numeric x values.
2796 Dygraph.prototype.parseArray_ = function(data) {
2797 // Peek at the first x value to see if it's numeric.
2798 if (data.length == 0) {
2799 this.error("Can
't plot empty data set");
2802 if (data[0].length == 0) {
2803 this.error("Data set cannot contain an empty row");
2807 if (this.attr_("labels") == null) {
2808 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2809 "in the options parameter");
2810 this.attrs_.labels = [ "X" ];
2811 for (var i = 1; i < data[0].length; i++) {
2812 this.attrs_.labels.push("Y" + i);
2816 if (Dygraph.isDateLike(data[0][0])) {
2817 // Some intelligent defaults for a date x-axis.
2818 this.attrs_.xValueFormatter = Dygraph.dateString_;
2819 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2820 this.attrs_.xTicker = Dygraph.dateTicker;
2822 // Assume they're all dates
.
2823 var parsedData
= Dygraph
.clone(data
);
2824 for (var i
= 0; i
< data
.length
; i
++) {
2825 if (parsedData
[i
].length
== 0) {
2826 this.error("Row " + (1 + i
) + " of data is empty");
2829 if (parsedData
[i
][0] == null
2830 || typeof(parsedData
[i
][0].getTime
) != 'function'
2831 || isNaN(parsedData
[i
][0].getTime())) {
2832 this.error("x value in row " + (1 + i
) + " is not a Date");
2835 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2839 // Some intelligent defaults for a numeric x-axis.
2840 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2841 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2847 * Parses a DataTable object from gviz.
2848 * The data is expected to have a first column that is either a date or a
2849 * number. All subsequent columns must be numbers. If there is a clear mismatch
2850 * between this.xValueParser_ and the type of the first column, it will be
2851 * fixed. Fills out rawData_.
2852 * @param {Array.<Object>} data See above.
2855 Dygraph
.prototype.parseDataTable_
= function(data
) {
2856 var cols
= data
.getNumberOfColumns();
2857 var rows
= data
.getNumberOfRows();
2859 var indepType
= data
.getColumnType(0);
2860 if (indepType
== 'date' || indepType
== 'datetime') {
2861 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2862 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2863 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2864 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2865 } else if (indepType
== 'number') {
2866 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2867 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2868 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2869 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2871 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2872 "column 1 of DataTable input (Got '" + indepType
+ "')");
2876 // Array of the column indices which contain data (and not annotations).
2878 var annotationCols
= {}; // data index -> [annotation cols]
2879 var hasAnnotations
= false;
2880 for (var i
= 1; i
< cols
; i
++) {
2881 var type
= data
.getColumnType(i
);
2882 if (type
== 'number') {
2884 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2885 // This is OK -- it's an annotation column.
2886 var dataIdx
= colIdx
[colIdx
.length
- 1];
2887 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2888 annotationCols
[dataIdx
] = [i
];
2890 annotationCols
[dataIdx
].push(i
);
2892 hasAnnotations
= true;
2894 this.error("Only 'number' is supported as a dependent type with Gviz." +
2895 " 'string' is only supported if displayAnnotations is true");
2899 // Read column labels
2900 // TODO(danvk): add support back for errorBars
2901 var labels
= [data
.getColumnLabel(0)];
2902 for (var i
= 0; i
< colIdx
.length
; i
++) {
2903 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2904 if (this.attr_("errorBars")) i
+= 1;
2906 this.attrs_
.labels
= labels
;
2907 cols
= labels
.length
;
2910 var outOfOrder
= false;
2911 var annotations
= [];
2912 for (var i
= 0; i
< rows
; i
++) {
2914 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2915 data
.getValue(i
, 0) === null) {
2916 this.warn("Ignoring row " + i
+
2917 " of DataTable because of undefined or null first column.");
2921 if (indepType
== 'date' || indepType
== 'datetime') {
2922 row
.push(data
.getValue(i
, 0).getTime());
2924 row
.push(data
.getValue(i
, 0));
2926 if (!this.attr_("errorBars")) {
2927 for (var j
= 0; j
< colIdx
.length
; j
++) {
2928 var col
= colIdx
[j
];
2929 row
.push(data
.getValue(i
, col
));
2930 if (hasAnnotations
&&
2931 annotationCols
.hasOwnProperty(col
) &&
2932 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2934 ann
.series
= data
.getColumnLabel(col
);
2936 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2938 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2939 if (k
) ann
.text
+= "\n";
2940 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2942 annotations
.push(ann
);
2946 for (var j
= 0; j
< cols
- 1; j
++) {
2947 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2950 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2954 // Strip out infinities, which give dygraphs problems later on.
2955 for (var j
= 0; j
< row
.length
; j
++) {
2956 if (!isFinite(row
[j
])) row
[j
] = null;
2962 this.warn("DataTable is out of order; order it correctly to speed loading.");
2963 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2965 this.rawData_
= ret
;
2967 if (annotations
.length
> 0) {
2968 this.setAnnotations(annotations
, true);
2972 // These functions are all based on MochiKit.
2973 Dygraph
.update
= function (self
, o
) {
2974 if (typeof(o
) != 'undefined' && o
!== null) {
2976 if (o
.hasOwnProperty(k
)) {
2984 Dygraph
.isArrayLike
= function (o
) {
2985 var typ
= typeof(o
);
2987 (typ
!= 'object' && !(typ
== 'function' &&
2988 typeof(o
.item
) == 'function')) ||
2990 typeof(o
.length
) != 'number' ||
2998 Dygraph
.isDateLike
= function (o
) {
2999 if (typeof(o
) != "object" || o
=== null ||
3000 typeof(o
.getTime
) != 'function') {
3006 Dygraph
.clone
= function(o
) {
3007 // TODO(danvk): figure out how MochiKit's version works
3009 for (var i
= 0; i
< o
.length
; i
++) {
3010 if (Dygraph
.isArrayLike(o
[i
])) {
3011 r
.push(Dygraph
.clone(o
[i
]));
3021 * Get the CSV data. If it's in a function, call that function. If it's in a
3022 * file, do an XMLHttpRequest to get it.
3025 Dygraph
.prototype.start_
= function() {
3026 if (typeof this.file_
== 'function') {
3027 // CSV string. Pretend we got it via XHR.
3028 this.loadedEvent_(this.file_());
3029 } else if (Dygraph
.isArrayLike(this.file_
)) {
3030 this.rawData_
= this.parseArray_(this.file_
);
3032 } else if (typeof this.file_
== 'object' &&
3033 typeof this.file_
.getColumnRange
== 'function') {
3034 // must be a DataTable from gviz.
3035 this.parseDataTable_(this.file_
);
3037 } else if (typeof this.file_
== 'string') {
3038 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3039 if (this.file_
.indexOf('\n') >= 0) {
3040 this.loadedEvent_(this.file_
);
3042 var req
= new XMLHttpRequest();
3044 req
.onreadystatechange
= function () {
3045 if (req
.readyState
== 4) {
3046 if (req
.status
== 200) {
3047 caller
.loadedEvent_(req
.responseText
);
3052 req
.open("GET", this.file_
, true);
3056 this.error("Unknown data format: " + (typeof this.file_
));
3061 * Changes various properties of the graph. These can include:
3063 * <li>file: changes the source data for the graph</li>
3064 * <li>errorBars: changes whether the data contains stddev</li>
3066 * @param {Object} attrs The new properties and values
3068 Dygraph
.prototype.updateOptions
= function(attrs
) {
3069 // TODO(danvk): this is a mess. Rethink this function.
3070 if ('rollPeriod' in attrs
) {
3071 this.rollPeriod_
= attrs
.rollPeriod
;
3073 if ('dateWindow' in attrs
) {
3074 this.dateWindow_
= attrs
.dateWindow
;
3077 // TODO(danvk): validate per-series options.
3082 // highlightCircleSize
3084 Dygraph
.update(this.user_attrs_
, attrs
);
3085 Dygraph
.update(this.renderOptions_
, attrs
);
3087 this.labelsFromCSV_
= (this.attr_("labels") == null);
3089 // TODO(danvk): this doesn't match the constructor logic
3090 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3091 if (attrs
['file']) {
3092 this.file_
= attrs
['file'];
3100 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3101 * containing div (which has presumably changed size since the dygraph was
3102 * instantiated. If the width/height are specified, the div will be resized.
3104 * This is far more efficient than destroying and re-instantiating a
3105 * Dygraph, since it doesn't have to reparse the underlying data.
3107 * @param {Number} width Width (in pixels)
3108 * @param {Number} height Height (in pixels)
3110 Dygraph
.prototype.resize
= function(width
, height
) {
3111 if (this.resize_lock
) {
3114 this.resize_lock
= true;
3116 if ((width
=== null) != (height
=== null)) {
3117 this.warn("Dygraph.resize() should be called with zero parameters or " +
3118 "two non-NULL parameters. Pretending it was zero.");
3119 width
= height
= null;
3122 // TODO(danvk): there should be a clear() method.
3123 this.maindiv_
.innerHTML
= "";
3124 this.attrs_
.labelsDiv
= null;
3127 this.maindiv_
.style
.width
= width
+ "px";
3128 this.maindiv_
.style
.height
= height
+ "px";
3129 this.width_
= width
;
3130 this.height_
= height
;
3132 this.width_
= this.maindiv_
.offsetWidth
;
3133 this.height_
= this.maindiv_
.offsetHeight
;
3136 this.createInterface_();
3139 this.resize_lock
= false;
3143 * Adjusts the number of days in the rolling average. Updates the graph to
3144 * reflect the new averaging period.
3145 * @param {Number} length Number of days over which to average the data.
3147 Dygraph
.prototype.adjustRoll
= function(length
) {
3148 this.rollPeriod_
= length
;
3153 * Returns a boolean array of visibility statuses.
3155 Dygraph
.prototype.visibility
= function() {
3156 // Do lazy-initialization, so that this happens after we know the number of
3158 if (!this.attr_("visibility")) {
3159 this.attrs_
["visibility"] = [];
3161 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3162 this.attr_("visibility").push(true);
3164 return this.attr_("visibility");
3168 * Changes the visiblity of a series.
3170 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3171 var x
= this.visibility();
3172 if (num
< 0 || num
>= x
.length
) {
3173 this.warn("invalid series number in setVisibility: " + num
);
3181 * Update the list of annotations and redraw the chart.
3183 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3184 // Only add the annotation CSS rule once we know it will be used.
3185 Dygraph
.addAnnotationRule();
3186 this.annotations_
= ann
;
3187 this.layout_
.setAnnotations(this.annotations_
);
3188 if (!suppressDraw
) {
3194 * Return the list of annotations.
3196 Dygraph
.prototype.annotations
= function() {
3197 return this.annotations_
;
3201 * Get the index of a series (column) given its name. The first column is the
3202 * x-axis, so the data series start with index 1.
3204 Dygraph
.prototype.indexFromSetName
= function(name
) {
3205 var labels
= this.attr_("labels");
3206 for (var i
= 0; i
< labels
.length
; i
++) {
3207 if (labels
[i
] == name
) return i
;
3212 Dygraph
.addAnnotationRule
= function() {
3213 if (Dygraph
.addedAnnotationCSS
) return;
3215 var rule
= "border: 1px solid black; " +
3216 "background-color: white; " +
3217 "text-align: center;";
3219 var styleSheetElement
= document
.createElement("style");
3220 styleSheetElement
.type
= "text/css";
3221 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3223 // Find the first style sheet that we can access.
3224 // We may not add a rule to a style sheet from another domain for security
3225 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3226 // adds its own style sheets from google.com.
3227 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3228 if (document
.styleSheets
[i
].disabled
) continue;
3229 var mysheet
= document
.styleSheets
[i
];
3231 if (mysheet
.insertRule
) { // Firefox
3232 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3233 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3234 } else if (mysheet
.addRule
) { // IE
3235 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3237 Dygraph
.addedAnnotationCSS
= true;
3240 // Was likely a security exception.
3244 this.warn("Unable to add default annotation CSS rule; display may be off.");
3248 * Create a new canvas element. This is more complex than a simple
3249 * document.createElement("canvas") because of IE and excanvas.
3251 Dygraph
.createCanvas
= function() {
3252 var canvas
= document
.createElement("canvas");
3254 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3255 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3256 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3264 * A wrapper around Dygraph that implements the gviz API.
3265 * @param {Object} container The DOM object the visualization should live in.
3267 Dygraph
.GVizChart
= function(container
) {
3268 this.container
= container
;
3271 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3272 // Clear out any existing dygraph.
3273 // TODO(danvk): would it make more sense to simply redraw using the current
3274 // date_graph object?
3275 this.container
.innerHTML
= '';
3276 if (typeof(this.date_graph
) != 'undefined') {
3277 this.date_graph
.destroy();
3280 this.date_graph
= new Dygraph(this.container
, data
, options
);
3284 * Google charts compatible setSelection
3285 * Only row selection is supported, all points in the row will be highlighted
3286 * @param {Array} array of the selected cells
3289 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3291 if (selection_array
.length
) {
3292 row
= selection_array
[0].row
;
3294 this.date_graph
.setSelection(row
);
3298 * Google charts compatible getSelection implementation
3299 * @return {Array} array of the selected cells
3302 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3305 var row
= this.date_graph
.getSelection();
3307 if (row
< 0) return selection
;
3310 for (var i
in this.date_graph
.layout_
.datasets
) {
3311 selection
.push({row
: row
, column
: col
});
3318 // Older pages may still use this name.
3319 DateGraph
= Dygraph
;