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