1 /**
  2  * @license
  3  * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
  4  * MIT-licensed (http://opensource.org/licenses/MIT)
  5  */
  6 
  7 /**
  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)
 13 
 14   Usage:
 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
 19                  { }); // options
 20    </script>
 21 
 22  The CSV file is of the form
 23 
 24    Date,SeriesA,SeriesB,SeriesC
 25    YYYYMMDD,A1,B1,C1
 26    YYYYMMDD,A2,B2,C2
 27 
 28  If the 'errorBars' option is set in the constructor, the input should be of
 29  the form
 30    Date,SeriesA,SeriesB,...
 31    YYYYMMDD,A1,sigmaA1,B1,sigmaB1,...
 32    YYYYMMDD,A2,sigmaA2,B2,sigmaB2,...
 33 
 34  If the 'fractions' option is set, the input should be of the form:
 35 
 36    Date,SeriesA,SeriesB,...
 37    YYYYMMDD,A1/B1,A2/B2,...
 38    YYYYMMDD,A1/B1,A2/B2,...
 39 
 40  And error bars will be calculated automatically using a binomial distribution.
 41 
 42  For further documentation and examples, see http://dygraphs.com/
 43  */
 44 
 45 import DygraphLayout from './dygraph-layout';
 46 import DygraphCanvasRenderer from './dygraph-canvas';
 47 import DygraphOptions from './dygraph-options';
 48 import DygraphInteraction from './dygraph-interaction-model';
 49 import * as DygraphTickers from './dygraph-tickers';
 50 import * as utils from './dygraph-utils';
 51 import DEFAULT_ATTRS from './dygraph-default-attrs';
 52 import OPTIONS_REFERENCE from './dygraph-options-reference';
 53 import IFrameTarp from './iframe-tarp';
 54 
 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';
 61 
 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';
 68 
 69 import GVizChart from './dygraph-gviz';
 70 
 71 "use strict";
 72 
 73 /**
 74  * Creates an interactive, zoomable chart.
 75  *
 76  * @constructor
 77  * @param {div | String} div A div or the id of a div into which to construct
 78  * the chart.
 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.
 86  */
 87 var Dygraph = function(div, data, opts) {
 88   this.__init__(div, data, opts);
 89 };
 90 
 91 Dygraph.NAME = "Dygraph";
 92 Dygraph.VERSION = "2.1.0";
 93 
 94 // Various default values
 95 Dygraph.DEFAULT_ROLL_PERIOD = 1;
 96 Dygraph.DEFAULT_WIDTH = 480;
 97 Dygraph.DEFAULT_HEIGHT = 320;
 98 
 99 // For max 60 Hz. animation:
100 Dygraph.ANIMATION_STEPS = 12;
101 Dygraph.ANIMATION_DURATION = 200;
102 
103 /**
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)
109  *
110  * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
111  * This causes all the lines to be drawn over all the fills/error bars.
112  */
113 Dygraph.Plotters = DygraphCanvasRenderer._Plotters;
114 
115 
116 // Used for initializing annotation CSS rules only once.
117 Dygraph.addedAnnotationCSS = false;
118 
119 /**
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.
122  * on the parameters.
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
126  * @private
127  */
128 Dygraph.prototype.__init__ = function(div, file, attrs) {
129   this.is_initial_draw_ = true;
130   this.readyFns_ = [];
131 
132   // Support two-argument constructor
133   if (attrs === null || attrs === undefined) { attrs = {}; }
134 
135   attrs = Dygraph.copyUserAttrs_(attrs);
136 
137   if (typeof(div) == 'string') {
138     div = document.getElementById(div);
139   }
140 
141   if (!div) {
142     throw new Error('Constructing dygraph with a non-existent div!');
143   }
144 
145   // Copy the important bits into the object
146   // TODO(danvk): most of these should just stay in the attrs_ dictionary.
147   this.maindiv_ = div;
148   this.file_ = file;
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;
153 
154   this.annotations_ = [];
155 
156   // Clear the div. This ensure that, if multiple dygraphs are passed the same
157   // div, then only one will be drawn.
158   div.innerHTML = "";
159 
160   // For historical reasons, the 'width' and 'height' options trump all CSS
161   // rules _except_ for an explicit 'width' or 'height' on the div.
162   // As an added convenience, if the div has zero height (like <div></div> does
163   // without any styles), then we use a default height/width.
164   if (div.style.width === '' && attrs.width) {
165     div.style.width = attrs.width + "px";
166   }
167   if (div.style.height === '' && attrs.height) {
168     div.style.height = attrs.height + "px";
169   }
170   if (div.style.height === '' && div.clientHeight === 0) {
171     div.style.height = Dygraph.DEFAULT_HEIGHT + "px";
172     if (div.style.width === '') {
173       div.style.width = Dygraph.DEFAULT_WIDTH + "px";
174     }
175   }
176   // These will be zero if the dygraph's div is hidden. In that case,
177   // use the user-specified attributes if present. If not, use zero
178   // and assume the user will call resize to fix things later.
179   this.width_ = div.clientWidth || attrs.width || 0;
180   this.height_ = div.clientHeight || attrs.height || 0;
181 
182   // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_.
183   if (attrs.stackedGraph) {
184     attrs.fillGraph = true;
185     // TODO(nikhilk): Add any other stackedGraph checks here.
186   }
187 
188   // DEPRECATION WARNING: All option processing should be moved from
189   // attrs_ and user_attrs_ to options_, which holds all this information.
190   //
191   // Dygraphs has many options, some of which interact with one another.
192   // To keep track of everything, we maintain two sets of options:
193   //
194   //  this.user_attrs_   only options explicitly set by the user.
195   //  this.attrs_        defaults, options derived from user_attrs_, data.
196   //
197   // Options are then accessed this.attr_('attr'), which first looks at
198   // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent
199   // defaults without overriding behavior that the user specifically asks for.
200   this.user_attrs_ = {};
201   utils.update(this.user_attrs_, attrs);
202 
203   // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified.
204   this.attrs_ = {};
205   utils.updateDeep(this.attrs_, DEFAULT_ATTRS);
206 
207   this.boundaryIds_ = [];
208   this.setIndexByName_ = {};
209   this.datasetIndex_ = [];
210 
211   this.registeredEvents_ = [];
212   this.eventListeners_ = {};
213 
214   this.attributes_ = new DygraphOptions(this);
215 
216   // Create the containing DIV and other interactive elements
217   this.createInterface_();
218 
219   // Activate plugins.
220   this.plugins_ = [];
221   var plugins = Dygraph.PLUGINS.concat(this.getOption('plugins'));
222   for (var i = 0; i < plugins.length; i++) {
223     // the plugins option may contain either plugin classes or instances.
224     // Plugin instances contain an activate method.
225     var Plugin = plugins[i];  // either a constructor or an instance.
226     var pluginInstance;
227     if (typeof(Plugin.activate) !== 'undefined') {
228       pluginInstance = Plugin;
229     } else {
230       pluginInstance = new Plugin();
231     }
232 
233     var pluginDict = {
234       plugin: pluginInstance,
235       events: {},
236       options: {},
237       pluginOptions: {}
238     };
239 
240     var handlers = pluginInstance.activate(this);
241     for (var eventName in handlers) {
242       if (!handlers.hasOwnProperty(eventName)) continue;
243       // TODO(danvk): validate eventName.
244       pluginDict.events[eventName] = handlers[eventName];
245     }
246 
247     this.plugins_.push(pluginDict);
248   }
249 
250   // At this point, plugins can no longer register event handlers.
251   // Construct a map from event -> ordered list of [callback, plugin].
252   for (var i = 0; i < this.plugins_.length; i++) {
253     var plugin_dict = this.plugins_[i];
254     for (var eventName in plugin_dict.events) {
255       if (!plugin_dict.events.hasOwnProperty(eventName)) continue;
256       var callback = plugin_dict.events[eventName];
257 
258       var pair = [plugin_dict.plugin, callback];
259       if (!(eventName in this.eventListeners_)) {
260         this.eventListeners_[eventName] = [pair];
261       } else {
262         this.eventListeners_[eventName].push(pair);
263       }
264     }
265   }
266 
267   this.createDragInterface_();
268 
269   this.start_();
270 };
271 
272 /**
273  * Triggers a cascade of events to the various plugins which are interested in them.
274  * Returns true if the "default behavior" should be prevented, i.e. if one
275  * of the event listeners called event.preventDefault().
276  * @private
277  */
278 Dygraph.prototype.cascadeEvents_ = function(name, extra_props) {
279   if (!(name in this.eventListeners_)) return false;
280 
281   // QUESTION: can we use objects & prototypes to speed this up?
282   var e = {
283     dygraph: this,
284     cancelable: false,
285     defaultPrevented: false,
286     preventDefault: function() {
287       if (!e.cancelable) throw "Cannot call preventDefault on non-cancelable event.";
288       e.defaultPrevented = true;
289     },
290     propagationStopped: false,
291     stopPropagation: function() {
292       e.propagationStopped = true;
293     }
294   };
295   utils.update(e, extra_props);
296 
297   var callback_plugin_pairs = this.eventListeners_[name];
298   if (callback_plugin_pairs) {
299     for (var i = callback_plugin_pairs.length - 1; i >= 0; i--) {
300       var plugin = callback_plugin_pairs[i][0];
301       var callback = callback_plugin_pairs[i][1];
302       callback.call(plugin, e);
303       if (e.propagationStopped) break;
304     }
305   }
306   return e.defaultPrevented;
307 };
308 
309 /**
310  * Fetch a plugin instance of a particular class. Only for testing.
311  * @private
312  * @param {!Class} type The type of the plugin.
313  * @return {Object} Instance of the plugin, or null if there is none.
314  */
315 Dygraph.prototype.getPluginInstance_ = function(type) {
316   for (var i = 0; i < this.plugins_.length; i++) {
317     var p = this.plugins_[i];
318     if (p.plugin instanceof type) {
319       return p.plugin;
320     }
321   }
322   return null;
323 };
324 
325 /**
326  * Returns the zoomed status of the chart for one or both axes.
327  *
328  * Axis is an optional parameter. Can be set to 'x' or 'y'.
329  *
330  * The zoomed status for an axis is set whenever a user zooms using the mouse
331  * or when the dateWindow or valueRange are updated. Double-clicking or calling
332  * resetZoom() resets the zoom status for the chart.
333  */
334 Dygraph.prototype.isZoomed = function(axis) {
335   const isZoomedX = !!this.dateWindow_;
336   if (axis === 'x') return isZoomedX;
337 
338   const isZoomedY = this.axes_.map(axis => !!axis.valueRange).indexOf(true) >= 0;
339   if (axis === null || axis === undefined) {
340     return isZoomedX || isZoomedY;
341   }
342   if (axis === 'y') return isZoomedY;
343 
344   throw new Error(`axis parameter is [${axis}] must be null, 'x' or 'y'.`);
345 };
346 
347 /**
348  * Returns information about the Dygraph object, including its containing ID.
349  */
350 Dygraph.prototype.toString = function() {
351   var maindiv = this.maindiv_;
352   var id = (maindiv && maindiv.id) ? maindiv.id : maindiv;
353   return "[Dygraph " + id + "]";
354 };
355 
356 /**
357  * @private
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
360  * per-series value.
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.
366  */
367 Dygraph.prototype.attr_ = function(name, seriesName) {
368   // For "production" code, this gets removed by uglifyjs.
369   if (typeof(process) !== 'undefined') {
370     if (process.env.NODE_ENV != 'production') {
371       if (typeof(OPTIONS_REFERENCE) === 'undefined') {
372         console.error('Must include options reference JS for testing');
373       } else if (!OPTIONS_REFERENCE.hasOwnProperty(name)) {
374         console.error('Dygraphs is using property ' + name + ', which has no ' +
375                       'entry in the Dygraphs.OPTIONS_REFERENCE listing.');
376         // Only log this error once.
377         OPTIONS_REFERENCE[name] = true;
378       }
379     }
380   }
381   return seriesName ? this.attributes_.getForSeries(name, seriesName) : this.attributes_.get(name);
382 };
383 
384 /**
385  * Returns the current value for an option, as set in the constructor or via
386  * updateOptions. You may pass in an (optional) series name to get per-series
387  * values for the option.
388  *
389  * All values returned by this method should be considered immutable. If you
390  * modify them, there is no guarantee that the changes will be honored or that
391  * dygraphs will remain in a consistent state. If you want to modify an option,
392  * use updateOptions() instead.
393  *
394  * @param {string} name The name of the option (e.g. 'strokeWidth')
395  * @param {string=} opt_seriesName Series name to get per-series values.
396  * @return {*} The value of the option.
397  */
398 Dygraph.prototype.getOption = function(name, opt_seriesName) {
399   return this.attr_(name, opt_seriesName);
400 };
401 
402 /**
403  * Like getOption(), but specifically returns a number.
404  * This is a convenience function for working with the Closure Compiler.
405  * @param {string} name The name of the option (e.g. 'strokeWidth')
406  * @param {string=} opt_seriesName Series name to get per-series values.
407  * @return {number} The value of the option.
408  * @private
409  */
410 Dygraph.prototype.getNumericOption = function(name, opt_seriesName) {
411   return /** @type{number} */(this.getOption(name, opt_seriesName));
412 };
413 
414 /**
415  * Like getOption(), but specifically returns a string.
416  * This is a convenience function for working with the Closure Compiler.
417  * @param {string} name The name of the option (e.g. 'strokeWidth')
418  * @param {string=} opt_seriesName Series name to get per-series values.
419  * @return {string} The value of the option.
420  * @private
421  */
422 Dygraph.prototype.getStringOption = function(name, opt_seriesName) {
423   return /** @type{string} */(this.getOption(name, opt_seriesName));
424 };
425 
426 /**
427  * Like getOption(), but specifically returns a boolean.
428  * This is a convenience function for working with the Closure Compiler.
429  * @param {string} name The name of the option (e.g. 'strokeWidth')
430  * @param {string=} opt_seriesName Series name to get per-series values.
431  * @return {boolean} The value of the option.
432  * @private
433  */
434 Dygraph.prototype.getBooleanOption = function(name, opt_seriesName) {
435   return /** @type{boolean} */(this.getOption(name, opt_seriesName));
436 };
437 
438 /**
439  * Like getOption(), but specifically returns a function.
440  * This is a convenience function for working with the Closure Compiler.
441  * @param {string} name The name of the option (e.g. 'strokeWidth')
442  * @param {string=} opt_seriesName Series name to get per-series values.
443  * @return {function(...)} The value of the option.
444  * @private
445  */
446 Dygraph.prototype.getFunctionOption = function(name, opt_seriesName) {
447   return /** @type{function(...)} */(this.getOption(name, opt_seriesName));
448 };
449 
450 Dygraph.prototype.getOptionForAxis = function(name, axis) {
451   return this.attributes_.getForAxis(name, axis);
452 };
453 
454 /**
455  * @private
456  * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2')
457  * @return { ... } A function mapping string -> option value
458  */
459 Dygraph.prototype.optionsViewForAxis_ = function(axis) {
460   var self = this;
461   return function(opt) {
462     var axis_opts = self.user_attrs_.axes;
463     if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) {
464       return axis_opts[axis][opt];
465     }
466 
467     // I don't like that this is in a second spot.
468     if (axis === 'x' && opt === 'logscale') {
469       // return the default value.
470       // TODO(konigsberg): pull the default from a global default.
471       return false;
472     }
473 
474     // user-specified attributes always trump defaults, even if they're less
475     // specific.
476     if (typeof(self.user_attrs_[opt]) != 'undefined') {
477       return self.user_attrs_[opt];
478     }
479 
480     axis_opts = self.attrs_.axes;
481     if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) {
482       return axis_opts[axis][opt];
483     }
484     // check old-style axis options
485     // TODO(danvk): add a deprecation warning if either of these match.
486     if (axis == 'y' && self.axes_[0].hasOwnProperty(opt)) {
487       return self.axes_[0][opt];
488     } else if (axis == 'y2' && self.axes_[1].hasOwnProperty(opt)) {
489       return self.axes_[1][opt];
490     }
491     return self.attr_(opt);
492   };
493 };
494 
495 /**
496  * Returns the current rolling period, as set by the user or an option.
497  * @return {number} The number of points in the rolling window
498  */
499 Dygraph.prototype.rollPeriod = function() {
500   return this.rollPeriod_;
501 };
502 
503 /**
504  * Returns the currently-visible x-range. This can be affected by zooming,
505  * panning or a call to updateOptions.
506  * Returns a two-element array: [left, right].
507  * If the Dygraph has dates on the x-axis, these will be millis since epoch.
508  */
509 Dygraph.prototype.xAxisRange = function() {
510   return this.dateWindow_ ? this.dateWindow_ : this.xAxisExtremes();
511 };
512 
513 /**
514  * Returns the lower- and upper-bound x-axis values of the data set.
515  */
516 Dygraph.prototype.xAxisExtremes = function() {
517   var pad = this.getNumericOption('xRangePad') / this.plotter_.area.w;
518   if (this.numRows() === 0) {
519     return [0 - pad, 1 + pad];
520   }
521   var left = this.rawData_[0][0];
522   var right = this.rawData_[this.rawData_.length - 1][0];
523   if (pad) {
524     // Must keep this in sync with dygraph-layout _evaluateLimits()
525     var range = right - left;
526     left -= range * pad;
527     right += range * pad;
528   }
529   return [left, right];
530 };
531 
532 /**
533  * Returns the lower- and upper-bound y-axis values for each axis. These are
534  * the ranges you'll get if you double-click to zoom out or call resetZoom().
535  * The return value is an array of [low, high] tuples, one for each y-axis.
536  */
537 Dygraph.prototype.yAxisExtremes = function() {
538   // TODO(danvk): this is pretty inefficient
539   const packed = this.gatherDatasets_(this.rolledSeries_, null);
540   const { extremes } = packed;
541   const saveAxes = this.axes_;
542   this.computeYAxisRanges_(extremes);
543   const newAxes = this.axes_;
544   this.axes_ = saveAxes;
545   return newAxes.map(axis => axis.extremeRange);
546 }
547 
548 /**
549  * Returns the currently-visible y-range for an axis. This can be affected by
550  * zooming, panning or a call to updateOptions. Axis indices are zero-based. If
551  * called with no arguments, returns the range of the first axis.
552  * Returns a two-element array: [bottom, top].
553  */
554 Dygraph.prototype.yAxisRange = function(idx) {
555   if (typeof(idx) == "undefined") idx = 0;
556   if (idx < 0 || idx >= this.axes_.length) {
557     return null;
558   }
559   var axis = this.axes_[idx];
560   return [ axis.computedValueRange[0], axis.computedValueRange[1] ];
561 };
562 
563 /**
564  * Returns the currently-visible y-ranges for each axis. This can be affected by
565  * zooming, panning, calls to updateOptions, etc.
566  * Returns an array of [bottom, top] pairs, one for each y-axis.
567  */
568 Dygraph.prototype.yAxisRanges = function() {
569   var ret = [];
570   for (var i = 0; i < this.axes_.length; i++) {
571     ret.push(this.yAxisRange(i));
572   }
573   return ret;
574 };
575 
576 // TODO(danvk): use these functions throughout dygraphs.
577 /**
578  * Convert from data coordinates to canvas/div X/Y coordinates.
579  * If specified, do this conversion for the coordinate system of a particular
580  * axis. Uses the first axis by default.
581  * Returns a two-element array: [X, Y]
582  *
583  * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord
584  * instead of toDomCoords(null, y, axis).
585  */
586 Dygraph.prototype.toDomCoords = function(x, y, axis) {
587   return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ];
588 };
589 
590 /**
591  * Convert from data x coordinates to canvas/div X coordinate.
592  * If specified, do this conversion for the coordinate system of a particular
593  * axis.
594  * Returns a single value or null if x is null.
595  */
596 Dygraph.prototype.toDomXCoord = function(x) {
597   if (x === null) {
598     return null;
599   }
600 
601   var area = this.plotter_.area;
602   var xRange = this.xAxisRange();
603   return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w;
604 };
605 
606 /**
607  * Convert from data x coordinates to canvas/div Y coordinate and optional
608  * axis. Uses the first axis by default.
609  *
610  * returns a single value or null if y is null.
611  */
612 Dygraph.prototype.toDomYCoord = function(y, axis) {
613   var pct = this.toPercentYCoord(y, axis);
614 
615   if (pct === null) {
616     return null;
617   }
618   var area = this.plotter_.area;
619   return area.y + pct * area.h;
620 };
621 
622 /**
623  * Convert from canvas/div coords to data coordinates.
624  * If specified, do this conversion for the coordinate system of a particular
625  * axis. Uses the first axis by default.
626  * Returns a two-element array: [X, Y].
627  *
628  * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord
629  * instead of toDataCoords(null, y, axis).
630  */
631 Dygraph.prototype.toDataCoords = function(x, y, axis) {
632   return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ];
633 };
634 
635 /**
636  * Convert from canvas/div x coordinate to data coordinate.
637  *
638  * If x is null, this returns null.
639  */
640 Dygraph.prototype.toDataXCoord = function(x) {
641   if (x === null) {
642     return null;
643   }
644 
645   var area = this.plotter_.area;
646   var xRange = this.xAxisRange();
647 
648   if (!this.attributes_.getForAxis("logscale", 'x')) {
649     return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]);
650   } else {
651     var pct = (x - area.x) / area.w;
652     return utils.logRangeFraction(xRange[0], xRange[1], pct);
653   }
654 };
655 
656 /**
657  * Convert from canvas/div y coord to value.
658  *
659  * If y is null, this returns null.
660  * if axis is null, this uses the first axis.
661  */
662 Dygraph.prototype.toDataYCoord = function(y, axis) {
663   if (y === null) {
664     return null;
665   }
666 
667   var area = this.plotter_.area;
668   var yRange = this.yAxisRange(axis);
669 
670   if (typeof(axis) == "undefined") axis = 0;
671   if (!this.attributes_.getForAxis("logscale", axis)) {
672     return yRange[0] + (area.y + area.h - y) / area.h * (yRange[1] - yRange[0]);
673   } else {
674     // Computing the inverse of toDomCoord.
675     var pct = (y - area.y) / area.h;
676     // Note reversed yRange, y1 is on top with pct==0.
677     return utils.logRangeFraction(yRange[1], yRange[0], pct);
678   }
679 };
680 
681 /**
682  * Converts a y for an axis to a percentage from the top to the
683  * bottom of the drawing area.
684  *
685  * If the coordinate represents a value visible on the canvas, then
686  * the value will be between 0 and 1, where 0 is the top of the canvas.
687  * However, this method will return values outside the range, as
688  * values can fall outside the canvas.
689  *
690  * If y is null, this returns null.
691  * if axis is null, this uses the first axis.
692  *
693  * @param {number} y The data y-coordinate.
694  * @param {number} [axis] The axis number on which the data coordinate lives.
695  * @return {number} A fraction in [0, 1] where 0 = the top edge.
696  */
697 Dygraph.prototype.toPercentYCoord = function(y, axis) {
698   if (y === null) {
699     return null;
700   }
701   if (typeof(axis) == "undefined") axis = 0;
702 
703   var yRange = this.yAxisRange(axis);
704 
705   var pct;
706   var logscale = this.attributes_.getForAxis("logscale", axis);
707   if (logscale) {
708     var logr0 = utils.log10(yRange[0]);
709     var logr1 = utils.log10(yRange[1]);
710     pct = (logr1 - utils.log10(y)) / (logr1 - logr0);
711   } else {
712     // yRange[1] - y is unit distance from the bottom.
713     // yRange[1] - yRange[0] is the scale of the range.
714     // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom.
715     pct = (yRange[1] - y) / (yRange[1] - yRange[0]);
716   }
717   return pct;
718 };
719 
720 /**
721  * Converts an x value to a percentage from the left to the right of
722  * the drawing area.
723  *
724  * If the coordinate represents a value visible on the canvas, then
725  * the value will be between 0 and 1, where 0 is the left of the canvas.
726  * However, this method will return values outside the range, as
727  * values can fall outside the canvas.
728  *
729  * If x is null, this returns null.
730  * @param {number} x The data x-coordinate.
731  * @return {number} A fraction in [0, 1] where 0 = the left edge.
732  */
733 Dygraph.prototype.toPercentXCoord = function(x) {
734   if (x === null) {
735     return null;
736   }
737 
738   var xRange = this.xAxisRange();
739   var pct;
740   var logscale = this.attributes_.getForAxis("logscale", 'x') ;
741   if (logscale === true) {  // logscale can be null so we test for true explicitly.
742     var logr0 = utils.log10(xRange[0]);
743     var logr1 = utils.log10(xRange[1]);
744     pct = (utils.log10(x) - logr0) / (logr1 - logr0);
745   } else {
746     // x - xRange[0] is unit distance from the left.
747     // xRange[1] - xRange[0] is the scale of the range.
748     // The full expression below is the % from the left.
749     pct = (x - xRange[0]) / (xRange[1] - xRange[0]);
750   }
751   return pct;
752 };
753 
754 /**
755  * Returns the number of columns (including the independent variable).
756  * @return {number} The number of columns.
757  */
758 Dygraph.prototype.numColumns = function() {
759   if (!this.rawData_) return 0;
760   return this.rawData_[0] ? this.rawData_[0].length : this.attr_("labels").length;
761 };
762 
763 /**
764  * Returns the number of rows (excluding any header/label row).
765  * @return {number} The number of rows, less any header.
766  */
767 Dygraph.prototype.numRows = function() {
768   if (!this.rawData_) return 0;
769   return this.rawData_.length;
770 };
771 
772 /**
773  * Returns the value in the given row and column. If the row and column exceed
774  * the bounds on the data, returns null. Also returns null if the value is
775  * missing.
776  * @param {number} row The row number of the data (0-based). Row 0 is the
777  *     first row of data, not a header row.
778  * @param {number} col The column number of the data (0-based)
779  * @return {number} The value in the specified cell or null if the row/col
780  *     were out of range.
781  */
782 Dygraph.prototype.getValue = function(row, col) {
783   if (row < 0 || row > this.rawData_.length) return null;
784   if (col < 0 || col > this.rawData_[row].length) return null;
785 
786   return this.rawData_[row][col];
787 };
788 
789 /**
790  * Generates interface elements for the Dygraph: a containing div, a div to
791  * display the current point, and a textbox to adjust the rolling average
792  * period. Also creates the Renderer/Layout elements.
793  * @private
794  */
795 Dygraph.prototype.createInterface_ = function() {
796   // Create the all-enclosing graph div
797   var enclosing = this.maindiv_;
798 
799   this.graphDiv = document.createElement("div");
800 
801   // TODO(danvk): any other styles that are useful to set here?
802   this.graphDiv.style.textAlign = 'left';  // This is a CSS "reset"
803   this.graphDiv.style.position = 'relative';
804   enclosing.appendChild(this.graphDiv);
805 
806   // Create the canvas for interactive parts of the chart.
807   this.canvas_ = utils.createCanvas();
808   this.canvas_.style.position = "absolute";
809 
810   // ... and for static parts of the chart.
811   this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
812 
813   this.canvas_ctx_ = utils.getContext(this.canvas_);
814   this.hidden_ctx_ = utils.getContext(this.hidden_);
815 
816   this.resizeElements_();
817 
818   // The interactive parts of the graph are drawn on top of the chart.
819   this.graphDiv.appendChild(this.hidden_);
820   this.graphDiv.appendChild(this.canvas_);
821   this.mouseEventElement_ = this.createMouseEventElement_();
822 
823   // Create the grapher
824   this.layout_ = new DygraphLayout(this);
825 
826   var dygraph = this;
827 
828   this.mouseMoveHandler_ = function(e) {
829     dygraph.mouseMove_(e);
830   };
831 
832   this.mouseOutHandler_ = function(e) {
833     // The mouse has left the chart if:
834     // 1. e.target is inside the chart
835     // 2. e.relatedTarget is outside the chart
836     var target = e.target || e.fromElement;
837     var relatedTarget = e.relatedTarget || e.toElement;
838     if (utils.isNodeContainedBy(target, dygraph.graphDiv) &&
839         !utils.isNodeContainedBy(relatedTarget, dygraph.graphDiv)) {
840       dygraph.mouseOut_(e);
841     }
842   };
843 
844   this.addAndTrackEvent(window, 'mouseout', this.mouseOutHandler_);
845   this.addAndTrackEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
846 
847   // Don't recreate and register the resize handler on subsequent calls.
848   // This happens when the graph is resized.
849   if (!this.resizeHandler_) {
850     this.resizeHandler_ = function(e) {
851       dygraph.resize();
852     };
853 
854     // Update when the window is resized.
855     // TODO(danvk): drop frames depending on complexity of the chart.
856     this.addAndTrackEvent(window, 'resize', this.resizeHandler_);
857   }
858 };
859 
860 Dygraph.prototype.resizeElements_ = function() {
861   this.graphDiv.style.width = this.width_ + "px";
862   this.graphDiv.style.height = this.height_ + "px";
863 
864   var pixelRatioOption = this.getNumericOption('pixelRatio')
865 
866   var canvasScale = pixelRatioOption || utils.getContextPixelRatio(this.canvas_ctx_);
867   this.canvas_.width = this.width_ * canvasScale;
868   this.canvas_.height = this.height_ * canvasScale;
869   this.canvas_.style.width = this.width_ + "px";    // for IE
870   this.canvas_.style.height = this.height_ + "px";  // for IE
871   if (canvasScale !== 1) {
872     this.canvas_ctx_.scale(canvasScale, canvasScale);
873   }
874 
875   var hiddenScale = pixelRatioOption || utils.getContextPixelRatio(this.hidden_ctx_);
876   this.hidden_.width = this.width_ * hiddenScale;
877   this.hidden_.height = this.height_ * hiddenScale;
878   this.hidden_.style.width = this.width_ + "px";    // for IE
879   this.hidden_.style.height = this.height_ + "px";  // for IE
880   if (hiddenScale !== 1) {
881     this.hidden_ctx_.scale(hiddenScale, hiddenScale);
882   }
883 };
884 
885 /**
886  * Detach DOM elements in the dygraph and null out all data references.
887  * Calling this when you're done with a dygraph can dramatically reduce memory
888  * usage. See, e.g., the tests/perf.html example.
889  */
890 Dygraph.prototype.destroy = function() {
891   this.canvas_ctx_.restore();
892   this.hidden_ctx_.restore();
893 
894   // Destroy any plugins, in the reverse order that they were registered.
895   for (var i = this.plugins_.length - 1; i >= 0; i--) {
896     var p = this.plugins_.pop();
897     if (p.plugin.destroy) p.plugin.destroy();
898   }
899 
900   var removeRecursive = function(node) {
901     while (node.hasChildNodes()) {
902       removeRecursive(node.firstChild);
903       node.removeChild(node.firstChild);
904     }
905   };
906 
907   this.removeTrackedEvents_();
908 
909   // remove mouse event handlers (This may not be necessary anymore)
910   utils.removeEvent(window, 'mouseout', this.mouseOutHandler_);
911   utils.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
912 
913   // remove window handlers
914   utils.removeEvent(window,'resize', this.resizeHandler_);
915   this.resizeHandler_ = null;
916 
917   removeRecursive(this.maindiv_);
918 
919   var nullOut = function(obj) {
920     for (var n in obj) {
921       if (typeof(obj[n]) === 'object') {
922         obj[n] = null;
923       }
924     }
925   };
926   // These may not all be necessary, but it can't hurt...
927   nullOut(this.layout_);
928   nullOut(this.plotter_);
929   nullOut(this);
930 };
931 
932 /**
933  * Creates the canvas on which the chart will be drawn. Only the Renderer ever
934  * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
935  * or the zoom rectangles) is done on this.canvas_.
936  * @param {Object} canvas The Dygraph canvas over which to overlay the plot
937  * @return {Object} The newly-created canvas
938  * @private
939  */
940 Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
941   var h = utils.createCanvas();
942   h.style.position = "absolute";
943   // TODO(danvk): h should be offset from canvas. canvas needs to include
944   // some extra area to make it easier to zoom in on the far left and far
945   // right. h needs to be precisely the plot area, so that clipping occurs.
946   h.style.top = canvas.style.top;
947   h.style.left = canvas.style.left;
948   h.width = this.width_;
949   h.height = this.height_;
950   h.style.width = this.width_ + "px";    // for IE
951   h.style.height = this.height_ + "px";  // for IE
952   return h;
953 };
954 
955 /**
956  * Creates an overlay element used to handle mouse events.
957  * @return {Object} The mouse event element.
958  * @private
959  */
960 Dygraph.prototype.createMouseEventElement_ = function() {
961   return this.canvas_;
962 };
963 
964 /**
965  * Generate a set of distinct colors for the data series. This is done with a
966  * color wheel. Saturation/Value are customizable, and the hue is
967  * equally-spaced around the color wheel. If a custom set of colors is
968  * specified, that is used instead.
969  * @private
970  */
971 Dygraph.prototype.setColors_ = function() {
972   var labels = this.getLabels();
973   var num = labels.length - 1;
974   this.colors_ = [];
975   this.colorsMap_ = {};
976 
977   // These are used for when no custom colors are specified.
978   var sat = this.getNumericOption('colorSaturation') || 1.0;
979   var val = this.getNumericOption('colorValue') || 0.5;
980   var half = Math.ceil(num / 2);
981 
982   var colors = this.getOption('colors');
983   var visibility = this.visibility();
984   for (var i = 0; i < num; i++) {
985     if (!visibility[i]) {
986       continue;
987     }
988     var label = labels[i + 1];
989     var colorStr = this.attributes_.getForSeries('color', label);
990     if (!colorStr) {
991       if (colors) {
992         colorStr = colors[i % colors.length];
993       } else {
994         // alternate colors for high contrast.
995         var idx = i % 2 ? (half + (i + 1)/ 2) : Math.ceil((i + 1) / 2);
996         var hue = (1.0 * idx / (1 + num));
997         colorStr = utils.hsvToRGB(hue, sat, val);
998       }
999     }
1000     this.colors_.push(colorStr);
1001     this.colorsMap_[label] = colorStr;
1002   }
1003 };
1004 
1005 /**
1006  * Return the list of colors. This is either the list of colors passed in the
1007  * attributes or the autogenerated list of rgb(r,g,b) strings.
1008  * This does not return colors for invisible series.
1009  * @return {Array.<string>} The list of colors.
1010  */
1011 Dygraph.prototype.getColors = function() {
1012   return this.colors_;
1013 };
1014 
1015 /**
1016  * Returns a few attributes of a series, i.e. its color, its visibility, which
1017  * axis it's assigned to, and its column in the original data.
1018  * Returns null if the series does not exist.
1019  * Otherwise, returns an object with column, visibility, color and axis properties.
1020  * The "axis" property will be set to 1 for y1 and 2 for y2.
1021  * The "column" property can be fed back into getValue(row, column) to get
1022  * values for this series.
1023  */
1024 Dygraph.prototype.getPropertiesForSeries = function(series_name) {
1025   var idx = -1;
1026   var labels = this.getLabels();
1027   for (var i = 1; i < labels.length; i++) {
1028     if (labels[i] == series_name) {
1029       idx = i;
1030       break;
1031     }
1032   }
1033   if (idx == -1) return null;
1034 
1035   return {
1036     name: series_name,
1037     column: idx,
1038     visible: this.visibility()[idx - 1],
1039     color: this.colorsMap_[series_name],
1040     axis: 1 + this.attributes_.axisForSeries(series_name)
1041   };
1042 };
1043 
1044 /**
1045  * Create the text box to adjust the averaging period
1046  * @private
1047  */
1048 Dygraph.prototype.createRollInterface_ = function() {
1049   // Create a roller if one doesn't exist already.
1050   var roller = this.roller_;
1051   if (!roller) {
1052     this.roller_ = roller = document.createElement("input");
1053     roller.type = "text";
1054     roller.style.display = "none";
1055     roller.className = 'dygraph-roller';
1056     this.graphDiv.appendChild(roller);
1057   }
1058 
1059   var display = this.getBooleanOption('showRoller') ? 'block' : 'none';
1060 
1061   var area = this.getArea();
1062   var textAttr = {
1063                    "top": (area.y + area.h - 25) + "px",
1064                    "left": (area.x + 1) + "px",
1065                    "display": display
1066                  };
1067   roller.size = "2";
1068   roller.value = this.rollPeriod_;
1069   utils.update(roller.style, textAttr);
1070 
1071   roller.onchange = () => this.adjustRoll(roller.value);
1072 };
1073 
1074 /**
1075  * Set up all the mouse handlers needed to capture dragging behavior for zoom
1076  * events.
1077  * @private
1078  */
1079 Dygraph.prototype.createDragInterface_ = function() {
1080   var context = {
1081     // Tracks whether the mouse is down right now
1082     isZooming: false,
1083     isPanning: false,  // is this drag part of a pan?
1084     is2DPan: false,    // if so, is that pan 1- or 2-dimensional?
1085     dragStartX: null, // pixel coordinates
1086     dragStartY: null, // pixel coordinates
1087     dragEndX: null, // pixel coordinates
1088     dragEndY: null, // pixel coordinates
1089     dragDirection: null,
1090     prevEndX: null, // pixel coordinates
1091     prevEndY: null, // pixel coordinates
1092     prevDragDirection: null,
1093     cancelNextDblclick: false,  // see comment in dygraph-interaction-model.js
1094 
1095     // The value on the left side of the graph when a pan operation starts.
1096     initialLeftmostDate: null,
1097 
1098     // The number of units each pixel spans. (This won't be valid for log
1099     // scales)
1100     xUnitsPerPixel: null,
1101 
1102     // TODO(danvk): update this comment
1103     // The range in second/value units that the viewport encompasses during a
1104     // panning operation.
1105     dateRange: null,
1106 
1107     // Top-left corner of the canvas, in DOM coords
1108     // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
1109     px: 0,
1110     py: 0,
1111 
1112     // Values for use with panEdgeFraction, which limit how far outside the
1113     // graph's data boundaries it can be panned.
1114     boundedDates: null, // [minDate, maxDate]
1115     boundedValues: null, // [[minValue, maxValue] ...]
1116 
1117     // We cover iframes during mouse interactions. See comments in
1118     // dygraph-utils.js for more info on why this is a good idea.
1119     tarp: new IFrameTarp(),
1120 
1121     // contextB is the same thing as this context object but renamed.
1122     initializeMouseDown: function(event, g, contextB) {
1123       // prevents mouse drags from selecting page text.
1124       if (event.preventDefault) {
1125         event.preventDefault();  // Firefox, Chrome, etc.
1126       } else {
1127         event.returnValue = false;  // IE
1128         event.cancelBubble = true;
1129       }
1130 
1131       var canvasPos = utils.findPos(g.canvas_);
1132       contextB.px = canvasPos.x;
1133       contextB.py = canvasPos.y;
1134       contextB.dragStartX = utils.dragGetX_(event, contextB);
1135       contextB.dragStartY = utils.dragGetY_(event, contextB);
1136       contextB.cancelNextDblclick = false;
1137       contextB.tarp.cover();
1138     },
1139     destroy: function() {
1140       var context = this;
1141       if (context.isZooming || context.isPanning) {
1142         context.isZooming = false;
1143         context.dragStartX = null;
1144         context.dragStartY = null;
1145       }
1146 
1147       if (context.isPanning) {
1148         context.isPanning = false;
1149         context.draggingDate = null;
1150         context.dateRange = null;
1151         for (var i = 0; i < self.axes_.length; i++) {
1152           delete self.axes_[i].draggingValue;
1153           delete self.axes_[i].dragValueRange;
1154         }
1155       }
1156 
1157       context.tarp.uncover();
1158     }
1159   };
1160 
1161   var interactionModel = this.getOption("interactionModel");
1162 
1163   // Self is the graph.
1164   var self = this;
1165 
1166   // Function that binds the graph and context to the handler.
1167   var bindHandler = function(handler) {
1168     return function(event) {
1169       handler(event, self, context);
1170     };
1171   };
1172 
1173   for (var eventName in interactionModel) {
1174     if (!interactionModel.hasOwnProperty(eventName)) continue;
1175     this.addAndTrackEvent(this.mouseEventElement_, eventName,
1176         bindHandler(interactionModel[eventName]));
1177   }
1178 
1179   // If the user releases the mouse button during a drag, but not over the
1180   // canvas, then it doesn't count as a zooming action.
1181   if (!interactionModel.willDestroyContextMyself) {
1182     var mouseUpHandler = function(event) {
1183       context.destroy();
1184     };
1185 
1186     this.addAndTrackEvent(document, 'mouseup', mouseUpHandler);
1187   }
1188 };
1189 
1190 /**
1191  * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1192  * up any previous zoom rectangles that were drawn. This could be optimized to
1193  * avoid extra redrawing, but it's tricky to avoid interactions with the status
1194  * dots.
1195  *
1196  * @param {number} direction the direction of the zoom rectangle. Acceptable
1197  *     values are utils.HORIZONTAL and utils.VERTICAL.
1198  * @param {number} startX The X position where the drag started, in canvas
1199  *     coordinates.
1200  * @param {number} endX The current X position of the drag, in canvas coords.
1201  * @param {number} startY The Y position where the drag started, in canvas
1202  *     coordinates.
1203  * @param {number} endY The current Y position of the drag, in canvas coords.
1204  * @param {number} prevDirection the value of direction on the previous call to
1205  *     this function. Used to avoid excess redrawing
1206  * @param {number} prevEndX The value of endX on the previous call to this
1207  *     function. Used to avoid excess redrawing
1208  * @param {number} prevEndY The value of endY on the previous call to this
1209  *     function. Used to avoid excess redrawing
1210  * @private
1211  */
1212 Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
1213                                            endY, prevDirection, prevEndX,
1214                                            prevEndY) {
1215   var ctx = this.canvas_ctx_;
1216 
1217   // Clean up from the previous rect if necessary
1218   if (prevDirection == utils.HORIZONTAL) {
1219     ctx.clearRect(Math.min(startX, prevEndX), this.layout_.getPlotArea().y,
1220                   Math.abs(startX - prevEndX), this.layout_.getPlotArea().h);
1221   } else if (prevDirection == utils.VERTICAL) {
1222     ctx.clearRect(this.layout_.getPlotArea().x, Math.min(startY, prevEndY),
1223                   this.layout_.getPlotArea().w, Math.abs(startY - prevEndY));
1224   }
1225 
1226   // Draw a light-grey rectangle to show the new viewing area
1227   if (direction == utils.HORIZONTAL) {
1228     if (endX && startX) {
1229       ctx.fillStyle = "rgba(128,128,128,0.33)";
1230       ctx.fillRect(Math.min(startX, endX), this.layout_.getPlotArea().y,
1231                    Math.abs(endX - startX), this.layout_.getPlotArea().h);
1232     }
1233   } else if (direction == utils.VERTICAL) {
1234     if (endY && startY) {
1235       ctx.fillStyle = "rgba(128,128,128,0.33)";
1236       ctx.fillRect(this.layout_.getPlotArea().x, Math.min(startY, endY),
1237                    this.layout_.getPlotArea().w, Math.abs(endY - startY));
1238     }
1239   }
1240 };
1241 
1242 /**
1243  * Clear the zoom rectangle (and perform no zoom).
1244  * @private
1245  */
1246 Dygraph.prototype.clearZoomRect_ = function() {
1247   this.currentZoomRectArgs_ = null;
1248   this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
1249 };
1250 
1251 /**
1252  * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1253  * the canvas. The exact zoom window may be slightly larger if there are no data
1254  * points near lowX or highX. Don't confuse this function with doZoomXDates,
1255  * which accepts dates that match the raw data. This function redraws the graph.
1256  *
1257  * @param {number} lowX The leftmost pixel value that should be visible.
1258  * @param {number} highX The rightmost pixel value that should be visible.
1259  * @private
1260  */
1261 Dygraph.prototype.doZoomX_ = function(lowX, highX) {
1262   this.currentZoomRectArgs_ = null;
1263   // Find the earliest and latest dates contained in this canvasx range.
1264   // Convert the call to date ranges of the raw data.
1265   var minDate = this.toDataXCoord(lowX);
1266   var maxDate = this.toDataXCoord(highX);
1267   this.doZoomXDates_(minDate, maxDate);
1268 };
1269 
1270 /**
1271  * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1272  * method with doZoomX which accepts pixel coordinates. This function redraws
1273  * the graph.
1274  *
1275  * @param {number} minDate The minimum date that should be visible.
1276  * @param {number} maxDate The maximum date that should be visible.
1277  * @private
1278  */
1279 Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
1280   // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation
1281   // can produce strange effects. Rather than the x-axis transitioning slowly
1282   // between values, it can jerk around.)
1283   var old_window = this.xAxisRange();
1284   var new_window = [minDate, maxDate];
1285   const zoomCallback = this.getFunctionOption('zoomCallback');
1286   this.doAnimatedZoom(old_window, new_window, null, null, () => {
1287     if (zoomCallback) {
1288       zoomCallback.call(this, minDate, maxDate, this.yAxisRanges());
1289     }
1290   });
1291 };
1292 
1293 /**
1294  * Zoom to something containing [lowY, highY]. These are pixel coordinates in
1295  * the canvas. This function redraws the graph.
1296  *
1297  * @param {number} lowY The topmost pixel value that should be visible.
1298  * @param {number} highY The lowest pixel value that should be visible.
1299  * @private
1300  */
1301 Dygraph.prototype.doZoomY_ = function(lowY, highY) {
1302   this.currentZoomRectArgs_ = null;
1303   // Find the highest and lowest values in pixel range for each axis.
1304   // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1305   // This is because pixels increase as you go down on the screen, whereas data
1306   // coordinates increase as you go up the screen.
1307   var oldValueRanges = this.yAxisRanges();
1308   var newValueRanges = [];
1309   for (var i = 0; i < this.axes_.length; i++) {
1310     var hi = this.toDataYCoord(lowY, i);
1311     var low = this.toDataYCoord(highY, i);
1312     newValueRanges.push([low, hi]);
1313   }
1314 
1315   const zoomCallback = this.getFunctionOption('zoomCallback');
1316   this.doAnimatedZoom(null, null, oldValueRanges, newValueRanges, () => {
1317     if (zoomCallback) {
1318       const [minX, maxX] = this.xAxisRange();
1319       zoomCallback.call(this, minX, maxX, this.yAxisRanges());
1320     }
1321   });
1322 };
1323 
1324 /**
1325  * Transition function to use in animations. Returns values between 0.0
1326  * (totally old values) and 1.0 (totally new values) for each frame.
1327  * @private
1328  */
1329 Dygraph.zoomAnimationFunction = function(frame, numFrames) {
1330   var k = 1.5;
1331   return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames));
1332 };
1333 
1334 /**
1335  * Reset the zoom to the original view coordinates. This is the same as
1336  * double-clicking on the graph.
1337  */
1338 Dygraph.prototype.resetZoom = function() {
1339   const dirtyX = this.isZoomed('x');
1340   const dirtyY = this.isZoomed('y');
1341   const dirty = dirtyX || dirtyY;
1342 
1343   // Clear any selection, since it's likely to be drawn in the wrong place.
1344   this.clearSelection();
1345 
1346   if (!dirty) return;
1347 
1348   // Calculate extremes to avoid lack of padding on reset.
1349   const [minDate, maxDate] = this.xAxisExtremes();
1350 
1351   const animatedZooms = this.getBooleanOption('animatedZooms');
1352   const zoomCallback = this.getFunctionOption('zoomCallback');
1353 
1354   // TODO(danvk): merge this block w/ the code below.
1355   // TODO(danvk): factor out a generic, public zoomTo method.
1356   if (!animatedZooms) {
1357     this.dateWindow_ = null;
1358     this.axes_.forEach(axis => {
1359       if (axis.valueRange) delete axis.valueRange;
1360     });
1361 
1362     this.drawGraph_();
1363     if (zoomCallback) {
1364       zoomCallback.call(this, minDate, maxDate, this.yAxisRanges());
1365     }
1366     return;
1367   }
1368 
1369   var oldWindow=null, newWindow=null, oldValueRanges=null, newValueRanges=null;
1370   if (dirtyX) {
1371     oldWindow = this.xAxisRange();
1372     newWindow = [minDate, maxDate];
1373   }
1374 
1375   if (dirtyY) {
1376     oldValueRanges = this.yAxisRanges();
1377     newValueRanges = this.yAxisExtremes();
1378   }
1379 
1380   this.doAnimatedZoom(oldWindow, newWindow, oldValueRanges, newValueRanges,
1381       () => {
1382         this.dateWindow_ = null;
1383         this.axes_.forEach(axis => {
1384           if (axis.valueRange) delete axis.valueRange;
1385         });
1386         if (zoomCallback) {
1387           zoomCallback.call(this, minDate, maxDate, this.yAxisRanges());
1388         }
1389       });
1390 };
1391 
1392 /**
1393  * Combined animation logic for all zoom functions.
1394  * either the x parameters or y parameters may be null.
1395  * @private
1396  */
1397 Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, newYRanges, callback) {
1398   var steps = this.getBooleanOption("animatedZooms") ?
1399       Dygraph.ANIMATION_STEPS : 1;
1400 
1401   var windows = [];
1402   var valueRanges = [];
1403   var step, frac;
1404 
1405   if (oldXRange !== null && newXRange !== null) {
1406     for (step = 1; step <= steps; step++) {
1407       frac = Dygraph.zoomAnimationFunction(step, steps);
1408       windows[step-1] = [oldXRange[0]*(1-frac) + frac*newXRange[0],
1409                          oldXRange[1]*(1-frac) + frac*newXRange[1]];
1410     }
1411   }
1412 
1413   if (oldYRanges !== null && newYRanges !== null) {
1414     for (step = 1; step <= steps; step++) {
1415       frac = Dygraph.zoomAnimationFunction(step, steps);
1416       var thisRange = [];
1417       for (var j = 0; j < this.axes_.length; j++) {
1418         thisRange.push([oldYRanges[j][0]*(1-frac) + frac*newYRanges[j][0],
1419                         oldYRanges[j][1]*(1-frac) + frac*newYRanges[j][1]]);
1420       }
1421       valueRanges[step-1] = thisRange;
1422     }
1423   }
1424 
1425   utils.repeatAndCleanup(step => {
1426     if (valueRanges.length) {
1427       for (var i = 0; i < this.axes_.length; i++) {
1428         var w = valueRanges[step][i];
1429         this.axes_[i].valueRange = [w[0], w[1]];
1430       }
1431     }
1432     if (windows.length) {
1433       this.dateWindow_ = windows[step];
1434     }
1435     this.drawGraph_();
1436   }, steps, Dygraph.ANIMATION_DURATION / steps, callback);
1437 };
1438 
1439 /**
1440  * Get the current graph's area object.
1441  *
1442  * Returns: {x, y, w, h}
1443  */
1444 Dygraph.prototype.getArea = function() {
1445   return this.plotter_.area;
1446 };
1447 
1448 /**
1449  * Convert a mouse event to DOM coordinates relative to the graph origin.
1450  *
1451  * Returns a two-element array: [X, Y].
1452  */
1453 Dygraph.prototype.eventToDomCoords = function(event) {
1454   if (event.offsetX && event.offsetY) {
1455     return [ event.offsetX, event.offsetY ];
1456   } else {
1457     var eventElementPos = utils.findPos(this.mouseEventElement_);
1458     var canvasx = utils.pageX(event) - eventElementPos.x;
1459     var canvasy = utils.pageY(event) - eventElementPos.y;
1460     return [canvasx, canvasy];
1461   }
1462 };
1463 
1464 /**
1465  * Given a canvas X coordinate, find the closest row.
1466  * @param {number} domX graph-relative DOM X coordinate
1467  * Returns {number} row number.
1468  * @private
1469  */
1470 Dygraph.prototype.findClosestRow = function(domX) {
1471   var minDistX = Infinity;
1472   var closestRow = -1;
1473   var sets = this.layout_.points;
1474   for (var i = 0; i < sets.length; i++) {
1475     var points = sets[i];
1476     var len = points.length;
1477     for (var j = 0; j < len; j++) {
1478       var point = points[j];
1479       if (!utils.isValidPoint(point, true)) continue;
1480       var dist = Math.abs(point.canvasx - domX);
1481       if (dist < minDistX) {
1482         minDistX = dist;
1483         closestRow = point.idx;
1484       }
1485     }
1486   }
1487 
1488   return closestRow;
1489 };
1490 
1491 /**
1492  * Given canvas X,Y coordinates, find the closest point.
1493  *
1494  * This finds the individual data point across all visible series
1495  * that's closest to the supplied DOM coordinates using the standard
1496  * Euclidean X,Y distance.
1497  *
1498  * @param {number} domX graph-relative DOM X coordinate
1499  * @param {number} domY graph-relative DOM Y coordinate
1500  * Returns: {row, seriesName, point}
1501  * @private
1502  */
1503 Dygraph.prototype.findClosestPoint = function(domX, domY) {
1504   var minDist = Infinity;
1505   var dist, dx, dy, point, closestPoint, closestSeries, closestRow;
1506   for ( var setIdx = this.layout_.points.length - 1 ; setIdx >= 0 ; --setIdx ) {
1507     var points = this.layout_.points[setIdx];
1508     for (var i = 0; i < points.length; ++i) {
1509       point = points[i];
1510       if (!utils.isValidPoint(point)) continue;
1511       dx = point.canvasx - domX;
1512       dy = point.canvasy - domY;
1513       dist = dx * dx + dy * dy;
1514       if (dist < minDist) {
1515         minDist = dist;
1516         closestPoint = point;
1517         closestSeries = setIdx;
1518         closestRow = point.idx;
1519       }
1520     }
1521   }
1522   var name = this.layout_.setNames[closestSeries];
1523   return {
1524     row: closestRow,
1525     seriesName: name,
1526     point: closestPoint
1527   };
1528 };
1529 
1530 /**
1531  * Given canvas X,Y coordinates, find the touched area in a stacked graph.
1532  *
1533  * This first finds the X data point closest to the supplied DOM X coordinate,
1534  * then finds the series which puts the Y coordinate on top of its filled area,
1535  * using linear interpolation between adjacent point pairs.
1536  *
1537  * @param {number} domX graph-relative DOM X coordinate
1538  * @param {number} domY graph-relative DOM Y coordinate
1539  * Returns: {row, seriesName, point}
1540  * @private
1541  */
1542 Dygraph.prototype.findStackedPoint = function(domX, domY) {
1543   var row = this.findClosestRow(domX);
1544   var closestPoint, closestSeries;
1545   for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) {
1546     var boundary = this.getLeftBoundary_(setIdx);
1547     var rowIdx = row - boundary;
1548     var points = this.layout_.points[setIdx];
1549     if (rowIdx >= points.length) continue;
1550     var p1 = points[rowIdx];
1551     if (!utils.isValidPoint(p1)) continue;
1552     var py = p1.canvasy;
1553     if (domX > p1.canvasx && rowIdx + 1 < points.length) {
1554       // interpolate series Y value using next point
1555       var p2 = points[rowIdx + 1];
1556       if (utils.isValidPoint(p2)) {
1557         var dx = p2.canvasx - p1.canvasx;
1558         if (dx > 0) {
1559           var r = (domX - p1.canvasx) / dx;
1560           py += r * (p2.canvasy - p1.canvasy);
1561         }
1562       }
1563     } else if (domX < p1.canvasx && rowIdx > 0) {
1564       // interpolate series Y value using previous point
1565       var p0 = points[rowIdx - 1];
1566       if (utils.isValidPoint(p0)) {
1567         var dx = p1.canvasx - p0.canvasx;
1568         if (dx > 0) {
1569           var r = (p1.canvasx - domX) / dx;
1570           py += r * (p0.canvasy - p1.canvasy);
1571         }
1572       }
1573     }
1574     // Stop if the point (domX, py) is above this series' upper edge
1575     if (setIdx === 0 || py < domY) {
1576       closestPoint = p1;
1577       closestSeries = setIdx;
1578     }
1579   }
1580   var name = this.layout_.setNames[closestSeries];
1581   return {
1582     row: row,
1583     seriesName: name,
1584     point: closestPoint
1585   };
1586 };
1587 
1588 /**
1589  * When the mouse moves in the canvas, display information about a nearby data
1590  * point and draw dots over those points in the data series. This function
1591  * takes care of cleanup of previously-drawn dots.
1592  * @param {Object} event The mousemove event from the browser.
1593  * @private
1594  */
1595 Dygraph.prototype.mouseMove_ = function(event) {
1596   // This prevents JS errors when mousing over the canvas before data loads.
1597   var points = this.layout_.points;
1598   if (points === undefined || points === null) return;
1599 
1600   var canvasCoords = this.eventToDomCoords(event);
1601   var canvasx = canvasCoords[0];
1602   var canvasy = canvasCoords[1];
1603 
1604   var highlightSeriesOpts = this.getOption("highlightSeriesOpts");
1605   var selectionChanged = false;
1606   if (highlightSeriesOpts && !this.isSeriesLocked()) {
1607     var closest;
1608     if (this.getBooleanOption("stackedGraph")) {
1609       closest = this.findStackedPoint(canvasx, canvasy);
1610     } else {
1611       closest = this.findClosestPoint(canvasx, canvasy);
1612     }
1613     selectionChanged = this.setSelection(closest.row, closest.seriesName);
1614   } else {
1615     var idx = this.findClosestRow(canvasx);
1616     selectionChanged = this.setSelection(idx);
1617   }
1618 
1619   var callback = this.getFunctionOption("highlightCallback");
1620   if (callback && selectionChanged) {
1621     callback.call(this, event,
1622         this.lastx_,
1623         this.selPoints_,
1624         this.lastRow_,
1625         this.highlightSet_);
1626   }
1627 };
1628 
1629 /**
1630  * Fetch left offset from the specified set index or if not passed, the
1631  * first defined boundaryIds record (see bug #236).
1632  * @private
1633  */
1634 Dygraph.prototype.getLeftBoundary_ = function(setIdx) {
1635   if (this.boundaryIds_[setIdx]) {
1636       return this.boundaryIds_[setIdx][0];
1637   } else {
1638     for (var i = 0; i < this.boundaryIds_.length; i++) {
1639       if (this.boundaryIds_[i] !== undefined) {
1640         return this.boundaryIds_[i][0];
1641       }
1642     }
1643     return 0;
1644   }
1645 };
1646 
1647 Dygraph.prototype.animateSelection_ = function(direction) {
1648   var totalSteps = 10;
1649   var millis = 30;
1650   if (this.fadeLevel === undefined) this.fadeLevel = 0;
1651   if (this.animateId === undefined) this.animateId = 0;
1652   var start = this.fadeLevel;
1653   var steps = direction < 0 ? start : totalSteps - start;
1654   if (steps <= 0) {
1655     if (this.fadeLevel) {
1656       this.updateSelection_(1.0);
1657     }
1658     return;
1659   }
1660 
1661   var thisId = ++this.animateId;
1662   var that = this;
1663   var cleanupIfClearing = function() {
1664     // if we haven't reached fadeLevel 0 in the max frame time,
1665     // ensure that the clear happens and just go to 0
1666     if (that.fadeLevel !== 0 && direction < 0) {
1667       that.fadeLevel = 0;
1668       that.clearSelection();
1669     }
1670   };
1671   utils.repeatAndCleanup(
1672     function(n) {
1673       // ignore simultaneous animations
1674       if (that.animateId != thisId) return;
1675 
1676       that.fadeLevel += direction;
1677       if (that.fadeLevel === 0) {
1678         that.clearSelection();
1679       } else {
1680         that.updateSelection_(that.fadeLevel / totalSteps);
1681       }
1682     },
1683     steps, millis, cleanupIfClearing);
1684 };
1685 
1686 /**
1687  * Draw dots over the selectied points in the data series. This function
1688  * takes care of cleanup of previously-drawn dots.
1689  * @private
1690  */
1691 Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
1692   /*var defaultPrevented = */
1693   this.cascadeEvents_('select', {
1694     selectedRow: this.lastRow_ === -1 ? undefined : this.lastRow_,
1695     selectedX: this.lastx_ === -1 ? undefined : this.lastx_,
1696     selectedPoints: this.selPoints_
1697   });
1698   // TODO(danvk): use defaultPrevented here?
1699 
1700   // Clear the previously drawn vertical, if there is one
1701   var i;
1702   var ctx = this.canvas_ctx_;
1703   if (this.getOption('highlightSeriesOpts')) {
1704     ctx.clearRect(0, 0, this.width_, this.height_);
1705     var alpha = 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
1706     var backgroundColor = utils.toRGB_(this.getOption('highlightSeriesBackgroundColor'));
1707 
1708     if (alpha) {
1709       // Activating background fade includes an animation effect for a gradual
1710       // fade. TODO(klausw): make this independently configurable if it causes
1711       // issues? Use a shared preference to control animations?
1712       var animateBackgroundFade = true;
1713       if (animateBackgroundFade) {
1714         if (opt_animFraction === undefined) {
1715           // start a new animation
1716           this.animateSelection_(1);
1717           return;
1718         }
1719         alpha *= opt_animFraction;
1720       }
1721       ctx.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + alpha + ')';
1722       ctx.fillRect(0, 0, this.width_, this.height_);
1723     }
1724 
1725     // Redraw only the highlighted series in the interactive canvas (not the
1726     // static plot canvas, which is where series are usually drawn).
1727     this.plotter_._renderLineChart(this.highlightSet_, ctx);
1728   } else if (this.previousVerticalX_ >= 0) {
1729     // Determine the maximum highlight circle size.
1730     var maxCircleSize = 0;
1731     var labels = this.attr_('labels');
1732     for (i = 1; i < labels.length; i++) {
1733       var r = this.getNumericOption('highlightCircleSize', labels[i]);
1734       if (r > maxCircleSize) maxCircleSize = r;
1735     }
1736     var px = this.previousVerticalX_;
1737     ctx.clearRect(px - maxCircleSize - 1, 0,
1738                   2 * maxCircleSize + 2, this.height_);
1739   }
1740 
1741   if (this.selPoints_.length > 0) {
1742     // Draw colored circles over the center of each selected point
1743     var canvasx = this.selPoints_[0].canvasx;
1744     ctx.save();
1745     for (i = 0; i < this.selPoints_.length; i++) {
1746       var pt = this.selPoints_[i];
1747       if (isNaN(pt.canvasy)) continue;
1748 
1749       var circleSize = this.getNumericOption('highlightCircleSize', pt.name);
1750       var callback = this.getFunctionOption("drawHighlightPointCallback", pt.name);
1751       var color = this.plotter_.colors[pt.name];
1752       if (!callback) {
1753         callback = utils.Circles.DEFAULT;
1754       }
1755       ctx.lineWidth = this.getNumericOption('strokeWidth', pt.name);
1756       ctx.strokeStyle = color;
1757       ctx.fillStyle = color;
1758       callback.call(this, this, pt.name, ctx, canvasx, pt.canvasy,
1759           color, circleSize, pt.idx);
1760     }
1761     ctx.restore();
1762 
1763     this.previousVerticalX_ = canvasx;
1764   }
1765 };
1766 
1767 /**
1768  * Manually set the selected points and display information about them in the
1769  * legend. The selection can be cleared using clearSelection() and queried
1770  * using getSelection().
1771  *
1772  * To set a selected series but not a selected point, call setSelection with
1773  * row=false and the selected series name.
1774  *
1775  * @param {number} row Row number that should be highlighted (i.e. appear with
1776  * hover dots on the chart).
1777  * @param {seriesName} optional series name to highlight that series with the
1778  * the highlightSeriesOpts setting.
1779  * @param { locked } optional If true, keep seriesName selected when mousing
1780  * over the graph, disabling closest-series highlighting. Call clearSelection()
1781  * to unlock it.
1782  */
1783 Dygraph.prototype.setSelection = function(row, opt_seriesName, opt_locked) {
1784   // Extract the points we've selected
1785   this.selPoints_ = [];
1786 
1787   var changed = false;
1788   if (row !== false && row >= 0) {
1789     if (row != this.lastRow_) changed = true;
1790     this.lastRow_ = row;
1791     for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) {
1792       var points = this.layout_.points[setIdx];
1793       // Check if the point at the appropriate index is the point we're looking
1794       // for.  If it is, just use it, otherwise search the array for a point
1795       // in the proper place.
1796       var setRow = row - this.getLeftBoundary_(setIdx);
1797       if (setRow >= 0 && setRow < points.length && points[setRow].idx == row) {
1798         var point = points[setRow];
1799         if (point.yval !== null) this.selPoints_.push(point);
1800       } else {
1801         for (var pointIdx = 0; pointIdx < points.length; ++pointIdx) {
1802           var point = points[pointIdx];
1803           if (point.idx == row) {
1804             if (point.yval !== null) {
1805               this.selPoints_.push(point);
1806             }
1807             break;
1808           }
1809         }
1810       }
1811     }
1812   } else {
1813     if (this.lastRow_ >= 0) changed = true;
1814     this.lastRow_ = -1;
1815   }
1816 
1817   if (this.selPoints_.length) {
1818     this.lastx_ = this.selPoints_[0].xval;
1819   } else {
1820     this.lastx_ = -1;
1821   }
1822 
1823   if (opt_seriesName !== undefined) {
1824     if (this.highlightSet_ !== opt_seriesName) changed = true;
1825     this.highlightSet_ = opt_seriesName;
1826   }
1827 
1828   if (opt_locked !== undefined) {
1829     this.lockedSet_ = opt_locked;
1830   }
1831 
1832   if (changed) {
1833     this.updateSelection_(undefined);
1834   }
1835   return changed;
1836 };
1837 
1838 /**
1839  * The mouse has left the canvas. Clear out whatever artifacts remain
1840  * @param {Object} event the mouseout event from the browser.
1841  * @private
1842  */
1843 Dygraph.prototype.mouseOut_ = function(event) {
1844   if (this.getFunctionOption("unhighlightCallback")) {
1845     this.getFunctionOption("unhighlightCallback").call(this, event);
1846   }
1847 
1848   if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_) {
1849     this.clearSelection();
1850   }
1851 };
1852 
1853 /**
1854  * Clears the current selection (i.e. points that were highlighted by moving
1855  * the mouse over the chart).
1856  */
1857 Dygraph.prototype.clearSelection = function() {
1858   this.cascadeEvents_('deselect', {});
1859 
1860   this.lockedSet_ = false;
1861   // Get rid of the overlay data
1862   if (this.fadeLevel) {
1863     this.animateSelection_(-1);
1864     return;
1865   }
1866   this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
1867   this.fadeLevel = 0;
1868   this.selPoints_ = [];
1869   this.lastx_ = -1;
1870   this.lastRow_ = -1;
1871   this.highlightSet_ = null;
1872 };
1873 
1874 /**
1875  * Returns the number of the currently selected row. To get data for this row,
1876  * you can use the getValue method.
1877  * @return {number} row number, or -1 if nothing is selected
1878  */
1879 Dygraph.prototype.getSelection = function() {
1880   if (!this.selPoints_ || this.selPoints_.length < 1) {
1881     return -1;
1882   }
1883 
1884   for (var setIdx = 0; setIdx < this.layout_.points.length; setIdx++) {
1885     var points = this.layout_.points[setIdx];
1886     for (var row = 0; row < points.length; row++) {
1887       if (points[row].x == this.selPoints_[0].x) {
1888         return points[row].idx;
1889       }
1890     }
1891   }
1892   return -1;
1893 };
1894 
1895 /**
1896  * Returns the name of the currently-highlighted series.
1897  * Only available when the highlightSeriesOpts option is in use.
1898  */
1899 Dygraph.prototype.getHighlightSeries = function() {
1900   return this.highlightSet_;
1901 };
1902 
1903 /**
1904  * Returns true if the currently-highlighted series was locked
1905  * via setSelection(..., seriesName, true).
1906  */
1907 Dygraph.prototype.isSeriesLocked = function() {
1908   return this.lockedSet_;
1909 };
1910 
1911 /**
1912  * Fires when there's data available to be graphed.
1913  * @param {string} data Raw CSV data to be plotted
1914  * @private
1915  */
1916 Dygraph.prototype.loadedEvent_ = function(data) {
1917   this.rawData_ = this.parseCSV_(data);
1918   this.cascadeDataDidUpdateEvent_();
1919   this.predraw_();
1920 };
1921 
1922 /**
1923  * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1924  * @private
1925  */
1926 Dygraph.prototype.addXTicks_ = function() {
1927   // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1928   var range;
1929   if (this.dateWindow_) {
1930     range = [this.dateWindow_[0], this.dateWindow_[1]];
1931   } else {
1932     range = this.xAxisExtremes();
1933   }
1934 
1935   var xAxisOptionsView = this.optionsViewForAxis_('x');
1936   var xTicks = xAxisOptionsView('ticker')(
1937       range[0],
1938       range[1],
1939       this.plotter_.area.w,  // TODO(danvk): should be area.width
1940       xAxisOptionsView,
1941       this);
1942   // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
1943   // console.log(msg);
1944   this.layout_.setXTicks(xTicks);
1945 };
1946 
1947 /**
1948  * Returns the correct handler class for the currently set options.
1949  * @private
1950  */
1951 Dygraph.prototype.getHandlerClass_ = function() {
1952   var handlerClass;
1953   if (this.attr_('dataHandler')) {
1954     handlerClass =  this.attr_('dataHandler');
1955   } else if (this.fractions_) {
1956     if (this.getBooleanOption('errorBars')) {
1957       handlerClass = FractionsBarsHandler;
1958     } else {
1959       handlerClass = DefaultFractionHandler;
1960     }
1961   } else if (this.getBooleanOption('customBars')) {
1962     handlerClass = CustomBarsHandler;
1963   } else if (this.getBooleanOption('errorBars')) {
1964     handlerClass = ErrorBarsHandler;
1965   } else {
1966     handlerClass = DefaultHandler;
1967   }
1968   return handlerClass;
1969 };
1970 
1971 /**
1972  * @private
1973  * This function is called once when the chart's data is changed or the options
1974  * dictionary is updated. It is _not_ called when the user pans or zooms. The
1975  * idea is that values derived from the chart's data can be computed here,
1976  * rather than every time the chart is drawn. This includes things like the
1977  * number of axes, rolling averages, etc.
1978  */
1979 Dygraph.prototype.predraw_ = function() {
1980   var start = new Date();
1981 
1982   // Create the correct dataHandler
1983   this.dataHandler_ = new (this.getHandlerClass_())();
1984 
1985   this.layout_.computePlotArea();
1986 
1987   // TODO(danvk): move more computations out of drawGraph_ and into here.
1988   this.computeYAxes_();
1989 
1990   if (!this.is_initial_draw_) {
1991     this.canvas_ctx_.restore();
1992     this.hidden_ctx_.restore();
1993   }
1994 
1995   this.canvas_ctx_.save();
1996   this.hidden_ctx_.save();
1997 
1998   // Create a new plotter.
1999   this.plotter_ = new DygraphCanvasRenderer(this,
2000                                             this.hidden_,
2001                                             this.hidden_ctx_,
2002                                             this.layout_);
2003 
2004   // The roller sits in the bottom left corner of the chart. We don't know where
2005   // this will be until the options are available, so it's positioned here.
2006   this.createRollInterface_();
2007 
2008   this.cascadeEvents_('predraw');
2009 
2010   // Convert the raw data (a 2D array) into the internal format and compute
2011   // rolling averages.
2012   this.rolledSeries_ = [null];  // x-axis is the first series and it's special
2013   for (var i = 1; i < this.numColumns(); i++) {
2014     // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too.
2015     var series = this.dataHandler_.extractSeries(this.rawData_, i, this.attributes_);
2016     if (this.rollPeriod_ > 1) {
2017       series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_);
2018     }
2019 
2020     this.rolledSeries_.push(series);
2021   }
2022 
2023   // If the data or options have changed, then we'd better redraw.
2024   this.drawGraph_();
2025 
2026   // This is used to determine whether to do various animations.
2027   var end = new Date();
2028   this.drawingTimeMs_ = (end - start);
2029 };
2030 
2031 /**
2032  * Point structure.
2033  *
2034  * xval_* and yval_* are the original unscaled data values,
2035  * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2036  * yval_stacked is the cumulative Y value used for stacking graphs,
2037  * and bottom/top/minus/plus are used for error bar graphs.
2038  *
2039  * @typedef {{
2040  *     idx: number,
2041  *     name: string,
2042  *     x: ?number,
2043  *     xval: ?number,
2044  *     y_bottom: ?number,
2045  *     y: ?number,
2046  *     y_stacked: ?number,
2047  *     y_top: ?number,
2048  *     yval_minus: ?number,
2049  *     yval: ?number,
2050  *     yval_plus: ?number,
2051  *     yval_stacked
2052  * }}
2053  */
2054 Dygraph.PointType = undefined;
2055 
2056 /**
2057  * Calculates point stacking for stackedGraph=true.
2058  *
2059  * For stacking purposes, interpolate or extend neighboring data across
2060  * NaN values based on stackedGraphNaNFill settings. This is for display
2061  * only, the underlying data value as shown in the legend remains NaN.
2062  *
2063  * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2064  *     Updates each Point's yval_stacked property.
2065  * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2066  *     values for the series seen so far. Index is the row number. Updated
2067  *     based on the current series's values.
2068  * @param {Array.<number>} seriesExtremes Min and max values, updated
2069  *     to reflect the stacked values.
2070  * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2071  *     'none'.
2072  * @private
2073  */
2074 Dygraph.stackPoints_ = function(
2075     points, cumulativeYval, seriesExtremes, fillMethod) {
2076   var lastXval = null;
2077   var prevPoint = null;
2078   var nextPoint = null;
2079   var nextPointIdx = -1;
2080 
2081   // Find the next stackable point starting from the given index.
2082   var updateNextPoint = function(idx) {
2083     // If we've previously found a non-NaN point and haven't gone past it yet,
2084     // just use that.
2085     if (nextPointIdx >= idx) return;
2086 
2087     // We haven't found a non-NaN point yet or have moved past it,
2088     // look towards the right to find a non-NaN point.
2089     for (var j = idx; j < points.length; ++j) {
2090       // Clear out a previously-found point (if any) since it's no longer
2091       // valid, we shouldn't use it for interpolation anymore.
2092       nextPoint = null;
2093       if (!isNaN(points[j].yval) && points[j].yval !== null) {
2094         nextPointIdx = j;
2095         nextPoint = points[j];
2096         break;
2097       }
2098     }
2099   };
2100 
2101   for (var i = 0; i < points.length; ++i) {
2102     var point = points[i];
2103     var xval = point.xval;
2104     if (cumulativeYval[xval] === undefined) {
2105       cumulativeYval[xval] = 0;
2106     }
2107 
2108     var actualYval = point.yval;
2109     if (isNaN(actualYval) || actualYval === null) {
2110       if(fillMethod == 'none') {
2111         actualYval = 0;
2112       } else {
2113         // Interpolate/extend for stacking purposes if possible.
2114         updateNextPoint(i);
2115         if (prevPoint && nextPoint && fillMethod != 'none') {
2116           // Use linear interpolation between prevPoint and nextPoint.
2117           actualYval = prevPoint.yval + (nextPoint.yval - prevPoint.yval) *
2118               ((xval - prevPoint.xval) / (nextPoint.xval - prevPoint.xval));
2119         } else if (prevPoint && fillMethod == 'all') {
2120           actualYval = prevPoint.yval;
2121         } else if (nextPoint && fillMethod == 'all') {
2122           actualYval = nextPoint.yval;
2123         } else {
2124           actualYval = 0;
2125         }
2126       }
2127     } else {
2128       prevPoint = point;
2129     }
2130 
2131     var stackedYval = cumulativeYval[xval];
2132     if (lastXval != xval) {
2133       // If an x-value is repeated, we ignore the duplicates.
2134       stackedYval += actualYval;
2135       cumulativeYval[xval] = stackedYval;
2136     }
2137     lastXval = xval;
2138 
2139     point.yval_stacked = stackedYval;
2140 
2141     if (stackedYval > seriesExtremes[1]) {
2142       seriesExtremes[1] = stackedYval;
2143     }
2144     if (stackedYval < seriesExtremes[0]) {
2145       seriesExtremes[0] = stackedYval;
2146     }
2147   }
2148 };
2149 
2150 
2151 /**
2152  * Loop over all fields and create datasets, calculating extreme y-values for
2153  * each series and extreme x-indices as we go.
2154  *
2155  * dateWindow is passed in as an explicit parameter so that we can compute
2156  * extreme values "speculatively", i.e. without actually setting state on the
2157  * dygraph.
2158  *
2159  * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2160  *     rolledSeries[seriesIndex][row] = raw point, where
2161  *     seriesIndex is the column number starting with 1, and
2162  *     rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2163  * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2164  * @return {{
2165  *     points: Array.<Array.<Dygraph.PointType>>,
2166  *     seriesExtremes: Array.<Array.<number>>,
2167  *     boundaryIds: Array.<number>}}
2168  * @private
2169  */
2170 Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
2171   var boundaryIds = [];
2172   var points = [];
2173   var cumulativeYval = [];  // For stacked series.
2174   var extremes = {};  // series name -> [low, high]
2175   var seriesIdx, sampleIdx;
2176   var firstIdx, lastIdx;
2177   var axisIdx;
2178 
2179   // Loop over the fields (series).  Go from the last to the first,
2180   // because if they're stacked that's how we accumulate the values.
2181   var num_series = rolledSeries.length - 1;
2182   var series;
2183   for (seriesIdx = num_series; seriesIdx >= 1; seriesIdx--) {
2184     if (!this.visibility()[seriesIdx - 1]) continue;
2185 
2186     // Prune down to the desired range, if necessary (for zooming)
2187     // Because there can be lines going to points outside of the visible area,
2188     // we actually prune to visible points, plus one on either side.
2189     if (dateWindow) {
2190       series = rolledSeries[seriesIdx];
2191       var low = dateWindow[0];
2192       var high = dateWindow[1];
2193 
2194       // TODO(danvk): do binary search instead of linear search.
2195       // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
2196       firstIdx = null;
2197       lastIdx = null;
2198       for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) {
2199         if (series[sampleIdx][0] >= low && firstIdx === null) {
2200           firstIdx = sampleIdx;
2201         }
2202         if (series[sampleIdx][0] <= high) {
2203           lastIdx = sampleIdx;
2204         }
2205       }
2206 
2207       if (firstIdx === null) firstIdx = 0;
2208       var correctedFirstIdx = firstIdx;
2209       var isInvalidValue = true;
2210       while (isInvalidValue && correctedFirstIdx > 0) {
2211         correctedFirstIdx--;
2212         // check if the y value is null.
2213         isInvalidValue = series[correctedFirstIdx][1] === null;
2214       }
2215 
2216       if (lastIdx === null) lastIdx = series.length - 1;
2217       var correctedLastIdx = lastIdx;
2218       isInvalidValue = true;
2219       while (isInvalidValue && correctedLastIdx < series.length - 1) {
2220         correctedLastIdx++;
2221         isInvalidValue = series[correctedLastIdx][1] === null;
2222       }
2223 
2224       if (correctedFirstIdx!==firstIdx) {
2225         firstIdx = correctedFirstIdx;
2226       }
2227       if (correctedLastIdx !== lastIdx) {
2228         lastIdx = correctedLastIdx;
2229       }
2230 
2231       boundaryIds[seriesIdx-1] = [firstIdx, lastIdx];
2232 
2233       // .slice's end is exclusive, we want to include lastIdx.
2234       series = series.slice(firstIdx, lastIdx + 1);
2235     } else {
2236       series = rolledSeries[seriesIdx];
2237       boundaryIds[seriesIdx-1] = [0, series.length-1];
2238     }
2239 
2240     var seriesName = this.attr_("labels")[seriesIdx];
2241     var seriesExtremes = this.dataHandler_.getExtremeYValues(series,
2242         dateWindow, this.getBooleanOption("stepPlot",seriesName));
2243 
2244     var seriesPoints = this.dataHandler_.seriesToPoints(series,
2245         seriesName, boundaryIds[seriesIdx-1][0]);
2246 
2247     if (this.getBooleanOption("stackedGraph")) {
2248       axisIdx = this.attributes_.axisForSeries(seriesName);
2249       if (cumulativeYval[axisIdx] === undefined) {
2250         cumulativeYval[axisIdx] = [];
2251       }
2252       Dygraph.stackPoints_(seriesPoints, cumulativeYval[axisIdx], seriesExtremes,
2253                            this.getBooleanOption("stackedGraphNaNFill"));
2254     }
2255 
2256     extremes[seriesName] = seriesExtremes;
2257     points[seriesIdx] = seriesPoints;
2258   }
2259 
2260   return { points: points, extremes: extremes, boundaryIds: boundaryIds };
2261 };
2262 
2263 /**
2264  * Update the graph with new data. This method is called when the viewing area
2265  * has changed. If the underlying data or options have changed, predraw_ will
2266  * be called before drawGraph_ is called.
2267  *
2268  * @private
2269  */
2270 Dygraph.prototype.drawGraph_ = function() {
2271   var start = new Date();
2272 
2273   // This is used to set the second parameter to drawCallback, below.
2274   var is_initial_draw = this.is_initial_draw_;
2275   this.is_initial_draw_ = false;
2276 
2277   this.layout_.removeAllDatasets();
2278   this.setColors_();
2279   this.attrs_.pointSize = 0.5 * this.getNumericOption('highlightCircleSize');
2280 
2281   var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_);
2282   var points = packed.points;
2283   var extremes = packed.extremes;
2284   this.boundaryIds_ = packed.boundaryIds;
2285 
2286   this.setIndexByName_ = {};
2287   var labels = this.attr_("labels");
2288   var dataIdx = 0;
2289   for (var i = 1; i < points.length; i++) {
2290     if (!this.visibility()[i - 1]) continue;
2291     this.layout_.addDataset(labels[i], points[i]);
2292     this.datasetIndex_[i] = dataIdx++;
2293   }
2294   for (var i = 0; i < labels.length; i++) {
2295     this.setIndexByName_[labels[i]] = i;
2296   }
2297 
2298   this.computeYAxisRanges_(extremes);
2299   this.layout_.setYAxes(this.axes_);
2300 
2301   this.addXTicks_();
2302 
2303   // Tell PlotKit to use this new data and render itself
2304   this.layout_.evaluate();
2305   this.renderGraph_(is_initial_draw);
2306 
2307   if (this.getStringOption("timingName")) {
2308     var end = new Date();
2309     console.log(this.getStringOption("timingName") + " - drawGraph: " + (end - start) + "ms");
2310   }
2311 };
2312 
2313 /**
2314  * This does the work of drawing the chart. It assumes that the layout and axis
2315  * scales have already been set (e.g. by predraw_).
2316  *
2317  * @private
2318  */
2319 Dygraph.prototype.renderGraph_ = function(is_initial_draw) {
2320   this.cascadeEvents_('clearChart');
2321   this.plotter_.clear();
2322 
2323   const underlayCallback = this.getFunctionOption('underlayCallback');
2324   if (underlayCallback) {
2325     // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2326     // users who expect a deprecated form of this callback.
2327     underlayCallback.call(this,
2328         this.hidden_ctx_, this.layout_.getPlotArea(), this, this);
2329   }
2330 
2331   var e = {
2332     canvas: this.hidden_,
2333     drawingContext: this.hidden_ctx_
2334   };
2335   this.cascadeEvents_('willDrawChart', e);
2336   this.plotter_.render();
2337   this.cascadeEvents_('didDrawChart', e);
2338   this.lastRow_ = -1;  // because plugins/legend.js clears the legend
2339 
2340   // TODO(danvk): is this a performance bottleneck when panning?
2341   // The interaction canvas should already be empty in that situation.
2342   this.canvas_.getContext('2d').clearRect(0, 0, this.width_, this.height_);
2343 
2344   const drawCallback = this.getFunctionOption("drawCallback");
2345   if (drawCallback !== null) {
2346     drawCallback.call(this, this, is_initial_draw);
2347   }
2348   if (is_initial_draw) {
2349     this.readyFired_ = true;
2350     while (this.readyFns_.length > 0) {
2351       var fn = this.readyFns_.pop();
2352       fn(this);
2353     }
2354   }
2355 };
2356 
2357 /**
2358  * @private
2359  * Determine properties of the y-axes which are independent of the data
2360  * currently being displayed. This includes things like the number of axes and
2361  * the style of the axes. It does not include the range of each axis and its
2362  * tick marks.
2363  * This fills in this.axes_.
2364  * axes_ = [ { options } ]
2365  *   indices are into the axes_ array.
2366  */
2367 Dygraph.prototype.computeYAxes_ = function() {
2368   var axis, index, opts, v;
2369 
2370   // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2371   // data computation as well as options storage.
2372   // Go through once and add all the axes.
2373   this.axes_ = [];
2374 
2375   for (axis = 0; axis < this.attributes_.numAxes(); axis++) {
2376     // Add a new axis, making a copy of its per-axis options.
2377     opts = { g : this };
2378     utils.update(opts, this.attributes_.axisOptions(axis));
2379     this.axes_[axis] = opts;
2380   }
2381 
2382   for (axis = 0; axis < this.axes_.length; axis++) {
2383     if (axis === 0) {
2384       opts = this.optionsViewForAxis_('y' + (axis ? '2' : ''));
2385       v = opts("valueRange");
2386       if (v) this.axes_[axis].valueRange = v;
2387     } else {  // To keep old behavior
2388       var axes = this.user_attrs_.axes;
2389       if (axes && axes.y2) {
2390         v = axes.y2.valueRange;
2391         if (v) this.axes_[axis].valueRange = v;
2392       }
2393     }
2394   }
2395 };
2396 
2397 /**
2398  * Returns the number of y-axes on the chart.
2399  * @return {number} the number of axes.
2400  */
2401 Dygraph.prototype.numAxes = function() {
2402   return this.attributes_.numAxes();
2403 };
2404 
2405 /**
2406  * @private
2407  * Returns axis properties for the given series.
2408  * @param {string} setName The name of the series for which to get axis
2409  * properties, e.g. 'Y1'.
2410  * @return {Object} The axis properties.
2411  */
2412 Dygraph.prototype.axisPropertiesForSeries = function(series) {
2413   // TODO(danvk): handle errors.
2414   return this.axes_[this.attributes_.axisForSeries(series)];
2415 };
2416 
2417 /**
2418  * @private
2419  * Determine the value range and tick marks for each axis.
2420  * @param {Object} extremes A mapping from seriesName -> [low, high]
2421  * This fills in the valueRange and ticks fields in each entry of this.axes_.
2422  */
2423 Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2424   var isNullUndefinedOrNaN = function(num) {
2425     return isNaN(parseFloat(num));
2426   };
2427   var numAxes = this.attributes_.numAxes();
2428   var ypadCompat, span, series, ypad;
2429 
2430   var p_axis;
2431 
2432   // Compute extreme values, a span and tick marks for each axis.
2433   for (var i = 0; i < numAxes; i++) {
2434     var axis = this.axes_[i];
2435     var logscale = this.attributes_.getForAxis("logscale", i);
2436     var includeZero = this.attributes_.getForAxis("includeZero", i);
2437     var independentTicks = this.attributes_.getForAxis("independentTicks", i);
2438     series = this.attributes_.seriesForAxis(i);
2439 
2440     // Add some padding. This supports two Y padding operation modes:
2441     //
2442     // - backwards compatible (yRangePad not set):
2443     //   10% padding for automatic Y ranges, but not for user-supplied
2444     //   ranges, and move a close-to-zero edge to zero, since drawing at the edge
2445     //   results in invisible lines. Unfortunately lines drawn at the edge of a
2446     //   user-supplied range will still be invisible. If logscale is
2447     //   set, add a variable amount of padding at the top but
2448     //   none at the bottom.
2449     //
2450     // - new-style (yRangePad set by the user):
2451     //   always add the specified Y padding.
2452     //
2453     ypadCompat = true;
2454     ypad = 0.1; // add 10%
2455     const yRangePad = this.getNumericOption('yRangePad');
2456     if (yRangePad !== null) {
2457       ypadCompat = false;
2458       // Convert pixel padding to ratio
2459       ypad = yRangePad / this.plotter_.area.h;
2460     }
2461 
2462     if (series.length === 0) {
2463       // If no series are defined or visible then use a reasonable default
2464       axis.extremeRange = [0, 1];
2465     } else {
2466       // Calculate the extremes of extremes.
2467       var minY = Infinity;  // extremes[series[0]][0];
2468       var maxY = -Infinity;  // extremes[series[0]][1];
2469       var extremeMinY, extremeMaxY;
2470 
2471       for (var j = 0; j < series.length; j++) {
2472         // this skips invisible series
2473         if (!extremes.hasOwnProperty(series[j])) continue;
2474 
2475         // Only use valid extremes to stop null data series' from corrupting the scale.
2476         extremeMinY = extremes[series[j]][0];
2477         if (extremeMinY !== null) {
2478           minY = Math.min(extremeMinY, minY);
2479         }
2480         extremeMaxY = extremes[series[j]][1];
2481         if (extremeMaxY !== null) {
2482           maxY = Math.max(extremeMaxY, maxY);
2483         }
2484       }
2485 
2486       // Include zero if requested by the user.
2487       if (includeZero && !logscale) {
2488         if (minY > 0) minY = 0;
2489         if (maxY < 0) maxY = 0;
2490       }
2491 
2492       // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
2493       if (minY == Infinity) minY = 0;
2494       if (maxY == -Infinity) maxY = 1;
2495 
2496       span = maxY - minY;
2497       // special case: if we have no sense of scale, center on the sole value.
2498       if (span === 0) {
2499         if (maxY !== 0) {
2500           span = Math.abs(maxY);
2501         } else {
2502           // ... and if the sole value is zero, use range 0-1.
2503           maxY = 1;
2504           span = 1;
2505         }
2506       }
2507 
2508       var maxAxisY = maxY, minAxisY = minY;
2509       if (ypadCompat) {
2510         if (logscale) {
2511           maxAxisY = maxY + ypad * span;
2512           minAxisY = minY;
2513         } else {
2514           maxAxisY = maxY + ypad * span;
2515           minAxisY = minY - ypad * span;
2516 
2517           // Backwards-compatible behavior: Move the span to start or end at zero if it's
2518           // close to zero.
2519           if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2520           if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2521         }
2522       }
2523       axis.extremeRange = [minAxisY, maxAxisY];
2524     }
2525     if (axis.valueRange) {
2526       // This is a user-set value range for this axis.
2527       var y0 = isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0];
2528       var y1 = isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1];
2529       axis.computedValueRange = [y0, y1];
2530     } else {
2531       axis.computedValueRange = axis.extremeRange;
2532     }
2533     if (!ypadCompat) {
2534       // When using yRangePad, adjust the upper/lower bounds to add
2535       // padding unless the user has zoomed/panned the Y axis range.
2536       if (logscale) {
2537         y0 = axis.computedValueRange[0];
2538         y1 = axis.computedValueRange[1];
2539         var y0pct = ypad / (2 * ypad - 1);
2540         var y1pct = (ypad - 1) / (2 * ypad - 1);
2541         axis.computedValueRange[0] = utils.logRangeFraction(y0, y1, y0pct);
2542         axis.computedValueRange[1] = utils.logRangeFraction(y0, y1, y1pct);
2543       } else {
2544         y0 = axis.computedValueRange[0];
2545         y1 = axis.computedValueRange[1];
2546         span = y1 - y0;
2547         axis.computedValueRange[0] = y0 - span * ypad;
2548         axis.computedValueRange[1] = y1 + span * ypad;
2549       }
2550     }
2551 
2552 
2553     if (independentTicks) {
2554       axis.independentTicks = independentTicks;
2555       var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2556       var ticker = opts('ticker');
2557       axis.ticks = ticker(axis.computedValueRange[0],
2558               axis.computedValueRange[1],
2559               this.plotter_.area.h,
2560               opts,
2561               this);
2562       // Define the first independent axis as primary axis.
2563       if (!p_axis) p_axis = axis;
2564     }
2565   }
2566   if (p_axis === undefined) {
2567     throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
2568   }
2569   // Add ticks. By default, all axes inherit the tick positions of the
2570   // primary axis. However, if an axis is specifically marked as having
2571   // independent ticks, then that is permissible as well.
2572   for (var i = 0; i < numAxes; i++) {
2573     var axis = this.axes_[i];
2574 
2575     if (!axis.independentTicks) {
2576       var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2577       var ticker = opts('ticker');
2578       var p_ticks = p_axis.ticks;
2579       var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2580       var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2581       var tick_values = [];
2582       for (var k = 0; k < p_ticks.length; k++) {
2583         var y_frac = (p_ticks[k].v - p_axis.computedValueRange[0]) / p_scale;
2584         var y_val = axis.computedValueRange[0] + y_frac * scale;
2585         tick_values.push(y_val);
2586       }
2587 
2588       axis.ticks = ticker(axis.computedValueRange[0],
2589                           axis.computedValueRange[1],
2590                           this.plotter_.area.h,
2591                           opts,
2592                           this,
2593                           tick_values);
2594     }
2595   }
2596 };
2597 
2598 /**
2599  * Detects the type of the str (date or numeric) and sets the various
2600  * formatting attributes in this.attrs_ based on this type.
2601  * @param {string} str An x value.
2602  * @private
2603  */
2604 Dygraph.prototype.detectTypeFromString_ = function(str) {
2605   var isDate = false;
2606   var dashPos = str.indexOf('-');  // could be 2006-01-01 _or_ 1.0e-2
2607   if ((dashPos > 0 && (str[dashPos-1] != 'e' && str[dashPos-1] != 'E')) ||
2608       str.indexOf('/') >= 0 ||
2609       isNaN(parseFloat(str))) {
2610     isDate = true;
2611   } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2612     // TODO(danvk): remove support for this format.
2613     isDate = true;
2614   }
2615 
2616   this.setXAxisOptions_(isDate);
2617 };
2618 
2619 Dygraph.prototype.setXAxisOptions_ = function(isDate) {
2620   if (isDate) {
2621     this.attrs_.xValueParser = utils.dateParser;
2622     this.attrs_.axes.x.valueFormatter = utils.dateValueFormatter;
2623     this.attrs_.axes.x.ticker = DygraphTickers.dateTicker;
2624     this.attrs_.axes.x.axisLabelFormatter = utils.dateAxisLabelFormatter;
2625   } else {
2626     /** @private (shut up, jsdoc!) */
2627     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2628     // TODO(danvk): use Dygraph.numberValueFormatter here?
2629     /** @private (shut up, jsdoc!) */
2630     this.attrs_.axes.x.valueFormatter = function(x) { return x; };
2631     this.attrs_.axes.x.ticker = DygraphTickers.numericTicks;
2632     this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
2633   }
2634 };
2635 
2636 /**
2637  * @private
2638  * Parses a string in a special csv format.  We expect a csv file where each
2639  * line is a date point, and the first field in each line is the date string.
2640  * We also expect that all remaining fields represent series.
2641  * if the errorBars attribute is set, then interpret the fields as:
2642  * date, series1, stddev1, series2, stddev2, ...
2643  * @param {[Object]} data See above.
2644  *
2645  * @return [Object] An array with one entry for each row. These entries
2646  * are an array of cells in that row. The first entry is the parsed x-value for
2647  * the row. The second, third, etc. are the y-values. These can take on one of
2648  * three forms, depending on the CSV and constructor parameters:
2649  * 1. numeric value
2650  * 2. [ value, stddev ]
2651  * 3. [ low value, center value, high value ]
2652  */
2653 Dygraph.prototype.parseCSV_ = function(data) {
2654   var ret = [];
2655   var line_delimiter = utils.detectLineDelimiter(data);
2656   var lines = data.split(line_delimiter || "\n");
2657   var vals, j;
2658 
2659   // Use the default delimiter or fall back to a tab if that makes sense.
2660   var delim = this.getStringOption('delimiter');
2661   if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2662     delim = '\t';
2663   }
2664 
2665   var start = 0;
2666   if (!('labels' in this.user_attrs_)) {
2667     // User hasn't explicitly set labels, so they're (presumably) in the CSV.
2668     start = 1;
2669     this.attrs_.labels = lines[0].split(delim);  // NOTE: _not_ user_attrs_.
2670     this.attributes_.reparseSeries();
2671   }
2672   var line_no = 0;
2673 
2674   var xParser;
2675   var defaultParserSet = false;  // attempt to auto-detect x value type
2676   var expectedCols = this.attr_("labels").length;
2677   var outOfOrder = false;
2678   for (var i = start; i < lines.length; i++) {
2679     var line = lines[i];
2680     line_no = i;
2681     if (line.length === 0) continue;  // skip blank lines
2682     if (line[0] == '#') continue;    // skip comment lines
2683     var inFields = line.split(delim);
2684     if (inFields.length < 2) continue;
2685 
2686     var fields = [];
2687     if (!defaultParserSet) {
2688       this.detectTypeFromString_(inFields[0]);
2689       xParser = this.getFunctionOption("xValueParser");
2690       defaultParserSet = true;
2691     }
2692     fields[0] = xParser(inFields[0], this);
2693 
2694     // If fractions are expected, parse the numbers as "A/B"
2695     if (this.fractions_) {
2696       for (j = 1; j < inFields.length; j++) {
2697         // TODO(danvk): figure out an appropriate way to flag parse errors.
2698         vals = inFields[j].split("/");
2699         if (vals.length != 2) {
2700           console.error('Expected fractional "num/den" values in CSV data ' +
2701                         "but found a value '" + inFields[j] + "' on line " +
2702                         (1 + i) + " ('" + line + "') which is not of this form.");
2703           fields[j] = [0, 0];
2704         } else {
2705           fields[j] = [utils.parseFloat_(vals[0], i, line),
2706                        utils.parseFloat_(vals[1], i, line)];
2707         }
2708       }
2709     } else if (this.getBooleanOption("errorBars")) {
2710       // If there are error bars, values are (value, stddev) pairs
2711       if (inFields.length % 2 != 1) {
2712         console.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2713                       'but line ' + (1 + i) + ' has an odd number of values (' +
2714                       (inFields.length - 1) + "): '" + line + "'");
2715       }
2716       for (j = 1; j < inFields.length; j += 2) {
2717         fields[(j + 1) / 2] = [utils.parseFloat_(inFields[j], i, line),
2718                                utils.parseFloat_(inFields[j + 1], i, line)];
2719       }
2720     } else if (this.getBooleanOption("customBars")) {
2721       // Bars are a low;center;high tuple
2722       for (j = 1; j < inFields.length; j++) {
2723         var val = inFields[j];
2724         if (/^ *$/.test(val)) {
2725           fields[j] = [null, null, null];
2726         } else {
2727           vals = val.split(";");
2728           if (vals.length == 3) {
2729             fields[j] = [ utils.parseFloat_(vals[0], i, line),
2730                           utils.parseFloat_(vals[1], i, line),
2731                           utils.parseFloat_(vals[2], i, line) ];
2732           } else {
2733             console.warn('When using customBars, values must be either blank ' +
2734                          'or "low;center;high" tuples (got "' + val +
2735                          '" on line ' + (1+i));
2736           }
2737         }
2738       }
2739     } else {
2740       // Values are just numbers
2741       for (j = 1; j < inFields.length; j++) {
2742         fields[j] = utils.parseFloat_(inFields[j], i, line);
2743       }
2744     }
2745     if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2746       outOfOrder = true;
2747     }
2748 
2749     if (fields.length != expectedCols) {
2750       console.error("Number of columns in line " + i + " (" + fields.length +
2751                     ") does not agree with number of labels (" + expectedCols +
2752                     ") " + line);
2753     }
2754 
2755     // If the user specified the 'labels' option and none of the cells of the
2756     // first row parsed correctly, then they probably double-specified the
2757     // labels. We go with the values set in the option, discard this row and
2758     // log a warning to the JS console.
2759     if (i === 0 && this.attr_('labels')) {
2760       var all_null = true;
2761       for (j = 0; all_null && j < fields.length; j++) {
2762         if (fields[j]) all_null = false;
2763       }
2764       if (all_null) {
2765         console.warn("The dygraphs 'labels' option is set, but the first row " +
2766                      "of CSV data ('" + line + "') appears to also contain " +
2767                      "labels. Will drop the CSV labels and use the option " +
2768                      "labels.");
2769         continue;
2770       }
2771     }
2772     ret.push(fields);
2773   }
2774 
2775   if (outOfOrder) {
2776     console.warn("CSV is out of order; order it correctly to speed loading.");
2777     ret.sort(function(a,b) { return a[0] - b[0]; });
2778   }
2779 
2780   return ret;
2781 };
2782 
2783 // In native format, all values must be dates or numbers.
2784 // This check isn't perfect but will catch most mistaken uses of strings.
2785 function validateNativeFormat(data) {
2786   const firstRow = data[0];
2787   const firstX = firstRow[0];
2788   if (typeof firstX !== 'number' && !utils.isDateLike(firstX)) {
2789     throw new Error(`Expected number or date but got ${typeof firstX}: ${firstX}.`);
2790   }
2791   for (let i = 1; i < firstRow.length; i++) {
2792     const val = firstRow[i];
2793     if (val === null || val === undefined) continue;
2794     if (typeof val === 'number') continue;
2795     if (utils.isArrayLike(val)) continue;  // e.g. error bars or custom bars.
2796     throw new Error(`Expected number or array but got ${typeof val}: ${val}.`);
2797   }
2798 }
2799 
2800 /**
2801  * The user has provided their data as a pre-packaged JS array. If the x values
2802  * are numeric, this is the same as dygraphs' internal format. If the x values
2803  * are dates, we need to convert them from Date objects to ms since epoch.
2804  * @param {!Array} data
2805  * @return {Object} data with numeric x values.
2806  * @private
2807  */
2808 Dygraph.prototype.parseArray_ = function(data) {
2809   // Peek at the first x value to see if it's numeric.
2810   if (data.length === 0) {
2811     console.error("Can't plot empty data set");
2812     return null;
2813   }
2814   if (data[0].length === 0) {
2815     console.error("Data set cannot contain an empty row");
2816     return null;
2817   }
2818 
2819   validateNativeFormat(data);
2820 
2821   var i;
2822   if (this.attr_("labels") === null) {
2823     console.warn("Using default labels. Set labels explicitly via 'labels' " +
2824                  "in the options parameter");
2825     this.attrs_.labels = [ "X" ];
2826     for (i = 1; i < data[0].length; i++) {
2827       this.attrs_.labels.push("Y" + i); // Not user_attrs_.
2828     }
2829     this.attributes_.reparseSeries();
2830   } else {
2831     var num_labels = this.attr_("labels");
2832     if (num_labels.length != data[0].length) {
2833       console.error("Mismatch between number of labels (" + num_labels + ")" +
2834                     " and number of columns in array (" + data[0].length + ")");
2835       return null;
2836     }
2837   }
2838 
2839   if (utils.isDateLike(data[0][0])) {
2840     // Some intelligent defaults for a date x-axis.
2841     this.attrs_.axes.x.valueFormatter = utils.dateValueFormatter;
2842     this.attrs_.axes.x.ticker = DygraphTickers.dateTicker;
2843     this.attrs_.axes.x.axisLabelFormatter = utils.dateAxisLabelFormatter;
2844 
2845     // Assume they're all dates.
2846     var parsedData = utils.clone(data);
2847     for (i = 0; i < data.length; i++) {
2848       if (parsedData[i].length === 0) {
2849         console.error("Row " + (1 + i) + " of data is empty");
2850         return null;
2851       }
2852       if (parsedData[i][0] === null ||
2853           typeof(parsedData[i][0].getTime) != 'function' ||
2854           isNaN(parsedData[i][0].getTime())) {
2855         console.error("x value in row " + (1 + i) + " is not a Date");
2856         return null;
2857       }
2858       parsedData[i][0] = parsedData[i][0].getTime();
2859     }
2860     return parsedData;
2861   } else {
2862     // Some intelligent defaults for a numeric x-axis.
2863     /** @private (shut up, jsdoc!) */
2864     this.attrs_.axes.x.valueFormatter = function(x) { return x; };
2865     this.attrs_.axes.x.ticker = DygraphTickers.numericTicks;
2866     this.attrs_.axes.x.axisLabelFormatter = utils.numberAxisLabelFormatter;
2867     return data;
2868   }
2869 };
2870 
2871 /**
2872  * Parses a DataTable object from gviz.
2873  * The data is expected to have a first column that is either a date or a
2874  * number. All subsequent columns must be numbers. If there is a clear mismatch
2875  * between this.xValueParser_ and the type of the first column, it will be
2876  * fixed. Fills out rawData_.
2877  * @param {!google.visualization.DataTable} data See above.
2878  * @private
2879  */
2880 Dygraph.prototype.parseDataTable_ = function(data) {
2881   var shortTextForAnnotationNum = function(num) {
2882     // converts [0-9]+ [A-Z][a-z]*
2883     // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
2884     // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
2885     var shortText = String.fromCharCode(65 /* A */ + num % 26);
2886     num = Math.floor(num / 26);
2887     while ( num > 0 ) {
2888       shortText = String.fromCharCode(65 /* A */ + (num - 1) % 26 ) + shortText.toLowerCase();
2889       num = Math.floor((num - 1) / 26);
2890     }
2891     return shortText;
2892   };
2893 
2894   var cols = data.getNumberOfColumns();
2895   var rows = data.getNumberOfRows();
2896 
2897   var indepType = data.getColumnType(0);
2898   if (indepType == 'date' || indepType == 'datetime') {
2899     this.attrs_.xValueParser = utils.dateParser;
2900     this.attrs_.axes.x.valueFormatter = utils.dateValueFormatter;
2901     this.attrs_.axes.x.ticker = DygraphTickers.dateTicker;
2902     this.attrs_.axes.x.axisLabelFormatter = utils.dateAxisLabelFormatter;
2903   } else if (indepType == 'number') {
2904     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2905     this.attrs_.axes.x.valueFormatter = function(x) { return x; };
2906     this.attrs_.axes.x.ticker = DygraphTickers.numericTicks;
2907     this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
2908   } else {
2909     throw new Error(
2910           "only 'date', 'datetime' and 'number' types are supported " +
2911           "for column 1 of DataTable input (Got '" + indepType + "')");
2912   }
2913 
2914   // Array of the column indices which contain data (and not annotations).
2915   var colIdx = [];
2916   var annotationCols = {};  // data index -> [annotation cols]
2917   var hasAnnotations = false;
2918   var i, j;
2919   for (i = 1; i < cols; i++) {
2920     var type = data.getColumnType(i);
2921     if (type == 'number') {
2922       colIdx.push(i);
2923     } else if (type == 'string' && this.getBooleanOption('displayAnnotations')) {
2924       // This is OK -- it's an annotation column.
2925       var dataIdx = colIdx[colIdx.length - 1];
2926       if (!annotationCols.hasOwnProperty(dataIdx)) {
2927         annotationCols[dataIdx] = [i];
2928       } else {
2929         annotationCols[dataIdx].push(i);
2930       }
2931       hasAnnotations = true;
2932     } else {
2933       throw new Error(
2934           "Only 'number' is supported as a dependent type with Gviz." +
2935           " 'string' is only supported if displayAnnotations is true");
2936     }
2937   }
2938 
2939   // Read column labels
2940   // TODO(danvk): add support back for errorBars
2941   var labels = [data.getColumnLabel(0)];
2942   for (i = 0; i < colIdx.length; i++) {
2943     labels.push(data.getColumnLabel(colIdx[i]));
2944     if (this.getBooleanOption("errorBars")) i += 1;
2945   }
2946   this.attrs_.labels = labels;
2947   cols = labels.length;
2948 
2949   var ret = [];
2950   var outOfOrder = false;
2951   var annotations = [];
2952   for (i = 0; i < rows; i++) {
2953     var row = [];
2954     if (typeof(data.getValue(i, 0)) === 'undefined' ||
2955         data.getValue(i, 0) === null) {
2956       console.warn("Ignoring row " + i +
2957                    " of DataTable because of undefined or null first column.");
2958       continue;
2959     }
2960 
2961     if (indepType == 'date' || indepType == 'datetime') {
2962       row.push(data.getValue(i, 0).getTime());
2963     } else {
2964       row.push(data.getValue(i, 0));
2965     }
2966     if (!this.getBooleanOption("errorBars")) {
2967       for (j = 0; j < colIdx.length; j++) {
2968         var col = colIdx[j];
2969         row.push(data.getValue(i, col));
2970         if (hasAnnotations &&
2971             annotationCols.hasOwnProperty(col) &&
2972             data.getValue(i, annotationCols[col][0]) !== null) {
2973           var ann = {};
2974           ann.series = data.getColumnLabel(col);
2975           ann.xval = row[0];
2976           ann.shortText = shortTextForAnnotationNum(annotations.length);
2977           ann.text = '';
2978           for (var k = 0; k < annotationCols[col].length; k++) {
2979             if (k) ann.text += "\n";
2980             ann.text += data.getValue(i, annotationCols[col][k]);
2981           }
2982           annotations.push(ann);
2983         }
2984       }
2985 
2986       // Strip out infinities, which give dygraphs problems later on.
2987       for (j = 0; j < row.length; j++) {
2988         if (!isFinite(row[j])) row[j] = null;
2989       }
2990     } else {
2991       for (j = 0; j < cols - 1; j++) {
2992         row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
2993       }
2994     }
2995     if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
2996       outOfOrder = true;
2997     }
2998     ret.push(row);
2999   }
3000 
3001   if (outOfOrder) {
3002     console.warn("DataTable is out of order; order it correctly to speed loading.");
3003     ret.sort(function(a,b) { return a[0] - b[0]; });
3004   }
3005   this.rawData_ = ret;
3006 
3007   if (annotations.length > 0) {
3008     this.setAnnotations(annotations, true);
3009   }
3010   this.attributes_.reparseSeries();
3011 };
3012 
3013 /**
3014  * Signals to plugins that the chart data has updated.
3015  * This happens after the data has updated but before the chart has redrawn.
3016  * @private
3017  */
3018 Dygraph.prototype.cascadeDataDidUpdateEvent_ = function() {
3019   // TODO(danvk): there are some issues checking xAxisRange() and using
3020   // toDomCoords from handlers of this event. The visible range should be set
3021   // when the chart is drawn, not derived from the data.
3022   this.cascadeEvents_('dataDidUpdate', {});
3023 };
3024 
3025 /**
3026  * Get the CSV data. If it's in a function, call that function. If it's in a
3027  * file, do an XMLHttpRequest to get it.
3028  * @private
3029  */
3030 Dygraph.prototype.start_ = function() {
3031   var data = this.file_;
3032 
3033   // Functions can return references of all other types.
3034   if (typeof data == 'function') {
3035     data = data();
3036   }
3037 
3038   if (utils.isArrayLike(data)) {
3039     this.rawData_ = this.parseArray_(data);
3040     this.cascadeDataDidUpdateEvent_();
3041     this.predraw_();
3042   } else if (typeof data == 'object' &&
3043              typeof data.getColumnRange == 'function') {
3044     // must be a DataTable from gviz.
3045     this.parseDataTable_(data);
3046     this.cascadeDataDidUpdateEvent_();
3047     this.predraw_();
3048   } else if (typeof data == 'string') {
3049     // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
3050     var line_delimiter = utils.detectLineDelimiter(data);
3051     if (line_delimiter) {
3052       this.loadedEvent_(data);
3053     } else {
3054       // REMOVE_FOR_IE
3055       var req;
3056       if (window.XMLHttpRequest) {
3057         // Firefox, Opera, IE7, and other browsers will use the native object
3058         req = new XMLHttpRequest();
3059       } else {
3060         // IE 5 and 6 will use the ActiveX control
3061         req = new ActiveXObject("Microsoft.XMLHTTP");
3062       }
3063 
3064       var caller = this;
3065       req.onreadystatechange = function () {
3066         if (req.readyState == 4) {
3067           if (req.status === 200 ||  // Normal http
3068               req.status === 0) {    // Chrome w/ --allow-file-access-from-files
3069             caller.loadedEvent_(req.responseText);
3070           }
3071         }
3072       };
3073 
3074       req.open("GET", data, true);
3075       req.send(null);
3076     }
3077   } else {
3078     console.error("Unknown data format: " + (typeof data));
3079   }
3080 };
3081 
3082 /**
3083  * Changes various properties of the graph. These can include:
3084  * <ul>
3085  * <li>file: changes the source data for the graph</li>
3086  * <li>errorBars: changes whether the data contains stddev</li>
3087  * </ul>
3088  *
3089  * There's a huge variety of options that can be passed to this method. For a
3090  * full list, see http://dygraphs.com/options.html.
3091  *
3092  * @param {Object} input_attrs The new properties and values
3093  * @param {boolean} block_redraw Usually the chart is redrawn after every
3094  *     call to updateOptions(). If you know better, you can pass true to
3095  *     explicitly block the redraw. This can be useful for chaining
3096  *     updateOptions() calls, avoiding the occasional infinite loop and
3097  *     preventing redraws when it's not necessary (e.g. when updating a
3098  *     callback).
3099  */
3100 Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
3101   if (typeof(block_redraw) == 'undefined') block_redraw = false;
3102 
3103   // copyUserAttrs_ drops the "file" parameter as a convenience to us.
3104   var file = input_attrs.file;
3105   var attrs = Dygraph.copyUserAttrs_(input_attrs);
3106 
3107   // TODO(danvk): this is a mess. Move these options into attr_.
3108   if ('rollPeriod' in attrs) {
3109     this.rollPeriod_ = attrs.rollPeriod;
3110   }
3111   if ('dateWindow' in attrs) {
3112     this.dateWindow_ = attrs.dateWindow;
3113   }
3114 
3115   // TODO(danvk): validate per-series options.
3116   // Supported:
3117   // strokeWidth
3118   // pointSize
3119   // drawPoints
3120   // highlightCircleSize
3121 
3122   // Check if this set options will require new points.
3123   var requiresNewPoints = utils.isPixelChangingOptionList(this.attr_("labels"), attrs);
3124 
3125   utils.updateDeep(this.user_attrs_, attrs);
3126 
3127   this.attributes_.reparseSeries();
3128 
3129   if (file) {
3130     // This event indicates that the data is about to change, but hasn't yet.
3131     // TODO(danvk): support cancellation of the update via this event.
3132     this.cascadeEvents_('dataWillUpdate', {});
3133 
3134     this.file_ = file;
3135     if (!block_redraw) this.start_();
3136   } else {
3137     if (!block_redraw) {
3138       if (requiresNewPoints) {
3139         this.predraw_();
3140       } else {
3141         this.renderGraph_(false);
3142       }
3143     }
3144   }
3145 };
3146 
3147 /**
3148  * Make a copy of input attributes, removing file as a convenience.
3149  * @private
3150  */
3151 Dygraph.copyUserAttrs_ = function(attrs) {
3152   var my_attrs = {};
3153   for (var k in attrs) {
3154     if (!attrs.hasOwnProperty(k)) continue;
3155     if (k == 'file') continue;
3156     if (attrs.hasOwnProperty(k)) my_attrs[k] = attrs[k];
3157   }
3158   return my_attrs;
3159 };
3160 
3161 /**
3162  * Resizes the dygraph. If no parameters are specified, resizes to fill the
3163  * containing div (which has presumably changed size since the dygraph was
3164  * instantiated. If the width/height are specified, the div will be resized.
3165  *
3166  * This is far more efficient than destroying and re-instantiating a
3167  * Dygraph, since it doesn't have to reparse the underlying data.
3168  *
3169  * @param {number} width Width (in pixels)
3170  * @param {number} height Height (in pixels)
3171  */
3172 Dygraph.prototype.resize = function(width, height) {
3173   if (this.resize_lock) {
3174     return;
3175   }
3176   this.resize_lock = true;
3177 
3178   if ((width === null) != (height === null)) {
3179     console.warn("Dygraph.resize() should be called with zero parameters or " +
3180                  "two non-NULL parameters. Pretending it was zero.");
3181     width = height = null;
3182   }
3183 
3184   var old_width = this.width_;
3185   var old_height = this.height_;
3186 
3187   if (width) {
3188     this.maindiv_.style.width = width + "px";
3189     this.maindiv_.style.height = height + "px";
3190     this.width_ = width;
3191     this.height_ = height;
3192   } else {
3193     this.width_ = this.maindiv_.clientWidth;
3194     this.height_ = this.maindiv_.clientHeight;
3195   }
3196 
3197   if (old_width != this.width_ || old_height != this.height_) {
3198     // Resizing a canvas erases it, even when the size doesn't change, so
3199     // any resize needs to be followed by a redraw.
3200     this.resizeElements_();
3201     this.predraw_();
3202   }
3203 
3204   this.resize_lock = false;
3205 };
3206 
3207 /**
3208  * Adjusts the number of points in the rolling average. Updates the graph to
3209  * reflect the new averaging period.
3210  * @param {number} length Number of points over which to average the data.
3211  */
3212 Dygraph.prototype.adjustRoll = function(length) {
3213   this.rollPeriod_ = length;
3214   this.predraw_();
3215 };
3216 
3217 /**
3218  * Returns a boolean array of visibility statuses.
3219  */
3220 Dygraph.prototype.visibility = function() {
3221   // Do lazy-initialization, so that this happens after we know the number of
3222   // data series.
3223   if (!this.getOption("visibility")) {
3224     this.attrs_.visibility = [];
3225   }
3226   // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs.
3227   while (this.getOption("visibility").length < this.numColumns() - 1) {
3228     this.attrs_.visibility.push(true);
3229   }
3230   return this.getOption("visibility");
3231 };
3232 
3233 /**
3234  * Changes the visibility of one or more series.
3235  *
3236  * @param {number|number[]|object} num the series index or an array of series indices
3237  *                                     or a boolean array of visibility states by index
3238  *                                     or an object mapping series numbers, as keys, to
3239  *                                     visibility state (boolean values)
3240  * @param {boolean} value the visibility state expressed as a boolean
3241  */
3242 Dygraph.prototype.setVisibility = function(num, value) {
3243   var x = this.visibility();
3244   var numIsObject = false;
3245 
3246   if (!Array.isArray(num)) {
3247     if (num !== null && typeof num === 'object') {
3248       numIsObject = true;
3249     } else {
3250       num = [num];
3251     }
3252   }
3253 
3254   if (numIsObject) {
3255     for (var i in num) {
3256       if (num.hasOwnProperty(i)) {
3257         if (i < 0 || i >= x.length) {
3258           console.warn("Invalid series number in setVisibility: " + i);
3259         } else {
3260           x[i] = num[i];
3261         }
3262       }
3263     }
3264   } else {
3265     for (var i = 0; i < num.length; i++) {
3266       if (typeof num[i] === 'boolean') {
3267         if (i >= x.length) {
3268           console.warn("Invalid series number in setVisibility: " + i);
3269         } else {
3270           x[i] = num[i];
3271         }
3272       } else {
3273         if (num[i] < 0 || num[i] >= x.length) {
3274           console.warn("Invalid series number in setVisibility: " + num[i]);
3275         } else {
3276           x[num[i]] = value;
3277         }
3278       }
3279     }
3280   }
3281 
3282   this.predraw_();
3283 };
3284 
3285 /**
3286  * How large of an area will the dygraph render itself in?
3287  * This is used for testing.
3288  * @return A {width: w, height: h} object.
3289  * @private
3290  */
3291 Dygraph.prototype.size = function() {
3292   return { width: this.width_, height: this.height_ };
3293 };
3294 
3295 /**
3296  * Update the list of annotations and redraw the chart.
3297  * See dygraphs.com/annotations.html for more info on how to use annotations.
3298  * @param ann {Array} An array of annotation objects.
3299  * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
3300  */
3301 Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3302   // Only add the annotation CSS rule once we know it will be used.
3303   this.annotations_ = ann;
3304   if (!this.layout_) {
3305     console.warn("Tried to setAnnotations before dygraph was ready. " +
3306                  "Try setting them in a ready() block. See " +
3307                  "dygraphs.com/tests/annotation.html");
3308     return;
3309   }
3310 
3311   this.layout_.setAnnotations(this.annotations_);
3312   if (!suppressDraw) {
3313     this.predraw_();
3314   }
3315 };
3316 
3317 /**
3318  * Return the list of annotations.
3319  */
3320 Dygraph.prototype.annotations = function() {
3321   return this.annotations_;
3322 };
3323 
3324 /**
3325  * Get the list of label names for this graph. The first column is the
3326  * x-axis, so the data series names start at index 1.
3327  *
3328  * Returns null when labels have not yet been defined.
3329  */
3330 Dygraph.prototype.getLabels = function() {
3331   var labels = this.attr_("labels");
3332   return labels ? labels.slice() : null;
3333 };
3334 
3335 /**
3336  * Get the index of a series (column) given its name. The first column is the
3337  * x-axis, so the data series start with index 1.
3338  */
3339 Dygraph.prototype.indexFromSetName = function(name) {
3340   return this.setIndexByName_[name];
3341 };
3342 
3343 /**
3344  * Find the row number corresponding to the given x-value.
3345  * Returns null if there is no such x-value in the data.
3346  * If there are multiple rows with the same x-value, this will return the
3347  * first one.
3348  * @param {number} xVal The x-value to look for (e.g. millis since epoch).
3349  * @return {?number} The row number, which you can pass to getValue(), or null.
3350  */
3351 Dygraph.prototype.getRowForX = function(xVal) {
3352   var low = 0,
3353       high = this.numRows() - 1;
3354 
3355   while (low <= high) {
3356     var idx = (high + low) >> 1;
3357     var x = this.getValue(idx, 0);
3358     if (x < xVal) {
3359       low = idx + 1;
3360     } else if (x > xVal) {
3361       high = idx - 1;
3362     } else if (low != idx) {  // equal, but there may be an earlier match.
3363       high = idx;
3364     } else {
3365       return idx;
3366     }
3367   }
3368 
3369   return null;
3370 };
3371 
3372 /**
3373  * Trigger a callback when the dygraph has drawn itself and is ready to be
3374  * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3375  * data (i.e. a URL is passed as the data source) and the chart is drawn
3376  * asynchronously. If the chart has already drawn, the callback will fire
3377  * immediately.
3378  *
3379  * This is a good place to call setAnnotation().
3380  *
3381  * @param {function(!Dygraph)} callback The callback to trigger when the chart
3382  *     is ready.
3383  */
3384 Dygraph.prototype.ready = function(callback) {
3385   if (this.is_initial_draw_) {
3386     this.readyFns_.push(callback);
3387   } else {
3388     callback.call(this, this);
3389   }
3390 };
3391 
3392 /**
3393  * Add an event handler. This event handler is kept until the graph is
3394  * destroyed with a call to graph.destroy().
3395  *
3396  * @param {!Node} elem The element to add the event to.
3397  * @param {string} type The type of the event, e.g. 'click' or 'mousemove'.
3398  * @param {function(Event):(boolean|undefined)} fn The function to call
3399  *     on the event. The function takes one parameter: the event object.
3400  * @private
3401  */
3402 Dygraph.prototype.addAndTrackEvent = function(elem, type, fn) {
3403   utils.addEvent(elem, type, fn);
3404   this.registeredEvents_.push({elem, type, fn});
3405 };
3406 
3407 Dygraph.prototype.removeTrackedEvents_ = function() {
3408   if (this.registeredEvents_) {
3409     for (var idx = 0; idx < this.registeredEvents_.length; idx++) {
3410       var reg = this.registeredEvents_[idx];
3411       utils.removeEvent(reg.elem, reg.type, reg.fn);
3412     }
3413   }
3414 
3415   this.registeredEvents_ = [];
3416 };
3417 
3418 
3419 // Installed plugins, in order of precedence (most-general to most-specific).
3420 Dygraph.PLUGINS = [
3421   LegendPlugin,
3422   AxesPlugin,
3423   RangeSelectorPlugin, // Has to be before ChartLabels so that its callbacks are called after ChartLabels' callbacks.
3424   ChartLabelsPlugin,
3425   AnnotationsPlugin,
3426   GridPlugin
3427 ];
3428 
3429 // There are many symbols which have historically been available through the
3430 // Dygraph class. These are exported here for backwards compatibility.
3431 Dygraph.GVizChart = GVizChart;
3432 Dygraph.DASHED_LINE = utils.DASHED_LINE;
3433 Dygraph.DOT_DASH_LINE = utils.DOT_DASH_LINE;
3434 Dygraph.dateAxisLabelFormatter = utils.dateAxisLabelFormatter;
3435 Dygraph.toRGB_ = utils.toRGB_;
3436 Dygraph.findPos = utils.findPos;
3437 Dygraph.pageX = utils.pageX;
3438 Dygraph.pageY = utils.pageY;
3439 Dygraph.dateString_ = utils.dateString_;
3440 Dygraph.defaultInteractionModel = DygraphInteraction.defaultModel;
3441 Dygraph.nonInteractiveModel = Dygraph.nonInteractiveModel_ = DygraphInteraction.nonInteractiveModel_;
3442 Dygraph.Circles = utils.Circles;
3443 
3444 Dygraph.Plugins = {
3445   Legend: LegendPlugin,
3446   Axes: AxesPlugin,
3447   Annotations: AnnotationsPlugin,
3448   ChartLabels: ChartLabelsPlugin,
3449   Grid: GridPlugin,
3450   RangeSelector: RangeSelectorPlugin
3451 };
3452 
3453 Dygraph.DataHandlers = {
3454   DefaultHandler,
3455   BarsHandler,
3456   CustomBarsHandler,
3457   DefaultFractionHandler,
3458   ErrorBarsHandler,
3459   FractionsBarsHandler
3460 };
3461 
3462 Dygraph.startPan = DygraphInteraction.startPan;
3463 Dygraph.startZoom = DygraphInteraction.startZoom;
3464 Dygraph.movePan = DygraphInteraction.movePan;
3465 Dygraph.moveZoom = DygraphInteraction.moveZoom;
3466 Dygraph.endPan = DygraphInteraction.endPan;
3467 Dygraph.endZoom = DygraphInteraction.endZoom;
3468 
3469 Dygraph.numericLinearTicks = DygraphTickers.numericLinearTicks;
3470 Dygraph.numericTicks = DygraphTickers.numericTicks;
3471 Dygraph.dateTicker = DygraphTickers.dateTicker;
3472 Dygraph.Granularity = DygraphTickers.Granularity;
3473 Dygraph.getDateAxis = DygraphTickers.getDateAxis;
3474 Dygraph.floatFormat = utils.floatFormat;
3475 
3476 export default Dygraph;
3477