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(a
,b
) { return Dygraph
.numberFormatter(a
,b
); },
104 digitsAfterDecimal
: 2,
110 axisLabelFontSize
: 14,
113 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
117 xValueFormatter
: Dygraph
.dateString_
,
118 xValueParser
: Dygraph
.dateParser
,
119 xTicker
: Dygraph
.dateTicker
,
126 wilsonInterval
: true, // only relevant if fractions is true
130 connectSeparatedPoints
: false,
133 hideOverlayOnMouseOut
: true,
135 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
136 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
141 // Sizes of the various chart labels.
146 interactionModel
: null // will be set to Dygraph.defaultInteractionModel.
149 // Various logging levels.
155 // Directions for panning and zooming. Use bit operations when combined
156 // values are possible.
157 Dygraph
.HORIZONTAL
= 1;
158 Dygraph
.VERTICAL
= 2;
160 // Used for initializing annotation CSS rules only once.
161 Dygraph
.addedAnnotationCSS
= false;
163 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
164 // Labels is no longer a constructor parameter, since it's typically set
165 // directly from the data source. It also conains a name for the x-axis,
166 // which the previous constructor form did not.
167 if (labels
!= null) {
168 var new_labels
= ["Date"];
169 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
170 Dygraph
.update(attrs
, { 'labels': new_labels
});
172 this.__init__(div
, file
, attrs
);
176 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
177 * and context <canvas> inside of it. See the constructor for details.
179 * @param {Element} div the Element to render the graph into.
180 * @param {String | Function} file Source data
181 * @param {Object} attrs Miscellaneous other options
184 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
185 // Hack for IE: if we're using excanvas and the document hasn't finished
186 // loading yet (and hence may not have initialized whatever it needs to
187 // initialize), then keep calling this routine periodically until it has.
188 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
189 typeof(G_vmlCanvasManager
) != 'undefined' &&
190 document
.readyState
!= 'complete') {
192 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
195 // Support two-argument constructor
196 if (attrs
== null) { attrs
= {}; }
198 // Copy the important bits into the object
199 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
202 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
203 this.previousVerticalX_
= -1;
204 this.fractions_
= attrs
.fractions
|| false;
205 this.dateWindow_
= attrs
.dateWindow
|| null;
207 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
208 this.is_initial_draw_
= true;
209 this.annotations_
= [];
211 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
212 this.zoomed_x_
= false;
213 this.zoomed_y_
= false;
215 // Clear the div. This ensure that, if multiple dygraphs are passed the same
216 // div, then only one will be drawn.
219 // If the div isn't already sized then inherit from our attrs or
220 // give it a default size.
221 if (div
.style
.width
== '') {
222 div
.style
.width
= (attrs
.width
|| Dygraph
.DEFAULT_WIDTH
) + "px";
224 if (div
.style
.height
== '') {
225 div
.style
.height
= (attrs
.height
|| Dygraph
.DEFAULT_HEIGHT
) + "px";
227 this.width_
= parseInt(div
.style
.width
, 10);
228 this.height_
= parseInt(div
.style
.height
, 10);
229 // The div might have been specified as percent of the current window size,
230 // convert that to an appropriate number of pixels.
231 if (div
.style
.width
.indexOf("%") == div
.style
.width
.length
- 1) {
232 this.width_
= div
.offsetWidth
;
234 if (div
.style
.height
.indexOf("%") == div
.style
.height
.length
- 1) {
235 this.height_
= div
.offsetHeight
;
238 if (this.width_
== 0) {
239 this.error("dygraph has zero width. Please specify a width in pixels.");
241 if (this.height_
== 0) {
242 this.error("dygraph has zero height. Please specify a height in pixels.");
245 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
246 if (attrs
['stackedGraph']) {
247 attrs
['fillGraph'] = true;
248 // TODO(nikhilk): Add any other stackedGraph checks here.
251 // Dygraphs has many options, some of which interact with one another.
252 // To keep track of everything, we maintain two sets of options:
254 // this.user_attrs_ only options explicitly set by the user.
255 // this.attrs_ defaults, options derived from user_attrs_, data.
257 // Options are then accessed this.attr_('attr'), which first looks at
258 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
259 // defaults without overriding behavior that the user specifically asks for.
260 this.user_attrs_
= {};
261 Dygraph
.update(this.user_attrs_
, attrs
);
264 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
266 this.boundaryIds_
= [];
268 // Make a note of whether labels will be pulled from the CSV file.
269 this.labelsFromCSV_
= (this.attr_("labels") == null);
271 // Create the containing DIV and other interactive elements
272 this.createInterface_();
278 * Returns the zoomed status of the chart for one or both axes.
280 * Axis is an optional parameter. Can be set to 'x' or 'y'.
282 * The zoomed status for an axis is set whenever a user zooms using the mouse
283 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
284 * option is also specified).
286 Dygraph
.prototype.isZoomed
= function(axis
) {
287 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
288 if (axis
== 'x') return this.zoomed_x_
;
289 if (axis
== 'y') return this.zoomed_y_
;
290 throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or 'y'.";
293 Dygraph
.prototype.toString
= function() {
294 var maindiv
= this.maindiv_
;
295 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
296 return "[Dygraph " + id
+ "]";
299 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
300 // <REMOVE_FOR_COMBINED>
301 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
302 this.error('Must include options reference JS for testing');
303 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
304 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
305 'in the Dygraphs.OPTIONS_REFERENCE listing.');
306 // Only log this error once.
307 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
309 // </REMOVE_FOR_COMBINED
>
311 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
312 this.user_attrs_
[seriesName
] != null &&
313 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
314 return this.user_attrs_
[seriesName
][name
];
315 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
316 return this.user_attrs_
[name
];
317 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
318 return this.attrs_
[name
];
324 // TODO(danvk): any way I can get the line numbers to be this.warn call?
325 Dygraph
.prototype.log
= function(severity
, message
) {
326 if (typeof(console
) != 'undefined') {
329 console
.debug('dygraphs: ' + message
);
332 console
.info('dygraphs: ' + message
);
334 case Dygraph
.WARNING
:
335 console
.warn('dygraphs: ' + message
);
338 console
.error('dygraphs: ' + message
);
343 Dygraph
.prototype.info
= function(message
) {
344 this.log(Dygraph
.INFO
, message
);
346 Dygraph
.prototype.warn
= function(message
) {
347 this.log(Dygraph
.WARNING
, message
);
349 Dygraph
.prototype.error
= function(message
) {
350 this.log(Dygraph
.ERROR
, message
);
354 * Returns the current rolling period, as set by the user or an option.
355 * @return {Number} The number of points in the rolling window
357 Dygraph
.prototype.rollPeriod
= function() {
358 return this.rollPeriod_
;
362 * Returns the currently-visible x-range. This can be affected by zooming,
363 * panning or a call to updateOptions.
364 * Returns a two-element array: [left, right].
365 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
367 Dygraph
.prototype.xAxisRange
= function() {
368 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
372 * Returns the lower- and upper-bound x-axis values of the
375 Dygraph
.prototype.xAxisExtremes
= function() {
376 var left
= this.rawData_
[0][0];
377 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
378 return [left
, right
];
382 * Returns the currently-visible y-range for an axis. This can be affected by
383 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
384 * called with no arguments, returns the range of the first axis.
385 * Returns a two-element array: [bottom, top].
387 Dygraph
.prototype.yAxisRange
= function(idx
) {
388 if (typeof(idx
) == "undefined") idx
= 0;
389 if (idx
< 0 || idx
>= this.axes_
.length
) return null;
390 return [ this.axes_
[idx
].computedValueRange
[0],
391 this.axes_
[idx
].computedValueRange
[1] ];
395 * Returns the currently-visible y-ranges for each axis. This can be affected by
396 * zooming, panning, calls to updateOptions, etc.
397 * Returns an array of [bottom, top] pairs, one for each y-axis.
399 Dygraph
.prototype.yAxisRanges
= function() {
401 for (var i
= 0; i
< this.axes_
.length
; i
++) {
402 ret
.push(this.yAxisRange(i
));
407 // TODO(danvk): use these functions throughout dygraphs.
409 * Convert from data coordinates to canvas/div X/Y coordinates.
410 * If specified, do this conversion for the coordinate system of a particular
411 * axis. Uses the first axis by default.
412 * Returns a two-element array: [X, Y]
414 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
415 * instead of toDomCoords(null, y, axis).
417 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
418 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
422 * Convert from data x coordinates to canvas/div X coordinate.
423 * If specified, do this conversion for the coordinate system of a particular
425 * Returns a single value or null if x is null.
427 Dygraph
.prototype.toDomXCoord
= function(x
) {
432 var area
= this.plotter_
.area
;
433 var xRange
= this.xAxisRange();
434 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
438 * Convert from data x coordinates to canvas/div Y coordinate and optional
439 * axis. Uses the first axis by default.
441 * returns a single value or null if y is null.
443 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
444 var pct
= this.toPercentYCoord(y
, axis
);
449 var area
= this.plotter_
.area
;
450 return area
.y
+ pct
* area
.h
;
454 * Convert from canvas/div coords to data coordinates.
455 * If specified, do this conversion for the coordinate system of a particular
456 * axis. Uses the first axis by default.
457 * Returns a two-element array: [X, Y].
459 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
460 * instead of toDataCoords(null, y, axis).
462 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
463 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
467 * Convert from canvas/div x coordinate to data coordinate.
469 * If x is null, this returns null.
471 Dygraph
.prototype.toDataXCoord
= function(x
) {
476 var area
= this.plotter_
.area
;
477 var xRange
= this.xAxisRange();
478 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
482 * Convert from canvas/div y coord to value.
484 * If y is null, this returns null.
485 * if axis is null, this uses the first axis.
487 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
492 var area
= this.plotter_
.area
;
493 var yRange
= this.yAxisRange(axis
);
495 if (typeof(axis
) == "undefined") axis
= 0;
496 if (!this.axes_
[axis
].logscale
) {
497 return yRange
[0] + (area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
499 // Computing the inverse of toDomCoord.
500 var pct
= (y
- area
.y
) / area
.h
502 // Computing the inverse of toPercentYCoord. The function was arrived at with
503 // the following steps:
505 // Original calcuation:
506 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
508 // Move denominator to both sides:
509 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
511 // subtract logr1, and take the negative value.
512 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
514 // Swap both sides of the equation, and we can compute the log of the
515 // return value. Which means we just need to use that as the exponent in
517 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
519 var logr1
= Dygraph
.log10(yRange
[1]);
520 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
521 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
527 * Converts a y for an axis to a percentage from the top to the
528 * bottom of the drawing area.
530 * If the coordinate represents a value visible on the canvas, then
531 * the value will be between 0 and 1, where 0 is the top of the canvas.
532 * However, this method will return values outside the range, as
533 * values can fall outside the canvas.
535 * If y is null, this returns null.
536 * if axis is null, this uses the first axis.
538 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
542 if (typeof(axis
) == "undefined") axis
= 0;
544 var area
= this.plotter_
.area
;
545 var yRange
= this.yAxisRange(axis
);
548 if (!this.axes_
[axis
].logscale
) {
549 // yRange[1] - y is unit distance from the bottom.
550 // yRange[1] - yRange[0] is the scale of the range.
551 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
552 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
554 var logr1
= Dygraph
.log10(yRange
[1]);
555 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
561 * Converts an x value to a percentage from the left to the right of
564 * If the coordinate represents a value visible on the canvas, then
565 * the value will be between 0 and 1, where 0 is the left of the canvas.
566 * However, this method will return values outside the range, as
567 * values can fall outside the canvas.
569 * If x is null, this returns null.
571 Dygraph
.prototype.toPercentXCoord
= function(x
) {
576 var xRange
= this.xAxisRange();
577 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
581 * Returns the number of columns (including the independent variable).
583 Dygraph
.prototype.numColumns
= function() {
584 return this.rawData_
[0].length
;
588 * Returns the number of rows (excluding any header/label row).
590 Dygraph
.prototype.numRows
= function() {
591 return this.rawData_
.length
;
595 * Returns the value in the given row and column. If the row and column exceed
596 * the bounds on the data, returns null. Also returns null if the value is
599 Dygraph
.prototype.getValue
= function(row
, col
) {
600 if (row
< 0 || row
> this.rawData_
.length
) return null;
601 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
603 return this.rawData_
[row
][col
];
606 Dygraph
.addEvent
= function(el
, evt
, fn
) {
607 var normed_fn
= function(e
) {
608 if (!e
) var e
= window
.event
;
611 if (window
.addEventListener
) { // Mozilla, Netscape, Firefox
612 el
.addEventListener(evt
, normed_fn
, false);
614 el
.attachEvent('on' + evt
, normed_fn
);
619 // Based on the article at
620 // http://www.switchonthecode.com/tutorials
/javascript
-tutorial
-the
-scroll
-wheel
621 Dygraph
.cancelEvent
= function(e
) {
622 e
= e
? e
: window
.event
;
623 if (e
.stopPropagation
) {
626 if (e
.preventDefault
) {
629 e
.cancelBubble
= true;
631 e
.returnValue
= false;
637 * Generates interface elements for the Dygraph: a containing div, a div to
638 * display the current point, and a textbox to adjust the rolling average
639 * period. Also creates the Renderer/Layout elements.
642 Dygraph
.prototype.createInterface_
= function() {
643 // Create the all-enclosing graph div
644 var enclosing
= this.maindiv_
;
646 this.graphDiv
= document
.createElement("div");
647 this.graphDiv
.style
.width
= this.width_
+ "px";
648 this.graphDiv
.style
.height
= this.height_
+ "px";
649 enclosing
.appendChild(this.graphDiv
);
651 // Create the canvas for interactive parts of the chart.
652 this.canvas_
= Dygraph
.createCanvas();
653 this.canvas_
.style
.position
= "absolute";
654 this.canvas_
.width
= this.width_
;
655 this.canvas_
.height
= this.height_
;
656 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
657 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
659 // ... and for static parts of the chart.
660 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
662 // The interactive parts of the graph are drawn on top of the chart.
663 this.graphDiv
.appendChild(this.hidden_
);
664 this.graphDiv
.appendChild(this.canvas_
);
665 this.mouseEventElement_
= this.canvas_
;
668 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
669 dygraph
.mouseMove_(e
);
671 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
672 dygraph
.mouseOut_(e
);
675 // Create the grapher
676 // TODO(danvk): why does the Layout need its own set of options?
677 this.layoutOptions_
= { 'xOriginIsZero': false };
678 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
679 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
680 Dygraph
.update(this.layoutOptions_
, {
681 'errorBars': (this.attr_("errorBars") || this.attr_("customBars")) });
683 this.layout_
= new DygraphLayout(this, this.layoutOptions_
);
685 // TODO(danvk): why does the Renderer need its own set of options?
686 this.renderOptions_
= { colorScheme
: this.colors_
,
688 axisLineWidth
: Dygraph
.AXIS_LINE_WIDTH
};
689 Dygraph
.update(this.renderOptions_
, this.attrs_
);
690 Dygraph
.update(this.renderOptions_
, this.user_attrs_
);
692 this.createStatusMessage_();
693 this.createDragInterface_();
697 * Detach DOM elements in the dygraph and null out all data references.
698 * Calling this when you're done with a dygraph can dramatically reduce memory
699 * usage. See, e.g., the tests/perf.html example.
701 Dygraph
.prototype.destroy
= function() {
702 var removeRecursive
= function(node
) {
703 while (node
.hasChildNodes()) {
704 removeRecursive(node
.firstChild
);
705 node
.removeChild(node
.firstChild
);
708 removeRecursive(this.maindiv_
);
710 var nullOut
= function(obj
) {
712 if (typeof(obj
[n
]) === 'object') {
718 // These may not all be necessary, but it can't hurt...
719 nullOut(this.layout_
);
720 nullOut(this.plotter_
);
725 * Creates the canvas containing the PlotKit graph. Only plotkit ever draws on
726 * this particular canvas. All Dygraph work is done on this.canvas_.
727 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
728 * @return {Object} The newly-created canvas
731 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
732 var h
= Dygraph
.createCanvas();
733 h
.style
.position
= "absolute";
734 // TODO(danvk): h should be offset from canvas. canvas needs to include
735 // some extra area to make it easier to zoom in on the far left and far
736 // right. h needs to be precisely the plot area, so that clipping occurs.
737 h
.style
.top
= canvas
.style
.top
;
738 h
.style
.left
= canvas
.style
.left
;
739 h
.width
= this.width_
;
740 h
.height
= this.height_
;
741 h
.style
.width
= this.width_
+ "px"; // for IE
742 h
.style
.height
= this.height_
+ "px"; // for IE
746 // Taken from MochiKit.Color
747 Dygraph
.hsvToRGB
= function (hue
, saturation
, value
) {
751 if (saturation
=== 0) {
756 var i
= Math
.floor(hue
* 6);
757 var f
= (hue
* 6) - i
;
758 var p
= value
* (1 - saturation
);
759 var q
= value
* (1 - (saturation
* f
));
760 var t
= value
* (1 - (saturation
* (1 - f
)));
762 case 1: red
= q
; green
= value
; blue
= p
; break;
763 case 2: red
= p
; green
= value
; blue
= t
; break;
764 case 3: red
= p
; green
= q
; blue
= value
; break;
765 case 4: red
= t
; green
= p
; blue
= value
; break;
766 case 5: red
= value
; green
= p
; blue
= q
; break;
767 case 6: // fall through
768 case 0: red
= value
; green
= t
; blue
= p
; break;
771 red
= Math
.floor(255 * red
+ 0.5);
772 green
= Math
.floor(255 * green
+ 0.5);
773 blue
= Math
.floor(255 * blue
+ 0.5);
774 return 'rgb(' + red
+ ',' + green
+ ',' + blue
+ ')';
779 * Generate a set of distinct colors for the data series. This is done with a
780 * color wheel. Saturation/Value are customizable, and the hue is
781 * equally-spaced around the color wheel. If a custom set of colors is
782 * specified, that is used instead.
785 Dygraph
.prototype.setColors_
= function() {
786 // TODO(danvk): compute this directly into this.attrs_['colorScheme'] and do
787 // away with this.renderOptions_.
788 var num
= this.attr_("labels").length
- 1;
790 var colors
= this.attr_('colors');
792 var sat
= this.attr_('colorSaturation') || 1.0;
793 var val
= this.attr_('colorValue') || 0.5;
794 var half
= Math
.ceil(num
/ 2);
795 for (var i
= 1; i
<= num
; i
++) {
796 if (!this.visibility()[i
-1]) continue;
797 // alternate colors for high contrast.
798 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
799 var hue
= (1.0 * idx
/ (1 + num
));
800 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
803 for (var i
= 0; i
< num
; i
++) {
804 if (!this.visibility()[i
]) continue;
805 var colorStr
= colors
[i
% colors
.length
];
806 this.colors_
.push(colorStr
);
810 // TODO(danvk): update this w/r
/t/ the
new options system
.
811 this.renderOptions_
.colorScheme
= this.colors_
;
812 Dygraph
.update(this.plotter_
.options
, this.renderOptions_
);
813 Dygraph
.update(this.layoutOptions_
, this.user_attrs_
);
814 Dygraph
.update(this.layoutOptions_
, this.attrs_
);
818 * Return the list of colors. This is either the list of colors passed in the
819 * attributes, or the autogenerated list of rgb(r,g,b) strings.
820 * @return {Array<string>} The list of colors.
822 Dygraph
.prototype.getColors
= function() {
826 // The following functions are from quirksmode.org with a modification for Safari from
827 // http://blog.firetree.net/2005/07/04/javascript-find-position/
828 // http://www.quirksmode.org/js
/findpos
.html
829 Dygraph
.findPosX
= function(obj
) {
834 curleft
+= obj
.offsetLeft
;
835 if(!obj
.offsetParent
)
837 obj
= obj
.offsetParent
;
844 Dygraph
.findPosY
= function(obj
) {
849 curtop
+= obj
.offsetTop
;
850 if(!obj
.offsetParent
)
852 obj
= obj
.offsetParent
;
862 * Create the div that contains information on the selected point(s)
863 * This goes in the top right of the canvas, unless an external div has already
867 Dygraph
.prototype.createStatusMessage_
= function() {
868 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
869 if (userLabelsDiv
&& null != userLabelsDiv
870 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
871 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
873 if (!this.attr_("labelsDiv")) {
874 var divWidth
= this.attr_('labelsDivWidth');
876 "position": "absolute",
879 "width": divWidth
+ "px",
881 "left": (this.width_
- divWidth
- 2) + "px",
882 "background": "white",
884 "overflow": "hidden"};
885 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
886 var div
= document
.createElement("div");
887 for (var name
in messagestyle
) {
888 if (messagestyle
.hasOwnProperty(name
)) {
889 div
.style
[name
] = messagestyle
[name
];
892 this.graphDiv
.appendChild(div
);
893 this.attrs_
.labelsDiv
= div
;
898 * Position the labels div so that:
899 * - its right edge is flush with the right edge of the charting area
900 * - its top edge is flush with the top edge of the charting area
902 Dygraph
.prototype.positionLabelsDiv_
= function() {
903 // Don't touch a user-specified labelsDiv.
904 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
906 var area
= this.plotter_
.area
;
907 var div
= this.attr_("labelsDiv");
908 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
909 div
.style
.top
= area
.y
+ "px";
913 * Create the text box to adjust the averaging period
916 Dygraph
.prototype.createRollInterface_
= function() {
917 // Create a roller if one doesn't exist already.
919 this.roller_
= document
.createElement("input");
920 this.roller_
.type
= "text";
921 this.roller_
.style
.display
= "none";
922 this.graphDiv
.appendChild(this.roller_
);
925 var display
= this.attr_('showRoller') ? 'block' : 'none';
927 var area
= this.plotter_
.area
;
928 var textAttr
= { "position": "absolute",
930 "top": (area
.y
+ area
.h
- 25) + "px",
931 "left": (area
.x
+ 1) + "px",
934 this.roller_
.size
= "2";
935 this.roller_
.value
= this.rollPeriod_
;
936 for (var name
in textAttr
) {
937 if (textAttr
.hasOwnProperty(name
)) {
938 this.roller_
.style
[name
] = textAttr
[name
];
943 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
946 // These functions are taken from MochiKit.Signal
947 Dygraph
.pageX
= function(e
) {
949 return (!e
.pageX
|| e
.pageX
< 0) ? 0 : e
.pageX
;
952 var b
= document
.body
;
954 (de
.scrollLeft
|| b
.scrollLeft
) -
955 (de
.clientLeft
|| 0);
959 Dygraph
.pageY
= function(e
) {
961 return (!e
.pageY
|| e
.pageY
< 0) ? 0 : e
.pageY
;
964 var b
= document
.body
;
966 (de
.scrollTop
|| b
.scrollTop
) -
971 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
972 return Dygraph
.pageX(e
) - context
.px
975 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
976 return Dygraph
.pageY(e
) - context
.py
979 // Called in response to an interaction model operation that
980 // should start the default panning behavior.
982 // It's used in the default callback for "mousedown" operations.
983 // Custom interaction model builders can use it to provide the default
986 Dygraph
.startPan
= function(event
, g
, context
) {
987 context
.isPanning
= true;
988 var xRange
= g
.xAxisRange();
989 context
.dateRange
= xRange
[1] - xRange
[0];
990 context
.initialLeftmostDate
= xRange
[0];
991 context
.xUnitsPerPixel
= context
.dateRange
/ (g
.plotter_
.area
.w
- 1);
993 if (g
.attr_("panEdgeFraction")) {
994 var maxXPixelsToDraw
= g
.width_
* g
.attr_("panEdgeFraction");
995 var xExtremes
= g
.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes!
997 var boundedLeftX
= g
.toDomXCoord(xExtremes
[0]) - maxXPixelsToDraw
;
998 var boundedRightX
= g
.toDomXCoord(xExtremes
[1]) + maxXPixelsToDraw
;
1000 var boundedLeftDate
= g
.toDataXCoord(boundedLeftX
);
1001 var boundedRightDate
= g
.toDataXCoord(boundedRightX
);
1002 context
.boundedDates
= [boundedLeftDate
, boundedRightDate
];
1004 var boundedValues
= [];
1005 var maxYPixelsToDraw
= g
.height_
* g
.attr_("panEdgeFraction");
1007 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1008 var axis
= g
.axes_
[i
];
1009 var yExtremes
= axis
.extremeRange
;
1011 var boundedTopY
= g
.toDomYCoord(yExtremes
[0], i
) + maxYPixelsToDraw
;
1012 var boundedBottomY
= g
.toDomYCoord(yExtremes
[1], i
) - maxYPixelsToDraw
;
1014 var boundedTopValue
= g
.toDataYCoord(boundedTopY
);
1015 var boundedBottomValue
= g
.toDataYCoord(boundedBottomY
);
1017 boundedValues
[i
] = [boundedTopValue
, boundedBottomValue
];
1019 context
.boundedValues
= boundedValues
;
1022 // Record the range of each y-axis at the start of the drag.
1023 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
1024 context
.is2DPan
= false;
1025 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1026 var axis
= g
.axes_
[i
];
1027 var yRange
= g
.yAxisRange(i
);
1028 // TODO(konigsberg): These values should be in |context|.
1029 // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale.
1030 if (axis
.logscale
) {
1031 axis
.initialTopValue
= Dygraph
.log10(yRange
[1]);
1032 axis
.dragValueRange
= Dygraph
.log10(yRange
[1]) - Dygraph
.log10(yRange
[0]);
1034 axis
.initialTopValue
= yRange
[1];
1035 axis
.dragValueRange
= yRange
[1] - yRange
[0];
1037 axis
.unitsPerPixel
= axis
.dragValueRange
/ (g
.plotter_
.area
.h
- 1);
1039 // While calculating axes, set 2dpan.
1040 if (axis
.valueWindow
|| axis
.valueRange
) context
.is2DPan
= true;
1044 // Called in response to an interaction model operation that
1045 // responds to an event that pans the view.
1047 // It's used in the default callback for "mousemove" operations.
1048 // Custom interaction model builders can use it to provide the default
1049 // panning behavior.
1051 Dygraph
.movePan
= function(event
, g
, context
) {
1052 context
.dragEndX
= g
.dragGetX_(event
, context
);
1053 context
.dragEndY
= g
.dragGetY_(event
, context
);
1055 var minDate
= context
.initialLeftmostDate
-
1056 (context
.dragEndX
- context
.dragStartX
) * context
.xUnitsPerPixel
;
1057 if (context
.boundedDates
) {
1058 minDate
= Math
.max(minDate
, context
.boundedDates
[0]);
1060 var maxDate
= minDate
+ context
.dateRange
;
1061 if (context
.boundedDates
) {
1062 if (maxDate
> context
.boundedDates
[1]) {
1063 // Adjust minDate, and recompute maxDate.
1064 minDate
= minDate
- (maxDate
- context
.boundedDates
[1]);
1065 maxDate
= minDate
+ context
.dateRange
;
1069 g
.dateWindow_
= [minDate
, maxDate
];
1071 // y-axis scaling is automatic unless this is a full 2D pan.
1072 if (context
.is2DPan
) {
1073 // Adjust each axis appropriately.
1074 for (var i
= 0; i
< g
.axes_
.length
; i
++) {
1075 var axis
= g
.axes_
[i
];
1077 var pixelsDragged
= context
.dragEndY
- context
.dragStartY
;
1078 var unitsDragged
= pixelsDragged
* axis
.unitsPerPixel
;
1080 var boundedValue
= context
.boundedValues
? context
.boundedValues
[i
] : null;
1082 // In log scale, maxValue and minValue are the logs of those values.
1083 var maxValue
= axis
.initialTopValue
+ unitsDragged
;
1085 maxValue
= Math
.min(maxValue
, boundedValue
[1]);
1087 var minValue
= maxValue
- axis
.dragValueRange
;
1089 if (minValue
< boundedValue
[0]) {
1090 // Adjust maxValue, and recompute minValue.
1091 maxValue
= maxValue
- (minValue
- boundedValue
[0]);
1092 minValue
= maxValue
- axis
.dragValueRange
;
1095 if (axis
.logscale
) {
1096 axis
.valueWindow
= [ Math
.pow(Dygraph
.LOG_SCALE
, minValue
),
1097 Math
.pow(Dygraph
.LOG_SCALE
, maxValue
) ];
1099 axis
.valueWindow
= [ minValue
, maxValue
];
1107 // Called in response to an interaction model operation that
1108 // responds to an event that ends panning.
1110 // It's used in the default callback for "mouseup" operations.
1111 // Custom interaction model builders can use it to provide the default
1112 // panning behavior.
1114 Dygraph
.endPan
= function(event
, g
, context
) {
1115 // TODO(konigsberg): Clear the context data from the axis.
1116 // TODO(konigsberg): mouseup should just delete the
1117 // context object, and mousedown should create a new one.
1118 context
.isPanning
= false;
1119 context
.is2DPan
= false;
1120 context
.initialLeftmostDate
= null;
1121 context
.dateRange
= null;
1122 context
.valueRange
= null;
1123 context
.boundedDates
= null;
1124 context
.boundedValues
= null;
1127 // Called in response to an interaction model operation that
1128 // responds to an event that starts zooming.
1130 // It's used in the default callback for "mousedown" operations.
1131 // Custom interaction model builders can use it to provide the default
1132 // zooming behavior.
1134 Dygraph
.startZoom
= function(event
, g
, context
) {
1135 context
.isZooming
= true;
1138 // Called in response to an interaction model operation that
1139 // responds to an event that defines zoom boundaries.
1141 // It's used in the default callback for "mousemove" operations.
1142 // Custom interaction model builders can use it to provide the default
1143 // zooming behavior.
1145 Dygraph
.moveZoom
= function(event
, g
, context
) {
1146 context
.dragEndX
= g
.dragGetX_(event
, context
);
1147 context
.dragEndY
= g
.dragGetY_(event
, context
);
1149 var xDelta
= Math
.abs(context
.dragStartX
- context
.dragEndX
);
1150 var yDelta
= Math
.abs(context
.dragStartY
- context
.dragEndY
);
1152 // drag direction threshold for y axis is twice as large as x axis
1153 context
.dragDirection
= (xDelta
< yDelta
/ 2) ? Dygraph
.VERTICAL
: Dygraph
.HORIZONTAL
;
1156 context
.dragDirection
,
1161 context
.prevDragDirection
,
1165 context
.prevEndX
= context
.dragEndX
;
1166 context
.prevEndY
= context
.dragEndY
;
1167 context
.prevDragDirection
= context
.dragDirection
;
1170 // Called in response to an interaction model operation that
1171 // responds to an event that performs a zoom based on previously defined
1174 // It's used in the default callback for "mouseup" operations.
1175 // Custom interaction model builders can use it to provide the default
1176 // zooming behavior.
1178 Dygraph
.endZoom
= function(event
, g
, context
) {
1179 context
.isZooming
= false;
1180 context
.dragEndX
= g
.dragGetX_(event
, context
);
1181 context
.dragEndY
= g
.dragGetY_(event
, context
);
1182 var regionWidth
= Math
.abs(context
.dragEndX
- context
.dragStartX
);
1183 var regionHeight
= Math
.abs(context
.dragEndY
- context
.dragStartY
);
1185 if (regionWidth
< 2 && regionHeight
< 2 &&
1186 g
.lastx_
!= undefined
&& g
.lastx_
!= -1) {
1187 // TODO(danvk): pass along more info about the points, e.g. 'x'
1188 if (g
.attr_('clickCallback') != null) {
1189 g
.attr_('clickCallback')(event
, g
.lastx_
, g
.selPoints_
);
1191 if (g
.attr_('pointClickCallback')) {
1192 // check if the click was on a particular point.
1193 var closestIdx
= -1;
1194 var closestDistance
= 0;
1195 for (var i
= 0; i
< g
.selPoints_
.length
; i
++) {
1196 var p
= g
.selPoints_
[i
];
1197 var distance
= Math
.pow(p
.canvasx
- context
.dragEndX
, 2) +
1198 Math
.pow(p
.canvasy
- context
.dragEndY
, 2);
1199 if (closestIdx
== -1 || distance
< closestDistance
) {
1200 closestDistance
= distance
;
1205 // Allow any click within two pixels of the dot.
1206 var radius
= g
.attr_('highlightCircleSize') + 2;
1207 if (closestDistance
<= 5 * 5) {
1208 g
.attr_('pointClickCallback')(event
, g
.selPoints_
[closestIdx
]);
1213 if (regionWidth
>= 10 && context
.dragDirection
== Dygraph
.HORIZONTAL
) {
1214 g
.doZoomX_(Math
.min(context
.dragStartX
, context
.dragEndX
),
1215 Math
.max(context
.dragStartX
, context
.dragEndX
));
1216 } else if (regionHeight
>= 10 && context
.dragDirection
== Dygraph
.VERTICAL
) {
1217 g
.doZoomY_(Math
.min(context
.dragStartY
, context
.dragEndY
),
1218 Math
.max(context
.dragStartY
, context
.dragEndY
));
1220 g
.canvas_
.getContext("2d").clearRect(0, 0,
1224 context
.dragStartX
= null;
1225 context
.dragStartY
= null;
1228 Dygraph
.defaultInteractionModel
= {
1229 // Track the beginning of drag events
1230 mousedown
: function(event
, g
, context
) {
1231 context
.initializeMouseDown(event
, g
, context
);
1233 if (event
.altKey
|| event
.shiftKey
) {
1234 Dygraph
.startPan(event
, g
, context
);
1236 Dygraph
.startZoom(event
, g
, context
);
1240 // Draw zoom rectangles when the mouse is down and the user moves around
1241 mousemove
: function(event
, g
, context
) {
1242 if (context
.isZooming
) {
1243 Dygraph
.moveZoom(event
, g
, context
);
1244 } else if (context
.isPanning
) {
1245 Dygraph
.movePan(event
, g
, context
);
1249 mouseup
: function(event
, g
, context
) {
1250 if (context
.isZooming
) {
1251 Dygraph
.endZoom(event
, g
, context
);
1252 } else if (context
.isPanning
) {
1253 Dygraph
.endPan(event
, g
, context
);
1257 // Temporarily cancel the dragging event when the mouse leaves the graph
1258 mouseout
: function(event
, g
, context
) {
1259 if (context
.isZooming
) {
1260 context
.dragEndX
= null;
1261 context
.dragEndY
= null;
1265 // Disable zooming out if panning.
1266 dblclick
: function(event
, g
, context
) {
1267 if (event
.altKey
|| event
.shiftKey
) {
1270 // TODO(konigsberg): replace g.doUnzoom()_ with something that is
1271 // friendlier to public use.
1276 Dygraph
.DEFAULT_ATTRS
.interactionModel
= Dygraph
.defaultInteractionModel
;
1279 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1283 Dygraph
.prototype.createDragInterface_
= function() {
1285 // Tracks whether the mouse is down right now
1287 isPanning
: false, // is this drag part of a pan?
1288 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1293 dragDirection
: null,
1296 prevDragDirection
: null,
1298 // The value on the left side of the graph when a pan operation starts.
1299 initialLeftmostDate
: null,
1301 // The number of units each pixel spans. (This won't be valid for log
1303 xUnitsPerPixel
: null,
1305 // TODO(danvk): update this comment
1306 // The range in second/value units that the viewport encompasses during a
1307 // panning operation.
1310 // Utility function to convert page-wide coordinates to canvas coords
1314 // Values for use with panEdgeFraction, which limit how far outside the
1315 // graph's data boundaries it can be panned.
1316 boundedDates
: null, // [minDate, maxDate]
1317 boundedValues
: null, // [[minValue, maxValue] ...]
1319 initializeMouseDown
: function(event
, g
, context
) {
1320 // prevents mouse drags from selecting page text.
1321 if (event
.preventDefault
) {
1322 event
.preventDefault(); // Firefox, Chrome, etc.
1324 event
.returnValue
= false; // IE
1325 event
.cancelBubble
= true;
1328 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1329 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1330 context
.dragStartX
= g
.dragGetX_(event
, context
);
1331 context
.dragStartY
= g
.dragGetY_(event
, context
);
1335 var interactionModel
= this.attr_("interactionModel");
1337 // Self is the graph.
1340 // Function that binds the graph and context to the handler.
1341 var bindHandler
= function(handler
) {
1342 return function(event
) {
1343 handler(event
, self
, context
);
1347 for (var eventName
in interactionModel
) {
1348 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1349 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1350 bindHandler(interactionModel
[eventName
]));
1353 // If the user releases the mouse button during a drag, but not over the
1354 // canvas, then it doesn't count as a zooming action.
1355 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1356 if (context
.isZooming
|| context
.isPanning
) {
1357 context
.isZooming
= false;
1358 context
.dragStartX
= null;
1359 context
.dragStartY
= null;
1362 if (context
.isPanning
) {
1363 context
.isPanning
= false;
1364 context
.draggingDate
= null;
1365 context
.dateRange
= null;
1366 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1367 delete self
.axes_
[i
].draggingValue
;
1368 delete self
.axes_
[i
].dragValueRange
;
1376 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1377 * up any previous zoom rectangles that were drawn. This could be optimized to
1378 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1381 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1382 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1383 * @param {Number} startX The X position where the drag started, in canvas
1385 * @param {Number} endX The current X position of the drag, in canvas coords.
1386 * @param {Number} startY The Y position where the drag started, in canvas
1388 * @param {Number} endY The current Y position of the drag, in canvas coords.
1389 * @param {Number} prevDirection the value of direction on the previous call to
1390 * this function. Used to avoid excess redrawing
1391 * @param {Number} prevEndX The value of endX on the previous call to this
1392 * function. Used to avoid excess redrawing
1393 * @param {Number} prevEndY The value of endY on the previous call to this
1394 * function. Used to avoid excess redrawing
1397 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1398 endY
, prevDirection
, prevEndX
,
1400 var ctx
= this.canvas_
.getContext("2d");
1402 // Clean up from the previous rect if necessary
1403 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1404 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
1405 Math
.abs(startX
- prevEndX
), this.height_
);
1406 } else if (prevDirection
== Dygraph
.VERTICAL
){
1407 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
1408 this.width_
, Math
.abs(startY
- prevEndY
));
1411 // Draw a light-grey rectangle to show the new viewing area
1412 if (direction
== Dygraph
.HORIZONTAL
) {
1413 if (endX
&& startX
) {
1414 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1415 ctx
.fillRect(Math
.min(startX
, endX
), 0,
1416 Math
.abs(endX
- startX
), this.height_
);
1419 if (direction
== Dygraph
.VERTICAL
) {
1420 if (endY
&& startY
) {
1421 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1422 ctx
.fillRect(0, Math
.min(startY
, endY
),
1423 this.width_
, Math
.abs(endY
- startY
));
1429 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1430 * the canvas. The exact zoom window may be slightly larger if there are no data
1431 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1432 * which accepts dates that match the raw data. This function redraws the graph.
1434 * @param {Number} lowX The leftmost pixel value that should be visible.
1435 * @param {Number} highX The rightmost pixel value that should be visible.
1438 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1439 // Find the earliest and latest dates contained in this canvasx range.
1440 // Convert the call to date ranges of the raw data.
1441 var minDate
= this.toDataXCoord(lowX
);
1442 var maxDate
= this.toDataXCoord(highX
);
1443 this.doZoomXDates_(minDate
, maxDate
);
1447 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1448 * method with doZoomX which accepts pixel coordinates. This function redraws
1451 * @param {Number} minDate The minimum date that should be visible.
1452 * @param {Number} maxDate The maximum date that should be visible.
1455 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1456 this.dateWindow_
= [minDate
, maxDate
];
1457 this.zoomed_x_
= true;
1459 if (this.attr_("zoomCallback")) {
1460 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1465 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1466 * the canvas. This function redraws the graph.
1468 * @param {Number} lowY The topmost pixel value that should be visible.
1469 * @param {Number} highY The lowest pixel value that should be visible.
1472 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1473 // Find the highest and lowest values in pixel range for each axis.
1474 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1475 // This is because pixels increase as you go down on the screen, whereas data
1476 // coordinates increase as you go up the screen.
1477 var valueRanges
= [];
1478 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1479 var hi
= this.toDataYCoord(lowY
, i
);
1480 var low
= this.toDataYCoord(highY
, i
);
1481 this.axes_
[i
].valueWindow
= [low
, hi
];
1482 valueRanges
.push([low
, hi
]);
1485 this.zoomed_y_
= true;
1487 if (this.attr_("zoomCallback")) {
1488 var xRange
= this.xAxisRange();
1489 var yRange
= this.yAxisRange();
1490 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1495 * Reset the zoom to the original view coordinates. This is the same as
1496 * double-clicking on the graph.
1500 Dygraph
.prototype.doUnzoom_
= function() {
1502 if (this.dateWindow_
!= null) {
1504 this.dateWindow_
= null;
1507 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1508 if (this.axes_
[i
].valueWindow
!= null) {
1510 delete this.axes_
[i
].valueWindow
;
1515 // Putting the drawing operation before the callback because it resets
1517 this.zoomed_x_
= false;
1518 this.zoomed_y_
= false;
1520 if (this.attr_("zoomCallback")) {
1521 var minDate
= this.rawData_
[0][0];
1522 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1523 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1529 * When the mouse moves in the canvas, display information about a nearby data
1530 * point and draw dots over those points in the data series. This function
1531 * takes care of cleanup of previously-drawn dots.
1532 * @param {Object} event The mousemove event from the browser.
1535 Dygraph
.prototype.mouseMove_
= function(event
) {
1536 // This prevents JS errors when mousing over the canvas before data loads.
1537 var points
= this.layout_
.points
;
1538 if (points
=== undefined
) return;
1540 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1545 // Loop through all the points and find the date nearest to our current
1547 var minDist
= 1e+100;
1549 for (var i
= 0; i
< points
.length
; i
++) {
1550 var point
= points
[i
];
1551 if (point
== null) continue;
1552 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1553 if (dist
> minDist
) continue;
1557 if (idx
>= 0) lastx
= points
[idx
].xval
;
1559 // Extract the points we've selected
1560 this.selPoints_
= [];
1561 var l
= points
.length
;
1562 if (!this.attr_("stackedGraph")) {
1563 for (var i
= 0; i
< l
; i
++) {
1564 if (points
[i
].xval
== lastx
) {
1565 this.selPoints_
.push(points
[i
]);
1569 // Need to 'unstack' points starting from the bottom
1570 var cumulative_sum
= 0;
1571 for (var i
= l
- 1; i
>= 0; i
--) {
1572 if (points
[i
].xval
== lastx
) {
1573 var p
= {}; // Clone the point since we modify it
1574 for (var k
in points
[i
]) {
1575 p
[k
] = points
[i
][k
];
1577 p
.yval
-= cumulative_sum
;
1578 cumulative_sum
+= p
.yval
;
1579 this.selPoints_
.push(p
);
1582 this.selPoints_
.reverse();
1585 if (this.attr_("highlightCallback")) {
1586 var px
= this.lastx_
;
1587 if (px
!== null && lastx
!= px
) {
1588 // only fire if the selected point has changed.
1589 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1593 // Save last x position for callbacks.
1594 this.lastx_
= lastx
;
1596 this.updateSelection_();
1600 * Transforms layout_.points index into data row number.
1601 * @param int layout_.points index
1602 * @return int row number, or -1 if none could be found.
1605 Dygraph
.prototype.idxToRow_
= function(idx
) {
1606 if (idx
< 0) return -1;
1608 for (var i
in this.layout_
.datasets
) {
1609 if (idx
< this.layout_
.datasets
[i
].length
) {
1610 return this.boundaryIds_
[0][0]+idx
;
1612 idx
-= this.layout_
.datasets
[i
].length
;
1617 // TODO(danvk): rename this function to something like 'isNonZeroNan'.
1618 Dygraph
.isOK
= function(x
) {
1619 return x
&& !isNaN(x
);
1622 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1623 // If no points are selected, we display a default legend. Traditionally,
1624 // this has been blank. But a better default would be a conventional legend,
1625 // which provides essential information for a non-interactive chart.
1626 if (typeof(x
) === 'undefined') {
1627 if (this.attr_('legend') != 'always') return '';
1629 var sepLines
= this.attr_('labelsSeparateLines');
1630 var labels
= this.attr_('labels');
1632 for (var i
= 1; i
< labels
.length
; i
++) {
1633 var c
= new RGBColor(this.plotter_
.colors
[labels
[i
]]);
1634 if (i
> 1) html
+= (sepLines
? '<br/>' : ' ');
1635 html
+= "<b><font color='" + c
.toHex() + "'>—" + labels
[i
] +
1641 var html
= this.attr_('xValueFormatter')(x
) + ":";
1643 var fmtFunc
= this.attr_('yValueFormatter');
1644 var showZeros
= this.attr_("labelsShowZeroValues");
1645 var sepLines
= this.attr_("labelsSeparateLines");
1646 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1647 var pt
= this.selPoints_
[i
];
1648 if (pt
.yval
== 0 && !showZeros
) continue;
1649 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1650 if (sepLines
) html
+= "<br/>";
1652 var c
= new RGBColor(this.plotter_
.colors
[pt
.name
]);
1653 var yval
= fmtFunc(pt
.yval
, this);
1654 // TODO(danvk): use a template string here and make it an attribute.
1655 html
+= " <b><font color='" + c
.toHex() + "'>"
1656 + pt
.name
+ "</font></b>:"
1663 * Draw dots over the selectied points in the data series. This function
1664 * takes care of cleanup of previously-drawn dots.
1667 Dygraph
.prototype.updateSelection_
= function() {
1668 // Clear the previously drawn vertical, if there is one
1669 var ctx
= this.canvas_
.getContext("2d");
1670 if (this.previousVerticalX_
>= 0) {
1671 // Determine the maximum highlight circle size.
1672 var maxCircleSize
= 0;
1673 var labels
= this.attr_('labels');
1674 for (var i
= 1; i
< labels
.length
; i
++) {
1675 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1676 if (r
> maxCircleSize
) maxCircleSize
= r
;
1678 var px
= this.previousVerticalX_
;
1679 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1680 2 * maxCircleSize
+ 2, this.height_
);
1683 if (this.selPoints_
.length
> 0) {
1684 // Set the status message to indicate the selected point(s)
1685 if (this.attr_('showLabelsOnHighlight')) {
1686 var html
= this.generateLegendHTML_(this.lastx_
, this.selPoints_
);
1687 this.attr_("labelsDiv").innerHTML
= html
;
1690 // Draw colored circles over the center of each selected point
1691 var canvasx
= this.selPoints_
[0].canvasx
;
1693 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1694 var pt
= this.selPoints_
[i
];
1695 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1697 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1699 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1700 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1705 this.previousVerticalX_
= canvasx
;
1710 * Set manually set selected dots, and display information about them
1711 * @param int row number that should by highlighted
1712 * false value clears the selection
1715 Dygraph
.prototype.setSelection
= function(row
) {
1716 // Extract the points we've selected
1717 this.selPoints_
= [];
1720 if (row
!== false) {
1721 row
= row
-this.boundaryIds_
[0][0];
1724 if (row
!== false && row
>= 0) {
1725 for (var i
in this.layout_
.datasets
) {
1726 if (row
< this.layout_
.datasets
[i
].length
) {
1727 var point
= this.layout_
.points
[pos
+row
];
1729 if (this.attr_("stackedGraph")) {
1730 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1733 this.selPoints_
.push(point
);
1735 pos
+= this.layout_
.datasets
[i
].length
;
1739 if (this.selPoints_
.length
) {
1740 this.lastx_
= this.selPoints_
[0].xval
;
1741 this.updateSelection_();
1744 this.clearSelection();
1750 * The mouse has left the canvas. Clear out whatever artifacts remain
1751 * @param {Object} event the mouseout event from the browser.
1754 Dygraph
.prototype.mouseOut_
= function(event
) {
1755 if (this.attr_("unhighlightCallback")) {
1756 this.attr_("unhighlightCallback")(event
);
1759 if (this.attr_("hideOverlayOnMouseOut")) {
1760 this.clearSelection();
1765 * Remove all selection from the canvas
1768 Dygraph
.prototype.clearSelection
= function() {
1769 // Get rid of the overlay data
1770 var ctx
= this.canvas_
.getContext("2d");
1771 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1772 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
1773 this.selPoints_
= [];
1778 * Returns the number of the currently selected row
1779 * @return int row number, of -1 if nothing is selected
1782 Dygraph
.prototype.getSelection
= function() {
1783 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1787 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1788 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1789 return row
+ this.boundaryIds_
[0][0];
1795 Dygraph
.zeropad
= function(x
) {
1796 if (x
< 10) return "0" + x
; else return "" + x
;
1800 * Return a string version of a number. This respects the digitsAfterDecimal
1801 * and maxNumberWidth options.
1802 * @param {Number} x The number to be formatted
1803 * @param {Dygraph} g The dygraph object
1805 Dygraph
.numberFormatter
= function(x
, g
) {
1806 var digits
= g
.attr_('digitsAfterDecimal');
1807 var maxNumberWidth
= g
.attr_('maxNumberWidth');
1809 if (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
1810 Math
.abs(x
) < Math
.pow(10, -digits
)) {
1811 // switch to scientific notation.
1813 return '' + Dygraph
.round_(x
, digits
);
1818 * Return a string version of the hours, minutes and seconds portion of a date.
1819 * @param {Number} date The JavaScript date (ms since epoch)
1820 * @return {String} A time of the form "HH:MM:SS"
1823 Dygraph
.hmsString_
= function(date
) {
1824 var zeropad
= Dygraph
.zeropad
;
1825 var d
= new Date(date
);
1826 if (d
.getSeconds()) {
1827 return zeropad(d
.getHours()) + ":" +
1828 zeropad(d
.getMinutes()) + ":" +
1829 zeropad(d
.getSeconds());
1831 return zeropad(d
.getHours()) + ":" + zeropad(d
.getMinutes());
1836 * Convert a JS date to a string appropriate to display on an axis that
1837 * is displaying values at the stated granularity.
1838 * @param {Date} date The date to format
1839 * @param {Number} granularity One of the Dygraph granularity constants
1840 * @return {String} The formatted date
1843 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1844 if (granularity
>= Dygraph
.DECADAL
) {
1845 return date
.strftime('%Y');
1846 } else if (granularity
>= Dygraph
.MONTHLY
) {
1847 return date
.strftime('%b %y');
1849 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1850 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1851 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1853 return Dygraph
.hmsString_(date
.getTime());
1859 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1860 * @param {Number} date The JavaScript date (ms since epoch)
1861 * @return {String} A date of the form "YYYY/MM/DD"
1864 Dygraph
.dateString_
= function(date
) {
1865 var zeropad
= Dygraph
.zeropad
;
1866 var d
= new Date(date
);
1869 var year
= "" + d
.getFullYear();
1870 // Get a 0 padded month string
1871 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
1872 // Get a 0 padded day string
1873 var day
= zeropad(d
.getDate());
1876 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
1877 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
1879 return year
+ "/" + month + "/" + day
+ ret
;
1883 * Round a number to the specified number of digits past the decimal point.
1884 * @param {Number} num The number to round
1885 * @param {Number} places The number of decimals to which to round
1886 * @return {Number} The rounded number
1889 Dygraph
.round_
= function(num
, places
) {
1890 var shift
= Math
.pow(10, places
);
1891 return Math
.round(num
* shift
)/shift
;
1895 * Fires when there's data available to be graphed.
1896 * @param {String} data Raw CSV data to be plotted
1899 Dygraph
.prototype.loadedEvent_
= function(data
) {
1900 this.rawData_
= this.parseCSV_(data
);
1904 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1905 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1906 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1909 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1912 Dygraph
.prototype.addXTicks_
= function() {
1913 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1915 if (this.dateWindow_
) {
1916 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1918 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1921 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
1922 this.layout_
.updateOptions({xTicks
: xTicks
});
1925 // Time granularity enumeration
1926 Dygraph
.SECONDLY
= 0;
1927 Dygraph
.TWO_SECONDLY
= 1;
1928 Dygraph
.FIVE_SECONDLY
= 2;
1929 Dygraph
.TEN_SECONDLY
= 3;
1930 Dygraph
.THIRTY_SECONDLY
= 4;
1931 Dygraph
.MINUTELY
= 5;
1932 Dygraph
.TWO_MINUTELY
= 6;
1933 Dygraph
.FIVE_MINUTELY
= 7;
1934 Dygraph
.TEN_MINUTELY
= 8;
1935 Dygraph
.THIRTY_MINUTELY
= 9;
1936 Dygraph
.HOURLY
= 10;
1937 Dygraph
.TWO_HOURLY
= 11;
1938 Dygraph
.SIX_HOURLY
= 12;
1940 Dygraph
.WEEKLY
= 14;
1941 Dygraph
.MONTHLY
= 15;
1942 Dygraph
.QUARTERLY
= 16;
1943 Dygraph
.BIANNUAL
= 17;
1944 Dygraph
.ANNUAL
= 18;
1945 Dygraph
.DECADAL
= 19;
1946 Dygraph
.CENTENNIAL
= 20;
1947 Dygraph
.NUM_GRANULARITIES
= 21;
1949 Dygraph
.SHORT_SPACINGS
= [];
1950 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1951 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1952 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1953 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1954 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1955 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1956 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1957 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1958 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1959 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1960 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1961 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1962 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1963 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1964 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1968 // If we used this time granularity, how many ticks would there be?
1969 // This is only an approximation, but it's generally good enough.
1971 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1972 if (granularity
< Dygraph
.MONTHLY
) {
1973 // Generate one tick mark for every fixed interval of time.
1974 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1975 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1977 var year_mod
= 1; // e.g. to only print one point every 10 years.
1978 var num_months
= 12;
1979 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1980 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1981 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1982 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1983 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1985 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1986 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1987 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1993 // Construct an x-axis of nicely-formatted times on meaningful boundaries
1994 // (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1996 // Returns an array containing {v: millis, label: label} dictionaries.
1998 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1999 var formatter
= this.attr_("xAxisLabelFormatter");
2001 if (granularity
< Dygraph
.MONTHLY
) {
2002 // Generate one tick mark for every fixed interval of time.
2003 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
2004 var format
= '%d%b'; // e.g. "1Jan"
2006 // Find a time less than start_time which occurs on a "nice" time boundary
2007 // for this granularity.
2008 var g
= spacing
/ 1000;
2009 var d
= new Date(start_time
);
2010 if (g
<= 60) { // seconds
2011 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
2015 if (g
<= 60) { // minutes
2016 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
2021 if (g
<= 24) { // days
2022 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
2027 if (g
== 7) { // one week
2028 d
.setDate(d
.getDate() - d
.getDay());
2033 start_time
= d
.getTime();
2035 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
2036 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2039 // Display a tick mark on the first of a set of months of each year.
2040 // Years get a tick mark iff y % year_mod == 0. This is useful for
2041 // displaying a tick mark once every 10 years, say, on long time scales.
2043 var year_mod
= 1; // e.g. to only print one point every 10 years.
2045 if (granularity
== Dygraph
.MONTHLY
) {
2046 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
2047 } else if (granularity
== Dygraph
.QUARTERLY
) {
2048 months
= [ 0, 3, 6, 9 ];
2049 } else if (granularity
== Dygraph
.BIANNUAL
) {
2051 } else if (granularity
== Dygraph
.ANNUAL
) {
2053 } else if (granularity
== Dygraph
.DECADAL
) {
2056 } else if (granularity
== Dygraph
.CENTENNIAL
) {
2060 this.warn("Span of dates is too long");
2063 var start_year
= new Date(start_time
).getFullYear();
2064 var end_year
= new Date(end_time
).getFullYear();
2065 var zeropad
= Dygraph
.zeropad
;
2066 for (var i
= start_year
; i
<= end_year
; i
++) {
2067 if (i
% year_mod
!= 0) continue;
2068 for (var j
= 0; j
< months
.length
; j
++) {
2069 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
2070 var t
= Dygraph
.dateStrToMillis(date_str
);
2071 if (t
< start_time
|| t
> end_time
) continue;
2072 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
2082 * Add ticks to the x-axis based on a date range.
2083 * @param {Number} startDate Start of the date window (millis since epoch)
2084 * @param {Number} endDate End of the date window (millis since epoch)
2085 * @return {Array.<Object>} Array of {label, value} tuples.
2088 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
2090 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
2091 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
2092 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
2099 return self
.GetXAxis(startDate
, endDate
, chosen
);
2101 // TODO(danvk): signal error.
2105 // This is a list of human-friendly values at which to show tick marks on a log
2106 // scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
2107 // ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
2108 // NOTE: this assumes that Dygraph.LOG_SCALE = 10.
2109 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
2111 for (var power
= -39; power
<= 39; power
++) {
2112 var range
= Math
.pow(10, power
);
2113 for (var mult
= 1; mult
<= 9; mult
++) {
2114 var val
= range
* mult
;
2121 // val is the value to search for
2122 // arry is the value over which to search
2123 // if abs > 0, find the lowest entry greater than val
2124 // if abs < 0, find the highest entry less than val
2125 // if abs == 0, find the entry that equals val.
2126 // Currently does not work when val is outside the range of arry's values.
2127 Dygraph
.binarySearch
= function(val
, arry
, abs
, low
, high
) {
2128 if (low
== null || high
== null) {
2130 high
= arry
.length
- 1;
2138 var validIndex
= function(idx
) {
2139 return idx
>= 0 && idx
< arry
.length
;
2141 var mid
= parseInt((low
+ high
) / 2);
2142 var element
= arry
[mid
];
2143 if (element
== val
) {
2146 if (element
> val
) {
2148 // Accept if element > val, but also if prior element < val.
2150 if (validIndex(idx
) && arry
[idx
] < val
) {
2154 return Dygraph
.binarySearch(val
, arry
, abs
, low
, mid
- 1);
2156 if (element
< val
) {
2158 // Accept if element < val, but also if prior element > val.
2160 if (validIndex(idx
) && arry
[idx
] > val
) {
2164 return Dygraph
.binarySearch(val
, arry
, abs
, mid
+ 1, high
);
2169 * Add ticks when the x axis has numbers on it (instead of dates)
2170 * TODO(konigsberg): Update comment.
2172 * @param {Number} minV minimum value
2173 * @param {Number} maxV maximum value
2175 * @param {function} attribute accessor function.
2176 * @return {Array.<Object>} Array of {label, value} tuples.
2179 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
2180 var attr
= function(k
) {
2181 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
2182 return self
.attr_(k
);
2187 for (var i
= 0; i
< vals
.length
; i
++) {
2188 ticks
.push({v
: vals
[i
]});
2191 if (axis_props
&& attr("logscale")) {
2192 var pixelsPerTick
= attr('pixelsPerYLabel');
2193 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
2194 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
2195 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
2196 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
2201 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
2203 // Count the number of tick values would appear, if we can get at least
2204 // nTicks / 4 accept them
.
2205 var lastDisplayed
= null;
2206 if (maxIdx
- minIdx
>= nTicks
/ 4) {
2207 var axisId
= axis_props
.yAxisId
;
2208 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
2209 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
2210 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
2211 var tick
= { v
: tickValue
};
2212 if (lastDisplayed
== null) {
2214 tickValue
: tickValue
,
2218 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
2220 tickValue
: tickValue
,
2229 // Since we went in backwards order.
2234 // ticks.length won't be 0 if the log scale function finds values to insert.
2235 if (ticks
.length
== 0) {
2237 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
2238 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
2239 // The first spacing greater than pixelsPerYLabel is what we use.
2240 // TODO(danvk): version that works on a log scale.
2241 if (attr("labelsKMG2")) {
2242 var mults
= [1, 2, 4, 8];
2244 var mults
= [1, 2, 5];
2246 var scale
, low_val
, high_val
, nTicks
;
2247 // TODO(danvk): make it possible to set this for x- and y-axes independently.
2248 var pixelsPerTick
= attr('pixelsPerYLabel');
2249 for (var i
= -10; i
< 50; i
++) {
2250 if (attr("labelsKMG2")) {
2251 var base_scale
= Math
.pow(16, i
);
2253 var base_scale
= Math
.pow(10, i
);
2255 for (var j
= 0; j
< mults
.length
; j
++) {
2256 scale
= base_scale
* mults
[j
];
2257 low_val
= Math
.floor(minV
/ scale
) * scale
;
2258 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
2259 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
2260 var spacing
= self
.height_
/ nTicks
;
2261 // wish I could break out of both loops at once...
2262 if (spacing
> pixelsPerTick
) break;
2264 if (spacing
> pixelsPerTick
) break;
2267 // Construct the set of ticks.
2268 // Allow reverse y-axis if it's explicitly requested.
2269 if (low_val
> high_val
) scale
*= -1;
2270 for (var i
= 0; i
< nTicks
; i
++) {
2271 var tickV
= low_val
+ i
* scale
;
2272 ticks
.push( {v
: tickV
} );
2277 // Add formatted labels to the ticks.
2280 if (attr("labelsKMB")) {
2282 k_labels
= [ "K", "M", "B", "T" ];
2284 if (attr("labelsKMG2")) {
2285 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
2287 k_labels
= [ "k", "M", "G", "T" ];
2289 var formatter
= attr('yAxisLabelFormatter') ?
2290 attr('yAxisLabelFormatter') : attr('yValueFormatter');
2292 // Add labels to the ticks.
2293 for (var i
= 0; i
< ticks
.length
; i
++) {
2294 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
2295 var tickV
= ticks
[i
].v
;
2296 var absTickV
= Math
.abs(tickV
);
2297 var label
= formatter(tickV
, self
);
2298 if (k_labels
.length
> 0) {
2299 // Round up to an appropriate unit.
2301 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
2302 if (absTickV
>= n
) {
2303 label
= Dygraph
.round_(tickV
/ n
, 1) + k_labels
[j
];
2308 ticks
[i
].label
= label
;
2314 // Computes the range of the data series (including confidence intervals).
2315 // series is either [ [x1, y1], [x2, y2], ... ] or
2316 // [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
2317 // Returns [low, high]
2318 Dygraph
.prototype.extremeValues_
= function(series
) {
2319 var minY
= null, maxY
= null;
2321 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2323 // With custom bars, maxY is the max of the high values.
2324 for (var j
= 0; j
< series
.length
; j
++) {
2325 var y
= series
[j
][1][0];
2327 var low
= y
- series
[j
][1][1];
2328 var high
= y
+ series
[j
][1][2];
2329 if (low
> y
) low
= y
; // this can happen with custom bars,
2330 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
2331 if (maxY
== null || high
> maxY
) {
2334 if (minY
== null || low
< minY
) {
2339 for (var j
= 0; j
< series
.length
; j
++) {
2340 var y
= series
[j
][1];
2341 if (y
=== null || isNaN(y
)) continue;
2342 if (maxY
== null || y
> maxY
) {
2345 if (minY
== null || y
< minY
) {
2351 return [minY
, maxY
];
2355 * This function is called once when the chart's data is changed or the options
2356 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2357 * idea is that values derived from the chart's data can be computed here,
2358 * rather than every time the chart is drawn. This includes things like the
2359 * number of axes, rolling averages, etc.
2361 Dygraph
.prototype.predraw_
= function() {
2362 // TODO(danvk): move more computations out of drawGraph_ and into here.
2363 this.computeYAxes_();
2365 // Create a new plotter.
2366 if (this.plotter_
) this.plotter_
.clear();
2367 this.plotter_
= new DygraphCanvasRenderer(this,
2368 this.hidden_
, this.layout_
,
2369 this.renderOptions_
);
2371 // The roller sits in the bottom left corner of the chart. We don't know where
2372 // this will be until the options are available, so it's positioned here.
2373 this.createRollInterface_();
2375 // Same thing applies for the labelsDiv. It's right edge should be flush with
2376 // the right edge of the charting area (which may not be the same as the right
2377 // edge of the div, if we have two y-axes.
2378 this.positionLabelsDiv_();
2380 // If the data or options have changed, then we'd better redraw.
2385 * Update the graph with new data. This method is called when the viewing area
2386 * has changed. If the underlying data or options have changed, predraw_ will
2387 * be called before drawGraph_ is called.
2390 Dygraph
.prototype.drawGraph_
= function() {
2391 var data
= this.rawData_
;
2393 // This is used to set the second parameter to drawCallback, below.
2394 var is_initial_draw
= this.is_initial_draw_
;
2395 this.is_initial_draw_
= false;
2397 var minY
= null, maxY
= null;
2398 this.layout_
.removeAllDatasets();
2400 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
2402 // Loop over the fields (series). Go from the last to the first,
2403 // because if they're stacked that's how we accumulate the values.
2405 var cumulative_y
= []; // For stacked series.
2408 var extremes
= {}; // series name -> [low, high]
2410 // Loop over all fields and create datasets
2411 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
2412 if (!this.visibility()[i
- 1]) continue;
2414 var seriesName
= this.attr_("labels")[i
];
2415 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
2416 var logScale
= this.attr_('logscale', i
);
2419 for (var j
= 0; j
< data
.length
; j
++) {
2420 var date
= data
[j
][0];
2421 var point
= data
[j
][i
];
2423 // On the log scale, points less than zero do not exist.
2424 // This will create a gap in the chart. Note that this ignores
2425 // connectSeparatedPoints.
2429 series
.push([date
, point
]);
2431 if (point
!= null || !connectSeparatedPoints
) {
2432 series
.push([date
, point
]);
2437 // TODO(danvk): move this into predraw_. It's insane to do it here.
2438 series
= this.rollingAverage(series
, this.rollPeriod_
);
2440 // Prune down to the desired range, if necessary (for zooming)
2441 // Because there can be lines going to points outside of the visible area,
2442 // we actually prune to visible points, plus one on either side.
2443 var bars
= this.attr_("errorBars") || this.attr_("customBars");
2444 if (this.dateWindow_
) {
2445 var low
= this.dateWindow_
[0];
2446 var high
= this.dateWindow_
[1];
2448 // TODO(danvk): do binary search instead of linear search.
2449 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2450 var firstIdx
= null, lastIdx
= null;
2451 for (var k
= 0; k
< series
.length
; k
++) {
2452 if (series
[k
][0] >= low
&& firstIdx
=== null) {
2455 if (series
[k
][0] <= high
) {
2459 if (firstIdx
=== null) firstIdx
= 0;
2460 if (firstIdx
> 0) firstIdx
--;
2461 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2462 if (lastIdx
< series
.length
- 1) lastIdx
++;
2463 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2464 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2465 pruned
.push(series
[k
]);
2469 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2472 var seriesExtremes
= this.extremeValues_(series
);
2475 for (var j
=0; j
<series
.length
; j
++) {
2476 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2479 } else if (this.attr_("stackedGraph")) {
2480 var l
= series
.length
;
2482 for (var j
= 0; j
< l
; j
++) {
2483 // If one data set has a NaN, let all subsequent stacked
2484 // sets inherit the NaN -- only start at 0 for the first set.
2485 var x
= series
[j
][0];
2486 if (cumulative_y
[x
] === undefined
) {
2487 cumulative_y
[x
] = 0;
2490 actual_y
= series
[j
][1];
2491 cumulative_y
[x
] += actual_y
;
2493 series
[j
] = [x
, cumulative_y
[x
]]
2495 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2496 seriesExtremes
[1] = cumulative_y
[x
];
2498 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2499 seriesExtremes
[0] = cumulative_y
[x
];
2503 extremes
[seriesName
] = seriesExtremes
;
2505 datasets
[i
] = series
;
2508 for (var i
= 1; i
< datasets
.length
; i
++) {
2509 if (!this.visibility()[i
- 1]) continue;
2510 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2513 this.computeYAxisRanges_(extremes
);
2514 this.layout_
.updateOptions( { yAxes
: this.axes_
,
2515 seriesToAxisMap
: this.seriesToAxisMap_
2519 // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
2520 var tmp_zoomed_x
= this.zoomed_x_
;
2521 // Tell PlotKit to use this new data and render itself
2522 this.layout_
.updateOptions({dateWindow
: this.dateWindow_
});
2523 this.zoomed_x_
= tmp_zoomed_x
;
2524 this.layout_
.evaluateWithError();
2525 this.plotter_
.clear();
2526 this.plotter_
.render();
2527 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2528 this.canvas_
.height
);
2530 if (is_initial_draw
) {
2531 // Generate a static legend before any particular point is selected.
2532 this.attr_('labelsDiv').innerHTML
= this.generateLegendHTML_();
2535 if (this.attr_("drawCallback") !== null) {
2536 this.attr_("drawCallback")(this, is_initial_draw
);
2541 * Determine properties of the y-axes which are independent of the data
2542 * currently being displayed. This includes things like the number of axes and
2543 * the style of the axes. It does not include the range of each axis and its
2545 * This fills in this.axes_ and this.seriesToAxisMap_.
2546 * axes_ = [ { options } ]
2547 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2548 * indices are into the axes_ array.
2550 Dygraph
.prototype.computeYAxes_
= function() {
2552 if (this.axes_
!= undefined
) {
2553 // Preserve valueWindow settings.
2555 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2556 valueWindows
.push(this.axes_
[index
].valueWindow
);
2560 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2561 this.seriesToAxisMap_
= {};
2563 // Get a list of series names.
2564 var labels
= this.attr_("labels");
2566 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2568 // all options which could be applied per-axis:
2576 'axisLabelFontSize',
2581 // Copy global axis options over to the first axis.
2582 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2583 var k
= axisOptions
[i
];
2584 var v
= this.attr_(k
);
2585 if (v
) this.axes_
[0][k
] = v
;
2588 // Go through once and add all the axes.
2589 for (var seriesName
in series
) {
2590 if (!series
.hasOwnProperty(seriesName
)) continue;
2591 var axis
= this.attr_("axis", seriesName
);
2593 this.seriesToAxisMap_
[seriesName
] = 0;
2596 if (typeof(axis
) == 'object') {
2597 // Add a new axis, making a copy of its per-axis options.
2599 Dygraph
.update(opts
, this.axes_
[0]);
2600 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2601 var yAxisId
= this.axes_
.length
;
2602 opts
.yAxisId
= yAxisId
;
2604 Dygraph
.update(opts
, axis
);
2605 this.axes_
.push(opts
);
2606 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2610 // Go through one more time and assign series to an axis defined by another
2611 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2612 for (var seriesName
in series
) {
2613 if (!series
.hasOwnProperty(seriesName
)) continue;
2614 var axis
= this.attr_("axis", seriesName
);
2615 if (typeof(axis
) == 'string') {
2616 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2617 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2618 "series " + axis
+ ", which does not define its own axis.");
2621 var idx
= this.seriesToAxisMap_
[axis
];
2622 this.seriesToAxisMap_
[seriesName
] = idx
;
2626 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2627 // this last so that hiding the first series doesn't destroy the axis
2628 // properties of the primary axis.
2629 var seriesToAxisFiltered
= {};
2630 var vis
= this.visibility();
2631 for (var i
= 1; i
< labels
.length
; i
++) {
2633 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2635 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2637 if (valueWindows
!= undefined
) {
2638 // Restore valueWindow settings.
2639 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2640 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2646 * Returns the number of y-axes on the chart.
2647 * @return {Number} the number of axes.
2649 Dygraph
.prototype.numAxes
= function() {
2651 for (var series
in this.seriesToAxisMap_
) {
2652 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2653 var idx
= this.seriesToAxisMap_
[series
];
2654 if (idx
> last_axis
) last_axis
= idx
;
2656 return 1 + last_axis
;
2660 * Determine the value range and tick marks for each axis.
2661 * @param {Object} extremes A mapping from seriesName -> [low, high]
2662 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2664 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2665 // Build a map from axis number -> [list of series names]
2666 var seriesForAxis
= [];
2667 for (var series
in this.seriesToAxisMap_
) {
2668 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2669 var idx
= this.seriesToAxisMap_
[series
];
2670 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2671 seriesForAxis
[idx
].push(series
);
2674 // Compute extreme values, a span and tick marks for each axis.
2675 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2676 var axis
= this.axes_
[i
];
2678 if (!seriesForAxis
[i
]) {
2679 // If no series are defined or visible then use a reasonable default
2680 axis
.extremeRange
= [0, 1];
2682 // Calculate the extremes of extremes.
2683 var series
= seriesForAxis
[i
];
2684 var minY
= Infinity
; // extremes[series[0]][0];
2685 var maxY
= -Infinity
; // extremes[series[0]][1];
2686 var extremeMinY
, extremeMaxY
;
2687 for (var j
= 0; j
< series
.length
; j
++) {
2688 // Only use valid extremes to stop null data series' from corrupting the scale.
2689 extremeMinY
= extremes
[series
[j
]][0];
2690 if (extremeMinY
!= null) {
2691 minY
= Math
.min(extremeMinY
, minY
);
2693 extremeMaxY
= extremes
[series
[j
]][1];
2694 if (extremeMaxY
!= null) {
2695 maxY
= Math
.max(extremeMaxY
, maxY
);
2698 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2700 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2701 if (minY
== Infinity
) minY
= 0;
2702 if (maxY
== -Infinity
) maxY
= 0;
2704 // Add some padding and round up to an integer to be human-friendly.
2705 var span
= maxY
- minY
;
2706 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2707 if (span
== 0) { span
= maxY
; }
2711 if (axis
.logscale
) {
2712 var maxAxisY
= maxY
+ 0.1 * span
;
2713 var minAxisY
= minY
;
2715 var maxAxisY
= maxY
+ 0.1 * span
;
2716 var minAxisY
= minY
- 0.1 * span
;
2718 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2719 if (!this.attr_("avoidMinZero")) {
2720 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2721 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2724 if (this.attr_("includeZero")) {
2725 if (maxY
< 0) maxAxisY
= 0;
2726 if (minY
> 0) minAxisY
= 0;
2729 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2731 if (axis
.valueWindow
) {
2732 // This is only set if the user has zoomed on the y-axis. It is never set
2733 // by a user. It takes precedence over axis.valueRange because, if you set
2734 // valueRange, you'd still expect to be able to pan.
2735 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2736 } else if (axis
.valueRange
) {
2737 // This is a user-set value range for this axis.
2738 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2740 axis
.computedValueRange
= axis
.extremeRange
;
2743 // Add ticks. By default, all axes inherit the tick positions of the
2744 // primary axis. However, if an axis is specifically marked as having
2745 // independent ticks, then that is permissible as well.
2746 if (i
== 0 || axis
.independentTicks
) {
2748 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2749 axis
.computedValueRange
[1],
2753 var p_axis
= this.axes_
[0];
2754 var p_ticks
= p_axis
.ticks
;
2755 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2756 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2757 var tick_values
= [];
2758 for (var i
= 0; i
< p_ticks
.length
; i
++) {
2759 var y_frac
= (p_ticks
[i
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2760 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2761 tick_values
.push(y_val
);
2765 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2766 axis
.computedValueRange
[1],
2767 this, axis
, tick_values
);
2773 * Calculates the rolling average of a data set.
2774 * If originalData is [label, val], rolls the average of those.
2775 * If originalData is [label, [, it's interpreted as [value, stddev]
2776 * and the roll is returned in the same form, with appropriately reduced
2777 * stddev for each value.
2778 * Note that this is where fractional input (i.e. '5/10') is converted into
2780 * @param {Array} originalData The data in the appropriate format (see above)
2781 * @param {Number} rollPeriod The number of points over which to average the
2784 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2785 if (originalData
.length
< 2)
2786 return originalData
;
2787 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
- 1);
2788 var rollingData
= [];
2789 var sigma
= this.attr_("sigma");
2791 if (this.fractions_
) {
2793 var den
= 0; // numerator/denominator
2795 for (var i
= 0; i
< originalData
.length
; i
++) {
2796 num
+= originalData
[i
][1][0];
2797 den
+= originalData
[i
][1][1];
2798 if (i
- rollPeriod
>= 0) {
2799 num
-= originalData
[i
- rollPeriod
][1][0];
2800 den
-= originalData
[i
- rollPeriod
][1][1];
2803 var date
= originalData
[i
][0];
2804 var value
= den
? num
/ den
: 0.0;
2805 if (this.attr_("errorBars")) {
2806 if (this.wilsonInterval_
) {
2807 // For more details on this confidence interval, see:
2808 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2810 var p
= value
< 0 ? 0 : value
, n
= den
;
2811 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2812 var denom
= 1 + sigma
* sigma
/ den
;
2813 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2814 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2815 rollingData
[i
] = [date
,
2816 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2818 rollingData
[i
] = [date
, [0, 0, 0]];
2821 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2822 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2825 rollingData
[i
] = [date
, mult
* value
];
2828 } else if (this.attr_("customBars")) {
2833 for (var i
= 0; i
< originalData
.length
; i
++) {
2834 var data
= originalData
[i
][1];
2836 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2838 if (y
!= null && !isNaN(y
)) {
2844 if (i
- rollPeriod
>= 0) {
2845 var prev
= originalData
[i
- rollPeriod
];
2846 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2853 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2854 1.0 * (mid
- low
) / count
,
2855 1.0 * (high
- mid
) / count
]];
2858 // Calculate the rolling average for the first rollPeriod - 1 points where
2859 // there is not enough data to roll over the full number of points
2860 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2861 if (!this.attr_("errorBars")){
2862 if (rollPeriod
== 1) {
2863 return originalData
;
2866 for (var i
= 0; i
< originalData
.length
; i
++) {
2869 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2870 var y
= originalData
[j
][1];
2871 if (y
== null || isNaN(y
)) continue;
2873 sum
+= originalData
[j
][1];
2876 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2878 rollingData
[i
] = [originalData
[i
][0], null];
2883 for (var i
= 0; i
< originalData
.length
; i
++) {
2887 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2888 var y
= originalData
[j
][1][0];
2889 if (y
== null || isNaN(y
)) continue;
2891 sum
+= originalData
[j
][1][0];
2892 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2895 var stddev
= Math
.sqrt(variance
) / num_ok
;
2896 rollingData
[i
] = [originalData
[i
][0],
2897 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2899 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2909 * Parses a date, returning the number of milliseconds since epoch. This can be
2910 * passed in as an xValueParser in the Dygraph constructor.
2911 * TODO(danvk): enumerate formats that this understands.
2912 * @param {String} A date in YYYYMMDD format.
2913 * @return {Number} Milliseconds since epoch.
2916 Dygraph
.dateParser
= function(dateStr
, self
) {
2919 if (dateStr
.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
2920 dateStrSlashed
= dateStr
.replace("-", "/", "g");
2921 while (dateStrSlashed
.search("-") != -1) {
2922 dateStrSlashed
= dateStrSlashed
.replace("-", "/");
2924 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2925 } else if (dateStr
.length
== 8) { // e.g. '20090712'
2926 // TODO(danvk): remove support for this format. It's confusing.
2927 dateStrSlashed
= dateStr
.substr(0,4) + "/" + dateStr
.substr(4,2)
2928 + "/" + dateStr
.substr(6,2);
2929 d
= Dygraph
.dateStrToMillis(dateStrSlashed
);
2931 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2932 // "2009/07/12 12:34:56"
2933 d
= Dygraph
.dateStrToMillis(dateStr
);
2936 if (!d
|| isNaN(d
)) {
2937 self
.error("Couldn't parse " + dateStr
+ " as a date");
2943 * Detects the type of the str (date or numeric) and sets the various
2944 * formatting attributes in this.attrs_ based on this type.
2945 * @param {String} str An x value.
2948 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2950 if (str
.indexOf('-') > 0 ||
2951 str
.indexOf('/') >= 0 ||
2952 isNaN(parseFloat(str
))) {
2954 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2955 // TODO(danvk): remove support for this format.
2960 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2961 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2962 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2963 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2965 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2966 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2967 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2968 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2973 * Parses the value as a floating point number. This is like the parseFloat()
2974 * built-in, but with a few differences:
2975 * - the empty string is parsed as null, rather than NaN.
2976 * - if the string cannot be parsed at all, an error is logged.
2977 * If the string can't be parsed, this method returns null.
2978 * @param {String} x The string to be parsed
2979 * @param {Number} opt_line_no The line number from which the string comes.
2980 * @param {String} opt_line The text of the line from which the string comes.
2984 // Parse the x as a float or return null if it's not a number.
2985 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2986 var val
= parseFloat(x
);
2987 if (!isNaN(val
)) return val
;
2989 // Try to figure out what happeend.
2990 // If the value is the empty string, parse it as null.
2991 if (/^ *$/.test(x
)) return null;
2993 // If it was actually "NaN", return it as NaN.
2994 if (/^ *nan *$/i.test(x
)) return NaN
;
2996 // Looks like a parsing error.
2997 var msg
= "Unable to parse '" + x
+ "' as a number";
2998 if (opt_line
!== null && opt_line_no
!== null) {
2999 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
3007 * Parses a string in a special csv format. We expect a csv file where each
3008 * line is a date point, and the first field in each line is the date string.
3009 * We also expect that all remaining fields represent series.
3010 * if the errorBars attribute is set, then interpret the fields as:
3011 * date, series1, stddev1, series2, stddev2, ...
3012 * @param {Array.<Object>} data See above.
3015 * @return Array.<Object> An array with one entry for each row. These entries
3016 * are an array of cells in that row. The first entry is the parsed x-value for
3017 * the row. The second, third, etc. are the y-values. These can take on one of
3018 * three forms, depending on the CSV and constructor parameters:
3020 * 2. [ value, stddev ]
3021 * 3. [ low value, center value, high value ]
3023 Dygraph
.prototype.parseCSV_
= function(data
) {
3025 var lines
= data
.split("\n");
3027 // Use the default delimiter or fall back to a tab if that makes sense.
3028 var delim
= this.attr_('delimiter');
3029 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
3034 if (this.labelsFromCSV_
) {
3036 this.attrs_
.labels
= lines
[0].split(delim
);
3041 var defaultParserSet
= false; // attempt to auto-detect x value type
3042 var expectedCols
= this.attr_("labels").length
;
3043 var outOfOrder
= false;
3044 for (var i
= start
; i
< lines
.length
; i
++) {
3045 var line
= lines
[i
];
3047 if (line
.length
== 0) continue; // skip blank lines
3048 if (line
[0] == '#') continue; // skip comment lines
3049 var inFields
= line
.split(delim
);
3050 if (inFields
.length
< 2) continue;
3053 if (!defaultParserSet
) {
3054 this.detectTypeFromString_(inFields
[0]);
3055 xParser
= this.attr_("xValueParser");
3056 defaultParserSet
= true;
3058 fields
[0] = xParser(inFields
[0], this);
3060 // If fractions are expected, parse the numbers as "A/B
"
3061 if (this.fractions_) {
3062 for (var j = 1; j < inFields.length; j++) {
3063 // TODO(danvk): figure out an appropriate way to flag parse errors.
3064 var vals = inFields[j].split("/");
3065 if (vals.length != 2) {
3066 this.error('Expected fractional "num
/den
" values in CSV data ' +
3067 "but found a value
'" + inFields[j] + "' on line
" +
3068 (1 + i) + " ('" + line + "') which is not of
this form
.");
3071 fields[j] = [this.parseFloat_(vals[0], i, line),
3072 this.parseFloat_(vals[1], i, line)];
3075 } else if (this.attr_("errorBars
")) {
3076 // If there are error bars, values are (value, stddev) pairs
3077 if (inFields.length % 2 != 1) {
3078 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3079 'but line ' + (1 + i) + ' has an odd number of values (' +
3080 (inFields.length - 1) + "): '" + line + "'");
3082 for (var j = 1; j < inFields.length; j += 2) {
3083 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
3084 this.parseFloat_(inFields[j + 1], i, line)];
3086 } else if (this.attr_("customBars
")) {
3087 // Bars are a low;center;high tuple
3088 for (var j = 1; j < inFields.length; j++) {
3089 var vals = inFields[j].split(";");
3090 fields[j] = [ this.parseFloat_(vals[0], i, line),
3091 this.parseFloat_(vals[1], i, line),
3092 this.parseFloat_(vals[2], i, line) ];
3095 // Values are just numbers
3096 for (var j = 1; j < inFields.length; j++) {
3097 fields[j] = this.parseFloat_(inFields[j], i, line);
3100 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3104 if (fields.length != expectedCols) {
3105 this.error("Number of columns
in line
" + i + " (" + fields.length +
3106 ") does not agree
with number of
labels (" + expectedCols +
3110 // If the user specified the 'labels' option and none of the cells of the
3111 // first row parsed correctly, then they probably double-specified the
3112 // labels. We go with the values set in the option, discard this row and
3113 // log a warning to the JS console.
3114 if (i == 0 && this.attr_('labels')) {
3115 var all_null = true;
3116 for (var j = 0; all_null && j < fields.length; j++) {
3117 if (fields[j]) all_null = false;
3120 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
3121 "CSV
data ('" + line + "') appears to also contain labels
. " +
3122 "Will drop the CSV labels and
use the option labels
.");
3130 this.warn("CSV is out of order
; order it correctly to speed loading
.");
3131 ret.sort(function(a,b) { return a[0] - b[0] });
3138 * The user has provided their data as a pre-packaged JS array. If the x values
3139 * are numeric, this is the same as dygraphs' internal format. If the x values
3140 * are dates, we need to convert them from Date objects to ms since epoch.
3141 * @param {Array.<Object>} data
3142 * @return {Array.<Object>} data with numeric x values.
3144 Dygraph.prototype.parseArray_ = function(data) {
3145 // Peek at the first x value to see if it's numeric.
3146 if (data.length == 0) {
3147 this.error("Can
't plot empty data set");
3150 if (data[0].length == 0) {
3151 this.error("Data set cannot contain an empty row");
3155 if (this.attr_("labels") == null) {
3156 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
3157 "in the options parameter");
3158 this.attrs_.labels = [ "X" ];
3159 for (var i = 1; i < data[0].length; i++) {
3160 this.attrs_.labels.push("Y" + i);
3164 if (Dygraph.isDateLike(data[0][0])) {
3165 // Some intelligent defaults for a date x-axis.
3166 this.attrs_.xValueFormatter = Dygraph.dateString_;
3167 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
3168 this.attrs_.xTicker = Dygraph.dateTicker;
3170 // Assume they're all dates
.
3171 var parsedData
= Dygraph
.clone(data
);
3172 for (var i
= 0; i
< data
.length
; i
++) {
3173 if (parsedData
[i
].length
== 0) {
3174 this.error("Row " + (1 + i
) + " of data is empty");
3177 if (parsedData
[i
][0] == null
3178 || typeof(parsedData
[i
][0].getTime
) != 'function'
3179 || isNaN(parsedData
[i
][0].getTime())) {
3180 this.error("x value in row " + (1 + i
) + " is not a Date");
3183 parsedData
[i
][0] = parsedData
[i
][0].getTime();
3187 // Some intelligent defaults for a numeric x-axis.
3188 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3189 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3195 * Parses a DataTable object from gviz.
3196 * The data is expected to have a first column that is either a date or a
3197 * number. All subsequent columns must be numbers. If there is a clear mismatch
3198 * between this.xValueParser_ and the type of the first column, it will be
3199 * fixed. Fills out rawData_.
3200 * @param {Array.<Object>} data See above.
3203 Dygraph
.prototype.parseDataTable_
= function(data
) {
3204 var cols
= data
.getNumberOfColumns();
3205 var rows
= data
.getNumberOfRows();
3207 var indepType
= data
.getColumnType(0);
3208 if (indepType
== 'date' || indepType
== 'datetime') {
3209 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
3210 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
3211 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
3212 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
3213 } else if (indepType
== 'number') {
3214 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
3215 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
3216 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
3217 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
3219 this.error("only 'date', 'datetime' and 'number' types are supported for " +
3220 "column 1 of DataTable input (Got '" + indepType
+ "')");
3224 // Array of the column indices which contain data (and not annotations).
3226 var annotationCols
= {}; // data index -> [annotation cols]
3227 var hasAnnotations
= false;
3228 for (var i
= 1; i
< cols
; i
++) {
3229 var type
= data
.getColumnType(i
);
3230 if (type
== 'number') {
3232 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
3233 // This is OK -- it's an annotation column.
3234 var dataIdx
= colIdx
[colIdx
.length
- 1];
3235 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3236 annotationCols
[dataIdx
] = [i
];
3238 annotationCols
[dataIdx
].push(i
);
3240 hasAnnotations
= true;
3242 this.error("Only 'number' is supported as a dependent type with Gviz." +
3243 " 'string' is only supported if displayAnnotations is true");
3247 // Read column labels
3248 // TODO(danvk): add support back for errorBars
3249 var labels
= [data
.getColumnLabel(0)];
3250 for (var i
= 0; i
< colIdx
.length
; i
++) {
3251 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3252 if (this.attr_("errorBars")) i
+= 1;
3254 this.attrs_
.labels
= labels
;
3255 cols
= labels
.length
;
3258 var outOfOrder
= false;
3259 var annotations
= [];
3260 for (var i
= 0; i
< rows
; i
++) {
3262 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3263 data
.getValue(i
, 0) === null) {
3264 this.warn("Ignoring row " + i
+
3265 " of DataTable because of undefined or null first column.");
3269 if (indepType
== 'date' || indepType
== 'datetime') {
3270 row
.push(data
.getValue(i
, 0).getTime());
3272 row
.push(data
.getValue(i
, 0));
3274 if (!this.attr_("errorBars")) {
3275 for (var j
= 0; j
< colIdx
.length
; j
++) {
3276 var col
= colIdx
[j
];
3277 row
.push(data
.getValue(i
, col
));
3278 if (hasAnnotations
&&
3279 annotationCols
.hasOwnProperty(col
) &&
3280 data
.getValue(i
, annotationCols
[col
][0]) != null) {
3282 ann
.series
= data
.getColumnLabel(col
);
3284 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
3286 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3287 if (k
) ann
.text
+= "\n";
3288 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3290 annotations
.push(ann
);
3294 // Strip out infinities, which give dygraphs problems later on.
3295 for (var j
= 0; j
< row
.length
; j
++) {
3296 if (!isFinite(row
[j
])) row
[j
] = null;
3299 for (var j
= 0; j
< cols
- 1; j
++) {
3300 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3303 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3310 this.warn("DataTable is out of order; order it correctly to speed loading.");
3311 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
3313 this.rawData_
= ret
;
3315 if (annotations
.length
> 0) {
3316 this.setAnnotations(annotations
, true);
3320 // This is identical to JavaScript's built-in Date.parse() method, except that
3321 // it doesn't get replaced with an incompatible method by aggressive JS
3322 // libraries like MooTools or Joomla.
3323 Dygraph
.dateStrToMillis
= function(str
) {
3324 return new Date(str
).getTime();
3327 // These functions are all based on MochiKit.
3328 Dygraph
.update
= function (self
, o
) {
3329 if (typeof(o
) != 'undefined' && o
!== null) {
3331 if (o
.hasOwnProperty(k
)) {
3339 Dygraph
.isArrayLike
= function (o
) {
3340 var typ
= typeof(o
);
3342 (typ
!= 'object' && !(typ
== 'function' &&
3343 typeof(o
.item
) == 'function')) ||
3345 typeof(o
.length
) != 'number' ||
3353 Dygraph
.isDateLike
= function (o
) {
3354 if (typeof(o
) != "object" || o
=== null ||
3355 typeof(o
.getTime
) != 'function') {
3361 Dygraph
.clone
= function(o
) {
3362 // TODO(danvk): figure out how MochiKit's version works
3364 for (var i
= 0; i
< o
.length
; i
++) {
3365 if (Dygraph
.isArrayLike(o
[i
])) {
3366 r
.push(Dygraph
.clone(o
[i
]));
3376 * Get the CSV data. If it's in a function, call that function. If it's in a
3377 * file, do an XMLHttpRequest to get it.
3380 Dygraph
.prototype.start_
= function() {
3381 if (typeof this.file_
== 'function') {
3382 // CSV string. Pretend we got it via XHR.
3383 this.loadedEvent_(this.file_());
3384 } else if (Dygraph
.isArrayLike(this.file_
)) {
3385 this.rawData_
= this.parseArray_(this.file_
);
3387 } else if (typeof this.file_
== 'object' &&
3388 typeof this.file_
.getColumnRange
== 'function') {
3389 // must be a DataTable from gviz.
3390 this.parseDataTable_(this.file_
);
3392 } else if (typeof this.file_
== 'string') {
3393 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3394 if (this.file_
.indexOf('\n') >= 0) {
3395 this.loadedEvent_(this.file_
);
3397 var req
= new XMLHttpRequest();
3399 req
.onreadystatechange
= function () {
3400 if (req
.readyState
== 4) {
3401 if (req
.status
== 200) {
3402 caller
.loadedEvent_(req
.responseText
);
3407 req
.open("GET", this.file_
, true);
3411 this.error("Unknown data format: " + (typeof this.file_
));
3416 * Changes various properties of the graph. These can include:
3418 * <li>file: changes the source data for the graph</li>
3419 * <li>errorBars: changes whether the data contains stddev</li>
3422 * @param {Object} attrs The new properties and values
3424 Dygraph
.prototype.updateOptions
= function(attrs
) {
3425 // TODO(danvk): this is a mess. Rethink this function.
3426 if ('rollPeriod' in attrs
) {
3427 this.rollPeriod_
= attrs
.rollPeriod
;
3429 if ('dateWindow' in attrs
) {
3430 this.dateWindow_
= attrs
.dateWindow
;
3431 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3432 this.zoomed_x_
= attrs
.dateWindow
!= null;
3435 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3436 this.zoomed_y_
= attrs
.valueRange
!= null;
3439 // TODO(danvk): validate per-series options.
3444 // highlightCircleSize
3446 Dygraph
.update(this.user_attrs_
, attrs
);
3447 Dygraph
.update(this.renderOptions_
, attrs
);
3449 this.labelsFromCSV_
= (this.attr_("labels") == null);
3451 // TODO(danvk): this doesn't match the constructor logic
3452 this.layout_
.updateOptions({ 'errorBars': this.attr_("errorBars") });
3453 if (attrs
['file']) {
3454 this.file_
= attrs
['file'];
3462 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3463 * containing div (which has presumably changed size since the dygraph was
3464 * instantiated. If the width/height are specified, the div will be resized.
3466 * This is far more efficient than destroying and re-instantiating a
3467 * Dygraph, since it doesn't have to reparse the underlying data.
3469 * @param {Number} width Width (in pixels)
3470 * @param {Number} height Height (in pixels)
3472 Dygraph
.prototype.resize
= function(width
, height
) {
3473 if (this.resize_lock
) {
3476 this.resize_lock
= true;
3478 if ((width
=== null) != (height
=== null)) {
3479 this.warn("Dygraph.resize() should be called with zero parameters or " +
3480 "two non-NULL parameters. Pretending it was zero.");
3481 width
= height
= null;
3484 // TODO(danvk): there should be a clear() method.
3485 this.maindiv_
.innerHTML
= "";
3486 this.attrs_
.labelsDiv
= null;
3489 this.maindiv_
.style
.width
= width
+ "px";
3490 this.maindiv_
.style
.height
= height
+ "px";
3491 this.width_
= width
;
3492 this.height_
= height
;
3494 this.width_
= this.maindiv_
.offsetWidth
;
3495 this.height_
= this.maindiv_
.offsetHeight
;
3498 this.createInterface_();
3501 this.resize_lock
= false;
3505 * Adjusts the number of points in the rolling average. Updates the graph to
3506 * reflect the new averaging period.
3507 * @param {Number} length Number of points over which to average the data.
3509 Dygraph
.prototype.adjustRoll
= function(length
) {
3510 this.rollPeriod_
= length
;
3515 * Returns a boolean array of visibility statuses.
3517 Dygraph
.prototype.visibility
= function() {
3518 // Do lazy-initialization, so that this happens after we know the number of
3520 if (!this.attr_("visibility")) {
3521 this.attrs_
["visibility"] = [];
3523 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3524 this.attr_("visibility").push(true);
3526 return this.attr_("visibility");
3530 * Changes the visiblity of a series.
3532 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3533 var x
= this.visibility();
3534 if (num
< 0 || num
>= x
.length
) {
3535 this.warn("invalid series number in setVisibility: " + num
);
3543 * Update the list of annotations and redraw the chart.
3545 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3546 // Only add the annotation CSS rule once we know it will be used.
3547 Dygraph
.addAnnotationRule();
3548 this.annotations_
= ann
;
3549 this.layout_
.setAnnotations(this.annotations_
);
3550 if (!suppressDraw
) {
3556 * Return the list of annotations.
3558 Dygraph
.prototype.annotations
= function() {
3559 return this.annotations_
;
3563 * Get the index of a series (column) given its name. The first column is the
3564 * x-axis, so the data series start with index 1.
3566 Dygraph
.prototype.indexFromSetName
= function(name
) {
3567 var labels
= this.attr_("labels");
3568 for (var i
= 0; i
< labels
.length
; i
++) {
3569 if (labels
[i
] == name
) return i
;
3574 Dygraph
.addAnnotationRule
= function() {
3575 if (Dygraph
.addedAnnotationCSS
) return;
3577 var rule
= "border: 1px solid black; " +
3578 "background-color: white; " +
3579 "text-align: center;";
3581 var styleSheetElement
= document
.createElement("style");
3582 styleSheetElement
.type
= "text/css";
3583 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3585 // Find the first style sheet that we can access.
3586 // We may not add a rule to a style sheet from another domain for security
3587 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3588 // adds its own style sheets from google.com.
3589 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3590 if (document
.styleSheets
[i
].disabled
) continue;
3591 var mysheet
= document
.styleSheets
[i
];
3593 if (mysheet
.insertRule
) { // Firefox
3594 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3595 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3596 } else if (mysheet
.addRule
) { // IE
3597 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3599 Dygraph
.addedAnnotationCSS
= true;
3602 // Was likely a security exception.
3606 this.warn("Unable to add default annotation CSS rule; display may be off.");
3610 * Create a new canvas element. This is more complex than a simple
3611 * document.createElement("canvas") because of IE and excanvas.
3613 Dygraph
.createCanvas
= function() {
3614 var canvas
= document
.createElement("canvas");
3616 isIE
= (/MSIE/.test(navigator
.userAgent
) && !window
.opera
);
3617 if (isIE
&& (typeof(G_vmlCanvasManager
) != 'undefined')) {
3618 canvas
= G_vmlCanvasManager
.initElement(canvas
);
3626 * A wrapper around Dygraph that implements the gviz API.
3627 * @param {Object} container The DOM object the visualization should live in.
3629 Dygraph
.GVizChart
= function(container
) {
3630 this.container
= container
;
3633 Dygraph
.GVizChart
.prototype.draw
= function(data
, options
) {
3634 // Clear out any existing dygraph.
3635 // TODO(danvk): would it make more sense to simply redraw using the current
3636 // date_graph object?
3637 this.container
.innerHTML
= '';
3638 if (typeof(this.date_graph
) != 'undefined') {
3639 this.date_graph
.destroy();
3642 this.date_graph
= new Dygraph(this.container
, data
, options
);
3646 * Google charts compatible setSelection
3647 * Only row selection is supported, all points in the row will be highlighted
3648 * @param {Array} array of the selected cells
3651 Dygraph
.GVizChart
.prototype.setSelection
= function(selection_array
) {
3653 if (selection_array
.length
) {
3654 row
= selection_array
[0].row
;
3656 this.date_graph
.setSelection(row
);
3660 * Google charts compatible getSelection implementation
3661 * @return {Array} array of the selected cells
3664 Dygraph
.GVizChart
.prototype.getSelection
= function() {
3667 var row
= this.date_graph
.getSelection();
3669 if (row
< 0) return selection
;
3672 for (var i
in this.date_graph
.layout_
.datasets
) {
3673 selection
.push({row
: row
, column
: col
});
3680 // Older pages may still use this name.
3681 DateGraph
= Dygraph
;
3683 // <REMOVE_FOR_COMBINED>
3684 Dygraph
.OPTIONS_REFERENCE
= // <JSON>
3687 "default": "parseFloat() or Date.parse()*",
3688 "labels": ["CSV parsing"],
3689 "type": "function(str) -> number",
3690 "description": "A function which parses x-values (i.e. the dependent series). Must return a number, even when the values are dates. In this case, millis since epoch are used. This is used primarily for parsing CSV data. *=Dygraphs is slightly more accepting in the dates which it will parse. See code for details."
3694 "labels": ["Data Line display"],
3696 "description": "If set, stack series on top of one another rather than drawing them independently."
3700 "labels": ["Data Line display"],
3702 "description": "The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is \"isolated\", i.e. there is a missing point on either side of it. This also controls the size of those dots."
3704 "labelsDivStyles": {
3706 "labels": ["Legend"],
3708 "description": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."
3712 "labels": ["Data Line display"],
3714 "description": "Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart."
3718 "labels": ["Overall display"],
3720 "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3724 "labels": ["Callbacks"],
3725 "type": "function(minDate, maxDate, yRanges)",
3726 "description": "A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each y-axis."
3728 "pointClickCallback": {
3730 "labels": ["Callbacks", "Interactive Elements"],
3735 "default": "(see description)",
3736 "labels": ["Data Series Colors"],
3737 "type": "array<string>",
3738 "example": "['red', '#00FF00']",
3739 "description": "List of colors for the data series. These can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\", etc. If not specified, equally-spaced points around a color wheel are used."
3741 "connectSeparatedPoints": {
3743 "labels": ["Data Line display"],
3745 "description": "Usually, when Dygraphs encounters a missing value in a data series, it interprets this as a gap and draws it as such. If, instead, the missing values represents an x-value for which only a different series has data, then you'll want to connect the dots by setting this to true. To explicitly include a gap with this option set, use a value of NaN."
3747 "highlightCallback": {
3749 "labels": ["Callbacks"],
3750 "type": "function(event, x, points,row)",
3751 "description": "When set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: <code>[ {name: 'series', yval: y-value}, … ]</code>"
3755 "labels": ["Axis display"],
3757 "description": "Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data"
3761 "labels": ["Error Bars", "Rolling Averages"],
3762 "type": "integer >= 1",
3763 "description": "Number of days over which to average data. Discussed extensively above."
3765 "unhighlightCallback": {
3767 "labels": ["Callbacks"],
3768 "type": "function(event)",
3769 "description": "When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph. The parameter is the mouseout event."
3773 "labels": ["Axis display"],
3775 "description": "The size of the line to display next to each tick mark on x- or y-axes."
3777 "labelsSeparateLines": {
3779 "labels": ["Legend"],
3781 "description": "Put <code><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>."
3783 "xValueFormatter": {
3784 "default": "(Round to 2 decimal places)",
3785 "labels": ["Axis display"],
3786 "type": "function(x)",
3787 "description": "Function to provide a custom display format for the X value for mouseover."
3789 "pixelsPerYLabel": {
3791 "labels": ["Axis display", "Grid"],
3793 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3795 "annotationMouseOverHandler": {
3797 "labels": ["Annotations"],
3798 "type": "function(annotation, point, dygraph, event)",
3799 "description": "If provided, this function is called whenever the user mouses over an annotation."
3801 "annotationMouseOutHandler": {
3803 "labels": ["Annotations"],
3804 "type": "function(annotation, point, dygraph, event)",
3805 "description": "If provided, this function is called whenever the user mouses out of an annotation."
3807 "annotationClickHandler": {
3809 "labels": ["Annotations"],
3810 "type": "function(annotation, point, dygraph, event)",
3811 "description": "If provided, this function is called whenever the user clicks on an annotation."
3813 "annotationDblClickHandler": {
3815 "labels": ["Annotations"],
3816 "type": "function(annotation, point, dygraph, event)",
3817 "description": "If provided, this function is called whenever the user double-clicks on an annotation."
3821 "labels": ["Callbacks"],
3822 "type": "function(dygraph, is_initial)",
3823 "description": "When set, this callback gets called every time the dygraph is drawn. This includes the initial draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn. The second is a boolean value indicating whether this is the initial draw."
3827 "labels": ["Value display/formatting"],
3829 "description": "Show k/M/G for kilo/Mega/Giga on y-axis. This is different than <code>labelsKMB</code> in that it uses base 2, not 10."
3833 "labels": ["CSV parsing"],
3835 "description": "The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not usually necessary, since tab-delimited data is auto-detected."
3837 "axisLabelFontSize": {
3839 "labels": ["Axis display"],
3841 "description": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."
3843 "underlayCallback": {
3845 "labels": ["Callbacks"],
3846 "type": "function(canvas, area, dygraph)",
3847 "description": "When set, this callback gets called before the chart is drawn. It details on how to use this."
3851 "labels": ["Overall display"],
3853 "description": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
3855 "interactionModel": {
3857 "labels": ["Interactive Elements"],
3859 "description": "TODO(konigsberg): document this"
3862 "default": "Dygraph.dateTicker or Dygraph.numericTicks",
3863 "labels": ["Axis display"],
3864 "type": "function(min, max, dygraph) -> [{v: ..., label: ...}, ...]",
3865 "description": "This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks are an array of (value, label) pairs. The built-in functions go to great lengths to choose good tick marks so, if you set this option, you'll most likely want to call one of them and modify the result."
3867 "xAxisLabelWidth": {
3869 "labels": ["Axis display"],
3871 "description": "Width, in pixels, of the x-axis labels."
3873 "showLabelsOnHighlight": {
3875 "labels": ["Interactive Elements", "Legend"],
3877 "description": "Whether to show the legend upon mouseover."
3880 "default": "(none)",
3881 "labels": ["Axis display"],
3882 "type": "string or object",
3883 "description": "Set to either an object ({}) filled with options for this axis or to the name of an existing data series with its own axis to re-use that axis. See tests for usage."
3885 "pixelsPerXLabel": {
3887 "labels": ["Axis display", "Grid"],
3889 "description": "Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks."
3893 "labels": ["Legend"],
3894 "type": "DOM element or string",
3895 "example": "<code style='font-size: small'>document.getElementById('foo')</code>or<code>'foo'",
3896 "description": "Show data labels in an external div, rather than on the graph. This value can either be a div element or a div id."
3900 "labels": ["CSV parsing", "Error Bars"],
3902 "description": "When set, attempt to parse each cell in the CSV file as \"a/b\", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below)."
3906 "labels": ["Axis display"],
3908 "description": "When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal to zero are not displayed.\n\nNot compatible with showZero, and ignores connectSeparatedPoints. Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph."
3912 "labels": ["Data Line display"],
3914 "example": "0.5, 2.0",
3915 "description": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."
3919 "labels": ["Error Bars"],
3921 "description": "Use in conjunction with the \"fractions\" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1."
3925 "labels": ["Data Line display"],
3927 "description": "Should the area underneath the graph be filled? This option is not compatible with error bars."
3929 "highlightCircleSize": {
3931 "labels": ["Interactive Elements"],
3933 "description": "The size in pixels of the dot drawn over highlighted points."
3936 "default": "rgb(128,128,128)",
3938 "type": "red, blue",
3939 "description": "The color of the gridlines."
3942 "default": "[true, true, ...]",
3943 "labels": ["Data Line display"],
3944 "type": "Array of booleans",
3945 "description": "Which series should initially be visible? Once the Dygraph has been constructed, you can access and modify the visibility of each series using the <code>visibility</code> and <code>setVisibility</code> methods."
3948 "default": "Full range of the input is shown",
3949 "labels": ["Axis display"],
3950 "type": "Array of two numbers",
3951 "example": "[10, 110]",
3952 "description": "Explicitly set the vertical range of the graph to [low, high]."
3956 "labels": ["Legend"],
3958 "description": "Width (in pixels) of the div which shows information on the currently-highlighted points."
3960 "colorSaturation": {
3962 "labels": ["Data Series Colors"],
3963 "type": "0.0 - 1.0",
3964 "description": "If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors."
3966 "yAxisLabelWidth": {
3968 "labels": ["Axis display"],
3970 "description": "Width, in pixels, of the y-axis labels."
3972 "hideOverlayOnMouseOut": {
3974 "labels": ["Interactive Elements", "Legend"],
3976 "description": "Whether to hide the legend when the mouse leaves the chart area."
3978 "yValueFormatter": {
3979 "default": "(Round to 2 decimal places)",
3980 "labels": ["Axis display"],
3981 "type": "function(x)",
3982 "description": "Function to provide a custom display format for the Y value for mouseover."
3985 "default": "onmouseover",
3986 "labels": ["Legend"],
3988 "description": "When to display the legend. By default, it only appears when a user mouses over the chart. Set it to \"always\" to always display a legend of some sort."
3990 "labelsShowZeroValues": {
3992 "labels": ["Legend"],
3994 "description": "Show zero value labels in the labelsDiv."
3998 "labels": ["Data Line display"],
4000 "description": "When set, display the graph as a step plot instead of a line plot."
4004 "labels": ["Value display/formatting"],
4006 "description": "Show K/M/B for thousands/millions/billions on y-axis."
4010 "labels": ["Overall display"],
4012 "description": "Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point."
4016 "labels": ["Axis display"],
4018 "description": "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled. \nThis is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis."
4020 "xAxisLabelFormatter": {
4021 "default": "Dygraph.dateAxisFormatter",
4022 "labels": ["Axis display", "Value display/formatting"],
4023 "type": "function(date, granularity)",
4024 "description": "Function to call to format values along the x axis."
4027 "snippet": "function(e, date){<br> alert(date);<br>}",
4029 "labels": ["Callbacks"],
4030 "type": "function(e, date)",
4031 "description": "A function to call when a data point is clicked. The function should take two arguments, the event object for the click and the date that was clicked."
4033 "yAxisLabelFormatter": {
4034 "default": "yValueFormatter",
4035 "labels": ["Axis display", "Value display/formatting"],
4036 "type": "function(x)",
4037 "description": "Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified."
4040 "default": "[\"X\", \"Y1\", \"Y2\", ...]*",
4041 "labels": ["Legend"],
4042 "type": "array<string>",
4043 "description": "A name for each data series, including the independent (X) series. For CSV files and DataTable objections, this is determined by context. For raw data, this must be specified. If it is not, default values are supplied and a warning is logged."
4046 "default": "Full range of the input is shown",
4047 "labels": ["Axis display"],
4048 "type": "Array of two Dates or numbers",
4049 "example": "[<br> Date.parse('2006-01-01'),<br> (new Date()).valueOf()<br>]",
4050 "description": "Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow must also be numbers."
4054 "labels": ["Interactive Elements", "Rolling Averages"],
4056 "description": "If the rolling average period text box should be shown."
4060 "labels": ["Error Bars"],
4062 "description": "When errorBars is set, shade this many standard deviations above/below each point."
4066 "labels": ["CSV parsing", "Error Bars"],
4068 "description": "When set, parse each CSV cell as \"low;middle;high\". Error bars will be drawn for each point between low and high, with the series itself going through middle."
4072 "labels": ["Data Series Colors"],
4073 "type": "float (0.0 - 1.0)",
4074 "description": "If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)"
4078 "labels": ["CSV parsing", "Error Bars"],
4080 "description": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."
4082 "displayAnnotations": {
4084 "labels": ["Annotations"],
4086 "description": "Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series to be interpreted as annotations on points in that series. This is the same format used by Google's AnnotatedTimeLine chart."
4088 "panEdgeFraction": {
4090 "labels": ["Axis Display", "Interactive Elements"],
4093 "description": "A value representing the farthest a graph may be panned, in percent of the display. For example, a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values. null means no bounds."
4096 "labels": ["Chart labels"],
4099 "description": "Text to display above the chart. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes."
4103 "labels": ["Chart labels"],
4105 "description": "Height of the chart title, in pixels. This also controls the default font size of the title. If you style the title on your own, this controls how much space is set aside above the chart for the title's div."
4108 "labels": ["Chart labels"],
4111 "description": "Text to display below the chart's x-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes."
4114 "labels": ["Chart labels"],
4117 "description": "Height of the x-axis label, in pixels. This also controls the default font size of the x-axis label. If you style the label on your own, this controls how much space is set aside below the chart for the x-axis label's div."
4120 "labels": ["Chart labels"],
4123 "description": "Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes. The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No additional space is set aside for a y-axis label. If you need more space, increase the width of the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis label, either style it that way with CSS (but remember that it's rotated, so width is controlled by the 'height' property) or set the yLabelWidth option."
4126 "labels": ["Chart labels"],
4129 "description": "Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90 degrees, this actually affects the height of its div."
4131 "isZoomedIgnoreProgrammaticZoom" : {
4133 "labels": ["Zooming"],
4135 "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
4139 // NOTE: in addition to parsing as JS, this snippet is expected to be valid
4140 // JSON. This assumption cannot be checked in JS, but it will be checked when
4141 // documentation is generated by the generate-documentation.py script. For the
4142 // most part, this just means that you should always use double quotes.
4144 // Do a quick sanity check on the options reference.
4146 var warn
= function(msg
) { if (console
) console
.warn(msg
); };
4147 var flds
= ['type', 'default', 'description'];
4154 'Data Line display',
4155 'Data Series Colors',
4158 'Interactive Elements',
4162 'Value display/formatting',
4166 for (var i
= 0; i
< valid_cats
.length
; i
++) cats
[valid_cats
[i
]] = true;
4168 for (var k
in Dygraph
.OPTIONS_REFERENCE
) {
4169 if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(k
)) continue;
4170 var op
= Dygraph
.OPTIONS_REFERENCE
[k
];
4171 for (var i
= 0; i
< flds
.length
; i
++) {
4172 if (!op
.hasOwnProperty(flds
[i
])) {
4173 warn('Option ' + k
+ ' missing "' + flds
[i
] + '" property');
4174 } else if (typeof(op
[flds
[i
]]) != 'string') {
4175 warn(k
+ '.' + flds
[i
] + ' must be of type string');
4178 var labels
= op
['labels'];
4179 if (typeof(labels
) !== 'object') {
4180 warn('Option "' + k
+ '" is missing a "labels": [...] option');
4181 for (var i
= 0; i
< labels
.length
; i
++) {
4182 if (!cats
.hasOwnProperty(labels
[i
])) {
4183 warn('Option "' + k
+ '" has label "' + labels
[i
] +
4184 '", which is invalid.');
4190 // </REMOVE_FOR_COMBINED
>