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