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