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