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