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 * Creates an interactive, zoomable chart.
47 * @param {div | String} div A div or the id of a div into which to construct
49 * @param {String | Function} file A file containing CSV data or a function
50 * that returns this data. The most basic expected format for each line is
51 * "YYYY/MM/DD,val1,val2,...". For more information, see
52 * http://dygraphs.com/data.html.
53 * @param {Object} attrs Various other attributes, e.g. errorBars determines
54 * whether the input data contains error ranges. For a complete list of
55 * options, see http://dygraphs.com/options.html.
57 Dygraph
= function(div
, data
, opts
) {
58 if (arguments
.length
> 0) {
59 if (arguments
.length
== 4) {
60 // Old versions of dygraphs took in the series labels as a constructor
61 // parameter. This doesn't make sense anymore, but it's easy to continue
62 // to support this usage.
63 this.warn("Using deprecated four-argument dygraph constructor");
64 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
66 this.__init__(div
, data
, opts
);
71 Dygraph
.NAME
= "Dygraph";
72 Dygraph
.VERSION
= "1.2";
73 Dygraph
.__repr__
= function() {
74 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
78 * Returns information about the Dygraph class.
80 Dygraph
.toString
= function() {
81 return this.__repr__();
84 // Various default values
85 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
86 Dygraph
.DEFAULT_WIDTH
= 480;
87 Dygraph
.DEFAULT_HEIGHT
= 320;
89 // Default attribute values.
90 Dygraph
.DEFAULT_ATTRS
= {
91 highlightCircleSize
: 3,
97 // TODO(danvk): move defaults from createStatusMessage_ here.
99 labelsSeparateLines
: false,
100 labelsShowZeroValues
: true,
103 showLabelsOnHighlight
: true,
105 yValueFormatter
: function(a
,b
) { return Dygraph
.numberFormatter(a
,b
); },
106 digitsAfterDecimal
: 2,
113 axisLabelFontSize
: 14,
116 xAxisLabelFormatter
: Dygraph
.dateAxisFormatter
,
120 xValueFormatter
: Dygraph
.dateString_
,
121 xValueParser
: Dygraph
.dateParser
,
122 xTicker
: Dygraph
.dateTicker
,
129 wilsonInterval
: true, // only relevant if fractions is true
133 connectSeparatedPoints
: false,
136 hideOverlayOnMouseOut
: true,
138 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
139 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
144 // Sizes of the various chart labels.
151 axisLineColor
: "black",
154 axisLabelColor
: "black",
155 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
159 gridLineColor
: "rgb(128,128,128)",
161 interactionModel
: null // will be set to Dygraph.Interaction.defaultModel
164 // Directions for panning and zooming. Use bit operations when combined
165 // values are possible.
166 Dygraph
.HORIZONTAL
= 1;
167 Dygraph
.VERTICAL
= 2;
169 // Used for initializing annotation CSS rules only once.
170 Dygraph
.addedAnnotationCSS
= false;
172 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
173 // Labels is no longer a constructor parameter, since it's typically set
174 // directly from the data source. It also conains a name for the x-axis,
175 // which the previous constructor form did not.
176 if (labels
!= null) {
177 var new_labels
= ["Date"];
178 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
179 Dygraph
.update(attrs
, { 'labels': new_labels
});
181 this.__init__(div
, file
, attrs
);
185 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
186 * and context <canvas> inside of it. See the constructor for details.
188 * @param {Element} div the Element to render the graph into.
189 * @param {String | Function} file Source data
190 * @param {Object} attrs Miscellaneous other options
193 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
194 // Hack for IE: if we're using excanvas and the document hasn't finished
195 // loading yet (and hence may not have initialized whatever it needs to
196 // initialize), then keep calling this routine periodically until it has.
197 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
198 typeof(G_vmlCanvasManager
) != 'undefined' &&
199 document
.readyState
!= 'complete') {
201 setTimeout(function() { self
.__init__(div
, file
, attrs
) }, 100);
204 // Support two-argument constructor
205 if (attrs
== null) { attrs
= {}; }
207 // Copy the important bits into the object
208 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
211 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
212 this.previousVerticalX_
= -1;
213 this.fractions_
= attrs
.fractions
|| false;
214 this.dateWindow_
= attrs
.dateWindow
|| null;
216 this.wilsonInterval_
= attrs
.wilsonInterval
|| true;
217 this.is_initial_draw_
= true;
218 this.annotations_
= [];
220 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
221 this.zoomed_x_
= false;
222 this.zoomed_y_
= false;
224 // Clear the div. This ensure that, if multiple dygraphs are passed the same
225 // div, then only one will be drawn.
228 // For historical reasons, the 'width' and 'height' options trump all CSS
229 // rules _except_ for an explicit 'width' or 'height' on the div.
230 // As an added convenience, if the div has zero height (like <div></div> does
231 // without any styles), then we use a default height/width
.
232 if (div
.style
.width
== '' && attrs
.width
) {
233 div
.style
.width
= attrs
.width
+ "px";
235 if (div
.style
.height
== '' && attrs
.height
) {
236 div
.style
.height
= attrs
.height
+ "px";
238 if (div
.style
.height
== '' && div
.offsetHeight
== 0) {
239 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
240 if (div
.style
.width
== '') {
241 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
244 // these will be zero if the dygraph's div is hidden.
245 this.width_
= div
.offsetWidth
;
246 this.height_
= div
.offsetHeight
;
248 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
249 if (attrs
['stackedGraph']) {
250 attrs
['fillGraph'] = true;
251 // TODO(nikhilk): Add any other stackedGraph checks here.
254 // Dygraphs has many options, some of which interact with one another.
255 // To keep track of everything, we maintain two sets of options:
257 // this.user_attrs_ only options explicitly set by the user.
258 // this.attrs_ defaults, options derived from user_attrs_, data.
260 // Options are then accessed this.attr_('attr'), which first looks at
261 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
262 // defaults without overriding behavior that the user specifically asks for.
263 this.user_attrs_
= {};
264 Dygraph
.update(this.user_attrs_
, attrs
);
267 Dygraph
.update(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
269 this.boundaryIds_
= [];
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'.";
294 * Returns information about the Dygraph object, including its containing ID.
296 Dygraph
.prototype.toString
= function() {
297 var maindiv
= this.maindiv_
;
298 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
299 return "[Dygraph " + id
+ "]";
304 * Returns the value of an option. This may be set by the user (either in the
305 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
307 * @param { String } name The name of the option, e.g. 'rollPeriod'.
308 * @param { String } [seriesName] The name of the series to which the option
309 * will be applied. If no per-series value of this option is available, then
310 * the global value is returned. This is optional.
311 * @return { ... } The value of the option.
313 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
314 // <REMOVE_FOR_COMBINED>
315 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
316 this.error('Must include options reference JS for testing');
317 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
318 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
319 'in the Dygraphs.OPTIONS_REFERENCE listing.');
320 // Only log this error once.
321 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
323 // </REMOVE_FOR_COMBINED
>
325 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
326 this.user_attrs_
[seriesName
] != null &&
327 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
328 return this.user_attrs_
[seriesName
][name
];
329 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
330 return this.user_attrs_
[name
];
331 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
332 return this.attrs_
[name
];
339 * Returns the current rolling period, as set by the user or an option.
340 * @return {Number} The number of points in the rolling window
342 Dygraph
.prototype.rollPeriod
= function() {
343 return this.rollPeriod_
;
347 * Returns the currently-visible x-range. This can be affected by zooming,
348 * panning or a call to updateOptions.
349 * Returns a two-element array: [left, right].
350 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
352 Dygraph
.prototype.xAxisRange
= function() {
353 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
357 * Returns the lower- and upper-bound x-axis values of the
360 Dygraph
.prototype.xAxisExtremes
= function() {
361 var left
= this.rawData_
[0][0];
362 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
363 return [left
, right
];
367 * Returns the currently-visible y-range for an axis. This can be affected by
368 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
369 * called with no arguments, returns the range of the first axis.
370 * Returns a two-element array: [bottom, top].
372 Dygraph
.prototype.yAxisRange
= function(idx
) {
373 if (typeof(idx
) == "undefined") idx
= 0;
374 if (idx
< 0 || idx
>= this.axes_
.length
) {
377 var axis
= this.axes_
[idx
];
378 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
382 * Returns the currently-visible y-ranges for each axis. This can be affected by
383 * zooming, panning, calls to updateOptions, etc.
384 * Returns an array of [bottom, top] pairs, one for each y-axis.
386 Dygraph
.prototype.yAxisRanges
= function() {
388 for (var i
= 0; i
< this.axes_
.length
; i
++) {
389 ret
.push(this.yAxisRange(i
));
394 // TODO(danvk): use these functions throughout dygraphs.
396 * Convert from data coordinates to canvas/div X/Y coordinates.
397 * If specified, do this conversion for the coordinate system of a particular
398 * axis. Uses the first axis by default.
399 * Returns a two-element array: [X, Y]
401 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
402 * instead of toDomCoords(null, y, axis).
404 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
405 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
409 * Convert from data x coordinates to canvas/div X coordinate.
410 * If specified, do this conversion for the coordinate system of a particular
412 * Returns a single value or null if x is null.
414 Dygraph
.prototype.toDomXCoord
= function(x
) {
419 var area
= this.plotter_
.area
;
420 var xRange
= this.xAxisRange();
421 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
425 * Convert from data x coordinates to canvas/div Y coordinate and optional
426 * axis. Uses the first axis by default.
428 * returns a single value or null if y is null.
430 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
431 var pct
= this.toPercentYCoord(y
, axis
);
436 var area
= this.plotter_
.area
;
437 return area
.y
+ pct
* area
.h
;
441 * Convert from canvas/div coords to data coordinates.
442 * If specified, do this conversion for the coordinate system of a particular
443 * axis. Uses the first axis by default.
444 * Returns a two-element array: [X, Y].
446 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
447 * instead of toDataCoords(null, y, axis).
449 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
450 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
454 * Convert from canvas/div x coordinate to data coordinate.
456 * If x is null, this returns null.
458 Dygraph
.prototype.toDataXCoord
= function(x
) {
463 var area
= this.plotter_
.area
;
464 var xRange
= this.xAxisRange();
465 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
469 * Convert from canvas/div y coord to value.
471 * If y is null, this returns null.
472 * if axis is null, this uses the first axis.
474 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
479 var area
= this.plotter_
.area
;
480 var yRange
= this.yAxisRange(axis
);
482 if (typeof(axis
) == "undefined") axis
= 0;
483 if (!this.axes_
[axis
].logscale
) {
484 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
486 // Computing the inverse of toDomCoord.
487 var pct
= (y
- area
.y
) / area
.h
489 // Computing the inverse of toPercentYCoord. The function was arrived at with
490 // the following steps:
492 // Original calcuation:
493 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
495 // Move denominator to both sides:
496 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
498 // subtract logr1, and take the negative value.
499 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
501 // Swap both sides of the equation, and we can compute the log of the
502 // return value. Which means we just need to use that as the exponent in
504 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
506 var logr1
= Dygraph
.log10(yRange
[1]);
507 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
508 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
514 * Converts a y for an axis to a percentage from the top to the
515 * bottom of the drawing area.
517 * If the coordinate represents a value visible on the canvas, then
518 * the value will be between 0 and 1, where 0 is the top of the canvas.
519 * However, this method will return values outside the range, as
520 * values can fall outside the canvas.
522 * If y is null, this returns null.
523 * if axis is null, this uses the first axis.
525 * @param { Number } y The data y-coordinate.
526 * @param { Number } [axis] The axis number on which the data coordinate lives.
527 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
529 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
533 if (typeof(axis
) == "undefined") axis
= 0;
535 var area
= this.plotter_
.area
;
536 var yRange
= this.yAxisRange(axis
);
539 if (!this.axes_
[axis
].logscale
) {
540 // yRange[1] - y is unit distance from the bottom.
541 // yRange[1] - yRange[0] is the scale of the range.
542 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
543 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
545 var logr1
= Dygraph
.log10(yRange
[1]);
546 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
552 * Converts an x value to a percentage from the left to the right of
555 * If the coordinate represents a value visible on the canvas, then
556 * the value will be between 0 and 1, where 0 is the left of the canvas.
557 * However, this method will return values outside the range, as
558 * values can fall outside the canvas.
560 * If x is null, this returns null.
561 * @param { Number } x The data x-coordinate.
562 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
564 Dygraph
.prototype.toPercentXCoord
= function(x
) {
569 var xRange
= this.xAxisRange();
570 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
574 * Returns the number of columns (including the independent variable).
575 * @return { Integer } The number of columns.
577 Dygraph
.prototype.numColumns
= function() {
578 return this.rawData_
[0].length
;
582 * Returns the number of rows (excluding any header/label row).
583 * @return { Integer } The number of rows, less any header.
585 Dygraph
.prototype.numRows
= function() {
586 return this.rawData_
.length
;
590 * Returns the value in the given row and column. If the row and column exceed
591 * the bounds on the data, returns null. Also returns null if the value is
593 * @param { Number} row The row number of the data (0-based). Row 0 is the
594 * first row of data, not a header row.
595 * @param { Number} col The column number of the data (0-based)
596 * @return { Number } The value in the specified cell or null if the row/col
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
];
607 * Generates interface elements for the Dygraph: a containing div, a div to
608 * display the current point, and a textbox to adjust the rolling average
609 * period. Also creates the Renderer/Layout elements.
612 Dygraph
.prototype.createInterface_
= function() {
613 // Create the all-enclosing graph div
614 var enclosing
= this.maindiv_
;
616 this.graphDiv
= document
.createElement("div");
617 this.graphDiv
.style
.width
= this.width_
+ "px";
618 this.graphDiv
.style
.height
= this.height_
+ "px";
619 enclosing
.appendChild(this.graphDiv
);
621 // Create the canvas for interactive parts of the chart.
622 this.canvas_
= Dygraph
.createCanvas();
623 this.canvas_
.style
.position
= "absolute";
624 this.canvas_
.width
= this.width_
;
625 this.canvas_
.height
= this.height_
;
626 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
627 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
629 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
631 // ... and for static parts of the chart.
632 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
633 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
635 // The interactive parts of the graph are drawn on top of the chart.
636 this.graphDiv
.appendChild(this.hidden_
);
637 this.graphDiv
.appendChild(this.canvas_
);
638 this.mouseEventElement_
= this.canvas_
;
641 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
642 dygraph
.mouseMove_(e
);
644 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
645 dygraph
.mouseOut_(e
);
648 // Create the grapher
649 this.layout_
= new DygraphLayout(this);
651 this.createStatusMessage_();
652 this.createDragInterface_();
654 // Update when the window is resized.
655 // TODO(danvk): drop frames depending on complexity of the chart.
656 Dygraph
.addEvent(window
, 'resize', function(e
) {
662 * Detach DOM elements in the dygraph and null out all data references.
663 * Calling this when you're done with a dygraph can dramatically reduce memory
664 * usage. See, e.g., the tests/perf.html example.
666 Dygraph
.prototype.destroy
= function() {
667 var removeRecursive
= function(node
) {
668 while (node
.hasChildNodes()) {
669 removeRecursive(node
.firstChild
);
670 node
.removeChild(node
.firstChild
);
673 removeRecursive(this.maindiv_
);
675 var nullOut
= function(obj
) {
677 if (typeof(obj
[n
]) === 'object') {
683 // These may not all be necessary, but it can't hurt...
684 nullOut(this.layout_
);
685 nullOut(this.plotter_
);
690 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
691 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
692 * or the zoom rectangles) is done on this.canvas_.
693 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
694 * @return {Object} The newly-created canvas
697 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
698 var h
= Dygraph
.createCanvas();
699 h
.style
.position
= "absolute";
700 // TODO(danvk): h should be offset from canvas. canvas needs to include
701 // some extra area to make it easier to zoom in on the far left and far
702 // right. h needs to be precisely the plot area, so that clipping occurs.
703 h
.style
.top
= canvas
.style
.top
;
704 h
.style
.left
= canvas
.style
.left
;
705 h
.width
= this.width_
;
706 h
.height
= this.height_
;
707 h
.style
.width
= this.width_
+ "px"; // for IE
708 h
.style
.height
= this.height_
+ "px"; // for IE
713 * Generate a set of distinct colors for the data series. This is done with a
714 * color wheel. Saturation/Value are customizable, and the hue is
715 * equally-spaced around the color wheel. If a custom set of colors is
716 * specified, that is used instead.
719 Dygraph
.prototype.setColors_
= function() {
720 var num
= this.attr_("labels").length
- 1;
722 var colors
= this.attr_('colors');
724 var sat
= this.attr_('colorSaturation') || 1.0;
725 var val
= this.attr_('colorValue') || 0.5;
726 var half
= Math
.ceil(num
/ 2);
727 for (var i
= 1; i
<= num
; i
++) {
728 if (!this.visibility()[i
-1]) continue;
729 // alternate colors for high contrast.
730 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
731 var hue
= (1.0 * idx
/ (1 + num
));
732 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
735 for (var i
= 0; i
< num
; i
++) {
736 if (!this.visibility()[i
]) continue;
737 var colorStr
= colors
[i
% colors
.length
];
738 this.colors_
.push(colorStr
);
742 this.plotter_
.setColors(this.colors_
);
746 * Return the list of colors. This is either the list of colors passed in the
747 * attributes or the autogenerated list of rgb(r,g,b) strings.
748 * @return {Array<string>} The list of colors.
750 Dygraph
.prototype.getColors
= function() {
755 * Create the div that contains information on the selected point(s)
756 * This goes in the top right of the canvas, unless an external div has already
760 Dygraph
.prototype.createStatusMessage_
= function() {
761 var userLabelsDiv
= this.user_attrs_
["labelsDiv"];
762 if (userLabelsDiv
&& null != userLabelsDiv
763 && (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
764 this.user_attrs_
["labelsDiv"] = document
.getElementById(userLabelsDiv
);
766 if (!this.attr_("labelsDiv")) {
767 var divWidth
= this.attr_('labelsDivWidth');
769 "position": "absolute",
772 "width": divWidth
+ "px",
774 "left": (this.width_
- divWidth
- 2) + "px",
775 "background": "white",
777 "overflow": "hidden"};
778 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
779 var div
= document
.createElement("div");
780 div
.className
= "dygraph-legend";
781 for (var name
in messagestyle
) {
782 if (messagestyle
.hasOwnProperty(name
)) {
783 div
.style
[name
] = messagestyle
[name
];
786 this.graphDiv
.appendChild(div
);
787 this.attrs_
.labelsDiv
= div
;
792 * Position the labels div so that:
793 * - its right edge is flush with the right edge of the charting area
794 * - its top edge is flush with the top edge of the charting area
797 Dygraph
.prototype.positionLabelsDiv_
= function() {
798 // Don't touch a user-specified labelsDiv.
799 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
801 var area
= this.plotter_
.area
;
802 var div
= this.attr_("labelsDiv");
803 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
804 div
.style
.top
= area
.y
+ "px";
808 * Create the text box to adjust the averaging period
811 Dygraph
.prototype.createRollInterface_
= function() {
812 // Create a roller if one doesn't exist already.
814 this.roller_
= document
.createElement("input");
815 this.roller_
.type
= "text";
816 this.roller_
.style
.display
= "none";
817 this.graphDiv
.appendChild(this.roller_
);
820 var display
= this.attr_('showRoller') ? 'block' : 'none';
822 var area
= this.plotter_
.area
;
823 var textAttr
= { "position": "absolute",
825 "top": (area
.y
+ area
.h
- 25) + "px",
826 "left": (area
.x
+ 1) + "px",
829 this.roller_
.size
= "2";
830 this.roller_
.value
= this.rollPeriod_
;
831 for (var name
in textAttr
) {
832 if (textAttr
.hasOwnProperty(name
)) {
833 this.roller_
.style
[name
] = textAttr
[name
];
838 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
843 * Converts page the x-coordinate of the event to pixel x-coordinates on the
844 * canvas (i.e. DOM Coords).
846 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
847 return Dygraph
.pageX(e
) - context
.px
852 * Converts page the y-coordinate of the event to pixel y-coordinates on the
853 * canvas (i.e. DOM Coords).
855 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
856 return Dygraph
.pageY(e
) - context
.py
860 * Set up all the mouse handlers needed to capture dragging behavior for zoom
864 Dygraph
.prototype.createDragInterface_
= function() {
866 // Tracks whether the mouse is down right now
868 isPanning
: false, // is this drag part of a pan?
869 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
870 dragStartX
: null, // pixel coordinates
871 dragStartY
: null, // pixel coordinates
872 dragEndX
: null, // pixel coordinates
873 dragEndY
: null, // pixel coordinates
875 prevEndX
: null, // pixel coordinates
876 prevEndY
: null, // pixel coordinates
877 prevDragDirection
: null,
879 // The value on the left side of the graph when a pan operation starts.
880 initialLeftmostDate
: null,
882 // The number of units each pixel spans. (This won't be valid for log
884 xUnitsPerPixel
: null,
886 // TODO(danvk): update this comment
887 // The range in second/value units that the viewport encompasses during a
888 // panning operation.
891 // Top-left corner of the canvas, in DOM coords
892 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
896 // Values for use with panEdgeFraction, which limit how far outside the
897 // graph's data boundaries it can be panned.
898 boundedDates
: null, // [minDate, maxDate]
899 boundedValues
: null, // [[minValue, maxValue] ...]
901 initializeMouseDown
: function(event
, g
, context
) {
902 // prevents mouse drags from selecting page text.
903 if (event
.preventDefault
) {
904 event
.preventDefault(); // Firefox, Chrome, etc.
906 event
.returnValue
= false; // IE
907 event
.cancelBubble
= true;
910 context
.px
= Dygraph
.findPosX(g
.canvas_
);
911 context
.py
= Dygraph
.findPosY(g
.canvas_
);
912 context
.dragStartX
= g
.dragGetX_(event
, context
);
913 context
.dragStartY
= g
.dragGetY_(event
, context
);
917 var interactionModel
= this.attr_("interactionModel");
919 // Self is the graph.
922 // Function that binds the graph and context to the handler.
923 var bindHandler
= function(handler
) {
924 return function(event
) {
925 handler(event
, self
, context
);
929 for (var eventName
in interactionModel
) {
930 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
931 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
932 bindHandler(interactionModel
[eventName
]));
935 // If the user releases the mouse button during a drag, but not over the
936 // canvas, then it doesn't count as a zooming action.
937 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
938 if (context
.isZooming
|| context
.isPanning
) {
939 context
.isZooming
= false;
940 context
.dragStartX
= null;
941 context
.dragStartY
= null;
944 if (context
.isPanning
) {
945 context
.isPanning
= false;
946 context
.draggingDate
= null;
947 context
.dateRange
= null;
948 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
949 delete self
.axes_
[i
].draggingValue
;
950 delete self
.axes_
[i
].dragValueRange
;
958 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
959 * up any previous zoom rectangles that were drawn. This could be optimized to
960 * avoid extra redrawing, but it's tricky to avoid interactions with the status
963 * @param {Number} direction the direction of the zoom rectangle. Acceptable
964 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
965 * @param {Number} startX The X position where the drag started, in canvas
967 * @param {Number} endX The current X position of the drag, in canvas coords.
968 * @param {Number} startY The Y position where the drag started, in canvas
970 * @param {Number} endY The current Y position of the drag, in canvas coords.
971 * @param {Number} prevDirection the value of direction on the previous call to
972 * this function. Used to avoid excess redrawing
973 * @param {Number} prevEndX The value of endX on the previous call to this
974 * function. Used to avoid excess redrawing
975 * @param {Number} prevEndY The value of endY on the previous call to this
976 * function. Used to avoid excess redrawing
979 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
980 endY
, prevDirection
, prevEndX
,
982 var ctx
= this.canvas_ctx_
;
984 // Clean up from the previous rect if necessary
985 if (prevDirection
== Dygraph
.HORIZONTAL
) {
986 ctx
.clearRect(Math
.min(startX
, prevEndX
), 0,
987 Math
.abs(startX
- prevEndX
), this.height_
);
988 } else if (prevDirection
== Dygraph
.VERTICAL
){
989 ctx
.clearRect(0, Math
.min(startY
, prevEndY
),
990 this.width_
, Math
.abs(startY
- prevEndY
));
993 // Draw a light-grey rectangle to show the new viewing area
994 if (direction
== Dygraph
.HORIZONTAL
) {
995 if (endX
&& startX
) {
996 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
997 ctx
.fillRect(Math
.min(startX
, endX
), 0,
998 Math
.abs(endX
- startX
), this.height_
);
1001 if (direction
== Dygraph
.VERTICAL
) {
1002 if (endY
&& startY
) {
1003 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1004 ctx
.fillRect(0, Math
.min(startY
, endY
),
1005 this.width_
, Math
.abs(endY
- startY
));
1011 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1012 * the canvas. The exact zoom window may be slightly larger if there are no data
1013 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1014 * which accepts dates that match the raw data. This function redraws the graph.
1016 * @param {Number} lowX The leftmost pixel value that should be visible.
1017 * @param {Number} highX The rightmost pixel value that should be visible.
1020 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1021 // Find the earliest and latest dates contained in this canvasx range.
1022 // Convert the call to date ranges of the raw data.
1023 var minDate
= this.toDataXCoord(lowX
);
1024 var maxDate
= this.toDataXCoord(highX
);
1025 this.doZoomXDates_(minDate
, maxDate
);
1029 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1030 * method with doZoomX which accepts pixel coordinates. This function redraws
1033 * @param {Number} minDate The minimum date that should be visible.
1034 * @param {Number} maxDate The maximum date that should be visible.
1037 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1038 this.dateWindow_
= [minDate
, maxDate
];
1039 this.zoomed_x_
= true;
1041 if (this.attr_("zoomCallback")) {
1042 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1047 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1048 * the canvas. This function redraws the graph.
1050 * @param {Number} lowY The topmost pixel value that should be visible.
1051 * @param {Number} highY The lowest pixel value that should be visible.
1054 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1055 // Find the highest and lowest values in pixel range for each axis.
1056 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1057 // This is because pixels increase as you go down on the screen, whereas data
1058 // coordinates increase as you go up the screen.
1059 var valueRanges
= [];
1060 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1061 var hi
= this.toDataYCoord(lowY
, i
);
1062 var low
= this.toDataYCoord(highY
, i
);
1063 this.axes_
[i
].valueWindow
= [low
, hi
];
1064 valueRanges
.push([low
, hi
]);
1067 this.zoomed_y_
= true;
1069 if (this.attr_("zoomCallback")) {
1070 var xRange
= this.xAxisRange();
1071 var yRange
= this.yAxisRange();
1072 this.attr_("zoomCallback")(xRange
[0], xRange
[1], this.yAxisRanges());
1077 * Reset the zoom to the original view coordinates. This is the same as
1078 * double-clicking on the graph.
1082 Dygraph
.prototype.doUnzoom_
= function() {
1084 if (this.dateWindow_
!= null) {
1086 this.dateWindow_
= null;
1089 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1090 if (this.axes_
[i
].valueWindow
!= null) {
1092 delete this.axes_
[i
].valueWindow
;
1096 // Clear any selection, since it's likely to be drawn in the wrong place.
1097 this.clearSelection();
1100 // Putting the drawing operation before the callback because it resets
1102 this.zoomed_x_
= false;
1103 this.zoomed_y_
= false;
1105 if (this.attr_("zoomCallback")) {
1106 var minDate
= this.rawData_
[0][0];
1107 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1108 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1114 * When the mouse moves in the canvas, display information about a nearby data
1115 * point and draw dots over those points in the data series. This function
1116 * takes care of cleanup of previously-drawn dots.
1117 * @param {Object} event The mousemove event from the browser.
1120 Dygraph
.prototype.mouseMove_
= function(event
) {
1121 // This prevents JS errors when mousing over the canvas before data loads.
1122 var points
= this.layout_
.points
;
1123 if (points
=== undefined
) return;
1125 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1130 // Loop through all the points and find the date nearest to our current
1132 var minDist
= 1e+100;
1134 for (var i
= 0; i
< points
.length
; i
++) {
1135 var point
= points
[i
];
1136 if (point
== null) continue;
1137 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1138 if (dist
> minDist
) continue;
1142 if (idx
>= 0) lastx
= points
[idx
].xval
;
1144 // Extract the points we've selected
1145 this.selPoints_
= [];
1146 var l
= points
.length
;
1147 if (!this.attr_("stackedGraph")) {
1148 for (var i
= 0; i
< l
; i
++) {
1149 if (points
[i
].xval
== lastx
) {
1150 this.selPoints_
.push(points
[i
]);
1154 // Need to 'unstack' points starting from the bottom
1155 var cumulative_sum
= 0;
1156 for (var i
= l
- 1; i
>= 0; i
--) {
1157 if (points
[i
].xval
== lastx
) {
1158 var p
= {}; // Clone the point since we modify it
1159 for (var k
in points
[i
]) {
1160 p
[k
] = points
[i
][k
];
1162 p
.yval
-= cumulative_sum
;
1163 cumulative_sum
+= p
.yval
;
1164 this.selPoints_
.push(p
);
1167 this.selPoints_
.reverse();
1170 if (this.attr_("highlightCallback")) {
1171 var px
= this.lastx_
;
1172 if (px
!== null && lastx
!= px
) {
1173 // only fire if the selected point has changed.
1174 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1178 // Save last x position for callbacks.
1179 this.lastx_
= lastx
;
1181 this.updateSelection_();
1185 * Transforms layout_.points index into data row number.
1186 * @param int layout_.points index
1187 * @return int row number, or -1 if none could be found.
1190 Dygraph
.prototype.idxToRow_
= function(idx
) {
1191 if (idx
< 0) return -1;
1193 for (var i
in this.layout_
.datasets
) {
1194 if (idx
< this.layout_
.datasets
[i
].length
) {
1195 return this.boundaryIds_
[0][0]+idx
;
1197 idx
-= this.layout_
.datasets
[i
].length
;
1204 * Generates HTML for the legend which is displayed when hovering over the
1205 * chart. If no selected points are specified, a default legend is returned
1206 * (this may just be the empty string).
1207 * @param { Number } [x] The x-value of the selected points.
1208 * @param { [Object] } [sel_points] List of selected points for the given
1209 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1211 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1212 // If no points are selected, we display a default legend. Traditionally,
1213 // this has been blank. But a better default would be a conventional legend,
1214 // which provides essential information for a non-interactive chart.
1215 if (typeof(x
) === 'undefined') {
1216 if (this.attr_('legend') != 'always') return '';
1218 var sepLines
= this.attr_('labelsSeparateLines');
1219 var labels
= this.attr_('labels');
1221 for (var i
= 1; i
< labels
.length
; i
++) {
1222 if (!this.visibility()[i
- 1]) continue;
1223 var c
= this.plotter_
.colors
[labels
[i
]];
1224 if (html
!= '') html
+= (sepLines
? '<br/>' : ' ');
1225 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1231 var html
= this.attr_('xValueFormatter')(x
) + ":";
1233 var fmtFunc
= this.attr_('yValueFormatter');
1234 var showZeros
= this.attr_("labelsShowZeroValues");
1235 var sepLines
= this.attr_("labelsSeparateLines");
1236 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1237 var pt
= this.selPoints_
[i
];
1238 if (pt
.yval
== 0 && !showZeros
) continue;
1239 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1240 if (sepLines
) html
+= "<br/>";
1242 var c
= this.plotter_
.colors
[pt
.name
];
1243 var yval
= fmtFunc(pt
.yval
, this);
1244 // TODO(danvk): use a template string here and make it an attribute.
1245 html
+= " <b><span style='color: " + c
+ ";'>"
1246 + pt
.name
+ "</span></b>:"
1254 * Displays information about the selected points in the legend. If there is no
1255 * selection, the legend will be cleared.
1256 * @param { Number } [x] The x-value of the selected points.
1257 * @param { [Object] } [sel_points] List of selected points for the given
1258 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1260 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1261 var html
= this.generateLegendHTML_(x
, sel_points
);
1262 var labelsDiv
= this.attr_("labelsDiv");
1263 if (labelsDiv
!== null) {
1264 labelsDiv
.innerHTML
= html
;
1266 if (typeof(this.shown_legend_error_
) == 'undefined') {
1267 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1268 this.shown_legend_error_
= true;
1274 * Draw dots over the selectied points in the data series. This function
1275 * takes care of cleanup of previously-drawn dots.
1278 Dygraph
.prototype.updateSelection_
= function() {
1279 // Clear the previously drawn vertical, if there is one
1280 var ctx
= this.canvas_ctx_
;
1281 if (this.previousVerticalX_
>= 0) {
1282 // Determine the maximum highlight circle size.
1283 var maxCircleSize
= 0;
1284 var labels
= this.attr_('labels');
1285 for (var i
= 1; i
< labels
.length
; i
++) {
1286 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1287 if (r
> maxCircleSize
) maxCircleSize
= r
;
1289 var px
= this.previousVerticalX_
;
1290 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1291 2 * maxCircleSize
+ 2, this.height_
);
1294 if (this.selPoints_
.length
> 0) {
1295 // Set the status message to indicate the selected point(s)
1296 if (this.attr_('showLabelsOnHighlight')) {
1297 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1300 // Draw colored circles over the center of each selected point
1301 var canvasx
= this.selPoints_
[0].canvasx
;
1303 for (var i
= 0; i
< this.selPoints_
.length
; i
++) {
1304 var pt
= this.selPoints_
[i
];
1305 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1307 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1309 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1310 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1315 this.previousVerticalX_
= canvasx
;
1320 * Manually set the selected points and display information about them in the
1321 * legend. The selection can be cleared using clearSelection() and queried
1322 * using getSelection().
1323 * @param { Integer } row number that should be highlighted (i.e. appear with
1324 * hover dots on the chart). Set to false to clear any selection.
1326 Dygraph
.prototype.setSelection
= function(row
) {
1327 // Extract the points we've selected
1328 this.selPoints_
= [];
1331 if (row
!== false) {
1332 row
= row
-this.boundaryIds_
[0][0];
1335 if (row
!== false && row
>= 0) {
1336 for (var i
in this.layout_
.datasets
) {
1337 if (row
< this.layout_
.datasets
[i
].length
) {
1338 var point
= this.layout_
.points
[pos
+row
];
1340 if (this.attr_("stackedGraph")) {
1341 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1344 this.selPoints_
.push(point
);
1346 pos
+= this.layout_
.datasets
[i
].length
;
1350 if (this.selPoints_
.length
) {
1351 this.lastx_
= this.selPoints_
[0].xval
;
1352 this.updateSelection_();
1354 this.clearSelection();
1360 * The mouse has left the canvas. Clear out whatever artifacts remain
1361 * @param {Object} event the mouseout event from the browser.
1364 Dygraph
.prototype.mouseOut_
= function(event
) {
1365 if (this.attr_("unhighlightCallback")) {
1366 this.attr_("unhighlightCallback")(event
);
1369 if (this.attr_("hideOverlayOnMouseOut")) {
1370 this.clearSelection();
1375 * Clears the current selection (i.e. points that were highlighted by moving
1376 * the mouse over the chart).
1378 Dygraph
.prototype.clearSelection
= function() {
1379 // Get rid of the overlay data
1380 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1381 this.setLegendHTML_();
1382 this.selPoints_
= [];
1387 * Returns the number of the currently selected row. To get data for this row,
1388 * you can use the getValue method.
1389 * @return { Integer } row number, or -1 if nothing is selected
1391 Dygraph
.prototype.getSelection
= function() {
1392 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1396 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1397 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1398 return row
+ this.boundaryIds_
[0][0];
1406 * Return a string version of a number. This respects the digitsAfterDecimal
1407 * and maxNumberWidth options.
1408 * @param {Number} x The number to be formatted
1409 * @param {Dygraph} g The dygraph object
1411 Dygraph
.numberFormatter
= function(x
, g
) {
1412 var sigFigs
= g
.attr_('sigFigs');
1414 if (sigFigs
!== null) {
1415 // User has opted for a fixed number of significant figures.
1416 return Dygraph
.floatFormat(x
, sigFigs
);
1419 var digits
= g
.attr_('digitsAfterDecimal');
1420 var maxNumberWidth
= g
.attr_('maxNumberWidth');
1422 // switch to scientific notation if we underflow or overflow fixed display.
1424 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
1425 Math
.abs(x
) < Math
.pow(10, -digits
))) {
1426 return x
.toExponential(digits
);
1428 return '' + Dygraph
.round_(x
, digits
);
1433 * Convert a JS date to a string appropriate to display on an axis that
1434 * is displaying values at the stated granularity.
1435 * @param {Date} date The date to format
1436 * @param {Number} granularity One of the Dygraph granularity constants
1437 * @return {String} The formatted date
1440 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
1441 if (granularity
>= Dygraph
.DECADAL
) {
1442 return date
.strftime('%Y');
1443 } else if (granularity
>= Dygraph
.MONTHLY
) {
1444 return date
.strftime('%b %y');
1446 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
1447 if (frac
== 0 || granularity
>= Dygraph
.DAILY
) {
1448 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
1450 return Dygraph
.hmsString_(date
.getTime());
1456 * Fires when there's data available to be graphed.
1457 * @param {String} data Raw CSV data to be plotted
1460 Dygraph
.prototype.loadedEvent_
= function(data
) {
1461 this.rawData_
= this.parseCSV_(data
);
1465 Dygraph
.prototype.months
= ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
1466 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
1467 Dygraph
.prototype.quarters
= ["Jan", "Apr", "Jul", "Oct"];
1470 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1473 Dygraph
.prototype.addXTicks_
= function() {
1474 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1476 if (this.dateWindow_
) {
1477 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1479 range
= [this.rawData_
[0][0], this.rawData_
[this.rawData_
.length
- 1][0]];
1482 var xTicks
= this.attr_('xTicker')(range
[0], range
[1], this);
1483 this.layout_
.setXTicks(xTicks
);
1486 // Time granularity enumeration
1487 Dygraph
.SECONDLY
= 0;
1488 Dygraph
.TWO_SECONDLY
= 1;
1489 Dygraph
.FIVE_SECONDLY
= 2;
1490 Dygraph
.TEN_SECONDLY
= 3;
1491 Dygraph
.THIRTY_SECONDLY
= 4;
1492 Dygraph
.MINUTELY
= 5;
1493 Dygraph
.TWO_MINUTELY
= 6;
1494 Dygraph
.FIVE_MINUTELY
= 7;
1495 Dygraph
.TEN_MINUTELY
= 8;
1496 Dygraph
.THIRTY_MINUTELY
= 9;
1497 Dygraph
.HOURLY
= 10;
1498 Dygraph
.TWO_HOURLY
= 11;
1499 Dygraph
.SIX_HOURLY
= 12;
1501 Dygraph
.WEEKLY
= 14;
1502 Dygraph
.MONTHLY
= 15;
1503 Dygraph
.QUARTERLY
= 16;
1504 Dygraph
.BIANNUAL
= 17;
1505 Dygraph
.ANNUAL
= 18;
1506 Dygraph
.DECADAL
= 19;
1507 Dygraph
.CENTENNIAL
= 20;
1508 Dygraph
.NUM_GRANULARITIES
= 21;
1510 Dygraph
.SHORT_SPACINGS
= [];
1511 Dygraph
.SHORT_SPACINGS
[Dygraph
.SECONDLY
] = 1000 * 1;
1512 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_SECONDLY
] = 1000 * 2;
1513 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_SECONDLY
] = 1000 * 5;
1514 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_SECONDLY
] = 1000 * 10;
1515 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_SECONDLY
] = 1000 * 30;
1516 Dygraph
.SHORT_SPACINGS
[Dygraph
.MINUTELY
] = 1000 * 60;
1517 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_MINUTELY
] = 1000 * 60 * 2;
1518 Dygraph
.SHORT_SPACINGS
[Dygraph
.FIVE_MINUTELY
] = 1000 * 60 * 5;
1519 Dygraph
.SHORT_SPACINGS
[Dygraph
.TEN_MINUTELY
] = 1000 * 60 * 10;
1520 Dygraph
.SHORT_SPACINGS
[Dygraph
.THIRTY_MINUTELY
] = 1000 * 60 * 30;
1521 Dygraph
.SHORT_SPACINGS
[Dygraph
.HOURLY
] = 1000 * 3600;
1522 Dygraph
.SHORT_SPACINGS
[Dygraph
.TWO_HOURLY
] = 1000 * 3600 * 2;
1523 Dygraph
.SHORT_SPACINGS
[Dygraph
.SIX_HOURLY
] = 1000 * 3600 * 6;
1524 Dygraph
.SHORT_SPACINGS
[Dygraph
.DAILY
] = 1000 * 86400;
1525 Dygraph
.SHORT_SPACINGS
[Dygraph
.WEEKLY
] = 1000 * 604800;
1529 * If we used this time granularity, how many ticks would there be?
1530 * This is only an approximation, but it's generally good enough.
1532 Dygraph
.prototype.NumXTicks
= function(start_time
, end_time
, granularity
) {
1533 if (granularity
< Dygraph
.MONTHLY
) {
1534 // Generate one tick mark for every fixed interval of time.
1535 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1536 return Math
.floor(0.5 + 1.0 * (end_time
- start_time
) / spacing
);
1538 var year_mod
= 1; // e.g. to only print one point every 10 years.
1539 var num_months
= 12;
1540 if (granularity
== Dygraph
.QUARTERLY
) num_months
= 3;
1541 if (granularity
== Dygraph
.BIANNUAL
) num_months
= 2;
1542 if (granularity
== Dygraph
.ANNUAL
) num_months
= 1;
1543 if (granularity
== Dygraph
.DECADAL
) { num_months
= 1; year_mod
= 10; }
1544 if (granularity
== Dygraph
.CENTENNIAL
) { num_months
= 1; year_mod
= 100; }
1546 var msInYear
= 365.2524 * 24 * 3600 * 1000;
1547 var num_years
= 1.0 * (end_time
- start_time
) / msInYear
;
1548 return Math
.floor(0.5 + 1.0 * num_years
* num_months
/ year_mod
);
1555 * Construct an x-axis of nicely-formatted times on meaningful boundaries
1556 * (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1558 * Returns an array containing {v: millis, label: label} dictionaries.
1560 Dygraph
.prototype.GetXAxis
= function(start_time
, end_time
, granularity
) {
1561 var formatter
= this.attr_("xAxisLabelFormatter");
1563 if (granularity
< Dygraph
.MONTHLY
) {
1564 // Generate one tick mark for every fixed interval of time.
1565 var spacing
= Dygraph
.SHORT_SPACINGS
[granularity
];
1566 var format
= '%d%b'; // e.g. "1Jan"
1568 // Find a time less than start_time which occurs on a "nice" time boundary
1569 // for this granularity.
1570 var g
= spacing
/ 1000;
1571 var d
= new Date(start_time
);
1572 if (g
<= 60) { // seconds
1573 var x
= d
.getSeconds(); d
.setSeconds(x
- x
% g
);
1577 if (g
<= 60) { // minutes
1578 var x
= d
.getMinutes(); d
.setMinutes(x
- x
% g
);
1583 if (g
<= 24) { // days
1584 var x
= d
.getHours(); d
.setHours(x
- x
% g
);
1589 if (g
== 7) { // one week
1590 d
.setDate(d
.getDate() - d
.getDay());
1595 start_time
= d
.getTime();
1597 for (var t
= start_time
; t
<= end_time
; t
+= spacing
) {
1598 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1601 // Display a tick mark on the first of a set of months of each year.
1602 // Years get a tick mark iff y % year_mod == 0. This is useful for
1603 // displaying a tick mark once every 10 years, say, on long time scales.
1605 var year_mod
= 1; // e.g. to only print one point every 10 years.
1607 if (granularity
== Dygraph
.MONTHLY
) {
1608 months
= [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
1609 } else if (granularity
== Dygraph
.QUARTERLY
) {
1610 months
= [ 0, 3, 6, 9 ];
1611 } else if (granularity
== Dygraph
.BIANNUAL
) {
1613 } else if (granularity
== Dygraph
.ANNUAL
) {
1615 } else if (granularity
== Dygraph
.DECADAL
) {
1618 } else if (granularity
== Dygraph
.CENTENNIAL
) {
1622 this.warn("Span of dates is too long");
1625 var start_year
= new Date(start_time
).getFullYear();
1626 var end_year
= new Date(end_time
).getFullYear();
1627 var zeropad
= Dygraph
.zeropad
;
1628 for (var i
= start_year
; i
<= end_year
; i
++) {
1629 if (i
% year_mod
!= 0) continue;
1630 for (var j
= 0; j
< months
.length
; j
++) {
1631 var date_str
= i
+ "/" + zeropad(1 + months[j]) + "/01";
1632 var t
= Dygraph
.dateStrToMillis(date_str
);
1633 if (t
< start_time
|| t
> end_time
) continue;
1634 ticks
.push({ v
:t
, label
: formatter(new Date(t
), granularity
) });
1644 * Add ticks to the x-axis based on a date range.
1645 * @param {Number} startDate Start of the date window (millis since epoch)
1646 * @param {Number} endDate End of the date window (millis since epoch)
1647 * @param {Dygraph} self The dygraph object
1648 * @return { [Object] } Array of {label, value} tuples.
1651 Dygraph
.dateTicker
= function(startDate
, endDate
, self
) {
1652 // TODO(danvk): why does this take 'self' as a param?
1654 for (var i
= 0; i
< Dygraph
.NUM_GRANULARITIES
; i
++) {
1655 var num_ticks
= self
.NumXTicks(startDate
, endDate
, i
);
1656 if (self
.width_
/ num_ticks
>= self
.attr_('pixelsPerXLabel')) {
1663 return self
.GetXAxis(startDate
, endDate
, chosen
);
1665 // this can happen if self.width_ is zero.
1672 * This is a list of human-friendly values at which to show tick marks on a log
1673 * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so:
1674 * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ...
1675 * NOTE: this assumes that Dygraph.LOG_SCALE = 10.
1677 Dygraph
.PREFERRED_LOG_TICK_VALUES
= function() {
1679 for (var power
= -39; power
<= 39; power
++) {
1680 var range
= Math
.pow(10, power
);
1681 for (var mult
= 1; mult
<= 9; mult
++) {
1682 var val
= range
* mult
;
1689 // TODO(konigsberg): Update comment.
1691 * Add ticks when the x axis has numbers on it (instead of dates)
1693 * @param {Number} minV minimum value
1694 * @param {Number} maxV maximum value
1696 * @param {function} attribute accessor function.
1697 * @return {[Object]} Array of {label, value} tuples.
1699 Dygraph
.numericTicks
= function(minV
, maxV
, self
, axis_props
, vals
) {
1700 var attr
= function(k
) {
1701 if (axis_props
&& axis_props
.hasOwnProperty(k
)) return axis_props
[k
];
1702 return self
.attr_(k
);
1707 for (var i
= 0; i
< vals
.length
; i
++) {
1708 ticks
.push({v
: vals
[i
]});
1711 if (axis_props
&& attr("logscale")) {
1712 var pixelsPerTick
= attr('pixelsPerYLabel');
1713 // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h?
1714 var nTicks
= Math
.floor(self
.height_
/ pixelsPerTick
);
1715 var minIdx
= Dygraph
.binarySearch(minV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, 1);
1716 var maxIdx
= Dygraph
.binarySearch(maxV
, Dygraph
.PREFERRED_LOG_TICK_VALUES
, -1);
1721 maxIdx
= Dygraph
.PREFERRED_LOG_TICK_VALUES
.length
- 1;
1723 // Count the number of tick values would appear, if we can get at least
1724 // nTicks / 4 accept them
.
1725 var lastDisplayed
= null;
1726 if (maxIdx
- minIdx
>= nTicks
/ 4) {
1727 var axisId
= axis_props
.yAxisId
;
1728 for (var idx
= maxIdx
; idx
>= minIdx
; idx
--) {
1729 var tickValue
= Dygraph
.PREFERRED_LOG_TICK_VALUES
[idx
];
1730 var domCoord
= axis_props
.g
.toDomYCoord(tickValue
, axisId
);
1731 var tick
= { v
: tickValue
};
1732 if (lastDisplayed
== null) {
1734 tickValue
: tickValue
,
1738 if (domCoord
- lastDisplayed
.domCoord
>= pixelsPerTick
) {
1740 tickValue
: tickValue
,
1749 // Since we went in backwards order.
1754 // ticks.length won't be 0 if the log scale function finds values to insert.
1755 if (ticks
.length
== 0) {
1757 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1758 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks
).
1759 // The first spacing greater than pixelsPerYLabel is what we use.
1760 // TODO(danvk): version that works on a log scale.
1761 if (attr("labelsKMG2")) {
1762 var mults
= [1, 2, 4, 8];
1764 var mults
= [1, 2, 5];
1766 var scale
, low_val
, high_val
, nTicks
;
1767 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1768 var pixelsPerTick
= attr('pixelsPerYLabel');
1769 for (var i
= -10; i
< 50; i
++) {
1770 if (attr("labelsKMG2")) {
1771 var base_scale
= Math
.pow(16, i
);
1773 var base_scale
= Math
.pow(10, i
);
1775 for (var j
= 0; j
< mults
.length
; j
++) {
1776 scale
= base_scale
* mults
[j
];
1777 low_val
= Math
.floor(minV
/ scale
) * scale
;
1778 high_val
= Math
.ceil(maxV
/ scale
) * scale
;
1779 nTicks
= Math
.abs(high_val
- low_val
) / scale
;
1780 var spacing
= self
.height_
/ nTicks
;
1781 // wish I could break out of both loops at once...
1782 if (spacing
> pixelsPerTick
) break;
1784 if (spacing
> pixelsPerTick
) break;
1787 // Construct the set of ticks.
1788 // Allow reverse y-axis if it's explicitly requested.
1789 if (low_val
> high_val
) scale
*= -1;
1790 for (var i
= 0; i
< nTicks
; i
++) {
1791 var tickV
= low_val
+ i
* scale
;
1792 ticks
.push( {v
: tickV
} );
1797 // Add formatted labels to the ticks.
1800 if (attr("labelsKMB")) {
1802 k_labels
= [ "K", "M", "B", "T" ];
1804 if (attr("labelsKMG2")) {
1805 if (k
) self
.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1807 k_labels
= [ "k", "M", "G", "T" ];
1809 var formatter
= attr('yAxisLabelFormatter') ?
1810 attr('yAxisLabelFormatter') : attr('yValueFormatter');
1812 // Add labels to the ticks.
1813 for (var i
= 0; i
< ticks
.length
; i
++) {
1814 if (ticks
[i
].label
!== undefined
) continue; // Use current label.
1815 var tickV
= ticks
[i
].v
;
1816 var absTickV
= Math
.abs(tickV
);
1817 var label
= formatter(tickV
, self
);
1818 if (k_labels
.length
> 0) {
1819 // Round up to an appropriate unit.
1821 for (var j
= 3; j
>= 0; j
--, n
/= k
) {
1822 if (absTickV
>= n
) {
1823 label
= Dygraph
.round_(tickV
/ n
, attr('digitsAfterDecimal')) + k_labels
[j
];
1828 ticks
[i
].label
= label
;
1836 * Computes the range of the data series (including confidence intervals).
1837 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
1838 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1839 * @return [low, high]
1841 Dygraph
.prototype.extremeValues_
= function(series
) {
1842 var minY
= null, maxY
= null;
1844 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1846 // With custom bars, maxY is the max of the high values.
1847 for (var j
= 0; j
< series
.length
; j
++) {
1848 var y
= series
[j
][1][0];
1850 var low
= y
- series
[j
][1][1];
1851 var high
= y
+ series
[j
][1][2];
1852 if (low
> y
) low
= y
; // this can happen with custom bars,
1853 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1854 if (maxY
== null || high
> maxY
) {
1857 if (minY
== null || low
< minY
) {
1862 for (var j
= 0; j
< series
.length
; j
++) {
1863 var y
= series
[j
][1];
1864 if (y
=== null || isNaN(y
)) continue;
1865 if (maxY
== null || y
> maxY
) {
1868 if (minY
== null || y
< minY
) {
1874 return [minY
, maxY
];
1879 * This function is called once when the chart's data is changed or the options
1880 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1881 * idea is that values derived from the chart's data can be computed here,
1882 * rather than every time the chart is drawn. This includes things like the
1883 * number of axes, rolling averages, etc.
1885 Dygraph
.prototype.predraw_
= function() {
1886 var start
= new Date();
1888 // TODO(danvk): move more computations out of drawGraph_ and into here.
1889 this.computeYAxes_();
1891 // Create a new plotter.
1892 if (this.plotter_
) this.plotter_
.clear();
1893 this.plotter_
= new DygraphCanvasRenderer(this,
1898 // The roller sits in the bottom left corner of the chart. We don't know where
1899 // this will be until the options are available, so it's positioned here.
1900 this.createRollInterface_();
1902 // Same thing applies for the labelsDiv. It's right edge should be flush with
1903 // the right edge of the charting area (which may not be the same as the right
1904 // edge of the div, if we have two y-axes.
1905 this.positionLabelsDiv_();
1907 // If the data or options have changed, then we'd better redraw.
1910 // This is used to determine whether to do various animations.
1911 var end
= new Date();
1912 this.drawingTimeMs_
= (end
- start
);
1916 * Update the graph with new data. This method is called when the viewing area
1917 * has changed. If the underlying data or options have changed, predraw_ will
1918 * be called before drawGraph_ is called.
1920 * clearSelection, when undefined or true, causes this.clearSelection to be
1921 * called at the end of the draw operation. This should rarely be defined,
1922 * and never true (that is it should be undefined most of the time, and
1927 Dygraph
.prototype.drawGraph_
= function(clearSelection
) {
1928 var start
= new Date();
1930 if (typeof(clearSelection
) === 'undefined') {
1931 clearSelection
= true;
1934 var data
= this.rawData_
;
1936 // This is used to set the second parameter to drawCallback, below.
1937 var is_initial_draw
= this.is_initial_draw_
;
1938 this.is_initial_draw_
= false;
1940 var minY
= null, maxY
= null;
1941 this.layout_
.removeAllDatasets();
1943 this.attrs_
['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
1945 // Loop over the fields (series). Go from the last to the first,
1946 // because if they're stacked that's how we accumulate the values.
1948 var cumulative_y
= []; // For stacked series.
1951 var extremes
= {}; // series name -> [low, high]
1953 // Loop over all fields and create datasets
1954 for (var i
= data
[0].length
- 1; i
>= 1; i
--) {
1955 if (!this.visibility()[i
- 1]) continue;
1957 var seriesName
= this.attr_("labels")[i
];
1958 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1959 var logScale
= this.attr_('logscale', i
);
1962 for (var j
= 0; j
< data
.length
; j
++) {
1963 var date
= data
[j
][0];
1964 var point
= data
[j
][i
];
1966 // On the log scale, points less than zero do not exist.
1967 // This will create a gap in the chart. Note that this ignores
1968 // connectSeparatedPoints.
1972 series
.push([date
, point
]);
1974 if (point
!= null || !connectSeparatedPoints
) {
1975 series
.push([date
, point
]);
1980 // TODO(danvk): move this into predraw_. It's insane to do it here.
1981 series
= this.rollingAverage(series
, this.rollPeriod_
);
1983 // Prune down to the desired range, if necessary (for zooming)
1984 // Because there can be lines going to points outside of the visible area,
1985 // we actually prune to visible points, plus one on either side.
1986 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1987 if (this.dateWindow_
) {
1988 var low
= this.dateWindow_
[0];
1989 var high
= this.dateWindow_
[1];
1991 // TODO(danvk): do binary search instead of linear search.
1992 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1993 var firstIdx
= null, lastIdx
= null;
1994 for (var k
= 0; k
< series
.length
; k
++) {
1995 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1998 if (series
[k
][0] <= high
) {
2002 if (firstIdx
=== null) firstIdx
= 0;
2003 if (firstIdx
> 0) firstIdx
--;
2004 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2005 if (lastIdx
< series
.length
- 1) lastIdx
++;
2006 this.boundaryIds_
[i
-1] = [firstIdx
, lastIdx
];
2007 for (var k
= firstIdx
; k
<= lastIdx
; k
++) {
2008 pruned
.push(series
[k
]);
2012 this.boundaryIds_
[i
-1] = [0, series
.length
-1];
2015 var seriesExtremes
= this.extremeValues_(series
);
2018 for (var j
=0; j
<series
.length
; j
++) {
2019 val
= [series
[j
][0], series
[j
][1][0], series
[j
][1][1], series
[j
][1][2]];
2022 } else if (this.attr_("stackedGraph")) {
2023 var l
= series
.length
;
2025 for (var j
= 0; j
< l
; j
++) {
2026 // If one data set has a NaN, let all subsequent stacked
2027 // sets inherit the NaN -- only start at 0 for the first set.
2028 var x
= series
[j
][0];
2029 if (cumulative_y
[x
] === undefined
) {
2030 cumulative_y
[x
] = 0;
2033 actual_y
= series
[j
][1];
2034 cumulative_y
[x
] += actual_y
;
2036 series
[j
] = [x
, cumulative_y
[x
]]
2038 if (cumulative_y
[x
] > seriesExtremes
[1]) {
2039 seriesExtremes
[1] = cumulative_y
[x
];
2041 if (cumulative_y
[x
] < seriesExtremes
[0]) {
2042 seriesExtremes
[0] = cumulative_y
[x
];
2046 extremes
[seriesName
] = seriesExtremes
;
2048 datasets
[i
] = series
;
2051 for (var i
= 1; i
< datasets
.length
; i
++) {
2052 if (!this.visibility()[i
- 1]) continue;
2053 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2056 this.computeYAxisRanges_(extremes
);
2057 this.layout_
.setYAxes(this.axes_
);
2061 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2062 var tmp_zoomed_x
= this.zoomed_x_
;
2063 // Tell PlotKit to use this new data and render itself
2064 this.layout_
.setDateWindow(this.dateWindow_
);
2065 this.zoomed_x_
= tmp_zoomed_x
;
2066 this.layout_
.evaluateWithError();
2067 this.renderGraph_(is_initial_draw
, false);
2069 if (this.attr_("timingName")) {
2070 var end
= new Date();
2072 console
.log(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms")
2077 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
, clearSelection
) {
2078 this.plotter_
.clear();
2079 this.plotter_
.render();
2080 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2081 this.canvas_
.height
);
2083 if (is_initial_draw
) {
2084 // Generate a static legend before any particular point is selected.
2085 this.setLegendHTML_();
2087 if (clearSelection
) {
2088 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2089 // We should select the point nearest the page x/y here
, but it
's easier
2090 // to just clear the selection. This prevents erroneous hover dots from
2092 this.clearSelection();
2094 this.clearSelection();
2099 if (this.attr_("drawCallback") !== null) {
2100 this.attr_("drawCallback")(this, is_initial_draw);
2106 * Determine properties of the y-axes which are independent of the data
2107 * currently being displayed. This includes things like the number of axes and
2108 * the style of the axes. It does not include the range of each axis and its
2110 * This fills in this.axes_ and this.seriesToAxisMap_.
2111 * axes_ = [ { options } ]
2112 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2113 * indices are into the axes_ array.
2115 Dygraph.prototype.computeYAxes_ = function() {
2116 // Preserve valueWindow settings if they exist, and if the user hasn't
2117 // specified a new valueRange.
2119 if (this.axes_
!= undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") == false) {
2121 for (var index
= 0; index
< this.axes_
.length
; index
++) {
2122 valueWindows
.push(this.axes_
[index
].valueWindow
);
2127 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2128 this.seriesToAxisMap_
= {};
2130 // Get a list of series names.
2131 var labels
= this.attr_("labels");
2133 for (var i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2135 // all options which could be applied per-axis:
2143 'axisLabelFontSize',
2148 // Copy global axis options over to the first axis.
2149 for (var i
= 0; i
< axisOptions
.length
; i
++) {
2150 var k
= axisOptions
[i
];
2151 var v
= this.attr_(k
);
2152 if (v
) this.axes_
[0][k
] = v
;
2155 // Go through once and add all the axes.
2156 for (var seriesName
in series
) {
2157 if (!series
.hasOwnProperty(seriesName
)) continue;
2158 var axis
= this.attr_("axis", seriesName
);
2160 this.seriesToAxisMap_
[seriesName
] = 0;
2163 if (typeof(axis
) == 'object') {
2164 // Add a new axis, making a copy of its per-axis options.
2166 Dygraph
.update(opts
, this.axes_
[0]);
2167 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2168 var yAxisId
= this.axes_
.length
;
2169 opts
.yAxisId
= yAxisId
;
2171 Dygraph
.update(opts
, axis
);
2172 this.axes_
.push(opts
);
2173 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2177 // Go through one more time and assign series to an axis defined by another
2178 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2179 for (var seriesName
in series
) {
2180 if (!series
.hasOwnProperty(seriesName
)) continue;
2181 var axis
= this.attr_("axis", seriesName
);
2182 if (typeof(axis
) == 'string') {
2183 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2184 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2185 "series " + axis
+ ", which does not define its own axis.");
2188 var idx
= this.seriesToAxisMap_
[axis
];
2189 this.seriesToAxisMap_
[seriesName
] = idx
;
2193 // Now we remove series from seriesToAxisMap_ which are not visible. We do
2194 // this last so that hiding the first series doesn't destroy the axis
2195 // properties of the primary axis.
2196 var seriesToAxisFiltered
= {};
2197 var vis
= this.visibility();
2198 for (var i
= 1; i
< labels
.length
; i
++) {
2200 if (vis
[i
- 1]) seriesToAxisFiltered
[s
] = this.seriesToAxisMap_
[s
];
2202 this.seriesToAxisMap_
= seriesToAxisFiltered
;
2204 if (valueWindows
!= undefined
) {
2205 // Restore valueWindow settings.
2206 for (var index
= 0; index
< valueWindows
.length
; index
++) {
2207 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2213 * Returns the number of y-axes on the chart.
2214 * @return {Number} the number of axes.
2216 Dygraph
.prototype.numAxes
= function() {
2218 for (var series
in this.seriesToAxisMap_
) {
2219 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2220 var idx
= this.seriesToAxisMap_
[series
];
2221 if (idx
> last_axis
) last_axis
= idx
;
2223 return 1 + last_axis
;
2228 * Returns axis properties for the given series.
2229 * @param { String } setName The name of the series for which to get axis
2230 * properties, e.g. 'Y1'.
2231 * @return { Object } The axis properties.
2233 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2234 // TODO(danvk): handle errors.
2235 return this.axes_
[this.seriesToAxisMap_
[series
]];
2240 * Determine the value range and tick marks for each axis.
2241 * @param {Object} extremes A mapping from seriesName -> [low, high]
2242 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2244 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2245 // Build a map from axis number -> [list of series names]
2246 var seriesForAxis
= [];
2247 for (var series
in this.seriesToAxisMap_
) {
2248 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2249 var idx
= this.seriesToAxisMap_
[series
];
2250 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2251 seriesForAxis
[idx
].push(series
);
2254 // Compute extreme values, a span and tick marks for each axis.
2255 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2256 var axis
= this.axes_
[i
];
2258 if (!seriesForAxis
[i
]) {
2259 // If no series are defined or visible then use a reasonable default
2260 axis
.extremeRange
= [0, 1];
2262 // Calculate the extremes of extremes.
2263 var series
= seriesForAxis
[i
];
2264 var minY
= Infinity
; // extremes[series[0]][0];
2265 var maxY
= -Infinity
; // extremes[series[0]][1];
2266 var extremeMinY
, extremeMaxY
;
2267 for (var j
= 0; j
< series
.length
; j
++) {
2268 // Only use valid extremes to stop null data series' from corrupting the scale.
2269 extremeMinY
= extremes
[series
[j
]][0];
2270 if (extremeMinY
!= null) {
2271 minY
= Math
.min(extremeMinY
, minY
);
2273 extremeMaxY
= extremes
[series
[j
]][1];
2274 if (extremeMaxY
!= null) {
2275 maxY
= Math
.max(extremeMaxY
, maxY
);
2278 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2280 // Ensure we have a valid scale, otherwise defualt to zero for safety.
2281 if (minY
== Infinity
) minY
= 0;
2282 if (maxY
== -Infinity
) maxY
= 0;
2284 // Add some padding and round up to an integer to be human-friendly.
2285 var span
= maxY
- minY
;
2286 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2287 if (span
== 0) { span
= maxY
; }
2291 if (axis
.logscale
) {
2292 var maxAxisY
= maxY
+ 0.1 * span
;
2293 var minAxisY
= minY
;
2295 var maxAxisY
= maxY
+ 0.1 * span
;
2296 var minAxisY
= minY
- 0.1 * span
;
2298 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2299 if (!this.attr_("avoidMinZero")) {
2300 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2301 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2304 if (this.attr_("includeZero")) {
2305 if (maxY
< 0) maxAxisY
= 0;
2306 if (minY
> 0) minAxisY
= 0;
2309 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2311 if (axis
.valueWindow
) {
2312 // This is only set if the user has zoomed on the y-axis. It is never set
2313 // by a user. It takes precedence over axis.valueRange because, if you set
2314 // valueRange, you'd still expect to be able to pan.
2315 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2316 } else if (axis
.valueRange
) {
2317 // This is a user-set value range for this axis.
2318 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2320 axis
.computedValueRange
= axis
.extremeRange
;
2323 // Add ticks. By default, all axes inherit the tick positions of the
2324 // primary axis. However, if an axis is specifically marked as having
2325 // independent ticks, then that is permissible as well.
2326 if (i
== 0 || axis
.independentTicks
) {
2328 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2329 axis
.computedValueRange
[1],
2333 var p_axis
= this.axes_
[0];
2334 var p_ticks
= p_axis
.ticks
;
2335 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2336 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2337 var tick_values
= [];
2338 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2339 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2340 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2341 tick_values
.push(y_val
);
2345 Dygraph
.numericTicks(axis
.computedValueRange
[0],
2346 axis
.computedValueRange
[1],
2347 this, axis
, tick_values
);
2354 * Calculates the rolling average of a data set.
2355 * If originalData is [label, val], rolls the average of those.
2356 * If originalData is [label, [, it's interpreted as [value, stddev]
2357 * and the roll is returned in the same form, with appropriately reduced
2358 * stddev for each value.
2359 * Note that this is where fractional input (i.e. '5/10') is converted into
2361 * @param {Array} originalData The data in the appropriate format (see above)
2362 * @param {Number} rollPeriod The number of points over which to average the
2365 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2366 if (originalData
.length
< 2)
2367 return originalData
;
2368 var rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2369 var rollingData
= [];
2370 var sigma
= this.attr_("sigma");
2372 if (this.fractions_
) {
2374 var den
= 0; // numerator/denominator
2376 for (var i
= 0; i
< originalData
.length
; i
++) {
2377 num
+= originalData
[i
][1][0];
2378 den
+= originalData
[i
][1][1];
2379 if (i
- rollPeriod
>= 0) {
2380 num
-= originalData
[i
- rollPeriod
][1][0];
2381 den
-= originalData
[i
- rollPeriod
][1][1];
2384 var date
= originalData
[i
][0];
2385 var value
= den
? num
/ den
: 0.0;
2386 if (this.attr_("errorBars")) {
2387 if (this.wilsonInterval_
) {
2388 // For more details on this confidence interval, see:
2389 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2391 var p
= value
< 0 ? 0 : value
, n
= den
;
2392 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2393 var denom
= 1 + sigma
* sigma
/ den
;
2394 var low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2395 var high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2396 rollingData
[i
] = [date
,
2397 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2399 rollingData
[i
] = [date
, [0, 0, 0]];
2402 var stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2403 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2406 rollingData
[i
] = [date
, mult
* value
];
2409 } else if (this.attr_("customBars")) {
2414 for (var i
= 0; i
< originalData
.length
; i
++) {
2415 var data
= originalData
[i
][1];
2417 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2419 if (y
!= null && !isNaN(y
)) {
2425 if (i
- rollPeriod
>= 0) {
2426 var prev
= originalData
[i
- rollPeriod
];
2427 if (prev
[1][1] != null && !isNaN(prev
[1][1])) {
2435 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2436 1.0 * (mid
- low
) / count
,
2437 1.0 * (high
- mid
) / count
]];
2439 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2443 // Calculate the rolling average for the first rollPeriod - 1 points where
2444 // there is not enough data to roll over the full number of points
2445 var num_init_points
= Math
.min(rollPeriod
- 1, originalData
.length
- 2);
2446 if (!this.attr_("errorBars")){
2447 if (rollPeriod
== 1) {
2448 return originalData
;
2451 for (var i
= 0; i
< originalData
.length
; i
++) {
2454 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2455 var y
= originalData
[j
][1];
2456 if (y
== null || isNaN(y
)) continue;
2458 sum
+= originalData
[j
][1];
2461 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2463 rollingData
[i
] = [originalData
[i
][0], null];
2468 for (var i
= 0; i
< originalData
.length
; i
++) {
2472 for (var j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2473 var y
= originalData
[j
][1][0];
2474 if (y
== null || isNaN(y
)) continue;
2476 sum
+= originalData
[j
][1][0];
2477 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2480 var stddev
= Math
.sqrt(variance
) / num_ok
;
2481 rollingData
[i
] = [originalData
[i
][0],
2482 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2484 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2494 * Detects the type of the str (date or numeric) and sets the various
2495 * formatting attributes in this.attrs_ based on this type.
2496 * @param {String} str An x value.
2499 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2501 if (str
.indexOf('-') > 0 ||
2502 str
.indexOf('/') >= 0 ||
2503 isNaN(parseFloat(str
))) {
2505 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2506 // TODO(danvk): remove support for this format.
2511 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2512 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2513 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2514 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2516 // TODO(danvk): use Dygraph.numberFormatter here?
2517 /** @private (shut up, jsdoc!) */
2518 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2519 /** @private (shut up, jsdoc!) */
2520 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2521 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2522 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2527 * Parses the value as a floating point number. This is like the parseFloat()
2528 * built-in, but with a few differences:
2529 * - the empty string is parsed as null, rather than NaN.
2530 * - if the string cannot be parsed at all, an error is logged.
2531 * If the string can't be parsed, this method returns null.
2532 * @param {String} x The string to be parsed
2533 * @param {Number} opt_line_no The line number from which the string comes.
2534 * @param {String} opt_line The text of the line from which the string comes.
2538 // Parse the x as a float or return null if it's not a number.
2539 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2540 var val
= parseFloat(x
);
2541 if (!isNaN(val
)) return val
;
2543 // Try to figure out what happeend.
2544 // If the value is the empty string, parse it as null.
2545 if (/^ *$/.test(x
)) return null;
2547 // If it was actually "NaN", return it as NaN.
2548 if (/^ *nan *$/i.test(x
)) return NaN
;
2550 // Looks like a parsing error.
2551 var msg
= "Unable to parse '" + x
+ "' as a number";
2552 if (opt_line
!== null && opt_line_no
!== null) {
2553 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2562 * Parses a string in a special csv format. We expect a csv file where each
2563 * line is a date point, and the first field in each line is the date string.
2564 * We also expect that all remaining fields represent series.
2565 * if the errorBars attribute is set, then interpret the fields as:
2566 * date, series1, stddev1, series2, stddev2, ...
2567 * @param {[Object]} data See above.
2569 * @return [Object] An array with one entry for each row. These entries
2570 * are an array of cells in that row. The first entry is the parsed x-value for
2571 * the row. The second, third, etc. are the y-values. These can take on one of
2572 * three forms, depending on the CSV and constructor parameters:
2574 * 2. [ value, stddev ]
2575 * 3. [ low value, center value, high value ]
2577 Dygraph
.prototype.parseCSV_
= function(data
) {
2579 var lines
= data
.split("\n");
2581 // Use the default delimiter or fall back to a tab if that makes sense.
2582 var delim
= this.attr_('delimiter');
2583 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2588 if (!('labels' in this.user_attrs_
)) {
2589 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2591 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2596 var defaultParserSet
= false; // attempt to auto-detect x value type
2597 var expectedCols
= this.attr_("labels").length
;
2598 var outOfOrder
= false;
2599 for (var i
= start
; i
< lines
.length
; i
++) {
2600 var line
= lines
[i
];
2602 if (line
.length
== 0) continue; // skip blank lines
2603 if (line
[0] == '#') continue; // skip comment lines
2604 var inFields
= line
.split(delim
);
2605 if (inFields
.length
< 2) continue;
2608 if (!defaultParserSet
) {
2609 this.detectTypeFromString_(inFields
[0]);
2610 xParser
= this.attr_("xValueParser");
2611 defaultParserSet
= true;
2613 fields
[0] = xParser(inFields
[0], this);
2615 // If fractions are expected, parse the numbers as "A/B
"
2616 if (this.fractions_) {
2617 for (var j = 1; j < inFields.length; j++) {
2618 // TODO(danvk): figure out an appropriate way to flag parse errors.
2619 var vals = inFields[j].split("/");
2620 if (vals.length != 2) {
2621 this.error('Expected fractional "num
/den
" values in CSV data ' +
2622 "but found a value
'" + inFields[j] + "' on line
" +
2623 (1 + i) + " ('" + line + "') which is not of
this form
.");
2626 fields[j] = [this.parseFloat_(vals[0], i, line),
2627 this.parseFloat_(vals[1], i, line)];
2630 } else if (this.attr_("errorBars
")) {
2631 // If there are error bars, values are (value, stddev) pairs
2632 if (inFields.length % 2 != 1) {
2633 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2634 'but line ' + (1 + i) + ' has an odd number of values (' +
2635 (inFields.length - 1) + "): '" + line + "'");
2637 for (var j = 1; j < inFields.length; j += 2) {
2638 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
2639 this.parseFloat_(inFields[j + 1], i, line)];
2641 } else if (this.attr_("customBars
")) {
2642 // Bars are a low;center;high tuple
2643 for (var j = 1; j < inFields.length; j++) {
2644 var val = inFields[j];
2645 if (/^ *$/.test(val)) {
2646 fields[j] = [null, null, null];
2648 var vals = val.split(";");
2649 if (vals.length == 3) {
2650 fields[j] = [ this.parseFloat_(vals[0], i, line),
2651 this.parseFloat_(vals[1], i, line),
2652 this.parseFloat_(vals[2], i, line) ];
2654 this.warning('When using customBars, values must be either blank ' +
2655 'or "low
;center
;high
" tuples (got "' + val +
2656 '" on line ' + (1+i));
2661 // Values are just numbers
2662 for (var j = 1; j < inFields.length; j++) {
2663 fields[j] = this.parseFloat_(inFields[j], i, line);
2666 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2670 if (fields.length != expectedCols) {
2671 this.error("Number of columns
in line
" + i + " (" + fields.length +
2672 ") does not agree
with number of
labels (" + expectedCols +
2676 // If the user specified the 'labels' option and none of the cells of the
2677 // first row parsed correctly, then they probably double-specified the
2678 // labels. We go with the values set in the option, discard this row and
2679 // log a warning to the JS console.
2680 if (i == 0 && this.attr_('labels')) {
2681 var all_null = true;
2682 for (var j = 0; all_null && j < fields.length; j++) {
2683 if (fields[j]) all_null = false;
2686 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
2687 "CSV
data ('" + line + "') appears to also contain labels
. " +
2688 "Will drop the CSV labels and
use the option labels
.");
2696 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2697 ret.sort(function(a,b) { return a[0] - b[0] });
2705 * The user has provided their data as a pre-packaged JS array. If the x values
2706 * are numeric, this is the same as dygraphs' internal format. If the x values
2707 * are dates, we need to convert them from Date objects to ms since epoch.
2708 * @param {[Object]} data
2709 * @return {[Object]} data with numeric x values.
2711 Dygraph.prototype.parseArray_ = function(data) {
2712 // Peek at the first x value to see if it's numeric.
2713 if (data.length == 0) {
2714 this.error("Can
't plot empty data set");
2717 if (data[0].length == 0) {
2718 this.error("Data set cannot contain an empty row");
2722 if (this.attr_("labels") == null) {
2723 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2724 "in the options parameter");
2725 this.attrs_.labels = [ "X" ];
2726 for (var i = 1; i < data[0].length; i++) {
2727 this.attrs_.labels.push("Y" + i);
2731 if (Dygraph.isDateLike(data[0][0])) {
2732 // Some intelligent defaults for a date x-axis.
2733 this.attrs_.xValueFormatter = Dygraph.dateString_;
2734 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
2735 this.attrs_.xTicker = Dygraph.dateTicker;
2737 // Assume they're all dates
.
2738 var parsedData
= Dygraph
.clone(data
);
2739 for (var i
= 0; i
< data
.length
; i
++) {
2740 if (parsedData
[i
].length
== 0) {
2741 this.error("Row " + (1 + i
) + " of data is empty");
2744 if (parsedData
[i
][0] == null
2745 || typeof(parsedData
[i
][0].getTime
) != 'function'
2746 || isNaN(parsedData
[i
][0].getTime())) {
2747 this.error("x value in row " + (1 + i
) + " is not a Date");
2750 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2754 // Some intelligent defaults for a numeric x-axis.
2755 /** @private (shut up, jsdoc!) */
2756 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2757 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2763 * Parses a DataTable object from gviz.
2764 * The data is expected to have a first column that is either a date or a
2765 * number. All subsequent columns must be numbers. If there is a clear mismatch
2766 * between this.xValueParser_ and the type of the first column, it will be
2767 * fixed. Fills out rawData_.
2768 * @param {[Object]} data See above.
2771 Dygraph
.prototype.parseDataTable_
= function(data
) {
2772 var cols
= data
.getNumberOfColumns();
2773 var rows
= data
.getNumberOfRows();
2775 var indepType
= data
.getColumnType(0);
2776 if (indepType
== 'date' || indepType
== 'datetime') {
2777 this.attrs_
.xValueFormatter
= Dygraph
.dateString_
;
2778 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2779 this.attrs_
.xTicker
= Dygraph
.dateTicker
;
2780 this.attrs_
.xAxisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2781 } else if (indepType
== 'number') {
2782 this.attrs_
.xValueFormatter
= function(x
) { return x
; };
2783 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2784 this.attrs_
.xTicker
= Dygraph
.numericTicks
;
2785 this.attrs_
.xAxisLabelFormatter
= this.attrs_
.xValueFormatter
;
2787 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2788 "column 1 of DataTable input (Got '" + indepType
+ "')");
2792 // Array of the column indices which contain data (and not annotations).
2794 var annotationCols
= {}; // data index -> [annotation cols]
2795 var hasAnnotations
= false;
2796 for (var i
= 1; i
< cols
; i
++) {
2797 var type
= data
.getColumnType(i
);
2798 if (type
== 'number') {
2800 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2801 // This is OK -- it's an annotation column.
2802 var dataIdx
= colIdx
[colIdx
.length
- 1];
2803 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2804 annotationCols
[dataIdx
] = [i
];
2806 annotationCols
[dataIdx
].push(i
);
2808 hasAnnotations
= true;
2810 this.error("Only 'number' is supported as a dependent type with Gviz." +
2811 " 'string' is only supported if displayAnnotations is true");
2815 // Read column labels
2816 // TODO(danvk): add support back for errorBars
2817 var labels
= [data
.getColumnLabel(0)];
2818 for (var i
= 0; i
< colIdx
.length
; i
++) {
2819 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2820 if (this.attr_("errorBars")) i
+= 1;
2822 this.attrs_
.labels
= labels
;
2823 cols
= labels
.length
;
2826 var outOfOrder
= false;
2827 var annotations
= [];
2828 for (var i
= 0; i
< rows
; i
++) {
2830 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2831 data
.getValue(i
, 0) === null) {
2832 this.warn("Ignoring row " + i
+
2833 " of DataTable because of undefined or null first column.");
2837 if (indepType
== 'date' || indepType
== 'datetime') {
2838 row
.push(data
.getValue(i
, 0).getTime());
2840 row
.push(data
.getValue(i
, 0));
2842 if (!this.attr_("errorBars")) {
2843 for (var j
= 0; j
< colIdx
.length
; j
++) {
2844 var col
= colIdx
[j
];
2845 row
.push(data
.getValue(i
, col
));
2846 if (hasAnnotations
&&
2847 annotationCols
.hasOwnProperty(col
) &&
2848 data
.getValue(i
, annotationCols
[col
][0]) != null) {
2850 ann
.series
= data
.getColumnLabel(col
);
2852 ann
.shortText
= String
.fromCharCode(65 /* A */ + annotations
.length
)
2854 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2855 if (k
) ann
.text
+= "\n";
2856 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2858 annotations
.push(ann
);
2862 // Strip out infinities, which give dygraphs problems later on.
2863 for (var j
= 0; j
< row
.length
; j
++) {
2864 if (!isFinite(row
[j
])) row
[j
] = null;
2867 for (var j
= 0; j
< cols
- 1; j
++) {
2868 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2871 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2878 this.warn("DataTable is out of order; order it correctly to speed loading.");
2879 ret
.sort(function(a
,b
) { return a
[0] - b
[0] });
2881 this.rawData_
= ret
;
2883 if (annotations
.length
> 0) {
2884 this.setAnnotations(annotations
, true);
2889 * Get the CSV data. If it's in a function, call that function. If it's in a
2890 * file, do an XMLHttpRequest to get it.
2893 Dygraph
.prototype.start_
= function() {
2894 if (typeof this.file_
== 'function') {
2895 // CSV string. Pretend we got it via XHR.
2896 this.loadedEvent_(this.file_());
2897 } else if (Dygraph
.isArrayLike(this.file_
)) {
2898 this.rawData_
= this.parseArray_(this.file_
);
2900 } else if (typeof this.file_
== 'object' &&
2901 typeof this.file_
.getColumnRange
== 'function') {
2902 // must be a DataTable from gviz.
2903 this.parseDataTable_(this.file_
);
2905 } else if (typeof this.file_
== 'string') {
2906 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2907 if (this.file_
.indexOf('\n') >= 0) {
2908 this.loadedEvent_(this.file_
);
2910 var req
= new XMLHttpRequest();
2912 req
.onreadystatechange
= function () {
2913 if (req
.readyState
== 4) {
2914 if (req
.status
== 200 || // Normal http
2915 req
.status
== 0) { // Chrome w/ --allow
-file
-access
-from
-files
2916 caller
.loadedEvent_(req
.responseText
);
2921 req
.open("GET", this.file_
, true);
2925 this.error("Unknown data format: " + (typeof this.file_
));
2930 * Changes various properties of the graph. These can include:
2932 * <li>file: changes the source data for the graph</li>
2933 * <li>errorBars: changes whether the data contains stddev</li>
2936 * There's a huge variety of options that can be passed to this method. For a
2937 * full list, see http://dygraphs.com/options.html.
2939 * @param {Object} attrs The new properties and values
2940 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
2941 * call to updateOptions(). If you know better, you can pass true to explicitly
2942 * block the redraw. This can be useful for chaining updateOptions() calls,
2943 * avoiding the occasional infinite loop and preventing redraws when it's not
2944 * necessary (e.g. when updating a callback).
2946 Dygraph
.prototype.updateOptions
= function(attrs
, block_redraw
) {
2947 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
2949 // TODO(danvk): this is a mess. Move these options into attr_.
2950 if ('rollPeriod' in attrs
) {
2951 this.rollPeriod_
= attrs
.rollPeriod
;
2953 if ('dateWindow' in attrs
) {
2954 this.dateWindow_
= attrs
.dateWindow
;
2955 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
2956 this.zoomed_x_
= attrs
.dateWindow
!= null;
2959 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
2960 this.zoomed_y_
= attrs
.valueRange
!= null;
2963 // TODO(danvk): validate per-series options.
2968 // highlightCircleSize
2970 // Check if this set options will require new points.
2971 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
2973 Dygraph
.update(this.user_attrs_
, attrs
);
2975 if (attrs
['file']) {
2976 this.file_
= attrs
['file'];
2977 if (!block_redraw
) this.start_();
2979 if (!block_redraw
) {
2980 if (requiresNewPoints
) {
2983 this.renderGraph_(false, false);
2990 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2991 * containing div (which has presumably changed size since the dygraph was
2992 * instantiated. If the width/height are specified, the div will be resized.
2994 * This is far more efficient than destroying and re-instantiating a
2995 * Dygraph, since it doesn't have to reparse the underlying data.
2997 * @param {Number} [width] Width (in pixels)
2998 * @param {Number} [height] Height (in pixels)
3000 Dygraph
.prototype.resize
= function(width
, height
) {
3001 if (this.resize_lock
) {
3004 this.resize_lock
= true;
3006 if ((width
=== null) != (height
=== null)) {
3007 this.warn("Dygraph.resize() should be called with zero parameters or " +
3008 "two non-NULL parameters. Pretending it was zero.");
3009 width
= height
= null;
3012 var old_width
= this.width_
;
3013 var old_height
= this.height_
;
3016 this.maindiv_
.style
.width
= width
+ "px";
3017 this.maindiv_
.style
.height
= height
+ "px";
3018 this.width_
= width
;
3019 this.height_
= height
;
3021 this.width_
= this.maindiv_
.offsetWidth
;
3022 this.height_
= this.maindiv_
.offsetHeight
;
3025 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3026 // TODO(danvk): there should be a clear() method.
3027 this.maindiv_
.innerHTML
= "";
3028 this.roller_
= null;
3029 this.attrs_
.labelsDiv
= null;
3030 this.createInterface_();
3034 this.resize_lock
= false;
3038 * Adjusts the number of points in the rolling average. Updates the graph to
3039 * reflect the new averaging period.
3040 * @param {Number} length Number of points over which to average the data.
3042 Dygraph
.prototype.adjustRoll
= function(length
) {
3043 this.rollPeriod_
= length
;
3048 * Returns a boolean array of visibility statuses.
3050 Dygraph
.prototype.visibility
= function() {
3051 // Do lazy-initialization, so that this happens after we know the number of
3053 if (!this.attr_("visibility")) {
3054 this.attrs_
["visibility"] = [];
3056 while (this.attr_("visibility").length
< this.rawData_
[0].length
- 1) {
3057 this.attr_("visibility").push(true);
3059 return this.attr_("visibility");
3063 * Changes the visiblity of a series.
3065 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3066 var x
= this.visibility();
3067 if (num
< 0 || num
>= x
.length
) {
3068 this.warn("invalid series number in setVisibility: " + num
);
3076 * How large of an area will the dygraph render itself in?
3077 * This is used for testing.
3078 * @return A {width: w, height: h} object.
3081 Dygraph
.prototype.size
= function() {
3082 return { width
: this.width_
, height
: this.height_
};
3086 * Update the list of annotations and redraw the chart.
3088 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3089 // Only add the annotation CSS rule once we know it will be used.
3090 Dygraph
.addAnnotationRule();
3091 this.annotations_
= ann
;
3092 this.layout_
.setAnnotations(this.annotations_
);
3093 if (!suppressDraw
) {
3099 * Return the list of annotations.
3101 Dygraph
.prototype.annotations
= function() {
3102 return this.annotations_
;
3106 * Get the index of a series (column) given its name. The first column is the
3107 * x-axis, so the data series start with index 1.
3109 Dygraph
.prototype.indexFromSetName
= function(name
) {
3110 var labels
= this.attr_("labels");
3111 for (var i
= 0; i
< labels
.length
; i
++) {
3112 if (labels
[i
] == name
) return i
;
3119 * Adds a default style for the annotation CSS classes to the document. This is
3120 * only executed when annotations are actually used. It is designed to only be
3121 * called once -- all calls after the first will return immediately.
3123 Dygraph
.addAnnotationRule
= function() {
3124 if (Dygraph
.addedAnnotationCSS
) return;
3126 var rule
= "border: 1px solid black; " +
3127 "background-color: white; " +
3128 "text-align: center;";
3130 var styleSheetElement
= document
.createElement("style");
3131 styleSheetElement
.type
= "text/css";
3132 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3134 // Find the first style sheet that we can access.
3135 // We may not add a rule to a style sheet from another domain for security
3136 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3137 // adds its own style sheets from google.com.
3138 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3139 if (document
.styleSheets
[i
].disabled
) continue;
3140 var mysheet
= document
.styleSheets
[i
];
3142 if (mysheet
.insertRule
) { // Firefox
3143 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3144 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3145 } else if (mysheet
.addRule
) { // IE
3146 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3148 Dygraph
.addedAnnotationCSS
= true;
3151 // Was likely a security exception.
3155 this.warn("Unable to add default annotation CSS rule; display may be off.");
3158 // Older pages may still use this name.
3159 DateGraph
= Dygraph
;