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