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