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