support y-zooming and panning in synchronize demo
[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 == '') {
c21d2c2d 192 div.style.width = attrs.width || Dygraph.DEFAULT_WIDTH + "px";
285a6bda
DV
193 }
194 if (div.style.height == '') {
c21d2c2d 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");
694 div.style.left = area.x + area.w - this.attr_("labelsDivWidth") + "px";
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) {
3df0ccf0
DV
846 px = Dygraph.findPosX(self.canvas_);
847 py = Dygraph.findPosY(self.canvas_);
6a1aa64f
DV
848 dragStartX = getX(event);
849 dragStartY = getY(event);
bce01b0f 850
2dab69c3 851 if (event.altKey || event.shiftKey) {
e3489f4f 852 // have to be zoomed in to pan.
d58ae307
DV
853 var zoomedY = false;
854 for (var i = 0; i < self.axes_.length; i++) {
855 if (self.axes_[i].valueWindow || self.axes_[i].valueRange) {
856 zoomedY = true;
857 break;
858 }
859 }
860 if (!self.dateWindow_ && !zoomedY) return;
e3489f4f 861
bce01b0f 862 isPanning = true;
e3489f4f
RK
863 var xRange = self.xAxisRange();
864 dateRange = xRange[1] - xRange[0];
d58ae307
DV
865
866 // Record the range of each y-axis at the start of the drag.
867 // If any axis has a valueRange or valueWindow, then we want a 2D pan.
868 is2DPan = false;
869 for (var i = 0; i < self.axes_.length; i++) {
870 var axis = self.axes_[i];
871 var yRange = self.yAxisRange(i);
872 axis.dragValueRange = yRange[1] - yRange[0];
873 var r = self.toDataCoords(null, dragStartY, i);
874 axis.draggingValue = r[1];
875 if (axis.valueWindow || axis.valueRange) is2DPan = true;
876 }
e3489f4f
RK
877
878 // TODO(konigsberg): Switch from all this math to toDataCoords?
879 // Seems to work for the dragging value.
d58ae307 880 draggingDate = (dragStartX / self.width_) * dateRange + xRange[0];
bce01b0f
DV
881 } else {
882 isZooming = true;
883 }
6a1aa64f
DV
884 });
885
886 // If the user releases the mouse button during a drag, but not over the
887 // canvas, then it doesn't count as a zooming action.
76171648 888 Dygraph.addEvent(document, 'mouseup', function(event) {
bce01b0f
DV
889 if (isZooming || isPanning) {
890 isZooming = false;
6a1aa64f
DV
891 dragStartX = null;
892 dragStartY = null;
893 }
bce01b0f
DV
894
895 if (isPanning) {
896 isPanning = false;
897 draggingDate = null;
898 dateRange = null;
d58ae307 899 for (var i = 0; i < self.axes_.length; i++) {
d63e6799
DV
900 delete self.axes_[i].draggingValue;
901 delete self.axes_[i].dragValueRange;
d58ae307 902 }
bce01b0f 903 }
6a1aa64f
DV
904 });
905
906 // Temporarily cancel the dragging event when the mouse leaves the graph
eb7bf005 907 Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(event) {
bce01b0f 908 if (isZooming) {
6a1aa64f
DV
909 dragEndX = null;
910 dragEndY = null;
911 }
912 });
913
914 // If the mouse is released on the canvas during a drag event, then it's a
915 // zoom. Only do the zoom if it's over a large enough area (>= 10 pixels)
eb7bf005 916 Dygraph.addEvent(this.mouseEventElement_, 'mouseup', function(event) {
bce01b0f
DV
917 if (isZooming) {
918 isZooming = false;
6a1aa64f
DV
919 dragEndX = getX(event);
920 dragEndY = getY(event);
921 var regionWidth = Math.abs(dragEndX - dragStartX);
922 var regionHeight = Math.abs(dragEndY - dragStartY);
923
e2b5f2bc
DV
924 if (regionWidth < 2 && regionHeight < 2 &&
925 self.lastx_ != undefined && self.lastx_ != -1) {
2ad87eaa 926 // TODO(danvk): pass along more info about the points, e.g. 'x'
1e1bf7df 927 if (self.attr_('clickCallback') != null) {
1e1bf7df
DV
928 self.attr_('clickCallback')(event, self.lastx_, self.selPoints_);
929 }
930 if (self.attr_('pointClickCallback')) {
931 // check if the click was on a particular point.
932 var closestIdx = -1;
933 var closestDistance = 0;
934 for (var i = 0; i < self.selPoints_.length; i++) {
935 var p = self.selPoints_[i];
936 var distance = Math.pow(p.canvasx - dragEndX, 2) +
937 Math.pow(p.canvasy - dragEndY, 2);
938 if (closestIdx == -1 || distance < closestDistance) {
939 closestDistance = distance;
940 closestIdx = i;
941 }
942 }
943
944 // Allow any click within two pixels of the dot.
2ad87eaa 945 var radius = self.attr_('highlightCircleSize') + 2;
1e1bf7df
DV
946 if (closestDistance <= 5 * 5) {
947 self.attr_('pointClickCallback')(event, self.selPoints_[closestIdx]);
948 }
949 }
6a1aa64f
DV
950 }
951
eeab5025 952 if (regionWidth >= 10 && dragDirection == Dygraph.HORIZONTAL) {
8b83c6cc 953 self.doZoomX_(Math.min(dragStartX, dragEndX),
6a1aa64f 954 Math.max(dragStartX, dragEndX));
eeab5025 955 } else if (regionHeight >= 10 && dragDirection == Dygraph.VERTICAL){
8b83c6cc
RK
956 self.doZoomY_(Math.min(dragStartY, dragEndY),
957 Math.max(dragStartY, dragEndY));
6a1aa64f
DV
958 } else {
959 self.canvas_.getContext("2d").clearRect(0, 0,
960 self.canvas_.width,
961 self.canvas_.height);
962 }
963
964 dragStartX = null;
965 dragStartY = null;
966 }
bce01b0f
DV
967
968 if (isPanning) {
969 isPanning = false;
d58ae307 970 is2DPan = false;
bce01b0f
DV
971 draggingDate = null;
972 dateRange = null;
e3489f4f 973 valueRange = null;
bce01b0f 974 }
6a1aa64f
DV
975 });
976
977 // Double-clicking zooms back out
eb7bf005 978 Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) {
8b83c6cc
RK
979 // Disable zooming out if panning.
980 if (event.altKey || event.shiftKey) return;
981
982 self.doUnzoom_();
6a1aa64f
DV
983 });
984};
985
986/**
987 * Draw a gray zoom rectangle over the desired area of the canvas. Also clears
988 * up any previous zoom rectangles that were drawn. This could be optimized to
989 * avoid extra redrawing, but it's tricky to avoid interactions with the status
990 * dots.
8b83c6cc 991 *
39b0e098
RK
992 * @param {Number} direction the direction of the zoom rectangle. Acceptable
993 * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL.
6a1aa64f
DV
994 * @param {Number} startX The X position where the drag started, in canvas
995 * coordinates.
996 * @param {Number} endX The current X position of the drag, in canvas coords.
8b83c6cc
RK
997 * @param {Number} startY The Y position where the drag started, in canvas
998 * coordinates.
999 * @param {Number} endY The current Y position of the drag, in canvas coords.
39b0e098 1000 * @param {Number} prevDirection the value of direction on the previous call to
8b83c6cc 1001 * this function. Used to avoid excess redrawing
6a1aa64f
DV
1002 * @param {Number} prevEndX The value of endX on the previous call to this
1003 * function. Used to avoid excess redrawing
8b83c6cc
RK
1004 * @param {Number} prevEndY The value of endY on the previous call to this
1005 * function. Used to avoid excess redrawing
6a1aa64f
DV
1006 * @private
1007 */
8b83c6cc
RK
1008Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, endY,
1009 prevDirection, prevEndX, prevEndY) {
6a1aa64f
DV
1010 var ctx = this.canvas_.getContext("2d");
1011
1012 // Clean up from the previous rect if necessary
39b0e098 1013 if (prevDirection == Dygraph.HORIZONTAL) {
6a1aa64f
DV
1014 ctx.clearRect(Math.min(startX, prevEndX), 0,
1015 Math.abs(startX - prevEndX), this.height_);
39b0e098 1016 } else if (prevDirection == Dygraph.VERTICAL){
8b83c6cc
RK
1017 ctx.clearRect(0, Math.min(startY, prevEndY),
1018 this.width_, Math.abs(startY - prevEndY));
6a1aa64f
DV
1019 }
1020
1021 // Draw a light-grey rectangle to show the new viewing area
39b0e098 1022 if (direction == Dygraph.HORIZONTAL) {
8b83c6cc
RK
1023 if (endX && startX) {
1024 ctx.fillStyle = "rgba(128,128,128,0.33)";
1025 ctx.fillRect(Math.min(startX, endX), 0,
1026 Math.abs(endX - startX), this.height_);
1027 }
1028 }
39b0e098 1029 if (direction == Dygraph.VERTICAL) {
8b83c6cc
RK
1030 if (endY && startY) {
1031 ctx.fillStyle = "rgba(128,128,128,0.33)";
1032 ctx.fillRect(0, Math.min(startY, endY),
1033 this.width_, Math.abs(endY - startY));
1034 }
6a1aa64f
DV
1035 }
1036};
1037
1038/**
8b83c6cc
RK
1039 * Zoom to something containing [lowX, highX]. These are pixel coordinates in
1040 * the canvas. The exact zoom window may be slightly larger if there are no data
1041 * points near lowX or highX. Don't confuse this function with doZoomXDates,
1042 * which accepts dates that match the raw data. This function redraws the graph.
d58ae307 1043 *
6a1aa64f
DV
1044 * @param {Number} lowX The leftmost pixel value that should be visible.
1045 * @param {Number} highX The rightmost pixel value that should be visible.
1046 * @private
1047 */
8b83c6cc 1048Dygraph.prototype.doZoomX_ = function(lowX, highX) {
6a1aa64f 1049 // Find the earliest and latest dates contained in this canvasx range.
8b83c6cc 1050 // Convert the call to date ranges of the raw data.
56623f3b
DV
1051 var r = this.toDataCoords(lowX, null);
1052 var minDate = r[0];
1053 r = this.toDataCoords(highX, null);
1054 var maxDate = r[0];
8b83c6cc
RK
1055 this.doZoomXDates_(minDate, maxDate);
1056};
6a1aa64f 1057
8b83c6cc
RK
1058/**
1059 * Zoom to something containing [minDate, maxDate] values. Don't confuse this
1060 * method with doZoomX which accepts pixel coordinates. This function redraws
1061 * the graph.
d58ae307 1062 *
8b83c6cc
RK
1063 * @param {Number} minDate The minimum date that should be visible.
1064 * @param {Number} maxDate The maximum date that should be visible.
1065 * @private
1066 */
1067Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) {
6a1aa64f 1068 this.dateWindow_ = [minDate, maxDate];
26ca7938 1069 this.drawGraph_();
285a6bda 1070 if (this.attr_("zoomCallback")) {
8b83c6cc
RK
1071 var yRange = this.yAxisRange();
1072 this.attr_("zoomCallback")(minDate, maxDate, yRange[0], yRange[1]);
1073 }
1074};
1075
1076/**
1077 * Zoom to something containing [lowY, highY]. These are pixel coordinates in
d58ae307
DV
1078 * the canvas. This function redraws the graph.
1079 *
8b83c6cc
RK
1080 * @param {Number} lowY The topmost pixel value that should be visible.
1081 * @param {Number} highY The lowest pixel value that should be visible.
1082 * @private
1083 */
1084Dygraph.prototype.doZoomY_ = function(lowY, highY) {
d58ae307
DV
1085 // Find the highest and lowest values in pixel range for each axis.
1086 // Note that lowY (in pixels) corresponds to the max Value (in data coords).
1087 // This is because pixels increase as you go down on the screen, whereas data
1088 // coordinates increase as you go up the screen.
1089 var valueRanges = [];
1090 for (var i = 0; i < this.axes_.length; i++) {
1091 var hi = this.toDataCoords(null, lowY, i);
1092 var low = this.toDataCoords(null, highY, i);
1093 this.axes_[i].valueWindow = [low[1], hi[1]];
1094 valueRanges.push([low[1], hi[1]]);
1095 }
8b83c6cc 1096
66c380c4 1097 this.drawGraph_();
8b83c6cc 1098 if (this.attr_("zoomCallback")) {
d58ae307
DV
1099 var xRange = this.xAxisRange();
1100 this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges());
8b83c6cc
RK
1101 }
1102};
1103
1104/**
1105 * Reset the zoom to the original view coordinates. This is the same as
1106 * double-clicking on the graph.
d58ae307 1107 *
8b83c6cc
RK
1108 * @private
1109 */
1110Dygraph.prototype.doUnzoom_ = function() {
d58ae307 1111 var dirty = false;
8b83c6cc 1112 if (this.dateWindow_ != null) {
d58ae307 1113 dirty = true;
8b83c6cc
RK
1114 this.dateWindow_ = null;
1115 }
d58ae307
DV
1116
1117 for (var i = 0; i < this.axes_.length; i++) {
1118 if (this.axes_[i].valueWindow != null) {
1119 dirty = true;
1120 delete this.axes_[i].valueWindow;
1121 }
8b83c6cc
RK
1122 }
1123
1124 if (dirty) {
437c0979
RK
1125 // Putting the drawing operation before the callback because it resets
1126 // yAxisRange.
66c380c4 1127 this.drawGraph_();
8b83c6cc
RK
1128 if (this.attr_("zoomCallback")) {
1129 var minDate = this.rawData_[0][0];
1130 var maxDate = this.rawData_[this.rawData_.length - 1][0];
d58ae307 1131 this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges());
8b83c6cc 1132 }
67e650dc 1133 }
6a1aa64f
DV
1134};
1135
1136/**
1137 * When the mouse moves in the canvas, display information about a nearby data
1138 * point and draw dots over those points in the data series. This function
1139 * takes care of cleanup of previously-drawn dots.
1140 * @param {Object} event The mousemove event from the browser.
1141 * @private
1142 */
285a6bda 1143Dygraph.prototype.mouseMove_ = function(event) {
eb7bf005 1144 var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
6a1aa64f
DV
1145 var points = this.layout_.points;
1146
1147 var lastx = -1;
1148 var lasty = -1;
1149
1150 // Loop through all the points and find the date nearest to our current
1151 // location.
1152 var minDist = 1e+100;
1153 var idx = -1;
1154 for (var i = 0; i < points.length; i++) {
1155 var dist = Math.abs(points[i].canvasx - canvasx);
f032c51d 1156 if (dist > minDist) continue;
6a1aa64f
DV
1157 minDist = dist;
1158 idx = i;
1159 }
1160 if (idx >= 0) lastx = points[idx].xval;
1161 // Check that you can really highlight the last day's data
1162 if (canvasx > points[points.length-1].canvasx)
1163 lastx = points[points.length-1].xval;
1164
1165 // Extract the points we've selected
b258a3da 1166 this.selPoints_ = [];
50360fd0 1167 var l = points.length;
416b05ad
NK
1168 if (!this.attr_("stackedGraph")) {
1169 for (var i = 0; i < l; i++) {
1170 if (points[i].xval == lastx) {
1171 this.selPoints_.push(points[i]);
1172 }
1173 }
1174 } else {
354e15ab
DE
1175 // Need to 'unstack' points starting from the bottom
1176 var cumulative_sum = 0;
416b05ad
NK
1177 for (var i = l - 1; i >= 0; i--) {
1178 if (points[i].xval == lastx) {
354e15ab 1179 var p = {}; // Clone the point since we modify it
d4139cd8
NK
1180 for (var k in points[i]) {
1181 p[k] = points[i][k];
50360fd0
NK
1182 }
1183 p.yval -= cumulative_sum;
1184 cumulative_sum += p.yval;
d4139cd8 1185 this.selPoints_.push(p);
12e4c741 1186 }
6a1aa64f 1187 }
354e15ab 1188 this.selPoints_.reverse();
6a1aa64f
DV
1189 }
1190
b258a3da 1191 if (this.attr_("highlightCallback")) {
a4c6a67c 1192 var px = this.lastx_;
dd082dda 1193 if (px !== null && lastx != px) {
344ba8c0 1194 // only fire if the selected point has changed.
50360fd0 1195 this.attr_("highlightCallback")(event, lastx, this.selPoints_);
43af96e7 1196 }
12e4c741 1197 }
43af96e7 1198
239c712d
NAG
1199 // Save last x position for callbacks.
1200 this.lastx_ = lastx;
50360fd0 1201
239c712d
NAG
1202 this.updateSelection_();
1203};
b258a3da 1204
239c712d
NAG
1205/**
1206 * Draw dots over the selectied points in the data series. This function
1207 * takes care of cleanup of previously-drawn dots.
1208 * @private
1209 */
1210Dygraph.prototype.updateSelection_ = function() {
6a1aa64f 1211 // Clear the previously drawn vertical, if there is one
6a1aa64f
DV
1212 var ctx = this.canvas_.getContext("2d");
1213 if (this.previousVerticalX_ >= 0) {
46dde5f9
DV
1214 // Determine the maximum highlight circle size.
1215 var maxCircleSize = 0;
227b93cc
DV
1216 var labels = this.attr_('labels');
1217 for (var i = 1; i < labels.length; i++) {
1218 var r = this.attr_('highlightCircleSize', labels[i]);
46dde5f9
DV
1219 if (r > maxCircleSize) maxCircleSize = r;
1220 }
6a1aa64f 1221 var px = this.previousVerticalX_;
46dde5f9
DV
1222 ctx.clearRect(px - maxCircleSize - 1, 0,
1223 2 * maxCircleSize + 2, this.height_);
6a1aa64f
DV
1224 }
1225
584ceeaa
DV
1226 var isOK = function(x) { return x && !isNaN(x); };
1227
d160cc3b 1228 if (this.selPoints_.length > 0) {
b258a3da 1229 var canvasx = this.selPoints_[0].canvasx;
6a1aa64f
DV
1230
1231 // Set the status message to indicate the selected point(s)
239c712d 1232 var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
50360fd0 1233 var fmtFunc = this.attr_('yValueFormatter');
6a1aa64f 1234 var clen = this.colors_.length;
d160cc3b
NK
1235
1236 if (this.attr_('showLabelsOnHighlight')) {
1237 // Set the status message to indicate the selected point(s)
d160cc3b 1238 for (var i = 0; i < this.selPoints_.length; i++) {
129569a5 1239 if (!this.attr_("labelsShowZeroValues") && this.selPoints_[i].yval == 0) continue;
d160cc3b
NK
1240 if (!isOK(this.selPoints_[i].canvasy)) continue;
1241 if (this.attr_("labelsSeparateLines")) {
1242 replace += "<br/>";
1243 }
1244 var point = this.selPoints_[i];
8fb6dc24 1245 var c = new RGBColor(this.plotter_.colors[point.name]);
029da4b6 1246 var yval = fmtFunc(point.yval);
d160cc3b
NK
1247 replace += " <b><font color='" + c.toHex() + "'>"
1248 + point.name + "</font></b>:"
1249 + yval;
6a1aa64f 1250 }
50360fd0 1251
d160cc3b 1252 this.attr_("labelsDiv").innerHTML = replace;
6a1aa64f 1253 }
6a1aa64f 1254
6a1aa64f 1255 // Draw colored circles over the center of each selected point
43af96e7 1256 ctx.save();
b258a3da 1257 for (var i = 0; i < this.selPoints_.length; i++) {
f032c51d 1258 if (!isOK(this.selPoints_[i].canvasy)) continue;
227b93cc
DV
1259 var circleSize =
1260 this.attr_('highlightCircleSize', this.selPoints_[i].name);
6a1aa64f 1261 ctx.beginPath();
563c70ca 1262 ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
f032c51d 1263 ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
7bf6a9fe 1264 0, 2 * Math.PI, false);
6a1aa64f
DV
1265 ctx.fill();
1266 }
1267 ctx.restore();
1268
1269 this.previousVerticalX_ = canvasx;
1270 }
1271};
1272
1273/**
239c712d
NAG
1274 * Set manually set selected dots, and display information about them
1275 * @param int row number that should by highlighted
1276 * false value clears the selection
1277 * @public
1278 */
1279Dygraph.prototype.setSelection = function(row) {
1280 // Extract the points we've selected
1281 this.selPoints_ = [];
1282 var pos = 0;
50360fd0 1283
239c712d 1284 if (row !== false) {
16269f6e
NAG
1285 row = row-this.boundaryIds_[0][0];
1286 }
50360fd0 1287
16269f6e 1288 if (row !== false && row >= 0) {
239c712d 1289 for (var i in this.layout_.datasets) {
16269f6e 1290 if (row < this.layout_.datasets[i].length) {
38f33a44 1291 var point = this.layout_.points[pos+row];
1292
1293 if (this.attr_("stackedGraph")) {
8c03ba63 1294 point = this.layout_.unstackPointAtIndex(pos+row);
38f33a44 1295 }
1296
1297 this.selPoints_.push(point);
16269f6e 1298 }
239c712d
NAG
1299 pos += this.layout_.datasets[i].length;
1300 }
16269f6e 1301 }
50360fd0 1302
16269f6e 1303 if (this.selPoints_.length) {
239c712d
NAG
1304 this.lastx_ = this.selPoints_[0].xval;
1305 this.updateSelection_();
1306 } else {
1307 this.lastx_ = -1;
1308 this.clearSelection();
1309 }
1310
1311};
1312
1313/**
6a1aa64f
DV
1314 * The mouse has left the canvas. Clear out whatever artifacts remain
1315 * @param {Object} event the mouseout event from the browser.
1316 * @private
1317 */
285a6bda 1318Dygraph.prototype.mouseOut_ = function(event) {
a4c6a67c
AV
1319 if (this.attr_("unhighlightCallback")) {
1320 this.attr_("unhighlightCallback")(event);
1321 }
1322
43af96e7 1323 if (this.attr_("hideOverlayOnMouseOut")) {
239c712d 1324 this.clearSelection();
43af96e7 1325 }
6a1aa64f
DV
1326};
1327
239c712d
NAG
1328/**
1329 * Remove all selection from the canvas
1330 * @public
1331 */
1332Dygraph.prototype.clearSelection = function() {
1333 // Get rid of the overlay data
1334 var ctx = this.canvas_.getContext("2d");
1335 ctx.clearRect(0, 0, this.width_, this.height_);
1336 this.attr_("labelsDiv").innerHTML = "";
1337 this.selPoints_ = [];
1338 this.lastx_ = -1;
1339}
1340
103b7292
NAG
1341/**
1342 * Returns the number of the currently selected row
1343 * @return int row number, of -1 if nothing is selected
1344 * @public
1345 */
1346Dygraph.prototype.getSelection = function() {
1347 if (!this.selPoints_ || this.selPoints_.length < 1) {
1348 return -1;
1349 }
50360fd0 1350
103b7292
NAG
1351 for (var row=0; row<this.layout_.points.length; row++ ) {
1352 if (this.layout_.points[row].x == this.selPoints_[0].x) {
16269f6e 1353 return row + this.boundaryIds_[0][0];
103b7292
NAG
1354 }
1355 }
1356 return -1;
1357}
1358
285a6bda 1359Dygraph.zeropad = function(x) {
32988383
DV
1360 if (x < 10) return "0" + x; else return "" + x;
1361}
1362
6a1aa64f 1363/**
6b8e33dd
DV
1364 * Return a string version of the hours, minutes and seconds portion of a date.
1365 * @param {Number} date The JavaScript date (ms since epoch)
1366 * @return {String} A time of the form "HH:MM:SS"
1367 * @private
1368 */
bf640e56 1369Dygraph.hmsString_ = function(date) {
285a6bda 1370 var zeropad = Dygraph.zeropad;
6b8e33dd
DV
1371 var d = new Date(date);
1372 if (d.getSeconds()) {
1373 return zeropad(d.getHours()) + ":" +
1374 zeropad(d.getMinutes()) + ":" +
1375 zeropad(d.getSeconds());
6b8e33dd 1376 } else {
054531ca 1377 return zeropad(d.getHours()) + ":" + zeropad(d.getMinutes());
6b8e33dd
DV
1378 }
1379}
1380
1381/**
bf640e56
AV
1382 * Convert a JS date to a string appropriate to display on an axis that
1383 * is displaying values at the stated granularity.
1384 * @param {Date} date The date to format
1385 * @param {Number} granularity One of the Dygraph granularity constants
1386 * @return {String} The formatted date
1387 * @private
1388 */
1389Dygraph.dateAxisFormatter = function(date, granularity) {
1390 if (granularity >= Dygraph.MONTHLY) {
1391 return date.strftime('%b %y');
1392 } else {
31eddad3 1393 var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds();
bf640e56
AV
1394 if (frac == 0 || granularity >= Dygraph.DAILY) {
1395 return new Date(date.getTime() + 3600*1000).strftime('%d%b');
1396 } else {
1397 return Dygraph.hmsString_(date.getTime());
1398 }
1399 }
1400}
1401
1402/**
6a1aa64f
DV
1403 * Convert a JS date (millis since epoch) to YYYY/MM/DD
1404 * @param {Number} date The JavaScript date (ms since epoch)
1405 * @return {String} A date of the form "YYYY/MM/DD"
1406 * @private
1407 */
285a6bda
DV
1408Dygraph.dateString_ = function(date, self) {
1409 var zeropad = Dygraph.zeropad;
6a1aa64f
DV
1410 var d = new Date(date);
1411
1412 // Get the year:
1413 var year = "" + d.getFullYear();
1414 // Get a 0 padded month string
6b8e33dd 1415 var month = zeropad(d.getMonth() + 1); //months are 0-offset, sigh
6a1aa64f 1416 // Get a 0 padded day string
6b8e33dd 1417 var day = zeropad(d.getDate());
6a1aa64f 1418
6b8e33dd
DV
1419 var ret = "";
1420 var frac = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
bf640e56 1421 if (frac) ret = " " + Dygraph.hmsString_(date);
6b8e33dd
DV
1422
1423 return year + "/" + month + "/" + day + ret;
6a1aa64f
DV
1424};
1425
1426/**
1427 * Round a number to the specified number of digits past the decimal point.
1428 * @param {Number} num The number to round
1429 * @param {Number} places The number of decimals to which to round
1430 * @return {Number} The rounded number
1431 * @private
1432 */
029da4b6 1433Dygraph.round_ = function(num, places) {
6a1aa64f
DV
1434 var shift = Math.pow(10, places);
1435 return Math.round(num * shift)/shift;
1436};
1437
1438/**
1439 * Fires when there's data available to be graphed.
1440 * @param {String} data Raw CSV data to be plotted
1441 * @private
1442 */
285a6bda 1443Dygraph.prototype.loadedEvent_ = function(data) {
6a1aa64f 1444 this.rawData_ = this.parseCSV_(data);
26ca7938 1445 this.predraw_();
6a1aa64f
DV
1446};
1447
285a6bda 1448Dygraph.prototype.months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
8846615a 1449 "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
285a6bda 1450Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"];
6a1aa64f
DV
1451
1452/**
1453 * Add ticks on the x-axis representing years, months, quarters, weeks, or days
1454 * @private
1455 */
285a6bda 1456Dygraph.prototype.addXTicks_ = function() {
6a1aa64f
DV
1457 // Determine the correct ticks scale on the x-axis: quarterly, monthly, ...
1458 var startDate, endDate;
1459 if (this.dateWindow_) {
1460 startDate = this.dateWindow_[0];
1461 endDate = this.dateWindow_[1];
1462 } else {
1463 startDate = this.rawData_[0][0];
1464 endDate = this.rawData_[this.rawData_.length - 1][0];
1465 }
1466
285a6bda 1467 var xTicks = this.attr_('xTicker')(startDate, endDate, this);
6a1aa64f 1468 this.layout_.updateOptions({xTicks: xTicks});
32988383
DV
1469};
1470
1471// Time granularity enumeration
285a6bda 1472Dygraph.SECONDLY = 0;
20a41c17
DV
1473Dygraph.TWO_SECONDLY = 1;
1474Dygraph.FIVE_SECONDLY = 2;
1475Dygraph.TEN_SECONDLY = 3;
1476Dygraph.THIRTY_SECONDLY = 4;
1477Dygraph.MINUTELY = 5;
1478Dygraph.TWO_MINUTELY = 6;
1479Dygraph.FIVE_MINUTELY = 7;
1480Dygraph.TEN_MINUTELY = 8;
1481Dygraph.THIRTY_MINUTELY = 9;
1482Dygraph.HOURLY = 10;
1483Dygraph.TWO_HOURLY = 11;
1484Dygraph.SIX_HOURLY = 12;
1485Dygraph.DAILY = 13;
1486Dygraph.WEEKLY = 14;
1487Dygraph.MONTHLY = 15;
1488Dygraph.QUARTERLY = 16;
1489Dygraph.BIANNUAL = 17;
1490Dygraph.ANNUAL = 18;
1491Dygraph.DECADAL = 19;
1492Dygraph.NUM_GRANULARITIES = 20;
285a6bda
DV
1493
1494Dygraph.SHORT_SPACINGS = [];
1495Dygraph.SHORT_SPACINGS[Dygraph.SECONDLY] = 1000 * 1;
20a41c17
DV
1496Dygraph.SHORT_SPACINGS[Dygraph.TWO_SECONDLY] = 1000 * 2;
1497Dygraph.SHORT_SPACINGS[Dygraph.FIVE_SECONDLY] = 1000 * 5;
285a6bda
DV
1498Dygraph.SHORT_SPACINGS[Dygraph.TEN_SECONDLY] = 1000 * 10;
1499Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_SECONDLY] = 1000 * 30;
1500Dygraph.SHORT_SPACINGS[Dygraph.MINUTELY] = 1000 * 60;
20a41c17
DV
1501Dygraph.SHORT_SPACINGS[Dygraph.TWO_MINUTELY] = 1000 * 60 * 2;
1502Dygraph.SHORT_SPACINGS[Dygraph.FIVE_MINUTELY] = 1000 * 60 * 5;
285a6bda
DV
1503Dygraph.SHORT_SPACINGS[Dygraph.TEN_MINUTELY] = 1000 * 60 * 10;
1504Dygraph.SHORT_SPACINGS[Dygraph.THIRTY_MINUTELY] = 1000 * 60 * 30;
1505Dygraph.SHORT_SPACINGS[Dygraph.HOURLY] = 1000 * 3600;
20a41c17 1506Dygraph.SHORT_SPACINGS[Dygraph.TWO_HOURLY] = 1000 * 3600 * 2;
805d5519 1507Dygraph.SHORT_SPACINGS[Dygraph.SIX_HOURLY] = 1000 * 3600 * 6;
285a6bda
DV
1508Dygraph.SHORT_SPACINGS[Dygraph.DAILY] = 1000 * 86400;
1509Dygraph.SHORT_SPACINGS[Dygraph.WEEKLY] = 1000 * 604800;
32988383
DV
1510
1511// NumXTicks()
1512//
1513// If we used this time granularity, how many ticks would there be?
1514// This is only an approximation, but it's generally good enough.
1515//
285a6bda
DV
1516Dygraph.prototype.NumXTicks = function(start_time, end_time, granularity) {
1517 if (granularity < Dygraph.MONTHLY) {
32988383 1518 // Generate one tick mark for every fixed interval of time.
285a6bda 1519 var spacing = Dygraph.SHORT_SPACINGS[granularity];
32988383
DV
1520 return Math.floor(0.5 + 1.0 * (end_time - start_time) / spacing);
1521 } else {
1522 var year_mod = 1; // e.g. to only print one point every 10 years.
1523 var num_months = 12;
285a6bda
DV
1524 if (granularity == Dygraph.QUARTERLY) num_months = 3;
1525 if (granularity == Dygraph.BIANNUAL) num_months = 2;
1526 if (granularity == Dygraph.ANNUAL) num_months = 1;
1527 if (granularity == Dygraph.DECADAL) { num_months = 1; year_mod = 10; }
32988383
DV
1528
1529 var msInYear = 365.2524 * 24 * 3600 * 1000;
1530 var num_years = 1.0 * (end_time - start_time) / msInYear;
1531 return Math.floor(0.5 + 1.0 * num_years * num_months / year_mod);
1532 }
1533};
1534
1535// GetXAxis()
1536//
1537// Construct an x-axis of nicely-formatted times on meaningful boundaries
1538// (e.g. 'Jan 09' rather than 'Jan 22, 2009').
1539//
1540// Returns an array containing {v: millis, label: label} dictionaries.
1541//
285a6bda 1542Dygraph.prototype.GetXAxis = function(start_time, end_time, granularity) {
bf640e56 1543 var formatter = this.attr_("xAxisLabelFormatter");
32988383 1544 var ticks = [];
285a6bda 1545 if (granularity < Dygraph.MONTHLY) {
32988383 1546 // Generate one tick mark for every fixed interval of time.
285a6bda 1547 var spacing = Dygraph.SHORT_SPACINGS[granularity];
3d29302c 1548 var format = '%d%b'; // e.g. "1Jan"
076c9622
DV
1549
1550 // Find a time less than start_time which occurs on a "nice" time boundary
1551 // for this granularity.
1552 var g = spacing / 1000;
076c9622
DV
1553 var d = new Date(start_time);
1554 if (g <= 60) { // seconds
1555 var x = d.getSeconds(); d.setSeconds(x - x % g);
1556 } else {
1557 d.setSeconds(0);
1558 g /= 60;
1559 if (g <= 60) { // minutes
1560 var x = d.getMinutes(); d.setMinutes(x - x % g);
1561 } else {
1562 d.setMinutes(0);
1563 g /= 60;
1564
1565 if (g <= 24) { // days
1566 var x = d.getHours(); d.setHours(x - x % g);
1567 } else {
1568 d.setHours(0);
1569 g /= 24;
1570
1571 if (g == 7) { // one week
20a41c17 1572 d.setDate(d.getDate() - d.getDay());
076c9622
DV
1573 }
1574 }
1575 }
328bb812 1576 }
076c9622
DV
1577 start_time = d.getTime();
1578
32988383 1579 for (var t = start_time; t <= end_time; t += spacing) {
bf640e56 1580 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
32988383
DV
1581 }
1582 } else {
1583 // Display a tick mark on the first of a set of months of each year.
1584 // Years get a tick mark iff y % year_mod == 0. This is useful for
1585 // displaying a tick mark once every 10 years, say, on long time scales.
1586 var months;
1587 var year_mod = 1; // e.g. to only print one point every 10 years.
1588
285a6bda 1589 if (granularity == Dygraph.MONTHLY) {
32988383 1590 months = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ];
285a6bda 1591 } else if (granularity == Dygraph.QUARTERLY) {
32988383 1592 months = [ 0, 3, 6, 9 ];
285a6bda 1593 } else if (granularity == Dygraph.BIANNUAL) {
32988383 1594 months = [ 0, 6 ];
285a6bda 1595 } else if (granularity == Dygraph.ANNUAL) {
32988383 1596 months = [ 0 ];
285a6bda 1597 } else if (granularity == Dygraph.DECADAL) {
32988383
DV
1598 months = [ 0 ];
1599 year_mod = 10;
1600 }
1601
1602 var start_year = new Date(start_time).getFullYear();
1603 var end_year = new Date(end_time).getFullYear();
285a6bda 1604 var zeropad = Dygraph.zeropad;
32988383
DV
1605 for (var i = start_year; i <= end_year; i++) {
1606 if (i % year_mod != 0) continue;
1607 for (var j = 0; j < months.length; j++) {
1608 var date_str = i + "/" + zeropad(1 + months[j]) + "/01";
1609 var t = Date.parse(date_str);
1610 if (t < start_time || t > end_time) continue;
bf640e56 1611 ticks.push({ v:t, label: formatter(new Date(t), granularity) });
32988383
DV
1612 }
1613 }
1614 }
1615
1616 return ticks;
1617};
1618
6a1aa64f
DV
1619
1620/**
1621 * Add ticks to the x-axis based on a date range.
1622 * @param {Number} startDate Start of the date window (millis since epoch)
1623 * @param {Number} endDate End of the date window (millis since epoch)
1624 * @return {Array.<Object>} Array of {label, value} tuples.
1625 * @public
1626 */
285a6bda 1627Dygraph.dateTicker = function(startDate, endDate, self) {
32988383 1628 var chosen = -1;
285a6bda
DV
1629 for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) {
1630 var num_ticks = self.NumXTicks(startDate, endDate, i);
1631 if (self.width_ / num_ticks >= self.attr_('pixelsPerXLabel')) {
32988383
DV
1632 chosen = i;
1633 break;
2769de62 1634 }
6a1aa64f
DV
1635 }
1636
32988383 1637 if (chosen >= 0) {
285a6bda 1638 return self.GetXAxis(startDate, endDate, chosen);
6a1aa64f 1639 } else {
32988383 1640 // TODO(danvk): signal error.
6a1aa64f 1641 }
6a1aa64f
DV
1642};
1643
1644/**
1645 * Add ticks when the x axis has numbers on it (instead of dates)
1646 * @param {Number} startDate Start of the date window (millis since epoch)
1647 * @param {Number} endDate End of the date window (millis since epoch)
84fc6aa7 1648 * @param self
f30cf740 1649 * @param {function} attribute accessor function.
6a1aa64f
DV
1650 * @return {Array.<Object>} Array of {label, value} tuples.
1651 * @public
1652 */
0d64e596 1653Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
70c80071
DV
1654 var attr = function(k) {
1655 if (axis_props && axis_props.hasOwnProperty(k)) return axis_props[k];
1656 return self.attr_(k);
1657 };
f09fc545 1658
0d64e596
DV
1659 var ticks = [];
1660 if (vals) {
1661 for (var i = 0; i < vals.length; i++) {
1662 ticks.push({v: vals[i]});
1663 }
f09e46d4 1664 } else {
0d64e596
DV
1665 // Basic idea:
1666 // Try labels every 1, 2, 5, 10, 20, 50, 100, etc.
1667 // Calculate the resulting tick spacing (i.e. this.height_ / nTicks).
1668 // The first spacing greater than pixelsPerYLabel is what we use.
1669 // TODO(danvk): version that works on a log scale.
f09fc545 1670 if (attr("labelsKMG2")) {
0d64e596 1671 var mults = [1, 2, 4, 8];
f09e46d4 1672 } else {
0d64e596 1673 var mults = [1, 2, 5];
f09e46d4 1674 }
0d64e596
DV
1675 var scale, low_val, high_val, nTicks;
1676 // TODO(danvk): make it possible to set this for x- and y-axes independently.
1677 var pixelsPerTick = attr('pixelsPerYLabel');
1678 for (var i = -10; i < 50; i++) {
1679 if (attr("labelsKMG2")) {
1680 var base_scale = Math.pow(16, i);
1681 } else {
1682 var base_scale = Math.pow(10, i);
1683 }
1684 for (var j = 0; j < mults.length; j++) {
1685 scale = base_scale * mults[j];
1686 low_val = Math.floor(minV / scale) * scale;
1687 high_val = Math.ceil(maxV / scale) * scale;
1688 nTicks = Math.abs(high_val - low_val) / scale;
1689 var spacing = self.height_ / nTicks;
1690 // wish I could break out of both loops at once...
1691 if (spacing > pixelsPerTick) break;
1692 }
285a6bda 1693 if (spacing > pixelsPerTick) break;
c6336f04 1694 }
0d64e596
DV
1695
1696 // Construct the set of ticks.
1697 // Allow reverse y-axis if it's explicitly requested.
1698 if (low_val > high_val) scale *= -1;
1699 for (var i = 0; i < nTicks; i++) {
1700 var tickV = low_val + i * scale;
1701 ticks.push( {v: tickV} );
1702 }
6a1aa64f
DV
1703 }
1704
0d64e596 1705 // Add formatted labels to the ticks.
ed11be50
DV
1706 var k;
1707 var k_labels = [];
f09fc545 1708 if (attr("labelsKMB")) {
ed11be50
DV
1709 k = 1000;
1710 k_labels = [ "K", "M", "B", "T" ];
1711 }
f09fc545 1712 if (attr("labelsKMG2")) {
ed11be50
DV
1713 if (k) self.warn("Setting both labelsKMB and labelsKMG2. Pick one!");
1714 k = 1024;
1715 k_labels = [ "k", "M", "G", "T" ];
1716 }
c94eee24 1717 var formatter = attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter');
ed11be50 1718
0d64e596
DV
1719 for (var i = 0; i < ticks.length; i++) {
1720 var tickV = ticks[i].v;
0af6e346 1721 var absTickV = Math.abs(tickV);
84fc6aa7
NN
1722 var label;
1723 if (formatter != undefined) {
1724 label = formatter(tickV);
1725 } else {
1726 label = Dygraph.round_(tickV, 2);
1727 }
ed11be50
DV
1728 if (k_labels.length) {
1729 // Round up to an appropriate unit.
1730 var n = k*k*k*k;
1731 for (var j = 3; j >= 0; j--, n /= k) {
1732 if (absTickV >= n) {
029da4b6 1733 label = Dygraph.round_(tickV / n, 1) + k_labels[j];
ed11be50
DV
1734 break;
1735 }
afefbcdb 1736 }
6a1aa64f 1737 }
0d64e596 1738 ticks[i].label = label;
6a1aa64f
DV
1739 }
1740 return ticks;
1741};
1742
5011e7a1
DV
1743// Computes the range of the data series (including confidence intervals).
1744// series is either [ [x1, y1], [x2, y2], ... ] or
1745// [ [x1, [y1, dev_low, dev_high]], [x2, [y2, dev_low, dev_high]], ...
1746// Returns [low, high]
1747Dygraph.prototype.extremeValues_ = function(series) {
1748 var minY = null, maxY = null;
1749
9922b78b 1750 var bars = this.attr_("errorBars") || this.attr_("customBars");
5011e7a1
DV
1751 if (bars) {
1752 // With custom bars, maxY is the max of the high values.
1753 for (var j = 0; j < series.length; j++) {
1754 var y = series[j][1][0];
1755 if (!y) continue;
1756 var low = y - series[j][1][1];
1757 var high = y + series[j][1][2];
1758 if (low > y) low = y; // this can happen with custom bars,
1759 if (high < y) high = y; // e.g. in tests/custom-bars.html
1760 if (maxY == null || high > maxY) {
1761 maxY = high;
1762 }
1763 if (minY == null || low < minY) {
1764 minY = low;
1765 }
1766 }
1767 } else {
1768 for (var j = 0; j < series.length; j++) {
1769 var y = series[j][1];
d12999d3 1770 if (y === null || isNaN(y)) continue;
5011e7a1
DV
1771 if (maxY == null || y > maxY) {
1772 maxY = y;
1773 }
1774 if (minY == null || y < minY) {
1775 minY = y;
1776 }
1777 }
1778 }
1779
1780 return [minY, maxY];
1781};
1782
6a1aa64f 1783/**
26ca7938
DV
1784 * This function is called once when the chart's data is changed or the options
1785 * dictionary is updated. It is _not_ called when the user pans or zooms. The
1786 * idea is that values derived from the chart's data can be computed here,
1787 * rather than every time the chart is drawn. This includes things like the
1788 * number of axes, rolling averages, etc.
1789 */
1790Dygraph.prototype.predraw_ = function() {
1791 // TODO(danvk): move more computations out of drawGraph_ and into here.
1792 this.computeYAxes_();
1793
1794 // Create a new plotter.
70c80071 1795 if (this.plotter_) this.plotter_.clear();
26ca7938
DV
1796 this.plotter_ = new DygraphCanvasRenderer(this,
1797 this.hidden_, this.layout_,
1798 this.renderOptions_);
1799
0abfbd7e
DV
1800 // The roller sits in the bottom left corner of the chart. We don't know where
1801 // this will be until the options are available, so it's positioned here.
8c69de65 1802 this.createRollInterface_();
26ca7938 1803
0abfbd7e
DV
1804 // Same thing applies for the labelsDiv. It's right edge should be flush with
1805 // the right edge of the charting area (which may not be the same as the right
1806 // edge of the div, if we have two y-axes.
1807 this.positionLabelsDiv_();
1808
26ca7938
DV
1809 // If the data or options have changed, then we'd better redraw.
1810 this.drawGraph_();
1811};
1812
1813/**
2f5e7e1a 1814=======
26ca7938
DV
1815 * Update the graph with new data. This method is called when the viewing area
1816 * has changed. If the underlying data or options have changed, predraw_ will
1817 * be called before drawGraph_ is called.
6a1aa64f
DV
1818 * @private
1819 */
26ca7938
DV
1820Dygraph.prototype.drawGraph_ = function() {
1821 var data = this.rawData_;
1822
fe0b7c03
DV
1823 // This is used to set the second parameter to drawCallback, below.
1824 var is_initial_draw = this.is_initial_draw_;
1825 this.is_initial_draw_ = false;
1826
3bd9c228 1827 var minY = null, maxY = null;
6a1aa64f 1828 this.layout_.removeAllDatasets();
285a6bda 1829 this.setColors_();
9317362d 1830 this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
285a6bda 1831
354e15ab
DE
1832 // Loop over the fields (series). Go from the last to the first,
1833 // because if they're stacked that's how we accumulate the values.
43af96e7 1834
354e15ab
DE
1835 var cumulative_y = []; // For stacked series.
1836 var datasets = [];
1837
f09fc545
DV
1838 var extremes = {}; // series name -> [low, high]
1839
354e15ab
DE
1840 // Loop over all fields and create datasets
1841 for (var i = data[0].length - 1; i >= 1; i--) {
1cf11047
DV
1842 if (!this.visibility()[i - 1]) continue;
1843
f09fc545 1844 var seriesName = this.attr_("labels")[i];
450fe64b
DV
1845 var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
1846
6a1aa64f
DV
1847 var series = [];
1848 for (var j = 0; j < data.length; j++) {
4a634fc7 1849 if (data[j][i] != null || !connectSeparatedPoints) {
f032c51d 1850 var date = data[j][0];
563c70ca 1851 series.push([date, data[j][i]]);
f032c51d 1852 }
6a1aa64f 1853 }
2f5e7e1a
DV
1854
1855 // TODO(danvk): move this into predraw_. It's insane to do it here.
6a1aa64f
DV
1856 series = this.rollingAverage(series, this.rollPeriod_);
1857
1858 // Prune down to the desired range, if necessary (for zooming)
1a26f3fb
DV
1859 // Because there can be lines going to points outside of the visible area,
1860 // we actually prune to visible points, plus one on either side.
9922b78b 1861 var bars = this.attr_("errorBars") || this.attr_("customBars");
6a1aa64f
DV
1862 if (this.dateWindow_) {
1863 var low = this.dateWindow_[0];
1864 var high= this.dateWindow_[1];
1865 var pruned = [];
1a26f3fb
DV
1866 // TODO(danvk): do binary search instead of linear search.
1867 // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
1868 var firstIdx = null, lastIdx = null;
6a1aa64f 1869 for (var k = 0; k < series.length; k++) {
1a26f3fb
DV
1870 if (series[k][0] >= low && firstIdx === null) {
1871 firstIdx = k;
1872 }
1873 if (series[k][0] <= high) {
1874 lastIdx = k;
6a1aa64f
DV
1875 }
1876 }
1a26f3fb
DV
1877 if (firstIdx === null) firstIdx = 0;
1878 if (firstIdx > 0) firstIdx--;
1879 if (lastIdx === null) lastIdx = series.length - 1;
1880 if (lastIdx < series.length - 1) lastIdx++;
16269f6e 1881 this.boundaryIds_[i-1] = [firstIdx, lastIdx];
1a26f3fb
DV
1882 for (var k = firstIdx; k <= lastIdx; k++) {
1883 pruned.push(series[k]);
6a1aa64f
DV
1884 }
1885 series = pruned;
16269f6e
NAG
1886 } else {
1887 this.boundaryIds_[i-1] = [0, series.length-1];
6a1aa64f
DV
1888 }
1889
f09fc545 1890 var seriesExtremes = this.extremeValues_(series);
5011e7a1 1891
6a1aa64f 1892 if (bars) {
354e15ab
DE
1893 for (var j=0; j<series.length; j++) {
1894 val = [series[j][0], series[j][1][0], series[j][1][1], series[j][1][2]];
1895 series[j] = val;
1896 }
43af96e7 1897 } else if (this.attr_("stackedGraph")) {
43af96e7
NK
1898 var l = series.length;
1899 var actual_y;
1900 for (var j = 0; j < l; j++) {
354e15ab
DE
1901 // If one data set has a NaN, let all subsequent stacked
1902 // sets inherit the NaN -- only start at 0 for the first set.
1903 var x = series[j][0];
41b0f691 1904 if (cumulative_y[x] === undefined) {
354e15ab 1905 cumulative_y[x] = 0;
41b0f691 1906 }
43af96e7
NK
1907
1908 actual_y = series[j][1];
354e15ab 1909 cumulative_y[x] += actual_y;
43af96e7 1910
354e15ab 1911 series[j] = [x, cumulative_y[x]]
43af96e7 1912
41b0f691
DV
1913 if (cumulative_y[x] > seriesExtremes[1]) {
1914 seriesExtremes[1] = cumulative_y[x];
1915 }
1916 if (cumulative_y[x] < seriesExtremes[0]) {
1917 seriesExtremes[0] = cumulative_y[x];
1918 }
43af96e7 1919 }
6a1aa64f 1920 }
41b0f691 1921 extremes[seriesName] = seriesExtremes;
354e15ab
DE
1922
1923 datasets[i] = series;
6a1aa64f
DV
1924 }
1925
354e15ab 1926 for (var i = 1; i < datasets.length; i++) {
4523c1f6 1927 if (!this.visibility()[i - 1]) continue;
354e15ab 1928 this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
43af96e7
NK
1929 }
1930
26ca7938
DV
1931 // TODO(danvk): this method doesn't need to return anything.
1932 var out = this.computeYAxisRanges_(extremes);
f09fc545
DV
1933 var axes = out[0];
1934 var seriesToAxisMap = out[1];
9012dd21 1935 this.layout_.updateOptions( { yAxes: axes,
ea4942ed 1936 seriesToAxisMap: seriesToAxisMap
9012dd21 1937 } );
f09fc545 1938
6a1aa64f
DV
1939 this.addXTicks_();
1940
1941 // Tell PlotKit to use this new data and render itself
d033ae1c 1942 this.layout_.updateOptions({dateWindow: this.dateWindow_});
6a1aa64f
DV
1943 this.layout_.evaluateWithError();
1944 this.plotter_.clear();
1945 this.plotter_.render();
f6401bf6 1946 this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
2f5e7e1a 1947 this.canvas_.height);
599fb4ad
DV
1948
1949 if (this.attr_("drawCallback") !== null) {
fe0b7c03 1950 this.attr_("drawCallback")(this, is_initial_draw);
599fb4ad 1951 }
6a1aa64f
DV
1952};
1953
1954/**
26ca7938
DV
1955 * Determine properties of the y-axes which are independent of the data
1956 * currently being displayed. This includes things like the number of axes and
1957 * the style of the axes. It does not include the range of each axis and its
1958 * tick marks.
1959 * This fills in this.axes_ and this.seriesToAxisMap_.
1960 * axes_ = [ { options } ]
1961 * seriesToAxisMap_ = { seriesName: 0, seriesName2: 1, ... }
1962 * indices are into the axes_ array.
f09fc545 1963 */
26ca7938
DV
1964Dygraph.prototype.computeYAxes_ = function() {
1965 this.axes_ = [{}]; // always have at least one y-axis.
1966 this.seriesToAxisMap_ = {};
1967
1968 // Get a list of series names.
1969 var labels = this.attr_("labels");
1970 var series = [];
1971 for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1);
f09fc545
DV
1972
1973 // all options which could be applied per-axis:
1974 var axisOptions = [
1975 'includeZero',
1976 'valueRange',
1977 'labelsKMB',
1978 'labelsKMG2',
1979 'pixelsPerYLabel',
1980 'yAxisLabelWidth',
1981 'axisLabelFontSize',
1982 'axisTickSize'
1983 ];
1984
1985 // Copy global axis options over to the first axis.
1986 for (var i = 0; i < axisOptions.length; i++) {
1987 var k = axisOptions[i];
1988 var v = this.attr_(k);
26ca7938 1989 if (v) this.axes_[0][k] = v;
f09fc545
DV
1990 }
1991
1992 // Go through once and add all the axes.
26ca7938
DV
1993 for (var seriesName in series) {
1994 if (!series.hasOwnProperty(seriesName)) continue;
f09fc545
DV
1995 var axis = this.attr_("axis", seriesName);
1996 if (axis == null) {
26ca7938 1997 this.seriesToAxisMap_[seriesName] = 0;
f09fc545
DV
1998 continue;
1999 }
2000 if (typeof(axis) == 'object') {
2001 // Add a new axis, making a copy of its per-axis options.
2002 var opts = {};
26ca7938 2003 Dygraph.update(opts, this.axes_[0]);
f09fc545
DV
2004 Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this.
2005 Dygraph.update(opts, axis);
26ca7938
DV
2006 this.axes_.push(opts);
2007 this.seriesToAxisMap_[seriesName] = this.axes_.length - 1;
f09fc545
DV
2008 }
2009 }
2010
2011 // Go through one more time and assign series to an axis defined by another
2012 // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } }
26ca7938
DV
2013 for (var seriesName in series) {
2014 if (!series.hasOwnProperty(seriesName)) continue;
f09fc545
DV
2015 var axis = this.attr_("axis", seriesName);
2016 if (typeof(axis) == 'string') {
26ca7938 2017 if (!this.seriesToAxisMap_.hasOwnProperty(axis)) {
f09fc545
DV
2018 this.error("Series " + seriesName + " wants to share a y-axis with " +
2019 "series " + axis + ", which does not define its own axis.");
2020 return null;
2021 }
26ca7938
DV
2022 var idx = this.seriesToAxisMap_[axis];
2023 this.seriesToAxisMap_[seriesName] = idx;
f09fc545
DV
2024 }
2025 }
26ca7938
DV
2026};
2027
2028/**
2029 * Returns the number of y-axes on the chart.
2030 * @return {Number} the number of axes.
2031 */
2032Dygraph.prototype.numAxes = function() {
2033 var last_axis = 0;
2034 for (var series in this.seriesToAxisMap_) {
2035 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2036 var idx = this.seriesToAxisMap_[series];
2037 if (idx > last_axis) last_axis = idx;
2038 }
2039 return 1 + last_axis;
2040};
2041
2042/**
2043 * Determine the value range and tick marks for each axis.
2044 * @param {Object} extremes A mapping from seriesName -> [low, high]
2045 * This fills in the valueRange and ticks fields in each entry of this.axes_.
2046 */
2047Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
2048 // Build a map from axis number -> [list of series names]
2049 var seriesForAxis = [];
2050 for (var series in this.seriesToAxisMap_) {
2051 if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue;
2052 var idx = this.seriesToAxisMap_[series];
2053 while (seriesForAxis.length <= idx) seriesForAxis.push([]);
2054 seriesForAxis[idx].push(series);
2055 }
f09fc545
DV
2056
2057 // Compute extreme values, a span and tick marks for each axis.
26ca7938
DV
2058 for (var i = 0; i < this.axes_.length; i++) {
2059 var axis = this.axes_[i];
d58ae307
DV
2060 if (axis.valueWindow) {
2061 // This is only set if the user has zoomed on the y-axis. It is never set
2062 // by a user. It takes precedence over axis.valueRange because, if you set
2063 // valueRange, you'd still expect to be able to pan.
2064 axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]];
2065 } else if (axis.valueRange) {
2066 // This is a user-set value range for this axis.
26ca7938
DV
2067 axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]];
2068 } else {
f09fc545
DV
2069 // Calcuate the extremes of extremes.
2070 var series = seriesForAxis[i];
2071 var minY = Infinity; // extremes[series[0]][0];
2072 var maxY = -Infinity; // extremes[series[0]][1];
2073 for (var j = 0; j < series.length; j++) {
2074 minY = Math.min(extremes[series[j]][0], minY);
e3b6727e 2075 maxY = Math.max(extremes[series[j]][1], maxY);
f09fc545
DV
2076 }
2077 if (axis.includeZero && minY > 0) minY = 0;
2078
2079 // Add some padding and round up to an integer to be human-friendly.
2080 var span = maxY - minY;
2081 // special case: if we have no sense of scale, use +/-10% of the sole value.
2082 if (span == 0) { span = maxY; }
2083 var maxAxisY = maxY + 0.1 * span;
2084 var minAxisY = minY - 0.1 * span;
2085
2086 // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense.
2f5e7e1a
DV
2087 if (!this.attr_("avoidMinZero")) {
2088 if (minAxisY < 0 && minY >= 0) minAxisY = 0;
2089 if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0;
2090 }
f09fc545
DV
2091
2092 if (this.attr_("includeZero")) {
2093 if (maxY < 0) maxAxisY = 0;
2094 if (minY > 0) minAxisY = 0;
2095 }
2096
26ca7938 2097 axis.computedValueRange = [minAxisY, maxAxisY];
f09fc545
DV
2098 }
2099
0d64e596
DV
2100 // Add ticks. By default, all axes inherit the tick positions of the
2101 // primary axis. However, if an axis is specifically marked as having
2102 // independent ticks, then that is permissible as well.
2103 if (i == 0 || axis.independentTicks) {
2104 axis.ticks =
2105 Dygraph.numericTicks(axis.computedValueRange[0],
2106 axis.computedValueRange[1],
2107 this,
2108 axis);
2109 } else {
2110 var p_axis = this.axes_[0];
2111 var p_ticks = p_axis.ticks;
2112 var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0];
2113 var scale = axis.computedValueRange[1] - axis.computedValueRange[0];
2114 var tick_values = [];
2115 for (var i = 0; i < p_ticks.length; i++) {
2116 var y_frac = (p_ticks[i].v - p_axis.computedValueRange[0]) / p_scale;
2117 var y_val = axis.computedValueRange[0] + y_frac * scale;
2118 tick_values.push(y_val);
2119 }
2120
2121 axis.ticks =
2122 Dygraph.numericTicks(axis.computedValueRange[0],
2123 axis.computedValueRange[1],
2124 this, axis, tick_values);
2125 }
f09fc545
DV
2126 }
2127
26ca7938 2128 return [this.axes_, this.seriesToAxisMap_];
f09fc545
DV
2129};
2130
2131/**
6a1aa64f
DV
2132 * Calculates the rolling average of a data set.
2133 * If originalData is [label, val], rolls the average of those.
2134 * If originalData is [label, [, it's interpreted as [value, stddev]
2135 * and the roll is returned in the same form, with appropriately reduced
2136 * stddev for each value.
2137 * Note that this is where fractional input (i.e. '5/10') is converted into
2138 * decimal values.
2139 * @param {Array} originalData The data in the appropriate format (see above)
2140 * @param {Number} rollPeriod The number of days over which to average the data
2141 */
285a6bda 2142Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) {
6a1aa64f
DV
2143 if (originalData.length < 2)
2144 return originalData;
2145 var rollPeriod = Math.min(rollPeriod, originalData.length - 1);
2146 var rollingData = [];
285a6bda 2147 var sigma = this.attr_("sigma");
6a1aa64f
DV
2148
2149 if (this.fractions_) {
2150 var num = 0;
2151 var den = 0; // numerator/denominator
2152 var mult = 100.0;
2153 for (var i = 0; i < originalData.length; i++) {
2154 num += originalData[i][1][0];
2155 den += originalData[i][1][1];
2156 if (i - rollPeriod >= 0) {
2157 num -= originalData[i - rollPeriod][1][0];
2158 den -= originalData[i - rollPeriod][1][1];
2159 }
2160
2161 var date = originalData[i][0];
2162 var value = den ? num / den : 0.0;
285a6bda 2163 if (this.attr_("errorBars")) {
6a1aa64f
DV
2164 if (this.wilsonInterval_) {
2165 // For more details on this confidence interval, see:
2166 // http://en.wikipedia.org/wiki/Binomial_confidence_interval
2167 if (den) {
2168 var p = value < 0 ? 0 : value, n = den;
2169 var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n));
2170 var denom = 1 + sigma * sigma / den;
2171 var low = (p + sigma * sigma / (2 * den) - pm) / denom;
2172 var high = (p + sigma * sigma / (2 * den) + pm) / denom;
2173 rollingData[i] = [date,
2174 [p * mult, (p - low) * mult, (high - p) * mult]];
2175 } else {
2176 rollingData[i] = [date, [0, 0, 0]];
2177 }
2178 } else {
2179 var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0;
2180 rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]];
2181 }
2182 } else {
2183 rollingData[i] = [date, mult * value];
2184 }
2185 }
9922b78b 2186 } else if (this.attr_("customBars")) {
f6885d6a
DV
2187 var low = 0;
2188 var mid = 0;
2189 var high = 0;
2190 var count = 0;
6a1aa64f
DV
2191 for (var i = 0; i < originalData.length; i++) {
2192 var data = originalData[i][1];
2193 var y = data[1];
2194 rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]];
f6885d6a 2195
8b91c51f 2196 if (y != null && !isNaN(y)) {
49a7d0d5
DV
2197 low += data[0];
2198 mid += y;
2199 high += data[2];
2200 count += 1;
2201 }
f6885d6a
DV
2202 if (i - rollPeriod >= 0) {
2203 var prev = originalData[i - rollPeriod];
8b91c51f 2204 if (prev[1][1] != null && !isNaN(prev[1][1])) {
49a7d0d5
DV
2205 low -= prev[1][0];
2206 mid -= prev[1][1];
2207 high -= prev[1][2];
2208 count -= 1;
2209 }
f6885d6a
DV
2210 }
2211 rollingData[i] = [originalData[i][0], [ 1.0 * mid / count,
2212 1.0 * (mid - low) / count,
2213 1.0 * (high - mid) / count ]];
2769de62 2214 }
6a1aa64f
DV
2215 } else {
2216 // Calculate the rolling average for the first rollPeriod - 1 points where
2217 // there is not enough data to roll over the full number of days
2218 var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2);
285a6bda 2219 if (!this.attr_("errorBars")){
5011e7a1
DV
2220 if (rollPeriod == 1) {
2221 return originalData;
2222 }
2223
2847c1cf 2224 for (var i = 0; i < originalData.length; i++) {
6a1aa64f 2225 var sum = 0;
5011e7a1 2226 var num_ok = 0;
2847c1cf
DV
2227 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
2228 var y = originalData[j][1];
8b91c51f 2229 if (y == null || isNaN(y)) continue;
5011e7a1 2230 num_ok++;
2847c1cf 2231 sum += originalData[j][1];
6a1aa64f 2232 }
5011e7a1 2233 if (num_ok) {
2847c1cf 2234 rollingData[i] = [originalData[i][0], sum / num_ok];
5011e7a1 2235 } else {
2847c1cf 2236 rollingData[i] = [originalData[i][0], null];
5011e7a1 2237 }
6a1aa64f 2238 }
2847c1cf
DV
2239
2240 } else {
2241 for (var i = 0; i < originalData.length; i++) {
6a1aa64f
DV
2242 var sum = 0;
2243 var variance = 0;
5011e7a1 2244 var num_ok = 0;
2847c1cf 2245 for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) {
5011e7a1 2246 var y = originalData[j][1][0];
8b91c51f 2247 if (y == null || isNaN(y)) continue;
5011e7a1 2248 num_ok++;
6a1aa64f
DV
2249 sum += originalData[j][1][0];
2250 variance += Math.pow(originalData[j][1][1], 2);
2251 }
5011e7a1
DV
2252 if (num_ok) {
2253 var stddev = Math.sqrt(variance) / num_ok;
2254 rollingData[i] = [originalData[i][0],
2255 [sum / num_ok, sigma * stddev, sigma * stddev]];
2256 } else {
2257 rollingData[i] = [originalData[i][0], [null, null, null]];
2258 }
6a1aa64f
DV
2259 }
2260 }
2261 }
2262
2263 return rollingData;
2264};
2265
2266/**
2267 * Parses a date, returning the number of milliseconds since epoch. This can be
285a6bda
DV
2268 * passed in as an xValueParser in the Dygraph constructor.
2269 * TODO(danvk): enumerate formats that this understands.
6a1aa64f
DV
2270 * @param {String} A date in YYYYMMDD format.
2271 * @return {Number} Milliseconds since epoch.
2272 * @public
2273 */
285a6bda 2274Dygraph.dateParser = function(dateStr, self) {
6a1aa64f 2275 var dateStrSlashed;
285a6bda 2276 var d;
986a5026 2277 if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12'
6a1aa64f 2278 dateStrSlashed = dateStr.replace("-", "/", "g");
353a0294
DV
2279 while (dateStrSlashed.search("-") != -1) {
2280 dateStrSlashed = dateStrSlashed.replace("-", "/");
2281 }
285a6bda 2282 d = Date.parse(dateStrSlashed);
2769de62 2283 } else if (dateStr.length == 8) { // e.g. '20090712'
285a6bda 2284 // TODO(danvk): remove support for this format. It's confusing.
6a1aa64f
DV
2285 dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2)
2286 + "/" + dateStr.substr(6,2);
285a6bda 2287 d = Date.parse(dateStrSlashed);
2769de62
DV
2288 } else {
2289 // Any format that Date.parse will accept, e.g. "2009/07/12" or
2290 // "2009/07/12 12:34:56"
285a6bda
DV
2291 d = Date.parse(dateStr);
2292 }
2293
2294 if (!d || isNaN(d)) {
2295 self.error("Couldn't parse " + dateStr + " as a date");
2296 }
2297 return d;
2298};
2299
2300/**
2301 * Detects the type of the str (date or numeric) and sets the various
2302 * formatting attributes in this.attrs_ based on this type.
2303 * @param {String} str An x value.
2304 * @private
2305 */
2306Dygraph.prototype.detectTypeFromString_ = function(str) {
2307 var isDate = false;
2308 if (str.indexOf('-') >= 0 ||
2309 str.indexOf('/') >= 0 ||
2310 isNaN(parseFloat(str))) {
2311 isDate = true;
2312 } else if (str.length == 8 && str > '19700101' && str < '20371231') {
2313 // TODO(danvk): remove support for this format.
2314 isDate = true;
2315 }
2316
2317 if (isDate) {
2318 this.attrs_.xValueFormatter = Dygraph.dateString_;
2319 this.attrs_.xValueParser = Dygraph.dateParser;
2320 this.attrs_.xTicker = Dygraph.dateTicker;
bf640e56 2321 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
2322 } else {
2323 this.attrs_.xValueFormatter = function(x) { return x; };
2324 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2325 this.attrs_.xTicker = Dygraph.numericTicks;
bf640e56 2326 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
6a1aa64f 2327 }
6a1aa64f
DV
2328};
2329
2330/**
2331 * Parses a string in a special csv format. We expect a csv file where each
2332 * line is a date point, and the first field in each line is the date string.
2333 * We also expect that all remaining fields represent series.
285a6bda 2334 * if the errorBars attribute is set, then interpret the fields as:
6a1aa64f
DV
2335 * date, series1, stddev1, series2, stddev2, ...
2336 * @param {Array.<Object>} data See above.
2337 * @private
285a6bda
DV
2338 *
2339 * @return Array.<Object> An array with one entry for each row. These entries
2340 * are an array of cells in that row. The first entry is the parsed x-value for
2341 * the row. The second, third, etc. are the y-values. These can take on one of
2342 * three forms, depending on the CSV and constructor parameters:
2343 * 1. numeric value
2344 * 2. [ value, stddev ]
2345 * 3. [ low value, center value, high value ]
6a1aa64f 2346 */
285a6bda 2347Dygraph.prototype.parseCSV_ = function(data) {
6a1aa64f
DV
2348 var ret = [];
2349 var lines = data.split("\n");
3d67f03b
DV
2350
2351 // Use the default delimiter or fall back to a tab if that makes sense.
2352 var delim = this.attr_('delimiter');
2353 if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) {
2354 delim = '\t';
2355 }
2356
285a6bda 2357 var start = 0;
6a1aa64f 2358 if (this.labelsFromCSV_) {
285a6bda 2359 start = 1;
3d67f03b 2360 this.attrs_.labels = lines[0].split(delim);
6a1aa64f
DV
2361 }
2362
03b522a4
DV
2363 // Parse the x as a float or return null if it's not a number.
2364 var parseFloatOrNull = function(x) {
41333ec0
DV
2365 var val = parseFloat(x);
2366 return isNaN(val) ? null : val;
03b522a4
DV
2367 };
2368
285a6bda
DV
2369 var xParser;
2370 var defaultParserSet = false; // attempt to auto-detect x value type
2371 var expectedCols = this.attr_("labels").length;
987840a2 2372 var outOfOrder = false;
6a1aa64f
DV
2373 for (var i = start; i < lines.length; i++) {
2374 var line = lines[i];
2375 if (line.length == 0) continue; // skip blank lines
3d67f03b
DV
2376 if (line[0] == '#') continue; // skip comment lines
2377 var inFields = line.split(delim);
285a6bda 2378 if (inFields.length < 2) continue;
6a1aa64f
DV
2379
2380 var fields = [];
285a6bda
DV
2381 if (!defaultParserSet) {
2382 this.detectTypeFromString_(inFields[0]);
2383 xParser = this.attr_("xValueParser");
2384 defaultParserSet = true;
2385 }
2386 fields[0] = xParser(inFields[0], this);
6a1aa64f
DV
2387
2388 // If fractions are expected, parse the numbers as "A/B"
2389 if (this.fractions_) {
2390 for (var j = 1; j < inFields.length; j++) {
2391 // TODO(danvk): figure out an appropriate way to flag parse errors.
2392 var vals = inFields[j].split("/");
03b522a4 2393 fields[j] = [parseFloatOrNull(vals[0]), parseFloatOrNull(vals[1])];
6a1aa64f 2394 }
285a6bda 2395 } else if (this.attr_("errorBars")) {
6a1aa64f
DV
2396 // If there are error bars, values are (value, stddev) pairs
2397 for (var j = 1; j < inFields.length; j += 2)
03b522a4
DV
2398 fields[(j + 1) / 2] = [parseFloatOrNull(inFields[j]),
2399 parseFloatOrNull(inFields[j + 1])];
9922b78b 2400 } else if (this.attr_("customBars")) {
6a1aa64f
DV
2401 // Bars are a low;center;high tuple
2402 for (var j = 1; j < inFields.length; j++) {
2403 var vals = inFields[j].split(";");
03b522a4
DV
2404 fields[j] = [ parseFloatOrNull(vals[0]),
2405 parseFloatOrNull(vals[1]),
2406 parseFloatOrNull(vals[2]) ];
6a1aa64f
DV
2407 }
2408 } else {
2409 // Values are just numbers
285a6bda 2410 for (var j = 1; j < inFields.length; j++) {
03b522a4 2411 fields[j] = parseFloatOrNull(inFields[j]);
285a6bda 2412 }
6a1aa64f 2413 }
987840a2
DV
2414 if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) {
2415 outOfOrder = true;
2416 }
6a1aa64f 2417 ret.push(fields);
285a6bda
DV
2418
2419 if (fields.length != expectedCols) {
2420 this.error("Number of columns in line " + i + " (" + fields.length +
2421 ") does not agree with number of labels (" + expectedCols +
2422 ") " + line);
2423 }
6a1aa64f 2424 }
987840a2
DV
2425
2426 if (outOfOrder) {
2427 this.warn("CSV is out of order; order it correctly to speed loading.");
2428 ret.sort(function(a,b) { return a[0] - b[0] });
2429 }
2430
6a1aa64f
DV
2431 return ret;
2432};
2433
2434/**
285a6bda
DV
2435 * The user has provided their data as a pre-packaged JS array. If the x values
2436 * are numeric, this is the same as dygraphs' internal format. If the x values
2437 * are dates, we need to convert them from Date objects to ms since epoch.
2438 * @param {Array.<Object>} data
2439 * @return {Array.<Object>} data with numeric x values.
2440 */
2441Dygraph.prototype.parseArray_ = function(data) {
2442 // Peek at the first x value to see if it's numeric.
2443 if (data.length == 0) {
2444 this.error("Can't plot empty data set");
2445 return null;
2446 }
2447 if (data[0].length == 0) {
2448 this.error("Data set cannot contain an empty row");
2449 return null;
2450 }
2451
2452 if (this.attr_("labels") == null) {
2453 this.warn("Using default labels. Set labels explicitly via 'labels' " +
2454 "in the options parameter");
2455 this.attrs_.labels = [ "X" ];
2456 for (var i = 1; i < data[0].length; i++) {
2457 this.attrs_.labels.push("Y" + i);
2458 }
2459 }
2460
2dda3850 2461 if (Dygraph.isDateLike(data[0][0])) {
285a6bda
DV
2462 // Some intelligent defaults for a date x-axis.
2463 this.attrs_.xValueFormatter = Dygraph.dateString_;
bf640e56 2464 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
285a6bda
DV
2465 this.attrs_.xTicker = Dygraph.dateTicker;
2466
2467 // Assume they're all dates.
e3ab7b40 2468 var parsedData = Dygraph.clone(data);
285a6bda
DV
2469 for (var i = 0; i < data.length; i++) {
2470 if (parsedData[i].length == 0) {
a323ff4a 2471 this.error("Row " + (1 + i) + " of data is empty");
285a6bda
DV
2472 return null;
2473 }
2474 if (parsedData[i][0] == null
3a909ec5
DV
2475 || typeof(parsedData[i][0].getTime) != 'function'
2476 || isNaN(parsedData[i][0].getTime())) {
be96a1f5 2477 this.error("x value in row " + (1 + i) + " is not a Date");
285a6bda
DV
2478 return null;
2479 }
2480 parsedData[i][0] = parsedData[i][0].getTime();
2481 }
2482 return parsedData;
2483 } else {
2484 // Some intelligent defaults for a numeric x-axis.
2485 this.attrs_.xValueFormatter = function(x) { return x; };
2486 this.attrs_.xTicker = Dygraph.numericTicks;
2487 return data;
2488 }
2489};
2490
2491/**
79420a1e
DV
2492 * Parses a DataTable object from gviz.
2493 * The data is expected to have a first column that is either a date or a
2494 * number. All subsequent columns must be numbers. If there is a clear mismatch
2495 * between this.xValueParser_ and the type of the first column, it will be
a685723c 2496 * fixed. Fills out rawData_.
79420a1e
DV
2497 * @param {Array.<Object>} data See above.
2498 * @private
2499 */
285a6bda 2500Dygraph.prototype.parseDataTable_ = function(data) {
79420a1e
DV
2501 var cols = data.getNumberOfColumns();
2502 var rows = data.getNumberOfRows();
2503
d955e223 2504 var indepType = data.getColumnType(0);
4440f6c8 2505 if (indepType == 'date' || indepType == 'datetime') {
285a6bda
DV
2506 this.attrs_.xValueFormatter = Dygraph.dateString_;
2507 this.attrs_.xValueParser = Dygraph.dateParser;
2508 this.attrs_.xTicker = Dygraph.dateTicker;
bf640e56 2509 this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
33127159 2510 } else if (indepType == 'number') {
285a6bda
DV
2511 this.attrs_.xValueFormatter = function(x) { return x; };
2512 this.attrs_.xValueParser = function(x) { return parseFloat(x); };
2513 this.attrs_.xTicker = Dygraph.numericTicks;
bf640e56 2514 this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter;
285a6bda 2515 } else {
987840a2
DV
2516 this.error("only 'date', 'datetime' and 'number' types are supported for " +
2517 "column 1 of DataTable input (Got '" + indepType + "')");
79420a1e
DV
2518 return null;
2519 }
2520
a685723c
DV
2521 // Array of the column indices which contain data (and not annotations).
2522 var colIdx = [];
2523 var annotationCols = {}; // data index -> [annotation cols]
2524 var hasAnnotations = false;
2525 for (var i = 1; i < cols; i++) {
2526 var type = data.getColumnType(i);
2527 if (type == 'number') {
2528 colIdx.push(i);
2529 } else if (type == 'string' && this.attr_('displayAnnotations')) {
2530 // This is OK -- it's an annotation column.
2531 var dataIdx = colIdx[colIdx.length - 1];
2532 if (!annotationCols.hasOwnProperty(dataIdx)) {
2533 annotationCols[dataIdx] = [i];
2534 } else {
2535 annotationCols[dataIdx].push(i);
2536 }
2537 hasAnnotations = true;
2538 } else {
2539 this.error("Only 'number' is supported as a dependent type with Gviz." +
2540 " 'string' is only supported if displayAnnotations is true");
2541 }
2542 }
2543
2544 // Read column labels
2545 // TODO(danvk): add support back for errorBars
2546 var labels = [data.getColumnLabel(0)];
2547 for (var i = 0; i < colIdx.length; i++) {
2548 labels.push(data.getColumnLabel(colIdx[i]));
f9348814 2549 if (this.attr_("errorBars")) i += 1;
a685723c
DV
2550 }
2551 this.attrs_.labels = labels;
2552 cols = labels.length;
2553
79420a1e 2554 var ret = [];
987840a2 2555 var outOfOrder = false;
a685723c 2556 var annotations = [];
79420a1e
DV
2557 for (var i = 0; i < rows; i++) {
2558 var row = [];
debe4434
DV
2559 if (typeof(data.getValue(i, 0)) === 'undefined' ||
2560 data.getValue(i, 0) === null) {
129569a5
FD
2561 this.warn("Ignoring row " + i +
2562 " of DataTable because of undefined or null first column.");
debe4434
DV
2563 continue;
2564 }
2565
c21d2c2d 2566 if (indepType == 'date' || indepType == 'datetime') {
d955e223
DV
2567 row.push(data.getValue(i, 0).getTime());
2568 } else {
2569 row.push(data.getValue(i, 0));
2570 }
3e3f84e4 2571 if (!this.attr_("errorBars")) {
a685723c
DV
2572 for (var j = 0; j < colIdx.length; j++) {
2573 var col = colIdx[j];
2574 row.push(data.getValue(i, col));
2575 if (hasAnnotations &&
2576 annotationCols.hasOwnProperty(col) &&
2577 data.getValue(i, annotationCols[col][0]) != null) {
2578 var ann = {};
2579 ann.series = data.getColumnLabel(col);
2580 ann.xval = row[0];
2581 ann.shortText = String.fromCharCode(65 /* A */ + annotations.length)
2582 ann.text = '';
2583 for (var k = 0; k < annotationCols[col].length; k++) {
2584 if (k) ann.text += "\n";
2585 ann.text += data.getValue(i, annotationCols[col][k]);
2586 }
2587 annotations.push(ann);
2588 }
3e3f84e4
DV
2589 }
2590 } else {
2591 for (var j = 0; j < cols - 1; j++) {
2592 row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]);
2593 }
79420a1e 2594 }
987840a2
DV
2595 if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) {
2596 outOfOrder = true;
2597 }
243d96e8 2598 ret.push(row);
79420a1e 2599 }
987840a2
DV
2600
2601 if (outOfOrder) {
2602 this.warn("DataTable is out of order; order it correctly to speed loading.");
2603 ret.sort(function(a,b) { return a[0] - b[0] });
2604 }
a685723c
DV
2605 this.rawData_ = ret;
2606
2607 if (annotations.length > 0) {
2608 this.setAnnotations(annotations, true);
2609 }
79420a1e
DV
2610}
2611
24e5350c 2612// These functions are all based on MochiKit.
fc80a396
DV
2613Dygraph.update = function (self, o) {
2614 if (typeof(o) != 'undefined' && o !== null) {
2615 for (var k in o) {
85b99f0b
DV
2616 if (o.hasOwnProperty(k)) {
2617 self[k] = o[k];
2618 }
fc80a396
DV
2619 }
2620 }
2621 return self;
2622};
2623
2dda3850
DV
2624Dygraph.isArrayLike = function (o) {
2625 var typ = typeof(o);
2626 if (
c21d2c2d 2627 (typ != 'object' && !(typ == 'function' &&
2dda3850
DV
2628 typeof(o.item) == 'function')) ||
2629 o === null ||
2630 typeof(o.length) != 'number' ||
2631 o.nodeType === 3
2632 ) {
2633 return false;
2634 }
2635 return true;
2636};
2637
2638Dygraph.isDateLike = function (o) {
2639 if (typeof(o) != "object" || o === null ||
2640 typeof(o.getTime) != 'function') {
2641 return false;
2642 }
2643 return true;
2644};
2645
e3ab7b40
DV
2646Dygraph.clone = function(o) {
2647 // TODO(danvk): figure out how MochiKit's version works
2648 var r = [];
2649 for (var i = 0; i < o.length; i++) {
2650 if (Dygraph.isArrayLike(o[i])) {
2651 r.push(Dygraph.clone(o[i]));
2652 } else {
2653 r.push(o[i]);
2654 }
2655 }
2656 return r;
24e5350c
DV
2657};
2658
2dda3850 2659
79420a1e 2660/**
6a1aa64f
DV
2661 * Get the CSV data. If it's in a function, call that function. If it's in a
2662 * file, do an XMLHttpRequest to get it.
2663 * @private
2664 */
285a6bda 2665Dygraph.prototype.start_ = function() {
6a1aa64f 2666 if (typeof this.file_ == 'function') {
285a6bda 2667 // CSV string. Pretend we got it via XHR.
6a1aa64f 2668 this.loadedEvent_(this.file_());
2dda3850 2669 } else if (Dygraph.isArrayLike(this.file_)) {
285a6bda 2670 this.rawData_ = this.parseArray_(this.file_);
26ca7938 2671 this.predraw_();
79420a1e
DV
2672 } else if (typeof this.file_ == 'object' &&
2673 typeof this.file_.getColumnRange == 'function') {
2674 // must be a DataTable from gviz.
a685723c 2675 this.parseDataTable_(this.file_);
26ca7938 2676 this.predraw_();
285a6bda
DV
2677 } else if (typeof this.file_ == 'string') {
2678 // Heuristic: a newline means it's CSV data. Otherwise it's an URL.
2679 if (this.file_.indexOf('\n') >= 0) {
2680 this.loadedEvent_(this.file_);
2681 } else {
2682 var req = new XMLHttpRequest();
2683 var caller = this;
2684 req.onreadystatechange = function () {
2685 if (req.readyState == 4) {
2686 if (req.status == 200) {
2687 caller.loadedEvent_(req.responseText);
2688 }
6a1aa64f 2689 }
285a6bda 2690 };
6a1aa64f 2691
285a6bda
DV
2692 req.open("GET", this.file_, true);
2693 req.send(null);
2694 }
2695 } else {
2696 this.error("Unknown data format: " + (typeof this.file_));
6a1aa64f
DV
2697 }
2698};
2699
2700/**
2701 * Changes various properties of the graph. These can include:
2702 * <ul>
2703 * <li>file: changes the source data for the graph</li>
2704 * <li>errorBars: changes whether the data contains stddev</li>
2705 * </ul>
2706 * @param {Object} attrs The new properties and values
2707 */
285a6bda
DV
2708Dygraph.prototype.updateOptions = function(attrs) {
2709 // TODO(danvk): this is a mess. Rethink this function.
c65f2303 2710 if ('rollPeriod' in attrs) {
6a1aa64f
DV
2711 this.rollPeriod_ = attrs.rollPeriod;
2712 }
c65f2303 2713 if ('dateWindow' in attrs) {
6a1aa64f
DV
2714 this.dateWindow_ = attrs.dateWindow;
2715 }
450fe64b
DV
2716
2717 // TODO(danvk): validate per-series options.
46dde5f9
DV
2718 // Supported:
2719 // strokeWidth
2720 // pointSize
2721 // drawPoints
2722 // highlightCircleSize
450fe64b 2723
fc80a396 2724 Dygraph.update(this.user_attrs_, attrs);
87bb7958 2725 Dygraph.update(this.renderOptions_, attrs);
285a6bda
DV
2726
2727 this.labelsFromCSV_ = (this.attr_("labels") == null);
2728
2729 // TODO(danvk): this doesn't match the constructor logic
2730 this.layout_.updateOptions({ 'errorBars': this.attr_("errorBars") });
5e50289f 2731 if (attrs['file']) {
6a1aa64f
DV
2732 this.file_ = attrs['file'];
2733 this.start_();
2734 } else {
26ca7938 2735 this.predraw_();
6a1aa64f
DV
2736 }
2737};
2738
2739/**
697e70b2
DV
2740 * Resizes the dygraph. If no parameters are specified, resizes to fill the
2741 * containing div (which has presumably changed size since the dygraph was
2742 * instantiated. If the width/height are specified, the div will be resized.
964f30c6
DV
2743 *
2744 * This is far more efficient than destroying and re-instantiating a
2745 * Dygraph, since it doesn't have to reparse the underlying data.
2746 *
697e70b2
DV
2747 * @param {Number} width Width (in pixels)
2748 * @param {Number} height Height (in pixels)
2749 */
2750Dygraph.prototype.resize = function(width, height) {
e8c7ef86
DV
2751 if (this.resize_lock) {
2752 return;
2753 }
2754 this.resize_lock = true;
2755
697e70b2
DV
2756 if ((width === null) != (height === null)) {
2757 this.warn("Dygraph.resize() should be called with zero parameters or " +
2758 "two non-NULL parameters. Pretending it was zero.");
2759 width = height = null;
2760 }
2761
b16e6369 2762 // TODO(danvk): there should be a clear() method.
697e70b2 2763 this.maindiv_.innerHTML = "";
b16e6369
DV
2764 this.attrs_.labelsDiv = null;
2765
697e70b2
DV
2766 if (width) {
2767 this.maindiv_.style.width = width + "px";
2768 this.maindiv_.style.height = height + "px";
2769 this.width_ = width;
2770 this.height_ = height;
2771 } else {
2772 this.width_ = this.maindiv_.offsetWidth;
2773 this.height_ = this.maindiv_.offsetHeight;
2774 }
2775
2776 this.createInterface_();
26ca7938 2777 this.predraw_();
e8c7ef86
DV
2778
2779 this.resize_lock = false;
697e70b2
DV
2780};
2781
2782/**
6a1aa64f
DV
2783 * Adjusts the number of days in the rolling average. Updates the graph to
2784 * reflect the new averaging period.
2785 * @param {Number} length Number of days over which to average the data.
2786 */
285a6bda 2787Dygraph.prototype.adjustRoll = function(length) {
6a1aa64f 2788 this.rollPeriod_ = length;
26ca7938 2789 this.predraw_();
6a1aa64f 2790};
540d00f1 2791
f8cfec73 2792/**
1cf11047
DV
2793 * Returns a boolean array of visibility statuses.
2794 */
2795Dygraph.prototype.visibility = function() {
2796 // Do lazy-initialization, so that this happens after we know the number of
2797 // data series.
2798 if (!this.attr_("visibility")) {
f38dec01 2799 this.attrs_["visibility"] = [];
1cf11047
DV
2800 }
2801 while (this.attr_("visibility").length < this.rawData_[0].length - 1) {
f38dec01 2802 this.attr_("visibility").push(true);
1cf11047
DV
2803 }
2804 return this.attr_("visibility");
2805};
2806
2807/**
2808 * Changes the visiblity of a series.
2809 */
2810Dygraph.prototype.setVisibility = function(num, value) {
2811 var x = this.visibility();
2812 if (num < 0 && num >= x.length) {
2813 this.warn("invalid series number in setVisibility: " + num);
2814 } else {
2815 x[num] = value;
26ca7938 2816 this.predraw_();
1cf11047
DV
2817 }
2818};
2819
2820/**
5c528fa2
DV
2821 * Update the list of annotations and redraw the chart.
2822 */
a685723c 2823Dygraph.prototype.setAnnotations = function(ann, suppressDraw) {
3c51ab74
DV
2824 // Only add the annotation CSS rule once we know it will be used.
2825 Dygraph.addAnnotationRule();
5c528fa2
DV
2826 this.annotations_ = ann;
2827 this.layout_.setAnnotations(this.annotations_);
a685723c 2828 if (!suppressDraw) {
26ca7938 2829 this.predraw_();
a685723c 2830 }
5c528fa2
DV
2831};
2832
2833/**
2834 * Return the list of annotations.
2835 */
2836Dygraph.prototype.annotations = function() {
2837 return this.annotations_;
2838};
2839
46dde5f9
DV
2840/**
2841 * Get the index of a series (column) given its name. The first column is the
2842 * x-axis, so the data series start with index 1.
2843 */
2844Dygraph.prototype.indexFromSetName = function(name) {
2845 var labels = this.attr_("labels");
2846 for (var i = 0; i < labels.length; i++) {
2847 if (labels[i] == name) return i;
2848 }
2849 return null;
2850};
2851
5c528fa2
DV
2852Dygraph.addAnnotationRule = function() {
2853 if (Dygraph.addedAnnotationCSS) return;
2854
18a016b1
DV
2855 var mysheet;
2856 if (document.styleSheets.length > 0) {
2857 mysheet = document.styleSheets[0];
2858 } else {
2859 var styleSheetElement = document.createElement("style");
2860 styleSheetElement.type = "text/css";
2861 document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
2862 for(i = 0; i < document.styleSheets.length; i++) {
2863 if (document.styleSheets[i].disabled) continue;
2864 mysheet = document.styleSheets[i];
2865 }
2866 }
2867
5c528fa2
DV
2868 var rule = "border: 1px solid black; " +
2869 "background-color: white; " +
2870 "text-align: center;";
2871 if (mysheet.insertRule) { // Firefox
52e266a3
DV
2872 var idx = mysheet.cssRules ? mysheet.cssRules.length : 0;
2873 mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx);
5c528fa2
DV
2874 } else if (mysheet.addRule) { // IE
2875 mysheet.addRule(".dygraphDefaultAnnotation", rule);
2876 }
2877
2878 Dygraph.addedAnnotationCSS = true;
2879}
2880
2881/**
f8cfec73
DV
2882 * Create a new canvas element. This is more complex than a simple
2883 * document.createElement("canvas") because of IE and excanvas.
2884 */
2885Dygraph.createCanvas = function() {
2886 var canvas = document.createElement("canvas");
2887
2888 isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
8b8f2d59 2889 if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) {
f8cfec73
DV
2890 canvas = G_vmlCanvasManager.initElement(canvas);
2891 }
2892
2893 return canvas;
2894};
2895
540d00f1
DV
2896
2897/**
285a6bda 2898 * A wrapper around Dygraph that implements the gviz API.
540d00f1
DV
2899 * @param {Object} container The DOM object the visualization should live in.
2900 */
285a6bda 2901Dygraph.GVizChart = function(container) {
540d00f1
DV
2902 this.container = container;
2903}
2904
285a6bda 2905Dygraph.GVizChart.prototype.draw = function(data, options) {
540d00f1 2906 this.container.innerHTML = '';
285a6bda 2907 this.date_graph = new Dygraph(this.container, data, options);
540d00f1 2908}
285a6bda 2909
239c712d
NAG
2910/**
2911 * Google charts compatible setSelection
50360fd0 2912 * Only row selection is supported, all points in the row will be highlighted
239c712d
NAG
2913 * @param {Array} array of the selected cells
2914 * @public
2915 */
2916Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
2917 var row = false;
2918 if (selection_array.length) {
2919 row = selection_array[0].row;
2920 }
2921 this.date_graph.setSelection(row);
2922}
2923
103b7292
NAG
2924/**
2925 * Google charts compatible getSelection implementation
2926 * @return {Array} array of the selected cells
2927 * @public
2928 */
2929Dygraph.GVizChart.prototype.getSelection = function() {
2930 var selection = [];
50360fd0 2931
103b7292 2932 var row = this.date_graph.getSelection();
50360fd0 2933
103b7292 2934 if (row < 0) return selection;
50360fd0 2935
103b7292
NAG
2936 col = 1;
2937 for (var i in this.date_graph.layout_.datasets) {
2938 selection.push({row: row, column: col});
2939 col++;
2940 }
2941
2942 return selection;
2943}
2944
285a6bda
DV
2945// Older pages may still use this name.
2946DateGraph = Dygraph;