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