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