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