Merge pull request #284 from klausw-g/issue-466-regression-test
[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) {
2369 // Interpolate/extend for stacking purposes if possible.
2370 updateNextPoint(i);
2371 if (prevPoint && nextPoint && fillMethod != 'none') {
2372 // Use linear interpolation between prevPoint and nextPoint.
2373 actualYval = prevPoint.yval + (nextPoint.yval - prevPoint.yval) *
2374 ((xval - prevPoint.xval) / (nextPoint.xval - prevPoint.xval));
2375 } else if (prevPoint && fillMethod == 'all') {
2376 actualYval = prevPoint.yval;
2377 } else if (nextPoint && fillMethod == 'all') {
2378 actualYval = nextPoint.yval;
2379 } else {
2380 actualYval = 0;
2381 }
2382 } else {
2383 prevPoint = point;
2384 }
2385
2386 var stackedYval = cumulativeYval[xval];
2387 if (lastXval != xval) {
2388 // If an x-value is repeated, we ignore the duplicates.
2389 stackedYval += actualYval;
2390 cumulativeYval[xval] = stackedYval;
2391 }
2392 lastXval = xval;
2393
2394 point.yval_stacked = stackedYval;
2395
2396 if (stackedYval > seriesExtremes[1]) {
2397 seriesExtremes[1] = stackedYval;
2398 }
2399 if (stackedYval < seriesExtremes[0]) {
2400 seriesExtremes[0] = stackedYval;
2401 }
2402 }
2403};
2404
2405
2406/**
b1a3b195
DV
2407 * Loop over all fields and create datasets, calculating extreme y-values for
2408 * each series and extreme x-indices as we go.
fc4e84fa 2409 *
b1a3b195
DV
2410 * dateWindow is passed in as an explicit parameter so that we can compute
2411 * extreme values "speculatively", i.e. without actually setting state on the
2412 * dygraph.
fc4e84fa 2413 *
30a5cfc6
KW
2414 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2415 * rolledSeries[seriesIndex][row] = raw point, where
2416 * seriesIndex is the column number starting with 1, and
2417 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2418 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2419 * @return {{
2420 * points: Array.<Array.<Dygraph.PointType>>,
2421 * seriesExtremes: Array.<Array.<number>>,
2422 * boundaryIds: Array.<number>}}
6a1aa64f
DV
2423 * @private
2424 */
b1a3b195
DV
2425Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
2426 var boundaryIds = [];
30a5cfc6
KW
2427 var points = [];
2428 var cumulativeYval = []; // For stacked series.
f09fc545 2429 var extremes = {}; // series name -> [low, high]
a49c164a
DE
2430 var seriesIdx, sampleIdx;
2431 var firstIdx, lastIdx;
2432
b1a3b195
DV
2433 // Loop over the fields (series). Go from the last to the first,
2434 // because if they're stacked that's how we accumulate the values.
2435 var num_series = rolledSeries.length - 1;
bcc53a77 2436 var series;
a49c164a
DE
2437 for (seriesIdx = num_series; seriesIdx >= 1; seriesIdx--) {
2438 if (!this.visibility()[seriesIdx - 1]) continue;
1cf11047 2439
6a1aa64f 2440 // Prune down to the desired range, if necessary (for zooming)
1a26f3fb
DV
2441 // Because there can be lines going to points outside of the visible area,
2442 // we actually prune to visible points, plus one on either side.
b1a3b195 2443 if (dateWindow) {
a49c164a 2444 series = rolledSeries[seriesIdx];
b1a3b195
DV
2445 var low = dateWindow[0];
2446 var high = dateWindow[1];
4e59e63e 2447
1a26f3fb
DV
2448 // TODO(danvk): do binary search instead of linear search.
2449 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
a49c164a
DE
2450 firstIdx = null;
2451 lastIdx = null;
2452 for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) {
2453 if (series[sampleIdx][0] >= low && firstIdx === null) {
2454 firstIdx = sampleIdx;
1a26f3fb 2455 }
a49c164a
DE
2456 if (series[sampleIdx][0] <= high) {
2457 lastIdx = sampleIdx;
6a1aa64f
DV
2458 }
2459 }
4e59e63e 2460
1a26f3fb 2461 if (firstIdx === null) firstIdx = 0;
14ac984e 2462 var correctedFirstIdx = firstIdx;
b0375a28 2463 var isInvalidValue = true;
4e59e63e 2464 while (isInvalidValue && correctedFirstIdx > 0) {
14ac984e 2465 correctedFirstIdx--;
a49c164a
DE
2466 // check if the y value is null.
2467 isInvalidValue = series[correctedFirstIdx][1] === null;
14ac984e 2468 }
4e59e63e 2469
1a26f3fb 2470 if (lastIdx === null) lastIdx = series.length - 1;
14ac984e 2471 var correctedLastIdx = lastIdx;
b0375a28 2472 isInvalidValue = true;
4e59e63e 2473 while (isInvalidValue && correctedLastIdx < series.length - 1) {
14ac984e 2474 correctedLastIdx++;
a49c164a 2475 isInvalidValue = series[correctedLastIdx][1] === null;
14ac984e 2476 }
4e59e63e 2477
4e59e63e 2478 if (correctedFirstIdx!==firstIdx) {
30a5cfc6 2479 firstIdx = correctedFirstIdx;
6a1aa64f 2480 }
4e59e63e 2481 if (correctedLastIdx !== lastIdx) {
30a5cfc6 2482 lastIdx = correctedLastIdx;
4e59e63e 2483 }
55231c07 2484
a49c164a 2485 boundaryIds[seriesIdx-1] = [firstIdx, lastIdx];
55231c07 2486
30a5cfc6
KW
2487 // .slice's end is exclusive, we want to include lastIdx.
2488 series = series.slice(firstIdx, lastIdx + 1);
16269f6e 2489 } else {
a49c164a
DE
2490 series = rolledSeries[seriesIdx];
2491 boundaryIds[seriesIdx-1] = [0, series.length-1];
6a1aa64f
DV
2492 }
2493
a49c164a
DE
2494 var seriesName = this.attr_("labels")[seriesIdx];
2495 var seriesExtremes = this.dataHandler_.getExtremeYValues(series,
b0963cdb 2496 dateWindow, this.getBooleanOption("stepPlot",seriesName));
5011e7a1 2497
a49c164a
DE
2498 var seriesPoints = this.dataHandler_.seriesToPoints(series,
2499 seriesName, boundaryIds[seriesIdx-1][0]);
43af96e7 2500
b0963cdb 2501 if (this.getBooleanOption("stackedGraph")) {
30a5cfc6 2502 Dygraph.stackPoints_(seriesPoints, cumulativeYval, seriesExtremes,
b0963cdb 2503 this.getBooleanOption("stackedGraphNaNFill"));
6a1aa64f 2504 }
354e15ab 2505
b1a3b195 2506 extremes[seriesName] = seriesExtremes;
a49c164a 2507 points[seriesIdx] = seriesPoints;
7d463f49
KW
2508 }
2509
30a5cfc6 2510 return { points: points, extremes: extremes, boundaryIds: boundaryIds };
b1a3b195
DV
2511};
2512
2513/**
2514 * Update the graph with new data. This method is called when the viewing area
2515 * has changed. If the underlying data or options have changed, predraw_ will
2516 * be called before drawGraph_ is called.
2517 *
b1a3b195
DV
2518 * @private
2519 */
e2c21500 2520Dygraph.prototype.drawGraph_ = function() {
b1a3b195
DV
2521 var start = new Date();
2522
b1a3b195
DV
2523 // This is used to set the second parameter to drawCallback, below.
2524 var is_initial_draw = this.is_initial_draw_;
2525 this.is_initial_draw_ = false;
2526
b1a3b195
DV
2527 this.layout_.removeAllDatasets();
2528 this.setColors_();
b0963cdb 2529 this.attrs_.pointSize = 0.5 * this.getNumericOption('highlightCircleSize');
b1a3b195
DV
2530
2531 var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_);
30a5cfc6
KW
2532 var points = packed.points;
2533 var extremes = packed.extremes;
2534 this.boundaryIds_ = packed.boundaryIds;
b1a3b195 2535
82c6fe4d
KW
2536 this.setIndexByName_ = {};
2537 var labels = this.attr_("labels");
2538 if (labels.length > 0) {
2539 this.setIndexByName_[labels[0]] = 0;
2540 }
857a6931 2541 var dataIdx = 0;
30a5cfc6 2542 for (var i = 1; i < points.length; i++) {
82c6fe4d 2543 this.setIndexByName_[labels[i]] = i;
4523c1f6 2544 if (!this.visibility()[i - 1]) continue;
30a5cfc6 2545 this.layout_.addDataset(labels[i], points[i]);
857a6931 2546 this.datasetIndex_[i] = dataIdx++;
43af96e7
NK
2547 }
2548
6faebb69 2549 this.computeYAxisRanges_(extremes);
b2c9222a
DV
2550 this.layout_.setYAxes(this.axes_);
2551
6a1aa64f
DV
2552 this.addXTicks_();
2553
b2c9222a 2554 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
81856f70 2555 var tmp_zoomed_x = this.zoomed_x_;
6a1aa64f 2556 // Tell PlotKit to use this new data and render itself
81856f70 2557 this.zoomed_x_ = tmp_zoomed_x;
30a5cfc6 2558 this.layout_.evaluate();
e2c21500 2559 this.renderGraph_(is_initial_draw);
9ca829f2 2560
b0963cdb 2561 if (this.getStringOption("timingName")) {
9ca829f2 2562 var end = new Date();
b0963cdb 2563 Dygraph.info(this.getStringOption("timingName") + " - drawGraph: " + (end - start) + "ms");
9ca829f2
DV
2564 }
2565};
2566
e2c21500
DV
2567/**
2568 * This does the work of drawing the chart. It assumes that the layout and axis
2569 * scales have already been set (e.g. by predraw_).
2570 *
2571 * @private
2572 */
2573Dygraph.prototype.renderGraph_ = function(is_initial_draw) {
1748a51c 2574 this.cascadeEvents_('clearChart');
6a1aa64f 2575 this.plotter_.clear();
f417e3d3 2576
b0963cdb 2577 if (this.getFunctionOption('underlayCallback')) {
98eb4713
DV
2578 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2579 // users who expect a deprecated form of this callback.
b0963cdb 2580 this.getFunctionOption('underlayCallback')(
98eb4713
DV
2581 this.hidden_ctx_, this.layout_.getPlotArea(), this, this);
2582 }
2583
2584 var e = {
189f8030 2585 canvas: this.hidden_,
2de7166c 2586 drawingContext: this.hidden_ctx_
98eb4713
DV
2587 };
2588 this.cascadeEvents_('willDrawChart', e);
6a1aa64f 2589 this.plotter_.render();
98eb4713 2590 this.cascadeEvents_('didDrawChart', e);
fa11f4e4 2591 this.lastRow_ = -1; // because plugins/legend.js clears the legend
8cfe592f
DV
2592
2593 // TODO(danvk): is this a performance bottleneck when panning?
2594 // The interaction canvas should already be empty in that situation.
f6401bf6 2595 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2f5e7e1a 2596 this.canvas_.height);
599fb4ad 2597
b0963cdb
DV
2598 if (this.getFunctionOption("drawCallback") !== null) {
2599 this.getFunctionOption("drawCallback")(this, is_initial_draw);
599fb4ad 2600 }
5bcc58b4
DV
2601 if (is_initial_draw) {
2602 this.readyFired_ = true;
2603 while (this.readyFns_.length > 0) {
2604 var fn = this.readyFns_.pop();
2605 fn(this);
2606 }
2607 }
6a1aa64f
DV
2608};
2609
2610/**
629a09ae 2611 * @private
26ca7938
DV
2612 * Determine properties of the y-axes which are independent of the data
2613 * currently being displayed. This includes things like the number of axes and
2614 * the style of the axes. It does not include the range of each axis and its
2615 * tick marks.
16f00742 2616 * This fills in this.axes_.
26ca7938 2617 * axes_ = [ { options } ]
26ca7938 2618 * indices are into the axes_ array.
f09fc545 2619 */
26ca7938 2620Dygraph.prototype.computeYAxes_ = function() {
d64b8fea
RK
2621 // Preserve valueWindow settings if they exist, and if the user hasn't
2622 // specified a new valueRange.
0cd1ad15 2623 var valueWindows, axis, index, opts, v;
758a629f 2624 if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) {
d64b8fea 2625 valueWindows = [];
758a629f 2626 for (index = 0; index < this.axes_.length; index++) {
d64b8fea
RK
2627 valueWindows.push(this.axes_[index].valueWindow);
2628 }
2629 }
2630
6ad8b6a4
RK
2631 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2632 // data computation as well as options storage.
f09fc545 2633 // Go through once and add all the axes.
02c93ff5 2634 this.axes_ = [];
0d216a60 2635
02c93ff5 2636 for (axis = 0; axis < this.attributes_.numAxes(); axis++) {
6ad8b6a4 2637 // Add a new axis, making a copy of its per-axis options.
02c93ff5 2638 opts = { g : this };
6ad8b6a4
RK
2639 Dygraph.update(opts, this.attributes_.axisOptions(axis));
2640 this.axes_[axis] = opts;
f09fc545 2641 }
1c77a3a1 2642
7740dd00
RK
2643
2644 // Copy global valueRange option over to the first axis.
2645 // NOTE(konigsberg): Are these two statements necessary?
2646 // I tried removing it. The automated tests pass, and manually
2647 // messing with tests/zoom.html showed no trouble.
2648 v = this.attr_('valueRange');
2649 if (v) this.axes_[0].valueRange = v;
478b866b 2650
758a629f 2651 if (valueWindows !== undefined) {
d64b8fea 2652 // Restore valueWindow settings.
4ecb55b5
RK
2653
2654 // When going from two axes back to one, we only restore
2655 // one axis.
2656 var idxCount = Math.min(valueWindows.length, this.axes_.length);
2657
2658 for (index = 0; index < idxCount; index++) {
d64b8fea
RK
2659 this.axes_[index].valueWindow = valueWindows[index];
2660 }
2661 }
4dd0ac55 2662
4dd0ac55
RV
2663 for (axis = 0; axis < this.axes_.length; axis++) {
2664 if (axis === 0) {
2665 opts = this.optionsViewForAxis_('y' + (axis ? '2' : ''));
2666 v = opts("valueRange");
2667 if (v) this.axes_[axis].valueRange = v;
2668 } else { // To keep old behavior
2669 var axes = this.user_attrs_.axes;
2670 if (axes && axes.y2) {
2671 v = axes.y2.valueRange;
2672 if (v) this.axes_[axis].valueRange = v;
2673 }
2674 }
2675 }
26ca7938
DV
2676};
2677
2678/**
2679 * Returns the number of y-axes on the chart.
1bc88216 2680 * @return {number} the number of axes.
26ca7938
DV
2681 */
2682Dygraph.prototype.numAxes = function() {
16f00742 2683 return this.attributes_.numAxes();
26ca7938
DV
2684};
2685
2686/**
629a09ae 2687 * @private
b2c9222a 2688 * Returns axis properties for the given series.
1bc88216 2689 * @param {string} setName The name of the series for which to get axis
b2c9222a 2690 * properties, e.g. 'Y1'.
1bc88216 2691 * @return {Object} The axis properties.
b2c9222a
DV
2692 */
2693Dygraph.prototype.axisPropertiesForSeries = function(series) {
2694 // TODO(danvk): handle errors.
16f00742 2695 return this.axes_[this.attributes_.axisForSeries(series)];
b2c9222a
DV
2696};
2697
2698/**
2699 * @private
26ca7938
DV
2700 * Determine the value range and tick marks for each axis.
2701 * @param {Object} extremes A mapping from seriesName -> [low, high]
2702 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2703 */
2704Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
9adc2c33 2705 var isNullUndefinedOrNaN = function(num) {
126bf1e3 2706 return isNaN(parseFloat(num));
6b05851c 2707 };
16f00742 2708 var numAxes = this.attributes_.numAxes();
4bac38d8 2709 var ypadCompat, span, series, ypad;
9e906ae6
DE
2710
2711 var p_axis;
f09fc545
DV
2712
2713 // Compute extreme values, a span and tick marks for each axis.
16f00742 2714 for (var i = 0; i < numAxes; i++) {
26ca7938 2715 var axis = this.axes_[i];
ec40f67c
RK
2716 var logscale = this.attributes_.getForAxis("logscale", i);
2717 var includeZero = this.attributes_.getForAxis("includeZero", i);
9e906ae6 2718 var independentTicks = this.attributes_.getForAxis("independentTicks", i);
6ad8b6a4
RK
2719 series = this.attributes_.seriesForAxis(i);
2720
31a8d0cd 2721 // Add some padding. This supports two Y padding operation modes:
2722 //
2723 // - backwards compatible (yRangePad not set):
2724 // 10% padding for automatic Y ranges, but not for user-supplied
2725 // ranges, and move a close-to-zero edge to zero except if
2726 // avoidMinZero is set, since drawing at the edge results in
2727 // invisible lines. Unfortunately lines drawn at the edge of a
2728 // user-supplied range will still be invisible. If logscale is
2729 // set, add a variable amount of padding at the top but
2730 // none at the bottom.
2731 //
2732 // - new-style (yRangePad set by the user):
2733 // always add the specified Y padding.
2734 //
2735 ypadCompat = true;
2736 ypad = 0.1; // add 10%
b0963cdb 2737 if (this.getNumericOption('yRangePad') !== null) {
31a8d0cd 2738 ypadCompat = false;
2739 // Convert pixel padding to ratio
b0963cdb 2740 ypad = this.getNumericOption('yRangePad') / this.plotter_.area.h;
31a8d0cd 2741 }
2742
83b0c192 2743 if (series.length === 0) {
06fc69b6
AV
2744 // If no series are defined or visible then use a reasonable default
2745 axis.extremeRange = [0, 1];
2746 } else {
1c77a3a1 2747 // Calculate the extremes of extremes.
f09fc545
DV
2748 var minY = Infinity; // extremes[series[0]][0];
2749 var maxY = -Infinity; // extremes[series[0]][1];
ba049b89 2750 var extremeMinY, extremeMaxY;
a2da3777 2751
f09fc545 2752 for (var j = 0; j < series.length; j++) {
a2da3777
DV
2753 // this skips invisible series
2754 if (!extremes.hasOwnProperty(series[j])) continue;
2755
ba049b89
NN
2756 // Only use valid extremes to stop null data series' from corrupting the scale.
2757 extremeMinY = extremes[series[j]][0];
758a629f 2758 if (extremeMinY !== null) {
36dfa958 2759 minY = Math.min(extremeMinY, minY);
ba049b89
NN
2760 }
2761 extremeMaxY = extremes[series[j]][1];
758a629f 2762 if (extremeMaxY !== null) {
36dfa958 2763 maxY = Math.max(extremeMaxY, maxY);
ba049b89 2764 }
f09fc545 2765 }
fa460473
KW
2766
2767 // Include zero if requested by the user.
2768 if (includeZero && !logscale) {
2769 if (minY > 0) minY = 0;
2770 if (maxY < 0) maxY = 0;
2771 }
f09fc545 2772
a2da3777 2773 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
36dfa958 2774 if (minY == Infinity) minY = 0;
a2da3777 2775 if (maxY == -Infinity) maxY = 1;
ba049b89 2776
4bac38d8 2777 span = maxY - minY;
fa460473
KW
2778 // special case: if we have no sense of scale, center on the sole value.
2779 if (span === 0) {
2780 if (maxY !== 0) {
2781 span = Math.abs(maxY);
2782 } else {
2783 // ... and if the sole value is zero, use range 0-1.
2784 maxY = 1;
2785 span = 1;
2786 }
2787 }
2788
758a629f 2789 var maxAxisY, minAxisY;
ec40f67c 2790 if (logscale) {
fa460473
KW
2791 if (ypadCompat) {
2792 maxAxisY = maxY + ypad * span;
2793 minAxisY = minY;
2794 } else {
2795 var logpad = Math.exp(Math.log(span) * ypad);
2796 maxAxisY = maxY * logpad;
2797 minAxisY = minY / logpad;
2798 }
ff022deb 2799 } else {
fa460473
KW
2800 maxAxisY = maxY + ypad * span;
2801 minAxisY = minY - ypad * span;
f09fc545 2802
fa460473
KW
2803 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2804 // close to zero, but not if avoidMinZero is set.
b0963cdb 2805 if (ypadCompat && !this.getBooleanOption("avoidMinZero")) {
ff022deb
RK
2806 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2807 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2808 }
f09fc545 2809 }
4cac8c7a
RK
2810 axis.extremeRange = [minAxisY, maxAxisY];
2811 }
2812 if (axis.valueWindow) {
2813 // This is only set if the user has zoomed on the y-axis. It is never set
2814 // by a user. It takes precedence over axis.valueRange because, if you set
2815 // valueRange, you'd still expect to be able to pan.
2816 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
2817 } else if (axis.valueRange) {
2818 // This is a user-set value range for this axis.
fa460473
KW
2819 var y0 = isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0];
2820 var y1 = isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1];
2821 if (!ypadCompat) {
2822 if (axis.logscale) {
2823 var logpad = Math.exp(Math.log(span) * ypad);
2824 y0 *= logpad;
2825 y1 /= logpad;
2826 } else {
4bac38d8 2827 span = y1 - y0;
fa460473
KW
2828 y0 -= span * ypad;
2829 y1 += span * ypad;
2830 }
2831 }
2832 axis.computedValueRange = [y0, y1];
4cac8c7a
RK
2833 } else {
2834 axis.computedValueRange = axis.extremeRange;
f09fc545 2835 }
9e906ae6
DE
2836
2837
383d8473 2838 if (independentTicks) {
9e906ae6
DE
2839 axis.independentTicks = independentTicks;
2840 var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2841 var ticker = opts('ticker');
48e614ac 2842 axis.ticks = ticker(axis.computedValueRange[0],
9e906ae6
DE
2843 axis.computedValueRange[1],
2844 this.height_, // TODO(danvk): should be area.height
2845 opts,
2846 this);
6c5f8774 2847 // Define the first independent axis as primary axis.
e8b3c7b4 2848 if (!p_axis) p_axis = axis;
9e906ae6
DE
2849 }
2850 }
e8b3c7b4 2851 if (p_axis === undefined) {
eba6dd23 2852 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
e8b3c7b4 2853 }
9e906ae6
DE
2854 // Add ticks. By default, all axes inherit the tick positions of the
2855 // primary axis. However, if an axis is specifically marked as having
2856 // independent ticks, then that is permissible as well.
2857 for (var i = 0; i < numAxes; i++) {
2858 var axis = this.axes_[i];
2859
2860 if (!axis.independentTicks) {
2861 var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2862 var ticker = opts('ticker');
0d64e596
DV
2863 var p_ticks = p_axis.ticks;
2864 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2865 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2866 var tick_values = [];
25f76ae3
DV
2867 for (var k = 0; k < p_ticks.length; k++) {
2868 var y_frac = (p_ticks[k].v - p_axis.computedValueRange[0]) / p_scale;
0d64e596
DV
2869 var y_val = axis.computedValueRange[0] + y_frac * scale;
2870 tick_values.push(y_val);
2871 }
2872
48e614ac
DV
2873 axis.ticks = ticker(axis.computedValueRange[0],
2874 axis.computedValueRange[1],
2875 this.height_, // TODO(danvk): should be area.height
2876 opts,
2877 this,
2878 tick_values);
0d64e596 2879 }
34fc91d4 2880 }
f09fc545 2881};
25f76ae3 2882
f09fc545 2883/**
285a6bda
DV
2884 * Detects the type of the str (date or numeric) and sets the various
2885 * formatting attributes in this.attrs_ based on this type.
1bc88216 2886 * @param {string} str An x value.
285a6bda
DV
2887 * @private
2888 */
2889Dygraph.prototype.detectTypeFromString_ = function(str) {
2890 var isDate = false;
0842b24b
DV
2891 var dashPos = str.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2892 if ((dashPos > 0 && (str[dashPos-1] != 'e' && str[dashPos-1] != 'E')) ||
285a6bda
DV
2893 str.indexOf('/') >= 0 ||
2894 isNaN(parseFloat(str))) {
2895 isDate = true;
2896 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2897 // TODO(danvk): remove support for this format.
2898 isDate = true;
2899 }
2900
a716aff2
RK
2901 this.setXAxisOptions_(isDate);
2902};
2903
2904Dygraph.prototype.setXAxisOptions_ = function(isDate) {
285a6bda 2905 if (isDate) {
285a6bda 2906 this.attrs_.xValueParser = Dygraph.dateParser;
48e614ac
DV
2907 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
2908 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
2909 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda 2910 } else {
c39e1d93 2911 /** @private (shut up, jsdoc!) */
285a6bda 2912 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
48e614ac
DV
2913 // TODO(danvk): use Dygraph.numberValueFormatter here?
2914 /** @private (shut up, jsdoc!) */
2915 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
44462ba3 2916 this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
48e614ac 2917 this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
6a1aa64f 2918 }
83b0c192 2919};
6a1aa64f
DV
2920
2921/**
629a09ae 2922 * @private
6a1aa64f
DV
2923 * Parses a string in a special csv format. We expect a csv file where each
2924 * line is a date point, and the first field in each line is the date string.
2925 * We also expect that all remaining fields represent series.
285a6bda 2926 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f 2927 * date, series1, stddev1, series2, stddev2, ...
629a09ae 2928 * @param {[Object]} data See above.
285a6bda 2929 *
629a09ae 2930 * @return [Object] An array with one entry for each row. These entries
285a6bda
DV
2931 * are an array of cells in that row. The first entry is the parsed x-value for
2932 * the row. The second, third, etc. are the y-values. These can take on one of
2933 * three forms, depending on the CSV and constructor parameters:
2934 * 1. numeric value
2935 * 2. [ value, stddev ]
2936 * 3. [ low value, center value, high value ]
6a1aa64f 2937 */
285a6bda 2938Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f 2939 var ret = [];
e5763589
DV
2940 var line_delimiter = Dygraph.detectLineDelimiter(data);
2941 var lines = data.split(line_delimiter || "\n");
758a629f 2942 var vals, j;
3d67f03b
DV
2943
2944 // Use the default delimiter or fall back to a tab if that makes sense.
b0963cdb 2945 var delim = this.getStringOption('delimiter');
3d67f03b
DV
2946 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2947 delim = '\t';
2948 }
2949
285a6bda 2950 var start = 0;
d7beab6b
DV
2951 if (!('labels' in this.user_attrs_)) {
2952 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
285a6bda 2953 start = 1;
d7beab6b 2954 this.attrs_.labels = lines[0].split(delim); // NOTE: _not_ user_attrs_.
34825ef5 2955 this.attributes_.reparseSeries();
6a1aa64f 2956 }
5cd7ac68 2957 var line_no = 0;
03b522a4 2958
285a6bda
DV
2959 var xParser;
2960 var defaultParserSet = false; // attempt to auto-detect x value type
2961 var expectedCols = this.attr_("labels").length;
987840a2 2962 var outOfOrder = false;
6a1aa64f
DV
2963 for (var i = start; i < lines.length; i++) {
2964 var line = lines[i];
5cd7ac68 2965 line_no = i;
758a629f 2966 if (line.length === 0) continue; // skip blank lines
3d67f03b
DV
2967 if (line[0] == '#') continue; // skip comment lines
2968 var inFields = line.split(delim);
285a6bda 2969 if (inFields.length < 2) continue;
6a1aa64f
DV
2970
2971 var fields = [];
285a6bda
DV
2972 if (!defaultParserSet) {
2973 this.detectTypeFromString_(inFields[0]);
b0963cdb 2974 xParser = this.getFunctionOption("xValueParser");
285a6bda
DV
2975 defaultParserSet = true;
2976 }
2977 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
2978
2979 // If fractions are expected, parse the numbers as "A/B"
2980 if (this.fractions_) {
758a629f 2981 for (j = 1; j < inFields.length; j++) {
6a1aa64f 2982 // TODO(danvk): figure out an appropriate way to flag parse errors.
758a629f 2983 vals = inFields[j].split("/");
7219edb3 2984 if (vals.length != 2) {
464b5f50
DV
2985 Dygraph.error('Expected fractional "num/den" values in CSV data ' +
2986 "but found a value '" + inFields[j] + "' on line " +
2987 (1 + i) + " ('" + line + "') which is not of this form.");
7219edb3
DV
2988 fields[j] = [0, 0];
2989 } else {
55deb02f
DV
2990 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
2991 Dygraph.parseFloat_(vals[1], i, line)];
7219edb3 2992 }
6a1aa64f 2993 }
b0963cdb 2994 } else if (this.getBooleanOption("errorBars")) {
6a1aa64f 2995 // If there are error bars, values are (value, stddev) pairs
7219edb3 2996 if (inFields.length % 2 != 1) {
464b5f50
DV
2997 Dygraph.error('Expected alternating (value, stdev.) pairs in CSV data ' +
2998 'but line ' + (1 + i) + ' has an odd number of values (' +
2999 (inFields.length - 1) + "): '" + line + "'");
7219edb3 3000 }
758a629f 3001 for (j = 1; j < inFields.length; j += 2) {
55deb02f
DV
3002 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3003 Dygraph.parseFloat_(inFields[j + 1], i, line)];
7219edb3 3004 }
b0963cdb 3005 } else if (this.getBooleanOption("customBars")) {
6a1aa64f 3006 // Bars are a low;center;high tuple
758a629f 3007 for (j = 1; j < inFields.length; j++) {
327a9279
DV
3008 var val = inFields[j];
3009 if (/^ *$/.test(val)) {
3010 fields[j] = [null, null, null];
3011 } else {
758a629f 3012 vals = val.split(";");
327a9279 3013 if (vals.length == 3) {
55deb02f
DV
3014 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3015 Dygraph.parseFloat_(vals[1], i, line),
3016 Dygraph.parseFloat_(vals[2], i, line) ];
327a9279 3017 } else {
464b5f50
DV
3018 Dygraph.warn('When using customBars, values must be either blank ' +
3019 'or "low;center;high" tuples (got "' + val +
3020 '" on line ' + (1+i));
327a9279
DV
3021 }
3022 }
6a1aa64f
DV
3023 }
3024 } else {
3025 // Values are just numbers
758a629f 3026 for (j = 1; j < inFields.length; j++) {
55deb02f 3027 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
285a6bda 3028 }
6a1aa64f 3029 }
987840a2
DV
3030 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3031 outOfOrder = true;
3032 }
285a6bda
DV
3033
3034 if (fields.length != expectedCols) {
464b5f50
DV
3035 Dygraph.error("Number of columns in line " + i + " (" + fields.length +
3036 ") does not agree with number of labels (" + expectedCols +
3037 ") " + line);
285a6bda 3038 }
6d0aaa09
DV
3039
3040 // If the user specified the 'labels' option and none of the cells of the
3041 // first row parsed correctly, then they probably double-specified the
3042 // labels. We go with the values set in the option, discard this row and
3043 // log a warning to the JS console.
758a629f 3044 if (i === 0 && this.attr_('labels')) {
6d0aaa09 3045 var all_null = true;
758a629f 3046 for (j = 0; all_null && j < fields.length; j++) {
6d0aaa09
DV
3047 if (fields[j]) all_null = false;
3048 }
3049 if (all_null) {
464b5f50
DV
3050 Dygraph.warn("The dygraphs 'labels' option is set, but the first row " +
3051 "of CSV data ('" + line + "') appears to also contain " +
3052 "labels. Will drop the CSV labels and use the option " +
3053 "labels.");
6d0aaa09
DV
3054 continue;
3055 }
3056 }
3057 ret.push(fields);
6a1aa64f 3058 }
987840a2
DV
3059
3060 if (outOfOrder) {
464b5f50 3061 Dygraph.warn("CSV is out of order; order it correctly to speed loading.");
758a629f 3062 ret.sort(function(a,b) { return a[0] - b[0]; });
987840a2
DV
3063 }
3064
6a1aa64f
DV
3065 return ret;
3066};
3067
3068/**
285a6bda
DV
3069 * The user has provided their data as a pre-packaged JS array. If the x values
3070 * are numeric, this is the same as dygraphs' internal format. If the x values
3071 * are dates, we need to convert them from Date objects to ms since epoch.
8ef9d44d
DV
3072 * @param {!Array} data
3073 * @return {Object} data with numeric x values.
3074 * @private
285a6bda
DV
3075 */
3076Dygraph.prototype.parseArray_ = function(data) {
3077 // Peek at the first x value to see if it's numeric.
758a629f 3078 if (data.length === 0) {
464b5f50 3079 Dygraph.error("Can't plot empty data set");
285a6bda
DV
3080 return null;
3081 }
758a629f 3082 if (data[0].length === 0) {
464b5f50 3083 Dygraph.error("Data set cannot contain an empty row");
285a6bda
DV
3084 return null;
3085 }
3086
758a629f
DV
3087 var i;
3088 if (this.attr_("labels") === null) {
464b5f50
DV
3089 Dygraph.warn("Using default labels. Set labels explicitly via 'labels' " +
3090 "in the options parameter");
285a6bda 3091 this.attrs_.labels = [ "X" ];
758a629f 3092 for (i = 1; i < data[0].length; i++) {
77812e0e 3093 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
285a6bda 3094 }
77812e0e 3095 this.attributes_.reparseSeries();
debdb88d
DV
3096 } else {
3097 var num_labels = this.attr_("labels");
3098 if (num_labels.length != data[0].length) {
464b5f50
DV
3099 Dygraph.error("Mismatch between number of labels (" + num_labels + ")" +
3100 " and number of columns in array (" + data[0].length + ")");
debdb88d
DV
3101 return null;
3102 }
285a6bda
DV
3103 }
3104
2dda3850 3105 if (Dygraph.isDateLike(data[0][0])) {
285a6bda 3106 // Some intelligent defaults for a date x-axis.
48e614ac 3107 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
48e614ac 3108 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
a716aff2 3109 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
3110
3111 // Assume they're all dates.
e3ab7b40 3112 var parsedData = Dygraph.clone(data);
758a629f
DV
3113 for (i = 0; i < data.length; i++) {
3114 if (parsedData[i].length === 0) {
464b5f50 3115 Dygraph.error("Row " + (1 + i) + " of data is empty");
285a6bda
DV
3116 return null;
3117 }
758a629f
DV
3118 if (parsedData[i][0] === null ||
3119 typeof(parsedData[i][0].getTime) != 'function' ||
3120 isNaN(parsedData[i][0].getTime())) {
464b5f50 3121 Dygraph.error("x value in row " + (1 + i) + " is not a Date");
285a6bda
DV
3122 return null;
3123 }
3124 parsedData[i][0] = parsedData[i][0].getTime();
3125 }
3126 return parsedData;
3127 } else {
3128 // Some intelligent defaults for a numeric x-axis.
c39e1d93 3129 /** @private (shut up, jsdoc!) */
48e614ac 3130 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
44462ba3 3131 this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
a716aff2 3132 this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
285a6bda
DV
3133 return data;
3134 }
3135};
3136
3137/**
79420a1e
DV
3138 * Parses a DataTable object from gviz.
3139 * The data is expected to have a first column that is either a date or a
3140 * number. All subsequent columns must be numbers. If there is a clear mismatch
3141 * between this.xValueParser_ and the type of the first column, it will be
a685723c 3142 * fixed. Fills out rawData_.
1bc88216 3143 * @param {!google.visualization.DataTable} data See above.
79420a1e
DV
3144 * @private
3145 */
285a6bda 3146Dygraph.prototype.parseDataTable_ = function(data) {
5829af3d 3147 var shortTextForAnnotationNum = function(num) {
3148 // converts [0-9]+ [A-Z][a-z]*
3149 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3150 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3151 var shortText = String.fromCharCode(65 /* A */ + num % 26);
3152 num = Math.floor(num / 26);
3153 while ( num > 0 ) {
3154 shortText = String.fromCharCode(65 /* A */ + (num - 1) % 26 ) + shortText.toLowerCase();
3155 num = Math.floor((num - 1) / 26);
3156 }
3157 return shortText;
42a9ebb8 3158 };
5829af3d 3159
79420a1e
DV
3160 var cols = data.getNumberOfColumns();
3161 var rows = data.getNumberOfRows();
3162
d955e223 3163 var indepType = data.getColumnType(0);
4440f6c8 3164 if (indepType == 'date' || indepType == 'datetime') {
285a6bda 3165 this.attrs_.xValueParser = Dygraph.dateParser;
48e614ac
DV
3166 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3167 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3168 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
33127159 3169 } else if (indepType == 'number') {
285a6bda 3170 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
48e614ac 3171 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
44462ba3 3172 this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
48e614ac 3173 this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
285a6bda 3174 } else {
464b5f50
DV
3175 Dygraph.error("only 'date', 'datetime' and 'number' types are supported " +
3176 "for column 1 of DataTable input (Got '" + indepType + "')");
79420a1e
DV
3177 return null;
3178 }
3179
a685723c
DV
3180 // Array of the column indices which contain data (and not annotations).
3181 var colIdx = [];
3182 var annotationCols = {}; // data index -> [annotation cols]
3183 var hasAnnotations = false;
758a629f
DV
3184 var i, j;
3185 for (i = 1; i < cols; i++) {
a685723c
DV
3186 var type = data.getColumnType(i);
3187 if (type == 'number') {
3188 colIdx.push(i);
b0963cdb 3189 } else if (type == 'string' && this.getBooleanOption('displayAnnotations')) {
a685723c
DV
3190 // This is OK -- it's an annotation column.
3191 var dataIdx = colIdx[colIdx.length - 1];
3192 if (!annotationCols.hasOwnProperty(dataIdx)) {
3193 annotationCols[dataIdx] = [i];
3194 } else {
3195 annotationCols[dataIdx].push(i);
3196 }
3197 hasAnnotations = true;
3198 } else {
464b5f50
DV
3199 Dygraph.error("Only 'number' is supported as a dependent type with Gviz." +
3200 " 'string' is only supported if displayAnnotations is true");
a685723c
DV
3201 }
3202 }
3203
3204 // Read column labels
3205 // TODO(danvk): add support back for errorBars
3206 var labels = [data.getColumnLabel(0)];
758a629f 3207 for (i = 0; i < colIdx.length; i++) {
a685723c 3208 labels.push(data.getColumnLabel(colIdx[i]));
b0963cdb 3209 if (this.getBooleanOption("errorBars")) i += 1;
a685723c
DV
3210 }
3211 this.attrs_.labels = labels;
3212 cols = labels.length;
3213
79420a1e 3214 var ret = [];
987840a2 3215 var outOfOrder = false;
a685723c 3216 var annotations = [];
758a629f 3217 for (i = 0; i < rows; i++) {
79420a1e 3218 var row = [];
debe4434
DV
3219 if (typeof(data.getValue(i, 0)) === 'undefined' ||
3220 data.getValue(i, 0) === null) {
464b5f50
DV
3221 Dygraph.warn("Ignoring row " + i +
3222 " of DataTable because of undefined or null first column.");
debe4434
DV
3223 continue;
3224 }
3225
c21d2c2d 3226 if (indepType == 'date' || indepType == 'datetime') {
d955e223
DV
3227 row.push(data.getValue(i, 0).getTime());
3228 } else {
3229 row.push(data.getValue(i, 0));
3230 }
b0963cdb 3231 if (!this.getBooleanOption("errorBars")) {
758a629f 3232 for (j = 0; j < colIdx.length; j++) {
a685723c
DV
3233 var col = colIdx[j];
3234 row.push(data.getValue(i, col));
3235 if (hasAnnotations &&
3236 annotationCols.hasOwnProperty(col) &&
758a629f 3237 data.getValue(i, annotationCols[col][0]) !== null) {
a685723c
DV
3238 var ann = {};
3239 ann.series = data.getColumnLabel(col);
3240 ann.xval = row[0];
5829af3d 3241 ann.shortText = shortTextForAnnotationNum(annotations.length);
a685723c
DV
3242 ann.text = '';
3243 for (var k = 0; k < annotationCols[col].length; k++) {
3244 if (k) ann.text += "\n";
3245 ann.text += data.getValue(i, annotationCols[col][k]);
3246 }
3247 annotations.push(ann);
3248 }
3e3f84e4 3249 }
92fd68d8
DV
3250
3251 // Strip out infinities, which give dygraphs problems later on.
758a629f 3252 for (j = 0; j < row.length; j++) {
92fd68d8
DV
3253 if (!isFinite(row[j])) row[j] = null;
3254 }
3e3f84e4 3255 } else {
758a629f 3256 for (j = 0; j < cols - 1; j++) {
3e3f84e4
DV
3257 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3258 }
79420a1e 3259 }
987840a2
DV
3260 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3261 outOfOrder = true;
3262 }
243d96e8 3263 ret.push(row);
79420a1e 3264 }
987840a2
DV
3265
3266 if (outOfOrder) {
464b5f50 3267 Dygraph.warn("DataTable is out of order; order it correctly to speed loading.");
758a629f 3268 ret.sort(function(a,b) { return a[0] - b[0]; });
987840a2 3269 }
a685723c
DV
3270 this.rawData_ = ret;
3271
3272 if (annotations.length > 0) {
3273 this.setAnnotations(annotations, true);
3274 }
0fa724fd 3275 this.attributes_.reparseSeries();
758a629f 3276};
79420a1e 3277
629a09ae 3278/**
6a1aa64f
DV
3279 * Get the CSV data. If it's in a function, call that function. If it's in a
3280 * file, do an XMLHttpRequest to get it.
3281 * @private
3282 */
285a6bda 3283Dygraph.prototype.start_ = function() {
36d4fabf
RK
3284 var data = this.file_;
3285
3286 // Functions can return references of all other types.
3287 if (typeof data == 'function') {
3288 data = data();
3289 }
3290
3291 if (Dygraph.isArrayLike(data)) {
3292 this.rawData_ = this.parseArray_(data);
26ca7938 3293 this.predraw_();
36d4fabf
RK
3294 } else if (typeof data == 'object' &&
3295 typeof data.getColumnRange == 'function') {
79420a1e 3296 // must be a DataTable from gviz.
36d4fabf 3297 this.parseDataTable_(data);
26ca7938 3298 this.predraw_();
36d4fabf 3299 } else if (typeof data == 'string') {
285a6bda 3300 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
e5763589
DV
3301 var line_delimiter = Dygraph.detectLineDelimiter(data);
3302 if (line_delimiter) {
36d4fabf 3303 this.loadedEvent_(data);
285a6bda 3304 } else {
efc5160f
DV
3305 // REMOVE_FOR_IE
3306 var req;
3307 if (window.XMLHttpRequest) {
3308 // Firefox, Opera, IE7, and other browsers will use the native object
3309 req = new XMLHttpRequest();
3310 } else {
3311 // IE 5 and 6 will use the ActiveX control
3312 req = new ActiveXObject("Microsoft.XMLHTTP");
3313 }
3314
285a6bda
DV
3315 var caller = this;
3316 req.onreadystatechange = function () {
3317 if (req.readyState == 4) {
758a629f
DV
3318 if (req.status === 200 || // Normal http
3319 req.status === 0) { // Chrome w/ --allow-file-access-from-files
285a6bda
DV
3320 caller.loadedEvent_(req.responseText);
3321 }
6a1aa64f 3322 }
285a6bda 3323 };
6a1aa64f 3324
36d4fabf 3325 req.open("GET", data, true);
285a6bda
DV
3326 req.send(null);
3327 }
3328 } else {
464b5f50 3329 Dygraph.error("Unknown data format: " + (typeof data));
6a1aa64f
DV
3330 }
3331};
3332
3333/**
3334 * Changes various properties of the graph. These can include:
3335 * <ul>
3336 * <li>file: changes the source data for the graph</li>
3337 * <li>errorBars: changes whether the data contains stddev</li>
3338 * </ul>
dcb25130 3339 *
ccfcc169
DV
3340 * There's a huge variety of options that can be passed to this method. For a
3341 * full list, see http://dygraphs.com/options.html.
3342 *
8ef9d44d
DV
3343 * @param {Object} input_attrs The new properties and values
3344 * @param {boolean} block_redraw Usually the chart is redrawn after every
3345 * call to updateOptions(). If you know better, you can pass true to
3346 * explicitly block the redraw. This can be useful for chaining
3347 * updateOptions() calls, avoiding the occasional infinite loop and
3348 * preventing redraws when it's not necessary (e.g. when updating a
3349 * callback).
6a1aa64f 3350 */
48e614ac 3351Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
ccfcc169
DV
3352 if (typeof(block_redraw) == 'undefined') block_redraw = false;
3353
48e614ac 3354 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
758a629f 3355 var file = input_attrs.file;
48e614ac
DV
3356 var attrs = Dygraph.mapLegacyOptions_(input_attrs);
3357
ccfcc169 3358 // TODO(danvk): this is a mess. Move these options into attr_.
c65f2303 3359 if ('rollPeriod' in attrs) {
6a1aa64f
DV
3360 this.rollPeriod_ = attrs.rollPeriod;
3361 }
c65f2303 3362 if ('dateWindow' in attrs) {
6a1aa64f 3363 this.dateWindow_ = attrs.dateWindow;
e5152598 3364 if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
758a629f 3365 this.zoomed_x_ = (attrs.dateWindow !== null);
81856f70 3366 }
b7e5862d 3367 }
e5152598 3368 if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
758a629f 3369 this.zoomed_y_ = (attrs.valueRange !== null);
6a1aa64f 3370 }
450fe64b
DV
3371
3372 // TODO(danvk): validate per-series options.
46dde5f9
DV
3373 // Supported:
3374 // strokeWidth
3375 // pointSize
3376 // drawPoints
3377 // highlightCircleSize
450fe64b 3378
9ca829f2
DV
3379 // Check if this set options will require new points.
3380 var requiresNewPoints = Dygraph.isPixelChangingOptionList(this.attr_("labels"), attrs);
3381
48e614ac 3382 Dygraph.updateDeep(this.user_attrs_, attrs);
285a6bda 3383
b635457c
RK
3384 this.attributes_.reparseSeries();
3385
48e614ac
DV
3386 if (file) {
3387 this.file_ = file;
ccfcc169 3388 if (!block_redraw) this.start_();
6a1aa64f 3389 } else {
9ca829f2
DV
3390 if (!block_redraw) {
3391 if (requiresNewPoints) {
48e614ac 3392 this.predraw_();
9ca829f2 3393 } else {
e2c21500 3394 this.renderGraph_(false);
9ca829f2
DV
3395 }
3396 }
6a1aa64f
DV
3397 }
3398};
3399
3400/**
48e614ac
DV
3401 * Returns a copy of the options with deprecated names converted into current
3402 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3403 * interested in that, they should save a copy before calling this.
3404 * @private
3405 */
3406Dygraph.mapLegacyOptions_ = function(attrs) {
3407 var my_attrs = {};
3408 for (var k in attrs) {
3409 if (k == 'file') continue;
3410 if (attrs.hasOwnProperty(k)) my_attrs[k] = attrs[k];
3411 }
3412
3413 var set = function(axis, opt, value) {
3414 if (!my_attrs.axes) my_attrs.axes = {};
3415 if (!my_attrs.axes[axis]) my_attrs.axes[axis] = {};
3416 my_attrs.axes[axis][opt] = value;
3417 };
3418 var map = function(opt, axis, new_opt) {
3419 if (typeof(attrs[opt]) != 'undefined') {
a9172eb1
RK
3420 Dygraph.warn("Option " + opt + " is deprecated. Use the " +
3421 new_opt + " option for the " + axis + " axis instead. " +
33a10307
RK
3422 "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } } " +
3423 "(see http://dygraphs.com/per-axis.html for more information.");
48e614ac
DV
3424 set(axis, new_opt, attrs[opt]);
3425 delete my_attrs[opt];
3426 }
3427 };
3428
3429 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3430 map('xValueFormatter', 'x', 'valueFormatter');
3431 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3432 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3433 map('xTicker', 'x', 'ticker');
3434 map('yValueFormatter', 'y', 'valueFormatter');
3435 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3436 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3437 map('yTicker', 'y', 'ticker');
7f6a7190
RK
3438 map('drawXGrid', 'x', 'drawGrid');
3439 map('drawXAxis', 'x', 'drawAxis');
3440 map('drawYGrid', 'y', 'drawGrid');
3441 map('drawYAxis', 'y', 'drawAxis');
48e614ac
DV
3442 return my_attrs;
3443};
3444
3445/**
697e70b2
DV
3446 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3447 * containing div (which has presumably changed size since the dygraph was
3448 * instantiated. If the width/height are specified, the div will be resized.
964f30c6
DV
3449 *
3450 * This is far more efficient than destroying and re-instantiating a
3451 * Dygraph, since it doesn't have to reparse the underlying data.
3452 *
1bc88216
DV
3453 * @param {number} width Width (in pixels)
3454 * @param {number} height Height (in pixels)
697e70b2
DV
3455 */
3456Dygraph.prototype.resize = function(width, height) {
e8c7ef86
DV
3457 if (this.resize_lock) {
3458 return;
3459 }
3460 this.resize_lock = true;
3461
697e70b2 3462 if ((width === null) != (height === null)) {
464b5f50
DV
3463 Dygraph.warn("Dygraph.resize() should be called with zero parameters or " +
3464 "two non-NULL parameters. Pretending it was zero.");
697e70b2
DV
3465 width = height = null;
3466 }
3467
4b4d1a63
DV
3468 var old_width = this.width_;
3469 var old_height = this.height_;
b16e6369 3470
697e70b2
DV
3471 if (width) {
3472 this.maindiv_.style.width = width + "px";
3473 this.maindiv_.style.height = height + "px";
3474 this.width_ = width;
3475 this.height_ = height;
3476 } else {
ccd9d7c2
PF
3477 this.width_ = this.maindiv_.clientWidth;
3478 this.height_ = this.maindiv_.clientHeight;
697e70b2
DV
3479 }
3480
4b4d1a63 3481 if (old_width != this.width_ || old_height != this.height_) {
d82a3164
KW
3482 // Resizing a canvas erases it, even when the size doesn't change, so
3483 // any resize needs to be followed by a redraw.
3484 this.resizeElements_();
4b4d1a63
DV
3485 this.predraw_();
3486 }
e8c7ef86
DV
3487
3488 this.resize_lock = false;
697e70b2
DV
3489};
3490
3491/**
6faebb69 3492 * Adjusts the number of points in the rolling average. Updates the graph to
6a1aa64f 3493 * reflect the new averaging period.
1bc88216 3494 * @param {number} length Number of points over which to average the data.
6a1aa64f 3495 */
285a6bda 3496Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f 3497 this.rollPeriod_ = length;
26ca7938 3498 this.predraw_();
6a1aa64f 3499};
540d00f1 3500
f8cfec73 3501/**
1cf11047
DV
3502 * Returns a boolean array of visibility statuses.
3503 */
3504Dygraph.prototype.visibility = function() {
3505 // Do lazy-initialization, so that this happens after we know the number of
3506 // data series.
b0963cdb 3507 if (!this.getOption("visibility")) {
758a629f 3508 this.attrs_.visibility = [];
1cf11047 3509 }
758a629f 3510 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs.
b0963cdb 3511 while (this.getOption("visibility").length < this.numColumns() - 1) {
758a629f 3512 this.attrs_.visibility.push(true);
1cf11047 3513 }
b0963cdb 3514 return this.getOption("visibility");
1cf11047
DV
3515};
3516
3517/**
3518 * Changes the visiblity of a series.
2aed8ad8 3519 *
7e64db42
RK
3520 * @param {number} num the series index
3521 * @param {boolean} value true or false, identifying the visibility.
1cf11047
DV
3522 */
3523Dygraph.prototype.setVisibility = function(num, value) {
3524 var x = this.visibility();
a6c109c1 3525 if (num < 0 || num >= x.length) {
464b5f50 3526 Dygraph.warn("invalid series number in setVisibility: " + num);
1cf11047
DV
3527 } else {
3528 x[num] = value;
26ca7938 3529 this.predraw_();
1cf11047
DV
3530 }
3531};
3532
3533/**
0cb9bd91
DV
3534 * How large of an area will the dygraph render itself in?
3535 * This is used for testing.
3536 * @return A {width: w, height: h} object.
3537 * @private
3538 */
3539Dygraph.prototype.size = function() {
3540 return { width: this.width_, height: this.height_ };
3541};
3542
3543/**
5c528fa2 3544 * Update the list of annotations and redraw the chart.
41ee764f
DV
3545 * See dygraphs.com/annotations.html for more info on how to use annotations.
3546 * @param ann {Array} An array of annotation objects.
3547 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
5c528fa2 3548 */
a685723c 3549Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3c51ab74
DV
3550 // Only add the annotation CSS rule once we know it will be used.
3551 Dygraph.addAnnotationRule();
5c528fa2 3552 this.annotations_ = ann;
af6e4ad5 3553 if (!this.layout_) {
464b5f50
DV
3554 Dygraph.warn("Tried to setAnnotations before dygraph was ready. " +
3555 "Try setting them in a ready() block. See " +
3556 "dygraphs.com/tests/annotation.html");
af6e4ad5
DV
3557 return;
3558 }
3559
5c528fa2 3560 this.layout_.setAnnotations(this.annotations_);
a685723c 3561 if (!suppressDraw) {
26ca7938 3562 this.predraw_();
a685723c 3563 }
5c528fa2
DV
3564};
3565
3566/**
3567 * Return the list of annotations.
3568 */
3569Dygraph.prototype.annotations = function() {
3570 return this.annotations_;
3571};
3572
46dde5f9 3573/**
82c6fe4d
KW
3574 * Get the list of label names for this graph. The first column is the
3575 * x-axis, so the data series names start at index 1.
4c10c8d2
RK
3576 *
3577 * Returns null when labels have not yet been defined.
82c6fe4d 3578 */
e2c21500 3579Dygraph.prototype.getLabels = function() {
4c10c8d2
RK
3580 var labels = this.attr_("labels");
3581 return labels ? labels.slice() : null;
82c6fe4d
KW
3582};
3583
3584/**
46dde5f9
DV
3585 * Get the index of a series (column) given its name. The first column is the
3586 * x-axis, so the data series start with index 1.
3587 */
3588Dygraph.prototype.indexFromSetName = function(name) {
82c6fe4d 3589 return this.setIndexByName_[name];
46dde5f9
DV
3590};
3591
629a09ae 3592/**
5bcc58b4
DV
3593 * Trigger a callback when the dygraph has drawn itself and is ready to be
3594 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3595 * data (i.e. a URL is passed as the data source) and the chart is drawn
3596 * asynchronously. If the chart has already drawn, the callback will fire
3597 * immediately.
3598 *
3599 * This is a good place to call setAnnotation().
3600 *
3601 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3602 * is ready.
3603 */
3604Dygraph.prototype.ready = function(callback) {
3605 if (this.is_initial_draw_) {
3606 this.readyFns_.push(callback);
3607 } else {
3608 callback(this);
3609 }
3610};
3611
3612/**
629a09ae
DV
3613 * @private
3614 * Adds a default style for the annotation CSS classes to the document. This is
3615 * only executed when annotations are actually used. It is designed to only be
3616 * called once -- all calls after the first will return immediately.
3617 */
5c528fa2 3618Dygraph.addAnnotationRule = function() {
d38c6191 3619 // TODO(danvk): move this function into plugins/annotations.js?
5c528fa2
DV
3620 if (Dygraph.addedAnnotationCSS) return;
3621
5c528fa2
DV
3622 var rule = "border: 1px solid black; " +
3623 "background-color: white; " +
3624 "text-align: center;";
22186871
DV
3625
3626 var styleSheetElement = document.createElement("style");
3627 styleSheetElement.type = "text/css";
3628 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3629
3630 // Find the first style sheet that we can access.
3631 // We may not add a rule to a style sheet from another domain for security
3632 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3633 // adds its own style sheets from google.com.
3634 for (var i = 0; i < document.styleSheets.length; i++) {
3635 if (document.styleSheets[i].disabled) continue;
3636 var mysheet = document.styleSheets[i];
3637 try {
3638 if (mysheet.insertRule) { // Firefox
3639 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3640 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3641 } else if (mysheet.addRule) { // IE
3642 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3643 }
3644 Dygraph.addedAnnotationCSS = true;
3645 return;
3646 } catch(err) {
3647 // Was likely a security exception.
3648 }
5c528fa2
DV
3649 }
3650
464b5f50 3651 Dygraph.warn("Unable to add default annotation CSS rule; display may be off.");
758a629f 3652};