3 * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview Creates an interactive, zoomable graph based on a CSV file or
9 * string. Dygraph can handle multiple series with or without error bars. The
10 * date/value ranges will be automatically set. Dygraph uses the
11 * <canvas> tag, so it only works in FF1.5+.
12 * @author danvdk@gmail.com (Dan Vanderkam)
15 <div id="graphdiv" style="width:800px; height:500px;"></div>
16 <script type="text/javascript">
17 new Dygraph(document.getElementById("graphdiv"),
18 "datafile.csv", // CSV file with headers
22 The CSV file is of the form
24 Date,SeriesA,SeriesB,SeriesC
28 If the 'errorBars' option is set in the constructor, the input should be of
30 Date,SeriesA,SeriesB,...
31 YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
32 YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
34 If the 'fractions' option is set, the input should be of the form:
36 Date,SeriesA,SeriesB,...
37 YYYYMMDD,A1/B1,A2/B2,...
38 YYYYMMDD,A1/B1,A2/B2,...
40 And error bars will be calculated automatically using a binomial distribution.
42 For further documentation and examples, see http://dygraphs.com/
46 /*jshint globalstrict: true */
47 /*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */
51 * Creates an interactive, zoomable chart.
54 * @param {div | String} div A div or the id of a div into which to construct
56 * @param {String | Function} file A file containing CSV data or a function
57 * that returns this data. The most basic expected format for each line is
58 * "YYYY/MM/DD,val1,val2,...". For more information, see
59 * http://dygraphs.com/data.html.
60 * @param {Object} attrs Various other attributes, e.g. errorBars determines
61 * whether the input data contains error ranges. For a complete list of
62 * options, see http://dygraphs.com/options.html.
64 var Dygraph
= function(div
, data
, opts
) {
65 if (arguments
.length
> 0) {
66 if (arguments
.length
== 4) {
67 // Old versions of dygraphs took in the series labels as a constructor
68 // parameter. This doesn't make sense anymore, but it's easy to continue
69 // to support this usage.
70 this.warn("Using deprecated four-argument dygraph constructor");
71 this.__old_init__(div
, data
, arguments
[2], arguments
[3]);
73 this.__init__(div
, data
, opts
);
78 Dygraph
.NAME
= "Dygraph";
79 Dygraph
.VERSION
= "1.2";
80 Dygraph
.__repr__
= function() {
81 return "[" + this.NAME
+ " " + this.VERSION
+ "]";
85 * Returns information about the Dygraph class.
87 Dygraph
.toString
= function() {
88 return this.__repr__();
91 // Various default values
92 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
93 Dygraph
.DEFAULT_WIDTH
= 480;
94 Dygraph
.DEFAULT_HEIGHT
= 320;
96 Dygraph
.ANIMATION_STEPS
= 10;
97 Dygraph
.ANIMATION_DURATION
= 200;
99 // These are defined before DEFAULT_ATTRS so that it can refer to them.
102 * Return a string version of a number. This respects the digitsAfterDecimal
103 * and maxNumberWidth options.
104 * @param {Number} x The number to be formatted
105 * @param {Dygraph} opts An options view
106 * @param {String} name The name of the point's data series
107 * @param {Dygraph} g The dygraph object
109 Dygraph
.numberValueFormatter
= function(x
, opts
, pt
, g
) {
110 var sigFigs
= opts('sigFigs');
112 if (sigFigs
!== null) {
113 // User has opted for a fixed number of significant figures.
114 return Dygraph
.floatFormat(x
, sigFigs
);
117 var digits
= opts('digitsAfterDecimal');
118 var maxNumberWidth
= opts('maxNumberWidth');
120 // switch to scientific notation if we underflow or overflow fixed display.
122 (Math
.abs(x
) >= Math
.pow(10, maxNumberWidth
) ||
123 Math
.abs(x
) < Math
.pow(10, -digits
))) {
124 return x
.toExponential(digits
);
126 return '' + Dygraph
.round_(x
, digits
);
131 * variant for use as an axisLabelFormatter.
134 Dygraph
.numberAxisLabelFormatter
= function(x
, granularity
, opts
, g
) {
135 return Dygraph
.numberValueFormatter(x
, opts
, g
);
139 * Convert a JS date (millis since epoch) to YYYY/MM/DD
140 * @param {Number} date The JavaScript date (ms since epoch)
141 * @return {String} A date of the form "YYYY/MM/DD"
144 Dygraph
.dateString_
= function(date
) {
145 var zeropad
= Dygraph
.zeropad
;
146 var d
= new Date(date
);
149 var year
= "" + d
.getFullYear();
150 // Get a 0 padded month string
151 var month
= zeropad(d
.getMonth() + 1); //months are 0-offset, sigh
152 // Get a 0 padded day string
153 var day
= zeropad(d
.getDate());
156 var frac
= d
.getHours() * 3600 + d
.getMinutes() * 60 + d
.getSeconds();
157 if (frac
) ret
= " " + Dygraph
.hmsString_(date
);
159 return year
+ "/" + month + "/" + day
+ ret
;
163 * Convert a JS date to a string appropriate to display on an axis that
164 * is displaying values at the stated granularity.
165 * @param {Date} date The date to format
166 * @param {Number} granularity One of the Dygraph granularity constants
167 * @return {String} The formatted date
170 Dygraph
.dateAxisFormatter
= function(date
, granularity
) {
171 if (granularity
>= Dygraph
.DECADAL
) {
172 return date
.strftime('%Y');
173 } else if (granularity
>= Dygraph
.MONTHLY
) {
174 return date
.strftime('%b %y');
176 var frac
= date
.getHours() * 3600 + date
.getMinutes() * 60 + date
.getSeconds() + date
.getMilliseconds();
177 if (frac
=== 0 || granularity
>= Dygraph
.DAILY
) {
178 return new Date(date
.getTime() + 3600*1000).strftime('%d%b');
180 return Dygraph
.hmsString_(date
.getTime());
186 // Default attribute values.
187 Dygraph
.DEFAULT_ATTRS
= {
188 highlightCircleSize
: 3,
192 // TODO(danvk): move defaults from createStatusMessage_ here.
194 labelsSeparateLines
: false,
195 labelsShowZeroValues
: true,
198 showLabelsOnHighlight
: true,
200 digitsAfterDecimal
: 2,
207 axisLabelFontSize
: 14,
213 xValueParser
: Dygraph
.dateParser
,
220 wilsonInterval
: true, // only relevant if fractions is true
224 connectSeparatedPoints
: false,
227 hideOverlayOnMouseOut
: true,
229 // TODO(danvk): support 'onmouseover' and 'never', and remove synonyms.
230 legend
: 'onmouseover', // the only relevant value at the moment is 'always'.
235 // Sizes of the various chart labels.
242 axisLineColor
: "black",
245 axisLabelColor
: "black",
246 axisLabelFont
: "Arial", // TODO(danvk): is this implemented?
250 gridLineColor
: "rgb(128,128,128)",
252 interactionModel
: null, // will be set to Dygraph.Interaction.defaultModel
253 animatedZooms
: false, // (for now)
255 // Range selector options
256 showRangeSelector
: false,
257 rangeSelectorHeight
: 40,
258 rangeSelectorPlotStrokeColor
: "#808FAB",
259 rangeSelectorPlotFillColor
: "#A7B1C4",
265 axisLabelFormatter
: Dygraph
.dateAxisFormatter
,
266 valueFormatter
: Dygraph
.dateString_
,
267 ticker
: null // will be set in dygraph-tickers.js
271 valueFormatter
: Dygraph
.numberValueFormatter
,
272 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
273 ticker
: null // will be set in dygraph-tickers.js
277 valueFormatter
: Dygraph
.numberValueFormatter
,
278 axisLabelFormatter
: Dygraph
.numberAxisLabelFormatter
,
279 ticker
: null // will be set in dygraph-tickers.js
284 // Directions for panning and zooming. Use bit operations when combined
285 // values are possible.
286 Dygraph
.HORIZONTAL
= 1;
287 Dygraph
.VERTICAL
= 2;
289 // Used for initializing annotation CSS rules only once.
290 Dygraph
.addedAnnotationCSS
= false;
292 Dygraph
.prototype.__old_init__
= function(div
, file
, labels
, attrs
) {
293 // Labels is no longer a constructor parameter, since it's typically set
294 // directly from the data source. It also conains a name for the x-axis,
295 // which the previous constructor form did not.
296 if (labels
!== null) {
297 var new_labels
= ["Date"];
298 for (var i
= 0; i
< labels
.length
; i
++) new_labels
.push(labels
[i
]);
299 Dygraph
.update(attrs
, { 'labels': new_labels
});
301 this.__init__(div
, file
, attrs
);
305 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
306 * and context <canvas> inside of it. See the constructor for details.
308 * @param {Element} div the Element to render the graph into.
309 * @param {String | Function} file Source data
310 * @param {Object} attrs Miscellaneous other options
313 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
314 // Hack for IE: if we're using excanvas and the document hasn't finished
315 // loading yet (and hence may not have initialized whatever it needs to
316 // initialize), then keep calling this routine periodically until it has.
317 if (/MSIE/.test(navigator
.userAgent
) && !window
.opera
&&
318 typeof(G_vmlCanvasManager
) != 'undefined' &&
319 document
.readyState
!= 'complete') {
321 setTimeout(function() { self
.__init__(div
, file
, attrs
); }, 100);
325 // Support two-argument constructor
326 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
328 attrs
= Dygraph
.mapLegacyOptions_(attrs
);
331 Dygraph
.error("Constructing dygraph with a non-existent div!");
335 this.isUsingExcanvas_
= typeof(G_vmlCanvasManager
) != 'undefined';
337 // Copy the important bits into the object
338 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
341 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
342 this.previousVerticalX_
= -1;
343 this.fractions_
= attrs
.fractions
|| false;
344 this.dateWindow_
= attrs
.dateWindow
|| null;
346 this.is_initial_draw_
= true;
347 this.annotations_
= [];
349 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
350 this.zoomed_x_
= false;
351 this.zoomed_y_
= false;
353 // Clear the div. This ensure that, if multiple dygraphs are passed the same
354 // div, then only one will be drawn.
357 // For historical reasons, the 'width' and 'height' options trump all CSS
358 // rules _except_ for an explicit 'width' or 'height' on the div.
359 // As an added convenience, if the div has zero height (like <div></div> does
360 // without any styles), then we use a default height/width
.
361 if (div
.style
.width
=== '' && attrs
.width
) {
362 div
.style
.width
= attrs
.width
+ "px";
364 if (div
.style
.height
=== '' && attrs
.height
) {
365 div
.style
.height
= attrs
.height
+ "px";
367 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
368 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
369 if (div
.style
.width
=== '') {
370 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
373 // these will be zero if the dygraph's div is hidden.
374 this.width_
= div
.clientWidth
;
375 this.height_
= div
.clientHeight
;
377 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
378 if (attrs
.stackedGraph
) {
379 attrs
.fillGraph
= true;
380 // TODO(nikhilk): Add any other stackedGraph checks here.
383 // Dygraphs has many options, some of which interact with one another.
384 // To keep track of everything, we maintain two sets of options:
386 // this.user_attrs_ only options explicitly set by the user.
387 // this.attrs_ defaults, options derived from user_attrs_, data.
389 // Options are then accessed this.attr_('attr'), which first looks at
390 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
391 // defaults without overriding behavior that the user specifically asks for.
392 this.user_attrs_
= {};
393 Dygraph
.update(this.user_attrs_
, attrs
);
395 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
397 Dygraph
.updateDeep(this.attrs_
, Dygraph
.DEFAULT_ATTRS
);
399 this.boundaryIds_
= [];
401 // Create the containing DIV and other interactive elements
402 this.createInterface_();
408 * Returns the zoomed status of the chart for one or both axes.
410 * Axis is an optional parameter. Can be set to 'x' or 'y'.
412 * The zoomed status for an axis is set whenever a user zooms using the mouse
413 * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
414 * option is also specified).
416 Dygraph
.prototype.isZoomed
= function(axis
) {
417 if (axis
== null) return this.zoomed_x_
|| this.zoomed_y_
;
418 if (axis
=== 'x') return this.zoomed_x_
;
419 if (axis
=== 'y') return this.zoomed_y_
;
420 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
424 * Returns information about the Dygraph object, including its containing ID.
426 Dygraph
.prototype.toString
= function() {
427 var maindiv
= this.maindiv_
;
428 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
429 return "[Dygraph " + id
+ "]";
434 * Returns the value of an option. This may be set by the user (either in the
435 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
437 * @param { String } name The name of the option, e.g. 'rollPeriod'.
438 * @param { String } [seriesName] The name of the series to which the option
439 * will be applied. If no per-series value of this option is available, then
440 * the global value is returned. This is optional.
441 * @return { ... } The value of the option.
443 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
444 // <REMOVE_FOR_COMBINED>
445 if (typeof(Dygraph
.OPTIONS_REFERENCE
) === 'undefined') {
446 this.error('Must include options reference JS for testing');
447 } else if (!Dygraph
.OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
448 this.error('Dygraphs is using property ' + name
+ ', which has no entry ' +
449 'in the Dygraphs.OPTIONS_REFERENCE listing.');
450 // Only log this error once.
451 Dygraph
.OPTIONS_REFERENCE
[name
] = true;
453 // </REMOVE_FOR_COMBINED
>
455 typeof(this.user_attrs_
[seriesName
]) != 'undefined' &&
456 this.user_attrs_
[seriesName
] !== null &&
457 typeof(this.user_attrs_
[seriesName
][name
]) != 'undefined') {
458 return this.user_attrs_
[seriesName
][name
];
459 } else if (typeof(this.user_attrs_
[name
]) != 'undefined') {
460 return this.user_attrs_
[name
];
461 } else if (typeof(this.attrs_
[name
]) != 'undefined') {
462 return this.attrs_
[name
];
470 * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2')
471 * @return { ... } A function mapping string -> option value
473 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
475 return function(opt
) {
476 var axis_opts
= self
.user_attrs_
.axes
;
477 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
478 return axis_opts
[axis
][opt
];
480 // user-specified attributes always trump defaults, even if they're less
482 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
483 return self
.user_attrs_
[opt
];
486 axis_opts
= self
.attrs_
.axes
;
487 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
][opt
]) {
488 return axis_opts
[axis
][opt
];
490 // check old-style axis options
491 // TODO(danvk): add a deprecation warning if either of these match.
492 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
493 return self
.axes_
[0][opt
];
494 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
495 return self
.axes_
[1][opt
];
497 return self
.attr_(opt
);
502 * Returns the current rolling period, as set by the user or an option.
503 * @return {Number} The number of points in the rolling window
505 Dygraph
.prototype.rollPeriod
= function() {
506 return this.rollPeriod_
;
510 * Returns the currently-visible x-range. This can be affected by zooming,
511 * panning or a call to updateOptions.
512 * Returns a two-element array: [left, right].
513 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
515 Dygraph
.prototype.xAxisRange
= function() {
516 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
520 * Returns the lower- and upper-bound x-axis values of the
523 Dygraph
.prototype.xAxisExtremes
= function() {
524 var left
= this.rawData_
[0][0];
525 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
526 return [left
, right
];
530 * Returns the currently-visible y-range for an axis. This can be affected by
531 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
532 * called with no arguments, returns the range of the first axis.
533 * Returns a two-element array: [bottom, top].
535 Dygraph
.prototype.yAxisRange
= function(idx
) {
536 if (typeof(idx
) == "undefined") idx
= 0;
537 if (idx
< 0 || idx
>= this.axes_
.length
) {
540 var axis
= this.axes_
[idx
];
541 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
545 * Returns the currently-visible y-ranges for each axis. This can be affected by
546 * zooming, panning, calls to updateOptions, etc.
547 * Returns an array of [bottom, top] pairs, one for each y-axis.
549 Dygraph
.prototype.yAxisRanges
= function() {
551 for (var i
= 0; i
< this.axes_
.length
; i
++) {
552 ret
.push(this.yAxisRange(i
));
557 // TODO(danvk): use these functions throughout dygraphs.
559 * Convert from data coordinates to canvas/div X/Y coordinates.
560 * If specified, do this conversion for the coordinate system of a particular
561 * axis. Uses the first axis by default.
562 * Returns a two-element array: [X, Y]
564 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
565 * instead of toDomCoords(null, y, axis).
567 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
568 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
572 * Convert from data x coordinates to canvas/div X coordinate.
573 * If specified, do this conversion for the coordinate system of a particular
575 * Returns a single value or null if x is null.
577 Dygraph
.prototype.toDomXCoord
= function(x
) {
582 var area
= this.plotter_
.area
;
583 var xRange
= this.xAxisRange();
584 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
588 * Convert from data x coordinates to canvas/div Y coordinate and optional
589 * axis. Uses the first axis by default.
591 * returns a single value or null if y is null.
593 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
594 var pct
= this.toPercentYCoord(y
, axis
);
599 var area
= this.plotter_
.area
;
600 return area
.y
+ pct
* area
.h
;
604 * Convert from canvas/div coords to data coordinates.
605 * If specified, do this conversion for the coordinate system of a particular
606 * axis. Uses the first axis by default.
607 * Returns a two-element array: [X, Y].
609 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
610 * instead of toDataCoords(null, y, axis).
612 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
613 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
617 * Convert from canvas/div x coordinate to data coordinate.
619 * If x is null, this returns null.
621 Dygraph
.prototype.toDataXCoord
= function(x
) {
626 var area
= this.plotter_
.area
;
627 var xRange
= this.xAxisRange();
628 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
632 * Convert from canvas/div y coord to value.
634 * If y is null, this returns null.
635 * if axis is null, this uses the first axis.
637 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
642 var area
= this.plotter_
.area
;
643 var yRange
= this.yAxisRange(axis
);
645 if (typeof(axis
) == "undefined") axis
= 0;
646 if (!this.axes_
[axis
].logscale
) {
647 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
649 // Computing the inverse of toDomCoord.
650 var pct
= (y
- area
.y
) / area
.h
;
652 // Computing the inverse of toPercentYCoord. The function was arrived at with
653 // the following steps:
655 // Original calcuation:
656 // pct = (logr1 - Dygraph.log10(y)) / (logr1
- Dygraph
.log10(yRange
[0]));
658 // Move denominator to both sides:
659 // pct * (logr1 - Dygraph.log10(yRange[0])) = logr1 - Dygraph.log10(y);
661 // subtract logr1, and take the negative value.
662 // logr1 - (pct * (logr1 - Dygraph.log10(yRange[0]))) = Dygraph.log10(y);
664 // Swap both sides of the equation, and we can compute the log of the
665 // return value. Which means we just need to use that as the exponent in
667 // Dygraph.log10(y) = logr1 - (pct * (logr1 - Dygraph.log10(yRange[0])));
669 var logr1
= Dygraph
.log10(yRange
[1]);
670 var exponent
= logr1
- (pct
* (logr1
- Dygraph
.log10(yRange
[0])));
671 var value
= Math
.pow(Dygraph
.LOG_SCALE
, exponent
);
677 * Converts a y for an axis to a percentage from the top to the
678 * bottom of the drawing area.
680 * If the coordinate represents a value visible on the canvas, then
681 * the value will be between 0 and 1, where 0 is the top of the canvas.
682 * However, this method will return values outside the range, as
683 * values can fall outside the canvas.
685 * If y is null, this returns null.
686 * if axis is null, this uses the first axis.
688 * @param { Number } y The data y-coordinate.
689 * @param { Number } [axis] The axis number on which the data coordinate lives.
690 * @return { Number } A fraction in [0, 1] where 0 = the top edge.
692 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
696 if (typeof(axis
) == "undefined") axis
= 0;
698 var yRange
= this.yAxisRange(axis
);
701 if (!this.axes_
[axis
].logscale
) {
702 // yRange[1] - y is unit distance from the bottom.
703 // yRange[1] - yRange[0] is the scale of the range.
704 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
705 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
707 var logr1
= Dygraph
.log10(yRange
[1]);
708 pct
= (logr1
- Dygraph
.log10(y
)) / (logr1
- Dygraph
.log10(yRange
[0]));
714 * Converts an x value to a percentage from the left to the right of
717 * If the coordinate represents a value visible on the canvas, then
718 * the value will be between 0 and 1, where 0 is the left of the canvas.
719 * However, this method will return values outside the range, as
720 * values can fall outside the canvas.
722 * If x is null, this returns null.
723 * @param { Number } x The data x-coordinate.
724 * @return { Number } A fraction in [0, 1] where 0 = the left edge.
726 Dygraph
.prototype.toPercentXCoord
= function(x
) {
731 var xRange
= this.xAxisRange();
732 return (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
736 * Returns the number of columns (including the independent variable).
737 * @return { Integer } The number of columns.
739 Dygraph
.prototype.numColumns
= function() {
740 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
744 * Returns the number of rows (excluding any header/label row).
745 * @return { Integer } The number of rows, less any header.
747 Dygraph
.prototype.numRows
= function() {
748 return this.rawData_
.length
;
752 * Returns the full range of the x-axis, as determined by the most extreme
753 * values in the data set. Not affected by zooming, visibility, etc.
754 * TODO(danvk): merge w/ xAxisExtremes
755 * @return { Array<Number> } A [low, high] pair
758 Dygraph
.prototype.fullXRange_
= function() {
759 if (this.numRows() > 0) {
760 return [this.rawData_
[0][0], this.rawData_
[this.numRows() - 1][0]];
767 * Returns the value in the given row and column. If the row and column exceed
768 * the bounds on the data, returns null. Also returns null if the value is
770 * @param { Number} row The row number of the data (0-based). Row 0 is the
771 * first row of data, not a header row.
772 * @param { Number} col The column number of the data (0-based)
773 * @return { Number } The value in the specified cell or null if the row/col
776 Dygraph
.prototype.getValue
= function(row
, col
) {
777 if (row
< 0 || row
> this.rawData_
.length
) return null;
778 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
780 return this.rawData_
[row
][col
];
784 * Generates interface elements for the Dygraph: a containing div, a div to
785 * display the current point, and a textbox to adjust the rolling average
786 * period. Also creates the Renderer/Layout elements.
789 Dygraph
.prototype.createInterface_
= function() {
790 // Create the all-enclosing graph div
791 var enclosing
= this.maindiv_
;
793 this.graphDiv
= document
.createElement("div");
794 this.graphDiv
.style
.width
= this.width_
+ "px";
795 this.graphDiv
.style
.height
= this.height_
+ "px";
796 enclosing
.appendChild(this.graphDiv
);
798 // Create the canvas for interactive parts of the chart.
799 this.canvas_
= Dygraph
.createCanvas();
800 this.canvas_
.style
.position
= "absolute";
801 this.canvas_
.width
= this.width_
;
802 this.canvas_
.height
= this.height_
;
803 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
804 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
806 this.canvas_ctx_
= Dygraph
.getContext(this.canvas_
);
808 // ... and for static parts of the chart.
809 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
810 this.hidden_ctx_
= Dygraph
.getContext(this.hidden_
);
812 if (this.attr_('showRangeSelector')) {
813 // The range selector must be created here so that its canvases and contexts get created here.
814 // For some reason, if the canvases and contexts don't get created here, things don't work in IE.
815 // The range selector also sets xAxisHeight in order to reserve space.
816 this.rangeSelector_
= new DygraphRangeSelector(this);
819 // The interactive parts of the graph are drawn on top of the chart.
820 this.graphDiv
.appendChild(this.hidden_
);
821 this.graphDiv
.appendChild(this.canvas_
);
822 this.mouseEventElement_
= this.createMouseEventElement_();
824 // Create the grapher
825 this.layout_
= new DygraphLayout(this);
827 if (this.rangeSelector_
) {
828 // This needs to happen after the graph canvases are added to the div and the layout object is created.
829 this.rangeSelector_
.addToGraph(this.graphDiv
, this.layout_
);
833 Dygraph
.addEvent(this.mouseEventElement_
, 'mousemove', function(e
) {
834 dygraph
.mouseMove_(e
);
836 Dygraph
.addEvent(this.mouseEventElement_
, 'mouseout', function(e
) {
837 dygraph
.mouseOut_(e
);
840 this.createStatusMessage_();
841 this.createDragInterface_();
843 // Update when the window is resized.
844 // TODO(danvk): drop frames depending on complexity of the chart.
845 Dygraph
.addEvent(window
, 'resize', function(e
) {
851 * Detach DOM elements in the dygraph and null out all data references.
852 * Calling this when you're done with a dygraph can dramatically reduce memory
853 * usage. See, e.g., the tests/perf.html example.
855 Dygraph
.prototype.destroy
= function() {
856 var removeRecursive
= function(node
) {
857 while (node
.hasChildNodes()) {
858 removeRecursive(node
.firstChild
);
859 node
.removeChild(node
.firstChild
);
862 removeRecursive(this.maindiv_
);
864 var nullOut
= function(obj
) {
866 if (typeof(obj
[n
]) === 'object') {
872 // These may not all be necessary, but it can't hurt...
873 nullOut(this.layout_
);
874 nullOut(this.plotter_
);
879 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
880 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
881 * or the zoom rectangles) is done on this.canvas_.
882 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
883 * @return {Object} The newly-created canvas
886 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
887 var h
= Dygraph
.createCanvas();
888 h
.style
.position
= "absolute";
889 // TODO(danvk): h should be offset from canvas. canvas needs to include
890 // some extra area to make it easier to zoom in on the far left and far
891 // right. h needs to be precisely the plot area, so that clipping occurs.
892 h
.style
.top
= canvas
.style
.top
;
893 h
.style
.left
= canvas
.style
.left
;
894 h
.width
= this.width_
;
895 h
.height
= this.height_
;
896 h
.style
.width
= this.width_
+ "px"; // for IE
897 h
.style
.height
= this.height_
+ "px"; // for IE
902 * Creates an overlay element used to handle mouse events.
903 * @return {Object} The mouse event element.
906 Dygraph
.prototype.createMouseEventElement_
= function() {
907 if (this.isUsingExcanvas_
) {
908 var elem
= document
.createElement("div");
909 elem
.style
.position
= 'absolute';
910 elem
.style
.backgroundColor
= 'white';
911 elem
.style
.filter
= 'alpha(opacity=0)';
912 elem
.style
.width
= this.width_
+ "px";
913 elem
.style
.height
= this.height_
+ "px";
914 this.graphDiv
.appendChild(elem
);
922 * Generate a set of distinct colors for the data series. This is done with a
923 * color wheel. Saturation/Value are customizable, and the hue is
924 * equally-spaced around the color wheel. If a custom set of colors is
925 * specified, that is used instead.
928 Dygraph
.prototype.setColors_
= function() {
929 var num
= this.attr_("labels").length
- 1;
931 var colors
= this.attr_('colors');
934 var sat
= this.attr_('colorSaturation') || 1.0;
935 var val
= this.attr_('colorValue') || 0.5;
936 var half
= Math
.ceil(num
/ 2);
937 for (i
= 1; i
<= num
; i
++) {
938 if (!this.visibility()[i
-1]) continue;
939 // alternate colors for high contrast.
940 var idx
= i
% 2 ? Math
.ceil(i
/ 2) : (half + i / 2);
941 var hue
= (1.0 * idx
/ (1 + num
));
942 this.colors_
.push(Dygraph
.hsvToRGB(hue
, sat
, val
));
945 for (i
= 0; i
< num
; i
++) {
946 if (!this.visibility()[i
]) continue;
947 var colorStr
= colors
[i
% colors
.length
];
948 this.colors_
.push(colorStr
);
952 this.plotter_
.setColors(this.colors_
);
956 * Return the list of colors. This is either the list of colors passed in the
957 * attributes or the autogenerated list of rgb(r,g,b) strings.
958 * @return {Array<string>} The list of colors.
960 Dygraph
.prototype.getColors
= function() {
965 * Create the div that contains information on the selected point(s)
966 * This goes in the top right of the canvas, unless an external div has already
970 Dygraph
.prototype.createStatusMessage_
= function() {
971 var userLabelsDiv
= this.user_attrs_
.labelsDiv
;
972 if (userLabelsDiv
&& null !== userLabelsDiv
&&
973 (typeof(userLabelsDiv
) == "string" || userLabelsDiv
instanceof String
)) {
974 this.user_attrs_
.labelsDiv
= document
.getElementById(userLabelsDiv
);
976 if (!this.attr_("labelsDiv")) {
977 var divWidth
= this.attr_('labelsDivWidth');
979 "position": "absolute",
982 "width": divWidth
+ "px",
984 "left": (this.width_
- divWidth
- 2) + "px",
985 "background": "white",
987 "overflow": "hidden"};
988 Dygraph
.update(messagestyle
, this.attr_('labelsDivStyles'));
989 var div
= document
.createElement("div");
990 div
.className
= "dygraph-legend";
991 for (var name
in messagestyle
) {
992 if (messagestyle
.hasOwnProperty(name
)) {
993 div
.style
[name
] = messagestyle
[name
];
996 this.graphDiv
.appendChild(div
);
997 this.attrs_
.labelsDiv
= div
;
1002 * Position the labels div so that:
1003 * - its right edge is flush with the right edge of the charting area
1004 * - its top edge is flush with the top edge of the charting area
1007 Dygraph
.prototype.positionLabelsDiv_
= function() {
1008 // Don't touch a user-specified labelsDiv.
1009 if (this.user_attrs_
.hasOwnProperty("labelsDiv")) return;
1011 var area
= this.plotter_
.area
;
1012 var div
= this.attr_("labelsDiv");
1013 div
.style
.left
= area
.x
+ area
.w
- this.attr_("labelsDivWidth") - 1 + "px";
1014 div
.style
.top
= area
.y
+ "px";
1018 * Create the text box to adjust the averaging period
1021 Dygraph
.prototype.createRollInterface_
= function() {
1022 // Create a roller if one doesn't exist already.
1023 if (!this.roller_
) {
1024 this.roller_
= document
.createElement("input");
1025 this.roller_
.type
= "text";
1026 this.roller_
.style
.display
= "none";
1027 this.graphDiv
.appendChild(this.roller_
);
1030 var display
= this.attr_('showRoller') ? 'block' : 'none';
1032 var area
= this.plotter_
.area
;
1033 var textAttr
= { "position": "absolute",
1035 "top": (area
.y
+ area
.h
- 25) + "px",
1036 "left": (area
.x
+ 1) + "px",
1039 this.roller_
.size
= "2";
1040 this.roller_
.value
= this.rollPeriod_
;
1041 for (var name
in textAttr
) {
1042 if (textAttr
.hasOwnProperty(name
)) {
1043 this.roller_
.style
[name
] = textAttr
[name
];
1048 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1053 * Converts page the x-coordinate of the event to pixel x-coordinates on the
1054 * canvas (i.e. DOM Coords).
1056 Dygraph
.prototype.dragGetX_
= function(e
, context
) {
1057 return Dygraph
.pageX(e
) - context
.px
;
1062 * Converts page the y-coordinate of the event to pixel y-coordinates on the
1063 * canvas (i.e. DOM Coords).
1065 Dygraph
.prototype.dragGetY_
= function(e
, context
) {
1066 return Dygraph
.pageY(e
) - context
.py
;
1070 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1074 Dygraph
.prototype.createDragInterface_
= function() {
1076 // Tracks whether the mouse is down right now
1078 isPanning
: false, // is this drag part of a pan?
1079 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1080 dragStartX
: null, // pixel coordinates
1081 dragStartY
: null, // pixel coordinates
1082 dragEndX
: null, // pixel coordinates
1083 dragEndY
: null, // pixel coordinates
1084 dragDirection
: null,
1085 prevEndX
: null, // pixel coordinates
1086 prevEndY
: null, // pixel coordinates
1087 prevDragDirection
: null,
1089 // The value on the left side of the graph when a pan operation starts.
1090 initialLeftmostDate
: null,
1092 // The number of units each pixel spans. (This won't be valid for log
1094 xUnitsPerPixel
: null,
1096 // TODO(danvk): update this comment
1097 // The range in second/value units that the viewport encompasses during a
1098 // panning operation.
1101 // Top-left corner of the canvas, in DOM coords
1102 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1106 // Values for use with panEdgeFraction, which limit how far outside the
1107 // graph's data boundaries it can be panned.
1108 boundedDates
: null, // [minDate, maxDate]
1109 boundedValues
: null, // [[minValue, maxValue] ...]
1111 initializeMouseDown
: function(event
, g
, context
) {
1112 // prevents mouse drags from selecting page text.
1113 if (event
.preventDefault
) {
1114 event
.preventDefault(); // Firefox, Chrome, etc.
1116 event
.returnValue
= false; // IE
1117 event
.cancelBubble
= true;
1120 context
.px
= Dygraph
.findPosX(g
.canvas_
);
1121 context
.py
= Dygraph
.findPosY(g
.canvas_
);
1122 context
.dragStartX
= g
.dragGetX_(event
, context
);
1123 context
.dragStartY
= g
.dragGetY_(event
, context
);
1127 var interactionModel
= this.attr_("interactionModel");
1129 // Self is the graph.
1132 // Function that binds the graph and context to the handler.
1133 var bindHandler
= function(handler
) {
1134 return function(event
) {
1135 handler(event
, self
, context
);
1139 for (var eventName
in interactionModel
) {
1140 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1141 Dygraph
.addEvent(this.mouseEventElement_
, eventName
,
1142 bindHandler(interactionModel
[eventName
]));
1145 // If the user releases the mouse button during a drag, but not over the
1146 // canvas, then it doesn't count as a zooming action.
1147 Dygraph
.addEvent(document
, 'mouseup', function(event
) {
1148 if (context
.isZooming
|| context
.isPanning
) {
1149 context
.isZooming
= false;
1150 context
.dragStartX
= null;
1151 context
.dragStartY
= null;
1154 if (context
.isPanning
) {
1155 context
.isPanning
= false;
1156 context
.draggingDate
= null;
1157 context
.dateRange
= null;
1158 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1159 delete self
.axes_
[i
].draggingValue
;
1160 delete self
.axes_
[i
].dragValueRange
;
1167 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1168 * up any previous zoom rectangles that were drawn. This could be optimized to
1169 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1172 * @param {Number} direction the direction of the zoom rectangle. Acceptable
1173 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1174 * @param {Number} startX The X position where the drag started, in canvas
1176 * @param {Number} endX The current X position of the drag, in canvas coords.
1177 * @param {Number} startY The Y position where the drag started, in canvas
1179 * @param {Number} endY The current Y position of the drag, in canvas coords.
1180 * @param {Number} prevDirection the value of direction on the previous call to
1181 * this function. Used to avoid excess redrawing
1182 * @param {Number} prevEndX The value of endX on the previous call to this
1183 * function. Used to avoid excess redrawing
1184 * @param {Number} prevEndY The value of endY on the previous call to this
1185 * function. Used to avoid excess redrawing
1188 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1189 endY
, prevDirection
, prevEndX
,
1191 var ctx
= this.canvas_ctx_
;
1193 // Clean up from the previous rect if necessary
1194 if (prevDirection
== Dygraph
.HORIZONTAL
) {
1195 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1196 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1197 } else if (prevDirection
== Dygraph
.VERTICAL
){
1198 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1199 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1202 // Draw a light-grey rectangle to show the new viewing area
1203 if (direction
== Dygraph
.HORIZONTAL
) {
1204 if (endX
&& startX
) {
1205 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1206 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1207 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1209 } else if (direction
== Dygraph
.VERTICAL
) {
1210 if (endY
&& startY
) {
1211 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1212 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1213 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1217 if (this.isUsingExcanvas_
) {
1218 this.currentZoomRectArgs_
= [direction
, startX
, endX
, startY
, endY
, 0, 0, 0];
1223 * Clear the zoom rectangle (and perform no zoom).
1226 Dygraph
.prototype.clearZoomRect_
= function() {
1227 this.currentZoomRectArgs_
= null;
1228 this.canvas_ctx_
.clearRect(0, 0, this.canvas_
.width
, this.canvas_
.height
);
1232 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1233 * the canvas. The exact zoom window may be slightly larger if there are no data
1234 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1235 * which accepts dates that match the raw data. This function redraws the graph.
1237 * @param {Number} lowX The leftmost pixel value that should be visible.
1238 * @param {Number} highX The rightmost pixel value that should be visible.
1241 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1242 this.currentZoomRectArgs_
= null;
1243 // Find the earliest and latest dates contained in this canvasx range.
1244 // Convert the call to date ranges of the raw data.
1245 var minDate
= this.toDataXCoord(lowX
);
1246 var maxDate
= this.toDataXCoord(highX
);
1247 this.doZoomXDates_(minDate
, maxDate
);
1251 * Transition function to use in animations. Returns values between 0.0
1252 * (totally old values) and 1.0 (totally new values) for each frame.
1255 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1257 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1261 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1262 * method with doZoomX which accepts pixel coordinates. This function redraws
1265 * @param {Number} minDate The minimum date that should be visible.
1266 * @param {Number} maxDate The maximum date that should be visible.
1269 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1270 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1271 // can produce strange effects. Rather than the y-axis transitioning slowly
1272 // between values, it can jerk around.)
1273 var old_window
= this.xAxisRange();
1274 var new_window
= [minDate
, maxDate
];
1275 this.zoomed_x_
= true;
1277 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1278 if (that
.attr_("zoomCallback")) {
1279 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1285 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1286 * the canvas. This function redraws the graph.
1288 * @param {Number} lowY The topmost pixel value that should be visible.
1289 * @param {Number} highY The lowest pixel value that should be visible.
1292 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1293 this.currentZoomRectArgs_
= null;
1294 // Find the highest and lowest values in pixel range for each axis.
1295 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1296 // This is because pixels increase as you go down on the screen, whereas data
1297 // coordinates increase as you go up the screen.
1298 var oldValueRanges
= this.yAxisRanges();
1299 var newValueRanges
= [];
1300 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1301 var hi
= this.toDataYCoord(lowY
, i
);
1302 var low
= this.toDataYCoord(highY
, i
);
1303 newValueRanges
.push([low
, hi
]);
1306 this.zoomed_y_
= true;
1308 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1309 if (that
.attr_("zoomCallback")) {
1310 var xRange
= that
.xAxisRange();
1311 that
.attr_("zoomCallback")(xRange
[0], xRange
[1], that
.yAxisRanges());
1317 * Reset the zoom to the original view coordinates. This is the same as
1318 * double-clicking on the graph.
1322 Dygraph
.prototype.doUnzoom_
= function() {
1323 var dirty
= false, dirtyX
= false, dirtyY
= false;
1324 if (this.dateWindow_
!== null) {
1329 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1330 if (this.axes_
[i
].valueWindow
!== null) {
1336 // Clear any selection, since it's likely to be drawn in the wrong place.
1337 this.clearSelection();
1340 this.zoomed_x_
= false;
1341 this.zoomed_y_
= false;
1343 var minDate
= this.rawData_
[0][0];
1344 var maxDate
= this.rawData_
[this.rawData_
.length
- 1][0];
1346 // With only one frame, don't bother calculating extreme ranges.
1347 // TODO(danvk): merge this block w/ the code below
.
1348 if (!this.attr_("animatedZooms")) {
1349 this.dateWindow_
= null;
1350 for (i
= 0; i
< this.axes_
.length
; i
++) {
1351 if (this.axes_
[i
].valueWindow
!== null) {
1352 delete this.axes_
[i
].valueWindow
;
1356 if (this.attr_("zoomCallback")) {
1357 this.attr_("zoomCallback")(minDate
, maxDate
, this.yAxisRanges());
1362 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1364 oldWindow
= this.xAxisRange();
1365 newWindow
= [minDate
, maxDate
];
1369 oldValueRanges
= this.yAxisRanges();
1370 // TODO(danvk): this is pretty inefficient
1371 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1372 var extremes
= packed
[1];
1374 // this has the side-effect of modifying this.axes_.
1375 // this doesn't make much sense in this context, but it's convenient (we
1376 // need this.axes_[*].extremeValues) and not harmful since we'll be
1377 // calling drawGraph_ shortly, which clobbers these values.
1378 this.computeYAxisRanges_(extremes
);
1380 newValueRanges
= [];
1381 for (i
= 0; i
< this.axes_
.length
; i
++) {
1382 newValueRanges
.push(this.axes_
[i
].extremeRange
);
1387 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1389 that
.dateWindow_
= null;
1390 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1391 if (that
.axes_
[i
].valueWindow
!== null) {
1392 delete that
.axes_
[i
].valueWindow
;
1395 if (that
.attr_("zoomCallback")) {
1396 that
.attr_("zoomCallback")(minDate
, maxDate
, that
.yAxisRanges());
1403 * Combined animation logic for all zoom functions.
1404 * either the x parameters or y parameters may be null.
1407 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1408 var steps
= this.attr_("animatedZooms") ? Dygraph
.ANIMATION_STEPS
: 1;
1411 var valueRanges
= [];
1414 if (oldXRange
!== null && newXRange
!== null) {
1415 for (step
= 1; step
<= steps
; step
++) {
1416 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1417 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1418 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1422 if (oldYRanges
!== null && newYRanges
!== null) {
1423 for (step
= 1; step
<= steps
; step
++) {
1424 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1426 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1427 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1428 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1430 valueRanges
[step
-1] = thisRange
;
1435 Dygraph
.repeatAndCleanup(function(step
) {
1436 if (valueRanges
.length
) {
1437 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1438 var w
= valueRanges
[step
][i
];
1439 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1442 if (windows
.length
) {
1443 that
.dateWindow_
= windows
[step
];
1446 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1450 * When the mouse moves in the canvas, display information about a nearby data
1451 * point and draw dots over those points in the data series. This function
1452 * takes care of cleanup of previously-drawn dots.
1453 * @param {Object} event The mousemove event from the browser.
1456 Dygraph
.prototype.mouseMove_
= function(event
) {
1457 // This prevents JS errors when mousing over the canvas before data loads.
1458 var points
= this.layout_
.points
;
1459 if (points
=== undefined
) return;
1461 var canvasx
= Dygraph
.pageX(event
) - Dygraph
.findPosX(this.mouseEventElement_
);
1466 // Loop through all the points and find the date nearest to our current
1468 var minDist
= 1e+100;
1470 for (i
= 0; i
< points
.length
; i
++) {
1471 var point
= points
[i
];
1472 if (point
=== null) continue;
1473 var dist
= Math
.abs(point
.canvasx
- canvasx
);
1474 if (dist
> minDist
) continue;
1478 if (idx
>= 0) lastx
= points
[idx
].xval
;
1480 // Extract the points we've selected
1481 this.selPoints_
= [];
1482 var l
= points
.length
;
1483 if (!this.attr_("stackedGraph")) {
1484 for (i
= 0; i
< l
; i
++) {
1485 if (points
[i
].xval
== lastx
) {
1486 this.selPoints_
.push(points
[i
]);
1490 // Need to 'unstack' points starting from the bottom
1491 var cumulative_sum
= 0;
1492 for (i
= l
- 1; i
>= 0; i
--) {
1493 if (points
[i
].xval
== lastx
) {
1494 var p
= {}; // Clone the point since we modify it
1495 for (var k
in points
[i
]) {
1496 p
[k
] = points
[i
][k
];
1498 p
.yval
-= cumulative_sum
;
1499 cumulative_sum
+= p
.yval
;
1500 this.selPoints_
.push(p
);
1503 this.selPoints_
.reverse();
1506 if (this.attr_("highlightCallback")) {
1507 var px
= this.lastx_
;
1508 if (px
!== null && lastx
!= px
) {
1509 // only fire if the selected point has changed.
1510 this.attr_("highlightCallback")(event
, lastx
, this.selPoints_
, this.idxToRow_(idx
));
1514 // Save last x position for callbacks.
1515 this.lastx_
= lastx
;
1517 this.updateSelection_();
1521 * Transforms layout_.points index into data row number.
1522 * @param int layout_.points index
1523 * @return int row number, or -1 if none could be found.
1526 Dygraph
.prototype.idxToRow_
= function(idx
) {
1527 if (idx
< 0) return -1;
1529 for (var i
in this.layout_
.datasets
) {
1530 if (idx
< this.layout_
.datasets
[i
].length
) {
1531 return this.boundaryIds_
[0][0]+idx
;
1533 idx
-= this.layout_
.datasets
[i
].length
;
1540 * Generates HTML for the legend which is displayed when hovering over the
1541 * chart. If no selected points are specified, a default legend is returned
1542 * (this may just be the empty string).
1543 * @param { Number } [x] The x-value of the selected points.
1544 * @param { [Object] } [sel_points] List of selected points for the given
1545 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1547 Dygraph
.prototype.generateLegendHTML_
= function(x
, sel_points
) {
1548 // If no points are selected, we display a default legend. Traditionally,
1549 // this has been blank. But a better default would be a conventional legend,
1550 // which provides essential information for a non-interactive chart.
1551 var html
, sepLines
, i
, c
;
1552 if (typeof(x
) === 'undefined') {
1553 if (this.attr_('legend') != 'always') return '';
1555 sepLines
= this.attr_('labelsSeparateLines');
1556 var labels
= this.attr_('labels');
1558 for (i
= 1; i
< labels
.length
; i
++) {
1559 if (!this.visibility()[i
- 1]) continue;
1560 c
= this.plotter_
.colors
[labels
[i
]];
1561 if (html
!== '') html
+= (sepLines
? '<br/>' : ' ');
1562 html
+= "<b><span style='color: " + c
+ ";'>—" + labels
[i
] +
1568 var xOptView
= this.optionsViewForAxis_('x');
1569 var xvf
= xOptView('valueFormatter');
1570 html
= xvf(x
, xOptView
, this.attr_('labels')[0], this) + ":";
1573 var num_axes
= this.numAxes();
1574 for (i
= 0; i
< num_axes
; i
++) {
1575 yOptViews
[i
] = this.optionsViewForAxis_('y' + (i
? 1 + i
: ''));
1577 var showZeros
= this.attr_("labelsShowZeroValues");
1578 sepLines
= this.attr_("labelsSeparateLines");
1579 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1580 var pt
= this.selPoints_
[i
];
1581 if (pt
.yval
=== 0 && !showZeros
) continue;
1582 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1583 if (sepLines
) html
+= "<br/>";
1585 var yOptView
= yOptViews
[this.seriesToAxisMap_
[pt
.name
]];
1586 var fmtFunc
= yOptView('valueFormatter');
1587 c
= this.plotter_
.colors
[pt
.name
];
1588 var yval
= fmtFunc(pt
.yval
, yOptView
, pt
.name
, this);
1590 // TODO(danvk): use a template string here and make it an attribute.
1591 html
+= " <b><span style='color: " + c
+ ";'>" + pt
.name
+
1592 "</span></b>:" + yval
;
1599 * Displays information about the selected points in the legend. If there is no
1600 * selection, the legend will be cleared.
1601 * @param { Number } [x] The x-value of the selected points.
1602 * @param { [Object] } [sel_points] List of selected points for the given
1603 * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
1605 Dygraph
.prototype.setLegendHTML_
= function(x
, sel_points
) {
1606 var html
= this.generateLegendHTML_(x
, sel_points
);
1607 var labelsDiv
= this.attr_("labelsDiv");
1608 if (labelsDiv
!== null) {
1609 labelsDiv
.innerHTML
= html
;
1611 if (typeof(this.shown_legend_error_
) == 'undefined') {
1612 this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
1613 this.shown_legend_error_
= true;
1619 * Draw dots over the selectied points in the data series. This function
1620 * takes care of cleanup of previously-drawn dots.
1623 Dygraph
.prototype.updateSelection_
= function() {
1624 // Clear the previously drawn vertical, if there is one
1626 var ctx
= this.canvas_ctx_
;
1627 if (this.previousVerticalX_
>= 0) {
1628 // Determine the maximum highlight circle size.
1629 var maxCircleSize
= 0;
1630 var labels
= this.attr_('labels');
1631 for (i
= 1; i
< labels
.length
; i
++) {
1632 var r
= this.attr_('highlightCircleSize', labels
[i
]);
1633 if (r
> maxCircleSize
) maxCircleSize
= r
;
1635 var px
= this.previousVerticalX_
;
1636 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1637 2 * maxCircleSize
+ 2, this.height_
);
1640 if (this.isUsingExcanvas_
&& this.currentZoomRectArgs_
) {
1641 Dygraph
.prototype.drawZoomRect_
.apply(this, this.currentZoomRectArgs_
);
1644 if (this.selPoints_
.length
> 0) {
1645 // Set the status message to indicate the selected point(s)
1646 if (this.attr_('showLabelsOnHighlight')) {
1647 this.setLegendHTML_(this.lastx_
, this.selPoints_
);
1650 // Draw colored circles over the center of each selected point
1651 var canvasx
= this.selPoints_
[0].canvasx
;
1653 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1654 var pt
= this.selPoints_
[i
];
1655 if (!Dygraph
.isOK(pt
.canvasy
)) continue;
1657 var circleSize
= this.attr_('highlightCircleSize', pt
.name
);
1659 ctx
.fillStyle
= this.plotter_
.colors
[pt
.name
];
1660 ctx
.arc(canvasx
, pt
.canvasy
, circleSize
, 0, 2 * Math
.PI
, false);
1665 this.previousVerticalX_
= canvasx
;
1670 * Manually set the selected points and display information about them in the
1671 * legend. The selection can be cleared using clearSelection() and queried
1672 * using getSelection().
1673 * @param { Integer } row number that should be highlighted (i.e. appear with
1674 * hover dots on the chart). Set to false to clear any selection.
1676 Dygraph
.prototype.setSelection
= function(row
) {
1677 // Extract the points we've selected
1678 this.selPoints_
= [];
1681 if (row
!== false) {
1682 row
= row
- this.boundaryIds_
[0][0];
1685 if (row
!== false && row
>= 0) {
1686 for (var i
in this.layout_
.datasets
) {
1687 if (row
< this.layout_
.datasets
[i
].length
) {
1688 var point
= this.layout_
.points
[pos
+row
];
1690 if (this.attr_("stackedGraph")) {
1691 point
= this.layout_
.unstackPointAtIndex(pos
+row
);
1694 this.selPoints_
.push(point
);
1696 pos
+= this.layout_
.datasets
[i
].length
;
1700 if (this.selPoints_
.length
) {
1701 this.lastx_
= this.selPoints_
[0].xval
;
1702 this.updateSelection_();
1704 this.clearSelection();
1710 * The mouse has left the canvas. Clear out whatever artifacts remain
1711 * @param {Object} event the mouseout event from the browser.
1714 Dygraph
.prototype.mouseOut_
= function(event
) {
1715 if (this.attr_("unhighlightCallback")) {
1716 this.attr_("unhighlightCallback")(event
);
1719 if (this.attr_("hideOverlayOnMouseOut")) {
1720 this.clearSelection();
1725 * Clears the current selection (i.e. points that were highlighted by moving
1726 * the mouse over the chart).
1728 Dygraph
.prototype.clearSelection
= function() {
1729 // Get rid of the overlay data
1730 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1731 this.setLegendHTML_();
1732 this.selPoints_
= [];
1737 * Returns the number of the currently selected row. To get data for this row,
1738 * you can use the getValue method.
1739 * @return { Integer } row number, or -1 if nothing is selected
1741 Dygraph
.prototype.getSelection
= function() {
1742 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1746 for (var row
=0; row
<this.layout_
.points
.length
; row
++ ) {
1747 if (this.layout_
.points
[row
].x
== this.selPoints_
[0].x
) {
1748 return row
+ this.boundaryIds_
[0][0];
1755 * Fires when there's data available to be graphed.
1756 * @param {String} data Raw CSV data to be plotted
1759 Dygraph
.prototype.loadedEvent_
= function(data
) {
1760 this.rawData_
= this.parseCSV_(data
);
1765 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1768 Dygraph
.prototype.addXTicks_
= function() {
1769 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1771 if (this.dateWindow_
) {
1772 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1774 range
= this.fullXRange_();
1777 var xAxisOptionsView
= this.optionsViewForAxis_('x');
1778 var xTicks
= xAxisOptionsView('ticker')(
1781 this.width_
, // TODO(danvk): should be area.width
1784 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
1785 // console.log(msg);
1786 this.layout_
.setXTicks(xTicks
);
1791 * Computes the range of the data series (including confidence intervals).
1792 * @param { [Array] } series either [ [x1, y1], [x2, y2], ... ] or
1793 * [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1794 * @return [low, high]
1796 Dygraph
.prototype.extremeValues_
= function(series
) {
1797 var minY
= null, maxY
= null, j
, y
;
1799 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1801 // With custom bars, maxY is the max of the high values.
1802 for (j
= 0; j
< series
.length
; j
++) {
1803 y
= series
[j
][1][0];
1805 var low
= y
- series
[j
][1][1];
1806 var high
= y
+ series
[j
][1][2];
1807 if (low
> y
) low
= y
; // this can happen with custom bars,
1808 if (high
< y
) high
= y
; // e.g. in tests/custom-bars
.html
1809 if (maxY
=== null || high
> maxY
) {
1812 if (minY
=== null || low
< minY
) {
1817 for (j
= 0; j
< series
.length
; j
++) {
1819 if (y
=== null || isNaN(y
)) continue;
1820 if (maxY
=== null || y
> maxY
) {
1823 if (minY
=== null || y
< minY
) {
1829 return [minY
, maxY
];
1834 * This function is called once when the chart's data is changed or the options
1835 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1836 * idea is that values derived from the chart's data can be computed here,
1837 * rather than every time the chart is drawn. This includes things like the
1838 * number of axes, rolling averages, etc.
1840 Dygraph
.prototype.predraw_
= function() {
1841 var start
= new Date();
1843 // TODO(danvk): move more computations out of drawGraph_ and into here.
1844 this.computeYAxes_();
1846 // Create a new plotter.
1847 if (this.plotter_
) this.plotter_
.clear();
1848 this.plotter_
= new DygraphCanvasRenderer(this,
1853 // The roller sits in the bottom left corner of the chart. We don't know where
1854 // this will be until the options are available, so it's positioned here.
1855 this.createRollInterface_();
1857 // Same thing applies for the labelsDiv. It's right edge should be flush with
1858 // the right edge of the charting area (which may not be the same as the right
1859 // edge of the div, if we have two y-axes.
1860 this.positionLabelsDiv_();
1862 if (this.rangeSelector_
) {
1863 this.rangeSelector_
.renderStaticLayer();
1866 // Convert the raw data (a 2D array) into the internal format and compute
1867 // rolling averages.
1868 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
1869 for (var i
= 1; i
< this.numColumns(); i
++) {
1870 var connectSeparatedPoints
= this.attr_('connectSeparatedPoints', i
);
1871 var logScale
= this.attr_('logscale', i
);
1872 var series
= this.extractSeries_(this.rawData_
, i
, logScale
, connectSeparatedPoints
);
1873 series
= this.rollingAverage(series
, this.rollPeriod_
);
1874 this.rolledSeries_
.push(series
);
1877 // If the data or options have changed, then we'd better redraw.
1880 // This is used to determine whether to do various animations.
1881 var end
= new Date();
1882 this.drawingTimeMs_
= (end
- start
);
1886 * Loop over all fields and create datasets, calculating extreme y-values for
1887 * each series and extreme x-indices as we go.
1889 * dateWindow is passed in as an explicit parameter so that we can compute
1890 * extreme values "speculatively", i.e. without actually setting state on the
1893 * TODO(danvk): make this more of a true function
1894 * @return [ datasets, seriesExtremes, boundaryIds ]
1897 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
1898 var boundaryIds
= [];
1899 var cumulative_y
= []; // For stacked series.
1901 var extremes
= {}; // series name -> [low, high]
1904 // Loop over the fields (series). Go from the last to the first,
1905 // because if they're stacked that's how we accumulate the values.
1906 var num_series
= rolledSeries
.length
- 1;
1907 for (i
= num_series
; i
>= 1; i
--) {
1908 if (!this.visibility()[i
- 1]) continue;
1910 // TODO(danvk): is this copy really necessary?
1912 for (j
= 0; j
< rolledSeries
[i
].length
; j
++) {
1913 series
.push(rolledSeries
[i
][j
]);
1916 // Prune down to the desired range, if necessary (for zooming)
1917 // Because there can be lines going to points outside of the visible area,
1918 // we actually prune to visible points, plus one on either side.
1919 var bars
= this.attr_("errorBars") || this.attr_("customBars");
1921 var low
= dateWindow
[0];
1922 var high
= dateWindow
[1];
1924 // TODO(danvk): do binary search instead of linear search.
1925 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1926 var firstIdx
= null, lastIdx
= null;
1927 for (k
= 0; k
< series
.length
; k
++) {
1928 if (series
[k
][0] >= low
&& firstIdx
=== null) {
1931 if (series
[k
][0] <= high
) {
1935 if (firstIdx
=== null) firstIdx
= 0;
1936 if (firstIdx
> 0) firstIdx
--;
1937 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
1938 if (lastIdx
< series
.length
- 1) lastIdx
++;
1939 boundaryIds
[i
-1] = [firstIdx
, lastIdx
];
1940 for (k
= firstIdx
; k
<= lastIdx
; k
++) {
1941 pruned
.push(series
[k
]);
1945 boundaryIds
[i
-1] = [0, series
.length
-1];
1948 var seriesExtremes
= this.extremeValues_(series
);
1951 for (j
=0; j
<series
.length
; j
++) {
1952 series
[j
] = [series
[j
][0],
1957 } else if (this.attr_("stackedGraph")) {
1958 var l
= series
.length
;
1960 for (j
= 0; j
< l
; j
++) {
1961 // If one data set has a NaN, let all subsequent stacked
1962 // sets inherit the NaN -- only start at 0 for the first set.
1963 var x
= series
[j
][0];
1964 if (cumulative_y
[x
] === undefined
) {
1965 cumulative_y
[x
] = 0;
1968 actual_y
= series
[j
][1];
1969 cumulative_y
[x
] += actual_y
;
1971 series
[j
] = [x
, cumulative_y
[x
]];
1973 if (cumulative_y
[x
] > seriesExtremes
[1]) {
1974 seriesExtremes
[1] = cumulative_y
[x
];
1976 if (cumulative_y
[x
] < seriesExtremes
[0]) {
1977 seriesExtremes
[0] = cumulative_y
[x
];
1982 var seriesName
= this.attr_("labels")[i
];
1983 extremes
[seriesName
] = seriesExtremes
;
1984 datasets
[i
] = series
;
1987 return [ datasets
, extremes
, boundaryIds
];
1991 * Update the graph with new data. This method is called when the viewing area
1992 * has changed. If the underlying data or options have changed, predraw_ will
1993 * be called before drawGraph_ is called.
1995 * clearSelection, when undefined or true, causes this.clearSelection to be
1996 * called at the end of the draw operation. This should rarely be defined,
1997 * and never true (that is it should be undefined most of the time, and
2002 Dygraph
.prototype.drawGraph_
= function(clearSelection
) {
2003 var start
= new Date();
2005 if (typeof(clearSelection
) === 'undefined') {
2006 clearSelection
= true;
2009 // This is used to set the second parameter to drawCallback, below.
2010 var is_initial_draw
= this.is_initial_draw_
;
2011 this.is_initial_draw_
= false;
2013 this.layout_
.removeAllDatasets();
2015 this.attrs_
.pointSize
= 0.5 * this.attr_('highlightCircleSize');
2017 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2018 var datasets
= packed
[0];
2019 var extremes
= packed
[1];
2020 this.boundaryIds_
= packed
[2];
2022 for (var i
= 1; i
< datasets
.length
; i
++) {
2023 if (!this.visibility()[i
- 1]) continue;
2024 this.layout_
.addDataset(this.attr_("labels")[i
], datasets
[i
]);
2027 this.computeYAxisRanges_(extremes
);
2028 this.layout_
.setYAxes(this.axes_
);
2032 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2033 var tmp_zoomed_x
= this.zoomed_x_
;
2034 // Tell PlotKit to use this new data and render itself
2035 this.layout_
.setDateWindow(this.dateWindow_
);
2036 this.zoomed_x_
= tmp_zoomed_x
;
2037 this.layout_
.evaluateWithError();
2038 this.renderGraph_(is_initial_draw
, false);
2040 if (this.attr_("timingName")) {
2041 var end
= new Date();
2043 console
.log(this.attr_("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2048 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
, clearSelection
) {
2049 this.plotter_
.clear();
2050 this.plotter_
.render();
2051 this.canvas_
.getContext('2d').clearRect(0, 0, this.canvas_
.width
,
2052 this.canvas_
.height
);
2054 // Generate a static legend before any particular point is selected.
2055 this.setLegendHTML_();
2057 if (!is_initial_draw
) {
2058 if (clearSelection
) {
2059 if (typeof(this.selPoints_
) !== 'undefined' && this.selPoints_
.length
) {
2060 // We should select the point nearest the page x/y here
, but it
's easier
2061 // to just clear the selection. This prevents erroneous hover dots from
2063 this.clearSelection();
2065 this.clearSelection();
2070 if (this.rangeSelector_) {
2071 this.rangeSelector_.renderInteractiveLayer();
2074 if (this.attr_("drawCallback") !== null) {
2075 this.attr_("drawCallback")(this, is_initial_draw);
2081 * Determine properties of the y-axes which are independent of the data
2082 * currently being displayed. This includes things like the number of axes and
2083 * the style of the axes. It does not include the range of each axis and its
2085 * This fills in this.axes_ and this.seriesToAxisMap_.
2086 * axes_ = [ { options } ]
2087 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
2088 * indices are into the axes_ array.
2090 Dygraph.prototype.computeYAxes_ = function() {
2091 // Preserve valueWindow settings if they exist, and if the user hasn't
2092 // specified a new valueRange.
2093 var i
, valueWindows
, seriesName
, axis
, index
, opts
, v
;
2094 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2096 for (index
= 0; index
< this.axes_
.length
; index
++) {
2097 valueWindows
.push(this.axes_
[index
].valueWindow
);
2101 this.axes_
= [{ yAxisId
: 0, g
: this }]; // always have at least one y-axis.
2102 this.seriesToAxisMap_
= {};
2104 // Get a list of series names.
2105 var labels
= this.attr_("labels");
2107 for (i
= 1; i
< labels
.length
; i
++) series
[labels
[i
]] = (i
- 1);
2109 // all options which could be applied per-axis:
2117 'axisLabelFontSize',
2122 // Copy global axis options over to the first axis.
2123 for (i
= 0; i
< axisOptions
.length
; i
++) {
2124 var k
= axisOptions
[i
];
2126 if (v
) this.axes_
[0][k
] = v
;
2129 // Go through once and add all the axes.
2130 for (seriesName
in series
) {
2131 if (!series
.hasOwnProperty(seriesName
)) continue;
2132 axis
= this.attr_("axis", seriesName
);
2133 if (axis
=== null) {
2134 this.seriesToAxisMap_
[seriesName
] = 0;
2137 if (typeof(axis
) == 'object') {
2138 // Add a new axis, making a copy of its per-axis options.
2140 Dygraph
.update(opts
, this.axes_
[0]);
2141 Dygraph
.update(opts
, { valueRange
: null }); // shouldn't inherit this.
2142 var yAxisId
= this.axes_
.length
;
2143 opts
.yAxisId
= yAxisId
;
2145 Dygraph
.update(opts
, axis
);
2146 this.axes_
.push(opts
);
2147 this.seriesToAxisMap_
[seriesName
] = yAxisId
;
2151 // Go through one more time and assign series to an axis defined by another
2152 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
2153 for (seriesName
in series
) {
2154 if (!series
.hasOwnProperty(seriesName
)) continue;
2155 axis
= this.attr_("axis", seriesName
);
2156 if (typeof(axis
) == 'string') {
2157 if (!this.seriesToAxisMap_
.hasOwnProperty(axis
)) {
2158 this.error("Series " + seriesName
+ " wants to share a y-axis with " +
2159 "series " + axis
+ ", which does not define its own axis.");
2162 var idx
= this.seriesToAxisMap_
[axis
];
2163 this.seriesToAxisMap_
[seriesName
] = idx
;
2167 if (valueWindows
!== undefined
) {
2168 // Restore valueWindow settings.
2169 for (index
= 0; index
< valueWindows
.length
; index
++) {
2170 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2175 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2177 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2178 v
= opts("valueRange");
2179 if (v
) this.axes_
[axis
].valueRange
= v
;
2180 } else { // To keep old behavior
2181 var axes
= this.user_attrs_
.axes
;
2182 if (axes
&& axes
.y2
) {
2183 v
= axes
.y2
.valueRange
;
2184 if (v
) this.axes_
[axis
].valueRange
= v
;
2192 * Returns the number of y-axes on the chart.
2193 * @return {Number} the number of axes.
2195 Dygraph
.prototype.numAxes
= function() {
2197 for (var series
in this.seriesToAxisMap_
) {
2198 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2199 var idx
= this.seriesToAxisMap_
[series
];
2200 if (idx
> last_axis
) last_axis
= idx
;
2202 return 1 + last_axis
;
2207 * Returns axis properties for the given series.
2208 * @param { String } setName The name of the series for which to get axis
2209 * properties, e.g. 'Y1'.
2210 * @return { Object } The axis properties.
2212 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2213 // TODO(danvk): handle errors.
2214 return this.axes_
[this.seriesToAxisMap_
[series
]];
2219 * Determine the value range and tick marks for each axis.
2220 * @param {Object} extremes A mapping from seriesName -> [low, high]
2221 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2223 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2224 // Build a map from axis number -> [list of series names]
2225 var seriesForAxis
= [], series
;
2226 for (series
in this.seriesToAxisMap_
) {
2227 if (!this.seriesToAxisMap_
.hasOwnProperty(series
)) continue;
2228 var idx
= this.seriesToAxisMap_
[series
];
2229 while (seriesForAxis
.length
<= idx
) seriesForAxis
.push([]);
2230 seriesForAxis
[idx
].push(series
);
2233 // Compute extreme values, a span and tick marks for each axis.
2234 for (var i
= 0; i
< this.axes_
.length
; i
++) {
2235 var axis
= this.axes_
[i
];
2237 if (!seriesForAxis
[i
]) {
2238 // If no series are defined or visible then use a reasonable default
2239 axis
.extremeRange
= [0, 1];
2241 // Calculate the extremes of extremes.
2242 series
= seriesForAxis
[i
];
2243 var minY
= Infinity
; // extremes[series[0]][0];
2244 var maxY
= -Infinity
; // extremes[series[0]][1];
2245 var extremeMinY
, extremeMaxY
;
2247 for (var j
= 0; j
< series
.length
; j
++) {
2248 // this skips invisible series
2249 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2251 // Only use valid extremes to stop null data series' from corrupting the scale.
2252 extremeMinY
= extremes
[series
[j
]][0];
2253 if (extremeMinY
!== null) {
2254 minY
= Math
.min(extremeMinY
, minY
);
2256 extremeMaxY
= extremes
[series
[j
]][1];
2257 if (extremeMaxY
!== null) {
2258 maxY
= Math
.max(extremeMaxY
, maxY
);
2261 if (axis
.includeZero
&& minY
> 0) minY
= 0;
2263 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2264 if (minY
== Infinity
) minY
= 0;
2265 if (maxY
== -Infinity
) maxY
= 1;
2267 // Add some padding and round up to an integer to be human-friendly.
2268 var span
= maxY
- minY
;
2269 // special case: if we have no sense of scale, use +/-10% of the sole value
.
2270 if (span
=== 0) { span
= maxY
; }
2272 var maxAxisY
, minAxisY
;
2273 if (axis
.logscale
) {
2274 maxAxisY
= maxY
+ 0.1 * span
;
2277 maxAxisY
= maxY
+ 0.1 * span
;
2278 minAxisY
= minY
- 0.1 * span
;
2280 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2281 if (!this.attr_("avoidMinZero")) {
2282 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2283 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2286 if (this.attr_("includeZero")) {
2287 if (maxY
< 0) maxAxisY
= 0;
2288 if (minY
> 0) minAxisY
= 0;
2291 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2293 if (axis
.valueWindow
) {
2294 // This is only set if the user has zoomed on the y-axis. It is never set
2295 // by a user. It takes precedence over axis.valueRange because, if you set
2296 // valueRange, you'd still expect to be able to pan.
2297 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2298 } else if (axis
.valueRange
) {
2299 // This is a user-set value range for this axis.
2300 axis
.computedValueRange
= [axis
.valueRange
[0], axis
.valueRange
[1]];
2302 axis
.computedValueRange
= axis
.extremeRange
;
2305 // Add ticks. By default, all axes inherit the tick positions of the
2306 // primary axis. However, if an axis is specifically marked as having
2307 // independent ticks, then that is permissible as well.
2308 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2309 var ticker
= opts('ticker');
2310 if (i
=== 0 || axis
.independentTicks
) {
2311 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2312 axis
.computedValueRange
[1],
2313 this.height_
, // TODO(danvk): should be area.height
2317 var p_axis
= this.axes_
[0];
2318 var p_ticks
= p_axis
.ticks
;
2319 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2320 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2321 var tick_values
= [];
2322 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2323 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2324 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2325 tick_values
.push(y_val
);
2328 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2329 axis
.computedValueRange
[1],
2330 this.height_
, // TODO(danvk): should be area.height
2339 * Extracts one series from the raw data (a 2D array) into an array of (date,
2342 * This is where undesirable points (i.e. negative values on log scales and
2343 * missing values through which we wish to connect lines) are dropped.
2347 Dygraph
.prototype.extractSeries_
= function(rawData
, i
, logScale
, connectSeparatedPoints
) {
2349 for (var j
= 0; j
< rawData
.length
; j
++) {
2350 var x
= rawData
[j
][0];
2351 var point
= rawData
[j
][i
];
2353 // On the log scale, points less than zero do not exist.
2354 // This will create a gap in the chart. Note that this ignores
2355 // connectSeparatedPoints.
2359 series
.push([x
, point
]);
2361 if (point
!== null || !connectSeparatedPoints
) {
2362 series
.push([x
, point
]);
2371 * Calculates the rolling average of a data set.
2372 * If originalData is [label, val], rolls the average of those.
2373 * If originalData is [label, [, it's interpreted as [value, stddev]
2374 * and the roll is returned in the same form, with appropriately reduced
2375 * stddev for each value.
2376 * Note that this is where fractional input (i.e. '5/10') is converted into
2378 * @param {Array} originalData The data in the appropriate format (see above)
2379 * @param {Number} rollPeriod The number of points over which to average the
2382 Dygraph
.prototype.rollingAverage
= function(originalData
, rollPeriod
) {
2383 if (originalData
.length
< 2)
2384 return originalData
;
2385 rollPeriod
= Math
.min(rollPeriod
, originalData
.length
);
2386 var rollingData
= [];
2387 var sigma
= this.attr_("sigma");
2389 var low
, high
, i
, j
, y
, sum
, num_ok
, stddev
;
2390 if (this.fractions_
) {
2392 var den
= 0; // numerator/denominator
2394 for (i
= 0; i
< originalData
.length
; i
++) {
2395 num
+= originalData
[i
][1][0];
2396 den
+= originalData
[i
][1][1];
2397 if (i
- rollPeriod
>= 0) {
2398 num
-= originalData
[i
- rollPeriod
][1][0];
2399 den
-= originalData
[i
- rollPeriod
][1][1];
2402 var date
= originalData
[i
][0];
2403 var value
= den
? num
/ den
: 0.0;
2404 if (this.attr_("errorBars")) {
2405 if (this.attr_("wilsonInterval")) {
2406 // For more details on this confidence interval, see:
2407 // http://en.wikipedia.org/wiki
/Binomial_confidence_interval
2409 var p
= value
< 0 ? 0 : value
, n
= den
;
2410 var pm
= sigma
* Math
.sqrt(p
*(1-p
)/n + sigma*sigma/(4*n
*n
));
2411 var denom
= 1 + sigma
* sigma
/ den
;
2412 low
= (p
+ sigma
* sigma
/ (2 * den) - pm) / denom
;
2413 high
= (p
+ sigma
* sigma
/ (2 * den) + pm) / denom
;
2414 rollingData
[i
] = [date
,
2415 [p
* mult
, (p
- low
) * mult
, (high
- p
) * mult
]];
2417 rollingData
[i
] = [date
, [0, 0, 0]];
2420 stddev
= den
? sigma
* Math
.sqrt(value
* (1 - value
) / den
) : 1.0;
2421 rollingData
[i
] = [date
, [mult
* value
, mult
* stddev
, mult
* stddev
]];
2424 rollingData
[i
] = [date
, mult
* value
];
2427 } else if (this.attr_("customBars")) {
2432 for (i
= 0; i
< originalData
.length
; i
++) {
2433 var data
= originalData
[i
][1];
2435 rollingData
[i
] = [originalData
[i
][0], [y
, y
- data
[0], data
[2] - y
]];
2437 if (y
!== null && !isNaN(y
)) {
2443 if (i
- rollPeriod
>= 0) {
2444 var prev
= originalData
[i
- rollPeriod
];
2445 if (prev
[1][1] !== null && !isNaN(prev
[1][1])) {
2453 rollingData
[i
] = [originalData
[i
][0], [ 1.0 * mid
/ count
,
2454 1.0 * (mid
- low
) / count
,
2455 1.0 * (high
- mid
) / count
]];
2457 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2461 // Calculate the rolling average for the first rollPeriod - 1 points where
2462 // there is not enough data to roll over the full number of points
2463 if (!this.attr_("errorBars")){
2464 if (rollPeriod
== 1) {
2465 return originalData
;
2468 for (i
= 0; i
< originalData
.length
; i
++) {
2471 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2472 y
= originalData
[j
][1];
2473 if (y
=== null || isNaN(y
)) continue;
2475 sum
+= originalData
[j
][1];
2478 rollingData
[i
] = [originalData
[i
][0], sum
/ num_ok
];
2480 rollingData
[i
] = [originalData
[i
][0], null];
2485 for (i
= 0; i
< originalData
.length
; i
++) {
2489 for (j
= Math
.max(0, i
- rollPeriod
+ 1); j
< i
+ 1; j
++) {
2490 y
= originalData
[j
][1][0];
2491 if (y
=== null || isNaN(y
)) continue;
2493 sum
+= originalData
[j
][1][0];
2494 variance
+= Math
.pow(originalData
[j
][1][1], 2);
2497 stddev
= Math
.sqrt(variance
) / num_ok
;
2498 rollingData
[i
] = [originalData
[i
][0],
2499 [sum
/ num_ok
, sigma
* stddev
, sigma
* stddev
]];
2501 rollingData
[i
] = [originalData
[i
][0], [null, null, null]];
2511 * Detects the type of the str (date or numeric) and sets the various
2512 * formatting attributes in this.attrs_ based on this type.
2513 * @param {String} str An x value.
2516 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2518 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2519 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2520 str
.indexOf('/') >= 0 ||
2521 isNaN(parseFloat(str
))) {
2523 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2524 // TODO(danvk): remove support for this format.
2529 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2530 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2531 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2532 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2534 /** @private (shut up, jsdoc!) */
2535 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2536 // TODO(danvk): use Dygraph.numberValueFormatter here?
2537 /** @private (shut up, jsdoc!) */
2538 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2539 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
2540 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2545 * Parses the value as a floating point number. This is like the parseFloat()
2546 * built-in, but with a few differences:
2547 * - the empty string is parsed as null, rather than NaN.
2548 * - if the string cannot be parsed at all, an error is logged.
2549 * If the string can't be parsed, this method returns null.
2550 * @param {String} x The string to be parsed
2551 * @param {Number} opt_line_no The line number from which the string comes.
2552 * @param {String} opt_line The text of the line from which the string comes.
2556 // Parse the x as a float or return null if it's not a number.
2557 Dygraph
.prototype.parseFloat_
= function(x
, opt_line_no
, opt_line
) {
2558 var val
= parseFloat(x
);
2559 if (!isNaN(val
)) return val
;
2561 // Try to figure out what happeend.
2562 // If the value is the empty string, parse it as null.
2563 if (/^ *$/.test(x
)) return null;
2565 // If it was actually "NaN", return it as NaN.
2566 if (/^ *nan *$/i.test(x
)) return NaN
;
2568 // Looks like a parsing error.
2569 var msg
= "Unable to parse '" + x
+ "' as a number";
2570 if (opt_line
!== null && opt_line_no
!== null) {
2571 msg
+= " on line " + (1+opt_line_no
) + " ('" + opt_line
+ "') of CSV.";
2580 * Parses a string in a special csv format. We expect a csv file where each
2581 * line is a date point, and the first field in each line is the date string.
2582 * We also expect that all remaining fields represent series.
2583 * if the errorBars attribute is set, then interpret the fields as:
2584 * date, series1, stddev1, series2, stddev2, ...
2585 * @param {[Object]} data See above.
2587 * @return [Object] An array with one entry for each row. These entries
2588 * are an array of cells in that row. The first entry is the parsed x-value for
2589 * the row. The second, third, etc. are the y-values. These can take on one of
2590 * three forms, depending on the CSV and constructor parameters:
2592 * 2. [ value, stddev ]
2593 * 3. [ low value, center value, high value ]
2595 Dygraph
.prototype.parseCSV_
= function(data
) {
2597 var lines
= data
.split("\n");
2600 // Use the default delimiter or fall back to a tab if that makes sense.
2601 var delim
= this.attr_('delimiter');
2602 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2607 if (!('labels' in this.user_attrs_
)) {
2608 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2610 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2615 var defaultParserSet
= false; // attempt to auto-detect x value type
2616 var expectedCols
= this.attr_("labels").length
;
2617 var outOfOrder
= false;
2618 for (var i
= start
; i
< lines
.length
; i
++) {
2619 var line
= lines
[i
];
2621 if (line
.length
=== 0) continue; // skip blank lines
2622 if (line
[0] == '#') continue; // skip comment lines
2623 var inFields
= line
.split(delim
);
2624 if (inFields
.length
< 2) continue;
2627 if (!defaultParserSet
) {
2628 this.detectTypeFromString_(inFields
[0]);
2629 xParser
= this.attr_("xValueParser");
2630 defaultParserSet
= true;
2632 fields
[0] = xParser(inFields
[0], this);
2634 // If fractions are expected, parse the numbers as "A/B
"
2635 if (this.fractions_) {
2636 for (j = 1; j < inFields.length; j++) {
2637 // TODO(danvk): figure out an appropriate way to flag parse errors.
2638 vals = inFields[j].split("/");
2639 if (vals.length != 2) {
2640 this.error('Expected fractional "num
/den
" values in CSV data ' +
2641 "but found a value
'" + inFields[j] + "' on line
" +
2642 (1 + i) + " ('" + line + "') which is not of
this form
.");
2645 fields[j] = [this.parseFloat_(vals[0], i, line),
2646 this.parseFloat_(vals[1], i, line)];
2649 } else if (this.attr_("errorBars
")) {
2650 // If there are error bars, values are (value, stddev) pairs
2651 if (inFields.length % 2 != 1) {
2652 this.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2653 'but line ' + (1 + i) + ' has an odd number of values (' +
2654 (inFields.length - 1) + "): '" + line + "'");
2656 for (j = 1; j < inFields.length; j += 2) {
2657 fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line),
2658 this.parseFloat_(inFields[j + 1], i, line)];
2660 } else if (this.attr_("customBars
")) {
2661 // Bars are a low;center;high tuple
2662 for (j = 1; j < inFields.length; j++) {
2663 var val = inFields[j];
2664 if (/^ *$/.test(val)) {
2665 fields[j] = [null, null, null];
2667 vals = val.split(";");
2668 if (vals.length == 3) {
2669 fields[j] = [ this.parseFloat_(vals[0], i, line),
2670 this.parseFloat_(vals[1], i, line),
2671 this.parseFloat_(vals[2], i, line) ];
2673 this.warn('When using customBars, values must be either blank ' +
2674 'or "low
;center
;high
" tuples (got "' + val +
2675 '" on line ' + (1+i));
2680 // Values are just numbers
2681 for (j = 1; j < inFields.length; j++) {
2682 fields[j] = this.parseFloat_(inFields[j], i, line);
2685 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2689 if (fields.length != expectedCols) {
2690 this.error("Number of columns
in line
" + i + " (" + fields.length +
2691 ") does not agree
with number of
labels (" + expectedCols +
2695 // If the user specified the 'labels' option and none of the cells of the
2696 // first row parsed correctly, then they probably double-specified the
2697 // labels. We go with the values set in the option, discard this row and
2698 // log a warning to the JS console.
2699 if (i === 0 && this.attr_('labels')) {
2700 var all_null = true;
2701 for (j = 0; all_null && j < fields.length; j++) {
2702 if (fields[j]) all_null = false;
2705 this.warn("The dygraphs
'labels' option is set
, but the first row of
" +
2706 "CSV
data ('" + line + "') appears to also contain labels
. " +
2707 "Will drop the CSV labels and
use the option labels
.");
2715 this.warn("CSV is out of order
; order it correctly to speed loading
.");
2716 ret.sort(function(a,b) { return a[0] - b[0]; });
2724 * The user has provided their data as a pre-packaged JS array. If the x values
2725 * are numeric, this is the same as dygraphs' internal format. If the x values
2726 * are dates, we need to convert them from Date objects to ms since epoch.
2727 * @param {[Object]} data
2728 * @return {[Object]} data with numeric x values.
2730 Dygraph.prototype.parseArray_ = function(data) {
2731 // Peek at the first x value to see if it's numeric.
2732 if (data.length === 0) {
2733 this.error("Can
't plot empty data set");
2736 if (data[0].length === 0) {
2737 this.error("Data set cannot contain an empty row");
2742 if (this.attr_("labels") === null) {
2743 this.warn("Using default labels. Set labels explicitly via 'labels
' " +
2744 "in the options parameter");
2745 this.attrs_.labels = [ "X" ];
2746 for (i = 1; i < data[0].length; i++) {
2747 this.attrs_.labels.push("Y" + i);
2751 if (Dygraph.isDateLike(data[0][0])) {
2752 // Some intelligent defaults for a date x-axis.
2753 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
2754 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
2755 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
2757 // Assume they're all dates
.
2758 var parsedData
= Dygraph
.clone(data
);
2759 for (i
= 0; i
< data
.length
; i
++) {
2760 if (parsedData
[i
].length
=== 0) {
2761 this.error("Row " + (1 + i
) + " of data is empty");
2764 if (parsedData
[i
][0] === null ||
2765 typeof(parsedData
[i
][0].getTime
) != 'function' ||
2766 isNaN(parsedData
[i
][0].getTime())) {
2767 this.error("x value in row " + (1 + i
) + " is not a Date");
2770 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2774 // Some intelligent defaults for a numeric x-axis.
2775 /** @private (shut up, jsdoc!) */
2776 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2777 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.numberAxisLabelFormatter
;
2778 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
2784 * Parses a DataTable object from gviz.
2785 * The data is expected to have a first column that is either a date or a
2786 * number. All subsequent columns must be numbers. If there is a clear mismatch
2787 * between this.xValueParser_ and the type of the first column, it will be
2788 * fixed. Fills out rawData_.
2789 * @param {[Object]} data See above.
2792 Dygraph
.prototype.parseDataTable_
= function(data
) {
2793 var shortTextForAnnotationNum
= function(num
) {
2794 // converts [0-9]+ [A-Z][a-z]*
2795 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
2796 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
2797 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
2798 num
= Math
.floor(num
/ 26);
2800 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
2801 num
= Math
.floor((num
- 1) / 26);
2806 var cols
= data
.getNumberOfColumns();
2807 var rows
= data
.getNumberOfRows();
2809 var indepType
= data
.getColumnType(0);
2810 if (indepType
== 'date' || indepType
== 'datetime') {
2811 this.attrs_
.xValueParser
= Dygraph
.dateParser
;
2812 this.attrs_
.axes
.x
.valueFormatter
= Dygraph
.dateString_
;
2813 this.attrs_
.axes
.x
.ticker
= Dygraph
.dateTicker
;
2814 this.attrs_
.axes
.x
.axisLabelFormatter
= Dygraph
.dateAxisFormatter
;
2815 } else if (indepType
== 'number') {
2816 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2817 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2818 this.attrs_
.axes
.x
.ticker
= Dygraph
.numericTicks
;
2819 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2821 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2822 "column 1 of DataTable input (Got '" + indepType
+ "')");
2826 // Array of the column indices which contain data (and not annotations).
2828 var annotationCols
= {}; // data index -> [annotation cols]
2829 var hasAnnotations
= false;
2831 for (i
= 1; i
< cols
; i
++) {
2832 var type
= data
.getColumnType(i
);
2833 if (type
== 'number') {
2835 } else if (type
== 'string' && this.attr_('displayAnnotations')) {
2836 // This is OK -- it's an annotation column.
2837 var dataIdx
= colIdx
[colIdx
.length
- 1];
2838 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
2839 annotationCols
[dataIdx
] = [i
];
2841 annotationCols
[dataIdx
].push(i
);
2843 hasAnnotations
= true;
2845 this.error("Only 'number' is supported as a dependent type with Gviz." +
2846 " 'string' is only supported if displayAnnotations is true");
2850 // Read column labels
2851 // TODO(danvk): add support back for errorBars
2852 var labels
= [data
.getColumnLabel(0)];
2853 for (i
= 0; i
< colIdx
.length
; i
++) {
2854 labels
.push(data
.getColumnLabel(colIdx
[i
]));
2855 if (this.attr_("errorBars")) i
+= 1;
2857 this.attrs_
.labels
= labels
;
2858 cols
= labels
.length
;
2861 var outOfOrder
= false;
2862 var annotations
= [];
2863 for (i
= 0; i
< rows
; i
++) {
2865 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
2866 data
.getValue(i
, 0) === null) {
2867 this.warn("Ignoring row " + i
+
2868 " of DataTable because of undefined or null first column.");
2872 if (indepType
== 'date' || indepType
== 'datetime') {
2873 row
.push(data
.getValue(i
, 0).getTime());
2875 row
.push(data
.getValue(i
, 0));
2877 if (!this.attr_("errorBars")) {
2878 for (j
= 0; j
< colIdx
.length
; j
++) {
2879 var col
= colIdx
[j
];
2880 row
.push(data
.getValue(i
, col
));
2881 if (hasAnnotations
&&
2882 annotationCols
.hasOwnProperty(col
) &&
2883 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
2885 ann
.series
= data
.getColumnLabel(col
);
2887 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
2889 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
2890 if (k
) ann
.text
+= "\n";
2891 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
2893 annotations
.push(ann
);
2897 // Strip out infinities, which give dygraphs problems later on.
2898 for (j
= 0; j
< row
.length
; j
++) {
2899 if (!isFinite(row
[j
])) row
[j
] = null;
2902 for (j
= 0; j
< cols
- 1; j
++) {
2903 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
2906 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
2913 this.warn("DataTable is out of order; order it correctly to speed loading.");
2914 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
2916 this.rawData_
= ret
;
2918 if (annotations
.length
> 0) {
2919 this.setAnnotations(annotations
, true);
2924 * Get the CSV data. If it's in a function, call that function. If it's in a
2925 * file, do an XMLHttpRequest to get it.
2928 Dygraph
.prototype.start_
= function() {
2929 var data
= this.file_
;
2931 // Functions can return references of all other types.
2932 if (typeof data
== 'function') {
2936 if (Dygraph
.isArrayLike(data
)) {
2937 this.rawData_
= this.parseArray_(data
);
2939 } else if (typeof data
== 'object' &&
2940 typeof data
.getColumnRange
== 'function') {
2941 // must be a DataTable from gviz.
2942 this.parseDataTable_(data
);
2944 } else if (typeof data
== 'string') {
2945 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2946 if (data
.indexOf('\n') >= 0) {
2947 this.loadedEvent_(data
);
2949 var req
= new XMLHttpRequest();
2951 req
.onreadystatechange
= function () {
2952 if (req
.readyState
== 4) {
2953 if (req
.status
=== 200 || // Normal http
2954 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
2955 caller
.loadedEvent_(req
.responseText
);
2960 req
.open("GET", data
, true);
2964 this.error("Unknown data format: " + (typeof data
));
2969 * Changes various properties of the graph. These can include:
2971 * <li>file: changes the source data for the graph</li>
2972 * <li>errorBars: changes whether the data contains stddev</li>
2975 * There's a huge variety of options that can be passed to this method. For a
2976 * full list, see http://dygraphs.com/options.html.
2978 * @param {Object} attrs The new properties and values
2979 * @param {Boolean} [block_redraw] Usually the chart is redrawn after every
2980 * call to updateOptions(). If you know better, you can pass true to explicitly
2981 * block the redraw. This can be useful for chaining updateOptions() calls,
2982 * avoiding the occasional infinite loop and preventing redraws when it's not
2983 * necessary (e.g. when updating a callback).
2985 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
2986 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
2988 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
2989 var file
= input_attrs
.file
;
2990 var attrs
= Dygraph
.mapLegacyOptions_(input_attrs
);
2992 // TODO(danvk): this is a mess. Move these options into attr_.
2993 if ('rollPeriod' in attrs
) {
2994 this.rollPeriod_
= attrs
.rollPeriod
;
2996 if ('dateWindow' in attrs
) {
2997 this.dateWindow_
= attrs
.dateWindow
;
2998 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
2999 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3002 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3003 this.zoomed_y_
= (attrs
.valueRange
!== null);
3006 // TODO(danvk): validate per-series options.
3011 // highlightCircleSize
3013 // Check if this set options will require new points.
3014 var requiresNewPoints
= Dygraph
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3016 Dygraph
.updateDeep(this.user_attrs_
, attrs
);
3020 if (!block_redraw
) this.start_();
3022 if (!block_redraw
) {
3023 if (requiresNewPoints
) {
3026 this.renderGraph_(false, false);
3033 * Returns a copy of the options with deprecated names converted into current
3034 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3035 * interested in that, they should save a copy before calling this.
3038 Dygraph
.mapLegacyOptions_
= function(attrs
) {
3040 for (var k
in attrs
) {
3041 if (k
== 'file') continue;
3042 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3045 var set
= function(axis
, opt
, value
) {
3046 if (!my_attrs
.axes
) my_attrs
.axes
= {};
3047 if (!my_attrs
.axes
[axis
]) my_attrs
.axes
[axis
] = {};
3048 my_attrs
.axes
[axis
][opt
] = value
;
3050 var map
= function(opt
, axis
, new_opt
) {
3051 if (typeof(attrs
[opt
]) != 'undefined') {
3052 set(axis
, new_opt
, attrs
[opt
]);
3053 delete my_attrs
[opt
];
3057 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3058 map('xValueFormatter', 'x', 'valueFormatter');
3059 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3060 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3061 map('xTicker', 'x', 'ticker');
3062 map('yValueFormatter', 'y', 'valueFormatter');
3063 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3064 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3065 map('yTicker', 'y', 'ticker');
3070 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3071 * containing div (which has presumably changed size since the dygraph was
3072 * instantiated. If the width/height are specified, the div will be resized.
3074 * This is far more efficient than destroying and re-instantiating a
3075 * Dygraph, since it doesn't have to reparse the underlying data.
3077 * @param {Number} [width] Width (in pixels)
3078 * @param {Number} [height] Height (in pixels)
3080 Dygraph
.prototype.resize
= function(width
, height
) {
3081 if (this.resize_lock
) {
3084 this.resize_lock
= true;
3086 if ((width
=== null) != (height
=== null)) {
3087 this.warn("Dygraph.resize() should be called with zero parameters or " +
3088 "two non-NULL parameters. Pretending it was zero.");
3089 width
= height
= null;
3092 var old_width
= this.width_
;
3093 var old_height
= this.height_
;
3096 this.maindiv_
.style
.width
= width
+ "px";
3097 this.maindiv_
.style
.height
= height
+ "px";
3098 this.width_
= width
;
3099 this.height_
= height
;
3101 this.width_
= this.maindiv_
.clientWidth
;
3102 this.height_
= this.maindiv_
.clientHeight
;
3105 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3106 // TODO(danvk): there should be a clear() method.
3107 this.maindiv_
.innerHTML
= "";
3108 this.roller_
= null;
3109 this.attrs_
.labelsDiv
= null;
3110 this.createInterface_();
3111 if (this.annotations_
.length
) {
3112 // createInterface_ reset the layout, so we need to do this.
3113 this.layout_
.setAnnotations(this.annotations_
);
3118 this.resize_lock
= false;
3122 * Adjusts the number of points in the rolling average. Updates the graph to
3123 * reflect the new averaging period.
3124 * @param {Number} length Number of points over which to average the data.
3126 Dygraph
.prototype.adjustRoll
= function(length
) {
3127 this.rollPeriod_
= length
;
3132 * Returns a boolean array of visibility statuses.
3134 Dygraph
.prototype.visibility
= function() {
3135 // Do lazy-initialization, so that this happens after we know the number of
3137 if (!this.attr_("visibility")) {
3138 this.attrs_
.visibility
= [];
3140 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3141 while (this.attr_("visibility").length
< this.numColumns() - 1) {
3142 this.attrs_
.visibility
.push(true);
3144 return this.attr_("visibility");
3148 * Changes the visiblity of a series.
3150 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3151 var x
= this.visibility();
3152 if (num
< 0 || num
>= x
.length
) {
3153 this.warn("invalid series number in setVisibility: " + num
);
3161 * How large of an area will the dygraph render itself in?
3162 * This is used for testing.
3163 * @return A {width: w, height: h} object.
3166 Dygraph
.prototype.size
= function() {
3167 return { width
: this.width_
, height
: this.height_
};
3171 * Update the list of annotations and redraw the chart.
3172 * See dygraphs.com/annotations.html for more info on how to use annotations.
3173 * @param ann {Array} An array of annotation objects.
3174 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3176 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3177 // Only add the annotation CSS rule once we know it will be used.
3178 Dygraph
.addAnnotationRule();
3179 this.annotations_
= ann
;
3180 this.layout_
.setAnnotations(this.annotations_
);
3181 if (!suppressDraw
) {
3187 * Return the list of annotations.
3189 Dygraph
.prototype.annotations
= function() {
3190 return this.annotations_
;
3194 * Get the index of a series (column) given its name. The first column is the
3195 * x-axis, so the data series start with index 1.
3197 Dygraph
.prototype.indexFromSetName
= function(name
) {
3198 var labels
= this.attr_("labels");
3199 for (var i
= 0; i
< labels
.length
; i
++) {
3200 if (labels
[i
] == name
) return i
;
3207 * Adds a default style for the annotation CSS classes to the document. This is
3208 * only executed when annotations are actually used. It is designed to only be
3209 * called once -- all calls after the first will return immediately.
3211 Dygraph
.addAnnotationRule
= function() {
3212 if (Dygraph
.addedAnnotationCSS
) return;
3214 var rule
= "border: 1px solid black; " +
3215 "background-color: white; " +
3216 "text-align: center;";
3218 var styleSheetElement
= document
.createElement("style");
3219 styleSheetElement
.type
= "text/css";
3220 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3222 // Find the first style sheet that we can access.
3223 // We may not add a rule to a style sheet from another domain for security
3224 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3225 // adds its own style sheets from google.com.
3226 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3227 if (document
.styleSheets
[i
].disabled
) continue;
3228 var mysheet
= document
.styleSheets
[i
];
3230 if (mysheet
.insertRule
) { // Firefox
3231 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3232 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3233 } else if (mysheet
.addRule
) { // IE
3234 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3236 Dygraph
.addedAnnotationCSS
= true;
3239 // Was likely a security exception.
3243 this.warn("Unable to add default annotation CSS rule; display may be off.");
3246 // Older pages may still use this name.
3247 var DateGraph
= Dygraph
;