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