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