Merge pull request #297 from pshevtsov/custom-shapes
[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
2cf95fff 1061 this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
2cf95fff 1062 this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
76171648 1063
37819481
PH
1064 this.resizeElements_();
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";
37819481
PH
1111
1112 var canvasScale = Dygraph.getContextPixelRatio(this.canvas_ctx_);
1113 this.canvas_.width = this.width_ * canvasScale;
1114 this.canvas_.height = this.height_ * canvasScale;
aeca29ac
RK
1115 this.canvas_.style.width = this.width_ + "px"; // for IE
1116 this.canvas_.style.height = this.height_ + "px"; // for IE
37819481
PH
1117 if (canvasScale !== 1) {
1118 this.canvas_ctx_.scale(canvasScale, canvasScale);
1119 }
1120
1121 var hiddenScale = Dygraph.getContextPixelRatio(this.hidden_ctx_);
1122 this.hidden_.width = this.width_ * hiddenScale;
1123 this.hidden_.height = this.height_ * hiddenScale;
c28088bc
KW
1124 this.hidden_.style.width = this.width_ + "px"; // for IE
1125 this.hidden_.style.height = this.height_ + "px"; // for IE
37819481
PH
1126 if (hiddenScale !== 1) {
1127 this.hidden_ctx_.scale(hiddenScale, hiddenScale);
1128 }
f914bed1 1129};
aeca29ac 1130
4cfcc38c
DV
1131/**
1132 * Detach DOM elements in the dygraph and null out all data references.
1133 * Calling this when you're done with a dygraph can dramatically reduce memory
1134 * usage. See, e.g., the tests/perf.html example.
1135 */
1136Dygraph.prototype.destroy = function() {
aeca29ac
RK
1137 this.canvas_ctx_.restore();
1138 this.hidden_ctx_.restore();
1139
4cfcc38c
DV
1140 var removeRecursive = function(node) {
1141 while (node.hasChildNodes()) {
1142 removeRecursive(node.firstChild);
1143 node.removeChild(node.firstChild);
1144 }
1145 };
de8f284f 1146
aeca29ac 1147 this.removeTrackedEvents_();
6a4587ac
RK
1148
1149 // remove mouse event handlers (This may not be necessary anymore)
def24194 1150 Dygraph.removeEvent(window, 'mouseout', this.mouseOutHandler_);
7d6df48d 1151 Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_);
7d6df48d
RK
1152
1153 // remove window handlers
1154 Dygraph.removeEvent(window,'resize',this.resizeHandler_);
1155 this.resizeHandler_ = null;
1156
4cfcc38c
DV
1157 removeRecursive(this.maindiv_);
1158
1159 var nullOut = function(obj) {
1160 for (var n in obj) {
1161 if (typeof(obj[n]) === 'object') {
1162 obj[n] = null;
1163 }
1164 }
1165 };
4cfcc38c
DV
1166 // These may not all be necessary, but it can't hurt...
1167 nullOut(this.layout_);
1168 nullOut(this.plotter_);
1169 nullOut(this);
1170};
6a1aa64f
DV
1171
1172/**
629a09ae
DV
1173 * Creates the canvas on which the chart will be drawn. Only the Renderer ever
1174 * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots
1175 * or the zoom rectangles) is done on this.canvas_.
8846615a 1176 * @param {Object} canvas The Dygraph canvas over which to overlay the plot
6a1aa64f
DV
1177 * @return {Object} The newly-created canvas
1178 * @private
1179 */
285a6bda 1180Dygraph.prototype.createPlotKitCanvas_ = function(canvas) {
f8cfec73 1181 var h = Dygraph.createCanvas();
6a1aa64f 1182 h.style.position = "absolute";
9ac5e4ae
DV
1183 // TODO(danvk): h should be offset from canvas. canvas needs to include
1184 // some extra area to make it easier to zoom in on the far left and far
1185 // right. h needs to be precisely the plot area, so that clipping occurs.
6a1aa64f
DV
1186 h.style.top = canvas.style.top;
1187 h.style.left = canvas.style.left;
1188 h.width = this.width_;
1189 h.height = this.height_;
f8cfec73
DV
1190 h.style.width = this.width_ + "px"; // for IE
1191 h.style.height = this.height_ + "px"; // for IE
6a1aa64f
DV
1192 return h;
1193};
1194
629a09ae 1195/**
920208fb
PF
1196 * Creates an overlay element used to handle mouse events.
1197 * @return {Object} The mouse event element.
1198 * @private
1199 */
1200Dygraph.prototype.createMouseEventElement_ = function() {
1201 if (this.isUsingExcanvas_) {
1202 var elem = document.createElement("div");
1203 elem.style.position = 'absolute';
1204 elem.style.backgroundColor = 'white';
1205 elem.style.filter = 'alpha(opacity=0)';
1206 elem.style.width = this.width_ + "px";
1207 elem.style.height = this.height_ + "px";
1208 this.graphDiv.appendChild(elem);
1209 return elem;
1210 } else {
1211 return this.canvas_;
1212 }
1213};
1214
1215/**
6a1aa64f
DV
1216 * Generate a set of distinct colors for the data series. This is done with a
1217 * color wheel. Saturation/Value are customizable, and the hue is
1218 * equally-spaced around the color wheel. If a custom set of colors is
1219 * specified, that is used instead.
6a1aa64f
DV
1220 * @private
1221 */
285a6bda 1222Dygraph.prototype.setColors_ = function() {
ee53deb9
DV
1223 var labels = this.getLabels();
1224 var num = labels.length - 1;
6a1aa64f 1225 this.colors_ = [];
ee53deb9 1226 this.colorsMap_ = {};
48423521
RK
1227
1228 // These are used for when no custom colors are specified.
b0963cdb
DV
1229 var sat = this.getNumericOption('colorSaturation') || 1.0;
1230 var val = this.getNumericOption('colorValue') || 0.5;
48423521
RK
1231 var half = Math.ceil(num / 2);
1232
b0963cdb 1233 var colors = this.getOption('colors');
48423521
RK
1234 var visibility = this.visibility();
1235 for (var i = 0; i < num; i++) {
1236 if (!visibility[i]) {
1237 continue;
1238 }
1239 var label = labels[i + 1];
1240 var colorStr = this.attributes_.getForSeries('color', label);
1241 if (!colorStr) {
1242 if (colors) {
1243 colorStr = colors[i % colors.length];
1244 } else {
1245 // alternate colors for high contrast.
1246 var idx = i % 2 ? (half + (i + 1)/ 2) : Math.ceil((i + 1) / 2);
1247 var hue = (1.0 * idx / (1 + num));
1248 colorStr = Dygraph.hsvToRGB(hue, sat, val);
1249 }
1250 }
1251 this.colors_.push(colorStr);
1252 this.colorsMap_[label] = colorStr;
1253 }
629a09ae 1254};
6a1aa64f 1255
43af96e7
NK
1256/**
1257 * Return the list of colors. This is either the list of colors passed in the
629a09ae 1258 * attributes or the autogenerated list of rgb(r,g,b) strings.
e2c21500 1259 * This does not return colors for invisible series.
8ef9d44d 1260 * @return {Array.<string>} The list of colors.
43af96e7
NK
1261 */
1262Dygraph.prototype.getColors = function() {
1263 return this.colors_;
1264};
1265
6a1aa64f 1266/**
e2c21500
DV
1267 * Returns a few attributes of a series, i.e. its color, its visibility, which
1268 * axis it's assigned to, and its column in the original data.
1269 * Returns null if the series does not exist.
1270 * Otherwise, returns an object with column, visibility, color and axis properties.
1271 * The "axis" property will be set to 1 for y1 and 2 for y2.
1272 * The "column" property can be fed back into getValue(row, column) to get
1273 * values for this series.
6a1aa64f 1274 */
e2c21500
DV
1275Dygraph.prototype.getPropertiesForSeries = function(series_name) {
1276 var idx = -1;
1277 var labels = this.getLabels();
1278 for (var i = 1; i < labels.length; i++) {
1279 if (labels[i] == series_name) {
1280 idx = i;
1281 break;
b0c3b730 1282 }
6a1aa64f 1283 }
e2c21500 1284 if (idx == -1) return null;
0abfbd7e 1285
e2c21500
DV
1286 return {
1287 name: series_name,
1288 column: idx,
1289 visible: this.visibility()[idx - 1],
189f8030 1290 color: this.colorsMap_[series_name],
16f00742 1291 axis: 1 + this.attributes_.axisForSeries(series_name)
e2c21500 1292 };
0abfbd7e
DV
1293};
1294
1295/**
6a1aa64f 1296 * Create the text box to adjust the averaging period
6a1aa64f
DV
1297 * @private
1298 */
285a6bda 1299Dygraph.prototype.createRollInterface_ = function() {
8c69de65
DV
1300 // Create a roller if one doesn't exist already.
1301 if (!this.roller_) {
1302 this.roller_ = document.createElement("input");
1303 this.roller_.type = "text";
1304 this.roller_.style.display = "none";
1305 this.graphDiv.appendChild(this.roller_);
1306 }
1307
b0963cdb 1308 var display = this.getBooleanOption('showRoller') ? 'block' : 'none';
26ca7938 1309
0c38f187 1310 var area = this.plotter_.area;
b0c3b730
DV
1311 var textAttr = { "position": "absolute",
1312 "zIndex": 10,
0c38f187
DV
1313 "top": (area.y + area.h - 25) + "px",
1314 "left": (area.x + 1) + "px",
b0c3b730 1315 "display": display
6a1aa64f 1316 };
8c69de65
DV
1317 this.roller_.size = "2";
1318 this.roller_.value = this.rollPeriod_;
b0c3b730 1319 for (var name in textAttr) {
85b99f0b 1320 if (textAttr.hasOwnProperty(name)) {
8c69de65 1321 this.roller_.style[name] = textAttr[name];
85b99f0b 1322 }
b0c3b730
DV
1323 }
1324
76171648 1325 var dygraph = this;
8c69de65 1326 this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); };
76171648
DV
1327};
1328
629a09ae 1329/**
062ef401
JB
1330 * Set up all the mouse handlers needed to capture dragging behavior for zoom
1331 * events.
1332 * @private
1333 */
1334Dygraph.prototype.createDragInterface_ = function() {
1335 var context = {
1336 // Tracks whether the mouse is down right now
1337 isZooming: false,
1338 isPanning: false, // is this drag part of a pan?
1339 is2DPan: false, // if so, is that pan 1- or 2-dimensional?
8442269f
RK
1340 dragStartX: null, // pixel coordinates
1341 dragStartY: null, // pixel coordinates
1342 dragEndX: null, // pixel coordinates
1343 dragEndY: null, // pixel coordinates
062ef401 1344 dragDirection: null,
8442269f
RK
1345 prevEndX: null, // pixel coordinates
1346 prevEndY: null, // pixel coordinates
062ef401 1347 prevDragDirection: null,
421f1773 1348 cancelNextDblclick: false, // see comment in dygraph-interaction-model.js
062ef401 1349
ec291cbe
RK
1350 // The value on the left side of the graph when a pan operation starts.
1351 initialLeftmostDate: null,
1352
1353 // The number of units each pixel spans. (This won't be valid for log
1354 // scales)
1355 xUnitsPerPixel: null,
062ef401
JB
1356
1357 // TODO(danvk): update this comment
1358 // The range in second/value units that the viewport encompasses during a
1359 // panning operation.
1360 dateRange: null,
1361
8442269f
RK
1362 // Top-left corner of the canvas, in DOM coords
1363 // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY.
062ef401
JB
1364 px: 0,
1365 py: 0,
1366
965a030e 1367 // Values for use with panEdgeFraction, which limit how far outside the
4cac8c7a
RK
1368 // graph's data boundaries it can be panned.
1369 boundedDates: null, // [minDate, maxDate]
1370 boundedValues: null, // [[minValue, maxValue] ...]
1371
2bad4d92
DV
1372 // We cover iframes during mouse interactions. See comments in
1373 // dygraph-utils.js for more info on why this is a good idea.
1374 tarp: new Dygraph.IFrameTarp(),
1375
6a4587ac
RK
1376 // contextB is the same thing as this context object but renamed.
1377 initializeMouseDown: function(event, g, contextB) {
062ef401
JB
1378 // prevents mouse drags from selecting page text.
1379 if (event.preventDefault) {
1380 event.preventDefault(); // Firefox, Chrome, etc.
6a1aa64f 1381 } else {
062ef401
JB
1382 event.returnValue = false; // IE
1383 event.cancelBubble = true;
6a1aa64f
DV
1384 }
1385
f381ac71 1386 var canvasPos = Dygraph.findPos(g.canvas_);
464b5f50
DV
1387 contextB.px = canvasPos.x;
1388 contextB.py = canvasPos.y;
806f92c1
DV
1389 contextB.dragStartX = Dygraph.dragGetX_(event, contextB);
1390 contextB.dragStartY = Dygraph.dragGetY_(event, contextB);
6a4587ac 1391 contextB.cancelNextDblclick = false;
2bad4d92 1392 contextB.tarp.cover();
6a1aa64f 1393 }
062ef401 1394 };
2b188b3d 1395
b0963cdb 1396 var interactionModel = this.getOption("interactionModel");
8b83c6cc 1397
062ef401
JB
1398 // Self is the graph.
1399 var self = this;
6faebb69 1400
062ef401
JB
1401 // Function that binds the graph and context to the handler.
1402 var bindHandler = function(handler) {
1403 return function(event) {
1404 handler(event, self, context);
1405 };
1406 };
1407
1408 for (var eventName in interactionModel) {
1409 if (!interactionModel.hasOwnProperty(eventName)) continue;
aeca29ac 1410 this.addAndTrackEvent(this.mouseEventElement_, eventName,
062ef401
JB
1411 bindHandler(interactionModel[eventName]));
1412 }
1413
1414 // If the user releases the mouse button during a drag, but not over the
1415 // canvas, then it doesn't count as a zooming action.
aeca29ac 1416 var mouseUpHandler = function(event) {
062ef401
JB
1417 if (context.isZooming || context.isPanning) {
1418 context.isZooming = false;
1419 context.dragStartX = null;
1420 context.dragStartY = null;
1421 }
1422
1423 if (context.isPanning) {
1424 context.isPanning = false;
1425 context.draggingDate = null;
1426 context.dateRange = null;
1427 for (var i = 0; i < self.axes_.length; i++) {
1428 delete self.axes_[i].draggingValue;
1429 delete self.axes_[i].dragValueRange;
1430 }
1431 }
2bad4d92
DV
1432
1433 context.tarp.uncover();
cb1261cb
DV
1434 };
1435
f914bed1 1436 this.addAndTrackEvent(document, 'mouseup', mouseUpHandler);
6a1aa64f
DV
1437};
1438
1439/**
1440 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
1441 * up any previous zoom rectangles that were drawn. This could be optimized to
1442 * avoid extra redrawing, but it's tricky to avoid interactions with the status
1443 * dots.
ccd9d7c2 1444 *
1bc88216
DV
1445 * @param {number} direction the direction of the zoom rectangle. Acceptable
1446 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
1447 * @param {number} startX The X position where the drag started, in canvas
1448 * coordinates.
1449 * @param {number} endX The current X position of the drag, in canvas coords.
1450 * @param {number} startY The Y position where the drag started, in canvas
1451 * coordinates.
1452 * @param {number} endY The current Y position of the drag, in canvas coords.
1453 * @param {number} prevDirection the value of direction on the previous call to
1454 * this function. Used to avoid excess redrawing
1455 * @param {number} prevEndX The value of endX on the previous call to this
1456 * function. Used to avoid excess redrawing
1457 * @param {number} prevEndY The value of endY on the previous call to this
1458 * function. Used to avoid excess redrawing
6a1aa64f
DV
1459 * @private
1460 */
7201b11e
JB
1461Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
1462 endY, prevDirection, prevEndX,
1463 prevEndY) {
2cf95fff 1464 var ctx = this.canvas_ctx_;
6a1aa64f
DV
1465
1466 // Clean up from the previous rect if necessary
39b0e098 1467 if (prevDirection == Dygraph.HORIZONTAL) {
fa54c193
FXB
1468 ctx.clearRect(Math.min(startX, prevEndX), this.layout_.getPlotArea().y,
1469 Math.abs(startX - prevEndX), this.layout_.getPlotArea().h);
383d8473 1470 } else if (prevDirection == Dygraph.VERTICAL) {
fa54c193
FXB
1471 ctx.clearRect(this.layout_.getPlotArea().x, Math.min(startY, prevEndY),
1472 this.layout_.getPlotArea().w, Math.abs(startY - prevEndY));
6a1aa64f
DV
1473 }
1474
1475 // Draw a light-grey rectangle to show the new viewing area
39b0e098 1476 if (direction == Dygraph.HORIZONTAL) {
8b83c6cc
RK
1477 if (endX && startX) {
1478 ctx.fillStyle = "rgba(128,128,128,0.33)";
fa54c193
FXB
1479 ctx.fillRect(Math.min(startX, endX), this.layout_.getPlotArea().y,
1480 Math.abs(endX - startX), this.layout_.getPlotArea().h);
8b83c6cc 1481 }
920208fb 1482 } else if (direction == Dygraph.VERTICAL) {
8b83c6cc
RK
1483 if (endY && startY) {
1484 ctx.fillStyle = "rgba(128,128,128,0.33)";
fa54c193
FXB
1485 ctx.fillRect(this.layout_.getPlotArea().x, Math.min(startY, endY),
1486 this.layout_.getPlotArea().w, Math.abs(endY - startY));
8b83c6cc 1487 }
6a1aa64f 1488 }
920208fb
PF
1489
1490 if (this.isUsingExcanvas_) {
1491 this.currentZoomRectArgs_ = [direction, startX, endX, startY, endY, 0, 0, 0];
1492 }
1493};
1494
1495/**
1496 * Clear the zoom rectangle (and perform no zoom).
1497 * @private
1498 */
1499Dygraph.prototype.clearZoomRect_ = function() {
1500 this.currentZoomRectArgs_ = null;
1501 this.canvas_ctx_.clearRect(0, 0, this.canvas_.width, this.canvas_.height);
6a1aa64f
DV
1502};
1503
1504/**
8b83c6cc
RK
1505 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1506 * the canvas. The exact zoom window may be slightly larger if there are no data
1507 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1508 * which accepts dates that match the raw data. This function redraws the graph.
d58ae307 1509 *
1bc88216
DV
1510 * @param {number} lowX The leftmost pixel value that should be visible.
1511 * @param {number} highX The rightmost pixel value that should be visible.
6a1aa64f
DV
1512 * @private
1513 */
8b83c6cc 1514Dygraph.prototype.doZoomX_ = function(lowX, highX) {
920208fb 1515 this.currentZoomRectArgs_ = null;
6a1aa64f 1516 // Find the earliest and latest dates contained in this canvasx range.
8b83c6cc 1517 // Convert the call to date ranges of the raw data.
ff022deb
RK
1518 var minDate = this.toDataXCoord(lowX);
1519 var maxDate = this.toDataXCoord(highX);
8b83c6cc
RK
1520 this.doZoomXDates_(minDate, maxDate);
1521};
6a1aa64f 1522
8b83c6cc 1523/**
b1a3b195
DV
1524 * Transition function to use in animations. Returns values between 0.0
1525 * (totally old values) and 1.0 (totally new values) for each frame.
1526 * @private
1527 */
1528Dygraph.zoomAnimationFunction = function(frame, numFrames) {
1529 var k = 1.5;
1530 return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames));
1531};
1532
1533/**
8b83c6cc
RK
1534 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1535 * method with doZoomX which accepts pixel coordinates. This function redraws
1536 * the graph.
d58ae307 1537 *
1bc88216
DV
1538 * @param {number} minDate The minimum date that should be visible.
1539 * @param {number} maxDate The maximum date that should be visible.
8b83c6cc
RK
1540 * @private
1541 */
1542Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
b1a3b195
DV
1543 // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation
1544 // can produce strange effects. Rather than the y-axis transitioning slowly
1545 // between values, it can jerk around.)
1546 var old_window = this.xAxisRange();
1547 var new_window = [minDate, maxDate];
57baab03 1548 this.zoomed_x_ = true;
b1a3b195
DV
1549 var that = this;
1550 this.doAnimatedZoom(old_window, new_window, null, null, function() {
b0963cdb
DV
1551 if (that.getFunctionOption("zoomCallback")) {
1552 that.getFunctionOption("zoomCallback")(
1553 minDate, maxDate, that.yAxisRanges());
b1a3b195
DV
1554 }
1555 });
8b83c6cc
RK
1556};
1557
1558/**
1559 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
d58ae307
DV
1560 * the canvas. This function redraws the graph.
1561 *
1bc88216
DV
1562 * @param {number} lowY The topmost pixel value that should be visible.
1563 * @param {number} highY The lowest pixel value that should be visible.
8b83c6cc
RK
1564 * @private
1565 */
1566Dygraph.prototype.doZoomY_ = function(lowY, highY) {
920208fb 1567 this.currentZoomRectArgs_ = null;
d58ae307
DV
1568 // Find the highest and lowest values in pixel range for each axis.
1569 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1570 // This is because pixels increase as you go down on the screen, whereas data
1571 // coordinates increase as you go up the screen.
b1a3b195
DV
1572 var oldValueRanges = this.yAxisRanges();
1573 var newValueRanges = [];
d58ae307 1574 for (var i = 0; i < this.axes_.length; i++) {
ff022deb
RK
1575 var hi = this.toDataYCoord(lowY, i);
1576 var low = this.toDataYCoord(highY, i);
b1a3b195 1577 newValueRanges.push([low, hi]);
d58ae307 1578 }
8b83c6cc 1579
57baab03 1580 this.zoomed_y_ = true;
b1a3b195
DV
1581 var that = this;
1582 this.doAnimatedZoom(null, null, oldValueRanges, newValueRanges, function() {
b0963cdb 1583 if (that.getFunctionOption("zoomCallback")) {
b1a3b195 1584 var xRange = that.xAxisRange();
b0963cdb
DV
1585 that.getFunctionOption("zoomCallback")(
1586 xRange[0], xRange[1], that.yAxisRanges());
b1a3b195
DV
1587 }
1588 });
8b83c6cc
RK
1589};
1590
1591/**
1592 * Reset the zoom to the original view coordinates. This is the same as
1593 * double-clicking on the graph.
8b83c6cc 1594 */
e4f6e11a 1595Dygraph.prototype.resetZoom = function() {
b1a3b195 1596 var dirty = false, dirtyX = false, dirtyY = false;
758a629f 1597 if (this.dateWindow_ !== null) {
d58ae307 1598 dirty = true;
b1a3b195 1599 dirtyX = true;
8b83c6cc 1600 }
d58ae307
DV
1601
1602 for (var i = 0; i < this.axes_.length; i++) {
1f6a6254 1603 if (typeof(this.axes_[i].valueWindow) !== 'undefined' && this.axes_[i].valueWindow !== null) {
d58ae307 1604 dirty = true;
b1a3b195 1605 dirtyY = true;
d58ae307 1606 }
8b83c6cc
RK
1607 }
1608
da1369a5
DV
1609 // Clear any selection, since it's likely to be drawn in the wrong place.
1610 this.clearSelection();
1611
8b83c6cc 1612 if (dirty) {
57baab03
NN
1613 this.zoomed_x_ = false;
1614 this.zoomed_y_ = false;
b1a3b195
DV
1615
1616 var minDate = this.rawData_[0][0];
1617 var maxDate = this.rawData_[this.rawData_.length - 1][0];
1618
1619 // With only one frame, don't bother calculating extreme ranges.
1620 // TODO(danvk): merge this block w/ the code below.
b0963cdb 1621 if (!this.getBooleanOption("animatedZooms")) {
b1a3b195 1622 this.dateWindow_ = null;
758a629f
DV
1623 for (i = 0; i < this.axes_.length; i++) {
1624 if (this.axes_[i].valueWindow !== null) {
b1a3b195
DV
1625 delete this.axes_[i].valueWindow;
1626 }
1627 }
1628 this.drawGraph_();
b0963cdb
DV
1629 if (this.getFunctionOption("zoomCallback")) {
1630 this.getFunctionOption("zoomCallback")(
1631 minDate, maxDate, this.yAxisRanges());
b1a3b195
DV
1632 }
1633 return;
1634 }
1635
1636 var oldWindow=null, newWindow=null, oldValueRanges=null, newValueRanges=null;
1637 if (dirtyX) {
1638 oldWindow = this.xAxisRange();
1639 newWindow = [minDate, maxDate];
1640 }
1641
1642 if (dirtyY) {
1643 oldValueRanges = this.yAxisRanges();
1644 // TODO(danvk): this is pretty inefficient
1645 var packed = this.gatherDatasets_(this.rolledSeries_, null);
30a5cfc6 1646 var extremes = packed.extremes;
b1a3b195
DV
1647
1648 // this has the side-effect of modifying this.axes_.
1649 // this doesn't make much sense in this context, but it's convenient (we
1650 // need this.axes_[*].extremeValues) and not harmful since we'll be
1651 // calling drawGraph_ shortly, which clobbers these values.
1652 this.computeYAxisRanges_(extremes);
1653
1654 newValueRanges = [];
758a629f 1655 for (i = 0; i < this.axes_.length; i++) {
1f6a6254 1656 var axis = this.axes_[i];
681a215e
DV
1657 newValueRanges.push((axis.valueRange !== null &&
1658 axis.valueRange !== undefined) ?
42a9ebb8 1659 axis.valueRange : axis.extremeRange);
b1a3b195
DV
1660 }
1661 }
1662
1663 var that = this;
1664 this.doAnimatedZoom(oldWindow, newWindow, oldValueRanges, newValueRanges,
1665 function() {
1666 that.dateWindow_ = null;
1667 for (var i = 0; i < that.axes_.length; i++) {
758a629f 1668 if (that.axes_[i].valueWindow !== null) {
b1a3b195
DV
1669 delete that.axes_[i].valueWindow;
1670 }
1671 }
b0963cdb
DV
1672 if (that.getFunctionOption("zoomCallback")) {
1673 that.getFunctionOption("zoomCallback")(
1674 minDate, maxDate, that.yAxisRanges());
b1a3b195
DV
1675 }
1676 });
1677 }
1678};
1679
1680/**
1681 * Combined animation logic for all zoom functions.
1682 * either the x parameters or y parameters may be null.
1683 * @private
1684 */
1685Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, newYRanges, callback) {
b0963cdb
DV
1686 var steps = this.getBooleanOption("animatedZooms") ?
1687 Dygraph.ANIMATION_STEPS : 1;
b1a3b195
DV
1688
1689 var windows = [];
1690 var valueRanges = [];
758a629f 1691 var step, frac;
b1a3b195 1692
758a629f
DV
1693 if (oldXRange !== null && newXRange !== null) {
1694 for (step = 1; step <= steps; step++) {
1695 frac = Dygraph.zoomAnimationFunction(step, steps);
b1a3b195
DV
1696 windows[step-1] = [oldXRange[0]*(1-frac) + frac*newXRange[0],
1697 oldXRange[1]*(1-frac) + frac*newXRange[1]];
8b83c6cc 1698 }
67e650dc 1699 }
b1a3b195 1700
758a629f
DV
1701 if (oldYRanges !== null && newYRanges !== null) {
1702 for (step = 1; step <= steps; step++) {
1703 frac = Dygraph.zoomAnimationFunction(step, steps);
b1a3b195
DV
1704 var thisRange = [];
1705 for (var j = 0; j < this.axes_.length; j++) {
1706 thisRange.push([oldYRanges[j][0]*(1-frac) + frac*newYRanges[j][0],
1707 oldYRanges[j][1]*(1-frac) + frac*newYRanges[j][1]]);
1708 }
1709 valueRanges[step-1] = thisRange;
1710 }
1711 }
1712
1713 var that = this;
1714 Dygraph.repeatAndCleanup(function(step) {
1715 if (valueRanges.length) {
1716 for (var i = 0; i < that.axes_.length; i++) {
1717 var w = valueRanges[step][i];
1718 that.axes_[i].valueWindow = [w[0], w[1]];
1719 }
1720 }
1721 if (windows.length) {
1722 that.dateWindow_ = windows[step];
1723 }
1724 that.drawGraph_();
1725 }, steps, Dygraph.ANIMATION_DURATION / steps, callback);
6a1aa64f
DV
1726};
1727
1728/**
857a6931
KW
1729 * Get the current graph's area object.
1730 *
1731 * Returns: {x, y, w, h}
6a1aa64f 1732 */
857a6931
KW
1733Dygraph.prototype.getArea = function() {
1734 return this.plotter_.area;
1735};
e863a17d 1736
857a6931
KW
1737/**
1738 * Convert a mouse event to DOM coordinates relative to the graph origin.
1739 *
1740 * Returns a two-element array: [X, Y].
1741 */
1742Dygraph.prototype.eventToDomCoords = function(event) {
abc8c570
RK
1743 if (event.offsetX && event.offsetY) {
1744 return [ event.offsetX, event.offsetY ];
1745 } else {
4d9f1cb9 1746 var eventElementPos = Dygraph.findPos(this.mouseEventElement_);
464b5f50
DV
1747 var canvasx = Dygraph.pageX(event) - eventElementPos.x;
1748 var canvasy = Dygraph.pageY(event) - eventElementPos.y;
abc8c570
RK
1749 return [canvasx, canvasy];
1750 }
857a6931 1751};
4cac8c7a 1752
857a6931
KW
1753/**
1754 * Given a canvas X coordinate, find the closest row.
1bc88216
DV
1755 * @param {number} domX graph-relative DOM X coordinate
1756 * Returns {number} row number.
857a6931
KW
1757 * @private
1758 */
1759Dygraph.prototype.findClosestRow = function(domX) {
81cb07d6 1760 var minDistX = Infinity;
a703cbdf 1761 var closestRow = -1;
a12a78ae
DV
1762 var sets = this.layout_.points;
1763 for (var i = 0; i < sets.length; i++) {
1764 var points = sets[i];
1765 var len = points.length;
1766 for (var j = 0; j < len; j++) {
1767 var point = points[j];
1768 if (!Dygraph.isValidPoint(point, true)) continue;
1769 var dist = Math.abs(point.canvasx - domX);
1770 if (dist < minDistX) {
1771 minDistX = dist;
a703cbdf 1772 closestRow = point.idx;
a12a78ae 1773 }
a937d031 1774 }
6a1aa64f 1775 }
a12a78ae 1776
a703cbdf 1777 return closestRow;
857a6931 1778};
6a1aa64f 1779
857a6931 1780/**
2a02e5dd
KW
1781 * Given canvas X,Y coordinates, find the closest point.
1782 *
1783 * This finds the individual data point across all visible series
1784 * that's closest to the supplied DOM coordinates using the standard
1785 * Euclidean X,Y distance.
1786 *
1bc88216
DV
1787 * @param {number} domX graph-relative DOM X coordinate
1788 * @param {number} domY graph-relative DOM Y coordinate
857a6931
KW
1789 * Returns: {row, seriesName, point}
1790 * @private
1791 */
1792Dygraph.prototype.findClosestPoint = function(domX, domY) {
81cb07d6 1793 var minDist = Infinity;
55231c07 1794 var dist, dx, dy, point, closestPoint, closestSeries, closestRow;
30a5cfc6 1795 for ( var setIdx = this.layout_.points.length - 1 ; setIdx >= 0 ; --setIdx ) {
a12a78ae
DV
1796 var points = this.layout_.points[setIdx];
1797 for (var i = 0; i < points.length; ++i) {
55231c07 1798 point = points[i];
62c3d2fd 1799 if (!Dygraph.isValidPoint(point)) continue;
857a6931
KW
1800 dx = point.canvasx - domX;
1801 dy = point.canvasy - domY;
1802 dist = dx * dx + dy * dy;
81cb07d6 1803 if (dist < minDist) {
62c3d2fd 1804 minDist = dist;
a937d031
KW
1805 closestPoint = point;
1806 closestSeries = setIdx;
55231c07 1807 closestRow = point.idx;
a937d031 1808 }
857a6931
KW
1809 }
1810 }
1811 var name = this.layout_.setNames[closestSeries];
1812 return {
55231c07 1813 row: closestRow,
857a6931
KW
1814 seriesName: name,
1815 point: closestPoint
1816 };
1817};
1818
1819/**
1820 * Given canvas X,Y coordinates, find the touched area in a stacked graph.
2a02e5dd
KW
1821 *
1822 * This first finds the X data point closest to the supplied DOM X coordinate,
1823 * then finds the series which puts the Y coordinate on top of its filled area,
1824 * using linear interpolation between adjacent point pairs.
1825 *
1bc88216
DV
1826 * @param {number} domX graph-relative DOM X coordinate
1827 * @param {number} domY graph-relative DOM Y coordinate
857a6931
KW
1828 * Returns: {row, seriesName, point}
1829 * @private
1830 */
1831Dygraph.prototype.findStackedPoint = function(domX, domY) {
1832 var row = this.findClosestRow(domX);
857a6931 1833 var closestPoint, closestSeries;
30a5cfc6 1834 for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) {
55231c07
DE
1835 var boundary = this.getLeftBoundary_(setIdx);
1836 var rowIdx = row - boundary;
a12a78ae
DV
1837 var points = this.layout_.points[setIdx];
1838 if (rowIdx >= points.length) continue;
1839 var p1 = points[rowIdx];
62c3d2fd 1840 if (!Dygraph.isValidPoint(p1)) continue;
857a6931 1841 var py = p1.canvasy;
a12a78ae 1842 if (domX > p1.canvasx && rowIdx + 1 < points.length) {
857a6931 1843 // interpolate series Y value using next point
a12a78ae 1844 var p2 = points[rowIdx + 1];
62c3d2fd
KW
1845 if (Dygraph.isValidPoint(p2)) {
1846 var dx = p2.canvasx - p1.canvasx;
1847 if (dx > 0) {
1848 var r = (domX - p1.canvasx) / dx;
1849 py += r * (p2.canvasy - p1.canvasy);
1850 }
416b05ad 1851 }
81cb07d6 1852 } else if (domX < p1.canvasx && rowIdx > 0) {
857a6931 1853 // interpolate series Y value using previous point
a12a78ae 1854 var p0 = points[rowIdx - 1];
62c3d2fd
KW
1855 if (Dygraph.isValidPoint(p0)) {
1856 var dx = p1.canvasx - p0.canvasx;
1857 if (dx > 0) {
1858 var r = (p1.canvasx - domX) / dx;
1859 py += r * (p0.canvasy - p1.canvasy);
1860 }
12e4c741 1861 }
6a1aa64f 1862 }
857a6931 1863 // Stop if the point (domX, py) is above this series' upper edge
42a9ebb8 1864 if (setIdx === 0 || py < domY) {
a937d031
KW
1865 closestPoint = p1;
1866 closestSeries = setIdx;
1867 }
6a1aa64f 1868 }
857a6931
KW
1869 var name = this.layout_.setNames[closestSeries];
1870 return {
1871 row: row,
1872 seriesName: name,
1873 point: closestPoint
1874 };
1875};
6a1aa64f 1876
857a6931 1877/**
6a1aa64f
DV
1878 * When the mouse moves in the canvas, display information about a nearby data
1879 * point and draw dots over those points in the data series. This function
1880 * takes care of cleanup of previously-drawn dots.
1881 * @param {Object} event The mousemove event from the browser.
1882 * @private
1883 */
285a6bda 1884Dygraph.prototype.mouseMove_ = function(event) {
e863a17d 1885 // This prevents JS errors when mousing over the canvas before data loads.
4cac8c7a 1886 var points = this.layout_.points;
a12a78ae 1887 if (points === undefined || points === null) return;
e863a17d 1888
857a6931
KW
1889 var canvasCoords = this.eventToDomCoords(event);
1890 var canvasx = canvasCoords[0];
1891 var canvasy = canvasCoords[1];
6a1aa64f 1892
b0963cdb 1893 var highlightSeriesOpts = this.getOption("highlightSeriesOpts");
857a6931 1894 var selectionChanged = false;
3f55b813 1895 if (highlightSeriesOpts && !this.isSeriesLocked()) {
857a6931 1896 var closest;
b0963cdb 1897 if (this.getBooleanOption("stackedGraph")) {
857a6931
KW
1898 closest = this.findStackedPoint(canvasx, canvasy);
1899 } else {
1900 closest = this.findClosestPoint(canvasx, canvasy);
43af96e7 1901 }
857a6931 1902 selectionChanged = this.setSelection(closest.row, closest.seriesName);
416b05ad 1903 } else {
857a6931
KW
1904 var idx = this.findClosestRow(canvasx);
1905 selectionChanged = this.setSelection(idx);
12e4c741 1906 }
43af96e7 1907
b0963cdb 1908 var callback = this.getFunctionOption("highlightCallback");
857a6931 1909 if (callback && selectionChanged) {
870a309c
DV
1910 callback(event,
1911 this.lastx_,
1912 this.selPoints_,
55231c07 1913 this.lastRow_,
870a309c 1914 this.highlightSet_);
12e4c741 1915 }
239c712d 1916};
b258a3da 1917
239c712d 1918/**
55231c07
DE
1919 * Fetch left offset from the specified set index or if not passed, the
1920 * first defined boundaryIds record (see bug #236).
e2c21500 1921 * @private
81cb07d6 1922 */
55231c07 1923Dygraph.prototype.getLeftBoundary_ = function(setIdx) {
383d8473 1924 if (this.boundaryIds_[setIdx]) {
a703cbdf 1925 return this.boundaryIds_[setIdx][0];
55231c07
DE
1926 } else {
1927 for (var i = 0; i < this.boundaryIds_.length; i++) {
1928 if (this.boundaryIds_[i] !== undefined) {
1929 return this.boundaryIds_[i][0];
1930 }
81cb07d6 1931 }
55231c07 1932 return 0;
81cb07d6 1933 }
81cb07d6
KW
1934};
1935
857a6931
KW
1936Dygraph.prototype.animateSelection_ = function(direction) {
1937 var totalSteps = 10;
1938 var millis = 30;
1d44ee5e
KW
1939 if (this.fadeLevel === undefined) this.fadeLevel = 0;
1940 if (this.animateId === undefined) this.animateId = 0;
857a6931
KW
1941 var start = this.fadeLevel;
1942 var steps = direction < 0 ? start : totalSteps - start;
1943 if (steps <= 0) {
1944 if (this.fadeLevel) {
1945 this.updateSelection_(1.0);
1946 }
1947 return;
1948 }
1949
1950 var thisId = ++this.animateId;
1951 var that = this;
475f7420
KW
1952 Dygraph.repeatAndCleanup(
1953 function(n) {
1954 // ignore simultaneous animations
1955 if (that.animateId != thisId) return;
1956
1957 that.fadeLevel += direction;
1958 if (that.fadeLevel === 0) {
1959 that.clearSelection();
1960 } else {
1961 that.updateSelection_(that.fadeLevel / totalSteps);
1962 }
1963 },
1964 steps, millis, function() {});
857a6931
KW
1965};
1966
2ddb1197 1967/**
239c712d
NAG
1968 * Draw dots over the selectied points in the data series. This function
1969 * takes care of cleanup of previously-drawn dots.
1970 * @private
1971 */
857a6931 1972Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
0cd1ad15
DV
1973 /*var defaultPrevented = */
1974 this.cascadeEvents_('select', {
e2c21500
DV
1975 selectedX: this.lastx_,
1976 selectedPoints: this.selPoints_
1977 });
1978 // TODO(danvk): use defaultPrevented here?
1979
6a1aa64f 1980 // Clear the previously drawn vertical, if there is one
758a629f 1981 var i;
2cf95fff 1982 var ctx = this.canvas_ctx_;
b0963cdb 1983 if (this.getOption('highlightSeriesOpts')) {
857a6931 1984 ctx.clearRect(0, 0, this.width_, this.height_);
b0963cdb 1985 var alpha = 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
857a6931 1986 if (alpha) {
2a02e5dd
KW
1987 // Activating background fade includes an animation effect for a gradual
1988 // fade. TODO(klausw): make this independently configurable if it causes
1989 // issues? Use a shared preference to control animations?
1990 var animateBackgroundFade = true;
1991 if (animateBackgroundFade) {
857a6931
KW
1992 if (opt_animFraction === undefined) {
1993 // start a new animation
1994 this.animateSelection_(1);
1995 return;
1996 }
1997 alpha *= opt_animFraction;
1998 }
1999 ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')';
2000 ctx.fillRect(0, 0, this.width_, this.height_);
2001 }
38e3d209
DV
2002
2003 // Redraw only the highlighted series in the interactive canvas (not the
2004 // static plot canvas, which is where series are usually drawn).
2005 this.plotter_._renderLineChart(this.highlightSet_, ctx);
857a6931 2006 } else if (this.previousVerticalX_ >= 0) {
46dde5f9
DV
2007 // Determine the maximum highlight circle size.
2008 var maxCircleSize = 0;
227b93cc 2009 var labels = this.attr_('labels');
758a629f 2010 for (i = 1; i < labels.length; i++) {
b0963cdb 2011 var r = this.getNumericOption('highlightCircleSize', labels[i]);
46dde5f9
DV
2012 if (r > maxCircleSize) maxCircleSize = r;
2013 }
6a1aa64f 2014 var px = this.previousVerticalX_;
46dde5f9
DV
2015 ctx.clearRect(px - maxCircleSize - 1, 0,
2016 2 * maxCircleSize + 2, this.height_);
6a1aa64f
DV
2017 }
2018
920208fb
PF
2019 if (this.isUsingExcanvas_ && this.currentZoomRectArgs_) {
2020 Dygraph.prototype.drawZoomRect_.apply(this, this.currentZoomRectArgs_);
2021 }
2022
d160cc3b 2023 if (this.selPoints_.length > 0) {
6a1aa64f 2024 // Draw colored circles over the center of each selected point
e9fe4a2f 2025 var canvasx = this.selPoints_[0].canvasx;
43af96e7 2026 ctx.save();
758a629f 2027 for (i = 0; i < this.selPoints_.length; i++) {
e9fe4a2f
DV
2028 var pt = this.selPoints_[i];
2029 if (!Dygraph.isOK(pt.canvasy)) continue;
2030
b0963cdb
DV
2031 var circleSize = this.getNumericOption('highlightCircleSize', pt.name);
2032 var callback = this.getFunctionOption("drawHighlightPointCallback", pt.name);
a8ef67a8 2033 var color = this.plotter_.colors[pt.name];
78e58af4
RK
2034 if (!callback) {
2035 callback = Dygraph.Circles.DEFAULT;
2036 }
b0963cdb 2037 ctx.lineWidth = this.getNumericOption('strokeWidth', pt.name);
a8ef67a8
KW
2038 ctx.strokeStyle = color;
2039 ctx.fillStyle = color;
df75aef5 2040 callback(this, pt.name, ctx, canvasx, pt.canvasy,
ba697462 2041 color, circleSize, pt.idx);
6a1aa64f
DV
2042 }
2043 ctx.restore();
2044
2045 this.previousVerticalX_ = canvasx;
2046 }
2047};
2048
2049/**
629a09ae
DV
2050 * Manually set the selected points and display information about them in the
2051 * legend. The selection can be cleared using clearSelection() and queried
2052 * using getSelection().
1bc88216 2053 * @param {number} row Row number that should be highlighted (i.e. appear with
629a09ae 2054 * hover dots on the chart). Set to false to clear any selection.
1bc88216 2055 * @param {seriesName} optional series name to highlight that series with the
857a6931 2056 * the highlightSeriesOpts setting.
b9a3ece4
KW
2057 * @param { locked } optional If true, keep seriesName selected when mousing
2058 * over the graph, disabling closest-series highlighting. Call clearSelection()
2059 * to unlock it.
239c712d 2060 */
b9a3ece4 2061Dygraph.prototype.setSelection = function(row, opt_seriesName, opt_locked) {
239c712d
NAG
2062 // Extract the points we've selected
2063 this.selPoints_ = [];
50360fd0 2064
857a6931 2065 var changed = false;
16269f6e 2066 if (row !== false && row >= 0) {
857a6931
KW
2067 if (row != this.lastRow_) changed = true;
2068 this.lastRow_ = row;
30a5cfc6
KW
2069 for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) {
2070 var points = this.layout_.points[setIdx];
55231c07
DE
2071 var setRow = row - this.getLeftBoundary_(setIdx);
2072 if (setRow < points.length) {
2073 var point = points[setRow];
42a9ebb8 2074 if (point.yval !== null) this.selPoints_.push(point);
16269f6e 2075 }
239c712d 2076 }
857a6931
KW
2077 } else {
2078 if (this.lastRow_ >= 0) changed = true;
2079 this.lastRow_ = -1;
16269f6e 2080 }
50360fd0 2081
16269f6e 2082 if (this.selPoints_.length) {
239c712d 2083 this.lastx_ = this.selPoints_[0].xval;
239c712d 2084 } else {
857a6931 2085 this.lastx_ = -1;
239c712d
NAG
2086 }
2087
857a6931
KW
2088 if (opt_seriesName !== undefined) {
2089 if (this.highlightSet_ !== opt_seriesName) changed = true;
2090 this.highlightSet_ = opt_seriesName;
239c712d
NAG
2091 }
2092
b9a3ece4
KW
2093 if (opt_locked !== undefined) {
2094 this.lockedSet_ = opt_locked;
2095 }
2096
857a6931
KW
2097 if (changed) {
2098 this.updateSelection_(undefined);
2099 }
2100 return changed;
239c712d
NAG
2101};
2102
2103/**
6a1aa64f
DV
2104 * The mouse has left the canvas. Clear out whatever artifacts remain
2105 * @param {Object} event the mouseout event from the browser.
2106 * @private
2107 */
285a6bda 2108Dygraph.prototype.mouseOut_ = function(event) {
b0963cdb
DV
2109 if (this.getFunctionOption("unhighlightCallback")) {
2110 this.getFunctionOption("unhighlightCallback")(event);
a4c6a67c
AV
2111 }
2112
b0963cdb 2113 if (this.getFunctionOption("hideOverlayOnMouseOut") && !this.lockedSet_) {
239c712d 2114 this.clearSelection();
43af96e7 2115 }
6a1aa64f
DV
2116};
2117
239c712d 2118/**
629a09ae
DV
2119 * Clears the current selection (i.e. points that were highlighted by moving
2120 * the mouse over the chart).
239c712d
NAG
2121 */
2122Dygraph.prototype.clearSelection = function() {
e2c21500
DV
2123 this.cascadeEvents_('deselect', {});
2124
b9a3ece4 2125 this.lockedSet_ = false;
239c712d 2126 // Get rid of the overlay data
857a6931
KW
2127 if (this.fadeLevel) {
2128 this.animateSelection_(-1);
2129 return;
2130 }
2cf95fff 2131 this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
857a6931 2132 this.fadeLevel = 0;
239c712d
NAG
2133 this.selPoints_ = [];
2134 this.lastx_ = -1;
857a6931
KW
2135 this.lastRow_ = -1;
2136 this.highlightSet_ = null;
758a629f 2137};
239c712d 2138
103b7292 2139/**
629a09ae
DV
2140 * Returns the number of the currently selected row. To get data for this row,
2141 * you can use the getValue method.
1bc88216 2142 * @return {number} row number, or -1 if nothing is selected
103b7292
NAG
2143 */
2144Dygraph.prototype.getSelection = function() {
2145 if (!this.selPoints_ || this.selPoints_.length < 1) {
2146 return -1;
2147 }
50360fd0 2148
a12a78ae
DV
2149 for (var setIdx = 0; setIdx < this.layout_.points.length; setIdx++) {
2150 var points = this.layout_.points[setIdx];
2151 for (var row = 0; row < points.length; row++) {
2152 if (points[row].x == this.selPoints_[0].x) {
55231c07 2153 return points[row].idx;
a12a78ae 2154 }
103b7292
NAG
2155 }
2156 }
2157 return -1;
2e1fcf1a 2158};
103b7292 2159
e2c21500
DV
2160/**
2161 * Returns the name of the currently-highlighted series.
2162 * Only available when the highlightSeriesOpts option is in use.
2163 */
857a6931
KW
2164Dygraph.prototype.getHighlightSeries = function() {
2165 return this.highlightSet_;
2166};
2167
19589a3e 2168/**
3f55b813
KW
2169 * Returns true if the currently-highlighted series was locked
2170 * via setSelection(..., seriesName, true).
2171 */
2172Dygraph.prototype.isSeriesLocked = function() {
2173 return this.lockedSet_;
2174};
2175
2176/**
6a1aa64f 2177 * Fires when there's data available to be graphed.
1bc88216 2178 * @param {string} data Raw CSV data to be plotted
6a1aa64f
DV
2179 * @private
2180 */
285a6bda 2181Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f 2182 this.rawData_ = this.parseCSV_(data);
26ca7938 2183 this.predraw_();
6a1aa64f
DV
2184};
2185
6a1aa64f
DV
2186/**
2187 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
2188 * @private
2189 */
285a6bda 2190Dygraph.prototype.addXTicks_ = function() {
6a1aa64f 2191 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
7201b11e 2192 var range;
6a1aa64f 2193 if (this.dateWindow_) {
7201b11e 2194 range = [this.dateWindow_[0], this.dateWindow_[1]];
6a1aa64f 2195 } else {
ccecde93 2196 range = this.xAxisExtremes();
7201b11e
JB
2197 }
2198
48e614ac
DV
2199 var xAxisOptionsView = this.optionsViewForAxis_('x');
2200 var xTicks = xAxisOptionsView('ticker')(
2201 range[0],
2202 range[1],
2203 this.width_, // TODO(danvk): should be area.width
2204 xAxisOptionsView,
2205 this);
2206 // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks);
2207 // console.log(msg);
b2c9222a 2208 this.layout_.setXTicks(xTicks);
32988383
DV
2209};
2210
629a09ae 2211/**
3ea41d86 2212 * Returns the correct handler class for the currently set options.
629a09ae 2213 * @private
3ea41d86
DV
2214 */
2215Dygraph.prototype.getHandlerClass_ = function() {
2216 var handlerClass;
2217 if (this.attr_('dataHandler')) {
2218 handlerClass = this.attr_('dataHandler');
2219 } else if (this.fractions_) {
b0963cdb 2220 if (this.getBooleanOption('errorBars')) {
3ea41d86 2221 handlerClass = Dygraph.DataHandlers.FractionsBarsHandler;
a49c164a 2222 } else {
3ea41d86 2223 handlerClass = Dygraph.DataHandlers.DefaultFractionHandler;
5011e7a1 2224 }
b0963cdb 2225 } else if (this.getBooleanOption('customBars')) {
3ea41d86 2226 handlerClass = Dygraph.DataHandlers.CustomBarsHandler;
b0963cdb 2227 } else if (this.getBooleanOption('errorBars')) {
3ea41d86 2228 handlerClass = Dygraph.DataHandlers.ErrorBarsHandler;
5011e7a1 2229 } else {
3ea41d86 2230 handlerClass = Dygraph.DataHandlers.DefaultHandler;
5011e7a1 2231 }
3ea41d86 2232 return handlerClass;
5011e7a1
DV
2233};
2234
6a1aa64f 2235/**
629a09ae 2236 * @private
26ca7938
DV
2237 * This function is called once when the chart's data is changed or the options
2238 * dictionary is updated. It is _not_ called when the user pans or zooms. The
2239 * idea is that values derived from the chart's data can be computed here,
2240 * rather than every time the chart is drawn. This includes things like the
2241 * number of axes, rolling averages, etc.
2242 */
2243Dygraph.prototype.predraw_ = function() {
7153e001 2244 var start = new Date();
a49c164a
DE
2245
2246 // Create the correct dataHandler
3ea41d86 2247 this.dataHandler_ = new (this.getHandlerClass_())();
7153e001 2248
0d216a60
PF
2249 this.layout_.computePlotArea();
2250
26ca7938
DV
2251 // TODO(danvk): move more computations out of drawGraph_ and into here.
2252 this.computeYAxes_();
2253
2254 // Create a new plotter.
f417e3d3 2255 if (this.plotter_) {
1748a51c 2256 this.cascadeEvents_('clearChart');
f417e3d3
DV
2257 this.plotter_.clear();
2258 }
aeca29ac 2259
383d8473 2260 if (!this.is_initial_draw_) {
aeca29ac
RK
2261 this.canvas_ctx_.restore();
2262 this.hidden_ctx_.restore();
2263 }
2264
2265 this.canvas_ctx_.save();
2266 this.hidden_ctx_.save();
2267
26ca7938 2268 this.plotter_ = new DygraphCanvasRenderer(this,
2cf95fff
RK
2269 this.hidden_,
2270 this.hidden_ctx_,
0e23cfc6 2271 this.layout_);
26ca7938 2272
0abfbd7e
DV
2273 // The roller sits in the bottom left corner of the chart. We don't know where
2274 // this will be until the options are available, so it's positioned here.
8c69de65 2275 this.createRollInterface_();
26ca7938 2276
e2c21500 2277 this.cascadeEvents_('predraw');
0abfbd7e 2278
b1a3b195
DV
2279 // Convert the raw data (a 2D array) into the internal format and compute
2280 // rolling averages.
2281 this.rolledSeries_ = [null]; // x-axis is the first series and it's special
395e98a3 2282 for (var i = 1; i < this.numColumns(); i++) {
c1780ad0 2283 // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too.
a49c164a
DE
2284 var series = this.dataHandler_.extractSeries(this.rawData_, i, this.attributes_);
2285 if (this.rollPeriod_ > 1) {
2286 series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_);
2287 }
2288
b1a3b195
DV
2289 this.rolledSeries_.push(series);
2290 }
2291
26ca7938
DV
2292 // If the data or options have changed, then we'd better redraw.
2293 this.drawGraph_();
4b4d1a63
DV
2294
2295 // This is used to determine whether to do various animations.
2296 var end = new Date();
2297 this.drawingTimeMs_ = (end - start);
26ca7938
DV
2298};
2299
2300/**
30a5cfc6
KW
2301 * Point structure.
2302 *
2303 * xval_* and yval_* are the original unscaled data values,
2304 * while x_* and y_* are scaled to the range (0.0-1.0) for plotting.
2305 * yval_stacked is the cumulative Y value used for stacking graphs,
2306 * and bottom/top/minus/plus are used for error bar graphs.
2307 *
2308 * @typedef {{
2309 * idx: number,
2310 * name: string,
2311 * x: ?number,
2312 * xval: ?number,
2313 * y_bottom: ?number,
2314 * y: ?number,
2315 * y_stacked: ?number,
2316 * y_top: ?number,
2317 * yval_minus: ?number,
2318 * yval: ?number,
2319 * yval_plus: ?number,
2320 * yval_stacked
2321 * }}
2322 */
bcc53a77 2323Dygraph.PointType = undefined;
30a5cfc6 2324
30a5cfc6
KW
2325/**
2326 * Calculates point stacking for stackedGraph=true.
2327 *
2328 * For stacking purposes, interpolate or extend neighboring data across
2329 * NaN values based on stackedGraphNaNFill settings. This is for display
2330 * only, the underlying data value as shown in the legend remains NaN.
2331 *
2332 * @param {Array.<Dygraph.PointType>} points Point array for a single series.
2333 * Updates each Point's yval_stacked property.
2334 * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y
2335 * values for the series seen so far. Index is the row number. Updated
2336 * based on the current series's values.
2337 * @param {Array.<number>} seriesExtremes Min and max values, updated
2338 * to reflect the stacked values.
2339 * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or
2340 * 'none'.
24f2a74f 2341 * @private
30a5cfc6
KW
2342 */
2343Dygraph.stackPoints_ = function(
2344 points, cumulativeYval, seriesExtremes, fillMethod) {
2345 var lastXval = null;
2346 var prevPoint = null;
2347 var nextPoint = null;
2348 var nextPointIdx = -1;
2349
2350 // Find the next stackable point starting from the given index.
bcc53a77 2351 var updateNextPoint = function(idx) {
30a5cfc6
KW
2352 // If we've previously found a non-NaN point and haven't gone past it yet,
2353 // just use that.
2354 if (nextPointIdx >= idx) return;
2355
2356 // We haven't found a non-NaN point yet or have moved past it,
2357 // look towards the right to find a non-NaN point.
2358 for (var j = idx; j < points.length; ++j) {
2359 // Clear out a previously-found point (if any) since it's no longer
2360 // valid, we shouldn't use it for interpolation anymore.
2361 nextPoint = null;
2362 if (!isNaN(points[j].yval) && points[j].yval !== null) {
2363 nextPointIdx = j;
2364 nextPoint = points[j];
2365 break;
2366 }
2367 }
2368 };
2369
2370 for (var i = 0; i < points.length; ++i) {
2371 var point = points[i];
2372 var xval = point.xval;
2373 if (cumulativeYval[xval] === undefined) {
2374 cumulativeYval[xval] = 0;
2375 }
2376
2377 var actualYval = point.yval;
2378 if (isNaN(actualYval) || actualYval === null) {
06c0e1ee 2379 if(fillMethod == 'none') {
30a5cfc6 2380 actualYval = 0;
d68137fd 2381 } else {
06c0e1ee
S
2382 // Interpolate/extend for stacking purposes if possible.
2383 updateNextPoint(i);
2384 if (prevPoint && nextPoint && fillMethod != 'none') {
2385 // Use linear interpolation between prevPoint and nextPoint.
2386 actualYval = prevPoint.yval + (nextPoint.yval - prevPoint.yval) *
2387 ((xval - prevPoint.xval) / (nextPoint.xval - prevPoint.xval));
2388 } else if (prevPoint && fillMethod == 'all') {
2389 actualYval = prevPoint.yval;
2390 } else if (nextPoint && fillMethod == 'all') {
2391 actualYval = nextPoint.yval;
2392 } else {
2393 actualYval = 0;
2394 }
2395 }
30a5cfc6
KW
2396 } else {
2397 prevPoint = point;
2398 }
2399
2400 var stackedYval = cumulativeYval[xval];
2401 if (lastXval != xval) {
2402 // If an x-value is repeated, we ignore the duplicates.
2403 stackedYval += actualYval;
2404 cumulativeYval[xval] = stackedYval;
2405 }
2406 lastXval = xval;
2407
2408 point.yval_stacked = stackedYval;
2409
2410 if (stackedYval > seriesExtremes[1]) {
2411 seriesExtremes[1] = stackedYval;
2412 }
2413 if (stackedYval < seriesExtremes[0]) {
2414 seriesExtremes[0] = stackedYval;
2415 }
2416 }
2417};
2418
2419
2420/**
b1a3b195
DV
2421 * Loop over all fields and create datasets, calculating extreme y-values for
2422 * each series and extreme x-indices as we go.
fc4e84fa 2423 *
b1a3b195
DV
2424 * dateWindow is passed in as an explicit parameter so that we can compute
2425 * extreme values "speculatively", i.e. without actually setting state on the
2426 * dygraph.
fc4e84fa 2427 *
30a5cfc6
KW
2428 * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where
2429 * rolledSeries[seriesIndex][row] = raw point, where
2430 * seriesIndex is the column number starting with 1, and
2431 * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]].
2432 * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null.
2433 * @return {{
2434 * points: Array.<Array.<Dygraph.PointType>>,
2435 * seriesExtremes: Array.<Array.<number>>,
2436 * boundaryIds: Array.<number>}}
6a1aa64f
DV
2437 * @private
2438 */
b1a3b195
DV
2439Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
2440 var boundaryIds = [];
30a5cfc6
KW
2441 var points = [];
2442 var cumulativeYval = []; // For stacked series.
f09fc545 2443 var extremes = {}; // series name -> [low, high]
a49c164a
DE
2444 var seriesIdx, sampleIdx;
2445 var firstIdx, lastIdx;
2446
b1a3b195
DV
2447 // Loop over the fields (series). Go from the last to the first,
2448 // because if they're stacked that's how we accumulate the values.
2449 var num_series = rolledSeries.length - 1;
bcc53a77 2450 var series;
a49c164a
DE
2451 for (seriesIdx = num_series; seriesIdx >= 1; seriesIdx--) {
2452 if (!this.visibility()[seriesIdx - 1]) continue;
1cf11047 2453
6a1aa64f 2454 // Prune down to the desired range, if necessary (for zooming)
1a26f3fb
DV
2455 // Because there can be lines going to points outside of the visible area,
2456 // we actually prune to visible points, plus one on either side.
b1a3b195 2457 if (dateWindow) {
a49c164a 2458 series = rolledSeries[seriesIdx];
b1a3b195
DV
2459 var low = dateWindow[0];
2460 var high = dateWindow[1];
4e59e63e 2461
1a26f3fb
DV
2462 // TODO(danvk): do binary search instead of linear search.
2463 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
a49c164a
DE
2464 firstIdx = null;
2465 lastIdx = null;
2466 for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) {
2467 if (series[sampleIdx][0] >= low && firstIdx === null) {
2468 firstIdx = sampleIdx;
1a26f3fb 2469 }
a49c164a
DE
2470 if (series[sampleIdx][0] <= high) {
2471 lastIdx = sampleIdx;
6a1aa64f
DV
2472 }
2473 }
4e59e63e 2474
1a26f3fb 2475 if (firstIdx === null) firstIdx = 0;
14ac984e 2476 var correctedFirstIdx = firstIdx;
b0375a28 2477 var isInvalidValue = true;
4e59e63e 2478 while (isInvalidValue && correctedFirstIdx > 0) {
14ac984e 2479 correctedFirstIdx--;
a49c164a
DE
2480 // check if the y value is null.
2481 isInvalidValue = series[correctedFirstIdx][1] === null;
14ac984e 2482 }
4e59e63e 2483
1a26f3fb 2484 if (lastIdx === null) lastIdx = series.length - 1;
14ac984e 2485 var correctedLastIdx = lastIdx;
b0375a28 2486 isInvalidValue = true;
4e59e63e 2487 while (isInvalidValue && correctedLastIdx < series.length - 1) {
14ac984e 2488 correctedLastIdx++;
a49c164a 2489 isInvalidValue = series[correctedLastIdx][1] === null;
14ac984e 2490 }
4e59e63e 2491
4e59e63e 2492 if (correctedFirstIdx!==firstIdx) {
30a5cfc6 2493 firstIdx = correctedFirstIdx;
6a1aa64f 2494 }
4e59e63e 2495 if (correctedLastIdx !== lastIdx) {
30a5cfc6 2496 lastIdx = correctedLastIdx;
4e59e63e 2497 }
55231c07 2498
a49c164a 2499 boundaryIds[seriesIdx-1] = [firstIdx, lastIdx];
55231c07 2500
30a5cfc6
KW
2501 // .slice's end is exclusive, we want to include lastIdx.
2502 series = series.slice(firstIdx, lastIdx + 1);
16269f6e 2503 } else {
a49c164a
DE
2504 series = rolledSeries[seriesIdx];
2505 boundaryIds[seriesIdx-1] = [0, series.length-1];
6a1aa64f
DV
2506 }
2507
a49c164a
DE
2508 var seriesName = this.attr_("labels")[seriesIdx];
2509 var seriesExtremes = this.dataHandler_.getExtremeYValues(series,
b0963cdb 2510 dateWindow, this.getBooleanOption("stepPlot",seriesName));
5011e7a1 2511
a49c164a
DE
2512 var seriesPoints = this.dataHandler_.seriesToPoints(series,
2513 seriesName, boundaryIds[seriesIdx-1][0]);
43af96e7 2514
b0963cdb 2515 if (this.getBooleanOption("stackedGraph")) {
30a5cfc6 2516 Dygraph.stackPoints_(seriesPoints, cumulativeYval, seriesExtremes,
b0963cdb 2517 this.getBooleanOption("stackedGraphNaNFill"));
6a1aa64f 2518 }
354e15ab 2519
b1a3b195 2520 extremes[seriesName] = seriesExtremes;
a49c164a 2521 points[seriesIdx] = seriesPoints;
7d463f49
KW
2522 }
2523
30a5cfc6 2524 return { points: points, extremes: extremes, boundaryIds: boundaryIds };
b1a3b195
DV
2525};
2526
2527/**
2528 * Update the graph with new data. This method is called when the viewing area
2529 * has changed. If the underlying data or options have changed, predraw_ will
2530 * be called before drawGraph_ is called.
2531 *
b1a3b195
DV
2532 * @private
2533 */
e2c21500 2534Dygraph.prototype.drawGraph_ = function() {
b1a3b195
DV
2535 var start = new Date();
2536
b1a3b195
DV
2537 // This is used to set the second parameter to drawCallback, below.
2538 var is_initial_draw = this.is_initial_draw_;
2539 this.is_initial_draw_ = false;
2540
b1a3b195
DV
2541 this.layout_.removeAllDatasets();
2542 this.setColors_();
b0963cdb 2543 this.attrs_.pointSize = 0.5 * this.getNumericOption('highlightCircleSize');
b1a3b195
DV
2544
2545 var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_);
30a5cfc6
KW
2546 var points = packed.points;
2547 var extremes = packed.extremes;
2548 this.boundaryIds_ = packed.boundaryIds;
b1a3b195 2549
82c6fe4d
KW
2550 this.setIndexByName_ = {};
2551 var labels = this.attr_("labels");
2552 if (labels.length > 0) {
2553 this.setIndexByName_[labels[0]] = 0;
2554 }
857a6931 2555 var dataIdx = 0;
30a5cfc6 2556 for (var i = 1; i < points.length; i++) {
82c6fe4d 2557 this.setIndexByName_[labels[i]] = i;
4523c1f6 2558 if (!this.visibility()[i - 1]) continue;
30a5cfc6 2559 this.layout_.addDataset(labels[i], points[i]);
857a6931 2560 this.datasetIndex_[i] = dataIdx++;
43af96e7
NK
2561 }
2562
6faebb69 2563 this.computeYAxisRanges_(extremes);
b2c9222a
DV
2564 this.layout_.setYAxes(this.axes_);
2565
6a1aa64f
DV
2566 this.addXTicks_();
2567
b2c9222a 2568 // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously
81856f70 2569 var tmp_zoomed_x = this.zoomed_x_;
6a1aa64f 2570 // Tell PlotKit to use this new data and render itself
81856f70 2571 this.zoomed_x_ = tmp_zoomed_x;
30a5cfc6 2572 this.layout_.evaluate();
e2c21500 2573 this.renderGraph_(is_initial_draw);
9ca829f2 2574
b0963cdb 2575 if (this.getStringOption("timingName")) {
9ca829f2 2576 var end = new Date();
b0963cdb 2577 Dygraph.info(this.getStringOption("timingName") + " - drawGraph: " + (end - start) + "ms");
9ca829f2
DV
2578 }
2579};
2580
e2c21500
DV
2581/**
2582 * This does the work of drawing the chart. It assumes that the layout and axis
2583 * scales have already been set (e.g. by predraw_).
2584 *
2585 * @private
2586 */
2587Dygraph.prototype.renderGraph_ = function(is_initial_draw) {
1748a51c 2588 this.cascadeEvents_('clearChart');
6a1aa64f 2589 this.plotter_.clear();
f417e3d3 2590
b0963cdb 2591 if (this.getFunctionOption('underlayCallback')) {
98eb4713
DV
2592 // NOTE: we pass the dygraph object to this callback twice to avoid breaking
2593 // users who expect a deprecated form of this callback.
b0963cdb 2594 this.getFunctionOption('underlayCallback')(
98eb4713
DV
2595 this.hidden_ctx_, this.layout_.getPlotArea(), this, this);
2596 }
2597
2598 var e = {
189f8030 2599 canvas: this.hidden_,
2de7166c 2600 drawingContext: this.hidden_ctx_
98eb4713
DV
2601 };
2602 this.cascadeEvents_('willDrawChart', e);
6a1aa64f 2603 this.plotter_.render();
98eb4713 2604 this.cascadeEvents_('didDrawChart', e);
fa11f4e4 2605 this.lastRow_ = -1; // because plugins/legend.js clears the legend
8cfe592f
DV
2606
2607 // TODO(danvk): is this a performance bottleneck when panning?
2608 // The interaction canvas should already be empty in that situation.
f6401bf6 2609 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2f5e7e1a 2610 this.canvas_.height);
599fb4ad 2611
b0963cdb
DV
2612 if (this.getFunctionOption("drawCallback") !== null) {
2613 this.getFunctionOption("drawCallback")(this, is_initial_draw);
599fb4ad 2614 }
5bcc58b4
DV
2615 if (is_initial_draw) {
2616 this.readyFired_ = true;
2617 while (this.readyFns_.length > 0) {
2618 var fn = this.readyFns_.pop();
2619 fn(this);
2620 }
2621 }
6a1aa64f
DV
2622};
2623
2624/**
629a09ae 2625 * @private
26ca7938
DV
2626 * Determine properties of the y-axes which are independent of the data
2627 * currently being displayed. This includes things like the number of axes and
2628 * the style of the axes. It does not include the range of each axis and its
2629 * tick marks.
16f00742 2630 * This fills in this.axes_.
26ca7938 2631 * axes_ = [ { options } ]
26ca7938 2632 * indices are into the axes_ array.
f09fc545 2633 */
26ca7938 2634Dygraph.prototype.computeYAxes_ = function() {
d64b8fea
RK
2635 // Preserve valueWindow settings if they exist, and if the user hasn't
2636 // specified a new valueRange.
0cd1ad15 2637 var valueWindows, axis, index, opts, v;
758a629f 2638 if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) {
d64b8fea 2639 valueWindows = [];
758a629f 2640 for (index = 0; index < this.axes_.length; index++) {
d64b8fea
RK
2641 valueWindows.push(this.axes_[index].valueWindow);
2642 }
2643 }
2644
6ad8b6a4
RK
2645 // this.axes_ doesn't match this.attributes_.axes_.options. It's used for
2646 // data computation as well as options storage.
f09fc545 2647 // Go through once and add all the axes.
02c93ff5 2648 this.axes_ = [];
0d216a60 2649
02c93ff5 2650 for (axis = 0; axis < this.attributes_.numAxes(); axis++) {
6ad8b6a4 2651 // Add a new axis, making a copy of its per-axis options.
02c93ff5 2652 opts = { g : this };
6ad8b6a4
RK
2653 Dygraph.update(opts, this.attributes_.axisOptions(axis));
2654 this.axes_[axis] = opts;
f09fc545 2655 }
1c77a3a1 2656
7740dd00
RK
2657
2658 // Copy global valueRange option over to the first axis.
2659 // NOTE(konigsberg): Are these two statements necessary?
2660 // I tried removing it. The automated tests pass, and manually
2661 // messing with tests/zoom.html showed no trouble.
2662 v = this.attr_('valueRange');
2663 if (v) this.axes_[0].valueRange = v;
478b866b 2664
758a629f 2665 if (valueWindows !== undefined) {
d64b8fea 2666 // Restore valueWindow settings.
4ecb55b5
RK
2667
2668 // When going from two axes back to one, we only restore
2669 // one axis.
2670 var idxCount = Math.min(valueWindows.length, this.axes_.length);
2671
2672 for (index = 0; index < idxCount; index++) {
d64b8fea
RK
2673 this.axes_[index].valueWindow = valueWindows[index];
2674 }
2675 }
4dd0ac55 2676
4dd0ac55
RV
2677 for (axis = 0; axis < this.axes_.length; axis++) {
2678 if (axis === 0) {
2679 opts = this.optionsViewForAxis_('y' + (axis ? '2' : ''));
2680 v = opts("valueRange");
2681 if (v) this.axes_[axis].valueRange = v;
2682 } else { // To keep old behavior
2683 var axes = this.user_attrs_.axes;
2684 if (axes && axes.y2) {
2685 v = axes.y2.valueRange;
2686 if (v) this.axes_[axis].valueRange = v;
2687 }
2688 }
2689 }
26ca7938
DV
2690};
2691
2692/**
2693 * Returns the number of y-axes on the chart.
1bc88216 2694 * @return {number} the number of axes.
26ca7938
DV
2695 */
2696Dygraph.prototype.numAxes = function() {
16f00742 2697 return this.attributes_.numAxes();
26ca7938
DV
2698};
2699
2700/**
629a09ae 2701 * @private
b2c9222a 2702 * Returns axis properties for the given series.
1bc88216 2703 * @param {string} setName The name of the series for which to get axis
b2c9222a 2704 * properties, e.g. 'Y1'.
1bc88216 2705 * @return {Object} The axis properties.
b2c9222a
DV
2706 */
2707Dygraph.prototype.axisPropertiesForSeries = function(series) {
2708 // TODO(danvk): handle errors.
16f00742 2709 return this.axes_[this.attributes_.axisForSeries(series)];
b2c9222a
DV
2710};
2711
2712/**
2713 * @private
26ca7938
DV
2714 * Determine the value range and tick marks for each axis.
2715 * @param {Object} extremes A mapping from seriesName -> [low, high]
2716 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2717 */
2718Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
9adc2c33 2719 var isNullUndefinedOrNaN = function(num) {
126bf1e3 2720 return isNaN(parseFloat(num));
6b05851c 2721 };
16f00742 2722 var numAxes = this.attributes_.numAxes();
4bac38d8 2723 var ypadCompat, span, series, ypad;
9e906ae6
DE
2724
2725 var p_axis;
f09fc545
DV
2726
2727 // Compute extreme values, a span and tick marks for each axis.
16f00742 2728 for (var i = 0; i < numAxes; i++) {
26ca7938 2729 var axis = this.axes_[i];
ec40f67c
RK
2730 var logscale = this.attributes_.getForAxis("logscale", i);
2731 var includeZero = this.attributes_.getForAxis("includeZero", i);
9e906ae6 2732 var independentTicks = this.attributes_.getForAxis("independentTicks", i);
6ad8b6a4
RK
2733 series = this.attributes_.seriesForAxis(i);
2734
31a8d0cd 2735 // Add some padding. This supports two Y padding operation modes:
2736 //
2737 // - backwards compatible (yRangePad not set):
2738 // 10% padding for automatic Y ranges, but not for user-supplied
2739 // ranges, and move a close-to-zero edge to zero except if
2740 // avoidMinZero is set, since drawing at the edge results in
2741 // invisible lines. Unfortunately lines drawn at the edge of a
2742 // user-supplied range will still be invisible. If logscale is
2743 // set, add a variable amount of padding at the top but
2744 // none at the bottom.
2745 //
2746 // - new-style (yRangePad set by the user):
2747 // always add the specified Y padding.
2748 //
2749 ypadCompat = true;
2750 ypad = 0.1; // add 10%
b0963cdb 2751 if (this.getNumericOption('yRangePad') !== null) {
31a8d0cd 2752 ypadCompat = false;
2753 // Convert pixel padding to ratio
b0963cdb 2754 ypad = this.getNumericOption('yRangePad') / this.plotter_.area.h;
31a8d0cd 2755 }
2756
83b0c192 2757 if (series.length === 0) {
06fc69b6
AV
2758 // If no series are defined or visible then use a reasonable default
2759 axis.extremeRange = [0, 1];
2760 } else {
1c77a3a1 2761 // Calculate the extremes of extremes.
f09fc545
DV
2762 var minY = Infinity; // extremes[series[0]][0];
2763 var maxY = -Infinity; // extremes[series[0]][1];
ba049b89 2764 var extremeMinY, extremeMaxY;
a2da3777 2765
f09fc545 2766 for (var j = 0; j < series.length; j++) {
a2da3777
DV
2767 // this skips invisible series
2768 if (!extremes.hasOwnProperty(series[j])) continue;
2769
ba049b89
NN
2770 // Only use valid extremes to stop null data series' from corrupting the scale.
2771 extremeMinY = extremes[series[j]][0];
758a629f 2772 if (extremeMinY !== null) {
36dfa958 2773 minY = Math.min(extremeMinY, minY);
ba049b89
NN
2774 }
2775 extremeMaxY = extremes[series[j]][1];
758a629f 2776 if (extremeMaxY !== null) {
36dfa958 2777 maxY = Math.max(extremeMaxY, maxY);
ba049b89 2778 }
f09fc545 2779 }
fa460473
KW
2780
2781 // Include zero if requested by the user.
2782 if (includeZero && !logscale) {
2783 if (minY > 0) minY = 0;
2784 if (maxY < 0) maxY = 0;
2785 }
f09fc545 2786
a2da3777 2787 // Ensure we have a valid scale, otherwise default to [0, 1] for safety.
36dfa958 2788 if (minY == Infinity) minY = 0;
a2da3777 2789 if (maxY == -Infinity) maxY = 1;
ba049b89 2790
4bac38d8 2791 span = maxY - minY;
fa460473
KW
2792 // special case: if we have no sense of scale, center on the sole value.
2793 if (span === 0) {
2794 if (maxY !== 0) {
2795 span = Math.abs(maxY);
2796 } else {
2797 // ... and if the sole value is zero, use range 0-1.
2798 maxY = 1;
2799 span = 1;
2800 }
2801 }
2802
758a629f 2803 var maxAxisY, minAxisY;
ec40f67c 2804 if (logscale) {
fa460473
KW
2805 if (ypadCompat) {
2806 maxAxisY = maxY + ypad * span;
2807 minAxisY = minY;
2808 } else {
2809 var logpad = Math.exp(Math.log(span) * ypad);
2810 maxAxisY = maxY * logpad;
2811 minAxisY = minY / logpad;
2812 }
ff022deb 2813 } else {
fa460473
KW
2814 maxAxisY = maxY + ypad * span;
2815 minAxisY = minY - ypad * span;
f09fc545 2816
fa460473
KW
2817 // Backwards-compatible behavior: Move the span to start or end at zero if it's
2818 // close to zero, but not if avoidMinZero is set.
b0963cdb 2819 if (ypadCompat && !this.getBooleanOption("avoidMinZero")) {
ff022deb
RK
2820 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2821 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2822 }
f09fc545 2823 }
4cac8c7a
RK
2824 axis.extremeRange = [minAxisY, maxAxisY];
2825 }
2826 if (axis.valueWindow) {
2827 // This is only set if the user has zoomed on the y-axis. It is never set
2828 // by a user. It takes precedence over axis.valueRange because, if you set
2829 // valueRange, you'd still expect to be able to pan.
2830 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
2831 } else if (axis.valueRange) {
2832 // This is a user-set value range for this axis.
fa460473
KW
2833 var y0 = isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0];
2834 var y1 = isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1];
2835 if (!ypadCompat) {
2836 if (axis.logscale) {
2837 var logpad = Math.exp(Math.log(span) * ypad);
2838 y0 *= logpad;
2839 y1 /= logpad;
2840 } else {
4bac38d8 2841 span = y1 - y0;
fa460473
KW
2842 y0 -= span * ypad;
2843 y1 += span * ypad;
2844 }
2845 }
2846 axis.computedValueRange = [y0, y1];
4cac8c7a
RK
2847 } else {
2848 axis.computedValueRange = axis.extremeRange;
f09fc545 2849 }
9e906ae6
DE
2850
2851
383d8473 2852 if (independentTicks) {
9e906ae6
DE
2853 axis.independentTicks = independentTicks;
2854 var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2855 var ticker = opts('ticker');
48e614ac 2856 axis.ticks = ticker(axis.computedValueRange[0],
9e906ae6
DE
2857 axis.computedValueRange[1],
2858 this.height_, // TODO(danvk): should be area.height
2859 opts,
2860 this);
6c5f8774 2861 // Define the first independent axis as primary axis.
e8b3c7b4 2862 if (!p_axis) p_axis = axis;
9e906ae6
DE
2863 }
2864 }
e8b3c7b4 2865 if (p_axis === undefined) {
eba6dd23 2866 throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated.");
e8b3c7b4 2867 }
9e906ae6
DE
2868 // Add ticks. By default, all axes inherit the tick positions of the
2869 // primary axis. However, if an axis is specifically marked as having
2870 // independent ticks, then that is permissible as well.
2871 for (var i = 0; i < numAxes; i++) {
2872 var axis = this.axes_[i];
2873
2874 if (!axis.independentTicks) {
2875 var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
2876 var ticker = opts('ticker');
0d64e596
DV
2877 var p_ticks = p_axis.ticks;
2878 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2879 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2880 var tick_values = [];
25f76ae3
DV
2881 for (var k = 0; k < p_ticks.length; k++) {
2882 var y_frac = (p_ticks[k].v - p_axis.computedValueRange[0]) / p_scale;
0d64e596
DV
2883 var y_val = axis.computedValueRange[0] + y_frac * scale;
2884 tick_values.push(y_val);
2885 }
2886
48e614ac
DV
2887 axis.ticks = ticker(axis.computedValueRange[0],
2888 axis.computedValueRange[1],
2889 this.height_, // TODO(danvk): should be area.height
2890 opts,
2891 this,
2892 tick_values);
0d64e596 2893 }
34fc91d4 2894 }
f09fc545 2895};
25f76ae3 2896
f09fc545 2897/**
285a6bda
DV
2898 * Detects the type of the str (date or numeric) and sets the various
2899 * formatting attributes in this.attrs_ based on this type.
1bc88216 2900 * @param {string} str An x value.
285a6bda
DV
2901 * @private
2902 */
2903Dygraph.prototype.detectTypeFromString_ = function(str) {
2904 var isDate = false;
0842b24b
DV
2905 var dashPos = str.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2
2906 if ((dashPos > 0 && (str[dashPos-1] != 'e' && str[dashPos-1] != 'E')) ||
285a6bda
DV
2907 str.indexOf('/') >= 0 ||
2908 isNaN(parseFloat(str))) {
2909 isDate = true;
2910 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2911 // TODO(danvk): remove support for this format.
2912 isDate = true;
2913 }
2914
a716aff2
RK
2915 this.setXAxisOptions_(isDate);
2916};
2917
2918Dygraph.prototype.setXAxisOptions_ = function(isDate) {
285a6bda 2919 if (isDate) {
285a6bda 2920 this.attrs_.xValueParser = Dygraph.dateParser;
48e614ac
DV
2921 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
2922 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
2923 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda 2924 } else {
c39e1d93 2925 /** @private (shut up, jsdoc!) */
285a6bda 2926 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
48e614ac
DV
2927 // TODO(danvk): use Dygraph.numberValueFormatter here?
2928 /** @private (shut up, jsdoc!) */
2929 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
44462ba3 2930 this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
48e614ac 2931 this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
6a1aa64f 2932 }
83b0c192 2933};
6a1aa64f
DV
2934
2935/**
629a09ae 2936 * @private
6a1aa64f
DV
2937 * Parses a string in a special csv format. We expect a csv file where each
2938 * line is a date point, and the first field in each line is the date string.
2939 * We also expect that all remaining fields represent series.
285a6bda 2940 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f 2941 * date, series1, stddev1, series2, stddev2, ...
629a09ae 2942 * @param {[Object]} data See above.
285a6bda 2943 *
629a09ae 2944 * @return [Object] An array with one entry for each row. These entries
285a6bda
DV
2945 * are an array of cells in that row. The first entry is the parsed x-value for
2946 * the row. The second, third, etc. are the y-values. These can take on one of
2947 * three forms, depending on the CSV and constructor parameters:
2948 * 1. numeric value
2949 * 2. [ value, stddev ]
2950 * 3. [ low value, center value, high value ]
6a1aa64f 2951 */
285a6bda 2952Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f 2953 var ret = [];
e5763589
DV
2954 var line_delimiter = Dygraph.detectLineDelimiter(data);
2955 var lines = data.split(line_delimiter || "\n");
758a629f 2956 var vals, j;
3d67f03b
DV
2957
2958 // Use the default delimiter or fall back to a tab if that makes sense.
b0963cdb 2959 var delim = this.getStringOption('delimiter');
3d67f03b
DV
2960 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2961 delim = '\t';
2962 }
2963
285a6bda 2964 var start = 0;
d7beab6b
DV
2965 if (!('labels' in this.user_attrs_)) {
2966 // User hasn't explicitly set labels, so they're (presumably) in the CSV.
285a6bda 2967 start = 1;
d7beab6b 2968 this.attrs_.labels = lines[0].split(delim); // NOTE: _not_ user_attrs_.
34825ef5 2969 this.attributes_.reparseSeries();
6a1aa64f 2970 }
5cd7ac68 2971 var line_no = 0;
03b522a4 2972
285a6bda
DV
2973 var xParser;
2974 var defaultParserSet = false; // attempt to auto-detect x value type
2975 var expectedCols = this.attr_("labels").length;
987840a2 2976 var outOfOrder = false;
6a1aa64f
DV
2977 for (var i = start; i < lines.length; i++) {
2978 var line = lines[i];
5cd7ac68 2979 line_no = i;
758a629f 2980 if (line.length === 0) continue; // skip blank lines
3d67f03b
DV
2981 if (line[0] == '#') continue; // skip comment lines
2982 var inFields = line.split(delim);
285a6bda 2983 if (inFields.length < 2) continue;
6a1aa64f
DV
2984
2985 var fields = [];
285a6bda
DV
2986 if (!defaultParserSet) {
2987 this.detectTypeFromString_(inFields[0]);
b0963cdb 2988 xParser = this.getFunctionOption("xValueParser");
285a6bda
DV
2989 defaultParserSet = true;
2990 }
2991 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
2992
2993 // If fractions are expected, parse the numbers as "A/B"
2994 if (this.fractions_) {
758a629f 2995 for (j = 1; j < inFields.length; j++) {
6a1aa64f 2996 // TODO(danvk): figure out an appropriate way to flag parse errors.
758a629f 2997 vals = inFields[j].split("/");
7219edb3 2998 if (vals.length != 2) {
464b5f50
DV
2999 Dygraph.error('Expected fractional "num/den" values in CSV data ' +
3000 "but found a value '" + inFields[j] + "' on line " +
3001 (1 + i) + " ('" + line + "') which is not of this form.");
7219edb3
DV
3002 fields[j] = [0, 0];
3003 } else {
55deb02f
DV
3004 fields[j] = [Dygraph.parseFloat_(vals[0], i, line),
3005 Dygraph.parseFloat_(vals[1], i, line)];
7219edb3 3006 }
6a1aa64f 3007 }
b0963cdb 3008 } else if (this.getBooleanOption("errorBars")) {
6a1aa64f 3009 // If there are error bars, values are (value, stddev) pairs
7219edb3 3010 if (inFields.length % 2 != 1) {
464b5f50
DV
3011 Dygraph.error('Expected alternating (value, stdev.) pairs in CSV data ' +
3012 'but line ' + (1 + i) + ' has an odd number of values (' +
3013 (inFields.length - 1) + "): '" + line + "'");
7219edb3 3014 }
758a629f 3015 for (j = 1; j < inFields.length; j += 2) {
55deb02f
DV
3016 fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line),
3017 Dygraph.parseFloat_(inFields[j + 1], i, line)];
7219edb3 3018 }
b0963cdb 3019 } else if (this.getBooleanOption("customBars")) {
6a1aa64f 3020 // Bars are a low;center;high tuple
758a629f 3021 for (j = 1; j < inFields.length; j++) {
327a9279
DV
3022 var val = inFields[j];
3023 if (/^ *$/.test(val)) {
3024 fields[j] = [null, null, null];
3025 } else {
758a629f 3026 vals = val.split(";");
327a9279 3027 if (vals.length == 3) {
55deb02f
DV
3028 fields[j] = [ Dygraph.parseFloat_(vals[0], i, line),
3029 Dygraph.parseFloat_(vals[1], i, line),
3030 Dygraph.parseFloat_(vals[2], i, line) ];
327a9279 3031 } else {
464b5f50
DV
3032 Dygraph.warn('When using customBars, values must be either blank ' +
3033 'or "low;center;high" tuples (got "' + val +
3034 '" on line ' + (1+i));
327a9279
DV
3035 }
3036 }
6a1aa64f
DV
3037 }
3038 } else {
3039 // Values are just numbers
758a629f 3040 for (j = 1; j < inFields.length; j++) {
55deb02f 3041 fields[j] = Dygraph.parseFloat_(inFields[j], i, line);
285a6bda 3042 }
6a1aa64f 3043 }
987840a2
DV
3044 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
3045 outOfOrder = true;
3046 }
285a6bda
DV
3047
3048 if (fields.length != expectedCols) {
464b5f50
DV
3049 Dygraph.error("Number of columns in line " + i + " (" + fields.length +
3050 ") does not agree with number of labels (" + expectedCols +
3051 ") " + line);
285a6bda 3052 }
6d0aaa09
DV
3053
3054 // If the user specified the 'labels' option and none of the cells of the
3055 // first row parsed correctly, then they probably double-specified the
3056 // labels. We go with the values set in the option, discard this row and
3057 // log a warning to the JS console.
758a629f 3058 if (i === 0 && this.attr_('labels')) {
6d0aaa09 3059 var all_null = true;
758a629f 3060 for (j = 0; all_null && j < fields.length; j++) {
6d0aaa09
DV
3061 if (fields[j]) all_null = false;
3062 }
3063 if (all_null) {
464b5f50
DV
3064 Dygraph.warn("The dygraphs 'labels' option is set, but the first row " +
3065 "of CSV data ('" + line + "') appears to also contain " +
3066 "labels. Will drop the CSV labels and use the option " +
3067 "labels.");
6d0aaa09
DV
3068 continue;
3069 }
3070 }
3071 ret.push(fields);
6a1aa64f 3072 }
987840a2
DV
3073
3074 if (outOfOrder) {
464b5f50 3075 Dygraph.warn("CSV is out of order; order it correctly to speed loading.");
758a629f 3076 ret.sort(function(a,b) { return a[0] - b[0]; });
987840a2
DV
3077 }
3078
6a1aa64f
DV
3079 return ret;
3080};
3081
3082/**
285a6bda
DV
3083 * The user has provided their data as a pre-packaged JS array. If the x values
3084 * are numeric, this is the same as dygraphs' internal format. If the x values
3085 * are dates, we need to convert them from Date objects to ms since epoch.
8ef9d44d
DV
3086 * @param {!Array} data
3087 * @return {Object} data with numeric x values.
3088 * @private
285a6bda
DV
3089 */
3090Dygraph.prototype.parseArray_ = function(data) {
3091 // Peek at the first x value to see if it's numeric.
758a629f 3092 if (data.length === 0) {
464b5f50 3093 Dygraph.error("Can't plot empty data set");
285a6bda
DV
3094 return null;
3095 }
758a629f 3096 if (data[0].length === 0) {
464b5f50 3097 Dygraph.error("Data set cannot contain an empty row");
285a6bda
DV
3098 return null;
3099 }
3100
758a629f
DV
3101 var i;
3102 if (this.attr_("labels") === null) {
464b5f50
DV
3103 Dygraph.warn("Using default labels. Set labels explicitly via 'labels' " +
3104 "in the options parameter");
285a6bda 3105 this.attrs_.labels = [ "X" ];
758a629f 3106 for (i = 1; i < data[0].length; i++) {
77812e0e 3107 this.attrs_.labels.push("Y" + i); // Not user_attrs_.
285a6bda 3108 }
77812e0e 3109 this.attributes_.reparseSeries();
debdb88d
DV
3110 } else {
3111 var num_labels = this.attr_("labels");
3112 if (num_labels.length != data[0].length) {
464b5f50
DV
3113 Dygraph.error("Mismatch between number of labels (" + num_labels + ")" +
3114 " and number of columns in array (" + data[0].length + ")");
debdb88d
DV
3115 return null;
3116 }
285a6bda
DV
3117 }
3118
2dda3850 3119 if (Dygraph.isDateLike(data[0][0])) {
285a6bda 3120 // Some intelligent defaults for a date x-axis.
48e614ac 3121 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
48e614ac 3122 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
a716aff2 3123 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
3124
3125 // Assume they're all dates.
e3ab7b40 3126 var parsedData = Dygraph.clone(data);
758a629f
DV
3127 for (i = 0; i < data.length; i++) {
3128 if (parsedData[i].length === 0) {
464b5f50 3129 Dygraph.error("Row " + (1 + i) + " of data is empty");
285a6bda
DV
3130 return null;
3131 }
758a629f
DV
3132 if (parsedData[i][0] === null ||
3133 typeof(parsedData[i][0].getTime) != 'function' ||
3134 isNaN(parsedData[i][0].getTime())) {
464b5f50 3135 Dygraph.error("x value in row " + (1 + i) + " is not a Date");
285a6bda
DV
3136 return null;
3137 }
3138 parsedData[i][0] = parsedData[i][0].getTime();
3139 }
3140 return parsedData;
3141 } else {
3142 // Some intelligent defaults for a numeric x-axis.
c39e1d93 3143 /** @private (shut up, jsdoc!) */
48e614ac 3144 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
44462ba3 3145 this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
a716aff2 3146 this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
285a6bda
DV
3147 return data;
3148 }
3149};
3150
3151/**
79420a1e
DV
3152 * Parses a DataTable object from gviz.
3153 * The data is expected to have a first column that is either a date or a
3154 * number. All subsequent columns must be numbers. If there is a clear mismatch
3155 * between this.xValueParser_ and the type of the first column, it will be
a685723c 3156 * fixed. Fills out rawData_.
1bc88216 3157 * @param {!google.visualization.DataTable} data See above.
79420a1e
DV
3158 * @private
3159 */
285a6bda 3160Dygraph.prototype.parseDataTable_ = function(data) {
5829af3d 3161 var shortTextForAnnotationNum = function(num) {
3162 // converts [0-9]+ [A-Z][a-z]*
3163 // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab
3164 // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz
3165 var shortText = String.fromCharCode(65 /* A */ + num % 26);
3166 num = Math.floor(num / 26);
3167 while ( num > 0 ) {
3168 shortText = String.fromCharCode(65 /* A */ + (num - 1) % 26 ) + shortText.toLowerCase();
3169 num = Math.floor((num - 1) / 26);
3170 }
3171 return shortText;
42a9ebb8 3172 };
5829af3d 3173
79420a1e
DV
3174 var cols = data.getNumberOfColumns();
3175 var rows = data.getNumberOfRows();
3176
d955e223 3177 var indepType = data.getColumnType(0);
4440f6c8 3178 if (indepType == 'date' || indepType == 'datetime') {
285a6bda 3179 this.attrs_.xValueParser = Dygraph.dateParser;
48e614ac
DV
3180 this.attrs_.axes.x.valueFormatter = Dygraph.dateString_;
3181 this.attrs_.axes.x.ticker = Dygraph.dateTicker;
3182 this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter;
33127159 3183 } else if (indepType == 'number') {
285a6bda 3184 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
48e614ac 3185 this.attrs_.axes.x.valueFormatter = function(x) { return x; };
44462ba3 3186 this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
48e614ac 3187 this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
285a6bda 3188 } else {
464b5f50
DV
3189 Dygraph.error("only 'date', 'datetime' and 'number' types are supported " +
3190 "for column 1 of DataTable input (Got '" + indepType + "')");
79420a1e
DV
3191 return null;
3192 }
3193
a685723c
DV
3194 // Array of the column indices which contain data (and not annotations).
3195 var colIdx = [];
3196 var annotationCols = {}; // data index -> [annotation cols]
3197 var hasAnnotations = false;
758a629f
DV
3198 var i, j;
3199 for (i = 1; i < cols; i++) {
a685723c
DV
3200 var type = data.getColumnType(i);
3201 if (type == 'number') {
3202 colIdx.push(i);
b0963cdb 3203 } else if (type == 'string' && this.getBooleanOption('displayAnnotations')) {
a685723c
DV
3204 // This is OK -- it's an annotation column.
3205 var dataIdx = colIdx[colIdx.length - 1];
3206 if (!annotationCols.hasOwnProperty(dataIdx)) {
3207 annotationCols[dataIdx] = [i];
3208 } else {
3209 annotationCols[dataIdx].push(i);
3210 }
3211 hasAnnotations = true;
3212 } else {
464b5f50
DV
3213 Dygraph.error("Only 'number' is supported as a dependent type with Gviz." +
3214 " 'string' is only supported if displayAnnotations is true");
a685723c
DV
3215 }
3216 }
3217
3218 // Read column labels
3219 // TODO(danvk): add support back for errorBars
3220 var labels = [data.getColumnLabel(0)];
758a629f 3221 for (i = 0; i < colIdx.length; i++) {
a685723c 3222 labels.push(data.getColumnLabel(colIdx[i]));
b0963cdb 3223 if (this.getBooleanOption("errorBars")) i += 1;
a685723c
DV
3224 }
3225 this.attrs_.labels = labels;
3226 cols = labels.length;
3227
79420a1e 3228 var ret = [];
987840a2 3229 var outOfOrder = false;
a685723c 3230 var annotations = [];
758a629f 3231 for (i = 0; i < rows; i++) {
79420a1e 3232 var row = [];
debe4434
DV
3233 if (typeof(data.getValue(i, 0)) === 'undefined' ||
3234 data.getValue(i, 0) === null) {
464b5f50
DV
3235 Dygraph.warn("Ignoring row " + i +
3236 " of DataTable because of undefined or null first column.");
debe4434
DV
3237 continue;
3238 }
3239
c21d2c2d 3240 if (indepType == 'date' || indepType == 'datetime') {
d955e223
DV
3241 row.push(data.getValue(i, 0).getTime());
3242 } else {
3243 row.push(data.getValue(i, 0));
3244 }
b0963cdb 3245 if (!this.getBooleanOption("errorBars")) {
758a629f 3246 for (j = 0; j < colIdx.length; j++) {
a685723c
DV
3247 var col = colIdx[j];
3248 row.push(data.getValue(i, col));
3249 if (hasAnnotations &&
3250 annotationCols.hasOwnProperty(col) &&
758a629f 3251 data.getValue(i, annotationCols[col][0]) !== null) {
a685723c
DV
3252 var ann = {};
3253 ann.series = data.getColumnLabel(col);
3254 ann.xval = row[0];
5829af3d 3255 ann.shortText = shortTextForAnnotationNum(annotations.length);
a685723c
DV
3256 ann.text = '';
3257 for (var k = 0; k < annotationCols[col].length; k++) {
3258 if (k) ann.text += "\n";
3259 ann.text += data.getValue(i, annotationCols[col][k]);
3260 }
3261 annotations.push(ann);
3262 }
3e3f84e4 3263 }
92fd68d8
DV
3264
3265 // Strip out infinities, which give dygraphs problems later on.
758a629f 3266 for (j = 0; j < row.length; j++) {
92fd68d8
DV
3267 if (!isFinite(row[j])) row[j] = null;
3268 }
3e3f84e4 3269 } else {
758a629f 3270 for (j = 0; j < cols - 1; j++) {
3e3f84e4
DV
3271 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
3272 }
79420a1e 3273 }
987840a2
DV
3274 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
3275 outOfOrder = true;
3276 }
243d96e8 3277 ret.push(row);
79420a1e 3278 }
987840a2
DV
3279
3280 if (outOfOrder) {
464b5f50 3281 Dygraph.warn("DataTable is out of order; order it correctly to speed loading.");
758a629f 3282 ret.sort(function(a,b) { return a[0] - b[0]; });
987840a2 3283 }
a685723c
DV
3284 this.rawData_ = ret;
3285
3286 if (annotations.length > 0) {
3287 this.setAnnotations(annotations, true);
3288 }
0fa724fd 3289 this.attributes_.reparseSeries();
758a629f 3290};
79420a1e 3291
629a09ae 3292/**
6a1aa64f
DV
3293 * Get the CSV data. If it's in a function, call that function. If it's in a
3294 * file, do an XMLHttpRequest to get it.
3295 * @private
3296 */
285a6bda 3297Dygraph.prototype.start_ = function() {
36d4fabf
RK
3298 var data = this.file_;
3299
3300 // Functions can return references of all other types.
3301 if (typeof data == 'function') {
3302 data = data();
3303 }
3304
3305 if (Dygraph.isArrayLike(data)) {
3306 this.rawData_ = this.parseArray_(data);
26ca7938 3307 this.predraw_();
36d4fabf
RK
3308 } else if (typeof data == 'object' &&
3309 typeof data.getColumnRange == 'function') {
79420a1e 3310 // must be a DataTable from gviz.
36d4fabf 3311 this.parseDataTable_(data);
26ca7938 3312 this.predraw_();
36d4fabf 3313 } else if (typeof data == 'string') {
285a6bda 3314 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
e5763589
DV
3315 var line_delimiter = Dygraph.detectLineDelimiter(data);
3316 if (line_delimiter) {
36d4fabf 3317 this.loadedEvent_(data);
285a6bda 3318 } else {
efc5160f
DV
3319 // REMOVE_FOR_IE
3320 var req;
3321 if (window.XMLHttpRequest) {
3322 // Firefox, Opera, IE7, and other browsers will use the native object
3323 req = new XMLHttpRequest();
3324 } else {
3325 // IE 5 and 6 will use the ActiveX control
3326 req = new ActiveXObject("Microsoft.XMLHTTP");
3327 }
3328
285a6bda
DV
3329 var caller = this;
3330 req.onreadystatechange = function () {
3331 if (req.readyState == 4) {
758a629f
DV
3332 if (req.status === 200 || // Normal http
3333 req.status === 0) { // Chrome w/ --allow-file-access-from-files
285a6bda
DV
3334 caller.loadedEvent_(req.responseText);
3335 }
6a1aa64f 3336 }
285a6bda 3337 };
6a1aa64f 3338
36d4fabf 3339 req.open("GET", data, true);
285a6bda
DV
3340 req.send(null);
3341 }
3342 } else {
464b5f50 3343 Dygraph.error("Unknown data format: " + (typeof data));
6a1aa64f
DV
3344 }
3345};
3346
3347/**
3348 * Changes various properties of the graph. These can include:
3349 * <ul>
3350 * <li>file: changes the source data for the graph</li>
3351 * <li>errorBars: changes whether the data contains stddev</li>
3352 * </ul>
dcb25130 3353 *
ccfcc169
DV
3354 * There's a huge variety of options that can be passed to this method. For a
3355 * full list, see http://dygraphs.com/options.html.
3356 *
8ef9d44d
DV
3357 * @param {Object} input_attrs The new properties and values
3358 * @param {boolean} block_redraw Usually the chart is redrawn after every
3359 * call to updateOptions(). If you know better, you can pass true to
3360 * explicitly block the redraw. This can be useful for chaining
3361 * updateOptions() calls, avoiding the occasional infinite loop and
3362 * preventing redraws when it's not necessary (e.g. when updating a
3363 * callback).
6a1aa64f 3364 */
48e614ac 3365Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) {
ccfcc169
DV
3366 if (typeof(block_redraw) == 'undefined') block_redraw = false;
3367
48e614ac 3368 // mapLegacyOptions_ drops the "file" parameter as a convenience to us.
758a629f 3369 var file = input_attrs.file;
48e614ac
DV
3370 var attrs = Dygraph.mapLegacyOptions_(input_attrs);
3371
ccfcc169 3372 // TODO(danvk): this is a mess. Move these options into attr_.
c65f2303 3373 if ('rollPeriod' in attrs) {
6a1aa64f
DV
3374 this.rollPeriod_ = attrs.rollPeriod;
3375 }
c65f2303 3376 if ('dateWindow' in attrs) {
6a1aa64f 3377 this.dateWindow_ = attrs.dateWindow;
e5152598 3378 if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) {
758a629f 3379 this.zoomed_x_ = (attrs.dateWindow !== null);
81856f70 3380 }
b7e5862d 3381 }
e5152598 3382 if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) {
758a629f 3383 this.zoomed_y_ = (attrs.valueRange !== null);
6a1aa64f 3384 }
450fe64b
DV
3385
3386 // TODO(danvk): validate per-series options.
46dde5f9
DV
3387 // Supported:
3388 // strokeWidth
3389 // pointSize
3390 // drawPoints
3391 // highlightCircleSize
450fe64b 3392
9ca829f2
DV
3393 // Check if this set options will require new points.
3394 var requiresNewPoints = Dygraph.isPixelChangingOptionList(this.attr_("labels"), attrs);
3395
48e614ac 3396 Dygraph.updateDeep(this.user_attrs_, attrs);
285a6bda 3397
b635457c
RK
3398 this.attributes_.reparseSeries();
3399
48e614ac
DV
3400 if (file) {
3401 this.file_ = file;
ccfcc169 3402 if (!block_redraw) this.start_();
6a1aa64f 3403 } else {
9ca829f2
DV
3404 if (!block_redraw) {
3405 if (requiresNewPoints) {
48e614ac 3406 this.predraw_();
9ca829f2 3407 } else {
e2c21500 3408 this.renderGraph_(false);
9ca829f2
DV
3409 }
3410 }
6a1aa64f
DV
3411 }
3412};
3413
3414/**
48e614ac
DV
3415 * Returns a copy of the options with deprecated names converted into current
3416 * names. Also drops the (potentially-large) 'file' attribute. If the caller is
3417 * interested in that, they should save a copy before calling this.
3418 * @private
3419 */
3420Dygraph.mapLegacyOptions_ = function(attrs) {
3421 var my_attrs = {};
3422 for (var k in attrs) {
3423 if (k == 'file') continue;
3424 if (attrs.hasOwnProperty(k)) my_attrs[k] = attrs[k];
3425 }
3426
3427 var set = function(axis, opt, value) {
3428 if (!my_attrs.axes) my_attrs.axes = {};
3429 if (!my_attrs.axes[axis]) my_attrs.axes[axis] = {};
3430 my_attrs.axes[axis][opt] = value;
3431 };
3432 var map = function(opt, axis, new_opt) {
3433 if (typeof(attrs[opt]) != 'undefined') {
a9172eb1
RK
3434 Dygraph.warn("Option " + opt + " is deprecated. Use the " +
3435 new_opt + " option for the " + axis + " axis instead. " +
33a10307
RK
3436 "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } } " +
3437 "(see http://dygraphs.com/per-axis.html for more information.");
48e614ac
DV
3438 set(axis, new_opt, attrs[opt]);
3439 delete my_attrs[opt];
3440 }
3441 };
3442
3443 // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } }
3444 map('xValueFormatter', 'x', 'valueFormatter');
3445 map('pixelsPerXLabel', 'x', 'pixelsPerLabel');
3446 map('xAxisLabelFormatter', 'x', 'axisLabelFormatter');
3447 map('xTicker', 'x', 'ticker');
3448 map('yValueFormatter', 'y', 'valueFormatter');
3449 map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
3450 map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
3451 map('yTicker', 'y', 'ticker');
7f6a7190
RK
3452 map('drawXGrid', 'x', 'drawGrid');
3453 map('drawXAxis', 'x', 'drawAxis');
3454 map('drawYGrid', 'y', 'drawGrid');
3455 map('drawYAxis', 'y', 'drawAxis');
48e614ac
DV
3456 return my_attrs;
3457};
3458
3459/**
697e70b2
DV
3460 * Resizes the dygraph. If no parameters are specified, resizes to fill the
3461 * containing div (which has presumably changed size since the dygraph was
3462 * instantiated. If the width/height are specified, the div will be resized.
964f30c6
DV
3463 *
3464 * This is far more efficient than destroying and re-instantiating a
3465 * Dygraph, since it doesn't have to reparse the underlying data.
3466 *
1bc88216
DV
3467 * @param {number} width Width (in pixels)
3468 * @param {number} height Height (in pixels)
697e70b2
DV
3469 */
3470Dygraph.prototype.resize = function(width, height) {
e8c7ef86
DV
3471 if (this.resize_lock) {
3472 return;
3473 }
3474 this.resize_lock = true;
3475
697e70b2 3476 if ((width === null) != (height === null)) {
464b5f50
DV
3477 Dygraph.warn("Dygraph.resize() should be called with zero parameters or " +
3478 "two non-NULL parameters. Pretending it was zero.");
697e70b2
DV
3479 width = height = null;
3480 }
3481
4b4d1a63
DV
3482 var old_width = this.width_;
3483 var old_height = this.height_;
b16e6369 3484
697e70b2
DV
3485 if (width) {
3486 this.maindiv_.style.width = width + "px";
3487 this.maindiv_.style.height = height + "px";
3488 this.width_ = width;
3489 this.height_ = height;
3490 } else {
ccd9d7c2
PF
3491 this.width_ = this.maindiv_.clientWidth;
3492 this.height_ = this.maindiv_.clientHeight;
697e70b2
DV
3493 }
3494
4b4d1a63 3495 if (old_width != this.width_ || old_height != this.height_) {
d82a3164
KW
3496 // Resizing a canvas erases it, even when the size doesn't change, so
3497 // any resize needs to be followed by a redraw.
3498 this.resizeElements_();
4b4d1a63
DV
3499 this.predraw_();
3500 }
e8c7ef86
DV
3501
3502 this.resize_lock = false;
697e70b2
DV
3503};
3504
3505/**
6faebb69 3506 * Adjusts the number of points in the rolling average. Updates the graph to
6a1aa64f 3507 * reflect the new averaging period.
1bc88216 3508 * @param {number} length Number of points over which to average the data.
6a1aa64f 3509 */
285a6bda 3510Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f 3511 this.rollPeriod_ = length;
26ca7938 3512 this.predraw_();
6a1aa64f 3513};
540d00f1 3514
f8cfec73 3515/**
1cf11047
DV
3516 * Returns a boolean array of visibility statuses.
3517 */
3518Dygraph.prototype.visibility = function() {
3519 // Do lazy-initialization, so that this happens after we know the number of
3520 // data series.
b0963cdb 3521 if (!this.getOption("visibility")) {
758a629f 3522 this.attrs_.visibility = [];
1cf11047 3523 }
758a629f 3524 // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs.
b0963cdb 3525 while (this.getOption("visibility").length < this.numColumns() - 1) {
758a629f 3526 this.attrs_.visibility.push(true);
1cf11047 3527 }
b0963cdb 3528 return this.getOption("visibility");
1cf11047
DV
3529};
3530
3531/**
3532 * Changes the visiblity of a series.
2aed8ad8 3533 *
7e64db42
RK
3534 * @param {number} num the series index
3535 * @param {boolean} value true or false, identifying the visibility.
1cf11047
DV
3536 */
3537Dygraph.prototype.setVisibility = function(num, value) {
3538 var x = this.visibility();
a6c109c1 3539 if (num < 0 || num >= x.length) {
464b5f50 3540 Dygraph.warn("invalid series number in setVisibility: " + num);
1cf11047
DV
3541 } else {
3542 x[num] = value;
26ca7938 3543 this.predraw_();
1cf11047
DV
3544 }
3545};
3546
3547/**
0cb9bd91
DV
3548 * How large of an area will the dygraph render itself in?
3549 * This is used for testing.
3550 * @return A {width: w, height: h} object.
3551 * @private
3552 */
3553Dygraph.prototype.size = function() {
3554 return { width: this.width_, height: this.height_ };
3555};
3556
3557/**
5c528fa2 3558 * Update the list of annotations and redraw the chart.
41ee764f
DV
3559 * See dygraphs.com/annotations.html for more info on how to use annotations.
3560 * @param ann {Array} An array of annotation objects.
3561 * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional).
5c528fa2 3562 */
a685723c 3563Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3c51ab74
DV
3564 // Only add the annotation CSS rule once we know it will be used.
3565 Dygraph.addAnnotationRule();
5c528fa2 3566 this.annotations_ = ann;
af6e4ad5 3567 if (!this.layout_) {
464b5f50
DV
3568 Dygraph.warn("Tried to setAnnotations before dygraph was ready. " +
3569 "Try setting them in a ready() block. See " +
3570 "dygraphs.com/tests/annotation.html");
af6e4ad5
DV
3571 return;
3572 }
3573
5c528fa2 3574 this.layout_.setAnnotations(this.annotations_);
a685723c 3575 if (!suppressDraw) {
26ca7938 3576 this.predraw_();
a685723c 3577 }
5c528fa2
DV
3578};
3579
3580/**
3581 * Return the list of annotations.
3582 */
3583Dygraph.prototype.annotations = function() {
3584 return this.annotations_;
3585};
3586
46dde5f9 3587/**
82c6fe4d
KW
3588 * Get the list of label names for this graph. The first column is the
3589 * x-axis, so the data series names start at index 1.
4c10c8d2
RK
3590 *
3591 * Returns null when labels have not yet been defined.
82c6fe4d 3592 */
e2c21500 3593Dygraph.prototype.getLabels = function() {
4c10c8d2
RK
3594 var labels = this.attr_("labels");
3595 return labels ? labels.slice() : null;
82c6fe4d
KW
3596};
3597
3598/**
46dde5f9
DV
3599 * Get the index of a series (column) given its name. The first column is the
3600 * x-axis, so the data series start with index 1.
3601 */
3602Dygraph.prototype.indexFromSetName = function(name) {
82c6fe4d 3603 return this.setIndexByName_[name];
46dde5f9
DV
3604};
3605
629a09ae 3606/**
5bcc58b4
DV
3607 * Trigger a callback when the dygraph has drawn itself and is ready to be
3608 * manipulated. This is primarily useful when dygraphs has to do an XHR for the
3609 * data (i.e. a URL is passed as the data source) and the chart is drawn
3610 * asynchronously. If the chart has already drawn, the callback will fire
3611 * immediately.
3612 *
3613 * This is a good place to call setAnnotation().
3614 *
3615 * @param {function(!Dygraph)} callback The callback to trigger when the chart
3616 * is ready.
3617 */
3618Dygraph.prototype.ready = function(callback) {
3619 if (this.is_initial_draw_) {
3620 this.readyFns_.push(callback);
3621 } else {
3622 callback(this);
3623 }
3624};
3625
3626/**
629a09ae
DV
3627 * @private
3628 * Adds a default style for the annotation CSS classes to the document. This is
3629 * only executed when annotations are actually used. It is designed to only be
3630 * called once -- all calls after the first will return immediately.
3631 */
5c528fa2 3632Dygraph.addAnnotationRule = function() {
d38c6191 3633 // TODO(danvk): move this function into plugins/annotations.js?
5c528fa2
DV
3634 if (Dygraph.addedAnnotationCSS) return;
3635
5c528fa2
DV
3636 var rule = "border: 1px solid black; " +
3637 "background-color: white; " +
3638 "text-align: center;";
22186871
DV
3639
3640 var styleSheetElement = document.createElement("style");
3641 styleSheetElement.type = "text/css";
3642 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
3643
3644 // Find the first style sheet that we can access.
3645 // We may not add a rule to a style sheet from another domain for security
3646 // reasons. This sometimes comes up when using gviz, since the Google gviz JS
3647 // adds its own style sheets from google.com.
3648 for (var i = 0; i < document.styleSheets.length; i++) {
3649 if (document.styleSheets[i].disabled) continue;
3650 var mysheet = document.styleSheets[i];
3651 try {
3652 if (mysheet.insertRule) { // Firefox
3653 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
3654 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
3655 } else if (mysheet.addRule) { // IE
3656 mysheet.addRule(".dygraphDefaultAnnotation", rule);
3657 }
3658 Dygraph.addedAnnotationCSS = true;
3659 return;
3660 } catch(err) {
3661 // Was likely a security exception.
3662 }
5c528fa2
DV
3663 }
3664
464b5f50 3665 Dygraph.warn("Unable to add default annotation CSS rule; display may be off.");
758a629f 3666};