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