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