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