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