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