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