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