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