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