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