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