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