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