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