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