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 import DygraphLayout from
'./dygraph-layout';
47 import DygraphCanvasRenderer from
'./dygraph-canvas';
48 import DygraphOptions from
'./dygraph-options';
49 import DygraphInteraction from
'./dygraph-interaction-model';
50 import * as DygraphTickers from
'./dygraph-tickers';
51 import * as utils from
'./dygraph-utils';
52 import DEFAULT_ATTRS from
'./dygraph-default-attrs';
53 import OPTIONS_REFERENCE from
'./dygraph-options-reference';
55 import DefaultHandler from
'./datahandler/default';
56 import ErrorBarsHandler from
'./datahandler/bars-error';
57 import CustomBarsHandler from
'./datahandler/bars-custom';
58 import DefaultFractionHandler from
'./datahandler/default-fractions';
59 import FractionsBarsHandler from
'./datahandler/bars-fractions';
60 import BarsHandler from
'./datahandler/bars';
62 import AnnotationsPlugin from
'./plugins/annotations';
63 import AxesPlugin from
'./plugins/axes';
64 import ChartLabelsPlugin from
'./plugins/chart-labels';
65 import GridPlugin from
'./plugins/grid';
66 import LegendPlugin from
'./plugins/legend';
67 import RangeSelectorPlugin from
'./plugins/range-selector';
69 import GVizChart from
'./dygraph-gviz';
74 * Creates an interactive, zoomable chart.
77 * @param {div | String} div A div or the id of a div into which to construct
79 * @param {String | Function} file A file containing CSV data or a function
80 * that returns this data. The most basic expected format for each line is
81 * "YYYY/MM/DD,val1,val2,...". For more information, see
82 * http://dygraphs.com/data.html.
83 * @param {Object} attrs Various other attributes, e.g. errorBars determines
84 * whether the input data contains error ranges. For a complete list of
85 * options, see http://dygraphs.com/options.html.
87 var Dygraph
= function(div
, data
, opts
) {
88 this.__init__(div
, data
, opts
);
91 Dygraph
.NAME
= "Dygraph";
92 Dygraph
.VERSION
= "1.1.0";
94 // Various default values
95 Dygraph
.DEFAULT_ROLL_PERIOD
= 1;
96 Dygraph
.DEFAULT_WIDTH
= 480;
97 Dygraph
.DEFAULT_HEIGHT
= 320;
99 // For max 60 Hz. animation:
100 Dygraph
.ANIMATION_STEPS
= 12;
101 Dygraph
.ANIMATION_DURATION
= 200;
104 * Standard plotters. These may be used by clients.
105 * Available plotters are:
106 * - Dygraph.Plotters.linePlotter: draws central lines (most common)
107 * - Dygraph.Plotters.errorPlotter: draws error bars
108 * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
110 * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
111 * This causes all the lines to be drawn over all the fills/error bars.
113 Dygraph
.Plotters
= DygraphCanvasRenderer
._Plotters
;
116 // Used for initializing annotation CSS rules only once.
117 Dygraph
.addedAnnotationCSS
= false;
120 * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
121 * and context <canvas> inside of it. See the constructor for details.
123 * @param {Element} div the Element to render the graph into.
124 * @param {string | Function} file Source data
125 * @param {Object} attrs Miscellaneous other options
128 Dygraph
.prototype.__init__
= function(div
, file
, attrs
) {
129 this.is_initial_draw_
= true;
132 // Support two-argument constructor
133 if (attrs
=== null || attrs
=== undefined
) { attrs
= {}; }
135 attrs
= Dygraph
.copyUserAttrs_(attrs
);
137 if (typeof(div
) == 'string') {
138 div
= document
.getElementById(div
);
142 throw new Error('Constructing dygraph with a non-existent div!');
145 // Copy the important bits into the object
146 // TODO(danvk): most of these should just stay in the attrs_ dictionary.
149 this.rollPeriod_
= attrs
.rollPeriod
|| Dygraph
.DEFAULT_ROLL_PERIOD
;
150 this.previousVerticalX_
= -1;
151 this.fractions_
= attrs
.fractions
|| false;
152 this.dateWindow_
= attrs
.dateWindow
|| null;
154 this.annotations_
= [];
156 // Zoomed indicators - These indicate when the graph has been zoomed and on what axis.
157 this.zoomed_x_
= false;
158 this.zoomed_y_
= false;
160 // Clear the div. This ensure that, if multiple dygraphs are passed the same
161 // div, then only one will be drawn.
164 // For historical reasons, the 'width' and 'height' options trump all CSS
165 // rules _except_ for an explicit 'width' or 'height' on the div.
166 // As an added convenience, if the div has zero height (like <div></div> does
167 // without any styles), then we use a default height/width
.
168 if (div
.style
.width
=== '' && attrs
.width
) {
169 div
.style
.width
= attrs
.width
+ "px";
171 if (div
.style
.height
=== '' && attrs
.height
) {
172 div
.style
.height
= attrs
.height
+ "px";
174 if (div
.style
.height
=== '' && div
.clientHeight
=== 0) {
175 div
.style
.height
= Dygraph
.DEFAULT_HEIGHT
+ "px";
176 if (div
.style
.width
=== '') {
177 div
.style
.width
= Dygraph
.DEFAULT_WIDTH
+ "px";
180 // These will be zero if the dygraph's div is hidden. In that case,
181 // use the user-specified attributes if present. If not, use zero
182 // and assume the user will call resize to fix things later.
183 this.width_
= div
.clientWidth
|| attrs
.width
|| 0;
184 this.height_
= div
.clientHeight
|| attrs
.height
|| 0;
186 // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
187 if (attrs
.stackedGraph
) {
188 attrs
.fillGraph
= true;
189 // TODO(nikhilk): Add any other stackedGraph checks here.
192 // DEPRECATION WARNING: All option processing should be moved from
193 // attrs_ and user_attrs_ to options_, which holds all this information.
195 // Dygraphs has many options, some of which interact with one another.
196 // To keep track of everything, we maintain two sets of options:
198 // this.user_attrs_ only options explicitly set by the user.
199 // this.attrs_ defaults, options derived from user_attrs_, data.
201 // Options are then accessed this.attr_('attr'), which first looks at
202 // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
203 // defaults without overriding behavior that the user specifically asks for.
204 this.user_attrs_
= {};
205 utils
.update(this.user_attrs_
, attrs
);
207 // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
209 utils
.updateDeep(this.attrs_
, DEFAULT_ATTRS
);
211 this.boundaryIds_
= [];
212 this.setIndexByName_
= {};
213 this.datasetIndex_
= [];
215 this.registeredEvents_
= [];
216 this.eventListeners_
= {};
218 this.attributes_
= new DygraphOptions(this);
220 // Create the containing DIV and other interactive elements
221 this.createInterface_();
225 var plugins
= Dygraph
.PLUGINS
.concat(this.getOption('plugins'));
226 for (var i
= 0; i
< plugins
.length
; i
++) {
227 // the plugins option may contain either plugin classes or instances.
228 // Plugin instances contain an activate method.
229 var Plugin
= plugins
[i
]; // either a constructor or an instance.
231 if (typeof(Plugin
.activate
) !== 'undefined') {
232 pluginInstance
= Plugin
;
234 pluginInstance
= new Plugin();
238 plugin
: pluginInstance
,
244 var handlers
= pluginInstance
.activate(this);
245 for (var eventName
in handlers
) {
246 if (!handlers
.hasOwnProperty(eventName
)) continue;
247 // TODO(danvk): validate eventName.
248 pluginDict
.events
[eventName
] = handlers
[eventName
];
251 this.plugins_
.push(pluginDict
);
254 // At this point, plugins can no longer register event handlers.
255 // Construct a map from event -> ordered list of [callback, plugin].
256 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
257 var plugin_dict
= this.plugins_
[i
];
258 for (var eventName
in plugin_dict
.events
) {
259 if (!plugin_dict
.events
.hasOwnProperty(eventName
)) continue;
260 var callback
= plugin_dict
.events
[eventName
];
262 var pair
= [plugin_dict
.plugin
, callback
];
263 if (!(eventName
in this.eventListeners_
)) {
264 this.eventListeners_
[eventName
] = [pair
];
266 this.eventListeners_
[eventName
].push(pair
);
271 this.createDragInterface_();
277 * Triggers a cascade of events to the various plugins which are interested in them.
278 * Returns true if the "default behavior" should be prevented, i.e. if one
279 * of the event listeners called event.preventDefault().
282 Dygraph
.prototype.cascadeEvents_
= function(name
, extra_props
) {
283 if (!(name
in this.eventListeners_
)) return false;
285 // QUESTION: can we use objects & prototypes to speed this up?
289 defaultPrevented
: false,
290 preventDefault
: function() {
291 if (!e
.cancelable
) throw "Cannot call preventDefault on non-cancelable event.";
292 e
.defaultPrevented
= true;
294 propagationStopped
: false,
295 stopPropagation
: function() {
296 e
.propagationStopped
= true;
299 utils
.update(e
, extra_props
);
301 var callback_plugin_pairs
= this.eventListeners_
[name
];
302 if (callback_plugin_pairs
) {
303 for (var i
= callback_plugin_pairs
.length
- 1; i
>= 0; i
--) {
304 var plugin
= callback_plugin_pairs
[i
][0];
305 var callback
= callback_plugin_pairs
[i
][1];
306 callback
.call(plugin
, e
);
307 if (e
.propagationStopped
) break;
310 return e
.defaultPrevented
;
314 * Fetch a plugin instance of a particular class. Only for testing.
316 * @param {!Class} type The type of the plugin.
317 * @return {Object} Instance of the plugin, or null if there is none.
319 Dygraph
.prototype.getPluginInstance_
= function(type
) {
320 for (var i
= 0; i
< this.plugins_
.length
; i
++) {
321 var p
= this.plugins_
[i
];
322 if (p
.plugin
instanceof type
) {
330 * Returns the zoomed status of the chart for one or both axes.
332 * Axis is an optional parameter. Can be set to 'x' or 'y'.
334 * The zoomed status for an axis is set whenever a user zooms using the mouse
335 * or when the dateWindow or valueRange are updated (unless the
336 * isZoomedIgnoreProgrammaticZoom option is also specified).
338 Dygraph
.prototype.isZoomed
= function(axis
) {
339 if (axis
=== null || axis
=== undefined
) {
340 return this.zoomed_x_
|| this.zoomed_y_
;
342 if (axis
=== 'x') return this.zoomed_x_
;
343 if (axis
=== 'y') return this.zoomed_y_
;
344 throw "axis parameter is [" + axis
+ "] must be null, 'x' or 'y'.";
348 * Returns information about the Dygraph object, including its containing ID.
350 Dygraph
.prototype.toString
= function() {
351 var maindiv
= this.maindiv_
;
352 var id
= (maindiv
&& maindiv
.id
) ? maindiv
.id
: maindiv
;
353 return "[Dygraph " + id
+ "]";
358 * Returns the value of an option. This may be set by the user (either in the
359 * constructor or by calling updateOptions) or by dygraphs, and may be set to a
361 * @param {string} name The name of the option, e.g. 'rollPeriod'.
362 * @param {string} [seriesName] The name of the series to which the option
363 * will be applied. If no per-series value of this option is available, then
364 * the global value is returned. This is optional.
365 * @return { ... } The value of the option.
367 Dygraph
.prototype.attr_
= function(name
, seriesName
) {
368 // For "production" code, this gets removed by uglifyjs.
369 if (process
.env
.NODE_ENV
!= 'production') {
370 if (typeof(OPTIONS_REFERENCE
) === 'undefined') {
371 console
.error('Must include options reference JS for testing');
372 } else if (!OPTIONS_REFERENCE
.hasOwnProperty(name
)) {
373 console
.error('Dygraphs is using property ' + name
+ ', which has no ' +
374 'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
375 // Only log this error once.
376 OPTIONS_REFERENCE
[name
] = true;
379 return seriesName
? this.attributes_
.getForSeries(name
, seriesName
) : this.attributes_
.get(name
);
383 * Returns the current value for an option, as set in the constructor or via
384 * updateOptions. You may pass in an (optional) series name to get per-series
385 * values for the option.
387 * All values returned by this method should be considered immutable. If you
388 * modify them, there is no guarantee that the changes will be honored or that
389 * dygraphs will remain in a consistent state. If you want to modify an option,
390 * use updateOptions() instead.
392 * @param {string} name The name of the option (e.g. 'strokeWidth')
393 * @param {string=} opt_seriesName Series name to get per-series values.
394 * @return {*} The value of the option.
396 Dygraph
.prototype.getOption
= function(name
, opt_seriesName
) {
397 return this.attr_(name
, opt_seriesName
);
401 * Like getOption(), but specifically returns a number.
402 * This is a convenience function for working with the Closure Compiler.
403 * @param {string} name The name of the option (e.g. 'strokeWidth')
404 * @param {string=} opt_seriesName Series name to get per-series values.
405 * @return {number} The value of the option.
408 Dygraph
.prototype.getNumericOption
= function(name
, opt_seriesName
) {
409 return /** @type{number} */(this.getOption(name
, opt_seriesName
));
413 * Like getOption(), but specifically returns a string.
414 * This is a convenience function for working with the Closure Compiler.
415 * @param {string} name The name of the option (e.g. 'strokeWidth')
416 * @param {string=} opt_seriesName Series name to get per-series values.
417 * @return {string} The value of the option.
420 Dygraph
.prototype.getStringOption
= function(name
, opt_seriesName
) {
421 return /** @type{string} */(this.getOption(name
, opt_seriesName
));
425 * Like getOption(), but specifically returns a boolean.
426 * This is a convenience function for working with the Closure Compiler.
427 * @param {string} name The name of the option (e.g. 'strokeWidth')
428 * @param {string=} opt_seriesName Series name to get per-series values.
429 * @return {boolean} The value of the option.
432 Dygraph
.prototype.getBooleanOption
= function(name
, opt_seriesName
) {
433 return /** @type{boolean} */(this.getOption(name
, opt_seriesName
));
437 * Like getOption(), but specifically returns a function.
438 * This is a convenience function for working with the Closure Compiler.
439 * @param {string} name The name of the option (e.g. 'strokeWidth')
440 * @param {string=} opt_seriesName Series name to get per-series values.
441 * @return {function(...)} The value of the option.
444 Dygraph
.prototype.getFunctionOption
= function(name
, opt_seriesName
) {
445 return /** @type{function(...)} */(this.getOption(name
, opt_seriesName
));
448 Dygraph
.prototype.getOptionForAxis
= function(name
, axis
) {
449 return this.attributes_
.getForAxis(name
, axis
);
454 * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
455 * @return { ... } A function mapping string -> option value
457 Dygraph
.prototype.optionsViewForAxis_
= function(axis
) {
459 return function(opt
) {
460 var axis_opts
= self
.user_attrs_
.axes
;
461 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
462 return axis_opts
[axis
][opt
];
465 // I don't like that this is in a second spot.
466 if (axis
=== 'x' && opt
=== 'logscale') {
467 // return the default value.
468 // TODO(konigsberg): pull the default from a global default.
472 // user-specified attributes always trump defaults, even if they're less
474 if (typeof(self
.user_attrs_
[opt
]) != 'undefined') {
475 return self
.user_attrs_
[opt
];
478 axis_opts
= self
.attrs_
.axes
;
479 if (axis_opts
&& axis_opts
[axis
] && axis_opts
[axis
].hasOwnProperty(opt
)) {
480 return axis_opts
[axis
][opt
];
482 // check old-style axis options
483 // TODO(danvk): add a deprecation warning if either of these match.
484 if (axis
== 'y' && self
.axes_
[0].hasOwnProperty(opt
)) {
485 return self
.axes_
[0][opt
];
486 } else if (axis
== 'y2' && self
.axes_
[1].hasOwnProperty(opt
)) {
487 return self
.axes_
[1][opt
];
489 return self
.attr_(opt
);
494 * Returns the current rolling period, as set by the user or an option.
495 * @return {number} The number of points in the rolling window
497 Dygraph
.prototype.rollPeriod
= function() {
498 return this.rollPeriod_
;
502 * Returns the currently-visible x-range. This can be affected by zooming,
503 * panning or a call to updateOptions.
504 * Returns a two-element array: [left, right].
505 * If the Dygraph has dates on the x-axis, these will be millis since epoch.
507 Dygraph
.prototype.xAxisRange
= function() {
508 return this.dateWindow_
? this.dateWindow_
: this.xAxisExtremes();
512 * Returns the lower- and upper-bound x-axis values of the
515 Dygraph
.prototype.xAxisExtremes
= function() {
516 var pad
= this.getNumericOption('xRangePad') / this.plotter_
.area
.w
;
517 if (this.numRows() === 0) {
518 return [0 - pad
, 1 + pad
];
520 var left
= this.rawData_
[0][0];
521 var right
= this.rawData_
[this.rawData_
.length
- 1][0];
523 // Must keep this in sync with dygraph-layout _evaluateLimits()
524 var range
= right
- left
;
526 right
+= range
* pad
;
528 return [left
, right
];
532 * Returns the currently-visible y-range for an axis. This can be affected by
533 * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
534 * called with no arguments, returns the range of the first axis.
535 * Returns a two-element array: [bottom, top].
537 Dygraph
.prototype.yAxisRange
= function(idx
) {
538 if (typeof(idx
) == "undefined") idx
= 0;
539 if (idx
< 0 || idx
>= this.axes_
.length
) {
542 var axis
= this.axes_
[idx
];
543 return [ axis
.computedValueRange
[0], axis
.computedValueRange
[1] ];
547 * Returns the currently-visible y-ranges for each axis. This can be affected by
548 * zooming, panning, calls to updateOptions, etc.
549 * Returns an array of [bottom, top] pairs, one for each y-axis.
551 Dygraph
.prototype.yAxisRanges
= function() {
553 for (var i
= 0; i
< this.axes_
.length
; i
++) {
554 ret
.push(this.yAxisRange(i
));
559 // TODO(danvk): use these functions throughout dygraphs.
561 * Convert from data coordinates to canvas/div X/Y coordinates.
562 * If specified, do this conversion for the coordinate system of a particular
563 * axis. Uses the first axis by default.
564 * Returns a two-element array: [X, Y]
566 * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
567 * instead of toDomCoords(null, y, axis).
569 Dygraph
.prototype.toDomCoords
= function(x
, y
, axis
) {
570 return [ this.toDomXCoord(x
), this.toDomYCoord(y
, axis
) ];
574 * Convert from data x coordinates to canvas/div X coordinate.
575 * If specified, do this conversion for the coordinate system of a particular
577 * Returns a single value or null if x is null.
579 Dygraph
.prototype.toDomXCoord
= function(x
) {
584 var area
= this.plotter_
.area
;
585 var xRange
= this.xAxisRange();
586 return area
.x
+ (x
- xRange
[0]) / (xRange
[1] - xRange
[0]) * area
.w
;
590 * Convert from data x coordinates to canvas/div Y coordinate and optional
591 * axis. Uses the first axis by default.
593 * returns a single value or null if y is null.
595 Dygraph
.prototype.toDomYCoord
= function(y
, axis
) {
596 var pct
= this.toPercentYCoord(y
, axis
);
601 var area
= this.plotter_
.area
;
602 return area
.y
+ pct
* area
.h
;
606 * Convert from canvas/div coords to data coordinates.
607 * If specified, do this conversion for the coordinate system of a particular
608 * axis. Uses the first axis by default.
609 * Returns a two-element array: [X, Y].
611 * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
612 * instead of toDataCoords(null, y, axis).
614 Dygraph
.prototype.toDataCoords
= function(x
, y
, axis
) {
615 return [ this.toDataXCoord(x
), this.toDataYCoord(y
, axis
) ];
619 * Convert from canvas/div x coordinate to data coordinate.
621 * If x is null, this returns null.
623 Dygraph
.prototype.toDataXCoord
= function(x
) {
628 var area
= this.plotter_
.area
;
629 var xRange
= this.xAxisRange();
631 if (!this.attributes_
.getForAxis("logscale", 'x')) {
632 return xRange
[0] + (x
- area
.x
) / area
.w
* (xRange
[1] - xRange
[0]);
634 // TODO: remove duplicate code?
635 // Computing the inverse of toDomCoord.
636 var pct
= (x
- area
.x
) / area
.w
;
638 // Computing the inverse of toPercentXCoord. The function was arrived at with
639 // the following steps:
641 // Original calcuation:
642 // pct = (log(x) - log(xRange[0])) / (log(xRange
[1]) - log(xRange
[0])));
644 // Multiply both sides by the right-side demoninator.
645 // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0])
647 // add log(xRange[0]) to both sides
648 // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x);
650 // Swap both sides of the equation,
651 // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))
653 // Use both sides as the exponent in 10^exp and we're done.
654 // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])))
655 var logr0
= utils
.log10(xRange
[0]);
656 var logr1
= utils
.log10(xRange
[1]);
657 var exponent
= logr0
+ (pct
* (logr1
- logr0
));
658 var value
= Math
.pow(utils
.LOG_SCALE
, exponent
);
664 * Convert from canvas/div y coord to value.
666 * If y is null, this returns null.
667 * if axis is null, this uses the first axis.
669 Dygraph
.prototype.toDataYCoord
= function(y
, axis
) {
674 var area
= this.plotter_
.area
;
675 var yRange
= this.yAxisRange(axis
);
677 if (typeof(axis
) == "undefined") axis
= 0;
678 if (!this.attributes_
.getForAxis("logscale", axis
)) {
679 return yRange
[0] + (area
.y
+ area
.h
- y
) / area
.h
* (yRange
[1] - yRange
[0]);
681 // Computing the inverse of toDomCoord.
682 var pct
= (y
- area
.y
) / area
.h
;
684 // Computing the inverse of toPercentYCoord. The function was arrived at with
685 // the following steps:
687 // Original calcuation:
688 // pct = (log(yRange[1]) - log(y)) / (log(yRange
[1]) - log(yRange
[0]));
690 // Multiply both sides by the right-side demoninator.
691 // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y);
693 // subtract log(yRange[1]) from both sides.
694 // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y);
696 // and multiply both sides by -1.
697 // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y);
699 // Swap both sides of the equation,
700 // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])));
702 // Use both sides as the exponent in 10^exp and we're done.
703 // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))));
704 var logr0
= utils
.log10(yRange
[0]);
705 var logr1
= utils
.log10(yRange
[1]);
706 var exponent
= logr1
- (pct
* (logr1
- logr0
));
707 var value
= Math
.pow(utils
.LOG_SCALE
, exponent
);
713 * Converts a y for an axis to a percentage from the top to the
714 * bottom of the drawing area.
716 * If the coordinate represents a value visible on the canvas, then
717 * the value will be between 0 and 1, where 0 is the top of the canvas.
718 * However, this method will return values outside the range, as
719 * values can fall outside the canvas.
721 * If y is null, this returns null.
722 * if axis is null, this uses the first axis.
724 * @param {number} y The data y-coordinate.
725 * @param {number} [axis] The axis number on which the data coordinate lives.
726 * @return {number} A fraction in [0, 1] where 0 = the top edge.
728 Dygraph
.prototype.toPercentYCoord
= function(y
, axis
) {
732 if (typeof(axis
) == "undefined") axis
= 0;
734 var yRange
= this.yAxisRange(axis
);
737 var logscale
= this.attributes_
.getForAxis("logscale", axis
);
739 var logr0
= utils
.log10(yRange
[0]);
740 var logr1
= utils
.log10(yRange
[1]);
741 pct
= (logr1
- utils
.log10(y
)) / (logr1
- logr0
);
743 // yRange[1] - y is unit distance from the bottom.
744 // yRange[1] - yRange[0] is the scale of the range.
745 // (yRange[1] - y) / (yRange
[1] - yRange
[0]) is the
% from the bottom
.
746 pct
= (yRange
[1] - y
) / (yRange
[1] - yRange
[0]);
752 * Converts an x value to a percentage from the left to the right of
755 * If the coordinate represents a value visible on the canvas, then
756 * the value will be between 0 and 1, where 0 is the left of the canvas.
757 * However, this method will return values outside the range, as
758 * values can fall outside the canvas.
760 * If x is null, this returns null.
761 * @param {number} x The data x-coordinate.
762 * @return {number} A fraction in [0, 1] where 0 = the left edge.
764 Dygraph
.prototype.toPercentXCoord
= function(x
) {
769 var xRange
= this.xAxisRange();
771 var logscale
= this.attributes_
.getForAxis("logscale", 'x') ;
772 if (logscale
=== true) { // logscale can be null so we test for true explicitly.
773 var logr0
= utils
.log10(xRange
[0]);
774 var logr1
= utils
.log10(xRange
[1]);
775 pct
= (utils
.log10(x
) - logr0
) / (logr1
- logr0
);
777 // x - xRange[0] is unit distance from the left.
778 // xRange[1] - xRange[0] is the scale of the range.
779 // The full expression below is the % from the left.
780 pct
= (x
- xRange
[0]) / (xRange
[1] - xRange
[0]);
786 * Returns the number of columns (including the independent variable).
787 * @return {number} The number of columns.
789 Dygraph
.prototype.numColumns
= function() {
790 if (!this.rawData_
) return 0;
791 return this.rawData_
[0] ? this.rawData_
[0].length
: this.attr_("labels").length
;
795 * Returns the number of rows (excluding any header/label row).
796 * @return {number} The number of rows, less any header.
798 Dygraph
.prototype.numRows
= function() {
799 if (!this.rawData_
) return 0;
800 return this.rawData_
.length
;
804 * Returns the value in the given row and column. If the row and column exceed
805 * the bounds on the data, returns null. Also returns null if the value is
807 * @param {number} row The row number of the data (0-based). Row 0 is the
808 * first row of data, not a header row.
809 * @param {number} col The column number of the data (0-based)
810 * @return {number} The value in the specified cell or null if the row/col
813 Dygraph
.prototype.getValue
= function(row
, col
) {
814 if (row
< 0 || row
> this.rawData_
.length
) return null;
815 if (col
< 0 || col
> this.rawData_
[row
].length
) return null;
817 return this.rawData_
[row
][col
];
821 * Generates interface elements for the Dygraph: a containing div, a div to
822 * display the current point, and a textbox to adjust the rolling average
823 * period. Also creates the Renderer/Layout elements.
826 Dygraph
.prototype.createInterface_
= function() {
827 // Create the all-enclosing graph div
828 var enclosing
= this.maindiv_
;
830 this.graphDiv
= document
.createElement("div");
832 // TODO(danvk): any other styles that are useful to set here?
833 this.graphDiv
.style
.textAlign
= 'left'; // This is a CSS "reset"
834 this.graphDiv
.style
.position
= 'relative';
835 enclosing
.appendChild(this.graphDiv
);
837 // Create the canvas for interactive parts of the chart.
838 this.canvas_
= utils
.createCanvas();
839 this.canvas_
.style
.position
= "absolute";
841 // ... and for static parts of the chart.
842 this.hidden_
= this.createPlotKitCanvas_(this.canvas_
);
844 this.canvas_ctx_
= utils
.getContext(this.canvas_
);
845 this.hidden_ctx_
= utils
.getContext(this.hidden_
);
847 this.resizeElements_();
849 // The interactive parts of the graph are drawn on top of the chart.
850 this.graphDiv
.appendChild(this.hidden_
);
851 this.graphDiv
.appendChild(this.canvas_
);
852 this.mouseEventElement_
= this.createMouseEventElement_();
854 // Create the grapher
855 this.layout_
= new DygraphLayout(this);
859 this.mouseMoveHandler_
= function(e
) {
860 dygraph
.mouseMove_(e
);
863 this.mouseOutHandler_
= function(e
) {
864 // The mouse has left the chart if:
865 // 1. e.target is inside the chart
866 // 2. e.relatedTarget is outside the chart
867 var target
= e
.target
|| e
.fromElement
;
868 var relatedTarget
= e
.relatedTarget
|| e
.toElement
;
869 if (utils
.isNodeContainedBy(target
, dygraph
.graphDiv
) &&
870 !utils
.isNodeContainedBy(relatedTarget
, dygraph
.graphDiv
)) {
871 dygraph
.mouseOut_(e
);
875 this.addAndTrackEvent(window
, 'mouseout', this.mouseOutHandler_
);
876 this.addAndTrackEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
878 // Don't recreate and register the resize handler on subsequent calls.
879 // This happens when the graph is resized.
880 if (!this.resizeHandler_
) {
881 this.resizeHandler_
= function(e
) {
885 // Update when the window is resized.
886 // TODO(danvk): drop frames depending on complexity of the chart.
887 this.addAndTrackEvent(window
, 'resize', this.resizeHandler_
);
891 Dygraph
.prototype.resizeElements_
= function() {
892 this.graphDiv
.style
.width
= this.width_
+ "px";
893 this.graphDiv
.style
.height
= this.height_
+ "px";
895 var canvasScale
= utils
.getContextPixelRatio(this.canvas_ctx_
);
896 this.canvas_
.width
= this.width_
* canvasScale
;
897 this.canvas_
.height
= this.height_
* canvasScale
;
898 this.canvas_
.style
.width
= this.width_
+ "px"; // for IE
899 this.canvas_
.style
.height
= this.height_
+ "px"; // for IE
900 if (canvasScale
!== 1) {
901 this.canvas_ctx_
.scale(canvasScale
, canvasScale
);
904 var hiddenScale
= utils
.getContextPixelRatio(this.hidden_ctx_
);
905 this.hidden_
.width
= this.width_
* hiddenScale
;
906 this.hidden_
.height
= this.height_
* hiddenScale
;
907 this.hidden_
.style
.width
= this.width_
+ "px"; // for IE
908 this.hidden_
.style
.height
= this.height_
+ "px"; // for IE
909 if (hiddenScale
!== 1) {
910 this.hidden_ctx_
.scale(hiddenScale
, hiddenScale
);
915 * Detach DOM elements in the dygraph and null out all data references.
916 * Calling this when you're done with a dygraph can dramatically reduce memory
917 * usage. See, e.g., the tests/perf.html example.
919 Dygraph
.prototype.destroy
= function() {
920 this.canvas_ctx_
.restore();
921 this.hidden_ctx_
.restore();
923 // Destroy any plugins, in the reverse order that they were registered.
924 for (var i
= this.plugins_
.length
- 1; i
>= 0; i
--) {
925 var p
= this.plugins_
.pop();
926 if (p
.plugin
.destroy
) p
.plugin
.destroy();
929 var removeRecursive
= function(node
) {
930 while (node
.hasChildNodes()) {
931 removeRecursive(node
.firstChild
);
932 node
.removeChild(node
.firstChild
);
936 this.removeTrackedEvents_();
938 // remove mouse event handlers (This may not be necessary anymore)
939 utils
.removeEvent(window
, 'mouseout', this.mouseOutHandler_
);
940 utils
.removeEvent(this.mouseEventElement_
, 'mousemove', this.mouseMoveHandler_
);
942 // remove window handlers
943 utils
.removeEvent(window
,'resize', this.resizeHandler_
);
944 this.resizeHandler_
= null;
946 removeRecursive(this.maindiv_
);
948 var nullOut
= function(obj
) {
950 if (typeof(obj
[n
]) === 'object') {
955 // These may not all be necessary, but it can't hurt...
956 nullOut(this.layout_
);
957 nullOut(this.plotter_
);
962 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
963 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
964 * or the zoom rectangles) is done on this.canvas_.
965 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
966 * @return {Object} The newly-created canvas
969 Dygraph
.prototype.createPlotKitCanvas_
= function(canvas
) {
970 var h
= utils
.createCanvas();
971 h
.style
.position
= "absolute";
972 // TODO(danvk): h should be offset from canvas. canvas needs to include
973 // some extra area to make it easier to zoom in on the far left and far
974 // right. h needs to be precisely the plot area, so that clipping occurs.
975 h
.style
.top
= canvas
.style
.top
;
976 h
.style
.left
= canvas
.style
.left
;
977 h
.width
= this.width_
;
978 h
.height
= this.height_
;
979 h
.style
.width
= this.width_
+ "px"; // for IE
980 h
.style
.height
= this.height_
+ "px"; // for IE
985 * Creates an overlay element used to handle mouse events.
986 * @return {Object} The mouse event element.
989 Dygraph
.prototype.createMouseEventElement_
= function() {
994 * Generate a set of distinct colors for the data series. This is done with a
995 * color wheel. Saturation/Value are customizable, and the hue is
996 * equally-spaced around the color wheel. If a custom set of colors is
997 * specified, that is used instead.
1000 Dygraph
.prototype.setColors_
= function() {
1001 var labels
= this.getLabels();
1002 var num
= labels
.length
- 1;
1004 this.colorsMap_
= {};
1006 // These are used for when no custom colors are specified.
1007 var sat
= this.getNumericOption('colorSaturation') || 1.0;
1008 var val
= this.getNumericOption('colorValue') || 0.5;
1009 var half
= Math
.ceil(num
/ 2);
1011 var colors
= this.getOption('colors');
1012 var visibility
= this.visibility();
1013 for (var i
= 0; i
< num
; i
++) {
1014 if (!visibility
[i
]) {
1017 var label
= labels
[i
+ 1];
1018 var colorStr
= this.attributes_
.getForSeries('color', label
);
1021 colorStr
= colors
[i
% colors
.length
];
1023 // alternate colors for high contrast.
1024 var idx
= i
% 2 ? (half
+ (i
+ 1)/ 2) : Math.ceil((i + 1) / 2);
1025 var hue
= (1.0 * idx
/ (1 + num
));
1026 colorStr
= utils
.hsvToRGB(hue
, sat
, val
);
1029 this.colors_
.push(colorStr
);
1030 this.colorsMap_
[label
] = colorStr
;
1035 * Return the list of colors. This is either the list of colors passed in the
1036 * attributes or the autogenerated list of rgb(r,g,b) strings.
1037 * This does not return colors for invisible series.
1038 * @return {Array.<string>} The list of colors.
1040 Dygraph
.prototype.getColors
= function() {
1041 return this.colors_
;
1045 * Returns a few attributes of a series, i.e. its color, its visibility, which
1046 * axis it's assigned to, and its column in the original data.
1047 * Returns null if the series does not exist.
1048 * Otherwise, returns an object with column, visibility, color and axis properties.
1049 * The "axis" property will be set to 1 for y1 and 2 for y2.
1050 * The "column" property can be fed back into getValue(row, column) to get
1051 * values for this series.
1053 Dygraph
.prototype.getPropertiesForSeries
= function(series_name
) {
1055 var labels
= this.getLabels();
1056 for (var i
= 1; i
< labels
.length
; i
++) {
1057 if (labels
[i
] == series_name
) {
1062 if (idx
== -1) return null;
1067 visible
: this.visibility()[idx
- 1],
1068 color
: this.colorsMap_
[series_name
],
1069 axis
: 1 + this.attributes_
.axisForSeries(series_name
)
1074 * Create the text box to adjust the averaging period
1077 Dygraph
.prototype.createRollInterface_
= function() {
1078 // Create a roller if one doesn't exist already.
1079 if (!this.roller_
) {
1080 this.roller_
= document
.createElement("input");
1081 this.roller_
.type
= "text";
1082 this.roller_
.style
.display
= "none";
1083 this.graphDiv
.appendChild(this.roller_
);
1086 var display
= this.getBooleanOption('showRoller') ? 'block' : 'none';
1088 var area
= this.plotter_
.area
;
1089 var textAttr
= { "position": "absolute",
1091 "top": (area
.y
+ area
.h
- 25) + "px",
1092 "left": (area
.x
+ 1) + "px",
1095 this.roller_
.size
= "2";
1096 this.roller_
.value
= this.rollPeriod_
;
1097 for (var name
in textAttr
) {
1098 if (textAttr
.hasOwnProperty(name
)) {
1099 this.roller_
.style
[name
] = textAttr
[name
];
1104 this.roller_
.onchange
= function() { dygraph
.adjustRoll(dygraph
.roller_
.value
); };
1108 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1112 Dygraph
.prototype.createDragInterface_
= function() {
1114 // Tracks whether the mouse is down right now
1116 isPanning
: false, // is this drag part of a pan?
1117 is2DPan
: false, // if so, is that pan 1- or 2-dimensional?
1118 dragStartX
: null, // pixel coordinates
1119 dragStartY
: null, // pixel coordinates
1120 dragEndX
: null, // pixel coordinates
1121 dragEndY
: null, // pixel coordinates
1122 dragDirection
: null,
1123 prevEndX
: null, // pixel coordinates
1124 prevEndY
: null, // pixel coordinates
1125 prevDragDirection
: null,
1126 cancelNextDblclick
: false, // see comment in dygraph-interaction-model.js
1128 // The value on the left side of the graph when a pan operation starts.
1129 initialLeftmostDate
: null,
1131 // The number of units each pixel spans. (This won't be valid for log
1133 xUnitsPerPixel
: null,
1135 // TODO(danvk): update this comment
1136 // The range in second/value units that the viewport encompasses during a
1137 // panning operation.
1140 // Top-left corner of the canvas, in DOM coords
1141 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1145 // Values for use with panEdgeFraction, which limit how far outside the
1146 // graph's data boundaries it can be panned.
1147 boundedDates
: null, // [minDate, maxDate]
1148 boundedValues
: null, // [[minValue, maxValue] ...]
1150 // We cover iframes during mouse interactions. See comments in
1151 // dygraph-utils.js for more info on why this is a good idea.
1152 tarp
: new utils
.IFrameTarp(),
1154 // contextB is the same thing as this context object but renamed.
1155 initializeMouseDown
: function(event
, g
, contextB
) {
1156 // prevents mouse drags from selecting page text.
1157 if (event
.preventDefault
) {
1158 event
.preventDefault(); // Firefox, Chrome, etc.
1160 event
.returnValue
= false; // IE
1161 event
.cancelBubble
= true;
1164 var canvasPos
= utils
.findPos(g
.canvas_
);
1165 contextB
.px
= canvasPos
.x
;
1166 contextB
.py
= canvasPos
.y
;
1167 contextB
.dragStartX
= utils
.dragGetX_(event
, contextB
);
1168 contextB
.dragStartY
= utils
.dragGetY_(event
, contextB
);
1169 contextB
.cancelNextDblclick
= false;
1170 contextB
.tarp
.cover();
1172 destroy
: function() {
1174 if (context
.isZooming
|| context
.isPanning
) {
1175 context
.isZooming
= false;
1176 context
.dragStartX
= null;
1177 context
.dragStartY
= null;
1180 if (context
.isPanning
) {
1181 context
.isPanning
= false;
1182 context
.draggingDate
= null;
1183 context
.dateRange
= null;
1184 for (var i
= 0; i
< self
.axes_
.length
; i
++) {
1185 delete self
.axes_
[i
].draggingValue
;
1186 delete self
.axes_
[i
].dragValueRange
;
1190 context
.tarp
.uncover();
1194 var interactionModel
= this.getOption("interactionModel");
1196 // Self is the graph.
1199 // Function that binds the graph and context to the handler.
1200 var bindHandler
= function(handler
) {
1201 return function(event
) {
1202 handler(event
, self
, context
);
1206 for (var eventName
in interactionModel
) {
1207 if (!interactionModel
.hasOwnProperty(eventName
)) continue;
1208 this.addAndTrackEvent(this.mouseEventElement_
, eventName
,
1209 bindHandler(interactionModel
[eventName
]));
1212 // If the user releases the mouse button during a drag, but not over the
1213 // canvas, then it doesn't count as a zooming action.
1214 if (!interactionModel
.willDestroyContextMyself
) {
1215 var mouseUpHandler
= function(event
) {
1219 this.addAndTrackEvent(document
, 'mouseup', mouseUpHandler
);
1224 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1225 * up any previous zoom rectangles that were drawn. This could be optimized to
1226 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1229 * @param {number} direction the direction of the zoom rectangle. Acceptable
1230 * values are utils.HORIZONTAL and utils.VERTICAL.
1231 * @param {number} startX The X position where the drag started, in canvas
1233 * @param {number} endX The current X position of the drag, in canvas coords.
1234 * @param {number} startY The Y position where the drag started, in canvas
1236 * @param {number} endY The current Y position of the drag, in canvas coords.
1237 * @param {number} prevDirection the value of direction on the previous call to
1238 * this function. Used to avoid excess redrawing
1239 * @param {number} prevEndX The value of endX on the previous call to this
1240 * function. Used to avoid excess redrawing
1241 * @param {number} prevEndY The value of endY on the previous call to this
1242 * function. Used to avoid excess redrawing
1245 Dygraph
.prototype.drawZoomRect_
= function(direction
, startX
, endX
, startY
,
1246 endY
, prevDirection
, prevEndX
,
1248 var ctx
= this.canvas_ctx_
;
1250 // Clean up from the previous rect if necessary
1251 if (prevDirection
== utils
.HORIZONTAL
) {
1252 ctx
.clearRect(Math
.min(startX
, prevEndX
), this.layout_
.getPlotArea().y
,
1253 Math
.abs(startX
- prevEndX
), this.layout_
.getPlotArea().h
);
1254 } else if (prevDirection
== utils
.VERTICAL
) {
1255 ctx
.clearRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, prevEndY
),
1256 this.layout_
.getPlotArea().w
, Math
.abs(startY
- prevEndY
));
1259 // Draw a light-grey rectangle to show the new viewing area
1260 if (direction
== utils
.HORIZONTAL
) {
1261 if (endX
&& startX
) {
1262 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1263 ctx
.fillRect(Math
.min(startX
, endX
), this.layout_
.getPlotArea().y
,
1264 Math
.abs(endX
- startX
), this.layout_
.getPlotArea().h
);
1266 } else if (direction
== utils
.VERTICAL
) {
1267 if (endY
&& startY
) {
1268 ctx
.fillStyle
= "rgba(128,128,128,0.33)";
1269 ctx
.fillRect(this.layout_
.getPlotArea().x
, Math
.min(startY
, endY
),
1270 this.layout_
.getPlotArea().w
, Math
.abs(endY
- startY
));
1276 * Clear the zoom rectangle (and perform no zoom).
1279 Dygraph
.prototype.clearZoomRect_
= function() {
1280 this.currentZoomRectArgs_
= null;
1281 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1285 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1286 * the canvas. The exact zoom window may be slightly larger if there are no data
1287 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1288 * which accepts dates that match the raw data. This function redraws the graph.
1290 * @param {number} lowX The leftmost pixel value that should be visible.
1291 * @param {number} highX The rightmost pixel value that should be visible.
1294 Dygraph
.prototype.doZoomX_
= function(lowX
, highX
) {
1295 this.currentZoomRectArgs_
= null;
1296 // Find the earliest and latest dates contained in this canvasx range.
1297 // Convert the call to date ranges of the raw data.
1298 var minDate
= this.toDataXCoord(lowX
);
1299 var maxDate
= this.toDataXCoord(highX
);
1300 this.doZoomXDates_(minDate
, maxDate
);
1304 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1305 * method with doZoomX which accepts pixel coordinates. This function redraws
1308 * @param {number} minDate The minimum date that should be visible.
1309 * @param {number} maxDate The maximum date that should be visible.
1312 Dygraph
.prototype.doZoomXDates_
= function(minDate
, maxDate
) {
1313 // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1314 // can produce strange effects. Rather than the x-axis transitioning slowly
1315 // between values, it can jerk around.)
1316 var old_window
= this.xAxisRange();
1317 var new_window
= [minDate
, maxDate
];
1318 this.zoomed_x_
= true;
1320 this.doAnimatedZoom(old_window
, new_window
, null, null, function() {
1321 if (that
.getFunctionOption("zoomCallback")) {
1322 that
.getFunctionOption("zoomCallback").call(that
,
1323 minDate
, maxDate
, that
.yAxisRanges());
1329 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1330 * the canvas. This function redraws the graph.
1332 * @param {number} lowY The topmost pixel value that should be visible.
1333 * @param {number} highY The lowest pixel value that should be visible.
1336 Dygraph
.prototype.doZoomY_
= function(lowY
, highY
) {
1337 this.currentZoomRectArgs_
= null;
1338 // Find the highest and lowest values in pixel range for each axis.
1339 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1340 // This is because pixels increase as you go down on the screen, whereas data
1341 // coordinates increase as you go up the screen.
1342 var oldValueRanges
= this.yAxisRanges();
1343 var newValueRanges
= [];
1344 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1345 var hi
= this.toDataYCoord(lowY
, i
);
1346 var low
= this.toDataYCoord(highY
, i
);
1347 newValueRanges
.push([low
, hi
]);
1350 this.zoomed_y_
= true;
1352 this.doAnimatedZoom(null, null, oldValueRanges
, newValueRanges
, function() {
1353 if (that
.getFunctionOption("zoomCallback")) {
1354 var xRange
= that
.xAxisRange();
1355 that
.getFunctionOption("zoomCallback").call(that
,
1356 xRange
[0], xRange
[1], that
.yAxisRanges());
1362 * Transition function to use in animations. Returns values between 0.0
1363 * (totally old values) and 1.0 (totally new values) for each frame.
1366 Dygraph
.zoomAnimationFunction
= function(frame
, numFrames
) {
1368 return (1.0 - Math
.pow(k
, -frame
)) / (1.0 - Math
.pow(k
, -numFrames
));
1372 * Reset the zoom to the original view coordinates. This is the same as
1373 * double-clicking on the graph.
1375 Dygraph
.prototype.resetZoom
= function() {
1376 var dirty
= false, dirtyX
= false, dirtyY
= false;
1377 if (this.dateWindow_
!== null) {
1382 for (var i
= 0; i
< this.axes_
.length
; i
++) {
1383 if (typeof(this.axes_
[i
].valueWindow
) !== 'undefined' && this.axes_
[i
].valueWindow
!== null) {
1389 // Clear any selection, since it's likely to be drawn in the wrong place.
1390 this.clearSelection();
1393 this.zoomed_x_
= false;
1394 this.zoomed_y_
= false;
1396 //calculate extremes to avoid lack of padding on reset.
1397 var extremes
= this.xAxisExtremes();
1398 var minDate
= extremes
[0],
1399 maxDate
= extremes
[1];
1401 // TODO(danvk): merge this block w/ the code below
.
1402 if (!this.getBooleanOption("animatedZooms")) {
1403 this.dateWindow_
= null;
1404 for (i
= 0; i
< this.axes_
.length
; i
++) {
1405 if (this.axes_
[i
].valueWindow
!== null) {
1406 delete this.axes_
[i
].valueWindow
;
1410 if (this.getFunctionOption("zoomCallback")) {
1411 this.getFunctionOption("zoomCallback").call(this,
1412 minDate
, maxDate
, this.yAxisRanges());
1417 var oldWindow
=null, newWindow
=null, oldValueRanges
=null, newValueRanges
=null;
1419 oldWindow
= this.xAxisRange();
1420 newWindow
= [minDate
, maxDate
];
1424 oldValueRanges
= this.yAxisRanges();
1425 // TODO(danvk): this is pretty inefficient
1426 var packed
= this.gatherDatasets_(this.rolledSeries_
, null);
1427 var extremes
= packed
.extremes
;
1429 // this has the side-effect of modifying this.axes_.
1430 // this doesn't make much sense in this context, but it's convenient (we
1431 // need this.axes_[*].extremeValues) and not harmful since we'll be
1432 // calling drawGraph_ shortly, which clobbers these values.
1433 this.computeYAxisRanges_(extremes
);
1435 newValueRanges
= [];
1436 for (i
= 0; i
< this.axes_
.length
; i
++) {
1437 var axis
= this.axes_
[i
];
1438 newValueRanges
.push((axis
.valueRange
!== null &&
1439 axis
.valueRange
!== undefined
) ?
1440 axis
.valueRange
: axis
.extremeRange
);
1445 this.doAnimatedZoom(oldWindow
, newWindow
, oldValueRanges
, newValueRanges
,
1447 that
.dateWindow_
= null;
1448 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1449 if (that
.axes_
[i
].valueWindow
!== null) {
1450 delete that
.axes_
[i
].valueWindow
;
1453 if (that
.getFunctionOption("zoomCallback")) {
1454 that
.getFunctionOption("zoomCallback").call(that
,
1455 minDate
, maxDate
, that
.yAxisRanges());
1462 * Combined animation logic for all zoom functions.
1463 * either the x parameters or y parameters may be null.
1466 Dygraph
.prototype.doAnimatedZoom
= function(oldXRange
, newXRange
, oldYRanges
, newYRanges
, callback
) {
1467 var steps
= this.getBooleanOption("animatedZooms") ?
1468 Dygraph
.ANIMATION_STEPS
: 1;
1471 var valueRanges
= [];
1474 if (oldXRange
!== null && newXRange
!== null) {
1475 for (step
= 1; step
<= steps
; step
++) {
1476 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1477 windows
[step
-1] = [oldXRange
[0]*(1-frac
) + frac
*newXRange
[0],
1478 oldXRange
[1]*(1-frac
) + frac
*newXRange
[1]];
1482 if (oldYRanges
!== null && newYRanges
!== null) {
1483 for (step
= 1; step
<= steps
; step
++) {
1484 frac
= Dygraph
.zoomAnimationFunction(step
, steps
);
1486 for (var j
= 0; j
< this.axes_
.length
; j
++) {
1487 thisRange
.push([oldYRanges
[j
][0]*(1-frac
) + frac
*newYRanges
[j
][0],
1488 oldYRanges
[j
][1]*(1-frac
) + frac
*newYRanges
[j
][1]]);
1490 valueRanges
[step
-1] = thisRange
;
1495 utils
.repeatAndCleanup(function(step
) {
1496 if (valueRanges
.length
) {
1497 for (var i
= 0; i
< that
.axes_
.length
; i
++) {
1498 var w
= valueRanges
[step
][i
];
1499 that
.axes_
[i
].valueWindow
= [w
[0], w
[1]];
1502 if (windows
.length
) {
1503 that
.dateWindow_
= windows
[step
];
1506 }, steps
, Dygraph
.ANIMATION_DURATION
/ steps
, callback
);
1510 * Get the current graph's area object.
1512 * Returns: {x, y, w, h}
1514 Dygraph
.prototype.getArea
= function() {
1515 return this.plotter_
.area
;
1519 * Convert a mouse event to DOM coordinates relative to the graph origin.
1521 * Returns a two-element array: [X, Y].
1523 Dygraph
.prototype.eventToDomCoords
= function(event
) {
1524 if (event
.offsetX
&& event
.offsetY
) {
1525 return [ event
.offsetX
, event
.offsetY
];
1527 var eventElementPos
= utils
.findPos(this.mouseEventElement_
);
1528 var canvasx
= utils
.pageX(event
) - eventElementPos
.x
;
1529 var canvasy
= utils
.pageY(event
) - eventElementPos
.y
;
1530 return [canvasx
, canvasy
];
1535 * Given a canvas X coordinate, find the closest row.
1536 * @param {number} domX graph-relative DOM X coordinate
1537 * Returns {number} row number.
1540 Dygraph
.prototype.findClosestRow
= function(domX
) {
1541 var minDistX
= Infinity
;
1542 var closestRow
= -1;
1543 var sets
= this.layout_
.points
;
1544 for (var i
= 0; i
< sets
.length
; i
++) {
1545 var points
= sets
[i
];
1546 var len
= points
.length
;
1547 for (var j
= 0; j
< len
; j
++) {
1548 var point
= points
[j
];
1549 if (!utils
.isValidPoint(point
, true)) continue;
1550 var dist
= Math
.abs(point
.canvasx
- domX
);
1551 if (dist
< minDistX
) {
1553 closestRow
= point
.idx
;
1562 * Given canvas X,Y coordinates, find the closest point.
1564 * This finds the individual data point across all visible series
1565 * that's closest to the supplied DOM coordinates using the standard
1566 * Euclidean X,Y distance.
1568 * @param {number} domX graph-relative DOM X coordinate
1569 * @param {number} domY graph-relative DOM Y coordinate
1570 * Returns: {row, seriesName, point}
1573 Dygraph
.prototype.findClosestPoint
= function(domX
, domY
) {
1574 var minDist
= Infinity
;
1575 var dist
, dx
, dy
, point
, closestPoint
, closestSeries
, closestRow
;
1576 for ( var setIdx
= this.layout_
.points
.length
- 1 ; setIdx
>= 0 ; --setIdx
) {
1577 var points
= this.layout_
.points
[setIdx
];
1578 for (var i
= 0; i
< points
.length
; ++i
) {
1580 if (!utils
.isValidPoint(point
)) continue;
1581 dx
= point
.canvasx
- domX
;
1582 dy
= point
.canvasy
- domY
;
1583 dist
= dx
* dx
+ dy
* dy
;
1584 if (dist
< minDist
) {
1586 closestPoint
= point
;
1587 closestSeries
= setIdx
;
1588 closestRow
= point
.idx
;
1592 var name
= this.layout_
.setNames
[closestSeries
];
1601 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1603 * This first finds the X data point closest to the supplied DOM X coordinate,
1604 * then finds the series which puts the Y coordinate on top of its filled area,
1605 * using linear interpolation between adjacent point pairs.
1607 * @param {number} domX graph-relative DOM X coordinate
1608 * @param {number} domY graph-relative DOM Y coordinate
1609 * Returns: {row, seriesName, point}
1612 Dygraph
.prototype.findStackedPoint
= function(domX
, domY
) {
1613 var row
= this.findClosestRow(domX
);
1614 var closestPoint
, closestSeries
;
1615 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1616 var boundary
= this.getLeftBoundary_(setIdx
);
1617 var rowIdx
= row
- boundary
;
1618 var points
= this.layout_
.points
[setIdx
];
1619 if (rowIdx
>= points
.length
) continue;
1620 var p1
= points
[rowIdx
];
1621 if (!utils
.isValidPoint(p1
)) continue;
1622 var py
= p1
.canvasy
;
1623 if (domX
> p1
.canvasx
&& rowIdx
+ 1 < points
.length
) {
1624 // interpolate series Y value using next point
1625 var p2
= points
[rowIdx
+ 1];
1626 if (utils
.isValidPoint(p2
)) {
1627 var dx
= p2
.canvasx
- p1
.canvasx
;
1629 var r
= (domX
- p1
.canvasx
) / dx
;
1630 py
+= r
* (p2
.canvasy
- p1
.canvasy
);
1633 } else if (domX
< p1
.canvasx
&& rowIdx
> 0) {
1634 // interpolate series Y value using previous point
1635 var p0
= points
[rowIdx
- 1];
1636 if (utils
.isValidPoint(p0
)) {
1637 var dx
= p1
.canvasx
- p0
.canvasx
;
1639 var r
= (p1
.canvasx
- domX
) / dx
;
1640 py
+= r
* (p0
.canvasy
- p1
.canvasy
);
1644 // Stop if the point (domX, py) is above this series' upper edge
1645 if (setIdx
=== 0 || py
< domY
) {
1647 closestSeries
= setIdx
;
1650 var name
= this.layout_
.setNames
[closestSeries
];
1659 * When the mouse moves in the canvas, display information about a nearby data
1660 * point and draw dots over those points in the data series. This function
1661 * takes care of cleanup of previously-drawn dots.
1662 * @param {Object} event The mousemove event from the browser.
1665 Dygraph
.prototype.mouseMove_
= function(event
) {
1666 // This prevents JS errors when mousing over the canvas before data loads.
1667 var points
= this.layout_
.points
;
1668 if (points
=== undefined
|| points
=== null) return;
1670 var canvasCoords
= this.eventToDomCoords(event
);
1671 var canvasx
= canvasCoords
[0];
1672 var canvasy
= canvasCoords
[1];
1674 var highlightSeriesOpts
= this.getOption("highlightSeriesOpts");
1675 var selectionChanged
= false;
1676 if (highlightSeriesOpts
&& !this.isSeriesLocked()) {
1678 if (this.getBooleanOption("stackedGraph")) {
1679 closest
= this.findStackedPoint(canvasx
, canvasy
);
1681 closest
= this.findClosestPoint(canvasx
, canvasy
);
1683 selectionChanged
= this.setSelection(closest
.row
, closest
.seriesName
);
1685 var idx
= this.findClosestRow(canvasx
);
1686 selectionChanged
= this.setSelection(idx
);
1689 var callback
= this.getFunctionOption("highlightCallback");
1690 if (callback
&& selectionChanged
) {
1691 callback
.call(this, event
,
1695 this.highlightSet_
);
1700 * Fetch left offset from the specified set index or if not passed, the
1701 * first defined boundaryIds record (see bug #236).
1704 Dygraph
.prototype.getLeftBoundary_
= function(setIdx
) {
1705 if (this.boundaryIds_
[setIdx
]) {
1706 return this.boundaryIds_
[setIdx
][0];
1708 for (var i
= 0; i
< this.boundaryIds_
.length
; i
++) {
1709 if (this.boundaryIds_
[i
] !== undefined
) {
1710 return this.boundaryIds_
[i
][0];
1717 Dygraph
.prototype.animateSelection_
= function(direction
) {
1718 var totalSteps
= 10;
1720 if (this.fadeLevel
=== undefined
) this.fadeLevel
= 0;
1721 if (this.animateId
=== undefined
) this.animateId
= 0;
1722 var start
= this.fadeLevel
;
1723 var steps
= direction
< 0 ? start
: totalSteps
- start
;
1725 if (this.fadeLevel
) {
1726 this.updateSelection_(1.0);
1731 var thisId
= ++this.animateId
;
1733 var cleanupIfClearing
= function() {
1734 // if we haven't reached fadeLevel 0 in the max frame time,
1735 // ensure that the clear happens and just go to 0
1736 if (that
.fadeLevel
!== 0 && direction
< 0) {
1738 that
.clearSelection();
1741 utils
.repeatAndCleanup(
1743 // ignore simultaneous animations
1744 if (that
.animateId
!= thisId
) return;
1746 that
.fadeLevel
+= direction
;
1747 if (that
.fadeLevel
=== 0) {
1748 that
.clearSelection();
1750 that
.updateSelection_(that
.fadeLevel
/ totalSteps
);
1753 steps
, millis
, cleanupIfClearing
);
1757 * Draw dots over the selectied points in the data series. This function
1758 * takes care of cleanup of previously-drawn dots.
1761 Dygraph
.prototype.updateSelection_
= function(opt_animFraction
) {
1762 /*var defaultPrevented = */
1763 this.cascadeEvents_('select', {
1764 selectedRow
: this.lastRow_
,
1765 selectedX
: this.lastx_
,
1766 selectedPoints
: this.selPoints_
1768 // TODO(danvk): use defaultPrevented here?
1770 // Clear the previously drawn vertical, if there is one
1772 var ctx
= this.canvas_ctx_
;
1773 if (this.getOption('highlightSeriesOpts')) {
1774 ctx
.clearRect(0, 0, this.width_
, this.height_
);
1775 var alpha
= 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
1777 // Activating background fade includes an animation effect for a gradual
1778 // fade. TODO(klausw): make this independently configurable if it causes
1779 // issues? Use a shared preference to control animations?
1780 var animateBackgroundFade
= true;
1781 if (animateBackgroundFade
) {
1782 if (opt_animFraction
=== undefined
) {
1783 // start a new animation
1784 this.animateSelection_(1);
1787 alpha
*= opt_animFraction
;
1789 ctx
.fillStyle
= 'rgba(255,255,255,' + alpha
+ ')';
1790 ctx
.fillRect(0, 0, this.width_
, this.height_
);
1793 // Redraw only the highlighted series in the interactive canvas (not the
1794 // static plot canvas, which is where series are usually drawn).
1795 this.plotter_
._renderLineChart(this.highlightSet_
, ctx
);
1796 } else if (this.previousVerticalX_
>= 0) {
1797 // Determine the maximum highlight circle size.
1798 var maxCircleSize
= 0;
1799 var labels
= this.attr_('labels');
1800 for (i
= 1; i
< labels
.length
; i
++) {
1801 var r
= this.getNumericOption('highlightCircleSize', labels
[i
]);
1802 if (r
> maxCircleSize
) maxCircleSize
= r
;
1804 var px
= this.previousVerticalX_
;
1805 ctx
.clearRect(px
- maxCircleSize
- 1, 0,
1806 2 * maxCircleSize
+ 2, this.height_
);
1809 if (this.selPoints_
.length
> 0) {
1810 // Draw colored circles over the center of each selected point
1811 var canvasx
= this.selPoints_
[0].canvasx
;
1813 for (i
= 0; i
< this.selPoints_
.length
; i
++) {
1814 var pt
= this.selPoints_
[i
];
1815 if (!utils
.isOK(pt
.canvasy
)) continue;
1817 var circleSize
= this.getNumericOption('highlightCircleSize', pt
.name
);
1818 var callback
= this.getFunctionOption("drawHighlightPointCallback", pt
.name
);
1819 var color
= this.plotter_
.colors
[pt
.name
];
1821 callback
= utils
.Circles
.DEFAULT
;
1823 ctx
.lineWidth
= this.getNumericOption('strokeWidth', pt
.name
);
1824 ctx
.strokeStyle
= color
;
1825 ctx
.fillStyle
= color
;
1826 callback
.call(this, this, pt
.name
, ctx
, canvasx
, pt
.canvasy
,
1827 color
, circleSize
, pt
.idx
);
1831 this.previousVerticalX_
= canvasx
;
1836 * Manually set the selected points and display information about them in the
1837 * legend. The selection can be cleared using clearSelection() and queried
1838 * using getSelection().
1839 * @param {number} row Row number that should be highlighted (i.e. appear with
1840 * hover dots on the chart).
1841 * @param {seriesName} optional series name to highlight that series with the
1842 * the highlightSeriesOpts setting.
1843 * @param { locked } optional If true, keep seriesName selected when mousing
1844 * over the graph, disabling closest-series highlighting. Call clearSelection()
1847 Dygraph
.prototype.setSelection
= function(row
, opt_seriesName
, opt_locked
) {
1848 // Extract the points we've selected
1849 this.selPoints_
= [];
1851 var changed
= false;
1852 if (row
!== false && row
>= 0) {
1853 if (row
!= this.lastRow_
) changed
= true;
1854 this.lastRow_
= row
;
1855 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; ++setIdx
) {
1856 var points
= this.layout_
.points
[setIdx
];
1857 // Check if the point at the appropriate index is the point we're looking
1858 // for. If it is, just use it, otherwise search the array for a point
1859 // in the proper place.
1860 var setRow
= row
- this.getLeftBoundary_(setIdx
);
1861 if (setRow
< points
.length
&& points
[setRow
].idx
== row
) {
1862 var point
= points
[setRow
];
1863 if (point
.yval
!== null) this.selPoints_
.push(point
);
1865 for (var pointIdx
= 0; pointIdx
< points
.length
; ++pointIdx
) {
1866 var point
= points
[pointIdx
];
1867 if (point
.idx
== row
) {
1868 if (point
.yval
!== null) {
1869 this.selPoints_
.push(point
);
1877 if (this.lastRow_
>= 0) changed
= true;
1881 if (this.selPoints_
.length
) {
1882 this.lastx_
= this.selPoints_
[0].xval
;
1887 if (opt_seriesName
!== undefined
) {
1888 if (this.highlightSet_
!== opt_seriesName
) changed
= true;
1889 this.highlightSet_
= opt_seriesName
;
1892 if (opt_locked
!== undefined
) {
1893 this.lockedSet_
= opt_locked
;
1897 this.updateSelection_(undefined
);
1903 * The mouse has left the canvas. Clear out whatever artifacts remain
1904 * @param {Object} event the mouseout event from the browser.
1907 Dygraph
.prototype.mouseOut_
= function(event
) {
1908 if (this.getFunctionOption("unhighlightCallback")) {
1909 this.getFunctionOption("unhighlightCallback").call(this, event
);
1912 if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_
) {
1913 this.clearSelection();
1918 * Clears the current selection (i.e. points that were highlighted by moving
1919 * the mouse over the chart).
1921 Dygraph
.prototype.clearSelection
= function() {
1922 this.cascadeEvents_('deselect', {});
1924 this.lockedSet_
= false;
1925 // Get rid of the overlay data
1926 if (this.fadeLevel
) {
1927 this.animateSelection_(-1);
1930 this.canvas_ctx_
.clearRect(0, 0, this.width_
, this.height_
);
1932 this.selPoints_
= [];
1935 this.highlightSet_
= null;
1939 * Returns the number of the currently selected row. To get data for this row,
1940 * you can use the getValue method.
1941 * @return {number} row number, or -1 if nothing is selected
1943 Dygraph
.prototype.getSelection
= function() {
1944 if (!this.selPoints_
|| this.selPoints_
.length
< 1) {
1948 for (var setIdx
= 0; setIdx
< this.layout_
.points
.length
; setIdx
++) {
1949 var points
= this.layout_
.points
[setIdx
];
1950 for (var row
= 0; row
< points
.length
; row
++) {
1951 if (points
[row
].x
== this.selPoints_
[0].x
) {
1952 return points
[row
].idx
;
1960 * Returns the name of the currently-highlighted series.
1961 * Only available when the highlightSeriesOpts option is in use.
1963 Dygraph
.prototype.getHighlightSeries
= function() {
1964 return this.highlightSet_
;
1968 * Returns true if the currently-highlighted series was locked
1969 * via setSelection(..., seriesName, true).
1971 Dygraph
.prototype.isSeriesLocked
= function() {
1972 return this.lockedSet_
;
1976 * Fires when there's data available to be graphed.
1977 * @param {string} data Raw CSV data to be plotted
1980 Dygraph
.prototype.loadedEvent_
= function(data
) {
1981 this.rawData_
= this.parseCSV_(data
);
1982 this.cascadeDataDidUpdateEvent_();
1987 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1990 Dygraph
.prototype.addXTicks_
= function() {
1991 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1993 if (this.dateWindow_
) {
1994 range
= [this.dateWindow_
[0], this.dateWindow_
[1]];
1996 range
= this.xAxisExtremes();
1999 var xAxisOptionsView
= this.optionsViewForAxis_('x');
2000 var xTicks
= xAxisOptionsView('ticker')(
2003 this.plotter_
.area
.w
, // TODO(danvk): should be area.width
2006 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2007 // console.log(msg);
2008 this.layout_
.setXTicks(xTicks
);
2012 * Returns the correct handler class for the currently set options.
2015 Dygraph
.prototype.getHandlerClass_
= function() {
2017 if (this.attr_('dataHandler')) {
2018 handlerClass
= this.attr_('dataHandler');
2019 } else if (this.fractions_
) {
2020 if (this.getBooleanOption('errorBars')) {
2021 handlerClass
= FractionsBarsHandler
;
2023 handlerClass
= DefaultFractionHandler
;
2025 } else if (this.getBooleanOption('customBars')) {
2026 handlerClass
= CustomBarsHandler
;
2027 } else if (this.getBooleanOption('errorBars')) {
2028 handlerClass
= ErrorBarsHandler
;
2030 handlerClass
= DefaultHandler
;
2032 return handlerClass
;
2037 * This function is called once when the chart's data is changed or the options
2038 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2039 * idea is that values derived from the chart's data can be computed here,
2040 * rather than every time the chart is drawn. This includes things like the
2041 * number of axes, rolling averages, etc.
2043 Dygraph
.prototype.predraw_
= function() {
2044 var start
= new Date();
2046 // Create the correct dataHandler
2047 this.dataHandler_
= new (this.getHandlerClass_())();
2049 this.layout_
.computePlotArea();
2051 // TODO(danvk): move more computations out of drawGraph_ and into here.
2052 this.computeYAxes_();
2054 if (!this.is_initial_draw_
) {
2055 this.canvas_ctx_
.restore();
2056 this.hidden_ctx_
.restore();
2059 this.canvas_ctx_
.save();
2060 this.hidden_ctx_
.save();
2062 // Create a new plotter.
2063 this.plotter_
= new DygraphCanvasRenderer(this,
2068 // The roller sits in the bottom left corner of the chart. We don't know where
2069 // this will be until the options are available, so it's positioned here.
2070 this.createRollInterface_();
2072 this.cascadeEvents_('predraw');
2074 // Convert the raw data (a 2D array) into the internal format and compute
2075 // rolling averages.
2076 this.rolledSeries_
= [null]; // x-axis is the first series and it's special
2077 for (var i
= 1; i
< this.numColumns(); i
++) {
2078 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too
.
2079 var series
= this.dataHandler_
.extractSeries(this.rawData_
, i
, this.attributes_
);
2080 if (this.rollPeriod_
> 1) {
2081 series
= this.dataHandler_
.rollingAverage(series
, this.rollPeriod_
, this.attributes_
);
2084 this.rolledSeries_
.push(series
);
2087 // If the data or options have changed, then we'd better redraw.
2090 // This is used to determine whether to do various animations.
2091 var end
= new Date();
2092 this.drawingTimeMs_
= (end
- start
);
2098 * xval_* and yval_* are the original unscaled data values,
2099 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2100 * yval_stacked is the cumulative Y value used for stacking graphs,
2101 * and bottom/top/minus/plus are used for error bar graphs.
2108 * y_bottom: ?number,
2110 * y_stacked: ?number,
2112 * yval_minus: ?number,
2114 * yval_plus: ?number,
2118 Dygraph
.PointType
= undefined
;
2121 * Calculates point stacking for stackedGraph=true.
2123 * For stacking purposes, interpolate or extend neighboring data across
2124 * NaN values based on stackedGraphNaNFill settings. This is for display
2125 * only, the underlying data value as shown in the legend remains NaN.
2127 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2128 * Updates each Point's yval_stacked property.
2129 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2130 * values for the series seen so far. Index is the row number. Updated
2131 * based on the current series's values.
2132 * @param {Array.<number>} seriesExtremes Min and max values, updated
2133 * to reflect the stacked values.
2134 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2138 Dygraph
.stackPoints_
= function(
2139 points
, cumulativeYval
, seriesExtremes
, fillMethod
) {
2140 var lastXval
= null;
2141 var prevPoint
= null;
2142 var nextPoint
= null;
2143 var nextPointIdx
= -1;
2145 // Find the next stackable point starting from the given index.
2146 var updateNextPoint
= function(idx
) {
2147 // If we've previously found a non-NaN point and haven't gone past it yet,
2149 if (nextPointIdx
>= idx
) return;
2151 // We haven't found a non-NaN point yet or have moved past it,
2152 // look towards the right to find a non-NaN point.
2153 for (var j
= idx
; j
< points
.length
; ++j
) {
2154 // Clear out a previously-found point (if any) since it's no longer
2155 // valid, we shouldn't use it for interpolation anymore.
2157 if (!isNaN(points
[j
].yval
) && points
[j
].yval
!== null) {
2159 nextPoint
= points
[j
];
2165 for (var i
= 0; i
< points
.length
; ++i
) {
2166 var point
= points
[i
];
2167 var xval
= point
.xval
;
2168 if (cumulativeYval
[xval
] === undefined
) {
2169 cumulativeYval
[xval
] = 0;
2172 var actualYval
= point
.yval
;
2173 if (isNaN(actualYval
) || actualYval
=== null) {
2174 if(fillMethod
== 'none') {
2177 // Interpolate/extend
for stacking purposes
if possible
.
2179 if (prevPoint
&& nextPoint
&& fillMethod
!= 'none') {
2180 // Use linear interpolation between prevPoint and nextPoint.
2181 actualYval
= prevPoint
.yval
+ (nextPoint
.yval
- prevPoint
.yval
) *
2182 ((xval
- prevPoint
.xval
) / (nextPoint
.xval
- prevPoint
.xval
));
2183 } else if (prevPoint
&& fillMethod
== 'all') {
2184 actualYval
= prevPoint
.yval
;
2185 } else if (nextPoint
&& fillMethod
== 'all') {
2186 actualYval
= nextPoint
.yval
;
2195 var stackedYval
= cumulativeYval
[xval
];
2196 if (lastXval
!= xval
) {
2197 // If an x-value is repeated, we ignore the duplicates.
2198 stackedYval
+= actualYval
;
2199 cumulativeYval
[xval
] = stackedYval
;
2203 point
.yval_stacked
= stackedYval
;
2205 if (stackedYval
> seriesExtremes
[1]) {
2206 seriesExtremes
[1] = stackedYval
;
2208 if (stackedYval
< seriesExtremes
[0]) {
2209 seriesExtremes
[0] = stackedYval
;
2216 * Loop over all fields and create datasets, calculating extreme y-values for
2217 * each series and extreme x-indices as we go.
2219 * dateWindow is passed in as an explicit parameter so that we can compute
2220 * extreme values "speculatively", i.e. without actually setting state on the
2223 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2224 * rolledSeries[seriesIndex][row] = raw point, where
2225 * seriesIndex is the column number starting with 1, and
2226 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2227 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2229 * points: Array.<Array.<Dygraph.PointType>>,
2230 * seriesExtremes: Array.<Array.<number>>,
2231 * boundaryIds: Array.<number>}}
2234 Dygraph
.prototype.gatherDatasets_
= function(rolledSeries
, dateWindow
) {
2235 var boundaryIds
= [];
2237 var cumulativeYval
= []; // For stacked series.
2238 var extremes
= {}; // series name -> [low, high]
2239 var seriesIdx
, sampleIdx
;
2240 var firstIdx
, lastIdx
;
2243 // Loop over the fields (series). Go from the last to the first,
2244 // because if they're stacked that's how we accumulate the values.
2245 var num_series
= rolledSeries
.length
- 1;
2247 for (seriesIdx
= num_series
; seriesIdx
>= 1; seriesIdx
--) {
2248 if (!this.visibility()[seriesIdx
- 1]) continue;
2250 // Prune down to the desired range, if necessary (for zooming)
2251 // Because there can be lines going to points outside of the visible area,
2252 // we actually prune to visible points, plus one on either side.
2254 series
= rolledSeries
[seriesIdx
];
2255 var low
= dateWindow
[0];
2256 var high
= dateWindow
[1];
2258 // TODO(danvk): do binary search instead of linear search.
2259 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2262 for (sampleIdx
= 0; sampleIdx
< series
.length
; sampleIdx
++) {
2263 if (series
[sampleIdx
][0] >= low
&& firstIdx
=== null) {
2264 firstIdx
= sampleIdx
;
2266 if (series
[sampleIdx
][0] <= high
) {
2267 lastIdx
= sampleIdx
;
2271 if (firstIdx
=== null) firstIdx
= 0;
2272 var correctedFirstIdx
= firstIdx
;
2273 var isInvalidValue
= true;
2274 while (isInvalidValue
&& correctedFirstIdx
> 0) {
2275 correctedFirstIdx
--;
2276 // check if the y value is null.
2277 isInvalidValue
= series
[correctedFirstIdx
][1] === null;
2280 if (lastIdx
=== null) lastIdx
= series
.length
- 1;
2281 var correctedLastIdx
= lastIdx
;
2282 isInvalidValue
= true;
2283 while (isInvalidValue
&& correctedLastIdx
< series
.length
- 1) {
2285 isInvalidValue
= series
[correctedLastIdx
][1] === null;
2288 if (correctedFirstIdx
!==firstIdx
) {
2289 firstIdx
= correctedFirstIdx
;
2291 if (correctedLastIdx
!== lastIdx
) {
2292 lastIdx
= correctedLastIdx
;
2295 boundaryIds
[seriesIdx
-1] = [firstIdx
, lastIdx
];
2297 // .slice's end is exclusive, we want to include lastIdx.
2298 series
= series
.slice(firstIdx
, lastIdx
+ 1);
2300 series
= rolledSeries
[seriesIdx
];
2301 boundaryIds
[seriesIdx
-1] = [0, series
.length
-1];
2304 var seriesName
= this.attr_("labels")[seriesIdx
];
2305 var seriesExtremes
= this.dataHandler_
.getExtremeYValues(series
,
2306 dateWindow
, this.getBooleanOption("stepPlot",seriesName
));
2308 var seriesPoints
= this.dataHandler_
.seriesToPoints(series
,
2309 seriesName
, boundaryIds
[seriesIdx
-1][0]);
2311 if (this.getBooleanOption("stackedGraph")) {
2312 axisIdx
= this.attributes_
.axisForSeries(seriesName
);
2313 if (cumulativeYval
[axisIdx
] === undefined
) {
2314 cumulativeYval
[axisIdx
] = [];
2316 Dygraph
.stackPoints_(seriesPoints
, cumulativeYval
[axisIdx
], seriesExtremes
,
2317 this.getBooleanOption("stackedGraphNaNFill"));
2320 extremes
[seriesName
] = seriesExtremes
;
2321 points
[seriesIdx
] = seriesPoints
;
2324 return { points
: points
, extremes
: extremes
, boundaryIds
: boundaryIds
};
2328 * Update the graph with new data. This method is called when the viewing area
2329 * has changed. If the underlying data or options have changed, predraw_ will
2330 * be called before drawGraph_ is called.
2334 Dygraph
.prototype.drawGraph_
= function() {
2335 var start
= new Date();
2337 // This is used to set the second parameter to drawCallback, below.
2338 var is_initial_draw
= this.is_initial_draw_
;
2339 this.is_initial_draw_
= false;
2341 this.layout_
.removeAllDatasets();
2343 this.attrs_
.pointSize
= 0.5 * this.getNumericOption('highlightCircleSize');
2345 var packed
= this.gatherDatasets_(this.rolledSeries_
, this.dateWindow_
);
2346 var points
= packed
.points
;
2347 var extremes
= packed
.extremes
;
2348 this.boundaryIds_
= packed
.boundaryIds
;
2350 this.setIndexByName_
= {};
2351 var labels
= this.attr_("labels");
2352 if (labels
.length
> 0) {
2353 this.setIndexByName_
[labels
[0]] = 0;
2356 for (var i
= 1; i
< points
.length
; i
++) {
2357 this.setIndexByName_
[labels
[i
]] = i
;
2358 if (!this.visibility()[i
- 1]) continue;
2359 this.layout_
.addDataset(labels
[i
], points
[i
]);
2360 this.datasetIndex_
[i
] = dataIdx
++;
2363 this.computeYAxisRanges_(extremes
);
2364 this.layout_
.setYAxes(this.axes_
);
2368 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
2369 var tmp_zoomed_x
= this.zoomed_x_
;
2370 // Tell PlotKit to use this new data and render itself
2371 this.zoomed_x_
= tmp_zoomed_x
;
2372 this.layout_
.evaluate();
2373 this.renderGraph_(is_initial_draw
);
2375 if (this.getStringOption("timingName")) {
2376 var end
= new Date();
2377 console
.log(this.getStringOption("timingName") + " - drawGraph: " + (end
- start
) + "ms");
2382 * This does the work of drawing the chart. It assumes that the layout and axis
2383 * scales have already been set (e.g. by predraw_).
2387 Dygraph
.prototype.renderGraph_
= function(is_initial_draw
) {
2388 this.cascadeEvents_('clearChart');
2389 this.plotter_
.clear();
2391 if (this.getFunctionOption('underlayCallback')) {
2392 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2393 // users who expect a deprecated form of this callback.
2394 this.getFunctionOption('underlayCallback').call(this,
2395 this.hidden_ctx_
, this.layout_
.getPlotArea(), this, this);
2399 canvas
: this.hidden_
,
2400 drawingContext
: this.hidden_ctx_
2402 this.cascadeEvents_('willDrawChart', e
);
2403 this.plotter_
.render();
2404 this.cascadeEvents_('didDrawChart', e
);
2405 this.lastRow_
= -1; // because plugins/legend.js clears the legend
2407 // TODO(danvk): is this a performance bottleneck when panning?
2408 // The interaction canvas should already be empty in that situation.
2409 this.canvas_
.getContext('2d').clearRect(0, 0, this.width_
, this.height_
);
2411 if (this.getFunctionOption("drawCallback") !== null) {
2412 this.getFunctionOption("drawCallback").call(this, this, is_initial_draw
);
2414 if (is_initial_draw
) {
2415 this.readyFired_
= true;
2416 while (this.readyFns_
.length
> 0) {
2417 var fn
= this.readyFns_
.pop();
2425 * Determine properties of the y-axes which are independent of the data
2426 * currently being displayed. This includes things like the number of axes and
2427 * the style of the axes. It does not include the range of each axis and its
2429 * This fills in this.axes_.
2430 * axes_ = [ { options } ]
2431 * indices are into the axes_ array.
2433 Dygraph
.prototype.computeYAxes_
= function() {
2434 // Preserve valueWindow settings if they exist, and if the user hasn't
2435 // specified a new valueRange.
2436 var valueWindows
, axis
, index
, opts
, v
;
2437 if (this.axes_
!== undefined
&& this.user_attrs_
.hasOwnProperty("valueRange") === false) {
2439 for (index
= 0; index
< this.axes_
.length
; index
++) {
2440 valueWindows
.push(this.axes_
[index
].valueWindow
);
2444 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2445 // data computation as well as options storage.
2446 // Go through once and add all the axes.
2449 for (axis
= 0; axis
< this.attributes_
.numAxes(); axis
++) {
2450 // Add a new axis, making a copy of its per-axis options.
2451 opts
= { g
: this };
2452 utils
.update(opts
, this.attributes_
.axisOptions(axis
));
2453 this.axes_
[axis
] = opts
;
2457 // Copy global valueRange option over to the first axis.
2458 // NOTE(konigsberg): Are these two statements necessary?
2459 // I tried removing it. The automated tests pass, and manually
2460 // messing with tests/zoom
.html showed no trouble
.
2461 v
= this.attr_('valueRange');
2462 if (v
) this.axes_
[0].valueRange
= v
;
2464 if (valueWindows
!== undefined
) {
2465 // Restore valueWindow settings.
2467 // When going from two axes back to one, we only restore
2469 var idxCount
= Math
.min(valueWindows
.length
, this.axes_
.length
);
2471 for (index
= 0; index
< idxCount
; index
++) {
2472 this.axes_
[index
].valueWindow
= valueWindows
[index
];
2476 for (axis
= 0; axis
< this.axes_
.length
; axis
++) {
2478 opts
= this.optionsViewForAxis_('y' + (axis
? '2' : ''));
2479 v
= opts("valueRange");
2480 if (v
) this.axes_
[axis
].valueRange
= v
;
2481 } else { // To keep old behavior
2482 var axes
= this.user_attrs_
.axes
;
2483 if (axes
&& axes
.y2
) {
2484 v
= axes
.y2
.valueRange
;
2485 if (v
) this.axes_
[axis
].valueRange
= v
;
2492 * Returns the number of y-axes on the chart.
2493 * @return {number} the number of axes.
2495 Dygraph
.prototype.numAxes
= function() {
2496 return this.attributes_
.numAxes();
2501 * Returns axis properties for the given series.
2502 * @param {string} setName The name of the series for which to get axis
2503 * properties, e.g. 'Y1'.
2504 * @return {Object} The axis properties.
2506 Dygraph
.prototype.axisPropertiesForSeries
= function(series
) {
2507 // TODO(danvk): handle errors.
2508 return this.axes_
[this.attributes_
.axisForSeries(series
)];
2513 * Determine the value range and tick marks for each axis.
2514 * @param {Object} extremes A mapping from seriesName -> [low, high]
2515 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2517 Dygraph
.prototype.computeYAxisRanges_
= function(extremes
) {
2518 var isNullUndefinedOrNaN
= function(num
) {
2519 return isNaN(parseFloat(num
));
2521 var numAxes
= this.attributes_
.numAxes();
2522 var ypadCompat
, span
, series
, ypad
;
2526 // Compute extreme values, a span and tick marks for each axis.
2527 for (var i
= 0; i
< numAxes
; i
++) {
2528 var axis
= this.axes_
[i
];
2529 var logscale
= this.attributes_
.getForAxis("logscale", i
);
2530 var includeZero
= this.attributes_
.getForAxis("includeZero", i
);
2531 var independentTicks
= this.attributes_
.getForAxis("independentTicks", i
);
2532 series
= this.attributes_
.seriesForAxis(i
);
2534 // Add some padding. This supports two Y padding operation modes:
2536 // - backwards compatible (yRangePad not set):
2537 // 10% padding for automatic Y ranges, but not for user-supplied
2538 // ranges, and move a close-to-zero edge to zero except if
2539 // avoidMinZero is set, since drawing at the edge results in
2540 // invisible lines. Unfortunately lines drawn at the edge of a
2541 // user-supplied range will still be invisible. If logscale is
2542 // set, add a variable amount of padding at the top but
2543 // none at the bottom.
2545 // - new-style (yRangePad set by the user):
2546 // always add the specified Y padding.
2549 ypad
= 0.1; // add 10%
2550 if (this.getNumericOption('yRangePad') !== null) {
2552 // Convert pixel padding to ratio
2553 ypad
= this.getNumericOption('yRangePad') / this.plotter_
.area
.h
;
2556 if (series
.length
=== 0) {
2557 // If no series are defined or visible then use a reasonable default
2558 axis
.extremeRange
= [0, 1];
2560 // Calculate the extremes of extremes.
2561 var minY
= Infinity
; // extremes[series[0]][0];
2562 var maxY
= -Infinity
; // extremes[series[0]][1];
2563 var extremeMinY
, extremeMaxY
;
2565 for (var j
= 0; j
< series
.length
; j
++) {
2566 // this skips invisible series
2567 if (!extremes
.hasOwnProperty(series
[j
])) continue;
2569 // Only use valid extremes to stop null data series' from corrupting the scale.
2570 extremeMinY
= extremes
[series
[j
]][0];
2571 if (extremeMinY
!== null) {
2572 minY
= Math
.min(extremeMinY
, minY
);
2574 extremeMaxY
= extremes
[series
[j
]][1];
2575 if (extremeMaxY
!== null) {
2576 maxY
= Math
.max(extremeMaxY
, maxY
);
2580 // Include zero if requested by the user.
2581 if (includeZero
&& !logscale
) {
2582 if (minY
> 0) minY
= 0;
2583 if (maxY
< 0) maxY
= 0;
2586 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2587 if (minY
== Infinity
) minY
= 0;
2588 if (maxY
== -Infinity
) maxY
= 1;
2591 // special case: if we have no sense of scale, center on the sole value.
2594 span
= Math
.abs(maxY
);
2596 // ... and if the sole value is zero, use range 0-1.
2602 var maxAxisY
, minAxisY
;
2605 maxAxisY
= maxY
+ ypad
* span
;
2608 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2609 maxAxisY
= maxY
* logpad
;
2610 minAxisY
= minY
/ logpad
;
2613 maxAxisY
= maxY
+ ypad
* span
;
2614 minAxisY
= minY
- ypad
* span
;
2616 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2617 // close to zero, but not if avoidMinZero is set.
2618 if (ypadCompat
&& !this.getBooleanOption("avoidMinZero")) {
2619 if (minAxisY
< 0 && minY
>= 0) minAxisY
= 0;
2620 if (maxAxisY
> 0 && maxY
<= 0) maxAxisY
= 0;
2623 axis
.extremeRange
= [minAxisY
, maxAxisY
];
2625 if (axis
.valueWindow
) {
2626 // This is only set if the user has zoomed on the y-axis. It is never set
2627 // by a user. It takes precedence over axis.valueRange because, if you set
2628 // valueRange, you'd still expect to be able to pan.
2629 axis
.computedValueRange
= [axis
.valueWindow
[0], axis
.valueWindow
[1]];
2630 } else if (axis
.valueRange
) {
2631 // This is a user-set value range for this axis.
2632 var y0
= isNullUndefinedOrNaN(axis
.valueRange
[0]) ? axis
.extremeRange
[0] : axis
.valueRange
[0];
2633 var y1
= isNullUndefinedOrNaN(axis
.valueRange
[1]) ? axis
.extremeRange
[1] : axis
.valueRange
[1];
2635 if (axis
.logscale
) {
2636 var logpad
= Math
.exp(Math
.log(span
) * ypad
);
2645 axis
.computedValueRange
= [y0
, y1
];
2647 axis
.computedValueRange
= axis
.extremeRange
;
2651 if (independentTicks
) {
2652 axis
.independentTicks
= independentTicks
;
2653 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2654 var ticker
= opts('ticker');
2655 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2656 axis
.computedValueRange
[1],
2657 this.plotter_
.area
.h
,
2660 // Define the first independent axis as primary axis.
2661 if (!p_axis
) p_axis
= axis
;
2664 if (p_axis
=== undefined
) {
2665 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2667 // Add ticks. By default, all axes inherit the tick positions of the
2668 // primary axis. However, if an axis is specifically marked as having
2669 // independent ticks, then that is permissible as well.
2670 for (var i
= 0; i
< numAxes
; i
++) {
2671 var axis
= this.axes_
[i
];
2673 if (!axis
.independentTicks
) {
2674 var opts
= this.optionsViewForAxis_('y' + (i
? '2' : ''));
2675 var ticker
= opts('ticker');
2676 var p_ticks
= p_axis
.ticks
;
2677 var p_scale
= p_axis
.computedValueRange
[1] - p_axis
.computedValueRange
[0];
2678 var scale
= axis
.computedValueRange
[1] - axis
.computedValueRange
[0];
2679 var tick_values
= [];
2680 for (var k
= 0; k
< p_ticks
.length
; k
++) {
2681 var y_frac
= (p_ticks
[k
].v
- p_axis
.computedValueRange
[0]) / p_scale
;
2682 var y_val
= axis
.computedValueRange
[0] + y_frac
* scale
;
2683 tick_values
.push(y_val
);
2686 axis
.ticks
= ticker(axis
.computedValueRange
[0],
2687 axis
.computedValueRange
[1],
2688 this.plotter_
.area
.h
,
2697 * Detects the type of the str (date or numeric) and sets the various
2698 * formatting attributes in this.attrs_ based on this type.
2699 * @param {string} str An x value.
2702 Dygraph
.prototype.detectTypeFromString_
= function(str
) {
2704 var dashPos
= str
.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2705 if ((dashPos
> 0 && (str
[dashPos
-1] != 'e' && str
[dashPos
-1] != 'E')) ||
2706 str
.indexOf('/') >= 0 ||
2707 isNaN(parseFloat(str
))) {
2709 } else if (str
.length
== 8 && str
> '19700101' && str
< '20371231') {
2710 // TODO(danvk): remove support for this format.
2714 this.setXAxisOptions_(isDate
);
2717 Dygraph
.prototype.setXAxisOptions_
= function(isDate
) {
2719 this.attrs_
.xValueParser
= utils
.dateParser
;
2720 this.attrs_
.axes
.x
.valueFormatter
= utils
.dateValueFormatter
;
2721 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.dateTicker
;
2722 this.attrs_
.axes
.x
.axisLabelFormatter
= utils
.dateAxisLabelFormatter
;
2724 /** @private (shut up, jsdoc!) */
2725 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2726 // TODO(danvk): use Dygraph.numberValueFormatter here?
2727 /** @private (shut up, jsdoc!) */
2728 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2729 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.numericTicks
;
2730 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2736 * Parses a string in a special csv format. We expect a csv file where each
2737 * line is a date point, and the first field in each line is the date string.
2738 * We also expect that all remaining fields represent series.
2739 * if the errorBars attribute is set, then interpret the fields as:
2740 * date, series1, stddev1, series2, stddev2, ...
2741 * @param {[Object]} data See above.
2743 * @return [Object] An array with one entry for each row. These entries
2744 * are an array of cells in that row. The first entry is the parsed x-value for
2745 * the row. The second, third, etc. are the y-values. These can take on one of
2746 * three forms, depending on the CSV and constructor parameters:
2748 * 2. [ value, stddev ]
2749 * 3. [ low value, center value, high value ]
2751 Dygraph
.prototype.parseCSV_
= function(data
) {
2753 var line_delimiter
= utils
.detectLineDelimiter(data
);
2754 var lines
= data
.split(line_delimiter
|| "\n");
2757 // Use the default delimiter or fall back to a tab if that makes sense.
2758 var delim
= this.getStringOption('delimiter');
2759 if (lines
[0].indexOf(delim
) == -1 && lines
[0].indexOf('\t') >= 0) {
2764 if (!('labels' in this.user_attrs_
)) {
2765 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2767 this.attrs_
.labels
= lines
[0].split(delim
); // NOTE: _not_ user_attrs_.
2768 this.attributes_
.reparseSeries();
2773 var defaultParserSet
= false; // attempt to auto-detect x value type
2774 var expectedCols
= this.attr_("labels").length
;
2775 var outOfOrder
= false;
2776 for (var i
= start
; i
< lines
.length
; i
++) {
2777 var line
= lines
[i
];
2779 if (line
.length
=== 0) continue; // skip blank lines
2780 if (line
[0] == '#') continue; // skip comment lines
2781 var inFields
= line
.split(delim
);
2782 if (inFields
.length
< 2) continue;
2785 if (!defaultParserSet
) {
2786 this.detectTypeFromString_(inFields
[0]);
2787 xParser
= this.getFunctionOption("xValueParser");
2788 defaultParserSet
= true;
2790 fields
[0] = xParser(inFields
[0], this);
2792 // If fractions are expected, parse the numbers as "A/B
"
2793 if (this.fractions_) {
2794 for (j = 1; j < inFields.length; j++) {
2795 // TODO(danvk): figure out an appropriate way to flag parse errors.
2796 vals = inFields[j].split("/");
2797 if (vals.length != 2) {
2798 console.error('Expected fractional "num
/den
" values in CSV data ' +
2799 "but found a value
'" + inFields[j] + "' on line
" +
2800 (1 + i) + " ('" + line + "') which is not of
this form
.");
2803 fields[j] = [utils.parseFloat_(vals[0], i, line),
2804 utils.parseFloat_(vals[1], i, line)];
2807 } else if (this.getBooleanOption("errorBars
")) {
2808 // If there are error bars, values are (value, stddev) pairs
2809 if (inFields.length % 2 != 1) {
2810 console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2811 'but line ' + (1 + i) + ' has an odd number of values (' +
2812 (inFields.length - 1) + "): '" + line + "'");
2814 for (j = 1; j < inFields.length; j += 2) {
2815 fields[(j + 1) / 2] = [utils.parseFloat_(inFields[j], i, line),
2816 utils.parseFloat_(inFields[j + 1], i, line)];
2818 } else if (this.getBooleanOption("customBars
")) {
2819 // Bars are a low;center;high tuple
2820 for (j = 1; j < inFields.length; j++) {
2821 var val = inFields[j];
2822 if (/^ *$/.test(val)) {
2823 fields[j] = [null, null, null];
2825 vals = val.split(";");
2826 if (vals.length == 3) {
2827 fields[j] = [ utils.parseFloat_(vals[0], i, line),
2828 utils.parseFloat_(vals[1], i, line),
2829 utils.parseFloat_(vals[2], i, line) ];
2831 console.warn('When using customBars, values must be either blank ' +
2832 'or "low
;center
;high
" tuples (got "' + val +
2833 '" on line ' + (1+i));
2838 // Values are just numbers
2839 for (j = 1; j < inFields.length; j++) {
2840 fields[j] = utils.parseFloat_(inFields[j], i, line);
2843 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2847 if (fields.length != expectedCols) {
2848 console.error("Number of columns
in line
" + i + " (" + fields.length +
2849 ") does not agree
with number of
labels (" + expectedCols +
2853 // If the user specified the 'labels' option and none of the cells of the
2854 // first row parsed correctly, then they probably double-specified the
2855 // labels. We go with the values set in the option, discard this row and
2856 // log a warning to the JS console.
2857 if (i === 0 && this.attr_('labels')) {
2858 var all_null = true;
2859 for (j = 0; all_null && j < fields.length; j++) {
2860 if (fields[j]) all_null = false;
2863 console.warn("The dygraphs
'labels' option is set
, but the first row
" +
2864 "of CSV
data ('" + line + "') appears to also contain
" +
2865 "labels
. Will drop the CSV labels and
use the option
" +
2874 console.warn("CSV is out of order
; order it correctly to speed loading
.");
2875 ret.sort(function(a,b) { return a[0] - b[0]; });
2882 * The user has provided their data as a pre-packaged JS array. If the x values
2883 * are numeric, this is the same as dygraphs' internal format. If the x values
2884 * are dates, we need to convert them from Date objects to ms since epoch.
2885 * @param {!Array} data
2886 * @return {Object} data with numeric x values.
2889 Dygraph.prototype.parseArray_ = function(data) {
2890 // Peek at the first x value to see if it's numeric.
2891 if (data.length === 0) {
2892 console.error("Can
't plot empty data set");
2895 if (data[0].length === 0) {
2896 console.error("Data set cannot contain an empty row");
2901 if (this.attr_("labels") === null) {
2902 console.warn("Using default labels. Set labels explicitly via 'labels
' " +
2903 "in the options parameter");
2904 this.attrs_.labels = [ "X" ];
2905 for (i = 1; i < data[0].length; i++) {
2906 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
2908 this.attributes_.reparseSeries();
2910 var num_labels = this.attr_("labels");
2911 if (num_labels.length != data[0].length) {
2912 console.error("Mismatch between number of labels (" + num_labels + ")" +
2913 " and number of columns in array (" + data[0].length + ")");
2918 if (utils.isDateLike(data[0][0])) {
2919 // Some intelligent defaults for a date x-axis.
2920 this.attrs_.axes.x.valueFormatter = utils.dateValueFormatter;
2921 this.attrs_.axes.x.ticker = DygraphTickers.dateTicker;
2922 this.attrs_.axes.x.axisLabelFormatter = utils.dateAxisLabelFormatter;
2924 // Assume they're all dates
.
2925 var parsedData
= utils
.clone(data
);
2926 for (i
= 0; i
< data
.length
; i
++) {
2927 if (parsedData
[i
].length
=== 0) {
2928 console
.error("Row " + (1 + i
) + " of data is empty");
2931 if (parsedData
[i
][0] === null ||
2932 typeof(parsedData
[i
][0].getTime
) != 'function' ||
2933 isNaN(parsedData
[i
][0].getTime())) {
2934 console
.error("x value in row " + (1 + i
) + " is not a Date");
2937 parsedData
[i
][0] = parsedData
[i
][0].getTime();
2941 // Some intelligent defaults for a numeric x-axis.
2942 /** @private (shut up, jsdoc!) */
2943 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2944 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.numericTicks
;
2945 this.attrs_
.axes
.x
.axisLabelFormatter
= utils
.numberAxisLabelFormatter
;
2951 * Parses a DataTable object from gviz.
2952 * The data is expected to have a first column that is either a date or a
2953 * number. All subsequent columns must be numbers. If there is a clear mismatch
2954 * between this.xValueParser_ and the type of the first column, it will be
2955 * fixed. Fills out rawData_.
2956 * @param {!google.visualization.DataTable} data See above.
2959 Dygraph
.prototype.parseDataTable_
= function(data
) {
2960 var shortTextForAnnotationNum
= function(num
) {
2961 // converts [0-9]+ [A-Z][a-z]*
2962 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
2963 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
2964 var shortText
= String
.fromCharCode(65 /* A */ + num
% 26);
2965 num
= Math
.floor(num
/ 26);
2967 shortText
= String
.fromCharCode(65 /* A */ + (num
- 1) % 26 ) + shortText
.toLowerCase();
2968 num
= Math
.floor((num
- 1) / 26);
2973 var cols
= data
.getNumberOfColumns();
2974 var rows
= data
.getNumberOfRows();
2976 var indepType
= data
.getColumnType(0);
2977 if (indepType
== 'date' || indepType
== 'datetime') {
2978 this.attrs_
.xValueParser
= utils
.dateParser
;
2979 this.attrs_
.axes
.x
.valueFormatter
= utils
.dateValueFormatter
;
2980 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.dateTicker
;
2981 this.attrs_
.axes
.x
.axisLabelFormatter
= utils
.dateAxisLabelFormatter
;
2982 } else if (indepType
== 'number') {
2983 this.attrs_
.xValueParser
= function(x
) { return parseFloat(x
); };
2984 this.attrs_
.axes
.x
.valueFormatter
= function(x
) { return x
; };
2985 this.attrs_
.axes
.x
.ticker
= DygraphTickers
.numericTicks
;
2986 this.attrs_
.axes
.x
.axisLabelFormatter
= this.attrs_
.axes
.x
.valueFormatter
;
2989 "only 'date', 'datetime' and 'number' types are supported " +
2990 "for column 1 of DataTable input (Got '" + indepType
+ "')");
2993 // Array of the column indices which contain data (and not annotations).
2995 var annotationCols
= {}; // data index -> [annotation cols]
2996 var hasAnnotations
= false;
2998 for (i
= 1; i
< cols
; i
++) {
2999 var type
= data
.getColumnType(i
);
3000 if (type
== 'number') {
3002 } else if (type
== 'string' && this.getBooleanOption('displayAnnotations')) {
3003 // This is OK -- it's an annotation column.
3004 var dataIdx
= colIdx
[colIdx
.length
- 1];
3005 if (!annotationCols
.hasOwnProperty(dataIdx
)) {
3006 annotationCols
[dataIdx
] = [i
];
3008 annotationCols
[dataIdx
].push(i
);
3010 hasAnnotations
= true;
3013 "Only 'number' is supported as a dependent type with Gviz." +
3014 " 'string' is only supported if displayAnnotations is true");
3018 // Read column labels
3019 // TODO(danvk): add support back for errorBars
3020 var labels
= [data
.getColumnLabel(0)];
3021 for (i
= 0; i
< colIdx
.length
; i
++) {
3022 labels
.push(data
.getColumnLabel(colIdx
[i
]));
3023 if (this.getBooleanOption("errorBars")) i
+= 1;
3025 this.attrs_
.labels
= labels
;
3026 cols
= labels
.length
;
3029 var outOfOrder
= false;
3030 var annotations
= [];
3031 for (i
= 0; i
< rows
; i
++) {
3033 if (typeof(data
.getValue(i
, 0)) === 'undefined' ||
3034 data
.getValue(i
, 0) === null) {
3035 console
.warn("Ignoring row " + i
+
3036 " of DataTable because of undefined or null first column.");
3040 if (indepType
== 'date' || indepType
== 'datetime') {
3041 row
.push(data
.getValue(i
, 0).getTime());
3043 row
.push(data
.getValue(i
, 0));
3045 if (!this.getBooleanOption("errorBars")) {
3046 for (j
= 0; j
< colIdx
.length
; j
++) {
3047 var col
= colIdx
[j
];
3048 row
.push(data
.getValue(i
, col
));
3049 if (hasAnnotations
&&
3050 annotationCols
.hasOwnProperty(col
) &&
3051 data
.getValue(i
, annotationCols
[col
][0]) !== null) {
3053 ann
.series
= data
.getColumnLabel(col
);
3055 ann
.shortText
= shortTextForAnnotationNum(annotations
.length
);
3057 for (var k
= 0; k
< annotationCols
[col
].length
; k
++) {
3058 if (k
) ann
.text
+= "\n";
3059 ann
.text
+= data
.getValue(i
, annotationCols
[col
][k
]);
3061 annotations
.push(ann
);
3065 // Strip out infinities, which give dygraphs problems later on.
3066 for (j
= 0; j
< row
.length
; j
++) {
3067 if (!isFinite(row
[j
])) row
[j
] = null;
3070 for (j
= 0; j
< cols
- 1; j
++) {
3071 row
.push([ data
.getValue(i
, 1 + 2 * j
), data
.getValue(i
, 2 + 2 * j
) ]);
3074 if (ret
.length
> 0 && row
[0] < ret
[ret
.length
- 1][0]) {
3081 console
.warn("DataTable is out of order; order it correctly to speed loading.");
3082 ret
.sort(function(a
,b
) { return a
[0] - b
[0]; });
3084 this.rawData_
= ret
;
3086 if (annotations
.length
> 0) {
3087 this.setAnnotations(annotations
, true);
3089 this.attributes_
.reparseSeries();
3093 * Signals to plugins that the chart data has updated.
3094 * This happens after the data has updated but before the chart has redrawn.
3096 Dygraph
.prototype.cascadeDataDidUpdateEvent_
= function() {
3097 // TODO(danvk): there are some issues checking xAxisRange() and using
3098 // toDomCoords from handlers of this event. The visible range should be set
3099 // when the chart is drawn, not derived from the data.
3100 this.cascadeEvents_('dataDidUpdate', {});
3104 * Get the CSV data. If it's in a function, call that function. If it's in a
3105 * file, do an XMLHttpRequest to get it.
3108 Dygraph
.prototype.start_
= function() {
3109 var data
= this.file_
;
3111 // Functions can return references of all other types.
3112 if (typeof data
== 'function') {
3116 if (utils
.isArrayLike(data
)) {
3117 this.rawData_
= this.parseArray_(data
);
3118 this.cascadeDataDidUpdateEvent_();
3120 } else if (typeof data
== 'object' &&
3121 typeof data
.getColumnRange
== 'function') {
3122 // must be a DataTable from gviz.
3123 this.parseDataTable_(data
);
3124 this.cascadeDataDidUpdateEvent_();
3126 } else if (typeof data
== 'string') {
3127 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3128 var line_delimiter
= utils
.detectLineDelimiter(data
);
3129 if (line_delimiter
) {
3130 this.loadedEvent_(data
);
3134 if (window
.XMLHttpRequest
) {
3135 // Firefox, Opera, IE7, and other browsers will use the native object
3136 req
= new XMLHttpRequest();
3138 // IE 5 and 6 will use the ActiveX control
3139 req
= new ActiveXObject("Microsoft.XMLHTTP");
3143 req
.onreadystatechange
= function () {
3144 if (req
.readyState
== 4) {
3145 if (req
.status
=== 200 || // Normal http
3146 req
.status
=== 0) { // Chrome w/ --allow
-file
-access
-from
-files
3147 caller
.loadedEvent_(req
.responseText
);
3152 req
.open("GET", data
, true);
3156 console
.error("Unknown data format: " + (typeof data
));
3161 * Changes various properties of the graph. These can include:
3163 * <li>file: changes the source data for the graph</li>
3164 * <li>errorBars: changes whether the data contains stddev</li>
3167 * There's a huge variety of options that can be passed to this method. For a
3168 * full list, see http://dygraphs.com/options.html.
3170 * @param {Object} input_attrs The new properties and values
3171 * @param {boolean} block_redraw Usually the chart is redrawn after every
3172 * call to updateOptions(). If you know better, you can pass true to
3173 * explicitly block the redraw. This can be useful for chaining
3174 * updateOptions() calls, avoiding the occasional infinite loop and
3175 * preventing redraws when it's not necessary (e.g. when updating a
3178 Dygraph
.prototype.updateOptions
= function(input_attrs
, block_redraw
) {
3179 if (typeof(block_redraw
) == 'undefined') block_redraw
= false;
3181 // copyUserAttrs_ drops the "file" parameter as a convenience to us.
3182 var file
= input_attrs
.file
;
3183 var attrs
= Dygraph
.copyUserAttrs_(input_attrs
);
3185 // TODO(danvk): this is a mess. Move these options into attr_.
3186 if ('rollPeriod' in attrs
) {
3187 this.rollPeriod_
= attrs
.rollPeriod
;
3189 if ('dateWindow' in attrs
) {
3190 this.dateWindow_
= attrs
.dateWindow
;
3191 if (!('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3192 this.zoomed_x_
= (attrs
.dateWindow
!== null);
3195 if ('valueRange' in attrs
&& !('isZoomedIgnoreProgrammaticZoom' in attrs
)) {
3196 this.zoomed_y_
= (attrs
.valueRange
!== null);
3199 // TODO(danvk): validate per-series options.
3204 // highlightCircleSize
3206 // Check if this set options will require new points.
3207 var requiresNewPoints
= utils
.isPixelChangingOptionList(this.attr_("labels"), attrs
);
3209 utils
.updateDeep(this.user_attrs_
, attrs
);
3211 this.attributes_
.reparseSeries();
3214 // This event indicates that the data is about to change, but hasn't yet.
3215 // TODO(danvk): support cancelation of the update via this event.
3216 this.cascadeEvents_('dataWillUpdate', {});
3219 if (!block_redraw
) this.start_();
3221 if (!block_redraw
) {
3222 if (requiresNewPoints
) {
3225 this.renderGraph_(false);
3232 * Make a copy of input attributes, removing file as a convenience.
3234 Dygraph
.copyUserAttrs_
= function(attrs
) {
3236 for (var k
in attrs
) {
3237 if (!attrs
.hasOwnProperty(k
)) continue;
3238 if (k
== 'file') continue;
3239 if (attrs
.hasOwnProperty(k
)) my_attrs
[k
] = attrs
[k
];
3245 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3246 * containing div (which has presumably changed size since the dygraph was
3247 * instantiated. If the width/height are specified, the div will be resized.
3249 * This is far more efficient than destroying and re-instantiating a
3250 * Dygraph, since it doesn't have to reparse the underlying data.
3252 * @param {number} width Width (in pixels)
3253 * @param {number} height Height (in pixels)
3255 Dygraph
.prototype.resize
= function(width
, height
) {
3256 if (this.resize_lock
) {
3259 this.resize_lock
= true;
3261 if ((width
=== null) != (height
=== null)) {
3262 console
.warn("Dygraph.resize() should be called with zero parameters or " +
3263 "two non-NULL parameters. Pretending it was zero.");
3264 width
= height
= null;
3267 var old_width
= this.width_
;
3268 var old_height
= this.height_
;
3271 this.maindiv_
.style
.width
= width
+ "px";
3272 this.maindiv_
.style
.height
= height
+ "px";
3273 this.width_
= width
;
3274 this.height_
= height
;
3276 this.width_
= this.maindiv_
.clientWidth
;
3277 this.height_
= this.maindiv_
.clientHeight
;
3280 if (old_width
!= this.width_
|| old_height
!= this.height_
) {
3281 // Resizing a canvas erases it, even when the size doesn't change, so
3282 // any resize needs to be followed by a redraw.
3283 this.resizeElements_();
3287 this.resize_lock
= false;
3291 * Adjusts the number of points in the rolling average. Updates the graph to
3292 * reflect the new averaging period.
3293 * @param {number} length Number of points over which to average the data.
3295 Dygraph
.prototype.adjustRoll
= function(length
) {
3296 this.rollPeriod_
= length
;
3301 * Returns a boolean array of visibility statuses.
3303 Dygraph
.prototype.visibility
= function() {
3304 // Do lazy-initialization, so that this happens after we know the number of
3306 if (!this.getOption("visibility")) {
3307 this.attrs_
.visibility
= [];
3309 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs
.
3310 while (this.getOption("visibility").length
< this.numColumns() - 1) {
3311 this.attrs_
.visibility
.push(true);
3313 return this.getOption("visibility");
3317 * Changes the visibility of one or more series.
3319 * @param {number|number[]|object} num the series index or an array of series indices
3320 * or a boolean array of visibility states by index
3321 * or an object mapping series numbers, as keys, to
3322 * visibility state (boolean values)
3323 * @param {boolean} value the visibility state expressed as a boolean
3325 Dygraph
.prototype.setVisibility
= function(num
, value
) {
3326 var x
= this.visibility();
3327 var numIsObject
= false;
3329 if (!Array
.isArray(num
)) {
3330 if (num
!== null && typeof num
=== 'object') {
3338 for (var i
in num
) {
3339 if (num
.hasOwnProperty(i
)) {
3340 if (i
< 0 || i
>= x
.length
) {
3341 console
.warn("Invalid series number in setVisibility: " + i
);
3348 for (var i
= 0; i
< num
.length
; i
++) {
3349 if (typeof num
[i
] === 'boolean') {
3350 if (i
>= x
.length
) {
3351 console
.warn("Invalid series number in setVisibility: " + i
);
3356 if (num
[i
] < 0 || num
[i
] >= x
.length
) {
3357 console
.warn("Invalid series number in setVisibility: " + num
[i
]);
3369 * How large of an area will the dygraph render itself in?
3370 * This is used for testing.
3371 * @return A {width: w, height: h} object.
3374 Dygraph
.prototype.size
= function() {
3375 return { width
: this.width_
, height
: this.height_
};
3379 * Update the list of annotations and redraw the chart.
3380 * See dygraphs.com/annotations.html for more info on how to use annotations.
3381 * @param ann {Array} An array of annotation objects.
3382 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3384 Dygraph
.prototype.setAnnotations
= function(ann
, suppressDraw
) {
3385 // Only add the annotation CSS rule once we know it will be used.
3386 Dygraph
.addAnnotationRule();
3387 this.annotations_
= ann
;
3388 if (!this.layout_
) {
3389 console
.warn("Tried to setAnnotations before dygraph was ready. " +
3390 "Try setting them in a ready() block. See " +
3391 "dygraphs.com/tests/annotation.html");
3395 this.layout_
.setAnnotations(this.annotations_
);
3396 if (!suppressDraw
) {
3402 * Return the list of annotations.
3404 Dygraph
.prototype.annotations
= function() {
3405 return this.annotations_
;
3409 * Get the list of label names for this graph. The first column is the
3410 * x-axis, so the data series names start at index 1.
3412 * Returns null when labels have not yet been defined.
3414 Dygraph
.prototype.getLabels
= function() {
3415 var labels
= this.attr_("labels");
3416 return labels
? labels
.slice() : null;
3420 * Get the index of a series (column) given its name. The first column is the
3421 * x-axis, so the data series start with index 1.
3423 Dygraph
.prototype.indexFromSetName
= function(name
) {
3424 return this.setIndexByName_
[name
];
3428 * Find the row number corresponding to the given x-value.
3429 * Returns null if there is no such x-value in the data.
3430 * If there are multiple rows with the same x-value, this will return the
3432 * @param {number} xVal The x-value to look for (e.g. millis since epoch).
3433 * @return {?number} The row number, which you can pass to getValue(), or null.
3435 Dygraph
.prototype.getRowForX
= function(xVal
) {
3437 high
= this.numRows() - 1;
3439 while (low
<= high
) {
3440 var idx
= (high
+ low
) >> 1;
3441 var x
= this.getValue(idx
, 0);
3444 } else if (x
> xVal
) {
3446 } else if (low
!= idx
) { // equal, but there may be an earlier match.
3457 * Trigger a callback when the dygraph has drawn itself and is ready to be
3458 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3459 * data (i.e. a URL is passed as the data source) and the chart is drawn
3460 * asynchronously. If the chart has already drawn, the callback will fire
3463 * This is a good place to call setAnnotation().
3465 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3468 Dygraph
.prototype.ready
= function(callback
) {
3469 if (this.is_initial_draw_
) {
3470 this.readyFns_
.push(callback
);
3472 callback
.call(this, this);
3478 * Adds a default style for the annotation CSS classes to the document. This is
3479 * only executed when annotations are actually used. It is designed to only be
3480 * called once -- all calls after the first will return immediately.
3482 Dygraph
.addAnnotationRule
= function() {
3483 // TODO(danvk): move this function into plugins/annotations.js
?
3484 if (Dygraph
.addedAnnotationCSS
) return;
3486 var rule
= "border: 1px solid black; " +
3487 "background-color: white; " +
3488 "text-align: center;";
3490 var styleSheetElement
= document
.createElement("style");
3491 styleSheetElement
.type
= "text/css";
3492 document
.getElementsByTagName("head")[0].appendChild(styleSheetElement
);
3494 // Find the first style sheet that we can access.
3495 // We may not add a rule to a style sheet from another domain for security
3496 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3497 // adds its own style sheets from google.com.
3498 for (var i
= 0; i
< document
.styleSheets
.length
; i
++) {
3499 if (document
.styleSheets
[i
].disabled
) continue;
3500 var mysheet
= document
.styleSheets
[i
];
3502 if (mysheet
.insertRule
) { // Firefox
3503 var idx
= mysheet
.cssRules
? mysheet
.cssRules
.length
: 0;
3504 mysheet
.insertRule(".dygraphDefaultAnnotation { " + rule
+ " }", idx
);
3505 } else if (mysheet
.addRule
) { // IE
3506 mysheet
.addRule(".dygraphDefaultAnnotation", rule
);
3508 Dygraph
.addedAnnotationCSS
= true;
3511 // Was likely a security exception.
3515 console
.warn("Unable to add default annotation CSS rule; display may be off.");
3519 * Add an event handler. This event handler is kept until the graph is
3520 * destroyed with a call to graph.destroy().
3522 * @param {!Node} elem The element to add the event to.
3523 * @param {string} type The type of the event, e.g. 'click' or 'mousemove'.
3524 * @param {function(Event):(boolean|undefined)} fn The function to call
3525 * on the event. The function takes one parameter: the event object.
3528 Dygraph
.prototype.addAndTrackEvent
= function(elem
, type
, fn
) {
3529 utils
.addEvent(elem
, type
, fn
);
3530 this.registeredEvents_
.push({elem
, type
, fn
});
3533 Dygraph
.prototype.removeTrackedEvents_
= function() {
3534 if (this.registeredEvents_
) {
3535 for (var idx
= 0; idx
< this.registeredEvents_
.length
; idx
++) {
3536 var reg
= this.registeredEvents_
[idx
];
3537 utils
.removeEvent(reg
.elem
, reg
.type
, reg
.fn
);
3541 this.registeredEvents_
= [];
3545 // Installed plugins, in order of precedence (most-general to most-specific).
3549 RangeSelectorPlugin
, // Has to be before ChartLabels so that its callbacks are called after ChartLabels' callbacks.
3555 // There are many symbols which have historically been available through the
3556 // Dygraph class. These are exported here for backwards compatibility.
3557 Dygraph
.GVizChart
= GVizChart
;
3558 Dygraph
.DASHED_LINE
= utils
.DASHED_LINE
;
3559 Dygraph
.DOT_DASH_LINE
= utils
.DOT_DASH_LINE
;
3560 Dygraph
.dateAxisLabelFormatter
= utils
.dateAxisLabelFormatter
;
3561 Dygraph
.toRGB_
= utils
.toRGB_
;
3562 Dygraph
.findPos
= utils
.findPos
;
3563 Dygraph
.pageX
= utils
.pageX
;
3564 Dygraph
.pageY
= utils
.pageY
;
3565 Dygraph
.dateString_
= utils
.dateString_
;
3566 Dygraph
.defaultInteractionModel
= DygraphInteraction
.defaultModel
;
3567 Dygraph
.nonInteractiveModel
= Dygraph
.nonInteractiveModel_
= DygraphInteraction
.nonInteractiveModel_
;
3568 Dygraph
.Circles
= utils
.Circles
;
3571 Legend
: LegendPlugin
,
3573 Annotations
: AnnotationsPlugin
,
3574 ChartLabels
: ChartLabelsPlugin
,
3576 RangeSelector
: RangeSelectorPlugin
3579 Dygraph
.DataHandlers
= {
3583 DefaultFractionHandler
,
3585 FractionsBarsHandler
3588 Dygraph
.startPan
= DygraphInteraction
.startPan
;
3589 Dygraph
.startZoom
= DygraphInteraction
.startZoom
;
3590 Dygraph
.movePan
= DygraphInteraction
.movePan
;
3591 Dygraph
.moveZoom
= DygraphInteraction
.moveZoom
;
3592 Dygraph
.endPan
= DygraphInteraction
.endPan
;
3593 Dygraph
.endZoom
= DygraphInteraction
.endZoom
;
3595 Dygraph
.numericLinearTicks
= DygraphTickers
.numericLinearTicks
;
3596 Dygraph
.numericTicks
= DygraphTickers
.numericTicks
;
3597 Dygraph
.dateTicker
= DygraphTickers
.dateTicker
;
3598 Dygraph
.Granularity
= DygraphTickers
.Granularity
;
3599 Dygraph
.getDateAxis
= DygraphTickers
.getDateAxis
;
3600 Dygraph
.floatFormat
= utils
.floatFormat
;
3602 export default Dygraph
;